/* deck-styles.css — slide-specific CSS extracted from WIP/Tribe Deck.html.
   Loaded alongside styles.css when the shell mounts the deck modal so that
   slotted slide content renders with its authored typography + layout. */

/* ---- Slide base ---- */
.slide {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: 'Geist', system-ui, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}
.slide.dark { background: #0E0E10; color: #EAE6DC; }
.slide.dark .meta-strip { color: rgba(234,230,220,0.55); border-color: rgba(234,230,220,0.18); }
.slide.dark .meta-strip .ms-mark { color: #B85C2E; }
.slide.dark .footer-strip { border-color: rgba(234,230,220,0.18); color: rgba(234,230,220,0.55); }
.slide.accent { background: var(--accent); color: #FBF6EE; }
.slide.accent .meta-strip { color: rgba(251,246,238,0.7); border-color: rgba(251,246,238,0.3); }
.slide.accent .meta-strip .ms-mark { color: #FBF6EE; }
.slide.accent .footer-strip { border-color: rgba(251,246,238,0.3); color: rgba(251,246,238,0.7); }

/* ---- Meta strip ---- */
.meta-strip {
  position:absolute; top:0; left:0; right:0;
  height:72px;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; padding: 0 64px;
  border-bottom: 1px solid var(--rule-soft);
  font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.meta-strip .ms-l { justify-self:start; display:flex; gap:18px; align-items:center; }
.meta-strip .ms-c { justify-self:center; }
.meta-strip .ms-r { justify-self:end; display:flex; gap:18px; align-items:center; }
.meta-strip .ms-mark { color: var(--accent); font-weight:600; letter-spacing: 0.08em; }
.meta-strip .ms-dot { width:6px; height:6px; background: currentColor; border-radius:50%; opacity:.6; }

/* ---- Footer strip ---- */
.footer-strip {
  position:absolute; bottom:0; left:0; right:0;
  height:60px;
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  align-items:center; padding: 0 64px;
  border-top: 1px solid var(--rule-soft);
  font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.06em; color: var(--muted);
  text-transform: uppercase;
}
.footer-strip .fs-c { text-align:center; }
.footer-strip .fs-r { text-align:right; }

/* ---- Canvas ---- */
.slide .canvas {
  position:absolute;
  top:72px; bottom:60px; left:0; right:0;
  padding: 80px 100px;
  box-sizing: border-box;
}

/* ---- Type ---- */
.eyebrow {
  font: 500 26px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}
.eyebrow .accent { color: var(--accent); }
h1.display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 116px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  white-space: nowrap;
}
h1.title {
  font-weight: 500;
  font-size: 96px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h2.section {
  font-weight: 500;
  font-size: 72px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.lede {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}
.body {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.small {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--muted);
}
.mono-label {
  font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Layout helpers ---- */
.stack-lg > * + * { margin-top: 48px; }
.stack-md > * + * { margin-top: 28px; }
.stack-sm > * + * { margin-top: 16px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
.rule { height: 1px; background: var(--rule-soft); border: 0; margin: 0; }
.rule-ink { background: var(--ink); height: 2px; }

/* ---- Cover ---- */
.cover-grid { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.cover-mark {
  display: flex; align-items:center; gap: 14px;
  font: 500 26px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cover-mark .glyph { width: 28px; height: 28px; background: var(--accent); border-radius: 2px; }

/* ---- Numbered tile ---- */
.num-tile { display:flex; flex-direction:column; gap: 18px; padding: 28px 0 0; border-top: 2px solid var(--ink); }
.num-tile .num { font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; color: var(--muted); }
.num-tile .num.accent { color: var(--accent); }

/* ---- Personalization placeholder ---- */
.ph {
  background: rgba(184,92,46,0.10);
  border-bottom: 1.5px dashed var(--accent);
  padding: 0 6px;
  color: var(--accent);
  font-weight: 500;
}
body[data-theme="dark"] .ph { background: rgba(216,122,74,0.16); }

/* ---- Pillar bars ---- */
.pillar-bar { display: grid; grid-template-columns: 50fr 25fr 25fr; height: 14px; gap: 0; border-radius: 1px; overflow: hidden; }
.pillar-bar .seg-1 { background: var(--accent); }
.pillar-bar .seg-2 { background: var(--moss); }
.pillar-bar .seg-3 { background: var(--ink); }

/* ---- Pillar columns ---- */
.pillar-col {
  border-top: 2px solid var(--ink);
  padding-top: 28px;
  display: flex; flex-direction: column;
  gap: 20px; height: 100%;
}
.pillar-col.is-on { border-top-color: var(--accent); }
.pillar-col .p-num { font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; color: var(--muted); }
.pillar-col.is-on .p-num { color: var(--accent); }
.pillar-col .p-name { font-weight: 500; font-size: 56px; letter-spacing: -0.02em; line-height: 1; }
.pillar-col .p-pct { font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; color: var(--ink-2); }
.pillar-col .p-desc { font-size: 26px; line-height: 1.45; color: var(--ink-2); }

/* ---- Door cards ---- */
.door {
  border: 1.5px solid var(--ink); padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  background: var(--paper); height: 100%; box-sizing: border-box;
}
.door .door-id { font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; color: var(--muted); }
.door .door-name { font-weight: 500; font-size: 44px; line-height: 1; letter-spacing:-0.015em; }
.door .door-meta { font: 500 24px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; color: var(--accent); }
.door .door-body { font-size: 26px; line-height: 1.45; color: var(--ink-2); flex:1; }

/* ---- Big quote ---- */
.pull {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 108px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pull em { font-style: italic; color: var(--accent); }

/* ---- Stack pillar list ---- */
.stack-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 0;
}
.stack-list li {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.stack-list li .sl-num { font: 500 24px/1 'JetBrains Mono', monospace; color: var(--muted); letter-spacing: 0.1em; }
.stack-list li .sl-name { font-weight: 500; font-size: 30px; letter-spacing: -0.01em; }
.stack-list li .sl-desc { font-size: 24px; color: var(--muted); margin-top: 6px; }

/* ---- Welcome ---- */
.signature { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; font-size: 44px; }

/* ---- Pavel — narrator caret ---- */
.caret { color: var(--accent); }