/* Portionary — "test-kitchen worksheet": cool paper, index-card blue, one highlighted result column. */
:root{
  --bg:#f2f4f7; --paper:#fff; --ink:#152033; --muted:#4d5a6e; --soft:#6b778a;
  --line:#d9e0ea; --line-strong:#b7c3d6;
  --blue:#1f4fbf; --blue-ink:#163a8f; --blue-hover:#183f9e; --band:#edf2fc; --band-line:#cfdcf3;
  --margin:#e7877a; --error:#b42318; --error-bg:#fdf0ee;
  --amber-bg:#fff5d9; --amber-line:#e2a51b; --amber-ink:#6b4500;
  --focus:#f59e0b;
  --ui:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --num:ui-rounded,"SF Pro Rounded","Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--ui)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue-ink)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px;z-index:10}
.skip:focus{top:10px}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.hint{font-size:14px;color:var(--muted)}
code{font:13px var(--mono);background:#e9edf3;border-radius:4px;padding:1px 5px;color:var(--ink)}

/* ---------- top bar ---------- */
.topbar{max-width:1376px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);font:800 21px/1 var(--ui);letter-spacing:-.02em}
.brand-mark{width:34px;height:34px}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav a{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:7px}
.topnav a:hover{background:#e3e8f0;color:var(--ink)}

/* ---------- intro ---------- */
.intro{max-width:1376px;margin:0 auto;padding:8px 24px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.intro h1{font:700 clamp(30px,3.1vw,44px)/1.08 var(--ui);letter-spacing:-.025em;margin-bottom:8px}
.lede{font-size:18px;line-height:1.5;color:var(--muted);max-width:72ch}
.ladder{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-shrink:0}
.ladder li{display:flex;gap:6px;align-items:center;padding:8px 12px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--paper);font:15px var(--num);white-space:nowrap}
.ladder span{color:var(--soft)}

/* ---------- workbench ---------- */
.bench{max-width:1376px;margin:0 auto;padding:0 24px 56px;display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start}
.sheet{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:4px}
.sheet-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:18px 20px 14px}
.name-field{flex:1 1 280px;min-width:0}
.name-field input{width:100%;min-height:44px;border:0;border-bottom:2px solid var(--line);padding:4px 0 6px;font:700 24px/1.25 var(--ui);letter-spacing:-.01em;background:transparent;border-radius:0}
.name-field input:focus{border-bottom-color:var(--blue);outline:none}
.name-field input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.badge{align-self:center;font-size:13px;font-weight:700;color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-line);padding:5px 10px;border-radius:999px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:8px;font-size:15px;font-weight:650;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-hover)}
.btn.ghost{background:var(--paper);border-color:var(--line-strong);color:var(--ink)}
.btn.ghost:hover{background:#eef2f8}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn[aria-expanded="true"]{background:var(--band);border-color:var(--blue);color:var(--blue-ink)}

.paste{margin:0 20px 14px;padding:14px;background:#f6f8fb;border:1px dashed var(--line-strong);border-radius:6px}
.paste textarea{width:100%;margin-top:6px;border:1px solid var(--line-strong);border-radius:6px;padding:10px 12px;font:15px/1.5 var(--mono);background:#fff;resize:vertical}
.paste-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}

.servings{margin:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;background:#f8fafc}
.serve-box .lbl{margin-bottom:6px}
.stepper{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:8px;background:#fff;overflow:hidden}
.stepper input{width:76px;border:0;text-align:center;font:700 22px/1 var(--num);padding:0 4px;min-height:46px;-moz-appearance:textfield;appearance:textfield;background:transparent}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input[aria-invalid="true"]{background:var(--error-bg);color:var(--error)}
.step{width:44px;border:0;background:#eef2f8;font-size:20px;font-weight:600;color:var(--blue-ink)}
.step:hover{background:#dfe7f5}
.serve-box.target .stepper{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.serve-arrow{font-size:24px;color:var(--soft);padding-bottom:9px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:44px;min-width:52px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font:600 15px var(--num)}
.chip:hover{border-color:var(--blue);color:var(--blue-ink)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.factor{margin-left:auto;text-align:right}
.factor output{display:block;font:800 30px/1.1 var(--num);color:var(--blue-ink)}
.error{margin:0;padding:10px 20px;color:var(--error);background:var(--error-bg);font-size:15px;font-weight:600;border-bottom:1px solid #f3c9c3}
.error:empty{display:none}

.grid-head,.row{display:grid;grid-template-columns:104px 112px minmax(0,1fr) 270px 44px;column-gap:10px;padding:0 16px 0 20px}
.grid-head{padding-top:10px;padding-bottom:6px;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.02em;border-bottom:1px solid var(--line)}
.grid-head .for{background:var(--band);margin:-10px 0 -6px;padding:10px 14px 6px;color:var(--blue-ink);border-left:1px solid var(--band-line);border-right:1px solid var(--band-line)}
.row{align-items:center;border-bottom:1px solid var(--line);padding-top:6px;padding-bottom:6px}
.row input{width:100%;min-width:0;min-height:42px;border:1px solid transparent;border-radius:6px;padding:8px 10px;background:#f6f8fb;font-size:16px}
.row input:hover{border-color:var(--line)}
.row input:focus{border-color:var(--blue);background:#fff;outline:none;box-shadow:0 0 0 1px var(--blue)}
.row input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.row .amount{font-family:var(--num);font-weight:600}
.row input::placeholder{color:#9aa5b5;font-weight:400;font-style:italic}
.row input[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg);color:var(--error)}
.out{align-self:stretch;margin:-6px 0;padding:8px 14px;background:var(--band);border-left:1px solid var(--band-line);border-right:1px solid var(--band-line);display:flex;flex-direction:column;justify-content:center;min-height:56px}
.out-main{font:600 16px/1.3 var(--ui);color:var(--ink)}
.out-main .qty{font:800 22px/1.15 var(--num);color:var(--blue-ink);letter-spacing:-.01em}
.out-main .approx{font:700 18px var(--num);color:var(--soft);margin-right:3px}
.out-main .u{font-weight:650}
.exact{font-size:13px;color:var(--muted);font-family:var(--num)}
.out-empty,.out-asis{font-size:14px;color:var(--muted)}
.row.has-error .out-empty{color:var(--error);font-weight:600}
.remove{width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--soft);font-size:24px;line-height:1}
.remove:hover{background:var(--error-bg);color:var(--error)}
.note{grid-column:3 / 5;margin:2px 0 4px;padding:8px 12px;font-size:14px;line-height:1.45;background:#f4f6f9;border-left:3px solid var(--line-strong);color:var(--ink);border-radius:0 6px 6px 0}
.note.is-baking{background:var(--amber-bg);border-left-color:var(--amber-line);color:var(--amber-ink)}
.note.is-baking::before{content:"Baking: ";font-weight:800}
.note.is-error{background:var(--error-bg);border-left-color:var(--error);color:var(--error);font-weight:600}
.row:has(.note:not([hidden])) .out{margin-bottom:0}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 20px 18px}
.btn.add{background:#fff;border:1px dashed var(--blue);color:var(--blue-ink)}
.btn.add:hover{background:var(--band)}
.sheet-foot .hint{flex:1 1 320px}

/* ---------- shopping list: ruled index card ---------- */
.card{position:sticky;top:16px;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.card::before{content:"";position:absolute;top:0;bottom:0;left:48px;width:2px;background:var(--margin);opacity:.55;pointer-events:none}
.card-head{padding:18px 18px 12px 62px;border-bottom:2px solid var(--band-line)}
.card-head h2{font:800 22px/1.2 var(--ui);letter-spacing:-.01em}
.card-sub{font-size:14px;color:var(--muted);margin-top:4px}
.list{list-style:none;margin:0;padding:0}
.list li{border-bottom:1px solid var(--band-line)}
.list label{display:grid;grid-template-columns:48px 1fr;align-items:center;min-height:44px;padding:6px 16px 6px 0;cursor:pointer;font-size:16px;font-family:var(--num)}
.list input{justify-self:center;width:20px;height:20px;accent-color:var(--blue);margin:0}
.list .item{padding-left:14px}
.list input:checked+.item{text-decoration:line-through;color:var(--soft)}
.list-empty{padding:14px 16px 14px 62px;color:var(--soft);font-size:15px}
.card-note{padding:12px 18px 0 62px;font-size:13px;color:var(--muted)}
.card-actions{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 18px 18px 18px;position:relative;background:var(--paper)}

/* ---------- explainer ---------- */
.how,.faq{max-width:1376px;margin:0 auto;padding:0 24px 56px}
.how h2,.faq h2,.convert h2{font:800 28px/1.2 var(--ui);letter-spacing:-.02em;margin-bottom:16px}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.how-grid article{padding:18px 24px 6px 0}
.how-grid article+article{padding-left:24px;border-left:1px solid var(--line)}
.how h3{font:750 18px/1.3 var(--ui);margin-bottom:8px}
.how p{color:var(--ink);font-size:16px}
.how p+p,.how p+table{margin-top:12px}
.mini{border-collapse:collapse;font:15px var(--num);width:100%}
.mini th,.mini td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--line)}
.mini td:last-child{color:var(--muted)}
.warn-inline{background:var(--amber-bg);border-left:3px solid var(--amber-line);color:var(--amber-ink);padding:8px 12px;font-size:15px!important}
.ticks{margin:0;padding-left:20px}
.ticks li{margin-bottom:10px}

.convert{background:#e6ecf6;border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line);margin-bottom:56px}
.convert{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 48px;padding:32px max(24px,calc((100% - 1328px)/2))}
.convert-copy p{color:var(--muted);max-width:56ch}
.unit-form{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:12px;align-content:start}
.unit-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.unit-form input,.unit-form select{min-height:46px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;background:#fff;font-size:16px;color:var(--ink);width:100%;min-width:0}
.unit-result{grid-column:1/-1;display:block;padding:12px 16px;background:#fff;border:1px solid var(--band-line);border-radius:8px;font:800 22px/1.3 var(--num);color:var(--blue-ink)}

.faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 22px var(--num);color:var(--blue)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);padding:0 32px 14px 0}

.foot{max-width:1376px;margin:0 auto;padding:22px 24px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot .brand.small{font-size:17px}
.foot-copy{flex:1 1 280px}
.foot a{color:var(--ink);font-weight:600}
.tw-xlinks a{font-weight:500}
.print-sheet{display:none}

@media (prefers-reduced-motion:no-preference){
  .btn,.chip,.step,.remove,.row input,.topnav a{transition:background-color .12s,border-color .12s,color .12s}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .bench{grid-template-columns:1fr}
  .card{position:relative;top:auto}
  .ladder{display:none}
  .how-grid{grid-template-columns:1fr}
  .how-grid article,.how-grid article+article{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}
  .convert{grid-template-columns:1fr}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  .topbar{padding:10px 16px}
  .topbar{flex-wrap:wrap;gap:6px}
  .topnav.home-nav{width:100%;flex-wrap:nowrap}
  .topnav.home-nav a[href^="#"]{display:none}
  .topnav.home-nav a{display:flex;flex:1 1 0;justify-content:center;align-items:center;min-height:42px;padding:0 6px;font-size:14px;text-align:center;border:1px solid var(--line);background:#fff}
  .intro{padding:4px 16px 14px}
  .intro h1{font-size:28px}
  .lede{font-size:16px}
  .bench{padding:0 0 40px;gap:16px}
  .sheet,.card{border-radius:0;border-left:0;border-right:0}
  .sheet-head{padding:14px 16px 12px}
  .name-field input{font-size:21px}
  .head-actions{width:100%}
  .head-actions .btn{flex:1 1 0;padding:0 8px;font-size:14px}
  .paste{margin:0 16px 12px}
  .servings{padding:12px 16px;gap:10px 10px}
  .serve-arrow{display:none}
  .serve-box{flex:1 1 0}
  .stepper input{width:100%;flex:1}
  .chips{order:3;width:100%}
  .chip{flex:1 1 0;min-width:0;padding:0 4px}
  .factor{order:2;margin-left:0;flex:0 0 auto}
  .factor output{font-size:24px}
  .error{padding:10px 16px}
  .grid-head{grid-template-columns:72px 84px minmax(0,1fr);padding:8px 16px 6px}
  .grid-head span:nth-child(3),.grid-head span:nth-child(5){display:none}
  .grid-head .for{margin:-8px 0 -6px;padding:8px 10px 6px}
  .row{grid-template-columns:72px 84px minmax(0,1fr) 44px;grid-template-areas:"name name name remove" "amount unit out out" "note note note note";row-gap:6px;padding:10px 16px}
  .row .name{grid-area:name;font-weight:600}
  .row .amount{grid-area:amount}
  .row .unit{grid-area:unit}
  .row .remove{grid-area:remove}
  .row .out{grid-area:out;margin:0;border-radius:6px;border:1px solid var(--band-line);min-height:44px;padding:5px 10px}
  .note{grid-area:note;margin:0}
  .out-main .qty{font-size:20px}
  .sheet-foot{padding:12px 16px 16px}
  .sheet-foot .btn{width:100%}
  .card::before{left:40px}
  .card-head,.card-note{padding-left:54px}
  .card-actions{padding-left:16px}
  .list label{grid-template-columns:40px 1fr}
  .list-empty{padding-left:54px}
  .card-actions .btn{flex:1 1 auto}
  .how,.faq{padding:0 16px 40px}
  .convert{padding:24px 16px;margin-bottom:40px}
  .unit-form{grid-template-columns:1fr 1fr}
  .unit-form label:first-child{grid-column:1/-1}
  .faq-list{grid-template-columns:1fr}
  .foot{padding:20px 16px 28px}
}

/* ---------- print: only the scaled recipe and the list ---------- */
@media print{
  body{background:#fff;color:#000;font:12pt/1.45 var(--ui)}
  body:not(.ref)>*:not(.print-sheet){display:none!important}
  .print-sheet{display:block!important}
  .print-sheet h1{font-size:20pt;margin:0 0 4pt}
  .print-sheet>p{margin:0 0 12pt;color:#333}
  .print-sheet table{width:100%;border-collapse:collapse;margin-bottom:16pt}
  .print-sheet th,.print-sheet td{text-align:left;vertical-align:top;padding:5pt 8pt 5pt 0;border-bottom:1px solid #bbb}
  .print-sheet td:first-child{white-space:nowrap;font-weight:700}
  .print-sheet td:nth-child(2){width:32%}
  .print-sheet td:last-child{color:#333;font-size:10.5pt}
  .print-sheet h2{font-size:14pt;margin:0 0 6pt}
  .print-sheet ul{list-style:none;padding:0;margin:0;columns:2}
  .print-sheet li{padding:3pt 0}
  .print-foot{margin-top:16pt;font-size:9.5pt;color:#555}
}

/* =========================================================================
   Reference pages: /pan-size-converter and /cup-to-grams (body.ref)
   Same worksheet language as the scaler: cool paper, index-card blue, amber only for cautions.
   ========================================================================= */
.ref-nav a[aria-current="page"]{background:var(--band);color:var(--blue-ink)}
.ref-intro{padding-bottom:16px}
.ref-badge{display:inline-block;margin:0 0 12px;align-self:flex-start}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg-opt{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;font-size:15px;font-weight:600;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg-opt:hover{border-color:var(--blue);color:var(--blue-ink)}
.seg-opt:has(input:checked){background:var(--blue);border-color:var(--blue);color:#fff}
.seg-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* pan converter */
.pan-sheet{padding:18px 20px 20px}
.pan-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pan-form{margin:0;min-width:0;border:1px solid var(--line);border-radius:6px;padding:12px 16px 16px;display:flex;flex-direction:column;gap:12px;background:#fbfcfe}
.pan-form legend{display:flex;align-items:center;gap:8px;padding:0 6px;font:750 18px/1.3 var(--ui)}
.pan-tag{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e3e8f0;color:var(--ink);font:800 14px var(--num)}
.pan-tag.b{background:var(--blue);color:#fff}
.pf-preset select,.pf-field input,.pf-field select{width:100%;min-width:0;min-height:44px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;background:#fff;font-size:16px;color:var(--ink)}
.pf-preset .lbl,.pf-field .lbl{margin-bottom:5px}
.pf-field input{font-family:var(--num);font-weight:650}
.pf-field input[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg);color:var(--error)}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.pan-msg{font-size:14px;font-weight:600;color:var(--error)}
.pan-msg:empty{display:none}
.swap-btn{margin-top:14px}
.pan-result{position:sticky;top:16px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:4px}
.ref-card-head{padding:16px 20px 0;border:0}
.ref-card-head h2{font:750 17px/1.3 var(--ui);color:var(--muted)}
.pr-body{padding:4px 20px 20px}
.pr-factor output{display:block;font:800 60px/1.05 var(--num);color:var(--blue-ink);letter-spacing:-.02em}
.pr-basis{margin-top:8px;font-size:16px}
.pan-drawing{display:block;width:100%;height:auto;margin:14px 0 6px;background:repeating-linear-gradient(0deg,transparent 0 19px,#eef2f8 19px 20px),repeating-linear-gradient(90deg,transparent 0 19px,#eef2f8 19px 20px);border:1px solid var(--line);border-radius:4px}
.pan-a{fill:#e9edf3;stroke:#6b778a;stroke-width:2;stroke-dasharray:6 4}
.pan-b{fill:rgba(31,79,191,.14);stroke:var(--blue);stroke-width:2.5}
.pan-hole{fill:#fff;stroke:#6b778a;stroke-width:1.5}
.pan-tagtext{font:800 18px var(--num);fill:var(--ink);text-anchor:middle}
.pan-label{font:600 14px var(--num);fill:var(--muted);text-anchor:middle}
.pr-figures{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 0;font-size:15px}
.pr-figures dt{font-weight:700;color:var(--muted)}
.pr-figures dd{margin:0;font-family:var(--num)}
.pr-nearest{margin-top:10px;font-size:15px;color:var(--ink)}
.pr-nearest:empty{display:none}
.pr-error{margin:12px 0 0;border:0;border-radius:6px}
.pr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pr-actions a[aria-disabled="true"]{opacity:.45;pointer-events:none}
.pr-note{padding:10px 0 0}

/* shared reference sections */
.ref-section{max-width:1376px;margin:0 auto;padding:0 24px 56px}
.ref-section h2{font:800 28px/1.2 var(--ui);letter-spacing:-.02em;margin-bottom:10px}
.ref-lead{color:var(--muted);max-width:78ch;margin-bottom:16px}
.advice{margin:0;padding:0;list-style:none;counter-reset:adv;border-top:2px solid var(--ink)}
.advice li{counter-increment:adv;position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--line);max-width:100ch}
.advice li::before{content:counter(adv);position:absolute;left:0;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--band);color:var(--blue-ink);font:800 14px var(--num)}
.advice li.rule::before{background:var(--amber-bg);color:var(--amber-ink);box-shadow:inset 0 0 0 1px var(--amber-line)}
.src{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.tag-rule{display:inline-block;color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:4px;padding:1px 8px;font-weight:600}
.table-wrap{overflow-x:auto;border-top:2px solid var(--ink)}
.ref-table{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
.ref-table th,.ref-table td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line)}
.ref-table thead th{font-size:13px;font-weight:700;color:var(--muted);background:#f8fafc;letter-spacing:.02em}
.ref-table .num{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-table tbody th{font-weight:600}
.footnote{margin-top:10px;font-size:14px;color:var(--muted);max-width:110ch}
.ref-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 48px}
.ref-two .ticks li{margin-bottom:8px}
.ref-two .hint{margin-top:12px}
.cite-box{align-self:start;background:var(--paper);border:1px dashed var(--line-strong);border-radius:6px;padding:18px 20px}
.cite-box h2{font-size:20px;margin-bottom:8px}
.cite-box p:first-of-type{font-family:var(--ui);font-size:15px;background:#f6f8fb;border-left:3px solid var(--blue);padding:10px 12px;overflow-wrap:anywhere}

/* cups to grams */
.cup-tool{max-width:1376px;margin:0 auto 48px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.cup-form{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--blue);border-right:0;border-radius:4px 0 0 4px;padding:20px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px 16px;align-content:start}
.cf-amount input,.cf-ingredient select,.chart-search input{width:100%;min-width:0;min-height:48px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;background:#fff;color:var(--ink)}
.cf-amount input{font:700 22px var(--num)}
.cf-amount input[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg);color:var(--error)}
.cf-amount .lbl,.cf-ingredient .lbl{margin-bottom:6px}
.cf-unit{margin:0;padding:0;border:0;min-width:0}
.cf-unit legend{margin-bottom:6px;padding:0}
.cf-ingredient{grid-column:1/-1}
.cf-ingredient select{font-size:17px;font-weight:600}
.cf-hint{grid-column:1/-1}
.cup-answer{background:var(--band);border:1px solid var(--band-line);border-top:4px solid var(--blue);border-radius:0 4px 4px 0;padding:20px 24px;display:flex;flex-direction:column;justify-content:center}
.ca-main output{display:block;font:800 60px/1.05 var(--num);color:var(--blue-ink);letter-spacing:-.02em}
.ca-phrase{margin-top:6px;font-size:18px;font-family:var(--num)}
.ca-source{margin-top:12px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.ca-note{margin-top:10px;font-size:14px;background:var(--amber-bg);border-left:3px solid var(--amber-line);color:var(--amber-ink);padding:8px 12px}
.method-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 48px;border-top:2px solid var(--ink);padding-top:16px}
.method-grid p+p,.method-grid p+table{margin-top:12px}
.method-table{max-width:440px}
.method-table thead th{font-size:13px;color:var(--muted)}
.method-table td:last-child{font-weight:700;color:var(--ink)}
.chart-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:6px}
.chart-head h2{margin-bottom:0}
.chart-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chart-search input{width:300px;font-size:16px}
#cup-count{margin-bottom:10px}
.cup-table .cat-row th{background:#e6ecf6;color:var(--blue-ink);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px}
.cup-table tr.is-out,.cup-table tbody.is-out{display:none}
.ing-name{display:block}
.ing-note,.fdc-desc{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.cup-table .measure{font-size:14px;color:var(--ink)}
.cup-table .g-cup{font-weight:800;color:var(--blue-ink);font-size:16px}
.src-cell a{font-weight:600}
.cup-empty{padding:14px 0}

@media (max-width:1100px){
  .pan-result{position:relative;top:auto}
  .ref-two,.method-grid{grid-template-columns:1fr}
  .cup-tool{grid-template-columns:1fr}
  .cup-form{border-right:1px solid var(--line);border-radius:4px 4px 0 0}
  .cup-answer{border-top:0;border-radius:0 0 4px 4px}
}
@media (max-width:720px){
  .ref .topbar{flex-wrap:wrap;gap:6px}
  .ref .topnav.ref-nav{width:100%;flex-wrap:nowrap}
  .ref .topnav.ref-nav a{display:flex!important;flex:1 1 0;justify-content:center;align-items:center;min-height:42px;padding:0 6px;font-size:14px;text-align:center;border:1px solid var(--line);background:#fff}
  .ref .topnav.ref-nav a[aria-current="page"]{background:var(--band);border-color:var(--band-line)}
  .pan-sheet{padding:14px 16px 16px}
  .pan-pair{grid-template-columns:1fr}
  .pan-form{padding:10px 12px 14px}
  .seg-opt{padding:0 12px;font-size:14px}
  .pr-body{padding:4px 16px 18px}
  .ref-card-head{padding:14px 16px 0}
  .pr-factor output,.ca-main output{font-size:48px}
  .swap-btn{width:100%}
  .ref-section{padding:0 16px 40px}
  .ref-section h2{font-size:24px}
  .cup-tool{padding:0;margin-bottom:36px}
  .cup-form,.cup-answer{border-left:0;border-right:0;border-radius:0;padding:16px}
  .cup-form{grid-template-columns:110px minmax(0,1fr)}
  .chart-tools{width:100%}
  .chart-search{flex:1 1 100%}
  .chart-search input{width:100%}
  .chart-tools .btn{flex:1 1 0}
  .advice li{padding-left:40px}
  /* tables become stacked rows */
  .table-wrap{overflow:visible}
  .ref-table thead{display:none}
  .ref-table,.ref-table tbody{display:block}
  .ref-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .ref-table th,.ref-table td{border:0;padding:0}
  .ref-table tbody th[scope="row"]{grid-column:1/-1;font-size:16px;margin-bottom:4px}
  .ref-table td.num{text-align:left}
  .ref-table td[data-label]::before{content:attr(data-label);display:block;font:600 12px var(--ui);color:var(--muted);letter-spacing:.02em}
  .cup-table .measure,.cup-table .src-cell{grid-column:1/-1}
  .cup-table .measure::before,.cup-table .src-cell::before{display:inline!important;margin-right:6px}
  .cup-table .cat-row{display:block;padding:0;border:0}
  .cup-table .cat-row th{display:block;margin-top:12px}
  .pan-table tr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  body.ref{background:#fff;color:#000;font:11pt/1.4 var(--ui)}
  .ref .skip,.ref .topbar,.ref .foot,.ref .chart-tools,.ref #cup-count,.ref .cup-tool,.ref .pr-actions,.ref .pr-note,.ref .swap-btn,.ref .pf-preset,.ref .cup-empty,.ref .ref-badge{display:none!important}
  .ref .intro{padding:0 0 8pt}
  .ref .intro h1{font-size:20pt}
  .ref .lede{font-size:11pt;color:#333}
  .ref .ref-section{padding:0 0 14pt;max-width:none}
  .ref .ref-section h2{font-size:14pt;margin-bottom:4pt}
  .ref .table-wrap{overflow:visible;border-top:1.5pt solid #000}
  .ref .ref-table{font-size:9.5pt}
  .ref .ref-table th,.ref .ref-table td{padding:3pt 6pt;border-bottom:.5pt solid #999}
  .ref .cup-table tr.is-out{display:table-row!important}
  .ref .cup-table tbody.is-out{display:table-row-group!important}
  .ref .cup-table .cat-row th{background:none;border-bottom:1pt solid #000;padding-top:8pt}
  .ref .fdc-desc{font-size:8pt}
  .ref .ref-table tr{break-inside:avoid}
  .ref .ref-two,.ref .method-grid{display:block}
  .ref .cite-box{border:.5pt solid #999;margin-top:8pt}
  .ref .pan-bench{display:block}
  .ref .pan-result{position:static;border:1pt solid #000;margin-top:8pt}
  .ref a{color:#000}
  .ref .footnote,.ref .src{color:#333}
}

/* scaler: hand-off notice from the pan converter, link to the cups chart */
.handoff{margin:0;padding:10px 20px;background:var(--band);color:var(--blue-ink);font-size:15px;font-weight:600;border-bottom:1px solid var(--band-line)}
.convert-more{margin-top:10px}
@media (max-width:720px){.handoff{padding:10px 16px}}
.chart-caveat{margin:4px 0 6px;font-size:15px;color:var(--amber-ink);background:var(--amber-bg);border-left:3px solid var(--amber-line);padding:8px 12px;max-width:80ch}
@media print{.ref .chart-caveat{background:none;color:#000;padding:0 0 4pt;border:0}}
.pan-jump{display:none}
@media (max-width:720px){
  .pan-jump{display:flex;align-items:center;justify-content:center;gap:6px;position:sticky;bottom:0;z-index:5;margin:12px -16px -16px;min-height:52px;padding:0 16px;background:var(--blue);color:#fff;font-weight:650;text-decoration:none}
  .pan-jump b{font:800 20px var(--num)}
}
@media print{.ref .pan-jump{display:none!important}}

/* ---------- first paint: reserve the space the scripts fill (no layout shift) ---------- */
/* pn-own / pn-scale and --pn-rows are set by the inline script in index.html <head> from the saved recipe. */
.pn-own #example-badge{display:none}
.pn-scale #handoff{display:block;min-height:44px}
#ingredients:empty{min-height:calc(var(--pn-rows,8) * 57px + 100px)}
#scaled-list:empty{min-height:calc(var(--pn-rows,8) * 45px)}
.pan-form .seg:empty{min-height:90px}
.pan-form .dims:empty{min-height:148px}
.pn-linked #pan-example{display:none}
@media (max-width:720px){#ingredients:empty{min-height:calc(var(--pn-rows,8) * 121px + 120px)}}

/* ---------- cups & spoons / grams & ml (2026-10-21) ---------- */
.measure-mode{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 10px 20px;border-bottom:1px solid var(--line)}
.measure-mode .lbl{margin-right:4px}
.mode-btn{min-height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--ink);font:600 14px/1 var(--ui);cursor:pointer}
.mode-btn:hover{border-color:var(--blue)}
.mode-btn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.mode-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:720px){.measure-mode{padding:10px 16px}.mode-btn{flex:1 1 0;min-height:40px}.measure-mode .lbl{width:100%}}
@media print{.measure-mode{display:none}}
/* cups-to-grams: the answer box is vertically centred and filled by the page script, so its lines keep their height */
.ca-phrase{min-height:1.55em}
.ca-source{min-height:2.9em}
@media (max-width:720px){.ca-phrase{min-height:3.1em}}
@media (min-width:1101px){#cup-table:not(:has(tbody)){height:4100px}}
#pan-basis:empty{min-height:99px}
#pan-figures:empty{min-height:101px}
#pan-nearest:empty{min-height:47px}