/* Customer Portal — base styles
 * Tokens deliberately mirror /style.css. Inter, USA Blue / USA Red brand,
 * neutral surfaces. No gradients, no glassmorphism, no oversized radii.
 */

:root {
    --portal-bg:        #F7F6F3;
    --portal-surface:   #ffffff;
    --portal-border:    #e2e8f0;
    --portal-border-2:  #cbd5e1;
    --portal-text:      #111827;
    --portal-text-2:    #1f2937;
    --portal-muted:     #475569;
    --portal-muted-2:   #64748b;
    --portal-primary:   #1e3a5f;
    --portal-primary-d: #152a47;
    --portal-accent:    #dc2626;
    --portal-accent-d:  #b91c1c;
    --portal-success:   #059669;
    --portal-success-bg:#ecfdf5;
    --portal-warn:      #d97706;
    --portal-warn-bg:   #fef3c7;
    --portal-danger:    #b91c1c;
    --portal-danger-bg: #fee2e2;
    --portal-sidebar:   #1e293b;
    --portal-sidebar-2: #0f172a;
    /* Brightened from #94a3b8 — was too faint against the dark sidebar. */
    --portal-sidebar-mute:#cbd5e1;
    --portal-cta:       #16a34a;
    --portal-cta-d:     #15803d;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 30px rgba(15, 23, 42, .12);

    --sidebar-w: 220px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Stop iOS from inflating text when rotating to landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--portal-text);
    background: var(--portal-bg);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--portal-primary); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

/* ── Auth layout ─────────────────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh; /* iOS: account for the dynamic URL bar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    position: relative;
    overflow: hidden;
    /* Lava-lamp backdrop. Endpoints + blob tint default to the GreenDock teal
       but are overridden per-tenant via --auth-grad-* / --auth-blob (set inline
       on .auth-shell from the tenant's brand theme color). */
    background: linear-gradient(135deg, var(--auth-grad-from, #0F6E56) 0%, var(--auth-grad-to, #04342C) 100%);
}
.auth-shell > * { position: relative; z-index: 10; }

/* Lava lamp blobs — fixed-position, drift slowly behind the auth card. */
.auth-lava {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}
.auth-lava::before,
.auth-lava::after,
.auth-lava .blob {
    content: '';
    position: absolute;
    border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
    opacity: 0.12;
    will-change: transform, border-radius;
}
.auth-lava::before {
    width: 600px; height: 600px;
    background: linear-gradient(45deg, rgba(255,255,255,.30), rgba(var(--auth-blob, 159,225,203),.25));
    top: -300px; left: -200px;
    animation: lava-1 20s ease-in-out infinite;
}
.auth-lava::after {
    width: 800px; height: 800px;
    background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(var(--auth-blob2, 93,202,165),.18));
    bottom: -400px; right: -300px;
    animation: lava-2 25s ease-in-out infinite;
}
.auth-lava .b1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(var(--auth-blob2, 93,202,165),.30), rgba(var(--auth-blob2, 29,158,117),.12));
    top: 20%; right: -250px; animation: lava-3 30s ease-in-out infinite;
}
.auth-lava .b2 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(var(--auth-blob, 159,225,203),.22), rgba(var(--auth-blob, 15,110,86),.12));
    bottom: -350px; left: 10%; animation: lava-4 35s ease-in-out infinite;
}
.auth-lava .b3 {
    width: 400px; height: 400px;
    background: linear-gradient(90deg, rgba(var(--auth-blob, 225,245,238),.28), rgba(var(--auth-blob, 93,202,165),.12));
    top: 50%; left: 30%; animation: lava-5 22s ease-in-out infinite;
}
.auth-lava .b4 {
    width: 300px; height: 300px;
    background: radial-gradient(ellipse, rgba(255,255,255,.30), rgba(var(--auth-blob2, 159,225,203),.12));
    top: 10%; right: 20%; animation: lava-6 18s ease-in-out infinite;
}
.auth-lava .b5 {
    width: 450px; height: 450px;
    background: linear-gradient(45deg, rgba(var(--auth-blob, 159,225,203),.22), rgba(var(--auth-blob, 29,158,117),.12));
    bottom: 20%; right: 40%; animation: lava-7 28s ease-in-out infinite;
}
.auth-lava .b6 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,.25), rgba(var(--auth-blob2, 93,202,165),.12));
    top: 30%; left: -100px; animation: lava-8 32s ease-in-out infinite;
}

@keyframes lava-1 {
    0%,100% { transform: translate(0,0) rotate(0deg) scale(1);    border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%; }
    25%     { transform: translate(100px,150px) rotate(45deg) scale(1.2);  border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%; }
    50%     { transform: translate(-50px,200px) rotate(90deg) scale(.9);   border-radius: 70% 30% 50% 50% / 30% 70% 50% 50%; }
    75%     { transform: translate(80px,-50px) rotate(135deg) scale(1.1);  border-radius: 50% 50% 70% 30% / 60% 40% 30% 70%; }
}
@keyframes lava-2 {
    0%,100% { transform: translate(0,0) rotate(0deg) scale(1);    border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%; }
    33%     { transform: translate(-150px,-100px) rotate(-60deg) scale(1.15); border-radius: 40% 60% 70% 30% / 50% 50% 30% 70%; }
    66%     { transform: translate(50px,-80px) rotate(-120deg) scale(.85);   border-radius: 70% 30% 30% 70% / 40% 60% 70% 30%; }
}
@keyframes lava-3 {
    0%,100% { transform: translate(0,0) rotate(0deg) scale(1); border-radius: 50% 50% 50% 50%; }
    50%     { transform: translate(-100px,50px) rotate(180deg) scale(1.1); border-radius: 30% 70% 60% 40% / 70% 30% 40% 60%; }
}
@keyframes lava-4 {
    0%,100% { transform: translate(0,0) rotate(0deg) scale(1); border-radius: 40% 60% 60% 40% / 60% 40% 40% 60%; }
    25%     { transform: translate(80px,-100px) rotate(-45deg) scale(.95); border-radius: 60% 40% 40% 60% / 40% 60% 60% 40%; }
    50%     { transform: translate(150px,50px) rotate(-90deg) scale(1.05); border-radius: 70% 30% 50% 50% / 50% 50% 30% 70%; }
    75%     { transform: translate(-50px,-50px) rotate(-135deg) scale(.9); border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%; }
}
@keyframes lava-5 {
    0%,100% { transform: translate(0,0) scale(1); border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%; }
    50%     { transform: translate(-80px,-60px) scale(1.2); border-radius: 40% 60% 70% 30% / 30% 70% 60% 40%; }
}
@keyframes lava-6 {
    0%,100% { transform: translate(0,0) scale(1); border-radius: 50% 50% 50% 50%; opacity: .12; }
    50%     { transform: translate(-50px,100px) scale(1.3); border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%; opacity: .18; }
}
@keyframes lava-7 {
    0%,100% { transform: translate(0,0) rotate(0deg) scale(1); border-radius: 45% 55% 55% 45% / 55% 45% 45% 55%; }
    33%     { transform: translate(60px,-80px) rotate(120deg) scale(.9); border-radius: 60% 40% 65% 35% / 35% 65% 40% 60%; }
    66%     { transform: translate(-40px,60px) rotate(240deg) scale(1.1); border-radius: 35% 65% 45% 55% / 55% 45% 65% 35%; }
}
@keyframes lava-8 {
    0%,100% { transform: translate(0,0) rotate(0deg) scale(1); border-radius: 55% 45% 45% 55% / 45% 55% 55% 45%; }
    25%     { transform: translate(100px,40px) rotate(-90deg) scale(1.15); border-radius: 45% 55% 35% 65% / 65% 35% 55% 45%; }
    50%     { transform: translate(50px,-60px) rotate(-180deg) scale(.85); border-radius: 65% 35% 55% 45% / 45% 55% 35% 65%; }
    75%     { transform: translate(-30px,80px) rotate(-270deg) scale(1.05); border-radius: 35% 65% 45% 55% / 55% 45% 65% 35%; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-lava::before, .auth-lava::after, .auth-lava .blob { animation: none; }
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.auth-header {
    padding: 28px 28px 20px;
    text-align: center;
    border-bottom: 1px solid var(--portal-border);
}
.auth-wordmark {
    font-weight: 900;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    line-height: 1;
}
/* Tenant logo uploaded in admin Settings — shown on the auth card in place
   of the text wordmark when present. Both max bounds are set (and no explicit
   width/height) so the browser scales it down to fit the card while keeping
   the logo's aspect ratio — never overflowing the header. */
.auth-logo {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.auth-tagline {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--portal-muted);
    font-weight: 600;
    margin-top: 8px;
}
.auth-body { padding: 24px 28px 28px; }
.auth-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--portal-text);
    margin: 0 0 20px;
    text-align: center;
}

.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 500;
    color: var(--portal-text);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.field-help { font-size: .8rem; color: var(--portal-muted-2); font-weight: 500; margin-top: 4px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease;
    text-decoration: none;
}
.btn-block { width: 100%; padding: 12px 16px; font-size: .95rem; }
.btn-primary { background: var(--portal-primary); color: #fff; }
.btn-primary:hover { background: var(--portal-primary-d); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .65; cursor: not-allowed; }
.btn-secondary {
    background: #fff;
    color: var(--portal-text);
    border: 1px solid var(--portal-border-2);
}
.btn-secondary:hover { background: var(--portal-bg); text-decoration: none; }
.btn-cta { background: var(--portal-cta); color: #fff; }
.btn-cta:hover { background: var(--portal-cta-d); text-decoration: none; }
.btn-danger { background: var(--portal-danger); color: #fff; }
.btn-danger:hover { background: var(--portal-accent-d); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--portal-text-2); border: 1px solid var(--portal-border-2); }
.btn-ghost:hover { background: var(--portal-bg); text-decoration: none; }

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert-error   { background: var(--portal-danger-bg); border-color: #fca5a5; color: #7f1d1d; }
.alert-warn    { background: var(--portal-warn-bg);   border-color: #fcd34d; color: #78350f; }
.alert-success { background: var(--portal-success-bg); border-color: #86efac; color: #064e3b; }

.auth-footer {
    margin-top: 18px;
    text-align: center;
    font-size: .8rem;
    color: var(--portal-muted-2);
    font-weight: 500;
}

/* ── App layout: sidebar + main ──────────────────────────────────── */
.app-body {
    display: block;
    min-height: 100vh;
    min-height: 100dvh; /* iOS: account for the dynamic URL bar */
    background: var(--portal-bg);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--portal-sidebar);
    color: #e2e8f0;
    padding: 18px 14px 14px;
    display: flex;
    flex-direction: column;
    z-index: 30;
    overflow-y: auto;
}
.sidebar-brand {
    display: block;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #fff !important;
    margin: 16px 8px 22px;
    line-height: 1;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand span { color: #fff; }
.sidebar-brand-logo {
    display: block;
    width: auto;
    height: 44px;
    max-width: calc(100% - 8px);
    object-fit: contain;
}

.sidebar-restaurant {
    margin: 0 4px 14px;
    padding: 8px 8px 10px;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-sm);
}
.sidebar-restaurant-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--portal-sidebar-mute);
    margin-bottom: 6px;
}
.sidebar-restaurant-select {
    width: 100%;
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm);
    padding: 7px 8px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.sidebar-restaurant-select option {
    background: var(--portal-sidebar);
    color: #fff;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.sidebar-nav-secondary {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #334155;
}
.sidebar-nav-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--portal-sidebar-mute);
    padding: 4px 12px 6px;
}
.sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #334155;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: var(--portal-cta);
    color: #fff !important;
    font-weight: 700;
    font-size: .92rem;
    transition: background-color .15s ease, transform .04s ease;
}
.sidebar-cta i { font-size: 1.05rem; }
.sidebar-cta:hover { background: var(--portal-cta-d); text-decoration: none; }
.sidebar-cta:active { transform: translateY(1px); }
.sidebar-cta.active { background: var(--portal-cta-d); }
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: #e2e8f0 !important;
    font-weight: 500;
    font-size: .92rem;
}
.sidebar-link i { font-size: 1.05rem; flex-shrink: 0; color: var(--portal-sidebar-mute); }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff !important; text-decoration: none; }
.sidebar-link:hover i { color: #fff; }
.sidebar-link.active {
    background: rgba(255,255,255,.10);
    color: #fff !important;
    font-weight: 700;
    /* Left accent bar — uses the brand accent so the active page is
       legible at a glance even with the dim secondary nav items below. */
    box-shadow: inset 3px 0 0 var(--portal-accent, #dc2626);
    padding-left: 14px;
}
.sidebar-link.active i { color: #fff; }
.sidebar-link-cta {
    color: #86efac !important;
}
.sidebar-link-cta i { color: var(--portal-cta); }
.sidebar-link-cta:hover { background: rgba(22,163,74,.1); }

.sidebar-signout {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--portal-sidebar-mute) !important;
    font-weight: 500;
    font-size: .9rem;
}
.sidebar-signout i { font-size: 1.05rem; flex-shrink: 0; }
.sidebar-signout:hover { background: rgba(255,255,255,.07); color: #fff !important; text-decoration: none; }

.sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px; left: 12px;
    z-index: 40;
    width: 40px; height: 40px;
    border: 1px solid var(--portal-border);
    background: #fff;
    border-radius: var(--radius-sm);
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--portal-text);
}
/* Sidebar toggle inside the new mobile topbar — different chrome (no
   floating button look, sits inline with the brand). */
.mobile-topbar-toggle {
    position: static;
    border: 0;
    background: transparent;
    color: #fff;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Animated hamburger → X. Three bars; the middle fades, the top/bottom
   converge and rotate into an X when body has .nav-open. */
.hamburger-bars {
    position: relative;
    width: 24px; height: 18px;
    display: inline-block;
}
.hamburger-bars > span {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: top .25s cubic-bezier(.32,.72,0,1),
                transform .25s cubic-bezier(.32,.72,0,1),
                opacity .15s ease;
}
.hamburger-bars > span:nth-child(1) { top: 2px; }
.hamburger-bars > span:nth-child(2) { top: 50%; margin-top: -1px; }
.hamburger-bars > span:nth-child(3) { top: calc(100% - 4px); }
body.nav-open .hamburger-bars > span:nth-child(1) {
    top: 50%; margin-top: -1px;
    transform: rotate(45deg);
}
body.nav-open .hamburger-bars > span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .hamburger-bars > span:nth-child(3) {
    top: 50%; margin-top: -1px;
    transform: rotate(-45deg);
}

/* Sidebar backdrop — fades in when nav opens, click anywhere to dismiss. */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 28;
    opacity: 0;
    transition: opacity .25s ease;
}
body.nav-open .sidebar-backdrop { opacity: 1; }

/* Mobile-only top bar with the centered wordmark. Hidden on desktop;
   visible on phones + small tablets where the sidebar collapses. */
.mobile-topbar { display: none; }

.app-main {
    margin-left: var(--sidebar-w);
    padding: 26px 32px 56px;
    min-height: 100vh;
    min-height: 100dvh; /* iOS: account for the dynamic URL bar */
    max-width: 1600px;  /* don't stretch edge-to-edge on TVs / ultrawide */
}

.mobile-tabs { display: none; }

/* ── Common page bits ────────────────────────────────────────────── */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--portal-text);
    margin: 0;
    letter-spacing: -0.01em;
}
/* Hero variant for the dashboard — restaurant name as the dominant
   element, with a small "Welcome back" eyebrow above it. */
.page-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--portal-muted-2, #64748b);
    margin-bottom: 4px;
}
.page-title-restaurant {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.page-sub {
    font-size: .9rem;
    font-weight: 500;
    color: var(--portal-muted);
    margin-top: 4px;
}
/* Subhead-as-chips. Replaces the comma-separated dim line so the date
   and tracking radius read as scannable metadata rather than copy. */
.page-sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.page-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.4;
}
.page-chip i { font-size: .85rem; color: #64748b; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-text);
    margin: 0 0 12px;
}
.section-sub {
    font-size: .85rem;
    color: var(--portal-muted);
    font-weight: 500;
    margin: -8px 0 12px;
}

.card-grid {
    display: grid;
    /* Locked to 14px so every dashboard region uses the same gutter. */
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}
.card-lg { padding: 22px 24px; }
/* Two visual tiers of card. The primary tier (orders / statement /
   reorder — the actionable row) gets a stronger border and slightly
   heavier shadow so it reads as the page's anchor. Secondary cards
   (stats, map, feed) keep the lighter default — gives the eye somewhere
   to rest instead of every card competing for attention. */
.dashboard-primary > .card {
    border-color: #d6dde6;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
.card-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--portal-muted);
}
.card-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--portal-text);
    margin-top: 6px;
    line-height: 1.1;
}
.card-sub {
    font-size: .85rem;
    font-weight: 500;
    color: var(--portal-muted);
    margin-top: 6px;
}
.delta-up    { color: var(--portal-success); font-weight: 600; }
.delta-down  { color: var(--portal-danger);  font-weight: 600; }
.delta-flat  { color: var(--portal-muted);   font-weight: 600; }

/* Health score gauge */
.health-wrap {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(200px, 240px) 1fr;
    align-items: stretch;
}
@media (max-width: 720px) { .health-wrap { grid-template-columns: 1fr; } }
.health-gauge {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    text-align: center;
}
.health-gauge svg { width: 160px; height: 160px; }
.health-gauge-verdict {
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: 10px;
    letter-spacing: -.01em;
}
.health-gauge-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--portal-muted);
    margin-top: 4px;
    font-weight: 700;
}
.health-explain {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 8px;
}
.health-tagline {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-text);
    line-height: 1.45;
}
.health-lead {
    margin: 0;
    font-size: .92rem;
    color: var(--portal-text-2);
    font-weight: 500;
    line-height: 1.55;
}
.health-rubric {
    margin: 6px 0 0;
    font-size: .8rem;
    color: var(--portal-muted-2);
    font-weight: 500;
    line-height: 1.5;
}
.health-subs-row {
    margin-top: 14px;
}
.health-subs {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-column: 1 / -1;
}
.health-sub {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.health-sub-name {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--portal-muted);
}
.health-sub-bar {
    margin-top: 8px;
    height: 6px;
    background: var(--portal-border);
    border-radius: 3px;
    overflow: hidden;
}
.health-sub-bar > div { height: 100%; background: var(--portal-primary); border-radius: 3px; }
.health-sub-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 8px;
    font-size: .8rem;
    color: var(--portal-muted);
    font-weight: 500;
}
.health-sub-meta strong { color: var(--portal-text); font-weight: 700; font-size: 1rem; }

/* Tables */
.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: .9rem;
}
.tbl th, .tbl td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--portal-border);
    vertical-align: middle;
}
.tbl thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--portal-muted);
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
}
.tbl thead th.sortable:hover { color: var(--portal-text); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: #f8fafc; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--portal-bg);
    color: var(--portal-text-2);
    border: 1px solid var(--portal-border);
}
.badge-new       { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.badge-success   { background: var(--portal-success-bg); color: #064e3b; border-color: #86efac; }
.badge-warn      { background: var(--portal-warn-bg); color: #78350f; border-color: #fcd34d; }
.badge-danger    { background: var(--portal-danger-bg); color: #7f1d1d; border-color: #fca5a5; }

.stars { color: #f59e0b; font-weight: 700; }

.star-bar {
    --pct: 0%;
    display: inline-block;
    position: relative;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 2px;
    color: #e2e8f0;
    vertical-align: middle;
}
.star-bar::before { content: "★★★★★"; }
.star-bar::after {
    content: "★★★★★";
    position: absolute;
    inset: 0;
    color: #f59e0b;
    width: var(--pct);
    overflow: hidden;
    white-space: nowrap;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Locked to the same 14px gutter as .card-grid / .dashboard-primary
       so every region of the dashboard uses one consistent spacing. */
    gap: 14px;
    margin-top: 14px;
}
@media (max-width: 980px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* ── Reworked dashboard primary row ────────────────────────────────── */
.dashboard-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.dashboard-page-head .page-actions { display: flex; gap: 10px; }

.dashboard-primary {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 14px;
    margin-top: 4px;
    align-items: stretch;
}
@media (max-width: 1100px) { .dashboard-primary { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .dashboard-primary { grid-template-columns: 1fr; } }

.dash-card-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-bottom: 6px;
}
.dash-card-more {
    font-size: .82rem; font-weight: 600;
    color: var(--portal-primary);
}
.dash-card-meta { font-size: .82rem; color: var(--portal-muted-2); font-weight: 600; }

.dash-orders-list { list-style: none; padding: 0; margin: 6px 0 0; }
.dash-order-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--portal-border);
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease;
}
.dash-order-row:hover {
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
}
.dash-orders-list li:last-child .dash-order-row { border-bottom: none; }

/* Status dot — derived from delivery date in the absence of a real
   status column. Colors come from the existing semantic palette so they
   match the rest of the portal (greens for OK, blue for upcoming). */
.dash-order-status {
    width: 8px; height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #94a3b8;
}
.dash-order-row-delivered .dash-order-status { background: #16a34a; }
.dash-order-row-scheduled .dash-order-status { background: #2563eb; }
.dash-order-row-pending   .dash-order-status { background: #94a3b8; }

.dash-order-left  { flex: 1; min-width: 0; }
.dash-order-right { flex-shrink: 0; }
.dash-order-id    { font-weight: 700; color: var(--portal-text); font-size: .92rem; font-variant-numeric: tabular-nums; }
.dash-order-when  { font-size: .78rem; color: var(--portal-muted); margin-top: 2px; }
.dash-order-total { font-weight: 700; color: var(--portal-text); font-variant-numeric: tabular-nums; text-align: right; }
.dash-order-items { font-size: .78rem; color: var(--portal-muted-2); text-align: right; margin-top: 2px; }

.dash-statement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 8px;
}
.dash-statement-grid .card-label { font-size: .7rem; }
.dash-statement-grid .card-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.dash-statement-grid .card-value.is-due   { color: var(--portal-accent); }
/* "still owed" is a normal monthly state — readable slate, not alarm-red.
   Genuine overdue is colored on the statement page itself. */
.dash-statement-grid .card-value.is-owed  { color: #334155; }
.dash-statement-grid .card-value.is-clear { color: #16a34a; }
.dash-statement-grid .card-delta {
    font-size: .72rem;
    font-weight: 600;
    color: var(--portal-muted-2, #64748b);
    margin-top: 2px;
    min-height: 1em;
}
.dash-statement-grid .card-delta .delta-up   { color: #16a34a; }
.dash-statement-grid .card-delta .delta-down { color: #dc2626; }
.dash-statement-grid .card-delta .delta-flat { color: #64748b; }

.dash-statement-spark {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--portal-border);
}
.dash-statement-spark-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--portal-muted-2, #64748b);
    margin-bottom: 4px;
}
.dash-statement-spark svg {
    width: 100%;
    height: 38px;
    display: block;
}
.dash-statement-grid .card-value.is-clear { color: var(--portal-success); }
.dash-statement-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-sm { padding: 6px 12px; font-size: .82rem; }

.dash-reorder-notes {
    background: var(--portal-bg);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: .82rem;
    color: var(--portal-text-2);
    white-space: pre-wrap;
    max-height: 100px;
    overflow: auto;
    margin-top: 4px;
}
.dash-reorder-actions { display: flex; gap: 8px; margin-top: 10px; }

.dash-stat {
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.dash-stat:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
/* Quiet variant for the two least-important stats (Hours coverage,
   Tracking radius). Visually deprioritized via a softer surface and
   smaller value type so the eye lands on rating / rank first. */
.dash-stat-quiet {
    background: #f8fafc;
    box-shadow: none;
}
.dash-stat-quiet .card-value { font-size: 1.1rem; color: #334155; }
.dash-stat-quiet .card-label { color: #64748b; }
.dash-stat-quiet .card-sub   { color: var(--portal-muted, #475569); }
.dash-stat-quiet:hover { box-shadow: var(--shadow-sm); }

/* Star + rating num — star leads, value is tabular for clean alignment
   and the ★ glyph carries some warm color so the metric reads first. */
.stat-star {
    color: #f59e0b;
    font-size: 1.1em;
    margin-right: 4px;
    line-height: 1;
}
.stat-rating-num { font-variant-numeric: tabular-nums; font-weight: 800; }

/* Peers empty card — replaces the broken "—" with actionable copy. */
.dash-stat-empty .card-value-msg {
    font-size: .92rem;
    font-weight: 600;
    color: #475569;
    margin: 4px 0 2px;
    line-height: 1.3;
}

/* Inline rank sparkline — sits flush with the bottom of its card. */
.stat-spark {
    display: block;
    width: 100%;
    height: 18px;
    margin-top: 6px;
    opacity: .9;
}

/* ── Dashboard launchpad ─────────────────────────────────────────
   The redesigned dashboard is an ordering launchpad: reorder banner
   on top, account snapshot, recent orders, then a compact market-
   intelligence doorway at the bottom. Full-width tappable surfaces
   so phones can drive the whole flow with one thumb. */
.dash-reorder-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    margin-top: 14px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    color: #fff;
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.dash-reorder-banner:hover,
.dash-reorder-banner:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.dash-reorder-banner-body { flex: 1; min-width: 0; }
.dash-reorder-eyebrow {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .12em;
    font-weight: 700;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 4px;
}
.dash-reorder-headline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.dash-reorder-headline .drb-meta { color: #fff; }
.dash-reorder-headline .drb-dot  { color: rgba(255, 255, 255, .55); font-weight: 600; }
.dash-reorder-headline .drb-total { font-variant-numeric: tabular-nums; }
.dash-reorder-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 22px;
    background: #16a34a;
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.dash-reorder-cta i { font-size: 1.1em; }
.dash-reorder-banner-first {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}
.dash-reorder-banner-first .dash-reorder-cta {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Account snapshot — 3 compact cards. Stacks to a single column
   under 480px so phones don't squeeze the dollar values. */
.dash-snapshot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.dash-snap-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.dash-snap-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.dash-snap-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.dash-snap-value.is-owed  { color: #334155; }
.dash-snap-value.is-clear { color: #16a34a; }

/* Recent orders row — list item now hosts both the invoice link and
   a small reorder icon button. The original .dash-order-row keeps its
   own bottom border behavior, so neutralize it here and move the rule
   to the wrapping <li>. */
.dash-orders-list .dash-order-li {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--portal-border);
}
.dash-orders-list .dash-order-li:last-child { border-bottom: none; }
.dash-orders-list .dash-order-li .dash-order-row {
    flex: 1;
    border-bottom: none;
    margin: 0;
}
.dash-order-reorder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    margin-left: 4px;
    color: var(--portal-primary);
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color .12s ease, color .12s ease;
}
.dash-order-reorder:hover,
.dash-order-reorder:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
}

/* Market intelligence teaser — doorway into /demand. Visually quiet so
   it doesn't compete with the reorder banner up top. */
.dash-market-teaser {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease, transform .12s ease;
}
.dash-market-teaser:hover,
.dash-market-teaser:focus-visible {
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}
.dash-mt-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #1e3a5f;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
}
.dash-mt-body { flex: 1; min-width: 0; }
.dash-mt-title {
    display: block;
    font-weight: 700;
    color: #0f172a;
    font-size: .98rem;
}
.dash-mt-sub {
    display: block;
    font-size: .85rem;
    color: #475569;
    margin-top: 2px;
}
.dash-mt-chev { color: #94a3b8; font-size: 1rem; flex-shrink: 0; }

@media (max-width: 600px) {
    .dash-reorder-banner {
        padding: 16px 18px;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 12px;
    }
    .dash-reorder-cta { padding: 12px 16px; }
    .dash-reorder-headline { font-size: 1.1rem; }
}
@media (max-width: 600px) {
    /* 2-up before 1-up so $ values don't clip in tight cards (481–600px). */
    .dash-snapshot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .dash-snapshot { grid-template-columns: 1fr; }
}

/* Compact health-score strip (demoted from hero). */
.health-wrap-compact {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) { .health-wrap-compact { grid-template-columns: 1fr; } }
.health-gauge-compact {
    display: flex; align-items: center; gap: 14px;
}
.health-gauge-compact svg { width: 88px; height: 88px; flex-shrink: 0; }
.health-gauge-compact .health-gauge-verdict { font-weight: 700; }

/* ============================================================
   Neighborhood health score — refreshed dashboard treatment
   ============================================================ */
.health-card {
    margin-top: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-lg, 14px);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.health-card-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px dashed #e2e8f0;
}
.health-gauge-svg { width: 132px; height: 132px; flex-shrink: 0; display: block; }
.health-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.health-card-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #64748b;
}
.health-card-verdict {
    margin: 2px 0 4px;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.1;
}
.health-card-tagline {
    margin: 0;
    color: #475569;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 60ch;
}

.health-card-subs {
    margin-top: 18px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hsub {
    --hsub-tint: #1e3a5f;
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    overflow: hidden;
}
.hsub::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--hsub-tint);
    opacity: .7;
}
.hsub:hover {
    border-color: var(--hsub-tint);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}
.hsub-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hsub-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--hsub-tint) 12%, #fff);
    color: var(--hsub-tint);
    font-size: .9rem;
    flex-shrink: 0;
}
.hsub-name {
    flex: 1;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
}
.hsub-chev {
    color: #94a3b8;
    font-size: .85rem;
    transition: transform .15s ease, color .15s ease;
}
.hsub:hover .hsub-chev {
    color: var(--hsub-tint);
    transform: translate(2px, -2px);
}
.hsub-score {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hsub-score-num {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hsub-tint);
}
.hsub-score-out {
    font-size: .9rem;
    font-weight: 700;
    color: var(--portal-muted, #475569);
    margin-left: 2px;
}
.hsub-bar {
    height: 6px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}
.hsub-bar > div {
    height: 100%;
    background: var(--hsub-tint);
    border-radius: 999px;
    transition: width .35s ease;
}
.hsub-label {
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.35;
}

@media (max-width: 980px) {
    .health-card-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .health-card { padding: 16px; }
    .health-card-head {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: left;
    }
    .health-gauge-svg { width: 110px; height: 110px; }
    .health-card-verdict { font-size: 1.35rem; }
    .health-card-subs { grid-template-columns: 1fr; }
    .hsub-score-num { font-size: 1.7rem; }
}

/* Customize panel */
.dash-customize {
    margin-top: 8px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.dash-customize-title {
    font-size: .82rem; font-weight: 700; color: var(--portal-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 10px;
}
.dash-customize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 14px;
}
.dash-customize-grid label {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 500; color: var(--portal-text-2);
    cursor: pointer;
}
.dash-customize-grid input[type="checkbox"] { width: 16px; height: 16px; }
.dash-customize-foot {
    margin-top: 10px;
    display: flex; align-items: center; gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--portal-border);
}
[data-widget][hidden] { display: none !important; }

.event-list { list-style: none; padding: 0; margin: 0; }
.event-item {
    display: flex; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
    align-items: flex-start;
}
.event-item:last-child { border-bottom: none; }
.event-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--portal-bg);
    color: var(--portal-text-2);
    font-size: 1.05rem;
}
.event-icon.new_opening    { background: #dbeafe; color: #1e40af; }
.event-icon.closure        { background: var(--portal-danger-bg); color: #7f1d1d; }
.event-icon.rating_spike   { background: var(--portal-success-bg); color: #064e3b; }
.event-icon.rating_drop    { background: var(--portal-warn-bg); color: #78350f; }
.event-icon.review_milestone { background: #ede9fe; color: #5b21b6; }
.event-icon.new_competitor { background: var(--portal-warn-bg); color: #78350f; }
.event-body { min-width: 0; flex: 1; }
.event-title { font-weight: 600; color: var(--portal-text); font-size: .95rem; line-height: 1.35; }
.event-desc  { font-size: .85rem; color: var(--portal-muted); margin-top: 2px; line-height: 1.45; }
.event-meta  { font-size: .75rem; color: var(--portal-muted-2); margin-top: 4px; font-weight: 500; }

/* Soft variant: skips the giant icon and uses a muted neutral surface so
   an empty card doesn't read with the same visual weight as a populated
   one. Used by the dashboard "Latest in your area" widget. */
.empty-state-soft {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 22px 18px;
    text-align: center;
    margin-top: 8px;
}
.empty-state-soft .empty-state-title {
    font-size: .98rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 6px;
}
.empty-state-soft .empty-state-msg {
    font-size: .85rem;
    color: #475569;
    line-height: 1.55;
    max-width: 420px;
    margin: 0 auto;
}
.empty-state-soft .empty-state-cta {
    font-size: .82rem;
    color: #475569;
    margin-top: 10px;
    margin-bottom: 0;
}
.empty-state-soft .empty-state-cta strong { color: #1e3a5f; font-weight: 700; }

.empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--portal-muted);
}
.empty-state-icon {
    font-size: 2rem;
    color: var(--portal-muted-2);
    margin-bottom: 8px;
}
.empty-state-title { font-weight: 700; color: var(--portal-text); font-size: 1rem; margin: 0 0 4px; }
.empty-state-msg   { font-size: .9rem; max-width: 380px; margin: 0 auto; line-height: 1.55; }

/* Map containers */
.map-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.map-mini { height: 320px; }
/* Full-window map: fill the remaining viewport below the page header. */
.map-full { height: calc(100vh - 180px); height: calc(100dvh - 180px); min-height: 520px; }
.map-card { display: flex; flex-direction: column; }
.map-card .map-full { flex: 1 1 auto; }

.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    background: var(--portal-surface);
    border-bottom: 1px solid var(--portal-border);
}
.map-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--portal-border);
    background: #fff;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--portal-text-2);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.map-tool-btn:hover { background: #f8fafc; border-color: var(--portal-border-2); }
.map-tool-btn[data-active="1"] {
    background: var(--portal-primary);
    color: #fff;
    border-color: var(--portal-primary);
}
.map-tool-btn i { font-size: .95rem; }
.map-tool-divider { display: inline-block; width: 1px; height: 20px; background: var(--portal-border); margin: 0 4px; align-self: center; }

.radar-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-top: 8px;
    /* Sidebar can be tall; let the map column take remaining viewport. */
    min-height: calc(100vh - 180px);
    min-height: calc(100dvh - 180px);
}
@media (max-width: 880px) { .radar-layout { grid-template-columns: 1fr; min-height: 0; } }
.radar-filters {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    align-self: start;
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.radar-filter-group { margin-bottom: 14px; }
.radar-filter-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--portal-muted);
    margin-bottom: 6px;
}
.radar-filter-group .radar-check {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
    font-size: .88rem; font-weight: 500;
    color: var(--portal-text-2); cursor: pointer;
}
.radar-filter-group input[type="checkbox"] { width: 16px; height: 16px; }
.radar-num-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 500;
    color: var(--portal-text);
    background: #fff;
}
.radar-search { position: relative; }
.radar-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--portal-muted-2); font-size: .9rem;
    pointer-events: none;
}
.radar-search-input {
    width: 100%;
    padding: 8px 30px 8px 32px;
    border: 1px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--portal-text);
    background: #fff;
}
.radar-search-input:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.radar-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent;
    color: var(--portal-muted);
    font-size: 1.2rem; line-height: 1;
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
}
.radar-search-clear:hover { background: #f1f5f9; color: var(--portal-text); }
.radar-cuisine-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.radar-link-btn {
    border: none; background: transparent;
    color: var(--portal-primary);
    font-size: .78rem; font-weight: 600;
    cursor: pointer; padding: 0;
}
.radar-link-btn:hover { text-decoration: underline; }
.radar-cuisine-list {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Bar chart for gaps */
.gaps-bar-row {
    display: grid;
    grid-template-columns: 160px 1fr 60px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: .9rem;
    border-bottom: 1px dashed var(--portal-border);
}
.gaps-bar-row:last-child { border-bottom: none; }
.gaps-bar-name { font-weight: 600; color: var(--portal-text-2); }
.gaps-bar-track { background: var(--portal-bg); border-radius: 4px; height: 12px; overflow: hidden; border: 1px solid var(--portal-border); }
.gaps-bar-fill { height: 100%; background: var(--portal-primary); }
.gaps-bar-row.is-self .gaps-bar-fill { background: var(--portal-cta); }
.gaps-bar-row.is-self .gaps-bar-name { color: var(--portal-cta-d); }
.gaps-bar-count { text-align: right; font-weight: 700; color: var(--portal-text); font-variant-numeric: tabular-nums; }

/* Errors */
.error-card { text-align: center; padding: 36px 28px; }
.error-code { font-size: 2.25rem; font-weight: 800; color: var(--portal-text); letter-spacing: -.02em; line-height: 1; }
.error-msg { margin-top: 10px; color: var(--portal-muted); font-weight: 500; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 880px) {
    :root { --sidebar-w: 260px; }
    .sidebar {
        transform: translateX(-100%);
        /* iOS-style cubic-bezier — accelerates fast, settles smoothly. */
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        box-shadow: var(--shadow-lg);
        will-change: transform;
        z-index: 30;
    }
    body.nav-open .sidebar { transform: translateX(0); }
    /* Backdrop only displays on mobile — desktop has the sidebar persistent. */
    .sidebar-backdrop { display: block; pointer-events: none; }
    body.nav-open .sidebar-backdrop { pointer-events: auto; }
    .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }

    /* Cascading fade-in for sidebar links when the nav opens. They
       start slightly translated; staggered transition delays make
       them slide in one after another. */
    .sidebar-cta,
    .sidebar-link,
    .sidebar-restaurant,
    .sidebar-signout {
        opacity: 0;
        transform: translateX(-12px);
        transition: opacity .25s ease, transform .25s cubic-bezier(.32,.72,0,1);
    }
    body.nav-open .sidebar-cta,
    body.nav-open .sidebar-link,
    body.nav-open .sidebar-restaurant,
    body.nav-open .sidebar-signout { opacity: 1; transform: translateX(0); }
    /* Per-position delay. Order: restaurant picker → CTA → nav links → signout. */
    body.nav-open .sidebar-restaurant { transition-delay: .06s; }
    body.nav-open .sidebar-cta        { transition-delay: .10s; }
    body.nav-open .sidebar-link:nth-of-type(1) { transition-delay: .14s; }
    body.nav-open .sidebar-link:nth-of-type(2) { transition-delay: .17s; }
    body.nav-open .sidebar-link:nth-of-type(3) { transition-delay: .20s; }
    body.nav-open .sidebar-link:nth-of-type(4) { transition-delay: .22s; }
    body.nav-open .sidebar-link:nth-of-type(5) { transition-delay: .24s; }
    body.nav-open .sidebar-link:nth-of-type(6) { transition-delay: .26s; }
    body.nav-open .sidebar-link:nth-of-type(7) { transition-delay: .27s; }
    body.nav-open .sidebar-link:nth-of-type(8) { transition-delay: .28s; }
    body.nav-open .sidebar-link:nth-of-type(9) { transition-delay: .29s; }
    body.nav-open .sidebar-signout    { transition-delay: .32s; }
    .app-main { margin-left: 0; padding: 64px 16px 76px; }
    .mobile-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--portal-border);
        padding: 6px 4px;
        z-index: 25;
    }
    .mobile-tabs a {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        padding: 6px 0;
        color: var(--portal-muted) !important;
        font-size: .68rem;
        font-weight: 600;
    }
    .mobile-tabs a i { font-size: 1.15rem; }
    .mobile-tabs a.active { color: var(--portal-primary) !important; }
    .mobile-tabs a:hover { text-decoration: none; }

    /* Order tab — raised FAB-style emphasis. The bubble sits above the
       tab strip so it reads as the primary action. */
    .mobile-tabs .mobile-tabs-cta { position: relative; }
    .mobile-tabs-cta-bubble {
        display: inline-flex;
        align-items: center; justify-content: center;
        width: 52px; height: 52px;
        margin-top: -22px; margin-bottom: 2px;
        border-radius: 50%;
        background: var(--portal-cta);
        color: #fff;
        box-shadow: 0 6px 14px rgba(15,23,42,.18);
        transition: background-color .15s ease, transform .04s ease;
    }
    .mobile-tabs-cta-bubble i { font-size: 1.4rem; color: #fff; }
    .mobile-tabs-cta:active .mobile-tabs-cta-bubble { transform: translateY(1px); }
    .mobile-tabs-cta.active .mobile-tabs-cta-bubble { background: var(--portal-cta-d); }
    .mobile-tabs-cta.active { color: var(--portal-text-2) !important; }
    .map-full { height: calc(100vh - 200px); height: calc(100dvh - 200px); }

    .mobile-more-sheet {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.45);
        z-index: 35;
        align-items: flex-end;
        justify-content: center;
        padding: 0 16px 70px;
    }
    body.mobile-more-open .mobile-more-sheet { display: flex; }
    .mobile-more-card {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: 14px;
        width: 100%;
        max-width: 360px;
        box-shadow: var(--shadow-lg);
    }
    .mobile-more-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: .95rem;
        color: var(--portal-text-2) !important;
    }
    .mobile-more-link i { font-size: 1.1rem; color: var(--portal-muted); }
    .mobile-more-link:hover { background: var(--portal-bg); text-decoration: none; }
    .mobile-more-link.active { background: var(--portal-primary); color: #fff !important; }
    .mobile-more-link.active i { color: #fff; }

    .mobile-more-restaurant {
        padding: 10px 12px 12px;
        margin: 2px 0 8px;
        border-bottom: 1px solid var(--portal-border);
    }
    .mobile-more-restaurant-label {
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-weight: 700;
        color: var(--portal-muted);
        margin-bottom: 6px;
    }
    .mobile-more-restaurant-select {
        width: 100%;
        background: #fff;
        color: var(--portal-text);
        border: 1px solid var(--portal-border);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
        font-family: inherit;
        font-size: .9rem;
        font-weight: 600;
        cursor: pointer;
    }
}
@media (min-width: 881px) { .mobile-more-sheet { display: none !important; } }

/* ── Demand intelligence dashboard ──────────────────────────────── */

/* B. Today's hero */
.demand-hero { padding: 24px; }
.demand-hero-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.demand-hero-sub {
    font-size: .85rem;
    color: var(--portal-muted);
    font-weight: 600;
}
.demand-hero-body {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 28px;
    align-items: center;
}
.demand-hero-index {
    text-align: center;
    border-right: 1px solid var(--portal-border);
    padding-right: 24px;
}
.demand-index-value {
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--portal-primary);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.demand-index-x {
    font-size: .75rem;
    color: var(--portal-muted-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
}
.demand-index-band {
    margin-top: 10px;
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.demand-index-band.band-surge   { background: #dcfce7; color: #15803d; }
.demand-index-band.band-busy    { background: #ecfdf5; color: #16a34a; }
.demand-index-band.band-normal  { background: #f1f5f9; color: #475569; }
.demand-index-band.band-slow    { background: #fef3c7; color: #b45309; }
.demand-index-band.band-dead    { background: #fee2e2; color: #b91c1c; }
.demand-hero-line {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--portal-text);
    margin: 0 0 16px;
    line-height: 1.45;
}

/* Confidence band */
.demand-confidence { margin-bottom: 14px; }
.demand-conf-track {
    position: relative;
    height: 12px;
    background: var(--portal-bg);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--portal-border);
}
.demand-conf-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(90deg, #93c5fd, #1e3a5f, #93c5fd);
    border-radius: 999px;
}
.demand-conf-tick {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 2px;
    background: var(--portal-text);
}
.demand-conf-p10 { background: #94a3b8; }
.demand-conf-p50 { background: var(--portal-text); width: 3px; }
.demand-conf-p90 { background: #94a3b8; }
.demand-conf-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--portal-muted-2);
    font-weight: 600;
}
.demand-conf-labels strong { color: var(--portal-text); margin-left: 4px; }

.demand-history-line {
    font-size: .9rem;
    color: var(--portal-muted);
    font-weight: 500;
    border-top: 1px solid var(--portal-border);
    padding-top: 12px;
    margin-top: 8px;
}

.demand-factors-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--portal-border);
}
.demand-factor-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.demand-factor-pill small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--portal-muted);
}
.demand-factor-pill.pos { background: #ecfdf5; color: #15803d; }
.demand-factor-pill.pos small { color: #166534; }
.demand-factor-pill.neg { background: #fef2f2; color: #b91c1c; }
.demand-factor-pill.neg small { color: #991b1b; }

@media (max-width: 720px) {
    .demand-hero-body { grid-template-columns: 1fr; }
    .demand-hero-index { border-right: none; border-bottom: 1px solid var(--portal-border); padding: 0 0 20px; }
    .demand-index-value { font-size: 3.4rem; }
}

/* C. 7-day strip */
.demand-week-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.week-col {
    background: var(--portal-bg);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    text-align: center;
    transition: border-color .15s, transform .15s;
}
.week-col.is-today {
    border: 2px solid var(--portal-primary);
    background: var(--portal-surface);
    box-shadow: var(--shadow-sm);
}
.week-dow {
    font-size: .8rem;
    font-weight: 700;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.week-icon {
    margin: 6px 0;
    font-size: 1.3rem;
    color: var(--portal-text-2);
}
.week-temp {
    font-size: .85rem;
    color: var(--portal-muted);
    font-weight: 600;
}
.week-index {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.week-band {
    margin-top: 4px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--portal-muted);
}
.week-band.band-surge  { color: #15803d; }
.week-band.band-busy   { color: #16a34a; }
.week-band.band-normal { color: var(--portal-muted-2); }
.week-band.band-slow   { color: #b45309; }
.week-band.band-dead   { color: #b91c1c; }

@media (max-width: 720px) {
    .demand-week-strip { grid-template-columns: repeat(7, minmax(64px, 1fr)); overflow-x: auto; }
}

.demand-recs {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.demand-rec {
    background: var(--portal-bg);
    border-left: 3px solid var(--portal-cta);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    color: var(--portal-text-2);
    font-weight: 500;
    line-height: 1.4;
}
.demand-rec i { color: var(--portal-cta-d); margin-top: 2px; }

/* B.5 Restaurant profile */
.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 14px 0 18px;
}
.profile-stat {
    background: var(--portal-bg);
    border-radius: var(--radius-sm);
    padding: 14px;
}
.profile-stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--portal-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.profile-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
}
.profile-stat-value .unit {
    font-size: .8rem;
    color: var(--portal-muted);
    font-weight: 500;
}
.profile-breakdown {
    margin-top: 4px;
    font-size: .9rem;
}
.profile-breakdown summary {
    cursor: pointer;
    color: var(--portal-primary);
    font-weight: 600;
    padding: 6px 0;
}
.profile-breakdown-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    border-left: 3px solid var(--portal-border);
    padding-left: 12px;
    color: var(--portal-text-2);
    font-weight: 500;
}
.profile-breakdown-list li { padding: 3px 0; font-variant-numeric: tabular-nums; }

.profile-vs-actuals {
    background: var(--portal-bg);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 16px;
}
.profile-vs-actuals-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: .92rem;
    color: var(--portal-text-2);
    font-weight: 500;
}
.profile-vs-actuals-row.delta-row {
    border-top: 1px dashed var(--portal-border);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 600;
}

/* Location signals */
.signal-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}
.signal-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--portal-border);
    font-size: .92rem;
    color: var(--portal-text-2);
    font-weight: 500;
}
.signal-list li:last-child { border-bottom: none; }
.signal-list li i { color: var(--portal-muted-2); font-size: 1rem; }
.signal-list li strong { font-weight: 700; color: var(--portal-text); margin-left: auto; }
.signal-list li.signal-on { color: var(--portal-primary); }
.signal-list li.signal-on i { color: var(--portal-primary); }

/* Halal module */
.halal-module-title {
    margin: 6px 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-text);
}
.halal-module-line {
    margin: 0 0 10px;
    font-size: .92rem;
    color: var(--portal-text-2);
    font-weight: 500;
}
.halal-recs {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: .88rem;
}
.halal-recs li {
    padding: 4px 0 4px 18px;
    color: var(--portal-text-2);
    font-weight: 500;
    position: relative;
}
.halal-recs li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: #6d28d9;
    font-weight: 700;
}

/* H. Factor table */
.factor-table {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.factor-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(120px, 2fr) 76px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
}
.factor-row:hover { background: var(--portal-bg); }
.factor-label {
    font-size: .9rem;
    color: var(--portal-text-2);
    font-weight: 600;
}
.factor-bar-wrap {
    background: var(--portal-bg);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.factor-bar {
    height: 100%;
    border-radius: 999px;
}
.factor-bar.pos { background: linear-gradient(90deg, #86efac, #16a34a); }
.factor-bar.neg { background: linear-gradient(90deg, #fca5a5, #b91c1c); }
.factor-impact {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .92rem;
}
.factor-impact.pos { color: #16a34a; }
.factor-impact.neg { color: #b91c1c; }
.factor-row.factor-total {
    border-top: 2px solid var(--portal-border);
    margin-top: 6px;
    padding-top: 12px;
    font-size: 1rem;
}
.factor-row.factor-total .factor-label { font-weight: 700; color: var(--portal-text); }

/* E. Monthly chart */
.demand-monthly-chart {
    width: 100%;
    height: 260px;
    margin-top: 12px;
}
.demand-month-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.demand-month-callouts > div {
    background: var(--portal-bg);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
}
.callout-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--portal-muted);
    font-weight: 600;
    margin-bottom: 2px;
}
.demand-month-callouts > div span:not(.callout-label) {
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
}

/* F. Events timeline */
.event-timeline {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.event-row {
    display: grid;
    grid-template-columns: 36px 1fr 76px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--portal-bg);
    border-left: 3px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
}
.event-row-tourism    { border-left-color: #f97316; }
.event-row-federal    { border-left-color: #1e40af; }
.event-row-dining     { border-left-color: #7c3aed; }
.event-row-seasonal   { border-left-color: #d97706; }
.event-row-convention { border-left-color: #0ea5e9; }
.event-row-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--portal-surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--portal-text-2);
    font-size: 1rem;
}
.event-row-title {
    font-weight: 700;
    color: var(--portal-text);
    font-size: .95rem;
}
.event-row-meta {
    font-size: .8rem;
    color: var(--portal-muted);
    font-weight: 600;
    margin-top: 2px;
}
.event-row-impact {
    text-align: right;
    font-weight: 800;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.event-row-impact.pos { color: #16a34a; }
.event-row-impact.neg { color: #b91c1c; }

/* G. Ordering pattern */
.ordering-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}
.ordering-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.demand-dow-chart {
    width: 100%;
    height: 200px;
}
.ordering-suggestion {
    margin-top: 14px;
    background: var(--portal-bg);
    border-left: 3px solid var(--portal-cta);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-weight: 500;
    color: var(--portal-text-2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ordering-suggestion i { color: var(--portal-cta-d); margin-top: 3px; }

@media (max-width: 720px) {
    .ordering-grid { grid-template-columns: 1fr; }
    .factor-row { grid-template-columns: minmax(120px, 1fr) 1fr 60px; gap: 8px; padding: 6px 8px; }
}

/* ── Order picker (place-order page) ───────────────────────────── */
.order-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 18px;
    margin-top: 8px;
}
@media (max-width: 980px) { .order-shell { grid-template-columns: 1fr; } }

.order-picker { min-width: 0; }

.picker-toolbar {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 10px;
    margin: 6px 0 14px;
}
@media (max-width: 600px) { .picker-toolbar { grid-template-columns: 1fr; } }
.picker-toolbar input[type="search"],
.picker-toolbar select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 500;
    font-size: .95rem;
    background: #fff;
    color: var(--portal-text);
}
.picker-toolbar input[type="search"]:focus,
.picker-toolbar select:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}

.picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    max-height: 540px;
    overflow-y: auto;
    padding-right: 4px;
}
.picker-item {
    background: #fff;
    border: 1.5px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .12s ease, transform .04s ease, background-color .12s ease;
}
.picker-item:hover, .picker-item:focus {
    border-color: var(--portal-primary);
    outline: none;
}
.picker-item:active { transform: translateY(1px); }
.picker-item.in-cart {
    background: #f0f4f9;
    border-color: var(--portal-primary);
}
.picker-item-name {
    font-weight: 700;
    color: var(--portal-text);
    font-size: .95rem;
    line-height: 1.3;
}
.picker-item-variety {
    font-weight: 500;
    color: var(--portal-muted);
    font-size: .82rem;
}
.picker-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    font-size: .8rem;
    color: var(--portal-muted);
    font-weight: 600;
}
.picker-item-price {
    color: var(--portal-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.order-cart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
    position: sticky;
    top: 18px;
}
@media (max-width: 980px) { .order-cart { position: static; } }

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    margin-top: 4px;
}
/* Legacy cart-row block — superseded by the redesigned layout further
   below. Kept empty to mark the deletion site for any future grep. */

.cart-total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--portal-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    color: var(--portal-text-2);
}
.cart-total strong {
    font-size: 1.4rem;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* ── Place order — category-grouped product picker ───────────────── */
.picker-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.picker-pill {
    background: #fff;
    border: 1.5px solid var(--portal-border);
    color: var(--portal-text-2);
    padding: 7px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
    white-space: nowrap;
}
.picker-pill:hover { border-color: var(--portal-primary); }
.picker-pill.active {
    background: var(--portal-primary);
    color: #fff;
    border-color: var(--portal-primary);
}
.picker-pill-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--portal-bg);
    color: var(--portal-muted);
    font-size: .7rem;
    font-weight: 700;
}
.picker-pill.active .picker-pill-count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.picker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-height: 640px;
    overflow-y: auto;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.product-group-head {
    grid-column: 1 / -1;
    padding: 12px 16px 8px;
    background: #f8fafc;
    border-bottom: 1px solid var(--portal-border);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--portal-muted);
    position: sticky;
    top: 0;
    z-index: 1;
}
.product-group-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--portal-border);
    color: var(--portal-muted-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.product-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--portal-border);
    align-items: center;
    transition: background-color .12s ease;
}
.product-row:last-child { border-bottom: none; }
.product-row:hover { background: #f8fafc; }
.product-row.in-cart {
    background: #f0f4f9;
    border-left: 3px solid var(--portal-cta);
    padding-left: 13px;
}
.product-row-main { min-width: 0; }
.product-row-name {
    font-weight: 700;
    color: var(--portal-text);
    font-size: .95rem;
    line-height: 1.3;
}
.product-row-variety {
    font-weight: 500;
    color: var(--portal-muted);
    font-size: .82rem;
}
.product-row-meta {
    margin-top: 2px;
    font-size: .78rem;
    color: var(--portal-muted-2);
    font-weight: 500;
}
.product-row-controls {
    display: grid;
    grid-template-columns: minmax(140px, 180px) auto minmax(72px, 90px);
    gap: 8px;
    align-items: center;
    justify-self: end;
}
.product-row-unit {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    background: #fff;
    color: var(--portal-text);
    cursor: pointer;
}
.product-row-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}
.qty-btn {
    background: #fff;
    border: none;
    border-right: 1px solid var(--portal-border);
    color: var(--portal-text-2);
    padding: 0 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.qty-btn:last-child { border-right: none; border-left: 1px solid var(--portal-border); }
.qty-btn:hover { background: var(--portal-bg); color: var(--portal-primary); }
.qty-btn:active { transform: translateY(1px); }
.qty-input {
    width: 50px;
    border: none;
    text-align: center;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.qty-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--portal-primary); }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.product-row-line {
    text-align: right;
    font-weight: 700;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
    font-size: .92rem;
    min-width: 72px;
}
.product-row.in-cart .product-row-line { color: var(--portal-cta-d); }

@media (max-width: 720px) {
    .product-row { grid-template-columns: 1fr; gap: 8px; }
    .product-row-controls { justify-self: start; grid-template-columns: 1fr auto auto; gap: 6px; width: 100%; }
    .product-row-line { text-align: right; }
}

/* Sticky bottom action bar for the order form */
.order-bar {
    position: sticky;
    bottom: 16px;
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 12px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 5;
}
.order-bar-summary {
    font-size: .9rem;
    color: var(--portal-muted);
    font-weight: 500;
}
.order-bar-summary strong {
    color: var(--portal-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}
.order-bar-divider { margin: 0 4px; opacity: .5; }
.order-bar-tier {
    margin-left: 10px;
    padding: 2px 8px;
    background: var(--portal-bg);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.order-bar .btn {
    padding: 11px 22px;
    font-size: .92rem;
    font-weight: 700;
}
.order-bar .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
@media (max-width: 720px) {
    .order-bar { flex-direction: column; align-items: stretch; }
    .order-bar .btn { width: 100%; }
}

/* ================================================================
   Order placement — card grid + sticky summary sidebar (Apr 2026).
   ================================================================ */

.order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1100px) { .order-layout { grid-template-columns: 1fr; } }

.order-main { min-width: 0; }

/* Big rounded search bar with icon. Sticky on the order page so it
   never scrolls out of reach while the customer browses 200+ items —
   the catalog is the primary scroll target, the search needs to stay
   on top of it. The mobile-topbar offset is handled in the phone-size
   media block below; on desktop the sidebar handles wayfinding so
   top: 0 is correct. */
.picker-search-wrap {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--portal-bg, #f0f2f7);
    margin-bottom: 12px;
    padding: 8px 0;
}
/* Search icon needs `relative` ancestor for absolute positioning, and
   sticky already creates a containing block — no separate wrap needed. */
.picker-search-icon {
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}
.picker-search-wrap input[type="search"] {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font: 500 .95rem/1 'Plus Jakarta Sans', sans-serif;
    color: var(--portal-text);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.picker-search-wrap input[type="search"]:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}

/* Pills override — no count chips inside, keeps it clean per the mock */
.order-main .picker-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px;
    margin: 0 0 10px;
    scrollbar-width: thin;
}
.order-main .picker-pill {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    font: 600 .85rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s ease;
}
.order-main .picker-pill:hover { border-color: var(--portal-primary); }
.order-main .picker-pill.active {
    background: var(--portal-primary);
    color: #fff;
    border-color: var(--portal-primary);
}

/* Product card grid — phones get one card per row (full-width rows so
   nothing doubles up on a narrow viewport); tablets + desktops fan out. */
.picker-card-grid {
    display: grid;
    grid-template-columns: 1fr;            /* phones: one row per card */
    gap: 8px;
}
@media (min-width: 600px) {
    .picker-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
    }
}
@media (min-width: 1024px) {
    .picker-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }
}
.product-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.product-card:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.product-card.in-cart { border-color: var(--portal-primary); background: #f7fafc; }

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.card-name {
    font-weight: 700;
    color: #111827;
    font-size: 1rem;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.card-ordered-badge {
    flex: 0 0 auto;
    background: #1e3a5f;
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.card-cat {
    color: #64748b;
    font-weight: 500;
    font-size: .82rem;
}
.card-sku {
    color: var(--portal-muted, #475569);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    font-family: 'Plus Jakarta Sans', monospace;
}
.card-price {
    margin-top: 4px;
    font-weight: 700;
    font-size: 1.4rem;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.card-price-unit {
    color: #64748b;
    font-weight: 500;
    font-size: .85rem;
}
/* Add button + qty stepper occupy the full width of the card. The
   unit selector lives inline with the price up top, so .card-actions
   only ever holds one child. */
.card-actions {
    display: block;
    margin-top: 4px;
}
.card-actions > * { width: 100%; }

.btn-add {
    width: 100%;
    padding: 12px 14px;
    background: var(--portal-primary);
    color: #fff;
    font: 700 .95rem/1 'Plus Jakarta Sans', sans-serif;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
    min-height: 44px;       /* mobile-friendly touch target */
}
.btn-add:hover { background: #15293f; }
.btn-add-quote, .btn-add:disabled {
    background: #cbd5e1;
    color: #475569;
    cursor: not-allowed;
}
.btn-add-quote:hover { background: #cbd5e1; }
.card-price-quote {
    color: #64748b !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-style: italic;
}
.product-card.no-price { background: #fafbfc; }

.card-qty {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 0;
    align-items: stretch;
    justify-items: stretch;
    border: 1px solid var(--portal-primary);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    min-height: 44px;       /* same as .btn-add for swap-in consistency */
}
.card-qty .qty-btn {
    background: var(--portal-primary);
    color: #fff;
    border: 0;
    font: 700 1.05rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    padding: 0;
    /* Flex centers both the +/- glyphs vertically + horizontally */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card-qty .qty-btn:hover { background: #15293f; }
.card-qty .qty-input {
    border: 0;
    font: 700 1rem/1 'Plus Jakarta Sans', sans-serif;
    color: #0f172a;
    background: #fff;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center !important;
    text-align-last: center;          /* iOS Safari quirk for input */
    -moz-text-align-last: center;
    font-variant-numeric: tabular-nums;
    /* Vertical centering needs explicit line-height = container height */
    line-height: 42px;                /* matches min-height 44px - 2 borders */
}
.card-qty .qty-input::-webkit-outer-spin-button,
.card-qty .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card-qty .qty-input { -moz-appearance: textfield; }
.card-qty .qty-input:focus { outline: none; }

/* Sticky right-hand summary */
.order-summary {
    position: sticky;
    top: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}
@media (max-width: 1100px) { .order-summary { position: static; max-height: none; } }

.order-summary-header {
    background: var(--portal-primary);
    color: #fff;
    padding: 10px 16px;
    font: 700 .95rem/1 'Plus Jakarta Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Cart list takes the lion's share of vertical space — the user
   complaint was "I can only see one item at a time", which was the
   result of `min-height: 140px` on a sticky-positioned aside whose
   header/totals/fields/submit footprint together left maybe 100px for
   the list. Bumped min-height substantially and let flex: 1 expand
   into all remaining space; surrounding blocks are also compacted. */
.order-summary-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 280px;
}
.cart-empty {
    text-align: center;
    padding: 24px 8px;
    color: #94a3b8;
}
.cart-empty-icon { font-size: 2.4rem; color: #cbd5e1; margin-bottom: 6px; }
.cart-empty-title { font-weight: 600; color: #475569; margin-top: 6px; }
.cart-empty-sub { font-size: .82rem; color: #94a3b8; margin-top: 2px; }

/* Cart row — refactored layout. Three rows of content, no chip/pill
   styling on the unit. The remove × is anchored top-right of the row
   so it doesn't compete with the unit text for visual weight. */
.cart-row {
    position: relative;
    border-bottom: 1px solid #f1f5f9;
    padding: 12px 0;
}
.cart-row:first-child { padding-top: 0; }
.cart-row:last-child  { border-bottom: 0; padding-bottom: 0; }

.cart-row-name {
    font-weight: 700;
    color: #0f172a;
    font-size: .92rem;
    line-height: 1.3;
    padding-right: 28px;   /* room for the × button */
}
.cart-row-variety {
    color: #64748b;
    font-weight: 500;
}
.cart-row-meta {
    margin-top: 2px;
    font-size: .78rem;
    color: #475569;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* No more chip styling on the unit — just plain inline text. */
.cart-row-unit { color: #475569; }
.cart-row-remove {
    position: absolute;
    top: 8px; right: 0;
    width: 24px; height: 24px;
    background: transparent;
    border: 0; padding: 0;
    color: var(--portal-muted, #475569);
    font-size: 1.05rem; line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color .12s ease, background-color .12s ease;
}
.cart-row-remove:hover { color: #dc2626; background: #fef2f2; }

.cart-row-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.cart-row-qty .qty-btn {
    width: 28px; height: 28px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1f2937;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
}
.cart-row-qty .qty-btn:hover { border-color: var(--portal-primary); }
.cart-row-qtynum {
    font-weight: 700; color: #0f172a;
    min-width: 22px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.cart-row-line {
    margin-left: auto;
    font-weight: 800;
    color: #0f172a;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.order-summary-totals {
    padding: 8px 16px 10px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1px 0;
    color: #475569;
    font-weight: 600;
    font-size: .82rem;
}
.order-summary-row strong { color: #111827; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-summary-grand {
    border-top: 1px dashed #e2e8f0;
    margin-top: 4px;
    padding-top: 6px;
    font-size: .9rem;
}
.order-summary-grand strong { font-size: 1.1rem; font-weight: 800; }

.order-summary-fields {
    padding: 10px 16px 12px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.order-summary-fields .field { margin: 0; }
.order-summary-fields label {
    display: block;
    font: 600 .72rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.order-summary-fields input[type="date"],
.order-summary-fields textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font: 600 .88rem/1.35 'Plus Jakarta Sans', sans-serif;
    color: #1f2937;
    background: #fff;
}
.order-summary-fields textarea { resize: vertical; min-height: 44px; max-height: 120px; }
.order-summary-fields input[type="date"]:focus,
.order-summary-fields textarea:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.dow-pill {
    display: inline-block;
    margin-top: 6px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: .72rem;
    padding: 3px 10px;
    border-radius: 999px;
}

.btn-place-order {
    margin: 10px 16px 14px;
    padding: 12px;
    background: var(--portal-primary);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font: 700 1rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: background .12s ease;
    flex-shrink: 0;
}
.btn-place-order:hover:not(:disabled) { background: #15293f; }
.btn-place-order:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    opacity: .85;
}


/* ================================================================
   Hours comparison page (Apr 2026 redesign).
   ================================================================ */

.hours-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hours-pagehead .page-actions { display: flex; gap: 8px; }

/* Empty-state card (no Google hours yet) */
.empty-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 24px;
    margin: 12px 0 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.empty-card-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: #fef3c7;
    color: #b45309;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.empty-card-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: #111827; }
.empty-card-msg   { margin: 0 0 12px; color: #475569; font-size: .9rem; line-height: 1.5; }

/* Insight strip — three cards above the heatmap */
.insight-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 12px 0 18px;
}
.insight-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1e3a5f;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.insight-contested { border-left-color: #ef4444; }
.insight-alone     { border-left-color: #16a34a; }
.insight-overlap   { border-left-color: #2563eb; }
.insight-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #64748b;
}
.insight-label i { font-size: .85rem; }
.insight-contested .insight-label i { color: #dc2626; }
.insight-alone     .insight-label i { color: #16a34a; }
.insight-overlap   .insight-label i { color: #2563eb; }
.insight-value {
    margin: 4px 0 2px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.insight-sub { font-size: .82rem; color: #475569; font-weight: 500; }

/* Hero stat above the per-day strip */
.weekly-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 14px 0 4px;
    padding: 14px 18px;
    background: linear-gradient(0deg, rgba(30, 58, 95, 0.05), rgba(30, 58, 95, 0.02));
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.weekly-hero-num {
    font-size: 2.6rem;
    font-weight: 800;
    color: #1e3a5f;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.weekly-hero-line { font-weight: 700; color: #1f2937; }
.weekly-hero-sub  { color: #64748b; font-size: .85rem; font-weight: 500; }

/* Per-day strip — weekend tint */
.weekly-strip { gap: 10px; }
.weekly-day-card { padding: 12px 14px; transition: border-color .12s; }
.weekly-day-card.is-weekend { background: #fff7ed; border-color: #fed7aa; }

/* Hours card chrome */
.hours-card { padding-top: 18px; }
.hours-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 4px;
}
.hours-coverage { font-size: .78rem; color: var(--portal-muted-2); }

/* Heatmap toolbar — pill toggles + cuisine filter + legend. Was sticky;
   un-stuck since it ate vertical space on the laptop viewport. */
.hours-toolbar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.hours-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.hours-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    font: 600 .82rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: all .12s ease;
    user-select: none;
}
.hours-pill:hover:not(:disabled) { border-color: #1e3a5f; }
.hours-pill.active {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #fff;
}
.hours-pill[disabled] { opacity: .5; cursor: not-allowed; }
.hours-pill i { font-size: .85rem; }

.hours-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.hours-filter label {
    font: 600 .78rem/1 'Plus Jakarta Sans', sans-serif;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hours-filter select {
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: 600 .85rem/1 'Plus Jakarta Sans', sans-serif;
    color: #1f2937;
    background: #fff;
    min-width: 180px;
}
.hours-filter select:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30,58,95,.12); }

/* Inline legend in toolbar */
.hours-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font: 600 .75rem/1 'Plus Jakarta Sans', sans-serif;
    color: #475569;
}
.hours-legend-swatch {
    width: 14px; height: 14px;
    border-radius: 4px;
    display: inline-block;
}
/* 8-tier heat scale — light green → yellow → orange → red → dark red. */
.hours-legend-swatch[data-tier="1"] { background: #d9f99d; }
.hours-legend-swatch[data-tier="2"] { background: #bef264; }
.hours-legend-swatch[data-tier="3"] { background: #facc15; }
.hours-legend-swatch[data-tier="4"] { background: #fbbf24; }
.hours-legend-swatch[data-tier="5"] { background: #fb923c; }
.hours-legend-swatch[data-tier="6"] { background: #f97316; }
.hours-legend-swatch[data-tier="7"] { background: #ef4444; }
.hours-legend-swatch[data-tier="8"] { background: #b91c1c; }
.hours-legend-end { font-size: .72rem; color: var(--portal-muted-2); font-weight: 600; }
.hours-legend-you   { background: #2563eb; }
.hours-legend-divider {
    width: 1px; height: 14px; background: #cbd5e1; margin: 0 4px;
}

/* Heatmap table chrome */
.hours-grid-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    outline: none;
}
.hours-grid {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
}
.hours-grid th, .hours-grid td { border: 0; }

/* Sticky day-of-week column */
.hours-grid .hg-corner,
.hours-grid .hg-day {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f8fafc;
    width: 56px; min-width: 56px;
    text-align: center;
    font-weight: 700;
    color: #1f2937;
    border-right: 1px solid #e2e8f0;
}
.hours-grid .hg-corner { background: #f1f5f9; }
.hours-grid .hg-day { padding: 0 10px; }
.hours-grid thead th {
    position: sticky; top: 0;
    z-index: 2;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    font-weight: 600;
    color: #475569;
    padding: 6px 4px;
    height: 28px;
}
.hours-grid thead .hg-corner { z-index: 4; }

/* Hour ticks — labels every 4 hr, small ticks between */
.hours-grid .hg-hour { font-size: .7rem; }
.hours-grid .hg-hour.is-major .hg-hour-label { font-weight: 700; color: #1f2937; }
.hours-grid .hg-hour.is-minor { padding: 0; }
.hours-grid .hg-hour-tick {
    display: inline-block;
    width: 1px; height: 6px;
    background: #cbd5e1;
}
.hours-grid .hg-hour.is-now {
    color: #1e3a5f;
}
.hours-grid .hg-hour.is-now::after {
    content: 'NOW';
    display: block;
    font: 800 .55rem/1 'Plus Jakarta Sans', sans-serif;
    color: #fff;
    background: #1e3a5f;
    border-radius: 999px;
    padding: 1px 5px;
    margin-top: 2px;
    letter-spacing: .06em;
}

/* Density sparkbar column at the right edge */
.hours-grid .hg-spark-head { width: 80px; min-width: 80px; }
.hours-grid .hg-spark { padding: 0 8px; vertical-align: middle; background: #f8fafc; border-left: 1px solid #e2e8f0; }
.hours-grid .hg-spark-bar {
    display: block;
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}
.hours-grid .hg-spark-bar::before {
    content: '';
    position: absolute;
    inset: 0 calc(100% - var(--spark, 0%)) 0 0;
    background: linear-gradient(90deg, #86efac, #fde047, #fb923c, #ef4444);
    border-radius: 999px;
}

/* Weekend row tint */
.hours-grid .hg-row.is-weekend > .hg-day { background: #fef3c7; color: #78350f; }
.hours-grid .hg-row.is-weekend > .hcell  { background-color: rgba(254, 243, 199, 0.35); }
.hours-grid .hg-row.is-today > .hg-day {
    background: #dbeafe;
    color: #1e40af;
    box-shadow: inset -3px 0 0 0 #2563eb;
}

/* Cells */
.hours-grid .hcell {
    text-align: center;
    padding: 8px 5px;
    height: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
    background: transparent;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, transform .08s ease;
    position: relative;
}
.hours-grid .hcell:focus-visible { outline: 2px solid #1e3a5f; outline-offset: -2px; z-index: 5; }
.hours-grid .hcell .hcell-num { display: inline-block; min-width: 1em; }

/* Heat tier coloring (when "comp" layer is on) — 8 tiers */
.hours-grid.show-comp .hcell[data-tier="1"] { background: #d9f99d; color: #365314; }
.hours-grid.show-comp .hcell[data-tier="2"] { background: #bef264; color: #365314; }
.hours-grid.show-comp .hcell[data-tier="3"] { background: #facc15; color: #713f12; }
.hours-grid.show-comp .hcell[data-tier="4"] { background: #fbbf24; color: #713f12; }
.hours-grid.show-comp .hcell[data-tier="5"] { background: #fb923c; color: #fff; }
.hours-grid.show-comp .hcell[data-tier="6"] { background: #f97316; color: #fff; }
.hours-grid.show-comp .hcell[data-tier="7"] { background: #ef4444; color: #fff; }
.hours-grid.show-comp .hcell[data-tier="8"] { background: #b91c1c; color: #fff; }

/* "You're open" — translucent blue overlay (sits on top of any heat tier
   so the underlying density is still visible through the wash). */
.hours-grid.show-you .hcell[data-you="1"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(37, 99, 235, .32);
    pointer-events: none;
}
.hours-grid.show-you .hcell[data-you="1"] .hcell-num {
    position: relative; z-index: 2;
    color: #fff; text-shadow: 0 1px 2px rgba(15, 23, 42, .6);
}
/* When "you" layer is on but heat is off, give the cell a saturated blue. */
.hours-grid.show-you:not(.show-comp) .hcell[data-you="1"]::after {
    background: rgba(37, 99, 235, .55);
}

/* "Alone" corner ribbon (you're open AND no competitors).
   Always visible when both base layers are on; promoted to a stronger
   gold ribbon when the dedicated "Alone windows" layer is enabled. */
.hours-grid.show-you .hcell[data-alone="1"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-style: solid;
    border-width: 8px 8px 0 0;
    border-color: #16a34a transparent transparent transparent;
    pointer-events: none;
}
.hours-grid.show-alone .hcell[data-alone="1"] {
    background: #fef9c3 !important;
    color: #713f12 !important;
    box-shadow: inset 0 0 0 2px #ca8a04 !important;
}
.hours-grid.show-alone .hcell[data-alone="1"]::before {
    border-color: #ca8a04 transparent transparent transparent;
}

/* Pinned cell */
.hours-grid .hcell.is-pinned {
    outline: 2px solid #1e3a5f;
    outline-offset: -2px;
    z-index: 5;
}

/* Pulse highlight (used by gap-finder click) */
@keyframes hcell-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(202, 138, 4, .8) inset; }
    50%  { box-shadow: 0 0 0 4px rgba(202, 138, 4, .25) inset; }
    100% { box-shadow: 0 0 0 0 rgba(202, 138, 4, 0) inset; }
}
.hours-grid .hcell.is-pulsing { animation: hcell-pulse 1.4s ease-out 1; }

/* Faded look when no layer is on */
.hours-grid:not(.show-comp):not(.show-you) .hcell { color: #cbd5e1; background: transparent; }

/* "Right now" column line — starts below the sticky header so it doesn't
   draw over the hour labels. JS sets left + width to the current cell. */
.hours-now-line {
    position: absolute;
    top: 28px; bottom: 0;
    pointer-events: none;
    background: rgba(30, 58, 95, 0.06);
    border-left:  2px dashed rgba(30, 58, 95, 0.55);
    border-right: 2px dashed rgba(30, 58, 95, 0.55);
    z-index: 4;
}

/* Custom popover — position: fixed so JS can use viewport coords without
   worrying about positioned ancestors anywhere up the tree. */
.hcell-pop {
    position: fixed;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
    padding: 12px 14px;
    min-width: 220px;
    max-width: 320px;
    font: 500 .82rem/1.45 'Plus Jakarta Sans', sans-serif;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
    z-index: 50;
}
.hcell-pop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hcell-pop-head { font-size: .9rem; color: #111827; }
.hcell-pop-time { color: #475569; font-weight: 600; margin-left: 4px; }
.hcell-pop-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
.hcell-pop-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 700 .68rem/1.4 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.hcell-pop-badge.you   { background: #dbeafe; color: #1e40af; }
.hcell-pop-badge.alone { background: #fef9c3; color: #854d0e; }
.hcell-pop-badge.count { background: #f1f5f9; color: #1f2937; }
.hcell-pop-badge.muted { background: #f1f5f9; color: #64748b; }
.hcell-pop-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
}
.hcell-pop-list li { color: #1f2937; font-weight: 500; padding: 1px 0; }
.hcell-pop-list li.more { color: #64748b; font-weight: 600; font-size: .76rem; padding-top: 4px; }
.hcell-pop-hint {
    margin-top: 8px;
    font-size: .7rem;
    color: #94a3b8;
    text-align: right;
}

/* Gap finder strip */
.gap-finder {
    background: linear-gradient(0deg, rgba(22, 163, 74, 0.05), rgba(22, 163, 74, 0.01));
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0 18px;
}
.gap-finder-title {
    display: flex; align-items: center; gap: 6px;
    font: 700 .8rem/1 'Plus Jakarta Sans', sans-serif;
    color: #166534;
    margin-bottom: 8px;
}
.gap-finder-title i { color: #16a34a; }
.gap-finder-rows { display: flex; gap: 8px; flex-wrap: wrap; }
.gap-row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    cursor: pointer;
    font: 600 .82rem/1 'Plus Jakarta Sans', sans-serif;
    color: #1f2937;
    transition: all .12s;
}
.gap-row:hover { border-color: #16a34a; background: #f0fdf4; }
.gap-row-day { font-weight: 700; color: #166534; }
.gap-row-span { color: #1f2937; }
.gap-row-len { color: #64748b; font-size: .76rem; }

/* Competitors covered table */
.hours-comp-title { margin-top: 22px; }
.hours-comp-count { font-weight: 500; color: #64748b; font-size: .9rem; }
.hours-comp-table th { cursor: pointer; user-select: none; }
.hours-comp-table th .sort-arrow { font-size: .65rem; color: #94a3b8; margin-left: 4px; }
.hours-comp-table th.is-sorted { color: #1e3a5f; }
.hours-comp-table th.is-sorted .sort-arrow { color: #1e3a5f; }
.hours-comp-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hours-comp-table .action-cell { width: 60px; text-align: center; }

/* Distance dot */
.dist-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.dot-near { background: #16a34a; }
.dot-mid  { background: #f59e0b; }
.dot-far  { background: #94a3b8; }

/* Cuisine pill in table */
.cuisine-pill {
    display: inline-block;
    padding: 2px 9px;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    font: 600 .72rem/1.5 'Plus Jakarta Sans', sans-serif;
}

/* Overlap bar */
.overlap-col { width: 160px; }
.overlap-bar {
    display: inline-block;
    width: 90px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 8px;
}
.overlap-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #1e3a5f);
}
.overlap-pct { font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }

/* "View on Google Maps" pill */
.map-link {
    display: inline-flex;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
    color: #1e3a5f;
    background: #f1f5f9;
    border-radius: 8px;
    text-decoration: none;
    transition: all .12s;
}
.map-link:hover { background: #1e3a5f; color: #fff; }

/* ── Mobile rework: keep all 24 columns, just shrink them so the grid
   stays scannable instead of hiding 2/3 of the day. The wrap div already
   has overflow-x: auto so any genuine overflow becomes a scroll. */
@media (max-width: 800px) {
    .hours-grid { min-width: 720px; font-size: .72rem; }
    .hours-grid .hcell    { padding: 6px 2px; height: 30px; }
    .hours-grid .hg-day   { width: 44px; min-width: 44px; padding: 0 6px; }
    .hours-grid .hg-corner{ width: 44px; min-width: 44px; }
    .hours-grid .hg-hour  { font-size: .62rem; }
    .hours-grid .hg-hour.is-major .hg-hour-label { font-size: .62rem; }
    .hours-toolbar { padding: 8px; gap: 8px; }
    .hours-filter  { margin-left: 0; width: 100%; }
    .hours-cuisine-btn { flex: 1 1 auto; width: 100%; }
    .hours-cuisine-pop { width: 100%; }
    .hours-legend  { width: 100%; padding-top: 4px; border-top: 1px solid #e2e8f0; }
}
@media (max-width: 480px) {
    .hours-grid { min-width: 600px; font-size: .68rem; }
    .hours-grid .hcell { height: 26px; }
    .hours-comp-toolbar { flex-wrap: wrap; }
    .hours-comp-search-wrap { width: 100%; }
}

/* ── Print / PDF ──────────────────────────────────────────────────── */
@media print {
    body { background: #fff !important; }
    .sidebar, .mobile-tabs, .mobile-more-sheet, .sidebar-toggle,
    .page-actions, .hours-toolbar, .gap-finder, .map-link,
    .hcell-pop, .hours-now-line { display: none !important; }
    .app-main { margin-left: 0 !important; padding: 12px !important; }
    .insight-strip { page-break-inside: avoid; }
    .hours-grid-wrap { overflow: visible !important; }
    .hours-grid { font-size: 9pt; }
    .hours-grid .hcell { padding: 4px; }
    .card, .card-lg { box-shadow: none !important; border-color: #cbd5e1 !important; }
}

/* ── Pagination (history sections) ───────────────────────────────── */
.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
}
.pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--portal-border);
    background: #fff;
    color: var(--portal-text-2) !important;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.pager-link:hover {
    background: var(--portal-bg);
    border-color: var(--portal-border-2);
    text-decoration: none;
}
.pager-link.is-current {
    background: var(--portal-primary);
    color: #fff !important;
    border-color: var(--portal-primary);
    cursor: default;
}
.pager-link.is-disabled {
    color: var(--portal-muted-2) !important;
    background: #f8fafc;
    cursor: not-allowed;
    pointer-events: none;
    opacity: .5;
}
.pager-gap {
    color: var(--portal-muted-2);
    font-weight: 600;
    padding: 0 4px;
    user-select: none;
}
.pager-meta {
    font-size: .8rem;
    color: var(--portal-muted);
    font-weight: 600;
}

/* The pager originally only rendered anchors. The trends-page client-side
   pager uses <button> elements so click handling stays on the page. Reset
   the browser button defaults so they line up visually with the anchor
   variant. */
button.pager-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    line-height: 1;
}
button.pager-link.is-current { cursor: default; }

/* ── Trends page chart row ────────────────────────────────────────────
   Side-by-side at ≥1200px so neither chart stretches across the full
   page width on a desktop monitor. The 60/40 split keeps the rating-
   over-time chart (the more legend-heavy one) larger. Falls back to
   stacked single-column on narrower screens. */
.trends-charts-row {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 1200px) {
    .trends-charts-row {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/* ── Mobile / iPad polish ─────────────────────────────────────────── */
/* iOS Safari zooms inputs <16px on focus; force 16px on touch screens. */
@media (hover: none) and (pointer: coarse) {
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="text"],
    .field input[type="tel"],
    .field input[type="number"],
    .field input[type="date"],
    .field select,
    .field textarea,
    .picker-search-wrap input[type="search"],
    .order-summary-fields input,
    .order-summary-fields textarea,
    .qty-input,
    .card-qty .qty-input,
    input[type="date"] {
        font-size: 16px !important;   /* ≥16px stops iOS auto-zoom on focus */
    }
    /* Larger tap targets for the qty steppers used in the order picker. */
    .card-qty .qty-btn,
    .cart-row-qty .qty-btn { min-height: 44px; min-width: 44px; }
    .btn { min-height: 44px; }
}
/* iOS safe-area: keep bottom nav above the home indicator. */
@supports (padding: max(0px)) {
    @media (max-width: 880px) {
        .mobile-tabs {
            padding-bottom: max(6px, env(safe-area-inset-bottom));
        }
        .app-main {
            padding-bottom: max(76px, calc(76px + env(safe-area-inset-bottom)));
        }
    }
}
/* iPad-portrait fine-tuning: keep the sidebar drawer full-height and let
   the content breathe a bit. */
@media (min-width: 600px) and (max-width: 880px) {
    .sidebar { width: 280px; }
    .app-main { padding: 60px 22px 90px; }
}
/* Stop tables and pre-formatted blocks from blowing the viewport. */
@media (max-width: 880px) {
    .tbl-wrap { -webkit-overflow-scrolling: touch; }
    .tbl { font-size: .82rem; }
    .page-title { font-size: 1.25rem; }
    .card-lg { padding: 16px 16px; }
    .invoice-paper, .stmt-paper { padding: 18px 16px; }
}

/* ── Order placed: success hero ───────────────────────────────────── */
.order-success-hero {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 24px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
    border: 1px solid #6ee7b7;
    border-left: 6px solid #16a34a;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: orderSuccessIn .35s ease-out;
}
.order-success-icon {
    flex: 0 0 auto;
    font-size: 2.6rem;
    line-height: 1;
    color: #16a34a;
}
.order-success-body { flex: 1 1 auto; min-width: 0; }
.order-success-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #064e3b;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.order-success-msg {
    font-size: .95rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.5;
}
.order-success-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.order-success-actions .btn { padding: 8px 14px; font-size: .85rem; }
@keyframes orderSuccessIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
    .order-success-hero { flex-direction: column; gap: 10px; padding: 18px; }
    .order-success-icon { font-size: 2.2rem; }
    .order-success-title { font-size: 1.1rem; }
}

/* ============================================================
   Demand intelligence — scenario panel + visual upgrades
   ============================================================ */

/* Layout: main on the left, scenario panel pinned to the right rail at
   lg+; both stack on mobile. Explicit grid-template-areas mean the
   visual placement is fixed regardless of DOM order. */
.demand-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-areas: "main panel";
    gap: 14px;
    align-items: start;
}
.demand-main           { min-width: 0; grid-area: main; }
.demand-scenario-panel { grid-area: panel; }

@media (max-width: 1180px) {
    .demand-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "panel";
    }
}

.demand-scenario-panel {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 16px 16px 18px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
}
@media (max-width: 1180px) {
    .demand-scenario-panel { position: static; max-height: none; }
}

.dsp-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--portal-border);
}
.dsp-title { font-weight: 700; font-size: .98rem; color: #0f172a; }
.dsp-sub   { font-size: .76rem; color: #64748b; margin-top: 2px; line-height: 1.45; }

.dsp-section { padding: 8px 0 14px; border-bottom: 1px dashed #e2e8f0; }
.dsp-section:last-child { border-bottom: none; padding-bottom: 0; }
.dsp-section-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #475569;
    margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: baseline;
}
.dsp-section-meta { font-size: .64rem; font-weight: 600; color: var(--portal-muted, #475569); letter-spacing: .04em; text-transform: none; }

.dsp-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.dsp-chip {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    font: 600 .75rem/1.1 'Plus Jakarta Sans', sans-serif;
    padding: 6px 10px;
    cursor: pointer;
    transition: all .12s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.dsp-chip:hover { border-color: var(--portal-primary); }
.dsp-chip.active {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
    color: #fff;
}
.dsp-chip i { font-size: .85em; }
.dsp-chip-mul {
    font-size: .68rem; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
    background: #f1f5f9; color: #475569;
}
.dsp-chip.active .dsp-chip-mul { background: rgba(255,255,255,.2); color: #fff; }

.dsp-closure-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dsp-input {
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font: 600 .8rem/1 'Plus Jakarta Sans', sans-serif;
    color: #0f172a;
    background: #fff;
    min-width: 0;
    flex: 1;
}
.dsp-mid { color: var(--portal-muted, #475569); font-weight: 700; }
.dsp-closure-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.dsp-closure-item {
    display: flex; justify-content: space-between; align-items: center;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: .78rem; font-weight: 600; color: #b91c1c;
}
.dsp-closure-item button {
    background: none; border: none; color: #b91c1c; cursor: pointer; padding: 0 0 0 8px;
}

.dsp-holiday-list { display: flex; flex-direction: column; gap: 6px; }
.dsp-holiday-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
}
.dsp-holiday-name { font-size: .82rem; font-weight: 700; color: #0f172a; }
.dsp-holiday-date { font-size: .7rem; color: #64748b; }
.dsp-holiday-modes { display: flex; gap: 4px; margin-top: 4px; }
.dsp-holiday-mode {
    flex: 1;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 6px;
    padding: 3px 6px;
    font: 600 .68rem/1 'Plus Jakarta Sans', sans-serif;
    color: #475569;
    cursor: pointer;
    transition: all .12s ease;
}
.dsp-holiday-mode.active {
    background: var(--portal-primary); color: #fff; border-color: var(--portal-primary);
}

.dsp-slider {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 10px;
}
.dsp-slider span {
    font-size: .76rem; font-weight: 600; color: #475569;
    display: flex; justify-content: space-between;
}
.dsp-slider strong { color: #0f172a; }
.dsp-slider input[type="range"] {
    width: 100%;
    accent-color: var(--portal-primary);
}

/* ── Hero: gauge + factor stack + violin (#13, #14, #15) ───────── */
.demand-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #d6dde6;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
.demand-hero-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 14px;
}
.demand-hero-sub { font-size: .92rem; font-weight: 600; color: #475569; margin-top: 2px; }
.demand-hero-band-wrap { display: flex; }
.demand-index-band {
    font: 800 .7rem/1 'Plus Jakarta Sans', sans-serif;
    text-transform: uppercase; letter-spacing: .14em;
    padding: 6px 12px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
    white-space: nowrap;
}
.demand-index-band.band-surge  { background: #dcfce7; color: #15803d; }
.demand-index-band.band-busy   { background: #f0fdf4; color: #16a34a; }
.demand-index-band.band-normal { background: #f1f5f9; color: #475569; }
.demand-index-band.band-slow   { background: #fef3c7; color: #b45309; }
.demand-index-band.band-dead   { background: #fee2e2; color: #b91c1c; }

.demand-hero-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 760px) { .demand-hero-grid { grid-template-columns: 1fr; gap: 14px; } }

.demand-gauge-wrap {
    display: flex; justify-content: center; align-items: center;
}
.demand-gauge { width: 100%; max-width: 220px; height: auto; display: block; }
.demand-gauge text { font-variant-numeric: tabular-nums; }

.demand-hero-line {
    font-size: 1rem; font-weight: 600; color: #1f2937;
    margin: 0 0 14px; line-height: 1.45;
}

.demand-factor-stack-wrap { margin-bottom: 14px; }
.demand-factor-stack-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #64748b;
    margin-bottom: 6px;
}
.demand-factor-stack {
    display: flex;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}
.demand-factor-stack-seg {
    height: 100%;
    transition: flex-grow .35s ease, background-color .15s ease;
    cursor: help;
    position: relative;
}
.demand-factor-stack-seg.pos { background: linear-gradient(180deg, #22c55e, #16a34a); }
.demand-factor-stack-seg.neg { background: linear-gradient(180deg, #f87171, #dc2626); }
.demand-factor-stack-seg + .demand-factor-stack-seg { border-left: 1px solid rgba(255,255,255,.3); }
.demand-factor-legend {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.demand-factor-legend .leg-pill {
    font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
}
.demand-factor-legend .leg-pill.pos { background: #dcfce7; color: #15803d; }
.demand-factor-legend .leg-pill.neg { background: #fee2e2; color: #b91c1c; }

.demand-violin-wrap { margin-top: 10px; }
.demand-violin { width: 100%; height: 70px; display: block; }
.demand-violin-labels {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .72rem; color: #64748b; margin-top: 4px;
}
.demand-violin-labels strong { color: #1e3a5f; font-variant-numeric: tabular-nums; font-weight: 700; }

.demand-history-line {
    margin-top: 12px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-left: 3px solid var(--portal-primary);
    border-radius: 4px;
    font-size: .85rem;
    color: #1f2937;
    font-weight: 500;
}

/* ── 7-day heat row (#17) ─────────────────────────────────────── */
.demand-week-strip-heat {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.demand-week-strip-heat .week-col {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 0;
    overflow: hidden;
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease;
}
.demand-week-strip-heat .week-col:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.demand-week-strip-heat .week-heat-bar {
    height: 8px;
    background: #e2e8f0;
    transition: background-color .15s ease;
}
.demand-week-strip-heat .week-col.is-today {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 2px rgba(30, 58, 95, .15);
}
.demand-week-strip-heat .week-body { padding: 8px 6px 10px; }
.demand-week-strip-heat .week-dow  { font-size: .72rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .06em; }
.demand-week-strip-heat .week-icon { font-size: 1rem; color: #64748b; margin: 4px 0; }
.demand-week-strip-heat .week-temp { font-size: .72rem; color: var(--portal-muted, #475569); }
.demand-week-strip-heat .week-index { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.demand-week-strip-heat .week-band  { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

/* ── DOW × hour rhythm grid (#18) ────────────────────────────── */
.demand-rhythm {
    display: grid;
    grid-template-columns: 36px repeat(24, 1fr);
    gap: 1px;
    margin-top: 12px;
    background: #e2e8f0;
    padding: 1px;
    border-radius: var(--radius-sm);
}
.dem-rhythm-corner, .dem-rhythm-hdr-h, .dem-rhythm-hdr-d {
    background: #f8fafc;
    font-size: .62rem; font-weight: 700; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    padding: 3px 0;
    text-transform: uppercase; letter-spacing: .04em;
}
.dem-rhythm-hdr-h { letter-spacing: 0; }
.dem-rhythm-cell {
    background: #f8fafc;
    aspect-ratio: 1.6 / 1;
    min-height: 18px;
    transition: background-color .25s ease;
    cursor: help;
}

/* ── Event rail (#20, #22, #23) ───────────────────────────────── */
.demand-event-legend {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 8px 0 10px;
    font-size: .72rem; font-weight: 600; color: #475569;
}
.dem-leg { display: inline-flex; align-items: center; gap: 5px; }
.dem-leg span {
    width: 10px; height: 10px; border-radius: 999px; background: #94a3b8;
}
.dem-leg-tourism span    { background: #0ea5e9; }
.dem-leg-federal span    { background: #1e3a5f; }
.dem-leg-dining span     { background: #f59e0b; }
.dem-leg-seasonal span   { background: #8b5cf6; }
.dem-leg-convention span { background: #14b8a6; }
.dem-leg-private span    { background: #16a34a; }

.demand-event-rail-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--portal-border);
    padding-top: 12px;
    -webkit-overflow-scrolling: touch;
}
.demand-event-rail {
    position: relative;
    height: 230px;
    min-width: 920px;
    background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px);
    background-size: calc(100% / 13) 100%;
}
.dem-rail-day-axis {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 22px;
    border-top: 1px solid #e2e8f0;
    display: flex;
}
.dem-rail-day-tick {
    flex: 1;
    font-size: .65rem; font-weight: 600;
    color: var(--portal-muted, #475569);
    padding: 4px 0 0 4px;
    border-left: 1px solid #f1f5f9;
}
.dem-rail-day-tick.is-today { color: var(--portal-primary); font-weight: 800; }
.dem-rail-day-tick.is-week-start { color: #475569; }

.dem-rail-event {
    position: absolute;
    top: 8px;
    height: 26px;
    border-radius: 6px;
    padding: 0 8px;
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15,23,42,.15);
    transition: transform .1s ease, box-shadow .1s ease;
}
.dem-rail-event:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(15,23,42,.25); }
.dem-rail-event.cat-tourism    { background: #0ea5e9; }
.dem-rail-event.cat-federal    { background: #1e3a5f; }
.dem-rail-event.cat-dining     { background: #f59e0b; }
.dem-rail-event.cat-seasonal   { background: #8b5cf6; }
.dem-rail-event.cat-convention { background: #14b8a6; }
.dem-rail-event.cat-private    { background: #16a34a; }
.dem-rail-event-impact {
    background: rgba(255,255,255,.22);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .68rem; font-weight: 800;
    flex-shrink: 0;
}

.dem-rail-detail {
    position: absolute;
    background: #0f172a;
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    width: 240px;
    z-index: 5;
    font-size: .8rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
}
.dem-rail-detail-name { font-weight: 700; margin-bottom: 4px; }
.dem-rail-detail-meta { font-size: .72rem; color: var(--portal-muted, #475569); margin-bottom: 8px; }
.dem-rail-slider-label {
    font-size: .68rem; font-weight: 700; color: var(--portal-muted, #475569);
    text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 4px;
    display: flex; justify-content: space-between;
}
.dem-rail-detail input[type="range"] {
    width: 100%;
    accent-color: #38bdf8;
}
.dem-rail-detail-close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; color: var(--portal-muted, #475569);
    font-size: 1rem; cursor: pointer; line-height: 1;
}

.dem-rail-drag-overlay {
    position: absolute;
    top: 8px; bottom: 22px;
    background: rgba(22, 163, 74, .15);
    border: 2px dashed #16a34a;
    border-radius: 6px;
    pointer-events: none;
}

/* ── Item-level projection (#24) ──────────────────────────────── */
.demand-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.demand-item-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 12px;
}
.demand-item-name { font-size: .85rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.demand-item-typical { font-size: .72rem; color: #64748b; margin-top: 4px; }
.demand-item-projected {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 8px;
}
.demand-item-qty {
    font-size: 1.3rem; font-weight: 800; color: #1e3a5f;
    font-variant-numeric: tabular-nums;
}
.demand-item-delta {
    font-size: .76rem; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
}
.demand-item-delta.up   { background: #dcfce7; color: #15803d; }
.demand-item-delta.down { background: #fee2e2; color: #b91c1c; }
.demand-item-delta.flat { background: #f1f5f9; color: #475569; }

/* ── History sparklines (#19) ─────────────────────────────────── */
.profile-stat-spark {
    display: block;
    width: 100%;
    height: 18px;
    margin-top: 6px;
    opacity: .85;
}

/* iOS focus-zoom fix. Body font-size is 15px and inputs inherit it, which
   triggers Safari iOS auto-zoom on focus. Force 16px on form controls below
   the tablet breakpoint to prevent it. */
@media (max-width: 768px) {
    input:not([type=range]):not([type=checkbox]):not([type=radio]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Order picker skeleton — placeholder cards shown while the catalog JSON
   loads. order.js replaces #picker-list innerHTML wholesale when the
   catalog arrives, so these are fire-and-forget. Kept structurally close
   to .product-card so the grid doesn't jump when real cards swap in. */
.picker-skeleton-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 140px;
}
.picker-skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: pickerShimmer 1.4s linear infinite;
}
.picker-skel-line.s-title { width: 70%; height: 14px; }
.picker-skel-line.s-cat   { width: 40%; height: 10px; }
.picker-skel-line.s-row   { width: 100%; height: 28px; margin-top: auto; border-radius: 8px; }

@keyframes pickerShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .picker-skel-line { animation: none; }
}

/* ─── Hours page additions ──────────────────────────────────────────── */

/* Weekly head: title + source pill + edit button */
.weekly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.weekly-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.src-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font: 700 .72rem/1.4 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.src-pill-google { background: #f1f5f9; color: #475569; }
.src-pill-google i { color: #4285f4; }
.src-pill-manual { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.src-pill-manual i { color: #0891b2; }

/* Cuisine peer block inside the weekly hero */
.weekly-peer {
    border-left: 1px solid #e2e8f0;
    padding-left: 18px;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.weekly-peer-label {
    font: 700 .68rem/1 'Plus Jakarta Sans', sans-serif;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.weekly-peer-num   { font-weight: 700; color: #1f2937; font-size: 1rem; }
.weekly-peer-diff  { font-weight: 600; font-size: .82rem; }
.weekly-peer-diff.peer-pos { color: #166534; }
.weekly-peer-diff.peer-neg { color: #b45309; }
.weekly-peer-n     { color: #64748b; font-weight: 500; }

@media (max-width: 600px) {
    .weekly-peer { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid #e2e8f0; padding-top: 8px; width: 100%; }
}

/* Opportunity insight card — sits in the same strip as alone/contested */
.insight-card.insight-opportunity { border-left-color: #f97316; }
.insight-opportunity .insight-label i { color: #ea580c; }

/* Suggested hour-add card */
.suggest-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(180deg, #fffbeb, #ffffff);
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 18px;
}
.suggest-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #fde68a;
    color: #92400e;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.suggest-title { font-weight: 700; color: #111827; font-size: 1rem; }
.suggest-msg   { color: #1f2937; font-size: .9rem; font-weight: 500; margin-top: 2px; }
.suggest-link  { color: #1e3a5f; font-weight: 700; text-decoration: none; margin-left: 6px; white-space: nowrap; }
.suggest-link:hover { text-decoration: underline; }

/* Coverage warning banner */
.coverage-warn {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
    color: #78350f;
    font-size: .88rem;
    font-weight: 500;
}
.coverage-warn i { font-size: 1.05rem; color: #b45309; margin-top: 2px; }
.coverage-warn strong { color: #78350f; }

/* Cuisine multi-select popover (replaces the old <select>) */
.hours-cuisine-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font: 600 .85rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    min-width: 200px;
    transition: border-color .12s;
}
.hours-cuisine-btn:hover { border-color: #1e3a5f; }
.hours-cuisine-btn .bi-chevron-down { font-size: .75rem; color: #64748b; margin-left: auto; }
.hours-filter { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.hours-cuisine-pop {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 25;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    padding: 8px;
    min-width: 240px;
    max-width: 320px;
}
.hours-cuisine-pop-actions {
    display: flex;
    gap: 8px;
    padding: 0 4px 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
}
.cuisine-link {
    background: none; border: 0;
    color: #1e3a5f;
    font: 700 .76rem/1.4 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    padding: 2px 4px;
}
.cuisine-link:hover { text-decoration: underline; }
.hours-cuisine-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.cuisine-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    color: #1f2937;
    font-size: .85rem;
    font-weight: 500;
}
.cuisine-check:hover { background: #f1f5f9; }
.cuisine-check-input { accent-color: #1e3a5f; }
.cuisine-check-name { flex: 1 1 auto; }
.cuisine-check-n {
    color: #64748b;
    font-size: .76rem;
    font-weight: 600;
    background: #f1f5f9;
    padding: 1px 7px;
    border-radius: 999px;
}

/* Single-competitor focus bar (shown when a row is clicked) */
.hours-focus-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 10px;
    font-size: .85rem;
    font-weight: 600;
    color: #1e3a8a;
}
.hours-focus-bar i { color: #4f46e5; }
.hours-focus-bar .btn { margin-left: auto; }

/* Hours-changes card */
.hours-changes-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #6366f1;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0 0;
}
.hours-changes-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #1f2937;
    font-size: .92rem;
    margin-bottom: 8px;
}
.hours-changes-head i { color: #6366f1; font-size: 1rem; }
.hours-changes-sub { color: #64748b; font-size: .78rem; font-weight: 500; }
.hours-changes-list { list-style: none; padding: 0; margin: 0; }
.hours-changes-row {
    display: grid;
    grid-template-columns: 1.5fr auto auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid #f1f5f9;
    font-size: .85rem;
    font-weight: 500;
    color: #1f2937;
}
.hours-changes-name  { font-weight: 600; }
.hours-changes-when  { color: #64748b; font-size: .78rem; font-weight: 600; }
.hours-changes-delta { font-weight: 600; text-align: right; }
.delta-up    { color: #166534; }
.delta-down  { color: #b91c1c; }
.delta-flat  { color: #64748b; font-weight: 500; }
.delta-meta  { color: #64748b; font-size: .76rem; font-weight: 500; margin-left: 4px; }

@media (max-width: 600px) {
    .hours-changes-row { grid-template-columns: 1fr; gap: 4px; }
    .hours-changes-delta { text-align: left; }
}

/* Competitor-table toolbar (search + CSV) */
.hours-comp-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 10px;
}
.hours-comp-search-wrap {
    position: relative;
    flex: 1 1 auto;
    max-width: 320px;
}
.hours-comp-search-wrap i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--portal-muted, #475569);
    pointer-events: none;
}
.hours-comp-search {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: 500 .9rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #1f2937;
    background: #fff;
}
.hours-comp-search:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30,58,95,.12); }

/* Open-now dot column on the competitors table */
.hours-comp-table .open-now-col { width: 28px; text-align: center; padding-right: 0; color: transparent; }
.hours-comp-table .open-now-col:first-child { user-select: none; }
.open-now-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #e2e8f0;
    box-shadow: 0 0 0 2px #fff inset;
    border: 1px solid #cbd5e1;
}
.open-now-dot.is-open {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 0 0 2px #ecfdf5 inset, 0 0 0 3px rgba(22,163,74,.18);
}

/* Make rows clickable feel — pointer cursor on the name */
.hours-comp-table tbody tr { cursor: pointer; }
.hours-comp-table tbody tr:hover { background: #f8fafc; }
.hours-comp-table tbody tr .map-link { cursor: pointer; }

/* Reuse existing .pager — just give the hours-page pager a top margin */
.hours-comp-pager { margin-top: 8px; }

/* Cell popover — additional small CTA inside the pinned popover */
.hcell-pop-actions { margin-top: 6px; }
.hcell-pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e3a5f;
    border-radius: 6px;
    font: 700 .76rem/1.2 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
}
.hcell-pop-btn:hover { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }

/* Hours editor modal */
.hours-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 16px;
}
/* The class above sets display:flex, which beats the UA `[hidden] { display:
   none }` on source order — without these explicit overrides the modal,
   focus-bar, and pager render visibly on every page load and the close
   button can't put them away. */
.hours-editor-overlay[hidden],
.hours-focus-bar[hidden],
.hours-comp-pager[hidden] { display: none !important; }
.hours-editor-card {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hours-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hours-editor-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #111827; }
.hours-editor-x {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}
.hours-editor-x:hover { color: #111827; }
.hours-editor-sub { color: #475569; font-size: .85rem; font-weight: 500; line-height: 1.5; margin: 0; }

.editor-bulk-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.editor-day-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 50vh;
    overflow-y: auto;
}
.editor-day {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid #f1f5f9;
}
.editor-day:last-child { border-bottom: 0; }
.editor-day-label { font-weight: 700; color: #1f2937; }
.editor-day[data-day-closed="1"] .editor-day-label { color: #94a3b8; }
.editor-day-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.editor-day[data-day-closed="1"] .editor-day-rows::before {
    content: 'Closed';
    color: #94a3b8;
    font-style: italic;
    font-size: .85rem;
    font-weight: 500;
}
.editor-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.editor-time {
    /* 110px clipped "09:00 PM" to "09:00 P" on Chrome/Edge — bumped wide
       enough to render the full 12-hour label and AM/PM marker without
       truncating the meridiem. */
    width: 150px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: 600 1rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #1f2937;
    background: #fff;
}
.editor-time:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30,58,95,.12); }
.editor-dash { color: #64748b; font-weight: 600; font-size: .82rem; }
.editor-period-x {
    background: none;
    border: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--portal-muted, #475569);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.editor-period-x:hover { background: #fee2e2; color: #b91c1c; }
.editor-day-actions { display: flex; flex-direction: column; gap: 4px; }
.editor-day-add,
.editor-day-closed {
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 8px;
    font: 600 .76rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #1f2937;
    cursor: pointer;
}
.editor-day-add:hover    { border-color: #16a34a; color: #166534; background: #f0fdf4; }
.editor-day-closed:hover { border-color: #b91c1c; color: #b91c1c; background: #fef2f2; }

.editor-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .85rem;
    font-weight: 500;
}
.editor-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 600px) {
    .hours-editor-card { padding: 16px; }
    .editor-day { grid-template-columns: 80px 1fr; }
    .editor-day-actions { grid-column: 1 / -1; flex-direction: row; }
    .editor-time { width: 95px; }
}

/* ============================================================
   Order page — fail-safe submission UI
   ============================================================ */

/* The `hidden` HTML attribute should hide an element, but a custom
   `display:` rule overrides it on specificity. Force the override for
   the order-page banners + bars. */
.order-offline-banner[hidden],
.order-recovery-banner[hidden],
.order-reorder-notice[hidden],
.order-cutoff-bar[hidden],
.order-mobile-bar[hidden] { display: none !important; }

/* Offline banner — sits above the form when an `offline` event fires. */
.order-offline-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .88rem;
}
.order-offline-banner i { font-size: 1.1rem; }

/* Recovery banner — in-flight pending order or stale draft prompt. */
.order-recovery-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    color: #1e3a5f;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
}
.order-recovery-banner .orb-body { flex: 1; min-width: 240px; }
.order-recovery-banner .orb-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Cutoff status bar — sits above the form telling the customer whether
   they're still in time for tomorrow's truck. Two variants: info (before
   cutoff, blue) and warn (past cutoff, amber). Visual weight matches
   the recovery banner so the page doesn't gain a third "alert level". */
.order-cutoff-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
}
.order-cutoff-bar i { font-size: 1.05rem; flex: 0 0 auto; }
.order-cutoff-bar-msg { line-height: 1.4; }
.order-cutoff-bar-msg strong { font-weight: 700; }
.order-cutoff-bar--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    color: #1e3a5f;
}
.order-cutoff-bar--warn {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    color: #78350f;
}

/* Past-cutoff date chip — visible but visually inert, so the customer
   can see why they can't pick it instead of wondering where the date
   went. The wireDateChips click handler treats `is-disabled` as a no-op. */
.date-chip.is-disabled {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    opacity: .65;
}
.date-chip.is-disabled:hover { border-color: #e2e8f0; }
.date-chip.is-disabled .date-chip-day,
.date-chip.is-disabled .date-chip-date { color: #94a3b8; }

/* Reorder notice — lists items skipped because they no longer exist
   in the catalog (after a ?reorder=… seed). Dismissable. */
.order-reorder-notice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    color: #78350f;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
}
.order-reorder-notice .orn-body { flex: 1; min-width: 0; }
.order-reorder-notice .orn-body strong { display: block; margin-bottom: 4px; color: #78350f; font-weight: 600; }
.order-reorder-notice .orn-body ul { margin: 4px 0 0 1.1em; padding: 0; }
.order-reorder-notice .orn-body li { margin: 2px 0; }
.order-reorder-notice .orn-dismiss {
    background: transparent; border: 0;
    padding: 0 6px;
    color: #78350f; cursor: pointer;
    font-size: 1.4rem; line-height: 1;
    border-radius: var(--radius-sm);
}
.order-reorder-notice .orn-dismiss:hover { background: rgba(120,53,15,.1); }

/* Cart header — title + clear button. The header has a dark navy
   background; the clear button needs to read against that. */
.order-summary-header {
    display: flex; justify-content: space-between; align-items: center;
}
.order-summary-header .oss-title { display: inline-flex; align-items: center; gap: 8px; }
.cart-clear-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    cursor: pointer;
    color: #fff;
    font-weight: 600; font-size: .72rem;
    padding: 4px 10px; border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .12s ease;
}
.cart-clear-btn:hover { background: rgba(220,38,38,.65); border-color: rgba(220,38,38,.65); }

/* Lazy-load sentinel for the All Products list. */
.picker-sentinel {
    grid-column: 1 / -1;
    text-align: center;
    padding: 18px 0;
    font-size: .82rem;
    font-weight: 600;
    color: #94a3b8;
}
.picker-sentinel.is-done { color: #cbd5e1; font-weight: 500; }

/* ============================================================
   Mobile cart bar — SaaS-standard footer
     [bag-icon + count badge] [text + total] [chevron] [Place Order]
     Whole left side is one tap target → opens the sheet.
     Right side is the submit CTA → submits directly.
   ============================================================ */
.order-mobile-bar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    align-items: stretch;
    gap: 10px;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--portal-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .10);
}

/* Drag-handle pill — visual cue this footer can be dragged up. */
.order-mobile-bar .omb-grip {
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
}

/* Tappable info button — the entire left strip. */
.order-mobile-bar .omb-info {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; gap: 12px;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    min-height: 52px;
    color: inherit;
    font-family: inherit;
    -webkit-tap-highlight-color: rgba(30, 58, 95, .08);
    transition: background-color .12s ease;
}
.order-mobile-bar .omb-info:hover  { background: #f1f5f9; }
.order-mobile-bar .omb-info:active { background: #e2e8f0; }
.order-mobile-bar .omb-info:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }

/* Cart icon with overlay count badge. */
.order-mobile-bar .omb-cart-icon {
    position: relative;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 1.05rem;
    transition: background-color .15s ease, color .15s ease;
}
.order-mobile-bar.has-items .omb-cart-icon {
    background: var(--portal-primary);
    color: #fff;
}
.order-mobile-bar .omb-cart-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 20px; height: 20px;
    background: var(--portal-accent);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font: 800 .68rem/1 'Plus Jakarta Sans', sans-serif;
    padding: 0 5px;
    font-variant-numeric: tabular-nums;
}
.order-mobile-bar .omb-cart-badge[hidden] { display: none; }

/* The bar shows the running total prominently — that's the only text
   needed; the bag icon + count badge handle the "what's in the cart"
   read on its own. */
.order-mobile-bar .omb-total {
    flex: 1; min-width: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.order-mobile-bar:not(.has-items) .omb-total {
    color: #94a3b8;
    font-weight: 700;
}

/* Submit CTA on the right. */
.order-mobile-bar .omb-btn {
    flex-shrink: 0;
    padding: 12px 18px;
    min-height: 52px;
    font-weight: 700;
    border-radius: 10px;
    font-size: .92rem;
    align-self: stretch;
}
.order-mobile-bar .omb-btn:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 1023px) {
    .order-mobile-bar { display: flex; }
    /* Pad the page so its content can't sit under the fixed bar. */
    .order-layout { padding-bottom: 100px; }
}

/* ============================================================
   Animations — order page polish
   ============================================================ */

/* Cart sheet — dramatic spring open, decisive close. The OPEN curve
   has real overshoot so the sheet visibly settles into place. */
.cart-sheet-panel {
    transition: transform .28s cubic-bezier(.4, 0, .6, .2);                  /* close */
}
.app-body-order.cart-sheet-open .cart-sheet-panel {
    transition: transform .55s cubic-bezier(.16, 1.55, .55, 1);              /* open: real spring */
}

/* The backdrop fades in / out at a different rate than the panel so
   the dim builds first and clears last — feels more cinematic. */
.cart-sheet-backdrop { transition: opacity .22s ease; }
.app-body-order.cart-sheet-open .cart-sheet-backdrop { transition: opacity .35s ease; }

/* Cart-bar badge bounces when item count goes up. */
@keyframes cartBadgeBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.55); }
    65%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.order-mobile-bar .omb-cart-badge.bump { animation: cartBadgeBump .5s cubic-bezier(.34, 1.5, .64, 1); }

/* Add-to-cart card flash — green glow + light tint pulse. */
@keyframes cardJustAdded {
    0%   { box-shadow: 0 1px 3px rgba(15,23,42,.04); background-color: #fff; transform: scale(1); }
    20%  { box-shadow: 0 8px 24px rgba(22, 163, 74, .45); background-color: #ecfdf5; transform: scale(1.012); }
    100% { box-shadow: 0 1px 3px rgba(15,23,42,.04); background-color: #fff; transform: scale(1); }
}
.product-card.just-added { animation: cardJustAdded .7s cubic-bezier(.34, 1.3, .64, 1); }

/* ============================================================
   Category-click "wave" animation
     Cards rise from below with a tiny spring overshoot, fanning out
     left → right with a slightly randomized stagger. Much more alive
     than a flat fade-in.
   ============================================================ */
@keyframes cardWaveIn {
    0%   { opacity: 0; transform: translateY(22px) scale(.94); }
    55%  { opacity: 1; transform: translateY(-4px)  scale(1.015); }
    100% { opacity: 1; transform: translateY(0)     scale(1); }
}
.picker-card-grid.is-fresh .product-card {
    animation: cardWaveIn .55s cubic-bezier(.34, 1.45, .64, 1) both;
    transform-origin: center top;
}
/* Steeper stagger — first card lands fast, subsequent cards feel like
   a wave breaking left-to-right. */
.picker-card-grid.is-fresh .product-card:nth-child(1)  { animation-delay: 0ms; }
.picker-card-grid.is-fresh .product-card:nth-child(2)  { animation-delay: 35ms; }
.picker-card-grid.is-fresh .product-card:nth-child(3)  { animation-delay: 65ms; }
.picker-card-grid.is-fresh .product-card:nth-child(4)  { animation-delay: 90ms; }
.picker-card-grid.is-fresh .product-card:nth-child(5)  { animation-delay: 110ms; }
.picker-card-grid.is-fresh .product-card:nth-child(6)  { animation-delay: 130ms; }
.picker-card-grid.is-fresh .product-card:nth-child(7)  { animation-delay: 145ms; }
.picker-card-grid.is-fresh .product-card:nth-child(8)  { animation-delay: 160ms; }
.picker-card-grid.is-fresh .product-card:nth-child(9)  { animation-delay: 175ms; }
.picker-card-grid.is-fresh .product-card:nth-child(10) { animation-delay: 190ms; }
.picker-card-grid.is-fresh .product-card:nth-child(n+11) { animation-delay: 205ms; }

/* Active category pill flashes when its cards land — gives the
   tap a bit of physical feedback. */
@keyframes pickerPillPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(30, 58, 95, .14); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(30, 58, 95, 0); }
}
.picker-pill.active.is-just-tapped {
    animation: pickerPillPulse .35s ease-out;
}

/* Honor reduced motion — animations off, instant transitions. */
@media (prefers-reduced-motion: reduce) {
    .cart-sheet-panel,
    .app-body-order.cart-sheet-open .cart-sheet-panel { transition: none !important; }
    .order-mobile-bar .omb-cart-badge.bump,
    .product-card.just-added,
    .picker-card-grid.is-fresh .product-card { animation: none !important; }
}

/* ============================================================
   Big success animation overlay — full screen, plays just before
   navigation to /order/placed. Built as a single self-contained
   element appended to <body> by JS.
   ============================================================ */
.order-success-overlay {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 60%, #ffffff 100%);
    animation: successFade .25s ease-out;
}
.order-success-overlay .oso-check {
    width: 120px; height: 120px;
    border-radius: 999px;
    background: #16a34a;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 40px rgba(22, 163, 74, .35);
    animation: successPop .55s cubic-bezier(.34, 1.5, .64, 1);
}
.order-success-overlay .oso-check svg {
    width: 64px; height: 64px;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: successDraw .45s cubic-bezier(.6, .2, .4, 1) .25s forwards;
}
.order-success-overlay .oso-title {
    margin-top: 24px;
    font: 800 1.6rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #064e3b;
    letter-spacing: -.01em;
    animation: successFade .3s ease-out .2s both;
}
.order-success-overlay .oso-meta {
    margin-top: 6px;
    font: 600 .98rem 'Plus Jakarta Sans', sans-serif;
    color: #047857;
    font-variant-numeric: tabular-nums;
    animation: successFade .3s ease-out .35s both;
}
@keyframes successFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes successPop  { 0% { transform: scale(0); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes successDraw { to { stroke-dashoffset: 0; } }

/* ============================================================
   Submitting overlay — full screen, shown the moment "Place Order"
   is clicked and held until the server responds. Same z-index as the
   success overlay so the success animation simply covers it on the
   happy path. Anti-slop: no glass, no neon — USA-blue spinner on a
   neutral wash so the user understands "this is working, don't leave."
   ============================================================ */
.order-submitting-overlay {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    background: linear-gradient(180deg, #eff4fb 0%, #f5f7fb 60%, #ffffff 100%);
    animation: successFade .2s ease-out;
}
.order-submitting-overlay .oss-spinner {
    width: 96px; height: 96px;
    border-radius: 999px;
    border: 6px solid rgba(30, 58, 95, .15);
    border-top-color: #1e3a5f;
    animation: ossSpin .9s linear infinite;
}
.order-submitting-overlay .oss-title {
    margin-top: 28px;
    font: 800 1.4rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #1e3a5f;
    letter-spacing: -.01em;
}
.order-submitting-overlay .oss-meta {
    margin-top: 8px;
    font: 600 .95rem 'Plus Jakarta Sans', sans-serif;
    color: #475569;
    text-align: center;
    max-width: 340px;
    padding: 0 16px;
}
.order-submitting-overlay .oss-dots {
    display: inline-block;
    width: 1.2em;
    text-align: left;
}
@keyframes ossSpin {
    to { transform: rotate(360deg); }
}
@keyframes ossDots {
    0%, 20%   { content: '.'; }
    40%       { content: '..'; }
    60%, 100% { content: '...'; }
}
.order-submitting-overlay .oss-dots::after {
    content: '.';
    animation: ossDots 1.4s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .order-submitting-overlay .oss-spinner { animation-duration: 2s; }
    .order-submitting-overlay .oss-dots::after { animation: none; content: '...'; }
}

/* Concentric rings ripple outward from the check. */
.order-success-overlay .oso-ring {
    position: absolute;
    border-radius: 999px;
    border: 2px solid rgba(22, 163, 74, .35);
    width: 120px; height: 120px;
    animation: successRing 1.4s cubic-bezier(.32,.72,0,1) infinite;
    pointer-events: none;
}
.order-success-overlay .oso-ring.r2 { animation-delay: .35s; }
.order-success-overlay .oso-ring.r3 { animation-delay: .7s; }
@keyframes successRing {
    from { transform: scale(1); opacity: .8; }
    to   { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .order-success-overlay .oso-check,
    .order-success-overlay .oso-check svg,
    .order-success-overlay .oso-title,
    .order-success-overlay .oso-meta,
    .order-success-overlay .oso-ring { animation: none !important; }
    .order-success-overlay .oso-check svg { stroke-dashoffset: 0; }
}
@media (max-width: 380px) {
    /* Very narrow phones: tighten so nothing wraps. */
    .order-mobile-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
    .order-mobile-bar .omb-info { gap: 8px; padding: 4px 6px; }
    .order-mobile-bar .omb-btn { padding: 10px 14px; }
}

/* Toast stack — bottom-right. */
.order-toast-stack {
    position: fixed; right: 18px; bottom: 18px;
    z-index: 60;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 360px;
    pointer-events: none;
}
@media (max-width: 768px) {
    .order-toast-stack { right: 12px; left: 12px; bottom: 84px; max-width: none; }
}
.order-toast {
    pointer-events: auto;
    background: #0f172a;
    color: #f1f5f9;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
    font-size: .88rem; font-weight: 500;
    animation: orderToastIn .2s ease-out;
}
.order-toast.is-error   { background: #b91c1c; color: #fff; }
.order-toast.is-success { background: #15803d; color: #fff; }
.order-toast-msg { flex: 1; line-height: 1.45; }
.order-toast-action {
    background: rgba(255,255,255,.18); color: #fff;
    border: none; border-radius: 4px;
    padding: 4px 10px; font: 700 .78rem 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: .04em;
}
.order-toast-action:hover { background: rgba(255,255,255,.28); }
.order-toast-close {
    background: none; border: none; color: inherit;
    font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .7;
    padding: 0; margin-left: 2px;
}
.order-toast-close:hover { opacity: 1; }
@keyframes orderToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Modals — review and drift. */
.order-modal {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.order-modal[hidden] { display: none; }
.order-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
}
.order-modal-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    width: 100%; max-width: 540px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
}
.order-modal-title {
    font-size: 1.25rem; font-weight: 800; color: #0f172a;
    margin: 0 0 12px;
}
.order-modal-body { font-size: .92rem; color: #1f2937; line-height: 1.5; }
.order-modal-body .orm-lead { margin: 0 0 10px; }
.order-modal-body .orm-deliv { margin: 0 0 12px; padding: 8px 10px; background: #f1f5f9; border-radius: 6px; }
.order-modal-body .orm-items {
    width: 100%; border-collapse: collapse;
    margin-top: 8px; font-size: .85rem;
}
.order-modal-body .orm-items th, .order-modal-body .orm-items td {
    padding: 6px 8px; border-bottom: 1px solid #e2e8f0; text-align: left;
}
.order-modal-body .orm-items th { font-weight: 700; color: #475569; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.order-modal-body .orm-items .op-num { text-align: right; font-variant-numeric: tabular-nums; }
.order-modal-body .orm-more { color: #64748b; font-size: .8rem; margin-top: 8px; }
.order-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

/* ============================================================
   /order/placed — confirmation page
   ============================================================ */
.order-placed-wrap { display: flex; justify-content: center; padding: 8px 0 32px; }
.order-placed-card {
    width: 100%; max-width: 760px;
    background: #fff;
    border: 1px solid #d6dde6;
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.op-hero {
    display: flex; align-items: center; gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e2e8f0;
}
.op-check { flex-shrink: 0; }
.op-eyebrow {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
    color: #15803d;
    margin-bottom: 4px;
}
.op-title {
    font-size: 1.6rem; font-weight: 800; color: #0f172a;
    margin: 0 0 6px; letter-spacing: -.01em;
}
.op-delivery { font-size: 1rem; color: #1f2937; font-weight: 500; }
.op-delivery strong { color: #0f172a; font-weight: 700; }
.op-placed-at { font-size: .82rem; color: #64748b; margin-top: 2px; }

.op-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin: 22px 0;
}
.op-summary-stat { padding: 12px 14px; background: #f8fafc; border-radius: var(--radius-sm); }
.op-summary-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #64748b; }
.op-summary-value { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-top: 4px; font-variant-numeric: tabular-nums; }
.op-summary-value-mono { font-family: 'Plus Jakarta Sans', monospace; font-weight: 700; }

.op-section-title {
    font-size: .9rem; font-weight: 700; color: #0f172a;
    margin: 22px 0 10px;
}
.op-items {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: .92rem;
}
.op-items th, .op-items td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}
.op-items th {
    font-size: .7rem; font-weight: 700;
    color: #475569;
    text-transform: uppercase; letter-spacing: .08em;
    background: #f8fafc;
}
.op-items td { color: #1f2937; }
.op-items .op-num { text-align: right; font-variant-numeric: tabular-nums; }
.op-items tfoot td {
    font-weight: 700;
    background: #f8fafc;
    color: #0f172a;
    border-bottom: none;
}

.op-notes-block {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: #1f2937;
    font-size: .92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.op-contact {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0 18px;
    padding: 14px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
}
.op-contact-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: #2563eb; color: #fff;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
}
.op-contact-title { font-weight: 700; color: #0f172a; font-size: .95rem; }
.op-contact-line  { font-size: .88rem; color: #1f2937; margin-top: 2px; }
.op-contact-phone { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.op-contact-phone:hover { text-decoration: underline; }

.op-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 8px;
}
@media (max-width: 600px) {
    .order-placed-card { padding: 20px 18px; }
    .op-title { font-size: 1.3rem; }
    .op-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ============================================================
   Order page: smart-card decks (last order + suggested for today)
   ============================================================ */

/* Smart cards default layout: a row of compact teaser tiles, sitting
   side-by-side at every screen size (flex: 1 each). When only one tile
   is present, it expands to fill the row. */
.smart-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.smart-cards:empty { display: none; }
.smart-tile { flex: 1 1 0; min-width: 0; }   /* equal-share columns */

.smart-tile {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 12px 44px 12px 14px;       /* right padding clears the X */
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: inherit;
}
.smart-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    border-color: var(--portal-primary);
}
.smart-tile:focus { outline: 2px solid var(--portal-primary); outline-offset: 2px; }
.smart-tile-title {
    /* No truncation — the full phrase wraps as needed. */
    font-size: .98rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    line-height: 1.3;
    word-break: break-word;
}
.smart-tile-date {
    font-size: .8rem;
    color: #64748b;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}
/* Each metadata line stacks vertically and left-aligns. */
.smart-tile-count {
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.smart-tile-total {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.smart-tile {
    display: flex;
    flex-direction: column;
}

/* Tile dismiss button — bolder + larger so it reads as a real
   close-affordance. No chevron arrow on the tile anymore. */
.smart-tile-dismiss {
    position: absolute;
    top: 6px; right: 6px;
    width: 32px; height: 32px;
    background: none; border: 0;
    color: #475569;
    font-size: 1.5rem; font-weight: 700;
    line-height: 1;
    cursor: pointer; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.smart-tile-dismiss:hover { background: #f1f5f9; color: #0f172a; }

/* My Templates card — sits alongside the smart tiles. Holds a
   horizontally scrollable list of named-template buttons; the card
   itself is a region (not a button) so it doesn't pick up the
   smart-tile hover/focus affordance. */
.templates-tile {
    cursor: default;
    padding: 10px 12px 12px;
}
.templates-tile:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--portal-border);
}
.templates-tile-head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
}
.templates-tile-title {
    font-size: .82rem; font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.templates-tile-title .bi { color: var(--portal-primary); }
.templates-rail {
    display: flex; gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;                 /* slight bleed for last-item edge */
    padding: 2px 4px 4px;
    scrollbar-width: thin;
}
.templates-rail::-webkit-scrollbar { height: 6px; }
.templates-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.template-pill {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.template-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-family: inherit;
    font-size: .85rem; font-weight: 600;
    padding: 8px 28px 8px 12px;     /* right pad clears the × */
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    transition: background .12s ease, border-color .12s ease;
    max-width: 220px;
}
.template-btn:hover { background: #fff; border-color: var(--portal-primary); }
.template-btn:focus { outline: 2px solid var(--portal-primary); outline-offset: 2px; }
.template-btn-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 140px;
}
.template-btn-count {
    font-size: .72rem; font-weight: 600;
    color: #64748b;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.template-pill.has-warn .template-btn { border-color: #fbbf24; background: #fffbeb; }
.template-warn-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    background: #f59e0b; color: #fff;
    border-radius: 50%;
    font-size: .7rem; font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}
.template-del-btn {
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    background: transparent; border: 0;
    color: #94a3b8;
    font-size: 1rem; line-height: 1;
    cursor: pointer; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.template-del-btn:hover { background: #fee2e2; color: #b91c1c; }

/* Save-as-template footer inside the cart-list area. Two-state:
   a low-key link, expanded into name input + save when tapped. */
.save-tpl-row {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}
.save-tpl-link {
    background: transparent; border: 0;
    color: var(--portal-primary);
    font-family: inherit;
    font-size: .85rem; font-weight: 600;
    padding: 4px 0;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.save-tpl-link:hover { text-decoration: underline; }
.save-tpl-link[disabled] { color: #94a3b8; cursor: not-allowed; }
.save-tpl-link[disabled]:hover { text-decoration: none; }
.save-tpl-form {
    display: flex; gap: 6px; align-items: center;
    margin-top: 2px;
}
.save-tpl-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: .85rem;
    color: #0f172a;
}
.save-tpl-input:focus { outline: 2px solid var(--portal-primary); outline-offset: 1px; border-color: var(--portal-primary); }
.save-tpl-go {
    background: var(--portal-primary);
    color: #fff; border: 0;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: .85rem; font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
}
.save-tpl-go:disabled { background: #94a3b8; cursor: not-allowed; }
.save-tpl-cancel {
    background: transparent; border: 0;
    color: #64748b;
    width: 28px; height: 28px;
    border-radius: 6px;
    font-size: 1.2rem; line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.save-tpl-cancel:hover { background: #f1f5f9; color: #0f172a; }

/* Smart-modal — the full breakdown opens here. Wider than the standard
   review modal so the mini-card rail has room to breathe. */
.smart-modal-card { max-width: 720px; }
.smart-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.smart-modal-eyebrow {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
    color: #475569;
    margin-bottom: 4px;
}
.order-modal-x {
    background: none; border: 0;
    width: 32px; height: 32px;
    color: #64748b; font-size: 1.4rem; line-height: 1;
    cursor: pointer; border-radius: 6px;
    flex-shrink: 0;
}
.order-modal-x:hover { background: #f1f5f9; color: #0f172a; }

.smart-deck {
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    /* Layout-shift control: smart cards fade in once the catalog
       response lands so first paint of the picker isn't blocked. */
    animation: smartDeckFade .25s ease-out;
}
@keyframes smartDeckFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.smart-deck-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.smart-deck-eyebrow {
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
    color: #475569;
}
.smart-deck-title {
    font-size: 1rem; font-weight: 700; color: #0f172a; margin: 4px 0 2px;
}
.smart-deck-reason {
    font-size: .82rem; color: #475569; line-height: 1.45;
    margin-bottom: 10px;
}
.smart-deck-stale-note { font-size: .75rem; color: #b45309; margin-top: 4px; font-weight: 600; }
.smart-deck-dismiss {
    background: none; border: 0;
    color: var(--portal-muted, #475569); font-size: 1.1rem; line-height: 1;
    cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.smart-deck-dismiss:hover { background: #f1f5f9; color: #0f172a; }

/* Horizontal scroll rail for the mini-cards. */
.smart-deck-rail {
    display: flex; gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    will-change: transform;
    margin: 0 -16px;            /* edge-to-edge inside padded deck */
    padding: 4px 16px 12px;
    scrollbar-width: thin;
}
.smart-deck-rail::-webkit-scrollbar { height: 6px; }
.smart-deck-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.mini-card {
    flex: 0 0 140px;
    min-height: 168px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 10px 12px 12px;
    display: flex; flex-direction: column;
    scroll-snap-align: start;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
}
.mini-card:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .08); border-color: #cbd5e1; }
.mini-card:focus-within { outline: 2px solid var(--portal-primary); outline-offset: 1px; }
.mini-card.is-unavailable { opacity: .55; cursor: not-allowed; }
.mini-card.is-expanded {
    flex: 0 0 220px;
    background: #fff;
    border-color: var(--portal-primary);
    box-shadow: 0 4px 14px rgba(30, 58, 95, .14);
}

.mini-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.mini-card-name {
    font-size: .85rem; font-weight: 700; color: #0f172a;
    line-height: 1.25;
    flex: 1; min-width: 0;
    /* Two-line clamp keeps card height predictable. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.mini-card-conf {
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 999px;
    margin-top: 4px;
}
.mini-card-conf.high   { background: #16a34a; }
.mini-card-conf.medium { background: #f59e0b; }
.mini-card-conf.low    { background: #cbd5e1; }

.mini-card-cat { font-size: .7rem; color: #64748b; margin-top: 2px; font-weight: 600; }
.mini-card-qty {
    margin-top: auto;
    font-size: .98rem; font-weight: 800; color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.mini-card-qty small { font-weight: 600; color: #475569; font-size: .76rem; margin-left: 2px; }
.mini-card-price { font-size: .82rem; color: #475569; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mini-card-basis {
    font-size: .68rem;
    color: #64748b;
    margin-top: 6px;
    font-weight: 600;
    line-height: 1.3;
}
.mini-card-edit {
    margin-top: 8px;
    background: none; border: 1px solid #cbd5e1;
    color: #1f2937; font: 600 .72rem 'Plus Jakarta Sans', sans-serif;
    padding: 6px 10px;
    border-radius: 6px; cursor: pointer;
    min-height: 28px;
    text-transform: uppercase; letter-spacing: .04em;
}
.mini-card-edit:hover { border-color: var(--portal-primary); }

.mini-card-edit-panel {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 6px;
    border-top: 1px dashed #cbd5e1;
    padding-top: 8px;
}
.mini-card-edit-row { display: flex; align-items: center; gap: 6px; }
.mini-card-edit-row .qty-btn {
    width: 32px; height: 32px;
    border: 1px solid #cbd5e1; background: #fff;
    border-radius: 6px; cursor: pointer;
    font-weight: 700; line-height: 1;
}
.mini-card-edit-row input[type="number"] {
    width: 56px; min-height: 32px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    text-align: center; font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 4px;
}
.mini-card-edit-row select {
    flex: 1; min-height: 32px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 4px 6px; background: #fff;
    font-weight: 600; font-size: .82rem;
}
.mini-card-add-one {
    background: var(--portal-primary); color: #fff;
    border: 0; border-radius: 6px; padding: 8px;
    font-weight: 700; cursor: pointer;
    min-height: 36px;
}

.smart-deck-actions {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.smart-deck-actions .btn { flex: 0 0 auto; min-height: 40px; }
.smart-deck-actions .smart-deck-actions-note {
    margin-left: auto;
    font-size: .76rem; color: #64748b; font-weight: 500;
}

/* "Add all except…" lightweight checklist modal. Reuses .order-modal. */
.smart-checklist {
    list-style: none; padding: 0; margin: 0;
    max-height: 60vh; overflow-y: auto;
    border: 1px solid #e2e8f0; border-radius: var(--radius-sm);
}
.smart-checklist li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
    min-height: 44px;
}
.smart-checklist li:last-child { border-bottom: 0; }
.smart-checklist label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.smart-checklist .smart-checklist-name { flex: 1; font-weight: 600; color: #0f172a; font-size: .92rem; }
.smart-checklist .smart-checklist-meta { font-size: .78rem; color: #64748b; font-variant-numeric: tabular-nums; }

/* ============================================================
   Order page: delivery time + sr-only utility
   ============================================================ */

/* Compact preferred-time toggle. Whole row IS the toggle button —
   clicking it slides the inline <select> open. Click again or anywhere
   outside the field to collapse. No "Hide" sub-button. */
.field-deliv-time { margin: 0; }

.deliv-time-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #0f172a;
    font: 600 .85rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    padding: 8px 10px;
    min-height: 36px;
    text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.deliv-time-toggle:hover { border-color: var(--portal-primary); }
.deliv-time-toggle:focus-visible {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.deliv-time-toggle .bi-clock { color: var(--portal-primary); font-size: .95rem; flex-shrink: 0; }
.deliv-time-toggle .deliv-time-toggle-label {
    color: #475569;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.deliv-time-toggle .deliv-time-current {
    margin-left: auto;
    color: #0f172a;
    font-weight: 700;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}
.deliv-time-toggle .deliv-time-chev {
    color: #94a3b8;
    font-size: .8rem;
    transition: transform .15s ease;
    flex-shrink: 0;
}
.field-deliv-time[data-deliv-open="1"] .deliv-time-toggle {
    border-color: var(--portal-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.field-deliv-time[data-deliv-open="1"] .deliv-time-chev {
    transform: rotate(180deg);
}

.deliv-time-fieldset {
    border: 1px solid var(--portal-primary);
    border-top: 0;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 8px 10px 10px;
    background: #fff;
}
.deliv-time-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 30px 8px 10px;
    font: 600 .88rem 'Plus Jakarta Sans', sans-serif;
    color: #0f172a;
    min-height: 36px;
    width: 100%;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231e3a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px 7px;
}
.deliv-time-select:focus { outline: 2px solid var(--portal-primary); outline-offset: 1px; }

/* Visually hidden but read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Mobile-first: order page responsive rules
   ============================================================ */

/* ============================================================
   Mobile topbar (centered wordmark) — global to all portal pages.
   ============================================================ */
@media (max-width: 1023px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed; top: 0; left: 0; right: 0;
        height: calc(52px + env(safe-area-inset-top, 0px));
        z-index: 30;
        background: var(--portal-sidebar, #1e3a5f);
        padding: env(safe-area-inset-top, 0px) 8px 0; /* clear the notch / status bar */
        box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    }
    .mobile-topbar-brand {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font: 800 1.1rem/1 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -0.02em;
        text-decoration: none !important;
        color: #fff;
        height: 44px;
    }
    .mobile-topbar-brand span { color: #fff; }
    .mobile-topbar-logo {
        height: 30px;
        width: auto;
        max-width: 160px;
        display: block;
        object-fit: contain;
    }
    .mobile-topbar-spacer { width: 44px; height: 44px; flex-shrink: 0; }
    /* Hide the floating hamburger on mobile — the topbar version replaces it. */
    .sidebar-toggle.sidebar-toggle-desktop { display: none; }
    /* Push main content below the new top bar (existing rule pads
       64px; bump it to 64px which already accommodates the 52px bar). */
    .app-main { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}

/* ============================================================
   Order page mobile chrome
     - Below 1024px the sidebar collapses and the order page uses a
       SaaS-style cart bar at the bottom + a dedicated bottom-sheet
       for the full cart. The desktop right-rail aside is hidden
       entirely so it can never double up with the cart bar.
   ============================================================ */
.app-body-order .mobile-tabs { display: none !important; }   /* always hidden on order page */

@media (max-width: 1023px) {
    /* Hide the desktop aside on mobile/tablet entirely — there is no
       legitimate place for the right-rail style at these widths. */
    .app-body-order .order-summary { display: none !important; }
    .app-body-order .app-main      { padding-bottom: 100px; }
}

/* ============================================================
   #order-cart-sheet — dedicated mobile bottom sheet
   ============================================================ */
.cart-sheet { display: none; }                 /* desktop default — hidden */
.cart-sheet[hidden] { display: none !important; }

@media (max-width: 1023px) {
    .cart-sheet {
        display: block;
        position: fixed;
        inset: 0;                              /* full viewport overlay */
        z-index: 60;
        pointer-events: none;                  /* the panel + backdrop opt back in */
    }
    .cart-sheet-backdrop {
        position: absolute; inset: 0;
        background: rgba(15, 23, 42, .55);
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
    }
    .cart-sheet-panel {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        max-height: 92vh; max-height: 92dvh;
        background: #fff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 40px rgba(15, 23, 42, .30);
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        will-change: transform;
        display: flex; flex-direction: column;
        overflow: hidden;
        pointer-events: auto;
    }
    /* Open state — body class flipped by JS on tap of the cart bar info. */
    .app-body-order.cart-sheet-open .cart-sheet-backdrop { opacity: 1; pointer-events: auto; }
    .app-body-order.cart-sheet-open .cart-sheet-panel { transform: translateY(0); }
    .app-body-order.cart-sheet-open { overflow: hidden; }
}

/* Sheet header — drag pill + title + bold close X. */
.cart-sheet-head {
    position: relative;
    flex-shrink: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--portal-border);
    background: #fff;
}
.cart-sheet-grip {
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px;
    background: #cbd5e1;
    border-radius: 999px;
}
.cart-sheet-title {
    flex: 1;
    margin: 6px 0 0;
    font: 800 1.15rem/1.2 'Plus Jakarta Sans', sans-serif;
    color: #0f172a;
    letter-spacing: -.01em;
}
.cart-sheet-close {
    background: transparent;
    border: 0;
    width: 44px; height: 44px;
    margin-top: 4px;
    color: #475569;
    font: 700 1.6rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-sheet-close:hover { background: #f1f5f9; color: #0f172a; }

/* Scrollable middle of the sheet. Items, totals, and fields live
   here; the submit button outside this scroll is sticky. */
.cart-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cart list inside the sheet — same row styling as the aside via the
   .cart-row class system already in use. */
.cart-sheet-body {
    padding: 12px 18px 4px;
}
.cart-sheet-body .cart-empty { padding: 30px 8px; }

/* Totals strip — soft band so it visually separates from the list. */
.cart-sheet-totals {
    padding: 12px 18px;
    margin: 4px 0;
    border-top: 1px solid var(--portal-border);
    border-bottom: 1px solid var(--portal-border);
    background: #f8fafc;
}
.cart-sheet-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .9rem; font-weight: 600; color: #475569;
    padding: 2px 0;
}
.cart-sheet-row strong { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-sheet-grand { font-size: 1rem; padding-top: 6px; margin-top: 4px; border-top: 1px dashed #e2e8f0; }
.cart-sheet-grand strong { font-size: 1.25rem; font-weight: 800; }

/* Fields box (delivery date + notes proxies). */
.cart-sheet-fields {
    padding: 14px 18px 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.cart-sheet-fields .field {
    display: flex; flex-direction: column; gap: 6px; margin: 0;
    position: relative;
}
.cart-sheet-fields label {
    font-size: .72rem; font-weight: 700;
    color: #475569;
    text-transform: uppercase; letter-spacing: .08em;
}
.cart-sheet-fields input[type="date"],
.cart-sheet-fields textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 14px 14px;
    font: 700 1rem 'Plus Jakarta Sans', sans-serif;
    color: #0f172a;
    background: #fff;
    min-height: 52px;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cart-sheet-fields textarea { min-height: 72px; resize: vertical; font-weight: 500; }
.cart-sheet-fields input[type="date"]:focus,
.cart-sheet-fields textarea:focus {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
/* Delivery-date quick-pick chips — replaces the native <input type="date">
   in the cart sheet. Native pickers on phones jump to a giant modal calendar
   for picking a date 1–7 days away, which is overkill for a same-week order.
   Eight horizontal chips (today through +7) is one tap, no calendar dance. */
.cart-sheet-fields .field-date-chips .field-label {
    font-size: .72rem; font-weight: 700;
    color: #475569;
    text-transform: uppercase; letter-spacing: .08em;
    display: block; margin-bottom: 2px;
}
.date-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 2px 2px 8px;
    margin: 0 -2px -4px;
    scrollbar-width: thin;
}
.date-chips::-webkit-scrollbar { height: 4px; }
.date-chips::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.date-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 64px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: background-color .12s ease, border-color .12s ease,
                color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.date-chip:hover { border-color: var(--portal-primary); }
.date-chip:active { transform: scale(.96); }
.date-chip-day {
    font-size: .7rem; font-weight: 700;
    color: #475569;
    text-transform: uppercase; letter-spacing: .06em;
}
.date-chip-date {
    font-size: 1.05rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}
.date-chip.active {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 58, 95, .22);
}
.date-chip.active .date-chip-day,
.date-chip.active .date-chip-date { color: #fff; }

/* Sticky big Place Order CTA at the very bottom of the sheet. */
.cart-sheet-submit {
    flex-shrink: 0;
    width: 100%;
    min-height: 56px;
    background: var(--portal-cta);
    color: #fff;
    border: 0;
    font: 700 1rem 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.cart-sheet-submit:hover { background: var(--portal-cta-d); }
.cart-sheet-submit:disabled { background: #cbd5e1; color: #475569; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   Category pills — horizontal scroll, larger tap targets
   ============================================================ */
.picker-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    padding: 6px 2px 10px;
    margin: 0 -2px 8px;
    scrollbar-width: thin;
}
.picker-categories::-webkit-scrollbar { height: 5px; }
.picker-categories::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.picker-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 16px;
    min-height: 40px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    font: 600 .88rem/1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.picker-pill:hover { border-color: var(--portal-primary); }
.picker-pill.active {
    background: var(--portal-primary);
    color: #fff;
    border-color: var(--portal-primary);
}
@media (max-width: 767px) {
    .picker-pill { padding: 11px 18px; min-height: 44px; font-size: .92rem; }
}

/* ============================================================
   Compact product card — grid layout
     Left column:  name → category → ID#
     Right column: price → unit selector (top-aligned with name)
     Bottom row:   full-width Add button / qty stepper
   ============================================================ */
.product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;   /* photo ~1/3, text/details ~2/3 */
    /* Default (multi-column grid → narrower, bunched-up cards): price + unit
       get their own full-width row so they don't crowd the text. */
    grid-template-areas:
        "thumb info"
        "price price"
        "act   act";
    gap: 7px 10px;
    align-items: start;
    padding: 10px 12px 12px;
}
/* Roomy cards (phones / single-column, or any time space allows): tuck the
   price + unit beside the photo, directly under the text, instead of
   spending a whole row on them. */
@media (max-width: 599.98px) {
    .product-card {
        grid-template-areas:
            "thumb info"
            "thumb price"
            "act   act";
    }
    /* Beside the photo, the price + unit hug the right edge (matching the
       right-aligned text above), with just a small gap between them. */
    .product-card .card-price-row {
        justify-content: flex-end;
        gap: 6px;
    }
}
.product-card .card-thumb       { grid-area: thumb; }
.product-card .card-info        { grid-area: info; }
.product-card .card-price-row   { grid-area: price; }
.product-card .card-actions     { grid-area: act; }

/* Text block: name → category → ID, right-aligned and tightly stacked. */
.product-card .card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: right;
}
.product-card .card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    /* Up to three lines before clamping so produce names read in full. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.product-card .card-cat {
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}
.product-card .card-sku {
    font-size: .65rem;
    font-weight: 600;
    color: var(--portal-muted, #475569);
    letter-spacing: .03em;
    margin: 0;
}
@media (min-width: 1024px) {
    .product-card { padding: 12px 14px 14px; }
    .product-card .card-name { font-size: 1.02rem; }
}

/* Product photo thumbnail — a square occupying ~1/3 of the card width at
   the top-left. The placeholder icon shows through when a product has no
   photo (img is removed onerror). Tap the image to open the lightbox. */
.product-card .card-thumb {
    position: relative;
    align-self: start;          /* don't stretch when it spans two rows */
    aspect-ratio: 1 / 1;        /* square; width comes from the 1/3 column */
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.product-card .card-thumb-ph { color: #cbd5e1; font-size: 1.6rem; }
.product-card .card-thumb-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    background: #fff;
    cursor: zoom-in;
}
.product-card .card-thumb-img:focus-visible {
    outline: 2px solid var(--portal-primary);
    outline-offset: 2px;
}

/* Price + unit selector — a full-width row (same width as the Add button)
   below the photo/text block. Price on the left, unit selector on the
   right. */
.card-price-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.card-price-row .card-price {
    font-weight: 800;
    color: #0f172a;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.card-price-row .card-price-slash { display: none; }   /* slash retired */
.card-price-row .card-price-quote {
    color: #475569; font-style: italic; font-size: .88rem;
    font-weight: 600;
}
/* Inline unit selector — styled as a clear button-pill so it reads as a
   control, not a styled label. Background tint + border + larger
   chevron make the affordance obvious. */
.card-unit-inline {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #eef2f7;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font: 700 .9rem 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    padding: 6px 30px 6px 12px;
    /* 44px touch target — matches the Add button / qty steppers so the
       dropdown is comfortable to tap on a phone. */
    min-height: 44px;
    line-height: 1;
    border-radius: 6px;
    /* Bigger, higher-contrast chevron so it reads as a dropdown. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231e3a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px 7px;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.card-unit-inline:hover  { background: #e2e8f0; border-color: var(--portal-primary); }
.card-unit-inline:focus  { outline: 2px solid var(--portal-primary); outline-offset: 2px; }
.card-unit-inline:disabled {
    color: #94a3b8;
    cursor: not-allowed;
    background-image: none;
    padding-right: 10px;
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

/* card-actions now only carries the Add / qty stepper, not a separate
   unit select — the unit lives inline with the price above. */
.product-card .card-actions { padding-top: 4px; }

/* Product-photo lightbox (tap a card thumbnail to enlarge). */
.po-photo-lb {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(15, 23, 42, .82);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.po-photo-lb[hidden] { display: none; }
.po-photo-lb-fig { margin: 0; max-width: min(88vw, 560px); text-align: center; }
.po-photo-lb-fig img {
    width: 100%; height: auto; max-height: 78vh; object-fit: contain;
    background: #fff; border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.po-photo-lb-cap { margin-top: 10px; color: #e2e8f0; font-weight: 600; font-size: .92rem; }
.po-photo-lb-close {
    position: absolute; top: 12px; right: 16px;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.po-photo-lb-close:hover  { background: rgba(255, 255, 255, .24); }
.po-photo-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   Existing mobile order-page rules (sticky search + modal etc.)
   ============================================================ */

/* On mobile/tablet the fixed mobile-topbar (52px) sits above; the
   sticky search needs to clear it so the input doesn't get obscured.
   On desktop the search sticks to viewport top (handled in the base
   rule). */
@media (max-width: 1023px) {
    .picker-search-wrap {
        top: 52px;
        margin: -8px 0 8px;
    }
}
@media (max-width: 767px) {
    /* Smart-cards take less vertical room; mini-cards stay compact. */
    .smart-deck { padding: 12px 14px 14px; }
    .smart-deck-rail { margin: 0 -14px; padding: 4px 14px 10px; }
    .smart-deck-actions .btn { flex: 1 1 100%; justify-content: center; }
    .smart-deck-actions-note { width: 100%; margin-left: 0; text-align: center; }

    /* Modals go full-screen on phones — no awkward floating cards. */
    .order-modal { padding: 0; align-items: stretch; }
    .order-modal-card {
        width: 100%; max-width: none;
        max-height: 100vh; max-height: 100dvh;
        height: 100%;
        border-radius: 0;
        padding: 18px 18px 22px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mini-card { flex-basis: 160px; }
}

@media (min-width: 1024px) {
    .mini-card { flex-basis: 180px; }
}

/* Print stylesheet — hide nav / chrome / actions, expand the card. */
@media print {
    .sidebar, .mobile-tabs, .mobile-more-sheet, .sidebar-toggle,
    .order-mobile-bar, .order-toast-stack, .order-modal,
    .op-actions, .op-contact-icon { display: none !important; }
    .app-main { padding: 0 !important; }
    body, .app-body { background: #fff !important; }
    .order-placed-wrap { padding: 0; }
    .order-placed-card {
        border: none; box-shadow: none;
        max-width: none; width: 100%;
        padding: 0;
    }
    .op-hero { border-bottom-color: #999; }
    .op-items th { background: #fff; color: #000; }
    .op-items tfoot td { background: #fff; }
    a { color: inherit; text-decoration: none; }
}

/* ============================================================
   /history — outstanding-balance banner, filters, invoice modal
   ============================================================ */

.balance-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    margin: 4px 0 14px;
}
.balance-banner-main { min-width: 0; }
.balance-banner-label {
    font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 4px;
    opacity: .85;
}
.balance-banner-value {
    font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.balance-banner-meta {
    font-size: .9rem; font-weight: 600; margin-top: 4px;
}
.balance-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.balance-banner.is-clear   { background: var(--portal-success-bg); border-color: #86efac; color: #064e3b; }
.balance-banner.is-recent  { background: var(--portal-warn-bg);    border-color: #fcd34d; color: #78350f; }
.balance-banner.is-overdue { background: var(--portal-danger-bg);  border-color: #fca5a5; color: #7f1d1d; }

.history-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 12px 0 4px;
    font-size: .82rem;
}
.history-filter input[type="search"],
.history-filter input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--portal-border-2);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--portal-text);
    background: #fff;
}
.history-filter input[type="search"] { min-width: 200px; flex: 1 1 220px; }
.history-filter label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: var(--portal-muted);
}
.history-filter-clear {
    font-size: .8rem; color: var(--portal-muted); font-weight: 600;
}

/* Click-to-preview rows in the orders table. */
.history-row.js-history-row { cursor: pointer; }
.history-row.js-history-row:hover { background: #f1f5f9; }
.history-row.js-history-row:focus { outline: 2px solid var(--portal-primary); outline-offset: -2px; }

/* Invoice preview modal — visual language matches .order-modal. */
.history-modal {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.history-modal[hidden] { display: none; }
.history-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .55);
}
.history-modal-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    width: 100%; max-width: 640px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
}
.history-modal-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    margin-bottom: 12px;
}
.history-modal-title {
    font-size: 1.2rem; font-weight: 800; color: #0f172a;
    margin: 0;
}
.history-modal-close {
    background: transparent; border: 0;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    color: var(--portal-muted-2);
    padding: 0 4px;
}
.history-modal-close:hover { color: #0f172a; }
.history-modal-meta {
    font-size: .88rem; color: var(--portal-muted); font-weight: 500; line-height: 1.45;
}
.history-modal-meta strong { color: #0f172a; font-weight: 700; }
.history-modal-items {
    width: 100%; border-collapse: collapse;
    margin-top: 12px;
    font-size: .88rem;
}
.history-modal-items th, .history-modal-items td {
    padding: 6px 8px; border-bottom: 1px solid #e2e8f0; text-align: left;
}
.history-modal-items th {
    font-weight: 700; color: var(--portal-muted);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
}
.history-modal-items .num, .history-modal-items th.num,
.history-modal-items td.num { text-align: right; font-variant-numeric: tabular-nums; }
.history-modal-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.history-modal-total {
    font-weight: 800; font-size: 1.05rem; color: #0f172a;
    font-variant-numeric: tabular-nums;
}
body.history-modal-open { overflow: hidden; }

/* ── Insights hub (/insights) ──────────────────────────────────────
   Tab strip + overview cards + per-tab preview rail. The tabs are
   plain anchor links (each tab navigates to its own route — radar,
   trends, demand, …); insights.js only adds keyboard nav and hash
   sync, no AJAX swapping. */

.insights-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 0 0 18px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--portal-border);
    scrollbar-width: thin;
}
.insights-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--portal-muted);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color .12s, color .12s, border-color .12s;
}
.insights-tab:hover {
    background: #f1f5f9;
    color: var(--portal-text-2);
    text-decoration: none;
}
.insights-tab.active {
    background: var(--portal-surface);
    color: var(--portal-primary);
    border-color: var(--portal-border);
    box-shadow: var(--shadow-sm);
}
.insights-tab i { font-size: 1rem; color: inherit; }

.insights-overview { display: block; }

.insights-overview-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.4fr 1fr;
    margin-bottom: 14px;
}
@media (max-width: 768px) {
    .insights-overview-grid { grid-template-columns: 1fr; }
}

/* Health card */
.insights-health-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.insights-health-verdict {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--portal-text);
    margin-top: 2px;
    letter-spacing: -0.01em;
}
.insights-health-score {
    text-align: right;
    color: var(--score-color, #475569);
    line-height: 1;
}
.insights-health-score-num {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--score-color, #1f2937);
    font-variant-numeric: tabular-nums;
}
.insights-health-score-out {
    font-size: .78rem;
    font-weight: 600;
    color: var(--portal-muted);
    margin-top: 2px;
}
.insights-health-tagline {
    margin: 6px 0 14px;
    color: var(--portal-text-2);
    font-size: .92rem;
    font-weight: 500;
}
.insights-health-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}
@media (max-width: 480px) {
    .insights-health-subs { grid-template-columns: 1fr; }
}
.insights-health-sub-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.insights-health-sub-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--portal-muted);
    text-transform: capitalize;
}
.insights-health-sub-score {
    font-size: .82rem;
    font-weight: 700;
    color: var(--portal-text-2);
    font-variant-numeric: tabular-nums;
}
.insights-health-sub-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}
.insights-health-sub-bar > span {
    display: block;
    height: 100%;
    background: var(--portal-primary);
    border-radius: 999px;
}

/* Owner-rating card */
.insights-rating-num {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.insights-rating-num.insights-rating-empty { color: #94a3b8; }
.insights-rating-stars {
    color: #f59e0b;
    font-size: 1.05rem;
    letter-spacing: 1px;
    margin-top: 6px;
}
.insights-rating-meta {
    color: var(--portal-muted);
    font-size: .85rem;
    font-weight: 500;
    margin-top: 4px;
}
.insights-rating-rank {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--portal-border);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.insights-rating-rank strong {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
}
.insights-rating-rank span {
    color: var(--portal-muted);
    font-size: .9rem;
    font-weight: 600;
}
.insights-rating-bench {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.insights-rating-bench li {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.insights-bench-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.insights-bench-val {
    font-weight: 700;
    color: var(--portal-text);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* Recent activity card */
.insights-activity { margin-bottom: 18px; }
.insights-activity-list { list-style: none; margin: 0; padding: 0; }
.insights-activity-li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
}
.insights-activity-li:last-child { border-bottom: 0; padding-bottom: 0; }
.insights-activity-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.insights-activity-body { flex: 1; min-width: 0; }
.insights-activity-title {
    font-weight: 600;
    color: var(--portal-text);
    font-size: .95rem;
    line-height: 1.35;
}
.insights-activity-desc {
    color: var(--portal-muted);
    font-size: .85rem;
    font-weight: 500;
    margin-top: 2px;
}
.insights-activity-when {
    flex-shrink: 0;
    color: var(--portal-muted-2);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Per-tab preview cards */
.insights-explore-title { margin: 22px 0 12px; }
.insights-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.insights-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.insights-card:hover {
    border-color: var(--portal-border-2);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-1px);
}
.insights-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: #eff4fb;
    color: var(--portal-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.insights-card-body { flex: 1; min-width: 0; }
.insights-card-title {
    font-weight: 700;
    color: var(--portal-text);
    font-size: 1rem;
}
.insights-card-teaser {
    color: var(--portal-muted);
    font-size: .85rem;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.4;
}
.insights-card-chev {
    color: #94a3b8;
    font-size: 1rem;
    flex-shrink: 0;
}