/* ==========================================================================
   sqip-flagship.css — additive flagship elevation for sqip.askaconsult.com
   ADDITIVE ONLY: extends web/system.css, never replaces it.
   Load order: system.css FIRST, then this file.
   Rules: uses ONLY existing var(--...) tokens from the system stylesheet.
   No token redefinition (no new custom properties).
   Every component ships .on-dark / .on-light handling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section-number narrative — .narrative-section
   Editorial 01/... numbering over the flagship section flow.
   Markup (Mozi): <section class="section narrative-section on-dark">
     <p class="narrative-kicker"><span class="narrative-num" aria-hidden="true">01</span>
     <span class="narrative-label">The possibilities</span></p>
     <h2 class="narrative-title">...</h2> ...
   -------------------------------------------------------------------------- */
.narrative-section { position: relative; }
.narrative-kicker {
  display: flex; align-items: baseline; gap: var(--s-300);
  margin: 0 0 var(--s-200); font-size: var(--t-small); font-weight: 600;
}
.narrative-num {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-small);
  letter-spacing: .08em; flex: none;
}
.narrative-label { text-transform: none; letter-spacing: .04em; }
.narrative-section.on-dark .narrative-num { color: var(--accent); }
.narrative-section.on-dark .narrative-label { color: var(--ink-faint); }
.narrative-section.on-light .narrative-num { color: #3d6b12; }
.narrative-section.on-light .narrative-label { color: var(--ink-dark-faint); }
.narrative-title { max-width: 28ch; text-wrap: balance; }
.narrative-rule {
  height: 1px; margin: var(--s-500) 0 0; border: 0;
}
.narrative-section.on-dark .narrative-rule { background: var(--hairline-strong); }
.narrative-section.on-light .narrative-rule { background: var(--hairline-dark-strong); }

/* --------------------------------------------------------------------------
   2. Hero-question treatment — .hero-question
   Large display question inside the existing .hero shell (hero keeps its
   .on-dark glows/grid from system.css; this only styles the question line).
   Markup: <p class="hero-question">...</p> directly under .hero-title or as
   the title itself. Paired with .hero-answer (the one-line response).
   -------------------------------------------------------------------------- */
.hero-question {
  font-size: var(--t-display); line-height: var(--lh-display);
  font-weight: 600; letter-spacing: -.02em; text-wrap: balance;
  max-width: 20ch; margin: 0 0 var(--s-300);
}
.hero-answer { font-size: var(--t-lead); max-width: 56ch; margin: 0; }
.hero.on-dark .hero-answer { color: var(--ink-dim); }
.hero.on-light .hero-answer { color: var(--ink-dark-dim); }
.hero-question-mark { font-weight: 600; }
.hero.on-dark .hero-question-mark { color: var(--accent); }
.hero.on-light .hero-question-mark { color: #3d6b12; }

/* --------------------------------------------------------------------------
   3. Comparison table — .compare-table (Hermes-vs-kit style, per ref B)
   Markup: <div class="compare-scroll"><table class="compare-table on-dark">
     <caption>...</caption><thead><tr><th scope="col">…</th>…
     <tbody><tr><th scope="row">…</th><td>…</td><td>…</td></tr>…
   Caption is required (names the two columns for screen readers).
   -------------------------------------------------------------------------- */
.compare-scroll { overflow-x: auto; border-radius: var(--r-card); }
.compare-table {
  width: 100%; border-collapse: collapse; font-size: var(--t-small);
  border-radius: var(--r-card);
}
.compare-table caption {
  text-align: left; font-weight: 600; font-size: var(--t-small);
  padding: 0 0 var(--s-200);
}
.compare-table th, .compare-table td {
  text-align: left; vertical-align: top;
  padding: 12px var(--s-300); min-height: 44px;
  border-bottom: 1px dashed transparent;
}
.compare-table thead th { font-weight: 700; font-size: var(--t-small); }
.compare-table tbody th[scope="row"] {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--t-xs);
  white-space: nowrap;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table.on-dark {
  background: var(--bg-raise); color: var(--ink);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-rest);
}
.compare-table.on-dark caption { color: var(--ink-dim); }
.compare-table.on-dark thead th {
  color: var(--ink); border-bottom: 1px solid var(--hairline-strong);
}
.compare-table.on-dark thead th:last-child { color: var(--accent); }
.compare-table.on-dark th, .compare-table.on-dark td {
  border-bottom-color: var(--hairline);
}
.compare-table.on-dark tbody th[scope="row"] { color: var(--ink-dim); }
.compare-table.on-light {
  background: var(--paper-raise); color: var(--ink-dark);
  border: 1px solid var(--hairline-dark); box-shadow: var(--shadow-rest-light);
}
.compare-table.on-light caption { color: var(--ink-dark-dim); }
.compare-table.on-light thead th {
  color: var(--ink-dark); border-bottom: 1px solid var(--hairline-dark-strong);
}
.compare-table.on-light thead th:last-child { color: #3d6b12; }
.compare-table.on-light th, .compare-table.on-light td {
  border-bottom-color: var(--hairline-dark);
}
.compare-table.on-light tbody th[scope="row"] { color: var(--ink-dark-dim); }

/* --------------------------------------------------------------------------
   4. Role-boundary cards — .role-card
   Role + one-line job + explicit NOT list + pipeline stage.
   Markup: <article class="card role-card on-dark">
     <p class="role-stage">Research</p>
     <h3 class="card-title">Researcher</h3>
     <p class="card-sub role-job">Finds facts, prior work, market info.</p>
     <p class="role-not"><span class="role-not-label">Not:</span> architecture decisions.</p>
   Grid: reuse .card-grid (3-col -> 2-col -> 1-col from system.css).
   -------------------------------------------------------------------------- */
.role-card { display: flex; flex-direction: column; gap: 0; }
.role-stage {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 var(--s-200);
}
.role-card.on-dark .role-stage { color: var(--accent); }
.role-card.on-light .role-stage { color: #3d6b12; }
.role-card .card-title { margin-bottom: var(--s-200); }
.role-job { margin: 0 0 var(--s-300); }
.role-not {
  margin: auto 0 0; padding-top: var(--s-200);
  font-size: var(--t-small);
  border-top: 1px dashed transparent;
}
.role-card.on-dark .role-not { border-top-color: var(--hairline-strong); color: var(--ink-dim); }
.role-card.on-light .role-not { border-top-color: var(--hairline-dark-strong); color: var(--ink-dark-dim); }
.role-not-label { font-weight: 700; }
.role-card.on-dark .role-not-label { color: var(--ink); }
.role-card.on-light .role-not-label { color: var(--ink-dark); }

/* --------------------------------------------------------------------------
   5. FAQ accordion — .faq
   Accessible: native <button> + aria-expanded, JS enhances only.
   Content readable WITHOUT JS: answer is in the DOM and visible by
   default; JS collapses answers AFTER load (never a CSS/JS gate that
   hides content before enhancement runs).
   Markup per item:
     <div class="faq-item on-dark">
       <h3 class="faq-q"><button class="faq-button" type="button"
         aria-expanded="true" aria-controls="faq-a1" id="faq-q1">
         <span class="faq-button-text">…?</span>
         <span class="faq-icon" aria-hidden="true">+</span></button></h3>
       <div class="faq-answer" id="faq-a1" role="region" aria-labelledby="faq-q1">
         <p>…</p></div></div>
   JS contract: toggles aria-expanded + hidden on .faq-answer; rotates icon
   via [aria-expanded] selector (no extra classes needed).
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-300); }
.faq-item { border-radius: var(--r-card); }
.faq-item.on-dark {
  background: var(--bg-raise); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-rest); color: var(--ink);
}
.faq-item.on-light {
  background: var(--paper-raise); border: 1px solid var(--hairline-dark);
  box-shadow: var(--shadow-rest-light); color: var(--ink-dark);
}
.faq-q { margin: 0; font-size: var(--t-body); }
.faq-button {
  display: flex; align-items: center; gap: var(--s-300);
  width: 100%; min-height: 44px; text-align: left; cursor: pointer;
  padding: var(--s-300) var(--s-400); background: transparent; border: 0;
  font: inherit; font-weight: 600;
}
.faq-item.on-dark .faq-button { color: var(--ink); }
.faq-item.on-light .faq-button { color: var(--ink-dark); }
.faq-button-text { flex: 1; }
.faq-icon {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.1rem; line-height: 1;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease);
}
.faq-item.on-dark .faq-icon { border-color: var(--hairline-strong); color: var(--accent); }
.faq-item.on-light .faq-icon { border-color: var(--hairline-dark-strong); color: #3d6b12; }
.faq-button[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--s-400) var(--s-400); font-size: var(--t-body); }
.faq-item.on-dark .faq-answer { color: var(--ink-dim); }
.faq-item.on-light .faq-answer { color: var(--ink-dark-dim); }
.faq-answer[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. CONSTRAINT-framed portfolio card — .folio-card
   Lead CONSTRAINT line + what was built + status chip.
   Markup: <article class="card folio-card on-dark">
     <p class="folio-kind">Open source</p>
     <h3 class="card-title">…</h3>
     <p class="folio-constraint"><span class="folio-constraint-label">Constraint:</span> …</p>
     <p class="card-sub">What was built…</p>
     <p class="folio-meta"><span class="status-chip is-live">Live</span>
     <a href="…">…</a></p></article>
   Grid: reuse .card-grid.
   -------------------------------------------------------------------------- */
.folio-card { display: flex; flex-direction: column; }
.folio-kind {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 var(--s-200);
}
.folio-card.on-dark .folio-kind { color: var(--accent); }
.folio-card.on-light .folio-kind { color: #3d6b12; }
.folio-constraint {
  font-size: var(--t-body); font-weight: 500;
  margin: 0 0 var(--s-200); padding: 10px 14px;
  border-radius: var(--r-block);
}
.folio-card.on-dark .folio-constraint {
  background: var(--bg-soft); border: 1px solid var(--hairline-strong);
  color: var(--ink);
}
.folio-card.on-light .folio-constraint {
  background: var(--paper-soft); border: 1px solid var(--hairline-dark-strong);
  color: var(--ink-dark);
}
.folio-constraint-label { font-weight: 700; }
.folio-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s-200);
  margin: auto 0 0; padding-top: var(--s-300);
  font-size: var(--t-small);
}

/* --------------------------------------------------------------------------
   7. Status markers — Available-now vs Still-being-built
   .status-chip base + .is-live / .is-open / .is-delivered / .is-internal /
   .is-building. Meaning is NEVER color-only: each chip carries text.
   -------------------------------------------------------------------------- */
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 14px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border: 1px solid transparent;
  white-space: nowrap;
}
.status-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: currentColor;
}
.on-dark .status-chip.is-live,
.on-dark .status-chip.is-open {
  background: rgba(200, 240, 74, .12); color: var(--accent);
  border-color: rgba(200, 240, 74, .3);
}
.on-light .status-chip.is-live,
.on-light .status-chip.is-open {
  background: #eef4d8; color: #3d6b12; border-color: #7a9a1e;
}
.on-dark .status-chip.is-delivered,
.on-dark .status-chip.is-internal {
  background: transparent; color: var(--ink-dim);
  border-color: var(--hairline-strong);
}
.on-light .status-chip.is-delivered,
.on-light .status-chip.is-internal {
  background: transparent; color: var(--ink-dark-dim);
  border-color: var(--hairline-dark-strong);
}
.on-dark .status-chip.is-building {
  background: transparent; color: var(--ink-dim);
  border-style: dashed; border-color: var(--hairline-strong);
}
.on-light .status-chip.is-building {
  background: #fdf3d7; color: #5c3f00;
  border-style: dashed; border-color: #9a6a00;
}
/* Status split list (Available now / Still being built side by side) */
.status-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-400); }
.status-group { border-radius: var(--r-card); padding: var(--s-400); }
.status-group.on-dark { background: var(--bg-raise); border: 1px solid var(--hairline); color: var(--ink); }
.status-group.on-light { background: var(--paper-raise); border: 1px solid var(--hairline-dark); color: var(--ink-dark); }
.status-group-title { font-size: var(--t-small); font-weight: 700; margin: 0 0 var(--s-200); }
.status-group ul { margin: 0; padding-left: 20px; font-size: var(--t-small); }
.status-group.on-dark ul { color: var(--ink-dim); }
.status-group.on-light ul { color: var(--ink-dark-dim); }

/* --------------------------------------------------------------------------
   8. Terminal / pipeline replay block — .replay
   Monospace, framed as ILLUSTRATIVE, not a live process. Never labeled
   live; every instance carries .replay-caption with a static note and the
   honesty limit rides in .proof-limit (system.css) beside it.
   Markup: <figure class="replay on-dark">
     <figcaption class="replay-head"><span class="replay-dots" aria-hidden="true">
       <i class="proof-dot r"></i><i class="proof-dot y"></i><i class="proof-dot g"></i></span>
       <span class="replay-title">Pipeline replay — illustrative</span></figcaption>
     <pre class="replay-body"><code>…static transcript…</code></pre>
     <figcaption class="replay-caption">Static illustration — transcript shown for reading,
     not a running process.</figcaption></figure>
   -------------------------------------------------------------------------- */
.replay { border-radius: var(--r-card); padding: 0; overflow: hidden; }
.replay.on-dark {
  background: rgba(13, 25, 23, .85);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-rest); color: var(--ink);
}
.replay.on-light {
  background: var(--paper-raise); border: 1px solid var(--hairline-dark);
  box-shadow: var(--shadow-rest-light); color: var(--ink-dark);
}
.replay-head {
  display: flex; align-items: center; gap: 12px;
  padding: var(--s-300) var(--s-400);
}
.replay-dots { display: inline-flex; gap: 8px; }
.replay-title { font-family: var(--font-mono); font-size: var(--t-small); }
.replay.on-dark .replay-title { color: var(--ink-dim); }
.replay.on-light .replay-title { color: var(--ink-dark-dim); }
.replay-body {
  margin: 0; padding: var(--s-400); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--t-small); line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.replay.on-dark .replay-body {
  border-top: 1px solid var(--hairline); color: var(--ink);
}
.replay.on-light .replay-body {
  border-top: 1px solid var(--hairline-dark); color: var(--ink-dark);
}
.replay-prompt { font-weight: 700; }
.replay.on-dark .replay-prompt { color: var(--accent); }
.replay.on-light .replay-prompt { color: #3d6b12; }
.replay-caption {
  padding: 0 var(--s-400) var(--s-400);
  font-size: var(--t-xs); font-style: italic;
}
.replay.on-dark .replay-caption { color: var(--ink-faint); }
.replay.on-light .replay-caption { color: var(--ink-dark-faint); }

/* --------------------------------------------------------------------------
   9. Shared responsive + motion for flagship additions
   Same 3 tiers as system.css. 44px touch targets preserved.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .status-split { grid-template-columns: 1fr 1fr; gap: var(--s-300); }
}
@media (max-width: 720px) {
  .status-split { grid-template-columns: 1fr; }
  .status-group { padding: var(--s-300); }
  .compare-table th, .compare-table td { padding: 12px var(--s-200); }
  .folio-meta { padding-top: var(--s-200); }
}
@media (max-width: 480px) {
  .faq-button { padding: var(--s-300); }
  .replay-body { padding: var(--s-300); }
  .status-chip { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition-duration: .01ms; }
}