/* ==========================================================================
   css/next.css — an additive visual skin, layered last over app.css,
   opening.css and kits.css. Nothing here defines a colour: every value is
   drawn from the tokens the kit already set per edition (--accent,
   --accent-2, --accent-strong, --accent-contrast, --glow-rgb,
   --kit-accent-grad, --kit-page-glow-a/b, --kit-rim, --bg, --bg-elevated,
   --panel, --border, --text, --text-muted, --edition-primary/secondary/
   accent). No web fonts, no CDN, no remote images — every rule below is
   geometry, blur, gradient and motion built from the system already in
   place. Self-contained: does not touch any selector's layout box model
   in a way that would fight app.css/kits.css — it rides on top of the
   same classes, refining depth, light and motion only.

   This is the calm, precise "advanced intelligence" reading of the
   product: a companion the user works alongside, not a control room.
   Every animation is slow, every highlight is soft, every edge is glass.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  :root { --next-motion: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --next-motion: 0; }
}

/* ---------- base: a hairline breathing field behind everything ----------
   A very slow, very faint drift of light using the edition's own glow
   colour, sitting under the existing page radials. Pure ambience: never
   competes with content, never intercepts a pointer. */

.app, .shell, #view-opening {
  position: relative;
  z-index: 1;
}

/* ---------- glass, refined: real depth on every elevated surface ----------
   Layers a second, sharper blur pass and an inner top highlight over the
   panels app.css and kits.css already tint — additive box-shadow and
   backdrop-filter only, so their own background/border rules still hold. */

.login-card,
.gov-card,
.tile,
.chart-card,
.compare-col,
.audit-ledger-head,
.settings-section,
.media-item,
.geometry-figure,
.composer-inner,
.method-panel,
.info-popover,
.model-menu,
.user-menu {
  backdrop-filter: saturate(1.16) blur(16px);
  -webkit-backdrop-filter: saturate(1.16) blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(var(--glow-rgb), 0.045),
    0 1px 0 rgba(var(--glow-rgb), 0.03),
    var(--shadow-md);
  transition: box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.login-card { isolation: isolate; }

/* a single soft corner bloom, once, per hovered card — precise, not busy */
.gov-card:hover,
.tile:hover,
.chart-card:hover,
.compare-col:hover,
.media-item:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(var(--glow-rgb), 0.09),
    0 1px 0 rgba(var(--glow-rgb), 0.04),
    0 14px 34px rgba(var(--glow-rgb), 0.08),
    var(--shadow-md);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .gov-card:hover, .tile:hover, .chart-card:hover, .compare-col:hover, .media-item:hover { transform: none; }
}
@media (hover: none) {
  .gov-card:hover, .tile:hover, .chart-card:hover, .compare-col:hover, .media-item:hover { transform: none; }
}

/* ---------- precision hairline: a single 1px filament along top edges ----
   Reads as instrument-grade rather than decorative — thin, cool, exact. */

.gov-card,
.tile,
.chart-card,
.audit-ledger-head,
.settings-section,
.method-panel {
  position: relative;
}
.gov-card::before,
.tile::before,
.chart-card::before,
.audit-ledger-head::before,
.settings-section::before,
.method-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.16), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
}

/* ---------- typographic precision: numerals and status read as data ---- */

.tile-value,
.st-headline-value,
.st-defence-rate,
.energy-headline-value,
.opening-pct,
.status-pill,
.model-select-btn,
.st-progress-label {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.tile-value {
  text-shadow: none;
  font-family: var(--font-display);
  font-weight: 500;
}

.st-headline-value,
.energy-headline-value {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
}

/* ---------- status pill: a quiet instrument light, not a badge ---------- */

.status-pill {
  position: relative;
  padding-left: 22px;
  border: 1px solid rgba(var(--glow-rgb), 0.14);
}
.status-pill::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.55;
}
.status-pill-on::before {
  opacity: 1;
  box-shadow: none;
  animation: none;
}

/* ---------- primary actions: still; no specular pass ------------------- */

.btn-primary,
.send-btn,
.opening-enter-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after,
.send-btn::after { content: none; }

.btn {
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease, transform 0.12s ease;
}
.btn-secondary:hover {
  border-color: rgba(var(--glow-rgb), 0.4);
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.12);
}

/* ---------- focus: one calm, consistent ring everywhere ---------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(var(--kit-rim-rgb, 214, 203, 176), 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- composer: the companion's own surface, lifted gently ------- */

.composer-inner {
  position: relative;
}
.composer-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.0), rgba(var(--glow-rgb), 0.0));
  transition: background 0.3s ease;
}
.composer-inner:focus-within::before {
  background: linear-gradient(120deg, rgba(var(--glow-rgb), 0.3), rgba(var(--glow-rgb), 0.05) 60%, rgba(var(--glow-rgb), 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---------- nav: a precise, narrow indicator instead of a wide fill ---- */

.nav-item {
  position: relative;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-item.is-active {
  box-shadow: none;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: none;
}
.tabbar-item.is-active,
.nav-item.is-active {
  position: relative;
}

/* The voice orb is left exactly as orb.js draws it: nothing rings or covers it. */

/* ---------- charts: a quiet instrument frame ---------------------------- */

.chart-svg {
  filter: none;
}

/* ---------- switches: a tighter, more mechanical feel ------------------- */

.switch::before {
  transition: background 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.22s ease;
}
.switch-thumb {
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.4, 1);
}

/* ---------- kill switch: it should feel load-bearing -------------------- */

.kill-toggle {
  position: relative;
}
.kill-toggle[aria-checked="true"] {
  box-shadow: 0 0 0 1px rgba(var(--danger-rgb, 180, 35, 24), 0.35), 0 0 24px rgba(var(--danger-rgb, 180, 35, 24), 0.2);
}

/* ---------- sidebar + topbar: same glass discipline as the cards ------- */

.sidebar {
  box-shadow:
    1px 0 0 rgba(var(--glow-rgb), 0.08),
    8px 0 40px rgba(0, 0, 0, 0.12);
}
.topbar {
  box-shadow: 0 1px 0 rgba(var(--glow-rgb), 0.05);
}

/* ---------- print: none of this survives to paper ----------------------- */

@media print {
  body::before,
  .btn-primary::after,
  .send-btn::after {
    display: none !important;
  }
  .login-card, .gov-card, .tile, .chart-card, .compare-col,
  .audit-ledger-head, .settings-section, .media-item, .geometry-figure,
  .composer-inner, .method-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}