/* E-Maktab UI on top of Pico 2.1.1 (static/vendor/pico.min.css). Mobile first.
   Every class here is described in docs/UI.md; the live examples are on /ui/ (DEBUG only). */

/* ---------- 1. Tokens: one brand color (teal), warm neutrals, light + dark ---------- */

:root {
  --pico-border-radius: .5rem;
  --pico-font-size: 100%;
  --em-radius-lg: .875rem;
}
@media (min-width: 768px) { :root { --pico-font-size: 106.25%; } }
@media (min-width: 1280px) { :root { --pico-font-size: 112.5%; } }

/* Same selectors as Pico's theme blocks, so these win by order. */
:root:not([data-theme=dark]) {
  --pico-background-color: #faf8f4;
  --pico-color: #2b3030;
  --pico-h1-color: #172322;
  --pico-h2-color: #1d2928;
  --pico-h3-color: #243130;
  --pico-h4-color: #2b3030;
  --pico-h5-color: #2b3030;
  --pico-h6-color: #2b3030;
  --pico-muted-color: #5c6563;
  --pico-muted-border-color: #e7e2d9;
  --pico-primary: #0f766e;
  --pico-primary-background: #0f766e;
  --pico-primary-border: #0f766e;
  --pico-primary-underline: rgba(15, 118, 110, .4);
  --pico-primary-hover: #0a5751;
  --pico-primary-hover-background: #0b625b;
  --pico-primary-hover-border: #0b625b;
  --pico-primary-hover-underline: #0a5751;
  --pico-primary-focus: rgba(15, 118, 110, .7);  /* P1: ≥ 3:1 against the page, focus rings must be seen */
  --pico-primary-inverse: #fff;
  --pico-secondary: #58615f;
  --pico-secondary-background: #58615f;
  --pico-secondary-border: #58615f;
  --pico-secondary-underline: rgba(88, 97, 95, .4);
  --pico-secondary-hover: #434b49;
  --pico-secondary-hover-background: #434b49;
  --pico-secondary-hover-border: #434b49;
  --pico-secondary-hover-underline: #434b49;
  --pico-secondary-focus: rgba(88, 97, 95, .3);
  --pico-secondary-inverse: #fff;
  --pico-card-background-color: #fff;
  --pico-card-border-color: #ebe6dd;
  --pico-card-sectioning-background-color: #fbfaf7;
  --pico-card-box-shadow: 0 1px 2px rgba(41, 37, 36, .05), 0 4px 14px rgba(41, 37, 36, .05);
  --pico-form-element-background-color: #fff;
  --pico-form-element-active-background-color: #fff;
  --pico-form-element-border-color: #cfc8bc;
  --pico-form-element-selected-background-color: #e3f1ef;
  --pico-dropdown-background-color: #fff;
  --pico-dropdown-border-color: #e7e2d9;
  --pico-dropdown-hover-background-color: #f2efe9;
  --pico-progress-background-color: #e9e4db;
  --pico-mark-background-color: #fbe7b5;
  --pico-mark-color: #2b2006;
  --pico-ins-color: #1b6b45;
  --pico-del-color: #b42318;
  --pico-modal-overlay-background-color: rgba(43, 40, 34, .45);

  --em-text: #2b3030;          /* = --pico-color, which Pico reassigns inside links and buttons */
  --em-soft: #e6f2f0;          /* primary tint: selected, active, avatar */
  --em-ok: #1b6b45;
  --em-ok-bg: #e9f5ee;
  --em-ok-border: #a7d6bc;
  --em-bad: #b42318;
  --em-bad-bg: #fdeeec;
  --em-bad-border: #f1b9b1;
  --em-warn: #8a4b00;
  --em-warn-bg: #fdf3dc;
  --em-warn-border: #edcd88;
  --em-info: #0f766e;
  --em-info-bg: #e9f4f2;
  --em-info-border: #a6d4cd;
  --em-flag: #d97706;          /* flagged-question dot (not text) */
  --em-bar-shadow: 0 -2px 12px rgba(41, 37, 36, .07);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: #121615;
    --pico-color: #d3d9d7;
    --pico-h1-color: #f1f5f4;
    --pico-h2-color: #e7ecea;
    --pico-h3-color: #dce2e0;
    --pico-h4-color: #d3d9d7;
    --pico-h5-color: #d3d9d7;
    --pico-h6-color: #d3d9d7;
    --pico-muted-color: #9aa4a1;
    --pico-muted-border-color: #28302e;
    --pico-primary: #5ccbbd;
    --pico-primary-background: #0f766e;
    --pico-primary-border: #0f766e;
    --pico-primary-underline: rgba(92, 203, 189, .45);
    --pico-primary-hover: #8fdfd4;
    --pico-primary-hover-background: #12857c;
    --pico-primary-hover-border: #12857c;
    --pico-primary-hover-underline: #8fdfd4;
    --pico-primary-focus: rgba(92, 203, 189, .75);
    --pico-primary-inverse: #fff;
    --pico-secondary: #a6afac;
    --pico-secondary-background: #4a5350;
    --pico-secondary-border: #4a5350;
    --pico-secondary-underline: rgba(166, 175, 172, .45);
    --pico-secondary-hover: #c6cecb;
    --pico-secondary-hover-background: #59635f;
    --pico-secondary-hover-border: #59635f;
    --pico-secondary-hover-underline: #c6cecb;
    --pico-secondary-focus: rgba(166, 175, 172, .3);
    --pico-secondary-inverse: #fff;
    --pico-card-background-color: #1a1f1e;
    --pico-card-border-color: #252c2a;
    --pico-card-sectioning-background-color: #1e2423;
    --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --pico-form-element-background-color: #1c2221;
    --pico-form-element-active-background-color: #1a1f1e;
    --pico-form-element-border-color: #3a4441;
    --pico-form-element-selected-background-color: #1f3a37;
    --pico-dropdown-background-color: #1d2322;
    --pico-dropdown-border-color: #2e3634;
    --pico-dropdown-hover-background-color: #262e2c;
    --pico-progress-background-color: #2b3331;
    --pico-mark-background-color: #5a4310;
    --pico-mark-color: #fff4d6;
    --pico-ins-color: #6fcf9c;
    --pico-del-color: #f19a90;
    --pico-modal-overlay-background-color: rgba(4, 7, 6, .7);

    --em-text: #d3d9d7;
    --em-soft: #173432;
    --em-ok: #7dd3a5;
    --em-ok-bg: #15291f;
    --em-ok-border: #2b5a41;
    --em-bad: #f4a59b;
    --em-bad-bg: #2d1714;
    --em-bad-border: #6b2d25;
    --em-warn: #f0c36a;
    --em-warn-bg: #2a2211;
    --em-warn-border: #6b5322;
    --em-info: #7fd5ca;
    --em-info-bg: #11292a;
    --em-info-border: #275552;
    --em-flag: #f0a53a;
    --em-bar-shadow: 0 -2px 12px rgba(0, 0, 0, .35);
  }
}

/* ---------- 2. Base ---------- */

body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-wrap: break-word; }
body > main { flex: 1 0 auto; width: 100%; }
h1 { --pico-font-size: 1.75rem; --pico-typography-spacing-top: 2rem; letter-spacing: -.01em; }
h1, h2 { text-wrap: balance; }
h2 { --pico-font-size: 1.375rem; }
h3 { --pico-font-size: 1.125rem; }
@media (min-width: 768px) { h1 { --pico-font-size: 2rem; } }
article { border: 1px solid var(--pico-card-border-color); border-radius: var(--em-radius-lg); }
:where(button, [role=button], [type=submit], [type=button]) { min-height: 2.75rem; }  /* 44px tap targets */

.icon { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.muted { color: var(--pico-muted-color); }
.narrow { max-width: 34rem; margin-inline: auto; }
.readable { max-width: 44rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 1000; top: -4rem; left: 1rem; padding: .75rem 1rem;
  border-radius: var(--pico-border-radius); background: var(--pico-primary-background); color: var(--pico-primary-inverse);
}
.skip-link:focus { top: .5rem; }
main:focus { outline: none; }

/* ---------- 3. Header, app navigation, footer ---------- */

body > .site-header { padding-block: 0; border-bottom: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); }
.header-row { display: flex; align-items: center; gap: .5rem; min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; color: var(--pico-h1-color); font-size: 1.125rem; font-weight: 800; text-decoration: none; }
.brand:hover { color: var(--pico-h1-color); }
.brand svg { width: 2rem; height: 2rem; flex: none; }

.lang-switch { display: flex; margin: 0; padding: 2px; border: 1px solid var(--pico-form-element-border-color); border-radius: 999px; }
/* Pico styles submit buttons through variables at higher specificity; plain properties win here. */
.lang-switch button {
  width: auto; margin: 0; padding: .25rem .75rem; border-color: transparent; border-radius: 999px;
  background-color: transparent; color: var(--pico-muted-color); font-size: .875rem;
}
.lang-switch button:is(:hover, :focus-visible) { background-color: var(--pico-dropdown-hover-background-color); color: var(--em-text); }
.lang-switch button[aria-current=true] { background-color: var(--em-soft); color: var(--pico-primary); font-weight: 700; }
.lang-switch .lang-long { display: none; }
@media (min-width: 420px) {
  .lang-switch .lang-long { display: inline; }
  .lang-switch .lang-short { display: none; }
}
.header-login { padding: .5rem; font-weight: 600; text-decoration: none; }

/* User menu: Pico's <details class="dropdown"> (its summary::before closes it on an outside click). */
details.dropdown.user-menu { margin: 0; }
details.dropdown.user-menu > summary {
  display: flex; align-items: center; gap: .5rem; height: auto; min-height: 2.75rem;
  padding: .25rem .375rem; border: 0; border-radius: 999px; background: none; color: var(--pico-color);
}
details.dropdown.user-menu > summary:hover { background: var(--pico-dropdown-hover-background-color); }
details.dropdown.user-menu > summary + ul { left: auto; right: 0; min-width: 15rem; }
details.dropdown.user-menu > summary + ul li.menu-head { color: var(--pico-muted-color); font-size: .875rem; }
details.dropdown.user-menu form { margin: 0; }
details.dropdown.user-menu .btn-link { width: 100%; color: var(--pico-dropdown-color); text-align: left; text-decoration: none; }
.avatar {
  display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--em-soft); color: var(--pico-primary); font-weight: 700;
}
.user-name { display: none; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .user-name { display: inline; } }

/* Teacher navigation: bottom tab bar on phones, a row under the header from 768px. */
.appnav {
  position: fixed; z-index: 50; right: 0; bottom: 0; left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); box-shadow: var(--em-bar-shadow);
}
.appnav .container { display: flex; }
.appnav a {
  position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center;
  gap: .125rem; min-width: 0; min-height: 3.5rem; padding: .375rem .125rem;
  color: var(--pico-muted-color); font-size: .6875rem; line-height: 1.2; text-align: center; text-decoration: none;
}
.appnav a:hover { color: var(--em-text); }
.appnav .icon { width: 1.5rem; height: 1.5rem; }
.appnav a[aria-current=page] { color: var(--pico-primary); font-weight: 700; }
.appnav a[aria-current=page]::before {
  content: ""; position: absolute; top: 0; right: 28%; left: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--pico-primary);
}
body:has(.appnav) { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .appnav { position: static; padding: 0; border: 0; box-shadow: none; }
  .appnav .container { gap: .25rem; }
  .appnav a { flex: none; flex-direction: row; gap: .5rem; min-height: 3rem; padding: .5rem .875rem; font-size: .9375rem; }
  .appnav a:hover { background: var(--pico-dropdown-hover-background-color); }
  .appnav .icon { width: 1.25rem; height: 1.25rem; }
  .appnav a[aria-current=page]::before { top: auto; right: .5rem; bottom: 0; left: .5rem; border-radius: 3px 3px 0 0; }
  body:has(.appnav) { padding-bottom: 0; }
}

.messages { margin-bottom: var(--pico-spacing); }
body > .site-footer { margin-top: 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); font-size: .875rem; }
.site-footer p { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }

/* ---------- 4. Layout and text components ---------- */

.page-head { margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .375rem; }
.page-head p { margin-bottom: 0; color: var(--pico-muted-color); font-size: 1.0625rem; }
/* Pico adds a top margin to a heading after a <p>; not after these labels. */
.eyebrow + :is(h1, h2, h3), .error-code + h1 { margin-top: 0; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-bottom: .5rem; color: var(--pico-primary); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-bottom: var(--pico-spacing); }
.cards > article { margin: 0; }

/* Buttons: primary = Pico default, secondary = .outline. On phones .actions stacks them full width. */
.actions { display: flex; flex-direction: column; gap: .75rem; margin-block: var(--pico-spacing); }
.actions > *, .actions > form > button { width: 100%; margin: 0; }
.actions > form { margin: 0; }
@media (min-width: 576px) {
  .actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .actions > *, .actions > form > button { width: auto; }
}
.btn-link {
  width: auto; min-height: 0; margin: 0; padding: 0; border-color: transparent; background-color: transparent;
  color: var(--pico-primary); text-decoration: underline; text-underline-offset: .15em;
}
.btn-link:is(:hover, :active, :focus) { color: var(--pico-primary-hover); }

.meter { margin-bottom: var(--pico-spacing); }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .375rem; color: var(--pico-muted-color); font-size: .875rem; }
.meter-count { color: var(--pico-color); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter progress { height: .625rem; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: var(--pico-spacing); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.stat { padding: 1rem; border: 1px solid var(--pico-card-border-color); border-radius: var(--em-radius-lg); background: var(--pico-card-background-color); }
.stat-value { display: block; color: var(--pico-h1-color); font-size: 1.75rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: .25rem; color: var(--pico-muted-color); font-size: .875rem; }

.result-list { margin: 0 0 var(--pico-spacing); padding: 0; }
.result-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--pico-muted-border-color); list-style: none;
}
.result-name { font-weight: 600; }
.result-count { color: var(--pico-muted-color); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-row progress { grid-column: 1 / -1; margin: 0; }
.result-row.is-low progress { --pico-progress-color: var(--em-warn); }
.result-row .result-note { grid-column: 1 / -1; color: var(--pico-muted-color); font-size: .875rem; }

.badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .0625rem .5rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 999px; background: transparent;
  color: var(--pico-muted-color); font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle;
}
.badge-done { border-color: var(--em-ok-border); background: var(--em-ok-bg); color: var(--em-ok); }
.badge-open { border-color: var(--em-info-border); background: var(--em-info-bg); color: var(--em-info); }
.badge-demo { border-color: var(--em-warn-border); background: var(--em-warn-bg); color: var(--em-warn); letter-spacing: .04em; }
.badge-repeat { background: var(--pico-progress-background-color); color: var(--pico-color); }

.alert {
  margin-bottom: var(--pico-spacing); padding: .875rem 1rem;
  border: 1px solid var(--em-info-border); border-left: .25rem solid var(--em-info); border-radius: var(--pico-border-radius);
  background: var(--em-info-bg); color: var(--pico-color);
}
.alert > :last-child { margin-bottom: 0; }
.alert-success { border-color: var(--em-ok-border); border-left-color: var(--em-ok); background: var(--em-ok-bg); }
.alert-warning { border-color: var(--em-warn-border); border-left-color: var(--em-warn); background: var(--em-warn-bg); }
.alert-error { border-color: var(--em-bad-border); border-left-color: var(--em-bad); background: var(--em-bad-bg); }

.empty { margin-bottom: var(--pico-spacing); padding: 2.5rem 1.25rem; border: 1px dashed var(--pico-form-element-border-color); border-radius: var(--em-radius-lg); background: var(--pico-card-background-color); text-align: center; }
.empty .empty-icon { display: block; width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--pico-primary); stroke-width: 1.5; }
.empty :is(h1, h2) { --pico-font-size: 1.375rem; margin-bottom: .5rem; }
.empty p { max-width: 30rem; margin-inline: auto; color: var(--pico-muted-color); }
.empty .actions { justify-content: center; margin-bottom: 0; }
.empty .error-code { margin-bottom: .25rem; color: var(--pico-primary); font-size: 3rem; font-weight: 800; line-height: 1; }

.loading { display: flex; align-items: center; justify-content: center; min-height: 6rem; color: var(--pico-muted-color); }

/* ---------- 5. Test and practice components ---------- */

.save-state { display: inline-flex; align-items: center; min-height: 1.5rem; margin: 0; color: var(--pico-muted-color); font-size: .875rem; }
.save-state > span { display: none; }
.save-state[data-state=saving] .save-saving,
.save-state[data-state=saved] .save-saved,
.save-state[data-state=error] .save-error { display: inline; }
.save-saved { color: var(--em-ok); }
.save-error { color: var(--em-bad); font-weight: 700; }
.save-error .btn-link { color: var(--em-bad); margin: -.75rem 0; padding: .75rem .25rem; font-weight: 700; }

.timer {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 999px;
  background: var(--em-soft); color: var(--pico-primary); font-weight: 700; font-variant-numeric: tabular-nums;
}
.timer-label { color: var(--pico-muted-color); font-size: .8125rem; font-weight: 500; }
.timer.is-low { background: var(--em-warn-bg); color: var(--em-warn); }
.timer.is-critical { background: var(--em-bad-bg); color: var(--em-bad); }

nav.qnav { display: block; }
nav.qnav ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .375rem; margin: 0 0 .75rem; padding: 0; }
nav.qnav li { margin: 0; padding: 0; list-style: none; }
.qnav-item {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; margin: 0; padding: 0;
  border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); color: var(--em-text); font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none;
}
.qnav-item:is(:hover, :focus) { border-color: var(--pico-primary); background: var(--pico-card-background-color); color: var(--em-text); }
.qnav-item.is-answered, .qnav-item.is-answered:is(:hover, :focus) { border-color: var(--pico-primary); background: var(--em-soft); color: var(--pico-primary); }
.qnav-item.is-flagged::after { content: ""; position: absolute; top: 3px; right: 3px; width: .5rem; height: .5rem; border-radius: 50%; background: var(--em-flag); }
.qnav-item[aria-current]:not([aria-current=false]) { box-shadow: 0 0 0 2px var(--pico-background-color), 0 0 0 4px var(--pico-primary); }
nav.qnav .qnav-legend, .qnav-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 var(--pico-spacing); padding: 0; color: var(--pico-muted-color); font-size: .8125rem; }
nav.qnav .qnav-legend li, .qnav-legend li { display: inline-flex; align-items: center; gap: .375rem; list-style: none; }
.qnav-legend .qnav-item { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; border-radius: .25rem; }
.qnav-legend .qnav-item.is-flagged::after { top: 2px; right: 2px; width: .375rem; height: .375rem; }

.feedback { margin-block: var(--pico-spacing); padding: 1rem; border: 1px solid var(--pico-muted-border-color); border-left-width: .25rem; border-radius: var(--em-radius-lg); }
.feedback[data-result=correct] { border-color: var(--em-ok-border); border-left-color: var(--em-ok); background: var(--em-ok-bg); }
.feedback[data-result=wrong] { border-color: var(--em-bad-border); border-left-color: var(--em-bad); background: var(--em-bad-bg); }
.feedback-title { margin-bottom: .375rem; font-weight: 800; }
.feedback-title > span { display: none; }
.feedback[data-result=correct] .feedback-correct { display: inline; color: var(--em-ok); }
.feedback[data-result=wrong] .feedback-wrong { display: inline; color: var(--em-bad); }
.feedback p { margin-bottom: 0; }
.feedback-note { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--pico-muted-border-color); }
.feedback-note strong { display: block; font-size: .875rem; }

dialog.confirm > article { max-width: 30rem; border-radius: var(--em-radius-lg); }
dialog.confirm > article > footer { display: flex; flex-direction: column-reverse; gap: .75rem; }
dialog.confirm > article > footer form { margin: 0; }
dialog.confirm > article > footer button { width: 100%; margin: 0; }
@media (min-width: 576px) {
  dialog.confirm > article > footer { flex-direction: row; justify-content: flex-end; }
  dialog.confirm > article > footer button { width: auto; }
}

/* ---------- 6. Forms ---------- */

.field-error { color: var(--pico-del-color); }
.field-error { display: block; margin: calc(var(--pico-spacing) * -.5) 0 .75rem; font-size: .875em; }
.helptext { margin: calc(var(--pico-spacing) * -.5) 0 var(--pico-spacing); color: var(--pico-muted-color); font-size: .875em; }
.choice-group .helptext, .choice-group + .helptext { margin-top: 0; }
.helptext ul { margin: 0; padding-left: 1.25rem; }
.helptext li { margin: 0; }

.form-section { margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid var(--pico-card-border-color); border-radius: var(--em-radius-lg); background: var(--pico-card-background-color); }
.form-section > h2 { --pico-font-size: 1.125rem; margin-bottom: .25rem; }
.form-section > h2 + p { margin-bottom: 1rem; color: var(--pico-muted-color); font-size: .9375rem; }
.form-section > :last-child { margin-bottom: 0; }

label.check { display: flex; align-items: flex-start; gap: .5rem; width: auto; }
label.check input { flex: none; margin: .15em 0 0; }

/* Radio cards: form choices (.choice) and single-choice answers (.q-option). */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .5rem; }
label.choice, label.q-option {
  display: flex; align-items: center; gap: .625rem; width: auto; min-height: 2.75rem; margin: 0; padding: .625rem .875rem;
  border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-form-element-background-color); cursor: pointer;
}
:is(label.choice, label.q-option) input { flex: none; margin: 0; }
:is(label.choice, label.q-option):hover { border-color: var(--pico-primary); }
:is(label.choice, label.q-option):has(:checked) { border-color: var(--pico-primary); background: var(--em-soft); box-shadow: inset 0 0 0 1px var(--pico-primary); }
:is(label.choice, label.q-option):has(:focus-visible) { box-shadow: 0 0 0 3px var(--pico-primary-focus); }
.choice-group.has-error .choices label { border-color: var(--pico-del-color); }

/* ---------- 7. Question (templates/learning/_question.html + static/js/question.js) ---------- */

.question { margin-bottom: var(--pico-spacing); }
.q-prompt { margin-bottom: 1rem; color: var(--pico-h2-color); font-size: 1.125rem; font-weight: 500; line-height: 1.55; }
.q-hint { margin-bottom: .75rem; color: var(--pico-muted-color); font-size: .875rem; }
.question[data-disabled] .q-hint { display: none; }
.q-options { display: grid; gap: .625rem; margin: 0; }
label.q-option { align-items: flex-start; padding: .875rem 1rem; line-height: 1.5; }
label.q-option input { margin-top: .15em; }
.question[data-disabled] label.q-option { cursor: default; }
.question[data-disabled] label.q-option:hover { border-color: var(--pico-form-element-border-color); }
.question[data-disabled] label.q-option:not(:has(:checked)) { opacity: .7; }
.question :is(input, select)[disabled] { opacity: 1; }

.q-match { display: grid; gap: .625rem; }
.q-match-row { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--pico-card-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); }
.q-match-left { margin: 0; font-weight: 600; }
.q-match-row select { margin: 0; }
.q-match-row select.is-dup { border-color: var(--em-warn); box-shadow: 0 0 0 1px var(--em-warn); }
@media (min-width: 768px) { .q-match-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem; } }
.q-warn { margin: .75rem 0 0; }

.q-order { display: grid; gap: .5rem; margin: 0; padding: 0; counter-reset: q-order; }
.q-order > li {
  display: flex; align-items: center; gap: .75rem; margin: 0; padding: .5rem .5rem .5rem .75rem; list-style: none; counter-increment: q-order;
  border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color);
}
.q-order > li::before {
  content: counter(q-order); display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--em-soft); color: var(--pico-primary); font-size: .875rem; font-weight: 700;
}
.q-order > li.is-moved { animation: q-flash .7s ease-out; }
@keyframes q-flash { from { background: var(--em-soft); } }
.q-order-text { flex: 1; min-width: 0; padding-block: .375rem; }
.q-order-btns { display: flex; flex: none; gap: .375rem; }
.q-order-btns button { width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; font-size: 1.125rem; line-height: 1; }
.q-accept { width: 100%; margin: .75rem 0 0; }
@media (min-width: 576px) { .q-accept { width: auto; } }
.question[data-answered] .q-accept { display: none; }

/* ---------- 8. Landing ---------- */

.hero { display: grid; gap: 2rem; align-items: center; padding-block: .5rem 2rem; }
.hero h1 { --pico-font-size: clamp(1.875rem, 1.25rem + 2.6vw, 2.75rem); --pico-line-height: 1.15; margin-bottom: .75rem; }
.hero .lead { max-width: 36rem; color: var(--pico-muted-color); font-size: 1.125rem; }
.hero-art { display: none; }
.hero-art article { margin: 0; }
@media (min-width: 768px) {
  .hero { grid-template-columns: 1.15fr 1fr; padding-block: 1.5rem 3rem; }
  .hero-art { display: block; }
}
.steps { display: grid; gap: 1rem; margin: 0 0 1.5rem; padding: 0; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps > li {
  position: relative; margin: 0; padding: 4rem 1.25rem 1.25rem; list-style: none; counter-increment: step;
  border: 1px solid var(--pico-card-border-color); border-radius: var(--em-radius-lg); background: var(--pico-card-background-color);
}
.steps > li::before {
  content: counter(step); position: absolute; top: 1.25rem; left: 1.25rem; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-weight: 700;
}
.steps h3 { margin-bottom: .375rem; }
.steps p { margin: 0; color: var(--pico-muted-color); }
.plan-list { margin: 0; padding: 0; }
.plan-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--pico-muted-border-color); list-style: none; }
.plan-list li:last-child { border-bottom: 0; }

/* ---------- E: report issue, materials ---------- */
.report-issue { margin-block: .5rem; }
.report-issue > .btn-link { min-height: 44px; font-size: .875rem; }
.materials-domain h3 { margin-bottom: 0; font-size: 1.0625rem; }
.materials-domain a.result-name { padding-block: .625rem; margin-block: -.625rem; } /* 44px tap target, same row height */
/* ---------- B: test page and result (templates/learning/exam/) ---------- */

/* Timer and save state stay in view while scrolling a long question. */
.exam-bar {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  margin: 0 calc(var(--pico-spacing) * -1) 1rem; padding: .5rem var(--pico-spacing);
  border-bottom: 1px solid var(--pico-muted-border-color); background: var(--pico-background-color);
}
.exam .page-head h1 { --pico-font-size: 1.375rem; }
.exam-layout { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .exam-layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
  .exam-side { position: sticky; top: 4.5rem; }
}
.exam-main { margin: 0; }
.exam-q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.exam-q-head h2 { margin: 0; scroll-margin-top: 5rem; }
.exam-flag { width: auto; margin: 0; padding: .375rem .875rem; font-size: .875rem; }
.exam-flag .flag-on, .exam-flag[aria-pressed=true] .flag-off { display: none; }
.exam-flag[aria-pressed=true] .flag-on { display: inline; }
.exam-flag[aria-pressed=true] { border-color: var(--em-flag); background-color: var(--em-warn-bg); color: var(--em-warn); }
.exam-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.5rem; }
.exam-steps > * { width: 100%; margin: 0; }
.exam-side form { margin: 0; }
.mistake h3 { margin-bottom: .75rem; }
.mistake-right { margin: .75rem 0 .25rem; }
/* ---------- C1: review queue ---------- */
.review-practice { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- Q1: QA fixes — 44px tap targets ---------- */
.header-login, .brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
details.dropdown.user-menu li > a, details.dropdown.user-menu .btn-link { display: flex; align-items: center; min-height: 2.75rem; }
.result-name a { padding-block: .75rem; } /* inline padding: a taller hit area, the same line layout */
/* Phones: the fixed tab bar must not cover what scrollIntoView or keyboard focus brings into view. */
@media (max-width: 767.98px) {
  html:has(.appnav) { scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
/* Keyboard focus on a question number: answered and current items already use the border and the ring. */
.qnav-item:focus-visible { outline: 3px solid var(--pico-primary); outline-offset: 2px; }
/* ---------- P1: result page — mistakes grouped by domain (templates/learning/exam/result.html) ---------- */
.mistake-group { margin: 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.mistake-group > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .125rem 1rem; min-height: 2.75rem; padding-block: .5rem;
  line-height: var(--pico-line-height);
}
.mistake-group > summary::after { margin-left: auto; }
.mistake-group-name { font-weight: 600; }
.mistake-group-count { color: var(--pico-muted-color); font-size: .875rem; }
.mistake-group .mistake:last-child { margin-bottom: var(--pico-spacing); }
.mistake-answers { margin: .75rem 0; }
.mistake-answers dt { font-weight: 600; }
.mistake-answers dd { margin: 0 0 .5rem; }
.mistake-answers :is(ul, ol) { margin: 0; padding-left: 1.25rem; }
.mistake-answers li { margin: 0; }
.mistake-why { padding: .625rem .875rem; border-left: .25rem solid var(--em-info-border); border-radius: .25rem; background: var(--em-info-bg); }
/* From 768px the score and the next step sit side by side and the domain bars take two columns: all on the first screen. */
@media (min-width: 768px) {
  .result-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pico-spacing); align-items: start; }
  .result-top .stats { grid-template-columns: 1fr 1fr; margin: 0; }
  .result-top > article { margin: 0; }
  .result-page .result-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}