:root {
  --bg:     #f6f6f4;
  --card:   #ffffff;
  --ink:    #1a1a1a;
  --muted:  #6b6b6b;
  --line:   #dcdcd6;
  --accent: #2f6f4e;
  --error:  #a33;
  --warn:   #8a6d1f;
}

* { box-sizing: border-box; }

/* The cookbook's title and the login tagline are written in a hand (static/fonts: SIL OFL). */
@font-face { font-family: "Dancing Script"; font-weight: 700; font-display: swap;
             src: url("fonts/dancing-script.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; }

input, select, button {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

button { cursor: pointer; background: #f0f0ec; }
button:hover { background: #e6e6e0; }
/* Not button.big: the file pickers are <label class="big filebtn"> wrapped round
   a hidden input, because that is the only way to restyle a file input. They are
   meant to read as the same button, so the rule cannot be tied to the element. */
.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; }
.error   { color: var(--error); font-size: 14px; margin: 6px 0 0; min-height: 0; }
.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-date { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.item button { padding: 3px 9px; font-size: 14px; }
.empty { color: var(--muted); font-style: italic; }
.shop-name { flex: 1 1 auto; min-width: 0; }

/* people */
/* 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: #4f3a33; }
.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; }

/* the chef (chefLoader() in app.js): the drawing as wide as there is room
   for, what she says under it */
.chef-loader { max-width: 480px; margin: 0 auto; text-align: center; }
.chef-stage { display: block; width: 100%; height: auto; }
.chef-says { margin: 6px 0 0; color: #7a6a62; font-size: 15px; min-height: 1.45em; }
.anim-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.anim-modes button { padding: 5px 14px; font-size: 14px; }
.anim-modes button[aria-pressed="true"] { background: var(--accent); color: #fff;
                                          border-color: var(--accent); }

.people-section { margin-top: 16px; }
.people-section:first-child { margin-top: 4px; }
.people-section h3 { font-size: 14px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.people-section .row { margin-bottom: 6px; }
.invite-link input { flex: 1 1 auto; min-width: 0; }
.password-form { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }

#debug { background: #14161a; 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; }

#gate { max-width: 360px; margin: 12vh auto 0; padding: 22px 20px 18px; background: #fff; color: #4f3a33;
        border: 3px solid #4f3a33; 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; }
#gate h1 { font-size: 25px; font-weight: 600; color: #4f3a33; display: flex; align-items: baseline; gap: 7px; }
#gate h1 small { font-size: 17px; font-weight: 400; color: #8a5a3b; }
/* The tagline, in the cookbook title's hand. */
.gate-tagline { margin: 10px 0 0; text-align: center; font: 700 26px/1.25 "Dancing Script", cursive; color: #6b4636;
                 letter-spacing: .01em; }
#gate form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#gate input { padding: 11px 12px; border: 2px solid #4f3a33; border-radius: 12px; color: #4f3a33; }
#gate input::placeholder { color: #9a8a82; }
#gate input:focus { outline: none; box-shadow: 0 0 0 3px #f4d58d; }
#gate .k-btn { margin-top: 4px; }
#gate .hint { margin: 0 0 4px; color: #7a6a62; font-size: 14px; }
#gate button.link { color: #7a6a62; }

/* voice pipeline stages */
.stage { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 14px 0; }
.stage-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stage-tag { font-weight: 700; font-size: 12px; text-transform: uppercase;
             letter-spacing: .05em; }
.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: #14161a; 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; }

/* 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 105 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-vinegars-condiments"] { --cat: #445874; }
[data-category="sauces-spreads"] { --cat: #53c1c1; }
[data-category="baking"]         { --cat: #3e399d; }
[data-category="breakfast"]      { --cat: #875c31; }
[data-category="nuts-seeds"]     { --cat: #c15382; }
[data-category="snacks-sweets"]  { --cat: #6b78a8; }

/* receipt */
label.filebtn { display: inline-block; text-align: center; }
.hint { color: var(--muted); font-size: 13px; margin: 2px 0 0; }

/* 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 #4f3a33; 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: #4f3a33; font-size: 15px; font-weight: 700; }
#app-menu button:hover { background: #fdf6e3; }
#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 #4f3a33; 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; }

/* 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; }

/* usage: one tbody per pantry, 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); }

/* 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 #4f3a33; border-radius: 22px; overflow: hidden;
                background: #d7d7df; }
.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 cart's three ways of adding sit tucked behind it,
   and fan out to their places when it is pressed. */
.kitchen [data-action] { cursor: pointer; outline: none; }
.kitchen [data-action]:focus-visible { outline: 3px solid var(--accent); }
.k-option { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center;
            transform: translateX(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; }
.kitchen.k-adding .k-option:nth-child(3) { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .k-option { transition: none; } }
.k-back { display: none; }
.k-flipped .k-back { display: inline; }

/* 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 #4f3a33; 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 #4f3a33; }
#kitchen-room[data-location="pantry"] { background: #efe2cc; }
#kitchen-room[data-location="pantry"] .k-board { height: 10px; background: #b88d6a;
                                                 border-block: 2.5px solid #4f3a33; }
#kitchen-bar { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px;
               display: flex; justify-content: space-between; align-items: center; }
#kitchen-room:not(.full) #kitchen-bar { display: none; }

/* 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 #4f3a33; 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 #4f3a33; background: #bcd3c4; }
.k-crisper-front i { width: 64px; height: 10px; border: 2px solid #4f3a33; border-radius: 5px;
                     background: #9dbba9; }
.k-empty { grid-column: 1 / -1; align-self: end; margin: 0 4px 12px; color: #4f3a33;
           font-style: italic; opacity: .75; }
.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: #4f3a33;
          border: 2px solid #4f3a33; 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: #fbfaf6; }
.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: #7a6a62; 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 #4f3a33; 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 #4f3a33;
           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: #4f3a33; border: 2px solid #4f3a33; 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: #4f3a33; }
.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: #7a6a62; }
.k-card-actions .item-delete { margin-left: auto; color: var(--error); }
#k-sheet .item-edit { border-top: none; padding: 0; }

/* 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
   cart's ways of adding and search share one sheet rising from the bottom, and
   the book's search rises over the book the same way; the review is a slate
   in the middle of the screen. */
#add-sheet, #recipe-search { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; max-width: 720px;
             margin: 0 auto; max-height: 85vh; max-height: 85dvh; overflow-y: auto;
             overscroll-behavior: contain; background: #fff; color: #4f3a33;
             border: 2.5px solid #4f3a33; border-bottom: none; 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; }

.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         min-height: 46px; padding: 10px 18px; background: #fff; color: #4f3a33;
         border: 2.5px solid #4f3a33; border-radius: 14px; font-weight: 700;
         box-shadow: 0 3px 0 rgb(79 58 51 / .25); cursor: pointer; }
.k-btn:hover { background: #fbfaf6; }
.k-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(79 58 51 / .25); }
.k-btn.k-go { background: #f4d58d; }
.k-btn.k-go:hover { background: #f7df9f; }
.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; }

#add-sheet input:not([type=radio]), #recipe-search input, #review-card input:not([type=checkbox]), #review-card select,
#review-card textarea {
  border: 2px solid #4f3a33; border-radius: 12px; background: #fff; color: #4f3a33; }
#add-sheet input:focus, #recipe-search input:focus, #review-card input:focus, #review-card select:focus,
#review-card textarea:focus {
  outline: none; box-shadow: 0 0 0 3px #f4d58d; }

/* 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 { width: 88px; height: 88px; padding: 0; display: grid; place-items: center;
         border: 2.5px solid #4f3a33; border-radius: 50%; background: #fff;
         box-shadow: 0 4px 0 rgb(79 58 51 / .25); }
.k-mic:hover { background: #fbfaf6; }
.k-mic svg { width: 50px; height: 50px; }
.k-mic.recording { background: #f6d4cf; 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: #7a6a62; 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; }

/* a receipt: two buttons */
.k-choices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }

/* an item typed in: what, where, and how many or how full */
.k-add { display: flex; flex-direction: column; gap: 14px; }
#add-name { font-size: 17px; padding: 11px 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 #4f3a33; border-radius: 999px;
               background: #fff; color: #4f3a33; font-size: 14px; font-weight: 700; }
.k-chip input:checked + span { background: #4f3a33; color: #fff; }
.k-chip input:focus-visible + span { box-shadow: 0 0 0 3px #f4d58d; }
/* 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: 0 1 120px; min-width: 88px; margin-left: auto; }

/* search: what it finds, as the tiles on the shelves, grouped by where they live */
#search-results { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#search-results:empty { display: none; }
.k-found { padding: 8px 8px 10px; border: 2px solid #4f3a33; border-radius: 12px; }
.k-found[data-location="freezer"] { background: #e2edf3; }
.k-found[data-location="fridge"] { background: #f4f6f1; }
.k-found[data-location="pantry"] { background: #efe2cc; }
.k-found[data-location="spices"],
.k-found[data-location="drinks"] { background: #8ea7bd; }
.k-found-place { margin: 0 2px 6px; font-size: 14px; font-weight: 700; }
.k-found-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.k-none { margin: 0; color: #7a6a62; font-style: italic; text-align: center; }
/* the book's search: what it finds, a recipe a line, and what in it was asked for */
#recipe-search-results { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
#recipe-search-results:empty { display: none; }
.k-recipe-found { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0;
                  padding: 8px 14px; text-align: left; }
.k-recipe-found b { font-size: 16px; }
.k-recipe-found small { font-size: 13px; font-weight: 600; color: #7a6a62; }

/* 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 { 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: #4f3a33;
           border: 3px solid #4f3a33; 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: #7a6a62; font-size: 14px; font-weight: 600; }
.k-heard { margin: 0 0 14px; color: #7a6a62; 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; }
#receipt-thumb { display: block; max-width: 160px; max-height: 200px; margin: 0 0 14px;
                 border: 2px solid #4f3a33; border-radius: 10px; }
.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; }

/* Help's walk-through: the screen dimmed but for what is being shown, ringed
   in the cart'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: #f4d58d; 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; }
/* something you might say, set off under the step's words */
#tour-slate .tour-example { margin-top: 10px; padding-left: 10px; border-left: 3px solid #f4d58d;
                            font-style: italic; }
.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 #4f3a33; border-radius: 50%; }
.tour-dots i.on { background: #4f3a33; }

/* 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 #4f3a33; border-radius: 12px; }
#proposed li { display: flex; flex-direction: column; gap: 8px; }
#proposed li.empty { border-style: dashed; color: #7a6a62; font-style: italic; }
.act-top { display: flex; align-items: center; gap: 8px; }
.act-kind { flex: 0 0 auto; padding: 1px 9px; border: 2px solid #4f3a33; border-radius: 999px;
            font-size: 12px; font-weight: 700; white-space: nowrap; }
.act-add { background: #d3e5c4; }
.act-remove { background: #f6d4cf; }
.act-set_qty { background: #d7ecf7; }
.act-set_level { background: #f4d58d; }
#review-card .act-why { flex: 1 1 auto; min-width: 0; color: #7a6a62; font-size: 13px;
                        font-style: italic; overflow-wrap: anywhere; }
/* a brand read off a receipt, on offer beside the badge: dashed until it is
   taken, then filled like a picked chip in the add form */
.act-brand { flex: 0 1 auto; min-width: 0; padding: 0 11px 0 9px; border: 2px dashed #4f3a33;
             border-radius: 999px; background: #fff; color: #4f3a33; font-size: 13px; font-weight: 700;
             line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#review-card button.act-brand { height: 30px; cursor: pointer; }
#review-card button.act-brand:hover { background: #fbfaf6; }
#review-card button.act-brand[aria-pressed="true"] { border-style: solid; background: #4f3a33; color: #fff; }
#review-card button.act-brand:focus-visible { outline: none; box-shadow: 0 0 0 3px #f4d58d; }
#review-card .act-drop { flex: 0 0 auto; width: 30px; height: 30px; margin: 0 0 0 auto; padding: 0;
                         border: 2px solid #4f3a33; border-radius: 50%; background: #fff;
                         color: #4f3a33; font-size: 18px; line-height: 1; }
#review-card .act-drop:hover { background: #f6d4cf; }
.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: #7a6a62; 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: #4f3a33; }
#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: #7a6a62; }
.qty-now { font-weight: 700; }

/* the pipeline's workings, for the admin, folded away at the foot */
.k-debug { margin-top: 14px; color: #7a6a62; 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: #14161a; 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-name, #book-close, #list-close { background: rgba(255, 255, 255, .92); color: #4f3a33;
                               border: 2px solid #4f3a33; border-radius: 999px;
                               padding: 5px 12px; font-weight: 700; font-size: 15px; }

/* 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: #4f3a33; }
#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 #4f3a33; border-radius: 18px;
              box-shadow: inset 6px 0 0 #a24f30, 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 { width: 56px; height: 44px; padding: 0; display: grid; place-items: center;
            background: #ead9b5; border: 2.5px solid #4f3a33; border-radius: 12px 12px 0 0;
            cursor: pointer; }
.book-tab:hover { background: #f1e4c6; }
.book-tab svg { width: 30px; height: 30px; }
.book-tab.on { height: 50px; background: #fdf6e3; border-bottom-color: #fdf6e3; }
/* a tab of the chef's hat's own: smaller, and joined to its right side */
.book-tab.book-subtab { width: 42px; height: 34px; margin-left: -8.5px; border-radius: 0 10px 0 0; }
.book-tab.book-subtab svg { width: 24px; height: 24px; }
.book-tab.book-subtab.on { height: 40px; }
/* 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: #4f3a33;
  background-color: #fdf6e3; background-attachment: local;
  background-image:
    linear-gradient(to right, transparent 37px, #e2a3a0 37px, #e2a3a0 39px, transparent 39px),
    repeating-linear-gradient(to bottom, transparent 0 21px, #c3d6e5 21px 22px, transparent 22px 28px);
  border: 2.5px solid #4f3a33; }
#book-page { border-radius: 4px 12px 12px 12px; box-shadow: inset 14px 0 12px -12px rgb(79 58 51 / .4); }
#book-page #book-title { margin: 0 0 var(--rule); font: 700 30px/var(--rule) "Dancing Script", cursive;
              color: #4f3a33; text-transform: none; letter-spacing: 0; }

#book-page h2 { color: #4f3a33; 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), #list-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, #list-page .k-status { min-height: var(--rule); line-height: var(--rule); }  /* on the fifth line */
#book-page .row, #list-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 .count-label,
#book-page .recipe-ings, #book-page .stage-meta { color: #7a6a62; }

#book-page button:not(.k-mic), #book-page label.filebtn {
  min-height: 40px; padding: 8px 14px; background: #fff; color: #4f3a33; border: 2.5px solid #4f3a33;
  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, #book-page label.filebtn:hover { background: #fbfaf6; }
#book-page button:not(.k-mic):active, #book-page label.filebtn:active {
  transform: translateY(2px); box-shadow: 0 1px 0 rgb(79 58 51 / .25); }
#book-page button.big:not(.k-mic), #book-page label.big { background: #f4d58d; }
#book-page button.big:not(.k-mic):hover, #book-page label.big:hover { background: #f7df9f; filter: none; }
#book-page button.link { min-height: 0; padding: 2px 4px; background: none; border: none; box-shadow: none;
                         color: #7a6a62; 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]), #list-page input {
  height: 40px; background: #fff; color: #4f3a33; border: 2px solid #4f3a33; border-radius: 12px; }
/* written on the page: no box, the words on the lines themselves */
#book-page textarea, #list-page textarea { padding: 0 2px; line-height: var(--rule); background: transparent; color: #4f3a33;
                      border: none; border-radius: 0; resize: none; }
#book-page textarea::placeholder, #list-page textarea::placeholder { color: #a8998f; }
#book-page textarea:focus, #list-page textarea:focus { outline: none; box-shadow: none; background: rgb(244 213 141 / .2); }
#book-page input:focus, #list-page input:focus { outline: none; box-shadow: 0 0 0 3px #f4d58d; }
#book-page .row.wrap { gap: 10px; }

/* foods to avoid: a food a line, on the lines, its cross at the end */
#book-page #avoid-form { margin-bottom: var(--rule); }
.avoid-line { display: flex; align-items: center; justify-content: space-between; gap: 10px;
              height: var(--rule); font-size: 17px; font-weight: 600; }
#book-page button.avoid-drop { width: 26px; min-height: 0; height: 26px; padding: 0; border-width: 2px;
                               border-radius: 50%; font-size: 16px; line-height: 1; box-shadow: none; }

/* A recipe, saved or suggested, written on the page rather than set on it in
   a box: its name on one line, what is in it under that, and a blank line
   before the next. */
#book-page .recipe, #book-page .suggestion { margin: 0 0 var(--rule); padding: 0; background: none;
                                             border: none; }
#book-page .recipe-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin: 0; }
#book-page .recipe-name { flex: 1 0 100%; font-size: 19px; font-weight: 700; line-height: var(--rule); }
#book-page .recipe-head .muted { font-size: 14px; }
#book-page button.save-suggestion {
  min-height: 0; height: var(--rule); padding: 0; background: none; border: none; box-shadow: none;
  color: #4f3a33; font-size: 14px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; }
#book-page button.save-suggestion:hover { background: none; color: #a24f30; }
#book-page button.save-suggestion:active { transform: none; }
/* A saved recipe's Check: a tile in the margin, left of the red line, beside
   the name, reading up the page -- its words set upright, then the whole of it
   turned over. Turned over, its shadow is drawn above to fall below, and a
   press moves it up to go down. */
#book-page .recipe .k-check {
  position: absolute; top: 0; left: -46px; min-height: 0; padding: 8px 5px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: #fff; border: 2px solid #4f3a33; border-radius: 8px;
  font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 -3px 0 rgb(79 58 51 / .25); }
#book-page .recipe .k-check:active { transform: rotate(180deg) translateY(-2px);
                                     box-shadow: 0 -1px 0 rgb(79 58 51 / .25); }
/* 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 app.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 #f4d58d; 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 #4f3a33; 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: #4f3a33; 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: #fdf6e3; }
: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: #7a6a62; }
#book-page .recipe-ings { margin: 0; padding: 0; list-style: none; font-size: 15px; color: #4f3a33; }
#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: #b8a79b; }
#book-page .recipe-result { margin: 0; padding: 0; background: none; border: none; }
#book-page .recipe-result details { margin: 0; font-size: 14px; }
/* A saved recipe's ingredients and how to make it, and an idea's method: each
   shut under a line of its own till tapped (fold() in app.js), and written
   in from the line's arrow when open. */
#book-page .recipe-fold { margin: 0; font-size: 15px; }
#book-page .recipe-fold > summary { color: #4f3a33; font-size: 15px; font-weight: 600; cursor: pointer; }
#book-page .recipe-fold > summary::marker { color: #b8a79b; }
#book-page .recipe-fold > :not(summary) { padding-left: 18px; }
#book-page .recipe-fold > ol.steps { margin: 0; padding-left: 40px; }  /* the numbers where the dashes are */
#book-page .steps li::marker { color: #b8a79b; }
#book-page .check-summary { margin: 0; font-size: 15px; }
/* A check's answer: how many of the ingredients you have, and the rest onto
   the shopping list -- small tiles, as Check is, on the line the answer
   starts on; the one to press in the plus's yellow. */
#book-page .check-tiles { display: flex; align-items: center; gap: 8px; height: var(--rule); }
#book-page .check-tiles .k-count, #book-page .check-tiles .k-to-list {
  display: inline-flex; align-items: center; height: 24px; min-height: 0; padding: 0 9px;
  background: #fff; color: #4f3a33; border: 2px solid #4f3a33; border-radius: 8px;
  font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 2px 0 rgb(79 58 51 / .25); }
#book-page .check-tiles .k-count.k-all { background: #dff0e4; color: #245c3c; }
#book-page .check-tiles .k-to-list { background: #f4d58d; }
#book-page .check-tiles .k-to-list:hover { background: #f7df9f; }
#book-page .check-tiles .k-to-list:disabled { background: #fff; opacity: 1; box-shadow: none; }
#book-page .check-lines { margin: 0; }
#book-page .check-lines li { padding: 0; font-size: 15px; }
#book-page .suggestion .recipe-head, #book-page .suggestion .check-summary { margin: 0; }
#book-page .act-why, #book-page .steps { margin: 0; font-size: 15px; line-height: var(--rule); }
#book-page .chk { border: 1.5px solid #4f3a33; border-radius: 999px; line-height: 16px;
                  text-transform: none; letter-spacing: 0; }
#book-page .empty { color: #7a6a62; }
/* 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-ingredients li { gap: 6px; }
#book-page .r-name { flex: 1 1 auto; min-width: 0; }
#book-page .r-qty { flex: 0 0 58px; min-width: 0; text-align: center; }
#book-page .r-type { flex: 0 1 90px; min-width: 0; }
#book-page #recipe-ingredients button.act-drop { flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
                                                border-radius: 50%; font-size: 0; }
#book-page #recipe-ingredients button.act-drop::after { content: "\D7"; font-size: 18px; }
/* a recipe a search turned to, marked a moment */
#book-page .recipe.k-here { animation: k-here 1.6s ease-out; }
@keyframes k-here { from { background: rgb(244 213 141 / .6); } }
@media (prefers-reduced-motion: reduce) { #book-page .recipe.k-here { animation: none; } }

/* What to make: the microphone at the head of the page, two lines tall, and
   the ask written on those two lines beside it. Under them a line for what
   the microphone is doing, blank until it is doing something. Then how many
   options, and on the two lines under that its number, marked as if by
   highlighter, with a minus and a plus, and Suggest at the right. Then how
   many items to buy from the store, a slider over its three words. */
#book-page .suggest-ask { display: flex; align-items: flex-start; gap: 10px; }
#book-page .suggest-ask .k-mic { flex: 0 0 auto; width: calc(var(--rule) * 2); height: calc(var(--rule) * 2);
                                 box-shadow: 0 3px 0 rgb(79 58 51 / .25); }
#book-page .suggest-ask .k-mic svg { width: 36px; height: 36px; }
#book-page #suggest-text { flex: 1 1 auto; min-width: 0; height: calc(var(--rule) * 2); }
#book-page #suggest-status { text-align: left; }
#book-page [data-section="suggest"] .count-label { display: block; font-size: 15px; line-height: var(--rule); }
#book-page .suggest-send { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                           height: calc(var(--rule) * 2); }
#book-page #suggest-go { flex: 0 0 auto; }
#book-page .count-steps { display: flex; align-items: center; gap: 10px; }
#book-page #suggest-count { flex: 0 0 44px; width: 44px; height: var(--rule); padding: 0; border: none;
                            border-radius: 6px; background: #f7e3a6; text-align: center; font-weight: 700;
                            appearance: textfield; -moz-appearance: textfield; }
#book-page #suggest-count::-webkit-outer-spin-button,
#book-page #suggest-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#book-page .count-steps button { min-height: 0; width: 36px; height: 32px; padding: 0; border-width: 2px;
                                 border-radius: 10px; font-size: 20px; line-height: 1; }
#book-page .suggest-buy { margin-top: var(--rule); }
/* think harder: a switch drawn the kitchen's way on two lines, and when it is
   on, how long to allow on the line under it */
#book-page .suggest-deep { margin-top: var(--rule); }
#book-page .deep-toggle { position: relative; display: flex; align-items: center; gap: 10px;
                          height: calc(var(--rule) * 2); font-size: 15px; font-weight: 700; cursor: pointer; }
#book-page .deep-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#book-page .deep-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; background: #fff;
                          border: 2.5px solid #4f3a33; border-radius: 999px; transition: background .15s; }
#book-page .deep-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
                                 border-radius: 50%; background: #4f3a33; transition: transform .15s; }
#book-page .deep-toggle input:checked + .deep-switch { background: #f4d58d; }
#book-page .deep-toggle input:checked + .deep-switch::after { transform: translateX(20px); }
#book-page .deep-toggle input:focus-visible + .deep-switch { box-shadow: 0 0 0 3px #f4d58d; }
#book-page #suggest-deep-hint { font-size: 14px; }
#book-page #suggest-buy { display: block; width: 100%; height: var(--rule); margin: 0; padding: 0;
                          background: none; border: none; border-radius: 0; box-shadow: none;
                          -webkit-appearance: none; appearance: none; cursor: pointer; }
#book-page #suggest-buy::-webkit-slider-runnable-track {
  height: 6px; background: #fff; border: 2px solid #4f3a33; border-radius: 999px; }
#book-page #suggest-buy::-moz-range-track {
  height: 6px; background: #fff; border: 2px solid #4f3a33; border-radius: 999px; }
#book-page #suggest-buy::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -8px; background: #f4d58d;
  border: 2.5px solid #4f3a33; border-radius: 50%; box-shadow: 0 2px 0 rgb(79 58 51 / .25); }
#book-page #suggest-buy::-moz-range-thumb {
  box-sizing: border-box; width: 22px; height: 22px; background: #f4d58d;
  border: 2.5px solid #4f3a33; border-radius: 50%; box-shadow: 0 2px 0 rgb(79 58 51 / .25); }
#book-page #suggest-buy:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(244 213 141 / .7); }
#book-page #suggest-buy:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(244 213 141 / .7); }
#book-page .buy-stops { display: flex; height: var(--rule); font-size: 14px; color: #7a6a62; }
#book-page .buy-stops span { flex: 1 1 0; cursor: pointer; }
#book-page .buy-stops span:nth-child(2) { text-align: center; }
#book-page .buy-stops span:last-child { text-align: right; }
#book-page .buy-stops .on { color: #4f3a33; font-weight: 700; }
#book-page #suggestions { margin-top: var(--rule); }

/* 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 cart's fan out 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: #f4d58d; transition: transform .25s ease; }
:is(#book-page, #list-page) .k-adder .k-plus:hover { background: #f7df9f; }
: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: #f4d58d; }
: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; } }
:is(#book-page, #list-page) [data-way-of] { display: none; }
:is(#book-page, #list-page) [data-way="say"] > [data-way-of="say"],
:is(#book-page, #list-page) [data-way="type"] > [data-way-of="type"],
:is(#book-page, #list-page) [data-way="photo"] > [data-way-of="photo"] { display: flex; }
:is(#book-page, #list-page) [data-section][data-way] { margin-bottom: var(--rule); }  /* a blank line under */
#book-page #recipe-text-go { flex: 0 0 auto; }

/* 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 #recipe-ingredients { margin: 0; }
#book-page #recipe-ingredients li { height: calc(var(--rule) * 2); padding: 0; }
#book-page #recipe-add-line { height: var(--rule); padding: 0; }
#book-page .field-label { margin: 0; line-height: var(--rule); }

/* 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: #4f3a33; }
#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 #4f3a33;
                      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; font-size: 22px; line-height: var(--rule); color: #4f3a33;
                         text-transform: none; letter-spacing: 0; }
#list-page #shopping-count { font-size: 15px; line-height: 1; color: #7a6a62; }  /* not a taller line */
#list-page .item { display: block; min-height: var(--rule); padding: 0; border: none; }
#list-page .shop-name { display: block; font-size: 15px; font-weight: 400; line-height: var(--rule); color: #4f3a33; }
#list-page .shop-name.k-name::after { content: none; }
#list-page .empty { color: #7a6a62; }
#list-page p { margin: 0; }
#list-page .k-adder { top: 47px; }  /* on the title's line, the third */
#list-page .k-note { font-size: 15px; color: #7a6a62; }
#list-page .row .k-btn { flex: 0 0 auto; line-height: 20px; }  /* 46px: with the gap, two lines */
#list-page .row.wrap { padding: 5px 0; row-gap: 10px; }  /* two lines, or four when it wraps */

/* recipes */
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; }
#recipe-ingredients { list-style: none; padding: 0; margin: 4px 0; }
#recipe-ingredients 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 0 120px; min-width: 0; padding: 6px 8px; font-size: 14px; }
#recipe-ingredients .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-head { display: flex; align-items: center; gap: 8px; }
.recipe-name { font-weight: 600; flex: 1 1 auto; }
.recipe-head button { padding: 4px 10px; font-size: 14px; }
.recipe-result { margin-top: 8px; padding: 8px 10px; background: #fafaf7;
                 border: 1px solid var(--line); border-radius: 6px; }
.check-summary { font-weight: 600; font-size: 14px; }
.check-summary.ok  { color: var(--accent); }
.check-summary.bad { color: var(--error); }
.check-lines { list-style: none; padding: 0; margin: 6px 0 0; }
.check-lines li { display: flex; align-items: flex-start; gap: 10px;
                  padding: 3px 0; font-size: 14px; }
.check-text { flex: 1 1 auto; min-width: 0; }
.k-amount { font-weight: 700; }
.stock-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
                font-size: 13px; color: var(--muted); cursor: pointer;
                white-space: nowrap; }
.stock-toggle input { width: 15px; height: 15px; padding: 0; margin: 0;
                      accent-color: var(--accent); }
.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: #245c3c; }
/* you own a form of it -- not a warning, just worth a glance */
.chk-maybe   { background: #e3ebf5; color: #2f4a73; }
.recipe-result details { margin-top: 6px; font-size: 13px; }
.recipe-result summary { color: var(--muted); cursor: pointer; }

/* suggestions: one card each, nothing stored until you save one */
#suggest-text  { flex: 1 1 auto; }
#suggest-count { flex: 0 0 72px; text-align: center; }
.count-label   { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
#suggest-go    { margin-left: auto; }
.suggestion { border-top: 1px solid var(--line); padding: 12px 0 14px; }
.suggestion .recipe-head { margin-bottom: 2px; }
.suggestion .check-summary { margin: 7px 0 2px; }
.suggestion > details { margin: 8px 0 10px; }
.suggestion > details > summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.steps { white-space: pre-wrap; font-size: 14px; margin: 6px 0 0; }
.save-suggestion { font-size: 14px; padding: 5px 12px; }

/* 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: #245c3c; 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 only the level it is at, still in its own slot: same box,
   same width, same colour, same place -- the empty slots just go blank. 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; color: transparent; }
.levels:not(.open) .level + .level { border-left-color: transparent; }
.levels:not(.open):hover { background: #f0f0ec; }
.item .level-save, #k-sheet .level-save { background: var(--accent); color: #fff;
                                          border-color: var(--accent); font-weight: 600; }
.item .level-save:hover, #k-sheet .level-save:hover { filter: brightness(1.08); }
#add-spice-form { margin-bottom: 0; }
#add-spice-name { flex: 1 1 auto; min-width: 0; }
#add-spice-level { flex: 1 1 auto; min-width: 0; }
.f-level { flex: 0 0 auto; }


/* recipe ingredient rows: name, how many, unit */
.r-qty  { flex: 0 0 74px; min-width: 0; padding: 6px 8px; font-size: 14px;
          text-align: center; appearance: textfield; -moz-appearance: textfield; }
.r-qty::-webkit-outer-spin-button,
.r-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.r-type { flex: 0 0 104px; min-width: 0; padding: 6px 8px; font-size: 14px; }

/* 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: #7a6a62; }
.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); }
.edit-error { color: var(--error); font-size: 13px; margin: 4px 0 0; }

/* 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 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 app.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: #14161a; 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 pantry 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: #245c3c; 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; }

/* The delete dialog (see askDelete): three answers stacked, each a full-width
   target on a phone. */
#delete-dialog { border: 1px solid var(--line); border-radius: 8px; padding: 16px;
                 width: min(22rem, calc(100vw - 32px)); background: var(--card);
                 color: var(--ink); }
#delete-dialog::backdrop { background: rgb(0 0 0 / .35); }
#delete-dialog p { margin: 0 0 14px; }
.dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.dialog-actions button { padding: 10px 14px; font-size: 16px; border-radius: 6px; }
.dialog-actions .delete-for-good { color: var(--error); }