/* The dinner page. Loaded after app.css and brand.css, and carries no copy of
 * the site's tokens: every colour below is one of theirs, or a mix of one.
 *
 * The layout is the claude.ai page Chris approved in September 2026, rule for
 * rule, re-pointed at the site's tokens. The one colour the site does not
 * have is the kit's warning amber, which marks night-before steps and new
 * buys; it is scoped to this page and named once here.
 */

.dinner{
  --warn:#d9a15b;                               /* kit warning, Night Camp */
  --raised:rgba(242,237,218,0.06);              /* a step up from a card */
  --surface:var(--navy-soft);
  max-width:44rem;
  margin:0 auto;
  padding-bottom:48px;                          /* clear of the Home pill */
}
.dinner h4{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; line-height:1.2; }
.dinner .num{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-feature-settings:'tnum' 1,'lnum' 1; }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
[hidden]{ display:none !important; }

/* ---- masthead ---- */
/* The mark lives in the family top bar above (app.css and brand.css), so the
   masthead is just the title. The title and the link to the other page share
   the top row; the week dropdown (or the subtitle) gets the full width under
   them, so a phone never has to cut "(this week)" off the dropdown. */
.mast{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:center;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.mast-text{ display:contents; }
.mast h1{ grid-column:1; grid-row:1; }
.mast .sub, .mast .pickwrap{ grid-column:1 / 3; grid-row:2; }
.mast h1{ font-size:1.5rem; line-height:1.1; }
.mast .sub{ font-size:.8rem; color:var(--slate); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }

/* Between the week and the cookbook, top right on both pages. */
.mastlink{
  grid-column:2; grid-row:1; display:inline-flex; align-items:center;
  min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px;
  color:var(--cream); font-size:.82rem; font-weight:500; text-decoration:none; white-space:nowrap;
}
.mastlink:hover{ border-color:var(--amber); color:var(--amber); }
.mastlink:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.mastlink.add{ border-color:var(--amber-dim); color:var(--amber); }

/* The week dropdown. A native select, so the phone's own picker opens. */
.pickwrap{ margin-top:6px; }
.dinner select.weekpick{
  -webkit-appearance:none; appearance:none;
  width:auto; max-width:100%; min-height:44px;
  padding:8px 36px 8px 14px;
  border-radius:999px; border:1px solid var(--line);
  background-color:var(--surface);
  background-image:linear-gradient(45deg, transparent 50%, var(--amber) 50%),
                   linear-gradient(135deg, var(--amber) 50%, transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  color:var(--cream); font-size:.85rem; font-weight:500;
  text-overflow:ellipsis; cursor:pointer;
}
.dinner select.weekpick:hover{ border-color:var(--amber); }
.dinner select.weekpick:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.lede b{ color:var(--cream); font-weight:600; }

/* ---- tonight: the first thing on the page when something is due today ---- */
.tonight{
  margin-top:20px; padding:15px 16px; border-radius:8px;
  background:var(--surface); border:1px solid var(--amber-dim); border-left:3px solid var(--amber);
}
.tonight .tk{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--amber); font-weight:600; }
.tonight .tdish{
  display:block; margin-top:6px; min-height:44px; padding:4px 0;
  font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.2rem; line-height:1.25;
  color:var(--cream); text-decoration:none;
}
.tonight .tdish span{ color:var(--amber); font-size:.8em; }
.tonight .tdish:hover{ text-decoration:underline; }
.tonight .tfirst + .tdish, .tonight .times + .tdish{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.tonight .tdish:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.tonight .tfirst, .tonight .tprep{ margin-top:10px; font-size:.9rem; line-height:1.5; }
.tonight .tnext{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); font-weight:600; margin-bottom:2px; }
.tonight .tfirst b{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-feature-settings:'tnum' 1,'lnum' 1; color:var(--amber); margin-right:4px; }
.tonight .tprep span{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); font-weight:600; margin-bottom:2px; }

/* Start and eat times: on the cards, in Tonight, and on each recipe. */
.times{ font-size:.84rem; color:var(--slate); }
.times b, .rm b{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-feature-settings:'tnum' 1,'lnum' 1; font-weight:600; color:var(--cream); }
.tonight .times{ margin-top:2px; }

/* The pour with a showpiece night (render.js pourLine, pairingBox). */
.pour{ margin-top:4px; font-size:.86rem; line-height:1.4; color:var(--cream); }
.pour .pk{ margin-right:7px; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
.pour .pbuy{ margin-left:6px; font-size:.76rem; color:var(--slate); }
.pour .pserve{ display:block; margin-top:2px; font-size:.8rem; color:var(--slate); }
.tonight .pour{ margin-top:6px; }
.pairing{
  margin-top:18px; padding:13px 15px; border-radius:12px;
  border:1px solid var(--line); border-left:3px solid var(--amber-dim);
  background:rgba(207,169,99,0.06);
}
.pairing .pname{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.05rem; line-height:1.3; }
.pairing .pwhere{ display:block; margin-top:2px; font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-size:.78rem; font-weight:400; color:var(--slate); }
.pairing .pwhy{ margin-top:8px; font-size:.9rem; line-height:1.5; }
.pairing .pserve{ margin-top:6px; font-size:.84rem; line-height:1.5; color:var(--slate); }
.pairing .plink{ display:inline-flex; align-items:center; min-height:44px; margin-top:2px; color:var(--amber); font-size:.9rem; font-weight:500; text-decoration:none; }
.pairing .plink:hover{ text-decoration:underline; }

/* ---- night cards ---- */
.week{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px; }
@media (min-width:600px){ .week{ grid-template-columns:repeat(2,1fr); } }
.night{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:13px 15px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  color:inherit; text-decoration:none; cursor:pointer;
  transition:border-color .15s, background-color .15s;
}
.night:hover, .night:focus-visible{ border-color:var(--amber); background-image:linear-gradient(var(--raised),var(--raised)); }
.night:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.night:active{ transform:translateY(1px); }
.night .nbody{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.night .day{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); font-weight:500; }
.night .dish{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.05rem; line-height:1.3; }
.night .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.night .go{ color:var(--amber); font-size:.9rem; }
.am{ font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-size:.78em; font-weight:400; }

.chip{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  padding:3px 8px; border-radius:999px; border:1px solid var(--line); color:var(--slate);
}
.chip.easy{ border-color:var(--ok); color:var(--ok); }
.chip.show{ border-color:var(--amber); color:var(--amber); }
.chip.newish{ background:var(--amber-dim); color:var(--navy); border-color:var(--amber-dim); }

/* ---- an extra cook (game day, a party) ---- */
.gameday{ margin-top:16px; }
.picks{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.pick{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 15px; }
.pick h4{ font-size:1.02rem; margin-bottom:5px; }
.pick .meta{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--slate); margin-bottom:9px; }
.pick .meta b{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-feature-settings:'tnum' 1,'lnum' 1; color:var(--cream); font-weight:600; }
.pick .why{ font-size:.9rem; line-height:1.55; color:var(--slate); }
.pick .why b{ color:var(--cream); font-weight:500; }
.pick .cost{ margin-top:9px; padding-top:9px; border-top:1px solid var(--line); font-size:.85rem; color:var(--amber); line-height:1.5; }

/* ---- sections ---- */
.sec{ margin-top:44px; }
.sec.extra{ margin-top:34px; }
.sec > h2{ font-size:1.2rem; padding-bottom:9px; border-bottom:2px solid var(--amber-dim); display:inline-block; }
.sec > .lede{ font-size:.9rem; color:var(--slate); margin-top:12px; }
.sec:first-child{ margin-top:28px; }

/* ---- night before ---- */
.ahead{ display:flex; flex-direction:column; margin-top:16px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ahead .row{ display:grid; grid-template-columns:1fr; gap:4px; padding:12px 15px; background:var(--surface); font-size:.92rem; align-items:start; }
@media (min-width:481px){ .ahead .row{ grid-template-columns:8.5rem 1fr; gap:14px; } }
.ahead .row + .row{ border-top:1px solid var(--line); }
.ahead .row .k{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-feature-settings:'tnum' 1,'lnum' 1; font-size:.9rem; color:var(--amber); }

/* ---- grocery list, folded by default ---- */
.groc{ background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; scroll-margin-top:16px; }
.groc.flash{ border-color:var(--amber); }
.groc > summary{
  padding:14px 16px; min-height:44px; cursor:pointer; list-style:none; display:grid;
  grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.groc > summary::-webkit-details-marker{ display:none; }
.groc > summary:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.groc h2{ font-size:1.1rem; }
.groc .caret{ color:var(--amber); font-size:.8rem; transition:transform .18s; }
.groc[open] .caret{ transform:rotate(90deg); }
.gbody{ padding:4px 16px 16px; border-top:1px solid var(--line); }
.gbody > .lede{ font-size:.88rem; color:var(--slate); margin-top:12px; line-height:1.55; }
.gh{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.gh .hint{ font-size:.8rem; color:var(--slate); flex:1; min-width:12rem; }
.progress{ font-size:.82rem; color:var(--slate); margin-top:3px; }
.progress .num{ color:var(--cream); font-weight:600; font-size:1rem; }
.gbtn{
  font-family:inherit; font-size:.8rem; font-weight:500; letter-spacing:.03em;
  background:none; border:1px solid var(--line); color:var(--slate);
  min-height:44px; padding:6px 16px; border-radius:999px; cursor:pointer;
}
.gbtn:hover{ border-color:var(--amber); color:var(--amber); }
.gbtn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.aisle{ margin-top:22px; }
.aisle > h3{
  font-family:'Lexend','Segoe UI',system-ui,sans-serif;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--amber);
  font-weight:600; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.aisle > .anote{ font-size:.82rem; color:var(--slate); margin-top:7px; line-height:1.5; }
.items{ list-style:none; }
.items li{ border-bottom:1px solid var(--line); }
/* The whole row is the tap target, and at least 48px tall: this gets used
   one-handed with a basket in the other. */
.dinner .items label{
  display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center;
  min-height:48px; padding:10px 2px; margin:0; cursor:pointer;
  font-size:.95rem; color:var(--cream);
}
.items input{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; margin:0;
  border:1.5px solid rgba(191,196,174,0.45); border-radius:4px; background:transparent;
  cursor:pointer; position:relative; flex:none;
}
.items input:checked{ background:var(--amber-dim); border-color:var(--amber-dim); }
.items input:checked::after{
  content:""; position:absolute; left:5.5px; top:1.5px; width:5px; height:10px;
  border:solid var(--navy); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.items input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.items .qty{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-feature-settings:'tnum' 1,'lnum' 1; font-size:.88rem; color:var(--slate); text-align:right; white-space:nowrap; }
.items input:checked ~ .nm, .items input:checked ~ .qty{ opacity:.42; text-decoration:line-through; }
.items .for{ display:block; font-size:.78rem; color:var(--slate); margin-top:1px; line-height:1.4; }
.items .for.new{ color:var(--warn); }

.sync{ font-size:.78rem; color:var(--slate); margin-top:14px; font-style:italic; }
.sync.warn{ color:var(--warn); }

/* ---- recipes ---- */
.recipe{
  margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  scroll-margin-top:16px; transition:border-color .15s;
}
.recipe.flash{ border-color:var(--amber); }
.recipe > summary{
  padding:15px 16px; min-height:44px; cursor:pointer; list-style:none; display:grid;
  grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.recipe > summary::-webkit-details-marker{ display:none; }
.recipe > summary:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.recipe .rt{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.05rem; line-height:1.25; }
.recipe .rm{ font-size:.8rem; color:var(--slate); margin-top:3px; }
.recipe .caret{ color:var(--amber); font-size:.8rem; transition:transform .18s; }
.recipe[open] .caret{ transform:rotate(90deg); }
.rbody{ padding:16px 16px 18px; border-top:1px solid var(--line); }
.rnote{ font-size:.9rem; color:var(--slate); margin-bottom:16px; line-height:1.6; }
.rnote b{ color:var(--cream); font-weight:500; }

.rcols{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:640px){ .rcols{ grid-template-columns:15rem 1fr; gap:26px; } }
.rh{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--amber); font-weight:600; margin-bottom:9px; }
.ing{ list-style:none; font-size:.9rem; }
.ing li{ padding:4px 0; line-height:1.45; }
.ing li.own{ color:var(--slate); }
.ing li.own::after{ content:" \00b7  have"; font-size:.76rem; color:var(--ok); }

.tl{ display:grid; grid-template-columns:4.6rem 1fr; gap:4px 13px; font-size:.9rem; }
.tl dt{
  font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-feature-settings:'tnum' 1,'lnum' 1;
  color:var(--amber); padding:5px 0; white-space:nowrap;
}
.tl dd{ margin:0; padding:5px 0; line-height:1.5; }
.tl dt.day{ font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-size:.74rem; letter-spacing:.04em; color:var(--warn); padding-top:7px; }
.tl dd b{ font-weight:600; color:var(--cream); }
.temp{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-feature-settings:'tnum' 1,'lnum' 1; font-weight:600; }

/* ---- cookbook: the list ----
   The redesign Chris approved as a mockup on 2026-09-27: the family's name
   over a big title, search with one filter button (Easy, Showpiece, Most
   liked), one row of tabs, and one panel of rows per course. No tiles and no
   shelf above the list: he cut both as wasted space. */
.cbmast{ padding:6px 0 18px; }
.cbmrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:8px; }
.cbmast h1{ font-size:2.5rem; line-height:.95; }
.cbadd{
  display:inline-flex; align-items:center; gap:6px; flex:none; min-height:44px; padding:0 16px 0 12px;
  border-radius:999px; border:1px solid rgba(207,169,99,0.55); color:var(--amber);
  font-size:.85rem; font-weight:500; text-decoration:none; white-space:nowrap;
}
.cbadd svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cbadd:hover{ border-color:var(--amber); }
.cbsub{ margin-top:10px; font-size:.9rem; color:var(--slate); }

.cbfind{ display:flex; gap:8px; }
.cbsearch{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:50px; padding:0 14px;
  border-radius:14px; background:var(--navy-deep); border:1px solid var(--line);
}
.cbsearch:focus-within{ border-color:var(--amber); }
.cbsearch svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--slate); stroke-width:2; stroke-linecap:round; }
.dinner .cbsearch input[type=search]{
  flex:1; min-width:0; width:auto; min-height:0; height:100%; padding:0;
  border:0; border-radius:0; background:none; color:var(--cream); font-size:1rem; outline:none;
}
.cbfilterbtn{
  position:relative; flex:none; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--navy-deep); border:1px solid var(--line); color:var(--slate); cursor:pointer;
}
.cbfilterbtn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.cbfilterbtn:hover, .cbfilterbtn[aria-expanded="true"]{ border-color:var(--amber); color:var(--cream); }
.cbfilterbtn.on{ color:var(--amber); }
.cbfdot{ position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--amber); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.cbfilters{ margin-top:10px; }
.fchip{
  font-family:inherit; min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:none; color:var(--slate); font-size:.85rem; font-weight:500;
}
.fchip:hover{ border-color:var(--amber); color:var(--cream); }
.fchip[aria-pressed="true"]{ background:var(--amber-dim); border-color:var(--amber-dim); color:var(--navy); }
.fchip:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* The tabs' baseline is an inset shadow rather than a border, so the gold
   underline of the tab that is on sits over it instead of being clipped by
   the row's own scrolling box. */
.cbtabs{
  display:flex; gap:24px; margin-top:14px; box-shadow:inset 0 -1px 0 var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.cbtabs::-webkit-scrollbar{ display:none; }
.cbtabs button{
  flex:none; display:inline-flex; align-items:center; min-height:46px; padding:0;
  background:none; border:0; border-bottom:2px solid transparent; border-radius:0; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:500; color:var(--slate);
}
.cbtabs button:hover{ color:var(--cream); }
.cbtabs button[aria-pressed="true"]{ color:var(--cream); border-bottom-color:var(--amber); }
.cbtabs button:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }

.cbsec{ margin-top:28px; }
.cbsechead{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cbsechead h2, .cbdhd{
  font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-weight:600; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber); line-height:1.3;
}
.cbsechead .n{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:.9rem; color:var(--slate); font-feature-settings:'tnum' 1,'lnum' 1; }
.cbsechead .fill, .cbdhd .fill{ flex:1; height:1px; background:var(--line); }
.cbcount{ margin:20px 0 12px; font-size:.82rem; color:var(--slate); }
.cbnote{ margin-top:22px; }

/* One panel per course; a row per dish, hairlines between. */
.cbdrawer{ background:var(--surface); border-radius:14px; overflow:hidden; }
.cbrow{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center;
  min-height:70px; padding:13px 16px; color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.cbrow + .cbrow{ border-top:1px solid rgba(191,196,174,0.13); }
.cbrow:hover{ background-color:var(--raised); }
.cbrow:active{ background-color:rgba(242,237,218,0.09); }
.cbrow:focus-visible{ outline:2px solid var(--amber); outline-offset:-2px; }
.cbrtext{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cbrtitle{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.1rem; line-height:1.25; }
.cbrmeta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 7px; font-size:.8rem; color:var(--slate); line-height:1.5; }
.cbrmeta .k{ font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.cbrmeta .k.easy{ color:var(--ok); }
.cbrmeta .k.show{ color:var(--amber); }
.cbrmeta .k.from{ color:var(--cream); }
.cbrmeta .k.keep{ color:var(--amber); }
.cbrmeta .k.hd{ color:#b7a38e; }                 /* kit kraft, 6:1 on the panel */
.cbrmeta .dot{ opacity:.6; }
.cbrend{ display:flex; align-items:center; gap:12px; }
.cblikes{ display:inline-flex; align-items:center; gap:4px; font-size:.8rem; color:var(--slate); font-feature-settings:'tnum' 1; }
.cblikes svg{ width:14px; height:14px; fill:var(--amber); }
.cbrow .chev{ width:8px; height:8px; border-right:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg); margin-right:3px; }
.cbfoot{ margin-top:28px; }
.cbfoot a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--amber); font-size:.9rem; text-decoration:none; }
.cbfoot a:hover{ text-decoration:underline; }

/* ---- cookbook: one recipe ----
   Its own screen: a bar (back, the heart, share), the card (card.js), then
   what to do with it on the dark ground under the card. */
#recipeview, .cookview{ max-width:36rem; margin:0 auto; }
.rbar{ display:flex; align-items:center; gap:8px; min-height:58px; margin-top:-8px; }
.rback{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 10px 0 2px;
  background:none; border:0; color:var(--amber); cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:500;
}
.rback::before{ content:""; width:9px; height:9px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(45deg); margin-left:4px; }
.rbar .sp{ flex:1; }
.rheart{
  display:inline-flex; align-items:center; gap:7px; height:44px; padding:0 15px 0 13px; cursor:pointer;
  border-radius:999px; border:1px solid var(--line); background:none; color:var(--cream);
  font-family:inherit; font-size:.9rem; font-weight:500; font-feature-settings:'tnum' 1;
}
.rheart svg{ width:18px; height:18px; fill:none; stroke:var(--amber); stroke-width:1.8; }
.rheart[aria-pressed="true"]{ border-color:var(--amber-dim); color:var(--amber); }
.rheart[aria-pressed="true"] svg{ fill:var(--amber); }
.riconbtn{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--cream);
}
.riconbtn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rheart:hover, .riconbtn:hover{ border-color:var(--amber); }

/* Take it with you: one row of icon buttons, three or four across. */
.rtools{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.rtools.n3{ grid-template-columns:repeat(3,1fr); }
.rtool{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px;
  min-height:72px; padding:14px 4px 10px; border-radius:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--cream);
  font-family:inherit; font-size:.74rem; font-weight:500; line-height:1.2; text-align:center;
}
.rtool svg{ flex:none; width:23px; height:23px; fill:none; stroke:var(--amber); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rtool:hover{ border-color:var(--amber); }
.rtool:disabled{ opacity:.6; cursor:default; }
.rtool:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* The cookbook's share menu. A dialog on <body>, outside .dinner, so it uses
   the site's :root tokens only. margin:auto is restated because app.css's
   *{margin:0} beats the browser's centring of a modal. */
dialog.sharesheet{
  margin:auto; width:min(92vw, 380px); padding:0;
  border:1px solid var(--line); border-radius:16px;
  background:var(--navy-soft); color:var(--cream);
  box-shadow:0 18px 50px rgba(0,0,0,0.5);
}
dialog.sharesheet::backdrop{ background:rgba(8,12,18,0.72); }
.shinner{ display:flex; flex-direction:column; gap:8px; padding:18px 16px 14px; }
.sharesheet h2{ font-size:1.15rem; margin:0 4px 6px; color:var(--cream); }
.shopt{
  display:flex; align-items:center; gap:13px; min-height:62px; padding:10px 14px;
  border-radius:12px; border:1px solid var(--line); background:rgba(242,237,218,0.04);
  color:var(--cream); font-family:inherit; text-align:left; cursor:pointer;
}
.shopt svg{ flex:none; width:23px; height:23px; fill:none; stroke:var(--amber); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.shopt b{ display:block; font-size:.95rem; font-weight:600; }
.shopt small{ display:block; margin-top:2px; font-size:.78rem; line-height:1.35; color:var(--slate); }
.shopt:hover{ border-color:var(--amber); }
.shopt:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.shclose{ margin-top:4px; }
.rmenu{ margin-top:14px; }
.rmenu .btn{ width:100%; }
.rmenu p{ margin-top:10px; font-size:.78rem; color:var(--slate); text-align:center; }
.cbweek{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:18px; color:var(--amber); font-size:.9rem; text-decoration:none; }
.cbweek:hover{ text-decoration:underline; }

/* A recipe sent in has plain numbered steps rather than a clock timeline
   (the week page's recipeBody, for a meal with no timeline). */
.steps{ margin:0; padding-left:1.4rem; font-size:.9rem; }
.steps li{ padding:5px 0 5px 4px; line-height:1.5; }
.steps li::marker{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; color:var(--amber); }

/* The comment form's Post button. */
.tool{
  font-family:inherit; min-height:44px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:none; color:var(--cream); font-size:.82rem; font-weight:500;
}
.tool:hover{ border-color:var(--amber); color:var(--amber); }
.tool:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

/* Admins only: ask for a dish to come out of the cookbook and off future
   menus. Quiet on purpose, and in the danger colour, at the very bottom. */
.rremove{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 12px;
  margin-top:26px; padding-top:12px; border-top:1px solid rgba(191,196,174,0.13);
}
.rremove a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--danger, #e08573); font-size:.85rem; font-weight:500; text-decoration:none;
}
.rremove a:hover{ text-decoration:underline; }
.rremove a:focus-visible{ outline:2px solid var(--danger, #e08573); outline-offset:2px; }
.rremove span{ font-size:.76rem; color:var(--slate); }

/* Likes and comments under a cookbook recipe (Firestore, cookbook/{dish}).
   The heart itself is in the recipe's bar. */
.social{ margin-top:30px; }
.likers{ display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:.85rem; color:var(--slate); }
.likers svg{ width:16px; height:16px; flex:none; fill:var(--amber); }
.cbdhd{ display:flex; align-items:center; gap:10px; margin:22px 0 4px; }
.cbdhd .n{ letter-spacing:.08em; }
.clist{ list-style:none; margin:0; padding:0; }
.cmt{ padding:10px 0; border-bottom:1px solid var(--line); }
.cmeta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.cname{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:.95rem; color:var(--cream); }
.cdate{ font-size:.74rem; color:var(--slate); }
.ctext{ margin:4px 0 0; font-size:.9rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.cacts{ display:flex; gap:4px; margin-top:2px; }
.cact{
  min-height:44px; padding:0 10px; margin-left:-10px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:.78rem; font-weight:500; color:var(--amber);
}
.cact + .cact{ margin-left:0; }
.cact.del{ color:var(--danger, #e08573); }
.cact:focus-visible{ outline:2px solid var(--amber); outline-offset:0; border-radius:6px; }
.cnone{ font-size:.85rem; color:var(--slate); padding:6px 0 10px; }
.cform{ display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
.dinner .cform textarea, .dinner .cedit{
  flex:1; min-height:48px; width:100%; resize:vertical; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--navy-deep, #0a0d10); color:var(--cream);
  font-family:inherit; font-size:.95rem; line-height:1.45;
}
.dinner .cedit{ margin-top:6px; }
.cform .tool{ flex:none; }

/* ---- the recipe card (card.js) ----
   The kit's Cream Field colours, the ones it keeps for anything printed:
   #f2edda paper, #d5cdb2 rules, #292b2f ink, pine and lake gold. Everything
   is scoped under .rcard or an rc- class, so none of it reaches the dark
   page around the card, and the week page's own recipe styles are untouched.
   Every line of text sits on a rule, like an index card: the lines' height
   and the rules' spacing are the same number (30px, 32px in cook mode). */
.rcard{
  --paper:#f2edda; --paper-2:#e9e2cc; --rule:#d5cdb2; --pen:#292b2f; --pen-muted:#6e695c;
  --pine:#234739; --lake:#886c45; --pine-ok:#2e6b4c; --pen-warn:#8a5f22;
  padding:24px 20px 22px; border-radius:10px; color:var(--pen);
  background:linear-gradient(var(--pine),var(--pine)) 0 0 / 100% 5px no-repeat, var(--paper);
}
.rc-eyebrow{ font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--pine); }
.dinner .rc-title{
  margin-top:10px; font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600;
  font-size:2.05rem; line-height:1.06; letter-spacing:-.003em; color:var(--pen);
}
.dinner .rc-title.long{ font-size:1.6rem; line-height:1.12; }
.rc-title:focus{ outline:none; }
.rc-from{ margin-top:10px; font-size:.9rem; color:var(--pen-muted); }
.rc-from b{ margin-left:2px; font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.2rem; color:var(--pine); }
.rc-rule{ height:6px; margin:16px 0 18px; border-top:2px solid var(--pine); border-bottom:1px solid var(--pine); }
/* The one thing that decides it. Some notes are the cook's own words, some say
   where a recipe came from, some are a tip, so a gold rule and no quotes. */
.rc-note{ border-left:3px solid var(--lake); padding:1px 0 1px 15px; font-size:1rem; line-height:1.6; }
.rc-note b{ font-weight:600; color:var(--pine); }
.rc-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.rc-fact{
  display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:5px 12px 5px 10px;
  border-radius:999px; background:var(--paper-2); font-size:.8rem; line-height:1.3;
}
.rc-fact svg{ flex:none; width:16px; height:16px; fill:none; stroke:var(--pine); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Serves [-] 2 [+]; scaled amounts in the dark gold. */
.rc-serves{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.rc-lbl{ margin-right:2px; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--pine); }
.rc-scbtn{
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(35,71,57,0.45); background:none; cursor:pointer;
  color:var(--pine); font-family:inherit; font-size:1.3rem; line-height:1;
}
.rc-scbtn:disabled{ opacity:.35; cursor:default; }
.rc-scn{ min-width:2ch; text-align:center; font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.45rem; font-feature-settings:'tnum' 1,'lnum' 1; }
.rc-screset{ min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer; color:var(--pine); font-family:inherit; font-size:.82rem; text-decoration:underline; }
.rc-scnote{ margin-top:8px; font-size:.8rem; color:var(--pen-muted); }
.rc-scaled{ color:var(--pen-warn); font-weight:600; }
.rc-scbtn:focus-visible, .rc-screset:focus-visible, .rc-start:focus-visible{ outline:2px solid var(--pine); outline-offset:2px; }

.rc-start{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; margin-top:22px;
  border:0; border-radius:12px; background:var(--pine); color:var(--paper); cursor:pointer;
  font-family:inherit; font-size:1rem; font-weight:600; box-shadow:0 3px 0 #132a20;
}
.rc-start:active{ transform:translateY(2px); box-shadow:0 1px 0 #132a20; }
.rc-start svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rc-startnote{ margin-top:9px; text-align:center; font-size:.78rem; color:var(--pen-muted); }

.dinner .rc-h{
  display:flex; align-items:baseline; gap:8px; margin-top:26px; padding-bottom:6px; border-bottom:2px solid var(--pine);
  font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-size:.7rem; font-weight:600; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pine); text-wrap:nowrap;
}
.rc-n{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-size:.9rem; letter-spacing:0; text-transform:none; color:var(--pen-muted); }
.rc-hint{ margin-left:auto; font-size:.72rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--pen-muted); }
/* Clear: uncheck every ingredient. Shown once something is checked. Its tap
   area is 44px tall, the negative margins keep the heading from growing. */
.rc-clear{
  margin:-14px -6px -14px 4px; min-height:44px; padding:0 6px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:.72rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--pine); text-decoration:underline; text-underline-offset:2px;
}
.rc-clear:focus-visible{ outline:2px solid var(--pine); outline-offset:-4px; border-radius:6px; }

.rc-ruled{
  list-style:none; margin:0; padding:0;
  background-image:repeating-linear-gradient(to bottom, transparent 0 23px, var(--rule) 23px 24px, transparent 24px 30px);
}
/* Each line is a button: tap an ingredient to check it off, a step to mark it.
   The row itself is top-aligned. The step number, the "have" tag and a
   timeline's time are baseline-aligned with the text, with line-height 1:
   their baselines then sit higher in their short boxes than the text's does
   in its line, so the browser only ever moves THEM down, inside the line,
   and never pushes the text down or the row past its rules (which is what
   plain baseline alignment did, 1 to 2px a row). No px nudges tied to the
   fonts' metrics, which differ between Windows and Apple devices. */
.rc-i, .rc-s{
  display:grid; align-items:start; width:100%; margin:0; padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font-family:inherit; font-size:1rem; font-weight:400; line-height:30px; text-align:left;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.rc-i:focus-visible, .rc-s:focus-visible{ outline:2px solid var(--pine); outline-offset:-2px; border-radius:4px; }
.rc-i{ grid-template-columns:30px minmax(0,1fr) auto; }
.rc-tick{ position:relative; align-self:start; width:19px; height:19px; margin-top:5px; border-radius:50%; border:1.5px solid rgba(35,71,57,0.5); }
.rc-i.done .rc-tick{ background:var(--pine); border-color:var(--pine); }
.rc-i.done .rc-tick::after{
  content:""; position:absolute; left:5.5px; top:2.5px; width:4px; height:8px;
  border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.rc-i.done .rc-it{ color:var(--pen-muted); text-decoration:line-through; text-decoration-color:rgba(110,105,92,0.7); }
.rc-i.own .rc-it{ color:var(--pen-muted); }
.rc-have{ align-self:baseline; line-height:1; margin-left:8px; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pine-ok); }
.rc-s{ grid-template-columns:34px minmax(0,1fr); }
.rc-sn{ align-self:baseline; line-height:1; font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1.25rem; color:var(--lake); font-feature-settings:'tnum' 1,'lnum' 1; }
.rc-st b{ font-weight:600; color:var(--pine); }
.rc-it, .rc-st{ align-self:baseline; }
.rc-tl .rc-s .rc-at, .rc-eat .rc-at{ align-self:baseline; line-height:1; }
.rc-ruled .temp, .rc-ruled .am, .rc-ruled b, .rc-ruled .rc-scaled{ line-height:1; }
/* The step you are on: a band of gold that runs to the card's edges. */
.rc-s.now{ background:rgba(207,169,99,0.26); box-shadow:-20px 0 0 rgba(207,169,99,0.26), 20px 0 0 rgba(207,169,99,0.26); }
.rc-s.past .rc-st, .rc-s.past .rc-at{ color:var(--pen-muted); }

/* The week's timeline (cook mode on the week page): the planned time down
   the side, the night before first, dinner last, and a line at "now". */
.rc-tl .rc-s, .rc-night, .rc-eat{ grid-template-columns:4.1rem minmax(0,1fr); }
.rc-night, .rc-eat{ display:grid; align-items:start; font-size:1rem; line-height:30px; }
.rc-at{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; font-size:1rem; color:var(--lake); font-feature-settings:'tnum' 1,'lnum' 1; white-space:nowrap; }
.rc-night .rc-at{
  align-self:start; padding-top:6px; white-space:normal;
  font-family:'Lexend','Segoe UI',system-ui,sans-serif; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
}
.rc-night .rc-st{ color:var(--pen-muted); }
.rc-eat .rc-st{ font-family:'Zilla Slab','Rockwell','Roboto Slab',serif; font-weight:600; color:var(--pine); }
.rc-now{ display:flex; align-items:center; gap:8px; height:30px; }
.rc-now > span{
  flex:none; padding:1px 9px; border-radius:999px; background:var(--pen-warn); color:var(--paper);
  font-size:.7rem; font-weight:600; line-height:1.6; font-feature-settings:'tnum' 1;
}
.rc-now::after{ content:""; flex:1; height:2px; background:var(--pen-warn); }

.rc-tips li{ display:grid; grid-template-columns:22px minmax(0,1fr); font-size:.95rem; line-height:30px; }
.rc-tips li::before{ content:"\2022"; color:var(--lake); font-weight:600; }
.rc-added{ margin-top:22px; font-size:.78rem; color:var(--pen-muted); text-align:right; }

/* ---- cook mode (cook.js) ----
   Start cooking: the screen stays on, the type goes up a size, and all that
   is not the recipe steps aside, including the Home and Admin pills, which
   sit where the bar goes. Done and Next step live in the bar. */
body.cooking{ padding-bottom:128px; }
body.cooking .home-pill, body.cooking .admin-fab{ display:none !important; }
body.cooking #recipeview > .rbar, body.cooking .rtools, body.cooking .rmenu,
body.cooking .social, body.cooking .cbweek, body.cooking .rremove,
body.cooking .rc-facts, body.cooking .rc-serves, body.cooking .rc-start,
body.cooking .rc-startnote, body.cooking .rc-added{ display:none; }
body.cooking .rc-ruled{ background-image:repeating-linear-gradient(to bottom, transparent 0 25px, var(--rule) 25px 26px, transparent 26px 32px); }
body.cooking .rc-i, body.cooking .rc-s, body.cooking .rc-night, body.cooking .rc-eat{ font-size:1.125rem; line-height:32px; }
body.cooking .rc-now{ height:32px; }
body.cooking .rc-tips li{ font-size:1.05rem; line-height:32px; }
body.cooking .rc-tick{ width:21px; height:21px; }
body.cooking .rc-i.done .rc-tick::after{ left:6.5px; top:3px; }
body.cooking .rc-sn{ font-size:1.4rem; }
body.cooking .rc-s{ grid-template-columns:36px minmax(0,1fr); }
body.cooking .rc-tl .rc-s{ grid-template-columns:4.1rem minmax(0,1fr); }

.cookstrip{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px;
  min-height:52px; margin-top:-8px; color:var(--amber); font-size:.84rem; font-weight:500; text-align:center;
}
.cookstrip i{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(207,169,99,0.2); }
.cookstrip-wake{
  min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
  color:var(--cream); font-family:inherit; font-size:inherit; font-weight:500; text-decoration:underline;
}
.cookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--navy); border-top:1px solid var(--line);
}
.cookbar-in{ display:flex; align-items:center; gap:12px; max-width:36rem; margin:0 auto; }
.cookbar-done{
  flex:none; min-height:52px; padding:0 16px; border-radius:12px; border:1px solid var(--line); background:none; cursor:pointer;
  color:var(--cream); font-family:inherit; font-size:.92rem; font-weight:500; touch-action:manipulation;
}
.cookbar-done:hover{ border-color:var(--amber); }
.cookbar-where{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cookbar-step{ font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); white-space:nowrap; }
.cookbar-prog{ display:block; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.cookbar-prog b{ display:block; width:0; height:100%; border-radius:2px; background:var(--amber); transition:width .2s; }
.cookbar .cookbar-next{ flex:none; min-height:52px; padding:0 18px 0 20px; border-radius:12px; font-size:1rem; touch-action:manipulation; }
.cookbar-next::after{ content:""; width:8px; height:8px; margin-left:2px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(-45deg); }

/* ---- the card on an iPad ----
   A phone's column looks lost on a tablet, so from 768px the recipe takes
   the page's width, and cook mode's type goes up again: a tablet on the
   counter is read from further away than a phone in the hand. From 980px
   (an iPad on its side) ingredients and steps sit side by side, like a
   printed cookbook, and while cooking the ingredients stay in view and
   scroll on their own. The ruled lines' rule applies here too: the rules
   repeat at the line height, so change one, change both, and re-measure. */
@media (min-width:768px){
  #recipeview, .cookview, .cookbar-in{ max-width:44rem; }
  body.cooking .rc-ruled{ background-image:repeating-linear-gradient(to bottom, transparent 0 28px, var(--rule) 28px 29px, transparent 29px 36px); }
  body.cooking .rc-i, body.cooking .rc-s, body.cooking .rc-night, body.cooking .rc-eat{ font-size:1.25rem; line-height:36px; }
  body.cooking .rc-tips li{ font-size:1.15rem; line-height:36px; }
  body.cooking .rc-now{ height:36px; }
  body.cooking .rc-i{ grid-template-columns:36px minmax(0,1fr) auto; }
  body.cooking .rc-tick{ width:23px; height:23px; margin-top:6px; }
  body.cooking .rc-i.done .rc-tick::after{ left:7px; top:3.5px; width:5px; height:10px; }
  body.cooking .rc-s{ grid-template-columns:42px minmax(0,1fr); }
  body.cooking .rc-sn{ font-size:1.55rem; }
  body.cooking .rc-tl .rc-s, body.cooking .rc-night, body.cooking .rc-eat{ grid-template-columns:4.8rem minmax(0,1fr); }
  body.cooking .rc-at{ font-size:1.1rem; }
}
@media (min-width:980px){
  /* The page itself widens while a recipe is open (cookbook.js adds .reading,
     app.js .is-cooking); the list keeps its 44rem. */
  .dinner.reading, .dinner.is-cooking{ max-width:68rem; }
  #recipeview, .cookview, .cookbar-in{ max-width:68rem; }
  #recipeview > .rtools, #recipeview > .rmenu, #recipeview > .social, #recipeview > .rremove{ max-width:44rem; margin-left:auto; margin-right:auto; }
  .rcard{ padding:28px 32px 26px; }
  .rc-body{ display:grid; grid-template-columns:minmax(0,23rem) minmax(0,1fr); column-gap:48px; align-items:start; }
  /* The step you are on: the band runs to the card's right edge, and stops
     short of the ingredients on the left. */
  .rc-s.now{ box-shadow:-16px 0 0 rgba(207,169,99,0.26), 32px 0 0 rgba(207,169,99,0.26); }
}
/* While cooking on a tablet, the ingredients stay in view and scroll on
   their own. Touch screens only: a desktop browser draws a permanent
   scrollbar for a scroll area like this, and it sat over the "have" tags
   (Chris, 2026-09-27). On a desktop the column simply scrolls with the page.
   dvh, where the browser has it, leaves room for Safari's toolbar. */
@media (min-width:980px) and (pointer:coarse){
  body.cooking .rc-col-ing{
    position:sticky; top:12px; overflow-y:auto; overscroll-behavior:contain;
    max-height:calc(100vh - 124px); max-height:calc(100dvh - 124px);
  }
}

/* Start cooking on the week page: on Tonight, and at the top of each recipe. */
.startcook{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 12px; cursor:pointer;
  border-radius:999px; border:1px solid var(--amber-dim); background:none; color:var(--amber);
  font-family:inherit; font-size:.88rem; font-weight:500;
}
.startcook svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.startcook:hover{ border-color:var(--amber); background-color:var(--raised); }
.startcook:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.tonight .tcook{ margin-top:12px; }
.rbody .rcook{ margin-bottom:16px; }
/* The week steps aside while a recipe is open in cook mode. */
.dinner.is-cooking > .topbar, .dinner.is-cooking > .mast, .dinner.is-cooking > #week{ display:none; }

/* Keep or Skip under a cooked dinner's card, for the house it was planned
   for, with a note for next time. The card and the row read as one piece. */
.nightwrap{ display:flex; flex-direction:column; min-width:0; }
.nightwrap > .night{ border-radius:8px 8px 0 0; flex:1; }
.vote{
  background:var(--surface); border:1px solid var(--line); border-top:1px dashed var(--line);
  border-radius:0 0 8px 8px; padding:8px 15px 12px;
  display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--slate);
}
.vrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vq{ flex:1; min-width:7rem; }
.vbtn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--cream); font:inherit; font-weight:500; cursor:pointer;
}
.vbtn:hover{ background:var(--raised); }
.vbtn:focus-visible, .vlink:focus-visible, .vnote textarea:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.vbtn[data-v=keep][aria-pressed=true], .vnote.dirty .vsave{ background:var(--amber); border-color:var(--amber); color:var(--navy); }
.vbtn[data-v=skip][aria-pressed=true]{ background:var(--raised); border-color:var(--warn); color:var(--warn); }
.vsum{ margin:0; }
.vsum.kept{ color:var(--amber); }
.vsum.skipped{ color:var(--warn); }
.vnotes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; color:var(--cream); line-height:1.45; }
.vnotes b{ font-weight:600; margin-right:4px; }
.vlink{
  min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--amber); font:inherit; font-weight:500; text-decoration:underline; text-underline-offset:3px;
}
.vlink.quiet{ color:var(--slate); }
.vnote{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.vnote label{ font-size:.78rem; color:var(--slate); }
.vnote textarea{
  width:100%; box-sizing:border-box; padding:10px 12px; resize:vertical;
  background:var(--navy-deep); color:var(--cream); border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:1rem; line-height:1.45;
}
.vnote-act{ display:flex; align-items:center; gap:18px; }

@media (prefers-reduced-motion:reduce){
  .night, .recipe, .recipe .caret, .groc .caret, .cookbar-prog b{ transition:none; }
}