/* ============================================
   SURF CITY HEART — GUIDEBOOK STYLES
   Mobile-first, ocean-themed design
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;

    /* === HEART VACATION BRAND PALETTE — the five canonical colours ===
       Source of truth: brand/brand.json + brand/BRAND-GUIDE.md, read out of the
       designer's own SVGs. Applies to ALL houses (John, 2026-08-17). Do not edit here. */
    --brand-blue: #2C5D6D;
    --brand-green: #46624F;
    --brand-orange: #D77A2E;
    --brand-red: #BC5945;
    --brand-yellow: #E7C270;

    /* === Typography ===
       The three brand faces (Dincy Blur / Avenir / Gotham Condensed) are Canva-only and
       cannot be embedded. Closest web substitutes, chosen 2026-08-17:
         Dincy Blur       -> Prata            (condensed, high-contrast display serif)
         Avenir           -> Nunito Sans      (humanist geometric, Avenir's closest free twin)
         Gotham Condensed -> Barlow Condensed (geometric condensed)
       DEVIATION, on purpose: the brand board puts BODY text in Gotham Condensed. Condensed
       type at 13.5px on a phone is a legibility loss on a document guests read to find a
       door code, so body stays in the Avenir substitute and the condensed face is used for
       labels, badges and eyebrow text where it reads as brand rather than as a paragraph. */
    --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Prata', Georgia, 'Times New Roman', serif;
    --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;

    /* === Derived surface + text tokens ===
       Every value is ONE brand colour mixed with white or black, so the whole sheet traces
       back to the five above. The legacy ocean/sand/coral NAMES are kept deliberately:
       ~1000 lines of rules and six index.html files reference them, so re-pointing the
       names converts the entire guidebook in one move instead of a thousand edits.

       WARM GROUND, BLUE CHROME. Measured off Aurora Retreat's own Airbnb photography
       (2026-08-17): the listing reads warm — caramel leather, wood floors, terracotta
       curtains and orange loungers dominate the saturated pixels, with the pool's teal as
       the accent. So the page ground is sand rather than the old cool grey-blue, and the
       brand blue does the chrome and link work, echoing the water. */
    --ocean-deep: #2C5D6D;     /* brand blue */
    --ocean-mid: #4C808F;      /* blue + 14% white */
    --ocean-light: #9AB1B9;    /* blue + 52% white */
    --ocean-pale: #DDE5E8;     /* blue + 84% white */
    --ocean-wash: #EFF4F5;     /* blue + 93% white */
    --sand-warm: #F4E4BF;      /* yellow + 55% white */
    --sand-light: #FCF8EE;     /* yellow + 88% white */
    --coral: #BC5945;          /* brand red */
    --coral-soft: #DAA499;     /* red + 45% white */
    --sunset: #D77A2E;         /* brand orange */
    --driftwood: #46624F;      /* brand green */
    --night: #1A363F;          /* blue + 42% black */
    --text-primary: #1A363F;   /* 11.6:1 on --bg */
    --text-secondary: #275260; /* 7.7:1 on --bg */
    --text-muted: #3F6A78;     /* 5.5:1 on --bg — replaces #7e97a7, which was 2.4:1, under AA */
    --white: #ffffff;          /* INK on a coloured fill. Stays pure white in dark mode. */

    /* A filled accent surface (the primary button, the promo card, the host avatar) needs
       BOTH ends of the pair themed. Keeping a white ink over a fill that goes light in dark
       mode is how the bottom CTA ended up at 2.0:1 — and the promo gradient's pale end was
       already at 2.2:1 in LIGHT mode before this pass. Ink and fill move together now. */
    --accent-from: #2C5D6D;    /* white ink: 7.3:1 */
    --accent-to: #37697A;      /* white ink: 6.1:1 — the gradient no longer fades to #9AB1B9 */
    --accent-ink: #ffffff;
    --surface: #ffffff;        /* a raised SURFACE (header, cards, popups). Goes dark below. */
    --bg: #FAF6EF;             /* warm sand ground, from the listing photography */
    --card-bg: #ffffff;
    --card-shadow: 0 2px 12px rgba(26, 54, 63, 0.08);
    --card-shadow-hover: 0 4px 20px rgba(26, 54, 63, 0.12);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --transition: 0.2s ease;
    --header-height: 56px;
    --tab-height: 72px;
    --bottom-height: 56px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    padding-top: calc(var(--header-height) + var(--tab-height));
    padding-bottom: var(--bottom-height);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: var(--ocean-deep);
    text-decoration: none;
}



/* --- Header --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--surface);
    border-bottom: 1px solid rgba(28, 45, 58, 0.08);
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-inner {
    max-width: 640px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
}

.header-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ocean-wash);
    color: var(--ocean-deep);
    transition: var(--transition);
}

.header-contact:hover {
    background: var(--ocean-pale);
}

/* --- Tab Navigation --- */
.tab-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: var(--tab-height);
    background: var(--surface);
    border-bottom: 1px solid rgba(28, 45, 58, 0.06);
    z-index: 99;
}

.tab-nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 0 2px;
}

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 2px;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
    position: relative;
    min-width: 0;
    flex: 1;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-family: inherit;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--ocean-deep);
    border-radius: 3px 3px 0 0;
    transition: width 0.25s ease;
}

.tab-btn.active {
    color: var(--ocean-deep);
}

.tab-btn.active::after {
    width: 60%;
}

.tab-icon {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.tab-icon svg {
    display: block;
    opacity: 0.6;
    transition: var(--transition);
}

.tab-btn.active .tab-icon svg {
    opacity: 1;
}

.tab-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* --- Main Content --- */
.main-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
}

/* --- Tab Panels --- */
.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Hero --- */
.hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    height: 260px;
    margin-bottom: 16px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.hero:hover .hero-bg {
    transform: scale(1.03);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(28, 45, 58, 0.85) 0%,
        rgba(28, 45, 58, 0.3) 50%,
        rgba(28, 45, 58, 0.1) 100%
    );
}

.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 20px;
    color: var(--accent-ink);
}

.hero-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-subtitle {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: 12px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-ink);
}

/* --- Cards --- */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.card-section-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
}

/* --- Host Card --- */
.host-card {
    background: linear-gradient(135deg, var(--ocean-wash) 0%, var(--surface) 100%);
}

.host-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.host-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.host-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.host-tag {
    font-size: 12px;
    color: var(--ocean-deep);
    font-weight: 500;
}

.host-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.host-contact {
    display: flex;
    gap: 8px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid rgba(28, 45, 58, 0.12);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: var(--transition);
}

.contact-btn:hover {
    background: var(--ocean-wash);
    border-color: var(--ocean-light);
}

/* --- Quick Grid --- */
.quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.quick-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.quick-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
}

.quick-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.quick-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.quick-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-detail {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Highlights --- */
.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.highlight-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.highlight-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.highlight-item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.highlight-item p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* --- Promo Card --- */
.promo-card {
    background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
    color: var(--accent-ink);
    position: relative;
    overflow: hidden;
}

.promo-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.promo-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,255,255,0.14);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.promo-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
}

.promo-text {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 16px;
    line-height: 1.5;
}

.perks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.perk {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--surface);
    color: var(--ocean-deep);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    transition: var(--transition);
    width: 100%;
    justify-content: center;
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* --- Panel Header --- */
.panel-header {
    margin-bottom: 16px;
}

.panel-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.panel-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

/* --- Info Items --- */
.info-item {
    display: flex;
    gap: 14px;
}

.info-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-sm);
}

.info-content h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.info-main {
    font-size: 16px;
    font-weight: 600;
    color: var(--ocean-deep);
    margin-bottom: 4px;
}

.info-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--ocean-wash);
    color: var(--ocean-deep);
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background: var(--ocean-pale);
}

/* --- Rules --- */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rule-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rule-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.rule-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.rule-item p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* --- Info Detail Box --- */
.info-detail-box {
    background: var(--ocean-wash);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.info-detail-box p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
}

.info-detail-box ul {
    padding-left: 20px;
}

.info-detail-box li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 6px;
}

/* --- Amenities Grid --- */
.amenities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--ocean-wash);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: var(--transition);
}

.amenity-chip:hover {
    background: var(--ocean-pale);
}

/* --- Tips --- */
.tips-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tip-item {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 12px 14px;
    background: var(--sand-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--sunset);
}

.tip-item strong {
    color: var(--text-primary);
}

/* --- Checklist --- */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checklist-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.check-circle {
    width: 30px;
    height: 30px;
    border: 2px solid var(--ocean-deep);
    border-radius: 50%;
    background: transparent;
    color: var(--ocean-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.checklist-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.checklist-item p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- Thank You Card --- */
.thank-you-card {
    text-align: center;
    background: linear-gradient(135deg, var(--sand-light) 0%, var(--ocean-wash) 100%);
}

.thank-you-emoji {
    font-size: 40px;
    margin-bottom: 8px;
}

.thank-you-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.thank-you-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Map/List Toggles --- */
.view-toggle {
    display: flex;
    background: rgba(28, 45, 58, 0.05);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 20px;
}

.view-toggle-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.view-toggle-btn.toggle-active {
    background: var(--surface);
    color: var(--ocean-deep);
    box-shadow: 0 2px 8px rgba(28, 45, 58, 0.1);
}

/* --- Leaflet Map --- */
.leaflet-map {
    height: 480px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
    z-index: 10;
}

/* --- Place Cards --- */
.place-card {
    margin-bottom: 16px;
    padding: 16px;
}

.place-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.place-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ocean-wash);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.place-header-text {
    flex: 1;
}

.place-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.place-distance {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ocean-deep);
    background: var(--ocean-wash);
    padding: 2px 8px;
    border-radius: 12px;
}

.place-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.place-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.place-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}

.action-call {
    background: var(--ocean-wash);
    color: var(--ocean-deep);
}

.action-map {
    background: var(--sand-warm);
    color: var(--driftwood);
}

.action-btn:hover {
    filter: brightness(0.95);
}

/* --- Section Labels --- */
.section-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ocean-wash);
}

/* --- Bottom CTA --- */
.bottom-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-height);
    background: var(--surface);
    border-top: 1px solid rgba(28, 45, 58, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transform: translateY(100%);
}

.bottom-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: var(--accent-from);
    color: var(--accent-ink);
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
}

.bottom-cta-link:hover {
    background: var(--ocean-mid);
}

/* --- Map Markers & Popups --- */
.custom-marker {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.marker-pin {
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0;
    background: var(--ocean-deep);
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -18px 0 0 -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid var(--surface);
}

.marker-pin span {
    transform: rotate(45deg);
    font-size: 16px;
    line-height: 1;
}

.marker-home {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: var(--coral);
}

.marker-home span {
    font-size: 20px;
}

/* Custom Popup */
.leaflet-popup-content-wrapper {
    background: var(--surface);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--card-shadow-hover);
    padding: 0;
}

.leaflet-popup-tip {
    background: var(--surface);
}

.leaflet-popup-content {
    margin: 16px;
    width: 240px !important;
}

.map-popup {
    font-family: var(--font-sans);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
}

.popup-header strong {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.3;
}

.popup-dist {
    font-size: 11px;
    background: var(--ocean-wash);
    color: var(--ocean-deep);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.popup-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 12px;
}

.popup-actions {
    display: flex;
    gap: 6px;
}

.popup-action {
    flex: 1;
    text-align: center;
    background: var(--ocean-wash);
    color: var(--ocean-deep);
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.popup-action:hover {
    background: var(--ocean-pale);
}

/* --- Quiet Hours card (House Manual) --- */
.card.spotlight {
    background: var(--card-bg);
}

.qh-block {
    margin-bottom: 16px;
}

.qh-head {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.qh-head .qh-qual {
    font-weight: 500;
    color: var(--text-muted);
}

.qh-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
}

.qh-list li {
    position: relative;
    padding-left: 16px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.qh-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ocean-light);
}

.qh-list li strong {
    color: var(--text-primary);
    font-weight: 600;
}

.qh-list li .qh-aside {
    color: var(--text-muted);
}

.qh-why {
    background: var(--ocean-wash);
    border-radius: var(--radius-sm);
    padding: 13px 14px 14px;
}

.qh-why .qh-head {
    margin-bottom: 7px;
}

.qh-why .qh-list li::before {
    background: var(--ocean-mid);
}

.qh-closer {
    font-size: 13.5px;
    color: var(--text-secondary);
    border-top: 1px solid var(--ocean-wash);
    padding-top: 12px;
    margin-top: 16px;
}


/* --- Brand typography assignments --- */
.hero-title,
.promo-title,
.panel-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0;
}

.tab-label,
.hero-badges,
.card-section-title {
    font-family: var(--font-condensed);
    letter-spacing: 0.02em;
}

/* --- The inline brand mark (replaces a 570 KB PNG) ---
   Selector is `.header .hv-logo`, not `.hv-logo`: the icon rule below is `.header svg`,
   which is one type selector stronger, and a bare `.hv-logo` loses to it — measured, the
   mark came out blue instead of matching the green wordmark beside it. */
.header .hv-logo {
    height: 46px;
    width: auto;
    display: inline-block;
    margin-right: 2px;
    color: var(--driftwood);
}

/* --- Legibility + alignment pass (John, 2026-08-17, reading the desktop build) --- */

/* The tab strip stretched the full viewport while the header and the content both stop at
   640px, so on a desktop the seven icons flew out to the screen edges and lost their
   relationship to the text below. Same max-width as .main-content and .header-inner. */
.tab-nav-inner {
    max-width: 640px;
    margin: 0 auto;
}

/* 9px was too small to read whatever colour it was — and Barlow Condensed is narrow, so it
   needs more size than the sans it replaced, not the same. */
.tab-label {
    font-size: 11px;
    letter-spacing: 0.01em;
}

/* The seven tabs are equal-width flex columns — 53.6px each on a 375px phone — and at 11px
   "House Manual" renders 55px wide, so it overflowed its column and touched its neighbour
   (measured gap: 3px). 10px brings it to ~50px and the gaps back to positive. */
@media (max-width: 430px) {
    .tab-label {
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* Hairlines were rgba(28, 45, 58, 0.06) — a near-black at 6% opacity, which simply vanishes
   on a dark ground. Tokens instead, so the divider survives both themes. */
.header,
.tab-nav {
    border-bottom: 1px solid var(--ocean-pale);
}

/* --- Icons follow the theme ---
   Every icon's stroke is currentColor now, so colour is set once, here, and dark mode
   inherits it for free. The exceptions are the icons sitting ON a coloured fill, which
   must keep taking the colour of the text beside them. */
.tab-panel svg,
.header svg {
    color: var(--ocean-deep);
}

.promo-card svg,
.btn-primary svg,
.hero svg {
    color: inherit;
}

/* The tab strip colour-codes its icons with per-tab stroke attributes, which override
   this. It only reaches the one or two icons whose stroke was the hardcoded brand blue
   and is now currentColor — without it they fall back to the muted label colour. */
.tab-icon svg {
    color: var(--ocean-deep);
}


/* ============================================
   DARK MODE — authored on purpose, not optional
   ============================================
   Chrome's Auto Dark Mode repaints a light-only page whether we like it or not. Measured
   three ways in John's own Chrome (2026-08-17): with no declaration it inverts; with
   `color-scheme: light` it STILL inverts, so that property is not an opt-out; only an
   authored `prefers-color-scheme: dark` block makes the browser stand aside and render
   what we wrote. It also inverts flat background-colors while leaving GRADIENTS alone,
   which is how one gradient card ended up white-topped beside its inverted siblings.

   Same token names, dark values, so every rule in the sheet follows automatically.
   --white deliberately does NOT change: it is ink on a coloured fill. Backgrounds use
   --surface, which does. */
@media (prefers-color-scheme: dark) {
    :root {
        /* Raised 2026-08-17 after John read the first dark build on a desktop and found the
           text weak. Two changes, not one: the type tokens went brighter AND the ground went
           deeper while the card went lighter, so the card now lifts off the page by 1.8 luma
           instead of 0. Contrast alone was not the whole complaint — flat cards read as low
           contrast even when the type passes. */
        --ocean-deep: #9CBBC4;     /* blue + 58% white — 6.8:1 on --card-bg */
        --ocean-mid: #7FA3AE;      /* 5.1:1 */
        --ocean-light: #567F8C;
        --ocean-pale: #2A4C58;
        --ocean-wash: #1D3E4A;     /* the inset panel — every token above clears 4.5:1 on it */
        --sand-warm: #40372A;
        --sand-light: #213136;
        --coral: #DA9585;          /* red + 40% white — 5.7:1 */
        --coral-soft: #8A5548;
        --sunset: #E7A468;         /* orange + 30% white — 6.5:1 */
        --driftwood: #9FB2A4;      /* green + 48% white — 6.2:1 */
        --night: #04090B;
        --text-primary: #EEF3F5;   /* 12.4:1 on --card-bg */
        --text-secondary: #CBD9DE; /* 9.6:1 — was 9.3 but on a darker card, so it reads brighter */
        --text-muted: #A8BFC6;     /* 7.2:1 — the token John was squinting at, was 6.5:1 */
        --accent-from: #173C49;    /* ink 10.6:1 */
        --accent-to: #235064;      /* ink 7.8:1 */
        --accent-ink: #EEF3F5;
        --surface: #16303A;
        --bg: #0A171C;
        --card-bg: #16303A;
        --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
        --card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.55);
    }
}