/* ============================================================================
   storybook.css — shared design system for every agents-101 deck.
   nop-station theme: clean, modern, tech-forward enterprise palette.
   Sections:
     1. THEME TOKENS          — colors, typography, spacing
     2. SLIDE STACK           — layout & transitions
     3. TYPE                  — headings, kickers, captions
     4. COMIC COMPONENTS      — panels, bubbles, diagrams
     5. FRAGMENTS             — step reveals
     6. DIAGRAM PIECES        — loop, chip, mini-panel, map-row
     7. CHROME                — deck header / footer
     8. BILINGUAL             — EN/BN language toggle
   ========================================================================= */

/* ============ THEME TOKENS ============ */
:root {
  /* Brand palette */
  --amber:   #FBAF32;   /* primary CTA / accent */
  --blue:    #4992C1;   /* secondary blue */
  --navy:    #11172C;   /* headings, dark backgrounds */
  --sky:     #1A9ED7;   /* logo blue / links */
  --light:   #F5F8FB;   /* section backgrounds */
  --green:   #2EAF7D;   /* success / positive */
  --red:     #E0483A;   /* warning / emphasis */
  --purple:  #6C5CE7;   /* highlight */
  --ink:     #11172C;   /* default text */
  --paper:   #FFFFFF;   /* cards, panels */

  /* Typography scale */
  --title-size:  clamp(1.6rem, 5vw, 3.4rem);
  --h2-size:     clamp(1.3rem, 3.4vw, 2.4rem);
  --body-size:   clamp(.82rem, 1.55vw, 1.06rem);
  --small-size:  clamp(.66rem, 1.1vw, .88rem);

  /* Spacing */
  --slide-padding: clamp(1rem, 3.5vw, 3rem);
  --gap:           clamp(.6rem, 2vh, 1.4rem);

  /* Shadows (elevation system) */
  --shadow-sm:  0 4px 12px rgba(17,23,44,.10);
  --shadow-md:  0 8px 24px rgba(17,23,44,.13);
  --shadow-lg:  0 16px 40px rgba(17,23,44,.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Work Sans', 'Inter', sans-serif;
  color: var(--ink);
  background: var(--light);
  background-image:
    radial-gradient(circle, rgba(73,146,193,.08) 1px, transparent 1.4px);
  background-size: 28px 28px;
}

/* ============ SLIDE STACK ============ */
.slide {
  position: absolute; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden; opacity: 0; visibility: hidden;
  transform: scale(.97) translateY(8px);
  transition: opacity .32s ease, transform .32s ease, visibility .32s;
}
.slide.active { opacity: 1; visibility: visible; transform: none; }
.content {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--gap); padding: var(--slide-padding); text-align: center;
}

/* ============ TYPE ============ */
.kicker {
  font-family: 'Caveat', cursive; font-weight: 700;
  letter-spacing: .04em;
  background: var(--amber); color: var(--navy);
  padding: .2em 1em; border-radius: 999px;
  font-size: clamp(.9rem, 1.8vw, 1.2rem);
  box-shadow: var(--shadow-sm);
}
h1, h2 {
  font-family: 'Fraunces', serif; font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em;
  color: var(--navy);
}
h1 { font-size: var(--title-size); }
h2 { font-size: var(--h2-size); }

.c-amber  { color: var(--amber); }
.c-blue   { color: var(--blue); }
.c-sky    { color: var(--sky); }
.c-navy   { color: var(--navy); }
.c-green  { color: var(--green); }
.c-red    { color: var(--red); }
.c-purple { color: var(--purple); }

.caption {
  font-weight: 600; font-size: var(--body-size);
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 16px; box-shadow: var(--shadow-md);
  padding: .5em 1.1em; max-width: min(88vw, 860px); line-height: 1.45;
}
.caption.navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.caption.amber { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.small { font-size: var(--small-size); font-weight: 500; }

/* ============ COMIC COMPONENTS ============ */
.panel {
  position: relative; background: var(--paper);
  border: 2px solid var(--navy); border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: clamp(.7rem, 2.2vw, 1.5rem);
  display: flex; align-items: center; gap: clamp(.7rem, 2.2vw, 1.8rem);
  max-width: min(90vw, 780px); text-align: left;
}
.char { flex-shrink: 0; width: clamp(64px, 11vw, 120px); }
.slide.active .bob { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.bubble {
  position: relative; background: var(--paper);
  border: 2px solid var(--navy); border-radius: 16px;
  padding: clamp(.55em, 1.6vw, .95em) clamp(.8em, 2vw, 1.2em);
  font-weight: 600; font-size: clamp(.8rem, 1.6vw, 1.06rem); line-height: 1.4;
  text-align: left;
}
.bubble.tail-l::after {
  content: ''; position: absolute; left: -17px; bottom: 14px;
  width: 20px; height: 20px; background: var(--paper);
  border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: skewX(35deg) rotate(45deg);
}
.bubble.tail-r::after {
  content: ''; position: absolute; right: -17px; bottom: 14px;
  width: 20px; height: 20px; background: var(--paper);
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: skewX(-35deg) rotate(-45deg);
}
.bubble .who {
  display: block; font-family: 'Caveat', cursive;
  letter-spacing: .04em; font-size: .9em; margin-bottom: .12em;
}

.pow {
  position: absolute; font-family: 'Caveat', cursive;
  font-size: clamp(.9rem, 2.1vw, 1.5rem); letter-spacing: .04em;
  background: var(--amber); color: var(--navy);
  border: 2px solid var(--navy); border-radius: 12px;
  padding: .4em .8em; transform: rotate(8deg);
  clip-path: polygon(0 12%,12% 0,28% 10%,45% 0,60% 12%,78% 2%,92% 14%,100% 32%,90% 50%,100% 70%,86% 84%,70% 78%,52% 95%,36% 82%,18% 95%,8% 76%,0 60%,8% 40%);
  z-index: 3;
}
.tag {
  font-weight: 700; font-size: clamp(.7rem, 1.4vw, .96rem);
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 10px; box-shadow: var(--shadow-sm); padding: .3em .85em;
}
.row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: clamp(.5rem, 1.6vw, 1.2rem); max-width: 94vw;
}

/* ============ FRAGMENTS ============ */
.frag { opacity: 0; transform: translateY(14px); }
.frag.on { opacity: 1; transform: none; transition: all .42s cubic-bezier(.2, 1.4, .35, 1); }
.frag.slam { transform: scale(2.1) rotate(-4deg); }
.frag.slam.on { transform: scale(1) rotate(0deg); }
.frag.pop { transform: scale(0); }
.frag.pop.on { transform: scale(1); }
.slide.active .auto { animation: slamIn .48s cubic-bezier(.2, 2, .4, 1) both; }
@keyframes slamIn { from { transform: scale(1.8) rotate(-3deg); opacity: 0; } to { opacity: 1; } }

/* ============ DIAGRAM PIECES ============ */
.loop {
  display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1rem);
  flex-wrap: wrap; justify-content: center;
}
.loop .node {
  font-family: 'Caveat', cursive; font-size: clamp(.9rem, 2vw, 1.4rem);
  letter-spacing: .04em; background: var(--paper);
  border: 2px solid var(--navy); border-radius: 10px;
  box-shadow: var(--shadow-sm); padding: .4em .8em;
}
.loop .arr { font-family: 'Caveat', cursive; font-size: clamp(1.1rem, 2.4vw, 1.8rem); }
.slide.active .loop .node { animation: pulse 2.4s ease-in-out infinite; }
.slide.active .loop .node:nth-child(3) { animation-delay: .6s; }
.slide.active .loop .node:nth-child(5) { animation-delay: 1.2s; }
.slide.active .loop .node:nth-child(7) { animation-delay: 1.8s; }
@keyframes pulse {
  0%,100% { background: var(--paper); }
  12% { background: rgba(251,175,50,.28); transform: translateY(-4px); }
  24% { background: var(--paper); }
}

.chip {
  font-weight: 700; font-size: var(--small-size);
  border: 2px solid var(--navy); background: var(--paper);
  border-radius: 999px; padding: .28em .75em; box-shadow: var(--shadow-sm);
}

.mini-panel {
  position: relative; background: var(--paper);
  border: 2px solid var(--navy); border-radius: 20px;
  box-shadow: var(--shadow-md); padding: clamp(.6rem, 1.6vw, 1rem);
  width: clamp(180px, 27vw, 300px);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.mini-panel .char { width: clamp(54px, 8vw, 92px); }
.mini-panel .bubble { font-size: clamp(.68rem, 1.3vw, .92rem); }
.strip {
  font-family: 'Caveat', cursive; letter-spacing: .05em;
  background: var(--navy); color: #fff; padding: .2em .8em;
  border-radius: 8px; font-size: clamp(.7rem, 1.4vw, .98rem);
  width: 100%; text-align: center;
}

.map-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: clamp(.3rem, 1.2vw, .9rem);
  width: min(92vw, 880px); text-align: center;
}
.map-row .cell {
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: .45em .6em; font-weight: 600;
  font-size: clamp(.68rem, 1.45vw, .98rem);
}
.map-row .name {
  font-family: 'Caveat', cursive; font-size: clamp(.95rem, 2.1vw, 1.5rem);
  letter-spacing: .04em; color: #fff; border-radius: 8px;
}
.map-row .arr2 { font-family: 'Caveat', cursive; font-size: clamp(1rem, 2.2vw, 1.6rem); }

/* ============ PROGRESS / COUNTER ============ */
.progress {
  position: fixed; left: 0; bottom: 0; height: 5px;
  background: var(--amber); width: 0; z-index: 20;
  transition: width .3s ease;
}
.counter {
  position: fixed; right: 12px; bottom: 12px; z-index: 20;
  font-family: 'Caveat', cursive; font-size: clamp(.8rem, 1.6vw, 1.1rem);
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 12px; padding: .15em .65em; box-shadow: var(--shadow-sm);
}
.hint {
  position: fixed; left: 12px; bottom: 12px; z-index: 20;
  font-size: var(--small-size); font-weight: 700;
  background: var(--paper); border: 2px solid var(--navy);
  border-radius: 10px; padding: .25em .7em; box-shadow: var(--shadow-sm);
}

/* ============ ACT / SEASON CARDS ============ */
.act-card .content { justify-content: center; align-items: center; text-align: center; }
.act-title { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(.4rem, 1.2vh, .9rem); }
.act-num {
  font-family: 'Caveat', cursive; font-size: clamp(1rem, 2.4vw, 1.6rem);
  letter-spacing: .18em; color: rgba(255,255,255,.65); font-weight: 700;
}
.act-name {
  font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 10vw, 7rem);
  color: #fff; text-shadow: 4px 4px 0 rgba(17,23,44,.22);
  letter-spacing: -.02em; line-height: .92; font-weight: 700;
}
.act-sub {
  font-family: 'Work Sans', sans-serif; font-size: clamp(.9rem, 1.9vw, 1.2rem);
  color: rgba(255,255,255,.88); font-weight: 600; margin-top: .4rem;
  max-width: min(80vw, 560px);
}
.slide.act-card { background: var(--navy); }
.slide.act-card.active { transform: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.6,.35,1), visibility .3s; }

/* ============ DECISION / PEAK ============ */
.bigq {
  font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 6vw, 4.4rem);
  letter-spacing: -.01em; color: var(--navy); font-weight: 700;
}

/* ============ CHAR SUMMARY ============ */
.char-summary {
  font-family: 'Work Sans', sans-serif; font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.5rem); letter-spacing: .01em;
  background: var(--sky); color: #fff; border: 2px solid var(--navy);
  border-radius: 16px; box-shadow: var(--shadow-md);
  padding: .4em 1.2em; max-width: min(80vw, 660px); line-height: 1.35;
}

/* ============ DECK CHROME (header / footer via deck.js) ============ */
.deck-header, .deck-footer {
  position: fixed; left: 0; right: 0; display: flex; align-items: center;
  gap: .7rem; padding: .38rem clamp(.7rem, 2vw, 1.3rem);
  background: rgba(245,248,251,.94); backdrop-filter: blur(6px);
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(.95rem, 1.9vw, 1.25rem); color: var(--ink);
  border-color: var(--navy);
}
.deck-header { top: 0; min-height: 46px; border-bottom: 2px solid var(--navy); z-index: 30; }
.deck-footer { bottom: 0; min-height: 44px; border-top: 2px solid var(--navy); z-index: 16; }

.deck-header .home {
  text-decoration: none; color: var(--ink); background: var(--paper);
  border: 2px solid var(--navy); border-radius: 999px; padding: .04em .8em;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease;
}
.deck-header .home:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }
.deck-header .home:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.deck-ep { margin-left: auto; opacity: .82; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.deck-footer .brand { opacity: .82; letter-spacing: .02em; }

.deck-header .byline { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; gap: .45em; align-items: center; opacity: .9; white-space: nowrap; }
.deck-header .byline a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid transparent; }
.deck-header .byline a:hover { border-bottom-color: var(--ink); }

.deck-header .cta-group { display: inline-flex; align-items: center; gap: .45em; }
.deck-header .cta-group .cta {
  color: var(--ink); font-weight: 700; text-decoration: none;
  border: 2px solid var(--navy); border-radius: 999px;
  padding: .02em .65em; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.deck-header .cta-group .cta.cta-star { background: var(--amber); }
.deck-header .cta-group .cta.cta-feedback { background: var(--paper); }
.deck-header .cta-group .cta:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }

.content {
  padding-top:    calc(var(--slide-padding) + 2.8rem);
  padding-bottom: calc(var(--slide-padding) + 2.8rem);
}

/* ============ RESPONSIVE ============ */
@media (max-height: 480px) {
  :root { --gap: clamp(.3rem,1vh,.6rem); }
  h2 { font-size: clamp(1rem,4.2vw,1.6rem); }
  .kicker { display: none; }
  .panel .char, .mini-panel .char { display: none; }
  .char { width: clamp(38px,9vh,64px); }
  .bubble { font-size: clamp(.62rem,1.8vh,.8rem); }
  .caption { font-size: clamp(.6rem,2vh,.8rem); }
  .mini-panel { width: clamp(150px,30vw,210px); }
  .mini-panel .small { display: none; }
  .strip { font-size: .72rem; padding: .12em .5em; }
  .row { gap: .4rem; }
}
.slide.compact .content { gap: clamp(.4rem,1.2vh,.9rem); }
.slide.compact .char { width: clamp(48px,8vw,90px); }
.slide.compact h2 { font-size: clamp(1.1rem,3vw,2.1rem); }

@media (max-height: 620px) { .hint, .counter { display: none; } }
@media (max-width: 700px) { .deck-header .byline { display: none; } }
@media (max-width: 640px) {
  .panel { flex-direction: column; text-align: center; }
  .bubble.tail-l::after, .bubble.tail-r::after { display: none; }
  .mini-panel .char { display: none; }
  .mini-panel { width: min(84vw,300px); }
  .row { gap: .45rem; }
  h2 { font-size: clamp(1.1rem,5.4vw,1.6rem); }
  .map-row { grid-template-columns: 1fr auto 1fr; }
}
@media (max-width: 480px) { .deck-ep { display: none; } .deck-header .cta-group { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
}

/* ============ BILINGUAL (EN / BN toggle) ============ */
.bn { display: none; }
body.lang-bn .en { display: none !important; }
body.lang-bn .bn { display: inline; }
body.lang-bn .bn.b { display: block; }

.lang-toggle {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(.85rem, 1.7vw, 1.05rem);
  cursor: pointer;
  border: 2px solid var(--navy); border-radius: 999px;
  padding: .06em .85em;
  background: var(--light); color: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap; flex-shrink: 0; line-height: 1.4;
}
.lang-toggle:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }