/* ==========================================================================
   فهيم — Lessons (writing-task1.html) and the Writing hub (writing.html)
   Long-form Arabic reading on cream paper: one comfortable column, English
   examples in their own LTR cards, a sticky contents rail on wide screens.
   Uses the shell from reading.css (.app, .side, .card, .dash-head).
   ========================================================================== */

/* ---------- Layout ---------- */
.lesson-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr) 248px; }
.toc-rail { position: sticky; top: var(--s-16); display: grid; gap: var(--s-16); }
.lesson { display: grid; gap: 56px; max-width: 780px; width: 100%; justify-self: center; padding-bottom: 48px; }
.lesson p, .lesson li { font-size: 16.5px; line-height: 1.95; color: var(--ink-2); }
.lesson strong { color: var(--ink); font-weight: var(--w-semibold); }

.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.l-hero { display: grid; gap: 14px; padding-top: 4px; }
.l-hero h1 { font-size: 36px; line-height: 1.35; font-weight: var(--w-display); color: var(--ink); }
.l-hero h1 em { font-style: normal; background: linear-gradient(transparent 55%, var(--highlight) 55%); padding: 0 4px; }
.l-hero p { font-size: 17px; color: var(--muted); max-width: 620px; }
.l-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.l-hero__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.l-hero__meta .icon { width: 16px; height: 16px; }

/* ---------- Sections ---------- */
.l-section { display: grid; gap: 18px; scroll-margin-top: 24px; }
.l-section > h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; line-height: 1.4; font-weight: var(--w-display); color: var(--ink); }
.l-num { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--highlight); border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 16px; font-weight: var(--w-display); }
.l-section h3 { font-size: 19px; line-height: 1.5; font-weight: var(--w-display); color: var(--ink); margin-top: 8px; }
.l-section h4 { font-size: 16px; font-weight: var(--w-semibold); color: var(--ink); }
.l-lead { font-size: 17.5px !important; }
hr.l-rule { border: 0; border-top: 1.5px dashed var(--border-strong); margin: 0; }

/* bullet lists with a small ink dot */
.l-list { display: grid; gap: 6px; }
.l-list li { position: relative; padding-inline-start: 20px; }
.l-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .85em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* ---------- Facts row ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fact { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 16px; display: grid; gap: 4px; align-content: start; }
.fact b { font-size: 24px; font-weight: var(--w-display); color: var(--ink); line-height: 1.3; }
.fact span { font-size: 13px !important; line-height: 1.7 !important; color: var(--muted) !important; }
.fact--hl { background: var(--tint-violet); border-color: var(--ink); }

/* ---------- Figures (click to enlarge) ---------- */
.fig { display: grid; gap: 8px; margin: 0; }
.fig__img { display: block; width: 100%; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); overflow: hidden; cursor: zoom-in; transition: border-color var(--dur-fast); }
.fig__img:hover { border-color: var(--ink); }
.fig__img img { display: block; width: 100%; height: auto; }
.fig figcaption { font-size: 13px; color: var(--muted); }

.types-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.type-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 14px; display: grid; gap: 10px; align-content: start; }
.type-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.type-card__head b { font-size: 15px; font-weight: var(--w-display); }
.type-card__head .mono { color: var(--muted); }
.type-card .fig__img { border-color: var(--border); }
.type-card--wide { grid-column: 1 / -1; }
.type-card__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- The four questions ---------- */
.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: four; }
.four li { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 16px 18px; display: grid; gap: 4px; }
.four li b { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: var(--w-display); color: var(--ink); }
.four li b::before { counter-increment: four; content: counter(four); width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--highlight); display: grid; place-items: center; font-size: 14px; }
.four li span { font-size: 14.5px; line-height: 1.85; color: var(--muted); }

/* ---------- Worked examples ---------- */
.example { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 20px; display: grid; gap: 16px; }
.example__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.example__head h3 { margin: 0; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--w-semibold); background: var(--lilac); border: 1px solid var(--border-strong); color: var(--ink-2); }
.tag--ltr { direction: ltr; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
.qa { display: grid; gap: 8px; }
.qa details { border: 1px solid var(--border); border-radius: 10px; background: var(--canvas); }
.qa details[open] { background: var(--surface); border-color: var(--border-strong); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: var(--w-semibold); font-size: 15px; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; margin-inline-start: auto; width: 9px; height: 9px; border-inline-end: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg); transition: transform var(--dur-fast); }
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa summary i { font-style: normal; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 12px; background: var(--surface); }
.qa .qa__body { padding: 0 14px 14px; display: grid; gap: 6px; }
.qa .qa__body p, .qa .qa__body li { font-size: 15.5px; line-height: 1.9; }
.example__group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.example__group > div { border-radius: 10px; padding: 12px 14px; border: 1px dashed var(--border-strong); background: var(--canvas); }
.example__group b { display: block; font-size: 13px; color: var(--muted); font-weight: var(--w-semibold); margin-bottom: 4px; }
.example__group span { font-size: 14.5px; line-height: 1.8; color: var(--ink); }

/* ---------- English examples (always LTR) ---------- */
.en {
  direction: ltr; text-align: left; unicode-bidi: isolate;
  background: var(--surface); border: 1px solid var(--border-strong); border-inline-start: 4px solid var(--ink);
  border-radius: 10px; padding: 14px 16px; font-size: 16px !important;   /* .en is LTR, so inline-start = left, where English begins */ line-height: 1.8 !important; color: var(--ink) !important;
}
.en--model { background: var(--canvas); }
.en mark { background: var(--highlight); color: inherit; padding: 0 2px; border-radius: 2px; }
.en-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: -10px; }
.en-label .mono { color: var(--ink-2); }
.ar-gloss { font-size: 14.5px !important; color: var(--muted) !important; margin-top: -8px; }

/* paraphrase swaps:  shows → illustrates */
.swaps { display: grid; gap: 8px; }
.swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; direction: ltr; }
.swap span { padding: 8px 12px; border-radius: 8px; font-size: 14.5px; border: 1px solid var(--border-strong); background: var(--surface); }
.swap span:first-child { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--terracotta); }
.swap span:last-child { background: var(--highlight); border-color: var(--border-strong); color: var(--ink); font-weight: var(--w-semibold); }
.swap i { font-style: normal; color: var(--muted); }
.swap-note { font-size: 14px !important; color: var(--muted) !important; margin: -2px 4px 6px; }

/* ---------- Callouts ---------- */
.note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--border-strong); background: var(--tint-violet); }
.note svg { width: 22px; height: 22px; margin-top: 4px; }
.note p { font-size: 15px !important; line-height: 1.85 !important; color: var(--ink) !important; }
.note--warn { background: #fbe6dc; border-color: var(--terracotta); }
.note--tip { background: var(--surface); border-style: dashed; border-color: var(--border-strong); }
.note--fix { background: var(--lilac); border-color: var(--border-strong); }

/* ---------- Answer template ---------- */
.template { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.template__blocks { display: grid; gap: 8px; }
.tblock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); }
.tblock b { font-size: 15px; font-weight: var(--w-display); }
.tblock .mono { grid-row: span 2; align-self: start; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 13px; }
.tblock small { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.tblock:nth-child(1) .mono { background: var(--tint-cyan); }
.tblock:nth-child(2) .mono { background: var(--highlight); }
.tblock:nth-child(3) .mono, .tblock:nth-child(4) .mono { background: var(--tint-violet); }
.tblock--hl { background: #fffbe0; }

/* ---------- Phrase tables ---------- */
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border-strong); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.ptable th, .ptable td { padding: 10px 14px; text-align: start; vertical-align: top; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.75; }
.ptable thead th { border-top: 0; background: var(--canvas); font-size: 12.5px; color: var(--muted); font-weight: var(--w-semibold); }
.ptable .grp th { background: var(--lilac); color: var(--ink); font-size: 13.5px; font-weight: var(--w-display); }
.ptable td:first-child { direction: ltr; text-align: left; color: var(--ink); font-weight: var(--w-medium); width: 46%; }
.ptable td:last-child { color: var(--ink-2); }
.ptable tr[hidden] { display: none; }

/* ---------- Introduction builder ---------- */
.builder { background: var(--tint-cyan); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 20px; display: grid; gap: 16px; }
.builder__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; direction: ltr; }
.builder__col { display: grid; gap: 6px; align-content: start; }
.builder__col > b { font-size: 12px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: .03em; }
.builder__col > b span { font-family: var(--font); direction: rtl; unicode-bidi: isolate; margin-inline-start: 6px; color: var(--muted); }
.opt { text-align: left; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(23, 25, 23, .25); background: rgba(255, 255, 255, .65); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.opt:hover { border-color: var(--ink); }
.opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.builder__num { display: flex; gap: 6px; }
.builder__out { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px 16px; direction: ltr; text-align: left; font-size: 18px; line-height: 1.6; color: var(--ink); }
.builder__out em { font-style: normal; background: var(--highlight); padding: 0 3px; border-radius: 2px; }
.builder__out .blank { color: var(--faint); }
.builder__ar { font-size: 14.5px !important; color: var(--ink-2) !important; }

/* ---------- Phrase bank ---------- */
.bank__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.bank__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.bank__search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; min-width: 240px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--muted); }
.bank__search:focus-within { border-color: var(--ink); }
.bank__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); }
.bank__panel[hidden] { display: none; }
.bank__panel { display: grid; gap: 14px; }
.bank__empty { padding: 20px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-card); }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 8px; }
.checklist label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 15.5px; line-height: 1.8; color: var(--ink-2); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.checklist input { appearance: none; width: 22px; height: 22px; margin: 3px 0 0; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.checklist input:checked { background: var(--highlight); }
.checklist input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2.2px solid var(--ink); border-bottom: 2.2px solid var(--ink); transform: translateY(-2px) rotate(-45deg); }   /* a drawn ✓, so physical sides */
.checklist label:has(input:checked) { border-color: var(--ink); background: #fffbe0; }
.checklist__done { font-size: 14px !important; color: var(--ink) !important; font-weight: var(--w-semibold); }

/* ---------- Next steps ---------- */
.l-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.l-next a { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-card); border: 1px solid var(--border-strong); background: var(--surface); transition: border-color var(--dur-fast); }
.l-next a:hover { border-color: var(--ink); }
.l-next b { font-size: 15px; color: var(--ink); }
.l-next span { font-size: 13px; color: var(--muted); }

/* ---------- Contents rail ---------- */
.toc { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 16px 12px; display: grid; gap: 2px; max-height: calc(100vh - 140px); overflow-y: auto; }
.toc > b { font-size: 12px; color: var(--faint); font-weight: var(--w-semibold); padding: 0 8px 8px; }
.toc a { display: flex; gap: 8px; align-items: baseline; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); transition: background-color var(--dur-fast); }
.toc a:hover { background: var(--lilac); }
.toc a i { font-style: normal; font-size: 11px; color: var(--faint); min-width: 14px; }
.toc a.is-active { background: var(--highlight); color: var(--ink); font-weight: var(--w-semibold); }
.toc a.is-active i { color: var(--ink); }
.toc-progress { background: var(--canvas); border: 1px dashed var(--border-strong); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 8px; font-size: 12.5px; color: var(--muted); }
.toc-progress .bar { height: 8px; }
.toc-chips { display: none; }

/* ---------- Lightbox ---------- */
.lightbox { width: min(1200px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--r-panel); background: var(--surface); }
.lightbox::backdrop { background: rgba(23, 25, 23, .55); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: 0 auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 4px 10px; font-size: 14px; color: var(--muted); }

/* ==========================================================================
   Writing hub
   ========================================================================== */
.w-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 24px 28px; }
.w-hero h2 { font-size: 22px; font-weight: var(--w-display); line-height: 1.4; }
.w-hero p { font-size: 14.5px; color: var(--muted); line-height: 1.8; margin-top: 4px; }
.w-split { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; min-width: 300px; }
.w-split div { padding: 10px 16px; display: grid; gap: 2px; text-align: center; }
.w-split div + div { border-inline-start: 1px solid var(--border-strong); }
.w-split b { font-size: 18px; font-weight: var(--w-display); }
.w-split span { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.w-split .is-t1 { background: var(--tint-cyan); flex: 1; }
.w-split .is-t2 { background: var(--tint-violet); flex: 2; }

.w-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.w-task { display: grid; gap: 14px; align-content: start; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 22px; }
.w-task--ready { border-color: var(--border-strong); }
.w-task__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.w-task__icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border-strong); display: grid; place-items: center; }
.w-task__icon .icon { width: 24px; height: 24px; }
.w-task h3 { font-size: 20px; font-weight: var(--w-display); line-height: 1.45; }
.w-task p { font-size: 14.5px; line-height: 1.85; color: var(--muted); }
.w-task ul { display: grid; gap: 6px; }
.w-task li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.w-task li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ink); transform: translateY(-2px); }
.w-task__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.soon-tag { display: inline-flex; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--w-semibold); background: var(--lilac); border: 1px dashed var(--border-strong); color: var(--muted); }
.ready-tag { display: inline-flex; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--w-semibold); background: var(--highlight); border: 1px solid var(--border-strong); color: var(--ink); }

.w-marking { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; border: 1.5px dashed var(--border-strong); border-radius: var(--r-panel); background: var(--canvas); padding: 22px; }
.w-marking h3 { font-size: 17px; font-weight: var(--w-display); }
.w-marking p { font-size: 14px; color: var(--muted); line-height: 1.85; margin-top: 4px; }
.w-criteria { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.w-criteria span { font-size: 12.5px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); }

/* hub: no side rail, so two columns on wide screens */
@media (min-width: 1321px) { .hub-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.hub-page .main { max-width: 1080px; }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .lesson-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .toc-rail { display: none; }
  .toc-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 5; padding: 10px 0; margin: -10px 0 -30px; background: var(--canvas); }
  .toc-chips::-webkit-scrollbar { display: none; }
  .toc-chips a { flex: none; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
  .toc-chips a.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
}
@media (max-width: 960px) {
  .lesson-page .app { grid-template-columns: minmax(0, 1fr); }
  .w-tasks { grid-template-columns: minmax(0, 1fr); }
  .w-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .lesson { gap: 44px; }
  .l-hero h1 { font-size: 27px; }
  .l-section > h2 { font-size: 21px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .types-grid, .four, .template, .example__group, .l-next { grid-template-columns: minmax(0, 1fr); }
  .builder__cols { grid-template-columns: minmax(0, 1fr); }
  .example { padding: 14px; }
  .ptable td:first-child { width: 50%; }
  .ptable th, .ptable td { padding: 9px 10px; font-size: 13.5px; }
  .w-split { min-width: 0; }
  .w-marking { grid-template-columns: minmax(0, 1fr); }
}

/* progress bars (lesson rail + hub): a track with a yellow fill and an ink outline */
.toc-progress .bar, .w-task .bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--lilac); overflow: hidden; }
.toc-progress .bar > span, .w-task .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--highlight); box-shadow: inset 0 0 0 1px rgba(23, 25, 23, .35); }

/* ---------- chapters (lesson.js): one section at a time ---------- */
.l-section[hidden], .l-hero[hidden], .l-next__skip[hidden] { display: none; }
.is-paged .l-section { scroll-margin-top: 24px; }
.is-paged .l-section > h2:focus { outline: none; }
.l-next { display: grid; gap: 10px; margin-top: var(--s-16); padding-top: var(--s-24); border-top: 1.5px dashed var(--border-strong); }
.l-next__count { font-size: 13px; color: var(--muted); }
.l-next__acts { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.l-next__skip { justify-self: end; font-size: 13px; }
.toc a.is-done i { color: var(--ink); }
.toc a.is-done i::after { content: " ✓"; }
.toc-chips a.is-done::after { content: " ✓"; }
@media (max-width: 1320px) {
  /* the contents chips stick to the top: headings land below them, not under them */
  .is-paged .l-section, .is-paged .l-section [id] { scroll-margin-top: 92px; }
  .l-next__acts .btn { flex: 1 1 auto; justify-content: center; }
}
/* writing hub: the unbuilt parts share one quiet card */
.w-tasks .w-spell { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: start; }
.w-later { display: grid; gap: 6px; margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.w-later b { color: var(--ink-2); font-weight: var(--w-semibold); }
.w-marking h3 { display: flex; align-items: center; gap: 8px; }

/* Task 1 lesson, «المقدمة»: practise paraphrasing a task description with the AI helper (assets/t1-ai.js) */
.t1-ai { display: grid; gap: 12px; margin-top: var(--s-24); }
.t1-ai:empty { display: none; }
.t1-ai__card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); }
.t1-ai__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.t1-ai__task { margin: 0; }
.t1-ai__label { font-size: 14px; font-weight: var(--w-semibold); color: var(--ink); }
.t1-ai__input { width: 100%; font: inherit; font-size: 16px; line-height: 1.65; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-input); background: var(--surface); color: var(--ink); resize: vertical; text-align: left; }
.t1-ai__input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.t1-ai__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.t1-ai__words { font-size: 13px; color: var(--muted); }
.t1-ai__out:empty { display: none; }
.t1-ai__out .ai-box { margin-top: 0; }
.t1-ai__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.t1-ai__more { margin: 0; font-size: 13px; color: var(--muted); }