/* The student home (Task 2.4a): hello and points, what to do now, and progress by category and field. Since Task indoor,
   part c (the boards Home and Home-phone the owner approved on the canvas, docs/design/indoor/): the navy band
   (components/page-band.js, base.css) with his points and days in a row as tiles and the keys, then «الرئيسية» in two
   columns on the outdoor pages' column (1200px): what to do today, and at its side «دورتي», «سؤال اليوم» and «روابط».
   Colours and sizes come from tokens.css only; nothing moves but a lecture's live dot. */
.home-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* a block, so the room the keys bar keeps at the foot on a phone (nav-bar.css, `.has-view-keys`) is room */
home-page {
  display: block;
}

/* signed in, the page runs the screen's width (its band), and what's under the band keeps the outdoor pages' column */
.app-main:has(> .home-page:not(.is-landing)) {
  max-inline-size: none;
  padding: 0;
}

.home-page:not(.is-landing) > .home-column {
  max-inline-size: var(--site-wrap);
  margin-inline: auto;
  padding: var(--space-5) var(--site-gutter) var(--space-7);
}

/* the home's own views (Task home-views): «الرئيسية», «جاهزيتك» and «تقدّمك», since 26 Oct 2026 the keys bar's
   (nav-bar.css, components/view-keys.js; since part c in the band), and the chosen one's cards under it */
home-page .vk-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* on a phone the bar starts with «رئيسية», the way home: on the home itself it isn't there (its first key is
   «الرئيسية») */
home-page .vk-home {
  display: none;
}

/* ── The band's tiles (part c): his points and his days in a row ────────────────────────────────────────────── */

.home-page .page-band-robot {
  inline-size: var(--band-robot-home);
}

.home-stat-icon {
  inline-size: var(--tile-icon);
  block-size: var(--tile-icon);
}

/* the star filled, yellow; the flame amber */
.home-stat.is-points .home-stat-icon {
  color: var(--site-yellow);
  fill: currentColor;
}

.home-stat.is-streak .home-stat-icon {
  color: var(--color-flame);
}

.home-stat-words {
  min-inline-size: 0;
}

.home-stat-n {
  margin: 0;
  color: var(--site-navy-title);
  font-size: var(--font-size-tile);
  font-weight: 700;
  line-height: 1.4;
}

.home-stat-unit {
  color: var(--site-navy-text);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.home-stat-line {
  margin: 0;
  color: var(--site-navy-text);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

.home-stat a {
  color: var(--color-navy-link);
  font-weight: 700;
  white-space: nowrap;
}

.home-stat a:hover {
  color: var(--site-navy-title);
}

/* «شارك في المجتمع» at a milestone (Task 8.10b) under his days in a row: as the tile's links */
.home-stat .ach-line {
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--font-size-small);
}

.home-stat .ach-share {
  justify-content: flex-start;
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-navy-link);
  font-size: var(--font-size-small);
  text-align: start;
}

/* (as the board's link, no icon) */
.home-stat .ach-share .icon {
  display: none;
}

.home-stat .ach-share:hover {
  background: none;
  color: var(--site-navy-title);
}

.home-stat .ach-status {
  color: var(--site-navy-text);
}

/* ── «الرئيسية»'s two columns (part c): what to do today, and at its side 370px (one column under 1060px) ────── */

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--home-side);
  align-items: start;
  gap: var(--space-5);
}

.home-main,
.home-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-inline-size: 0;
}

@media (max-width: 66.25rem) {
  .home-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a card's title on the home (the kit's) */
.home-card-title,
.home-placement h2,
.home-plan-invite h2,
.home-daily h2,
.home-readiness h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.6;
}

/* the session to continue and the suggestion, side by side when there's room */
.home-now {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}

.home-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-next h2 {
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-next-name {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.6;
}

.home-next .home-help {
  margin-block-end: var(--space-3);
}

.home-next .button {
  margin-block-start: auto;
}

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

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

/* The chosen category's panel under the tabs (components/category-tabs.ts): its bar and fields, or after «تدرّب» that
   field's subskills (the owner, 17 Oct 2026). They slide like pages: a field's subskills come in from the end side (the
   left in Arabic) and push the fields out the other way; «رجوع» does the opposite. The view going out lies over the
   card's padding box until it is out (pages/home-page.ts, showView). Nothing moves with "reduce motion". The panel
   clips both; clip, not hidden, so moving the keyboard into a view can't scroll the panel sideways. */
.home-cat {
  --home-end: 1;
  position: relative;
  overflow: clip;
}

.home-cat:dir(rtl) {
  --home-end: -1;
}

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

.home-view.is-forward {
  --home-from: var(--home-end);
  animation: home-slide-in 0.3s ease-out;
}

.home-view.is-back {
  --home-from: calc(-1 * var(--home-end));
  animation: home-slide-in 0.3s ease-out;
}

.home-view.is-leaving {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline: var(--space-5);
  animation: home-slide-out 0.3s ease-out forwards;
}

.home-view.is-forward ~ .home-view.is-leaving {
  --home-to: calc(-1 * var(--home-end));
}

.home-view.is-back ~ .home-view.is-leaving {
  --home-to: var(--home-end);
}

@keyframes home-slide-in {
  from { transform: translateX(calc(var(--home-from) * 100%)); }
  to { transform: none; }
}

@keyframes home-slide-out {
  to { transform: translateX(calc(var(--home-to) * 100%)); }
}

@media (prefers-reduced-motion: reduce) {
  .home-view.is-forward,
  .home-view.is-back {
    animation: none;
  }

  .home-view.is-leaving {
    display: none;
  }
}

/* a field's subskills: «رجوع»; the field's name between the fields before and after it (learn.css's pager); how many
   are mastered and the percent; its bar; then the rows (learn.css), with their tags */
.home-view > .home-back {
  align-self: flex-start;
}

.home-back::before {
  content: "→ " / "";
}

.home-pager {
  margin-block-end: 0;
}

.home-sub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

/* «اقتراح لك» and «تابع التدريب» after a subskill's name, as the cards at the top of the page call them */
.home-mark {
  padding: 0 var(--space-2);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: var(--font-size-small);
  font-weight: 400;
  white-space: nowrap;
}

.home-mark.is-next {
  border-color: var(--color-info-soft);
  background: var(--color-info-soft);
  color: var(--color-primary);
}

.home-mark.is-open {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.home-sub-title {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.home-sub-title:focus {
  outline: none;
}

.home-sub-title .icon {
  color: var(--color-on-text);
}

.home-field-name .icon,
.home-next-name .icon {
  color: var(--color-on-text);
}

.home-percent {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-bar {
  display: block;
  block-size: var(--meter-height);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-track);
}

.home-bar-fill {
  display: block;
  block-size: 100%;
  background: var(--color-on);
}

.home-bar-fill.is-full {
  background: var(--color-success);
}

/* a category's fields: two columns on a wide screen, one on a narrow one (the owner, 22 Oct 2026, Task home-views;
   learn.css's 48rem) */
.home-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 48rem) {
  .home-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a field: its name and count, its percent, «تدرّب», and its bar under them */
.home-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.home-field .home-bar {
  grid-column: 1 / -1;
}

.home-field-words {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.home-field-name {
  font-weight: 700;
}

.home-go {
  min-block-size: auto;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-small);
}

/* «روابط» (part c): a row each, its teal icon, its name and an arrow at its end */
.home-links-list {
  display: grid;
  gap: calc(var(--space-1) / 2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.home-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--link-row);
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  color: var(--color-text);
  text-decoration: none;
}

.home-link:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

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

.home-link .home-link-go {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
  margin-inline-start: auto;
  color: var(--color-muted);
}

/* ── The question of the day (Task 8.9b; since part c in the side column, the Home board's) ─────────────────────── */

/* the placement test (Task study-plan): offered under the greeting, with «لاحقاً», or his started one to finish */
.home-placement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.home-placement p {
  margin: 0;
}

.home-placement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* today's question: its day and exam under its title, the question in a raised box (its subskill in a teal chip), and
   «أجب» or what he answered with «النقاش ←», and his days in a row by the flame */
.home-daily {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.home-daily .cm-question {
  align-self: stretch;
  margin-block-start: var(--space-1);
  padding: var(--space-3);
  border-color: var(--color-border);
  background: var(--color-raised);
}

.home-daily .cm-tag {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--chip-height);
  padding-block: calc(var(--space-1) / 2);
  border-radius: var(--radius);
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
  line-height: 1.6;
}

.home-daily-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.home-daily .cm-daily-streak {
  color: var(--color-quiet);
  font-weight: 700;
}

.home-daily .cm-daily-streak.is-kept {
  color: var(--color-text);
}

.home-daily .cm-daily-streak .icon {
  color: var(--color-flame-card);
}

/* «جاهزيتك» (Task 5.4d): the estimate or what's missing, each field with its share and bar (or the answers it still
   needs), and the field to grow with «تدرّب» */
.home-readiness {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

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

.home-readiness-estimate,
.home-readiness-need {
  margin: 0;
  font-weight: 700;
}

.home-readiness-estimate {
  font-size: var(--font-size-card-title);
}

.home-readiness-fields {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a field: its name, its share or the answers it needs, and its bar under them */
.home-readiness-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.home-readiness-field .home-bar {
  grid-column: 1 / -1;
}

.home-readiness-grow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.home-readiness-grow p {
  margin: 0;
  font-weight: 700;
}

/* ── «سجل النقاط» (/points, Task 5.4b) ─────────────────────────────────────────────────────────────────────────── */

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

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

/* one line: what gave the points and when, then the points at its end */
.pts-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pts-what {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.pts-text {
  overflow-wrap: anywhere;
}

.pts-meta {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.pts-amount {
  flex-shrink: 0;
  color: var(--color-text);
}

.pts-empty {
  color: var(--color-muted);
}

.pts-more {
  align-self: center;
}

.pts-more-status {
  align-self: center;
  margin: 0;
  color: var(--color-danger);
}

.pts-more-status:empty {
  display: none;
}

/* «دورتي» (Task 7.20): his courses, and those he teaches (components/home-courses.js); since part c one card in the side
   column, each course a part of it under a line: its name, its dates, its next lecture in a raised box, his homework,
   where he left off, his lessons done and «صفحة الدورة ←» */
.home-courses {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-courses-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-course {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.home-course + .home-course {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
}

.home-course-name {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.6;
}

.home-course-name a {
  color: var(--color-text);
  text-decoration: none;
}

.home-course-name a:hover {
  text-decoration: underline;
}

.home-course-dates,
.home-course-state {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.home-course-state.is-pending {
  color: var(--color-draft);
}

/* its next lecture in a raised box; then his homework (Task homework, part a3), where he left off and his lessons
   done, each under a line */
.home-course-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.home-course-homework,
.home-course-resume,
.home-course-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-rule);
}

.home-course-done {
  align-items: stretch;
}

/* each homework a line: its title, leading to «الواجبات», and how far and when under it */
.home-course-hw-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-course-hw {
  display: flex;
  flex-direction: column;
}

.home-course-hw-title {
  font-weight: 700;
}

.home-course-hw-text {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.home-course-label {
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-course-lecture {
  margin: 0;
  font-weight: 700;
}

.home-course-line {
  margin: 0;
}

/* its day and time, and the time left in a teal chip */
.home-course-next .home-course-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

.home-course-next > .crs-buttons,
.home-course-resume > .button {
  margin-block-start: var(--space-2);
}

.home-course-page {
  align-self: flex-start;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* ── «خطتي» (Task study-plan, part b1): «خطتي اليوم» on the home, its invitation, and /plan ─────────────────────── */

/* the invitation, while he has no plan */
.home-plan-invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* the card (since part c the Home board's): its title with «تعديل», the facts, today's lines, and this week's days */
.home-plan {
  display: flex;
  flex-direction: column;
}

.home-plan-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.home-plan-edit {
  margin-inline-start: auto;
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* (the card after his exam's date: when it was) */
.home-plan-days {
  margin: var(--space-2) 0 0;
  font-weight: 700;
}

/* the facts: the days left on the navy in big yellow figures (the same in both modes), his goal, and «تقديرنا»; side by
   side (the days the widest, «تقديرنا»'s words the longest), each a raised tile */
.home-facts {
  display: flex;
  gap: var(--space-3);
  margin-block: var(--space-3) var(--space-1);
}

.home-fact {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: var(--fact-height);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.home-fact.is-days {
  flex-grow: 1.15;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  border-color: var(--site-navy);
  background: var(--site-navy);
}

/* (the days left as wide as their words, each line on one line: the other two share what's left) */
.home-fact.is-days:not(.is-words) {
  flex: none;
}

.home-fact.is-days:not(.is-words) .home-fact-words {
  white-space: nowrap;
}

.home-fact.is-guess {
  flex-grow: 1.35;
}

.home-fact-label {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-fact-n {
  color: var(--color-text);
  font-size: var(--font-size-fact);
  font-weight: 700;
  line-height: 1.3;
}

.home-fact-of {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.home-fact-t {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  line-height: 1.7;
}

.home-fact.is-days .home-fact-n {
  color: var(--site-yellow);
  font-size: var(--font-size-days);
  line-height: 1.1;
}

.home-fact-words {
  min-inline-size: 0;
}

.home-fact-w {
  display: block;
  color: var(--site-navy-title);
  font-weight: 700;
  line-height: 1.5;
}

.home-fact-s {
  display: block;
  color: var(--site-navy-text);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* today's lines, each under a line: its round mark (teal; filled with ✓ once done; red while its lecture is on), then
   its words, and its button at the row's end */
.home-plan-lines {
  display: flex;
  flex-direction: column;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.home-plan-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
}

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

.home-plan-mark .icon {
  inline-size: var(--plan-mark-icon);
  block-size: var(--plan-mark-icon);
}

.home-plan-line.is-done .home-plan-mark {
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
}

.home-plan-line.is-live .home-plan-mark {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

.home-plan-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-inline-size: 0;
}

.home-plan-body .home-bar {
  align-self: stretch;
}

.home-plan-row {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.home-plan-row > .button,
.home-plan-share {
  margin-inline-start: auto;
}

.home-plan-what {
  min-inline-size: 0;
}

.home-plan-title {
  margin: 0;
  font-weight: 700;
}

.home-plan-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

/* today's share by today's questions */
.home-plan-share {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-plan-help {
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

/* today's two fields, side by side: each a raised tile, its icon, its count and «تدرّب» at its end */
.home-plan-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-plan-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3) var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.home-plan-field-name {
  min-inline-size: 0;
}

.home-plan-field-name .icon {
  color: var(--color-on-text);
}

.home-plan-field > .button {
  margin-inline-start: auto;
}

.home-plan-field.is-done .home-plan-field-name {
  color: var(--color-success);
}

/* this week's days, Sunday to Saturday: each one's letter over its round mark (done filled teal with ✓, missed grey
   with −, today ringed, the days to come and those before his plan lighter), then how many were done */
.home-plan-week {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-rule);
}

.home-plan-week-title {
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-plan-weekdays {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-plan-weekday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
}

.home-plan-daymark {
  display: grid;
  place-items: center;
  inline-size: var(--plan-day);
  block-size: var(--plan-day);
  border: 2px dashed var(--color-input-border);
  border-radius: 50%;
}

.home-plan-daymark .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
  stroke-width: 2.5;
}

.home-plan-weekday.is-met .home-plan-daymark {
  border: 2px solid var(--color-correct-fill);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
}

.home-plan-weekday.is-missed .home-plan-daymark {
  border: 2px solid var(--color-chip-grey);
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
}

.home-plan-weekday.is-today {
  color: var(--color-text);
}

.home-plan-weekday.is-today .home-plan-daymark {
  border: 2px solid var(--color-text);
}

.home-plan-weekday.is-later .home-plan-daymark {
  border-style: solid;
  border-color: var(--color-rule);
}

.home-plan-week-count {
  margin: 0;
  margin-inline-start: auto;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* (part b2) after his exam's date: «كيف كان اختبارك؟» with its box, or his real score's words; the way on under them */
.home-plan-after {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-rule);
}

.home-plan-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.home-plan-result h3 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.home-plan-result p {
  margin: 0;
}

.home-plan-score {
  font-size: var(--font-size-title);
  font-weight: 700;
}

.home-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* (a line's link to /plan in one piece: «إلى خطتي», «حدّد موعده الجديد») */
.home-plan-wait a {
  white-space: nowrap;
}

/* ── «الرئيسية» narrower (part c) ─────────────────────────────────────────────────────────────────────────────── */

/* (the board's narrower look: its robot smaller) */
@media (max-width: 61.9375rem) {
  .home-page .page-band-robot {
    inline-size: var(--band-robot-home-narrow);
  }
}

/* a phone (the Home-phone board): the column's sides narrower; the tiles' words smaller; the facts two in a row, the
   days across; a line's button under its words (a lecture's door the line's width), the buttons a phone's height; the
   fields one under the other; the week's title and count over its days, which run the card's width; «تابع التدريب» and
   «اقتراح لك» as rows, the button at the end */
@media (max-width: 47.9375rem) {
  .home-page:not(.is-landing) > .home-column {
    padding: var(--space-4) var(--space-4) var(--space-5);
  }

  .home-page .page-band-robot {
    inline-size: var(--band-robot-home-phone);
  }

  .home-stat-icon {
    inline-size: var(--tile-icon-phone);
    block-size: var(--tile-icon-phone);
  }

  .home-stat-n {
    font-size: var(--font-size-tile-phone);
  }

  /* (this week's points and «سجل النقاط ←» each a line of their own) */
  .home-stat-line > span:not(.home-stat-dot) {
    display: block;
  }

  .home-stat-dot {
    display: none;
  }

  .home-main,
  .home-side {
    gap: var(--space-4);
  }

  /* (a phone's cards closer to their words, as the board's) */
  .home-layout .card {
    padding: var(--space-4);
  }

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

  .home-fact {
    min-block-size: var(--fact-height-phone);
    padding: var(--space-2) var(--space-3);
  }

  .home-fact.is-days {
    grid-column: 1 / -1;
  }

  .home-fact.is-days:not(.is-words) .home-fact-words {
    white-space: normal;
  }

  .home-fact-n {
    font-size: var(--font-size-fact-phone);
  }

  .home-fact.is-days .home-fact-n {
    font-size: var(--font-size-days-phone);
  }

  .home-plan-line {
    padding-block: var(--space-3);
  }

  .home-plan-mark {
    inline-size: var(--plan-mark-phone);
    block-size: var(--plan-mark-phone);
  }

  .home-plan-row:not(.is-count) {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-plan-row:not(.is-count) > .button {
    margin-inline-start: 0;
  }

  .home-plan-lecture .home-plan-row > .button {
    align-self: stretch;
  }

  .home-plan .button-small,
  .home-courses .button-small {
    min-block-size: var(--control-height);
    padding-inline: var(--space-4);
    font-size: var(--font-size-body);
  }

  .home-plan-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-plan-field {
    font-size: var(--font-size-small);
  }

  /* (a field's own icon left out, as the board's; ✓ once done kept) */
  .home-plan-field:not(.is-done) .home-plan-field-name .icon {
    display: none;
  }

  .home-plan-week {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .home-plan-week-title {
    grid-row: 1;
  }

  .home-plan-week-count {
    grid-row: 1;
    grid-column: 2;
  }

  .home-plan-weekdays {
    grid-column: 1 / -1;
    justify-content: space-between;
    max-inline-size: var(--plan-week-phone);
  }

  .home-plan-daymark {
    inline-size: var(--plan-day-phone);
    block-size: var(--plan-day-phone);
  }

  .home-now {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .home-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
  }

  .home-next > :not(.button) {
    grid-column: 1;
  }

  .home-next > .button {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .home-next .home-help {
    margin: 0;
  }
}

/* (the seven days on one line on the narrowest phones too) */
@media (max-width: 22rem) {
  .home-plan-weekdays {
    gap: var(--space-1);
  }

  .home-plan-daymark {
    inline-size: var(--plan-day-narrow);
    block-size: var(--plan-day-narrow);
  }
}

/* /plan: the form, a column the page's width at most */
.plan-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan-page h1 {
  margin: 0;
}

.plan-back {
  align-self: flex-start;
  font-size: var(--font-size-small);
  font-weight: 700;
}

.plan-form {
  max-inline-size: 32rem;
}

/* (part b2) his exam's date passed: a new one asked */
.plan-passed {
  margin: 0;
  font-weight: 700;
}

.plan-date,
.plan-select {
  align-self: flex-start;
  min-inline-size: 12rem;
}

.plan-number {
  align-self: flex-start;
  inline-size: 8rem;
}

.plan-date:disabled {
  opacity: 0.6;
}

.plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}