/* Free MCQs (/mcq): the approved prototype v2 (mcq-prototype/src.html), ported onto the site.
   Every rule is scoped to .mq so nothing here touches another page. Tokens come from styles.css; the few the
   prototype added (the soft time bar's amber, the review greens) are defined here. Classes that styles.css already
   uses for something else are renamed: btn -> mb, card -> mc, field -> mf, hint -> mhint, dot -> qdot,
   meta -> dmeta, foot -> mfoot, price -> mprice, n -> tn, t -> lt. .num, .muted and .small are the site's own. */
.mq {
  --good-soft: #e2ecdf;
  --warn: #9a5d0b; --warn-bar: #d58a1c; --warn-soft: #f7e9cf;
  --mq-up: 0 -8px 40px -12px rgba(23,21,15,.35);
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mq {
    --good-soft: #1c2a1e; --warn: #f0b357; --warn-bar: #d99a3c; --warn-soft: #33270f;
    --mq-up: 0 -8px 40px -12px rgba(0,0,0,.8);
  }
}
:root[data-theme='dark'] .mq { --good-soft: #1c2a1e; --warn: #f0b357; --warn-bar: #d99a3c; --warn-soft: #33270f; --mq-up: 0 -8px 40px -12px rgba(0,0,0,.8); }

/* The site masthead and footer step aside while a question is on screen. */
body.mq-playing header.site, body.mq-playing footer.site { display: none; }

.mq button { font: inherit; color: inherit; }
.mq p { margin: 0; }
.mq section { padding: 0; }
.mq h1, .mq h2, .mq h3 { margin: 0; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.mq h1, .mq h2 { font-family: var(--serif); font-variation-settings: 'opsz' 72; }
.mq h1 { font-size: var(--fs-6); }
.mq ul, .mq ol { list-style: none; margin: 0; padding: 0; }
.mq .tiny { font-size: var(--fs-1); }
.mq [hidden] { display: none !important; }

.mq-app { max-width: 560px; margin: 0 auto; padding: 0 16px 96px; min-height: 60vh; }
.mq-app.wide { max-width: 1120px; }
.mq .stack { display: flex; flex-direction: column; gap: var(--s4); }

/* the tool's own top line, under the site masthead */
.mq-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s4); min-height: 56px; }
.mq-home { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.mq-home b { font-family: var(--serif); font-size: var(--fs-5); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.mq-home span { font-size: var(--fs-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mq .avatar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper-2); font-weight: 600; font-size: var(--fs-2); cursor: pointer; flex: none; }
.mq .intro { font-size: var(--fs-2); color: var(--ink-2); max-width: 60ch; }

/* buttons */
.mq .mb { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s ease; white-space: nowrap; }
.mq .mb:active { transform: scale(.98); }
.mq .mb-ink { background: var(--ink); color: var(--paper); }
.mq .mb-accent { background: var(--accent); color: var(--accent-ink); }
.mq .mb-line { background: transparent; border-color: var(--line-2); }
.mq .mb-ghost { background: transparent; padding: 0 12px; }
.mq .mb[disabled] { opacity: .45; cursor: not-allowed; }
.mq .mb-block { width: 100%; }
.mq .link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .18em; }

/* cards */
.mq .mc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.mq .eyebrow { font-size: var(--fs-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mq .row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mq .between { justify-content: space-between; }
.mq .note { font-size: var(--fs-2); color: var(--ink-2); }
.mq .err-box { border-color: var(--accent); color: var(--ink); }

/* daily hero */
.mq .daily { background: var(--chrome); color: var(--chrome-ink); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); box-shadow: var(--shadow-2); }
.mq .daily .eyebrow { color: #a9a293; }
.mq .daily h2 { font-size: var(--fs-6); }
.mq .daily .dmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-2); color: #a9a293; }
.mq .daily .dmeta b { color: var(--chrome-ink); font-weight: 500; }
.mq .daily .mb-accent { align-self: flex-start; min-width: 180px; }
.mq .daily .mb-ghost { color: var(--chrome-ink); }
.mq .countdown { font-family: var(--mono); font-size: var(--fs-2); color: #a9a293; }
.mq .countdown b { color: var(--chrome-ink); font-weight: 500; }
.mq .daily .done { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.mq .daily .done .big { font-family: var(--mono); font-size: 40px; line-height: 1; }
.mq .daily.other { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.mq .daily.other .eyebrow, .mq .daily.other .dmeta, .mq .daily.other .countdown { color: var(--ink-3); }
.mq .daily.other .dmeta b, .mq .daily.other .countdown b { color: var(--ink); }
.mq .daily.other h2 { font-size: var(--fs-5); }
.mq .daily.other .mb-ghost { color: var(--ink); }
.mq .daily.skel { min-height: 236px; }

.mq .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.mq .stat { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.mq .stat .v { font-family: var(--mono); font-size: var(--fs-5); line-height: 1.2; }
.mq .stat .k { font-size: var(--fs-1); color: var(--ink-3); }

.mq .mode { display: flex; flex-direction: column; gap: var(--s3); }
.mq .mode h3 { font-family: var(--serif); font-size: var(--fs-5); font-weight: 500; }
.mq .chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mq .chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font-size: var(--fs-2); font-weight: 500; }
.mq .chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mq .chip[disabled] { opacity: .4; cursor: not-allowed; }
.mq .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.mq .stepper button { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 18px; }
.mq .stepper span { min-width: 64px; text-align: center; font-family: var(--mono); font-size: var(--fs-2); }
.mq .resume { border-color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.mq .lbmini li { display: flex; justify-content: space-between; gap: var(--s3); padding-block: 6px; border-bottom: 1px solid var(--line); font-size: var(--fs-2); }
.mq .lbmini li:last-child { border-bottom: 0; }
.mq .lbmini .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq .mfoot { font-size: var(--fs-1); color: var(--ink-3); padding-block: var(--s5) 0; display: flex; flex-direction: column; gap: 6px; }

/* onboarding */
.mq .scrim { position: fixed; inset: 0; background: rgba(15,14,11,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 60; padding: 0; }
.mq .modal { background: var(--paper-2); width: 100%; max-width: 560px; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s5) 20px calc(var(--s5) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s4); max-height: 92%; overflow: auto; box-shadow: var(--mq-up); }
@media (min-width: 640px) { .mq .scrim { align-items: center; } .mq .modal { border-radius: var(--r-lg); } }
.mq .modal h2 { font-size: var(--fs-6); }
.mq .mf { display: flex; flex-direction: column; gap: 6px; }
.mq .mf label, .mq .mf .lbl2 { font-size: var(--fs-2); font-weight: 500; }
.mq .mf input { min-height: 48px; background: var(--paper-3); }
.mq .mf .err { font-size: var(--fs-1); color: var(--accent); min-height: 1em; }
.mq .mf .err:empty { min-height: 0; }
.mq .mf .hint { margin: 0; }
.mq .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.mq .seg button { min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: var(--fs-2); font-weight: 500; border-right: 1px solid var(--line-2); }
.mq .seg button:last-child { border-right: 0; }
.mq .seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.mq .preview { font-size: var(--fs-2); background: var(--paper-3); border-radius: var(--r-sm); padding: 10px 12px; }
.mq .consent { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--fs-2); color: var(--ink-2); cursor: pointer; }
.mq .consent input { margin-top: 2px; }
.mq .formerr { font-size: var(--fs-2); color: var(--accent); }

/* play */
.mq .playbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); margin-inline: -16px; padding-inline: 16px; }
.mq .playtop { display: flex; align-items: center; gap: var(--s3); min-height: 56px; }
.mq .iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mq .iconbtn[disabled] { opacity: .4; cursor: default; }
.mq .dots { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.mq .qdot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; padding: 0; cursor: pointer; }
.mq .qdot.ans { background: var(--ink-2); border-color: var(--ink-2); }
.mq .qdot.cur { border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.mq .clock { font-family: var(--mono); font-size: var(--fs-2); text-align: right; min-width: 92px; color: var(--ink-2); }
.mq .clock.over { color: var(--warn); }
.mq .tbar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.mq .tbar i { display: block; height: 100%; width: 0; background: var(--ink-3); transition: width 1s linear, background .3s; }
.mq .tbar.near i, .mq .tbar.over i { background: var(--warn-bar); }
.mq .saved { font-size: var(--fs-1); color: var(--ink-3); min-height: 18px; padding-top: 4px; display: flex; justify-content: space-between; gap: var(--s3); }
.mq .saved .ok { opacity: 0; transition: opacity .3s; white-space: nowrap; }
.mq .saved .ok.on { opacity: 1; }
.mq .saved .ok.bad { opacity: 1; color: var(--warn); }
.mq .playgrid { display: grid; gap: var(--s5); padding-top: var(--s3); }
.mq .casecol { display: none; }
.mq .qnum { font-size: var(--fs-1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mq .stem { font-size: var(--fs-4); line-height: 1.5; margin-top: var(--s2); }
.mq .stem p + p, .mq .stem p + .li, .mq .stem .tblwrap { margin-top: .6em; }
.mq .opts { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.mq .opt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); align-items: start; text-align: left; width: 100%; min-height: 56px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--paper-2); cursor: pointer; line-height: 1.45; transition: border-color .12s, background .12s; }
.mq .opt .L { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-2); }
.mq .opt[aria-checked='true'] { border-color: var(--ink); background: var(--paper-3); }
.mq .opt[aria-checked='true'] .L { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mq .actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.mq .actions .in { max-width: 560px; margin: 0 auto; display: flex; gap: var(--s2); align-items: center; }
.mq-app.wide .actions .in { max-width: 1120px; }
.mq .actions .grow { flex: 1; }
.mq .casebtn { min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); cursor: pointer; font-weight: 500; font-size: var(--fs-2); display: inline-flex; align-items: center; gap: 8px; }
.mq .confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); font-size: var(--fs-2); margin-top: var(--s4); }
.mq .confirm .mb { min-height: 40px; }
.mq .mhint { font-size: var(--fs-1); color: var(--ink-3); margin-top: var(--s4); }

/* ICAI text, laid out per FORMAT.md: paragraphs, hanging list markers, tables that scroll in their own box. */
.mq .casetext { font-size: 16px; line-height: 1.65; max-width: 68ch; }
.mq .casetext > p { margin-bottom: .85em; }
.mq .li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); margin-bottom: .5em; }
.mq .li .mk { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mq .lic > :last-child { margin-bottom: 0; }
.mq .lic > p { margin-bottom: .6em; }
.mq .casetext .li + p { margin-top: .9em; }
.mq .casetext .amt, .mq .casetext .fig { font-weight: 600; }
.mq .tblwrap .fig, .mq .tblwrap .amt { font-weight: 400; }
.mq .casehint { font-size: var(--fs-1); color: var(--ink-3); margin-bottom: 12px; }
.mq .amt, .mq .nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mq .blank { display: inline-block; width: 3.2em; border-bottom: 1.5px solid var(--ink-2); margin: 0 .15em; vertical-align: baseline; height: 1em; }
.mq .tblwrap { overflow-x: auto; margin: .25em 0 1.1em; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); max-width: 100%; }
.mq .tblwrap table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); line-height: 1.4; }
.mq .tblwrap th, .mq .tblwrap td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mq .tblwrap thead th { font-weight: 600; background: var(--paper-3); }
.mq .tblwrap tbody th { font-weight: 400; background: none; }
.mq .tblwrap tr:last-child td, .mq .tblwrap tr:last-child th { border-bottom: 0; }
.mq .tblwrap .tn { text-align: right; font-variant-numeric: tabular-nums; }
.mq .tblwrap td.tn { white-space: nowrap; font-family: var(--mono); }
.mq .onum { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; }

/* answer review */
.mq .ropts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mq .ropts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: var(--r-sm); align-items: start; }
.mq .ropts .L { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-1); }
.mq .ropts li.key { background: var(--good-soft); }
.mq .ropts li.key .L { background: var(--good); border-color: var(--good); color: var(--paper-2); }
.mq .ropts li.miss { background: var(--accent-soft); }
.mq .ropts li.miss .L { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mq .ropts .mk2 { grid-column: 2; font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); }
.mq .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; max-height: 86%; display: flex; flex-direction: column; background: var(--paper-2); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--mq-up); transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
.mq .sheet.is-open { transform: none; visibility: visible; }
.mq .sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 10px auto 0; }
.mq .sheet .hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 8px 20px; border-bottom: 1px solid var(--line); }
.mq .sheet .bd { overflow: auto; padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-3); }
.mq .sheet .bd .mb { margin-top: var(--s4); }
.mq .sheetscrim { position: fixed; inset: 0; z-index: 34; background: rgba(15,14,11,.4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.mq .sheetscrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 960px) {
  .mq .playgrid.has-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mq .playgrid.has-case .casecol { display: block; position: sticky; top: 120px; max-height: calc(100vh - 220px); overflow: auto; padding-right: var(--s3); }
  .mq .playgrid:not(.has-case) #qarea { max-width: 720px; }
  .mq .casebtn { display: none; }
}

/* result */
.mq .score { display: flex; align-items: baseline; gap: var(--s3); }
.mq .score .big { font-family: var(--mono); font-size: 56px; line-height: 1; letter-spacing: -.03em; }
.mq .score .of { font-family: var(--mono); font-size: var(--fs-5); color: var(--ink-3); }
.mq .split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.mq .split .stat .v { font-size: var(--fs-4); }
.mq .pace { height: 8px; border-radius: 4px; background: var(--line); position: relative; margin-top: 8px; }
.mq .pace i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--ink-3); }
.mq .pace i.over { background: var(--warn-bar); }
.mq .pace b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.mq .rank { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.mq .rank .v { font-family: var(--mono); font-size: var(--fs-6); line-height: 1; }
.mq .rv { display: flex; flex-direction: column; gap: var(--s3); }
.mq .rq { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); overflow: hidden; }
.mq .rq summary { list-style: none; cursor: pointer; padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.mq .rq summary::-webkit-details-marker { display: none; }
.mq .rq .qs { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-2); }
.mq .rq[open] .qs { -webkit-line-clamp: unset; display: block; }
.mq .tag { font-size: var(--fs-1); font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mq .tag.ok { background: var(--good-soft); color: var(--good); }
.mq .tag.no { background: var(--accent-soft); color: var(--accent); }
.mq .tag.skip { background: var(--paper-3); color: var(--ink-2); }
.mq .tag.late { background: var(--warn-soft); color: var(--warn); }
.mq .qn { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink-3); padding-top: 1px; }
.mq .rbody { padding: 0 14px 14px; display: flex; flex-direction: column; gap: var(--s3); font-size: var(--fs-2); }
.mq .rbody .stemfull { font-size: var(--fs-3); }
.mq .ex { line-height: 1.6; }
.mq .ex > p + p, .mq .ex > p + .li, .mq .ex > .li + p { margin-top: .6em; }
.mq .src { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); }
.mq .learn { border-top: 1px dashed var(--line-2); padding-top: var(--s3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mq .learn a { font-weight: 500; }
.mq .mprice { font-family: var(--mono); white-space: nowrap; }
.mq s { color: var(--ink-3); }
.mq .offer { border: 1px solid var(--line-2); border-radius: var(--r); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); background: var(--paper-2); }
.mq .offer .ln { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.mq .offer .ln b { font-weight: 500; }
.mq .offer .mb { min-height: 44px; }

/* leaderboard */
.mq .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; border-bottom: 1px solid var(--line); }
.mq .tabs::-webkit-scrollbar { display: none; }
.mq .tab { flex: none; min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer; font-size: var(--fs-2); font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; }
.mq .tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); }
.mq .filters { display: flex; gap: var(--s2); flex-wrap: wrap; }
.mq .filters select { min-height: 40px; width: auto; border-radius: 999px; border: 1px solid var(--line-2); background-color: var(--paper-2); padding: 0 30px 0 14px; font: inherit; font-size: var(--fs-2); color: var(--ink); appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.mq .lbgrid { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .mq .lbgrid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .mq .lbside { position: sticky; top: 84px; } }
.mq .lb { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mq .lb li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: 0 14px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: var(--fs-2); }
.mq .lb li:last-child { border-bottom: 0; }
.mq .lb .r { font-family: var(--mono); color: var(--ink-3); }
.mq .lb li.top .r { color: var(--accent); font-weight: 500; }
.mq .lb li.mine { font-weight: 600; }
.mq .lb .s, .mq .lb .lt { font-family: var(--mono); text-align: right; }
.mq .lb .lt { color: var(--ink-3); min-width: 52px; }
.mq .lb .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq .lb .empty { display: block; padding: var(--s5) var(--s4); text-align: center; color: var(--ink-2); min-height: 0; }
.mq .me { position: sticky; bottom: 12px; z-index: 5; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: 0 14px; min-height: 56px; border-radius: var(--r); background: var(--ink); color: var(--paper); font-size: var(--fs-2); box-shadow: var(--shadow-2); }
.mq .me .r, .mq .me .s, .mq .me .lt { font-family: var(--mono); }
.mq .me .lt { opacity: .7; }
.mq .me .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq .me.cta { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 8px 8px 14px; }
.mq .me.cta .mb { min-height: 40px; }

/* practice */
.mq .chaplist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); overflow: hidden; max-height: 420px; overflow-y: auto; }
.mq .chap { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; font-size: var(--fs-2); }
.mq .chap:last-child { border-bottom: 0; }
.mq .chap .box { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; }
.mq .chap[aria-checked='true'] .box { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--paper-2); background: var(--ink); }
.mq .chap .c { font-family: var(--mono); color: var(--ink-3); font-size: var(--fs-1); }

.mq .toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; z-index: 70; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: var(--fs-2); max-width: calc(100% - 32px); transition: opacity .2s, transform .2s; pointer-events: none; }
.mq .toast.on { opacity: 1; transform: translate(-50%, 0); }
.mq .view { animation: mq-in .22s ease both; }
@keyframes mq-in { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mq *, .mq *::before, .mq *::after { animation: none !important; transition: none !important; } }