/* ============================================================
   Coach Kenny · Decks — shared styles (hub, renderer, editor)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#0A0C12; --surface:#14181F; --surface-2:#1C222C; --surface-3:#242B37;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --text:#EEF1F6; --text-2:#A9B1C0; --text-3:#6E7787;
  --red:#E4223C; --red-fill:#C8102E; --green:#A8D400; --green-txt:#B9E22B;
  --shadow:0 24px 70px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
  --glow:rgba(228,34,60,.16);
  --display:"Avenir Next Condensed","HelveticaNeue-CondensedBold","Arial Narrow",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:light){
  :root{
    --ink:#F2F4F8; --surface:#FFFFFF; --surface-2:#EBEEF4; --surface-3:#DFE4EC;
    --line:rgba(12,15,22,.13); --line-2:rgba(12,15,22,.24);
    --text:#0E131B; --text-2:#4C5566; --text-3:#798395;
    --red:#C8102E; --red-fill:#C8102E; --green:#5F7C00; --green-txt:#455C00;
    --shadow:0 18px 50px rgba(14,19,27,.14), 0 1px 4px rgba(14,19,27,.08);
    --glow:rgba(200,16,46,.12);
  }
}
:root[data-theme="dark"]{
  --ink:#0A0C12; --surface:#14181F; --surface-2:#1C222C; --surface-3:#242B37;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --text:#EEF1F6; --text-2:#A9B1C0; --text-3:#6E7787;
  --red:#E4223C; --red-fill:#C8102E; --green:#A8D400; --green-txt:#B9E22B;
  --shadow:0 24px 70px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
  --glow:rgba(228,34,60,.16);
}
:root[data-theme="light"]{
  --ink:#F2F4F8; --surface:#FFFFFF; --surface-2:#EBEEF4; --surface-3:#DFE4EC;
  --line:rgba(12,15,22,.13); --line-2:rgba(12,15,22,.24);
  --text:#0E131B; --text-2:#4C5566; --text-3:#798395;
  --red:#C8102E; --red-fill:#C8102E; --green:#5F7C00; --green-txt:#455C00;
  --shadow:0 18px 50px rgba(14,19,27,.14), 0 1px 4px rgba(14,19,27,.08);
  --glow:rgba(200,16,46,.12);
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}
img{max-width:100%;display:block}
[hidden]{display:none !important}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ============================================================
   TOP BAR — shared by hub, deck, editor
   ============================================================ */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  padding:.6rem clamp(.9rem,3vw,1.6rem);background:color-mix(in srgb,var(--ink) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0}
.brand-k{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;color:var(--text)}
.brand-k span{color:var(--red)}
.brand-sep{width:1px;height:1.1rem;background:var(--line-2)}
.brand-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.deckswitch{display:flex;align-items:center;gap:.35rem;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.deckswitch::-webkit-scrollbar{display:none}
.dtab{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border-radius:99px;
  border:1px solid var(--line);background:transparent;color:var(--text-2);
  font-size:.8rem;font-weight:550;text-decoration:none;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;cursor:pointer}
.dtab:hover{background:var(--surface-2);color:var(--text)}
.dtab[aria-current="page"]{background:var(--red-fill);border-color:var(--red-fill);color:#fff}
.topbar-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.tbtn{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .78rem;border-radius:8px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);
  font-size:.78rem;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s}
.tbtn:hover{background:var(--surface-3);color:var(--text)}
.tbtn-hot{background:var(--red-fill);border-color:var(--red-fill);color:#fff}
.tbtn-hot:hover{background:var(--red);border-color:var(--red);color:#fff}
.tbtn:disabled{opacity:.4;cursor:not-allowed}

/* ============================================================
   HUB
   ============================================================ */
.hub{max-width:1120px;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) clamp(1.1rem,4vw,2rem) 5rem}
.hub-eyebrow{color:var(--text-3);margin:0 0 1rem}
.hub-h{font-family:var(--display);font-size:clamp(2.6rem,8vw,5.2rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.012em;line-height:.94;margin:0 0 1rem;color:var(--text)}
.hub-h span{color:var(--red)}
.hub-lede{color:var(--text-2);font-size:clamp(1rem,1.4vw,1.16rem);max-width:56ch;margin:0 0 2.8rem;text-wrap:pretty}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:1.1rem}
.hub-card{display:flex;flex-direction:column;gap:.55rem;padding:1.5rem 1.55rem;
  background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--red-fill);
  border-radius:12px;text-decoration:none;position:relative;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-card-icon{font-size:1.7rem;line-height:1}
.hub-card-label{color:var(--red);margin:0}
.hub-card-title{font-family:var(--display);font-size:1.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.015em;margin:0;color:var(--text);line-height:1.05}
.hub-card-blurb{margin:0;color:var(--text-2);font-size:.88rem;line-height:1.6;text-wrap:pretty}
.hub-card-foot{margin-top:.5rem;padding-top:.8rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.hub-card-meta{color:var(--text-3);margin:0;font-size:.58rem}
.hub-card-go{color:var(--red);font-weight:700;font-size:.85rem}
.hub-empty{padding:3rem 1.5rem;text-align:center;color:var(--text-3);
  border:1px dashed var(--line-2);border-radius:12px}

/* ============================================================
   DECK RENDERER
   ============================================================ */
.deck{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.rail{position:sticky;top:0;z-index:40;display:flex;align-items:stretch;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.seg{display:flex;align-items:center;gap:.6rem;padding:.55rem .95rem;
  border-right:1px solid var(--line);min-width:0}
.seg:last-child{border-right:0}
.seg-l{color:var(--text-3);white-space:nowrap;font-size:.6rem}
.seg-t{display:flex;gap:4px}
.tick{width:16px;height:5px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:var(--surface-3);transition:background .2s,transform .2s}
.tick:hover{background:var(--line-2);transform:scaleY(1.5)}
.tick[aria-current="true"]{background:var(--red)}
.tick.done{background:color-mix(in srgb,var(--red) 42%,transparent)}

.stage{flex:1}
.slide{padding:clamp(1.5rem,4vw,3.25rem) clamp(1.1rem,4vw,3.25rem) 5.5rem}
.slide:not([hidden]){animation:slidein .34s cubic-bezier(.22,.9,.3,1) both}
@keyframes slidein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.eyebrow{color:var(--red);margin:0 0 .5rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.shead h2{font-family:var(--display);font-size:clamp(1.85rem,3.6vw,3rem);font-weight:700;
  letter-spacing:.012em;text-transform:uppercase;line-height:1.04;margin:0 0 .55rem;
  text-wrap:balance;color:var(--text)}
.lede{color:var(--text-2);font-size:clamp(.96rem,1.15vw,1.09rem);margin:0;max-width:62ch;text-wrap:pretty}
.chip{background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
  padding:.2rem .55rem;border-radius:99px;font-size:.6rem;white-space:nowrap}
.note{margin:1.5rem 0 0;padding:.75rem .95rem;border-left:2px solid var(--green);
  background:color-mix(in srgb,var(--green) 9%,transparent);color:var(--green-txt);
  font-size:.83rem;line-height:1.62;border-radius:0 6px 6px 0;
  font-family:var(--mono);text-transform:none;letter-spacing:.005em}
kbd{font-family:var(--mono);font-size:.78em;background:var(--surface-2);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:.1em .42em;color:var(--text-2)}
.deck b{color:var(--text);font-weight:650}
.pad{max-width:1180px;margin:0 auto;width:100%}
.shead-wide .lede{max-width:70ch}

/* cover */
.cover{max-width:1180px;margin:0 auto;width:100%;padding-top:clamp(1rem,5vh,4rem);position:relative}
.cover-mark{font-family:var(--display);font-weight:700;font-size:clamp(5rem,17vw,14rem);
  line-height:.8;letter-spacing:-.02em;position:absolute;inset:auto -.03em -2.5rem auto;
  opacity:.05;pointer-events:none;user-select:none;white-space:nowrap}
.cover-mark .cm-2{color:var(--red)}
.cover-eyebrow{color:var(--text-3);margin:0 0 1.4rem}
.cover-h{font-family:var(--display);font-size:clamp(3.1rem,10.5vw,8rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.008em;line-height:.9;margin:0 0 1.3rem;
  position:relative;color:var(--text)}
.cover-h::after{content:"";display:block;width:clamp(70px,9vw,116px);height:5px;
  background:var(--red-fill);margin-top:1.5rem;border-radius:2px}
.cover-lede{color:var(--text-2);font-size:clamp(1.02rem,1.5vw,1.28rem);max-width:52ch;
  margin:0 0 2.4rem;text-wrap:pretty}
.cover-meta{list-style:none;margin:0 0 2.6rem;padding:0;display:flex;gap:.55rem;
  flex-direction:column;max-width:34rem}
.cover-meta li{display:flex;align-items:baseline;gap:.9rem;padding:.62rem 0;
  border-top:1px solid var(--line);color:var(--text);font-size:1.02rem}
.cover-meta li:last-child{border-bottom:1px solid var(--line)}
.cover-meta .mono{color:var(--red);font-size:.66rem}
.cover-hint{color:var(--text-3);font-size:.85rem;margin:0}

/* act divider */
.slide-divider{display:grid;place-content:center;min-height:min(74vh,640px)}
.divider{max-width:900px;margin:0 auto}
.div-num{color:var(--red);margin:0 0 1.1rem;font-size:.72rem}
.div-h{font-family:var(--display);font-size:clamp(2.4rem,6.6vw,5rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;line-height:.96;margin:0 0 1.2rem;
  text-wrap:balance;color:var(--text)}
.div-lede{color:var(--text-2);font-size:clamp(1rem,1.5vw,1.24rem);max-width:56ch;margin:0 0 1.7rem;text-wrap:pretty}

/* screenshot slides */
.split{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.4vw,3.1rem);align-items:start;max-width:1520px;margin:0 auto;width:100%}
.shot{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);position:sticky;top:5.2rem}
.side{min-width:0;padding-top:.15rem}
.steps{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.2rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:.95rem;padding:.85rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{width:1.55rem;height:1.55rem;border-radius:99px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--red);
  font-size:.63rem;letter-spacing:0;flex-shrink:0;margin-top:.15rem}
.step-b{min-width:0}
.step-b h4{margin:0 0 .2rem;font-size:.99rem;font-weight:650;letter-spacing:-.005em;color:var(--text)}
.step-b p{margin:0;color:var(--text-2);font-size:.9rem;line-height:1.62;text-wrap:pretty}

/* card grid */
.cards{margin-top:2.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:1.3rem 1.35rem;border-top:2px solid var(--red-fill)}
.card h4{margin:0 0 .45rem;font-family:var(--display);font-size:1.22rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.015em;color:var(--text)}
.card p{margin:0;color:var(--text-2);font-size:.88rem;line-height:1.62;text-wrap:pretty}

/* flow diagram — one numbered spine, top to bottom.
   The rail and its arrowhead are pseudo-elements on each row, so they always
   start under that row's number and end at the next one. Nothing is positioned
   against the container width, which is what used to drift out of alignment. */
.flow{list-style:none;margin:1.9rem 0 0;padding:0;max-width:960px}
.flow-step{position:relative;display:grid;
  grid-template-columns:2.1rem minmax(0,1fr);column-gap:1.2rem;padding-bottom:.8rem}
.flow-step:last-child{padding-bottom:0}

/* the rail */
.flow-step:not(:last-child)::before{content:"";position:absolute;
  left:1.05rem;margin-left:-1.5px;top:2.45rem;bottom:.35rem;width:3px;
  border-radius:3px;background:var(--red-fill);transform-origin:top center}
/* its arrowhead, sitting on the rail's end just above the next number */
.flow-step:not(:last-child)::after{content:"";position:absolute;
  left:1.05rem;margin-left:-7px;bottom:.35rem;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:10px solid var(--red-fill)}

.flow-n{grid-column:1;width:2.1rem;height:2.1rem;border-radius:99px;
  display:grid;place-items:center;font-size:.72rem;letter-spacing:.02em;
  background:var(--surface);border:2px solid var(--red-fill);color:var(--red);
  box-shadow:0 0 0 5px var(--ink)}
.flow-n-alt{border-color:var(--green);color:var(--green-txt)}
.flow-body{grid-column:2;min-width:0;padding-top:.3rem}
.flow-k{margin:0 0 .3rem;color:var(--text-3);font-size:.6rem}
.flow-body>h4{margin:0 0 .12rem;font-family:var(--display);font-size:1.16rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.015em;color:var(--text)}
.flow-body>p{margin:0;color:var(--text-2);font-size:.92rem;line-height:1.5;text-wrap:pretty}

/* the pivot: the one moment mail actually goes out */
.flow-step-hub .flow-n{background:var(--red-fill);color:#fff;border-color:var(--red-fill)}
.flow-step-hub .flow-body{padding:.75rem 1.1rem;border-radius:12px;
  background:color-mix(in srgb,var(--red) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--red) 45%,var(--line))}
.flow-step-hub .flow-k{color:var(--red)}

/* the fan-out: parallel recipients sharing a single stage marker */
.flow-recs{margin-top:.45rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.7rem;align-items:stretch}
.flow-rec{background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:.8rem .9rem;border-top:2px solid var(--line-2)}
.flow-rec h4{margin:0 0 .25rem;font-size:.98rem;font-weight:650;
  letter-spacing:-.005em;color:var(--text)}
.flow-rec>p:not(.flow-role){margin:0;color:var(--text-2);font-size:.86rem;
  line-height:1.55;text-wrap:pretty}
.flow-rec-to{border-top-color:var(--red-fill);
  background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.flow-role{color:var(--text-3);margin:0 0 .4rem;font-size:.58rem}
.flow-rec-to .flow-role{color:var(--red)}

/* the exception: its own full-width strip, but tied to the TO card by a short
   connector dropping out of that card — never a fifth recipient, and never a
   failure of the whole send. Ordering keeps the strip directly below the TO
   card at every breakpoint, so the connector never spans another card. */
.flow-rec-to{position:relative}
.flow-rec-to::after{content:"";position:absolute;left:50%;margin-left:-1.5px;
  top:100%;height:.7rem;width:3px;background:var(--green)}
.flow-branch{grid-column:1/-1;margin:0;padding:.6rem .9rem;border-radius:8px;
  border-left:3px solid var(--green);
  background:color-mix(in srgb,var(--green) 11%,transparent);
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:baseline}
.flow-branch-k{margin:0;color:var(--green-txt);font-size:.56rem;white-space:nowrap}
.flow-branch h4{margin:0 0 .1rem;font-size:.88rem;font-weight:650;
  letter-spacing:-.005em;color:var(--green-txt)}
.flow-branch-b p{margin:0;color:var(--text-2);
  font-size:.82rem;line-height:1.45;text-wrap:pretty}
.flow-step-alone .flow-branch{margin:0}

@media (max-width:1080px){
  .flow-recs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-rec-to{grid-column:1/-1;order:-2}
  .flow-branch{order:-1}
}
@media (max-width:620px){
  .flow-step{grid-template-columns:1.85rem minmax(0,1fr);column-gap:.9rem;padding-bottom:1.3rem}
  .flow-recs{grid-template-columns:1fr}
  .flow-branch{grid-template-columns:minmax(0,1fr);row-gap:.25rem}
  .flow-step:not(:last-child)::before{left:.925rem;top:2.2rem}
  .flow-step:not(:last-child)::after{left:.925rem;margin-left:-6px;
    border-left-width:6px;border-right-width:6px;border-top-width:9px}
  .flow-n{width:1.85rem;height:1.85rem;font-size:.66rem;box-shadow:0 0 0 4px var(--ink)}
  .flow-body>h4{font-size:1.08rem}
  .flow-step-hub .flow-body{padding:.9rem 1rem}
}

/* one-shot draw-in each time the slide is shown; static state is complete
   without it, so reduced motion simply gets the finished diagram */
@media (prefers-reduced-motion:no-preference){
  .flow-step:not(:last-child)::before{animation:flow-draw .45s ease-out backwards}
  .flow-step:not(:last-child)::after,.flow-n{animation:flow-pop .3s ease-out backwards}
  .flow-step:nth-child(1) .flow-n{animation-delay:.05s}
  .flow-step:nth-child(1)::before{animation-delay:.12s}
  .flow-step:nth-child(1)::after,.flow-step:nth-child(2) .flow-n{animation-delay:.42s}
  .flow-step:nth-child(2)::before{animation-delay:.5s}
  .flow-step:nth-child(2)::after,.flow-step:nth-child(3) .flow-n{animation-delay:.8s}
  .flow-step:nth-child(3)::before{animation-delay:.88s}
  .flow-step:nth-child(3)::after,.flow-step:nth-child(4) .flow-n{animation-delay:1.18s}
  .flow-step:nth-child(4)::before{animation-delay:1.26s}
  .flow-step:nth-child(4)::after,.flow-step:nth-child(5) .flow-n{animation-delay:1.56s}
}
@keyframes flow-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes flow-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* email mock (inbox-style preview) */
.em{margin-top:1.6rem;max-width:640px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.em-tag{margin:0;padding:.7rem 1.15rem .15rem;color:var(--text-3);font-size:.58rem}
.em-chrome{padding:.55rem 1.15rem 1rem;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:.45rem;background:var(--surface-2)}
.em-row{display:grid;grid-template-columns:4.2rem 1fr;gap:.55rem;align-items:baseline}
.em-k{color:var(--text-3);font-size:.58rem;padding-top:.15rem}
.em-v{color:var(--text-2);font-size:.9rem;line-height:1.4;min-width:0;text-wrap:pretty}
.em-subject{color:var(--text);font-weight:650;font-size:.98rem}
.em-body{padding:1.2rem 1.15rem 1.35rem}
.em-badge{margin:0 0 .45rem;color:var(--red);font-size:.62rem}
.em-h{margin:0 0 1rem;font-family:var(--display);font-size:clamp(1.55rem,4.5vw,2.1rem);
  font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.05;color:var(--text)}
.em-p{margin:0 0 .85rem;color:var(--text-2);font-size:.95rem;line-height:1.58;text-wrap:pretty}
.em-p:last-of-type{margin-bottom:1.05rem}
.em-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:0 0 1.05rem}
.em-fact{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.em-fact-k{display:block;color:var(--text-3);margin:0 0 .25rem;font-size:.55rem}
.em-fact-v{display:block;color:var(--text);font-size:.92rem;font-weight:600;line-height:1.3}
.em-note{border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));
  background:color-mix(in srgb,var(--red) 12%,var(--surface));
  border-radius:12px;padding:1rem 1.05rem;margin:0 0 1rem}
.em-note-k{margin:0 0 .4rem;color:var(--red);font-size:.6rem}
.em-note-v{margin:0;color:var(--text);font-size:1.02rem;line-height:1.5;font-weight:550;text-wrap:pretty}
.em-footer{margin:0 0 .85rem;color:var(--text-2);font-size:.86rem;line-height:1.55;text-wrap:pretty}
.em-sent{margin:0;color:var(--text-3);font-size:.58rem;text-transform:none;letter-spacing:.02em}
@media (max-width:520px){
  .em-facts{grid-template-columns:1fr}
  .em-row{grid-template-columns:3.4rem 1fr}
}

/* recap */
.recap{margin-top:2.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1.1rem}
.rc{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:1.35rem 1.4rem}
.rc-k{color:var(--red);margin:0 0 .95rem;font-size:.63rem}
.rc ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.rc li{color:var(--text-2);font-size:.9rem;line-height:1.58;text-wrap:pretty}
.rc li::marker{color:var(--text-3);font-family:var(--mono);font-size:.8em}

/* deck controls */
.controls{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;
  align-items:center;justify-content:center;gap:.6rem;padding:.7rem 1rem;
  background:linear-gradient(to top,var(--ink) 62%,transparent);pointer-events:none}
.controls>*{pointer-events:auto}
.nav{width:2.5rem;height:2.5rem;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);font-size:1rem;cursor:pointer;
  display:grid;place-items:center;transition:background .18s,border-color .18s,transform .18s}
.nav:hover:not(:disabled){background:var(--red-fill);border-color:var(--red-fill);color:#fff;transform:translateY(-2px)}
.nav:disabled{opacity:.3;cursor:not-allowed}
.count{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:.5rem .95rem;font-variant-numeric:tabular-nums;min-width:6.2rem;text-align:center}

@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .shot{position:static}
  .seg-l{display:none}
}
/* On a phone the fixed bar sits over the tail of every long slide, and the
   88px of slide padding only clears it once you have scrolled all the way
   down. Swipe already advances slides at this width, so let the controls take
   their place in the flow instead of covering the content being read. */
@media (max-width:620px){
  .controls{position:static;background:none;padding:1.1rem 1rem 1.7rem;pointer-events:auto}
  .slide{padding-bottom:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .slide:not([hidden]){animation:none}
  *{transition-duration:.01ms !important}
}
@media print{
  .rail,.controls,.topbar{display:none}
  .slide{display:block !important;page-break-after:always;padding:1rem}
  .shot{position:static;box-shadow:none}
}

/* ============================================================
   EDITOR
   ============================================================ */
.ed{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0;
  min-height:calc(100vh - 3.2rem);align-items:start}
.ed-list{border-right:1px solid var(--line);padding:.9rem;position:sticky;top:3.2rem;
  max-height:calc(100vh - 3.2rem);overflow-y:auto;background:var(--ink)}
.ed-list-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}
.ed-list-h p{margin:0;color:var(--text-3)}
.slidelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sl-item{display:grid;grid-template-columns:1.5rem 1fr;gap:.55rem;align-items:center;
  padding:.5rem .55rem;border-radius:8px;border:1px solid transparent;cursor:pointer;
  background:var(--surface);transition:border-color .15s,background .15s}
.sl-item:hover{border-color:var(--line-2)}
.sl-item[aria-current="true"]{border-color:var(--red-fill);background:color-mix(in srgb,var(--red) 12%,var(--surface))}
.sl-n{font-family:var(--mono);font-size:.6rem;color:var(--text-3);text-align:right}
.sl-t{min-width:0;overflow:hidden}
.sl-title{font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sl-kind{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}

.ed-main{padding:1.3rem clamp(1rem,3vw,2rem) 4rem;min-width:0}
.ed-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line)}
.ed-bar h1{font-family:var(--display);font-size:1.5rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin:0;flex:1;min-width:0;color:var(--text)}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.05rem}
.field > label{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3)}
.field input[type=text],.field textarea,.field select{
  width:100%;padding:.6rem .75rem;border-radius:8px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--text);font-family:var(--body);font-size:.9rem;
  line-height:1.55;outline:none;transition:border-color .15s,box-shadow .15s}
.field input[type=text]:focus,.field textarea:focus,.field select:focus{
  border-color:var(--red);box-shadow:0 0 0 3px var(--glow)}
.field textarea{resize:vertical;min-height:4.2rem}
.field-hint{font-size:.76rem;color:var(--text-3);margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}

.rows{display:flex;flex-direction:column;gap:.7rem}
.row{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.85rem .9rem}
.row-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.row-n{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--red);flex:1}
.xbtn{width:1.6rem;height:1.6rem;border-radius:6px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text-2);cursor:pointer;font-size:.8rem;
  display:grid;place-items:center;transition:background .15s,color .15s,border-color .15s}
.xbtn:hover{background:var(--red-fill);border-color:var(--red-fill);color:#fff}
.xbtn:disabled{opacity:.3;cursor:not-allowed}
.addbtn{margin-top:.7rem;padding:.5rem .9rem;border-radius:8px;border:1px dashed var(--line-2);
  background:transparent;color:var(--text-2);font-size:.82rem;font-weight:600;cursor:pointer;
  transition:border-color .15s,color .15s}
.addbtn:hover{border-color:var(--red);color:var(--red)}

.ed-sec{margin:1.8rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.ed-sec > h3{font-family:var(--display);font-size:1.14rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 .9rem;color:var(--text)}

.thumb{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-2);
  max-width:340px;margin-bottom:.6rem}
.toast{position:fixed;bottom:1.1rem;left:50%;transform:translateX(-50%) translateY(140%);
  z-index:100;padding:.7rem 1.15rem;border-radius:10px;background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:.86rem;
  transition:transform .28s cubic-bezier(.22,.9,.3,1);max-width:min(92vw,32rem)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--green);color:var(--green-txt)}
.toast.bad{border-color:var(--red);color:var(--red)}

.sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(0,0,0,.6);padding:1.1rem;backdrop-filter:blur(4px)}
.sheet-in{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  padding:1.5rem;max-width:34rem;width:100%;box-shadow:var(--shadow);
  max-height:88vh;overflow-y:auto}
.sheet-in h2{font-family:var(--display);font-size:1.4rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 .5rem;color:var(--text)}
.sheet-in p{margin:0 0 1rem;color:var(--text-2);font-size:.88rem;line-height:1.6}
.sheet-in code{font-family:var(--mono);font-size:.82em;background:var(--surface-2);
  padding:.12em .4em;border-radius:5px;color:var(--text)}
.sheet-acts{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1.1rem}
.warn{padding:.7rem .9rem;border-radius:8px;border-left:2px solid var(--red);
  background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--text-2);
  font-size:.82rem;line-height:1.6;margin:0 0 1rem}
.jsonout{width:100%;min-height:9rem;font-family:var(--mono);font-size:.72rem;line-height:1.5;
  padding:.7rem;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--text);resize:vertical}

@media (max-width:820px){
  .ed{grid-template-columns:1fr}
  .ed-list{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
}

/* ============================================================
   PIN LOCK — editor gate
   ============================================================ */
.lock{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ink);padding:1.2rem}
.lock-in{width:100%;max-width:22rem;text-align:center}
.lock-icon{font-size:2.2rem;line-height:1;margin-bottom:.9rem}
.lock-in h1{font-family:var(--display);font-size:1.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 .45rem;color:var(--text)}
.lock-in p{margin:0 0 1.5rem;color:var(--text-2);font-size:.9rem;line-height:1.6}
.pin-row{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}
.pin-row input{width:3.1rem;height:3.6rem;text-align:center;font-family:var(--mono);
  font-size:1.5rem;font-weight:700;color:var(--text);background:var(--surface);
  border:1px solid var(--line-2);border-radius:10px;outline:none;
  transition:border-color .15s,box-shadow .15s}
.pin-row input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--glow)}
.lock.bad .pin-row{animation:shake .4s}
.lock.bad .pin-row input{border-color:var(--red)}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)}
  40%,80%{transform:translateX(7px)}
}
.lock-msg{min-height:1.3rem;font-size:.83rem;color:var(--red);margin:0 0 1.1rem}
.lock-back{color:var(--text-3);font-size:.83rem;text-decoration:none}
.lock-back:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){ .lock.bad .pin-row{animation:none} }