/* ==========================================================================
   edu-layer.css — component styles for the educational layer (edu-* classes).
   Colours come from the shared variables (with fallbacks); only logical
   properties are used; tap targets are at least 44px; light and body.dark.
   ========================================================================== */

/* Shared tokens, scoped so the file works with or without design-v3.css. */
.edu-feedback,.edu-verbal-cards,.edu-sheet,.edu-review,.edu-mode-banner,
.edu-mode-note,.edu-return-banner,.edu-next-step,.edu-extra,.edu-target-mistakes,.edu-pace{
  --edu-surface:var(--surface,#fff);
  --edu-surface-2:var(--surface-2,#f3f6f9);
  --edu-line:var(--line,#dde4ea);
  --edu-line-strong:var(--line-strong,#c3ced8);
  --edu-ink:var(--ink,#112f43);
  --edu-ink-2:var(--ink-2,#52697a);
  --edu-primary:var(--primary,#123b54);
  --edu-primary-soft:var(--primary-soft,#e4eef5);
  --edu-good:var(--good,#1f7a52);
  --edu-good-soft:var(--good-soft,#e6f4ec);
  --edu-bad:var(--bad,#b42332);
  --edu-bad-soft:var(--bad-soft,#fbeaec);
  --edu-warn:var(--warn,#9a6a12);
  --edu-warn-soft:var(--warn-soft,#fbf1de);
  --edu-info:var(--info,#1d5f93);
  --edu-info-soft:var(--info-soft,#e4f0f9);
  --edu-r-card:var(--r-card,16px);
  --edu-r-ctl:var(--r-ctl,12px);
  color:var(--edu-ink);
}

/* --- Feedback panel (C2, C4, C12) ------------------------------------------ */
.edu-feedback .edu-single{grid-template-columns:1fr}
.edu-block{margin-block:12px;border:1px solid var(--edu-line);border-radius:var(--edu-r-card);background:var(--edu-surface)}
.edu-block>summary{display:flex;align-items:center;min-block-size:44px;padding-inline:16px;font-weight:700;cursor:pointer;list-style:none}
.edu-block>summary::-webkit-details-marker{display:none}
.edu-block>summary::after{content:"";margin-inline-start:auto;flex:none;inline-size:14px;block-size:14px;background:var(--edu-ink-2);-webkit-mask:var(--edu-chev-down) center/contain no-repeat;mask:var(--edu-chev-down) center/contain no-repeat}
.edu-block[open]>summary::after{transform:rotate(180deg)}
/* Visual QA #7: the chevron is drawn as a mask so it points down when closed and up when open in both directions. */
.edu-block,.edu-card{--edu-chev-down:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9l7 7 7-7'/></svg>")}
.edu-card>summary .chev{transition:transform .14s}
html[dir="rtl"] .edu-card[open]>summary .chev{transform:rotate(-90deg)}
html:not([dir="rtl"]) .edu-card[open]>summary .chev{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.edu-card>summary .chev{transition:none}}
.edu-block-body{padding:0 16px 14px}
.edu-block-body p{margin:0 0 8px}
.edu-idea{font-weight:600}
.edu-steps{margin:8px 0 0;padding-inline-start:22px;display:grid;gap:6px}
.edu-steps li{line-height:1.7}
.edu-more{margin-block-start:10px;border-block-start:1px dashed var(--edu-line-strong);padding-block-start:6px}
.edu-more>summary{min-block-size:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--edu-primary)}
.edu-rule-chip,.edu-skill-pill{display:inline-flex;align-items:center;min-block-size:28px;padding-inline:12px;margin-block-end:8px;border-radius:999px;background:var(--edu-primary-soft);color:var(--edu-primary);font-size:.875rem;font-weight:700}
.edu-note{padding:12px 16px}
.edu-note h5{margin:0 0 4px;font-size:.9375rem}
.edu-note p{margin:0;line-height:1.7}
.edu-check{background:var(--edu-warn-soft);border-color:var(--edu-warn)}
.edu-distractor{background:var(--edu-bad-soft);border-color:var(--edu-bad)}
.edu-tip{background:var(--edu-info-soft);border-color:var(--edu-info)}
.edu-links{display:flex;flex-wrap:wrap;gap:8px;margin-block:12px}
.edu-links .btn,.edu-actions .btn,.edu-topic-practice,.edu-card-practice{min-block-size:44px}
.edu-checklist{margin:12px 0;padding:10px 16px;border-radius:var(--edu-r-ctl);background:var(--edu-surface-2);font-weight:600}

/* --- Verbal cards (C1) ------------------------------------------------------ */
.edu-verbal-cards{margin-block:16px;display:grid;gap:10px}
.edu-verbal-cards h3{margin:0;font-size:var(--t-h1,1.3125rem);line-height:1.4}
.edu-lead{margin:0 0 4px;color:var(--edu-ink-2);line-height:1.7}
.edu-card{border:1px solid var(--edu-line);border-radius:var(--edu-r-card);background:var(--edu-surface)}
.edu-card>summary{display:flex;align-items:center;justify-content:space-between;min-block-size:48px;padding-inline:16px;font-weight:700;cursor:pointer;list-style:none}
.edu-card>summary::-webkit-details-marker{display:none}
.edu-card[open]>summary{border-block-end:1px solid var(--edu-line)}
.edu-card-body{padding:12px 16px 16px;display:grid;gap:8px}
.edu-card-body h5{margin:4px 0 0;font-size:var(--t-label,.9375rem)}
.edu-card-body p{margin:0;line-height:1.7}
.edu-card-trap{color:var(--edu-bad)}
.edu-trap-ico{inline-size:16px;block-size:16px;vertical-align:-3px;margin-inline-end:4px}
.edu-card-example{padding:8px 12px;border-radius:var(--edu-r-ctl);background:var(--edu-surface-2)}

/* --- Lesson sheet (C3) ------------------------------------------------------ */
.edu-sheet{display:grid;gap:10px}
.edu-sheet h4{margin:4px 0 0}
.edu-sheet ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;line-height:1.7}
.edu-def{margin:0;line-height:1.8}
.edu-example{padding:12px 16px;border-radius:var(--edu-r-ctl);background:var(--edu-surface-2)}
.edu-example p{margin:6px 0 0;line-height:1.7}
.edu-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:6px}
.edu-topic-actions{margin-block-start:14px}
.edu-return-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block:12px;padding:12px 16px;border:1px solid var(--edu-info);border-radius:var(--edu-r-card);background:var(--edu-info-soft)}
.edu-return-banner span{flex:1 1 180px;font-weight:600}
.edu-anchor{display:block;block-size:0;scroll-margin-block-start:80px}

/* --- Mode banner and notes (C5) --------------------------------------------- */
.edu-mode-banner{margin-block:10px;padding:10px 14px;border-radius:var(--edu-r-ctl);border:1px solid var(--edu-line);line-height:1.7;font-size:.9375rem}
.edu-mode-banner.training{background:var(--edu-info-soft);border-color:var(--edu-info)}
.edu-mode-banner.exam{background:var(--edu-warn-soft);border-color:var(--edu-warn)}
.edu-mode-note{margin:8px 0 0;font-size:.875rem;color:var(--edu-ink-2);line-height:1.6}
.edu-next-step{display:grid;gap:2px;margin-block:12px;padding:12px 16px;border-radius:var(--edu-r-card);background:var(--edu-primary-soft);border:1px solid var(--edu-line-strong)}

/* --- Standalone mistakes card (R3; replaces the preparation path card) ------- */
.edu-mistakes-card.static{cursor:default}

/* --- Review hub panels (C6, C7) --------------------------------------------- */
.edu-review{display:grid;gap:12px;margin-block:16px}
.edu-panel{padding:14px 16px;border:1px solid var(--edu-line);border-radius:var(--edu-r-card);background:var(--edu-surface)}
.edu-panel h3{margin:0 0 8px}
.edu-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.edu-row{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.edu-row-main{flex:1;display:flex;align-items:center;gap:12px;min-block-size:56px;padding:8px 12px;border:1px solid var(--edu-line);border-radius:var(--edu-r-ctl);background:var(--edu-surface-2);color:inherit;text-align:start;font:inherit;cursor:pointer}
.edu-row-main>span:not(.avatar){flex:1;display:grid;gap:2px;min-inline-size:0}
.edu-row-main small{color:var(--edu-ink-2);line-height:1.5}
.edu-row-link{flex:none;align-self:flex-start;min-inline-size:96px;min-block-size:44px;padding-inline:16px;border:1px solid var(--edu-line-strong);border-radius:var(--edu-r-ctl);background:var(--edu-surface);color:var(--edu-primary);font:inherit;font-weight:700;cursor:pointer}
.edu-empty,.edu-note-line,.edu-stat{margin:0;color:var(--edu-ink-2);line-height:1.7}
.edu-stat{margin-block-start:8px}

/* --- C13 grouping ------------------------------------------------------------ */
.edu-extra{margin-block:12px;border:1px solid var(--edu-line);border-radius:var(--edu-r-card);background:var(--edu-surface)}
.edu-extra>summary{display:flex;align-items:center;min-block-size:48px;padding-inline:16px;font-weight:700;cursor:pointer;list-style:none}
.edu-extra>summary::-webkit-details-marker{display:none}
.edu-extra-body{padding:0 12px 12px;display:grid;gap:10px}

/* --- New system: mistakes view (C8) and pace (C11) ---------------------------- */
.edu-target-mistakes{display:grid;gap:12px;margin-block:12px}
.edu-tabs{display:flex;flex-wrap:wrap;gap:8px}
.edu-tabs button{min-block-size:44px;padding-inline:16px;border:1px solid var(--edu-line-strong);border-radius:999px;background:var(--edu-surface);color:inherit;font:inherit;font-weight:600;cursor:pointer}
.edu-tabs button[aria-selected="true"]{background:var(--edu-primary);border-color:var(--edu-primary);color:#fff}
.edu-mistake-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.edu-mistake{padding:12px 16px;border:1px solid var(--edu-line);border-radius:var(--edu-r-card);background:var(--edu-surface);display:grid;gap:8px}
.edu-mistake header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--edu-ink-2);font-size:.875rem}
.edu-mistake-topic{padding:2px 10px;border-radius:999px;background:var(--edu-primary-soft);color:var(--edu-primary);font-weight:700}
.edu-mistake-stem{margin:0;line-height:1.7}
.edu-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.edu-compare div{padding:8px 12px;border-radius:var(--edu-r-ctl);background:var(--edu-surface-2);display:grid;gap:2px}
.edu-compare .good{background:var(--edu-good-soft)}
.edu-compare .bad{background:var(--edu-bad-soft)}
.edu-compare span{font-size:.8125rem;color:var(--edu-ink-2)}
.edu-limit{margin:0;color:var(--edu-ink-2);line-height:1.7}
.edu-pace{margin-block:12px;padding:12px 16px;border-radius:var(--edu-r-card);background:var(--edu-info-soft);border:1px solid var(--edu-info)}
.edu-pace p{margin:0;line-height:1.7}

/* --- Dark mode ---------------------------------------------------------------
   The shared variables are redefined by body.dark; these overrides cover only
   the fallbacks used when they are absent. */
body.dark .edu-feedback,body.dark .edu-verbal-cards,body.dark .edu-sheet,
body.dark .edu-review,body.dark .edu-mode-banner,body.dark .edu-mode-note,body.dark .edu-return-banner,
body.dark .edu-next-step,body.dark .edu-extra,body.dark .edu-target-mistakes,body.dark .edu-pace{
  --edu-surface:var(--surface,#14232d);
  --edu-surface-2:var(--surface-2,#1b2e3a);
  --edu-line:var(--line,#2a3f4d);
  --edu-line-strong:var(--line-strong,#3a5365);
  --edu-ink:var(--ink,#e8f0f5);
  --edu-ink-2:var(--ink-2,#a6b8c4);
  --edu-primary:var(--primary,#7fb2d6);
  --edu-primary-soft:var(--primary-soft,#1f3646);
  --edu-good:var(--good,#5fcf9a);
  --edu-good-soft:var(--good-soft,#143626);
  --edu-bad:var(--bad,#f08a96);
  --edu-bad-soft:var(--bad-soft,#3d1f25);
  --edu-warn:var(--warn,#e6b95c);
  --edu-warn-soft:var(--warn-soft,#3a2d12);
  --edu-info:var(--info,#7fb8e6);
  --edu-info-soft:var(--info-soft,#173247);
}
body.dark .edu-tabs button[aria-selected="true"]{color:#0d1820}

/* The feedback verdict is scrolled to the top of the viewport after an answer;
   leave room for the fixed top bar. */
.edu-feedback .answer-verdict{scroll-margin-block-start:84px}

.edu-rule-chip{white-space:normal;line-height:1.5;padding-block:4px}