/* yearly.css — /yearly + /mcq listing pages and the paper viewer extras
 * (paper-viewer.js). styles.css tokens only, so light/dark both follow. */

/* ── filter bar (sticky under the site header) ─────────────────────── */
.yr-bar { position: sticky; top: 68px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem .9rem; margin: 1.6rem 0 1rem; padding: .7rem .8rem; background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; }
.yr-chips { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.yr-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin-left: auto; min-width: 0; }
.yr-bar-end .yr-chips { padding-left: .9rem; border-left: 1px solid var(--line); }
.yr-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--white);
  color: var(--ink); border-radius: 999px; padding: .36rem .7rem; cursor: pointer;
  font: 700 .78rem/1.1 "Hanken Grotesk", sans-serif; white-space: nowrap; }
.yr-chip span { font-weight: 600; color: var(--grey); }
.yr-chip:hover { border-color: var(--accent); }
.yr-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.yr-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.yr-chip[aria-pressed="true"] span { color: inherit; opacity: .85; }
.yr-filter { display: flex; align-items: center; gap: .45rem; color: var(--grey);
  background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 0 .65rem; }
.yr-filter:focus-within { border-color: var(--accent); }
.yr-filter input { width: 190px; border: 0 !important; background: transparent !important; color: var(--ink);
  padding: .48rem 0; font: inherit; font-size: .88rem; outline: none; }
@media (max-width: 760px) {
  .yr-bar { position: static; flex-direction: column; align-items: stretch; }
  .yr-bar > *, .yr-bar-end > * { min-width: 0; max-width: 100%; }
  .yr-bar-end { margin-left: 0; flex-direction: column; align-items: stretch; }
  .yr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
  .yr-bar-end .yr-chips { padding-left: 0; border-left: 0; }
  .yr-filter { margin-left: 0; }
  .yr-filter input { width: 100%; }
}
.yr-level { font: 800 .58rem/1 "Hanken Grotesk", sans-serif; font-style: normal; letter-spacing: .05em;
  border-radius: 5px; padding: .2rem .32rem; background: var(--blue); color: var(--blue-ink); }
.yr-level-A2 { background: var(--pink); color: var(--pink-ink); }
.yr-chip[aria-pressed="true"] .yr-level { background: rgba(255, 255, 255, .22); color: inherit; }

/* one-year page: previous / next */
.yr-pn { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1.2rem; }
.yr-pn a { text-decoration: none; color: var(--navy); background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .8rem; font: 700 .82rem/1 "Hanken Grotesk", sans-serif; }
.yr-pn a:hover { border-color: var(--accent); }

/* ── years: rail + grid ────────────────────────────────────────────── */
.yr-layout { display: grid; gap: 1.2rem; }
.yr-layout > * { min-width: 0; }
.yr-layout.has-rail { grid-template-columns: 116px minmax(0, 1fr); align-items: start; }
.yr-rail { position: sticky; top: 150px; display: grid; gap: .15rem; max-height: calc(100vh - 170px); overflow: auto; }
.yr-rail p { margin: 0 0 .35rem .5rem; font: 700 .66rem/1 "Hanken Grotesk", sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey); }
.yr-rail a { display: flex; justify-content: space-between; align-items: center; gap: .4rem; text-decoration: none;
  color: var(--ink); border-radius: 10px; padding: .38rem .5rem; font-variant-numeric: tabular-nums; }
.yr-rail a b { font: 800 .9rem/1 "Archivo", sans-serif; }
.yr-rail a span { font-size: .7rem; color: var(--grey); background: var(--cream); border-radius: 999px; padding: .15rem .4rem; }
.yr-rail a:hover { background: var(--white); }
.yr-rail a.is-current { background: var(--accent-soft); color: var(--navy); }
.yr-rail a.is-dim { opacity: .4; }
@media (max-width: 900px) {
  .yr-layout.has-rail { grid-template-columns: 1fr; }
  .yr-rail { position: static; display: flex; overflow-x: auto; max-height: none; gap: .3rem; scrollbar-width: none; }
  .yr-rail p { display: none; }
  .yr-rail a { flex: none; border: 1px solid var(--line); background: var(--white); border-radius: 999px; }
}

.yr-years { display: grid; gap: .9rem; min-width: 0; }
.yr-year { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  scroll-margin-top: 150px; }
.yr-year[hidden] { display: none; }
.yr-year > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.15rem; }
.yr-year > summary::-webkit-details-marker { display: none; }
.yr-year > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey); transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.yr-year[open] > summary::before { transform: rotate(45deg); }
.yr-year[open] > summary { border-bottom: 1px solid var(--line); }
.yr-year h2 { margin: 0; font: 800 1.3rem/1 "Archivo", sans-serif; color: var(--purple); font-variant-numeric: tabular-nums; }
.yr-year-n { color: var(--grey); font-size: .85rem; }
.yr-year-done { font: 700 .72rem/1 "Hanken Grotesk", sans-serif; color: var(--green-ink); background: var(--green);
  border-radius: 999px; padding: .28rem .55rem; }
.yr-yearlink { margin-left: auto; font-size: .8rem; color: var(--grey); text-decoration: none; }
.yr-yearlink:hover { color: var(--navy); text-decoration: underline; }

/* the grid: rows = paper components, columns = sessions */
.yr-matrix { display: grid; font-size: .9rem; }
.yr-mhead, .yr-mrow { display: grid; grid-template-columns: minmax(150px, 190px) repeat(var(--sessions), minmax(0, 1fr)); }
.yr-mhead { background: var(--cream); border-bottom: 1px solid var(--line); }
.yr-mh { padding: .5rem .8rem; font: 700 .68rem/1.2 "Hanken Grotesk", sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grey); }
.yr-mrow + .yr-mrow { border-top: 1px solid var(--line); }
.yr-mrow[hidden], .yr-mh[hidden], .yr-cell[hidden] { display: none; }
.yr-comp { padding: .75rem .8rem; display: grid; align-content: start; gap: .2rem; border-right: 1px solid var(--line); }
.yr-comp b { font: 800 .92rem/1.1 "Archivo", sans-serif; color: var(--ink); }
.yr-comp span { color: var(--grey); font-size: .78rem; line-height: 1.3; }
.yr-comp .yr-level { justify-self: start; margin-top: .15rem; }
.yr-cell { padding: .55rem; display: grid; gap: .4rem; align-content: start; min-width: 0; }
.yr-cell + .yr-cell { border-left: 1px dashed var(--line); }
.yr-nil { color: var(--line); font-weight: 700; padding: .5rem; }

/* one sitting */
.yr-tile { position: relative; display: grid; gap: .35rem; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: .45rem .5rem .5rem .6rem; background: var(--page); transition: border-color .15s, box-shadow .15s; }
.yr-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 6px 18px rgba(46, 27, 74, .08); }
.yr-tile[hidden] { display: none; }
.yr-tile-main { display: flex; align-items: baseline; gap: .5rem; min-width: 0; text-decoration: none; color: var(--ink); }
.yr-tile-main b { font: 800 1.05rem/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; }
.yr-tile-main span { color: var(--grey); font: 500 .7rem/1.2 ui-monospace, "JetBrains Mono", Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr-tile-main:hover b { color: var(--navy); }
.yr-tile-main:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.yr-tile-files { display: flex; flex-wrap: wrap; gap: .25rem; }
.yr-f { display: inline-flex; align-items: center; height: 24px; padding: 0 .45rem; text-decoration: none;
  font: 700 .68rem/1 "Hanken Grotesk", sans-serif; border-radius: 7px; border: 1px solid var(--line);
  background: var(--white); color: var(--grey); white-space: nowrap; }
.yr-f:hover { border-color: currentColor; }
.yr-f:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.yr-f-qp { color: var(--lav-ink); background: var(--lav); border-color: transparent; }
.yr-f-ms { color: var(--green-ink); background: var(--green); border-color: transparent; }
.yr-f-go { color: var(--orange-ink); background: var(--orange); border-color: transparent; }
.yr-tile .yr-done { position: absolute; top: .4rem; right: .45rem; }
.yr-done { color: var(--green-ink); font: 800 .7rem/1 "Hanken Grotesk", sans-serif; }
.yr-tile.is-done { border-color: var(--green-line); background: color-mix(in srgb, var(--green) 40%, var(--page)); }
.yr-tile.is-done .yr-done::after, .yr-row.is-done .yr-done::after { content: "✓"; }
.yr-tile.is-done .yr-done[data-score]::after, .yr-row.is-done .yr-done[data-score]::after { content: "✓ " attr(data-score); }

@media (max-width: 760px) {
  .yr-mhead { display: none; }
  .yr-mrow { grid-template-columns: 1fr; }
  .yr-comp { border-right: 0; border-bottom: 1px solid var(--line); background: var(--cream);
    grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .55rem .8rem; }
  .yr-comp .yr-level { margin: 0; }
  .yr-cell + .yr-cell { border-left: 0; border-top: 1px dashed var(--line); }
  .yr-cell { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .yr-cell::before { content: attr(data-label); grid-column: 1 / -1; font: 700 .66rem/1 "Hanken Grotesk", sans-serif;
    letter-spacing: .09em; text-transform: uppercase; color: var(--grey); }
  .yr-nil { display: none; }
  .yr-cell:has(.yr-nil):not(:has(.yr-tile)) { display: none; }
}
.yr-none-found { text-align: center; color: var(--grey); padding: 2rem; border: 1px dashed var(--line); border-radius: 16px; }

/* flat list (MCQ landing page: latest papers) */
.yr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.yr-list-flat { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.yr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: .5rem;
  min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: .45rem .5rem .45rem .8rem;
  background: var(--white); transition: border-color .15s, box-shadow .15s; }
.yr-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 4px 14px rgba(46, 27, 74, .07); }
.yr-row[hidden] { display: none; }
.yr-main { min-width: 0; display: grid; gap: .15rem; text-decoration: none; color: var(--ink); }
.yr-name { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.yr-name b { font: 700 .95rem/1.2 "Hanken Grotesk", sans-serif; white-space: nowrap; }
.yr-code { color: var(--grey); font: 500 .74rem/1.2 ui-monospace, "JetBrains Mono", Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr-main:hover b { color: var(--navy); }
.yr-mcq { font-style: normal; font: 800 .6rem/1 "Hanken Grotesk", sans-serif; letter-spacing: .06em; color: var(--orange-ink);
  background: var(--orange); border-radius: 5px; padding: .2rem .32rem; }
.yr-files { display: grid; grid-template-columns: repeat(4, 30px); gap: .25rem; }
.yr-file { height: 28px; display: grid; place-items: center; text-decoration: none; font: 700 .68rem/1 "Hanken Grotesk", sans-serif;
  border-radius: 8px; border: 1px solid var(--line); color: var(--grey); background: var(--white); }
.yr-file:hover { border-color: currentColor; background: var(--cream); }
.yr-none { border: 0; background: none; }
.yr-qp { color: var(--lav-ink); }
.yr-ms { color: var(--green-ink); }
.yr-practise { color: var(--orange-ink); background: var(--orange); border-color: var(--orange-line); font-size: .7rem; }
.yr-row .yr-done { text-align: center; font-size: .9rem; }
.yr-row.is-done { border-color: var(--green-line); background: color-mix(in srgb, var(--green) 35%, var(--page)); }

/* hub + board pages: subject cards are whole-card links */
a.cat-subj { text-decoration: none; color: var(--ink); transition: transform .12s ease, box-shadow .15s ease, border-color .15s; }
a.cat-subj:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46, 27, 74, .1); border-color: var(--purple); }
a.cat-subj:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a.cat-subj h3 { color: var(--purple); margin: .1rem 0 0; }
a.cat-subj .cat-subj-meta { color: var(--grey); }
.cat-group a { color: inherit; text-decoration: none; }
.cat-group a:hover { color: var(--purple); }
.yr-empty { color: var(--grey); padding: 1rem; }

.yr-feats { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.yr-feats li { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
  display: grid; gap: .25rem; }
.yr-feats b { color: var(--purple); }
.yr-feats span { color: var(--grey); font-size: .9rem; }

/* ── paper viewer extras ───────────────────────────────────────────── */
.pv-seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.pv-seg button { border: 0; background: var(--white); color: var(--grey); cursor: pointer;
  font: 700 .8rem/1 "Hanken Grotesk", sans-serif; padding: .45rem .7rem; }
.pv-seg button + button { border-left: 1px solid var(--line); }
.pv-seg button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.pv-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pv-abbr { display: none; }
.pv-split[aria-pressed="true"], .pv-done.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pv-done.is-on { background: var(--green-ink); border-color: var(--green-ink); }

.pv-body { gap: 0; }
.pv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-col[hidden] { display: none; }
.pv-col + .pv-col { border-left: 1px solid var(--line); }
.pv-head { display: flex; align-items: center; gap: .8rem; justify-content: space-between; padding: .35rem .8rem;
  font: 700 .72rem/1.2 "Hanken Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
  background: var(--white); border-bottom: 1px solid var(--line); }
.pv-head[hidden] { display: none; }
.pv-follow { display: inline-flex; gap: .35rem; align-items: center; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: .8rem; cursor: pointer; }
.pv-col .vw-stage { flex: 1; }
/* chips only exist on the question paper; the other stages need no gutter */
@media (min-width: 1000px) { .vw-stage:not(.has-chips) { padding-right: 0; } }
.vw-chip-q { font: 800 .74rem/1 "Archivo", sans-serif; color: var(--purple); padding: .15rem .1rem; }

/* ── Marks & grades panel ─────────────────────────────────────────────
   Each grade has its own colour pair (tokens, so dark mode follows):
   A* gold · A green · B teal · C blue · D orange · E pink · F/G lavender · U grey */
.pv-marks { padding: 1rem; display: grid; gap: .85rem; align-content: start; overflow: auto; background: var(--cream); }
[data-g] { --gc: var(--grey); --gb: var(--cream); }
[data-g="A*"] { --gc: var(--yellow-ink); --gb: var(--yellow); }
[data-g="A"]  { --gc: var(--green-ink);  --gb: var(--green); }
[data-g="B"]  { --gc: var(--teal-ink);   --gb: var(--teal); }
[data-g="C"]  { --gc: var(--blue-ink);   --gb: var(--blue); }
[data-g="D"]  { --gc: var(--orange-ink); --gb: var(--orange); }
[data-g="E"]  { --gc: var(--pink-ink);   --gb: var(--pink); }
[data-g="F"], [data-g="G"] { --gc: var(--lav-ink); --gb: var(--lav); }

.pv-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: .9rem .95rem 1rem;
  display: grid; gap: .6rem; box-shadow: 0 6px 20px rgba(46, 27, 74, .05); }
.pv-h { margin: 0; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
  font: 700 .7rem/1.3 "Hanken Grotesk", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--grey); }
.pv-h span { letter-spacing: 0; text-transform: none; font-weight: 600; }

.pv-score { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.pv-score label { display: grid; gap: .3rem; font-size: .76rem; font-weight: 700; color: var(--grey); }
.pv-score input { width: 6rem; border: 1.5px solid var(--line); border-radius: 12px; padding: .55rem .7rem;
  font: 800 1.15rem/1 "Archivo", sans-serif; background: var(--page); color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-score input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pv-score > span { padding-bottom: .6rem; color: var(--grey); font-size: 1.2rem; }
.pv-save { margin-left: auto; align-self: flex-end; padding: .65rem 1.2rem; }

.pv-result-empty { margin: 0; color: var(--grey); font-size: .86rem; line-height: 1.5; }
.pv-result-card { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center;
  background: var(--gb); border: 1px solid color-mix(in srgb, var(--gc) 30%, transparent); border-radius: 14px; padding: .7rem .8rem; }
.pv-result-grade { width: 3.1rem; height: 3.1rem; border-radius: 14px; display: grid; place-items: center;
  font: 900 1.45rem/1 "Archivo", sans-serif; background: var(--gc); color: var(--white); }
.pv-result-text { display: grid; gap: .15rem; min-width: 0; }
.pv-result-text b { font: 800 1.05rem/1.2 "Archivo", sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-result-text b small { font: 600 .82rem "Hanken Grotesk", sans-serif; color: var(--grey); }
.pv-result-text span { font-size: .8rem; color: var(--gc); font-weight: 600; }
.pv-result-text .pv-next { color: var(--grey); font-weight: 500; }
.pv-saved { font: 700 .66rem/1 "Hanken Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .05em;
  color: var(--grey); border: 1px dashed var(--line); border-radius: 999px; padding: .3rem .5rem; white-space: nowrap; }
.pv-saved.is-saved { color: var(--green-ink); border: 1px solid var(--green-line); background: var(--white); }

/* grade ladder: 0 .. max as coloured bands, marker at your mark */
.pv-ladder { position: relative; display: flex; height: 26px; border-radius: 9px; overflow: visible; margin: .1rem 0 .25rem; }
.pv-ladder span { background: var(--gb); border-right: 2px solid var(--white); display: grid; place-items: center; min-width: 0; }
.pv-ladder span:first-child { border-radius: 9px 0 0 9px; }
.pv-ladder span:last-child { border-radius: 0 9px 9px 0; border-right: 0; }
.pv-ladder i { font: 800 .66rem/1 "Hanken Grotesk", sans-serif; font-style: normal; color: var(--gc); overflow: hidden; }
.pv-ladder-me { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 3px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--white); transition: left .2s ease; }

.pv-th { display: flex; flex-wrap: wrap; gap: .35rem; }
.pv-th-g { display: inline-flex; gap: .35rem; align-items: baseline; border-radius: 9px; padding: .32rem .55rem;
  font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 600; background: var(--gb); color: var(--ink);
  border: 1px solid transparent; }
.pv-th-g b { color: var(--gc); font-weight: 900; }
.pv-th-g.is-mine { border-color: var(--gc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 25%, transparent); }

.pv-opt { display: grid; gap: .45rem; padding: .6rem 0 .1rem; border-top: 1px dashed var(--line); font-size: .84rem; }
.pv-opt:first-of-type { border-top: 0; padding-top: 0; }
.pv-opt-head { display: flex; align-items: center; gap: .5rem; color: var(--grey); }
.pv-opt-code { font: 800 .74rem/1 ui-monospace, Consolas, monospace; background: var(--lav); color: var(--lav-ink);
  border-radius: 6px; padding: .28rem .45rem; }
.pv-foot { margin: 0; font-size: .78rem; color: var(--grey); line-height: 1.5; }
.pv-calc { justify-self: start; text-decoration: none; font: 700 .84rem/1 "Hanken Grotesk", sans-serif; color: var(--on-accent);
  background: var(--accent); border-radius: 10px; padding: .6rem .85rem; }
.pv-calc:hover { background: var(--accent-hover); }

@media (max-width: 1180px) { .pv-long { display: none; } .pv-abbr { display: inline; } }
@media (max-width: 999px) { .pv-split { display: none; } }
@media (max-width: 640px) {
  .pv-tools .vw-title { display: none; }
  .pv-tools .vw-zoom { display: none; }
  .pv-done span { display: none; }
}

/* ── MCQ start card (mcq-setup.js) ─────────────────────────────────── */
.mqs { display: grid; gap: 1.2rem; margin: 1.4rem 0; scroll-margin-top: 90px; }
.mqs h3 { margin: 0 0 .6rem; font: 700 .78rem/1 "Hanken Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.mqs-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 1.3rem;
  display: grid; gap: 1.2rem; box-shadow: 0 16px 50px rgba(46, 27, 74, .07); }
.mqs-loading p { margin: 0; color: var(--grey); }
.mqs-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mqs-tabs button { text-align: left; border: 2px solid var(--line); background: var(--page); border-radius: 16px;
  padding: .85rem 1rem; cursor: pointer; display: grid; gap: .2rem; color: var(--ink); }
.mqs-tabs button b { font: 800 1rem "Archivo", sans-serif; }
.mqs-tabs button span { font-size: .83rem; color: var(--grey); }
.mqs-tabs button[aria-selected="true"] { border-color: var(--purple); background: var(--lav); }
.mqs-tabs button[aria-selected="true"] b { color: var(--lav-ink); }
.mqs-panel { display: grid; gap: 1rem; }
.mqs-panel[hidden] { display: none; }
.mqs-field { display: grid; gap: .45rem; align-content: start; }
.mqs-label { display: flex; align-items: baseline; gap: .6rem; font: 700 .75rem/1 "Hanken Grotesk", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.mqs-label small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--orange-ink); }
.mqs-link { margin-left: auto; border: 0; background: none; color: var(--purple); font: 700 .8rem "Hanken Grotesk", sans-serif;
  cursor: pointer; text-transform: none; letter-spacing: 0; }
.mqs-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mqs-years { max-height: 96px; overflow: auto; }
.mqs-chips button, .mqs-seg button { border: 1px solid var(--line); background: var(--white); color: var(--ink);
  border-radius: 10px; padding: .45rem .75rem; font: 700 .85rem "Hanken Grotesk", sans-serif; cursor: pointer;
  font-variant-numeric: tabular-nums; }
.mqs-chips button small { font-weight: 600; color: var(--grey); }
.mqs-chips button[aria-pressed="true"], .mqs-seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mqs-chips button[aria-pressed="true"] small { color: inherit; opacity: .8; }
.mqs-chips button:focus-visible, .mqs-seg button:focus-visible, .mqs-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mqs-seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.mqs-summary { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: var(--cream); font-size: .9rem; color: var(--grey); }
.mqs-summary b { color: var(--ink); }
.mqs-summary a { margin-left: .5rem; color: var(--purple); font-weight: 700; }
.mqs-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem; max-height: 320px; overflow: auto; padding: 2px; }
.mqs-topic { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: 11px;
  padding: .5rem .7rem; cursor: pointer; font-size: .88rem; background: var(--white); }
.mqs-topic input { accent-color: var(--purple); width: 16px; height: 16px; }
.mqs-topic span { flex: 1; min-width: 0; }
.mqs-topic em { font-style: normal; font: 600 .75rem "JetBrains Mono", ui-monospace, monospace; color: var(--grey);
  background: var(--cream); border-radius: 6px; padding: .1rem .35rem; }
.mqs-topic.is-on { border-color: var(--purple); background: var(--lav); }
.mqs-row { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.mqs-years2 { display: flex; align-items: center; gap: .4rem; color: var(--grey); font-size: .85rem; }
.mqs-years2 select, .mqs-mins input { border: 1px solid var(--line); border-radius: 10px; padding: .4rem .5rem;
  background: var(--white); color: var(--ink); font: 600 .88rem "Hanken Grotesk", sans-serif; }
.mqs-mins { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--grey); }
.mqs-mins input { width: 5rem; }
.mqs-opts { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: end; padding-top: 1rem; border-top: 1px dashed var(--line); }
.mqs-switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.mqs-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mqs-track { width: 44px; height: 26px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.mqs-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.mqs-switch input:checked + .mqs-track { background: var(--green-ink); }
.mqs-switch input:checked + .mqs-track i { transform: translateX(18px); }
.mqs-switch input:focus-visible + .mqs-track { outline: 2px solid var(--gold); outline-offset: 2px; }
.mqs-switch b { display: block; font-size: .9rem; }
.mqs-switch small { color: var(--grey); font-size: .8rem; }
.mqs-go { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.mqs-err { margin: 0; color: var(--pink-ink); font-weight: 600; font-size: .9rem; }
.mqs-err:empty { display: none; }
.mqs-start { font-size: 1rem; padding: .8rem 1.4rem; }
.mqs-resume-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; }
.mqs-rcard { display: grid; gap: .4rem; text-decoration: none; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; padding: .8rem 1rem; }
.mqs-rcard:hover { border-color: var(--purple); }
.mqs-rcard b { font-size: .9rem; }
.mqs-rcard small { color: var(--grey); }
.mqs-rcard em { font-style: normal; font-weight: 700; color: var(--purple); font-size: .85rem; }
.mqs-rbar { height: 5px; background: var(--cream); border-radius: 99px; overflow: hidden; }
.mqs-rbar i { display: block; height: 100%; background: var(--gold); }
.mqs-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mqs-history a { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; }
.mqs-history a:hover { border-color: var(--purple); }
.mqs-history b { flex: 1; min-width: 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mqs-history small { color: var(--grey); }
.mqs-score { font: 800 .85rem "Archivo", sans-serif; border-radius: 8px; padding: .25rem .45rem; min-width: 3.2rem; text-align: center; }
.mqs-score[data-tone="good"] { background: var(--green); color: var(--green-ink); }
.mqs-score[data-tone="mid"] { background: var(--orange); color: var(--orange-ink); }
.mqs-score[data-tone="low"] { background: var(--pink); color: var(--pink-ink); }
@media (max-width: 640px) {
  .mqs-card { padding: 1rem; border-radius: 18px; }
  .mqs-tabs { grid-template-columns: 1fr; }
  .mqs-go { justify-content: stretch; }
  .mqs-start { width: 100%; justify-content: center; }
}