/* FLEET-OPS-001 — shared stylesheet for the Sun For Rent dashboard mockup.
   Direction from 01_Working/NEXT-SESSION.md: large confident uppercase headings set well above
   the body text, size doing the work borders usually do; near-white ground, near-black text,
   one accent used sparingly; flat, no gradients, no drop shadows; whitespace instead of rules. */

:root {
  --ground:    #faf9f6;
  --surface:   #ffffff;
  --ink:       #16150f;
  --ink-soft:  #55534a;
  --ink-faint: #8b8880;
  --rule:      #e3e1d9;
  --rule-soft: #efeee8;

  /* One accent, taken from Sun For Rent's own site rather than invented: the navy that carries
     their logo and nav. Used for interaction and for the single number on any screen that matters
     most, and nowhere else. The brand gold is deliberately rationed to one hairline, because at
     body-copy size their yellow fails contrast on a near-white ground. */
  --accent:    #00286e;
  --accent-wash: #eaeef7;
  --brand-gold: #fabc0d;

  /* Status is the one place a second colour is unavoidable. Kept desaturated so the screen
     still reads as near-white with one accent rather than as a traffic light. */
  --bad:       #a3341c;
  --bad-wash:  #f9ece8;
  --warn:      #8a6410;
  --warn-wash: #f9f2e0;
  --good:      #43663f;
  --good-wash: #eef2ea;

  --gap:   clamp(2.5rem, 5vw, 4.5rem);
  --pad:   clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1240px;

  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

/* ---------------------------------------------------------------- type scale
   The whole hierarchy is here. Nav and section headings are uppercase, heavy and letter-spaced;
   body copy is sentence case and markedly smaller, so the jump is unmistakable at a glance. */

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
}

h1, .h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

h3, .h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 1rem 0 0;
}

.note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- shell + nav */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar { border-top: 3px solid var(--brand-gold); }

.topbar-in {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  min-height: 68px;
  flex-wrap: wrap;
}

.brand {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--accent); }

.nav { display: flex; gap: clamp(0.75rem, 1.7vw, 1.5rem); flex: 1; flex-wrap: wrap; align-items: center; }

.nav a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.search {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  min-width: 180px;
  border-radius: 0;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-wrap { position: relative; display: inline-block; }
.search.is-bad { border-color: var(--bad); }
.search-msg {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  white-space: nowrap;
  font-size: 0.6875rem;
  color: var(--bad);
}

/* ---------------------------------------------------------------- page furniture */

.masthead { padding: var(--gap) 0 0; }
.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.asof { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

section { padding: var(--gap) 0 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.section-head h2 { margin: 0; }

.rule { height: 1px; background: var(--rule); border: 0; margin: var(--gap) 0 0; }

footer {
  margin-top: var(--gap);
  padding: 2rem 0 3.5rem;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- count tiles
   Each tile is a filter, not a readout. The number carries the weight; the label sits under it
   small and uppercase. No boxes where size already says "this is the important one". */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.tile {
  background: var(--surface);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 1.35rem 1.35rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  text-decoration: none;
  transition: background 0.12s;
}
.tile:hover { background: var(--accent-wash); }
.tile[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.tile[aria-pressed="true"] .tile-label { color: rgba(255,255,255,0.72); }
.tile[aria-pressed="true"] .tile-sub { color: rgba(255,255,255,0.55); }

.tile-num {
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  display: block;
}
.tile-label {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tile-sub { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-faint); }

.tile.is-alert .tile-num { color: var(--bad); }
.tile.is-warn  .tile-num { color: var(--warn); }
.tile.is-accent .tile-num { color: var(--accent); }

/* The one tile that is the argument of the whole screen. */
.tile.is-headline { grid-column: span 2; background: var(--ink); color: var(--ground); }
.tile.is-headline:hover { background: #001d52; }
.tile.is-headline .tile-num { color: var(--ground); font-size: clamp(3rem, 7vw, 5rem); }
.tile.is-headline .tile-label { color: rgba(255,255,255,0.75); }
.tile.is-headline .tile-sub { color: rgba(255,255,255,0.55); max-width: 44ch; }
@media (max-width: 620px) { .tile.is-headline { grid-column: span 1; } }

.strip { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.strip .tile { flex: 1 1 150px; padding: 0.9rem 1rem; cursor: default; }
.strip .tile-num { font-size: 1.75rem; }
.strip .tile-label { margin-top: 0.3rem; font-size: 0.6875rem; }

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

.list { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 0.95rem 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
}
.row:hover { background: var(--surface); }
.row.is-head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.6rem;
  border-bottom-color: var(--rule);
}
.row.is-head:hover { background: none; }

.row .sn { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.row .sub { font-size: 0.75rem; color: var(--ink-faint); }
.row .cust { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
  .row { grid-template-columns: 4.5rem 1fr auto; }
  .row .col-hide { display: none; }
}

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill.on_rent  { background: var(--good-wash); color: var(--good);  border-color: #dbe4d6; }
.pill.available{ background: #eef1f4;          color: #3d5566;      border-color: #dee4e9; }
.pill.needed   { background: var(--accent-wash);color: var(--accent);border-color: #ccd7ea; }
.pill.off_rent { background: #f1f0ec;          color: var(--ink-soft); border-color: var(--rule); }
.pill.reserved { background: var(--warn-wash); color: var(--warn);  border-color: #ece0c4; }
.pill.stolen   { background: var(--bad-wash);  color: var(--bad);   border-color: #eed9d2; }
.pill.unknown  { background: #f1f0ec;          color: var(--ink-faint); border-color: var(--rule); }

.flag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.flag.overdue  { color: var(--bad); }
.flag.due_soon { color: var(--warn); }
.flag.never    { color: var(--ink-faint); }
.flag.ok       { color: var(--good); }

/* ---------------------------------------------------------------- map */

.map-wrap { background: var(--surface); border: 1px solid var(--rule); position: relative; }
.map-wrap svg { display: block; width: 100%; height: auto; }

.us-land { fill: #f2f1ea; stroke: #dedbd0; stroke-width: 0.8; stroke-linejoin: round; }

.pin { cursor: pointer; }
.pin circle { stroke: var(--surface); stroke-width: 1.5; transition: r 0.12s; }
.pin text {
  font-family: var(--sans);
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  fill: #fff;
}
.pin:hover circle { stroke: var(--ink); }
.pin.dim { opacity: 0.22; }

.pin.c-on_rent   circle { fill: #43663f; }
.pin.c-available circle { fill: #6b7c88; }
.pin.c-mixed     circle { fill: var(--accent); }
.pin.c-alert     circle { fill: var(--bad); }

.map-legend { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--ink-soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

.map-tip {
  position: absolute;
  background: var(--ink);
  color: var(--ground);
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  max-width: 230px;
  z-index: 5;
}
.map-tip.on { opacity: 1; }
.map-tip b { display: block; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.2rem; }

/* ---------------------------------------------------------------- unit detail */

.unit-head { display: flex; gap: 2rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.spec { background: var(--surface); padding: 1rem 1.1rem;
        border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.spec dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.35rem; }
.spec dd { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.spec dd.empty { color: var(--ink-faint); font-weight: 400; font-style: italic; }

.timeline { border-left: 2px solid var(--rule); padding-left: 1.5rem; margin-left: 0.5rem; }
.tl-item { position: relative; padding-bottom: 1.6rem; }
.tl-item::before { content: ""; position: absolute; left: -1.94rem; top: 0.45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.tl-item.muted::before { background: var(--rule); }
.tl-item.alert::before { background: var(--bad); }
.tl-date { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.tl-body { margin-top: 0.15rem; }

.callout { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 1.1rem 1.25rem; }
.callout.bad { border-left-color: var(--bad); }

.empty-state { background: var(--surface); border: 1px dashed var(--rule); padding: 2rem 1.5rem; text-align: center; color: var(--ink-faint); }
.empty-state strong { display: block; color: var(--ink-soft); font-size: 1.0625rem; margin-bottom: 0.35rem; }

.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.mock-banner {
  background: var(--ink);
  color: var(--ground);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.mock-banner .shell { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mock-banner b { color: var(--accent); }

/* ------------------------------------------------------------------ map zoom
   Added 2026-08-24 from the Travis call: at national scale Southern California is a pile of
   overlapping circles and he could not read it. Controls sit inside the map frame. */
.zoom-ctl { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 5;
            display: flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.zoom-ctl button { font: inherit; font-weight: 700; line-height: 1; background: rgba(255,255,255,0.94);
                   border: 0; padding: 0.5rem 0.7rem; cursor: pointer; color: var(--ink); }
.zoom-ctl button:hover { background: var(--accent-wash); }
.zoom-ctl .zoom-reset { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
                        font-weight: 700; padding: 0.5rem 0.8rem; }
.map-wrap { position: relative; }
.map-wrap.is-zoomed svg { cursor: grab; }
.map-wrap.is-zoomed svg:active { cursor: grabbing; }

/* Logistics layer. Blue is a unit waiting to be picked up, orange is one that needs delivering,
   matching the colours Travis already uses on the whiteboard behind his desk. */
.pin.c-pickup circle:not([fill="none"]) { fill: #00286e; }
.pin.c-delivery circle:not([fill="none"]) { fill: #b4600f; }
.pin.c-idle circle:not([fill="none"]) { fill: #b8b5ab; }

/* Service record table on the unit page. Added 2026-08-24: Travis wants the log readable
   backwards, one row per visit. Most columns are empty until Fleet Tracker V2 carries them. */
.svc-log { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.svc-row { display: grid; grid-template-columns: 7.5rem 6.5rem 1fr 1fr 6rem 6rem; }
.svc-row > div { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
                 padding: 0.6rem 0.75rem; font-size: 0.8125rem; }
.svc-row.is-head > div { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em;
                         text-transform: uppercase; color: var(--ink-soft); background: var(--rule-soft); }
.svc-row .empty { color: var(--ink-faint); font-style: italic; }
@media (max-width: 780px) { .svc-row { grid-template-columns: 6.5rem 1fr; }
                            .svc-row > div:nth-child(n+3) { grid-column: 1 / -1; } }