/* SAR Helper console — shared styles.
   Built for a coordinator reading this at 3am on a tablet: high contrast,
   large hit targets, no animation, nothing hidden behind hover. */

:root {
  color-scheme: light dark;

  --bg:            #eceef2;
  --bg-sunken:     #dfe3ea;
  --panel:         #ffffff;
  --panel-2:       #f5f7fa;
  --text:          #0d1117;
  --text-dim:      #4a5361;
  --border:        #b6bdc9;
  --border-strong: #7d8695;
  --accent:        #0b5cad;
  --accent-text:   #ffffff;
  --focus:         #0b5cad;

  --ok:            #147a33;
  --ok-soft:       #d8f0de;
  --warn:          #b35a00;
  --warn-soft:     #ffe6c9;
  --stopped:       #5b6472;
  --stopped-soft:  #e2e5ea;
  --alarm:         #b0121c;
  --alarm-soft:    #ffdcdd;
  /* `check_in` (protocol §1.3) and the trip plan it often carries (§1.6).
     A hue of its own, on purpose, and deliberately NOT a warning hue: a
     check-in is the hiker saying nothing is wrong, so it must never read as an
     alarm at a glance — that is exactly the impression §1.3 is designed to
     avoid, on the console as much as on the phone. But it must not vanish into
     the ordinary green either, because it is a *stronger kind of fact* than an
     `auto_check_in`: a person did it on purpose. Violet is neither, which is
     the whole reason it is here. The map pin carries the same meaning a second
     time in its SHAPE, so none of this depends on colour vision. */
  --checkin:       #6a2ea0;
  --checkin-soft:  #efe1fb;

  --radius: 6px;
  --hit: 44px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0b0e13;
    --bg-sunken:     #05070a;
    --panel:         #161b23;
    --panel-2:       #1e242e;
    --text:          #f2f5f9;
    --text-dim:      #aab3c0;
    --border:        #39424f;
    --border-strong: #6c7787;
    --accent:        #3b8ee0;
    --accent-text:   #06121f;
    --focus:         #6cb6ff;

    --ok:            #3ad168;
    --ok-soft:       #10331c;
    --warn:          #ffa02e;
    --warn-soft:     #3b2606;
    --stopped:       #9aa4b2;
    --stopped-soft:  #232a34;
    --alarm:         #ff6b6b;
    --alarm-soft:    #3b1113;
    --checkin:       #c48bff;
    --checkin-soft:  #2a1440;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- header */

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hdr {
  flex: 0 0 auto;
  background: var(--panel);
  border-bottom: 2px solid var(--border-strong);
}

.hdr-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 14px;
}

.hdr-brand {
  display: flex;
  /* center, not baseline: the mark is a circle and has no baseline to sit on */
  align-items: center;
  gap: 9px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
}

.hdr-mark {
  flex: 0 0 auto;
  display: block;
}

.hdr-brand strong {
  font-size: 20px;
  letter-spacing: 0.2px;
}

.hdr-brand span {
  font-size: 13px;
  color: var(--text-dim);
}

.hdr-user {
  text-align: right;
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
}

.hdr-user b { display: block; font-size: 15px; }
.hdr-user span { color: var(--text-dim); word-break: break-all; }

.hdr-notice {
  padding: 7px 14px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
}

.hdr-notice b { color: var(--alarm); }

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

button,
.btn {
  font: inherit;
  font-size: 15px;
  min-height: var(--hit);
  padding: 9px 14px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button:hover,
.btn:hover { background: var(--bg-sunken); }

button:active,
.btn:active { border-color: var(--accent); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 700;
}

.btn-primary:hover { background: var(--accent); filter: brightness(1.1); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

input, select {
  font: inherit;
  font-size: 15px;
  min-height: var(--hit);
  padding: 8px 10px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  width: 100%;
}

input[type="radio"],
input[type="checkbox"] {
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
}

label { font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* ---------------------------------------------------------------- login */

.login-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 18px;
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  padding: 22px;
}

.login-card h1 { margin: 0 0 4px; font-size: 26px; }
.login-card p.sub { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 5px; }

.dev-banner {
  width: 100%;
  max-width: 460px;
  background: var(--warn-soft);
  border: 4px solid var(--warn);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--text);
}

.dev-banner h2 {
  margin: 0 0 6px;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--warn);
}

.dev-banner p { margin: 0; font-size: 14.5px; }

.form-error {
  background: var(--alarm-soft);
  border: 2px solid var(--alarm);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-weight: 600;
}

.login-foot {
  max-width: 460px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ---------------------------------------------------------------- layout */

.body-cols {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.panel {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 2px solid var(--border-strong);
}

.map-wrap {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  background: var(--bg-sunken);
}

#map { position: absolute; inset: 0; }

.map-note {
  position: absolute;
  z-index: 500;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  background: var(--panel);
  border: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.map-note.error { border-color: var(--alarm); background: var(--alarm-soft); }
.map-note[hidden] { display: none; }

/* ---------------------------------------------------------------- filters */

.panel-top {
  flex: 0 0 auto;
  padding: 12px 12px 10px;
  border-bottom: 2px solid var(--border);
  background: var(--panel-2);
}

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filters .wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------- area search */

.area-box {
  margin-top: 10px;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.area-box.drawing { border-color: var(--warn); border-width: 3px; }
.area-box.active  { border-color: var(--accent); border-width: 3px; }

.area-chip {
  position: absolute;
  z-index: 600;
  left: 12px;
  bottom: 24px;
  width: min(340px, calc(100% - 24px));
  max-height: 62%;
  overflow-y: auto;
  background: var(--panel);
  border: 3px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.area-chip.drawing { border-color: var(--warn); }
.area-chip.active  { border-color: var(--accent); }
.area-chip[hidden] { display: none; }

.btn-wide { width: 100%; font-weight: 700; }

.btn-danger {
  background: var(--alarm-soft);
  border-color: var(--alarm);
  color: var(--alarm);
  font-weight: 700;
}

.btn-danger:hover { background: var(--alarm); color: var(--panel); }

.area-help {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

.area-count {
  margin: 8px 0;
  font-size: 14px;
  font-weight: 700;
}

.area-banner {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 6px solid var(--accent);
  background: var(--panel-2);
  font-size: 14.5px;
}

.area-banner strong { color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; }

.area-warn {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 2px solid var(--alarm);
  background: var(--alarm-soft);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
}

.match-toggle {
  margin: 10px 0;
  padding: 8px 10px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
}

.match-toggle legend {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  padding: 0 4px;
}

.match-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  min-height: var(--hit);
  cursor: pointer;
  font-weight: 400;
  color: var(--text);
}

.match-opt + .match-opt { border-top: 1px solid var(--border); }

.match-opt input[type="radio"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.match-text { display: block; }
.match-text b { display: block; font-size: 14.5px; }
.match-text small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.matched-line {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 13px;
  color: var(--text);
  padding: 4px 7px;
  border-left: 4px solid var(--accent);
  background: var(--panel-2);
}

.matched-line .matched-window { font-weight: 700; }

.map-wrap.drawing .leaflet-container { cursor: crosshair; }
.map-wrap.drawing .leaflet-marker-pane { pointer-events: none; }

.refresh-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.refresh-bar button { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.refresh-bar .grow { margin-left: auto; text-align: right; }

.stale-clock { color: var(--alarm); font-weight: 700; }

/* ---------------------------------------------------------------- list */

.panel-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.list-section > h2 {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}

.list-section.dark-section > h2 {
  background: var(--alarm-soft);
  color: var(--alarm);
  border-bottom: 2px solid var(--alarm);
  font-size: 14px;
}

.track-row {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel);
  padding: 10px 12px;
  min-height: 60px;
}

.track-row:hover { background: var(--panel-2); }
.track-row.selected { background: var(--panel-2); box-shadow: inset 5px 0 0 var(--accent); }
.dark-section .track-row { background: var(--panel); box-shadow: inset 5px 0 0 var(--alarm); }
.dark-section .track-row.selected { box-shadow: inset 5px 0 0 var(--accent); }

.track-row .row-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.track-name {
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-name.unnamed { font-family: var(--mono); font-size: 14px; font-weight: 600; }

.track-row .row-2 {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.track-row .row-2 .age { color: var(--text); font-weight: 600; }
.track-row .msg {
  margin-top: 4px;
  font-size: 13.5px;
  padding: 4px 7px;
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
  color: var(--text);
  word-break: break-word;
}

.dot {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
}

.dot.auto_check_in { background: var(--ok); }
.dot.check_in   { background: var(--checkin); }
.dot.maybe_lost { background: var(--warn); }
.dot.stopped    { background: var(--stopped); }
.dot.dark       { background: transparent; }
.dot.dark.auto_check_in { border-color: var(--ok); }
.dot.dark.check_in   { border-color: var(--checkin); }
.dot.dark.maybe_lost { border-color: var(--warn); }
.dot.dark.stopped    { border-color: var(--stopped); }

.badge {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid currentColor;
  white-space: nowrap;
}

.badge.auto_check_in { color: var(--ok);      background: var(--ok-soft); }
.badge.check_in   { color: var(--checkin); background: var(--checkin-soft); }
.badge.maybe_lost { color: var(--warn);    background: var(--warn-soft); }
.badge.stopped    { color: var(--stopped); background: var(--stopped-soft); }
.badge.dark       { color: var(--alarm);   background: var(--alarm-soft); }

.empty-note {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
}

.error-note {
  margin: 10px 12px;
  padding: 10px 12px;
  background: var(--alarm-soft);
  border: 2px solid var(--alarm);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
}

.error-note[hidden] { display: none; }

/* The list is cut short — and what got cut is the stalest tracks. */
.trunc-note {
  margin: 10px 12px;
  padding: 10px 12px;
  background: var(--alarm-soft);
  border: 3px solid var(--alarm);
  border-radius: var(--radius);
  font-size: 14px;
}

.trunc-note strong {
  color: var(--alarm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.trunc-note div { margin-top: 6px; font-size: 13px; }

.trunc-note.maybe {
  background: var(--warn-soft);
  border-color: var(--warn);
}

.trunc-note.maybe strong { color: var(--warn); }
.trunc-note[hidden] { display: none; }

/* A request is in flight whose scope differs from what is on screen. */
.stale-note {
  margin: 10px 12px;
  padding: 9px 12px;
  background: var(--warn-soft);
  border-left: 6px solid var(--warn);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 700;
}

.stale-note[hidden] { display: none; }

.badge.suspect { color: var(--alarm); background: var(--alarm-soft); }

/* ------------------------------------------------- hiker profile (§1.5) */

/* `notes` is free text — whatever the hiker chose to tell SAR. It is styled to
   be noticed and is rendered in the page body and nowhere else: never in a
   href, a query string or a title attribute. Nothing in this block is
   generated when the field is absent, so a hiker who filled in nothing leaves
   no trace on the page. */

.age-chip {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Not a status colour — a note is not a state, and it must not be mistaken
   for one at a glance. */
.badge.notes { color: var(--accent); background: var(--panel-2); }

.hiker-notes {
  margin-top: 6px;
  padding: 6px 9px;
  border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel-2);
}

.hiker-notes .notes-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.hiker-notes .notes-body {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;      /* keep the hiker's own line breaks */
  overflow-wrap: anywhere;    /* an unbroken 500-char run must not widen a card */
}

/* The phone number, styled as a sibling of the notes block but in the ordinary
   text colour: it is a fact to read and dial, not a warning. Big enough to read
   off a screen at arm's length, because that is how it gets used. */
.hiker-phone {
  margin-top: 6px;
  padding: 6px 9px;
  border-left: 5px solid var(--muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel-2);
}

.hiker-phone .notes-label { color: var(--muted); }

.hiker-phone .phone-body {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hiker-phone .phone-body:hover { text-decoration: underline; }

/* On a LIST row a preview is enough. The NOTES badge in row 1 is what says a
   note exists, so clipping here can never hide the fact of one. The popup and
   the track page show the whole thing. */
.hiker-notes.preview {
  margin-top: 5px;
  padding: 4px 8px;
}

.hiker-notes.preview .notes-body {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.9em;          /* fallback where line-clamp is unsupported */
}

/* ---------------------------------------------------- trip plan (§1.6) */

/* Where the hiker said they were going and when they meant to be back. Free
   text like `notes` and handled with the same care (§1.6 applies all of §1.5),
   but given a louder treatment on purpose: §6.6 calls this the single most
   valuable thing a searcher can read, and it is what a search gets planned
   against. Its own hue, never a status colour, and never shown without the
   time it was set. */

.badge.plan { color: var(--checkin); background: var(--checkin-soft); }

.trip-plan {
  margin-top: 6px;
  padding: 7px 10px;
  border-left: 5px solid var(--checkin);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--checkin-soft);
}

.trip-plan .trip-plan-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--checkin);
}

.trip-plan .trip-plan-body {
  margin: 2px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;      /* keep the hiker's own line breaks */
  overflow-wrap: anywhere;    /* an unbroken 1000-char run must not widen a card */
}

/* Not small print. A rescuer who cannot see how old the plan is will treat it
   as current, which is the failure §1.6 is written to prevent. */
.trip-plan .trip-plan-when {
  margin: 5px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
}

/* On a LIST row a preview is enough — the TRIP PLAN badge in row 1 says one
   exists, so clipping cannot hide the fact of it. The timestamp is never
   clipped away, even here. */
.trip-plan.preview {
  margin-top: 5px;
  padding: 5px 9px;
}

.trip-plan.preview .trip-plan-body {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.9em;          /* fallback where line-clamp is unsupported */
}

.trip-plan.preview .trip-plan-when { margin-top: 3px; font-size: 11.5px; }

/* The prominent card at the top of the track page. */
.trip-plan-card {
  margin-top: 12px;
  padding: 12px 14px;
  border: 3px solid var(--checkin);
  border-radius: var(--radius);
  background: var(--checkin-soft);
}

.trip-plan-card[hidden] { display: none; }

.trip-plan-card > h2 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--checkin);
}

.trip-plan-card .trip-plan-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.trip-plan-card .trip-plan-when {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.trip-plan-card .trip-plan-caveat {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-dim);
}

.trip-plan-card button { margin-top: 9px; min-height: 38px; padding: 6px 12px; font-size: 14px; }
.trip-plan-card .copy-status { margin: 6px 0 0; }

/* A single deliberate act at a known sign — the strongest fix in a track, and
   emphatically not a warning. */
.checkin-line {
  margin-bottom: 8px;
  padding: 6px 9px;
  border-left: 4px solid var(--checkin);
  background: var(--checkin-soft);
  color: var(--checkin);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.suspect-line[hidden] { display: none; }

.suspect-line {
  margin-top: 4px;
  padding: 5px 8px;
  border-left: 4px solid var(--alarm);
  background: var(--alarm-soft);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: normal;
}

/* ---------------------------------------------------------------- markers */

.sar-marker {
  background: none;
  border: none;
}

.sar-marker .pin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,0.6);
  margin: 0 auto;
}

.sar-marker .pin.auto_check_in { background: #17a13d; }
.sar-marker .pin.maybe_lost { background: #ff8c00; }
.sar-marker .pin.stopped    { background: #7a8594; }

.sar-marker .pin.start {
  background: #ffffff;
  border-color: #111;
  border-radius: 3px;
}

/* A check-in. SHAPE and COLOUR are separate classes on purpose. `.checkin` is
   the diamond — a shape of its own so "a person sent this" is legible on a
   sunlit tablet, in greyscale, and to a colour-blind reader, none of which a
   colour alone survives. `.check_in` is the status colour, and it only applies
   when the ping is actually typed that way.

   They are split because `maybe_lost` outranks `check_in` (§1.3): a
   possibly-lost hiker who checks in gets `.pin.maybe_lost.checkin` — a diamond
   in the maybe-lost orange. Fusing the two would paint that hiker calm violet,
   and nothing here may make a hiker look safer than they are.

   Colours are literals rather than theme variables, like every other pin: these
   sit over satellite imagery, not over the page background. */
.sar-marker .pin.checkin {
  border-radius: 3px;
  transform: rotate(45deg);
}

.sar-marker .pin.check_in { background: #8d3fd6; }

.sar-marker.gone-dark { opacity: 0.85; }
.sar-marker.gone-dark .pin {
  background: transparent;
  border-style: dashed;
  border-width: 4px;
}
.sar-marker.gone-dark .pin.auto_check_in { border-color: #17a13d; }
.sar-marker.gone-dark .pin.check_in   { border-color: #8d3fd6; }
.sar-marker.gone-dark .pin.maybe_lost { border-color: #ff8c00; }
.sar-marker.gone-dark .pin.stopped    { border-color: #7a8594; }

.sar-marker .tag {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  text-align: center;
  transform: translateX(-50%);
  margin-left: 50%;
  width: max-content;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sar-marker .tag .sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #ff9a9a;
}

.sar-marker.selected .tag { background: #0b5cad; border-color: #fff; }

.arrow-marker {
  color: #ffdf3b;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  font-weight: 700;
}

.endpoint-label {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.8);
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  width: max-content;
}

/* ---------------------------------------------------------------- popup */

.leaflet-popup-content { margin: 12px 14px; min-width: 250px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel);
  color: var(--text);
}

.popup h3 {
  margin: 0 0 2px;
  font-size: 18px;
  word-break: break-word;
}

.popup .pid {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  word-break: break-all;
  margin-bottom: 8px;
}

.popup dl {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  font-size: 13.5px;
}

.popup dt { color: var(--text-dim); font-weight: 700; }
.popup dd { margin: 0; word-break: break-word; }
.popup dd.mono { font-family: var(--mono); }

.popup .msg {
  padding: 6px 8px;
  margin-bottom: 10px;
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
  font-size: 13.5px;
  word-break: break-word;
}

.popup .warn-line {
  font-weight: 800;
  color: var(--alarm);
  margin-bottom: 8px;
}

/* Sits with the name and the id, above the telemetry. */
.popup .profile-line {
  font-size: 14.5px;
  font-weight: 700;
  margin: -4px 0 8px;
}

/* Never clipped in a popup — let it wrap and make the popup taller. */
.popup .hiker-notes { margin: 0 0 10px; }

/* ---------------------------------------------------------------- track page */

.track-page {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.card > h2 {
  margin: 0 0 10px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}

.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.track-head h1 {
  margin: 0;
  font-size: 24px;
  word-break: break-word;
}

.pid {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  word-break: break-all;
  margin: 2px 0 12px;
}

/* Identity card, above the telemetry stats. Hidden entirely when the hiker
   entered neither a birth year nor anything in `notes`. */
.profile-card {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.profile-card[hidden] { display: none; }

.profile-card > h2 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
}

.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.profile-name { font-size: 19px; font-weight: 700; word-break: break-word; }
.profile-age { font-size: 16px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }

.profile-card .hiker-notes { background: var(--panel); }
.profile-card .hiker-notes .notes-body { font-size: 15px; }
.profile-card button { margin-top: 9px; min-height: 38px; padding: 6px 12px; font-size: 14px; }
.profile-card .copy-status { margin: 6px 0 0; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

.stat .k {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  font-weight: 700;
}

.stat .v { font-size: 17px; font-weight: 700; word-break: break-word; }
.stat .v.mono { font-family: var(--mono); font-size: 15px; }

#track-map {
  height: min(58vh, 620px);
  min-height: 320px;
  width: 100%;
  border: 2px solid var(--border-strong);
  border-radius: 8px;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.legend-gradient {
  width: 130px;
  height: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: linear-gradient(to right, #2c7fb8, #41b6c4, #ffd24d, #f03b20);
}

.coord-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
}

.coord-block .k { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.coord-block .v { font-family: var(--mono); font-size: 16px; word-break: break-all; }
.coord-block button { min-height: 38px; padding: 6px 10px; font-size: 14px; }

.copy-status {
  min-height: 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ok);
}

.table-scroll {
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table.pings {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

table.pings th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-sunken);
  text-align: left;
  padding: 8px 9px;
  border-bottom: 2px solid var(--border-strong);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

table.pings td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.pings td.msg-cell { white-space: normal; min-width: 180px; word-break: break-word; }
table.pings td.mono { font-family: var(--mono); }
table.pings tbody tr:hover { background: var(--panel-2); cursor: pointer; }

table.pings tr.change-maybe_lost td { background: var(--warn-soft); }
table.pings tr.change-auto_check_in td { background: var(--ok-soft); }
table.pings tr.change-stopped td    { background: var(--stopped-soft); }
table.pings tr.change-check_in td   { background: var(--checkin-soft); }
table.pings tr.change td:first-child { box-shadow: inset 5px 0 0 currentColor; }
table.pings tr.change-maybe_lost td:first-child { box-shadow: inset 5px 0 0 var(--warn); }
table.pings tr.change-auto_check_in td:first-child { box-shadow: inset 5px 0 0 var(--ok); }
table.pings tr.change-stopped td:first-child    { box-shadow: inset 5px 0 0 var(--stopped); }
table.pings tr.change-check_in td:first-child   { box-shadow: inset 5px 0 0 var(--checkin); }

.change-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 2px solid currentColor;
}

.change-tag.maybe_lost { color: var(--warn); }
.change-tag.auto_check_in { color: var(--ok); }
.change-tag.stopped    { color: var(--stopped); }
.change-tag.check_in   { color: var(--checkin); }

.back-link {
  font-size: 14px;
  font-weight: 700;
}

.btn-block { width: 100%; }
.btn-row.spaced { margin-bottom: 10px; }
.inline-clock { align-self: center; font-size: 13.5px; color: var(--text-dim); }
.track-row.static-row { cursor: default; }

.loading-note {
  padding: 20px;
  font-size: 16px;
  color: var(--text-dim);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .body-cols { flex-direction: column; }
  .map-wrap { flex: 0 0 52vh; }
  .panel {
    flex: 1 1 auto;
    border-right: none;
    border-top: 2px solid var(--border-strong);
  }
  .hdr-mark {
  flex: 0 0 auto;
  display: block;
}

.hdr-brand strong { font-size: 18px; }
  .coord-block { grid-template-columns: 1fr; }
  .coord-block button { justify-self: start; }
  .area-chip { bottom: 8px; left: 8px; max-height: 48%; }
}

@media (max-width: 560px) {
  .filters { grid-template-columns: 1fr; }
  .hdr-user { text-align: left; }
}

@media print {
  .panel-top, .hdr, .btn-row,
  .profile-card button, .trip-plan-card button { display: none; }
  /* A printed profile is the point of printing one — never clip it on paper.
     Same for the trip plan: a page carried into the field is read by someone
     who cannot tap to expand it. */
  .hiker-notes.preview .notes-body,
  .trip-plan.preview .trip-plan-body {
    display: block;
    -webkit-line-clamp: none;
    max-height: none;
    overflow: visible;
  }
}

/* The mark beside the title on the sign-in page, so the console is
   recognisable before anybody has signed in to it. */
.login-title {
  display: flex;
  align-items: center;
  gap: 10px;
}