/* Class units (TeachingUnit; design: Claude Design "Class Units"): the teacher's list, new unit, review, part
   editors and results (teach/units/*), and the student's unit path (classes/unit). States are chips with an icon and
   a word; a left-out part is a dashed card. */
.units { gap: 16px; }
.units__back { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.units__back:hover { color: var(--clay); text-decoration: none; }
[dir="rtl"] .units__flip { display: inline-block; transform: scaleX(-1); }
.units__muted { color: var(--text-muted); }
.units__fine { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.units__label { font-size: 14px; font-weight: 700; color: var(--ink); }
.units__eyebrow { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.units__eyebrow--clay { color: var(--clay); }
.units__eyebrow--peach { color: var(--peach); }
:lang(ar) .units__eyebrow { letter-spacing: 0; }
.units__taught { font-size: 1.2em; line-height: 1.5; }
.units__section-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; }

/* Buttons */
.units__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; }
.units__btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.units__btn--ink:hover { color: var(--paper); text-decoration: none; opacity: .92; }
.units__btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong, var(--line)); }
.units__btn--outline:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.units__btn--text { background: none; color: var(--clay); }
.units__btn--off { background: var(--text-muted); color: var(--paper); cursor: default; }
.units__btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.units__btn--lg { min-height: 50px; padding: 0 24px; font-size: 16px; }
.units__btn--block { width: 100%; }
.units__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.units__actions form { margin: 0; }

/* 1 · The list */
.units__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.units__head-copy { display: flex; flex-direction: column; gap: 6px; }
.units__head .page-title { margin: 0; }
.units__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 560px; }
.units__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; font-weight: 600; }
.units__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.units__pill-dot--used { background: var(--clay); }
.units__plan-note { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.units__plan-note a { font-weight: 600; color: var(--clay); }
.units__upsell { background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px; padding: 18px 20px; display: grid;
  grid-template-columns: minmax(0, 1fr) 240px; gap: 14px 24px; align-items: center; }
.units__upsell-copy { display: flex; flex-direction: column; gap: 6px; }
.units__upsell-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.units__upsell-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.units__upsell-action { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.units__empty { background: var(--card); border: 1px dashed var(--text-muted); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.units__empty-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
.units__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.units__steps li { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--ink); padding-top: 10px; font-size: 14px; line-height: 1.45; }
.units__steps li span:last-child { color: var(--text-muted); }
.units__step-n { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--clay); }
.units__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.units__card { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.units__card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.units__unit-head .units__card-top { justify-content: flex-start; }
.units__level { background: var(--sand); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.units__status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: var(--sand); color: var(--ink); }
.units__status--review { background: var(--clay-soft); }
.units__status--assigned { background: var(--green-soft); color: var(--green); }
.units__card-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.units__card-title a { color: var(--ink); text-decoration: none; }
.units__card-title a::after { content: ""; } /* the footer link opens it too */
.units__card-goal { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.units__card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line);
  padding-top: 10px; font-size: 13px; color: var(--text-muted); }
.units__card-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-weight: 700; color: var(--clay); text-decoration: none; }

/* 2 · New unit */
.units__new { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.units__panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.units__form { display: flex; flex-direction: column; gap: 16px; }
.units__goal { border: 1.5px solid var(--ink); font-size: 16px; line-height: 1.45; }
.units__goal:focus { outline: 3px solid var(--clay-soft); outline-offset: 1px; }
.units__levels { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.units__level-options { display: flex; gap: 6px; flex-wrap: wrap; }
.units__level-option input { position: absolute; opacity: 0; pointer-events: none; }
.units__level-option span { display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.units__level-option input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.units__level-option input:focus-visible + span { outline: 3px solid var(--clay-soft); outline-offset: 2px; }
.units__optional { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.units__optional[open] { gap: 8px; }
.units__optional summary { font-size: 15px; font-weight: 700; cursor: pointer; min-height: 32px; }
.units__optional summary span { font-weight: 400; color: var(--text-muted); }
.units__optional .field__hint { display: block; margin: 8px 0; }
.units__taught-input { font-size: 19px; line-height: 1.8; }
.units__form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.units__next { background: var(--sand); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.units__next-title { margin: 0; font-size: 15px; font-weight: 700; }
.units__next ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }

/* 3 · Review */
.units__unit-head { display: flex; flex-direction: column; gap: 8px; }
.units__unit-head .page-title { margin: 0; }
.units__goal-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.units__goal-line strong { color: var(--ink); }
.units__drafting { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.units__drafting-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.units__drafting-step { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
.units__drafting-line { height: 5px; border-radius: 5px; background: var(--green); }
.is-busy .units__drafting-line { background: var(--line); animation: units-breath 1.6s ease-in-out infinite; }
@keyframes units-breath { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes units-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.units__refused { background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.units__refused p { margin: 0; font-size: 15px; line-height: 1.55; }
.units__refused-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
.units__parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.units__part { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; scroll-margin-top: 80px; animation: units-in .3s ease-out both; }
.units__part--failed { border: 1.5px solid var(--ink); }
.units__part--removed { background: transparent; border: 1.5px dashed var(--text-muted); }
.units__part--removed .units__part-title { color: var(--text-muted); }
.units__part-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.units__part-number { width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; }
.units__part--ready .units__part-number, .units__part--edited .units__part-number { background: var(--ink); color: var(--paper); }
.units__part-name { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 1px; }
.units__part-title { font-size: 17px; font-weight: 700; }
.units__state { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; background: var(--sand); color: var(--ink); }
.units__state--ready { background: var(--clay-soft); }
.units__state--edited { background: var(--green-soft); }
.units__state--removed { background: transparent; }
.units__state--drafting .units__state-icon { animation: units-breath 1.6s ease-in-out infinite; }
.units__part-note { margin: 0; padding: 0 16px 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.units__skeleton { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.units__skeleton span { height: 12px; width: 70%; border-radius: 6px; background: var(--line); }
.units__skeleton span + span { width: 52%; }
.units__part-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.units__part .units__actions { padding: 0 16px 14px; }

.units__expl { display: flex; flex-direction: column; gap: 12px; }
.units__expl-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.3; }
.units__expl-intro { margin: 0; font-size: 15px; line-height: 1.6; max-width: 760px; }
.units__table-wrap { max-width: 100%; overflow-x: auto; align-self: flex-start; }
.units__table { border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 420px; }
.units__table th { text-align: start; padding: 8px 14px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); background: var(--sand); }
.units__table td { padding: 6px 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; text-align: start; }
.units__table .units__taught { font-size: 19px; }
.units__examples { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.units__examples li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.units__example { font-size: 24px; line-height: 1.9; }
.units__reading { font-size: 14px; color: var(--text-muted); }
.units__meaning { font-size: 14px; font-weight: 600; }
.units__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.units__tips { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.units__book { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.units__book-cover { width: 46px; height: 60px; border-radius: 6px; background: var(--green); flex-shrink: 0; }
.units__book-copy { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.units__book-title { font-size: 22px; line-height: 1.6; }
.units__excerpt { margin: 0; font-size: 21px; line-height: 1.9; border-inline-start: 3px solid var(--line); padding-inline-start: 14px; }
.units__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.units__chips li { display: inline-flex; align-items: baseline; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 14px; }
.units__chip-word { font-size: 21px; line-height: 1.7; }
.units__chip-gloss { font-size: 13px; color: var(--text-muted); }
.units__speak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.units__speak-open { background: var(--ink); color: var(--paper); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.units__speak-line { font-size: 23px; line-height: 1.9; }
.units__speak-meaning { font-size: 14px; color: var(--sand); }
.units__speak-side { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.units__speak-side p { margin: 0; }
.units__questions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.units__questions > li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.units__question-line { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.units__question-n { font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.units__question-sentence { flex: 1; font-size: 22px; line-height: 1.8; }
.units__options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.units__options li { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 2px 12px; font-size: 19px; line-height: 1.7; }
.units__options li.is-right { border-color: var(--green); background: var(--green-soft); }
.units__right-tag { font-size: 12px; font-weight: 700; color: var(--green); }

.units__approve { background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.units__approve-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.units__approve-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
.units__approve-fields, .units__approve-get { display: flex; flex-direction: column; gap: 12px; }
.units__approve-get [type="submit"] { margin-top: auto; }
.units__get { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.45; }
.units__get li.is-out { color: var(--text-muted); text-decoration: line-through; }
.units__assigned { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.units__assigned-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }

/* 4 · Editors */
.units__edit-form { gap: 14px; }
.units__edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.units__edit-grid .field { display: flex; flex-direction: column; gap: 5px; }
.units__span { grid-column: 1 / -1; }
.units__eq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.units__eq-item details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.units__eq-item details[open] { border: 1.5px solid var(--ink); }
.units__eq-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.units__eq-summary::-webkit-details-marker { display: none; }
.units__eq-n { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.units__eq-text { flex: 1; min-width: 0; font-size: 19px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.units__eq-right { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); font-weight: 700; flex-shrink: 0; }
.units__eq-right .ar { font-size: 19px; }
.units__eq-edit { border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; min-height: 36px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
details[open] .units__eq-edit { visibility: hidden; }
.units__eq-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.units__eq-body .field { display: flex; flex-direction: column; gap: 4px; }
.units__eq-type { display: inline-flex; gap: 4px; background: var(--sand); border-radius: 999px; padding: 3px; align-self: flex-start; }
.units__eq-type input { position: absolute; opacity: 0; pointer-events: none; }
.units__eq-type span { display: flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.units__eq-type input:checked + span { background: var(--ink); color: var(--paper); font-weight: 700; }
.units__eq-type input:focus-visible + span { outline: 3px solid var(--clay-soft); }
.units__eq-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.units__eq-gapmark { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px; border-bottom: 3px dashed var(--clay);
  font-size: 14px; font-weight: 700; color: var(--clay); }
.units__eq-body:has(input[value="gap"]:checked) .units__eq-prompt { display: none; }
.units__eq-body:has(input[value="question"]:checked) .units__eq-gap { display: none; }
.units__eq-options { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.units__eq-option { display: flex; align-items: center; gap: 8px; }
.units__eq-option .input { flex: 1; }
.units__eq-radio input { position: absolute; opacity: 0; }
.units__eq-radio span { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1.5px solid var(--text-muted); background: #fff; color: transparent; font-weight: 700; cursor: pointer; }
.units__eq-radio input:checked + span { background: var(--green); border-color: var(--green); color: var(--card); }
.units__eq-radio input:focus-visible + span { outline: 3px solid var(--clay-soft); outline-offset: 2px; }
.units__eq-option:has(input:checked) .input { border-color: var(--green); }
.units__eq-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.units__eq-move { display: flex; gap: 6px; }
.units__round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.units__eq-remove { font-size: 14px; font-weight: 600; color: var(--clay); }

/* 5 · Results */
.units__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.units__tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.units__tile-value { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; }
.units__results-table { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: auto; }
.units__table--results { width: 100%; min-width: 0; border: none; border-radius: 0; background: transparent; }
.units__table--results th { color: var(--ink); }
.units__table--results th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; padding: 10px 14px; border-top: 1px solid var(--line); }
.units__table--results td { padding: 8px 6px; }
.units__center { text-align: center !important; }
.units__end { text-align: end !important; padding-inline-end: 14px !important; }
.units__score { font-size: 15px; font-weight: 700; }
.units__mark { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.units__mark--done { background: var(--green-soft); color: var(--green); }
.units__mark--started { background: var(--sand); color: var(--ink); }
.units__mark--none { color: var(--text-muted); }
.units__mark--small { min-width: 24px; width: 24px; height: 24px; font-size: 10px; }
.units__legend { display: block; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
.units__results-list { display: none; list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.units__results-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.units__results-list li + li { border-top: 1px solid var(--line); }
.units__results-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.units__results-marks { display: flex; gap: 3px; }
.units__understood { display: flex; flex-direction: column; gap: 10px; }
.units__understood-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.units__missed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.units__missed li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 8px 16px; align-items: center; }
.units__missed-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.units__missed-sentence { font-size: 21px; line-height: 1.7; }
.units__filled { background: var(--green-soft); border-bottom: 2px solid var(--green); border-radius: 4px 4px 0 0; padding: 0 4px; font-weight: 700; }
.units__missed-bar { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.units__bar { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.units__bar > div { height: 100%; background: var(--clay); }
.units__bar--green > div { background: var(--green); }

/* 6 · The student's path */
.units--student { max-width: 640px; margin: 0 auto; }
.units__note-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.units__note-card strong { font-size: 13px; }
.units__progress { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.units__progress .units__bar { flex: 1; height: 6px; }
.units__path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.units__path-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; position: relative; }
.units__path-step::before { content: ""; position: absolute; inset-inline-start: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.units__path-step:last-child::before { display: none; }
.units__path-step--done::before { background: var(--green); }
.units__path-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; position: relative; }
.units__path-step--done .units__path-dot { background: var(--green); border-color: var(--green); color: var(--card); }
.units__path-step--started .units__path-dot, .units__path-step.is-current .units__path-dot { border-color: var(--ink); }
.units__path-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.units__path-step.is-current .units__path-card { border: 1.5px solid var(--ink); }
.units__path-card form { margin: 0; align-self: flex-start; }
.units__path-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.units__path-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 16px; }
.units__path-state { font-size: 13px; font-weight: 700; white-space: nowrap; }
.units__path-step--done .units__path-state { color: var(--green); }
.units__path-card .units__bar { height: 5px; }

/* 7 · On the class page */
.teach__kind--unit { background: var(--ink); color: var(--paper); }
.teach__assignment--unit { border: 1.5px solid var(--ink); }

/* The grammar page's button to the player (lesson-player.css has the rest) */
@media (max-width: 760px) {
  .units__cards, .units__steps, .units__tiles { grid-template-columns: minmax(0, 1fr); }
  .units__upsell, .units__new, .units__approve-form, .units__edit-grid, .units__speak, .units__missed li { grid-template-columns: minmax(0, 1fr); }
  .units__examples { grid-template-columns: minmax(0, 1fr); }
  .units__table { min-width: 100%; }
  .units__eq-gap { grid-template-columns: minmax(0, 1fr); }
  .units__results-table { display: none; }
  .units__results-list { display: block; }
  .units__panel, .units__approve { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .units__part, .is-busy .units__drafting-line, .units__state--drafting .units__state-icon { animation: none; }
}
/* button_to's form is display: contents, so its button is the card's own flex item: kept to its width. */
.units__path-card .units__btn, .units__refused .units__btn { align-self: flex-start; }