/* =====================================================================
   PantryTracker — Day-dot kitchen labels
   Tokens, fonts and the scan-in surface (bag mode, /scan). The tape label, day dot,
   ink buttons and the Scan nav entry it introduced are shared components and live
   in kitchen.css (Shared components).
   A stainless prep bench, masking-tape use-by labels, day-dot stickers
   and the date written in marker. Day colours name the weekday an item
   is due, never urgency; red is only ever the worded EXPIRED stamp.
   ===================================================================== */

@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/permanent-marker-400.woff2') format('woff2'); }
/* Permanent Marker's "1" is a single curved stroke that reads as ")".
   Declared after the face above, this one wins for U+0031 only, so every
   marker date takes a plain upright 1 from Barlow Condensed. */
@font-face { font-family: 'Permanent Marker'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/barlow-condensed-800.woff2') format('woff2'); unicode-range: U+0031; }

:root {
    --dd-steel: #e4e6e3;
    --dd-steel-hi: #eef0ed;
    --dd-steel-lo: #d4d8d3;
    --dd-tape: #efe2bf;
    --dd-tape-hi: #f6edd3;
    --dd-tape-edge: #ddcb9a;
    --dd-ink: #1d1d1d;
    --dd-ink-2: #4a463c;
    --dd-rule: rgba(29, 29, 29, 0.42);
    --dd-cam: #101211;
    --dd-stamp: #b8241a;
    --dd-focus: var(--dd-ink);
    --dd-frost: #e2ebee;
    --dd-frost-ink: #2d4753;
    /* Ink on label stock never changes with the theme; --dd-ink above is the
       bench's ink (text and lines sitting directly on the steel). */
    --dd-label-ink: #1d1d1d;
    --dd-label-ink-2: #4a463c;
    --dd-label-rule: rgba(29, 29, 29, 0.42);
    --dd-label-field: #fbf8ef;
    --dd-on-ink: var(--dd-tape);          /* text on an ink-filled control */
    --dd-field: #fbf8ef;                  /* field fill on the bench */
    --dd-soft: rgba(255, 255, 255, 0.28); /* translucent fill on the bench */
    --dd-soft-hi: rgba(255, 255, 255, 0.55);
    --dd-hair: rgba(29, 29, 29, 0.14);    /* hairline on the bench */
    --dd-hover: rgba(29, 29, 29, 0.06);
    --dd-placeholder: #6b665a;
    --dd-bench-frost: var(--dd-frost-ink);   /* freezer-tinted text on the bench */
    --dd-scrim: rgba(16, 18, 17, 0.4);
    --dd-scheme: light;
    --dd-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dd-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --dd-marker: 'Permanent Marker', 'Barlow Condensed', cursive;
    --dd-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Night kitchen (dark theme) ----------
   The bench goes dark steel, the label stock stays printed buff (slightly
   dimmed so it doesn't glare) with its ink unchanged, and everything sitting
   directly on the bench inverts to light lines and text. Day-dot colours and
   the EXPIRED stamp are untouched. theme.js sets data-theme="light"|"dark"
   from the saved choice; with no attribute (System) the media query decides. */
:root[data-theme="dark"] {
    --dd-steel: #262a28;
    --dd-steel-hi: #313634;
    --dd-steel-lo: #1b1e1d;
    --dd-tape: #e1d4af;
    --dd-tape-hi: #eadfc0;
    --dd-tape-edge: #cdbd8b;
    --dd-ink: #ece8dc;
    --dd-ink-2: #b9b6a8;
    --dd-rule: rgba(236, 232, 220, 0.4);
    --dd-frost: #d4dfe3;
    --dd-label-field: #ece3c8;
    --dd-on-ink: #181a19;
    --dd-field: rgba(255, 255, 255, 0.08);
    --dd-soft: rgba(255, 255, 255, 0.06);
    --dd-soft-hi: rgba(255, 255, 255, 0.09);
    --dd-hair: rgba(236, 232, 220, 0.18);
    --dd-hover: rgba(236, 232, 220, 0.08);
    --dd-placeholder: #a3a195;
    --dd-bench-frost: #d4dfe3;
    --dd-scrim: rgba(0, 0, 0, 0.55);
    --dd-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dd-steel: #262a28;
        --dd-steel-hi: #313634;
        --dd-steel-lo: #1b1e1d;
        --dd-tape: #e1d4af;
        --dd-tape-hi: #eadfc0;
        --dd-tape-edge: #cdbd8b;
        --dd-ink: #ece8dc;
        --dd-ink-2: #b9b6a8;
        --dd-rule: rgba(236, 232, 220, 0.4);
        --dd-frost: #d4dfe3;
        --dd-label-field: #ece3c8;
        --dd-on-ink: #181a19;
        --dd-field: rgba(255, 255, 255, 0.08);
        --dd-soft: rgba(255, 255, 255, 0.06);
        --dd-soft-hi: rgba(255, 255, 255, 0.09);
        --dd-hair: rgba(236, 232, 220, 0.18);
        --dd-hover: rgba(236, 232, 220, 0.08);
        --dd-placeholder: #a3a195;
        --dd-bench-frost: #d4dfe3;
        --dd-scrim: rgba(0, 0, 0, 0.55);
        --dd-scheme: dark;
    }
}

/* Label stock keeps the printed ink in either theme: every surface that is a
   piece of label re-declares the ink tokens, so descendants that use
   var(--dd-ink) read dark-on-buff without being touched. */
.tape, .tape-mini, .bag-tally, .bag-iconbtn, .bag-chip, .bottom-nav-scan-tape,
.prep-sheet, .prep-low, .lst-paper, .lst-sheet, .pop, .rcp-steps, .rcp-card, .rcp-sheet, .shop-paper,
.rec-card, .pln-paper, .pln-sheet, .cook-sheet, .an-paper, .act-paper, .acc-paper {
    --dd-ink: var(--dd-label-ink);
    --dd-ink-2: var(--dd-label-ink-2);
    --dd-rule: var(--dd-label-rule);
    --dd-field: var(--dd-label-field);
    --dd-on-ink: var(--dd-tape);
    --dd-focus: var(--dd-label-ink);
    --dd-hair: rgba(29, 29, 29, 0.14);
    --dd-hover: rgba(29, 29, 29, 0.06);
    color-scheme: light;
}
.tape, .tape-mini, .prep-sheet, .prep-low, .lst-paper, .pop, .rcp-steps, .rcp-card, .rcp-sheet, .shop-paper,
.rec-card, .pln-paper, .pln-sheet, .cook-sheet, .an-paper, .act-paper, .acc-paper { color: var(--dd-ink); }

/* ---------- The layer ---------- */
body.bag-open { overflow: hidden; }
body.bag-open .shell-bar,
body.bag-open .bottom-nav { display: none !important; }
body.bag-open .toast-container { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }

.bag {
    position: fixed; inset: 0; z-index: 400;
    display: grid; grid-template-columns: minmax(0, 1fr);
    color: var(--dd-ink); font-family: var(--dd-sans); font-size: 1rem; line-height: 1.4;
    background-color: var(--dd-steel);
    background-image: linear-gradient(180deg, var(--dd-steel-hi), var(--dd-steel) 40%, var(--dd-steel-lo));
    -webkit-font-smoothing: antialiased;
}
.bag ::selection { background: var(--dd-tape-edge); color: var(--dd-ink); }
.bag :focus-visible { outline: 3px solid var(--dd-focus); outline-offset: 2px; }
.bag-cam :focus-visible { outline-color: var(--dd-tape); }
.bag input:focus { border-color: var(--dd-ink); }
:where(.bag) button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.bag-main {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0; height: 100%;
}

/* ---------- Camera ---------- */
.bag-cam {
    position: relative; overflow: hidden;
    height: min(46vh, 380px); height: min(46dvh, 380px);
    background: var(--dd-cam); color: var(--dd-tape);
}
.bag--nocam .bag-cam { height: auto; min-height: 220px; }
/* While a label or panel is open the camera is paused, so it gives the
   bench its height back. */
.bag:not([data-mode="idle"]):not(.bag--nocam) .bag-cam { height: min(25vh, 210px); height: min(25dvh, 210px); }
.bag-viewport { position: absolute; inset: 0; }
.bag-viewport video, .bag-viewport canvas {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: filter 0.3s var(--dd-ease);
}
.bag-viewport canvas.drawingBuffer { display: none; }
.bag-viewport.scan-flash::after {
    content: ''; position: absolute; inset: 0; background: var(--dd-tape); opacity: 0.55;
    animation: bag-flash 0.32s ease-out forwards;
}
@keyframes bag-flash { to { opacity: 0; } }
.bag:not([data-mode="idle"]) .bag-viewport video { filter: brightness(0.38) saturate(0.6); }
.bag-paused {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    margin: 0; text-align: center; font-family: var(--dd-cond); font-weight: 700; font-size: 1rem;
    letter-spacing: 0.04em; color: var(--dd-tape); opacity: 0; transition: opacity 0.25s;
    pointer-events: none;
}
.bag:not([data-mode="idle"]):not(.bag--nocam) .bag-paused { opacity: 1; }
.bag--nocam .bag-paused, .bag--nocam .bag-reticle { display: none; }
.bag[data-mode="summary"] .bag-paused { opacity: 0; }

.bag-reticle { position: absolute; inset: 22% 16% 30%; pointer-events: none; transition: opacity 0.25s; }
.bag:not([data-mode="idle"]) .bag-reticle { opacity: 0; }
.bag-reticle i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--dd-tape); }
.bag-reticle i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.bag-reticle i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.bag-reticle i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.bag-reticle i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }

.bag-cam-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top)) 12px 0;
}
.bag-iconbtn {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(16, 18, 17, 0.62); color: var(--dd-tape);
}
.bag-iconbtn[aria-pressed="true"] { background: var(--dd-tape); color: var(--dd-ink); }
.bag-iconbtn[hidden] { display: none; }
.bag-cam-top::after { content: ''; width: 48px; }
.bag-cam-top:has(#scanner-torch-btn:not([hidden]))::after { display: none; }

/* The bag tally: a strip of tape stuck across the top of the camera. */
.bag-tally {
    display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px;
    margin-top: 2px; padding: 8px 20px 7px; border: 0;
    background: var(--dd-tape); color: var(--dd-ink);
    border-radius: 2px; transform: rotate(-1.5deg);
}
.bag-tally-cap { font-family: var(--dd-cond); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dd-ink-2); }
.bag-tally-n { font-family: var(--dd-cond); font-weight: 800; font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; }
.bag-tally.is-bump { animation: bag-bump 0.42s var(--dd-ease); }
@keyframes bag-bump { 0% { transform: rotate(-1.5deg) scale(1); } 35% { transform: rotate(-3deg) scale(1.16); } 100% { transform: rotate(-1.5deg) scale(1); } }

.bag-cam-msg {
    position: relative; z-index: 1; margin: 0 auto; max-width: 30rem;
    padding: calc(76px + env(safe-area-inset-top)) 20px 78px; text-align: center;
    color: var(--dd-tape); font-size: 1rem;
}
.bag-cam-msg[hidden] { display: none; }
.bag-cam-msg p { margin: 0 0 12px; text-wrap: pretty; }

.bag-cam-actions {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
    display: flex; justify-content: center; gap: 10px; padding: 0 12px;
}
.bag-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
    border: 1.5px solid rgba(239, 226, 191, 0.55); border-radius: 999px;
    background: rgba(16, 18, 17, 0.68); color: var(--dd-tape);
    font-family: var(--dd-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
}
.bag-chip:active { background: var(--dd-tape); color: var(--dd-ink); }

/* ---------- The bench (stage) ---------- */
.bag-stage {
    overflow-y: auto; overscroll-behavior: contain;
    padding: 22px 16px 16px;
    scrollbar-width: thin; scrollbar-color: var(--dd-steel-lo) transparent;
}

.bag-idle { max-width: 30rem; margin: 0 auto; padding-top: 4px; }
.bag-idle-title {
    margin: 0 0 6px; font-family: var(--dd-cond); font-weight: 800; font-size: 2.15rem; line-height: 1.05;
    letter-spacing: -0.005em; text-transform: uppercase;
}
.bag-idle-sub { margin: 0; color: var(--dd-ink-2); font-size: 1.02rem; max-width: 34ch; text-wrap: pretty; }
.bag-undo { display: flex; align-items: center; gap: 10px; margin-top: 22px; animation: bag-slap 0.32s var(--dd-ease); }
.bag-undo .tape-mini { flex: 1; min-width: 0; }

/* Bag-only label states (the lookup placeholder, duplicate, loose rows). The label itself is a shared component in kitchen.css. */
.tape--pending { min-height: 132px; }
.tape-pending { margin: 10px 0 0; font-size: 1.1rem; color: var(--dd-ink-2); }
.tape-code { font-family: var(--dd-cond); font-weight: 700; font-size: 1.3rem; color: var(--dd-ink); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.tape-dup-name { margin: 2px 0 8px; font-weight: 700; font-size: 1.32rem; }
.bag-textbtn {
    margin-top: 8px; min-height: 44px; padding: 0; border: 0; background: none;
    font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--dd-ink-2);
}

/* ---------- Panels: no barcode, type number ---------- */
.bag-panel { max-width: 30rem; margin: 0 auto; }
.bag-search {
    display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 54px;
    border: 1.5px solid var(--dd-ink); border-radius: 8px; background: var(--dd-field);
}
.bag-search:focus-within { outline: 3px solid var(--dd-focus); outline-offset: 2px; }
.bag-search input {
    flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0;
    font: 600 1.15rem var(--dd-sans); color: var(--dd-ink);
}
.bag-search input:focus { outline: none; }
.bag-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.bag-search-clear {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--dd-ink-2);
}
.bag-search-clear[hidden] { display: none; }
.bag-search input::placeholder { color: var(--dd-placeholder); font-weight: 500; }
.bag-loose-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.bag-loose-row {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--dd-hair);
    background: none; text-align: left;
}
.bag-loose-row:active { background: var(--dd-hover); }
.bag-loose-name { font-weight: 700; font-size: 1.08rem; }
.bag-loose-meta { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--dd-ink-2); font-family: var(--dd-cond); font-weight: 600; font-size: 1rem; }
.bag-loose-meta .bag-ico { width: 18px; height: 18px; }
.bag-type-input {
    width: 100%; min-height: 60px; padding: 8px 14px; border: 1.5px solid var(--dd-ink); border-radius: 8px;
    background: var(--dd-field); color: var(--dd-ink);
    font: 700 1.7rem var(--dd-cond); letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
}
.bag-type-input::placeholder { font: 500 1.05rem var(--dd-sans); letter-spacing: 0; color: var(--dd-placeholder); }

/* ---------- Thumb-zone actions ---------- */
.bag-actions {
    display: flex; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--dd-steel-lo) 30%);
}
.bag-actions:empty { padding: 0 0 env(safe-area-inset-bottom); }

/* ---------- Summary ---------- */
.bag-summary-wrap {
    position: absolute; inset: 0; z-index: 3; display: grid; align-items: end;
    background: var(--dd-scrim);
}
.bag-summary-wrap[hidden] { display: none; }
.bag-summary {
    display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: 92dvh; max-height: 92vh;
    width: 100%; max-width: 34rem; margin: 0 auto;
    padding: 24px 16px calc(14px + env(safe-area-inset-bottom));
    background-color: var(--dd-steel);
    background-image: linear-gradient(180deg, var(--dd-steel-hi), var(--dd-steel));
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
    animation: bag-sheet 0.36s var(--dd-ease);
}
@keyframes bag-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bag-sum-title { margin: 0; font-family: var(--dd-marker); font-weight: 400; font-size: 2.6rem; line-height: 1.05; transform: rotate(-1.5deg); transform-origin: left; }
.bag-sum-title:focus { outline: none; }
.bag-sum-split { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 14px; font-family: var(--dd-cond); font-weight: 700; font-size: 1.1rem; }
.bag-sum-loc { display: inline-flex; align-items: center; gap: 6px; }
.bag-sum-list { list-style: none; margin: 0; padding: 2px 2px 8px; overflow-y: auto; display: grid; gap: 8px; align-content: start; }
.bag-sum-actions { display: flex; gap: 10px; padding-top: 12px; }

/* ---------- Desktop: camera column + the bag beside it ---------- */
.bag-stack { display: none; }
@media (min-width: 900px) {
    .bag {
        grid-template-columns: minmax(380px, 460px) minmax(260px, 360px);
        justify-content: center; gap: 40px; padding: 28px 28px 0;
    }
    .bag-cam { border-radius: 6px; height: min(44vh, 340px); }
    .bag-cam-top { padding-top: 10px; }
    /* Room for the 3px + 2px focus ring inside the scrolling column. */
    .bag-stage { padding-left: 6px; padding-right: 6px; }
    .bag-actions { padding-left: 0; padding-right: 0; }
    .bag-stack { display: flex; flex-direction: column; min-height: 0; padding-top: 6px; }
    .bag-stack-title { margin: 0 0 14px; font-family: var(--dd-cond); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.01em; }
    .bag-stack-list { list-style: none; margin: 0; padding: 2px 4px 24px; display: grid; gap: 8px; align-content: start; overflow-y: auto; }
    .bag-stack-empty { margin: 0; color: var(--dd-ink-2); }
    .bag-stack-empty[hidden] { display: none; }
    .bag-summary-wrap { align-items: center; }
    .bag-summary { border-radius: 12px; max-height: 84vh; }
}

@media (prefers-reduced-motion: reduce) {
    .bag-undo, .bag-summary, .bag-tally.is-bump { animation: none; }
    .bag-viewport.scan-flash::after { animation-duration: 0.01s; }
    .bag-viewport video { transition: none; }
}