/* =========================================================================
   Metro CN — light, information-dense "railway timetable" look (refined).
   Same class names and layout hooks as before; only the finish changed:
   layered shadows, a clearer radius scale, softer hairlines, consistent
   focus rings, tabular numerals and calmer interaction states.
   ------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
    /* Chrome is neutral graphite ("station signage") so the line colours,
       which come from the data via --c, are the only saturated colours.
       To tint the UI per city or per line, override --primary / --primary-hover
       on a wrapper element. */
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-sunken: #f7f8fa;
    --surface-raised: #fafbfc;

    /* Hairlines */
    --border: #e5e8ec;
    --border-strong: #cfd5dc;
    --border-hover: #b4bcc7;

    /* Text */
    --text: #1d2530;
    --text-2: #515c6a;
    --text-3: #647080;
    --placeholder: #8f99a6;

    /* Ink: the interactive colour (links, active states, headers, buttons) */
    --primary: #2c3744;
    --primary-hover: #1f2933;
    --primary-deep: #12181f;
    --primary-soft: #eff1f4;
    --on-primary: #ffffff;
    --ring: rgba(31, 41, 51, 0.16);

    /* Accent: signal amber, only for the main call-to-action and key titles */
    --accent: #c96a05;
    --accent-hover: #b45309;
    --accent-strong: #b45309;
    --accent-strong-hover: #92400e;
    --accent-fg: #ffffff;

    /* Route semantics (start / end / transfer, like on-board route maps) */
    --start: #15803d;
    --end: #d92d20;
    --transfer: #f59e0b;

    /* Feedback */
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --danger-border: #fda29b;
    --disabled: #c9d0d8;

    /* Map */
    --map-bg: #fafbfc;
    --map-label: #2f3945;

    /* Generic metro line palette, used only for the decorative strip */
    --metro-red: #e4002b;
    --metro-orange: #f58220;
    --metro-yellow: #ffc20e;
    --metro-green: #00a650;
    --metro-teal: #00a0b0;
    --metro-blue: #0072bc;
    --metro-purple: #8e3b97;

    /* Radius scale: control < card < panel */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    /* Layered shadows (tight contact + soft ambient) */
    --shadow-xs: 0 1px 1px rgba(16, 42, 67, 0.04);
    --shadow: 0 1px 2px rgba(16, 42, 67, 0.05), 0 6px 16px -10px rgba(16, 42, 67, 0.16);
    --shadow-md: 0 1px 2px rgba(16, 42, 67, 0.06), 0 10px 24px -12px rgba(16, 42, 67, 0.22);
    --shadow-lg: 0 2px 4px rgba(16, 42, 67, 0.06), 0 18px 40px -16px rgba(16, 42, 67, 0.34);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --t-fast: 0.14s;
    --t: 0.2s;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
::selection { background: rgba(31, 41, 51, 0.2); }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input { font-family: inherit; }

/* One consistent keyboard focus ring for anything interactive. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Quiet, thin scrollbars. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Header ------------------------------------------------------------ */
.site-header {
    position: relative;
    background: linear-gradient(95deg, #323e4c 0%, #1b232c 100%);
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
/* A thin strip of generic line colours: the one decorative metro cue. */
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--metro-red) 0 14.28%,
        var(--metro-orange) 0 28.57%,
        var(--metro-yellow) 0 42.85%,
        var(--metro-green) 0 57.14%,
        var(--metro-teal) 0 71.42%,
        var(--metro-blue) 0 85.71%,
        var(--metro-purple) 0 100%);
}
.site-header-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.site-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-logo {
    width: 38px; height: 38px;
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 4px;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 42, 67, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.site-brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.site-brand-text b { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.site-brand-text small { font-size: 11px; opacity: 0.85; white-space: nowrap; letter-spacing: 0.02em; }
.site-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-chip {
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 150px;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.header-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
.header-chip span { overflow: hidden; text-overflow: ellipsis; }
.header-chip:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.55); }
.header-chip:focus-visible { outline-color: #fff; }

/* --- City section nav --------------------------------------------------- */
.site-nav { background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.site-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.site-nav-inner::-webkit-scrollbar { display: none; }
.site-nav-link {
    position: relative;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-nav-link:hover { color: var(--primary-hover); border-bottom-color: var(--border-strong); }
.site-nav-link.is-active { color: var(--primary-hover); border-bottom-color: var(--primary); font-weight: 600; }

/* --- Page shell --------------------------------------------------------- */
.page { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; min-width: 0; }
.page-body { width: 100%; }

/* --- Home hero / query panel -------------------------------------------- */
.home-hero {
    background:
        linear-gradient(180deg, rgba(239, 241, 244, 0.9) 0%, rgba(255, 255, 255, 0) 70px),
        var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 28px 22px 26px;
    text-align: center;
    box-shadow: var(--shadow);
}
.home-kicker {
    color: var(--primary-hover);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.home-hero h1 { font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.home-sub { color: var(--text-2); font-size: 13.5px; margin-top: 6px; }
.home-search-row { display: flex; gap: 8px; max-width: 560px; margin: 18px auto 0; }
.home-search { position: relative; flex: 1; }
.home-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--text-3);
    pointer-events: none;
    transition: color var(--t-fast) var(--ease);
}
.home-search:focus-within svg { color: var(--primary); }
.home-search input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 1px 2px rgba(16, 42, 67, 0.04);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.home-search input::placeholder { color: var(--placeholder); }
.home-search input:hover { border-color: var(--border-hover); }
.home-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.home-search-btn {
    height: 44px;
    padding: 0 22px;
    border: none;
    border-radius: var(--radius);
    background: var(--accent-strong);
    color: var(--accent-fg);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.home-search-btn:hover { background: var(--accent-strong-hover); }
.home-search-btn:active { transform: translateY(1px); }

/* --- Home layout (left-right) ------------------------------------------- */
.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}
.home-main { min-width: 0; }
.home-side { min-width: 0; }
.side-card { min-width: 0; }
.dir-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.dir-head h2 {
    font-size: 17px;
    padding-left: 10px;
    border-left: 3px solid var(--primary);
    line-height: 1.2;
}
.dir-head span { color: var(--text-3); font-size: 12px; }
.region {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.region-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.region-head h3 { font-size: 14px; }
.region-head span { color: var(--text-3); font-size: 12px; }
.region-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px; }
@media (min-width: 640px) { .region-cities { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1000px) { .region-cities { grid-template-columns: repeat(10, 1fr); } }
.region-city {
    font-size: 13.5px;
    color: var(--text-2);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    text-align: center;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.region-city:hover { color: var(--primary-hover); background: var(--primary-soft); }

/* --- Sidebar cards ------------------------------------------------------- */
.city-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
}
.city-main { min-width: 0; }
.city-sidebar { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 16px; }

.side-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.side-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
}
.side-card-title { font-size: 13px; font-weight: 700; padding-left: 8px; border-left: 3px solid var(--primary); line-height: 1.2; }
.side-card-count, .side-card-more { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.side-card-more { transition: color var(--t-fast) var(--ease); }
.side-card-more:hover { color: var(--primary); }

/* Right-rail clock (plan / route pages) */
.side-clock { padding: 14px 14px 12px; text-align: center; }
.side-clock-time {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.side-clock-date { margin: 4px 0 0; font-size: 12.5px; color: var(--text-2); }

.side-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 60vh;
    overflow: auto;
    padding: 10px;
}
.side-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 5px;
    border-radius: var(--radius);
    background: var(--c);
    color: var(--c-fg);
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.side-line:hover { filter: brightness(1.06) saturate(1.04); }
.side-line:active { transform: scale(0.98); }
.side-line.is-numbered { justify-content: center; }
.side-line-num {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.side-line-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.side-line-cn {
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-line-en {
    max-width: 100%;
    font-size: 8px;
    font-weight: 500;
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-line:not(.is-numbered) { flex-direction: column; gap: 1px; }
.side-line:not(.is-numbered) .side-line-cn { font-size: 10px; }
.side-line.is-active {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.side-transfers { padding: 6px; display: grid; gap: 2px; }
.side-transfer {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: background var(--t-fast) var(--ease);
}
.side-transfer:hover { background: var(--surface-sunken); }
.side-transfer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-hot { padding: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.side-hot-link {
    font-size: 13px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.side-hot-link:hover { color: var(--primary-hover); background: var(--primary-soft); }

.side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.side-stat {
    text-align: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-raised);
}
.side-stat b { display: block; font-size: 22px; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.side-stat span { font-size: 12px; color: var(--text-3); }
.side-latest { display: flex; flex-direction: column; padding: 8px; }
.side-latest a {
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.side-latest a:hover { color: var(--primary-hover); background: var(--surface-sunken); }
.side-empty { padding: 10px 8px; color: var(--text-3); font-size: 13px; }

.home-posts { display: flex; flex-direction: column; padding: 6px 8px; }
.home-post {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius);
    transition: background var(--t-fast) var(--ease);
}
.home-post:hover { background: var(--surface-sunken); }
.home-post-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    color: var(--text-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color var(--t-fast) var(--ease);
}
.home-post:hover .home-post-title { color: var(--primary-hover); }
.home-post-meta { flex: 0 0 auto; font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Related posts card reuses the home-post rows without extra nesting padding. */
.related-posts .home-posts { padding: 0; }
.related-posts .home-post { padding: 8px 10px; border-radius: 0; }
.related-posts .home-post + .home-post { border-top: 1px solid var(--border); }

/* --- Cards / tables ------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head.is-center { align-items: center; }
.card > .btn-primary { margin-top: 14px; }
.card-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-left: 10px;
    border-left: 3px solid var(--primary);
    line-height: 1.25;
}
.card-title.sm { font-size: 15px; }
.card-sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.card-meta { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    padding: 6px 12px;
    border-radius: var(--radius);
    background: var(--primary-hover);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(18, 24, 31, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background var(--t-fast) var(--ease);
}
.card-action:hover { background: var(--primary-deep); }
.card-action svg { width: 14px; height: 14px; }

.info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.info-table th, .info-table td { border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.info-table th { width: 96px; background: var(--primary-soft); color: var(--text-2); font-weight: 600; border-right: 1px solid var(--border); }
.info-table td { background: var(--surface); }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: none; }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: middle; }
.data-table thead th {
    background: var(--primary-soft);
    color: var(--text-2);
    font-weight: 600;
    white-space: nowrap;
    border-bottom-color: var(--border-strong);
}
.data-table tbody tr { transition: background var(--t-fast) var(--ease); }
.data-table tbody tr:nth-child(even) { background: var(--surface-raised); }
.data-table tbody tr:hover { background: var(--primary-soft); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table th:first-child { text-align: center; }
.data-table td:first-child { text-align: center; font-variant-numeric: tabular-nums; }
.table-station { color: var(--primary-hover); }
.table-station:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.table-lines { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.table-note { margin-top: 8px; color: var(--text-3); font-size: 12px; }

.mini-line {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 11.5px;
    color: var(--text-2);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mini-line::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.mini-line:hover { border-color: var(--c); color: var(--text); }

.line-dots { display: inline-flex; align-items: center; gap: 3px; }
.line-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.line-dot-more { font-size: 11px; color: var(--text-3); }

/* --- Detail hero --------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.breadcrumb a { color: var(--text-2); transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--primary-hover); }
.detail-hero { text-align: center; padding: 8px 0 20px; }
.detail-title { font-size: 24px; line-height: 1.3; color: var(--accent); letter-spacing: -0.01em; font-weight: 700; }
.detail-summary { color: var(--text-2); font-size: 13px; margin-top: 8px; }
.detail-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.detail-actions .btn-primary { width: auto; padding: 0 22px; height: 44px; }
.detail-actions .btn-ghost { width: auto; height: 44px; padding: 0 18px; }

/* --- Planner ------------------------------------------------------------- */
.planner-fields { display: flex; flex-direction: column; gap: 10px; }
.planner-field { position: relative; }
.planner-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; font-weight: 600; }
.planner-control {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0 10px;
    background: var(--surface);
    box-shadow: inset 0 1px 2px rgba(16, 42, 67, 0.04);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.planner-control:hover { border-color: var(--border-hover); }
.planner-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.planner-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); }
.planner-dot.dot-start { background: var(--start); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14); }
.planner-dot.dot-end { background: var(--end); box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12); }
.planner-control input { flex: 1; min-width: 0; height: 44px; border: none; outline: none; font-size: 14px; background: transparent; color: var(--text); }
.planner-control input::placeholder { color: var(--placeholder); }
.planner-clear {
    border: none; background: none; color: var(--text-3);
    font-size: 18px; line-height: 1; padding: 4px;
    border-radius: 50%;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.planner-clear:hover { color: var(--text); background: var(--surface-sunken); }
.planner-swap {
    align-self: center;
    width: 36px; height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 16px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.planner-swap:hover { border-color: var(--primary); color: var(--primary); }
.planner-submit { width: 100%; margin-top: 12px; }

.combo-list {
    position: absolute;
    z-index: 20;
    left: 0; right: 0;
    margin-top: 4px;
    max-height: 240px;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px;
    box-shadow: var(--shadow-lg);
}
.combo-list:not(.is-open) { display: none; }
.combo-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    cursor: pointer;
}
.combo-item:hover, .combo-item.is-active { background: var(--primary-soft); }
.combo-name em { font-style: normal; color: var(--primary-hover); font-weight: 600; }
.combo-lines { display: flex; gap: 3px; }
.combo-empty { padding: 12px; text-align: center; color: var(--text-3); font-size: 13px; }

/* --- Stats / buttons ------------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.stat-box {
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    text-align: center;
    min-width: 0;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
a.stat-box:hover { border-color: var(--primary); background: var(--primary-soft); }
.stat-box b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -0.01em; }
.stat-box b.is-text { font-size: 13px; letter-spacing: 0; }
.stat-box span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stat-box b em { font-style: normal; font-size: 12px; color: var(--text-2); }

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    height: 46px; padding: 0 18px;
    border: none; border-radius: var(--radius);
    background: var(--accent-strong); color: var(--accent-fg);
    font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em;
    width: 100%;
    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-primary:hover { background: var(--accent-strong-hover); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0), inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.btn-primary:disabled { background: var(--disabled); box-shadow: none; cursor: not-allowed; }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 16px;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-size: 13.5px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-soft); }
.btn-ghost.full { width: 100%; }

/* --- Chips / grids -------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-soft); }

.inline-search { margin-bottom: 12px; max-width: 320px; }
.inline-search input {
    width: 100%; height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(16, 42, 67, 0.04);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inline-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

.line-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.line-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px 16px;
    border-radius: var(--radius-xl);
    background: var(--c);
    color: var(--c-fg);
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(16, 42, 67, 0.1);
    transition: filter var(--t-fast) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.line-card:hover {
    filter: brightness(1.06) saturate(1.04);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px -6px rgba(16, 42, 67, 0.3);
}
.line-card.is-numbered { justify-content: flex-start; }
.line-card-num {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.line-card-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.line-card-cn { font-size: 17px; font-weight: 700; line-height: 1.2; }
.line-card-en { font-size: 11px; font-weight: 500; opacity: 0.88; line-height: 1.3; }
.line-card:not(.is-numbered) { flex-direction: column; gap: 2px; }

.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 6px; }
.station-card {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    min-width: 0;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.station-card:hover { background: var(--primary-soft); color: var(--primary-hover); }
.station-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.transfer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.transfer-card {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13.5px;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.transfer-card:hover { border-color: var(--primary); background: var(--primary-soft); }
.transfer-card-lines { display: flex; align-items: center; gap: 4px; }
.transfer-card-lines em { font-style: normal; font-size: 11px; color: var(--text-3); }

.nearby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.nearby-item {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nearby-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.nearby-item em { font-style: normal; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- Network map ---------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* The map page gives the whole viewport to the diagram; every control floats
   on top of it instead of living in a card above the fold. */
body.page-city_map { overflow: hidden; }
body.page-city_map .page { max-width: none; padding: 0; }
body.page-city_map .site-footer,
body.page-city_map .side-tools { display: none; }
.map-page { height: 100%; }
.map-stage {
    position: relative;
    height: calc(100vh - 110px);
    height: calc(100dvh - 110px);
    overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, rgba(100, 116, 139, 0.12) 1px, transparent 0) 0 0 / 22px 22px,
        var(--map-bg);
    cursor: grab;
    touch-action: none;
    outline: none;
}
.map-stage.is-panning { cursor: grabbing; }
.map-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--ring); }
/* The diagram is moved and scaled with a single transform: no re-layout on
   every wheel tick, and the browser can hand it to the compositor. */
.map-viewport {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.map-viewport.no-transition { transition: none; }

.map-topbar {
    position: absolute;
    top: 12px; left: 12px;
    right: 62px;
    z-index: 6;
    display: flex;
    gap: 10px;
    pointer-events: none;
}
.map-search { width: min(320px, 100%); pointer-events: auto; }
.map-search-control {
    height: 42px;
    padding: 0 8px 0 11px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
}
.map-search-control input { height: 40px; font-size: 13.5px; }
.map-search-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-3); }
.map-search .combo-list { max-height: 46vh; overflow-y: auto; }

.map-controls {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.map-controls button {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    box-shadow: var(--shadow);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.map-controls button:hover { color: var(--primary); border-color: var(--primary); }
.map-controls button:active { transform: scale(0.94); }

.map-legend {
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    width: 208px;
    max-height: 48%;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.map-legend > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--border);
}
.map-legend > summary::-webkit-details-marker { display: none; }
.map-legend > summary em { font-style: normal; font-weight: 500; color: var(--text-3); }
.map-legend:not([open]) > summary { border-bottom: none; }
.map-legend-list {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
    font-size: 12.5px;
}
.map-legend-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.map-legend-list a:hover { background: var(--primary-soft); color: var(--primary-hover); }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.map-hint {
    position: absolute;
    left: 12px; bottom: 12px;
    z-index: 6;
    margin: 0;
    max-width: calc(100% - 250px);
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.7;
    pointer-events: none;
}
.map-hint span + span::before { content: '·'; margin: 0 6px; color: var(--text-3); }
@media (max-width: 700px) {
    .map-stage { height: calc(100vh - 110px); height: calc(100dvh - 110px); }
    .map-topbar { right: 56px; }
    .map-search { width: 100%; }
    .map-legend { width: 150px; max-height: 34%; }
    .map-hint { display: none; }
    /* Phones are zoomed further in, so type and strokes scale up with them. */
    .network-svg {
        --label-sz: var(--label-sz-sm) !important;
        --line-w: var(--line-w-sm) !important;
        --dot-r: var(--dot-r-sm) !important;
        --dot-r-big: var(--dot-r-big-sm) !important;
        --dot-stroke: var(--dot-stroke-sm) !important;
        --halo-w: var(--halo-w-sm) !important;
    }
}
/* The SVG keeps its natural viewBox size; the wrapper transform does the
   zooming. All sizes below are ratios of the canvas width (set by PHP), so
   every city looks proportionally the same. */
.network-svg { display: block; }
.network-svg .map-line-base {
    fill: none;
    stroke: #fff;
    stroke-width: calc(var(--line-w, 6) * 1.6 * 1px);
    stroke-linejoin: round;
    stroke-linecap: round;
}
.network-svg .map-line {
    fill: none;
    stroke-width: calc(var(--line-w, 6) * 1px);
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke-width 0.12s;
}
.network-svg .map-hit { fill: none; stroke: transparent; stroke-width: calc(var(--hit-w, 16) * 1px); }
.network-svg a:hover .map-line { stroke-width: calc(var(--line-w, 6) * 1.3 * 1px); }
/* White discs ringed by their line colour; interchanges get a dark ring. */
.network-svg .map-dot {
    fill: #fff;
    stroke-width: calc(var(--dot-stroke, 2.2) * 1px);
    r: calc(var(--dot-r, 4.2) * 1px);
    transition: stroke-width 0.12s;
}
.network-svg .map-dot.is-interchange { stroke: #334155; }
.network-svg a:hover .map-dot { stroke: var(--primary); stroke-width: calc(var(--dot-stroke, 2.2) * 1.6 * 1px); }
.network-svg .map-station-label {
    font-size: calc(var(--label-sz, 12.5) * 1px);
    font-weight: 500;
    fill: #1f2937;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: calc(var(--halo-w, 2.4) * 1px);
    stroke-linejoin: round;
}
.network-svg a:hover .map-station-label,
.network-svg a.is-hover .map-station-label { fill: var(--primary); }
.network-svg a.is-hover .map-dot { stroke: var(--primary); }
/* map.js hides the names that would collide with a label placed before them. */
.network-svg a.is-label-hidden .map-station-label { display: none; }
.network-svg a.is-focus .map-dot {
    stroke: var(--primary);
    stroke-width: calc(var(--dot-stroke, 2.2) * 2 * 1px);
    r: calc(var(--dot-r-big, 5.6) * 1.45 * 1px);
}
.network-svg a.is-focus .map-station-label { fill: var(--primary); font-weight: 700; }
/* Line badges follow the printed convention: a big number, a small suffix. */
.network-svg .map-label {
    fill: #fff;
    dominant-baseline: middle;
    letter-spacing: 0.01em;
}
.network-svg .mb-num {
    font-size: calc(var(--badge-num, 13) * 1px);
    font-weight: 700;
    font-family: 'Inter', Arial, sans-serif;
}
.network-svg .mb-tail {
    font-size: calc(var(--badge-tail, 9) * 1px);
    font-weight: 600;
}
.network-svg .map-badge-bg { stroke: rgba(255, 255, 255, 0.9); stroke-width: 0; }
.network-svg a:hover .map-badge-bg { filter: brightness(1.12); }

/* --- Route summary / timeline --------------------------------------------- */
.summary-route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; font-weight: 700; }
.sum-name.start { color: var(--start); }
.sum-name.end { color: var(--end); }
.sum-name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sum-arrow { color: var(--text-3); }
.segmented { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.seg-btn {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.seg-btn:hover { border-color: var(--primary); color: var(--primary-hover); }
.seg-btn.is-active {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 1px 2px rgba(18, 24, 31, 0.3);
}

.route-panel { padding: 18px 18px 10px; }
.route-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.route-badge {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-hover);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.route-panel-meta { margin-left: auto; color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.route-timeline { position: relative; }
.tl-seg { position: relative; }
.tl-seg::before {
    content: '';
    position: absolute;
    left: 62px;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--c, var(--border-strong));
    transform: translateX(-50%);
}
.tl-seg:first-child::before { top: 15px; }
.tl-seg:last-child::before { bottom: 14px; }
.tl-stop {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.tl-time {
    flex: 0 0 46px;
    text-align: right;
    color: var(--text-2);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.tl-marker { flex: 0 0 12px; display: flex; align-items: center; justify-content: center; }
.tl-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--c, var(--text-3));
    box-sizing: border-box;
}
.tl-stop.is-start .tl-dot { width: 14px; height: 14px; border-width: 3.5px; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14); }
.tl-stop.is-end .tl-dot { width: 12px; height: 12px; background: var(--end); border-color: var(--end); box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14); }
.tl-stop.is-transfer .tl-dot { background: var(--transfer); border-color: var(--transfer); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.tl-station {
    color: var(--text);
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--t-fast) var(--ease);
}
.tl-stop.is-start .tl-station,
.tl-stop.is-end .tl-station { font-size: 16px; font-weight: 700; }
.tl-station:hover { color: var(--primary-hover); }
.tl-tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
}
.tl-stop.is-start .tl-tag { border-color: rgba(21, 128, 61, 0.35); color: var(--start); background: rgba(21, 128, 61, 0.06); }
.tl-stop.is-end .tl-tag { border-color: rgba(217, 45, 32, 0.35); color: var(--end); background: rgba(217, 45, 32, 0.05); }
.tl-leg-details { display: block; }
.tl-leg-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    margin: 2px 0 8px 78px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    cursor: pointer;
    list-style: none;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tl-leg-card::-webkit-details-marker { display: none; }
.tl-leg-card:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.tl-leg-card::before {
    content: attr(data-duration);
    position: absolute;
    left: -78px;
    width: 46px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    color: var(--text-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.tl-leg-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.tl-leg-main .line-tag { justify-self: start; }
.tl-leg-dir { color: var(--text-2); font-size: 12.5px; }
.tl-leg-meta { color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tl-leg-chevron {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform var(--t) var(--ease);
    margin-right: 2px;
}
.tl-leg-details[open] .tl-leg-chevron { transform: rotate(-135deg); }
.tl-transfer { margin: -2px 0 6px 78px; font-size: 12px; }
.line-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--c, var(--text-3));
    color: var(--c-fg, #fff);
    font-size: 11.5px; font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.transfer-tag { font-size: 12px; color: var(--accent-strong); font-weight: 600; }

/* --- FAQ ------------------------------------------------------------------ */
.faq-list { display: grid; gap: 8px; }
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item[open] { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.faq-q {
    position: relative;
    padding: 11px 38px 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: color var(--t-fast) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--t) var(--ease);
}
.faq-item[open] .faq-q::after { transform: translateY(-30%) rotate(-135deg); }
.faq-q:hover { color: var(--primary-hover); }
.faq-q:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.faq-a {
    padding: 0 14px 13px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-2);
}
.faq-a a { color: var(--primary-hover); }
.faq-a a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Side tools: share + back to top -------------------------------------- */
.side-tools {
    position: fixed;
    right: 12px;
    /* Sit just outside the 1080px page column on wide screens. */
    right: max(12px, calc((100vw - 1080px) / 2 - 52px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    background: var(--primary-hover);
    box-shadow: var(--shadow-lg);
}
.side-tool {
    width: 44px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.side-tool:first-child { border-radius: var(--radius-xl); }
.side-tools.has-backtop .side-tool:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.side-tool + .side-tool { border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.side-tool:hover { background: rgba(255, 255, 255, 0.16); }
.side-tool:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.side-tool svg { width: 20px; height: 20px; }
.side-tools-tip {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: var(--radius);
    background: rgba(29, 37, 48, 0.94);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}
.share-panel {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    padding: 0 14px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: 50;
}
.share-panel::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: translateY(-50%) rotate(-45deg);
}
.share-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -14px 12px;
    padding: 9px 14px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--primary-hover);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.share-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--t-fast) var(--ease);
}
.share-close:hover { opacity: 1; }
.share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.share-item:hover { background: var(--surface-sunken); }
.share-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.share-icon svg { width: 16px; height: 16px; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: #fff; border-top: 1px solid var(--border); }
.site-footer-inner { max-width: 1080px; margin: 0 auto; padding: 20px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 1.8; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.footer-links a { color: var(--text-2); transition: color var(--t-fast) var(--ease); }
.footer-links a:hover { color: var(--primary-hover); }

/* --- Editorial / static pages -------------------------------------------- */
.article { font-size: 14.5px; color: var(--text); line-height: 1.85; }
.article p { margin: 10px 0; }
.article h2 { font-size: 17px; margin: 24px 0 8px; padding-left: 10px; border-left: 3px solid var(--primary); line-height: 1.3; }
.article ul { margin: 8px 0 8px 22px; }
.article li { margin: 5px 0; }
.article a { color: var(--primary-hover); text-decoration: underline; text-decoration-color: rgba(31, 41, 51, 0.35); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article a:hover { text-decoration-color: currentColor; }
.contact-list { list-style: none; margin-left: 0 !important; }
.contact-list li { padding: 6px 0; }

/* --- Community board ------------------------------------------------------ */
.post-list { display: grid; gap: 0; }
.post-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background var(--t-fast) var(--ease);
}
.post-item:last-child { border-bottom: none; }
.post-item:hover { background: var(--surface-raised); }
.post-item:hover .post-title { color: var(--primary-hover); }
.post-title { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.45; transition: color var(--t-fast) var(--ease); }
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.post-detail-title { font-size: 22px; line-height: 1.35; margin-bottom: 8px; }
.post-body, .reply-body { margin-top: 10px; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.community-img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border); }

.reply-list { display: grid; gap: 10px; margin-bottom: 16px; }
.reply-item {
    padding: 12px 14px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}
.reply-item:last-child { border-bottom: none; }
.reply-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.reply-floor {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-hover);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.reply-author { font-weight: 600; color: var(--text); }
.reply-time { margin-left: auto; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

.community-form { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field-input, .field-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 14.5px;
    color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 1px 2px rgba(16, 42, 67, 0.04);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field-input:hover, .field-textarea:hover { border-color: var(--border-hover); }
.field-input:focus, .field-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}
.field-textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.community-form .btn-primary { width: auto; align-self: flex-start; padding: 0 26px; }
.image-insert { margin-top: 8px; }
.image-insert-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.image-insert-toggle:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-soft); }
.image-insert-toggle svg { width: 15px; height: 15px; }
.image-insert-panel {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
}
.image-insert-panel .field-input { flex: 1; min-width: 0; height: 38px; }
.image-insert-confirm { width: auto; height: 38px; padding: 0 16px; flex: 0 0 auto; }
.field-hint { margin-top: 6px; color: var(--danger); font-size: 12.5px; }
.form-error {
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13.5px;
}

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.pager-link { color: var(--primary-hover); font-size: 14px; }
.pager-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pager-info { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }

.auth-card { max-width: 460px; margin: 0 auto; }
.auth-switch { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--text-2); }
.auth-switch a { color: var(--primary-hover); }
.auth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- City picker sheet ------------------------------------------------------ */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.sheet {
    width: 100%; max-width: 560px; max-height: 82vh;
    background: var(--surface);
    border-radius: var(--radius-xl);
    display: flex; flex-direction: column;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 28px 64px -24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sheet-head h3 { font-size: 16px; }
.sheet-close {
    border: none; background: none; font-size: 24px; color: var(--text-3); line-height: 1;
    width: 30px; height: 30px; border-radius: 50%;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.sheet-close:hover { color: var(--text); background: var(--surface-sunken); }
.sheet-search { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.sheet-search input {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(16, 42, 67, 0.04);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sheet-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.sheet-body { padding: 12px 18px 18px; overflow: auto; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.city-link {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 13.5px;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.city-link:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-soft); }
.city-link.is-current { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-hover); font-weight: 600; }

/* --- Empty states ------------------------------------------------------------ */
.empty-state { padding: 32px 16px; text-align: center; color: var(--text-3); font-size: 14px; }
.empty-state b { display: block; font-size: 18px; margin-bottom: 6px; color: var(--text-2); }

/* --- Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
    .city-layout { grid-template-columns: 1fr; }
    .city-sidebar { position: static; }
    .home-layout { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .side-tools { display: none; }
}

@media (max-width: 560px) {
    .home-search-row { flex-direction: column; }
    .home-search-btn { width: 100%; }
    .site-brand-text small { display: none; }
    .line-grid { grid-template-columns: 1fr 1fr; }
    .line-card { min-height: 56px; padding: 6px 10px; gap: 8px; }
    .line-card-num { font-size: 30px; }
    .line-card-cn { font-size: 15px; }
    .line-card-en { font-size: 10px; }
    .station-grid { grid-template-columns: 1fr 1fr; }
    .transfer-grid, .nearby-grid { grid-template-columns: 1fr; }
    .tl-leg-card, .tl-transfer { margin-left: 68px; }
    .image-insert-panel { flex-wrap: wrap; }
    .image-insert-panel .field-input { flex: 1 1 100%; }
    .image-insert-confirm { width: 100%; }

    /* Detail page actions: equal-width, equal-height buttons. */
    .detail-actions .btn-primary,
    .detail-actions .btn-ghost { flex: 1 1 0; padding: 0 10px; }

    /* Info tables collapse to a clean label/value list on small screens. */
    .info-table { border: none; border-radius: 0; overflow: visible; }
    .info-table tbody { display: block; }
    .info-table tr {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 14px;
        row-gap: 5px;
        padding: 9px 2px;
        border-bottom: 1px solid var(--border);
    }
    .info-table tr:last-child { border-bottom: none; }
    .info-table th, .info-table td { display: block; border: none !important; background: none; padding: 0; width: auto; }
    .info-table th { color: var(--text-2); font-weight: 500; }
    .info-table td { overflow-wrap: anywhere; }

    /* Data tables (station list etc.) become stacked cards with labels. */
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
    .data-table { border: none; min-width: 0; }
    .data-table tr {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 9px 12px;
        margin-bottom: 8px;
        box-shadow: var(--shadow-xs);
    }
    .data-table tbody tr:nth-child(even) { background: var(--surface); }
    .data-table tbody tr:hover { background: var(--surface); }
    .data-table td { border: none; padding: 3px 0; text-align: left; white-space: normal; }
    .data-table td.num, .data-table td:first-child { text-align: left; white-space: normal; }
    .data-table td.col-index { display: none; }
    .data-table td[data-label]:not(.no-label)::before {
        content: attr(data-label) '：';
        margin-right: 4px;
        color: var(--text-3);
        font-size: 12px;
    }
}

/* --- Accessibility: honour reduced-motion preference ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}