/* ===========================================================================
   LjBus — application stylesheet
   Implements the "LjBus Design System" (sticker book). Vanilla CSS + JS — no
   framework, no build step: this file is hand-maintained and linked directly.

   Layers, in order:
     1. Design tokens         (colors / type / spacing / effects)
     2. Base reset + helpers
     3. Sticker components     (button, badge, card, chip, input, line, arrival, stop)
     4. App layout             (header, bottom nav, hero, tiles, board, timetable, seq)
     5. Utilities              (the small flex/spacing set kept from Bootstrap)
   Fonts (Baloo 2 / Nunito / DM Mono) are loaded via <link> in base.html.twig.
   =========================================================================== */

/* ===========================================================================
   1. TOKENS
   =========================================================================== */
:root{
    /* --- Brand core --- */
    --c-grass:#009A44;
    --c-grass-deep:#007A35;
    --c-sun:#FFC93C;
    --c-sun-deep:#F4A92B;
    --c-coral:#FF6B5E;
    --c-coral-deep:#E84F42;
    --c-mint:#25D0A0;
    --c-mint-deep:#14A87E;
    --c-sky:#4DA6FF;
    --c-sky-deep:#2B82E0;
    --c-grape:#8B6BF2;
    --c-grape-deep:#6B47E0;

    /* --- Ink & neutrals --- */
    --ink:#20284A;
    --ink-soft:#51597A;
    --ink-faint:#8A90AB;
    --line:#20284A;
    --hair:#E6E1D2;

    /* --- Surfaces --- */
    --bg:#FFF6E3;
    --bg-tint:#FCEFD0;
    --surface:#FFFFFF;
    --surface-ink:#20284A;
    --surface-ink2:#2C3660;

    /* --- Semantic aliases --- */
    --primary:var(--c-grass);
    --primary-deep:var(--c-grass-deep);
    --primary-on:#FFFFFF;
    --sun:var(--c-sun);
    --sun-on:var(--ink);
    --accent:var(--c-coral);
    --accent-on:#FFFFFF;
    --live:var(--c-mint);
    --live-deep:var(--c-mint-deep);
    --info:var(--c-sky);
    --warn:#FF9F1C;
    --danger:var(--c-coral-deep);

    --text-strong:var(--ink);
    --text-body:var(--ink);
    --text-muted:var(--ink-soft);
    --text-faint:var(--ink-faint);
    --text-on-ink:#FFFFFF;

    --surface-card:var(--surface);
    --surface-app:var(--bg);

    /* --- Transit line colors --- */
    --line-1:#E5322B; --line-2:#1F8A4C; --line-3:#2E6FD6;
    --line-6:#F08C1E; --line-9:#8B6BF2; --line-11:#00A7A0;
    --line-12:#D6428E; --line-13:#6FA22B; --line-14:#C0392B;
    --line-19:#5C6BC0; --line-20:#0E8F6E; --line-27:#8E5A2D;

    /* --- Typography --- */
    --font-display:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
    --font-body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --fw-regular:400; --fw-medium:500; --fw-semibold:600;
    --fw-bold:700; --fw-black:800;

    --fs-display:clamp(2.4rem, 6vw, 4rem);
    --fs-h1:2rem; --fs-h2:1.5rem; --fs-h3:1.25rem;
    --fs-lg:1.125rem; --fs-body:1rem; --fs-sm:0.875rem; --fs-xs:0.75rem;

    --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.45;
    --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em; --ls-caps:0.08em;

    /* --- Spacing --- */
    --sp-0:0; --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem;
    --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
    --container:1120px; --container-tight:720px;
    --gutter:clamp(1rem, 4vw, 2rem);

    /* --- Effects --- */
    --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
    --bw:2.5px; --bw-bold:3px;
    --border:var(--bw) solid var(--line);
    --border-bold:var(--bw-bold) solid var(--line);

    --pop-sm:3px 3px 0 var(--ink);
    --pop:5px 5px 0 var(--ink);
    --pop-lg:8px 8px 0 var(--ink);
    --pop-xl:12px 12px 0 var(--ink);
    --pop-coral:5px 5px 0 var(--c-coral-deep);
    --pop-mint:5px 5px 0 var(--c-mint-deep);

    --soft:0 10px 30px -10px rgba(32, 40, 74, 0.35);
    --soft-sm:0 4px 14px -6px rgba(32, 40, 74, 0.30);

    --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast:120ms; --t-base:200ms; --t-slow:320ms;

    --ring:0 0 0 3px var(--bg), 0 0 0 6px var(--c-sky);
}

/* ===========================================================================
   2. BASE
   =========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* the useful sliver of Bootstrap's Reboot we kept when BS was dropped */
button, input, select, textarea{ font:inherit; margin:0; }
img, svg{ vertical-align:middle; }
[role="button"]{ cursor:pointer; }
/* like Reboot's `bolder`: on the 600-weight body that lands on 800, not the UA's 700 */
b, strong{ font-weight:800; }
ol, ul{ padding-left:2rem; margin:0 0 1rem; }

body{
    margin:0;
    min-height:100vh;
    font-family:var(--font-body);
    font-size:var(--fs-body);
    font-weight:var(--fw-semibold);
    line-height:var(--lh-normal);
    color:var(--text-body);
    background-color:var(--bg);
    background-image:radial-gradient(var(--hair) 1.4px, transparent 1.4px);
    background-size:22px 22px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    display:flex;
    flex-direction:column;
}

h1, h2, h3, h4{
    font-family:var(--font-display);
    font-weight:var(--fw-semibold);
    line-height:var(--lh-snug);
    letter-spacing:var(--ls-tight);
    color:var(--text-strong);
    margin:0 0 var(--sp-3);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }

a{ color:var(--c-sky-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }

p{ margin:0 0 var(--sp-4); }

img{ max-width:100%; }

/* numbers / times */
.lj-mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.lj-tnum{ font-variant-numeric:tabular-nums; }

/* eyebrow / overline */
.lj-eyebrow{
    font-family:var(--font-body);
    font-weight:var(--fw-black);
    font-size:var(--fs-xs);
    letter-spacing:var(--ls-caps);
    text-transform:uppercase;
    color:var(--text-faint);
}

.lj-muted{ color:var(--ink-soft); }
.lj-faint{ color:var(--ink-faint); }
.lj-display{ font-family:var(--font-display); }

/* layout wrappers */
.lj-main{ flex:1 0 auto; }
.lj-wrap{ width:100%; max-width:1040px; margin-inline:auto; padding:28px 20px 40px; }
.lj-wrap--tight{ max-width:720px; }
.lj-wrap--mid{ max-width:880px; }
.lj-wrap--wide{ max-width:1320px; }

/* section heading with icon */
.lj-section-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.lj-section-head h2{ margin:0; font-size:24px; font-weight:600; }

/* a "back" text button */
.lj-back{
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; cursor:pointer;
    font-family:var(--font-body); font-weight:800; font-size:15px;
    color:var(--ink-soft); padding:4px 0; margin-bottom:12px; text-decoration:none;
}
.lj-back:hover{ color:var(--ink); text-decoration:none; }

@keyframes ljblink{
    50%{ opacity:.25; }
}

/* ===========================================================================
   3. STICKER COMPONENTS
   =========================================================================== */

/* ---- Button ---- */
.lj-btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    font-family:var(--font-body); font-weight:800; font-size:16px; line-height:1;
    color:#FFFFFF; background:var(--c-grass);
    border:2.5px solid var(--ink); border-radius:var(--r-lg);
    padding:11px 20px; cursor:pointer;
    box-shadow:var(--pop); transform:translate(0, 0);
    transition:transform 160ms var(--ease-bounce), box-shadow 160ms var(--ease-bounce), background 140ms ease;
    user-select:none; -webkit-tap-highlight-color:transparent; text-decoration:none;
}
.lj-btn:hover{ transform:translate(-2px, -2px); box-shadow:8px 8px 0 var(--ink); color:#FFFFFF; text-decoration:none; }
.lj-btn:active{ transform:translate(2px, 2px); box-shadow:2px 2px 0 var(--ink); }
.lj-btn .ph-bold, .lj-btn i{ font-size:1.15em; display:inline-flex; }

.lj-btn--primary{ background:var(--c-grass); color:#FFFFFF; }
.lj-btn--primary:hover{ background:var(--c-grass-deep); }
.lj-btn--sun{ background:var(--c-sun); color:var(--ink); }
.lj-btn--sun:hover{ background:var(--c-sun-deep); color:var(--ink); }
.lj-btn--accent{ background:var(--c-coral); color:#FFFFFF; }
.lj-btn--accent:hover{ background:var(--c-coral-deep); }
.lj-btn--mint{ background:var(--c-mint); color:#08402F; }
.lj-btn--mint:hover{ background:var(--c-mint-deep); color:#08402F; }
.lj-btn--sky{ background:var(--c-sky); color:#FFFFFF; }
.lj-btn--sky:hover{ background:var(--c-sky-deep); }
.lj-btn--ink{ background:var(--ink); color:#FFFFFF; }
.lj-btn--ink:hover{ background:#11183A; }
.lj-btn--ghost{
    background:transparent; color:var(--ink);
    border-color:transparent; box-shadow:none;
}
.lj-btn--ghost:hover{ background:rgba(32, 40, 74, 0.06); color:var(--ink); box-shadow:none; transform:translate(-1px, -1px); }
.lj-btn--ghost:active{ box-shadow:none; transform:translate(1px, 1px); }

.lj-btn--sm{ font-size:14px; padding:8px 14px; border-radius:var(--r-md); box-shadow:var(--pop-sm); }
.lj-btn--lg{ font-size:18px; padding:15px 26px; box-shadow:6px 6px 0 var(--ink); }
.lj-btn--lg:hover{ transform:translate(-3px, -3px); box-shadow:9px 9px 0 var(--ink); }
.lj-btn--lg:active{ transform:translate(3px, 3px); box-shadow:2px 2px 0 var(--ink); }
.lj-btn--pill{ border-radius:var(--r-pill); }
.lj-btn--block{ display:flex; width:100%; }
.lj-btn[disabled], .lj-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }

/* ---- Badge ---- */
.lj-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-body); font-weight:800; font-size:12.5px;
    letter-spacing:0.02em; line-height:1;
    color:var(--ink); background:var(--surface);
    border:2px solid var(--ink); border-radius:var(--r-pill);
    padding:5px 10px; white-space:nowrap;
}
.lj-badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); }
/* a badge can be a link (header V ŽIVO → favourites arrivals): keep the badge's own ink —
   the generic (dark-mode) link colour rules must not tint it — and give it a tiny pop */
a.lj-badge{ text-decoration:none; transition:transform .12s ease; }
a.lj-badge:hover{ transform:translateY(-1px) scale(1.04); }
a.lj-badge--live, [data-theme="dark"] a.lj-badge--live{ color:#08402F; }
.lj-badge--pulse .lj-badge__dot{ animation:ljblink 1.1s steps(1) infinite; }
.lj-badge--live{ background:var(--c-mint); color:#08402F; }
.lj-badge--live .lj-badge__dot{ background:#08402F; }
.lj-badge--info{ background:var(--c-sky); color:#FFFFFF; }
.lj-badge--info .lj-badge__dot{ background:#FFFFFF; }
.lj-badge--warn{ background:var(--warn); color:#3A2400; }
.lj-badge--warn .lj-badge__dot{ background:#3A2400; }
.lj-badge--danger{ background:var(--danger); color:#FFFFFF; }
.lj-badge--danger .lj-badge__dot{ background:#FFFFFF; }
.lj-badge--sun{ background:var(--c-sun); color:var(--ink); }
.lj-badge--neutral{ background:var(--surface); color:var(--ink); }

/* ---- Card ---- */
.lj-card{
    position:relative;
    background:var(--surface);
    border:2.5px solid var(--ink);
    border-radius:var(--r-lg);
    box-shadow:var(--pop);
    padding:20px;
    overflow:hidden;
}
.lj-card--flat{ box-shadow:none; }
.lj-card--lg{ border-radius:var(--r-xl); box-shadow:var(--pop-lg); }
.lj-card--p0{ padding:0; }
.lj-card--p14{ padding:14px; }
.lj-card--p16{ padding:16px; }
.lj-card--p6{ padding:6px; }
.lj-card--interactive{
    cursor:pointer;
    transition:transform 180ms var(--ease-bounce), box-shadow 180ms var(--ease-bounce);
}
.lj-card--interactive:hover{ transform:translate(-2px, -2px); box-shadow:10px 10px 0 var(--ink); }
.lj-card--interactive:active{ transform:translate(2px, 2px); box-shadow:2px 2px 0 var(--ink); }
.lj-card__accent{
    position:absolute; left:0; right:0; top:0; height:8px;
    border-bottom:2.5px solid var(--ink);
}
.lj-card__accent + *{ margin-top:8px; }

/* a card laid out as a horizontal row (line/stop list item) */
.lj-card-row{ display:flex; align-items:center; gap:14px; }

/* Empty / error states — a centred card carrying a mascot pose (wave / sleep /
   dizzy) above the message. See templates' {% else %} branches. */
.lj-empty{ text-align:center; }
.lj-empty__mascot{ display:block; width:150px; max-width:55%; height:auto; margin:6px auto 14px; }

/* ---- Chip ---- */
.lj-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--font-body); font-weight:800; font-size:14.5px; line-height:1;
    color:var(--ink-soft); background:var(--surface);
    border:2.5px solid var(--hair); border-radius:var(--r-pill);
    padding:8px 15px; cursor:pointer;
    transition:all 130ms var(--ease-bounce);
}
.lj-chip:hover{ border-color:var(--ink); background:rgba(32, 40, 74, 0.05); }
.lj-chip--sm{ font-size:13px; padding:5px 11px; }
.lj-chip--selected{
    color:var(--ink); background:var(--c-sun);
    border-color:var(--ink); box-shadow:var(--pop-sm);
    transform:translate(-1px, -1px);
}
.lj-chip--mint.lj-chip--selected{ background:var(--c-mint); }
.lj-chip--coral.lj-chip--selected{ background:var(--c-coral); }
.lj-chip--sky.lj-chip--selected{ background:var(--c-sky); }

/* ---- Input ---- */
.lj-input{
    display:flex; align-items:center; gap:10px;
    background:var(--surface);
    border:2.5px solid var(--ink); border-radius:var(--r-lg);
    padding:12px 14px;
    transition:box-shadow 140ms ease;
}
.lj-input--lg{ padding:15px 16px; }
.lj-input--invalid{ border-color:var(--danger); }
.lj-input:focus-within{ box-shadow:0 0 0 4px rgba(77, 166, 255, 0.35); }
.lj-input__icon{ display:inline-flex; color:var(--ink-faint); font-size:19px; }
.lj-input__field{
    flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--ink);
}
.lj-input--lg .lj-input__field{ font-size:18px; }
.lj-input__field::placeholder{ color:var(--ink-faint); font-weight:700; }

/* ---- Autocomplete (jump-to search dropdown) ---- */
.lj-ac{ position:relative; }
.lj-hero__form .lj-ac{ flex:1; min-width:260px; }
.lj-ac__menu{
    position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0;
    margin:0; padding:6px; list-style:none;
    background:var(--surface);
    border:2.5px solid var(--ink); border-radius:var(--r-lg);
    box-shadow:4px 4px 0 var(--ink);
    max-height:62vh; overflow-y:auto;
    display:none;
}
.lj-ac.is-open .lj-ac__menu{ display:block; }
.lj-ac__item{
    display:flex; align-items:center; gap:12px;
    padding:9px 10px; border-radius:12px; cursor:pointer;
}
.lj-ac__item.is-active{ background:rgba(37, 208, 160, 0.16); }
.lj-ac__pin{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; border-radius:10px;
    background:var(--c-mint); color:#08402F; font-size:18px;
    border:2.5px solid var(--ink);
}
.lj-ac__text{ display:flex; flex-direction:column; min-width:0; }
.lj-ac__label{
    font-weight:800; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lj-ac__sub{
    font-size:12.5px; font-weight:700; color:var(--ink-faint);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- LineBadge ---- (color set inline via style="--ln:<color>") */
.lj-line{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; height:44px; padding:0 8px;
    background:var(--ln, var(--ink)); color:#FFFFFF;
    font-family:var(--font-display); font-weight:700; font-size:20px; line-height:1;
    letter-spacing:-0.01em;
    border:2.5px solid var(--ink); border-radius:12px;
    box-shadow:2px 2px 0 var(--ink);
    text-decoration:none;
}
a.lj-line:hover{ color:#FFFFFF; text-decoration:none; }
.lj-line--sm{ min-width:32px; height:32px; font-size:15px; border-radius:9px; }
.lj-line--lg{ min-width:58px; height:58px; font-size:26px; border-radius:15px; }

/* ---- ArrivalRow ---- */
.lj-arrival{
    display:flex; align-items:center; gap:14px;
    padding:12px 4px;
    border-bottom:2px dashed var(--hair);
}
.lj-arrival:last-child, .lj-arrival--nodivider{ border-bottom:none; }
.lj-arrival__body{ flex:1; min-width:0; }
.lj-arrival__dest{
    font-family:var(--font-body); font-weight:800; font-size:16px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lj-arrival__sched{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.lj-arrival__eta-wrap{ display:flex; align-items:center; gap:7px; }
.lj-arrival__livedot{
    width:8px; height:8px; border-radius:50%; background:var(--c-mint-deep);
    animation:ljblink 1.1s steps(1) infinite;
}
.lj-arrival__eta{
    font-family:var(--font-mono); font-variant-numeric:tabular-nums;
    font-weight:500; font-size:22px; color:var(--ink);
    min-width:56px; text-align:right; white-space:nowrap;
}
.lj-arrival--live .lj-arrival__eta{ color:var(--c-mint-deep); }

/* small chip-style eta tag (used in compact arrival groups) */
.lj-eta-tag{
    display:inline-flex; align-items:center; gap:5px;
    font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500;
    background:var(--surface); border:2px solid var(--hair);
    border-radius:var(--r-pill); padding:4px 10px; color:var(--ink);
}
.lj-eta-tag--soon{ border-color:var(--c-coral); }
/* < 5 min */
.lj-eta-tag--mid{ border-color:var(--warn); }
/* < 15 min */
.lj-eta-tag--far{ border-color:var(--c-mint-deep); }
/* > 15 min */

/* code pill (stop code) */
.lj-code{
    font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12px;
    color:var(--ink-faint); background:var(--bg);
    border:2px solid var(--hair); border-radius:var(--r-pill); padding:3px 9px;
}

/* star toggle button */
.lj-star{
    border:none; background:transparent; cursor:pointer; line-height:1;
    font-size:22px; color:var(--ink-faint); padding:0;
}
.lj-star.is-on{ color:var(--c-sun-deep); }
.lj-star--boxed{
    border:2.5px solid var(--ink); background:var(--c-sun); color:var(--ink);
    border-radius:var(--r-md); box-shadow:var(--pop-sm);
    width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
    transition:transform 160ms var(--ease-bounce), box-shadow 160ms var(--ease-bounce);
}
.lj-star--boxed:hover{ transform:translate(-2px, -2px); box-shadow:var(--pop); }
.lj-star--boxed:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink); }

/* ===========================================================================
   4. APP LAYOUT
   =========================================================================== */

/* ---- Header ---- */
.lj-header{
    position:sticky; top:0; z-index:30;
    background:var(--bg); border-bottom:2.5px solid var(--ink);
}
.lj-header__inner{
    max-width:1320px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:16px;
}
.lj-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.lj-brand:hover{ text-decoration:none; }
.lj-brand__word{
    font-family:var(--font-display); font-weight:700; font-size:26px;
    color:var(--ink); letter-spacing:-0.02em;
}
.lj-brand__word b{ color:var(--c-coral); font-weight:700; }
.lj-nav{ margin-left:auto; display:flex; gap:6px; }
.lj-nav__link{
    display:flex; align-items:center; gap:7px;
    font-family:var(--font-body); font-weight:800; font-size:15px;
    color:var(--ink-soft); background:transparent;
    border:2.5px solid transparent; border-radius:var(--r-pill);
    padding:7px 15px; cursor:pointer; text-decoration:none;
}
.lj-nav__link:hover{ color:var(--ink); text-decoration:none; }
.lj-nav__link.is-active{
    color:var(--ink); background:var(--c-sun);
    border-color:var(--ink); box-shadow:var(--pop-sm);
}
.lj-header__live{ margin-left:8px; }
/* on the favourites-arrivals page the V ŽIVO badge IS the active nav item */
.lj-header__live.is-active{ box-shadow:var(--pop-sm); }

/* ---- Header kebab (mobile) — the desktop nav links behind ⋮. Open/close is
   app.js (initKebab: toggle .is-open, outside click + Esc close). ---- */
.lj-kebab{ display:none; position:relative; }
.lj-kebab__btn{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:42px; height:42px; padding:0; font-size:18px;
    background:var(--surface); color:var(--ink);
    border:2.5px solid var(--ink); border-radius:var(--r-pill);
    box-shadow:var(--pop-sm); cursor:pointer;
}
.lj-kebab__menu{
    display:none; position:absolute; top:100%; right:0; z-index:1000;
    min-width:190px; padding:7px; margin-top:10px;
    background:var(--surface); border:2.5px solid var(--ink); border-radius:var(--r-md);
    box-shadow:var(--pop);
}
.lj-kebab.is-open .lj-kebab__menu{ display:block; }
.lj-kebab__link{
    display:flex; align-items:center; gap:9px;
    font-weight:800; font-size:15px; color:var(--ink-soft);
    border:2.5px solid transparent; border-radius:var(--r-pill);
    padding:8px 13px; text-decoration:none; white-space:nowrap;
}
.lj-kebab__link:hover, .lj-kebab__link:focus, .lj-kebab__link:active{
    color:var(--ink); background:transparent; text-decoration:none;
}
.lj-kebab__link.is-active{
    color:var(--ink); background:var(--c-sun);
    border-color:var(--ink); box-shadow:var(--pop-sm);
}

/* ---- Bottom nav (mobile) ---- */
.lj-bottomnav{
    position:sticky; bottom:0; z-index:30;
    background:var(--surface); border-top:2.5px solid var(--ink);
    display:none;
}
.lj-bottomnav__inner{ display:flex; justify-content:space-around; padding:8px 6px 10px; }
.lj-bottomnav__link{
    display:flex; flex-direction:column; align-items:center; gap:3px; flex:1;
    background:none; border:none; cursor:pointer; text-decoration:none;
    color:var(--ink-faint); font-family:var(--font-body); font-weight:800; font-size:11px;
}
.lj-bottomnav__link i{ font-size:24px; }
.lj-bottomnav__link.is-active{ color:var(--ink); }

/* ---- Footer ---- */
.lj-footer{
    flex-shrink:0;
    background:var(--surface-ink); color:rgba(255, 255, 255, .75);
    border-top:2.5px solid var(--ink);
    background-image:radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
    background-size:16px 16px;
}
.lj-footer a{ color:#FFFFFF; }
.lj-footer__inner{ max-width:1320px; margin:0 auto; padding:28px 20px; }

/* ---- Hero ---- */
.lj-hero{
    display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:24px; align-items:center;
    background:var(--c-sun); border:2.5px solid var(--ink);
    border-radius:var(--r-2xl); box-shadow:var(--pop-lg);
    padding:28px;
    background-image:radial-gradient(rgba(32, 40, 74, .08) 1.5px, transparent 1.5px);
    background-size:20px 20px;
}
.lj-hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.02; letter-spacing:-0.03em;
    margin:0 0 10px; color:var(--ink);
}
.lj-hero p{ font-weight:700; font-size:17px; color:var(--ink); opacity:.8; max-width:440px; margin:0 0 20px; }
.lj-hero__form{ display:flex; gap:12px; flex-wrap:wrap; }
.lj-hero__form .lj-input{ min-width:260px; flex:1; }
.lj-hero__mascot{ align-self:center; }

/* ---- Quick tiles ---- */
.lj-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:24px; }
.lj-tile{
    text-align:left; cursor:pointer; text-decoration:none;
    background:var(--surface); border:2.5px solid var(--ink); border-radius:var(--r-xl);
    padding:20px; box-shadow:var(--pop);
    transition:all 180ms var(--ease-bounce);
    display:flex; flex-direction:column; gap:12px; min-height:140px;
}
.lj-tile:hover{ transform:translate(-2px, -2px); box-shadow:8px 8px 0 var(--ink); text-decoration:none; }
.lj-tile__icon{
    width:52px; height:52px; border-radius:var(--r-md);
    border:2.5px solid var(--ink); display:inline-flex; align-items:center; justify-content:center;
    color:#FFFFFF; box-shadow:2px 2px 0 var(--ink); font-size:28px;
}
.lj-tile__title{ font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--ink); }
.lj-tile__sub{ font-weight:700; font-size:14px; color:var(--ink-soft); }
.lj-tile__body{ margin-top:auto; }

/* generic responsive grids */
.lj-grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:18px; }
.lj-grid-fill{ display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap:14px; }
/* Nearest-stops layout: map takes the lion's share, list rides alongside. */
.lj-near-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap:20px; align-items:start; }
.lj-map{ width:100%; min-height:640px; }
/* the dedicated najbližje page gives the map the whole viewport height it can */
.lj-map--lg{ min-height:min(78vh, 920px); }
.lj-stack{ display:flex; flex-direction:column; gap:12px; }

/* ---- Live departure board (dark panel) ---- */
.lj-board{
    background:var(--surface-ink); border:2.5px solid var(--ink); border-radius:var(--r-xl);
    box-shadow:6px 6px 0 var(--ink); padding:20px 22px; color:#FFFFFF;
    background-image:radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
    background-size:16px 16px;
}
.lj-board__head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.lj-board__refreshed{ font-family:var(--font-mono); font-size:12.5px; color:rgba(255, 255, 255, .6); }
.lj-board__main{ display:flex; align-items:center; gap:16px; }
.lj-board__dest{ font-family:var(--font-body); font-weight:800; font-size:20px; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lj-board__label{ font-weight:700; font-size:13px; color:rgba(255, 255, 255, .55); }
.lj-board__eta{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:46px; line-height:1; color:var(--c-mint); text-align:right; }
.lj-board__eta small{ font-size:22px; }
.lj-board__eta--now{ font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-0.01em; }
.lj-board__eta--sched{ color:#FFFFFF; }
.lj-board__time{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:rgba(255, 255, 255, .55); margin-top:4px; }
.lj-board__then{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    margin-top:16px; padding-top:14px; border-top:1.5px dashed rgba(255, 255, 255, .18);
}
.lj-board__then-label{ font-weight:800; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255, 255, 255, .5); }
.lj-board__then-chip{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; color:#FFFFFF;
    background:rgba(255, 255, 255, .09); border-radius:var(--r-pill); padding:4px 11px 4px 5px;
}
.lj-board__stamp{ color:var(--ink-faint); }
.lj-board__stamp-dot{
    display:inline-block; width:7px; height:7px; border-radius:50%; vertical-align:middle;
    margin-right:5px; background:var(--c-mint-deep); animation:ljblink 1.1s steps(1) infinite;
}
/* Auto-refresh: dim + block interaction while a fetch is in flight. */
#lj-arrivals{ transition:opacity .18s ease; }
#lj-arrivals.is-refreshing{ opacity:.55; pointer-events:none; }

/* ---- Timetable ---- */
.lj-tt-row{
    display:flex; align-items:flex-start; gap:12px; padding:9px 10px;
    border-bottom:2px dashed var(--hair); border-radius:10px;
}
.lj-tt-row:last-child{ border-bottom:none; }
.lj-tt-row--now{ background:rgba(255, 201, 60, .18); }
.lj-tt-hour{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:20px; color:var(--ink); width:34px; flex-shrink:0; }
.lj-tt-mins{ display:flex; gap:6px; flex-wrap:wrap; }
.lj-tt-min{
    font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:500;
    color:var(--ink); background:var(--bg); border:2px solid var(--hair); border-radius:8px; padding:3px 7px;
}
.lj-tt-min--now{ border-color:var(--ink); background:var(--c-sun); }
/* the "(5′)" relative time inside the sun chip — ink-faint is illegible on sun */
.lj-tt-min--now .lj-faint{ color:var(--ink-soft); }
.lj-legend-swatch{ display:inline-block; width:12px; height:12px; background:rgba(255, 201, 60, .6); border:2px solid var(--ink); border-radius:4px; vertical-align:-2px; margin-right:6px; }

/* collapsible hour section header */
.lj-tt-toggle{
    display:flex; align-items:center; gap:10px; margin:0; padding:14px 16px; cursor:pointer;
    font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); user-select:none;
}
.lj-tt-toggle .ph-caret-down{ margin-left:auto; transition:transform .2s var(--ease-bounce); }
.lj-tt-toggle.is-collapsed .ph-caret-down{ transform:rotate(-90deg); }
/* the collapsible panel itself — grid-rows animation, no JS height measuring
   (app.js initCollapses toggles .is-open via [data-lj-collapse] togglers) */
.lj-collapse{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.lj-collapse > *{ overflow:hidden; min-height:0; }
.lj-collapse.is-open{ grid-template-rows:1fr; }
.lj-tt-line{ border-bottom:2px dashed var(--hair); padding:10px 0; }
.lj-tt-line:last-child{ border-bottom:none; }

/* ---- Timetable day types (delavnik / sobota / nedelja) ----
   One shared 3-col grid for the header row and every line's chip row, so the
   columns stay optically aligned. Today's column: sun band + full-ink surface
   chips; the other two days stay cream-and-soft — findable but secondary.
   The --now (soon) chip keeps its sun styling in any column via :not(). */
.lj-tt-days{ display:grid; grid-template-columns:repeat(3, 1fr); column-gap:10px; }
.lj-tt-dayhead{
    display:flex; align-items:center; gap:6px; padding:0 9px;
    font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.lj-tt-dayhead.today{ color:var(--ink); }
.lj-tt-daytag{
    background:var(--c-sun); color:var(--ink); border:1.5px solid var(--ink); border-radius:var(--r-pill);
    padding:0 7px; font-size:9px; font-weight:800; letter-spacing:.05em;
}
.lj-tt-daycol{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:5px; padding:7px 9px 9px; border-radius:12px; min-width:0; }
.lj-tt-daycol.today{ background:rgba(255, 201, 60, .16); }
.lj-tt-daycol .lj-tt-min:not(.lj-tt-min--now){ color:var(--ink-soft); }
.lj-tt-daycol.today .lj-tt-min:not(.lj-tt-min--now){ color:var(--ink); background:var(--surface); border-color:var(--ink); }
/* a day with no service renders a lone "/" — never an empty gap, which reads as a bug */
.lj-tt-empty{ color:var(--ink-faint); font-weight:700; padding:3px 2px; }

/* day segment switcher — narrow screens only (wide screens show all three columns).
   Active day = sun pill; the coral dot always marks TODAY, even when another day
   is selected, so "which one is today" stays one glance away. */
.lj-tt-seg-wrap{ display:none; }
.lj-tt-seg{
    display:inline-flex; gap:4px; padding:4px;
    background:var(--surface); border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:var(--pop-sm);
}
.lj-tt-seg button{
    display:inline-flex; align-items:center; gap:7px; padding:6px 14px;
    border:2px solid transparent; background:transparent; border-radius:var(--r-pill);
    font-family:var(--font-body); font-weight:800; font-size:13.5px; color:var(--ink-soft); cursor:pointer;
}
.lj-tt-seg button:hover{ color:var(--ink); background:var(--bg-tint); }
.lj-tt-seg button.active{ background:var(--c-sun); border-color:var(--ink); color:var(--ink); box-shadow:2px 2px 0 var(--ink); }
.lj-tt-seg .dot{ width:7px; height:7px; border-radius:50%; background:var(--c-coral); border:1.5px solid var(--ink); flex-shrink:0; }

/* ---- Route print matrix (per-line whole-day view) ----
   The classic printed-timetable form: hour rows × the three day-type columns,
   cells holding minutes only. Default view for stops with few lines; on big
   stops a filter chip swaps it in for one line. Today's column = faint sun
   band, current hour row = stronger band, next departure = sun minute chip
   (kept honest by the ticker via data-tt-mark, class-only — no "(X min)" text).
   Garage runs get .gar's asterisk, explained once in .lj-tt-legend. */
.lj-tt-matrix-head{ display:flex; align-items:center; gap:10px; padding:14px 16px 6px; }
.lj-tt-matrix-from{ padding:0 16px; font-size:13px; font-weight:700; color:var(--ink-soft); }
.lj-tt-matrix{ display:grid; grid-template-columns:44px repeat(3, 1fr); }
.lj-tt-matrix > *{ padding:8px 10px; border-top:2px dashed var(--hair); min-width:0; }
.lj-tt-matrix > .hd{ border-top:none; padding-bottom:4px; }
.lj-tt-matrix > .hr{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:17px; color:var(--ink); }
.lj-tt-matrix > .now{ background:rgba(255, 201, 60, .18); }
.lj-tt-matrix > .today{ background:rgba(255, 201, 60, .10); }
.lj-tt-matrix > .hd.today{ background:transparent; }
.lj-tt-matrix .m{ display:inline-block; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:14px; color:var(--ink-soft); margin-right:9px; }
.lj-tt-matrix .today .m{ color:var(--ink); }
.lj-tt-matrix .m.next{ background:var(--c-sun); border:2px solid var(--ink); border-radius:7px; padding:1px 6px; margin-right:6px; color:var(--ink); box-shadow:1.5px 1.5px 0 var(--ink); }
.lj-tt-matrix .m.gar::after{ content:"*"; color:var(--c-coral-deep); font-weight:700; }
.lj-tt-legend{ font-size:12px; font-weight:700; color:var(--ink-soft); padding:10px 0 0; }
.lj-tt-legend .star{ color:var(--c-coral-deep); font-weight:800; }

/* line filter chips (big stops): "Vse" = hour cards, a line badge = its matrix */
.lj-tt-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.lj-tt-filter-chip{
    display:inline-flex; align-items:center; padding:4px 6px;
    background:var(--surface); border:2px solid var(--hair); border-radius:var(--r-pill);
    font-family:var(--font-body); font-weight:800; font-size:13.5px; color:var(--ink-soft); cursor:pointer;
}
.lj-tt-filter-chip:hover{ border-color:var(--ink); color:var(--ink); }
.lj-tt-filter-chip.active{ border-color:var(--ink); background:var(--c-sun); color:var(--ink); box-shadow:2px 2px 0 var(--ink); }
.lj-tt-filter-chip[data-tt-line-chip=""]{ padding:6px 16px; }

@media (max-width:640px){
    .lj-tt-seg-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
    [data-tt-day] .lj-tt-days{ grid-template-columns:1fr; }
    [data-tt-day] .lj-tt-matrix{ grid-template-columns:44px 1fr; }
    [data-tt-day="1"] [data-tt-type]:not([data-tt-type="1"]),
    [data-tt-day="2"] [data-tt-type]:not([data-tt-type="2"]),
    [data-tt-day="3"] [data-tt-type]:not([data-tt-type="3"]){ display:none; }
    /* the one visible column is primary — un-dim its chips even when it isn't today */
    [data-tt-day] .lj-tt-daycol .lj-tt-min:not(.lj-tt-min--now){ color:var(--ink); }
    [data-tt-day] .lj-tt-matrix .m{ color:var(--ink); }
}

/* ---- Route card origin → destination ---- */
.lj-route-od{
    display:flex; align-items:center; gap:7px; flex-wrap:wrap;
    font-weight:800; font-size:14px; line-height:1.25; color:var(--ink);
}
.lj-route-od__stop{ min-width:0; }
.lj-route-od__leg{ display:inline-flex; align-items:center; gap:7px; min-width:0; }
.lj-route-od__arrow{ color:var(--ink-faint); font-size:13px; flex-shrink:0; }

/* ---- Stop sequence (route stations) ---- */
.lj-seq{ position:relative; }
.lj-seq__spine{ position:absolute; left:6px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--ink); }
.lj-seq__item{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    background:none; border:none; cursor:pointer; padding:7px 0; text-decoration:none;
}
.lj-seq__item:hover{ text-decoration:none; }
.lj-seq__dot{ width:15px; height:15px; border-radius:50%; background:var(--surface); border:2.5px solid var(--ink); flex-shrink:0; position:relative; z-index:1; }
.lj-seq__dot--end{ background:var(--ink); }
.lj-seq__name{ font-weight:800; font-size:15px; color:var(--ink); }
/* play-the-route trail: stops the bus has passed, and the one it's at right now */
.lj-seq__item.is-visited .lj-seq__dot{ background:var(--c-sun); }
.lj-seq__item.is-bus-here .lj-seq__dot{ background:var(--c-sun); transform:scale(1.35); }
.lj-seq__item.is-bus-here .lj-seq__name{
    background:var(--c-sun); color:#20284A; border-radius:8px;
    padding:2px 8px; margin:-2px 0 -2px -8px;
    animation:lj-name-flash .5s ease-out;
}
@keyframes lj-name-flash{
    0%{ transform:scale(1.12); }
    100%{ transform:scale(1); }
}
/* the direction card's play button rides the header row's right edge */
.lj-play{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:34px; height:34px; padding:0; margin-left:auto; font-size:15px;
    background:var(--surface); color:var(--ink);
    border:2.5px solid var(--ink); border-radius:var(--r-pill);
    box-shadow:var(--pop-sm); cursor:pointer;
    transition:transform 160ms var(--ease-bounce), box-shadow 160ms var(--ease-bounce);
}
.lj-play:hover{ transform:translate(-1px, -1px); box-shadow:4px 4px 0 var(--ink); }
.lj-play:active{ transform:translate(1px, 1px); box-shadow:1px 1px 0 var(--ink); }
.lj-play.is-playing{ background:var(--c-sun); color:#20284A; }

/* ---- Mini map (Nearest) ---- */
.lj-minimap{
    position:relative; height:320px; border-radius:var(--r-xl);
    border:2.5px solid var(--ink); box-shadow:var(--pop);
    background:#DCEFE0; overflow:hidden;
}
.lj-minimap__block{ position:absolute; background:#EFF6E8; border:2px solid rgba(32, 40, 74, .18); border-radius:10px; }
.lj-minimap__river{ position:absolute; left:-10%; top:46%; width:130%; height:22px; background:var(--c-sky); opacity:.5; transform:rotate(-7deg); }
.lj-minimap__me{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:22px; height:22px; border-radius:50%; background:var(--c-sky); border:3px solid var(--ink); box-shadow:0 0 0 8px rgba(77, 166, 255, .25); }

/* distance chip (nearest list) */
.lj-dist{
    width:46px; height:46px; border-radius:var(--r-md); background:var(--c-coral);
    border:2.5px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#FFFFFF; flex-shrink:0; box-shadow:2px 2px 0 var(--ink);
}
.lj-dist__n{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; font-size:15px; line-height:1; }
.lj-dist__u{ font-size:9px; font-weight:700; letter-spacing:.03em; opacity:.72; margin-top:1px; }

/* square icon tile (postaje list, etc.) */
.lj-icon-tile{
    width:44px; height:44px; border-radius:var(--r-md); border:2.5px solid var(--ink);
    display:inline-flex; align-items:center; justify-content:center; color:#FFFFFF;
    box-shadow:2px 2px 0 var(--ink); flex-shrink:0; font-size:22px;
}

/* article / prose blocks on cream */
.lj-prose h3{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:2px dashed var(--hair); }
.lj-prose p{ color:var(--ink-soft); font-weight:600; }

/* ===========================================================================
   5. RESPONSIVE
   =========================================================================== */
@media (max-width:980px){
    .lj-route-grid{ grid-template-columns: 1fr !important; }
}
@media (max-width:760px){
    .lj-nav{ display:none; }

    .lj-bottomnav{ display:block; }

    .lj-header__live{ display:none; }

    .lj-theme-toggle{ margin-left:auto; }

    .lj-kebab{ display:block; }
}
@media (max-width:720px){
    .lj-hero{ grid-template-columns: 1fr; }

    .lj-hero__mascot{ display:none; }

    .lj-tiles{ grid-template-columns: 1fr; }

    .lj-grid-2, .lj-near-grid{ grid-template-columns: 1fr; }

    .lj-map{ min-height:380px; }

    .lj-map--lg{ min-height:55vh; }
}

@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; animation:none !important; }

    .lj-btn:hover, .lj-tile:hover, .lj-card--interactive:hover{ transform:none; }
}

/* ===========================================================================
   6. UTILITIES
   The handful of Bootstrap-5 utility classes the markup kept when Bootstrap
   itself was dropped. Same names, same semantics (incl. !important) — the
   names are generic enough that renaming them bought nothing.
   =========================================================================== */
.d-flex{ display:flex !important; }
.d-inline-flex{ display:inline-flex !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.flex-grow-1{ flex-grow:1 !important; }
.align-items-center{ align-items:center !important; }
.align-items-start{ align-items:flex-start !important; }
.ms-auto{ margin-left:auto !important; }
.mt-4{ margin-top:1.5rem !important; }
.my-3{ margin-top:1rem !important; margin-bottom:1rem !important; }
.my-4{ margin-top:1.5rem !important; margin-bottom:1.5rem !important; }
.w-100{ width:100% !important; }
.text-center{ text-align:center !important; }
.position-fixed{ position:fixed !important; }
/* makes the whole nearest-stop card clickable while the star stays tappable above it */
.stretched-link::after{ position:absolute; inset:0; z-index:1; content:""; }

/* anchor-as-card / interactive surfaces shouldn't get the default link underline */
a.lj-card, a.lj-tile{ color:inherit; text-decoration:none; }
a.lj-card:hover, a.lj-tile:hover{ text-decoration:none; }
/* keep the star tappable above a stretched-link card */
.lj-stop-item .lj-star{ position:relative; z-index:2; }

/* ===========================================================================
   7. LEGACY COMPAT
   `BusStop.routeNames` is persisted HTML that still references the old
   .number-circle-small class until the next import refresh re-renders it as
   a .lj-line. Style it to match the brand in the meantime.
   =========================================================================== */
.number-circle-small{
    display:inline-block; min-width:28px; height:28px; line-height:24px; text-align:center;
    padding:0 6px; color:#FFFFFF; font-family:var(--font-display); font-weight:700; font-size:13px;
    border:2.5px solid var(--ink); border-radius:8px; box-shadow:2px 2px 0 var(--ink);
    margin-right:6px; vertical-align:middle;
}

/* ===========================================================================
   8. DARK MODE
   `data-theme` is set on <html> by an inline head script (stored choice, else the
   OS preference). We flip "ink" to a warm light tone so outlines/text/sticker
   shadows read as "cream ink on night paper"; brand fills stay vivid. Targeted
   fixups force dark text back onto the bright (sun/mint/coral/sky) fills.
   =========================================================================== */
:root{ color-scheme:light; }
[data-theme="dark"]{
    --bg:#14182C;
    --bg-tint:#1B2140;
    --surface:#232A48;
    --surface-ink:#0D1126;
    --surface-ink2:#161B33;
    --ink:#ECE7D6;
    --ink-soft:#AEB3CC;
    --ink-faint:#7E84A0;
    --line:#ECE7D6;
    --hair:#39406A;
    color-scheme:dark;
}
[data-theme="dark"] a{ color:var(--c-sky); }
/* line badges rendered as links must keep their white text (the rule above outweighs .lj-line) */
[data-theme="dark"] a.lj-line{ color:#FFFFFF; }
[data-theme="dark"] .lj-btn--ink{ background:var(--surface-ink2); color:var(--ink); }
[data-theme="dark"] .lj-btn--ink:hover{ background:var(--surface-ink); }
/* dark text must stay dark on bright brand fills regardless of theme */
[data-theme="dark"] .lj-hero h1,
[data-theme="dark"] .lj-hero p,
[data-theme="dark"] .lj-btn--sun,
[data-theme="dark"] .lj-badge--sun,
[data-theme="dark"] .lj-chip--selected,
[data-theme="dark"] .lj-nav__link.is-active,
[data-theme="dark"] .lj-kebab__link.is-active,
[data-theme="dark"] .lj-star--boxed,
[data-theme="dark"] .lj-tt-daytag,
[data-theme="dark"] .lj-tt-seg button.active,
[data-theme="dark"] .lj-tt-filter-chip.active,
[data-theme="dark"] .lj-tt-matrix .m.next,
[data-theme="dark"] .lj-tt-min--now{ color:#20284A; }

/* ---- Theme toggle button ---- */
.lj-theme-toggle{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:42px; height:42px; padding:0;
    background:var(--surface); color:var(--ink);
    border:2.5px solid var(--ink); border-radius:var(--r-pill);
    box-shadow:var(--pop-sm); cursor:pointer; font-size:20px;
    transition:transform 160ms var(--ease-bounce), box-shadow 160ms var(--ease-bounce);
}
.lj-theme-toggle:hover{ transform:translate(-2px, -2px); box-shadow:5px 5px 0 var(--ink); }
.lj-theme-toggle:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink); }
.lj-theme-toggle .ph-sun{ display:none; }
.lj-theme-toggle .ph-moon{ display:inline-flex; }
[data-theme="dark"] .lj-theme-toggle .ph-sun{ display:inline-flex; }
[data-theme="dark"] .lj-theme-toggle .ph-moon{ display:none; }

/* ---- Brand logo (inline SVG, wordmark uses currentColor) ---- */
.lj-logo{ display:block; height:40px; width:auto; }

/* ---- Map (MapLibre + temnomodromaps.net) ---- */
#map.map-fallback,
#stop-map.map-fallback{
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:24px; color:var(--ink-soft); font-weight:700; background:var(--bg-tint);
}

/* ---- Stop pins (all maps): normal stop = coral-dot disc, favourite = sun ★ disc.
   MapLibre positions the marker root via an inline transform, so every visual
   effect (hover grow, current-stop pulse) lives on the inner disc, never the root. */
.lj-pin{ display:block; padding:0; border:0; background:none; cursor:pointer; }
.lj-pin:hover{ z-index:5; }
.lj-pin__disc{
    box-sizing:border-box; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:2.5px solid var(--ink); border-radius:50%;
    box-shadow:2px 2px 0 var(--ink);
    font-size:13px; line-height:1; position:relative;
    transition:transform .12s ease;
}
.lj-pin:hover .lj-pin__disc{ transform:scale(1.18); }
.lj-pin__dot{ width:9px; height:9px; border-radius:50%; background:var(--c-coral); }
/* Favourite stops are promoted on every map: mid-size sun ★ disc + pulsing halo.
   The ★ keeps light-theme ink on the sun disc even in dark mode (contrast). */
.lj-pin--fav .lj-pin__disc{ width:32px; height:32px; font-size:16px; background:var(--c-sun); color:#20284A; }
/* Current stop (arrivals/timetables mini-map): grown one step further — size order
   is normal 26 < favourite 32 < current 38, so "you are here" always wins. */
.lj-pin--current{ cursor:default; z-index:2; }
.lj-pin--current .lj-pin__disc{ width:38px; height:38px; border-width:3px; font-size:19px; }
.lj-pin--current .lj-pin__dot{ width:13px; height:13px; }
/* Favourite + current pins pulse a slow halo — plain current coral, favourites sun
   (the fav rule sits later, so a favourited current stop pulses sun too). */
.lj-pin--current .lj-pin__disc::after,
.lj-pin--fav .lj-pin__disc::after{
    content:''; position:absolute; inset:-3px; border-radius:50%;
    border:3px solid var(--c-coral); opacity:0; pointer-events:none;
    animation:lj-pin-pulse 2.6s ease-out infinite;
}
.lj-pin--fav .lj-pin__disc::after{ border-color:var(--c-sun-deep); }
@keyframes lj-pin-pulse{
    0%{ transform:scale(.85); opacity:.85; }
    75%, 100%{ transform:scale(1.75); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
    .lj-pin--current .lj-pin__disc::after,
    .lj-pin--fav .lj-pin__disc::after{ animation:none; }
}
/* Route-trace maps (proge page): zoomed out, full pins bury the trace under a
   caterpillar of discs — ljbus-map.js swaps them to these dots below zoom 13.
   Favourites keep the sun fill (font-size:0 hides the ★); halos pause. */
.lj-pin--mini .lj-pin__disc{ width:14px; height:14px; border-width:2px; box-shadow:1.5px 1.5px 0 var(--ink); font-size:0; }
.lj-pin--mini .lj-pin__dot{ width:5px; height:5px; }
.lj-pin--mini .lj-pin__disc::after{ animation:none; }
/* the route badge planted at each terminus of the trace — decoration only, the
   stop pin underneath stays tappable */
.lj-pin-flag{ pointer-events:none; z-index:3; }
/* play-the-route: the visited stop pops + flashes sun and wears its name chip */
.lj-pin--visit{ z-index:6; }
.lj-pin--visit .lj-pin__disc{ transform:scale(1.45); background:var(--c-sun); }
.lj-pin--visit .lj-pin__dot{ background:var(--ink); }
/* the chip floats high enough to clear the 40px bus box, which parks dead on the
   pin during the visit — anything lower gets clipped by the bus's top edge */
.lj-pin__label{
    position:absolute; bottom:calc(100% + 18px); left:50%; transform:translateX(-50%);
    background:var(--surface); color:var(--ink);
    font-family:var(--font-body); font-weight:800; font-size:13px; line-height:1;
    padding:6px 10px; white-space:nowrap; pointer-events:none;
    border:2.5px solid var(--ink); border-radius:var(--r-pill); box-shadow:2px 2px 0 var(--ink);
}
/* the bus that rides the trace — above the popped visit pins (z6): the moving
   actor wins the spot, the sun flash peeks out from underneath. MapLibre owns the
   outer element's transform (positioning), so all the life — pop-in, driving rock,
   pop-out — animates the inner __body. */
.lj-bus-marker{ width:40px; height:40px; z-index:7; pointer-events:none; }
.lj-bus-marker__body{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; font-size:22px;
    background:var(--surface); border:2.5px solid var(--ink); border-radius:12px;
    box-shadow:3px 3px 0 var(--ink);
    animation:lj-bus-in .3s cubic-bezier(.34,1.56,.64,1) both;
}
.lj-bus-marker img{ width:26px; height:26px; }
.lj-bus-marker--drive .lj-bus-marker__body{ animation:lj-bus-rock .48s ease-in-out infinite alternate; }
.lj-bus-marker--out .lj-bus-marker__body{ animation:lj-bus-out .22s ease-in both; }
@keyframes lj-bus-in{
    from{ transform:scale(0); }
    to{ transform:scale(1); }
}
@keyframes lj-bus-rock{
    from{ transform:rotate(-2.6deg); }
    to{ transform:rotate(2.6deg); }
}
@keyframes lj-bus-out{
    to{ transform:scale(0); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
    .lj-bus-marker__body,
    .lj-bus-marker--drive .lj-bus-marker__body,
    .lj-bus-marker--out .lj-bus-marker__body{ animation:none; }
}
.lj-map-pop__dist{ font-weight:700; font-size:13px; color:var(--ink-soft); }
/* keep MapLibre popups on-brand (surface bg so text stays legible in dark mode);
   .maplibregl-map prefix keeps these ahead of maplibre-gl.css, which loads after app.css */
.maplibregl-map .maplibregl-popup-content{
    background:var(--surface); color:var(--ink);
    border:2.5px solid var(--ink); border-radius:var(--r-md); box-shadow:var(--pop-sm);
    font-family:var(--font-body); font-weight:700; padding:11px 14px 12px; max-width:240px;
    /* the click/double-click that opens the popup often leaves the title or star
       text-selected — the card is a control, not copy (also kills the iOS callout) */
    -webkit-user-select:none; user-select:none;
}
.maplibregl-map .maplibregl-popup-content a{ color:var(--c-sky-deep); }
/* the generic dark-mode link rule loses specificity to the line above — re-assert it
   (sky-deep is only ~3.6:1 on the dark surface; --c-sky passes AA) */
[data-theme="dark"] .maplibregl-map .maplibregl-popup-content a{ color:var(--c-sky); }
/* the tip triangle can't carry the 2.5px ink outline, so it pokes out of the card as an
   un-inked nub — hide it; the popup offsets already keep a clear gap to the pin */
.maplibregl-map .maplibregl-popup-tip{ display:none; }

/* branded popup card contents */
/* head row: title grows, favourite star hugs the right edge (popup is only ~240px) */
.lj-map-pop__head{ display:flex; align-items:flex-start; gap:8px; }
.lj-map-pop__head .lj-map-pop__title{ flex:1; min-width:0; }
.lj-map-pop .lj-star{ flex-shrink:0; font-size:19px; margin-top:-1px; }
.lj-map-pop__title{ font-weight:800; font-size:15px; line-height:1.25; color:var(--ink); }
.lj-map-pop__link{
    display:inline-flex; align-items:center; gap:5px; margin-top:9px;
    font-weight:800; font-size:13px; text-decoration:none; color:var(--c-sky-deep);
}
[data-theme="dark"] .lj-map-pop__link{ color:var(--c-sky); }
.lj-map-pop__link:hover{ text-decoration:underline; }
/* lazy next-arrivals chips inside the pin popup — empty until the popup opens and JS fills it */
.lj-map-pop__arr{
    display:flex; flex-wrap:wrap; gap:6px;
    margin-top:9px; padding-top:8px; border-top:2px dashed var(--hair);
}
.lj-map-pop__arr:empty{ display:none; }
/* the chip is also reused verbatim by the nearby-list next-arrivals row below;
   hairline outline + tint keep the pill readable as ONE unit on the white card,
   and the 2px vertical padding keeps the row ≈ the badge row it swaps in for */
.lj-map-pop__chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 9px 2px 3px; border-radius:var(--r-pill);
    background:var(--bg); border:1.5px solid var(--hair);
}
.lj-map-pop__eta{
    font-family:var(--font-mono); font-variant-numeric:tabular-nums;
    font-weight:600; font-size:13px; color:var(--ink);
}
.lj-map-pop__note{ font-weight:700; font-size:12.5px; color:var(--ink-soft); }
/* once arrival chips are in, the static line-badge row duplicates them and eats scarce
   vertical space (popups must fit a 380px map) — hide it; without chips (error / no
   arrivals / old browser without :has) the badge row stays */
.lj-map-pop:has(.lj-map-pop__chip) .lj-lines{ display:none; }

/* wrapping row of line badges (nearby list + popups) with a "+N" overflow chip */
.lj-lines{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.lj-line--more{ background:var(--surface); color:var(--ink-soft); }

/* next-arrival-per-line chips under a nearby-list item (same row the pin popup shows) —
   filled from the shared map arrivals store when a popup tap or the eager prefetch
   learns the stop's arrivals */
.lj-stop-next{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:7px; }
/* once chips are in they carry the line badges, so the static badge row duplicates them —
   swap it out, same as inside the popup (badges stay when chips are unknown/denied) */
.lj-stop-item:has(.lj-stop-next .lj-map-pop__chip) .lj-lines{ display:none; }
.lj-stop-next:empty{ display:none; }

/* Favourite stops in the nearby list: sun stripe down the left edge (the vertical
   cousin of .lj-card__accent) — echoes the sun ★ map pins. Toggled live by
   ljbus-map.js on the ljbus:favourite event; pan re-renders read favSet. */
.lj-stop-item--fav{ padding-left:22px; }
.lj-stop-item--fav::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:7px;
    background:var(--c-sun); border-right:2.5px solid var(--ink);
}
/* the list star is the row's main control — bigger than the popup/default 22px */
.lj-stop-item .lj-star{ font-size:26px; }

/* ---- MapLibre controls as LjBus stickers (raw white defaults are off-brand) ----
   .maplibregl-map prefix keeps these ahead of maplibre-gl.css, which loads after app.css. */
.maplibregl-map .maplibregl-ctrl-group,
.maplibregl-map .maplibregl-ctrl-group:not(:empty){
    background:var(--surface);
    border:2.5px solid var(--ink); border-radius:var(--r-sm);
    box-shadow:var(--pop-sm);
    overflow:hidden;
}
.maplibregl-map .maplibregl-ctrl-group button{
    width:38px; height:38px;
    background:var(--surface); border-radius:0;
}
.maplibregl-map .maplibregl-ctrl-group button + button{ border-top:2px dashed var(--hair); }
.maplibregl-map .maplibregl-ctrl-group button:hover{ background:var(--bg-tint); }
/* maplibre's icons are dark-gray SVG data-URIs — invert them on dark surfaces */
[data-theme="dark"] .maplibregl-map .maplibregl-ctrl button .maplibregl-ctrl-icon{ filter:invert(.88); }
.maplibregl-map .maplibregl-ctrl-attrib{
    font-family:var(--font-body); font-weight:700; font-size:11px;
    background:var(--surface); color:var(--ink-soft);
    border-radius:var(--r-xs) 0 0 0;
}
.maplibregl-map .maplibregl-ctrl-attrib a{ color:var(--ink-soft); }

/* ---- AdSense: collapse unfilled slots so they never leave a reserved-height hole ---- */
ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important; }