/* ============================================================
   Mobilité Stéphanoise — Mode Board (mobile dashboard)
   Identité visuelle : Saint-Étienne
   Palette : carbone + vert ASSE + cuivre + paper white
   ============================================================ */

:root {
    /* surfaces */
    --bg:           #08090b;
    --bg-elev:      #11131a;
    --bg-elev-2:    #181b22;
    --bg-elev-3:    #20242c;
    --bg-card-hi:   #1c2027;
    --rule:         #262b34;
    --rule-soft:    #1c2028;

    /* ink — paper white chaud */
    --ink:          #f2efe8;
    --ink-bright:   #ffffff;
    --ink-dim:      #93897c;
    --ink-faint:    #8b8275;   /* AA ≥4.5:1 sur bg/elev/elev-2 (ex-#5e574e ~2.6:1) */

    /* identité Saint-Étienne */
    --asse:         #00733f;          /* vert sapin ASSE */
    --asse-bright:  #14a05e;          /* hover / active / pulse */
    --asse-glow:    rgba(20, 160, 94, .14);
    --copper:       #c98a3e;          /* favoris / industriels rares */
    --copper-dim:   #7a5424;

    /* codes officiels STAS */
    --tram:         #e0221b;
    --bus:          #f5b400;
    --bus-ink:      #1a1408;
    --velivert:     #b8d840;
    --velivert-ink: #1a1f08;

    /* signal */
    --danger:       #ff4a3d;
    --warn:         #f5b400;

    /* typo */
    --display:      'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* motion */
    --ease-out:     cubic-bezier(.16, 1, .3, 1);
    --ease-in-out:  cubic-bezier(.65, 0, .35, 1);

    --shadow-deep:  0 24px 60px -28px rgba(0,0,0,.7);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: contain;
}

body {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 90% -10%, var(--asse-glow), transparent 45%),
        radial-gradient(circle at -10% 60%, rgba(201, 138, 62, .04), transparent 50%);
}

.bd {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Header — sticky identity + clock + meta
   ============================================================ */
.head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, var(--bg) 60%, transparent);
    padding: calc(20px + env(safe-area-inset-top)) 20px 14px;
}

.head::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
    margin-top: 14px;
}

.head__brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.head__mark {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    color: var(--ink-dim);
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
}

.head__mark strong {
    color: var(--asse-bright);
    font-weight: 600;
}

.head__pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--asse-bright);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
    animation: pulse 2s var(--ease-in-out) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--asse-glow); }
    50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}

.head__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.head__clock {
    font-family: var(--mono);
    font-size: 38px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

.head__clock-sec {
    color: var(--ink-dim);
    font-size: 28px;
}

.head__date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: 4px;
}

.head__date-day {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-dim);
    text-transform: uppercase;
}

.head__sync {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--asse-bright);
    text-align: right;
}

.head__sync[data-fresh="false"] { color: var(--ink-faint); }

/* Pull-to-refresh bar (kept) */
.bd-pull {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

.bd-pull__bar {
    display: block;
    height: 100%;
    background: var(--asse-bright);
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: transform .12s linear;
}

/* ============================================================
   Search — sleek bar with quick suggestions
   ============================================================ */
.search {
    margin: 0 20px 8px;
    position: relative;
}

.search__wrap {
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 14px;
    transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}

.search__wrap:focus-within {
    border-color: var(--asse);
    background: var(--bg-elev-2);
}

.search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ink-dim);
    pointer-events: none;
}

.search__wrap:focus-within .search__icon { color: var(--asse-bright); }

.search__input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    padding: 14px 44px 14px 44px;
    outline: none;
    min-height: 48px;
}

.search__input::placeholder { color: var(--ink-faint); }

.search__clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elev-3);
    color: var(--ink-dim);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
}

.search__wrap[data-has-value="true"] .search__clear { display: flex; }

/* Search results dropdown */
.search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 25;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: var(--shadow-deep);
    max-height: 60vh;
    overflow-y: auto;
}

.search__results[hidden] { display: none; }

.search__result {
    padding: 12px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 48px;
    transition: background .12s var(--ease-out);
}

.search__result:hover,
.search__result:focus-visible,
.search__result[aria-selected="true"] {
    background: var(--bg-elev-3);
    outline: none;
}

.search__result-name {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.search__result-meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.search__empty {
    padding: 16px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-faint);
    font-style: italic;
}

/* Recent / suggestion chips below the search */
.chips {
    display: flex;
    gap: 8px;
    padding: 12px 20px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chips:empty { display: none; }

.chip {
    flex-shrink: 0;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 9px 12px;
    border-radius: 100px;
    cursor: pointer;
    transition: all .15s var(--ease-out);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    white-space: nowrap;
    text-transform: uppercase;
}

.chip:hover,
.chip:active,
.chip:focus-visible {
    border-color: var(--asse);
    color: var(--ink);
    outline: none;
}

.chip__star {
    color: var(--copper);
    font-size: 10px;
}

/* ============================================================
   Main / Sections
   ============================================================ */
.bd-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section {
    padding: 20px 20px 0;
}

.section + .section { padding-top: 24px; }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.section__title {
    margin: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--ink);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section__title-bar {
    width: 14px;
    height: 1px;
    background: var(--asse-bright);
}

.section__meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-dim);
    white-space: nowrap;
}

.section__meta-pin {
    color: var(--asse-bright);
}

/* ============================================================
   Stop cards — the hero pattern
   ============================================================ */
.cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card {
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s var(--ease-out), border-color .2s var(--ease-out);
    cursor: pointer;
    position: relative;
}

.card:active {
    transform: scale(.99);
    border-color: var(--asse);
}

.card:focus-visible {
    outline: none;
    border-color: var(--asse-bright);
}

.card__top {
    padding: 18px 18px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.card__title {
    min-width: 0;
    flex: 1;
}

.card__name {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variation-settings: "opsz" 120, "SOFT" 30;
}

.card__name em {
    font-style: italic;
    font-weight: 500;
    color: var(--ink-dim);
}

.card__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
}

.card__sub-sep {
    width: 2px;
    height: 2px;
    background: var(--ink-faint);
    border-radius: 50%;
    display: inline-block;
}

.card__fav {
    background: transparent;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 4px;
    font-size: 20px;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s var(--ease-out), transform .15s var(--ease-out);
}

.card__fav:active { transform: scale(.85); }
.card__fav[data-fav="true"] { color: var(--copper); }

.card__departures {
    padding: 4px 14px 16px;
}

.dep {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px dashed var(--rule-soft);
}

.dep:first-child { border-top: none; }

.dep__route {
    height: 28px;
    min-width: 38px;
    padding: 0 8px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    background: var(--bus);
    color: var(--bus-ink);
}

.dep__route[data-type="tram"]    { background: var(--tram); color: #fff; }
.dep__route[data-type="bus"]     { background: var(--bus);  color: var(--bus-ink); }
.dep__route[data-type="trolley"] { background: var(--bus);  color: var(--bus-ink); }

.dep__sign {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dep__sign-time {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.dep__eta {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    text-align: right;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
}

.dep__eta-unit {
    font-size: 11px;
    color: var(--ink-dim);
    margin-left: 1px;
    font-weight: 400;
}

.dep__eta[data-soon="true"] {
    color: var(--asse-bright);
    animation: blink-soft 1.6s var(--ease-in-out) infinite;
}

.dep__eta[data-now="true"] {
    color: var(--asse-bright);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* GTFS-RT confirmed — pulsing green dot to the left of the ETA. */
.dep__eta[data-rt="true"] {
    position: relative;
    padding-left: 14px;
}
.dep__eta[data-rt="true"]::before,
.bd-dep__eta[data-rt="true"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--asse-bright);
    box-shadow: 0 0 0 0 var(--asse-glow);
    animation: rt-pulse 1.8s var(--ease-in-out) infinite;
}
.bd-dep__eta[data-rt="true"] {
    position: relative;
    padding-left: 14px;
}

@keyframes rt-pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 var(--asse-glow); }
    50%      { opacity: .55; box-shadow: 0 0 0 6px transparent; }
}

@keyframes blink-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Empty state inside card — proper inline message instead of broken word-wrap */
.dep--empty {
    grid-template-columns: 1fr;
    padding: 9px 4px;
    text-align: center;
}

.dep--empty .dep__msg {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--ink-faint);
    font-style: italic;
}

/* ============================================================
   Vélivert section — denser, horizontal flow
   ============================================================ */
.velo-card {
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.velo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    padding: 0;
    width: 100%;
    min-height: 44px;
}

.velo-row__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.velo-row__name {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.velo-row__meta {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
}

.velo-row__stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.velo-row__count {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--velivert);
    line-height: 1;
    font-feature-settings: 'tnum' 1;
    min-width: 28px;
    text-align: right;
}

.velo-row__count[data-empty="true"] { color: var(--danger); }
.velo-row__count[data-warn="true"]  { color: var(--copper); }

.velo-row__bar {
    width: 56px;
    height: 6px;
    background: var(--bg-elev-3);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.velo-row__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--velivert);
    border-radius: 100px;
    transition: width .3s var(--ease-out);
}

.velo-row__fill[data-empty="true"] { background: var(--danger); }
.velo-row__fill[data-warn="true"]  { background: var(--copper); }

.velo-row + .velo-row {
    border-top: 1px dashed var(--rule-soft);
    padding-top: 14px;
    margin-top: 0;
}

/* ============================================================
   Empty state for sections
   ============================================================ */
.empty {
    background: var(--bg-elev);
    border: 1px dashed var(--rule);
    border-radius: 18px;
    padding: 28px 22px;
    text-align: center;
}

.empty__title {
    font-family: var(--display);
    font-size: 18px;
    font-style: italic;
    color: var(--ink-dim);
    margin: 0 0 6px;
    font-weight: 400;
}

.empty__sub {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-faint);
    line-height: 1.5;
    margin: 0;
}

.empty__kbd {
    display: inline-block;
    background: var(--bg-elev-2);
    color: var(--copper);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    margin: 0 2px;
}

/* Network-error variant: solid danger-tinted border + retry action, so a flaky
   connection reads clearly as "couldn't load" rather than "nothing here". */
.empty--error {
    border-style: solid;
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.empty--error .empty__title {
    color: var(--danger);
}

.empty__retry {
    margin-top: 14px;
    appearance: none;
    cursor: pointer;
    background: var(--bg-elev-2);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.empty__retry:hover,
.empty__retry:focus-visible {
    color: var(--ink-bright);
    border-color: var(--danger);
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
    padding: 32px 20px calc(80px + env(safe-area-inset-bottom));
    text-align: center;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    text-transform: uppercase;
    line-height: 1.8;
}

.foot__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--asse-bright);
    text-decoration: none;
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 12px 20px;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 500;
    min-height: 44px;
    transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}

.foot__link:active {
    transform: scale(.98);
    border-color: var(--asse);
}

.foot__creds {
    margin-top: 18px;
    display: block;
}

.foot__sep {
    color: var(--ink-faint);
    margin: 0 6px;
}

.foot__legal {
    color: var(--ink-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.foot__legal:hover,
.foot__legal:focus-visible {
    color: var(--ink);
    border-color: var(--ink-dim);
}

/* ============================================================
   CTA — activation géoloc (visible tant que source = default/manual)
   ============================================================ */
.bd-geo-cta {
    margin: 0 16px 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev-3));
    border: 1px solid var(--rule);
    border-radius: 14px;
}

.bd-geo-cta[hidden] { display: none; }

.bd-geo-cta__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bd-geo-cta__title {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

.bd-geo-cta__sub {
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.35;
}

.bd-geo-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--asse);
    color: var(--ink-bright);
    border: 0;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px;
    transition: background .15s ease;
}

.bd-geo-cta__btn:hover:not(:disabled) { background: var(--asse-bright); }
.bd-geo-cta__btn:disabled { opacity: .65; cursor: progress; }

/* ============================================================
   Banner (geo fallback)
   ============================================================ */
.bd-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 30;
    max-width: 456px;
    margin: 0 auto;
    background: var(--bg-elev-2);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-deep);
    font-size: 12px;
}

.bd-banner__form { display: flex; gap: 8px; }

.bd-banner__input {
    flex: 1;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    outline: none;
    min-height: 44px;
}

.bd-banner__input:focus { border-color: var(--asse); }

.bd-banner__btn {
    background: var(--asse);
    color: var(--ink-bright);
    border: 0;
    font-family: var(--mono);
    font-weight: 700;
    padding: 0 18px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px;
}

/* ============================================================
   Sheet (bottom sheet) — area / vélivert detail
   ============================================================ */
.bd-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bd-sheet[hidden] { display: none; }

.bd-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    animation: bd-fadein .2s ease;
}

.bd-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    background: var(--bg-elev);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: var(--shadow-deep);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bd-slideup .25s cubic-bezier(.2, .7, .2, 1);
    padding-bottom: env(safe-area-inset-bottom);
}

@keyframes bd-slideup {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes bd-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.bd-sheet__handle {
    width: 40px;
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    margin: 10px auto 0;
}

.bd-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--rule);
}

.bd-sheet__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.bd-fav {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    text-transform: uppercase;
}

.bd-fav[aria-pressed="true"] {
    color: var(--copper);
    border-color: var(--copper);
}

.bd-fav[aria-pressed="true"] .bd-fav__icon::before { content: "★"; }
.bd-fav__icon::before { content: "☆"; }

.bd-fav__icon { font-size: 14px; line-height: 1; }

.bd-tabs {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    padding: 12px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bd-tabs::-webkit-scrollbar { display: none; }

.bd-tab {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 14px;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
}

.bd-tab.is-active {
    color: var(--asse-bright);
    border-color: var(--asse);
    background: rgba(20, 160, 94, .08);
}

.bd-deps {
    list-style: none;
    margin: 0;
    padding: 4px 8px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
}

.bd-dep {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px dashed var(--rule-soft);
}

.bd-dep:last-child { border-bottom: none; }

.bd-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    background: var(--bus);
    color: var(--bus-ink);
}

.bd-route[data-type="tram"]    { background: var(--tram); color: #fff; }
.bd-route[data-type="bus"]     { background: var(--bus);  color: var(--bus-ink); }
.bd-route[data-type="trolley"] { background: var(--bus);  color: var(--bus-ink); }

.bd-dep__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bd-dep__sign {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-dep__time {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
}

/* GTFS-RT: theoretical time crossed out + actual time + signed delay tag. */
.bd-dep__time-strike {
    color: var(--ink-faint);
    text-decoration: line-through;
    text-decoration-color: var(--ink-faint);
    margin-right: 4px;
    opacity: 0.7;
}

.bd-dep__delay {
    color: var(--asse-bright);
    font-weight: 600;
    margin-left: 4px;
}

/* Same idiom for the map sidebar. */
.mp-dep__time-strike {
    color: var(--ink-faint);
    text-decoration: line-through;
    text-decoration-color: var(--ink-faint);
    margin-right: 4px;
    opacity: 0.7;
}
.mp-dep__delay {
    color: var(--asse-bright);
    font-weight: 600;
    margin-left: 4px;
}

.bd-dep__eta {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    font-feature-settings: 'tnum' 1;
    line-height: 1;
}

.bd-dep__eta[data-soon="true"] { color: var(--asse-bright); }

.bd-quays {
    border-top: 1px solid var(--rule);
    padding: 14px 20px;
    background: var(--bg-elev-2);
}

.bd-quays summary {
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    min-height: 36px;
    display: flex;
    align-items: center;
}

.bd-quays__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bd-quays__list li {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink);
    padding: 6px 0;
    border-bottom: 1px dotted var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.bd-sheet__close {
    margin: 12px 20px 18px;
    background: var(--bg-elev-2);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 18px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.bd-sheet__body {
    padding: 16px 20px;
    color: var(--ink);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bd-sheet__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px dashed var(--rule-soft);
    padding-bottom: 8px;
    font-family: var(--mono);
    font-size: 12px;
}

.bd-sheet__row strong {
    font-weight: 600;
    color: var(--ink);
}

.bd-sheet__cta {
    margin: 4px 20px 8px;
    height: 48px;
    background: var(--asse);
    color: var(--ink-bright);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   Reduced motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}

/* ============================================================
   Slim scrollbar for desktop preview
   ============================================================ */
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--bg-elev-3); border-radius: 100px; }