/* Every colour is a token. Dark mode overrides token VALUES only — never
 * individual rules, which is how the old stylesheet ended up with near-white
 * text on near-white backgrounds. */
:root {
  --purple:      #582C83;   /* Furman purple — routes and primary actions */
  --purple-dim:  #6f3ea3;
  --ink:         #1c1b22;
  --ink-soft:    #5c5768;
  --paper:       #ffffff;   /* cards: search bar, sheet, FABs */
  --field:       #f1eff5;
  --field-hover: #e7e3ee;
  --selected:    #ece4f6;
  --on-selected: #351a52;
  --line:        #e4e1ea;
  --warn:        #a3341a;
  --dot:         #1da1f2;   /* MapLibre's own user-location blue */
  --muted:       #71717a;   /* deliberately neutral — an inactive control tinted
                               purple reads as a broken active one — and dark
                               enough to clear 4.5:1 on --paper, since it is
                               used for real text, not only for icons */
  --shadow:      0 2px 10px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --purple:      #c9a4ea;  --purple-dim:  #b189d8;
    --ink:         #eceaf1;  --ink-soft:    #a9a4b6;
    --paper:       #23222a;  --field:       #2f2e38;  --field-hover: #3b3945;
    --selected:    #43356b;  --on-selected: #f0e8fb;
    --line:        #383641;  --warn:        #ff9f7a;
    --dot:         #4cb8ff;  --muted:       #9a9aa4;
    --shadow:      0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  }
}

/* Outfit is a geometric sans standing in for Brandon Grotesque, which is
 * licensed to furman.edu. The system stack stays as the fallback so the
 * interface is fully legible before the webfont arrives, and stays legible if
 * it never does — font-display: swap means the first paint uses it. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The `hidden` attribute sets display:none from the UA stylesheet, which any
 * author rule with a `display` beats — so `.btn { display: flex }` silently
 * un-hides every hidden button. This is the one place !important is correct:
 * hidden must mean hidden regardless of what else a selector says. */
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overscroll-behavior: none;
  font: 15px/1.45 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, system-ui, sans-serif;
  color: var(--ink);
}
#map { position: absolute; inset: 0; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- top ---------- */

#top {
  position: absolute; z-index: 3;
  top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;                       /* the map stays draggable between cards */
}
#top > * { pointer-events: auto; }

#searchbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border-radius: 26px; padding: 0 14px; height: 48px;
  box-shadow: var(--shadow); color: var(--ink-soft);
}
#searchbar .icon { color: var(--ink-soft); }
/* The mark stands in for the search glyph. It is the plain pin, not the Bell
   Tower one: at 22px the tower's spire, arches and columns collapse into a
   smudge, where the pin silhouette still reads. */
#searchbar .mark { width: 22px; height: 22px; flex: none; display: block; }
#q {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  font-family: inherit;                       /* inputs do not inherit by default */
  font-size: 16px;                            /* 16px or larger, or iOS zooms on focus */
}
#q:focus { outline: none; }
#q::placeholder { color: var(--muted); }

.iconbtn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer;
}
.iconbtn:hover { background: var(--field); }

#suggest {
  list-style: none; margin: 0; padding: 6px;
  background: var(--paper); border-radius: 14px; box-shadow: var(--shadow);
  max-height: 46dvh; overflow-y: auto;
}
#suggest li {
  display: flex; align-items: baseline; gap: 4px; flex-direction: column;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
#suggest li.here { flex-direction: row; align-items: center; gap: 9px; font-weight: 600; }
#suggest li.here .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
#suggest li:hover, #suggest li[aria-selected="true"] { background: var(--selected); color: var(--on-selected); }
#suggest .sub { margin: 0; }

#endpoints {
  display: flex; align-items: center; gap: 6px;
  background: var(--paper); border-radius: 16px; padding: 8px; box-shadow: var(--shadow);
}
#endpoints .fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: var(--field); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 15px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field:hover { background: var(--field-hover); }
.field[data-editing="true"] { box-shadow: inset 0 0 0 2px var(--purple); }
.pip { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pip.from { background: var(--dot); }
.pip.to   { background: var(--purple); }

/* ---------- floating buttons ---------- */

#fabs {
  position: absolute; z-index: 3; right: 12px;
  bottom: calc(var(--sheet-h, 0px) + 16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  transition: bottom .18s ease;
}
.fab {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: var(--paper);
  box-shadow: var(--shadow); color: var(--ink-soft); cursor: pointer;
}
.fab:hover { background: var(--field); }
.fab.live { color: var(--dot); }
#fab-arrow { color: var(--muted); }
.fab.live #fab-arrow { color: var(--dot); }
#fab-locate.tracking { color: var(--dot); }

/* ---------- bottom sheet ---------- */

#sheet {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  /* anchors .sheet-close */
  background: var(--paper);
  border-radius: 18px 18px 0 0; box-shadow: var(--shadow);
  padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(101%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
body[data-mode="place"] #sheet,
body[data-mode="directions"] #sheet,
body[data-mode="nav"] #sheet { transform: translateY(0); }

#grip {
  width: 38px; height: 4px; border-radius: 2px; background: var(--line);
  margin: 4px auto 10px;
}

.pane { display: none; flex-direction: column; gap: 10px; }
body[data-mode="place"]      .pane-place { display: flex; }
body[data-mode="directions"] .pane-dir   { display: flex; }
body[data-mode="nav"]        .pane-nav   { display: flex; }

/* The one display moment: a place name is short, large enough for a display
   face to stay legible, and the only text where brand character is worth any
   bytes. Everything else stays on the system stack, which is hinted for small
   sizes and costs nothing. */
/* Sits over the pane rather than in the flow, so the name can run the full
   width and wrap under it instead of being squeezed into a narrower column. */
.sheet-close {
  position: absolute; top: 10px; right: 12px;
  background: var(--field); color: var(--ink-soft);
}
.sheet-close:hover { background: var(--field-hover); }
.pane-place h2 { padding-right: 44px; }

#sheet h2 {
  margin: 0; font-size: 21px; line-height: 1.22; font-weight: 400;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  letter-spacing: .004em;
}
.sub { margin: 0; font-size: 13px; color: var(--ink-soft); }
.sub.warn { color: var(--warn); }
.figure { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.figure strong { font-size: 26px; font-weight: 600; color: var(--purple); letter-spacing: -.01em; }
.figure span { color: var(--ink-soft); font-size: 14px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; border-radius: 24px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 600;
}
.btn:hover { background: var(--field-hover); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--field); }
.btn.primary { background: var(--purple); border-color: var(--purple); color: var(--paper); }
.btn.primary:hover { background: var(--purple-dim); border-color: var(--purple-dim); }
.btn .icon { width: 18px; height: 18px; }

.row-actions { display: flex; gap: 8px; }
.row-actions .btn { flex: 1; }
/* When the map is no longer following, the locate button IS the recenter
   button — so make it look like the one thing worth pressing. */
#fab-locate.recenter {
  background: var(--purple); color: var(--paper); border-color: var(--purple);
}

.toggle { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.toggle input { accent-color: var(--purple); width: 18px; height: 18px; }

/* This sits ON the map, not in the interface, so it does not follow the theme.
 * The basemap is light in both light and dark mode, and styling this with
 * interface tokens gave it a dark halo on a light map in dark mode — light-grey
 * text ringed in near-black, which is the muddle it looked like.
 *
 * It borrows the map's own label treatment instead: dark text, white halo, the
 * same as every building name, so it reads as part of the map rather than as a
 * control that lost its background. */
#build {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(var(--sheet-h, 0px) + 6px + env(safe-area-inset-bottom));
  margin: 0; padding: 0 76px 0 44px;      /* clear of the (i) and the buttons */
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: #4b4458; text-align: center;
  pointer-events: none; transition: bottom .18s ease;
  text-shadow:
     0  1px 2px #fff,  0 -1px 2px #fff,
     1px 0  2px #fff, -1px  0  2px #fff,
     0  0   5px #fff,  0  0   9px #fff;
}
#build a { pointer-events: auto; color: #3d2a55; text-decoration: none; }
#updated { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
#build a:hover { text-decoration: underline; }

/* ---------- mode visibility ---------- */

body[data-mode="directions"] #searchbar,
body[data-mode="nav"]        #searchbar,
body[data-mode="directions"] #suggest,
body[data-mode="nav"]        #suggest { display: none; }
body[data-mode="browse"] #endpoints,
body[data-mode="place"]  #endpoints { display: none; }

/* Choosing an endpoint keeps the endpoints on screen above the search box, so
   the half-built route stays visible instead of being replaced by a text field.
 *
 * Reordered, not reversed. column-reverse put the search field at the BOTTOM of
 * the stack, so every suggestion added to the list pushed the field further
 * down the screen — the thing you are typing into should not move while you
 * type. Explicit order keeps endpoints, then field, then list. */
body[data-mode="picking"] #sheet { transform: translateY(101%); }
body[data-mode="picking"] #endpoints { order: 1; }
body[data-mode="picking"] #searchbar { order: 2; }
body[data-mode="picking"] #suggest   { order: 3; }
/* Navigating: keep the endpoints visible but out of the way of the road ahead. */
body[data-mode="nav"] #endpoints { opacity: .96; }

/* Heading cone: a square box centred on the dot with the triangle at its top
 * edge, so rotating the box swings the triangle AROUND the dot. Rotating a bare
 * triangle spins it about its own centre and drifts it off. */
.heading-cone {
  width: 56px; height: 56px; pointer-events: none;
  display: flex; justify-content: center; align-items: flex-start;
}
.heading-cone::before {
  content: ""; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 17px solid var(--dot); opacity: .8;
}

/* Our own FABs replace MapLibre's zoom and geolocate buttons — but the
 * attribution lives in this corner too, and hiding it took the OpenStreetMap
 * credit with it. That credit is an ODbL licence obligation, not decoration.
 * Hide the control group, keep the attribution, and lift it clear of the sheet. */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; }
.maplibregl-ctrl-bottom-left {
  bottom: calc(var(--sheet-h, 0px) + env(safe-area-inset-bottom));
  transition: bottom .18s ease;
}
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--ink-soft); }
/* Collapsed, the control is just the (i) button — no plate behind it. */
.maplibregl-ctrl-attrib:not([open]) { background: none; box-shadow: none; }