/* ═══════════════════════════════════════════════════════════════
   Oaxaca Atlas — Hybrid UI
   Design language: warm mezcal-cream surfaces, amber→orange→rose
   gradients, Zapotec greca accents, Playfair display headings.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Palette */
    --stone-50:  #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-800: #292524;
    --barro:     #1c1917;
    --cream:     #fbf7f0;

    /* Maroon accent system (#8a0000) */
    --maroon:      #8a0000;
    --maroon-700:  #6d0000;
    --maroon-600:  #a30606;
    --maroon-500:  #b91c1c;
    --maroon-50:   #fdf3f3;
    --maroon-100:  #fbe3e3;
    --maroon-200:  #f5c9c9;
    --wine:        #5a1020;
    --clay:        #b45309;   /* warm secondary for tips/warnings only */

    --green-500: #22c55e;
    --green-600: #16a34a;
    --yellow-500:#d97706;   /* amber = "tight", distinct from red status */
    --red-500:   #dc2626;

    --grad:    linear-gradient(90deg, var(--maroon), var(--maroon-600), var(--wine));
    --grad-br: linear-gradient(135deg, var(--maroon-600), var(--maroon));

    --shadow-sm: 0 1px 2px rgba(28,25,23,.06);
    --shadow-md: 0 4px 12px rgba(28,25,23,.08);
    --shadow-lg: 0 10px 30px rgba(28,25,23,.12);
    --shadow-amber: 0 8px 24px rgba(138,0,0,.28);

    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --ease: cubic-bezier(.22,.9,.35,1);
    --header-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    background: var(--stone-50);
    color: var(--stone-800);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100dvh;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
img { display: block; max-width: 100%; }

/* Lucide-style inline icons */
.i { width: 1em; height: 1em; display: inline-block; vertical-align: -0.13em; flex-shrink: 0; }
.i svg { width: 100%; height: 100%; display: block; }

/* ── Cinematic background (kept from Atlas) ─────────────────── */
.bg-layer {
    position: fixed; inset: 0; z-index: -2;
    background-size: cover; background-position: center;
    opacity: 0; will-change: opacity, transform;
}
.bg-overlay {
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(250,250,249,.82) 0%, rgba(250,250,249,.9) 45%, var(--stone-50) 100%);
    pointer-events: none;
}
body:not(.bg-active) .bg-overlay { background: var(--stone-50); }

@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.bg-layer.kb { animation: kenburns 15s var(--ease) forwards; }

/* ── Header ─────────────────────────────────────────────────── */
.header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251,247,240,.9);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(180,83,9,.1);
    box-shadow: 0 4px 20px rgba(180,83,9,.05);
}
.header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad);
}
.header-content {
    max-width: 1280px; margin: 0 auto; height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity .2s; }
.logo:hover { opacity: .8; }
.logo-img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 2px 8px rgba(138,0,0,.18); }
.logo-text {
    font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em;
    background: linear-gradient(90deg, var(--maroon-600), var(--maroon), var(--wine));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-desktop { display: none; gap: 24px; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-link {
    font-size: 14px; font-weight: 600; color: var(--stone-600); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: color .2s;
}
.nav-link:hover { color: var(--maroon-600); }
.header-actions { display: flex; gap: 8px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 14px; border-radius: var(--r-md);
    transition: all .25s var(--ease); white-space: nowrap;
}
.btn-primary {
    background: var(--grad); color: #fff; padding: 11px 22px;
    box-shadow: var(--shadow-amber);
}
.btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(138,0,0,.34); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; pointer-events: none; }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--r-lg); }
.btn-full { width: 100%; }
.btn-ghost {
    background: #fff; color: var(--stone-600); padding: 10px 18px;
    border: 1px solid var(--stone-200); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { color: var(--maroon-600); background: var(--maroon-50); border-color: var(--maroon-200); }
.btn-back { color: var(--stone-500); padding: 8px 12px; border-radius: var(--r-md); }
.btn-back:hover { color: var(--maroon-600); background: rgba(255,251,235,.7); }

/* ── Views ──────────────────────────────────────────────────── */
.view { display: none; animation: view-in .4s var(--ease); }
.view-active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Hero ───────────────────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; padding: 56px 20px 40px; }
.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0;
}
.hero-blob.a { top: -120px; right: -120px; width: 380px; height: 380px; background: linear-gradient(135deg, rgba(138,0,0,.18), rgba(254,205,211,.45)); }
.hero-blob.b { bottom: -100px; left: -100px; width: 320px; height: 320px; background: linear-gradient(45deg, rgba(163,6,6,.12), rgba(138,0,0,.1)); }
.hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(90deg, rgba(138,0,0,.08), rgba(90,16,32,.08));
    border: 1px solid var(--maroon-200); color: var(--maroon-700);
    padding: 6px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
.hero-eyebrow .i { color: var(--maroon); }
.hero-title {
    font-family: var(--font-display); font-size: clamp(34px, 6vw, 52px); font-weight: 700;
    letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px;
    background: linear-gradient(90deg, var(--maroon-600), var(--maroon), var(--wine));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-subtitle { font-size: 17px; color: var(--stone-500); max-width: 520px; margin: 0 auto 32px; }

/* Setup card */
.setup-card {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--stone-200); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg); padding: 28px; text-align: left;
}
.setup-row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; }
@media (min-width: 640px) { .setup-row { grid-template-columns: repeat(3, 1fr); } }
.setup-field label, .setup-categories > label {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--stone-600); margin-bottom: 9px;
}
.setup-field label .i, .setup-categories > label .i { color: var(--stone-400); }
.counter {
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--stone-200); border-radius: var(--r-md);
    background: rgba(255,255,255,.6); padding: 6px;
}
.counter-btn {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    color: var(--stone-500); background: var(--stone-100); transition: all .2s;
    font-size: 13px;
}
.counter-btn:hover { background: var(--maroon-100); color: var(--maroon-700); }
.counter-btn:active { transform: scale(.92); }
.counter-value { font-size: 17px; font-weight: 700; color: var(--stone-800); min-width: 34px; text-align: center; }
.date-input {
    width: 100%; border: 1px solid var(--stone-200); border-radius: var(--r-md);
    padding: 11px 12px; font-size: 14px; background: rgba(255,255,255,.6);
    color: var(--stone-800); outline: none; transition: all .25s;
    min-height: 48px;
}
.date-input:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(138,0,0,.15); }
.field-hint { font-size: 11px; color: var(--stone-400); margin-top: 6px; }

.setup-categories { margin-bottom: 22px; }
.category-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.category-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--r-full);
    border: 1px solid var(--stone-200); background: #fff;
    font-size: 13px; font-weight: 600; color: var(--stone-600);
    transition: all .25s var(--ease);
}
.category-chip:hover { border-color: var(--maroon-200); background: var(--maroon-50); transform: translateY(-1px); }
.category-chip.selected {
    background: var(--grad-br); color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(138,0,0,.35);
}
.setup-note {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12px; color: var(--stone-400); margin-top: 14px;
}
.setup-note .i { color: var(--green-500); }

/* Greca divider */
.greca-divider { height: 34px; margin: 24px auto 0; max-width: 420px; opacity: .5; }
.greca-divider svg { width: 100%; height: 100%; }

/* How it works */
.how-it-works { padding: 44px 20px 60px; }
.how-steps {
    max-width: 900px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 768px) { .how-steps { grid-template-columns: repeat(3, 1fr); } }
.step-card {
    background: #fff; border: 1px solid var(--stone-200); border-radius: var(--r-lg);
    padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm);
    transition: all .3s var(--ease);
}
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--maroon-200); }
.step-number {
    width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--maroon-600), var(--wine));
    color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px;
    box-shadow: var(--shadow-md);
}
.step-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.step-card p { font-size: 13px; color: var(--stone-500); line-height: 1.55; }
.trust-badges {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
    margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--stone-100);
    max-width: 900px; margin-left: auto; margin-right: auto;
}
.trust-badges .badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: var(--stone-500);
}
.trust-badges .badge .i { color: var(--green-500); }

/* ── Browse view ────────────────────────────────────────────── */
.browse-header, .builder-header {
    max-width: 1280px; margin: 0 auto; padding: 22px 20px 6px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.browse-title, .builder-title {
    font-family: var(--font-display); font-size: clamp(20px, 3.4vw, 28px); font-weight: 700;
    flex: 1; letter-spacing: -.01em;
}
.browse-progress {
    font-size: 13px; font-weight: 600; color: var(--maroon-700);
    background: var(--maroon-50); border: 1px solid var(--maroon-100);
    padding: 6px 14px; border-radius: var(--r-full);
}
.category-tabs {
    max-width: 1280px; margin: 0 auto; padding: 12px 20px 4px;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.category-tabs::-webkit-scrollbar { display: none; }
.tab-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--r-full); flex-shrink: 0;
    font-size: 13px; font-weight: 600; color: var(--stone-500);
    background: #fff; border: 1px solid var(--stone-200);
    transition: all .25s var(--ease);
}
.tab-btn:hover { color: var(--maroon-600); background: var(--maroon-50); }
.tab-btn.active {
    background: var(--grad-br); color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(138,0,0,.3);
}

.stops-container { max-width: 1280px; margin: 0 auto; padding: 18px 20px 120px; }
.stops-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.stop-card {
    position: relative; background: #fff; border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--stone-200); box-shadow: var(--shadow-sm);
    cursor: pointer; transition: all .3s var(--ease);
    display: flex; flex-direction: column;
}
.stop-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--maroon-200); }
.stop-card.selected { border-color: var(--maroon); box-shadow: 0 0 0 2px var(--maroon), var(--shadow-md); }
.stop-card-img {
    aspect-ratio: 16 / 9; background-size: cover; background-position: center;
    background-color: var(--stone-100); position: relative;
}
.stop-card-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(28,25,23,.35));
}
.stop-card-catbadge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    padding: 4px 10px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 700;
}
.stop-card-body { padding: 15px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.stop-card-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em; }
.stop-card-desc { font-size: 13px; color: var(--stone-500); line-height: 1.5; margin-bottom: 10px; flex: 1; }
.stop-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--stone-500); }
.stop-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.stop-card-meta .i { color: var(--maroon); }
.stop-tip {
    margin-top: 11px; padding: 9px 11px; border-radius: 10px;
    background: var(--maroon-50); border: 1px dashed var(--maroon-200);
    font-size: 12px; color: var(--stone-600); line-height: 1.45;
    display: flex; gap: 7px; align-items: flex-start;
}
.stop-tip .i { color: var(--maroon); margin-top: 2px; }
.stop-tip-locked {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 7px; font-size: 11px; font-weight: 600; color: var(--stone-400);
}
.stop-tip-locked .i { color: var(--clay); }
.stop-card-check {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--grad-br); color: #fff; display: grid; place-items: center;
    font-size: 13px; opacity: 0; transform: scale(.6);
    transition: all .25s var(--ease); box-shadow: var(--shadow-md);
}
.stop-card.selected .stop-card-check { opacity: 1; transform: scale(1); }

/* Floating bar */
.floating-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    transform: translateY(110%); transition: transform .35s var(--ease);
    padding: 0 16px calc(14px + env(safe-area-inset-bottom));
    pointer-events: none;
}
.floating-bar.visible { transform: none; }
.floating-bar-content {
    pointer-events: auto;
    max-width: 640px; margin: 0 auto;
    background: rgba(28,25,23,.94); backdrop-filter: blur(14px);
    border-radius: var(--r-lg); padding: 12px 14px 12px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    box-shadow: 0 12px 40px rgba(28,25,23,.35);
    border: 1px solid rgba(255,255,255,.08);
}
.floating-info { display: flex; align-items: baseline; gap: 8px; color: #fff; }
.floating-count { font-size: 21px; font-weight: 800; }
.floating-label { font-size: 13px; color: var(--stone-300); }

/* ── Builder ────────────────────────────────────────────────── */
.builder-header { padding-bottom: 12px; }
.builder-actions { display: flex; gap: 8px; }

.builder-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px 80px; }

/* Pool */
.pool {
    background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
    border: 1px solid var(--stone-200); border-radius: var(--r-lg);
    padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.pool-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pool-header h3 { font-size: 13px; font-weight: 700; color: var(--stone-600); display: flex; align-items: center; gap: 7px; }
.pool-header .i { color: var(--maroon); }
.pool-count {
    font-size: 11px; font-weight: 700; background: var(--maroon-100); color: var(--maroon-700);
    border-radius: var(--r-full); padding: 2px 9px;
}
.pool-hint { font-size: 11px; color: var(--stone-400); margin-left: auto; }
.pool-cards { display: flex; flex-wrap: wrap; gap: 9px; min-height: 44px; }
.pool-empty { font-size: 12px; color: var(--stone-400); padding: 10px 2px; }

.pool-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--stone-200); border-radius: var(--r-md);
    padding: 8px 12px; font-size: 13px; font-weight: 600;
    cursor: grab; user-select: none; -webkit-user-select: none;
    box-shadow: var(--shadow-sm); transition: all .25s var(--ease);
    border-left: 3px solid var(--cat, var(--maroon));
    touch-action: manipulation;
}
.pool-chip:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pool-chip .chip-dur { font-size: 11px; font-weight: 500; color: var(--stone-400); }
.pool-chip.lifted {
    background: var(--barro); color: #fff; border-color: transparent;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 14px 30px rgba(28,25,23,.35);
}
.pool-chip.lifted .chip-dur { color: var(--stone-300); }
.pool-chip.dragging { opacity: .45; }

/* Days */
.days-scroller {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}
@media (min-width: 1024px) {
    .days-scroller.many {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        overflow: visible;
    }
}

.day-column {
    background: #fff; border-radius: var(--r-lg); border: 1px solid var(--stone-200);
    box-shadow: var(--shadow-sm); overflow: hidden;
    transition: box-shadow .3s, border-color .3s;
    border-top: 4px solid var(--status-color, var(--stone-300));
}
.day-column[data-status="green"]  { --status-color: var(--green-500); }
.day-column[data-status="yellow"] { --status-color: var(--yellow-500); }
.day-column[data-status="red"]    { --status-color: var(--red-500); }
.day-column.drop-ready { border-color: var(--maroon); box-shadow: 0 0 0 2px var(--maroon), var(--shadow-lg); }

.day-header { padding: 14px 16px 10px; }
.day-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.day-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.day-date { font-size: 11px; font-weight: 600; color: var(--stone-400); text-transform: uppercase; letter-spacing: .04em; }
.day-time { font-size: 12px; font-weight: 600; color: var(--stone-500); }
.day-progress {
    height: 6px; border-radius: var(--r-full); background: var(--stone-100);
    margin-top: 9px; overflow: hidden;
}
.day-progress-fill { height: 100%; border-radius: var(--r-full); transition: width .5s var(--ease), background .3s; }
.day-progress-fill.green  { background: linear-gradient(90deg, #4ade80, var(--green-500)); }
.day-progress-fill.yellow { background: linear-gradient(90deg, #fde047, var(--yellow-500)); }
.day-progress-fill.red    { background: linear-gradient(90deg, #f87171, var(--red-500)); }
.day-warnings { padding: 0 16px; }
.day-warning {
    display: flex; gap: 7px; align-items: flex-start;
    font-size: 11.5px; line-height: 1.45; color: #9a3412;
    background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px;
    padding: 7px 10px; margin-bottom: 8px;
}
.day-warning.info { color: var(--stone-600); background: var(--stone-50); border-color: var(--stone-200); }
.day-warning .i { margin-top: 2px; flex-shrink: 0; }

.day-cards { padding: 8px 12px 4px; min-height: 70px; }
.day-cards.empty {
    display: grid; place-items: center;
    margin: 8px 12px; padding: 22px 12px;
    border: 2px dashed var(--stone-200); border-radius: var(--r-md);
    color: var(--stone-400); font-size: 12.5px; text-align: center;
}
.day-cards.drag-over, .day-cards.empty.drag-over { border-color: var(--maroon); background: var(--maroon-50); }

/* Itinerary cards — height scales with duration */
.itinerary-card {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    background-size: cover; background-position: center;
    background-color: var(--stone-100);
    border: 1px solid var(--stone-200);
    margin-bottom: 8px; cursor: grab; user-select: none; -webkit-user-select: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: transform .2s var(--ease), box-shadow .2s;
    touch-action: manipulation;
}
.itinerary-card:hover { box-shadow: var(--shadow-md); }
.itinerary-card.dragging { opacity: .4; }
.itinerary-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(28,25,23,.05) 0%, rgba(28,25,23,.62) 100%);
}
.itinerary-card.no-img::before { background: linear-gradient(135deg, rgba(28,25,23,.55), rgba(28,25,23,.7)); }
.itinerary-card .ic-body {
    position: relative; z-index: 1; padding: 9px 12px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    color: #fff;
}
.ic-clock {
    position: absolute; top: 8px; left: 10px; z-index: 1;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    background: rgba(255,255,255,.92); color: var(--stone-800);
    padding: 2px 8px; border-radius: var(--r-full);
}
.ic-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ic-dur { font-size: 11px; font-weight: 600; opacity: .9; }
.ic-remove {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(28,25,23,.5); color: #fff;
    display: grid; place-items: center; font-size: 11px;
    opacity: 0; transition: opacity .2s;
}
.itinerary-card:hover .ic-remove { opacity: 1; }
@media (hover: none) { .ic-remove { opacity: .85; } }
.ic-daybadge {
    position: absolute; top: 8px; right: 36px; z-index: 1;
    font-size: 9.5px; font-weight: 700;
    background: rgba(255,255,255,.9); color: var(--maroon-700);
    padding: 2px 7px; border-radius: var(--r-full);
}

/* Stay-time slider (per card) */
.ic-stay {
    position: relative; z-index: 1;
    padding: 0 12px 10px; margin-top: -2px;
    display: flex; align-items: center; gap: 9px;
}
.ic-stay input[type="range"] {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 4px; border-radius: var(--r-full);
    background: linear-gradient(90deg, #fff var(--fill,50%), rgba(255,255,255,.32) var(--fill,50%));
    outline: none; cursor: pointer; margin: 0;
}
.ic-stay input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 3px solid var(--maroon);
    box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: grab; margin-top: 0;
}
.ic-stay input[type="range"]::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 3px solid var(--maroon);
    box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: grab;
}
.ic-stay input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.ic-stay-val {
    font-size: 11px; font-weight: 700; color: #fff;
    min-width: 44px; text-align: right;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.ic-stay-atmin .ic-stay-val, .ic-stay-atmax .ic-stay-val { color: #fde68a; }

/* Travel legs */
.travel-leg {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 6px 3px 10px; margin: -2px 0 6px;
}
.travel-leg-line {
    width: 2px; align-self: stretch; min-height: 26px;
    background: repeating-linear-gradient(180deg, var(--stone-300) 0 4px, transparent 4px 8px);
    margin-left: 6px;
}
.travel-leg-info { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--stone-500); flex: 1; flex-wrap: wrap; }
.travel-leg-time { font-weight: 700; color: var(--stone-600); }
.travel-modes { display: inline-flex; gap: 3px; background: var(--stone-100); border-radius: var(--r-full); padding: 2px; }
.tmode-btn {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    color: var(--stone-400); font-size: 12px; transition: all .2s;
}
.tmode-btn:hover { color: var(--maroon-600); }
.tmode-btn.active { background: #fff; color: var(--maroon-600); box-shadow: var(--shadow-sm); }
.travel-leg.origin { padding-top: 6px; }
.travel-leg.origin .travel-leg-info { font-weight: 600; color: var(--stone-500); }

.day-add { padding: 4px 12px 14px; }
.day-add-btn {
    width: 100%; padding: 9px; border-radius: var(--r-md);
    border: 1.5px dashed var(--stone-300); color: var(--stone-400);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .2s;
}
.day-add-btn:hover { border-color: var(--maroon); color: var(--maroon-600); background: var(--maroon-50); }
.day-add-btn.place-target {
    border-color: var(--maroon); color: #fff; background: var(--grad-br);
    box-shadow: var(--shadow-amber); animation: pulse-place 1.4s ease infinite;
}
@keyframes pulse-place { 50% { box-shadow: 0 0 0 6px rgba(138,0,0,.18); } }

/* Add-day tile */
.add-day-tile {
    border: 2px dashed var(--stone-300); border-radius: var(--r-lg);
    display: grid; place-items: center; min-height: 140px;
    color: var(--stone-400); font-weight: 600; font-size: 13.5px;
    transition: all .25s; cursor: pointer; gap: 4px;
}
.add-day-tile:hover { border-color: var(--maroon); color: var(--maroon-600); background: var(--maroon-50); }

/* ── Modal (export) ─────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 80; display: none; }
.modal.visible { display: block; }
.modal-backdrop {
    position: absolute; inset: 0; background: rgba(28,25,23,.5);
    backdrop-filter: blur(5px); animation: fade-in .25s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.modal-content {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto;
    background: var(--stone-50); border-radius: var(--r-xl);
    box-shadow: 0 30px 80px rgba(28,25,23,.35);
    animation: modal-in .35s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
.modal-ribbon { height: 5px; background: var(--grad); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; color: var(--stone-400);
    transition: all .2s;
}
.modal-close:hover { background: var(--stone-100); color: var(--stone-600); }
.modal-header { padding: 26px 26px 8px; }
.modal-header h2 { font-family: var(--font-display); font-size: 23px; font-weight: 700; margin-bottom: 4px; }
.modal-header p { font-size: 13.5px; color: var(--stone-500); }
.export-options { padding: 16px 26px 26px; display: grid; gap: 14px; }
.export-option {
    display: flex; align-items: center; gap: 15px;
    background: #fff; border: 1px solid var(--stone-200); border-radius: var(--r-lg);
    padding: 16px; cursor: pointer; transition: all .25s var(--ease);
    position: relative; overflow: hidden;
}
.export-option:hover { border-color: var(--maroon-200); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.export-option.premium { border-color: var(--maroon-200); background: linear-gradient(135deg, var(--maroon-50), #fff); }
.export-icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    font-size: 19px; flex-shrink: 0;
}
.export-icon.free { background: var(--stone-100); color: var(--stone-500); }
.export-icon.prem { background: var(--grad-br); color: #fff; box-shadow: var(--shadow-amber); }
.export-info { flex: 1; }
.export-info h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.export-info p { font-size: 12.5px; color: var(--stone-500); line-height: 1.45; }
.export-badge {
    display: inline-block; margin-top: 7px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .05em; padding: 3px 10px; border-radius: var(--r-full);
}
.export-badge.free { background: #dcfce7; color: var(--green-600); }
.export-badge.prem { background: var(--grad); color: #fff; }
.export-option > .i.chev { color: var(--stone-300); }

/* Premium teaser preview */
.premium-preview { padding: 0 26px 26px; }
.pp-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-400); margin-bottom: 10px; }
.pp-cards { display: flex; gap: 10px; position: relative; }
.pp-card {
    flex: 1; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4;
    background-size: cover; background-position: center; position: relative;
    border: 1px solid var(--stone-200);
}
.pp-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(28,25,23,.7));
}
.pp-card .pp-name {
    position: absolute; bottom: 8px; left: 9px; right: 9px; z-index: 1;
    color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.pp-card.blurred { filter: blur(5px); }
.pp-lock {
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
}
.pp-lock-inner {
    background: rgba(255,255,255,.95); border-radius: var(--r-md);
    padding: 10px 18px; display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--stone-700, #44403c);
    box-shadow: var(--shadow-lg);
}
.pp-lock-inner .i { color: var(--maroon); }

/* ── Toasts ─────────────────────────────────────────────────── */
.toast-container {
    position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
    z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.toast {
    display: flex; align-items: center; gap: 9px;
    background: rgba(28,25,23,.94); color: #fff;
    padding: 11px 18px; border-radius: var(--r-md);
    font-size: 13.5px; font-weight: 500;
    box-shadow: 0 12px 32px rgba(28,25,23,.3);
    animation: toast-in .3s var(--ease);
}
.toast .i { flex-shrink: 0; }
.toast.success .i { color: #4ade80; }
.toast.error .i { color: #f87171; }
.toast.info .i { color: var(--maroon-200); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ── Footer greca ───────────────────────────────────────────── */
.site-footer {
    margin-top: 40px; background: var(--barro); color: var(--stone-400);
    position: relative;
}
.site-footer .footer-ribbon { height: 4px; background: linear-gradient(90deg, rgba(90,16,32,.8), rgba(138,0,0,.6), rgba(163,6,6,.8)); }
.footer-greca { height: 40px; opacity: .35; overflow: hidden; }
.footer-greca svg { width: 100%; height: 100%; }
.footer-inner {
    max-width: 1280px; margin: 0 auto; padding: 24px 20px 28px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    font-size: 12px;
}
.footer-inner a { color: var(--stone-400); text-decoration: none; }
.footer-inner a:hover { color: var(--maroon-200); }

/* ── Mobile refinements ─────────────────────────────────────── */
@media (max-width: 640px) {
    .hero-section { padding: 36px 16px 28px; }
    .setup-card { padding: 20px 16px; }
    .browse-header, .builder-header { padding-left: 16px; padding-right: 16px; }
    .stops-container, .builder-wrap { padding-left: 16px; padding-right: 16px; }
    .builder-header .builder-title { width: 100%; order: 3; }
    .stops-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Requested Atlas board refinements */
.btn-primary { background: #8a0000; }
.header::before { background: #8a0000; }
.builder-add-stops { padding: 9px 15px; box-shadow: none; }
.bg-overlay { background: rgba(250,250,249,.58); }
body:not(.bg-active) .bg-overlay { background: var(--stone-50); }
.place-category-pill {
    display: inline-flex !important; align-items: center; gap: 5px;
    width: fit-content; padding: 4px 9px; border-radius: var(--r-full);
    color: var(--pill); background: color-mix(in srgb, var(--pill) 12%, white);
    font-weight: 700;
}
.custom-place-card { border-style: dashed; cursor: default; }
.custom-place-card:hover { transform: none; }
.custom-place-icon {
    min-height: 115px; display: grid; place-items: center; font-size: 34px;
    color: var(--custom); background: color-mix(in srgb, var(--custom) 9%, white);
}
.custom-field { display: grid; gap: 5px; margin-top: 9px; font-size: 11px; font-weight: 700; color: var(--stone-600); }
.custom-field input { width: 100%; border: 1px solid var(--stone-200); border-radius: 9px; padding: 9px 10px; background: #fff; color: var(--stone-800); }
.custom-field input:focus { outline: 2px solid rgba(138,0,0,.18); border-color: #8a0000; }
.custom-add-btn { width: 100%; margin-top: 12px; }
.itinerary-item { margin-bottom: 8px; }
.itinerary-item .itinerary-card { margin-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
.itinerary-item .ic-stay {
    position: relative; z-index: 2; margin: 0; padding: 10px 12px;
    border: 1px solid var(--stone-200); border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md); background: #fff;
    touch-action: none; cursor: default; user-select: none;
}
.itinerary-item .ic-stay input[type="range"] {
    background: linear-gradient(90deg, #8a0000 var(--fill,50%), var(--stone-200) var(--fill,50%));
    touch-action: none;
}
.itinerary-item .ic-stay-val { color: var(--stone-700); text-shadow: none; }
.itinerary-item .ic-stay-atmin .ic-stay-val,
.itinerary-item .ic-stay-atmax .ic-stay-val { color: #8a0000; }
/* Flat #8a0000 treatment for interactive buttons */
.category-chip.selected,
.tab-btn.active,
.day-add-btn.place-target,
.stop-card-check,
.export-icon.prem,
.export-badge.prem { background: #8a0000; }

/* Category color coding, travel controls, and full-size header logo */
.logo-img {
    width: auto;
    height: 58px;
    max-width: min(280px, 46vw);
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}
.logo-text { display: none; }

/* Full category border in browse and scheduled cards */
.stop-card { border: 3px solid var(--cat, var(--stone-200)); }
.stop-card.selected { border-color: var(--cat, var(--maroon)); }
.custom-place-card { border-color: var(--cat, var(--stone-300)); }
.itinerary-card { border: 3px solid var(--cat, var(--stone-200)); border-bottom: 0; }
.itinerary-item .ic-stay { border-width: 0 3px 3px; border-color: var(--cat, var(--stone-200)); }

/* Unassigned uses category color only on the left edge */
.pool-chip {
    border: 1px solid var(--stone-200);
    border-left: 6px solid var(--cat, var(--maroon));
}

.travel-leg { align-items: stretch; }
.travel-leg-content { flex: 1; min-width: 0; }
.travel-leg-info { min-height: 34px; }
.travel-main-icon { width: 23px; height: 23px; color: var(--maroon); flex: 0 0 23px; }
.travel-modes { gap: 5px; padding: 3px; }
.tmode-btn { width: 34px; height: 34px; font-size: 17px; }
.tmode-btn .i { width: 19px; height: 19px; }

.travel-time-control {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 4px 2px 0;
    touch-action: none;
}
.travel-time-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 5px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--maroon) var(--fill,50%), var(--stone-200) var(--fill,50%));
    outline: none;
    cursor: pointer;
}
.travel-time-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--maroon);
    box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.travel-time-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--maroon);
    box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.travel-slider-value {
    min-width: 48px;
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    color: var(--stone-700);
}

/* Yellow meal borders need a little definition on white */
.pool-chip[style*="#FFFF00"] { box-shadow: inset 1px 0 rgba(0,0,0,.12); }

/* ═══════════════════════════════════════════════════════════════
   July 2026 pass — greca header strip, itinerary naming, text
   scrims, doubled day cards, notes, premium cover export, help
   modal, start-over.
   ═══════════════════════════════════════════════════════════════ */

/* Item 6: Zapotec greca strip attached to the bottom of the header */
.header-greca {
    height: 18px;
    background: #fff url('../assets/images/border2.jpg') repeat-x center;
    background-size: auto 100%;
    border-top: 1px solid rgba(138,0,0,.12);
}

/* Item 3: 15px breathing room above and below the logo */
.logo-img { box-sizing: content-box; padding: 15px 0; }
.header-content { height: auto; min-height: var(--header-h); }

/* Item 2: legibility scrims behind text that sits over the photo bg */
.text-scrim {
    background: rgba(251,247,240,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--r-xl);
    padding: 26px 28px 22px;
    margin-bottom: 26px;
    box-shadow: 0 6px 24px rgba(28,25,23,.06);
}
.hero-text .hero-subtitle { margin-bottom: 0; }
.browse-header {
    background: rgba(251,247,240,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: var(--r-lg);
    margin-top: 14px;
    padding-top: 14px; padding-bottom: 14px;
}
.trust-badges {
    background: rgba(251,247,240,.72);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    border-top: none;
}

/* Item 4: itinerary name field */
.setup-name { margin-bottom: 22px; }
.trip-name-input {
    width: 100%; border: 1px solid var(--stone-200); border-radius: var(--r-md);
    padding: 12px 14px; font-size: 15px; font-weight: 600;
    background: rgba(255,255,255,.7); color: var(--stone-800);
    outline: none; transition: all .25s; min-height: 48px;
}
.trip-name-input:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(138,0,0,.15); background: #fff; }
.trip-name-input::placeholder { color: var(--stone-400); font-weight: 500; }

/* Item 11: start over */
.btn-startover { color: var(--stone-500); }
.btn-startover:hover { color: var(--red-500); background: #fef2f2; border-color: #fecaca; }
@media (max-width: 480px) { .btn-startover .startover-label { display: none; } }

/* Item 5: help / instructions modal */
.help-steps { padding: 10px 26px 28px; display: grid; gap: 16px; }
.help-step { display: flex; gap: 14px; align-items: flex-start; }
.help-step-num {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--maroon); color: #fff; font-weight: 700; font-size: 14px;
    display: grid; place-items: center; margin-top: 2px;
}
.help-step h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.help-step p { font-size: 13px; color: var(--stone-500); line-height: 1.55; }
.hs-green { color: var(--green-600); font-weight: 700; }
.hs-amber { color: var(--yellow-500); font-weight: 700; }
.hs-red   { color: var(--red-500); font-weight: 700; }
.help-autosave {
    display: flex; gap: 8px; align-items: center;
    font-size: 12.5px; color: var(--stone-600);
    background: var(--maroon-50); border: 1px dashed var(--maroon-200);
    border-radius: var(--r-md); padding: 10px 14px; margin-top: 4px;
}
.help-autosave .i { color: var(--maroon); }

/* Item 7: doubled day cards — give the photo room, layer text on a gradient */
.itinerary-card .ic-body { padding: 12px 14px; }
.ic-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-name { font-size: 15.5px; }
.ic-desc {
    font-size: 11.5px; color: rgba(255,255,255,.88); line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.itinerary-card::before {
    background: linear-gradient(180deg, rgba(28,25,23,.02) 0%, rgba(28,25,23,.18) 55%, rgba(28,25,23,.72) 100%);
}

/* Item 8: per-stop notes */
.ic-notes {
    position: relative; z-index: 2;
    border: 1px solid var(--cat, var(--stone-200)); border-width: 0 3px 3px;
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--stone-50);
    padding: 7px 12px 9px; margin-top: -10px;
}
.itinerary-item .ic-stay { border-radius: 0; }
.itinerary-item .itinerary-card { border-radius: var(--r-md) var(--r-md) 0 0; }
.ic-note-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--stone-400);
    padding: 2px 0; transition: color .2s;
}
.ic-note-toggle:hover { color: var(--maroon); }
.ic-notes.has-note .ic-note-toggle { color: var(--maroon); }
.ic-note-text {
    font-size: 12px; color: var(--stone-600); font-style: italic;
    line-height: 1.45; margin-top: 4px; white-space: pre-wrap;
}
.ic-note-editor textarea {
    width: 100%; margin-top: 6px; resize: vertical; min-height: 52px;
    border: 1px solid var(--stone-200); border-radius: 9px;
    padding: 8px 10px; font-family: inherit; font-size: 12.5px;
    color: var(--stone-800); background: #fff; outline: none;
}
.ic-note-editor textarea:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(138,0,0,.12); }

/* Item 9: scrollable premium preview — first half sharp, rest blurred */
.pp-scroll {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.pp-scroll .pp-card {
    flex: 0 0 118px; aspect-ratio: 3/4; scroll-snap-align: start;
    border-radius: var(--r-md); overflow: hidden; position: relative;
    background-size: cover; background-position: center;
    border: 1px solid var(--stone-200);
}
.pp-scroll .pp-card.blurred { filter: blur(6px) saturate(.8); }
.pp-notebadge {
    position: absolute; top: 7px; right: 7px; z-index: 1;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--maroon);
    display: grid; place-items: center; font-size: 11px;
}
.pp-lock-tile {
    flex: 0 0 128px; aspect-ratio: 3/4; border-radius: var(--r-md);
    border: 2px dashed var(--maroon-200); background: var(--maroon-50);
    display: grid; place-content: center; gap: 8px; text-align: center;
    font-size: 11.5px; font-weight: 700; color: var(--maroon-700); line-height: 1.4;
    padding: 10px;
}
.pp-lock-tile .i { font-size: 20px; width: 20px; height: 20px; margin: 0 auto; color: var(--maroon); }
.pp-scrollhint { font-size: 11px; color: var(--stone-400); margin-top: 6px; }

/* Item 9: cover image picker */
.premium-setup { padding: 0 26px 26px; }
.premium-setup .pp-label { display: flex; align-items: center; gap: 7px; }
.premium-setup .pp-label .i { color: var(--maroon); }
.cover-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.cover-thumb {
    position: relative; aspect-ratio: 4/3; border-radius: var(--r-md);
    background-size: cover; background-position: center; overflow: hidden;
    border: 3px solid transparent; transition: all .2s var(--ease);
    box-shadow: var(--shadow-sm); padding: 0;
}
.cover-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cover-thumb.selected { border-color: var(--maroon); box-shadow: 0 0 0 2px rgba(138,0,0,.25), var(--shadow-md); }
.cover-thumb .cover-check {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--maroon); color: #fff; display: grid; place-items: center;
    font-size: 11px; opacity: 0; transform: scale(.6); transition: all .2s var(--ease);
}
.cover-thumb.selected .cover-check { opacity: 1; transform: scale(1); }
.cover-thumb .cover-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(28,25,23,.75));
    color: #fff; font-size: 10.5px; font-weight: 700; padding: 14px 8px 6px;
    text-align: left;
}

/* ═══ July 2026 pass 2 — coast flights, custom photos, editable name,
   header export, note save arrow, cover slide ═══ */

/* Header export button (right of How It Works) */
.btn-header-export { padding: 10px 16px; }
@media (max-width: 560px) {
    .btn-header-export { padding: 10px 12px; }
    .btn-header-export .header-export-label { display: none; }
}

/* Editable trip name — pencil next to the title, inline input while editing */
.title-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.title-wrap .browse-title, .title-wrap .builder-title { flex: 0 1 auto; min-width: 0; }
.title-edit {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: var(--stone-400);
    font-size: 13px; transition: all .2s;
}
.title-edit:hover { color: var(--maroon); background: var(--maroon-50); }
.title-inline-input {
    font-family: var(--font-display); font-weight: 700; font-size: inherit;
    letter-spacing: -.01em; color: var(--stone-800);
    border: none; border-bottom: 2px solid var(--maroon);
    background: transparent; outline: none; width: 100%; min-width: 180px; padding: 0 0 2px;
}

/* Note save arrow */
.ic-note-editor:not([hidden]) { display: flex; gap: 7px; align-items: flex-end; }
.ic-note-editor textarea { flex: 1; }
.ic-note-save {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--maroon); color: #fff; display: grid; place-items: center;
    font-size: 14px; box-shadow: var(--shadow-sm); transition: all .2s;
    margin-bottom: 2px;
}
.ic-note-save:hover { background: var(--maroon-700); transform: scale(1.06); }
.ic-note-save:active { transform: scale(.94); }

/* Custom stop photo upload */
.custom-field input[type="file"] {
    width: 100%; border: 1px dashed var(--stone-300); border-radius: 9px;
    padding: 8px; background: var(--stone-50); font-size: 11px; color: var(--stone-500);
    cursor: pointer;
}
.custom-field input[type="file"]:hover { border-color: var(--maroon); }
.custom-photo-preview {
    margin-top: 8px; aspect-ratio: 16/9; border-radius: 10px;
    background-size: cover; background-position: center;
    border: 1px solid var(--stone-200);
}

/* Cover slide in the premium preview */
.pp-scroll .pp-card.pp-cover {
    flex: 0 0 130px;
    border: 2px solid var(--maroon);
    box-shadow: 0 4px 14px rgba(138,0,0,.22);
}
.pp-cover-kicker {
    position: absolute; top: 8px; left: 8px; z-index: 1;
    font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: var(--maroon); color: #fff; padding: 2px 8px; border-radius: var(--r-full);
}
.pp-cover-name {
    position: absolute; left: 9px; right: 9px; bottom: 10px; z-index: 1;
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
    line-height: 1.25; text-shadow: 0 1px 5px rgba(0,0,0,.65);
}

/* ═══ July 2026 pass 3 — persistent Unassigned pool + repeatable meals ═══
   Desktop (≥1024px): the pool is a sticky left sidebar between the header
   and the bottom of the viewport — always in reach while arranging days.
   Below 1024px: the pool sticks to the top under the header instead.
   (Header ≈ 107px tall: 88px content row + 18px greca + border.) */

:root { --under-header: 116px; }

/* Narrow screens & tablets: sticky top pool */
.pool {
    position: sticky;
    top: var(--under-header);
    z-index: 30;
    max-height: 40vh;
    overflow-y: auto;
    background: rgba(255,255,255,.93);
    overscroll-behavior: contain;
}

/* Desktop: sidebar layout */
@media (min-width: 1024px) {
    .builder-wrap {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }
    .pool {
        margin-bottom: 0;
        max-height: calc(100vh - var(--under-header) - 20px);
        top: var(--under-header);
    }
    .pool-header { flex-wrap: wrap; row-gap: 4px; }
    .pool-hint { margin-left: 0; flex-basis: 100%; }
    .pool-cards { flex-direction: column; align-items: stretch; }
    .pool-chip { justify-content: flex-start; }
    .pool-chip .chip-name {
        flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* Repeatable meal chips */
.chip-repeat {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--maroon-50); color: var(--maroon);
    font-size: 11px; flex-shrink: 0;
}
.pool-chip .chip-dur { margin-left: auto; }

/* ═══ July 2026 pass 4 — bottom day status ═══ */
/* Status border wraps the bottom of the column too */
.day-column { border-bottom: 4px solid var(--status-color, var(--stone-300)); }
/* Progress bar footer, shown once a day has 3+ stops */
.day-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--stone-100);
    background: var(--stone-50);
}
.day-footer .day-progress { flex: 1; margin-top: 0; }
.day-time-bottom { flex-shrink: 0; font-size: 11px; }

/* ═══ July 2026 pass 5 — mobile pool flyout, note counter ═══ */

/* Note character counter */
.ic-note-field { flex: 1; position: relative; }
.ic-note-field textarea { width: 100%; padding-bottom: 20px; }
.ic-note-count {
    position: absolute; right: 8px; bottom: 6px;
    font-size: 10px; font-weight: 700; color: var(--stone-400);
    pointer-events: none;
}
.ic-note-count.at-limit { color: var(--red-500); }

/* Edge tab + close: hidden on desktop where the pool is a sidebar */
.pool-tab, .pool-close { display: none; }

/* Mobile / tablet: right-side flyout drawer, open by default in the builder */
@media (max-width: 1023.98px) {
    .pool {
        position: fixed;
        top: var(--under-header); right: 0; bottom: 0;
        width: min(320px, 86vw);
        max-height: none;
        margin: 0;
        border-radius: var(--r-lg) 0 0 var(--r-lg);
        border-right: none;
        box-shadow: -12px 0 34px rgba(28,25,23,.16);
        transform: translateX(100%);
        transition: transform .32s var(--ease);
        z-index: 60;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(255,255,255,.97);
    }
    .pool.open { transform: translateX(0); }
    .pool-cards { flex-direction: column; align-items: stretch; }
    .pool-chip { justify-content: flex-start; }
    .pool-chip .chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Thin arrow tab riding the drawer's left edge — peeks out when closed */
    .pool-tab {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        position: absolute; left: -34px; top: 40vh;
        width: 34px; padding: 12px 0 10px;
        background: var(--maroon); color: #fff;
        border-radius: 10px 0 0 10px;
        box-shadow: -6px 2px 14px rgba(28,25,23,.22);
        font-size: 13px;
    }
    .pool-tab .i { transition: transform .3s var(--ease); }
    .pool.open .pool-tab .i { transform: rotate(180deg); }
    .pool-tab-count {
        min-width: 20px; height: 20px; padding: 0 4px;
        border-radius: var(--r-full);
        background: #fff; color: var(--maroon);
        font-size: 11px; font-weight: 800;
        display: grid; place-items: center;
    }

    .pool-close {
        display: grid; place-items: center;
        width: 30px; height: 30px; border-radius: 50%;
        color: var(--stone-400); font-size: 14px;
        margin-left: auto;
    }
    .pool-close:hover { color: var(--maroon); background: var(--maroon-50); }
    .pool-header .pool-hint { flex-basis: 100%; margin-left: 0; }
    .pool-header { flex-wrap: wrap; row-gap: 4px; }
}

/* ═══ July 2026 pass 6 — fixes ═══ */

/* Fix 4: white ring around the selection circle on place cards */
.stop-card-check { border: 3px solid #fff; }

/* Fix 3: responsive pool titles */
.pool-title-mobile { display: none; }
.pool-title-desktop { display: inline; }
@media (max-width: 1023.98px) {
    .pool-title-mobile { display: inline; }
    .pool-title-desktop { display: none; }
}

/* Fix 5: phone-shaped live preview frame */
.pp-frame-wrap {
    width: min(320px, 100%);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--stone-200);
    box-shadow: var(--shadow-lg);
    background: #1a1a1a;
}
.pp-frame { border: 0; display: block; }

/* Fix 2: drawer tab is a fixed sibling — outside any overflow container */
@media (max-width: 1023.98px) {
    .pool-tab {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        position: fixed; right: 0; top: 38vh; left: auto;
        width: 34px; padding: 12px 0 10px;
        background: var(--maroon); color: #fff;
        border-radius: 10px 0 0 10px;
        box-shadow: -6px 2px 14px rgba(28,25,23,.28);
        font-size: 13px;
        z-index: 61;
        transition: right .32s var(--ease);
    }
    .pool-tab.open { right: min(320px, 86vw); }
    .pool-tab.open .i { transform: rotate(180deg); }
    /* Tab only exists in the builder view */
    body:not(.in-builder) .pool-tab { display: none; }
}

/* ═══ July 2026 pass 7 — reorder arrows, scaled preview ═══ */
.ic-reorder {
    position: absolute; right: 8px; top: 40px; z-index: 3;
    display: none; flex-direction: column; gap: 4px;
}
.ic-move {
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(255,255,255,.92); color: var(--stone-600);
    display: grid; place-items: center; font-size: 12px;
    box-shadow: var(--shadow-sm);
}
.ic-move:active { background: var(--maroon); color: #fff; }
.ic-move:disabled { opacity: .35; pointer-events: none; }
@media (max-width: 1023.98px) { .ic-reorder { display: flex; } }

/* Preview frame: true phone size, scaled by JS to fit its wrap */
.pp-frame-wrap { aspect-ratio: auto; }
.pp-frame { width: 390px; height: 700px; transform-origin: top left; }

/* Language toggle */
.btn-lang { font-weight: 800; letter-spacing: .06em; padding: 10px 14px; min-width: 46px; }

/* ═══ July 2026 pass 8 — mobile header fit, full ES content ═══ */
/* Horizontal overflow was widening the layout viewport and shoving the
   fixed pool tab (right:0) past the visible screen — guard it. */
body { overflow-x: hidden; }

.logo-icon { display: none; height: 44px; width: auto; box-sizing: content-box; padding: 10px 0; }
@media (max-width: 767.98px) {
    .logo-img { display: none; }
    .logo-icon { display: block; }
    .header-content { gap: 8px; padding-left: 12px; padding-right: 12px; }
    .header-actions { gap: 6px; }
    .btn-lang { padding: 8px 10px; min-width: 38px; }
    #btn-help { padding: 8px 10px; }
    .btn-header-export { padding: 8px 10px; }
    .btn-header-export .header-export-label { display: none; }
}

/* ═══ July 2026 pass 10 — packaged days ═══ */
.day-collapse {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 13px;
    color: var(--stone-400); transition: all .2s;
}
.day-collapse:hover { color: var(--maroon); background: var(--maroon-50); }

.day-collapsed-chips { display: none; }
.day-column.collapsed .day-cards,
.day-column.collapsed .day-add,
.day-column.collapsed .day-footer { display: none; }
.day-column.collapsed .day-collapsed-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px 16px 14px;
}
.day-column.collapsed { align-self: start; }
.day-column.collapsed.drop-hint { outline: 2px dashed var(--maroon); outline-offset: 2px; }
.dcc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--stone-700);
    background: var(--stone-50); border: 1px solid var(--stone-200);
    border-left: 3px solid var(--cat);
    border-radius: var(--r-full); padding: 4px 10px 4px 8px;
}
.dcc-chip .i { font-size: 11px; color: var(--cat); }
.dcc-chip em { font-style: normal; font-weight: 600; color: var(--stone-400); }
.dcc-empty { font-size: 12px; color: var(--stone-400); font-style: italic; }

/* ═══ July 2026 pass 11 — functional lane layout (JS masonry) ═══ */
@media (min-width: 1024px) {
    .days-scroller.masonry {
        display: block;
        position: relative;
    }
    .days-scroller.masonry .day-column,
    .days-scroller.masonry #btn-add-day {
        position: absolute; top: 0; left: 0; margin: 0;
        transition: transform .35s var(--ease);
        will-change: transform;
    }
    .days-scroller.masonry.no-anim .day-column,
    .days-scroller.masonry.no-anim #btn-add-day { transition: none; }
}

/* ═══ July 2026 pass 12 — visible pack arrow + session nudge ═══ */
.day-collapse {
    width: 32px; height: 32px; font-size: 16px;
    color: var(--maroon);
    background: var(--maroon-50);
    border: 1px solid var(--maroon-200);
}
.day-collapse:hover { background: var(--maroon); color: #fff; }
.day-header-row { position: relative; }
.pack-tip {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
    background: var(--maroon); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1.35;
    padding: 9px 13px; border-radius: 10px;
    max-width: 200px; box-shadow: var(--shadow-lg);
    cursor: pointer; animation: tipIn .35s var(--ease) both;
}
.pack-tip::before {
    content: ''; position: absolute; top: -6px; right: 12px;
    width: 12px; height: 12px; background: var(--maroon);
    transform: rotate(45deg);
}
@keyframes tipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ═══ July 2026 pass 13 — wider board (3 lanes + pool), builder bg ═══ */
@media (min-width: 1280px) {
    #view-builder .container { max-width: 1440px; }
}

/* ═══ July 2026 pass 14 — visible add-day tile over photo backgrounds ═══ */
.add-day-tile {
    background: rgba(255, 255, 255, .93);
    border: 2px dashed var(--maroon-300);
    color: var(--maroon);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}
.add-day-tile:hover { background: #fff; border-color: var(--maroon); }

/* ═══ July 2026 pass 15 — black bg base, delete-day, thin footer ═══ */
/* Cream base restored behind the photo backgrounds (dark base reverted) */
body.bg-active { background-color: var(--cream); }

/* 4. Delete a day */
.day-delete {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 12px;
    color: var(--stone-400); transition: all .2s;
}
.day-delete:hover { color: #fff; background: var(--red-500); }

/* 5. Footer: red ribbon on top, no dark band above it, thin */
.site-footer .footer-greca { display: none; }
.site-footer .footer-inner { padding: 12px 20px 14px; }

/* ═══ July 2026 pass 16 — add-day grouping, title chip ═══ */
/* 3. Plus + label as one centered group (grid rows were spreading them) */
.add-day-tile {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 7px;
}

/* 4. Itinerary title on a white rounded chip — the trip's name is the
   centerpiece of personalization */
.title-wrap {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .94);
    border-radius: var(--r-lg);
    padding: 10px 18px;
    box-shadow: var(--shadow-sm);
}

/* ═══ July 2026 pass 18 — pool overflow, tips bulbs, stable columns ═══ */

/* 3. Pool chips: let long ES names shrink, pin the duration so it never
   clips. Chip is a full-width flex row inside the sidebar/drawer. */
#cards-pool .pool-chip {
    display: flex; width: 100%; box-sizing: border-box;
    align-items: center; gap: 8px;
}
#cards-pool .pool-chip .chip-name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cards-pool .pool-chip .chip-dur {
    flex: 0 0 auto; margin-left: auto; white-space: nowrap;
    padding-left: 2px;
}
#cards-pool .pool-chip .chip-repeat { flex: 0 0 auto; }
#cards-pool .pool-chip > .i:first-child { flex: 0 0 auto; }

/* Premium tips slide: self-contained pattern; no external asset request. */
.slide.slide-tips {
    position: absolute !important; inset: 0 !important; isolation: isolate;
    background-color: var(--tips-color, #8a0000);
    background-image:
        linear-gradient(165deg, rgba(255,255,255,.02) 0%, rgba(35,26,22,.58) 100%),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.34%22%3E%3Cpath%20d%3D%22M24%2010a13%2013%200%200%200-8%2023c3%202%204%205%204%208h8c0-3%201-6%204-8a13%2013%200%200%200-8-23Z%22%2F%3E%3Cpath%20d%3D%22M20%2045h8M21%2050h6%22%2F%3E%3Cpath%20d%3D%22M72%2054a13%2013%200%200%200-8%2023c3%202%204%205%204%208h8c0-3%201-6%204-8a13%2013%200%200%200-8-23Z%22%2F%3E%3Cpath%20d%3D%22M68%2089h8M69%2094h6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: center, center;
    background-size: cover, 96px 96px;
    background-repeat: no-repeat, repeat;
}
.slide-tips .tips-card { position: relative; z-index: 1; }
.slide-tips .lock-overlay { z-index: 2; }

/* ═══ July 2026 pass 20 — corner delete X (hover reveal) ═══ */
.day-column { position: relative; }
.day-column, .day-column.collapsed { overflow: visible; } /* the half-out X must not be clipped */
.day-header { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.day-delete {
    position: absolute; top: -13px; right: -13px; z-index: 6;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 1px solid var(--stone-200);
    color: var(--stone-400); font-size: 11px;
    display: grid; place-items: center;
    box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, background .18s ease, color .18s ease;
}
.day-header:hover .day-delete,
.day-delete:hover { opacity: 1; pointer-events: auto; }
.day-delete:hover { background: var(--red-500); border-color: var(--red-500); color: #fff; }
/* Touch screens have no hover — keep it reachable there */
@media (hover: none) { .day-delete { opacity: 1; pointer-events: auto; } }


/* ═══ v3.15 — Festivals & Events + sticky mobile category pills ═══ */
.stops-grid.festival-groups { display: block; }
.festival-month-block { margin-bottom: 30px; }
.festival-month-heading {
    display: flex; align-items: center; gap: 9px;
    margin: 2px 0 13px; padding: 9px 13px;
    border-left: 5px solid #E4572E;
    background: rgba(255,255,255,.84);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    box-shadow: var(--shadow-sm);
}
.festival-month-heading .i { color: #E4572E; font-size: 17px; }
.festival-month-heading h3 {
    font-family: var(--font-display); font-size: 19px; line-height: 1.2;
    color: var(--stone-800);
}
.festival-month-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.festival-custom-block { margin-top: 8px; }
.festival-custom-block .festival-month-heading { border-left-color: var(--stone-500); }
.festival-custom-block .festival-month-heading .i { color: var(--stone-600); }
.stop-date-label { font-weight: 700; color: var(--stone-600); }
.ic-daybadge.event {
    max-width: calc(100% - 82px); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #9a3412;
}

@media (max-width: 767.98px) {
    .category-tabs {
        position: sticky;
        top: calc(var(--header-h) + 18px);
        z-index: 45;
        max-width: none;
        padding: 10px 16px 9px;
        background: rgba(251,247,240,.96);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(138,0,0,.06);
        border-bottom: 1px solid rgba(138,0,0,.14);
        box-shadow: 0 7px 18px rgba(28,25,23,.08);
    }
    .festival-month-grid { grid-template-columns: 1fr; }
    .festival-month-block { margin-bottom: 24px; }
    .festival-month-heading { position: sticky; top: calc(var(--header-h) + 76px); z-index: 20; }
}


/* ═══ v3.17 — article-import onboarding coachmarks ═══ */
.atlas-coach-target {
    position: relative;
    z-index: 100002 !important;
    border-radius: 12px;
    outline: 4px solid rgba(255, 191, 0, .55);
    outline-offset: 5px;
}
.atlas-coachmark {
    position: fixed;
    z-index: 100003;
    width: min(330px, calc(100vw - 24px));
    padding: 16px 44px 15px 17px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 14px;
    background: #8a0000;
    color: #fff;
    box-shadow: 0 18px 48px rgba(0,0,0,.3);
    animation: atlasCoachIn .24s ease both;
}
.atlas-coachmark::before {
    content: '';
    position: absolute;
    top: -7px;
    left: calc(50% - 7px);
    width: 14px;
    height: 14px;
    background: #8a0000;
    transform: rotate(45deg);
}
.atlas-coachmark.above::before { top: auto; bottom: -7px; }
.atlas-coachmark strong { display: block; margin-bottom: 5px; font-size: 15px; line-height: 1.25; }
.atlas-coachmark p { margin: 0; color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.45; }
.atlas-coachmark-close {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.18);
    color: #fff;
    font: 700 19px/1 Arial, sans-serif;
    cursor: pointer;
}
.atlas-coachmark-ok {
    margin-top: 11px;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: #fff;
    color: #8a0000;
    font: 800 12px/1.1 inherit;
    cursor: pointer;
}
@keyframes atlasCoachIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .atlas-coachmark { animation: none; }
}

/* ═══ v3.21 — explicit, cache-safe, high-contrast borders ═══ */
/* Avoid color-mix/theme-variable ambiguity: these rules deliberately use
   concrete colors and !important so the visible border layer cannot be lost
   beneath earlier component declarations. */
.category-chip,
.tab-btn {
    border: 2px solid #57534e !important;
}
.category-chip.selected,
.tab-btn.active {
    border-color: #5a1020 !important;
}
.place-category-pill {
    border: 2px solid var(--pill, #57534e) !important;
}
.stop-card-catbadge {
    border: 2px solid #57534e !important;
}
.title-wrap {
    border: 2px solid #57534e !important;
}
.pool,
#cards-pool {
    border: 2px solid #57534e !important;
}
.festival-month-heading {
    border-top: 2px solid #57534e !important;
    border-right: 2px solid #57534e !important;
    border-bottom: 2px solid #57534e !important;
}

/* Opening/home screen panels */
.hero-text.text-scrim,
.setup-card,
.how-steps > .step-card,
.trust-badges {
    border: 2px solid #78716c !important;
}
.hero-eyebrow {
    border: 2px solid #8a0000 !important;
}
.counter,
.date-input,
.trip-name-input {
    border: 2px solid #78716c !important;
}

@media (max-width: 767.98px) {
    .category-tabs {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}