/* ---------------------------------------------------------------------------
   Design tokens, the theme button, and the MapLibre chrome. Loaded first on
   every page so all four screens agree on what "panel" and "line" mean.

   Dark is the default because this app is usually shown on a projector. Light
   exists because it isn't always.
--------------------------------------------------------------------------- */

:root {
  /* Brand — fixed in both themes. The header stays RouteLogic green. */
  --cc: #00482E;
  --cc-dk: #063d27;

  --accent:    #7fd3ac;
  --accent-on: #06241a;
  --cc-lt:     var(--accent);   /* older name, still referenced in places */

  --bg:      #0b1410;
  --panel:   #101c17;
  --panel-2: #16261f;
  --panel-3: #1a2e25;
  --line:    #22382e;
  --line-2:  #335645;
  --ink:     #eaf3ee;
  --muted:   #8fa89c;
  --muted-2: #6d8378;
  --faint:   #46604f;
  --chip:    #1e3428;

  --glass:  rgba(16, 28, 23, .94);
  --scrim:  rgba(11, 20, 16, .74);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);

  --ok-bg:      rgba(127, 211, 172, .16);
  --danger:     #f87171;
  --danger-ink: #fca5a5;
  --danger-bg:  rgba(248, 113, 113, .14);
  --danger-line:#7f3b3b;
  --warn-bg:    rgba(242, 182, 50, .14);
  --warn-ink:   #f2c45d;
  --input:      #0d1813;

  --track: #0d1a14;             /* empty part of a load bar */
  --drive: #47605399;           /* drive-time segment of a load bar */

  --thumb:       #2c4a3c;
  --thumb-hover: #3d6a55;

  --map-glow: #12211b;
  --ctrl-invert: 1;             /* MapLibre ships dark icons; flip them */

  /* Gate codes and the like: a crew reads these off a phone in the sun or a
     dark cab. White on the dark screen, brand green on the light one — the one
     token both, so every place a code appears stays consistent. */
  --code-ink: #ffffff;

  color-scheme: dark;
}

/* The accent carries two jobs: a fill behind dark text, and text on a pale
   panel. The dark theme's mint does both against near-black; on white it
   fails the second, so light mode moves it to a green dark enough to read. */
:root[data-theme="light"] {
  color-scheme: light;

  --accent:    #0f7a55;
  --accent-on: #ffffff;

  --bg:      #eaf0ec;
  --panel:   #ffffff;
  --panel-2: #f2f7f4;
  --panel-3: #e2efe7;
  --line:    #d5e3db;
  --line-2:  #b3cbbe;
  --ink:     #0d2018;
  --muted:   #51675c;
  --muted-2: #6b8175;
  --faint:   #9ab0a4;
  --chip:    #dcefe4;

  --glass:  rgba(255, 255, 255, .94);
  --scrim:  rgba(234, 240, 236, .78);
  --shadow: 0 10px 30px rgba(10, 40, 28, .14);

  --ok-bg:      rgba(15, 122, 85, .12);
  --danger:     #c53939;
  --danger-ink: #9c2b2b;
  --danger-bg:  rgba(197, 57, 57, .1);
  --danger-line:#e0b4b4;
  --warn-bg:    rgba(181, 119, 5, .12);
  --warn-ink:   #805300;
  --input:      #ffffff;

  --track: #dde8e2;
  --drive: #9db6a7;

  --thumb:       #bdd2c6;
  --thumb-hover: #9dbcac;

  --map-glow: #dde9e2;
  --ctrl-invert: 0;

  --code-ink: #0f7a55;          /* green on the light screen */
}

/* ============================== theme button =============================
   Fixed to the bottom-right corner of the page, on every screen. The map's
   own controls are pushed to top-right and bottom-left so nothing lands
   underneath it. */

.theme-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, color .18s, border-color .18s, background .18s;
}
.theme-btn:hover { transform: translateY(-2px) rotate(-12deg); border-color: var(--accent); }
.theme-btn:active { transform: translateY(0) scale(.94); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-btn svg { width: 20px; height: 20px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .theme-btn, .theme-btn:hover { transition: none; transform: none; }
}

/* ============================ maplibre chrome ============================
   The stock controls are a white card with black glyphs, which sits on a
   dark map like a sticker. */

.maplibregl-ctrl-group {
  background: var(--glass) !important;
  border: 1px solid var(--line);
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button { background: transparent !important; }
.maplibregl-ctrl-group button:hover { background: var(--panel-3) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(var(--ctrl-invert)) opacity(.75);
}

.maplibregl-ctrl-attrib.maplibregl-compact {
  background: var(--glass) !important;
  border-radius: 10px;
  color: var(--muted-2);
}
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(var(--ctrl-invert)) opacity(.7); }

.maplibregl-popup-content {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass);
  color: var(--ink);
  box-shadow: var(--shadow);
  font: 400 12.5px/1.45 inherit;
  backdrop-filter: blur(8px);
}
.maplibregl-popup-content b { display: block; font-size: 13.5px; font-weight: 700; }
.maplibregl-popup-content i {
  display: block; margin-top: 1px;
  font-style: normal; font-size: 11.5px; color: var(--muted-2);
}
.maplibregl-popup-content span {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.maplibregl-popup-tip {
  border-top-color: var(--glass) !important;
  border-bottom-color: var(--glass) !important;
  border-left-color: var(--glass) !important;
  border-right-color: var(--glass) !important;
}

/* The canvas fades in — a hard swap between two whole basemaps on a theme
   change is a flash of the wrong colour at full brightness. */
.maplibregl-canvas { transition: opacity .12s linear; }