/* Viikko app — the style contract from DESIGN_TOKENS.md. Dark only. */
:root{
  --bg:#080B09; --surface:#0E1210; --surface-deep:#0B0F0D; --raise:rgba(232,237,233,.04);
  --text:#E8EDE9; --muted:#A8B1AB; --dim:#8A938D; --faint:#566059; --inactive:#4B554E;
  --accent:#BB7125; --accent-hover:#D08A3A; --accent-wash:rgba(187,113,37,.08);
  --accent-ring:rgba(187,113,37,.28); --accent-line:rgba(187,113,37,.60); --accent-chip:rgba(187,113,37,.16);
  --green-dim:rgba(94,122,98,.55);
  --hairline:rgba(232,237,233,.09); --hairline-2:rgba(232,237,233,.10); --hairline-3:rgba(232,237,233,.12);
  --stroke:rgba(232,237,233,.16); --stroke-strong:rgba(232,237,233,.18); --plate-inset:rgba(232,237,233,.04);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;color:inherit}

/* one scrolling child per screen */
.screen{display:flex;flex-direction:column;height:100dvh;max-width:460px;margin:0 auto}

/* Desktop: the app stays the app. We present it in a device frame rather than
   inventing a second layout — restrained, not a skeuomorphic phone costume. */
@media (min-width:760px){
  body{display:grid;place-items:center;min-height:100dvh;
    background:radial-gradient(130% 90% at 50% -10%, #101512 0%, #050706 62%)}
  .screen{width:412px;height:min(880px,92dvh);min-height:0;
    border:1px solid rgba(232,237,233,.13);border-radius:42px;overflow:hidden;
    background:var(--bg);box-shadow:0 50px 120px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.5)}
  .tabs{padding-bottom:14px}
}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:0 22px}
.head{flex:none;padding:10px 22px 16px}

.kicker{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.meta{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.title{font-weight:500;font-size:22px;line-height:1;letter-spacing:-.03em;margin:6px 0 0}
h1.big{font-weight:500;font-size:34px;line-height:.96;letter-spacing:-.04em;margin:14px 0 0;max-width:11ch}
h2{font-weight:500;font-size:23px;line-height:1;letter-spacing:-.035em;margin:0;max-width:15ch}
p.body{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:30ch}

/* Photo card. Circular masks are a LANDING-PAGE device: they only read as a set
   because those nine shots share a dark-green top-down surface. In the app the
   frame supplies the consistency instead, so any photography crops in cleanly —
   which is what makes the ingested recipe bank usable at all. */
.plate{position:relative;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--hairline-3);flex:none}
.plate.round{border-radius:50%}          /* kept for anywhere we still want it */
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate.ring{border-color:var(--accent-ring)}
.plate.dash{border-style:dashed;border-color:var(--green-dim)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;
  border-radius:999px;background:var(--accent);color:var(--bg);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .2s}
.btn:hover{background:var(--accent-hover)}
.btn.sec{background:none;border:1px solid var(--stroke-strong);color:var(--muted)}
.btn:disabled{opacity:.5}

.input{width:100%;min-height:52px;padding:0 16px;font-size:16px;background:var(--surface);
  border:1px solid var(--stroke-strong);border-radius:14px;outline:none}
.input:focus{border-color:var(--accent-ring)}

/* week feed */
.row{display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--hairline)}
.row .plate{width:78px;height:78px;border-radius:12px}
.row .name{font-weight:500;font-size:17px;line-height:1.15;letter-spacing:-.025em;margin:5px 0 0}
.row.today{background:var(--raise);border:1px solid var(--accent-ring);border-radius:20px;
  padding:14px;margin:8px 0}
.row.today .meta{color:var(--accent)}
.row.weekend{background:var(--accent-wash);border-radius:20px;padding:14px;margin:4px 0;border-bottom:0}
.swap{font-size:17px;color:var(--inactive);padding:8px}
.meta.sub{color:var(--faint)}

/* tab bar */
.tabs{flex:none;display:flex;background:var(--surface-deep);border-top:1px solid var(--hairline-2);
  padding:8px 10px 22px}
.tabs a{flex:1;text-align:center;padding:8px 2px;font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:9.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--inactive);
  white-space:nowrap;overflow:hidden}
.tabs a.on{color:var(--accent)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;
  border:1px solid var(--stroke);background:none;color:var(--muted);cursor:pointer;font-size:13.5px}
.chip input{display:none}
.chip.on{background:var(--accent-chip);border-color:var(--accent-ring);color:var(--text)}
.chip.ex.on{color:var(--inactive);text-decoration:line-through;border-color:var(--hairline);background:none}

/* ingredients / list rows */
.lrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--hairline);font-size:15px}
.lrow .amt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
.lrow.done span.n{color:var(--faint);text-decoration:line-through}
.cbox{appearance:none;width:22px;height:22px;border:1px solid var(--stroke-strong);border-radius:6px;
  position:relative;cursor:pointer;flex:none}
.cbox:checked{background:var(--accent);border-color:var(--accent)}
.cbox:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* wine block */
.wine{border:1px solid var(--accent-ring);background:var(--accent-wash);border-radius:20px;
  padding:18px;display:grid;grid-template-columns:1fr 64px;gap:14px;align-items:center;margin:22px 0}
.wine .n{font-weight:500;font-size:17px;line-height:1.15;letter-spacing:-.02em;margin:8px 0 4px}
.wine img{width:64px;height:120px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
.note{font-size:12.5px;line-height:1.55;color:var(--muted);margin:8px 0 0}

.sect{margin:26px 0 0}
.divider{height:1px;background:var(--hairline-2);margin:22px 0}
.stepper{display:flex;align-items:center;gap:14px}
.stepper a{width:38px;height:38px;border:1px solid var(--stroke);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* ---- Light theme (preview: append ?teema=vaalea) ---------------------------
   Ground: Pantone Cloud Dancer. Ink: Deep Indigo from Wada 232 — 16:1, and it
   reads more considered than pure black. Accent: Raw Sienna from Wada 182, a
   deeper cousin of the brand amber that actually holds contrast on a light
   ground (#E0A64B does not). Carmine from 232 is reserved for wine moments
   only — as a primary UI accent it collides with error states, and Pinkish
   Cinnamon is deliberately NOT used for surfaces: a saturated peach fights
   every tomato, salmon and plate rim in the photography.                     */
body.light{
  --bg:#F0EEE9;                      /* Cloud Dancer */
  --surface:#E7E4DD; --surface-deep:#EAE7E1; --raise:rgba(5,18,48,.035);
  --text:#051230;                    /* Deep Indigo */
  --muted:#4A5163; --dim:#69707F; --faint:#8C9199; --inactive:#A7ABB2;
  --accent:#BB7125;                  /* Raw Sienna */
  --accent-hover:#9C5C1B;
  --accent-wash:rgba(187,113,37,.07); --accent-ring:rgba(187,113,37,.26);
  --accent-line:rgba(187,113,37,.55); --accent-chip:rgba(187,113,37,.14);
  --wine:#CC1236;                    /* Carmine — wine block only */
  --green-dim:rgba(5,18,48,.28);
  --hairline:rgba(5,18,48,.10); --hairline-2:rgba(5,18,48,.12);
  --hairline-3:rgba(5,18,48,.14);
  --stroke:rgba(5,18,48,.18); --stroke-strong:rgba(5,18,48,.22);
}
body.light .btn{color:#051230}
body.light .btn.sec{border-color:rgba(5,18,48,.28);color:var(--text);background:rgba(5,18,48,.03)}
body.light .swap{color:var(--faint)}
body.light .plate{border-color:rgba(5,18,48,.10)}
body.light .cbox:checked::after{border-color:#F0EEE9}
body.light .wine{border-color:rgba(204,18,54,.28);background:rgba(204,18,54,.05)}
body.light .wine .kicker,body.light .wine .meta:first-child{color:var(--wine)}
@media (min-width:760px){
  body.light{background:radial-gradient(130% 90% at 50% -10%,#FBFAF7 0%,#E4E1DA 62%)}
  body.light .screen{background:#F0EEE9;border-color:rgba(5,18,48,.14);
    box-shadow:0 50px 120px rgba(5,18,48,.18)}
}

/* Third tone: Raw Sienna #bb7125 (Wada 182) as the ANCHOR, not Vandyke Brown.
   Note the text flips: cream on sienna is only ~3.3:1, but Deep Indigo on it is
   ~4.4:1 — so anchors carry DARK text, unlike a dark-brown fill would. */
body.light .row.today{background:#BB7125;border-color:#A6621D}
body.light .row.today .name{color:#051230}
body.light .row.today .meta{color:#3A1E05}
body.light .row.today .meta.sub{color:rgba(5,18,48,.62)}   /* readable on sienna */
body.light .row.today .swap{color:rgba(5,18,48,.45)}
body.light .row.today .plate{border-color:rgba(5,18,48,.20)}
/* Tabs read as three distinct controls on the page ground, not one brown slab:
   the active one is a filled pill, the others are plain. */
body.light .tabs{background:var(--bg);border-top-color:var(--hairline-2);gap:6px}
body.light .tabs a{color:var(--dim);border-radius:999px;padding:11px 0}
body.light .tabs a.on{color:#051230;background:var(--accent-chip);
  box-shadow:inset 0 0 0 1px var(--accent-ring)}
body.light .row.weekend{background:rgba(187,113,37,.09)}

/* Save acknowledgement — a shopper who ticks and sees nothing assumes it was lost. */
#tallennus{position:fixed;left:50%;bottom:96px;transform:translate(-50%,10px);
  padding:9px 16px;border-radius:999px;background:var(--accent);color:#051230;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:40}
#tallennus.on{opacity:1;transform:translate(-50%,0)}
#tallennus.virhe{background:#CC1236;color:#F0EEE9}
@media (min-width:760px){ #tallennus{position:absolute;bottom:110px} }

/* Install prompt — same treatment on both platforms: iOS instructions as buttons
   and numbered steps, not a paragraph of text that reads like an error. */
#asenna{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;gap:12px;
  max-width:460px;margin:0 auto;padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  background:var(--accent);color:#F0EEE9;box-shadow:0 -14px 40px rgba(0,0,0,.22)}
#asenna b{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:4px;color:#fff}
.asenna-teksti span{font-size:12.5px;line-height:1.5;opacity:.9}
#asenna-askeleet{margin:6px 0 0;padding-left:20px;font-size:12.5px;line-height:1.75;opacity:.95}
#asenna-askeleet b{display:inline;font-size:12.5px;color:#fff}
.ios-jako{font-family:-apple-system,system-ui;opacity:.9}
.asenna-nappulat{display:flex;gap:8px;align-items:center}
#asenna button{flex:1;min-height:46px;border-radius:999px;border:0;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
#asenna-nyt,#asenna-ohjeet,#asenna-valmis{background:#051230;color:#F0EEE9}
#asenna-myohemmin{flex:0 0 auto;background:rgba(255,255,255,.16);color:#fff;padding:0 18px}
@media (min-width:760px){ #asenna{position:absolute;border-radius:0 0 42px 42px} }

/* Stepper — the spec's control for household counts. A numeric keyboard for a value
   between 0 and 12 covers half the screen to type one digit. */
.askel{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--stroke);
  border-radius:999px;padding:3px;background:var(--surface)}
.askel button{width:40px;height:40px;border:0;border-radius:50%;background:none;cursor:pointer;
  color:var(--text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.askel button:active{background:var(--accent-chip)}
/* typing is the fallback when the buttons are not reachable — never block the
   field itself, which is what made this control impossible to use with a mouse */
.askel input{width:40px;border:0;background:none;text-align:center;font-size:16px;
  color:var(--text);font-family:inherit;-moz-appearance:textfield}
.askel button:disabled{opacity:.28;cursor:default}
.askel input::-webkit-outer-spin-button,.askel input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* Desktop browsers offer their own install control in the address bar, so our banner
   would be a second, worse one. Belt and braces with the JS check, because touch
   detection is unreliable across emulators and hybrid laptops. */
@media (min-width:760px) and (pointer:fine){ #asenna{display:none !important} }

/* Brand lockup — minimum 22px mark height per the brand sheet */
.lockup{height:34px;width:auto;display:block}

/* Operator dashboard */
.kortti{display:grid;gap:4px;padding:18px;border-radius:18px;margin:6px 0 4px;
  border:1px solid var(--hairline-3);background:var(--surface)}
.kortti b{font-size:38px;line-height:1;letter-spacing:-.03em}
.kortti span{font-size:13px;line-height:1.5;color:var(--muted)}
.kortti.hyva{border-color:rgba(187,113,37,.32);background:var(--accent-wash)}
.kortti.huono{border-color:var(--accent);background:var(--accent-wash)}
.kortti.huono b{color:var(--accent)}
.mittarit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:16px;overflow:hidden;margin-top:10px}
.mittarit div{background:var(--bg);padding:14px 16px}
/* an odd count would otherwise leave a bare grid cell showing the gap colour */
.mittarit div:last-child:nth-child(odd){grid-column:1 / -1}
.mittarit b{display:block;font-size:24px;line-height:1;letter-spacing:-.02em}
.mittarit span{display:block;font-size:11.5px;color:var(--dim);margin-top:5px}

/* ---- Operator dashboard: its own layout, not the phone frame ---------------
   Choosing a week means comparing seven dishes against a wine slate, which does
   not fit a 412px column. So the admin overrides the app shell entirely.      */
/* The desktop app shell centres the phone frame with place-items on <body>.
   Chrome now honours justify-items in BLOCK layout too, so simply switching the
   dashboard back to display:block was not enough: every child shrank to its own
   content width and centred, which left the sticky header narrower than the page
   and the week strip hanging out beside it. Alignment has to be reset as well. */
body.hallinta{display:block;place-items:normal;justify-items:normal;align-content:normal;
  background:var(--bg);min-height:100vh}
.hpalkki{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px clamp(16px,3vw,32px);border-bottom:1px solid var(--hairline-2);
  position:sticky;top:0;background:var(--bg);z-index:20}
.hbrand img{height:26px;width:auto;display:block}
.hnav{display:flex;gap:4px;flex-wrap:wrap}
.hnav a{padding:9px 14px;border-radius:999px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.hnav a.on{background:var(--accent-chip);color:var(--text)}
.hnav a:hover{color:var(--text)}
.hoikea{margin-left:auto;display:flex;align-items:center;gap:14px}
.hoikea button{background:none;border:0;cursor:pointer;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hsisalto{padding:20px clamp(16px,3vw,32px) 40px;max-width:1340px}
.hotsikko{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  margin-bottom:18px}
.hotsikko h1{font-weight:500;font-size:30px;line-height:1.05;letter-spacing:-.035em;margin:6px 0 4px}
.hviikot{display:flex;gap:6px;flex-wrap:wrap}
.hviikot a{padding:9px 13px;border:1px solid var(--stroke);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--dim)}
.hviikot a.on{border-color:var(--accent);color:var(--text);background:var(--accent-wash)}
.hgrid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:8px}
@media (min-width:900px){ .hgrid{grid-template-columns:1fr 1fr;gap:40px} }
.hlista{max-height:520px;overflow-y:auto}
.mittarit.nelja{grid-template-columns:1fr 1fr}
@media (min-width:760px){ .mittarit.nelja{grid-template-columns:repeat(4,1fr)} }
.hkirjaudu{max-width:420px;margin:0 auto;padding:12vh 22px 40px}

/* ---- Week builder: staged edits, one save ---------------------------------
   Every row can be changed without writing anything; the save bar is the only
   thing that commits. So the page must show, at all times, which of three
   states it is in: saved, changed-but-not-saved, or never saved.            */
.rtoimet{display:flex;gap:6px;align-items:center}
.pikku{background:none;border:1px solid var(--stroke);border-radius:999px;padding:5px 10px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;line-height:1}
.pikku:hover{border-color:var(--accent);color:var(--accent)}
.pikku.poista{padding:4px 9px;font-size:14px;letter-spacing:0}
.paivarivi{grid-template-columns:26px 1fr auto auto;padding-left:10px;margin-left:-10px}
.paivarivi.kohde{background:var(--accent-wash);box-shadow:inset 3px 0 0 var(--accent);
  border-radius:8px 0 0 8px}
.paivarivi.tyhja .nimi{color:var(--faint)}
.rrivi{grid-template-columns:1fr auto}
.kohdenimi{margin-left:.45em}
.rivinappulat{display:flex;gap:12px;align-items:center;margin:14px 0 2px}
.hakurivi{display:flex;gap:8px;margin-top:10px}
.btn.pieni{width:auto;min-height:38px;padding:0 14px;font-size:11px}
.viinirivi{grid-template-columns:20px 1fr auto}
.viinirivi .sija{color:var(--accent)}
.ehdokkaat{margin-top:4px}
.ehdokas{grid-template-columns:1fr auto}
.ehdokas .mukanateksti{display:none;color:var(--accent)}
.ehdokas.mukana .lisaa{display:none}
.ehdokas.mukana .mukanateksti{display:inline}
.ehdokas.mukana .n{color:var(--dim)}
.tyhjaslate{padding:10px 0}
.laskettu{display:none}
body.muuttunut .laskettu{display:block;color:var(--accent)}
.tallennuspalkki{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:18px;margin-top:34px;padding:14px 18px;border:1px solid var(--stroke);border-radius:16px;
  background:var(--bg);box-shadow:0 -8px 22px rgba(5,18,48,.07)}
.tallennuspalkki .tila{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.likaisena{display:none}
.likainen .tallennuspalkki{border-color:var(--accent);background:var(--accent-wash)}
.likainen .tallennuspalkki .tila{color:var(--accent)}
.likainen .puhdas{display:none}
.likainen .likaisena{display:inline}
.juuritallennettu .tallennuspalkki{border-color:rgba(187,113,37,.5);background:var(--accent-wash)}

/* ---- Viinilehti badge -------------------------------------------------------
   Attribution, not a quotation: the designation they awarded, the stars, the
   points and a link back. Their review text stays theirs. LÖYTÖ is the line
   that sells a bottle, so it is allowed to be the loudest thing in the block. */
.vl{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:5px 11px;
  border:1px solid var(--accent-ring);border-radius:999px;background:var(--accent-wash);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
a.vl:hover{border-color:var(--accent);background:var(--accent-chip)}
.vl .nimitys{font-weight:500;letter-spacing:.18em}
.vl .lahde{color:var(--dim);letter-spacing:.1em}
.viinirivi .vl,.ehdokas .vl{margin-top:6px;padding:3px 9px;font-size:9px}
.ehdokas .eiseurantaa{color:var(--faint);border:1px dashed var(--stroke);border-radius:999px;padding:4px 10px}
.ehdokas.eiseuraa .n{opacity:.62}

/* Refresh, for the installed app only: with no address bar there is otherwise no
   way to reload a page that has been open since before the week turned over. */
.paivita{display:none;margin-left:10px;vertical-align:middle;background:none;border:0;
  padding:4px 6px;font-size:17px;line-height:1;color:var(--dim);cursor:pointer}
.paivita.nakyy{display:inline-block}
.paivita.pyorii{animation:pyori .7s linear infinite}
@keyframes pyori{to{transform:rotate(360deg)}}
.esteet{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--muted)}
.esteet li{margin:0}
.viikkoleima{margin:6px 0 0;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* Shopping-list mode switch. It was three unstyled links — the two most useful
   modes in the product were invisible because nothing said they could be tapped. */
.tilat{display:flex;gap:6px;margin-top:14px}
.tilat a{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 10px;border:1px solid var(--stroke);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);background:none;white-space:nowrap}
.tilat a.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
body.light .tilat a.on{color:#F0EEE9}
.tilat a:active{transform:scale(.98)}

/* Which days you cook. Default all seven; a tap drops one and the list follows. */
.paivavalinta{margin-top:16px}
.paivachipit{display:flex;gap:5px;margin-top:8px}
.paivachip{position:relative;flex:1;min-height:44px;border:1px solid var(--stroke);border-radius:12px;
  background:none;color:var(--faint);cursor:pointer;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;overflow:hidden}
.paivachip.on{background:var(--accent-chip);border-color:var(--accent-ring);color:var(--text)}
/* A day you are not cooking gets struck through, not merely left pale: "unfilled"
   reads as a style, a line through it reads as a decision. */
/* The cross is drawn as a BACKGROUND, in two gradients. Backgrounds always paint
   under an element's text, so the day letter stays readable through it — with
   pseudo-elements it was drawn on top and swallowed the label. */
.paivachip.pois{color:var(--dim);
  background-image:
    linear-gradient(to top right, transparent calc(50% - .7px), var(--stroke-strong) calc(50% - .7px),
                    var(--stroke-strong) calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--stroke-strong) calc(50% - .7px),
                    var(--stroke-strong) calc(50% + .7px), transparent calc(50% + .7px))}
.paivachip:disabled{opacity:.3;cursor:default}
.lisarivi{grid-template-columns:1fr auto}
.lisarivi .lisanimi{display:flex;align-items:center;gap:12px;cursor:pointer}
.lisarivi.done .n{color:var(--faint);text-decoration:line-through}
.paivavalinta .note{margin-top:8px}

/* Extras: own block under the food, own aisle in the head. */
.lisays{padding-bottom:26px}
.lisays .hakurivi{margin-top:0}
.ehdotuschipit{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ehdotuschipit .chip{min-height:34px;font-size:12.5px;padding:0 12px}

/* A day you are not cooking: still visible, clearly out of the week. */
.rivipari{position:relative}
.rivipari.ohitettu .row{opacity:.42}
.rivipari.ohitettu .row .plate{filter:grayscale(1)}
.kokkaan{display:block;margin:0 0 10px auto;background:none;border:0;cursor:pointer;padding:4px 2px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.kokkaan:hover{color:var(--accent)}
.kokkaan.pois{color:var(--accent)}

/* Extras accordion: a plus at the end of the list that opens and closes again. */
.lisays{border-bottom:1px solid var(--hairline);margin:2px 0 0}
.lisays summary{display:flex;align-items:center;gap:10px;padding:15px 0;cursor:pointer;
  list-style:none;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lisays summary::-webkit-details-marker{display:none}
.lisays .plus{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--stroke);border-radius:50%;font-size:16px;line-height:1;color:var(--muted)}
.lisays[open] summary{color:var(--accent)}
.lisays[open] .plus{border-color:var(--accent);color:var(--accent);transform:rotate(45deg)}
.lisayssisalto{padding-bottom:16px}
.ehdotuschipit{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip.pikkuchip{min-height:32px;font-size:12.5px;padding:0 11px;border-radius:999px}

/* Recipe-level opt-out: available, never loud. */
.eikokkaa{margin:6px 0 30px;text-align:center}
.eikokkaa button{background:none;border:0;cursor:pointer;padding:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);text-decoration:underline}
.eikokkaa button:hover{color:var(--accent)}

/* Sell-through in the operator's wine picker. An estimate, and an internal one:
   it exists to answer "which of our wines needs this week", not to be read as
   a sales figure. Never rendered on a subscriber page. */
.myynti { display: block; margin-top: 2px; }
.myynti .boosta { color: var(--accent); letter-spacing: .12em; }