/* ==========================================================================
   Ramp component layer — docs/design/master/design-standard.md §4–§8.
   Composes with tokens.css. Compiled Tailwind (frontend/) provides layout
   utilities; this file owns components + the Glass Cockpit recipes.
   Exactly three @keyframes app-wide: spin, shimmer, atmo-drift (§6.2).
   ========================================================================== */

/* --- Global grammar ------------------------------------------------------ */

.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Two-tone focus ring (design-standard §9 / GCT §6): --color-focus ring +
   --color-focus-halo offset. >=3:1 against glass, canvas AND deck by
   construction (single-hue rings can't clear all three). */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus-halo);
}

/* --- Buttons (§4.1) ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-heading);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 80ms ease, color 80ms ease,
              border-color 80ms ease;
}
.btn--sm { height: 32px; padding: 0 var(--space-3); }
.btn--md { height: 40px; padding: 0 var(--space-4); }
.btn--lg { height: 44px; padding: 0 var(--space-5); }

.btn--primary {
  background: var(--color-action);
  color: #FFFFFF; /* white on navy in both themes (§3.2 contrast table) */
  font-weight: 600;
}
.btn--primary:hover { background: var(--color-action-hover); }

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--secondary:hover { background: var(--color-surface-2); }

.btn--danger {
  background: var(--color-surface);
  border-color: var(--color-block);
  color: var(--color-block);
}
.btn--danger:hover { background: var(--color-block-bg); }
/* Filled red only inside confirm dialogs (§4.1). */
dialog .btn--danger.btn--fill {
  background: var(--color-block);
  border-color: var(--color-block);
  color: #FFFFFF;
}

.btn--ghost {
  background: transparent;
  color: var(--color-link);
}
.btn--ghost:hover { background: var(--color-surface-2); }

.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--color-text-secondary);
}
.btn--icon:hover { background: var(--color-surface-2); color: var(--color-text); }

.btn:active { transform: none; } /* nothing moves (§6.5) */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading: spinner replaces the icon slot; label stays so width holds. */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__icon { display: none; }
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Status pill (§4.2) — the canonical safety indicator ----------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-heading);
  white-space: nowrap;
}
.pill--md { padding: 6px 12px; }
.pill--svc     { color: var(--color-svc);     background: var(--color-svc-bg); }
.pill--warn    { color: var(--color-warn);    background: var(--color-warn-bg); }
.pill--block   { color: var(--color-block);   background: var(--color-block-bg); }
.pill--info    { color: var(--color-info);    background: var(--color-info-bg); }
.pill--neutral { color: var(--color-neutral); background: var(--color-neutral-bg); }

/* --- Verdict banner (§4.3) ------------------------------------------------ */

.verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border-left: 4px solid;
  border-radius: var(--radius-lg);
}
.verdict__icon { flex-shrink: 0; }
.verdict__body { flex: 1; min-width: 0; }
.verdict__title {
  font-size: var(--text-base);
  font-weight: 700; /* 700 reserved for verdict-banner titles (§1) */
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-heading);
}
.verdict__detail {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-prose);
}
.verdict__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
.verdict--svc   { border-color: var(--color-svc);   background: var(--color-svc-bg);   color: var(--color-svc); }
.verdict--warn  { border-color: var(--color-warn);  background: var(--color-warn-bg);  color: var(--color-warn); }
.verdict--block { border-color: var(--color-block); background: var(--color-block-bg); color: var(--color-block); }
.verdict--info  { border-color: var(--color-info);  background: var(--color-info-bg);  color: var(--color-info); }

/* --- Cards (§5.4) — Glass Cockpit allows one soft cool data-card shadow --- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  box-shadow: 0 3px 14px rgba(20, 45, 75, 0.06); /* soft + cool, never warm */
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-heading);
}
.card__error {
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-4);
  padding: var(--space-2) var(--card-pad);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-block-bg);
  color: var(--color-block);
  font-size: var(--text-sm);
}

/* --- Tables / list rows (§4.5) -------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-table);
}
.table th {
  padding: var(--cell-py) var(--cell-px);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-secondary);
  text-align: left;
}
.table td {
  padding: var(--cell-py) var(--cell-px);
  height: var(--row-h);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}
.table tbody tr { transition: background-color 80ms ease; }
.table tbody tr:hover { background: var(--color-surface-2); }
.table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* <640px stacked reflow (§4.5): apply .table--stack to tables with >3
   columns. Cells label themselves via data-label. CSS-only; horizontal
   page scroll is banned. */
@media (max-width: 639.98px) {
  .table--stack thead { display: none; }
  .table--stack,
  .table--stack tbody { display: block; }
  .table--stack tbody tr {
    display: block;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
  }
  .table--stack td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    height: auto;
    min-height: 0;
    padding: var(--space-1) var(--cell-px);
    border-top: none;
  }
  .table--stack td[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }
  /* Compact density still honours 44px touch targets on mobile (§2). */
  .table--stack a,
  .table--stack .btn { min-height: 44px; }
}

/* --- Banners / flash messages (§4.7) — left-accent pattern ---------------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-prose);
}
.banner__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-right: var(--space-1);
}
/* Banner tints composite over --color-surface (gradient layer + color) so the
   semi-transparent *-bg tokens read correctly on ANY parent background in both
   themes — e.g. dark-mode amber text never sits on a light page bg (§3.2 AA). */
.banner--svc   { border-color: var(--color-svc);   background: linear-gradient(var(--color-svc-bg),   var(--color-svc-bg))   var(--color-surface); color: var(--color-svc); }
.banner--info  { border-color: var(--color-info);  background: linear-gradient(var(--color-info-bg),  var(--color-info-bg))  var(--color-surface); color: var(--color-info); }
.banner--warn  { border-color: var(--color-warn);  background: linear-gradient(var(--color-warn-bg),  var(--color-warn-bg))  var(--color-surface); color: var(--color-warn); }
.banner--block { border-color: var(--color-block); background: linear-gradient(var(--color-block-bg), var(--color-block-bg)) var(--color-surface); color: var(--color-block); }
/* Disruption = block variant + ALLCAPS prefix + .mono scope, sticky below
   header on affected surfaces (§4.7). */
.banner--disruption {
  border-color: var(--color-block);
  background: linear-gradient(var(--color-block-bg), var(--color-block-bg)) var(--color-surface);
  color: var(--color-block);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* --- Forms (§4.6) ---------------------------------------------------------- */

.field { display: block; margin-bottom: var(--space-4); }
.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-heading);
  color: var(--color-text);
}
.field__required { color: var(--color-block); }
.field input,
.field select,
.field textarea,
select.select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
/* Standalone token select for toolbar/filter contexts outside a .field
   wrapper (mx board base filter rendered as a native white box on dark —
   mb-build3 blocker #4).  Same grammar as .field select; width adapts. */
select.select { width: auto; }
.field textarea { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); }
.field input:focus,
.field select:focus,
.field textarea:focus,
select.select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-action);
}
@media (max-width: 639.98px) {
  .field input, .field select, select.select { height: 44px; }
}

/* --- Destructive-confirm dialog (§4.9: native <dialog>) -------------------- */

.confirm-dialog {
  width: min(420px, calc(100vw - var(--space-8)));
  padding: var(--space-6);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.confirm-dialog__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-heading);
}
.confirm-dialog__body {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-prose);
}
.confirm-dialog__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.field__help {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-block);
}
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--color-block); }

.form-section { border: 0; padding: 0; margin: 0 0 var(--space-8); min-width: 0; }
.form-section__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-4);
}

/* --- Page header (§8 macro inventory: page_header()) ----------------------- */

/* The page-header is CHROME: it sits on the bare atmosphere, not on a data
   deck. Without a scrim its title/subtitle/toolbar text fails AA against the
   mid-blue gradient. Match the reference `.phead`: a translucent glass band
   (navy scrim + glass surface) so all chrome reads as --ink/--ink-2. The
   populated data decks below keep their own white surface — untouched. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.page-header__title {
  font-size: var(--text-xl);
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--ink);
}
.page-header__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Chrome toolbar — the date pager / view toggle / base picker strip that sits
   between the page-header and the data deck. Like the page-header it is CHROME
   on the bare atmosphere; without a scrim its bare-text controls (range label,
   inactive Day/Week tabs) fail AA. Same glass band as the page-header so the
   chrome reads as one legible layer. Text inside is set to --ink/--ink-2 by the
   helper utilities below. The populated data deck below keeps its white surface. */
.chrome-toolbar {
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-3) var(--space-4);
}
.chrome-toolbar .chrome-label { color: var(--ink); }
.chrome-toolbar .chrome-label--muted { color: var(--ink-2); }

/* App footer — chrome on the bare atmosphere. Glass scrim band so the beta
   notice, version and terms/status links pass AA on the mid-blue gradient. */
.app-footer {
  padding: var(--space-3) var(--space-4);
  background: var(--glass-panel);
  border-top: 1px solid var(--glass-panel-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.app-footer__link { color: var(--ink-2); }
.app-footer__link:hover { color: var(--ink); }

/* --- Empty states (§4.10) -------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
}
.empty__icon { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.empty__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--color-text);
}
.empty__body {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 36em;
}

/* --- KPI stat (§4.11) ------------------------------------------------------ */

.stat__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-secondary);
}
.stat__value {
  margin-top: var(--space-1);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-heading);
  color: var(--color-text);
}
.stat__delta { margin-top: var(--space-1); font-size: var(--text-sm); }
.stat__delta--svc   { color: var(--color-svc); }
.stat__delta--warn  { color: var(--color-warn); }
.stat__delta--block { color: var(--color-block); }

/* --- Badges / chips (§4.11) ------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-table);
  color: var(--color-neutral);
  background: var(--color-neutral-bg);
  white-space: nowrap;
}
.chip--svc   { color: var(--color-svc);   background: var(--color-svc-bg); }
.chip--warn  { color: var(--color-warn);  background: var(--color-warn-bg); }
.chip--block { color: var(--color-block); background: var(--color-block-bg); }
.chip--info  { color: var(--color-info);  background: var(--color-info-bg); }

/* --- Skeletons (§4.11) ------------------------------------------------------ */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--color-bg-subtle), transparent);
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* --- Site navigation (§4.8) ------------------------------------------------ */

/* Desktop header links. Active = --color-link text + 2px underline bar
   (not just bold — screenshot-checkable). */
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1) 0;
  white-space: nowrap;
  transition: color 80ms ease;
}
.site-nav__link:hover { color: var(--color-text); }
.site-nav__link.is-active { color: var(--color-link); font-weight: 600; }
.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-link);
}

/* Mobile panel rows: 44px touch targets; active row = 3px left accent. */
.site-nav__row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color 80ms ease, color 80ms ease;
}
.site-nav__row:hover { background: var(--color-surface-2); color: var(--color-text); }
.site-nav__row.is-active {
  color: var(--color-link);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-link);
}

/* Floating header menus (dropdowns, mobile panel) — shadow OK (floating layer). */
.menu-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* --- Drawer (§4.9) — right-side panel; 200ms open, instant close ----------- */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 400px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); /* floating layer: shadow OK */
  padding: var(--space-6);
  transform: translateX(100%);
}
.drawer[hidden] { display: none; }
.drawer.is-open {
  transform: translateX(0);
  transition: transform 200ms ease-out; /* entry only; close is instant */
}
@media (max-width: 639.98px) {
  .drawer { width: 100%; border-radius: 0; }
}
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.drawer__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}
.drawer__body { flex: 1; overflow-y: auto; min-height: 0; }
.drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.4);
}
.drawer__backdrop[hidden] { display: none; }

/* ==========================================================================
   GLASS COCKPIT layer (Wave 3) — design-standard §4–§6, GCT §1/§2/§5.
   Glass is for CHROME and MOMENTS, never dense data (§4 legibility law).
   ========================================================================== */

/* --- The ambient atmosphere (§6.1) --------------------------------------- */
/* One fixed full-viewport element behind the app: the sky gradient + two
   blurred light blobs drifting horizontally (cycles >=20s). The ONLY
   uninvoked motion in the product; prefers-reduced-motion freezes the blobs. */
.atmo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--atmo);
  overflow: hidden;
}
.atmo::before,
.atmo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.atmo::before {
  width: 56vw;
  height: 30vw;
  background: var(--atmo-blob-1);
  top: 6%;
  left: -8%;
  animation: atmo-drift 24s ease-in-out infinite alternate;
}
.atmo::after {
  width: 44vw;
  height: 26vw;
  background: var(--atmo-blob-2);
  top: 48%;
  right: -6%;
  animation: atmo-drift 30s ease-in-out infinite alternate-reverse;
}
@keyframes atmo-drift {
  from { transform: translateX(-2vw); }
  to   { transform: translateX(3vw); }
}
@media (prefers-reduced-motion: reduce) {
  .atmo::before,
  .atmo::after { animation: none; }
}

/* --- Glass recipe (§4 / GCT §2) ------------------------------------------ */
/* Two-layer recipe: white rgba surface OVER a navy scrim. The scrim is what
   makes white ink pass AA over the atmosphere (mandatory on text-bearing
   glass). Solid fallback when backdrop-filter is unsupported / perf-degraded
   (§4.2.f) — identical ink contrast. */
.glass {
  background:
    linear-gradient(var(--glass-surface), var(--glass-surface)),
    linear-gradient(var(--glass-scrim), var(--glass-scrim));
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--ink);
}
.glass--hi {
  background:
    linear-gradient(var(--glass-surface-hi), var(--glass-surface-hi)),
    linear-gradient(var(--glass-scrim-hi), var(--glass-scrim-hi));
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--ink);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass    { background: var(--glass-solid); }
  .glass--hi { background: var(--glass-solid-hi); }
}

/* --- Glass shell + top nav (§5.8) ---------------------------------------- */
/* The app shell chrome floats over the atmosphere on glass. Body-size nav
   text uses --ink / --ink-2 only (--ink-3 banned here, §4.2.e). */
.shell {
  background:
    linear-gradient(var(--glass-surface), var(--glass-surface)),
    linear-gradient(var(--glass-scrim), var(--glass-scrim));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border-soft);
  color: var(--ink);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .shell { background: var(--glass-solid); }
}

.glass-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);          /* inactive — never --ink-3 at body size */
  text-decoration: none;
  padding: var(--space-1) 0;
  white-space: nowrap;
  transition: color 80ms ease;
}
.glass-nav__link:hover { color: var(--ink); }
.glass-nav__link.is-active { color: var(--ink); }
.glass-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--ink);
}

/* Brand mark on glass: Manrope 800 + a .mono superscript channel tag (§5.8). */
.glass-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--ink);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.glass-brand__tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 8.5px;
  color: var(--ink-3);            /* superscript label — large/decorative */
  vertical-align: super;
  margin-left: var(--space-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Glass avatar (the sky-white roundel from the render). */
.glass-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FFFFFF, #BBD3EA);
  color: #27425F;                 /* navy ink on the sky-white roundel */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
}

/* Ghost / primary buttons in glass contexts (§5.1). */
.btn--on-glass-primary {
  background: var(--action-on-dark-bg, #FFFFFF);
  color: var(--action-on-dark-ink, #1D3A5F);
  font-family: var(--font-display);
  font-weight: 700;
  border: 1px solid transparent;
}
.btn--on-glass-ghost {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
}
.btn--on-glass-ghost:hover { background: var(--glass-surface-hi); }

/* Floating menu panels opened from the glass shell stay SOLID (§4.1:
   dropdowns are solid, floating, shadowed — never glass). */
.glass-menu {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(10, 25, 45, 0.28);
}

/* --- Status pill on glass / deck (§5.2) ---------------------------------- */
/* on-glass: state tint OVER --glass-chip-underlay (the underlay is mandatory;
   bare tints on glass fail AA). on-deck: state tint + state ink. */
.pill--on-glass {
  color: var(--ink-2);
  background:
    linear-gradient(var(--glass-chip-underlay), var(--glass-chip-underlay));
}
.pill--on-glass.pill--svc {
  color: var(--svc-ink);
  background:
    linear-gradient(var(--svc-tint), var(--svc-tint)),
    linear-gradient(var(--glass-chip-underlay), var(--glass-chip-underlay));
}
.pill--on-glass.pill--warn {
  color: var(--warn-ink);
  background:
    linear-gradient(var(--warn-tint), var(--warn-tint)),
    linear-gradient(var(--glass-chip-underlay), var(--glass-chip-underlay));
}
.pill--on-glass.pill--block,
.pill--on-glass.pill--unconfigured {
  color: var(--block-ink);
  background:
    linear-gradient(var(--block-tint), var(--block-tint)),
    linear-gradient(var(--glass-chip-underlay), var(--glass-chip-underlay));
}
.pill--on-deck.pill--svc   { color: var(--svc-ink);   background: var(--svc-tint); }
.pill--on-deck.pill--warn  { color: var(--warn-ink);  background: var(--warn-tint); }
.pill--on-deck.pill--block,
.pill--on-deck.pill--unconfigured { color: var(--block-ink); background: var(--block-tint); }
/* Info / neutral on the deep deck: the daylight info/neutral tokens are too
   dark to read on the deck gradient, so the on-deck variant uses the deck
   ink scale over the deck-cell well (dispatch-board uses these for OUT /
   CONFIRMED / REQUESTED chips on the dusk deck — §4.1 dispatch deck). */
.pill--on-deck.pill--info    { color: var(--ink-2); background: var(--deck-cell-edge); }
.pill--on-deck.pill--neutral { color: var(--ink-3); background: var(--deck-cell); }

/* UNCONFIGURED is a BLOCK-family state (§5.12 — never neutral/blank). On the
   daylight deck it reuses the block tint chip. */
.pill--unconfigured { color: var(--color-block); background: var(--color-block-bg); }

/* --- THE GLASS VERDICT PANEL (§5.3 — the signature) ---------------------- */
/* The most premium surface in the product, reserved for safety verdicts.
   Page-level = glass (.glass--hi); nested-in-deck = the on-deck variant. */
.verdict--glass {
  background:
    linear-gradient(var(--glass-surface-hi), var(--glass-surface-hi)),
    linear-gradient(var(--glass-scrim-hi), var(--glass-scrim-hi));
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  border-left: 1px solid var(--glass-border);  /* no left accent on glass */
  padding: var(--space-4) var(--space-5);
  color: var(--ink);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .verdict--glass { background: var(--glass-solid-hi); }
}
.verdict--glass .verdict__title { color: var(--ink); font-family: var(--font-display); }
.verdict--glass .verdict__detail { color: var(--ink-2); }
/* State roundel (left). */
.verdict__roundel {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-base);
}
.verdict--svc .verdict__roundel   { background: var(--svc-tint);   color: var(--svc-ink);   border: 1px solid rgba(189, 245, 214, 0.5); }
.verdict--warn .verdict__roundel  { background: var(--warn-tint);  color: var(--warn-ink);  border: 1px solid rgba(255, 230, 174, 0.5); }
.verdict--block .verdict__roundel { background: var(--block-tint); color: var(--block-ink); border: 1px solid rgba(255, 196, 196, 0.5); }
@media (max-width: 639.98px) {
  .verdict__roundel { width: 30px; height: 30px; }
}
/* Check chips (right): .mono on-glass chips with the underlay recipe. */
.vchip {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border-soft);
  color: var(--ink-2);
  background:
    linear-gradient(var(--glass-chip-underlay), var(--glass-chip-underlay));
}
.vchip--svc b   { color: var(--svc-ink);   font-weight: 600; }
.vchip--warn b  { color: var(--warn-ink);  font-weight: 600; }
.vchip--block b { color: var(--block-ink); font-weight: 600; }

/* --- Deep-deck surfaces (§4 / §5.4) -------------------------------------- */
/* Solid composite, never backdrop-filtered. Dense data lives here. */
.deck {
  background: var(--deck-grad);
  color: var(--ink);
  border-radius: var(--radius-lg);
}
.card--deck {
  background: var(--deck-cell);
  border: 1px solid var(--deck-line);
  border-radius: 14px;
  color: var(--ink);
}

/* --- Booking-block fills (§6) — white text inside, AA-corrected ----------- */
.fill-confirmed { background: var(--fill-confirmed); color: var(--ink); }
.fill-active    { background: var(--fill-active);    color: var(--ink); }
.fill-requested {
  background: var(--fill-requested);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}