/* ============================================================================
 * app.css — Cookbook's own components.
 *
 * components.css holds the shared shell vocabulary that every app in this
 * family uses (.topbar, .view, .tabbar, .sheet, .btn, .chip, .card, .toast).
 * This file holds the things only a cookbook has: recipe cards, the ingredient
 * picker grid, the week planner, the shopping list.
 *
 * Same naming convention: flat kebab-case, component prefix, prefix-noun-
 * modifier. No BEM, no utility classes, no framework.
 *
 * Same hover rule too — EVERY :hover in this file lives in the one block at
 * the bottom, gated on `@media (hover: hover)`. On a touch screen Safari
 * sticks :hover to the last-tapped element, so the next card rendered into
 * that slot inherits a highlight it never earned.
 * ========================================================================= */

/* ---------- food art -----------------------------------------------------
 * Every drawing from ingredient-art.js renders through this class. `block`
 * matters: an inline SVG sits on the text baseline and leaves a few pixels of
 * descender space under it, which in a tight grid reads as the tiles being
 * misaligned by one pixel — and it is genuinely hard to find if you are
 * looking at the grid rather than at the SVG. */
.food {
  display: block;
  flex: none;
}

/* The standard tinted round that food art sits on. The tint is the
 * ingredient's category, set inline from CATEGORIES — that is the one place
 * in the app where a colour is set from JS, and it is because the value is
 * data rather than style. */
.food-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  flex: none;
}

.food-badge-sm { width: 40px; height: 40px; }
.food-badge-lg { width: 64px; height: 64px; border-radius: var(--radius); }

/* ---------- toolbars ------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.toolbar .btn { flex: none; }

.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-raised);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  /* 16px exactly. iOS Safari zooms the whole page when a focused input's
   * font-size is below 16px, and it does not zoom back out — the app is then
   * stuck slightly too big with the tab bar off-screen. */
  font-size: 16px;
  padding: 0;
}
.search input:focus { outline: none; }
.search-icon { color: var(--ink-faint); flex: none; }

/* A row of chips that scrolls sideways rather than wrapping to four lines.
 * The negative margin lets it bleed to the screen edges so the last chip does
 * not look clipped mid-scroll. */
.chip-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 14px 10px;
  margin: 0 -14px;
  scrollbar-width: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { flex: none; }

/* ---------- recipe cards -------------------------------------------------- */

.recipe-list { display: flex; flex-direction: column; gap: 10px; }

.recipe-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: inherit;
  font: inherit;
}

/* The card's picture is the first ingredient's drawing. It is not decoration:
 * a list of twenty recipe titles is a wall of text you have to read, and the
 * same list with a tomato, a fish and a loaf down the left is one you can
 * scan. Deliberately the FIRST ingredient rather than a "main" one — there is
 * no reliable way to pick a main, and first is what the cook wrote first. */
.recipe-card-art {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  flex: none;
}

.recipe-card-body { flex: 1; min-width: 0; }

.recipe-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  /* Two lines, then ellipsis. A long title must not push the card taller than
   * its neighbours or the list stops scanning cleanly. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recipe-card-meta {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.recipe-card-fav { flex: none; font-size: 1rem; color: var(--accent-ink); }

/* ---------- recipe detail ------------------------------------------------- */

.recipe-head { margin-bottom: 4px; }
.recipe-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.2;
}
.recipe-sub { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.875rem; }

/* Grid, not flex-wrap. With flex, a fourth tile drops to its own row and
 * stretches to the full width, which reads as a mistake rather than as a
 * fourth stat. auto-fit keeps every tile the same size however many there
 * are, and there are between two and four depending on the recipe. */
.recipe-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.stat {
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  text-align: center;
}
.stat-value { display: block; font-weight: 800; font-size: 0.95rem; }
.stat-label { display: block; font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 10px;
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}
.section-note { font-size: 0.78rem; color: var(--ink-faint); }

/* Servings stepper. The reason this exists at all is that a recipe written
 * for 4 is almost never the number you are cooking for, and re-doing the
 * arithmetic in your head is where people give up and cook the wrong amount. */
.scaler {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
}
/* 44px, not the 34px this started at. "Thumbs, not cursors" is a house rule
 * and a stepper you have to aim at is the single most annoying way to break
 * it — you are pressing it repeatedly, so every miss compounds. */
.scaler-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.scaler-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.scaler-value { min-width: 76px; text-align: center; font-weight: 700; font-size: 0.875rem; }

.ing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.ing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
}
.ing-row + .ing-row { border-top: 1px solid var(--line); }

.ing-text { flex: 1; min-width: 0; }
.ing-name { font-weight: 600; font-size: 0.925rem; }
.ing-note { display: block; font-size: 0.78rem; color: var(--ink-faint); }
.ing-amount {
  flex: none;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.step-list { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}
.step-row + .step-row { border-top: 1px solid var(--line); }
.step-num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 800;
}
.step-text { flex: 1; line-height: 1.5; font-size: 0.925rem; }

/* ---------- the add-recipe wizard ---------------------------------------- */

.wizard-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.wizard-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.wizard-dot.done { background: var(--accent); }

.wizard-pane { display: none; }
.wizard-pane.active { display: block; }

.wizard-foot {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.wizard-foot .btn { flex: 1; }

/* The two ways in, offered as equals on the first screen. Paste is listed
 * first and marked as the quick one because it IS — the field-by-field path
 * exists for recipes that are not written down anywhere. */
.route-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  margin-bottom: 10px;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.route-btn-icon { font-size: 1.6rem; flex: none; }
.route-btn-title { display: block; font-weight: 800; font-size: 0.95rem; }
.route-btn-sub { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }

.field { margin-bottom: 14px; }
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ink-faint); }

.input, .textarea, .select {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 16px;   /* see .search input — below 16px iOS zooms and stays zoomed */
  font-family: inherit;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.textarea-tall { min-height: 220px; }

.field-row { display: flex; gap: 8px; }
.field-row > * { flex: 1; min-width: 0; }

/* ---------- the ingredient picker ----------------------------------------
 * The centrepiece. A grid of food you tap, rather than a text box you type
 * into — which is the whole reason the catalogue has drawings at all. */

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
}

.picker-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* Tall enough for a thumb without the label wrapping to three lines. */
  min-height: 84px;
}
.picker-tile.picked { border-color: var(--accent); background: var(--accent-wash); }
.picker-tile-label {
  font-size: 0.68rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-soft);
  /* Two lines then clip: "Brussels sprouts" must not make its tile taller
   * than the row and knock the grid out of alignment. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.picker-cat-head {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.picker-cat-head:first-child { margin-top: 4px; }

/* The list of what has been added so far, under the grid. */
.picked-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }

.picked-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}
.picked-row-name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked-qty { width: 64px; flex: none; padding: 7px 8px; font-size: 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink); }
.picked-unit { width: 92px; flex: none; padding: 7px 4px; font-size: 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink); }
.picked-del { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 10px; font-size: 1rem; }

/* ---------- equipment ------------------------------------------------------
 * Tool badges: a drawing plus a name, on the cool grey ground that separates
 * equipment from food everywhere in the app. Used in three places with the
 * same markup — the recipe page, the wizard's review screen, and the picked
 * list in the equipment step, where they additionally act as remove buttons.
 * ------------------------------------------------------------------------ */

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--cat-tool);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.tool-badge-art {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.tool-badge-name { white-space: nowrap; }

/* The picked list in the wizard is made of the same badges, but they are
 * buttons that remove the tool. The ✕ is what says so — without it a tappable
 * badge and a decorative one look identical, and people tap the wrong one. */
.tool-badge-on {
  cursor: pointer;
  border-color: var(--accent);
  background: var(--accent-wash);
  padding-right: 8px;
}
.tool-badge-x { color: var(--ink-faint); font-size: 0.8rem; }

/* An equipment chip in the filter row. The drawing is what keeps it from
 * reading as one more tag in a row of tags. */
.chip-tool {
  gap: 6px;
  padding-left: 6px;
}
.chip-tool .food {
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-sizing: content-box;
}
.chip-tool.active .food { background: var(--bg-raised); }

/* ---------- the week planner ---------------------------------------------- */

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
/* Two lines: what the week IS ("This week", "3 weeks ago") over what it
 * covers ("17 – 23 Aug"). The relative line is the one that answers the
 * question you actually have after tapping an arrow four times, and a date
 * range alone cannot answer it without arithmetic. */
.week-nav-text { flex: 1; min-width: 0; text-align: center; }
.week-nav-label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  font-family: var(--font-display);
}
.week-nav-dates { display: block; font-size: 0.75rem; color: var(--ink-faint); }

/* A week that has already happened is a record. Fully readable — looking up
 * what you cooked is the point of being able to scroll back — but visibly
 * settled, so the days you can still change stand out. */
.day-card.past { background: var(--bg-sunken); border-style: dashed; }
.day-card.past .slot-add { opacity: 0.55; }

.day-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  margin-bottom: 10px;
  overflow: hidden;
}
/* Today gets a left edge in the accent rather than a filled background: a
 * filled card would out-shout the recipe pictures inside every other card. */
.day-card.today { border-left: 4px solid var(--accent); }

.day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px 6px;
}
.day-name { font-weight: 800; font-size: 0.9rem; }
.day-date { font-size: 0.78rem; color: var(--ink-faint); }
.day-card.today .day-name { color: var(--accent-ink); }

/* Tight vertical padding, because a week is 21 of these stacked and the
 * planner has to stay scannable rather than becoming a scroll marathon. The
 * controls inside are still full-size targets; it is only the gaps that
 * shrink. */
.slot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 12px 5px;
  border-top: 1px solid var(--line);
}
/* Wide enough for BREAKFAST, which is the longest of the three and was
 * overflowing a 62px column straight into the meal sitting next to it. Sized
 * to the longest label rather than to the average, and the labels are a fixed
 * set — if a fourth meal is ever added, re-measure. The smoke test asserts
 * this from the rendered text width, so the device font cannot break it
 * somewhere you are not looking. */
.slot-label {
  flex: none;
  width: 76px;
  padding-top: 14px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.planned {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 10px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}
.planned-name { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planned-serves { flex: none; font-size: 0.72rem; color: var(--ink-faint); }
.planned-del { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 10px; }

.slot-add {
  align-self: flex-start;
  padding: 6px 14px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--line-strong);
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

/* ---------- the grocery list ---------------------------------------------- */

/* Two panes — check the kitchen, then shop — switched by a segmented control
 * rather than by a fourth tab. They are two halves of one job and the app is
 * meant to have three tabs. */
.segmented {
  display: flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  margin-bottom: 14px;
}
.segmented-btn {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.segmented-btn.active { background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-sm); }

.pane { display: none; }
.pane.active { display: block; }

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  margin-bottom: 6px;
}
.check-row.answered-have { border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-bg); }
.check-row.answered-need { border-color: color-mix(in srgb, var(--need) 40%, transparent); background: var(--need-bg); }

.check-body { flex: 1; min-width: 0; }
.check-name { font-size: 0.9rem; font-weight: 700; }
.check-amount { display: block; font-size: 0.76rem; color: var(--ink-faint); }
.check-from { display: block; font-size: 0.72rem; color: var(--ink-faint); margin-top: 2px; }

/* Two buttons, not a checkbox. A checkbox has two states and this question has
 * three — yes, no, and not-answered-yet — and the third is the one that makes
 * the check worth doing. An unticked box cannot tell you whether it means
 * "I don't have it" or "I haven't looked". */
.check-actions { flex: none; display: flex; gap: 6px; }
.check-btn {
  min-width: 52px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.check-btn.on-have { background: var(--good); border-color: transparent; color: #fff; }
.check-btn.on-need { background: var(--need); border-color: transparent; color: #fff; }

.aisle { margin-bottom: 18px; }
.aisle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.buy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.buy-row.bought { opacity: 0.5; }
.buy-row.bought .buy-name { text-decoration: line-through; }

/* The hit area is 44px; the circle you can see is 26px. Sizing the button to
 * the circle would make the one control you press fifty times in a supermarket
 * the smallest thing on the screen. */
.buy-tick {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.buy-tick-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  color: transparent;
  font-size: 0.8rem;
  font-weight: 900;
}
.buy-row.bought .buy-tick-dot { background: var(--good); border-color: var(--good); color: #fff; }

.buy-body { flex: 1; min-width: 0; }
.buy-name { font-size: 0.9rem; font-weight: 700; }
.buy-amount { display: block; font-size: 0.76rem; color: var(--ink-faint); }

.progress-line {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-sunken);
  overflow: hidden;
  margin-bottom: 14px;
}
.progress-fill { height: 100%; background: var(--good); border-radius: 3px; transition: width 240ms ease; }

.summary {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.summary-tile {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  text-align: center;
}
.summary-value { display: block; font-weight: 800; font-size: 1.1rem; }
.summary-label { display: block; font-size: 0.7rem; color: var(--ink-faint); }

/* ---------- misc ---------------------------------------------------------- */

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--ink-soft); font-size: 0.85rem; }
.tiny { font-size: 0.76rem; color: var(--ink-faint); }
.mt-16 { margin-top: 16px; }

/* A floating "add" button that clears the tab bar. Derived from --tabbar-h and
 * --safe-b like everything else anchored to the bottom, so there is exactly
 * one number to change if the bar ever gets taller. */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  z-index: 30;
  min-height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-size: 0.925rem;
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- pointer-only affordances -------------------------------------
 * Every :hover rule in this file, in one place. See the note at the top. */
@media (hover: hover) {
  .recipe-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
  .route-btn:hover { border-color: var(--accent); }
  .picker-tile:hover { border-color: var(--line-strong); }
  .picker-tile.picked:hover { border-color: var(--accent); }
  .slot-add:hover { border-color: var(--accent); color: var(--accent-ink); }
  .buy-row:hover { border-color: var(--line-strong); }
  .check-btn:hover { border-color: var(--ink-faint); }
  .fab:hover { background: var(--accent-soft); }
  .scaler-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
  .planned-del:hover, .picked-del:hover { color: var(--bad); background: var(--bad-bg); }
  .segmented-btn:hover { color: var(--ink); }
  .tool-badge-on:hover { border-color: var(--bad); }
  .tool-badge-on:hover .tool-badge-x { color: var(--bad); }
}

/* ---------- overrides of shared components -------------------------------
 * Kept together and at the end, so it is obvious what this app changes about
 * the shared vocabulary and why. Everything here is a deliberate divergence,
 * not an accident of ordering.
 * ------------------------------------------------------------------------ */

/* The toast normally sits just above the tab bar, which is exactly where the
 * floating "Add recipe" button is. They overlapped, and the toast — the thing
 * that appears for two seconds — was covering the button people are trying to
 * press. Raise it clear of the FAB rather than moving the FAB, since the
 * toast is the transient one. */
.toast {
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 78px);
}

/* The kit ships .chip at about 29px tall, which is below the >= 44px touch
 * target the house rules state ("thumbs, not cursors") — and chips are not
 * decoration here, they are how you filter recipes and choose which days the
 * shopping list covers. Raised for this app rather than left as an exception,
 * and the smoke test measures every visible control so it stays raised.
 *
 * Worth pushing back into the starter kit: this is a kit-wide gap, not a
 * Cookbook one. */
.chip {
  min-height: 44px;
  padding-left: 14px;
  padding-right: 14px;
}

/* A chip that commits something rather than filtering — choosing Breakfast /
 * Lunch / Dinner when scheduling a recipe. Same height as any other chip now;
 * this only widens it, because a mis-tap here costs an actual mistake in the
 * plan rather than a filter you can just tap again. */
.chip-tap {
  padding-left: 20px;
  padding-right: 20px;
}

/* The amount and unit controls in the ingredient picker. Both are things you
 * tap dozens of times while entering one recipe. */
.picked-qty, .picked-unit {
  min-height: 44px;
}

/* --accent is a FILL; --accent-ink is accent-coloured TEXT. See the long note
 * in tokens.css. The shared components were written when the accent was a
 * dark near-black and one token did both jobs; with a light honey accent,
 * honey-on-cream text sits around 2:1 and is effectively invisible. These
 * four rules are the complete list of places the kit uses the accent as text.
 *
 * Retheme to a dark accent and these can go — but check them, do not assume. */
.tab.active { color: var(--accent-ink); }

@media (hover: hover) {
  .btn:hover        { border-color: var(--accent); color: var(--accent-ink); }
  .tab.active:hover { color: var(--accent-ink); }
}

/* The focus ring, same reasoning: it has to be visible against the paper, and
 * the fill-weight honey is not. :where() in base.css keeps specificity at
 * zero, so this plain selector wins without !important. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--accent-ink);
}