:root {
  /* Faceplate v2.0.0 (vendored, dist/) — project semantics aliased onto --fp-* */
  --bg:var(--fp-surface); --surface:var(--fp-bg); --surface2:var(--fp-sage-xl);
  --border:var(--fp-border); --line:var(--fp-gray); --text:var(--fp-body); --text-bright:var(--fp-ink);
  --muted:var(--fp-muted); --accent:var(--fp-sage); --accent-dim:var(--fp-sage-tint);
  --green:var(--fp-dv-4); --green-dim:color-mix(in srgb,var(--fp-dv-4) 16%,var(--fp-bg));
  --red:var(--fp-terra); --red-dim:var(--fp-terra-tint);
  --amber:var(--fp-dv-3); --amber-dim:color-mix(in srgb,var(--fp-dv-3) 22%,var(--fp-bg));
}
/* Faceplate: hard square edges + mono instrument labels */
/* square native form controls — divs/spans set radius:0 in their own rules */
input, select, button, textarea { border-radius:var(--fp-radius) !important; }
th, .label, .metric .label, .info-item .label, .modal label { font-family: var(--fp-font-sans); }
/* Scoped reset. A universal `* { margin:0; padding:0 }` reaches into
   @layer fp.components and silently zeroes .fp-btn / .fp-chip / .fp-seg
   padding -- unlayered CSS beats layered CSS regardless of specificity, which
   is how a real project shipped a segmented control reading "anyyesno".
   See dist/docs/using-faceplate.md#a-note-on-resets

   The exclusion is wrapped in :where() on purpose. Bare
   :not([class*="fp-"]):not([class*="fp-"] *) carries the specificity of its
   arguments -- two attribute selectors, (0,2,0) -- which outranks every
   single-class rule in this file and quietly flattens .container's
   `margin:0 auto`. :where() is always (0,0,0), so this keeps the reach of the
   old universal reset and none of its weight. */
* { box-sizing:border-box; }
*:where(:not([class*="fp-"]):not([class*="fp-"] *)) { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-sm); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.container { max-width: 1200px; margin:0 auto; padding:0 var(--fp-space-3) var(--fp-space-6); }
/* -- Header - structural (intensity 02) ------------------------------------
   Faceplate unbranded: no band, no monogram plate, no wordmark. Identity is
   the product glyph plus an ink keyline; colour coverage stays inside 02. */
.header { display:flex; align-items:center; gap:var(--fp-space-3) var(--fp-space-4); flex-wrap:wrap;
  padding:0 0 var(--fp-space-3); margin:var(--fp-space-3) 0 var(--fp-space-4);
  border-bottom:var(--fp-keyline) solid var(--fp-ink); }
.brand { display:flex; align-items:center; gap:var(--fp-space-3); }
.brand-mark { width:var(--fp-space-5); height:var(--fp-space-5); flex-shrink:0;
  display:inline-grid; place-items:center; color:var(--fp-sage); }
.brand-mark svg { width:100%; height:100%; display:block; }
.header h1 { font-family:var(--fp-font-sans); font-size:var(--fp-text-h3); font-weight:800;
  letter-spacing:var(--fp-track-tight); color:var(--fp-ink); text-transform:uppercase;
  line-height:var(--fp-leading-tight); margin-bottom:0; }
.header h1 span { color:var(--fp-sage); }
.model { font-family:var(--fp-font-mono); font-size:var(--fp-text-xxs); letter-spacing:var(--fp-track-label);
  color:var(--fp-muted); text-transform:uppercase; margin-top:var(--fp-space-1); }
.nav { display:flex; gap:var(--fp-space-3); flex-wrap:wrap; margin-left:auto; }
.nav a, .nav-link { font-family:var(--fp-font-sans); font-size:var(--fp-text-xs); font-weight:500;
  letter-spacing:var(--fp-track-label); text-transform:uppercase; color:var(--fp-body); text-decoration:none;
  padding:var(--fp-space-1) 0; border-bottom:var(--fp-keyline) solid transparent;
  transition:color .14s, border-color .14s; }
.nav a:hover, .nav-link:hover { color:var(--fp-sage-deep); border-bottom-color:var(--fp-sage); text-decoration:none; }
.updated { font-family:var(--fp-font-mono); font-size:var(--fp-text-xxs); color:var(--fp-muted); }

/* Toolbar */
.toolbar {
  display: flex; gap:var(--fp-space-2); margin-bottom:var(--fp-space-3); flex-wrap: wrap; align-items: center;
}
.toolbar input[type="text"] {
  background: var(--surface); border:var(--fp-keyline) solid var(--fp-ink); border-radius:var(--fp-radius);
  color: var(--text-bright); padding:var(--fp-space-2) var(--fp-space-3); font-size: var(--fp-text-sm); flex: 1; min-width: 200px;
  outline:none;
}
.toolbar input[type="text"]:focus { border-color: var(--accent); }
.toolbar select {
  background: var(--surface); border:var(--fp-keyline) solid var(--fp-ink); border-radius:var(--fp-radius);
  color: var(--text); padding:var(--fp-space-2) var(--fp-space-2); font-size: var(--fp-text-xs); outline:none; cursor: pointer;
}
.toolbar .count { font-size: var(--fp-text-xs); color: var(--muted); margin-left:auto; }

/* status filter = Faceplate .fp-seg; .toggle-btn kept as JS hook, reset <button> UA */
.fp-seg > button { border-top:0; border-bottom:0; border-left:0; color:var(--fp-ink); cursor:pointer; }
.fp-seg > .active { background:var(--fp-ink); color:var(--fp-text-inverse); }

/* Table */
.fleet-table { width: 100%; border-collapse: collapse; font-size: var(--fp-text-xs); }
.fleet-table th {
  text-align: left; padding:var(--fp-space-2) var(--fp-space-2); font-size: var(--fp-text-xxs); font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom:var(--fp-keyline) solid var(--border); cursor: pointer; user-select: none;
  white-space: nowrap;
}
.fleet-table th:hover { color: var(--accent); }
.fleet-table th .sort-arrow { font-size: var(--fp-text-xxs); margin-left:var(--fp-space-1); opacity: 0.5; }
.fleet-table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
.fleet-table td {
  padding:var(--fp-space-2) var(--fp-space-2); border-bottom:var(--fp-hairline) solid var(--border);
  color: var(--text); white-space: nowrap;
}
.fleet-table tr { cursor: pointer; transition: background 0.1s; }
.fleet-table tbody tr:hover { background: var(--surface); }
.fleet-table .reg { font-weight: 700; color: var(--text-bright); font-size: var(--fp-text-sm); }
.fleet-table .hex { font-family: var(--fp-font-mono); font-size: var(--fp-text-xs); color: var(--muted); }
.fleet-table .type { color: var(--accent); font-weight: 600; }
.fleet-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.review-toggle {
  font-size: var(--fp-text-xs); color: var(--muted); display: inline-flex; align-items: center; gap:var(--fp-space-2); cursor: pointer; user-select: none;
}
/* square check (no native checkbox) — hollow = off, ink-filled = on */
.review-toggle .box { width: 13px; height: 13px; border:var(--fp-keyline) solid var(--fp-ink); background: transparent; flex-shrink: 0; }
.review-toggle.on .box { background: var(--fp-ink); }
.review-toggle.on { color: var(--text-bright); }
.review-toggle:hover .box { outline:var(--fp-keyline) solid var(--fp-gray); outline-offset:var(--fp-focus-ring-offset); }
.review-toggle:focus-visible { outline:var(--fp-focus-ring-width) solid var(--fp-focus-ring-color); outline-offset:var(--fp-focus-ring-offset); }
.fleet-table tr.review-row { background: color-mix(in srgb,var(--fp-dv-3) 12%,var(--fp-bg)); }
.fleet-table tr.review-row:hover { background: var(--amber-dim); }
/* status badges = Faceplate .fp-chip + a semantic tint */
.badge-review { background: var(--amber-dim); color: var(--amber); }
.badge-active { background: var(--green-dim); color: var(--green); }
.badge-retired { background: var(--red-dim); color: var(--red); }
.badge-tracking { background: var(--green-dim); color: var(--green); }

.loading { text-align: center; padding:var(--fp-space-6); color: var(--muted); font-size: var(--fp-text-sm); }
.error-banner {
  display: none; background: var(--red-dim); border:var(--fp-keyline) solid var(--red);
  border-radius:var(--fp-radius); padding:var(--fp-space-2) var(--fp-space-3); margin-bottom:var(--fp-space-3);
  color: var(--red); font-size: var(--fp-text-xs);
}

@media (max-width: 800px) {
  .fleet-table { font-size: var(--fp-text-xs); }
  .fleet-table th, .fleet-table td { padding:var(--fp-space-1) var(--fp-space-2); }
}