:root {
  /* The kitchen's own colours, by name: use these rather than typing a
     colour out, and give a new one a name here once it is used twice. */
  --brown:        #4f3a33;  /* the kitchen's lines, words and borders */
  --brown-soft:   #7a6a62;  /* words that step back: roles, notes, small headings */
  --brown-deep:   #3b2b25;  /* the cookbook's handwriting */
  --rust:         #a24f30;  /* the cookbook's headings and tab */
  --red-rule:     #e2a3a0;  /* the cookbook page's red rules */
  --divider:      #eadfd3;  /* the lines between rows in People and Settings */
  --butter:       #f4d58d;  /* the kitchen's yellow: focus rings, the go buttons */
  --butter-soft:  #f7df9f;  /* a yellow button, hovered */
  --cream:        #fdf6e3;  /* the cookbook's pages; a menu row, hovered */
  --paper:        #fbfaf6;  /* a tile or a white button, hovered */
  --board:        #3f4f47;  /* the specials board's slate */
  --chalk:        #f3efe4;  /* chalk on the board */
  --chalk-box:    #52645a;  /* something to press on the board */
  --chalk-box-pressed: #62756a;  /* ... pressed */
  --rose:         #f6d4cf;  /* recording, and something being taken out */
  --salmon:       #f6c7b8;  /* on the board: what is short or went wrong */
  --leaf:         #245c3c;  /* had, full: the green of a good answer */
  --sage:         #d3e5c4;  /* on a review: something new, or still there */
  --code:         #14161a;  /* the debug log's and the model's raw text, behind */
  /* The plainer colours of the forms, the admin's tables and the messages. */
  --bg:     #f6f6f4;
  --card:   #ffffff;
  --ink:    #1a1a1a;
  --muted:  #6b6b6b;
  --line:   #dcdcd6;
  --accent: #2f6f4e;
  --error:  #a33;
  --warn:   #8a6d1f;
}

/* ------------------------------------------- the page and its plain controls */
* { box-sizing: border-box; }

/* The chalkboard's lettering is a plainer hand, easier to read at a glance. */
@font-face { font-family: "Patrick Hand"; font-weight: 400; font-display: swap;
             src: url("fonts/patrick-hand.woff2") format("woff2"); }
/* A place's name, the cookbook's and the list's are lettered like the wordmark:
   Fraunces at its heaviest and softest, small optical size (fixed in the file,
   letters only). */
@font-face { font-family: "Nakiri Title"; font-weight: 400; font-display: swap;
             src: url("fonts/fraunces-soft-black.woff2") format("woff2"); }

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 720px;
  margin-inline: auto;
}

h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 10px; text-transform: uppercase;
     letter-spacing: .06em; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.row.wrap { flex-wrap: wrap; }
.row > input { flex: 1 1 120px; min-width: 0; }
.hidden { display: none !important; }
/* The icons' sprite (index.html): drawn once, used by reference, never
   shown itself -- and not display: none, which can keep a <use> from drawing. */
svg.icons { position: absolute; width: 0; height: 0; overflow: hidden; }

input, select, button {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
/* A box with sizes to suggest (a <datalist>: "can", "5 lb bag") offers them
   as it is typed in, with no arrow: on a phone the arrow came and went and
   opened nothing. A rule each, since a browser drops a rule naming a part
   it doesn't know. */
input[list]::-webkit-calendar-picker-indicator { display: none !important; }
input[list]::-webkit-list-button { display: none !important; }

button { cursor: pointer; background: #f0f0ec; }
button:hover { background: #e6e6e0; }
.big { background: var(--accent); color: #fff; border-color: var(--accent);
       font-weight: 600; padding: 10px 18px; border: 1px solid var(--accent);
       border-radius: 6px; cursor: pointer; }
.big:hover { filter: brightness(1.08); }
button.big.recording { background: var(--error); border-color: var(--error); }
button.link { background: none; border: none; color: var(--muted);
              text-decoration: underline; padding: 2px 4px; font-size: 14px; }

.status  { color: var(--muted); font-size: 14px; }
.muted   { color: var(--muted); font-weight: 400; text-transform: none;
           letter-spacing: 0; }
/* an error line, unseen: what it says is said in the bubble at its button (setError) */
.error   { display: none; }
.warn    { color: var(--warn);  font-size: 14px; margin: 6px 0; }
.transcript { font-size: 15px; margin: 12px 0 6px; }

/* a line's drop button: a recipe's ingredients */
.act-drop { flex: 0 0 auto; margin-top: 4px; padding: 4px 9px; font-size: 13px;
            color: var(--error); }
.act-drop:hover { background: #f7dede; }
.act-why { color: var(--muted); font-size: 13px; }

/* rows: the shopping list's, and the editor's */
.item { display: flex; align-items: center; gap: 8px;
        padding: 7px 0; border-top: 1px solid var(--line); }
.item button { padding: 3px 9px; font-size: 14px; }
.empty { color: var(--muted); font-style: italic; }
.shop-name { flex: 1 1 auto; min-width: 0; }

/* --------------------- the menu's cards: developer options, People, Settings */
/* developer options: one switch a line, what it does underneath */
.dev-option { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; }
.dev-option input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; padding: 0;
                    accent-color: var(--brown); }
.dev-option small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
/* the last run's workings, moved here off the review's slate */
.dev-last { margin-top: 18px; }
.dev-last h3 { font-size: 14px; margin: 0 0 4px; color: var(--muted); font-weight: 600; }
.dev-last p.muted { margin: 0; font-size: 14px; }
.dev-last .k-debug { margin-top: 0; font-size: 13px; }

/* People and Settings, drawn the kitchen's way, as the item card and the first
   fill are: brown on white, the brown outline round every button and box, its
   title in plain words, the way to go on in the plus's yellow. */
:is(#people-card, #settings-card) { color: var(--brown); }
:is(#people-card, #settings-card) > h2 { margin: 14px 0 4px; font-size: 20px; font-weight: 700; color: var(--brown);
                    text-transform: none; letter-spacing: 0; }
.people-section { margin-top: 20px; }
.people-section:first-child { margin-top: 8px; }
.people-section h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--brown-soft); }
/* A title with an i beside it, which says what the section is for, in a
   bubble (.k-info-pop). */
.section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.section-head h3 { margin: 0; }
.info-btn { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%;
            border: 2px solid var(--brown-soft); background: none; color: var(--brown-soft); cursor: pointer;
            font: italic 700 14px/1 Georgia, serif; }
.info-btn:hover { background: #f4ede6; }
.info-btn[aria-expanded="true"] { background: var(--brown-soft); color: #fff; }
#people-card .item { gap: 10px; min-height: 52px; padding: 6px 0; border-top: 1.5px solid var(--divider); }
.people-name { font-weight: 700; overflow-wrap: anywhere; }
.people-role { flex: 0 0 auto; color: var(--brown-soft); font-size: 14px; font-weight: 600; text-transform: capitalize; }
.people-offers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.password-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.password-form .k-btn { margin-top: 2px; }
/* A link made to be handed on: an invite's, a password reset's. */
.link-box { margin: 0 0 12px; }
.link-box .row { margin-bottom: 4px; }
.link-box input { flex: 1 1 auto; min-width: 0; }
.link-box .k-btn { flex: 0 0 auto; }
#usage-reset h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--brown); }
:is(#people-card, #settings-card, .link-box) .hint { color: var(--brown-soft); font-size: 14px; }
/* An assistant's keys, under Settings: lines drawn as People's are, the name
   over what the key may do, taking the room the Revoke beside them leaves. */
:is(#assistant-keys, #sign-ins) .item { gap: 10px; min-height: 52px; padding: 6px 0; border-top: 1.5px solid var(--divider); }
.assistant-about { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.assistant-may { color: var(--brown-soft); font-size: 14px; font-weight: 600; }
/* What assistants changed: a line a change, which and when small under it. */
#assistant-log h4 { margin: 18px 0 4px; }
.assistant-change { display: flex; flex-direction: column; gap: 2px; padding: 6px 0;
                    border-top: 1.5px solid var(--divider); overflow-wrap: anywhere; }
.assistant-change small { color: var(--brown-soft); font-size: 13px; font-weight: 600; }
/* A tick box and what it says, under Settings: an assistant's "Let it make
   changes", a push's switch. */
.tick-line { display: flex; align-items: center; gap: 8px; margin: 0; }
#settings-card .tick-line input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
                                  accent-color: var(--brown); }
#pushes .tick-line { min-height: 44px; border-top: 1.5px solid var(--divider); }

#debug { background: var(--code); color: #d8dee9; padding: 10px; border-radius: 6px;
         font: 12px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
         max-height: 320px; overflow: auto; white-space: pre-wrap;
         word-break: break-word; margin: 0; }

/* ------------------------------------------------------ the gate: signing in */
#gate { max-width: 360px; margin: 12vh auto 0; padding: 22px 20px 18px; background: #fff; color: var(--brown);
        border: 3px solid var(--brown); border-radius: 22px; box-shadow: 0 6px 0 rgb(79 58 51 / .3); }
/* Behind it, the icon's shelves on its cream, faint, over the whole screen. */
#gate::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #f8efe3 url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='.13'%3E\
%3Crect x='6' width='8' height='240' fill='%238a5a3b'/%3E\
%3Crect y='104' width='240' height='8' fill='%238a5a3b'/%3E%3Crect y='224' width='240' height='8' fill='%238a5a3b'/%3E\
%3Crect x='32' y='44' width='40' height='60' rx='4' fill='%239dbf98'/%3E\
%3Crect x='86' y='66' width='32' height='38' rx='6' fill='%23d7775a'/%3E%3Crect x='88' y='57' width='28' height='11' rx='3' fill='%23c0643f'/%3E\
%3Crect x='134' y='70' width='30' height='34' rx='4' fill='%235f88aa'/%3E%3Crect x='170' y='70' width='30' height='34' rx='4' fill='%235f88aa'/%3E\
%3Cpath d='M36 224 L40 168 Q60 161 80 168 L84 224 Z' fill='%23ddb043'/%3E\
%3Crect x='106' y='186' width='24' height='38' rx='4' fill='%234e9a4b'/%3E%3Ccircle cx='118' cy='205' r='6' fill='%238cc58a'/%3E\
%3Crect x='136' y='186' width='24' height='38' rx='4' fill='%234e9a4b'/%3E%3Ccircle cx='148' cy='205' r='6' fill='%238cc58a'/%3E\
%3Crect x='166' y='186' width='24' height='38' rx='4' fill='%234e9a4b'/%3E%3Ccircle cx='178' cy='205' r='6' fill='%238cc58a'/%3E\
%3C/g%3E%3C/svg%3E"); }
.gate-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gate-brand img { width: 72px; height: 72px; }
/* the name as drawn (art/wordmark.png), at a size for each place it heads */
.wordmark { display: block; max-width: 100%; height: auto; }
#gate h1 .wordmark { width: 190px; height: auto; margin: 2px auto 0; }
#gate h1 { font-size: 30px; font-weight: 600; color: var(--brown); }
/* The tagline, in an italic serif: dressed up, but easy to read. */
.gate-tagline { margin: 10px 0 0; text-align: center; font: italic 400 20px/1.4 Georgia, "Iowan Old Style", Palatino, serif; color: #6b4636; }
#gate form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#gate input { padding: 11px 12px; border: 2px solid var(--brown); border-radius: 12px; color: var(--brown); }
#gate input::placeholder { color: #9a8a82; }
#gate input:focus { outline: none; box-shadow: 0 0 0 3px var(--butter); }
#gate .k-btn { margin-top: 4px; }
#gate .hint { margin: 0 0 4px; color: var(--brown-soft); font-size: 14px; }
#gate button.link { color: var(--brown-soft); }
/* Continue with Google or Apple (server/routes/sso.py): side by side, each its
   maker's logo on its maker's colours -- Google's white, Apple's black --
   the words in its label for screen readers. Apple, until it's set up, is a
   grey placeholder saying "soon". Then what continuing agrees to, on one
   line, then "or" over the username and password. */
.sso { display: flex; flex-direction: column; gap: 8px; }
.sso-row { display: flex; gap: 10px; }
.sso-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
           height: 40px; box-sizing: border-box; border-radius: 12px; text-decoration: none; }
.sso-btn img { width: 18px; height: 18px; flex: none; }
.sso-google { background: #fff; border: 1px solid #747775; }
.sso-google:hover { background: #f8f6f4; }
.sso-apple { background: #000; border: 1px solid #000; }
.sso-apple img { width: 15px; height: 18px; margin-top: -2px; }
.sso-soon { background: #cfc5bb; border-color: #cfc5bb; cursor: default; }
.sso-soon::after { content: "soon"; font-size: 12px; font-weight: 600; color: #fff; }
.sso-agree { margin: 0; font-size: 12px; line-height: 1.4; color: var(--brown-soft); text-align: center; }
.sso-agree a { color: inherit; }
.sso-or { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font-size: 13px;
          color: #9a8a82; }
.sso-or::before, .sso-or::after { content: ""; flex: 1; border-top: 1.5px solid var(--divider); }
/* In the app the keyboard covers the page's foot rather than shrinking it
   (docs/mobile.md), so the fields under the one being typed in would be out
   of reach: while one is, room under the gate lets it scroll up above the
   keyboard. */
.in-app #gate:focus-within { margin-bottom: 60vh; }
#gate .sso { margin-top: 16px; }
#gate .sso + form { margin-top: 10px; }
/* Signing up: Create my account agrees to the terms and privacy policy, said
   just under it, with who Nakiri is for. */
#gate .gate-agree { margin: 0; font-size: 13px; color: var(--brown-soft); }
#gate .gate-agree a { color: inherit; }

/* Privacy, terms and support, under the gate and at the foot of Settings. */
.page-links { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--brown-soft); }
.page-links a { color: inherit; }

/* --------------------------------------- the model's workings, for the admin */
.stage { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 14px 0; }
.stage-meta { color: var(--muted); font-size: 12px;
              font-variant-numeric: tabular-nums; }
.stage details { margin-top: 6px; }
.stage summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.stage pre { background: var(--code); color: #d8dee9; padding: 9px; border-radius: 6px;
             font: 11px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace;
             max-height: 220px; overflow: auto; white-space: pre-wrap;
             word-break: break-word; margin: 6px 0 0; }

/* ---------------------------------------------------------- category colours */
/* Categories are never named on screen. A run of like things wears a strip of
   colour down each tile's left edge -- enough to see where one stops and to
   learn a colour by sight, not enough to read as a heading.

   The palette stays out of the app's colour vocabulary on purpose: green means
   add / high stock, red means remove / low / delete, and amber means medium, so
   none of those hues appear here -- the whole palette sits in one safe arc from
   teal through blue and violet to plum, plus two browns.

   Every category has its OWN colour, and every one of the 120 pairs is at least
   78 apart (summed RGB). That matters more than it sounds: a run's neighbours
   depend on which categories happen to be stocked, so an assignment verified
   only against today's shelves is not verified at all. An earlier palette reused
   eight colours across the categories and had two pairs that were byte-identical
   -- fine in the arrangement I checked, wrong as soon as what sat between them
   ran out. A floor across ALL pairs cannot be broken by a shopping trip.

   The leftover run at the bottom is not a group of anything and stays
   uncoloured.

   Each colour is a --cat on its data-category, which the kitchen's tiles wear
   (see .k-tile). */

[data-category="produce"]        { --cat: #a86ba0; }
[data-category="meat-seafood"]   { --cat: #744459; }
[data-category="dairy-eggs"]     { --cat: #5354c1; }
[data-category="bread-bakery"]   { --cat: #a88a6b; }
[data-category="prepared-meals"] { --cat: #4191b4; }
[data-category="leftovers"]      { --cat: #833187; }
[data-category="pasta-grains"]   { --cat: #318087; }
[data-category="canned-jarred"]  { --cat: #b46f41; }
[data-category="beans-legumes"]  { --cat: #9741b4; }
[data-category="oils-sauces-condiments"] { --cat: #445874; }
[data-category="baking"]         { --cat: #3e399d; }
[data-category="breakfast"]      { --cat: #875c31; }
[data-category="nuts-seeds"]     { --cat: #c15382; }
[data-category="snacks-sweets"]  { --cat: #6b78a8; }
[data-category="non-alcoholic"]  { --cat: #6abfbf; }
[data-category="alcohol"]        { --cat: #4f1d3c; }

.hint { color: var(--muted); font-size: 13px; margin: 2px 0 0; }

/* ---------------------------- the menu, Recently deleted, the admin's tables */
/* The menu: what is not the kitchen, on a white card that drops down from the
   round button on the kitchen wall, the way the book's menus do. setMenu()
   hangs it under the button. */
#app-menu { position: fixed; z-index: 25; display: flex;
            flex-direction: column; min-width: 190px; padding: 4px; background: #fff;
            border: 2px solid var(--brown); border-radius: 12px; box-shadow: 0 4px 0 rgb(79 58 51 / .25); }
#app-menu button { height: 42px; padding: 0 12px; text-align: left; background: none; border: none;
                   border-radius: 8px; color: var(--brown); font-size: 15px; font-weight: 700; }
#app-menu button:hover { background: var(--cream); }
#app-menu .k-danger { color: var(--error); }
/* What the menu opens: a window hung from the top of the page, over the
   kitchen rather than pushing it down, as tall as the screen allows and scrolling
   inside past that. Its X stays in the corner as it scrolls; no padding
   above it, where browsers differ on whether a sticky thing may go. */
.menu-cards { position: relative; z-index: 22; height: 0; }
.menu-card { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding-top: 0;
             max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
             border: 2px solid var(--brown); border-radius: 12px; box-shadow: 0 4px 0 rgb(79 58 51 / .25); }
.menu-card > .k-card-close { position: sticky; top: 8px; float: right; margin: 8px -6px 0 8px; }
.menu-card > h2 { margin-top: 14px; }

/* recently deleted: what it was, and under it where from and when */
.deleted-what { flex: 1 1 auto; min-width: 0; }
.deleted-what small { display: block; color: var(--muted); font-size: 12px; }
/* still in the kitchen at low, kept off the list: folded away above the rest */
.deleted-low summary { padding: 8px 0; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }

/* raw purchase log */
.table-scroll { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; font-size: 13px;
              font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: left; white-space: nowrap;
                                 padding: 5px 10px 5px 0;
                                 border-bottom: 1px solid var(--line); }
.data-table th { color: var(--muted); font-weight: 600; font-size: 11px;
                 text-transform: uppercase; letter-spacing: .04em; }
.data-table tr:last-child td { border-bottom: none; }

/* all calls: a heading is a button that opens its column's filter under it */
.calls-table th button.link { padding: 0; font: inherit; letter-spacing: inherit;
                              text-transform: inherit; }
.calls-table th.filtered button.link { color: var(--accent); }
.calls-table thead tr:last-child td { border-bottom: 1px solid var(--line); }
.calls-table thead td { font-size: 13px; color: var(--muted); }
/* Under it, what each kind of call is: its name, then what it does. */
.calls-key { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.calls-key dt { font-weight: 700; }
.calls-key dd { margin: 0; color: var(--muted); }
.calls-filter { padding: 3px 6px; font-size: 13px; min-width: 0; }
input.calls-filter { width: 6em; }
select.calls-filter { max-width: 12em; }

/* usage: one tbody per kitchen, with a firmer line between them */
.usage-table tbody tr:last-child td,
.usage-table td[rowspan] { border-bottom: 2px solid var(--line); }
.usage-table td[rowspan] { vertical-align: top; }
.usage-table tfoot tr:last-child td { font-weight: 600; }
.usage-table button.link { padding: 0; font-size: 13px; }
.usage-table button.usage-delete { color: var(--error); }
.usage-table .usage-gone { color: var(--muted); }
/* Invited: the count is a link; tapped, the names drop down under it. */
.usage-invitees summary { cursor: pointer; color: var(--accent); text-decoration: underline; }
.usage-invitees ul { margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.usage-invitees li { white-space: nowrap; }

/* --------------------------------------------------------------- the kitchen */
/* home: the kitchen fills the width, or the screen's height -- there is no
   header; its menu is on the wall -- whichever runs out first. The frame is the wrap's, so it stays put
   while the drawing zooms inside it. Lines keep their weight at any zoom. */
.kitchen-wrap { position: relative; margin: 0 auto; min-width: 192px;
                width: min(100%, calc((100vh - 38px) * 360 / 670 + 6px));
                width: min(100%, calc((100dvh - 38px) * 360 / 670 + 6px));
                border: 3px solid var(--brown); border-radius: 22px; overflow: hidden;
                background: #d7d7df; container-type: inline-size; }
/* the white round it, with the specials board up: a tap there puts it back up
   (kitchenTap() in kitchen.js) -- pointers, so a phone's Safari hears it too. No
   tap box: Android would paint the whole screen blue under the tap. */
html:has(.k-chalkboard.k-turned), html:has(.k-chalkboard.k-turned) :is(body, #home) { cursor: pointer; }
html:has(.k-chalkboard.k-turned) { -webkit-tap-highlight-color: transparent; }
#app, .kitchen-wrap { cursor: auto; }
.kitchen { display: block; width: 100%; aspect-ratio: 360 / 670;
           -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.kitchen * { vector-effect: non-scaling-stroke; }
.kitchen [data-location] { cursor: pointer; outline: none; }
.kitchen [data-location]:focus-visible { outline: 3px solid var(--accent); }
.kitchen.k-open [data-location] { cursor: default; }
/* The wall's buttons. The plus's two ways of adding sit tucked behind it, and
   drop down to their places under it when it is pressed, the plus turning to a
   cross. */
.kitchen [data-action] { cursor: pointer; outline: none; }
.kitchen [data-action]:focus-visible { outline: 3px solid var(--accent); }
.k-add-sign { transform-box: fill-box; transform-origin: center; transition: transform .25s ease; }
.kitchen.k-adding .k-add-sign { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .k-add-sign { transition: none; } }
.k-option { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center;
            transform: translateY(var(--from)) scale(.3);
            transition: transform .3s cubic-bezier(.3, 1.35, .5, 1), opacity .15s; }
.kitchen.k-adding .k-option { opacity: 1; pointer-events: auto; transform: none; }
.kitchen.k-adding .k-option:nth-child(2) { transition-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .k-option { transition: none; } }
/* The wall's microphone listens on the slate (wallMic() in kitchen.js), and fades
   in and out behind it while what it heard is read. */
#k-voice.k-reading { animation: k-reading .8s ease-in-out infinite alternate; }
@keyframes k-reading { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #k-voice.k-reading { animation: none; opacity: .6; } }
/* The chef's hat, for an ask out while the board is up (chefHat() in specials.js):
   steam rising off it and the hat rocking while they cook; once they're done,
   a badge popping up on it -- how many ideas, or ! -- and the hat hopping now
   and then until the board comes down. Still, it is the badge alone. Not by
   its id: the copy of the kitchen a room zooms out of has none (kitchenScene). */
[data-action="chef"]:not(.k-ready) .k-hat-badge { display: none; }
/* The steam, just after the hat, is always drawn, unseen but while they
   cook: the hat's class sets it going, as it sets the hat rocking, with no
   display: none round it, and it fades by stroke-opacity, a plain repaint. On
   an iPhone the steam never showed while the hat rocked -- it was hidden by
   display, always animated, and faded by opacity, and those were the
   differences. */
.k-hat-steam path { stroke-opacity: 0; }
[data-action="chef"].k-cooking + .k-hat-steam path { animation: k-hat-steam 1.8s ease-out infinite; }
[data-action="chef"].k-cooking + .k-hat-steam path:nth-child(2) { animation-delay: .6s; }
[data-action="chef"].k-cooking + .k-hat-steam path:nth-child(3) { animation-delay: 1.2s; }
@keyframes k-hat-steam { 0% { stroke-opacity: 0; transform: translateY(6px); } 35% { stroke-opacity: 1; }
                         100% { stroke-opacity: 0; transform: translateY(-8px); } }
.k-hat { transform-box: fill-box; transform-origin: 50% 100%; }
.k-hat-badge { transform-box: fill-box; transform-origin: center; }
[data-action="chef"].k-cooking .k-hat { animation: k-hat-rock 1.1s ease-in-out infinite alternate; }
@keyframes k-hat-rock { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
[data-action="chef"].k-ready .k-hat { animation: k-hat-hop 2.8s ease-out .4s infinite; }
@keyframes k-hat-hop { 0%, 12%, 100% { transform: none; } 5% { transform: translateY(-5px); } 9% { transform: translateY(-2px); } }
[data-action="chef"].k-ready .k-hat-badge { animation: k-badge-in .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes k-badge-in { from { transform: scale(0); } }
.k-hat-badge text { font: 700 13.5px system-ui, -apple-system, "Segoe UI", sans-serif; }
/* With Reduce Motion on -- an iPhone's Accessibility setting -- nothing moves,
   but the steam still fades in and out in turn where it is, so cooking shows. */
@media (prefers-reduced-motion: reduce) {
  [data-action="chef"].k-cooking + .k-hat-steam path { animation-name: k-hat-steam-still; }
  [data-action="chef"].k-cooking .k-hat, [data-action="chef"].k-ready .k-hat, [data-action="chef"].k-ready .k-hat-badge { animation: none; }
}
@keyframes k-hat-steam-still { 0%, 100% { stroke-opacity: .1; } 40% { stroke-opacity: 1; } }
/* The owl (owlWave() and owlTakesNotes() in kitchen.js). At rest his eyes are shut in a smile
   and his quill wing folded in across him, the wing drawn pointing out turned
   over (scale -1). Tapped, his eyes open and that wing swings out -- turning
   back over as a door swings -- and waves about its shoulder, the quill
   turning back against it so it stays upright. Folded, the wing hides the
   quill's grip behind it; turned over, it holds the quill in front of it: the
   copy drawn over the wing (.k-owl-quill-front) shows in place of the quill
   while the wing is turned, from when it passes edge-on, 10% into the wave,
   to 90%. While the wall's microphone
   listens, his eyes are open and that wing writes. Each turns about its own origin, set in the
   drawing: the shoulder, and the grip at the wing's tip. */
.kitchen:not(.k-night) .k-owl-nightcap { display: none; }
.k-owl-tag { font-family: "Patrick Hand", cursive; }  /* his name, in the hand his notepad is lettered in */
.k-owl-wing, .k-owl-quill, .k-owl-quill-front, .k-owl-quill-behind { transform-box: view-box; transform-origin: 0 0; }
.k-owl-wing { transform: scale(-1, 1) rotate(-40deg); }
.k-owl-quill, .k-owl-quill-front { transform: rotate(40deg); }
.k-owl-quill-front, .k-owl-quill-behind { opacity: 0; }
.k-owl:is(.k-waving, .k-listening) .k-owl-blink { visibility: hidden; }
.k-owl.k-waving .k-owl-wing { animation: k-owl-wave 1.8s ease-in-out; }
.k-owl.k-waving .k-owl-quill { animation: k-owl-quill 1.8s ease-in-out, k-owl-quill-back 1.8s step-end; }
.k-owl.k-waving:not(.k-chef) .k-owl-quill-front {
  animation: k-owl-quill 1.8s ease-in-out, k-owl-quill-turned 1.8s step-end; }
/* Listening, he writes, as he is drawn taking notes: the pad held low in
   front of him, larger and tipped, the quill wing out at his side with the
   quill held up in it, its feather clear of his face and its nib behind the
   pad (.k-owl-quill-behind, drawn under it), writing on its far side. Then
   the wing goes along a line of the pad and back to the start of the next,
   the quill scribbling the letters as it goes. With the board down he takes the order so, his chef's hat on, the
   whisk and knife put by. */
.k-owl-notes { transform-box: view-box; transform-origin: 186px 556px; transition: transform .25s ease-out; }
.k-owl.k-listening:not(.k-waving) .k-owl-notes { transform: translate(-14px, 9px) scale(1.3) rotate(-8deg); }
.k-owl.k-listening:not(.k-waving) .k-owl-wing { transform: translate(-12px, -4px) scale(-1, 1) rotate(-30deg);
                                                animation: k-owl-write 1.6s ease-in-out infinite; }
.k-owl.k-listening:not(.k-waving) .k-owl-quill { opacity: 0; }
.k-owl.k-listening:not(.k-waving) .k-owl-quill-behind { opacity: 1; transform: rotate(42deg) scale(1.35);
                                                        animation: k-owl-scribble .2s ease-in-out infinite alternate; }
.k-owl.k-chef.k-listening:not(.k-waving) .k-owl-notes { opacity: 1; }
.k-owl.k-chef.k-listening :is(.k-owl-whisk, .k-owl-knife) { opacity: 0; }
@keyframes k-owl-wave { 0%, 100% { transform: scale(-1, 1) rotate(-40deg); }
                        20%, 50%, 80% { transform: scale(1, 1) rotate(55deg); }
                        35%, 65% { transform: scale(1, 1) rotate(30deg); } }
@keyframes k-owl-quill { 0%, 100% { transform: rotate(40deg); } 20%, 50%, 80% { transform: rotate(-40deg); }
                         35%, 65% { transform: rotate(-15deg); } }
@keyframes k-owl-quill-back { 0%, 90%, 100% { opacity: 1; } 10% { opacity: 0; } }
@keyframes k-owl-quill-turned { 0%, 90%, 100% { opacity: 0; } 10% { opacity: 1; } }
@keyframes k-owl-write { 0%, 100% { transform: translate(-12px, -4px) scale(-1, 1) rotate(-30deg); }
                         75% { transform: translate(-12px, -4px) scale(-1, 1) rotate(-20deg); } }
@keyframes k-owl-scribble { from { transform: rotate(37deg) scale(1.35); } to { transform: rotate(47deg) scale(1.35); } }
/* With the chalkboard down he is the chef's (owlChef() in kitchen.js): his
   chef's hat on in place of his nightcap, a whisk held up at his side in
   place of his quill, and in his other wing, out at that side, a knife, the
   pad put by. Getting there, in the time the board takes to come down: a
   shuffle, the pad put by, his wing up to his head as the nightcap comes off
   and the chef's hat goes on, then down with the whisk, the knife out with
   it (.k-chefing). Taken up, the same backwards (.k-unchef). */
.k-owl-figure { transform-box: view-box; transform-origin: 186px 580px; }
.k-owl-chef-hat, .k-owl-nightcap { transform-box: view-box; }
.k-owl-chef-hat, .k-owl-whisk { opacity: 0; }
.k-owl-whisk { transform: rotate(30deg) translate(0, -10px); }
.k-owl.k-chef :is(.k-owl-chef-hat, .k-owl-whisk) { opacity: 1; }
.k-owl.k-chef :is(.k-owl-nightcap, .k-owl-quill, .k-owl-notes) { opacity: 0; }
.k-owl.k-chef:not(.k-listening, .k-waving) .k-owl-wing { transform: translate(-14px, -4px) scale(-1, 1) rotate(-25deg); }
.k-owl-holder, .k-owl-chop, .k-owl-wrist, .k-owl-knife { transform-box: view-box; transform-origin: 0 0; }
.k-owl-knife { opacity: 0; transform: var(--knife-side); }
.k-owl.k-chef .k-owl-knife { opacity: 1; }
.k-owl.k-chef:not(.k-listening) .k-owl-holder { transform: var(--holder-side); }
.k-owl:is(.k-chefing, .k-unchef) :is(.k-owl-figure, .k-owl-chef-hat, .k-owl-nightcap, .k-owl-whisk, .k-owl-knife),
.k-owl:is(.k-chefing, .k-unchef):not(.k-listening, .k-waving) :is(.k-owl-wing, .k-owl-quill, .k-owl-notes),
.k-owl:is(.k-chefing, .k-unchef):not(.k-listening) .k-owl-holder {
  animation: var(--owl-chef-ms) ease-in-out both; }
.k-owl.k-unchef * { animation-direction: reverse !important; }
.k-owl:is(.k-chefing, .k-unchef) .k-owl-figure { animation-name: k-chef-shuffle; }
.k-owl:is(.k-chefing, .k-unchef) .k-owl-chef-hat { animation-name: k-chef-hat; }
.k-owl:is(.k-chefing, .k-unchef) .k-owl-nightcap { animation-name: k-chef-nightcap; }
.k-owl:is(.k-chefing, .k-unchef) .k-owl-whisk { animation-name: k-chef-whisk; }
.k-owl:is(.k-chefing, .k-unchef) .k-owl-knife { animation-name: k-chef-knife; }
.k-owl:is(.k-chefing, .k-unchef):not(.k-listening) .k-owl-holder { animation-name: k-chef-holder; }
.k-owl:is(.k-chefing, .k-unchef):not(.k-listening, .k-waving) .k-owl-wing { animation-name: k-chef-wing; }
.k-owl:is(.k-chefing, .k-unchef):not(.k-listening, .k-waving) .k-owl-quill { animation-name: k-chef-quill; }
.k-owl:is(.k-chefing, .k-unchef):not(.k-listening, .k-waving) .k-owl-notes { animation-name: k-chef-notes; }
@keyframes k-chef-shuffle { 0%, 20%, 40%, 100% { transform: translate(0, 0) rotate(0deg); }
                            10% { transform: translate(-2px, -2px) rotate(-4deg); }
                            30% { transform: translate(2px, -2px) rotate(4deg); }
                            85% { transform: translate(0, -2px) rotate(0deg); } }
@keyframes k-chef-notes { 0% { opacity: 1; transform: none; }
                          30%, 100% { opacity: 0; transform: translate(0, 4px) scale(.6); } }
@keyframes k-chef-wing { 0%, 22% { transform: translate(0, 0) scale(-1, 1) rotate(-40deg); }
                         45%, 55% { transform: translate(8px, -6px) scale(1, 1) rotate(95deg); }
                         100% { transform: translate(-14px, -4px) scale(-1, 1) rotate(-25deg); } }
@keyframes k-chef-quill { 0%, 22% { opacity: 1; transform: rotate(40deg); }
                          45% { opacity: 1; transform: rotate(-60deg); }
                          52%, 100% { opacity: 0; transform: rotate(-60deg); } }
@keyframes k-chef-whisk { 0%, 48% { opacity: 0; transform: rotate(-60deg) translate(0, -10px); }
                          55% { opacity: 1; transform: rotate(-60deg) translate(0, -10px); }
                          100% { opacity: 1; transform: rotate(30deg) translate(0, -10px); } }
@keyframes k-chef-knife { 0%, 48% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes k-chef-holder { 0%, 30% { transform: none; } 55%, 100% { transform: var(--holder-side); } }
@keyframes k-chef-nightcap { 0%, 42% { opacity: 1; transform: translate(0, 0); }
                             55%, 100% { opacity: 0; transform: translate(-2px, -8px); } }
@keyframes k-chef-hat { 0%, 45% { opacity: 0; transform: translate(0, -12px); }
                        62% { opacity: 1; transform: translate(0, 1.5px); }
                        72%, 100% { opacity: 1; transform: translate(0, 0); } }
/* While the chef cooks, the board down, he works till it is done
   (owlWhisks() in kitchen.js), by turns, putting down what he isn't using:
   - whisking: the bowl brought up in front of him, the knife put down and
     that wing holding the bowl, the whisk turned down into it, round and
     round in a circle small enough that its wires stay inside the bowl,
     dipping in behind its front wall (drawn again over it);
   - chopping (.k-chopping): the bowl put by, a board in its place, the whisk
     put down and that wing steadying the board, and the knife chopping --
     mostly his wrist, a little his shoulder -- each chop cutting what is
     under it in two, the halves flying off as the next comes along.
   Each wing and tool goes between where it is for one and for the other,
   and back to his side when he is done, in --owl-whisk-ms. The poses are
   named below: -side the chef's at rest, -bowl whisking, -chop chopping. */
.k-owl {
  --holder-side: translate(13px, 0); --knife-side: rotate(-92deg);
  --holder-bowl: translate(0, 8px) rotate(-25deg); --holder-chop: translate(15px, 6px);
  --knife-chop: rotate(15deg); --wing-steady: translate(-4px, 10px) scale(-1, 1) rotate(-58deg);
  --chop-ms: .6s;
}
.k-owl.k-chef :is(.k-owl-wing, .k-owl-whisk, .k-owl-holder, .k-owl-knife) {
  transition: transform var(--owl-whisk-ms, .4s) ease-in-out, opacity .3s; }
.k-owl-bowl, .k-owl-board { opacity: 0; transform: translate(0, 6px) scale(.8); transform-box: view-box;
                            transform-origin: 186px 576px; transition: opacity .3s, transform .3s ease-out; }
.k-owl.k-chef.k-whisking:not(.k-chopping) .k-owl-bowl, .k-owl.k-chef.k-chopping .k-owl-board {
  opacity: 1; transform: none; }
.k-owl.k-chef.k-whisking:not(.k-chopping, .k-listening, .k-waving) .k-owl-wing {
  transform: translate(1px, -1px) scale(-1, 1) rotate(11deg);
  animation: k-stir-wing .6s linear var(--owl-whisk-ms) infinite; }
.k-owl.k-chef.k-whisking:not(.k-chopping) .k-owl-whisk {
  transform: rotate(153deg) translate(0, 2px); animation: k-stir-whisk .6s linear var(--owl-whisk-ms) infinite; }
.k-owl.k-chef.k-whisking:not(.k-chopping, .k-listening) .k-owl-holder { transform: var(--holder-bowl); }
/* Put down: dropped from where he held it, gone as it falls. */
.k-owl.k-chef.k-whisking:not(.k-chopping) .k-owl-knife { opacity: 0; transform: translate(0, 12px) var(--knife-side); }
.k-owl.k-chef.k-chopping .k-owl-whisk { opacity: 0; transform: translate(0, 12px) rotate(30deg) translate(0, -10px); }
.k-owl.k-chef.k-chopping:not(.k-listening, .k-waving) .k-owl-wing { transform: var(--wing-steady); }
.k-owl.k-chef.k-chopping:not(.k-listening) .k-owl-holder { transform: var(--holder-chop); }
.k-owl.k-chef.k-chopping .k-owl-knife {  /* taken up again already turned to chop */
  transform: var(--knife-chop); transition: opacity .3s; }
.k-owl.k-chef.k-chopping:not(.k-listening) .k-owl-chop {
  animation: k-chop var(--chop-ms) ease-in var(--owl-whisk-ms) infinite; }
.k-owl.k-chef.k-chopping:not(.k-listening) .k-owl-wrist {
  animation: k-chop-wrist var(--chop-ms) ease-in var(--owl-whisk-ms) infinite; }
@keyframes k-stir-wing { 0%, 100% { transform: translate(1px, -1px) scale(-1, 1) rotate(11deg); }
                         25% { transform: translate(3px, 0) scale(-1, 1) rotate(12deg); }
                         50% { transform: translate(5px, -1px) scale(-1, 1) rotate(13deg); }
                         75% { transform: translate(3px, -2px) scale(-1, 1) rotate(12deg); } }
@keyframes k-stir-whisk { 0%, 100% { transform: rotate(153deg) translate(0, 2px); }
                          25%, 75% { transform: rotate(157deg) translate(0, 2px); }
                          50% { transform: rotate(161deg) translate(0, 2px); } }
/* A chop: down on the beat, the knife lifted between by the wrist. */
@keyframes k-chop { 0%, 100% { transform: none; animation-timing-function: ease-out; }
                    45% { transform: translate(0, -2px); animation-timing-function: ease-in; } }
@keyframes k-chop-wrist { 0%, 100% { transform: none; animation-timing-function: ease-out; }
                          45% { transform: rotate(-35deg); animation-timing-function: ease-in; } }
/* Each vegetable's turn under the knife, three chops long: dropped on to the
   board, cut on the chop that ends its first third, its halves flying apart,
   turning, as the next is dropped on. */
.k-owl :is(.k-owl-half-left, .k-owl-half-right) { opacity: 0; transform-box: fill-box; transform-origin: center; }
.k-owl.k-chef.k-chopping:not(.k-listening) .k-owl-half-left {
  animation: k-half-left calc(3 * var(--chop-ms)) linear infinite; }
.k-owl.k-chef.k-chopping:not(.k-listening) .k-owl-half-right {
  animation: k-half-right calc(3 * var(--chop-ms)) linear infinite; }
.k-owl.k-chef.k-chopping .k-owl-veg:nth-child(1) > * { animation-delay: var(--owl-whisk-ms); }
.k-owl.k-chef.k-chopping .k-owl-veg:nth-child(2) > * {
  animation-delay: calc(var(--owl-whisk-ms) + var(--chop-ms)); }
.k-owl.k-chef.k-chopping .k-owl-veg:nth-child(3) > * {
  animation-delay: calc(var(--owl-whisk-ms) + 2 * var(--chop-ms)); }
@keyframes k-half-left { 0% { opacity: 0; transform: translate(0, -8px); }
                         8%, 33.3% { opacity: 1; transform: none; }
                         42% { opacity: 1; transform: translate(-7px, -14px) rotate(-110deg); }
                         55%, 100% { opacity: 0; transform: translate(-13px, -2px) rotate(-230deg); } }
@keyframes k-half-right { 0% { opacity: 0; transform: translate(0, -8px); }
                          8%, 33.3% { opacity: 1; transform: none; }
                          42% { opacity: 1; transform: translate(8px, -15px) rotate(120deg); }
                          55%, 100% { opacity: 0; transform: translate(14px, -3px) rotate(240deg); } }
/* Still, with Reduce Motion: no wave, his eyes as they were, open while he
   listens; the chef's hat, whisk and knife simply there, and while the chef
   cooks, the whisk still in the bowl, or the knife still on the carrot,
   cut. */
@media (prefers-reduced-motion: reduce) {
  .k-owl :is(.k-owl-wing, .k-owl-quill, .k-owl-quill-front, .k-owl-quill-behind) { animation: none !important; }
  .k-owl :is(.k-owl-figure, .k-owl-chef-hat, .k-owl-nightcap, .k-owl-whisk, .k-owl-notes) { animation: none !important; }
  .k-owl :is(.k-owl-holder, .k-owl-chop, .k-owl-wrist, .k-owl-knife) { animation: none !important; }
  .k-owl :is(.k-owl-wing, .k-owl-whisk, .k-owl-holder, .k-owl-knife) { transition: none !important; }
  .k-owl :is(.k-owl-half-left, .k-owl-half-right) { animation: none !important; }
  .k-owl.k-chef.k-chopping .k-owl-veg:first-child > * { opacity: 1; }
  .k-owl.k-waving:not(.k-listening) .k-owl-blink { visibility: visible; }
}
/* What he hears goes on his notepad: the slate is cream paper ringed at the
   top and lettered by hand. While he listens and reads it is a small note
   just above him, its tail at him (owlPadPlace in kitchen.js), the kitchen
   not dimmed at all so he is seen writing: what to do, with no example, and
   its two buttons. The review that follows is high on the screen, the
   kitchen dimmed only a little. The look is shared with the notepad under
   a button (.k-pad-under), and with the first fill's (#k-fill), over him
   too. No microphone listens on the whole screen. */
#review-card:is(.k-owl-pad, .k-pad-under) { align-items: flex-start; padding-top: 10vh; background: rgb(79 58 51 / .12); }
#review-card:is(.k-owl-pad, .k-pad-under) .k-slate, #k-fill { max-width: 380px; padding-top: 30px; background:
  radial-gradient(circle, var(--cream) 0 2.5px, var(--brown) 3px 5px, transparent 5.5px) 0 6px / 22px 16px space no-repeat,
  var(--cream); }
#review-card:is(.k-owl-pad, .k-pad-under) :is(h3, #listening-say, .k-heard),
#k-fill :is(h3, p) { font-family: "Patrick Hand", cursive; }
#review-card:is(.k-owl-pad, .k-pad-under) h3 { font-size: 26px; font-weight: 400; }
:is(#review-card:is(.k-owl-pad, .k-pad-under), #k-fill) .k-slate-actions { background: transparent; }
#review-card:is(.k-owl-pad, .k-pad-under):has(#listening:not(.hidden), #reading:not(.hidden)) { background: none; }
#review-card.k-owl-pad .k-slate:has(#listening:not(.hidden), #reading:not(.hidden)), #k-fill {
  position: fixed; left: var(--pad-left); bottom: var(--pad-bottom); width: var(--pad-width);
  max-height: calc(100% - var(--pad-bottom) - 8px); overflow: visible; padding: 24px 12px 10px;
  border-radius: 16px; transform-origin: var(--pad-tip) 100%; }
#review-card.k-owl-pad .k-slate:has(#listening:not(.hidden), #reading:not(.hidden))::after, #k-fill::after {
  content: ""; position: absolute; left: calc(var(--pad-tip) - 9px); bottom: -11px; width: 16px; height: 16px;
  background: var(--cream); border: solid var(--brown); border-width: 0 3px 3px 0; transform: rotate(45deg); }
#review-card:is(.k-owl-pad, .k-pad-under) :is(#listening, #reading) h3, #k-fill h3 { font-size: 22px; font-weight: 400; }
#review-card:is(.k-owl-pad, .k-pad-under) #listening-say,
#fill-text { margin: 2px 0 0; font-size: 17px; line-height: 21px; }
#review-card:is(.k-owl-pad, .k-pad-under) #listening-example { display: none; }
:is(#review-card:is(.k-owl-pad, .k-pad-under) :is(#listening, #reading), #k-fill) .k-slate-actions {
  position: static; margin-top: 8px; padding-top: 0; gap: 8px; }
:is(#review-card:is(.k-owl-pad, .k-pad-under) :is(#listening, #reading), #k-fill) .k-btn {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 4px 8px; font-size: 15px; }
/* The same notepad listening, then reading, under a button -- the one a
   microphone names (padUnder in kitchen.js) -- its tail up at it. */
#review-card.k-pad-under .k-slate:has(#listening:not(.hidden), #reading:not(.hidden)) {
  position: fixed; left: var(--pad-left); top: var(--pad-top); width: var(--pad-width);
  max-height: calc(100% - var(--pad-top) - 8px); overflow: visible; padding: 24px 12px 10px;
  border-radius: 16px; transform-origin: var(--pad-tip) 0; }
#review-card.k-pad-under .k-slate:has(#listening:not(.hidden), #reading:not(.hidden))::after {
  content: ""; position: absolute; left: calc(var(--pad-tip) - 9px); top: -11px; width: 16px; height: 16px;
  background: var(--cream); border: solid var(--brown); border-width: 3px 0 0 3px; transform: rotate(45deg); }
/* A bubble under a button, its tip (--tip) at the button: search's -- the
   kitchen's, and the book's under its magnifier (underButton) -- and what
   went wrong, at any button (#k-flash). Over the button (.k-over), its tip
   points down at it. */
.k-bubble { position: absolute; z-index: 2; margin: 0; padding: 8px 12px; border: 2.5px solid var(--brown);
            border-radius: 14px; background: #fff; color: var(--brown); box-shadow: 0 4px 0 rgb(79 58 51 / .25);
            animation: k-pop .2s ease-out; }
.k-bubble::before { content: ""; position: absolute; top: -8px; left: calc(var(--tip, 50%) - 7px);
                    width: 11px; height: 11px; background: #fff; border: solid var(--brown);
                    border-width: 2.5px 0 0 2.5px; transform: rotate(45deg); }
.k-bubble.k-over::before { top: auto; bottom: -8px; border-width: 0 2.5px 2.5px 0; }
/* What a button is for, small, under it (boardTips()), in the room the board
   keeps under each, or a line over it (wallTips()). Sized by the kitchen's
   width (cqi), as its buttons are, so they fit on any screen. */
.k-tip { width: max-content; max-width: 25cqi; padding: min(3px, .8cqi) min(7px, 2cqi); border-width: 2px;
         border-radius: 10px; font-size: min(11px, 3.05cqi); font-weight: 700; line-height: 1.2; text-align: center;
         box-shadow: 0 2px 0 rgb(79 58 51 / .25); }
:is(#tip-use, #tip-choice) { max-width: 26cqi; }  /* and no wider than the room beside Special request (tipsBeside) */
#tip-talk { max-width: 44cqi; }  /* as wide as Special request, between the other two */
.k-tip::before { top: -6px; width: 8px; height: 8px; left: calc(var(--tip, 50%) - 5px); border-width: 2px 0 0 2px; }
.k-tip.k-over::before { z-index: -1; top: auto; bottom: -6px; border-width: 0 2px 2px 0; }  /* under its words */
:is(#tip-add, #tip-make, #tip-save, #tip-list) { max-width: none; white-space: nowrap; }
/* What went wrong, or was just done, at the button it is about (flash() in
   core.js): a bubble over everything, its tip up at the button from under it
   -- or down at it from over it (.k-over) -- fading as it goes. */
#k-flash { position: fixed; z-index: 1002; width: max-content; max-width: min(260px, calc(100vw - 16px));
           font-size: 14px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: opacity .2s; }
#k-flash.k-going { opacity: 0; }
/* a bubble beside the button that asked for it (showBeside), its tip at the
   button's middle (--tip) -- on its left edge or its right: a photo's
   (pickPhoto), Take a picture or Upload a photo, small; a list typed in
   (typeList), its box and Add */
.k-beside { position: fixed; z-index: 26; width: max-content; padding: 8px; display: flex;
            flex-direction: column; gap: 6px; }
.k-beside::before { top: calc(var(--tip, 50%) - 7px); }
.k-photo-title { margin: 0 0 -2px; font-size: 14px; font-weight: 800; text-align: center; }
.k-beside.k-tip-left::before { left: -8px; border-width: 0 0 2.5px 2.5px; }
.k-beside.k-tip-right::before { left: auto; right: -8px; border-width: 2.5px 2.5px 0 0; }
#list-type { width: min(260px, calc(100vw - 90px)); padding: 10px; }
#list-type textarea { min-height: 72px; border: 2px solid var(--brown); border-radius: 10px; color: var(--brown); }
#list-type textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--butter); }
#list-type .k-go { align-self: flex-end; min-width: 84px; }
.k-photo-way { display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 12px 3px 6px;
               border: 2px solid var(--brown); border-radius: 999px; background: #fff; color: var(--brown);
               font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: 0 2px 0 rgb(79 58 51 / .25);
               cursor: pointer; }
.k-photo-way:hover { background: var(--paper); }
.k-photo-way svg { flex: none; width: 26px; height: 26px; }
/* how long each chef takes, under the i on the specials board: a line each */
.k-who-pop { width: max-content; max-width: min(260px, calc(100% - 16px)); padding: 10px 14px; font-size: 15px;
             line-height: 1.35; }
.k-who-pop p { margin: 0; }
.k-who-pop p + p { margin-top: 6px; }
.k-who-info { cursor: pointer; }
.k-who-info:focus-visible { outline: 3px solid var(--butter); }
/* search: its box and microphone, then what it finds, scrolling in what is
   left of the kitchen under it */
.k-find { width: min(320px, calc(100% - 16px)); max-height: var(--room, 60vh); padding: 10px;
          display: flex; flex-direction: column; }
.k-find-ask { display: flex; align-items: center; gap: 8px; }
#search-text, #recipe-search-text { flex: 1 1 auto; min-width: 0; padding: 10px 12px; }
#recipe-search { z-index: 5; }  /* over the book's tabs and the plus */
.k-find .k-mic { flex: none; width: 46px; height: 46px; box-shadow: 0 3px 0 rgb(79 58 51 / .25); }
.k-find .k-mic svg { width: 30px; height: 30px; }
.k-find .k-status { margin-top: 6px; }
.k-find .k-status:empty { display: none; }
/* there for a screen reader, not the eye */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
           white-space: nowrap; }

/* -------------------------------------------------------- the specials board */
/* The wall's chalkboard (keepTime() in kitchen.js), in the cookbook's hand: its
   hello, or, turned over, its back (openSpecials()). */
.k-chalk { font-family: "Patrick Hand", cursive; font-weight: 400; fill: var(--chalk); }
.k-chalk-line { fill: none; stroke: var(--chalk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* something to press, a shade lighter than the slate and outlined; a box to
   write in, a shade darker, its words faint till written */
.k-chalk-edge { fill: var(--chalk-box); stroke: var(--chalk); stroke-opacity: .85; stroke-width: 2; }
[data-action]:active > .k-chalk-edge { fill: var(--chalk-box-pressed); }
/* an ask's picture, beside its words: lines a little finer than its box's, a
   part in front of another filled with the box's shade so it hides what is behind */
.k-board-pic .k-chalk-line { stroke-width: 1.5; }
.k-board-pic .k-chalk-cover { fill: var(--chalk-box); }
[data-action]:active > .k-board-pic .k-chalk-cover { fill: var(--chalk-box-pressed); }
.k-chalkboard:not(.k-turned) .k-board-back, .k-chalkboard.k-turned .k-board-front,
.k-chalkboard:not(.k-down) .k-board-offer { display: none; }
.k-chalkboard:not(.k-turned) { cursor: pointer; }
.k-chalkboard [data-action]:focus-visible { outline: 3px solid var(--butter); }
/* what it offers, down (specialsAction() in specials.js): its asks and who
   cooks; a bowl while they cook; their names; or a page of its own, with a
   way back at the top */
.k-chalkboard:not([data-specials="cooking"]) .k-board-cooking,
.k-chalkboard:not([data-specials="ready"]) .k-board-ready,
.k-chalkboard:not(:is([data-specials="recipe"], [data-specials="recent"], [data-specials="avoid"],
                      [data-specials="options"])) .k-board-paged,
.k-chalkboard:is([data-specials="cooking"], [data-specials="ready"], [data-specials="recipe"],
                 [data-specials="recent"], [data-specials="avoid"], [data-specials="options"]) .k-board-menu { display: none; }
.k-board-asked, .k-board-note, .k-board-request { opacity: .8; }
.k-board-who [data-action], .k-who-switch { cursor: pointer; }
/* The board's own pages (#k-board-page, syncPage() in specials.js), over its slate:
   chalk on it, in its hand -- a recipe whole, Make this always in reach under
   it, the recent ideas, the foods to avoid, or its options. A long one scrolls. */
.k-board-page { position: absolute; z-index: 1; display: flex; flex-direction: column; box-sizing: border-box;
                color: var(--chalk); font: 400 18px/1.3 "Patrick Hand", cursive; }
.k-board-page:not([data-page="recipe"]) .kb-recipe,
.k-board-page:not([data-page="recent"]) .kb-recent,
.k-board-page:not([data-page="avoid"]) .kb-avoid,
.k-board-page:not([data-page="options"]) .kb-options { display: none; }
.kb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 10px;
             scrollbar-width: thin; scrollbar-color: rgb(243 239 228 / .4) transparent; }
.k-board-page .kb-name { margin: 0 0 2px; color: inherit; font: 400 27px/1.15 "Patrick Hand", cursive;
                          text-transform: none; letter-spacing: 0; }
/* Not a fan? Report, small at the foot of the recipe, past its last step */
.kb-report { display: block; min-height: 0; margin: 16px auto 4px; padding: 1px 9px; border: 1.5px solid currentColor;
             border-radius: 999px; background: none; color: var(--chalk); box-shadow: none; opacity: .75;
             cursor: pointer; font: 400 14px/20px "Patrick Hand", cursive; }
.kb-report:disabled { opacity: .5; cursor: default; }
.k-board-page p { margin: 0 0 8px; }
.k-board-page p:empty { display: none; }
.kb-meta { opacity: .8; }
/* how many it serves, in chalk: − and + round it, the number in a box */
.k-board-page .k-serves { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.k-board-page .k-serves button { width: 26px; height: 26px; min-height: 0; padding: 0; border: 1.5px solid var(--chalk);
  border-radius: 50%; background: none; color: var(--chalk); box-shadow: none; font: 400 18px/1 "Patrick Hand", cursive; }
.k-board-page .k-serves button:disabled { opacity: .4; }
.k-board-page .k-serves input { width: 40px; height: 26px; box-sizing: border-box; margin: 0; padding: 0 2px;
  border: 1.5px solid var(--chalk); border-radius: 6px; background: none; color: var(--chalk); text-align: center;
  font: 400 18px "Patrick Hand", cursive; appearance: textfield; -moz-appearance: textfield; }
.k-board-page .k-serves input:focus { outline: none; border-color: var(--butter); }
.kb-summary { padding: 4px 10px; border: 1.5px solid; border-radius: 8px; }
.kb-summary.ok { color: #cfe6c7; }
.kb-summary.bad { color: var(--salmon); }
.kb-head { margin: 12px 0 4px; padding-bottom: 2px; border-bottom: 1.5px solid rgb(243 239 228 / .45);
           color: inherit; font: 400 21px "Patrick Hand", cursive; text-transform: none; letter-spacing: 0; }
.kb-lines { margin: 0; padding: 0; list-style: none; }
.kb-lines li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.kb-lines .k-amount { font-weight: 400; }
.kb-lines small { display: block; opacity: .75; font-size: 15px; line-height: 1.2; }
/* have, maybe, short, missing: each in its own chalk, what's to buy filled in */
.kb-chk { flex: none; min-width: 58px; padding: 0 6px; border: 1.5px solid; border-radius: 999px;
          font-size: 14px; line-height: 20px; text-align: center; }
.kb-have { color: #cfe6c7; }
.kb-maybe { color: var(--butter); }
.kb-short, .kb-missing { color: var(--board); background: var(--salmon); border-color: var(--salmon); }
.k-board-page .steps { margin: 0; padding-left: 26px; font-size: 18px; white-space: normal; }
.k-board-page .steps li { margin: 0 0 6px; }
.kb-foot { flex: none; padding-top: 8px; }
#kb-make { display: block; width: 100%; height: 46px; padding: 0; border: none; border-radius: 10px;
           background: var(--chalk); color: var(--board); box-shadow: none; cursor: pointer;
           font: 400 22px "Patrick Hand", cursive; }
#kb-make:active { background: #e3ddcd; }
#kb-make:disabled { opacity: .6; }
.k-board-page :focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; }
/* the foods to avoid: a box to write one in, then a food a line, its cross at the end */
.kb-row { display: flex; gap: 8px; margin: 6px 0 10px; }
.kb-row input { flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 0 12px;
                border: 1.5px solid rgb(243 239 228 / .5); border-radius: 8px; background: #33413a;
                color: var(--chalk); font: 400 18px "Patrick Hand", cursive; }
.kb-row input::placeholder { color: rgb(243 239 228 / .65); }
.kb-row input:focus { outline: none; border-color: var(--butter); }
.kb-row button { flex: none; height: 40px; min-height: 0; padding: 0 16px; border: none; border-radius: 8px;
                 background: var(--chalk); color: var(--board); box-shadow: none; font: 400 19px "Patrick Hand", cursive; }
.avoid-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0;
              border-bottom: 1px solid rgb(243 239 228 / .25); font-size: 19px; }
.k-board-page button.avoid-drop { flex: none; width: 30px; height: 30px; min-height: 0; padding: 0;
                                  border: 1.5px solid rgb(243 239 228 / .7); border-radius: 50%; background: none;
                                  color: var(--chalk); box-shadow: none; font-size: 18px; line-height: 1; }
.k-board-page .muted { opacity: .7; color: inherit; }
/* the recent ideas: under each ask's when and what, its names, each a chalk
   box as on the board, its minutes and whether it is in the cookbook under it */
.k-board-page button.recent-idea { display: block; width: 100%; min-height: 0; margin: 6px 0 0; padding: 7px 12px;
                                   border: 1.5px solid rgb(243 239 228 / .7); border-radius: 10px; background: none;
                                   color: var(--chalk); box-shadow: none; text-align: left; cursor: pointer;
                                   font: 400 19px/1.2 "Patrick Hand", cursive; }
.recent-idea small { display: block; opacity: .75; font-size: 15px; }
.recent-idea small:empty { display: none; }
/* its options: a choice a row of chips, as the meals are, the picked one chalked in solid */
.kb-chips { display: flex; gap: 8px; margin: 8px 0 10px; }
.k-board-page .kb-chips button { flex: 1 1 0; height: 40px; min-height: 0; padding: 0;
                                 border: 1.5px solid rgb(243 239 228 / .7); border-radius: 999px; background: none;
                                 color: var(--chalk); box-shadow: none; font: 400 20px "Patrick Hand", cursive; }
.k-board-page .kb-chips button[aria-checked="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--board); }
/* who's cooking, on its options page (setChef() in specials.js): the board's
   own drawing, as wide as the page; the chef not cooking faded, the head chef
   further, out for the day */
.kb-who { display: block; width: 100%; height: auto; margin: 4px 0 10px; overflow: visible; }
.k-who-head, .kb-who.k-head .k-who-sous { opacity: .45; }
.kb-who.k-head .k-who-head { opacity: 1; }
.kb-who.k-head-out .k-who-head { opacity: .2; }
.k-who-knob { transition: transform .15s; }
.kb-who.k-head .k-who-knob { transform: translateX(22px); }
.k-board-steam { animation: k-steam 1.6s ease-in-out infinite; }
@keyframes k-steam { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .k-board-steam { animation: none; } }
.k-back { display: none; }
.k-flipped .k-back { display: inline; }

/* ---------------------------- a place, opened: shelves, tiles, the item card */
/* The inside of an open spot. It grows out of the drawn opening until it fills
   the whole screen, whatever the screen's shape: the drawing's colours and
   line weights, stretched to fit rather than kept to the drawing's proportions. */
#kitchen-room { position: fixed; z-index: 20; display: flex; flex-direction: column;
                border: 3px solid var(--brown); border-radius: 22px; overflow: hidden; }
/* The drawing, zooming in over the shelves as it gives way to them. */
.kitchen.k-scene { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
                   aspect-ratio: auto; pointer-events: none; }
#kitchen-room.full { inset: 0; border-radius: 0; }
body.k-in { overflow: hidden; }
.k-shelves { flex: 1 1 auto; display: flex; flex-direction: column; }
.k-space { flex: 1 1 0; position: relative; }
.k-board { flex: 0 0 auto; }
#kitchen-room[data-location="freezer"] { background: #e2edf3; }
#kitchen-room[data-location="freezer"] .k-board { border-top: 2px solid #9db3c1; }
#kitchen-room[data-location="fridge"] { background: #f4f6f1; }
#kitchen-room[data-location="fridge"] .k-board { border-top: 3px solid #a9c3cf; }
#kitchen-room[data-location="spices"],
#kitchen-room[data-location="drinks"] { background: #8ea7bd; }
#kitchen-room[data-location="spices"] .k-board,
#kitchen-room[data-location="drinks"] .k-board { border-top: 2.5px solid var(--brown); }
#kitchen-room[data-location="pantry"] { background: #efe2cc; }
#kitchen-room[data-location="pantry"] .k-board { height: 10px; background: #b88d6a;
                                                 border-block: 2.5px solid var(--brown); }
#kitchen-bar { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px;
               display: flex; justify-content: space-between; align-items: center; }
/* the way back on the left, the place's name in the middle, and its stock
   refresh on the right -- the name still on the right while there is nothing
   in it to refresh */
#kitchen-bar > * { flex: 0 0 auto; }
/* Only on a place opened all the way (.full): not while the room zooms, in or
   out -- nor ever in the cookbook's or the list's zoom, which borrow the room
   -- fading in once it has landed. */
#kitchen-room:not(.full) #kitchen-bar { display: none; }
#kitchen-room.full #kitchen-bar { animation: k-bar-in .3s ease-out; }
@keyframes k-bar-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #kitchen-room.full #kitchen-bar { animation: none; } }
#kitchen-refresh { cursor: pointer; }

/* An open spot: a tile an item, standing on the shelves, scrolling when there
   are more than fit. Every row is the same height, so every row gets a board.
   The fridge keeps its crisper at the bottom, below the last shelf, with the
   produce in it: it grows to hold them, and stands empty when there are none. */
.k-shelves { min-height: 0; --row-pad: 6px; }
/* Room at the sides for the crisper's walls round tiles of the shelves' size. */
#kitchen-room[data-location="fridge"] .k-shelves { --row-pad: 12px; }
.k-shelves.k-stocked { overflow-y: auto; overscroll-behavior: contain; padding-top: 50px; }
#kitchen-room[data-location="fridge"] .k-stocked .k-space {
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 3px 10px; }
/* The crisper: a bin the tiles sit down in, shadowed under its rim, then the
   drawer's front with its handle. The space's 3px, the wall's 2 and the bin's
   padding add up to the rows' own padding, so its tiles stand in the shelves'
   columns at the shelves' size. Whole pixels: a 2.5px wall is drawn 2px wide
   on some screens, and the columns would slip by the difference. */
.k-crisper { border: 2px solid var(--brown); border-radius: 6px; overflow: hidden;
             background: #dce8e0; }
.k-crisper-bin { min-height: 56px; display: grid; gap: 8px; align-content: start;
                 grid-template-columns: repeat(var(--across), minmax(0, 1fr));
                 padding: 12px calc(var(--row-pad) - 5px) 10px;
                 box-shadow: inset 0 10px 8px -8px rgb(79 58 51 / .35); }
.k-crisper-front { height: 28px; display: flex; align-items: center; justify-content: center;
                   border-top: 2px solid var(--brown); background: #bcd3c4; }
.k-crisper-front i { width: 64px; height: 10px; border: 2px solid var(--brown); border-radius: 5px;
                     background: #9dbba9; }
.k-empty { grid-column: 1 / -1; align-self: end; margin: 0 4px 12px; color: var(--brown);
           font-style: italic; opacity: .75; }
/* An empty place asks what is in it, on a slate in the middle of its empty
   shelves -- once the room fills the screen, never while it zooms. */
#k-ask { position: absolute; z-index: 2; inset: 0; margin: auto; height: fit-content;
         width: min(340px, calc(100% - 32px)); padding: 16px; background: #fff; color: var(--brown);
         border: 3px solid var(--brown); border-radius: 22px; box-shadow: 0 6px 0 rgb(79 58 51 / .3);
         text-align: center; animation: k-pop .18s ease-out; }
#kitchen-room:not(.full) #k-ask { display: none; }
.k-ask-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#ask-text { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; }
#k-ask .k-listen { margin-bottom: 14px; }
/* the microphone in the middle, its keyboard beside it */
.k-ask-ways { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.k-ask-ways .k-mic { grid-column: 2; }
.k-ask-ways .k-keys { grid-column: 3; justify-self: start; margin-left: 18px; }
/* its keyboard pressed: the plus's form, the place already this one, and as
   the plus's card, its foot at the middle, so the keyboard comes up under it */
#k-ask.k-typing { inset: auto 0 50%; margin: 0 auto; width: min(380px, calc(100% - 24px));
                  padding: 12px 14px 14px; text-align: left; }
#k-ask.k-typing .k-ask-head { margin-bottom: 10px; }
#k-ask.k-typing :is(.k-listen, .k-typed, #ask-error), #k-ask:not(.k-typing) :is(#ask-close, .add-way),
#k-ask #add-places { display: none; }
.k-row { flex: 0 0 auto; height: 92px; padding: 0 var(--row-pad); display: grid; gap: 8px;
         grid-template-columns: repeat(var(--across), minmax(0, 1fr)); align-items: end; }
.k-tile { height: 70px; min-width: 0; display: flex; flex-direction: column;
          justify-content: space-between; align-items: flex-start; text-align: left;
          padding: 6px 8px 7px 11px; background: #fff; color: var(--brown);
          border: 2px solid var(--brown); border-radius: 8px; font-size: 13px; line-height: 1.2;
          box-shadow: inset 4px 0 0 var(--cat, transparent);
          -webkit-tap-highlight-color: transparent; }
.k-tile:hover { background: var(--paper); }
.k-tile.on { outline: 3px solid var(--accent); outline-offset: 1px; }
/* Two lines at the tile's size. A name that needs more shrinks to fit
   (fitNames); only past the floor is it cut short. */
.k-tile-name { width: 100%; height: 32px; flex: 0 0 auto; font-weight: 700; overflow: hidden; }
.k-tile-name.k-clamp { display: -webkit-box; -webkit-box-orient: vertical;
                       overflow-wrap: anywhere; }
.k-tile-qty { max-width: 100%; font-size: 12px; line-height: 1.4; color: var(--brown-soft); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* A level as a gauge: three bars, as many lit as it is full, in the level's
   own colour -- the list's green, amber and red. */
.k-gauge { display: flex; gap: 3px; }
.k-gauge i { width: 14px; height: 8px; border: 1.5px solid var(--brown); border-radius: 2px;
             background: #fff; }
.k-gauge[data-level="high"] i { background: #5fae7e; }
.k-gauge[data-level="medium"] i:nth-child(-n+2) { background: #e0b04a; }
.k-gauge[data-level="low"] i:first-child { background: #d06060; }

/* One item's card: the list row's controls, rising from the bottom. */
#k-sheet { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-height: 75%;
           overflow-y: auto; background: #fff; border-top: 2.5px solid var(--brown);
           border-radius: 16px 16px 0 0; padding: 12px 16px 18px;
           box-shadow: 0 -6px 18px rgba(0, 0, 0, .12); animation: k-rise .2s ease-out; }
@keyframes k-rise { from { transform: translateY(40px); opacity: 0; } }
.k-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.k-card-head h3 { flex: 1 1 auto; min-width: 0; margin: 4px 0 0; font-size: 18px; }
.k-card-close { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; background: #fff;
                color: var(--brown); border: 2px solid var(--brown); border-radius: 50%; font-size: 20px;
                line-height: 1; }
.k-card-count { display: flex; align-items: center; gap: 14px; }
.k-card-count button { width: 44px; height: 44px; padding: 0; font-size: 22px; }
.k-card-amount { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* on the shopping list or not, and the button that changes it */
.k-card-list { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px;
               font-weight: 600; color: var(--brown); }
.k-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
/* the day it came in, beside Edit, in the kitchen's own brown */
.k-card-added { font-size: 14px; font-weight: 600; color: var(--brown-soft); }
.k-card-actions .item-delete { margin-left: auto; color: var(--error); }
#k-sheet .item-edit { border-top: none; padding: 0; }
/* Its controls drawn the kitchen's way, as .k-btn and the plus's boxes are:
   white, a brown outline, a soft shadow under a button; Save in the plus's
   yellow, the less and more round. */
#k-sheet { color: var(--brown); }
#k-sheet button:not(.k-card-close, .level, .link, .e-category, .e-cat) {
  min-height: 42px; padding: 8px 14px; background: #fff; color: var(--brown);
  border: 2.5px solid var(--brown); border-radius: 14px; font-weight: 700;
  box-shadow: 0 3px 0 rgb(79 58 51 / .25); }
#k-sheet button:not(.k-card-close, .level, .link, .e-category, .e-cat):hover { background: var(--paper); filter: none; }
#k-sheet button:not(.k-card-close, .level, .link, .e-category, .e-cat):active {
  transform: translateY(2px); box-shadow: 0 1px 0 rgb(79 58 51 / .25); }
#k-sheet button:is(.edit-save, .level-save) { background: var(--butter); }
#k-sheet button:is(.edit-save, .level-save):hover { background: var(--butter-soft); }
#k-sheet button.item-delete { color: var(--error); }
#k-sheet .k-card-count button { width: 46px; height: 46px; padding: 0; border-radius: 50%;
                                font-size: 22px; line-height: 1; }
#k-sheet button.link { color: var(--brown-soft); font-weight: 600; }
#k-sheet :is(input:not([type=checkbox]), select) {
  min-height: 44px; border: 2px solid var(--brown); border-radius: 12px; background: #fff; color: var(--brown); }
#k-sheet :is(input, select):focus { outline: none; box-shadow: 0 0 0 3px var(--butter); }
#k-sheet .levels { border: 2px solid var(--brown); border-radius: 12px; }
#k-sheet .levels .level { padding: 8px 14px; font-size: 14px; }
#k-sheet .levels.open .level:not(.on) { color: var(--brown-soft); }
#k-sheet :is(.item-delete, .level-save, .link) { text-transform: capitalize; }  /* one word each */
#k-sheet .levels .level + .level { border-left: 2px solid transparent; }  /* open or not, the same box */
#k-sheet .levels.open .level + .level { border-left-color: var(--brown); }
#k-sheet .levels .level.on { font-weight: 700; }
#k-sheet .track-toggle { font-size: 14px; color: var(--brown-soft); }
#k-sheet .track-toggle input { width: 18px; height: 18px; accent-color: var(--brown); }
#k-sheet .item-edit .row { gap: 8px; margin-bottom: 10px; }
#k-sheet .edit-actions { margin-top: 14px; }
/* What it is (categoryPicker): a button drawn as the place's box beside it is,
   its picture in its colour; tapped, a grid under that line of every category
   to pick from, each one's picture and outline in its colour and its name small
   under it -- the one it is tinted with its colour. None is the kitchen's brown. */
.cat-icon { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: var(--cat);
            stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.e-category, .e-cat)[data-category=""] { --cat: var(--brown-soft); }
#k-sheet button.e-category {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px;
  background: #fff; color: var(--brown); border: 2px solid var(--brown); border-radius: 12px;
  font-size: 14px; font-weight: 700; line-height: 1.15; text-align: left; }
#k-sheet button.e-category[data-category=""] { color: var(--brown-soft); font-weight: 600; }
#k-sheet button.e-category::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 6px; height: 6px;
  border: solid var(--brown); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
#k-sheet button.e-category[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
#k-sheet button.e-category:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--butter); }
.e-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
                gap: 6px; margin: -2px 0 12px; }
.e-categories[hidden] { display: none; }
#k-sheet button.e-cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 3px 7px;
  background: #fff; color: var(--brown); border: 2px solid color-mix(in srgb, var(--cat) 45%, #fff);
  border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.15; }
#k-sheet button.e-cat .cat-icon { width: 30px; height: 30px; }
#k-sheet button.e-cat:hover { background: color-mix(in srgb, var(--cat) 6%, #fff); }
#k-sheet button.e-cat[aria-pressed="true"] {
  border-color: var(--cat); background: color-mix(in srgb, var(--cat) 16%, #fff); font-weight: 700; }
#k-sheet button.e-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--butter); }

/* ---------------------------------------------------------- the plus's sheet */
/* Everything drawn over the kitchen is drawn the way the kitchen is: white, a
   brown outline, a soft shadow under it -- the wall's buttons, the tiles. The
   book's search rises from the bottom over the book; the review is a slate in
   the middle of the screen. The plus's item typed in is a small card in the
   top half, its foot at the middle, so the phone's keyboard comes up under it
   and covers none of it. The first fill's card stands at the foot of the
   kitchen, under it. */
#add-sheet { position: fixed; z-index: 15; left: 0; right: 0; bottom: 50vh; bottom: 50dvh;
             width: min(400px, calc(100% - 24px)); margin: 0 auto;
             max-height: calc(50dvh - 12px - env(safe-area-inset-top)); overflow-y: auto;
             overscroll-behavior: contain; background: #fff; color: var(--brown);
             border: 2.5px solid var(--brown); border-radius: 18px; padding: 10px 14px 14px;
             box-shadow: 0 6px 18px rgba(0, 0, 0, .14); animation: k-pop .18s ease-out; }
#add-sheet .k-card-head { margin-bottom: 8px; }
/* What was just done (notice()): a small note at the top of the screen, over
   everything and in the way of nothing, gone in a few seconds. */
#k-notice { position: fixed; z-index: 45; top: calc(10px + env(safe-area-inset-top)); left: 50%;
            width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 7px 16px;
            transform: translateX(-50%); pointer-events: none; background: var(--butter);
            color: var(--brown); border: 2px solid var(--brown); border-radius: 999px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .14); font-size: 15px; font-weight: 700;
            text-align: center; animation: k-notice 2.6s ease-in-out forwards; }
@keyframes k-notice {
  0% { opacity: 0; translate: 0 -8px; }
  8%, 80% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) { #k-notice { animation-name: k-notice-still; } }
@keyframes k-notice-still { 0%, 100% { opacity: 0; } 8%, 80% { opacity: 1; } }

/* ------------------------------------------------------------ the first fill */
/* The first fill (first-fill.js): the owl's notepad, as above, its x at its
   top right; under what to say, small, something that might be said, and its
   two ways, each with its picture. */
#k-fill { z-index: 14; box-sizing: border-box; }
#k-fill .k-card-head { align-items: center; margin-bottom: 0; }
#k-fill .k-card-head h3 { margin: 0; }
#k-fill .k-card-close { width: 30px; height: 30px; }
#fill-text:empty { display: none; }
/* Kiri's hello: larger, at the top of the screen over its buttons rather
   than over him, so he shows under it, waving; the four things he does two
   by two, each under its picture. */
#k-fill.k-fill-hello { inset: 12px 0 auto; width: min(440px, calc(100% - 32px)); max-width: none; height: fit-content;
                       max-height: calc(100% - 24px); margin: 0 auto; overflow-y: auto; padding: 22px 18px 14px;
                       transform-origin: 50% 0; }
#k-fill.k-fill-hello::after { display: none; }
#k-fill.k-fill-hello h3 { font-size: 30px; text-align: center; }
.k-fill-four { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin: 10px 0 0; padding: 0;
               list-style: none; }
.k-fill-four li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.k-fill-four svg { width: 48px; height: 48px; }
.k-fill-pics { display: flex; align-items: center; gap: 4px; }
.k-fill-four b { font: 400 20px/1.15 "Patrick Hand", cursive; }
#k-fill .k-fill-help { margin: 12px 0 0; text-align: center; font-size: 16px; color: var(--brown-soft); }
.k-fill-ways .k-btn svg { flex: none; width: 24px; height: 24px; }

/* ------------------------------------- the kitchen's buttons and microphones */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         min-height: 46px; padding: 10px 18px; background: #fff; color: var(--brown);
         border: 2.5px solid var(--brown); border-radius: 14px; font-weight: 700;
         box-shadow: 0 3px 0 rgb(79 58 51 / .25); cursor: pointer; }
.k-btn:hover { background: var(--paper); }
a.k-btn { box-sizing: border-box; text-decoration: none; }
.k-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(79 58 51 / .25); }
.k-btn.k-go { background: var(--butter); }
.k-btn.k-go:hover { background: var(--butter-soft); }
.k-btn:disabled { opacity: .5; cursor: default; transform: none; }
.k-round { flex: 0 0 auto; width: 46px; height: 46px; min-height: 0; padding: 0;
           border-radius: 50%; font-size: 20px; line-height: 1; }
/* a line's own button, beside it: Remove, Withdraw */
.k-btn.k-small { flex: 0 0 auto; min-height: 38px; padding: 4px 12px; font-size: 14px;
                 border-width: 2px; border-radius: 12px; box-shadow: 0 2px 0 rgb(79 58 51 / .25); }
.k-btn.k-danger { color: var(--error); }

#add-sheet input:not([type=radio]), #recipe-search input, #review-card input:not([type=checkbox]), #review-card select,
#review-card textarea, #k-ask input:not([type=radio]), #k-find input, #people-card input,
#settings-card input, .link-box input, .k-talk input {
  border: 2px solid var(--brown); border-radius: 12px; background: #fff; color: var(--brown); }
#add-sheet input:focus, #recipe-search input:focus, #review-card input:focus, #review-card select:focus,
#review-card textarea:focus, #k-ask input:focus, #k-find input:focus, #people-card input:focus,
#settings-card input:focus, .link-box input:focus, .k-talk input:focus {
  outline: none; box-shadow: 0 0 0 3px var(--butter); }
:is(#people-card, #settings-card, .link-box) input { min-height: 46px; padding: 10px 12px; }
:is(#people-card, #settings-card, .link-box) input::placeholder { color: #9a8a82; }

/* voice and search: a microphone to tap, and a line to type in instead */
.k-listen { display: flex; flex-direction: column; align-items: center; gap: 10px;
            margin: 0 0 16px; }
.k-mic, .k-keys { width: 88px; height: 88px; padding: 0; display: grid; place-items: center;
                 border: 2.5px solid var(--brown); border-radius: 50%; background: #fff;
                 box-shadow: 0 4px 0 rgb(79 58 51 / .25); }
:is(.k-mic, .k-keys):hover { background: var(--paper); }
.k-keys { width: 60px; height: 60px; }
.k-keys svg { width: 42px; height: 42px; }
.k-mic svg { width: 50px; height: 50px; }
.k-mic.recording { background: var(--rose); animation: k-listening 1.2s ease-in-out infinite; }
@keyframes k-listening {
  50% { box-shadow: 0 4px 0 rgb(79 58 51 / .25), 0 0 0 12px rgb(208 96 96 / .2); } }
@media (prefers-reduced-motion: reduce) { .k-mic.recording { animation: none; } }
.k-status { display: block; min-height: 20px; color: var(--brown-soft); font-size: 14px;
            font-weight: 700; text-align: center; }
.k-status:empty::before { content: attr(data-idle); }
.k-typed { display: flex; gap: 8px; }
.k-typed input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; }

/* an item typed in: what, where, and how many or how full -- kept small, to
   sit above the keyboard. The name stays at 16px: smaller, and a phone zooms
   in on it. */
.k-add { display: flex; flex-direction: column; gap: 10px; }
#add-name { font-size: 16px; padding: 8px 12px; }
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip { position: relative; cursor: pointer; }
.k-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.k-chip span { display: block; padding: 6px 12px; border: 2px solid var(--brown); border-radius: 999px;
               background: #fff; color: var(--brown); font-size: 14px; font-weight: 700; }
.k-chip input:checked + span { background: var(--brown); color: #fff; }
.k-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--butter); }
/* how many, and under it how full with Add beside it; the one not in use greyed,
   and still there to tap */
.k-add .k-idle { opacity: .4; transition: opacity .15s; }
.k-add-last { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.k-stepper { display: flex; align-items: center; gap: 8px; }
.k-stepper input { width: 64px; padding: 6px 2px; text-align: center; font-size: 20px;
                   font-weight: 700; appearance: textfield; -moz-appearance: textfield; }
.k-stepper input::-webkit-outer-spin-button,
.k-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.k-add .add-btn { flex: 1 0 auto; min-width: 88px; max-width: 120px; min-height: 40px; margin-left: auto; padding: 6px 14px; }
.k-add .k-round { width: 40px; height: 40px; }
.k-add .k-stepper input { width: 56px; padding: 4px 2px; font-size: 18px; }
.k-add .k-chip span { padding: 5px 11px; }
/* the five places, one row on any phone */
.k-add #add-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.k-add #add-places .k-chip span { padding: 5px 0; font-size: 13px; text-align: center; }

/* -------------------------------------------------------------------- search */
/* search: what it finds, a line each -- its name, where it lives on that
   place's colour, and how much, as its tile shows it */
#search-results, #recipe-search-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain;
                  display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
:is(#search-results, #recipe-search-results):empty { display: none; }
.k-hit { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px;
         background: #fff; color: var(--brown); border: 2px solid var(--brown); border-radius: 10px;
         font-size: 14px; text-align: left; cursor: pointer; }
.k-hit:hover { background: var(--paper); }
.k-hit b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-hit-place { flex: none; padding: 1px 8px; border: 1.5px solid var(--brown); border-radius: 999px;
               font-size: 12px; font-weight: 700; }
.k-hit-place[data-location="freezer"] { background: #e2edf3; }
.k-hit-place[data-location="fridge"] { background: #f4f6f1; }
.k-hit-place[data-location="pantry"] { background: #efe2cc; }
.k-hit-place[data-location="spices"],
.k-hit-place[data-location="drinks"] { background: #8ea7bd; }
.k-hit .k-tile-qty { flex: none; max-width: 35%; }
.k-hit .k-gauge { flex: none; }
.k-none { margin: 0; color: var(--brown-soft); font-style: italic; text-align: center; }
/* the book's search: the same lines, a recipe each, its name and under it what
   in it was asked for */
.k-hit.k-recipe-found { flex-direction: column; align-items: flex-start; gap: 0; }
.k-recipe-found b { flex: none; max-width: 100%; }
.k-recipe-found small { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--brown-soft); }

/* --------------------------------- the slate: listening, reading, the review */
/* The review: a slate in the middle of the screen, the kitchen dimmed behind.
   A long receipt scrolls inside it, with its two buttons kept in view. */
#review-card, #check-card, #share-card { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center;
               justify-content: center; padding: 16px; background: rgb(79 58 51 / .4); }
.k-slate { width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto;
           overscroll-behavior: contain; padding: 18px 16px 16px; background: #fff; color: var(--brown);
           border: 3px solid var(--brown); border-radius: 22px; box-shadow: 0 6px 0 rgb(79 58 51 / .3);
           animation: k-pop .18s ease-out; }
@keyframes k-pop { from { transform: scale(.94); opacity: 0; } }
.k-slate h3 { margin: 0 0 4px; font-size: 20px; }
.k-meta { color: var(--brown-soft); font-size: 14px; font-weight: 600; }
.k-heard { margin: 0 0 14px; color: var(--brown-soft); font-style: italic; }
/* a receipt's store and date: the slate's small print, as "Done" has it */
.k-receipt-meta { margin: 0 0 14px; }
/* the receipt's photo, small, a magnifier on its corner: a tap shows it whole */
#receipt-open { position: relative; display: block; margin: 0 0 14px; padding: 0; border: 0;
                background: none; cursor: zoom-in; }
#receipt-thumb { display: block; max-width: 160px; max-height: 200px;
                 border: 2px solid var(--brown); border-radius: 10px; }
#receipt-open svg { position: absolute; right: -10px; bottom: -10px; width: 34px; height: 34px;
                    padding: 3px; background: #fff; border: 2px solid var(--brown); border-radius: 50%; }
/* A photo whole, over everything (viewPhoto() in review.js): fitted to the
   screen to start, scrolled around once zoomed; the page under it dark. */
#photo-view { position: fixed; z-index: 35; inset: 0; background: rgb(30 22 19 / .92); }
#photo-view-box { position: absolute; inset: calc(56px + env(safe-area-inset-top)) 12px
                  calc(12px + env(safe-area-inset-bottom)); display: grid; overflow: auto;
                  overscroll-behavior: contain; touch-action: pan-x pan-y; scrollbar-width: none; }
#photo-view-img { display: block; max-width: none; margin: auto; cursor: zoom-in; user-select: none; }
#photo-view-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; }
.k-slate-actions { position: sticky; bottom: -16px; display: flex; justify-content: flex-end;
                   gap: 10px; margin-top: 14px; padding: 12px 0 0; background: #fff; }
.k-slate-actions .k-btn { min-width: 110px; }
/* a stock refresh's Say more first: three on a phone, sharing the width */
.k-slate-actions:has(#say-more:not(.hidden)) .k-btn { min-width: 0; flex: 1 1 0; padding-inline: 8px; }
/* While it reads, three dots bob in turn under the slate's title; when the
   reading fails, what went wrong is the slate's one line. */
.k-reading-dots { display: flex; gap: 8px; margin: 16px 0 6px; }
.k-reading-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--brown);
                       animation: k-dot 1s ease-in-out infinite; }
.k-reading-dots span:nth-child(2) { animation-delay: .15s; }
.k-reading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes k-dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .k-reading-dots span { animation: none; opacity: .6; } }
#reading-error { margin: 10px 0 0; color: var(--error); font-size: 16px; }
/* Listening: a red dot beating beside how long it has listened, out of the
   most it will -- grey, and no time, while the microphone gets ready. */
.k-listening-clock { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 12px 0 0;
                     font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.k-rec-dot { width: 14px; height: 14px; border-radius: 50%; background: #c9c1bd; }
#listening.k-live .k-rec-dot { background: #d9534f; animation: k-rec 1.2s ease-in-out infinite; }
@keyframes k-rec { 50% { transform: scale(.7); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #listening.k-live .k-rec-dot { animation: none; } }
#listening-say { margin: 16px 0 4px; }
#listening .k-heard { margin: 0; }
#listening-say.hidden + .k-heard { margin-top: 16px; }

/* ---------------------------------------------------------- the walk-through */
/* Help's walk-through: the screen dimmed but for what is being shown, ringed
   in the plus's yellow, and a slate saying what it is -- under it, over it, or
   in the middle, wherever it hides least of it. */
#tour { position: fixed; z-index: 40; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom)); }
#tour[data-at="bottom"] { justify-content: flex-end; }
#tour[data-at="top"] { justify-content: flex-start; }
#tour-dim { position: absolute; inset: 0; width: 100%; height: 100%; }
/* stepped aside while the kitchen moves under it */
#tour > * { transition: opacity .2s; }
#tour.tour-aside > * { opacity: 0; }
#tour-rings rect { fill: none; stroke: var(--butter); stroke-width: 4; animation: tour-glow 1.6s ease-in-out infinite; }
@keyframes tour-glow { 50% { stroke-opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #tour-rings rect { animation: none; } }
#tour-slate { position: relative; flex: 0 1 auto; }
#tour-slate p { margin: 0; }
#tour-text { white-space: pre-line; }
.tour-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 8px; height: 8px; border: 2px solid var(--brown); border-radius: 50%; }
.tour-dots i.on { background: var(--brown); }

/* ------------------------------------------------------ the review's changes */
/* One change a line: what it is and what was said, then the thing itself --
   editable where it is new, as the kitchen has it where it is not. */
#proposed, #applied { list-style: none; margin: 0; padding: 0; display: flex;
                      flex-direction: column; gap: 10px; }
#proposed li, #applied li { padding: 9px 10px 10px 12px; background: #fff;
                            border: 2px solid var(--brown); border-radius: 12px; }
#proposed li { display: flex; flex-direction: column; gap: 8px; }
#proposed li.empty { border-style: dashed; color: var(--brown-soft); font-style: italic; }
/* over what a recipe made kept as it was, at the foot of the list */
#proposed li.act-group { margin-top: 6px; padding: 10px 2px 0; border: none; border-top: 2px dashed #e6dcd2;
                         border-radius: 0; background: none; color: var(--brown-soft); font-size: 14px; font-weight: 700; }
.act-top { display: flex; align-items: center; gap: 8px; }
/* a stock refresh's still there as it was, at the top: a green chip each, a
   tap on it, its x, from going out (stillThere) */
#proposed li.act-still { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; border: none; background: none; }
#review-card .act-still > button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
                 padding: 0 9px 0 11px; border: 2px solid var(--brown); border-radius: 999px; background: var(--sage);
                 color: var(--brown); font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.act-still-x { font-size: 15px; line-height: 1; opacity: .7; }
/* what the newest recording brought, after a Say more (latestFirst) */
.act-latest { color: var(--brown-soft); font-size: 10px; font-weight: 700; font-style: italic; }
#proposed li > .act-latest { margin-bottom: -2px; }
#review-card .act-still > button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--butter); }
/* going out on a refresh: the card a tap from still there (staysOnTap) */
#proposed li.act-stays { cursor: pointer; }
#proposed li.act-stays:hover { background: var(--paper); }
#proposed li.act-stays:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--butter); }
.act-kind { flex: 0 0 auto; padding: 1px 9px; border: 2px solid var(--brown); border-radius: 999px;
            font-size: 12px; font-weight: 700; white-space: nowrap; }
.act-add { background: var(--sage); }
.act-remove { background: var(--rose); }
.act-set_qty { background: #d7ecf7; }
.act-set_level { background: var(--butter); }
#review-card .act-why { flex: 1 1 auto; min-width: 0; color: var(--brown-soft); font-size: 13px;
                        font-style: italic; overflow-wrap: anywhere; }
/* a brand read off a receipt, on offer beside the badge -- and after something
   finished, whether it goes on the shopping list: dashed until it is taken,
   then filled like a picked chip in the add form */
:is(.act-brand, .act-list) { flex: 0 1 auto; min-width: 0; padding: 0 11px 0 9px; border: 2px dashed var(--brown);
             border-radius: 999px; background: #fff; color: var(--brown); font-size: 13px; font-weight: 700;
             line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#review-card button:is(.act-brand, .act-list) { height: 30px; cursor: pointer; }
#review-card button.act-list { flex: none; }  /* its words whole: there is room on its line */
#review-card button:is(.act-brand, .act-list):hover { background: var(--paper); }
#review-card button:is(.act-brand, .act-list)[aria-pressed="true"] { border-style: solid; background: var(--brown); color: #fff; }
#review-card button:is(.act-brand, .act-list):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--butter); }
/* where the shopping list tile sits on a finished row, an add's way into its
   boxes: solid, since it is not a choice that stays on or off */
#review-card button.act-edit { flex: none; height: 30px; padding: 0 12px; border: 2px solid var(--brown);
                               border-radius: 999px; background: #fff; color: var(--brown); font-size: 13px;
                               font-weight: 700; line-height: 26px; cursor: pointer; }
#review-card button.act-edit:hover { background: var(--paper); }
#review-card button.act-edit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--butter); }
/* a shut add's place, a chip like its edit beside it, a tap from the others */
#review-card .act-fields select.act-loc {
  flex: none; height: 30px; padding: 0 26px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  line-height: 26px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234f3a33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px; }
#review-card .act-fields select.act-loc:hover { background-color: var(--paper); }
#review-card .act-drop { flex: 0 0 auto; width: 30px; height: 30px; margin: 0 0 0 auto; padding: 0;
                         border: 2px solid var(--brown); border-radius: 50%; background: #fff;
                         color: var(--brown); font-size: 18px; line-height: 1; }
#review-card .act-drop:hover { background: var(--rose); }
.act-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#review-card .act-fields input, #review-card .act-fields select,
#review-card .act-fields textarea { min-width: 0; padding: 6px 8px; font-size: 15px; }
.f-name { flex: 1 1 100%; font-weight: 700; }
/* the name wraps inside its box rather than running off the end (editName) */
textarea.f-name { display: block; font-family: inherit; line-height: 1.45; resize: none;
                  overflow: hidden; }
.f-qty { flex: 0 0 56px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.f-qty::-webkit-outer-spin-button,
.f-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f-type { flex: 1 1 80px; }
.f-loc, .f-level { flex: 0 0 auto; }
.f-fixed { font-size: 15px; }
.act-fields > .f-fixed:first-child { font-weight: 700; margin-right: 2px; }
.f-was { color: var(--brown-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-merge { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
             cursor: pointer; }
.act-merge input[type=checkbox] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; padding: 0;
                                  accent-color: var(--brown); }
#applied li { display: flex; align-items: flex-start; gap: 10px; }
#applied li.failed { border-color: #d06060; }
#applied .act-why.err { color: var(--error); font-style: normal; }
.qty-was { color: var(--brown-soft); }
.qty-now { font-weight: 700; }

/* the pipeline's workings, for the admin, folded away at the foot */
.k-debug { margin-top: 14px; color: var(--brown-soft); font-size: 12px; }
.k-debug summary { cursor: pointer; }
.k-debug p { margin: 6px 0; font-variant-numeric: tabular-nums; }
.k-debug pre { max-height: 220px; margin: 6px 0 0; padding: 9px; overflow: auto;
               background: var(--code); color: #d8dee9; border-radius: 6px; white-space: pre-wrap;
               word-break: break-word; font: 11px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace; }
#k-sheet .item-edit .row { flex-wrap: wrap; }  /* a card has the height to spare */
#kitchen-back, #kitchen-refresh, #book-close, #list-close { background: rgba(255, 255, 255, .92); color: var(--brown);
                               border: 2px solid var(--brown); border-radius: 999px;
                               padding: 5px 12px; font-weight: 700; font-size: 15px; }
/* A place's way back is the arrow alone, as tall as Stock refresh beside it. */
#kitchen-back, #kitchen-refresh { height: 36px; display: inline-flex; align-items: center; justify-content: center; }
#kitchen-back { width: 46px; padding: 0 0 3px; font-size: 28px; line-height: 1; }
/* A name as the wordmark has it -- an open place's, no chip round it, and the
   cookbook's and the shopping list's titles: brown with a lighter grain through
   it, its cream shadow down and to the right. The grain is painted in the box,
   so the box reaches below the g and y and past the shadow, the margin taking
   that back so the name sits where it did. */
#kitchen-name { font: 400 min(26px, 7.2vw)/1 "Nakiri Title", Georgia, serif; padding: .1em .08em .28em; margin-bottom: -.18em; }
:is(#kitchen-name, #book-page #book-title, #list-page #list-title) { letter-spacing: .02em; color: #4b3127;
  background: #4b3127 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .72 0 0 0 0 .6 0 0 0 2.2 -1.45'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1.5px 1.5px 0 #f1e2c6); }

/* -------------------------------------------------------------- the cookbook */
/* The cookbook, open over the whole screen with the kitchen's wall behind it:
   a red cover round a cream page, its tabs standing up from the top of the
   page -- the one open joined to the page, the rest a shade darker behind.
   Everything on it is drawn the kitchen's way. */
#book { position: fixed; z-index: 20; inset: 0; display: flex; flex-direction: column; gap: 8px;
        padding: 10px 10px 14px; background: #d7d7df; color: var(--brown); }
#book-bar { display: flex; max-width: 720px; width: 100%; margin: 0 auto; }
.book-cover { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 720px; margin: 0 auto;
              display: flex; flex-direction: column; padding: 10px 10px 10px 18px;
              background: #c8643e; border: 3px solid var(--brown); border-radius: 18px;
              box-shadow: inset 6px 0 0 var(--rust), 0 5px 0 rgb(79 58 51 / .3); }
#book-tabs { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 6px;
             padding: 0 10px; margin-bottom: -2.5px; }
.book-tab { flex: 0 1 52px; min-width: 0; height: 44px; padding: 0; display: grid; place-items: center;
            background: #ead9b5; border: 2.5px solid var(--brown); border-radius: 12px 12px 0 0;
            cursor: pointer; }
.book-tab:hover { background: #f1e4c6; }
.book-tab svg { width: 28px; height: 28px; }
.book-tab.on { height: 50px; background: var(--cream); border-bottom-color: var(--cream); }
/* held while a recipe is being written (bookTitle() in book.js): the others greyed */
.book-tab:disabled { cursor: default; }
.book-tab:disabled:not(.on) { opacity: .7; filter: grayscale(1); }
.book-tab:disabled:not(.on):hover { background: #ead9b5; }
/* Ruled paper: the book's pages and the note on the fridge. Every line of
   writing is --rule tall and everything on the page is a whole number of
   them, so the words sit on the lines; the lines are drawn a little below
   the middle of each, where the letters stand. The red margin runs down the
   left. Local, so the lines scroll with the page. */
#book-page, #list-page {
  --rule: 28px; position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--rule) 14px var(--rule) 50px; line-height: var(--rule); color: var(--brown);
  background-color: var(--cream); background-attachment: local;
  background-image:
    linear-gradient(to right, transparent 37px, var(--red-rule) 37px, var(--red-rule) 39px, transparent 39px),
    repeating-linear-gradient(to bottom, transparent 0 21px, #c3d6e5 21px 22px, transparent 22px 28px);
  border: 2.5px solid var(--brown); }
#book-page { border-radius: 4px 12px 12px 12px; box-shadow: inset 14px 0 12px -12px rgb(79 58 51 / .4); }
/* the line under it its padding, not its margin: lettered, the title is
   painted in its box, which so reaches under its p and g (#kitchen-name) */
#book-page #book-title { margin: 0; padding-bottom: var(--rule); white-space: nowrap;
                         font: 400 28px/var(--rule) "Nakiri Title", Georgia, serif; text-transform: none; }
/* clear of the magnifier and the plus beside it, where they are (fitBookTitle) */
#book-page:not(:has(#recipe-review-card:not(.hidden))) #book-title { padding-right: 108px; }
/* Recents, under "Recipes": on the line the title leaves clear */
#book-page #book-subtitle { margin: calc(-1 * var(--rule)) 0 var(--rule); line-height: var(--rule);
                            font-size: 16px; font-weight: 700; color: var(--brown-soft); }

/* What is written in the book is in the board's hand, as the chef's ideas
   are; its buttons and boxes are the app's own. */
#book-page { font-family: "Patrick Hand", cursive; }
#book-page :is(button, input, select) { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#book-page h2 { color: var(--brown); font-size: 18px; line-height: var(--rule); margin: 0;
                text-transform: none; letter-spacing: 0; }
#book-page p { margin: 0; }
/* a draft being written takes the page to itself */
#book-page .book-leaf:has(#recipe-review-card:not(.hidden)) > :not(#recipe-review-card) { display: none; }
/* the controls kept to whole lines too: the microphone five, a row two */
#book-page .row:has(> .k-mic) {
  height: calc(var(--rule) * 5); margin: 0; flex-direction: column; justify-content: flex-end; gap: 4px; }
#book-page .k-status { min-height: var(--rule); line-height: var(--rule); }  /* on the fifth line */
#book-page .row { min-height: calc(var(--rule) * 2); margin: 0; align-items: center; }
#book-page .row.wrap { padding: 8px 0; row-gap: 16px; }
#book-page .hint, #book-page .muted, #book-page .field-label,
#book-page .recipe-ings, #book-page .stage-meta { color: var(--brown-soft); }

#book-page button:not(.k-mic) {
  min-height: 40px; padding: 8px 14px; background: #fff; color: var(--brown); border: 2.5px solid var(--brown);
  border-radius: 14px; font-weight: 700; box-shadow: 0 3px 0 rgb(79 58 51 / .25); cursor: pointer; }
#book-page button:not(.k-mic):hover { background: var(--paper); }
#book-page button:not(.k-mic):active {
  transform: translateY(2px); box-shadow: 0 1px 0 rgb(79 58 51 / .25); }
#book-page button.big:not(.k-mic) { background: var(--butter); }
#book-page button.big:not(.k-mic):hover { background: var(--butter-soft); filter: none; }
#book-page button.link { min-height: 0; padding: 2px 4px; background: none; border: none; box-shadow: none;
                         color: var(--brown-soft); text-decoration: underline; font-weight: 600; }
#book-page button.act-drop { min-height: 0; padding: 4px 10px; font-size: 13px; color: var(--error); }
#book-page button:disabled { opacity: .55; }
#book-page input:not([type=checkbox]) {
  height: 40px; background: #fff; color: var(--brown); border: 2px solid var(--brown); border-radius: 12px; }
/* written on the page: no box, the words on the lines themselves */
#book-page textarea { padding: 0 2px; line-height: var(--rule); background: transparent; color: var(--brown);
                      border: none; border-radius: 0; resize: none; }
#book-page textarea::placeholder { color: #a8998f; }
#book-page textarea:focus { outline: none; box-shadow: none; background: rgb(244 213 141 / .2); }
#book-page input:focus { outline: none; box-shadow: 0 0 0 3px var(--butter); }
#book-page .row.wrap { gap: 10px; }

/* The saved recipes, a box of index cards (renderRecipes() in recipes.js), the
   tab's: all the one size, set square two across, each its name on one line
   in the board's plain hand over a red line, blue lines under it. Each card
   is drawn whole, and stacked: the next one down lies over it from just
   under its red line, so a column is a fan of names, the last card whole.
   Out over the margin. More than the page holds scroll under the title,
   fading into the page at the top and the foot. */
#book-page:not(:has(#recipe-open:not(.hidden))):not(:has(#recipe-review-card:not(.hidden))) {
  display: flex; flex-direction: column; overflow: hidden; }
#book-page:not(:has(#recipe-open:not(.hidden))):not(:has(#recipe-review-card:not(.hidden))) .book-leaf {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
#book-page:not(:has(#recipe-open:not(.hidden))):not(:has(#recipe-review-card:not(.hidden))) [data-section="saved-recipes"] {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -8px calc(-1 * var(--rule)) -40px; padding: 8px 8px var(--rule) 4px;
  -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 36px), transparent); }
#book-page #recipe-list { --card-height: 96px; --step: 44px;  /* a card's height; how far down the next one lies */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: var(--step);
  gap: 0 10px; padding-bottom: calc(var(--card-height) - var(--step)); }
/* clear of the plus's ways, which an empty book opens with down */
#book-page #recipe-list .empty { grid-column: 1 / -1; margin: 0 52px 0 36px; font-size: 16px; }
#book-page button.recipe-card {
  --lines: repeating-linear-gradient(to bottom, transparent 0 13px, #d3e1ec 13px 14px);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  height: var(--card-height); min-height: 0; padding: 0; text-align: left; overflow: hidden; border-radius: 8px;
  background: #fff var(--lines); box-shadow: 0 -2px 5px rgb(79 58 51 / .14), 0 2px 0 rgb(79 58 51 / .25);
  transition: transform .12s ease; }
#book-page button.recipe-card:hover { background: #fff var(--lines); transform: translateY(-3px); }  /* lifted a little out of the stack */
#book-page button.recipe-card:active { transform: none; box-shadow: 0 -2px 5px rgb(79 58 51 / .14); }
#book-page button.recipe-card:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; }
#book-page .recipe-card .recipe-name { flex: none; height: 36px; padding: 0 10px; background: #fff;
  border-bottom: 2px solid var(--red-rule); font: 400 20px/36px "Patrick Hand", system-ui, sans-serif;
  color: var(--brown-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A card out of the box (openRecipe() in recipes.js): the page to itself under
   its way back, the card as wide as the page -- its name across the top over
   the red line, the rest written on its blue lines. */
#book-page .book-leaf:has(#recipe-open:not(.hidden)) > :not(#recipe-open, #recipe-review-card) { display: none; }
#book-page:has(#recipe-open:not(.hidden)):not(:has(#recipe-review-card:not(.hidden))) :is(#book-title, #book-subtitle) {
  display: none; }
/* the way back, and at the line's other end Check and I made this, into the
   page's right margin: always one line, the three smaller together on a page
   too narrow for them (sized by the line's width, cqi) */
#book-page .recipe-top { container-type: inline-size; display: flex; align-items: center; gap: min(5px, 1.6cqi);
                         margin: -14px -10px 14px -36px; }
#book-page #recipe-back { flex: 0 0 auto; min-height: 0; margin: 0; padding: 5px min(9px, 2.8cqi); border-width: 2px;
                          border-radius: 999px; font-size: min(14px, 4.6cqi); line-height: 20px; box-shadow: none;
                          white-space: nowrap; }
#book-page .recipe { margin: 0 0 var(--rule) -36px; background: #fff; border: 2.5px solid var(--brown);
                     border-radius: 10px; box-shadow: 0 4px 0 rgb(79 58 51 / .25); overflow: hidden; }
#book-page .recipe .recipe-name { margin: 0; padding: 14px 18px 8px; border-bottom: 2px solid var(--red-rule);
  font: 400 32px/1.1 "Patrick Hand", system-ui, sans-serif; color: var(--brown-deep); text-transform: none;
  letter-spacing: 0; overflow-wrap: anywhere; }
#book-page .recipe-body { padding: 6px 18px 0; line-height: var(--rule); background-origin: content-box;
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, #c3d6e5 21px 22px, transparent 22px 28px); }
#book-page .recipe h4 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em;
                        text-transform: uppercase; color: var(--rust); }
#book-page .recipe h4 ~ h4 { margin-top: var(--rule); }
#book-page .recipe .recipe-ings + .steps { margin-top: var(--rule); }  /* a line between, with no heading */
/* a recipe in parts: each part's name over its ingredients, in the card's hand */
#book-page .recipe .recipe-part { margin: 0; font: 400 20px/var(--rule) "Patrick Hand", system-ui, sans-serif;
                                  color: var(--rust); }
#book-page .recipe .recipe-ings { columns: 2 170px; column-gap: 24px; }
#book-page .recipe .steps { font-size: 19px; color: var(--brown-deep); }
#book-page .recipe .steps { padding-left: 32px; list-style: none; counter-reset: step; }
#book-page .recipe .steps li { position: relative; counter-increment: step; }
#book-page .recipe .steps li::before { content: counter(step); position: absolute; left: -32px; top: 3px;
  width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--brown); border-radius: 50%;
  background: var(--butter); font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
#book-page .recipe-foot { display: flex; align-items: center; gap: 10px; height: calc(var(--rule) * 2); }
/* Check and I made this, small, side by side */
#book-page .recipe-checking { display: flex; align-items: center; gap: min(5px, 1.6cqi); margin-left: auto; }
#book-page .recipe-checking button { flex: 0 0 auto; height: 26px; min-height: 0; margin: 0; padding: 0 min(7px, 2.2cqi);
  border-width: 2px; border-radius: 999px; box-shadow: none; font-size: min(12px, 3.9cqi); line-height: 20px;
  white-space: nowrap; }
/* How many it serves, on the card's first line: the number in a small box,
   − and + either side (servesLine() in recipes.js) */
#book-page .k-serves { display: flex; align-items: center; gap: 6px; height: var(--rule); font-size: 19px;
                       color: var(--brown-deep); }
#book-page .k-serves button.k-serves-step { width: 26px; height: 26px; min-height: 0; padding: 0; border-width: 2px;
  border-radius: 50%; box-shadow: none; font-size: 16px; line-height: 1; }
#book-page .k-serves input { width: 46px; height: 26px; padding: 0 4px; border-width: 2px; border-radius: 8px;
  text-align: center; font-size: 15px; font-weight: 700; appearance: textfield; -moz-appearance: textfield; }
.k-serves input::-webkit-outer-spin-button, .k-serves input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* the draft's: a line of its own over the ingredients */
#book-page .r-serves { display: flex; align-items: center; gap: 8px; height: calc(var(--rule) * 2); font-size: 19px; }
#book-page .r-serves input { width: 64px; text-align: center; }
#book-page .recipe-checking .k-check { background: var(--butter); }
#book-page .recipe-checking .k-check:hover { background: var(--butter-soft); }
#book-page .recipe-foot { margin-top: var(--rule); background: #fff; margin-inline: -18px; padding: 0 18px;
                          border-top: 2px dashed #e6dcd2; height: calc(var(--rule) * 2 + 8px); }
#book-page .recipe-foot .recipe-delete { color: var(--error); }
/* A name that opens its menu -- a recipe's edit and delete, a shopping
   line's check and cross -- kept out of the way until wanted: a small card
   under the name, over the lines (nameMenu() in recipes.js). */
:is(#book-page, #list-page) .k-named { position: relative; }
:is(#book-page, #list-page) .k-name { cursor: pointer; }
:is(#book-page, #list-page) .k-name::after { content: " \25BE"; font-size: 14px; line-height: 1; color: #b8a79b; }
:is(#book-page, #list-page) .k-name:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; }
.k-menu { display: none; }
:is(#book-page, #list-page) .k-named.menu-open .k-menu {
  position: absolute; z-index: 3; top: var(--rule); left: 0; display: flex; flex-direction: column;
  min-width: 140px; padding: 4px; background: #fff; border: 2px solid var(--brown); border-radius: 12px;
  box-shadow: 0 4px 0 rgb(79 58 51 / .25); }
:is(#book-page, #list-page) .k-menu button {
  display: flex; align-items: center; min-height: 0; height: 40px; padding: 0 12px; justify-content: flex-start;
  text-align: left; color: var(--brown); background: none; border: none; border-radius: 8px; box-shadow: none;
  font-size: 15px; font-weight: 700; line-height: 20px; cursor: pointer; }
:is(#book-page, #list-page) .k-menu button:hover { background: var(--cream); }
:is(#book-page, #list-page) .k-menu button:active { transform: none; }
:is(#book-page, #list-page) .k-menu .k-danger { color: var(--error); }
/* a word under an item on where it leads: checked off, back in the fridge */
:is(#book-page, #list-page) .k-menu button:has(small) { height: auto; padding: 6px 12px;
                                                        flex-direction: column; align-items: flex-start; }
.k-menu small { font-size: 13px; font-weight: 600; color: var(--brown-soft); }
#book-page .recipe-ings { margin: 0; padding: 0; list-style: none; font-size: 19px; color: var(--brown-deep); }
#book-page .recipe-ings li { display: block; }
/* a recipe's ingredients, and the shopping list's lines written the same way */
#book-page .recipe-ings li::before, #list-page .shop-name::before { content: "\2013  "; color: #a8998f; }
#book-page .steps li::marker { color: #b8a79b; }
#book-page .act-why, #book-page .steps { margin: 0; font-size: 15px; line-height: var(--rule); }
#book-page .empty { color: var(--brown-soft); }
/* the draft: its heading is the page's own; its lines give the name the room */
#book-page #recipe-review-title { display: none; }
#book-page #recipe-meal { padding: 10px 0; gap: 6px; }
#book-page #recipe-meal button { min-height: 30px; padding: 2px 10px; border-width: 2px; border-radius: 999px;
                                 font-size: 13px; box-shadow: none; }
#book-page #recipe-meal button[aria-pressed="true"] { background: var(--butter); }
#book-page :is(#recipe-ingredients, #recipe-steps) li { position: relative; gap: 6px; }
#book-page .r-name { flex: 1 1 auto; min-width: 0; }
#book-page .r-amount { flex: 0 1 120px; min-width: 0; }
/* the cross that takes a line out and, under it, the arrows that move it to
   another section: small, out in the margin, left of the red line, so the
   line keeps its whole width. A line with nowhere to move has its cross alone,
   level with it. */
#book-page :is(#recipe-ingredients, #recipe-steps) :is(button.act-drop, button.r-move) { position: absolute; left: -40px; width: 18px;
  height: 18px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  border-width: 1.5px; border-radius: 50%; box-shadow: none; }
#book-page :is(#recipe-ingredients, #recipe-steps) :is(button.act-drop, button.r-move):active { transform: none; }
#book-page :is(#recipe-ingredients, #recipe-steps) button.act-drop { top: calc(50% - 20px); font-size: 0; }
#book-page :is(#recipe-ingredients, #recipe-steps) li:not(:has(.r-move)) button.act-drop { top: calc(50% - 9px); }
#book-page :is(#recipe-ingredients, #recipe-steps) button.act-drop::after { content: "\D7"; font-size: 13px; line-height: 1; }
#book-page :is(#recipe-ingredients, #recipe-steps) button.r-move { top: calc(50% + 2px); color: var(--brown); }
#book-page :is(#recipe-ingredients, #recipe-steps) .r-move::after { content: none; }
#book-page :is(#recipe-ingredients, #recipe-steps) .r-move svg { width: 11px; height: 11px; }
/* its moves, opened under the arrows, over the lines below: up and down one
   over the other, and "new section" small beside them */
#book-page :is(#recipe-ingredients, #recipe-steps) .k-named.menu-open .k-menu { top: 50px; left: -44px; min-width: 0;
  flex-direction: row; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; }
#book-page :is(#recipe-ingredients, #recipe-steps) .r-arrows { display: flex; flex-direction: column; gap: 4px; }
#book-page :is(#recipe-ingredients, #recipe-steps) .k-menu button.r-step { width: 36px; height: 30px; padding: 0; justify-content: center;
  border: 2px solid var(--brown); border-radius: 8px; background: #fff; }
#book-page :is(#recipe-ingredients, #recipe-steps) .k-menu button.r-step svg { width: 16px; height: 16px; }
#book-page #recipe-ingredients .k-menu button.r-new-section { height: auto; padding: 2px 0; font-size: 12px;
  font-weight: 600; line-height: 16px; color: var(--brown-soft); text-decoration: underline; white-space: nowrap; }
#book-page :is(#recipe-ingredients, #recipe-steps) .k-menu button:disabled { opacity: .35; cursor: default; }
#book-page :is(#recipe-ingredients, #recipe-steps) .k-menu button:disabled:hover { background: #fff; }
#book-page #recipe-ingredients .k-menu button.r-new-section:disabled:hover { background: none; }
/* in parts, a line for each part's name, written on the page as the card
   writes it -- no box, in its hand and rust -- and a + for one more
   ingredient of its own where the others have their cross */
#book-page #recipe-ingredients .r-part-name { flex: 1 1 auto; min-width: 0; padding: 0 2px; background: transparent;
  border: none; border-radius: 0; font: 400 22px "Patrick Hand", system-ui, sans-serif; color: var(--rust); }
#book-page #recipe-ingredients .r-part-name::placeholder { color: #c9ab9c; }
#book-page #recipe-ingredients button.r-part-add { flex: 0 0 auto; width: 32px; height: 32px; min-height: 0;
                                                 padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }

/* Adding a recipe: a plus at the top right of the page, on the title's line,
   and the ways of adding tucked behind it that drop straight down when it is
   pressed, over the page, as the plus's do on the kitchen wall. One
   way's controls at a time at the top of the page; none until one is picked. */
/* the magnifier, beside the plus on the title's line, white as the kitchen wall's */
#book-page #recipe-find { position: absolute; z-index: 2; top: 19px; right: 68px; width: 46px; height: 46px;
                          min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; }
#book-page #recipe-find svg { width: 28px; height: 28px; }
:is(#book-page, #list-page) .k-adder { position: absolute; z-index: 2; top: 19px; right: 12px; width: 46px; }
:is(#book-page, #list-page) .k-adder button { flex: 0 0 auto; min-height: 0; padding: 0; display: grid; place-items: center;
                             border-radius: 50%; }
:is(#book-page, #list-page) .k-adder .k-plus { width: 46px; height: 46px; background: var(--butter); transition: transform .25s ease; }
:is(#book-page, #list-page) .k-adder .k-plus:hover { background: var(--butter-soft); }
:is(#book-page, #list-page) .k-adder.open .k-plus,
:is(#book-page, #list-page) .k-adder.adding .k-plus { transform: rotate(45deg); }  /* the plus, turned to a cross */
:is(#book-page, #list-page) .k-plus svg { width: 26px; height: 26px; }
:is(#book-page, #list-page) .k-ways { position: absolute; top: 54px; left: 2px; display: flex; flex-direction: column; gap: 8px;
                                      pointer-events: none; }  /* shut, it must not catch taps meant for the page under it */
:is(#book-page, #list-page) .k-adder .k-way { width: 42px; height: 42px; opacity: 0; pointer-events: none;
                             transform: translateY(calc(-50px * (var(--i) + 1))) scale(.3);
                             transition: transform .3s cubic-bezier(.3, 1.35, .5, 1), opacity .15s; }
:is(#book-page, #list-page) .k-adder.open .k-way { opacity: 1; pointer-events: auto; transform: none;
                                  transition-delay: calc(var(--i) * .05s); }
:is(#book-page, #list-page) .k-adder .k-way.on { background: var(--butter); }
:is(#book-page, #list-page) .k-way svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) {
  :is(#book-page, #list-page) .k-adder .k-plus, :is(#book-page, #list-page) .k-adder .k-way { transition: none; } }
#book-page [data-way-of] { display: none; }
#book-page [data-way="say"] > [data-way-of="say"],
#book-page [data-way="type"] > [data-way-of="type"],
#book-page [data-way="photo"] > [data-way-of="photo"] { display: flex; }
#book-page [data-section][data-way] { margin-bottom: var(--rule); }  /* a blank line under */
#book-page #recipe-text-go { flex: 0 0 auto; }
#recipe-status:empty { display: none; }

/* the draft kept to the lines too: the name and each ingredient two, the
   links and labels one, the instructions five */
#book-page #recipe-name { margin: 8px 0; }
#book-page :is(#recipe-ingredients, #recipe-steps) { margin: 0; }
#book-page #recipe-ingredients li { height: calc(var(--rule) * 2); padding: 0; }
/* a step of the method, written as an ingredient is -- its cross and arrows
   out in the margin -- its number in the card's yellow ahead of it, its box
   as tall as the step */
#book-page #recipe-steps li { min-height: calc(var(--rule) * 2); padding: 0; align-items: center; }
#book-page .r-step-no { flex: 0 0 auto; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--brown);
  border-radius: 50%; background: var(--butter); color: var(--brown-deep); font-size: 12px; font-weight: 800; line-height: 18px;
  text-align: center; }
/* its box as tall as what is written in it, typed or filled in, shown or not:
   a hidden copy of the words (data-words, kept by stepLine), set the same,
   is as tall as they wrap to, and the box lies over it, filling it */
#book-page .r-step-box { position: relative; flex: 1 1 auto; min-width: 0; margin: 8px 0; }
#book-page .r-step-box::after { content: attr(data-words) " "; display: block; box-sizing: border-box; visibility: hidden;
  white-space: pre-wrap; overflow-wrap: break-word; }
#book-page .r-step-box::after, #book-page .r-step-text { min-height: 40px; margin: 0; padding: 8px 12px;
  border: 2px solid var(--brown); border-radius: 12px; font: inherit; font-size: 14px; line-height: 20px; }
#book-page .r-step-text { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; resize: none;
  overflow: hidden; }
#book-page .r-step-text:focus { background: #fff; box-shadow: 0 0 0 3px var(--butter); }
#book-page .r-adds { display: flex; flex-wrap: wrap; column-gap: 18px; }
#book-page .r-adds button { height: var(--rule); padding: 0; }
#book-page .field-label { margin: 0; line-height: var(--rule); }

/* --------------------------------------------------------- the shopping list */
/* The shopping list: the note on the fridge door, over the whole screen on
   the door's grey -- ruled paper, as the book's pages, with a red pin at the
   top. A line a thing, written as a recipe's ingredients are, its menu opened
   by a tap on it with no mark to say so -- an ingredient line has none. */
#list { position: fixed; z-index: 20; inset: 0; display: flex; flex-direction: column; gap: 8px;
        padding: 10px 10px 14px; background: #a9a9a9; color: var(--brown); }
#list-bar { display: flex; max-width: 520px; width: 100%; margin: 0 auto; }
.list-sheet { position: relative; flex: 1 1 auto; min-height: 0; display: flex; width: 100%; max-width: 520px;
              margin: 0 auto; }
.list-sheet::before { content: ""; position: absolute; z-index: 1; top: 19px; left: 50%; width: 30px; height: 30px;
                      margin-left: -15px; border-radius: 50%; background: #d95f4a; border: 2.5px solid var(--brown);
                      box-shadow: 0 3px 0 rgb(79 58 51 / .3); pointer-events: none; }
#list-page { border-radius: 3px; box-shadow: 6px 10px 0 rgb(79 58 51 / .25); }
#list-page #list-title { margin: var(--rule) 0 0; padding-bottom: var(--rule);
                         font: 400 28px/var(--rule) "Nakiri Title", Georgia, serif; text-transform: none; }  /* as the book's */
/* a recipe's lines under its name, then everything else: a heading a line, in
   the board's hand, as the cards' names; a blank line between */
#list-page .shop-group { margin: var(--rule) 0 0; font: 400 21px/var(--rule) "Patrick Hand", system-ui, sans-serif;
  color: var(--rust); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#list-page .shop-group:first-child { margin-top: 0; }
#list-page .item { display: block; min-height: var(--rule); padding: 0; border: none; }
/* a line written on the list in the board's hand, as its headings are, in a
   pen darker than the paper's rules: what to buy, read at a glance in the shop */
#list-page .shop-name { display: block; font: 400 23px/var(--rule) "Patrick Hand", system-ui, sans-serif;
                        color: var(--brown-deep); }
#list-page .shop-name::before { color: var(--brown-soft); }
#list-page .shop-name.k-name::after { content: none; }
#list-page .empty { color: var(--brown-soft); }
/* Amazon's statement, the page's foot: pushed to the bottom of the page
   however short the list, a little clear of its edge, and one line at any
   width -- across the margin too, its size following the page's */
#list-page { display: flex; flex-direction: column; padding-bottom: 6px; container-type: inline-size; }
#list-page #shop-amazon { margin: auto 0 0 -36px; padding-top: var(--rule); white-space: nowrap;
                          text-align: center; font-size: min(12px, 3.6cqi); line-height: 18px;
                          color: var(--brown-soft); }
#list-page p { margin: 0; }
#list-page .k-adder { top: 47px; }  /* on the title's line, the third */

/* ------------------------------- recipes: reading one, the camera, the check */
textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--line);
           border-radius: 6px; background: #fff; color: var(--ink);
           width: 100%; resize: vertical; }
#recipe-text { flex: 1 1 auto; min-width: 0; }
#recipe-name { width: 100%; font-weight: 600; margin: 8px 0 4px; }
#recipe-thumb { display: block; max-width: 220px; max-height: 260px;
                border: 1px solid var(--line); border-radius: 6px; margin: 8px 0 0; }
/* A recipe's camera, over everything: the picture as big as it fits, how many
   taken at the top, its x in the corner, and under it the shutter -- or, a
   photo just taken, Take another and Done. */
#recipe-cam { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #000;
              padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#recipe-cam :is(video, img) { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; }
#recipe-cam-count { position: absolute; top: calc(env(safe-area-inset-top) + 18px); left: 16px; margin: 0;
                    color: #fff; font-weight: 700; }
#recipe-cam-close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; width: 44px;
                    height: 44px; min-height: 0; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1; }
#recipe-cam-bar { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 14px;
                  min-height: 96px; padding: 0 16px; }
#recipe-cam-shutter { width: 70px; height: 70px; min-height: 0; padding: 0; border: 6px solid var(--butter);
                      border-radius: 50%; background: #fff; }
#recipe-cam-bar :is(#recipe-cam-again, #recipe-cam-done) { flex: 1 1 0; max-width: 180px; height: 52px; font-size: 18px; }
#recipe-cam-done { background: var(--butter); }
:is(#recipe-ingredients, #recipe-steps) { list-style: none; padding: 0; margin: 4px 0; }
:is(#recipe-ingredients, #recipe-steps) li { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.r-name   { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 14px; }
.r-amount { flex: 0 1 120px; min-width: 0; padding: 6px 8px; font-size: 14px; }
:is(#recipe-ingredients, #recipe-steps) .act-drop { margin-top: 0; }
.field-label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }

.recipe { border-top: 1px solid var(--line); padding: 9px 0; }
.recipe:first-child { border-top: none; padding-top: 0; }
.recipe-name { font-weight: 600; flex: 1 1 auto; }
/* What Can I make this? found (#check-card): a line each, its tick first
   for one you don't have, the verdict, the ingredient, and what was weighed
   up under it; what you have last, greyed. */
#check-card .k-meta { margin: 4px 0 0; }
/* A recipe as a picture (#share-card): as large as the screen allows over
   its two buttons. */
#share-card .k-slate { max-width: 460px; }
#share-picture { display: block; width: 100%; max-height: calc(100dvh - 150px); object-fit: contain;
                 border: 2px solid var(--brown); border-radius: 12px; }
#share-card .error:empty { display: none; }
#check-card .k-status:empty { display: none; }
#check-card .k-slate-actions .k-btn { min-width: 0; white-space: nowrap; }
#check-shop { flex: 1 1 auto; max-width: 260px; }
.check-hint { margin: 10px 0 0; color: var(--brown-soft); font-size: 14px; }
.check-lines { list-style: none; padding: 0; margin: 8px 0 0; }
.check-lines li { padding: 5px 0; border-top: 1px solid var(--divider); font-size: 15px; }
.check-lines li:first-child { border-top: none; }
.check-lines label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-lines input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brown); }
.check-lines li:not(:has(input)) { opacity: .6; }
.check-lines li:not(:has(input)) label { cursor: default; }
.check-text { flex: 1 1 auto; min-width: 0; }
.check-text small { display: block; color: var(--brown-soft); font-size: 13px; }
.k-amount { font-weight: 700; }
.chk { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
       letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; margin-right: 6px; }
.chk-missing { background: #f7dede; color: #8a2a2a; }
.chk-short   { background: #f5ecd4; color: #7a5a14; }
.chk-have    { background: #dff0e4; color: var(--leaf); }
/* you own a form of it -- not a warning, just worth a glance */
.chk-maybe   { background: #e3ebf5; color: #2f4a73; }

/* a recipe's method, a step a line */
.steps { white-space: pre-wrap; font-size: 14px; margin: 6px 0 0; }

/* ----------------------------------------------- levels, and editing an item */
/* a level instead of a count: spices always, other things by choice */
.levels { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line);
          border-radius: 6px; overflow: hidden; }
.levels .level { border: none; border-radius: 0; padding: 3px 9px; font-size: 13px;
                 background: #fff; color: var(--muted); }
.levels .level + .level { border-left: 1px solid var(--line); }
.levels .level:hover { background: #f0f0ec; }
.levels .level-high.on   { background: #dff0e4; color: var(--leaf); font-weight: 600; }
.levels .level-medium.on { background: #f5ecd4; color: #7a5a14; font-weight: 600; }
.levels .level-low.on    { background: #f7dede; color: #8a2a2a; font-weight: 600; }
/* At rest a row shows the level it is at, still in its own slot: same box,
   same width, same colour, same place -- the other two greyed in theirs. They
   are live buttons all the same, so pressing the box anywhere opens the choice. */
.level-pick { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.levels:not(.open) .level:not(.on) { background: transparent; opacity: .35; }
.levels:not(.open) .level + .level { border-left-color: transparent; }
.levels:not(.open):hover { background: #f0f0ec; }
.item .level-save { background: var(--accent); color: #fff;
                    border-color: var(--accent); font-weight: 600; }
.item .level-save:hover { filter: brightness(1.08); }
.f-level { flex: 0 0 auto; }


/* editing one item in place */
.item-edit { display: block; padding: 8px 0; }
.item-edit .row { margin-bottom: 6px; }
.item-edit .row:last-of-type { margin-bottom: 4px; }
.item-edit .e-name { flex: 1 1 auto; min-width: 0; }
/* a count is a digit or two: a small box, the type taking the rest of the line */
.item-edit .e-qty { flex: 0 0 64px; min-width: 0; text-align: center;
                    appearance: textfield; -moz-appearance: textfield; }
.item-edit .e-qty::-webkit-outer-spin-button,
.item-edit .e-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-edit .e-type { flex: 1 1 auto; min-width: 0; }
.e-category, .e-location { flex: 1 1 0; min-width: 0; }
.edit-actions { margin-top: 10px; }
.edit-save { padding: 6px 14px; }
/* the day it came in, at the foot as on the card, the date box beside it */
.e-added { display: flex; align-items: center; gap: 8px; margin-left: auto;
           font-size: 14px; font-weight: 600; color: var(--brown-soft); }
.e-added .e-date { flex: 0 1 auto; min-width: 0; }
.track-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px;
                color: var(--muted); cursor: pointer; }
.track-toggle input { width: 15px; height: 15px; padding: 0; margin: 0;
                      accent-color: var(--accent); }

/* -------------------------------------------- jumpstart (parked, admin-only) */
/* jumpstart -- a walkthrough, so it is laid out as one: a step bar at the top,
   one slide in view, and the nav pinned under it in the same place every time
   so the Next button never moves out from under your thumb.

   No .card framing: it is not a panel on a page any more, it IS the page, so it
   sits straight in the column body already gives everything (720px, centred,
   16px of padding) exactly as #app does. A white box drawn around the whole
   screen would only look like a box that failed to fit. */
#jumpstart { padding-top: 4px; }
#jumpstart h1 { margin-bottom: 2px; }
#jumpstart h1 .wordmark { width: 170px; }
#jumpstart h2 { margin-bottom: 6px; }
/* The one line that has to land first: bigger than a hint, quieter than a title. */
.js-lede { font-size: 17px; margin: 0 0 12px; }
.js-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
          padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.js-dots { display: flex; gap: 5px; flex: 0 0 auto; }
.js-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.js-dot.done { background: #b9cfc2; }
.js-dot.on { background: var(--accent); transform: scale(1.35); }
.js-where { flex: 1 1 auto; color: var(--muted); font-size: 13px;
            text-transform: capitalize; }
.js-nav { margin: 16px 0 0; gap: 12px; }
/* Next sits on the right, back stays a quiet link on the left */
.js-nav #js-next { margin-left: auto; }
#js-next:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.js-head { font-size: 15px; margin: 0 0 6px; }
.js-slide .hint { margin-bottom: 8px; }

.js-loc { text-transform: capitalize; }
.js-loc.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* The in-page camera. One fixed shape on every phone, never a function of the
   screen it landed on: `--shot-aspect` is set by jumpstart.js, which uses the same
   number to crop the captured frame, so the box and the photo agree.

   The height comes from the width via aspect-ratio, so capping the WIDTH is
   what keeps a tall box from running off a short screen -- a max-height would
   squash the shape back into whatever fits, which is the bug this replaces.

   The shape lives on the stage rather than the video now, because the stage is
   what is on screen before there is any camera to show: black, already the
   size and shape of the photo, with the button to start it in the middle. */
#js-cam-stage { position: relative; width: 100%;
                max-width: calc(78vh * var(--shot-aspect, 0.75));
                aspect-ratio: var(--shot-aspect, 0.75);
                margin-inline: auto; background: #000;
                border-radius: 8px; overflow: hidden;
                display: flex; align-items: center; justify-content: center; }
#js-cam { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Out of the flow so the video keeps the whole stage behind it. */
.js-cam-start { position: absolute; }
.js-cam-bar { margin-top: 10px; }
#js-shutter { flex: 0 0 auto; min-width: 130px; }
#js-shot-hint { flex: 1 1 auto; }
.js-other { margin-top: 12px; }
.js-other > summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.js-other .row { margin-top: 8px; }

.js-shot { width: 84px; height: 84px; object-fit: cover; border-radius: 6px;
           margin: 8px 6px 0 0; border: 1px solid var(--line); }
/* Marked, not omitted -- a photo that failed still took up a shutter press and
   belongs in the count you can see. */
.js-shot-failed { border-color: var(--error); opacity: .55; }
/* The photo being audited. `contain` and not `cover`: a crop would hide items
   at the edges, which is the one thing this screen must not do. The dark mat
   is so a photo of a pale shelf still reads as a photo. */
#js-viewer { background: var(--code); border-radius: 8px; margin: 4px 0 10px;
             display: flex; align-items: center; justify-content: center;
             min-height: 180px; }
#js-photo { display: block; width: 100%; max-height: 58vh; object-fit: contain;
            border-radius: 8px; }
#js-list { margin: 4px 0 12px; padding-left: 24px; }
#js-list li { padding: 3px 0; }
#js-list li::marker { color: var(--muted); font-size: 13px; }
/* A repeat is shown, not hidden -- just quieter, so it reads as already counted
   rather than as a second jar. */
#js-list li.js-dup { opacity: .62; }
#js-list li.js-failed { color: var(--error); list-style: none; margin-left: -24px; }
.js-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* The count and its - and +, dressed like the kitchen row's so the two screens
   read as one control. */
.js-stepper { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.js-stepper button { padding: 3px 9px; font-size: 14px; }
.js-count { min-width: 1.2em; text-align: right; }
.js-name { font-size: 15px; }
.js-level { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.js-qty, .js-said, .js-note { font-size: 12px; color: var(--muted); }
.js-qty { background: #eceff5; color: #2f3c73; padding: 1px 6px; border-radius: 4px; }
.js-said { background: #e8f0e9; color: var(--leaf); padding: 1px 6px; border-radius: 4px; }
.js-note { font-style: italic; }

/* The list of finished shelves, waiting under the walkthrough for its button. */
#js-total { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.js-total-place { font-size: 13px; font-weight: 600; color: var(--muted);
                  text-transform: capitalize; margin: 10px 0 2px; }
.js-total-rows { list-style: none; margin: 0; padding: 0; }
.js-total-rows li { padding: 4px 0; border-top: 1px solid var(--line); }
.js-drop { margin-left: auto; padding: 2px 10px; font-size: 15px; color: var(--error); }
#js-saved { margin-top: 12px; }

/* What a section of People or Settings is for (infoPop in people.js): a
   bubble under its i, over the same clear shade, the title bold over its
   lines, an address set apart. */
.k-info-pop { position: fixed; z-index: 1001; box-sizing: border-box; width: max-content;
              max-width: min(290px, calc(100vw - 16px)); padding: 12px 14px; font-size: 14px;
              line-height: 1.4; text-align: left; }
.k-info-pop p { margin: 0; overflow-wrap: anywhere; }
.k-info-pop p + p { margin-top: 6px; }
.k-info-pop .k-info-title { font-size: 15px; font-weight: 700; }
.k-info-pop code { display: inline-block; padding: 2px 6px; border-radius: 6px; background: #f4ede6;
                   font: 600 13px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; }

/* A question asked before something is taken away (askFirst in core.js): a
   small card under what was tapped, over a clear shade that keeps it on a tap
   anywhere else. */
.k-ask-shade { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.k-ask { position: fixed; z-index: 1001; box-sizing: border-box; max-width: min(300px, calc(100vw - 16px));
         padding: 8px 10px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
         background: #fff; color: var(--brown); border: 2px solid var(--brown); border-radius: 12px;
         box-shadow: 0 4px 0 rgb(79 58 51 / .25); text-align: left; }
.k-ask p { margin: 0; font-size: 15px; font-weight: 700; line-height: 20px; overflow-wrap: anywhere; }
/* a stock refresh's microphone, listening in its menu: for how long */
.k-ask .k-refresh-live { display: flex; gap: 8px; justify-content: center; min-height: 18px; margin: 0;
                          font-size: 13px; font-weight: 700; color: var(--brown); }
.k-ask p.k-ask-note { font-size: 13px; font-weight: 600; line-height: 18px; color: var(--brown-soft); white-space: pre-line; }
.k-ask-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.k-ask-answers button { height: 34px; min-height: 0; margin: 0; padding: 0 14px; display: inline-flex; align-items: center;
  justify-content: center; background: #fff; color: var(--brown); border: 2px solid var(--brown); border-radius: 10px;
  font-size: 15px; font-weight: 700; line-height: 1; box-shadow: none; cursor: pointer; }
.k-ask-answers button:hover { background: var(--cream); }
.k-ask-answers button.k-danger { color: var(--error); border-color: var(--error); }
.k-ask-answers button.k-picked { background: var(--brown); color: #fff; }
/* An ask answered with the microphone: a menu in the middle, the page dimmed
   behind it, everything centred, the microphone over Cancel. */
.k-ask-shade.k-ask-dim { background: rgb(79 58 51 / .35); }
.k-ask.k-ask-menu { width: min(340px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
                    overflow-y: auto; padding: 16px 16px 14px; gap: 10px;
                    left: 50%; top: 50%; transform: translate(-50%, -50%);
                    align-items: center; text-align: center; }
.k-ask-menu .k-ask-answers { flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.k-ask-menu .k-ask-answers button:not(.k-mic) { min-width: 140px; }
/* A board's bubble (askFirst's "bubble"): as search's, under what was
   tapped, its tip at it, the page left as it was. */
.k-ask.k-ask-bubble { max-width: 330px; border-width: 2.5px; border-radius: 14px;
                      padding: 10px; gap: 8px; }
.k-ask-bubble .k-ask-answers:empty { display: none; }
/* its answers -- What meal?'s -- one row of chips in the board's hand, as its
   own chips are, sized by the width of the kitchen it is in (--room, from
   askFirst) as the board's words are, so the five fit on one line on any screen */
.k-ask-bubble p { font: 400 min(19px, calc(var(--room) * .052))/1.2 "Patrick Hand", cursive; }
.k-ask-bubble .k-ask-answers { flex-wrap: nowrap; gap: min(5px, calc(var(--room) * .013)); }
.k-ask-bubble .k-ask-answers button { flex: 1 1 auto; height: min(32px, calc(var(--room) * .093));
                                      padding: 0 min(8px, calc(var(--room) * .018)); border-radius: 999px;
                                      font: 400 min(18px, calc(var(--room) * .045))/1 "Patrick Hand", cursive; }
/* Special request's, its question in one line, sized by the kitchen's width
   to fit it; and its box (specialRequest() in specials.js): the microphone,
   the words, and the arrow that sends them, in a row as search's. */
.k-ask-bubble:has(.k-talk) p { white-space: nowrap; font-size: min(19px, calc(var(--room) * .044)); }
.k-ask .k-talk { display: flex; align-items: center; gap: 8px; width: 272px; max-width: 100%; margin: 0; }
.k-talk input { flex: 1 1 auto; min-width: 0; height: 42px; box-sizing: border-box; margin: 0; padding: 0 12px;
                font-size: 16px; }
.k-talk button { flex: none; width: 42px; height: 42px; min-height: 0; margin: 0; padding: 0; display: grid;
                 place-items: center; border: 2px solid var(--brown); border-radius: 50%; background: #fff;
                 box-shadow: none; cursor: pointer; }
.k-talk button:hover { background: var(--cream); }
.k-talk button svg { width: 28px; height: 28px; }
.k-talk .k-mic { width: 46px; height: 46px; box-shadow: 0 3px 0 rgb(79 58 51 / .25); }
.k-talk .k-mic svg { width: 30px; height: 30px; }
.k-ask-answers button.k-mic { width: 72px; height: 72px; padding: 0; border: 2.5px solid var(--brown); border-radius: 50%;
                              box-shadow: 0 4px 0 rgb(79 58 51 / .25); }
.k-ask-answers button.k-mic svg { width: 42px; height: 42px; }
/* A stock refresh's categories, any tapped to be left as it is: filled in its colour once tapped. */
.k-keep { width: 100%; text-align: left; }
.k-keep-point { margin: 0 0 12px; padding-left: 20px; font-size: 14px; font-weight: 600; line-height: 19px; color: #6b5a52; }
.k-keep-point li + li { margin-top: 4px; }
.k-keep-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.k-keep-chip { min-height: 34px; margin: 0; padding: 4px 8px 4px 6px; display: flex; align-items: center;
  gap: 5px; background: #fff; color: var(--brown); border: 2px solid var(--cat); border-radius: 12px;
  font-size: 13px; font-weight: 700; line-height: 15px; text-align: left; box-shadow: none; cursor: pointer; }
.k-keep-chip[data-category=""] { --cat: var(--brown-soft); }
.k-keep-chip .cat-icon { flex: none; width: 18px; height: 18px; }
.k-keep-chip[aria-pressed="true"] { background: var(--cat); color: #fff; }
.k-keep-chip[aria-pressed="true"] .cat-icon { stroke: #fff; }