/* content/tools/scanner/scanner.css
 *
 * Scanner v2 — Yucka-style evaluation page.
 *
 * Two halves:
 *   1. Camera + manual barcode entry — unchanged behaviourally from v1.
 *   2. Rich result panel — new for 5b. Renders the v2 mockup verbatim
 *      (verdict pill + score, FSA traffic-light table, risk-coloured
 *      additive chips, healthier alternatives cards, attribution).
 *
 * Theme tokens are taken from the site's template stylesheet where
 * possible (--card-bg, --text-color, etc.) and supplemented with scanner-
 * domain tokens declared at :root below. [data-theme="dark"] overrides
 * mirror those domain tokens.
 *
 * Mobile-first; phones are the primary target.
 */

/* ════════════════════════════════════════════════════════════════════════
 * TOKENS
 * ════════════════════════════════════════════════════════════════════════ */
:root {
    --accent-color:  #16a34a;
    --accent-soft:   #dcfce7;
    --error-color:   #dc2626;
    --error-soft:    #fef2f2;
    --surface-muted: #f3f4f6;
    --border-strong: #d1d5db;
    --text-light:    #4b5563;
    --text-muted:    #6b7280;
    --text-faint:    #9ca3af;

    --scanner-stage-bg: #111;

    /* Verdict palette — five tiers + unknown. Theme-aware via dark override. */
    --v-excellent-bg:   #16a34a;   --v-excellent-fg: #fff;   --v-excellent-soft: #dcfce7;
    --v-good-bg:        #65a30d;   --v-good-fg:      #fff;   --v-good-soft:      #ecfccb;
    --v-limited-bg:     #ea580c;   --v-limited-fg:   #fff;   --v-limited-soft:   #ffedd5;
    --v-poor-bg:        #dc2626;   --v-poor-fg:      #fff;   --v-poor-soft:      #fee2e2;
    --v-avoid-bg:       #7f1d1d;   --v-avoid-fg:     #fff;   --v-avoid-soft:     #fecaca;
    --v-unknown-bg:     #6b7280;   --v-unknown-fg:   #fff;

    /* Nutri-Score colours — official A–E palette. */
    --ns-a: #038141; --ns-b: #85bb2f; --ns-c: #fecb02;
    --ns-d: #ee8100; --ns-e: #e63e11;

    /* FSA traffic-light tokens. */
    --tl-green: #16a34a; --tl-amber: #f59e0b; --tl-red: #dc2626;

    --shadow-pop: 0 8px 24px rgba(17, 24, 39, 0.12);
}
[data-theme="dark"] {
    --accent-color:  #4ade80;
    --accent-soft:   rgba(74, 222, 128, 0.15);
    --error-color:   #f87171;
    --error-soft:    rgba(248, 113, 113, 0.12);
    --surface-muted: #1e293b;
    --border-strong: rgba(255,255,255,0.20);
    --text-light:    #cbd5e1;
    --text-muted:    #94a3b8;
    --text-faint:    #64748b;

    --scanner-stage-bg: #000;

    --v-excellent-soft: rgba(22, 163, 74, 0.18);
    --v-good-soft:      rgba(101, 163, 13, 0.18);
    --v-limited-soft:   rgba(234, 88, 12, 0.18);
    --v-poor-soft:      rgba(220, 38, 38, 0.18);
    --v-avoid-soft:     rgba(127, 29, 29, 0.30);

    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.scanner-app {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}
.scanner-app h1.page-title { margin-top: 0; }
.scanner-intro {
    color: var(--text-light);
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
 * LOOKUP ROW — barcode input + Scan button + Look-up submit
 *
 * Mobile (default): input on its own row; Scan button below it as a full-
 * width primary action; small Look-up submit at the bottom for the manual-
 * entry flow.
 *
 * Desktop (≥ 480 px): input flexes; Scan button pinned to the right.
 *
 * Same pattern the shopping-list page uses so users learn one shape.
 * ════════════════════════════════════════════════════════════════════════ */
.scanner-lookup {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.scanner-lookup-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Input + tick-submit are visually a single field with the tick acting as
 * the submit affordance. The wrapper carries the border + focus ring so
 * tab-into-input shows one cohesive focused state across both elements. */
.scanner-lookup-input {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--card-bg);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.scanner-lookup-input:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);  /* matches --primary-color */
}
.scanner-lookup-input > input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 0.75rem 1rem;
    font-size: 16px;                            /* iOS zoom prevention */
    line-height: 1.4;
    background: transparent;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    min-height: 48px;
}
.scanner-lookup-input > input:focus { outline: none; }
.scanner-lookup-go {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    border-left: 1px solid var(--border-color);
    background: var(--accent-color);
    color: var(--card-bg);
    width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease;
}
.scanner-lookup-go:hover,
.scanner-lookup-go:focus-visible {
    background: var(--primary-color);
    outline: none;
}

.scanner-scan-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 1rem;
    border: 1px solid var(--accent-color);
    background: var(--card-bg);
    color: var(--accent-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    width: 100%;                                /* full-width on mobile */
    transition: background 120ms ease, color 120ms ease;
}
.scanner-scan-btn:hover,
.scanner-scan-btn:focus-visible {
    background: var(--accent-color);
    color: var(--card-bg);
    outline: none;
}
.scanner-scan-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (min-width: 480px) {
    .scanner-lookup-row {
        flex-direction: row;
        align-items: stretch;
    }
    .scanner-lookup-input { flex: 1 1 auto; }
    .scanner-scan-btn     { flex: 0 0 auto; width: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
 * SCAN MODAL — camera viewport, hidden until Scan is tapped
 * ════════════════════════════════════════════════════════════════════════ */
.scanner-modal[hidden] { display: none; }
.scanner-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.scanner-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}
.scanner-modal-inner {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 16px 16px;
    box-shadow: var(--shadow-pop);
}
.scanner-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-light);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.scanner-modal-close:hover,
.scanner-modal-close:focus-visible {
    background: var(--surface-muted);
    color: var(--text-color);
    outline: none;
}
.scanner-modal-title {
    margin: 0 32px 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.25;
    border: 0;
    padding: 0;
}
.scanner-modal-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--scanner-stage-bg);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.scanner-modal-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scanner-modal-reticle {
    position: absolute;
    inset: 12% 8%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
}
.scanner-modal-status {
    min-height: 1.4em;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.4;
}
.scanner-modal-status.is-error   { color: var(--error-color); }
.scanner-modal-status.is-success { color: var(--accent-color); }
.scanner-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 480px) {
    .scanner-modal-actions { flex-direction: row-reverse; }
    .scanner-modal-actions button { flex: 1; }
}
.scanner-modal-actions button {
    appearance: none;
    border: 1px solid var(--accent-color);
    background: var(--accent-color);
    color: var(--card-bg);
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px;
}
.scanner-modal-actions button.is-secondary {
    background: var(--card-bg);
    color: var(--accent-color);
}
.scanner-modal-actions button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
body.scanner-modal-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
 * RECENT SCANS — page-level history strip (above-the-result on first load)
 * ════════════════════════════════════════════════════════════════════════ */
.scanner-history[hidden] { display: none; }
.scanner-history {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.scanner-history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.scanner-history-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    line-height: 1.2;
    border: 0;
    padding: 0;
}
/* Re-uses .recent-grid + .recent-card from the existing result-panel block
 * below — same fluid grid, same card shape, just hosted on the page level
 * rather than inside the result panel. */

.scanner-status {
    padding: 0.75rem 1rem; margin: 1rem 0;
    border-radius: 8px;
    border-left: 4px solid var(--text-light);
    background: var(--surface-muted); color: var(--text-color);
    font-size: 0.95em;
}
.scanner-status.is-error   { border-left-color: var(--error-color); background: var(--error-soft); }
.scanner-status.is-success { border-left-color: var(--accent-color); background: var(--accent-soft); }
.scanner-status:empty      { display: none; }

/* ════════════════════════════════════════════════════════════════════════
 * RESULT PANEL — wrapper around everything the JS renders
 * ════════════════════════════════════════════════════════════════════════ */
.scanner-result {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-top: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 4px 12px rgba(17,24,39,0.06);
}
.scanner-result:empty { display: none; }

/* Loading state — shown while the API call is in flight. */
.scan-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-light);
    font-size: 14px;
}
.spinner {
    display: block;
    width: 36px; height: 36px;
    margin: 0 auto 0.75rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: nfl-scanner-spin 0.8s linear infinite;
}
@keyframes nfl-scanner-spin { to { transform: rotate(360deg); } }

/* Error / not-found panel. */
.scan-error-panel {
    padding: 2rem 1rem;
    text-align: center;
}
.scan-error-icon {
    font-size: 44px; line-height: 1;
    color: var(--error-color); opacity: 0.85;
    margin-bottom: 0.75rem;
}
.scan-error-panel h2 {
    margin: 0 0 0.5rem; font-size: 17px; font-weight: 600;
    color: var(--text-color);
}
.scan-error-barcode {
    font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;
    font-size: 13px; color: var(--text-muted);
    background: var(--surface-muted);
    padding: 4px 10px; border-radius: 6px;
    display: inline-block; margin-bottom: 0.75rem;
}
.scan-error-panel p {
    margin: 0 1rem 1rem; line-height: 1.55;
    color: var(--text-muted); font-size: 14px;
}
.scan-error-panel a { color: var(--primary-color); text-decoration: underline; }
.scan-error-actions { margin-top: 1rem; }
.scan-error-actions button {
    padding: 0.6rem 1rem; font-size: 14px; font-weight: 600;
    border: 1px solid var(--primary-color); border-radius: 6px;
    background: var(--card-bg); color: var(--primary-color);
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
 * PRODUCT HEADER
 * ════════════════════════════════════════════════════════════════════════ */
.product-head {
    display: grid; grid-template-columns: 80px 1fr;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}
.product-img {
    width: 80px; height: 80px;
    border-radius: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--text-faint); overflow: hidden;
}
.product-img img { width: 100%; height: 100%; object-fit: contain; }
.product-name {
    margin: 0 0 4px;
    font-size: 17px; font-weight: 600;
    line-height: 1.3;
}
.product-brand {
    margin: 0;
    font-size: 13px; color: var(--text-light);
}
.product-meta {
    margin-top: 4px;
    font-size: 12px; color: var(--text-muted);
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.product-meta .pack {
    font-family: ui-monospace, monospace;
}

/* ════════════════════════════════════════════════════════════════════════
 * VERDICT CARD
 * ════════════════════════════════════════════════════════════════════════ */
.verdict {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.verdict-row {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.verdict-rating { flex: 1; min-width: 0; }
.verdict-rating-label {
    display: block; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted); font-weight: 600;
    margin-bottom: 4px;
}
.verdict-rating-pill {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    font-weight: 700; line-height: 1.2;
}
.verdict-rating-pill .tier { font-size: 18px; letter-spacing: -0.01em; }
.verdict-rating-pill .score {
    font-size: 14px; font-weight: 600; opacity: 0.95;
    font-variant-numeric: tabular-nums;
}
.verdict-rating-pill .score::before { content: '·'; margin-right: 6px; opacity: 0.6; }
.verdict-rating-pill--excellent { background: var(--v-excellent-bg); color: var(--v-excellent-fg); }
.verdict-rating-pill--good      { background: var(--v-good-bg);      color: var(--v-good-fg); }
.verdict-rating-pill--limited   { background: var(--v-limited-bg);   color: var(--v-limited-fg); }
.verdict-rating-pill--poor      { background: var(--v-poor-bg);      color: var(--v-poor-fg); }
.verdict-rating-pill--avoid     { background: var(--v-avoid-bg);     color: var(--v-avoid-fg); }
.verdict-rating-pill--unknown   { background: var(--v-unknown-bg);   color: var(--v-unknown-fg); }

.verdict-scores {
    display: flex; gap: 0.5rem; flex: 0 0 auto;
    align-items: stretch; flex-wrap: wrap;
    justify-content: flex-end;
}
.nutri-score {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 10px;
    font-weight: 700; font-size: 22px; line-height: 1;
    color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.nutri-score small {
    display: block; font-size: 8px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    opacity: 0.85; margin-bottom: 1px;
}
.nutri-score--a { background: var(--ns-a); }
.nutri-score--b { background: var(--ns-b); }
.nutri-score--c { background: var(--ns-c); color: #1f2937; }
.nutri-score--d { background: var(--ns-d); }
.nutri-score--e { background: var(--ns-e); }
.nutri-score--unknown {
    background: var(--surface-muted); color: var(--text-faint);
    border: 1px dashed var(--border-strong); box-shadow: none;
}

/* Processing badge — wider pill (replaces the old NOVA pill in v4). NOVA is
 * informational here, not a score driver, so we display a plain-English
 * tier word ("Minimally", "Processed", "Highly") tinted by the underlying
 * NOVA group. The "processed" suffix is in the tooltip + caveat to keep the
 * pill compact alongside Nutri-Score and Eco-Score.  */
.processing-badge {
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-width: 72px; padding: 4px 8px;
    height: 48px;
    border-radius: 10px;
    font-weight: 700; font-size: 13px; line-height: 1.1;
    text-align: center;
    border: 2px solid var(--border-strong);
    background: var(--card-bg); color: var(--text-color);
    cursor: help;
}
.processing-badge small {
    display: block; font-size: 8px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 2px;
}
.processing-badge--minimally {
    border-color: var(--v-excellent-bg);
    background: var(--v-excellent-soft);
    color: var(--v-excellent-fg);
}
.processing-badge--processed {
    border-color: var(--v-limited-bg);
    background: var(--v-limited-soft);
    color: var(--v-limited-fg);
}
.processing-badge--highly {
    border-color: var(--v-poor-bg);
    background: var(--v-poor-soft);
    color: var(--v-poor-fg);
}
.processing-badge--unknown {
    border-style: dashed; color: var(--text-faint);
}
.processing-badge--minimally small,
.processing-badge--processed  small,
.processing-badge--highly     small { color: inherit; opacity: 0.8; }

/* Inconsistency caveat — shown next to the verdict when the Processing
 * badge claims something the rest of the data contradicts (e.g. Nutri A
 * pickled eggs tagged NOVA 4). Calmer styling than the old verdict-caveat
 * because the headline score isn't actually wrong; we're just pointing
 * out an upstream classification quirk. */
.processing-caveat {
    display: flex; gap: 0.5rem; align-items: flex-start;
    margin: 0.5rem 0 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-muted);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 6px 6px 0;
    color: var(--text-light);
    font-size: 12px; line-height: 1.45;
}
.processing-caveat-icon { color: var(--text-muted); font-size: 13px; line-height: 1.4; }

.verdict-reasons {
    list-style: none; margin: 0 0 0.75rem; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.verdict-reasons li {
    display: flex; gap: 0.5rem; align-items: flex-start;
    font-size: 13px; line-height: 1.45;
    padding: 8px 10px; border-radius: 6px;
    background: var(--surface-muted); color: var(--text-light);
}
.verdict-reasons li.is-good { background: var(--v-excellent-soft); color: var(--text-color); }
.verdict-reasons li.is-warn { background: var(--v-limited-soft);   color: var(--text-color); }
.verdict-reasons li.is-bad  { background: var(--v-poor-soft);      color: var(--text-color); }
.verdict-reasons li .ico { flex: 0 0 16px; font-weight: 700; }

/* "Why this score?" breakdown — collapsible inside the verdict card. */
.verdict-breakdown {
    margin-top: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-muted);
}
.verdict-breakdown > summary {
    list-style: none;
    padding: 10px 12px;
    font-size: 13px; font-weight: 600; color: var(--text-light);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
}
.verdict-breakdown > summary::-webkit-details-marker { display: none; }
.verdict-breakdown > summary .chevron {
    color: var(--text-muted); transition: transform 120ms ease;
}
.verdict-breakdown[open] > summary .chevron { transform: rotate(180deg); }
.verdict-breakdown-body { padding: 0 12px 12px; }
.breakdown-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline; gap: 0.75rem;
    font-size: 13px; padding: 10px 0;
    border-top: 1px solid var(--border-color);
}
.breakdown-row:first-child { border-top: 0; }
.breakdown-row .bd-label {
    color: var(--text-color); font-weight: 600;
}
.breakdown-row .bd-detail {
    display: block; color: var(--text-muted); font-size: 11px;
    font-weight: 400; margin-top: 2px; line-height: 1.4;
}
.breakdown-row .bd-value {
    text-align: right; font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--text-color); white-space: nowrap;
}
.breakdown-row .bd-value--label {
    font-weight: 600; color: var(--text-light); font-size: 12px;
}
/* Final-score row: emphasised divider + bold value so the user sees
 * exactly how the cap (or lack of one) landed the number. */
.breakdown-row--final {
    border-top: 1px solid var(--border-strong);
    padding-top: 12px; margin-top: 4px;
}
.breakdown-row--final .bd-label { font-size: 14px; }
.breakdown-row--final .bd-value { font-size: 15px; }

/* ════════════════════════════════════════════════════════════════════════
 * ACTION ROW
 * ════════════════════════════════════════════════════════════════════════ */
.actions-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-muted);
}
.actions-row button {
    appearance: none;
    border: 1px solid var(--border-strong); background: var(--card-bg);
    color: var(--text-color); border-radius: 10px;
    padding: 0.75rem 6px;
    font-size: 12px; font-weight: 600; line-height: 1.25;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 64px;
}
.actions-row button .ico { font-size: 20px; line-height: 1; }
.actions-row button.is-primary {
    border-color: var(--primary-color); background: var(--primary-color); color: #fff;
}
.actions-row button.is-shopping {
    border-color: var(--v-excellent-bg); color: var(--v-excellent-bg);
}

/* ════════════════════════════════════════════════════════════════════════
 * COLLAPSIBLE DETAIL SECTIONS
 * ════════════════════════════════════════════════════════════════════════ */
.detail-section { border-bottom: 1px solid var(--border-color); }
.detail-section:last-child { border-bottom: 0; }
.detail-section-h {
    margin: 0; padding: 0.75rem 1rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; cursor: pointer; user-select: none;
    font-size: 14px; font-weight: 600; color: var(--text-color);
}
.detail-section-h::-webkit-details-marker { display: none; }
.detail-section-h .chevron {
    color: var(--text-muted); transition: transform 120ms ease;
}
.detail-section[open] .detail-section-h .chevron { transform: rotate(180deg); }
.detail-section-body { padding: 0 1rem 1rem; }

/* ════════════════════════════════════════════════════════════════════════
 * NUTRITION TABLE — toggle + traffic-light bands
 * ════════════════════════════════════════════════════════════════════════ */
.nutrition-toggle {
    display: inline-flex; gap: 0; margin-bottom: 0.5rem;
    border: 1px solid var(--border-strong); border-radius: 10px;
    overflow: hidden; background: var(--card-bg);
}
.nutrition-toggle button {
    appearance: none; border: 0; background: transparent;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    padding: 6px 12px; cursor: pointer; min-height: 32px;
    font-family: inherit;
}
.nutrition-toggle button.is-active {
    background: var(--text-color); color: var(--card-bg);
}
.nutrition-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.nutrition-table th, .nutrition-table td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.nutrition-table th {
    font-weight: 500; color: var(--text-light);
}
.nutrition-table td {
    font-variant-numeric: tabular-nums; color: var(--text-color); text-align: right;
}
.nutrition-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); text-align: right;
    border-bottom: 1px solid var(--border-strong);
}
.nutrition-table thead th:first-child { text-align: left; }
.nutrition-table tr.is-sub th {
    padding-left: 16px; font-size: 13px; color: var(--text-muted);
}
.tl {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.tl--green { background: var(--tl-green); }
.tl--amber { background: var(--tl-amber); }
.tl--red   { background: var(--tl-red); }
.nutrition-table tr.fsa-green > * { background: rgba(22, 163, 74, 0.05); }
.nutrition-table tr.fsa-amber > * { background: rgba(245, 158, 11, 0.06); }
.nutrition-table tr.fsa-red   > * { background: rgba(220, 38, 38, 0.06); }

/* ════════════════════════════════════════════════════════════════════════
 * INGREDIENTS — risk-coloured additive chips + inline concern panel
 * ════════════════════════════════════════════════════════════════════════ */
.ingredients-text {
    font-size: 14px; line-height: 1.6;
    color: var(--text-color);
    margin: 0 0 0.75rem;
}
.ingredients-text mark {
    background: var(--v-limited-soft); color: var(--text-color);
    padding: 1px 4px; border-radius: 4px; font-weight: 600;
}
.additives-legend {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    font-size: 11px; color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.additives-legend .swatch {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 4px; vertical-align: -1px;
}
.chip-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.chip-list li button,
.chip-list li span {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    border: 1px solid; cursor: pointer; font-family: inherit;
    background: var(--surface-muted); color: var(--text-light);
    border-color: var(--border-color);
    appearance: none;
}
.chip-list.additives li.is-low button {
    background: var(--v-excellent-soft); color: var(--text-color);
    border-color: rgba(22,163,74,0.45);
}
.chip-list.additives li.is-med button {
    background: rgba(245,158,11,0.18); color: var(--text-color);
    border-color: rgba(245,158,11,0.45);
}
.chip-list.additives li.is-high button {
    background: var(--v-poor-soft); color: var(--text-color);
    border-color: rgba(220,38,38,0.45);
    font-weight: 600;
}
.chip-list.additives li.is-high button::before { content: '⚠ '; }
.chip-list li button.is-flash {
    transition: background 120ms ease;
    background: var(--surface-muted);
    filter: brightness(0.95);
}
.chip-list.allergens li span {
    background: var(--v-limited-soft); color: var(--text-color);
    border-color: rgba(245,158,11,0.45);
}

.additive-panel {
    margin-top: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px; overflow: hidden;
    background: var(--card-bg);
}
.additive-panel-h {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-muted);
    color: var(--text-color);
    font-weight: 600; font-size: 13px;
}
.additive-panel--high .additive-panel-h {
    background: var(--v-poor-soft);
}
.additive-panel--medium .additive-panel-h {
    background: rgba(245,158,11,0.18);
}
.additive-panel-h .e-num {
    font-family: ui-monospace, monospace;
    background: rgba(0,0,0,0.08);
    padding: 2px 6px; border-radius: 6px;
    font-size: 12px;
}
.additive-panel-close {
    margin-left: auto;
    appearance: none; background: transparent; border: 0;
    color: var(--text-muted); font-size: 18px; cursor: pointer;
    padding: 0 4px;
}
.additive-panel-body {
    padding: 0.75rem;
    font-size: 13px; color: var(--text-light); line-height: 1.55;
}
.additive-panel-body p { margin: 0 0 0.5rem; }
.additive-panel-body p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════
 * ECO-SCORE
 * ════════════════════════════════════════════════════════════════════════ */
.eco-row { display: flex; align-items: center; gap: 0.75rem; }
.eco-grade {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 18px;
    flex: 0 0 auto;
}
.eco-grade--a { background: var(--ns-a); }
.eco-grade--b { background: var(--ns-b); }
.eco-grade--c { background: var(--ns-c); color: #1f2937; }
.eco-grade--d { background: var(--ns-d); }
.eco-grade--e { background: var(--ns-e); }
.eco-text { font-size: 13px; color: var(--text-light); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════
 * HEALTHIER ALTERNATIVES
 * ════════════════════════════════════════════════════════════════════════ */
.alt-meta {
    font-size: 12px; color: var(--text-muted);
    margin: 0 0 0.5rem;
}
.alt-meta code {
    background: var(--surface-muted);
    padding: 1px 6px; border-radius: 6px;
    font-size: 11px; color: var(--text-light);
}
.alt-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.alt-list li {
    display: grid;
    grid-template-columns: 48px 1fr auto auto auto;     /* +1 col for "+ Shop" chip */
    gap: 0.5rem; align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--card-bg);
    transition: background 120ms ease, transform 120ms ease;
}
.alt-list li:hover { background: var(--surface-muted); }
.alt-img {
    width: 48px; height: 48px;
    background: var(--surface-muted); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--text-faint); overflow: hidden;
}
.alt-img img { width: 100%; height: 100%; object-fit: contain; }
.alt-body { min-width: 0; }
.alt-name {
    font-size: 13px; font-weight: 500; color: var(--text-color); line-height: 1.3;
    overflow-wrap: anywhere;
}
.alt-brand { font-size: 11px; color: var(--text-muted); }
.alt-list .nutri-score { width: 32px; height: 32px; font-size: 14px; }
.alt-list .nutri-score small { display: none; }
.alt-score {
    font-size: 13px; font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    text-align: right; padding-left: 4px; min-width: 36px;
}
.alt-score small {
    display: block; font-size: 9px; font-weight: 500;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.04em;
}
.alt-caveat {
    margin: 0.5rem 0 0;
    font-size: 12px; color: var(--text-muted); line-height: 1.5;
    font-style: italic;
}

/* "+ Shop" chip on each alternative card. Phase 5a integration — opens
 * openAddToShoppingDialog() with the alternative pre-filled. Tappable target
 * ≥ 32 px on mobile; sized to fit alongside the Nutri-Score badge + score
 * column without crowding. The card-level click handler is suppressed by
 * stopPropagation in JS so this doesn't trigger an extra re-evaluation. */
.alt-shop {
    appearance: none;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    padding: 0;
    border: 1px solid var(--v-excellent-bg);
    background: var(--card-bg); color: var(--v-excellent-bg);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.alt-shop:hover, .alt-shop:focus-visible {
    background: var(--v-excellent-bg); color: var(--card-bg);
    outline: none;
}
.alt-shop:focus-visible {
    box-shadow: 0 0 0 3px var(--v-excellent-soft);
}

/* ════════════════════════════════════════════════════════════════════════
 * RECENT SCANS — fluid grid that fits the container width on all viewports.
 * No horizontal scroll: cards wrap into rows. The page-level strip shows the
 * newest few inline; the rest live behind the "View history" modal below.
 * ════════════════════════════════════════════════════════════════════════ */
.recent-grid {
    display: grid;
    /* auto-fill keeps cards a sensible minimum size — 3 across on a typical
     * mobile viewport (~360px wide), more on tablet/desktop. */
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
    padding: 4px 0 0;
}
.recent-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer; text-align: left;
    font: inherit; color: inherit;
    appearance: none;
    transition: background 120ms ease, border-color 120ms ease;
    min-width: 0;                                    /* lets text clamp inside grid cells */
}
.recent-card:hover, .recent-card:focus-visible {
    background: var(--surface-muted);
    outline: none;
}
.recent-card.is-current {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}
.recent-card-img {
    aspect-ratio: 1 / 1; width: 100%;
    background: var(--surface-muted);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--text-faint); overflow: hidden;
}
.recent-card-img img { width: 100%; height: 100%; object-fit: contain; }
.recent-card-name {
    font-size: 12px; font-weight: 600; color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;                               /* reserves space so all cards align */
}
.recent-card-pill {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 1.2;
    align-self: flex-start;
}
.recent-card-pill .score {
    font-size: 10px; font-weight: 600;
    opacity: 0.95;
    font-variant-numeric: tabular-nums;
}
.recent-card-pill .score::before {
    content: '·'; margin-right: 3px; opacity: 0.6;
}
.recent-card-pill--excellent { background: var(--v-excellent-bg); color: var(--v-excellent-fg); }
.recent-card-pill--good      { background: var(--v-good-bg);      color: var(--v-good-fg); }
.recent-card-pill--limited   { background: var(--v-limited-bg);   color: var(--v-limited-fg); }
.recent-card-pill--poor      { background: var(--v-poor-bg);      color: var(--v-poor-fg); }
.recent-card-pill--avoid     { background: var(--v-avoid-bg);     color: var(--v-avoid-fg); }
.recent-card-pill--unknown   { background: var(--v-unknown-bg);   color: var(--v-unknown-fg); }

/* "View history" button in the strip header — opens the full-history modal. */
.recent-view {
    appearance: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--primary-color, #2563eb);
    cursor: pointer;
    line-height: 1.3;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}
.recent-view:hover, .recent-view:focus-visible {
    background: var(--surface-muted);
    border-color: var(--primary-color, #2563eb);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * HISTORY MODAL — full list of stored scans + Clear-history action.
 * Pattern mirrors the camera scan modal: backdrop + centred panel, body
 * locked from scrolling while open, Esc/backdrop-click to close.
 * ════════════════════════════════════════════════════════════════════════ */
.history-modal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.history-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 24, 39, 0.55);
    cursor: pointer;
}
.history-modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17,24,39,0.18);
    overflow: hidden;
}
.history-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.history-modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
    border: 0;
    padding: 0;
}
.history-modal-close {
    appearance: none;
    background: transparent; border: 0;
    color: var(--text-muted);
    font-size: 24px; line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.history-modal-close:hover, .history-modal-close:focus-visible {
    color: var(--text-color);
    outline: none;
}
.history-modal-meta {
    margin: 0;
    padding: 0.65rem 1rem 0;
    font-size: 12px;
    color: var(--text-muted);
}
.history-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
}
.history-modal-empty {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 1rem 0;
}
.history-modal-foot {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    display: flex; justify-content: flex-end;
    background: var(--surface-muted);
}
.history-modal-clear {
    appearance: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--error-color, #b91c1c);
    cursor: pointer;
}
.history-modal-clear:hover, .history-modal-clear:focus-visible {
    background: var(--error-soft, rgba(185,28,28,0.08));
    border-color: var(--error-color, #b91c1c);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * ATTRIBUTION FOOTER (single, at the bottom of the result panel)
 * ════════════════════════════════════════════════════════════════════════ */
.scan-attribution {
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 11px; color: var(--text-muted);
    line-height: 1.5; text-align: center;
    background: var(--surface-muted);
}
.scan-attribution a {
    color: var(--text-muted); text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
 * NAME SEARCH — results list rendered into #scanner-result when the user
 * uses the secondary name-search input rather than a barcode.
 *
 * Branded matches (data-source="off") have a barcode and click-through to
 * the normal evaluator; encyclopedia matches link to the entry page.
 * ════════════════════════════════════════════════════════════════════════ */
.scanner-search-results {
    padding: 1.25rem 1.25rem 1rem;
}
.scanner-search-results h2 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
    color: var(--text-color);
}
.scanner-search-hint {
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
    color: var(--text-light);
}
.search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.search-result-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    background: var(--background-alt, #f9fafb);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search-result-btn:hover,
.search-result-btn:focus-visible {
    background: var(--card-bg, #fff);
    border-color: var(--primary-color);
    outline: none;
}
.search-result-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.search-result-name {
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}
.search-result-brand {
    font-size: 0.85rem;
    color: var(--text-light);
}
.search-result-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}
.search-result-kcal {
    font-size: 0.8rem;
    color: var(--text-light);
    white-space: nowrap;
}
.search-result-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
}
.search-result-badge.is-off  { background: #dbeafe; color: #1e40af; }
.search-result-badge.is-enc  { background: #dcfce7; color: #166534; }
.search-result-badge.is-usda { background: #fef3c7; color: #92400e; }

/* ════════════════════════════════════════════════════════════════════════
 * VERDICT SCORES HELP — small <details> below the verdict-row that
 * explains Nutri-Score and NOVA. Closed by default; clicking opens an
 * inline explainer so users don't have to leave the page to learn what
 * the badges mean.
 * ════════════════════════════════════════════════════════════════════════ */
.verdict-scores-help {
    margin: var(--s-2, 0.5rem) 0 0;
    font-size: 12px;
    color: var(--text-muted);
}
.verdict-scores-help > summary {
    cursor: pointer;
    user-select: none;
    color: var(--primary-color, #2563eb);
}
.verdict-scores-help > summary:hover {
    text-decoration: underline;
}
.verdict-scores-help-body {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface-muted, #f9fafb);
    border-left: 3px solid var(--primary-color, #2563eb);
    border-radius: 0 0.25rem 0.25rem 0;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.5;
}
.verdict-scores-help-body p { margin: 0 0 0.5rem; }
.verdict-scores-help-body p:last-child { margin-bottom: 0; }
.verdict-scores-help-body .nutri-score.inline {
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    margin: 0 2px;
    font-size: 11px;
    vertical-align: -3px;
    align-items: center;
    justify-content: center;
}
.verdict-scores-help-body .nutri-score.inline small { display: none; }

/* ════════════════════════════════════════════════════════════════════════
 * ADDITIVE PANEL — extra "Read full entry" link in the existing inline
 * concern panel that opens when a chip is tapped. Surfaces the
 * /additives/<slug> deep-link the API now sends back per-additive.
 * ════════════════════════════════════════════════════════════════════════ */
.additive-panel-more {
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(17, 24, 39, 0.12);
}
.additive-panel-link {
    display: inline-block;
    font-weight: 600;
    color: var(--primary-color, #2563eb);
    text-decoration: none;
}
.additive-panel-link:hover,
.additive-panel-link:focus-visible {
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
 * VERDICT v3 ADDITIONS
 *
 *   1. New "great" tier (renamed from "excellent" — same colour scheme)
 *   2. Caveat banner for partial-confidence scores
 *   3. Category lens line + "Wrong category?" button
 *   4. Eco-Score sibling badge (separated from headline verdict)
 *   5. Greyed-dash breakdown rows for unavailable signals
 * ════════════════════════════════════════════════════════════════════════ */

/* New tier key — keep colour parity with the previous "excellent" rule. */
.verdict-rating-pill--great {
    background: var(--v-excellent-bg);
    color: var(--v-excellent-fg);
}

/* Caveat banner — shown when partial confidence forces a tier cap. Calm
 * yellow-amber, sits below the verdict row inline with the result panel. */
.verdict-caveat {
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.75rem;
    background: #fef3c7;
    border-left: 3px solid #d97706;
    border-radius: 0 0.3rem 0.3rem 0;
    color: #78350f;
    font-size: 13px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.verdict-caveat-icon {
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1;
}
[data-theme="dark"] .verdict-caveat {
    background: rgba(217, 119, 6, 0.14);
    color: #fbbf24;
    border-left-color: #fbbf24;
}

/* Category lens line: "Scored as: <Whole foods>  [Wrong category?]" */
.verdict-category {
    margin: 0.6rem 0 0;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.verdict-category strong { color: var(--text-color); font-weight: 600; }
.verdict-category-correct {
    border: 0;
    background: transparent;
    color: var(--primary-color, #2563eb);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.verdict-category-correct:hover,
.verdict-category-correct:focus-visible { text-decoration: underline; outline: none; }
.verdict-category-correct[disabled] {
    color: var(--text-muted);
    cursor: default;
    text-decoration: none;
}

/* Eco-Score badge — sibling of Nutri-Score and NOVA inside .verdict-scores.
 * Uses the same 5-letter palette as the existing Eco section but at chip
 * size to fit alongside the other badges. */
.eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}
.eco-badge small {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
    font-weight: 600;
}
.eco-badge--a { background: #047857; }
.eco-badge--b { background: #65a30d; }
.eco-badge--c { background: #ca8a04; color: #1f2937; }
.eco-badge--d { background: #ea580c; }
.eco-badge--e { background: #b91c1c; }

/* (v3 missing-data bar styles removed — v4 breakdown is text rows, not bars) */

/* ════════════════════════════════════════════════════════════════════════
 * NUTRITION TABLE v3 ADDITIONS — RI %% column + per-pack tab + suspicious-
 * portion notice. Existing per-100 / per-serving columns inherit unchanged.
 * ════════════════════════════════════════════════════════════════════════ */

.nutrition-table th, .nutrition-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 14px;
    vertical-align: middle;
}
.nutrition-table tbody th { text-align: left; }
.nutrition-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}
.nutrition-table td.val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nutrition-table td.ri  { white-space: nowrap; text-align: right; }
.nutrition-table tr.is-sub th { padding-left: 1.4rem; color: var(--text-muted); font-weight: 400; }

.ri-pct {
    display: inline-block;
    min-width: 42px;
    text-align: center;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.ri-pct--green  { background: #dcfce7; color: #166534; }
.ri-pct--amber  { background: #fef3c7; color: #92400e; }
.ri-pct--red    { background: #fee2e2; color: #991b1b; }
.ri-pct--blank  { background: transparent; color: var(--text-muted); font-weight: 400; }

[data-theme="dark"] .ri-pct        { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; }
[data-theme="dark"] .ri-pct--green { background: rgba(34, 197, 94, 0.14);   color: #4ade80; }
[data-theme="dark"] .ri-pct--amber { background: rgba(217, 119, 6, 0.14);   color: #fbbf24; }
[data-theme="dark"] .ri-pct--red   { background: rgba(220, 38, 38, 0.14);   color: #fca5a5; }

/* Suspicious portion notice — shown above the nutrition table when the
 * manufacturer's claimed portion is small enough that the headline figures
 * would understate what most people actually consume. */
.nutrition-suspicious {
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.75rem;
    background: #fef3c7;
    border-left: 3px solid #d97706;
    border-radius: 0 0.3rem 0.3rem 0;
    color: #78350f;
    font-size: 12px;
    line-height: 1.45;
}
[data-theme="dark"] .nutrition-suspicious {
    background: rgba(217, 119, 6, 0.14);
    color: #fbbf24;
    border-left-color: #fbbf24;
}

/* RI / FSA explanation note under the table. */
.nutrition-note {
    margin: 0.5rem 0 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
 * ALLERGEN WARNING BANNER — loud, always shown above the chip list when
 * any allergen is declared. Allergen accuracy is a safety call so we surface
 * the verify-on-pack reminder prominently rather than hiding it in a
 * footnote.
 * ════════════════════════════════════════════════════════════════════════ */

.allergen-verify-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.85rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 0.4rem;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.45;
}
.allergen-verify-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}
[data-theme="dark"] .allergen-verify-warning {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(252, 165, 165, 0.4);
    color: #fecaca;
}

/* ════════════════════════════════════════════════════════════════════════
 * PERSISTENT FOOTER DISCLAIMER — sits above the existing attribution line.
 * Same muted tone but a touch more emphasis so it doesn't blend into the
 * licence text below.
 * ════════════════════════════════════════════════════════════════════════ */

.scan-disclaimer {
    margin: 1.25rem 0 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-muted, #f9fafb);
    border-left: 3px solid var(--text-muted);
    border-radius: 0 0.3rem 0.3rem 0;
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.5;
}