/* The free cooking tools (/tools/), on top of /site/tapas.css. The calculator sits in a white
   panel at the top, the answer in a quiet well inside it, and the explanation below is set as an
   article (.tc-prose). The class names inside the form are the ones client/*.ts and views.ts use. */

.tl-head { margin-bottom: var(--s6); }

/* ---- the calculator ---- */
.tl-panel { max-width: 720px; background: var(--surface); border-radius: var(--r-card); padding: 32px; border: 1px solid var(--line-strong); }
form.tool label, form.tool legend { display: block; font: 600 var(--type-sm); color: var(--ink); margin: 0 0 8px; padding: 0; }
form.tool fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
form.tool .field { margin: 0 0 20px; min-width: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tool-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; }

form.tool input, form.tool select, form.tool textarea {
  display: block; width: 100%; min-height: 48px;
  font: 400 var(--type-md); /* 16px keeps iOS Safari from zooming in on focus */
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-input);
  padding: 12px 14px; transition: border-color 140ms ease, box-shadow 140ms ease;
}
form.tool select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23655A5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
form.tool textarea { resize: vertical; line-height: 1.55; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
form.tool input:hover, form.tool select:hover, form.tool textarea:hover { border-color: var(--ink-3); }
form.tool input:focus, form.tool select:focus, form.tool textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176, 49, 73, 0.25); }

/* Quick sizes: a row of quiet pills. */
form.tool .quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.tool .quick legend { width: 100%; }
form.tool button {
  font: 500 var(--type-sm); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); min-height: 40px; padding: 0 16px; cursor: pointer;
  transition: background-color 140ms ease;
}
form.tool button:hover { border-color: var(--ink-3); }
form.tool button:focus-visible { outline: none; box-shadow: var(--focus); }
form.tool button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
form.tool button[aria-pressed="true"]:hover { background: var(--ink); }
/* Copying the answer is the tool's one action, so it is the filled button. */
form.tool button.tl-copy { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
form.tool button.tl-copy:hover { background: var(--accent-hover); }

/* The answer: a quiet well set off from the inputs. */
.tool-result { background: var(--bg-raised); border-radius: var(--r-sm); padding: 20px 22px; }
.tool-result > * + * { margin-top: 10px; }
.tool-result p { color: var(--ink); }
.tool-result-lead { font: 600 var(--type-sm); color: var(--ink-2) !important; }
.tool-result p.big { font: 700 var(--type-2xl); letter-spacing: -0.015em; color: var(--ink) !important; }
.tool-note { font: 400 var(--type-sm); color: var(--ink-3) !important; }
.tool-empty { color: var(--ink-2) !important; }
.tool-actions { margin: 16px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-actions button { margin: 0; }

.scaled-list { list-style: none; padding: 0; margin: 0; }
.scaled-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.scaled-list li:last-child { border-bottom: 0; }
.scaled-list li.unscaled { color: var(--ink-3); }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.result-grid div { background: var(--surface); border-radius: var(--r-sm); padding: 12px 14px; border: 1px solid var(--line); }
.result-grid dt { font: 500 var(--type-xs); color: var(--ink-3); }
.result-grid dd { margin: 4px 0 0; font: 600 var(--type-xl); color: var(--ink); font-variant-numeric: tabular-nums; }

.pan-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
details.pan-scale { margin-top: 20px; }
details.pan-scale summary { cursor: pointer; font: 600 var(--type-sm); color: var(--accent); margin-bottom: 14px; }
details.pan-scale summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
details.pan-scale .tool-result:empty { display: none; }

@media (max-width: 600px) {
  .tl-panel { padding: 20px; }
  .tool-result { padding: 16px; }
}

/* The calculator and, beside it from 1100px, a note on how the answer is worked out. */
.tl-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
.tl-side { font: 400 var(--type-md); }
.tl-side h2 { font: 700 var(--type-xl); margin-top: 40px; }
.tl-side h2:first-child { margin-top: 0; }
.tl-side ul { padding-left: 1.1em; }
@media (min-width: 1100px) {
  .tl-work { grid-template-columns: 720px minmax(0, 1fr); gap: 64px; align-items: start; }
  .tl-side { position: sticky; top: 104px; padding-top: 8px; }
}

/* ---- the explanation ---- */
.tl-explain { margin-top: var(--s9); }
.tl-explain > h2:first-child { margin-top: 0; }
.tl-explain .scroll { margin-block: 1.4em; }
.tl-explain table th[scope="row"] { font-weight: 500; color: var(--ink); white-space: normal; }
.tl-explain table.weights tr.group th { padding-top: 20px; background: var(--surface); font: 700 var(--type-sm); color: var(--ink); }
.tl-explain table.weights td, .tl-explain table.weights th { white-space: nowrap; }
.tl-explain table.weights th[scope="row"] { white-space: normal; min-width: 150px; }
.tl-explain table.weights tr:target { background: var(--accent-wash-2); }
.tl-explain table.example td { min-width: 150px; }
.tl-explain .source-list { font: 400 var(--type-sm); color: var(--ink-2); }

/* ---- tool cards: the hub, and "more tools" under each tool ---- */
.tl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tl-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line-strong); text-decoration: none; color: inherit; }
.tl-card h2, .tl-card h3 { font: 600 var(--type-xl); letter-spacing: -0.01em; }
.tl-card p { color: var(--ink-2); font: 400 var(--type-md); flex: 1; }
.tl-sample { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg-raised); }
.tl-sample span { font: 500 var(--type-sm); color: var(--ink-2); }
.tl-sample b { font: 700 var(--type-xl); color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tl-card .tc-more { margin-top: 8px; }
.tl-card a:hover .tc-more { text-decoration: underline; text-underline-offset: 3px; }
.tl-hub { margin-top: var(--s2); }
.tl-more { margin-top: var(--s9); }
.tl-more h2 { margin-bottom: var(--s5); }
.tl-appcard { margin-top: var(--s8); }
.tl-web { margin-top: 6px !important; }
.tl-web a { font: 600 var(--type-sm); color: var(--accent); }