/* ============================================================================
   Skha Workspace — Screen layouts
   Every screen is budgeted to fit 1600 x 900 without page scroll.
   Content box at that size: 1364 x 796.
   ========================================================================== */

/* Shared page furniture ---------------------------------------------------- */

.page {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  gap: var(--sp-5);
  min-height: 0;
}

.pagehead { display: flex; align-items: flex-start; gap: var(--sp-4); flex: none; }
.pagehead__title { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.15; }
.pagehead__sub { font-size: var(--fs-body); color: var(--text-muted); margin-top: 3px; }
.pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* ============================================================================
   Slide 03 — Workspace / Project Overview
   ========================================================================== */

.ov {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  gap: var(--sp-5);
  min-height: 0;
}

.ov__main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--sp-4);
  min-height: 0;
}

/* --- Current stage card --- */
.stagecard { padding: var(--sp-5); gap: var(--sp-4); }
.stagecard__top { display: flex; align-items: flex-start; gap: var(--sp-5); }
.stagecard__name { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.2; }
.stagecard__prog { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 4px; }
.stagecard__prog strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

.stagecard__slides { margin-left: auto; text-align: right; flex: none; }
.stagecard__slidesnum { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.1; }
.stagecard__slidesnum span { color: var(--text-faint); font-size: var(--fs-h3); }

/* Process chevron track inside the stage card */
.process { display: flex; align-items: stretch; gap: 4px; }
.process__step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  min-width: 0;
}
.process__mark {
  width: 15px; height: 15px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  border: 1.5px solid var(--border-strong);
  color: var(--text-faint);
}
.process__mark svg { width: 9px; height: 9px; }
.process__label { font-size: var(--fs-label); color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.process__step.is-done { background: var(--status-success-bg); border-color: #cfe6da; }
.process__step.is-done .process__mark { background: var(--status-success); border-color: var(--status-success); color: #fff; }
.process__step.is-done .process__label { color: var(--status-success); }

.process__step.is-current { background: var(--brand-primary-soft); border-color: #ccdff2; }
.process__step.is-current .process__mark { border-color: var(--brand-primary); color: var(--brand-primary); }
.process__step.is-current .process__mark::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary);
}
.process__step.is-current .process__label { color: var(--brand-primary); }

/* A completed stage that has been reopened by a later decision. */
.process__step.is-amended { background: var(--status-warning-bg); border-color: #ecd9b3; }
.process__step.is-amended .process__label { color: var(--status-warning); }
.process__step.is-amended .process__mark { background: var(--status-warning); border-color: var(--status-warning); color: #fff; }
.process__flag {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--status-warning);
  white-space: nowrap;
}

/* --- Needs your attention --- */
.attn__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease);
}
.attn__row:last-child { border-bottom: none; }
.attn__row:hover { background: var(--bg-subtle); }
.attn__icon {
  width: 26px; height: 26px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  flex: none;
  background: var(--bg-sunken);
  color: var(--text-muted);
}
.attn__icon svg { width: 14px; height: 14px; }
.attn__icon--warn { background: var(--status-warning-bg); color: var(--status-warning); }
.attn__icon--info { background: var(--status-info-bg); color: var(--status-info); }
.attn__area { font-size: var(--fs-body-sm); font-weight: 700; color: var(--text-primary); width: 92px; flex: none; }
.attn__text { font-size: var(--fs-body-sm); color: var(--text-secondary); flex: 1 1 auto; min-width: 0; line-height: 1.4; }
/* Names the downstream consequence, so an upstream item in a later stage
   reads as a live dependency rather than a stale notification. */
.attn__cascade { color: var(--text-faint); }
.attn__cascade::before { content: "\2192\00a0"; }

/* --- Bottom pair: activity + assets --- */
.ov__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); min-height: 0; }

.timeline { padding: var(--sp-4) var(--sp-5); }
.timeline__item {
  display: grid;
  grid-template-columns: 44px 13px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.timeline__time {
  font-size: var(--fs-label);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding-top: 1px;
}
.timeline__rail { position: relative; display: grid; place-items: start center; padding-top: 4px; }
.timeline__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-strong);
  z-index: 1;
  flex: none;
}
.timeline__item:not(:last-child) .timeline__rail::after {
  content: "";
  position: absolute;
  top: 10px; bottom: -12px;
  width: 1px;
  background: var(--border-default);
}
.timeline__text { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.4; padding-bottom: 12px; }
.timeline__text strong { color: var(--text-primary); font-weight: 600; }
.timeline__item--ai .timeline__dot { background: var(--brand-accent); }
.timeline__item--human .timeline__dot { background: var(--status-success); }

.assetrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.assetrow:last-child { border-bottom: none; }
.assetrow:hover { background: var(--bg-subtle); }
.assetrow__icon { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.assetrow__icon svg { width: 15px; height: 15px; }
.assetrow__name { font-size: var(--fs-body-sm); color: var(--text-primary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Right rail: workspace context --- */
.ctxrail { min-height: 0; }
/* gap:0 — each .ctx carries its own padding, so a grid gap on top of that
   would double the rhythm and push the last block out of the rail. */
.ctxrail__body { padding: 0 var(--sp-5); display: grid; gap: 0; align-content: start; }
.ctx {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ctx:first-child { padding-top: var(--sp-4); }
.ctx:last-of-type { border-bottom: none; padding-bottom: var(--sp-4); }
.ctx__team { display: grid; gap: 5px; margin-top: 5px; }
.ctx__teamrow { display: flex; align-items: center; gap: 8px; }
.ctx__k {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.ctx__v { font-size: var(--fs-body-sm); color: var(--text-primary); line-height: 1.45; }
.ctx__v--num { font-family: var(--font-display); font-size: var(--fs-h2); }

/* ============================================================================
   Slide 04 — Meeting to Storyline
   ========================================================================== */

.sl {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  gap: var(--sp-4);
  height: 100%;
  min-height: 0;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* --- Meeting panel --- */
.meet__head { padding: var(--sp-4) var(--sp-5) var(--sp-3); flex: none; }
.meet__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.25; }

.decision {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  position: relative;
}
.decision:hover { background: var(--bg-subtle); }
.decision.is-linked { background: var(--brand-primary-soft); box-shadow: inset 2px 0 0 var(--brand-primary); }
.decision__n {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.decision.is-linked .decision__n { color: var(--brand-primary); }
.decision__text { font-size: var(--fs-body-sm); color: var(--text-primary); line-height: 1.5; margin-top: 3px; }
.decision__src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}
.decision__src svg { width: 10px; height: 10px; font-family: var(--font-body); }

/* --- Storyline document --- */
.doc__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.doc__title { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.2; }

.doc__body { padding: var(--sp-5) var(--sp-6); }
/* Measure is capped so the comment gutter fits inside the card at 1600px. */
.doc__canvas { max-width: 500px; }

.sect { padding-bottom: var(--sp-5); position: relative; }
.sect__h {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
}
.sect__n { color: var(--text-faint); font-variant-numeric: tabular-nums; flex: none; }
.sect__p { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.62; }

.sect.is-highlight {
  background: #fdf8ec;
  box-shadow: -10px 0 0 #fdf8ec, 10px 0 0 #fdf8ec;
  border-radius: var(--radius-sm);
}

/* Tracked edit affordance attached to a section */
.trackedit {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-sm);
}
.trackedit__label { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.trackedit.is-resolved {
  border-left-color: var(--status-success);
  background: var(--status-success-bg);
  border-color: #cfe6da;
}
.trackedit.is-rejected {
  border-left-color: var(--text-faint);
  background: var(--bg-sunken);
}

/* Margin comment — sits in the document gutter like a document review comment */
.comment {
  position: absolute;
  right: -300px;
  top: 0;
  width: 280px;
  background: var(--bg-surface);
  border: 1px solid #dfe9f3;
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 11px 13px;
}
.comment__head { display: flex; align-items: center; gap: 7px; }
.comment__q { font-size: var(--fs-body-sm); color: var(--text-primary); line-height: 1.5; margin-top: 7px; }
.comment__tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px;
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
.comment__actions { display: flex; gap: 6px; margin-top: 10px; }
.comment.is-resolved { border-left-color: var(--status-success); opacity: 0.72; }

/* ============================================================================
   Slide 05 — Ghost Pack
   ========================================================================== */

.gp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--sp-4);
  min-height: 0;
}

/* Column widths are fixed so the key-message column — the column that
   carries the actual consulting content — gets the remaining space. */
.gp .table { table-layout: fixed; }
.gp .table th, .gp .table td { padding-left: 12px; padding-right: 12px; }
.gp .table tbody td { padding-top: 10px; padding-bottom: 10px; }
.gp .table col.c-num    { width: 40px;  }
.gp .table col.c-slide  { width: 168px; }
.gp .table col.c-msg    { width: auto;  }
.gp .table col.c-eviden { width: 132px; }
.gp .table col.c-visual { width: 104px; }
.gp .table col.c-owner  { width: 58px;  }
.gp .table col.c-status { width: 142px; }

.gp__toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px var(--sp-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex: none;
}

.gp__detail { min-height: 0; }
.gp__detailhead {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.gp__detailnum {
  font-family: var(--font-display);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.gp__detailtitle { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.25; }
.gp__detailbody { padding: var(--sp-5); display: grid; gap: 13px; align-content: start; }
/* Evidence reads as a checklist; two columns keeps it on screen. */
.gp__detailbody .bullets--2col { grid-template-columns: 1fr 1fr; }
/* The body is a grid, so the stacked-kv margin would double the gap. */
.gp__detailbody .kv + .kv { margin-top: 0; }

/* The Workspace suggestion is pinned above the panel footer rather than
   left at the bottom of a scrolling body — it is the point of this screen
   and must be visible in the captured state. */
.gp__detailcue {
  flex: none;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.visualchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.visualchip svg { width: 14px; height: 14px; color: var(--text-muted); }

.srcgroup { display: grid; gap: 4px; }
.srcline {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-body-sm); color: var(--text-secondary);
}
.srcline svg { width: 12px; height: 12px; color: var(--text-faint); flex: none; }

/* ============================================================================
   Slide 06 — Research
   ========================================================================== */

.rs {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-4);
  min-height: 0;
}

.rs__query { display: grid; gap: 9px; flex: none; }

.rs__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--sp-4);
  min-height: 0;
}

.finding { padding-bottom: var(--sp-5); }
.finding:last-child { padding-bottom: 0; }
.finding__h {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.35;
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
}
.finding__n { color: var(--text-faint); font-variant-numeric: tabular-nums; flex: none; }
.finding__p { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
.finding__cites { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.finding__citelabel {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}

.implication {
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--sp-4);
}
.implication__q {
  font-size: var(--fs-body);
  color: var(--text-primary);
  line-height: 1.55;
  margin-top: 8px;
}

.trustnote {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.trustnote svg { width: 13px; height: 13px; color: var(--text-faint); flex: none; }

/* The source rail must show all eight sources without scrolling at 1600x900 —
   seeing Project, Skha Memory and External together is the point of the screen. */
.rs__cols .sourcerow { padding: 5px 16px; }
.rs__cols .sourcerow__meta { margin-top: 1px; }
.rs__cols .sourcerow__n { margin-top: 0; }

.rs__srclabel { padding: 8px 16px 4px !important; }
.rs__srclabel:first-child { padding-top: 10px !important; }
.rs__cols [data-src-rail] .is-hidden { display: none; }

/* Source preview drawer excerpt */
.excerpt {
  border-left: 2px solid var(--border-strong);
  padding: 4px 0 4px 12px;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}

/* ============================================================================
   Slide 07 — Review Center
   ========================================================================== */

.rv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: var(--sp-5);
  min-height: 0;
}

.rv__queue { display: grid; gap: 10px; align-content: start; }

.rvitem {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 13px 18px;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease);
}
.rvitem:hover { border-color: var(--border-strong); }
.rvitem__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rvitem__type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.rvitem__type svg { width: 12px; height: 12px; }
.rvitem__type--decision { color: var(--status-danger); }
.rvitem__type--edit { color: var(--brand-accent); }
.rvitem__type--claim { color: var(--status-warning); }
.rvitem__type--approval { color: var(--status-success); }
.rvitem__src { font-size: var(--fs-micro); color: var(--text-faint); }
.rvitem__q { font-size: var(--fs-h3); font-family: var(--font-display); color: var(--text-primary); line-height: 1.4; }
.rvitem__ctx { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 5px; line-height: 1.45; }
.rvitem__foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border-subtle);
}

/* The principles rail runs full height, with the closing line anchored to
   the bottom so it reads as the conclusion rather than a floating quote. */
.rv > aside { display: grid; min-height: 0; }
.rv > aside > .card { height: 100%; }
.rv > aside .card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.rv > aside .creed { margin-top: auto; }
.rvitem__assign { display: flex; align-items: center; gap: 7px; font-size: var(--fs-label); color: var(--text-secondary); }
.rvitem.is-resolved { opacity: 0.6; }
.rvitem.is-hidden { display: none; }

.diffline {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}
.diffline__k {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.diffline__v { font-size: var(--fs-body-sm); line-height: 1.5; }

/* Review principles rail */
.principle {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.principle:last-of-type { border-bottom: none; }
.principle__icon {
  width: 26px; height: 26px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--bg-sunken);
  color: var(--text-secondary);
}
.principle__icon svg { width: 14px; height: 14px; }
.principle__icon--human { background: var(--brand-primary-soft); color: var(--brand-primary); }
.principle__k { display: block; font-size: var(--fs-body-sm); font-weight: 700; color: var(--text-primary); }
.principle__v { display: block; font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.45; margin-top: 1px; }

.creed {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--brand-navy);
  border-radius: var(--radius-md);
  color: #fff;
}
.creed__q {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.45;
  color: #fff;
}

/* ============================================================================
   Slide 08 — Skha Memory

   Simplified to two ideas, read top to bottom:
     1. Ask a plain question and get Skha's own past work back, with why each
        engagement is relevant and what is reusable from it.
     2. The asset compounds — this project will feed the next one.

   Question -> Answer -> Evidence -> Compounds. The earlier version also
   carried frameworks, benchmarks and slide-pattern panels in a right rail;
   those were four competing ideas on one screen and are deliberately gone.
   ========================================================================== */

.mem {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--sp-4);
  min-height: 0;
}

/* --- The answer: one synthesis band across the full width ---------------- */

.synth {
  background: var(--brand-navy);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5) 15px;
  color: #fff;
}
.synth__head { display: flex; align-items: baseline; gap: var(--sp-3); }
.synth__title { font-family: var(--font-display); font-size: var(--fs-h2); color: #fff; line-height: 1.3; }
.synth__sub { font-size: var(--fs-label); color: rgba(255, 255, 255, 0.55); }

.synth__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: 13px;
}
.synth__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
}
.synth__n {
  font-variant-numeric: tabular-nums;
  color: var(--skha-blue-light);
  font-weight: 700;
  font-size: var(--fs-label);
  padding-top: 2px;
}
.synth__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.synth__prov { font-size: var(--fs-label); color: rgba(255, 255, 255, 0.6); }
.synth .btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.synth .btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* --- The evidence: the engagements the answer was built from ------------- */

.mem__evidence {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.mem__results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  min-height: 0;
}

.engcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
.engcard:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-subtle); }
/* An inline-flex badge would otherwise stretch to the column width. */
.engcard > .badge { align-self: flex-start; }

.engcard__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.28; }
.engcard__meta {
  display: grid;
  gap: 3px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.engcard__metarow { display: flex; align-items: center; gap: 6px; }
.engcard__meta svg { width: 11px; height: 11px; color: var(--text-faint); flex: none; }

.engcard__why {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  padding-left: 10px;
  border-left: 2px solid var(--border-default);
}

.engcard__reuse {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
}
.engcard__assets { display: grid; gap: 4px; margin-top: 6px; }
.assettag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}
.assettag svg { width: 11px; height: 11px; color: var(--text-faint); flex: none; }

/* --- The compounding loop ----------------------------------------------- */

.compound {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--sp-5);
  border: 1px solid #dfe9f3;
  border-left: 2px solid var(--brand-accent);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, #f4f8fc 0%, var(--bg-subtle) 100%);
}
.compound__icon { color: var(--brand-accent); flex: none; display: inline-flex; align-items: center; }
.compound__icon svg { width: 18px; height: 18px; }
.compound__k { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.compound__v { display: block; font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 2px; }

.permcue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.permcue svg { width: 12px; height: 12px; color: var(--text-faint); flex: none; }

/* ============================================================================
   Loading state — canned, deterministic, disabled in capture mode
   ========================================================================== */

.loadbar {
  height: 2px;
  background: var(--bg-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.loadbar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  background: var(--brand-accent);
  border-radius: var(--radius-pill);
  animation: slide 1100ms var(--ease) infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

.is-loading-hidden { opacity: 0.35; pointer-events: none; }

/* ============================================================================
   Index — prototype landing
   ========================================================================== */

.idx { height: 100vh; overflow-y: auto; background: var(--bg-app); }
.idx__inner { max-width: 1180px; margin: 0 auto; padding: 56px var(--sp-8) 72px; }
.idx__brandbar { display: flex; align-items: center; gap: 11px; margin-bottom: var(--sp-7); }
.idx__mark { display: flex; align-items: center; gap: 10px; background: var(--brand-navy); border-radius: var(--radius-md); padding: 9px 14px; }
.idx__mark img { height: 18px; width: auto; display: block; }
.idx__h { font-family: var(--font-display); font-size: 34px; line-height: 1.15; }
.idx__sub { font-size: 15px; color: var(--text-muted); margin-top: 9px; max-width: 620px; line-height: 1.6; }

.idx__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.idxcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  color: inherit;
}
.idxcard:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.09);
  transform: translateY(-1px);
  color: inherit;
}
.idxcard__thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-subtle);
  display: block;
  overflow: hidden;
}
.idxcard__thumb svg { display: block; width: 100%; height: 100%; }
.idxcard__body { padding: 13px var(--sp-4) var(--sp-4); display: grid; gap: 4px; }
.idxcard__slide {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-accent);
  font-weight: 700;
}
.idxcard__t { font-family: var(--font-display); font-size: var(--fs-h3); }
.idxcard__d { font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.45; }

.idx__note {
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--text-faint);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================================
   Capture mode — ?capture=1
   Locks the deterministic screenshot state.
   ========================================================================== */

body.capture-mode .loadbar::after { animation: none; transform: translateX(0); width: 100%; }
body.capture-mode [data-demo-only] { display: none !important; }
body.capture-mode .scroll-y { scrollbar-width: none; }
body.capture-mode .scroll-y::-webkit-scrollbar { width: 0; height: 0; }
body.capture-mode * { transition: none !important; }

/* ============================================================================
   Responsive fallbacks — 1600x900 is the target; these keep other desktop
   widths usable without ever affecting the capture size.
   ========================================================================== */

@media (max-width: 1440px) {
  .ov { grid-template-columns: minmax(0, 1fr) 272px; }
  .gp { grid-template-columns: minmax(0, 1fr) 348px; }
  .rs__cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .mem__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .synth__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .sl { grid-template-columns: 32% minmax(0, 1fr); }
  .doc__canvas { max-width: 432px; }
  .comment { right: -264px; width: 248px; }
}

@media (max-width: 1240px) {
  /* Once the columns stack, the screen needs more height than the viewport,
     so the shell grows and the page scrolls with it. */
  .app { height: auto; min-height: 100vh; }
  .screen { overflow: visible; }
  .page, .sl { height: auto; }

  .ov, .rv { grid-template-columns: minmax(0, 1fr); }
  .ov__pair { grid-template-columns: minmax(0, 1fr); }
  .idx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comment { position: static; width: auto; margin-top: 12px; }
}