/* فهيم — Speaking: hub (speaking.html) and activity page (speaking-practice.html).
   Shared AI styles (.ai-*) live in components.css. English is always in its own dir="ltr" element. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 1321px) { .hub-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.hub-page .main { max-width: 1080px; gap: var(--s-16); align-content: start; }
.hub-page .main > * { min-width: 0; }      /* long one-line English (a cue-card title) must not widen the page */
.sp-en { display: block; direction: ltr; text-align: left; unicode-bidi: isolate; color: var(--ink); }
.sp-small { font-size: 13.5px; color: var(--ink-2); }
.sp-kicker { font-size: 12.5px; font-weight: var(--w-semibold); color: var(--muted); }
.sp-hint { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.sp-sub { font-size: 15px; font-weight: var(--w-semibold); }
.sp-sub small { font-weight: var(--w-regular); color: var(--muted); }
.sp-empty { display: grid; gap: 10px; justify-items: start; }

/* ---------- hub ---------- */
.sp-hub .main { gap: var(--s-24); }
.sp-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-16); }
.sp-top[hidden] { display: none; }
.sp-next { display: grid; gap: 12px; align-content: start; padding: 22px 24px; }
.sp-next[hidden] { display: none; }
.sp-next--rec { background: var(--highlight-soft); border-color: var(--border-strong); }
.sp-next > div { display: grid; gap: 10px; }
.sp-next .sp-kicker { color: var(--ink-2); }
.sp-next .sp-en { font-size: 19px; line-height: 1.5; font-weight: var(--w-semibold); }
.sp-next__meta { font-size: 13px; color: var(--ink-2); }
.sp-next__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.sp-next .btn { justify-self: start; margin-top: 4px; }
.sp-next__acts .btn { margin-top: 0; }
.sp-why summary { cursor: pointer; font-size: 13px; font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: 3px; }
.sp-why p { margin-top: 6px; font-size: 13.5px; line-height: 1.7; max-width: 52ch; }

.sp-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); }
.sp-part { display: grid; gap: 2px; align-content: start; padding: 18px 20px; border-radius: var(--r-feature); border: 1.5px solid var(--border-strong);
  color: var(--ink); text-decoration: none; position: relative; top: 0; transition: box-shadow var(--dur-fast), top var(--dur-fast); }   /* lift with top: it holds Arabic text */
.sp-part:hover { box-shadow: none; top: -1px; }
.sp-part:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sp-part[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sp-part--1 { background: var(--tint-violet); }
.sp-part--2 { background: var(--tint-cyan); }
.sp-part--3 { background: var(--tint-magenta); }
.sp-part b { font-size: 19px; font-weight: var(--w-display); }
.sp-part__tag { justify-self: start; font-size: 11.5px; font-weight: var(--w-semibold); font-family: var(--font-mono); color: var(--ink-2); margin-bottom: 4px; }
.sp-part__sub { font-size: 13.5px; color: var(--ink-2); }
.sp-part__n { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }
.sp-bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .7); border: 1px solid var(--border-strong); overflow: hidden; margin-top: 6px; }
.sp-bar span { display: block; height: 100%; background: var(--ink); }

.sp-find { display: grid; gap: 16px; scroll-margin-top: 80px; }
.sp-find .card__head { margin-bottom: 0; }
.sp-find h2:focus { outline: none; }
.sp-filters { display: grid; gap: 10px; }
.sp-filters__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) auto; gap: 10px; }
.sp-filters__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: var(--r-card); background: var(--lilac); }
.sp-filters__more[hidden] { display: none; }
.sp-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.sp-field input, .sp-field select { width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--ink); padding: 8px 12px; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--r-input); background: var(--surface); }
.sp-field input:focus, .sp-field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.sp-ftoggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-input); background: var(--surface); cursor: pointer; }
.sp-ftoggle:hover, .sp-ftoggle[aria-expanded="true"] { border-color: var(--ink); }
.sp-ftoggle[aria-expanded="true"] { background: var(--lilac); }
.sp-ftoggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-ftoggle__n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-accent); font-size: 11.5px; }
.sp-ftoggle__n[hidden] { display: none; }
.sp-results { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border); }
.sp-row { border-bottom: 1px solid var(--border); }
.sp-row a { display: grid; gap: 6px; padding: 14px 10px; color: var(--ink); text-decoration: none; border-radius: 8px; transition: background-color var(--dur-fast); }
.sp-row a:hover { background: var(--lilac); }
.sp-row a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.sp-row__q { direction: ltr; text-align: left; unicode-bidi: isolate; font-size: 15.5px; line-height: 1.55; font-weight: var(--w-medium); }
.sp-row--done .sp-row__q { color: var(--ink-2); }
.sp-row__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }   /* under the English question (left) */
.sp-row__info { font-size: 12.5px; color: var(--muted); }
.sp-row__id { font-size: 11.5px; color: var(--faint); font-family: var(--font-mono); }
.sp-row__parent { font-size: 12px; color: var(--muted); }
.sp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: 12px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.sp-chip--part { background: var(--lilac); }
.sp-chip--doing { background: var(--highlight); border-color: var(--ink); color: var(--ink); }
.sp-chip--done { background: var(--tint-violet); border-color: var(--ink); color: var(--ink); }
.sp-chip--dup { border-style: dashed; }
.sp-chip--added { background: var(--tint-peach); }
.sp-none { padding: 18px 10px; color: var(--muted); font-size: 14px; }
.sp-more { justify-self: center; }
.sp-more[hidden] { display: none; }
.sp-foot { display: grid; gap: 4px; padding-top: 4px; }
.sp-foot p, .sp-source { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* ---------- activity page ---------- */

.sp-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.sp-crumbs a { color: var(--ink-2); text-decoration: none; }
.sp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-q { display: grid; gap: 12px; padding: 24px 28px; }
.sp-q > *, .sp-act > * { min-width: 0; }
.sp-q[hidden], .sp-act[hidden], .sp-steps[hidden] { display: none; }
.sp-q__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sp-q__meta:empty { display: none; }
.sp-q__topic { flex: 1 1 160px; min-width: 0; font-size: 12.5px; color: var(--muted); direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sp-q__text { direction: ltr; text-align: left; font-size: 23px; line-height: 1.45; font-weight: var(--w-semibold); color: var(--ink); }
.sp-q__extra { display: grid; gap: 4px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.sp-q__extra[hidden] { display: none; }
.sp-q__guide, .sp-q__link { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.sp-q__link { color: var(--muted); }
.sp-q__link a { color: var(--ink-2); }
.sp-q__guide b { font-weight: var(--w-semibold); }
.sp-notes summary { cursor: pointer; font-size: 13px; font-weight: var(--w-semibold); color: var(--muted); }
.sp-notes p { margin-top: 6px; text-align: left; font-size: 13.5px; color: var(--ink-2); }

.sp-steps { display: grid; gap: 8px; min-width: 0; padding: 4px 2px 0; }
.sp-steps__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: var(--w-semibold); color: var(--ink-2); }
.sp-steps__count { font-size: 12.5px; font-weight: var(--w-regular); color: var(--muted); }
.sp-steps__bar { display: block; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.sp-steps__bar span { display: block; height: 100%; background: var(--ink); border-radius: 4px; transition: width var(--dur) var(--ease-out); }
/* the steps, always side by side: equal columns, never a sideways scroll */
.sp-steps ol { min-width: 0; list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; }
.sp-steps li { min-width: 0; display: grid; }
.sp-step { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--lilac); color: var(--ink-2); font-size: 14px; text-decoration: none; white-space: nowrap; min-height: 44px; min-width: 0; transition: border-color var(--dur-fast); }
.sp-step__l { min-width: 0; white-space: normal; text-align: center; line-height: 1.3; }   /* wraps on the narrowest phones, never cut */
.sp-step:hover { border-color: var(--border-strong); }
.sp-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-step__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); font-size: 12px; }
.sp-step--doing .sp-step__n { background: var(--highlight); }
.sp-step--done { background: var(--tint-violet); }
.sp-step--done .sp-step__n { background: var(--ink); color: var(--on-accent); }
.sp-step.is-current { background: var(--ink); color: var(--on-accent); border-color: var(--ink); font-weight: var(--w-semibold); }
.sp-step.is-current .sp-step__n { background: var(--on-accent); color: var(--ink); }

.sp-act { display: grid; gap: 20px; padding: 24px 28px; }
.sp-act__head { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.sp-act__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sp-act__title { font-size: 20px; font-weight: var(--w-display); }
.sp-act__what { font-size: 16px; font-weight: var(--w-semibold); color: var(--ink-2); }
.sp-act__kicker { font-size: 12.5px; font-weight: var(--w-semibold); color: var(--muted); }
.sp-act__back { width: fit-content; font-size: 13.5px; color: var(--ink-2); }
/* «ماذا الآن؟» after feedback: improve · help · finish, one main button */
.sp-what { flex: 1 1 100%; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); }
.sp-what__h { font-size: 15px; font-weight: var(--w-semibold); }
.sp-what__list { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-what__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px dashed var(--border); }
.sp-what__list li:first-child { border-top: 0; }
.sp-what__list li > div { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.sp-what__list b { font-size: 14px; font-weight: var(--w-semibold); }
.sp-what__list li > div span { font-size: 13px; line-height: 1.7; color: var(--muted); }
.sp-what__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-what__tools [aria-expanded="true"] { background: var(--lilac); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: var(--w-semibold); }   /* open, not a main action */
.sp-what__help:empty { display: none; }
.sp-what__help { padding-top: 6px; }
.sp-sample--bare { display: grid; gap: 8px; }

/* «تمارين إضافية · اختياري»: collapsed under the step */
.sp-extra { padding: 0; }
.sp-extra[hidden] { display: none; }
.sp-extra__sum { cursor: pointer; padding: 16px 28px; font-size: 14.5px; font-weight: var(--w-semibold); color: var(--ink-2); }
.sp-extra__sum:hover { color: var(--ink); }
.sp-extra__body { display: grid; gap: 10px; padding: 0 28px 20px; }
.sp-extra__note { font-size: 13px; color: var(--muted); }
.sp-extra__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-xlink { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  color: var(--ink-2); font-size: 13.5px; text-decoration: none; transition: border-color var(--dur-fast); }
.sp-xlink:hover { border-color: var(--ink); }
.sp-xlink:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-xlink.is-current { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.sp-act__title:focus { outline: none; }
.sp-act__ar { font-size: 15px; line-height: 1.8; color: var(--ink-2); max-width: 68ch; }
.sp-act__task summary { cursor: pointer; font-size: 12.5px; color: var(--muted); width: fit-content; }
.sp-act__task summary:hover { color: var(--ink); }
.sp-act__task p { margin-top: 6px; direction: ltr; text-align: left; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.sp-act__body { display: grid; gap: 12px; min-width: 0; }
.sp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sp-acts:empty { display: none; }
.sp-err { font-size: 13.5px; color: var(--terracotta); font-weight: var(--w-semibold); }
.sp-err:empty { display: none; }
.sp-out:empty { display: none; }
.sp-out .ai-box, .sp-out .sp-check { margin-top: 0; }
.sp-save { font-size: 12.5px; color: var(--muted); min-height: 1.6em; }
.sp-save:empty { min-height: 0; margin-top: -20px; }   /* no blank strip under the activity until there's something to say */
.sp-save.is-warn { color: var(--terracotta); }
.sp-label { font-size: 14px; font-weight: var(--w-semibold); }
.sp-text { 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: start; }
.sp-text[dir="ltr"] { text-align: left; }
.sp-text:focus, .sp-note:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.sp-count { font-size: 12.5px; color: var(--muted); margin-top: -6px; }
.sp-count.is-warn { color: var(--terracotta); }
.sp-seedbtn { justify-self: start; }

.sp-check { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-card); border-inline-start: 3px solid var(--ink); background: var(--tint-violet); }
.sp-check:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-check.is-no { background: var(--tint-peach); border-inline-start-color: var(--terracotta); }
.sp-check.is-alt { background: var(--lilac); }
.sp-check p { font-size: 14px; line-height: 1.7; }
.sp-check__en { direction: ltr; text-align: left; color: var(--ink-2); }

/* BUILD */
.sp-blocks, .sp-refo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-block { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); }
.sp-block:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-block__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lilac); font-size: 13px; font-weight: var(--w-semibold); }
.sp-block__t { direction: ltr; text-align: left; line-height: 1.6; }
.sp-block__mv { display: flex; gap: 4px; }
.sp-block .icon-btn--sm, .sp-block .icon-btn { width: 40px; height: 40px; font-size: 13px; }
.sp-block .icon-btn:disabled { opacity: .35; cursor: default; }
.sp-refo li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; text-align: left; font-size: 14px; }
.sp-own { display: block; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.sp-own[hidden] { display: none; }
.sp-own > summary { cursor: pointer; width: fit-content; }
.sp-own__in { display: grid; gap: 10px; margin-top: 10px; }
.sp-order-ai .ai-box { margin-top: 4px; }

/* EXPAND / IMPROVE / ANSWER */
.sp-seed { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-card); background: var(--lilac); border: 1px solid var(--border); }
.sp-seed__k { font-size: 12px; font-weight: var(--w-semibold); color: var(--muted); }
.sp-seed__k:not(:first-child) { margin-top: 6px; }
.sp-quote { font-size: 16px; line-height: 1.7; }
.sp-cues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-cues li { display: grid; gap: 2px; text-align: left; direction: ltr; }
.sp-cues small { font-size: 12.5px; color: var(--muted); direction: rtl; text-align: right; }

/* Parts 1 and 3: the answer's shape above the box, in order */
.sp-shape__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; direction: ltr; }
.sp-shape__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; text-align: left; }
.sp-shape__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: var(--w-semibold); color: var(--ink-2); }
.sp-shape__t { display: grid; gap: 2px; min-width: 0; padding-top: 1px; font-size: 14.5px; color: var(--ink); }
.sp-shape__t small:not(.sp-opt-tag) { font-size: 12.5px; color: var(--muted); direction: rtl; text-align: right; }
.sp-shape .sp-small { margin-top: 6px; color: var(--muted); }
.sp-shape .sp-small a { color: var(--ink-2); }

/* Part 2: the optional minute of preparation */
.sp-timer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 14px;
  border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); }
.sp-timer__h { grid-column: 1 / -1; font-size: 13px; font-weight: var(--w-semibold); color: var(--ink-2); }
.sp-timer__h small { font-weight: var(--w-regular); color: var(--muted); }
.sp-timer__clock { min-width: 3ch; font-size: 22px; line-height: 1; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; color: var(--ink); }
.sp-timer__bar { display: block; height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; }
.sp-timer__bar i { display: block; height: 100%; width: 100%; background: var(--ink); border-radius: 6px; }
.sp-timer[data-state="idle"] .sp-timer__clock, .sp-timer[data-state="paused"] .sp-timer__clock { color: var(--muted); }
.sp-timer.is-low .sp-timer__clock { color: var(--terracotta); }
.sp-timer.is-low .sp-timer__bar i { background: var(--terracotta); }
.sp-timer__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-timer__acts [hidden] { display: none; }
.sp-timer__msg { grid-column: 1 / -1; font-size: 13.5px; font-weight: var(--w-semibold); color: var(--ink); line-height: 1.7; }
.sp-timer__msg:empty { display: none; }
@media (max-width: 560px) {
  .sp-timer { grid-template-columns: auto minmax(0, 1fr); }
  .sp-timer__acts { grid-column: 1 / -1; }
  .sp-timer__acts .btn { flex: 1 1 0; }
}

/* PLAN */
.sp-sets { display: grid; gap: 8px; }
.sp-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sp-points li { display: grid; gap: 4px; }
.sp-points label { direction: ltr; text-align: left; font-size: 14.5px; font-weight: var(--w-semibold); }
.sp-note { width: 100%; font: inherit; font-size: 15px; padding: 8px 12px; min-height: 42px; border: 1px solid var(--border-strong); border-radius: var(--r-input);
  background: var(--surface); color: var(--ink); text-align: left; }
.sp-note.is-empty { border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.sp-outline { display: grid; gap: 10px; padding-top: 6px; border-top: 1px dashed var(--border-strong); }
.sp-outline[hidden] { display: none; }
.sp-plan-out { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; direction: ltr; }
.sp-plan-out li { display: grid; gap: 2px; text-align: left; font-size: 13.5px; color: var(--muted); }
.sp-plan-out b { font-size: 15px; color: var(--ink); font-weight: var(--w-semibold); }
.sp-outline .btn { justify-self: start; }

/* CHAT */
.sp-chat { display: grid; gap: 12px; }
.sp-turn { display: grid; gap: 8px; }
.sp-bubble { padding: 10px 14px; border-radius: 14px; line-height: 1.65; max-width: 88%; }
.sp-bubble--q { background: var(--lilac); border: 1px solid var(--border); justify-self: start; display: grid; gap: 2px; }
.sp-bubble--q [dir="ltr"] { text-align: left; font-size: 15.5px; }
.sp-bubble--a { background: var(--tint-violet); justify-self: end; text-align: left; font-size: 15px; }
.sp-who { font-size: 11.5px; color: var(--muted); font-weight: var(--w-semibold); }
.sp-chat__in { max-width: 100%; }
.sp-chat__note { font-size: 13px; color: var(--muted); line-height: 1.7; }
.sp-chat__review[hidden] { display: none; }

/* feedback */
.sp-review { display: grid; gap: 10px; }
.sp-fb:focus, .sp-rev:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-fb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-cover { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-cover li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.sp-cover li > [dir="ltr"] { text-align: left; font-size: 14px; }
.sp-cover__st { padding: 1px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--w-semibold); background: var(--lilac); white-space: nowrap; }
.sp-cover__st.is-ok { background: var(--tint-violet); }
.sp-cover__st.is-almost { background: var(--highlight); }
.sp-cover__st.is-wrong { background: var(--tint-peach); }
.sp-cover__note { grid-column: 2; font-size: 12.5px; color: var(--ink-2); }
.sp-stale { font-size: 13px; color: var(--ink); background: var(--highlight); padding: 6px 10px; border-radius: 8px; }
.sp-self { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-card); border: 1px dashed var(--border-strong); }
.sp-self .btn { justify-self: start; }
.sp-criteria { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.7; }
.sp-criteria .sp-en { display: inline; }

/* after the attempt: sample + next */
.sp-after { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.sp-after[hidden] { display: none; }
.sp-sample summary { cursor: pointer; font-weight: var(--w-semibold); font-size: 14px; }
.sp-sample__label { margin: 8px 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.sp-sample__v { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-card); background: var(--lilac); }
.sp-sample__v + .sp-sample__v { margin-top: 8px; }
.sp-sample__v p { text-align: left; line-height: 1.75; font-size: 15px; }
.sp-sample__n { font-size: 12px; font-weight: var(--w-semibold); color: var(--muted); }
.sp-sample__orig { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.sp-sample__orig .sp-en { display: inline; }
.sp-next-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sp-done-all { flex: 1 1 100%; font-size: 14px; }

@media (max-width: 960px) {
  .sp-parts { grid-template-columns: minmax(0, 1fr); }
  .sp-part { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sp-filters__main { grid-template-columns: minmax(0, 1fr) auto; }
  .sp-field--q { grid-column: 1 / -1; }
  .sp-filters__more { grid-template-columns: minmax(0, 1fr); }
  .sp-q__text { font-size: 19px; }
  .sp-next { padding: 18px; }
  .sp-acts .btn, .sp-acts .ai-btn:not(.ai-btn--sm), .sp-next-row .btn { flex: 1 1 100%; }
  .sp-bubble { max-width: 100%; }
  .card.sp-act, .card.sp-q { padding: 18px 16px; }
  .sp-extra__sum { padding: 14px 16px; }
  .sp-extra__body { padding: 0 16px 16px; }
  .sp-steps ol { gap: 4px; }
  .sp-step { padding: 4px 6px; gap: 5px; font-size: 13.5px; }
  .sp-step__n { width: 20px; height: 20px; font-size: 11px; flex: none; }
  .sp-block { grid-template-columns: auto minmax(0, 1fr); }
  .sp-block__mv { grid-column: 1 / -1; justify-content: flex-end; }
}

/* a plan part that may stay empty */
.sp-opt-tag { font-size: 12px; font-weight: var(--w-regular); color: var(--muted); }

/* ---------- guide (speaking-guide.html) + its entry card on the hub ---------- */
.sg-page .main { max-width: 900px; gap: var(--s-24); }
.sg-page .main section[id] { scroll-margin-top: 80px; }
.sg-page .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sg-h2 { font-size: 22px; line-height: 1.4; font-weight: var(--w-display); }
.sg-h3 { font-size: 15px; font-weight: var(--w-semibold); margin-bottom: 8px; }
.sg-h3 small { font-size: 12.5px; font-weight: var(--w-regular); color: var(--muted); margin-inline-start: 6px; }
.sg-en { direction: ltr; text-align: right; font-size: 13px; font-family: var(--font-mono); color: var(--muted); }

.sg-intro { display: grid; gap: 18px; padding: 24px 28px; }
.sg-lead { font-size: 16px; line-height: 1.8; max-width: 62ch; }
.sg-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sg-facts li { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r-card); background: var(--lilac); }
.sg-facts b { font-size: 22px; font-weight: var(--w-display); line-height: 1.3; justify-self: start; }
.sg-facts span { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

.sg-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); }
.sg-map__part { display: grid; gap: 2px; align-content: start; padding: 16px 18px; border-radius: var(--r-feature); border: 1.5px solid var(--border-strong);
  color: var(--ink); text-decoration: none; transition: box-shadow var(--dur-fast); }
.sg-map__part:hover { box-shadow: none; }
.sg-map__part:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sg-map__part b { font-size: 18px; font-weight: var(--w-display); }
.sg-map__part > span:not(.sg-map__tag):not(.sg-time) { font-size: 13.5px; color: var(--ink-2); }
.sg-map__tag { justify-self: start; font-size: 11.5px; font-weight: var(--w-semibold); font-family: var(--font-mono); color: var(--ink-2); margin-bottom: 4px; }
.sg-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-top: 10px; }
.sg-time .icon { width: 16px; height: 16px; }
.sg-time--chip { margin: 0; padding: 4px 12px; border-radius: var(--r-pill); background: var(--lilac); white-space: nowrap; align-self: start; }

.sg-part { display: grid; gap: 18px; padding: 24px 28px; }
.sg-part > p { font-size: 15.5px; line-height: 1.85; max-width: 64ch; }
.sg-part__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--border-strong); }
.sg-part__head > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sg-num { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); font-size: 18px; font-weight: var(--w-display); }
.sg-part--1 .sg-num { background: var(--tint-violet); }
.sg-part--2 .sg-num { background: var(--tint-cyan); }
.sg-part--3 .sg-num { background: var(--tint-magenta); }

.sg-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sg-qs li { position: relative; padding: 10px 16px; padding-inline-start: 38px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); font-size: 15px; line-height: 1.7; }
.sg-qs li::before { content: ""; position: absolute; inset-inline-start: 16px; top: 21px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.sg-part--1 .sg-qs li::before { background: var(--tint-violet); }
.sg-part--3 .sg-qs li::before { background: var(--tint-magenta); }

.sg-tip { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-card); background: var(--highlight-soft); border: 1px solid var(--border-strong); }
.sg-tip > .icon { width: 22px; height: 22px; margin-top: 2px; }
.sg-tip > div { display: grid; gap: 6px; min-width: 0; }
.sg-tip__h { font-size: 15px; font-weight: var(--w-display); }
.sg-tip p { font-size: 14.5px; line-height: 1.8; }
.sg-tip .sg-tip__note { font-size: 13px; color: var(--ink-2); }

/* Part 2: the three stages, then the card itself */
.sg-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: sg; }
.sg-flow li { position: relative; display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r-card); background: var(--lilac); counter-increment: sg; }
.sg-flow li::before { content: counter(sg); display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 4px; border-radius: 50%; background: var(--ink); color: var(--on-accent); font-size: 12px; }
.sg-flow b { font-size: 15px; font-weight: var(--w-semibold); }
.sg-flow span { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.sg-cue { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1.5px dashed var(--border-strong); }
.sg-cue__label { justify-self: end; font-size: 11.5px; font-family: var(--font-mono); font-weight: var(--w-semibold); padding: 2px 10px; border-radius: var(--r-pill); background: var(--tint-cyan); }
.sg-cue__title { direction: ltr; text-align: left; font-size: 19px; line-height: 1.5; font-weight: var(--w-semibold); }
.sg-cue__ask { font-size: 14.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--border); }
.sg-cue ul { margin: 0; padding-inline-start: 22px; list-style: disc; display: grid; gap: 4px; font-size: 15px; line-height: 1.7; }
.sg-cue li::marker { color: var(--muted); }
.sg-after { margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.75; }

/* Part 3: personal → general */
.sg-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.sg-shift > div { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--border-strong); }
.sg-shift > div:first-child { background: var(--tint-cyan); border-color: var(--border-strong); }
.sg-shift > div:last-child { background: var(--tint-magenta); border-color: var(--border-strong); }
.sg-shift small { font-size: 12px; color: var(--ink-2); }
.sg-shift b { font-size: 15px; font-weight: var(--w-semibold); line-height: 1.5; }
.sg-shift span { font-size: 12.5px; color: var(--ink-2); }
.sg-shift__arrow { align-self: center; width: 22px !important; height: 22px !important; }

/* criteria */
.sg-section { display: grid; gap: 14px; }
.sg-section__head p { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.sg-crit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
.sg-crit li { position: relative; display: grid; gap: 2px; align-content: start; padding: 18px 20px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--border-strong); }
.sg-crit b { font-size: 16.5px; font-weight: var(--w-display); padding-inline-end: 56px; }
.sg-crit__en { direction: ltr; text-align: right; font-size: 12.5px; font-family: var(--font-mono); color: var(--muted); }
.sg-crit p { margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.sg-crit__w { position: absolute; top: 16px; inset-inline-end: 16px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--highlight); border: 1px solid var(--border-strong); font-size: 12.5px; font-weight: var(--w-semibold); }

/* tips */
.sg-tips { display: grid; gap: 16px; padding: 24px 28px; }
.sg-tips__list { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: tip; }
.sg-tips__list li { position: relative; padding: 14px 0; padding-inline-start: 44px; border-top: 1px dashed var(--border-strong); font-size: 15px; line-height: 1.8; counter-increment: tip; }
.sg-tips__list li:first-child { border-top: 0; padding-top: 4px; }
.sg-tips__list li::before { content: counter(tip); position: absolute; inset-inline-start: 0; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint-violet); border: 1px solid var(--border-strong); font-size: 13px; font-weight: var(--w-semibold); }
.sg-tips__list li:first-child::before { top: 4px; }
.sg-tips__list b { font-weight: var(--w-semibold); }
.sg-note { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--r-card); background: var(--lilac); font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.sg-note .icon { margin-top: 3px; }

.sg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 28px; background: var(--tint-violet); border: 1.5px solid var(--ink); border-radius: var(--r-feature); }
.sg-cta p { font-size: 14.5px; color: var(--ink-2); margin-top: 2px; }
.sg-cta__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* hub: «ابدأ هنا» link to the guide */
.sp-guide { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast); }
.sp-guide:hover { border-color: var(--ink); }
.sp-guide:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sp-guide__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-card); background: var(--highlight); border: 1px solid var(--border-strong); }
.sp-guide__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-guide > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sp-guide b { font-size: 15.5px; font-weight: var(--w-semibold); }
.sp-guide small { font-size: 13px; color: var(--muted); line-height: 1.6; }
.sp-guide__go { font-size: 13.5px; font-weight: var(--w-semibold); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--highlight); text-decoration-thickness: 3px; text-underline-offset: 4px; }

@media (max-width: 960px) {
  .sg-map { grid-template-columns: minmax(0, 1fr); }
  .sg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sg-intro, .sg-part, .sg-tips { padding: 18px 16px; }
  .sg-cta { padding: 18px 16px; }
  .sg-cta__acts, .sg-cta__acts .btn { flex: 1 1 100%; }
  .sg-part__head { flex-wrap: wrap; }
  .sg-time--chip { margin-inline-start: 56px; }
  .sg-flow, .sg-crit { grid-template-columns: minmax(0, 1fr); }
  .sg-shift { grid-template-columns: minmax(0, 1fr); }
  .sg-shift__arrow { justify-self: center; transform: rotate(-90deg); }
  .sg-cue { padding: 16px; }
  .sg-cue__title { font-size: 17px; }
  .sp-guide__go { display: none; }
}

/* the Questions tab holds the hub (the analysis is the other tab) */
.sp-panel { display: grid; gap: var(--s-24); min-width: 0; }
.sp-panel > [hidden] { display: none; }