/* ===========================================================================
   Editorial theme. Applies the homepage design language (warm paper, rust
   accent, serif display headings, mono labels) to every tool and content page.
   Loaded after each page's own <style>, so it overrides. The main lever is
   redefining the legacy --clr-* tokens to editorial values, so existing
   component CSS adopts the palette and fonts with no structural change.
   Font stacks match the homepage (no web fonts loaded), so pages render
   consistently with it.
   =========================================================================== */
:root{
  --clr-bg:oklch(0.965 0.018 78);
  --clr-surface:oklch(0.988 0.010 80);
  --clr-surface-alt:oklch(0.945 0.020 76);
  --clr-border:oklch(0.86 0.018 72);
  --clr-border-focus:oklch(0.58 0.140 38);
  --clr-text:oklch(0.22 0.025 50);
  --clr-text-muted:oklch(0.50 0.020 60);
  --clr-accent:oklch(0.56 0.140 38);
  --clr-accent-hover:oklch(0.40 0.120 36);
  --clr-accent-light:oklch(0.93 0.045 64);
  --clr-accent-bg:oklch(0.967 0.022 72);
  --clr-success:oklch(0.50 0.075 150);
  --clr-success-bg:oklch(0.95 0.030 150);
  --clr-danger:oklch(0.52 0.160 28);
  --clr-danger-bg:oklch(0.95 0.040 30);
  --clr-info:oklch(0.50 0.090 250);
  --clr-info-bg:oklch(0.95 0.030 250);
  --clr-shadow:oklch(0.30 0.030 60 / 0.10);
  --radius:14px; --radius-sm:8px;
  --font:"Geist","Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-display:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-mono:"JetBrains Mono","SF Mono","Fira Code",ui-monospace,monospace;
  --t-bg:var(--clr-bg); --t-ink:var(--clr-text); --t-muted:var(--clr-text-muted);
  --t-accent:var(--clr-accent); --t-rule:var(--clr-border);
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--clr-bg);color:var(--clr-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Serif display headings, the homepage signature */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-0.01em;color:var(--clr-text)}
h2{line-height:1.12}
main h2:first-of-type{font-size:clamp(28px,4.2vw,42px)}
.subtitle,.lede,.intro{font-family:var(--font-display);color:var(--clr-text-muted)}

/* Header chrome */
header{background:color-mix(in oklch,var(--clr-bg),white 24%)!important;
  border-bottom:1px solid var(--clr-border)!important;box-shadow:none!important}
header h1,header .container h1{font-family:var(--font-display)!important;font-weight:400!important;
  font-size:19px!important;letter-spacing:.01em!important}
header h1 a{color:var(--clr-text)!important;text-decoration:none}
header nav a,header .container nav a{font-family:var(--font-mono)!important;font-size:11.5px!important;
  text-transform:uppercase!important;letter-spacing:.12em!important;color:var(--clr-text-muted)!important;
  background:transparent!important;border:1px solid transparent!important;padding:5px 4px!important;
  border-radius:0!important;transition:color .18s ease}
header nav a:hover,header .container nav a:hover{color:var(--clr-accent)!important;background:transparent!important;
  border-color:transparent!important}

/* Cards and surfaces */
.card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);
  box-shadow:0 1px 2px var(--clr-shadow)}

/* Form controls */
.field label,label{font-family:var(--font-mono);letter-spacing:.04em}
input,select,textarea{font-family:var(--font);border-radius:var(--radius-sm)}
input:focus,select:focus,textarea:focus{border-color:var(--clr-accent)!important;
  box-shadow:0 0 0 3px var(--clr-accent-light)!important;outline:none}

/* Result / output emphasis */
.result-box,.result,.output-box{background:var(--clr-accent-bg)!important;border:1px solid var(--clr-accent)!important}
.result-box .value,.result .value,.result-value{font-family:var(--font-display)!important;color:var(--clr-accent-hover)!important}

/* Tables */
th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;
  background:var(--clr-surface-alt);color:var(--clr-text-muted);font-weight:500}

/* Buttons. Primary actions get the rust pill; neutral buttons a hairline pill. */
button,.btn,a.button,input[type=button],input[type=submit]{font-family:var(--font);border-radius:999px}
.btn-primary,button.primary,.primary-btn{background:var(--clr-accent);color:#fff;border:none}
.btn-primary:hover,button.primary:hover,.primary-btn:hover{background:var(--clr-accent-hover)}

/* Links in body copy.
   This rule is specificity 0,0,3,1 and beats any single class, so a call to action styled
   with a bare class such as .next-step-btn inherited accent text on an accent background:
   contrast 1.0, an invisible button. Measured live on cups-to-grams 2026-08-07. Every
   button class is excluded by name here rather than fought downstream. */
main a:not(.btn):not(.button):not(.next-step-btn):not(.kp-buy):not(.kp-offer-btn):not(.pk-btn):not(.mt-pw-buy){color:var(--clr-accent)}
main a:not(.btn):not(.button):not(.next-step-btn):not(.kp-buy):not(.kp-offer-btn):not(.pk-btn):not(.mt-pw-buy):hover{color:var(--clr-accent-hover)}

/* Next step, the paid offer under a free tool. Never above one. */
.next-step{margin-top:14px;padding:16px 18px;border:1px solid var(--clr-border);
  border-left:3px solid var(--clr-accent);border-radius:10px;background:var(--clr-surface-alt)}
.next-step-line{font-weight:650;color:var(--clr-text);margin:0 0 4px;font-size:0.98rem}
.next-step-sub{color:var(--clr-text-muted);font-size:0.88rem;margin:0 0 12px;line-height:1.5}
.next-step-btn,main a.next-step-btn{display:inline-block;background:var(--clr-accent);
  color:#FFFBF5;text-decoration:none;font-weight:600;font-size:0.92rem;padding:0.6rem 1.1rem;
  border-radius:8px;min-height:38px;line-height:1.4}
.next-step-btn:hover,main a.next-step-btn:hover{background:var(--clr-accent-hover);color:#FFFBF5}
@media (max-width:480px){.next-step{padding:14px}
  .next-step-btn{display:block;text-align:center}}

/* Footer */
footer{border-top:1px solid var(--clr-border)!important;color:var(--clr-text-muted)!important;background:transparent!important}
footer a{color:var(--clr-accent)!important}

/* Accessibility */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--clr-accent);outline-offset:2px}

/* ===========================================================================
   v8 structural layer. v7 repainted the legacy pages with the homepage
   palette but left their structure alone, so they still read as a different
   site: the logo was the H1, prose ran to 868px, and injected Q&A blocks had
   no vertical rhythm. This section fixes the structure, not the colour.
   =========================================================================== */

/* Brand lockup. Replaces the old logo-as-H1 so the real page title can be
   the H1. Mirrors the homepage .brand. */
header .brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--clr-text);font-family:var(--font-display);font-size:19px;letter-spacing:.01em}
header .brand:hover{color:var(--clr-accent)}
header .brand-mark{width:26px;height:20px;flex:0 0 auto;color:var(--clr-accent)}
header .brand-text em{font-style:normal;color:var(--clr-accent);padding:0 1px}

/* Nav. The homepage uses sentence case, so the legacy uppercase mono
   treatment is what made these pages feel like another site. */
header nav,header .container nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
header nav a,header .container nav a{font-family:var(--font)!important;font-size:14.5px!important;
  text-transform:none!important;letter-spacing:0!important;color:var(--clr-text-muted)!important;
  padding:4px 0!important}
header .nav-sep{color:var(--clr-border);user-select:none}

/* Page title. The promoted H1 gets the homepage display scale. */
main > h1:first-of-type,main .page-head h1{font-family:var(--font-display);font-weight:400;
  font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-0.02em;margin:0 0 16px}
/* The page title was sitting flush against the header rule. The homepage
   gives its hero real air, so match that. */
main{padding-top:64px!important}
@media (max-width:640px){main{padding-top:40px!important}}
main > h1:first-of-type + .subtitle,main .page-head .subtitle{font-size:19px;line-height:1.6;
  margin:0 0 8px}

/* Reading measure. 868px at 16px runs past 100 characters a line. The
   homepage sits near 65. Cap the prose, leave tables and cards full width. */
main p,main li,main blockquote,main .card p,main .card li{max-width:68ch}
main .subtitle,main .lede{max-width:60ch}
/* Tool chrome and tabular data must stay full width. Prose inside a card
   does not, which is what the first cut of this rule got wrong. */
main td,main th,main figcaption,main .result-box p,main .converter-row p,
main .field p,main .table-container p,main .search-box p{max-width:none}

/* Vertical rhythm. The injected Q&A pairs shipped with no margins at all,
   so questions collided with the answer above them. */
main h2{margin:56px 0 16px}
main h3{margin:34px 0 10px}
main p{margin:0 0 18px;line-height:1.7}
main li{margin:0 0 8px;line-height:1.7}
/* Rhythm is for the page flow, not the inside of a component. Without this
   the section margins pushed a 56px gap above every card heading. */
main [class*="card"] > *:first-child,main [class*="panel"] > *:first-child,
main .callout > *:first-child,main .step-card > *:first-child{margin-top:0}
main [class*="card"] h2{margin-top:32px}
main [class*="card"] h3{margin-top:26px}
main [class*="card"] > h2:first-child,main [class*="card"] > h3:first-child{margin-top:0}
main > h1:first-of-type ~ h2:first-of-type{margin-top:40px}

/* Q&A block. Gives the answers a shared surface and real separation. */
.qa-block{margin:48px 0 8px;padding:4px 0 0;border-top:1px solid var(--clr-border)}
.qa-block > h2{margin-top:28px}
.qa-block h3{font-family:var(--font-display);font-size:20px;line-height:1.3;
  margin:30px 0 8px;color:var(--clr-text)}
.qa-block h3:first-of-type{margin-top:18px}
.qa-block p.qas{color:var(--clr-text-muted);line-height:1.75;margin:0 0 4px;max-width:68ch}

/* Section spacing so long pages breathe like the homepage. */
main section{margin-top:56px}
main .card{margin:28px 0}
main .card + .card{margin-top:24px}

@media (max-width:640px){
  header nav,header .container nav{gap:14px}
  header nav a,header .container nav a{font-size:13.5px!important}
  main h2{margin:40px 0 12px}
  .qa-block h3{font-size:18px}
}

/* ---------------------------------------------------------------------------
   Mobile hardening. Found by driving the pages at 390px in Chrome:
   the serving-size ingredient rows overflowed the viewport by 139px, and
   nav links and small buttons were under the 32px tap minimum.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  /* Nothing may push the page sideways. */
  html,body{overflow-x:hidden}
  main,header,footer,.container{max-width:100%}

  /* Rows of inputs wrap instead of running off the screen. */
  .ingredient-row{flex-wrap:wrap;gap:8px;align-items:center}
  .ingredient-row .name{flex:1 1 100%;min-width:0}
  .ingredient-row input,.ingredient-row select{max-width:100%}
  .ingredient-row .scaled{margin-left:auto;text-align:right}
  .converter-row{flex-wrap:wrap}
  .converter-row .field{flex:1 1 100%;min-width:0}

  /* Tap targets. 44px is the Apple guideline, 40 is the floor. */
  header nav a,header .container nav a{min-height:40px;display:inline-flex;
    align-items:center;padding:6px 0!important}
  button,.btn,a.button,input[type=button],input[type=submit]{min-height:40px}
  .ingredient-row .remove-btn{width:40px;height:40px;flex:0 0 auto}

  /* Tables scroll inside their own container, never the page. */
  .table-container,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
}