/* =====================================================================
   PantryTracker — Day-Dot Kitchen Labels: app shell + dashboard
   Tokens and fonts come from scan.css. The Shared components section at the top
   holds every component used by more than one surface (first in this sheet, so the
   dashboard rules below can override it, as they could when it lived in scan.css). The shell's layout lives in
   style.css (legacy skin); on migrated routes (body.dd, toggled per route
   in loadPage) it is re-skinned here as a steel bar. The menus and the
   notification panel are label stock on every route, so they read on the
   legacy dark pages too.
   ===================================================================== */

/* =====================================================================
   Shared components
   Rules used by more than one surface live here once, in one place. The
   surface sheets (scan, lists, add, shopping, recipes, analytics, account)
   keep only their own layout and surface-scoped overrides. Tokens and fonts
   stay in scan.css. Every sheet loads after this one except scan.css, so a
   surface can override a shared rule with an equal-specificity selector; a
   shared rule must never rely on a surface sheet to beat it.
   Also shared, defined with the dashboard above: .prep-stamp (dashboard,
   location lists, the action sheet), .prep-loc and .prep-recipe* (dashboard,
   location lists).
   ===================================================================== */

/* Line icons: 22px by default (shell: .dd-ico; scan and label glyphs: .bag-ico;
   lists, recipes and cook sheet glyphs: .lst-ico). Sizes in context are set by
   the surface with a descendant selector. */
.dd-ico, .bag-ico, .lst-ico { width: 22px; height: 22px; flex: none; }

/* Visually hidden text (bag, recipes, receipt, item editor labels). */
.bag .sr-only, .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Captions: the pre-printed condensed caps over a field or column. Used by the
   lists/recipes/shopping/planner/add captions (.lst-cap), tape label fields
   (.tape-cap), menu groups (.menu-cap), column heads (.prep-cols, .lst-cols) and
   the analytics figure captions and column heads. */
.lst-cap, .tape-cap, .menu-cap, .prep-cols, .lst-cols, .an-fig-cap, .an-h, .an-table th[scope="col"] {
    font-family: var(--dd-cond); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dd-ink-2);
}

/* Page titles: every surface's h1 (.prep-title keeps its own rule with the
   dashboard). Each surface sets its own margin and phone size. */
.lst-title, .add-title, .rcp-title, .rec-title, .pln-title, .shop-title, .an-title, .acc-title {
    font-family: var(--dd-cond); font-weight: 800; font-size: 2.6rem; line-height: 1;
    text-transform: uppercase; letter-spacing: -0.005em; color: var(--dd-ink);
}

/* Group heads and their counts: dashboard groups, shopping groups, Use soon
   days, and the side-column block titles on the dashboard and location lists. */
.prep-group-title, .shop-group-title, .use-group-title, .lst-block-title, .prep-block-title {
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase;
}
.prep-count, .shop-count, .use-count {
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.1rem; letter-spacing: 0; color: var(--dd-ink-2); font-variant-numeric: tabular-nums;
}
/* The bold figure in a page summary line (dashboard, lists, shopping, recipes). */
.lst-summary b, .prep-summary b, .shop-summary b, .rec-summary b {
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.25rem; color: var(--dd-ink); font-variant-numeric: tabular-nums;
}

/* Loading line (lists, recipes, planner, shopping, analytics, activity, account). */
.lst-loading, .an-loading, .acc-loading { margin: 8px 0; color: var(--dd-ink-2); }

/* Empty state: a title, one sentence and an ink button. Used by the location
   lists, Use soon, shopping, recipes and the planner (.lst-empty), the
   dashboard (.prep-empty) and analytics/activity (.an-empty). Each surface sets
   its own padding. */
.lst-empty { padding: 20px 14px 22px; }
.lst-empty p, .prep-empty p, .an-empty p { margin: 0 0 14px; font-size: 1.05rem; }
.lst-empty p, .prep-empty p { max-width: 40ch; }
.lst-empty-title, .prep-empty-title, .an-empty .an-empty-title { font-family: var(--dd-cond); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; line-height: 1.1; }
.lst-empty .bag-btn, .prep-empty .bag-btn, .an-empty .bag-btn { display: inline-flex; text-decoration: none; }

/* Underlined text button (location list actions, receipt checklist, recipe cards). */
.lst-linkbtn { border: 0; background: none; padding: 0; min-height: 44px; font: inherit; font-weight: 700; color: var(--dd-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Round close / back button (action sheet, recipe view, item editor, account
   sheets). */
.lst-x, .lst-back {
    display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--dd-ink); border-radius: 50%;
    background: transparent; color: var(--dd-ink); cursor: pointer;
}

/* Chips: outlined condensed-caps toggles. .lst-chip on the location filters and
   the planner toggles; .an-chip on the analytics period switch. */
.lst-chip, .an-chip {
    display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px;
    border: 1.5px solid var(--dd-ink); border-radius: 6px; background: transparent; color: var(--dd-ink); cursor: pointer;
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.lst-chip { gap: 7px; }
.lst-chip b { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lst-chip[aria-pressed="true"], .an-chip[aria-pressed="true"] { background: var(--dd-ink); color: var(--dd-on-ink); }

/* Label stock: printed paper with the 6px-inset printed frame. The sheet or
   card that holds a surface's content: location lists and Use soon
   (.lst-paper), the dashboard (.prep-sheet), shopping (.shop-paper), receipt
   (.rcp-card, .rcp-sheet), recipes (.rec-card), planner (.pln-paper,
   .pln-sheet), analytics and activity (.an-paper, .act-paper), household and
   settings (.acc-paper). Each surface keeps its own padding and layout. */
.lst-paper, .prep-sheet, .shop-paper, .rcp-card, .rcp-sheet, .rec-card, .pln-paper, .pln-sheet, .an-paper, .act-paper, .acc-paper {
    position: relative; background: var(--dd-tape); border-radius: 3px;
    filter: drop-shadow(0 1px 1.5px rgba(40, 36, 24, 0.22)) drop-shadow(0 6px 10px rgba(40, 36, 24, 0.12));
}
.tape::before, .lst-paper::before, .prep-sheet::before, .shop-paper::before, .rcp-card::before, .rcp-sheet::before,
.rec-card::before, .pln-paper::before, .pln-sheet::before, .an-paper::before, .act-paper::before, .acc-paper::before {
    content: ''; position: absolute; inset: 6px; pointer-events: none;
    border: 1px solid rgba(29, 29, 29, 0.3); border-radius: 2px;
}

/* Label strip: a short tape strip, slightly crooked. The bag's mini label
   (.tape-mini), the dashboard's running-low strips (.prep-low) and the receipt
   stepper (.rcp-steps). */
.tape-mini, .prep-low, .rcp-steps {
    background: var(--dd-tape); border-radius: 2px; box-shadow: 0 1px 1.5px rgba(40, 36, 24, 0.22); transform: rotate(-0.4deg);
}

/* Segmented control (3 options): the theme switch in the account menu and in
   Settings (.st .seg in account.css restyles it on the paper). */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--dd-ink); border-radius: 6px; }
.seg-opt { position: relative; display: block; }
.seg-opt + .seg-opt { border-left: 1.5px solid var(--dd-ink); }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span {
    display: grid; place-items: center; min-height: 44px; padding: 0 6px; border-radius: 4px;
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dd-ink);
}
.seg-opt input:checked + span { background: var(--dd-ink); color: var(--dd-on-ink); }
/* Only the outer corners round, so a filled option meets its divider square. */
.seg-opt:first-child span { border-radius: 4px 0 0 4px; }
.seg-opt:last-child span { border-radius: 0 4px 4px 0; }
.seg-opt:not(:first-child):not(:last-child) span { border-radius: 0; }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--dd-label-ink); outline-offset: 3px; border-radius: 4px; z-index: 1; }

/* Ink buttons, used on every surface (scan, add, receipt, lists, shopping,
   recipes, planner, analytics, account, dashboard and the dialogs). ink =
   primary (full width of its row), line = secondary, -sm = 46px. A not-ready
   ink button is a dashed outline. Surfaces add their own cursor, flex and
   disabled rules. */
.bag-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 0 18px; border-radius: 8px;
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.22rem; letter-spacing: 0.03em;
    transition: transform 0.12s var(--dd-ease), background-color 0.15s;
}
.bag-btn:active { transform: scale(0.98); }
.bag-btn-ink { flex: 1; border: 0; background: var(--dd-ink); color: var(--dd-on-ink); }
.bag-btn-ink[data-ready="false"] { background: transparent; color: var(--dd-ink); border: 2px dashed var(--dd-ink); }
.bag-btn-line { flex: none; border: 1.5px solid var(--dd-ink); background: transparent; color: var(--dd-ink); }
.bag-btn-sm { min-height: 46px; padding: 0 14px; font-size: 1.05rem; }
.bag-btn .bag-ico { width: 20px; height: 20px; }

/* The tape label: the masking-tape label form shared by the bag (/scan) and the
   item editor / add page, with its caption, name, date, nudges, source line,
   location pick and error. */
.tape-wrap {
    display: block; max-width: 30rem; margin: 0 auto;
    filter: drop-shadow(0 1px 1.5px rgba(40, 36, 24, 0.22)) drop-shadow(0 6px 10px rgba(40, 36, 24, 0.12));
}
.tape-wrap.is-slap { animation: bag-slap 0.34s var(--dd-ease); }
@media (prefers-reduced-motion: reduce) { .tape-wrap.is-slap { animation: none; } }
@keyframes bag-slap {
    0% { transform: translateY(-22px) scale(1.04) rotate(-2.2deg); opacity: 0;
         filter: drop-shadow(0 12px 10px rgba(40, 36, 24, 0.2)) drop-shadow(0 26px 30px rgba(40, 36, 24, 0.16)); }
    55% { opacity: 1; }
    100% { transform: none; opacity: 1;
           filter: drop-shadow(0 1px 1.5px rgba(40, 36, 24, 0.22)) drop-shadow(0 6px 10px rgba(40, 36, 24, 0.12)); }
}
.tape {
    position: relative; padding: 16px 22px 18px;
    background: var(--dd-tape); border-radius: 3px;
    transform: rotate(-0.6deg);
    transition: background-color 0.3s var(--dd-ease);
}
.tape--frozen { background: var(--dd-frost); }
.tape--frozen .tape-cap, .tape--frozen .tape-left, .tape--frozen .tape-source { color: var(--dd-frost-ink); }
.tape-frost {
    position: absolute; top: 14px; right: 18px; display: none; color: var(--dd-frost-ink);
}
.tape--frozen .tape-frost { display: block; }
.tape-frost .bag-ico { width: 26px; height: 26px; }
.tape:focus { outline: none; }

/* Pre-printed field captions: the type is the shared caption style above. */
.tape-cap { display: block; margin: 0 0 4px; padding: 0; }
.tape-field { margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 1.5px solid var(--dd-rule); min-width: 0; }
.tape-field:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.tape-where { padding-top: 10px; }
.tape-where legend { float: left; width: 100%; }

.tape-item-row { display: flex; align-items: center; gap: 12px; }
.tape-name {
    flex: 1; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1.5px dashed transparent; border-radius: 0;
    background: transparent; color: var(--dd-ink);
    font-family: var(--dd-sans); font-weight: 700; font-size: 1.32rem; line-height: 1.2;
}
.tape-name::placeholder { color: rgba(74, 70, 60, 0.75); font-weight: 600; }
.tape-name:hover, .tape-name:focus { border-bottom-color: var(--dd-rule); outline: none; }
.tape-name:focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 2px; }
.tape-photo {
    width: 56px; height: 56px; flex: none; object-fit: contain; padding: 3px;
    background: #fff; border-radius: 3px; transform: rotate(2deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tape-date-row { position: relative; display: flex; align-items: center; gap: 14px; margin: 2px 0 10px; }
.tape-date-text { display: flex; flex-direction: column; min-width: 0; }
.tape-marker {
    font-family: var(--dd-marker); font-size: 2.3rem; line-height: 1.05; color: var(--dd-ink);
    transform: rotate(-1.5deg); transform-origin: left center; white-space: nowrap;
}
.tape-marker--blank { font-size: 1.7rem; color: var(--dd-ink-2); }
.tape-left { margin-top: 4px; font-family: var(--dd-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--dd-ink-2); }
.tape-stamp {
    position: absolute; right: 0; bottom: -2px; padding: 2px 8px;
    border: 2.5px solid var(--dd-stamp); border-radius: 3px; color: var(--dd-stamp);
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase;
    transform: rotate(-6deg); mix-blend-mode: multiply;
}

.tape-nudges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tape-nudge {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 46px; padding: 0 6px; border: 1.5px solid var(--dd-ink); border-radius: 6px;
    background: rgba(255, 255, 255, 0.22); color: var(--dd-ink);
    font-family: var(--dd-cond); font-weight: 700; font-size: 1.08rem; white-space: nowrap;
}
.tape-nudge:active { background: var(--dd-ink); color: var(--dd-on-ink); }
.tape-nudge .bag-ico { width: 18px; height: 18px; }
.tape-pick { overflow: hidden; }
.tape-date-input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    opacity: 0; border: 0; cursor: pointer; font-size: 16px;
}
.tape-pick:has(.tape-date-input:focus-visible) { outline: 3px solid var(--dd-focus); outline-offset: 2px; }

.tape-source { margin: 10px 0 0; font-size: 0.95rem; color: var(--dd-ink-2); text-wrap: pretty; }
.tape-source::before {
    content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
    vertical-align: 1px; background: currentColor;
}
.tape-source--remembered, .tape-source--set { color: var(--dd-ink); font-weight: 600; }
.tape-source--unknown { font-weight: 600; }
.tape-source--unknown::before { background: transparent; border: 1.5px solid currentColor; width: 6px; height: 6px; }

.tape-where-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; clear: both; }
.tape-loc {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 60px; padding: 6px 4px; border: 1.5px solid var(--dd-ink); border-radius: 6px;
    background: rgba(255, 255, 255, 0.22); color: var(--dd-ink);
    font-family: var(--dd-cond); font-weight: 700; font-size: 1.05rem;
}
.tape-loc[aria-pressed="true"] { background: var(--dd-ink); color: var(--dd-on-ink); }
.tape-loc .bag-ico { width: 24px; height: 24px; }

.tape-error { margin: 12px 0 0; padding: 8px 10px; border-left: 0; border-radius: 4px; background: rgba(184, 36, 26, 0.1); color: #8c1a12; font-weight: 600; font-size: 0.95rem; }
.tape-error[hidden] { display: none; }
/* Day dot: a printed circle with the weekday on it (label, bag stack, location
   rows, action sheet, recipes, planner, receipt). */
/* Day-dot sticker: a printed circle with the weekday on it. */
.daydot {
    display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
    background: var(--dot); color: var(--dot-ink);
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.06em;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.25);
    transform: rotate(-5deg);
}
.daydot--blank { background: transparent; border: 2px dashed var(--dd-rule); box-shadow: none; }
.daydot--sm { width: 34px; height: 34px; font-size: 0.72rem; letter-spacing: 0.03em; }

/* Mini label: one saved item, as it sits in the bag stack, the summary and the
   undo row. Stock and crookedness come from the label strip above. */
/* Mini label: one saved item, as it sits in the bag. */
.tape-mini {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    padding: 7px 14px;
}
.tape-mini--frozen { background: var(--dd-frost); }
li:nth-child(2n) > .tape-mini { transform: rotate(0.5deg); }
li:nth-child(3n) > .tape-mini { transform: rotate(-0.9deg); }
.tape-mini-name { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-mini-qty { font-family: var(--dd-cond); font-weight: 800; font-variant-numeric: tabular-nums; }
.tape-mini-date { font-family: var(--dd-marker); font-size: 1.12rem; white-space: nowrap; }
.tape-mini-loc { display: inline-flex; color: var(--dd-ink-2); }
.tape-mini-loc .bag-ico { width: 20px; height: 20px; }
/* The action sheet: a bottom sheet on phones, a side panel from 900px. Used by
   the location lists and Use soon (item actions, quantity, discard reason) and
   by the recipe view (.lst-sheet.rec-view in recipes.css). */
/* ---------- Action sheet ---------- */
.lst-sheet-root { position: fixed; inset: 0; z-index: 400; }
.lst-scrim { position: absolute; inset: 0; background: var(--dd-scrim); }
.lst-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--dd-tape); color: var(--dd-ink);
    border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(16, 18, 17, 0.28);
    font-family: var(--dd-sans);
}
.lst-sheet:focus { outline: none; }
.lst-sheet::before {   /* grab handle */
    content: ''; display: block; width: 44px; height: 4px; margin: -8px auto 12px; border-radius: 2px; background: rgba(29, 29, 29, 0.3);
}
.lst-sheet--frost { background: var(--dd-frost); }
.lst-sheet-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.lst-sheet-head .daydot { width: 52px; height: 52px; font-size: 0.95rem; }
.lst-sheet-title { margin: 0; font-family: var(--dd-sans); font-weight: 700; font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
.lst-sheet-sub { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; font-size: 0.98rem; color: var(--dd-ink-2); }
.lst-due { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 4px; padding: 10px 0; border-top: 1.5px solid var(--dd-rule); border-bottom: 1.5px solid var(--dd-rule); }
.lst-due-date { font-family: var(--dd-marker); font-size: 1.5rem; line-height: 1.1; display: inline-block; transform: rotate(-1.5deg); }
.lst-due-none { font-weight: 600; color: var(--dd-ink-2); }
.lst-due-frost { font-family: var(--dd-cond); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dd-frost-ink); }
.lst-sheet-body { margin-top: 14px; }
.lst-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lst-acts--low { margin-top: 10px; }
.lst-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 0 12px;
    border: 1.5px solid var(--dd-ink); border-radius: 8px; background: rgba(255, 255, 255, 0.3); color: var(--dd-ink); cursor: pointer;
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.22rem; letter-spacing: 0.03em;
    transition: transform 0.12s var(--dd-ease), background-color 0.15s;
}
.lst-act:active { transform: scale(0.98); }
.lst-act:disabled { opacity: 0.45; cursor: default; transform: none; border-style: dashed; }
.lst-act--ink { border-color: var(--dd-ink); background: var(--dd-ink); color: var(--dd-on-ink); }
.lst--freezer .lst-act--ink, .lst-sheet--frost .lst-act--ink { color: var(--dd-frost); }
.lst-act--line { background: transparent; }
.lst-note { margin: 12px 0 0; font-size: 0.95rem; color: var(--dd-ink-2); max-width: 44ch; text-wrap: pretty; }
.lst-err { margin: 12px 0 0; font-weight: 700; color: var(--dd-stamp); }
.lst-err[hidden] { display: none; }
.lst-sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lst-sub-title { margin: 0; font-family: var(--dd-cond); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.03em; }
.lst-sub-title:focus { outline: none; }
.lst-stepper { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.lst-step {
    display: grid; place-items: center; height: 64px; border: 2px solid var(--dd-ink); border-radius: 8px;
    background: var(--dd-field); color: var(--dd-ink); cursor: pointer;
}
.lst-step:disabled { opacity: 0.35; cursor: default; }
.lst-step .lst-ico { width: 28px; height: 28px; stroke-width: 2.5; }
.lst-sheet-sub b, .lst-amt b, .lst-left b { font-family: var(--dd-cond); font-weight: 800; font-size: 1.08rem; color: var(--dd-ink); font-variant-numeric: tabular-nums; }
.lst-amt { text-align: center; font-family: var(--dd-cond); font-weight: 700; font-size: 1.3rem; color: var(--dd-ink-2); }
.lst-amt b { font-size: 2.8rem; line-height: 1; }
.lst-left { margin: 8px 0 14px; text-align: center; color: var(--dd-ink-2); }

/* Desktop: the sheet is a side panel. */
@media (min-width: 900px) {
    .lst-scrim { background: rgba(16, 18, 17, 0.28); }
    .lst-sheet {
        left: auto; top: 0; width: 400px; max-height: none; border-radius: 0;
        padding: 28px 24px 24px; box-shadow: -8px 0 28px rgba(16, 18, 17, 0.22);
    }
    .lst-sheet::before { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .lst-sheet { animation: lst-up 0.26s var(--dd-ease); }
    .lst-scrim { animation: lst-fade 0.2s linear; }
    @keyframes lst-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes lst-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .lst-sheet { animation-name: lst-in; }
    @keyframes lst-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
    .lst-act { transition: none; }
}
body.dd .lst-sheet :focus-visible { outline: 3px solid var(--dd-ink); outline-offset: 2px; }
/* ---------- Discard: the reason step ---------- */
.lst-reasons { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.lst-reasons .lst-sub-title { padding: 0; margin-bottom: 2px; }
.lst-reason {
    display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 14px;
    border: 1.5px solid var(--dd-ink); border-radius: 8px; background: rgba(255, 255, 255, 0.3); cursor: pointer;
    font-weight: 600; font-size: 1.05rem; color: var(--dd-ink);
}
.lst-reason input {
    appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
    border: 2px solid var(--dd-ink); border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer;
}
.lst-reason input::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--dd-ink); transform: scale(0); }
.lst-reason input:checked::after { transform: scale(1); }
.lst-reason:has(input:checked) { background: var(--dd-soft-hi); box-shadow: inset 0 0 0 1.5px var(--dd-ink); }
.lst-reason:has(input:focus-visible) { outline: 3px solid var(--dd-ink); outline-offset: 2px; }
.lst-reason input:focus-visible { outline: none; }
.lst-acts--one { grid-template-columns: minmax(0, 1fr); }
.lst-sheet-head--plain { grid-template-columns: minmax(0, 1fr) auto; }
/* The bench sheet: the editor's panel, reused by the account dialogs (Edit
   details, transfer ownership, delete account). */
/* ---------- Item editor (Edit details): bench sheet holding the same label ---------- */
.modal.ie-modal {
    display: block; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 400;
}
.ie-scrim { position: absolute; inset: 0; background: var(--dd-scrim); }
.ie-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    background-color: var(--dd-steel); background-image: linear-gradient(180deg, var(--dd-steel-hi), var(--dd-steel));
    color: var(--dd-ink); font-family: var(--dd-sans);
    border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
    color-scheme: var(--dd-scheme);
}
.ie-panel::before {   /* grab handle */
    content: ''; display: block; width: 44px; height: 4px; margin: -8px auto 12px; border-radius: 2px; background: var(--dd-rule);
}
.ie-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ie-title { margin: 0; font-family: var(--dd-cond); font-weight: 800; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; }
@media (min-width: 900px) {
    .ie-panel {
        left: auto; top: 0; width: 480px; max-height: none; border-radius: 0; padding: 26px 24px 24px;
        box-shadow: -8px 0 28px rgba(16, 18, 17, 0.28);
    }
    .ie-panel::before { display: none; }
    .ie-scrim { background: rgba(16, 18, 17, 0.28); }
}
@media (prefers-reduced-motion: no-preference) {
    .ie-panel { animation: lst-up 0.26s var(--dd-ease); }
    .ie-scrim { animation: lst-fade 0.2s linear; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .ie-panel { animation-name: lst-in; }
}

/* Line icons in the shell (all routes: they replaced emoji). */
.notif-bell .dd-ico { width: 21px; height: 21px; }
.shell-scan .bag-ico { width: 20px; height: 20px; }

.skip-link {
    position: fixed; left: 12px; top: 8px; z-index: 900; transform: translateY(-200%);
    padding: 10px 16px; border-radius: 6px; background: var(--dd-tape); color: var(--dd-label-ink);
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.05rem; text-decoration: none;
}
.skip-link:focus { transform: none; outline: 3px solid var(--dd-label-ink); outline-offset: 2px; }

/* ---------- Shell on migrated routes ---------- */
body.dd {
    background-color: var(--dd-steel);
    background-image: linear-gradient(180deg, var(--dd-steel-hi), var(--dd-steel) 45%, var(--dd-steel-lo));
    background-attachment: fixed;
    color: var(--dd-ink); font-family: var(--dd-sans);
    color-scheme: var(--dd-scheme);
}
body.dd ::selection { background: var(--dd-tape-edge); color: var(--dd-label-ink); }
body.dd :focus-visible { outline: 3px solid var(--dd-ink); outline-offset: 2px; }
:where(body.dd) a { color: inherit; }
:where(body.dd) a:hover { text-decoration: none; }

body.dd .shell-bar {
    background: var(--dd-steel-hi); border-bottom: 1px solid var(--dd-hair);
}
body.dd .shell-brand {
    font-family: var(--dd-cond); font-weight: 800; letter-spacing: 0.01em; color: var(--dd-ink); gap: 0;
    font-size: 1.45rem;
}
body.dd .brand-flix { color: inherit; font-weight: 800; letter-spacing: inherit; }
body.dd .hamburger-btn { color: var(--dd-ink); }
body.dd .hamburger-line { background: var(--dd-ink); }
/* The current page lives behind this button: the hamburger (phones) or the
   avatar's account menu. Same underline vocabulary as More on desktop. */
body.dd .hamburger-btn.has-active { box-shadow: inset 0 -3px 0 var(--dd-ink); border-radius: 6px 6px 0 0; }

body.dd .nav-link {
    font-family: var(--dd-cond); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--dd-ink-2); border-radius: 6px; padding: 0 13px; min-height: 44px;
}
body.dd .nav-link:hover { background: var(--dd-hover); color: var(--dd-ink); }
body.dd .nav-link.active { background: var(--dd-ink); color: var(--dd-on-ink); box-shadow: none; }
body.dd .nav-link.has-active { background: transparent; color: var(--dd-ink); box-shadow: inset 0 -3px 0 var(--dd-ink); border-radius: 6px 6px 0 0; }
body.dd .shell-scan {
    background: var(--dd-ink); color: var(--dd-on-ink); border-radius: 6px;
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
}
body.dd .shell-scan:hover { background: var(--dd-ink); opacity: 0.9; }

body.dd .notif-bell {
    background: transparent; border: 1.5px solid var(--dd-ink); color: var(--dd-ink);
    display: grid; place-items: center;
}
body.dd .notif-bell:hover { background: var(--dd-hover); }
body.dd .notif-badge {
    background: var(--dd-ink); color: var(--dd-on-ink); font-family: var(--dd-cond); font-weight: 800; font-size: 0.8rem;
    box-shadow: 0 0 0 2px var(--dd-steel-hi);
}
body.dd .avatar { background: var(--dd-ink); color: var(--dd-on-ink); font-family: var(--dd-cond); font-weight: 800; font-size: 1.2rem; }
body.dd .avatar.has-active { box-shadow: 0 0 0 2.5px var(--dd-steel-hi), 0 0 0 4.5px var(--dd-ink); }

body.dd .toast { background: var(--dd-ink); color: var(--dd-on-ink); border: 0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
body.dd .toast-action { color: var(--dd-on-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 899.98px) {
    body.dd .bottom-nav {
        background: var(--dd-steel-hi); backdrop-filter: none; -webkit-backdrop-filter: none;
        border-top: 1px solid var(--dd-hair);
    }
    body.dd .bottom-nav-item {
        color: var(--dd-ink-2); font-family: var(--dd-cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
        min-height: 48px; justify-content: center;
    }
    body.dd .bottom-nav-item.active { color: var(--dd-ink); }
    body.dd .bottom-nav-item.active .bottom-nav-label { box-shadow: inset 0 -2.5px 0 var(--dd-ink); }
    body.dd .bottom-nav-scan-tape { box-shadow: 0 2px 4px rgba(40, 36, 24, 0.3); }
}
@media (min-width: 900px) {
    body.dd .main-content { padding-top: 26px; }
}

/* ---------- Nav entry: the Scan tape in the bottom bar and sidebar ---------- */
.bottom-nav-scan { flex: 1.15; justify-content: center; }
.bottom-nav-scan-tape {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 66px; min-height: 48px; margin-top: -18px; padding: 7px 12px 6px;
    background: var(--dd-tape); color: var(--dd-ink);
    font-family: var(--dd-cond); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 2px; transform: rotate(-2deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.bottom-nav-scan-tape .bag-ico { width: 24px; height: 24px; }
.bottom-nav-scan.active .bottom-nav-scan-tape { background: var(--dd-tape-hi); }
.nav-link .nav-icon .bag-ico { width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- Menus + notifications: label stock, every route ----------
   One layer, one panel at a time. Phones get a bottom sheet; from 900px each
   panel drops down under the button that opened it (position set in JS). */
.pop-layer { position: fixed; inset: 0; z-index: 500; }
.pop-layer[hidden], .pop[hidden] { display: none; }
.pop-scrim { position: absolute; inset: 0; background: var(--dd-scrim); }
.pop {
    position: absolute; left: 0; right: 0; bottom: 0; display: block;
    max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 14px calc(14px + env(safe-area-inset-bottom));
    background: var(--dd-tape); border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(16, 18, 17, 0.3);
    font-family: var(--dd-sans); font-size: 1rem; line-height: 1.35;
}
.pop:focus { outline: none; }
.pop::before {   /* grab handle */
    content: ''; display: block; width: 44px; height: 4px; margin: -8px auto 8px; border-radius: 2px; background: rgba(29, 29, 29, 0.3);
}
.pop :focus-visible { outline: 3px solid var(--dd-label-ink); outline-offset: 2px; }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 4px 10px; }
.pop-title {
    margin: 0; font-family: var(--dd-cond); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase;
}
.pop-x {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
    border: 1.5px solid var(--dd-ink); border-radius: 50%; background: transparent; color: var(--dd-ink); cursor: pointer;
}
.pop-x .dd-ico { width: 20px; height: 20px; }
.pop .menu-list, .pop .notif-list { list-style: none; margin: 0; padding: 0; }
.menu-group { margin-top: 2px; }
.menu-cap { margin: 10px 0 2px; padding: 0 10px; }
.menu-link {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: 6px; background: transparent; color: var(--dd-ink); cursor: pointer;
    font: 600 1.05rem/1.2 var(--dd-sans); text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.menu-link:hover { background: var(--dd-hover); text-decoration: none; }
.menu-link[aria-current="page"] { background: var(--dd-ink); color: var(--dd-on-ink); }
.menu-ico { display: inline-flex; flex: none; }
.menu-ico .dd-ico, .menu-ico .bag-ico { width: 20px; height: 20px; }
.menu-list--end { margin-top: 8px !important; padding-top: 8px !important; border-top: 1.5px solid var(--dd-rule); }

.acct-id { display: flex; align-items: center; gap: 12px; padding: 4px 10px 12px; }
.acct-initial {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: var(--dd-ink); color: var(--dd-on-ink); font-family: var(--dd-cond); font-weight: 800; font-size: 1.3rem;
}
.acct-text { min-width: 0; }
.acct-name { margin: 0; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.acct-house { margin: 0; font-size: 0.95rem; color: var(--dd-ink-2); overflow-wrap: anywhere; }
.acct-house[hidden] { display: none; }

.theme-seg { margin: 10px 0 4px; padding: 0 10px; border: 0; min-width: 0; }
.theme-seg .menu-cap { padding: 0; margin: 0 0 6px; }

/* Notifications: one ruled list; unread = solid dot, bold text and a NEW tag
   (read rows get a hollow dot), so it never depends on colour alone. */
.pop--notif .pop-head { padding-bottom: 8px; }
.notif-item {
    display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 8px; align-items: start;
    min-height: 56px; padding: 6px 0 6px 10px; border-top: 1px solid var(--dd-hair);
}
.notif-dot { width: 10px; height: 10px; margin: 17px 0 0 0; border-radius: 50%; background: var(--dd-ink); border: 1.5px solid var(--dd-ink); }
.notif-item:not(.unread) .notif-dot { background: transparent; border-color: var(--dd-ink-2); }
.notif-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 0; }
.notif-msg { font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.notif-item.unread .notif-msg { font-weight: 700; }
.notif-new {
    display: inline-block; margin-right: 7px; padding: 0 5px; border: 1.5px solid var(--dd-ink); border-radius: 3px;
    font-family: var(--dd-cond); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 1px;
}
.notif-time { font-family: var(--dd-cond); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; color: var(--dd-ink-2); }
.pop .notif-dismiss { align-self: start; color: var(--dd-ink); border-radius: 6px; }
.pop .notif-dismiss:hover { background: var(--dd-hover); }
.pop .notif-dismiss .dd-ico { width: 20px; height: 20px; }
.notif-state { padding: 18px 10px 14px; border-top: 1px solid var(--dd-hair); }
.notif-state-title { margin: 0 0 4px; font-family: var(--dd-cond); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; line-height: 1.1; }
.notif-state p { margin: 0; color: var(--dd-ink-2); max-width: 36ch; }

@media (min-width: 900px) {
    .pop-scrim { background: transparent; }
    .pop {
        left: auto; bottom: auto; right: var(--pop-right, 20px); top: var(--pop-top, 62px);
        width: 320px; max-height: calc(100vh - var(--pop-top, 62px) - 16px); max-height: calc(100dvh - var(--pop-top, 62px) - 16px);
        padding: 12px 10px 12px; border-radius: 4px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(29, 29, 29, 0.35);
    }
    .pop::before { display: none; }
    .pop--nav { right: auto; left: var(--pop-left, 20px); width: 280px; }
    .pop--notif { width: 400px; }
    .pop--nav .pop-head, .pop--account .pop-head { display: none; }
    [data-wide-hide] { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .pop { animation: pop-up 0.24s var(--dd-ease); }
    @keyframes pop-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .pop { animation-name: pop-drop; }
    @keyframes pop-drop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Dashboard: the prep list ---------- */
.prep { max-width: 1120px; color: var(--dd-ink); }
.prep-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 20px;
    margin: 4px 0 22px;
}
.prep-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.prep .prep-title {
    margin: 0; font-family: var(--dd-cond); font-weight: 800; font-size: 2.6rem; line-height: 1;
    text-transform: uppercase; letter-spacing: -0.005em; color: var(--dd-ink);
}
.prep-today { font-family: var(--dd-marker); font-size: 1.6rem; line-height: 1; transform: rotate(-1.5deg); display: inline-block; }
.prep-scan { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-decoration: none; }
.prep-scan .bag-ico { width: 22px; height: 22px; }
.prep-summary { grid-column: 1; margin: 0; font-size: 1.12rem; color: var(--dd-ink-2); }

.prep-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 32px; align-items: start; }

/* The sheet: one tall printed label-roll sheet. */
.prep-sheet { color: var(--dd-ink); padding: 16px 22px 20px; }
.prep-cols, .prep-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.prep-cols {
    padding: 2px 0 8px; border-bottom: 1.5px solid var(--dd-rule);
}
.prep-cols span:last-child { width: 48px; text-align: center; }
.prep-group { padding-top: 14px; }
.prep-group-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; }
.prep-rows { list-style: none; margin: 0; padding: 0; }
.prep-row { position: relative; min-height: 66px; padding: 8px 0; border-bottom: 1px solid rgba(29, 29, 29, 0.18); }
.prep-group:last-child .prep-row:last-child { border-bottom: 0; }
.prep-due { display: flex; align-items: center; gap: 8px; }
.prep-date { font-family: var(--dd-marker); font-size: 1.12rem; line-height: 1.1; white-space: nowrap; display: inline-block; transform: rotate(-1.5deg); }
.prep-item { display: flex; flex-direction: column; min-width: 0; }
.prep-name {
    font-weight: 700; font-size: 1.08rem; line-height: 1.25; text-decoration: none;
    overflow-wrap: anywhere; padding: 2px 0; position: relative;
}
.prep-name::after { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -4px; }   /* 44px tap height without growing the row */
@media (hover: hover) { .prep-name:hover { text-decoration: underline; text-underline-offset: 3px; } }
.prep-meta { font-size: 0.92rem; color: var(--dd-ink-2); }
.prep-held { font-family: var(--dd-cond); font-weight: 700; font-size: 0.95rem; color: var(--dd-ink); }
.prep-held:empty { display: none; }
.prep-stamp {
    display: inline-block; padding: 0 5px; border: 2px solid var(--dd-stamp); border-radius: 3px;
    color: var(--dd-stamp); font-family: var(--dd-cond); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
    transform: rotate(-6deg); mix-blend-mode: multiply;
}
.prep-acts { display: flex; gap: 8px; }
.prep-tick, .prep-bin {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 2px solid var(--dd-ink); border-radius: 5px; background: var(--dd-field); color: var(--dd-ink); cursor: pointer;
}
.prep-tick, .prep-bin { transition: transform 0.12s var(--dd-ease), background-color 0.15s; }
.prep-tick:active, .prep-bin:active { transform: scale(0.98); }
.prep-tick .dd-ico { width: 28px; height: 28px; stroke-width: 2.5; }
.prep-tick .dd-ico path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.26s var(--dd-ease); }
.prep-tick[aria-pressed="true"] { background: var(--dd-ink); color: var(--dd-on-ink); }
.prep-tick[aria-pressed="true"] .dd-ico path { stroke-dashoffset: 0; }
.prep-bin { width: auto; padding: 0 12px; font-family: var(--dd-cond); font-weight: 800; font-size: 1.05rem; }
.prep-bin[aria-pressed="true"] { background: var(--dd-ink); color: var(--dd-on-ink); }

/* The tick: a marker line struck through the row while it's held. */
.prep-row::after {
    content: ''; position: absolute; left: -4px; right: 64px; top: 50%; height: 3px; border-radius: 2px;
    background: var(--dd-ink); transform: rotate(-1.2deg) scaleX(0); transform-origin: left center;
    transition: transform 0.28s var(--dd-ease); pointer-events: none;
}
.prep-row--past::after { right: 124px; }
.prep-row.is-held::after { transform: rotate(-1.2deg) scaleX(1); }
.prep-row.is-held .prep-due, .prep-row.is-held .prep-name, .prep-row.is-held .prep-meta { opacity: 0.5; }
.prep-row.is-held.is-binned .prep-tick, .prep-row.is-held:not(.is-binned) .prep-bin { opacity: 0.35; pointer-events: none; }

.prep-empty { padding: 26px 26px 28px; }

/* Side column */
.prep-side { display: grid; gap: 26px; align-content: start; }
.prep-block-title { margin: 0 0 10px; }
.prep-locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prep-loc {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; justify-content: center;
    border: 1.5px solid var(--dd-ink); border-radius: 6px; background: var(--dd-soft); text-decoration: none;
    font-family: var(--dd-cond); font-weight: 700; font-size: 1.05rem;
}
@media (hover: hover) { .prep-loc:hover { background: var(--dd-soft-hi); } }
.prep-loc .bag-ico { width: 24px; height: 24px; }
.prep-loc-n { font-family: var(--dd-cond); font-weight: 800; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.prep-low-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prep-low {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    padding: 5px 6px 5px 14px;
}
.prep-low:nth-child(2n) { transform: rotate(0.5deg); }
.prep-low:nth-child(3n) { transform: rotate(-0.9deg); }
.prep-low-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-low-qty { font-family: var(--dd-cond); font-weight: 800; font-size: 1.05rem; color: var(--dd-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prep-list-btn .dd-ico { width: 18px; height: 18px; }
.prep-recipe {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 56px;
    border: 1.5px solid var(--dd-ink); border-radius: 8px; text-decoration: none; background: var(--dd-soft);
}
@media (hover: hover) { .prep-recipe:hover { background: var(--dd-soft-hi); } }
.prep-recipe-name { font-weight: 700; font-size: 1.08rem; }
.prep-recipe-uses { color: var(--dd-ink-2); font-size: 0.95rem; }
.prep-more {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-self: start;
    color: var(--dd-ink-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.prep-more .dd-ico { width: 20px; height: 20px; }

@media (max-width: 900px) {
    .prep-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
    .prep-head { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding-right: 0; }
    .prep-scan { display: none; }   /* the bottom-nav Scan tape is the phone's scan action */
    .prep .prep-title { font-size: 2.15rem; }
    .prep-sheet { padding: 14px 16px 18px; margin: 0 -2px; }
    .prep-cols, .prep-row { grid-template-columns: 82px minmax(0, 1fr) auto; column-gap: 10px; }
    .prep-due { flex-direction: column; align-items: flex-start; gap: 3px; }
    .prep-date { font-size: 1rem; }
    .prep-row--past::after { right: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .prep-row::after, .prep-tick .dd-ico path, .prep-tick, .prep-bin { transition: none; }
}

/* The bag's search field draws its own ring on the wrapper (.bag-search:focus-within). */
body.dd .bag-search input:focus-visible { outline: none; }

/* The top bar carries Scan on desktop; keep the page-level one for phones/tablets only. */
@media (min-width: 900px) {
    .prep-scan { display: none; }
}

/* The shared consequence confirm on migrated routes: tape stock, ink buttons, never red. */
body.dd .confirm-dialog {
    background: var(--dd-tape); color: var(--dd-label-ink); border: 1px solid rgba(29, 29, 29, 0.3); border-radius: 4px;
    font-family: var(--dd-sans);
}
body.dd .confirm-dialog .confirm-msg { color: var(--dd-label-ink); font-weight: 600; font-size: 1.05rem; }
body.dd .confirm-dialog .btn {
    min-height: 48px; padding: 0 16px; border-radius: 8px; cursor: pointer;
    font-family: var(--dd-cond); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em;
}
body.dd .confirm-dialog .btn-primary, body.dd .confirm-dialog .btn-danger { background: var(--dd-label-ink); color: var(--dd-tape); border: 0; }
body.dd .confirm-dialog .btn-secondary { background: transparent; color: var(--dd-label-ink); border: 1.5px solid var(--dd-label-ink); }
body.dd .confirm-dialog .btn:focus-visible { outline: 3px solid var(--dd-label-ink); outline-offset: 2px; }