/* ============================================================================
   CRYSTAL UI — CMS LITE EXTENSION LAYER
   ============================================================================
   Everything Crystal does not already provide, in the crystal- namespace.
   Load AFTER crystal.css. Tokens only — no hard-coded colour.

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

   Contents
     1.  Shell            .crystal-app .crystal-rail
     2.  Section head     .crystal-section-head
     3.  Icon button      .crystal-btn--icon .crystal-kbd
     4.  Stat tiles       .crystal-tile
     5.  Work queue       .crystal-queue
     6.  Table extras     .crystal-rowactions .crystal-tree .crystal-dot
     7.  Canvas + nodes   .crystal-canvas .crystal-node
     8.  Three panes      .crystal-panes .crystal-topbar
     9.  Blocks           .crystal-block .crystal-field .crystal-item
     10. Live WYSIWYG     .crystal-live
     11. Media            .crystal-asset .crystal-focal
     12. AI               .crystal-ai .crystal-diff .crystal-prov
     13. Flow + people    .crystal-flow .crystal-masked
     14. Analytics        .crystal-chart .crystal-story
     15. Spectral layer   [data-crystal-spectral="on"]
   ============================================================================ */

:root {
  --crystal-rail-width: 86px;
  --crystal-header-height: 50px;
  --crystal-pane-left: 280px;
  --crystal-pane-right: 400px;
  --crystal-row-height: 44px;
}

/* ----------------------------------------------------------------------------
   1. Application shell
   Header (fixed, from holograph-shell) + icon rail + single scrolling main.
   ---------------------------------------------------------------------------- */
.crystal-app {
  display: grid;
  grid-template-columns: var(--crystal-rail-width) 1fr;
  height: 100%;
  min-height: 0;
  background: var(--crystal-canvas);
  color: var(--crystal-text-primary);
}

.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);
}

/* the only child that may own its own rectangle and not scroll */
.crystal-app__main--bleed {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.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);
  letter-spacing: var(--crystal-tracking-wide);
  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),
              box-shadow 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[aria-current="page"],
.crystal-rail__item--active {
  color: var(--crystal-interactive);
  background: var(--crystal-badge-primary-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-badge-primary-border);
}

/* left edge marker: reads as "you are here" without shouting */
.crystal-rail__item[aria-current="page"]::before,
.crystal-rail__item--active::before {
  content: "";
  position: absolute;
  left: calc(var(--crystal-space-2) * -1);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  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__spacer { flex: 1 1 auto; min-height: var(--crystal-space-4); }

.crystal-rail__divider {
  height: 1px;
  margin: var(--crystal-space-2) var(--crystal-space-2);
  background: var(--crystal-border);
}

/* badge on a rail item (count of things needing attention) */
.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;
}

@media (max-width: 720px) {
  .crystal-app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .crystal-rail {
    grid-row: 2;
    flex-direction: row;
    border-right: 0;
    border-top: 1px solid var(--crystal-border);
    padding: var(--crystal-space-1) var(--crystal-space-2);
  }
  .crystal-rail__item { flex: 1 1 0; min-height: 52px; }
  .crystal-rail__item[aria-current="page"]::before,
  .crystal-rail__item--active::before {
    left: 50%; top: 0; transform: translateX(-50%);
    width: 22px; height: 3px;
    border-radius: 0 0 var(--crystal-radius-xs) var(--crystal-radius-xs);
  }
  .crystal-rail__spacer, .crystal-rail__divider { display: none; }
}

/* ----------------------------------------------------------------------------
   2. Section head — the first thing in every view
   ---------------------------------------------------------------------------- */
.crystal-section-head {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  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; }

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

.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__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
}

/* ----------------------------------------------------------------------------
   3. Icon-only button + keyboard key
   ---------------------------------------------------------------------------- */
.crystal-btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
}

.crystal-btn--icon.crystal-btn--sm { width: 28px; height: 28px; }
.crystal-btn--icon.crystal-btn--lg { width: 42px; height: 42px; }
.crystal-btn--icon svg { width: 17px; height: 17px; }

.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__sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: var(--crystal-border);
}

.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;
}

/* ----------------------------------------------------------------------------
   4. Stat tiles
   ---------------------------------------------------------------------------- */
.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;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth),
              transform var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

a.crystal-tile:hover,
.crystal-tile--interactive:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--crystal-border-strong), var(--crystal-shadow-md),
              var(--crystal-bevel-top);
}

.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;
}

.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); }

/* ----------------------------------------------------------------------------
   5. Work queue — plain-language items that deep-link to the fix
   ---------------------------------------------------------------------------- */
.crystal-queue { display: flex; flex-direction: column; }

.crystal-queue__item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: var(--crystal-space-3);
  padding: var(--crystal-space-3) 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; transform: none; }

.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;
  transform: translateX(-3px);
  transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth),
              transform var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-queue__go svg { width: 15px; height: 15px; display: block; }

@media (hover: none) { .crystal-queue__go { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   6. Table extras — row actions, tree indent, status dot
   ---------------------------------------------------------------------------- */
.crystal-table--cms td { height: var(--crystal-row-height); padding-top: 0; padding-bottom: 0; }
.crystal-table--cms th { white-space: nowrap; }

.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; }

@media (hover: none) { .crystal-rowactions { opacity: 1; } }

.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-tree__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-text-primary);
}

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

.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;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-text-tertiary);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
  flex: 0 0 auto;
}

.crystal-dot--published::before { background: var(--crystal-success); }
.crystal-dot--draft::before     { background: var(--crystal-warning); }
.crystal-dot--archived::before  { background: var(--crystal-text-disabled); }
.crystal-dot--scheduled::before { background: var(--crystal-info); }
.crystal-dot--error::before     { background: var(--crystal-danger); }

.crystal-dot__extra {
  font-size: var(--crystal-text-xs);
  color: var(--crystal-warning);
  font-weight: var(--crystal-weight-medium);
}

/* ----------------------------------------------------------------------------
   7. Canvas + sitemap nodes
   ---------------------------------------------------------------------------- */
.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__toolbar {
  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__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);
}

.crystal-node {
  position: relative;
  width: 184px;
  padding: var(--crystal-space-3) var(--crystal-space-3) var(--crystal-space-2-5);
  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);
  overflow: hidden;
  cursor: grab;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth),
              transform var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

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

.crystal-node--published::before { background: var(--crystal-success); }
.crystal-node--draft::before     { background: var(--crystal-warning); }
.crystal-node--archived::before  { background: var(--crystal-text-disabled); }
.crystal-node--home::before      { background: var(--crystal-interactive); }

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

.crystal-node:hover .crystal-node__edit { opacity: 1; }
.crystal-node--selected { box-shadow: 0 0 0 2px var(--crystal-interactive), var(--crystal-shadow-md); }

.crystal-node__title {
  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;
  padding-right: 22px;
}

.crystal-node__path {
  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__edit {
  position: absolute;
  top: 9px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  color: var(--crystal-text-secondary);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-node__edit svg { width: 13px; height: 13px; }
.crystal-node__edit:focus-visible { opacity: 1; box-shadow: var(--crystal-focus-ring); }

.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);
}

/* ----------------------------------------------------------------------------
   8. Three-pane editor + top bar
   ---------------------------------------------------------------------------- */
.crystal-panes {
  display: grid;
  grid-template-columns: var(--crystal-pane-left) minmax(0, 1fr) var(--crystal-pane-right);
  height: 100%;
  min-height: 0;
  background: var(--crystal-canvas-subtle);
}

.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--left  { border-right: 1px solid var(--crystal-border); }
.crystal-pane--right { border-left: 1px solid var(--crystal-border); }
.crystal-pane--centre { 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: 46px;
  padding: 0 var(--crystal-space-3);
  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__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--crystal-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--crystal-space-2);
}

.crystal-pane__body--flush { padding: 0; gap: 0; }

.crystal-pane__foot {
  flex: 0 0 auto;
  padding: var(--crystal-space-3);
  border-top: 1px solid var(--crystal-border-subtle);
}

.crystal-topbar {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-3);
  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-topbar__text { min-width: 0; flex: 1 1 auto; }

.crystal-topbar__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-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--crystal-space-2);
  flex: 0 0 auto;
}

.crystal-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--crystal-text-xs);
  color: var(--crystal-text-tertiary);
  white-space: nowrap;
}

.crystal-saved svg { width: 13px; height: 13px; }
.crystal-saved--dirty { color: var(--crystal-warning); }

@media (max-width: 1200px) {
  .crystal-panes { grid-template-columns: 240px minmax(0, 1fr) 320px; }
}

/* Narrow desktop / split window: keep all three panes legible by letting the
   frame scroll sideways rather than crushing the centre. Below 720px the
   product swaps to tabbed panes (Blocks / Preview / Fields). */
@media (max-width: 1040px) {
  .crystal-panes {
    grid-template-columns: 216px minmax(420px, 1fr) 300px;
    overflow-x: auto;
  }
  .crystal-topbar { gap: var(--crystal-space-2); padding: 0 var(--crystal-space-3); }
}

/* ----------------------------------------------------------------------------
   9. Block cards, schema fields, nested item cards
   ---------------------------------------------------------------------------- */
.crystal-block {
  position: relative;
  display: grid;
  grid-template-columns: auto 26px 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),
              background 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--selected .crystal-block__icon { background: var(--crystal-raw-white); color: var(--crystal-interactive); }

.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; }

.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);
}

.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-space-2-5);
}

/* ----------------------------------------------------------------------------
   10. Live WYSIWYG overlay — direct editing on the real rendered site
   The iframe renders the site; this layer sits above it and owns selection.
   ---------------------------------------------------------------------------- */
.crystal-live {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--crystal-space-3);
  border-radius: var(--crystal-radius-lg);
  overflow: hidden;
  background: var(--crystal-raw-white);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-md);
}

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

.crystal-live__block {
  position: relative;
  padding: var(--crystal-space-6);
  outline: 1.5px dashed transparent;
  outline-offset: -1.5px;
  transition: outline-color var(--crystal-duration-fast) var(--crystal-ease-smooth),
              background var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-live__block:hover { outline-color: var(--crystal-interactive); background: var(--crystal-spectrum-start); }
.crystal-live__block:hover > .crystal-live__tag { opacity: 1; }

.crystal-live__block--selected {
  outline: 2px solid var(--crystal-interactive);
  outline-offset: -2px;
  background: var(--crystal-spectrum-start);
}

.crystal-live__block--selected > .crystal-live__tag { opacity: 1; }

.crystal-live__tag {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 0 0 var(--crystal-radius-sm) 0;
  background: var(--crystal-interactive);
  color: var(--crystal-raw-white);
  font-size: 10px;
  font-weight: var(--crystal-weight-semibold);
  letter-spacing: var(--crystal-tracking-wide);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-live__tag svg { width: 11px; height: 11px; }

/* floating format bar that appears over a selected text run */
.crystal-live__bar {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  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-lg);
}

/* between-block insertion affordance */
.crystal-live__insert {
  position: relative;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

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

.crystal-live__insert::before {
  content: "";
  position: absolute;
  left: var(--crystal-space-6);
  right: var(--crystal-space-6);
  height: 1.5px;
  background: var(--crystal-interactive);
  border-radius: var(--crystal-radius-full);
}

.crystal-live__insert-btn {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--crystal-radius-full);
  background: var(--crystal-interactive);
  color: var(--crystal-raw-white);
  cursor: pointer;
}

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

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

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

.crystal-device__btn svg { width: 15px; height: 15px; }
.crystal-device__btn[aria-pressed="true"] {
  background: var(--crystal-surface-overlay);
  color: var(--crystal-text-primary);
  box-shadow: var(--crystal-shadow-xs);
}

/* ----------------------------------------------------------------------------
   11. Media — asset card + focal point picker
   ---------------------------------------------------------------------------- */
.crystal-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--crystal-space-3);
}

.crystal-asset {
  display: flex;
  flex-direction: column;
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface);
  box-shadow: inset 0 0 0 1px var(--crystal-border), var(--crystal-shadow-xs);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth),
              transform var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.crystal-asset:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--crystal-border-strong), var(--crystal-shadow-md); }
.crystal-asset--selected { box-shadow: 0 0 0 2px var(--crystal-interactive), var(--crystal-shadow-md); }

.crystal-asset__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--crystal-canvas-inset);
  overflow: hidden;
}

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

.crystal-asset__flag {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}

.crystal-asset__meta {
  padding: var(--crystal-space-2) var(--crystal-space-2-5) var(--crystal-space-2-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.crystal-asset__name {
  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-asset__facts {
  font-family: var(--crystal-font-mono);
  font-size: 10.5px;
  color: var(--crystal-text-tertiary);
}

.crystal-focal {
  position: relative;
  border-radius: var(--crystal-radius-md);
  overflow: hidden;
  background: var(--crystal-canvas-inset);
  cursor: crosshair;
  user-select: none;
}

.crystal-focal img { width: 100%; display: block; }

.crystal-focal__reticle {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: var(--crystal-radius-full);
  box-shadow: 0 0 0 2px var(--crystal-raw-white), 0 0 0 3px rgba(0,0,0,0.35),
              0 2px 10px rgba(0,0,0,0.4);
  pointer-events: none;
}

.crystal-focal__reticle::before,
.crystal-focal__reticle::after {
  content: "";
  position: absolute;
  background: var(--crystal-raw-white);
}

.crystal-focal__reticle::before { left: 50%; top: 6px; bottom: 6px; width: 1px; margin-left: -0.5px; }
.crystal-focal__reticle::after  { top: 50%; left: 6px; right: 6px; height: 1px; margin-top: -0.5px; }

.crystal-focal__guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}

.crystal-crops { display: flex; gap: var(--crystal-space-2); flex-wrap: wrap; }

.crystal-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  font-family: var(--crystal-font-mono);
  color: var(--crystal-text-tertiary);
}

.crystal-crop__box {
  width: 44px;
  height: 34px;
  border-radius: var(--crystal-radius-sm);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.crystal-crop__inner { background: var(--crystal-text-quaternary); border-radius: 2px; }
.crystal-crop[aria-pressed="true"] .crystal-crop__box { box-shadow: inset 0 0 0 1.5px var(--crystal-interactive); }
.crystal-crop[aria-pressed="true"] { color: var(--crystal-interactive); }
.crystal-crop[aria-pressed="true"] .crystal-crop__inner { background: var(--crystal-interactive); }

/* ----------------------------------------------------------------------------
   12. AI — chip, panel, block diff, provenance
   AI is always a proposal. Never a silent change. Never a publish button.
   ---------------------------------------------------------------------------- */
.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;
  transition: box-shadow var(--crystal-duration-fast) var(--crystal-ease-smooth);
}

.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-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);
  letter-spacing: var(--crystal-tracking-wide);
  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); }

.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__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--crystal-border-subtle);
}

.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);
}

.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);
  text-decoration: line-through;
  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);
}

.crystal-diff__source {
  flex: 1 1 auto;
  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 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;
}

.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); }

/* ----------------------------------------------------------------------------
   13. Flow strip + masked value
   ---------------------------------------------------------------------------- */
.crystal-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--crystal-radius-md);
  background: var(--crystal-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--crystal-border);
  overflow: hidden;
}

.crystal-flow__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--crystal-space-2-5) var(--crystal-space-3) var(--crystal-space-2-5) var(--crystal-space-4);
  border: 0;
  background: transparent;
  font-family: var(--crystal-font-sans);
  font-size: var(--crystal-text-xs);
  font-weight: var(--crystal-weight-medium);
  color: var(--crystal-text-tertiary);
  white-space: nowrap;
  cursor: pointer;
}

.crystal-flow__step + .crystal-flow__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 1px solid var(--crystal-border-strong);
  border-right: 1px solid var(--crystal-border-strong);
  transform: rotate(45deg);
}

.crystal-flow__step svg { width: 13px; height: 13px; }
.crystal-flow__step--done { color: var(--crystal-success); }
.crystal-flow__step--current {
  color: var(--crystal-interactive);
  background: var(--crystal-badge-primary-surface);
  font-weight: var(--crystal-weight-semibold);
  box-shadow: inset 0 -2px 0 var(--crystal-interactive);
}

.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; }

/* ----------------------------------------------------------------------------
   14. Analytics — chart frame + data story
   ---------------------------------------------------------------------------- */
.crystal-chart {
  display: flex;
  flex-direction: column;
  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 {
  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);
}

/* the story card: one sentence of meaning, then the evidence */
.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);
}

.crystal-story__figure { min-height: 0; }

/* ----------------------------------------------------------------------------
   15. Spectral layer
   An attribute, not a theme. Adds prismatic refraction on top of light OR
   dark. Never changes layout, size or position. Decorative only.
   ---------------------------------------------------------------------------- */
[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-topbar {
  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-tile:hover,
[data-crystal-spectral="on"] .crystal-node:hover {
  box-shadow: inset 0 0 0 1px var(--crystal-border-crystal),
              var(--crystal-edge-glow-intense),
              var(--crystal-shadow-lg);
}

/* prism rim on the active rail item */
[data-crystal-spectral="on"] .crystal-rail__item[aria-current="page"],
[data-crystal-spectral="on"] .crystal-rail__item--active {
  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,
[data-crystal-spectral="on"] .crystal-rail__item--active::before {
  background: linear-gradient(to bottom,
    var(--crystal-raw-prism-violet), var(--crystal-raw-prism-cyan) 55%, var(--crystal-raw-prism-rose));
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

[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-crystal-spectral="on"] .crystal-section-head__title {
  background: linear-gradient(96deg,
    var(--crystal-text-primary) 22%,
    var(--crystal-raw-prism-indigo) 52%,
    var(--crystal-raw-prism-cyan) 72%,
    var(--crystal-text-primary) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* the one moving decoration: a slow refraction sweep across primary buttons */
[data-crystal-spectral="on"] .crystal-btn--primary { position: relative; overflow: hidden; }

[data-crystal-spectral="on"] .crystal-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%,
    rgba(255, 255, 255, 0.34) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: crystal-cms-sweep 5.5s var(--crystal-ease-smooth) infinite;
  pointer-events: none;
}

@keyframes crystal-cms-sweep {
  0%, 62% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-crystal-spectral="on"] .crystal-btn--primary::after { animation: none; opacity: 0; }
  .crystal-tile, .crystal-node, .crystal-asset { transition: none; }
}