/* Good Help — "test kitchen" theme, layered over shared/css/app.css.
   A working kitchen: white subway tile with grey grout, a chalkboard over the pass, order
   tickets on a steel rail for the path, and index recipe cards for the activities. Tomato for
   action, mustard and basil, charcoal ink. Young Serif over Karla (OFL, fonts/). */
:root {
  --blue: #C93A25; --blue-d: #B8341F; --blue-l: #E8735F; --zen: #F2B8AC;
  --tomato: #C93A25; --mustard: #E8A93B; --basil: #4E7D2A; --wood: #B07A47; --steel: #A9B0B6;
  --slate: #2A2B28; --chalk: #F1EFEA; --rule: #DCE4EC;
  --ink: #22201E; --ink2: #4A4541; --mute: #6E6862; --line: #D9D6D2; --line2: #E9E7E4;
  --paper: #FFFFFF; --coconut: #F4F5F6; --sand: #E9EBED; --graphite: #2A2B28; --night: #22201E;
  --crimson: #B3261E; --canopy: #9A6410; --gold: #E8A93B; --navy: #22201E; --plum: #8C6A43;
  --good: #4E7D2A; --good-bg: #E8F1E0; --bad: #B3261E; --bad-bg: #FBE8E4;
  --accent: #C93A25;
  /* engine hooks: text on tomato, the hotspot ring and pulse, the glow under a selected token */
  --on-blue: #FFFFFF; --hs-ring: rgba(217, 65, 43, .3); --hs-pulse: rgba(217, 65, 43, .12); --sel-glow: rgba(217, 65, 43, .2);
  --display: 'Young Serif', Georgia, serif;
  --font: 'Karla', -apple-system, 'Segoe UI', Arial, sans-serif;
  --r: 14px; --top: 68px;
  --shadow: 0 1px 0 rgba(34, 32, 30, .06), 0 10px 26px rgba(34, 32, 30, .09);
  --star: #E8A93B; --star-ink: #22201E;
  /* subway tile: 96 x 48, grout lines offset on alternate rows */
  --tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23E6E4E1' stroke-width='1.5'%3E%3Cpath d='M0 .75H96M0 48.75H96M.75 0V48M48.75 48V96'/%3E%3C/g%3E%3C/svg%3E");
  --chalkboard: radial-gradient(ellipse 40% 60% at 18% 30%, rgba(255, 255, 255, .055), transparent 70%), radial-gradient(ellipse 35% 70% at 72% 65%, rgba(255, 255, 255, .045), transparent 70%), #2A2B28;
}
body[data-theme="kitchen"] { background: #FFFFFF var(--tiles); background-size: 96px 96px; }
[data-theme="kitchen"] h1, [data-theme="kitchen"] h2, [data-theme="kitchen"] h3, [data-theme="kitchen"] h4 { font-weight: 400; font-stretch: 100%; letter-spacing: -.005em; }
[data-theme="kitchen"] .beathead h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.1; max-width: 24ch; }
[data-theme="kitchen"] :focus-visible { outline-color: var(--tomato); }
[data-theme="kitchen"] em { font-style: normal; }

/* buttons: enamel pills */
[data-theme="kitchen"] .btn { border-radius: 999px; font-weight: 700; font-size: 16px; }
[data-theme="kitchen"] .btn.primary { background: linear-gradient(#C93A25, #B8341F); color: #fff; box-shadow: 0 3px 0 #8E2817; }
[data-theme="kitchen"] .btn.primary:hover { background: linear-gradient(#C93A24, #B3321C); }
[data-theme="kitchen"] .btn.primary:active { box-shadow: 0 1px 0 #8E2817; transform: translateY(2px); }
[data-theme="kitchen"] .btn.primary:disabled { background: #CFCBC6; color: #fff; box-shadow: none; }
[data-theme="kitchen"] .btn.ghost { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
[data-theme="kitchen"] .btn.ghost:hover { background: var(--coconut); }
[data-theme="kitchen"] .btn.dark { box-shadow: 0 3px 0 #000; }
[data-theme="kitchen"] .linkbtn:hover { background: var(--coconut); }

/* top bar: the chalkboard over the pass, in a wooden frame */
[data-theme="kitchen"] .top { background: var(--chalkboard); color: var(--chalk); border-bottom: 6px solid var(--wood); box-shadow: 0 2px 0 #8A5C33; backdrop-filter: none; }
[data-theme="kitchen"] .brand { color: var(--chalk); }
[data-theme="kitchen"] .brand .glyph { width: 36px; height: 36px; }
[data-theme="kitchen"] .brand b { font: 400 20px/1.15 var(--display); letter-spacing: 0; }
[data-theme="kitchen"] .brand small { color: #BDB8B0; font-size: 14px; }
[data-theme="kitchen"] .iconbtn { color: var(--chalk); border-radius: 50%; }
[data-theme="kitchen"] .iconbtn:hover { background: rgba(255, 255, 255, .1); }
[data-theme="kitchen"] .xp { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(241, 239, 234, .35); border-radius: 999px; }
[data-theme="kitchen"] .xp .lv { background: var(--mustard); color: var(--ink); font: 400 16px var(--display); }
[data-theme="kitchen"] .xp .meta b { color: var(--chalk); }
[data-theme="kitchen"] .xp .meta small { color: #BDB8B0; }
[data-theme="kitchen"] .xp .track { background: rgba(255, 255, 255, .18); }
[data-theme="kitchen"] .xp .track i { background: var(--mustard); }
[data-theme="kitchen"] .xp .plus { color: var(--mustard); }
[data-theme="kitchen"] .combo { background: var(--tomato); color: #fff; }
[data-theme="kitchen"] .menu { color: var(--ink); border-radius: 14px; }
[data-theme="kitchen"] .menu input { accent-color: var(--tomato); }

/* the path: order tickets hanging from a steel rail, across the top on a wide screen */
@media (min-width: 1001px) {
  [data-theme="kitchen"] .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  [data-theme="kitchen"] .rail { position: static; height: auto; overflow: visible; background: transparent; border: 0; padding: 0 28px 4px; display: grid; grid-template-columns: minmax(0, 1fr) 232px; grid-template-areas: "head tro" "sub tro" "path tro" "path reset"; grid-template-rows: auto auto 1fr auto; column-gap: 20px; max-width: 1360px; width: 100%; margin: 0 auto; }
  [data-theme="kitchen"] .rail h3 { grid-area: head; font: 400 20px var(--display); margin: 14px 6px 0; }
  [data-theme="kitchen"] .rail .sub { grid-area: sub; margin: 0 6px; }
  [data-theme="kitchen"] .path { grid-area: path; display: flex; gap: 10px; overflow-x: auto; padding: 22px 6px 14px; }
  [data-theme="kitchen"] .path::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 12px; border-radius: 6px; background: linear-gradient(#D3D7DA, var(--steel) 45%, #8D959B); box-shadow: 0 2px 3px rgba(0, 0, 0, .15); }
  [data-theme="kitchen"] .path li { flex: 0 0 120px; filter: drop-shadow(0 4px 5px rgba(34, 32, 30, .16)); }
  [data-theme="kitchen"] .path li:nth-child(odd) { transform: rotate(-1deg); } [data-theme="kitchen"] .path li:nth-child(even) { transform: rotate(.8deg); }
  [data-theme="kitchen"] .path button { flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; min-height: 128px; padding: 14px 12px 20px; background: #fff; border-radius: 0; border-top: 6px solid var(--line); position: relative;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
  [data-theme="kitchen"] .path button::before { content: ""; position: absolute; top: -6px; left: 50%; width: 26px; height: 9px; margin-left: -13px; border-radius: 0 0 4px 4px; background: #5B6166; }
  [data-theme="kitchen"] .path .dot { width: 30px; height: 30px; font-size: 16px; }
  [data-theme="kitchen"] .path .t { font-size: 14px; line-height: 1.2; }
  [data-theme="kitchen"] .path .m { font-size: 14px; line-height: 1.3; display: block; }
  [data-theme="kitchen"] .path .cur button { border-top-color: var(--tomato); background: #FFF; }
  [data-theme="kitchen"] .path .done button { border-top-color: var(--basil); }
  [data-theme="kitchen"] .path .cur { transform: translateY(4px) rotate(0); }
  [data-theme="kitchen"] .trophies { grid-area: tro; margin-top: 22px; padding: 12px 14px; border: 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line2); }
  [data-theme="kitchen"] .trophies h4 { margin-bottom: 8px; }
  [data-theme="kitchen"] .badges { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  [data-theme="kitchen"] .rail .meta { margin-top: 8px; }
  [data-theme="kitchen"] .rail .reset { grid-area: reset; margin-top: 8px; justify-self: end; }
  [data-theme="kitchen"] .main { padding-top: 18px; }
}
[data-theme="kitchen"] .path .dot { background: #fff; box-shadow: inset 0 0 0 2px var(--line); font-family: var(--display); color: var(--mute); }
[data-theme="kitchen"] .path .done .dot { background: var(--basil); color: #fff; box-shadow: none; }
[data-theme="kitchen"] .path .cur .dot { background: var(--tomato); color: #fff; box-shadow: 0 0 0 4px rgba(217, 65, 43, .18); }
[data-theme="kitchen"] .path button:hover .t { color: var(--tomato); }
[data-theme="kitchen"] .badge { background: #fff; border-radius: 10px; }
[data-theme="kitchen"] .badge.on { box-shadow: inset 0 0 0 2px var(--mustard); }
/* On an activity the ticket strip is compact (a number and a name per ticket), so the activity
   starts high on the screen; the welcome screen keeps the full tickets. */
@media (min-width: 1001px) {
  [data-theme="kitchen"][data-screen="activity"] .rail h3 { font-size: 16px; margin-top: 8px; }
  [data-theme="kitchen"][data-screen="activity"] .rail .sub { display: none; }
  [data-theme="kitchen"][data-screen="activity"] .path { padding: 16px 6px 8px; }
  [data-theme="kitchen"][data-screen="activity"] .path li { flex: 1 1 auto; min-width: min-content; }
  [data-theme="kitchen"][data-screen="activity"] .path button { min-height: 0; flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px 11px; }
  [data-theme="kitchen"][data-screen="activity"] .path .dot { width: 24px; height: 24px; font-size: 14px; flex: none; }
  [data-theme="kitchen"][data-screen="activity"] .path .t { line-height: 1.15; text-wrap: balance; }   /* tickets size to their names; a narrow window wraps them, never cuts them */
  [data-theme="kitchen"][data-screen="activity"] .path .m { display: none; }
  [data-theme="kitchen"][data-screen="activity"] .rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "path"; }
  [data-theme="kitchen"][data-screen="activity"] .trophies, [data-theme="kitchen"][data-screen="activity"] .rail .reset { display: none; }   /* both stay on the welcome screen; badges still pop up when earned */
}

/* On the welcome screen the full tickets hang under the hero, so the title and Start come first. */
@media (min-width: 1001px) {
  [data-theme="kitchen"][data-screen="landing"] .main { order: -1; }
}

/* on a phone the path is a drawer, hung like a ticket stack */
@media (max-width: 1000px) {
  [data-theme="kitchen"] .rail { background: #fff var(--tiles); background-size: 96px 96px; border-right: 6px solid var(--wood); }
  [data-theme="kitchen"] .rail h3 { font: 400 24px var(--display); }
  [data-theme="kitchen"] .path li button { background: #fff; margin-bottom: 6px; padding: 8px 10px 8px 0; border-radius: 6px; box-shadow: 0 2px 6px rgba(34, 32, 30, .08); }
  [data-theme="kitchen"] .path .cur button { box-shadow: inset 4px 0 0 var(--tomato), 0 2px 6px rgba(34, 32, 30, .1); }
  [data-theme="kitchen"] .path::before { background: var(--steel); width: 4px; left: 18px; }
}

/* beat cards: index cards with a red rule and faint blue lines in the heading */
[data-theme="kitchen"] .card { background: #fff; border-radius: 22px; padding: clamp(20px, 3vw, 38px); box-shadow: var(--shadow), inset 0 0 0 1px var(--line2); }
[data-theme="kitchen"] .card:has(.hero) { background: none; padding: 0; box-shadow: none; }
[data-theme="kitchen"] .beathead { margin: 0 calc(-1 * clamp(20px, 3vw, 38px)) 26px; padding: 0 clamp(20px, 3vw, 38px) 18px; border-bottom: 2px solid var(--tomato); background: repeating-linear-gradient(180deg, transparent 0 33px, var(--rule) 33px 34px); background-position: 0 6px; }
[data-theme="kitchen"] .eyebrow { color: var(--tomato); font-weight: 700; }
[data-theme="kitchen"] .eyebrow i { width: 10px; height: 10px; border-radius: 50%; transform: none; background: var(--mustard); box-shadow: 0 0 0 2px var(--ink); }
[data-theme="kitchen"] .lede { color: var(--ink2); }
[data-theme="kitchen"] .footerbar { border-top: 2px dashed var(--line); }
[data-theme="kitchen"] .steps i { height: 8px; width: 18px; border-radius: 4px; }
[data-theme="kitchen"] .steps i.on { background: var(--tomato); } [data-theme="kitchen"] .steps i.done { background: var(--basil); }
[data-theme="kitchen"] .panel { border-radius: 16px; background: var(--coconut); }
[data-theme="kitchen"] .panel.white { box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 var(--line2); border-top: 5px solid var(--mustard); }
[data-theme="kitchen"] .panel.white.good { border-top-color: var(--basil); }
[data-theme="kitchen"] .panel.white.bad { border-top-color: var(--bad); }
[data-theme="kitchen"] .kicker { color: var(--ink2); font-weight: 700; }

/* the guide: an order ticket pinned under the activity */
[data-theme="kitchen"] .coach .ava { width: 56px; height: 56px; box-shadow: 0 0 0 3px var(--ink); background: var(--mustard); }
[data-theme="kitchen"] .coach .say { background: #fff; border-radius: 4px 4px 16px 16px; border-top: 6px solid var(--mustard); box-shadow: 0 6px 16px rgba(34, 32, 30, .1), inset 0 0 0 1px var(--line); }
[data-theme="kitchen"] .coach .name { color: var(--ink); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--line); font-size: 14px; }
[data-theme="kitchen"] .coach.good .say { border-top-color: var(--basil); box-shadow: 0 6px 16px rgba(34, 32, 30, .1), inset 0 0 0 2px var(--basil); }
[data-theme="kitchen"] .coach.bad .say { border-top-color: var(--bad); box-shadow: 0 6px 16px rgba(34, 32, 30, .1), inset 0 0 0 2px var(--bad); }
[data-theme="kitchen"] .coach.ok .say { border-top-color: var(--canopy); box-shadow: 0 6px 16px rgba(34, 32, 30, .1), inset 0 0 0 2px var(--canopy); }
[data-theme="kitchen"] .hear { background: var(--ink); color: #fff; }

/* landing: a chalkboard menu in a wooden frame, beside the tiled wall */
[data-theme="kitchen"] .hero { border-radius: 18px; border: 14px solid var(--wood); box-shadow: inset 0 0 0 2px #8A5C33, 0 14px 30px rgba(34, 32, 30, .18); background: var(--chalkboard); min-height: 470px; }
[data-theme="kitchen"] .hero h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.04; color: var(--chalk); }
[data-theme="kitchen"] .hero .kicker { color: var(--mustard) !important; font-size: 16px; }
[data-theme="kitchen"] .hero .lede { color: #D8D4CC; }
[data-theme="kitchen"] .hero .meta .chip { background: transparent; box-shadow: none; border: 1.5px dashed rgba(241, 239, 234, .55); color: var(--chalk); }
[data-theme="kitchen"] .hero .namebox input { border-radius: 999px; border: 1.5px solid rgba(241, 239, 234, .4); background: rgba(255, 255, 255, .06); }
[data-theme="kitchen"] .hero .art { padding: 0; background: #fff var(--tiles); background-size: 80px 80px; border-left: 10px solid var(--wood); }
[data-theme="kitchen"] .hero .art img { max-height: none; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
[data-theme="kitchen"] .landing-below .kicker { font: 400 32px var(--display); color: var(--ink); margin-bottom: 14px; }
[data-theme="kitchen"] .modcard { background: #fff; border-radius: 14px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line2); border-top: 5px solid var(--tomato); }
[data-theme="kitchen"] .modcard:hover { box-shadow: var(--shadow), inset 0 0 0 2px var(--ink); }
[data-theme="kitchen"] .modcard b { font: 400 20px/1.15 var(--display); }

/* activities as recipe cards */
[data-theme="kitchen"] .flip .f { background: #fff repeating-linear-gradient(180deg, transparent 0 29px, var(--rule) 29px 30px); background-position: 0 44px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 var(--line2); border-top: 6px solid var(--tomato); }
[data-theme="kitchen"] .flip .f b { font: 400 24px/1.2 var(--display); }
[data-theme="kitchen"] .flip .b { background: var(--chalkboard); color: var(--chalk); border-radius: 16px; border-top: 6px solid var(--mustard); font-size: 16px; }
[data-theme="kitchen"] .flip .b b { color: var(--mustard); font-size: 14px; }
.flips[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flips[data-n="5"] .flip { grid-column: span 2; }
.flips[data-n="5"] .flip:nth-child(n+4) { grid-column: span 3; }
[data-theme="kitchen"] .tray { background: var(--coconut); border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line2); }
[data-theme="kitchen"] .tok { border-radius: 12px; }
[data-theme="kitchen"] .tok.sel { box-shadow: inset 0 0 0 2px var(--tomato), 0 6px 16px rgba(217, 65, 43, .18); }
[data-theme="kitchen"] .bins { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (min-width: 761px) { [data-theme="kitchen"] .bins[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-theme="kitchen"] .bin { border-radius: 16px; border: 2px dashed var(--line); }
[data-theme="kitchen"] .bin h4 { font: 400 20px var(--display); }
[data-theme="kitchen"] .bin h4 i { border-radius: 50%; }
[data-theme="kitchen"] .bin.hot, [data-theme="kitchen"] .bin:hover { background: #fff; border-style: solid; }
[data-theme="kitchen"] .choice { border-radius: 14px; }
[data-theme="kitchen"] .choice .k { border-radius: 50%; background: var(--ink); color: #fff; }
[data-theme="kitchen"] .choice.picked { box-shadow: inset 0 0 0 2px var(--tomato); }
[data-theme="kitchen"] .qhead { font: 400 clamp(19px, 2.1vw, 23px)/1.35 var(--display); }
[data-theme="kitchen"] .fb { border-radius: 14px; }
[data-theme="kitchen"] .swcard { border-radius: 18px; background: #fff repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); background-position: 0 58px; border-top: 8px solid var(--tomato); }
[data-theme="kitchen"] .swcard .txt { font: 400 clamp(21px, 2.5vw, 26px)/1.3 var(--display); }
[data-theme="kitchen"] .swcard:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
[data-theme="kitchen"] .swcard .stamp { border-radius: 999px; }
[data-theme="kitchen"] .orow, [data-theme="kitchen"] .slot { border-radius: 12px; }
[data-theme="kitchen"] .orow::before { border-radius: 50%; background: var(--tomato); font-family: var(--display); }
[data-theme="kitchen"] .slot .n { border-radius: 50%; background: var(--mustard); }
[data-theme="kitchen"] .stat { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
[data-theme="kitchen"] .stat b, [data-theme="kitchen"] .result .big, [data-theme="kitchen"] .lightning .clock .t { font-family: var(--display); font-weight: 400; }
[data-theme="kitchen"] .lightning .clock .track i { background: var(--mustard); }
[data-theme="kitchen"] .lightning .clock.low .track i { background: var(--tomato); }
[data-theme="kitchen"] .chat { background: var(--coconut) var(--tiles); background-size: 96px 96px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line2); }
[data-theme="kitchen"] .msg .bub { border-radius: 16px 16px 16px 4px; }
[data-theme="kitchen"] .msg.me .bub { background: var(--ink); }
[data-theme="kitchen"] .meter .track i { background: linear-gradient(90deg, var(--tomato), var(--mustard), var(--basil)); }
[data-theme="kitchen"] .player { border-radius: 18px; background: var(--slate); }
[data-theme="kitchen"] .player .cap, [data-theme="kitchen"] .player .ctrl { background: var(--chalkboard); }
[data-theme="kitchen"] .player .cap { color: var(--chalk); }
[data-theme="kitchen"] .player .bigplay { background: rgba(34, 32, 30, .35); }
[data-theme="kitchen"] .player .bigplay span { background: var(--tomato); box-shadow: 0 5px 0 #8E2817, 0 12px 30px rgba(0, 0, 0, .3); }
[data-theme="kitchen"] .player .bar i { background: var(--mustard); }
[data-theme="kitchen"] .player .title { border-radius: 999px; }
[data-theme="kitchen"] .hs { background: var(--tomato); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(217, 65, 43, .3); }
[data-theme="kitchen"] .hotwrap, [data-theme="kitchen"] .huntwrap { border-radius: 16px; }
[data-theme="kitchen"] .reflect textarea { border-radius: 12px; background: #fff repeating-linear-gradient(180deg, transparent 0 23px, var(--rule) 23px 24px); background-position: 0 11px; line-height: 24px; }
[data-theme="kitchen"] .toast { background: var(--chalkboard); border-radius: 16px; border-top: 5px solid var(--mustard); }
[data-theme="kitchen"] .toast .lvmedal { background: var(--mustard); color: var(--ink); font: 400 24px var(--display); }
[data-theme="kitchen"] .qprog i.on { background: var(--tomato); }
[data-theme="kitchen"] .preview { border-radius: 14px; }
[data-theme="kitchen"] .foot-note { border-top: 2px dashed var(--line); background: rgba(255, 255, 255, .85); padding: 14px 4px 0; }

/* ---------- the prompt workbench ---------- */
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bench .bcol { display: grid; gap: 16px; }
.rcard { background: #fff repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); background-position: 0 6px; border-radius: 16px; padding: 16px 18px 18px; box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 var(--line2); border-top: 8px solid var(--tomato); }
.rcard .rtitle { font: 400 24px/1.2 var(--display); padding-bottom: 8px; border-bottom: 2px solid var(--tomato); margin-bottom: 10px; }
.rcard .rsub { font-weight: 700; color: var(--tomato); font-size: 14px; margin: 10px 0 6px; }
.rslots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* each slot is a drop target: drag a chip onto it, or tap a chip and then the slot */
.rslot { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 10px; border-radius: 10px; background: rgba(244, 245, 246, .9); box-shadow: inset 0 0 0 1.5px var(--line2); font-size: 14px; line-height: 1.45; cursor: default; transition: background .3s, box-shadow .3s; }
.rslot b { font-weight: 700; }
.rslot span { color: var(--mute); }
.rslot:focus-visible { outline: 2px solid var(--tomato); outline-offset: 2px; }
.bench.picking .rslot:not(.on), .rslot.hot { cursor: pointer; box-shadow: inset 0 0 0 2px var(--mustard); background: #FFF8E8; }
.rslot.hot { box-shadow: inset 0 0 0 2px var(--tomato); }
.rslot.on { background: var(--good-bg); box-shadow: inset 0 0 0 1.5px var(--basil); animation: rise .35s; }
.rslot.on span { color: var(--ink); }
.rslot.on b::before { content: "✓ "; color: var(--basil); }
.rmethod { font: 400 20px/1.4 var(--display); margin: 0; }
.pantry { background: var(--coconut); border-radius: 16px; padding: 14px; box-shadow: inset 0 0 0 1.5px var(--line2); }
.pantry .ptitle { font: 400 20px var(--display); margin-bottom: 10px; }
.pantry .ptitle small { display: block; font: 500 14px var(--font); color: var(--mute); margin-top: 2px; }
.pchips { display: grid; gap: 8px; }
.pchip { border: 0; text-align: left; background: #fff; border-radius: 12px; padding: 10px 13px; font-size: 14px; line-height: 1.4; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line), 0 2px 0 var(--line2); transition: box-shadow .15s, transform .15s; }
.pchip:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-1px); }
.pchip.used { display: none; }
.pchip.tossed { color: var(--mute); background: var(--bad-bg); box-shadow: none; cursor: default; }
.pchip.tossed { text-decoration: none; }
.pchip.tossed > :not(em) { text-decoration: line-through; }
.pchip.tossed em { display: block; color: var(--ink); font-size: 14px; margin-top: 4px; }
.pchip.tossed em b { color: var(--bad); }
.pchip.nope { animation: shake .4s; }
.pchip { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.pchip.sel { box-shadow: inset 0 0 0 2px var(--tomato), 0 6px 16px rgba(217, 65, 43, .18); transform: translateY(-1px); }
.pchip.dragging { opacity: .35; }
/* the tap path: where does it go? */
.pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -2px 0 4px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--tomato); animation: rise .25s; }
.pick > span { font-size: 14px; font-weight: 700; color: var(--mute); margin-right: 2px; }
.pick button { border: 0; border-radius: 999px; padding: 6px 12px; font: 700 14px var(--font); background: var(--coconut); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; }
.pick button:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.pick button.o { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1.5px #F2B8AC; }
.outbin { all: unset; box-sizing: border-box; display: block; width: 100%; margin-top: 12px; padding: 10px 13px; border-radius: 12px; border: 2px dashed #E3A396; background: #fff; cursor: default; }
.outbin b { display: block; font: 400 16px var(--display); color: var(--bad); }
.outbin small { display: block; font-size: 14px; color: var(--mute); }
.bench.picking .outbin, .outbin.hot { cursor: pointer; border-color: var(--tomato); background: var(--bad-bg); }
.outbin:focus-visible { outline: 2px solid var(--tomato); outline-offset: 2px; }
.outlist { display: grid; gap: 8px; margin-top: 8px; }
.outlist:empty { display: none; }
/* on a phone the draft sits below the chips, so a short note by the chips says what changed */
.pmini { display: none; }
@media (max-width: 760px) { .pmini:not([hidden]) { display: block; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #FBE3A8; font-size: 14px; line-height: 1.45; animation: rise .35s; } .pmini .linkbtn { padding: 2px 6px; font-size: 14px; color: var(--ink); text-decoration: underline; } }
.plate .pbody:focus { outline: none; }
.plate .pbody:focus-visible { outline: 2px solid var(--tomato); outline-offset: -4px; }
.plate { background: #fff; border-radius: 16px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); overflow: hidden; }
.plate .phead { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--chalkboard); color: var(--chalk); font-size: 14px; font-weight: 700; }
.plate .phead .wc { color: var(--mustard); font-variant-numeric: tabular-nums; }
.plate .pbody { padding: 16px 18px 6px; font-size: 16px; line-height: 1.55; min-height: 230px; }
.plate .pbody p { margin: 0 0 .7em; }
.plate .pbody .subj { font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line2); }
.plate mark { background: #FBE3A8; color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 2px #FBE3A8; animation: rise .4s; }
.plate .taste { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1.5px dashed var(--line); }
.plate .taste .dots { display: inline-flex; gap: 5px; }
.plate .taste i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: background .3s, box-shadow .3s; }
.plate .taste i.on { background: var(--tomato); box-shadow: none; }
.plate .taste b { font-size: 14px; }
.plate .pnote { margin: 0; padding: 0 18px 14px; font-size: 14px; color: var(--ink2); min-height: 20px; }
.bench .again { justify-self: start; }

/* ---------- a prompt as a recipe (read) ---------- */
.recipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); border-top: 8px solid var(--tomato); background: #fff; }
.recipe > div { padding: 20px 24px 22px; }
.recipe .rc-r { border-left: 2px dashed var(--line); background: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); }
.recipe .rc-h { font: 400 24px var(--display); margin: 0 0 10px; }
.recipe .rc-r .rc-h + ol + .rc-h { margin-top: 18px; }
.recipe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.recipe ul li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; }
.recipe ul li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 2px var(--ink); margin-top: 4px; grid-row: span 2; }
.recipe ul li b { font-size: 16px; } .recipe ul li span { color: var(--ink2); font-size: 16px; }
.recipe ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; }
.recipe ol li::marker { font-family: var(--display); color: var(--tomato); }
.recipe .rc-no { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-weight: 700; font-size: 16px; text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ---------- the data rules poster (hotspot): a chalkboard ---------- */
.rules { background: var(--chalkboard); color: var(--chalk); border: 12px solid var(--wood); }
.rules .rhead { padding: 16px 70px 12px 22px; border-bottom: 2px dashed rgba(241, 239, 234, .35); }
.rules .rhead b { display: block; font: 400 32px var(--display); }
.rules .rhead span { font-size: 14px; color: #BDB8B0; }
.rules .rbody { padding: 4px 0 8px; }
.rules .rrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 10px 70px 10px 22px; border-bottom: 1px dashed rgba(241, 239, 234, .18); font-size: 16px; }
.rules .rrow:last-child { border-bottom: 0; }
.rules .rrow b { font-weight: 700; color: var(--mustard); }
.rules .rrow.ok b { color: #A9D18A; } .rules .rrow.no b { color: #F29C8C; }
.rules .rrow span { color: #E2DED6; }

/* ---------- the follow-up to check (hunt) ---------- */
.hk { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-width: 860px; font-size: 14px; line-height: 1.5; }
.hk-notes { background: #fff repeating-linear-gradient(180deg, transparent 0 27px, var(--rule) 27px 28px); background-position: 0 50px; padding: 0 18px 16px; border-right: 2px dashed var(--line); }
.hk-h { font: 400 20px var(--display); padding: 14px 0 10px; border-bottom: 2px solid var(--tomato); margin-bottom: 8px; }
.hk-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.hk-notes li.int { color: var(--bad); font-weight: 700; }
.hk-mail { background: #fff; }
.hk-mh { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 12px 18px; background: var(--coconut); border-bottom: 1px solid var(--line2); font-size: 14px; }
.hk-mh b { color: var(--mute); margin-right: 4px; }
.hk-mh .tag { margin-left: auto; background: var(--mustard); color: var(--ink); font-weight: 700; padding: 2px 10px; border-radius: 999px; font-size: 14px; }
.hk-mb { padding: 14px 18px 8px; }
.hk-mb p { margin: 0 0 .8em; }
.hk .huntable { padding: 1px 2px; margin: -1px -2px; }

/* ---------- the prep brief (interview me first) ---------- */
.brief { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fff repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px); box-shadow: inset 0 0 0 1.5px var(--line); border-top: 5px solid var(--basil); font-size: 14px; }
.brief > b { display: block; font: 400 16px var(--display); margin-bottom: 6px; }
.brief p { margin: 0 0 4px; }
.brief .gap { color: var(--canopy); }
.brief.thin { border-top-color: var(--canopy); }

/* ---------- certificate (1650 x 1275): a recipe card on the tiled wall ---------- */
.kcert { width: 1650px; height: 1275px; position: relative; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23E2E0DC' stroke-width='1.2'%3E%3Cpath d='M0 .6H96M0 48.6H96M.6 0V48M48.6 48V96'/%3E%3C/g%3E%3C/svg%3E"); color: #22201E; font-family: 'Karla', Arial, sans-serif; overflow: hidden; display: flex; flex-direction: column; padding: 80px 100px 0; }
/* html2canvas (the PDF) can't draw inset shadows, repeating gradients or shadows on a rotated
   element, so the frames are borders, the ruled lines are a tiled image and the seal's rings are boxes */
.kcert .kcard { position: relative; flex: 1; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='65'%3E%3Crect y='63' width='8' height='2' fill='%23DCE4EC'/%3E%3C/svg%3E") 0 230px / 8px 65px repeat; border-radius: 36px; border: 2px solid #D9D6D2; padding: 20px 108px 0; }
.kcert .kbar { position: absolute; top: -2px; left: -2px; right: -2px; height: 24px; border-radius: 36px 36px 0 0; background: #D9412B; }
.kcert .khead { display: flex; align-items: center; gap: 26px; height: 170px; border-bottom: 4px solid #D9412B; }
.kcert .khead .mk { width: 84px; height: 84px; } .kcert .khead .mk svg { width: 100%; height: 100%; }
.kcert .khead .kt { font: 400 46px 'Young Serif', Georgia, serif; }
.kcert .khead .kd { margin-left: auto; font-size: 26px; font-weight: 700; color: #6E6862; }
.kcert .kbody { padding-top: 64px; }
.kcert .k { font-size: 30px; font-weight: 700; color: #D9412B; }
/* the name stays left of the seal at any length: it wraps inside 960px, and longer names step down */
.kcert .nm { font: 400 132px/1.0 'Young Serif', Georgia, serif; margin-top: 22px; max-width: 960px; overflow-wrap: anywhere; }
.kcert .nm.mid { font-size: 112px; } .kcert .nm.long { font-size: 88px; } .kcert .nm.longer { font-size: 70px; line-height: 1.05; }
.kcert .line { font-size: 30px; line-height: 1.55; color: #4A4541; max-width: 1120px; margin: 38px 0 0; }
.kcert .line b { color: #22201E; }
.kcert .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; max-width: 1180px; }
.kcert .facts div { background: #fff; border-radius: 22px; padding: 17px 23px; border: 3px solid #22201E; }
.kcert .facts small { display: block; font-size: 21px; color: #6E6862; font-weight: 700; }
.kcert .facts b { font: 400 46px 'Young Serif', Georgia, serif; white-space: nowrap; }
.kcert .seal { position: absolute; right: 76px; top: 226px; width: 258px; height: 258px; border-radius: 50%; background: #fff; border: 4px solid #D9412B; padding: 10px; }
.kcert .seal .sin { width: 100%; height: 100%; border-radius: 50%; background: #D9412B; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg); text-align: center; line-height: 1.05; }
.kcert .seal span { font: 400 40px 'Young Serif', Georgia, serif; } .kcert .seal b { font-size: 24px; font-weight: 700; color: #F5DCA4; margin: 4px 0; }
.kcert .fine { padding: 26px 10px 34px; font-size: 18px; line-height: 1.45; color: #6E6862; }

/* ---------- recipe card (portrait, 1275 x 1650) ---------- */
.ktake { width: 1275px; height: 1650px; background: #fff; color: #22201E; font-family: 'Karla', Arial, sans-serif; display: flex; flex-direction: column; padding-bottom: 40px; overflow: hidden; }
.ktake .th { display: flex; align-items: center; gap: 24px; padding: 38px 80px; background: radial-gradient(ellipse 40% 60% at 18% 30%, rgba(255, 255, 255, .06), transparent 70%), #2A2B28; color: #F1EFEA; border-bottom: 16px solid #B07A47; }
.ktake .th .mk { width: 80px; height: 80px; } .ktake .th .mk svg { width: 100%; height: 100%; }
.ktake .th b { font: 400 62px/1 'Young Serif', Georgia, serif; display: block; }
.ktake .th span { font-size: 22px; color: #BDB8B0; }
.ktake .th .who { margin-left: auto; text-align: right; font-size: 20px; color: #BDB8B0; }
.ktake .th .who b { font: 700 28px 'Karla', Arial, sans-serif; color: #F1EFEA; }
.ktake .tb { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; padding: 30px 70px 0; flex: 1; align-content: start; }
.ktake h4 { font: 400 29px 'Young Serif', Georgia, serif; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 3px solid #D9412B; }
.ktake p, .ktake li { font-size: 20.5px; line-height: 1.42; }
.ktake p { margin: 0; }
.ktake ul { margin: 0; padding-left: 24px; } .ktake li { margin-bottom: 3px; }
.ktake .sm { font-size: 18px; color: #4A4541; margin-top: 8px; }
.ktake .full { grid-column: 1 / -1; }
.ktake .rc { border-radius: 22px; padding: 18px 24px; border: 2px solid #E2E0DC; border-top: 10px solid #E8A93B; }
.ktake .box { border-radius: 22px; padding: 15px 25px; border: 3px solid #22201E; }
.ktake .box h4 { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
.ktake .fine { font-size: 16px; color: #6E6862; padding: 0 70px; }
.ktake .mine { border-color: #D9412B; }
/* the plan box takes room the card didn't need before, so the grid is a little tighter */
.ktake .tb { gap: 14px 28px; padding-top: 26px; }
.ktake .rc { padding: 14px 24px; }
.ktake .mine p { margin-top: 6px; }
.ktake .mine .ans { display: block; max-height: 58px; overflow: hidden; overflow-wrap: anywhere; font-style: italic; color: #4A4541; }
.ktake .mine .blank { display: block; height: 28px; border-bottom: 2px solid #D9D6D2; }

/* ---------- stage 1: the email that went out last week (inside the question) ---------- */
[data-theme="kitchen"] .qhead .lw { font: 400 16px/1.5 var(--font); margin-bottom: 18px; display: grid; gap: 10px; }
.lw-mail { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
.lw-h { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 10px 16px; background: var(--coconut); border-bottom: 1px solid var(--line2); font-size: 14px; }
.lw-h b { color: var(--mute); margin-right: 4px; }
.lw-h .tag { margin-left: auto; background: var(--bad-bg); color: var(--bad); font-weight: 700; padding: 2px 10px; border-radius: 999px; font-size: 14px; }
.lw-mail p { margin: 0; padding: 8px 16px 0; } .lw-mail p:last-child { padding-bottom: 12px; }
.lw-reply { padding: 12px 16px; border-radius: 14px; background: var(--chalkboard); color: var(--chalk); border-left: 6px solid var(--tomato); }
.lw-reply b { color: var(--mustard); font-size: 14px; }
.lw-reply p { margin: 4px 0 0; font-size: 16px; }

/* ---------- stage 4: write your own prompt ---------- */
.write { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wtop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wbrief { background: #fff; border-radius: 16px; padding: 14px 18px 16px; border-top: 8px solid var(--mustard); box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 var(--line2); font-size: 16px; line-height: 1.5; }
.wb-h { font: 400 20px var(--display); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid var(--mustard); }
.wbrief ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.wfade { background: var(--coconut); border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 0 0 1.5px var(--line2); display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.wfade b { flex-basis: 100%; font: 400 16px var(--display); }
.wfade span { padding: 4px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 700; }
.wfade small { flex-basis: 100%; color: var(--mute); font-size: 14px; margin-top: 4px; }
.wlab { display: block; font-weight: 700; margin-bottom: 6px; }
.wtext { width: 100%; box-sizing: border-box; min-height: 200px; resize: vertical; border: 0; border-radius: 14px; padding: 12px 14px; font: 15px/24px var(--font); color: var(--ink); background: #fff repeating-linear-gradient(180deg, transparent 0 23px, var(--rule) 23px 24px); background-position: 0 11px; box-shadow: inset 0 0 0 1.5px var(--line); }
.wtext:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tomato); }
.write.locked .wtext { background-color: var(--coconut); color: var(--ink2); }
.write.locked .wcheck { display: none; }
.wrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.wcount { font-size: 14px; color: var(--mute); }
.wself, .wcompare { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: inset 0 0 0 1.5px var(--line); animation: rise .3s; }
.wself h4, .wcol h4 { font: 400 20px var(--display); margin: 0 0 4px; }
.wself .sm { margin: 0 0 10px; color: var(--ink2); font-size: 14px; }
.wlist { display: grid; gap: 8px; }
.wck { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 12px; border-radius: 12px; background: var(--coconut); cursor: pointer; font-size: 14px; line-height: 1.45; }
.wck input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--basil); }
.wck:has(input:checked) { background: var(--good-bg); box-shadow: inset 0 0 0 1.5px var(--basil); }
.wspot { display: block; font-size: 14px; margin-top: 2px; }
.wspot.y { color: var(--good); } .wspot.n { color: var(--canopy); }
.wcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.wcol { border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.wcol.mine { background: var(--coconut); }
.wcol.model { background: #fff; box-shadow: inset 0 0 0 1.5px var(--basil); border-top: 6px solid var(--basil); }
.wcol.model p { margin: 0 0 6px; }
.wc-note { margin: 12px 0 10px; font-size: 16px; }

/* ---------- interview me first: the exact prompt ---------- */
.iprompt { background: var(--chalkboard); color: var(--chalk); border-radius: 18px; padding: 20px 24px; border: 10px solid var(--wood); }
.ip-h { font-weight: 700; color: var(--mustard); font-size: 14px; }
.ip-text { font: 400 clamp(19px, 2.2vw, 24px)/1.4 var(--display); margin: 6px 0 14px; }
.iprompt .copyp { background: var(--mustard); color: var(--ink); }
.ip-why { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; color: #E2DED6; }
.ip-why b { color: #fff; }

/* ---------- fix it: diagnose, then repair ---------- */
.fixit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fx-notes { padding: 11px 15px; border-radius: 14px; background: #fff repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px); box-shadow: inset 0 0 0 1.5px var(--line); border-left: 6px solid var(--mustard); font-size: 14px; line-height: 1.55; }
.fx-mail { background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
.fx-body { padding: 10px 16px 6px; font-size: 16px; line-height: 1.55; }
.fx-body p { margin: 0 0 8px; padding: 4px 8px; border-radius: 10px; position: relative; }
.fx-body p.fx-bad { background: #FDF1EE; box-shadow: inset 3px 0 0 var(--bad); padding-left: 38px; }
.fx-body p.fx-bad.now { background: #FFF3D9; box-shadow: inset 3px 0 0 var(--mustard), 0 0 0 2px var(--mustard); }
.fx-body p.fixed { background: var(--good-bg); box-shadow: inset 3px 0 0 var(--basil); }
.fx-n { position: absolute; left: 8px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--bad); color: #fff; font: 700 14px/22px var(--font); text-align: center; font-style: normal; }
.fx-body p.fixed .fx-n { background: var(--basil); }
.fx-body mark { background: transparent; color: inherit; }
.fx-panel { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); border-top: 6px solid var(--tomato); }
.fx-q { margin: 6px 0 8px; font-weight: 700; }
.fx-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-checks .tok { cursor: pointer; }
.fx-checks .tok:disabled { opacity: .55; cursor: default; }
.fx-checks .tok.good { opacity: 1; background: var(--good-bg); box-shadow: inset 0 0 0 2px var(--good); }
.fx-opts { display: grid; gap: 8px; }
.fx-fb .fb { margin-top: 12px; }
.fx-nextrow { margin-top: 10px; }

/* the manager's hunt: notes over the email, in one column */
.hk.one { grid-template-columns: 1fr; min-width: 0; }
.hk.one .hk-notes { border-right: 0; border-bottom: 2px dashed var(--line); background-position: 0 50px; padding-bottom: 12px; }
.huntwrap.prose .hk { min-width: 0; }

@media (max-width: 900px) {
  /* on a phone the notes stack over the email, so nothing hides off to the side */
  .hk { grid-template-columns: 1fr; }
  .hk-notes { border-right: 0; border-bottom: 2px dashed var(--line); padding-bottom: 12px; }
  .wtop, .wcols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  [data-theme="kitchen"] .card { padding: 18px 16px; border-radius: 18px; }
  [data-theme="kitchen"] .beathead { margin: 0 -16px 20px; padding: 0 16px 14px; }
  [data-theme="kitchen"] .main { padding: 16px 10px 32px; }
  [data-theme="kitchen"] .brand b { font-size: 20px; }
  [data-theme="kitchen"] .brand .glyph { width: 28px; height: 28px; }
  [data-theme="kitchen"] .combo { font-size: 14px; padding: 3px 7px; }
  [data-theme="kitchen"] .msg { max-width: 96%; }
  [data-theme="kitchen"] .hero { border-width: 10px; }
  [data-theme="kitchen"] .hero .art { border-left: 0; border-bottom: 8px solid var(--wood); }
  .bench, .recipe { grid-template-columns: 1fr; }
  .recipe .rc-r { border-left: 0; border-top: 2px dashed var(--line); }
  .flips[data-n="5"] { grid-template-columns: 1fr; }
  .flips[data-n="5"] .flip, .flips[data-n="5"] .flip:nth-child(n+4) { grid-column: auto; }
  .rslot { grid-template-columns: 1fr; gap: 2px; }
}