/* ═══════════════════════════════════════════════════════════════════════════
   site-tools.css — /tools/ (the free calculators) and /free/ only. Loaded after
   site.css, which already owns .tool / .tool-in / .tool-out and the input
   outline (--border-control: a control's edge is never a material edge, WCAG
   1.4.11 wants 3:1). Colour, size and curve still come from tokens.css; this
   file only arranges them. Generated by tools/seo/gen_d.py — edit there.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The calculator frame ──────────────────────────────────────────────── */
.tool { align-items: start; margin-top: 28px; }
.tool-in { gap: 16px; }
.tool fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tool .fld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.tool .fld > label, .tool legend { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft);
                                   font-weight: 500; padding: 0; }
.tool .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool .hint { margin: 0; font-weight: 400; color: var(--muted); font-size: var(--fs-micro); line-height: var(--lh-micro); text-wrap: pretty; }
.tool .err { margin: 0; color: var(--danger-text); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 500; }
.tool .err:empty { display: none; }
.tool input[aria-invalid="true"], .tool select[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.tool select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
               background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
               background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.tool textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); padding: 10px 12px; width: 100%; min-width: 0;
                 border: 1px solid var(--border-control); border-radius: var(--r-sm); resize: vertical; line-height: 1.5; }
.tool textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tool ::placeholder { color: var(--muted); opacity: 1; }

/* ₹ before, % or a unit after — drawn inside the box, never read aloud (the label says it). */
.affix { position: relative; display: flex; align-items: center; min-width: 0; }
.affix > span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;
                font-size: 15px; font-variant-numeric: tabular-nums; }
.affix > span:first-child { left: 12px; }
.affix > span.s { right: 12px; left: auto; }
.affix.pre input { padding-left: 28px; }
.affix.suf input { padding-right: 52px; }
.tool input { font-variant-numeric: tabular-nums; }

/* Two or four choices as one segmented control. The radios stay real radios —
   arrow keys move between them and a screen reader hears a group. */
.choice { display: grid; gap: 6px; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px;
       border: 1px solid var(--border-control); border-radius: var(--r-sm); background: var(--bg); }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; pointer-events: none; }
.tool .seg label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px;
                   padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--text-soft); font-size: var(--fs-caption);
                   line-height: 1.3; font-weight: 500; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.tool .seg input:checked + label { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.tool .seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .tool .seg input:not(:checked) + label:hover { background: var(--surface-2); color: var(--text); } }

/* A few more fields, folded away until wanted. */
.tool details.more { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 14px; background: var(--bg); }
.tool details.more:last-of-type { border-bottom: 1px solid var(--border); }
.tool details.more > summary { font-size: var(--fs-caption); min-height: 44px; padding: 10px 0; color: var(--text-soft); }
.tool details.more > summary::after { font-size: 20px; }
.tool details.more[open] > summary { color: var(--text); }
.tool details.more > .more-in { display: grid; gap: 14px; padding: 2px 0 16px; }

.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tool-actions .btn { min-height: 44px; }

/* ── The answer ───────────────────────────────────────────────────────── */
.tool-out { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tool-out:focus { outline: none; }
.tool-out:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 821px) { .tool-out { position: sticky; top: calc(var(--nav-h) + 16px); } }
.tool-out-h { font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-micro); text-transform: uppercase;
              letter-spacing: var(--tr-micro); color: var(--muted); font-weight: 500; margin: 0; }
.tool-out .big { margin: -4px 0 0; color: var(--text); letter-spacing: var(--tr-display); overflow-wrap: anywhere; }
.tool-out .big-sub { margin-top: -8px; color: var(--text-soft); font-size: var(--fs-caption); line-height: var(--lh-caption); text-wrap: pretty; }
/* No column gap, the dd pads itself: a total's rule then runs unbroken under label and value. */
.tool-out dl { border-top: 1px solid var(--border); padding-top: 14px; row-gap: 9px; column-gap: 0; }
.tool-out dd { padding-left: 16px; }
.tool-out dl > div { display: contents; }
.tool-out dl > div[hidden] { display: none; }
.tool-out dt { line-height: 1.45; }
.tool-out dd { line-height: 1.45; }
.tool-out dd small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-micro); line-height: var(--lh-micro); }
.tool-out dt.tot, .tool-out dd.tot { border-top: 1px solid var(--border); padding-top: 9px; color: var(--text); font-weight: 500; }
.working { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-caption);
           line-height: 1.55; color: var(--text-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.working p + p { margin-top: 6px; }
.working[hidden] { display: none; }
.insight, .caution { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--fs-caption); line-height: 1.55; text-wrap: pretty; }
.insight { border: 1px solid var(--border); border-left: 3px solid var(--primary); background: var(--surface); color: var(--text-soft); }
.caution { border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn-text); }
.insight[hidden], .caution[hidden] { display: none; }

/* Nothing you type leaves this device — said beside the tool, not in small print elsewhere. */
.privacy { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; max-width: 820px; font-size: var(--fs-caption);
           line-height: var(--lh-caption); color: var(--text-soft); }
.privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.tool-note { margin: 12px 0 0; max-width: 820px; }

/* ── Food cost: one row per ingredient ────────────────────────────────── */
.grp-l { margin: 4px 0 -6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-soft); font-weight: 500; }
.ing-list { display: grid; gap: 10px; }
.tool .ing { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px 12px; background: var(--bg); display: grid; gap: 8px; }
.tool .ing > legend { padding: 0 4px; margin-left: -4px; color: var(--text); }
.ing-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.ing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.1fr); gap: 8px; align-items: end; }
.ing-grid.used { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.1fr); }
/* background-COLOR: the shorthand would wipe the select's drawn arrow. */
.tool .ing input, .tool .ing select { background-color: var(--surface); }
.tool .ing .fld > label { font-size: var(--fs-micro); line-height: var(--lh-micro); }
.ing-cost { display: grid; gap: 6px; align-content: end; }
.ing-cost > span:first-child { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-soft); font-weight: 500; }
.ing-cost output { display: block; min-height: 44px; padding: 10px 0; text-align: right; font-weight: 500; color: var(--text);
                   font-variant-numeric: tabular-nums; }
.btn-remove { min-height: 40px; padding: 8px 12px; font-size: var(--fs-caption); }
.btn-remove[hidden] { display: none; }

/* ── The attendance register ──────────────────────────────────────────── */
.tool-wide { grid-template-columns: 1fr; }
.tool-wide .tool-in { max-width: 860px; }
.reg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.reg-form .span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .reg-form { grid-template-columns: 1fr; } .reg-form .span2 { grid-column: auto; } }
.reg-sheet { margin-top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 22px; min-width: 0; }
.reg-head { display: grid; gap: 4px; margin-bottom: 14px; }
.reg-biz { color: var(--text-soft); font-size: var(--fs-caption); }
.reg-title { font-size: 20px; line-height: 1.3; }
.reg-meta { color: var(--muted); font-size: var(--fs-micro); }
.reg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-sm); }
.reg-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table.reg { border-collapse: collapse; font-size: 12px; min-width: 100%; font-variant-numeric: tabular-nums; }
table.reg th, table.reg td { border: 1px solid var(--border); padding: 0; height: 30px; text-align: center; color: var(--text-soft); font-weight: 400; }
table.reg thead th { background: var(--surface-2); color: var(--text); font-weight: 500; height: auto; padding: 4px 0; }
table.reg .reg-d { min-width: 26px; }
table.reg .reg-d .dn, table.reg .reg-d .wd { display: block; line-height: 1.25; }
table.reg .reg-d .wd { font-size: 10px; color: var(--muted); font-weight: 400; }
table.reg .reg-no { width: 30px; min-width: 30px; color: var(--muted); }
table.reg .reg-name { min-width: 150px; text-align: left; padding: 0 8px; color: var(--text); white-space: nowrap; font-weight: 500; }
table.reg .reg-tot { min-width: 32px; }
table.reg .wo { background: var(--surface-3); color: var(--muted); font-size: 10px; }
table.reg thead .wo { background: var(--surface-3); }
.reg-key { margin-top: 12px; font-size: var(--fs-micro); color: var(--text-soft); }
.reg-foot { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 18px; font-size: var(--fs-caption); color: var(--text-soft); }
.reg-by { margin-top: 12px; font-size: 11px; color: var(--muted); }

/* ── Sources and dates on anything that touches tax or labour law ─────── */
.sources { margin-top: 20px; }
.sources h2 { font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-micro); text-transform: uppercase;
              letter-spacing: var(--tr-micro); color: var(--muted); font-weight: 500; margin: 0; }
.sources ol { padding-left: 20px; margin: 8px 0 0; }
.reviewed { margin-top: 14px; font-size: var(--fs-caption); color: var(--muted); max-width: 72ch; }

/* ── /free/ pages ─────────────────────────────────────────────────────── */
.sec .tbl caption { caption-side: top; text-align: left; padding: 12px 14px 4px; font-size: var(--fs-caption);
                    line-height: var(--lh-caption); color: var(--text-soft); font-weight: 500; }
.sec .tbl tbody th small, .sec .tbl td small { color: var(--muted); font-size: var(--fs-micro); font-weight: 400; }
.sec .tbl tbody th { min-width: 9.5em; }
.plain { margin-top: 16px; max-width: 72ch; }
.plain p { color: var(--text-soft); line-height: 1.7; text-wrap: pretty; }
.plain p + p { margin-top: 12px; }
.plain strong, .plain b { color: var(--text); font-weight: 500; }

/* A phone keeps three columns per ingredient line — bought, unit, paid — with the
   padding pulled in, rather than stacking every row five fields tall. */
@media (max-width: 420px) {
  .tool-in, .tool-out { padding: 16px; }
  .tool .ing { padding: 8px 10px 10px; }
  .ing-grid, .ing-grid.used { gap: 6px; }
  .tool .ing input { padding-left: 10px; padding-right: 8px; }
  .tool .ing select { padding-left: 10px; padding-right: 24px; background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; }
  .tool .ing .affix.pre input { padding-left: 23px; }
  .tool .ing .affix > span:first-child { left: 9px; }
  .reg-sheet { padding: 16px; }
}

/* ── Print: the register prints alone, landscape; any other tool prints its answer ──
   The landscape @page is set by the register page itself (an inline print style):
   Chrome lays every page out at the FIRST page's width, so a named page here
   printed a blank portrait sheet first and clipped the month at the 22nd. */
@media print {
  body:has(.reg-sheet) header, body:has(.reg-sheet) footer, body:has(.reg-sheet) .crumbs, body:has(.reg-sheet) .ph,
  body:has(.reg-sheet) .answer, body:has(.reg-sheet) .privacy, body:has(.reg-sheet) form, body:has(.reg-sheet) .sec,
  body:has(.reg-sheet) .cta, body:has(.reg-sheet) .skip, body:has(.reg-sheet) .reviewed, body:has(.reg-sheet) noscript,
  body:has(.reg-sheet) .tool-note { display: none !important; }
  html:has(.reg-sheet), body:has(.reg-sheet) { background: #fff !important; }
  body:has(.reg-sheet) main, body:has(.reg-sheet) .wrap { max-width: none; padding: 0; margin: 0; }
  .reg-sheet { border: 0; border-radius: 0; padding: 0; margin: 0; background: #fff; color: #000; box-shadow: none; }
  .reg-scroll { overflow: visible; border: 0; }
  table.reg { width: 100%; font-size: 8.5pt; color: #000; }
  table.reg th, table.reg td { border: .5pt solid #444; color: #000; height: 7.4mm; }
  table.reg thead th { background: #eee; }
  table.reg .wo, table.reg thead .wo { background: #d9d9d9 !important; color: #444; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Fixed layout: every day gets the same width, whatever is written in it. */
  table.reg { table-layout: fixed; }
  table.reg .reg-no { width: 8mm; min-width: 0; }
  table.reg .reg-name { width: 44mm; min-width: 0; white-space: normal; overflow: hidden; }
  table.reg .reg-tot { width: 9mm; min-width: 0; }
  table.reg .reg-d { min-width: 0; }
  .reg-title, .reg-biz, .reg-meta, .reg-key, .reg-foot, .reg-by { color: #000; }
  .tool-out { position: static; }
}