/* ==========================================================================================
   THE ONE THEME OF MATH BY MO  —  web/theme.css
   ==========================================================================================
   Owned by the parent's design department (rows x568 and x570). Every colour, gradient, wash,
   radius, shadow, icon size and target size any page of the company draws comes from HERE, and
   from nowhere else. A company's design team builds its pages from these tokens; it does not
   define its own.

   HIS TWO DECISIONS, 2026-10-03:
     x568 (o-1003-0748-5cfa) — of the three variants the department built (design/x568-home-variants,
       commit 6b435de) he chose «ج · جريءٌ ومرح»: a vivid «today's lesson» banner on a drawn road, big
       doors for the sections, gradient badges.
     x570 (his answer to x569) — «لازم يكون في … ثيم معين للشركة كاملة … مينفعش ان الشركات كل واحده تكون
       شغالة بثيم لوحدها … ممكن بس نخلي الاشياء بتاعت الاطفال تكون ليها طريقة مختلفة لان مثلا السن الصغير
       هيحتاج رسومات اكتر او حجم ايقونات مختلف». So: ONE theme, and ONE young-ages branch of it
       (html[data-age="young"], set by the app for Kindergarten to Grade 2), below.

   HOW IT IS GUARDED. tools/theme-check.js reads this file every run: every token named in
   tools/theme-check.json exists in the light block, and every colour token of the light block
   exists in BOTH dark blocks with the SAME value in each (a second copy of a palette is a second
   copy of a fact, and the one that drifts is the one nobody looks at — the lesson of the old
   :root[data-theme="light"] block, which shipped #F4F6F8 for months); and every contrast pair in
   that file is computed from the values here, in light, in dark and in the young branch — 4.5:1
   for text, 3:1 for icons, bars and large text, every gradient stop tried, the worst counted. It
   refuses a colour written into web/index.html, and holds every other page's count where it is.

   THE RULE PER COLOUR (unchanged since the palette was first measured):
     base    fills, avatars, progress, icons    -> 3:1 on the card (WCAG 1.4.11)
     -text   whenever the colour tints TEXT     -> 4.5:1 on the card AND on its own -soft (1.4.3)
     -soft   the tinted ground behind -text
     on-     what sits on top of a filled base
   COLOUR NEVER CARRIES MEANING ALONE: every status also carries an icon or a word.

   WHERE THE LIGHT AND DARK PALETTES LIVE. Light is :root. Dark is written twice, because CSS
   cannot OR a media query with an attribute: once for a phone set to dark with no choice made
   in the app (:root:not([data-theme="light"]) — so a student who picks LIGHT on a dark phone
   stays light), once for an explicit dark choice. The two dark copies are held equal by the gate.
   ========================================================================================== */

/* x636 (his word 2026-10-09: «نعم، نزّله وضمّنه»): Cairo, the board's face, is OURS -- web/fonts/cairo.woff, cut from
   google/fonts ofl/cairo (OFL 1.1, web/fonts/Cairo-OFL.txt) to Arabic, Latin and their punctuation, weights 400 to 900,
   upright: 56,824 bytes. Served from our own origin, so no device of a child asks a third party for it. */
@font-face{font-family:"Cairo";src:url("fonts/cairo.woff") format("woff");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  /* x235 — the graphing calculator's six row colours (Desmos's) and each one's boundary line, one step
     darker so an inequality's edge keeps 3:1 over its own 0.4 region (tools/_mx-shading-contrast-2026-10-29.json) */
  --mx-c1:#2D70B3; --mx-c2:#C74440; --mx-c3:#388C46; --mx-c4:#6042A6; --mx-c5:#E07B1A; --mx-c6:#157A72;
  --mx-c1-edge:#28649F; --mx-c2-edge:#A53835; --mx-c3-edge:#2C6F37; --mx-c4-edge:#6042A6; --mx-c5-edge:#925011; --mx-c6-edge:#126B64;
  /* ---- the ground and the paper ----
     x636 (his ruling 2026-10-09, option A of design/x636-brand-board): ONE colour the app is known by, so the
     warm grey ground (#E9E9E1, x278) became the board's green-grey and the quiet surfaces and borders followed it;
     --text-3 stays #56616D. The cards are told from the ground by their border and shadow, as on the board.
     His word 2026-10-17 20:32 after living with the green since v136 (o-1017-1632-a24f): «خلاص خلينا في الهوية
     الزرقاء» -- option B, the board's one blue. The ground is the board's #F2F6FB; the board drew four of its
     neutrals in blue, and the rest move the way those four did (the green lead g - r goes to the blue channel). */
  --bg:#F2F6FB; --surface:#FFFFFF; --surface-2:#ECF2F9; --surface-3:#E3EBF3;
  --border:#DAE3EE; --border-strong:#C6D3E1;
  --text:#17212B; --text-2:#5A6673; --text-3:#56616D;

  /* ---- brand: the app's identity and its primary action. Nothing else. ---- */
  --brand:#1D5FD1; --brand-text:#1A56BE; --brand-strong:#174CB0;
  --brand-grad-a:#174CB0; --brand-grad-b:#123E8F;
  --brand-soft:#E6EFFB; --on-brand:#FFFFFF;

  /* ---- status: the name states the meaning ---- */
  --ok:#16A34A;     --ok-text:#137A38;     --ok-soft:#E3F3E8;     --on-ok:#FFFFFF;
  --warn:#F59E0B;   --warn-text:#A3540A;   --warn-soft:#FDF1DC;   --on-warn:#3D2A06;
  --danger:#E5484D; --danger-text:#C81E25; --danger-soft:#FCE9E9; --on-danger:#FFFFFF;
  --info:#3B82F6;   --info-text:#1D63D8;   --info-soft:#E6EFFB;   --on-info:#FFFFFF;
  /* the far ends of the two coloured sign-in marks (the refusal and the lock screens) */
  --danger-deep:#A13236; --warn-deep:#C77B0A;

  /* ---- THE SECTION HUES (x568, variant C). Blue is the app's own colour since 2026-10-17 (x636, option B);
     a section keeps its hue, and on the board it lives in the section's icon. A child knows the
     section by its colour before he reads its name: blue his lessons, orange his games, violet his
     ranking, amber his books and their roads. ---- */
  --les:#2563EB;   --les-text:#1D4ED8;   --les-soft:#E8EEFD;   --les-deep:#1E40AF;   --on-les:#FFFFFF;
  --game:#E8622A;  --game-text:#B93C0B;  --game-soft:#FDEEE6;  --game-deep:#B93C0B;  --on-game:#FFFFFF;
  --board:#7C3AED; --board-text:#6D28D9; --board-soft:#F1EBFE; --board-deep:#5B21B6; --on-board:#FFFFFF;
  --cur:#C77C02;   --cur-text:#8F5400;   --cur-soft:#FBF1DE;   --cur-deep:#8F5400;   --on-cur:#FFFFFF;

  /* ---- THE SIX STRANDS OF THE GAMES (x570, the parent's pages moved onto this theme). A game belongs to a
     strand of mathematics -- number, operations, fractions, geometry, algebra, data -- and the strand is
     drawn in three places only (its chip, its tile's rail, its play bar); it never tints a sentence. A
     strand is not a section of the app, so it has hues of its own rather than borrowing a section's.
     The values are web/games.html's, measured there before they moved here: base for fills and bars,
     -text for the glyph on -soft and the words of a finished tile, -soft behind them, on-strand on a
     filled chip. Operations keeps the house teal, on purpose. ---- */
  --strand-num:#2563EB;  --strand-num-text:#1D4ED8;  --strand-num-soft:#E4EDFD;
  --strand-ops:#0E8A72;  --strand-ops-text:#0B6E5B;  --strand-ops-soft:#E2F3EE;
  --strand-frac:#7C3AED; --strand-frac-text:#6B21D6; --strand-frac-soft:#EEE7FD;
  --strand-geo:#DC2626;  --strand-geo-text:#B91C1C;  --strand-geo-soft:#FCE9E9;
  --strand-alg:#B45309;  --strand-alg-text:#92400E;  --strand-alg-soft:#FBEEDC;
  --strand-data:#BE185D; --strand-data-text:#9D174D; --strand-data-soft:#FCE7F1;
  --on-strand:#FFFFFF;

  /* ---- money, on the owner's page (web/admin.html): what he paid, what the company owes him, what came
     in. Not a warning and not the curricula's amber, so a name of its own; its values are the ones
     admin.html drew. ---- */
  --money:#9A5B13; --money-text:#9A5B13; --money-soft:#F7ECDD;

  /* ---- a chart's categories, in a fixed order (a pie's slices, never cycled: a 7th folds into «other»).
     Each is a hue the theme already measures on the card in light and in dark, so a chart adds no colour. */
  --chart-1:var(--les); --chart-2:var(--game); --chart-3:var(--brand); --chart-4:var(--cur);
  --chart-5:var(--board); --chart-6:var(--strand-data); --chart-other:var(--text-3);

  /* ---- the gradient badges: a white glyph on a deep pair, the SAME in both themes ---- */
  --badge-brand-a:#1D5FD1; --badge-brand-b:#123E8F;
  --badge-les-a:#3573EE;   --badge-les-b:#1E40AF;
  --badge-game-a:#D9541C;  --badge-game-b:#A8360A;
  --badge-board-a:#8B5CF6; --badge-board-b:#5B21B6;
  --badge-cur-a:#A86A00;   --badge-cur-b:#7A4A00;
  --on-badge:#FFFFFF;
  --gloss:rgba(255,255,255,.14);

  /* ---- «درسُ اليوم»: the banner on a drawn road, the same in both themes. x636: the board's band in place of
     variant C's green-blue-violet -- one colour the app is known by; option B (2026-10-17), #123E8F to #1D5FD1. ---- */
  --today-a:#123E8F; --today-b:#174CB0; --today-c:#1D5FD1; --on-today:#FFFFFF;
  --today-chip:rgba(0,0,0,.2);
  --today-track:rgba(0,0,0,.24); --today-fill:#FFFFFF;
  /* ---- THE BAND (x636): the colour the top of every screen is drawn in -- the bar, its clock line and a page's
     header -- option B since 2026-10-17, the board's #123E8F to #1D5FD1, the same in both themes, white on it ---- */
  --band-a:#123E8F; --band-b:#1D5FD1; --on-band:#FFFFFF;
  --band-soft:rgba(255,255,255,.15); --band-line:rgba(255,255,255,.26);
  /* its one button: dark ink on a warm amber */
  --go-a:#FCC24A; --go-b:#F59E0B; --on-go:#3D2A06; --go-gloss:rgba(255,255,255,.35);
  /* the road drawn on it: a pale band, a dotted line, a white stop for every idea done (its tick in
     the banner's own blue), a warm pin where he stands, a ring for what comes next */
  --road-band:rgba(255,255,255,.28); --road-line:#FFFFFF; --road-done:#FFFFFF; --road-tick:#1A56BE;
  --road-pin:#FCC24A; --road-pin-eye:#FFFFFF; --road-next:#FFFFFF; --road-later:rgba(255,255,255,.75);

  /* ---- the student avatars: white initials on a deep fill ---- */
  --av-1:#0B6E5B; --av-2:#6D46C7; --av-3:#2E6C97; --av-4:#A64632;
  --av-5:#8A6B00; --av-6:#3B7A57; --av-7:#B14D8E; --av-8:#3E6BB0;
  --on-avatar:#FFFFFF;

  /* ---- what sits over the page ---- */
  --scrim:rgba(10,16,22,.5);
  --flag-edge:rgba(0,0,0,.22);
  --video-bg:#000000;

  /* ---- the printed report: paper and ink, whatever the screen's theme ---- */
  --print-paper:#FFFFFF; --print-ink:#000000; --print-brand:#1D5FD1; --print-meta:#444444;
  --print-rule:#BBBBBB; --print-head:#EFF3F8; --print-foot:#666666;

  /* ---- the browser's own bar. A <meta name="theme-color"> cannot read a CSS variable, so the page
     writes these literally; tools/theme-check.js holds the page's literals equal to these (x709: the 8th Grade
     Math app's, its icon's own violet, design/x709-g8-app-icon). ---- */
  --chrome-app:#1D5FD1; --chrome-sat:#1E3A8A; --chrome-g8:#2A1B7A;

  /* ---- the gradients and the washes, built from the colours above ---- */
  --grad-brand:linear-gradient(135deg,var(--brand-grad-a),var(--brand-grad-b));
  --grad-band:linear-gradient(180deg,var(--band-a),var(--band-b));
  --grad-today:linear-gradient(135deg,var(--today-a) 0%,var(--today-b) 62%,var(--today-c) 100%);
  --grad-go:linear-gradient(180deg,var(--go-gloss),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--go-a),var(--go-b));
  --grad-lv:linear-gradient(90deg,var(--brand),var(--brand-strong));
  --grad-lv-rtl:linear-gradient(270deg,var(--brand),var(--brand-strong));
  --wash-brand:linear-gradient(160deg,var(--brand-soft) 0%,var(--surface) 85%);
  --wash-les:linear-gradient(160deg,var(--les-soft) 0%,var(--surface) 85%);
  --wash-game:linear-gradient(160deg,var(--game-soft) 0%,var(--surface) 85%);
  --wash-board:linear-gradient(160deg,var(--board-soft) 0%,var(--surface) 85%);
  --wash-cur:linear-gradient(160deg,var(--cur-soft) 0%,var(--surface) 85%);

  /* ---- older names kept as aliases, so every existing rule keeps working ---- */
  --accent:var(--brand); --accent-strong:var(--brand-strong);
  --accent-soft:var(--brand-soft); --on-accent:var(--on-brand);
  --lvl1:var(--danger); --lvl2:var(--warn); --lvl3:var(--info); --lvl4:var(--ok);
  --lvl1-soft:var(--danger-soft); --lvl2-soft:var(--warn-soft);
  --lvl3-soft:var(--info-soft); --lvl4-soft:var(--ok-soft);

  /* ---- depth ---- */
  --shadow:0 1px 2px rgba(16,24,32,.07),0 8px 22px rgba(16,24,32,.07);
  --shadow-lg:0 8px 30px rgba(16,24,32,.14);
  --shadow-today:0 12px 26px rgba(23,76,176,.30);
  --shadow-go:0 6px 14px rgba(0,0,0,.22);
  /* x869 · a 3D key (web/games.html): the white its face is lit toward and the dark its ledge falls toward. One value in
     every mode and palette -- the key's OWN colour (--brand-strong) is what changes -- so it keeps its depth in the dark. */
  --key-glint:#FFFFFF; --key-shade:#0A1630;
  /* a badge's shadow is its own hue: the page writes var(--shadow-badge-geo) color-mix(in srgb,var(--g2) 35%,transparent),
     because a token cannot read the --g2 of the element it lands on (it is resolved here, on :root) */
  --shadow-badge-geo:0 4px 10px;

  /* ---- x881 · THE KINDS OF A LESSON'S SECTIONS (design/x881-app-redesign, his words «تقسيماتها هيبقى ليها ألوان معينة لكل
     سيكشن»). The colour follows what a section IS, never where it stands (x873 3b.4): und the main questions -- the book's
     Examples, «فهم الدرس» -- blue; mas the sub-ideas, «إتقان الدرس», violet; sat the SAT station, navy with gold; hint
     gold; sol the worked solution, teal. Each is a MATERIAL (lt the lit edge, base the face, dk the shaded face, side the
     ledge under a 3D piece), the same in light and dark; a TILE (the face a white answer is written on: 4.5:1 or more for
     white on it and on dk, so a choice of 15px reads); and two READING colours (text, soft) that the dark blocks redefine.
     Every pair is measured in tools/theme-check.json; contrast.json of the design folder holds the board's 151. ---- */
  --s-und-lt:#78BCFF; --s-und:#2C7BEF; --s-und-dk:#1A55CC; --s-und-side:#123F9E; --s-und-tile:#1D5CD2;
  --s-und-text:#1A56BE; --s-und-soft:#E6F0FF; --s-und-soft-b:#C0DEFF;
  --s-mas-lt:#C4A0FF; --s-mas:#8550EE; --s-mas-dk:#6532CF; --s-mas-side:#46209C; --s-mas-tile:#7440DE;
  --s-mas-text:#6532CF; --s-mas-soft:#F0E8FF; --s-mas-soft-b:#E1CFFF;
  --s-sat-lt:#7393EE; --s-sat:#2B4CB2; --s-sat-dk:#1E3A8A; --s-sat-side:#132763; --s-sat-tile:#2B4CB2;
  --s-sat-text:#1E3A8A; --s-sat-soft:#E6ECFA; --s-sat-soft-b:#BECDF6;
  --s-hint-lt:#FFE57A; --s-hint:#FFC31C; --s-hint-dk:#E89400; --s-hint-side:#A06400; --s-hint-tile:#FFC31C;
  --s-hint-text:#7A4B00; --s-hint-soft:#FFF7DE; --s-hint-soft-b:#FFF1BB;
  --s-sol-lt:#64DCCB; --s-sol:#0D9086; --s-sol-dk:#0B746C; --s-sol-side:#06544E; --s-sol-tile:#0B746C;
  --s-sol-text:#0A6A63; --s-sol-soft:#DCF5F1; --s-sol-soft-b:#B2ECE4;
  /* the materials that are not a section: a right answer, a wrong one (coral, never a punishing red), the one action of a
     screen (his «Play»: orange-amber, a dark ink), where he stands (the pin), gold (a star, a padlock, a lamp) */
  --ok3-lt:#74D985; --ok3:#1E9B45; --ok3-dk:#167F38; --ok3-side:#0E5F29; --ok3-tile:#167F38;
  --no3-lt:#FF9094; --no3:#DE3F45; --no3-dk:#C21E26; --no3-side:#8E1419; --no3-tile:#C9272E;
  --go3-lt:#FFCB5C; --go3:#FFA328; --go3-dk:#F58A12; --go3-side:#B45A00; --on-go3:#3A1F02;
  --pin3-lt:#FFD25A; --pin3:#FFA51F; --pin3-dk:#EE7D0C; --pin3-side:#A85300;
  --gold3-lt:#FFE57A; --gold3:#FFC31C; --gold3-dk:#E89400; --gold3-side:#A06400;
  --on-coin:#FFFFFF; --tag-bg:#17305E; --on-tag:#FFFFFF;
  /* the road drawn from above, its paper and its roadside (trees, a sign, a ruler, a set square, a pencil): the same hues
     the x869 icons are drawn in, kept here so the machine writes none */
  --path-face:#FFFFFF; --path-edge:#C7D7EC; --path-dash:#C3D3E8; --path-shade:#9DB3D3;
  --paper-grid:#EEF5FD; --paper-line:#DCE8F7; --paper-stack:#E9EFF7;
  --leaf-lt:#A6E57E; --leaf:#46B653; --leaf-dk:#22873A; --trunk:#B17B48; --trunk-dk:#7A4E26;
  --rod-lt:#F4F8FC; --rod:#B7C5D6; --rod-dk:#8494A8; --eraser:#FF8FB4; --wood:#F4D8B0; --graphite:#3E4652;
  /* x881 phase 3 · THE GROUND OF x874 (his second ChatGPT picture: «تحفة، جذابة … مريحة للطالب»), the recipe the x869 games board
     and design/x881-app-redesign draw it with: a light gradient of the student's palette (a-b-c), four soft waves (w1-w4), the
     glass maths tools of the margins (glass-*), plus marks, the leaves of the bottom corners. The palettes below re-tint it. */
  --gnd-a:#EEF4FE; --gnd-b:#E6EFFD; --gnd-c:#DEE9FD; --gnd-w1:rgba(58,124,240,.30); --gnd-w2:rgba(166,196,248,.40); --gnd-w3:rgba(166,196,248,.45); --gnd-w4:rgba(166,196,248,.40); --gnd-plus:rgba(58,124,240,.12); --gnd-glass-line:rgba(46,99,192,.75); --gnd-glass-fill:rgba(58,124,240,.45); --gnd-leaf-0:rgba(58,124,240,.40); --gnd-leaf-1:rgba(166,196,248,.14); --gnd-vein:rgba(255,255,255,.5); --gnd-glass-op:.12;

  /* ---- corners ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --radius:16px; --radius-sm:11px;
  --r-badge:12px; --r-badge-lg:15px; --r-door:18px; --r-today:22px;

  /* ---- type. THE ARABIC FACE LEADS, and every face is on the device: a face fetched from a CDN puts
     a party in front of a child that web/privacy.html does not name. ---- */
  --font:"Cairo","SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI Variable Text","Segoe UI",
         system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --t-xs:11.5px; --t-sm:13px; --t-md:15px;  --t-lg:17px;
  --t-xl:21px; --t-2xl:27px;  --t-3xl:36px; --t-4xl:48px;
  --lh-tight:1.22; --lh-snug:1.35; --lh-body:1.6;
  --t-today:20px; --t-door:var(--t-md);

  /* ---- icons and targets ---- */
  --ic-nav:24px; --nav-pill-w:58px; --nav-pill-h:32px;
  --badge-sm:36px; --ic-badge-sm:20px;
  --badge-lg:48px; --ic-badge-lg:26px;
  --target-min:44px;
  --door-min-h:96px;
  --today-min-h:184px; --road-w:118px; --road-h:168px;
  /* what the young branch takes away or swaps (see below) */
  --say:block; --road-side:block; --road-strip:none;
}

/* ---- DARK: the phone is dark and nothing was chosen in the app ---- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  /* x235 — on the dark ground the boundary is one step LIGHTER, for the same 3:1 over its region */
  --mx-c1:#2D70B3; --mx-c2:#C74440; --mx-c3:#388C46; --mx-c4:#6042A6; --mx-c5:#E07B1A; --mx-c6:#157A72;
  --mx-c1-edge:#6294C6; --mx-c2-edge:#D46F6C; --mx-c3-edge:#62A46D; --mx-c4-edge:#8D77BF; --mx-c5-edge:#E48B35; --mx-c6-edge:#509B95;
  --bg:#0F1720; --surface:#17212B; --surface-2:#1E2A36; --surface-3:#25333F;
  --border:#2A3846; --border-strong:#374857;
  --text:#E7ECF1; --text-2:#9AA7B4; --text-3:#8A96A3;
  --brand:#5B97F5; --brand-text:#6BA5FF; --brand-strong:#6BA5FF;
  --brand-grad-a:#6BA5FF; --brand-grad-b:#5B97F5;
  --brand-soft:#152538; --on-brand:#04162E;
  --ok:#3FCB7A;     --ok-text:#3FCB7A;     --ok-soft:#10281A;     --on-ok:#05210F;
  --warn:#F5B33C;   --warn-text:#F5B33C;   --warn-soft:#2E2410;   --on-warn:#2A1D04;
  --danger:#FF6B6F; --danger-text:#FF6B6F; --danger-soft:#31191B; --on-danger:#2A0B0D;
  --info:#6BA5FF;   --info-text:#6BA5FF;   --info-soft:#152538;   --on-info:#04162E;
  --les:#5B8DEF;   --les-text:#8AB0F7;   --les-soft:#172440;   --les-deep:#2F5BC9;   --on-les:#04162E;
  --game:#FF8A57;  --game-text:#FFA47D;  --game-soft:#34190E;  --game-deep:#C2410C;  --on-game:#2A0E03;
  --board:#A98BFA; --board-text:#BCA6FC; --board-soft:#241B3D; --board-deep:#6D28D9; --on-board:#1A0B3B;
  --cur:#F2B544;   --cur-text:#F6C36A;   --cur-soft:#2E2410;   --cur-deep:#B97A06;   --on-cur:#2A1D04;
  --strand-num:#5B9DF9;  --strand-num-text:#8FBBFF;  --strand-num-soft:#16294A;
  --strand-ops:#37C6A6;  --strand-ops-text:#5FDCC0;  --strand-ops-soft:#0F3A31;
  --strand-frac:#B58BF5; --strand-frac-text:#C8A9F8; --strand-frac-soft:#2A2148;
  --strand-geo:#F5877E;  --strand-geo-text:#F8A49D;  --strand-geo-soft:#3E1F1D;
  --strand-alg:#F0B357;  --strand-alg-text:#F4C67F;  --strand-alg-soft:#3A2A12;
  --strand-data:#E86FA8; --strand-data-text:#F096C1; --strand-data-soft:#3B1A2C;
  --on-strand:#0F1720;
  --money:#E3B06A; --money-text:#E3B06A; --money-soft:#33260F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35); --shadow-lg:0 8px 30px rgba(0,0,0,.5);
  --shadow-today:0 12px 26px rgba(0,0,0,.45);
  /* x881 · the reading colours of the kinds, and the road's paper, in the dark (the materials stay) */
  --s-und-text:#8CC1FF; --s-und-soft:#15284A; --s-und-soft-b:#1D4584;
  --s-mas-text:#C6AAFF; --s-mas-soft:#271E45; --s-mas-soft-b:#483080;
  --s-sat-text:#AABEFF; --s-sat-soft:#1A2550; --s-sat-soft-b:#203372;
  --s-hint-text:#FFD877; --s-hint-soft:#2E2610; --s-hint-soft-b:#775D14;
  --s-sol-text:#62DCCB; --s-sol-soft:#0F3330; --s-sol-soft-b:#0E544E;
  --tag-bg:#E8EEF8; --on-tag:#10213F;
  --path-face:#253444; --path-edge:#34475B; --path-dash:#41566C; --path-shade:#05090E;
  --paper-grid:#1A2633; --paper-line:#243445; --paper-stack:#16212C;
  /* x881 phase 3 · the ground of x874, dark */
  --gnd-a:#0D1727; --gnd-b:#0F1A2E; --gnd-c:#101D34; --gnd-w1:rgba(58,124,240,.22); --gnd-w2:rgba(58,124,240,.14); --gnd-w3:rgba(58,124,240,.10); --gnd-w4:rgba(58,124,240,.14); --gnd-plus:rgba(166,196,248,.12); --gnd-glass-line:rgba(166,196,248,.6); --gnd-glass-fill:rgba(166,196,248,.18); --gnd-leaf-0:rgba(58,124,240,.30); --gnd-leaf-1:rgba(58,124,240,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;
}}
/* ---- DARK: chosen in the app (toggleTheme). Held equal to the block above by tools/theme-check.js. ---- */
:root[data-theme="dark"]{
  /* x235 — on the dark ground the boundary is one step LIGHTER, for the same 3:1 over its region */
  --mx-c1:#2D70B3; --mx-c2:#C74440; --mx-c3:#388C46; --mx-c4:#6042A6; --mx-c5:#E07B1A; --mx-c6:#157A72;
  --mx-c1-edge:#6294C6; --mx-c2-edge:#D46F6C; --mx-c3-edge:#62A46D; --mx-c4-edge:#8D77BF; --mx-c5-edge:#E48B35; --mx-c6-edge:#509B95;
  --bg:#0F1720; --surface:#17212B; --surface-2:#1E2A36; --surface-3:#25333F;
  --border:#2A3846; --border-strong:#374857;
  --text:#E7ECF1; --text-2:#9AA7B4; --text-3:#8A96A3;
  --brand:#5B97F5; --brand-text:#6BA5FF; --brand-strong:#6BA5FF;
  --brand-grad-a:#6BA5FF; --brand-grad-b:#5B97F5;
  --brand-soft:#152538; --on-brand:#04162E;
  --ok:#3FCB7A;     --ok-text:#3FCB7A;     --ok-soft:#10281A;     --on-ok:#05210F;
  --warn:#F5B33C;   --warn-text:#F5B33C;   --warn-soft:#2E2410;   --on-warn:#2A1D04;
  --danger:#FF6B6F; --danger-text:#FF6B6F; --danger-soft:#31191B; --on-danger:#2A0B0D;
  --info:#6BA5FF;   --info-text:#6BA5FF;   --info-soft:#152538;   --on-info:#04162E;
  --les:#5B8DEF;   --les-text:#8AB0F7;   --les-soft:#172440;   --les-deep:#2F5BC9;   --on-les:#04162E;
  --game:#FF8A57;  --game-text:#FFA47D;  --game-soft:#34190E;  --game-deep:#C2410C;  --on-game:#2A0E03;
  --board:#A98BFA; --board-text:#BCA6FC; --board-soft:#241B3D; --board-deep:#6D28D9; --on-board:#1A0B3B;
  --cur:#F2B544;   --cur-text:#F6C36A;   --cur-soft:#2E2410;   --cur-deep:#B97A06;   --on-cur:#2A1D04;
  --strand-num:#5B9DF9;  --strand-num-text:#8FBBFF;  --strand-num-soft:#16294A;
  --strand-ops:#37C6A6;  --strand-ops-text:#5FDCC0;  --strand-ops-soft:#0F3A31;
  --strand-frac:#B58BF5; --strand-frac-text:#C8A9F8; --strand-frac-soft:#2A2148;
  --strand-geo:#F5877E;  --strand-geo-text:#F8A49D;  --strand-geo-soft:#3E1F1D;
  --strand-alg:#F0B357;  --strand-alg-text:#F4C67F;  --strand-alg-soft:#3A2A12;
  --strand-data:#E86FA8; --strand-data-text:#F096C1; --strand-data-soft:#3B1A2C;
  --on-strand:#0F1720;
  --money:#E3B06A; --money-text:#E3B06A; --money-soft:#33260F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35); --shadow-lg:0 8px 30px rgba(0,0,0,.5);
  --shadow-today:0 12px 26px rgba(0,0,0,.45);
  /* x881 · the reading colours of the kinds, and the road's paper, in the dark (the materials stay) */
  --s-und-text:#8CC1FF; --s-und-soft:#15284A; --s-und-soft-b:#1D4584;
  --s-mas-text:#C6AAFF; --s-mas-soft:#271E45; --s-mas-soft-b:#483080;
  --s-sat-text:#AABEFF; --s-sat-soft:#1A2550; --s-sat-soft-b:#203372;
  --s-hint-text:#FFD877; --s-hint-soft:#2E2610; --s-hint-soft-b:#775D14;
  --s-sol-text:#62DCCB; --s-sol-soft:#0F3330; --s-sol-soft-b:#0E544E;
  --tag-bg:#E8EEF8; --on-tag:#10213F;
  --path-face:#253444; --path-edge:#34475B; --path-dash:#41566C; --path-shade:#05090E;
  --paper-grid:#1A2633; --paper-line:#243445; --paper-stack:#16212C;
  /* x881 phase 3 · the ground of x874, dark */
  --gnd-a:#0D1727; --gnd-b:#0F1A2E; --gnd-c:#101D34; --gnd-w1:rgba(58,124,240,.22); --gnd-w2:rgba(58,124,240,.14); --gnd-w3:rgba(58,124,240,.10); --gnd-w4:rgba(58,124,240,.14); --gnd-plus:rgba(166,196,248,.12); --gnd-glass-line:rgba(166,196,248,.6); --gnd-glass-fill:rgba(166,196,248,.18); --gnd-leaf-0:rgba(58,124,240,.30); --gnd-leaf-1:rgba(58,124,240,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;
}

/* ==========================================================================================
   THE YOUNG-AGES BRANCH — Kindergarten to Grade 2 (x570: «السن الصغير هيحتاج رسومات اكتر او حجم
   ايقونات مختلف»). The app sets html[data-age="young"] for a student whose grade is 2 or below
   (syncAgeBranch in web/index.html). The colours are the same theme; what changes is size and how
   much is said: bigger icons and bigger targets, more drawing (the banner's road becomes a wide strip
   under the lesson's name, with bigger stops), fewer words (the doors lose their second line, the
   banner its line of counts — the road already shows how far he is).
   ========================================================================================== */
html[data-age="young"]{
  --ic-nav:32px; --nav-pill-w:68px; --nav-pill-h:42px;
  --badge-sm:44px; --ic-badge-sm:26px;
  --badge-lg:66px; --ic-badge-lg:38px;
  --target-min:56px;
  --door-min-h:138px; --r-door:24px; --t-door:var(--t-lg);
  --today-min-h:0px; --r-today:26px; --t-today:24px;
  --say:none; --road-side:none; --road-strip:block;
}
/* A PHONE OF 360px OR LESS: the strip's badges step down, so his three numbers fit beside them (measured at
   320 in both languages: at 36px the streak ran 5px past its box). */
@media (max-width:360px){
  :root{ --badge-sm:30px; --ic-badge-sm:17px; }
  html[data-age="young"]{ --badge-sm:36px; --ic-badge-sm:21px; }
}

/* x729 · THE STUDENT'S COLOUR. His words, 2026-10-24 14:37 (o-1024-1047-3ab0): «عايز اخلي الطالب يكون معاه اكتر من اوبشن
   في الاختيار … عايزين اختيارات تمشي مع البنات واختيارات للاولاد». Five palettes besides the blue, of the BRAND tokens only, on
   <html data-palette="…">, which the app sets from daftar_palette as it sets data-theme from daftar_theme; blue is the
   default and carries no attribute. The sections' hues, ok/warn/danger and the surfaces do not change with it. Every pair
   was measured before it was written (design/x729-themes/README.md): light -- white on the colour 4.98 or more, its text
   on white and on its tint 5.46 or more; dark -- the dark ink on the colour 6.20 or more, its text on the surface 6.56 or
   more. A dark block outranks its light twin (one attribute more), so the order of the blocks is not what decides. */
:root{--pal-blue:#1D5FD1;--pal-teal:#0F7C80;--pal-emerald:#15803D;--pal-purple:#6D3FD6;--pal-rose:#C2306A;--pal-coral:#C2410C}   /* the dots of the picker */
:root[data-palette="teal"]{--brand:#0F7C80;--brand-text:#0B6B6F;--brand-strong:#0B6B6F;--brand-grad-a:#0B6B6F;--brand-grad-b:#08494C;--brand-soft:#E0F3F3;--on-brand:#FFFFFF;--band-a:#08494C;--band-b:#0F7C80;--badge-brand-a:#0F7C80;--badge-brand-b:#08494C}
:root[data-palette="emerald"]{--brand:#15803D;--brand-text:#116C33;--brand-strong:#116C33;--brand-grad-a:#116C33;--brand-grad-b:#0C4F25;--brand-soft:#E3F4E8;--on-brand:#FFFFFF;--band-a:#0C4F25;--band-b:#15803D;--badge-brand-a:#15803D;--badge-brand-b:#0C4F25}
:root[data-palette="purple"]{--brand:#6D3FD6;--brand-text:#5E33C2;--brand-strong:#5A30BD;--brand-grad-a:#5A30BD;--brand-grad-b:#43228F;--brand-soft:#EFE8FC;--on-brand:#FFFFFF;--band-a:#43228F;--band-b:#6D3FD6;--badge-brand-a:#6D3FD6;--badge-brand-b:#43228F}
:root[data-palette="rose"]{--brand:#C2306A;--brand-text:#A82A5C;--brand-strong:#A82A5C;--brand-grad-a:#A82A5C;--brand-grad-b:#7F1D45;--brand-soft:#FBE8F0;--on-brand:#FFFFFF;--band-a:#7F1D45;--band-b:#C2306A;--badge-brand-a:#C2306A;--badge-brand-b:#7F1D45}
:root[data-palette="coral"]{--brand:#C2410C;--brand-text:#A8380A;--brand-strong:#A8380A;--brand-grad-a:#A8380A;--brand-grad-b:#7C2D0A;--brand-soft:#FDECE2;--on-brand:#FFFFFF;--band-a:#7C2D0A;--band-b:#C2410C;--badge-brand-a:#C2410C;--badge-brand-b:#7C2D0A}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-palette="teal"]{--brand:#3DB8BC;--brand-text:#5CCACD;--brand-strong:#5CCACD;--brand-grad-a:#5CCACD;--brand-grad-b:#3DB8BC;--brand-soft:#12302F;--on-brand:#032526}
  :root:not([data-theme="light"])[data-palette="emerald"]{--brand:#4CC17A;--brand-text:#6BD592;--brand-strong:#6BD592;--brand-grad-a:#6BD592;--brand-grad-b:#4CC17A;--brand-soft:#13301F;--on-brand:#04210F}
  :root:not([data-theme="light"])[data-palette="purple"]{--brand:#A487F5;--brand-text:#B49BFF;--brand-strong:#B49BFF;--brand-grad-a:#B49BFF;--brand-grad-b:#A487F5;--brand-soft:#241D3C;--on-brand:#170A33}
  :root:not([data-theme="light"])[data-palette="rose"]{--brand:#F07AA8;--brand-text:#FF8FBA;--brand-strong:#FF8FBA;--brand-grad-a:#FF8FBA;--brand-grad-b:#F07AA8;--brand-soft:#3A1A28;--on-brand:#2E0716}
  :root:not([data-theme="light"])[data-palette="coral"]{--brand:#F5915F;--brand-text:#FFA477;--brand-strong:#FFA477;--brand-grad-a:#FFA477;--brand-grad-b:#F5915F;--brand-soft:#3A2216;--on-brand:#2E1104}
}
:root[data-theme="dark"][data-palette="teal"]{--brand:#3DB8BC;--brand-text:#5CCACD;--brand-strong:#5CCACD;--brand-grad-a:#5CCACD;--brand-grad-b:#3DB8BC;--brand-soft:#12302F;--on-brand:#032526}
:root[data-theme="dark"][data-palette="emerald"]{--brand:#4CC17A;--brand-text:#6BD592;--brand-strong:#6BD592;--brand-grad-a:#6BD592;--brand-grad-b:#4CC17A;--brand-soft:#13301F;--on-brand:#04210F}
:root[data-theme="dark"][data-palette="purple"]{--brand:#A487F5;--brand-text:#B49BFF;--brand-strong:#B49BFF;--brand-grad-a:#B49BFF;--brand-grad-b:#A487F5;--brand-soft:#241D3C;--on-brand:#170A33}
:root[data-theme="dark"][data-palette="rose"]{--brand:#F07AA8;--brand-text:#FF8FBA;--brand-strong:#FF8FBA;--brand-grad-a:#FF8FBA;--brand-grad-b:#F07AA8;--brand-soft:#3A1A28;--on-brand:#2E0716}
:root[data-theme="dark"][data-palette="coral"]{--brand:#F5915F;--brand-text:#FFA477;--brand-strong:#FFA477;--brand-grad-a:#FFA477;--brand-grad-b:#F5915F;--brand-soft:#3A2216;--on-brand:#2E1104}

/* x881 phase 3 · the ground of x874 follows the student's palette (x729): a light block, and the dark one twice */
:root[data-palette="teal"]{--gnd-a:#EBF6F6; --gnd-b:#E2F2F2; --gnd-c:#D8EEEE; --gnd-w1:rgba(21,154,154,.30); --gnd-w2:rgba(150,210,210,.40); --gnd-w3:rgba(150,210,210,.45); --gnd-w4:rgba(150,210,210,.40); --gnd-plus:rgba(21,154,154,.12); --gnd-glass-line:rgba(17,123,123,.75); --gnd-glass-fill:rgba(21,154,154,.45); --gnd-leaf-0:rgba(21,154,154,.40); --gnd-leaf-1:rgba(150,210,210,.14); --gnd-vein:rgba(255,255,255,.5); --gnd-glass-op:.12;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-palette="teal"]{--gnd-a:#0B1921; --gnd-b:#0B1D25; --gnd-c:#0B2129; --gnd-w1:rgba(21,154,154,.22); --gnd-w2:rgba(21,154,154,.14); --gnd-w3:rgba(21,154,154,.10); --gnd-w4:rgba(21,154,154,.14); --gnd-plus:rgba(150,210,210,.12); --gnd-glass-line:rgba(150,210,210,.6); --gnd-glass-fill:rgba(150,210,210,.18); --gnd-leaf-0:rgba(21,154,154,.30); --gnd-leaf-1:rgba(21,154,154,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}}
:root[data-theme="dark"][data-palette="teal"]{--gnd-a:#0B1921; --gnd-b:#0B1D25; --gnd-c:#0B2129; --gnd-w1:rgba(21,154,154,.22); --gnd-w2:rgba(21,154,154,.14); --gnd-w3:rgba(21,154,154,.10); --gnd-w4:rgba(21,154,154,.14); --gnd-plus:rgba(150,210,210,.12); --gnd-glass-line:rgba(150,210,210,.6); --gnd-glass-fill:rgba(150,210,210,.18); --gnd-leaf-0:rgba(21,154,154,.30); --gnd-leaf-1:rgba(21,154,154,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}
:root[data-palette="emerald"]{--gnd-a:#ECF7F1; --gnd-b:#E3F3EA; --gnd-c:#DAEFE3; --gnd-w1:rgba(31,160,86,.30); --gnd-w2:rgba(154,212,179,.40); --gnd-w3:rgba(154,212,179,.45); --gnd-w4:rgba(154,212,179,.40); --gnd-plus:rgba(31,160,86,.12); --gnd-glass-line:rgba(25,128,69,.75); --gnd-glass-fill:rgba(31,160,86,.45); --gnd-leaf-0:rgba(31,160,86,.40); --gnd-leaf-1:rgba(154,212,179,.14); --gnd-vein:rgba(255,255,255,.5); --gnd-glass-op:.12;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-palette="emerald"]{--gnd-a:#0B191C; --gnd-b:#0C1E1E; --gnd-c:#0D2220; --gnd-w1:rgba(31,160,86,.22); --gnd-w2:rgba(31,160,86,.14); --gnd-w3:rgba(31,160,86,.10); --gnd-w4:rgba(31,160,86,.14); --gnd-plus:rgba(154,212,179,.12); --gnd-glass-line:rgba(154,212,179,.6); --gnd-glass-fill:rgba(154,212,179,.18); --gnd-leaf-0:rgba(31,160,86,.30); --gnd-leaf-1:rgba(31,160,86,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}}
:root[data-theme="dark"][data-palette="emerald"]{--gnd-a:#0B191C; --gnd-b:#0C1E1E; --gnd-c:#0D2220; --gnd-w1:rgba(31,160,86,.22); --gnd-w2:rgba(31,160,86,.14); --gnd-w3:rgba(31,160,86,.10); --gnd-w4:rgba(31,160,86,.14); --gnd-plus:rgba(154,212,179,.12); --gnd-glass-line:rgba(154,212,179,.6); --gnd-glass-fill:rgba(154,212,179,.18); --gnd-leaf-0:rgba(31,160,86,.30); --gnd-leaf-1:rgba(31,160,86,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}
:root[data-palette="purple"]{--gnd-a:#F4F1FD; --gnd-b:#EEEAFC; --gnd-c:#E9E3FB; --gnd-w1:rgba(122,85,230,.30); --gnd-w2:rgba(195,179,244,.40); --gnd-w3:rgba(195,179,244,.45); --gnd-w4:rgba(195,179,244,.40); --gnd-plus:rgba(122,85,230,.12); --gnd-glass-line:rgba(98,68,184,.75); --gnd-glass-fill:rgba(122,85,230,.45); --gnd-leaf-0:rgba(122,85,230,.40); --gnd-leaf-1:rgba(195,179,244,.14); --gnd-vein:rgba(255,255,255,.5); --gnd-glass-op:.12;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-palette="purple"]{--gnd-a:#121426; --gnd-b:#15162D; --gnd-c:#191833; --gnd-w1:rgba(122,85,230,.22); --gnd-w2:rgba(122,85,230,.14); --gnd-w3:rgba(122,85,230,.10); --gnd-w4:rgba(122,85,230,.14); --gnd-plus:rgba(195,179,244,.12); --gnd-glass-line:rgba(195,179,244,.6); --gnd-glass-fill:rgba(195,179,244,.18); --gnd-leaf-0:rgba(122,85,230,.30); --gnd-leaf-1:rgba(122,85,230,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}}
:root[data-theme="dark"][data-palette="purple"]{--gnd-a:#121426; --gnd-b:#15162D; --gnd-c:#191833; --gnd-w1:rgba(122,85,230,.22); --gnd-w2:rgba(122,85,230,.14); --gnd-w3:rgba(122,85,230,.10); --gnd-w4:rgba(122,85,230,.14); --gnd-plus:rgba(195,179,244,.12); --gnd-glass-line:rgba(195,179,244,.6); --gnd-glass-fill:rgba(195,179,244,.18); --gnd-leaf-0:rgba(122,85,230,.30); --gnd-leaf-1:rgba(122,85,230,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}
:root[data-palette="rose"]{--gnd-a:#FCEEF4; --gnd-b:#FAE7EE; --gnd-c:#F8DFE9; --gnd-w1:rgba(214,60,122,.30); --gnd-w2:rgba(237,167,195,.40); --gnd-w3:rgba(237,167,195,.45); --gnd-w4:rgba(237,167,195,.40); --gnd-plus:rgba(214,60,122,.12); --gnd-glass-line:rgba(171,48,98,.75); --gnd-glass-fill:rgba(214,60,122,.45); --gnd-leaf-0:rgba(214,60,122,.40); --gnd-leaf-1:rgba(237,167,195,.14); --gnd-vein:rgba(255,255,255,.5); --gnd-glass-op:.12;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-palette="rose"]{--gnd-a:#18121F; --gnd-b:#1E1422; --gnd-c:#251525; --gnd-w1:rgba(214,60,122,.22); --gnd-w2:rgba(214,60,122,.14); --gnd-w3:rgba(214,60,122,.10); --gnd-w4:rgba(214,60,122,.14); --gnd-plus:rgba(237,167,195,.12); --gnd-glass-line:rgba(237,167,195,.6); --gnd-glass-fill:rgba(237,167,195,.18); --gnd-leaf-0:rgba(214,60,122,.30); --gnd-leaf-1:rgba(214,60,122,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}}
:root[data-theme="dark"][data-palette="rose"]{--gnd-a:#18121F; --gnd-b:#1E1422; --gnd-c:#251525; --gnd-w1:rgba(214,60,122,.22); --gnd-w2:rgba(214,60,122,.14); --gnd-w3:rgba(214,60,122,.10); --gnd-w4:rgba(214,60,122,.14); --gnd-plus:rgba(237,167,195,.12); --gnd-glass-line:rgba(237,167,195,.6); --gnd-glass-fill:rgba(237,167,195,.18); --gnd-leaf-0:rgba(214,60,122,.30); --gnd-leaf-1:rgba(214,60,122,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}
:root[data-palette="coral"]{--gnd-a:#FCF1EC; --gnd-b:#FBEAE3; --gnd-c:#FAE4DA; --gnd-w1:rgba(222,90,30,.30); --gnd-w2:rgba(240,181,154,.40); --gnd-w3:rgba(240,181,154,.45); --gnd-w4:rgba(240,181,154,.40); --gnd-plus:rgba(222,90,30,.12); --gnd-glass-line:rgba(178,72,24,.75); --gnd-glass-fill:rgba(222,90,30,.45); --gnd-leaf-0:rgba(222,90,30,.40); --gnd-leaf-1:rgba(240,181,154,.14); --gnd-vein:rgba(255,255,255,.5); --gnd-glass-op:.12;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-palette="coral"]{--gnd-a:#191418; --gnd-b:#1F1719; --gnd-c:#261919; --gnd-w1:rgba(222,90,30,.22); --gnd-w2:rgba(222,90,30,.14); --gnd-w3:rgba(222,90,30,.10); --gnd-w4:rgba(222,90,30,.14); --gnd-plus:rgba(240,181,154,.12); --gnd-glass-line:rgba(240,181,154,.6); --gnd-glass-fill:rgba(240,181,154,.18); --gnd-leaf-0:rgba(222,90,30,.30); --gnd-leaf-1:rgba(222,90,30,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}}
:root[data-theme="dark"][data-palette="coral"]{--gnd-a:#191418; --gnd-b:#1F1719; --gnd-c:#261919; --gnd-w1:rgba(222,90,30,.22); --gnd-w2:rgba(222,90,30,.14); --gnd-w3:rgba(222,90,30,.10); --gnd-w4:rgba(222,90,30,.14); --gnd-plus:rgba(240,181,154,.12); --gnd-glass-line:rgba(240,181,154,.6); --gnd-glass-fill:rgba(240,181,154,.18); --gnd-leaf-0:rgba(222,90,30,.30); --gnd-leaf-1:rgba(222,90,30,.07); --gnd-vein:rgba(255,255,255,.14); --gnd-glass-op:.15;}

/* ---- the scrollbar: one thin bar in the theme's own tokens ----
   x852 (his question 2026-11-06 07:40, o-1106-0340-88e4: «ليه شكل اللسكور روت مش كويس؟»): the installed app's window
   drew Windows' default bar -- grey, with arrow buttons -- beside the app's colours. --border-strong on a clear track
   follows the light and the dark blocks above by itself. A strip that hides its own bar (.praystrip, .segment.scroll
   in index.html) says scrollbar-width:none on its class, which wins over the * below. */
html{scrollbar-color:var(--border-strong) transparent}
*{scrollbar-width:thin}