/* ============================================================================
   CRYSTAL UI — CORE COMPOSITION LAYER
   ============================================================================
   CORE operational console. Load after CORE's own Crystal foundation:

     <link rel="stylesheet" href="crystal-ui/css/crystal.css">
     <link rel="stylesheet" href="crystal-ui/css/crystal-core.css">

   CORE keeps its own Crystal foundation. This file is CORE's composition
   layer only — it adds no second copy of tokens, primitives or the DXP shell,
   and it imports nothing from any other product's layer. Where a component
   here proves genuinely reusable outside CORE it is a candidate for promotion
   upstream into Crystal (requirements §24), which is a separate, versioned
   decision — not a shared file two products load today.

   CONTRACT
     · No !important anywhere in this file.
     · No inline style attribute is required to use any component here.
       Runtime geometry passes through custom properties written by an
       adopted CSSStyleSheet — see §9 CSP-safe canvas positioning.
     · Every value is a var(--crystal-*). No literal colour outside the
       series palette, which is a defined token set.
     · Light, dark, spectral and forced-colours behaviour for every state.
     · Desktop console: 1600×800 minimum. No phone collapse anywhere.

   CONTENTS
     1.  Density + component tokens
     2.  Environment identity
     3.  Extended semantic states
     4.  Chart series palette (12)
     5.  Application shell + rail
     6.  Section head
     7.  Command bar + consequence buttons
     8.  Split workspace
     9.  Flow kit — canvas, nodes, ports, edges, groups, minimap, inspector
     10. State presentation — dot, chip, env badge
     11. Records — tiles, queue, row actions, tree
     12. Structured input — field, item, block
     13. Evidence — diff, provenance, masked, AI
     14. Charts + data story
     15. Spectral, reduced motion, forced colours
     16. Scope bar + context switching
     17. Brief — navigator, question panel, readiness
     18. Master/child variant matrix
     19. Translation workbench
     20. Terms composer
     21. Review Lab — pins, feedback, tickets
     22. Launch + live operations
     23. Rewards + fulfilment
     24. Insight dashboard grid
     25. RBAC + effective access
     26. Ceremonies — re-authentication, two-person, kill switch
     27. System state catalogue presentation
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Density + component tokens
   Density is a component-token switch, never a global scale transform, so
   44px targets survive compact mode (CORE §4.3).
   ---------------------------------------------------------------------------- */
:root {
  /* CORE product mark. Used ONLY for the section-head eyebrow and the product
     title — never on a control, a badge or a state.
     It is a LITERAL value, not var(--crystal-raw-prism-rose), because that
     token is also --crystal-danger: aliasing it would render the brand in
     precisely the danger colour, which is the failure this rule exists to
     prevent. Deep crimson, ~3 steps darker than danger #f43f5e, so the two
     are separable by lightness as well as hue.
     Provisional until Holograph supplies a specified brand red. */
  --crystal-product-mark: #8f0f2e;

  --crystal-header-height: 50px;
  --crystal-rail-width: 86px;
  --crystal-rail-compact-width: 52px;

  /* comfortable (default) */
  --crystal-ctl-height: 34px;
  --crystal-ctl-height-sm: 28px;
  --crystal-row-height: 44px;
  --crystal-pane-pad: var(--crystal-space-3);
  --crystal-pane-gap: var(--crystal-space-2-5);
  --crystal-field-gap: var(--crystal-space-3);
  --crystal-head-height: 46px;
  --crystal-cell-pad-x: var(--crystal-space-3);

  --crystal-pane-left: 280px;
  --crystal-pane-right: 400px;
  --crystal-inspector-width: 380px;
  --crystal-inspector-wide: 520px;
}

[data-crystal-density="compact"] {
  --crystal-ctl-height: 30px;
  --crystal-ctl-height-sm: 26px;
  --crystal-row-height: 34px;
  --crystal-pane-pad: var(--crystal-space-2);
  --crystal-pane-gap: var(--crystal-space-1-5);
  --crystal-field-gap: var(--crystal-space-2);
  --crystal-head-height: 38px;
  --crystal-cell-pad-x: var(--crystal-space-2);
}

/* Pointer-coarse users keep full targets even in compact mode. */
@media (pointer: coarse) {
  [data-crystal-density="compact"] {
    --crystal-ctl-height: 44px;
    --crystal-row-height: 44px;
  }
}

/* ----------------------------------------------------------------------------
   2. Environment identity
   Live must be unmistakable but must not rely on red alone (CORE §14):
   colour + label + edge treatment + repeating stripe.
   ---------------------------------------------------------------------------- */
:root {
  --crystal-env-development: var(--crystal-text-tertiary);
  --crystal-env-development-surface: var(--crystal-surface-sunken);
  --crystal-env-development-border: var(--crystal-border);

  --crystal-env-rehearsal: var(--crystal-raw-prism-violet);
  --crystal-env-rehearsal-surface: rgba(139, 92, 246, 0.10);
  --crystal-env-rehearsal-border: rgba(139, 92, 246, 0.30);

  --crystal-env-staging: var(--crystal-warning);
  --crystal-env-staging-surface: var(--crystal-warning-surface);
  --crystal-env-staging-border: var(--crystal-warning-border);

  --crystal-env-live: var(--crystal-danger);
  --crystal-env-live-surface: var(--crystal-danger-surface);
  --crystal-env-live-border: var(--crystal-danger-border);
}

/* ----------------------------------------------------------------------------
   3. Extended semantic states
   Crystal ships info/success/warning/danger. CORE additionally needs
   blocked, pending, stale, inherited, overridden and unknown (§4.1).
   Each carries a colour AND a non-colour cue defined at component level.
   ---------------------------------------------------------------------------- */
:root {
  --crystal-blocked: var(--crystal-danger);
  --crystal-blocked-surface: var(--crystal-danger-surface);
  --crystal-blocked-border: var(--crystal-danger-border);

  --crystal-pending: var(--crystal-info);
  --crystal-pending-surface: var(--crystal-info-surface);
  --crystal-pending-border: var(--crystal-info-border);

  --crystal-stale: var(--crystal-warning);
  --crystal-stale-surface: var(--crystal-warning-surface);
  --crystal-stale-border: var(--crystal-warning-border);

  --crystal-inherited: var(--crystal-text-tertiary);
  --crystal-inherited-surface: var(--crystal-surface-sunken);
  --crystal-inherited-border: var(--crystal-border);

  --crystal-overridden: var(--crystal-raw-prism-violet);
  --crystal-overridden-surface: rgba(139, 92, 246, 0.10);
  --crystal-overridden-border: rgba(139, 92, 246, 0.28);

  --crystal-unknown: var(--crystal-text-quaternary);
  --crystal-unknown-surface: transparent;
  --crystal-unknown-border: var(--crystal-border-strong);

  --crystal-hatch: repeating-linear-gradient(
    135deg, transparent 0 5px, currentColor 5px 6px);
}

/* ----------------------------------------------------------------------------
   4. Chart series palette — 12 distinguishable series in every theme (§4.1)
   Ordered so the first six remain separable for deuteranopia and in greyscale.
   ---------------------------------------------------------------------------- */
:root {
  --crystal-series-1:  #6366f1;
  --crystal-series-2:  #06b6d4;
  --crystal-series-3:  #f59e0b;
  --crystal-series-4:  #10b981;
  --crystal-series-5:  #f43f5e;
  --crystal-series-6:  #8b5cf6;
  --crystal-series-7:  #0ea5e9;
  --crystal-series-8:  #84cc16;
  --crystal-series-9:  #eab308;
  --crystal-series-10: #ec4899;
  --crystal-series-11: #14b8a6;
  --crystal-series-12: #a855f7;
}

[data-crystal-theme="dark"] {
  /* --crystal-danger is #f43f5e in BOTH themes (it has no dark override), so
     the mark inverts rather than tracking it: darker than danger on light,
     lighter than danger on dark. Opposite directions, but a wide luminance
     gap either way (~0.17 light, ~0.29 dark), so the two stay separable in
     greyscale in both themes. */
  --crystal-product-mark: #ffa7b8;

  --crystal-series-1:  #818cf8;
  --crystal-series-2:  #22d3ee;
  --crystal-series-3:  #fbbf24;
  --crystal-series-4:  #34d399;
  --crystal-series-5:  #fb7185;
  --crystal-series-6:  #a78bfa;
  --crystal-series-7:  #38bdf8;
  --crystal-series-8:  #a3e635;
  --crystal-series-9:  #facc15;
  --crystal-series-10: #f472b6;
  --crystal-series-11: #2dd4bf;
  --crystal-series-12: #c084fc;
}

/* ----------------------------------------------------------------------------
   5. Application shell + rail
   Fixed 50px DXP header, fixed rail beneath it, one scrolling work region.
   Desktop console: 1600x800 minimum, no phone collapse.
   ---------------------------------------------------------------------------- */
.crystal-app {
  display: grid;
  grid-template-columns: var(--crystal-rail-width) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--crystal-canvas);
  color: var(--crystal-text-primary);
}

.crystal-app--compact-rail { grid-template-columns: var(--crystal-rail-compact-width) minmax(0, 1fr); }
.crystal-app--no-rail { grid-template-columns: minmax(0, 1fr); }

.crystal-app__main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--crystal-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--crystal-space-5);
}

/* Views that own their rectangle (canvas, workbench, dashboard edit). */
.crystal-app__main--bleed { padding: 0; overflow: hidden; gap: 0; }

/* --- DXP header ---------------------------------------------------------- */
.crystal-dxp {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-4);
  height: var(--crystal-header-height);
  flex: 0 0 auto;
  padding: 0 var(--crystal-space-4);
  background: var(--crystal-raw-black, #0d0d0f);
  color: var(--crystal-raw-white);
}

/* The official Holograph DXP SVG mounts here at its intrinsic ratio.
   Never a font, never live text, never letter-spaced capitals. */
.crystal-dxp__identity {
  display: inline-flex;
  align-items: center;
  height: 22px;
  flex: 0 0 auto;
}

.crystal-dxp__identity svg,
.crystal-dxp__identity img {
  height: 100%;
  width: auto;
  display: block;
}

/* Visible build-time reminder when the asset has not been supplied. */
.crystal-dxp__identity--unset {
  min-width: 132px;
  border-radius: var(--crystal-radius-sm);
  box-shadow: inset 0 0 0 1px var(--crystal-warning);
  color: var(--crystal-warning);
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  align-items: center;
  justify-content: center;
  padding: 0 var(--crystal-space-2);
}

.crystal-dxp__spacer { flex: 1 1 auto; min-width: var(--crystal-space-4); }

.crystal-dxp__product {
  font-family: var(--crystal-font-display);
  font-size: var(--crystal-text-sm);
  font-weight: var(--crystal-weight-bold);
  letter-spacing: var(--crystal-tracking-widest, 0.1em);
  color: var(--crystal-raw-white);
  flex: 0 0 auto;
}

.crystal-dxp__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--crystal-radius-full);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.crystal-dxp__btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--crystal-radius-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background var(--crystal-duration-fast) var(--crystal-ease-smooth),
              color var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-dxp__btn svg { width: 14px; height: 14px; }
.crystal-dxp__btn:hover { color: var(--crystal-raw-white); }
.crystal-dxp__btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: var(--crystal-raw-white);
}
.crystal-dxp__btn:focus-visible {
  outline: 2px solid var(--crystal-raw-white);
  outline-offset: 1px;
}

/* --- Rail ---------------------------------------------------------------- */
.crystal-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--crystal-space-1);
  padding: var(--crystal-space-3) var(--crystal-space-2);
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  border-right: 1px solid var(--crystal-border);
  box-shadow: var(--crystal-bevel-top);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.crystal-rail::-webkit-scrollbar { width: 0; }

.crystal-rail__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--crystal-space-2) 2px var(--crystal-space-1-5);
  min-height: 58px;
  border: 0;
  border-radius: var(--crystal-radius-md);
  background: transparent;
  color: var(--crystal-text-tertiary);
  font-family: var(--crystal-font-sans);
  font-size: 11px;
  font-weight: var(--crystal-weight-medium);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--crystal-duration-fast) var(--crystal-ease-smooth),
              background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-rail__item:hover { color: var(--crystal-text-primary); background: var(--crystal-surface-sunken); }
.crystal-rail__item:focus-visible { box-shadow: var(--crystal-focus-ring); }

.crystal-rail__item[aria-current="page"] {
  color: var(--crystal-interactive);
  background: var(--crystal-badge-primary-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border);
}

.crystal-rail__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--crystal-space-2) * -1);
  top: 50%;
  width: 3px;
  height: 22px;
  margin-top: -11px;
  border-radius: 0 var(--crystal-radius-xs) var(--crystal-radius-xs) 0;
  background: var(--crystal-interactive);
}

.crystal-rail__icon { width: 22px; height: 22px; display: block; }
.crystal-rail__icon svg { width: 100%; height: 100%; display: block; }

.crystal-rail__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crystal-rail__group {
  padding: var(--crystal-space-3) 0 var(--crystal-space-1);
  font-size: 9px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-widest, 0.1em);
  text-transform: uppercase;
  color: var(--crystal-text-quaternary);
  text-align: center;
}

.crystal-rail__spacer { flex: 1 1 auto; min-height: var(--crystal-space-4); }
.crystal-rail__divider { height: 1px; margin: var(--crystal-space-2); background: var(--crystal-border); }

.crystal-rail__count {
  position: absolute;
  top: 6px;
  right: 12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-danger);
  color: var(--crystal-raw-white);
  font-size: 10px;
  font-weight: var(--crystal-weight-bold);
  line-height: 1;
}

.crystal-rail__count--muted { background: var(--crystal-text-tertiary); }

/* Compact rail: icons only, label moves to the Crystal tooltip. */
.crystal-rail--compact { padding: var(--crystal-space-2) 6px; }
.crystal-rail--compact .crystal-rail__item { min-height: 40px; padding: 0; }
.crystal-rail--compact .crystal-rail__label { display: none; }
.crystal-rail--compact .crystal-rail__icon { width: 19px; height: 19px; }
.crystal-rail--compact .crystal-rail__count { top: 2px; right: 2px; }
.crystal-rail--compact .crystal-rail__group { display: none; }

/* ----------------------------------------------------------------------------
   6. Section head
   ---------------------------------------------------------------------------- */
.crystal-section-head {
  display: flex;
  align-items: center;
  /* The action cluster is unshrinkable by design (controls must not squash),
     so the head MUST be allowed to wrap. Without this the text track — the
     only flexible one — is driven to 0 and the title disappears while the
     actions overflow anyway. */
  flex-wrap: wrap;
  gap: var(--crystal-space-3);
  row-gap: var(--crystal-space-2-5);
  padding-bottom: var(--crystal-space-4);
  border-bottom: 1px solid var(--crystal-border-subtle);
}

.crystal-section-head__tile {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-badge-primary-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border), var(--crystal-bevel-top);
  color: var(--crystal-interactive);
}

.crystal-section-head__tile svg { width: 19px; height: 19px; }
/* A real floor, not min-width:0. Below this basis the cluster wraps instead. */
.crystal-section-head__text { min-width: 0; flex: 1 1 260px; }

.crystal-section-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-widest, 0.1em);
  text-transform: uppercase;
  color: var(--crystal-product-mark, var(--crystal-interactive));
}

.crystal-section-head__title {
  margin: 0;
  font-family: var(--crystal-font-display);
  font-size: var(--crystal-text-xl);
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-snug);
  line-height: var(--crystal-leading-tight);
  color: var(--crystal-text-primary);
}

.crystal-section-head__subtitle {
  margin: 3px 0 0;
  font-size: var(--crystal-text-sm);
  color: var(--crystal-text-tertiary);
  line-height: var(--crystal-leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crystal-section-head__meta {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  margin-top: 5px;
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-tertiary);
  flex-wrap: wrap;
}

.crystal-section-head__actions {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--crystal-space-2);
  margin-left: auto;
}

.crystal-section-head--compact { padding-bottom: var(--crystal-space-2-5); }
.crystal-section-head--compact .crystal-section-head__tile { width: 28px; height: 28px; border-radius: var(--crystal-radius-sm); }
.crystal-section-head--compact .crystal-section-head__tile svg { width: 15px; height: 15px; }
.crystal-section-head--compact .crystal-section-head__title { font-size: var(--crystal-text-base); }
.crystal-section-head--compact .crystal-section-head__subtitle { font-size: var(--crystal-text-xs); }
.crystal-section-head--flush { padding-bottom: 0; border-bottom: 0; }

/* ----------------------------------------------------------------------------
   7. Command bar + consequence buttons
   Controls are styled by consequence, not by prominence (CORE §3.3).
   ---------------------------------------------------------------------------- */
.crystal-commandbar {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  min-height: 54px;
  flex: 0 0 auto;
  padding: 0 var(--crystal-space-4);
  background: var(--crystal-surface-raised);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  border-bottom: 1px solid var(--crystal-border);
  box-shadow: var(--crystal-bevel-top);
}

.crystal-commandbar--sticky {
  position: sticky;
  top: 0;
  z-index: var(--crystal-z-sticky);
}

.crystal-commandbar__text { min-width: 0; flex: 1 1 auto; }

.crystal-commandbar__title {
  font-size: var(--crystal-text-base);
  font-weight: var(--crystal-weight-semibold);
  color: var(--crystal-text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crystal-commandbar__sub {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  margin-top: 2px;
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-tertiary);
}

.crystal-commandbar__actions {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  flex: 0 0 auto;
}

/* Save state — stable width so nothing shifts as it changes. */
.crystal-savestate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 132px;
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-tertiary);
  white-space: nowrap;
}

.crystal-savestate svg { width: 13px; height: 13px; flex: 0 0 auto; }
.crystal-savestate--dirty { color: var(--crystal-warning); }
.crystal-savestate--stale { color: var(--crystal-stale); }
.crystal-savestate--conflict { color: var(--crystal-danger); }
.crystal-savestate--saving { color: var(--crystal-info); }

/* Version pill — the object version the commands will act on. */
.crystal-version {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-family: var(--crystal-font-mono);
  font-size: 11px;
  color: var(--crystal-text-secondary);
  white-space: nowrap;
}

.crystal-version--immutable { color: var(--crystal-text-tertiary); }

/* --- Consequence ladder -------------------------------------------------- */
/* Crystal already ships --primary --outline --ghost --danger.
   These add the three CORE ceremony levels. Sizes match .crystal-btn. */
.crystal-btn--approval {
  background: var(--crystal-success-surface);
  color: var(--crystal-success);
  box-shadow: inset 0 0 0 1px var(--crystal-success-border);
}

.crystal-btn--approval:hover { box-shadow: inset 0 0 0 1px var(--crystal-success), var(--crystal-shadow-sm); }

.crystal-btn--production {
  position: relative;
  background: var(--crystal-danger);
  color: var(--crystal-raw-white);
  box-shadow: inset 0 0 0 1px var(--crystal-danger), var(--crystal-shadow-sm);
  padding-left: var(--crystal-space-4);
}

/* Non-colour cue: a leading rule, so "live" is not red alone. */
.crystal-btn--production::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: var(--crystal-raw-white);
  opacity: 0.85;
}

.crystal-btn--production:hover { box-shadow: inset 0 0 0 1px var(--crystal-danger), var(--crystal-shadow-md); }

.crystal-btn--irreversible {
  background: transparent;
  color: var(--crystal-danger);
  box-shadow: inset 0 0 0 1.5px var(--crystal-danger);
  background-image: var(--crystal-hatch);
  background-size: auto;
}

.crystal-btn--icon {
  width: var(--crystal-ctl-height);
  height: var(--crystal-ctl-height);
  padding: 0;
  flex: 0 0 auto;
}

.crystal-btn--icon.crystal-btn--sm { width: var(--crystal-ctl-height-sm); height: var(--crystal-ctl-height-sm); }
.crystal-btn--icon svg { width: 17px; height: 17px; }

/* Buttons never resize when their state changes. */
.crystal-btn[data-crystal-busy="true"] { pointer-events: none; }
.crystal-btn[data-crystal-busy="true"] .crystal-btn__label { visibility: hidden; }

.crystal-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm);
}

.crystal-toolbar--vertical { flex-direction: column; }
.crystal-toolbar__sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--crystal-border); }
.crystal-toolbar--vertical .crystal-toolbar__sep { width: auto; height: 1px; margin: 3px 4px; }

.crystal-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border), 0 1px 0 var(--crystal-border);
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-text-secondary);
  line-height: 1;
}

/* ----------------------------------------------------------------------------
   8. Split workspace
   Resizable panes with keyboard-operable separators. Dimensions persist
   locally; shared layouts require an explicit save (CORE §9.1).
   ---------------------------------------------------------------------------- */
.crystal-split {
  display: grid;
  height: 100%;
  min-height: 0;
  background: var(--crystal-canvas-subtle);
}

.crystal-split--3 {
  grid-template-columns:
    var(--crystal-pane-left) 6px minmax(0, 1fr) 6px var(--crystal-pane-right);
}

.crystal-split--2 { grid-template-columns: minmax(0, 1fr) 6px var(--crystal-inspector-width); }
.crystal-split--2-left { grid-template-columns: var(--crystal-pane-left) 6px minmax(0, 1fr); }

.crystal-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
}

.crystal-pane--work { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.crystal-pane__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--crystal-space-2);
  height: var(--crystal-head-height);
  padding: 0 var(--crystal-pane-pad);
  border-bottom: 1px solid var(--crystal-border-subtle);
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
}

.crystal-pane__head--plain { text-transform: none; letter-spacing: 0; font-weight: var(--crystal-weight-medium); }

.crystal-pane__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--crystal-pane-pad);
  display: flex;
  flex-direction: column;
  gap: var(--crystal-pane-gap);
}

.crystal-pane__body--flush { padding: 0; gap: 0; }
.crystal-pane__foot { flex: 0 0 auto; padding: var(--crystal-pane-pad); border-top: 1px solid var(--crystal-border-subtle); }

/* Separator: a real focusable control, not a hover-only hit area. */
.crystal-split__handle {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--crystal-border);
  cursor: col-resize;
  transition: background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-split__handle:hover,
.crystal-split__handle:focus-visible { background: var(--crystal-interactive); outline: none; }

.crystal-split__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 26px;
  margin: -13px 0 0 -1px;
  border-radius: 2px;
  background: var(--crystal-text-quaternary);
}

.crystal-split__handle:hover::after,
.crystal-split__handle:focus-visible::after { background: var(--crystal-raw-white); }

/* ----------------------------------------------------------------------------
   9. Flow kit  (CORE requirements §2.2)
   ----------------------------------------------------------------------------
   CSP-SAFE POSITIONING
   Graph libraries need computed positions. Instead of inline style attributes
   (which would require style-src 'unsafe-inline' product-wide), the canvas
   owns ONE constructed stylesheet and writes custom properties into it:

     const sheet = new CSSStyleSheet();
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
     sheet.replaceSync(nodes.map(n =>
       `[data-crystal-node="${n.id}"]{--crystal-node-x:${n.x}px;--crystal-node-y:${n.y}px}`
     ).join(''));

   CSSOM rule insertion is not an inline style and is not governed by
   style-src. One sheet, one replaceSync per frame, no per-node attribute
   writes, no CSP exception. Viewport transform uses the same mechanism.
   ---------------------------------------------------------------------------- */
.crystal-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: var(--crystal-canvas-subtle);
  background-image: radial-gradient(circle at 1px 1px, var(--crystal-border-strong) 1px, transparent 0);
  background-size: 22px 22px;
  isolation: isolate;
}

.crystal-canvas--grid-fine { background-size: 12px 12px; }
.crystal-canvas--grid-coarse { background-size: 40px 40px; }
.crystal-canvas--grid-none { background-image: none; }

.crystal-canvas--lines {
  background-image:
    linear-gradient(to right, var(--crystal-border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--crystal-border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
}

.crystal-canvas__viewport {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: translate3d(var(--crystal-view-x, 0), var(--crystal-view-y, 0), 0)
             scale(var(--crystal-view-z, 1));
}

.crystal-canvas__tools {
  position: absolute;
  top: var(--crystal-space-4);
  right: var(--crystal-space-4);
  z-index: var(--crystal-z-raised);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-overlay);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-md);
}

.crystal-canvas__tools--left { right: auto; left: var(--crystal-space-4); }

.crystal-canvas__legend {
  position: absolute;
  left: var(--crystal-space-4);
  bottom: var(--crystal-space-4);
  z-index: var(--crystal-z-raised);
  display: flex;
  align-items: center;
  gap: var(--crystal-space-4);
  padding: var(--crystal-space-2) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-overlay);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm);
  font-size: var(--crystal-text-xs);
}

/* --- Minimap ------------------------------------------------------------- */
.crystal-minimap {
  position: absolute;
  right: var(--crystal-space-4);
  bottom: var(--crystal-space-4);
  z-index: var(--crystal-z-raised);
  width: 190px;
  height: 128px;
  border-radius: var(--crystal-radius-md);
  overflow: hidden;
  background: var(--crystal-surface-overlay);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-md);
}

.crystal-minimap__mask {
  position: absolute;
  border: 1.5px solid var(--crystal-interactive);
  border-radius: 3px;
  background: var(--crystal-badge-primary-surface);
  pointer-events: none;
  left: var(--crystal-mask-x, 10%);
  top: var(--crystal-mask-y, 10%);
  width: var(--crystal-mask-w, 40%);
  height: var(--crystal-mask-h, 40%);
}

.crystal-minimap__node {
  position: absolute;
  border-radius: 1.5px;
  background: var(--crystal-text-quaternary);
}

/* --- Node shell ---------------------------------------------------------- */
.crystal-node {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--crystal-node-w, 184px);
  transform: translate3d(var(--crystal-node-x, 0), var(--crystal-node-y, 0), 0);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm), var(--crystal-bevel-top);
  cursor: grab;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

/* Static flow diagrams (documentation, print) opt out of absolute placement. */
.crystal-node--static { position: relative; transform: none; }

.crystal-node--sm { --crystal-node-w: 148px; }
.crystal-node--lg { --crystal-node-w: 236px; }

.crystal-node::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--crystal-radius-md) var(--crystal-radius-md) 0 0;
  background: var(--crystal-node-accent, var(--crystal-text-disabled));
}

.crystal-node:hover { box-shadow: inset 0 0 0 1px var(--crystal-border-strong), var(--crystal-shadow-md); }
.crystal-node:hover .crystal-node__tools { opacity: 1; }

.crystal-node--selected { box-shadow: 0 0 0 2px var(--crystal-interactive), var(--crystal-shadow-md); }
.crystal-node--focused { box-shadow: var(--crystal-focus-ring), var(--crystal-shadow-md); }
.crystal-node--dragging { cursor: grabbing; box-shadow: 0 0 0 2px var(--crystal-interactive), var(--crystal-shadow-lg); }

/* Invalid / changed / disabled carry a shape cue as well as a colour. */
.crystal-node--invalid { box-shadow: inset 0 0 0 1.5px var(--crystal-danger), var(--crystal-shadow-sm); }
.crystal-node--changed { box-shadow: inset 0 0 0 1.5px var(--crystal-overridden), var(--crystal-shadow-sm); }
.crystal-node--changed::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-overridden);
  box-shadow: 0 0 0 2px var(--crystal-surface-raised);
}

.crystal-node--disabled { opacity: 0.5; cursor: not-allowed; }
.crystal-node--disabled .crystal-node__title { text-decoration: line-through; }

.crystal-node--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--crystal-border-strong);
  border-radius: var(--crystal-radius-md);
}

.crystal-node__head { display: flex; align-items: center; gap: 7px; min-width: 0; }

.crystal-node__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  color: var(--crystal-node-accent, var(--crystal-text-secondary));
}

.crystal-node__icon svg { width: 12px; height: 12px; }

.crystal-node__title {
  flex: 1 1 auto;
  font-size: var(--crystal-text-sm);
  font-weight: var(--crystal-weight-semibold);
  color: var(--crystal-text-primary);
  line-height: var(--crystal-leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crystal-node__sub {
  margin-top: 2px;
  font-family: var(--crystal-font-mono);
  font-size: 10.5px;
  color: var(--crystal-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crystal-node__thumb {
  margin: var(--crystal-space-2) 0 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--crystal-radius-sm);
  overflow: hidden;
  background: var(--crystal-canvas-inset);
}

.crystal-node__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crystal-node__foot {
  margin-top: var(--crystal-space-2);
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  font-size: 10.5px;
  color: var(--crystal-text-tertiary);
  flex-wrap: wrap;
}

.crystal-node__tools {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-node__tools:focus-within { opacity: 1; }

/* Node family accents — set by a single modifier, consumed by ::before/icon. */
.crystal-node--screen     { --crystal-node-accent: var(--crystal-series-1); }
.crystal-node--form       { --crystal-node-accent: var(--crystal-series-2); }
.crystal-node--decision   { --crystal-node-accent: var(--crystal-series-3); }
.crystal-node--validation { --crystal-node-accent: var(--crystal-series-9); }
.crystal-node--wait       { --crystal-node-accent: var(--crystal-text-tertiary); }
.crystal-node--message    { --crystal-node-accent: var(--crystal-series-7); }
.crystal-node--provider   { --crystal-node-accent: var(--crystal-series-11); }
.crystal-node--reward     { --crystal-node-accent: var(--crystal-series-4); }
.crystal-node--proof      { --crystal-node-accent: var(--crystal-series-8); }
.crystal-node--game       { --crystal-node-accent: var(--crystal-series-12); }
.crystal-node--fulfilment { --crystal-node-accent: var(--crystal-series-6); }
.crystal-node--data       { --crystal-node-accent: var(--crystal-series-10); }
.crystal-node--terminal   { --crystal-node-accent: var(--crystal-text-disabled); }
.crystal-node--error      { --crystal-node-accent: var(--crystal-danger); }
.crystal-node--subflow    { --crystal-node-accent: var(--crystal-interactive); }

/* --- Ports --------------------------------------------------------------- */
.crystal-port {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface-raised);
  box-shadow: inset 0 0 0 1.5px var(--crystal-border-strong);
  cursor: crosshair;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth),
              transform var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-port--in  { left: -6px; top: 50%; margin-top: -5.5px; }
.crystal-port--out { right: -6px; top: 50%; margin-top: -5.5px; }
.crystal-port--top { top: -6px; left: 50%; margin-left: -5.5px; }
.crystal-port--bottom { bottom: -6px; left: 50%; margin-left: -5.5px; }

.crystal-port:hover { transform: scale(1.25); box-shadow: inset 0 0 0 2px var(--crystal-interactive); }
.crystal-port--connected { background: var(--crystal-interactive); box-shadow: inset 0 0 0 1.5px var(--crystal-interactive); }
.crystal-port--valid { box-shadow: inset 0 0 0 2px var(--crystal-success), 0 0 0 4px var(--crystal-success-surface); }
.crystal-port--invalid { box-shadow: inset 0 0 0 2px var(--crystal-danger), 0 0 0 4px var(--crystal-danger-surface); }

/* Port families get a shape as well as a colour. */
.crystal-port--control { border-radius: var(--crystal-radius-xs); }
.crystal-port--data { transform: rotate(45deg); border-radius: 2px; }
.crystal-port--data:hover { transform: rotate(45deg) scale(1.25); }

/* --- Edges (SVG layer) --------------------------------------------------- */
.crystal-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.crystal-edge {
  fill: none;
  stroke: var(--crystal-border-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.crystal-edge--true    { stroke: var(--crystal-success); }
.crystal-edge--false   { stroke: var(--crystal-text-tertiary); stroke-dasharray: 5 4; }
.crystal-edge--failure { stroke: var(--crystal-danger); }
.crystal-edge--timeout { stroke: var(--crystal-warning); stroke-dasharray: 2 4; }
.crystal-edge--retry   { stroke: var(--crystal-info); stroke-dasharray: 8 3; }
.crystal-edge--default { stroke: var(--crystal-border-strong); stroke-dasharray: 1 5; }
.crystal-edge--selected { stroke: var(--crystal-interactive); stroke-width: 2.5; }
.crystal-edge--stale   { stroke: var(--crystal-stale); stroke-dasharray: 6 4; opacity: 0.8; }
.crystal-edge--changed { stroke: var(--crystal-overridden); stroke-width: 2; }
.crystal-edge--invalid { stroke: var(--crystal-danger); stroke-width: 2; stroke-dasharray: 3 3; }
.crystal-edge--unreachable { stroke: var(--crystal-text-disabled); stroke-dasharray: 2 6; }

.crystal-edge--processing {
  stroke: var(--crystal-info);
  stroke-dasharray: 6 5;
  animation: crystal-edge-march 900ms linear infinite;
}

@keyframes crystal-edge-march { to { stroke-dashoffset: -22; } }

.crystal-edge-label {
  fill: var(--crystal-text-secondary);
  font-family: var(--crystal-font-sans);
  font-size: 10px;
  font-weight: var(--crystal-weight-medium);
}

.crystal-edge-label__bg { fill: var(--crystal-surface-overlay); stroke: var(--crystal-border); stroke-width: 1; }

/* --- Groups, swimlanes, annotations -------------------------------------- */
.crystal-group {
  position: absolute;
  border-radius: var(--crystal-radius-lg);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1.5px var(--crystal-border);
  pointer-events: none;
}

.crystal-group__label {
  position: absolute;
  top: -10px;
  left: var(--crystal-space-3);
  padding: 0 8px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface-overlay);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wide);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
  pointer-events: auto;
}

.crystal-lane {
  position: absolute;
  border-top: 1px dashed var(--crystal-border);
  pointer-events: none;
}

.crystal-lane__label {
  position: absolute;
  left: var(--crystal-space-3);
  top: 6px;
  font-size: 10px;
  letter-spacing: var(--crystal-tracking-wide);
  text-transform: uppercase;
  color: var(--crystal-text-quaternary);
}

.crystal-annotation {
  position: absolute;
  max-width: 220px;
  padding: var(--crystal-space-2) var(--crystal-space-2-5);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-warning-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-warning-border);
  font-size: 11.5px;
  line-height: var(--crystal-leading-snug);
  color: var(--crystal-text-secondary);
}

.crystal-marquee {
  position: absolute;
  border: 1px solid var(--crystal-interactive);
  background: var(--crystal-badge-primary-surface);
  border-radius: 2px;
  pointer-events: none;
}

/* --- Inspector dock ------------------------------------------------------ */
.crystal-inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  border-left: 1px solid var(--crystal-border);
}

.crystal-inspector--floating {
  position: absolute;
  right: var(--crystal-space-4);
  top: var(--crystal-space-4);
  bottom: var(--crystal-space-4);
  width: var(--crystal-inspector-width);
  z-index: var(--crystal-z-raised);
  border-left: 0;
  border-radius: var(--crystal-radius-lg);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-lg);
  overflow: hidden;
}

.crystal-inspector--collapsed { width: 0; overflow: hidden; }

/* ----------------------------------------------------------------------------
   10. State presentation
   Every state is colour PLUS a word, and where it matters PLUS a shape.
   ---------------------------------------------------------------------------- */
.crystal-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--crystal-text-sm);
  color: var(--crystal-text-secondary);
  white-space: nowrap;
}

.crystal-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-text-tertiary);
}

.crystal-dot--success::before { background: var(--crystal-success); }
.crystal-dot--warning::before { background: var(--crystal-warning); }
.crystal-dot--danger::before  { background: var(--crystal-danger); }
.crystal-dot--info::before    { background: var(--crystal-info); }
.crystal-dot--pending::before { background: var(--crystal-pending); }
.crystal-dot--stale::before   { background: var(--crystal-stale); }
.crystal-dot--neutral::before { background: var(--crystal-text-disabled); }

/* Blocked: square, not round — readable without colour. */
.crystal-dot--blocked::before { background: var(--crystal-blocked); border-radius: 1px; }
/* Unknown: hollow ring. */
.crystal-dot--unknown::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--crystal-unknown); }
/* Inherited: hollow, muted. */
.crystal-dot--inherited::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--crystal-inherited); }
/* Overridden: filled diamond. */
.crystal-dot--overridden::before { background: var(--crystal-overridden); border-radius: 1px; transform: rotate(45deg); }

.crystal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-size: 10.5px;
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-text-secondary);
  white-space: nowrap;
}

.crystal-chip svg { width: 11px; height: 11px; }
.crystal-chip--success  { background: var(--crystal-success-surface); color: var(--crystal-success); box-shadow: inset 0 0 0 1px var(--crystal-success-border); }
.crystal-chip--warning  { background: var(--crystal-warning-surface); color: var(--crystal-warning); box-shadow: inset 0 0 0 1px var(--crystal-warning-border); }
.crystal-chip--danger   { background: var(--crystal-danger-surface); color: var(--crystal-danger); box-shadow: inset 0 0 0 1px var(--crystal-danger-border); }
.crystal-chip--info     { background: var(--crystal-info-surface); color: var(--crystal-info); box-shadow: inset 0 0 0 1px var(--crystal-info-border); }
.crystal-chip--inherited { color: var(--crystal-inherited); font-style: italic; }
.crystal-chip--overridden { background: var(--crystal-overridden-surface); color: var(--crystal-overridden); box-shadow: inset 0 0 0 1px var(--crystal-overridden-border); }
.crystal-chip--unknown  { background: transparent; color: var(--crystal-unknown); box-shadow: inset 0 0 0 1px var(--crystal-unknown-border); border-style: dashed; }

/* --- Environment badge --------------------------------------------------- */
.crystal-env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--crystal-radius-sm);
  font-family: var(--crystal-font-mono);
  font-size: 10.5px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--crystal-env-development-surface);
  color: var(--crystal-env-development);
  box-shadow: inset 0 0 0 1px var(--crystal-env-development-border);
}

.crystal-env::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}

.crystal-env--rehearsal { background: var(--crystal-env-rehearsal-surface); color: var(--crystal-env-rehearsal); box-shadow: inset 0 0 0 1px var(--crystal-env-rehearsal-border); }
.crystal-env--staging   { background: var(--crystal-env-staging-surface); color: var(--crystal-env-staging); box-shadow: inset 0 0 0 1px var(--crystal-env-staging-border); }

.crystal-env--live {
  background: var(--crystal-env-live-surface);
  color: var(--crystal-env-live);
  box-shadow: inset 0 0 0 1.5px var(--crystal-env-live);
}

/* Live also carries a hatch, so it survives greyscale and colour blindness. */
.crystal-env--live::before {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background-color: currentColor;
  background-image: repeating-linear-gradient(
    45deg, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 1.5px 3px);
}

/* Whole-screen live treatment: a top rule the operator cannot miss. */
.crystal-liveline {
  height: 3px;
  flex: 0 0 auto;
  background-color: var(--crystal-danger);
  background-image: repeating-linear-gradient(
    135deg, rgba(0, 0, 0, 0.22) 0 6px, transparent 6px 12px);
}

/* ----------------------------------------------------------------------------
   11. Records — tiles, queue, row actions, tree
   ---------------------------------------------------------------------------- */
.crystal-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--crystal-space-3);
}

.crystal-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--crystal-space-1);
  padding: var(--crystal-space-4);
  border-radius: var(--crystal-radius-lg);
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm), var(--crystal-bevel-top);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

[data-crystal-density="compact"] .crystal-tile { padding: var(--crystal-space-3); }

.crystal-tile__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-medium);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
}

.crystal-tile__label svg { width: 13px; height: 13px; }

.crystal-tile__value {
  font-family: var(--crystal-font-display);
  font-size: var(--crystal-text-3xl);
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-tight);
  line-height: 1;
  color: var(--crystal-text-primary);
  font-variant-numeric: tabular-nums;
}

[data-crystal-density="compact"] .crystal-tile__value { font-size: var(--crystal-text-2xl); }

.crystal-tile__value--sm { font-size: var(--crystal-text-xl); }
.crystal-tile__meta { font-size: var(--crystal-text-xs); color: var(--crystal-text-tertiary); line-height: var(--crystal-leading-snug); }
.crystal-tile__spark { margin-top: var(--crystal-space-1); height: 26px; width: 100%; display: block; opacity: 0.85; }

.crystal-tile--attention { box-shadow: inset 0 0 0 1px var(--crystal-warning-border), var(--crystal-shadow-sm); }
.crystal-tile--attention .crystal-tile__value { color: var(--crystal-warning); }
.crystal-tile--critical { box-shadow: inset 0 0 0 1px var(--crystal-danger-border), var(--crystal-shadow-sm); }
.crystal-tile--critical .crystal-tile__value { color: var(--crystal-danger); }

/* Metric definition affordance — every KPI can explain itself. */
.crystal-tile__define {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--crystal-radius-full);
  background: transparent;
  color: var(--crystal-text-quaternary);
  cursor: help;
}

.crystal-tile__define svg { width: 12px; height: 12px; }
.crystal-tile__define:hover { color: var(--crystal-interactive); background: var(--crystal-surface-sunken); }

.crystal-queue { display: flex; flex-direction: column; }

.crystal-queue__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-2-5) var(--crystal-space-1);
  border-bottom: 1px solid var(--crystal-border-subtle);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-queue__item:last-child { border-bottom: 0; }
.crystal-queue__item:hover { background: var(--crystal-surface-sunken); }
.crystal-queue__item:hover .crystal-queue__go { opacity: 1; }

.crystal-queue__tone {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-sm);
  color: var(--crystal-text-tertiary);
  background: var(--crystal-surface-sunken);
}

.crystal-queue__tone svg { width: 14px; height: 14px; }
.crystal-queue__tone--warning { color: var(--crystal-warning); background: var(--crystal-warning-surface); }
.crystal-queue__tone--danger  { color: var(--crystal-danger); background: var(--crystal-danger-surface); }
.crystal-queue__tone--info    { color: var(--crystal-info); background: var(--crystal-info-surface); }
.crystal-queue__tone--success { color: var(--crystal-success); background: var(--crystal-success-surface); }

.crystal-queue__body { min-width: 0; }
.crystal-queue__title { font-size: var(--crystal-text-sm); font-weight: var(--crystal-weight-medium); color: var(--crystal-text-primary); line-height: var(--crystal-leading-snug); }
.crystal-queue__meta { margin-top: 2px; font-size: var(--crystal-text-xs); color: var(--crystal-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crystal-queue__go { color: var(--crystal-interactive); opacity: 0; transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth); }
.crystal-queue__go svg { width: 15px; height: 15px; display: block; }

.crystal-rowactions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--crystal-space-1);
  opacity: 0;
  transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

tr:hover .crystal-rowactions,
tr:focus-within .crystal-rowactions { opacity: 1; }

.crystal-table--dense td { height: var(--crystal-row-height); padding-top: 0; padding-bottom: 0; }
.crystal-table--dense th { white-space: nowrap; }
.crystal-table--dense td,
.crystal-table--dense th { padding-left: var(--crystal-cell-pad-x); padding-right: var(--crystal-cell-pad-x); }

.crystal-tree { display: flex; align-items: center; gap: var(--crystal-space-2); min-width: 0; }
.crystal-tree--1 { padding-left: 20px; }
.crystal-tree--2 { padding-left: 40px; }
.crystal-tree--3 { padding-left: 60px; }

.crystal-tree__tick {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: -2px;
  border-left: 1px solid var(--crystal-border-strong);
  border-bottom: 1px solid var(--crystal-border-strong);
  border-bottom-left-radius: var(--crystal-radius-xs);
  transform: translateY(-4px);
}

.crystal-path {
  font-family: var(--crystal-font-mono);
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-tertiary);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------------------
   12. Structured input
   ---------------------------------------------------------------------------- */
.crystal-field { display: flex; flex-direction: column; gap: 5px; }

.crystal-field__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-text-secondary);
}

.crystal-field__required { color: var(--crystal-danger); }
.crystal-field__hint { font-size: 11px; color: var(--crystal-text-tertiary); line-height: var(--crystal-leading-snug); }
.crystal-field__count { margin-left: auto; font-family: var(--crystal-font-mono); font-size: 10px; color: var(--crystal-text-quaternary); }

/* Provenance of the value itself — source, inheritance, lock. */
.crystal-field__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--crystal-font-mono);
  color: var(--crystal-text-quaternary);
}

.crystal-field--inherited .crystal-field__label { color: var(--crystal-inherited); }
.crystal-field--overridden .crystal-field__label { color: var(--crystal-overridden); }
.crystal-field--locked .crystal-field__label { color: var(--crystal-text-tertiary); }

.crystal-item {
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  overflow: hidden;
}

.crystal-item__head {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2) var(--crystal-space-2-5);
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-semibold);
  color: var(--crystal-text-secondary);
  border-bottom: 1px solid var(--crystal-border-subtle);
}

.crystal-item__index {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-raised);
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  color: var(--crystal-text-tertiary);
}

.crystal-item__body { padding: var(--crystal-space-2-5); display: flex; flex-direction: column; gap: var(--crystal-field-gap); }

.crystal-block {
  position: relative;
  display: grid;
  grid-template-columns: auto 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2) var(--crystal-space-2-5);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  cursor: pointer;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-block:hover { box-shadow: inset 0 0 0 1px var(--crystal-border-strong), var(--crystal-shadow-xs); }
.crystal-block:hover .crystal-block__tools { opacity: 1; }
.crystal-block--selected { background: var(--crystal-badge-primary-surface); box-shadow: inset 0 0 0 1.5px var(--crystal-interactive); }

.crystal-block__grip { color: var(--crystal-text-quaternary); cursor: grab; display: flex; }
.crystal-block__grip svg { width: 13px; height: 13px; }

.crystal-block__icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  color: var(--crystal-text-secondary);
}

.crystal-block__icon svg { width: 14px; height: 14px; }
.crystal-block__text { min-width: 0; }
.crystal-block__label { font-size: var(--crystal-text-sm); font-weight: var(--crystal-weight-medium); color: var(--crystal-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crystal-block__type { font-size: 10.5px; font-family: var(--crystal-font-mono); color: var(--crystal-text-tertiary); }
.crystal-block__tools { display: flex; gap: 1px; opacity: 0; transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth); }
.crystal-block__tools:focus-within { opacity: 1; }

/* ----------------------------------------------------------------------------
   13. Evidence — diff, provenance, masked
   ---------------------------------------------------------------------------- */
.crystal-diff { display: flex; flex-direction: column; gap: var(--crystal-space-2-5); }

.crystal-diff__block {
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  overflow: hidden;
}

.crystal-diff__head {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2) var(--crystal-space-3);
  border-bottom: 1px solid var(--crystal-border-subtle);
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-secondary);
}

.crystal-diff__verb {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--crystal-radius-sm);
  font-size: 10px;
  font-weight: var(--crystal-weight-bold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
}

.crystal-diff__verb--add    { background: var(--crystal-success-surface); color: var(--crystal-success); }
.crystal-diff__verb--change { background: var(--crystal-info-surface); color: var(--crystal-info); }
.crystal-diff__verb--remove { background: var(--crystal-danger-surface); color: var(--crystal-danger); }
.crystal-diff__verb--review { background: var(--crystal-warning-surface); color: var(--crystal-warning); }

.crystal-diff__panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--crystal-border-subtle); }
.crystal-diff__panes--single { grid-template-columns: 1fr; }
.crystal-diff__panes--three { grid-template-columns: repeat(3, 1fr); }

.crystal-diff__side {
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  background: var(--crystal-surface-raised);
  font-size: var(--crystal-text-sm);
  line-height: var(--crystal-leading-normal);
  color: var(--crystal-text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.crystal-diff__side--before { background: var(--crystal-surface-sunken); }
.crystal-diff__side--after { color: var(--crystal-text-primary); }

.crystal-diff__caption {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-quaternary);
}

.crystal-diff ins {
  background: var(--crystal-success-surface);
  color: var(--crystal-success);
  text-decoration: none;
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: inset 0 0 0 1px var(--crystal-success-border);
}

.crystal-diff del { background: var(--crystal-danger-surface); color: var(--crystal-danger); border-radius: 3px; padding: 0 2px; }

.crystal-diff__foot {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2) var(--crystal-space-3);
  border-top: 1px solid var(--crystal-border-subtle);
  background: var(--crystal-surface);
  flex-wrap: wrap;
}

.crystal-diff__source { flex: 1 1 180px; min-width: 0; font-size: 11px; color: var(--crystal-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crystal-prov {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px var(--crystal-space-3);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  font-size: 11px;
  margin: 0;
}

.crystal-prov dt { color: var(--crystal-text-tertiary); white-space: nowrap; }
.crystal-prov dd { margin: 0; font-family: var(--crystal-font-mono); color: var(--crystal-text-secondary); overflow-wrap: anywhere; }

.crystal-masked { display: inline-flex; align-items: center; gap: var(--crystal-space-2); font-family: var(--crystal-font-mono); font-size: var(--crystal-text-xs); color: var(--crystal-text-secondary); }

.crystal-masked__value {
  padding: 2px 6px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  letter-spacing: 0.06em;
}

.crystal-masked__reveal {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--crystal-radius-sm);
  background: transparent;
  color: var(--crystal-text-tertiary);
  cursor: pointer;
}

.crystal-masked__reveal:hover { background: var(--crystal-surface-sunken); color: var(--crystal-interactive); }
.crystal-masked__reveal svg { width: 13px; height: 13px; }

/* AI surfaces — shared with CMS Lite so AI reads identically in both. */
.crystal-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 var(--crystal-space-2) 0 7px;
  border: 0;
  border-radius: var(--crystal-radius-full);
  background: linear-gradient(100deg, var(--crystal-spectrum-start), var(--crystal-spectrum-mid) 55%, var(--crystal-spectrum-end));
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border);
  color: var(--crystal-interactive);
  font-family: var(--crystal-font-sans);
  font-size: 11px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wide);
  cursor: pointer;
  white-space: nowrap;
}

.crystal-ai-chip:hover { box-shadow: inset 0 0 0 1px var(--crystal-interactive), var(--crystal-shadow-glow); }
.crystal-ai-chip svg { width: 12px; height: 12px; }
.crystal-ai-chip[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.crystal-ai-panel {
  border-radius: var(--crystal-radius-lg);
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border), var(--crystal-shadow-sm);
  overflow: hidden;
}

.crystal-ai-panel__head {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  background: linear-gradient(100deg, var(--crystal-spectrum-start), var(--crystal-spectrum-mid) 55%, var(--crystal-spectrum-end));
  border-bottom: 1px solid var(--crystal-border-subtle);
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-semibold);
  color: var(--crystal-text-primary);
}

.crystal-ai-panel__head svg { width: 14px; height: 14px; color: var(--crystal-interactive); }
.crystal-ai-panel__body { padding: var(--crystal-space-3); display: flex; flex-direction: column; gap: var(--crystal-space-2-5); }

/* Confidence — a bar plus a word, never a bare percentage. */
.crystal-confidence { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--crystal-text-tertiary); }

.crystal-confidence__track {
  width: 42px;
  height: 4px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  overflow: hidden;
}

.crystal-confidence__fill { height: 100%; width: var(--crystal-confidence, 50%); background: var(--crystal-interactive); }
.crystal-confidence--low .crystal-confidence__fill { background: var(--crystal-warning); }
.crystal-confidence--high .crystal-confidence__fill { background: var(--crystal-success); }

/* ----------------------------------------------------------------------------
   14. Charts + data story
   ---------------------------------------------------------------------------- */
.crystal-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--crystal-radius-lg);
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm), var(--crystal-bevel-top);
  overflow: hidden;
}

.crystal-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-4) var(--crystal-space-4) var(--crystal-space-2);
}

.crystal-chart__title { margin: 0; font-size: var(--crystal-text-base); font-weight: var(--crystal-weight-semibold); color: var(--crystal-text-primary); line-height: var(--crystal-leading-snug); }
.crystal-chart__lede { margin: 4px 0 0; font-size: var(--crystal-text-sm); color: var(--crystal-text-secondary); line-height: var(--crystal-leading-snug); text-wrap: pretty; max-width: 62ch; }
.crystal-chart__figure { flex: 1 1 auto; min-height: 0; padding: 0 var(--crystal-space-2) var(--crystal-space-2); }

.crystal-chart__foot {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  flex-wrap: wrap;
  padding: var(--crystal-space-2-5) var(--crystal-space-4);
  border-top: 1px solid var(--crystal-border-subtle);
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-tertiary);
}

/* Freshness is mandatory on every data-bearing chart. */
.crystal-fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--crystal-text-tertiary); }
.crystal-fresh svg { width: 11px; height: 11px; }
.crystal-fresh--stale { color: var(--crystal-stale); }
.crystal-fresh--live { color: var(--crystal-success); }

.crystal-legend { display: inline-flex; align-items: center; gap: var(--crystal-space-3); flex-wrap: wrap; font-size: var(--crystal-text-xs); color: var(--crystal-text-secondary); }
.crystal-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.crystal-legend__swatch { width: 14px; height: 2px; border-radius: 2px; background: var(--crystal-series-1); flex: 0 0 auto; }

.crystal-story {
  display: flex;
  flex-direction: column;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-5);
  border-radius: var(--crystal-radius-lg);
  background: var(--crystal-surface);
  backdrop-filter: var(--crystal-surface-blur);
  -webkit-backdrop-filter: var(--crystal-surface-blur);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm);
}

.crystal-story__kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
}

.crystal-story__lede {
  margin: 0;
  font-family: var(--crystal-font-display);
  font-size: var(--crystal-text-xl);
  font-weight: var(--crystal-weight-medium);
  letter-spacing: var(--crystal-tracking-snug);
  line-height: var(--crystal-leading-snug);
  color: var(--crystal-text-primary);
  text-wrap: pretty;
  max-width: 34ch;
}

.crystal-story__lede em { font-style: normal; color: var(--crystal-interactive); font-weight: var(--crystal-weight-semibold); }

/* ----------------------------------------------------------------------------
   15. Spectral, reduced motion, forced colours
   ---------------------------------------------------------------------------- */
[data-crystal-spectral="on"] {
  --crystal-spectrum-start: rgba(99, 102, 241, 0.16);
  --crystal-spectrum-mid:   rgba(6, 182, 212, 0.13);
  --crystal-spectrum-end:   rgba(244, 63, 94, 0.10);
}

[data-crystal-spectral="on"] body,
[data-crystal-spectral="on"] .crystal-app {
  background-image:
    radial-gradient(1100px 620px at 12% -10%, rgba(99, 102, 241, 0.14), transparent 62%),
    radial-gradient(900px 520px at 96% 4%, rgba(6, 182, 212, 0.11), transparent 58%),
    radial-gradient(800px 700px at 62% 108%, rgba(244, 63, 94, 0.09), transparent 60%);
  background-attachment: fixed;
}

[data-crystal-spectral="on"] .crystal-rail,
[data-crystal-spectral="on"] .crystal-pane,
[data-crystal-spectral="on"] .crystal-commandbar,
[data-crystal-spectral="on"] .crystal-inspector {
  background-image: var(--crystal-inner-refraction);
}

[data-crystal-spectral="on"] .crystal-tile,
[data-crystal-spectral="on"] .crystal-chart,
[data-crystal-spectral="on"] .crystal-story,
[data-crystal-spectral="on"] .crystal-node,
[data-crystal-spectral="on"] .crystal-ai-panel {
  background-image: var(--crystal-edge-light), var(--crystal-inner-refraction);
  box-shadow: inset 0 0 0 1px var(--crystal-border-crystal), var(--crystal-edge-glow), var(--crystal-shadow-md);
}

[data-crystal-spectral="on"] .crystal-rail__item[aria-current="page"] {
  background-image: var(--crystal-inner-refraction);
  box-shadow: inset 0 0 0 1px var(--crystal-border-crystal), var(--crystal-shadow-glow);
}

[data-crystal-spectral="on"] .crystal-rail__item[aria-current="page"]::before {
  background: linear-gradient(to bottom, var(--crystal-raw-prism-violet), var(--crystal-raw-prism-cyan) 55%, var(--crystal-raw-prism-rose));
}

[data-crystal-spectral="on"] .crystal-section-head__tile {
  background-image: var(--crystal-inner-refraction);
  box-shadow: inset 0 0 0 1px var(--crystal-border-crystal), var(--crystal-shadow-glow);
}

/* Data surfaces stay plain in spectral: tables, fields, diffs, evidence. */
[data-crystal-spectral="on"] .crystal-diff__block,
[data-crystal-spectral="on"] .crystal-prov,
[data-crystal-spectral="on"] .crystal-table--dense { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .crystal-edge--processing { animation: none; stroke-dasharray: 6 5; }
  .crystal-node,
  .crystal-tile,
  .crystal-queue__item,
  .crystal-block { transition: none; }
}

@media (forced-colors: active) {
  .crystal-node,
  .crystal-tile,
  .crystal-chart,
  .crystal-pane,
  .crystal-ai-panel { border: 1px solid CanvasText; }
  .crystal-rail__item[aria-current="page"] { outline: 2px solid Highlight; }
  .crystal-env--live { outline: 3px solid CanvasText; }
  .crystal-dot::before { outline: 1px solid CanvasText; }
}

/* ----------------------------------------------------------------------------
   16. Scope bar + context switching  (requirements §3.2, §5.3)
   An operator must always be able to read tenant, client, brand, family,
   variant, environment, locale and effective version. Scope NAVIGATES; it
   never grants authority and never switches environment during a command.
   ---------------------------------------------------------------------------- */
.crystal-scope {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-1);
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--crystal-space-3);
  background: var(--crystal-surface);
  border-bottom: 1px solid var(--crystal-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.crystal-scope::-webkit-scrollbar { height: 0; }

.crystal-scope__crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--crystal-radius-sm);
  background: transparent;
  color: var(--crystal-text-secondary);
  font-family: var(--crystal-font-sans);
  font-size: var(--crystal-text-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-scope__crumb:hover { background: var(--crystal-surface-sunken); color: var(--crystal-text-primary); }
.crystal-scope__crumb:focus-visible { box-shadow: var(--crystal-focus-ring); outline: none; }
.crystal-scope__crumb svg { width: 11px; height: 11px; color: var(--crystal-text-quaternary); }

.crystal-scope__kind {
  font-size: 9px;
  letter-spacing: var(--crystal-tracking-widest, 0.1em);
  text-transform: uppercase;
  color: var(--crystal-text-quaternary);
}

.crystal-scope__value { font-weight: var(--crystal-weight-medium); }
.crystal-scope__crumb--current .crystal-scope__value { color: var(--crystal-text-primary); }

.crystal-scope__sep {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--crystal-border-strong);
  border-right: 1px solid var(--crystal-border-strong);
  transform: rotate(45deg);
}

.crystal-scope__spacer { flex: 1 1 auto; min-width: var(--crystal-space-3); }

/* An unsaved change in the current context blocks a silent scope switch. */
.crystal-scope--dirty { box-shadow: inset 0 -2px 0 var(--crystal-warning); }

/* Master/child relationship indicator sitting inside the scope bar. */
.crystal-lineage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-inherited-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-size: 10.5px;
  color: var(--crystal-text-tertiary);
  white-space: nowrap;
}

.crystal-lineage svg { width: 11px; height: 11px; }
.crystal-lineage--diverged { background: var(--crystal-overridden-surface); color: var(--crystal-overridden); box-shadow: inset 0 0 0 1px var(--crystal-overridden-border); }
.crystal-lineage--behind { background: var(--crystal-stale-surface); color: var(--crystal-stale); box-shadow: inset 0 0 0 1px var(--crystal-stale-border); }

/* ----------------------------------------------------------------------------
   17. Brief — workspace navigator, question panel, readiness  (§8)
   ---------------------------------------------------------------------------- */
.crystal-workspaces { display: flex; flex-direction: column; gap: 1px; }

.crystal-workspace {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2) var(--crystal-space-2);
  border: 0;
  border-radius: var(--crystal-radius-sm);
  background: transparent;
  color: var(--crystal-text-secondary);
  font-family: var(--crystal-font-sans);
  font-size: var(--crystal-text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-workspace:hover { background: var(--crystal-surface-sunken); }
.crystal-workspace:focus-visible { box-shadow: var(--crystal-focus-ring); outline: none; }

.crystal-workspace[aria-current="true"] {
  background: var(--crystal-badge-primary-surface);
  color: var(--crystal-text-primary);
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border);
}

.crystal-workspace__icon { color: var(--crystal-text-quaternary); display: flex; }
.crystal-workspace__icon svg { width: 15px; height: 15px; }
.crystal-workspace[aria-current="true"] .crystal-workspace__icon { color: var(--crystal-interactive); }
.crystal-workspace__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crystal-workspace__counts { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* answered / total, plus a blocking marker that is a shape not just a colour */
.crystal-workspace__ratio { font-family: var(--crystal-font-mono); font-size: 10.5px; color: var(--crystal-text-quaternary); font-variant-numeric: tabular-nums; }
.crystal-workspace__ratio--complete { color: var(--crystal-success); }

.crystal-workspace__flag {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 9px;
  font-weight: var(--crystal-weight-bold);
  line-height: 1;
}

.crystal-workspace__flag--blocking { background: var(--crystal-danger); color: var(--crystal-raw-white); }
.crystal-workspace__flag--conflict { background: var(--crystal-warning); color: var(--crystal-raw-black, #000); }
.crystal-workspace__flag--awaiting { background: transparent; color: var(--crystal-pending); box-shadow: inset 0 0 0 1.5px var(--crystal-pending); }
.crystal-workspace__flag--overridden { background: var(--crystal-overridden); color: var(--crystal-raw-white); }

/* Track: a thin completion rule under the whole navigator. */
.crystal-workspace__bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--crystal-border-subtle); overflow: hidden; }
.crystal-workspace__bar span { display: block; height: 100%; width: var(--crystal-complete, 0%); background: var(--crystal-interactive); }

/* --- Question panel ------------------------------------------------------ */
.crystal-question {
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  overflow: hidden;
}

.crystal-question--critical { box-shadow: inset 0 0 0 1px var(--crystal-danger-border); }
.crystal-question--conflict { box-shadow: inset 0 0 0 1px var(--crystal-warning-border); }
.crystal-question--inactive { opacity: 0.62; }

.crystal-question__head {
  display: flex;
  align-items: flex-start;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-3) var(--crystal-space-3) var(--crystal-space-2);
}

.crystal-question__text { flex: 1 1 auto; min-width: 0; }

.crystal-question__label {
  margin: 0;
  font-size: var(--crystal-text-sm);
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-text-primary);
  line-height: var(--crystal-leading-snug);
  text-wrap: pretty;
}

.crystal-question__key {
  margin-top: 3px;
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  color: var(--crystal-text-quaternary);
}

.crystal-question__marks { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* "Why CORE asks this" — always present, never a tooltip alone. */
.crystal-question__why {
  padding: var(--crystal-space-2) var(--crystal-space-3);
  margin: 0 var(--crystal-space-3) var(--crystal-space-2);
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  font-size: 11.5px;
  line-height: var(--crystal-leading-snug);
  color: var(--crystal-text-tertiary);
  text-wrap: pretty;
}

.crystal-question__why strong { color: var(--crystal-text-secondary); font-weight: var(--crystal-weight-medium); }

.crystal-question__downstream {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 10px;
  color: var(--crystal-text-quaternary);
}

.crystal-question__body { padding: 0 var(--crystal-space-3) var(--crystal-space-3); display: flex; flex-direction: column; gap: var(--crystal-space-2-5); }

/* Answer-state selector sits BEFORE the value control: unknown and
   not-applicable are first-class answers, not empty fields. */
.crystal-answerstate {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-answerstate__opt {
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--crystal-radius-xs);
  background: transparent;
  color: var(--crystal-text-tertiary);
  font-family: var(--crystal-font-sans);
  font-size: 10.5px;
  font-weight: var(--crystal-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.crystal-answerstate__opt[aria-pressed="true"] {
  background: var(--crystal-surface-overlay);
  color: var(--crystal-text-primary);
  box-shadow: var(--crystal-shadow-xs);
}

.crystal-answerstate__opt[aria-pressed="true"][data-crystal-state="conflict"] { color: var(--crystal-danger); }
.crystal-answerstate__opt[aria-pressed="true"][data-crystal-state="awaiting"] { color: var(--crystal-pending); }
.crystal-answerstate__opt[aria-pressed="true"][data-crystal-state="inferred"] { color: var(--crystal-overridden); }

.crystal-question__foot {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  flex-wrap: wrap;
  padding: var(--crystal-space-2) var(--crystal-space-3);
  border-top: 1px solid var(--crystal-border-subtle);
  background: var(--crystal-surface);
  font-size: 10.5px;
  color: var(--crystal-text-tertiary);
}

/* Expert matrix: one row per question, many questions visible at once. */
.crystal-matrix { width: 100%; border-collapse: collapse; font-size: var(--crystal-text-xs); }

.crystal-matrix th {
  position: sticky;
  top: 0;
  z-index: var(--crystal-z-raised);
  text-align: left;
  padding: var(--crystal-space-2) var(--crystal-cell-pad-x);
  background: var(--crystal-surface);
  border-bottom: 1px solid var(--crystal-border);
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
  white-space: nowrap;
}

.crystal-matrix td {
  padding: 0 var(--crystal-cell-pad-x);
  height: var(--crystal-row-height);
  border-bottom: 1px solid var(--crystal-border-subtle);
  color: var(--crystal-text-secondary);
  vertical-align: middle;
}

.crystal-matrix tbody tr:hover { background: var(--crystal-surface-sunken); }
.crystal-matrix tbody tr:focus-within { background: var(--crystal-surface-sunken); }
.crystal-matrix tr[aria-selected="true"] { background: var(--crystal-badge-primary-surface); }
.crystal-matrix__group td {
  height: 28px;
  background: var(--crystal-surface-sunken);
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
}

/* Readiness is not one percentage. */
.crystal-readiness { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--crystal-space-2); }

.crystal-readiness__cell {
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
}

.crystal-readiness__n { font-family: var(--crystal-font-display); font-size: var(--crystal-text-xl); font-weight: var(--crystal-weight-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.crystal-readiness__k { margin-top: 4px; font-size: 10.5px; color: var(--crystal-text-tertiary); line-height: var(--crystal-leading-snug); }
.crystal-readiness__cell--blocking { box-shadow: inset 0 0 0 1px var(--crystal-danger-border); }
.crystal-readiness__cell--blocking .crystal-readiness__n { color: var(--crystal-danger); }
.crystal-readiness__cell--warn { box-shadow: inset 0 0 0 1px var(--crystal-warning-border); }
.crystal-readiness__cell--warn .crystal-readiness__n { color: var(--crystal-warning); }
.crystal-readiness__cell--ok .crystal-readiness__n { color: var(--crystal-success); }

/* ----------------------------------------------------------------------------
   18. Master/child variant matrix  (§11.1)
   ---------------------------------------------------------------------------- */
.crystal-variants { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--crystal-text-xs); }

.crystal-variants th {
  position: sticky;
  top: 0;
  z-index: var(--crystal-z-raised);
  padding: var(--crystal-space-2) var(--crystal-cell-pad-x);
  background: var(--crystal-surface);
  border-bottom: 1px solid var(--crystal-border);
  text-align: left;
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
  white-space: nowrap;
}

.crystal-variants th:first-child,
.crystal-variants td:first-child {
  position: sticky;
  left: 0;
  z-index: var(--crystal-z-raised);
  background: var(--crystal-surface);
  border-right: 1px solid var(--crystal-border);
}

.crystal-variants td { padding: 0; height: var(--crystal-row-height); border-bottom: 1px solid var(--crystal-border-subtle); }

.crystal-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 var(--crystal-cell-pad-x);
  min-width: 0;
  font-size: 11.5px;
  color: var(--crystal-text-secondary);
}

.crystal-cell__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inheritance policy is legible from the cell alone. */
.crystal-cell--inherited { color: var(--crystal-text-tertiary); font-style: italic; }
.crystal-cell--inherited::before { content: "↳"; color: var(--crystal-text-quaternary); flex: 0 0 auto; }
.crystal-cell--overridden { background: var(--crystal-overridden-surface); color: var(--crystal-text-primary); box-shadow: inset 2px 0 0 var(--crystal-overridden); }
.crystal-cell--pinned { background: var(--crystal-overridden-surface); box-shadow: inset 2px 0 0 var(--crystal-overridden); }
.crystal-cell--pinned::after { content: "pinned"; margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--crystal-overridden); }
.crystal-cell--stale { background: var(--crystal-stale-surface); box-shadow: inset 2px 0 0 var(--crystal-stale); }
.crystal-cell--conflict { background: var(--crystal-danger-surface); box-shadow: inset 2px 0 0 var(--crystal-danger); color: var(--crystal-danger); }
.crystal-cell--missing { background-image: var(--crystal-hatch); color: var(--crystal-danger); }
.crystal-cell--locked { color: var(--crystal-text-quaternary); }
.crystal-cell--locked::before { content: "🔒"; font-size: 9px; }

/* Three-way merge: previous master / new master / child overlay */
.crystal-threeway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--crystal-border-subtle); border-radius: var(--crystal-radius-md); overflow: hidden; }

.crystal-threeway__col { padding: var(--crystal-space-2-5) var(--crystal-space-3); background: var(--crystal-surface-raised); min-width: 0; }
.crystal-threeway__col--base { background: var(--crystal-surface-sunken); }
.crystal-threeway__col--incoming { box-shadow: inset 0 2px 0 var(--crystal-info); }
.crystal-threeway__col--mine { box-shadow: inset 0 2px 0 var(--crystal-overridden); }

.crystal-threeway__cap {
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wider);
  text-transform: uppercase;
  color: var(--crystal-text-quaternary);
}

/* ----------------------------------------------------------------------------
   19. Translation workbench  (§11.2)
   ---------------------------------------------------------------------------- */
.crystal-tunit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--crystal-border-subtle);
  border-radius: var(--crystal-radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-tunit__side { padding: var(--crystal-space-2-5) var(--crystal-space-3); background: var(--crystal-surface-raised); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crystal-tunit__side--source { background: var(--crystal-surface-sunken); }

.crystal-tunit__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crystal-text-quaternary);
}

.crystal-tunit__copy { font-size: var(--crystal-text-sm); line-height: var(--crystal-leading-normal); color: var(--crystal-text-primary); text-wrap: pretty; }
.crystal-tunit__side--source .crystal-tunit__copy { color: var(--crystal-text-secondary); }

/* Container-fit evidence: does it physically fit the rendered component? */
.crystal-fit { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--crystal-text-tertiary); }

.crystal-fit__track {
  flex: 1 1 auto;
  max-width: 130px;
  height: 5px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  overflow: hidden;
  position: relative;
}

.crystal-fit__fill { display: block; height: 100%; width: var(--crystal-fit, 50%); background: var(--crystal-success); }
.crystal-fit--tight .crystal-fit__fill { background: var(--crystal-warning); }
.crystal-fit--over .crystal-fit__fill { background: var(--crystal-danger); }

/* the container limit, drawn as a hard rule the fill can cross */
.crystal-fit__limit { position: absolute; top: -2px; bottom: -2px; left: 100%; width: 1.5px; background: var(--crystal-text-primary); }

.crystal-tunit--locked { box-shadow: inset 0 0 0 1.5px var(--crystal-warning-border); }
.crystal-tunit--locked .crystal-tunit__side { background-image: var(--crystal-hatch); }

.crystal-tmatch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-info-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-info-border);
  font-size: 10.5px;
  color: var(--crystal-text-secondary);
}

.crystal-tmatch__pct { font-family: var(--crystal-font-mono); font-weight: var(--crystal-weight-semibold); color: var(--crystal-info); }
.crystal-tmatch--exact { background: var(--crystal-success-surface); box-shadow: inset 0 0 0 1px var(--crystal-success-border); }
.crystal-tmatch--exact .crystal-tmatch__pct { color: var(--crystal-success); }

/* ----------------------------------------------------------------------------
   20. Terms composer  (§12)
   ---------------------------------------------------------------------------- */
.crystal-clause {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-2) var(--crystal-space-2-5);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-clause--required { box-shadow: inset 0 0 0 1px var(--crystal-border), inset 3px 0 0 var(--crystal-interactive); }
.crystal-clause--exception { box-shadow: inset 0 0 0 1px var(--crystal-warning-border), inset 3px 0 0 var(--crystal-warning); }
.crystal-clause--missing { box-shadow: inset 0 0 0 1px var(--crystal-danger-border), inset 3px 0 0 var(--crystal-danger); }

.crystal-clause__n { font-family: var(--crystal-font-mono); font-size: 10.5px; color: var(--crystal-text-quaternary); min-width: 22px; }
.crystal-clause__t { min-width: 0; }
.crystal-clause__title { font-size: var(--crystal-text-sm); color: var(--crystal-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crystal-clause__meta { margin-top: 2px; font-size: 10px; color: var(--crystal-text-tertiary); font-family: var(--crystal-font-mono); }

/* Rendered terms with variable substitution made visible. */
.crystal-terms {
  padding: var(--crystal-space-4);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-canvas-inset);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--crystal-text-secondary);
  overflow-y: auto;
}

.crystal-terms h4 { margin: var(--crystal-space-3) 0 var(--crystal-space-1); font-size: 12px; font-weight: var(--crystal-weight-semibold); color: var(--crystal-text-primary); }
.crystal-terms h4:first-child { margin-top: 0; }
.crystal-terms p { margin: 0 0 var(--crystal-space-2); text-wrap: pretty; }

.crystal-var {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--crystal-badge-primary-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border);
  font-family: var(--crystal-font-mono);
  font-size: 11px;
  color: var(--crystal-interactive);
}

.crystal-var--unresolved { background: var(--crystal-danger-surface); box-shadow: inset 0 0 0 1px var(--crystal-danger-border); color: var(--crystal-danger); }

.crystal-jmatrix { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.crystal-jmatrix th, .crystal-jmatrix td { padding: var(--crystal-space-1-5) var(--crystal-space-2); border-bottom: 1px solid var(--crystal-border-subtle); text-align: center; }
.crystal-jmatrix th:first-child, .crystal-jmatrix td:first-child { text-align: left; }
.crystal-jmatrix th { font-size: 10px; text-transform: uppercase; letter-spacing: var(--crystal-tracking-wider); color: var(--crystal-text-tertiary); font-weight: var(--crystal-weight-semibold); }

.crystal-mark { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 3px; font-size: 10px; }
.crystal-mark--yes { background: var(--crystal-success-surface); color: var(--crystal-success); }
.crystal-mark--no { background: var(--crystal-surface-sunken); color: var(--crystal-text-quaternary); }
.crystal-mark--exception { background: var(--crystal-warning-surface); color: var(--crystal-warning); }
.crystal-mark--blocked { background: var(--crystal-danger-surface); color: var(--crystal-danger); }

/* ----------------------------------------------------------------------------
   21. Review Lab — pins, feedback, tickets  (§13)
   ---------------------------------------------------------------------------- */
.crystal-render {
  position: relative;
  background: var(--crystal-raw-white);
  border-radius: var(--crystal-radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-sm);
}

.crystal-render__frame { display: block; width: 100%; border: 0; }

/* Pin layer is separate from the render, so scrolling never places a pin. */
.crystal-pins { position: absolute; inset: 0; pointer-events: none; }

.crystal-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  left: var(--crystal-pin-x, 50%);
  top: var(--crystal-pin-y, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--crystal-radius-full) var(--crystal-radius-full) var(--crystal-radius-full) 3px;
  background: var(--crystal-interactive);
  color: var(--crystal-raw-white);
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  font-weight: var(--crystal-weight-bold);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 2px var(--crystal-raw-white), var(--crystal-shadow-sm);
  transition: transform var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-pin:hover { transform: scale(1.15); }
.crystal-pin--selected { transform: scale(1.2); box-shadow: 0 0 0 2px var(--crystal-raw-white), 0 0 0 4px var(--crystal-interactive); }
.crystal-pin--resolved { background: var(--crystal-success); }
.crystal-pin--critical { background: var(--crystal-danger); }
.crystal-pin--stale { background: var(--crystal-text-disabled); }

/* Overlapping pins fan out rather than stack invisibly. */
.crystal-pin--offset-1 { margin-left: 3px; }
.crystal-pin--offset-2 { margin-left: 15px; }
.crystal-pin--offset-3 { margin-left: 27px; }

.crystal-ticket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--crystal-space-2-5);
  padding: var(--crystal-space-2) var(--crystal-space-3);
  border-bottom: 1px solid var(--crystal-border-subtle);
  cursor: pointer;
  transition: background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-ticket:hover { background: var(--crystal-surface-sunken); }

.crystal-ticket__sev {
  width: 4px;
  height: 26px;
  border-radius: 2px;
  background: var(--crystal-text-disabled);
  flex: 0 0 auto;
}

.crystal-ticket__sev--critical { background: var(--crystal-danger); }
.crystal-ticket__sev--major { background: var(--crystal-warning); }
.crystal-ticket__sev--minor { background: var(--crystal-info); }
.crystal-ticket__sev--cosmetic { background: var(--crystal-text-tertiary); }

.crystal-ticket__t { min-width: 0; }
.crystal-ticket__title { font-size: var(--crystal-text-sm); color: var(--crystal-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crystal-ticket__meta { margin-top: 2px; font-size: 10.5px; color: var(--crystal-text-tertiary); }

/* Feedback form uses progressive disclosure — never all fields at once. */
.crystal-feedback { display: flex; flex-direction: column; gap: var(--crystal-field-gap); }
.crystal-feedback__more { border: 0; padding: 0; background: transparent; color: var(--crystal-interactive); font-family: var(--crystal-font-sans); font-size: var(--crystal-text-xs); cursor: pointer; text-align: left; }

/* Parity comparison modes */
.crystal-parity { position: relative; border-radius: var(--crystal-radius-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crystal-border); background: var(--crystal-canvas-inset); }
.crystal-parity__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--crystal-border); }
.crystal-parity__cap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-overlay);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-size: 9.5px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wide);
  text-transform: uppercase;
  color: var(--crystal-text-tertiary);
}

.crystal-parity__diff { position: absolute; box-shadow: inset 0 0 0 1.5px var(--crystal-danger); background: var(--crystal-danger-surface); border-radius: 2px; pointer-events: none; }
.crystal-ruler { position: absolute; border-top: 1px dashed var(--crystal-interactive); pointer-events: none; }
.crystal-ruler__v { position: absolute; top: -16px; right: 0; padding: 1px 4px; border-radius: 3px; background: var(--crystal-interactive); color: var(--crystal-raw-white); font-family: var(--crystal-font-mono); font-size: 9px; }

/* ----------------------------------------------------------------------------
   22. Launch + live operations  (§14)
   ---------------------------------------------------------------------------- */
.crystal-gate {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--crystal-space-2-5);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-bottom: 1px solid var(--crystal-border-subtle);
}

.crystal-gate:last-child { border-bottom: 0; }

.crystal-gate__mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface-sunken);
  color: var(--crystal-text-tertiary);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-gate__mark svg { width: 13px; height: 13px; }
.crystal-gate__mark--pass { background: var(--crystal-success-surface); color: var(--crystal-success); box-shadow: inset 0 0 0 1px var(--crystal-success-border); }
.crystal-gate__mark--fail { background: var(--crystal-danger-surface); color: var(--crystal-danger); box-shadow: inset 0 0 0 1px var(--crystal-danger-border); }
.crystal-gate__mark--warn { background: var(--crystal-warning-surface); color: var(--crystal-warning); box-shadow: inset 0 0 0 1px var(--crystal-warning-border); }
.crystal-gate__mark--pending { background: transparent; color: var(--crystal-pending); box-shadow: inset 0 0 0 1.5px var(--crystal-pending); }

.crystal-gate__t { min-width: 0; }
.crystal-gate__name { font-size: var(--crystal-text-sm); color: var(--crystal-text-primary); }
.crystal-gate__why { margin-top: 2px; font-size: 11px; color: var(--crystal-text-tertiary); line-height: var(--crystal-leading-snug); text-wrap: pretty; }

/* Two-person go / no-go */
.crystal-gonogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--crystal-space-2);
}

.crystal-approver {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2-5);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-approver--signed { background: var(--crystal-success-surface); box-shadow: inset 0 0 0 1px var(--crystal-success-border); }
.crystal-approver--waiting { background-image: var(--crystal-hatch); color: var(--crystal-text-tertiary); }
.crystal-approver__t { min-width: 0; flex: 1 1 auto; }
.crystal-approver__role { font-size: 10px; letter-spacing: var(--crystal-tracking-wider); text-transform: uppercase; color: var(--crystal-text-tertiary); }
.crystal-approver__who { font-size: var(--crystal-text-sm); color: var(--crystal-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crystal-approver__when { font-family: var(--crystal-font-mono); font-size: 10px; color: var(--crystal-text-tertiary); }

/* Capacity / throughput meters with a hard limit marker. */
.crystal-meter { display: flex; align-items: center; gap: var(--crystal-space-2); font-size: 11px; }
.crystal-meter__label { flex: 0 0 auto; min-width: 96px; color: var(--crystal-text-tertiary); }

.crystal-meter__track {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  overflow: hidden;
}

.crystal-meter__fill { display: block; height: 100%; width: var(--crystal-meter, 0%); background: var(--crystal-success); border-radius: var(--crystal-radius-full); }
.crystal-meter--warn .crystal-meter__fill { background: var(--crystal-warning); }
.crystal-meter--over .crystal-meter__fill { background: var(--crystal-danger); }
.crystal-meter__cap { position: absolute; top: -3px; bottom: -3px; left: var(--crystal-cap, 90%); width: 2px; background: var(--crystal-text-primary); }
.crystal-meter__v { flex: 0 0 auto; min-width: 78px; text-align: right; font-family: var(--crystal-font-mono); font-size: 10.5px; color: var(--crystal-text-secondary); font-variant-numeric: tabular-nums; }

/* Incident banner — sits above everything, never dismissible by accident. */
.crystal-incident {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-2-5) var(--crystal-space-4);
  background: var(--crystal-danger-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-danger-border), inset 0 3px 0 var(--crystal-danger);
  color: var(--crystal-text-primary);
  font-size: var(--crystal-text-sm);
}

.crystal-incident__icon { color: var(--crystal-danger); display: flex; flex: 0 0 auto; }
.crystal-incident__icon svg { width: 18px; height: 18px; }

/* Kill switch: guarded, hatched, never adjacent to an ordinary command. */
.crystal-killswitch {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-danger-surface);
  box-shadow: inset 0 0 0 1.5px var(--crystal-danger);
  background-image: repeating-linear-gradient(135deg,
    rgba(0, 0, 0, 0.05) 0 8px, transparent 8px 16px);
}

.crystal-killswitch__t { flex: 1 1 auto; min-width: 0; }

/* ----------------------------------------------------------------------------
   23. Rewards + fulfilment  (§15)
   ---------------------------------------------------------------------------- */
.crystal-stock { display: flex; width: 100%; height: 26px; border-radius: var(--crystal-radius-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crystal-border); }

.crystal-stock__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-raw-white);
  overflow: hidden;
  white-space: nowrap;
}

.crystal-stock__seg--available { background: var(--crystal-success); }
.crystal-stock__seg--reserved { background: var(--crystal-warning); color: var(--crystal-raw-black, #1a1a1a); }
.crystal-stock__seg--claimed { background: var(--crystal-interactive); }
.crystal-stock__seg--expired { background: var(--crystal-text-disabled); }
.crystal-stock__seg--recycled { background: var(--crystal-info); background-image: var(--crystal-hatch); }

.crystal-pool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--crystal-space-2);
  align-items: center;
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-raised);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-picklist { display: flex; flex-direction: column; gap: 1px; }

.crystal-pick {
  display: grid;
  grid-template-columns: 34px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--crystal-space-2-5);
  padding: var(--crystal-space-2) var(--crystal-space-3);
  border-bottom: 1px solid var(--crystal-border-subtle);
}

.crystal-pick__qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-family: var(--crystal-font-mono);
  font-size: 12px;
  font-weight: var(--crystal-weight-semibold);
  color: var(--crystal-text-primary);
}

.crystal-pick__bin { font-family: var(--crystal-font-mono); font-size: 11px; color: var(--crystal-text-tertiary); }
.crystal-pick__t { min-width: 0; }
.crystal-pick--done { opacity: 0.5; }
.crystal-pick--done .crystal-pick__t { text-decoration: line-through; }
.crystal-pick--exception { box-shadow: inset 3px 0 0 var(--crystal-danger); }

/* Draw evidence — a hash chain the operator can actually read. */
.crystal-evidence {
  display: flex;
  flex-direction: column;
  gap: var(--crystal-space-1);
  padding: var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-canvas-inset);
  box-shadow: inset 0 0 0 1px var(--crystal-border-subtle);
  font-family: var(--crystal-font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--crystal-text-secondary);
  overflow-x: auto;
}

.crystal-evidence__k { color: var(--crystal-text-quaternary); }
.crystal-evidence__v { color: var(--crystal-text-primary); overflow-wrap: anywhere; }
.crystal-evidence__ok { color: var(--crystal-success); }

/* Bulk action preview — the exact affected count, before anything runs. */
.crystal-bulk {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-warning-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-warning-border);
  font-size: var(--crystal-text-sm);
  color: var(--crystal-text-secondary);
}

.crystal-bulk__n { font-family: var(--crystal-font-display); font-size: var(--crystal-text-xl); font-weight: var(--crystal-weight-semibold); color: var(--crystal-warning); line-height: 1; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   24. Insight dashboard grid  (§16)
   12 columns. Width is an explicit selector, never a free drag-resize.
   ---------------------------------------------------------------------------- */
.crystal-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--crystal-space-3); align-items: start; }

.crystal-dash__item { grid-column: span 12; min-width: 0; }
.crystal-dash__item--quarter { grid-column: span 3; }
.crystal-dash__item--half { grid-column: span 6; }
.crystal-dash__item--three-quarter { grid-column: span 9; }
.crystal-dash__item--full { grid-column: span 12; }

@media (max-width: 1500px) {
  .crystal-dash__item--quarter { grid-column: span 6; }
  .crystal-dash__item--three-quarter { grid-column: span 12; }
}

/* Edit handles live OUTSIDE the card content so they never overlap data. */
.crystal-dash--editing .crystal-dash__item { position: relative; }

.crystal-dash__handles {
  display: none;
  align-items: center;
  gap: var(--crystal-space-1);
  padding: 0 0 5px;
}

.crystal-dash--editing .crystal-dash__handles { display: flex; }
.crystal-dash--editing .crystal-chart,
.crystal-dash--editing .crystal-tile { box-shadow: inset 0 0 0 1px var(--crystal-interactive), var(--crystal-shadow-sm); }

.crystal-widthpick { display: inline-flex; gap: 1px; padding: 2px; border-radius: var(--crystal-radius-sm); background: var(--crystal-surface-sunken); box-shadow: inset 0 0 0 1px var(--crystal-border); }

.crystal-widthpick__opt {
  height: 20px;
  min-width: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--crystal-radius-xs);
  background: transparent;
  color: var(--crystal-text-tertiary);
  font-family: var(--crystal-font-mono);
  font-size: 10px;
  cursor: pointer;
}

.crystal-widthpick__opt[aria-pressed="true"] { background: var(--crystal-surface-overlay); color: var(--crystal-interactive); box-shadow: var(--crystal-shadow-xs); }

.crystal-dash__drop { border-radius: var(--crystal-radius-lg); background: var(--crystal-badge-primary-surface); box-shadow: inset 0 0 0 1.5px dashed var(--crystal-interactive); min-height: 80px; }

/* ----------------------------------------------------------------------------
   25. RBAC + effective access  (§17)
   ---------------------------------------------------------------------------- */
.crystal-rbac { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.crystal-rbac th {
  position: sticky;
  top: 0;
  padding: var(--crystal-space-2) var(--crystal-space-2);
  background: var(--crystal-surface);
  border-bottom: 1px solid var(--crystal-border);
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wide);
  color: var(--crystal-text-tertiary);
  text-align: center;
  white-space: nowrap;
}

.crystal-rbac th:first-child, .crystal-rbac td:first-child { text-align: left; position: sticky; left: 0; background: var(--crystal-surface); border-right: 1px solid var(--crystal-border); }
.crystal-rbac td { padding: 0 var(--crystal-space-2); height: 32px; border-bottom: 1px solid var(--crystal-border-subtle); text-align: center; color: var(--crystal-text-secondary); }
.crystal-rbac tbody tr:hover { background: var(--crystal-surface-sunken); }

/* Grant origin is visible: direct, inherited from group, or denied. */
.crystal-grant { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 3px; font-size: 10px; }
.crystal-grant--direct { background: var(--crystal-success-surface); color: var(--crystal-success); box-shadow: inset 0 0 0 1px var(--crystal-success-border); }
.crystal-grant--group { background: var(--crystal-inherited-surface); color: var(--crystal-text-tertiary); box-shadow: inset 0 0 0 1px var(--crystal-border); }
.crystal-grant--none { color: var(--crystal-text-quaternary); }
.crystal-grant--denied { background: var(--crystal-danger-surface); color: var(--crystal-danger); box-shadow: inset 0 0 0 1px var(--crystal-danger-border); }
.crystal-grant--reauth { background: var(--crystal-warning-surface); color: var(--crystal-warning); box-shadow: inset 0 0 0 1px var(--crystal-warning-border); }

.crystal-trace { display: flex; flex-direction: column; gap: 0; }

.crystal-trace__step {
  position: relative;
  padding: 0 0 var(--crystal-space-3) var(--crystal-space-5);
  font-size: 11.5px;
  color: var(--crystal-text-secondary);
}

.crystal-trace__step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-surface);
  box-shadow: inset 0 0 0 1.5px var(--crystal-border-strong);
}

.crystal-trace__step::after {
  content: "";
  position: absolute;
  left: 8.25px;
  top: 14px;
  bottom: 0;
  width: 1.5px;
  background: var(--crystal-border);
}

.crystal-trace__step:last-child::after { display: none; }
.crystal-trace__step--grant::before { background: var(--crystal-success); box-shadow: inset 0 0 0 1.5px var(--crystal-success); }
.crystal-trace__step--deny::before { background: var(--crystal-danger); box-shadow: inset 0 0 0 1.5px var(--crystal-danger); }

/* ----------------------------------------------------------------------------
   26. Ceremonies  (§6.3)
   A security ceremony must not look like an ordinary confirmation.
   ---------------------------------------------------------------------------- */
.crystal-ceremony {
  border-radius: var(--crystal-radius-lg);
  background: var(--crystal-surface-overlay);
  box-shadow: inset 0 0 0 1.5px var(--crystal-danger-border), var(--crystal-shadow-lg);
  overflow: hidden;
}

.crystal-ceremony--approval { box-shadow: inset 0 0 0 1.5px var(--crystal-success-border), var(--crystal-shadow-lg); }

.crystal-ceremony__head {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2-5);
  padding: var(--crystal-space-3) var(--crystal-space-4);
  background: var(--crystal-danger-surface);
  border-bottom: 1px solid var(--crystal-danger-border);
}

.crystal-ceremony--approval .crystal-ceremony__head { background: var(--crystal-success-surface); border-bottom-color: var(--crystal-success-border); }

.crystal-ceremony__icon { color: var(--crystal-danger); display: flex; }
.crystal-ceremony__icon svg { width: 20px; height: 20px; }
.crystal-ceremony--approval .crystal-ceremony__icon { color: var(--crystal-success); }

.crystal-ceremony__title { margin: 0; font-size: var(--crystal-text-base); font-weight: var(--crystal-weight-semibold); color: var(--crystal-text-primary); }
.crystal-ceremony__sub { margin: 2px 0 0; font-size: var(--crystal-text-xs); color: var(--crystal-text-secondary); }
.crystal-ceremony__body { padding: var(--crystal-space-4); display: flex; flex-direction: column; gap: var(--crystal-space-3); }

/* The exact target, restated. Never "this item". */
.crystal-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--crystal-space-3);
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  margin: 0;
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  font-size: 11.5px;
}

.crystal-target dt { color: var(--crystal-text-tertiary); white-space: nowrap; }
.crystal-target dd { margin: 0; font-family: var(--crystal-font-mono); color: var(--crystal-text-primary); overflow-wrap: anywhere; }

.crystal-consequence {
  padding: var(--crystal-space-2-5) var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-danger-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-danger-border);
  font-size: var(--crystal-text-sm);
  line-height: var(--crystal-leading-snug);
  color: var(--crystal-text-secondary);
  text-wrap: pretty;
}

.crystal-webauthn {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-3);
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
}

.crystal-webauthn__icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--crystal-radius-md); background: var(--crystal-badge-primary-surface); color: var(--crystal-interactive); flex: 0 0 auto; }
.crystal-webauthn__icon svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------------------------
   27. System state catalogue presentation  (§19)
   Every data-bearing component resolves to exactly one of these.
   ---------------------------------------------------------------------------- */
.crystal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--crystal-space-2);
  padding: var(--crystal-space-6) var(--crystal-space-4);
  border-radius: var(--crystal-radius-md);
  text-align: center;
  color: var(--crystal-text-tertiary);
}

.crystal-state__icon { width: 32px; height: 32px; color: var(--crystal-text-quaternary); }
.crystal-state__icon svg { width: 100%; height: 100%; }
.crystal-state__title { font-size: var(--crystal-text-sm); font-weight: var(--crystal-weight-medium); color: var(--crystal-text-secondary); }
.crystal-state__desc { font-size: var(--crystal-text-xs); max-width: 42ch; line-height: var(--crystal-leading-snug); text-wrap: pretty; }

.crystal-state--danger .crystal-state__icon { color: var(--crystal-danger); }
.crystal-state--warning .crystal-state__icon { color: var(--crystal-warning); }
.crystal-state--info .crystal-state__icon { color: var(--crystal-info); }

/* Session expired clears protected content rather than blurring it. */
.crystal-state--cleared { background: var(--crystal-canvas-inset); box-shadow: inset 0 0 0 1px var(--crystal-border); }

/* Stale snapshot keeps the data visible but marks it everywhere. */
.crystal-stalewrap { position: relative; }
.crystal-stalewrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--crystal-stale-border);
  pointer-events: none;
}

.crystal-stalebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px var(--crystal-space-3);
  background: var(--crystal-stale-surface);
  color: var(--crystal-stale);
  font-size: 10.5px;
  font-weight: var(--crystal-weight-medium);
}

.crystal-stalebar svg { width: 12px; height: 12px; }

/* Partial data: the missing region is explicit, not silently absent. */
.crystal-partial {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--crystal-radius-sm);
  background-image: var(--crystal-hatch);
  color: var(--crystal-text-quaternary);
  font-size: 10.5px;
}