/* Python Study Cards — "editor window" design: card screen + shared tokens */
:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #1c2230;
  --line: #2d333b;
  --text: #e6edf3;
  --muted: #8b949e;
  --blue: #58a6ff;
  --gold: #e3b341;
  --green: #3fb950;
  --red: #f85149;
  --violet: #d2a8ff;
  --cyan: #79c0ff;
  --orange: #ffa657;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  /* kept for older class names */
  --card: var(--panel);
  --card-edge: var(--line);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background-color: var(--bg);
  /* faint dot grid, like an editor canvas */
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------- top bar (card screen) ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 8px;
  background: linear-gradient(var(--bg) 78%, transparent);
}
.top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; gap: 8px; }
.deck-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.deck { font: 700 13px var(--mono); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counter { white-space: nowrap; flex-shrink: 0; font: 600 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.counter b { color: var(--green); font-weight: 700; }
.counter u { color: var(--gold); text-decoration: none; }
.back {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  color: var(--text); text-decoration: none; background: var(--panel); border: 1px solid var(--line);
}
.back svg { width: 20px; height: 20px; color: var(--gold); }
.back:active { transform: scale(.94); }

/* segmented progress bar */
.bar, .seg {
  --on: var(--green);
  height: 5px; border-radius: 2px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 9px);
}
.bar-fill, .seg > i {
  display: block; height: 100%; width: 0%; transition: width .3s ease;
  background: var(--on);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
          mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
}

/* ---------- vertical snap feed ---------- */
.feed {
  height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
}
.feed::-webkit-scrollbar { display: none; }
.slide {
  height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 60px) 12px calc(env(safe-area-inset-bottom) + 22px);
}
.foot {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 5px);
  z-index: 10; text-align: center; pointer-events: none;
  font: 500 9px var(--mono); letter-spacing: .04em; color: var(--muted); opacity: .55;
}

/* ---------- the card = an editor window ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 540px; height: 100%; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform; scrollbar-width: none;
}
.card::-webkit-scrollbar { display: none; }
.card > * { flex-shrink: 0; }
.card.dragging { transition: none; }
.card.right { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 46px rgba(63,185,80,.3); }
.card.left  { border-color: var(--red);   box-shadow: 0 0 0 1px var(--red),   0 0 46px rgba(248,81,73,.3); }
.card.done  { opacity: .6; }
.card.starred { border-color: var(--gold); }

/* title bar of the window */
.win {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: #1b2130; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0;
}
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.file { flex: 1; min-width: 0; font: 600 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file::before { content: "◆ "; color: var(--blue); }
.win-right { display: flex; align-items: center; gap: 10px; flex: none; }
.views { font: 700 11px var(--mono); color: var(--muted); }
.views.hide { display: none; }
.views i { font-style: normal; color: var(--text); }
.star-badge { font-size: 18px; color: var(--gold); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s; text-shadow: 0 0 12px rgba(227,179,65,.7); }
.card.starred .star-badge { opacity: 1; transform: scale(1); }

.body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.kicker { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.term { font: 700 27px/1.15 var(--mono); letter-spacing: -.02em; margin-bottom: 18px; color: var(--text); }
.term::before { content: "> "; color: var(--gold); font-weight: 700; }
.term code.ic { font-size: .8em; }

/* answer = numbered "lines" */
.answer { list-style: none; counter-reset: ln; }
.answer li {
  counter-increment: ln; position: relative; padding: 2px 0 2px 38px; margin-bottom: 8px;
  font-size: 17px; line-height: 1.5; color: #d5dde6;
}
.answer li::before {
  content: counter(ln); position: absolute; left: 0; top: 3px; width: 24px; text-align: right;
  font: 500 12px/1.9 var(--mono); color: #4d5663;
}
.answer li::after { content: ""; position: absolute; left: 31px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
strong { color: var(--gold); font-weight: 700; }
code.ic { font: 600 .86em var(--mono); background: rgba(88,166,255,.14); color: var(--cyan); padding: 1px 6px; border-radius: 5px; }

/* section labels look like comments */
.label { font: 700 12px var(--mono); letter-spacing: .02em; margin: 20px 0 8px; color: var(--muted); text-transform: lowercase; }
.label::before { content: "# "; color: #4d5663; }
.label.code-l { color: var(--blue); }
.label.eg { color: var(--green); }
.label.trap { color: var(--red); }

/* code block with line numbers */
.code {
  margin: 2px 0 4px; padding: 12px 0; border-radius: 10px; overflow-x: auto;
  background: #0a0d13; border: 1px solid var(--line); border-left: 3px solid var(--blue);
  font: 500 13px/1.6 var(--mono); color: #e6edf3; white-space: pre; user-select: text; -webkit-user-select: text;
  counter-reset: cl; scrollbar-width: thin;
}
.code code { display: block; min-width: max-content; }
.code .ln { display: block; padding: 0 14px 0 8px; counter-increment: cl; }
.code .ln::before { content: counter(cl); display: inline-block; width: 22px; margin-right: 12px; text-align: right; color: #4d5663; }
.code .k { color: #ff7b72; } .code .s { color: #a5d6ff; } .code .n { color: #79c0ff; }
.code .c { color: #8b949e; font-style: italic; } .code .f { color: #d2a8ff; } .code .b { color: #ffa657; }

/* practice list */
.example { list-style: none; }
.example li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 16px; line-height: 1.5; color: #c9d1d9; }
.example li::before { content: "›"; position: absolute; left: 3px; color: var(--green); font: 700 18px/1.25 var(--mono); }
.example strong { color: var(--green); }

.trap-box {
  font-size: 15px; line-height: 1.5; color: #ffd8d4; background: rgba(248,81,73,.09);
  border: 1px solid rgba(248,81,73,.35); border-left: 3px solid var(--red); border-radius: 8px; padding: 10px 14px;
}
.trap-box strong { color: #ff9b95; }

/* swipe stamps = process exit codes */
.stamp {
  position: absolute; top: 56px; right: 16px; z-index: 4;
  font: 800 13px var(--mono); letter-spacing: .02em; padding: 5px 10px; border-radius: 6px; border: 1.5px solid;
  background: #0d1117; opacity: 0; transform: rotate(5deg); transition: opacity .15s;
}
.stamp.know { color: var(--green); border-color: var(--green); left: 16px; right: auto; transform: rotate(-5deg); }
.stamp.again { color: var(--red); border-color: var(--red); transform: rotate(5deg); }
.card.right .stamp.know, .card.left .stamp.again { opacity: 1; }
.card.done.is-known .stamp.know, .card.done.is-review .stamp.again { opacity: 1; }

/* gesture hints as a key legend */
.hints { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 22px; font: 600 11px var(--mono); color: var(--muted); }
.hints span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #11161d; }
.hints .l { color: var(--red); }
.hints .r { color: var(--green); }

/* star pop */
.star-pop {
  position: absolute; top: 50%; left: 50%; z-index: 6; font-size: 96px; line-height: 1; color: var(--gold); pointer-events: none;
  text-shadow: 0 0 40px rgba(227,179,65,.8); transform: translate(-50%, -50%) scale(.4); opacity: 0; animation: starpop .6s ease-out;
}
.star-pop.off { color: var(--muted); text-shadow: none; }
@keyframes starpop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-20deg); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(8deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1) rotate(0); }
}

/* ---------- end of deck ---------- */
.end { text-align: left; justify-content: center; padding: 26px 22px; }
.end .term { font-size: 22px; }
.end .term::before { content: "$ "; }
.end .term small { display: block; font: 500 13px var(--mono); color: var(--muted); margin-top: 8px; letter-spacing: 0; }
.stats { display: flex; gap: 10px; margin: 18px 0; }
.stat { flex: 1; border-radius: 10px; padding: 14px 10px; background: #0a0d13; border: 1px solid var(--line); text-align: center; }
.stat b { display: block; font: 800 30px var(--mono); }
.stat.k b { color: var(--green); }
.stat.r b { color: var(--red); }
.stat span { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.btn {
  display: block; width: 100%; margin-top: 10px; padding: 14px; font: 700 14px var(--mono); border: 0; border-radius: 10px; cursor: pointer;
  background: var(--gold); color: #0d1117; box-shadow: 0 4px 0 #a8801f;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8801f; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn[disabled] { opacity: .35; box-shadow: none; }

.msg { text-align: center; color: var(--muted); padding: 40vh 24px 0; font: 500 14px var(--mono); }
@media (min-width: 700px) { .term { font-size: 30px; } }

/* ---------- speaker icon: tap to start / stop the lesson ---------- */
.no-speech .spk { display: none; }
.term.has-audio::before { content: none; }
.spk {
  display: inline-grid; place-items: center; width: 38px; height: 38px; margin: 0 10px 2px 0; vertical-align: middle;
  border-radius: 11px; cursor: pointer; color: var(--gold);
  background: rgba(227,179,65,.12); border: 1px solid rgba(227,179,65,.5);
  transition: background .15s, color .15s, transform .1s;
}
.spk:active { transform: scale(.92); }
.spk svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spk .cone { stroke-width: 1; }
.spk .w1, .spk .w2 { fill: none; }
.spk:not(.playing) .w1, .spk:not(.playing) .w2 { opacity: .35; }
.spk.playing { background: var(--gold); color: #0d1117; border-color: var(--gold); box-shadow: 0 0 18px rgba(227,179,65,.45); }
.spk.playing .w1 { animation: wave 1s ease-in-out infinite; }
.spk.playing .w2 { animation: wave 1s ease-in-out infinite .25s; }
@keyframes wave { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spk.playing .w1, .spk.playing .w2 { animation: none; } }