/* /learn «التدريب» (Task 2.3). Right to left first: logical properties only. Colours and sizes come from tokens.css
   only. The one thing that moves is the newest line of «لحظات», once, and not with "reduce motion". Since Task indoor,
   part d (the boards Learn and Learn-phone, docs/design/indoor/): the subject list under the navy band, its field a card
   with its subskills as tiles. */

/* the page runs the screen's width (the subject list's band); under it the outdoor pages' column (1200px), a session's
   page too */
.app-main:has(> learn-page) {
  max-inline-size: none;
  padding: 0;
}

/* a block, so its column is the page's width */
learn-page {
  display: block;
}

.learn-column {
  max-inline-size: var(--site-wrap);
  margin-inline: auto;
  padding: var(--space-5) var(--site-gutter) var(--space-7);
}

.learn-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.learn-page.is-busy .learn-stage {
  opacity: 0.7;
}

.learn-help {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* ── The subject list ── */

/* the robot of its band smaller on a narrower screen (the board's), a phone's as every band's (base.css) */
@media (max-width: 61.9375rem) {
  .learn-page .page-band-robot {
    inline-size: var(--band-robot-narrow);
  }
}

@media (max-width: 47.9375rem) {
  .learn-page .page-band-robot {
    inline-size: var(--band-robot-phone);
  }

  /* «تابع التدريب» the band's width */
  .learn-page .page-band-acts > .button {
    flex: 1;
  }
}

.learn-placement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.learn-placement p {
  margin: 0;
}

/* «دورات تناسبك» (Task 7.13): the runs suggested from his weak subskills, under the subject list. Since Task indoor,
   part d, each a raised row: the video's icon on a teal tile, its words, an arrow; the whole row answers to its link */
.learn-ads h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
  line-height: 1.6;
}

.learn-ads-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.learn-ad {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.learn-ad-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--mark);
  block-size: var(--mark);
  border-radius: var(--radius);
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.learn-ad-words {
  flex: 1;
  min-inline-size: 0;
}

.learn-ad-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.learn-ad-title {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.learn-ad-title:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.learn-ad-line {
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

.learn-ad-covers {
  margin: 0;
  color: var(--color-on-text);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.learn-ad-go,
.learn-link-go {
  color: var(--color-muted);
}

/* a row or a card that answers as a whole to its link (its title), its ring round all of it */
.learn-ad-title::after,
.learn-link-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.learn-ad-title:focus-visible,
.learn-link-title a:focus-visible {
  outline: none;
}

.learn-ad:has(.learn-ad-title:focus-visible),
.learn-link-card:has(.learn-link-title a:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* «أخطائي» (Task mistakes, part b; its count a yellow chip) and «الاختبارات التجريبية», under the subject list: two cards
   that link, side by side (Task indoor, part d), one under the other on a narrower screen */
.learn-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.learn-link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (hover: hover) {
  .learn-link-card:hover {
    border-color: var(--color-muted);
  }
}

.learn-field-mark,
.learn-link-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--mark-big);
  block-size: var(--mark-big);
  border-radius: var(--radius);
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.learn-field-mark .icon,
.learn-link-mark .icon {
  inline-size: var(--mark-big-icon);
  block-size: var(--mark-big-icon);
}

.learn-mistakes .learn-link-mark {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.learn-link-words {
  flex: 1;
  min-inline-size: 0;
}

.learn-link-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.6;
}

.learn-link-title a {
  color: var(--color-text);
  text-decoration: none;
}

.learn-link-title a:hover {
  color: var(--color-text);
}

/* the categories as tabs (components/category-tabs.js): here, on the home and on a course's page; a test's results' and
   a paper's sections take their look too. Since Task indoor part b pills, as the keys (nav-bar.css): white in a card's
   line, the chosen one filled (navy; yellow in dark mode). «الدورات»'s, on an outdoor page, are site.css's, from what
   these first rules give */
.learn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.learn-tab {
  min-block-size: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.learn-tab:where(:not(.site *)) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 400;
}

@media (hover: hover) {
  .learn-tab:where(:not(.site *)):not([aria-selected="true"]):hover {
    border-color: var(--color-muted);
  }
}

.learn-tab:where(:not(.site *))[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.learn-tab:where(:not(.site *))[aria-selected="true"] .learn-tab-note {
  color: inherit;
}

/* a short note after a tab's name: the category's percent on the home (components/category-tabs.ts) */
.learn-tab-note {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.learn-tab:focus-visible,
.learn-step:focus-visible,
.learn-option:focus-visible,
.learn-card-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* (on /learn the kit's 3px, Task indoor part d: a revision card's row, a field's name the pager leaves the keyboard on) */
.learn-page .learn-card-link:focus-visible,
.learn-page .learn-field-title:focus-visible {
  outline-width: 3px;
}

/* In /learn's band (Task indoor, part d) the categories are its keys: navy pills, the chosen one white, as the band's
   keys (nav-bar.css); on a phone too, under the band (not the bar at the bottom: they choose the list, not a view) */
.page-band .learn-tabs {
  padding-block-end: var(--space-4);
}

.page-band .learn-tab {
  border-color: var(--site-navy-line);
  background: var(--site-navy-card);
  color: var(--site-navy-text);
}

.page-band .learn-tab[aria-selected="true"] {
  border-color: var(--site-navy-title);
  background: var(--site-navy-title);
  color: var(--site-navy);
}

@media (hover: hover) {
  .page-band .learn-tab:not([aria-selected="true"]):hover {
    border-color: var(--site-navy-edge);
    color: var(--site-navy-title);
  }
}

.page-band .learn-tab:focus-visible {
  outline: 3px solid var(--site-focus);
}

.learn-cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A field's card (Task indoor, part d): its head (the field's icon on a teal tile, its name, its place in its category,
   the pager at its end), then its subskills as tiles */
.learn-field {
  padding: 0;
}

.learn-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-rule);
}

.learn-field-words {
  flex: 1;
  min-inline-size: 0;
}

.learn-field-title {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.5;
}

.learn-field-place {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* /learn's field pager, one field of the category at a time (the owner, 17 Oct 2026): since part d the field before and
   the one after as small buttons with their names, at the head's end, each with its arrow pointing the way it turns; a
   name too long ends with «…» (it's whole in the button's title) */
.learn-field-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-inline-size: 0;
}

.learn-field-turn {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.learn-field-turn-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The home's field pager («تقدّمك», pages/home-page.js; /learn's until part d): the field before at the start, the
   field's title in the middle, the field after at the end. The carets are written as for left to right («‹ before»,
   «after ›»); right to left, the browser mirrors them, so each points away from the title, as the pages turn. */
.learn-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.learn-pager > .learn-pager-here {
  grid-column: 2;
  margin: 0;
}

.learn-pager-to {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: medium;
  cursor: pointer;
}

.learn-pager-to.is-prev {
  grid-column: 1;
  justify-self: start;
}

.learn-pager-to.is-next {
  grid-column: 3;
  justify-self: end;
}

.learn-pager-to.is-prev::before {
  content: "‹" / "";
}

.learn-pager-to.is-next::after {
  content: "›" / "";
}

.learn-pager-to::before,
.learn-pager-to::after {
  flex: none;
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1;
}

.learn-pager-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-pager-to:hover .learn-pager-name {
  text-decoration: underline;
}

.learn-pager-to:focus-visible,
.learn-pager-here:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.learn-subskills {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10rem 6.5rem;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.learn-sub:first-child {
  border-block-start: 0;
}

.learn-sub.is-off {
  color: var(--color-muted);
}

.learn-sub-main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.learn-sub-name {
  font-weight: 700;
}

.learn-sub-skill,
.learn-sub-meta,
.learn-sub-pct {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.learn-sub-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.learn-sub.is-mastered .learn-sub-pct {
  color: var(--color-success);
  font-weight: 700;
}

/* /learn's subskills as tiles (Task indoor, part d; the home's keep their rows), two in a row (one on a narrower screen,
   below): the subskill's icon in a circle (filled teal once mastered), its name, its skill and questions, the level's
   steps with «المستوى {n}»; at the foot under a rule the bar, its percent or «أتقنتها», and «تابع» or «ابدأ» */
.learn-subskills.is-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
}

.learn-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.learn-tile-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.learn-tile-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--mark);
  block-size: var(--mark);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-on-text);
}

.learn-tile-mark .icon {
  inline-size: var(--mark-icon);
  block-size: var(--mark-icon);
}

.learn-tile.is-mastered .learn-tile-mark {
  border-color: var(--color-done);
  background: var(--color-done);
  color: var(--color-on-done);
}

.learn-tile-words {
  flex: 1;
  min-inline-size: 0;
}

.learn-tile-name {
  margin: 0;
  font-weight: 700;
  line-height: 1.6;
}

.learn-tile-meta {
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  line-height: 1.7;
}

.learn-tile.is-off .learn-tile-name,
.learn-tile.is-off .learn-tile-mark {
  color: var(--color-muted);
}

.learn-tile-level {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.learn-tile-level-n {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.learn-tile-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-rule);
}

.learn-tile-pct {
  font-size: var(--font-size-small);
  font-weight: 700;
  text-align: end;
}

/* (the bar of one mastered teal as the others', its chip says it) */
.learn-tile.is-mastered .learn-bar-fill {
  background: var(--color-on);
}

.learn-tile-done .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
}

/* ── Bars and the level steps ── */

.learn-bar {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  min-inline-size: 3rem;
  block-size: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-track);
  overflow: hidden;
}

.learn-bar-fill {
  display: block;
  background: var(--color-on);
}

.is-mastered .learn-bar-fill {
  background: var(--color-success);
}

.learn-stairs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
}

.learn-step {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  inline-size: var(--control-height);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--font-size-small);
}

button.learn-step {
  cursor: pointer;
}

.learn-step-1 { block-size: calc(var(--control-height) * 0.6); }
.learn-step-2 { block-size: calc(var(--control-height) * 0.8); }
.learn-step-3 { block-size: var(--control-height); }
.learn-step-4 { block-size: calc(var(--control-height) * 1.2); }
.learn-step-5 { block-size: calc(var(--control-height) * 1.4); }

.learn-step.is-below {
  background: var(--color-info-soft);
}

.learn-step.is-current {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.learn-step.is-empty {
  border-style: dashed;
}

.learn-stairs.is-small .learn-step {
  inline-size: var(--space-3);
  border-radius: 2px 2px 0 0;
}

.learn-stairs.is-small .learn-step-1 { block-size: var(--space-2); }
.learn-stairs.is-small .learn-step-2 { block-size: var(--space-3); }
.learn-stairs.is-small .learn-step-3 { block-size: var(--space-4); }
.learn-stairs.is-small .learn-step-4 { block-size: var(--space-5); }
.learn-stairs.is-small .learn-step-5 { block-size: var(--space-6); }

/* On /learn (Task indoor, part d; the home's keep the colours above) the steps in the kit's colours: white in a line,
   those below his level pale teal, his level teal, one with no questions yet dashed */
.learn-page .learn-step {
  border-color: var(--color-step-line);
  background: var(--color-step);
}

.learn-page .learn-step.is-below {
  border-color: var(--color-step-below);
  background: var(--color-step-below);
  color: var(--color-text);
}

.learn-page .learn-step.is-current {
  border-color: var(--color-done);
  background: var(--color-done);
  color: var(--color-on-done);
}

.learn-page .learn-step.is-empty:not(.is-current, .is-below) {
  border-color: var(--color-step-empty);
  background: transparent;
}

/* a tile's: narrow, rounded, rising 4px each */
.learn-tile .learn-stairs.is-small {
  block-size: var(--space-5);
}

.learn-tile .learn-stairs.is-small .learn-step {
  inline-size: var(--step-small);
  border-width: var(--step-line);
  border-radius: var(--radius-step);
}

.learn-tile .learn-stairs.is-small .learn-step-4 { block-size: calc(var(--space-4) + var(--space-1)); }
.learn-tile .learn-stairs.is-small .learn-step-5 { block-size: var(--space-5); }

/* ── A session ── */

/* Two columns: the level column, and the question (or the summary) with the side column under it, as wide as the
   question (the owner, 17 Oct 2026; until then the side column was a third column that stayed in view). The level
   column spans both rows, and the second row is the flexible one, so a tall level column never pushes the side column
   away from the question. Everything scrolls with the page. Since Task indoor, part d, under a work page's head
   (components/work-head.js), the level column 280px, and the question at most 880px wide in the middle of what's left
   (all of it when it has a reading passage), so folded it stands in the page's middle. */
.learn-layout {
  display: grid;
  grid-template-columns: var(--learn-panel) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "status stage"
    "status more";
  align-items: start;
  gap: var(--space-5);
  transition: grid-template-columns 0.25s ease-out, column-gap 0.25s ease-out;
}

.learn-status {
  grid-area: status;
  min-inline-size: 0;
  transition: opacity 0.25s ease-out, display 0.25s allow-discrete;
}

/* The level column slides out to the start and back (the owner, 22 Oct 2026): its button is at the top of the question,
   and it closes by itself when the next question comes. Closed, it's out of the page (display: none, once the slide
   ends), so the keyboard and screen readers skip it too. */
.learn-layout.is-status-closed {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}

.learn-layout.is-status-closed .learn-status {
  display: none;
  opacity: 0;
}

/* its button, at the top of the question: a caret only (its words are its name and title), a small square. Open, it
   points to the right, where the column goes; closed, it turns to point back in. */
.learn-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height-small);
  padding: 0;
}

.learn-status-toggle .icon {
  transition: transform 0.25s ease-out;
}

.learn-status-toggle[aria-expanded="false"] .icon {
  transform: scaleX(-1);
}

.learn-stage {
  grid-area: stage;
}

/* «إنهاء التدريب» at the head's end; «إنهاء» on a phone (below) */
.learn-end-short {
  display: none;
}

.learn-more {
  grid-area: more;
}

.learn-stage,
.learn-more {
  inline-size: 100%;
  max-inline-size: var(--learn-stage);
  margin-inline: auto;
}

.learn-layout:has(.learn-qbody.has-passage) :is(.learn-stage, .learn-more) {
  max-inline-size: none;
}

.learn-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.learn-more:empty {
  display: none;
}

/* The level column, one card (Task indoor, part d): its parts under rules */
.learn-status {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.learn-rail-sec {
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
}

.learn-rail-sec:first-child {
  border-block-start: 0;
}

.learn-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.learn-rail-title {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.6;
}

.learn-rail-value {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* what is left to master, under the bar (the owner, 17 Oct 2026), small and quieter */
.learn-mastery-need {
  margin: var(--space-2) 0 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  line-height: 1.7;
}

/* the panel's level steps: numbered buttons across its width, rising, the number at the foot of each */
.learn-ladder .learn-stairs {
  gap: var(--space-2);
}

.learn-ladder .learn-step {
  flex: 1;
  align-items: flex-end;
  inline-size: auto;
  padding-block-end: var(--space-1);
  border-width: var(--step-line);
  border-radius: var(--radius-small);
  color: var(--color-quiet);
  font-weight: 700;
  line-height: 1;
}

.learn-ladder .learn-step-1 { block-size: var(--rung); }
.learn-ladder .learn-step-2 { block-size: calc(var(--rung) + var(--rung-rise)); }
.learn-ladder .learn-step-3 { block-size: calc(var(--rung) + 2 * var(--rung-rise)); }
.learn-ladder .learn-step-4 { block-size: calc(var(--rung) + 3 * var(--rung-rise)); }
.learn-ladder .learn-step-5 { block-size: calc(var(--rung) + 4 * var(--rung-rise)); }

.learn-ladder .learn-step.is-empty:not(.is-current, .is-below) {
  color: var(--color-muted);
}

.learn-ladder span.learn-step {
  cursor: default;
}

.learn-ladder .learn-step:focus-visible {
  outline-width: 3px;
}

/* the offer of another level: on teal, its words bold, its two small buttons */
.learn-offer {
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-chip-teal);
}

.learn-offer.is-down {
  background: var(--color-chip-grey);
}

.learn-offer p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.7;
}

.learn-offer-do {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* the four counts, two by two: each its icon in a circle, its number and its word */
.learn-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
  list-style: none;
}

.learn-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.learn-count-icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border-radius: 50%;
}

.learn-count-icon .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
  stroke-width: 2.25;
}

.learn-count-words {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.learn-count-n {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.3;
}

.learn-count-label {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
}

.learn-count.is-right .learn-count-icon {
  background: var(--color-chip-teal);
  color: var(--color-on-text);
}

.learn-count.is-wrong .learn-count-icon {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.learn-count.is-streak .learn-count-icon {
  background: var(--color-hint);
  color: var(--color-flame-card);
}

.learn-count.is-points .learn-count-icon {
  background: var(--color-chip-yellow);
  color: var(--color-chip-yellow-text);
}

.learn-count.is-points .icon {
  fill: currentColor;
}

.learn-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.learn-stage:focus {
  outline: none;
}

.learn-item,
.learn-summary,
.learn-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.learn-qhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.learn-qnum {
  font-weight: 700;
}

.learn-chip {
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  font-size: var(--font-size-small);
}

.learn-chip.is-soft {
  background: var(--color-bg);
  color: var(--color-muted);
}

/* the clock, at the top's end with its icon (Task indoor, part d) */
.learn-clock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.learn-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.learn-instruction {
  margin: 0;
  color: var(--color-muted);
}

.learn-qbody.has-passage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.learn-passage {
  max-block-size: 30rem;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
  overflow-y: auto;
}

.learn-qmain {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

.learn-ask {
  margin: 0;
  font-weight: 700;
}

.learn-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.learn-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: calc(var(--control-height) * 1.2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.learn-option.is-locked {
  cursor: default;
}

.learn-option.is-right {
  border-color: var(--color-correct);
  color: var(--color-correct);
}

.learn-option.is-wrong {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* the option's own content takes the same colour (docBuilder content sets its own text colour) */
.learn-option.is-right .doc-content {
  --doc-text: var(--color-correct);
}

.learn-option.is-wrong .doc-content {
  --doc-text: var(--color-danger);
}

/* The letter in its circle is the choice, as on the old site: a grey ring; chosen, it fills teal; after answering the
   right letter fills teal and a wrong choice red. */
.learn-letter {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border: 2px solid var(--color-input-border);
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}

/* more than one right option: the letters are in squares, like check boxes */
.learn-options.is-multi .learn-letter {
  border-radius: var(--radius);
}

.learn-option.is-chosen .learn-letter,
.learn-option.is-right .learn-letter {
  border-color: var(--color-correct-fill);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-correct);
}

.learn-option.is-wrong .learn-letter {
  border-color: var(--color-danger-fill);
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-danger);
}

/* after answering, the right letter has no ring around it unless he chose it */
.learn-option.is-right:not(.is-chosen) .learn-letter {
  box-shadow: none;
}

.learn-option-body {
  flex: 1;
  min-inline-size: 0;
}

.learn-option-sign {
  flex: none;
  min-inline-size: var(--space-5);
  font-size: var(--font-size-title);
  font-weight: 700;
  text-align: center;
}

/* the hints he opened, before answering: each one shows again in the toast. Since Task indoor, part d, «تلميحاتك:» and
   amber chips, each with its lamp */
.learn-hint-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.learn-hint-chips-label {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.learn-hint-chip {
  min-block-size: var(--space-6);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-hint-line);
  background: var(--color-hint);
  color: var(--color-hint-text);
  font-family: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .learn-hint-chip:hover {
    border-color: var(--color-hint-edge);
  }
}

/* The hint's toast: at the bottom of the screen, on the start side (the right in Arabic). It doesn't move in; it
   is simply there, and closes after 3 seconds unless he closes it first. Amber, as the hints have always been: its
   edge at the start, its title with its lamp (Task indoor, part d; across the screen's foot on a phone). */
.learn-toast-place {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  z-index: 10;
  inline-size: min(var(--learn-toast), calc(100% - 2 * var(--space-4)));
}

.learn-toast-place:empty {
  display: none;
}

.learn-toast {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-block-size: 50dvh;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hint-line);
  border-inline-start: var(--hint-edge) solid var(--color-hint-edge);
  border-radius: var(--radius);
  background: var(--color-hint);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
}

.learn-toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.learn-toast-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-hint-text);
}

.learn-toast-close {
  white-space: nowrap;
}

.learn-toast-body {
  min-block-size: 0;
  overflow-y: auto;
}

/* (not a heading of a page made in htmlBuilder, which has its own look: docHtml.css, Task 1.7e) */
.learn-part h3:where(:not(.doc-html *)) {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-body);
}

.learn-solution {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.learn-part {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.learn-part.is-fast {
  background: var(--color-correct-soft);
}

.learn-steps {
  margin: 0;
  padding-inline-start: var(--space-5);
}

/* under an answered question: his time and the expected one (17 Oct 2026), then the share of students right. Since Task
   indoor, part d, a raised box: the lines with their icons, then under a rule the links and, at its end, the tools */
.learn-after {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.learn-time,
.learn-stats {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  line-height: 1.9;
}

.learn-time {
  font-variant-numeric: tabular-nums;
}

.learn-time .icon,
.learn-stats .icon {
  margin-block-start: calc(var(--space-1) / 2);
  color: var(--color-muted);
}

.learn-after-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-rule);
}

/* «ناقش هذا السؤال» and «اسأل عن هذا السؤال» (Task 8.4c): to the community, the session waiting here */
.learn-discuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--font-size-small);
}

.learn-discuss a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
}

/* practice's answered question: «احفظ للمراجعة» and «بلاغ عن مشكلة» in one row, at the row's end, quiet small buttons
   in the links' colour (Task indoor, part d; «احفظ للمراجعة» pressed is mistakes.css's) */
.learn-after-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

.learn-after-tools .button {
  gap: var(--space-1);
  min-block-size: var(--control-height-small);
  padding-inline: var(--space-2);
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--color-link);
  font-size: var(--font-size-small);
}

.learn-after-tools .button:hover {
  border-color: transparent;
  background: none;
  text-decoration: underline;
}

.learn-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.learn-actions-start,
.learn-actions-end,
.learn-summary-do {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.learn-big {
  min-inline-size: 9rem;
}

.button.is-armed {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ── A question on /learn (Task indoor, part d; the Learn-q board). «أخطائي»'s review shares the classes above and
   keeps their look until its own board («Later»). ── */

.learn-page .learn-item {
  gap: 0;
}

.learn-page .learn-qhead {
  gap: var(--space-2) var(--space-3);
}

.learn-page .learn-qnum {
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.learn-page .learn-item > :is(.learn-note, .learn-instruction, .learn-qbody) {
  margin-block-start: var(--space-4);
}

.learn-page .learn-qmain {
  gap: var(--space-4);
}

/* a question's picture that stands alone in its paragraph on white paper in both modes (pages/learn-page.js marks the
   paragraph; in dark mode the picture's white box was a stray one): a sheet the question's width, its line and its
   corners round the picture, which keeps its size; in a choice, the sheet the picture's own size. A picture in a line of
   words keeps its look. */
.learn-page .learn-paper {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-paper);
}

.learn-page .learn-paper .doc-img {
  vertical-align: middle;
}

.learn-page .learn-option-body .learn-paper {
  display: inline-block;
}

/* the choices: raised tiles, the letter in a grey circle; chosen, a dark line and the letter filled; answered, the right
   one filled teal, a wrong one he chose red (each its ✓ or ✗ at the end), his own letters ringed, the others dimmed;
   with more than one right answer, a right one he left out outlined teal, not filled */
.learn-page .learn-options {
  gap: var(--space-3);
}

.learn-page .learn-option {
  min-block-size: var(--option-height);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--site-option);
  color: var(--site-option-text);
  box-shadow: 0 var(--drop-card) 0 var(--site-option-drop);
  font-weight: 700;
}

.learn-page .learn-letter {
  inline-size: var(--letter);
  block-size: var(--letter);
  border: 0;
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: var(--font-size-small);
}

.learn-page .learn-options.is-multi .learn-letter {
  border-radius: var(--radius-small);
}

.learn-page .learn-option.is-chosen {
  border-color: var(--color-text);
}

.learn-page .learn-option.is-chosen .learn-letter {
  border: 0;
  background: var(--color-text);
  color: var(--color-surface);
  box-shadow: none;
}

.learn-page .learn-option.is-right:not(.is-missed),
.learn-page .learn-option.is-wrong {
  color: var(--site-on-option);
}

.learn-page .learn-option.is-right:not(.is-missed) {
  border-color: var(--site-option-right);
  background: var(--site-option-right);
  box-shadow: 0 var(--drop-card) 0 var(--site-option-right-drop);
}

.learn-page .learn-option.is-wrong {
  border-color: var(--site-option-wrong);
  background: var(--site-option-wrong);
  box-shadow: 0 var(--drop-card) 0 var(--site-option-wrong-drop);
}

.learn-page .learn-option.is-right:not(.is-missed) .learn-letter,
.learn-page .learn-option.is-wrong .learn-letter {
  background: var(--color-on-fill-soft);
  color: var(--site-on-option);
  box-shadow: none;
}

.learn-page .learn-option.is-right:not(.is-missed) .doc-content,
.learn-page .learn-option.is-wrong .doc-content {
  --doc-text: var(--site-on-option);
}

/* (his own, answered: a ring round the letter in the choice's words' colour, as before part d) */
.learn-page .learn-option.is-locked.is-chosen .learn-letter {
  box-shadow: 0 0 0 2px currentColor;
}

.learn-page .learn-option.is-missed {
  border-color: var(--site-option-right);
}

.learn-page .learn-option.is-missed .learn-letter {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.learn-page .learn-option.is-missed .learn-option-sign {
  color: var(--color-on-text);
}

/* (dimmed, its words still read well: the quiet colour, 4.5:1 at least) */
.learn-page .learn-option.is-dim {
  border-color: transparent;
  background: var(--site-option-dim);
  color: var(--color-muted);
  box-shadow: 0 var(--drop-card) 0 var(--site-option-dim-drop);
}

.learn-page .learn-option.is-dim .doc-content {
  --doc-text: var(--color-muted);
}

.learn-page .learn-option:focus-visible {
  outline: 3px solid var(--color-focus);
}

/* (a choice's last paragraph without the space under it, so its words sit in the middle beside its letter; a little room
   above and under them instead, for the letters' tails, so the box never scrolls and never takes the keyboard) */
.learn-page .learn-option-body {
  padding-block: var(--space-1);
}

.learn-page .learn-option-body .doc-content > :last-child {
  margin-block-end: 0;
}

.learn-page .learn-option-sign {
  display: inline-flex;
  min-inline-size: 0;
}

.learn-page .learn-option-sign .icon {
  stroke-width: 2.5;
}

.learn-page .learn-hint-chips {
  margin-block-start: var(--space-4);
}

/* the actions under a rule; «أجب» and «السؤال التالي» big at the end */
.learn-page .learn-actions {
  align-items: center;
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
}

.learn-page .learn-actions-start,
.learn-page .learn-actions-end {
  gap: var(--space-3);
}

.learn-page .learn-after {
  margin-block-start: var(--space-5);
}

.learn-page .learn-big {
  min-block-size: var(--control-height-large);
  min-inline-size: var(--button-big);
  padding-inline: var(--space-6);
  font-size: var(--font-size-card-title);
}

/* ── Under the question: the revision cards (since Task indoor, part d a card that folds: its button alone, folded) ── */

.learn-cards {
  padding: 0;
  overflow: hidden;
}

.learn-cards-title {
  margin: 0;
  font-size: var(--font-size-body);
}

.learn-cards-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.learn-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  max-block-size: 18rem;
  overflow-y: auto;
}

/* a card: a raised row, its file's icon, its title, «بطاقة هذا السؤال» a teal chip at its end */
.learn-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  inline-size: 100%;
  min-block-size: var(--link-row);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.learn-card-link:hover {
  border-color: var(--color-muted);
}

.learn-card-link .icon {
  color: var(--color-on-text);
}

.learn-card-name {
  flex: 1;
  min-inline-size: 0;
}

.learn-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.learn-card-titles {
  display: flex;
  flex-direction: column;
}

.learn-card-head .button {
  flex-shrink: 0;
  white-space: nowrap;
}

.learn-card-head h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

/* A revision card or the explanation opens on top of the page, which is dimmed behind it. It doesn't move in: it is simply there.
   Its corners and shadow are the kit's window's (Task indoor). */
.learn-dialog {
  inline-size: min(var(--content-width), calc(100% - 2 * var(--space-4)));
  max-inline-size: none;
  max-block-size: calc(100% - 2 * var(--space-6));
  padding: 0;
  border: none;
  border-radius: var(--radius-window);
  background: transparent;
  color: var(--color-text);
  box-shadow: var(--shadow-window);
}

/* the page behind doesn't scroll while the card is open */
body:has(.learn-dialog[open]) {
  overflow: hidden;
}

.learn-dialog .learn-card:focus {
  outline: none;
}

.learn-dialog::backdrop {
  background: var(--color-backdrop);
}

.learn-dialog .learn-card {
  max-block-size: calc(100dvh - 2 * var(--space-6));
  border-radius: var(--radius-window);
}

.learn-dialog .learn-dialog-body {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.learn-card-kind {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.learn-card {
  border-color: var(--color-primary);
}


/* «لحظات»: each line its icon, on its colour (points yellow, a level teal, days in a row amber, mastery teal) */
.learn-moments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.learn-moment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-small);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.6;
}

.learn-moment .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
}

.learn-moment.is-empty {
  padding: 0;
  color: var(--color-muted);
  font-weight: 400;
}

.learn-moment.is-points { background: var(--color-chip-yellow); color: var(--color-chip-yellow-text); }
.learn-moment.is-streak { background: var(--color-hint); color: var(--color-hint-text); }
.learn-moment.is-level,
.learn-moment.is-mastered,
.learn-moment.is-skill { background: var(--color-chip-teal); color: var(--color-chip-teal-text); }

/* the newest line moves a little, once */
.learn-moment.is-new {
  animation: learn-moment-in 0.4s ease-out;
}

@keyframes learn-moment-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-moment.is-new { animation: none; }
  .learn-layout,
  .learn-status,
  .learn-status-toggle .icon,
  .learn-fold-arrow { transition: none; }
}

/* ── The explanation's window (Task indoor, part d; the Learn-q-more board): 640px; its kind in teal over its title,
   «إغلاق الشرح» at the head's end; its parts raised, each title with its icon, the fast one on teal; the steps' numbers
   teal; «هل كان الشرح واضحاً؟» under a rule. (The revision cards' window, components/card-window.js, keeps its look.) ── */

.learn-explain {
  inline-size: min(var(--window-explain), calc(100% - 2 * var(--space-4)));
}

.learn-explain .learn-card-head {
  align-items: center;
}

.learn-explain .learn-card-kind {
  color: var(--color-on-text);
  font-weight: 700;
}

.learn-explain .learn-card-head h2 {
  font-size: var(--font-size-title);
  line-height: 1.5;
}

.learn-explain .learn-card-head .button {
  min-block-size: var(--control-height-small);
  padding-inline: var(--space-3);
  border-radius: var(--radius-small);
  font-size: var(--font-size-small);
}

.learn-explain .learn-solution {
  gap: var(--space-3);
}

.learn-explain .learn-part {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.learn-explain .learn-part.is-fast {
  background: var(--color-chip-teal);
}

.learn-part-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.learn-explain .learn-part-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.learn-part-title .icon {
  color: var(--color-on-text);
}

.learn-explain .learn-part.is-fast .learn-part-title {
  color: var(--color-chip-teal-text);
}

.learn-explain .learn-steps li::marker {
  color: var(--color-on-text);
  font-weight: 700;
}

/* ── The summary (since Task indoor, part d: the Learn-q-more board) ── */

.learn-summary {
  gap: 0;
}

.learn-summary:focus {
  outline: none;
}

.learn-summary-top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.learn-summary-robot {
  display: block;
  flex: none;
  inline-size: var(--state-robot);
  aspect-ratio: 69 / 49;
}

.learn-summary-words {
  min-inline-size: 0;
}

.learn-summary-words h2 {
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: 1.5;
}

.learn-summary-line {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
}

.learn-summary-cheer {
  margin: 0;
  color: var(--color-quiet);
}

/* the facts four in a row (two when the summary is narrower than 576px: a container query), the level's across two, or
   when «في الوقت» isn't there (.is-wider) as the rows want it, so none has a gap */
.learn-summary {
  container-type: inline-size;
}

.learn-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.learn-fact {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.learn-fact.is-wide {
  grid-column: span 2;
}

.learn-fact.is-wide.is-wider {
  grid-column: span 1;
}

@container (min-width: 36rem) {
  .learn-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .learn-fact.is-wide.is-wider {
    grid-column: span 3;
  }
}

.learn-fact dt {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.5;
}

.learn-fact dd {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.4;
}

.learn-moved {
  margin-block-start: var(--space-4);
}

.learn-moved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.learn-moved-head strong {
  color: var(--color-text);
}

.learn-summary-do {
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
}

/* «تدرّب أكثر», a card of its own under the summary: a row each, its icon, its name and questions, «تدرّب» at its end */
.learn-more-training h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
  line-height: 1.6;
}

.learn-more-training ul {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.learn-more-training li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-rule);
}

.learn-more-training li > .icon {
  color: var(--color-on-text);
}

.learn-more-name {
  flex: 1;
  min-inline-size: 0;
}

.learn-more-meta {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

/* ── Narrower screens ── */

@media (max-width: 70rem) {
  .learn-layout {
    grid-template-columns: var(--learn-panel-narrow) minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  /* on a phone the home's field title has a line of its own, then the field before at the start and the one after at
     the end, half the width each; a name too long for that ends with «…» (it's whole in the button's title) */
  .learn-pager {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-1) var(--space-2);
  }

  .learn-pager > .learn-pager-here {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .learn-pager-to.is-prev {
    grid-row: 2;
    grid-column: 1;
  }

  .learn-pager-to.is-next {
    grid-row: 2;
    grid-column: 2;
  }

  .learn-qbody.has-passage {
    grid-template-columns: minmax(0, 1fr);
  }

  .learn-sub {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .learn-sub-progress {
    grid-column: 1 / -1;
  }

  .learn-sub > button,
  .learn-sub > span:last-child {
    grid-column: 1 / -1;
  }

  .learn-item,
  .learn-summary,
  .learn-card {
    padding: var(--space-4);
  }
}

/* The subject list narrower (Task indoor, part d): the tiles and the two cards that link one under the other */
@media (max-width: 61.9375rem) {
  .learn-subskills.is-tiles,
  .learn-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* and on a phone (the Learn-phone board): the column's sides narrower, the cards closer to their words; the field's
   pager a row of its own under its name, the field before at the start and the one after at the end, half the width
   each; the marks smaller */
@media (max-width: 47.9375rem) {
  .learn-column {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }

  .learn-body {
    gap: var(--space-4);
  }

  .learn-body .card:not(.learn-field, .learn-status, .learn-cards) {
    padding: var(--space-4);
  }

  .page-band .learn-tabs {
    padding-block-start: var(--space-1);
  }

  .learn-field-head {
    padding: var(--space-3) var(--space-4);
  }

  .learn-field-pager {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-field-turn.is-prev {
    grid-column: 1;
  }

  .learn-field-turn.is-next {
    grid-column: 2;
  }

  .learn-field-mark,
  .learn-link-mark {
    inline-size: var(--mark-big-phone);
    block-size: var(--mark-big-phone);
  }

  .learn-field-mark .icon,
  .learn-link-mark .icon {
    inline-size: var(--mark-big-icon-phone);
    block-size: var(--mark-big-icon-phone);
  }

  .learn-link-card {
    gap: var(--space-3);
  }

  .learn-subskills.is-tiles {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .learn-tile {
    padding: var(--space-3);
  }

  .learn-tile-mark,
  .learn-ad-mark {
    inline-size: var(--mark-phone);
    block-size: var(--mark-phone);
  }

  .learn-tile-mark .icon {
    inline-size: var(--mark-icon-phone);
    block-size: var(--mark-icon-phone);
  }

  .learn-ad {
    align-items: flex-start;
    padding: var(--space-3);
  }

  /* (the row still answers to its link: no arrow, as the phone board) */
  .learn-ad-go {
    display: none;
  }

  .learn-duo {
    gap: var(--space-4);
  }
}

/* the subject icons (Task 2.4b) in the icons' teal (the home's rows) */
.learn-sub-name .icon {
  color: var(--color-on-text);
}

/* The revision cards fold up when the page opens; their title unfolds them (since Task indoor, part d: the book's icon,
   the title and its count, the arrow at its end, which turns over while they're open; open, a rule under it) */
.learn-fold {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--fold-height);
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.learn-fold[aria-expanded="true"] {
  border-block-end: 1px solid var(--color-rule);
}

.learn-fold .icon {
  color: var(--color-on-text);
}

.learn-fold-n {
  color: var(--color-quiet);
  font-weight: 400;
}

.learn-fold .learn-fold-arrow {
  margin-inline-start: auto;
  color: var(--color-muted);
  transition: transform 0.2s ease-out;
}

.learn-fold[aria-expanded="true"] .learn-fold-arrow {
  transform: scaleY(-1);
}

.learn-fold:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.learn-keys {
  color: var(--color-muted);
}

/* ── A session on a phone (Task indoor, part d; the Learn-q-phone board): the head's words smaller; the panel one short
   card above the question (its parts closer, the steps lower, the offer's buttons two halves, the counts four in a
   row, of «لحظات» the newest only); the question closer to its card's edge; its actions two by two, «أجب» and «السؤال
   التالي» across; the toast across the screen's foot ── */
@media (max-width: 47.9375rem) {
  .learn-page .work-head {
    flex-wrap: nowrap;
    padding-block: 0 var(--space-3);
  }

  .learn-page .work-head-title {
    font-size: var(--font-size-title);
  }

  .learn-page .work-head-title .icon {
    inline-size: var(--mark-icon);
    block-size: var(--mark-icon);
  }

  /* one under the other: the level column, the question, the side column (until part d up to 768px: the app's
     phone width since part b) */
  .learn-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "status"
      "stage"
      "more";
    gap: var(--space-3);
  }

  /* the level column above the question: closed, it's simply gone */
  .learn-layout.is-status-closed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "more";
  }

  .learn-end-long {
    display: none;
  }

  .learn-end-short {
    display: inline;
  }

  .learn-status-toggle .icon {
    transform: rotate(-90deg);
  }

  .learn-status-toggle[aria-expanded="false"] .icon {
    transform: rotate(90deg);
  }

  .learn-rail-sec {
    padding: var(--space-3);
  }

  .learn-rail-head {
    margin-block-end: var(--space-2);
  }

  .learn-ladder .learn-step-1 { block-size: var(--rung-phone); }
  .learn-ladder .learn-step-2 { block-size: calc(var(--rung-phone) + var(--rung-rise-phone)); }
  .learn-ladder .learn-step-3 { block-size: calc(var(--rung-phone) + 2 * var(--rung-rise-phone)); }
  .learn-ladder .learn-step-4 { block-size: calc(var(--rung-phone) + 3 * var(--rung-rise-phone)); }
  .learn-ladder .learn-step-5 { block-size: calc(var(--rung-phone) + 4 * var(--rung-rise-phone)); }

  .learn-offer-do {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-counts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-3);
  }

  .learn-count {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "icon n"
      "label label";
    justify-content: center;
    align-items: center;
    gap: 0 var(--space-1);
    padding: var(--space-1);
    text-align: center;
  }

  .learn-count-icon {
    grid-area: icon;
    inline-size: auto;
    block-size: auto;
    background: none;
  }

  .learn-count.is-right .learn-count-icon,
  .learn-count.is-wrong .learn-count-icon,
  .learn-count.is-streak .learn-count-icon,
  .learn-count.is-points .learn-count-icon {
    background: none;
  }

  .learn-count-words {
    display: contents;
  }

  .learn-count-n {
    grid-area: n;
    font-size: var(--font-size-card-title);
  }

  .learn-count-label {
    grid-area: label;
    font-size: var(--font-size-tiny);
  }

  /* of «لحظات», the newest line only, beside its title */
  .learn-moments {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .learn-moments .learn-rail-title {
    font-size: var(--font-size-small);
    color: var(--color-quiet);
  }

  .learn-moments-list {
    margin: 0;
  }

  .learn-moment:not(:first-child) {
    display: none;
  }

  .learn-moment {
    padding-block: 0;
    border-radius: var(--radius-pill);
  }

  .learn-page .learn-actions,
  .learn-page .learn-actions-start {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-page .learn-actions {
    gap: var(--space-3);
  }

  .learn-page .learn-actions-start,
  .learn-page .learn-actions-end {
    grid-column: 1 / -1;
  }

  .learn-page .learn-actions-start:empty {
    display: none;
  }

  /* (an odd one last across too) */
  .learn-page .learn-actions-start > .button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .learn-page .learn-actions-end > .button {
    inline-size: 100%;
  }

  .learn-page .learn-actions .button {
    padding-inline: var(--space-2);
  }

  .learn-page .learn-after-tools {
    margin-inline-start: 0;
  }

  .learn-page .learn-after-tools .button {
    padding-inline: var(--space-1);
  }



  .learn-toast-place {
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
    inline-size: auto;
  }

  .learn-summary-top {
    gap: var(--space-3);
  }

  .learn-summary-robot {
    inline-size: var(--state-robot-phone);
  }

  .learn-summary-do > .button {
    flex: 1 1 100%;
  }
}