/* ==========================================================================
   spw-surfaces.css
   --------------------------------------------------------------------------
   Purpose
   - Feature-surface registry for macro layouts and runtime shells.
   - Consumes spw-substrate-ecology.css contracts instead of redefining them.
   - Keeps product surfaces readable, bounded, and progressively enhanced.
   ========================================================================== */

/* ==========================================================================
   1. Shared feature-shell tokens
   ========================================================================== */

:root {
  --spw-shell-card-gap:   var(--gap-inline-flow, clamp(0.75rem, 1.4vw, 1rem));
  --spw-shell-panel-gap:  var(--gap-surface, clamp(0.85rem, 1.8vw, 1.15rem));
  --spw-shell-inline-gap: var(--space-xs, 0.55rem);

  --spw-shell-card-pad:   var(--inset-component, 1rem);
  --spw-shell-panel-pad:  var(--inset-surface, 0.9rem);
  
  --spw-shell-soft-bg:        var(--surface-soft, rgba(255, 255, 255, 0.44));
  --spw-shell-card-bg:        var(--surface, rgba(255, 255, 255, 0.68));
  --spw-shell-card-bg-strong: var(--surface-strong, rgba(255, 255, 255, 0.74));
  --spw-shell-panel-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--spw-shell-card-bg-strong) 92%, transparent),
      color-mix(in srgb, var(--spw-shell-card-bg) 92%, transparent)
    );
  --spw-shell-panel-bg-strong:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-panel-strong, var(--spw-shell-card-bg-strong)) 94%, transparent),
      color-mix(in srgb, var(--surface-panel, var(--spw-shell-card-bg)) 94%, transparent)
    );
  --spw-shell-sheen: color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.78)) 22%, transparent);
  --spw-shell-overlay:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.78)) 24%, transparent) 52%,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.78)) 48%, transparent)
    );

  --spw-shell-line:        var(--line, rgba(14, 18, 20, 0.14));
  --spw-shell-line-strong: var(--line-strong, rgba(0, 128, 128, 0.34));
  --spw-palette-probe-1: var(--active-op-color, #008080);
  --spw-palette-probe-2: var(--op-object-color, #c68a22);
  --spw-palette-probe-3: var(--op-ref-color, #1d57a3);
  --spw-palette-probe-4: var(--op-probe-color, #6a3fb8);
}

/* Generic shell card/panel rhythm */
:where(
  .media-focus-card,
  .media-card,
  .pretext-controls-panel,
  .pretext-summary-panel,
  .pretext-surface,
  .rpg-gameplay-panel,
  .settings-category,
  .settings-fieldset,
  .pwa-status-card,
  .spw-nav-panel,
  .spw-console
) {
  min-width: 0;
}

/* Shared grid normalization for early-route card systems */
:where(
  .frame-grid,
  .media-card-grid,
  .media-focus-layout,
  .feature-map,
  .domain-grid,
  .spec-grid
) {
  align-items: stretch;
}

:where(
  .frame-grid > .frame-card,
  .frame-grid > .software-card,
  .media-card-grid > .media-card,
  .media-focus-layout > * > .media-focus-card,
  .feature-map > .frame-card,
  .domain-grid > .frame-panel,
  .spec-grid > .software-card,
  .spec-grid > .frame-panel
) {
  height: 100%;
}

/* ==========================================================================
   2. Media publishing
   ========================================================================== */

:where([data-spw-features~="media-publishing"] .media-publishing-frame) {
  gap: var(--space-md, 1rem);
}

:where([data-spw-features~="media-publishing"] .media-focus-layout,
       [data-spw-features~="media-publishing"] .media-card-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card, 15rem)), 1fr));
  gap: var(--spw-shell-panel-gap);
}

:where([data-spw-features~="media-publishing"] .media-collection-stack) {
  display: grid;
  gap: var(--gap-block-flow, 1.1rem);
}

:where([data-spw-features~="media-publishing"] .media-focus-card,
       [data-spw-features~="media-publishing"] .media-card) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.62rem);
  min-height: 100%;
  padding: var(--spw-shell-card-pad);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--spw-shell-card-bg);
  color: inherit;
  box-sizing: border-box;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition:
    transform var(--duration-base, 220ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-base, 220ms) var(--ease-mechanical, ease);
}

:where([data-spw-features~="media-publishing"] a.media-card) {
  text-decoration: none;
}

:where([data-spw-features~="media-publishing"] a.media-card:hover,
       [data-spw-features~="media-publishing"] a.media-card:focus-visible) {
  transform: translateY(-2px);
  border-color: var(--card-border-hover, var(--line-strong));
  background: var(--card-bg-hover, var(--surface-strong));
  box-shadow: var(--card-shadow-hover);
}

:where([data-spw-features~="media-publishing"] .media-focus-card--daily) {
  background: var(--spw-shell-card-bg-strong);
  box-shadow: var(--shadow-sm);
}

:where([data-spw-features~="media-publishing"] .media-focus-title,
       [data-spw-features~="media-publishing"] .media-card-topline) {
  display: flex;
  align-items: center;
  gap: var(--spw-shell-inline-gap);
  flex-wrap: wrap;
}

:where([data-spw-features~="media-publishing"] .media-focus-title h3,
       [data-spw-features~="media-publishing"] .media-card-title) {
  margin: 0;
}

:where([data-spw-features~="media-publishing"] .media-card-tag) {
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.72rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where([data-spw-features~="media-publishing"] .media-card-summary) {
  color: var(--ink-soft);
  font-size: var(--text-size-sm, 0.92rem);
  line-height: var(--site-line-height, 1.55);
}

:where([data-spw-features~="media-publishing"] .media-card-cta) {
  margin-top: auto;
  color: var(--active-op-color, #008080);
  font-size: var(--text-size-xs, 0.78rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   3. Topic reference and study surfaces
   ========================================================================== */

:where(.topic-reference-grid, .topic-photo-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--spw-shell-panel-gap);
}

:where(.topic-reference-card) {
  display: grid;
  gap: 0.55rem;
  min-height: 100%;
  padding: var(--spw-shell-card-pad);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--spw-shell-panel-bg);
  box-shadow: var(--card-shadow);
}

:where(.topic-reference-card > h3) {
  margin: 0;
}

:where(.topic-reference-card > p) {
  margin: 0;
  color: var(--ink-soft);
}

:where(.topic-reference-card > a) {
  color: var(--active-op-color, #008080);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.05em;
  text-decoration: none;
}

:where(.topic-reference-card > a:hover, .topic-reference-card > a:focus-visible) {
  text-decoration: underline;
}

:where(.topic-photo-card) {
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--spw-shell-line-strong) 46%, var(--spw-shell-line));
  background:
    linear-gradient(180deg, var(--spw-shell-sheen), transparent 44%),
    var(--spw-shell-card-bg-strong);
}

:where(.topic-photo-card img) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

:where(.topic-photo-card figcaption) {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1rem 1.05rem;
  color: var(--ink-soft);
}

:where(.topic-photo-card figcaption strong) {
  color: var(--ink);
  font-size: 0.98rem;
}

:where(.topic-photo-card figcaption a) {
  color: var(--active-op-color, #008080);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.05em;
  text-decoration: none;
}

:where(.topic-photo-card figcaption a:hover, .topic-photo-card figcaption a:focus-visible) {
  text-decoration: underline;
}

:where(.frame-card--illustrated > a:first-child) {
  gap: 0.72rem;
}

:where(.frame-card-media) {
  position: relative;
  margin:
    calc(var(--component-pad, 0.9rem) * -1)
    calc(var(--component-pad, 0.9rem) * -1)
    0;
  justify-self: stretch;
  overflow: clip;
  border-radius: calc(var(--component-radius-tight, 8px) - 1px) calc(var(--component-radius-tight, 8px) - 1px) 0 0;
  border-bottom: 1px solid color-mix(in srgb, var(--component-accent, #008080) 18%, var(--spw-shell-line, rgba(0, 0, 0, 0.08)));
  background:
    linear-gradient(180deg, var(--spw-shell-sheen), transparent 44%),
    color-mix(in srgb, var(--component-surface-strong, rgba(255, 255, 255, 0.98)) 90%, var(--component-accent, #008080));
}

:where(.frame-card-media::after) {
  content: "";
  position: absolute;
  inset: auto 0 0;
  min-height: 34%;
  pointer-events: none;
  background: var(--spw-shell-overlay);
}

:where(.frame-card-media img) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition:
    transform var(--duration-deliberate, 360ms) var(--ease-mechanical, ease),
    filter var(--duration-deliberate, 360ms) var(--ease-mechanical, ease);
}

:where(.frame-card-media[data-spw-image-shape="square"] img) {
  aspect-ratio: 1 / 1;
}

:where(.frame-card-media[data-spw-image-shape="portrait"] img) {
  aspect-ratio: 4 / 5;
}

:where(.frame-card--illustrated:hover .frame-card-media img,
       .frame-card--illustrated:focus-within .frame-card-media img) {
  transform: scale(1.018);
  filter: saturate(1.04) contrast(1.02);
}

:where(.frame-card--illustrated .frame-card-sigil) {
  margin-top: 0.08rem;
}

:where(.topic-hero-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 19rem), 0.95fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

:where(.topic-hero-copy) {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
}

:where(.vibe-widget-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--spw-shell-panel-gap);
  align-items: stretch;
}

:where(.vibe-widget-grid--compact) {
  gap: 0.8rem;
}

:where(.vibe-widget) {
  position: relative;
  display: grid;
  gap: 0.72rem;
  min-height: 100%;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 18%, var(--spw-shell-line));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 9%, var(--surface-strong, rgba(255, 255, 255, 0.92))), transparent 62%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--spw-palette-probe-2, var(--op-object-color, #c68a22)) 10%, transparent), transparent 24%),
    var(--spw-shell-panel-bg-strong);
  box-shadow: var(--card-highlight), var(--card-shadow);
  overflow: clip;
}

:where(.vibe-widget::before) {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 0.18rem;
  background:
    linear-gradient(
      90deg,
      var(--spw-palette-probe-1, var(--active-op-color, #008080)),
      var(--spw-palette-probe-2, var(--op-object-color, #c68a22)),
      var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)),
      var(--spw-palette-probe-4, var(--op-probe-color, #6a3fb8))
    );
  opacity: 0.8;
}

:where(.vibe-widget > *) {
  position: relative;
  z-index: 1;
}

:where(.vibe-widget--feature) {
  grid-column: span 2;
}

:where(.vibe-widget-header) {
  display: grid;
  gap: 0.3rem;
}

:where(.vibe-widget-kicker) {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.vibe-widget-title) {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.2;
}

:where(.vibe-widget-copy) {
  margin: 0;
  color: var(--ink-soft);
  max-inline-size: 68ch;
}

:where(.vibe-widget-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

:where(.vibe-widget-actions [data-site-setting-active="true"],
       .vibe-widget-actions [data-spw-palette-probe-active="true"]) {
  background: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 12%, var(--surface-strong, rgba(255, 255, 255, 0.92)));
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 38%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 14%, transparent),
    0 0 16px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 10%, transparent);
}

:where(.vibe-widget-meta) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  align-items: center;
}

:where(.vibe-widget-state) {
  color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 74%, var(--ink) 26%);
  font-weight: 600;
}

:where(.vibe-widget-status) {
  min-block-size: 1.15rem;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.8rem);
}

:where(.vibe-widget-status[data-status="info"]) {
  color: color-mix(in srgb, var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)) 68%, var(--ink) 32%);
}

:where(.vibe-widget-status[data-status="success"]) {
  color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 72%, var(--ink) 28%);
}

:where(.wonder-memory-strip) {
  display: grid;
  gap: 0.65rem;
  margin-block: 0.2rem 0.35rem;
  padding: 0.8rem 0.95rem;
  border: 1px dashed color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 28%, transparent);
  border-radius: calc(var(--shape-surface, 10px) - 2px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 10%, var(--surface-strong, rgba(255, 255, 255, 0.92))) 0%,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 94%, transparent) 58%,
      color-mix(in srgb, var(--delight-color, var(--op-object-color, #c68a22)) 8%, var(--surface-panel-strong, rgba(255, 255, 255, 0.94))) 100%
    );
}

:where(.wonder-memory-copy) {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-size-sm, 0.92rem);
  line-height: 1.55;
  max-inline-size: 68ch;
}

:where(.wonder-memory-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: stretch;
}

:where(.wonder-memory-actions .operator-chip[data-site-setting-active="true"]) {
  background: color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 12%, var(--surface-strong, rgba(255, 255, 255, 0.92)));
  border-color: color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 44%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 16%, transparent),
    0 0 16px color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 12%, transparent);
  color: var(--wonder-accent-color, var(--active-op-color, #008080));
}

:where(.wonder-memory-actions .spec-pill) {
  background: color-mix(in srgb, var(--wonder-accent-color, var(--active-op-color, #008080)) 8%, var(--surface-strong, rgba(255, 255, 255, 0.92)));
}

:where(.palette-probe) {
  display: grid;
  gap: 0.72rem;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 18%, var(--spw-shell-line));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 10%, var(--surface-strong, rgba(255, 255, 255, 0.92))), transparent 62%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--spw-palette-probe-2, var(--op-object-color, #c68a22)) 12%, transparent), transparent 24%),
    var(--spw-shell-panel-bg-strong);
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(.palette-probe-header) {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

:where(.palette-probe-header > div) {
  display: grid;
  gap: 0.28rem;
}

:where(.palette-probe-kicker) {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(.palette-probe-title) {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.18;
}

:where(.palette-probe-copy) {
  margin: 0;
  color: var(--ink-soft);
  max-inline-size: 70ch;
}

:where(.palette-probe-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

:where(.vibe-widget-actions .operator-chip,
       .wonder-memory-actions .operator-chip,
       .palette-probe-actions .operator-chip,
       .market-card .operator-chip) {
  justify-content: center;
}

:where(.palette-probe-actions [data-site-setting-active="true"],
       .palette-probe-actions [data-spw-palette-probe-active="true"]) {
  background: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 12%, var(--surface-strong, rgba(255, 255, 255, 0.92)));
  border-color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 38%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 14%, transparent),
    0 0 16px color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 10%, transparent);
}

:where(.palette-probe-swatches) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  align-items: center;
}

:where(.palette-probe-chip) {
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 0.32rem;
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1, var(--spw-shell-line)) 16%, var(--spw-shell-line));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 18%, transparent);
}

:where(.palette-probe-chip:nth-child(1)) { background: var(--spw-palette-probe-1, var(--active-op-color, #008080)); }
:where(.palette-probe-chip:nth-child(2)) { background: var(--spw-palette-probe-2, var(--op-object-color, #c68a22)); }
:where(.palette-probe-chip:nth-child(3)) { background: var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)); }
:where(.palette-probe-chip:nth-child(4)) { background: var(--spw-palette-probe-4, var(--op-probe-color, #6a3fb8)); }

:where(.palette-probe-state) {
  color: color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 74%, var(--ink) 26%);
  font-weight: 600;
}

:where(.market-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--spw-shell-panel-gap);
}

:where(.market-card) {
  position: relative;
  display: grid;
  gap: 0.58rem;
  min-height: 100%;
  overflow: clip;
  padding: var(--spw-shell-card-pad);
  border: 1px solid color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 16%, var(--spw-shell-line));
  border-radius: var(--shape-surface, 10px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spw-palette-probe-1, var(--active-op-color, #008080)) 7%, transparent), transparent 34%),
    var(--spw-shell-panel-bg-strong);
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(.market-card::before) {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 0.22rem;
  background:
    linear-gradient(
      90deg,
      var(--spw-palette-probe-1, var(--active-op-color, #008080)),
      var(--spw-palette-probe-2, var(--op-object-color, #c68a22)),
      var(--spw-palette-probe-3, var(--op-ref-color, #1d57a3)),
      var(--spw-palette-probe-4, var(--op-probe-color, #6a3fb8))
    );
  opacity: 0.76;
}

:where(.market-card > *) {
  position: relative;
  z-index: 1;
}

:where(.market-card p) {
  margin: 0;
  color: var(--ink-soft);
}

:where(.market-card h3) {
  margin: 0;
  color: var(--ink);
}

:where(.market-card .operator-chip) {
  margin-top: auto;
}

:where(.site-hero .topic-photo-card) {
  min-height: 100%;
}

:where(.site-hero .topic-photo-card[data-spw-image-prominence="hero"]) {
  align-self: stretch;
}

:where(.site-hero .topic-photo-card[data-spw-image-prominence="hero"] img) {
  min-height: 100%;
  aspect-ratio: 4 / 5;
}

:where(.site-hero .topic-photo-card[data-spw-image-shape="square"] img) {
  aspect-ratio: 1 / 1;
}

:where(.site-hero .topic-photo-card[data-spw-image-shape="landscape"] img) {
  aspect-ratio: 16 / 10;
}

@media (max-width: 860px) {
  :where(.topic-hero-grid) {
    grid-template-columns: 1fr;
  }

  :where(.vibe-widget--feature) {
    grid-column: auto;
  }

  :where(.site-hero .topic-photo-card[data-spw-image-prominence="hero"] img) {
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   4. Shared philosophy surfaces
   ========================================================================== */

:where(body[data-spw-surface="software"]) {
  --spw-philosophy-panel:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.92)) 94%, transparent),
      color-mix(in srgb, var(--surface-panel, rgba(244, 241, 236, 0.96)) 94%, transparent)
    );
  --spw-philosophy-paper:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-strong, rgba(255, 255, 255, 0.96)) 96%, transparent),
      color-mix(in srgb, var(--surface-panel-strong, rgba(246, 244, 240, 0.96)) 96%, transparent)
    );
  --spw-philosophy-line:
    color-mix(in srgb, var(--active-op-color, #008080) 20%, var(--spw-shell-line));
}

:where(.intent-lattice) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--spw-shell-panel-gap);
  margin-block: var(--space-sm, 0.8rem) var(--space-md, 1rem);
}

:where(.intent-cluster) {
  --intent-accent: var(--active-op-color, #008080);
  display: grid;
  gap: 0.72rem;
  min-width: 0;
  padding: clamp(0.95rem, 1.7vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--intent-accent) 22%, var(--spw-philosophy-line, var(--spw-shell-line)));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background: var(--spw-philosophy-panel, var(--spw-shell-card-bg-strong));
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(.intent-cluster[data-spw-intent="orient"]) {
  --intent-accent: var(--op-frame-color, #178282);
}

:where(.intent-cluster[data-spw-intent="inspect"]) {
  --intent-accent: var(--op-probe-color, #4a2180);
}

:where(.intent-cluster[data-spw-intent="commit"]) {
  --intent-accent: var(--op-action-color, #0c5f5f);
}

:where(.intent-cluster[data-spw-intent="project"]) {
  --intent-accent: var(--op-surface-color, #178282);
}

:where(.intent-cluster-kicker) {
  margin: 0;
  color: color-mix(in srgb, var(--intent-accent) 70%, var(--ink-soft));
  font-size: var(--text-size-xs, 0.76rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:where(.intent-cluster h3) {
  margin: 0;
  font-size: clamp(1rem, 1.1rem + 0.22vw, 1.18rem);
  text-wrap: balance;
}

:where(.intent-cluster ul,
       .context-edge-list) {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.intent-cluster li,
       .context-edge-list li) {
  min-width: 0;
}

:where(.intent-cluster li > a,
       .context-edge-list li > a) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

:where(.intent-cluster li > a:hover,
       .intent-cluster li > a:focus-visible,
       .context-edge-list li > a:hover,
       .context-edge-list li > a:focus-visible) {
  text-decoration: underline;
}

:where(.intent-token) {
  flex: 0 0 auto;
  padding: 0.12rem 0.42rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, currentColor 74%, var(--ink-soft));
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

:where(.intent-link-note,
       .context-edge-note) {
  display: block;
  margin-top: 0.24rem;
  color: var(--ink-soft);
  font-size: var(--text-size-sm, 0.9rem);
  line-height: 1.5;
}

:where(.context-edges) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--spw-shell-panel-gap);
  margin-top: var(--space-md, 1rem);
}

:where(.context-edge-card) {
  --edge-accent: var(--active-op-color, #008080);
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: clamp(0.95rem, 1.7vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--edge-accent) 24%, var(--spw-philosophy-line, var(--spw-shell-line)));
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background: var(--spw-philosophy-paper, var(--spw-shell-card-bg));
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(.context-edge-card[data-spw-edge="nearby"]) {
  --edge-accent: var(--op-ref-color, #1d57a3);
}

:where(.context-edge-card[data-spw-edge="subsequent"]) {
  --edge-accent: var(--op-probe-color, #4a2180);
}

:where(.context-edge-card[data-spw-edge="projected"]) {
  --edge-accent: var(--op-surface-color, #178282);
}

:where(.context-edge-card h3) {
  margin: 0;
  font-size: clamp(1rem, 1.1rem + 0.22vw, 1.16rem);
  text-wrap: balance;
}

:where(.semantic-contract-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--spw-shell-panel-gap);
  margin-block: var(--space-sm, 0.8rem) var(--space-md, 1rem);
}

:where(.semantic-contract-card) {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  min-height: 100%;
  padding: clamp(0.95rem, 1.7vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--spw-philosophy-line, var(--spw-shell-line-strong)) 70%, transparent);
  border-radius: calc(var(--shape-surface, 10px) - 1px);
  background: var(--spw-philosophy-panel, var(--spw-shell-card-bg-strong));
  box-shadow: var(--card-highlight), var(--card-shadow);
}

:where(.semantic-contract-token) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--active-op-color, #008080) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-op-color, #008080) 6%, var(--surface-strong, rgba(255, 255, 255, 0.72)));
  color: color-mix(in srgb, var(--active-op-color, #008080) 76%, var(--ink) 24%);
  font-family: var(--site-mono-font, "JetBrains Mono", monospace);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

:where(.semantic-contract-card strong) {
  color: var(--ink);
  font-size: 1rem;
}

:where(.semantic-contract-card p) {
  margin: 0;
  color: var(--ink-soft);
}

/* ==========================================================================
   5. Pretext lab
   ========================================================================== */

:where([data-spw-features~="pretext-lab"] .pretext-lab-grid,
       [data-spw-features~="pretext-lab"] .pretext-surface-grid) {
  display: grid;
  gap: var(--spw-shell-panel-gap);
}

:where([data-spw-features~="pretext-lab"] .pretext-lab-grid) {
  grid-template-columns: minmax(0, 1.25fr) minmax(min(100%, var(--grid-min-panel, 17rem)), 0.85fr);
}

:where([data-spw-features~="pretext-lab"] .pretext-surface-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card, 15rem)), 1fr));
}

:where([data-spw-features~="pretext-lab"] .pretext-controls-panel,
       [data-spw-features~="pretext-lab"] .pretext-summary-panel,
       [data-spw-features~="pretext-lab"] .pretext-surface) {
  display: grid;
  gap: var(--gap-block-stack, 0.85rem);
}

:where([data-spw-features~="pretext-lab"] .pretext-field) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 0.4rem);
}

:where([data-spw-features~="pretext-lab"] .pretext-control-grid,
       [data-spw-features~="pretext-lab"] .pretext-metric-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-compact, 12rem)), 1fr));
  gap: var(--gap-inline-flow, 0.8rem);
}

:where([data-spw-features~="pretext-lab"] .pretext-textarea,
       [data-spw-features~="pretext-lab"] .pretext-field input[type='range']) {
  width: 100%;
  box-sizing: border-box;
}

:where([data-spw-features~="pretext-lab"] .pretext-textarea) {
  min-height: 12rem;
  resize: vertical;
  padding: var(--inset-component);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-component, 6px);
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  line-height: var(--site-line-height, 1.55);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: border-color var(--duration-fast) var(--ease-mechanical),
              box-shadow var(--duration-fast) var(--ease-mechanical);
}

:where([data-spw-features~="pretext-lab"] .pretext-textarea:focus-visible,
       [data-spw-features~="pretext-lab"] .pretext-field input[type='range']:focus-visible,
       [data-spw-features~="pretext-lab"] .pretext-toggle input:focus-visible) {
  outline: none;
  border-color: var(--active-op-color, #008080);
  box-shadow: var(--focus-ring);
}

:where([data-spw-features~="pretext-lab"] .pretext-preset-row) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-tight, 0.55rem);
}

:where([data-spw-features~="pretext-lab"] .pretext-preset-row > *) {
  flex: 1 1 min(100%, 8rem);
  justify-content: center;
}

:where([data-spw-features~="pretext-lab"] .pretext-toggle) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.55rem);
  width: fit-content;
  max-width: 100%;
}

:where([data-spw-features~="pretext-lab"] .pretext-toggle input) {
  margin: 0;
}

:where([data-spw-features~="pretext-lab"] .pretext-metric) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs, 0.3rem);
  padding: var(--inset-element);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-component, 6px);
  background: var(--surface-soft);
}

:where([data-spw-features~="pretext-lab"] .pretext-preview) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs, 0.45rem);
  min-width: 0;
  container-type: inline-size;
}

:where([data-spw-features~="pretext-lab"] .pretext-line) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-sm, 0.7rem);
  padding: var(--inset-element);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-element, 4px);
  background: var(--surface-strong);
  box-shadow: var(--shadow-sm);
}

:where([data-spw-features~="pretext-lab"] .pretext-line-index,
       [data-spw-features~="pretext-lab"] .pretext-line-width) {
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.82rem);
}

:where([data-spw-features~="pretext-lab"] .pretext-line-text) {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

:where([data-spw-features~="pretext-lab"] .pretext-status-error) {
  color: var(--valence-neg, #7a1515);
}

/* ==========================================================================
   4. RPG gameplay
   ========================================================================== */

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-kit) {
  border-style: dashed;
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-dashboard) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-compact, 12rem)), 1fr));
  gap: var(--gap-inline-flow, 0.65rem);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-stat) {
  display: grid;
  gap: var(--space-3xs, 0.25rem);
  min-width: 0;
  padding: var(--inset-element);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-component, 6px);
  background: var(--surface, rgba(255, 255, 255, 0.62));
  box-shadow: var(--shadow-sm);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-stat-label) {
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.68rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-stat-value) {
  min-width: 0;
  color: var(--teal-deep, #004d4d);
  font-size: var(--text-size-base, 1rem);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card, 15rem)), 1fr));
  gap: clamp(1rem, 3vw, 1.5rem);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-panel) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block-stack, 0.75rem);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-panel--brief) {
  grid-column: 1 / -1;
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-field) {
  display: grid;
  gap: var(--space-3xs, 0.35rem);
  font-size: var(--text-size-sm, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-input,
       [data-spw-features~="rpg-gameplay"] .rpg-gameplay-line-input) {
  width: 100%;
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-mechanical),
              box-shadow var(--duration-fast) var(--ease-mechanical);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-input) {
  min-height: 3.25rem;
  padding: var(--inset-component);
  resize: vertical;
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-line-input) {
  min-height: calc(var(--touch-target-min, 2.75rem) * 0.85);
  padding: var(--inset-element);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-input:focus-visible,
       [data-spw-features~="rpg-gameplay"] .rpg-gameplay-line-input:focus-visible) {
  outline: none;
  border-color: var(--active-op-color, #008080);
  box-shadow: var(--focus-ring);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.5rem);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-row) {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) minmax(7rem, 1.4fr) auto;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  padding: var(--space-xs, 0.55rem);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 12px);
  background: var(--surface-soft);
  transition: transform var(--duration-fast) var(--ease-mechanical),
              box-shadow var(--duration-fast) var(--ease-mechanical);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-row.is-active) {
  border-color: var(--active-op-border, #008080);
  box-shadow: var(--shadow-active);
  transform: translateY(-1px);
}

:where([data-spw-features~="rpg-gameplay"] .rpg-gameplay-clock progress) {
  width: 100%;
  min-width: 4rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  accent-color: var(--active-op-color, #008080);
}

/* ==========================================================================
   5. Runtime settings
   ========================================================================== */

:where(.settings-presets) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--gap-inline-flow, 0.65rem);
}

:where(.settings-preset-btn) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs, 0.25rem);
  min-block-size: calc(var(--touch-target-min, 2.75rem) * 1.35);
  padding: var(--inset-component);
  border: 2px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--surface-soft);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    background-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    box-shadow var(--duration-fast, 140ms) var(--ease-mechanical, ease);
    
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, #008080) 14%, transparent) 0 2.9rem,
      transparent 2.9rem
    );
  background-repeat: no-repeat;
  background-size: calc(100% - 2rem) 1px;
  background-position: 1rem 0.8rem;
}

:where(.settings-preset-btn:hover, .settings-preset-btn:focus-visible) {
  transform: translateY(-2px);
  border-color: var(--active-op-color, #008080);
  background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
  box-shadow: var(--shadow-base);
}

:where(.settings-category) {
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  overflow: hidden;
  container-type: inline-size;
  background: var(--surface);
  box-shadow: var(--shadow-base);
  transition: box-shadow var(--duration-base) var(--ease-settle);
  
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, #008080) 10%, transparent) 0 3rem,
      transparent 3rem
    );
  background-repeat: no-repeat;
  background-size: calc(100% - 2rem) 1px;
  background-position: 1rem 0.9rem;
}

:where(.settings-category[open]) {
  box-shadow: var(--shadow-active);
}

:where(.settings-category + .settings-category) {
  margin-top: var(--space-xs, 0.5rem);
}

:where(.settings-category-header) {
  min-block-size: var(--touch-target-min, 2.75rem);
  padding: 0.75rem 1rem;
  font-size: var(--text-size-sm, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-soft);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  transition: background var(--duration-fast) var(--ease-mechanical);
}

:where(.settings-category-header:hover) {
  background: var(--surface-strong);
  color: var(--ink);
}

:where(.settings-category-header::-webkit-details-marker) {
  display: none;
}

:where(.settings-category-header::before) {
  content: '{';
  display: inline-block;
  font-size: var(--text-size-xs, 0.72rem);
  color: var(--active-op-color, #008080);
  transition: color var(--duration-fast, 140ms);
}

:where(.settings-category[open] > .settings-category-header::before) {
  content: '}';
}

:where(.settings-category[open] > .settings-category-header) {
  border-bottom: 1px solid var(--spw-shell-line);
  background: var(--surface-strong);
}

:where(.pwa-status-card) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs, 0.2rem);
  padding: var(--inset-component);
  border: 1px solid var(--spw-shell-line);
  border-radius: var(--shape-surface, 10px);
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--active-op-color, #008080) 12%, transparent) 0 2.7rem,
      transparent 2.7rem
    );
  background-repeat: no-repeat;
  background-size: calc(100% - 2rem) 1px;
  background-position: 1rem 0.75rem;
}

:where(.pwa-status-value[data-status='active']) { color: var(--valence-pos, #008080); }
:where(.pwa-status-value[data-status='inactive']) { color: var(--ink-soft); }
:where(.pwa-status-value[data-status='error']) { color: var(--valence-neg, #d32f2f); }

/* ==========================================================================
   6. Navigator
   ========================================================================== */

:where([data-spw-features~='navigator'] .spw-nav) {
  position: fixed;
  left: 0;
  top: var(--header-height, 4rem);
  bottom: 0;
  z-index: var(--layer-docked, 900);
  display: flex;
  flex-direction: row;
  pointer-events: none;
}

:where([data-spw-features~='navigator'] .spw-nav.is-open) {
  right: 0;
  pointer-events: all;
}

:where([data-spw-features~='navigator'] .spw-nav-trigger) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-right: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.72;
  transition:
    background var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    border-color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    color var(--duration-fast, 140ms) var(--ease-mechanical, ease),
    opacity var(--duration-fast, 140ms) var(--ease-mechanical, ease);
  color: var(--ink-soft);
}

:where([data-spw-features~='navigator'] .spw-nav-trigger:hover,
       [data-spw-features~='navigator'] .spw-nav-trigger:focus-visible,
       [data-spw-features~='navigator'] .spw-nav.is-open .spw-nav-trigger) {
  background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
  border-right-color: var(--active-op-border, rgba(0, 128, 128, 0.22));
  color: var(--active-op-color, #008080);
  opacity: 1;
}

:where([data-spw-features~='navigator'] .spw-nav-panel) {
  width: clamp(220px, 24vw, 280px);
  height: 100%;
  background: var(--floating-bg, rgba(255, 255, 255, 0.95));
  -webkit-backdrop-filter: blur(var(--material-blur, 12px));
  backdrop-filter: blur(var(--material-blur, 12px));
  border-right: 1px solid var(--spw-shell-line-strong);
  box-shadow: var(--floating-shadow-side);
  display: flex;
  flex-direction: column;
  pointer-events: all;
  transform: translateX(calc(-100% - 28px));
  transition: transform var(--pivot-arc-duration, 260ms) var(--pivot-arc-ease, cubic-bezier(0.22, 0, 0.0, 1));
}

:where([data-spw-features~='navigator'] .spw-nav.is-open .spw-nav-panel) {
  visibility: visible;
  transform: translateX(0);
}

:where([data-spw-features~='navigator'] .spw-nav-item-btn) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs, 0.5rem);
  width: 100%;
  padding: 0.5rem var(--inset-surface, 0.9rem);
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-size-sm, 0.86rem);
  color: var(--ink);
  transition: background var(--duration-fast, 100ms) var(--ease-mechanical, ease);
}

:where([data-spw-features~='navigator'] .spw-nav-item-btn:hover) {
  background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.06));
}

:where([data-spw-features~='navigator'] .spw-nav-item-btn.is-active) {
  background: var(--active-op-bg-soft, rgba(0, 128, 128, 0.1));
  color: var(--active-op-color, #008080);
  position: relative;
}

:where([data-spw-features~='navigator'] .spw-nav-item-btn.is-active::before) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--active-op-color, #008080);
  border-radius: 0 2px 2px 0;
}

/* ==========================================================================
   8. Console
   ========================================================================== */

:where([data-spw-features~='console'] .spw-console) {
  position: fixed;
  right: var(--console-inline-inset, 1rem);
  bottom: var(--console-inline-inset, 1rem);
  z-index: var(--layer-floating, 100);
  width: min(30rem, calc(100vw - (var(--console-inline-inset, 1rem) * 2)));
  max-width: calc(100vw - (var(--console-inline-inset, 1rem) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.6rem);
  padding: var(--inset-surface, 0.9rem);
  border: 1px solid var(--spw-shell-line-strong);
  border-radius: var(--shape-floating, 16px);
  box-sizing: border-box;
  background: var(--floating-bg-warm, rgba(255, 251, 242, 0.92));
  box-shadow: var(--floating-shadow);
  -webkit-backdrop-filter: blur(var(--material-blur, 12px));
  backdrop-filter: blur(var(--material-blur, 12px));
  overflow-x: clip;
  container-type: inline-size;
  transition:
    opacity var(--duration-deliberate, 360ms) var(--ease-settle, ease),
    transform var(--duration-deliberate, 360ms) var(--ease-settle, ease),
    box-shadow var(--duration-deliberate, 360ms) var(--ease-settle, ease);
}

:where([data-spw-features~='console'] .spw-console.is-idle:not(:hover):not(:focus-within)) {
  opacity: 0.76;
  transform: translateY(0.22rem) scale(0.98);
  box-shadow: var(--shadow-active);
}

:where([data-spw-features~='console'] .spw-console.is-collapsed.is-idle:not(:hover):not(:focus-within)) {
  opacity: 0.64;
  transform: translateY(0.4rem) scale(0.96);
}

:where([data-spw-features~='console'] .spw-console-expand-btn,
       [data-spw-features~='console'] .spw-console-collapse-btn) {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: var(--text-size-xs, 0.68rem);
  line-height: 1;
  padding: 0.2rem 0.3rem;
  border-radius: var(--shape-element, 4px);
  transition: color var(--duration-fast, 120ms), background var(--duration-fast, 120ms);
  flex-shrink: 0;
}

:where([data-spw-features~='console'] .spw-console-expand-btn:hover,
       [data-spw-features~='console'] .spw-console-collapse-btn:hover) {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   9. Responsive adjustments
   ========================================================================== */

@container (max-width: 32rem) {
  :where(.intent-lattice,
         .context-edges,
         .semantic-contract-grid) {
    grid-template-columns: 1fr;
  }

  :where(.intent-cluster li > a,
         .context-edge-list li > a) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  :where([data-spw-features~='pretext-lab'] .pretext-lab-grid) {
    grid-template-columns: 1fr;
  }

  :where([data-spw-features~='pretext-lab'] .pretext-line) {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  :where(.settings-actions) {
    align-items: stretch;
  }

  :where(.settings-actions > *) {
    width: 100%;
  }
}

@container (max-width: 24rem) {
  :where([data-spw-features~='console'] .spw-console-header-line,
         [data-spw-features~='console'] .spw-console-collapsed-bar) {
    align-items: flex-start;
  }

  :where([data-spw-features~='console'] .spw-console-mode-buttons) {
    width: 100%;
  }

  :where([data-spw-features~='console'] .spw-console-mode-buttons > *) {
    flex: 1 1 min(100%, 7rem);
  }

  :where([data-spw-features~='console'] .spw-console-copy,
         [data-spw-features~='console'] .spw-console-history-copy) {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  :where([data-spw-features~='console'] .spw-console) {
    left: var(--console-inline-inset, 1rem);
    width: auto;
    padding: 0.7rem 0.75rem;
    gap: 0.5rem;
  }
}