/* ============================================================================
   Seven Powers deck — deck-specific components.
   Built only from paper-blueprint design tokens. The shared theme stays pristine;
   everything here is unique to this argument: the recurring seven-power map and
   the convergence payload diagram.
   ============================================================================ */

/* ── the recurring seven-power map ──────────────────────────────────────────
   One visual grammar shown twice: neutral (v1) and re-sorted (v3).
   Seven flat, square-edged tiles read like a periodic row of powers. */
.reveal .power-map {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin: 0.6em 0 0.4em;
  align-items: stretch;
}
.reveal .power {
  border-top: 2px solid var(--ink);
  background: var(--paper);
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.reveal .power .pm-num {
  font-family: var(--f-mono);
  font-size: 0.6em;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.06em;
}
.reveal .power .pm-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.62em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0.5em 0 0.35em;
  letter-spacing: -0.01em;
}
.reveal .power .pm-desc {
  font-size: 0.46em;
  line-height: 1.4;
  color: var(--graphite);
  margin: 0;
}

/* trajectory badge — only on the re-sorted map */
.reveal .power .pm-badge {
  font-family: var(--f-mono);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 0.6em;
}

/* trajectory variants: colored top border + colored badge */
.reveal .power.up   { border-top-color: var(--cyan); }
.reveal .power.up   .pm-badge { color: var(--cyan); }
.reveal .power.flux { border-top-color: #d97706; }
.reveal .power.flux .pm-badge { color: #d97706; }
.reveal .power.down { border-top-color: var(--drafting-red); }
.reveal .power.down .pm-badge { color: var(--drafting-red); }

/* ── convergence payload diagram ────────────────────────────────────────────
   Two ways in (Wedge, License) feed two engines that compound, all standing on
   a single substrate bar: dynamic software. */
.reveal .convergence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0.5em 0 0.3em;
}
.reveal .cv-tier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.reveal .cv-box {
  border-top: 2px solid var(--ink);
  background: var(--paper);
  padding: 16px 22px 18px;
}
.reveal .cv-box .cv-role {
  font-family: var(--f-mono);
  font-size: 0.42em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.reveal .cv-box .cv-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.72em;
  color: var(--ink);
  margin: 0.3em 0 0.25em;
  letter-spacing: -0.01em;
}
.reveal .cv-box .cv-sub {
  font-size: 0.52em;
  line-height: 1.45;
  color: var(--graphite);
  margin: 0;
}
.reveal .cv-box .cv-sub strong { color: var(--ink); }

/* getting-in tier reads as the wedge: cyan markers, lighter weight */
.reveal .cv-tier.entry .cv-box { border-top-color: var(--cyan); padding-bottom: 14px; }
.reveal .cv-tier.entry .cv-title { font-size: 0.62em; }

/* engines compound: heavier ink markers, denser body */
.reveal .cv-tier.engines .cv-box { border-top-width: 3px; }

.reveal .cv-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  font-family: var(--f-mono);
  color: var(--cyan);
  font-size: 0.7em;
  line-height: 1;
  margin: -2px 0;
}
.reveal .cv-flow span { text-align: center; }
.reveal .cv-base {
  border-top: 2px solid var(--ink);
  background: var(--cyan-soft);
  text-align: center;
  padding: 14px 22px;
  font-family: var(--f-mono);
  font-size: 0.5em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.reveal .cv-base strong { color: var(--cyan); }

/* ── companion-reading card ──────────────────────────────────────────────────
   A discreet cyan box pinned to the slide's bottom-left: a verbatim companion
   line and a clickable link to the chapter of The Last Economy it draws from.
   Companion, never a primary source — kept visually apart from the argument. */
.reveal .companion {
  position: absolute;
  left: 96px;
  bottom: 56px;
  max-width: 46%;
  background: var(--cyan-soft);
  border-left: 3px solid var(--cyan);
  padding: 14px 20px 16px;
}
.reveal .companion .cmp-label {
  font-family: var(--f-mono);
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.reveal .companion .cmp-quote {
  font-size: 0.46em;
  line-height: 1.45;
  color: var(--ink);
  margin: 0.5em 0 0.6em;
}
.reveal .companion a {
  font-family: var(--f-mono);
  font-size: 0.4em;
  letter-spacing: 0.02em;
  color: var(--cyan);
  border-bottom: 0;
}
.reveal .companion a:hover { border-bottom: 1px solid var(--cyan); }

.reveal section.dark-slide .companion {
  background: rgba(250, 250, 246, 0.06);
  border-left-color: #93c5fd;
}
.reveal section.dark-slide .companion .cmp-label,
.reveal section.dark-slide .companion a { color: #93c5fd; }
.reveal section.dark-slide .companion .cmp-quote { color: var(--paper); }

/* ── the recurring 7-powers matrix (rendered by matrix.js) ───────────────────
   One Benefit×Barrier grid, shown as: companies (v1), per-power highlight, and
   re-sorted (v2). Sized to sit under a one-line title at 1920×1080. */
.reveal svg.power-matrix {
  display: block;
  height: 740px;
  width: auto;
  max-width: 100%;
  margin: 0.1em auto 0;
}

/* ── three-pillar diagram (the three powers that matter now) ─────────────────
   The payload object: relationship · learning · AI-native delivery. */
.reveal .pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0.7em 0 0.3em;
  align-items: stretch;
}
.reveal .pillar {
  border-top: 3px solid var(--cyan);
  background: var(--paper);
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
}
.reveal .pillar .pl-num {
  font-family: var(--f-mono);
  font-size: 0.6em;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.08em;
}
.reveal .pillar h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.92em;
  color: var(--ink);
  margin: 0.35em 0 0.3em;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.reveal .pillar p {
  font-size: 0.62em;
  line-height: 1.5;
  color: var(--graphite);
  margin: 0 0 0.5em;
}
.reveal .pillar .pl-feed {
  font-family: var(--f-mono);
  font-size: 0.46em;
  letter-spacing: 0.04em;
  color: var(--graphite);
  margin-top: auto;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}
.reveal .pillar .pl-cl {
  font-family: var(--f-mono);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan);
  margin-top: 0.5em;
}
.reveal section.dark-slide .pillar {
  background: rgba(250, 250, 246, 0.04);
  border-top-color: #93c5fd;
}
.reveal section.dark-slide .pillar h4 { color: var(--paper); }
.reveal section.dark-slide .pillar .pl-num,
.reveal section.dark-slide .pillar .pl-cl { color: #93c5fd; }

/* ── spotlight cards (rotate through the seven over the matrix) ───────────────
   One card visible at a time (Reveal fade-in-then-out); each names a power and
   explains it / what assumption changed. The matrix cell emphasizes in sync. */
.reveal .spot-card {
  position: absolute;
  left: 84px;
  bottom: 84px;
  width: 600px;
  max-width: 46%;
  background: var(--paper);
  border-left: 3px solid var(--cyan);
  box-shadow: 0 2px 16px rgba(10, 37, 64, 0.10);
  padding: 18px 24px 20px;
  text-align: left;
}
.reveal .spot-card .sc-tag {
  font-family: var(--f-mono);
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.reveal .spot-card h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.8em;
  color: var(--ink);
  margin: 0.2em 0 0.3em;
  letter-spacing: -0.01em;
}
.reveal .spot-card p {
  font-size: 0.5em;
  line-height: 1.5;
  color: var(--graphite);
  margin: 0 0 0.4em;
}
.reveal .spot-card p strong { color: var(--ink); }
.reveal .spot-card .sc-why {
  border-top: 1px solid var(--rule);
  padding-top: 0.5em;
  margin-top: 0.2em;
}
/* trajectory accents for the re-sort cards */
.reveal .spot-card.up   { border-left-color: var(--cyan); }
.reveal .spot-card.up   .sc-tag { color: var(--cyan); }
.reveal .spot-card.flux { border-left-color: #d97706; }
.reveal .spot-card.flux .sc-tag { color: #d97706; }
.reveal .spot-card.down { border-left-color: var(--drafting-red); }
.reveal .spot-card.down .sc-tag { color: var(--drafting-red); }

/* ── supporting figures (rendered by figures.js) ─────────────────────────────*/
.reveal svg.fig {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0.5em auto 0;
}

/* ── persistent company logo (bottom-right) + slide number to bottom-left ─────*/
.deck-logo {
  position: fixed;
  right: 30px;
  bottom: 20px;
  height: 30px;
  width: auto;
  z-index: 50;
  opacity: 0.92;
  pointer-events: none;
}
.deck-logo.dark { display: none; }
body.on-dark .deck-logo.light { display: none; }
body.on-dark .deck-logo.dark { display: block; }
.reveal .slide-number { left: 24px; right: auto; }

/* ── Curation Labs brand badge on the closing "three that compound" slide ─────*/
.reveal .cl-badge {
  position: absolute;
  top: 56px;
  right: 84px;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal .cl-badge img { width: 60px; height: 60px; }

/* smaller takeaway line — for slides where a figure is the hero */
.reveal .big-text.sm { font-size: 1.05em; line-height: 1.22; }

/* feeder line readable on the dark close slide */
.reveal section.dark-slide .pillar .pl-feed {
  color: rgba(250, 250, 246, 0.55);
  border-top-color: rgba(250, 250, 246, 0.18);
}