/* =========================================================================
   NiKoKobo — Layer B  ·  per-slide-type styles
   Variables come from ../colors_and_type.css.
   Canvas is 1920×1080. deck-stage handles the visual scale; everything here
   uses the authored 1920-coordinate space.
   =========================================================================

   ─── LAYOUT PRINCIPLES (the three rules every master must satisfy) ───

   1.  Variable + fixed blocks must not share vertical space.
       A content-driven element (bullet list, chat thread, table) cannot
       sit above an absolutely-positioned element in the same column.
       The variable block will grow into the fixed block and overlap.
       No content-length budget is durable.

   2.  Semantic siblings live in the same flow.
       If B summarises / concludes / annotates A, B is a flow child of
       A's stack — never pinned to a slide-bottom coordinate "to land
       in the same visual zone." That trick is exactly what produces
       the Principle 1 collision.

   3.  Bottom-anchored fixed coordinates are reserved.
       The slide's bottom strip is for elements semantically
       independent of the body: brand mark, chapter / page label,
       decorative rule. Body-meaning copy never goes there.

   Full text + applied checklist: ../design-principles.md
   ========================================================================= */

deck-stage { background: var(--bg); }

.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-stack);
  overflow: hidden;
}

/* =========================================================================
   01 · TITLE
   ========================================================================= */
.slide--title .stack {
  position: absolute;
  left: 120px;
  top: 280px;
  right: 120px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.slide--title .hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
}
/* Hero wordmark — CSS background-image, mode-swapped. No wrapper card, no bg. */
.slide--title .wm-hero {
  width: 1100px;
  height: 240px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.wm-hero { background-image: url("../assets/nikokobo-wordmark-dark-cropped.png"); }
.slide--title .subtitle {
  font-size: 28px;
  font-weight: 400;
  color: var(--fg-sub);
  line-height: 1.7;
}

/* =========================================================================
   02 · SECTION
   ========================================================================= */
.slide--section .stack {
  position: absolute;
  left: 120px;
  top: 320px;
  right: 120px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.slide--section .chapter-line {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.slide--section .underline {
  width: 96px;
  height: 1px;
  background: var(--accent);
}
.slide--section .heading {
  font-size: 132px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.slide--section .heading .accent { color: var(--accent); }

/* =========================================================================
   03 · PRINCIPLES
   ========================================================================= */
.slide--principles .top-meta {
  position: absolute;
  left: 168px;
  top: 64px;
}
.slide--principles .top-meta .nikokobo {
  font-family: var(--font-latin);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--fg);
  text-transform: uppercase;
}
.slide--principles .top-meta .label {
  margin-top: 6px;
  font-family: var(--font-latin);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.slide--principles .heading {
  position: absolute;
  left: 120px;
  top: 200px;
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: var(--fg);
}
.slide--principles .heading .accent { color: var(--accent); }
.slide--principles .heading .dot { color: var(--accent); }

.slide--principles .columns {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 480px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
}
.slide--principles .col {
  padding-top: 32px;
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.slide--principles .col-num {
  font-family: var(--font-latin);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
}
.slide--principles .col-title {
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--fg);
}
.slide--principles .col-sub {
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-sub);
  line-height: 1.6;
}
.slide--principles .col-body {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  color: var(--fg-sub);
  line-height: 1.7;
}

/* =========================================================================
   04 · METRIC
   Left-anchored editorial layout: kicker + giant stat + caption + context.
   ========================================================================= */
.slide--metric .stack {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 200px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.slide--metric .kicker {
  margin-bottom: 80px;
  color: var(--fg-sub);
  font-weight: 500;
}
.slide--metric .stat-wrap {
  position: relative;
  width: 600px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide--metric .glow {
  position: absolute;
  inset: -80px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.slide--metric .stat {
  position: relative;
  font-size: 440px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.05em;
}
.slide--metric .label {
  margin-top: 20px;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.slide--metric .context {
  margin-top: 60px;
  max-width: 900px;
  font-size: 22px;
  font-weight: 400;
  color: var(--fg-sub);
  line-height: 1.6;
}

/* =========================================================================
   05 · CLOSING
   ========================================================================= */
.slide--closing .top-meta {
  position: absolute;
  left: 168px;
  top: 78px;
}
.slide--closing .top-meta .label {
  font-family: var(--font-latin);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.slide--closing .hero {
  /* line-height: 1.2 inherited from colors_and_type.css for descender clearance */
  position: absolute;
  left: 120px;
  top: 260px;
  font-size: 128px;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--fg);
  max-width: 1400px;
}
.slide--closing .hero em {
  font-style: italic;
  color: var(--accent);
  font-weight: 900;
}
.slide--closing .sub {
  position: absolute;
  left: 120px;
  top: 820px;
  font-size: 24px;
  font-weight: 400;
  color: var(--fg-sub);
  line-height: 1.7;
}
.slide--closing .sub b {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
.slide--closing .signature {
  position: absolute;
  left: 120px;
  bottom: 130px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-latin);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.slide--closing .signature .dash {
  width: 36px;
  height: 1px;
  background: var(--fg-sub);
}
.slide--closing .wm-closing {
  position: absolute;
  right: 80px;
  bottom: 260px;
  width: 720px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
}
.wm-closing { background-image: url("../assets/nikokobo-wordmark-dark-cropped.png"); }

/* small util */
.numeral-mono { font-family: var(--font-latin); font-feature-settings: "tnum" 1; }

/* =========================================================================
   06 · LIST  (lecture template)
   Demonstrates ordered bullet list with the 16 px spacing primitive.

   ── LIST master contract (re: the three principles above) ──
   The summary line ("総括キャッチコピー") that wraps up a LIST slide
   lives as `.list-summary`, a FLOW child of `.stack`, after `ol.bullets`.
   It is NEVER pinned to the slide bottom. Reasons, in principle order:

     P1  ol.bullets is variable-height (1–10+ items). A bottom-pinned
         summary would eventually be overrun by the bullets.
     P2  The summary is the bullets' conclusion — same semantic scope,
         so it must share the same layout context (this stack).
     P3  The slide bottom is reserved for footer-rule / footer-label /
         brand-mark only. Body copy stays out of it.

   Contract guarantees:
     [A]  bullets count 1..10 never collides with the summary.
     [B]  Omitting `.list-summary` does not shift bullets layout.
          (Margin lives on .list-summary itself, not on a bullets sibling.)
   ========================================================================= */
.slide--list .stack {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 200px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.slide--list .heading { font-size: 88px; }
.slide--list ol.bullets { margin-top: 32px; max-width: 1400px; }
.slide--list ol.bullets > li {
  font-size: 36px;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 32px;
  padding-left: 80px;       /* extra room for two-digit ordinals */
}
.slide--list ol.bullets > li::before {
  font-size: 36px;
  top: 0;
}

/* ── .list-summary ─ flow-positioned summary line, blue accent ──
   Margin is OWNED by this element so omitting it leaves bullets untouched
   (contract [B]). No position / top / bottom — pure flow (P1, P2, P3). */
.slide--list .list-summary {
  margin-top: 64px;          /* breathing room from final bullet */
  max-width: 1400px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--accent);
  letter-spacing: -0.01em;
}
/* When bullets get dense (≥8 items), tighten the leading-up gap a touch.
   Still flow-based — this is not absolute repositioning. */
.slide--list ol.bullets:has(> li:nth-child(8)) + .list-summary {
  margin-top: 48px;
}

/* ── ul (中黒) variant ─ same contract, different bullet glyph ──
   The .list-summary contract is glyph-agnostic: ordered (01/02/03) and
   unordered (・) bullets share the same flow-based summary slot.

   IMPORTANT: colors_and_type.css already defines `ul.bullets > li::before`
   as a 12px accent disc, AND `ul.bullets { list-style: none }` to suppress
   the native UA marker. We must work WITHIN that pipeline — re-skinning
   the existing ::before to render the 中黒 glyph — rather than re-enabling
   the native marker (that would draw two glyphs: the inherited disc PLUS
   the re-enabled native marker). */
.slide--list ul.bullets { margin-top: 32px; max-width: 1400px; }
.slide--list ul.bullets > li {
  font-size: 36px;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 32px;
  padding-left: 56px;
}
/* Override the disc from colors_and_type.css with a 中黒 glyph.
   Mirrors the ol::before alignment pattern: position:absolute, left:0,
   top:0 — the glyph then baseline-aligns with the first text line the
   same way the ol counter does. */
/* Glyph sizing note:
   The 中黒 (U+30FB) occupies only the central ~1/3 of its em-box, so a
   font-size matching the body (36px) produces a visually tiny dot — well
   below body x-height. To make the dot read at the same visual weight as
   the ol numbers (which are full-height glyphs), we triple the ::before
   font-size and pull the glyph back up the line with a negative top so
   its optical center sits on the body's first-line center. */
.slide--list ul.bullets > li::before {
  content: "・";
  position: absolute;
  left: -8px;             /* glyph has heavy side-bearing — pull left to compensate */
  top: -18px;             /* lift the oversized em-box so the dot sits on body baseline area */
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 96px;        /* 36px × ~2.7 → visible dot matches body x-height */
  line-height: 1;
  color: var(--accent);
}
.slide--list ul.bullets:has(> li:nth-child(8)) + .list-summary {
  margin-top: 48px;
}

/* =========================================================================
   07 · TABLE  (lecture template)
   ========================================================================= */
.slide--table .stack {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 200px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.slide--table .heading { font-size: 88px; }
.slide--table table.brand-table {
  margin-top: 32px;
  font-size: 32px;
}
.slide--table table.brand-table th {
  font-size: 22px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--rule-strong);
  padding: 24px;            /* > 16 px floor */
}
.slide--table table.brand-table td {
  padding: 28px 24px;       /* > 16 px floor */
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
}
.slide--table table.brand-table tr:last-child td { border-bottom: none; }

/* =========================================================================
   08 · CALLOUT  (lecture template)
   ========================================================================= */
.slide--callout .stack {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 200px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.slide--callout .heading { font-size: 96px; }
.slide--callout .callout {
  margin-top: 24px;
  padding: 48px 56px;        /* well above 16 px floor */
  border-radius: 20px;
  max-width: 1400px;
}
.slide--callout .callout .kicker { margin-bottom: 16px; }
.slide--callout .callout .lead { font-size: 40px; line-height: 1.5; color: var(--fg); }

/* =========================================================================
   09 · CHAT  (lecture template)
   Chat bubbles never let the border touch the text - 32 px interior pad.
   ========================================================================= */
.slide--chat .stack {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 200px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.slide--chat .heading { font-size: 88px; margin-bottom: 24px; }
.slide--chat .chat-row {
  display: flex;
  width: 100%;
}
.slide--chat .chat-row--in  { justify-content: flex-start; }
.slide--chat .chat-row--out { justify-content: flex-end; }
.slide--chat .chat-bubble {
  max-width: 70%;
  padding: 32px 40px;        /* 32 px > 16 px floor */
  border-radius: 28px;
  font-size: 32px;
  line-height: 1.55;
}
.slide--chat .chat-row--out .chat-bubble {
  border-radius: 28px 28px 4px 28px;
}
.slide--chat .chat-row--in .chat-bubble {
  border-radius: 28px 28px 28px 4px;
}