/* ===========================================================================
   THE KITCHEN — styles, moved out of app.css on 15 October (the rebuild).
   ===========================================================================

   Loaded straight after app.css (see room-css in index.html), so the cascade
   is what it was: these rules sat among the others in app.css and every one of
   them is at least as specific as whatever it was written to beat. The
   screen code that draws these classes is app/rooms/kitchen.js.

   Left in app.css on purpose, because other rooms use them: the shared grid
   list that includes .kit-grid, the search-box list that includes #kitSearch,
   .kit-fam-tag (shared with the board), and .kit-facts, .kit-night-x and
   .kit-readas* (Body and the watch importer reuse them).
   =========================================================================== */
/* ==========================================================
   THE KITCHEN — recipes, the week, the list.
   ==========================================================

   Nothing here is decorated. A shopping list is read in a shop, on one bar
   of signal, while walking, so the whole of it is one column of large hit
   targets and the only thing with any weight on it is the name of the
   thing to pick up. The "why" behind a quantity is a small word at the end
   of the line rather than a number on the face of it, for the same reason:
   the question is asked once, about one line, and the other forty lines
   should not be paying for it. */
.kit-card{ border:1px solid var(--glass-border); border-radius:var(--radius-card); background:var(--glass-bg);
  overflow:hidden; cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out); }
.kit-card:hover{ border-color:var(--glass-border-hi); }
.kit-card-img{ height:132px; overflow:hidden; background:rgba(120,120,140,.10); }
.kit-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.kit-card-body{ padding:var(--space-3) var(--space-4) var(--space-4); }
.kit-card-title{ font-size:var(--type-lead); font-weight:650; color:var(--text); }
.kit-card-desc{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kit-card-meta{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-2); }
.kit-card-tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.kit-card-tags span{ font-size:var(--type-label); font-weight:600; color:var(--text-dim);
  border:1px solid var(--glass-border); border-radius:var(--radius-pill); padding:var(--space-hair) var(--space-2); }
.kit-dial{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  font-size:var(--type-body); color:var(--text-dim); margin-bottom:var(--space-1); }
.kit-dial b{ font-size:var(--type-lead); color:var(--text); min-width:22px; text-align:center; }
.kit-dial .btn{ padding:var(--space-1) var(--space-3); font-size:var(--type-lead); line-height:1.2; }
.kit-dial-note{ font-size:var(--type-body); }
.kit-line{ padding:var(--space-2) 0; border-bottom:1px solid var(--glass-border); }
.kit-line:last-child{ border-bottom:none; }
.kit-line-main{ font-size:var(--type-body); color:var(--text); display:block; }
/* What was written, under what it now says. Only when the two differ — a
   line repeated back at you identically is noise. */
.kit-line-raw{ font-size:var(--type-body); color:var(--text-faint); display:block; margin-top:1px; }
.kit-method{ font-size:var(--type-body); color:var(--text-dim); white-space:pre-wrap; line-height:1.55; }
.kit-ing-box{ min-height:150px; font-family:var(--font-mono); font-size:var(--type-body); }
.kit-method-box{ min-height:120px; }
.kit-readas-head{ font-size:var(--type-body); font-weight:600; color:var(--text); margin-bottom:var(--space-2); }
.kit-readas-foot{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-2); line-height:1.5; }
.kit-import-title{ font-size:var(--type-lead); font-weight:650; color:var(--text); }
.kit-day{ border-bottom:1px solid var(--glass-border); padding:var(--space-2) 0; }
.kit-day.is-empty{ opacity:.55; }
.kit-day-head{ display:flex; align-items:center; gap:var(--space-3); }
.kit-day-name{ font-size:var(--type-body); font-weight:650; color:var(--text); flex:1; min-width:0; }
.kit-day-add{ padding:1px var(--space-3); font-size:var(--type-lead); line-height:1.3; }
.kit-night{ display:flex; align-items:baseline; gap:var(--space-3); padding:var(--space-2) 0 var(--space-1) var(--space-hair); }
.kit-night-title{ font-size:var(--type-body); color:var(--text); cursor:pointer; }
.kit-night-title:hover{ text-decoration:underline; }
.kit-night-meta{ font-size:var(--type-body); color:var(--text-dim); flex:1; min-width:0; }
.kit-add{ display:flex; gap:var(--space-2); align-items:center; margin-bottom:var(--space-2); }
.kit-add .field{ flex:1; }
/* What the build had to say about itself — the nights it did not buy for,
   the recipes with nothing in them, the lines it could not add together. A
   list that is silently short is the failure this feature exists to stop. */
.kit-built{ border:1px solid var(--glass-border); border-radius:var(--radius-card); padding:var(--space-3) var(--space-3);
  margin:var(--space-3) 0; font-size:var(--type-body); color:var(--text-dim); line-height:1.55; }
.kit-built div + div{ margin-top:var(--space-2); }
.kit-item{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0;
  border-bottom:1px solid var(--glass-border); flex-wrap:wrap; }
.kit-tick{ flex:none; width:24px; height:24px; border-radius:var(--radius-control); cursor:pointer;
  border:1px solid var(--glass-border-hi); display:flex; align-items:center;
  justify-content:center; font-size:var(--type-body); color:var(--text); }
/* A LINE THE PANTRY PUT THERE.
 *
 * "if I click low, I want it to auto-appear on the grocery list (lightened so
 *  I can click and a popup says add or remove)."   (Matt, 1 September.)
 *
 * Lightened rather than coloured: it is a suggestion from the cupboard, not a
 * decision he made, and the next thing he does with it is promote it or
 * dismiss it. A dashed edge says provisional in the same language the agenda
 * already uses for a task, and the whole row is the press target because he
 * is holding a phone in a kitchen. */
.kit-item.is-pantry{ cursor:pointer; position:relative; }
.kit-item.is-pantry .kit-item-name{ opacity:.62; }
.kit-item.is-pantry .kit-tick{ border-style:dashed; }
.kit-item.is-pantry:hover .kit-item-name{ opacity:.85; }
.kit-pantry-tag{ flex:none; font-size:var(--type-label); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange);
  border:1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  border-radius:var(--radius-control); padding:1px var(--space-2); }
.kit-pantry-menu{ flex-basis:100%; display:flex; gap:var(--space-2); flex-wrap:wrap;
  align-items:center; padding:var(--space-2) 0 var(--space-1); }
.kit-item-main{ flex:1; min-width:0; }
.kit-item-name{ font-size:var(--type-lead); color:var(--text); display:block; }
.kit-item-note{ font-size:var(--type-body); color:var(--text-dim); display:block; }
/* Ticked stays on the list, faded. A list that deletes what you tick gives
   you no way to check what you already have, and checking is the first
   thing anybody does in a shop. */
.kit-item.is-done .kit-item-name{ color:var(--text-faint); text-decoration:line-through; }
.kit-why{ flex:none; font-size:var(--type-label); font-weight:600; color:var(--text-dim); cursor:pointer;
  border:1px solid var(--glass-border); border-radius:var(--radius-pill); padding:var(--space-hair) var(--space-3); }
.kit-why:hover{ color:var(--text); border-color:var(--glass-border-hi); }
.kit-sources{ flex-basis:100%; margin:var(--space-2) 0 var(--space-hair) var(--space-8); }
.kit-source{ font-size:var(--type-body); color:var(--text-dim); padding:var(--space-1) 0; }
.kit-source b{ color:var(--text); font-weight:600; }
.kit-source span{ display:block; color:var(--text-faint); }
.kit-usual{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.kit-usual .btn{ font-size:var(--type-body); padding:var(--space-2) var(--space-3); }
/* "N ALREADY IN YOUR PANTRY" (14 Oct). One quiet line under the list: what the
   week wanted and the cupboard has. Plain text, not a card — the point is that
   these are NOT on the list. Open, each has one press: Running low — add. */
.kit-inpan{ margin:var(--space-3) 0; }
.kit-inpan-head{ background:none; border:0; padding:var(--space-2) 0; cursor:pointer; font:inherit;
  font-size:var(--type-body); color:var(--text-dim); display:flex; align-items:center; gap:var(--space-2); }
.kit-inpan-head:hover{ color:var(--text); }
.kit-inpan-chev{ font-size:var(--type-label); }
.kit-inpan-row{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-1) 0;
  border-bottom:1px solid var(--glass-border); }
.kit-inpan-name{ flex:1; min-width:0; font-size:var(--type-body); color:var(--text-dim); }
.kit-inpan-add{ flex:none; font-size:var(--type-label); padding:var(--space-1) var(--space-3); }
/* ==========================================================
   THE PANTRY.
   "discuss a pantry tab to capture what we have to cook with"
   Reference, mostly — so it is quiet. The two things worth
   interrupting him about (out of date, going off this week)
   are the only coloured thing on the screen.
   ========================================================== */
.pan-add{ display:flex; gap:var(--space-2); align-items:stretch; margin-bottom:var(--space-3); flex-wrap:wrap; }
.pan-add .field{ flex:1; min-width:180px; margin-bottom:0; }
.pan-where{ flex:none; width:120px; margin-bottom:0; text-transform:capitalize; }
.pan-alert{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.pan-pill{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--type-body);
  padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--orange) 55%, transparent);
  background:color-mix(in srgb, var(--orange) 12%, transparent); }
.pan-pill.gone{ border-color:color-mix(in srgb, var(--cat-red) 60%, transparent);
  background:color-mix(in srgb, var(--cat-red) 12%, transparent); }
.pan-pill-when{ font-size:var(--type-label); color:var(--text-faint); }
.pan-row{ display:flex; gap:var(--space-3); align-items:center; padding:var(--space-2) var(--space-3); border-radius:var(--radius-card);
  border:1px solid var(--glass-border); background:var(--glass-bg); margin-bottom:var(--space-2); }
.pan-row:hover{ border-color:var(--glass-border-hi); }
/* Running low is a state he set, so it reads as marked rather than as wrong. */
.pan-row.is-low{ border-left:3px solid var(--orange); }
.pan-main{ flex:1; min-width:0; }
.pan-name{ font-size:var(--type-body); }
.pan-sub{ font-size:var(--type-body); color:var(--text-faint); text-transform:capitalize; }
.pan-row .btn{ flex:none; padding:var(--space-1) var(--space-2); font-size:var(--type-body); }
.pan-row.is-low .pan-low{ border-color:var(--orange); color:var(--orange); }
/* ==========================================================
   THE MEAL CALENDAR.
   "discuss adding a meal calendar"
   A map above the list, not a replacement for it. The list is
   where you plan a night; this answers the questions a list
   cannot — which week is empty, and when was the chilli.
   ========================================================== */
.kit-month{ margin-bottom:var(--space-4); }
.kmg-days{ display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--space-1); margin-bottom:var(--space-1); }
.kmg-days > div{ font-size:var(--type-label); letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint); text-align:center; }
.kmg-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--space-1); }
.kmg-cell{ min-height:56px; border-radius:var(--radius-control); padding:var(--space-2) var(--space-2);
  border:1px solid var(--glass-border); background:var(--glass-bg); overflow:hidden; }
.kmg-cell.has{ cursor:pointer;
  border-color:color-mix(in srgb, var(--orb-accent, var(--accent)) 40%, var(--glass-border));
  background:color-mix(in srgb, var(--orb-accent, var(--accent)) 9%, transparent); }
.kmg-cell.has:hover{ border-color:var(--orb-accent, var(--accent)); }
/* Days outside the planning window are drawn so the weeks line up and are
   deliberately dead — pressing one would plan a night the list cannot show. */
.kmg-cell.out{ opacity:.28; }
.kmg-cell.today{ outline:1.5px solid var(--orb-accent, var(--accent)); outline-offset:-1.5px; }
.kmg-num{ font-size:var(--type-label); color:var(--text-faint); }
.kmg-what{ font-size:var(--type-label); line-height:1.3; margin-top:var(--space-hair);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Where the calendar sends you, said for a moment so the jump is legible. */
.kit-day-flash{ outline:2px solid var(--orb-accent, var(--accent)); outline-offset:2px;
  border-radius:var(--radius-card); transition:outline-color var(--dur-slow) var(--ease-out); }

@media (max-width: 560px) {
  .kmg-cell{ min-height:44px; }
  .kmg-what{ display:none; }
}

/* Finding a recipe, before pasting one. */
.kit-find{ display:flex; gap:var(--space-2); align-items:stretch; }
.kit-find .field{ flex:1; margin-bottom:0; }
.kit-found{ max-height:230px; overflow:auto; margin:var(--space-2) 0 var(--space-1); }
.kit-hit{ display:flex; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-2);
  border-radius:var(--radius-control); cursor:pointer; }
.kit-hit:hover{ background:var(--glass-border-hi); }
.kit-hit-main{ flex:1; min-width:0; }
.kit-hit-t{ font-size:var(--type-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kit-hit-s{ font-size:var(--type-label); color:var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kit-hit-tag{ flex:none; font-size:var(--type-label); padding:var(--space-hair) var(--space-2); border-radius:var(--radius-pill);
  border:1px solid var(--glass-border); color:var(--text-faint); }
/* "reads well" is a hint, never a filter — a site nobody has heard of that
   publishes clean markup imports perfectly. */
.kit-hit-tag.ok{ border-color:color-mix(in srgb, var(--green) 50%, transparent); color:var(--green); }
/* THE RECIPE BAR — search takes the room, sort and the category fold sit at
   its right on one line, and wrap under it on a phone. */
.kit-bar{ display:flex; align-items:stretch; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
.kit-bar #kitSearch{ flex:1 1 260px; margin:0; }
.kit-bar .st-drop{ margin-bottom:0; flex:none; display:flex; }
.kit-bar .st-drop-btn{ height:100%; width:auto; min-width:170px; font-size:var(--type-body); }
.kit-bar .st-drop-menu{ left:auto; right:0; min-width:210px; padding:var(--space-2); }
.kit-bar .st-drop-menu .chip-select{ flex-direction:column; flex-wrap:nowrap; gap:var(--space-1); }
.kit-bar .st-drop-menu .chip{ justify-content:flex-start; }
.kit-fold{
  flex:none; display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-card);
  border:1px solid var(--glass-border); background:rgba(120,120,140,.08); color:var(--text);
  font-family:var(--font-body); font-size:var(--type-body); font-weight:600; cursor:pointer;
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.kit-fold:hover{ border-color:var(--glass-border-hi); background:rgba(120,120,140,.14); }
.kit-fold[aria-expanded="true"] .st-drop-chev{ transform:rotate(180deg); }
.kit-fold.has-pick{ border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  background:color-mix(in srgb, var(--accent) 16%, transparent); }
.kit-tags{ margin-bottom:var(--space-3); }

@media (max-width: 640px) {
  .kit-bar .st-drop, .kit-fold{ flex:1 1 0; }
  .kit-bar .st-drop-btn{ width:100%; min-width:0; min-height:44px; }
  .kit-fold{ justify-content:space-between; min-height:44px; }
  /* On a phone the picker sits at the left, so its menu opens from the left
     edge rather than running off it. */
  .kit-bar .st-drop-menu{ left:0; right:auto; }
}

/* ==========================================================================
   PUT THE SHOPPING AWAY — Kitchen, option A. 24 September.
   ==========================================================================
   Three states and they must not look alike:
     · a line Lucid is SURE of        — a tick, plain
     · a line it is UNSURE of         — a ?, tinted, and it says why
     · a photograph it COULD NOT READ — its own block, never an empty list
   Everything that moves here moves with transform and opacity only. */

.sa-open{ white-space:nowrap; }
.sa-card{ border:1px solid var(--glass-border); background:var(--glass-bg);
  border-radius:var(--radius-card); overflow:hidden; }
.sa-head{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--glass-border); }
.sa-head h3{ margin:0; flex:1; font-size:var(--type-lead); font-weight:650; }
.sa-step{ font-size:var(--type-label); color:var(--text-faint); }
.sa-note{ color:var(--text-dim); font-size:var(--type-label); margin:0; }
.sa-dim{ color:var(--text-faint); }
/* step 1 */
.sa-shot{ padding:var(--space-6) var(--space-4); text-align:center; }
.sa-lens{ width:132px; height:170px; margin:0 auto var(--space-4);
  border-radius:var(--radius-control); border:1px solid var(--glass-border);
  background:repeating-linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent) 0 2px, transparent 2px 9px),
             var(--glass-bg);
  position:relative; overflow:hidden; }
.sa-lens::after{ content:''; position:absolute; left:0; right:0; top:0; height:2px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--blue), transparent); }
/* Only while it is actually reading, and only transform — animating `top` on
   this cost 379 re-layouts in six seconds the last time it was tried. */
.sa-lens.reading::after{ opacity:1; animation:sa-scan 1.7s ease-in-out infinite; }
@keyframes sa-scan{ 0%,100%{ transform:translate3d(0,6px,0); } 50%{ transform:translate3d(0,162px,0); } }
@media (prefers-reduced-motion: reduce){ .sa-lens.reading::after{ animation:none; } }
.sa-big{ margin-top:var(--space-4); }
/* step 2 */
.sa-bar{ padding:var(--space-3) var(--space-4); font-weight:600;
  border-bottom:1px solid var(--glass-border); }
.sa-doubt{ margin:var(--space-3) var(--space-4) 0; padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-tight); font-size:var(--type-label);
  border:1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  background:color-mix(in srgb, var(--orange) 10%, transparent); }
.sa-list{ padding:var(--space-2) var(--space-4); }
.sa-row{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-2) 0;
  border-bottom:1px solid var(--glass-border); }
.sa-row:last-child{ border-bottom:0; }
.sa-mark{ flex:none; width:16px; text-align:center; font-weight:700; }
.sa-mark.y{ color:var(--green); }
.sa-mark.q{ color:var(--orange); }
.sa-raw{ flex:0 0 150px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:var(--type-label); color:var(--text-faint); }
.sa-arrow{ flex:none; color:var(--text-faint); }
.sa-got{ flex:1; min-width:0; font-weight:600; }
.sa-why{ display:block; font-weight:400; font-size:var(--type-label); color:var(--orange); }
.sa-why.taught{ color:var(--green); }
.sa-dest{ flex:none; font-size:var(--type-label); color:var(--text-dim); }
/* MARKED, NOT HIDDEN. A tint, a ?, the reason written out, and a whole row
   that is a target — so correcting it is one tap and ignoring it is a choice
   he made rather than one made for him. */
.sa-row.unsure{ cursor:pointer; border-radius:var(--radius-tight);
  margin:0 calc(-1 * var(--space-2)); padding-left:var(--space-2); padding-right:var(--space-2);
  background:color-mix(in srgb, var(--orange) 7%, transparent); }
.sa-row.unsure:hover{ background:color-mix(in srgb, var(--orange) 12%, transparent); }
.sa-row.taught .sa-got{ color:var(--green); }
.sa-skipped{ padding:var(--space-2) var(--space-4) var(--space-3);
  font-size:var(--type-label); color:var(--text-faint); }
.sa-skipped span{ font-family:'IBM Plex Mono', ui-monospace, monospace; margin-left:var(--space-2); }
.sa-foot{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap;
  padding:var(--space-3) var(--space-4); border-top:1px solid var(--glass-border); }
.sa-foot .sa-note{ flex:1; }
/* could not read — deliberately nothing like an empty list */
.sa-failed{ padding:var(--space-6) var(--space-4); text-align:center; }
.sa-failed-mark{ width:52px; height:52px; margin:0 auto var(--space-3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;
  color:var(--orange);
  border:2px solid color-mix(in srgb, var(--orange) 55%, transparent);
  background:color-mix(in srgb, var(--orange) 10%, transparent); }
.sa-failed-says{ font-size:var(--type-lead); font-weight:600; margin:0 0 var(--space-2); }
.sa-failed .btn{ margin-top:var(--space-4); }
/* step 3 */
.sa-nights{ padding:var(--space-4); }
.sa-lead{ font-size:var(--type-title); font-weight:650; margin:0 0 var(--space-3); }
.sa-night{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) 0;
  border-top:1px solid var(--glass-border); }
.sa-night:first-of-type{ border-top:0; }
.sa-day{ flex:0 0 96px; font-weight:700; }
.sa-body{ flex:1; min-width:0; }
.sa-t{ display:block; font-weight:600; }
.sa-s{ display:block; font-size:var(--type-label); color:var(--text-dim); margin-top:2px; }
.sa-s em{ font-style:normal; font-weight:600; color:var(--text); }
.sa-tag{ flex:none; font-size:var(--type-label); font-weight:600; padding:2px var(--space-2);
  border-radius:var(--radius-pill); border:1px solid var(--glass-border); color:var(--text-dim); }
.sa-tag.ok{ color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, transparent); }
.sa-tag.owe{ color:var(--orange); border-color:color-mix(in srgb, var(--orange) 45%, transparent); }
.sa-tag.near{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 45%, transparent); }
.sa-tally{ margin-top:var(--space-4); padding:var(--space-3);
  border:1px solid var(--glass-border); border-radius:var(--radius-control);
  display:flex; gap:var(--space-5); flex-wrap:wrap; color:var(--text-dim); }
.sa-tally b{ color:var(--text); }

@media (max-width: 620px) {
  .sa-row{ flex-wrap:wrap; }
  .sa-raw{ flex:1 1 100%; order:3; padding-left:28px; }
  .sa-arrow{ display:none; }
  .sa-dest{ flex:1 1 100%; order:4; padding-left:28px; }
  .sa-night{ flex-wrap:wrap; }
  .sa-day{ flex:1 1 100%; }
}

/* Not knowing who is coming is a state, and it reads as one — never as an
   empty night, which is what it would otherwise be mistaken for. */
.sa-unknown{ color:var(--orange); font-size:var(--type-label); }
/* ==========================================================================
   COOK FROM THE HOUSE (Kitchen B) and THE WEEK, PLANNED (Kitchen C).
   24 September, drawn off travel-kitchen-options.html options B and C.
   ==========================================================================
   Colour is a fact here, not decoration:
     green   — in the house, and Lucid will say you can cook on it
     orange  — there but doubtful (low, or past its date). NOT had.
     struck  — past its date. Named, never counted.
     grey    — not read. A read that failed never wears the colour of an
               empty one; it gets .kt-unread / .kw-unread and a sentence.
   --green and --orange are used rather than --green-2 / --orange-2 because
   the -2 pair is a pale tint built for a dark background and drops to about
   2:1 against the light themes. Same reason Kitchen A used them. */

/* ---- the question, and the three buckets -------------------------------- */
/* A PHONE-WIDTH CARD, because that is what the drawing draws — option B is
   the one card on that page carrying the `phone` class. Built full width it
   looked fine in a measurement and wrong in a photograph: at 1440 the bucket
   count and the "cook now" pill ended up about 1,200px from the row they
   belong to, which is a whole screen away from the thing they describe. */
.kt-card{ border:1px solid var(--glass-border); background:var(--glass-bg);
  border-radius:var(--radius-card); overflow:hidden; max-width:none; }
.kt-ask{ padding:18px 16px 12px; }
.kt-ask h3{ margin:0; font-size:var(--type-lead); font-weight:650; }
.kt-ask p{ margin:4px 0 0; color:var(--text-dim); font-size:var(--type-label); }
.kt-ask p b{ color:var(--text); font-weight:600; }
.kt-bucket{ padding:0 16px 12px; }
.kt-bkhd{ display:flex; align-items:center; gap:8px; padding:12px 0 8px;
  border-bottom:1px solid var(--glass-border); margin-bottom:8px; }
.kt-bkhd h4{ margin:0; font-size:var(--type-label); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; }
.kt-bkhd .kt-ct{ font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:var(--type-label); color:var(--text-faint); margin-left:auto; }
.kt-bkhd.now h4{ color:var(--green); }
.kt-bkhd.one h4{ color:var(--orange); }
.kt-bkhd.shop h4{ color:var(--text-faint); }
.kt-rec{ display:flex; gap:12px; align-items:center; padding:8px 0; }
.kt-rec[role="button"]{ cursor:pointer; }
.kt-more{ margin:4px 0 8px; }
.kt-rec .kt-nm{ flex:1; min-width:0; font-weight:600; }
.kt-rec .kt-sub{ font-size:var(--type-label); color:var(--text-dim);
  display:block; font-weight:400; }
.kt-rec .kt-sub b{ color:var(--orange); font-weight:600; }
.kt-tag{ flex:none; font-size:var(--type-label); font-weight:600;
  padding:2px 8px; border-radius:var(--radius-pill);
  border:1px solid var(--glass-border); color:var(--text-dim); }
.kt-tag.ok{ color:var(--green);
  border-color:color-mix(in srgb, var(--green) 45%, transparent); }
.kt-none{ margin:0 0 8px; font-size:var(--type-label); color:var(--text-faint); }
/* ---- taken off Tonight, and cooked this week (14 Oct, _recs.js rule) ---- */
.kt-tag.lately{ color:var(--text-faint); font-weight:500; }
.kt-rec.is-lately .kt-nm{ color:var(--text-dim); }
.kt-off{ flex:none; width:var(--space-8); height:var(--space-8); border-radius:var(--radius-round); border:0;
  background:transparent; color:var(--text-faint); font-size:var(--type-title); line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.kt-off:hover, .kt-off:focus-visible{ background:var(--glass-border); color:var(--text); }
.kt-hidden{ padding:var(--space-1) var(--space-4) var(--space-2); }
.kt-hid-toggle{ background:none; border:0; padding:var(--space-2) 0; cursor:pointer;
  font:inherit; font-size:var(--type-label); color:var(--text-faint); }
.kt-hid-act{ margin-left:var(--space-2); color:var(--accent, var(--text-dim)); font-weight:600; }
.kt-hid-row{ display:flex; gap:var(--space-3); align-items:center; padding:var(--space-2) 0; }
.kt-hid-row .kt-nm{ flex:1; min-width:0; color:var(--text-dim); }
.kt-hid-list{ max-width:calc(var(--space-16) * 7); }
.kt-hid-row .kt-back{ padding:var(--space-1) var(--space-3); font-size:var(--type-label); }

@media (hover: none) and (pointer: coarse), (max-width: 480px) {
  .kt-hid-row .kt-back{ min-height:0; position:relative; }
  .kt-hid-row .kt-back::after{ content:''; position:absolute; left:50%; top:50%;
    width:100%; height:100%; min-width:50px; min-height:50px;
    transform:translate(-50%,-50%); }
}

/* ---- the shelf ---------------------------------------------------------- */
.kt-shelf{ padding:12px 16px 16px; border-top:1px solid var(--glass-border);
  background:rgba(0,0,0,.14); }
.kt-shelf h4{ margin:0 0 8px; font-size:var(--type-label); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.kt-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.kt-chip{ font-family:inherit; font-size:var(--type-label); font-weight:600;
  cursor:pointer; padding:5px 12px; border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--green) 34%, transparent);
  background:color-mix(in srgb, var(--green) 12%, transparent);
  color:var(--green); }
.kt-chip.low{ border-color:color-mix(in srgb, var(--orange) 36%, transparent);
  background:color-mix(in srgb, var(--orange) 12%, transparent);
  color:var(--orange); }
/* PAST ITS DATE. Struck through because it is not a thing you have, and it
   cannot be tapped back into being one — only the date can do that. */
.kt-chip.gone{ border-color:var(--glass-border);
  background:rgba(120,120,140,.08); color:var(--text-faint);
  text-decoration:line-through; cursor:default; }
.kt-chip:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.kt-shelf-note{ margin:12px 0 0; font-size:var(--type-label); color:var(--text-dim); }
.kt-shelf-note b{ color:var(--orange); font-weight:600; }
/* ---- a read that failed, anywhere on either screen ---------------------- */
.kt-unread, .kw-unread{ margin:12px 16px; padding:10px 12px;
  border-radius:var(--radius-tight); font-size:var(--type-label);
  border:1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  background:color-mix(in srgb, var(--orange) 10%, transparent);
  color:var(--text); }
.kt-unread b, .kw-unread b{ color:var(--orange); }
/* ---- the week, planned -------------------------------------------------- */
.kw-card{ border:1px solid var(--glass-border); background:var(--glass-bg);
  border-radius:var(--radius-card); overflow:hidden; margin-bottom:14px; }
.kw-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 16px 0; }
.kw-head h3{ margin:0; font-size:var(--type-lead); font-weight:650; }
.kw-head span{ font-size:var(--type-label); color:var(--text-faint); }
.kw-week{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:14px 16px; }
@media(max-width:900px){ .kw-week{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .kw-week{ grid-template-columns:1fr; } }
.kw-cell{ border:1px solid var(--glass-border); background:rgba(120,120,140,.07);
  border-radius:var(--radius-control); padding:12px; min-height:126px;
  display:flex; flex-direction:column; gap:4px; cursor:pointer; text-align:left;
  font:inherit; color:inherit; width:100%; }
.kw-cell:hover{ border-color:var(--glass-border-hi); background:rgba(120,120,140,.14); }
.kw-cell.sel{ border-color:color-mix(in srgb, var(--blue) 55%, transparent);
  background:color-mix(in srgb, var(--blue) 13%, transparent); }
.kw-cell.away{ opacity:.62; cursor:default; }
.kw-cell:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.kw-dy{ display:block; font-weight:700; }
.kw-wh{ display:block; font-size:var(--type-label); color:var(--text-dim); }
.kw-wh b{ color:var(--text); font-weight:600; }
/* NOT KNOWING WHO IS COMING IS A STATE AND READS AS ONE. Never an empty night. */
.kw-wh.unknown{ color:var(--orange); }
.kw-meal{ margin-top:auto; font-weight:600; color:var(--text); }
.kw-meal.none{ color:var(--text-faint); font-weight:400; font-style:italic; }
.kw-short{ display:block; font-size:var(--type-label); color:var(--orange);
  font-weight:400; margin-top:2px; }
.kw-short.ok{ color:var(--green); }
.kw-picker{ padding:0 16px 14px; }
.kw-pickhd{ font-size:var(--type-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); font-weight:700; margin-bottom:8px; }
.kw-pick{ display:flex; gap:12px; align-items:center; padding:8px 12px;
  border:1px solid var(--glass-border); background:rgba(120,120,140,.07);
  border-radius:var(--radius-control); margin-bottom:8px; cursor:pointer;
  text-align:left; font:inherit; color:inherit; width:100%; }
.kw-pick:hover{ background:rgba(120,120,140,.16); border-color:var(--glass-border-hi); }
.kw-pick:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.kw-pick .kw-nm{ flex:1; min-width:0; font-weight:600; }
.kw-pick .kw-why{ font-size:var(--type-label); color:var(--text-dim);
  display:block; font-weight:400; }
.kw-pick .kw-act{ flex:none; font-size:var(--type-label); color:var(--blue); font-weight:600; }
.kw-list{ margin:0 16px 16px; border:1px solid var(--glass-border);
  background:rgba(0,0,0,.18); border-radius:var(--radius-control); padding:12px 16px; }
.kw-list h4{ margin:0 0 8px; font-size:var(--type-label); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.kw-aisle{ margin-bottom:12px; }
.kw-an{ font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:3px; }
.kw-ai{ font-size:var(--type-body); color:var(--text); }
.kw-ai .kw-q{ font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--text-dim); }
.kw-ai .kw-from{ font-size:var(--type-label); color:var(--text-faint); }
.kw-says{ margin:0; font-size:var(--type-label); color:var(--text-dim); }
/* The count under the pantry field. It appears only once there is more than
   one thing in there, so the comma trade — see parsePantryPaste() in
   _kitchen.js, where "chicken, diced" becomes two — is visible BEFORE he
   presses rather than as a surprise in the list afterwards. */
.pan-hint{
  align-self:center;
  font-size:var(--type-small, 12px);
  color:var(--text-faint);
  white-space:nowrap;
}
/* THE KITCHEN IN COLUMNS — 14 October. Matt: "Tiles run full length, need to
   make this 2 or 3 rows." The pantry and Tonight's recipe lists flow into as
   many columns as fit (three on his Mac window, one on a phone) instead of
   running every row the full width of the page. */
.pan-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.pan-grid .pan-row{ margin:0; min-width:0; }
.pan-grid .pan-row .pan-main{ min-width:0; }
.pan-grid .pan-row .pan-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-bucket .kt-recs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); column-gap:24px; }
.kt-bucket .kt-recs .kt-rec{ min-width:0; }
/* THE RECIPE TRAY, TWICE AS WIDE — 14 October. Matt: "extend out the tray to
   double the size and put ingredients (and nutrients) on left and instructions
   on right with hero image of recipe." One column again on a phone. */
.modal-backdrop.as-tray#kitRecipeBackdrop > .compose-modal{ width:min(1120px, 100vw); }
.kr-hero{ margin:6px 0 24px; border-radius:var(--radius-card); overflow:hidden; height:208px;
  background:var(--glass-bg); }
.kr-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.kr-cols{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:28px; align-items:start; }
.kr-cols .section-label:first-child{ margin-top:0; }
.kr-steps{ margin:0; padding-left:1.4em; display:flex; flex-direction:column; gap:12px;
  line-height:1.55; }
.kr-steps li{ padding-left:4px; }
.kr-steps li::marker{ color:var(--text-dim); font-weight:600; }
.kr-nut{ display:grid; grid-template-columns:auto 1fr; gap:4px 16px; font-size:var(--type-body); }
.kr-nut-k{ color:var(--text-dim); }
.kr-nut-v{ color:var(--text); font-variant-numeric:tabular-nums; }

@media (max-width:780px) {
  .kr-cols{ grid-template-columns:1fr; }
  .kr-hero{ height:152px; }
}

/* Room to breathe under the photo (14 Oct, "a car accident at the top"). */
.kr-desc{ margin:0 0 16px; }
.kr-bar{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 0 18px; margin:0 0 22px; border-bottom:1px solid var(--glass-border); }
.kr-bar-l{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.kr-bar-r{ flex:none; }
.kr-bar-r .kit-dial{ margin:0; }
.kr-facts{ color:var(--text-dim); font-size:var(--type-body); }
.kr-pan{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:5px 12px; border-radius:999px; font-size:var(--type-body);
  border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text); }
.kr-pan i{ width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex:none; }
/* WHAT THE CUPBOARD SAYS ABOUT A RECIPE. Three states that mean three
   different things to a person standing in a kitchen at seven o'clock, so
   they are three colours — and `unknown` is deliberately the quiet one,
   because "Lucid cannot tell" must not look like an answer. */
.kr-pan-now i{ background:var(--green, #4caf7a); }
.kr-pan-shop i, .kr-pan-check i{ background:var(--orange, #e08a3c); }
.kr-pan-why{ margin-top:-2px; }
@media (max-width:780px){ .kr-bar{ flex-direction:column; align-items:flex-start; } }
/* Tap to cross off (14 Oct). A finger-sized target on the iPad, a line through
   what is gathered, and it fades back rather than vanishing. */
.kr-tick{ cursor:pointer; -webkit-user-select:none; user-select:none; padding-top:10px; padding-bottom:10px;
  transition:opacity .15s ease; -webkit-tap-highlight-color:transparent; }
.kr-tick.is-got{ opacity:.42; }
.kr-tick.is-got .kit-line-main, .kr-tick.is-got .kit-line-raw{ text-decoration:line-through;
  text-decoration-thickness:1.5px; }
.kr-tick:focus-visible{ outline:2px solid var(--th-mid, var(--accent)); outline-offset:2px; border-radius:6px; }
.kr-ing-head{ display:flex; align-items:center; justify-content:space-between; }
.kr-clear{ background:none; border:none; color:var(--text-dim); font:inherit; font-size:12px;
  letter-spacing:.04em; text-transform:none; cursor:pointer; padding:2px 4px; }
.kr-clear:hover{ color:var(--text); }
.kr-steps .kr-tick{ padding-top:2px; padding-bottom:2px; border-radius:6px; }
.kr-steps .kr-tick.is-got{ text-decoration:line-through; text-decoration-thickness:1.5px; }
/* FAMILY PLAN ROUND 2 — 14 October. "Share with family" on a recipe and the
   "Shared with family" switch on a board. Only ever drawn for somebody in a
   family: recipes.js and get-boards.js send the marks these read only then. */
.kit-fam-btn.is-on{ background:color-mix(in srgb, var(--pink) 18%, transparent);
  border-color:color-mix(in srgb, var(--pink) 50%, transparent); }
.kit-fam-tag{ align-self:center; white-space:nowrap; }