/* ABOUTME: Contract-slide styles for the gateway-centric-workers deck: the built/designed halves, the boundary */
/* ABOUTME: columns, stable/replaceable bands, question and prompt lists, and appendix tables. Owned by the contract builder. */

/* ---------------------------------------------------------------------------
   SHARED: a numbered badge for the one-line questions and prompts beside a
   .cv-snap (open questions, the ask).
   --------------------------------------------------------------------------- */
.reveal .oq-n {
  flex: 0 0 auto;
  color: var(--text-faint);
  font: 400 34px/1 var(--serif);
}
.reveal .fragment.visible .oq-n,
.reveal .ask-prompts .oq-n { color: var(--gold); }

/* ---------------------------------------------------------------------------
   23 · BUILT VS DESIGNED — two boxes (worker, gateway) with a dashed coral
   gap between them, plus a note naming the five parts still open.
   --------------------------------------------------------------------------- */
.reveal .halves { display: flex; flex-direction: column; gap: 22px; }
.reveal .halves-row {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: stretch;
}
.reveal .half {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 36px;
  background: var(--bg-2);
  border-top: 4px solid var(--ce-solid);
}
.reveal .half h3 { margin: 0; max-width: none; color: var(--text-bright); font-size: 32px; }
.reveal .half-tag { margin: 4px 0 0; }
.reveal .half-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.reveal .half-list li { color: var(--text); font-size: 26px; line-height: 1.28; }
.reveal .half-list.is-dim li { color: var(--text-faint); }
.reveal .halves-gap { display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.reveal .halves-note {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1.32;
}

/* ---------------------------------------------------------------------------
   24 · BOUNDARY RULE — canvas snapshot (phase-4-loopback) left, gateway/
   runtime ownership chips right; the two rule quotes compact in the foot.
   --------------------------------------------------------------------------- */
.reveal .boundary-layout { display: flex; gap: 44px; align-items: stretch; }
.reveal [data-slide-id="boundary-rule"] .cv-snap {
  flex: 0 0 60%;
  /* canvas.css's .cv sets height:100%, an explicit (non-auto) value that blocks this flex item's
     default align-items:stretch — and, because a flex-grow-sized ancestor's height is not "specified"
     for percentage purposes, resolves to 0. height:auto here restores stretch-to-row-height. */
  height: auto;
  min-height: 0;
  background: var(--bg-2);
  border: 1px solid var(--rule-strong);
}
.reveal .boundary-side { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.reveal .boundary-col h3 {
  margin: 0 0 14px;
  max-width: none;
  color: var(--ce-role, var(--text-bright));
  font: 500 26px/1.2 var(--sans);
}
.reveal .chiprow { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.reveal .boundary-quotes { display: flex; gap: 40px; max-width: 1500px; }
.reveal .boundary-quotes .quote { margin: 0; padding-left: 22px; }
.reveal .boundary-quotes .quote p { max-width: 40ch; font-size: 27px; line-height: 1.28; }

/* ---------------------------------------------------------------------------
   25 · STABLE VS REPLACEABLE — two tall bands, items as chips, an arrow
   down to context -> model.
   --------------------------------------------------------------------------- */
.reveal .bands { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.reveal .band-row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 30px 40px;
  background: var(--bg-2);
}
.reveal .band-row.band-fixed { border: 2px solid var(--ce-solid); }
.reveal .band-row.band-changing { border: 2px dashed var(--ce-focus); }
.reveal .band-row h3 {
  margin: 0;
  max-width: none;
  color: var(--text-bright);
  font: 500 26px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reveal .band-arrow { flex: 0 0 auto; margin: 0; text-align: center; color: var(--text-faint); font: 500 28px/1 var(--mono); }

/* ---------------------------------------------------------------------------
   28 · OPEN QUESTIONS — canvas snapshot (phase-4-run) with five numbered
   pins, left; five matching one-line questions, right, each a fragment at
   the same index as its pin.
   --------------------------------------------------------------------------- */
.reveal .oq-layout { display: flex; gap: 44px; align-items: stretch; }
.reveal [data-slide-id="open-questions"] .cv-snap {
  flex: 0 0 62%;
  height: auto;
  min-height: 0;
  background: var(--bg-2);
  border: 1px solid var(--rule-strong);
}
.reveal .oq-list { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.reveal .oq-list li { display: flex; align-items: baseline; gap: 20px; }
.reveal .oq-list li p { margin: 0; max-width: none; color: var(--text-bright); font: 400 28px/1.3 var(--sans); }

/* ---------------------------------------------------------------------------
   29 · THE ASK — canvas snapshot (phase-4-run) with three return/render/
   state pins, left; the three discussion prompts, a compact closing quote
   and the one stat, right.
   --------------------------------------------------------------------------- */
.reveal .ask-layout { display: flex; gap: 44px; align-items: stretch; }
.reveal [data-slide-id="the-ask"] .cv-snap {
  flex: 0 0 56%;
  height: auto;
  min-height: 0;
  background: var(--bg-2);
  border: 1px solid var(--rule-strong);
}
.reveal .ask-side { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.reveal .ask-prompts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.reveal .ask-prompts li { display: flex; align-items: baseline; gap: 18px; }
.reveal .ask-prompts li p { margin: 0; max-width: none; color: var(--text-bright); font: 400 28px/1.3 var(--sans); }
.reveal .ask-quote { margin: 0; padding-left: 22px; }
.reveal .ask-quote p { max-width: 34ch; font-size: 30px; }
/* out-specifies canvas.css's `.fig .quote .attrib` (0,3,0), which otherwise reaches into any quote
   nested under a .fig — including this one, now that the whole stage is wrapped in .fig.grow. */
.reveal .fig.ask-layout .ask-quote .attrib { font-size: 20px; }
.reveal .ask-stat { margin: 0; max-width: none; color: var(--coral); font: 500 26px/1.3 var(--mono); }

/* ---------------------------------------------------------------------------
   A1 · GLOSSARY — two columns of term / one-line definition.
   --------------------------------------------------------------------------- */
.reveal .glossary-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; width: 100%; height: 100%; }
.reveal .glossary { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.reveal .gterm { padding: 5px 0; border-top: 1px solid var(--rule-soft); }
.reveal .glossary .gterm:first-child { border-top: 0; }
.reveal .gterm dt { margin: 0; color: var(--text-bright); font: 500 22px/1.15 var(--mono); }
.reveal .gterm dd { margin: 2px 0 0; max-width: none; color: var(--text-dim); font: 400 20px/1.24 var(--sans); }

/* ---------------------------------------------------------------------------
   GENERIC APPENDIX DATA TABLE (A4, A5): a plain-rule table, optionally split
   across two column groups via .data-table-cols so rows split rather than
   the type shrinking.
   --------------------------------------------------------------------------- */
.reveal .data-table { width: 100%; border-collapse: collapse; }
.reveal .data-table th {
  padding: 6px 14px 12px 0;
  color: var(--text-faint);
  font: 500 20px/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--rule-strong);
}
.reveal .data-table td {
  padding: 11px 14px 11px 0;
  color: var(--text);
  font: 400 20px/1.32 var(--sans);
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.reveal .data-table td:first-child, .reveal .data-table th:first-child { color: var(--text-bright); font-weight: 500; }
.reveal .data-table .owns { color: var(--ce-solid); font: 500 20px/1.3 var(--mono); }

.reveal .data-table-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; width: 100%; height: 100%; align-content: center; }

/* ---------------------------------------------------------------------------
   A6 · EPOCHS — the 034_2 vocabulary beside the fields the built gateway
   already ships, unreconciled.
   --------------------------------------------------------------------------- */
.reveal .epoch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; width: 100%; height: 100%; align-content: center; }
.reveal .epoch-col h3 { margin: 0 0 14px; max-width: none; font-size: 22px; color: var(--text-bright); }
.reveal .epoch-col ul { margin: 0; padding: 0; list-style: none; }
.reveal .epoch-col li {
  padding: 8px 0;
  color: var(--text);
  font: 400 20px/1.3 var(--sans);
  border-top: 1px solid var(--rule-soft);
}
.reveal .epoch-col li:first-child { border-top: 0; }
.reveal .epoch-col code { color: var(--text-bright); font: 500 20px/1 var(--mono); }
.reveal .epoch-note { max-width: none; margin-top: 18px; color: var(--text-faint); font: 400 20px/1.34 var(--sans); font-style: italic; }

/* ---------------------------------------------------------------------------
   A7 · EVIDENCE TIMELINE — one block per phase, Remy's phase windows as
   headers, the repos that evidence them listed beneath.
   --------------------------------------------------------------------------- */
.reveal .timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; width: 100%; height: 100%; align-content: center; }
.reveal .phase-block { padding: 16px 20px; background: var(--bg-2); border-left: 3px solid var(--ce-role, var(--rule-strong)); }
.reveal .phase-block h3 { margin: 0 0 4px; max-width: none; font-size: 22px; color: var(--text-bright); }
.reveal .phase-window { display: block; margin-bottom: 10px; color: var(--text-faint); font: 500 20px/1.3 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.reveal .phase-block ul { margin: 0; padding: 0; list-style: none; }
.reveal .phase-block li { padding: 3px 0; color: var(--text-dim); font: 400 20px/1.24 var(--sans); }
.reveal .phase-block li b { color: var(--text); font-weight: 500; }
.reveal .phase-block li span { margin-left: 8px; color: var(--text-faint); font: 400 20px/1.24 var(--mono); }
.reveal .timeline-note { grid-column: 1 / -1; max-width: none; margin-top: 4px; color: var(--text-faint); font: 400 20px/1.34 var(--sans); font-style: italic; }

/* ---------------------------------------------------------------------------
   A8 · CLAIMS — a compact claim / status / basis row, two columns.
   --------------------------------------------------------------------------- */
.reveal .claims-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; width: 100%; height: 100%; align-content: center; }
.reveal .claim-row { padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.reveal .claims-cols .claim-row:nth-child(1) { border-top: 0; }
.reveal .claim-text { margin: 0; max-width: none; color: var(--text); font: 400 20px/1.3 var(--sans); }
.reveal .claim-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 6px; }
.reveal .claim-status { font: 500 20px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.reveal .claim-status.is-solid { color: var(--ce-solid); }
.reveal .claim-status.is-gap { color: var(--ce-gap); }
.reveal .claim-basis { max-width: none; margin: 0; color: var(--text-faint); font: 400 20px/1.3 var(--mono); text-align: right; }