/* CANONIC slide layout — shared by all CANONIC NEXUS deck slides.
   Consumes tokens.css and OVERRIDES the dark palette with a light Apple-store-product
   theme — slides are light; figures 10-13 stay dark.
   See feedback_persona_laude_framing.md + feedback_mockup_apple_polish_convergence.md. */

:root {
  /* MASTER SCALE — change this number to scale the entire slide system. 48px = 3x baseline; 32px = 2x; 16px = 1x. */
  font-size: 48px;

  /* Light surfaces — warm-whites, restrained accents */
  --bg-deep:           #f5f4f1;
  --bg-elevated:       #ffffff;
  --bg-surface:        #fafaf8;

  /* Type — near-black on warm-white, hierarchy by opacity */
  --fg-primary:        #1a1a1a;
  --fg-secondary:      rgba(26, 26, 26, 0.66);
  --fg-tertiary:       rgba(26, 26, 26, 0.46);
  --fg-quaternary:     rgba(26, 26, 26, 0.26);

  /* Hairlines — dark on light, very subtle */
  --rule-strong:       rgba(0, 0, 0, 0.14);
  --rule:              rgba(0, 0, 0, 0.07);
  --rule-faint:        rgba(0, 0, 0, 0.035);

  /* Accents — deeper, won't glow on white */
  --accent-federation: #2575d9;
  --accent-signed:     #2e8a4a;
  --accent-pending:    #c97d10;
  --accent-coin:       #a17a1f;
}

html, body {
  width: 150rem;
  height: 93.75rem;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  background: var(--bg-deep);
}

.slide {
  /* Centered pair: iPad on left, single text column on right.
     justify-content:center keeps both centered horizontally on the slide. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  width: 100%;
  height: 100%;
  padding: 2rem 3rem;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 35% 50%, rgba(37,117,217,0.05) 0%, transparent 70%),
    var(--bg-deep);
}

/* LEFT — iPad alone, no narrative crowding above it. Let it breathe. */
.stage-left {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: none;
}
/* Hide any narrative still left inside .stage-left in legacy HTML; the new home
   for .narrative is at the TOP of .stage-right. */
.stage-left > .narrative { display: none; }

/* iPad device frame — dark bezel, soft Apple-store shadow */
.ipad {
  position: relative;
  width: 83.3333rem;
  height: 59.5833rem;
  border-radius: 2.3333rem;
  background: #1a1a1a;
  padding: 0.75rem;
}
.ipad::after {
  content: "";
  position: absolute;
  top: 1.0833rem; left: 50%;
  transform: translateX(-50%);
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: #2a2a2a;
}
.ipad .screen {
  width: 100%;
  height: 100%;
  border-radius: 1.875rem;
  background: var(--bg-elevated);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--fg-primary);
}

/* iPad status bar */
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.75rem 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--fg-primary);
}
.status .right {
  display: flex; gap: 0.625rem; align-items: center;
  color: var(--fg-secondary);
  font-weight: 500;
  font-size: 1.07rem;
}
.status .right .battery {
  width: 1.5rem; height: 0.75rem;
  border: 0.0833rem solid var(--fg-secondary);
  border-radius: 0.1667rem;
  position: relative;
}
.status .right .battery::after {
  content: "";
  position: absolute;
  right: -0.1667rem; top: 0.1667rem;
  width: 0.125rem; height: 0.25rem;
  background: var(--fg-secondary);
  border-radius: 0 0.0833rem 0.0833rem 0;
}
.status .right .battery::before {
  content: "";
  position: absolute;
  left: 0.0833rem; top: 0.0833rem;
  width: 78%; height: calc(100% - 0.125rem);
  background: var(--fg-primary);
  border-radius: 0.0833rem;
}

/* App grid — NEX app content + LAUDE chat pane.
   Variations: .app.split (default 1fr / 23.75rem), .app.wide (no LAUDE pane). */
.app {
  display: grid;
  grid-template-columns: 1fr 18.3333rem;
  gap: 0;
  padding: 1.125rem 1.5rem 1.5rem;
  overflow: hidden;
}
.app.wide { grid-template-columns: 1fr; }

/* NEX content side */
.nex {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.125rem;
  padding-right: 1.5rem;
  border-right: 0.0833rem solid var(--rule);
}
.app.wide .nex { padding-right: 0; border-right: none; }

.nex-head { display: flex; align-items: center; gap: 0.875rem; }
.nex-head .logo {
  width: 2.375rem; height: 2.375rem;
  border-radius: 0.5833rem;
  background: var(--bg-surface);
  border: 0.0833rem solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.21rem;
  color: var(--accent-federation);
  letter-spacing: 0;
}
.nex-head .logo.green { color: var(--accent-signed); }
.nex-head .logo.amber { color: var(--accent-pending); }
.nex-head .logo.gold  { color: var(--accent-coin); }
.nex-head .title {
  font-family: var(--font-display);
  font-size: 1.41rem;
  font-weight: 600;
  color: var(--fg-primary);
}
.nex-head .subtitle {
  font-family: var(--font-text);
  font-size: 1.06rem;
  color: var(--fg-tertiary);
  margin-top: 0.125rem;
}

/* Stat row */
.deck-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 0.0833rem solid var(--rule);
}
.deck-stat .stat { display: flex; flex-direction: column; gap: 0.125rem; }
.deck-stat .stat .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.deck-stat .stat .l {
  font-family: var(--font-display);
  font-size: 0.967rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-tertiary);
}

/* Generic cards list inside NEX content */
.cards { display: grid; gap: 0.5rem; overflow: hidden; }
.cards .h {
  font-family: var(--font-display);
  font-size: 1.03rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-tertiary);
  margin-bottom: 0.25rem;
  display: flex; justify-content: space-between;
}
.cards .h .right { color: var(--accent-pending); }
.card {
  background: rgba(0,0,0,0.025);
  border: 0.0833rem solid var(--rule);
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.625rem;
  align-items: center;
}
.card.hot   { border-color: rgba(231,169,87,0.30);  background: rgba(231,169,87,0.05); }
.card.signed{ border-color: rgba(94,194,126,0.32);  background: rgba(94,194,126,0.05); }
.card.fed   { border-color: rgba(95,180,255,0.30);  background: rgba(95,180,255,0.05); }
.card .num {
  font-family: var(--font-mono);
  font-size: 1.03rem;
  color: var(--fg-tertiary);
}
.card .q {
  font-family: var(--font-display);
  font-size: 1.07rem;
  color: var(--fg-primary);
  font-weight: 500;
}
.card .q .meta {
  font-family: var(--font-text);
  font-size: 1.09rem;
  color: var(--fg-tertiary);
  font-weight: 400;
  display: block;
  margin-top: 0.0833rem;
}
.card .diff {
  font-family: var(--font-mono);
  font-size: 1.03rem;
  color: var(--accent-pending);
  letter-spacing: 0.04em;
}
.card:not(.hot):not(.signed) .diff { color: var(--fg-tertiary); }
.card.signed .diff { color: var(--accent-signed); }

/* LAUDE chat pane inside the iPad */
.laude-pane {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-left: 1.125rem;
  gap: 0.75rem;
  overflow: hidden;
}
.laude-pane .lph {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.625rem;
  border-bottom: 0.0833rem solid var(--rule);
}
.laude-pane .lph .av {
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 0.0833rem solid var(--accent-federation);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.03rem; font-weight: 700;
  color: var(--accent-federation);
}
.laude-pane .lph .n {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-primary);
}
.laude-pane .lph .s {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.967rem;
  color: var(--fg-quaternary);
  letter-spacing: 0.04em;
}
.laude-pane .messages {
  display: flex; flex-direction: column; gap: 0.625rem;
  overflow: hidden;
}
.laude-pane .m { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.5rem; }
.laude-pane .m .a {
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 0.0833rem solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 700;
  color: var(--fg-primary);
}
.laude-pane .m .who {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-secondary);
  margin-bottom: 0.125rem;
}
.laude-pane .m.laude .who { color: var(--accent-federation); }
.laude-pane .m .t {
  font-family: var(--font-text);
  font-size: 1.09rem;
  line-height: 1.42;
  color: var(--fg-secondary);
}
.laude-pane .m.user .t { font-style: italic; color: var(--fg-tertiary); }
.laude-pane .m.user .t::before { content: "\201C"; }
.laude-pane .m.user .t::after  { content: "\201D"; }
.laude-pane .m.laude .t strong { color: var(--fg-primary); font-weight: 600; }
.laude-pane .m.laude .t code {
  font-family: var(--font-mono); font-size: 1rem; color: var(--accent-federation);
}
.laude-pane .input {
  margin-top: 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 0.0833rem solid var(--rule);
  border-radius: 1.375rem;
  background: rgba(0,0,0,0.02);
  display: flex; align-items: center; gap: 0.625rem;
  color: var(--fg-tertiary);
  font-family: var(--font-text);
  font-size: 1.09rem;
  font-style: italic;
}
.laude-pane .input::after {
  content: "\2191";
  margin-left: auto;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--accent-federation);
  color: var(--bg-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.07rem;
  font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Home indicator */
.home {
  margin: 0.5rem auto 0.375rem;
  width: 8.75rem; height: 0.25rem;
  border-radius: 0.125rem;
  background: rgba(0,0,0,0.22);
}

/* RIGHT — single text column (narrative + slide-num + title + body + foot).
   Centered horizontally alongside the iPad with the .slide flex container.
   No edge background or hard border — the column floats next to the iPad. */
.stage-right {
  flex: 0 0 48rem;
  max-width: 48rem;
  background: none;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 1.5rem;
  border-left: none;
  align-content: center;
}
.slide-num {
  font-family: var(--font-mono);
  font-size: 1.07rem;
  color: var(--accent-federation);
  letter-spacing: 0.08em;
}
.slide-eye {
  font-family: var(--font-display);
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-tertiary);
  margin-top: 0.5rem;
}
.slide-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.88rem;
  line-height: 1.05;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
}
.slide-title em {
  font-style: normal;
  color: var(--accent-federation);
}
.slide-body { display: grid; gap: 1.375rem; align-content: start; }
.slide-body .item {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: 0.875rem;
  align-items: baseline;
}
.slide-body .item .marker {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--accent-federation);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.slide-body .item .h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 0.3333rem;
}
.slide-body .item .b {
  font-family: var(--font-text);
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--fg-secondary);
}
.slide-body .item .b code {
  font-family: var(--font-mono);
  font-size: 1.06rem;
  color: var(--accent-federation);
}
.slide-body .item .b em {
  color: var(--fg-tertiary);
  font-style: italic;
}

.slide-foot {
  display: grid;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 0.0833rem solid var(--rule);
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.slide-foot .wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-primary);
}
.slide-foot .wordmark .accent { color: var(--accent-federation); }
.slide-foot .ledger code {
  font-family: var(--font-mono);
  font-size: 1.09rem;
  color: var(--accent-federation);
}

/* NARRATIVE PANEL — story hook at the TOP of the right text column, above the
   slide-num and slide-title. Sets the scene per persona, then the title +
   body items render below in the same single column. */
.stage-right > .narrative {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0 0 1rem 0;
  border-bottom: 0.0833rem solid var(--rule);
  width: 100%;
  max-width: none;
}
.narrative .badge {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: var(--bg-elevated);
  border: 0.0833rem solid var(--rule-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.23rem;
  color: var(--accent-federation);
  letter-spacing: 0;
}
.narrative .badge.green { color: var(--accent-signed); }
.narrative .badge.amber { color: var(--accent-pending); }
.narrative .badge.gold  { color: var(--accent-coin); }
.narrative .story {
  display: grid;
  gap: 0.45rem;
}
.narrative .story .lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  line-height: 1.22;
}
.narrative .story .lead em {
  font-style: normal;
  color: var(--accent-federation);
}
.narrative .story .body {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--fg-secondary);
  line-height: 1.42;
}
.narrative .story .body strong {
  color: var(--fg-primary);
  font-weight: 600;
}
.narrative .story .body code {
  font-family: var(--font-mono);
  font-size: 1.03rem;
  color: var(--accent-federation);
}


/* App button overlay — top-right of every detail slide. Visual anchor for the
   active NEX. Slide must be position:relative for this to anchor to slide corner. */
.slide { position: relative; }
.app-btn-overlay {
  position: absolute;
  top: 1.5rem;
  right: 1.6rem;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1rem;
  background: var(--bg-elevated);
  border: 0.12rem solid var(--rule-strong);
  border-radius: 1rem;
  z-index: 10;
}
.app-btn-overlay .ico {
  width: 2.9rem; height: 2.9rem;
  border-radius: 0.7rem;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
}
.app-btn-overlay.anki  .ico { background: linear-gradient(160deg, #4eb572 0%, #1f6b3a 100%); }
.app-btn-overlay.case  .ico { background: linear-gradient(160deg, #3f93ec 0%, #1c5fb8 100%); }
.app-btn-overlay.omics .ico { background: linear-gradient(160deg, #e0a042 0%, #a45d05 100%); }
.app-btn-overlay.onco  .ico { background: linear-gradient(160deg, #c87c10 0%, #6b3d05 100%); }
.app-btn-overlay.galaxy .ico { background: linear-gradient(160deg, #3b3b3b 0%, #111 100%); }
.app-btn-overlay .t .nn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg-primary);
  line-height: 1.1;
}
.app-btn-overlay.anki  .t .nn { color: var(--fg-primary); }
.app-btn-overlay .t .role {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
}
.app-btn-overlay.anki  .t .role { color: rgba(46,138,74,0.95); }
.app-btn-overlay.case  .t .role { color: var(--accent-federation); }
.app-btn-overlay.omics .t .role { color: var(--accent-pending); }
.app-btn-overlay.onco  .t .role { color: var(--accent-pending); }


/* === LAUDE pane: BLACK / dark across every iPad surface — magic 255 polish === */
.laude-pane {
  background: #0e1722;
  color: #fff;
  border-radius: 0.75rem;
  margin-left: 0.5rem;
  padding: 0.9rem 0.9rem 0.8rem 0.9rem;
}
.laude-pane .lph {
  border-bottom: 0.0833rem solid rgba(255,255,255,0.12);
}
.laude-pane .lph .av { background: rgba(37,117,217,0.22); color: #fff; border-color: rgba(95,180,255,0.85); }
.laude-pane .lph .n { color: #fff; }
.laude-pane .lph .s { color: rgba(255,255,255,0.45); }
.laude-pane .m .a {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.35) !important;
}
.laude-pane .m .who { color: rgba(255,255,255,0.6); }
.laude-pane .m.laude .who { color: rgba(95,180,255,0.95); }
.laude-pane .m .t { color: rgba(255,255,255,0.92); }
.laude-pane .m.user .t { color: rgba(255,255,255,0.7); }
.laude-pane .m.laude .t strong { color: #fff; }
.laude-pane .m.laude .t code {
  color: rgba(95,180,255,0.95);
  background: rgba(255,255,255,0.06);
  padding: 0.05rem 0.18rem;
  border-radius: 0.18rem;
}
.laude-pane .input {
  background: rgba(255,255,255,0.05);
  border: 0.0833rem solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55);
}
.laude-pane .input::after { background: var(--accent-federation); color: #fff; }

/* Vector PDF output — Chrome --print-to-pdf uses this paper size. 7200x4500 matches the slide's logical CSS size. */
@page { size: 7200px 4500px; margin: 0; }
@media print {
  html, body { width: 7200px; height: 4500px; margin: 0; padding: 0; overflow: hidden; }
}