/* Bus sun side — "Which side to sit on" (F553 S4). Page /{lang}/bus-routes-map.
   V8 tokens (--n8-*) with the busmap palette as fallback; themes by
   :root[data-theme] exactly like the page. Mobile 360 px first. */
.bss{
  --bss-ink:var(--n8-ink,#1A2530); --bss-mut:var(--n8-mut,#5D6B77);
  --bss-surf:var(--n8-surface,#FFFFFF); --bss-surf2:var(--n8-surface-2,#EDF1F4);
  --bss-line:var(--n8-line,#D3DCE2); --bss-pri:var(--n8-primary,#0e2879); --bss-pri-fg:var(--n8-primary-fg,#fff);
  --bss-body:#F4F6F9; --bss-body-st:#9AA8B6; --bss-aisle:#E3E9EE; --bss-glass:#BFD6EA;
  --bss-shade:#0e2879; --bss-sun:#E8890C;
  --bss-left:#0E9F9A; --bss-right:#7C4DDB; --bss-ahead:#B59B6A; --bss-behind:#8D99A6; --bss-night:#2B3442;
  color:var(--bss-ink);
}
:root[data-theme="dark"] .bss{
  --bss-body:#1A2430; --bss-body-st:#4A5A6C; --bss-aisle:#121A22; --bss-glass:#2E4A66;
  --bss-shade:#6BA5FB; --bss-sun:#FFB020;
  --bss-left:#2CC7C0; --bss-right:#A687F2; --bss-ahead:#CDB689; --bss-behind:#9AA6B3; --bss-night:#5A6577;
}
.bss h2{margin-bottom:.35rem}
.bss .bss-form{display:grid; grid-template-columns:1fr; gap:10px; margin:12px 0 14px;
  padding:12px; border:1px solid var(--bss-line); border-radius:var(--n8-r-sm,12px); background:var(--bss-surf)}
.bss .bss-form label{display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--bss-mut); min-width:0}
.bss .bss-form select,.bss .bss-form input{width:100%; min-width:0; font:inherit; font-size:15px; color:var(--bss-ink);
  background:var(--bss-surf2); border:1px solid var(--bss-line); border-radius:10px; padding:8px 10px; min-height:42px}
.bss .bss-form button{min-height:44px; border:0; border-radius:10px; font-weight:600; font-size:15px;
  background:var(--bss-pri); color:var(--bss-pri-fg); padding:0 18px; cursor:pointer; align-self:end}
@media (min-width:760px){
  .bss .bss-form{grid-template-columns:minmax(0,2.2fr) minmax(0,1.6fr) minmax(0,1fr) auto; align-items:end}
}
.bss .bss-msg{padding:14px; color:var(--bss-mut)}
.bss .bss-err{color:var(--n8-bad-t,#b00720)}
.bss .bss-card{border:1px solid var(--bss-line); border-radius:var(--n8-r,16px); background:var(--bss-surf); padding:12px; overflow:hidden}
.bss .bss-rt{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin-bottom:10px}
.bss .bss-rt span{color:var(--bss-mut); font-size:13px}
.bss .bss-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){ .bss .bss-grid{grid-template-columns:minmax(300px,380px) minmax(0,1fr)} }
.bss .bss-infocol{min-width:0; order:-1}
@media (min-width:900px){ .bss .bss-infocol{order:0} }
.bss .bss-big{font-size:clamp(19px,4.8vw,24px); font-weight:700; line-height:1.25; margin:0 0 6px}
.bss .bss-mid{font-size:16px; font-weight:600; margin:0 0 6px}
.bss .bss-night{color:var(--bss-mut)}
.bss .bss-pct{font-weight:500; font-size:.72em; color:var(--bss-mut); white-space:nowrap}
.bss .bss-ico{display:inline-block; width:22px; height:22px; border-radius:50%; vertical-align:-4px; margin-inline-end:8px}
.bss .bss-ico-shade{background:var(--bss-shade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 16 16'%3E%3Cpath d='M-4.6 .6A4.6 4.6 0 0 1 4.6 .6Z' fill='%23fff'/%3E%3Cpath d='M0 .6V4a1 1 0 0 1-2 0' stroke='%23fff' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") center/100% no-repeat}
.bss .bss-ico-sun{background:var(--bss-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 16 16'%3E%3Ccircle r='2.4' fill='%23fff'/%3E%3Cpath d='M3.6 0H5.4M-3.6 0H-5.4M0 3.6V5.4M0 -3.6V-5.4M2.5 2.5L3.8 3.8M-2.5 -2.5L-3.8 -3.8M2.5 -2.5L3.8 -3.8M-2.5 2.5L-3.8 3.8' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center/100% no-repeat}
.bss .bss-reason{color:var(--bss-mut); font-size:14px; margin:4px 0 8px}
.bss .bss-conf{display:inline-block; font-size:12px; font-weight:600; padding:1px 8px; border-radius:999px; background:var(--bss-surf2); color:var(--bss-ink); border:1px solid var(--bss-line)}
.bss .bss-best{list-style:none; padding:0; margin:0 0 8px; font-size:14px}
.bss .bss-best li{margin:3px 0}
.bss .bss-badge{display:inline-block; width:16px; height:16px; border-radius:50%; vertical-align:-3px; margin-inline-end:6px}
.bss .bss-badge-shade{background:var(--bss-shade)} .bss .bss-badge-sun{background:var(--bss-sun)}
.bss .bss-badge-shade{box-shadow:0 0 0 2px var(--bss-surf),0 0 0 3.5px var(--bss-shade)}
.bss .bss-trip{font-size:13px; color:var(--bss-mut); margin:0 0 10px}
.bss .bss-note{font-size:13px; color:var(--bss-mut); margin:10px 0 0}

/* seat map */
.bss .bss-mapwrap{position:relative; max-width:380px; margin:0 auto}
.bss .bss-svg{display:block; width:100%; height:auto; font-family:var(--n8-sans,system-ui,sans-serif); user-select:none}
.bss .bss-body{fill:var(--bss-body); stroke:var(--bss-body-st); stroke-width:2}
.bss .bss-glass{fill:var(--bss-glass)}
.bss .bss-aisle{fill:var(--bss-aisle)}
.bss .bss-drv{fill:var(--bss-aisle); stroke:var(--bss-body-st)}
.bss .bss-wheel{fill:none; stroke:var(--bss-mut); stroke-width:2.5}
.bss .bss-door{fill:var(--bss-pri)}
.bss .bss-rear{fill:var(--bss-body-st)}
.bss .bss-lbl{fill:var(--bss-mut); font-size:10px; font-weight:600; letter-spacing:.04em}
.bss .bss-lbl-s{font-size:9px; font-weight:500; letter-spacing:0}
.bss .bss-rown{fill:var(--bss-mut); font-size:9px}
.bss .bss-seat{cursor:pointer; outline:none}
.bss .bss-cush{stroke:rgba(16,30,42,.28); stroke-width:1}
.bss .bss-back{fill:rgba(16,30,42,.22)}
.bss .bss-sid{font-size:9.5px; font-weight:700}
.bss .bss-sexp{font-size:8.5px; font-weight:500}
.bss .bss-seat.is-shade .bss-cush{stroke:var(--bss-shade); stroke-width:3}
.bss .bss-seat.is-sun .bss-cush{stroke:var(--bss-sun); stroke-width:3}
.bss .bss-seat:hover .bss-cush,.bss .bss-seat.on .bss-cush,.bss .bss-seat:focus-visible .bss-cush{stroke:var(--bss-ink); stroke-width:3}
.bss .bss-b-shade>circle:first-child{fill:var(--bss-shade); stroke:var(--bss-surf); stroke-width:1.5}
.bss .bss-b-sun>circle:first-child{fill:var(--bss-sun); stroke:var(--bss-surf); stroke-width:1.5}
.bss .bss-b-ink{fill:#fff}
.bss .bss-b-ray{stroke:#fff; stroke-width:1.2; fill:none; stroke-linecap:round}
.bss .bss-zb{fill:none; stroke:var(--bss-body-st); stroke-width:1.5}
.bss .bss-zp rect{stroke:rgba(16,30,42,.25)}
.bss .bss-zp text{font-size:10px; font-weight:700}
.bss .bss-zl{fill:var(--bss-mut); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.bss .bss-tip{position:absolute; transform:translateX(-50%); z-index:5; pointer-events:none; white-space:nowrap;
  background:var(--bss-ink); color:var(--bss-surf); font-size:12px; font-weight:600; padding:5px 9px; border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.bss .bss-legend{max-width:380px; margin:8px auto 0; font-size:12px; color:var(--bss-mut)}
.bss .bss-lg-bar{display:flex; align-items:center; gap:6px}
.bss .bss-lg-grad{flex:1; display:flex; height:10px; border-radius:5px; overflow:hidden; border:1px solid var(--bss-line)}
.bss .bss-lg-grad i{flex:1}
[dir="rtl"] .bss .bss-lg-bar{direction:ltr}
.bss .bss-lg-b{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px}

/* timeline */
.bss .bss-tl{margin-top:8px}
.bss .bss-tl h3{font-size:15px; font-weight:700; margin:0 0 6px}
.bss .bss-tl-bar{display:flex; height:22px; border-radius:6px; overflow:hidden; border:1px solid var(--bss-line); background:var(--bss-surf2)}
.bss .bss-tl-bar .bss-tc{flex:1 1 0; min-width:0; height:100%; border-radius:0}
.bss .bss-tl-ticks{position:relative; height:18px; font-size:11px; color:var(--bss-mut)}
.bss .bss-tk{position:absolute; top:2px; transform:translateX(-50%); white-space:nowrap}
[dir="rtl"] .bss .bss-tk{transform:translateX(50%)}
.bss .bss-tl-lg{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; margin-top:4px}
.bss .bss-tl-lg .bss-tc{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-inline-end:5px}
.bss .bss-s-left{background:var(--bss-left)} .bss .bss-s-right{background:var(--bss-right)}
.bss .bss-s-ahead{background:var(--bss-ahead)} .bss .bss-s-behind{background:var(--bss-behind)}
.bss .bss-s-night{background:var(--bss-night) repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.14) 3px 5px)}

/* entry buttons (route index rows + the map's route panel) */
.bss-entry{display:inline-flex; align-items:center; gap:4px; margin-inline-start:8px; padding:2px 9px; min-height:26px;
  font:inherit; font-size:12px; font-weight:600; border-radius:999px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--n8-line,#D3DCE2); background:var(--n8-surface-2,#F7F3EB); color:var(--n8-ink,#1A2530)}
.bss-entry:hover{border-color:#E8890C}
.bss-entry span{color:#E8890C}
.bss-entry-map{margin:4px 0 8px; min-height:32px; font-size:13px; border-color:var(--border); background:var(--chipbg); color:var(--ink)}

/* ---- result chrome ---- */
.bss{scroll-margin-top:72px}
.bss .bss-rt{position:relative; padding-inline-end:40px}
.bss .bss-close{position:absolute; top:-4px; inset-inline-end:-4px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--bss-line); background:var(--bss-surf2); color:var(--bss-ink); font-size:15px; line-height:1; cursor:pointer}
.bss .bss-close:hover{border-color:var(--bss-ink)}
.bss .bss-hint{margin:-4px 0 12px; font-size:13.5px; color:var(--bss-mut)}
.bss .bss-hint a{font-weight:600}
.bss .bss-tl-bar .bss-tc.cur{outline:2px solid var(--bss-ink); outline-offset:-2px; position:relative; z-index:1}
.bss .bss-tl-bar{cursor:pointer; touch-action:none}

/* scrub slider + readout */
.bss .bss-scrub{width:100%; margin:12px 0 2px; accent-color:var(--bss-pri)}
.bss .bss-readout{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-height:22px; margin:0 0 8px; font-size:13.5px; font-weight:600}
.bss .bss-readout .bss-tc{display:inline-block; width:12px; height:12px; border-radius:3px}
.bss .bss-readout span{font-weight:400; color:var(--bss-mut)}

/* mini map in the panel */
.bss .bss-mini{border:1px solid var(--bss-line); border-radius:12px; overflow:hidden; background:var(--bss-surf2)}
.bss .bss-mini svg{display:block; width:100%; height:auto; aspect-ratio:1/0.62}
.bss .bss-mini .bss-sea{fill:var(--sea,#DCE8F2)}
:root[data-theme="dark"] .bss .bss-mini .bss-sea{fill:var(--sea,#0F1922)}
.bss .bss-mini .GRID path{stroke:var(--grid,#C9D6E0); stroke-width:.6; fill:none; vector-effect:non-scaling-stroke; opacity:.6}
.bss .bss-mini .LAND path{fill:var(--land,#F4F1EA); stroke:none}
:root[data-theme="dark"] .bss .bss-mini .LAND path{fill:var(--land,#1E2A35)}
.bss .bss-mini .BORDERS path{fill:none; stroke:var(--bord,#9AA8B6); stroke-width:.9; vector-effect:non-scaling-stroke}
.bss .bss-showmap{display:inline-flex; align-items:center; gap:6px; margin-top:8px; min-height:40px; padding:0 14px; border-radius:10px;
  border:1px solid var(--bss-line); background:var(--bss-surf); color:var(--bss-ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer}
.bss .bss-showmap:hover{border-color:var(--bss-pri)}

/* sun-side colours of the line (main map + mini map share the classes) */
.bss-st-left{stroke:var(--bss-left,#0E9F9A)} .bss-st-right{stroke:var(--bss-right,#7C4DDB)}
.bss-st-ahead{stroke:var(--bss-ahead,#B59B6A)} .bss-st-behind{stroke:var(--bss-behind,#8D99A6)}
.bss-st-night{stroke:var(--bss-night,#2B3442); stroke-dasharray:5 4}
#map .bssl{--bss-left:#0E9F9A; --bss-right:#7C4DDB; --bss-ahead:#B59B6A; --bss-behind:#8D99A6; --bss-night:#2B3442}
:root[data-theme="dark"] #map .bssl{--bss-left:#2CC7C0; --bss-right:#A687F2; --bss-ahead:#CDB689; --bss-behind:#9AA6B3; --bss-night:#8893A3}
:root[data-theme="dark"] .bss .bss-mini .bss-st-night{stroke:#8893A3}

/* layer parts */
.bssl-halo{fill:none; stroke:#fff; stroke-opacity:.9; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
:root[data-theme="dark"] .bssl-halo{stroke:#0B1218}
.bssl-seg{fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.bssl-tdot{fill:#fff; stroke:#1A2530; stroke-width:1.2}
.bssl-tlbl{font:600 10px/1 var(--n8-sans,system-ui,sans-serif); fill:#1A2530; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round}
:root[data-theme="dark"] .bssl-tlbl{fill:#E8EDF3; stroke:#0B1218}
.bssl-end{font-size:11.5px; font-weight:700}
.bssl-start{fill:#fff; stroke:#1A2530; stroke-width:2.5}
.bssl-fin{fill:#1A2530; stroke:#fff; stroke-width:2}
.bssl-fin2{fill:#fff}
.bssl-veh rect{fill:#E8890C; stroke:#fff; stroke-width:1.6}
.bssl-veh .bssl-wind{fill:#1A2530; stroke:none}
.bssl-ray{stroke:#FFB020; stroke-width:2; stroke-dasharray:3 2.5; stroke-linecap:round}
.bssl-sunc{fill:#FFC531; stroke:#C77700; stroke-width:1.2}
.bssl-cap{font:700 10.5px/1 var(--n8-sans,system-ui,sans-serif); fill:#1A2530; paint-order:stroke; stroke:#fff; stroke-width:3.2px; stroke-linejoin:round}
:root[data-theme="dark"] .bssl-cap{fill:#E8EDF3; stroke:#0B1218}
.bss .bss-mini .bssl-cap{display:none}   /* the readout above carries it */

/* ==== standalone page /{lang}/bus-sun-side (pages/bus_sun_side.php) ==== */
.bss-page{color:var(--n8-ink,#1A2530)}
.bss-page .bsp-hide{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.bss-page .bsp-hero{display:flex; align-items:center; gap:14px; margin:6px 0 14px}
.bss-page .bsp-hero__art{flex:0 0 auto; width:64px; height:80px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; border:1px solid var(--n8-line,#D3DCE2); background:var(--n8-surface,#fff)}
.bss-page .bsp-hero__art .bsc-bus{width:56px; height:72px}
.bss-page .bsp-hero__txt{min-width:0}
.bss-page .bsp-hero h1{margin:0 0 4px; line-height:1.2}
.bss-page .bsp-hero__lead{margin:0; color:var(--n8-mut,#5D6B77); font-size:15px}
.bss-page .bsp-err{padding:10px 12px; border-radius:10px; background:#FDECEC; color:#8A1020; font-weight:600}
:root[data-theme="dark"] .bss-page .bsp-err{background:#3A1A1F; color:#FFB4BE}
.bss-page section{margin:0 0 18px}
.bss-page h2.h5{margin:0 0 8px; font-weight:700}
/* server-rendered answer */
.bss-page .bsp-ans{border:1px solid var(--n8-line,#D3DCE2); border-radius:16px; padding:14px; background:
  linear-gradient(100deg,rgba(14,159,154,.10),rgba(255,255,255,0) 55%,rgba(245,158,11,.12)); background-color:var(--n8-surface,#fff)}
.bss-page .bsp-ans__meta{font-size:14px; font-weight:600; color:var(--n8-mut,#5D6B77); margin:0 0 6px}
.bss-page .bsp-ans__big{font-size:clamp(20px,5vw,26px); font-weight:800; line-height:1.2; margin:0 0 4px}
.bss-page .bsp-ans__pct{font-size:.6em; font-weight:500; color:var(--n8-mut,#5D6B77); white-space:nowrap}
.bss-page .bsp-ans__zone{display:inline-block; margin:2px 0 6px; padding:4px 12px; border-radius:999px; font-weight:700; font-size:15px;
  background:rgba(14,159,154,.14); color:#0A6E6A; border:1px solid rgba(14,159,154,.45)}
:root[data-theme="dark"] .bss-page .bsp-ans__zone{color:#7FE3DD}
.bss-page .bsp-ans__sun{font-size:15px; font-weight:600; margin:0 0 4px}
.bss-page .bsp-ans__why,.bss-page .bsp-ans__trip,.bss-page .bsp-ans__note{font-size:14px; color:var(--n8-mut,#5D6B77); margin:4px 0}
.bss-page .bsp-ans__best{list-style:none; padding:0; margin:6px 0; font-size:15px}
.bss-page .bsp-zt{border-collapse:collapse; margin:8px 0; font-size:14px; min-width:220px}
.bss-page .bsp-zt caption{caption-side:top; text-align:start; font-size:13px; color:var(--n8-mut,#5D6B77); padding:0 0 4px}
.bss-page .bsp-zt th,.bss-page .bsp-zt td{padding:6px 12px; border:1px solid var(--n8-line,#D3DCE2); text-align:center}
.bss-page .bsp-zt th[scope="row"]{text-align:start; font-weight:600}
.bss-page .bsp-zt td.is-best{background:rgba(14,159,154,.18); font-weight:800}
/* interactive result on the page */
.bss-page .bss .bss-form{margin-top:6px}
@media (min-width:760px){ .bss-page .bss .bss-form{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) auto} }
.bss-page .bss .bss-close{display:none}
.bss-page .bss .bss-rt{padding-inline-end:0}
.bss .bss-lmap{height:300px; border:1px solid var(--bss-line); border-radius:12px; overflow:hidden; z-index:0}
@media (min-width:900px){ .bss .bss-lmap{height:380px} }
.bss .bss-licon{background:none; border:0}
.bss .bss-licon .bssl-cap{display:none}
.bss .bss-ltip{font-weight:700; font-size:12px; padding:2px 6px}
.bss a.bss-showmap{text-decoration:none}
/* search */
.bss-page .bsp-search{position:relative; max-width:640px}
.bss-page .bsp-search input{width:100%; min-height:48px; font-size:16px; padding:10px 14px; border-radius:12px; box-sizing:border-box;
  border:1.5px solid var(--n8-line,#D3DCE2); background:var(--n8-surface,#fff); color:inherit}
.bss-page .bsp-search input:focus{outline:3px solid rgba(14,159,154,.45); border-color:#0E9F9A}
.bss-page .bsp-res{list-style:none; margin:6px 0 0; padding:4px; border:1px solid var(--n8-line,#D3DCE2); border-radius:12px; background:var(--n8-surface,#fff);
  max-height:360px; overflow:auto; box-shadow:0 8px 24px rgba(16,30,42,.12)}
.bss-page .bsp-res a{display:block; padding:10px; min-height:44px; box-sizing:border-box; border-radius:8px; text-decoration:none; color:inherit; font-size:15px}
.bss-page .bsp-res a:hover,.bss-page .bsp-res a:focus{background:rgba(14,159,154,.10)}
.bss-page .bsp-res small{display:block; color:var(--n8-mut,#5D6B77); font-size:13px}
.bss-page .bsp-none{color:var(--n8-mut,#5D6B77); margin:6px 0 0}
/* route cards */
.bss-page .bsp-grid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:700px){ .bss-page .bsp-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .bss-page .bsp-grid{grid-template-columns:1fr 1fr 1fr} }
.bss-page .bsp-rc{display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--n8-line,#D3DCE2); border-radius:14px; background:var(--n8-surface,#fff); min-width:0}
.bss-page .bsp-rc.bsp-more{display:none}
.bss-page .bsp-rc__a{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit; min-width:0}
.bss-page .bsp-rc__num{font-size:13px; font-weight:700; color:var(--n8-mut,#5D6B77)}
.bss-page .bsp-rc__name{font-size:16px; font-weight:700; overflow-wrap:anywhere}
.bss-page .bsp-rc__meta{font-size:13.5px; color:var(--n8-mut,#5D6B77); overflow-wrap:anywhere}
.bss-page .bsp-rc .nkd-bsc--pill{align-self:flex-start; max-width:100%}
.bss-page .bsp-showall{margin-top:10px; min-height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--n8-line,#D3DCE2);
  background:var(--n8-surface,#fff); color:inherit; font:inherit; font-weight:600; cursor:pointer}
/* links + faq */
.bss-page .bsp-links ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.bss-page .bsp-links a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--n8-line,#D3DCE2);
  text-decoration:none; font-weight:600; font-size:14px; color:inherit; background:var(--n8-surface,#fff)}
.bss-page .bsp-faq details{border-bottom:1px solid var(--n8-line,#D3DCE2); padding:10px 0}
.bss-page .bsp-faq summary{cursor:pointer; font-weight:700; font-size:15.5px; min-height:28px}
.bss-page .bsp-faq p{margin:8px 0 0; font-size:15px; line-height:1.5}

/* ---------- loading (js/bus_sun_side.js run): progress bar, skeleton, busy button, retry ---------- */
.bss-prog{position:relative; height:4px; margin:0 0 8px; border-radius:2px; overflow:hidden; background:var(--n8-surface-2,#EDF1F4)}
.bss-prog i{position:absolute; inset-block:0; inset-inline-start:0; width:0; border-radius:2px; background:var(--n8-primary,#0e2879)}
.bss-prog.is-run i{width:35%; animation:bssProg 1.2s ease-in-out infinite}
.bss-prog.is-done i{width:100%; animation:none; transition:width .3s ease}
@keyframes bssProg{0%{inset-inline-start:-35%}100%{inset-inline-start:100%}}
.bss .bss-skel{position:relative}
.bss .bss-skel::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:250% 100%; animation:bssShim 1.4s linear infinite}
:root[data-theme="dark"] .bss .bss-skel::after{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%)}
@keyframes bssShim{0%{background-position:150% 0}100%{background-position:-100% 0}}
.bss .bss-skel .bss-cush,.bss .bss-skel .bss-zp rect{fill:var(--bss-aisle)!important}
.bss .bss-skel .bss-sid,.bss .bss-skel .bss-sexp{display:none}
.bss .bss-skel .bss-zp text{fill:var(--bss-mut)!important}
.bss .bss-skel .bss-lg-grad i{background:var(--bss-aisle)!important}
.bss .bss-sk-l{display:block; height:14px; margin:0 0 10px; border-radius:7px; background:var(--bss-aisle); max-width:100%}
.bss .bss-sk-t{height:16px; margin:2px 0}
.bss .bss-sk-big{height:26px}
.bss .bss-sk-scrub{height:24px}
.bss .bss-sk-lg{height:40px; margin-top:24px}
.bss .bss-sk-bar{background:var(--bss-aisle); cursor:default}
.bss .bss-sk-box{background:var(--bss-aisle)}
.bss .bss-sk-msg{padding:4px 2px 10px}
.bss .bss-retry{margin-inline-start:8px; min-height:40px; padding:0 14px; border:1px solid currentColor; border-radius:10px; background:transparent; color:inherit; font-weight:600; cursor:pointer}
.bss-spin{display:inline-block; width:1em; height:1em; margin-inline-end:.45em; vertical-align:-.15em; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:bssSpin .8s linear infinite}
@keyframes bssSpin{to{transform:rotate(360deg)}}
.is-busy{opacity:.85; cursor:progress!important}
@media (prefers-reduced-motion:reduce){
  .bss-prog.is-run i{animation:none; width:60%; inset-inline-start:0}
  .bss .bss-skel::after{animation:none; display:none}
  .bss-spin{animation:none; border-inline-end-color:currentColor; opacity:.6}
}

/* ---------- city-pair route picker ---------- */
.bss-page .bsp-pick{margin:4px 0 14px}
.bss-page .bsp-pick h2{margin:0 0 6px; color:var(--n8-mut,#5D6B77)}
.bss-page .bsp-pick ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.bss-page .bsp-pick a{display:inline-flex; flex-direction:column; min-height:44px; justify-content:center; padding:6px 12px; border:1px solid var(--n8-line,#D3DCE2);
  border-radius:12px; background:var(--n8-surface,#fff); color:var(--n8-ink,#1A2530); text-decoration:none; max-width:100%}
.bss-page .bsp-pick a small{color:var(--n8-mut,#5D6B77); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70vw}
.bss-page .bsp-pick a.is-cur{border-color:var(--n8-primary,#0e2879); box-shadow:inset 0 0 0 1px var(--n8-primary,#0e2879)}

/* ---------- Developer API promo ---------- */
.bss-page .bsp-promo{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; margin:16px 0; padding:14px;
  border:1px dashed var(--n8-line,#D3DCE2); border-radius:var(--n8-r,16px); background:var(--n8-surface-2,#EDF1F4)}
.bss-page .bsp-promo__ico{grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:var(--n8-primary,#0e2879); color:var(--n8-primary-fg,#fff); font:700 15px/1 ui-monospace,Menlo,monospace}
.bss-page .bsp-promo__t{margin:0; font-size:15px}
.bss-page .bsp-promo__btn{justify-self:start; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:10px;
  background:var(--n8-primary,#0e2879); color:var(--n8-primary-fg,#fff); font-weight:600; text-decoration:none; max-width:100%}
.bss-page .bsp-promo--compact{padding:10px 12px; margin:12px 0}
.bss-page .bsp-promo--compact .bsp-promo__t{font-size:14px}
.bss-page .bsp-promo--compact .bsp-promo__btn{min-height:40px; font-size:14px}

/* F553 weather: forecast line, clear-sky hint, hot tip; strip icons + hatched overcast/rain cells */
.bss .bss-wxl{display:flex; gap:6px; align-items:flex-start; font-size:14px; margin:2px 0 6px; overflow-wrap:anywhere}
.bss .bss-wxl .bss-wxi{flex:0 0 auto; margin-top:2px}
.bss .bss-wxl-na,.bss .bss-wxl-clear{color:var(--bss-mut); font-size:13px}
.bss .bss-wxl-hot{color:#b4441c; font-weight:600; font-size:13.5px}
.bss .bss-tl-wx{position:relative; height:28px; overflow:hidden}
.bss .bss-wx{position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; line-height:1}
[dir="rtl"] .bss .bss-wx{transform:translateX(50%)}
.bss .bss-wx .bss-wxi{width:12px; height:12px}
.bss .bss-wx b{font-size:10.5px; font-weight:600; color:var(--bss-mut); margin-top:1px}
.bss .bss-tl-bar .bss-tc.bss-wx-dim{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.65) 0 2px,transparent 2px 6px)}
.bss-page .bsp-ans__wx{font-size:14px; margin:4px 0; overflow-wrap:anywhere}
.bss-page .bsp-ans__wx--clear{color:var(--n8-mut,#5D6B77); font-size:13px}
.bss-page .bsp-ans__wx--hot{color:#b4441c; font-weight:600}