/* Bus replay (/bus/replay/): a full-screen map with a control panel.
   layouts/bus/replay.html loads this; the page's own palette lives here
   because, unlike the rest of the site, it is a dark full-bleed map and
   does not load main.css. Moved from /labs/bus-replay/ on 15 Oct 2026. */
  @font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans.woff2') format('woff2');
               font-weight: 100 1000; font-display: swap; }
  :root {
    --bg: #111; --panel: rgba(17,17,17,.88); --line: #333; --ink: #eee;
    --muted: #aaa; --faint: #777; --play: #2a6; --paused: #a62;
    --amber: 224,162,78;            /* cut-short shading, as rgb triplet */
  }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
               font-family: 'DM Sans', system-ui, sans-serif; overflow: hidden; }

  /* The vector basemap renders into its OWN div underneath deck.gl's canvas;
     deck.gl keeps the camera and every gesture, MapLibre is passive. Same
     arrangement as /interactive/crime-hotspots/ and for the same reasons. */
  #basemap { position: absolute; inset: 0; z-index: 0; }
  #map     { position: absolute; inset: 0; z-index: 2; }
  /* The only two rules a bare MapLibre canvas needs (its 68 KB stylesheet
     styles controls this page never mounts). */
  .maplibregl-map { position: relative; overflow: hidden; }
  .maplibregl-canvas { position: absolute; top: 0; left: 0; }
  #map canvas { outline: none; }

  #hud { position: absolute; left: 12px; top: 12px; z-index: 10;
         width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box;
         max-height: calc(100vh - 24px); overflow-y: auto;
         background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
         padding: 10px 14px; }
  #hud header { display: flex; align-items: center; gap: 8px; }
  #hud h1 { font-size: 15px; margin: 0; font-weight: 600; flex: 1; }
  .tag { font-size: 10px; letter-spacing: .08em; color: #111; background: #E0A24E;
         border-radius: 3px; padding: 1px 5px; font-weight: 700; }
  #collapse { background: none; border: 0; color: var(--muted); font-size: 16px;
              padding: 0 4px; cursor: pointer; }
  #hud.collapsed .more { display: none; }

  .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
  .lbl { font-size: 12px; color: var(--muted); }
  #route { font-size: 14px; min-width: 5em; }
  select { background: #222; color: var(--ink); border: 1px solid #444;
           border-radius: 4px; padding: 4px; font: inherit; font-size: 13px; }
  button { font: inherit; }
  .btn { background: #2a2f36; color: var(--ink); border: 1px solid #444;
         border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
  .btn:hover { background: #343a43; }
  .btn:disabled { opacity: .4; cursor: default; }
  #play { background: var(--play); color: #fff; border: 0; border-radius: 6px;
          padding: 6px 14px; font-size: 14px; cursor: pointer; min-width: 64px; }
  #play.paused { background: var(--paused); }
  #daylabel { font-size: 13px; flex: 1; text-align: center; white-space: nowrap; }

  /* Day strip: newest on the right; shade = share of journeys cut short. */
  #days { display: flex; gap: 3px; margin-top: 8px; overflow-x: auto;
          padding-bottom: 4px; scrollbar-width: thin; }
  .day { flex: 0 0 auto; width: 26px; height: 34px; border-radius: 4px;
         border: 1px solid #3a3f46; background: transparent; color: var(--ink);
         font-size: 11px; line-height: 1.1; padding: 2px 0; cursor: pointer;
         display: flex; flex-direction: column; align-items: center;
         justify-content: center; position: relative; }
  .day .wd { font-size: 9px; color: var(--muted); }
  .day.dark-text, .day.dark-text .wd { color: #111; }
  /* a day with no cut-short figure yet (they come with the weekly update):
     plain grey, never the near-black of a day with few cut short */
  .day.nofig { border-style: dashed; border-color: #6b7280; background: #3a3f46; }
  .day.cur { outline: 2px solid #fff; outline-offset: 1px; }
  .day.gap, .day.absent { cursor: default; color: var(--faint);
         background: repeating-linear-gradient(135deg, #222 0 3px, #2c2c2c 3px 6px); }
  .day.noservice { background: #1d1d1d; border-style: dotted; }
  .day.absent { background: none; border-color: #262626; }
  .day .pin { position: absolute; top: -4px; right: -3px; font-size: 9px; }
  .daykey { font-size: 11px; color: var(--faint); margin-top: 2px; }
  .daykey i { display: inline-block; width: 22px; height: 8px; vertical-align: middle;
              border-radius: 2px; margin: 0 3px;
              background: linear-gradient(90deg, rgba(var(--amber),.18), rgba(var(--amber),.9)); }

  #clock { font-size: 26px; font-variant-numeric: tabular-nums; margin: 8px 0 0; }
  #meta  { font-size: 12px; color: var(--muted); }
  #timeline { position: relative; height: 36px; margin-top: 8px; cursor: pointer;
              touch-action: none; }
  #tl { width: 100%; height: 100%; display: block; border-radius: 4px; }
  #slider { width: 100%; margin: 4px 0 0; }
  #badge { font-size: 12px; margin-top: 6px; padding: 4px 8px; border-radius: 4px;
           background: #26313d; color: #cfe3f5; }
  #msg { font-size: 12px; margin-top: 8px; color: #f0c27a; min-height: 0; }
  #msg:empty { display: none; }
  #msg .btn { margin-left: 6px; }
  #legend, #attrib { font-size: 11px; color: var(--faint); margin-top: 6px; }
  #attrib { color: #666; }

  #banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
            z-index: 11; max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
            background: rgba(60,45,20,.92); border: 1px solid #7a5a22; color: #ffe2b0;
            border-radius: 8px; padding: 8px 14px; font-size: 13px; text-align: center; }
  #banner.noservice { background: rgba(30,40,55,.92); border-color: #3d5a7a; color: #d6e6f7; }
  @media (min-width: 900px) { #banner { left: calc(50% + 190px); } }
  @media (max-width: 899px) { #banner { top: auto; bottom: 12px; } }

  #drop { position: absolute; inset: 0; z-index: 20; display: flex;
          align-items: center; justify-content: center; font-size: 20px;
          background: rgba(10,20,30,.75); border: 3px dashed #7ab8ff; color: #fff;
          pointer-events: none; }
  [hidden] { display: none !important; }

  #back { display: inline-block; font-size: 12px; color: #9cc7f0; text-decoration: none;
          margin-bottom: 4px; }
  #back:hover, #back:focus { text-decoration: underline; }
  #badge { line-height: 1.35; }
  #attrib details { margin-top: 2px; }
  #attrib summary { cursor: pointer; color: var(--faint); }
  #attrib p { margin: 4px 0 0; }
  #attrib a { color: inherit; }

  /* TfL notices for the day being watched (ngbus-notices.js), outlined in
     amber like the route page's box. TfL's text is shown as sent. */
  #notices { margin-top: 8px; padding: 8px 10px; border: 1.5px solid #E0A24E; border-radius: 6px;
             background: rgba(224,162,78,.08); max-height: 32vh; overflow-y: auto; font-size: 12.5px; }
  .nt-title { font-weight: 600; color: #f0c27a; margin-bottom: 2px; }
  .nt-list { list-style: none; margin: 0; padding: 0; }
  .nt-list .ngn-item { padding: 6px 0; border-top: 1px solid rgba(224,162,78,.25); }
  .nt-list .ngn-item:first-child { border-top: 0; }
  .nt-list .ngn-head { font-weight: 600; }
  .nt-list .ngn-text { white-space: pre-line; line-height: 1.4; }
  .nt-list .ngn-meta { margin-top: 2px; font-size: 11px; color: var(--muted); }
  .nt-foot { margin-top: 6px; font-size: 11px; color: var(--muted); }
  .day .nmark { position: absolute; bottom: 2px; left: 50%; margin-left: -3px; width: 6px; height: 6px;
                border-radius: 50%; background: #E0A24E; box-shadow: 0 0 0 1px #111; }