/* Color tokens. Every pairing below is measured for WCAG AA (4.5:1 text, 3:1 large text and UI borders) in both schemes.
   Surfaces: bg (page), card (panels, inputs' parent), field-bg (inputs), accent-bg (stat tiles, callouts), th-bg (table headers).
   Text: ink, muted (labels, captions, footer), link (distinct from ink), header-fg (on brand), btn-fg (on btn-bg), placeholder.
   Lines: line (hairlines, quiet on purpose), field (input borders, >=3:1), accent (callout bar, partner border, >=3:1), focus (ring, >=3:1).
   brand is the deep green header surface and stays the same in both schemes; accent-hi is the brighter gold of the favicon and the BOH chip (accent-hi-hover under the pointer).
   Hover (pointer devices): link-hover deepens links, shadow-hover lifts cards, nav-underline is the soft underline a header link gets. sel is the brand-tinted text selection. */
:root{color-scheme:light dark;
--ink:#1d2421;--muted:#5b6661;--line:#dadfdc;--field:#85908a;--bg:#fbfaf7;--card:#fff;--field-bg:#fff;--th-bg:#eef1ef;
--brand:#1f3a2e;--header-fg:#fff;--nav-underline:rgba(255,255,255,.5);--link:#186a44;--link-hover:#0f4f32;--focus:var(--brand);--btn-bg:var(--brand);--btn-fg:#fff;
--accent:#b87c0e;--accent-hi:#f4b942;--accent-hi-hover:#f8c75a;--accent-bg:#fdf3df;--ok:#1d6b45;--err:#b3261e;--placeholder:#6a746f;
--shadow:0 1px 2px rgba(29,36,33,.05),0 2px 6px rgba(29,36,33,.04);--shadow-hover:0 2px 4px rgba(29,36,33,.06),0 8px 20px rgba(29,36,33,.09);--todo-bg:#ffe9e9;--todo-line:#e5a3a3;
--field-hover:#5b6661;--btn-hover:#294b3c;--btn-active:#15291f;--btn2-hover:#eef5f1;--btn2-active:#dfebe4;
--tap:rgba(31,58,46,.12);--scroll-shade:rgba(29,36,33,.16);--sel:#cfe4d7;
--caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235b6661' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")}
/* Dark scheme: green-tinted near-black surfaces, light ink, the brand header unchanged, link/accent/button greens and golds lifted for luminance.
   Scoped to screen so printing from a dark-mode browser still gets the light palette. */
@media screen and (prefers-color-scheme:dark){:root{
--ink:#e7ebe8;--muted:#a3ada7;--line:#2f3732;--field:#6e7873;--bg:#121715;--card:#1b221e;--field-bg:#111614;--th-bg:#232b27;
--link:#6fc998;--link-hover:#8fdcb2;--focus:#6fc998;--btn-bg:#2f7a56;
--accent:#dca235;--accent-bg:#352b16;--ok:#6fc998;--err:#f28b82;--placeholder:#8e9892;
--shadow:none;--shadow-hover:none;--todo-bg:#3a1f1f;--todo-line:#7a3b3b;
--field-hover:#8e9892;--btn-hover:#34835c;--btn-active:#276a4a;--btn2-hover:#1f2d26;--btn2-active:#243a2f;
--tap:rgba(111,201,152,.2);--scroll-shade:rgba(0,0,0,.55);--sel:#2f5a44;
--caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23a3ada7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")}}
/* Spacing scale (4px steps) and layout tokens. Every margin, padding and gap below uses one of these. Radii: lg for cards and the calculator panel, md for stat tiles, callouts and the
   partner box, sm for controls (and the skip link and MAX notes), xs for the BOH chip. target is the touch-target minimum. The focus ring is ring-w wide and sits ring-offset outside
   a control; ring-room is how far it reaches. motion is the one duration and curve every transition uses (see the motion block at the end of the file). */
:root{--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:2.5rem;--s-8:3rem;--s-9:4rem;
--gutter:1rem;--page-w:860px;--measure:44rem;--radius-lg:10px;--radius-md:8px;--radius-sm:6px;--radius-xs:4px;--target:44px;--ring-w:3px;--ring-offset:2px;--ring-room:calc(var(--ring-w) + var(--ring-offset));--motion:.15s ease-out;
--page-top:var(--s-8);--page-bottom:var(--s-9);--section:var(--s-7);--hero-gap:var(--s-6);--header-pad:var(--s-4);--footer-pad:var(--s-6);
--card-pad:var(--s-5);--tool-pad:var(--s-5);--stat-pad:var(--s-3) var(--s-4)}
/* Type scale. System fonts only. Small steps 12 / 14 / 15px; base 16px (controls, nav, card text); body 17px; lg 18px (card titles, logo); h3 20px. The h1, h2, lede and stat
   values use clamp() so a phone gets a smaller size without a breakpoint: h1 28-36px, h2 22-24px, lede 18-20px, stat value 22-26px.
   Headings sit tight (1.15-1.25), labels and captions at 1.35, prose at 1.6, small text at 1.5. */
:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
--fs-xs:.75rem;--fs-sm:.875rem;--fs-md:.9375rem;--fs-base:1rem;--fs-body:1.0625rem;--fs-lg:1.125rem;--fs-h3:1.25rem;
--fs-lede:clamp(1.125rem,1rem + .5vw,1.25rem);--fs-h2:clamp(1.375rem,1.2rem + .6vw,1.5rem);--fs-h1:clamp(1.75rem,1.35rem + 1.6vw,2.25rem);--fs-stat:clamp(1.375rem,1.15rem + .9vw,1.625rem);
--lh-tight:1.15;--lh-heading:1.25;--lh-label:1.35;--lh-small:1.5;--lh-body:1.6}
@media (max-width:600px){:root{--page-top:var(--s-6);--page-bottom:var(--s-8);--section:var(--s-6);--hero-gap:var(--s-5);--header-pad:var(--s-2);--footer-pad:var(--s-5);--card-pad:1.25rem;--tool-pad:var(--s-4);--stat-pad:var(--s-3)}}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);background:var(--bg)}
::selection{background:var(--sel);color:var(--ink)}
.wrap{max-width:var(--page-w);margin:0 auto;padding:0 var(--gutter)}
main.wrap{padding-top:var(--page-top);padding-bottom:var(--page-bottom)}
/* The page padding alone carries the space above the footer: the last visible block drops its own bottom margin (a page's inline <script> is skipped). */
main>:last-child,main>:has(+script:last-child),article>:last-child,.no-print:has(+script:last-child)>:last-child{margin-bottom:0}
/* Reading column: prose, headings and callouts stop at the article measure. The h1, tools, card grids and wide tables use the full page width. */
main>:where(:not(h1,.tool,.cards,.table-scroll,article)),article>:where(:not(h1)){max-width:var(--measure)}
/* Links: a brand-tinted tap flash on touch instead of the grey default; manipulation blocks double-tap zoom. Long URLs and e-mail addresses break rather than overflow a phone. */
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.15em;touch-action:manipulation;-webkit-tap-highlight-color:var(--tap)}
main a,.site-footer a{overflow-wrap:anywhere}
/* Hover, pointer devices only (touch keeps the tap flash): page and footer links deepen and thicken their underline; a nav link's underline (always drawn, transparent until then)
   turns soft white while the current page keeps its solid one; the BOH mark brightens under the logo. Cards and buttons have their own hover rules below. */
@media (hover:hover){
  main a:hover,.site-footer a:hover{color:var(--link-hover);text-decoration-thickness:2px}
  .site-header nav a:hover:not([aria-current]){text-decoration-color:var(--nav-underline)}
  .logo:hover .logo-mark{background:var(--accent-hi-hover)}
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.02em;text-wrap:balance;margin:0 0 var(--s-4)}
h1:has(+.byline){margin-bottom:var(--s-2)}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:var(--section) 0 var(--s-4)}
h3{font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:var(--s-6) 0 var(--s-2)}
/* Section permalinks (guide): a quiet "#" after each h2 with an id, shown while the heading is hovered. Pointer devices only: on a touch screen it is not rendered
   at all (an invisible link would still be a tap target), it is aria-hidden and out of the tab order, and the id itself works for everyone. A jump to the id leaves a little room above the heading. */
h2[id]{scroll-margin-top:var(--s-6)}
.anchor{display:none;margin-left:.4em;font-weight:400;color:var(--muted);text-decoration:none;opacity:0;user-select:none}
@media (hover:hover){.anchor{display:inline}h2:hover>.anchor{opacity:1}.anchor:hover{color:var(--link)}}
p,ul,ol{margin:0 0 var(--s-4)}
/* Prose avoids orphan words where the browser supports it; strong matches the 600 emphasis weight used by links and errors. */
p,li,td,.lede,.callout,.partner{text-wrap:pretty}
strong,b{font-weight:600}
main ul,main ol{padding-left:var(--s-5)}
li+li{margin-top:var(--s-1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:var(--s-2);z-index:10;display:inline-flex;align-items:center;min-height:var(--ctl-h);padding:0 var(--s-4);background:var(--card);color:var(--link);border-radius:var(--ctl-radius);font-weight:600}
.skip:focus{left:var(--s-2)}
main:focus{outline:0}
:focus-visible{outline:var(--ring-w) solid var(--focus);outline-offset:var(--ring-offset)}
.site-header :focus-visible{outline-color:var(--header-fg)}
/* Header: brand mark and nav share one centered row; on narrow screens the nav wraps under the brand. */
.site-header{background:var(--brand);color:var(--header-fg)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2) var(--s-5);padding-top:var(--header-pad);padding-bottom:var(--header-pad)}
.site-header a{color:var(--header-fg);text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,.2)}
.logo{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em}
.logo-mark{background:var(--accent-hi);color:var(--brand);padding:2px 6px;border-radius:var(--radius-xs);letter-spacing:.02em}
.site-header nav{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5)}
.site-header nav a{font-size:var(--fs-base);font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px}
nav a[aria-current="page"]{text-decoration-color:currentcolor}
/* Hero block: h1, optional byline, lede, then one consistent gap before the first section. */
.lede{font-size:var(--fs-lede);line-height:var(--lh-small);color:var(--muted);margin:0 0 var(--hero-gap)}
.byline{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-small);margin:0 0 var(--s-3)}
/* Card grid: 3-up at page width, 1-up on phones, equal heights, CTA pinned to the bottom edge.
   The whole card is the CTA's hit area (its ::after is stretched over the card), so the accessible name stays "Open calculator: pour cost". */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4);margin:0 0 var(--s-6)}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow)}
.card h2,.card h3{margin:0 0 var(--s-2);font-size:var(--fs-lg);font-weight:600;line-height:var(--lh-heading);letter-spacing:-.01em}
.card p{margin:0 0 var(--s-4);font-size:var(--fs-base)}
.card a.more{font-weight:600;font-size:var(--fs-base);margin-top:auto;align-self:flex-start;-webkit-tap-highlight-color:transparent}
.card a.more::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* Hover lifts the card (border + shadow; the CTA link itself is hovered through its stretched ::after, so it also takes the link hover style).
   Keyboard focus rings the whole card, which is the real target, instead of the link text; browsers without :has() keep the ring on the link. */
@media (hover:hover){.card:hover{border-color:var(--field);box-shadow:var(--shadow-hover)}}
@supports selector(:has(a)){.card:has(a.more:focus-visible){outline:var(--ring-w) solid var(--focus);outline-offset:var(--ring-offset)}.card a.more:focus-visible{outline:0}}
/* Calculator panel */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--tool-pad);margin:0 0 var(--s-6);box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.grid>div{display:flex;flex-direction:column;justify-content:flex-end}
/* Form controls. One height for every input, select and button (--ctl-h: 40px with a mouse, 44px on phones and touch screens, set in the touch block below), one radius, the page font,
   tabular digits so numbers do not shift as they are typed. States: hover darkens the border (pointer devices only), focus keeps the
   site ring (red on an invalid field), invalid is a red border plus an inset red ring so nothing moves, disabled is dimmed.
   Number spinners are hidden: every number field has inputmode=decimal and the arrow keys still step. */
:root{--ctl-h:40px;--ctl-px:.75rem;--ctl-radius:var(--radius-sm)}
label{display:block;font-size:var(--fs-sm);line-height:var(--lh-small);font-weight:500;color:var(--muted);margin-bottom:var(--s-1)}
label .opt{font-weight:400}
input,select,button{font:inherit;font-size:var(--fs-base);border-radius:var(--ctl-radius);touch-action:manipulation}
input,select{display:block;width:100%;height:var(--ctl-h);padding:0 var(--ctl-px);border:1px solid var(--field);background:var(--field-bg);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
select{-webkit-appearance:none;appearance:none;padding-right:calc(var(--ctl-px) + 1.5rem);background-image:var(--caret);background-repeat:no-repeat;background-position:right var(--ctl-px) center;background-size:12px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
::placeholder{color:var(--placeholder);opacity:1}
@media (hover:hover){input:hover,select:hover{border-color:var(--field-hover)}}
input[aria-invalid="true"]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
input[aria-invalid="true"]:focus-visible{outline-color:var(--err)}
input:disabled,select:disabled,button:disabled{opacity:.55;cursor:default}
/* Unit slot: a $ prefix or % / oz suffix sits inside the field (hidden from assistive tech; the label carries the unit as visually hidden text). */
.field{position:relative}
.affix{position:absolute;top:0;bottom:0;display:flex;align-items:center;color:var(--muted);font-size:var(--fs-md);pointer-events:none;user-select:none}
.prefix .affix{left:var(--ctl-px)}
.suffix .affix{right:var(--ctl-px)}
.prefix input{padding-left:calc(var(--ctl-px) + 1.125rem)}
.suffix input{padding-right:calc(var(--ctl-px) + 1.625rem)}
/* .unit: a suffix that only shows in the stacked tip-pool rows on phones, where the column headers are not visible. */
.unit .affix{display:none}
.unit input{padding-right:var(--ctl-px)}
.msg{margin:var(--s-3) 0 0;font-size:var(--fs-md);line-height:var(--lh-small);color:var(--muted);min-height:1.5em}
.msg.err{color:var(--err);font-weight:600}
/* Action row (tip pool): buttons on the left, status message fills the rest of the row instead of its own blank line. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);margin-top:var(--s-4)}
.actions p{margin:0}
.btns{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.actions .msg{flex:1 1 14rem;min-height:0}
.actions .msg:empty{display:none}
/* Buttons: primary (brand fill) for the main action, secondary (outlined) beside it, and a square ghost icon button (.remove) in table rows.
   All share the control height and a 1px border so they line up; hover and pressed states darken or tint, focus uses the site ring. */
button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h);padding:0 var(--s-4);background:var(--btn-bg);color:var(--btn-fg);border:1px solid transparent;font-size:var(--fs-md);font-weight:600;line-height:var(--lh-heading);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.secondary{background:var(--card);color:var(--link);border-color:var(--link)}
button.remove{width:var(--ctl-h);padding:0;background:var(--field-bg);color:var(--muted);border-color:var(--field)}
button.remove svg{width:14px;height:14px}
@media (hover:hover){button:hover{background:var(--btn-hover)}button.secondary:hover{background:var(--btn2-hover)}button.remove:hover{background:var(--field-bg);color:var(--err);border-color:var(--err)}}
button:active{background:var(--btn-active)}
button.secondary:active{background:var(--btn2-active)}
button.remove:active{background:var(--btn2-active);color:var(--err);border-color:var(--err)}
/* Results: a grid of stat tiles. 4-up for four stats, 3-up (.results-3) for six, 2-up on phones. Values sit on a shared bottom line. */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.results-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{display:flex;flex-direction:column;background:var(--accent-bg);border-radius:var(--radius-md);padding:var(--stat-pad)}
.stat .k{font-size:var(--fs-xs);line-height:var(--lh-label);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-wrap:balance}
.stat .v{font-size:var(--fs-stat);line-height:var(--lh-tight);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:auto;padding-top:var(--s-1)}
/* Tables and callouts. A table wider than the page scrolls sideways inside .table-scroll: the edge shades (fixed to the box) show there is more,
   and the matching-colour covers (scrolling with the content) hide each shade once that edge is reached, so a table that fits shows nothing.
   The footer script makes the box a focusable, labelled region only while it overflows. Short headers (.th-short) replace long ones on phones.
   The calculator's scroller holds focusable controls, so it keeps ring-room of side padding (pulled back with negative margins, so the table does not move)
   and a control at its left or right edge shows its whole focus ring instead of having it clipped by the overflow; rows already give it room above and below. */
table{width:100%;border-collapse:collapse;margin:0 0 var(--s-5);font-size:var(--fs-md);line-height:var(--lh-small);font-variant-numeric:tabular-nums}
.table-scroll{--scroll-bg:var(--bg);overflow-x:auto;margin:0 0 var(--s-5);
  background:linear-gradient(90deg,var(--scroll-bg) 40%,transparent) 0 0/48px 100% no-repeat local,linear-gradient(270deg,var(--scroll-bg) 40%,transparent) 100% 0/48px 100% no-repeat local,
  linear-gradient(90deg,var(--scroll-shade),transparent) 0 0/14px 100% no-repeat scroll,linear-gradient(270deg,var(--scroll-shade),transparent) 100% 0/14px 100% no-repeat scroll}
.table-scroll table{margin:0}
.tool .table-scroll{--scroll-bg:var(--card);padding:0 var(--ring-room);margin:var(--s-5) calc(-1*var(--ring-room)) var(--s-4)}
.th-short,.summary{display:none}
th,td{border-bottom:1px solid var(--line);padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top}
th{background:var(--th-bg);font-weight:600}
.num,td.share,#tp-sum{text-align:right}
td.share{white-space:nowrap;font-weight:600}
tfoot th,tfoot td{background:var(--th-bg);font-weight:700}
td input{min-width:70px}
/* Tip-pool rows hold 40/44px controls: text cells (share, total) centre on the control instead of sitting at the top. */
#tp-table tbody td,#tp-table tfoot th,#tp-table tfoot td{vertical-align:middle}
#tp-table tr.empty td{text-align:center;color:var(--muted);padding:var(--s-4) var(--s-2)}
.callout{background:var(--accent-bg);border-left:4px solid var(--accent);padding:var(--s-4) var(--s-5);border-radius:var(--radius-md);margin:var(--s-5) 0}
.partner{border:1px dashed var(--accent);border-radius:var(--radius-md);padding:var(--s-4) var(--s-5);margin:var(--s-6) 0;background:var(--card)}
.todo{background:var(--todo-bg);border:1px solid var(--todo-line);padding:var(--s-2) var(--s-3);border-radius:var(--radius-sm);font-size:var(--fs-md)}
.site-footer{border-top:1px solid var(--line);padding:var(--footer-pad) 0;color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-small)}
.site-footer p{margin:0}
.site-footer p+p{margin-top:var(--s-3)}
.print-only{display:none}
/* Print: light palette, no site chrome, 12pt body on a 36rem measure inside .75in margins. External links print their URL after the text (the referral link keeps
   its text only), headings stay with what follows, table rows, stat tiles and callouts are not split across pages. Calculator inputs print as plain values with
   their unit beside them (field-sizing shrinks them to the value where supported), an empty field prints empty; the sticky strip, buttons, hint messages and permalinks are dropped. */
@media print{
  @page{margin:.75in}
  :root{color-scheme:light;--measure:36rem}
  body{background:#fff;font-size:12pt;line-height:1.5}
  .wrap{padding-left:0;padding-right:0}
  main.wrap{padding-top:0}
  .site-header,.site-footer,.no-print,.skip,.anchor,.msg:not(.err){display:none}
  .print-only{display:block}
  ::placeholder{color:transparent}
  :focus{outline:0}
  a{color:inherit}
  a[href^="http"]:not([rel~="sponsored"])::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  h2,h3{break-after:avoid}
  tr,.stat,.callout,.partner,.card{break-inside:avoid}
  thead{display:table-header-group}
  .tool{border:0;padding:0;box-shadow:none}
  .tool .table-scroll{padding:0;margin-left:0;margin-right:0}
  .table-scroll{background:none}
  .grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .results,.results-3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .stat{border:1px solid #ccc}
  input,select{border:0;padding:0;height:auto;width:auto;max-width:100%;min-width:3ch;background:none;-webkit-appearance:none;appearance:none;field-sizing:content}
  td input{min-width:0}
  .field{display:flex;align-items:baseline;gap:.3em}
  .affix{position:static;font-size:inherit;color:#555}
  .suffix .affix{order:1}
  .prefix input,.suffix input{padding:0}
}
/* Touch targets: on phones always, and on any touch screen (tablets) at any width. 44px controls, and every link that is a target in its own
   right gets a 44px hit box without moving its text: nav and footer links and list links become 44px flex boxes, prose links get vertical
   padding (hit area only, inline boxes do not grow the line), the skip link is already 47px. The whole card is a target (see .card). Desktop with a mouse is untouched. */
@media screen and (max-width:600px),screen and (pointer:coarse){
  :root{--ctl-h:var(--target)}
  .logo{min-height:var(--target)}
  .site-header nav{gap:0;margin:0 calc(-1*var(--s-3))}
  .site-header nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s-3)}
  .site-footer .links a{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s-2)}
  .site-footer .links a:first-child{margin-left:calc(-1*var(--s-2))}
  main li>a:only-child{display:inline-flex;align-items:center;min-height:var(--target)}
  main p a,.callout a,.partner a,.site-footer p:not(.links) a{padding-block:14px 13px}
  .card:active{background:var(--btn2-hover)}
}
/* Phones: result tiles go 2-up and table cells tighten; the header is two rows (brand, then the nav as one 44px row); the callout and partner box give their text the width back;
   the copyright takes its own footer line; the calculators get a compact sticky strip of the key results (see .summary) and stacked tip-pool rows. */
@media screen and (max-width:600px){
  .results,.results-3{grid-template-columns:1fr 1fr;gap:var(--s-2)}
  th,td{padding:var(--s-2)}
  .site-header .wrap{row-gap:0}
  .callout,.partner{padding:var(--s-4)}
  .site-footer .copy{display:block}
  .site-footer .links .sep:nth-last-child(2){display:none}
  .compact{font-size:var(--fs-sm)}
  .compact th,.compact td{padding:var(--s-2) 6px}
  /* Visually hidden, kept for assistive tech: the long keg headers, and the tip-pool header row (its rows stack below and every field carries its own label). */
  .compact .th-full,#tp-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .compact .th-short{display:inline;white-space:nowrap}
  /* Sticky results strip: the first child of a calculator, flush with the panel's top edge, pinned to the top of the screen while the panel
     is in view (top:-1px lets the footer script tell when it is stuck, and the strip then runs edge to edge with a hairline and shadow).
     It mirrors the live stat tiles and is aria-hidden so nothing is announced twice. Inputs leave room for it when scrolled into view. */
  .summary{display:flex;gap:var(--s-3);position:sticky;top:-1px;z-index:2;margin:calc(-1*var(--tool-pad)) calc(-1*var(--tool-pad)) var(--s-4);padding:calc(var(--s-2) + 1px) var(--tool-pad) var(--s-2);background:var(--accent-bg);border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;border-bottom:1px solid transparent}
  .summary>div{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
  .summary .k{font-size:var(--fs-xs);line-height:var(--lh-label);font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .summary .v{font-size:var(--fs-base);line-height:var(--lh-heading);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .summary.stuck{margin-left:calc(-1*var(--tool-pad) - var(--gutter) - 1px);margin-right:calc(-1*var(--tool-pad) - var(--gutter) - 1px);padding-left:calc(var(--tool-pad) + var(--gutter) + 1px);padding-right:calc(var(--tool-pad) + var(--gutter) + 1px);border-radius:0;border-bottom-color:var(--line);box-shadow:var(--shadow)}
  .tool input,.tool select{scroll-margin-top:calc(var(--s-9) + var(--s-5))}
  /* Tip pool rows stack: Name and Role side by side with Remove at the row end, then Hours and Points (with in-field units) and the share.
     In hours mode the Hours field spans both columns. */
  .tool .table-scroll{margin-top:var(--s-3)}
  #tp-table,#tp-table tbody,#tp-table tfoot,#tp-table tr,#tp-table th,#tp-table td{display:block}
  #tp-table th,#tp-table td{border:0;padding:0;background:none}
  #tp-table tr.person{display:grid;grid-template-columns:1fr 1fr auto;grid-template-areas:"name role rm" "hours pts share";gap:var(--s-2);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
  #tp-table tr.person td:nth-child(1){grid-area:name}
  #tp-table tr.person td:nth-child(2){grid-area:role}
  #tp-table tr.person td:nth-child(3){grid-area:hours}
  #tp-table tr.person td:nth-child(4){grid-area:pts}
  #tp-table tr.person td.share{grid-area:share;align-self:end;font-size:var(--fs-base);line-height:var(--lh-heading)}
  #tp-table tr.person td.share::before{content:"Share" / "";display:block;font-size:var(--fs-xs);line-height:var(--lh-label);font-weight:500;color:var(--muted)}
  #tp-table tr.person td:last-child{grid-area:rm;justify-self:end}
  #tp:not(.by-points) tr.person td:nth-child(3){grid-column:hours-start/pts-end}
  #tp-table td input{min-width:0}
  #tp-table .unit .affix{display:flex}
  #tp-table .unit input{padding-right:calc(var(--ctl-px) + 1.75rem)}
  #tp-table tr.empty td{padding:var(--s-4) 0}
  #tp-table tfoot tr{display:flex;align-items:baseline;padding:var(--s-3) 0 0;font-weight:700}
  #tp-table tfoot th{flex:1}
  #tp-hours,#tp-sum{margin-left:var(--s-4)}
  #tp-hours::after{content:" hrs";font-weight:500;color:var(--muted)}
}
/* Motion. One short ease-out transition (--motion) on the properties that already change with state: link and nav colour and underline, the BOH chip, card border and shadow,
   button and field fill, border and text, the invalid ring, the status message colour (and a fade-in when the tip-pool message appears), the stuck summary strip's shadow and
   hairline, the permalink. Nothing moves, nothing animates on load, and focus rings stay instant. The whole block is skipped when the visitor asks for reduced motion.
   In-page jumps (skip link, permalinks) scroll smoothly only then, and only while something on the page has focus, so a #hash on load or find-in-page still lands at once. */
@media (prefers-reduced-motion:no-preference){
  html:focus-within{scroll-behavior:smooth}
  a{transition:color var(--motion),text-decoration-color var(--motion),text-decoration-thickness var(--motion)}
  nav a[aria-current="page"]{transition:none} /* the footer script marks the current page after load; its underline must not fade in */
  .logo-mark{transition:background-color var(--motion)}
  .anchor{transition:opacity var(--motion),color var(--motion)}
  .card{transition:border-color var(--motion),box-shadow var(--motion)}
  input,select,button{transition:border-color var(--motion),box-shadow var(--motion),background-color var(--motion),color var(--motion)}
  .msg{transition:color var(--motion)}
  .actions .msg{transition:color var(--motion),opacity var(--motion)}
  @starting-style{.actions .msg{opacity:0}}
  .summary{transition:box-shadow var(--motion),border-color var(--motion)}
}