/* صقور: an original field-instrument identity. Flight layout and input behaviour
   remain owned by styles.css; this layer changes presentation only. */
@font-face { font-family:Plex; src:url('./assets/arabic-500.ttf') format('truetype'); font-style:normal; font-weight:500; font-display:swap; }
:root {
  color-scheme: dark;
  --bg: #0d120f;
  --panel: #151d17;
  --line: #3b483d;
  --gold: #d9bd7e;
  --text: #f1eddf;
  --muted: #bdc5b2;
  --green: #b5c99d;
  --field-dark: #090e0b;
  --field-mid: #1b261d;
  --field-light: #485e43;
  --sand: #e5d1a2;
  --signal: #c5d5ad;
  --copper: #b89768;
  --olive: #8da16e;
  --surface-raised: #1b261d;
  --radius: 6px;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 90% 0, #566b3e12, transparent 54%);
  font-family: Plex, Tahoma, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family:inherit; }
h1, h2, h3 { font-weight:700; letter-spacing:0; text-wrap:balance; }
strong, b { font-weight:600; }
textarea:focus-visible, summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
button, a, input, select, textarea { transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }

::selection { color: var(--field-dark); background: var(--sand); }
button, a, input, select { -webkit-tap-highlight-color: #d3b77424; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: var(--sand);
}

/* The navigation reads like the top rail of an instrument panel. */
#topbar {
  min-height: 94px;
  height: auto;
  padding-block: 14px;
  background: linear-gradient(180deg, #18221a, #101811);
  border-top: 3px solid var(--copper);
  border-bottom: 1px solid #556348;
  box-shadow: 0 10px 32px #00000020;
  gap: 24px;
}
.brand { gap: 13px; font-size: 31px; flex-shrink: 0; }
.brand small { color: #b9c3ac; font-size: 9px; letter-spacing: 1.6px; }
.brand-mark {
  display: block;
  width: 52px;
  height: 60px;
  flex: none;
  object-fit: contain;
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
#topbar nav { gap: 5px; align-self: stretch; align-items: center; }
#topbar nav a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 13px;
  color: #c1c9b8;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight:500;
  border-radius:3px 3px 0 0;
}
#topbar nav a:hover { color: var(--text); background: #a5ba8120; }
#topbar nav a.active {
  color: var(--sand);
  border-color: #b8976829;
  border-bottom-color: var(--gold);
  background: linear-gradient(180deg, transparent, #d9bd7e10);
}
#account-nav { color: var(--muted); gap: 9px; flex-wrap: wrap; }

/* Restrained bronze edges and a clearly readable action hierarchy. */
.button {
  border-radius: 4px;
  color: #172015;
  background: linear-gradient(135deg, #e7cf9a, #d0af72);
  border-color: #e1c791;
  box-shadow: inset 0 1px 0 #fff3, 0 5px 16px #0002;
  padding-inline: 23px;
}
.button:hover:not(:disabled) { background: #e6ce96; border-color: #f0daa7; }
.button.secondary {
  color: #e1e5d5;
  background: #182219;
  border-color: #67765b;
  box-shadow: none;
}
.button.secondary:hover:not(:disabled) { background: #2d3824; border-color: #b7ba8c; }
.text-button { color: var(--sand); }
.text-button:hover { color: #f2dc9f; text-decoration: underline; text-underline-offset: 5px; }
.eyebrow { color: #d9bd87; letter-spacing: .2px; font-size: 12px; font-weight:500; }
.content { padding-top: 56px; padding-bottom:76px; }
.heading {
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
  margin-bottom: 30px;
  align-items: center;
}
.heading .eyebrow { margin-bottom: 10px; }
.heading h1 { font-size: 36px; line-height: 1.5; }
.heading p { max-width: 850px; line-height: 1.9; }
.heading .fine { max-width: 780px; }
.section-title { font-size: 32px; }
.section-sub { line-height: 1.9; }

/* The opening is a field display, framed rather than a floating decorative image. */
.hero {
  min-height: 630px;
  padding-top: 46px;
  padding-bottom: 40px;
  column-gap: 42px;
  background: radial-gradient(ellipse at 20% 58%, #53643a2b, transparent 58%),
    linear-gradient(130deg, #172219 0%, #0e1610 56%, #1b2719 100%);
  border-bottom: 1px solid #5e6142;
}
.hero:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 6vw;
  left: 6vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--copper) 20%, var(--gold) 75%, transparent);
  opacity: .7;
  pointer-events: none;
}
.hero-copy { padding-bottom: 5px; max-width: 610px; }
.hero-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 23px; }
.hero-brand-mark, .hero-brand > img { width: 102px; height: 112px; flex: none; object-fit: contain; }
.hero-brand-name { color: var(--sand); font-size: 52px; font-weight: 700; line-height: 1.2; }
.hero-brand-caption { display: block; color: #bfc6af; font-size: 11px; letter-spacing: 2.2px; margin-top: 10px; }
.hero h1 { font-size: clamp(42px, 4.25vw, 66px); line-height: 1.4; letter-spacing: 0; }
.hero h1 em { color:var(--gold); }
.hero-copy > p { color: #c5ceba; font-size: 17px; line-height: 1.95; max-width: 520px; }
.hero-copy > .fine { color: #aebaa3; font-size: 12px; max-width: 540px; }
.pill {
  border-radius: 3px;
  background: #8da16e13;
  border-color: #a2b78350;
  color: #cad9b2;
  padding: 7px 12px;
  margin-bottom: 24px;
}
.pill:before { border-radius: 0; width: 6px; height: 6px; background: #c6d6ac; }
.hero-visual { height: 470px; }
.hero-visual:before {
  inset: 8% 7%;
  border: 1px solid #b4c5901c;
  box-shadow: 0 0 0 40px #8ba26709, 0 0 0 80px #8ba26704;
  pointer-events: none;
}
.hero-visual .flight-frame {
  position: absolute;
  inset: 13px 0;
  overflow: hidden;
  border: 1px solid #8c936655;
  border-radius:6px;
  box-shadow:inset 0 0 70px #050c0750, 0 25px 60px #0002;
  background: linear-gradient(90deg, #8095670c 1px, transparent 1px),
    linear-gradient(#8095670c 1px, transparent 1px),
    radial-gradient(ellipse at 50% 43%, #4659344d, #11180e55 68%);
  background-size: 38px 38px, 38px 38px, auto;
}
.hero-visual .flight-frame:before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 9px;
  pointer-events: none;
  background: linear-gradient(var(--gold), var(--gold)) top right / 29px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 2px 29px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 29px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 2px 29px no-repeat;
  opacity: .8;
}
.flight-frame-meta {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 19px;
  border-top: 1px solid #69764e6b;
  background: #0f180dce;
  font-size: 11px;
  color: #c5cdba;
}
.flight-frame-meta strong { color: var(--sand); font-weight: 600; }
.flight-frame-label {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 4;
  color: #c5cead;
  font: 9px monospace;
  letter-spacing: 1.5px;
  direction: ltr;
}
.tech-label { color: #c2cbb3; font-size: 9px; letter-spacing: 1.7px; bottom: 72px; left: 24px; }
.hero-img { width: 145%; left: -24%; height: 88%; top: 1%; transform: translateX(18%); }

.offer-strip { background: linear-gradient(90deg, #1c281c, #253121, #1c281c); border-top: 0; border-bottom: 1px solid #526044; gap: 0; padding: 30px 6vw; }
.offer-strip > div { padding: 0 28px; border-inline-end: 1px solid #7a896144; }
.offer-strip > div:first-child { padding-inline-start: 0; }
.offer-strip > div:last-child { border-inline-end: 0; }
.offer-strip strong { color: #dfc991; font-size: 27px; line-height: 1.5; }
.offer-strip span { color: #c1c9b3; }

/* Shared surface treatment across the curriculum, aircraft, tests and admin. */
.card {
  border-radius: var(--radius);
  border-color: #43513e;
  background: linear-gradient(135deg, #202c20 0%, #172119 65%, #151e17 100%);
  padding: 28px;
  position: relative;
  box-shadow: inset 0 1px 0 #d5deb00a, 0 10px 30px #00000016;
}
.card:before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
  width: 27px;
  height: 27px;
  border-top: 2px solid var(--copper);
  border-right: 2px solid var(--copper);
  border-start-start-radius: var(--radius);
  pointer-events: none;
}
.card h3 { line-height: 1.6; }
.card p { color: #bdc8b5; font-size:15px; line-height: 1.95; }
.card .index { color: #d7c18b; letter-spacing: 1.3px; margin-bottom: 24px; }
.callout { background: #242c1d; border-color: #465339; border-right-color: var(--gold); color: #c1c9b5; line-height: 1.9; }
.join-block { border-radius: var(--radius); background: radial-gradient(ellipse at 100% 0,#b8976815,transparent 65%),linear-gradient(120deg, #283622, #19271b); border-color: #6d7950; gap: 28px; box-shadow:inset 0 1px #d9bd7e19; }
.join-block h3 { font-size: 22px; }
.join-block > div:last-child { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.price { color: #e2ca8f; }
.fine { color: #b1bea5; line-height: 1.85; }
.tabs { gap: 8px; }
.tabs button { border-radius: 4px; color: #c3ccb6; background: #172119; border-color: #506047; font-weight:500; }
.tabs button:hover:not(:disabled) { background: #2c3a23; }
.tabs button.active { color: #f0dba2; background: #73613d35; border-color: #bba263; }
.lesson-row { border-radius: 5px; background: linear-gradient(100deg,#172119,#1e2a1d); border-color: #43513f; border-right: 3px solid #66784d; padding: 21px; }
.lesson-row:hover { background: #2a3621; border-right-color: var(--gold); }
.lesson-num { color: #d3bc85; flex: none; }
.lesson-row > span:nth-child(2) { min-width: 0; }
.lesson-row p { color: #bcc8ad; line-height: 1.85; margin-top: 4px; font-size:13px; }
.lesson-row .tail { color: #dfc98e; flex: none; text-align: left; }
.progress { background: #111a0c; height: 5px; border: 1px solid #34452c; }
.progress span { background: #cbb77c; }
.stats { gap: 28px; }
.stats > div { border-right: 2px solid #657b4d; padding-right: 13px; }
.stats b { color: #dec997; }
.aircraft-art {
  border-radius: 0;
  border: 1px solid #54654250;
  background: linear-gradient(90deg, #7b98610a 1px, transparent 1px),
    linear-gradient(#7b98610a 1px, transparent 1px), radial-gradient(ellipse at center, #4a5d3670, #101b0e 75%);
  background-size: 22px 22px, 22px 22px, auto;
}
.aircraft-art svg { fill: #c5cdb5; stroke: #d2b67c; }
.aircraft-controls { color: #c7d0ba; border-color: #51613c; }
.documented-status { color: #d8c28a; }

/* The evaluation screens use measurable blocks and a stronger time display. */
.exam-grid { gap: 24px; }
.grading-card { margin-top: 0; }
.exam-grid h2 { font-size: 24px; line-height: 1.65; }
.exam-facts { gap: 9px; }
.exam-facts > div { background: #131e10; border-color: #4f603d; border-radius: 1px; padding: 9px 12px; flex: 1 1 115px; }
.exam-facts dt { color: #aebba0; }
.exam-facts dd { color: #e3cd96; font-weight: 600; }
.exam-facts span { border-radius: 1px; border-color: #65774a; background: #111c0e; }
.rubric-grid { gap: 10px; }
.rubric-grid > div { border-top: 2px solid #77865b; background: #101b0d80; padding: 10px; }
.rubric-grid b { color: #d8c591; }
.rubric-grid small { color: #b6c1a7; font-size: 11px; }
.overall-grade { background: linear-gradient(105deg, #303b22, #1b2916); border-color: #7c8654; }
.overall-grade h2 { line-height: 1.7; }
.exam-score { color: #e4cb92; font-variant-numeric: tabular-nums; }
.exam-clock { border-radius: 1px; background: #2d371f; border-color: #bfaa6b; box-shadow: inset 0 0 0 4px #11180d; min-width: 158px; text-align: center; }
.exam-question > .eyebrow { margin-bottom: 20px; }
.exam-navigation button { border-radius: 1px; background: #1c2718; border-color: #4a5a3e; }
.exam-navigation button.answered { background: #394b29; border-color: #8f9b67; }
.exam-navigation button.current { background: #dbbe7f; color: #131c0e; border-color: #f2d9a4; box-shadow: inset 0 0 0 3px #d0b071; }
.exam-review { border-color: #465638; }
.exam-review.correct > strong { color: #c2d3a4; }
.exam-review.incorrect > strong { color: #e6b299; }

/* Lessons and forms retain comfortable reading and generous touch targets. */
dialog { border-radius: 8px; background: linear-gradient(145deg,#1f2b1f,#151f17 65%); border-color: #8d9569; border-top:3px solid var(--copper); padding-top: 42px; box-shadow: 0 25px 100px #000a; scrollbar-color:#71805c #152016; }
dialog::backdrop { background: #050a06ce; backdrop-filter: blur(5px); }
dialog h2 { line-height: 1.65; padding-inline-end: 10px; }
dialog p { color: #c5ceb9; line-height: 1.95; }
.modal-close { color: #e0cea3; min-width:38px; min-height:38px; border-radius:4px; line-height:1; }
.modal-close:hover { background:#d9bd7e18; }
input, select { border-radius: 4px; background: #0f1911; border-color: #62774c; color: #f0f3e9; }
input::placeholder { color: #a5b098; }
input:focus, select:focus { border-color: var(--gold); }
input[type=checkbox], input[type=radio] { accent-color: #d7bd83; }
.answer { border-radius: 4px; background: #152116; border-color: #506344; padding: 14px 16px; align-items: flex-start; line-height:1.85; }
.answer input { margin-top: 5px; flex: none; }
.answer:hover { background: #293820; border-color: #829567; }
.answer:has(input:checked) { background: #5049325e; border-color: #c4ab6f; color: #f4e9ca; }
.lesson-section { margin-block: 27px; }
.lesson-section h3 { color: #e1d4b2; line-height: 1.7; }
.lesson-section p { color: #c4cebb; font-size:16px; line-height: 2; }
.lesson-section ul, .lesson-section ol { color: #b7c3aa; line-height: 1.95; }
.lesson-objectives { background: #25331f; border-color: #64764d; border-radius:4px; }
.lesson-exercise { background: #3e442631; border-right-color: #c6ae73; border-top: 1px solid #4f603d; }
.lesson-quiz { border-radius: 5px; border-color: #596c49; background: #101b1355; }
.lesson-quiz legend { color: #dccb9e; }
.source-card { border-color: #46563a; }
.source-card .eyebrow { margin-bottom: 8px; }
.source-card a { color: #d9c38d; text-decoration: underline; text-underline-offset: 4px; }
summary { color: #dbc591; padding-block: 6px; }
.feedback { background: #36532a35; border-color: #75945a; color: #d3e1c2; }
.feedback.error { background: #6c352821; border-color: #a3664e; color: #efbd9f; }
.error { color: #efb596; }
.danger { border-color: #a97652 !important; color: #f2bf9e !important; background: #512c1926 !important; }
.admin-grid { gap: 24px; }
table { color: #c2ccb6; }
th { color: #e0cd9d; background: #14200f; font-weight: 600; border-color: #758157; }
td { border-color: #425535; }
tbody tr:hover { background: #8ba86b0c; }
code { color: #e8d199; background: #0c160a; border: 1px solid #596e41; overflow-wrap: anywhere; max-width: 100%; }
pre { color: #c4d1b4; }

/* The animation renderer injects its own style; these scoped rules keep its
   surrounding UI in the platform palette without obscuring the teaching canvas. */
#lesson-visual .madar-lesson-visual { border-radius: 1px; background: #182513; color: #e4e7d9; border-color: #697b4f; }
#lesson-visual .mlv-heading { background: #2d3b22; border-color: #596c42; }
#lesson-visual .mlv-heading span { color: #c1ccae; }
#lesson-visual .mlv-caption h4 { color: #e2d09e; }
#lesson-visual .mlv-caption p { color: #bdcbb0; }
#lesson-visual .mlv-progress { background: #111c0b; }
#lesson-visual .mlv-progress span { background: #d0b777; }
#lesson-visual .mlv-controls button { color: #dae2ce; background: #293921; border-color: #75885a; border-radius: 1px; }
#lesson-visual .mlv-controls button:hover:not(:disabled) { background: #41512e; }
#lesson-visual .mlv-controls .mlv-play { background: #d2b676; border-color: #d2b676; color: #1b2511; }
#lesson-visual .mlv-controls .mlv-play:hover { background: #e1c88d; }
#lesson-visual .mlv-pages, #lesson-visual .mlv-speech-note { color: #b2c2a0; }

#footer { background: #0a110c; border-color: #47583d; color: #b9c3ac; padding-block: 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { display: block; width: 32px; height: 36px; object-fit: contain; }
#footer span:first-child { color: #d4c493; }
#footer button { color: #bac4ad; }
#toast { border-radius: 5px; color: #111a0c; background: #e1cc96; border: 1px solid #f1db9e; box-shadow:0 10px 35px #0006; }

/* Only paint changes in flight mode: the centre camera, joysticks, hit targets,
   pointer handling and the established HUD positions are untouched. */
.lab-top .button, .lab-controls .button { border-radius: 1px; background: #15200fdc; border-color: #b5bf8b72; color: #edf1de; }
.lab-top .button:hover:not(:disabled), .lab-controls .button:hover:not(:disabled) { background: #354328ed; }
.lab-toolbar select { background: #15220fe8; border-color: #9dab786e; }
.lab-mission, .lab-start, .exam-live { border-radius: 1px; }
.lab-start { background: #172311ed; border-color: #a2ac737d; }
.lab-start h2 { color: #eee5c8; }
.lab-start p { color: #c4d0b5; }
.lab-mission { background: #13220dc4; }
.lab-mission h3 { color: #e1c78c; }
.flight-status { border-radius: 1px; }
.exam-live { background: #17230eed; border-color: #c9b57b; }

@media (max-width: 1180px) {
  #topbar { padding-inline: 3vw; gap: 16px; }
  #topbar nav a { font-size: 12px; padding-inline: 9px; }
  .brand { font-size: 26px; }
  .hero { column-gap: 24px; padding-inline: 5vw; }
  .hero-brand-mark, .hero-brand > img { width: 88px; height: 98px; }
  .hero-brand-name { font-size: 44px; }
  .hero-visual { height: 425px; }
}
@media (max-width: 950px) {
  #topbar { flex-wrap: wrap; padding-inline: 24px; row-gap: 12px; }
  #topbar nav { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid #49583a; padding-top: 10px; gap: 5px; }
  #account-nav { margin-inline-start: auto; }
  .hero { padding-inline: 30px; column-gap: 18px; }
  .hero-brand { gap: 14px; }
  .hero-brand-mark, .hero-brand > img { width: 78px; height: 90px; }
  .hero-brand-name { font-size: 40px; }
  .hero-brand-caption { font-size: 9px; letter-spacing: 1.2px; }
  .hero h1 { font-size: 44px; }
  .hero-visual { height: 375px; }
  .flight-frame-meta { padding: 12px; font-size: 10px; }
  .offer-strip > div { padding-inline: 18px; }
  .offer-strip strong { font-size: 23px; }
  .join-block { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .heading h1 { font-size: 29px; }
  .card { padding: 23px; }
  .exam-facts > div { flex-basis: 125px; }
  .rubric-grid { gap: 7px; }
  .rubric-grid > div { padding: 8px 6px; }
  .rubric-grid small { font-size: 10px; }
  .heading .exam-clock { font-size: 31px; }
}
@media (max-width: 600px) {
  #topbar { padding: 13px 18px; gap: 11px; }
  .brand { gap: 10px; font-size: 27px; }
  .brand-mark { width: 43px; height: 49px; }
  .brand small { font-size: 7px; letter-spacing: 1.4px; }
  #account-nav { gap: 6px; }
  #account-nav .button { min-height: 35px; padding: 7px 10px; font-size: 11px; }
  #account-nav .text-button { font-size: 11px; }
  #topbar nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; justify-content:stretch; padding-top:10px; }
  #topbar nav a { justify-content: center; text-align:center; font-size: 12px; min-height: 42px; padding: 7px 4px; }
  .hero { padding: 32px 22px 26px; }
  .hero-brand { margin-bottom: 22px; gap: 17px; }
  .hero-brand-mark, .hero-brand > img { width: 86px; height: 94px; }
  .hero-brand-name { font-size: 46px; }
  .hero-brand-caption { font-size: 9px; letter-spacing: 1.6px; }
  .hero h1 { font-size: 44px; line-height: 1.4; }
  .hero-copy > p { font-size: 16px; margin-block: 17px 24px; }
  .hero-copy > .fine { font-size: 12px; margin-block: 20px 8px; }
  .hero .actions { gap: 9px; }
  .hero .actions .button { padding-inline: 16px; font-size: 13px; }
  .hero .pill { font-size: 11px; margin-bottom: 22px; }
  .hero-visual { margin-top: 20px; height: 315px; }
  .hero-visual:before { inset: 12% 15%; box-shadow: 0 0 0 30px #8ba26709, 0 0 0 55px #8ba26704; }
  .hero-visual .flight-frame { inset: 0; }
  .hero-img { width: 150%; left: -25%; height: 86%; transform: translateX(18%); }
  .flight-frame-meta { font-size: 9px; padding: 11px 14px; gap: 7px; }
  .flight-frame-label { top: 21px; left: 21px; font-size: 8px; letter-spacing: 1px; }
  .tech-label { bottom: 59px; left: 20px; font-size: 8px; letter-spacing: 1px; }
  .offer-strip { padding: 23px 22px; gap: 18px 0; }
  .offer-strip > div { padding-inline: 18px; }
  .offer-strip > div:nth-child(odd) { padding-inline-start: 0; }
  .offer-strip > div:nth-child(even) { border-inline-end: 0; }
  .offer-strip strong { font-size: 23px; }
  .offer-strip span { font-size: 11px; }
  .content { padding: 34px 22px 48px; }
  .heading { padding-bottom: 23px; margin-bottom: 25px; align-items: stretch; }
  .heading h1 { font-size: 27px; }
  .heading p { font-size: 14px; }
  .heading > .button { align-self: flex-start; font-size: 12px; }
  .section-title { font-size: 28px; }
  .section-sub { font-size: 14px; }
  .card .index { margin-bottom: 13px; }
  .card p { font-size: 14px; }
  .join-block { padding: 23px; margin-top: 35px; gap: 24px; }
  .join-block > div:last-child { width: 100%; }
  .join-block h3 { font-size: 20px; }
  .lesson-row { padding: 16px 13px; gap: 10px; }
  .lesson-row h3 { font-size: 14px; }
  .lesson-row .tail { font-size: 10px; max-width: 55px; white-space: normal; }
  .lesson-num { width: 26px; font-size: 16px; }
  .tabs button { padding: 9px 12px; font-size: 12px; }
  .callout { padding: 20px; font-size: 13px; }
  dialog { padding: 34px 18px 24px; }
  dialog h2 { font-size: 23px; }
  .exam-grid h2 { font-size: 22px; }
  .exam-facts { gap: 7px; }
  .exam-facts > div { min-width: 0; flex-basis: 116px; padding: 9px; }
  .exam-facts dd { font-size: 13px; }
  .exam-score { font-size: 50px; }
  .overall-grade h2 { font-size: 22px; }
  .exam-question h2 { font-size: 20px; }
  .answer { padding: 12px; font-size: 14px; }
  .lesson-section p { font-size:15px; }
  .form-actions { gap: 9px; }
  .form-actions .button { padding-inline: 16px; }
  #footer { padding: 23px 22px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { #toast, button, a, input, select, textarea { transition: none; } }
/* Learner portfolios remain readable within the lesson dialog on narrow screens. */
.lesson-exercise textarea { width:100%; min-height:150px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; line-height:1.8; }
.lesson-exercise .exam-facts { grid-template-columns:1fr; }
.lesson-exercise .exam-facts dd { white-space:normal; overflow-wrap:anywhere; }
#progress-save-status { margin:12px 0; font-size:13px; line-height:1.7; }