/* ABOUTME: Shared layout and components for the gateway-centric-workers deck: eyebrows, landing lines, source */
/* ABOUTME: lines, chips, cards, quotes, the question band, and mini-canvas placement. Exact markup in README.md. */

/* ---------------------------------------------------------------------------
   COLOUR SEMANTICS (canvas storyboard §2): a budget of four hues, one meaning each.
     --gold    new: introduced by this click
     --teal    have: present and working, carried over
     --coral   wall: a named limit (dashed = the one wall left standing, CONTRACT?)
     --violet  auth: identity, credentials, permission, delegation — never anything else
   Retired elements are grey, dashed, struck through. --periwinkle is never used.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   LAYOUT FIXES carried from 091326-post-ai-data-stack/assets/deck.css: the
   shared theme caps h2 at 18ch (wraps full-width proof objects) and pins
   .ce-slide-landing to the slide floor with margin-top: auto (opens holes
   mid-slide). Every component below opts out of both.
   --------------------------------------------------------------------------- */
/* Fixed slide height: the theme only sets min-height, which leaves the stage's height indefinite, so
   canvases sized to 100% of it collapse to 0 and centre on the stage's top edge, over the title. */
.reveal .slides > section { height: 100%; }

.reveal .slides section > h1,
.reveal .slides section > h2 { max-width: 100%; }

.reveal .slides section > h2 { margin-bottom: .42em; }

/* ---------------------------------------------------------------------------
   EYEBROW: small mono label above the heading.
   <p class="eyebrow">ACT TWO &middot; PHASE 3</p>
   --------------------------------------------------------------------------- */
.reveal .eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--text-dim);
  font: 500 20px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.reveal .eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--gold);
}

/* ---------------------------------------------------------------------------
   LANDING LINE: one italic sentence at the bottom of a slide, usually the
   last fragment. Follows its content instead of the theme's margin-top:
   auto, so it never opens a hole mid-slide.
   <p class="landing">One wall down. <em>Every run still starts blank.</em></p>
   --------------------------------------------------------------------------- */
.reveal .slides section > .landing {
  margin-top: 2.4rem;
  max-width: none;
  padding-bottom: 8px;
  color: var(--text-dim);
  font: italic 400 36px/1.22 var(--serif);
}
.reveal .slides section > .landing em { color: var(--text-bright); font-style: italic; }

/* ---------------------------------------------------------------------------
   SOURCE LINE: small mono citation on any slide with a factual claim.
   <p class="src">Sierra &middot; Building Sierra's MCP gateway, &sect;042</p>
   --------------------------------------------------------------------------- */
.reveal .src {
  margin-top: 14px;
  max-width: none;
  color: var(--text-faint);
  font: 500 20px/1.4 var(--mono);
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   ILLUSTRATIVE CHIP: marks invented numbers or examples as not measured.
   <span class="illus">illustrative</span>
   --------------------------------------------------------------------------- */
.reveal .illus {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  color: var(--text-faint);
  font: 500 20px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px dashed var(--rule-strong);
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   QUESTION BAND: the two fixed questions ("what goes in?" / "who says it
   may?") plus a CAN / CAN'T pair, on every canvas slide that runs them.
   <div class="qband">
     <p class="q">? what goes in?</p>
     <p class="q auth">? who says it may?</p>
     <div class="can"><b>CAN</b><p>…</p></div>
     <div class="cant"><b>CAN&rsquo;T</b><p>…</p></div>
   </div>
   --------------------------------------------------------------------------- */
.reveal .qband {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 100%;
  margin-top: auto;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.reveal .qband .q {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 22px 0;
  max-width: none;
  color: var(--gold);
  font: 500 22px/1.3 var(--mono);
  letter-spacing: .04em;
}
.reveal .qband .q.auth { color: var(--violet); }
.reveal .qband .can,
.reveal .qband .cant {
  background: var(--bg);
  padding: 14px 22px 18px;
}
.reveal .qband .can b,
.reveal .qband .cant b {
  display: block;
  margin-bottom: 8px;
  font: 500 20px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reveal .qband .can b { color: var(--teal); }
.reveal .qband .cant b { color: var(--coral); }
.reveal .qband p { max-width: none; margin: 0; font-size: 28px; line-height: 1.3; color: var(--text); }

/* ---------------------------------------------------------------------------
   CARDS: a simple grid of proof cards.
   <div class="cards">
     <article class="card"><h3>Binding</h3><p>set at creation</p></article>
   </div>
   --------------------------------------------------------------------------- */
.reveal .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 20px;
}
.reveal .card {
  padding: 28px 30px;
  background: var(--bg-2);
  border-top: 3px solid var(--rule-strong);
}
.reveal .card h3 { margin: 0 0 12px; max-width: none; font-size: 34px; }
.reveal .card p { margin: 0; max-width: none; color: var(--text-dim); font-size: 28px; line-height: 1.34; }

/* ---------------------------------------------------------------------------
   QUOTE: a serif pull quote with its attribution.
   <blockquote class="quote">
     <p>An agent can't misuse what it never sees.</p>
     <p class="attrib">Sierra &middot; Building Sierra's MCP gateway, &sect;042</p>
   </blockquote>
   --------------------------------------------------------------------------- */
.reveal .quote {
  margin: 20px 0 0;
  padding-left: 28px;
  border-left: 2px solid var(--rule-strong);
}
.reveal .quote p {
  max-width: 34ch;
  color: var(--text-bright);
  font: italic 400 40px/1.3 var(--serif);
}
.reveal .quote .attrib {
  margin-top: 10px;
  max-width: none;
  color: var(--text-faint);
  font: 500 20px/1.3 var(--mono);
  letter-spacing: .04em;
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   CHIPS: the canvas legend's states, reusable outside the live canvas —
   summary tables, the naked-canvas legend, appendix ledgers.
   <span class="chip wall">FORGETS</span>
   <span class="chip wall open">CONTRACT?</span>
   <span class="chip auth">worker identity, verified</span>
   <span class="chip new">gateway</span>
   <span class="chip have">org catalog</span>
   <span class="chip retired">container</span>
   --------------------------------------------------------------------------- */
.reveal .chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  font: 500 20px/1 var(--mono);
  letter-spacing: .06em;
}
.reveal .chip.wall {
  color: var(--coral);
  text-transform: uppercase;
  background: var(--bg);
  border: 1px solid var(--coral);
}
.reveal .chip.wall.open { border-style: dashed; }
.reveal .chip.auth { color: var(--violet); background: var(--violet-soft); }
.reveal .chip.new { color: var(--gold); background: var(--gold-soft); }
.reveal .chip.have { color: var(--teal); background: var(--teal-soft); }
.reveal .chip.retired {
  color: var(--text-faint);
  background: transparent;
  border: 1px dashed var(--rule-strong);
  text-decoration: line-through;
  opacity: .7;
}

/* ---------------------------------------------------------------------------
   MINI CANVAS: top-right corner, ~22% scale, on lens slides 11, 15, 19, 20
   and slide 28. The canvas's internal geometry lives in assets/canvas.css.
   --------------------------------------------------------------------------- */
.reveal .cv-mini {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 1600px;
  height: 660px;
  transform: scale(.22);
  transform-origin: top right;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   SLIDE FRAME (build plan §7): header, then the stage, then the foot.
   The stage grows to fill every pixel between the title and the foot, so no
   slide ends in empty space; the figure inside it should fill >= 70% of it.
   <p class="eyebrow">…</p>
   <h2>One sentence stating the claim, <em>second clause.</em></h2>
   <div class="stage"> <div class="fig grow">…</div> </div>
   <div class="foot"> <p class="landing">…</p> <p class="src">…</p> </div>
   --------------------------------------------------------------------------- */
.reveal .stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  margin-top: 10px;
}
.reveal .stage > * { flex: 0 0 auto; }
.reveal .stage > .grow { flex: 1 1 auto; min-height: 0; }
.reveal .fig { position: relative; width: 100%; font-size: 28px; }
.reveal .foot {
  margin-top: auto;
  padding-top: 22px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.reveal .foot .landing {
  margin: 0;
  max-width: 1320px;
  color: var(--text-dim);
  font: italic 400 36px/1.22 var(--serif);
}
.reveal .foot .landing em { color: var(--text-bright); font-style: italic; }
/* Content-sized: a flex-basis here would become a height whenever a foot stacks vertically. */
.reveal .foot .src { flex: 0 1 auto; max-width: 520px; margin: 0; text-align: right; }
.reveal .foot:has(.quote) > .src, .reveal .foot:has(.ce-def) > .src { align-self: flex-end; }
.reveal .foot .qband { margin: 0; }

/* ---------------------------------------------------------------------------
   MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal .slides section *,
  .reveal .slides section *::before,
  .reveal .slides section *::after {
    transition: none !important;
    animation: none !important;
  }
}