/* Launch screen, "departures board" look (2026-10-16): transit-signage colors (black, white and the logo orange), square
   corners, no glows, and on wide screens the name and search on the left with the race board filling the right.
   Everything is scoped to html.look-board. To roll back to the earlier look, remove class="look-board" from
   <html> in index.html (or this stylesheet's link). */
.look-board .splash {
  --bg: #0a0a0a;
  --accent: #ff6a3d;
  --accent-ink: #111111;
  --line: rgba(255, 255, 255, 0.14);
  --muted: #a3a3a3;
  --signal: #ff6a3d;
  background: var(--bg);
}

/* The logo keeps its own orange. */
.look-board .mark-tile { fill: #ff6a3d; }
.look-board .mark-fill { fill: #1b0c06; }
.look-board .splash-mark { filter: none; box-shadow: none; }

/* Square corners, flat surfaces. */
.look-board .splash-search,
.look-board .splash-go,
.look-board .splash-results,
.look-board .splash-org,
.look-board .splash-soon-list,
.look-board .splash-org-go { border-radius: 2px; box-shadow: none; }
.look-board .splash-search { background: #000; border: 1px solid rgba(255, 255, 255, 0.28); }
.look-board .splash-search:focus-within { border-color: var(--signal); }
.look-board .splash-go { background: var(--signal); color: #111; box-shadow: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; }
.look-board .splash-go:hover { background: #ff8259; }
.look-board .splash-acts button { text-decoration-color: var(--signal); }
.look-board .splash-acts button:hover { color: var(--signal); }
.look-board .splash-org { background: #000; border: 1px solid rgba(255, 255, 255, 0.2); }
.look-board .splash-org:hover { border-color: var(--signal); }
.look-board .splash-org > svg { color: var(--signal); }
.look-board .splash-org-go { background: var(--signal); color: #111; }
.look-board .splash-front .line, .look-board .splash-runner { opacity: 0.35; }

/* The board: a black panel under a sign-style header bar. */
.look-board .soon-head { margin: 0; padding: 8px 10px; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; }
.look-board .soon-week .flap-c { color: var(--signal); }
.look-board .soon-head [data-flap]:hover:not(:disabled) .flap-c, .look-board .soon-units [aria-pressed="true"] .flap-c { color: var(--signal); }
.look-board .soon-units [aria-pressed="true"] .flap { box-shadow: inset 0 -2px 0 var(--signal); }
.look-board .splash-soon-list { background: #000; border: 1px solid rgba(255, 255, 255, 0.14); border-top: 0; padding: 10px; gap: 6px; }
.look-board .splash-soon-list button:hover { background: rgba(255, 106, 61, 0.12); }
.look-board .splash-soon-list .flap-cell[data-col="date"] .flap-c { color: var(--signal); }
.look-board .flap { border-radius: 1px; background: linear-gradient(#1d1d1d 50%, #161616 50%); }

/* Wide screens: two halves. The menu's parts join the page grid, so the board takes the right column. */
@media (min-width: 1000px) {
  .look-board .splash { justify-content: center; }
  .look-board .splash-main {
    display: grid; width: min(1180px, 100%); text-align: left; align-items: start; column-gap: 72px;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-areas: "mark soon" "name soon" "find soon" "go soon" "acts soon" "org soon" ". soon";
  }
  .look-board .splash-menu { display: contents; }
  .look-board .splash-mark { grid-area: mark; margin: 0; }
  .look-board .splash-name { grid-area: name; margin-top: 18px; font-size: 72px; letter-spacing: -0.035em; }
  .look-board .splash-find { grid-area: find; margin-top: 36px; }
  .look-board .splash-go { grid-area: go; margin-top: 10px; }
  .look-board .splash-acts { grid-area: acts; margin-top: 18px; text-align: left; }
  .look-board .splash-org { grid-area: org; margin-top: 28px; }
  .look-board .splash-soon { grid-area: soon; margin: 0; align-self: start; }
  .look-board .splash-soon-list .flap { height: 34px; }
  .look-board .soon-week .flap { height: 24px; font-size: 13px; }
}