/* OUSOS Classroom — neon identity: a deep-black shell (lesson shelf + projector stage) lit by one
   cyan → blue → violet → magenta → orange spectrum. The book pages themselves stay white paper. */
:root {
  --paper: #FFFFFF;
  --black: #000000;
  --ground: #050720;       /* brand dark ground */
  --surface: #0B0E26;      /* tiles, bar */
  --surface-hi: #12163A;
  --edge: rgba(255, 255, 255, .09);
  --edge-hi: rgba(255, 255, 255, .18);
  --text: #F3F5FF;
  --text-dim: #A9B1D6;     /* 8.6:1 on --surface */
  --ink: #050720;          /* book ink inside slides */
  --blue: #1570FF;
  --violet: #8A22C9;
  --violet-deep: #6A1BA8;
  --violet-tint: #F4EAFB;
  --lavender: #D9CCFF;
  --c-cyan: #22D3EE;
  --c-blue: #3D8BFF;
  --c-violet: #A64DFF;
  --c-magenta: #F23DB0;
  --c-orange: #FF8A2A;
  --spectrum: linear-gradient(90deg, var(--c-cyan) 0%, var(--c-blue) 25%, var(--c-violet) 50%, var(--c-magenta) 75%, var(--c-orange) 100%);
  --neon: var(--spectrum);
  --f-en: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --f-ar: "Noto Kufi Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--black); scrollbar-color: #2A2F5C var(--black); }
body { margin: 0; background: var(--black); color: var(--text); font-family: var(--f-en); font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 3px; }
::selection { background: rgba(166, 77, 255, .45); color: #fff; }
button { font: inherit; cursor: pointer; }

/* ---------------- Home ---------------- */
.home { min-height: 100%; position: relative; isolation: isolate; overflow-x: clip;
  background:
    radial-gradient(60rem 34rem at 92% -8%, rgba(242, 61, 176, .16), transparent 70%),
    radial-gradient(52rem 30rem at -6% 4%, rgba(34, 211, 238, .14), transparent 70%),
    var(--black); }
.home-top .inner, .hero .inner, .home-main { max-width: 1240px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.home-top .inner { padding-block: 22px 6px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* the official logo, unaltered, on a white plate (its navy tagline disappears on black) */
.plate { display: inline-block; background: var(--paper); border-radius: 14px; padding: 12px 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 14px 40px -12px rgba(61, 139, 255, .45); }
.logo { height: 68px; width: auto; display: block; }
.home-top .label { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.home-top .label b { color: var(--text); font-weight: 700; }

.hero .inner { padding-block: 34px 8px; display: grid; gap: 10px; }
.hero .ar-title { font-family: var(--f-ar); font-weight: 700; font-size: clamp(38px, 7.2vw, 84px); line-height: 1.55; direction: rtl; text-align: start; margin: 0; padding-block: .06em; justify-self: end; max-width: 100%; width: fit-content;
  background: linear-gradient(270deg, var(--c-cyan), var(--c-blue) 28%, var(--c-violet) 55%, var(--c-magenta) 80%, var(--c-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 28px rgba(166, 77, 255, .35)); }
.hero h1 { margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.hero p { margin: 0; color: var(--text-dim); font-size: clamp(16px, 1.6vw, 18px); max-width: 60ch; }
/* the signature: one glossy neon tube, zig-zagging like the brand mark */
.ribbon { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.ribbon .tube, .ribbon .glow, .ribbon .shine { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ribbon .tube, .ribbon .glow, .ribbon .shine { stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .15s forwards; }
  .ribbon .shine { animation-delay: .35s; }
  .hero .ar-title { animation: glowIn 1.1s var(--ease) both; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.home-main { padding-block: 26px 56px; display: grid; gap: 28px; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; min-width: 0;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface)); border: 1px solid var(--edge); border-radius: 16px; padding: 18px 18px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) 80px; grid-template-rows: auto auto 1fr auto; column-gap: 12px; min-height: 176px;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c, var(--c-blue)); box-shadow: 0 0 18px var(--c, var(--c-blue)); opacity: .9; }
.tile:hover { border-color: color-mix(in srgb, var(--c, var(--c-blue)) 70%, transparent); transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c, var(--c-blue)) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.06); }
.tile:active { transform: translateY(-1px); }
.tile:focus-visible { outline: 3px solid var(--c, var(--c-cyan)); outline-offset: 3px; }
.tile .where { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.tile .num { font-size: 48px; font-weight: 700; line-height: 1; color: var(--c, var(--c-blue)); font-variant-numeric: tabular-nums; margin-top: 8px; text-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--c-blue)) 55%, transparent); }
/* the book's illustrations are drawn for white paper, so they sit on a small paper disc */
.tile .pic { grid-column: 2; grid-row: 2 / 4; align-self: center; width: 80px; height: 80px; object-fit: contain; box-sizing: border-box; padding: 10px; background: var(--paper); border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--c-blue)) 35%, transparent); transition: transform .25s var(--ease); }
.tile:hover .pic { transform: scale(1.06) rotate(-3deg); }
.tile .title { grid-column: 1 / -1; font-size: 18px; font-weight: 700; line-height: 1.25; margin-top: 12px; color: var(--text); text-wrap: balance; }
.tile .ar { grid-column: 1 / -1; font-family: var(--f-ar); font-size: 16px; color: var(--lavender); direction: rtl; text-align: start; line-height: 1.8; margin-top: 4px; }
.tile.guide { --c: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(166, 77, 255, .35), transparent 60%), linear-gradient(160deg, #0E1F55, #170B3A 60%, #2A0A33); border-color: rgba(255,255,255,.16); }
.tile.guide::before { background: var(--spectrum); box-shadow: 0 0 20px rgba(166, 77, 255, .8); }
.tile.guide .num { font-size: 34px; color: #fff; text-shadow: 0 0 24px rgba(166, 77, 255, .8); }
.tile.guide .where, .tile.guide .ar { color: var(--lavender); }
.keys { color: var(--text-dim); font-size: 15px; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.keys kbd { font: 700 13px var(--f-en); border: 1px solid var(--edge-hi); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; background: var(--surface-hi); color: var(--text); }
@media (hover: none) { .keys { display: none; } }

/* ---------------- Presenter ---------------- */
.deck { position: fixed; inset: 0; color: var(--text); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 4px auto minmax(0, 1fr) auto;
  background: radial-gradient(70% 60% at 0% 0%, rgba(34, 211, 238, .10), transparent 70%), radial-gradient(70% 60% at 100% 100%, rgba(242, 61, 176, .10), transparent 70%), var(--black); }
.deck .progress { grid-row: 1; grid-column: 1; background: rgba(255,255,255,.07); overflow: hidden; }
.deck .progress i { display: block; height: 100%; width: 0; background: var(--spectrum); background-size: 100vw 100%; box-shadow: 0 0 14px rgba(166, 77, 255, .8); transition: width .35s var(--ease); }
.viewport { grid-row: 3; grid-column: 1; position: relative; overflow: hidden; min-height: 0; }
.slide { position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: none; padding: 14px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
/* while a lesson is open, a sideways overscroll never becomes browser back/forward (Android Chrome, trackpads) */
html.presenting, html.presenting body { overscroll-behavior: none; }
/* the slides scroll and pan natively but never page-zoom: two-finger zoom is the viewer's own (it also works in full screen) */
.viewport, .slide { touch-action: pan-x pan-y; }
.slide[hidden] { display: none !important; }
.frame { position: relative; flex: none; background: var(--paper); border-radius: 12px; margin: auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -24px rgba(61, 139, 255, .45), 0 0 140px -50px rgba(242, 61, 176, .45); }
.stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; padding: 26px 34px 30px; box-sizing: border-box; color: var(--ink); }
.stage > .blk { display: flow-root; }
.stage > .blk + .blk { margin-top: 3mm; }
.stage .cont-head { opacity: .55; }
.measure { position: absolute; left: -10000px; top: 0; visibility: hidden; }
.slide.enter .frame { animation: rise .28s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide.enter .frame { animation: none; } .deck .progress i { transition: none; } .tile, .tile .pic { transition: none; } .tile:hover { transform: none; } .tile:hover .pic { transform: none; } }

.bar { grid-row: 4; grid-column: 1; display: flex; align-items: center; gap: 10px; padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  position: relative; background: rgba(8, 10, 30, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--spectrum); opacity: .55; }
.bar .t { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.bar .t b { color: var(--text); }
.bar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; box-sizing: border-box;
  background: rgba(255,255,255,.04); color: #fff; border: 1px solid var(--edge-hi); border-radius: 12px; padding: 8px 14px; font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s; }
.bar button:hover:not(:disabled) { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }
.bar button:disabled { opacity: .35; cursor: default; }
.bar #b-next:not(:disabled) { border-color: transparent; background: linear-gradient(135deg, #1570FF, #8A22C9); box-shadow: 0 6px 22px -8px rgba(61, 139, 255, .9); }
.bar #b-next:hover:not(:disabled) { background: linear-gradient(135deg, #2A7DFF, #9B33DA); }
.bar button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #8A22C9, #C2188E); box-shadow: 0 6px 22px -8px rgba(242, 61, 176, .9); }
.bar .ico { font-size: 20px; line-height: 1; }
.bar .count { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: #fff; min-width: 64px; text-align: center; }
@media (max-width: 760px) { .bar .t, #b-full { display: none; } .bar { justify-content: space-between; gap: 6px; } }

/* zoom control: in the bottom bar, or in the header row on narrow phones */
.zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--edge-hi); border-radius: 13px; background: rgba(255,255,255,.04); }
.deck .zoom button { min-height: 40px; min-width: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; font-size: 18px; line-height: 1; }
.deck .zoom #z-reset { font-size: 14px; min-width: 56px; font-variant-numeric: tabular-nums; }
.deck.zoomed .zoom #z-reset { color: var(--c-cyan); }
.rhead { grid-row: 2; grid-column: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px)); background: rgba(8, 10, 30, .92); border-bottom: 1px solid var(--edge); }
.rhead .t { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.rhead .t b { color: var(--text); }

/* reader: the page spans the screen edge to edge, the text keeps book size and the page scrolls down */
.deck.reader .slide { padding: 6px max(6px, env(safe-area-inset-right, 0px)) 6px max(6px, env(safe-area-inset-left, 0px)); }
.deck.reader .frame { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 60px -30px rgba(61, 139, 255, .5); }
.deck.reader .stage:not(.measure) { padding: 18px 16px 28px; }
@media (max-width: 480px) { .bar .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bar button { padding: 8px 12px; } .bar .count { min-width: 52px; font-size: 14px; } }

/* Narrow phones: the book's multi-column layouts (built for a printed page / projector) re-flow into fewer columns,
   in the same reading order, so the page fits the screen at book size. Lessons themselves are never edited. */
.deck.narrow .stage:not(.measure) .cards, .deck.narrow .stage:not(.measure) .cards.stack,
.deck.narrow .stage:not(.measure) .sound-list, .deck.narrow .stage:not(.measure) .price-rows, .deck.narrow .stage:not(.measure) .num-charts,
.deck.narrow .stage:not(.measure) .guide-glance, .deck.narrow .stage:not(.measure) .dialogue, .deck.narrow .stage:not(.measure) .dialogue.compact,
.deck.narrow .stage:not(.measure) .dialogue .turns, .deck.narrow .stage:not(.measure) .letter-intro, .deck.narrow .stage:not(.measure) .guide-key { grid-template-columns: minmax(0, 1fr); }
.deck.narrow .stage:not(.measure) .points, .deck.narrow .stage:not(.measure) .prices, .deck.narrow .stage:not(.measure) .write-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck.narrow .stage:not(.measure) .match .row, .deck.narrow .stage:not(.measure) .syllables, .deck.narrow .stage:not(.measure) .num-grid, .deck.narrow .stage:not(.measure) .stall .goods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deck.narrow .stage:not(.measure) .alphabet, .deck.narrow .stage:not(.measure) .digit-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.deck.narrow .stage:not(.measure) .letter-row, .deck.narrow .stage:not(.measure) .guide-entry, .deck.narrow .stage:not(.measure) .guide-entry.long { grid-template-columns: 26mm minmax(0, 1fr); }
.deck.narrow .stage:not(.measure) .letter-row > :nth-child(n+3), .deck.narrow .stage:not(.measure) .guide-entry > :nth-child(n+3) { grid-column: 1 / -1; }
.deck.narrow .stage:not(.measure) .words, .deck.narrow .stage:not(.measure) .in-word, .deck.narrow .stage:not(.measure) .letter-strip, .deck.narrow .stage:not(.measure) .letter-strip .letters, .deck.narrow .stage:not(.measure) .spot, .deck.narrow .stage:not(.measure) .digits, .deck.narrow .stage:not(.measure) .phone-no { flex-wrap: wrap; row-gap: 3mm; }
.deck.narrow .stage:not(.measure) .words { column-gap: 8mm; }
.deck.narrow .stage:not(.measure) .tri .ar, .deck.narrow .stage:not(.measure) :is(.words, .in-word) > .ar { white-space: normal; }
.deck.narrow .stage:not(.measure) .lesson-head { flex-wrap: wrap; }
.deck.narrow .stage:not(.measure) table.wide-table { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior: none;
  background: linear-gradient(90deg, #fff 30%, transparent) left / 24px 100% local no-repeat, linear-gradient(270deg, #fff 30%, transparent) right / 24px 100% local no-repeat,
    linear-gradient(90deg, rgba(5, 7, 32, .18), transparent) left / 10px 100% scroll no-repeat, linear-gradient(270deg, rgba(5, 7, 32, .18), transparent) right / 10px 100% scroll no-repeat; }
.deck.narrow .stage:not(.measure) .num-panel { grid-template-columns: repeat(2, auto); justify-content: space-around; }
.deck.narrow .stage:not(.measure) .num-panel > .note { grid-column: 1 / -1; }
.deck.narrow .stage:not(.measure) .hw-row { grid-template-columns: 15mm minmax(0, 1fr); }
.deck.narrow .stage:not(.measure) .hw-letters span { width: 12mm; }
.deck.narrow .stage:not(.measure) .tick-grid :is(th, td) { padding: 1mm 1.2mm; }
.deck.narrow .stage:not(.measure) .guide-table :is(th, td) { padding-inline: 1.5mm; }
.deck.narrow .stage:not(.measure) .guide-table.pairs td, .deck.narrow .stage:not(.measure) .guide-table .eg { white-space: normal; }

/* Show / hide answer (inside the scaled slide, so it grows with the text) */
.ans { margin: 1.2mm 0 2mm; display: grid; gap: 1.5mm; justify-items: start; }
/* answers written into the learner's own blanks, boxes and cells */
.ans-slot { cursor: pointer; }
.ans-slot:not(.shown):hover { background: var(--violet-tint); }
.ans-slot.shown { background: var(--violet-tint); border-color: var(--violet) !important; }
.blank.ans-slot.shown { width: auto; min-width: 16mm; padding: 0 1.2mm; border-bottom-color: var(--violet); }
.write-line.ans-slot.shown { height: auto; min-height: 8mm; display: flex; align-items: flex-end; }
.fill { color: var(--violet-deep); font-weight: 700; font-family: var(--f-en); font-size: inherit; line-height: inherit; white-space: nowrap; unicode-bidi: isolate; animation: pop .18s ease-out; }
.fill-ar { font-family: "Noto Naskh Arabic", serif; font-weight: 700; direction: rtl; }
.answer.ans-slot.shown .fill, span.box.ans-slot.shown .fill { display: block; text-align: center; font-size: 12pt; line-height: inherit; }
td.ans-slot.shown .fill { white-space: normal; }
.write-line.ans-slot.shown:has(.fill-ar) { justify-content: flex-end; }   /* Arabic is written from the right */
.write-line .fill-ar { font-size: 17pt; line-height: 1.7; }
/* visual marks: drawn in the answer violet, never in the book's own blue */
.mk { animation: pop .18s ease-out; }
.mk-circle { outline: 0.7mm solid var(--violet); outline-offset: 0.6mm; border-radius: 50%; }
.mk-box { outline: 0.7mm solid var(--violet); outline-offset: 0.6mm; border-radius: 1mm !important; }
.mk-highlight { background: var(--violet-tint) !important; box-shadow: 0 0 0 0.6mm var(--violet); border-radius: 1.5mm; }
.mk-word { display: inline-block; padding: 0 1mm; }
.spot .mk-circle, .spot .mk-box { color: var(--violet-deep); }
.mk-host { position: relative; }
.mk-badge { position: absolute; z-index: 2; font: 700 11pt/1.2 var(--f-en); color: #fff; background: var(--violet); border-radius: 99px; padding: 0.4mm 2mm; white-space: nowrap; animation: pop .18s ease-out; pointer-events: none; }
.mk-tick, .mk-cross { top: -2mm; right: -2mm; min-width: 6mm; text-align: center; font-size: 12pt; padding: 0.4mm 1.4mm; }
.mk-label { left: 50%; top: 100%; transform: translate(-50%, 0.8mm); font-size: 10pt; }
.mk-label[dir="rtl"] { font-family: "Noto Naskh Arabic", serif; font-size: 13pt; }
/* inside letter rows the book styles every span as a big round letter: keep badges small, and make room under the row */
.spot span.mk-badge { font: 700 10pt/1.2 var(--f-en); width: auto; border: 0; border-radius: 99px; padding: 0.4mm 1.6mm; }
.spot span.mk-badge[dir="rtl"] { font-family: "Noto Naskh Arabic", serif; font-size: 13pt; }
.spot:has(.mk-label) { padding-bottom: 8mm; }
.mk-host-write { color: inherit; }
.mk-write { display: block; text-align: center; font-size: 1em; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fill, .mk, .mk-badge { animation: none; } }
.ans-btn { border: 0.45mm solid var(--violet); color: var(--violet-deep); background: var(--paper); border-radius: 99px; padding: 1.2mm 4mm; font: 700 10pt var(--f-en); transition: background .15s, color .15s, box-shadow .15s; }
.ans-btn:hover { box-shadow: 0 0 0 1mm rgba(138, 34, 201, .15); }
.ans-btn:focus-visible { outline: 0.7mm solid var(--blue); outline-offset: 0.6mm; }
.ans-btn[aria-expanded="true"] { background: linear-gradient(135deg, #8A22C9, #C2188E); border-color: transparent; color: #fff; }
.ans-box { border-left: 1.2mm solid var(--violet); background: var(--violet-tint); border-radius: 0 2mm 2mm 0; padding: 2mm 4mm; font-size: 11pt; line-height: 1.5; color: var(--ink); white-space: pre-line; }
.ans-box .src { display: block; font-size: 8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-deep); margin-bottom: .5mm; }
.loading, .error { color: var(--text); font-size: 20px; }
.loading::before { content: ""; display: block; width: 160px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--spectrum); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none; } }