/* ==========================================================================
   food.hmpsandbox.com, single stylesheet
   1. Tokens   2. Base   3. Masthead   4. Shared components
   5. The pantry   6. Footer   7. Narrow screens   8. Motion
   9. The camera   10. Customization: colors, multi-select, resets

   Design intent: the pantry feels physical. Warm plaster walls, cream card
   stock, terracotta accents, and shelf headers drawn as boards with a
   thick edge. Category colors (shared with the grocery list) are the most
   saturated thing on the page; the chrome stays quiet around them.

   Theming: --paper, --card, --ink, --accent can be overridden from the
   pantry_settings table (theme_paper, theme_card, theme_ink, theme_accent);
   the layout injects them as a :root style block.

   HOUSE RULES (for future agents): never use em dashes, in copy or in
   comments. No frameworks, no CDN assets, and no build step for CSS or JS
   (this file is served as written). Composer is used for the camera's SDK
   only; it never touches the front end.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root {
    --paper:  #f3ede2;   /* warm plaster */
    --card:   #fbf8f1;   /* cream card stock */
    --ink:    #2c261e;   /* dark roast */
    --accent: #9c5228;   /* terracotta */

    --paper-2:     color-mix(in srgb, var(--ink) 4%, var(--paper));
    --ink-2:       color-mix(in srgb, var(--ink) 80%, var(--paper));
    --ink-3:       color-mix(in srgb, var(--ink) 62%, var(--paper));
    --rule:        color-mix(in srgb, var(--ink) 16%, var(--paper));
    --rule-strong: color-mix(in srgb, var(--ink) 40%, var(--paper));
    --accent-wash: color-mix(in srgb, var(--accent) 9%, var(--card));

    /* Stock pills. */
    --low:  #a97b12;     /* amber: running low */

    --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
                 Arial, sans-serif;
    --font-tally: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono',
                  'Segoe UI Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --maxw: 1100px;
    --radius: 8px;
}

/* --- 2. Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.08;
    margin: 0 0 var(--space-3);
    font-weight: 700;
    letter-spacing: -0.02em;
}

p { margin: 0 0 var(--space-4); }

a { color: inherit; }

.eyebrow, .cart-group-count, .pantry-qty-n, .board-total dt, .board-total dd {
    font-family: var(--font-tally);
    letter-spacing: 0.02em;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 10;
    transition: top 120ms ease;
}
.skip-link:focus { top: 0; }

[hidden] { display: none !important; }

/* --- 3. Masthead ----------------------------------------------------------- */

.masthead {
    border-bottom: 3px solid var(--ink);
    background: var(--card);
}

.masthead-bar {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.wordmark { text-decoration: none; }

.wordmark-name {
    display: block;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.wordmark-sub {
    display: block;
    color: var(--ink-3);
    font-size: 0.8rem;
}

.masthead-search {
    display: flex;
    gap: 0;
    flex: 0 1 22rem;
    min-width: 13rem;
}

.masthead-search input[type="search"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--ink);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--paper);
    color: var(--ink);
}
.masthead-search input[type="search"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.masthead-search button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.masthead-search button:hover { background: var(--accent); border-color: var(--accent); }

.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}
.cart-link:hover { border-color: var(--accent); color: var(--accent); }

.cart-badge {
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-tally);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
}

/* --- 4. Shared components --------------------------------------------------- */

.site-main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
}

.page-intro { margin-bottom: var(--space-5); }

.eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.page-intro h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

.lede { color: var(--ink-2); max-width: 46rem; }

.hint-note { font-size: 0.82rem; color: var(--ink-3); }

.text-link { color: var(--accent); }

.notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}
.notice p { margin: 0; }
.notice-error { border-color: var(--accent); color: var(--accent); }

.cart-undo-form button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.cart-undo-form button:hover { background: var(--accent); border-color: var(--accent); }

/* The add box. */
.cart-add { margin-bottom: var(--space-5); }

.pantry-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pantry-add-form input[type="text"],
.pantry-add-form input[type="number"],
.pantry-add-form select {
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
}
.pantry-add-form input:focus, .pantry-add-form select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

#pantry-name-input { flex: 1 1 15rem; min-width: 11rem; }
#pantry-qty-input { width: 4.6rem; font-family: var(--font-tally); }
#pantry-note-input { flex: 1 1 9rem; min-width: 8rem; }

.pantry-add-form button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.pantry-add-form button:hover { background: var(--accent); border-color: var(--accent); }

/* The view toggle. */
.cart-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 3px solid var(--ink);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
}

.cart-sort {
    display: inline-flex;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
}

.cart-sort-opt {
    padding: var(--space-1) var(--space-3);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    color: var(--ink-3);
    background: var(--card);
}
.cart-sort-opt.is-on { background: var(--ink); color: var(--paper); }
.cart-sort-opt:hover:not(.is-on) { color: var(--accent); }

.cart-empty { color: var(--ink-3); padding: var(--space-5) 0; }

/* Category dots and the pop-open palette (same gesture as the list). */
.cart-dot {
    --cat: #9e9e9e;
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cat);
    border: 2px solid color-mix(in srgb, var(--cat) 72%, var(--ink));
}

summary.cart-dot { cursor: pointer; list-style: none; }
summary.cart-dot::-webkit-details-marker { display: none; }
summary.cart-dot:hover { transform: scale(1.12); }

.cart-color { position: relative; }

.cart-palette {
    position: absolute;
    top: 1.7rem;
    left: -0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.pantry-color-form { display: inline-flex; }

button.cart-dot { padding: 0; cursor: pointer; }
button.cart-dot:hover { transform: scale(1.15); }

.cart-dot.is-none { background: transparent; border: 2px dashed var(--rule-strong); }

/* --- 5. The pantry ----------------------------------------------------------- */

.pantry-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }

.pantry-group { list-style: none; }

/* A shelf reads as a board: a thick edge under its label. */
.pantry-shelf-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--space-5) 0 0;
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-bottom: 4px solid color-mix(in srgb, var(--ink) 65%, var(--paper));
    border-radius: 0 0 2px 2px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.pantry-shelf-head.is-color { border-bottom: 2px solid var(--cat, var(--rule-strong)); }
.pantry-group[data-group-id="0"] .pantry-shelf-head { cursor: default; }

.pantry-shelf-head .cart-dot { width: 0.8rem; height: 0.8rem; }

.pantry-shelf-name {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: 700;
    border: 0;
    background: none;
    color: var(--ink);
    padding: 0 var(--space-1);
    cursor: text;
    border-radius: var(--radius);
}
.pantry-shelf-name:hover { background: var(--paper-2); }

.pantry-shelf-name-plain { font-weight: 700; }

.pantry-shelf-head input {
    font: inherit;
    font-weight: 700;
    letter-spacing: inherit;
    text-transform: inherit;
    border: 0;
    border-bottom: 2px solid var(--accent);
    background: var(--card);
    color: var(--ink);
    padding: 0 var(--space-1);
    max-width: 14rem;
}

.pantry-shelf-delete { margin-left: auto; }
.pantry-shelf-delete button {
    font: inherit;
    border: 0;
    background: none;
    color: var(--ink-3);
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius);
    cursor: pointer;
}
.pantry-shelf-delete button:hover { color: var(--accent); background: var(--accent-wash); }

.pantry-group.is-dragging {
    background: var(--accent-wash);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.pantry-group-items { list-style: none; margin: 0; padding: 0; }

.pantry-shelf-empty {
    color: var(--ink-3);
    font-size: 0.85rem;
    padding: var(--space-3) var(--space-2);
}

/* One item on a shelf. */
.pantry-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--rule);
}

@keyframes pantry-pop {
    0%   { transform: scale(0.97); opacity: 0.4; }
    60%  { transform: scale(1.01); }
    100% { transform: none; opacity: 1; }
}
.pantry-item.is-new { animation: pantry-pop 240ms ease-out; }

.pantry-body { flex: 1; min-width: 0; display: grid; gap: 1px; }

.pantry-name {
    font: inherit;
    font-weight: 600;
    text-align: left;
    border: 0;
    background: none;
    color: var(--ink);
    padding: 0;
    cursor: text;
    overflow-wrap: anywhere;
    border-radius: 4px;
}
.pantry-name:hover { background: var(--paper-2); }

.pantry-note {
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    border: 0;
    background: none;
    color: var(--ink-3);
    padding: 0;
    cursor: text;
    overflow-wrap: anywhere;
    border-radius: 4px;
}
.pantry-note:hover { background: var(--paper-2); }
.pantry-note.is-empty { opacity: 0; font-style: italic; }
.pantry-item:hover .pantry-note.is-empty { opacity: 0.7; }

.pantry-body input {
    font: inherit;
    border: 0;
    border-bottom: 2px solid var(--accent);
    background: var(--card);
    color: var(--ink);
    padding: 0 2px;
    width: 100%;
    min-width: 0;
}
.pantry-body input.pantry-note-input { font-size: 0.82rem; }

/* The stock pill: tap to cycle. Stocked is quiet, low is amber, out is
   hollow, exactly as the design document draws them. */
.pantry-pill {
    font-family: var(--font-tally);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px var(--space-2);
    border-radius: 999px;
    border: 2px solid var(--rule-strong);
    background: var(--paper-2);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.pantry-pill.is-low {
    border-color: var(--low);
    background: color-mix(in srgb, var(--low) 14%, var(--card));
    color: color-mix(in srgb, var(--low) 80%, var(--ink));
}
.pantry-pill.is-out {
    border-color: var(--rule-strong);
    background: transparent;
    color: var(--ink-3);
}
.pantry-pill:hover { border-color: var(--accent); }

/* The pantry pushing back into the loop. */
.pantry-tolist-btn {
    font-family: var(--font-tally);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px var(--space-2);
    border-radius: 999px;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.pantry-tolist-btn:hover:not(:disabled) { background: var(--card); color: var(--accent); }
.pantry-tolist-btn.is-on-list, .pantry-tolist-btn:disabled {
    background: transparent;
    border-color: var(--rule-strong);
    color: var(--ink-3);
    cursor: default;
}

.pantry-qty { display: flex; align-items: center; gap: var(--space-1); }

.pantry-qty button {
    font: inherit;
    font-weight: 700;
    width: 1.7rem;
    height: 1.7rem;
    line-height: 1;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}
.pantry-qty button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pantry-qty button:disabled { opacity: 0.35; cursor: default; }

.pantry-qty-n { min-width: 1.6rem; text-align: center; font-weight: 700; }
.pantry-qty-n.is-one { color: var(--ink-3); font-weight: 400; }

/* The shelf mover popover. */
.pantry-mover { position: relative; }

.pantry-mover summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius);
    color: var(--ink-3);
    cursor: pointer;
}
.pantry-mover summary::-webkit-details-marker { display: none; }
.pantry-mover summary:hover { color: var(--ink); background: var(--paper-2); }

.pantry-shelf-list {
    position: absolute;
    top: 1.9rem;
    right: 0;
    z-index: 5;
    display: grid;
    gap: 2px;
    min-width: 11rem;
    padding: var(--space-2);
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.pantry-shelf-opt {
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--ink);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    width: 100%;
}
.pantry-shelf-opt:hover { background: var(--accent-wash); color: var(--accent); }
.pantry-shelf-opt.is-here { font-weight: 700; color: var(--ink-3); cursor: default; }

.pantry-remove button {
    font: inherit;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.pantry-remove button:hover { color: var(--accent); background: var(--accent-wash); }

/* Restock view chrome. */
.pantry-restock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: var(--space-3) 0;
}
.pantry-restock-bar .hint-note { margin: 0; }

.pantry-restock-all {
    font: inherit;
    font-weight: 700;
    padding: var(--space-1) var(--space-4);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.pantry-restock-all:hover { background: var(--card); color: var(--accent); }

/* Shelf management under the list. */
.pantry-shelf-foot { margin-top: var(--space-6); }

.pantry-shelf-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.pantry-shelf-add input {
    font: inherit;
    flex: 1 1 16rem;
    min-width: 12rem;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
}
.pantry-shelf-add input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.pantry-shelf-add button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}
.pantry-shelf-add button:hover { border-color: var(--accent); color: var(--accent); }

/* The undo toast. */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: min(92vw, 30rem);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

.cart-toast button {
    font: inherit;
    font-weight: 700;
    border: 0;
    background: none;
    color: var(--paper);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

/* --- 6. Footer --------------------------------------------------------------- */

.site-footer {
    border-top: 3px solid var(--ink);
    background: var(--card);
    margin-top: var(--space-7);
}

.site-footer > * {
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.board-total {
    display: flex;
    gap: var(--space-6);
    padding-top: var(--space-5);
    margin: 0 auto var(--space-3);
}

.board-total dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.board-total dd { margin: 0; font-size: 1.3rem; font-weight: 700; }

.footer-note {
    color: var(--ink-3);
    font-size: 0.8rem;
    padding-bottom: var(--space-5);
}

/* --- 7. Narrow screens -------------------------------------------------------- */

@media (max-width: 640px) {
    .site-main { padding: var(--space-5) var(--space-4) var(--space-6); }

    .masthead-bar { padding: var(--space-3) var(--space-4); gap: var(--space-4); }

    /* Wordmark and the list link stay on the top row; search drops below. */
    .masthead-search { order: 3; flex-basis: 100%; }

    .pantry-add-form #pantry-note-input { flex-basis: 100%; }

    /* On a phone the mover and note collapse politely. */
    .pantry-item { flex-wrap: wrap; }
    .pantry-body { flex-basis: calc(100% - 3.4rem); }
}

/* --- 8. Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- 9. The camera ------------------------------------------------------------ */

.scan-link { background: var(--card); }

/* The upload target: one big tap area, camera on a phone. */
.scan-start { max-width: 34rem; }

.scan-drop {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 2px dashed var(--rule-strong);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.scan-drop:hover { border-color: var(--accent); background: var(--accent-wash); }

.scan-drop-icon { color: var(--accent); flex-shrink: 0; }

.scan-drop-text { display: grid; gap: 2px; }
.scan-drop-text strong { font-size: 1.05rem; }
.scan-drop-sub { color: var(--ink-3); font-size: 0.85rem; }

/* Filled in by main.js once a file is picked. */
.scan-chosen {
    margin: var(--space-3) 0 0;
    font-family: var(--font-tally);
    font-size: 0.82rem;
    color: var(--ink-3);
}
.scan-chosen[hidden] { display: none !important; }

.scan-go {
    font: inherit;
    font-weight: 700;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.scan-go:hover { background: var(--card); color: var(--accent); }
.scan-go:disabled { opacity: 0.6; cursor: progress; }

.scan-note { margin-top: var(--space-3); max-width: 32rem; }

/* The review card: the AI's draft, every field editable, nothing saved. */
.review-wrap { max-width: 40rem; }

.review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    border-bottom: 3px solid var(--ink);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
}

.review-title {
    margin: 0;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.review-count {
    margin: 0;
    font-family: var(--font-tally);
    font-size: 0.8rem;
    color: var(--ink-3);
}

.review-blank { margin-bottom: var(--space-4); }

.review-card {
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
}

.review-photo {
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}
.review-photo img {
    width: 100%;
    max-height: 18rem;
    object-fit: contain;
}

.review-form { padding: var(--space-4); display: grid; gap: var(--space-3); }

.review-field { display: grid; gap: 3px; }

.review-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.review-field input,
.review-field select,
.review-field textarea {
    font: inherit;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}
.review-field input:focus,
.review-field select:focus,
.review-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-color: var(--accent);
}
.review-field textarea { resize: vertical; }

.review-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.review-row .review-field { flex: 1 1 8rem; min-width: 7rem; }
.review-row .review-field-qty { flex: 0 0 5.5rem; }
.review-field-qty input { font-family: var(--font-tally); }

.review-actions { margin-top: var(--space-1); }

.review-confirm {
    font: inherit;
    font-weight: 700;
    width: 100%;
    padding: var(--space-3);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.review-confirm:hover { background: var(--card); color: var(--accent); }

.review-discard {
    border-top: 1px solid var(--rule);
    padding: var(--space-2);
    text-align: center;
}
.review-discard button {
    font: inherit;
    font-size: 0.85rem;
    border: 0;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
}
.review-discard button:hover { color: var(--accent); background: var(--accent-wash); }

.review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.review-foot .hint-note { margin: 0; }

.review-cancel {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.review-cancel:hover { border-color: var(--accent); color: var(--accent); }

/* What a scan leaves on the shelf: thumbnail, description, tags. */
.pantry-thumb {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background: var(--paper-2);
}

.pantry-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.pantry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: 2px;
}

.pantry-tag {
    font-family: var(--font-tally);
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    padding: 0 0.4rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-3);
}

@media (max-width: 640px) {
    .review-photo img { max-height: 12rem; }
    .review-row .review-field-qty { flex: 0 0 4.6rem; }
}

/* --- 10. Customization: colors, multi-select, resets --------------------------- */

/* Everything about the pantry is shaped from this page, never the admin
   panel (design document Principle 4). The color editor is the same panel
   the grocery list carries, writing the same shared table. */
.cat-editor {
    margin: var(--space-6) 0 var(--space-4);
    border: 2px dashed var(--rule-strong);
    border-radius: var(--radius);
    background: var(--paper-2);
}
.cat-editor[open] { border-style: solid; background: var(--card); }

.cat-editor-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
}
.cat-editor-summary::-webkit-details-marker { display: none; }
.cat-editor-summary::before {
    content: '\25B8';           /* a small triangle, turned when open */
    color: var(--ink-3);
    transition: transform 0.12s ease;
}
.cat-editor[open] .cat-editor-summary::before { transform: rotate(90deg); }

.cat-editor-title {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cat-editor-sub { font-size: 0.82rem; color: var(--ink-3); }
.cat-editor-summary:hover .cat-editor-title { color: var(--accent); }

.cat-editor-body {
    padding: 0 var(--space-3) var(--space-3);
    border-top: 1px solid var(--rule);
}
.cat-editor-body .hint-note { margin: var(--space-3) 0; }

.cat-rows { list-style: none; margin: 0; padding: 0; }

.cat-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
}

.cat-save-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}

/* The native color input, cut down to a swatch the size of a category dot. */
.cat-swatch {
    inline-size: 2rem;
    block-size: 2rem;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.cat-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.cat-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.cat-swatch::-moz-color-swatch { border: none; border-radius: 50%; }

.cat-name {
    flex: 1 1 auto;
    min-width: 6rem;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--card);
    border: 2px solid var(--rule-strong);
    border-radius: var(--radius);
}
.cat-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* How much wears this color, pantry plus list. */
.cat-wear {
    font-family: var(--font-tally);
    font-size: 0.75rem;
    color: var(--ink-3);
    min-width: 1.5rem;
    text-align: right;
}

.cat-save, .cat-add, .cat-reset, .cat-nudge, .cat-delete {
    font: inherit;
    cursor: pointer;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
}

.cat-save, .cat-add {
    padding: var(--space-1) var(--space-3);
    font-size: 0.82rem;
    font-weight: 700;
}
.cat-save:hover, .cat-add:hover { background: var(--ink); color: var(--paper); }

.cat-nudge, .cat-delete {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    padding: 0;
    font-size: 0.7rem;
    border-color: var(--rule-strong);
    color: var(--ink-3);
}
.cat-nudge:hover:not(:disabled), .cat-delete:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.cat-nudge:disabled { opacity: 0.3; cursor: default; }

.cat-add-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.cat-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}
.cat-editor-foot .hint-note { margin: 0; }

.cat-reset, .pantry-shelves-reset button {
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    background: var(--card);
    color: var(--ink-3);
    border: 2px solid var(--rule-strong);
    border-radius: var(--radius);
}
.cat-reset:hover, .pantry-shelves-reset button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Tucked under the shelf tools, quiet, and it asks once. */
.pantry-shelves-reset { margin-top: var(--space-2); }

/* The way in, from any item's palette. */
.cart-palette-edit {
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule-strong);
}
.cart-palette-edit:hover { color: var(--accent); border-color: var(--accent); }

/* Multi-select: the ticks are always in the markup, and Select reveals
   them, so the mode costs nothing to enter or leave. */
.cart-head-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pantry-select-toggle {
    padding: var(--space-1) var(--space-3);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--ink-3);
    background: var(--card);
    border: 2px solid var(--rule-strong);
    border-radius: var(--radius);
    cursor: pointer;
}
.pantry-select-toggle:hover { border-color: var(--accent); color: var(--accent); }
.pantry-select-toggle.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.pantry-pick { display: none; }
.pantry-list.is-selecting .pantry-pick {
    display: inline-block;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.pantry-list.is-selecting .pantry-item { background: var(--paper-2); }
.pantry-list.is-selecting .pantry-item:has(.pantry-pick:checked) {
    background: var(--accent-wash);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.pantry-bulk[hidden] { display: none !important; }

.pantry-bulk {
    position: sticky;
    bottom: var(--space-3);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.pantry-bulk-count {
    margin: 0;
    margin-right: auto;
    font-family: var(--font-tally);
    font-size: 0.82rem;
    color: var(--ink-3);
}

.pantry-bulk select {
    font: inherit;
    font-size: 0.85rem;
    padding: var(--space-1) var(--space-2);
    color: var(--ink);
    background: var(--card);
    border: 2px solid var(--rule-strong);
    border-radius: var(--radius);
}

.pantry-bulk button {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    color: var(--ink);
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
}
.pantry-bulk button:hover { background: var(--ink); color: var(--paper); }

.pantry-bulk-remove { border-color: var(--rule-strong) !important; color: var(--ink-3) !important; }
.pantry-bulk-remove:hover {
    background: var(--card) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

@media (max-width: 32rem) {
    .cat-row { flex-wrap: wrap; }
    .cat-save-form { flex: 1 1 100%; }

    /* The palette grew a text link; let it wrap rather than run off a phone. */
    .cart-palette { flex-wrap: wrap; max-width: 74vw; border-radius: var(--radius); }
    .pantry-bulk { gap: var(--space-1); }
    .pantry-bulk-count { flex: 1 1 100%; }
}