/* Турбо-улитка — cards.css (FLASHCARDS screens only: #cards, #cards-<deck>[-add|-paste|-learn]) */

/* local colour roles (dark theme tuned below, same pattern as base.css) */
.cards-screen{--cl0:var(--surface);--cl3:var(--tint-sage);--cd-ok:var(--leaf-2);--ca-bg:var(--tint-clay);--ca-c1:var(--surface);--ca-c2:var(--tint-sun);--ca-c3:var(--tint-sky);--ca-stroke:var(--rim-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cards-screen{--cl0:var(--chip);--cl3:var(--seg-on);--cd-ok:var(--leaf);--ca-bg:var(--tint-sage);--ca-c1:var(--surface-2);--ca-c3:var(--tint-clay);--ca-stroke:var(--line-strong)}
}
:root[data-theme="dark"] .cards-screen{--cl0:var(--chip);--cl3:var(--seg-on);--cd-ok:var(--leaf);--ca-bg:var(--tint-sage);--ca-c1:var(--surface-2);--ca-c3:var(--tint-clay);--ca-stroke:var(--line-strong)}

/* shared bits */
.cards-screen h2{font-size:1.25rem}
.cards-kick .ico{color:var(--leaf-2)}
.cards-kick span{overflow-wrap:anywhere}
.cards-ex-tag{vertical-align:.18em;margin-left:.15rem;font-size:.875rem;white-space:nowrap}
h1 .cards-ex-tag{font-size:.9375rem;vertical-align:.4em}
.cards-err{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .85rem;border-radius:1rem;background:var(--tint-clay);color:var(--ink);font-weight:500}
.cards-err .ico{color:var(--clay-ink);width:1.25rem;height:1.25rem}
.cards-added{color:var(--ink);font-weight:500}
.cards-form{display:grid;gap:.85rem;min-width:0}
.cards-form .row{gap:.5rem}
.cr-q{font-weight:600;overflow-wrap:anywhere}
.cr-a{color:var(--ink-2);overflow-wrap:anywhere;white-space:pre-line}

/* illustration: a little stack of cards with a sprout (decks list, empty state) */
.cards-art-stage{border-radius:1.15rem;background:var(--ca-bg);overflow:hidden}
.cards-art{display:block;width:100%;height:auto}
.ca-sun{fill:var(--sun);opacity:.9}
.ca-hill{fill:var(--ground)}
.ca-c3{fill:var(--ca-c3);stroke:var(--ca-stroke);stroke-width:1.5}
.ca-c2{fill:var(--ca-c2);stroke:var(--ca-stroke);stroke-width:1.5}
.ca-c1{fill:var(--ca-c1);stroke:var(--ca-stroke);stroke-width:1.5}
.ca-ln{fill:none;stroke:var(--line-strong);stroke-width:5;stroke-linecap:round;opacity:.5}
.ca-dash{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 6;opacity:.65}
.ca-dot{fill:var(--leaf)}
.ca-tick{fill:none;stroke:var(--ca-c1);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ca-stem{fill:none;stroke:var(--stem);stroke-width:3;stroke-linecap:round}
.ca-leaf{fill:var(--leaf)} .ca-leaf2{fill:var(--leaf-2)}
.ca-ff{fill:var(--firefly);opacity:var(--ff-op)}

/* ===== decks list ===== */
.cards-today{gap:.7rem}
.cards-today .kicker{font-weight:650}
.cards-today h2{font-size:1.45rem;overflow-wrap:anywhere}
.cards-today-n{color:var(--ink-2)}
.cards-today-n b{color:var(--ink)}
.cards-today .btn-primary{margin-top:.25rem}
.cards-today.is-clear .kicker .ico,.cards-start.is-clear .kicker .ico{color:var(--leaf-2)}
.cards-today .muted b,.cards-start .muted b{color:var(--ink)}
.cards-decks-sec{display:grid;gap:.75rem}
.cards-decks{list-style:none;margin:0;padding:.375rem;display:grid;border-radius:1.5rem;background:var(--surface)}
.cards-decks > li{position:relative}
.cards-decks > li + li::before{content:"";position:absolute;left:4.6rem;right:.75rem;top:0;height:1px;background:var(--line)}
.cards-deck{display:flex;align-items:center;gap:.9rem;min-height:4.6rem;padding:.75rem;border-radius:1.15rem;color:var(--ink);text-decoration:none;transition:background-color .2s}
.cards-deck:hover{background:var(--surface-2)}
.cards-deck .tx{display:grid;gap:.15rem;min-width:0;flex:1}
.cards-deck .t{font-weight:650;font-size:1.0625rem;overflow-wrap:anywhere}
.cards-deck .s{color:var(--ink-2)}
.cards-deck .cm{display:inline-block}
.cards-deck .chev{margin-left:auto;color:var(--ink-2)}
/* the «bed»: how far the deck's cards have grown */
.cards-bed{display:flex;gap:2px;height:.45rem;margin-top:.4rem;max-width:15rem;border-radius:999px;overflow:hidden}
.cards-bed i{display:block;min-width:.35rem;flex-basis:0}
.cb-0{background:var(--rim)} .cb-1{background:var(--water-0)} .cb-2{background:var(--leaf)} .cb-3{background:var(--leaf-2)} .cb-4{background:var(--sun)}
.cards-new{display:grid;justify-items:start}
.cards-new .cards-form{width:100%;padding:1rem;border-radius:1.25rem;background:var(--surface)}
.cards-empty{gap:.85rem}
.cards-empty .cards-art-stage{width:100%;max-width:24rem}
.cards-empty .cards-new{width:100%}
.cards-empty .cards-new .cards-form{padding:0;background:none}

.cards-how{gap:.9rem}
.cards-steps{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.cards-steps li{display:flex;gap:.7rem;align-items:flex-start}
.cards-steps b{color:var(--ink)}
.cs-n{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-top:-.05rem;border-radius:50%;background:var(--chip);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:.9375rem}
.cards-why{justify-self:start;margin-left:-.5rem}

/* ===== one deck ===== */
.cards-start{gap:.7rem}
.cards-start .kicker{font-weight:650}
.cards-start .linkbtn{justify-self:start;margin-left:-.5rem}
.cards-add-btns{gap:.5rem}
.cards-list-sec{display:grid;gap:.75rem}
.cards-list-sec h2 .muted{font-weight:500;margin-left:.15rem}
.cards-list-sec > .linkbtn{justify-self:start}
.cards-list{list-style:none;margin:0;padding:.25rem;display:grid;border-radius:1.5rem;background:var(--surface)}
.cards-row{padding:.6rem .5rem .6rem .85rem;border-top:1px solid var(--line)}
.cards-row:first-child{border-top:0}
.cards-row-main{display:flex;align-items:center;gap:.5rem}
.cards-row-tx{flex:1;min-width:0;display:grid;gap:.1rem}
.cards-row-a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem}
.cards-st{font-size:.875rem;padding:0 .5rem}
.cards-row-acts{flex:none;display:flex;gap:.1rem}
.cards-row-acts .iconbtn{border-color:transparent;color:var(--ink-2)}
.cards-row-acts .iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.cards-row-acts .iconbtn .ico{width:1.3rem;height:1.3rem}
.cards-row .confirm{margin-top:.6rem}
.cards-row.is-edit{padding:.85rem}
.cards-st.is-new{border-color:var(--clay);color:var(--clay-ink)}
.cards-st.is-learned{border-color:var(--sel);background:var(--sel);color:var(--ink)}
.cards-ladder-card{gap:1rem}
.cards-ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;align-items:end}
.cards-ladder li{display:grid;gap:.4rem;justify-items:center;text-align:center;min-width:0}
.cl-col{display:flex;justify-content:center;align-items:flex-start;width:100%;height:calc(var(--h, .5) * 6.5rem);padding-top:.45rem;border-radius:.9rem .9rem .45rem .45rem;background:var(--cl0);color:var(--ink)}
.cl-n{font-family:var(--font-display);font-weight:900;font-size:1.35rem;line-height:1;font-variant-numeric:tabular-nums}
.cl-l{font-size:.8125rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink-2);overflow-wrap:normal;word-break:normal}
.cl-1 .cl-col{background:var(--tint-sun)} .cl-2 .cl-col{background:var(--tint-sky)} .cl-3 .cl-col{background:var(--cl3)}
.cl-4 .cl-col{background:var(--primary);color:var(--on-primary)}
.cards-manage{display:grid;gap:.35rem}
.cards-manage h2{font-family:var(--font-body);font-size:1rem;font-weight:650;letter-spacing:0}
.cards-manage .row{gap:.25rem 1rem;margin-left:-.5rem}

/* ===== add one / paste a list ===== */
.cards-addform{gap:1rem}
.cards-keys-hint b{color:var(--ink);font-weight:600}
.cards-recent{display:grid;gap:.4rem}
.cards-recent h2{font-size:1.1rem}
.cards-recent .row-between{align-items:baseline}
.cards-tips{gap:.8rem}
.cards-ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.cards-ticks li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.cards-ticks b{color:var(--ink)}
.cards-ticks .ico{flex:none;color:var(--leaf-2);width:1.3rem;height:1.3rem;margin-top:.1rem}
.cards-paste{gap:1.25rem}
.cards-seps{display:grid;gap:.4rem}
.cards-sep-row{display:flex;flex-wrap:wrap;gap:.4rem}
.cards-sep{min-width:2.1rem;text-align:center;color:var(--ink);font-weight:650}
.cards-ta{min-height:11.5rem;tab-size:4;line-height:1.5}
.cards-prev-sec{display:grid;gap:.6rem}
.cards-prev-sec h2{font-size:1.1rem}
.cards-sum{display:grid;gap:.2rem}
.cards-sum b{color:var(--ink)}
.cards-prev{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.cards-prev li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);column-gap:.5rem;align-items:start;padding:.55rem .8rem .55rem .6rem;border-radius:.95rem;background:var(--surface)}
.cards-prev li.cp-ok{grid-template-columns:1.75rem minmax(0,1fr) auto minmax(0,1fr)}
.cp-n{color:var(--ink-2);font-size:.875rem;font-variant-numeric:tabular-nums;text-align:right;padding-top:.15rem}
.cp-q{font-weight:600;overflow-wrap:anywhere}
.cp-a{overflow-wrap:anywhere}
.cp-arr{color:var(--ink-2);padding-top:.15rem}
.cp-arr .ico{width:1rem;height:1rem}
.cards-prev li.cp-bad{background:var(--tint-clay)}
.cards-prev li.cp-skip{background:var(--surface-2)}
.cp-body{display:grid;gap:.1rem;min-width:0}
.cp-line{overflow-wrap:anywhere;white-space:pre-wrap;font-weight:500}
.cp-why{display:flex;flex-wrap:wrap;align-items:center;gap:0 .45rem;color:var(--ink);font-size:.9375rem}
.cp-why .ico{width:1.1rem;height:1.1rem;color:var(--clay-ink)}
.cp-skip .cp-why{color:var(--ink-2)}
.cp-skip .cp-why .ico{color:var(--ink-2)}
.cp-why .linkbtn{min-height:2.75rem;padding:.3rem .4rem;margin-left:-.4rem;font-size:.9375rem}
.cards-prev-empty{padding:.85rem 1rem;border-radius:1rem;border:2px dashed var(--line-strong)}
.cards-ex{gap:.7rem}
.cards-pre{margin:0;padding:.8rem 1rem;border-radius:1rem;background:var(--surface);color:var(--ink);font:inherit;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}

/* ===== a round ===== */
.cards-stage{display:grid;gap:1.1rem;grid-template-areas:"meta" "face" "acts";min-width:0}
.cards-meta{grid-area:meta;display:grid;gap:.55rem;min-width:0}
.cards-meta .kicker{font-weight:600;min-width:0}
.cards-meta .kicker .cards-deckname{overflow-wrap:anywhere}
.cards-meta .tag{margin-left:.15rem}
.cards-of{color:var(--ink-2);font-variant-numeric:tabular-nums}
.cards-pile{grid-area:face;position:relative;isolation:isolate;padding-bottom:1.05rem;min-width:0}
/* two more cards peeking from under the top one: it's a deck */
.cards-pile::before,.cards-pile::after{content:"";position:absolute;z-index:-1;left:.9rem;right:.9rem;bottom:.5rem;height:3rem;border-radius:0 0 1.5rem 1.5rem;background:var(--band)}
.cards-pile::after{z-index:-2;left:1.9rem;right:1.9rem;bottom:0;background:var(--chip)}
.cards-face{position:relative;display:grid;align-content:start;gap:.9rem;min-height:13.5rem;padding:1.3rem 1.25rem 1.5rem;border-radius:1.75rem;background:var(--surface);box-shadow:var(--shadow)}
.cards-face-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem}
.cards-side{font-size:.9375rem;font-weight:600;color:var(--ink-2)}
.cards-again{display:inline-flex;align-items:center;gap:.3rem;border-color:var(--clay);color:var(--clay-ink);font-weight:600}
.cards-again .ico{width:1rem;height:1rem}
.cards-q{font-size:clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem);line-height:1.18;overflow-wrap:anywhere;white-space:pre-line}
.cards-hint{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-2);margin-top:auto;padding-top:.5rem}
.cards-hint .ico{flex:none;color:var(--clay-ink)}
.cards-ans{display:grid;gap:.35rem;padding-top:1rem;border-top:2px dashed var(--line-strong)}
.cards-ans:focus{outline:none}
.cards-a{font-family:var(--font-head);font-weight:700;font-size:clamp(1.35rem, 1.15rem + 1vw, 1.9rem);line-height:1.25;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line;letter-spacing:-.012em}
.cards-face.is-open .cards-ans{animation:cardsIn .35s ease-out}
@keyframes cardsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cards-acts{grid-area:acts;display:grid;gap:.75rem;align-content:start;min-width:0}
.cards-ask{font-weight:600}
.cards-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.cards-grade .btn{width:100%;padding-inline:.8rem;text-align:center}
.cards-kbd{display:none;place-items:center;min-width:1.7rem;height:1.6rem;padding:0 .4rem;margin-left:.15rem;border-radius:.45rem;border:1.5px solid currentColor;font-family:var(--font-body);font-size:.8125rem;font-weight:600;line-height:1}
.cards-keys{display:none}
.cards-keys b{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine) and (min-width:640px){ .cards-kbd{display:inline-grid} .cards-keys{display:flex} }
.cards-go{display:inline;text-align:center}
.cards-go-t{font-weight:500}
.btn-primary .cards-go-t{color:var(--on-primary-2)}
@media (max-width:359px){ .cards-grade{grid-template-columns:1fr} }
@media (max-width:419px){ html[data-big="true"] .cards-grade .ico{display:none} }

/* ===== round finished ===== */
.cards-result{display:grid;gap:1rem;padding:1.25rem 1.25rem 1.35rem;border-radius:1.75rem}
.cards-big{display:flex;align-items:baseline;gap:.15rem;font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:-.02em}
.cb-k{font-size:4.25rem;color:var(--ink)}
.cb-of{font-size:2rem;color:var(--ink-2)}
.cards-dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.cards-dots li{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:47% 53% 44% 56% / 56% 46% 54% 44%;animation:growIn .5s cubic-bezier(.2,.8,.2,1) backwards}
.cards-dots li.is-ok{background:var(--sel);color:var(--cd-ok)}
.cards-dots li.is-again{background:var(--tint-clay);color:var(--clay-ink)}
.cards-dots li .ico{width:1.3rem;height:1.3rem}
.cards-dots li:nth-child(2){animation-delay:.05s} .cards-dots li:nth-child(3){animation-delay:.1s} .cards-dots li:nth-child(4){animation-delay:.15s}
.cards-dots li:nth-child(5){animation-delay:.2s} .cards-dots li:nth-child(6){animation-delay:.25s} .cards-dots li:nth-child(7){animation-delay:.3s}
.cards-dots li:nth-child(8){animation-delay:.35s} .cards-dots li:nth-child(9){animation-delay:.4s} .cards-dots li:nth-child(n+10){animation-delay:.45s}
.cards-done .screen-head h1{max-width:20ch}
.cards-done .note b{color:var(--ink)}
.cards-done-acts{gap:.6rem}
.cards-missed{gap:.6rem}
.cards-missed h2{display:flex;align-items:center;gap:.5rem;font-size:1.2rem}
.cards-missed h2 .ico{color:var(--clay-ink)}
.cards-missed .list > li{padding:.6rem 0}

@media (max-width:639px){
  .cards-done-acts .btn,.cards-start .btn-primary{width:100%}
}
@media (min-width:640px){
  .cards-result{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1.75rem}
}
@media (min-width:960px){
  .cards-stage{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"face meta" "face acts";grid-template-rows:auto 1fr;column-gap:3.5rem;row-gap:1.25rem;align-items:start}
  .cards-face{min-height:22rem;padding:2rem 2.1rem 2.25rem}
  .cards-pile{padding-bottom:1.15rem}
  .cards-acts .btn-block{width:100%;min-width:0}
  .cards-meta{padding-top:.5rem}
  .cards-today .btn-block,.cards-start .btn-block{width:auto}
  .cards-decks-sec{gap:.9rem}
  .cards-how .cards-art-stage{margin-bottom:.15rem}
  .cards-ta{min-height:14rem}
}