/* ============================================================
   Design Tokens + Bootstrap Variable Overrides
   Voyamemo — "tasteful polish" refresh
   Brand blue kept; warmer neutrals + amber accent; Fraunces/Inter type.
   ============================================================ */
:root {
    --color-primary:      #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #eef4ff;
    --color-secondary:    #e0803a;  /* warm terracotta accent (travel warmth) */
    --color-secondary-soft:#fbf1e8;

    /* Warmer "paper" neutrals (was cold blue-gray) */
    --color-background:   #f7f5f1;
    --color-surface:      #ffffff;
    --color-surface-2:    #fbfaf7;
    --color-text:         #1f2430;
    --color-muted:        #6b7280;
    --color-border:       #e9e5dd;
    --color-border-strong:#ddd7cc;
    --color-success:      #16a34a;
    --color-danger:       #dc2626;

    /* Fonts */
    --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    /* Softer, layered shadows */
    --card-shadow:       0 1px 2px rgba(30,30,40,.05), 0 1px 3px rgba(30,30,40,.05);
    --card-shadow-hover: 0 18px 40px rgba(30,30,40,.13), 0 6px 14px rgba(30,30,40,.08);
    --card-transition:   transform .2s ease, box-shadow .2s ease;

    /* Bootstrap overrides */
    --bs-primary:          #2563eb;
    --bs-primary-rgb:      37, 99, 235;
    --bs-link-color:       #2563eb;
    --bs-link-hover-color: #1d4ed8;
    --bs-body-color:       #1f2430;
    --bs-body-bg:          #f7f5f1;
    --bs-border-color:     #e9e5dd;
    --bs-card-bg:          #ffffff;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size:   1rem;
    --bs-body-line-height: 1.65;
    --bs-border-radius:      0.625rem;
    --bs-border-radius-sm:   0.5rem;
    --bs-border-radius-lg:   1rem;
}

/* ============================================================
   Base / Typography
   ============================================================ */
body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Display serif for hero + section headings; card titles stay sans (below). */
h1, h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    font-weight: 600;
}

h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* Keep compact UI headings in the sans UI face for legibility */
.card-title,
.day-header-badge,
h5.card-title, h6.card-title,
.navbar-brand {
    font-family: var(--font-body) !important;
    letter-spacing: -0.01em;
}

/* Optional helpers you can drop onto markup later */
.font-display { font-family: var(--font-display) !important; }
.eyebrow {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .55rem;
}

/* Fluid type scale for headings on small screens */
@media (max-width: 575.98px) {
    h1, .display-5 { font-size: clamp(1.75rem, 6.5vw, 2.4rem); }
    h2             { font-size: clamp(1.4rem, 5vw, 1.85rem); }
}

/* Readable prose lines */
.prose {
    max-width: 68ch;
    line-height: 1.75;
}

/* ============================================================
   Layout
   ============================================================ */
.main-content {
    padding-top: 68px; /* height of fixed navbar */
    min-height: calc(100vh - 68px - 100px);
}

@media (max-width: 767.98px) {
    .main-content { padding-top: 60px; }
}

/* ============================================================
   Buttons — pill shape, subtle depth
   ============================================================ */
.btn {
    --bs-btn-border-radius: 999px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .005em;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-lg { padding: .75rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: .42rem 1rem; }

.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1d4ed8;
    background-image: linear-gradient(180deg, #3b74f4, #2563eb);
    box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
.btn-primary:hover {
    background-image: linear-gradient(180deg, #2f68ee, #1d4ed8);
    box-shadow: 0 8px 20px rgba(37,99,235,.36);
}

.btn-light {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    box-shadow: var(--card-shadow);
}
.btn-light:hover { box-shadow: var(--card-shadow-hover); }

.btn-outline-primary {
    --bs-btn-color: #1d4ed8;
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-hover-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: #4b5563;
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-bg: #f4f2ec;
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-hover-color: #1f2430;
}

/* ============================================================
   Hero Section
   ------------------------------------------------------------
   Every public hero — landing, tenant home, journey, day — is built from the
   .hero-bleed rules in the landing section near the end of this file: one picture edge
   to edge under a transparent bar. The old gradient box that used to live here is gone.
   ============================================================ */

/* ============================================================
   Navbar
   ============================================================ */
.site-navbar {
    transition: box-shadow .2s;
    background-color: rgba(255,255,255,.9) !important;
    backdrop-filter: saturate(1.4) blur(8px);
}

.site-navbar.scrolled {
    box-shadow: 0 2px 14px rgba(30,30,40,.10);
}

.navbar-brand { font-weight: 800; }

/* Active nav link indicator */
.navbar .nav-link.active {
    color: var(--color-primary) !important;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .navbar .nav-link.active::after {
        content: '';
        display: block;
        height: 2px;
        background: var(--color-primary);
        border-radius: 1px;
        margin-top: 2px;
    }
}

/* ============================================================
   Cards — hover lift, warmer surface
   ============================================================ */
.card {
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-md);
}

.card-lift {
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

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

/* Zoom cover imagery gently on hover */
.card-lift .card-img-top,
.card-lift .trip-cover-img,
.card-lift .entry-thumbnail {
    transition: transform .35s ease;
}
.card-lift:hover .card-img-top,
.card-lift:hover .trip-cover-img,
.card-lift:hover .entry-thumbnail {
    transform: scale(1.045);
}

.card-title {
    font-weight: 700;
}

/* Soften Bootstrap badges a touch */
.badge { font-weight: 600; letter-spacing: .01em; padding: .4em .7em; }
.badge.text-bg-warning { color: #7a4a12 !important; background-color: #fbe4cf !important; }

/* ============================================================
   Admin — sidebar & stat cards
   ============================================================ */
/* ============================================================
   Two-factor QR code
   ============================================================ */
/* The SVG carries a viewBox and no width/height, so it takes its size from here.
   width:100% + height:auto keeps it square via the viewBox ratio; display:block stops
   the inline-element baseline gap that would otherwise nudge the block below it. */
.qr-code {
    width: 200px;
    max-width: 100%;
    margin-bottom: 1rem;
}

.qr-code svg {
    width: 100%;
    height: auto;
    display: block;
    /* A white quiet zone on a white card is invisible but still needs to be there for
       scanners; the border makes the code's extent obvious to a human. */
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: .375rem;
}

/* ============================================================
   Admin sidebar
   ============================================================ */
/* Shared by AdminLayout and HelpdeskLayout. Global rather than a scoped .razor.css,
   because CSS isolation would tie the collapsible behaviour to whichever single layout
   owned the file — and both shells use it. */
.admin-sidebar {
    background: #161c26 !important;
    width: 240px;
    min-width: 240px;
    padding: 1rem;
    transition: width 0.22s ease, min-width 0.22s ease;
    overflow: hidden;
}

/* The collapsed flag lives on <html>, not on the sidebar itself.
   Two reasons: it survives Blazor's enhanced navigation, which replaces the body but not
   the root element — so the sidebar no longer springs back open on every click — and an
   inline script in <head> can apply it before first paint, so a collapsed sidebar never
   flashes open on load. */
.sidebar-collapsed .admin-sidebar {
    width: 62px;
    min-width: 62px;
}

/* The toggle shows whichever icon matches the action available: collapse when expanded,
   expand when collapsed. Driven by CSS rather than by script so it cannot fall out of
   step with the state the sidebar is actually in. */
.sidebar-toggle .icon-expand { display: none; }
.sidebar-collapsed .sidebar-toggle .icon-expand { display: inline-block; }
.sidebar-collapsed .sidebar-toggle .icon-collapse { display: none; }

/* Sidebar header: brand left, toggle right when expanded; toggle centred when collapsed */
.admin-sidebar .sidebar-header {
    justify-content: space-between;
}

.sidebar-collapsed .admin-sidebar .sidebar-header {
    justify-content: center;
}

/* Keep all text on a single line so overflow:hidden clips cleanly during the transition */
.admin-sidebar .nav-link,
.admin-sidebar .sidebar-header a {
    white-space: nowrap;
}

/* Hide text labels in collapsed state */
.sidebar-collapsed .admin-sidebar .nav-label {
    display: none;
}

/* Centre nav-link icons when collapsed */
.sidebar-collapsed .admin-sidebar .nav-link {
    display: flex;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Sign-out button: also centre icon when collapsed */
.sidebar-collapsed .admin-sidebar .btn .nav-label {
    display: none;
}
.admin-sidebar .nav-pills {
    --bs-nav-pills-border-radius: 10px;
}
.admin-sidebar .nav-link {
    border-radius: 10px;
    padding: .55rem .75rem;
    font-weight: 500;
    color: #c4cbd6 !important;
    transition: background-color .15s, color .15s;
}
.admin-sidebar .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff !important;
}
.admin-sidebar .nav-link.active {
    background: var(--color-primary);
    color: #fff !important;
}
.admin-sidebar .sidebar-header .fs-5 { letter-spacing: -.01em; }

/* ── Phones and small tablets: drawer behind a hamburger ─────────────
   Below lg the sidebar leaves the flow entirely. A slim top bar carries the brand and
   the hamburger; the sidebar slides in over the page as a full-height drawer and a
   backdrop dims the rest. The open flag lives on <html> like the collapsed one, and
   site.js clears it on every navigation. The desktop collapse preference is ignored
   here: a drawer you opened on purpose always shows its labels. */
.admin-topbar { display: none; }
.admin-backdrop { display: none; }

@media (max-width: 991.98px) {
    .admin-shell { flex-direction: column; }

    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: .75rem;
        min-height: 56px;
        padding: 0 .75rem;
        background: #161c26;
        color: #fff;
        box-shadow: 0 1px 0 rgba(255,255,255,.06);
    }

    .admin-topbar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #fff;
        font-size: 1.6rem;
        line-height: 1;
    }

    .admin-topbar-toggle:hover,
    .admin-topbar-toggle:focus-visible { background: rgba(255,255,255,.08); outline: none; }

    .admin-topbar-brand {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.05rem;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-sidebar,
    .sidebar-collapsed .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(300px, 86vw);
        min-width: 0;
        z-index: 1045;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: none;
    }

    .admin-menu-open .admin-sidebar {
        transform: none;
        box-shadow: 0 0 40px rgba(0,0,0,.35);
    }

    /* Undo the desktop collapse inside the drawer. */
    .sidebar-collapsed .admin-sidebar .nav-label { display: inline; }
    .sidebar-collapsed .admin-sidebar .btn .nav-label { display: inline; }
    .sidebar-collapsed .admin-sidebar .nav-link {
        display: block;
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .sidebar-collapsed .admin-sidebar .sidebar-header { justify-content: space-between; }

    .admin-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(16,22,38,.55);
        opacity: 0;
        transition: opacity .22s ease;
    }

    .admin-menu-open .admin-backdrop { display: block; opacity: 1; }
    .admin-menu-open { overflow: hidden; }

    .admin-main { padding: 1rem !important; }

    /* Breadcrumbs and headings get room to breathe on a narrow screen. */
    .admin-main .breadcrumb { flex-wrap: wrap; }
    .admin-main h1.h3 { font-size: 1.35rem; }
}

/* ── Admin dashboard ──────────────────────────────────────────────────
   A greeting and the action of the day, the journey in progress, the week in four numbers,
   then what moved: comments, drafts, updates, followers. */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.dash-eyebrow {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.dash-section-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.75rem 0 .75rem;
}

.dash-spot {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.dash-spot-empty { grid-template-columns: 1fr; padding: 2rem; }

.dash-spot-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    font-size: 2.5rem;
    background: linear-gradient(160deg, #101a33 0%, #1f3a3a 55%, #33471b 100%);
}

.dash-spot-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dash-spot-body { padding: 1.5rem 1.75rem; min-width: 0; }

.dash-spot-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
    margin-bottom: .75rem;
}

.dash-spot-progress span { display: block; height: 100%; background: var(--color-moss); border-radius: 999px; }

.dash-spot-facts {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    font-size: .9rem;
    color: var(--color-muted);
}

.dash-spot-facts i { color: var(--color-primary); margin-right: .4rem; }

@media (max-width: 767.98px) {
    .dash-spot { grid-template-columns: 1fr; }
    .dash-spot-cover { min-height: 160px; aspect-ratio: 16 / 9; }
    .dash-spot-body { padding: 1.1rem 1.1rem 1.25rem; }
}

.dash-pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

@media (max-width: 767.98px) {
    .dash-pulse { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

.dash-pulse-cell {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dash-pulse-label { font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.dash-pulse-label i { color: var(--color-primary); margin-right: .4rem; }
.dash-pulse-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.dash-pulse-total { font-size: .78rem; color: var(--color-muted); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

@media (max-width: 991.98px) {
    .dash-grid { grid-template-columns: 1fr; }
}

.dash-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    min-width: 0;
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.dash-card-foot {
    margin-top: auto;
    padding: .6rem 1.1rem;
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
    color: var(--color-muted);
}

.dash-empty { margin: 0; padding: 1.25rem 1.1rem; color: var(--color-muted); font-size: .9rem; }

.dash-list { list-style: none; margin: 0; padding: .35rem 0; }
.dash-list > li + li { border-top: 1px solid var(--color-border); }

.dash-comment,
.dash-follower {
    display: flex;
    gap: .75rem;
    padding: .7rem 1.1rem;
}

.dash-avatar {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: var(--color-moss);
}

.dash-avatar-soft { background: var(--color-primary-soft); color: var(--color-primary); }

.dash-comment-body { min-width: 0; flex: 1 1 auto; }
.dash-comment-meta { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .82rem; margin-bottom: .15rem; }
.dash-comment-text { display: block; color: var(--color-text); text-decoration: none; font-size: .92rem; line-height: 1.4; }
.dash-comment-text:hover { color: var(--color-primary); }

.dash-entry {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.1rem;
    color: var(--color-text);
    text-decoration: none;
}

.dash-entry:hover { background: var(--color-surface-2); color: var(--color-text); }

.dash-entry-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    color: var(--color-muted);
}

.dash-entry-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-entry-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-entry-title { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-entry-meta { font-size: .78rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-entry-when { flex: 0 0 auto; font-size: .78rem; color: var(--color-muted); }

/* ── Admin lists ──────────────────────────────────────────────────────
   One look for every admin table, after Ghost, Podia and Deel: quiet uppercase column
   labels, a picture or an initial beside a two-line primary cell, soft status pills,
   dividers between rows and nothing between columns, and actions that stay out of the
   way until the row is hovered. */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.list-count {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-right: auto;
}

.list-search {
    position: relative;
    flex: 0 1 280px;
    min-width: 200px;
}

.list-search i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

.list-search input { padding-left: 2.1rem; border-radius: 999px; }

.filter-pills {
    display: inline-flex;
    gap: .2rem;
    padding: .2rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.filter-pill {
    border: 0;
    background: transparent;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-muted);
}

.filter-pill.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--card-shadow); }
.filter-pill:hover:not(.is-active) { color: var(--color-text); }

.list-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.list-stat {
    padding: .7rem .9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.list-stat-label { font-size: .75rem; font-weight: 600; color: var(--color-muted); }
.list-stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }

/* Paged lists: the foot with "showing 1–25 of 312", windowed page buttons and a size choice.
   Sits under .data-table-wrap and shares its surface language with the filter pills. */
.list-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .9rem;
}

.list-pager-info { font-size: .82rem; color: var(--color-muted); margin-right: auto; }

.list-pager-controls { display: inline-flex; align-items: center; gap: .2rem; }

.list-pager-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s, color .12s;
}

.list-pager-btn:hover:not(:disabled):not(.is-active) { background: var(--color-surface-2); }
.list-pager-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.list-pager-btn:disabled { opacity: .4; cursor: default; }
.list-pager-gap { color: var(--color-muted); padding: 0 .2rem; }

.list-pager-size { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--color-muted); margin: 0; }
.list-pager-size .form-select { width: auto; border-radius: 999px; padding-right: 2rem; }

/* A sort choice in the toolbar, drawn like the search field beside it. */
.list-sort { flex: 0 0 auto; }
.list-sort .form-select { border-radius: 999px; font-size: .85rem; padding-right: 2.2rem; }

/* While a page is being fetched the old rows stay, dimmed, so the table does not jump. */
.data-table-wrap.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

.data-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.data-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead th {
    padding: .7rem 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table tbody td {
    padding: .75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    font-size: .92rem;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color .12s; }
.data-table tbody tr:hover { background: var(--color-surface-2); }

.data-table .cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .cell-muted { color: var(--color-muted); font-size: .85rem; }
.data-table .cell-when { white-space: nowrap; }
.data-table .cell-when small { display: block; font-size: .75rem; color: var(--color-muted); }
.data-table .cell-actions { text-align: right; white-space: nowrap; width: 1%; }

/* Columns a phone can live without. */
@media (max-width: 767.98px) {
    .data-table .col-optional { display: none; }
    .data-table thead th, .data-table tbody td { padding: .65rem .75rem; }
}

.cell-primary {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    /* Capped, so a long title truncates instead of pushing the status and the actions out
       of the frame; the table otherwise sizes the column to its widest nowrap line. */
    max-width: 440px;
}

@media (max-width: 767.98px) {
    .cell-primary { max-width: 62vw; }
}

.cell-primary-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    color: var(--color-muted);
    font-size: 1.1rem;
}

.cell-primary-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell-primary-thumb.is-wide { width: 64px; }

.cell-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: var(--color-moss);
}

.cell-avatar.is-soft { background: var(--color-primary-soft); color: var(--color-primary); }

.cell-primary-body { min-width: 0; display: flex; flex-direction: column; }

.cell-primary-title {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.cell-primary-title:hover { color: var(--color-primary); }

.cell-primary-sub {
    font-size: .8rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-width: 48ch;
}

/* Soft pills: tinted background, dark ink, no shouting. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .8; }
.pill-success { background: #e3f3e8; color: #1d6b3a; }
.pill-muted { background: var(--color-surface-2); color: var(--color-muted); border: 1px solid var(--color-border); }
.pill-warning { background: #fbe9c9; color: #7a4a12; }
.pill-danger { background: #fbe1e1; color: #8f2424; }
.pill-info { background: var(--color-primary-soft); color: var(--color-primary); }

/* Row actions: quiet until the row is hovered; always visible where there is no hover. */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    opacity: .55;
    transition: opacity .12s;
}

.data-table tr:hover .row-actions,
.data-table tr:focus-within .row-actions { opacity: 1; }

@media (hover: none) { .row-actions { opacity: 1; } }

.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    text-decoration: none;
    font-size: .95rem;
}

.row-action:hover { background: var(--color-border); color: var(--color-text); }
.row-action.is-danger:hover { background: #fbe1e1; color: #8f2424; }
.row-action.is-text { width: auto; padding: 0 .6rem; font-size: .82rem; font-weight: 600; color: var(--color-primary); }
.row-action.is-text:hover { background: var(--color-primary-soft); color: var(--color-primary); }

.list-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

.list-empty i { font-size: 2.25rem; display: block; margin-bottom: .5rem; color: var(--color-border-strong); }

/* Admin dashboard stat cards: gradient depth on the coloured tiles */
.card.text-bg-primary   { background-image: linear-gradient(135deg,#3b74f4,#2563eb) !important; border: 0; border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.card.text-bg-success   { background-image: linear-gradient(135deg,#22b07d,#16a34a) !important; border: 0; border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.card.text-bg-info      { background-image: linear-gradient(135deg,#e88f4d,#e0803a) !important; border: 0; border-radius: var(--radius-md); box-shadow: var(--card-shadow); color:#fff !important; }
.card.text-bg-secondary { background-image: linear-gradient(135deg,#7c8698,#5b6472) !important; border: 0; border-radius: var(--radius-md); box-shadow: var(--card-shadow); }
.card.text-bg-info .text-white-50 { color: rgba(255,255,255,.85) !important; }

/* ============================================================
   Forms — friendlier focus
   ============================================================ */
.form-control, .form-select {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: .6rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.input-group-text {
    background: #f4f2ec;
    border-color: var(--color-border-strong);
    color: var(--color-muted);
}

/* ============================================================
   Subscribe CTA section
   ============================================================ */
.subscribe-cta {
    background: linear-gradient(135deg, #eef4ff 0%, #e5edff 60%, #fbf1e8 100%);
    border-top: 1px solid #dbe6ff;
    border-bottom: 1px solid #dbe6ff;
}

/* ============================================================
   Trip Day Timeline
   ============================================================ */
.trip-timeline {
    position: relative;
    padding-left: 2rem;
}

.trip-timeline::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-border));
    border-radius: 1px;
}

.trip-timeline-item {
    position: relative;
    margin-bottom: 1rem;
}

.trip-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.56rem;
    top: 1.35rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-primary);
    z-index: 1;
    transition: transform .15s ease;
}

.trip-timeline-item:hover::before {
    transform: scale(1.25);
}

.trip-timeline-item.has-updates::before {
    background-color: var(--color-secondary);
    box-shadow: 0 0 0 2px var(--color-secondary);
}

/* ============================================================
   Day Pager (previous / next day on a day page)
   ============================================================ */
.day-pager {
    margin: 2.5rem 0 1rem;
}

.day-pager-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: var(--card-transition), border-color .2s ease;
}

.day-pager-link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    color: var(--color-text);
}

.day-pager-dir {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.day-pager-day {
    font-size: .78rem;
    color: var(--color-muted);
}

.day-pager-title {
    font-weight: 600;
    line-height: 1.3;
    /* Day titles are free text; two lines keep a long one from shoving the pager around. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================================
   Image Gallery
   ============================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

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

/* An <a> to the full image, so the gallery still works without JS. Stripped of link
   styling — it should read as a tile, not as text. */
.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--color-border);
    color: inherit;
    text-decoration: none;
}

.gallery-item:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

.gallery-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .25s ease, opacity .15s;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.04);
    opacity: .88;
}

.gallery-caption {
    font-size: .8rem;
    color: var(--color-muted);
    text-align: center;
    margin-top: .3rem;
    line-height: 1.3;
}

/* ============================================================
   Lightbox
   ============================================================ */
/* A native <dialog>. showModal() handles positioning, the top layer, Escape and the focus
   trap, so the old hand-rolled fixed overlay is gone — only the dimming remains, and that
   is what ::backdrop is for. */
dialog.tb-lightbox {
    border: 0;
    padding: 0;
    margin: auto;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    color: #fff;
}

dialog.tb-lightbox::backdrop {
    background: rgba(0, 0, 0, .92);
}

dialog.tb-lightbox:not([open]) {
    display: none;
}

dialog.tb-lightbox .lightbox-content {
    height: 100%;
    justify-content: center;
    margin: 0 auto;
}

.lightbox-slide {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* [hidden] must win over the flex above, or every slide would show at once. It is also
   what keeps the browser from fetching the images the reader has not opened. */
.lightbox-slide[hidden] {
    display: none;
}

.lightbox-content {
    position: relative;
    max-width: min(92vw, 1200px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.25rem;
    display: block;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #fff;
    font-size: 1.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    z-index: 10;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, .3);
}

.lightbox-prev { left: -3.5rem; }
.lightbox-next { right: -3.5rem; }

@media (max-width: 575.98px) {
    .lightbox-prev { left: .25rem; }
    .lightbox-next { right: .25rem; }
    .lightbox-nav  { background: rgba(0,0,0,.45); }
}

.lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: .75;
    transition: opacity .15s;
}

.lightbox-close:hover { opacity: 1; }

.lightbox-caption {
    color: rgba(255,255,255,.85);
    font-size: .875rem;
    margin-top: .5rem;
    text-align: center;
}

.lightbox-counter {
    color: rgba(255,255,255,.5);
    font-size: .75rem;
    margin-top: .25rem;
}

/* ============================================================
   Video Gallery
   ============================================================ */
.video-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.video-gallery-item {
    border-radius: 0.5rem;
    overflow: hidden;
    background: #000;
}

.video-gallery-player {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   Entry / Update Cards
   ============================================================ */
.entry-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.trip-cover-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ============================================================
   Journey Entry (day detail) body
   ============================================================ */
.entry-body {
    font-size: 1.08rem;
    line-height: 1.8;
    color: #3a4150;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ============================================================
   Day header badge
   ============================================================ */
.day-header-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(180deg,#3b74f4,#2563eb);
    color: #fff;
    border-radius: 2rem;
    padding: .3rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: var(--color-muted);
}

.empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: .7;
    line-height: 1;
}

.empty-state-message {
    font-size: 1.05rem;
    max-width: 36ch;
    margin: 0 auto;
}

/* ============================================================
   Loading spinner
   ============================================================ */
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
    min-height: 240px;
}

/* ============================================================
   Planned itinerary block (day detail)
   ============================================================ */
.itinerary-block {
    background: #f1f5f9;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 .5rem .5rem 0;
    padding: 1rem 1.25rem;
}

/* ============================================================
   Pagination / section spacing helpers
   ============================================================ */
.section-gap { margin-bottom: 3.5rem; }

.pagination {
    --bs-pagination-color: #4b5563;
    --bs-pagination-hover-color: var(--color-primary-dark);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-border-radius: 999px;
    gap: .25rem;
}
.pagination .page-link { border-radius: 999px !important; }

@media (max-width: 575.98px) {
    .section-gap { margin-bottom: 2.5rem; }
    .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* ============================================================
   Leaflet Map
   ============================================================ */
.tb-map {
    width: 100%;
    height: 380px;
    border-radius: var(--radius-md);
    z-index: 0;
    border: 1px solid var(--color-border);
}

@media (max-width: 575.98px) {
    .tb-map { height: 260px; }
}

.tb-map-marker {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.tb-map-marker > span {
    transform: rotate(45deg);
}

/* ============================================================
   Blazor Framework Styles
   ============================================================ */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-danger);
    color: #fff;
    padding: 0.75rem 1rem;
    text-align: center;
    z-index: 1100;
    font-size: 0.9rem;
    display: none;
}

#blazor-error-ui a {
    color: #fff;
    font-weight: 600;
    margin: 0 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 1rem;
}

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

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

/* ============================================================
   Share Buttons
   ============================================================ */

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.share-buttons-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    /* Centred against the button block rather than sitting on its baseline. */
    align-self: center;
}

.share-buttons-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Equal row and column gaps, so a wrapped second row lines up with the first. */
    gap: .5rem;
    justify-content: inherit;
}

.btn-share {
    font-size: 0.8125rem;
    border: none;
    color: #fff !important;
    transition: opacity 0.15s ease;
    /* Flex centring instead of the inline baseline: the icon and label are optically
       centred, and every button ends up exactly the same height. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    line-height: 1.25;
    /* One shared width keeps the block even when it wraps in a narrow sidebar. */
    min-width: 7.5rem;
}

.btn-share > i {
    font-size: 1em;
    line-height: 1;
}

.btn-share:hover,
.btn-share:focus {
    opacity: 0.85;
    color: #fff !important;
}

.btn-share-whatsapp  { background-color: #25D366; --bs-btn-hover-bg: #25D366; --bs-btn-hover-border-color: transparent; }
.btn-share-facebook  { background-color: #1877F2; --bs-btn-hover-bg: #1877F2; --bs-btn-hover-border-color: transparent; }
.btn-share-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --bs-btn-hover-border-color: transparent;
}
.btn-share-instagram:hover,
.btn-share-instagram:focus {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* ============================================================
   Page eyebrow — "whose diary is this"
   (the .eyebrow base lives with the typography helpers at the top)
   ============================================================ */
.eyebrow-sep {
    margin: 0 .45rem;
    opacity: .55;
}

/* The hero sits on a dark scrim, so the terracotta accent is swapped for a legible
   translucent white; the amber tone would disappear against the cover photo. */
.hero-eyebrow {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
    margin-bottom: .6rem;
}

/* ============================================================
   Account flows — sign in, sign up, onboarding wizard
   ============================================================ */
.auth-shell {
    /* A hair warmer than the page background, so the cards read as raised. */
    background:
        radial-gradient(1100px 420px at 50% -140px, rgba(37,99,235,.10), transparent 70%),
        var(--color-background);
}

.auth-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
}

.auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 26px;
}

/* Wizard step rail ------------------------------------------------------- */
.wizard-steps { margin-bottom: 1.75rem; }

.wizard-steps-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.wizard-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    min-width: 0;
}

/* The connector is drawn on each step but the first, so it always spans exactly the
   gap between two markers and never dangles off either end of the rail. */
.wizard-step + .wizard-step::before {
    content: '';
    position: absolute;
    top: 17px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--color-border-strong);
    z-index: 0;
}

.wizard-step-done + .wizard-step::before,
.wizard-step-current::before {
    background: var(--color-primary);
}

.wizard-step-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    color: var(--color-muted);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
}

.wizard-step-label {
    margin-top: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-muted);
    line-height: 1.3;
}

.wizard-step-current .wizard-step-marker {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.wizard-step-current .wizard-step-label { color: var(--color-text); }

.wizard-step-done .wizard-step-marker {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.wizard-step-done .wizard-step-label { color: var(--color-text); }

@media (max-width: 575.98px) {
    .wizard-step-label { font-size: .7rem; }
    .wizard-step-marker { width: 32px; height: 32px; }
    .wizard-step + .wizard-step::before { top: 15px; }
}

/* ============================================================
   Header — signed-in greeting
   ============================================================ */
.nav-greeting {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    /* Clip a long display name rather than pushing the buttons off the bar. */
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .nav-greeting { max-width: none; }
}

/* ============================================================
   Contact page
   ============================================================ */
.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.5rem;
}

.contact-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 1.15rem;
}

.contact-detail-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.contact-detail-value {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    word-break: break-word;
}

a.contact-detail-value:hover { color: var(--color-primary); }

/* Honeypot: off-canvas rather than display:none, which the better bots skip. */
.contact-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Photobook preview ───────────────────────────────────────────────
   A page is drawn as a box of the product's proportions with every slot
   positioned in percentages, straight from the template geometry. Nothing
   here decides layout: move a slot in PhotobookTemplates and the preview
   moves with it, which is what keeps preview and print the same design. */
.pb-page {
    position: relative;
    width: 100%;
    background: #fff;
    box-shadow: var(--card-shadow);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pb-slot {
    position: absolute;
    overflow: hidden;
    display: flex;
}

.pb-slot img {
    width: 100%;
    height: 100%;
    /* Fit, never fill. The box already carries the photograph shape, so this is a guard
       against rounding rather than a letterbox - and it is the one line that guarantees
       nothing is ever cut off, whatever the geometry upstream believes. */
    object-fit: contain;
    display: block;
}

/* The cover is the single surface where a photograph is cut to fill its space. */
.pb-cover .pb-slot-image img { object-fit: cover; }

.pb-slot-title { align-items: center; }
.pb-slot-body { align-items: flex-start; }
.pb-slot-caption { align-items: flex-end; }

/* A day heading laid over the page rather than given room of its own, so a page that
   carries no heading — nine in ten of them — loses no space to the possibility. It sits
   over photographs, so it brings its own darkness with it rather than trusting whatever
   happens to be underneath. */
.pb-slot-heading {
    align-items: center;
    pointer-events: none;
}

.pb-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.5rem, 1.9cqw, 1rem);
    line-height: 1.2;
    color: #fff;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
    background: rgba(33, 37, 41, 0.62);
    /* One line: a heading that wrapped would cover the photograph it sits on. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pb-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.9rem, 3.2cqw, 1.6rem);
    line-height: 1.15;
}

.pb-body {
    font-size: clamp(0.4rem, 1.5cqw, 0.8rem);
    line-height: 1.45;
    /* The engine already split the text to fit; anything past the slot is a sign
       the estimate was off, so it is clipped rather than allowed to overlap. */
    white-space: pre-line;
    overflow: hidden;
}

.pb-caption {
    font-size: clamp(0.35rem, 1.2cqw, 0.7rem);
    color: #6c757d;
}

/* ── The cover ───────────────────────────────────────────────────────
   The only page whose text is set on a photograph rather than on paper. Black
   type on an unknown picture is a coin toss, and it lost: the title was very
   nearly invisible on a bright photo. So the cover brings its own contrast —
   the photograph darkens towards the foot, and the title sits in a band of its
   own on top of it. Both are needed: the band alone floats, and the gradient
   alone still leaves the title at the mercy of whatever is behind it. */
.pb-cover .pb-slot-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.55) 72%,
        rgba(0, 0, 0, 0.82) 100%);
}

.pb-cover .pb-slot-title,
.pb-cover .pb-slot-caption { justify-content: center; }

.pb-cover .pb-title {
    color: #fff;
    text-align: center;
    font-size: clamp(1rem, 4.4cqw, 2.2rem);
    letter-spacing: -0.01em;
    padding: 0.2em 0.7em;
    border-radius: var(--radius-sm);
    background: rgba(17, 20, 23, 0.55);
    /* The band is the contrast; the shadow is what survives if a browser drops it. */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.pb-cover .pb-caption {
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    font-size: clamp(0.4rem, 1.7cqw, 0.9rem);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Container queries so type scales with the page box rather than the viewport —
   the same page reads correctly in the big view and in the thumbnail strip. */
.pb-page { container-type: inline-size; }

/* Text stays visible in a thumbnail, unreadably small but unmistakably text. Hiding it made
   a story page look like an empty one - and a page holding an image and two paragraphs looked
   like a lone rectangle floating on white, which is exactly how it was reported. */
.pb-page-compact .pb-body { -webkit-line-clamp: 8; line-clamp: 8; }

.pb-missing {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 8px, #ececec 8px, #ececec 16px);
    color: #adb5bd;
}

.pb-folio {
    position: absolute;
    right: 0.5rem;
    bottom: 0.25rem;
    font-size: 0.55rem;
    color: #adb5bd;
}

.pb-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.5rem;
}

.pb-strip button {
    /* Block, full width: the page inside is sized from its container and positions every
       slot absolutely, so an inline button shrinks to nothing and the thumbnail vanishes. */
    display: block;
    width: 100%;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pb-strip button.pb-current { border-color: var(--color-primary); }

/* ── Trip page sidebar ───────────────────────────────────────────────
   The trip details and the photobook card stick together as one block.
   Sticking each card on its own would pin both at the same offset and let
   the second scroll up underneath the first. */
@media (min-width: 992px) {
    .trip-sidebar {
        /* A sticky block taller than the screen pins its top and strands its
           bottom, so its last button can never be reached. Let it scroll
           within itself rather than lose the end of it. */
        max-height: calc(100vh - 88px - 1.5rem);
        overflow-y: auto;
        /* Room for the hover lift on the cards inside, which an overflow
           container would otherwise clip. */
        padding: 0.25rem;
        margin: -0.25rem;
    }
}

/* Each thumbnail says what its page is for. A grid of numbered rectangles leaves the
   traveller counting pages and guessing which is the title and which is padding. */
.pb-thumb {
    margin: 0;
}

.pb-thumb figcaption {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #6c757d;
    text-align: center;
    margin-top: 0.15rem;
}

.pb-thumb-blank .pb-page {
    box-shadow: none;
    border: 1px dashed #ced4da;
    background: #fbfbfc;
}

/* ── Photobook landing: the book, three facts, one button ──────────── */
.pb-landing {
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 767.98px) {
    .pb-landing { grid-template-columns: 1fr; gap: 1.5rem; }
    .pb-landing-book { max-width: 260px; }
}

.pb-mock {
    position: relative;
    width: 100%;
    border-radius: 4px 10px 10px 4px;
    overflow: hidden;
    background: linear-gradient(160deg, #101a33 0%, #1f3a3a 55%, #33471b 100%);
    box-shadow: 0 24px 40px -18px rgba(16,22,38,.45), inset 6px 0 10px -6px rgba(0,0,0,.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1.25rem;
    color: #fff;
    text-align: center;
}

.pb-mock img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-mock::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}

.pb-mock-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 4.5cqw, 1.6rem);
    font-weight: 600;
    line-height: 1.15;
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

.pb-landing-eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-moss-deep);
    margin-bottom: .35rem;
}

.pb-landing-facts {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pb-landing-facts i { color: var(--color-primary); margin-right: .5rem; }

.pb-landing-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.pb-landing-price small {
    display: block;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 400;
    color: var(--color-muted);
    margin-top: .25rem;
}

.pb-landing-cta { padding-inline: 1.5rem; }

.pb-landing-steps {
    list-style: none;
    counter-reset: pbstep;
    margin: 2rem 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.pb-landing-steps li {
    counter-increment: pbstep;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: .5rem;
    border-top: 2px solid var(--color-border);
    font-size: .88rem;
    color: var(--color-muted);
}

.pb-landing-steps li strong { color: var(--color-text); }

.pb-landing-steps li strong::before {
    content: counter(pbstep) " · ";
    color: var(--color-primary);
}

.pb-landing-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
}

/* ── The book studio ───────────────────────────────────────────────── */
.pb-steps {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: .3rem;
    display: flex;
    gap: .25rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    max-width: 640px;
}

.pb-step { flex: 1 1 0; min-width: 0; }

.pb-step-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}

.pb-step-marker {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    background: var(--color-border);
    color: var(--color-text);
}

.pb-step-current .pb-step-btn { background: var(--color-surface); color: var(--color-text); box-shadow: var(--card-shadow); }
.pb-step-current .pb-step-marker { background: var(--color-primary); color: #fff; }
.pb-step-done .pb-step-marker { background: var(--color-moss); color: #fff; }

@media (max-width: 575.98px) {
    .pb-steps { border-radius: var(--radius-md); }
    .pb-step-btn { border-radius: var(--radius-sm); padding: .45rem .4rem; }
    .pb-step-label { display: none; }
    .pb-step-current .pb-step-label { display: inline; }
    .pb-step-current { flex: 2 1 0; }
}

.pb-studio { padding-bottom: 5.5rem; transition: opacity .15s; }
.pb-studio.is-busy { opacity: .6; pointer-events: none; }

/* Photos step */
.pb-day { margin-bottom: 1.5rem; }

.pb-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--color-border);
}

.pb-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .pb-pick-grid { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
}

.pb-pick {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-border);
    cursor: pointer;
    transition: border-color .15s, opacity .15s;
}

.pb-pick img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s, transform .15s; }
.pb-pick.is-in { border-color: var(--color-primary); }
.pb-pick.is-out img { opacity: .35; filter: grayscale(.6); }
.pb-pick:hover img { transform: scale(1.03); }

.pb-pick-check {
    position: absolute;
    top: .35rem;
    left: .35rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: rgba(255,255,255,.9);
    color: var(--color-border-strong);
    border: 1.5px solid rgba(0,0,0,.15);
}

.pb-pick.is-in .pb-pick-check { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.pb-pick-cover {
    position: absolute;
    left: .35rem;
    bottom: .35rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--color-moss-deep);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pb-pick-warn {
    position: absolute;
    top: .35rem;
    right: .35rem;
    color: #f0b429;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* Cover step */
.pb-cover-preview { max-width: 360px; }

.pb-cover-strip {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .25rem .25rem .75rem;
    scroll-snap-type: x proximity;
}

.pb-cover-option {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-2);
    cursor: pointer;
    scroll-snap-align: start;
}

.pb-cover-option img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-cover-option.is-current { border-color: var(--color-primary); }

.pb-cover-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-muted);
    border-style: dashed;
    border-color: var(--color-border-strong);
}

.pb-cover-auto i { font-size: 1.4rem; color: var(--color-primary); }

/* Review step */
.pb-review-page { max-width: 560px; margin-inline: auto; }

/* Orders placed for the book, newest first */
.pb-orders { display: flex; flex-direction: column; gap: .75rem; }
.pb-order { padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); }

/* The bar: pages and price, back and next */
.pb-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 -1.5rem -1.5rem;
    padding: .75rem 1.5rem;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 991.98px) {
    .pb-bar { margin: 0 -1rem -1rem; padding: .6rem 1rem; }
}

.pb-bar-facts { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.pb-bar-facts strong { white-space: nowrap; }
.pb-bar-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.pb-bar-actions { display: flex; gap: .5rem; flex: 0 0 auto; }

@media (max-width: 575.98px) {
    .pb-bar-facts { flex-direction: column; gap: 0; line-height: 1.2; }
    .pb-bar-facts strong { font-size: .8rem; color: var(--color-muted); font-weight: 600; }
    .pb-bar-price { font-size: 1.1rem; }
    .pb-bar-actions .btn { padding: .45rem .8rem; }
}

/* ============================================================
   Landing page — hero and "on your phone" card
   ------------------------------------------------------------
   Modelled on komoot's front door: one photograph edge to edge with the navbar drawn
   over it, then a split card that pairs a QR code with a staged sketch of the product.
   The olive field below is the second colour the page was missing: the site was white
   and blue everywhere, and a landing page with one accent has nowhere to change gear.
   ============================================================ */
:root {
    --color-moss:       #5c7a2e;   /* olive — buttons and dots on the landing page */
    --color-moss-deep:  #33471b;   /* olive ink — the day chip, hover states */
    --color-moss-soft:  #dbe3a6;   /* olive field — the sketch panel */
    --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    --nav-height: 68px;
}

@media (max-width: 767.98px) {
    :root { --nav-height: 60px; }
}

/* ── Any hero that runs under the bar ──────────────────────────────────
   The section pulls up under the fixed bar (main-content pads for it) and pads itself
   back down, so the picture starts at the very top of the viewport. With no picture the
   dark field stays, so white type and the transparent bar still read. */
.hero-bleed {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    margin-top: calc(-1 * var(--nav-height));
    padding: calc(var(--nav-height) + 2.5rem) 0 3rem;
    background: linear-gradient(160deg, #101a33 0%, #1f3a3a 55%, #33471b 100%);
}

.hero-bleed-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

/* Two scrims: a vertical one that darkens the top for the bar and the foot for whatever
   sits lowest, and a soft pool behind the headline so white type survives a bright sky. */
.hero-bleed::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(58% 52% at 50% 46%, rgba(9,16,34,.42), rgba(9,16,34,0) 72%),
        linear-gradient(180deg,
            rgba(9,16,34,.58) 0%,
            rgba(9,16,34,.16) 26%,
            rgba(9,16,34,.18) 62%,
            rgba(9,16,34,.60) 100%);
}

.hero-bleed-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 48rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: .5rem;
}

.hero-pill {
    padding: .85rem 1.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.hero-pill-accent {
    --bs-btn-bg: var(--color-moss);
    --bs-btn-border-color: var(--color-moss);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--color-moss-deep);
    --bs-btn-hover-border-color: var(--color-moss-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--color-moss-deep);
    --bs-btn-active-border-color: var(--color-moss-deep);
    --bs-btn-active-color: #fff;
}

/* ── The page hero (HeroSection): tenant home, journey, day ────────── */
.page-hero {
    min-height: max(400px, 58svh);
    padding-bottom: 3.25rem;
}

/* No picture: shorter, so a day without a photo yet is not a wall of dark green. */
.page-hero-plain {
    min-height: max(300px, 40svh);
}

@media (max-width: 767.98px) {
    .page-hero { min-height: max(340px, 50svh); }
    .page-hero-plain { min-height: max(260px, 34svh); }
}

.page-hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0,0,0,.38);
}

.page-hero-subtitle {
    margin: 0;
    font-size: 1.1rem;
    opacity: .94;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* The day badge is drawn as a blue pill elsewhere; on a photograph it joins the chips. */
.hero-meta .day-header-badge {
    background: #fff;
    color: var(--color-primary-dark);
}

/* ── The landing hero: the same thing, taller ──────────────────────── */
.landing-hero {
    padding: calc(var(--nav-height) + 3.5rem) 0 4.5rem;
    min-height: max(560px, 92svh);
}

/* Keeps the bow of the boat in frame when a tall viewport crops the sides. */
.landing-hero .hero-bleed-img {
    object-position: center 62%;
}

@media (max-width: 767.98px) {
    .landing-hero {
        padding: calc(var(--nav-height) + 2.5rem) 0 3.5rem;
        min-height: max(520px, 88svh);
    }
}

.landing-hero-inner {
    gap: 1.25rem;
}

.landing-hero-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.38);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Same tilt as the favicon, so the mark reads as the brand and not as a random plane. */
.landing-hero-mark svg { transform: rotate(-30deg); }

.landing-hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 26px rgba(0,0,0,.38);
}

.landing-hero-hand {
    margin: .25rem 0 0;
    font-family: var(--font-hand);
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    letter-spacing: .01em;
    color: rgba(255,255,255,.96);
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
    transform: rotate(-2deg);
}

/* ── The bar over a hero ───────────────────────────────────────────────
   body:has() sees a bleeding hero; site.js says whether the page still sits at the top
   (.at-top) and only then is the bar's white stripped. Transparency is the enhancement,
   not the default: with no script, or a stale one held by the service worker, the bar
   stays frosted white and readable rather than white text on a cream page. */
.site-navbar {
    transition: background-color .25s ease, box-shadow .2s ease, border-color .25s ease;
}

body:has(.hero-bleed) .site-navbar.at-top {
    background-color: transparent !important;
    backdrop-filter: none;
    border-bottom-color: transparent !important;
}

body:has(.hero-bleed) .site-navbar.at-top .navbar-brand {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

body:has(.hero-bleed) .site-navbar.at-top .nav-link,
body:has(.hero-bleed) .site-navbar.at-top .nav-greeting {
    color: rgba(255,255,255,.92);
}

/* Bootstrap sets both of these with !important, so they need the same weight to turn
   white: the muted "Discover" link, and the blue tint on the current page, which becomes
   an underline instead because blue on a photograph is invisible. */
body:has(.hero-bleed) .site-navbar.at-top .nav-link.text-muted {
    color: rgba(255,255,255,.72) !important;
}

body:has(.hero-bleed) .site-navbar.at-top .nav-link.active {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .4em;
}

/* The bar's own Sign in becomes a glass outline while it sits on the photograph, so the
   olive pill in the hero is the one that leads; it goes back to solid blue on scroll. */
body:has(.hero-bleed) .site-navbar.at-top .btn-primary {
    --bs-btn-bg: rgba(255,255,255,.14);
    --bs-btn-border-color: rgba(255,255,255,.7);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: rgba(255,255,255,.26);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #fff;
    background-image: none;
    box-shadow: none;
    backdrop-filter: blur(6px);
}

body:has(.hero-bleed) .site-navbar.at-top .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255,255,255,.65);
    --bs-btn-hover-bg: rgba(255,255,255,.14);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #fff;
}

/* Bootstrap's hamburger is a dark stroke baked into a data URL; inverting it is the
   only way to make it white without swapping the whole navbar to its dark theme. */
body:has(.hero-bleed) .site-navbar.at-top .navbar-toggler-icon {
    filter: invert(1) brightness(1.8);
}

/* On the phone the menu opens on top of the photograph, so it brings its own glass. */
@media (max-width: 767.98px) {
    body:has(.hero-bleed) .site-navbar.at-top .navbar-collapse {
        margin-top: .5rem;
        padding: .5rem 1rem;
        border-radius: var(--radius-md);
        background: rgba(9,16,34,.84);
        backdrop-filter: blur(10px);
    }
}

/* ── "On your phone" ───────────────────────────────────────────────── */
.landing-app {
    padding: 4.5rem 0 2.5rem;
}

.landing-app-head {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.landing-app-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    margin-bottom: .75rem;
}

.landing-app-body {
    margin: 0;
    color: #4b5563;
    font-size: 1.08rem;
}

.landing-app-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 992px) {
    .landing-app-split {
        grid-template-columns: 5fr 7fr;
        gap: 1.5rem;
    }
}

.landing-app-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.landing-app-scan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.25rem 2rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--card-shadow);
}

.landing-app-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--color-moss-soft);
    color: var(--color-moss-deep);
}

.landing-app-mark svg { transform: rotate(-30deg); }

.landing-app-qr-block,
.landing-app-phone-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
}

.landing-app-scan-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.landing-app-qr {
    width: 196px;
    max-width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.landing-app-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.landing-app-scan-hint {
    margin: 0;
    max-width: 30ch;
    font-size: .92rem;
    color: var(--color-muted);
}

/* The QR code is for the desk; the phone gets told what to do instead. */
.landing-app-phone-block { display: none; }

@media (max-width: 767.98px) {
    .landing-app-qr-block { display: none; }
    .landing-app-phone-block { display: flex; }
}

.landing-app-facts {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .6rem;
}

.landing-app-facts li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.landing-app-facts i { color: var(--color-moss); }

/* ── The sketch panel ─────────────────────────────────────────────────
   Fragments of the product laid over an olive field, each a little off-square, the way
   komoot scatters pieces of its app over green. Positions are percentages of the stage
   so the composition holds from a phone to a wide desktop. */
.landing-app-demo {
    background: var(--color-moss-soft);
    color: var(--color-text);
}

.landing-app-stage {
    position: relative;
    height: 100%;
    min-height: 460px;
}

@media (max-width: 575.98px) {
    .landing-app-stage { min-height: 480px; }
}

.landing-app-flower {
    position: absolute;
    z-index: 1;
    color: var(--color-secondary);
}

.landing-app-flower-a {
    width: 132px;
    left: -34px;
    bottom: 10%;
}

.landing-app-flower-b {
    width: 74px;
    left: 60%;
    top: 2%;
    color: #fff;
    opacity: .9;
}

/* Photo top-left, route card bottom-right, chip and toast on the photo's two top
   corners: the caption text starts at the photo's left edge, so nothing that overlaps
   the photo may sit on that side of its foot. */
.landing-app-chip {
    position: absolute;
    top: 5%;
    left: 4%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .95rem;
    border-radius: 14px;
    background: var(--color-moss-deep);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transform: rotate(-3deg);
}

.landing-app-chip i { color: var(--color-moss-soft); }

.landing-app-photo {
    position: absolute;
    top: 10%;
    left: 8%;
    width: 56%;
    margin: 0;
    z-index: 2;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgba(30,30,40,.18);
}

.landing-app-photo-frame {
    position: relative;
}

.landing-app-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 68%;
}

.landing-app-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.landing-app-photo figcaption {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem .95rem .9rem;
}

.landing-app-photo strong { font-size: 1rem; }

.landing-app-photo span {
    font-size: .85rem;
    color: var(--color-muted);
}

.landing-app-toast {
    position: absolute;
    top: 8%;
    right: 5%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 58%;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--card-shadow-hover);
    transform: rotate(2deg);
}

.landing-app-toast i { color: var(--color-secondary); }

.landing-app-route {
    position: absolute;
    right: 5%;
    bottom: 7%;
    z-index: 4;
    width: 40%;
    min-width: 200px;
    padding: .9rem 1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(30,30,40,.16);
    transform: rotate(2deg);
}

.landing-app-route-title {
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.landing-app-route ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.landing-app-route li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 600;
}

.landing-app-route li em {
    margin-left: auto;
    font-style: normal;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-muted);
}

.landing-app-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.landing-app-dot-b { background: var(--color-secondary); }
.landing-app-dot-c { background: var(--color-moss); }

/* A narrow stage has no room for the chip and the toast side by side, so the toast
   drops onto the photograph instead. */
@media (max-width: 575.98px) {
    .landing-app-photo { left: 6%; width: 72%; top: 9%; }
    .landing-app-toast { top: 22%; max-width: 70%; font-size: .8rem; }
    .landing-app-route { width: 62%; right: 4%; bottom: 5%; }
    .landing-app-flower-a { width: 104px; left: -30px; bottom: 34%; }
}

/* ============================================================
   Tenant pages — journeys, journey, day
   ------------------------------------------------------------
   The same vocabulary as the landing page carried into the diary itself: a status pill
   that says whether a journey is happening now, one featured card at full width before
   the grid, a strip of facts instead of a sidebar of them, and a photograph on every
   itinerary day that has one.
   ============================================================ */
.trip-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .8rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.trip-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.trip-status-live {
    background: var(--color-moss-deep);
    color: #fff;
}

.trip-status-live::before {
    background: #b7e46b;
    box-shadow: 0 0 0 3px rgba(183,228,107,.35);
}

.trip-status-upcoming {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.trip-status-finished {
    background: #f1efe9;
    color: #4b5563;
}

/* On a photograph the pale pills need their own white. */
.hero-meta .trip-status-upcoming,
.hero-meta .trip-status-finished {
    background: rgba(255,255,255,.92);
}

/* ── Trip card ─────────────────────────────────────────────────────── */
.trip-card-media {
    position: relative;
}

.trip-card-media .trip-status {
    position: absolute;
    top: .85rem;
    left: .85rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* A journey without a cover yet gets the same dark field the heroes fall back to. */
.trip-cover-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(160deg, #101a33 0%, #1f3a3a 55%, #33471b 100%);
    color: #fff;
    font-size: 2.5rem;
}

.trip-card-dates {
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.trip-card-desc {
    color: var(--color-muted);
    font-size: .9rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.trip-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--color-border);
}

.trip-card-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-muted);
}

.trip-card-stats li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.trip-card-stats i {
    color: var(--color-moss);
}

/* ── The featured journey ──────────────────────────────────────────── */
.trip-featured {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

@media (min-width: 992px) {
    .trip-featured {
        grid-template-columns: 7fr 5fr;
    }
}

.trip-featured-media {
    position: relative;
    min-height: 240px;
}

.trip-featured-media img,
.trip-featured-media .trip-cover-plain {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

@media (min-width: 992px) {
    .trip-featured-media img,
    .trip-featured-media .trip-cover-plain {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
}

.trip-featured-media .trip-status {
    position: absolute;
    top: 1rem;
    left: 1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.trip-featured-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.75rem;
}

@media (min-width: 992px) {
    .trip-featured-body {
        padding: 2.5rem 2.5rem 2.25rem;
    }
}

.trip-featured-title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.trip-featured-dates {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-weight: 600;
    color: var(--color-muted);
}

.trip-featured-dates i {
    color: var(--color-moss);
}

.trip-featured-desc {
    margin: 0;
    color: #4b5563;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.trip-featured-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1rem;
}

/* ── The facts strip on a journey page ─────────────────────────────── */
.trip-stats {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

@media (min-width: 768px) {
    .trip-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trip-stats li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-moss);
    border-radius: var(--radius-md);
}

.trip-stat-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.trip-stat-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
}

/* ── A day in the itinerary ────────────────────────────────────────── */
.day-card-inner {
    display: flex;
    gap: 1rem;
    padding: .9rem 1rem;
}

.day-card-thumb {
    display: block;
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-border);
}

.day-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.card-lift:hover .day-card-thumb img {
    transform: scale(1.05);
}

.day-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .day-card-thumb {
        width: 84px;
        height: 84px;
    }
}

/* ============================================================
   Account and follow flows — photograph beside the form (AuthSplit)
   ------------------------------------------------------------
   Sign in, sign up, recovery, verification and following a journey all used the same
   centred card on a plain page. They now share one frame: a picture with a line of
   copy on one side, the form on the other, with no card around it.
   ============================================================ */

/* AuthLayout wraps its body in a padded container; the split steps out of it to run
   edge to edge. The 100vw includes the scrollbar, hence the clip on the main element. */
main.auth-shell { overflow-x: clip; }

.auth-shell > .container > .auth-split {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
}

@media (min-width: 768px) {
    .auth-shell > .container > .auth-split {
        margin-top: -3rem;
        margin-bottom: -3rem;
    }
}

.auth-split {
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100svh - var(--nav-height));
}

@media (min-width: 992px) {
    .auth-split {
        grid-template-columns: 5fr 7fr;
    }
}

.auth-split-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 240px;
    padding: 2rem 1.5rem;
    color: #fff;
    background: linear-gradient(160deg, #101a33 0%, #1f3a3a 55%, #33471b 100%);
}

@media (min-width: 992px) {
    .auth-split-visual {
        align-items: center;
        padding: 3rem 2.75rem;
    }
}

.auth-split-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.auth-split-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(9,16,34,.22) 0%, rgba(9,16,34,.74) 100%);
}

.auth-split-visual-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 26rem;
}

.auth-split-mark {
    width: 50px;
    height: 50px;
}

.auth-split-lede {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -.015em;
    text-wrap: balance;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.auth-split-hand {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    transform: rotate(-1.5deg);
}

.auth-split-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 3.5rem;
}

@media (min-width: 992px) {
    .auth-split-panel {
        padding: 4rem 3rem;
    }
}

.auth-split-form {
    width: 100%;
    max-width: 26rem;
}

.auth-split-title {
    margin-bottom: .35rem;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.auth-split-subtitle {
    margin-bottom: 1.75rem;
    color: var(--color-muted);
}

.auth-split-form .form-control {
    padding: .7rem .9rem;
}

.auth-split-form .btn.w-100 {
    padding: .75rem 1rem;
}

/* The sign-up rail sits above its form inside the panel. */
.auth-split-form .wizard-steps {
    margin-bottom: 1.5rem;
}

/* ============================================================
   Admin — the journey page and the update composer
   ------------------------------------------------------------
   Trip, days and updates on one page instead of three tables, and photos inside the
   composer instead of on a fourth page.
   ============================================================ */
.trip-admin-head {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.trip-admin-cover {
    flex: 0 0 auto;
    width: 160px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(160deg, #101a33 0%, #1f3a3a 55%, #33471b 100%);
}

.trip-admin-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trip-admin-head-body { flex: 1 1 auto; min-width: 0; }

@media (max-width: 575.98px) {
    .trip-admin-head { flex-direction: column; }
    .trip-admin-cover { width: 100%; }
}

.trip-admin-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

.trip-admin-empty i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.trip-admin-empty p { max-width: 40ch; margin: 0 auto 1rem; }

.trip-admin-days {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.trip-admin-day {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
}

.trip-admin-day.is-today {
    border-color: var(--color-moss);
    box-shadow: 0 0 0 3px rgba(92,122,46,.14);
}

.trip-admin-day-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.trip-admin-day-date {
    flex: 0 0 auto;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    padding: .35rem 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}

.is-today .trip-admin-day-date {
    background: var(--color-moss-soft);
    border-color: var(--color-moss);
}

.trip-admin-day-dow,
.trip-admin-day-mon {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.trip-admin-day-dom {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
}

.trip-admin-day-title { flex: 1 1 auto; min-width: 0; }

.trip-admin-day-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .35rem;
    align-items: center;
}

@media (max-width: 767.98px) {
    .trip-admin-day-head { flex-wrap: wrap; }
    .trip-admin-day-actions { width: 100%; padding-left: calc(56px + 1rem); }
}

.trip-admin-day-none {
    margin: .75rem 0 0 calc(56px + 1rem);
    font-size: .9rem;
    color: var(--color-muted);
}

@media (max-width: 767.98px) {
    .trip-admin-day-none { margin-left: 0; }
}

.trip-admin-entries {
    list-style: none;
    margin: .75rem 0 0 calc(56px + 1rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (max-width: 767.98px) {
    .trip-admin-entries { margin-left: 0; }
}

.trip-admin-entry {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.trip-admin-entry-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .5rem .6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.trip-admin-entry-link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--card-shadow);
    color: var(--color-text);
}

.trip-admin-entry-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    color: var(--color-muted);
    font-size: 1.25rem;
}

.trip-admin-entry-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.trip-admin-entry-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.trip-admin-entry-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-admin-entry-meta { font-size: .8rem; color: var(--color-muted); }

/* Phone: titles wrap instead of truncating to three letters, the header buttons pair up
   two to a row, and the day actions line up with the day title rather than the date. */
@media (max-width: 575.98px) {
    .trip-admin-entry-title { white-space: normal; line-height: 1.25; }
    .trip-admin-entry-link { gap: .6rem; }
    .trip-admin-entry-link .badge { display: none; }
    .trip-admin-entry-body::after {
        content: attr(data-status);
        font-size: .72rem;
        font-weight: 600;
        color: var(--color-muted);
    }
    .trip-admin-head-body .btn { flex: 1 1 calc(50% - .5rem); }
    .trip-admin-day-actions { padding-left: 0; }
}

/* ── Trip list, phone cards ────────────────────────────────────────── */
.trip-list-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.trip-list-card {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.trip-list-card-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}

.trip-list-card-link:hover { border-color: var(--color-primary); color: var(--color-text); }
.trip-list-card-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.trip-list-card-meta { font-size: .82rem; color: var(--color-muted); }
.trip-list-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.trip-list-card-settings { flex: 0 0 auto; display: flex; align-items: center; border-radius: var(--radius-lg); }

/* ── The photo strip in the composer ───────────────────────────────── */
.entry-photos-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.entry-photos-drop:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.entry-photos-drop.disabled { opacity: .6; cursor: progress; }
.entry-photos-drop input[type=file] { display: none; }
.entry-photos-drop i { font-size: 1.75rem; color: var(--color-primary); }
.entry-photos-drop-title { font-weight: 600; }
.entry-photos-drop-hint { font-size: .8rem; color: var(--color-muted); }

.entry-photos-queue {
    padding: .75rem .9rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
}

.entry-photos-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.entry-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

.entry-photo {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.entry-photo-media { position: relative; }

.entry-photo-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.entry-photo-tools {
    position: absolute;
    inset: auto .35rem .35rem .35rem;
    display: flex;
    gap: .25rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.entry-photo-tools .btn { padding: .1rem .4rem; }

.entry-photo-fields {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem;
}

.composer-side { position: sticky; top: 1rem; }