/* WhiteUI shared chrome — THE single place for header, logo, navbar links,
   breadcrumb, footer and spacing (26 Oct 2026).
   Every page links to this file, so editing here changes the whole site.
   Variable fallbacks cover both stylesheets: template pages use --mute/--acc,
   home-style pages use --muted/--primary. Light footer background is #f2f4f8. */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:var(--bg,#fff);border-bottom:1px solid var(--line,#e3e7ee);z-index:5;margin-bottom:28px}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font:800 22px/1 var(--hd,"Bricolage Grotesque",system-ui,sans-serif);letter-spacing:-.02em;text-decoration:none;color:var(--ink,#1b1f2a)}
.logo i{font-style:normal;color:var(--acc,var(--primary,#673DE6))}
.logo span{color:var(--primary,var(--acc,#673DE6))}
.headlinks{display:flex;gap:22px;align-items:center}
.headlinks a{text-decoration:none;font-weight:600;font-size:15px;color:var(--mute,var(--muted,#5d6577))}
.headlinks a:hover{color:var(--ink,#1b1f2a)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--mute,var(--muted,#5d6577));margin:0 0 8px}
.crumb a{text-decoration:none;color:var(--mute,var(--muted,#5d6577))}
.crumb a:hover{color:var(--acc,var(--primary,#673DE6));text-decoration:underline}
.crumb span[aria-current="page"]{color:var(--ink,#1b1f2a);font-weight:700}
.crumb .sep{color:var(--line,#e3e7ee)}
footer{border-top:1px solid var(--line,#e3e7ee);padding:26px 0;color:var(--mute,var(--muted,#5d6577));font-size:14px;margin-top:48px;background:var(--mist,#f2f4f8)}
.footgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:24px;margin-bottom:20px}
.footgrid ul{list-style:none;margin:8px 0 0;padding:0}
.footgrid li{margin:6px 0}
.footgrid a{text-decoration:none;color:var(--mute,var(--muted,#5d6577))}
.footgrid a:hover{color:var(--ink,#1b1f2a)}
.footbase{border-top:1px solid var(--line,#e3e7ee);padding-top:16px;margin:0}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr}.headlinks{gap:14px}}
/* list patterns — homepage, category and subcategory pages (26 Oct 2026) */
.sec{margin-top:44px}
.sec>h2{margin-bottom:16px;font-size:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{display:block;background:var(--mist,#f2f4f8);border:1px solid transparent;border-radius:20px;padding:22px;text-decoration:none;color:var(--ink,#1b1f2a);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--acc,var(--primary,#673DE6));transform:translateY(-2px)}
.card h3{font-size:21px}
.card p{margin:6px 0 14px;color:var(--mute,var(--muted,#5d6577));font-size:15px}
.card .count{font-size:14px;font-weight:600;color:var(--acc,var(--primary,#673DE6))}
.rows{border-top:1px solid var(--line,#e3e7ee)}
.row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line,#e3e7ee);text-decoration:none;color:var(--ink,#1b1f2a)}
.row:hover h3{color:var(--acc,var(--primary,#673DE6))}
.row h3{font-size:19px;transition:color .15s}
.row p{margin:2px 0 0;color:var(--mute,var(--muted,#5d6577));font-size:15px}
.row .go{color:var(--mute,var(--muted,#5d6577));font-size:20px}
.row:hover .go{color:var(--acc,var(--primary,#673DE6))}
.card[hidden], .row[hidden], .sec[hidden]{display:none}
/* font-colour hierarchy (26 Oct 2026) — headings ink, body ink, secondary muted, links accent */
h1,h2,h3{color:var(--ink,#1b1f2a)}
.lede,.lead{color:var(--mute,var(--muted,#5d6577))}
.prose p,.prose li{color:var(--ink,#1b1f2a)}
.prose a{color:var(--acc,var(--primary,#673DE6));text-decoration:underline}
.prose a:hover{text-decoration:underline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--acc:#9B8CFF;--primary:#9B8CFF}
  :root[data-theme="dark"]{--acc:#9B8CFF;--primary:#9B8CFF}
  :root{--acc:#9B8CFF;--primary:#9B8CFF}
}
/* spacing rhythm + blog reading (27 Oct 2026) — cards/rows that follow a lede directly get breathing room */
main>.cards,main>.rows{margin-top:48px}
.art-wrap{max-width:720px}
.prose{font-size:19px;line-height:1.85}
.prose p{margin:0 0 22px}
.prose h2{font-size:28px;margin:44px 0 14px}
.prose ul{margin:0 0 22px}
.prose li{margin-bottom:8px}
.meta{font-size:15px}
.fig{margin:28px 0}
.fig figcaption{font-size:15px}

/* blog index cards (27 Oct 2026) — cover image on top, same radius/hover language as tool cards */
.blogsec{margin-top:44px}
.blogsec>h2{margin-bottom:8px;font-size:22px}
.blogsec>.muted{margin:0 0 16px}
.blogcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.blogcard{display:block;background:var(--bg,#fff);border:1px solid var(--line,#e3e7ee);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.blogcard:hover{border-color:var(--acc,var(--primary,#673DE6));transform:translateY(-2px)}
.blogcover{aspect-ratio:800/260;background:var(--mist,#f2f4f8);overflow:hidden}
.blogcover img{width:100%;height:100%;object-fit:cover;display:block}
.blogbody{padding:18px 20px 20px}
.blogbody h3{font-size:19px;margin:0 0 8px;line-height:1.3}
.blogbody p{margin:0 0 12px;color:var(--mute,var(--muted,#5d6577));font-size:15px;line-height:1.6}
.blogmore{color:var(--acc,var(--primary,#673DE6));font-weight:600;font-size:15px}

/* blog article type (27 Oct 2026) — Source Serif 4 for article body only; headings stay Bricolage, captions/meta stay Instrument Sans */
.art-wrap .prose{font-family:"Source Serif 4",Georgia,serif}
.art-wrap .prose h2{font-family:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif}
.art-wrap .fig figcaption{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}

/* Formula overflow fix (27 Oct 2026, user-reported from live Calorie page) — tool-page How-it-works <pre> blocks scroll inside themselves instead of pushing a 360px phone page sideways. Same handling as blog .prose pre; also in TOOL-TEMPLATE.md base CSS for future pages. */
.how pre{overflow-x:auto}

/* FAQ + heading hierarchy (27 Oct 2026) — H2 sections vs H3 questions must never look alike */
.prose h2{font-size:28px;font-weight:800;margin:48px 0 16px}
.prose h3{font-size:20px;line-height:1.35;font-weight:700;margin:28px 0 6px;font-family:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif}