/* ============================================================
   LSANY · Courses — shop, course dashboard & lesson player.
   Inherits all design tokens from /styles.css (dark + light).
   No inline scripts (CSP: script-src 'self').
   ============================================================ */

/* Lsany for Business — deep navy + gold overlay, scoped html.biz. Imported first
   (before any other at-rule) so it rides every page that links courses.css and
   its token overrides win by load order. Inert unless html.biz is set. */
@import "business-theme.css";

/* Buttery page-to-page morph between course pages (cross-document View Transitions).
   Same-origin nav between any two pages that load this CSS cross-fades instead of a
   hard reload flash; the persistent sidebar is named (below) so it holds still and
   morphs rather than flickering. Graceful no-op where the API is unsupported. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .4s; animation-timing-function: var(--ease-smooth); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Journey assembles — each path row brightens in (delay set per-row in dashboard.js).
   Opacity-only; `both` fill provides the hidden start so nothing is left invisible
   when the animation is disabled under reduced motion. */
@keyframes lp-assemble-in { from { opacity: 0; } to { opacity: 1; } }
.lp-assemble { animation: lp-assemble-in .5s var(--ease-smooth) both; }
@media (prefers-reduced-motion: reduce) { .lp-assemble { animation: none !important; } }

.page {
  /* --r-panel / --r-card moved to :root in styles.css so pages outside .page can
     reach the same scale. Same values, so nothing here changes shape. */
  --space-section: 32px;
  padding: 96px 0 80px;
  min-height: 100vh;
}
.wrap-course { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Animation lifecycle: when the tab is hidden, freeze every CSS animation so
   nothing burns frames off-screen (driven by sidebar.js visibilitychange). */
html[data-anim-paused] *,
html[data-anim-paused] *::before,
html[data-anim-paused] *::after { animation-play-state: paused !important; }

/* ---- one spacing + header rhythm for the Foundation dashboard ---- */
.course-dash .wrap-course > * { margin: 0 0 var(--space-section); }
.course-dash .wrap-course > .sec-head { margin: 6px 0 14px; align-items: flex-end; }
.course-dash .wrap-course > :last-child { margin-bottom: 0; }

/* ---- rhythm ----
   Six bands of identical width with an identical gap is a metronome, and that is
   most of why this page read as flat no matter what went in the bands. Two things
   break it: the AI Suite sits on its own plane (below), and the gaps are no longer
   all the same. The biggest gap is the one before the journey, because that is the
   thing the page is actually for. */
.course-dash .wrap-course > .suite-band { margin-bottom: 42px; }
.course-dash .wrap-course > .yours { margin-bottom: 56px; }
.course-dash .wrap-course > #path { margin-bottom: 10px; }
.suite-band > .sec-head { margin: 0 0 14px; align-items: flex-end; }

/* the suite's plane: it bleeds past the reading column so the eye reads a change
   of surface rather than another gap. min() keeps the bleed off the fixed rail on
   a narrow window, and the page already clips horizontal overflow. */
.course-dash .suite-band { position: relative; z-index: 0; padding: 26px 0 22px; }
.course-dash .suite-band::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(-1 * min(60px, 5vw)); right: calc(-1 * min(60px, 5vw));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent), color-mix(in srgb, var(--surface) 26%, transparent));
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; margin-bottom: 22px;
  /* 168x17 on the Dictionary, the smallest tap target on the whole site and the
     only way back to the course from it. 11px uppercase mono is a deliberately
     small type size and stays; the box is what grows. Measured 2026-08-03. */
  min-height: 26px; padding: 4px 6px; margin-inline-start: -6px;
}
.crumb:hover { color: var(--gold-ink); }
.crumb svg { width: 13px; height: 13px; }

/* Shop link lives in the nav (wayfinding), not stranded above the first card. */
.nav-shop { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.nav-shop svg { width: 15px; height: 15px; }
/* keep the nav Shop link reachable on mobile (course pages only carry this one link) */
@media (max-width: 820px) {
  .nav .nav-links { display: flex; }
  .nav-shop { padding: 7px 11px; font-size: 12.5px; }
}

/* Back-to-shop crumb — still used by the Business page. */
.shop-crumb {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  /* The component paints a ground and a border but named no ink, so a crumb
     built with a direct text node rather than the usual .sc-ico/.sc-text
     children fell through to the user agent's own link colour: #0000EE, which
     measured 1.13 on the dark theme's crumb and 1.07 on desert. The only crumb
     shaped that way today is on courses/pricing-preview.html, which is
     vercelignored -- but every child here sets its own colour, so naming the
     ink costs nothing on the shipping pages and closes the trap for the next
     one. Measured 2026-08-03. */
  color: var(--cream);
  text-decoration: none; padding: 8px 14px 8px 11px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(230,184,97,0.14), rgba(230,184,97,0.06));
  border: 1px solid var(--stroke-strong);
  transition: border-color .16s, transform .12s var(--ease-bounce), box-shadow .2s;
}
.shop-crumb:hover { border-color: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(0,0,0,.6); }
.shop-crumb:active { transform: scale(.97); }
.shop-crumb .sc-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-ink); background: rgba(230,184,97,0.16); flex: none; }
.shop-crumb .sc-ico svg { width: 16px; height: 16px; }
.shop-crumb .sc-text { display: flex; flex-direction: column; line-height: 1.15; }
.shop-crumb .sc-title { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--cream); }
/* --secondary, not --muted. The crumb is a gold-tinted pill, so this 10px line
   never sits on the page ground it was calibrated against: pixel-sampled on
   /courses/business 2026-08-02 with the ink knocked out, the rendered pill runs
   #1D1E23..#2D2B2D and --muted measures 4.22 at the light end, under the 4.5
   that 10px needs. --secondary is more contrast than --muted on EVERY theme --
   lighter on dark and desert, darker on light -- so this one swap moves all of
   them the right way with no per-theme override. .sc-arr beside it stays on
   --muted: it is an icon, and 4.22 clears the 3:1 that 1.4.11 asks of one. */
.shop-crumb .sc-sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); margin-top: 2px; }
.shop-crumb .sc-arr { width: 15px; height: 15px; color: var(--muted); margin-left: 4px; transition: transform .16s var(--ease-smooth), color .16s; }
.shop-crumb:hover .sc-arr { transform: translateX(3px); color: var(--gold-ink); }

/* ---------- shared bits ---------- */
.eyebrow-gold { color: var(--gold-ink); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink); background: rgba(230,184,97,0.10);
  border: 1px solid var(--stroke-strong); border-radius: 999px; padding: 5px 11px;
}
.pill.soon { color: var(--muted); background: rgba(126,137,129,0.10); border-color: var(--stroke); }
.pill.live { color: var(--green); background: rgba(77,191,142,0.12); border-color: rgba(77,191,142,0.30); }

.ar { font-family: var(--f-arabic); direction: rtl; }

/* ============================================================
   COURSE DASHBOARD
   ============================================================ */
.course-hero {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(230,184,97,0.12), transparent 60%),
    var(--surface);
  border: 1px solid var(--stroke); border-radius: 28px;
  padding: 34px 36px; overflow: hidden; margin-bottom: 30px;
}
.course-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(80% 120% at 0% 100%, rgba(77,191,142,0.06), transparent 55%);
}
.course-hero-saqr { width: 132px; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); position: relative; z-index: 1; }
.course-hero h1 {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 5vw, 40px);
  line-height: 1.02; margin: 12px 0 8px; color: var(--cream);
}
.course-hero h1 .gold { color: var(--gold-ink); }
.course-hero p { color: var(--secondary); max-width: 46ch; font-size: 15px; margin: 0 0 18px; }

.progress-row { display: flex; align-items: center; gap: 14px; max-width: 460px; }
.progress-track { flex: 1; height: 10px; background: var(--track-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--stroke); }
.progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-2)); transition: width .8s var(--ease-smooth); }
.progress-label { font-family: var(--f-mono); font-size: 12px; color: var(--gold-ink); white-space: nowrap; }

/* stat chips */
.course-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--chip-bg); border: 1px solid var(--stroke); border-radius: 14px; padding: 9px 14px;
}
.stat b { font-family: var(--f-display); font-size: 18px; color: var(--cream); }
.stat span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- section heading ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 34px 0 16px; }
.sec-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0; min-width: 0; }
/* flex: none, or a long mono hint ("50 DAYS TO GO") shrinks and wraps under
   itself and collides with the heading it is meant to sit beside */
.sec-head .hint { flex: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* the same stack the can-do head takes: a display heading and a mono hint cannot
   share one line at phone width without one of them breaking */
@media (max-width: 560px) {
  /* the dashboard override at the top of this file sets align-items: flex-end,
     which on a column flex box right-aligns the heading, so it is named here too */
  .sec-head,
  .course-dash .wrap-course > .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* ---------- units & lessons ---------- */
.unit { margin-bottom: 26px; }
.unit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.unit-no { font-family: var(--f-mono); font-size: 11px; color: var(--gold-ink); border: 1px solid var(--stroke-strong); border-radius: 8px; padding: 3px 8px; }
.unit-head h3 { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--cream); margin: 0; }
.unit-head span { font-size: 12.5px; color: var(--muted); }
.unit-prog { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--secondary);
  background: var(--chip-bg); border: 1px solid var(--stroke); border-radius: 999px; padding: 4px 10px; }
.unit-prog svg { width: 12px; height: 12px; }
.unit-prog.done { color: var(--green); border-color: rgba(77,191,142,0.34); background: rgba(77,191,142,0.10); }

/* certificate ribbon — appears on the dashboard once the course is complete */
.cert-ribbon { display: flex; align-items: center; gap: 12px; text-decoration: none; margin: 28px 0 0;
  padding: 15px 18px; border-radius: 16px; color: var(--cream);
  background: linear-gradient(120deg, rgba(230,184,97,0.16), rgba(230,184,97,0.05));
  border: 1px solid rgba(230,184,97,0.34);
  transition: border-color .16s, transform .12s var(--ease-bounce), box-shadow .2s; }
.cert-ribbon:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(0,0,0,.6); }
.cert-ribbon > svg:first-child { width: 26px; height: 26px; color: var(--gold-ink); flex: none; }
.cert-ribbon span { font-family: var(--f-body); font-weight: 700; font-size: 15px; }
.cert-ribbon .arr { width: 16px; height: 16px; color: var(--gold-ink); margin-left: auto; flex: none; transition: transform .16s var(--ease-smooth); }
.cert-ribbon:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cert-ribbon, .cert-ribbon:hover, .cert-ribbon .arr { transform: none !important; transition: none !important; } }


/* ============================================================
   LESSON PLAYER
   ============================================================ */
.lesson-top {
  position: fixed; top: 0; left: var(--rail-w, 0); right: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px 12px; background: rgba(11,25,23,0.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
  transition: left .26s var(--ease-smooth), background .3s;
}
.lesson-top-row { display: flex; align-items: center; gap: 14px; }
html[data-theme="light"] .lesson-top { background: rgba(255,255,255,0.92); }
html[data-theme="default"] .lesson-top { background: rgba(42,27,15,0.86); }
.lesson-close { background: none; border: none; cursor: pointer; color: var(--muted); width: 26px; height: 26px; padding: 0; }
.lesson-close:hover { color: var(--cream); }
/* step-back: same weight as the close cross so the top row stays two quiet
   controls and a progress bar, never a toolbar */
.lesson-back { background: none; border: none; cursor: pointer; color: var(--muted); width: 24px; height: 24px; padding: 0; margin-left: -6px; transition: color .15s; }
.lesson-back:hover { color: var(--cream); }
.lesson-back[hidden] { display: none; }
.lesson-bar { flex: 1; height: 8px; background: var(--track-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--stroke); }
.lesson-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); border-radius: 999px; transition: width .45s var(--ease-smooth); }
.lesson-count { font-family: var(--f-mono); font-size: 12px; color: var(--gold-ink); white-space: nowrap; }

/* daily phase tracker — a threaded gold path through the five steps of the day.
   No chips: nodes on a connecting line that fills gold as you progress, echoing
   the journey spine on the dashboard. */
.lesson-checklist { display: flex; max-width: 540px; width: 100%; margin: 0 auto; padding: 0 8px; }
.lc-item {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; padding: 0;
  white-space: nowrap; transition: color .35s;
}
.lc-item b { font-weight: inherit; min-width: 0; }
/* the nodes are jump targets now: any phase already reached can be re-opened.
   A phase still ahead of the learner stays inert rather than hidden, so the
   path still reads as four steps. */
.lc-item:not(:disabled) { cursor: pointer; }
.lc-item:disabled { cursor: default; }
.lc-item:not(:disabled):hover { color: var(--cream); }
.lc-item:not(:disabled):hover i { border-color: var(--gold); }
.lc-item:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; border-radius: 6px; }
/* the connector running to the next node (from this node's center, rightward) */
.lc-item::after {
  content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px;
  background: var(--stroke); z-index: 0; transition: background .4s var(--ease-smooth);
}
.lc-item:last-child::after { display: none; }
/* the node dot — covers the line so segments read as discrete */
.lc-item i {
  position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--stroke-strong); box-sizing: border-box;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
/* done: filled node + gold path out to the next step + strong label */
.lc-item.done { color: var(--cream); }
.lc-item.done i { background: var(--gold); border-color: var(--gold); }
.lc-item.done::after { background: var(--gold); }
/* active: glowing node, gold label — where you are right now */
.lc-item.active { color: var(--gold-ink); }
.lc-item.active i { background: var(--gold); border-color: var(--gold); transform: scale(1.25); box-shadow: 0 0 0 4px var(--gold-glow); }
@media (max-width: 420px) {
  .lc-item { font-size: 8px; letter-spacing: .06em; gap: 6px; min-width: 0; }
  .lc-item b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .lc-item i { width: 11px; height: 11px; }
  .lc-item::after { top: 5px; }
}

.lesson-stage { max-width: 620px; margin: 0 auto; padding: 150px 22px 140px; }
/* the "Today's words" step breaks out wider than the reading column to use the screen */
.lesson-stage.stage-wide { max-width: 1000px; }
.step-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.step-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 4.5vw, 30px); color: var(--cream); margin: 0 0 8px; line-height: 1.08; }
.step-sub { color: var(--secondary); font-size: 15px; margin: 0 0 26px; }

/* vocab "Today's words": a Grid | Cards view toggle over the same word list — flat
   tiles (.wtile) and an inline one-at-a-time card deck (.wcards / .wc-*), both defined
   further down near the .vgrid grid. The old tap-to-flip card styles were removed here
   when the flip was retired (it forced a cramped scrolling back face). */

.audio-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(230,184,97,0.14); border: 1px solid var(--stroke-strong); color: var(--gold-ink); cursor: pointer;
  transition: transform .15s, background .15s;
}
.audio-btn:hover { transform: scale(1.06); background: rgba(230,184,97,0.22); }
.audio-btn.playing { background: var(--gold); color: var(--on-gold); }
.audio-btn svg { width: 20px; height: 20px; }

.vocab-counter { text-align: center; font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-bottom: 16px; }

/* gendered word forms — airy + borderless; the base word stays the hero above,
   these join it as a calmer secondary tier. Shared by Ramsa, Library cards,
   the lesson card-back, and Saved words. */
.forms { width: 100%; margin-top: 16px; padding-top: 14px; text-align: left;
  border-top: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent); }
.forms-eyebrow { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); opacity: .85; margin-bottom: 2px; }
.forms-rows { display: flex; flex-direction: column; }
.form-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 6px; border: 0; background: none; border-radius: 9px;
  font: inherit; cursor: pointer; text-align: left;
  transition: background .15s;
}
/* ---- Accessibility (Phase 5) ---- */
/* The course-only `:root { --muted: #949F99 }` override that used to sit here is
   GONE, and should not come back. It aimed at "~4.6:1 on --surface" and hit it
   exactly -- but the small labels it was written for do not sit on --surface,
   they sit on --card-top, one step lighter, where it measured 3.99 and still
   failed AA. styles.css now carries a base --muted computed against --card-top
   (the worst case), so the base value is better than this override was and an
   override here would only re-darken the course pages. Fixed 2026-08-02. */
/* shared skip-link + a keyboard focus ring fallback for script-built controls
   (.opt, .wm-, .hud-chip, etc.) that have no per-component :focus-visible rule.
   Mouse users never see it. Do NOT write a star-slash pair in this comment: it
   closes the comment early and silently drops the .skip-link rule below. */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--cream); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-family: var(--f-body); font-weight: 600; font-size: 14px; text-decoration: none; transition: top .18s ease; }
.skip-link:focus { top: 8px; outline: 2px solid var(--gold-ink); outline-offset: 2px; }
:where(a, button, [tabindex], [role="button"]):focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

/* Hover and focus get the same wash, but ONLY hover cancels the outline.
   These were one rule, and because `.form-row:focus-visible` (0,2,0) outranks
   the shared `:where(...):focus-visible` fallback above (0,1,0), the `outline:
   none` in it took the gold ring off this button and nothing replaced it. What
   was left was an 8 percent gold tint identical to hover, so a keyboard user
   could not tell "I am here" from a mouse passing over -- on a row whose whole
   job is to be chosen. Every other script-built control on the course pages
   keeps that ring; this was the one that opted out, by accident. */
.form-row:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); outline: none; }
.form-row:focus-visible { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.form-row.playing { background: color-mix(in srgb, var(--gold) 13%, transparent); }
.form-lbl { flex: 0 0 auto; min-width: 66px; font-family: var(--f-body); font-weight: 600; font-size: 13px; color: var(--cream); }
.form-ar { flex: 0 0 auto; font-family: var(--f-arabic); direction: rtl; font-size: 22px; line-height: 1.25; color: var(--gold-ink-2); }
.form-tl { flex: 0 0 auto; font-family: var(--f-body); font-size: 13px; color: var(--secondary); }
.form-spk { flex: 0 0 auto; margin-left: auto; display: inline-flex; color: var(--muted); opacity: .55; transition: color .15s, opacity .15s; }
.form-spk svg { width: 15px; height: 15px; }
.form-row:hover .form-spk, .form-row:focus-visible .form-spk, .form-row.playing .form-spk { color: var(--gold-ink); opacity: 1; }
/* Ramsa result card is centered — keep the forms block tidy and centered under it */
.rb-body .forms { max-width: 300px; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .form-row, .form-spk { transition: none; } }

/* (retired with the flip: gendered forms now open in the Focus lightbox, not a scrolling card back) */

/* option buttons (choose / check) */
.options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.opt {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--stroke); border-radius: 16px; padding: 16px 18px;
  color: var(--cream); font-family: var(--f-body); font-size: 16px; transition: border-color .15s, background .15s, transform .1s;
}
.opt:hover { border-color: var(--stroke-strong); background: var(--surface-2); }
/* reward the right answer: a confident pop + a green ring pulse, so a correct
   answer feels at least as eventful as a wrong one (which shakes) — no cheap burst */
.opt.correct { border-color: var(--green); background: rgba(77,191,142,0.14); animation: opt-correct-pop .5s var(--ease-spring-soft); }
@keyframes opt-correct-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77,191,142,0); }
  32% { transform: scale(1.035); box-shadow: 0 0 0 4px rgba(77,191,142,.30); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77,191,142,0); }
}
.opt.wrong { border-color: var(--coral); background: rgba(232,97,74,0.12); }
.opt.shake { animation: lesson-shake .4s; }
.opt:disabled { cursor: default; }
/* transliteration leads the answer; Arabic supports under it */
.opt .opt-tl { font-family: var(--f-mono); font-weight: 700; font-size: 18px; color: var(--cream); display: block; margin-top: 0; }
.opt .ar { font-family: var(--f-arabic); direction: rtl; font-size: 17px; color: var(--gold-ink-2); display: block; margin-top: 4px; }

/* match grid */
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; align-items: stretch; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
/* every card is exactly the same size on both columns — fixed height, centered */
.match-tile {
  cursor: pointer; text-align: center; background: var(--surface); border: 1.5px solid var(--stroke);
  border-radius: 14px; padding: 10px 12px; color: var(--cream); transition: all .15s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 80px; overflow: hidden;
}
.match-tile .mt-tl { font-family: var(--f-body); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--cream); }
.match-tile .mt-ar { font-family: var(--f-arabic); direction: rtl; font-size: 15px; line-height: 1.25; color: var(--gold-ink-2); }
.match-tile .mt-en { font-family: var(--f-body); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--cream); }
.match-tile.ar { font-family: var(--f-arabic); direction: rtl; font-size: 22px; } /* legacy */
.match-tile:hover { border-color: var(--stroke-strong); }
.match-tile.sel { border-color: var(--gold); background: rgba(230,184,97,0.14); }
.match-tile.done { opacity: .35; pointer-events: none; border-color: var(--green); }
.match-tile.miss { animation: lesson-shake .4s; border-color: var(--coral); }

/* build (word chips) */
.build-answer { min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  background: var(--chip-bg); border: 1px dashed var(--stroke-strong); border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.build-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { cursor: pointer; font-family: var(--f-arabic); direction: rtl; font-size: 18px;
  background: var(--surface); border: 1.5px solid var(--stroke); border-radius: 12px; padding: 8px 14px; color: var(--cream); transition: all .12s; }
.chip:hover { border-color: var(--stroke-strong); }
.chip.used { opacity: .25; pointer-events: none; }
/* build chips: transliteration-led (LTR) with Arabic as subtext */
.chip-build { display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  direction: ltr; font-family: var(--f-body); padding: 7px 14px; line-height: 1.15; }
.chip-build .chip-tl { font-family: var(--f-body); font-weight: 700; font-size: 16px; color: var(--cream); }
.chip-build .chip-ar { font-family: var(--f-arabic); font-size: 13px; color: var(--gold-ink-2); }

/* grammar spotlight */
.grammar-box { background: var(--surface); border: 1px solid var(--stroke); border-left: 3px solid var(--gold); border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; }
.grammar-box p { color: var(--secondary); font-size: 15px; margin: 0 0 14px; }
.grammar-ex { display: flex; flex-direction: column; gap: 8px; }
.grammar-ex .row { display: flex; align-items: center; gap: 12px; background: var(--chip-bg); border-radius: 10px; padding: 9px 12px; }
.grammar-ex .row .ar { font-family: var(--f-arabic); direction: rtl; font-size: 16px; color: var(--gold-ink-2); }
.grammar-ex .row .en { font-size: 13.5px; color: var(--muted); margin-left: auto; }

/* feedback banner */
.feedback { display: none; align-items: center; gap: 10px; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; font-size: 14.5px; }
.feedback.show { display: flex; }
.feedback.good { background: rgba(77,191,142,0.14); color: var(--green); border: 1px solid rgba(77,191,142,0.34); }
.feedback.bad { background: rgba(232,97,74,0.12); color: var(--coral-ink); border: 1px solid rgba(232,97,74,0.32); }

/* sticky footer action */
.lesson-foot { position: fixed; bottom: 0; left: var(--rail-w, 0); right: 0; z-index: 50; padding: 16px 22px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--bg) 60%, transparent);
  transition: left .26s var(--ease-smooth); }
.lesson-foot .inner { max-width: 620px; margin: 0 auto; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* complete screen */
.done-wrap { text-align: center; padding-top: 26px; }
.done-saqr { width: 160px; margin: 0 auto 8px; display: block; }
.done-xp { font-family: var(--f-mono); color: var(--gold-ink); font-size: 15px; margin: 10px 0 4px; }
.done-cert-note { font-family: var(--f-body); font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.done-cert-note a { color: var(--gold-ink); text-decoration: none; }
.done-cert-note a:hover { text-decoration: underline; }
.done-recall { background: var(--surface); border: 1px solid var(--stroke); border-radius: 18px; padding: 18px 20px; margin: 22px 0; text-align: left; }
.done-recall h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.done-recall .row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--stroke); }
.done-recall .row:last-child { border-bottom: none; }
.done-recall .row .tl { font-family: var(--f-mono); font-weight: 700; font-size: 15px; color: var(--cream); letter-spacing: -.01em; }
.done-recall .row .ar { font-family: var(--f-arabic); direction: rtl; font-size: 17px; color: var(--gold-ink-2); }
.done-recall .row .en { font-size: 13.5px; color: var(--muted); margin-left: auto; }
.done-sentence { background: radial-gradient(120% 120% at 50% 0%, rgba(230,184,97,0.10), transparent 65%), var(--surface); border: 1px solid var(--stroke-strong); border-radius: 18px; padding: 18px 20px; margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; }
.done-sentence .ds-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.done-sentence .ds-tl { font-family: var(--f-mono); font-weight: 700; font-size: 20px; color: var(--cream); letter-spacing: -.01em; line-height: 1.3; }
.done-sentence .ds-ar { font-family: var(--f-arabic); direction: rtl; font-size: 22px; color: var(--gold-ink-2); line-height: 1.4; }
.done-sentence .ds-en { font-size: 14px; color: var(--secondary); }

/* today's plan — a quiet caption line (the steps, middot-joined), not chips */
.intro-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.intro-plan .ip { display: inline-flex; align-items: center; background: none; border: none; padding: 0; }
.intro-plan .ip i { display: none; }
.intro-plan .ip:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--gold-ink); font-size: 15px; line-height: 1; }

/* vocab note (on the flip side) */
/* (.vcard-note retired with the vocab flip; the Focus lightbox uses .vf-note) */

/* multi-note grammar */
.grammar-box .gb-title { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); margin: 0 0 8px; }
.grammar-ex .row .gx-tl { font-family: var(--f-mono); font-weight: 700; font-size: 16px; color: var(--cream); }

/* model sentences (examples) */
.ex-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ex-row { background: var(--surface); border: 1px solid var(--stroke); border-radius: 16px; padding: 16px 18px; cursor: pointer; transition: border-color .15s; }
.ex-row:hover { border-color: var(--stroke-strong); }
.ex-main { display: flex; align-items: center; gap: 12px; }
.ex-text { flex: 1; }
.ex-tl { font-family: var(--f-mono); font-weight: 700; font-size: 21px; color: var(--cream); line-height: 1.3; letter-spacing: -.01em; }
.ex-ar { font-family: var(--f-arabic); direction: rtl; font-size: 18px; color: var(--gold-ink-2); margin-top: 6px; }
.ex-en { font-size: 14px; color: var(--secondary); margin-top: 6px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s, max-height .25s; }
.ex-row.revealed .ex-en { opacity: 1; max-height: 120px; }
.ex-register, .wt-register { display: inline-flex; align-items: center; width: fit-content; border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: 999px; padding: 3px 8px; color: var(--gold-ink-2); background: color-mix(in srgb, var(--gold) 9%, transparent); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wt-register { margin: 9px auto 0; }
.ex-guidance { color: var(--secondary); font-size: 13px; line-height: 1.55; border-top: 1px solid var(--stroke); margin-top: 0; padding-top: 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s, max-height .25s, margin-top .25s, padding-top .25s; }
.ex-guidance > div + div { margin-top: 5px; }
.ex-guidance b { color: var(--cream); font-weight: 700; }
.ex-row.revealed .ex-guidance { opacity: 1; max-height: 240px; margin-top: 12px; padding-top: 10px; }
.ex-row .audio-btn { flex: none; }

/* dialogue fill-in */
.dia-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.dia-line { display: flex; gap: 10px; align-items: flex-start; }
.dia-line.dia-b { flex-direction: row-reverse; }
.dia-sp { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; background: rgba(230,184,97,0.14); color: var(--gold-ink); border: 1px solid var(--stroke); }
.dia-body { background: var(--surface); border: 1px solid var(--stroke); border-radius: 14px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; max-width: 84%; }
.dia-line.dia-b .dia-body { background: var(--surface-2); }
.dia-ar { font-family: var(--f-arabic); direction: rtl; font-size: 20px; color: var(--cream); line-height: 1.45; }
.dia-en { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
/* clean literal transliteration reads as primary; the syllable "say it" guide
   ("ah-lan wa sah-lan") sits beneath it, small + muted, on the study surfaces */
.tl-syl { display: block; font-family: var(--f-mono); font-weight: 600; font-size: 12px; letter-spacing: .01em; color: var(--muted); margin-top: 3px; }
.match-tile .mt-tl { display: block; }
.match-tile .tl-syl { font-size: 11px; margin-top: 2px; }

/* the phrase you must produce — shown big + centered, not buried in the subhead */
.recall-prompt { font-family: var(--f-body); font-weight: 700; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.28; color: var(--cream); text-align: center; margin: 2px auto 22px; max-width: 24ch; }

/* dialogue step-through (scenario style): stacked tl/ar/en + a typing beat */
.dia-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dia-line.dia-b .dia-text { align-items: flex-end; text-align: right; }
.dia-tl { font-family: var(--f-mono); font-weight: 700; font-size: 15px; color: var(--cream); line-height: 1.3; }
.dia-enter { animation: dia-in .34s var(--ease-smooth) both; }
@keyframes dia-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.dia-body.is-typing { min-height: 22px; }
.dia-typing { display: inline-flex; gap: 4px; align-items: center; }
.dia-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: tk-typing 1.1s infinite; }
.dia-typing i:nth-child(2) { animation-delay: .18s; }
.dia-typing i:nth-child(3) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .dia-enter { animation: none; } .dia-typing i { animation: none; } }

/* ============================================================
   "Today's words" = the Word Wall (flat tiles, no flip, no scroll) + a Focus
   lightbox you step through like a flashcard deck. The grid lives in the widened
   .lesson-stage.stage-wide so it can pack ~5 tiles per row on desktop.
   ============================================================ */

/* the wall: a compact auto-fill grid — ~5 across at the wide stage, ~2 on a phone */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 4px; align-items: stretch; }
@media (max-width: 480px) { .vgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } }

/* the Grid | Cards view toggle (reuses the shared .lb-view segmented pill) */
.wt-viewbar { display: flex; justify-content: center; margin: 2px 0 18px; }
.vgrid[hidden], .wcards[hidden] { display: none; }

/* one word tile — everything visible, nothing scrolls; tap to study it one-by-one */
.wtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 128px; padding: 16px 12px; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 18px;
  transition: transform .15s var(--ease-smooth), border-color .15s, background .15s; }
.wtile:hover { transform: translateY(-2px); border-color: var(--stroke-strong); background: var(--surface-2); }
.wtile:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.wt-tl { font-family: var(--f-mono); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--cream); letter-spacing: -.01em; }
.wt-ar { font-family: var(--f-arabic); direction: rtl; font-size: 18px; line-height: 1.3; color: var(--gold-ink-2); margin-top: 2px; }
.wt-en { font-family: var(--f-body); font-size: 12.5px; color: var(--secondary); line-height: 1.3; margin-top: 3px; }
/* speaker chip tucked top-right (reuses the shared .audio-btn look, smaller) */
.wtile .audio-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; }
.wtile .audio-btn svg { width: 15px; height: 15px; }
/* a subtle dot marks a word that carries gendered forms — open it to see them */
.wt-forms-dot { position: absolute; top: 12px; left: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .7; }

/* ---- Cards view: one word at a time inline, stepped like a flashcard deck ---- */
.wcards { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.wcard { position: relative; width: 100%; max-width: 440px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--stroke-strong); border-radius: 26px; padding: 28px 24px 22px; text-align: center; }
.wc-count { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.wc-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wc-tl { font-family: var(--f-mono); font-weight: 700; font-size: clamp(28px, 9vw, 40px); line-height: 1.15; color: var(--cream); letter-spacing: -.01em; }
.wc-ar { font-family: var(--f-arabic); direction: rtl; font-size: clamp(26px, 7.5vw, 34px); line-height: 1.25; color: var(--gold-ink-2); }
.wc-en { font-family: var(--f-body); font-size: 16px; color: var(--secondary); }
.wc-note { font-family: var(--f-body); font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 32ch; }
.wc-forms { width: 100%; }
.wc-forms .forms { max-width: 320px; margin-left: auto; margin-right: auto; }
.wc-acts { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wc-acts .vcard-save { margin-top: 0; }   /* the shared Save chip carries a 12px top margin meant for a card back */
.wc-hear { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--gold-ink);
  background: rgba(230,184,97,0.12); border: 1px solid var(--stroke-strong); border-radius: 999px; padding: 10px 18px; transition: background .15s; }
.wc-hear:hover { background: rgba(230,184,97,0.20); }
.wc-hear svg { width: 17px; height: 17px; }
.wc-hear.playing { background: var(--gold); color: var(--on-gold); }
.wc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: 2px; }
.wc-prev, .wc-next { width: 40px; height: 40px; display: inline-grid; place-items: center; cursor: pointer;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--stroke-strong); color: var(--cream); font-size: 22px; line-height: 1;
  transition: background .15s, opacity .15s; }
.wc-prev:hover, .wc-next:hover { background: rgba(230,184,97,0.18); }
.wc-prev:disabled, .wc-next:disabled { opacity: .3; cursor: default; }
.wc-dots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 62%; }
.wc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stroke-strong); border: 0; padding: 0; cursor: pointer; transition: background .15s, transform .15s; }
.wc-dot.on { background: var(--gold); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .wtile, .wc-prev, .wc-next, .wc-dot { transition: none; } }

/* step 8: interactive scenario — reuses the .dia-* chat thread + .options choices */
.scn-thread { margin-bottom: 16px; }
.scn-turn { margin-bottom: 8px; }
.scn-cue { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--cream); margin: 2px 0 10px; }
.dia-line.dia-b .dia-sp { width: auto; min-width: 26px; height: 22px; padding: 0 9px; border-radius: 12px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.scn-next { display: inline-flex; align-items: center; cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: 14px; background: rgba(230,184,97,0.10); color: var(--gold-ink); border: 1px solid var(--stroke-strong); border-radius: 999px; padding: 11px 20px; transition: background .15s; }
.scn-next:hover { background: rgba(230,184,97,0.18); }

/* say-it-out-loud (shadow) step */
.speak-card { text-align: center; background: radial-gradient(130% 130% at 50% 0%, rgba(230,184,97,0.08), transparent 60%), var(--surface); border: 1px solid var(--stroke); border-radius: 22px; padding: 30px 24px 22px; margin-bottom: 18px; }
.speak-tl { font-family: var(--f-mono); font-weight: 700; font-size: clamp(26px, 7vw, 34px); color: var(--cream); line-height: 1.25; letter-spacing: -.01em; margin-bottom: 8px; }
.speak-ar { font-family: var(--f-arabic); direction: rtl; font-size: clamp(22px, 6vw, 28px); color: var(--gold-ink-2); line-height: 1.4; margin-bottom: 10px; }
.speak-en { font-size: 14.5px; color: var(--secondary); }
.speak-controls { display: flex; justify-content: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.speak-mic.recording { color: #fff; background: #E2705B; border-color: transparent; }
.speak-sayit { text-align: center; margin-top: 10px; }

/* one-time "resumed" note at the top of a restored lesson */
.resume-note {
  font-family: var(--f-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-ink); text-align: center; margin: 0 0 12px;
  animation: resume-note-in .3s var(--ease-smooth);
}
@keyframes resume-note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* shared play controls + waveform (also used by the pronunciation lab) */
.pl-play { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--f-body); font-weight: 700; font-size: 15px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); border: none; border-radius: 999px; padding: 13px 22px; box-shadow: 0 10px 24px -12px var(--gold-glow); transition: transform .15s var(--ease-smooth); }
.pl-play:hover { transform: translateY(-2px); }
.pl-play:active { transform: translateY(1px); }
.pl-play svg { width: 18px; height: 18px; }
.pl-slow { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: 13.5px; background: rgba(230,184,97,0.10); color: var(--gold-ink); border: 1px solid var(--stroke-strong); border-radius: 999px; padding: 12px 17px; transition: background .15s; }
.pl-slow:hover { background: rgba(230,184,97,0.18); }
.pl-slow svg { width: 15px; height: 15px; }
.pl-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 24px; margin-top: 14px; opacity: 0; transition: opacity .25s; }
.pl-wave.on { opacity: 1; }
.pl-wave i { display: block; width: 3px; height: 6px; border-radius: 999px; background: var(--gold); }
.pl-wave.on i { animation: pl-bar .9s var(--ease-smooth) infinite; }
.pl-wave i:nth-child(1){ animation-delay: 0s; } .pl-wave i:nth-child(2){ animation-delay: .1s; }
.pl-wave i:nth-child(3){ animation-delay: .2s; } .pl-wave i:nth-child(4){ animation-delay: .3s; }
.pl-wave i:nth-child(5){ animation-delay: .15s; } .pl-wave i:nth-child(6){ animation-delay: .05s; }
.pl-wave i:nth-child(7){ animation-delay: .25s; }
@keyframes pl-bar { 0%,100% { height: 6px; opacity: .5; } 50% { height: 20px; opacity: 1; } }

/* ============================================================
   SHOP / STOREFRONT
   ============================================================ */
.shop-hero { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.shop-hero h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 6vw, 46px); color: var(--cream); margin: 14px 0 12px; line-height: 1.02; }
.shop-hero h1 .gold { color: var(--gold-ink); }
.shop-hero p { color: var(--secondary); font-size: 16px; margin: 0 auto; max-width: 52ch; }

.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.shop-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--stroke);
  border-radius: 22px; padding: 22px; transition: transform .2s var(--ease-smooth), border-color .2s;
}
.shop-card:hover { transform: translateY(-4px); border-color: var(--stroke-strong); }
.shop-card.feature { grid-column: 1 / -1; flex-direction: row; gap: 26px; align-items: center; background:
  radial-gradient(120% 160% at 100% 0%, rgba(230,184,97,0.14), transparent 55%), var(--surface); }
.shop-card.feature .card-body { flex: 1; }
.shop-card.feature .feature-saqr { width: 150px; height: auto; order: 2; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--cream); margin: 0 0 6px; }
.shop-card .desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; flex: 1; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.price { font-family: var(--f-display); font-weight: 700; font-size: 26px; color: var(--cream); }
.price-was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.tabby-note { font-family: var(--f-mono); font-size: 11px; color: var(--gold-ink); margin: 0 0 16px; }
.card-actions { display: flex; gap: 10px; margin-top: auto; }
.card-actions .btn { flex: 1; justify-content: center; font-size: 14px; padding: 11px 14px; }

.save-tag { font-family: var(--f-mono); font-size: 10.5px; color: var(--green); background: rgba(77,191,142,0.12); border: 1px solid rgba(77,191,142,0.3); border-radius: 999px; padding: 3px 9px; }

.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.book-card { background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); border: 1px solid var(--stroke); border-radius: 18px; padding: 22px 18px 18px;
  display: flex; flex-direction: column; align-items: stretch; text-align: center;
  transition: border-color .16s, transform .14s var(--ease-bounce), box-shadow .2s; }
.book-card:hover { border-color: var(--stroke-strong); transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.65); }

/* an actual book cover — spine edge on the left, page edges on the right, a
   gilded brand line and title, gently shelved on a 3D tilt. */
.book-cover {
  position: relative; width: 100%; max-width: 142px; aspect-ratio: 3 / 4;
  margin: 0 auto 18px; padding: 18px 16px 16px 24px; overflow: hidden;
  border-radius: 4px 11px 11px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow: 0 18px 32px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.2);
  transform: perspective(720px) rotateY(-7deg); transform-origin: left center;
  transition: transform .32s var(--ease-bounce), box-shadow .32s;
}
.book-card:hover .book-cover { transform: perspective(720px) rotateY(-2deg) translateY(-2px); box-shadow: 0 26px 44px -18px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.24); }
/* spine shading */
.book-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13px; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0)); }
/* page edges */
.book-cover::after { content: ""; position: absolute; right: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.6) 1px, rgba(0,0,0,.14) 1px, rgba(0,0,0,.14) 2px); }
.bc-brand { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .3em; color: rgba(0,0,0,.5); position: relative; z-index: 2; }
.bc-brand::after { content: ""; display: block; width: 22px; height: 2px; margin: 7px auto 0; border-radius: 2px; background: rgba(0,0,0,.32); }
.bc-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 4.4vw, 21px); line-height: 1.04; color: var(--on-gold); position: relative; z-index: 2; }
.bc-kind { font-family: var(--f-body); font-style: italic; font-size: 11.5px; color: rgba(0,0,0,.52); position: relative; z-index: 2; }

.book-card h4 { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); margin: 0 0 4px; }
.book-card .fmt { display: flex; gap: 8px; margin: 10px 0 14px; }
.fmt-opt { flex: 1; text-align: center; font-family: var(--f-mono); font-size: 11px; padding: 7px; border-radius: 9px; border: 1px solid var(--stroke); color: var(--secondary); }
.fmt-opt b { display: block; color: var(--cream); font-size: 13px; font-family: var(--f-body); }
.book-card .btn-block { margin-top: auto; }

/* The confirm dialog (LsanyConfirm) moved to /shared/confirm.css when it stopped
   being a course-only component. Every page that loads /shared/confirm.js loads
   that stylesheet with it; nothing here styles it any more.
   NOTE: `.lc-item` further up this file is the lesson checklist, a different
   component that happens to share the `lc-` prefix. Do not merge the two. */

/* recoverable empty state — shown when a data file fails to load */
.load-fail {
  margin: 48px auto; max-width: 420px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 28px 24px; border: 1px solid var(--stroke); border-radius: 18px;
  background: var(--chip-bg); color: var(--cream);
}
.load-fail p { margin: 0; font-family: var(--f-body); font-size: 15px; opacity: .85; }
.load-retry {
  font-family: var(--f-body); font-weight: 600; font-size: 14px; cursor: pointer;
  border-radius: 12px; padding: 11px 22px; color: #FAF5E8;
  background: var(--gold-deep); border: 1px solid var(--gold-deep);
  transition: background .16s, border-color .16s;
}
.load-retry:hover { background: var(--gold); border-color: var(--gold); }
.load-plans {
  font-family: var(--f-body); font-weight: 600; font-size: 13px;
  color: var(--secondary); text-decoration: none; border-bottom: 1px solid var(--stroke-strong);
  padding-bottom: 1px; transition: color .16s, border-color .16s;
}
.load-plans:hover { color: var(--cream); border-color: var(--cream); }

/* Locked, not broken. Same box, different message: this is what a Speaker buyer
   sees on the four pages whose content carries required_key foundation:library.
   It reads as a plan boundary rather than a fault, so it is a touch wider, and
   it takes a real title instead of leading with an apology. */
.load-fail--locked { max-width: 480px; gap: 14px; padding: 34px 28px; }
.load-fail--locked .load-eyebrow {
  margin: 0; font-family: var(--f-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); opacity: 1;
}
.load-locked-title {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: 21px; line-height: 1.25; color: var(--cream);
}
.load-fail--locked .load-retry { text-decoration: none; margin-top: 4px; }
@media (max-width: 520px) {
  .load-fail--locked { margin: 32px 16px; padding: 26px 20px; }
  .load-locked-title { font-size: 18px; }
}

/* server-issued certificate: verify line + issuance failure note */
.cert-verify {
  margin-top: 14px; text-align: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink);
  opacity: .85;
}
.cert-verify-copy {
  display: block; margin: 8px auto 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 12.5px;
  color: var(--secondary); background: none; border: none;
  border-bottom: 1px solid var(--stroke-strong); padding: 0 0 1px;
  transition: color .16s, border-color .16s;
}
.cert-verify-copy:hover { color: var(--cream); border-color: var(--cream); }
.cert-issue-msg {
  flex-basis: 100%; margin: 10px 0 0; text-align: center;
  font-family: var(--f-body); font-size: 13px; color: var(--secondary);
}

/* shimmer skeleton — shown while gated content is in flight */
.skel {
  min-height: 200px; margin: 24px 0; border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(100deg, var(--chip-bg) 40%, var(--surface-2) 50%, var(--chip-bg) 60%);
  background-size: 200% 100%;
  animation: skel-sheen 1.1s linear infinite;
}
@keyframes skel-sheen { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* say-it-everywhere result chip (say-it.js) */
.sayit-chip {
  display: inline-block; font-family: var(--f-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px;
  color: var(--secondary); background: var(--chip-bg, var(--surface)); border: 1px solid var(--stroke);
}
.sayit-chip.is-good  { color: #58B98A; border-color: rgba(88,185,138,.4); }
.sayit-chip.is-close { color: var(--gold-ink); border-color: rgba(230,184,97,.4); }
.sayit-chip.is-bad   { color: #E2705B; border-color: rgba(226,112,91,.4); }
.sayit-chip.is-wait  { color: var(--secondary); }

/* toast for stubbed buy */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border: 1px solid var(--stroke-strong); border-radius: 14px;
  padding: 13px 20px; color: var(--cream); font-size: 14px; z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   NEXT-LEVEL UPSELL (dashboard)
   ============================================================ */
.next-level {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: radial-gradient(130% 150% at 100% 0%, rgba(230,184,97,0.14), transparent 58%), var(--surface);
  border: 1px solid var(--stroke-strong); border-radius: var(--r-panel); padding: 30px 34px; overflow: hidden;
}
.next-level h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 4vw, 30px); color: var(--cream); margin: 12px 0 8px; line-height: 1.05; }
.next-body > p { color: var(--secondary); font-size: 15px; max-width: 54ch; margin: 0 0 16px; }
.next-unlocks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.next-unlocks li { position: relative; padding-left: 26px; color: var(--cream); font-size: 14px; }
.next-unlocks li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 13px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.next-unlock-track { max-width: 420px; margin-bottom: 9px; }
.next-unlock-label { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--gold-ink); margin: 0 0 18px; }
.next-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.next-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.next-price-now { font-family: var(--f-display); font-weight: 700; font-size: 28px; color: var(--cream); }
.next-price-was { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.next-price-note { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); width: 100%; }
.next-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.next-ctas .btn { font-size: 14px; padding: 11px 18px; }
.next-foot { font-size: 12px; color: var(--muted); margin: 16px 0 0; max-width: 52ch; }
.next-saqr { width: 130px; height: auto; filter: drop-shadow(0 16px 26px rgba(0,0,0,.35)); position: relative; z-index: 1; }
.next-level.is-unlocked { border-color: rgba(77,191,142,0.45); background: radial-gradient(130% 150% at 100% 0%, rgba(77,191,142,0.16), transparent 58%), var(--surface); }

/* responsive */
@media (max-width: 720px) {
  .course-hero { grid-template-columns: 1fr; }
  .course-hero-saqr { display: none; }
  .shop-card.feature { flex-direction: column; text-align: center; }
  .shop-card.feature .feature-saqr { order: -1; }
  .card-actions { flex-direction: column; }
  .match-tile.ar { font-size: 19px; }
  .next-level { grid-template-columns: 1fr; padding: 26px 22px; }
  .next-saqr { display: none; }
}

/* ============================================================
   DASHBOARD polish — alive current lesson + prouder stats
   ============================================================ */
@keyframes tk-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,184,97,0); } 50% { box-shadow: 0 0 0 6px rgba(230,184,97,0.13); } }
.stat { transition: border-color .2s, transform .2s; }
.stat:hover { border-color: var(--stroke-strong); transform: translateY(-2px); }

/* ============================================================
   TOOLKIT — featured Lessons tile + tidy grid, living previews
   ============================================================ */
.toolkit-head { align-items: flex-end; }
.toolkit-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0; }
.toolkit-head .eyebrow { margin-bottom: 2px; }

/* ---- Lsany AI: the living practice world (ambient depth behind the tiles) ---- */
.lsany-ai-world { position: relative; margin: 0 0 8px; padding: 6px 0 2px; }
.lsany-ai-world > .sec-head, .lsany-ai-world > .toolkit { position: relative; z-index: 1; }
.ai-ambient { position: absolute; inset: -14px -8px; z-index: 0; overflow: hidden; border-radius: var(--r-panel); pointer-events: none; }
.ai-orb { position: absolute; border-radius: 50%; filter: blur(44px); opacity: .45; }
.ai-orb.a { width: 340px; height: 340px; top: -90px; left: -50px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%); animation: ai-drift-a 24s var(--ease-smooth) infinite alternate; }
.ai-orb.b { width: 300px; height: 300px; bottom: -110px; right: -40px; background: radial-gradient(circle, color-mix(in srgb, var(--green) 20%, transparent), transparent 70%); animation: ai-drift-b 28s var(--ease-smooth) infinite alternate; }
.ai-grid { position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(circle at center, var(--stroke-strong) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(125% 100% at 50% 0%, #000, transparent 72%); }
@keyframes ai-drift-a { to { transform: translate(42px, 28px) scale(1.1); } }
@keyframes ai-drift-b { to { transform: translate(-34px, -22px) scale(1.08); } }

/* ---- shared tile skin ---- */
.tk-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: var(--cream);
  background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 16px;
  transition: transform .3s var(--ease-bounce), border-color .25s, box-shadow .25s;
}
.tk-card::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--stroke-strong), transparent); }
.tk-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 120% at 100% 0%, var(--ac-glow, rgba(230,184,97,0.16)), transparent 55%); }
.tk-card:hover { transform: translateY(-4px); border-color: var(--stroke-strong); box-shadow: 0 24px 44px -24px rgba(0,0,0,.65); }
.tk-card.ac-gold  { --ac: var(--gold);  --ac-glow: rgba(230,184,97,0.16); }
.tk-card.ac-green { --ac: var(--green); --ac-glow: rgba(77,191,142,0.18); }
.tk-card.ac-coral { --ac: var(--coral); --ac-glow: rgba(232,97,74,0.18); }

.tk-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.tk-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(230,184,97,0.12); border: 1px solid var(--stroke); color: var(--ac, var(--gold)); }
.tk-card.ac-green .tk-ico { background: rgba(77,191,142,0.12); }
.tk-card.ac-coral .tk-ico { background: rgba(232,97,74,0.12); }
.tk-ico .ic { width: 18px; height: 18px; }
.tk-tag { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--stroke); border-radius: 999px; padding: 3px 8px; }

.tk-body { position: relative; z-index: 1; }
.tk-body h3 { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--cream); margin: 0 0 3px; }
.tk-body p { font-size: 12px; color: var(--secondary); margin: 0; line-height: 1.4; }
.tk-sub { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; color: var(--ac, var(--gold)); }
.tk-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--ac, var(--gold)); }
.tk-cta svg { width: 15px; height: 15px; transition: transform .25s var(--ease-bounce); }
.tk-card:hover .tk-cta svg { transform: translateX(3px); }

/* the living preview slot */
.m { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; margin: 10px 0; min-height: 0; }

/* ---- toolkit: featured tile + tidy grid ---- */
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.tk-grid .tk-card { min-height: 152px; padding: 18px; }
.tk-grid .tk-top { margin-bottom: 12px; }
.tk-grid .tk-body { flex: 1; }
.tk-grid .tk-body h3 { font-size: 15px; }
.tk-grid .tk-body p { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-grid .tk-cta { margin-top: 12px; font-size: 12.5px; }

/* ---- wide tile: clean horizontal layout (icon · text · compact visual) ---- */
.sz-wide { display: grid; grid-template-columns: 48px minmax(0, 1fr) clamp(96px, 30%, 148px); grid-template-areas: "ico mid viz"; align-items: center; column-gap: 16px; padding: 18px 20px; }
.sz-wide .tk-ico { grid-area: ico; align-self: center; width: 48px; height: 48px; border-radius: 14px; }
.sz-wide .tk-ico .ic { width: 23px; height: 23px; }
.sz-wide .tk-mid { grid-area: mid; min-width: 0; position: relative; z-index: 1; }
.sz-wide .tk-midtop { display: flex; align-items: center; gap: 10px; }
.sz-wide .tk-midtop h3 { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--cream); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-wide .tk-midtop > :last-child { margin-left: auto; flex: 0 0 auto; }
.sz-wide .tk-mid p { font-size: 12.5px; color: var(--secondary); margin: 5px 0 0; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sz-wide .tk-cta { margin-top: 10px; }
.sz-wide .tk-viz { grid-area: viz; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; overflow: hidden; }
.sz-wide .tk-viz .m { margin: 0; height: 100%; width: 100%; }

/* compact motif tuning inside the narrow viz column */
.sz-wide .m-translate { flex-direction: column; gap: 0; }
.sz-wide .m-translate .tr-en, .sz-wide .m-translate .tr-mid { display: none; }
.sz-wide .m-translate .tr-ar { align-items: center; }
.sz-wide .m-library { flex-direction: column; gap: 5px; align-items: stretch; justify-content: center; flex-wrap: nowrap; }
.sz-wide .m-library .lib-w { padding: 5px 10px; justify-content: center; }
.sz-wide .m-library .lib-w .ar { font-size: 15px; }
.sz-wide .m-trace .ar { font-size: 60px; }
.sz-wide .m-wave { height: 56px; width: 100%; }
.sz-wide .m-poster { width: 100%; }

/* ---- featured tile (full-width Lessons) ---- */
.tk-feature { grid-template-columns: 56px minmax(0, 1fr) clamp(150px, 34%, 230px); column-gap: 20px; padding: 22px 26px; }
.tk-feature .tk-ico { width: 54px; height: 54px; border-radius: 16px; }
.tk-feature .tk-ico .ic { width: 26px; height: 26px; }
.tk-feature .tk-midtop h3 { font-size: 21px; white-space: normal; }
.tk-feature .tk-mid p { font-size: 14px; -webkit-line-clamp: 3; }
.tk-feature .tk-cta { font-size: 14px; margin-top: 14px; }
.tk-feature .m-progress { flex-direction: column; gap: 12px; }
.tk-feature .m-progress .ring { width: 104px; height: 104px; }

/* ---- motif: chat ---- */
.m-chat { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.m-chat .cb { max-width: 80%; padding: 9px 13px; border-radius: 15px; }
.m-chat .cb .ar { font-family: var(--f-arabic); font-size: 18px; color: var(--cream); }
.m-chat .cb-them { align-self: flex-start; background: var(--surface); border: 1px solid var(--stroke); border-bottom-left-radius: 4px; }
.m-chat .cb-you { align-self: flex-end; background: rgba(77,191,142,0.16); border: 1px solid rgba(77,191,142,0.32); border-bottom-right-radius: 4px; }
.m-chat .typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 13px 14px; }
.m-chat .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: tk-typing 1.2s infinite; }
.m-chat .typing span:nth-child(2) { animation-delay: .2s; }
.m-chat .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes tk-typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- motif: progress ring ---- */
.m-progress .ring { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--ac, var(--gold)) calc(var(--p,0) * 1%), var(--track-bg) 0); transition: background .9s var(--ease-smooth); }
.m-progress .ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.m-progress .ring b { position: relative; font-family: var(--f-display); font-weight: 700; font-size: 27px; color: var(--cream); }
.m-progress .ring b i { font-size: 14px; color: var(--muted); font-style: normal; }
.m-progress { flex-direction: column; gap: 16px; }
.m-progress .pips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 220px; }
.m-progress .pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--stroke-strong); }
.m-progress .pips i.done { background: var(--gold); }
.m-progress .pips i.cur { background: var(--gold); box-shadow: 0 0 0 3px rgba(230,184,97,0.22); }

/* ---- motif: poster ---- */
.m-poster { flex-direction: column; gap: 3px; border-radius: 12px; overflow: hidden; padding: 8px; background: radial-gradient(120% 120% at 0% 0%, rgba(230,184,97,0.28), transparent 60%), linear-gradient(160deg, var(--bg-3), var(--surface)); border: 1px solid var(--stroke); }
.m-poster .ar { font-family: var(--f-arabic); font-size: 24px; color: var(--gold-ink-2); }
.m-poster em { font-family: var(--f-mono); font-size: 8.5px; font-style: normal; letter-spacing: .04em; color: var(--muted); }

/* ---- motif: timer ---- */
.m-timer { flex-direction: column; gap: 5px; }
.m-timer b { font-family: var(--f-mono); font-weight: 700; font-size: 26px; color: var(--coral); letter-spacing: .02em; }
.m-timer .bar { width: 74%; height: 5px; border-radius: 999px; background: var(--track-bg); overflow: hidden; }
.m-timer .bar i { display: block; height: 100%; width: 60%; background: linear-gradient(90deg, var(--coral-deep), var(--coral)); border-radius: 999px; animation: tk-drain 2.6s var(--ease-smooth) infinite alternate; }
.m-timer em { font-family: var(--f-mono); font-size: 9px; font-style: normal; color: var(--muted); }
@keyframes tk-drain { from { width: 74%; } to { width: 16%; } }

/* ---- motif: call ---- */
.m-call .ph { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--gold-ink); background: rgba(230,184,97,0.14); border: 1px solid var(--stroke-strong); }
.m-call .ph .ic { width: 22px; height: 22px; }
.m-call .ph::before, .m-call .ph::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: tk-ring 2.2s ease-out infinite; }
.m-call .ph::after { animation-delay: 1.1s; }
@keyframes tk-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.85); opacity: 0; } }

/* ---- motif: waveform ---- */
.m-wave { gap: 3px; align-items: center; height: 46px; }
.m-wave i { width: 4px; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac, var(--gold)) 72%, white), color-mix(in srgb, var(--ac, var(--gold)) 70%, black)); transform-origin: center; animation: tk-wave 1.1s ease-in-out infinite; }
.m-wave i:nth-child(odd) { animation-delay: .15s; }
.m-wave i:nth-child(3n) { animation-delay: .3s; }
.m-wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes tk-wave { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* ---- motif: chips ---- */
.m-chips { gap: 10px; flex-wrap: wrap; }
.m-chips .ch { padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--stroke); background: var(--surface); color: var(--cream); }
.m-chips .ch .ar { font-family: var(--f-arabic); font-size: 16px; }
.m-chips .ch.on { border-color: rgba(77,191,142,0.5); background: rgba(77,191,142,0.14); }

/* ---- motif: trace ---- */
.m-trace .ar { font-family: var(--f-arabic); font-size: 64px; color: transparent; -webkit-text-stroke: 2px var(--gold); }

/* ---- motif: scenarios (fanned deck of real artwork) ---- */
.m-scenarios { gap: 0; align-items: center; justify-content: center; }
.m-scenarios .sc { width: 74px; aspect-ratio: 74 / 132; border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke-strong); box-shadow: 0 12px 24px -12px rgba(0,0,0,.75); background: var(--surface); margin-left: -16px; transition: transform .35s var(--ease-bounce), margin .35s var(--ease-bounce); }
.m-scenarios .sc:first-child { margin-left: 0; }
.m-scenarios .sc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-scenarios .sc:nth-child(1) { transform: rotate(-8deg) translateY(4px); }
.m-scenarios .sc:nth-child(2) { transform: rotate(-4deg); }
.m-scenarios .sc:nth-child(3) { transform: rotate(0deg) translateY(-3px); z-index: 2; }
.m-scenarios .sc:nth-child(4) { transform: rotate(4deg); }
.m-scenarios .sc:nth-child(5) { transform: rotate(8deg) translateY(4px); }
.tk-card:hover .m-scenarios .sc { transform: rotate(0) translateY(0); margin-left: -6px; }
.tk-card:hover .m-scenarios .sc:first-child { margin-left: 0; }

/* ---- motif: translate (the real Ramsa) ---- */
.m-translate { gap: 9px; align-items: center; justify-content: center; flex-wrap: nowrap; }
.m-translate .tr-en { font-family: var(--f-body); font-size: 12.5px; color: var(--cream-muted); background: var(--surface); border: 1px solid var(--stroke); border-radius: 10px; padding: 7px 11px; white-space: nowrap; }
.m-translate .tr-mid { display: grid; place-items: center; color: var(--ac, var(--gold)); flex-shrink: 0; }
.m-translate .tr-mid svg { width: 16px; height: 16px; }
.m-translate .tr-ar { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; background: color-mix(in srgb, var(--ac, var(--gold)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ac, var(--gold)) 34%, var(--stroke)); border-radius: 10px; padding: 6px 12px; }
.m-translate .tr-ar .ar { font-family: var(--f-arabic); direction: rtl; font-size: 18px; color: var(--cream); line-height: 1.15; }
.m-translate .tr-ar em { font-family: var(--f-mono); font-style: normal; font-size: 9.5px; color: var(--ac, var(--gold)); }

/* ---- motif: library (open shelf + one locked) ---- */
.m-library { gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.m-library .lib-w { display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--stroke); border-radius: 10px; padding: 7px 12px; }
.m-library .lib-w .ar { font-family: var(--f-arabic); direction: rtl; font-size: 17px; color: var(--cream); line-height: 1.1; }
.m-library .lib-w.locked { position: relative; color: var(--muted); border-style: dashed; border-color: var(--stroke-strong); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); padding: 7px 14px; }
.m-library .lib-w.locked .lk { width: 26px; height: 8px; border-radius: 999px; background: var(--chip-bg); }
.m-library .lib-w.locked svg { width: 14px; height: 14px; margin-left: 8px; }

/* ---- toolkit responsive ---- */
@media (max-width: 860px) {
  .tk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tk-feature { grid-template-columns: 1fr; grid-template-areas: "ico" "mid" "viz"; row-gap: 14px; text-align: left; padding: 20px; }
  .tk-feature .tk-viz { justify-content: flex-start; }
  .tk-feature .m-progress { flex-direction: row; gap: 14px; }
  .tk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .toolkit-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   SHOP — per-level identities + Foundation hero + finale ring
   ============================================================ */
.sec-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.sec-head .eyebrow { margin-bottom: 0; }

/* per-level colour identity (kills the monotone wall of green) */
[data-level="foundation"]   { --lac: var(--gold); --lac-2: var(--gold-2); --lac-deep: var(--gold-deep); --lac-soft: rgba(230,184,97,0.16); }
[data-level="beginner"]     { --lac: #4DBF8E; --lac-2: #74D6AC; --lac-deep: #2E7D5C; --lac-soft: rgba(77,191,142,0.16); }
[data-level="intermediate"] { --lac: #E8855A; --lac-2: #F2A77F; --lac-deep: #B85A36; --lac-soft: rgba(232,133,90,0.16); }
[data-level="advanced"]     { --lac: #6BB6DE; --lac-2: #92CDEC; --lac-deep: #3E7E9E; --lac-soft: rgba(107,182,222,0.18); }

.shop-card { position: relative; }
.shop-card[data-level] {
  border-color: var(--stroke-strong);
  border-color: color-mix(in srgb, var(--lac) 30%, var(--stroke));
  background: radial-gradient(135% 140% at 100% 0%, var(--lac-soft), transparent 56%), linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
}
.shop-card[data-level]::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--lac), transparent); opacity: .75; }
.pill.lvl { color: var(--lac, var(--gold)); background: var(--lac-soft, rgba(230,184,97,0.12)); border-color: var(--lac, var(--stroke-strong)); }

/* bundles — one warm gold identity, set apart from the multi-colour levels */
.shop-card.bundle {
  background: radial-gradient(120% 130% at 0% 0%, rgba(230,184,97,0.10), transparent 55%), linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border-color: var(--stroke-strong);
}
.shop-card.bundle .save-tag { font-size: 11px; padding: 4px 10px; }

/* Foundation hero */
.course-feature {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 150% at 100% 100%, rgba(230,184,97,0.18), transparent 55%), linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke-strong); border-radius: 28px; padding: 38px 40px; margin-bottom: 30px;
}
.course-feature::before { content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .75; }
.course-feature h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 5vw, 40px); color: var(--cream); margin: 8px 0 10px; }
.cf-body { position: relative; z-index: 1; max-width: 64%; }
.cf-lead { color: var(--secondary); font-size: 15.5px; max-width: 52ch; margin: 0 0 18px; }
.cf-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; max-width: 92%; }
.cf-tools span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--cream-muted); background: var(--chip-bg); border: 1px solid var(--stroke); border-radius: 999px; padding: 6px 11px; }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.cf-price { display: flex; flex-direction: column; gap: 2px; }
.cf-price .price { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--cream); }
.cf-price .tabby-note { margin: 0; }
.cf-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-saqr { position: absolute; right: 38px; bottom: 0; width: 230px; height: auto; filter: drop-shadow(0 18px 32px rgba(0,0,0,.45)); z-index: 0; }

/* book covers — coloured per level, like a real shelf */
.book-card[data-level] .book-cover { background: linear-gradient(135deg, var(--lac-2), var(--lac-deep)); }

/* finale gradient ring */
.ring-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--gold-2), transparent 42%, transparent 58%, var(--green));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

@media (max-width: 720px) {
  .course-feature { padding: 28px 22px; }
  .cf-body { max-width: 100%; }
  .cf-saqr { display: none; }
}

/* ============================================================
   PREMIUM GAME HUD LANGUAGE
   Vivid per-world colour, glass HUD panels, live-state chrome,
   player avatar with premium two-layer motion. Tokens + --lac/--ac
   only. Every tile reads as a game HUD, not a flat card.
   ============================================================ */
.gameworld { --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-haze: cubic-bezier(.45,0,.55,1); }

/* per-world colour wash sitting behind glass — each section owns its hue */
.world-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(85% 80% at 88% -12%, var(--lac-soft, rgba(230,184,97,0.16)), transparent 60%),
    radial-gradient(70% 75% at -5% 112%, color-mix(in srgb, var(--lac, var(--gold)) 9%, transparent), transparent 60%);
}
html[data-theme="light"] .world-glow { opacity: 0; }

/* ============================================================
   LIGHT THEME polish (course app) — clean white surfaces, neutral
   depth, no gold haze. Dark + brown untouched. (Ali, 2026-06-26)
   ============================================================ */

/* Flatten the gold atmospheric washes — keep just the clean surface */
html[data-theme="light"] .course-hero,
html[data-theme="light"] .done-sentence,
html[data-theme="light"] .speak-card,
html[data-theme="light"] .shop-card.feature,
html[data-theme="light"] .next-level:not(.is-unlocked),
html[data-theme="light"] .today-cta { background: var(--surface); }
html[data-theme="light"] .m-poster,
html[data-theme="light"] .shop-card[data-level],
html[data-theme="light"] .course-feature { background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); }
html[data-theme="light"] .journey-gate,
html[data-theme="light"] .player-saqr-wrap::before { background: none; }
html[data-theme="light"] .trace-cell { background: var(--bg); }
html[data-theme="light"] .tc-grid { background-image: none; }

/* Hero chassis — a plain white card. It used to open on --surface-2 (#F4F4F5),
   which put a band of grey across the top of the first thing on the page and was
   the single greyest object in light mode (Ali, 2026-07-29). White the whole way
   down; the hairline and the shadow are what separate it from the page. */
html[data-theme="light"] .hud-panel {
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .hud-panel::before {
  background: linear-gradient(90deg, transparent, var(--stroke-strong), transparent);
}

/* Resting depth for the flat cards — per-variant depth token */
html[data-theme="light"] .lp-card {
  border-color: var(--card-border);
  box-shadow: var(--shadow-card);
}

/* The loved hovers — keep behavior, deepen the shade via the per-variant lift token */
html[data-theme="light"] .mic-mod:hover,
html[data-theme="light"] .game-mod:hover,
html[data-theme="light"] .trace-mod:hover {
  box-shadow: var(--shadow-hover-lift);
}
html[data-theme="light"] a.lp-step:hover .lp-card {
  box-shadow: var(--shadow-card-hover);
}

/* glass HUD chassis */
.hud-panel {
  position: relative; overflow: hidden; border-radius: var(--r-panel);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-top, var(--surface-2)) 88%, var(--lac, var(--gold)) 5%), color-mix(in srgb, var(--surface) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--lac, var(--gold)) 26%, var(--stroke));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04) inset;
}
.hud-panel::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lac, var(--gold)) 75%, transparent), transparent); }
.hud-panel.hoverable { transition: transform .32s var(--ease-bounce), border-color .25s, box-shadow .25s; }
.hud-panel.hoverable:hover { transform: translateY(-4px) scale(1.012); border-color: color-mix(in srgb, var(--lac, var(--gold)) 46%, var(--stroke)); box-shadow: 0 38px 72px -28px rgba(0,0,0,.72); }
.hud-corner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* HUD chrome atoms — the game-role markers */
.hud-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--stroke); color: var(--muted); background: var(--chip-bg); white-space: nowrap; }
.hud-chip--live { color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.hud-chip--live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: hud-blink 1.6s ease-in-out infinite; }
.hud-chip--new { color: var(--coral-ink); border-color: color-mix(in srgb, var(--coral) 46%, transparent); background: color-mix(in srgb, var(--coral) 14%, transparent); animation: hud-pop 1.9s ease-in-out infinite; }
.hud-chip--rank { color: var(--ac, var(--lac, var(--gold))); border-color: color-mix(in srgb, var(--ac, var(--lac, var(--gold))) 40%, transparent); background: color-mix(in srgb, var(--ac, var(--lac, var(--gold))) 12%, transparent); }
@keyframes hud-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hud-pop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

.hud-stars { position: relative; display: inline-block; font-size: 11px; line-height: 1; letter-spacing: 2px; }
.hud-stars .bg { color: var(--stroke-strong); }
.hud-stars .fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--gold-ink); width: calc(var(--stars,0) / 5 * 100%); }

.hud-flame { display: inline-flex; align-items: center; gap: 5px; }
.hud-flame .fl { font-size: 17px; line-height: 1; animation: flame 1.8s ease-in-out infinite; }
.hud-flame b { font-family: var(--f-display); font-weight: 700; color: var(--coral-ink); font-size: 16px; }

.hud-badge { position: absolute; top: 14px; right: 14px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid; }
.hud-badge svg { width: 15px; height: 15px; }
.hud-badge.lock { color: var(--muted); background: var(--track-bg); border-color: var(--stroke); }
.hud-badge.check { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); border-color: color-mix(in srgb, var(--green) 42%, transparent); }

.hud-ring { position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lac, var(--gold)) calc(var(--p,0) * 1%), var(--track-bg) 0); transition: background .9s var(--ease-smooth); }
.hud-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.hud-ring b { position: relative; z-index: 1; font-family: var(--f-display); font-weight: 700; color: var(--cream); }
.hud-ring b i { font-style: normal; color: var(--muted); }

/* ---- player HUD hero ---- */
/* The right column is a fixed track, not `auto`. It used to hold only the falcon
   video, so `auto` sized it to the artwork and left roughly half the panel empty
   while today's three quests sat below the hero as their own bordered band. The
   quests now live in that column under the falcons, which removes a whole card
   style from the page and fills the space that was already paid for. */
.player-hud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 30px; align-items: center; padding: 34px 38px; margin-bottom: 30px; }
.player-hud__main { position: relative; z-index: 1; min-width: 0; } /* min-width:0 so the nowrap CTA title can ellipsis-truncate instead of blowing the grid track past the card on mobile */
.player-hud__side { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.player-lv { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lac, var(--gold)); background: var(--lac-soft, rgba(230,184,97,0.12)); border: 1px solid color-mix(in srgb, var(--lac, var(--gold)) 42%, var(--stroke)); border-radius: 9px; padding: 6px 12px; }
.player-hud h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 5.2vw, 46px); line-height: 1.0; letter-spacing: -.02em; margin: 15px 0 8px; color: var(--cream); }
.player-hud__blurb { color: var(--secondary); font-size: 15px; max-width: 46ch; margin: 0 0 18px; }
/* the position line under the unit name: landmark, level, and how far in you are.
   Mono, because it is a readout and not a sentence. */
.hero-where { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.hero-where b { color: var(--lac, var(--gold)); font-weight: 700; }
.hero-where i { font-style: normal; color: var(--stroke-strong); }
.player-xpbar { display: flex; align-items: center; gap: 12px; max-width: 460px; margin-bottom: 14px; }
.player-xpbar .hud-bar { flex: 1; height: 10px; }
.player-xpbar .hud-bar-fill { transition: width .9s var(--ease-smooth); }
.player-xpbar .pct { font-family: var(--f-mono); font-size: 12px; color: var(--lac, var(--gold)); white-space: nowrap; }

/* Today CTA — the one-tap "start today" in the hero */
.today-cta { display: flex; align-items: center; gap: 14px; max-width: 460px; margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; text-decoration: none;
  background: radial-gradient(130% 150% at 0% 50%, color-mix(in srgb, var(--lac, var(--gold)) 18%, transparent), transparent 60%), linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke-strong); box-shadow: 0 18px 40px -28px rgba(0,0,0,.7);
  transition: transform .16s var(--ease-bounce), border-color .16s, box-shadow .16s; }
.today-cta:hover { transform: translateY(-2px); border-color: var(--lac, var(--gold-deep)); box-shadow: 0 24px 50px -26px rgba(0,0,0,.78); }
.today-cta:active { transform: translateY(0); }
.today-cta .tc-text { flex: 1; min-width: 0; }
/* --lac-2, not --lac. The card behind this label is a radial wash of the same
   accent, so the label is the one thing on the page competing with its own
   background: pixel-sampled on the dashboard 2026-08-02, the gold sits between
   4.83 and 6.15 across the card but drops to 4.37 at the hot spot of the wash,
   under the 4.5 a 10px label needs. The -2 stop is the lighter one on every
   accent and every theme, which lifts the worst pixel to 5.48 on dark and 4.77
   on desert without touching the card. Light overrides this to --secondary
   further down, so it is unaffected either way. */
.today-cta .tc-eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--lac-2, var(--gold-ink-2)); display: block; margin-bottom: 3px; }
.today-cta .tc-title { font-family: var(--f-body); font-weight: 700; font-size: 16px; color: var(--cream); display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-cta .tc-arrow { flex: none; width: 22px; height: 22px; color: var(--lac, var(--gold)); transition: transform .16s var(--ease-bounce); }
.today-cta:hover .tc-arrow { transform: translateX(3px); }
/* jump-back-in: thin resume-progress fill along the CTA's bottom edge (resume state only, added by dashboard.js) */
.today-cta { position: relative; overflow: hidden; }
.today-cta.has-prog { padding-bottom: 15px; }
.tc-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--stroke); }
.tc-prog-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: 0 3px 3px 0; transition: width .9s var(--ease-smooth); }
/* streak KPI: when the streak is alive, the flame count glows gold so it reads as the hero habit metric */
.hud-stat.is-streak .hud-stat-num { color: var(--gold-ink); text-shadow: 0 0 16px color-mix(in srgb, var(--gold) 32%, transparent); }
/* streak-at-risk nudge: a slim, savable "keep it alive today" line above the stats */
.dash-streak-flag { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 0 0 14px; padding: 9px 13px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 11%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--stroke)); font-family: var(--f-body); font-size: 13px; color: var(--secondary); line-height: 1.35; }
.dash-streak-flag[hidden] { display: none; }
.dash-streak-flag b { color: var(--gold-ink); font-weight: 700; }
.dash-streak-flag .dsf-flame { flex: none; font-size: 15px; line-height: 1; }
/* wider box + left-aligned mascots so the bottom-right progress ring lands to the RIGHT of the falcons, not on top of them */
/* --saqr-w is the clip's own width, declared once here and overridden by the
   two breakpoints below. The shadow pseudo reads the same variable, so the
   ellipse can never drift out of step with the falcons the way it would if the
   number were written out in three places. */
.player-saqr-wrap { position: relative; display: grid; place-items: center; width: 100%; --saqr-w: 170px; }
.player-saqr-wrap::before { content: ""; position: absolute; left: -30px; top: 50%; margin-top: -115px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, var(--lac-soft, rgba(230,184,97,0.2)) 0%, transparent 68%); animation: saqr-halo 6.2s var(--ease-haze) infinite; z-index: 0; }
.player-saqr { position: relative; z-index: 1; width: var(--saqr-w, 170px); height: auto; filter: drop-shadow(0 22px 34px rgba(0,0,0,.45)); animation: saqr-bob 5s var(--ease-haze) infinite; }
/* the bird-conversation video stays put — no bob float */
/* ...and it drops the drop-shadow. This selector also matches the <video> in
   .player-saqr-wrap, which is the same alpha-channel clip as the homepage hero.
   drop-shadow on a playing alpha video re-derives the silhouette, blurs it and
   recomposites on every frame; on a still <img> mascot it is painted once, so
   the rule above stays for those. Same cause and same fix as
   .hero-conversation in home-course.css (Ali, 2026-07-29). The background
   gradient paints once and shows through the clip's transparent areas. */
/* ...and the shadow moved off the video too, on to the pseudo below. Same
   second round as the homepage hero: a background on the video ELEMENT is the
   case Safari composites wrong, filling the clip's transparent pixels with
   black instead of showing the box behind, which is the black rectangle Ali
   reported on 2026-08-02. It was reported on the hero, but this is the same
   clip drawn the same way, so it is the same defect whether or not anyone has
   looked at this dashboard in Safari lately. */
video.player-saqr {
  animation: none;
  filter: none;
  background: none;
}
/* Scoped with :has() so it only fires for the video. When .player-saqr is the
   still <img> mascot the rule above does not apply and its own drop-shadow is
   still the right tool: an image is painted once. Sized and centred to match
   the video's own box exactly (same width, same 4:3), so the ellipse lands
   where it always did rather than spreading across the full column the wrapper
   occupies. z-index 0 puts it with the halo, under the video's z-index 1. */
.player-saqr-wrap:has(video.player-saqr)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--saqr-w, 170px);
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse 40% 8% at 50% 94%, rgba(0,0,0,.45), rgba(0,0,0,0) 72%);
}
/* Polish (desktop >=1000px): the two falcons scale up and centre in the hero's
   right column. They used to run to 248px when the column held nothing else;
   now the quest list shares it, so they hold at a size that leaves the list
   above the fold instead of pushing the panel past 500px tall. */
@media (min-width: 1000px) {
  .player-saqr-wrap { width: 100%; place-items: center; --saqr-w: 196px; }
  .player-saqr-wrap::before {
    width: 260px; height: 260px; left: 50%; right: auto;
    top: 50%; bottom: auto; margin-top: -130px; margin-left: -130px;
  }
}
.player-ring { position: absolute; right: -2px; bottom: -2px; z-index: 2; width: 86px; height: 86px; border: 1px solid color-mix(in srgb, var(--lac, var(--gold)) 32%, var(--stroke)); box-shadow: 0 14px 28px -12px rgba(0,0,0,.6); }
.player-ring::before { background: var(--bg-2); }
.player-ring b { font-size: 20px; }
.player-ring b i { font-size: 11px; }
@keyframes saqr-bob { 0% { transform: translate(0,0) rotate(0); } 30% { transform: translate(2px,-9px) rotate(-1.4deg); } 62% { transform: translate(-2px,-4px) rotate(1deg); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes saqr-halo { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.13); opacity: .9; } }

/* halo ring pulsed by the current path node */
@keyframes hud-halo-ring { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }

/* ============================================================
   JOURNEY GATEWAY — a cinematic threshold into the path
   ============================================================ */
.journey-gate {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 80px 0 22px; padding: 48px 20px 8px;
  /* no card, no box: a cinematic threshold — the title on the page background,
     bracketed by a short gold hairline above (::before) and an ornamental gold
     divider below (.jg-rule), over a soft ambient glow that fades to nothing.
     The ambient stage (glow + hairline) is always present; the title, sub and
     divider ARRIVE in sequence when the section scrolls in (.journey-gate.in). */
  background: radial-gradient(74% 124% at 50% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 64%);
}
/* opt out of the generic block reveal — the children arrive individually instead */
.journey-gate.reveal { opacity: 1; transform: none; }
.journey-gate::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 72px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.jg-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 8vw, 64px); line-height: 1.0; letter-spacing: -1px; color: var(--cream); margin: 20px 0 16px; max-width: 16ch; text-wrap: balance; }
.jg-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin: 0; }

/* ornamental divider: two tapering gold hairlines flanking a small diamond
   (echoes the chapter markers below) — seals the heading, no card, no beam */
.jg-rule { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 28px 0 0; }
.jg-rule::before, .jg-rule::after { content: ""; width: 56px; height: 1px; border-radius: 1px; }
.jg-rule::before { background: linear-gradient(90deg, transparent, var(--gold-2)); }
.jg-rule::after { background: linear-gradient(90deg, var(--gold-2), transparent); }
.jg-rule i { flex: none; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 0 10px var(--gold-glow); }

/* ---- one-shot arrival choreography (fires once via the global .reveal observer) ---- */
.journey-gate .jg-title,
.journey-gate .jg-sub {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth);
}
.journey-gate .jg-sub { transform: translateY(16px); }
.journey-gate.in .jg-title { opacity: 1; transform: none; transition-delay: .04s; }
.journey-gate.in .jg-sub { opacity: 1; transform: none; transition-delay: .20s; }
/* divider opens: the diamond settles in, then the two hairlines draw outward from center */
.jg-rule i { opacity: 0; transform: rotate(45deg) scale(.4);
  transition: opacity .5s var(--ease-smooth) .28s, transform .5s var(--ease-bounce) .28s; }
.jg-rule::before, .jg-rule::after { width: 0; transition: width .7s var(--ease-smooth) .34s; }
.journey-gate.in .jg-rule i { opacity: 1; transform: rotate(45deg) scale(1); }
.journey-gate.in .jg-rule::before,
.journey-gate.in .jg-rule::after { width: 56px; }

@media (max-width: 600px) {
  .journey-gate { margin: 56px 0 14px; padding: 36px 18px 6px; }
  .journey-gate.in .jg-rule::before,
  .journey-gate.in .jg-rule::after { width: 40px; }
}

/* reduced motion: no arrival, render the full threshold immediately */
@media (prefers-reduced-motion: reduce) {
  .journey-gate .jg-title,
  .journey-gate .jg-sub { opacity: 1; transform: none; transition: none; }
  .jg-rule i { opacity: 1; transform: rotate(45deg) scale(1); transition: none; }
  .jg-rule::before, .jg-rule::after { width: 56px; transition: none; }
}

/* ============================================================
   LEARNING PATH — a clean left-rail timeline
   ============================================================ */
/* the rail rides the landmark heroes' centerline (half the hero width), so the
   big unit renders sit ON the journey line; smaller nodes shift right to match */
.lp-track { position: relative; margin: 4px 0 2px; --lp-node: 50px; --lp-hero: 92px; --lp-rail: calc(var(--lp-hero) / 2); --lp-gap: 16px; }
.lp-node, .lp-unit-mark { margin-left: calc(var(--lp-rail) - var(--lp-node) / 2); }
.lp-step--finale .lp-node { margin-left: calc(var(--lp-rail) - 29px); } /* 58px finale node */

/* the spine: a dim base line + a bright gold fill rising to the current node.
   both ride the node centerline (--lp-rail); top/height measured in dashboard.js */
.lp-track::before { content: ""; position: absolute; left: var(--lp-rail); transform: translateX(-50%);
  top: var(--lp-spine-top, 0); height: var(--lp-spine-h, 100%); width: 2px; border-radius: 2px; z-index: 0;
  background: color-mix(in srgb, var(--gold) 20%, transparent); }
.lp-fill { position: absolute; left: var(--lp-rail); transform: translateX(-50%);
  top: var(--lp-spine-top, 0); width: 3px; height: 0; border-radius: 3px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 8px var(--gold-glow); }

/* a lesson step: node on the rail, card filling the rest of the row */
.lp-step { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--lp-gap);
  padding: 7px 0; text-decoration: none; }

/* node medallion straddling the spine (opaque, so it masks the line behind it) */
.lp-node { position: relative; z-index: 1; flex: none; width: var(--lp-node); height: var(--lp-node); border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--stroke); color: var(--secondary);
  transition: border-color .18s, background .18s, color .18s, box-shadow .2s; }
.lp-node svg { width: 44%; height: 44%; }
.lp-badge { position: absolute; bottom: -3px; right: -3px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--secondary); }
.lp-badge svg { width: 11px; height: 11px; }

/* the card */
.lp-card { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke); border-radius: var(--r-card, 16px); color: var(--cream);
  transition: transform .18s var(--ease-smooth), border-color .18s, box-shadow .2s; }
.lp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cream) 12%, transparent), transparent); }
.lp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lp-status { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lp-title { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); line-height: 1.25; }
.lp-go { flex: none; color: var(--muted); display: grid; place-items: center; transition: transform .18s var(--ease-smooth), color .18s; }
.lp-go svg { width: 18px; height: 18px; }
a.lp-step:hover .lp-card { transform: translateX(2px); border-color: color-mix(in srgb, var(--gold) 30%, var(--stroke-strong));
  box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--gold) 14%, rgba(0,0,0,0.62)); }
a.lp-step:hover .lp-go { color: var(--gold-ink); transform: translateX(2px); }
/* press: the card takes a firm little seat when tapped (the dense-row dose of the arcade press) */
a.lp-step:active .lp-card { transform: translateX(2px) translateY(1px) scale(.992);
  box-shadow: 0 5px 12px -10px rgba(0,0,0,.55); transition-duration: .1s; }

/* states */
/* DONE — a settled, earned gold: a soft minted-coin node, a stamped gold check-seal,
   and a warm gold-washed card. Mirrors the Daily Quests completed language on this
   same dashboard; stays calm so it never competes with the live 'current' glow. */
.lp-step.is-done .lp-node { border-color: color-mix(in srgb, var(--gold) 52%, var(--stroke));
  background: radial-gradient(120% 120% at 50% 30%, color-mix(in srgb, var(--gold) 26%, var(--surface)), color-mix(in srgb, var(--gold) 11%, var(--surface))); color: var(--gold-ink-2); }
.lp-step.is-done .lp-badge { background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; color: var(--on-gold); }
/* --gold-ink inside the mix, not --gold. This rule is three classes deep and
   beats the html[data-theme="light"] .lp-status override further down, so on
   light the done-step label was mixing the gold FILL with near-black ink and
   landing on #BD9853: 2.56 on the card, against the 4.5 a 9.5px label needs.
   With the ink token the same mix is #7D560D, 6.23 on the same card. Both dark
   themes are unmoved, because ink and fill are one value there. */
.lp-step.is-done .lp-status { color: color-mix(in srgb, var(--gold-ink) 80%, var(--cream)); }
.lp-step.is-done .lp-card { border-color: color-mix(in srgb, var(--gold) 26%, var(--stroke));
  background: radial-gradient(135% 105% at 50% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%), linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); }
.lp-step.is-done .lp-card::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 28%, transparent), transparent); }
.lp-step.is-current .lp-card { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 18px 40px -26px var(--gold-glow); }
.lp-step.is-current .lp-node { border-color: var(--gold); color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); animation: tk-pulse 2.6s ease-in-out infinite; }
.lp-step.is-current .lp-node::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: hud-halo-ring 2.6s var(--ease-haze) infinite; }
.lp-step.is-current .lp-status { color: var(--gold-ink); }
.lp-step.is-current .lp-go { color: var(--gold-ink); }
.lp-step.is-upcoming .lp-node { color: var(--secondary); }
.lp-step.is-upcoming .lp-card { opacity: .92; }
.lp-step.is-soon { opacity: .5; }
.lp-step.is-soon .lp-node { filter: grayscale(.35); }
.lp-step.is-soon .lp-badge { color: var(--muted); }

/* finale: a bigger gold star node that reads as the goal */
.lp-step--finale .lp-node { width: 58px; height: 58px; }
.lp-step.is-finale-lit .lp-card { border-color: var(--gold); }
.lp-step.is-finale-lit .lp-node { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 16px 40px -22px var(--gold-glow); animation: none; }
.lp-step.is-finale-lit .lp-node::after { animation: none; }
.lp-step.is-finale-lit .lp-status { color: var(--gold-ink); }

/* ---- the journey is thirteen landmark STOPS, not a hundred lesson rows ----
   Each stop is one group: the landmark header (a real <button>, reset flat) and
   the unit's lessons, which are only in the document when that stop is open. The
   spine is still absolute inside .lp-track, so nesting rows one level deeper
   changes no geometry; dashboard.js re-measures on every open and close. */
.lp-unit-group { position: relative; z-index: 1; }
.lp-rows { display: block; }
.lp-rows[hidden] { display: none; }

/* unit chapter header: a diamond marker on the spine + the title */
.lp-unit { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--lp-gap); margin: 14px 0 6px;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0;
  transition: opacity .18s var(--ease-smooth); }
.lp-unit:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; border-radius: 12px; }
.lp-unit-body { flex: 1 1 auto; }
/* the chevron is the only thing that says "this opens" — it turns, never bounces */
.lp-unit-toggle { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted);
  transition: transform .22s var(--ease-smooth), color .18s; }
.lp-unit-toggle svg { width: 17px; height: 17px; }
.lp-unit-group.is-open > .lp-unit .lp-unit-toggle { transform: rotate(90deg); color: var(--gold-ink); }
@media (hover: hover) {
  .lp-unit:hover .lp-unit-toggle { color: var(--gold-ink); }
  .lp-unit:hover .lp-unit-title { color: var(--gold-ink-2); }
}
/* a finished stop takes less room: the landmark shrinks and the blurb steps back,
   so thirteen units behind you never cost thirteen full-height rows */
.lp-unit-group:not(.is-open) > .lp-unit.is-complete .lp-unit-sub { display: none; }
.lp-unit-group:not(.is-open) > .lp-unit.is-complete.has-landmark { margin-top: 8px; }
/* the shrunk landmark has to stay centred on the rail, so its pull-left is derived
   from the size difference rather than typed */
.lp-unit-group:not(.is-open) > .lp-unit.is-complete .lp-lm-hero {
  --lp-hero-done: 64px;
  width: var(--lp-hero-done); height: var(--lp-hero-done); padding: 4px; border-width: 2px;
  margin-left: calc(-1 * (var(--lp-gap) + 4px) + (var(--lp-hero) - var(--lp-hero-done)) / 2);
}
.lp-unit-mark { position: relative; z-index: 1; flex: none; width: var(--lp-node); height: 20px; display: grid; place-items: center; }
.lp-unit-mark::before { content: ""; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px;
  background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--gold) 40%, var(--stroke)); }
.lp-unit-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-unit-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-unit-no { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--gold-ink); }
.lp-unit-level { font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  color: var(--gold-ink); padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--stroke)); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.lp-unit.is-complete .lp-unit-level { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 44%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lp-unit-prog { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--stroke); }
.lp-unit-prog svg { width: 11px; height: 11px; }
.lp-unit-title { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--cream); line-height: 1.2; }

/* A LIST OF YOUR TRACKS, NOT ELEVEN MORE STOPS.

   A Local buyer owns all eleven Emirati at Work packs, and each one joined the
   journey as a full unit row: the same mono "Emirati at Work" eyebrow, the same
   "8 LESSONS" pill, the same briefcase on the spine, the same two-line role
   description, eleven times, directly under a band that had already named the
   group. Nothing was wrong with any one row and the bottom of the journey was
   a wall.

   dashboard.js drops the repeated eyebrow and the role line when there is more
   than one (`.is-many`); this closes the gaps to match. One track still gets
   the full treatment, because a single stop on a path should look like one. */
.lp-unit.is-pack.is-many { margin: 4px 0; }
.lp-unit.is-pack.is-many .lp-unit-body { gap: 0; }
/* The count moves onto the title's line instead of sitting on a line of its
   own above it, so a track is one row rather than two. */
.lp-unit.is-pack.is-many .lp-unit-top { order: 2; margin-top: 2px; }
.lp-unit.is-pack.is-many .lp-unit-title { order: 1; font-size: 14.5px; }
.lp-unit.is-pack.is-many .lp-unit-prog { font-size: 8.5px; }
/* Eleven identical briefcases read as noise on the spine. The group has one on
   its band; the rows keep the plain diamond every other stop uses. */
.lp-unit.is-pack.is-many .lp-unit-mark--pack svg { display: none; }
.lp-unit.is-pack.is-many .lp-unit-mark--pack::before {
  /* line 1609 hides this so the briefcase can stand alone; put it back. */
  content: ""; display: block; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: var(--surface);
}
.lp-unit.is-pack.is-many.is-complete .lp-unit-mark--pack::before {
  border-color: color-mix(in srgb, var(--gold) 58%, transparent);
  background: color-mix(in srgb, var(--gold) 22%, var(--surface));
}
.lp-unit.is-pack.is-many.is-active .lp-unit-mark--pack::before {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 22%, var(--surface));
  box-shadow: 0 0 10px -1px var(--gold-glow);
}

/* chapter states — done chapters earn green, the one you're in glows gold */
.lp-unit.is-complete .lp-unit-mark::before { border-color: color-mix(in srgb, var(--gold) 58%, transparent); background: color-mix(in srgb, var(--gold) 22%, var(--surface)); }
.lp-unit.is-complete .lp-unit-no { color: var(--gold-ink); }
.lp-unit.is-complete .lp-unit-prog { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 44%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.lp-unit.is-active .lp-unit-mark::before { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, var(--surface)); box-shadow: 0 0 10px -1px var(--gold-glow); }
.lp-unit.is-active .lp-unit-prog { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 42%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.lp-unit.is-upcoming { opacity: .82; }

/* each unit is a landmark stop — a big 3D render of the real UAE place, sitting on the spine */
.lp-unit.has-landmark { gap: calc(var(--lp-gap) + 4px); align-items: center; margin-top: 18px; }
/* the landmark render replaces the small diamond as this unit's marker on the path.
   the mark keeps zero width (not display:none) so the spine measurement in
   dashboard.js still gets a valid anchor; the hero pulls left over the rail. */
.lp-unit.has-landmark .lp-unit-mark::before { display: none; }
.lp-unit.has-landmark .lp-unit-mark { width: 0; margin-left: 0; }
.lp-unit.has-landmark .lp-lm-hero { margin-left: calc(-1 * (var(--lp-gap) + 4px)); }
/* glowing circular landmark — ported from the app's LandmarkPin: circle, gold border, gold glow halo, cover-fill image inset by a ring */
.lp-lm-hero {
  flex: none; width: 92px; height: 92px; box-sizing: border-box;
  border-radius: 50%; padding: 6px;
  background: radial-gradient(120% 120% at 50% 12%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%), var(--surface);
  border: 3px solid color-mix(in srgb, var(--gold) 50%, var(--stroke));
  box-shadow: 0 0 16px -3px var(--gold-glow), inset 0 1px 0 color-mix(in srgb, var(--gold) 14%, transparent);
}
/* contain so the whole landmark shows in the circle — never cropped */
.lp-lm-hero img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
/* per-landmark framing nudges (app-style tuning) — keep everything inside the circle, no cropping */
.lp-lm-hero img[src*="burj"]     { transform: translateX(3px) scale(.95); }
.lp-lm-hero img[src*="museum"]   { transform: scale(.98); }
.lp-lm-hero img[src*="jumeirah"] { transform: scale(.98); }
/* glow states: current burns brightest, complete settles green, upcoming dims (app halo logic) */
.lp-unit.is-active .lp-lm-hero  { border-color: var(--gold); box-shadow: 0 0 28px -2px var(--gold-glow), 0 0 12px -2px var(--gold-glow), inset 0 1px 0 color-mix(in srgb, var(--gold) 18%, transparent); }
.lp-unit.is-complete .lp-lm-hero { border-color: color-mix(in srgb, var(--gold) 62%, var(--stroke)); box-shadow: 0 0 16px -3px var(--gold-glow); }
.lp-unit.is-upcoming .lp-lm-hero { opacity: .9; box-shadow: 0 0 10px -4px var(--gold-glow); }

.lp-unit-landmark { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; }
.lp-pin { width: 14px; height: 14px; flex: none; color: var(--gold-ink); }
.lp-unit-lm-name { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; color: var(--gold-ink); line-height: 1.1; }
.lp-unit-lm-emirate { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-left: 9px; margin-left: 3px; border-left: 1px solid var(--stroke-strong); }
.lp-unit.is-complete .lp-pin, .lp-unit.is-complete .lp-unit-lm-name { color: var(--gold-ink); }
.lp-unit.is-upcoming .lp-pin { opacity: .7; }

/* ---- the last stop: the certificate at the end of the spine ----
   Not a band, not a promise. The same row language as every other stop, holding
   the one number the old finish-line section actually knew: days left. */
.lp-finish { margin-top: 10px; }
.lp-node--finish { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 40%, var(--stroke)); color: var(--gold-ink); }
.lp-finish .lp-card { background: none; border-style: dashed; }
.lp-finish-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted); margin-top: 3px; }
.lp-finish.is-earned .lp-node--finish { border-style: solid; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 16px 40px -22px var(--gold-glow); }
.lp-finish.is-earned .lp-card { border-style: solid; border-color: var(--gold); background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); }
.lp-finish.is-earned .lp-status, .lp-finish.is-earned .lp-finish-sub { color: var(--gold-ink); }

/* business industry packs on the path — a workplace band + briefcase-marked headers */
.lp-biz-band { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin: 32px 0 12px; padding: 14px 16px 14px 20px;
  border: 1px solid var(--stroke-strong); border-radius: 16px; background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); box-shadow: 0 16px 34px -28px rgba(0,0,0,.7); }
.lp-biz-band::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); }
.lp-biz-band-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--gold-ink); background: rgba(230,184,97,0.12); border: 1px solid var(--stroke-strong); box-shadow: inset 0 0 0 3px rgba(0,0,0,.14); }
.lp-biz-band-ic svg { width: 21px; height: 21px; }
.lp-biz-band-eyebrow { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink-2); }
.lp-biz-band-title { display: block; font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--cream); margin-top: 2px; }
.lp-biz-band-sub { display: block; font-family: var(--f-body); font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.lp-unit.is-pack { margin-top: 16px; }
.lp-unit-mark--pack { color: var(--gold-ink); }
.lp-unit-mark--pack::before { display: none; }
.lp-unit-mark--pack .lp-biz-svg { width: 18px; height: 18px; }
.lp-unit.is-pack.is-complete .lp-unit-mark--pack, .lp-unit.is-pack.is-active .lp-unit-mark--pack { color: var(--gold-ink); }
.lp-unit-no--pack { color: var(--gold-ink-2); }
.lp-unit-sub { font-family: var(--f-body); font-size: 12px; color: var(--muted); line-height: 1.4; }

/* mobile: tighter rail + type */
@media (max-width: 600px) {
  .lp-track { --lp-node: 44px; --lp-hero: 74px; --lp-gap: 13px; } /* rail derives from --lp-hero */
  .lp-title { font-size: 14.5px; }
  .lp-card { padding: 12px 14px; }
  .lp-lm-hero { width: 74px; height: 74px; border-radius: 50%; padding: 5px; }
  .lp-unit-lm-name { font-size: 14px; }
}

/* ---- shop world cards ---- */
.world-card > *:not(.world-glow):not(.hud-badge) { position: relative; z-index: 1; }
.world-card.is-locked::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--bg) 34%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.world-card.is-locked .hud-badge { z-index: 4; }
.next-level .next-body, .next-level picture { position: relative; z-index: 1; }

/* ---- bundles as a season pass ---- */
.season-pass { position: relative; }
.season-pass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-2), transparent 38%, transparent 62%, var(--green));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.season-pass > * { position: relative; z-index: 1; }

/* ---- finale glow (moved off inline style; .shop-card.feature is 2 classes so match it) ---- */
.shop-card.finale-glow { background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--green) 16%, transparent), transparent 55%), linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); }

/* foundation-hero badge row */
.cf-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* ---- divider rhythm helper ---- */
.course-divider { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 30px 0; color: var(--gold-ink); opacity: .5; }
.course-divider .ln { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.course-divider .dm { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--gold-glow); }

@media (max-width: 720px) {
  /* Stacked: the quests fall below the falcons, which is where they already sat
     before they moved into the panel, so the phone reading order is unchanged. */
  .player-hud { grid-template-columns: 1fr; }
  .player-hud__side { justify-self: stretch; }
  .player-saqr-wrap { width: 224px; justify-self: start; place-items: center start; --saqr-w: 132px; }
  .player-saqr-wrap::before { width: 180px; height: 180px; left: -24px; margin-top: -90px; }
}

/* ============================================================
   LSANY AI — the practice "world" (app-grade modules).
   Replaces the flat tile grid. Each module mirrors a real app
   component: Originals marquee, Library book card, mic, trace
   cards, scenario covers, game timer.
   ============================================================ */
.ai-world { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }

/* shared module chrome */
.ai-world .mod-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ai-world .mod-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--cream); margin: 2px 0 0; }
.ai-world .mod-link { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--gold-ink); white-space: nowrap; }
.ai-world .chev { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .16s var(--ease-smooth); }
.ai-world a:hover .tk-cta .chev, .ai-world a:hover .mod-link .chev, .ai-world .lo-open:hover .chev, .ai-world .lo-stories:hover .chev { transform: translateX(3px); }
.mod-foot { display: block; }
.mod-foot h3 { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--cream); margin: 7px 0 0; }
.mod-foot p { font-family: var(--f-body); font-size: 13px; color: var(--secondary); margin: 4px 0 11px; line-height: 1.5; }
.mod-foot .eyebrow { color: var(--gold-ink); }

/* a clickable module card shell */
.mic-mod, .game-mod, .trace-mod {
  display: block; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 16px;
  transition: transform .18s var(--ease-smooth), border-color .18s, box-shadow .2s;
}
.mic-mod:hover, .game-mod:hover, .trace-mod:hover {
  transform: translateY(-4px); border-color: var(--stroke-strong);
  box-shadow: 0 22px 44px -24px rgba(0,0,0,.75);
}

/* ---------- A. Lsany Originals (marquee) ---------- */
.lo {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 16px 0 14px;
}
.lo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; margin-bottom: 14px; }
.lo-title { display: inline-flex; align-items: center; gap: 9px; }
.lo-title h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 4.4vw, 22px); letter-spacing: -.4px; color: var(--cream); margin: 0; }
.lo-dots { display: inline-flex; gap: 3px; }
.lo-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: lo-dot 900ms ease-in-out infinite; }
.lo-dots i:nth-child(2) { animation-delay: 200ms; }
.lo-dots i:nth-child(3) { animation-delay: 400ms; }
@keyframes lo-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.lo-open { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--gold-ink); }
.lo-belts { display: flex; flex-direction: column; gap: 10px; }
.lo-viewport { overflow: hidden; }
.lo-belt { display: flex; gap: 12px; width: max-content; will-change: transform; }
.lo-belt-a { animation: lo-drift-a 55s linear infinite; }
.lo-belt-b { animation: lo-drift-b 64s linear infinite; }
@keyframes lo-drift-a { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes lo-drift-b { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
.lo-tile {
  flex: 0 0 auto; width: 92px; height: 163px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(230,184,97,0.35); background: #000; display: block;
}
.lo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-stories {
  display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 12px 14px;
  background: rgba(230,184,97,0.05); border: 1px solid var(--stroke); border-radius: 14px;
  transition: border-color .16s, background .16s, transform .14s var(--ease-smooth);
}
.lo-stories:hover { border-color: var(--stroke-strong); background: rgba(230,184,97,0.09); transform: translateY(-2px); }
.lo-st-play { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--on-gold); background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 14px -6px rgba(230,184,97,0.7); }
.lo-st-play svg { width: 16px; height: 16px; margin-left: 2px; }
.lo-st-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lo-st-text b { font-family: var(--f-body); font-weight: 700; font-size: 14.5px; color: var(--cream); }
.lo-st-text em { font-style: normal; font-size: 12px; color: var(--secondary); }
.lo-stories .chev { color: var(--gold-ink); }

/* ---------- B. Library book — the book alone, no card frame (just a hairline) ---------- */
.lib-book { display: block; position: relative; padding: 0; background: none; border: 0; border-radius: 0; }
.lib-stage { position: relative; display: block; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1448 / 1086; }
.lib-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.32)); transition: transform .2s var(--ease-smooth); }
.lib-book:hover .lib-img { transform: translateY(-3px); }
/* Painted-book ink palette below is FIXED (theme-independent), mirroring the
   app LibraryCard: it sits on the cream book page and must stay dark in every
   theme, so these are intentional literals (like --gold-ink var(--on-gold)), not tokens. */
.lib-leaf { position: absolute; top: 17%; bottom: 18%; left: 14%; right: 53%; display: flex; flex-direction: column; justify-content: space-between; }
.lib-wordmark { display: flex; align-items: baseline; gap: 5px; font-family: var(--f-display); font-weight: 700; font-size: clamp(13px, 3.4vw, 19px); letter-spacing: -.3px; color: #1B3831; }
.lib-wordmark .ar { font-family: var(--f-arabic); font-size: clamp(15px, 4vw, 22px); color: #1B3831; }
.lib-count b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 6vw, 30px); letter-spacing: -.8px; color: #1B3831; line-height: 1; }
.lib-count em { font-style: normal; font-family: var(--f-body); font-size: clamp(9px, 2.2vw, 11px); color: #5B6963; }
.lib-prog { display: flex; align-items: center; gap: 8px; }
.lib-ring { width: clamp(28px, 7vw, 36px); height: clamp(28px, 7vw, 36px); transform: rotate(-90deg); flex: 0 0 auto; }
.lib-ring-bg { fill: none; stroke: rgba(181,138,54,0.22); stroke-width: 4; }
.lib-ring-fg { fill: none; stroke: #B58A36; stroke-width: 4; stroke-linecap: round; }
.lib-prog-t { font-family: var(--f-body); font-size: clamp(9px, 2.4vw, 12px); color: #5B6963; line-height: 1.2; }
.lib-prog-t b { font-family: var(--f-display); font-weight: 700; color: #1B3831; }
.lib-shelf { display: block; height: 1px; max-width: 560px; margin: 10px auto 0; background: linear-gradient(90deg, transparent, rgba(230,184,97,0.55) 20%, rgba(230,184,97,0.55) 80%, transparent); }

/* ---------- C. Scenarios rail ---------- */
.scn-mod { position: relative; }
.scn-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.scn-rail::-webkit-scrollbar { height: 0; }
.scn-mini {
  flex: 0 0 auto; width: 168px; scroll-snap-align: start; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid rgba(230,184,97,0.18); border-radius: 18px;
  box-shadow: 0 12px 18px -12px rgba(0,0,0,0.55);
  transition: transform .16s var(--ease-smooth), border-color .16s, box-shadow .2s;
}
.scn-mini:hover { transform: translateY(-4px); border-color: var(--stroke-strong); box-shadow: 0 20px 30px -16px rgba(0,0,0,0.6); }
.scn-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 18px 0 0 18px; z-index: 2; background: var(--gold); }
/* Fixed scenario-category accents (terracotta / sage), mirroring the app's
   per-category bar palette in scenarios.tsx — intentional literals, not theme tokens. */
.scn-mini.cat-social .scn-bar { background: #C17767; }
.scn-mini.cat-food .scn-bar { background: #8B9E6B; }
.scn-mini.cat-daily .scn-bar { background: var(--gold); }
.scn-mini.cat-around .scn-bar { background: var(--coral); }
.scn-mini.cat-culture .scn-bar { background: var(--cream-muted); }
.scn-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.scn-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scn-meta { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 2px; }
.scn-meta b { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--cream); }
.scn-meta em { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- D + E. Pronunciation + Showdown duo ---------- */
.ai-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.mic-mod { text-align: center; }
.mic-stage { display: flex; justify-content: center; padding: 8px 0 2px; }
.mic-orb { position: relative; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; color: var(--on-gold); background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); box-shadow: 0 8px 18px -4px rgba(230,184,97,0.55); }
.mic-orb svg { width: 31px; height: 31px; position: relative; z-index: 1; }
.mic-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: mic-pulse 1.6s var(--ease-smooth) infinite; }
@keyframes mic-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.42); opacity: 0; } }
.mic-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; margin: 14px 0 2px; }
.mic-wave i { width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--green)); transform-origin: center; animation: mic-bar 1.2s var(--ease-smooth) infinite; }
.mic-wave i:nth-child(odd) { animation-delay: .15s; }
.mic-wave i:nth-child(3n) { animation-delay: .3s; }
.mic-wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes mic-bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.mic-mod .mod-foot { text-align: left; }

.game-mod { display: flex; flex-direction: column; }
.game-top { display: flex; align-items: center; justify-content: space-between; }
.game-top .eyebrow { color: var(--coral-ink); margin: 0; }
.game-top em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.game-clock { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; }
.game-clock b { font-family: var(--f-mono); font-weight: 700; font-size: 22px; color: var(--coral); }
.game-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(230,184,97,0.18); overflow: hidden; }
.game-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); animation: game-drain 6s var(--ease-smooth) infinite; }
@keyframes game-drain { 0% { width: 96%; } 85% { width: 20%; background: var(--coral); } 100% { width: 14%; background: var(--coral); } }
.game-start { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: auto; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--on-gold); background: linear-gradient(135deg, var(--gold), var(--gold-2)); border-radius: 12px; padding: 9px 16px; box-shadow: 0 8px 18px -8px rgba(230,184,97,0.7); }
.game-start .chev { width: 14px; height: 14px; }

/* ---------- F. Letters & numbers trace strip ---------- */
.trace-strip { display: flex; gap: 10px; margin-bottom: 2px; }
.trace-cell { position: relative; flex: 1 1 0; aspect-ratio: 1 / 1; max-width: 96px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, rgba(230,184,97,0.07), transparent 60%), var(--bg); border: 1px solid var(--stroke); display: grid; place-items: center; }
.tc-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(230,184,97,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(230,184,97,0.07) 1px, transparent 1px); background-size: 25% 25%; }
.tg, .ti { position: absolute; font-family: var(--f-arabic); font-size: clamp(34px, 9vw, 48px); line-height: 1; }
.tg { color: rgba(230,184,97,0.28); }
.ti { color: var(--gold-ink); text-shadow: 0 0 9px rgba(230,184,97,0.5); }
.tc-nib { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px rgba(230,184,97,0.4); }
/* mid-trace: ink revealed partway, pen nib at the boundary */
.is-tracing .ti { clip-path: inset(40% 0 0 0); }
.is-tracing .tc-nib { left: 50%; top: 42%; transform: translate(-50%, -50%); }
/* mastered: fully inked gold gradient + a slow shimmer sweep */
.is-mastered .tg { opacity: 0; }
.is-mastered .ti { color: transparent; text-shadow: none; background: linear-gradient(135deg, var(--gold-2), var(--gold), var(--gold-deep)); -webkit-background-clip: text; background-clip: text; }
.is-mastered .tc-nib { display: none; }
.is-mastered::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,245,210,0.22) 50%, transparent 58%); transform: translateX(-120%); animation: trace-shimmer 3.4s ease-in-out infinite; }
@keyframes trace-shimmer { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
/* untraced: ghost only */
.is-new .ti, .is-new .tc-nib { display: none; }
.trace-mod .mod-foot { margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .ai-duo { grid-template-columns: 1fr; }
  .lib-stage, .lib-shelf { max-width: 100%; }
  .lo-tile { width: 80px; height: 142px; }
}

/* consolidated reduced-motion: every HUD animation off */
@media (prefers-reduced-motion: reduce) {
  .player-saqr, .player-saqr-wrap::before,
  .hud-chip--new, .hud-chip--live .dot, .hud-flame .fl,
  .hud-ring, .m-progress .ring,
  .lp-step.is-current .lp-node, .lp-step.is-current .lp-node::after,
  .m-chat .typing span, .m-timer .bar i, .m-call .ph::before, .m-call .ph::after, .m-wave i,
  .ai-orb.a, .ai-orb.b, .pl-wave i,
  .lo-belt-a, .lo-belt-b, .lo-dots i, .mic-ring, .mic-wave i, .game-bar i, .is-mastered::after,
  .m-letters .ml-glyph, .rl-belt, .rl-live, .m-saqrcall .sq-av, .m-saqrcall .sq-accept,
  .m-mic .mic-orb, .m-scan .sc-line, .m-scan .sc-aura {
    animation: none !important; transition: none !important;
  }
  .book-cover { transform: none !important; transition: none !important; }
  .book-card:hover .book-cover { transform: none !important; }
  /* AI Suite fan-deck + tiles: snap, no easing */
  .m-scenarios .sc, .suite-cell, .suite-stage { transition: none !important; }
  /* rest each motif at a clean static frame */
  .m-letters .ml-glyph { background-size: 100% 100% !important; }
  .m-scan .sc-line { top: 44px !important; opacity: 1 !important; }
}

/* ============================================================
   DASHBOARD RESTRUCTURE — analytics KPIs + AI Suite buttons.
   ============================================================ */
/* analytics: the four KPIs live inside the hero HUD, in a slim strip under the
   Start CTA (owner call, 2026-07-02) — numbers still tick up once on reveal */
.hud-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; max-width: 460px; padding-top: 13px; border-top: 1px solid var(--stroke); }
.hud-stat { display: flex; flex-direction: column; gap: 4px; }
.hud-stat-num { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: -.2px; color: var(--cream); white-space: nowrap; }
/* --secondary, not --muted. --muted is calibrated against --card-top and clears
   AA there by 0.03 with nothing to spare; the HUD panel's gradient runs a shade
   lighter than a card, and pixel-sampling this label on the dashboard
   2026-08-02 put its worst ground at #32453A, where --muted is 4.26 against the
   4.5 a 9.5px label needs. --secondary is 4.85 on the same pixel. Its own <em>
   child was already on --secondary, so the row was two greys apart for no
   reason anyway. */
.hud-stat-lb { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--secondary); white-space: nowrap; }
.hud-stat-lb em { font-style: normal; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 10.5px; color: var(--secondary); margin-left: 4px; }

/* ---- Daily Quests — a frameless list inside the hero's right column ---- */
/* These were three bordered cards in their own full-width band directly under
   the hero, which made them the first of five competing card styles before the
   journey. Inside the panel they must not be cards at all: the panel is already
   the card. Rows are separated by a hairline and nothing else. */
.dq-head { margin: 0 0 9px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dq-list { display: flex; flex-direction: column; border-top: 1px solid var(--stroke); }
.dq-row { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  min-width: 0; max-width: 100%; box-sizing: border-box; text-decoration: none;
  padding: 10px 4px; border-bottom: 1px solid var(--stroke);
  transition: background-color .16s var(--ease-smooth), transform .16s; }
.dq-row:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.dq-row:active { background: color-mix(in srgb, var(--gold) 11%, transparent); }
.dq-ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  color: var(--gold-ink); background: radial-gradient(circle at 50% 38%, rgba(230,184,97,0.22), rgba(230,184,97,0.08));
  border: 1px solid var(--stroke-strong); box-shadow: inset 0 1px 5px rgba(0,0,0,.4), 0 0 10px -3px var(--gold-glow); }
.dq-ico svg { width: 15px; height: 15px; }
.dq-row.is-done .dq-ico { color: var(--on-gold); background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; box-shadow: 0 2px 6px -1px var(--gold-glow); }
.dq-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dq-title { font-family: var(--f-body); font-weight: 700; font-size: 13.5px; line-height: 1.2; color: var(--cream); }
/* One supporting line, ellipsised. The column is ~300px, so this has to stay a
   single line or the three rows stop being scannable at a glance. */
.dq-sub { display: block; font-family: var(--f-body); font-weight: 500; font-size: 11.5px;
  line-height: 1.3; color: var(--secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dq-row.is-done .dq-title { color: var(--gold-ink); }
.dq-count { flex: 0 0 auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--secondary); }
.dq-chev { flex: 0 0 auto; color: var(--gold-ink-2); display: inline-flex; transition: transform .16s var(--ease-bounce); }
.dq-chev svg { width: 15px; height: 15px; }
.dq-row:hover .dq-chev { transform: translateX(3px); }
.dq-tick { flex: 0 0 auto; color: var(--gold-ink); display: inline-flex; }
.dq-tick svg { width: 18px; height: 18px; }
/* quest reward: a gold coin drops onto the row's icon disc the moment a quest
   completes (reuses the arcade coin language). Mounted by quests.js; reduced-motion skips it. */
.dq-coin { position: absolute; left: 4px; top: 10px; width: 30px; height: 30px; border-radius: 50%; z-index: 6; pointer-events: none;
  transform-origin: 50% 100%;
  background: radial-gradient(circle at 38% 30%, var(--gold-2), var(--gold) 52%, var(--gold-deep));
  box-shadow: 0 3px 7px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  animation: dq-coin-drop .74s var(--ease-bounce) 1 forwards; }
@keyframes dq-coin-drop {
  0%   { transform: translateY(-30px) scaleY(.35); opacity: 0; }
  22%  { opacity: 1; }
  50%  { transform: translateY(-6px) scaleY(1); }
  66%  { transform: translateY(0) scaleY(.7); }   /* impact squish onto the disc */
  82%  { transform: translateY(0) scaleY(1.05); }
  100% { transform: translateY(0) scaleY(1); opacity: 0; }  /* hand off to the gold done-disc */
}

/* ---- Can-do fluency meter (profile Progress card, can-do.js) ---- */
.can-do { margin-top: 26px; }
/* compact form inside the profile's Progress card: divider, eyebrow + pill, thin bar, small rows */
.can-do--compact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.can-do--compact .cd-head { align-items: center; margin-bottom: 10px; }
.can-do--compact .cd-bar { height: 6px; margin-bottom: 12px; }
.can-do--compact .cd-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.can-do--compact .cd-row { padding: 9px 11px; }
.can-do--compact .cd-pill { padding: 5px 11px; }
.cd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 12px; }
.cd-head-text h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 6px 0 0; line-height: 1.1; }
.cd-pill { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--secondary); background: var(--surface); border: 1px solid var(--stroke); border-radius: 999px; padding: 7px 13px; }
.cd-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin: 0 0 14px; }
.cd-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .5s var(--ease-smooth); }
.cd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.cd-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); border: 1px solid var(--stroke); opacity: .55; }
.cd-row.is-on { opacity: 1; border-color: var(--gold-deep); }
.cd-ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); background: rgba(255,255,255,0.06); }
.cd-row.is-on .cd-ic { color: var(--on-gold); background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.cd-ic svg { width: 13px; height: 13px; }
.cd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-text { font-family: var(--f-body); font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--cream); }
.cd-row:not(.is-on) .cd-text { color: var(--secondary); }
.cd-meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* On a phone the pill and the heading were flex siblings on one row, so the
   heading was squeezed to about eight characters wide and set "What / you / can /
   say / now" down five lines. Stack them. */
@media (max-width: 560px) {
  .cd-head { flex-direction: column; align-items: flex-start; gap: 9px; }
  .cd-head-text h2 { margin-top: 4px; }
  .cd-pill { align-self: flex-start; }
}

/* ---- The AI Suite: Ramsa panel on top, then a varied tool bento ---- */
.ai-suite { display: block; }

/* Scenarios — just a fanning deck of real covers + a label, no card chrome */
.scn-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-decoration: none; padding: 22px 16px 18px; }
.scn-cell-deck { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 104px; }
.scn-cell .m-scenarios .sc { width: 56px; aspect-ratio: 56 / 92; margin-left: -22px; }
.scn-cell .m-scenarios .sc:first-child { margin-left: 0; }
.scn-cell h3 { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); margin: 0; }
/* fan straightens on hover (rescoped from the old tk-card) */
.scn-cell:hover .m-scenarios .sc { transform: rotate(0) translateY(0); margin-left: -8px; }
.scn-cell:hover .m-scenarios .sc:first-child { margin-left: 0; }

/* ---- Daily Challenge: Showdown — the app's hero card (artwork IS the card) ---- */
/* clear top margin: the featured row is its own band, not an appendix of the
   quests grid above it (owner feedback 2026-07-02: it read as "stuck") */
.daily-challenge { margin: 34px 0 10px; }
/* Cap the size (it's a hero, not the whole column) and crop the artwork's baked
   black corner fills via a slight scale inside the rounded clip, so only the
   gold-framed card shows. */
.dc-card { position: relative; display: block; width: 100%; max-width: 440px; margin: 0 auto;
  border-radius: 20px; overflow: hidden; text-decoration: none;
  box-shadow: 0 18px 38px -20px rgba(0,0,0,.6);
  transition: transform .16s var(--ease-bounce), box-shadow .18s var(--ease-smooth); }
.dc-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--gold) 34%, rgba(0,0,0,.55)); }
.dc-card:active { transform: scale(.985); }
.dc-art { display: block; width: 100%; height: auto; transform: scale(1.045); transform-origin: center; }
/* Pressable, tactile Start CTA — same depth language as the site's .btn-primary
   (3-stop gold curve, inset top light + soft inner shade, ambient glow + a
   grounding key shadow), but NO hard bevel line. Lifts on hover, presses in on
   click. The button is an overlay on the artwork, mirroring ShowdownHeroCard.tsx. */
.dc-start { position: absolute; left: 7%; right: 7%; bottom: 6.5%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 12px;
  font-family: var(--f-body); font-weight: 700; font-size: 15px; letter-spacing: .5px; color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 3px rgba(0,0,0,.14),
    0 4px 10px -3px rgba(0,0,0,.4),
    0 10px 22px -8px color-mix(in srgb, var(--gold) 55%, transparent);
  transition: transform .16s var(--ease-bounce), box-shadow .18s var(--ease-smooth), filter .16s; }
.dc-card:hover .dc-start { transform: translateY(-2px); filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.16),
    0 7px 14px -3px rgba(0,0,0,.45),
    0 16px 30px -8px color-mix(in srgb, var(--gold) 64%, transparent); }
.dc-card:active .dc-start { transform: translateY(1px) scale(.985);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 2px 4px rgba(0,0,0,.18),
    0 3px 7px -3px rgba(0,0,0,.4); }

/* ============================================================
   YOURS — four readouts of your own progress, in one instrument.

   The rule: nothing here describes the product, everything describes the
   learner. Every module leads with a number that changes as you use the
   course, and carries exactly one piece of art that IS data (the word you
   miss most, the cover of the book you are actually reading, your trade's
   photograph). No posters, no brochure counts.

   Deliberately a .hud-panel, not another hairline grid: that makes this a
   sibling of the hero (your state) rather than of the AI Suite (your tools).
   The suite is open cells on the page carrying pictures with one word each;
   this is one contained instrument carrying numbers. Opposite ink, so the
   second grid can never read as the first repeated, which is exactly what
   went wrong when both were card-less picture grids.

   What this replaced: a 2x2 card-less shelf whose four cells advertised the
   Dictionary ("3,900+ words"), the Library (a fan of all six covers), the
   Arcade (a claw machine) and Emirati at Work. All four were the left rail
   redrawn at 4x size, and all four read identically on day 1 and day 400.
   ============================================================ */
.yours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; }
.yours > * { border-right: 1px solid var(--stroke); }
.yours > *:last-child { border-right: none; }

.yr { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 22px 20px 20px; text-decoration: none; color: var(--cream);
  transition: background-color .18s var(--ease-smooth); }
@media (hover: hover) { .yr:hover { background: color-mix(in srgb, var(--gold) 5%, transparent); } }
.yr-lb { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
/* the figure: the number leads, its unit sits on the baseline beside it */
.yr-fig { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.yr-n { font-family: var(--f-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.02em; color: var(--cream); }
.yr-u { font-family: var(--f-body); font-size: 12px; line-height: 1.3; color: var(--secondary); min-width: 0; }
.yr-sub { font-family: var(--f-body); font-size: 12.5px; line-height: 1.4; color: var(--cream-muted); }
.yr-sub b { color: var(--gold-ink-2); font-weight: 700; }
/* nothing earned yet: one honest line pointing at the first real action, never a
   row of zeros and never a sales pitch */
.yr-none { font-family: var(--f-body); font-size: 13px; line-height: 1.45; color: var(--cream-muted); }
.yr-go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.yr-go svg { width: 12px; height: 12px; transition: transform .18s var(--ease-smooth); }
@media (hover: hover) { .yr:hover .yr-go svg { transform: translateX(3px); } }

/* ---- art that reports ---- */
/* Dictionary: the single word you have missed most, transliteration leading and
   the Arabic under it in gold, the same order every other surface uses */
.yr-word { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.yr-word .yw-k { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.yr-word .yw-tl { font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-word .yw-ar { font-family: var(--f-arabic); font-weight: 700; font-size: 16px; line-height: 1.6; color: var(--gold-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Library: the cover of the book you are in, with how far through it you are */
.yr-book { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.yr-book img { flex: none; width: 38px; height: auto; border-radius: 3px;
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.3); }
.yr-book-m { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.yr-book-t { font-family: var(--f-body); font-weight: 600; font-size: 12px; color: var(--cream-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-bar { height: 3px; border-radius: 3px; background: var(--stroke); overflow: hidden; }
.yr-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); }

/* Arcade: three scores, because your scores are the only thing an arcade is about */
.yr-scores { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.yr-score { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--f-body); font-size: 12px; color: var(--cream-muted); }
.yr-score b { font-family: var(--f-mono); font-weight: 700; font-size: 12px; color: var(--gold-ink-2); }
.yr-score.is-zero b { color: var(--muted); }

/* Emirati at Work: your trade's photograph, or the quiet browse mosaic */
.yr-photo { margin-top: auto; padding-top: 12px; }
.yr-photo img { display: block; width: 100%; height: 46px; object-fit: cover; border-radius: 4px;
  filter: saturate(.9) brightness(.82); transition: filter .25s var(--ease-smooth); }
@media (hover: hover) { .yr:hover .yr-photo img { filter: saturate(1) brightness(.95); } }
.yr-photo.no-art img { display: none; }
.yr-photo.no-art { height: 46px; border-radius: 4px;
  background:
    radial-gradient(78% 120% at 82% -12%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%),
    linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); }
.yr-mosaic { margin-top: auto; padding-top: 12px; display: flex; gap: 5px; }
.yr-mosaic img { width: 33%; height: 46px; object-fit: cover; border-radius: 4px; opacity: .5;
  filter: saturate(.72) brightness(.78); transition: opacity .25s var(--ease-smooth); }
@media (hover: hover) { .yr:hover .yr-mosaic img { opacity: .72; } }
/* the tick that marks a track as yours */
.yr-mine { display: inline-flex; vertical-align: -1px; margin-right: 4px; color: var(--gold-ink); }
.yr-mine svg { width: 11px; height: 11px; }

@media (max-width: 900px) {
  .yours { grid-template-columns: repeat(2, 1fr); }
  .yours > *:nth-child(2n) { border-right: none; }
  .yours > *:nth-child(-n+2) { border-bottom: 1px solid var(--stroke); }
}
@media (max-width: 520px) {
  .yours { grid-template-columns: 1fr; }
  .yours > * { border-right: none; border-bottom: 1px solid var(--stroke); }
  .yours > *:last-child { border-bottom: none; }
}


/* ---- card-less ledger: bare cells separated by inner hairlines only ----
   Every cell draws its own right and bottom hairline and the grid is pulled 1px
   past its container, so the outermost lines are clipped away. That is index-free
   on purpose: the old nth-child(3n) / nth-last-child(-n+3) pair assumed exactly
   six one-column children, so the moment anything spanned the full width (Ramsa
   as the lead cell, or the gated top row) the frame reappeared on the wrong
   edges. Nothing here counts children any more. */
#suite-host { overflow: hidden; }
#suite-host .suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 -1px -1px 0; }
#suite-host .suite > * { border-right: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }

/* ---- Ramsa: the suite's front door, spanning the top of the grid ----
   It used to be its own band floating between the suite and everything below,
   which is exactly the "it's just right there, it could be somewhere nicer" gap.
   Inside the grid it has to speak the grid's language: no card, no radius, no
   shadow. The input becomes a single ruled line, which is what an ask-anything
   field should look like anyway. */
#suite-host .suite > #ramsa-bar { grid-column: 1 / -1; margin: 0; padding: 20px 20px 22px; }
#suite-host #ramsa-bar .rb-card { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
#suite-host #ramsa-bar .rb-card.is-focus { box-shadow: none; }
#suite-host #ramsa-bar .rb-field { border-bottom: 1px solid var(--stroke-strong); padding-bottom: 4px; transition: border-color .2s var(--ease-smooth); }
#suite-host #ramsa-bar .rb-card.is-focus .rb-field { border-color: var(--gold); }
#suite-host #ramsa-bar .rbar-label { margin-bottom: 6px; }

#suite-host .suite-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 14px; padding: 22px 16px 18px; text-decoration: none; color: var(--cream);
}
/* the animation stage: a fixed-height holder with a soft accent glow underneath (no box) */
.suite-stage {
  position: relative; display: grid; place-items: center; width: 100%; min-height: 104px;
  background: radial-gradient(70% 70% at 50% 48%, color-mix(in srgb, var(--ac, var(--gold)) 12%, transparent), transparent 72%);
  transition: transform .2s var(--ease-smooth);
}
#suite-host .suite-cell h3 { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); margin: 0; transition: transform .2s var(--ease-smooth); }
/* hover lifts the content, NOT the cell — so the hairlines stay put */
#suite-host .suite-cell:hover .suite-stage,
#suite-host .suite-cell:hover h3 { transform: translateY(-3px); }

/* ---- motif: Shoof — a camera scanner: framing brackets + a gold scan-line sweeping down ---- */
.m-scan { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.m-scan .sc-aura { position: absolute; inset: 16px; border-radius: 14px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%); animation: sc-pulse 2.8s var(--ease-smooth) infinite; }
.m-scan .sc-bracket { position: absolute; width: 17px; height: 17px; border: 2.5px solid var(--gold); }
.m-scan .sc-tl { top: 13px; left: 13px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.m-scan .sc-tr { top: 13px; right: 13px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.m-scan .sc-bl { bottom: 13px; left: 13px; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.m-scan .sc-br { bottom: 13px; right: 13px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }
.m-scan .sc-line { position: absolute; left: 17px; right: 17px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 8px var(--gold-glow); animation: sc-sweep 2.6s var(--ease-smooth) infinite; }
@keyframes sc-sweep { 0% { top: 20px; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { top: 70px; opacity: 0; } }
@keyframes sc-pulse { 0%, 100% { opacity: .3; transform: scale(.94); } 50% { opacity: .62; transform: scale(1.05); } }

/* ---- motif: Letters & numbers — the shared ghost-pen writes the outline ---- */
.m-letters { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.m-letters .ml-glyph {
  font-family: var(--f-arabic); font-weight: 700; font-size: 58px; line-height: 1.4; padding: 6px 10px;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--gold) 50%, transparent);
  background-image: linear-gradient(0deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
  background-position: 0 100%; background-size: 100% 0%;
}
.m-letters .ml-glyph.inking { animation: ml-write 3.8s var(--ease-smooth) forwards; }
@keyframes ml-write {
  0% { background-size: 100% 0%; filter: none; }
  46% { background-size: 100% 100%; filter: none; }
  58% { filter: drop-shadow(0 0 7px var(--gold-glow)); }
  72% { filter: none; }
  100% { background-size: 100% 100%; filter: none; }
}

/* ---- motif: Stories — the Lsany Originals marquee: two poster belts, opposite drifts ---- */
.m-reel { position: relative; width: 100%; max-width: 162px; height: 96px; display: flex; flex-direction: column; gap: 6px; justify-content: center; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.m-reel .rl-row { display: flex; overflow: hidden; }
.m-reel .rl-belt { display: flex; gap: 7px; align-items: center; flex: none; will-change: transform; }
.m-reel .rl-row-a .rl-belt { animation: rl-drift-a 24s linear infinite; }
.m-reel .rl-row-b .rl-belt { animation: rl-drift-b 28s linear infinite; }
.m-reel .rl-card { flex: none; width: 26px; height: 44px; border-radius: 5px; overflow: hidden; background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); box-shadow: 0 4px 10px -6px rgba(0,0,0,.8); }
.m-reel .rl-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-reel .rl-live { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: rl-live 1.7s var(--ease-smooth) infinite; }
@keyframes rl-drift-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rl-drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes rl-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); } }

/* ---- motif: Saqr call — an incoming call ---- */
.m-saqrcall { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 92px; }
.m-saqrcall .sq-av { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--stroke-strong);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gold) 22%, var(--surface)), var(--surface)); animation: sq-breathe 3.4s var(--ease-smooth) infinite; }
.m-saqrcall .sq-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; }
.m-saqrcall .sq-actions { display: flex; gap: 14px; }
.m-saqrcall .sq-btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--cream); box-shadow: 0 5px 14px -4px rgba(0,0,0,0.5); }
.m-saqrcall .sq-btn svg { width: 13px; height: 13px; }
.m-saqrcall .sq-accept { background: linear-gradient(160deg, var(--green), #2E9B6F); animation: wiggle 2.6s var(--ease-smooth) infinite; }
.m-saqrcall .sq-decline { background: linear-gradient(160deg, var(--coral), #C44832); }
.m-saqrcall .sq-decline svg { transform: rotate(135deg); }
@keyframes sq-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes wiggle { 0%, 88%, 100% { transform: translateY(0); } 92% { transform: translateY(-4px); } 96% { transform: translateY(0); } }

/* ---- motif: Pronounce — a living microphone: breathing orb, pulse rings, equalizer ---- */
.m-mic { position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.m-mic .mic-orb { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-2), var(--gold-deep)); box-shadow: 0 8px 18px -4px var(--gold-glow); animation: mic-breath 2.6s var(--ease-smooth) infinite; }
.m-mic .mic-orb svg { width: 24px; height: 24px; }
.m-mic .mic-ring { position: absolute; top: 50%; left: 50%; margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: mic-pulse-c 2.2s var(--ease-smooth) infinite; }
.m-mic .mic-ring2 { animation-delay: 1.1s; }
@keyframes mic-pulse-c { 0% { transform: translate(-50%, -50%) scale(1); opacity: .55; } 100% { transform: translate(-50%, -50%) scale(1.42); opacity: 0; } }
.m-mic .mic-wave { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 2px; align-items: flex-end; height: 16px; }
.m-mic .mic-wave i { width: 2.5px; height: 100%; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--green)); transform-origin: bottom; animation: mic-bar 1.1s var(--ease-smooth) infinite; }
.m-mic .mic-wave i:nth-child(odd) { animation-delay: .15s; }
.m-mic .mic-wave i:nth-child(3n) { animation-delay: .3s; }
.m-mic .mic-wave i:nth-child(4n) { animation-delay: .45s; }
@keyframes mic-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* hover surges: each motif reacts when you reach for it */
#suite-host .suite-cell:hover .m-mic .mic-orb { animation-duration: 1.6s; }
#suite-host .suite-cell:hover .m-mic .mic-wave i { animation-duration: .7s; }
#suite-host .suite-cell:hover .rl-row .rl-belt { animation-duration: 14s; }
#suite-host .suite-cell:hover .m-scan .sc-line { animation-duration: 1.5s; }

/* two columns on a phone. The clipped-edge trick above needs no per-column rules,
   so the whole nth-child reset block that used to live here is gone. */
@media (max-width: 560px) {
  #suite-host .suite { grid-template-columns: repeat(2, 1fr); }
  #suite-host .suite > #ramsa-bar { padding: 18px 16px 20px; }
}

/* mascot wrappers for the breathing idle (saqrAlive injects a soft aura sibling) */
.done-saqr-wrap, .cert-saqr-wrap { position: relative; display: inline-block; }
.cert-star { display: inline-flex; align-items: center; }

/* ============================================================
   COURSE SIDEBAR — one persistent rail across all Foundation pages.
   Injected by /courses/foundation/sidebar.js (CSP-safe). Width + the
   content offset are driven by html[data-rail]; the mobile drawer by
   html[data-drawer]. Tokens only.
   ============================================================ */
html[data-rail="expanded"] { --rail-w: 248px; }
html[data-rail="collapsed"] { --rail-w: 72px; }
body { padding-left: var(--rail-w, 0); transition: padding-left .26s var(--ease-smooth); }

.lrail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w, 248px);
  z-index: 200; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--stroke);
  overflow: hidden; transition: width .26s var(--ease-smooth);
  view-transition-name: lrail; /* persists across the page-to-page morph */
}
.lrail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px 14px; }
.lrail-brand { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--cream); white-space: nowrap; overflow: hidden; }
.lrail-brand .ar { font-family: var(--f-arabic); font-size: 15px; color: var(--gold-ink); }
.lrail-mark { display: none; font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--gold-ink); }
.lrail-collapse { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--stroke); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .16s, border-color .16s, transform .26s var(--ease-smooth); }
.lrail-collapse:hover { color: var(--gold-ink); border-color: var(--stroke-strong); }
.lrail-collapse svg { width: 16px; height: 16px; }

.lrail-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 10px 18px; }
.lrail-nav::-webkit-scrollbar { width: 7px; }
.lrail-nav::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 999px; }
.lrail-group { margin-bottom: 14px; }
.lrail-glabel { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; white-space: nowrap; }

/* collapsible nav group — the "AI Suite" disclosure (de-crowds the rail) */
.lrail-group--collapsible .lrail-gtoggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; font-weight: 700; color: var(--secondary); transition: color .16s; }
.lrail-group--collapsible .lrail-gtoggle:hover { color: var(--cream); }
.lrail-chev { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; transition: transform .2s ease; }
.lrail-group--collapsible.is-collapsed .lrail-chev { transform: rotate(-90deg); }
.lrail-gbody { display: flex; flex-direction: column; }
.lrail-group--collapsible.is-collapsed .lrail-gbody { display: none; }
@media (min-width: 821px) {
  /* in the icon-only rail the header is hidden, so show every tool icon regardless of collapse */
  html[data-rail="collapsed"] .lrail-group--collapsible.is-collapsed .lrail-gbody { display: flex; }
}

.lrail-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; text-decoration: none; color: var(--secondary); font-family: var(--f-body); font-weight: 600; font-size: 14px; white-space: nowrap; transition: color .16s, background .16s; }
.lrail-item:hover { color: var(--cream); background: rgba(230,184,97,0.08); }
.lrail-item .lrail-ic { width: 20px; height: 20px; flex: none; }
.lrail-item.is-active { color: var(--gold-ink); background: rgba(230,184,97,0.12); }
.lrail-item.is-active .lrail-ic { color: var(--gold-ink); }
.lrail-item.is-active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--gold); }
/* Rows the learner's plan does not cover yet. Dimmed rather than disabled: the
   link still opens, and the page it opens is what explains the upgrade. The
   padlock sits after the label and is pushed to the right edge, so it lands in
   the same column on every locked row instead of hanging off text of different
   lengths. It follows .lrail-lb out of sight when the rail is collapsed to icons
   only: at 46px wide there is no room for a second glyph, and the hover tooltip
   there already carries the wording. */
.lrail-item.is-locked { color: var(--secondary); opacity: .72; }
.lrail-item.is-locked:hover { opacity: 1; }
.lrail-item .lrail-lock-i { width: 14px; height: 14px; flex: none; margin-left: auto; color: var(--gold-ink); opacity: .8; }

/* unread-reply dot on the Support item — gold, ringed in the rail surface so it reads in both expanded + collapsed rail */
.lrail-badge { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.lrail-badge[hidden] { display: none; }

/* flex:none keeps the foot from shrinking on short viewports (it was clipping
   the theme picker and squeezing the nav's last items against it) */
.lrail-foot { flex: 0 0 auto; padding: 10px 10px 16px; border-top: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 2px; }
@media (max-height: 700px) {
  .lrail-foot { padding: 6px 10px 10px; }
  .lrail-foot .lrail-item { padding: 7px 10px; }
  .lrail-theme-label { padding: 6px 10px 4px; }
}

/* 3-way theme picker: light / sage default / dark — a direct pick, not a cycle */
.lrail-theme-label { padding: 10px 10px 5px; }
.lrail-theme-seg { display: flex; gap: 5px; padding: 0 10px 2px; }
.lts-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 9px; border: 1px solid var(--stroke);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.lts-opt:hover { color: var(--cream); border-color: var(--stroke-strong); }
.lts-opt.is-active { color: var(--gold-ink); border-color: var(--gold); background: rgba(230,184,97,0.10); }
.lts-opt svg { width: 17px; height: 17px; }
@media (min-width: 821px) {
  html[data-rail="collapsed"] .lrail-theme-seg { flex-direction: column; gap: 6px; padding: 6px 12px 8px; }
}

.lrail-burger, .lrail-scrim { display: none; }

/* ---- collapsed (desktop only): icon rail + hover tooltips ---- */
@media (min-width: 821px) {
  html[data-rail="collapsed"] .lrail-brand { display: none; }
  html[data-rail="collapsed"] .lrail-head { justify-content: center; }
  html[data-rail="collapsed"] .lrail-collapse { transform: rotate(180deg); }
  html[data-rail="collapsed"] .lrail-glabel { display: none; }
  html[data-rail="collapsed"] .lrail-lb { display: none; }
  html[data-rail="collapsed"] .lrail-lock-i { display: none; }
  html[data-rail="collapsed"] .lrail-item { justify-content: center; padding: 11px 0; }
  html[data-rail="collapsed"] .lrail-group + .lrail-group { border-top: 1px solid var(--stroke); padding-top: 8px; }
  html[data-rail="collapsed"] .lrail-item:hover::after {
    content: attr(aria-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--surface-2); color: var(--cream); border: 1px solid var(--stroke); padding: 6px 10px; border-radius: 8px;
    font-family: var(--f-body); font-weight: 600; font-size: 12.5px; white-space: nowrap; z-index: 210; pointer-events: none;
    box-shadow: 0 12px 26px -14px rgba(0,0,0,.7);
  }
}

/* ---- mobile (<=820px): off-canvas drawer + hamburger + scrim ---- */
@media (max-width: 820px) {
  body { padding-left: 0; }
  /* rail is an off-canvas drawer here — the fixed lesson bars span full width */
  .lesson-top, .lesson-foot { left: 0; }
  .lrail { width: 248px; transform: translateX(-100%); z-index: 300; box-shadow: 0 0 48px rgba(0,0,0,.5); transition: transform .3s var(--ease-smooth); }
  html[data-drawer="open"] .lrail { transform: none; }
  .lrail-collapse { display: none; }
  /* always show full labels in the drawer, even if the collapsed pref is set */
  .lrail-brand { display: inline-flex; }
  .lrail-lb, .lrail-glabel { display: block; }
  .lrail-burger {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 14px; left: 14px; z-index: 260;
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke-strong); cursor: pointer;
    background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--cream);
  }
  .lrail-burger svg { width: 20px; height: 20px; }
  .lrail-scrim { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-smooth); }
  html[data-drawer="open"] .lrail-scrim { opacity: 1; pointer-events: auto; }
  body.lrail-lock { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  body, .lrail, .lrail-scrim, .lrail-collapse { transition: none !important; }
}

/* ============================================================
   KARAK BREAKS — review checkpoints (path nodes + the warm break page).
   The break itself is modeled on the app's Karak Break: a warm,
   coffee-room review sat between chapters.
   ============================================================ */

/* ---- locked lesson on the path (chapter gated behind a break) ---- */
.lp-step.is-locked { opacity: .55; }
.lp-step.is-locked .lp-node { filter: grayscale(.4); color: var(--muted); }
.lp-step.is-locked .lp-badge { color: var(--muted); background: var(--surface); border-color: var(--stroke); }
.lp-step.is-locked .lp-status { color: var(--muted); }
.lp-step.is-locked .lp-card { cursor: default; }

/* ---- the Karak Break node on the spine: a warm cover tile (same art as the app) ---- */
.lp-node--kb { border-radius: 15px; overflow: hidden; padding: 0; border-width: 2px; }
.lp-node--kb .lp-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-step--kb .lp-node { border-color: var(--stroke-strong); }
.lp-step--kb.is-current .lp-card { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 18px 40px -26px var(--gold-glow); }
.lp-step--kb.is-current .lp-node { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px -14px var(--gold-glow); }
.lp-step--kb.is-current .lp-status { color: var(--gold-ink); }
.lp-step--kb.is-done .lp-node { border-color: color-mix(in srgb, var(--gold) 58%, var(--stroke)); }
.lp-step--kb.is-done .lp-status { color: color-mix(in srgb, var(--gold-ink) 80%, var(--cream)); }
.lp-step--kb.is-locked { opacity: .6; }
.lp-step--kb.is-locked .lp-cover { filter: grayscale(.7) brightness(.7); }
/* the cup-icon fallback (if a cover ever fails to load) keeps the old circle look */
.lp-node--kb:not(:has(.lp-cover)) { border-radius: 50%; }

/* ============================================================
   UNIT TEST — the energetic "exam ticket" that caps each unit.
   A perforated ticket: dashed edge + carved side notches + a gold
   stamp node. Looks/sounds/feels like a test, not a lesson. The
   node/badge state colours and the live "current" glow+pulse are
   inherited from the shared .lp-step.is-done / .is-current rules
   above, so gating + the heartbeat come for free — this block only
   adds the ticket skin, the copy chips, and the PASSED stamp.
   ============================================================ */
/* the stamp node — a coral-rimmed medallion (state colours cascade in) */
.lp-node--test { border-color: color-mix(in srgb, var(--coral) 52%, var(--stroke)); color: var(--coral-ink); }

/* the ticket card — dashed perforation edge + warm coral-washed fill.
   border-COLOR per state still comes from .lp-step.is-current/.is-done .lp-card. */
.lp-step--test .lp-card { overflow: visible; border-style: dashed;
  border-color: color-mix(in srgb, var(--coral) 40%, var(--stroke));
  background: linear-gradient(180deg, color-mix(in srgb, var(--coral) 8%, var(--card-top, var(--surface-2))), color-mix(in srgb, var(--coral) 3%, var(--surface))); }
/* the two carved side notches — the tear-off ticket silhouette (replaces the lesson top-hairline) */
.lp-step--test .lp-card::before, .lp-step--test .lp-card::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); transform: translateY(-50%); z-index: 2; }
.lp-step--test .lp-card::before { left: -8px; }
.lp-step--test .lp-card::after  { right: -8px; }

.lp-step--test .lp-status { color: var(--coral-ink); }
.lp-test-sub { font-family: var(--f-body); font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; }

/* "Punch in" — the energetic call to sit the test */
.lp-test-cta { flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral-ink); padding: 6px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--stroke)); background: color-mix(in srgb, var(--coral) 10%, transparent);
  transition: background .18s, border-color .18s, transform .18s var(--ease-smooth); }
.lp-test-cta svg { width: 13px; height: 13px; }
a.lp-step--test:hover .lp-test-cta { background: color-mix(in srgb, var(--coral) 18%, transparent); border-color: var(--coral); transform: translateX(2px); }

/* the PASSED / CLEARED stamp on a cleared ticket — a static state mark, not a burst */
.lp-test-stamp { flex: none; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--coral-ink); padding: 5px 9px; border-radius: 6px; transform: rotate(-8deg); opacity: .92;
  border: 2px solid color-mix(in srgb, var(--coral) 52%, var(--stroke)); }

/* locked: greyed, no CTA */
.lp-step--test.is-locked .lp-status { color: var(--muted); }
.lp-step--test.is-locked .lp-node { color: var(--muted); border-color: var(--stroke); }

/* ============================================================
   THE KARAK BREAK PAGE — warm coffee-room atmosphere.
   ============================================================ */
body.karak-room { background: #1F1612; }
html[data-theme="light"] body.karak-room { background: #211812; }

/* The room stays dark on the light theme ON PURPOSE -- it is a coffee room, and
   the line above has always said so. What it did not do is bring the ink with
   it. Every string on this screen is painted with --cream, --gold-ink-2,
   --secondary or --muted, and on the light theme those tokens are DARK by
   definition, so the whole page rendered near-black on dark brown. Measured
   before this block: the h1 at 1.02:1, the match tiles at 1.02:1, the sub-line
   at 2.26:1, the eyebrow at 3.46:1. 1.02 is not "low contrast", it is invisible.
   .opt went further and painted a white card in the middle of the room, because
   its background is var(--surface) and light --surface is #FFFFFF.

   So the room re-declares the dark ink family for its own subtree. Scoped to
   body.karak-room, so nothing outside this page can see it. The surfaces are
   the room's browns rather than the dark theme's greens, which is the only
   place these values differ from :root.

   Why this was never seen: karak-breaks.js ships BREAKS = [], so the screen is
   dormant and unreachable, and the four links to it are all guarded on a break
   existing. It is written to be switched back on ("repopulate this array"), and
   would have come back unreadable in one of the two themes. */
html[data-theme="light"] body.karak-room {
  --cream: #FAF5E8;
  --secondary: #B8B2A0;
  --muted: #A1A9A3;
  --gold-ink: #E6B861;
  --gold-ink-2: #F5D08C;
  --green: #4DBF8E;
  --coral: #E8614A;
  --coral-ink: #F49E8B;
  --stroke: rgba(230, 184, 97, 0.14);
  --stroke-strong: rgba(230, 184, 97, 0.32);
  --surface: #2A1E18;
  --surface-2: #35261D;
  --card-top: #35261D;
}
.kb-warmth { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(230,184,97,0.20), rgba(230,184,97,0.10) 45%, rgba(230,184,97,0.04) 70%, transparent 100%); }
body.karak-room .lesson-stage,
body.karak-room .lesson-top,
body.karak-room .lesson-foot { position: relative; z-index: 1; }
body.karak-room .lesson-top { background: rgba(31,22,18,0.92); border-bottom-color: rgba(230,184,97,0.14); }
body.karak-room .lesson-foot { background: linear-gradient(to top, #1F1612 62%, rgba(31,22,18,0)); }
.kb-top { padding-bottom: 12px; }
.kb-eyebrow { color: var(--gold-ink); }

/* cups: estekana glasses that fill as you match */
.kb-cups { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 2px 0 22px; }
.kb-cup { width: 24px; height: 34px; display: inline-block; }
.kb-cup svg { width: 24px; height: 34px; display: block; }
.kb-cup-fill { fill: var(--gold); opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; transition: opacity .3s var(--ease-smooth), transform .34s var(--ease-smooth); }
.kb-cup-line { fill: none; stroke: rgba(230,184,97,0.55); stroke-width: 1.3; stroke-linejoin: round; }
.kb-cup.filled .kb-cup-fill { opacity: .9; transform: scaleY(1); }
.kb-cup.filled .kb-cup-line { stroke: var(--gold); }

/* matching tiles — paper-warm cards */
.kb-match { margin-bottom: 6px; align-items: stretch; }
/* every card is exactly the same size — fixed height, content centered, on both columns */
.kb-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 92px; flex: 0 0 92px; padding: 10px 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(245,236,222,0.06), rgba(245,236,222,0.03));
  border-color: rgba(230,184,97,0.20); }
.kb-tile:hover { border-color: rgba(230,184,97,0.5); }
.kb-tile.sel { border-color: var(--gold); background: rgba(230,184,97,0.16); }
.kb-tile.done { opacity: .4; pointer-events: none; border-color: var(--green); }
.kb-tile.miss { animation: lesson-shake .4s; border-color: var(--coral); }
.kb-tile-tl { font-family: var(--f-mono); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--cream); line-height: 1.2; }
.kb-tile-ar { font-family: var(--f-arabic); direction: rtl; font-size: 15px; color: var(--gold-ink-2); margin-top: 3px; }
.kb-tile-en { font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--cream); text-align: center; line-height: 1.3; }

/* the friend's prompt card */
.kb-prompt { background: linear-gradient(180deg, rgba(245,236,222,0.07), rgba(245,236,222,0.03)); border: 1px solid rgba(230,184,97,0.32);
  border-radius: 18px; padding: 16px 18px; margin-bottom: 22px; }
.kb-prompt-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); display: block; margin-bottom: 8px; }
.kb-prompt-hear { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; }
.kb-prompt-hear svg { width: 20px; height: 20px; color: var(--gold-ink); flex: none; }
.kb-prompt-tl { display: block; font-family: var(--f-mono); font-weight: 700; font-size: 20px; color: var(--cream); line-height: 1.25; letter-spacing: -.01em; }
.kb-prompt-ar { font-family: var(--f-arabic); direction: rtl; font-size: 18px; color: var(--gold-ink-2); line-height: 1.4; margin-top: 6px; }
.kb-prompt-en { display: block; font-family: var(--f-body); font-size: 14px; color: var(--secondary); margin-top: 4px; }

/* response options */
.kb-options .kb-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.kb-opt-tl { font-family: var(--f-mono); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--cream); }
.kb-opt-ar { font-family: var(--f-arabic); direction: rtl; font-size: 15px; color: var(--gold-ink-2); margin-top: 3px; }
.kb-opt-en { font-family: var(--f-body); font-size: 13px; color: var(--muted); margin-top: 2px; }

/* done */
.kb-done .kb-xp { font-family: var(--f-mono); color: var(--gold-ink); font-size: 15px; margin: 12px 0 4px; }

@media (max-width: 560px) {
  .kb-tile { height: 84px; flex-basis: 84px; }
  .kb-tile-ar { font-size: 14px; }
  .kb-tile-en { font-size: 14px; }
  .kb-prompt-ar { font-size: 16px; }
  .kb-cups { gap: 8px; }
}

/* ============================================================
   COMBO BANNER — slide-in streak milestone (lessons + showdown).
   Restrained: a gold pill at the top, no burst/confetti. Tiers
   deepen the gold and tighten the ring as the streak climbs.
   ============================================================ */
.combo-banner {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1400; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--stroke-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  font-family: var(--f-mono); white-space: nowrap; pointer-events: none;
  transition: opacity .34s var(--ease-smooth), transform .34s var(--ease-smooth);
}
.combo-banner.out { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.combo-banner .cb-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink);
}
.combo-banner .cb-mult {
  font-size: 15px; font-weight: 800; color: var(--cream);
  background: var(--gold); color: var(--on-gold); border-radius: 7px; padding: 1px 7px;
}
.combo-banner .cb-streak {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.combo-banner.tier-fire { border-color: var(--gold); }
.combo-banner.tier-blazing {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 0 3px var(--gold-glow);
}
@media (prefers-reduced-motion: reduce) {
  .combo-banner { transition: opacity .2s linear; }
  .combo-banner.out { transform: translateX(-50%); }
}

/* ============================================================
   PF-KIT — the shared account-page vocabulary (Account, Support).
   One canonical copy; pages keep only their page-unique rules.

   HEADER RULE for rail pages: eyebrow + f-display h1 + sub only.
   No per-page back-crumb or theme pill on desktop — the rail owns
   wayfinding and the theme picker. Crumb topbars may exist for the
   mobile drawer world and must hide at min-width: 821px.
   Full-screen surfaces (lesson, karak-break, showdown, saqr-call,
   stories) keep their own top bars.
   ============================================================ */
.pf-wrap { max-width: 680px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 22px 96px; }

.pf-hero { margin: 14px 0 22px; }
.pf-hero .eyebrow { color: var(--gold-ink); }
.pf-hero h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 6vw, 40px); line-height: 1.0; letter-spacing: -.02em; color: var(--cream); margin: 10px 0 8px; }
.pf-hero p { color: var(--secondary); font-size: 15px; line-height: 1.55; max-width: 52ch; margin: 0; }

.pf-card { background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); border: 1px solid var(--stroke); border-radius: 18px; padding: 20px 18px; margin-bottom: 16px; }
.pf-card h2 { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--cream); margin: 0 0 4px; }
.pf-card .pf-sub { font-family: var(--f-body); font-size: 13px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }

.pf-label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; }
.pf-input, .pf-select, .pf-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--f-body); font-size: 16px; color: var(--cream);
  background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
  border: 1px solid var(--stroke-strong); border-radius: 14px; padding: 13px 15px; outline: none;
  transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.pf-input::placeholder, .pf-textarea::placeholder { color: var(--muted); }
.pf-input:focus, .pf-select:focus, .pf-textarea:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(230,184,97,0.12); }
.pf-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.pf-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.pf-field { margin-bottom: 14px; }
/* A text-weight action that sits under an input, not a button competing with
   one: "Forgot it? Email me a link" beneath the current-password field. */
.pf-linkbtn { display: inline-block; margin-top: 8px; padding: 2px 0; background: none; border: 0; cursor: pointer; font-family: var(--f-body); font-size: 13px; color: var(--gold-ink); }
.pf-linkbtn:hover { text-decoration: underline; }
.pf-linkbtn:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 4px; }
.pf-linkbtn:disabled { opacity: .55; cursor: default; text-decoration: none; }

.pf-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--f-body); font-weight: 600; font-size: 14px; border-radius: 12px; padding: 11px 18px; border: 1px solid var(--stroke-strong); background: var(--surface-2); color: var(--cream); cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; }
.pf-btn:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.pf-btn:hover { border-color: var(--gold-deep); }
.pf-btn:disabled { opacity: .5; cursor: default; }
.pf-btn.primary { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); border-color: transparent; }
/* "Delete account" and its Confirm. Every value here used to be a hardcoded
   LIGHT coral -- #ff9a8a ink on a 6% coral tint -- which is a dark-theme colour
   written as a literal. On the light theme that is 2.05 against white: the most
   destructive button in the product, and the one place a user most needs to
   read what they are clicking, was the least legible thing on the page.
   --coral-ink already handles the flip (#F49E8B dark, #B03A24 light): 5.69 and
   5.41 on the tint. The border goes to full --coral, 3.77 and 4.89, clearing
   the 3:1 that 1.4.11 asks of a component boundary; at 0.4 alpha it did not. */
.pf-btn.danger { color: var(--coral-ink); border-color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, transparent); }
.pf-btn.danger:hover { background: color-mix(in srgb, var(--coral) 16%, transparent); }
.pf-btn.ghost { background: transparent; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.pf-msg { font-family: var(--f-body); font-size: 13px; margin-top: 10px; min-height: 17px; }
.pf-msg.ok { color: #7fd6a8; }
.pf-msg.err { color: #ff9a8a; }

/* ============ landmark certificates (profile: collect as you go) ============ */
.pf-certs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 700px) { .pf-certs { grid-template-columns: repeat(3, 1fr); } }
.pf-cert-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 16px 12px 14px; border: 1px solid var(--stroke); border-radius: 16px;
  background: linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface)); min-width: 0;
}
.pf-cert-tile.is-earned {
  border-color: var(--gold-deep);
  background: radial-gradient(130% 100% at 50% 0%, rgba(230, 184, 97, 0.12), transparent 60%),
              linear-gradient(180deg, var(--card-top, var(--surface-2)), var(--surface));
}
.pf-cert-img { width: 100%; height: 74px; object-fit: contain; margin-bottom: 6px; }
.pf-cert-tile.is-locked .pf-cert-img { filter: grayscale(1); opacity: .35; }
.pf-cert-level { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--gold-ink); }
.pf-cert-tile.is-locked .pf-cert-level { color: var(--muted); }
.pf-cert-name { font-family: var(--f-display); font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--cream); }
.pf-cert-sub { font-family: var(--f-body); font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.pf-cert-tile .pf-btn { margin-top: 9px; padding: 8px 14px; font-size: 13px; }
.pf-cert-state { margin-top: 9px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.pf-cert-tile.is-earned .pf-cert-state { color: var(--gold-ink); }
/* the capstone row: the whole-course certificate lives at /complete */
.pf-cert-capstone {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px dashed var(--stroke-strong); border-radius: 14px; padding: 13px 16px;
  transition: border-color .15s;
}
.pf-cert-capstone:hover { border-color: var(--gold-deep); }
.pf-cert-capstone > svg { width: 18px; height: 18px; color: var(--gold-ink); flex: 0 0 auto; }
.pf-cert-capstone .cap-text { min-width: 0; }
.pf-cert-capstone b { font-family: var(--f-body); font-weight: 700; font-size: 13.5px; color: var(--cream); display: block; }
.pf-cert-capstone .cap-sub { font-family: var(--f-body); font-size: 12px; color: var(--muted); }
.pf-cert-tile .pf-btn svg { width: 14px; height: 14px; margin-right: 6px; }

/* wide two-column account layout: cards pair up on desktop, stack on mobile */
.pf-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pf-grid .pf-card { margin-bottom: 0; min-width: 0; }
@media (min-width: 860px) {
  .pf-wrap--wide { max-width: 880px; }
  .pf-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .pf-grid .pf-card--full { grid-column: 1 / -1; }
}

/* HEADER RULE enforcement (see comment above): mobile crumb topbars and the
   practice page's marketing nav disappear once the rail is on screen.
   !important on purpose: the pages' own inline <style> blocks re-declare
   these bars with display:flex after this sheet loads, and this rule is the
   one place that owns the desktop decision. */
@media (min-width: 821px) {
  .ach-topbar, .lb-topbar,
  .practice-page .nav, .practice-page .crumb { display: none !important; }
}

/* ============================================================
   STATES KIT — one empty/error state used course-wide.
   Full: Saqr image + title + sub + CTA row, centered.
   --inline: compact dashed variant for in-list "no results".
   ============================================================ */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 440px; margin: 0 auto; padding: 28px 18px; }
.empty-state[hidden] { display: none; } /* the author display:flex would otherwise beat the UA [hidden] rule when JS toggles it */
.empty-state-img { width: clamp(96px, 20vw, 150px); height: auto; object-fit: contain; margin-bottom: 14px; }
.empty-state h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 4.4vw, 26px); letter-spacing: -.01em; color: var(--cream); margin: 0 0 8px; line-height: 1.15; }
.empty-state p { font-family: var(--f-body); font-size: 14.5px; color: var(--secondary); line-height: 1.55; margin: 0 0 18px; }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.empty-state--inline { flex-direction: row; align-items: center; text-align: left; gap: 12px; max-width: none; padding: 14px 16px; border: 1px dashed var(--stroke-strong); border-radius: 14px; }
.empty-state--inline p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ============================================================
   VIEW TOGGLE — canonical pill segment shared by Library and
   Scenarios (identical duplicates removed from both pages).
   ============================================================ */
.lb-view, .scn-view { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--stroke); }
.lb-view-btn, .scn-view-btn { appearance: none; -webkit-appearance: none; cursor: pointer; border: none; background: transparent;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-radius: 999px; padding: 7px 16px; transition: background .16s, color .16s; }
.lb-view-btn.active, .scn-view-btn.active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); }
.lb-view-btn:focus-visible, .scn-view-btn:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
/* The public release intentionally exposes only the approved plan cards and
   interactive e-book overview. Localhost and ?preview=1 keep the full studio. */
.lsany-public-release [data-early-bird],
/* `~=`, not `=`. The business block on the storefront is tagged
   data-track="personal business" now that the audience toggle is gone and it has
   to render on the consumer page, and an exact-match selector stopped matching
   it the moment that second word was added. That would have un-hidden the
   Lsany for Business route on the pre-launch site, which is the one surface
   .vercelignore keeps off the deploy entirely. */
.lsany-public-release [data-track~="business"],
.lsany-public-release .cn-valuestack,
.lsany-public-release .cn-compare,
.lsany-public-release .cn-voices,
.lsany-public-release .cn-problem,
.lsany-public-release .cn-library-sec,
.lsany-public-release .cn-faq,
.lsany-public-release .cn-final,
.lsany-public-release .cn-ebook-sec #ebook-shelf,
.lsany-public-release .cn-ebook-sec .eb-bundles,
.lsany-public-release .cn-ebook-sec .cn-book-note,
.lsany-public-release .cn-ebook-sec .cn-cta-row {
  display: none !important;
}

/* ---- Light mode: where gold stops being text -----------------------------
   On a dark page gold reads as a highlight. On white it is a muddy brown that
   makes every label look faded, which is what the eyebrows, the unit numbers,
   the percentage and the day counter all looked like (Ali, 2026-07-29). The
   labels go neutral; gold stays on the wordmark, the Arabic and the things you
   are meant to press. */
html[data-theme="light"] .player-lv,
html[data-theme="light"] .pct,
html[data-theme="light"] .tc-eyebrow,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .eyebrow-gold,
html[data-theme="light"] .lp-unit-no,
html[data-theme="light"] .lp-unit-level,
html[data-theme="light"] .lp-unit-lm-name,
html[data-theme="light"] .lp-unit-prog,
html[data-theme="light"] .lp-biz-band-eyebrow,
html[data-theme="light"] .rb-trylbl,
html[data-theme="light"] .yr-lb {
  color: var(--secondary);
}
/* The ones that stay gold get the deep gold, which is legible on white rather
   than merely visible. */
html[data-theme="light"] .lp-status,
html[data-theme="light"] .biz-admin-link,
html[data-theme="light"] .lrail-item.is-active .lrail-lb {
  color: var(--gold-ink-deep);
}

/* The last two cream blocks in light: the selected menu row and the Ramsa
   language field. Both were a gold film over white; both become a plain neutral
   surface, with gold kept for the icon and the wordmark. */
html[data-theme="light"] .lrail-item.is-active {
  background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .lrail-item.is-active .lrail-lb { color: var(--cream); }
html[data-theme="light"] .rb-pairpill {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .rb-swap {
  background: #ffffff;
  border-color: var(--stroke-strong);
}

/* iOS zooms into any focused field under 16px and stays zoomed (touch floor). */
@media (pointer: coarse) {
  .grammar-box p,
  .grammar-box .gb-title { font-size: 16px; }
}