/* ==========================================================================
   spw-components.css
   --------------------------------------------------------------------------
   Purpose
   - Structural component layer for reusable Spw frames, cards, panels, chips,
     metadata rails, readable stacks, and pretext-aware text hosts.
   - Provide low-cost, tunable “metamaterial” surfaces that support semantic
     instrumentation without requiring expensive filters or layout-heavy effects.
   - Expose component contracts that future JS runtimes can target through
     documented custom properties and data attributes.

   Design rules
   - Reading and text flow take priority over ornament.
   - Components remain legible when enhancement is off.
   - Width / lineation changes are driven by JS measurement; CSS should not
     animate width or force expensive reflow loops.
   - Use data attributes for semantics and runtime state.
   - Keep specificity low and prefer generic, composable utilities.
   - Support recent route HTML while remaining reusable for later surfaces.

   Expected collaborators
   - /public/css/spw-reset.css
   - /public/css/spw-typography.css
   - /public/css/spw-typography-context.css
   - route surface files
   ========================================================================== */

/* ==========================================================================
   1. Component tokens
   ========================================================================== */

:root {
  --component-gap: 0.9rem;
  --component-gap-tight: 0.55rem;
  --component-gap-loose: 1.2rem;
  --component-gap-roomy: 1.6rem;

  --component-pad: 0.9rem;
  --component-pad-tight: 0.65rem;
  --component-pad-loose: 1.15rem;
  --component-pad-roomy: 1.45rem;

  --component-radius: var(--shape-surface, 10px);
  --component-radius-tight: var(--shape-component, 6px);
  --component-radius-loose: var(--shape-floating, 16px);
  --component-radius-pill: var(--shape-control, 0.78rem);

  --component-border: 1px solid var(--line, rgba(0, 128, 128, 0.18));
  --component-border-strong: 1px solid var(--line-strong, rgba(0, 128, 128, 0.32));
  --component-border-quiet: 1px solid color-mix(in srgb, var(--line, rgba(0, 128, 128, 0.18)) 72%, transparent);

  --component-surface: var(--surface, rgba(255, 255, 255, 0.92));
  --component-surface-strong: var(--surface-strong, rgba(255, 255, 255, 0.98));
  --component-surface-soft: color-mix(in srgb, var(--component-surface, rgba(255, 255, 255, 0.92)) 86%, transparent);
  --component-surface-matte: color-mix(in srgb, var(--component-surface-strong, rgba(255,255,255,0.98)) 94%, var(--bg, #f7f4ee));
  --component-surface-elevated: linear-gradient(
      180deg,
      rgba(255,255,255,0.18),
      transparent 62%
    ),
    var(--component-surface-strong, rgba(255,255,255,0.98));

  --component-shadow: var(--shadow, 0 10px 24px rgba(0, 0, 0, 0.06));
  --component-shadow-active: var(--shadow-active, 0 16px 34px rgba(0, 0, 0, 0.10));
  --component-shadow-quiet: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.03));

  --component-accent: var(--active-op-color, var(--teal, #008080));
  --component-accent-soft: color-mix(in srgb, var(--component-accent, #008080) 20%, transparent);
  --component-accent-strong: color-mix(in srgb, var(--component-accent, #008080) 42%, transparent);
  --component-accent-wash: color-mix(in srgb, var(--component-accent, #008080) 8%, transparent);

  --component-measure: 68ch;
  --component-measure-tight: 58ch;
  --component-measure-wide: 78ch;
  --component-code-measure: 84ch;

  --component-transition-fast: var(--duration-fast, 120ms) var(--ease-mechanical, ease);
  --component-transition-base: var(--duration-base, 180ms) var(--ease-mechanical, ease);
  --component-transition-deliberate: var(--duration-deliberate, 260ms) var(--ease-mechanical, ease);

  --pretext-line-gap: 0.18rem;
  --pretext-line-height: 1.55;
  --pretext-width: auto;
  --pretext-canonical-width: auto;
  --pretext-projected-width: auto;
  --pretext-influence: 0;
  --pretext-direction: 0;
  --pretext-scaffold-opacity: 0.74;

  --component-rail-width: 3px;
  --component-header-min-height: 1.5rem;
  --component-chip-height: 2rem;
}

/* ==========================================================================
   2. Base component ownership
   ========================================================================== */

:where(
  [data-spw-component-kind="frame"],
  [data-spw-component-kind="panel"],
  [data-spw-component-kind="card"],
  [data-spw-component-kind="surface"],
  [data-spw-component-kind="lens"],
  [data-spw-component-kind="metric"],
  [data-spw-kind="frame"],
  [data-spw-kind="panel"],
  [data-spw-kind="card"],
  [data-spw-kind="surface"],
  [data-spw-kind="lens"],
  [data-spw-kind="metric"],
  .site-frame,
  .frame-card,
  .media-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
) {
  position: relative;
  min-width: 0;
  isolation: isolate;
  container-type: inline-size;
}

:where(
  [data-spw-component-kind="frame"] > *,
  [data-spw-component-kind="panel"] > *,
  [data-spw-component-kind="card"] > *,
  [data-spw-component-kind="surface"] > *,
  [data-spw-component-kind="lens"] > *,
  [data-spw-component-kind="metric"] > *,
  [data-spw-kind="frame"] > *,
  [data-spw-kind="panel"] > *,
  [data-spw-kind="card"] > *,
  [data-spw-kind="surface"] > *,
  [data-spw-kind="lens"] > *,
  [data-spw-kind="metric"] > *
) {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ==========================================================================
   3. Slot conventions
   ========================================================================== */

:where([data-spw-slot]) {
  min-width: 0;
}

:where([data-spw-slot="header"]) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
  min-width: 0;
}

:where(.spw-semantic-seam) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  min-width: 0;
}

:where(.spw-semantic-seam:empty, .spw-semantic-seam[hidden], .spw-semantic-seam[data-spw-empty="true"]) {
  display: none;
}

:where([data-spw-slot="header"]) > :where(.spw-component-meta, .spw-component-guides) {
  min-width: 0;
}

:where(.spw-semantic-seam > .spw-component-guides) {
  margin-inline-start: 0;
  justify-content: flex-start;
}

:where([data-spw-slot="meta"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  min-width: 0;
}

:where([data-spw-slot="actions"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  min-width: 0;
}

:where([data-spw-slot="figure"]) {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

:where([data-spw-slot="caption"]) {
  color: var(--ink-soft, rgba(0,0,0,0.6));
  font-size: 0.88em;
  max-inline-size: 65ch;
}

/* ==========================================================================
   3b. Module semantics
   ========================================================================== */

:where(
  [data-spw-module],
  .intent-cluster,
  .context-edge-card,
  .semantic-contract-card
) {
  --spw-perspective-weight: 0.5;
  --spw-potential-weight: 0.5;
  --spw-salience-weight: 0.34;
  --spw-dimension-count: 1;
}

:where(
  [data-spw-module],
  .intent-cluster,
  .context-edge-card,
  .semantic-contract-card
)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(1px + (var(--spw-potential-weight) * 3px));
  opacity: calc(0.14 + (var(--spw-salience-weight) * 0.42));
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent, var(--teal, #008080)) calc(12% + (var(--spw-perspective-weight) * 42%)), transparent),
      color-mix(in srgb, var(--component-accent, var(--teal, #008080)) calc(8% + (var(--spw-dimension-count) * 4%)), transparent)
    );
}

:where(
  [data-spw-module][data-spw-module-hydration="ready"],
  .intent-cluster[data-spw-module-hydration="ready"],
  .context-edge-card[data-spw-module-hydration="ready"],
  .semantic-contract-card[data-spw-module-hydration="ready"]
) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--teal, #008080)) calc(4% + (var(--spw-potential-weight) * 12%)), transparent),
    var(--component-shadow-quiet);
}

:where(
  [data-spw-module][data-spw-salience-state="active"],
  .intent-cluster[data-spw-salience-state="active"],
  .context-edge-card[data-spw-salience-state="active"],
  .semantic-contract-card[data-spw-salience-state="active"]
) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--teal, #008080)) calc(8% + (var(--spw-salience-weight) * 14%)), transparent),
    var(--component-shadow-active);
}

:where(
  [data-spw-module][data-spw-context-match="active"],
  .intent-cluster[data-spw-context-match="active"],
  .context-edge-card[data-spw-context-match="active"],
  .semantic-contract-card[data-spw-context-match="active"]
) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--component-accent, var(--teal, #008080)) calc(10% + (var(--spw-context-match-weight) * 18%)), transparent),
    var(--component-shadow);
}

/* ==========================================================================
   4. Bleed utilities
   ========================================================================== */

:where(.spw-bleed) {
  --local-bleed-offset: var(--surface-padding, var(--component-pad, 0.9rem));
  width: calc(100% + (var(--local-bleed-offset) * 2));
  margin-inline-start: calc(var(--local-bleed-offset) * -1);
  margin-inline-end: calc(var(--local-bleed-offset) * -1);
}

:where(.spw-bleed-block) {
  --local-bleed-offset: var(--surface-padding, var(--component-pad, 0.9rem));
  margin-block-start: calc(var(--local-bleed-offset) * -1);
  margin-block-end: calc(var(--local-bleed-offset) * -1);
}

:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed:first-child,
:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed-block:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed:last-child,
:where(.site-frame, .frame-panel, .frame-card, .plan-card) > .spw-bleed-block:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

/* ==========================================================================
   5. Spatial stance utilities
   ========================================================================== */

:where([data-spw-stance="entry"]) {
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--ink, currentColor) 78%, transparent);
  transition: color var(--component-transition-deliberate, 260ms ease);
}

:where([data-spw-stance="ground"]) {
  letter-spacing: 0.01em;
  transition: color var(--component-transition-deliberate, 260ms ease);
}

:where([data-spw-stance="exit"]) {
  opacity: 0.76;
  letter-spacing: 0.01em;
  transition:
    opacity var(--component-transition-deliberate, 260ms ease),
    color   var(--component-transition-deliberate, 260ms ease);
}

/* ==========================================================================
   6. Shared card / panel shell
   ========================================================================== */

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
) {
  display: grid;
  align-content: start;
  gap: var(--component-gap-tight, 0.55rem);
  min-width: 0;
  min-height: 100%;
  padding: var(--component-pad, 0.9rem);
  color: var(--ink, inherit);
  background: var(--component-surface, rgba(255, 255, 255, 0.92));
  border: var(--component-border, 1px solid rgba(0, 128, 128, 0.18));
  border-radius: var(--component-radius-tight, 8px);
  box-shadow: var(--component-shadow, 0 10px 24px rgba(0, 0, 0, 0.06));
  overflow: clip;
  box-sizing: border-box;
  transition:
    background   var(--component-transition-deliberate, 260ms ease),
    border-color var(--component-transition-base, 180ms ease),
    box-shadow   var(--component-transition-deliberate, 260ms ease),
    color        var(--component-transition-fast, 120ms ease),
    transform    var(--component-transition-fast, 120ms ease);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .plan-card,
  .compare-card,
  .spec-column
) {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--component-accent, #008080) 28%, var(--line, transparent));
}

a.frame-card,
.frame-card > a:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--component-gap-tight, 0.55rem);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

:where(.frame-card, .frame-card > a:first-child) {
  justify-items: start;
}

:where(.frame-card, .frame-card > a:first-child) > :is(
  .spw-semantic-seam,
  p,
  ul,
  ol,
  figure,
  .frame-note,
  .frame-copy,
  .card-sub-links,
  span:not(.frame-card-sigil):not(.spw-component-tag):not(.spw-guide-chip)
) {
  justify-self: stretch;
}

:where(.frame-card, .frame-card > a:first-child) > :is(strong, h2, h3, h4, h5, h6) {
  max-inline-size: 30ch;
  line-height: 1.22;
  text-wrap: balance;
}

:where(.frame-card, .frame-card > a:first-child) > :is(
  p,
  .frame-note,
  .frame-copy,
  span:not(.frame-card-sigil):not(.spw-component-tag):not(.spw-guide-chip)
) {
  max-inline-size: 42ch;
  text-wrap: pretty;
}

a.frame-card:is(:hover, :focus-visible),
.frame-card > a:first-child:is(:hover, :focus-visible) {
  color: inherit;
  text-decoration: none;
}

.frame-card > a:first-child:last-child {
  min-block-size: 100%;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
) > :last-child:is(.operator-chip, .media-card-cta, .frame-operators, .plan-links, .card-sub-links, [data-spw-slot="actions"]) {
  margin-top: auto;
}

.card-sub-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.5rem;
  min-width: 0;
}

.card-sub-links a {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 0.22rem;
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}

.card-sub-links a[data-spw-nav-tokenized="true"]::before,
.card-sub-links a[data-spw-nav-tokenized="true"]::after {
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 0.76em;
  color: color-mix(in srgb, var(--component-accent, #008080) 58%, transparent);
}

.card-sub-links a[data-spw-nav-tokenized="true"]::before {
  content: attr(data-spw-nav-prefix);
}

.card-sub-links a[data-spw-nav-tokenized="true"]::after {
  content: attr(data-spw-nav-postfix);
}

.card-sub-links a:is(:hover, :focus-visible) {
  color: var(--component-accent, #008080);
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
) :is(
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, li, blockquote,
  pre, code,
  figure, figcaption,
  .frame-note, .frame-copy, .specimen-material, .operator-snippet-note,
  .plan-thesis, .plan-wonder p
) {
  min-width: 0;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
) :is(
  h2, h3, h4, p, ul, ol, pre, figure, figcaption
) {
  margin: 0;
}

:where(
  .frame-card,
  .media-card,
  .media-focus-card,
  .software-card,
  .operator-card,
  .frame-panel,
  .mode-panel,
  .plan-card,
  .compare-card,
  .spec-column
) :is(
  p,
  li,
  span:not(.frame-card-sigil):not(.media-card-tag):not(.media-focus-operator):not(.operator-symbol):not(.spec-pill):not(.plan-status)
) {
  line-height: 1.5;
  max-inline-size: 60ch;
}

/* state-ready shell */
.frame-card,
.media-focus-card,
.plan-card,
.compare-card,
.spec-column {
  position: relative;
}

.frame-card:hover,
.frame-card:focus-within,
.media-focus-card:hover,
.media-focus-card:focus-within,
.plan-card:hover,
.plan-card:focus-within,
.compare-card:hover,
.compare-card:focus-within,
.spec-column:hover,
.spec-column:focus-within {
  border-color: var(--active-op-border, var(--component-accent, #008080));
  background: var(--active-op-bg-soft, var(--component-surface-soft, rgba(0, 128, 128, 0.05)));
}

.frame-card-sigil,
.operator-symbol {
  display: inline-block;
  font-weight: 700;
  transition: color var(--component-transition-fast, 140ms ease);
}

.frame-card:hover .frame-card-sigil,
.frame-card:focus-within .frame-card-sigil,
.operator-symbol:hover,
.operator-symbol:focus-visible {
  color: var(--active-op-color, var(--component-accent, #008080));
}

/* ==========================================================================
   7. Site frame
   ========================================================================== */

:where(.site-frame) {
  --surface-gap: var(--surface-gap, var(--component-gap, 0.9rem));
  --surface-padding: var(--surface-padding, var(--component-pad-loose, 1.15rem));

  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
  min-width: 0;
  overflow: clip;
  padding: var(--surface-padding);
  border: var(--component-border, 1px solid rgba(0, 128, 128, 0.18));
  border-radius: var(--component-radius, 12px);
  background: var(--component-surface, rgba(255, 255, 255, 0.92));
  box-shadow: var(--component-shadow, 0 10px 24px rgba(0, 0, 0, 0.06));
  scroll-margin-top: calc(var(--header-height, 4rem) + 1rem);

  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
  background-repeat: no-repeat;
  background-size: calc(100% - (var(--surface-padding) * 2)) 1px;
  background-position: var(--surface-padding) 1rem;

  transition:
    background   var(--component-transition-deliberate, 260ms ease),
    border-color var(--component-transition-base, 180ms ease),
    box-shadow   var(--component-transition-deliberate, 260ms ease);
}

:where(.site-frame.is-active-frame) {
  border-color: var(--line-strong, color-mix(in srgb, var(--component-accent, #008080) 34%, transparent));
  background: var(--component-surface-strong, rgba(255, 255, 255, 0.98));
  box-shadow: var(--component-shadow-active, 0 16px 34px rgba(0, 0, 0, 0.10));
}

.site-frame h1 {
  font-size: clamp(1.55rem, 1.2rem + 2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.site-frame h2 {
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.site-frame h3 {
  font-size: clamp(0.92rem, 0.85rem + 0.5vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.site-lede,
.page-lede {
  font-size: clamp(1rem, 0.85rem + 0.9vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  opacity: 1;
}

/* ==========================================================================
   8. Hero + heading thresholds
   ========================================================================== */

:where(.site-hero) {
  gap: 1.1rem;
}

:where(.frame-topline, .frame-heading) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
  min-width: 0;
}

:where(.frame-topline) {
  min-height: var(--component-header-min-height);
  margin-bottom: -0.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in oklab, var(--component-accent, #008080) 16%, transparent);
  transition: border-color var(--component-transition-base, 180ms ease);
}

:where(.site-frame.is-active-frame .frame-topline) {
  border-bottom-color: color-mix(in oklab, var(--component-accent, #008080) 32%, transparent);
}

:where(.frame-heading > h2, .frame-heading > h3) {
  margin: 0;
}

/* ==========================================================================
   9. Role-based frame stance
   ========================================================================== */

:where(.site-frame[data-spw-role="probe"]) {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--op-probe-bg-soft, var(--component-accent-soft, rgba(0, 128, 128, 0.1))) 50%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="surface"]) {
  background-image:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--op-surface-bg-soft, var(--component-accent-soft, rgba(0, 128, 128, 0.1))) 40%, transparent) 0%,
      transparent 50%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="reference"]) {
  border-left-width: 2px;
  border-left-color: var(--op-ref-border, color-mix(in srgb, var(--component-accent, #008080) 22%, transparent));
  --component-measure: 74ch;
  --surface-gap: 1.3rem;
}

:where(.site-frame[data-spw-role="reference"] p) {
  line-height: 1.65;
}

:where(.site-frame[data-spw-role="status"]) {
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 12%, transparent) 0,
      transparent 42%
    );
}

:where(.site-frame[data-spw-role="routing"]) {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--component-accent, #008080) 24%, var(--line, transparent));
}

:where(.site-frame[data-spw-role="schema"]) {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent, #008080) 6%, transparent),
      transparent 32%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="gallery"]) {
  background-image:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--component-accent, #008080) 8%, transparent),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

:where(.site-frame[data-spw-role="broadcast"]) {
  background-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 10%, transparent) 0,
      transparent 28%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 18%, transparent) 0 4.5rem,
      transparent 4.5rem
    );
}

/* ==========================================================================
   10. Metamaterial selectors
   ========================================================================== */

:where([data-spw-metamaterial]) {
  --component-material-border: var(--component-border, 1px solid rgba(0, 128, 128, 0.18));
  --component-material-bg: var(--component-surface, rgba(255, 255, 255, 0.92));
  --component-material-shadow: var(--component-shadow, 0 10px 24px rgba(0, 0, 0, 0.06));
  background: var(--component-material-bg);
  border: var(--component-material-border);
  box-shadow: var(--component-material-shadow);
}

:where([data-spw-metamaterial="paper"]) {
  --component-material-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface, #fff) 96%, var(--component-accent-soft, rgba(0, 128, 128, 0.1))) 0%,
      var(--surface, #fff) 100%
    );
  --component-material-border: 1px solid color-mix(in srgb, var(--line, transparent) 82%, var(--component-accent-soft, rgba(0, 128, 128, 0.1)));
}

:where([data-spw-metamaterial="ledger"]) {
  --component-material-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent, #008080) 6%, transparent) 0 1px,
      transparent 1px 100%
    ),
    var(--component-surface, rgba(255, 255, 255, 0.92));
  --component-material-border: 1px solid color-mix(in srgb, var(--component-accent, #008080) 22%, var(--line, transparent));
}

:where([data-spw-metamaterial="signal"]) {
  --component-material-bg:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--component-accent, #008080) 10%, transparent) 0,
      transparent 30%
    ),
    var(--component-surface, rgba(255, 255, 255, 0.92));
  --component-material-border: 1px solid color-mix(in srgb, var(--component-accent, #008080) 30%, var(--line, transparent));
}

:where([data-spw-metamaterial="field"]) {
  --component-material-bg:
    radial-gradient(
      circle at 12% 18%,
      color-mix(in srgb, var(--component-accent, #008080) 9%, transparent) 0%,
      transparent 34%
    ),
    var(--component-surface, rgba(255, 255, 255, 0.92));
}

:where([data-spw-metamaterial="glass"]) {
  --component-material-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, #fff 14%, transparent) 0%,
      color-mix(in srgb, var(--component-surface, rgba(255, 255, 255, 0.92)) 92%, transparent) 100%
    );
  --component-material-border: 1px solid color-mix(in srgb, #fff 12%, var(--line, transparent));
}

:where([data-spw-metamaterial="shell"]) {
  --component-material-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--component-accent, #008080) 5%, transparent) 0%,
      transparent 48%
    ),
    var(--component-surface, rgba(255, 255, 255, 0.92));
  --component-material-border: 1px solid color-mix(in srgb, var(--component-accent, #008080) 18%, var(--line, transparent));
}

/* ==========================================================================
   11. Pretext flow host
   ========================================================================== */

:where([data-spw-flow="pretext"]) {
  --pretext-local-pad: 0;
  --pretext-local-radius: var(--component-radius-tight, 8px);

  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  contain: layout paint style;
  isolation: isolate;

  padding: var(--pretext-local-pad);
  border-radius: var(--pretext-local-radius);

  color: inherit;
  transition:
    color var(--component-transition-fast, 120ms ease),
    background-color var(--component-transition-fast, 120ms ease),
    box-shadow var(--component-transition-base, 180ms ease);
}

:where([data-spw-flow="pretext"] .pretext-flow-lines) {
  display: grid;
  gap: var(--pretext-line-gap, 0.18rem);
  min-width: 0;
  align-content: start;
}

:where([data-spw-flow="pretext"] .pretext-flow-line) {
  display: flex;
  align-items: baseline;
  gap: 0.38em;
  min-width: 0;
  max-width: 100%;
  line-height: var(--pretext-line-height, 1.55);
  white-space: normal;
  text-wrap: pretty;
  text-wrap: stable;
}

:where([data-spw-flow="pretext"] .pretext-flow-line-text) {
  min-width: 0;
  max-width: 100%;
}

:where([data-spw-flow="pretext"] .line-decor) {
  flex: 0 0 auto;
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 0.92em;
  opacity: calc(0.22 + (var(--pretext-influence, 0) * 0.34));
  color: color-mix(in srgb, currentColor 72%, transparent);
  transition:
    opacity var(--component-transition-fast, 120ms ease),
    color var(--component-transition-fast, 120ms ease);
}

/* ==========================================================================
   12. Measurement-visible text routing hooks
   ========================================================================== */

:where([data-spw-flow="pretext"][data-text-mode="resting"]) { --pretext-line-gap: 0.16rem; }
:where([data-spw-flow="pretext"][data-text-mode="approach"]) { --pretext-line-gap: 0.2rem; }
:where([data-spw-flow="pretext"][data-text-mode="contact"]) { --pretext-line-gap: 0.22rem; }
:where([data-spw-flow="pretext"][data-text-mode="projecting"]) { --pretext-line-gap: 0.24rem; }
:where([data-spw-flow="pretext"][data-text-mode="settling"]) { --pretext-line-gap: 0.18rem; }
:where([data-spw-flow="pretext"][data-text-kind="operator-dense"]) { --pretext-local-pad: 0.35rem 0.45rem; }
:where([data-spw-flow="pretext"][data-text-kind="question"]) { --pretext-local-pad: 0.25rem 0.35rem; }
:where([data-spw-flow="pretext"][data-text-density="compressed"]) { --pretext-line-gap: 0.12rem; }
:where([data-spw-flow="pretext"][data-text-density="soft"]) { --pretext-line-gap: 0.24rem; }
:where([data-spw-flow="pretext"][data-text-wrap="volatile"]) { border-left: 2px solid color-mix(in srgb, var(--component-accent, #008080) 24%, transparent); }
:where([data-spw-flow="pretext"][data-text-wrap="responsive"]) { border-left: 1px solid color-mix(in srgb, var(--component-accent, #008080) 18%, transparent); }
:where([data-spw-flow="pretext"][data-text-width-class="xs"]) { max-inline-size: 20rem; }
:where([data-spw-flow="pretext"][data-text-width-class="sm"]) { max-inline-size: 28rem; }
:where([data-spw-flow="pretext"][data-text-width-class="md"]) { max-inline-size: 40rem; }
:where([data-spw-flow="pretext"][data-text-width-class="lg"]) { max-inline-size: 54rem; }
:where([data-spw-flow="pretext"][data-text-width-class="xl"]) { max-inline-size: min(100%, 72rem); }

/* ==========================================================================
   13. Intermediate scaffold
   ========================================================================== */

:where(.pretext-flow-scaffold) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin-top: 0.45rem;
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  opacity: var(--pretext-scaffold-opacity, 0.74);
  color: color-mix(in srgb, var(--ink-soft, rgba(0, 0, 0, 0.6)) 88%, transparent);
}

:where([data-spw-debug~="pretext"] .pretext-flow-scaffold),
:where([data-spw-pretext-scaffold] .pretext-flow-scaffold) {
  padding-top: 0.4rem;
  border-top: 1px dashed color-mix(in srgb, var(--component-accent, #008080) 18%, transparent);
}

:where(.pretext-flow-scaffold > span) {
  white-space: nowrap;
}

/* ==========================================================================
   14. Meaningful card utilities
   ========================================================================== */

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-density="soft"] {
  --component-pad: 1rem;
  --component-gap-tight: 0.65rem;
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-density="dense"] {
  --component-pad: 0.75rem;
  --component-gap-tight: 0.4rem;
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-density="roomy"] {
  --component-pad: 1.2rem;
  --component-gap-tight: 0.8rem;
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-reading="measure"] {
  max-inline-size: min(100%, var(--component-measure, 68ch));
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-reading="code"] {
  max-inline-size: min(100%, var(--component-code-measure, 84ch));
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-reading="ambient"] {
  color: color-mix(in srgb, var(--ink, currentColor) 94%, transparent);
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-attention="focused"] {
  border-color: color-mix(in srgb, var(--component-accent, #008080) 34%, var(--line, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent, #008080) 18%, transparent), var(--component-shadow, 0 10px 24px rgba(0,0,0,0.06));
}

:where(.frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .plan-card, .compare-card, .spec-column)[data-spw-attention="held"] {
  border-color: color-mix(in srgb, var(--component-accent, #008080) 44%, var(--line, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--component-accent, #008080) 24%, transparent), var(--component-shadow-active, 0 16px 34px rgba(0,0,0,0.1));
}

/* ==========================================================================
   15. Grouping and grid helpers
   ========================================================================== */

:where(.frame-grid, .plans-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid) {
  display: grid;
  gap: var(--component-gap, 0.9rem);
  align-items: stretch;
  min-width: 0;
}

:where(.frame-grid, .contact-grid, .gallery-overlays, .compare-sets, .spec-grid, .directory-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

:where(.frame-grid > li, .contact-grid > li, .compare-sets > li, .spec-grid > li, .directory-grid > li) {
  display: grid;
  min-width: 0;
}

:where(.frame-grid > li, .contact-grid > li, .compare-sets > li, .spec-grid > li, .directory-grid > li) > :is(.frame-card, .software-card, .frame-panel, .plan-card, .spec-column) {
  height: 100%;
}

:where(.plans-grid) {
  grid-template-columns: 1fr;
}

:where(.frame-grid--dense) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

:where(.frame-grid--media) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

:where(.frame-grid--2up) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.frame-grid--3up) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(
  .frame-grid[data-spw-layout="media-prose"],
  .frame-grid:has(> :is(.spw-scaffold, [data-spw-image-surface], .image-study, .spw-svg-figure, .media-frame, .screenshot-frame):first-child):has(> :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"])):not(:has(> :nth-child(3)))
) {
  --spw-media-rail-min: 16rem;
  --spw-media-rail-max: 22rem;
  --spw-media-prose-seam:
    color-mix(in srgb, var(--component-accent, #008080) 16%, var(--line, rgba(14, 18, 20, 0.14)));
  grid-template-columns:
    minmax(min(100%, var(--spw-media-rail-min)), var(--spw-media-rail-max))
    minmax(0, 1fr);
  align-items: stretch;
  column-gap: clamp(0.9rem, 2vw, 1.2rem);
}

:where(
  .frame-grid[data-spw-layout="media-prose"],
  .frame-grid:has(> :is(.spw-scaffold, [data-spw-image-surface], .image-study, .spw-svg-figure, .media-frame, .screenshot-frame):first-child):has(> :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"])):not(:has(> :nth-child(3)))
) > :first-child:is(.spw-scaffold, [data-spw-image-surface], .image-study, .spw-svg-figure, .media-frame, .screenshot-frame) {
  width: min(100%, var(--spw-media-rail-max, 22rem));
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  align-self: start;
  margin: 0;
}

:where(
  .frame-grid[data-spw-layout="media-prose"],
  .frame-grid:has(> :is(.spw-scaffold, [data-spw-image-surface], .image-study, .spw-svg-figure, .media-frame, .screenshot-frame):first-child):has(> :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"])):not(:has(> :nth-child(3)))
) > :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"]) {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  align-self: stretch;
}

:where(.frame-grid[data-spw-layout="media-prose"]) > :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"]) {
  border-inline-start: 1px solid var(--spw-media-prose-seam, rgba(14, 18, 20, 0.12));
  padding-inline-start: calc(var(--component-pad, 0.9rem) + 0.35rem);
}

@media (max-width: 820px) {
  :where(
    .frame-grid[data-spw-layout="media-prose"],
    .frame-grid:has(> :is(.spw-scaffold, [data-spw-image-surface], .image-study, .spw-svg-figure, .media-frame, .screenshot-frame):first-child):has(> :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"])):not(:has(> :nth-child(3)))
  ) {
    grid-template-columns: 1fr;
  }

  :where(.frame-grid[data-spw-layout="media-prose"]) > :nth-child(2):is(.frame-panel, .mode-panel, .frame-card, .site-frame, [data-spw-kind="panel"], [data-spw-kind="card"]) {
    border-inline-start: 0;
    padding-inline-start: var(--component-pad, 0.9rem);
  }
}

/* ==========================================================================
   16. Page Index Navigation & Local Atlas
   ========================================================================== */

:where(.page-index, .section-atlas) {
  margin-block: 1rem;
  padding: var(--component-pad, 0.9rem);
  background: var(--component-surface-soft, rgba(255, 255, 255, 0.8));
  border: var(--component-border, 1px solid rgba(0, 128, 128, 0.18));
  border-radius: var(--component-radius, 12px);
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 0.92rem;
}

:where(.page-index ul, .section-atlas ul) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.45rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.page-index a, .section-atlas a) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.42rem 0.65rem;
  margin-left: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--component-transition-fast, 120ms ease);
}

:where(.page-index a, .section-atlas a)[data-spw-nav-tokenized="true"]::before,
:where(.page-index a, .section-atlas a)[data-spw-nav-tokenized="true"]::after {
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 0.76em;
  color: color-mix(in srgb, var(--component-accent, #008080) 56%, transparent);
}

:where(.page-index a, .section-atlas a)[data-spw-nav-tokenized="true"]::before {
  content: attr(data-spw-nav-prefix);
}

:where(.page-index a, .section-atlas a)[data-spw-nav-tokenized="true"]::after {
  content: attr(data-spw-nav-postfix);
  justify-self: end;
}

:where(.page-index a:hover, .section-atlas a:hover, .page-index a:focus-visible, .section-atlas a:focus-visible) {
  color: var(--component-accent, #008080);
  background: color-mix(in srgb, var(--component-accent, #008080) 12%, transparent);
  outline: none;
}

:where(.page-index a[data-spw-grounded="true"], .section-atlas a[data-spw-grounded="true"], .card-sub-links a[data-spw-grounded="true"]) {
  color: var(--ink, rgba(14, 18, 20, 0.92));
  background: color-mix(in srgb, var(--component-accent, #008080) 8%, transparent);
}

:where(.page-index a[aria-current="true"], .page-index a:target) {
  color: var(--ink, currentColor);
  font-weight: 600;
  border-left: 2px solid var(--component-accent, #008080);
  background: color-mix(in srgb, var(--component-accent, #008080) 8%, transparent);
}

/* ==========================================================================
   17. Reference Lists & Documentation Fields
   ========================================================================== */

:where([data-spw-role="reference"] .frame-panel),
:where(.reference-panel, .reference-cluster) {
  padding: var(--component-pad-loose, 1.15rem);
  background: var(--component-surface-strong, rgba(255, 255, 255, 0.98));
  border: var(--component-border-strong, 1px solid rgba(0, 128, 128, 0.32));
}

ul.frame-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-left: 0;
  margin: 1rem 0;
  list-style: none;
}

ul.frame-list > li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1.25rem;
  border-left: 2px solid color-mix(in srgb, var(--component-accent, #008080) 22%, var(--component-border, rgba(0, 128, 128, 0.18)));
}

ul.frame-list > li > a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--component-accent-soft, rgba(0, 128, 128, 0.2));
  align-self: flex-start;
  transition: text-decoration-color var(--component-transition-fast, 120ms ease);
}

ul.frame-list > li > a:hover,
ul.frame-list > li > a:focus-visible {
  text-decoration-color: var(--component-accent, #008080);
}

ul.frame-list > li > p {
  margin: 0;
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  font-size: 0.95em;
  line-height: 1.5;
}

/* ==========================================================================
   18. Figures, Images, and Study Surfaces
   ========================================================================== */

.spw-svg-figure,
.image-study,
.media-frame,
.screenshot-frame {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin: 1.25rem 0;
  padding: var(--component-pad, 1rem);
  background: var(--component-surface, rgba(255, 255, 255, 0.92));
  border: var(--component-border, 1px solid rgba(0, 128, 128, 0.18));
  border-radius: var(--component-radius, 12px);
  box-shadow: var(--component-shadow, 0 10px 24px rgba(0, 0, 0, 0.06));
}

:where(.spw-svg-figure figcaption, .image-study figcaption, .media-focus-content) {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  line-height: 1.58;
}

:where(.spw-svg-figure svg, .image-study img, .media-frame img, .screenshot-frame img) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--component-radius-tight, 8px);
  overflow: hidden;
}

figcaption.frame-note,
.study-summary {
  font-size: 0.88em;
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  text-wrap: pretty;
  max-inline-size: 72ch;
  border-top: 1px dashed color-mix(in srgb, var(--component-border, rgba(0, 128, 128, 0.18)) 80%, transparent);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
  line-height: 1.62;
}

/* ==========================================================================
   19. Semantic Metadata & Chips
   ========================================================================== */

.spec-strip,
.plan-verb-strip,
.frame-operators,
.page-actions,
.card-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0.8rem;
  align-items: center;
  min-width: 0;
}

.spec-pill,
.page-chip,
.meta-chip,
.info-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--component-chip-height);
  padding: 0.28rem 0.68rem;
  font-size: var(--text-size-chip, 0.82rem);
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  color: var(--ink, currentColor);
  background: var(--component-surface-soft, rgba(255, 255, 255, 0.8));
  border: 1px solid var(--component-border, rgba(0, 128, 128, 0.18));
  border-radius: var(--component-radius-pill);
  line-height: 1.08;
  transition: all var(--component-transition-fast, 120ms ease);
  white-space: nowrap;
}

.spec-pill[aria-current="true"],
.spec-pill.is-active,
.spec-pill:hover,
.spec-pill:focus-visible,
.page-chip:hover,
.meta-chip:hover,
.info-chip:hover {
  background: color-mix(in srgb, var(--component-accent, #008080) 15%, transparent);
  border-color: var(--component-accent-soft, rgba(0, 128, 128, 0.2));
  color: var(--component-accent, #008080);
  outline: none;
}

/* quiet overlays in analysis/reference contexts */
:where([data-spw-role="reference"], [data-spw-context="analysis"]) :is(.spw-component-meta, .spw-component-tag, .spw-guide-chip) {
  opacity: 0.78;
  transition: opacity var(--component-transition-fast, 120ms ease);
}

:where([data-spw-role="reference"], [data-spw-context="analysis"]) :is(.spw-component-meta, .spw-component-tag, .spw-guide-chip):hover {
  opacity: 1;
}

html[data-spw-show-semantic-metadata="on"] :where(.site-frame[data-spw-role][data-spw-context])::after {
  content: attr(data-spw-role) " · " attr(data-spw-context) " · " attr(data-spw-category-family);
  position: absolute;
  inset: auto 0.9rem 0.9rem auto;
  z-index: 2;
  max-inline-size: min(28rem, calc(100% - 2rem));
  padding: 0.18rem 0.42rem;
  border: 1px solid var(--semantic-metadata-line);
  border-radius: 999px;
  background: var(--semantic-metadata-bg);
  color: var(--semantic-metadata-ink);
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: calc(var(--semantic-metadata-font-size) - 0.04rem);
  letter-spacing: calc(var(--semantic-metadata-tracking) * 0.9);
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity var(--component-transition-fast, 120ms ease),
    transform var(--component-transition-fast, 120ms ease),
    border-color var(--component-transition-fast, 120ms ease);
}

html[data-spw-show-semantic-metadata="on"] :where(.site-frame[data-spw-role][data-spw-context]:is(:hover, :focus-within, :target))::after {
  opacity: 0.82;
  transform: translateY(0);
}

html[data-spw-show-semantic-metadata="on"] :where(.site-frame[data-spw-seed]:is(:hover, :focus-within, :target))::after {
  content: attr(data-spw-role) " · " attr(data-spw-context) " · " attr(data-spw-category-family) " · " attr(data-spw-seed);
  opacity: 0.96;
  transform: translateY(-1px);
}

html[data-spw-show-semantic-metadata="on"] :where(.frame-card[data-spw-role][data-spw-kind])::after {
  content: attr(data-spw-kind) " · " attr(data-spw-role);
  position: absolute;
  inset: 0.7rem 0.7rem auto auto;
  z-index: 2;
  padding: 0.14rem 0.38rem;
  border: 1px solid var(--semantic-metadata-line);
  border-radius: 999px;
  background: var(--semantic-metadata-bg);
  color: var(--semantic-metadata-ink);
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: calc(var(--semantic-metadata-font-size) - 0.08rem);
  letter-spacing: calc(var(--semantic-metadata-tracking) * 0.8);
  text-transform: lowercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity var(--component-transition-fast, 120ms ease),
    transform var(--component-transition-fast, 120ms ease);
}

html[data-spw-show-semantic-metadata="on"] :where(.frame-card[data-spw-role][data-spw-kind]:is(:hover, :focus-within))::after {
  opacity: 0.92;
  transform: translateY(0);
}

@media (max-width: 720px) {
  html[data-spw-show-semantic-metadata="on"] :where(.site-frame[data-spw-role][data-spw-context])::after {
    display: none;
  }
}

@media (hover: none) {
  html[data-spw-show-semantic-metadata="on"] :where(.site-frame[data-spw-role][data-spw-context])::after {
    display: none;
  }
}

/* ==========================================================================
   20. Inline notes and prose annotations
   ========================================================================== */

.inline-note {
  position: relative;
  padding-inline-start: 1.1rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--op-ref-color, var(--component-accent, #008080)) 24%, transparent);
  color: var(--ink-soft, rgba(0, 0, 0, 0.68));
}

.inline-note::before {
  content: '~';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--op-ref-color, var(--component-accent, #008080));
  font-weight: 700;
  opacity: 0.8;
  transform: translateX(-45%);
}

.inline-note::after {
  content: none;
}

.inline-note[data-spw-spacing="tight"] {
  padding-inline-start: 0.85rem;
}

.inline-note[data-spw-spacing="loose"] {
  padding-inline-start: 1.4rem;
  margin-block: 1.5rem;
}

.inline-note.editorial-note {
  border-left: 3px solid var(--component-accent-soft, rgba(0, 128, 128, 0.2));
  padding-inline-start: 1.25rem;
  font-style: italic;
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
}

.inline-note.editorial-note::before,
.inline-note.editorial-note::after {
  content: none;
}

/* ==========================================================================
   21. Settings / breadcrumb / empty state / interactive code
   ========================================================================== */

code[data-interactive] {
  cursor: pointer;
  transition:
    background-color var(--component-transition-fast, 140ms ease),
    color var(--component-transition-fast, 140ms ease),
    outline-color var(--component-transition-fast, 140ms ease);
}

code[data-interactive]::after {
  content: ' ={ready}';
  color: var(--op-stream-color, var(--component-accent, #008080));
  font-weight: 700;
  opacity: 0;
}

code[data-interactive]:hover,
code[data-interactive]:focus-visible {
  outline: 1px solid var(--active-op-border, var(--component-accent, #008080));
  outline-offset: 2px;
}

code[data-interactive]:hover::after,
code[data-interactive]:focus-visible::after {
  opacity: 1;
}

.settings-fieldset {
  position: relative;
  transition: border-color var(--component-transition-fast, 140ms ease);
}

.settings-fieldset legend {
  font-weight: 700;
  color: var(--ink, currentColor);
  transition: color var(--component-transition-fast, 140ms ease);
}

.settings-fieldset:hover legend,
.settings-fieldset:focus-within legend {
  color: var(--op-frame-color, var(--component-accent, #008080));
}

.settings-option {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color var(--component-transition-fast, 140ms ease),
    border-color var(--component-transition-fast, 140ms ease);
}

.settings-option:hover,
.settings-option:focus-within {
  background: var(--op-frame-bg-soft, var(--component-surface-soft, rgba(0, 128, 128, 0.05)));
}

[data-status-indicator] {
  position: relative;
  display: inline-block;
}

[data-status-indicator]::after {
  content: ' #';
  color: currentColor;
  opacity: 0;
  transition: opacity var(--component-transition-fast, 140ms ease);
}

[data-status-indicator]:hover::after,
[data-status-indicator]:focus-visible::after,
[data-status-indicator][aria-current="true"]::after {
  opacity: 0.7;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.breadcrumb a {
  position: relative;
}

.breadcrumb a::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  border-bottom: 1px solid currentColor;
  opacity: 0;
  transition: opacity var(--component-transition-fast, 140ms ease);
}

.breadcrumb a:hover::before,
.breadcrumb a:focus-visible::before,
.breadcrumb a[aria-current="page"]::before {
  opacity: 0.75;
}

.breadcrumb > span {
  opacity: 0.55;
}

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  opacity: 0.78;
}

.empty-state::before {
  content: '{}';
  display: block;
  margin-bottom: 1rem;
  color: var(--ink-soft, rgba(0, 0, 0, 0.6));
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 2rem;
}

/* ==========================================================================
   22. Plan-specific component bridges
   ========================================================================== */

.plan-card {
  gap: 0.8rem;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.plan-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-family: var(--site-mono-font, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-considerations,
.plan-wonder {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.plan-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  align-items: center;
}

/* ==========================================================================
   23. Responsive composability
   ========================================================================== */

@media (max-width: 900px) {
  :where(.frame-grid--3up, .frame-grid--2up) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :where(.page-index ul, .section-atlas ul) {
    grid-template-columns: 1fr;
  }

  :where(.frame-topline, .frame-heading, .plan-header, [data-spw-slot="header"]) {
    flex-direction: column;
    align-items: flex-start;
  }

  :where(.spec-strip, .frame-operators, .plan-verb-strip, .plan-links, [data-spw-slot="meta"], [data-spw-slot="actions"]) {
    gap: 0.4rem 0.45rem;
  }

  :where(.site-frame) {
    --surface-padding: var(--component-pad, 0.9rem);
  }
}

@media (max-width: 520px) {
  :where(.site-frame, .frame-card, .media-card, .media-focus-card, .software-card, .operator-card, .frame-panel, .mode-panel, .plan-card, .compare-card, .spec-column) {
    padding: var(--component-pad-tight, 0.65rem);
  }

  :where(.spec-pill, .page-chip, .meta-chip, .info-chip, .plan-status) {
    max-width: 100%;
  }
}

/* ==========================================================================
   24. Accessibility & Reader Utilities
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}