/* =========================================================
   rail.day.az — stylesheet
   ========================================================= */

/* ---------- Self-hosted Roboto (variable, subset) ---------- */
@font-face {
    font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/assets/fonts/roboto-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/assets/fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg:        #eef1f5;
    --surface:   #ffffff;
    --surface-2: #f7f9fb;
    --line:      #e2e7ee;
    --line-2:    #eef1f5;
    --text:      #16202c;
    --text-mut:  #5b6675;
    --text-sub:  #7a8696;
    --brand:     #0a7d6b;
    --brand-d:   #086457;
    --brand-l:   #e6f4f1;
    --accent:    #e8852a;
    --radius:    12px;
    --radius-sm: 8px;
    --shadow:    0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.06);
    --shadow-lg: 0 6px 24px rgba(16,24,40,.10);

    --ok:    #067647;  --ok-b:    #d1fadf;
    --intl:  #2563eb;  --intl-b:  #e0eaff;
    --warn:  #b54708;  --warn-b:  #fef0c7;
    --sub-c: #0a7d6b;  --sub-cb:  #e6f4f1;
    --int-c: #6d28d9;  --int-cb:  #ede9fe;
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
    --bg:        #0f1720;
    --surface:   #18222e;
    --surface-2: #131b25;
    --line:      #2a3543;
    --line-2:    #232e3a;
    --text:      #e7edf3;
    --text-mut:  #a3b0bf;
    --text-sub:  #8593a3;
    --brand:     #2ec4a6;
    --brand-d:   #4dd6ba;
    --brand-l:   #15302b;
    --shadow:    0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.35);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.45);
    --ok:#34d399; --ok-b:#0c3b2c; --intl:#7aa2ff; --intl-b:#1b2a4d;
    --warn:#fbbf6b; --warn-b:#3a2a10; --sub-c:#4dd6ba; --sub-cb:#14302b;
    --int-c:#b79bf0; --int-cb:#26203b;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        #0f1720;
        --surface:   #18222e;
        --surface-2: #131b25;
        --line:      #2a3543;
        --line-2:    #232e3a;
        --text:      #e7edf3;
        --text-mut:  #a3b0bf;
        --text-sub:  #8593a3;
        --brand:     #2ec4a6;
        --brand-d:   #4dd6ba;
        --brand-l:   #15302b;
        --shadow:    0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.35);
        --shadow-lg: 0 8px 28px rgba(0,0,0,.45);
        --ok:#34d399; --ok-b:#0c3b2c; --intl:#7aa2ff; --intl-b:#1b2a4d;
        --warn:#fbbf6b; --warn-b:#3a2a10; --sub-c:#4dd6ba; --sub-cb:#14302b;
        --int-c:#b79bf0; --int-cb:#26203b;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; }
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px; line-height: 1.5; color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-d); text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; color: var(--text); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.main { padding-bottom: 48px; }

/* a11y */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header__inner { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--brand); font-weight: 800; font-size: 18px; letter-spacing: -.2px; }
.brand:hover { text-decoration: none; color: var(--brand-d); }
.brand__mark { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--brand-l); border-radius: 9px; }
.topnav { display: flex; gap: 6px; margin-left: auto; }
.topnav a { padding: 7px 12px; border-radius: 8px; color: var(--text-mut); font-weight: 600; font-size: 14px; }
.topnav a:hover { background: var(--surface-2); color: var(--brand-d); text-decoration: none; }
.topnav a[aria-current="page"] { background: var(--brand-l); color: var(--brand-d); }
.langs { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 9px; border: 1px solid var(--line); }
.langs__item { padding: 5px 9px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--text-sub); }
.langs__item:hover { color: var(--brand-d); text-decoration: none; }
.langs__item.is-current { background: var(--brand); color: #fff; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: 14px 0 2px; font-size: 13px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: 6px; color: var(--text-sub); }
.breadcrumbs a { color: var(--text-mut); }
.breadcrumbs [aria-current] { color: var(--text-sub); }

/* ---------- Hero ---------- */
.hero { padding: 22px 0 12px; }
.hero__title { font-size: 26px; margin: 0 0 8px; }
.hero__lead { color: var(--text-mut); max-width: 760px; margin: 0 0 14px; }
.hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero__clock { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); color: var(--brand-d); font-variant-numeric: tabular-nums; }
.hero__clock time { font-weight: 800; font-size: 16px; letter-spacing: .5px; }
.hero__tz { color: var(--text-sub); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.install-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--brand); color: #fff; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.install-btn:hover { background: var(--brand-d); }

/* ---------- Page head (inner pages) ---------- */
.page-head { padding: 18px 0 10px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.page-head__title { font-size: 23px; margin: 0; }
.page-head__lead { color: var(--text-mut); max-width: 760px; margin: 6px 0 0; width: 100%; }

/* ---------- Search ---------- */
.search { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin: 6px 0 22px; }
.search__title { font-size: 16px; margin: 0 0 12px; }
.search__fields { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.search__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.search__label { font-size: 12px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: .3px; }
.search select { appearance: none; -webkit-appearance: none; width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font: inherit; color: var(--text); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a8696' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.search__swap { flex: 0 0 auto; align-self: flex-end; width: 46px; height: 46px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 50%; cursor: pointer; font-size: 17px; color: var(--brand-d); }
.search__swap:hover { background: var(--brand-l); }
.search__go { flex: 0 0 auto; height: 46px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.search__go:hover { background: var(--brand-d); }
.search__hint { margin: -6px 0 12px; font-size: 13px; color: var(--text-sub); }
.search__field { position: relative; }
.ac-input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font: inherit; color: var(--text); }
.ac-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.ac-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; }
.ac-item { padding: 9px 11px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.ac-item:hover, .ac-item.is-active { background: var(--brand-l); color: var(--brand-d); }
.search__near { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-d); cursor: pointer; }
.search__near:hover { background: var(--brand-l); border-color: var(--brand); }

/* ---------- Panel / board ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px; }
.panel__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.panel__title { font-size: 16px; margin: 0; }
.panel__body { padding: 4px 0; }
.panel__more { display: inline-block; padding: 12px 18px; font-weight: 600; }

/* day tabs */
.daytabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.daytabs__tab { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-mut); display: inline-flex; align-items: center; gap: 6px; }
.daytabs__tab:hover { color: var(--brand-d); text-decoration: none; }
.daytabs__tab.is-active { background: var(--surface); color: var(--brand-d); box-shadow: var(--shadow); }
.daytabs__today { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #fff; background: var(--brand); padding: 1px 6px; border-radius: 999px; letter-spacing: .3px; }
.daytabs__lbl--short { display: none; }

/* ---------- Board table ---------- */
.board-wrap { width: 100%; overflow-x: auto; }
.board { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.board thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-sub); font-weight: 700; padding: 10px 18px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.board tbody td { padding: 12px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.board tbody tr:last-child td { border-bottom: 0; }
.board tbody tr:hover { background: var(--surface-2); }
.board__clock { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; letter-spacing: .5px; }
.board__in { display: block; font-size: 11px; color: var(--brand-d); font-weight: 600; }
.board__from { display: block; font-size: 11px; color: var(--text-sub); }
.board__via { color: var(--text-mut); }
.board__via-note { color: var(--text-sub); font-size: 13px; white-space: nowrap; }
.train-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.board__kind { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; letter-spacing: .3px; }
.board__kind--suburban { background: var(--sub-cb); color: var(--sub-c); }
.board__kind--intercity { background: var(--int-cb); color: var(--int-c); }
.board-empty { padding: 22px 18px; color: var(--text-mut); }
.board-empty--lg { font-size: 15px; }

.badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; letter-spacing: .3px; margin-left: 6px; vertical-align: middle; }
.badge--intl { background: var(--intl-b); color: var(--intl); }
.badge--express { background: var(--warn-b); color: var(--warn); }

/* ---------- Board filters ---------- */
.board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.board-filters__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-sub); }
.bf-chip { padding: 6px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-mut); cursor: pointer; }
.bf-chip:hover { border-color: var(--brand); color: var(--brand-d); }
.bf-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bf-chip--express.is-active { background: var(--warn); border-color: var(--warn); color: #fff; }

/* ---------- Cards (corridors) ---------- */
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 26px; }
.lines__title, .chips-block__title { font-size: 17px; margin: 0 0 12px; }
.cards { display: flex; flex-direction: column; gap: 10px; }
.cards--wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-1px); transition: .15s; border-color: var(--brand-l); }
.card__route { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.card__arrow { color: var(--brand); font-weight: 400; }
.card__meta { display: flex; align-items: center; gap: 6px; }
.card__kind { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; letter-spacing: .3px; }
.card__kind--suburban { background: var(--sub-cb); color: var(--sub-c); }
.card__kind--intercity { background: var(--int-cb); color: var(--int-c); }

/* ---------- Chips ---------- */
.chips-block { margin: 6px 0 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); box-shadow: var(--shadow); }
.chip:hover { background: var(--brand-l); border-color: var(--brand); color: var(--brand-d); text-decoration: none; }
.chip__arrow, .chip--trip .chip__arrow { color: var(--brand); }

/* ---------- Route page ---------- */
.route-dir { margin: 0 0 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.route-dir__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.route-dir__arrow { color: var(--brand); }
.route-dir__count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-sub); background: var(--surface-2); padding: 3px 10px; border-radius: 999px; }
.stops-line { padding: 14px 18px; font-size: 13px; line-height: 2; color: var(--text-mut); border-top: 1px solid var(--line-2); }
.stops-line__label { font-weight: 700; color: var(--text-sub); margin-right: 4px; }
.stops-line__sep { color: var(--line); }

/* ---------- Train page ---------- */
.train-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; }
.train-meta__item { display: flex; flex-direction: column; gap: 2px; }
.train-meta__k { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-sub); font-weight: 700; }
.train-meta__v { font-weight: 600; }
.train-summary { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--brand-l); border-radius: var(--radius); margin-bottom: 18px; }
.train-summary__pt { display: flex; flex-direction: column; }
.train-summary__pt--end { text-align: right; margin-left: auto; }
.train-summary__time { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-d); }
.train-summary__st { color: var(--text-mut); font-weight: 600; }
.train-summary__dur { flex: 1; text-align: center; color: var(--text-sub); font-size: 13px; font-weight: 600; position: relative; }
.train-summary__dur::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 2px dotted var(--brand); opacity: .4; z-index: 0; }
.train-summary__dur { background: var(--brand-l); }

.timeline { list-style: none; margin: 0; padding: 6px 0 6px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.timeline__item { display: grid; grid-template-columns: 64px 24px 1fr; align-items: center; padding: 2px 18px; position: relative; }
.timeline__time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.timeline__dot { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--brand); background: var(--surface); z-index: 1; justify-self: center; position: relative; }
.timeline__item::before { content: ''; position: absolute; left: calc(64px + 12px - 1px); top: 0; bottom: 0; width: 2px; background: var(--brand); opacity: .35; }
.timeline__item--first::before { top: 50%; }
.timeline__item--last::before { bottom: 50%; }
.timeline__item--first .timeline__dot, .timeline__item--last .timeline__dot { background: var(--brand); }
.timeline__station { padding: 11px 0; font-weight: 600; }

.trip-count { font-weight: 600; color: var(--text-mut); margin: 0 0 12px; }
.board--trip, .board--route { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

/* ---------- Prose ---------- */
.prose { margin: 26px 0 0; max-width: 800px; }
.prose h2 { font-size: 19px; margin: 22px 0 8px; }
.prose h3 { font-size: 16px; margin: 18px 0 6px; }
.prose p { color: var(--text-mut); margin: 0 0 10px; }
.prose__muted { font-size: 13px; color: var(--text-sub); }

/* ---------- 404 ---------- */
.notfound { padding: 30px 0; }
.notfound__title { font-size: 26px; margin: 0 0 8px; }
.notfound__body { color: var(--text-mut); max-width: 560px; }
.btn { display: inline-block; margin: 14px 0 26px; padding: 11px 22px; background: var(--brand); color: #fff; border-radius: var(--radius-sm); font-weight: 700; }
.btn:hover { background: var(--brand-d); text-decoration: none; color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 22px 0; margin-top: 30px; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; color: var(--text-sub); font-size: 13px; }
.site-footer__copy { margin-left: auto; font-weight: 600; }

/* ---------- Theme toggle ---------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; color: var(--text-mut); cursor: pointer; }
.theme-toggle:hover { color: var(--brand-d); border-color: var(--brand-l); }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle__moon { display: inline; }
}

/* ---------- ADY note bar ---------- */
.notebar { background: var(--warn-b); border-bottom: 1px solid var(--line); }
.notebar__inner { display: flex; align-items: center; gap: 10px; padding: 9px 18px; }
.notebar__icon { color: var(--warn); flex: 0 0 auto; }
.notebar__text { margin: 0; font-size: 13px; color: var(--text); line-height: 1.4; }
.notebar__text strong { color: var(--warn); }
.notebar__close { margin-left: auto; flex: 0 0 auto; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--text-sub); cursor: pointer; padding: 0 4px; }
.notebar__close:hover { color: var(--text); }

/* ---------- Disclaimer ---------- */
.disclaimer { display: flex; gap: 12px; margin: 22px 0 0; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.disclaimer__icon { color: var(--text-sub); flex: 0 0 auto; margin-top: 1px; }
.disclaimer__title { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.disclaimer__list { margin: 0; padding-left: 16px; }
.disclaimer__list li { font-size: 12.5px; color: var(--text-mut); margin-bottom: 3px; }

/* ---------- CTA row / buy ticket ---------- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
.btn--ticket { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cta-row__note { font-size: 12.5px; color: var(--text-sub); }

/* ---------- Favorites ---------- */
.page-actions { display: flex; justify-content: flex-end; margin: 8px 0 -4px; }
.fav-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-mut); cursor: pointer; box-shadow: var(--shadow); }
.fav-btn:hover { border-color: var(--brand); color: var(--brand-d); }
.fav-btn__icon { color: var(--text-sub); }
.fav-btn__icon path { fill: none; }
.fav-btn.is-active { background: var(--brand-l); border-color: var(--brand); color: var(--brand-d); }
.fav-btn.is-active .fav-btn__icon { color: var(--accent); }
.fav-btn.is-active .fav-btn__icon path { fill: var(--accent); stroke: var(--accent); }

.fav-block { margin: 0 0 22px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.fav-block__title { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 12px; }
.fav-block__title svg { color: var(--accent); }
.fav-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.fav-card { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fav-card:hover { border-color: var(--brand); text-decoration: none; }
.fav-card__title { font-weight: 600; color: var(--text); }
.fav-card__next { font-size: 13px; font-weight: 800; color: var(--brand-d); font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .lines { grid-template-columns: 1fr; gap: 18px; }
    .hero__title { font-size: 22px; }
    .topnav { display: none; }

    /* Day-type selector: full-width bar; segments grow from their content width
       (proportional to content, not equal), filling the whole row. */
    .page-head__tabs { width: 100%; }
    .daytabs { display: flex; width: 100%; }
    .daytabs__tab { flex: 1 1 auto; justify-content: center; text-align: center; }
    .daytabs__lbl--full { display: none; }
    .daytabs__lbl--short { display: inline; }
    .daytabs__today { font-size: 9px; padding: 1px 5px; }
    .panel__head .daytabs { margin-top: 4px; }

    /* Tables → cards */
    .board thead { position: absolute; left: -9999px; }
    .board, .board tbody, .board tr, .board td { display: block; width: 100%; }
    .board tbody tr { padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
    .board tbody td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
    .board tbody td::before { content: attr(data-label); font-size: 12px; color: var(--text-sub); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
    .board__dest, .board__train { text-align: right; }
    .timeline__item { grid-template-columns: 56px 22px 1fr; }
    .timeline__item::before { left: calc(56px + 11px - 1px); }
}