/* swarm R18 home-marketing: the lesson and exercise mock-ups switch with their tab strips, as on the original.
   All panels of a stage share one grid cell, so the card keeps the height of the tallest panel and nothing below
   it moves when a tab changes. Before the script runs only the first panel shows. */
.mock-panels{display:grid}
.mock-panels>*{grid-area:1/1;min-width:0}
/* R22: a card that is a whole panel ends at its own content, so a short tab (Grammar, the first FRQ) shows panel
   shade under the card instead of a 200px white void inside it. The stack still holds the tallest height */
.mock-panels>.app{align-self:start}
.mock-panels>:not(:first-child){visibility:hidden}
.mock-panels.mt-on>*{visibility:visible}
.mock-panels.mt-on>:not(.is-on){visibility:hidden}
.tabs-mock [role=tab],.seg [role=tab]{cursor:pointer;transition:color var(--dur-1,160ms) var(--ease,ease),box-shadow var(--dur-1,160ms) var(--ease,ease),background-color var(--dur-1,160ms) var(--ease,ease)}
.tabs-mock [role=tab]:hover,.seg [role=tab]:hover{color:var(--ink)}
.tabs-mock [role=tab]:focus,.seg [role=tab]:focus{outline:none}
.tabs-mock [role=tab]:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
/* R21: the strip scrolls sideways, so it clipped the 3px-out keyboard ring to two green bars. Each tab gets 6px of
   side padding (the gap drops 20px to 8px, so labels keep the same spacing; the strip moves 6px left, so the first
   label stays on the card edge) and the ring is drawn just inside the tab, where nothing clips it */
html .tabs-mock[role=tablist]{gap:8px;margin-left:-6px}
html .tabs-mock>span[role=tab],html .tabs-mock>span.on[role=tab]{padding-inline:6px}
html .tabs-mock>[role=tab]:focus-visible{outline-offset:-2px;border-radius:6px}
.seg [role=tab]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* R20: question-type panels in the practice mock-up (multiple choice, select all, short answer) */
.mk-qlabel{font:500 13px/1 var(--font);color:var(--muted)}
.mk-multi .k{border-radius:6px}
.mk-multi .k svg{width:14px;height:14px}
.mk-multi .opt:not(.sel) .k{background:var(--sheet,#fff);box-shadow:inset 0 0 0 1.5px var(--line-2,var(--line))}
.mk-answer{margin-top:14px;min-height:118px;padding:12px 14px;border-radius:10px;background:var(--sheet,#fff);box-shadow:inset 0 0 0 1px var(--line-2,var(--line));font:500 14.5px/1.6 var(--font);color:var(--ink)}
.mk-answer::after{content:"";display:inline-block;width:1.5px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:var(--ink)}
/* R20: the contests under a competition mock-up are a plain label, not tabs (the original has no switch here) */
.mk-covers{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 16px;font:500 13px/1.4 var(--font);color:var(--muted)}
.mk-covers b{font-weight:500;color:var(--ink)}
/* R21: on phones "Contests" sits on its own line above the names, so a lone "USAJMO" no longer wraps under them */
@media (max-width:640px){.mk-covers>span{flex-basis:100%}}
/* R20: the question-type switch stays on one line on phones (it wrapped "Short Answer" at 375) */
@media (max-width:640px){
  .app-bar .seg{flex-wrap:nowrap;max-width:100%}
  .app-bar .seg span{padding:8px 6px;font-size:12px;white-space:nowrap}
}
/* panel content: the site's body text and quiet product UI, no new colours */
.mk-text{margin-top:14px;font:500 14.5px/1.6 var(--font);color:var(--text)}
.note+.mk-text{margin-top:16px}
.mk-text:first-child{margin-top:0}
.mk-term{font-weight:600;color:var(--ink);box-shadow:inset 0 -2px 0 var(--sky-50)}
.mk-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mk-legend span{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:500 12px/1 var(--font);color:var(--ink)}
.mk-words{margin-top:14px;font:500 15px/2.1 var(--font);color:var(--text)}
.mk-words span{padding:3px 5px;border-radius:6px;color:var(--ink)}
.w-n{background:var(--amber-50)}.w-v{background:var(--teal-50)}.w-p{background:var(--sky-50)}.w-c{background:var(--rose-50)}.w-a{background:var(--coral-50)}
.mk-code{display:grid;grid-template-columns:28px 1fr;row-gap:2px;margin-top:14px;padding:12px 14px 12px 8px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font:500 13.5px/1.7 var(--font);font-variant-numeric:tabular-nums;color:var(--text);min-height:1.7em}
.mk-code .ln{text-align:right;padding-right:12px;color:var(--muted);opacity:.7}
.mk-code .ph{color:var(--muted)}
.mk-econ{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin-top:12px}
.mk-econ .graph{width:100%;height:auto;display:block}
.mk-fill{margin-top:0;line-height:2.05}
.mk-sel{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--sheet);font:500 13px/1 var(--font);color:var(--ink);white-space:nowrap}
.mk-trace{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px}
.mk-pinyin{width:180px;text-align:center;padding:6px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);font:500 20px/1.2 var(--font);color:var(--ink)}
.mk-grid{position:relative;display:grid;place-items:center;width:180px;height:180px;border:1px solid var(--line);border-radius:10px;background:
  linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,
  linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,var(--soft)}
.mk-grid span{font:400 128px/1 "Noto Sans CJK SC","PingFang SC","Microsoft YaHei",var(--font);color:var(--ink);opacity:.22}
@media (max-width:640px){
  .mk-econ{grid-template-columns:1fr}
  .mk-econ .graph{max-width:220px}
  .mk-text{font-size:14px}
}
/* the home graphs draw the plotted line in ink (rework.css), so the labels follow it in both themes */
.mk-econ .graph text{fill:var(--ink)}
html.dark .mk-econ .graph text{fill:var(--ink);stroke:none}
/* swarm R19 home-marketing: the exam strip switches too (5 more panels from the original). Long passages sit in a
   short scroll box so the shared card height stays close to the calculus panel, long answers stack one per row. */
.mk-src{max-height:168px;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font:400 13.5px/1.6 var(--font);color:var(--text);overscroll-behavior:contain}
.mk-src p+p{margin-top:10px}
.mk-src b{font-weight:600;color:var(--ink)}
.mk-src cite{display:block;margin-top:8px;font:500 12.5px/1.45 var(--font);font-style:normal;color:var(--muted)}
.mk-src:focus{outline:none}
.mk-src:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.exam-opts.mk-long{grid-template-columns:1fr}
.exam-opts.mk-long .opt{padding:10px 14px;font-size:14px;line-height:1.45}
.mk-check{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;font:600 14px/1 var(--font-h)}
.mk-pseudo{grid-template-columns:24px 1fr;padding:10px 14px 10px 6px;font-size:13px;line-height:1.6}
.mk-pseudo b{font-weight:600;color:var(--ink)}
.mk-pseudo .in1{padding-left:18px}
.mk-c{font:500 13.5px/1 var(--font);padding:2px 6px;border-radius:6px;background:var(--soft-2);color:var(--ink)}
.mk-audio{display:flex;align-items:center;gap:12px;max-width:360px;margin-top:14px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:999px;background:var(--sheet)}
.mk-audio .pl{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--btn,#121614);color:var(--btn-text,#fff)}
.mk-audio .pl svg{width:14px;height:14px}
.mk-audio .tr{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:6px;font:500 12px/1 var(--font);color:var(--muted)}
.mk-audio .tr i{flex-basis:100%;height:4px;border-radius:999px;background:var(--soft-2)}
/* the exam stage keeps the tallest panel's height, so nothing below moves when a tab changes. R22: each card ends at
   its own footer (align-self:start), so the spare height is panel shade under the card, not a 300px white void
   inside it (the calculus card at 1440) */
.mk-exam>.app{display:flex;flex-direction:column;align-self:start}
.mk-exam>.app>.app-body{flex:1;display:flex;flex-direction:column}
.mk-exam .exam-foot{margin-top:auto}
.mk-exam .app-body>.opts{margin-bottom:18px}
.mk-exam .exam-bar .timer{white-space:nowrap;flex:none}
.mk-exam .exam-bar b{line-height:1.3}
@media (max-width:640px){
  .mk-src{max-height:120px;font-size:13px}
  .mk-pseudo{font-size:12.5px;line-height:1.5}
  .exam-opts.mk-long .opt{padding:9px 12px;font-size:13.5px;line-height:1.4}
}
/* phones: the CSP and SAT panels are about twice the calculus one, so the exam card takes each panel's own height
   (the strip sits above the card, so the tapped tab does not move) */
@media (max-width:640px){
  .mk-exam.mt-on>.app:not(.is-on){display:none}
}
/* R22: the same from 1024px down, where the row stacks and the strip also sits above the card. Keeping the tallest
   panel's height left a 260px blank band under the calculus answers at 768 */
@media (max-width:1024px){
  .mk-exam.mt-on>.app:not(.is-on){display:none}
}
/* swarm R24 home-marketing: the same at every width for the exam and FRQ cards. Holding the tallest panel's height
   left a blank band of panel shade under the first card at 1440 (about 210px under the calculus exam, 250px on
   /feature/exams/, 120px under the first FRQ). The strips sit above the cards, so the tapped tab never moves */
.mk-exam.mt-on>.app:not(.is-on),.mk-frq.mt-on>.app:not(.is-on){display:none}
/* R22: the calculus stem sets its equation in a stimulus box, as the original exam screen does */
.mk-stim{padding:12px 16px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.mk-stim .mk-text{margin-top:0}
.mk-eq{margin-top:12px;text-align:center}
.mk-eq .math{font-size:20px}
.mk-stim+.mk-text{margin-top:16px}
/* the CSP answers are medium length: two per row from tablet up keeps that panel (the tallest) shorter */
@media (min-width:641px){
  .exam-opts.mk-two{grid-template-columns:1fr 1fr}
  .mk-exam .mk-src{max-height:150px}
}
/* swarm R19: FRQ strip panels (data tables and the CSA class listing) */
.mk-tbl{width:100%;margin-top:10px;border-collapse:collapse;font:500 12.5px/1.4 var(--font);font-variant-numeric:tabular-nums;color:var(--text)}
.mk-tbl th,.mk-tbl td{padding:6px 8px;border-bottom:1px dashed var(--line);text-align:left;white-space:nowrap}
.mk-tbl th{font-weight:600;color:var(--ink)}
.mk-java{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font:500 12px/1.55 var(--font);font-variant-numeric:tabular-nums;color:var(--text);white-space:pre;overflow-x:auto}
.mk-frq>.app{display:flex;flex-direction:column}
.mk-frq>.app>.frq{flex:1}
/* R22: side by side, the sources scroller runs the full height of the answers column (it stopped at 340px and left
   a 200px blank under the cut-off text at 768) */
@media (min-width:721px){
  .mk-frq .frq-src{display:flex;flex-direction:column}
  .mk-frq .frq-src .scroll{flex:1 1 0;height:0;min-height:300px;max-height:none}
}
/* R21: a strip scrolled to its end drops the right-edge fade, so the last tab reads in full (mocktabs.js sets .at-end) */
html .tabs-mock.at-end{-webkit-mask-image:none;mask-image:none}
/* R21: scrolled off its start, the strip also fades at the left edge (both edges mid-way, only the left at the end) */
html .tabs-mock.is-scrolled{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
html .tabs-mock.is-scrolled.at-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px);mask-image:linear-gradient(to right,transparent,#000 32px)}