/* ABOUTME: Sierra-slide styles for the gateway-centric-workers deck: source framing, iceberg figure, lessons ledger. */
/* ABOUTME: Owned by the Sierra builder (see .ai/analyses/03_build-plan.md). Slide frame: build plan §7, deck.css. */

/* ---------------------------------------------------------------------------
   SLIDE 6 · SOURCE FIGURES
   Two data figures (89/100 dots, 45 service tiles) plus a slim source card
   and the Pinecone disambiguation chip — all inside .fig, per build plan §7.
   --------------------------------------------------------------------------- */
.reveal .sierra-fig-source { display: flex; flex-direction: column; height: 100%; gap: 16px; }

.reveal .sierra-figs { display: flex; gap: 64px; align-items: flex-start; }

.reveal .figcap { margin: 16px 0 0; max-width: none; }
.reveal .figcap b { color: var(--text-bright); font: 400 44px/1 var(--serif); font-style: italic; }
.reveal .figcap span { display: block; margin-top: 4px; color: var(--text-dim); font: 500 26px/1.3 var(--mono); }

.reveal .dotgrid { display: grid; grid-template-columns: repeat(10, 18px); gap: 5px; }
.reveal .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rule-strong); background: transparent; }
.reveal .dot.lit { border-color: var(--gold); background: var(--gold); }

.reveal .tilegrid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; width: 620px; }
.reveal .chip.tile {
  justify-content: center;
  text-align: center;
  height: 46px;
  padding: 4px 6px;
  white-space: normal;
  line-height: 1.1;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--rule-strong);
}
.reveal .chip.tile.blank { border-style: dashed; opacity: .35; }

/* nowrap with fixed, non-shrinking widths on the two side items: the three children share one row
   predictably, so the defs card never falls onto its own full-width second line (which is what was
   pushing the foot below the slide when this used a plain flex-wrap). */
.reveal .sierra-foot-row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 28px; margin-top: auto; }
.reveal .sierra-slim-card {
  flex: 0 0 500px;
  padding: 16px 20px;
  background: var(--bg-2);
  border-top: 3px solid var(--rule-strong);
}
.reveal .sierra-card-kicker {
  margin: 0;
  max-width: none;
  color: var(--text-faint);
  font: 500 26px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.reveal .sierra-card-byline {
  margin: 8px 0 0;
  max-width: none;
  overflow-wrap: anywhere;
  color: var(--text-dim);
  font: 500 26px/1.28 var(--mono);
  letter-spacing: .01em;
}

/* Pinecone disambiguation — a neutral note chip, not one of the canvas's four meanings. */
.reveal .chip.note {
  flex: 0 0 340px;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px dashed var(--rule-strong);
  text-transform: none;
  letter-spacing: .01em;
  white-space: normal;
  max-width: none;
}

/* The foot's own quote + landing, stacked — outside .fig, so canvas.css's ".fig .quote" positioning
   never reaches it. */
.reveal .foot-main { display: flex; flex-direction: column; gap: 10px; max-width: 1320px; }
.reveal .sierra-foot-quote { margin: 0; padding-left: 20px; }
.reveal .sierra-foot-quote p { max-width: none; font-size: 30px; }

/* Two compact term cards, first use of MCP and gateway. canvas.css's
   ".fig .ce-def" (a single definition anchored bottom-right of a canvas
   figure) would otherwise stack both cards on top of each other here, since
   it and this rule share specificity and both sit inside .fig — reset the
   positioning it sets so the grid lays the two cards out side by side. */
.reveal .sierra-defs { --ce-def-cols: 2; flex: 1 1 0; min-width: 0; margin-top: 0; width: auto; }
.reveal .sierra-defs .ce-def { position: static; width: auto; padding: 8px 16px; }
.reveal .sierra-defs .ce-def h3 { margin: 4px 0 6px; font-size: 26px; }
.reveal .sierra-defs .ce-def p { font-size: 26px; line-height: 1.28; }

/* ---------------------------------------------------------------------------
   SLIDE 7 · THE ICEBERG (redrawn, not Sierra's photograph)
   A plain berg shape over a waterline. 4 labels above; 45 short-form labels
   below that first scatter (click 2), then cross-fade into 5 columns (click 3),
   then 9 of them turn gold (click 4) — the items that shape what re-enters the
   model's next call (report §8.3). Labels use the 20px floor (build plan §7.3):
   49 labels must fit on one slide.
   --------------------------------------------------------------------------- */
.reveal .sierra-fig-iceberg { display: flex; flex-direction: column; height: 100%; }
.reveal .iceberg-stage { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; }

.reveal .berg-shape {
  position: absolute;
  left: 31%;
  top: 0;
  width: 38%;
  height: 96%;
  clip-path: polygon(50% 0%, 64% 8%, 58% 14%, 80% 24%, 92% 40%, 96% 58%,
    86% 76%, 92% 90%, 68% 99%, 44% 100%, 24% 90%, 8% 76%, 14% 54%, 6% 38%, 26% 22%, 36% 14%);
  background: linear-gradient(to bottom,
    var(--bg-2) 0%, var(--bg-2) 13%,
    color-mix(in oklab, var(--teal) 7%, var(--bg-2)) 13%,
    color-mix(in oklab, var(--teal) 7%, var(--bg-2)) 100%);
  border: 1.5px solid var(--rule-strong);
}

.reveal .waterline {
  position: absolute;
  left: 0;
  top: 12%;
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--rule-strong);
}

/* click 1 — the 4 things above the water */
.reveal .berg-above {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.reveal .berg-above-chip {
  padding: 8px 16px;
  color: var(--text-bright);
  background: var(--bg-2);
  border: 1px solid var(--rule-strong);
  font: 500 20px/1 var(--mono);
}

/* click 2 — the 45 short-form labels scatter around the berg, then fade out
   as click 3's grouped set fades in (a cross-fade, not a literal drag —
   Reveal's native fragment classes give one element exactly one transition,
   so the "move in place" beat is two label sets swapping visibility). */
.reveal .berg-scatter { position: absolute; inset: 0; }
.reveal .berg-tag {
  position: absolute;
  color: var(--text-dim);
  font: 500 20px/1.2 var(--mono);
  letter-spacing: .01em;
}
.reveal .berg-tag.bt-left { top: var(--sy); right: 70%; width: 29%; text-align: right; }
.reveal .berg-tag.bt-right { top: var(--sy); left: 70%; width: 29%; text-align: left; }

/* click 3 — the same 45 items re-sorted into 5 columns: who may · which
   tools · run it · shape the result · operations (report §8.3). */
.reveal .berg-group { position: absolute; inset: 0; }
.reveal .berg-col-head {
  position: absolute;
  left: var(--cx);
  top: 6%;
  width: 19%;
  margin: 0;
  max-width: none;
  color: var(--text-faint);
  font: 500 26px/1.1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 6px;
}
.reveal .berg-tag.berg-grouped {
  left: var(--cx);
  top: var(--gy);
  width: 19%;
  color: var(--text);
  font-size: 20px;
  text-align: left;
}

/* click 4 — the 9 context-shaping items turn gold; "custom" fragments render
   normally until their own step, so a gold label looks identical to its
   plain siblings until it transitions on .visible (same technique as the
   canvas's data-s/data-to states, see 091326-post-ai-data-stack .cv-n). */
.reveal .berg-tag.berg-grouped[data-to="gold"] { transition: color .5s ease, font-weight .2s ease; }
.reveal .berg-tag.berg-grouped.visible[data-to="gold"] { color: var(--gold); font-weight: 500; }

.reveal .berg-note {
  flex: 0 0 auto;
  margin-top: 12px;
  max-width: none;
  color: var(--text-dim);
  font: italic 400 22px/1.3 var(--serif);
}

/* ---------------------------------------------------------------------------
   SLIDE 8 · THE BACKBONE
   Left: a static snapshot of the phase-3-flue canvas (build plan §7.3,
   storyboard §7) with three numbered pins. Right: three rows, each the pin's
   quote and the wall chip(s) it answers. canvas-view.js's fit() scales the
   snapshot to whatever box its parent (.sierra-snap-wrap) gives it — the
   snapshot div itself takes no size or transform of its own.
   --------------------------------------------------------------------------- */
.reveal .sierra-fig-lessons { display: flex; align-items: center; gap: 48px; height: 100%; }

.reveal .sierra-snap-wrap { flex: 0 0 auto; width: 1000px; height: 413px; }

.reveal .lesson-rows { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.reveal .lesson-row { display: flex; align-items: flex-start; gap: 22px; }
.reveal .lesson-row-num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: var(--gold-soft);
  border: 2px solid var(--gold);
  border-radius: 50%;
  font: 500 26px/1 var(--mono);
}
.reveal .lesson-row-body { flex: 1 1 auto; min-width: 0; }
/* canvas.css's ".fig .quote" (a single quote anchored bottom-left of a canvas figure) would
   otherwise stack all three rows' quotes on top of each other here, since it and this rule share
   specificity and both sit inside .fig — reset the positioning it sets so each quote stays in its row. */
.reveal .lesson-row .quote { position: static; width: auto; margin: 0; padding-left: 18px; }
.reveal .lesson-row .quote p { max-width: none; font-size: 28px; line-height: 1.28; }
.reveal .lesson-row .quote .attrib { font-size: 20px; }
.reveal .lesson-row-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------------------------------------------------------------------------
   APPENDIX A2 · the full 45-item iceberg ledger, regrouped (full wording)
   --------------------------------------------------------------------------- */
.reveal .berg-ledger {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  width: 100%;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reveal .berg-ledger-col { padding: 18px 16px; background: var(--bg); }
.reveal .berg-ledger-col h3 {
  margin: 0 0 12px;
  max-width: none;
  color: var(--text-faint);
  font: 500 20px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reveal .berg-ledger-count { color: var(--text-faint); font-weight: 400; }
.reveal .berg-ledger-col ul { margin: 0; padding: 0; list-style: none; }
.reveal .berg-ledger-col li {
  margin-bottom: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--rule-strong);
  color: var(--text-dim);
  font: 400 20px/1.28 var(--sans);
}
.reveal .berg-ledger-col li.is-context { border-left-color: var(--gold); color: var(--text); }

/* ---------------------------------------------------------------------------
   APPENDIX A3 · Sierra's lessons and our disposition
   --------------------------------------------------------------------------- */
.reveal .lessons-table { width: 100%; border-collapse: collapse; }
.reveal .lessons-table th,
.reveal .lessons-table td {
  padding: 7px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  font-size: 20px;
  line-height: 1.32;
}
.reveal .lessons-table th {
  color: var(--text-faint);
  font: 500 20px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
}
.reveal .lessons-table td.lesson-name { color: var(--text-bright); font-weight: 500; white-space: nowrap; }
.reveal .lessons-table td.lesson-disposition { color: var(--text-dim); font-family: var(--mono); font-size: 20px; }

.reveal .lesson-diff {
  margin-top: 18px;
  padding: 18px 24px;
  background: var(--bg-2);
  border-left: 3px solid var(--violet);
}
.reveal .lesson-diff p { margin: 0; max-width: none; color: var(--text-dim); font-size: 20px; line-height: 1.36; }
.reveal .lesson-diff b { color: var(--violet); font-weight: 500; }