/* ═══════════════════════════════════════════════════════════
   .story-shell · System §3.5 · DS-D19
   Editorial / chapter-progression composition inside .app-shell.
   Replaces .page-sidenav for narrative-format pages.
   No new pigments · No new spacing · No new radii.
   Active-chapter accent reuses app-nav affordance, scoped by selector.
   ═══════════════════════════════════════════════════════════ */

/* ── Shell layout ── */
.story-shell {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ── Breadcrumb trail ── */
.story-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-4, 16px) var(--space-6, 24px) 0;
  font-size: var(--size-small);
  color: var(--text-tertiary);
  letter-spacing: var(--track-body);
}
.story-breadcrumb a {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--motion-micro) var(--ease);
}
.story-breadcrumb a:hover { color: var(--text-primary); }
.story-breadcrumb .sb-sep {
  color: var(--text-muted);
  margin: 0 var(--space-1, 4px);
  user-select: none;
}

/* ── Chapter strip ── */
.story-chapters {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-3, 12px) var(--space-6, 24px);
  border-bottom: 1px solid var(--border-rest);
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge  */
}
.story-chapters::-webkit-scrollbar { display: none; }

.story-chapters a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-body);
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-micro) var(--ease),
              background var(--motion-micro) var(--ease);
}
.story-chapters a:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* Active chapter — aria-current="page" per §1.2 */
.story-chapters a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.story-chapters .sc-num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--accent);
  font-size: var(--size-label);
}
.story-chapters a[aria-current="page"] .sc-num {
  color: var(--accent);
}

/* Mobile: collapse to dropdown trigger */
.story-chapters-trigger {
  display: none;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  justify-content: space-between;
}
.story-chapters-trigger .sct-chevron {
  font-size: var(--size-label);
  color: var(--text-muted);
  transition: transform var(--motion-micro) var(--ease);
}
.story-chapters-trigger[aria-expanded="true"] .sct-chevron {
  transform: rotate(180deg);
}
.story-chapters-list {
  display: contents;
}

/* ── Prose column ── */
.story-prose {
  max-width: 780px;
  padding: var(--space-6, 24px) var(--space-6, 24px) var(--space-8, 32px);
}

/* ── Anchors (conditional right-rail mini-TOC · 4+ sub-section threshold) ── */
.story-anchors {
  position: fixed;
  top: 140px;
  right: var(--space-6, 24px);
  width: 160px;
}
.story-anchors-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.story-anchors .sa-label {
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-uppercase);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--space-3, 12px);
  margin-bottom: var(--space-2, 8px);
}
.story-anchors a {
  display: block;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  font-size: var(--size-small);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--motion-micro) var(--ease),
              border-color var(--motion-micro) var(--ease);
}
.story-anchors a:hover {
  color: var(--text-primary);
}
/* Active anchor — aria-current="location" per §1.2 */
.story-anchors a[aria-current="location"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  border-left-color: var(--accent);
}

/* ── Progression (prev / next chapter) ── */
.story-progression {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  padding: var(--space-6, 24px);
  border-top: 1px solid var(--border-rest);
  margin-top: var(--space-6, 24px);
}
.story-progression a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  text-decoration: none;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--radius-sm, 4px);
  transition: background var(--motion-micro) var(--ease);
  max-width: 45%;
}
.story-progression a:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.story-progression .sp-label {
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-uppercase);
  color: var(--text-muted);
}
.story-progression .sp-title {
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.story-progression .sp-next {
  text-align: right;
  margin-left: auto;
}

/* ── Mobile collapse ── */
@media (max-width: 900px) {
  .story-breadcrumb {
    padding: var(--space-3, 12px) var(--space-4, 16px) 0;
  }
  .story-chapters {
    flex-direction: column;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    gap: 0;
  }
  .story-chapters-trigger { display: flex; }
  .story-chapters-list {
    display: none;
    flex-direction: column;
    gap: var(--space-1, 4px);
    padding-top: var(--space-2, 8px);
  }
  .story-chapters-list.sc-open {
    display: flex;
  }
  .story-anchors { display: none; }
  .story-prose {
    padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-6, 24px);
  }
  .story-progression {
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
  }
  .story-progression a { max-width: 100%; }
  .story-progression .sp-next {
    text-align: left;
    margin-left: 0;
  }
}

/* Workforce/domain subnav — pill row below topbar (DT-D30, promoted from DT-D29 page-scope) */
.domain-subnav {
  display: flex; gap: 6px; padding: 10px 32px;
  border-bottom: 1px solid var(--border-rest);
  background: var(--surface-elevated);
  overflow-x: auto;
}
.domain-subnav .subnav-pill {
  padding: 6px 14px; border-radius: 999px;
  font-size: var(--size-body); font-weight: var(--weight-medium);
  color: var(--text-secondary); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.domain-subnav .subnav-pill:hover { background: var(--surface-flat); color: var(--text-primary); }
.domain-subnav .subnav-pill[aria-current="page"] {
  background: var(--surface-flat);
  border-color: var(--border-selected);
  color: var(--text-primary);
}
@media (max-width: 720px) { .domain-subnav { padding: 8px 16px; } }
/* ═══════════════════════════════════════════════════════════════════
   SELLER DIMENSIONAL LANDSCAPE · .ldscape-*
   DS-D162 (LOCKED, S441-corrected) · kb: design.seller-dimensional-landscape-s442
   Append to components-extended.css. Tokens only — zero literal hex.
   Both modes automatic (tokens are mode-aware).

   Encoding rules (DS-D162):
   1. Rail dot, never area — each axis an independent 1-D rail.
   2. Orientation baked in — dot position uses display percentile
      (hib ? p : 1-p); right = favorable, always.
   3. Shape/risk axes (concentration, new-logo) — .ldscape-dot--shape
      muted always; judgment color withheld.
   4. Suppression visible — dashed rail + reason; never blank/zero.
   No composite. No archetype label. status-error ONLY on negative raws.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Pattern A · Dimensional Strip (browse) ─────────────────────── */

.ldscape-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--size-small);
}

.ldscape-thead-fam th {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  padding: var(--space-2) var(--space-1) var(--space-1);
  border-bottom: 0.5px solid var(--border-rest);
}

.ldscape-thead-axes th {
  font-size: var(--size-label);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-1);
  vertical-align: bottom;
}

.ldscape-th-seller { width: 176px; text-align: left; }
.ldscape-th-ax     { width: 36px; }
.ldscape-th-ax--sup{ opacity: 0.4; }
.ldscape-th-gap    { width: 8px; }

.ldscape-tbody tr {
  border-bottom: 0.5px solid var(--border-rest);
  transition: background-color var(--motion-micro) var(--ease);
}
.ldscape-tbody tr:hover { background-color: var(--surface-flat); }
.ldscape-tbody tr:focus-within { outline: 1px solid var(--border-selected); outline-offset: -1px; }

.ldscape-seller-cell {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 176px;
}

/* Rail: 36×16 cell, 1px track via ::before, dot positioned by
   inline style `--ld-pos` (0–1 display percentile) */
.ldscape-rail {
  position: relative;
  width: 36px;
  height: 16px;
  margin: 0 auto;
}
.ldscape-rail::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border-rest);
}
.ldscape-rail--suppressed::before {
  background: none;
  border-top: 1px dashed var(--text-muted);
}

.ldscape-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--ld-pos, 0.5) * 100%);
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
}
/* DS-D162 am.5 · 5-tier position ramp. status-error NEVER a tier color —
   both bottom tiers are amber/attention family. NO box-shadow glow.
   Low/poor spread widened (polish pass): low 50%, poor 100% — bottom
   tier reads meaningfully hotter than the shoulder above it. */
.ldscape-dot--top   { background: var(--accent); }
.ldscape-dot--good  { background: color-mix(in srgb, var(--accent) 62%, transparent); }
.ldscape-dot--mid   { background: color-mix(in srgb, var(--text-tertiary) 60%, transparent); }
.ldscape-dot--low   { background: color-mix(in srgb, var(--status-attention) 50%, transparent); }
.ldscape-dot--poor  { background: var(--status-attention); }
/* Shape axes: same ramp at am.3 softened mix (55-60% of tier mix; 35% floor) */
.ldscape-dot--top.ldscape-dot--shape   { background: color-mix(in srgb, var(--accent) 58%, transparent); }
.ldscape-dot--good.ldscape-dot--shape  { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.ldscape-dot--mid.ldscape-dot--shape   { background: color-mix(in srgb, var(--text-tertiary) 35%, transparent); }
.ldscape-dot--low.ldscape-dot--shape   { background: color-mix(in srgb, var(--status-attention) 35%, transparent); }
.ldscape-dot--poor.ldscape-dot--shape  { background: color-mix(in srgb, var(--status-attention) 62%, transparent); }
.ldscape-dot--suppressed { display: none; }

/* ─── Pattern B · Profile Panel (dossier chapter) ──────────────────
   DS-D167 · redesigned row anatomy per family card:
   label / value / percentile track / rank ("14th of 57")
   Hairline top border per row · header micro-row above first data row
   Suppression: dashed track with inline reason (no separate row)
   Every color resolves from mode-aware tokens; zero literal hex. */

.ldscape-profile-family { margin-bottom: var(--space-6); }

.ldscape-profile-family-head {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
.ldscape-profile-family-sub {
  font-size: var(--size-small);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Header micro-row: "worst / median / best" above track, "rank in pool" above rank */
.ldscape-profile-track-head {
  display: grid;
  grid-template-columns: minmax(230px, 290px) 96px 1fr 130px;
  column-gap: 32px;
  padding-bottom: var(--space-1);
}
.ldscape-track-head-tri {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-tiny);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.ldscape-track-head-rank {
  font-size: var(--size-tiny);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-align: right;
}

/* Row: 4-cell grid — hairline top border on every row (incl. first) */
.ldscape-profile-axis {
  display: grid;
  grid-template-columns: minmax(230px, 290px) 96px 1fr 130px;
  align-items: center;
  column-gap: 32px;
  padding: 19px 0;
  border-top: 0.5px solid var(--border-rest);
}
.ldscape-profile-axis--suppressed { opacity: 0.55; }

.ldscape-axis-label-cell {
  display: flex; flex-direction: column; gap: 3px;
}
.ldscape-axis-label {
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: var(--track-body);
  line-height: 1.2;
}
.ldscape-axis-window {
  font-size: var(--size-body);
  color: var(--text-muted);
  line-height: 1.3;
}
.ldscape-axis-flags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: 3px;
}

/* Value — --size-title (22px) · --weight-medium (500). Satoshi is 400/500 only;
   never taller than the section title. */
.ldscape-value {
  justify-self: end;
  text-align: right;
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ldscape-value--neg { color: var(--status-error); }   /* the ONLY status-error use */
.ldscape-profile-axis--suppressed .ldscape-value {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

/* DS-D173 · value-cell redaction mark — coupled with .ldscape-dist-track--suppressed.
   A suppressed axis MUST render this pill in the value cell, never the payload
   number, never a zero, never an em-dash. The mark says "a value exists and is
   being withheld"; an em-dash says "no value" — a different and false claim. */
.ldscape-value-redacted {
  display: inline-block;
  border: 0.5px dashed var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--size-tiny);
  font-weight: var(--weight-regular);
  white-space: nowrap;
}

/* Distribution track — 22px, layered */
.ldscape-dist-track {
  position: relative;
  height: 22px;
}
/* base line: full-width, 2px, subtle */
.ldscape-dist-track:not(.ldscape-dist-track--suppressed)::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--surface-divider);
  border-radius: 1px;
}
/* p25-p75 band — middle half of pool, very faint */
.ldscape-dist-track-inner {
  position: absolute;
  left: 25%; right: 25%;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--text-tertiary) 10%, transparent);
  border-radius: 3px;
}
/* Median tick — 1×14 */
.ldscape-dist-med {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--text-tertiary) 35%, transparent);
}
/* Fill line — 2px, left edge → dot, tier color at ~0.38 opacity */
.ldscape-dist-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: calc(var(--ld-pos, 0.5) * 100%);
  transform: translateY(-50%);
  border-radius: 1px;
  opacity: 0.38;
}
.ldscape-dist-fill--top   { background: var(--accent); }
.ldscape-dist-fill--good  { background: var(--accent); }
.ldscape-dist-fill--mid   { background: var(--text-tertiary); }
.ldscape-dist-fill--low   { background: var(--status-attention); }
.ldscape-dist-fill--poor  { background: var(--status-attention); }
.ldscape-dist-fill--shape { opacity: 0.22; }

/* Dot — 12px; knock-out ring is BORDER (never box-shadow) */
.ldscape-dist-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--ld-pos, 0.5) * 100%);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface-raised);
  box-shadow: none;
}
/* Five-tier ramp — DS-D164 canon (DS-D167 reaffirmed) */
.ldscape-dist-dot--top   { background: var(--accent); }
.ldscape-dist-dot--good  { background: color-mix(in srgb, var(--accent) 62%, transparent); }
.ldscape-dist-dot--mid   { background: color-mix(in srgb, var(--text-tertiary) 45%, transparent); }
.ldscape-dist-dot--low   { background: color-mix(in srgb, var(--status-attention) 70%, transparent); }
.ldscape-dist-dot--poor  { background: transparent; border-color: var(--status-attention); }   /* hollow — colorblind backup */
/* Shape axes — softened mix, dashed ring (posture marker) */
.ldscape-dist-dot--shape { border-style: dashed; }
.ldscape-dist-dot--top.ldscape-dist-dot--shape   { background: color-mix(in srgb, var(--accent) 58%, transparent); }
.ldscape-dist-dot--good.ldscape-dist-dot--shape  { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.ldscape-dist-dot--mid.ldscape-dist-dot--shape   { background: color-mix(in srgb, var(--text-tertiary) 35%, transparent); }
.ldscape-dist-dot--low.ldscape-dist-dot--shape   { background: color-mix(in srgb, var(--status-attention) 35%, transparent); }
.ldscape-dist-dot--poor.ldscape-dist-dot--shape  { background: transparent; border-color: color-mix(in srgb, var(--status-attention) 62%, transparent); }

/* Suppression — dashed track with reason knocked out on card bg */
.ldscape-dist-track--suppressed {
  position: relative;
  height: 22px;
}
.ldscape-dist-track--suppressed::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--text-muted);
}
.ldscape-suppress-reason-inline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--size-small);
  font-style: italic;
  color: var(--text-tertiary);
  background: var(--surface-raised);
  padding: 0 var(--space-2);
  white-space: nowrap;
}

/* Rank — "14th of 57" · ordinal --size-heading/500 tier-colored, "of n" --size-body muted */
.ldscape-rank {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.ldscape-rank-ord {
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
.ldscape-rank-of {
  font-size: var(--size-body);
  color: var(--text-muted);
}
.ldscape-rank-ord--top   { color: var(--accent); }
.ldscape-rank-ord--good  { color: color-mix(in srgb, var(--accent) 62%, transparent); }
.ldscape-rank-ord--mid   { color: color-mix(in srgb, var(--text-tertiary) 45%, transparent); }
.ldscape-rank-ord--low   { color: color-mix(in srgb, var(--status-attention) 70%, transparent); }
.ldscape-rank-ord--poor  { color: var(--status-attention); }
.ldscape-rank-ord--suppressed { color: var(--text-muted); }
.ldscape-rank-ord--shape.ldscape-rank-ord--top   { color: color-mix(in srgb, var(--accent) 58%, transparent); }
.ldscape-rank-ord--shape.ldscape-rank-ord--good  { color: color-mix(in srgb, var(--accent) 38%, transparent); }
.ldscape-rank-ord--shape.ldscape-rank-ord--mid   { color: color-mix(in srgb, var(--text-tertiary) 35%, transparent); }
.ldscape-rank-ord--shape.ldscape-rank-ord--low   { color: color-mix(in srgb, var(--status-attention) 35%, transparent); }
.ldscape-rank-ord--shape.ldscape-rank-ord--poor  { color: color-mix(in srgb, var(--status-attention) 62%, transparent); }

/* Flag chips — small marks beneath the timeframe sub-line */
.ldscape-flag {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-uppercase);
  text-transform: uppercase;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-rest);
  color: var(--text-tertiary);
}
.ldscape-flag--asbooked   { border-color: var(--status-attention); color: var(--status-attention); }
.ldscape-flag--quarantine { border-style: dashed; }
.ldscape-flag--tenureband { }
.ldscape-flag--exec       { border-color: var(--border-selected); color: var(--text-primary); }

/* Footnote — reader crib, hairline above */
.ldscape-profile-footnote {
  border-top: 0.5px solid var(--border-rest);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--size-small);
  font-style: italic;
  color: var(--text-tertiary);
  line-height: 1.55;
}

/* ─── Toggle (browse view switch) ────────────────────────────────── */
.ldscape-toggle {
  display: inline-flex;
  border: 0.5px solid var(--border-rest);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.ldscape-toggle button {
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: color var(--motion-micro) var(--ease), background-color var(--motion-micro) var(--ease);
}
.ldscape-toggle button[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--surface-raised);
}
.ldscape-toggle button:focus-visible {
  outline: 1px solid var(--border-selected);
  outline-offset: -1px;
}

/* ─── Help affordance (am.4) — ? button in chapter head + modal ──── */
/* ? affordance — sits inline in the chapter-head, trailing the window note.
   DS-D167 · margin-right creates a visible gap before the disclosure chevron
   so the two affordances read as distinct controls. */
.ldscape-help-btn {
  background: none;
  border: 0.5px solid var(--border-rest);
  color: var(--text-tertiary);
  border-radius: var(--radius-pill);
  width: 20px; height: 20px;
  font-size: var(--size-tiny);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-left: var(--space-3);
  margin-right: var(--space-2);
  flex-shrink: 0;
  transition: color var(--motion-micro) var(--ease), border-color var(--motion-micro) var(--ease);
}
.ldscape-help-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ldscape-help-btn:focus-visible { outline: 1px solid var(--border-selected); outline-offset: 2px; }

.ldscape-help-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.ldscape-help-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface-page) 40%, rgba(0,0,0,0.55));
}
.ldscape-help-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 0.5px solid var(--border-rest);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}
.ldscape-help-title {
  font-size: var(--size-title);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-title);
  margin-bottom: var(--space-4);
  padding-right: var(--space-6);
}
.ldscape-help-body {
  font-size: var(--size-body);
  color: var(--text-secondary);
  line-height: 1.6;
}
.ldscape-help-body p { margin-bottom: var(--space-3); }
.ldscape-help-body p:last-child { margin-bottom: 0; }
.ldscape-help-close {
  position: absolute; top: var(--space-3); right: var(--space-4);
  background: none; border: none;
  color: var(--text-tertiary);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.ldscape-help-close:hover { color: var(--text-primary); }
.ldscape-help-close:focus-visible { outline: 1px solid var(--border-selected); outline-offset: -1px; }

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ldscape-tbody tr,
  .ldscape-toggle button,
  .ldscape-help-btn { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   DOSSIER CHAPTER DISCLOSURE · .chapter[data-collapsible]
   DS-D163 (LOCKED) · shared handler in /js/dossier-chapter.js

   Extends the filter-band collapse pattern (data-open + chevron rotate +
   ARIA), scoped to the .chapter/.chapter-head chrome that seller.html
   and manager.html already share. Native <details>/<summary> is rejected:
   the chapter-head chrome (eyebrow + rule + meta) is not summary-shaped.

   Semantics (do not modify without a DS-D decision):
   - Default all-expanded. Collapse is a user act, never the arrival state.
   - URL state via ?collapse=arc,econ (short id after ch-). No localStorage.
   - Lazy render is a JS contract: chapters arriving collapsed defer their
     data fetch/render to first expand (chapter:firstexpand event).
   - @media print force-expands every chapter and hides the chevron.
   ═══════════════════════════════════════════════════════════════════ */

.chapter[data-collapsible] .chapter-head {
  cursor: pointer;
  user-select: none;
  /* the chevron rides at the end of the head; add padding so the
     chapter-rule doesn't touch it visually */
  padding-right: var(--space-2);
  border-radius: var(--radius-sm);
}
.chapter[data-collapsible] .chapter-head:hover .chapter-eyebrow {
  color: var(--text-secondary);
}
.chapter[data-collapsible] .chapter-head:focus-visible {
  outline: 1px solid var(--border-selected);
  outline-offset: 4px;
}

/* Chevron via ::after — no new markup required on existing chapter-heads.
   Down (▾) when expanded; rotates -90deg to point right when collapsed.
   DS-D163 amendment · chevron carries a ≥44px hit area (glyph stays small)
   so it reads as a distinct affordance on mobile. Resting is --text-secondary;
   hover/press deepens to --text-primary. No accent. */
.chapter[data-collapsible] .chapter-head::after {
  content: '▾';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-secondary);
  transition: transform var(--motion-short) var(--ease),
              color      var(--motion-short) var(--ease);
  transform-origin: 50% 50%;
}
.chapter[data-collapsible][data-open="false"] .chapter-head::after {
  transform: rotate(-90deg);
}
.chapter[data-collapsible] .chapter-head:hover::after,
.chapter[data-collapsible] .chapter-head:active::after,
.chapter[data-collapsible] .chapter-head:focus-visible::after {
  color: var(--text-primary);
}

/* Collapsed body: hide every child except the head. No wrapper class
   required — existing chapter markup keeps working as-is. Kill the
   head's margin-bottom too so the chapter card sits tight around the
   head alone. */
.chapter[data-collapsible][data-open="false"] > :not(.chapter-head) {
  display: none;
}
.chapter[data-collapsible][data-open="false"] .chapter-head {
  margin-bottom: 0;
}

/* Print: force everything open, hide the chevron so PDFs are complete
   and not cluttered by a control that has no meaning on paper. */
@media print {
  .chapter[data-collapsible] > :not(.chapter-head) { display: revert !important; }
  .chapter[data-collapsible] .chapter-head { cursor: default; }
  .chapter[data-collapsible] .chapter-head::after { display: none !important; }
}

/* Reduced motion: --motion-short is already 0ms under the reduced-motion
   media query in tokens.css, so the transition collapses to a static
   swap. No further override needed. */


/* ============================================================
   AgentWait — Agent waiting experience (FB-0113, S622)
   Restrained, token-only Loam. Composes tokens.css: no literal
   hex, no shadow, weights 400/500 only, both modes via tokens.
   Liveness via the system --motion-breath. All classes aw-.
   ============================================================ */

.aw-root {
  width: 100%;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}

.aw-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.aw-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--status-processing);
  animation: aw-breath var(--motion-breath) var(--ease) infinite;
}
@keyframes aw-breath { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

.aw-label {
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}

.aw-elapsed {
  margin-left: auto;
  font-size: var(--size-tiny);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Activity feed — quiet text rows, one marker each for scan alignment */
.aw-feed {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aw-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--size-small);
  line-height: var(--line-body);
  animation: aw-enter var(--motion-short) var(--ease);
}
@keyframes aw-enter { from { opacity: 0; } to { opacity: 1; } }

.aw-marker {
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 0.5em;
  border-radius: var(--radius-pill);
  background: var(--border-hover);
}
.aw-rowlabel { min-width: 0; }

/* Active step — breathing accent marker, medium-weight label */
.aw-row-active .aw-marker {
  background: var(--status-processing);
  animation: aw-breath var(--motion-breath) var(--ease) infinite;
}
.aw-row-active .aw-rowlabel {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

/* Settled step — recedes */
.aw-row-donestep .aw-marker { background: var(--border-hover); }
.aw-row-donestep .aw-rowlabel { color: var(--text-tertiary); }

/* Note — italic aside, marker recedes to nothing */
.aw-row-note .aw-marker { background: transparent; }
.aw-row-note .aw-rowlabel { color: var(--text-tertiary); font-style: italic; }

/* Failure — status-error, no theatrics */
.aw-row-fail .aw-marker { background: var(--status-error); }
.aw-row-fail .aw-rowlabel { color: var(--status-error); font-weight: var(--weight-medium); }

/* Completion — dot settles to live, feed collapses to an audit chip */
.aw-done .aw-dot { animation: none; opacity: 1; background: var(--status-live); }
.aw-done .aw-feed { display: none; }
.aw-done.aw-expanded .aw-feed { display: flex; }
.aw-failed .aw-dot { animation: none; opacity: 1; background: var(--status-error); }

.aw-chip {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 0.5px solid var(--border-rest);
  border-radius: var(--radius-pill);
  background: var(--surface-flat);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--size-tiny);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-body);
  cursor: pointer;
  transition: border-color var(--motion-micro) var(--ease), color var(--motion-micro) var(--ease);
}
.aw-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }

.aw-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aw-dot, .aw-row, .aw-row-active .aw-marker { animation: none; }
}