/* ════════════════════════════════════════════════════════════════════
   QABASIA UI v2 — the one design language (2026-07 redesign)
   Loaded AFTER main.css. New `q-`/`qnav-` components live here; legacy
   classes keep working in main.css until each template is converted.
   Two registers, same tokens: PRECISE (default) and PLAYFUL
   (body[data-register="kid"]). RTL-safe: logical properties only.
   Spec: ~/SkyForce/QABASIA-DESIGN-SPEC.md · approved 2026-07-01.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Locked palette (values identical to main.css/--tsf-*) */
  --tsf-white: #FFFFFF;
  --tsf-mist: #F5F5F7;
  --tsf-graphite: #1D1D1F;
  --tsf-stone: #86868B;
  --tsf-border: #E5E5E7;
  --tsf-sky: #E2670C;
  --tsf-sky-hover: #C2560A;
  --tsf-success: #34C759;
  --tsf-danger: #FF3B30;
  --tsf-warning: #FF9500;

  /* Approved additions (gate 2026-07-01) */
  --tsf-warm: #FBF6EE;
  --tsf-warm-2: #F4ECDE;
  --tsf-ember-soft: #FDEEDF;
  --tsf-ink-soft: #6E6E73;
  --tsf-robot-cyan: #0AA2FF;
  --tsf-robot-amber: #FFB020;

  --tsf-font: 'Outfit', 'IBM Plex Sans Arabic', sans-serif;
  --tsf-mono: 'JetBrains Mono', monospace;

  /* Canonical type + space scale from qabasia-design-system.css. Keep the
     q-components self-contained because base.html loads this file directly. */
  --tsf-h1: 2.25rem;
  --tsf-h2: 1.75rem;
  --tsf-h3: 1.375rem;
  --tsf-h4: 1.125rem;
  --tsf-body: 1rem;
  --tsf-small: .875rem;
  --tsf-xs: .75rem;
  --tsf-overline: .625rem;

  --tsf-space-xs: 4px;
  --tsf-space-sm: 8px;
  --tsf-space-md: 16px;
  --tsf-space-lg: 24px;
  --tsf-space-xl: 32px;
  --tsf-space-2xl: 48px;
  --tsf-space-3xl: 64px;

  --tsf-radius-sm: 8px;
  --tsf-radius-md: 12px;
  --tsf-radius-lg: 24px;
  --tsf-radius-full: 9999px;

  --tsf-shadow-sm: 0 1px 3px rgba(29,29,31,.06);
  --tsf-shadow-md: 0 4px 16px rgba(29,29,31,.08);
  --tsf-shadow-lift: 0 12px 32px rgba(29,29,31,.10);

  --tsf-ease: cubic-bezier(.2,.7,.3,1);
  --tsf-fast: 160ms;
  --tsf-med: 260ms;

  --tsf-tap: 44px;
  --tsf-tap-kid: 56px;
}

/* Playful register: kid surfaces get warmth + chunk without new tokens */
body[data-register="kid"] { background: var(--tsf-warm); }
body[data-register="kid"] .q-card { border-radius: var(--tsf-radius-lg); }

/* Never allow sideways scroll anywhere (belt over the layout braces) */
html, body { overflow-x: hidden; }

/* ── The spark: one motif everywhere ─────────────────────────────── */
.q-spark {
  display: inline-block;
  width: 12px; height: 12px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* ── Identity header grammar ─────────────────────────────────────── */
.q-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tsf-sky); background: var(--tsf-ember-soft);
  padding: 3px 10px; border-radius: var(--tsf-radius-full);
  text-decoration: none; white-space: nowrap;
}
.q-chip .q-spark { width: 9px; height: 9px; }
.q-chip--muted { color: var(--tsf-ink-soft); background: var(--tsf-mist); }

.q-pagehead { padding-block: 22px 4px; }
.q-pagehead .q-over {
  font-size: .625rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tsf-stone);
}
.q-pagehead h1 {
  font-size: clamp(1.55rem, 6vw, 2.25rem);
  font-weight: 800; letter-spacing: -.02em; margin-top: 4px;
}

/* ── Site nav (qnav) — one bar, no email, menu that actually opens ── */
.qnav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 60px;
  padding-block: 8px; padding-inline: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tsf-border);
}
.qnav-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--tsf-graphite); flex: 0 0 auto;
}
.qnav-brand .tile {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--tsf-graphite);
  display: grid; place-items: center; color: #fff;
}
.qnav-brand b { font-weight: 800; letter-spacing: .22em; font-size: .85rem; }
.qnav-links { display: none; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.qnav-links a {
  font-size: .8125rem; font-weight: 600; color: var(--tsf-ink-soft);
  text-decoration: none; padding: 4px 0;
}
.qnav-links a:hover, .qnav-links a.active { color: var(--tsf-graphite); }
.qnav-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.qnav-icon {
  width: 40px; height: 40px; border-radius: var(--tsf-radius-full);
  border: 1px solid var(--tsf-border); background: var(--tsf-white);
  display: grid; place-items: center; color: var(--tsf-graphite);
  position: relative; text-decoration: none; cursor: pointer;
  transition: background var(--tsf-fast) var(--tsf-ease);
}
.qnav-icon:hover { background: var(--tsf-mist); }
.qnav-avatar {
  width: 40px; height: 40px; border-radius: var(--tsf-radius-full);
  background: var(--tsf-ember-soft); color: var(--tsf-sky-hover);
  border: 1px solid #F3D9BE;
  display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; text-decoration: none;
}
/* Active-kid pill: the child's face + name in the bar; tap to switch player. */
.qnav-kid {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; max-width: 42vw;
}
.qnav-avatar--kid { background: var(--tsf-warm, #FBF3EA); border-color: var(--tsf-warm-2, #F3D9BE); font-size: 1.25rem; flex: none; }
.qnav-kid-name {
  font-weight: 800; font-size: .9rem; color: var(--tsf-graphite);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8rem;
}
@media (max-width: 480px) { .qnav-kid-name { max-width: 4.5rem; } }
.qnav-cart-badge {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 17px; height: 17px; padding-inline: 4px;
  border-radius: var(--tsf-radius-full);
  background: var(--tsf-sky); color: #fff;
  font-size: .625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* The menu: slide-down panel — RTL-safe (no physical off-canvas offsets) */
.qnav-menu {
  position: fixed; top: 60px; inset-inline: 0; z-index: 999;
  background: var(--tsf-white);
  border-bottom: 1px solid var(--tsf-border);
  box-shadow: var(--tsf-shadow-lift);
  padding: 8px 16px 20px;
  display: none;
}
.qnav-menu.open { display: block; animation: q-menudrop .22s var(--tsf-ease); }
@keyframes q-menudrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.qnav-menu a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tsf-tap);
  padding-block: 10px; padding-inline: 4px;
  font-size: 1rem; font-weight: 600; color: var(--tsf-graphite);
  text-decoration: none; border-bottom: 1px solid var(--tsf-mist);
}
.qnav-menu a.active { color: var(--tsf-sky); }
.qnav-menu .qnav-menu-meta {
  padding-block: 12px 0; font-size: .75rem; color: var(--tsf-stone);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.qnav-menu .qnav-menu-meta .signout { color: var(--tsf-danger); font-weight: 700; text-decoration: none; }
.qnav-signin { min-height: 40px; padding-inline: 16px; font-size: .85rem; }
.qnav-menu-langform { margin: 0; }
.qnav-menu-item {
  all: unset; box-sizing: border-box; display: flex; align-items: center;
  justify-content: space-between; width: 100%; min-height: var(--tsf-tap);
  padding-block: 10px; padding-inline: 4px;
  font-family: var(--tsf-font); font-size: 1rem; font-weight: 600;
  color: var(--tsf-graphite); border-bottom: 1px solid var(--tsf-mist);
  cursor: pointer;
}
@media (min-width: 900px) {
  .qnav { padding-inline: 24px; }
  .qnav-links { display: flex; }
  .qnav-burger { display: none; }
}

/* Kid nav variant: quiet — brand + who's-playing + one exit */
.qnav--kid { background: transparent; border-bottom: none; backdrop-filter: none; position: static; }
.qnav-kid-actions { display: inline-flex; align-items: center; gap: 10px; }
.qnav--kid .qnav-grownups {
  font-size: .8125rem; font-weight: 600; color: var(--tsf-ink-soft);
  text-decoration: none; border: 1px solid var(--tsf-border);
  background: var(--tsf-white); padding: 9px 14px;
  border-radius: var(--tsf-radius-full); min-height: var(--tsf-tap);
  display: inline-flex; align-items: center;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tsf-tap); padding-inline: 20px;
  border-radius: var(--tsf-radius-full);
  font-family: var(--tsf-font); font-weight: 700; font-size: .95rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform var(--tsf-fast) var(--tsf-ease), background var(--tsf-fast) var(--tsf-ease);
}
.q-btn:active { transform: scale(.97); }
.q-btn--primary { background: var(--tsf-sky); color: #fff; }
.q-btn--primary:hover { background: var(--tsf-sky-hover); color: #fff; }
.q-btn--dark { background: var(--tsf-graphite); color: #fff; }
.q-btn--ghost { background: var(--tsf-white); color: var(--tsf-graphite); border: 1px solid var(--tsf-border); }
.q-btn--ghost:hover { background: var(--tsf-mist); }
.q-btn--soft { background: var(--tsf-ember-soft); color: var(--tsf-sky-hover); }
.q-btn--block { width: 100%; }
.q-btn--big { min-height: var(--tsf-tap-kid); font-size: 1.05rem; }
body[data-register="kid"] .q-btn { min-height: var(--tsf-tap-kid); }

/* ── Cards ───────────────────────────────────────────────────────── */
.q-card {
  background: var(--tsf-white);
  border: 1px solid var(--tsf-border);
  border-radius: var(--tsf-radius-md);
  box-shadow: var(--tsf-shadow-sm);
}
.q-card--lift { box-shadow: var(--tsf-shadow-md); }

/* Course/content row: identity-first list item */
.q-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--tsf-white); border: 1px solid var(--tsf-border);
  border-radius: var(--tsf-radius-lg); padding: 12px;
  text-decoration: none; color: inherit;
  box-shadow: var(--tsf-shadow-sm); margin-bottom: 12px;
}
.q-row .art {
  flex: 0 0 58px; width: 58px; height: 58px;
  border-radius: var(--tsf-radius-md);
  display: grid; place-items: center; font-size: 24px;
  background: var(--tsf-mist); overflow: hidden;
}
.q-row .art img { width: 100%; height: 100%; object-fit: cover; }
.q-row .meta { flex: 1 1 auto; min-width: 0; }
.q-row .meta h3 {
  font-size: 1rem; font-weight: 800; margin: 4px 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-row .go { flex: 0 0 auto; }

/* ── Course card: ONE anatomy everywhere (spec §3.3) ─────────────── */
.q-cardgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .q-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .q-cardgrid { grid-template-columns: repeat(3, 1fr); } }
.q-ccard {
  display: flex; flex-direction: column;
  background: var(--tsf-white); border: 1px solid var(--tsf-border);
  border-radius: var(--tsf-radius-lg); overflow: hidden;
  box-shadow: var(--tsf-shadow-sm); text-decoration: none; color: inherit;
  transition: transform var(--tsf-fast) var(--tsf-ease), box-shadow var(--tsf-fast) var(--tsf-ease);
}
.q-ccard:hover { transform: translateY(-3px); box-shadow: var(--tsf-shadow-md); }
.q-ccard:active { transform: scale(.98); }
.q-ccard .art {
  aspect-ratio: 16 / 8.5; background: var(--tsf-mist);
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.q-ccard .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-ccard .art .q-spark { width: 26px; height: 26px; background: var(--tsf-sky); opacity: .35; }
.q-ccard .body { padding: 13px 16px 15px; display: flex; flex-direction: column; flex: 1; }
.q-ccard .chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.q-ccard .chip {
  font-size: .5625rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tsf-ink-soft);
  background: var(--tsf-mist); padding: 3px 9px;
  border-radius: var(--tsf-radius-full); white-space: nowrap;
}
.q-ccard h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.q-ccard .foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 12px;
}
.q-ccard .price { font-family: var(--tsf-mono); font-weight: 800; font-size: 1rem; color: var(--tsf-graphite); }
.q-ccard .price small { font-family: var(--tsf-font); color: var(--tsf-stone); font-weight: 600; font-size: .6875rem; }
.q-ccard .state { font-size: .8125rem; font-weight: 700; color: var(--tsf-success); }
.q-ccard .open {
  min-height: 40px; padding-inline: 16px; display: inline-flex; align-items: center;
  border-radius: var(--tsf-radius-full); background: var(--tsf-graphite);
  color: #fff; font-weight: 700; font-size: .85rem; flex: 0 0 auto;
}

/* Robotics Build flagship card — "half blueprint, half built".
   Slug-keyed markup keeps every sibling on the shared anatomy above.
   The art is an inline SVG (courses/_robotics_card_art.svg) so the card's
   hover can drive the scene itself. */
.q-ccard--robotics {
  border-color: var(--tsf-graphite);
  box-shadow: var(--tsf-shadow-md);
}
.q-ccard--robotics:hover { box-shadow: var(--tsf-shadow-lift); }
.q-ccard--robotics .q-rbcard-art { background: var(--tsf-graphite); }
.q-ccard--robotics .q-rbcard-art svg {
  display: block; inline-size: 100%; block-size: 100%;
}
.q-ccard--robotics .body { padding: var(--tsf-space-md); }
.q-ccard--robotics h3 { font-size: var(--tsf-h3); letter-spacing: -.01em; }
.q-ccard--robotics .q-rbcard-hook {
  display: block;
  margin-block-start: var(--tsf-space-xs);
  color: var(--tsf-ink-soft);
  font-size: var(--tsf-small);
  font-weight: 500;
  line-height: 1.35;
}
.q-ccard--robotics .chip--free {
  color: var(--tsf-sky-hover);
  background: var(--tsf-ember-soft);
}
/* Senior track is authored, not yet purchasable — reads as a promise, not a
   feature, so it recedes against the Junior chip beside it. */
.q-ccard--robotics .chip--soon {
  color: var(--tsf-stone);
  background: var(--tsf-mist);
}
.q-ccard--robotics .open { background: var(--tsf-sky); color: #fff; }
.q-ccard--robotics:hover .open { background: var(--tsf-sky-hover); }

/* Scene choreography: the lens breathes and drafting lines crawl on their
   own; on hover the built half drives forward while its blueprint stays
   pinned to the drafting table. */
.q-rbcard-art .rb-built,
.q-rbcard-art .rb-spark { transition: transform var(--tsf-med) var(--tsf-ease); }
.q-rbcard-art .rb-spark { transform-box: fill-box; transform-origin: center; }
.q-rbcard-art .rb-bp { opacity: .85; transition: opacity var(--tsf-med) var(--tsf-ease); }
.q-ccard--robotics:hover .rb-built,
.q-ccard--robotics:focus-visible .rb-built { transform: translateX(6px); }
.q-ccard--robotics:hover .rb-spark,
.q-ccard--robotics:focus-visible .rb-spark { transform: scale(1.22) rotate(8deg); }
.q-ccard--robotics:hover .rb-bp,
.q-ccard--robotics:focus-visible .rb-bp { opacity: 1; }
.q-rbcard-art .rb-lens-glow { animation: rb-lens 3.6s var(--tsf-ease) infinite; }
.q-rbcard-art .rb-dash { animation: rb-draft 30s linear infinite; }
@keyframes rb-lens { 0%, 100% { opacity: .28; } 50% { opacity: .5; } }
@keyframes rb-draft { to { stroke-dashoffset: -220; } }

@media (prefers-reduced-motion: reduce) {
  .q-rbcard-art .rb-lens-glow,
  .q-rbcard-art .rb-dash { animation: none; }
  .q-ccard--robotics:hover .rb-built,
  .q-ccard--robotics:focus-visible .rb-built,
  .q-ccard--robotics:hover .rb-spark,
  .q-ccard--robotics:focus-visible .rb-spark { transform: none; }
}

/* ── Progress ────────────────────────────────────────────────────── */
.q-bar {
  height: 5px; background: var(--tsf-mist);
  border-radius: var(--tsf-radius-full); overflow: hidden; display: block;
}
.q-bar > i {
  display: block; height: 100%; background: var(--tsf-sky);
  border-radius: inherit; transition: width var(--tsf-med) var(--tsf-ease);
}

/* Stat chips: one quiet row, never a wall */
.q-stats { display: flex; gap: 8px; }
.q-stat {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--tsf-white); border: 1px solid var(--tsf-border);
  border-radius: var(--tsf-radius-md); padding: 10px 6px;
  font-size: .75rem; color: var(--tsf-ink-soft); font-weight: 600;
}
.q-stat b { font-family: var(--tsf-mono); font-size: .95rem; color: var(--tsf-graphite); }

/* ── Coach strip (Qabasa) ────────────────────────────────────────── */
.q-coach {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--tsf-white); border: 1px solid var(--tsf-border);
  border-radius: var(--tsf-radius-md); padding: 12px 14px;
}
.q-coach .ava {
  flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: var(--tsf-radius-full); background: var(--tsf-graphite);
  color: var(--tsf-sky); display: grid; place-items: center;
}
.q-coach .who {
  display: block; font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tsf-stone); font-weight: 700;
  margin-bottom: 2px;
}
.q-coach p { font-size: .9rem; line-height: 1.45; color: var(--tsf-ink-soft); margin: 0; }
.q-coach b { color: var(--tsf-graphite); }

/* ── Sections ────────────────────────────────────────────────────── */
.q-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-block: 26px 12px;
}
.q-section-h h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.q-section-h a { font-size: .8125rem; font-weight: 600; color: var(--tsf-sky); text-decoration: none; }

/* ── Forms ───────────────────────────────────────────────────────── */
.q-field { display: block; margin-bottom: 16px; }
.q-field > span {
  display: block; font-size: .75rem; font-weight: 700;
  color: var(--tsf-ink-soft); margin-bottom: 6px;
  letter-spacing: .04em; text-transform: uppercase;
}
.q-field input, .q-field select, .q-field textarea {
  width: 100%; min-height: 48px;
  padding-block: 10px; padding-inline: 14px;
  border: 1.5px solid var(--tsf-border); border-radius: var(--tsf-radius-sm);
  background: var(--tsf-white); color: var(--tsf-graphite);
  font-family: var(--tsf-font); font-size: 1rem;
  transition: border-color var(--tsf-fast) var(--tsf-ease);
}
.q-field input:focus, .q-field select:focus, .q-field textarea:focus {
  outline: none; border-color: var(--tsf-sky);
  box-shadow: 0 0 0 3px rgba(226,103,12,.14);
}
.q-form-errors {
  background: #FFF5F4; border: 1px solid var(--tsf-danger);
  color: var(--tsf-danger); border-radius: var(--tsf-radius-sm);
  padding: 10px 14px; font-size: .85rem; margin-bottom: 16px;
}

/* ── Empty state: spark + one line + one action ──────────────────── */
.q-empty { text-align: center; padding-block: 48px 56px; padding-inline: 16px; }
.q-empty .q-spark { width: 34px; height: 34px; color: var(--tsf-ember-soft); background: var(--tsf-sky); opacity: .5; }
.q-empty p { color: var(--tsf-ink-soft); margin: 14px 0 18px; font-size: 1rem; }

/* ── Motion: staggered rise for section-level elements ───────────── */
@keyframes q-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.q-rise { animation: q-rise .55s var(--tsf-ease) both; }
.q-rise-1 { animation-delay: 60ms; } .q-rise-2 { animation-delay: 120ms; }
.q-rise-3 { animation-delay: 180ms; } .q-rise-4 { animation-delay: 240ms; }
.q-rise-5 { animation-delay: 300ms; } .q-rise-6 { animation-delay: 360ms; }

/* ── Focus + reduced motion (accessibility floor) ────────────────── */
.q-btn:focus-visible, .qnav-icon:focus-visible, .qnav-avatar:focus-visible,
.q-chip:focus-visible, .q-row:focus-visible, a:focus-visible {
  outline: 2px solid var(--tsf-sky); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .q-rise, .qnav-menu.open { animation: none !important; }
  .q-btn, .q-bar > i { transition: none !important; }
}

/* ── Legacy safety net: keep old container padded on phone ───────── */
.container { padding-inline: max(16px, env(safe-area-inset-left)); }
@media (max-width: 480px) {
  h1 { overflow-wrap: break-word; }
}