/* =========================================================
   ✦ Sparks — swipeable single-idea card decks.
   Sibling to Listen (audiobook.js) / Present (present.js).
   Self-injecting on any lesson with data-sparks + window.SPARK_DECK.
   All colors are tokens → dark + light + every palette work for free.
   ========================================================= */

/* ── hero button (matches .ab-hero-btn / .ep-hero-btn) ────── */
/* the ✦ "key" glows — a slow warm halo pulse on the button + a twinkling star, so the
   Sparks entry point catches the eye. Shared keyframes (see also css/feed.css). */
@keyframes spkGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,168,124,0)}50%{box-shadow:0 0 24px 2px rgba(232,168,124,.30),0 0 6px 0 rgba(176,122,255,.18)}}
@keyframes spkTwinkle{0%,100%{filter:drop-shadow(0 0 2px rgba(232,168,124,.45));transform:scale(1)}50%{filter:drop-shadow(0 0 7px rgba(232,168,124,.95));transform:scale(1.12)}}
.sp-hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  position:relative;padding:.72rem 1.3rem;margin-top:.55rem;
  font-family:var(--font-heading,'Outfit',system-ui,sans-serif);
  font-size:.95rem;font-weight:600;letter-spacing:.01em;
  color:var(--warm,#e8a87c);cursor:pointer;
  background:linear-gradient(135deg,rgba(232,168,124,0.14) 0%,rgba(176,122,255,0.14) 100%);
  border:1px solid color-mix(in srgb, var(--warm,#e8a87c) 38%, transparent);
  border-radius:13px;
  transition:transform .2s var(--ease-spring,cubic-bezier(.22,1,.36,1)),box-shadow .2s,background .2s;
  animation:spkGlow 2.8s ease-in-out infinite;
}
.sp-hero-btn:hover{
  background:linear-gradient(135deg,rgba(232,168,124,0.26) 0%,rgba(176,122,255,0.24) 100%);
  transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,168,124,0.22),0 0 22px 1px rgba(232,168,124,.3);
}
.sp-hero-btn svg{width:17px;height:17px;fill:var(--warm,#e8a87c);flex-shrink:0;
  transform-origin:center;animation:spkTwinkle 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .sp-hero-btn,.sp-hero-btn svg{animation:none}
  .sp-hero-btn svg{filter:drop-shadow(0 0 5px rgba(232,168,124,.6))}
}
.sp-hero-btn .sp-due{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.15rem;height:1.15rem;padding:0 .35rem;margin-left:.1rem;
  font-family:var(--font-mono,'Space Mono',monospace);font-size:.66rem;font-weight:700;
  color:var(--bg,#0b0d14);background:var(--teal,#5cc9b5);border-radius:99px;line-height:1;
}

/* ── overlay shell ────────────────────────────────────────── */
#emsp{position:fixed;inset:0;z-index:100000;display:flex;align-items:stretch;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
  font-family:var(--font-body,'Outfit',system-ui,sans-serif);}
#emsp.sp-open{opacity:1;pointer-events:auto}
#emsp.sp-hidden{display:none}
.sp-scrim{position:absolute;inset:0;background:color-mix(in srgb, var(--bg,#0b0d14) 90%, transparent);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);}
.sp-shell{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;
  height:100%;padding:max(14px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));
  overflow:hidden;will-change:transform;}

/* top bar: progress dots + close (side inset lives here, not on the shell, so the
   card track can span the full width and clip exactly at the screen edge — no peek) */
.sp-bar{display:flex;align-items:center;gap:14px;height:42px;flex:0 0 auto;padding:0 16px}
.sp-dots{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.sp-dots i{width:7px;height:7px;border-radius:99px;background:var(--border2,#2d3548);
  transition:width .3s var(--ease-spring,cubic-bezier(.22,1,.36,1)),background .3s;cursor:pointer}
.sp-dots i.on{width:22px;background:var(--warm,#e8a87c)}
.sp-dots i.seen{background:color-mix(in srgb, var(--warm,#e8a87c) 45%, var(--border2,#2d3548))}
.sp-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  color:var(--text3,#6b6560);background:transparent;border:none;border-radius:10px;cursor:pointer;transition:color .2s,background .2s}
.sp-close:hover{color:var(--text,#e2ddd5);background:color-mix(in srgb, var(--text,#e2ddd5) 8%, transparent)}
.sp-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

/* card track — NATIVE horizontal scroll-snap. iOS Safari handles the swipe itself
   (rock-solid), instead of a custom JS drag that fights the browser's gesture arbitration. */
.sp-track{display:flex;flex:1;min-height:0;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
.sp-track::-webkit-scrollbar{display:none}
.sp-card{flex:0 0 100%;min-width:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  padding:6px 16px;scroll-snap-align:center;scroll-snap-stop:always}
/* The card never scrolls (overflow:hidden); its content is vertically CENTERED so a compact
   diagram sits balanced rather than floating in a tall frame. The diagram gets a proportionate
   fixed height (below), not flex-fill — swipe is now native scroll-snap, so no inner-scroll
   avoidance is needed. */
.sp-card-inner{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:430px;
  height:100%;overflow:hidden;gap:12px;padding:4px 2px}
.sp-card-inner::-webkit-scrollbar{display:none}

.sp-kicker{font-family:var(--font-mono,'Space Mono',monospace);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal,#5cc9b5);font-weight:700}
.sp-idea{font-family:var(--font-display,'DM Serif Display',Georgia,serif);
  font-size:clamp(1.35rem,5.4vw,1.85rem);line-height:1.24;color:var(--text,#e2ddd5);
  font-weight:400;margin:0;letter-spacing:.005em;
  /* flex:none so the title keeps its full height (the flex column must not squish it);
     clamp to 4 lines only as a runaway guard. */
  flex:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* don't shrink/clip the takeaway or kicker either */
.sp-kicker,.sp-detail,.sp-card-foot{flex:none}
/* flex-shrink:0 is CRITICAL — .sp-card-inner is a flex column, and without it
   flexbox shrinks this wrapper when the card overflows, and overflow:hidden then
   CLIPS the diagram (the "animation is cut" bug). */
.sp-canvas-wrap{position:relative;flex:0 0 auto;height:min(340px,44vh);min-height:200px;
  border:1px solid color-mix(in srgb, var(--border,#232939) 80%, transparent);
  border-radius:16px;background:color-mix(in srgb, var(--bg,#0b0d14) 55%, #000 12%);
  padding:8px;overflow:hidden}
/* The Daily Delve diagrams paint their OWN dark panel (light text, like the site's code blocks
   which stay dark in both themes) → make the 8px frame dark too so it's seamless, never light-on-light. */
#emsp.sp-deck-delve .sp-canvas-wrap{background:#0e131c;border-color:rgba(255,255,255,0.08)}
.sp-canvas-wrap canvas{display:block;max-width:100%}
/* image visual (Daily Delve cards) — same frame as the canvas, an ink-wash scene inside */
.sp-img-wrap{flex:0 0 auto;height:min(340px,44vh);min-height:200px;border:1px solid color-mix(in srgb, var(--border,#232939) 80%, transparent);
  border-radius:16px;background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:color-mix(in srgb, var(--bg,#0b0d14) 55%, #000 12%);width:100%}
.sp-detail{font-size:.96rem;line-height:1.55;color:var(--text2,#a9a196);margin:0}
.sp-detail b,.sp-detail strong{color:var(--text,#e2ddd5);font-weight:600}

/* card footer: review chip / continue button */
.sp-card-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.sp-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;cursor:pointer;
  font-family:var(--font-mono,'Space Mono',monospace);font-size:.72rem;letter-spacing:.02em;
  color:var(--text2,#a9a196);background:transparent;
  border:1px solid var(--border2,#2d3548);border-radius:99px;transition:all .18s}
.sp-chip:hover{border-color:color-mix(in srgb, var(--teal,#5cc9b5) 55%, transparent);color:var(--text,#e2ddd5)}
.sp-chip.on{color:var(--teal,#5cc9b5);border-color:color-mix(in srgb, var(--teal,#5cc9b5) 55%, transparent);
  background:color-mix(in srgb, var(--teal,#5cc9b5) 12%, transparent)}
.sp-chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* generic card actions (Listen / Read → / source on Delve cards) */
.sp-act{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;cursor:pointer;text-decoration:none;
  font-family:var(--font-heading,'Outfit',sans-serif);font-size:.82rem;font-weight:600;
  color:var(--text2,#a9a196);background:transparent;border:1px solid var(--border2,#2d3548);border-radius:99px;transition:all .18s}
.sp-act:hover{border-color:var(--warm,#e8a87c);color:var(--warm,#e8a87c)}
.sp-act-primary{color:var(--bg,#0b0d14);background:var(--warm,#e8a87c);border-color:var(--warm,#e8a87c)}
.sp-act-primary:hover{color:var(--bg,#0b0d14);filter:brightness(1.06)}
.sp-continue{display:inline-flex;align-items:center;gap:.45rem;padding:.78rem 1.3rem;cursor:pointer;
  font-family:var(--font-heading,'Outfit',sans-serif);font-size:.95rem;font-weight:600;
  color:var(--bg,#0b0d14);background:var(--warm,#e8a87c);border:none;border-radius:12px;
  transition:transform .18s,box-shadow .18s}
.sp-continue:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,168,124,.22)}

/* footer hint */
.sp-foot{display:flex;align-items:center;justify-content:center;height:26px;flex:0 0 auto}
.sp-hint{font-family:var(--font-mono,'Space Mono',monospace);font-size:.72rem;letter-spacing:.04em;
  color:var(--text3,#6b6560)}

/* toast */
.sp-toast{position:absolute;left:50%;bottom:64px;transform:translateX(-50%) translateY(8px);
  padding:.6rem 1rem;font-size:.82rem;color:var(--text,#e2ddd5);
  background:var(--surface,#161a26);border:1px solid var(--border,#232939);border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.4);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.sp-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── review hub (account.html) — clean single-column flashcards ──────────── */
.sp-rev-list{display:flex;flex-direction:column;gap:12px;max-width:600px;margin:0 auto;grid-column:1 / -1}
.sp-rev{display:flex;flex-direction:column;gap:.75rem;
  background:var(--bg-card,var(--surface,#161a26));border:1px solid var(--border,#232939);
  border-radius:14px;padding:1.1rem 1.2rem}
.sp-rev-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sp-rev-kicker{font-family:var(--font-mono,'Space Mono',monospace);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal,#5cc9b5);font-weight:700}
.sp-rev-link{font-family:var(--font-mono,'Space Mono',monospace);font-size:.95rem;line-height:1;
  color:var(--text3,#6b6560);text-decoration:none;padding:.1rem .3rem}
.sp-rev-link:hover{color:var(--warm,#e8a87c)}
.sp-rev-q{font-size:1.02rem;line-height:1.45;color:var(--text,#e2ddd5);font-weight:600}
.sp-rev-a{font-size:.95rem;line-height:1.55;color:var(--text2,#a9a196);
  padding:.7rem .85rem;border-radius:10px;
  background:color-mix(in srgb, var(--teal,#5cc9b5) 7%, transparent);
  border-left:2px solid color-mix(in srgb, var(--teal,#5cc9b5) 50%, transparent)}
.sp-rev-flip{align-self:flex-start;padding:.5rem 1.05rem;font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--text,#e2ddd5);background:transparent;border:1px solid var(--border2,#2d3548);border-radius:9px;transition:all .18s}
.sp-rev-flip:hover{border-color:var(--warm,#e8a87c);color:var(--warm,#e8a87c)}
.sp-rev-grades{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.sp-rev-grades[hidden]{display:none}   /* display:grid above would otherwise defeat [hidden] */
.sp-rev-grades button{padding:.6rem;font-size:.84rem;font-weight:600;cursor:pointer;border-radius:9px;
  border:1px solid var(--border2,#2d3548);background:transparent;transition:all .18s}
.sp-rev-grades button[data-g="again"]{color:var(--red,#e86a6a)}
.sp-rev-grades button[data-g="good"]{color:var(--teal,#5cc9b5)}
.sp-rev-grades button[data-g="easy"]{color:var(--green,#5ce88e)}
.sp-rev-grades button:hover{border-color:currentColor;background:color-mix(in srgb, currentColor 14%, transparent)}

/* phone */
@media (max-width:480px){
  .sp-shell{max-width:none}
  .sp-card-inner{max-width:none}
}