/* ==========================================================================
   Onyx Cloud — Panel v2 design system
   "Instrument panel" direction (operator ruling, 2026-09-19): merge of mock
   B (shell/topbar/readout/fleet/buttons/status/density) with mock A's box
   console spacing + Update block. Sans throughout. Square corners. Gray
   palette with a single Onyx corporate-blue accent (brand amendment,
   2026-09-24 — see docs/decisions.md D-51); amber/red still exist only for
   genuine warnings/errors and the Update block's interruption notice —
   never for "update available" as a fact.

   Namespacing: every class is prefixed pv2- and every custom property
   --pv2-. Nothing here reuses a name from static/css/app.css (v1).
   No external requests: system font stack, inline SVG only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Colour — strictly gray. Amber/red are reserved for warning/error only. */
  --pv2-ground:        #ececea;  /* page background */
  --pv2-surface:       #ffffff;  /* cards, panels, inputs */
  --pv2-surface-alt:   #f4f4f3;  /* readout strip, subnav, table stripe */
  --pv2-border:        #d8d8d4;  /* hairline dividers */
  --pv2-border-strong: #aaaaa5;  /* structural outlines, grid gutters */
  --pv2-ink:           #17171a;  /* primary text / graphite fill */
  --pv2-ink-2:         #3c3c39;  /* secondary headings */
  --pv2-muted:         #5c5c58;  /* secondary text  — 6.7:1 on surface, 6.1:1 on surface-alt */
  --pv2-faint:         #676762;  /* tertiary/empty text — 5.7:1 on surface, 5.2:1 on surface-alt */
  --pv2-on-ink:        #ffffff;  /* text on graphite fill — 17.9:1 */

  /* Brand accent — the ONE colour outside the gray/amber/red system.
     Onyx corporate blue (brand amendment, 2026-09-24): primary buttons,
     the active nav indicator, links, and the focus ring only. Never a
     card/badge/status surface — those stay gray, or amber/red per the
     rules above. */
  --pv2-brand:         #0369a1;
  --pv2-brand-hover:   #075985;
  --pv2-brand-soft:    #e0f2fe;
  --pv2-on-brand:      #ffffff;

  --pv2-amber-ink:     #6e4408;  /* 7.3:1 on --pv2-amber-bg */
  --pv2-amber-bg:      #f9edd8;
  --pv2-amber-border:  #b3792a;

  --pv2-red-ink:       #7d2917;  /* 7.7:1 on --pv2-red-bg */
  --pv2-red-bg:        #f8e3df;
  --pv2-red-border:    #a8412b;

  /* Type */
  --pv2-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pv2-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --pv2-text-2xs: 10px;   /* eyebrow / field labels / table headers */
  --pv2-text-xs:  11px;   /* status labels, spec keys */
  --pv2-text-sm:  12.5px; /* secondary body, meta */
  --pv2-text-base:13.5px; /* default body */
  --pv2-text-md:  15px;   /* card names, emphasised body */
  --pv2-text-lg:  17px;   /* section/console h1 */
  --pv2-text-xl:  20px;   /* page h1 */
  --pv2-text-2xl: 26px;   /* claim/auth h1 */

  /* Space (4px base unit) */
  --pv2-space-1: 4px;
  --pv2-space-2: 8px;
  --pv2-space-3: 12px;
  --pv2-space-4: 16px;
  --pv2-space-5: 20px;
  --pv2-space-6: 24px;
  --pv2-space-7: 32px;
  --pv2-space-8: 40px;
  --pv2-space-9: 56px;

  /* Border / radius — square corners everywhere */
  --pv2-radius: 0;
  --pv2-border-w: 1px;

  /* The one permitted elevation: real overlays only (modal, dropdown) */
  --pv2-overlay-shadow: 0 6px 20px rgba(0,0,0,.16);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
.pv2-root, .pv2-root *, .pv2-root *::before, .pv2-root *::after{ box-sizing:border-box; }
.pv2-root{
  background:var(--pv2-ground);
  color:var(--pv2-ink);
  font-family:var(--pv2-font-sans);
  font-size:var(--pv2-text-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.pv2-root h1,.pv2-root h2,.pv2-root h3,.pv2-root p,.pv2-root dl,.pv2-root dd,.pv2-root dt,.pv2-root figure,.pv2-root ul,.pv2-root ol{ margin:0; padding:0; }
.pv2-root ul, .pv2-root ol{ list-style:none; }
/* Deliberately no `color` set on the bare `button`/`input` tag here: at
   this selector's specificity (class + element) it would out-rank the
   single-class button/input variant rules below (e.g. .pv2-btn--primary),
   silently discarding their text colour. Every control sets its own
   color explicitly at the class level instead; unstyled native buttons
   (e.g. .pv2-account__btn) fall back to the browser's default button
   text colour, which reads as graphite on our light surfaces. */
.pv2-root button, .pv2-root input, .pv2-root select, .pv2-root textarea{ font-family:inherit; font-size:inherit; }
.pv2-root a{ color:var(--pv2-ink); text-decoration:none; }
.pv2-root a.pv2-link{ color:var(--pv2-brand); text-decoration:none; }
.pv2-root a.pv2-link:hover{ color:var(--pv2-brand-hover); text-decoration:underline; text-decoration-thickness:1px; }
.pv2-root img{ max-width:100%; }

.pv2-root :focus{ outline:none; }
.pv2-root :focus-visible{
  outline:2px solid var(--pv2-brand);
  outline-offset:2px;
}

.pv2-tabular{ font-variant-numeric:tabular-nums; }
.pv2-mono{ font-family:var(--pv2-font-mono); }
.pv2-vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --------------------------------------------------------------------------
   3. SHELL / TOPBAR (mock B density)
   -------------------------------------------------------------------------- */
.pv2-shell{ min-height:100vh; display:flex; flex-direction:column; }

.pv2-topbar{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  border-bottom:var(--pv2-border-w) solid var(--pv2-border-strong);
  background:var(--pv2-surface);
}
.pv2-topbar > *{ padding:var(--pv2-space-3) var(--pv2-space-5); display:flex; align-items:center; }

.pv2-brand{
  gap:var(--pv2-space-3);
  border-right:var(--pv2-border-w) solid var(--pv2-border);
  font-family:var(--pv2-font-mono);
  color:var(--pv2-ink);
}
.pv2-brand__mark{ width:18px; height:18px; flex:none; display:block; }
.pv2-brand__logo{ display:block; width:auto; flex:none; }
.pv2-brand__name{ font-size:var(--pv2-text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.pv2-brand__name b{ font-weight:700; }

.pv2-nav{ gap:2px; border-right:var(--pv2-border-w) solid var(--pv2-border); flex:1; flex-wrap:wrap; }
.pv2-nav__link{
  font-size:var(--pv2-text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pv2-muted); padding:var(--pv2-space-2) var(--pv2-space-3);
  border:var(--pv2-border-w) solid transparent;
}
.pv2-nav__link:hover{ color:var(--pv2-ink); }
.pv2-nav__link.is-active{ color:var(--pv2-brand); border-color:var(--pv2-brand); background:var(--pv2-brand-soft); }

.pv2-clock{
  border-right:var(--pv2-border-w) solid var(--pv2-border);
  font-family:var(--pv2-font-mono); font-size:var(--pv2-text-xs); color:var(--pv2-muted);
}

/* "Update available" is neutral information — pure graphite, never amber,
   and NEVER the warning-triangle glyph (that shape is reserved for genuine
   warning/error alerts, section 10 below). A plain "↓ n" count communicates
   "n updates exist" without reading as an alarm. */
.pv2-updateflag{
  border-right:var(--pv2-border-w) solid var(--pv2-border);
  gap:var(--pv2-space-2);
  color:var(--pv2-ink);
}
.pv2-updateflag__count{ font-size:var(--pv2-text-xs); font-weight:700; letter-spacing:.02em; }

.pv2-account{ position:relative; gap:var(--pv2-space-2); }
.pv2-account__btn{
  display:flex; align-items:center; gap:var(--pv2-space-2);
  background:none; border:none; cursor:pointer; padding:0; color:var(--pv2-ink);
}
.pv2-account__who{ font-size:var(--pv2-text-xs); font-weight:600; letter-spacing:.02em; text-align:left; line-height:1.3; }
.pv2-account__org{ display:block; font-weight:400; color:var(--pv2-muted); }
.pv2-account__id{
  width:22px; height:22px; border:var(--pv2-border-w) solid var(--pv2-border-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--pv2-font-mono); font-size:var(--pv2-text-2xs); font-weight:700; flex:none;
}
.pv2-account__chev{ color:var(--pv2-muted); font-size:var(--pv2-text-xs); }
.pv2-account__menu{
  position:absolute; top:100%; right:0; margin-top:1px; min-width:190px;
  background:var(--pv2-surface); border:var(--pv2-border-w) solid var(--pv2-border-strong);
  box-shadow:var(--pv2-overlay-shadow);
  z-index:20;
}
.pv2-account__menu[hidden]{ display:none; }
.pv2-account__menu a{
  display:block; padding:var(--pv2-space-3) var(--pv2-space-4);
  font-size:var(--pv2-text-sm); color:var(--pv2-ink);
  border-bottom:var(--pv2-border-w) solid var(--pv2-border);
}
.pv2-account__menu a:last-child{ border-bottom:none; }
.pv2-account__menu a:hover{ background:var(--pv2-surface-alt); }

/* Readout strip — key fleet counters, always visible under the topbar */
.pv2-readout{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  border-bottom:var(--pv2-border-w) solid var(--pv2-border-strong);
  background:var(--pv2-surface-alt);
}
.pv2-readout__cell{ padding:var(--pv2-space-3) var(--pv2-space-5); border-right:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-readout__cell:last-child{ border-right:none; }
.pv2-readout__k{ display:block; font-size:var(--pv2-text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--pv2-muted); margin-bottom:3px; }
.pv2-readout__v{ display:block; font-family:var(--pv2-font-mono); font-size:var(--pv2-text-lg); font-weight:600; }

.pv2-main{ flex:1; }
.pv2-page{ padding:var(--pv2-space-6) var(--pv2-space-6) var(--pv2-space-9); max-width:1400px; margin:0 auto; width:100%; }

/* --------------------------------------------------------------------------
   4. BREADCRUMB
   -------------------------------------------------------------------------- */
.pv2-breadcrumb{
  display:flex; align-items:center; gap:var(--pv2-space-2); flex-wrap:wrap;
  padding:var(--pv2-space-4) var(--pv2-space-6) 0;
  font-size:var(--pv2-text-sm); color:var(--pv2-muted);
  max-width:1400px; margin:0 auto; width:100%;
}
.pv2-breadcrumb a{ color:var(--pv2-muted); }
.pv2-breadcrumb a:hover{ color:var(--pv2-ink); text-decoration:underline; }
.pv2-breadcrumb__sep{ color:var(--pv2-border-strong); }
.pv2-breadcrumb__current{ color:var(--pv2-ink); font-weight:600; }

/* --------------------------------------------------------------------------
   5. FLEET GRID + CARD
   -------------------------------------------------------------------------- */
.pv2-fleet-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--pv2-space-3); margin-bottom:var(--pv2-space-4); flex-wrap:wrap; }
.pv2-fleet-head h1{ font-size:var(--pv2-text-xl); font-weight:700; }
.pv2-fleet-head p{ margin-top:var(--pv2-space-1); font-size:var(--pv2-text-sm); color:var(--pv2-muted); }
.pv2-fleet-head__count{ font-family:var(--pv2-font-mono); font-size:var(--pv2-text-xs); color:var(--pv2-muted); }

.pv2-fleet{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--pv2-border-w);
  background:var(--pv2-border-strong);
  border:var(--pv2-border-w) solid var(--pv2-border-strong);
}
@media (max-width:1280px){ .pv2-fleet{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .pv2-fleet{ grid-template-columns:1fr; } }

.pv2-card{
  background:var(--pv2-surface);
  padding:var(--pv2-space-4);
  display:flex;
  flex-direction:column;
  gap:var(--pv2-space-3);
}
.pv2-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--pv2-space-2); }
.pv2-card__name{ font-size:var(--pv2-text-md); font-weight:700; }
.pv2-card__org{ font-size:var(--pv2-text-xs); color:var(--pv2-muted); margin-top:2px; }
.pv2-card.is-revoked .pv2-card__name{ color:var(--pv2-muted); text-decoration:line-through; text-decoration-color:var(--pv2-red-border); }

/* Status glyph set — glyph + text always; colour never carries the meaning alone. */
.pv2-status{ display:inline-flex; align-items:center; gap:var(--pv2-space-2); font-size:var(--pv2-text-xs); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.pv2-status svg{ flex:none; display:block; }
.pv2-status__sub{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--pv2-faint); }
.pv2-status--online{ color:var(--pv2-ink); }
.pv2-status--offline{ color:var(--pv2-muted); }
.pv2-status--pending{ color:var(--pv2-muted); }
.pv2-status--update{ color:var(--pv2-ink); }         /* neutral — amber ruling */
.pv2-status--revoked{ color:var(--pv2-red-ink); }     /* revoked is a genuine flag, red permitted */
.pv2-status--warning{ color:var(--pv2-amber-ink); }
.pv2-status--error{ color:var(--pv2-red-ink); }

.pv2-specs{ border-top:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-spec-row{
  display:grid; grid-template-columns:96px 1fr; gap:var(--pv2-space-2);
  padding:var(--pv2-space-1) 0; border-bottom:var(--pv2-border-w) solid var(--pv2-border);
}
.pv2-spec-row:last-child{ border-bottom:none; }
.pv2-spec-row__k{ font-size:var(--pv2-text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--pv2-muted); align-self:center; }
.pv2-spec-row__v{ font-family:var(--pv2-font-mono); font-size:var(--pv2-text-sm); text-align:right; }
.pv2-spec-row__v.is-dim{ color:var(--pv2-faint); }
.pv2-spec-row__v.is-flag{ color:var(--pv2-ink); font-weight:600; } /* version-change flag: neutral, per amber ruling */

.pv2-tag{
  display:inline-flex; align-items:center; gap:var(--pv2-space-1);
  border:var(--pv2-border-w) solid var(--pv2-border-strong);
  padding:2px var(--pv2-space-2);
  font-size:var(--pv2-text-2xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--pv2-ink); align-self:flex-start;
}

.pv2-card__actions{ display:flex; flex-wrap:wrap; gap:var(--pv2-space-2); margin-top:auto; padding-top:2px; }
.pv2-card__actions .pv2-btn{ flex:1 1 auto; }

/* --------------------------------------------------------------------------
   6. BUTTONS — primary = brand-blue fill (the one accent, D-51 brand
   amendment 2026-09-24); secondary = white + border. Destructive keeps a
   white surface — no other coloured button surfaces.
   -------------------------------------------------------------------------- */
.pv2-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--pv2-space-2);
  border-radius:var(--pv2-radius);
  border:var(--pv2-border-w) solid var(--pv2-border-strong);
  background:var(--pv2-surface);
  color:var(--pv2-ink);
  padding:var(--pv2-space-2) var(--pv2-space-4);
  font-size:var(--pv2-text-sm);
  font-weight:600;
  line-height:1.3;
  cursor:pointer;
  white-space:nowrap;
}
.pv2-btn:hover{ background:var(--pv2-surface-alt); }
.pv2-btn:disabled,.pv2-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.pv2-btn:disabled:hover,.pv2-btn[aria-disabled="true"]:hover{ background:var(--pv2-surface); }

.pv2-btn--primary{ background:var(--pv2-brand); border-color:var(--pv2-brand); color:var(--pv2-on-brand); }
.pv2-btn--primary:hover{ background:var(--pv2-brand-hover); border-color:var(--pv2-brand-hover); }
.pv2-btn--primary:disabled:hover{ background:var(--pv2-brand); }

.pv2-btn--secondary{ background:var(--pv2-surface); border-color:var(--pv2-border-strong); color:var(--pv2-ink); }
.pv2-btn--secondary:hover{ background:var(--pv2-surface-alt); border-color:var(--pv2-ink); }

.pv2-btn--destructive{ background:var(--pv2-surface); border-color:var(--pv2-red-border); color:var(--pv2-red-ink); }
.pv2-btn--destructive:hover{ background:var(--pv2-red-bg); }

.pv2-btn--quiet{ border-color:transparent; background:transparent; }
.pv2-btn--quiet:hover{ background:var(--pv2-surface-alt); }

.pv2-btn--sm{ padding:var(--pv2-space-1) var(--pv2-space-3); font-size:var(--pv2-text-xs); }
.pv2-btn--block{ width:100%; }
.pv2-btn .icon{ width:14px; height:14px; }

.pv2-textlink{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--pv2-brand); font-size:var(--pv2-text-sm); font-weight:600;
  text-underline-offset:3px;
}
.pv2-textlink:hover{ color:var(--pv2-brand-hover); text-decoration:underline; }
.pv2-textlink--destructive{ color:var(--pv2-red-ink); }

/* --------------------------------------------------------------------------
   7. BADGE
   -------------------------------------------------------------------------- */
.pv2-badge{
  display:inline-flex; align-items:center; gap:var(--pv2-space-1);
  border:var(--pv2-border-w) solid var(--pv2-border-strong);
  padding:1px var(--pv2-space-2);
  font-size:var(--pv2-text-2xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--pv2-ink); background:var(--pv2-surface-alt);
}
.pv2-badge--neutral{ color:var(--pv2-muted); border-color:var(--pv2-border); background:transparent; }
.pv2-badge--warning{ color:var(--pv2-amber-ink); border-color:var(--pv2-amber-border); background:var(--pv2-amber-bg); }
.pv2-badge--error{ color:var(--pv2-red-ink); border-color:var(--pv2-red-border); background:var(--pv2-red-bg); }

/* --------------------------------------------------------------------------
   8. FORM CONTROLS
   -------------------------------------------------------------------------- */
.pv2-field{ margin-top:var(--pv2-space-5); }
.pv2-field:first-child{ margin-top:0; }
.pv2-field label, .pv2-field__label{
  display:block; font-size:var(--pv2-text-2xs); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--pv2-muted); margin-bottom:var(--pv2-space-2);
}
.pv2-input, .pv2-select{
  width:100%;
  border:var(--pv2-border-w) solid var(--pv2-border-strong);
  border-radius:var(--pv2-radius);
  background:var(--pv2-surface);
  color:var(--pv2-ink);
  padding:var(--pv2-space-3) var(--pv2-space-3);
  font-size:var(--pv2-text-base);
}
.pv2-input::placeholder{ color:var(--pv2-faint); }
.pv2-input:hover, .pv2-select:hover{ border-color:var(--pv2-ink); }
.pv2-input:disabled, .pv2-select:disabled{ background:var(--pv2-surface-alt); color:var(--pv2-faint); cursor:not-allowed; }
.pv2-input.is-invalid, .pv2-select.is-invalid{ border-color:var(--pv2-red-border); }

/* background-size is NOT optional here: this data-URI SVG has no width/
   height attributes, so an unconstrained background renders it at the
   browser's default intrinsic size (300x150) — a chevron the size of the
   whole control (operator, 2026-09-27: "dropdown arrow size"). */
.pv2-select{
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c5c58' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--pv2-space-3) center; background-size:10px 6px;
  padding-right:var(--pv2-space-7);
}

.pv2-field__hint{ margin-top:var(--pv2-space-2); font-size:var(--pv2-text-sm); color:var(--pv2-faint); line-height:1.5; }
.pv2-field__hint--error{ color:var(--pv2-red-ink); }

/* `label.pv2-checkbox` (not just `.pv2-checkbox`): this IS a <label>, and
   when it's nested in a .pv2-field it would otherwise be caught by the
   higher-specificity ".pv2-field label" eyebrow-text rule above. */
label.pv2-checkbox{
  display:flex; align-items:flex-start; gap:var(--pv2-space-2);
  font-size:var(--pv2-text-base); font-weight:400; letter-spacing:normal;
  text-transform:none; color:var(--pv2-ink); cursor:pointer;
}
.pv2-checkbox input[type="checkbox"]{
  appearance:none; width:16px; height:16px; flex:none; margin-top:2px;
  border:var(--pv2-border-w) solid var(--pv2-border-strong); background:var(--pv2-surface);
  border-radius:var(--pv2-radius); position:relative; cursor:pointer;
}
.pv2-checkbox input[type="checkbox"]:checked{ background:var(--pv2-ink); border-color:var(--pv2-ink); }
.pv2-checkbox input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:5px; height:9px;
  border:solid var(--pv2-on-ink); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.pv2-checkbox input[type="checkbox"]:disabled{ background:var(--pv2-surface-alt); border-color:var(--pv2-border); cursor:not-allowed; }
.pv2-checkbox__label{ color:var(--pv2-ink); }
.pv2-checkbox__label small{ display:block; color:var(--pv2-muted); font-size:var(--pv2-text-sm); margin-top:2px; }

.pv2-file{
  border:1px dashed var(--pv2-border-strong); background:var(--pv2-surface-alt);
  padding:var(--pv2-space-5); text-align:center; font-size:var(--pv2-text-sm); color:var(--pv2-muted);
  display:flex; flex-direction:column; align-items:center; gap:var(--pv2-space-2);
}
.pv2-file input[type="file"]{ font-size:var(--pv2-text-sm); }
.pv2-file:focus-within{ outline:2px solid var(--pv2-brand); outline-offset:2px; }

/* --------------------------------------------------------------------------
   9. TABLE
   -------------------------------------------------------------------------- */
.pv2-table-wrap{ border:var(--pv2-border-w) solid var(--pv2-border-strong); overflow-x:auto; }
.pv2-table{ width:100%; border-collapse:collapse; font-size:var(--pv2-text-sm); min-width:640px; }
.pv2-table th, .pv2-table td{ padding:var(--pv2-space-3) var(--pv2-space-4); text-align:left; border-bottom:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-table thead th{
  font-size:var(--pv2-text-2xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pv2-muted); background:var(--pv2-surface-alt); border-bottom:var(--pv2-border-w) solid var(--pv2-border-strong);
}
.pv2-table tbody tr:nth-child(odd){ background:var(--pv2-surface-alt); }
.pv2-table tbody tr:last-child td{ border-bottom:none; }
.pv2-table tbody tr:hover{ background:var(--pv2-ground); }
.pv2-table td.is-dim{ color:var(--pv2-faint); }
.pv2-table .pv2-tabular{ font-family:var(--pv2-font-mono); }

/* --------------------------------------------------------------------------
   10. ALERT — info / warning / error. Warning/error are the ONLY amber/red use
   outside the destructive button + revoked status.
   -------------------------------------------------------------------------- */
.pv2-alert{
  display:flex; gap:var(--pv2-space-3);
  padding:var(--pv2-space-4); border:var(--pv2-border-w) solid var(--pv2-border-strong);
  border-left-width:3px;
  font-size:var(--pv2-text-sm); color:var(--pv2-ink-2); background:var(--pv2-surface-alt);
}
.pv2-alert svg{ flex:none; margin-top:1px; }
.pv2-alert strong{ display:block; margin-bottom:2px; font-size:var(--pv2-text-base); }
.pv2-alert--info{ border-left-color:var(--pv2-border-strong); }
.pv2-alert--warning{ border-left-color:var(--pv2-amber-border); background:var(--pv2-amber-bg); color:var(--pv2-amber-ink); }
.pv2-alert--error{ border-left-color:var(--pv2-red-border); background:var(--pv2-red-bg); color:var(--pv2-red-ink); }
.pv2-alert__body{ display:block; flex:1 1 auto; min-width:0; }

/* fix/panel-v2-update-liveness (+ 2026-09-27 legibility pass): a subtle
   "still polling" pulse (never colour — the dot is currentColor, so it
   inherits whatever alert state it sits in), the Queued→Downloading→
   Verifying→Applying→Done pipeline readout, and the "last checked" / give-up
   row underneath it. All monochrome; amber/red only ever come from the
   parent .pv2-alert--warning/--error already applied above. */
.pv2-livedot{
  display:inline-block; width:6px; height:6px; margin:0 var(--pv2-space-2) 2px 0;
  background:currentColor; vertical-align:middle; animation:pv2-pulse 1.4s ease-in-out infinite;
}
/* min-width:0 on both the track and each item is load-bearing: without it a
   nowrap label's intrinsic width wins over the flex item's shrunk box and
   the LAST node (Done/Failed) rendered past the card's right edge at narrow
   card widths (operator: "no elephant-sized boxes" — this was the opposite
   defect, a box too small for its own label). */
.pv2-steps{ display:flex; align-items:flex-start; flex-wrap:wrap; row-gap:var(--pv2-space-3); margin-top:var(--pv2-space-4); min-width:0; padding:0 var(--pv2-space-2); box-sizing:border-box; }
.pv2-steps__item{ display:flex; align-items:center; gap:var(--pv2-space-2); flex:1 1 0; min-width:0; }
.pv2-steps__item:not(:last-child){ flex:1 1 auto; }
/* The last node (Done/Failed) shares the same flex-grow as every other item
   while the connectors ahead of it soak up the container's free space — at
   wide (1400px) card widths that free space still lands partly on the last
   item itself, growing its box past the padding this container reserves and
   overflowing its label to, or past, the right edge (operator: "Failed"
   sitting on the panel edge). Pin it to its own content width instead; the
   growable connectors before it take up any leftover room, so this node
   never grows wider than "dot + label" and the .pv2-steps padding above is
   what actually keeps it clear of the edge. */
.pv2-steps__item:last-child{ flex:0 0 auto; }
.pv2-steps__item:not(:last-child)::after{
  content:""; flex:1 1 auto; height:2px; background:var(--pv2-border); margin:0 var(--pv2-space-2);
}
.pv2-steps__item.is-done:not(:last-child)::after{ background:var(--pv2-ink); }
/* Square dot, a touch larger than before so state actually reads at a
   glance; relatively positioned so done/failed/blocked can drop a glyph
   inside it instead of relying on colour alone (operator: "the colours are
   awful", "can't feel it when it changes"). */
.pv2-steps__dot{
  width:14px; height:14px; flex:none; position:relative;
  border:var(--pv2-border-w) solid var(--pv2-border-strong); background:var(--pv2-surface);
}
/* was white-space:nowrap, which is exactly what forced the last node wider
   than its shrunk flex box and off the edge of the card; normal wrapping
   plus break-word lets a long label ("Downloading") fold onto a second line
   at the 390px phone width instead of overflowing. */
.pv2-steps__label{
  font-size:var(--pv2-text-sm); font-weight:500; color:var(--pv2-faint);
  white-space:normal; overflow-wrap:break-word; word-break:normal;
}
.pv2-steps__item.is-done .pv2-steps__dot{ background:var(--pv2-ink); border-color:var(--pv2-ink); }
.pv2-steps__item.is-done .pv2-steps__dot::after{
  content:"✓"; position:absolute; inset:0; text-align:center; line-height:12px;
  font-size:10px; font-weight:700; color:var(--pv2-on-ink);
}
.pv2-steps__item.is-done .pv2-steps__label{ color:var(--pv2-muted); }
/* The active step: solid fill (never faded — pv2-pulse's opacity dip made a
   solid black square read as a "weak gray square" whenever a screenshot or a
   glance caught the low point of the cycle, operator: "barely
   distinguishable"), a size bump, and a soft expanding ring so motion (not
   colour, and not a dimmer square) is what says "this one is happening right
   now". The connector INTO this step is already filled solid because the
   step before it carries .is-done. */
.pv2-steps__item.is-current .pv2-steps__dot{
  width:16px; height:16px; border-width:2px;
  background:var(--pv2-ink); border-color:var(--pv2-ink);
  animation:pv2-ring 1.4s ease-out infinite;
}
.pv2-steps__item.is-current .pv2-steps__label{ color:var(--pv2-ink); font-weight:700; }
.pv2-steps__item.is-blocked .pv2-steps__dot{ background:var(--pv2-amber-bg); border-color:var(--pv2-amber-border); }
.pv2-steps__item.is-blocked .pv2-steps__dot::after{
  content:"!"; position:absolute; inset:0; text-align:center; line-height:12px;
  font-size:10px; font-weight:700; color:var(--pv2-amber-ink);
}
.pv2-steps__item.is-blocked .pv2-steps__label{ color:var(--pv2-amber-ink); font-weight:700; }
.pv2-steps__item.is-failed .pv2-steps__dot{ background:var(--pv2-red-bg); border-color:var(--pv2-red-border); }
.pv2-steps__item.is-failed .pv2-steps__dot::after{
  content:"✕"; position:absolute; inset:0; text-align:center; line-height:12px;
  font-size:9px; font-weight:700; color:var(--pv2-red-ink);
}
.pv2-steps__item.is-failed .pv2-steps__label{ color:var(--pv2-red-ink); font-weight:700; }
@keyframes pv2-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes pv2-ring{
  0%{ box-shadow:0 0 0 0 rgba(23,23,26,.32); }
  70%{ box-shadow:0 0 0 6px rgba(23,23,26,0); }
  100%{ box-shadow:0 0 0 0 rgba(23,23,26,0); }
}
@media (prefers-reduced-motion: reduce){
  .pv2-livedot, .pv2-steps__item.is-current .pv2-steps__dot{ animation:none; }
}
.pv2-progress-meta{
  margin-top:var(--pv2-space-3); display:flex; align-items:center; gap:var(--pv2-space-3); flex-wrap:wrap;
  font-size:var(--pv2-text-2xs); color:var(--pv2-faint);
}

/* --------------------------------------------------------------------------
   11. MODAL / OVERLAY — the one place a real shadow is allowed.
   -------------------------------------------------------------------------- */
.pv2-overlay{
  position:fixed; inset:0; background:rgba(23,23,26,.5);
  display:flex; align-items:center; justify-content:center; padding:var(--pv2-space-6);
  z-index:100;
}
.pv2-overlay[hidden]{ display:none; }
.pv2-modal{
  width:480px; max-width:100%; max-height:90vh; overflow-y:auto;
  background:var(--pv2-surface); border:var(--pv2-border-w) solid var(--pv2-border-strong);
  box-shadow:var(--pv2-overlay-shadow);
}
.pv2-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--pv2-space-3); padding:var(--pv2-space-5); border-bottom:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-modal__head h2{ font-size:var(--pv2-text-lg); font-weight:700; }
.pv2-modal__close{ background:none; border:none; cursor:pointer; color:var(--pv2-muted); padding:var(--pv2-space-1); line-height:0; }
.pv2-modal__close:hover{ color:var(--pv2-ink); }
.pv2-modal__body{ padding:var(--pv2-space-5); font-size:var(--pv2-text-base); color:var(--pv2-ink-2); }
.pv2-modal__foot{ display:flex; justify-content:flex-end; gap:var(--pv2-space-2); padding:var(--pv2-space-5); border-top:var(--pv2-border-w) solid var(--pv2-border); }

/* Dropdown menu (also an overlay — shadow permitted) */
.pv2-dropdown{
  position:absolute; min-width:180px; background:var(--pv2-surface);
  border:var(--pv2-border-w) solid var(--pv2-border-strong); box-shadow:var(--pv2-overlay-shadow); z-index:20;
}
.pv2-dropdown[hidden]{ display:none; }
.pv2-dropdown a, .pv2-dropdown button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:var(--pv2-space-3) var(--pv2-space-4); font-size:var(--pv2-text-sm); color:var(--pv2-ink);
  border-bottom:var(--pv2-border-w) solid var(--pv2-border);
}
.pv2-dropdown a:last-child, .pv2-dropdown button:last-child{ border-bottom:none; }
.pv2-dropdown a:hover, .pv2-dropdown button:hover{ background:var(--pv2-surface-alt); }

/* --------------------------------------------------------------------------
   12. EMPTY STATE
   -------------------------------------------------------------------------- */
.pv2-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--pv2-space-3);
  padding:var(--pv2-space-9) var(--pv2-space-5);
  border:var(--pv2-border-w) solid var(--pv2-border); background:var(--pv2-surface-alt);
}
.pv2-empty svg{ color:var(--pv2-border-strong); width:32px; height:32px; }
.pv2-empty h3{ font-size:var(--pv2-text-md); font-weight:700; }
.pv2-empty p{ font-size:var(--pv2-text-sm); color:var(--pv2-muted); max-width:44ch; }

/* --------------------------------------------------------------------------
   13. PAGINATION
   -------------------------------------------------------------------------- */
.pv2-pagination{ display:flex; align-items:center; justify-content:space-between; gap:var(--pv2-space-4); padding-top:var(--pv2-space-4); flex-wrap:wrap; }
.pv2-pagination__info{ font-size:var(--pv2-text-sm); color:var(--pv2-muted); }
.pv2-pagination__controls{ display:flex; gap:2px; }
.pv2-pagination__btn{
  min-width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:var(--pv2-border-w) solid var(--pv2-border-strong); background:var(--pv2-surface); color:var(--pv2-ink);
  font-size:var(--pv2-text-sm); font-family:var(--pv2-font-mono); cursor:pointer;
}
.pv2-pagination__btn:hover{ background:var(--pv2-surface-alt); }
.pv2-pagination__btn.is-current{ background:var(--pv2-ink); border-color:var(--pv2-ink); color:var(--pv2-on-ink); cursor:default; }
.pv2-pagination__btn:disabled{ opacity:.4; cursor:not-allowed; }

/* --------------------------------------------------------------------------
   14. TOAST
   -------------------------------------------------------------------------- */
.pv2-toast-region{ position:fixed; bottom:var(--pv2-space-6); right:var(--pv2-space-6); display:flex; flex-direction:column; gap:var(--pv2-space-2); z-index:200; max-width:360px; }
.pv2-toast{
  display:flex; align-items:flex-start; gap:var(--pv2-space-3);
  background:var(--pv2-ink); color:var(--pv2-on-ink);
  border:var(--pv2-border-w) solid #000; padding:var(--pv2-space-3) var(--pv2-space-4);
  box-shadow:var(--pv2-overlay-shadow); font-size:var(--pv2-text-sm);
}
.pv2-toast--warning{ background:var(--pv2-amber-bg); color:var(--pv2-amber-ink); border-color:var(--pv2-amber-border); }
.pv2-toast--error{ background:var(--pv2-red-bg); color:var(--pv2-red-ink); border-color:var(--pv2-red-border); }
.pv2-toast__close{ margin-left:auto; background:none; border:none; color:inherit; cursor:pointer; opacity:.75; }
.pv2-toast__close:hover{ opacity:1; }

/* --------------------------------------------------------------------------
   15. BOX CONSOLE — mock A's roomier spacing, mock B's structural language.
   -------------------------------------------------------------------------- */
.pv2-consolehead{ display:flex; align-items:baseline; gap:var(--pv2-space-4); flex-wrap:wrap; padding-bottom:var(--pv2-space-6); }
.pv2-consolehead h1{ font-size:var(--pv2-text-xl); font-weight:700; }

.pv2-console{ display:flex; align-items:flex-start; border-top:var(--pv2-border-w) solid var(--pv2-border-strong); background:var(--pv2-surface); }
.pv2-console__nav{ width:220px; flex:none; padding:var(--pv2-space-5) 0; border-right:var(--pv2-border-w) solid var(--pv2-border-strong); background:var(--pv2-surface-alt); }
.pv2-console__nav a, .pv2-console__nav .pv2-subtoggle{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  padding:var(--pv2-space-3) var(--pv2-space-5);
  font-size:var(--pv2-text-sm); font-weight:600; color:var(--pv2-ink-2);
  border-left:2px solid transparent; background:none; border-top:none; border-right:none; border-bottom:none;
  cursor:pointer;
}
.pv2-console__nav a:hover, .pv2-console__nav .pv2-subtoggle:hover{ color:var(--pv2-ink); background:var(--pv2-surface); }
.pv2-console__nav a.is-current{ color:var(--pv2-ink); border-left-color:var(--pv2-ink); background:var(--pv2-surface); }
.pv2-console__sub{ padding-left:var(--pv2-space-3); }
.pv2-console__sub[hidden]{ display:none; }
.pv2-console__sub a{ padding-left:var(--pv2-space-8); font-size:var(--pv2-text-sm); font-weight:400; color:var(--pv2-muted); }
.pv2-subtoggle__chev{ color:var(--pv2-muted); font-size:var(--pv2-text-xs); transition:transform .12s ease; }
.pv2-subtoggle[aria-expanded="true"] .pv2-subtoggle__chev{ transform:rotate(90deg); }

.pv2-console__body{ flex:1; min-width:0; padding:var(--pv2-space-7) var(--pv2-space-8) var(--pv2-space-9); max-width:820px; }

.pv2-section{ margin-bottom:var(--pv2-space-8); }
.pv2-section h2{ font-size:var(--pv2-text-2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pv2-muted); border-bottom:var(--pv2-border-w) solid var(--pv2-border-strong); padding-bottom:var(--pv2-space-2); margin-bottom:var(--pv2-space-4); }

.pv2-deflist{ border-top:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-deflist__row{ display:flex; gap:var(--pv2-space-4); padding:var(--pv2-space-3) 0; border-bottom:var(--pv2-border-w) solid var(--pv2-border); font-size:var(--pv2-text-base); }
.pv2-deflist__row dt{ width:180px; flex:none; color:var(--pv2-muted); }
.pv2-deflist__row dd{ color:var(--pv2-ink-2); }
.pv2-deflist__row dd.is-empty{ color:var(--pv2-faint); font-style:italic; }

/* Update block (redesigned 2026-09-27 — operator: "very bad… huge windows…
   can't feel when it changes"). One compact card: a header BAR carries the
   state (title + version) and every action — Apply/Don't-apply/Undo AND
   Check now — on the same line, so there's no second "actions" panel
   floating below. The pin and the progress readout are thin inline rows,
   not nested bordered boxes. */
.pv2-update{ border:var(--pv2-border-w) solid var(--pv2-border-strong); padding:var(--pv2-space-4) var(--pv2-space-5); }
.pv2-update__bar{ display:flex; justify-content:space-between; align-items:center; gap:var(--pv2-space-4); flex-wrap:wrap; }
.pv2-update__state{ display:flex; align-items:baseline; gap:var(--pv2-space-3); flex-wrap:wrap; }
.pv2-update__state h3{ font-size:var(--pv2-text-md); font-weight:700; }
.pv2-update__version{ font-family:var(--pv2-font-mono); font-size:var(--pv2-text-sm); color:var(--pv2-muted); }
.pv2-update__actions{ display:flex; gap:var(--pv2-space-2); flex-wrap:wrap; }
.pv2-update__desc{ margin-top:var(--pv2-space-3); font-size:var(--pv2-text-base); color:var(--pv2-ink-2); max-width:64ch; line-height:1.6; }
.pv2-update__desc svg{ width:14px; height:14px; vertical-align:-2px; margin-right:var(--pv2-space-1); color:var(--pv2-muted); }
.pv2-update__desc.is-warning{ color:var(--pv2-amber-ink); }
.pv2-update__desc.is-warning svg{ color:var(--pv2-amber-border); }

/* Deploy pin — a single slim inline row (was a whole second bordered panel,
   and duplicated a third time as an Identity row elsewhere — both gone). */
.pv2-update__pin{
  display:flex; align-items:center; gap:var(--pv2-space-3); flex-wrap:wrap;
  margin-top:var(--pv2-space-4); padding-top:var(--pv2-space-3);
  border-top:var(--pv2-border-w) solid var(--pv2-border); font-size:var(--pv2-text-sm); color:var(--pv2-ink-2);
}
.pv2-update__pin svg{ width:14px; height:14px; flex:none; color:var(--pv2-muted); }
.pv2-update__pin-text{ flex:1 1 auto; min-width:0; }
.pv2-update__pin-clear{ flex:none; }

/* Progress readout — same alert-state colouring as before (info/warning/
   error), just lighter: a top hairline instead of a full tinted box, tighter
   padding, no left accent bar duplicating the card's own border. */
.pv2-update__progress{
  margin-top:var(--pv2-space-4); padding:var(--pv2-space-3) 0 0; border:none;
  border-top:var(--pv2-border-w) solid var(--pv2-border); border-radius:0;
}
.pv2-alert.pv2-update__progress.pv2-alert--warning{ border-top-width:2px; border-top-color:var(--pv2-amber-border); }
.pv2-alert.pv2-update__progress.pv2-alert--error{ border-top-width:2px; border-top-color:var(--pv2-red-border); }
.pv2-update__progress .pv2-alert__body strong{ font-size:var(--pv2-text-base); }
.pv2-update__error{
  margin-top:var(--pv2-space-2); font-size:var(--pv2-text-sm); font-weight:600; color:var(--pv2-red-ink);
}
.pv2-update__error[hidden]{ display:none; }
/* Failure copy needs its own breathing room below the stepper, not glued to
   it (operator, 2026-09-27) — a wider top margin plus its own line (the
   error text was already block-level; the gap was just too tight).
   Two classes, not one: .pv2-root p{margin:0} (the reset near the top of
   this file) is a class+tag selector (0,1,1) — a single-class selector here
   loses to it regardless of source order, so the margin silently collapsed
   back to 0 and this rule never did anything. */
.pv2-update__error.pv2-update__error--spaced{ margin-top:var(--pv2-space-4); display:block; }

/* Card never overflows at phone width: past this point the 5-node stepper
   stacks one-per-row instead of trying to fit five labels on one line. */
@media (max-width:480px){
  .pv2-steps{ flex-direction:column; align-items:stretch; row-gap:var(--pv2-space-2); }
  .pv2-steps__item{ flex:none; }
  .pv2-steps__item:not(:last-child)::after{ content:none; }
}

.pv2-activity{ border-top:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-activity__row{ display:flex; gap:var(--pv2-space-5); padding:var(--pv2-space-3) 0; border-bottom:var(--pv2-border-w) solid var(--pv2-border); font-size:var(--pv2-text-base); }
.pv2-activity__row:last-child{ border-bottom:none; }
.pv2-activity__time{ width:170px; flex:none; color:var(--pv2-faint); font-family:var(--pv2-font-mono); font-size:var(--pv2-text-sm); }
.pv2-activity__text{ color:var(--pv2-ink-2); }

/* Settings page (redesigned 2026-09-27 — operator: "buttons, dropdown
   arrow size, and so [on]" bad). Full-width, full-height single-column
   inputs made the page feel oversized with nothing else on the change;
   fields are capped to a sane reading width and laid out as compact rows,
   and the danger zone is one row of primary actions plus a disclosure for
   the rarer/more destructive ones instead of five stacked full-width
   buttons each in their own row. */
/* Name and Description must sit on one baseline: .pv2-field's own
   margin-top:0 only fired via :first-child, which is true for Name (the
   first child of the row) but NOT Description (the second) — so Description
   carried a stray top margin and its input sat visibly lower, with Save
   ending up aligned under Name alone (operator, 2026-09-27: "looks like it
   saves just the Name"). Both fields are direct children of the same flex
   row, laid out side by side, not stacked, so neither should ever carry a
   stacking margin here. */
.pv2-settings__row{ display:flex; gap:var(--pv2-space-4); flex-wrap:wrap; }
.pv2-settings__row .pv2-field{ flex:1 1 220px; max-width:320px; margin-top:0; }
.pv2-settings__row .pv2-field--wide{ flex:2 1 320px; max-width:480px; }
/* Save sits under the pair, left-aligned (it's a block button after the
   row, not inside either field) — true once the row-height bug above no
   longer makes it look column-scoped. */
.pv2-settings__form .pv2-btn{ display:inline-flex; }
/* Constrain the SELECT, not the whole field: the old rule capped the field
   container (label + select + hint) at 280px, which squeezed the hint
   sentence into a narrow 3-line column. The hint now reads at normal
   paragraph width while the control stays compact. */
.pv2-field--narrow{ max-width:none; }
.pv2-field--narrow .pv2-select{ max-width:280px; }
.pv2-field--narrow .pv2-field__hint{ max-width:52ch; }
.pv2-settings__form .pv2-btn{ margin-top:var(--pv2-space-4); }
.pv2-settings__actions{ display:flex; flex-wrap:wrap; gap:var(--pv2-space-3); }
.pv2-settings__more{ margin-top:var(--pv2-space-4); }
.pv2-settings__more summary{
  cursor:pointer; font-size:var(--pv2-text-sm); font-weight:600; color:var(--pv2-muted);
  list-style:none; display:inline-flex; align-items:center; gap:var(--pv2-space-2);
}
.pv2-settings__more summary::-webkit-details-marker{ display:none; }
.pv2-settings__more summary::before{ content:"▸"; font-size:var(--pv2-text-xs); }
.pv2-settings__more[open] summary::before{ content:"▾"; }
.pv2-settings__more summary:hover{ color:var(--pv2-ink); }
.pv2-settings__more .pv2-settings__actions{ margin-top:var(--pv2-space-3); }
/* Inline "saving…" state — a pure client-side courtesy (see box_settings.html's
   script): the form still POSTs and redirects exactly as before, this just
   answers "did my click register" during the round trip. */
.pv2-btn[data-pv2-saving]{ opacity:.7; cursor:progress; }

/* --------------------------------------------------------------------------
   16. CLAIM WALL — full-page, no shell chrome beyond mark + logout.
   -------------------------------------------------------------------------- */
.pv2-claimwall{ min-height:100vh; display:flex; flex-direction:column; background:var(--pv2-surface); }
.pv2-claimwall__bar{ display:flex; align-items:center; justify-content:space-between; padding:var(--pv2-space-5) var(--pv2-space-6); border-bottom:var(--pv2-border-w) solid var(--pv2-border); }
.pv2-claimwall__body{ flex:1; display:flex; align-items:center; justify-content:center; padding:var(--pv2-space-8) var(--pv2-space-5); background:var(--pv2-surface-alt); }
.pv2-claimwall__panel{ width:420px; max-width:100%; background:var(--pv2-surface); border:var(--pv2-border-w) solid var(--pv2-border-strong); padding:var(--pv2-space-7); }
.pv2-claimwall__panel h1{ font-size:var(--pv2-text-2xl); font-weight:700; }
.pv2-claimwall__panel p.pv2-lede{ margin-top:var(--pv2-space-2); font-size:var(--pv2-text-base); color:var(--pv2-muted); max-width:46ch; line-height:1.6; }
.pv2-claimwall__foot{ margin-top:var(--pv2-space-5); font-size:var(--pv2-text-sm); color:var(--pv2-muted); }
.pv2-claimwall__foot a{ color:var(--pv2-ink); text-decoration:underline; text-underline-offset:2px; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE — must work down to 1024px; only .pv2-table-wrap scrolls.
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .pv2-readout{ grid-template-columns:repeat(3,1fr); }
  .pv2-readout__cell:nth-child(3){ border-right:none; }
}
@media (max-width:1024px){
  .pv2-nav{ display:none; }
  .pv2-console{ flex-direction:column; }
  .pv2-console__nav{ width:100%; border-right:none; border-bottom:var(--pv2-border-w) solid var(--pv2-border-strong); display:flex; flex-wrap:wrap; padding:var(--pv2-space-2); }
  .pv2-console__nav a, .pv2-console__nav .pv2-subtoggle{ width:auto; border-left:none; border-bottom:2px solid transparent; }
  .pv2-console__nav a.is-current{ border-left:none; border-bottom-color:var(--pv2-ink); }
  .pv2-console__sub{ width:100%; padding-left:0; }
  .pv2-console__body{ max-width:none; }
  .pv2-deflist__row{ flex-direction:column; gap:2px; }
  .pv2-deflist__row dt{ width:auto; }
}
@media (max-width:820px){
  .pv2-readout{ grid-template-columns:repeat(2,1fr); }
}

/* --------------------------------------------------------------------------
   18. ADMIN — Team / Serial batch inline forms (S5c). No new colours or
   radii: reuses --pv2-* tokens + existing .pv2-field/.pv2-input/.pv2-btn.
   -------------------------------------------------------------------------- */
.pv2-inline-form{ display:flex; gap:var(--pv2-space-3); align-items:flex-end; flex-wrap:wrap; }
.pv2-inline-form .pv2-field{ margin-top:0; }
.pv2-inline-form--grow{ flex:1 1 260px; min-width:0; }
.pv2-input--compact{ max-width:200px; }
.pv2-row-form{ display:flex; gap:var(--pv2-space-2); align-items:center; flex-wrap:wrap; }
.pv2-row-form .pv2-input{ max-width:200px; }
@media (max-width:1024px){
  .pv2-inline-form{ align-items:stretch; }
}

/* --------------------------------------------------------------------------
   19. DASHBOARD (D-51 dashboard slice) — readout strip at six cells, the
   attention list, the fleet-health chart and the two-column lower grid.
   No new colours, no radius, no shadow: every value below is an existing
   --pv2-* token or a layout primitive.
   -------------------------------------------------------------------------- */
.pv2-readout--6{ grid-template-columns:repeat(6,1fr); }
.pv2-dash-section{ margin-bottom:var(--pv2-space-7); }

/* Super-admin customer filter, sitting opposite the page title. */
.pv2-dash-filter{ display:flex; align-items:center; gap:var(--pv2-space-2); flex-wrap:wrap; }
.pv2-dash-filter .pv2-field__label{ margin:0; }
.pv2-dash-filter .pv2-select{ max-width:260px; }

/* The reason sentence next to an attention badge — secondary to the badge
   itself, which carries the glyph + label. */
.pv2-dash-reason{ color:var(--pv2-muted); font-size:var(--pv2-text-sm); }

/* Fleet-health chart. currentColor is the graphite ink of the surrounding
   section, so bars, baseline and labels are all one neutral tone — status
   here is carried by the labels under each bar, never by colour. */
.pv2-dash-chart{ display:block; max-width:560px; color:var(--pv2-ink); }
.pv2-dash-note{ margin-top:var(--pv2-space-3); font-size:var(--pv2-text-sm); color:var(--pv2-muted); max-width:62ch; line-height:1.6; }

/* Fleet health + Captive today sit side by side when there is room, and
   stack otherwise. A lone child (no captive data) spans the full width. */
.pv2-dash-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pv2-space-8); align-items:start; }
.pv2-dash-grid > *:only-child{ grid-column:1 / -1; }

@media (max-width:1180px){
  .pv2-readout--6{ grid-template-columns:repeat(3,1fr); }
  .pv2-readout--6 .pv2-readout__cell:nth-child(3){ border-right:none; }
}
@media (max-width:1024px){
  .pv2-dash-grid{ grid-template-columns:1fr; gap:var(--pv2-space-6); }
}
@media (max-width:820px){
  .pv2-readout--6{ grid-template-columns:repeat(2,1fr); }
  .pv2-readout--6 .pv2-readout__cell:nth-child(3){ border-right:var(--pv2-border-w) solid var(--pv2-border); }
}