/* The Exemplars tab: plans, drill, pearls, articles. Built on the app tokens (app.css :root).
   Each screen sets --hue from the topic's category; each part of the format has its own chant colour (--c). */

.ex-wrap { --hue: #8B2FD9; --r2: 16px; --soft-shadow: 0 1px 2px rgba(38,33,59,.05), 0 10px 30px -12px rgba(38,33,59,.18); }
.ex-wrap h1, .ex-wrap h2, .ex-wrap h3 { font-family: var(--font-display); letter-spacing: -.01em; }
.ex-wrap b { font-weight: 800; }

/* ---------- hero, stats, section nav ---------------------------------------------------------------------------- */
.ex-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: center;
  background: radial-gradient(1200px 300px at 110% -10%, rgba(212,160,23,.35), transparent 60%),
              linear-gradient(135deg, #2a1660 0%, #4b2aa6 55%, #7a3fd1 100%);
  color: #fff; border-radius: 22px; padding: 26px 28px; margin-bottom: 16px; box-shadow: 0 20px 40px -24px rgba(59,31,122,.8); }
.ex-hero.slim { padding: 20px 24px; }
.ex-hero h2 { margin: 4px 0 8px; font-size: 1.7rem; line-height: 1.15; color: #fff; }
.ex-hero p { margin: 0; color: #e7defb; font-size: .93rem; max-width: 60ch; }
.ex-eyebrow { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #f6d77a; }
.ex-eyebrow.dark { color: var(--hue); }
.ex-chant-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 14px; }
.ex-chant-strip span { background: var(--c); color: #fff; font-weight: 800; font-size: .66rem; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.ex-chant-strip i { font-style: normal; color: #cbb8f5; font-size: .75rem; }
.ex-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ex-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 14px; color: #fff; text-decoration: none; backdrop-filter: blur(6px); }
.ex-stat b { display: block; font-size: 1.6rem; line-height: 1; font-family: var(--font-display); }
.ex-stat b small { font-size: .9rem; opacity: .75; }
.ex-stat span { font-size: .74rem; color: #e2d8f8; }
.ex-stat.cta { background: linear-gradient(135deg, #f6d77a, #d4a017); color: #3b2706; border-color: transparent; transition: transform .15s; }
.ex-stat.cta span { color: #4a3206; font-weight: 700; }
.ex-stat.cta:hover { transform: translateY(-2px); }
.ex-nav-top { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; box-shadow: var(--shadow); }
.ex-navlink { padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: .88rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.ex-navlink:hover { background: var(--line-soft); color: var(--ink); }
.ex-navlink.on { background: var(--accent-ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(59,31,122,.9); }
.ex-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: .85rem; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.ex-back:hover { text-decoration: underline; }
.ex-note { color: var(--ink-soft); font-size: .88rem; margin: 0 0 12px; max-width: 70ch; }
.ex-note.small { font-size: .8rem; margin-top: 14px; }
.ex-continue { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--hue);
  border-radius: var(--r2); padding: 12px 16px; margin-bottom: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--soft-shadow); }
.ex-continue b { display: block; font-size: 1.05rem; }
.ex-go { margin-left: auto; font-weight: 800; color: var(--accent-ink); white-space: nowrap; }

/* ---------- progress ring ---------------------------------------------------------------------------------------- */
.ex-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ex-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ex-ring circle { fill: none; stroke-width: 5; }
.ex-ring .bg { stroke: var(--line-soft); }
.ex-ring .fg { stroke: var(--hue, var(--accent)); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ex-ring-n { font-size: .68rem; font-weight: 800; color: var(--ink); }

/* ---------- controls --------------------------------------------------------------------------------------------- */
.ex-controls { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.ex-searchbox { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; max-width: 520px; flex: 1 1 260px; }
.ex-searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ex-search { flex: 1; border: 0; outline: 0; padding: 10px 0; font: inherit; background: transparent; min-width: 0; }
.ex-ctl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ex-ctl-label { font-size: .7rem; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; min-width: 46px; }
.ex-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-pill { border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.ex-pill:hover { background: var(--line-soft); }
.ex-pill.on { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.ex-select { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: .84rem; background: #fff; }
.ex-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ex-subtabs, .ex-scope { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- groups + topic cards ----------------------------------------------------------------------------------- */
.ex-group { margin-bottom: 28px; }
.ex-group-h { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 12px; }
.ex-all-h { margin-top: 6px; }
.ex-count { font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 800; color: var(--ink-soft); background: var(--line-soft); border-radius: 999px; padding: 2px 9px; }
.ex-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ex-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.ex-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 16px 16px 13px; color: var(--ink); text-decoration: none; box-shadow: var(--soft-shadow); transition: transform .16s, box-shadow .16s; }
.ex-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(38,33,59,.35); }
.ex-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ex-card-band { position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--hue), color-mix(in srgb, var(--hue) 40%, #fff)); }
.ex-card h3 { margin: 0; font-size: 1.04rem; line-height: 1.25; }
.ex-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px; }
.ex-card-ring { margin-left: auto; }
.ex-no { font-weight: 900; font-size: .8rem; color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, #fff); border-radius: 8px; padding: 3px 8px; }
.ex-kind { font-size: .7rem; font-weight: 800; color: var(--hue); text-transform: uppercase; letter-spacing: .06em; }
.ex-done { margin-left: auto; color: var(--ok); font-weight: 800; font-size: .78rem; }
.ex-stand { margin: 0; font-size: .85rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex-card-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink-faint); flex-wrap: wrap; }
.ex-sep { color: var(--line); }
.ex-quiz-badge { margin-left: auto; font-weight: 800; color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 1px 8px; }
.ex-prio { font-size: .68rem; font-weight: 900; border-radius: 999px; padding: 3px 9px; letter-spacing: .02em; white-space: nowrap; }
.ex-prio.p1 { background: linear-gradient(135deg, #ffe1d1, #ffd0bb); color: #b23a0e; }
.ex-prio.p2 { background: var(--gold-soft); color: var(--gold-ink); }
.ex-prio.p3 { background: var(--teal-soft); color: var(--teal); }
.ex-why { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 2px 9px; background: var(--line-soft); color: var(--ink-soft); }
.ex-why.same { background: var(--ok-soft); color: var(--ok); }

/* ---------- plan header + chant rail ---------------------------------------------------------------------------- */
.ex-plan-head { display: flex; align-items: center; gap: 18px; justify-content: space-between; margin: 2px 0 14px; padding: 18px 20px;
  border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--hue) 14%, #fff), #fff 70%); border: 1px solid color-mix(in srgb, var(--hue) 25%, var(--line)); }
.ex-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.ex-title { margin: 6px 0 4px; font-size: 1.9rem; line-height: 1.12; color: var(--accent-ink); }
.ex-issue { margin: 0; color: var(--ink-soft); font-size: .93rem; max-width: 72ch; }
.ex-rail-wrap { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--paper) 80%, transparent); padding: 6px 0 8px; margin: 0 -4px; }
.ex-rail { list-style: none; margin: 0; padding: 2px 4px 6px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.ex-step { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 76px; white-space: nowrap;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 12px; padding: 6px 10px; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; transition: all .15s; }
.ex-step > span[aria-hidden] { font-size: 1rem; line-height: 1; }
.ex-step-chant { font-size: .64rem; letter-spacing: .1em; color: var(--c); }
.ex-step-l { font-size: .74rem; }
.ex-step:hover { border-color: var(--c, var(--accent)); }
.ex-step.seen { background: color-mix(in srgb, var(--c, var(--ok)) 8%, #fff); border-color: color-mix(in srgb, var(--c, var(--ok)) 40%, var(--line)); }
.ex-step.on { background: var(--c, var(--accent-ink)); border-color: var(--c, var(--accent-ink)); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px -8px var(--c, var(--accent-ink)); }
.ex-step.on .ex-step-chant { color: #fff; opacity: .85; }
.ex-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.ex-seg { display: inline-flex; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.ex-seg button { border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 800; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); }
.ex-seg button.on { background: var(--accent-ink); color: #fff; }
.ex-toolbar-hint { font-size: .8rem; color: var(--ink-faint); }

/* ---------- stage ------------------------------------------------------------------------------------------------ */
.ex-stage { padding: 22px 24px; outline: none; border-radius: 20px; box-shadow: var(--soft-shadow); animation: exIn .25s ease; }
@keyframes exIn { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ex-label { display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--hue); margin: 18px 0 8px; }
.ex-label:first-child { margin-top: 0; }
.ex-label b { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--ink); }
.ex-speak { border: 0; background: var(--line-soft); border-radius: 999px; width: 28px; height: 28px; cursor: pointer; font-size: .85rem; line-height: 1; }
.ex-speak:hover { background: var(--accent-soft); }
.ex-stand-big { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.45rem; line-height: 1.35; padding: 16px 20px 16px 22px;
  background: color-mix(in srgb, var(--hue) 8%, #fff); border-left: 6px solid var(--hue); border-radius: 6px 16px 16px 6px; }
.ex-hook { display: flex; gap: 14px; align-items: flex-start; margin: 16px 0 6px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, #fff7dc, #fdebb6); border: 1px solid #f0d78a; }
.ex-hook-i { font-size: 1.8rem; line-height: 1; }
.ex-hook .ex-label { margin: 0 0 2px; color: #8a6512; }
.ex-hook-line { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: #4a3206; line-height: 1.25; }
.ex-hook-x { font-size: .84rem; color: #6b5212; margin-top: 4px; }
.ex-two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.ex-box { border-radius: 14px; padding: 12px 16px; }
.ex-box p { margin: 0; font-size: .9rem; }
.ex-box .ex-label { margin-top: 0; }
.ex-box.warm { background: #fff3ec; } .ex-box.warm .ex-label { color: #b4500e; }
.ex-box.cool { background: #ecf5f8; } .ex-box.cool .ex-label { color: #0f6f80; }
.ex-timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ex-timeline::before { content: ""; position: absolute; top: 20px; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, #9bd38a, #2f8a3e); border-radius: 3px; }
.ex-tl { position: relative; text-align: center; }
.ex-tl-dot { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid #5fae58; font-size: 1.2rem; }
.ex-tl-k { display: block; font-size: .66rem; font-weight: 900; letter-spacing: .1em; color: #2f7a3a; margin: 6px 0 4px; }
.ex-tl p { margin: 0; font-size: .86rem; background: #f2f9ef; border-radius: 12px; padding: 8px 10px; }
.ex-mini-skel { display: grid; gap: 4px; }
.ex-mini-skel > div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: center; font-size: .86rem; }
.ex-mini-skel b { background: var(--c); color: #fff; font-size: .64rem; letter-spacing: .1em; text-align: center; padding: 5px 0; border-radius: 6px; }
.ex-tip { margin: 14px 0 0; font-size: .86rem; color: var(--ink-soft); }
.ex-num { font-weight: 900; color: #b23a0e; background: linear-gradient(transparent 58%, #ffe0cf 58%); padding: 0 1px; }

/* facts */
.ex-facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ex-fact { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--hue); border-radius: 12px; font-size: .9rem; }
.ex-fact-s { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .74rem; color: var(--ink-faint); margin-top: auto; }
.ex-use { font-weight: 800; color: var(--hue); background: color-mix(in srgb, var(--hue) 10%, #fff); border-radius: 999px; padding: 1px 8px; }

/* ---------- toolkit ---------------------------------------------------------------------------------------------- */
.ex-kit { display: grid; gap: 16px; }
.ex-kbox { border-radius: 18px; padding: 16px 18px; border: 1px solid var(--line); background: #fff; }
.ex-kbox h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.12rem; }
.ex-kbox h3 small { font-family: system-ui, sans-serif; font-size: .74rem; font-weight: 600; color: var(--ink-faint); }
.ex-kbox.vocab { background: linear-gradient(180deg, #eef2ff, #fff 40%); border-color: #d6dcfb; }
.ex-kbox.coh { background: linear-gradient(180deg, #ecfbf6, #fff 40%); border-color: #c7eedf; }
.ex-kbox.sym { background: linear-gradient(180deg, #f1f9ec, #fff 40%); border-color: #cfe9c4; }
.ex-kbox.fig { background: linear-gradient(180deg, #fff6e5, #fff 40%); border-color: #f3dfb1; }
.ex-kbox.magic { background: linear-gradient(180deg, #fdf3ff, #fff 40%); border-color: #ecd2f5; }
.ex-tag { display: inline-block; font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; background: var(--line-soft); color: var(--ink-soft); }
.ex-tag.gold { background: linear-gradient(135deg, #f8e19a, #e7bb3b); color: #4a3206; }
.ex-part-chip { display: inline-block; font-size: .64rem; font-weight: 900; border-radius: 999px; padding: 2px 8px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); white-space: nowrap; }

/* flip cards (vocabulary, pearls) */
.ex-flip-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ex-pearl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ex-flip { perspective: 1000px; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; height: 100%; display: flex; }
.ex-flip > .ex-flip-in { flex: 1; }
.ex-flip-in { display: grid; transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; min-height: 118px; }
.ex-flip.tall .ex-flip-in { min-height: 170px; }
.ex-flip-grid .ex-flip-in { height: 158px; }
.ex-flip-grid .ex-flip-b { overflow-y: auto; }
.ex-flip.flipped .ex-flip-in { transform: rotateY(180deg); }
.ex-flip-f, .ex-flip-b { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ex-flip-f { background: #fff; border: 1.5px solid #cdd5fb; box-shadow: 0 6px 16px -10px rgba(59,31,122,.4); justify-content: center; align-items: flex-start; }
.ex-flip-f b { font-family: var(--font-display); font-size: 1.22rem; color: #312e81; line-height: 1.2; }
.ex-flip-f i { font-size: .76rem; color: var(--ink-faint); }
.ex-flip-b { transform: rotateY(180deg); background: #312e81; color: #fff; border: 1.5px solid #312e81; font-size: .85rem; }
.ex-flip-w { font-family: var(--font-display); font-size: 1rem; color: #fde68a; }
.ex-flip-b .ex-part-chip { align-self: flex-start; background: rgba(255,255,255,.18); color: #fff; }
.ex-instead { font-size: .72rem; color: var(--ink-faint); font-weight: 600; }
.ex-instead s { color: #b4473b; text-decoration-thickness: 1.5px; }
.ex-mean { font-weight: 800; }
.ex-use-s { opacity: .92; font-style: italic; }
.ex-use-s b { color: #fde68a; font-style: normal; }
.ex-flip.mastered .ex-flip-f { border-color: #86d3a3; }
.ex-mastered { font-size: .7rem; font-weight: 900; color: var(--ok); }
.ex-fc-tag { font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; }

/* toolkit tabs: All shows every box; any other tab shows one */
.ex-kit-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-kit:not([data-show="all"]) .ex-kbox { display: none; }
.ex-kit[data-show="vocab"] .ex-kbox.vocab, .ex-kit[data-show="coh"] .ex-kbox.coh, .ex-kit[data-show="sym"] .ex-kbox.sym,
.ex-kit[data-show="fig"] .ex-kbox.fig, .ex-kit[data-show="magic"] .ex-kbox.magic { display: block; }

/* cohesion */
.ex-coh-list { display: grid; gap: 8px; }
.ex-coh { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 9px 12px; }
.ex-coh-chip { display: inline-block; font-weight: 800; font-size: .78rem; color: var(--g); background: color-mix(in srgb, var(--g) 12%, #fff); border: 1px solid color-mix(in srgb, var(--g) 35%, #fff); border-radius: 8px; padding: 3px 9px; }
.ex-coh-chip.big { font-size: .9rem; padding: 6px 12px; text-align: center; }
.ex-coh-g { font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.ex-coh-u { font-size: .9rem; }
.ex-coh-u b { background: linear-gradient(transparent 60%, #c7f0de 60%); }

/* symbols */
.ex-sym-cards { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.ex-sym-card { background: #fff; border: 1px solid #d8ecd0; border-radius: 14px; padding: 12px 14px; }
.ex-sym-card.main { border: 2px solid #5fae58; background: #f6fbf3; }
.ex-sym-o { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-sym-why { margin: 6px 0; font-size: .82rem; color: var(--ink-soft); }
.ex-sym-card ol { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; display: grid; gap: 4px; }
.ex-sym-card li b { color: #2f7a3a; margin-right: 4px; }

/* figurative */
.ex-fig-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ex-fig { position: relative; background: #fff; border: 1px solid #f3dfb1; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ex-fig-d { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #a16207; }
.ex-fig p { margin: 0; font-family: Georgia, serif; font-size: .98rem; line-height: 1.45; }
.ex-fig .ex-part-chip { align-self: flex-start; }

/* magic lines */
.ex-magic-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ex-magic { margin: 0; background: linear-gradient(135deg, #1f1442, #3b1f7a); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 24px -14px rgba(59,31,122,.9); }
.ex-magic figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-magic figcaption .ex-part-chip { background: rgba(255,255,255,.15); color: #fff; }
.ex-magic .ex-speak { margin-left: auto; background: rgba(255,255,255,.15); color: #fff; }
.ex-magic blockquote { margin: 10px 0 6px; font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.45; color: #fdf6dd; }
.ex-magic p { margin: 0; font-size: .8rem; color: #cfc2f0; }
.ex-tips { margin-top: 14px; background: #fff; border-radius: 14px; border: 1px dashed #d9b8e8; padding: 10px 16px; }
.ex-tips .ex-label { margin-top: 4px; color: #7e22ce; }
.ex-tips ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }

/* ---------- a part of the format ---------------------------------------------------------------------------------- */
.ex-part { --c: var(--hue); }
.ex-part-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 3px solid var(--c); padding-bottom: 8px; }
.ex-part-h h2 { margin: 0; font-size: 1.35rem; }
.ex-chant { background: var(--c); color: #fff; font-weight: 900; font-size: .74rem; letter-spacing: .14em; padding: 4px 10px; border-radius: 6px; }
.ex-len { margin-left: auto; font-size: .78rem; color: var(--ink-faint); font-weight: 700; }
.ex-part-tip { margin: 12px 0 4px; font-size: .9rem; color: var(--ink); background: color-mix(in srgb, var(--c) 7%, #fff); border-radius: 10px; padding: 8px 12px; }
.ex-rows { display: grid; }
.ex-row { display: grid; grid-template-columns: 150px 1fr 230px; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.ex-row:last-child { border-bottom: 0; }
.ex-row-sub { font-weight: 900; font-size: .86rem; color: var(--c); }
.ex-row-sub small { display: block; font-weight: 600; color: var(--ink-faint); font-size: .74rem; }
.ex-row-pts ul { margin: 0; padding-left: 18px; }
.ex-row-pts li { margin: 0 0 6px; font-size: .94rem; line-height: 1.5; transition: filter .2s; outline: none; }
.ex-row-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ex-chip { display: inline-block; font-size: .72rem; line-height: 1.25; padding: 3px 8px; border-radius: 7px; margin: 0 4px 3px 0; }
.ex-chip.t { background: #efe7fb; color: var(--accent-ink); border: 1px solid #dcc9f3; }
.ex-chip.f { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid #ecd9a3; }
.ex-none { font-size: .74rem; color: var(--ink-faint); }
.ex-chips-wrap { display: flex; flex-wrap: wrap; }
.ex-dropin { margin-top: 14px; border-radius: 16px; padding: 12px 16px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1.5px dashed color-mix(in srgb, var(--c) 45%, #fff); display: grid; gap: 8px; }
.ex-dropin-h { font-weight: 900; font-size: .8rem; letter-spacing: .04em; color: var(--c); }
.ex-dropin-magic { font-family: Georgia, serif; font-size: 1rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ex-dropin-line { font-size: .9rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ex-dropin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-dropin-gem { font-size: .92rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ex-tag.pearl { background: linear-gradient(135deg, #fdfbff, #e9e4ff 45%, #ffe9f3); color: #3b1f7a; box-shadow: inset 0 0 0 1px #d9cff7; text-transform: none; letter-spacing: 0; }

/* ---- Pearls box: one per plan --------------------------------------------------------------------------- */
.ex-pearlbox { display: grid; gap: 14px; }
.ex-pearlbox-h { display: flex; gap: 14px; align-items: flex-start; border-radius: 20px; padding: 18px 20px; color: #2a1659;
  background: radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #f3eeff 35%, #ffe8f2 70%, #e5f6ff 100%);
  border: 1px solid #ddd2f7; box-shadow: 0 14px 30px -20px rgba(59,31,122,.55), inset 0 1px 0 #fff; }
.ex-pearlbox-i { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(91,60,170,.35)); }
.ex-pearlbox-t { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.28rem; line-height: 1.3; color: #2a1659; }
.ex-pearlbox-h p { margin: 0; font-size: .88rem; color: #5b4a86; }
.ex-gem-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ex-gem { margin: 0; position: relative; border-radius: 18px; padding: 14px 16px 12px; background: #fff; border: 1px solid #e4dcf8;
  box-shadow: 0 10px 22px -18px rgba(59,31,122,.7); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ex-gem::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #c9b8ff, #ffc6de, #b8e6ff, #c9b8ff); }
.ex-gem figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-gem .ex-speak { margin-left: auto; }
.ex-gem-p { font-size: .76rem; font-weight: 800; color: #3b1f7a; background: #f3eeff; border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.ex-gem-p:hover, .ex-gem-p:focus-visible { background: #e6dcff; text-decoration: underline; }
.ex-gem blockquote { margin: 0; font-family: Georgia, serif; font-size: 1.06rem; line-height: 1.5; color: #1f1442; transition: filter .2s; }
.ex-gem-rule { font-size: .78rem; color: var(--ink-soft); background: #faf8ff; border-radius: 10px; padding: 6px 10px; }
.ex-gem-why { margin: 0; font-size: .8rem; font-weight: 600; color: #7a5a12; }
.ex-stage.recall .ex-gem blockquote:not(.shown) { filter: blur(6px); cursor: pointer; user-select: none; }
.ex-vocab-chip { font-weight: 800; font-size: .8rem; color: #312e81; background: #eef2ff; border: 1px solid #cdd5fb; border-radius: 8px; padding: 3px 9px; cursor: help; }

/* Recall mode: hide the content, keep the cues; tap to check yourself. */
.ex-stage.recall .ex-row-pts li:not(.shown) { filter: blur(6px); cursor: pointer; user-select: none; }
.ex-stage.recall .ex-row-pts li:not(.shown):hover { filter: blur(4px); }
.ex-stage.recall .ex-skel-row:not(.shown) .ex-skel-t { filter: blur(7px); }
.ex-stage.recall .ex-mini-skel span, .ex-stage.recall .ex-stand-big, .ex-stage.recall .ex-tl p { filter: blur(6px); transition: filter .2s; }
.ex-stage.recall .ex-stand-big:hover, .ex-stage.recall .ex-tl p:hover, .ex-stage.recall .ex-mini-skel > div:hover span { filter: none; }

/* recap */
.ex-skel { display: grid; gap: 6px; }
.ex-skel-row { display: grid; grid-template-columns: 110px 1fr; gap: 0; border: 0; padding: 0; background: #fff; border-radius: 12px; overflow: hidden; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 1px 0 var(--line); }
.ex-skel-c { background: var(--c); color: #fff; font-weight: 900; letter-spacing: .1em; font-size: .72rem; display: grid; place-items: center; text-align: center; padding: 8px 4px; }
.ex-skel-c small { display: block; font-weight: 600; letter-spacing: 0; opacity: .85; font-size: .66rem; }
.ex-skel-t { padding: 10px 14px; font-size: .94rem; background: color-mix(in srgb, var(--c) 6%, #fff); transition: filter .2s; }
.ex-twists { display: grid; gap: 6px; }
.ex-twists > div { display: grid; grid-template-columns: 230px 1fr; gap: 12px; padding: 9px 14px; background: var(--line-soft); border-radius: 10px; font-size: .88rem; }

/* pager + capsules */
.ex-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.ex-pager-mid { font-size: .8rem; color: var(--ink-faint); font-weight: 700; text-align: center; }
.ex-locked { text-align: center; font-size: .86rem; color: var(--ink-faint); margin: 8px 0 22px; }
.ex-capsules { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 30px; }
.ex-capsule { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 900; font-size: 1rem; text-decoration: none;
  background: #fff; color: var(--accent-ink); border: 2px solid var(--accent-ink); transition: transform .15s, box-shadow .15s; }
.ex-capsule:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(59,31,122,.8); }
.ex-capsule.primary { background: linear-gradient(135deg, #3b1f7a, #6d35c9); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -10px rgba(59,31,122,.85); }

/* ---------- quiz ------------------------------------------------------------------------------------------------ */
.ex-quiz, .ex-drill { max-width: 760px; margin: 0 auto; }
.ex-quiz-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-quiz-n { font-size: .8rem; font-weight: 800; color: var(--ink-faint); }
.ex-quiz-bar { flex: 1 1 140px; height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.ex-quiz-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #d4a017); border-radius: 999px; transition: width .3s; }
.ex-quiz-q { font-size: 1.12rem; line-height: 1.45; margin-bottom: 14px; font-weight: 600; }
.ex-quiz-opts { display: grid; gap: 8px; }
.ex-opt { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; font-size: .95rem; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.ex-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.ex-opt-l { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--line-soft); font-weight: 900; font-size: .8rem; flex: none; }
.ex-opt.right { border-color: var(--ok); background: var(--ok-soft); }
.ex-opt.right .ex-opt-l { background: var(--ok); color: #fff; }
.ex-opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.ex-opt.wrong .ex-opt-l { background: var(--bad); color: #fff; }
.ex-opt:disabled { cursor: default; }
.ex-quiz-fb { margin-top: 12px; padding: 12px 14px; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .9rem; }
.ex-quiz-fb.ok { background: var(--ok-soft); }
.ex-quiz-fb.no { background: var(--bad-soft); }
.ex-quiz-fb .btn { margin-left: auto; }
.ex-quiz-done, .ex-drill-done { text-align: center; padding: 18px 10px; display: grid; justify-items: center; gap: 6px; }
.ex-quiz-done h3, .ex-drill-done h3 { margin: 8px 0 0; font-size: 1.3rem; }

/* ---------- drill flashcard -------------------------------------------------------------------------------------- */
.ex-fc { perspective: 1400px; border: 0; padding: 0; background: none; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.ex-fc-in { display: grid; transition: transform .55s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; min-height: 260px; }
.ex-fc.flipped .ex-fc-in { transform: rotateY(180deg); }
.ex-fc-side { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; padding: 26px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ex-fc-side.f { background: #fff; border: 2px solid #ddd2f3; box-shadow: 0 18px 40px -22px rgba(59,31,122,.6); }
.ex-fc-side.b { transform: rotateY(180deg); background: linear-gradient(145deg, #241650, #3b1f7a); color: #fff; box-shadow: 0 18px 40px -22px rgba(59,31,122,.9); }
.ex-fc-front { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--accent-ink); line-height: 1.2; }
.ex-fc-front.small { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.ex-fc-front i { font-size: .9rem; color: var(--ink-faint); font-weight: 600; }
.ex-fc-hint { color: var(--ink-soft); font-size: .9rem; }
.ex-fc-cta { margin-top: 10px; font-size: .78rem; font-weight: 800; color: var(--ink-faint); letter-spacing: .02em; }
.ex-fc-back { font-size: 1.1rem; font-weight: 700; line-height: 1.45; max-width: 56ch; }
.ex-fc-back.serif { font-family: Georgia, serif; font-weight: 600; font-size: 1.2rem; color: #fdf6dd; }
.ex-fc-sig { font-size: .86rem; opacity: .9; }
.ex-fc-ex { font-family: Georgia, serif; font-style: italic; font-size: .95rem; opacity: .92; max-width: 60ch; }
.ex-fc-ex b { color: #fde68a; font-style: normal; }
.ex-fc-x { font-size: .82rem; opacity: .78; max-width: 60ch; }
.ex-fc-q { font-size: .82rem; opacity: .85; font-style: italic; }
.ex-fc-q-on-back { font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #c9b8f2; }
.ex-fc-ol { text-align: left; margin: 0; padding-left: 20px; font-size: .95rem; display: grid; gap: 6px; }
.ex-flip-b .ex-fc-sig, .ex-flip-b .ex-fc-x, .ex-flip-b .ex-fc-q { font-size: .78rem; }
.ex-grade { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; }
.ex-grade > span { width: 100%; text-align: center; font-size: .82rem; color: var(--ink-faint); font-weight: 700; }
.ex-g { border: 0; border-radius: 12px; padding: 10px 18px; font: inherit; font-weight: 900; cursor: pointer; color: #fff; min-width: 90px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ex-g small { font-weight: 600; font-size: .66rem; opacity: .85; }
.ex-g.again { background: #c03a3a; } .ex-g.hard { background: #d0612a; } .ex-g.good { background: #1f8a4c; } .ex-g.easy { background: #2563eb; }
.ex-g:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- pearls decks ---------------------------------------------------------------------------------------- */
.ex-deck-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ex-deck { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  text-decoration: none; color: var(--ink); box-shadow: var(--soft-shadow); transition: transform .15s; }
.ex-deck:hover { transform: translateY(-3px); }
.ex-deck b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.ex-deck span { font-size: .82rem; color: var(--ink-soft); }
.ex-deck-i { font-size: 1.8rem; line-height: 1; grid-row: span 2; }
.ex-deck-n { grid-column: 2; font-weight: 800; font-size: .74rem !important; color: var(--accent-ink) !important; }
.ex-deck-bar { grid-column: 1 / -1; height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.ex-deck-bar span { display: block; height: 100%; background: linear-gradient(90deg, #1f8a4c, #6cc58d); }
.ex-deck-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; }
.ex-deck-head .btn { margin-left: auto; }
.ex-deck-head .ex-deck-i { font-size: 2.4rem; }

/* ---------- articles -------------------------------------------------------------------------------------------- */
.ex-art { padding: 26px 30px; max-width: 980px; border-radius: 20px; }
.ex-art-title { margin: 10px 0 6px; font-size: 2.2rem; line-height: 1.1; }
.ex-dek { font-family: Georgia, serif; font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 6px; max-width: 62ch; }
.ex-byline { margin: 0 0 14px; font-size: .78rem; color: var(--ink-faint); }
.ex-art-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ex-toggle { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; padding: 7px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.ex-toggle:hover { background: var(--line-soft); }
.ex-legend-hl { font-size: .8rem; color: var(--ink-faint); margin: -4px 0 12px; }
.ex-body { display: grid; }
.ex-para { display: grid; grid-template-columns: 0 1fr; }
.ex-para p { margin: 0 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; line-height: 1.75; max-width: 66ch; }
.ex-para-side { overflow: hidden; }
.ex-body.annotated .ex-para { grid-template-columns: 230px 1fr; gap: 20px; }
.ex-body.annotated .ex-para-side { overflow: visible; padding-top: 4px; }
.ex-body.annotated .ex-para p { border-left: 3px solid color-mix(in srgb, var(--c) 40%, #fff); padding-left: 14px; }
.ex-para-label { font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--c); border-top: 3px solid var(--c); padding-top: 4px; margin-bottom: 6px; }
.ex-body mark { background: none; color: inherit; }
.ex-body.hl-on mark.hl-v, .ex-legend-hl mark.hl-v { background: #e0e7ff; color: #312e81; border-radius: 4px; padding: 0 2px; cursor: help; font-weight: 700; }
.ex-body.hl-on mark.hl-c, .ex-legend-hl mark.hl-c { background: #d1fae5; color: #065f46; border-radius: 4px; padding: 0 2px; cursor: help; font-weight: 700; }
.ex-notice { margin: 4px 0 14px; padding-left: 20px; }
.ex-notice li { margin-bottom: 4px; font-size: .92rem; }
.ex-block { margin: 28px 0; }
.ex-block h2 { font-size: 1.25rem; margin: 0 0 12px; }

/* ---------- small screens -------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ex-hero { grid-template-columns: 1fr; }
  .ex-sym-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ex-hero { padding: 20px 18px; border-radius: 18px; }
  .ex-hero h2 { font-size: 1.35rem; }
  .ex-two, .ex-timeline { grid-template-columns: 1fr; }
  .ex-timeline::before { display: none; }
  .ex-row { grid-template-columns: 1fr; gap: 6px; }
  .ex-row-tags { flex-direction: row; flex-wrap: wrap; }
  .ex-coh { grid-template-columns: 1fr; }
  .ex-twists > div { grid-template-columns: 1fr; gap: 4px; }
  .ex-body.annotated .ex-para { grid-template-columns: 1fr; gap: 0; }
  .ex-body.annotated .ex-para p { padding-left: 10px; }
  .ex-title { font-size: 1.45rem; }
  .ex-plan-head { padding: 14px; }
  .ex-stage { padding: 16px 14px; }
  .ex-art { padding: 18px 16px; }
  .ex-art-title { font-size: 1.6rem; }
  .ex-capsule { width: 100%; justify-content: center; }
  .ex-stand-big { font-size: 1.18rem; }
  .ex-fc-front { font-size: 1.35rem; }
  .ex-skel-row { grid-template-columns: 84px 1fr; }
  .ex-flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-flip-grid .ex-flip-in { height: 150px; }
  .ex-flip-grid .ex-flip-b { font-size: .8rem; padding: 10px; }
  .ex-flip-f b { font-size: 1.05rem; }
  .ex-kbox { padding: 14px 12px; }
  .ex-pearlbox-h { padding: 14px; gap: 10px; }
  .ex-pearlbox-i { font-size: 1.7rem; }
  .ex-pearlbox-t { font-size: 1.08rem; }
  .ex-gem-list { grid-template-columns: 1fr; }
  .ex-kit-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ex-kit-tabs .ex-pill { white-space: nowrap; }
  .ex-nav-top { width: 100%; justify-content: space-between; }
  .ex-navlink { padding: 8px 10px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-flip-in, .ex-fc-in, .ex-card, .ex-stage, .ex-ring .fg { transition: none !important; animation: none !important; }
}

/* ---- a student's Exemplars progress on the coach's student page (2026-10-22) ---- */
.ex-coachview .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ex-coachview h4 { margin: 18px 0 8px; font-size: .95rem; }
.ex-cv-stats { margin-top: 12px; grid-template-columns: repeat(5, 1fr); }
.ex-cv-stats .ex-stat { background: linear-gradient(135deg, #f6f1ff, #fff); border-color: var(--lilac); color: var(--accent-ink); backdrop-filter: none; }
.ex-cv-stats .ex-stat span { color: var(--ink-soft); }
.ex-cv-list { display: grid; gap: 4px; }
.ex-cv-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 10px; color: inherit; text-decoration: none; font-size: .9rem; }
.ex-cv-row:hover { background: #faf8ff; }
.ex-cv-m { font-size: .78rem; color: var(--ink-faint); }
.ex-cv-q { font-size: .82rem; }
.ex-cv-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 22px; }
.ex-cv-deck { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(64px, auto); gap: 10px; align-items: center; font-size: .84rem; }
.ex-cv-deck > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-cv-deck .ex-deck-bar { grid-column: auto; }
.ex-cv-deck .faint { text-align: right; font-size: .76rem; }
@media (max-width: 760px) {
  .ex-cv-row { grid-template-columns: auto 1fr; }
  .ex-cv-m, .ex-cv-q { grid-column: 2; }
  .ex-cv-stats { grid-template-columns: repeat(2, 1fr); }
  .ex-cv-decks { grid-template-columns: 1fr; }
  .ex-cv-deck { grid-template-columns: minmax(0, 1fr) 60px auto; }
}