/* Study view (#/study/:id/:mode): one card in the lamp's stepped pool, the shell
   dimmed around it, Noggin on the desk's edge. Scoped to .v-study; DESIGN.md tokens. */

.v-study {
  --pip-off: #DCD5C8;      /* an unlit pip on paper (DESIGN: the desk card's pips) */
  --plate-hover: #D6CFC1;  /* chalk-line one step toward chalk-dim: hover on paper choices */
  --miss-paper: #EBD9CF;   /* chalk mixed 12% toward error-on-chalk: the muted wrong pick */
  --right-paper: #D5E3DB;  /* chalk mixed 16% toward teal: a right typed answer's field */
  --desk-shadow: #262046;  /* the strip under a card resting on the desk (DESIGN) */
  --card-w: 640px;
  max-width: 1180px; margin: 0 auto; padding: 20px var(--gutter) 32px;
}

/* ---------- The strip: end, deck, progress ---------- */

.v-study .st-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "end title prog";
  align-items: center; gap: 12px 28px; min-height: 48px;
}
.v-study .st-end { grid-area: end; }
.v-study .st-title { grid-area: title; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
/* The deck name is the user's own text, so it reads in Figtree; Pixelify's digits and C
   blur at this size ("Cells" reads "0ells", 5 reads S). Figures below use Figtree for the same reason. */
.v-study .st-title h1 { font: 700 19px/1.2 var(--text); letter-spacing: -0.005em; color: var(--chalk-dim); overflow-wrap: anywhere; }
.v-study .st-mode { font: 600 14px/1.2 var(--text); color: var(--chalk-faint); white-space: nowrap; }
.v-study .st-prog { grid-area: prog; display: grid; justify-items: end; gap: 7px; }
.v-study .st-prog:empty { display: none; }
.v-study .st-count { display: flex; align-items: baseline; gap: 10px; font: 600 14px/1 var(--text); color: var(--chalk-dim); white-space: nowrap; }
.v-study .st-sxp { font: 700 14px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--amber); }
.v-study .st-prog .segbar { gap: 3px; }
.v-study .st-prog .segbar i { width: 12px; height: 8px; background: var(--wood); }
.v-study .st-prog .segbar i.on { background: var(--amber-dark); }

/* ---------- The lamp stage: pool, lamp, card, desk edge ---------- */

.v-study .st-stage {
  display: grid; justify-items: center;
  margin: 12px calc(-1 * var(--gutter)) 0; padding: calc(7 * var(--a)) var(--gutter) 0;
  overflow: hidden;
}
.v-study .st-stage.is-wide { --card-w: 780px; }
/* above the desk band, so a card resting on the desk keeps its under-lip in view */
.v-study .st-cardwrap { position: relative; z-index: 1; width: min(100%, var(--card-w)); }

/* the lamp stands at the card's upper left; its shade hangs just over the corner */
.v-study .st-lamp { position: absolute; z-index: 0; --s: 1; left: calc(-8 * var(--a)); top: calc(-6 * var(--a)); }
.v-study .st-turn { position: relative; z-index: 1; }
.v-study .st-card { --pad-x: 32px; --pad-y: 28px; display: flex; flex-direction: column; min-height: 340px; padding: var(--pad-y) var(--pad-x); }
.v-study .st-shadow { display: block; height: var(--a); margin: 0 var(--a); background: var(--desk-shadow); }

/* the card turns in three held widths, like a sprite */
@keyframes st-turn {
  0% { transform: scaleX(1); }
  34% { transform: scaleX(0.55); }
  67% { transform: scaleX(0.12); }
  100% { transform: scaleX(1); }
}
.v-study .st-turn.is-turning { animation: st-turn 270ms steps(1, end); }

/* Noggin stands on the desk's edge, feet on its surface, with its line beside it.
   Its spot is bottom-anchored, so a held (larger) spot keeps the feet on the desk. */
.v-study .st-buddy {
  --s: 0.6;
  position: relative; z-index: 1; width: min(100%, var(--card-w));
  display: flex; align-items: center; gap: 22px;
  margin: calc(3 * var(--a)) 0 calc(-2 * var(--a));
}
.v-study .st-spot { flex: none; display: grid; place-items: end center; margin-left: calc(-8 * var(--a)); }
.v-study .st-spot.is-held { width: calc(var(--sw) * var(--s) * var(--a)); height: calc(var(--sh) * var(--s) * var(--a)); }
.v-study .st-say { display: grid; gap: 8px; min-width: 0; padding-bottom: calc(2 * var(--a)); }
.v-study .st-xp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 600 14px/1.2 var(--text); color: var(--chalk-faint); }
.v-study .st-xp:empty { display: none; }
.v-study .st-xp b { font: 700 19px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--amber); }
.v-study .st-xp.is-miss b { color: var(--chalk-dim); }
.v-study .st-band { position: relative; z-index: 0; width: min(100%, calc(var(--card-w) + 24 * var(--a))); }

/* ---------- Card faces ---------- */

.v-study .st-face { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.v-study .st-main { flex: 1; display: grid; align-content: center; gap: 12px; }
.v-study .st-card :focus-visible { outline-color: var(--amber-deep); }
.v-study .st-card [tabindex="-1"]:focus { outline: none; }

.v-study .st-term { font: 700 40px/1.08 var(--text); letter-spacing: -0.01em; color: var(--on-chalk); overflow-wrap: anywhere; }
.v-study .st-term[data-len="1"] { font-size: 32px; }
.v-study .st-term[data-len="2"] { font-size: 26px; line-height: 1.15; }
.v-study .st-term[data-len="3"] { font-size: 21px; line-height: 1.25; }
.v-study .st-term-sm { font: 600 15px/1.3 var(--text); color: var(--on-chalk-soft); overflow-wrap: anywhere; }
.v-study .st-def { max-width: 40ch; font: 500 23px/1.4 var(--text); color: var(--on-chalk); overflow-wrap: anywhere; }
.v-study .st-def[data-len="1"] { font-size: 19px; max-width: 48ch; }
.v-study .st-def[data-len="2"] { font-size: 17px; line-height: 1.45; max-width: none; }
.v-study .st-def[data-len="3"] { font-size: 16px; line-height: 1.45; max-width: none; }

.v-study .st-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.v-study .st-actions.is-start { justify-content: flex-start; }
.v-study .st-card .btn-lg { min-width: 150px; }

/* shortcut hints: a small ink chip inside the button */
.v-study .st-key {
  display: inline-block; min-width: 20px; margin-left: 4px; padding: 3px 5px 4px; text-align: center;
  font: 600 11px/1 var(--text); color: var(--chalk-faint); background: var(--ink);
}
.v-study .btn-amber .st-key { background: var(--amber-dark); color: var(--ink); }
@media (hover: none) and (pointer: coarse) { .v-study .st-key { display: none; } }

/* ---------- Multiple choice ---------- */

.v-study .st-q { font: 700 30px/1.1 var(--text); letter-spacing: -0.01em; color: var(--on-chalk); overflow-wrap: anywhere; }
.v-study .st-q[data-len="1"] { font-size: 26px; }
.v-study .st-q[data-len="2"] { font-size: 22px; line-height: 1.2; }
.v-study .st-q[data-len="3"] { font-size: 19px; line-height: 1.25; }
.v-study .st-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v-study .st-opt {
  position: relative; isolation: isolate; width: 100%; min-height: 52px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border: 0; background: none; text-align: left;
  font: 500 16px/1.35 var(--text); color: var(--on-chalk);
  --plate: var(--chalk-line); --c: 4px;
}
.v-study .st-opt::before, .v-study .st-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--plate); clip-path: var(--cut);
}
.v-study .st-opt:hover { --plate: var(--plate-hover); }
.v-study .st-n { display: grid; place-items: center; width: 28px; height: 28px; background: var(--wall); color: var(--chalk); font: 700 14px/1 var(--text); }
.v-study .st-opt-text { overflow-wrap: anywhere; }
.v-study .st-opt-text[data-len="2"], .v-study .st-opt-text[data-len="3"] { font-size: 15px; }
.v-study .st-verdict { font: 700 13px/1 var(--text); white-space: nowrap; }
.v-study .st-verdict:empty { display: none; }
.v-study .st-opts.is-answered .st-opt { cursor: default; --plate: var(--chalk-line); color: var(--on-chalk-soft); }
.v-study .st-opts.is-answered .st-n { background: var(--chalk-faint); color: var(--on-chalk); }
.v-study .st-opts.is-answered .st-opt.is-right { --plate: var(--teal); color: var(--ink); }
.v-study .st-opts.is-answered .st-opt.is-right .st-n { background: var(--teal-deep); color: var(--chalk); }
.v-study .st-opts.is-answered .st-opt.is-wrong { --plate: var(--miss-paper); color: var(--on-chalk); }
.v-study .st-opts.is-answered .st-opt.is-wrong .st-n { background: var(--error-on-chalk); color: var(--chalk); }
.v-study .st-opt.is-wrong .st-verdict { color: var(--error-on-chalk); }

.v-study .st-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.v-study .st-after.is-pending { visibility: hidden; }
/* the button keeps its place on the right even when a long answer pushes it to its own line */
.v-study .st-after > .btn { margin-left: auto; }
.v-study .st-fb { font: 600 16px/1.4 var(--text); color: var(--on-chalk); overflow-wrap: anywhere; }
.v-study .st-fb b { font-weight: 700; }
.v-study .st-fb-xp { display: inline-block; margin-left: 8px; padding: 3px 6px 4px; font: 700 13px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--amber); white-space: nowrap; }
.v-study .st-fb-xp.is-miss { color: var(--on-chalk-soft); background: var(--chalk-line); }

/* ---------- Typed answers ---------- */

.v-study .st-typed { display: grid; gap: 18px; }
.v-study .st-typed .field > label { font: 600 14px/1.2 var(--text); color: var(--on-chalk); }
.v-study .st-typed .input { min-height: 52px; font: 600 20px/1.3 var(--text); }
.v-study .st-typed .input.is-right { background: var(--right-paper); border-color: var(--teal-dark); }
.v-study .st-typed .input.is-wrong { background: var(--miss-paper); border-color: var(--error-on-chalk); }
.v-study .st-typed .st-after[hidden] { display: none; }

/* ---------- Matching ---------- */

.v-study .st-match { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; }
.v-study .st-col { display: grid; gap: 10px; align-content: start; }
.v-study .st-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v-study .st-tile {
  position: relative; isolation: isolate; width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 0; background: none; text-align: left;
  font: 600 15px/1.3 var(--text); color: var(--on-chalk);
  --plate: var(--chalk-line); --c: 4px;
}
.v-study .st-tile-d { font-weight: 500; }
.v-study .st-tile-text { overflow-wrap: anywhere; }
.v-study .st-tile-text[data-len="2"], .v-study .st-tile-text[data-len="3"] { font-size: 14px; }
.v-study .st-tile:hover:not(:disabled) { --plate: var(--plate-hover); }
.v-study .st-tile[aria-pressed="true"] { --plate: var(--amber); color: var(--ink); }
.v-study .st-tile[aria-pressed="true"]:hover { --plate: var(--amber-hi); }
.v-study .st-tile.is-miss, .v-study .st-tile.is-miss:hover { --plate: var(--miss-paper); color: var(--error-on-chalk); }
.v-study .st-tile.is-matched { --plate: var(--teal); color: var(--ink); cursor: default; }
.v-study .st-pair {
  flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--teal-deep); color: var(--chalk); font: 700 12px/1 var(--text);
}

/* ---------- Results ---------- */

.v-study .st-results { gap: 0; }
.v-study .st-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.v-study .st-score :is(h2, h3) { font: 800 72px/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--on-chalk); }
.v-study .st-score p { font: 600 16px/1.3 var(--text); color: var(--on-chalk-soft); }

/* A level-up leads the card, flush with its top edge, and outranks the score beneath it */
.v-study .st-level {
  display: grid; gap: 10px; justify-items: start;
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 0; padding: calc(var(--pad-y) - 2px) var(--pad-x) 22px;
  background: var(--chalk-line);
}
.v-study .st-level h2 { font: 800 52px/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--on-chalk); }
.v-study .st-evolves { font: 700 19px/1.3 var(--text); font-variant-numeric: tabular-nums; color: var(--on-chalk); }
.v-study .st-unlocks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 2px; }
.v-study .st-unlocks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* each unlock gets a lit pip, like the progress pips, so it reads as earned rather than as a button */
.v-study .st-unlocks li { display: flex; align-items: flex-start; gap: 8px; font: 700 15px/1.3 var(--text); color: var(--on-chalk); }
.v-study .st-unlocks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--amber-dark); }
.v-study .st-wardrobe {
  font: 600 15px/1.3 var(--text); color: var(--on-chalk);
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px;
}
.v-study .st-wardrobe:hover { color: var(--amber-deep); }
.v-study .has-level .st-score { margin-top: 22px; gap: 4px 12px; }
.v-study .has-level .st-score h3 { font-size: 34px; letter-spacing: -0.01em; }

.v-study .st-stats { margin: 18px 0 0; }
.v-study .st-stats > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 16px;
  padding: 12px 0; border-top: 2px solid var(--chalk-line);
}
.v-study .has-level .st-stats { margin-top: 14px; }
.v-study .st-stats dt { font: 600 14px/1.3 var(--text); color: var(--on-chalk-soft); }
.v-study .st-stats dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 600 15px/1.4 var(--text); color: var(--on-chalk); }
.v-study .st-gain { font: 700 22px/1 var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--on-chalk); }
.v-study .st-meter { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--text); color: var(--on-chalk-soft); }
.v-study .paper .xpbar { width: 120px; height: 8px; background: var(--pip-off); }
.v-study .paper .xpbar > span { background: var(--amber-dark); }
.v-study .paper .segbar i { background: var(--pip-off); }
.v-study .paper .segbar i.on { background: var(--amber-dark); }
.v-study .st-results .st-actions { margin-top: 20px; }
.v-study .st-other { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.v-study .st-other .label { margin-right: 2px; }

/* On a desktop the results card comes to rest on the desk band, and Noggin stands
   beside it on the same surface, at the edge of the light, with its line above it. */
@media (min-width: 900px) {
  .v-study .st-stage.is-results {
    grid-template-columns: minmax(0, var(--card-w)) minmax(190px, 270px);
    justify-content: center; justify-items: stretch; align-items: end;
    column-gap: calc(4 * var(--a));
    padding-left: calc(var(--gutter) + 6 * var(--a));
  }
  .v-study .is-results .st-cardwrap { grid-area: 1 / 1; width: auto; margin-bottom: calc(-2 * var(--a)); }
  .v-study .is-results .st-buddy {
    grid-area: 1 / 2; width: auto; margin: 0 0 calc(-2 * var(--a));
    flex-direction: column-reverse; align-items: flex-start; gap: 8px;
  }
  .v-study .is-results .st-spot { margin-left: 0; }
  .v-study .is-results .st-say { padding-bottom: 0; }
  .v-study .is-results .st-band { grid-area: 2 / 1 / 3 / -1; width: auto; margin-inline: calc(-12 * var(--a)); }
}

/* ---------- States that can't run a session ---------- */

.v-study .st-note-h { font: 600 30px/1.1 var(--display); color: var(--on-chalk); }
.v-study .st-note-p { font: 500 18px/1.5 var(--text); color: var(--on-chalk-soft); max-width: 44ch; }
.v-study .st-note .st-other { margin-top: 0; }

/* ---------- Phones ---------- */

@media (max-width: 899px) {
  .v-study { padding-top: 14px; }
  .v-study .st-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "end prog" "title title"; gap: 12px 16px; }
  .v-study .st-title h1 { font-size: 18px; }
  .v-study .st-prog .segbar i { width: 9px; }

  /* the lamp stands behind the card: pole and shade show above its top edge */
  .v-study .st-stage { padding-top: calc(8 * var(--a)); }
  .v-study .st-lamp { --s: 0.75; left: calc(-0.75 * var(--a)); top: calc(-7.5 * var(--a)); }
  .v-study .st-card { --pad-x: 18px; --pad-y: 22px; min-height: 300px; }

  .v-study .st-term { font-size: 30px; }
  .v-study .st-term[data-len="1"] { font-size: 26px; }
  .v-study .st-term[data-len="2"] { font-size: 22px; }
  .v-study .st-term[data-len="3"] { font-size: 19px; }
  .v-study .st-def { font-size: 19px; }
  .v-study .st-def[data-len="1"] { font-size: 17px; }
  .v-study .st-def[data-len="2"] { font-size: 16px; }
  .v-study .st-def[data-len="3"] { font-size: 15px; }
  .v-study .st-q { font-size: 24px; }
  .v-study .st-q[data-len="1"] { font-size: 22px; }
  .v-study .st-q[data-len="2"] { font-size: 19px; }
  .v-study .st-q[data-len="3"] { font-size: 17px; }
  .v-study .st-opt { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 15px; }
  .v-study .st-opt .st-n { grid-row: span 2; align-self: start; }
  .v-study .st-verdict { grid-column: 2; }

  .v-study .st-actions > .btn { flex: 1 1 0; }
  .v-study .st-card .btn-lg { min-width: 0; padding-inline: 14px; }
  .v-study .st-after > .btn { flex: 1 1 100%; }
  .v-study .st-results .st-actions > .btn { flex: 1 1 auto; }

  /* matching stacks: terms as a wrap of chips, definitions as a list */
  .v-study .st-match { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .v-study .st-col-t .st-tiles { display: flex; flex-wrap: wrap; }
  .v-study .st-col-t .st-tile { width: auto; min-height: 44px; }

  .v-study .st-buddy { --s: 0.625; gap: 14px; margin-top: calc(2.5 * var(--a)); }
  .v-study .st-spot { margin-left: 0; }
  .v-study .noggin-line { font-size: 16px; }
  .v-study .st-band { width: auto; justify-self: stretch; margin-inline: calc(-1 * var(--gutter)); }
  /* results: Noggin steps up close under the card, so the desk sits right beneath it */
  .v-study .is-results .st-buddy { margin-top: var(--a); }

  .v-study .st-score :is(h2, h3) { font-size: 56px; }
  .v-study .st-level { gap: 8px; padding-bottom: 18px; }
  .v-study .st-level h2 { font-size: 38px; }
  .v-study .st-evolves { font-size: 17px; }
  .v-study .st-unlocks { display: grid; gap: 6px; }
  .v-study .st-unlocks ul { display: grid; gap: 4px; }
  .v-study .has-level .st-score { margin-top: 18px; }
  .v-study .has-level .st-score h3 { font-size: 28px; }
  .v-study .st-stats > div { grid-template-columns: minmax(0, 1fr); }
  .v-study .st-note-h { font-size: 26px; }
  .v-study .st-note-p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-study .st-turn.is-turning { animation: none; }
}