/* ====================================================================
 * D2 — Live facade phase tinting + orchestrator surfaces.
 *
 * Read by index.html, menu.html, scenario.html. Loaded AFTER kiosk.css
 * so it can override the existing accent in narrow places only.
 *
 * Hard rules from spec §11:
 *   - premium lounge restaurant feel
 *   - no neon, no casino, no blinking, no autoplay video
 *   - subtle glow / soft transitions / dark gradients only
 *   - target Tab A9+ landscape 1280×800 + phone portrait
 *
 * Body classes used: phase-breakfast | phase-lunch | phase-dinner |
 * phase-late. Each maps to:
 *   --phase-accent          warm hue specific to the meal phase
 *   --phase-accent-soft     translucent fill for glows / borders
 *   --phase-tint-bg         very subtle full-page tint (top-left radial)
 *
 * Surfaces:
 *   .phase-ribbon           slim phase headline strip on /
 *   .recos.recos--spotlight phase-aware secondary recommendations rail
 *   .combos.combos--demo    orchestrator combo block (same chassis as the
 *                           legacy combos block, rebadged)
 * ==================================================================== */

/* Defaults — neutral fallback when the body has no phase class. */
body {
    --phase-accent: var(--accent, #c6923a);
    --phase-accent-2: var(--accent-2, #f0d28b);
    --phase-accent-soft: rgba(230, 162, 58, 0.20);
    --phase-tint-bg: transparent;
}

body.phase-breakfast {
    --phase-accent: #f0c878;          /* morning lager — warm honey */
    --phase-accent-2: #ffdb9a;
    --phase-accent-soft: rgba(240, 200, 120, 0.20);
    --phase-tint-bg: radial-gradient(1100px 620px at 12% -120px, rgba(240, 200, 120, 0.08), transparent 70%);
}

body.phase-lunch {
    --phase-accent: #e6a23a;          /* full amber — the daytime baseline */
    --phase-accent-2: #ffcb6b;
    --phase-accent-soft: rgba(230, 162, 58, 0.20);
    --phase-tint-bg: radial-gradient(1100px 620px at 14% -120px, rgba(230, 162, 58, 0.06), transparent 70%);
}

body.phase-dinner {
    --phase-accent: #b8651e;          /* roasted copper — grill fire */
    --phase-accent-2: #d4823d;
    --phase-accent-soft: rgba(184, 101, 30, 0.22);
    --phase-tint-bg: radial-gradient(1200px 700px at 16% -160px, rgba(184, 101, 30, 0.10), transparent 72%);
}

body.phase-late {
    --phase-accent: #7a4a2a;          /* smoky bourbon — late pub */
    --phase-accent-2: #a06b3d;
    --phase-accent-soft: rgba(122, 74, 42, 0.22);
    --phase-tint-bg: radial-gradient(1200px 700px at 18% -180px, rgba(122, 74, 42, 0.10), transparent 74%);
}

/* The page body inherits the tint via a fixed pseudo-layer behind all content.
 * Pointer events disabled so it never intercepts taps. */
body.phase-breakfast::before,
body.phase-lunch::before,
body.phase-dinner::before,
body.phase-late::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--phase-tint-bg);
    z-index: 0;
}

/* All foreground content sits above the tint pseudo. */
body.phase-breakfast .container,
body.phase-lunch .container,
body.phase-dinner .container,
body.phase-late .container,
body.phase-breakfast .page-topbar,
body.phase-lunch .page-topbar,
body.phase-dinner .page-topbar,
body.phase-late .page-topbar {
    position: relative;
    z-index: 1;
}

/* ============ PHASE RIBBON (index.html, after categories) ============
 * Slim restaurant-style strip with eyebrow + headline + subhead. No
 * animation, no autoplay. Hidden under 480px so phone portrait stays
 * focused. */
.phase-ribbon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    margin: 18px 0 8px;
    padding: 14px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.05)),
                var(--bg-1, #141418);
    box-shadow: 0 0 0 1px var(--phase-accent-soft) inset, 0 8px 28px rgba(0, 0, 0, 0.18);
}
.phase-ribbon-eyebrow {
    display: inline-block;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--phase-accent-2);
    margin-bottom: 6px;
}
.phase-ribbon-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px);
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}
.phase-ribbon-sub {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.45;
    max-width: 780px;
}
.phase-ribbon-tag {
    align-self: center;
    font-family: "Playfair Display", "Georgia", serif;
    font-style: italic;
    font-size: 14px;
    color: var(--phase-accent-2);
    padding: 8px 14px;
    border: 1px solid var(--phase-accent-soft);
    border-radius: 999px;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .phase-ribbon { grid-template-columns: 1fr; }
    .phase-ribbon-tag { justify-self: start; }
}

/* ============ SPOTLIGHT RAIL ============
 * Reuses the existing .recos chassis but with a phase-tinted header bar
 * and slightly tighter cards so it doesn't compete with the legacy
 * recommendations rail above it. */
.recos--spotlight .recos-header {
    border-left: 3px solid var(--phase-accent);
    padding-left: 12px;
}
.recos--spotlight .recos-title {
    color: var(--text);
}
.recos--spotlight .recos-eyebrow {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--phase-accent-2);
    margin-bottom: 4px;
}
.recos--spotlight .reco-card {
    border-color: var(--phase-accent-soft);
}
.recos--spotlight .reco-card:hover {
    box-shadow: 0 0 0 1px var(--phase-accent-soft) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
}
.recos--spotlight .reco-cat {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--phase-accent-2);
    margin-bottom: 4px;
}

/* ============ DEMO COMBO BLOCK ============
 * Same chassis as the legacy .combos block (so the kiosk.css cascade
 * keeps painting cards), with a phase-tinted left border and a serif
 * subtitle showing the slot label (Главное / Гарнир / Напиток / Десерт). */
.combos--demo .combos-header {
    border-left: 3px solid var(--phase-accent);
    padding-left: 12px;
}
.combos--demo .combos-eyebrow {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--phase-accent-2);
    margin-bottom: 4px;
}
.combos--demo .combos-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 600;
}
.combos--demo .combo-card {
    border-color: var(--phase-accent-soft);
}
.combos--demo .combo-role {
    color: var(--phase-accent-2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
}

/* ============ FEATURE CARDS (chef + dish of day) ============
 * The two premium cards already exist; phase tinting just nudges the
 * accent in the badge/border. No structural change. */
body.phase-breakfast .feature-card,
body.phase-lunch .feature-card,
body.phase-dinner .feature-card,
body.phase-late .feature-card {
    border-color: var(--phase-accent-soft);
}
body.phase-breakfast .feature-badge,
body.phase-lunch .feature-badge,
body.phase-dinner .feature-badge,
body.phase-late .feature-badge {
    background: linear-gradient(180deg, var(--phase-accent-2), var(--phase-accent));
}

/* ============ CATEGORY HIGHLIGHT (3 phase cards on /) ============
 * The category card whose type matches the current phase gets a soft
 * accent ring so the kiosk visually says "this is now". CSS-only — no
 * extra JS needed. */
body.phase-breakfast .cat-breakfast,
body.phase-lunch .cat-lunch,
body.phase-dinner .cat-dinner {
    box-shadow: 0 0 0 1px var(--phase-accent) inset, 0 12px 28px rgba(0, 0, 0, 0.22);
}
body.phase-late .cat-card { /* no late scenario; no highlight */ }

/* ============ /SCENARIO synergy boost ============
 * When the wall-clock phase matches the rendered scenario, sc-hero gets
 * a slightly stronger accent line. Mismatch keeps the neutral baseline. */
body.page-scenario[data-phase-synergy="match"] .sc-hero-eyebrow {
    color: var(--phase-accent-2);
    letter-spacing: 0.18em;
}
body.page-scenario[data-phase-synergy="match"] .sc-hero-title {
    text-shadow: 0 0 32px var(--phase-accent-soft);
}
body.page-scenario[data-phase-synergy="match"] .sc-hero-price {
    color: var(--phase-accent-2);
}

/* ============ Phone portrait (480w) tightening ============ */
@media (max-width: 480px) {
    .phase-ribbon {
        margin: 12px 0 6px;
        padding: 10px 14px;
    }
    .phase-ribbon-title { font-size: 18px; }
    .phase-ribbon-sub { font-size: 13px; }
    .recos--spotlight .reco-card { padding: 10px; }
}