/* =============================================================================
   Food tab — meal cards, search dialog, configure panel
   ============================================================================= */

/* ── Page header ──────────────────────────────────────────────────────────── */
.food-page { padding-top: 0.5rem; }
@media (min-width: 900px) {
    /* Double-class selector wins over `.dash { max-width: 1120px }` further
       down the file. Food page deliberately stays narrower than the dashboard
       so meal cards don't stretch into giant empty rectangles. */
    .dash.food-page { max-width: 880px; padding: 1rem 1.5rem 5rem; }
    .food-date-title { font-size: 1.6rem; }
}

/* ── Day totals strip (top of food page) ─────────────────────────────────── */
.food-day-totals {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
.food-day-totals::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFD43B, #B9F36A, #FFB088, #8FE3E8);
    opacity: 0.85;
}
.fdt-headline {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.fdt-kcal {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.fdt-kcal-lbl {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fdt-points-badge {
    margin-left: auto;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}
.fdt-macros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.fdt-macro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.55rem 0.4rem;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
}
.fdt-macro-val {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}
.fdt-macro-lbl {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nr-text-mute);
}
@media (min-width: 900px) {
    .fdt-kcal { font-size: 2.4rem; }
    .fdt-macro-val { font-size: 1.1rem; }
    .food-day-totals { padding: 1.25rem 1.5rem; }
}
/* Narrow phones: 4-col macros get cramped once values cross 100g.
   Drop to 2x2 and slightly shrink the headline kcal so nothing wraps awkwardly. */
@media (max-width: 420px) {
    .food-day-totals { padding: 0.85rem 0.9rem; }
    .fdt-kcal        { font-size: 1.75rem; }
    .fdt-kcal-lbl    { font-size: 0.78rem; }
    .fdt-points-badge{ font-size: 0.82rem; padding: 0.3rem 0.75rem; }
    .fdt-macros      { grid-template-columns: 1fr 1fr; }
}

.food-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 1rem;
}
.food-date-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

/* ── Page transitions (View Transitions API) ─────────────────────────────
   Same-origin navigations crossfade instead of hard-swapping; the food page
   content additionally slides up slightly when stepping between days. The
   day strip and header are lifted out of the slide (own transition names)
   so they stay anchored and just crossfade. Progressive enhancement: older
   browsers ignore all of this and keep the instant swap. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }

main.food-page    { view-transition-name: food-main; }
.food-day-header  { view-transition-name: food-day-header; }
.day-strip        { view-transition-name: day-strip; }

@keyframes vt-rise-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-fade-out { to   { opacity: 0; } }
::view-transition-old(food-main) { animation: vt-fade-out 0.12s ease-in forwards; }
::view-transition-new(food-main) { animation: vt-rise-in 0.22s ease-out; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) { animation-duration: 0s; }
}

/* ── Day navigator ────────────────────────────────────────────────────────
   5 day-chips centred on the selected day (server recenters on tap) plus
   chevrons to step further. Chips share width evenly so the row fits a phone. */
.day-strip {
    display: flex;
    align-items: stretch;
    gap: 0.3rem;
    margin: 0 0 1rem;
}
.day-nav-arrow {
    flex: 0 0 auto;
    width: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    color: var(--nr-text-mute);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
}
.day-nav-arrow:hover { border-color: var(--nr-text-mute); color: var(--nr-text); }
.day-chip {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0.4rem 0.15rem;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    background: var(--nr-surface);
    color: var(--nr-text-mute);
    text-decoration: none;
}
.day-chip-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.day-chip-num {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nr-text);
}
.day-chip.is-today .day-chip-label { color: var(--nr-yellow); font-weight: 700; }
.day-chip.is-selected {
    border-color: var(--nr-yellow);
    background: var(--nr-yellow);
}
.day-chip.is-selected .day-chip-label,
.day-chip.is-selected .day-chip-num { color: #1F1F1F; }

.btn--yellow {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn--yellow:hover { filter: brightness(0.93); }

/* Ghost / secondary button — paired with .btn--yellow for "primary + cancel"
   action rows. Used in the AI-photo flow (Change photo / Retry / etc.). */
.btn--ghost {
    background: var(--nr-surface);
    color: var(--nr-text);
    border: 1px solid var(--nr-border);
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.btn--ghost:hover {
    background: var(--nr-bg);
    border-color: var(--nr-text-mute);
}
.btn--ghost:active { transform: translateY(1px); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.food-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--nr-text-mute);
}
.food-empty-icon  { font-size: 2.5rem; margin-bottom: 0.5rem; }
.food-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--nr-text); margin: 0 0 0.35rem; }
.food-empty-body  { margin: 0; font-size: 0.9rem; }

/* ── Meal card ────────────────────────────────────────────────────────────── */
.meal-card {
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.meal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.meal-label-badge {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.3rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}
/* Per-meal-type colour accents — each meal feels distinct, not a wall of yellow */
.meal-label-badge[data-meal-type="breakfast"] { background: #FFD43B; }
.meal-label-badge[data-meal-type="lunch"]     { background: #B9F36A; }
.meal-label-badge[data-meal-type="dinner"]    { background: #FFB088; }
.meal-label-badge[data-meal-type="snack"]     { background: #8FE3E8; }
.meal-label-badge[data-meal-type="brunch"],
.meal-label-badge[data-meal-type="supper"]    { background: #E0AFFF; }

/* Matching left-edge accent stripe on each meal card */
.meal-card[data-meal-type] { position: relative; overflow: hidden; }
.meal-card[data-meal-type]::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--nr-border);
}
.meal-card[data-meal-type="breakfast"]::before { background: #FFD43B; }
.meal-card[data-meal-type="lunch"]::before     { background: #B9F36A; }
.meal-card[data-meal-type="dinner"]::before    { background: #FFB088; }
.meal-card[data-meal-type="snack"]::before     { background: #8FE3E8; }
.meal-card[data-meal-type="brunch"]::before,
.meal-card[data-meal-type="supper"]::before    { background: #E0AFFF; }

/* ── Meal items list ──────────────────────────────────────────────────────── */
.meal-items-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}
.meal-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.4rem;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
}
.meal-item-row:last-child { margin-bottom: 0; }

/* Freshly-added item briefly highlights so you can spot what you just logged.
   Added/removed via the `is-new` class in food.js (buildItemRow insert sites). */
@keyframes item-flash {
    0%   { background: rgba(255, 210, 63, 0.45); box-shadow: 0 0 0 2px var(--nr-yellow); }
    55%  { background: rgba(255, 210, 63, 0.22); box-shadow: 0 0 0 1px var(--nr-yellow); }
    100% { background: var(--nr-bg);             box-shadow: 0 0 0 0 transparent; }
}
.meal-item-row.is-new { animation: item-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .meal-item-row.is-new { animation: none; }
}

.meal-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.meal-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meal-item-meta {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
}
.meal-item-kcal {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nr-text-mute);
}
.item-delete-btn { font-size: 1.2rem; }
.item-edit-btn   { font-size: 1rem; }   /* pencil sits beside the × delete */

/* ── Favourite heart ──────────────────────────────────────────────────────
   ♥ beside the pencil: text-coloured when not favourited, fills red (with a
   little pop) once saved. Toggles a name-deduped snapshot favourite — see
   the Favourites tab in the add-item dialog. */
.item-fav-btn {
    font-size: 1.05rem;
    color: var(--nr-text);
    opacity: 0.45;
    transition: color 0.15s, opacity 0.15s;
}
.item-fav-btn.is-fav {
    color: #E0245E;
    opacity: 1;
    animation: fav-pop 0.25s ease-out;
}
@keyframes fav-pop {
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
    .item-fav-btn.is-fav { animation: none; }
}

/* ── Add item button ─────────────────────────────────────────────────────── */
.add-item-btn {
    display: block;
    width: 66%;
    margin: 0 auto 0.75rem;        /* centered, 66% of full width */
    border-radius: 10px;
    padding: 0.7rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: filter 0.15s, box-shadow 0.15s;
    /* fill + hover + shimmer: shared action-button rule below */
}

/* ── Add meal buttons ────────────────────────────────────────────────────
   Four one-tap buttons (+ Breakfast / + Lunch / + Dinner / + Snack)
   between the day-totals card and the meal list — creating a meal is a
   single tap, no picker dialog. 2×2 grid so the longer German labels
   (Mittagessen, Abendessen) still fit on phone widths. */
.add-meal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.25rem 0 1.1rem;
}
.add-meal-btn {
    border-radius: 12px;
    padding: 0.7rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    transition: filter 0.15s, box-shadow 0.15s;
    /* fill + hover + shimmer: shared action-button rule below */
}
.add-meal-btn:disabled { opacity: 0.55; cursor: default; animation: none; }
.add-meal-btn.is-loading { filter: brightness(1.08); }

/* ── Animated action buttons ──────────────────────────────────────────────
   Every "do something" CTA shares one shimmering yellow→green gradient so
   actions read consistently across the app. Pure background-position
   animation — the bright fill + dark text work on both light and dark
   themes. Honours prefers-reduced-motion. Cancel / ghost / link / danger
   buttons are deliberately excluded so destructive/secondary actions stay
   visually quiet. */
@keyframes btn-shimmer {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
.btn-primary,
.btn--yellow,
.nav-cta,
.add-meal-btn,
.add-item-btn {
    background: linear-gradient(270deg, #FFD23F, #A8E10C, #FFD23F);
    background-size: 200% 200%;
    color: #1F1F1F;
    border: none;
    animation: btn-shimmer 4s ease-in-out infinite;
}
.btn-primary:hover,
.btn--yellow:hover,
.nav-cta:hover,
.add-meal-btn:hover,
.add-item-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 2px 12px rgba(168, 225, 12, 0.4);
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn--yellow,
    .nav-cta,
    .add-meal-btn,
    .add-item-btn { animation: none; }
}

/* ── Meal totals ──────────────────────────────────────────────────────────── */
.meal-totals { margin-top: 0.25rem; }

/* Flat macro strip: 5 borderless cells share the row evenly and never wrap,
   so kcal/protein/carbs/fat/fiber always fit one mobile line (replaces the
   old bordered pills that knocked each other onto extra rows). Mirrors the
   top day-totals strip. The .macro-pill class name is kept (used by both the
   EJS render and recalcTotals in food.js) but it's no longer a pill. */
.meal-macros-row {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.macro-pill {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.macro-val  { font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.macro-lbl  { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nr-text-mute); white-space: nowrap; }

.meal-vitamins {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.vit-sep  { margin: 0 0.2rem; }

.meal-points-row { display: flex; }
.meal-points-badge {
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ── Food select (Add Meal dialog) ───────────────────────────────────────── */
.food-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--nr-bg);
    color: var(--nr-text);
    margin: 0;
}

/* ── Food search dialog ───────────────────────────────────────────────────── */
dialog:not([open]) { display: none; }
.food-search-dialog {
    width: min(580px, 96vw);
    height: min(680px, 88vh);
    border-radius: 20px;
    padding: 0;
    border: 1px solid var(--nr-border);
    background: var(--nr-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.food-search-dialog::backdrop { background: rgba(0,0,0,0.5); }

.fsd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--nr-border);
    flex-shrink: 0;
}
.fsd-header h3 { margin: 0; font-size: 1rem; }
.fsd-close { font-size: 1.4rem; }

/* Panels fill remaining dialog height and scroll internally.
   Use :not([hidden]) so CSS display doesn't override the hidden attribute. */
.fsd-panel[hidden] { display: none; }
.fsd-panel:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fsd-body  { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem 1.25rem 1.5rem; }

/* ── Category chips ───────────────────────────────────────────────────────── */
.food-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.cat-chip {
    border: 1px solid var(--nr-border);
    background: var(--nr-bg);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--nr-text);
    transition: background 0.12s, border-color 0.12s;
}
.cat-chip:hover   { border-color: var(--nr-yellow); }
.cat-chip.is-active {
    background: var(--nr-yellow);
    border-color: var(--nr-yellow);
    color: #1F1F1F;
    font-weight: 600;
}

/* ── Search input ─────────────────────────────────────────────────────────── */
.food-search-input-wrap { margin-bottom: 0.75rem; }
.food-search-input {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
}
.food-search-input:focus { outline: 2px solid var(--nr-yellow); border-color: transparent; }

.food-search-status {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    margin-bottom: 0.5rem;
    min-height: 1.2em;
}

/* ── Result list ─────────────────────────────────────────────────────────── */
.food-result-list { list-style: none; margin: 0; padding: 0; }
.food-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--nr-border);
    cursor: pointer;
    border-radius: 8px;
}
.food-result-item:hover { background: var(--nr-bg); padding-left: 0.4rem; }

.food-result-img {
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--nr-border);
    flex-shrink: 0;
    background: var(--nr-bg);
}
.food-result-img-placeholder {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--nr-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.food-result-info { flex: 1; min-width: 0; }
.food-result-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.food-result-brand { font-size: 0.75rem; color: var(--nr-text-mute); }
.food-result-kcal  { font-size: 0.8rem; font-weight: 600; color: var(--nr-text-mute); white-space: nowrap; flex-shrink: 0; }

/* ── Configure panel ─────────────────────────────────────────────────────── */
.fsd-back-btn {
    background: none;
    border: none;
    color: var(--nr-yellow);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
}

.food-configure { padding-top: 0.25rem; }
.food-cfg-name  { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15rem; }
.food-cfg-brand { font-size: 0.8rem; color: var(--nr-text-mute); margin-bottom: 1rem; }

.food-configure-field { margin-bottom: 0.85rem; }
.food-configure-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nr-text-mute);
    margin-bottom: 0.3rem;
}
.food-configure-input,
.food-configure-select {
    width: 100%;
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    background: var(--nr-bg);
    color: var(--nr-text);
}
.food-configure-input:focus,
.food-configure-select:focus { outline: 2px solid var(--nr-yellow); border-color: transparent; }

.food-weight-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.food-weight-input { max-width: 120px; }
.food-weight-unit  { font-weight: 600; color: var(--nr-text-mute); }

/* g / ml segmented toggle in the configure panel */
.food-unit-toggle {
    display: inline-flex;
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 8px;
    overflow: hidden;
}
.food-unit-btn {
    background: transparent;
    color: var(--nr-text-mute);
    border: 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.food-unit-btn.is-active { background: var(--nr-yellow); color: #1F1F1F; }
.food-unit-btn:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
@media (prefers-color-scheme: dark) {
    .food-unit-btn:hover:not(.is-active) { background: rgba(255,255,255,0.05); }
}

/* ── Nutrition preview ───────────────────────────────────────────────────── */
.food-nutrition-preview {
    background: var(--nr-bg);
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
}
.fnp-item { display: flex; flex-direction: column; align-items: center; }
.fnp-val  { font-size: 1.05rem; font-weight: 700; }
.fnp-lbl  { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--nr-text-mute); }

/* =============================================================================
   Food search dialog — tabs + scan panel
   ============================================================================= */

/* ── Dialog tab bar ───────────────────────────────────────────────────────── */
.fsd-tabs {
    display: flex;
    border-bottom: 1px solid var(--nr-border);
    flex-shrink: 0;
}
.fsd-tab {
    flex: 1;
    min-width: 0;               /* let tabs shrink below content width */
    display: flex;
    flex-direction: column;     /* icon stacked over a small label — iOS tab-bar idiom */
    align-items: center;
    gap: 0.15rem;
    background: none;
    border: none;
    padding: 0.55rem 0.2rem;
    font-weight: 500;
    color: var(--nr-text-mute);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.fsd-tab-ico {
    font-size: 1.15rem;
    line-height: 1;
}
.fsd-tab-lbl {
    font-size: 0.68rem;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fsd-tab.is-active {
    color: var(--nr-text);
    border-bottom-color: var(--nr-yellow);
    font-weight: 700;
}
.fsd-tab:hover:not(.is-active) { color: var(--nr-text); }

/* ── Favourites panel ─────────────────────────────────────────────────────
   One row per saved favourite; the whole row is a button — tapping it logs
   the snapshot straight into the open meal (no configure step). */
.favs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fav-row + .fav-row { margin-top: 0.5rem; }
.fav-add-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 12px;
    color: var(--nr-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.fav-add-btn:hover:not(:disabled) { border-color: var(--nr-yellow); background: var(--nr-bg); }
.fav-add-btn:disabled { opacity: 0.55; cursor: default; }
.fav-heart { color: #E0245E; font-size: 1rem; }
.fav-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.fav-name {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fav-meta {
    font-size: 0.75rem;
    color: var(--nr-text-mute);
}
.fav-kcal {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Generics panel ───────────────────────────────────────────────────────── */
.generics-body { padding: 1rem 1rem 1.5rem; }

#generics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
@media (max-width: 340px) {
    #generics-grid { grid-template-columns: repeat(2, 1fr); }
}

.generics-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: var(--nr-surface);
    border: 1.5px solid var(--nr-border);
    border-radius: 14px;
    padding: 0.75rem 0.4rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s,
                max-height 0.2s ease, min-height 0.2s ease,
                padding 0.2s ease, margin 0.2s ease;
    min-height: 76px;
    max-height: 200px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.generics-tile:hover,
.generics-tile:focus-visible {
    border-color: var(--nr-yellow);
    outline: none;
}
.generics-tile:active { transform: scale(0.95); }

.generics-tile-emoji { font-size: 1.6rem; line-height: 1; }
.generics-tile-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--nr-text);
    text-align: center;
    line-height: 1.2;
}

/* Collapse other tiles when one is chosen */
.generics-tile--fading {
    opacity: 0;
    transform: scale(0.85);
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
    border-color: transparent;
}

/* Drilldown section */
#generics-drilldown { padding-top: 0.25rem; }

.generics-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--nr-surface);
    border: 1.5px solid var(--nr-yellow);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nr-text);
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.generics-breadcrumb:hover { background: var(--nr-bg); }
#generics-breadcrumb-emoji { font-size: 1.2rem; }
.generics-breadcrumb-back {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--nr-text-mute);
}

.generics-status {
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-align: center;
    padding: 0.5rem 0;
    min-height: 1.5rem;
}

.generics-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.generics-item-btn {
    width: 100%;
    text-align: left;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--nr-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.generics-item-btn:hover,
.generics-item-btn:focus-visible {
    background: var(--nr-bg);
    border-color: var(--nr-yellow);
    outline: none;
}
.generics-item-btn:active { opacity: 0.75; }

/* Slide-in animation for drilldown */
@keyframes generics-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#generics-drilldown:not([hidden]) {
    animation: generics-slide-in 0.2s ease both;
}

/* ── Scan panel ───────────────────────────────────────────────────────────── */
.scan-body { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.25rem; }
.scan-hint { font-size: 0.9rem; color: var(--nr-text-mute); text-align: center; margin: 0 0 1rem; }

.scan-viewfinder {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    margin-bottom: 1rem;
}
.scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scan-frame-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scan-frame-box {
    width: 65%;
    aspect-ratio: 3 / 2;
    border: 2px solid var(--nr-yellow);
    border-radius: 8px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.45);
}

.scan-fallback { text-align: center; margin-top: 0.5rem; }
.scan-file-label {
    display: inline-block;
    background: var(--nr-yellow);
    color: #1F1F1F;
    border-radius: 12px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
#scan-file-input { display: none; }
.scan-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--nr-text-mute);
    text-align: center;
    min-height: 1.4em;
}
.scan-manual { margin-top: 1rem; border-top: 1px solid var(--nr-border); padding-top: 1rem; }
.scan-manual-row { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.scan-manual-row .food-search-input { flex: 1; font-size: 1.05rem; letter-spacing: 0.08em; }
.scan-manual-row .btn-sm { white-space: nowrap; }

/* ── AI Photo panel ─────────────────────────────────────────────────────────── */
.photo-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    gap: 1rem;
    min-height: 200px;
}

/* "Take / choose photo" — styled like a big camera button */
.photo-capture-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--nr-yellow, #f5c518);
    color: #000;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.15s;
    text-align: center;
}
.photo-capture-label:hover { opacity: 0.88; }

/* "Pick row" — Take photo + Choose from library side by side */
.photo-pick-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.photo-capture-label--alt {
    background: var(--nr-bg);
    color: var(--nr-text);
    border: 1px solid var(--nr-border);
}

/* Hide the raw file input but keep it accessible */
#photo-file-input { display: none; }

/* Thumbnail preview */
.photo-thumb-wrap {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--nr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-thumb {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.photo-preview-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.85rem;
}
.photo-retake-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Spinner (CSS-only) */
.photo-spinner-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0.5rem;
}
.photo-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid var(--nr-border, #ddd);
    border-top-color: var(--nr-yellow, #f5c518);
    border-radius: 50%;
    animation: photo-spin 0.75s linear infinite;
}
@keyframes photo-spin { to { transform: rotate(360deg); } }

/* Edit-hint text above the review list */
.photo-edit-hint {
    font-size: 0.82rem;
    color: var(--nr-text-mute);
    margin: 0 0 0.5rem;
    text-align: center;
}

/* Review items list */
.photo-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.photo-items-list,
.photo-item-row {
    /* Keep every flex/grid child from blowing the dialog wider than 100% */
    min-width: 0;
}
.photo-item-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    background: var(--nr-surface);
    border: 1px solid var(--nr-border);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
}
.photo-item-name {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nr-text);
    padding: 0.2rem 0;
    text-overflow: ellipsis;
}
.photo-item-name:focus {
    outline: 1px solid var(--nr-yellow);
    border-radius: 4px;
}
.photo-item-weight {
    width: 50px;
    flex-shrink: 0;
    border: 1px solid var(--nr-border);
    border-radius: 6px;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
    text-align: right;
    background: var(--nr-bg);
    color: var(--nr-text);
    font-family: inherit;
    box-sizing: border-box;
}
.photo-item-g {
    font-size: 0.8rem;
    color: var(--nr-text-mute);
}
.photo-item-kcal {
    font-size: 0.78rem;
    color: var(--nr-text-mute);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}
.photo-item-remove {
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: var(--nr-text-mute);
    flex-shrink: 0;
}
.photo-item-remove:hover { color: #FF7676; }

/* Footer actions (re-analyse + add-all) */
.photo-results-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.85rem;
}

/* Error state */
.photo-err-msg {
    text-align: center;
    color: #FF7676;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Visually-hidden utility — used for file inputs triggered programmatically.
   Inline style="display:none" is blocked by CSP style-src 'self' without
   'unsafe-inline', so we use a class instead. */
.sf-visually-hidden {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
   Inline-style replacements
   Inline style="…" attributes are blocked by CSP (style-src 'self' without
   'unsafe-inline'), so these one-off cosmetic adjustments live here as
   purpose-named classes instead.
   --------------------------------------------------------------------------*/
.auth-wrap--narrow        { max-width: 560px; }
.form-info--w340          { max-width: 340px; }
.form-info--w380          { max-width: 380px; }
.form-error--spaced       { margin-bottom: 1.25rem; }
.onb-h-tight              { margin-top: 0.5rem; border-top: 0; padding-top: 0; }
.pref-text--tight         { margin-top: 0.25rem; }
.btn-spaced-top           { margin-top: 1.5rem; }
.msg-body                 { margin-top: 1.25rem; }
.impressum-footnote       { color: var(--nr-text-mute); font-size: 0.85rem; margin-top: 2rem; }
.admin-textarea--min80    { min-height: 80px; }


/* ── Phase F: add-meal wheel (4-slice pizza picker) ─────────────────────── */
.add-meal-wheel { display: flex; justify-content: center; }
.meal-wheel { width: min(300px, 78vw); height: auto; }
.wheel-slice {
    stroke-width: 10; stroke-linejoin: round; cursor: pointer;
    transition: filter 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.wheel-slice:focus { outline: none; }   /* iOS draws a blue box on tap-focus */
/* Every slice wears the Schliff CTA gradient (120deg yellow → lime), painted
   by the per-quadrant linearGradients in the SVG defs (fill AND stroke so the
   rounded corners match seamlessly). */
.wheel-slice[data-meal-type="snack"]     { fill: url(#wheel-grad-snack);     stroke: url(#wheel-grad-snack); }
.wheel-slice[data-meal-type="breakfast"] { fill: url(#wheel-grad-breakfast); stroke: url(#wheel-grad-breakfast); }
.wheel-slice[data-meal-type="lunch"]     { fill: url(#wheel-grad-lunch);     stroke: url(#wheel-grad-lunch); }
.wheel-slice[data-meal-type="dinner"]    { fill: url(#wheel-grad-dinner);    stroke: url(#wheel-grad-dinner); }
.wheel-slice:hover { filter: brightness(1.06); }
.wheel-slice:focus-visible { filter: drop-shadow(0 0 4px #FFD23F); outline: none; }
.meal-wheel text { font-size: 15px; font-weight: 600; fill: #1F1F1F; }
.meal-wheel .wheel-emoji { font-size: 20px; }
.meal-wheel.is-busy { pointer-events: none; opacity: 0.55; }