/* =============================================================================
   Gluten Free Planner

   Color discipline: the brand accent is teal, deliberately outside the
   traffic light range, because green / amber / red carry actual safety
   meaning here and must never be mistaken for decoration.
============================================================================= */

:root{
  --ground:#EFF3F3;
  --ground-2:#E3EAEA;
  --surface:#FFFFFF;
  --edge:#CEDCDA;
  --edge-soft:#DFE9E8;
  --well:#F7FAFA;

  --ink:#0F1F1D;
  --ink-2:#415754;
  --ink-3:#5F736F;   /* 5.0:1 on white, secondary text still has to be readable */

  --brand:#0C6E66;
  --brand-ink:#FFFFFF;
  --brand-soft:#DCEEEC;

  --safe:#176B3C;         /* naturally gluten free */
  --safe-soft:#DDF0E5;
  --check:#8F5405;        /* read the label */
  --check-soft:#FAEEDA;
  --risk:#A93520;         /* shared equipment risk */
  --risk-soft:#FAE3DE;

  --p1:#0C6E66; --p2:#3F51A8; --p3:#8A3B78; --p4:#A0531F; --p5:#4A6B27;
  /* text that sits ON a person color, which is dark in light mode
     and light in dark mode, so the ink has to flip with it */
  --lid-ink:#FFFFFF;
  --lid-veil:rgba(255,255,255,.2);
  --lid-veil-2:rgba(255,255,255,.38);

  --shadow-s:0 1px 0 rgba(15,31,29,.05);
  --shadow-m:0 1px 0 rgba(15,31,29,.05), 0 10px 24px -14px rgba(15,31,29,.5);
  --shadow-l:0 2px 0 rgba(15,31,29,.06), 0 26px 50px -24px rgba(15,31,29,.55);

  --font-display:"Segoe UI Variable Display","SF Pro Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono","Consolas","Roboto Mono",monospace;

  --focus:#0C6E66;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1413;
    --ground-2:#111D1B;
    --surface:#152322;
    --edge:#2A3D3A;
    --edge-soft:#243532;
    --well:#101C1A;
    --ink:#E4EEEC;
    --ink-2:#A3B8B4;
    --ink-3:#90A8A4;   /* 6.6:1 on the dark surface */
    --brand:#3FBFB0;
    --brand-ink:#04211E;
    --brand-soft:#123531;
    --safe:#4FC183;
    --safe-soft:#123024;
    --check:#E0A94A;
    --check-soft:#33260F;
    --risk:#F08268;
    --risk-soft:#3A1811;
    --p1:#3FBFB0; --p2:#8994E8; --p3:#D186C0; --p4:#E0975C; --p5:#9BC163;
    --lid-ink:#08201D;
    --lid-veil:rgba(0,0,0,.14);
    --lid-veil-2:rgba(0,0,0,.28);
    --shadow-s:0 1px 0 rgba(0,0,0,.45);
    --shadow-m:0 1px 0 rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.95);
    --shadow-l:0 2px 0 rgba(0,0,0,.55), 0 26px 50px -24px rgba(0,0,0,1);
    --focus:#3FBFB0;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1413;
  --ground-2:#111D1B;
  --surface:#152322;
  --edge:#2A3D3A;
  --edge-soft:#243532;
  --well:#101C1A;
  --ink:#E4EEEC;
  --ink-2:#A3B8B4;
  --ink-3:#90A8A4;   /* 6.6:1 on the dark surface */
  --brand:#3FBFB0;
  --brand-ink:#04211E;
  --brand-soft:#123531;
  --safe:#4FC183;
  --safe-soft:#123024;
  --check:#E0A94A;
  --check-soft:#33260F;
  --risk:#F08268;
  --risk-soft:#3A1811;
  --p1:#3FBFB0; --p2:#8994E8; --p3:#D186C0; --p4:#E0975C; --p5:#9BC163;
  --shadow-s:0 1px 0 rgba(0,0,0,.45);
  --shadow-m:0 1px 0 rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.95);
  --shadow-l:0 2px 0 rgba(0,0,0,.55), 0 26px 50px -24px rgba(0,0,0,1);
  --focus:#3FBFB0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1240px;margin:0 auto;padding:22px 20px 72px}

/* ------------------------------------------------------------ masthead -- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.markLink{display:block;flex:none;line-height:0}
.markLink img{width:42px;height:42px;display:block}
h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.032em;
  font-size:clamp(23px,3.4vw,30px);line-height:1.03;margin:0;text-wrap:balance;
}
h1 span{color:var(--brand)}

/* The logo IS the heading, so the h1 carries no type of its own and the
   accessible name lives in a visually hidden span.

   Drawn as a background rather than an <img> on purpose: <picture> with
   prefers-color-scheme cannot see the data-theme stamp, so an explicit
   theme choice would leave the wrong logo on screen. This uses the same
   three state pattern as every other colour in the file, and only ever
   downloads the one image the viewer actually needs. */
h1.wordmark{
  margin:0;
  height:clamp(38px,5.2vw,50px);
  aspect-ratio:1958 / 444;        /* the trimmed artwork, so no letterboxing */
  background:url(logo.png?v=11c27794) left center / contain no-repeat;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) h1.wordmark{background-image:url(logo-dark.png?v=fe5f1631)}
}
:root[data-theme="dark"] h1.wordmark{background-image:url(logo-dark.png?v=fe5f1631)}
.tagline{margin:2px 0 0;color:var(--ink-3);font-size:13px}

/* -------------------------------------------------------------- people -- */
.people{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;
  padding:10px;background:var(--surface);border:1.5px solid var(--edge);
  border-radius:13px;box-shadow:var(--shadow-s);
}
.person{
  display:inline-flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;
  border:1.5px solid var(--edge);border-radius:999px;background:var(--surface);
  color:var(--ink-2);text-align:left;
  transition:border-color .12s ease,background .12s ease;
}
.person:hover{border-color:var(--who)}
.person[aria-selected="true"]{
  border-color:var(--who);color:var(--ink);
  background:color-mix(in oklab, var(--who) 9%, var(--surface));
}
.person .pip{
  width:30px;height:30px;border-radius:50%;background:var(--who);color:var(--lid-ink);
  flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:700;
  font-family:var(--font-display);letter-spacing:.02em;
}
.person .txt{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.person .nm{font-size:14px;font-weight:650;letter-spacing:-.01em}
.person .meta{font-size:10.5px;color:var(--ink-3);font-weight:500}
.person .pen{font-size:11px;opacity:0;margin-left:2px;transition:opacity .12s ease}
.person[aria-selected="true"] .pen{opacity:.55}
.person[aria-selected="true"]:hover .pen{opacity:1}
.person-add{
  border:1.5px dashed var(--edge);border-radius:999px;background:transparent;
  padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3);
}
.person-add:hover{border-color:var(--brand);color:var(--brand)}
.people .spacer{flex:1 1 auto}

/* ------------------------------------------------------------ controls -- */
.controls{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:13px 15px;margin-bottom:20px;background:var(--surface);
  border:1.5px solid var(--edge);border-radius:13px;box-shadow:var(--shadow-s);
}
.btn{
  border:1.5px solid var(--edge);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:9px 14px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:7px;transition:transform .08s ease,border-color .12s ease;
}
.btn:hover{border-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.btn[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.btn[hidden]{display:none}   /* display:inline-flex would otherwise beat [hidden] */
.btn-go{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink);
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.015em;
  padding:11px 20px;box-shadow:var(--shadow-m);
}
.btn-go:hover{filter:brightness(1.08);border-color:var(--brand)}
.spacer{flex:1 1 auto}

/* ---------------------------------------------------------- section head */
.section-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.026em;margin:0}
.section-head span{font-size:12.5px;color:var(--ink-3)}

/* --------------------------------------------------------------- trays -- */
.week{display:grid;gap:13px;margin-bottom:28px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1080px){.week{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.week{grid-template-columns:1fr}}

.tray{
  background:var(--surface);border:2px solid var(--edge);
  border-radius:4px 4px 15px 15px;box-shadow:var(--shadow-m);
  display:flex;flex-direction:column;position:relative;
  min-width:0;   /* without this a long food name widens the whole tray */
}
.tray::before,.tray::after{
  content:"";position:absolute;top:26px;width:5px;height:15px;
  background:var(--edge);border-radius:3px;
}
.tray::before{left:-4px}
.tray::after{right:-4px}
.tray.is-locked{border-color:var(--who)}
.tray.is-locked::before,.tray.is-locked::after{background:var(--who)}

.lid{
  border-radius:2px 2px 0 0;padding:8px 10px;display:flex;align-items:center;gap:7px;
  background:var(--day, var(--who));color:var(--lid-ink);cursor:grab;
}
.lid .abbr{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lid .date{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums}
.grip{
  width:16px;height:21px;flex:none;border:0;background:transparent;padding:0;
  display:grid;place-items:center;border-radius:5px;color:var(--lid-ink);
  opacity:.7;cursor:grab;margin-left:-2px;
}
.grip::before{
  content:"";width:9px;height:13px;
  background-image:radial-gradient(currentColor 1.05px, transparent 1.15px);
  background-size:4.5px 4.4px;
}
.grip:hover{opacity:1;background:var(--lid-veil-2)}
.lock{
  margin-left:auto;background:var(--lid-veil);border:0;width:25px;height:25px;
  border-radius:6px;display:grid;place-items:center;font-size:12px;
  color:var(--lid-ink);flex:none;
}
.lock:hover{background:var(--lid-veil-2)}
.lock[aria-pressed="true"]{background:var(--surface);color:var(--who)}
.tray.is-locked .lid,.tray.is-locked .grip{cursor:default}

.wells{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto;
  gap:6px;padding:8px;background:var(--ground-2);flex:1;min-width:0;
}
.well{
  background:var(--well);border:1.5px dashed var(--edge-soft);border-radius:8px;
  padding:6px 6px 9px;text-align:center;position:relative;
  display:flex;flex-direction:column;gap:2px;min-width:0;
  /* tall enough for a three line name, so the side row is the same height in
     every tray. Content-sized rows made neighbouring trays look misaligned. */
  min-height:104px;
  transition:border-color .12s ease,background .12s ease;
}
.well:hover{border-color:var(--brand);background:var(--surface)}
.well--main{grid-column:1 / -1;border-style:solid;min-height:98px;padding:6px 10px 11px}

/* the label sits in flow, so it can never land on top of the food */
.well-head{
  display:flex;align-items:center;gap:5px;
  padding:1px 20px 0 1px;min-height:11px;
}
.well .label{
  font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);line-height:1;
}
.well-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding-top:1px;
}
.well--main .well-body{gap:4px}
.well .emoji{font-size:25px;line-height:1.05}
.well--main .emoji{font-size:32px}
.well .name{
  font-size:11.5px;line-height:1.25;color:var(--ink-2);font-weight:500;
  overflow-wrap:anywhere;hyphens:auto;max-width:100%;
}
.well .sub,.well-body{min-width:0;max-width:100%}
.well--main .name{
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:-.022em;color:var(--ink);line-height:1.2;
}
.well--main .sub{font-size:10.5px;color:var(--ink-3);line-height:1.3}
.well .reroll{
  position:absolute;top:3px;right:3px;width:21px;height:21px;border:0;background:transparent;
  border-radius:6px;color:var(--ink-3);font-size:12px;display:grid;place-items:center;
  opacity:0;transition:opacity .12s ease;
}
.well:hover .reroll,.well:focus-within .reroll{opacity:1}
.well .reroll:hover{background:var(--brand-soft);color:var(--brand)}
.well.pop .emoji,.well.pop .name{animation:pop .28s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

/* the safety dot, reading as part of the label rather than floating */
.gf{width:7px;height:7px;border-radius:50%;flex:none}
.well--main .gf{width:8px;height:8px}
.gf--natural{background:var(--safe)}
.gf--label{background:var(--check)}
.gf--swap{background:var(--check);box-shadow:0 0 0 2px var(--check-soft)}

.legend{
  display:flex;gap:15px;flex-wrap:wrap;align-items:center;
  margin:-2px 0 15px;font-size:11.5px;color:var(--ink-3);
}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;flex:none}

.chip{
  display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:4px;font-weight:700;
}
.chip--batch{background:var(--brand-soft);color:var(--brand)}
.well--main.is-batch{border-color:var(--brand);border-style:dashed}

.tray.dealing{animation:deal .34s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes deal{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .tray.dealing,.well.pop .emoji,.well.pop .name{animation:none}
  *{transition-duration:.01ms !important}
}

/* ------------------------------------------------------------ dragging -- */
.is-drag-src{opacity:.28}
.tray.drop-ok{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),var(--shadow-m)}
.well.drop-ok{border-color:var(--brand);border-style:solid;background:var(--brand-soft)}
.ghost{position:fixed;z-index:80;pointer-events:none;margin:0;transform:scale(.93) rotate(-1.5deg);box-shadow:var(--shadow-l);opacity:.97}
body.is-dragging{user-select:none;-webkit-user-select:none;touch-action:none}
body.is-dragging *{cursor:grabbing !important}

/* -------------------------------------------------------------- panels -- */
.panels{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.panels{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:16px}
.panel{
  background:var(--surface);border:1.5px solid var(--edge);
  border-radius:13px;padding:17px;box-shadow:var(--shadow-s);
}

/* the safety panel, set like the back of a package */
.checks{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.checks li{
  /* fixed first column, so every title starts at the same x no matter how
     wide the badge word is. An auto column made the list look ragged. */
  display:grid;grid-template-columns:82px 1fr;gap:11px;align-items:start;
  padding:11px 0;border-top:1px solid var(--edge-soft);
}
.checks li:first-child{border-top:0;padding-top:2px}
.badge{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;padding:3px 5px;border-radius:4px;white-space:nowrap;margin-top:1px;
  display:block;text-align:center;
}
.badge--label{background:var(--check-soft);color:var(--check)}
.badge--swap{background:var(--check-soft);color:var(--check)}
.badge--risk{background:var(--risk-soft);color:var(--risk)}
.badge--safe{background:var(--safe-soft);color:var(--safe)}
.checks b{display:block;font-size:13.5px;font-weight:650;margin-bottom:1px}
.checks p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.checks .who{font-size:11px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.05em}

.allclear{
  display:flex;gap:10px;align-items:center;padding:12px;border-radius:10px;
  background:var(--safe-soft);color:var(--safe);font-size:13.5px;font-weight:600;
}

.disclaimer{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--edge-soft);
  font-size:11.5px;color:var(--ink-3);line-height:1.5;
}

/* something new to try */
.tries{display:flex;flex-direction:column;gap:9px}
.try{
  border:1.5px solid var(--edge-soft);border-radius:10px;padding:11px;
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;background:var(--well);
}
.try .emoji{font-size:26px;line-height:1}
.try h3{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;margin:0 0 2px}
.try .made{
  margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--ink-2);
}
.try .made span{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-right:5px;
}
.try .why{font-size:12.5px;color:var(--ink-3);margin:0 0 8px;line-height:1.4}
.try .why em{color:var(--brand);font-style:normal;font-weight:600}
.try .gfnote{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:2.5px 6px;border-radius:4px;margin-bottom:7px;
}
.try .gfnote.natural{background:var(--safe-soft);color:var(--safe)}
.try .gfnote.label,.try .gfnote.swap{background:var(--check-soft);color:var(--check)}
.try-acts{display:flex;gap:7px;flex-wrap:wrap;grid-column:2}
.mini--yes{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

/* first run setup */
.steps{display:flex;gap:6px;margin-bottom:16px}
.steps i{height:3px;flex:1;border-radius:2px;background:var(--edge)}
.steps i.on{background:var(--brand)}
.welcome h3{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.028em;margin:0 0 6px}
.welcome p.lede{margin:0 0 18px;font-size:14px;color:var(--ink-2);line-height:1.5}
.setup-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:20px;padding-top:16px;border-top:1.5px solid var(--edge-soft)}
.roster{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.roster .row{
  display:flex;align-items:center;gap:9px;padding:8px 10px;
  border:1.5px solid var(--edge-soft);border-radius:9px;background:var(--well);
}
.roster .row .pip{
  width:27px;height:27px;border-radius:50%;background:var(--who2);color:var(--lid-ink);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;font-family:var(--font-display);
}
.roster .row b{font-size:13.5px;font-weight:650;display:block;line-height:1.2}
.roster .row small{font-size:11px;color:var(--ink-3)}

/* prep */
.prep{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.prep li{display:grid;grid-template-columns:98px 1fr;gap:10px;align-items:baseline}
.prep .when{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--brand);padding:3px 5px;border-radius:4px;white-space:nowrap;
  font-weight:700;display:block;text-align:center;
}
.prep .when.night{background:var(--p2)}
.prep .when.morn{background:var(--p4)}
.prep p{margin:0;font-size:13px;color:var(--ink-2)}
.prep b{color:var(--ink);font-weight:650}

/* grocery */
.shop-group{margin-bottom:13px}
.shop-group h4{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 5px;padding-bottom:5px;border-bottom:1.5px solid var(--edge-soft);
}
.shop-item{display:flex;align-items:baseline;gap:9px;padding:3px 0;font-size:13.5px;cursor:pointer}
.shop-item input{
  appearance:none;width:15px;height:15px;flex:none;border:1.5px solid var(--ink-3);
  border-radius:4px;position:relative;top:2px;cursor:pointer;background:var(--surface);
}
.shop-item input:checked{background:var(--safe);border-color:var(--safe)}
.shop-item input:checked::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;
}
.shop-item input:checked + .txt{text-decoration:line-through;color:var(--ink-3)}
.shop-item .txt{flex:1}
.shop-item .who{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}

/* ---------------------------------------------------------------- sheet -- */
.scrim{position:fixed;inset:0;background:rgba(8,20,18,.6);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;z-index:60}
.scrim[hidden]{display:none}
.sheet{
  background:var(--surface);border:1.5px solid var(--edge);border-radius:15px;
  box-shadow:var(--shadow-l);width:min(720px,100%);max-height:min(84vh,760px);
  display:flex;flex-direction:column;overflow:hidden;
}
.sheet-head{padding:15px 17px;border-bottom:1.5px solid var(--edge-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sheet-head h3{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.026em;margin:0}
.sheet-head p{margin:1px 0 0;font-size:12px;color:var(--ink-3)}
.sheet-body{overflow-y:auto;padding:14px 17px 20px}
.sheet-body h4{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 8px;
}
.sheet-body h4:first-child{margin-top:2px}
.mini{border:1.5px solid var(--edge);background:var(--surface);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.mini:hover{border-color:var(--brand);color:var(--ink)}
.mini--danger{color:var(--risk);border-color:var(--risk-soft)}
.mini--danger:hover{border-color:var(--risk);color:var(--risk)}

.opts{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.opt{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;text-align:left;
  border:1.5px solid var(--edge-soft);background:var(--well);border-radius:9px;padding:9px 10px;
}
.opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.opt.is-current{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.opt .emoji{font-size:21px;line-height:1}
.opt .t{font-size:13px;font-weight:600;line-height:1.25;display:block}
.opt .s{
  font-size:11px;color:var(--ink-3);line-height:1.3;display:block;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.opt .two{
  font-family:var(--font-mono);font-style:normal;font-size:8px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--brand);background:var(--brand-soft);
  padding:2px 5px;border-radius:3px;margin-left:6px;vertical-align:1px;white-space:nowrap;
}
.opt .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* profile editor */
.field{margin-bottom:15px}
.field label.lab{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.field input[type=text]{
  width:100%;padding:9px 11px;border:1.5px solid var(--edge);border-radius:9px;
  background:var(--well);color:var(--ink);font:inherit;font-size:14px;
}
.field input[type=text]:focus{outline:none;border-color:var(--brand)}
.segbar{display:flex;gap:7px;flex-wrap:wrap}
.seg{
  border:1.5px solid var(--edge);background:var(--surface);border-radius:9px;
  padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.seg[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:2.5px solid transparent;background:var(--sw);padding:0}
.swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}

/* things this person avoids by name */
.term-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.term-tags:empty{display:none}
.term-tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 5px 5px 11px;
  border:1.5px solid var(--risk);background:var(--risk-soft);border-radius:999px;
}
.term-tag b{font-size:13px;font-weight:650;color:var(--risk)}
.term-tag small{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--risk);opacity:.8}
.term-tag.is-empty{border-color:var(--edge);background:var(--well)}
.term-tag.is-empty b,.term-tag.is-empty small{color:var(--ink-3)}
.term-tag button{
  width:20px;height:20px;border:0;border-radius:50%;background:transparent;
  color:inherit;font-size:15px;line-height:1;display:grid;place-items:center;
}
.term-tag button:hover{background:rgba(0,0,0,.09)}
.term-input{display:flex;gap:7px}
.term-input input{
  flex:1;min-width:0;padding:9px 11px;border:1.5px solid var(--edge);border-radius:9px;
  background:var(--well);color:var(--ink);font:inherit;font-size:14px;
}
.term-input input:focus{outline:none;border-color:var(--brand)}
.term-sugg:empty{display:none}
.term-count{
  margin:8px 0 5px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--risk);font-weight:700;
}
.term-none{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.term-hits{display:flex;flex-wrap:wrap;gap:5px}
.term-hits span{
  font-size:11.5px;padding:3px 8px;border-radius:999px;
  background:var(--well);border:1px solid var(--edge);color:var(--ink-2);
}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-pick{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 10px;
  border:1.5px solid var(--edge);border-radius:999px;background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-2);
}
.chip-pick span{font-size:15px;line-height:1}
.chip-pick:hover{border-color:var(--brand)}
.chip-pick[aria-pressed="true"]{
  border-color:var(--brand);background:var(--brand-soft);color:var(--brand);
}

.diet{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.diet button{
  display:flex;align-items:center;gap:8px;text-align:left;
  border:1.5px solid var(--edge);background:var(--surface);border-radius:9px;padding:9px 11px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.diet button[aria-pressed="true"]{border-color:var(--risk);background:var(--risk-soft);color:var(--risk)}
.diet .box{
  width:15px;height:15px;border-radius:4px;border:1.5px solid var(--ink-3);flex:none;
  display:grid;place-items:center;font-size:10px;color:#fff;
}
.diet button[aria-pressed="true"] .box{background:var(--risk);border-color:var(--risk)}

.hint{font-size:12px;color:var(--ink-3);margin:6px 0 0;line-height:1.5}

/* ---------------------------------------------------------------- foot -- */
.foot{
  margin-top:26px;padding-top:15px;border-top:1.5px solid var(--edge);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-3);
}
.foot button{background:none;border:0;padding:0;color:var(--brand);font-size:12px;text-decoration:underline;font-weight:600}

/* =============================================================================
   REGION, SHARING AND PORTABILITY
============================================================================= */
.region{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 12px;
  border:1.5px solid var(--edge);border-radius:9px;background:var(--surface);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.region:hover{border-color:var(--brand)}
.region .flagword{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.region-list{display:flex;flex-direction:column;gap:8px}
.region-opt{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;text-align:left;
  border:1.5px solid var(--edge-soft);background:var(--well);border-radius:10px;padding:12px;
}
.region-opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.region-opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.region-opt .tick{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--ink-3);flex:none;
  display:grid;place-items:center;font-size:10px;color:#fff;margin-top:2px;
}
.region-opt[aria-pressed="true"] .tick{background:var(--brand);border-color:var(--brand)}
.region-opt b{display:block;font-size:14px;font-weight:650;margin-bottom:3px}
.region-opt p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.region-facts{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;
}
.region-facts span{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;padding:2.5px 6px;border-radius:4px;background:var(--surface);
  border:1px solid var(--edge);color:var(--ink-3);
}

.region-detail{margin-top:20px;padding-top:16px;border-top:1.5px solid var(--edge-soft)}
.region-detail h4{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:-.024em;margin:0 0 12px;
}
.region-detail dl{margin:0;display:flex;flex-direction:column;gap:12px}
.region-detail dt{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:3px;
}
.region-detail dd{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:68ch}

/* share */
.share-url{
  display:flex;gap:7px;margin:14px 0 6px;
}
.share-url input{
  flex:1;min-width:0;padding:10px 11px;border:1.5px solid var(--edge);border-radius:9px;
  background:var(--well);color:var(--ink-2);font-family:var(--font-mono);font-size:11.5px;
}
.share-url input:focus{outline:none;border-color:var(--brand)}
.preview-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 15px;margin-bottom:16px;border-radius:11px;
  background:var(--brand-soft);border:1.5px solid var(--brand);
}
.preview-bar b{font-size:13.5px;color:var(--ink)}
.preview-bar p{margin:0;font-size:12.5px;color:var(--ink-2);flex:1 1 240px}
.share-preview{
  display:grid;gap:7px;grid-template-columns:repeat(5,minmax(0,1fr));margin:14px 0 4px;
}
@media (max-width:560px){.share-preview{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-day{
  border:1.5px solid var(--edge-soft);border-radius:9px;padding:9px 8px;
  background:var(--well);min-width:0;text-align:center;
}
.sp-day b{
  display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.sp-main{
  display:block;font-size:11.5px;line-height:1.3;color:var(--ink);font-weight:600;
  overflow-wrap:anywhere;margin-bottom:5px;
}
.sp-sides{display:block;font-size:14px;letter-spacing:2px}

.io-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.io-note{font-size:12px;color:var(--ink-3);line-height:1.5;margin:10px 0 0;max-width:62ch}
.drop{
  border:1.5px dashed var(--edge);border-radius:10px;padding:18px;text-align:center;
  font-size:13px;color:var(--ink-3);background:var(--well);
}
.drop.over{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}

/* =============================================================================
   RESOURCES PAGE
============================================================================= */
a.mark{text-decoration:none}
.rnav{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;padding:9px 10px;
  background:var(--surface);border:1.5px solid var(--edge);border-radius:12px;box-shadow:var(--shadow-s);
}
.rnav a{
  padding:7px 13px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;border:1.5px solid transparent;
}
.rnav a:hover{border-color:var(--brand);color:var(--brand)}
.rsec{margin-bottom:18px;scroll-margin-top:16px}
.rlede{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.rsub{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:-.022em;margin:26px 0 12px;
}

/* celiac vs allergy vs sensitivity */
.conds{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cond{
  border:1.5px solid var(--edge-soft);border-radius:11px;padding:16px;
  background:var(--well);display:flex;flex-direction:column;
}
.cond-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--brand);background:var(--brand-soft);
  padding:3px 7px;border-radius:4px;align-self:flex-start;
}
.cond h3{
  font-family:var(--font-display);font-weight:700;font-size:16.5px;
  letter-spacing:-.024em;margin:9px 0 8px;
}
.cond p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.cond-facts{margin:auto 0 0;padding-top:10px;border-top:1.5px solid var(--edge-soft);
  display:flex;flex-direction:column;gap:8px}
.cond-facts div{display:block}
.cond-facts dt{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:2px;
}
.cond-facts dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

.warnbox{
  margin-top:18px;padding:15px 17px;border-radius:11px;
  background:var(--risk-soft);border:1.5px solid var(--risk);
}
.warnbox b{
  display:block;font-family:var(--font-display);font-weight:700;font-size:15.5px;
  letter-spacing:-.022em;color:var(--risk);margin-bottom:6px;
}
.warnbox p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}

/* quiz */
.quiz-lede{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.quiz-modes{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.quiz-mode{
  display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px;
  border:1.5px solid var(--edge);border-radius:11px;background:var(--well);
}
.quiz-mode:hover{border-color:var(--brand);background:var(--brand-soft)}
.quiz-mode b{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.02em}
.quiz-mode small{font-size:12px;color:var(--ink-3);line-height:1.4}

.quiz-meta{
  display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.quiz-bar{height:3px;background:var(--edge);border-radius:2px;overflow:hidden;margin-bottom:20px}
.quiz-bar i{display:block;height:100%;background:var(--brand);transition:width .3s ease}
.quiz-q{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.quiz-q .qe{font-size:40px;line-height:1}
.quiz-q h3{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em;margin:0}
.quiz-opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.quiz-opt{
  padding:13px 12px;border:1.5px solid var(--edge);border-radius:10px;background:var(--surface);
  font-size:14px;font-weight:650;color:var(--ink-2);
}
.quiz-opt:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.quiz-opt:disabled{cursor:default;opacity:.55}
.quiz-opt.is-right{border-color:var(--safe);background:var(--safe-soft);color:var(--safe);opacity:1}
.quiz-opt.is-wrong{border-color:var(--risk);background:var(--risk-soft);color:var(--risk);opacity:1}
.quiz-feed{display:none}
.quiz-feed.show{
  display:block;margin-top:16px;padding:14px;border-radius:11px;
  border-left:3px solid var(--edge);background:var(--well);
}
.quiz-feed.ok{border-left-color:var(--safe)}
.quiz-feed.no{border-left-color:var(--risk)}
.quiz-feed b{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:5px;
}
.quiz-feed.ok b{color:var(--safe)}
.quiz-feed.no b{color:var(--risk)}
.quiz-feed p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.quiz-done{text-align:center;padding:22px 0 18px}
.quiz-score{
  font-family:var(--font-display);font-size:46px;font-weight:700;
  letter-spacing:-.04em;color:var(--brand);line-height:1;
}
.quiz-done p{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}

/* kid talk */
.ages{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.ages article{border:1.5px solid var(--edge-soft);border-radius:11px;padding:15px;background:var(--well)}
.age{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);font-weight:700;
}
.ages h3{font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-.022em;margin:6px 0 8px}
.ages p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ages p:last-child{margin-bottom:0}
.script{
  background:var(--brand-soft);border-radius:8px;padding:10px 12px;
  font-size:13px !important;color:var(--ink) !important;
}
.script b{
  display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:4px;
}
.cases{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cases div{border-top:2px solid var(--edge-soft);padding-top:10px}
.cases b{font-size:13.5px;font-weight:700;display:block;margin-bottom:3px}
.cases p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* communities */
.links{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.linkgroup h3{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;padding-bottom:6px;border-bottom:1.5px solid var(--edge-soft);
}
.linkgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.linkgroup b{font-size:13.5px;font-weight:700}
.linkgroup .tld{font-family:var(--font-mono);font-size:11px;color:var(--brand)}
.linkgroup p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* best of */
.aff-note{
  border:1.5px solid var(--check);background:var(--check-soft);border-radius:10px;
  padding:12px 14px;margin-bottom:18px;
}
.aff-note b{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--check);margin-bottom:5px;
}
.aff-note p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:70ch}
#picks{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pick-cat h3{
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.022em;
  margin:0 0 8px;display:flex;align-items:center;gap:8px;
}
.pick-cat h3 span{font-size:19px}
.pick-empty{
  margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5;
  border:1.5px dashed var(--edge);border-radius:9px;padding:11px;
}
.pick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pick-list b{font-size:13.5px}
.pick-list a{color:var(--brand)}
.pick-list p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.aff{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--check-soft);color:var(--check);padding:2px 5px;border-radius:4px;font-weight:700;
}

@media print{
  .controls,.people,.foot,.reroll,.lock,.scrim,.tagline,.grip{display:none !important}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .tray,.panel{break-inside:avoid;box-shadow:none;border-color:#999}
  .week{grid-template-columns:repeat(5,1fr);gap:7px}
  .lid{background:#eee !important;color:#000}
}