/*
  ARKAK Operator Console.

  ─────────────────────────────────────────────────────────────────────────────
  WHERE THE COLOURS COME FROM
  ─────────────────────────────────────────────────────────────────────────────
  Not a palette applied to a dashboard. The neutrals are the ground this product
  lives on — trench spoil, fresh asphalt, the chalky white of a drawing sheet —
  so they are WARM greys. A blue-grey would be every other admin tool ever made,
  and would also be a lie about the world these people work in.

  The single accent is APWA survey pink: the standardised colour of TEMPORARY
  SURVEY MARKINGS. That is precisely what this console is — ARKAK's own marks on
  a customer's ground, made to be read and then to disappear. It is deliberately
  not red (electric), orange (telecom), blue (water), green (sewer) or yellow
  (gas), so it can never be confused with a locate colour that means something.

  State colours are separate from the accent and are used only where they mean
  something: caution-tape amber for attention, a deep strike red for failure, a
  muted green for clear. Nothing here is coloured for decoration.

  ─────────────────────────────────────────────────────────────────────────────
  THE TYPOGRAPHIC IDEA IS A TITLE BLOCK
  ─────────────────────────────────────────────────────────────────────────────
  Every survey drawing carries one: fixed corner, uppercase tracked micro-labels,
  monospaced identifiers, everything in a rigid grid. So does this. Identifiers,
  timestamps and counts are monospaced with tabular figures — survey data is
  tabular, and a column of ids that jitters is a column nobody scans.

  No webfont: an operator opens this during an incident, sometimes tethered to a
  phone, and a font that has to be fetched is a font that has not arrived. The
  hierarchy is carried by weight, tracking and colour instead of by a typeface.

  ─────────────────────────────────────────────────────────────────────────────
  BORDERS, NOT SHADOWS
  ─────────────────────────────────────────────────────────────────────────────
  One depth strategy, committed to. This is a dense technical instrument; nothing
  here "lifts", so a shadow would be describing a relationship that does not
  exist. Borders live at low opacity so they define an edge without being the
  first thing you see.
*/

:root {
  /* ── Ground: warm neutrals ───────────────────────────────────────────────── */
  --paper:        #f7f5f2;   /* the drawing sheet */
  --paper-inset:  #efece7;   /* a field: recessed, because it receives */
  --paper-raised: #fffdfa;   /* a row that sits on the sheet */
  --spoil:        #6b6259;   /* trench spoil — secondary text */
  --asphalt:      #2b2825;   /* fresh asphalt — primary text */
  --chalk:        #8d857b;   /* tertiary */
  --chalk-faint:  #a9a199;   /* muted / disabled */

  --rule:         rgba(43, 40, 37, 0.13);
  --rule-soft:    rgba(43, 40, 37, 0.07);
  --rule-strong:  rgba(43, 40, 37, 0.26);

  /* ── The one accent: APWA temporary survey marking ───────────────────────── */
  --survey-pink:      #d6246e;
  --survey-pink-weak: rgba(214, 36, 110, 0.10);
  --survey-pink-edge: rgba(214, 36, 110, 0.38);

  /* ── State. Separate from the accent, and only where it means something. ─── */
  --clear:      #3f7d4f;   /* nothing to do here */
  --clear-weak: rgba(63, 125, 79, 0.12);
  --caution:    #b4700c;   /* caution tape */
  --caution-weak: rgba(180, 112, 12, 0.13);
  --strike:     #a92626;   /* the incident everybody is avoiding */
  --strike-weak: rgba(169, 38, 38, 0.11);
  --dormant:    #8d857b;   /* not configured — a real state, not a failure */
  --dormant-weak: rgba(141, 133, 123, 0.13);

  /* ── Type ────────────────────────────────────────────────────────────────── */
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  --data: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
          Consolas, monospace;

  /* 13px base, 1.25 ratio. Dense: this is scanned, not read. */
  --t-micro: 11px;
  --t-body:  13px;
  --t-lead:  16px;
  --t-h2:    20px;
  --t-h1:    25px;
  --t-hero:  31px;

  /* ── Space: 4px base, held everywhere ────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --r-tight: 3px;   /* fields, buttons */
  --r-card:  6px;   /* panels, rows */
}

/*
  Dark, for the 02:00 case. One hue family, lightness shifted — never a different
  hue for a different surface. Shadows do not read on dark, so the borders carry
  slightly more weight and the accent is lightened so it stays legible without
  glowing.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #1a1816;
    --paper-inset:  #131211;
    --paper-raised: #221f1c;
    --spoil:        #a49a8f;
    --asphalt:      #f0ece6;
    --chalk:        #8b8177;
    --chalk-faint:  #6d655d;

    --rule:         rgba(240, 236, 230, 0.13);
    --rule-soft:    rgba(240, 236, 230, 0.07);
    --rule-strong:  rgba(240, 236, 230, 0.24);

    --survey-pink:      #ff5f9a;
    --survey-pink-weak: rgba(255, 95, 154, 0.13);
    --survey-pink-edge: rgba(255, 95, 154, 0.42);

    --clear:      #6bbd80;
    --clear-weak: rgba(107, 189, 128, 0.14);
    --caution:    #e0a13c;
    --caution-weak: rgba(224, 161, 60, 0.15);
    --strike:     #f0655f;
    --strike-weak: rgba(240, 101, 95, 0.14);
    --dormant:    #8b8177;
    --dormant-weak: rgba(139, 129, 119, 0.15);
  }
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--asphalt);
  font: 400 var(--t-body)/1.5 var(--ui);
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* The micro-label: a drawing's title-block caption. Uppercase, tracked, quiet. */
.micro-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--chalk);
}

/* ── Title block ──────────────────────────────────────────────────────────── */

.title-block {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  position: sticky;
  top: 0;
  z-index: 10;
}

/*
  A survey mark, drawn rather than pictured: the cross-and-circle a surveyor
  paints on the ground. Two pseudo-elements, no asset to fetch.
*/
.title-block__mark {
  width: 22px; height: 22px;
  border: 1.5px solid var(--survey-pink);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.title-block__mark::before,
.title-block__mark::after {
  content: "";
  position: absolute;
  background: var(--survey-pink);
}
.title-block__mark::before { left: 50%; top: -5px; bottom: -5px; width: 1.5px; margin-left: -0.75px; }
.title-block__mark::after  { top: 50%; left: -5px; right: -5px; height: 1.5px; margin-top: -0.75px; }

.title-block__name { display: flex; align-items: baseline; gap: var(--s2); margin-right: auto; }
.wordmark { font-weight: 650; letter-spacing: 0.14em; font-size: var(--t-body); }
.sheet { color: var(--spoil); font-size: var(--t-body); }

.title-block__meta { min-width: 0; }
.title-block__meta output { display: block; font-size: var(--t-body); color: var(--spoil); }

/* ── Panels ───────────────────────────────────────────────────────────────── */

main { padding: var(--s6) var(--s5) var(--s7); max-width: 1180px; margin: 0 auto; }

.panel { margin-bottom: var(--s6); }
.panel--narrow { max-width: 420px; margin-inline: auto; padding-top: var(--s6); }

.panel__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s4);
}

.panel__title {
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: -0.02em;   /* optical: tighten as type grows */
  text-wrap: balance;
  margin: 0 0 var(--s2);
}

.panel__lede {
  margin: 0 0 var(--s4);
  color: var(--spoil);
  max-width: 62ch;
  text-wrap: pretty;
}

.panel__foot {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule-soft);
  color: var(--chalk); font-size: var(--t-micro); line-height: 1.6;
  text-wrap: pretty;
}

.section {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--paper-raised);
  margin-bottom: var(--s4);
  overflow: hidden;
}
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule-soft);
}
.section__title { font-size: var(--t-body); font-weight: 600; margin: 0; }
.section__body { padding: var(--s4); }
.section__body--flush { padding: 0; }

/* ── The traverse spine: the console's signature ──────────────────────────── */
/*
  A workspace read as a survey traverse. Each station is one operational posture,
  in the order an operator cares about them, on a single line — so "is anything
  wrong here" is answered before any detail is read.

  This is the focal element of a workspace view and the only place saturated
  colour appears in quantity. Everything below it is quieter on purpose.
*/
.traverse {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--s5) var(--s4) var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--paper-raised);
  margin-bottom: var(--s5);
  overflow-x: auto;
}

.station {
  flex: 1 1 0;
  min-width: 116px;
  padding: 0 var(--s3);
  position: relative;
  text-align: left;
}

/* The chain line, drawn between stations rather than around them. */
.station::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 1px;
  background: var(--rule-strong);
}
.station:first-child::before { left: 50%; }
.station:last-child::before  { right: 50%; }

.station__mark {
  position: relative;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 3px solid var(--paper-raised);   /* punches the chain line */
  background: var(--dormant);
  margin-bottom: var(--s3);
  z-index: 1;
}
.station--clear   .station__mark { background: var(--clear); }
.station--caution .station__mark { background: var(--caution); }
.station--strike  .station__mark { background: var(--strike); }
.station--dormant .station__mark { background: var(--dormant); }

.station__label { display: block; margin-bottom: 2px; }
.station__value {
  display: block;
  font-family: var(--data);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--asphalt);
  letter-spacing: -0.01em;
}
.station__note {
  display: block; font-size: var(--t-micro); color: var(--chalk);
  margin-top: 2px; text-wrap: pretty;
}
.station--strike  .station__value { color: var(--strike); }
.station--caution .station__value { color: var(--caution); }

/* ── Facts: a two-column register, not a card grid ────────────────────────── */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: 0; }
.facts dt { color: var(--chalk); font-size: var(--t-micro); text-transform: uppercase;
            letter-spacing: 0.09em; font-weight: 500; padding-top: 2px; }
.facts dd { margin: 0; font-family: var(--data); font-size: var(--t-body); }
.facts dd.prose { font-family: var(--ui); }

/* ── Rows ─────────────────────────────────────────────────────────────────── */

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--rule-soft);
}
.rows li:first-child { border-top: 0; }
.rows__main { flex: 1 1 auto; min-width: 0; }
.rows__name { font-weight: 550; }
.rows__meta { color: var(--chalk); font-size: var(--t-micro); }

.result-button {
  display: flex; width: 100%; text-align: left; gap: var(--s4);
  align-items: center;
  background: none; border: 0; border-top: 1px solid var(--rule-soft);
  padding: var(--s3) var(--s4);
  font: inherit; color: inherit; cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.result-button:first-child { border-top: 0; }
.result-button:hover { background: var(--survey-pink-weak); }
.result-button:active { background: var(--survey-pink-weak); transform: none; }
.result-button:focus-visible { outline: 2px solid var(--survey-pink); outline-offset: -2px; }

/* ── Pills ────────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--t-micro); font-weight: 550; letter-spacing: 0.02em;
  border: 1px solid transparent; white-space: nowrap;
}
.pill--clear   { background: var(--clear-weak);   color: var(--clear);   border-color: var(--clear); }
.pill--caution { background: var(--caution-weak); color: var(--caution); border-color: var(--caution); }
.pill--strike  { background: var(--strike-weak);  color: var(--strike);  border-color: var(--strike); }
.pill--dormant { background: var(--dormant-weak); color: var(--dormant); border-color: var(--dormant); }

/* ── Controls ─────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: var(--s4); }
.field--inline { display: flex; align-items: center; gap: var(--s3); flex: 1 1 260px; margin-bottom: 0; }
.field--inline .field__label { margin-bottom: 0; }
.field__label { display: block; font-size: var(--t-micro); font-weight: 550;
                letter-spacing: 0.09em; text-transform: uppercase; color: var(--chalk);
                margin-bottom: var(--s1); }
.field__input {
  display: block; width: 100%;
  padding: 9px var(--s3);
  /* Inset, because a field RECEIVES: darker than its surroundings, not lighter. */
  background: var(--paper-inset);
  border: 1px solid var(--rule);
  border-radius: var(--r-tight);
  color: var(--asphalt);
  font: 400 var(--t-body)/1.4 var(--ui);
  transition: border-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.field__input:focus {
  outline: none;
  border-color: var(--survey-pink);
  box-shadow: 0 0 0 3px var(--survey-pink-weak);
}
.field__input--code { font-family: var(--data); letter-spacing: 0.22em; font-size: var(--t-lead); }
.field__hint { display: block; margin-top: var(--s1); font-size: var(--t-micro); color: var(--chalk); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 34px; padding: 0 var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-tight);
  background: var(--paper-raised);
  color: var(--asphalt);
  font: 550 var(--t-body)/1 var(--ui);
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}
.button:hover:not(:disabled) { background: var(--paper-inset); }
.button:active:not(:disabled) { transform: scale(0.97); }
.button:focus-visible { outline: 2px solid var(--survey-pink); outline-offset: 2px; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }

.button--primary {
  background: var(--survey-pink); border-color: var(--survey-pink); color: #fff;
  width: 100%;
}
.button--primary:hover:not(:disabled) { background: var(--survey-pink); filter: brightness(1.06); }

.button--quiet { border-color: transparent; background: none; color: var(--spoil); }
.button--quiet:hover:not(:disabled) { background: var(--paper-inset); color: var(--asphalt); }

.button--danger { border-color: var(--strike); color: var(--strike); }
.button--danger:hover:not(:disabled) { background: var(--strike-weak); }

form { margin: 0; }
#searchForm { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap;
              margin-bottom: var(--s4); }

/* ── Notices ──────────────────────────────────────────────────────────────── */

.notice {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--r-tight);
  margin: var(--s3) 0 0;
  font-size: var(--t-body);
  text-wrap: pretty;
}
.notice--error   { border-left-color: var(--strike);  background: var(--strike-weak); }
.notice--caution { border-left-color: var(--caution); background: var(--caution-weak); }
.notice--clear   { border-left-color: var(--clear);   background: var(--clear-weak); }
.notice--quiet   { border-left-color: var(--rule-strong); background: var(--paper-inset);
                   color: var(--spoil); }

/* An empty state is a sentence, not a shrug. */
.empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--spoil);
  border: 1px dashed var(--rule);
  border-radius: var(--r-card);
  text-wrap: pretty;
}
.empty strong { display: block; color: var(--asphalt); margin-bottom: var(--s1); font-weight: 600; }

/* Loading: a chain line being surveyed across, not a spinner. */
.loading { position: relative; height: 2px; background: var(--rule-soft);
           border-radius: 2px; overflow: hidden; margin: var(--s4) 0; }
.loading::after {
  content: ""; position: absolute; inset: 0;
  background: var(--survey-pink);
  transform-origin: left;
  animation: chain 1100ms cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
@keyframes chain {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.colophon {
  border-top: 1px solid var(--rule-soft);
  padding: var(--s4) var(--s5) var(--s6);
  color: var(--chalk); font-size: var(--t-micro);
  max-width: 1180px; margin: 0 auto;
  text-wrap: pretty;
}
.colophon p { margin: 0; max-width: 74ch; }

/* Wide content scrolls inside itself; the page never scrolls sideways. */
.scroll-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Colour and opacity transitions are kept; movement is not. */
  .button:active:not(:disabled) { transform: none; }
}

@media (max-width: 720px) {
  .title-block { flex-wrap: wrap; gap: var(--s3) var(--s4); }
  .title-block__name { margin-right: 0; width: 100%; }
  main { padding: var(--s5) var(--s4) var(--s6); }
  .facts { grid-template-columns: 1fr; gap: var(--s1) 0; }
  .facts dd { margin-bottom: var(--s2); }
}