/* Two typographic timetable studies over the preserved amber letterboard. */
.board-styles { display:flex; gap:20px; margin-bottom:8px; }
.board-styles a { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:4px; }
.board-styles [aria-current] { font-weight:700; text-decoration:none; }

:root:is([data-board-style="swiss"],[data-board-style="bauhaus"]) {
  color-scheme:light;
  --board:#f6f6f3; --slat:#f6f6f3; --slat2:#f6f6f3;
  --ink:#151515; --muted:#595959; --line:#cdcdca;
  --amber:var(--ink); --red:var(--ink);
  --board-accent:var(--ink); --hover:#eaeae7;
  --numbers:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--board);
}

/* Timetable typography is scoped to the two minimal styles. */
html:is([data-board-style="swiss"],[data-board-style="bauhaus"]) {
  scroll-padding-top:148px;

  body { background:var(--board); }
  .hall { max-width:1120px; padding:40px 40px 64px; }
  .masthead { padding:0 0 28px; gap:24px; align-items:flex-end; }
  .brand-wrap { gap:18px; }
  .avatar { width:56px; height:56px; box-shadow:none; }
  .identity { font-size:12px; font-weight:500; letter-spacing:.08em; }
  h1 { margin:4px 0 0; font-size:48px; line-height:1; font-weight:700; letter-spacing:-.055em; text-transform:none; color:var(--ink); }
  .clock-wrap { align-items:flex-end; flex-direction:column; gap:5px; padding-bottom:2px; }
  .clock { font:500 22px/1 var(--numbers); letter-spacing:-.04em; text-shadow:none; color:var(--ink); }
  .live { font-size:9px; font-weight:500; letter-spacing:.12em; color:var(--muted); }
  .live::before { display:none; }
  .finder { gap:16px 24px; padding:16px 0; border-top:2px solid var(--board-accent); border-bottom:1px solid var(--line); }
  .search-field { flex-basis:260px; border:0; border-bottom:1px solid var(--muted); border-radius:0; padding:0; background:none; }
  .search-field:focus-within { border-color:var(--board-accent); box-shadow:0 1px 0 var(--board-accent); }
  .search-field input { min-height:44px; padding:10px 0; font-size:16px; font-weight:400; letter-spacing:0; }
  .search-field input::placeholder { color:var(--muted); }
  .search-field button { width:44px; height:44px; color:var(--ink); }
  .select-field { gap:8px; color:var(--muted); font-size:10px; font-weight:400; letter-spacing:.05em; }
  .select-field select { min-height:44px; border:0; border-radius:0; padding:8px 22px 8px 0; background:transparent; font-size:14px; font-weight:400; letter-spacing:0; color:var(--ink); }
  .text-button { min-height:44px; font-size:12px; color:var(--ink); }
  .board-heading { padding:16px 0; font-size:12px; letter-spacing:0; color:var(--muted); }
  .board { border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
  .board-columns,.route-link { grid-template-columns:40px minmax(0,1.1fr) minmax(0,1fr) 80px; gap:24px; padding:0 16px; }
  .board-columns { min-height:36px; background:var(--ink); color:var(--board); border:0; font-size:10px; font-weight:500; letter-spacing:.08em; }
  .board-columns > span:first-child { display:none; }
  .group-heading { padding:10px 16px; border-bottom:1px solid var(--line); background:none; color:var(--muted); font-size:10px; font-weight:400; letter-spacing:.04em; }
  .group-heading h2 { font-weight:400; }
  .route-link { min-height:58px; color:var(--ink); background:none; border-bottom:1px solid var(--line); box-shadow:none; }
  .route-link:hover,.route-link:focus-visible { background:var(--hover); }
  .route-link:focus-visible { outline:2px solid var(--board-accent); outline-offset:-2px; }
  .route-art,.route-lettering { display:none; }
  .route-rank { font:400 12px/1 var(--numbers); color:var(--muted); }
  .route-copy { padding:14px 0; }
  .route-name { position:static; display:block; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip-path:none; white-space:normal; font-size:17px; line-height:1.25; font-weight:500; letter-spacing:-.025em; overflow-wrap:anywhere; }
  .route-remarks { color:var(--muted); font-size:13px; line-height:1.4; }
  .route-traffic { font:500 13px/1 var(--numbers); letter-spacing:0; color:var(--ink); }
  .empty { padding:24px 16px; font-size:14px; color:var(--muted); }
  .empty h2 { font-size:18px; color:var(--ink); }
  .empty button:not(.text-button) { min-height:44px; border-radius:0; color:var(--ink); }
  footer { margin:24px 0 0; padding-top:8px; color:var(--muted); font-size:11px; letter-spacing:0; }
  .footer-line { text-transform:none; gap:8px 20px; }
  .footer-line a { min-height:44px; }
  footer details { max-width:680px; font-size:12px; }
  footer summary { min-height:44px; font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); }
  #arrivals-critter { display:none; }
  .board-styles { gap:24px; font-size:12px; }
  .board-styles [aria-current] { color:var(--ink); font-weight:600; }

  @media(max-width:900px) {
    .hall { padding:28px 24px 48px; }
    .finder { gap:12px 20px; }
    .search-field { flex-basis:100%; }
    .board-columns,.route-link { grid-template-columns:32px minmax(0,1fr) 72px; gap:16px; padding:0 12px; }
    .board-columns .h-remarks { display:none; }
    .route-rank { grid-column:1; grid-row:1 / span 2; }
    .route-copy { grid-column:2; grid-row:1; padding:12px 0 3px; }
    .route-remarks { grid-column:2; grid-row:2; padding:0 0 12px; }
    .route-traffic { grid-column:3; grid-row:1 / span 2; }
  }
  @media(max-width:480px) {
    scroll-padding-top:160px;
    .hall { padding:24px 16px 40px; }
    .masthead { padding-bottom:24px; gap:12px; }
    .brand-wrap { gap:12px; }
    .avatar { width:44px; height:44px; }
    .identity { font-size:10px; letter-spacing:.04em; }
    h1 { font-size:36px; }
    .clock { font-size:16px; }
    .live { font-size:8px; }
    .finder { padding:8px 0; gap:8px 12px; }
    .select-field { flex:1 1 0; flex-wrap:wrap; gap:0; font-size:9px; }
    .select-field select { width:100%; padding:8px 0; font-size:13px; }
    .board-heading { padding:14px 0; font-size:10px; gap:12px; }
    .board-columns,.route-link { grid-template-columns:24px minmax(0,1fr) 48px; gap:10px; padding:0 8px; }
    .board-columns { font-size:9px; }
    .group-heading { padding:10px 8px; font-size:9px; letter-spacing:0; }
    .route-name { font-size:16px; }
    .route-remarks { font-size:12px; line-height:1.4; }
    .route-rank { font-size:10px; }
    .route-traffic { font-size:11px; }
    .footer-line span { flex-basis:100%; order:3; }
  }
  @media(forced-colors:active) {
    .board-columns { color:CanvasText; background:Canvas; border-block:1px solid CanvasText; }
    .route-name { color:LinkText; }
    .route-link:hover { background:Canvas; }
  }
}

/* Bauhaus: the same timetable, with color assigned to structure rather than
   arbitrary destination categories. Red station bar, blue controls, yellow No. */
:root[data-board-style="bauhaus"] {
  --board:#f5f2e9; --ink:#161616; --muted:#56544f;
  --line:#d4d0c6; --hover:#eae5d8;
  --board-accent:#b92c24; --blue:#1747a6; --yellow:#eec43b;
}
html[data-board-style="bauhaus"] {
  h1 { color:var(--board-accent); }
  .clock { color:var(--blue); }
  .board-columns { background:var(--blue); }
  .board-columns > span:nth-child(2) { align-self:stretch; display:flex; align-items:center; justify-content:center; background:var(--yellow); color:var(--ink); }
  .route-rank { display:grid; place-items:center; align-self:stretch; background:var(--yellow); color:var(--ink); }
  .select-field select,.text-button,.board-styles [aria-current] { color:var(--blue); }
  .search-field { border-color:var(--blue); }
  .route-link:hover .route-name { color:var(--blue); }
  @media(forced-colors:active) {
    h1,.clock,.select-field select,.text-button { color:CanvasText; }
    .route-rank,.board-columns > span:nth-child(2) { color:CanvasText; background:Canvas; }
  }
}

/* A related collection opens as a tray beneath its destination row. */
.route { position:relative; }
.route-link,.route-link:focus-visible,.route-family > summary { position:relative; z-index:2; }
.featured-link,.profile-links a,.quick-links a { position:relative; z-index:2; background:var(--board); }
/* Shallow slats leave a narrow recess for CHAOS beneath the working links. */
html:is([data-board-style="swiss"],[data-board-style="bauhaus"]) .route-link {
  background:var(--board);
  margin-bottom:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 3px rgba(0,0,0,.06);
}
.route-family > summary { position:static; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 16px; cursor:pointer; list-style:none; font-size:12px; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--board); border-bottom:1px solid var(--line); }
.route-family > summary::-webkit-details-marker { display:none; }
.route-family > summary:hover { background:var(--hover,#25271d); }
.route-family > summary:focus-visible { outline:2px solid var(--board-accent,var(--amber)); outline-offset:-2px; }
.family-chevron { display:inline-block; font:20px/1 sans-serif; }
.route-family[open] > summary .family-chevron { transform:rotate(180deg); }
.route-children { padding:4px 0 8px; margin-left:20px; border-left:1px solid var(--line); background:var(--hover,#11140e); }
.route-children .route-link { background:transparent; }
.route-children .route-rank { visibility:hidden; }
.family-context { display:none; font-size:11px; line-height:1.4; font-weight:400; color:var(--muted); }
.family-result .family-context { display:block; margin-top:4px; }
.searching .route-family { display:none; }
.quick-links,.profile-links ul { display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; }
.quick-links a,.profile-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:13px; text-decoration:none; text-underline-offset:4px; }
.quick-links a:hover,.profile-links a:hover { text-decoration:underline; }
.profile-links { padding-bottom:20px; }
.profile-links ul { margin:0; padding:0; list-style:none; gap:0 12px; }
.profile-links li { display:flex; max-width:100%; }
.profile-links a { padding:0; font-size:12px; }
.profile-links img { display:block; height:20px; width:auto; max-width:100%; filter:grayscale(1); opacity:.85; }
.profile-links a:hover img,.profile-links a:focus-visible img { filter:none; opacity:1; }
.profile-links a:has(img) .badge-label { display:none; }

/* A small authored shelf; the searchable timetable remains the full catalog. */
.featured { padding:18px 0 8px; }
.featured h2 { margin:0 0 10px; font-size:12px; line-height:1.4; font-weight:500; letter-spacing:0; color:var(--muted); text-transform:none; }
.featured-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 24px; margin:0; padding:0; list-style:none; }
.featured-link { display:flex; align-items:center; gap:12px; min-height:88px; padding:8px 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.featured-link:hover { background:var(--hover,#25271d); }
.featured-link:focus-visible { outline:2px solid var(--board-accent,var(--amber)); outline-offset:3px; }
.featured-art { position:relative; display:grid; place-items:center; flex:0 0 64px; width:64px; height:64px; overflow:hidden; background:var(--hover,#25271d); color:var(--ink); font-size:18px; font-weight:500; }
.featured-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured-copy { min-width:0; }
.featured-copy strong { display:block; font-size:17px; line-height:1.25; font-weight:500; letter-spacing:-.025em; overflow-wrap:anywhere; }
.featured-purpose { display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--muted); }
@media(max-width:900px) {
  .featured-tiles { gap:8px 16px; }
  .featured-link { gap:10px; }
  .featured-art { flex-basis:48px; width:48px; height:48px; }
  .featured-copy strong { font-size:16px; }
  .featured-purpose { display:none; }
}
@media(max-width:480px) {
  .featured-tiles { gap:8px 12px; }
  .featured-link { flex-direction:column; align-items:flex-start; gap:8px; min-height:108px; }
  .featured-art { flex-basis:52px; width:52px; height:52px; }
  .featured-copy strong { font-size:14px; }
}
@media(forced-colors:active) {
  .featured-link { color:LinkText; border-color:CanvasText; }
  .featured-link:focus-visible { outline-color:Highlight; }
}

html:is([data-board-style="swiss"],[data-board-style="bauhaus"]) {
  .masthead { padding-bottom:16px; }
  .quick-links { margin-left:auto; gap:0 24px; }
  .quick-links a,.quick-links summary { font-size:14px; }
  .profile-links ul { gap:0 12px; }
  .board-columns,.route-link { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 80px; }
  .board-columns > span:nth-child(2),.route-rank { display:none; }

  .route-children { margin-left:20px; }
  .family-context { font-size:11px; }
  .board-columns .h-views { grid-column:3; }
  @media(max-width:900px) {
    .board-columns,.route-link { grid-template-columns:minmax(0,1fr) 72px; }
    .route-copy { grid-column:1; }
    .route-traffic { grid-column:2; }
    .board-columns .h-views { grid-column:2; }
    .route-remarks { grid-column:1; }

    .route-family > summary { padding:0 12px; }
    .route-children { margin-left:12px; }
  }
  @media(max-width:480px) {
    .masthead { gap:8px; }
    .quick-links { gap:0 12px; }
    .quick-links a,.quick-links summary { font-size:12px; }
    .profile-links { padding-bottom:16px; }
    .profile-links ul { gap:0 8px; }
    .profile-links a { padding:0; font-size:11px; }
    .board-columns,.route-link { grid-template-columns:minmax(0,1fr) 56px; }
    .route-family > summary { padding:0 8px; }
    .route-children { margin-left:8px; }
  }
}
html[data-board-style="swiss"] {
  .clock-wrap { display:none; }
  .board-columns > span:nth-child(3) { grid-column:1; }
}
html[data-board-style="bauhaus"] {
  .clock-wrap { display:none; }
  .board-columns > span:nth-child(2) { display:none; }
}
html[data-board-style="letterboard"] {
  .board-columns,.route-link { grid-template-columns:28px 26px minmax(0,1fr) 200px 72px; }
  .quick-links { margin-left:auto; }
  .board-columns .h-views { grid-column:5; }
  .profile-links ul { gap:0 12px; }
  @media(max-width:850px) {
    .board-columns,.route-link { grid-template-columns:26px 20px minmax(0,1fr) 72px; }
    .route-remarks { grid-column:3; }
    .route-traffic { grid-column:4; grid-row:1 / span 2; }
    .board-columns .h-views { grid-column:4; }
  }
  @media(max-width:480px) {
    .masthead { flex-wrap:wrap; }
    .quick-links { order:3; flex-basis:100%; }
    .route-art,.route-rank { display:none; }
    .board-columns,.route-link { grid-template-columns:minmax(0,1fr) 56px; gap:6px; padding:0 8px; }
    .board-columns > span:nth-child(-n+2) { display:none; }
    .route-copy { grid-column:1; }
    .route-traffic { grid-column:2; }
    .board-columns .h-views { grid-column:2; }
    .route-remarks { grid-column:1; }
    .route-family > summary { padding:0 8px; }
  }
}