html {
    scroll-behavior: smooth;
}

/* ===== ListingOK Brand Tokens ===== */
:root {
    --lok-red: #C1272D;
    --lok-red-hover: #A01F24;
    --lok-red-light: #E8333A;
    --lok-dark: #222222;
    --lok-gray: #6c757d;
    --lok-light: #F8F9FA;
    --lok-hero-bg: #1A1A1A;
    --lok-teal: #2A9D8F;
    --lok-teal-light: #E8F5F3;
    --lok-orange: #C2410C;
    --lok-orange-light: #FFF8F0;
    --lok-warning-bg: #FFF8E1;
    --lok-warning-border: #FFE082;
    --lok-warning-icon: #B45309;

    /* Card accent — collapsed to one neutral graphite (Pass 2). Per-section colours carried no
       meaning and fought the real signal system; cards now show colour ONLY from the percentile
       health palette (--lok-fill-* / --lok-status-* / --lok-bg-*). The names are kept so the
       components don't need editing; they all resolve to the same neutral. */
    --lok-card-neutral: var(--lok-gray);
    --lok-card-guest: var(--lok-card-neutral);
    --lok-card-host: var(--lok-card-neutral);
    --lok-card-pricing: var(--lok-card-neutral);
    --lok-card-visibility: var(--lok-card-neutral);
    --lok-card-occupancy: var(--lok-card-neutral);
    --lok-card-price-align: var(--lok-card-neutral);
    --lok-card-insight: var(--lok-card-neutral);
    --lok-card-images: var(--lok-card-neutral);
    --lok-card-sentiment: var(--lok-card-neutral);
    --lok-card-quality: var(--lok-card-neutral);

    /* === Semantic status — ON-WHITE INK (AA: 4.5:1 small / 3:1 large bold) === */
    --lok-status-excellent: #15803D;
    --lok-status-good:      #047857;
    --lok-status-average:   #B45309;
    --lok-status-warning:   #92400E;
    --lok-status-danger:    #BE123C;
    --lok-status-danger-light: #fef2f2;
    --lok-status-info:      #0F766E;

    /* === Vivid fills — scale-bar segments, calendar dots, sparklines === */
    --lok-fill-excellent: #15803D;
    --lok-fill-good:      #34D399;
    --lok-fill-average:   #FACC15;
    --lok-fill-warning:   #F59E0B;
    --lok-fill-danger:    #EF4444;
    --lok-fill-info:      #2A9D8F;

    /* === Soft pill backgrounds — ink-bearing pills with AA-safe text === */
    --lok-bg-excellent: #DCFCE7;
    --lok-bg-good:      #D1FAE5;
    --lok-bg-average:   #FEF3C7;
    --lok-bg-warning:   #FEF3C7;
    --lok-bg-danger:    #FEE2E2;
    --lok-bg-info:      #CCFBF1;

    /* Star/rating color */
    --lok-star: #B45309;

    /* Chart colors */
    --lok-chart-primary: #8B2A2F;
    --lok-chart-secondary: #D3D3D3;

    /* Borders */
    --lok-border: #dee2e6;
    --lok-border-light: #e9ecef;

    /* Text */
    --lok-text-dark: #333;
    --lok-text-muted: #666;
    --lok-text-light: #888;

    /* Border radius */
    --lok-radius-sm: 0.5rem;
    --lok-radius-md: 0.75rem;
    --lok-radius-lg: 1rem;
}

/* ===== Global ===== */
body {
    color: var(--lok-dark);
}

h1:focus {
    outline: none;
}

/* ===== Buttons ===== */
.btn-lok {
    background-color: var(--lok-red);
    border-color: var(--lok-red);
    color: #fff;
}

.btn-lok:hover, .btn-lok:focus {
    background-color: var(--lok-red-hover);
    border-color: var(--lok-red-hover);
    color: #fff;
}

.btn-lok:disabled {
    background-color: var(--lok-red);
    border-color: var(--lok-red);
    opacity: 0.65;
    color: #fff;
}

.btn-outline-lok {
    border-color: var(--lok-red);
    color: var(--lok-red);
}

.btn-outline-lok:hover, .btn-outline-lok:focus {
    background-color: var(--lok-red);
    border-color: var(--lok-red);
    color: #fff;
}

/* ===== Hero Section ===== */
.lok-hero {
    background-color: var(--lok-hero-bg);
    color: #fff;
}

.lok-hero .form-control {
    border: 2px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.08);
    color: #fff;
}

.lok-hero .form-control::placeholder {
    color: rgba(255,255,255,0.5);
}

.lok-hero .form-control:focus {
    border-color: var(--lok-red);
    background-color: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.25);
}

/* ===== Section alternating bg ===== */
.lok-section-alt {
    background-color: var(--lok-light);
}

/* ===== Accent text ===== */
.text-lok {
    color: var(--lok-red);
}

/* ===== Login Page ===== */
.lok-login-bg {
    background-color: #f0f2f5;
}

.lok-login-card {
    background: #fff;
    border-radius: var(--lok-radius-lg);
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 420px;
}

.lok-login-card .input-group-text {
    border-right: 0;
}

.lok-login-card .input-group .form-control {
    border-left: 0;
}

.lok-login-card .input-group .form-control:focus {
    border-color: var(--lok-border);
    box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.15);
}

.lok-login-card .input-group:focus-within .input-group-text {
    border-color: var(--lok-border);
    box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.15);
}

.lok-login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--lok-gray);
    font-size: 0.85rem;
}

.lok-login-divider::before,
.lok-login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--lok-border);
}

.lok-login-divider span {
    padding: 0 1rem;
}

/* ===== Checkout Sign-In Page ===== */
.lok-checkout-signin-bg {
    background-color: #f0f2f5;
}

.lok-checkout-signin-card {
    background: #fff;
    border-radius: var(--lok-radius-lg);
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 440px;
}

.lok-checkout-signin-card .input-group-text {
    border-right: 0;
}

.lok-checkout-signin-card .input-group .form-control {
    border-left: 0;
}

.lok-checkout-signin-card .input-group .form-control:focus,
.lok-checkout-signin-card .input-group:focus-within .input-group-text {
    border-color: var(--lok-border);
    box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.15);
}

.lok-checkout-signin-listing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fafafa;
    border: 1px solid var(--lok-border);
    border-radius: var(--lok-radius-md);
}

.lok-checkout-signin-listing-img {
    width: 56px;
    height: 56px;
    border-radius: var(--lok-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.lok-checkout-signin-listing-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: var(--lok-gray);
}

.lok-checkout-signin-listing-img-placeholder .material-symbols-outlined {
    font-size: 28px;
}

.lok-checkout-signin-listing-body {
    min-width: 0;
    flex: 1;
}

.lok-checkout-signin-listing-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    color: var(--lok-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.lok-checkout-signin-listing-meta {
    font-size: 0.75rem;
    color: var(--lok-gray);
    margin: 0.15rem 0 0;
}

.lok-checkout-signin-google {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-size: 1rem;
}

.lok-checkout-signin-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--lok-gray);
    font-size: 0.8rem;
    text-align: center;
}

.lok-checkout-signin-trust .material-symbols-outlined {
    font-size: 16px;
}

.lok-checkout-signin-email-toggle {
    display: block;
    margin: 1.25rem auto 0;
    background: none;
    border: 0;
    padding: 0.25rem 0.5rem;
    color: var(--lok-gray);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.lok-checkout-signin-email-toggle:hover {
    color: var(--lok-dark);
}

/* ===== Analysis Started Page ===== */
.lok-started-bg {
    background: linear-gradient(180deg, #1A1A1A 0%, #2D1215 100%);
    color: #fff;
}

.lok-started-card {
    background-color: var(--lok-red);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.lok-started-check {
    width: 56px;
    height: 56px;
    background-color: #28a745;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lok-started-url {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    word-break: break-all;
}

.lok-started-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    backdrop-filter: blur(4px);
}

.lok-started-input {
    background: #fff;
    border: 2px solid #fff;
    color: var(--lok-text-dark);
}

.lok-started-input::placeholder {
    color: #999;
}

.lok-started-input:focus {
    background: #fff;
    border-color: #fff;
    color: var(--lok-text-dark);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3);
}

.lok-started-btn {
    background-color: #fff;
    color: var(--lok-red);
    border: 1px solid #fff;
}

.lok-started-btn:hover, .lok-started-btn:focus {
    background-color: #f0f0f0;
    color: var(--lok-red-hover);
    border-color: #f0f0f0;
}

.lok-started-btn:disabled {
    background-color: #fff;
    color: var(--lok-red);
    opacity: 0.65;
    border-color: #fff;
}

@media (max-width: 575.98px) {
    .lok-started-card {
        padding: 1.5rem !important;
        border-radius: var(--lok-radius-lg);
    }

    .lok-listing-card-img,
    .lok-listing-card-img-placeholder {
        height: 140px;
    }

    .lok-hero .display-5 {
        font-size: 1.75rem;
    }

    .lok-dashboard-header .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ===== Dashboard ===== */
.lok-dashboard-bg {
    background-color: #f0f2f5;
}

.lok-dashboard-header {
    background: #fff;
    border-bottom: 1px solid var(--lok-border-light);
}

.lok-listing-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: 10px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.lok-listing-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--lok-red);
}

.lok-listing-card-img-link {
    display: block;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}
.lok-listing-card-img-link img {
    transition: transform 320ms ease;
}
.lok-listing-card-img-link:hover img {
    transform: scale(1.04);
}
.lok-listing-card-img {
    height: 160px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    width: 100%;
    display: block;
}

.lok-listing-card-img-placeholder {
    height: 160px;
    background: var(--lok-border-light);
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lok-empty-state {
    background: #fff;
    border-radius: var(--lok-radius-md);
    border: 1px solid var(--lok-border-light);
    padding: 3rem 1.5rem;
}

.lok-credit-badge {
    display: inline-block;
    background: #f0f2f5;
    border: 1px solid var(--lok-border);
    border-radius: 20px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

/* ===== Pricing Page ===== */
.lok-pricing-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-md);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.lok-pricing-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.lok-pricing-card-popular {
    border-color: var(--lok-red);
    box-shadow: 0 2px 12px rgba(193, 39, 45, 0.12);
}

.lok-subscription-popular-badge,
.lok-subscriber-quote-label {
    background: var(--lok-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
}
.lok-subscription-popular-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.85rem;
    white-space: nowrap;
}

.lok-pricing-feature {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
}

.lok-pricing-feature svg {
    flex-shrink: 0;
}

.lok-guarantee-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--lok-teal-light);
    border: 1px solid var(--lok-teal);
    border-radius: var(--lok-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--lok-dark);
}

.lok-refund-guarantee {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lok-dark);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}
.lok-refund-guarantee-icon {
    color: var(--lok-red);
    flex-shrink: 0;
}

/* Credit-vs-subscription math anchor — quiet but visible callout under credit packs */
.lok-credit-anchor {
    margin: 1rem 0 0;
    padding: 0.65rem 0.85rem;
    background: var(--lok-teal-light);
    border-left: 3px solid var(--lok-teal);
    border-radius: var(--lok-radius-sm);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--lok-dark);
}

.lok-free-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: var(--lok-teal-light);
    color: var(--lok-teal);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== TopBar ===== */
.lok-topbar {
    background-color: #FAFAFA;
    border-bottom: 1px solid var(--lok-border);
    /* Above .lok-sticky-banner (1020): the banner sits directly under the topbar and was painting
       over the first row of the language/currency dropdowns, making "English" unclickable. */
    position: relative;
    z-index: 1030;
}

.lok-topbar .nav-link {
    color: var(--lok-text-muted);
    font-size: 0.9rem;
    transition: color 0.15s;
}

.lok-topbar .nav-link:hover,
.lok-topbar .nav-link:focus {
    color: var(--lok-dark);
}

/* ===== Calendar cells ===== */
.lok-cal-cell {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 768px) {
    .lok-cal-cell { border-radius: 8px; }
}
.lok-cal-clickable { cursor: pointer; }

/* Hover lift — desktop with hover-capable input only */
@media (hover: hover) and (min-width: 768px) {
    .lok-cal-clickable:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(0,0,0,0.04);
        z-index: 5;
    }
}

/* Today marker — outline ring */
.lok-cal-today {
    box-shadow: inset 0 0 0 2px var(--lok-teal), inset 0 1px 2px rgba(0,0,0,0.04);
}
@media (hover: hover) and (min-width: 768px) {
    .lok-cal-today.lok-cal-clickable:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,0.14), inset 0 0 0 2px var(--lok-teal);
    }
}

/* Transient flash — pulses a teal ring when a date group is clicked in the
   "Dates worth lowering/raising" cards, drawing the eye to those days. */
@keyframes lokCalFlash {
    0%, 100% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.04); }
    25%, 75% { box-shadow: 0 0 0 3px var(--lok-teal), 0 0 16px rgba(42,157,143,0.55); }
}
.lok-cal-flash { animation: lokCalFlash 1.5s ease-in-out 2; z-index: 6; }

/* Underpriced ring — drawn on a pseudo-element so it sits above the
   occupancy fill (which would otherwise cover an inset box-shadow).
   The orange glow on the cell itself extends outside its box; the cell
   has overflow:hidden but box-shadow on the cell paints in the parent
   grid (which doesn't clip), so the halo is preserved.

   When the cell is part of a consecutive run, --up-glow is boosted so the
   whole cluster sits in a single envelope. The inner-side border is
   dropped (lok-up-no-*) and the cell's own corner radius is flattened on
   that side, so neighbours read as one fused capsule rather than two
   adjacent rings — without painting a hard divider through the join. */
.lok-cal-underpriced {
    --up-glow: 0 0 14px rgba(249, 115, 22, 0.45);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), var(--up-glow);
}
.lok-cal-underpriced::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-top: 3px solid #F97316;
    border-right: 3px solid #F97316;
    border-bottom: 3px solid #F97316;
    border-left: 3px solid #F97316;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
    pointer-events: none;
    z-index: 4;
}
.lok-up-no-l::after { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.lok-up-no-r::after { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Flatten the cell's own corners on connected sides so adjacent cells
   present flat-faced edges to each other (the join reads as one shape
   notched by the grid gap, not two separately rounded tiles). */
.lok-cal-underpriced.lok-up-no-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.lok-cal-underpriced.lok-up-no-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Same-row grouped cells drop the outer halo — otherwise the radial glow
   from each neighbour bleeds into the 2px grid gap and overlaps, painting
   a soft coloured haze through the join. Gated on lok-up-adj-* (not
   lok-up-no-*) so the Sun→Mon row-wrap edge keeps its halo: there's no
   2px-gap neighbour to bleed into, just empty calendar background. */
.lok-cal-underpriced.lok-up-adj-l,
.lok-cal-underpriced.lok-up-adj-r { --up-glow: 0 0 0 0 transparent; }
@media (hover: hover) and (min-width: 768px) {
    .lok-cal-underpriced.lok-cal-clickable:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.14), 0 0 18px rgba(249, 115, 22, 0.6);
    }
}

/* Overpriced ring — mirrors the underpriced ring but in canonical danger red.
   A consecutive run (e.g. Mon 25 + Tue 26) reads as one Vacancy Risk capsule:
   the inner borders drop, the cell corners flatten on the join side, and the
   shared halo enlarges — but no hard divider is painted through the gap. */
.lok-cal-overpriced {
    --op-glow: 0 0 14px rgba(190, 18, 60, 0.45);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), var(--op-glow);
}
.lok-cal-overpriced::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-top: 3px solid var(--lok-status-danger);
    border-right: 3px solid var(--lok-status-danger);
    border-bottom: 3px solid var(--lok-status-danger);
    border-left: 3px solid var(--lok-status-danger);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
    pointer-events: none;
    z-index: 4;
}
.lok-op-no-l::after { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.lok-op-no-r::after { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lok-cal-overpriced.lok-op-no-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.lok-cal-overpriced.lok-op-no-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lok-cal-overpriced.lok-op-adj-l,
.lok-cal-overpriced.lok-op-adj-r { --op-glow: 0 0 0 0 transparent; }
@media (hover: hover) and (min-width: 768px) {
    .lok-cal-overpriced.lok-cal-clickable:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.14), 0 0 18px rgba(190, 18, 60, 0.6);
    }
}

/* Weekend tint — subtle background shift */
.lok-cal-weekend::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.025);
    pointer-events: none;
    z-index: 0;
}
.lok-cell-gap { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lok-cell-gap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 6px);
    border-radius: inherit;
}


/* Corner labels — mobile keeps the day number and the booked-nearby figure (tap a cell for the
   rest); desktop adds the area-median price corner. Solid translucent backgrounds only: a
   backdrop-filter here puts hundreds of live blur regions in the grid and visibly stalls
   rasterization while scrolling. */
.lok-cell-price { display: none; }
/* The one corner label that survives on mobile. The card header now sends the host looking for a
   per-night figure, and below 768px the fill height was the only answer left — a shape you can
   compare but not read. Small, but on the same translucent chip as every width: over the deepest
   teal fills a bare figure in --lok-status-info is unreadable. Mobile hides .lok-cell-min-stay,
   so the only thing it can crowd is the rare crossed-eye icon in the centre stack. */
.lok-cell-occ {
    display: inline-flex;
    align-items: center;
    position: absolute;
    bottom: 2px;
    right: 2px;
    z-index: 3;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(255,255,255,0.82);
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--lok-status-info);
    line-height: 1.4;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.lok-cell-day {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 3;
    padding: 1px 3px;
    border-radius: 4px;
    font-size: 0.62rem;
    color: #666;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.lok-cell-day-outside { color: #ccc; background: transparent; }
@media (min-width: 768px) {
    .lok-cell-day,
    .lok-cell-price,
    .lok-cell-occ {
        display: inline-flex;
        align-items: center;
        position: absolute;
        z-index: 3;
        padding: 1px 4px;
        border-radius: 4px;
        background: rgba(255,255,255,0.82);
        line-height: 1;
        pointer-events: none;
        font-variant-numeric: tabular-nums;
    }
    .lok-cell-day { font-size: 0.8rem; padding: 1px 5px; }
    .lok-cell-day-outside { background: transparent; }
    .lok-cell-price { top: 3px; right: 3px; font-size: 0.9rem; color: #222; font-weight: 600; }
    /* The occupancy figure is inked with the occupancy colour, the same --lok-status-info the day
       panel gives "Occupancy forecast" and the alignment card gives its area-occupancy value — one
       number, one colour, wherever it appears. Deep rather than the fill's bright teal for the same
       reason --lok-orange inks the price over a pale orange cell: fills are pale, inks are readable.
       The corner label's translucent-white chip is what keeps it legible over the deepest fills. */
    .lok-cell-occ { bottom: 3px; right: 3px; font-size: 0.78rem; color: var(--lok-status-info); font-weight: 600; }
}

.lok-cell-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.lok-cell-min-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lok-orange);
}
/* The "this price is modelled, not measured" tilde, immediately left of the price it qualifies —
   inline-block so the struck-price variant's line-through stops at the number and doesn't cross it. */
.lok-cell-est { display: inline-block; margin-right: 2px; color: #b08000; font-weight: 700; }
/* Footer row under the nightly price: the crossed-eye (can't check in) and the minimum stay,
   side by side. The eye used to stand in place of the price on those nights — it doesn't any
   more (the night is still bookable as a later night of an earlier check-in), so it reads as a
   badge next to the reason rather than as the cell's whole content. */
.lok-cell-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}
.lok-cell-gap-icon {
    font-size: 0.85rem;
    color: var(--lok-status-danger);
    line-height: 1;
}
.lok-legend-min-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--lok-orange-light);
    color: var(--lok-orange);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
}
/* Recommended price sits above the current price, larger; the current price keeps
   its normal min-price styling but is struck through to read as "was". */
.lok-cell-rec-price {
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--lok-orange);
    line-height: 1;
}
.lok-cell-price-struck { text-decoration: line-through; }
/* The min-stay badge is hidden on mobile (cells are ~47px — too cramped); the value lives in the
   tap-to-expand day panel header instead. Desktop cells have room, so it's shown there. */
.lok-cell-min-stay {
    display: none;
    color: #666;
}
@media (min-width: 768px) {
    .lok-cell-min-price { font-size: 0.95rem; }
    .lok-cell-rec-price { font-size: 1.2rem; }
    .lok-cell-min-stay { display: block; font-size: 0.7rem; }
    .lok-cell-gap-icon { font-size: 1rem; }
}

/* Page rank chip */
.lok-rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
@media (min-width: 768px) {
    .lok-rank-chip {
        padding: 0.32rem 0.85rem;
        font-size: 1rem;
    }
}
.lok-rank-p1 { background: #166534; }
.lok-rank-p2 { background: #22c55e; }
.lok-rank-mid { background: var(--lok-fill-warning); color: #4a3500; }
.lok-rank-bad { background: var(--lok-fill-danger); }
.lok-rank-hidden { background: #991b1b; gap: 0.25rem; }


/* Calendar card header — title, with the explainer beside it (wrapping below on narrow screens) */
.lok-cal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.lok-cal-head-sub { font-size: 0.82rem; font-weight: 400; color: var(--lok-text-muted); line-height: 1.45; }

/* Month header — centered title with side rules */
.lok-month-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.25rem 0 0.5rem;
    color: var(--lok-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lok-month-title::before,
.lok-month-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lok-border);
}
@media (min-width: 768px) {
    .lok-month-title {
        font-size: 1rem;
        margin: 0.5rem 0 0.75rem;
        gap: 1rem;
    }
}

/* Legend as chips */
.lok-legend-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.lok-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    background: #f8f9fa;
    border: 1px solid var(--lok-border-light);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--lok-text-muted);
    line-height: 1;
}
@media (min-width: 768px) {
    .lok-legend-chip { font-size: 0.82rem; }
}
.lok-legend-chip .material-symbols-outlined { font-size: 14px; color: #999; }
/* Same red the crossed-eye wears inside the cell — the chip carries both marks the night does. */
.lok-legend-chip .lok-legend-gap-icon { color: var(--lok-status-danger); }

/* Day detail panel — desktop: right slide, 400px wide */
.lok-day-panel { --bs-offcanvas-width: 400px; }
.lok-day-panel-header { border-bottom: 1px solid var(--lok-border); padding: 1rem 1.25rem; }

/* Mobile: bottom sheet override */
@media (max-width: 767.98px) {
    .lok-day-panel.offcanvas-end {
        top: auto; right: 0; left: 0; bottom: 0;
        width: 100%; max-height: 80vh;
        border-left: none; border-top: 1px solid var(--lok-border);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .lok-day-panel.offcanvas-end.show,
    .lok-day-panel.offcanvas-end.showing {
        transform: translateY(0);
    }
}

.lok-topbar-signout {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

@media (max-width: 767.98px) {
    .lok-topbar .navbar-collapse {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    /* 44px minimum tap targets in the collapsed mobile menu */
    .lok-topbar .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .lok-topbar .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .lok-topbar-currency-dropdown {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== Home Page — Hero Gradient ===== */
.lok-hero-gradient {
    background: linear-gradient(135deg, rgba(193,39,45,0.06) 0%, #fff 40%, rgba(193,39,45,0.03) 100%);
}

/* Hero trust strip — three inline reassurances under the subhead */
.lok-hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--lok-text-muted);
}
.lok-hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--lok-dark);
}
.lok-hero-trust-star {
    color: var(--lok-teal);
    font-size: 0.95rem;
    line-height: 1;
}
.lok-hero-trust-sep {
    color: var(--lok-border);
}

/* Final CTA — split paths (first-time vs. returning intent) */
.lok-final-cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lok-final-cta-path {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let the grid track shrink to the viewport so the pill can't force horizontal scroll */
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: var(--lok-radius-md);
    padding: 1.25rem 1.1rem;
    box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.18);
}
.lok-final-cta-path-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lok-text-muted);
    margin-bottom: 0.35rem;
}
.lok-final-cta-path-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--lok-dark);
    margin: 0 0 0.5rem;
}
.lok-final-cta-path-sub {
    font-size: 0.95rem;
    color: var(--lok-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.lok-final-cta-path .lok-free-badge {
    align-self: flex-start;
    margin-top: 0.65rem;
}
.lok-final-cta-watch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: auto;
}
.lok-final-cta-path-hint {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: var(--lok-text-muted);
    margin-top: 0.55rem;
}
@media (min-width: 768px) {
    .lok-final-cta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    .lok-final-cta-path {
        padding: 1.5rem 1.35rem;
    }
}

/* ===== Home Page — Pill Input ===== */
/* Mobile-first: input and button stack so a pasted URL stays readable and the long
   button label can't squeeze the field (or force the final-CTA grid wider than the
   viewport). The inline "pill" row is restored at >=576px below. */
.lok-pill-input {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    background: #fff;
    border: 2px solid var(--lok-border-light);
    border-radius: 18px;
    padding: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lok-pill-input:focus-within {
    border-color: var(--lok-red);
    box-shadow: 0 0 0 0.2rem rgba(193, 39, 45, 0.15);
}

.lok-pill-input input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.95rem;
    background: transparent;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.75rem;
}

.lok-pill-input input::placeholder {
    color: #adb5bd;
}

.lok-pill-input .lok-pill-btn {
    background: var(--lok-red);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 0.55rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
}

.lok-pill-input .lok-pill-btn:hover {
    background: var(--lok-red-hover);
}

.lok-pill-input .lok-pill-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (min-width: 576px) {
    .lok-pill-input {
        flex-direction: row;
        align-items: center;
        gap: 0;
        border-radius: 100px;
        padding: 0.35rem 0.35rem 0.35rem 1.25rem;
    }
    .lok-pill-input input {
        padding: 0;
    }
    .lok-pill-input .lok-pill-btn {
        width: auto;
    }
}

/* ===== Home Page — Icon Boxes ===== */
.lok-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--lok-radius-md);
    background: linear-gradient(135deg, var(--lok-red), var(--lok-red-light));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.lok-icon-box-light {
    width: 48px;
    height: 48px;
    border-radius: var(--lok-radius-md);
    background: rgba(193, 39, 45, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lok-red);
    flex-shrink: 0;
}

/* ===== Home Page — Stat Cards ===== */
.lok-stat-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.lok-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ===== Home Page — Feature Cards ===== */
.lok-feature-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lok-feature-card:hover {
    border-color: #ced4da;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* ===== Home Page — "What's included" sub-rows ===== */
.lok-includes-subhead {
    text-align: center;
    margin: 2rem auto 1.5rem;
    max-width: 640px;
}

.lok-includes-subhead h3 {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0.5rem 0 0;
}

.lok-includes-subhead p {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

.lok-includes-subhead-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
}

.lok-includes-subhead-tag--accent {
    background: var(--lok-red);
    border-color: var(--lok-red);
    color: #fff;
}

.lok-monitoring-band {
    margin-top: 2.5rem;
    padding: 1.5rem 1rem 2rem;
    background: linear-gradient(180deg, rgba(193,39,45,0.06) 0%, rgba(193,39,45,0.03) 100%);
    border: 1px solid rgba(193,39,45,0.18);
    border-radius: var(--lok-radius-lg);
}

.lok-alert-mini-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 1060px;
    margin: 0 auto;
}

.lok-alert-mini {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-md);
    padding: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lok-alert-mini:hover {
    border-color: rgba(193,39,45,0.4);
    box-shadow: 0 2px 12px rgba(193,39,45,0.08);
}

.lok-alert-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--lok-radius-sm);
    background: rgba(193,39,45,0.08);
    color: var(--lok-red);
    font-size: 22px;
    margin-bottom: 0.6rem;
}

.lok-alert-mini-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--lok-dark);
}

.lok-alert-mini-why {
    color: #6c757d;
    font-size: 0.825rem;
    line-height: 1.45;
}

@media (min-width: 576px) {
    .lok-alert-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .lok-includes-subhead {
        margin: 2.5rem auto 2rem;
    }
    .lok-includes-subhead h3 {
        font-size: 1.5rem;
    }
    .lok-monitoring-band {
        margin-top: 3rem;
        padding: 2rem 2rem 2.5rem;
    }
    .lok-alert-mini-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .lok-alert-mini {
        padding: 1.25rem;
    }
}

@media (min-width: 992px) {
    .lok-alert-mini-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Home Page — Badge Pill ===== */
.lok-badge-pill {
    display: inline-block;
    background: rgba(193, 39, 45, 0.08);
    color: var(--lok-red);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 1rem;
    border-radius: 100px;
}

/* ===== Home Page — Testimonial Card ===== */
.lok-testimonial-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-lg);
    padding: 2rem;
}

/* ===== Home Page — Resource Cards ===== */
.lok-resource-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-lg);
    padding: 1.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.lok-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    color: inherit;
}

/* ===== Home Page — Sample Badge ===== */
.lok-sample-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--lok-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
}

/* ===== Home Page — Trust Badges ===== */
.lok-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.lok-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #6c757d;
    font-size: 0.85rem;
}

/* ===== Home Page — Section Headings ===== */
.lok-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.lok-section-header h2 {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.lok-section-header p {
    color: #6c757d;
    max-width: 560px;
    margin: 0 auto;
}

/* ===== Home Page — Responsive ===== */
/* Stats grid: 2-col on mobile, auto-fit centered on md+ (handles 2/3/4 cards) */
.lok-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .lok-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
        justify-content: center;
        gap: 1.5rem;
    }
}

/* Hero image */
.lok-hero-image {
    border-radius: var(--lok-radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Check list items */
.lok-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lok-check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(193, 39, 45, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lok-red);
    margin-top: 2px;
}

/* Star ratings */
.lok-stars {
    color: #fbbf24;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* Section padding */
.lok-section {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .lok-section {
        padding: 5rem 0;
    }
}

/* Highlight box */
.lok-highlight-box {
    background: linear-gradient(135deg, rgba(193,39,45,0.06) 0%, rgba(193,39,45,0.02) 100%);
    border-radius: var(--lok-radius-md);
    padding: 1.5rem;
    border-left: 3px solid var(--lok-red);
}

/* ===== Footer ===== */
.lok-footer {
    background-color: var(--lok-hero-bg);
    color: #fff;
}

.lok-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}

.lok-footer a:hover {
    color: #fff;
}

.lok-footer ul {
    padding: 0;
}

.lok-footer ul li {
    margin-bottom: 0.5rem;
}

.lok-footer-heading {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.lok-footer-badge {
    display: inline-block;
    background: var(--lok-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 100px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.lok-footer-social {
    display: flex;
    gap: 0.75rem;
}

.lok-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.15s, color 0.15s;
}

.lok-footer-social a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.lok-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.lok-footer-legal a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

.lok-footer-legal a:hover {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767.98px) {
    .lok-footer-legal {
        justify-content: center;
        text-align: center;
    }
}

/* ===== Blazor error UI ===== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== Report Header ===== */
.lok-report-header {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: var(--lok-radius-md);
    overflow: hidden;
    margin-bottom: 1rem;
}

.lok-report-header-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.lok-report-hero {
    position: relative;
    width: 100%;
    height: 150px;
}

.lok-report-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lok-report-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.75rem 1.25rem 0.85rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
    color: #fff;
}

.lok-report-hero-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.lok-report-hero-title--plain {
    color: var(--lok-dark);
    text-shadow: none;
    padding: 1.25rem 1.5rem 0;
}

.lok-report-header-info {
    padding: 1rem 1.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.lok-report-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    color: var(--lok-gray);
    font-size: 0.875rem;
}

.lok-report-snapshot-chip {
    display: inline-flex;
    align-items: center;
}
.lok-report-snapshot-chip--stale {
    color: var(--lok-status-warning);
    font-weight: 600;
}

.lok-report-stale-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--lok-border);
    background: #fff8eb;
    color: var(--lok-gray);
    font-size: 0.875rem;
}
.lok-report-stale-notice .material-symbols-outlined {
    color: var(--lok-status-warning);
}
.lok-report-stale-text {
    flex: 1 1 12rem;
}
@media (min-width: 768px) {
    .lok-report-stale-notice {
        padding: 0.75rem 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .lok-report-hero {
        height: 120px;
    }

    .lok-report-hero-overlay {
        padding: 1.4rem 0.9rem 0.7rem;
    }

    .lok-report-hero-title {
        font-size: 1.2rem;
    }

    .lok-report-hero-title--plain {
        padding: 1rem 1rem 0;
    }

    .lok-report-header-info {
        padding: 0.75rem 1rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 768px) {
    .lok-report-hero {
        height: 170px;
    }

    .lok-report-hero-title {
        font-size: 1.6rem;
    }
}



/* The base 72px clears the ~46px sticky section-nav for owners; non-owner/demo reports also carry
   the 38px sticky banner above it, so bump the jump offset there (mobile only). */
@media (max-width: 767.98px) {
    body:has(.lok-sticky-banner) .lok-acc-item { scroll-margin-top: 96px; }
}

/* Section health pill on the collapsed header */
.lok-sec-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.4;
    white-space: nowrap;
}


/* Below the non-owner / demo "analyze yours" banner (also sticky at top:0, 38px tall). */
body:has(.lok-sticky-banner) .lok-report-secnav { top: 38px; }





.lok-report-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--lok-radius-sm);
    background: var(--lok-border-light);
}

@media (max-width: 575.98px) {
    .lok-report-tabs {
        grid-template-columns: 1fr 1fr;
    }
}



.lok-report-tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--lok-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: calc(var(--lok-radius-sm) - 0.15rem);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s, color 0.15s;
}

.lok-report-tab:not(.active):hover {
    background: var(--lok-border-light);
    color: var(--lok-dark);
}
a.lok-report-tab {
    text-decoration: none;
}

.lok-report-tab.active {
    background: var(--lok-teal-light);
    color: var(--lok-teal);
    font-weight: 600;
}

.lok-topbar-currency-dropdown {
    background: transparent;
    border: 1px solid var(--lok-border);
    color: var(--lok-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 3px 10px;
}

.lok-topbar-currency-dropdown:hover,
.lok-topbar-currency-dropdown:focus {
    background: rgba(0,0,0,0.04);
    color: var(--lok-dark);
    border-color: var(--lok-text-muted);
}

.lok-topbar-currency-dropdown::after {
    margin-left: 0.35em;
}

.lok-topbar-currency-menu {
    background: #fff;
    border: 1px solid var(--lok-border);
    min-width: 11rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.lok-topbar-currency-menu .dropdown-item {
    color: var(--lok-text-muted);
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

.lok-topbar-currency-menu .dropdown-item:hover,
.lok-topbar-currency-menu .dropdown-item:focus {
    background: var(--lok-light);
    color: var(--lok-dark);
}

.lok-topbar-currency-menu .dropdown-item.active {
    background: var(--lok-teal);
    color: #fff;
}

.lok-area-map {
    border: 0;
    border-radius: var(--lok-radius-sm);
    height: 300px;
}
@media (min-width: 768px) {
    .lok-area-map {
        height: 100%;
    }
}

/* ===== Area Overview Chips ===== */
.lok-area-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8f9fa;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-sm);
    padding: 0.5rem 0.65rem;
}
.lok-area-chip-icon {
    font-size: 20px;
    color: var(--lok-teal);
}
.lok-area-chip-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    line-height: 1.2;
}
.lok-area-chip-value {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Listings in Area breakdown */
.lok-listings-breakdown {
    padding: 0.6rem 0.75rem;
    background: var(--lok-light);
    border-radius: var(--lok-radius-sm);
}
.lok-listings-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
}
.lok-listings-breakdown-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.lok-listings-breakdown-count {
    font-weight: 600;
    font-size: 0.85rem;
}



.lok-dow-header {
    padding: 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lok-metric-icon {
    font-size: 28px;
    color: var(--lok-teal);
}

.lok-icon-xs { font-size: 14px; vertical-align: middle; }
.lok-icon-sm { font-size: 18px; vertical-align: middle; }

.lok-legend-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 2px;
}
/* The demand fill's sample — the calendar palette's own range (ReportCalendarHelper.TealPalette),
   deepest at the bottom the way a cell fills from below, so the chip reads as a shrunken cell
   rather than a flat swatch. */
/* The hatch a can't-check-in night wears, over the teal it is drawn on top of in the grid — the
   swatch has to look like the square it keys, and this one used to be hatched over a green the
   calendar stopped using. */
.lok-legend-gap { background: repeating-linear-gradient(45deg, #6DD5C9, #6DD5C9 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px); }
.lok-legend-underpriced { background: #FDE0C4; border: 2px solid var(--lok-orange); }
.lok-legend-overpriced { background: #FBE3E8; border: 2px solid var(--lok-status-danger); }

/* Visibility icon color variants — fills carry a white icon, need >=3:1 */
.lok-vis-great { background: #198754; }
.lok-vis-good { background: #0d6efd; }
.lok-vis-average { background: #D97706; }
.lok-vis-bad { background: #BE123C; }
.lok-vis-unknown { background: #adb5bd; }

/* Visibility badge color variants */
.lok-vis-badge-great { background: #d1e7dd; color: #0f5132; }
.lok-vis-badge-good { background: #cfe2ff; color: #084298; }
.lok-vis-badge-average { background: #fff3cd; color: #664d03; }
.lok-vis-badge-bad { background: #f8d7da; color: #842029; }
.lok-vis-badge-unknown { background: var(--lok-border-light); color: #495057; }



/* ===== Layout Utilities ===== */
.lok-page-container {
    max-width: 1320px;
    margin: 0 auto;
    /* Safety net: a single unguarded wide child must never give the whole page a horizontal scroll. */
    overflow-x: clip;
}
.lok-narrow-container {
    max-width: 520px;
    margin: 0 auto;
}
.lok-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    font-size: 0.9rem;
}

.lok-analysis-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0.15rem 0.2rem;
    line-height: 1.4;
}
.lok-analysis-chip--positive {
    background: #d1fae5;
    color: #065f46;
}
.lok-analysis-chip--negative {
    background: #fef2f2;
    color: #991b1b;
}
.lok-analysis-chip--neutral {
    background: #f3f4f6;
    color: #4b5563;
}
.lok-analysis-chip--keyword {
    background: #eff6ff;
    color: #1e40af;
}
.lok-analysis-quote {
    border-left: 3px solid var(--lok-border);
    padding: 0.6rem 1rem;
    background: var(--lok-light);
    border-radius: 0 var(--lok-radius-sm) var(--lok-radius-sm) 0;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}
.lok-analysis-quote-author {
    font-weight: 600;
    color: var(--lok-dark);
    font-size: 0.82rem;
    margin-bottom: 0.15rem;
}
.lok-analysis-quote-concern {
    font-weight: 600;
    color: var(--lok-status-warning);
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}
.lok-analysis-quote-text {
    font-style: italic;
    color: var(--lok-text-muted);
    font-size: 0.82rem;
}

@media (max-width: 575.98px) {
    .lok-report-tab {
        font-size: 0.85rem;
        padding: 0.5rem 0.55rem;
        gap: 0.4rem;
    }
    .lok-report-tab .material-symbols-outlined {
        font-size: 16px;
    }
}

.lok-ok-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin: 0.85rem 0;
    border: 1px solid rgba(21, 128, 61, 0.25);
    background: rgba(21, 128, 61, 0.07);
    border-radius: var(--lok-radius-md);
}
.lok-ok-banner-check {
    color: var(--lok-status-excellent);
    font-size: 26px;
    flex-shrink: 0;
    animation: lok-check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lok-ok-banner-text { display: flex; flex-direction: column; line-height: 1.3; }
.lok-ok-banner-title { font-weight: 700; color: var(--lok-status-excellent); font-size: 0.95rem; }
.lok-ok-banner-msg { color: var(--lok-gray); font-size: 0.85rem; }

/* Hero form — the full all-clear payoff at the top of a fully healthy listing-quality analysis. */
.lok-ok-banner--hero {
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.25rem;
    border-width: 2px;
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.10), rgba(42, 157, 143, 0.10));
    box-shadow: 0 8px 30px rgba(21, 128, 61, 0.10);
}
.lok-ok-banner--hero .lok-ok-banner-check { font-size: 34px; }
.lok-ok-banner--hero .lok-ok-banner-title { font-size: 1.15rem; }
.lok-ok-banner--hero .lok-ok-banner-msg { font-size: 0.92rem; }

@keyframes lok-check-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .lok-ok-banner-check { animation: none; }
}

/* ===== FAQ Section ===== */
.lok-faq-card {
    background: #fff;
    border: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

/* FAQ cards are native <details>: collapsed by default, the question is the <summary>. */
.lok-faq-card > summary.lok-faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}
.lok-faq-card > summary.lok-faq-summary::-webkit-details-marker { display: none; }
.lok-faq-q {
    font-weight: 700;
    font-size: 1rem;
    color: var(--lok-dark);
}
.lok-faq-chevron {
    color: #6c757d;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.lok-faq-card[open] .lok-faq-chevron { transform: rotate(180deg); }
.lok-faq-card[open] > summary.lok-faq-summary { margin-bottom: 0.75rem; }

/* ===== Support Chat Widget ===== */
.lok-chat-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lok-red);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.lok-chat-fab:hover {
    background: var(--lok-red-hover);
    transform: scale(1.05);
}

.lok-chat-fab .material-symbols-outlined {
    font-size: 1.6rem;
}

.lok-chat-panel {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
    width: 380px;
    height: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lok-chat-header {
    background: var(--lok-red);
    color: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.lok-chat-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: flex;
    opacity: 0.8;
}

.lok-chat-close:hover {
    opacity: 1;
}

.lok-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lok-chat-msg {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.45;
    word-wrap: break-word;
}

.lok-chat-msg-user {
    align-self: flex-end;
    background: var(--lok-red);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.lok-chat-msg-assistant {
    align-self: flex-start;
    background: var(--lok-light);
    color: var(--lok-dark);
    border-bottom-left-radius: 4px;
}

.lok-chat-cursor {
    display: inline-block;
    animation: lok-chat-blink 0.8s step-end infinite;
    font-weight: bold;
    color: var(--lok-gray);
}

@keyframes lok-chat-blink {
    50% { opacity: 0; }
}

.lok-chat-input-area {
    border-top: 1px solid var(--lok-border-light);
    padding: 0.65rem;
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    background: #fff;
}

.lok-chat-input-area .form-control {
    border-radius: 20px;
    font-size: 0.875rem;
}

.lok-chat-send {
    background: var(--lok-red);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lok-chat-send:hover:not(:disabled) {
    background: var(--lok-red-hover);
    color: #fff;
}

.lok-chat-send:disabled {
    background: var(--lok-gray);
    color: #fff;
    opacity: 0.5;
}

.lok-chat-send .material-symbols-outlined {
    font-size: 1.1rem;
}

@media (max-width: 575.98px) {
    .lok-chat-panel {
        width: calc(100% - 1rem);
        height: calc(100% - 5rem);
        bottom: 0.5rem;
        right: 0.5rem;
        border-radius: 12px;
    }

    .lok-chat-fab {
        bottom: 1rem;
        right: 1rem;
    }

    /* On a demo/free report the full-width sticky CTA bar (.lok-demo-cta, 56px) sits at the
       bottom; lift the chat FAB above it so it doesn't cover the "— free" CTA text. */
    body:has(.lok-demo-cta) .lok-chat-fab {
        bottom: calc(56px + 1rem);
    }
}

/* Navigation progress bar */
#lok-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--lok-teal);
    z-index: 9999;
    pointer-events: none;
}
#lok-nav-progress.active {
    width: 70%;
    transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1);
}

.lok-tab-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    background: var(--lok-teal-light);
    border: 1px solid #c3e6e1;
    border-radius: 12px;
}
.lok-tab-cta a {
    color: var(--lok-teal);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.lok-tab-cta a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .lok-tab-cta {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 1rem;
    }
}


/* Locked 30-day evolution chart previews (mid-report subscribe card) */
.lok-locked-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.lok-locked-chart-card {
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: var(--lok-radius-md);
    padding: 0.6rem 0.7rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.lok-locked-chart-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--lok-text-muted);
}
.lok-locked-chart-icon {
    font-size: 16px;
    color: var(--lok-red);
}
.lok-locked-chart-title {
    font-weight: 600;
    color: var(--lok-dark);
    flex: 1 1 auto;
    min-width: 0;
}
.lok-locked-chart-window {
    font-size: 0.7rem;
    color: var(--lok-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lok-locked-chart-canvas {
    position: relative;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, #fafafa, #f3f3f3);
}
.lok-locked-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: blur(2px);
    opacity: 0.85;
}
.lok-locked-chart-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    color: var(--lok-dark);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 0 0.5rem;
}
.lok-locked-chart-overlay .material-symbols-outlined {
    font-size: 16px;
    color: var(--lok-red);
}
.lok-locked-chart-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.78rem;
}
.lok-locked-chart-now {
    color: var(--lok-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    font-weight: 600;
}
.lok-locked-chart-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lok-dark);
}
@media (min-width: 576px) {
    .lok-locked-charts {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
}


/* ===== Share Modal ===== */
.lok-share-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--lok-bg-secondary, #f8f9fa);
    border-radius: 6px;
}
.lok-share-copylink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
    background: var(--lok-bg-secondary, #f8f9fa);
    border-radius: 6px;
}

/* Position History (Visibility tab) */
.lok-position-history-card {
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: 12px;
    padding: 1rem;
    min-width: 0;
    overflow: hidden;
}
.lok-position-history-stats {
    display: grid;
    /* Column count follows the tile count (the 7-day tile hides when it would repeat the 30-day one). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--lok-border);
}
.lok-position-history-stat-label {
    font-size: 0.75rem;
    color: var(--lok-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}
.lok-position-history-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.lok-position-history-chart {
    width: 100%;
    min-width: 0;
    min-height: 280px;
    overflow: hidden;
}
.lok-position-history-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: 12px;
}
.lok-position-history-cta {
    background: linear-gradient(180deg, #fff 0%, #F4FBF9 100%);
    border: 1px solid var(--lok-border);
    border-radius: 12px;
    padding: 1.25rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}
.lok-position-history-cta-preview {
    position: relative;
    height: 90px;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    border: 1px dashed rgba(42, 139, 127, 0.35);
    overflow: hidden;
}
.lok-position-history-cta-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.lok-position-history-cta-preview-tag {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2A8B7F;
    background: rgba(42, 139, 127, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}
.lok-position-history-cta-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lok-position-history-cta-headline {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lok-text);
    margin: 0;
    line-height: 1.3;
}
.lok-position-history-cta-sub {
    font-size: 0.875rem;
    color: var(--lok-text-light);
    margin: 0;
    line-height: 1.45;
}
.lok-position-history-cta-btn {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.lok-position-history-cta-note {
    font-size: 0.78rem;
    color: var(--lok-text-light);
    margin: 0;
    text-align: center;
}
@media (min-width: 768px) {
    .lok-position-history-card {
        padding: 1.5rem;
    }
    .lok-position-history-stats {
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    .lok-position-history-stat-value {
        font-size: 1.25rem;
    }
    .lok-position-history-cta {
        flex-direction: row;
        align-items: center;
        padding: 1.5rem;
        gap: 1.5rem;
    }
    .lok-position-history-cta-preview {
        flex: 0 0 280px;
        height: 140px;
    }
    .lok-position-history-cta-body {
        flex: 1;
    }
    .lok-position-history-cta-btn {
        align-self: flex-start;
    }
    .lok-position-history-cta-note {
        text-align: left;
    }
}

/* ===== Visibility heatmap (Visibility tab) ===== */
.lok-vis-cal-card {
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: 12px;
    padding: 0.85rem;
}

.lok-vis-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
    color: var(--lok-text);
}
.lok-vis-cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
    white-space: nowrap;
}
.lok-vis-cal-chip-icon { font-size: 13px; color: #999; }

/* Pricing page — slim free-report banner between the hero and the plans (mobile-first) */
.lok-pricing-free-banner { background: #FFF8F0; border-bottom: 1px solid var(--lok-border-light); padding: 0.65rem 0; font-size: 0.9rem; }
.lok-pricing-free-banner .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem; text-align: center; }
.lok-pricing-free-banner .material-symbols-outlined { font-size: 18px; color: var(--lok-red); }
.lok-pricing-free-banner a { color: var(--lok-red); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lok-pricing-free-banner a:hover { text-decoration: underline; }
.lok-vis-cal-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.lok-vis-cal-months {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lok-vis-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.lok-vis-cal-dow {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--lok-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 0 4px;
}

.lok-vis-cal-spacer {
    aspect-ratio: 1;
}

.lok-vis-cal-cell {
    aspect-ratio: 1;
    position: relative;
    border-radius: 5px;
    background: #f8f9fa;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    overflow: hidden;
    color: #495057;
}

/* Background encodes availability: available days read as clean white tiles, booked/no-data
   days recede into a muted gray. The pill/hatch/lock on top conveys the search outcome. */
.lok-vis-cal-cell.lok-vis-cal-avail {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}
.lok-vis-cal-cell.lok-vis-cal-unavail {
    background: #e9ecef;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

.lok-vis-cal-clickable { cursor: pointer; }

.lok-vis-cal-day {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    color: #666;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.lok-vis-cal-blocked-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    color: #999;
}
.lok-vis-cal-blocked-icon { font-size: 0.95rem; }
.lok-vis-cal-blocked-label { font-size: 0.55rem; margin-top: 1px; }

/* Heatmap-scoped chip sizing — calendar tab keeps its larger chip untouched */
.lok-vis-cal-cell .lok-rank-chip {
    padding: 0.18rem 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    max-width: calc(100% - 6px);
}
.lok-vis-cal-cell .lok-rank-hidden {
    gap: 0;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.18rem 0.35rem;
}

.lok-vis-cal-cell.lok-vis-cal-today {
    box-shadow: inset 0 0 0 2px var(--lok-teal);
}

/* Tier colours — used only by the legend dots; mirror the in-cell chip palette */
.lok-vis-cal-dot.lok-vis-cal-p1      { background: #166534; }
.lok-vis-cal-dot.lok-vis-cal-p2      { background: #22c55e; }
.lok-vis-cal-dot.lok-vis-cal-p34     { background: var(--lok-fill-warning); }
.lok-vis-cal-dot.lok-vis-cal-p5      { background: var(--lok-fill-danger); }
.lok-vis-cal-dot.lok-vis-cal-hidden  { background: #991b1b; }
.lok-vis-cal-dot.lok-vis-cal-blocked { background: #f1f3f5; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.lok-vis-cal-dot.lok-vis-cal-gap { background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px); }

/* Available day that can't host a min-stay check-in — neutral cell with a diagonal hatch,
   reserving the booked-day lock for genuinely unavailable dates. Scoped to the cell so it
   doesn't also match the same-named legend swatch (.lok-vis-cal-dot.lok-vis-cal-gap). */
.lok-vis-cal-cell .lok-vis-cal-gap {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 6px);
}
/* The same red crossed-eye the day panel shows when the day has no search presence. */
.lok-vis-cal-gap-icon {
    position: relative; z-index: 3; pointer-events: none;
    font-size: 1rem; color: var(--lok-status-danger);
}

.lok-vis-cal-outside {
    background: transparent;
    box-shadow: none;
}
.lok-vis-cal-outside .lok-vis-cal-day { display: none; }

@media (min-width: 576px) {
    .lok-vis-cal-card { padding: 1rem; }
    .lok-vis-cal-grid { gap: 3px; }
    .lok-vis-cal-day { font-size: 0.7rem; }
}

@media (min-width: 768px) {
    .lok-vis-cal-card { padding: 1.25rem; }
    .lok-vis-cal-grid { gap: 4px; }
    .lok-vis-cal-cell { border-radius: 7px; }
    .lok-vis-cal-day { font-size: 0.72rem; top: 3px; left: 5px; }
    .lok-vis-cal-blocked-icon { font-size: 1.1rem; }
    .lok-vis-cal-blocked-label { font-size: 0.65rem; }
    .lok-vis-cal-cell .lok-rank-chip { padding: 0.22rem 0.65rem; font-size: 0.8rem; }
    .lok-vis-cal-cell .lok-rank-hidden { padding: 0.2rem 0.45rem; font-size: 0.68rem; }
    .lok-vis-cal-legend { font-size: 0.78rem; gap: 0.4rem 0.85rem; margin-bottom: 1rem; }
    .lok-vis-cal-dow { font-size: 0.72rem; }
}

@media (hover: hover) and (min-width: 768px) {
    .lok-vis-cal-clickable:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 14px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.04);
        z-index: 5;
    }
    .lok-vis-cal-today.lok-vis-cal-clickable:hover {
        box-shadow: 0 6px 14px rgba(0,0,0,0.18), inset 0 0 0 2px var(--lok-teal);
    }
}

/* Two-column months on wide screens */
@media (min-width: 992px) {
    .lok-vis-cal-months {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 1.5rem;
    }
}

.lok-alerts-tabbar .lok-report-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lok-alerts-tabbar .lok-report-tabs::-webkit-scrollbar {
    display: none;
}
.lok-alerts-tabbar .lok-report-tab {
    text-decoration: none;
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .lok-alerts-tabbar .lok-report-tab {
        flex: 1;
    }
}

/* Section headings */
.lok-alerts-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lok-dark);
    margin: 0 0 0.2rem;
    line-height: 1.3;
}
.lok-alerts-section-sub {
    font-size: 0.85rem;
    color: var(--lok-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Alert groups */
.lok-alerts-group {
    background: #fff;
    border: 1px solid var(--lok-border);
    border-radius: var(--lok-radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
button.lok-alerts-group-head {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: var(--lok-radius-md);
}
button.lok-alerts-group-head:hover {
    background: var(--lok-light);
}
.lok-alerts-group-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
}
.lok-alerts-group--open button.lok-alerts-group-head {
    border-bottom: 1px solid var(--lok-border-light);
    border-radius: var(--lok-radius-md) var(--lok-radius-md) 0 0;
}
.lok-alerts-group-head-text {
    flex: 1;
    min-width: 0;
}
.lok-alerts-group-icon {
    font-size: 28px;
    color: var(--lok-teal);
    flex-shrink: 0;
}
.lok-alerts-group-chevron {
    font-size: 24px;
    color: var(--lok-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.lok-alerts-group--open .lok-alerts-group-chevron {
    transform: rotate(180deg);
    color: var(--lok-teal);
}
.lok-alerts-group-body {
    padding: 0.25rem 1rem 1rem;
}

/* Individual alert row */
.lok-alerts-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--lok-border-light);
}
.lok-alerts-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.lok-alerts-row:first-of-type {
    padding-top: 0;
}
.lok-alerts-row-icon {
    font-size: 22px !important;
    color: var(--lok-text-muted);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.lok-alerts-row-body {
    flex: 1;
    min-width: 0;
}
.lok-alerts-row-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lok-dark);
    line-height: 1.3;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.lok-alerts-firing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #fdecec;
    color: #b71c1c;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.lok-alerts-firing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d32f2f;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.18);
}
.lok-alerts-row-why {
    font-size: 0.83rem;
    color: var(--lok-text-muted);
    line-height: 1.4;
    margin-bottom: 0.55rem;
}
.lok-alerts-row-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.lok-alerts-row-current {
    font-size: 0.83rem;
    color: var(--lok-dark);
}
.lok-alerts-row-threshold {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--lok-text-muted);
    background: var(--lok-light);
    padding: 0.4rem 0.55rem;
    border-radius: var(--lok-radius-sm);
}
.lok-alerts-threshold-label {
    color: var(--lok-text-muted);
}
.lok-alerts-threshold-static {
    font-weight: 700;
    color: var(--lok-dark);
}
.lok-alerts-row-toggle {
    flex-shrink: 0;
    margin-top: 0.15rem;
    position: relative;
}

/* Toggle switch — the locked, visitor-only variant is the last one standing */
.lok-alerts-switch {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.lok-alerts-switch-track {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 24px;
    background: #cfd3d8;
    border-radius: 999px;
    transition: background-color 0.15s;
    vertical-align: middle;
}
.lok-alerts-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    transition: transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Locked is the only variant left — the switch renders permanently on, in muted teal, because it is
   an upsell affordance rather than a control. The --on modifier it used to pair with went with the
   subscriber's interactive switch. */
.lok-alerts-switch--locked {
    text-decoration: none;
}
.lok-alerts-switch--locked .lok-alerts-switch-track {
    background: #b8d8d4;
}
.lok-alerts-switch--locked .lok-alerts-switch-thumb {
    background: #f6f7f8;
    color: var(--lok-text-muted);
    transform: translateX(20px);
}
.lok-alerts-switch--locked .lok-alerts-switch-thumb .material-symbols-outlined {
    font-size: 14px;
    color: var(--lok-text-muted);
}

/* Locked tooltip */
.lok-alerts-locked-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 300px;
    background: var(--lok-dark);
    color: #fff;
    padding: 0.75rem;
    border-radius: var(--lok-radius-sm);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.lok-alerts-locked-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 14px;
    border: 6px solid transparent;
    border-bottom-color: var(--lok-dark);
}
.lok-alerts-locked-tooltip-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.92);
}
.lok-alerts-locked-tooltip-cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lok-teal);
    align-self: flex-end;
}
.lok-alerts-switch--locked:hover .lok-alerts-locked-tooltip,
.lok-alerts-switch--locked:focus .lok-alerts-locked-tooltip,
.lok-alerts-switch--locked:focus-within .lok-alerts-locked-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sticky unlock bar on alerts page (free state only). Mobile = fixed bottom
   so it doesn't fight the mobile sticky tabbar at top. Desktop = sticky top. */
.lok-alerts-unlock-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--lok-teal-light);
    border-top: 1px solid #c3e6e1;
    box-shadow: 0 -6px 14px -8px rgba(0, 0, 0, 0.18);
    flex-wrap: nowrap;
}
.lok-alerts-unlock-bar-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1 1 auto;
    min-width: 0;
}
.lok-alerts-unlock-bar-headline {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lok-dark);
    line-height: 1.25;
}
.lok-alerts-unlock-bar-sub {
    font-size: 0.75rem;
    color: var(--lok-text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lok-alerts-unlock-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.lok-alerts-unlock-bar-btn .material-symbols-outlined {
    font-size: 18px;
}
/* Reserve space at the bottom of the alerts page so fixed bar doesn't
   cover the last row. Scoped to pages that show the bar. */
.lok-report-main:has(.lok-alerts-unlock-bar) {
    padding-bottom: 5.5rem;
}
@media (min-width: 768px) {
    .lok-alerts-unlock-bar {
        position: sticky;
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        z-index: 90;
        margin-bottom: 1rem;
        padding: 0.85rem 1.1rem;
        border: 1px solid #c3e6e1;
        border-radius: var(--lok-radius-md);
        box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.12);
        flex-wrap: wrap;
    }
    .lok-alerts-unlock-bar-text {
        gap: 0.1rem;
        flex: 1 1 240px;
    }
    .lok-alerts-unlock-bar-headline {
        font-size: 1.05rem;
    }
    .lok-alerts-unlock-bar-sub {
        font-size: 0.85rem;
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .lok-report-main:has(.lok-alerts-unlock-bar) {
        padding-bottom: 0;
    }
}


/* Free-tier locked AI fixes: title + impact pill stay, the fix text is a skeleton (never rendered). */
.lok-ap-card--locked { opacity: 0.96; }
.lok-ap-card--locked-click:hover .lok-ap-lock { color: var(--lok-red); }
.lok-ap-lock { margin-left: auto; font-size: 18px; color: var(--lok-gray); }
.lok-ap-locked-fix { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.lok-ap-locked-line { height: 0.7rem; border-radius: 999px; background: linear-gradient(90deg, #eceff1, #f6f8f9); }
.lok-ap-locked-line--short { width: 55%; }

/* Unlock-the-full-plan card (free → deep/paid conversion CTA in the Action Plan). */
.lok-ap-unlock {
    text-align: center;
    padding: 1.5rem 1.25rem;
    margin-top: 0.25rem;
    background: #fff;
    border: 2px solid var(--lok-teal);
    border-radius: var(--lok-radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}
.lok-ap-unlock-icon { font-size: 32px; color: var(--lok-teal); }
.lok-ap-unlock-sub { color: var(--lok-gray); font-size: 0.9rem; max-width: 460px; margin: 0 auto 1rem; }
.lok-ap-unlock-btn { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Listing-quality block lock (free reports): same unlock card, sized to sit inside a score card. */
.lok-ql-lock { margin-top: 1rem; }
.lok-ql-lock-lines { max-width: 320px; margin: 0 auto 0.9rem; }

/* The whole lock card is a click target (same action as the unlock button) — the explicit button
   inside stops propagation so it isn't double-fired. */
.lok-lock-clickable { cursor: pointer; }
.lok-lock-clickable:hover .lok-ap-unlock-icon { color: var(--lok-red); }

.lok-ap-allclear { text-align: center; padding: 2rem 1rem; }
.lok-ap-allclear .material-symbols-outlined { font-size: 42px; color: var(--lok-status-excellent); }
.lok-ap-allclear h3 { font-size: 1.15rem; font-weight: 700; margin: 0.5rem 0 0.4rem; }
.lok-ap-allclear p { color: var(--lok-gray); font-size: 0.9rem; max-width: 520px; margin: 0 auto; }

/* Same problem/fix color grammar as the Photo Analysis concerns & fixes: problem in the dark
   warning tone, the recommended action in green. */
.lok-ap-card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; line-height: 1.35; color: var(--lok-status-warning); text-wrap: balance; }

/* Per-recommendation usefulness rating — owner-only, one compact line that floats at the card's
   bottom-right. Faces are traffic-light coloured (green / amber / red) at all times; the chosen
   one gets a filled ring. Separate from the status buttons: this rates the advice, not the work. */
.lok-ap-feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    margin-left: auto;
}
.lok-ap-feedback-label { font-size: 0.78rem; font-weight: 600; color: var(--lok-gray); }
.lok-ap-feedback-faces { display: inline-flex; align-items: center; gap: 0.3rem; }
.lok-ap-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
    /* Transparent border/background at rest so the row reads as a quiet inline rating, not three
       buttons; the hover/active rules below tint the border + fill once the host engages. */
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.lok-ap-face .material-symbols-outlined { font-size: 18px; }
.lok-ap-face--happy   { color: #15803D; }
.lok-ap-face--neutral { color: #CA8A04; }
.lok-ap-face--sad     { color: #BE123C; }
@media (hover: hover) {
    .lok-ap-face:hover { transform: translateY(-1px); }
    .lok-ap-face--happy:hover   { background: #F0FDF4; border-color: #15803D; }
    .lok-ap-face--neutral:hover { background: #FEFCE8; border-color: #CA8A04; }
    .lok-ap-face--sad:hover     { background: #FFF1F2; border-color: #BE123C; }
}
.lok-ap-face--active { box-shadow: inset 0 0 0 1px currentColor; }
.lok-ap-face--active.lok-ap-face--happy   { background: #F0FDF4; border-color: #15803D; }
.lok-ap-face--active.lok-ap-face--neutral { background: #FEFCE8; border-color: #CA8A04; }
.lok-ap-face--active.lok-ap-face--sad     { background: #FFF1F2; border-color: #BE123C; }

/* Demo-report persistent CTA: full-width bottom bar; floats as a pill on desktop */
.lok-demo-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--lok-red);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}
.lok-demo-cta:hover { color: #fff; filter: brightness(1.06); }
.lok-demo-cta .material-symbols-outlined { font-size: 20px; }
body:has(.lok-demo-cta) { padding-bottom: 56px; }
@media (min-width: 768px) {
    .lok-demo-cta { left: auto; right: 1.5rem; bottom: 1.5rem; border-radius: 999px; padding: 0.8rem 1.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
    body:has(.lok-demo-cta) { padding-bottom: 0; }
}

@media (min-width: 768px) {
    /* Desktop: two deterministic zones — the diagnosis reads on the left, the owner's decision
       buttons live top-right, the usefulness survey bottom-right. Grid (not wrapping flex) so
       placement never depends on how long the AI text happens to be: minmax(0,1fr) stops the main
       column from being measured at its unwrapped text width. */
    .lok-ap-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 1.5rem; padding: 1.05rem 1.35rem 0.9rem 1.45rem; }
}

/* ===== Status-colour utilities =====
   One home for the report's status inks so components express intent with a class instead of
   repeating inline style="color:var(--lok-...)". Pairs with the --lok-status-* / --lok-orange tokens. */
.lok-text-info   { color: var(--lok-status-info); }
.lok-text-danger { color: var(--lok-status-danger); }
.lok-text-orange { color: var(--lok-orange); }

/* Search-rank position colour, by page band (page 1-2 strong, 3-4 mid, 5+ weak). */
.lok-rank--excellent { color: var(--lok-status-excellent); }
.lok-rank--warning   { color: var(--lok-status-warning); }
.lok-rank--danger    { color: var(--lok-status-danger); }

/* Pricing-explanation cards: opportunity (under-priced, orange) vs risk (over-priced, red). */
.lok-card-opportunity { border-color: var(--lok-orange); }
.lok-card-opportunity > .card-body { background: var(--lok-orange-light); }
.lok-card-risk { border-color: var(--lok-status-danger); }
.lok-card-risk > .card-body { background: var(--lok-status-danger-light); }

/* ============================================================================
   Report Home v2 (lok-rh-*) — the hub page + shared v2 chrome. Additive, new
   selectors only; nothing above is modified. Mobile-first, desktop via min-width.
   Family is light-only today, so no dark tokens here (ships with the family effort).
   ============================================================================ */
:root { --lok-rh-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
        --lok-rh-lift: 0 6px 20px rgba(16,24,40,.10);
        /* The report family's canvas. White cards on a white page read as a list of paragraphs;
           the tint is what makes a card a card. */
        --lok-rh-canvas: #F4F6F9; }

/* ---- shell / two-pane ---- */
/* Tint the page itself rather than the pane, so the canvas runs past the last card instead of
   stopping in a white strip, and the rail sits on it too. Asserted here only — the panes inherit.
   Scoped to the report family; TopBar carries its own background. */
body:has(.lok-rh-shell) { background: var(--lok-rh-canvas); }
.lok-rh-shell { display: block; }
.lok-rh-sidebar { display: none; }
.lok-rh-main { min-width: 0; }
.lok-rh-wrap { padding: 1rem 1rem 6rem; }

/* ---- mobile bottom action bar ---- */
.lok-rh-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; height: 64px;
    display: flex; background: rgba(255,255,255,.93); backdrop-filter: blur(10px);
    border-top: 1px solid var(--lok-border-light); }
.lok-rh-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; color: var(--lok-text-light); font-size: .68rem; font-weight: 700; }
.lok-rh-tab .material-symbols-outlined { font-size: 24px; }
.lok-rh-tab.active { color: var(--lok-red); }
.lok-rh-tab--cta { color: var(--lok-red); }

/* ---- verdict ---- */
.lok-rh-verdict { background: #fff; border: 1px solid var(--lok-border); border-left: 4px solid var(--lok-red);
    border-radius: var(--lok-radius-md); padding: 14px; margin: 12px 2px 0; box-shadow: var(--lok-rh-lift);
    font-size: 1.12rem; line-height: 1.42; font-weight: 600; color: var(--lok-dark); letter-spacing: -.01em; }
.lok-rh-verdict--paywall { box-shadow: none; margin-top: 16px; }

/* ---- primary CTA ---- */
.lok-rh-cta { margin: 16px 2px 0; background: var(--lok-red); color: #fff; border-radius: var(--lok-radius-lg);
    padding: 15px 16px; display: flex; align-items: center; gap: .85rem; text-decoration: none;
    box-shadow: 0 8px 22px rgba(193,39,45,.26); }
.lok-rh-cta-lead { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16);
    display: grid; place-items: center; flex: none; }
.lok-rh-cta-lead .material-symbols-outlined { font-size: 26px; }
.lok-rh-cta-txt { flex: 1; min-width: 0; }
.lok-rh-cta-k { display: block; font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }
.lok-rh-cta-s { display: block; font-size: .82rem; opacity: .9; margin-top: 2px; }
.lok-rh-cta-go { font-size: 26px; }
.lok-rh-cta--alt { background: #fff; color: var(--lok-dark); border: 1.5px solid var(--lok-red); box-shadow: none; }
.lok-rh-cta--alt .lok-rh-cta-lead { background: var(--lok-bg-danger); }
.lok-rh-cta--alt .lok-rh-cta-lead .material-symbols-outlined,
.lok-rh-cta--alt .lok-rh-cta-go { color: var(--lok-red); }

/* ---- section eyebrow ---- */
.lok-rh-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 4px 10px; }
.lok-rh-sec-h h2 { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--lok-text-light); }
.lok-rh-sec-h span { font-size: .72rem; color: var(--lok-text-light); }

/* ---- scorecard ---- */
.lok-rh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.lok-rh-tile { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--lok-border);
    border-radius: var(--lok-radius-md); padding: 12px; text-decoration: none; color: inherit; min-height: 72px;
    box-shadow: var(--lok-rh-shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.lok-rh-tile:hover { box-shadow: var(--lok-rh-lift); transform: translateY(-1px); border-color: #cfd4da; }
.lok-rh-tile:active { transform: translateY(0); }
.lok-rh-tile-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.lok-rh-tile-ic .material-symbols-outlined { font-size: 23px; }
.lok-rh-tile-ic--good { background: var(--lok-bg-good); color: var(--lok-status-good); }
.lok-rh-tile-ic--watch { background: var(--lok-bg-average); color: var(--lok-status-average); }
.lok-rh-tile-ic--bad { background: var(--lok-bg-danger); color: var(--lok-status-danger); }
.lok-rh-tile-ic--neutral { background: #eef0f3; color: var(--lok-text-muted); }
.lok-rh-tile-body { flex: 1; min-width: 0; }
.lok-rh-tile-label { display: block; font-size: .72rem; font-weight: 700; color: var(--lok-text-light); letter-spacing: .02em; }
.lok-rh-tile-value { display: block; font-size: 1.04rem; font-weight: 800; color: var(--lok-dark); letter-spacing: -.01em; line-height: 1.2; margin-top: 1px; }
/* Two lines, then ellipsis: the host tile's takeaway carries a verdict AND whose rating it is, and a
   one-line clip would cut the "not your own" half — the half that stops a co-host's 4.88 reading as
   the host's. Short takeaways ("Excellent", "of the next 60 days") render exactly as before. */
.lok-rh-tile-take { font-size: .78rem; color: var(--lok-text-muted); margin-top: 1px; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lok-rh-tile-right { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: none; }
.lok-rh-tile-chev { color: var(--lok-text-light); font-size: 22px; }
.lok-rh-pill { font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: .16rem .5rem; border-radius: 999px; white-space: nowrap; }
.lok-rh-pill--good { background: var(--lok-bg-good); color: var(--lok-status-good); }
.lok-rh-pill--watch { background: var(--lok-bg-average); color: var(--lok-status-average); }
.lok-rh-pill--bad { background: var(--lok-bg-danger); color: var(--lok-status-danger); }
.lok-rh-pill--neutral { background: #eef0f3; color: var(--lok-text-muted); }

/* ---- convert / share ---- */
.lok-rh-convert { margin-top: 22px; background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-lg); padding: 16px; box-shadow: var(--lok-rh-shadow); }
.lok-rh-convert-head { display: flex; gap: .6rem; align-items: center; }
.lok-rh-convert-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--lok-teal-light); color: var(--lok-teal); display: grid; place-items: center; flex: none; }
.lok-rh-convert-ic .material-symbols-outlined { font-size: 23px; }
.lok-rh-convert h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--lok-dark); }
.lok-rh-convert p { margin: .5rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--lok-text-muted); }
.lok-rh-btn-teal { margin-top: 12px; width: 100%; background: var(--lok-teal); color: #fff; border: none; border-radius: var(--lok-radius-md); padding: 12px; font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; text-decoration: none; }
.lok-rh-btn-teal .material-symbols-outlined { font-size: 20px; }
.lok-rh-roi { margin-top: 12px; background: var(--lok-teal-light); border-radius: var(--lok-radius-sm); padding: .7rem .8rem; font-size: .84rem; line-height: 1.45; color: #155e56; }
.lok-rh-guarantee { margin-top: 12px; }
.lok-rh-share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lok-rh-share-btn { display: flex; align-items: center; gap: .5rem; justify-content: center; background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); padding: 11px; font-size: .83rem; font-weight: 700; color: var(--lok-dark); text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; }
.lok-rh-share-btn .material-symbols-outlined { font-size: 19px; color: var(--lok-text-muted); }
.lok-rh-microcopy { margin: 12px 4px 0; font-size: .72rem; color: var(--lok-text-light); text-align: center; line-height: 1.4; }

/* ---- paywall ---- */
.lok-rh-paywall { margin-top: 12px; }
.lok-rh-paywall-card { background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-lg); padding: 22px 18px; text-align: center; box-shadow: var(--lok-rh-lift); position: relative; z-index: 2; }
.lok-rh-paywall-lock { width: 52px; height: 52px; border-radius: 14px; background: var(--lok-bg-danger); color: var(--lok-red); display: grid; place-items: center; margin: 0 auto 12px; }
.lok-rh-paywall-lock .material-symbols-outlined { font-size: 28px; }
.lok-rh-paywall-title { margin: 0 0 .3rem; font-size: 1.14rem; font-weight: 800; }
.lok-rh-paywall-sub { margin: 0 auto 14px; font-size: .86rem; color: var(--lok-text-muted); max-width: 34ch; line-height: 1.5; }
.lok-rh-paywall-btn { width: 100%; }
.lok-rh-paywall-bal { margin: .6rem 0 0; font-size: .76rem; color: var(--lok-text-light); }
.lok-rh-blur { margin-top: 16px; filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; }

/* ---- still-analyzing ---- */
.lok-rh-analyzing { margin-top: 16px; background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-lg); padding: 30px 18px; text-align: center; box-shadow: var(--lok-rh-shadow); }
.lok-rh-analyzing-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--lok-bg-average); border-top-color: var(--lok-status-average); animation: lok-rh-sp 1s linear infinite; margin: 0 auto 14px; }
.lok-rh-analyzing-title { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 800; }
.lok-rh-analyzing-sub { margin: 0 auto; font-size: .86rem; color: var(--lok-text-muted); max-width: 36ch; line-height: 1.5; }
@keyframes lok-rh-sp { to { transform: rotate(360deg); } }

/* ---- skeletons ---- */
.lok-rh-sk { background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 37%, #eef0f3 63%); background-size: 400% 100%; animation: lok-rh-sh 1.3s ease infinite; border-radius: 10px; }
.lok-rh-hero-skeleton { height: 176px; margin: 0 2px 12px; border-radius: var(--lok-radius-lg); }
.lok-rh-tile--sk { pointer-events: none; }
.lok-rh-sk-ic { width: 42px; height: 42px; flex: none; }
.lok-rh-sk-line { display: block; height: 12px; width: 45%; }
.lok-rh-sk-line--wide { width: 72%; margin-top: 8px; }
@keyframes lok-rh-sh { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- desktop two-pane (rail replaces the bottom bar) ---- */
@media (min-width: 768px) {
    .lok-rh-shell { display: grid; grid-template-columns: 240px 1fr; max-width: 1320px; margin: 0 auto; }
    /* Rail sits on the canvas, not on a white panel: the panel's height is content-driven, so it
       ended in a hard white edge partway down the page. The border-right is the separation. */
    .lok-rh-sidebar { display: block; border-right: 1px solid var(--lok-border); padding: 16px 10px; }
    .lok-rh-snav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; }
    .lok-rh-snav-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .6rem; text-decoration: none; color: var(--lok-text-muted); font-weight: 700; font-size: .9rem; }
    .lok-rh-snav-item:hover { background: var(--lok-light); color: var(--lok-dark); }
    .lok-rh-snav-item .material-symbols-outlined { font-size: 21px; }
    .lok-rh-snav-item.active { background: var(--lok-bg-danger); color: var(--lok-red); }
    .lok-rh-tabbar { display: none; }
    .lok-rh-wrap { padding: 1.5rem 1.75rem 5rem; }
    .lok-rh-verdict { font-size: 1.28rem; margin-left: 0; margin-right: 0; }
    .lok-rh-cta, .lok-rh-sec-h { margin-left: 0; margin-right: 0; }
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
    .lok-rh-tile { transition: none; }
    .lok-rh-tile:hover { transform: none; }
    .lok-rh-sk, .lok-rh-analyzing-spin { animation: none; }
}

/* ============================================================================
   Action Plan spoke (lok-rh-plan-*) — reskinned cards, in the v2 language.
   Additive; existing lok-ap-* (the legacy inline plan) is untouched.
   ============================================================================ */
.lok-rh-plan-head { margin: 2px 2px 6px; }
.lok-rh-plan-back { display: inline-flex; align-items: center; gap: .2rem; font-size: .82rem; font-weight: 700; color: var(--lok-text-muted); text-decoration: none; padding: .3rem .1rem; min-height: 44px; }
.lok-rh-plan-back .material-symbols-outlined { font-size: 20px; }
.lok-rh-plan-h1 { margin: .1rem 0 .3rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--lok-dark); }
.lok-rh-plan-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .8rem; color: var(--lok-text-muted); align-items: center; }
.lok-rh-plan-meta-name { font-weight: 700; color: var(--lok-text-dark); }
.lok-rh-plan-meta-snap { display: inline-flex; align-items: center; gap: .25rem; }
.lok-rh-plan-meta-snap .material-symbols-outlined { font-size: 15px; }
.lok-rh-plan-lead { font-size: .92rem; line-height: 1.6; color: #4a5361; margin: 12px 2px 18px; max-width: 66ch; }

/* ---- tone: the report's own health palette, nothing invented ----
   Red while a fix needs work, green once it's done — the same tokens behind the scorecard tiles
   and the .lok-rh-pill--bad/--good badge each card now carries, so the colour always has its word
   sitting next to it. Locked cards stay neutral: the host hasn't been shown their state yet.
   The card owns the vars; its icon tile, left edge and evidence quote inherit them. */
.lok-rh-plan-card--bad,  .lok-rh-plan-seg--bad  { --tone-ink: var(--lok-status-danger); --tone-wash: var(--lok-bg-danger); --tone-line: #F0A9B7; }
.lok-rh-plan-card--good, .lok-rh-plan-seg--good { --tone-ink: var(--lok-status-good);   --tone-wash: var(--lok-bg-good);   --tone-line: #7BD3B4; }
.lok-rh-plan-card--locked { --tone-ink: var(--lok-text-muted); --tone-wash: #eef0f3; --tone-line: #CBD2DA; }

/* verified celebration */
.lok-rh-plan-verified { background: linear-gradient(180deg, #E9FBF4, #D6F5E9); border: 1px solid #A9E2CD; border-radius: var(--lok-radius-md); padding: 12px 14px; margin-bottom: 14px; }
.lok-rh-plan-verified-head { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: #0c3f3a; }
.lok-rh-plan-verified-head .material-symbols-outlined { color: var(--lok-status-good); }
.lok-rh-plan-verified-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.lok-rh-plan-verified-list li { display: flex; gap: .4rem; align-items: flex-start; font-size: .84rem; color: #155e56; }
.lok-rh-plan-verified-list .material-symbols-outlined { font-size: 17px; color: var(--lok-status-good); flex: none; margin-top: 1px; }

/* progress — one slot per item, red→green as the list gets worked: the list in miniature rather
   than a percentage. At zero it reads as "five things to do", not as an empty bar. */
.lok-rh-plan-progress { margin-bottom: 14px; }
.lok-rh-plan-progress-label { font-size: .78rem; font-weight: 700; color: var(--lok-text-muted); margin-bottom: .4rem; }
.lok-rh-plan-progress-track { display: flex; gap: 4px; }
.lok-rh-plan-seg { flex: 1 1 0; min-width: 8px; height: 9px; border-radius: 999px; background: var(--tone-ink); transition: background-color .25s ease; }

/* cards */
.lok-rh-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lok-rh-plan-list > li { margin: 0; }
.lok-rh-plan-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #E4E8EE; border-radius: 14px; box-shadow: var(--lok-rh-shadow); padding: 16px;
    transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease; }
/* The card's left edge carries its tone at rest and deepens on hover — the same hue as the icon
   tile, so one glance says "this one is a pricing fix" before a word is read. */
.lok-rh-plan-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--tone-line, transparent); transition: background-color .14s ease; }
.lok-rh-plan-card:has(.lok-rh-plan-card-main:hover) { box-shadow: var(--lok-rh-lift); border-color: var(--tone-line); transform: translateY(-1px); }
.lok-rh-plan-card:has(.lok-rh-plan-card-main:hover)::before { background: var(--tone-ink); }
.lok-rh-plan-card-main { cursor: pointer; }
.lok-rh-plan-card-main:focus-visible { outline: 2px solid var(--tone-ink, var(--lok-teal)); outline-offset: 3px; border-radius: 8px; }
.lok-rh-plan-card-head { display: flex; align-items: flex-start; gap: .75rem; }
/* Tinted by state, from the same vars as the card's badge — one source, so the tile and the word
   can never disagree. */
.lok-rh-plan-card-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none;
    background: var(--tone-wash, #eef0f3); color: var(--tone-ink, var(--lok-text-muted)); }
.lok-rh-plan-card-ic .material-symbols-outlined { font-size: 22px; }
.lok-rh-plan-card-headtext { flex: 1; min-width: 0; }
.lok-rh-plan-card-state { display: inline-block; margin-bottom: .3rem; }
.lok-rh-plan-card-title { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--lok-dark); line-height: 1.32; letter-spacing: -.015em; }
.lok-rh-plan-card-chev { color: #b6bfcb; font-size: 22px; flex: none; margin-top: 6px; transition: transform .14s ease, color .14s ease; }
.lok-rh-plan-card:has(.lok-rh-plan-card-main:hover) .lok-rh-plan-card-chev { color: var(--tone-ink); transform: translateX(3px); }
.lok-rh-plan-card-lock { color: var(--lok-red); font-size: 22px; flex: none; margin-top: 6px; }
.lok-rh-plan-card-action { margin: .55rem 0 0; font-size: .92rem; line-height: 1.6; color: #4a5361; max-width: 72ch; }
.lok-rh-plan-card--handled { opacity: .72; }
.lok-rh-plan-card--handled .lok-rh-plan-card-title { text-decoration: line-through; text-decoration-color: var(--lok-border); }
.lok-rh-plan-card--reopened { border-color: var(--lok-status-average); }
.lok-rh-plan-reopen { display: flex; gap: .4rem; align-items: flex-start; background: var(--lok-bg-average); color: #7a4a06; border-radius: var(--lok-radius-sm); padding: .5rem .6rem; margin-top: .5rem; font-size: .8rem; line-height: 1.4; }
.lok-rh-plan-reopen .material-symbols-outlined { font-size: 17px; flex: none; }

/* card controls */
.lok-rh-plan-card-actions { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.lok-rh-plan-fix { display: inline-flex; align-items: center; gap: .3rem; background: var(--lok-teal); color: #fff; border: none; border-radius: 999px; padding: .5rem .95rem; font-weight: 700; font-size: .82rem; cursor: pointer; min-height: 40px;
    box-shadow: 0 2px 8px rgba(42,157,143,.28); transition: background-color .14s ease, transform .1s ease; }
.lok-rh-plan-fix:hover { background: #23867B; }
.lok-rh-plan-fix:active { transform: translateY(1px); }
.lok-rh-plan-ignore { background: none; border: none; color: var(--lok-text-muted); font-size: .82rem; font-weight: 600; cursor: pointer; padding: .5rem .8rem; min-height: 40px; border-radius: 999px; transition: background-color .14s ease, color .14s ease; }
.lok-rh-plan-ignore:hover { background: #EDF0F4; color: var(--lok-dark); }
.lok-rh-plan-solved-note { font-size: .8rem; color: var(--lok-text-muted); }

/* card foot (evidence + feedback) */
.lok-rh-plan-card-foot { margin-top: .8rem; padding-top: .65rem; border-top: 1px solid var(--lok-border-light); display: flex; flex-direction: column; gap: .5rem; }
.lok-rh-plan-evidence summary { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--lok-text-muted);
    list-style: none; padding: .3rem .6rem .3rem .35rem; margin-left: -.35rem; border-radius: 999px; transition: background-color .14s ease, color .14s ease; }
.lok-rh-plan-evidence summary::-webkit-details-marker { display: none; }
.lok-rh-plan-evidence summary:hover { background: #EDF0F4; color: var(--lok-dark); }
.lok-rh-plan-evidence summary:focus-visible { outline: 2px solid var(--tone-ink); outline-offset: 2px; }
.lok-rh-plan-evidence summary .material-symbols-outlined { font-size: 18px; transition: transform .16s ease; }
.lok-rh-plan-evidence[open] summary .material-symbols-outlined { transform: rotate(180deg); }
/* The evidence reads as a quote from the analysis, tagged with the tone of the spoke it came from. */
.lok-rh-plan-evidence p { margin: .45rem 0 0; padding: .6rem .75rem; border-left: 3px solid var(--tone-line); background: #F6F8FA; border-radius: 0 8px 8px 0;
    font-size: .85rem; line-height: 1.6; color: #4a5361; max-width: 72ch; }

/* locked */
.lok-rh-plan-card--locked { background: linear-gradient(180deg, #fff, #FAFBFD); }
.lok-rh-plan-card--locked::before { opacity: .5; }
.lok-rh-plan-card--locked-click { cursor: pointer; }
.lok-rh-plan-card--locked-click:hover { border-color: var(--lok-red); box-shadow: var(--lok-rh-lift); transform: translateY(-1px); }
.lok-rh-plan-locklines { margin-top: .8rem; display: flex; flex-direction: column; gap: 6px; }
.lok-rh-plan-locklines span { height: 9px; background: var(--lok-border-light); border-radius: 5px; }
.lok-rh-plan-locklines-short { width: 55%; }

/* unlock block */
.lok-rh-plan-unlock { text-align: center; background: #fff; border: 1px dashed #D3B0B2; border-radius: var(--lok-radius-lg); padding: 22px 18px; margin-top: 12px; box-shadow: var(--lok-rh-shadow); }
.lok-rh-plan-unlock-ic { color: var(--lok-red); font-size: 30px; }
.lok-rh-plan-unlock-title { margin: .4rem 0 .3rem; font-size: 1.05rem; font-weight: 800; }
.lok-rh-plan-unlock-sub { margin: 0 auto 14px; max-width: 44ch; font-size: .86rem; color: var(--lok-text-muted); line-height: 1.5; }

/* reanalyze — the culminating primary action */
.lok-rh-plan-reanalyze { display: inline-flex; width: 100%; justify-content: center; align-items: center; gap: .45rem; background: var(--lok-red); color: #fff; border: none; border-radius: var(--lok-radius-md); padding: 14px; font-weight: 800; font-size: .98rem; cursor: pointer; text-decoration: none; box-shadow: 0 8px 22px rgba(193,39,45,.24);
    transition: background-color .14s ease, box-shadow .14s ease, transform .1s ease; }
.lok-rh-plan-reanalyze .material-symbols-outlined { font-size: 20px; }
.lok-rh-plan-reanalyze:hover:not(:disabled) { background: var(--lok-red-hover); box-shadow: 0 10px 26px rgba(193,39,45,.32); }
.lok-rh-plan-reanalyze:active:not(:disabled) { transform: translateY(1px); }
.lok-rh-plan-reanalyze:disabled { background: #e9ecef; color: #adb5bd; cursor: not-allowed; box-shadow: none; }
/* The loop closes here, so the block is a destination rather than a trailing paragraph. */
.lok-rh-plan-finish { margin-top: 22px; text-align: center; background: #fff; border: 1px solid #E4E8EE; border-radius: var(--lok-radius-lg); padding: 20px 16px; box-shadow: var(--lok-rh-shadow); }
.lok-rh-plan-finish-hint { font-size: .9rem; color: #4a5361; margin-bottom: 14px; line-height: 1.55; }
.lok-rh-plan-finish-hint strong { color: var(--lok-dark); }
.lok-rh-plan-finish-sub { margin-top: 12px; font-size: .8rem; color: var(--lok-text-light); line-height: 1.5; }
.lok-rh-plan-finish-sub a { color: var(--lok-red); font-weight: 700; }

/* ignored drawer */
.lok-rh-plan-ignored { margin-top: 16px; font-size: .85rem; }
.lok-rh-plan-ignored summary { cursor: pointer; font-weight: 700; color: var(--lok-text-muted); }
.lok-rh-plan-ignored ul { margin: .5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }

/* findings fallback */
.lok-rh-plan-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lok-rh-plan-finding { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: #fff; border: 1px solid #E4E8EE; border-radius: var(--lok-radius-md); padding: 12px; cursor: pointer; box-shadow: var(--lok-rh-shadow);
    transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease; }
.lok-rh-plan-finding:hover { box-shadow: var(--lok-rh-lift); border-color: #cfd4da; transform: translateY(-1px); }
.lok-rh-plan-finding-num { width: 26px; height: 26px; border-radius: 50%; background: var(--lok-bg-average); color: var(--lok-status-average); font-weight: 800; font-size: .8rem; display: grid; place-items: center; flex: none; }
.lok-rh-plan-finding-text { flex: 1; font-size: .9rem; font-weight: 600; color: var(--lok-dark); }
.lok-rh-plan-finding-impact { font-size: .8rem; font-weight: 700; color: var(--lok-text-muted); white-space: nowrap; }
.lok-rh-plan-finding-chev { color: var(--lok-text-light); font-size: 20px; }

/* paywall-on-overview */
.lok-rh-plan-paywall { background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-lg); padding: 26px 18px; text-align: center; box-shadow: var(--lok-rh-shadow); }

/* skeleton */
.lok-rh-plan-head-sk { height: 64px; margin: 2px 2px 12px; border-radius: 12px; }
.lok-rh-plan-card--sk { display: flex; gap: .8rem; align-items: center; pointer-events: none; }

@media (min-width: 768px) {
    .lok-rh-plan-card-foot { flex-direction: row; align-items: center; justify-content: space-between; }
    .lok-rh-plan-reanalyze { width: auto; min-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .lok-rh-plan-seg, .lok-rh-plan-card, .lok-rh-plan-card::before, .lok-rh-plan-card-chev,
    .lok-rh-plan-fix, .lok-rh-plan-ignore, .lok-rh-plan-reanalyze, .lok-rh-plan-finding,
    .lok-rh-plan-evidence summary, .lok-rh-plan-evidence summary .material-symbols-outlined { transition: none; }
    .lok-rh-plan-card:has(.lok-rh-plan-card-main:hover),
    .lok-rh-plan-card--locked-click:hover, .lok-rh-plan-finding:hover { transform: none; }
    .lok-rh-plan-card:has(.lok-rh-plan-card-main:hover) .lok-rh-plan-card-chev { transform: none; }
}

/* ============================================================================
   Pricing & Market spoke (lok-rh-price-*) — v2 money headline, flagged nights,
   and reskinned alignment / occupancy / price-position cards. The calendar grid
   and area charts are reused verbatim. Additive; existing selectors untouched.
   ============================================================================ */
.lok-rh-price-headline { text-align: center; background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-lg); padding: 22px 18px; margin: 8px 2px 0; box-shadow: var(--lok-rh-shadow); }
.lok-rh-price-headline-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lok-text-light); }
.lok-rh-price-headline-fig { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--lok-red); margin: .25rem 0; line-height: 1.1; }
.lok-rh-price-headline-fig--ok { color: var(--lok-status-good); font-size: 1.55rem; }
.lok-rh-price-headline-fig--warn { color: var(--lok-status-average); }
.lok-rh-price-headline-sub { margin: 0 auto; max-width: 46ch; font-size: .86rem; color: var(--lok-text-muted); line-height: 1.5; }
.lok-rh-price-headline-sk { height: 120px; margin: 8px 2px 0; border-radius: var(--lok-radius-lg); }

.lok-rh-price-sec { scroll-margin-top: 76px; margin-top: 20px; }
.lok-rh-price-sec-title { display: flex; align-items: center; gap: .4rem; margin: 0 2px .5rem; font-size: .95rem; font-weight: 800; color: var(--lok-dark); letter-spacing: -.01em; }
.lok-rh-price-sec-title .material-symbols-outlined { font-size: 20px; color: var(--lok-text-muted); }
.lok-rh-price-sec-sub { margin: 0 2px .7rem; font-size: .82rem; color: var(--lok-text-muted); line-height: 1.5; }

/* flagged nights */
.lok-rh-price-flaggroup { background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); box-shadow: var(--lok-rh-shadow); padding: 12px 14px; margin-bottom: 10px; }
.lok-rh-price-flaghead { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 800; color: var(--lok-dark); margin-bottom: .4rem; }
.lok-rh-price-flaghead .material-symbols-outlined { font-size: 18px; }
.lok-rh-price-flaglist { list-style: none; margin: 0; padding: 0; }
.lok-rh-price-flagrow { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--lok-border-light); }
.lok-rh-price-flagrow:first-child { border-top: none; }
.lok-rh-price-flagdate { flex: 1; font-size: .85rem; font-weight: 600; color: var(--lok-dark); }
.lok-rh-price-flagprices { display: inline-flex; align-items: center; gap: .35rem; }
.lok-rh-price-flagnow { font-size: .85rem; color: var(--lok-text-muted); }
.lok-rh-price-flagarrow { color: var(--lok-text-light); }
.lok-rh-price-flagrec { font-size: .9rem; font-weight: 800; color: var(--lok-dark); }
.lok-rh-price-flaglock { font-size: 16px; color: var(--lok-text-light); }
.lok-rh-price-flagdiff { font-size: .8rem; font-weight: 800; min-width: 58px; text-align: right; }
.lok-rh-price-flagdiff--raise { color: var(--lok-status-good); }
.lok-rh-price-flagdiff--lower { color: var(--lok-status-average); }

/* reskinned cards */
.lok-rh-price-card { background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); box-shadow: var(--lok-rh-shadow); padding: 14px; }
.lok-rh-price-card-head { display: flex; align-items: center; gap: .7rem; }
.lok-rh-price-card-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.lok-rh-price-card-ic .material-symbols-outlined { font-size: 22px; }
.lok-rh-price-card-ic--good { background: var(--lok-bg-good); color: var(--lok-status-good); }
.lok-rh-price-card-ic--watch { background: var(--lok-bg-average); color: var(--lok-status-average); }
.lok-rh-price-card-ic--bad { background: var(--lok-bg-danger); color: var(--lok-status-danger); }
/* No comparison available, so no verdict — the icon must not imply one. */
.lok-rh-price-card-ic--neutral { background: var(--lok-border-light); color: var(--lok-text-muted); }
.lok-rh-price-card-headtext { flex: 1; min-width: 0; }
.lok-rh-price-card-label { display: block; font-size: .72rem; font-weight: 700; color: var(--lok-text-light); }
.lok-rh-price-card-value { display: block; font-size: 1.02rem; font-weight: 800; color: var(--lok-dark); letter-spacing: -.01em; }
/* Cards whose value slot is a VERDICT word (Healthy / Needs work / Budget) carry the tier's colour,
   from the same `tier` the icon tile above is keyed off — one decision, two places it shows. Cards
   whose value is a measurement (a rating, a page number) stay dark: a number is not a verdict. */
.lok-rh-price-card-value--good { color: var(--lok-status-good); }
.lok-rh-price-card-value--watch { color: var(--lok-status-average); }
.lok-rh-price-card-value--bad { color: var(--lok-status-danger); }
/* Nothing to grade against, so no colour to give — see .lok-rh-price-card-ic--neutral. */
.lok-rh-price-card-value--neutral { color: var(--lok-dark); }
.lok-rh-price-card-explain { margin: .6rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--lok-text-muted); }

.lok-rh-price-metrics { margin-top: .8rem; display: flex; gap: .5rem; }
.lok-rh-price-metric { flex: 1; background: var(--lok-light); border-radius: var(--lok-radius-sm); padding: .6rem; text-align: center; }
.lok-rh-price-metric-k { display: block; font-size: .68rem; font-weight: 700; color: var(--lok-text-light); }
.lok-rh-price-metric-v { display: block; font-size: 1rem; font-weight: 800; color: var(--lok-dark); margin-top: .15rem; }

.lok-rh-price-callout { margin-top: .8rem; display: flex; gap: .5rem; align-items: flex-start; border-radius: var(--lok-radius-sm); padding: .6rem .7rem; font-size: .84rem; line-height: 1.45; }
.lok-rh-price-callout .material-symbols-outlined { font-size: 18px; flex: none; margin-top: 1px; }
.lok-rh-price-callout--good { background: var(--lok-bg-good); color: #0c3f3a; }
.lok-rh-price-callout--watch { background: var(--lok-bg-average); color: #7a4a06; }
.lok-rh-price-note { margin: .7rem 0 0; font-size: .78rem; line-height: 1.45; color: #155e56; background: var(--lok-teal-light); border-radius: var(--lok-radius-sm); padding: .5rem .6rem; }

/* Pricing-alignment demand bands (PriceAlignmentV2): area demand over the host's own price, one pair
   of bars per band, busiest band first. Both bars share a track width, and the price bar is anchored
   to the demand bar's peak (see the component), so the pair is readable in both directions: equal
   length within a band means the price tracks demand in proportion, and flat price bars under
   shrinking demand bars down the card mean it doesn't move at all. The label and value columns are
   fixed so the three bands' bars start and end on the same lines — without that the eye can't
   compare bar lengths, which is the only thing this card asks it to do. */
.lok-rh-demand { margin-top: .9rem; display: flex; flex-direction: column; gap: .8rem; }
.lok-rh-demand-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.lok-rh-demand-name { font-size: .86rem; font-weight: 700; color: var(--lok-dark); }
.lok-rh-demand-nights { margin-left: auto; font-size: .74rem; color: var(--lok-text-light); }
.lok-rh-demand-row { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.lok-rh-demand-row + .lok-rh-demand-row { margin-top: .3rem; }
.lok-rh-demand-k { flex: none; width: 92px; color: var(--lok-text-muted); }
.lok-rh-demand-track { flex: 1; min-width: 0; height: 10px; border-radius: 999px; background: var(--lok-border-light); overflow: hidden; }
/* Fill colour is inline, not a class: occupancy takes the calendar's own per-value teal
   (ReportCalendarHelper.GetFillColor), so a band reads the same shade as the cells behind it. */
.lok-rh-demand-fill { display: block; height: 100%; border-radius: 999px; }
.lok-rh-demand-v { flex: none; width: 58px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Each figure is inked to its own bar, and to the calendar: the % the same --lok-status-info
   .lok-cell-occ and the day panel's "Occupancy forecast" carry, the nightly price the same
   --lok-orange .lok-cell-min-price gives it in every calendar cell. */
.lok-rh-demand-v--occ { color: var(--lok-status-info); }
.lok-rh-demand-v--price { color: var(--lok-orange); }

.lok-rh-price-cta { margin-top: .8rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--lok-teal-light); color: var(--lok-teal); border: 1px solid var(--lok-teal); border-radius: var(--lok-radius-md); padding: .7rem; font-weight: 700; font-size: .85rem; cursor: pointer; }
.lok-rh-price-cta .material-symbols-outlined { font-size: 18px; }

.lok-rh-price-empty { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); padding: 16px; color: var(--lok-text-muted); }
.lok-rh-price-empty .material-symbols-outlined { font-size: 26px; color: var(--lok-text-light); flex: none; }
.lok-rh-price-empty strong { display: block; color: var(--lok-dark); font-size: .9rem; }
.lok-rh-price-empty span { font-size: .82rem; }

/* Visibility spoke (lok-rh-vis-*) — reuses the price-card / metrics / callout styles; only the
   per-metric subtext is new. Additive; existing selectors untouched. */
.lok-rh-vis-metric-sub { display: block; font-size: .64rem; color: var(--lok-text-light); margin-top: .1rem; line-height: 1.2; }

/* ============================================================================
   Listing Quality spoke (lok-rh-qual-*) — reskinned score header (reuses the
   price-card head) + six per-aspect accordion cards. Bodies reuse the existing
   ChipList. Additive; existing selectors untouched.
   ============================================================================ */
.lok-rh-qual-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lok-rh-qual-current { background: var(--lok-light); border-radius: var(--lok-radius-sm); padding: .5rem .6rem; margin-bottom: .6rem; }
.lok-rh-qual-current-k { display: block; font-size: .68rem; font-weight: 700; color: var(--lok-text-light); text-transform: uppercase; letter-spacing: .04em; }
.lok-rh-qual-current-v { display: block; font-size: .88rem; color: var(--lok-dark); margin-top: .1rem; }
.lok-rh-qual-bool { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--lok-dark); padding: .25rem 0; }
.lok-rh-qual-bool .material-symbols-outlined { font-size: 20px; }


/* Reputation spoke (lok-rh-rep-*) — reskinned rating + review-sentiment cards reuse the price-card /
   metrics styles + the existing theme chips (lok-analysis-chip) and quote (lok-analysis-quote). */
.lok-rh-rep-star { color: var(--lok-star); font-size: .9em; }
.lok-rh-rep-star--muted { color: var(--lok-text-light); }
.lok-rh-rep-trend { display: inline-flex; align-items: center; gap: .2rem; font-size: .95rem; }
.lok-rh-rep-trend .material-symbols-outlined { font-size: 20px; }
.lok-rh-rep-themes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.lok-rh-rep-ok { margin-top: .8rem; }
.lok-rh-rep-flagged { margin-top: .9rem; }
.lok-rh-rep-flagged-title { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 800; color: var(--lok-dark); margin-bottom: .5rem; }
.lok-rh-rep-flagged-title .material-symbols-outlined { font-size: 18px; color: var(--lok-status-average); }

/* ==========================================================================
   Listing Quality v4 audit (lok-q4-*) — /report/{id}/quality.
   Verdict card with tappable area map chips, always-open severity sections
   (tier rail + Needs work/Watch pill), evidence-first fix rows with badged
   photo thumbnails, one Working well card. Mobile-first; lok-rh shell.
   ========================================================================== */
.lok-q4-verdict { background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); box-shadow: var(--lok-rh-shadow); padding: 16px; }
.lok-q4-verdict-line { margin: .45rem 0 0; font-size: .95rem; font-weight: 700; color: var(--lok-dark); line-height: 1.4; }
.lok-q4-map { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.lok-q4-chip { display: inline-flex; align-items: center; gap: .4rem; border: none; border-radius: 999px; padding: .6rem .8rem; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--lok-dark); background: #eef0f3; }
.lok-q4-chip:hover { filter: brightness(.96); }
.lok-q4-chip--bad { background: var(--lok-bg-danger); }
.lok-q4-chip--watch { background: var(--lok-bg-average); }
.lok-q4-chip-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--lok-text-light); }
.lok-q4-chip--bad .lok-q4-chip-dot { background: var(--lok-status-danger); }
.lok-q4-chip--watch .lok-q4-chip-dot { background: var(--lok-status-average); }
.lok-q4-chip-n { font-weight: 800; opacity: .75; }
.lok-q4-chip-ok { font-size: 16px; color: var(--lok-status-good); }
.lok-q4-secs { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.lok-q4-sec { background: #fff; border: 1px solid var(--lok-border); border-left: 4px solid transparent; border-radius: var(--lok-radius-md); box-shadow: var(--lok-rh-shadow); padding: 14px 16px; scroll-margin-top: 76px; }
.lok-q4-sec--bad { border-left-color: var(--lok-status-danger); }
.lok-q4-sec--watch { border-left-color: var(--lok-status-average); }
.lok-q4-sec-head { display: flex; align-items: center; gap: .6rem; }
.lok-q4-sec-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.lok-q4-sec-ic .material-symbols-outlined { font-size: 21px; }
.lok-q4-sec-ic--watch { background: var(--lok-bg-average); color: var(--lok-status-average); }
.lok-q4-sec-ic--bad { background: var(--lok-bg-danger); color: var(--lok-status-danger); }
.lok-q4-sec-ic--good { background: var(--lok-bg-good); color: var(--lok-status-good); }
.lok-q4-sec-title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: 800; color: var(--lok-dark); }
.lok-q4-meta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--lok-text-muted); margin-top: .6rem; }
.lok-q4-meta .material-symbols-outlined { font-size: 16px; flex: none; }
.lok-q4-fixes { list-style: none; margin: .35rem 0 0; padding: 0; }
.lok-q4-fix { padding: .85rem 0; border-top: 1px solid var(--lok-border-light); }
.lok-q4-fix:first-child { border-top: none; }
.lok-q4-fix-action { font-size: .9rem; font-weight: 600; color: var(--lok-dark); line-height: 1.45; }
.lok-q4-fix-why { margin-top: .3rem; font-size: .8rem; line-height: 1.5; color: var(--lok-text-muted); }
.lok-q4-fix-photos { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lok-q4-fix-photos a, .lok-q4-fix-photos .lok-q4-ph { position: relative; flex: none; }
.lok-q4-fix-photos img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--lok-radius-sm); display: block; }
.lok-q4-photo-n { position: absolute; left: .3rem; bottom: .3rem; background: rgba(17,24,39,.72); color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; padding: .18rem .32rem; border-radius: 4px; pointer-events: none; }
.lok-q4-fix-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.lok-q4-proposal { display: flex; align-items: flex-start; gap: .5rem; background: var(--lok-teal-light); border-radius: var(--lok-radius-sm); padding: .55rem .7rem; }
.lok-q4-proposal-c { flex: 1; min-width: 0; }
.lok-q4-proposal-t { font-size: .9rem; font-weight: 700; color: var(--lok-dark); }
.lok-q4-proposal-j { font-size: .78rem; color: var(--lok-text-muted); margin-top: .2rem; line-height: 1.45; }
.lok-q4-copy { margin-left: auto; flex: none; width: 40px; height: 40px; border: none; background: none; border-radius: var(--lok-radius-sm); display: grid; place-items: center; color: var(--lok-text-light); cursor: pointer; }
.lok-q4-copy:hover { background: rgba(0,0,0,.05); color: var(--lok-dark); }
.lok-q4-prose { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.lok-q4-prose p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--lok-text-dark); }
.lok-q4-prose strong { color: var(--lok-dark); }
.lok-q4-assess-toggle { display: inline-flex; align-items: center; gap: .2rem; margin-top: .55rem; border: none; background: none; padding: .35rem 0; font-size: .8rem; font-weight: 700; color: var(--lok-text-muted); cursor: pointer; min-height: 44px; }
.lok-q4-assess-toggle .material-symbols-outlined { font-size: 18px; transition: transform .18s ease; }
.lok-q4-assess-toggle[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.lok-q4-assess { border-top: 1px solid var(--lok-border-light); padding-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }
/* Dismissed fixes: the "you waved this away" note inside a section whose rows are all dismissed,
   and the page-foot disclosure that lists them with a way back. */
.lok-q4-alldismissed { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; font-size: .82rem; color: var(--lok-text-muted); }
.lok-q4-alldismissed .material-symbols-outlined { font-size: 18px; color: var(--lok-text-light); }
.lok-q4-dismissed { margin-top: 16px; background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); box-shadow: var(--lok-rh-shadow); padding: 10px 16px; }
.lok-q4-dismissed > summary { font-size: .82rem; font-weight: 700; color: var(--lok-text-muted); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.lok-q4-dismissed-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lok-q4-dismissed-list li { display: flex; align-items: flex-start; gap: .6rem; border-top: 1px solid var(--lok-border-light); padding-top: .5rem; }
.lok-q4-dismissed-list li:first-child { border-top: none; padding-top: 0; }
.lok-q4-dismissed-t { flex: 1; min-width: 0; font-size: .82rem; color: var(--lok-text-muted); }
.lok-q4-dismissed-undo { display: inline-flex; align-items: center; gap: .2rem; flex: none; border: none; background: none; padding: .2rem .1rem; font-size: .78rem; font-weight: 700; color: var(--lok-teal); cursor: pointer; }
.lok-q4-dismissed-undo .material-symbols-outlined { font-size: 16px; }
.lok-q4-divider { margin: 20px 0 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--lok-text-light); display: flex; align-items: center; gap: .45rem; }
.lok-q4-divider .material-symbols-outlined { font-size: 18px; color: var(--lok-status-good); }
.lok-q4-ok { background: #fff; border: 1px solid var(--lok-border); border-radius: var(--lok-radius-md); box-shadow: var(--lok-rh-shadow); overflow: hidden; }
.lok-q4-ok-row { border-top: 1px solid var(--lok-border-light); scroll-margin-top: 76px; }
.lok-q4-ok-row:first-child { border-top: none; }
.lok-q4-ok-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.lok-q4-ok-head { display: flex; align-items: center; gap: .6rem; width: 100%; background: none; border: none; padding: 12px 16px; cursor: pointer; text-align: left; min-height: 44px; }
.lok-q4-ok-head--static { cursor: default; }
.lok-q4-ok-check { color: var(--lok-status-good); font-size: 20px; flex: none; }
.lok-q4-ok-tt { flex: 1; min-width: 0; }
.lok-q4-ok-name { font-size: .9rem; font-weight: 800; color: var(--lok-dark); }
.lok-q4-ok-sub { font-size: .8rem; color: var(--lok-text-muted); display: block; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lok-q4-ok-chev { color: var(--lok-text-light); font-size: 22px; flex: none; transition: transform .18s ease; }
.lok-q4-ok-row--open .lok-q4-ok-chev { transform: rotate(180deg); }
.lok-q4-ok-body { padding: 0 16px 12px 44px; }
.lok-q4-sec-sk { height: 120px; border-radius: var(--lok-radius-md); }
.lok-ap-feedback--compact { justify-content: flex-end; margin-top: .15rem; }
.lok-ap-feedback--compact .lok-ap-face { opacity: .5; }
.lok-ap-feedback--compact .lok-ap-face:hover, .lok-ap-feedback--compact .lok-ap-face--active { opacity: 1; }
@media (min-width: 768px) {
    .lok-q4-fix-photos { flex-wrap: wrap; overflow: visible; }
    .lok-q4-fix-photos img { width: 120px; height: 90px; }
}
@media (min-width: 1024px) {
    .lok-q4-wrap { max-width: 780px; }
}
@media (prefers-reduced-motion: reduce) { .lok-q4-assess-toggle .material-symbols-outlined, .lok-q4-ok-chev { transition: none; } }