/* ════════ VOLURR ACADEMY — PAGE (owner brief 2026-08-06: «تصميم ديزاين صفحه كامل») ════════ THE ONE SENTENCE: the Academy should read like the reading room of an institution — a flat, quiet, tabular study desk where a curriculum is laid out plainly — not like a game that hands out badges. Same family as the AGI News band and the Analyst Center body, which already solved this exact problem (ranked progression with tiers) institutionally. EVERY selector in this file is scoped to #v-academy or to .acd-modal, and uses the acd- prefix. That is not style preference, it is a hard constraint discovered by measurement: the OLD academy classes are unscoped globals and other sections are already painted by them — .actabs / .actab -> mmap.js, reports.js, rvil-core.js, market.css, mmap-intel.css .acl-* (modal) -> mmap.js, watchlist.js, reports.js Restyling those would silently redesign Market Map, Watchlist, Reports and the Relative-Value Lab. So the Academy moves to its own scoped namespace and leaves the shared ones exactly where they are. WHY THE OLD DESIGN GOES — measured in the browser, not asserted: · the hero ate 40% of the fold (288px of 720) and the first real lesson began at 539px, so three quarters of the first screen passed before a learner saw one lesson, · the page used 920px of a 1280px viewport, · the hero gradient computed BYTE-IDENTICAL in light and dark (rgb(26,14,31)→rgb(126,19,19)) while the page background flipped rgb(7,10,18)→rgb(238,240,244) — a near-black slab on a light page, · rank colours were six raw hex literals injected from JS as inline style=, theme-blind by construction, and they made #26d07c GREEN the decorative identity of every new user — a direct break of the colour law, where green and red mean price direction and nothing else. Rank identity here is STATE, not hue: locked = muted, in progress = crimson outline, complete = crimson tint. One brand colour, three states, legible in both themes. ──── */ /* ── 0 · THE DECLARED SCALES ───────────────────────────────────────────────────────────────────── Counted in this file before the pass: 10 corner radii, 14 type sizes, 8 icon sizes and 16 distinct raw padding values. A terminal does not have fourteen type sizes; it has a scale, and every rule picks a step from it. Nothing below is a redesign — each step was chosen to sit on top of the cluster it replaces, so the largest single move anywhere in the file is 2px and almost all are 0 or 1px. The per-rule moves are listed in the pass report, not hidden here. Both scopes carry the tokens, because the lesson dialog is NOT inside #v-academy: academy.js stamps .acd-modal on #modalBox, which lives at the end of . A token block on #v-academy alone would simply not reach it — that is the same blind spot that let the icon defect below through. */ #v-academy,.acd-modal{ /* radius — 6 steps (was 10 raw values) */ --acd-r1:4px; /* meters. Their own height clamps them, so 3px and 4px drew identically anyway */ --acd-r2:8px; /* square marks, 26–34px: rank glyph, lesson number, day cell, section mark */ --acd-r3:11px; /* rows, tiles, chips, buttons — everything a finger lands on */ --acd-r4:14px; /* the header band and the tab strip */ --acd-r5:16px; /* the dialog shell */ --acd-rp:999px; /* pills. 20px on a 35px-tall pill was already a full round; this says so */ /* type — 7 steps (was 14) */ --acd-f1:10px; /* micro: day letters, tile captions, the scope qualifier */ --acd-f2:11.5px; /* meta: sub-line, rank ranges, badges, bench captions, the standing notice */ --acd-f3:12.5px; /* body-small: lesson and library titles, terms, section headings */ --acd-f4:13px; /* controls: tabs, the CTA, counters, the lesson lead */ --acd-f5:14px; /* prose and rank names */ --acd-f6:16px; /* figures */ --acd-f7:17px; /* the page title, and the rail's headline figure */ /* icon — 4 steps (was 8) */ --acd-i1:13px; /* inside a 26px mark */ --acd-i2:15px; /* the floor: an icon sitting inline with text */ --acd-i3:18px; /* inside a 32–34px mark */ --acd-i4:22px; /* the dialog crest, a 50px chip — see the floor note below */ /* spacing — 9 steps on a 2px rhythm (was 16 raw padding values) */ --acd-s1:4px; --acd-s2:6px; --acd-s3:8px; --acd-s4:10px; --acd-s5:12px; --acd-s6:14px; --acd-s7:16px; --acd-s8:20px; --acd-s9:24px; /* one focus treatment for the whole section — section 1 below */ --acd-focus:2px solid var(--gold); --acd-focus-off:2px; /* the tab strip's edge affordance — section 4. On the spacing scale, not beside it. */ --acd-tabfade:var(--acd-s6); /* DIRECTION-AWARE GRADIENT ANGLES — Article 13. linear-gradient(90deg,…) is physical: it points left→right in Arabic and Kurdish exactly as it does in English. The progress fill is a block whose inline start is the RIGHT edge under dir=rtl, so the fill grows leftward while its ramp still ran rightward — the bright end of the bar sat at the end the learner had not reached yet. These two angles mirror, and every gradient in the file takes its direction from them instead of hard-coding one. */ --acd-grad:90deg; /* along the inline axis */ --acd-grad-d:135deg; /* the diagonal used on raised controls */ } html[dir=rtl] #v-academy,html[dir=rtl] .acd-modal{--acd-grad:270deg;--acd-grad-d:225deg} #v-academy .acd-wrap{max-width:1180px;margin:0 auto;font-variant-numeric:tabular-nums} /* ── 0b · THE ICON FLOOR — a defensive base, added after a real defect reached the owner's screen ── An inline