/* ============================================================================ SANAD — design system Pure B&W · serif display voice · MCQ answer-set mark · prominent liquid glass Consensus is signalled STRUCTURALLY (filled/outline, weight), never by hue. ============================================================================ */ *,*::before,*::after{box-sizing:border-box} :root{ --ink-0:#08080a;--ink-1:#141417;--ink-2:#202024;--ink-3:#34343a;--ink-4:#5a5a62; --ink-5:#8a8a92;--ink-6:#b8b8bf;--ink-7:#dcdce0;--ink-8:#eeeef1;--ink-9:#f8f8fa; --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-arabic:"Amiri","Scheherazade New","Traditional Arabic","Geeza Pro","Noto Naskh Arabic","Segoe UI",serif; --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace; --t-xs:.75rem;--t-sm:.875rem;--t-base:1rem;--t-md:1.15rem;--t-lg:1.5rem;--t-xl:2rem;--t-2xl:2.75rem;--t-3xl:3.75rem; --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem; --r-sm:8px;--r-md:12px;--r-lg:20px;--r-full:999px; --ease:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--d2:220ms;--d3:420ms; } :root,:root[data-theme="light"]{ --bg:var(--ink-9);--bg-2:var(--ink-8);--surface:#fff;--surface-2:var(--ink-8); --fg:var(--ink-1);--fg-muted:var(--ink-4);--fg-subtle:var(--ink-5);--line:var(--ink-7);--line-strong:var(--ink-6); --accent:var(--ink-0);--accent-fg:var(--ink-9);--focus:var(--ink-2); --glass-fill:rgba(255,255,255,.45);--glass-fill-2:rgba(255,255,255,.12);--glass-border:rgba(20,20,23,.12); --glass-hi:rgba(255,255,255,.98);--glass-inner:rgba(255,255,255,.65);--glass-sheen:rgba(255,255,255,.8); --glass-shadow:0 24px 60px rgba(8,8,10,.14),0 6px 16px rgba(8,8,10,.08);--glass-blur:26px;--glass-sat:180%; } :root[data-theme="dark"]{ --bg:var(--ink-0);--bg-2:#050506;--surface:var(--ink-1);--surface-2:var(--ink-2); --fg:var(--ink-9);--fg-muted:var(--ink-6);--fg-subtle:var(--ink-5);--line:var(--ink-2);--line-strong:var(--ink-3); --accent:var(--ink-9);--accent-fg:var(--ink-0);--focus:var(--ink-7); --glass-fill:rgba(255,255,255,.09);--glass-fill-2:rgba(255,255,255,.02);--glass-border:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.6);--glass-inner:rgba(255,255,255,.12);--glass-sheen:rgba(255,255,255,.4); --glass-shadow:0 28px 70px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.4);--glass-blur:30px;--glass-sat:160%; } @media (prefers-color-scheme:dark){:root:not([data-theme]){ --bg:var(--ink-0);--bg-2:#050506;--surface:var(--ink-1);--surface-2:var(--ink-2); --fg:var(--ink-9);--fg-muted:var(--ink-6);--fg-subtle:var(--ink-5);--line:var(--ink-2);--line-strong:var(--ink-3); --accent:var(--ink-9);--accent-fg:var(--ink-0);--focus:var(--ink-7); --glass-fill:rgba(255,255,255,.09);--glass-fill-2:rgba(255,255,255,.02);--glass-border:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.6);--glass-inner:rgba(255,255,255,.12);--glass-sheen:rgba(255,255,255,.4); --glass-shadow:0 28px 70px rgba(0,0,0,.6),0 8px 22px rgba(0,0,0,.4);--glass-blur:30px;--glass-sat:160%; }} html{background:var(--bg)} /* so a hidden body (i18n-pending) shows the theme bg, not a white flash */ body{margin:0;font-family:var(--font-sans);font-size:var(--t-base);line-height:1.6;color:var(--fg); background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* No-flash i18n: a head script tags with .i18n-pending when a non-English language is saved, hiding content until the strings are swapped in (the boot clears it; a failsafe timeout clears it too). English never gets tagged. */ html.i18n-pending body{visibility:hidden} /* Glass-adjusted scrollbars — the page and every overflow area (language menu, autocomplete, textarea). Translucent thumb, inset glass edge + highlight, floated with padding. Theme-aware via the glass tokens. */ *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 24%,transparent) transparent} *::-webkit-scrollbar{width:12px;height:12px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{border-radius:var(--r-full);border:3px solid transparent;background-clip:padding-box; background-color:color-mix(in srgb,var(--fg) 20%,transparent); box-shadow:inset 0 0 0 1px var(--glass-border),inset 1px 1px 0 var(--glass-inner)} *::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--fg) 36%,transparent)} *::-webkit-scrollbar-corner{background:transparent} /* Arabic / RTL legibility: nudge ONLY the muted secondary lines up a bit — the display-serif renders them small. Size tokens are NOT touched, so primary text, buttons, inputs, headings and card titles keep their normal size. */ html[dir=rtl] .choice__d,html[dir=rtl] footer,html[dir=rtl] .eyebrow{font-size:1rem} /* Capacity-popover DETAIL is metadata — it must sit visually BELOW the paragraph it annotates. The mono face has no Arabic glyphs (fallback rendered it huge), so use the Arabic face at a deliberately small size; digits stay tabular. */ html[dir=rtl] .cap__d{font-family:var(--font-arabic);font-size:.85rem;letter-spacing:0} /* "Smart insight" is a section HEADER — give it header presence in Arabic: the real Arabic face (mono can't render it), no letter-spacing (Arabic script must never be tracked — it disconnects the letters), and a proper heading size. */ html[dir=rtl] .insights__hd{font-family:var(--font-arabic);font-size:1.05rem; letter-spacing:0;text-transform:none;font-weight:600} /* the naskh/serif Arabic face needs a bump at these muted sizes; the title gets the SAME size as the body it leads so the bold lead-in isn't smaller than it. */ html[dir=rtl] .insight__t,html[dir=rtl] .insight__x,html[dir=rtl] .cap__p,html[dir=rtl] .steps{font-size:1.05rem} /* verify/annotation labels are TRANSLATED Arabic — the mono face has no Arabic glyphs, so it fell back oversized + mis-spaced; use the Arabic face at a secondary size so it reads as a note, not louder than the content. */ html[dir=rtl] .insight__v{font-family:var(--font-arabic);font-size:.95rem;letter-spacing:0} html[dir=rtl] .choice__d,html[dir=rtl] .insight__x,html[dir=rtl] .cap__p{line-height:1.7} h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.15;text-wrap:balance} a{color:var(--fg)} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px} .wrap{max-width:900px;margin:0 auto;padding:var(--s6) var(--s5) var(--s8)} .eyebrow{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)} .muted{color:var(--fg-muted)}.mono{font-family:var(--font-mono)}.tnum{font-variant-numeric:tabular-nums} .serif-i{font-family:var(--font-display);font-style:italic}.center{text-align:center} .hidden{display:none} /* shared utility — used by the language menu / popovers on every page */ /* Page header — a per-page bar at the top of .content holding that page's own title + controls (kept OUT of the universal spine, which is identical everywhere). */ .pagehead{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap; padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:1px solid var(--line)} .pagehead__title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;margin:0} /* the one recurring mark: MCQ answer-set (defined once as ) */ .mark{width:1em;height:1em;flex:none;color:var(--fg)} .rule{display:flex;align-items:center;gap:var(--s4);color:var(--line-strong);margin:var(--s7) 0 var(--s5)} .rule::before,.rule::after{content:"";height:1px;flex:1;background:currentColor;opacity:.6} .rule .mark{color:var(--fg-subtle);width:16px;height:16px} /* liquid glass */ .glass{position:relative;isolation:isolate;border-radius:var(--r-lg);border:1px solid var(--glass-border); background:linear-gradient(160deg,var(--glass-fill) 0%,var(--glass-fill-2) 78%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow:var(--glass-shadow),inset 0 1.5px 0 var(--glass-inner),inset 0 -1px 1px rgba(0,0,0,.05);overflow:hidden} .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px; background:linear-gradient(150deg,var(--glass-hi) 0%,transparent 30%,transparent 72%,var(--glass-hi) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;opacity:.85;z-index:2} .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none; background:radial-gradient(90% 60% at 12% -8%,var(--glass-sheen) 0%,transparent 42%), radial-gradient(70% 50% at 108% 110%,var(--glass-sheen) 0%,transparent 40%);opacity:.55} .glass>*{position:relative;z-index:3} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--surface)}.glass::before,.glass::after{display:none}} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:44px;padding:0 var(--s5); border-radius:var(--r-sm);font-family:var(--font-sans);font-size:var(--t-sm);font-weight:560;letter-spacing:.01em; border:1px solid transparent;cursor:pointer;transition:transform .12s,filter var(--d2),background var(--d2),border-color var(--d2)} .btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;pointer-events:none} .btn--primary{background:var(--accent);color:var(--accent-fg)}.btn--primary:hover{filter:brightness(1.1)} .btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}.btn--ghost:hover{background:var(--surface-2)} .btn--lg{height:52px;font-size:var(--t-base);padding:0 var(--s6)} /* surfaces + forms */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)} .select,.input{height:46px;width:100%;padding:0 var(--s3);background:var(--surface);color:var(--fg);font-family:var(--font-sans); font-size:var(--t-base);border:1px solid var(--line-strong);border-radius:var(--r-sm)} .select:focus,.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)} .select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%); background-position:calc(100% - 18px) 56%,calc(100% - 13px) 56%;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--s6)} .check{display:flex;align-items:center;gap:var(--s2);cursor:pointer;padding:var(--s2) 0;font-size:var(--t-sm)} .check input{position:absolute;opacity:0} .check__box{width:20px;height:20px;flex:none;border:1px solid var(--line-strong);border-radius:5px;background:var(--surface);display:grid;place-items:center;transition:background .12s,border-color .12s} .check__box::after{content:"";width:10px;height:6px;border-left:2px solid var(--accent-fg);border-bottom:2px solid var(--accent-fg);transform:rotate(-45deg) scale(0);transition:transform var(--d2) var(--ease-out);margin-top:-2px} .check input:checked+.check__box{background:var(--accent);border-color:var(--accent)} .check input:checked+.check__box::after{transform:rotate(-45deg) scale(1)} /* three-choice source picker */ .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-top:var(--s2)} .choice input{position:absolute;opacity:0;width:0;height:0} .choice__card{border:1px solid var(--line-strong);border-radius:var(--r-md);padding:var(--s4);cursor:pointer;height:100%;transition:border-color var(--d2),background var(--d2),box-shadow var(--d2)} .choice__card:hover{border-color:var(--fg-muted)} .choice input:checked+.choice__card{border-color:var(--fg);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--fg)} .choice input:focus-visible+.choice__card{outline:2px solid var(--focus);outline-offset:2px} .choice__t{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-display);font-weight:600;font-size:var(--t-base)} .choice__d{font-size:var(--t-xs);margin-top:var(--s2);line-height:1.45;color:var(--fg-muted)} /* badges, progress, tabs, options */ .badge{display:inline-flex;align-items:center;gap:var(--s1);height:24px;padding:0 var(--s3);font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.03em;border-radius:var(--r-full);background:var(--surface-2);color:var(--fg-muted);border:1px solid var(--line)} .badge--solid{background:var(--accent);color:var(--accent-fg);border-color:transparent} .badge--outline{background:transparent;color:var(--fg);border-color:var(--line-strong)} .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.dot--o{background:transparent;border:1.5px solid currentColor} /* Smart-insight strip under the exam field — severity is structural (dot fill), never colour */ .insights{margin-top:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden} .insights__hd{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4); font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--fg-muted);border-bottom:1px solid var(--line); background:linear-gradient(90deg,color-mix(in srgb,var(--fg) 6%,transparent),transparent 60%)} .spark{font-size:1.1em;line-height:1; background:linear-gradient(100deg,var(--fg-subtle) 0%,var(--fg) 45%,var(--fg-subtle) 70%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:spark 3.2s var(--ease) infinite} @keyframes spark{0%{background-position:200% 0}100%{background-position:-120% 0}} .insight{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);font-size:var(--t-sm);line-height:1.5;border-top:1px solid var(--line)} .insight:first-child{border-top:0} .insight>.dot{margin-top:.5em;flex:none} .insight__b{min-width:0} .insight__t{font-weight:640;margin-inline-end:.5ch;color:var(--fg)} .insight__x{color:var(--fg-muted)} .insight__v{color:var(--fg-subtle);font-family:var(--font-mono);font-size:var(--t-xs);white-space:nowrap} .insight--gen{align-items:center;color:var(--fg-subtle);font-style:italic} .insight__src{color:var(--fg-subtle);font-family:var(--font-mono);font-size:var(--t-xs);white-space:nowrap} .progress{height:8px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;border:1px solid var(--line)} .progress__bar{height:100%;background:var(--accent);border-radius:inherit;transition:width var(--d3) var(--ease-out)} .progress--busy .progress__bar{width:34%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:sanad-slide 1.5s var(--ease) infinite} @keyframes sanad-slide{from{transform:translateX(-120%)}to{transform:translateX(340%)}} .tabs{display:inline-flex;gap:var(--s1);padding:var(--s1);background:var(--surface-2);border-radius:var(--r-md);border:1px solid var(--line)} .tab{border:0;background:transparent;cursor:pointer;padding:var(--s2) var(--s4);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;color:var(--fg-muted);border-radius:var(--r-sm)} .tab[aria-selected="true"]{background:var(--surface);color:var(--fg)} .opt{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:var(--s2) 0;background:var(--surface);cursor:pointer;transition:border-color var(--d2)} .opt:hover{border-color:var(--fg-muted)}.opt b{font-family:var(--font-mono);color:var(--fg-muted)} .opt.correct{border-color:var(--fg);box-shadow:inset 3px 0 0 var(--fg);font-weight:600}.opt.correct b{color:var(--fg)} .opt.wrong{opacity:.5;text-decoration:line-through} /* masthead + wordmark */ .mast{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:1px solid var(--line)} .wordmark{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em} .wordmark .mark{width:1.15em;height:1.15em;margin-right:.1em} .wordmark .arw{font-family:var(--font-arabic);font-size:.82em;color:var(--fg-muted);margin-left:var(--s1)} .mast__left{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .mast__sep{color:var(--line-strong);font-size:1.15em;line-height:1;user-select:none} .mast__right{display:flex;align-items:center;gap:var(--s4)} .mast__ctrls{display:contents} /* mobile: transparent — header stays unchanged */ /* Desktop: a simple sticky rail — no box. Title runs sideways at the top, then a distance, then the tagline + controls grouped at the bottom. Submenus open to the SIDE, into the content. Reading-start side, flips for RTL; mobile keeps the stacked top header. */ /* Scoped to .wrap--rail (the landing only) so other pages that reuse .wrap / .mast — e.g. the legal page — keep the normal horizontal header. */ @media (min-width:960px){ .wrap--rail{display:flex;align-items:flex-start;gap:var(--s6);max-width:1120px;padding-bottom:var(--s6)} .wrap--rail .content{flex:1;min-width:0} /* the header, rotated: brand pinned at one end, controls at the other, space between — exactly like the horizontal header, but vertical */ .wrap--rail .mast{flex:0 0 auto;flex-direction:column;align-items:center;justify-content:flex-start; gap:var(--s3);position:sticky;top:var(--s6);border-bottom:0;padding:0; /* fill the viewport minus symmetric top/bottom breathing room (the rail's wrap padding-bottom is trimmed to s6 to match), so a short page is exactly one screen tall — no phantom scroll. */ height:calc(100vh - 2*var(--s6)); /* sticky already makes the mast its own stacking context; lift it above the content's .glass panels so the submenus (which open sideways into the content) render on top of the gather panel instead of behind it. */ z-index:70; border-inline-end:1px solid var(--line);padding-inline-end:var(--s5)} .wrap--rail .mast__left,.wrap--rail .mast__right{display:contents} .wrap--rail .mast__sep{display:none} /* title runs sideways at the top */ .wrap--rail .mast .wordmark{flex-direction:column;align-items:center;gap:var(--s3);margin:0} .wrap--rail .mast .wordmark .mark{margin:0} .wrap--rail .mast .wordmark__name{writing-mode:vertical-rl;text-orientation:mixed;line-height:1} .wrap--rail .mast .wordmark .arw{writing-mode:vertical-rl;text-orientation:mixed;margin:0} /* tagline + controls pushed to the far end (physical margin-top: the element's own vertical writing-mode rotates its logical margin axes). */ .wrap--rail .mast .eyebrow{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.2em;line-height:1; white-space:nowrap;margin-top:auto} /* back button becomes a vertical bordered pill at the far end (its icon is hidden here; the border alone reads as a button). */ .wrap--rail .mast .navbtn{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap; margin-top:auto;padding:var(--s3) var(--s2);letter-spacing:.04em} .wrap--rail .mast .navbtn .navbtn__i{display:none} .wrap--rail .mast__ctrls{flex-direction:column;align-items:center;gap:var(--s3)} /* vertical pill: dot on top, the Live/Cached word running sideways beneath it — matches the rotated wordmark + tagline. Only the info icon is dropped. */ .wrap--rail .mast .cap__chip{flex-direction:column;width:44px;height:auto; padding:var(--s3) 0;gap:var(--s2);justify-content:center;border-radius:var(--r-md);border-color:var(--line-strong)} .wrap--rail .mast .cap__chip #statusState{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.14em} .wrap--rail .mast .cap__i{display:none} /* the language menu (the only submenu still in the spine) opens to the SIDE, into the content, bottom-aligned so it stays on screen. Scoped to .mast so the status popover — which now lives in the content — keeps its own placement. */ .wrap--rail .mast .lang__menu{top:auto;bottom:0;inset-inline-start:calc(100% + 10px);inset-inline-end:auto} /* The spine's vertical text defaults to vertical-rl — top-to-bottom with the letter-tops facing out, which is right for the RTL (right-hand) spine. In LTR the spine sits on the left, so its mirror reads bottom-to-top with the tops still facing out: flip every vertical run 180° around its axis. */ html:not([dir=rtl]) .wrap--rail .mast .wordmark__name, html:not([dir=rtl]) .wrap--rail .mast .wordmark .arw, html:not([dir=rtl]) .wrap--rail .mast .eyebrow, html:not([dir=rtl]) .wrap--rail .mast .navbtn, html:not([dir=rtl]) .wrap--rail .mast .cap__chip #statusState{transform:rotate(180deg)} } .lead{max-width:60ch;margin-top:var(--s5);font-size:var(--t-md);color:var(--fg-muted)} .dropcap::first-letter{font-family:var(--font-display);font-size:3.2em;line-height:.82;float:left;font-weight:600;padding:6px 10px 0 0} .row{display:flex;gap:var(--s4)}@media(max-width:620px){.row{flex-direction:column}} /* Catalog autocomplete — seeded exam picker (structural, no colour) */ .ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:340px;overflow-y:auto; background:var(--surface);border:1px solid var(--line-strong);border-radius:10px; box-shadow:var(--glass-shadow);padding:var(--s1)} .ac__item{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--s3); padding:var(--s2) var(--s3);border-radius:7px;cursor:pointer} .ac__item:hover,.ac__item.is-active{background:var(--surface-2)} .ac__code{font-family:var(--font-mono,ui-monospace,monospace);font-weight:600;color:var(--fg);white-space:nowrap} .ac__title{color:var(--fg-muted);font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac__prov{color:var(--fg-subtle);font-size:var(--t-xs,.72rem);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} [dir=rtl] .ac__item{grid-template-columns:auto 1fr auto} /* ── Language control — shared by every page (landing + legal). Tap to rotate, hold to open the full list. Styles were previously inline on the landing; moved here so the spine/header language switcher is identical everywhere. ── */ html[dir=rtl] body{font-family:var(--font-arabic)} /* Mono-face fallback renders Arabic DISJOINTED (Courier-family joining) — every label that is real translated Arabic needs the Arabic face, not just ls:0. */ html[dir=rtl] .eyebrow,html[dir=rtl] .cap__h,html[dir=rtl] .cap__chip #statusState{ font-family:var(--font-arabic);letter-spacing:0;text-transform:none} /* ── Script-aware typography (from the 69-language vision audit, 2026-07-08) ── [data-script] is set by setLang: 'cjk' (zh/ja/ko), 'cx' (connected/clustered scripts: Arabic-family, Indic, Thai/Khmer/Lao/Myanmar, Amharic), 'lat' (rest). 1) Latin small-caps TRACKING severs Devanagari matras, Telugu/Tamil clusters and spaces Hangul apart — zero it and use the sans face (mono lacks these scripts and its fallback is what breaks them). */ html[data-script="cx"] .eyebrow,html[data-script="cx"] .cap__h, html[data-script="cx"] .cap__chip #statusState,html[data-script="cx"] .insights__hd, html[data-script="cjk"] .eyebrow,html[data-script="cjk"] .cap__h, html[data-script="cjk"] .cap__chip #statusState,html[data-script="cjk"] .insights__hd{ font-family:var(--font-sans);letter-spacing:0;text-transform:none} /* 2) The vertical rail tagline: CJK gets NATIVE vertical setting (upright glyphs stacked top-to-bottom — the audit caught Japanese rendered upside-down and Chinese tipped sideways); connected/clustered scripts cannot be set vertically at all (severed ligatures/matras), so the rail label hides — the same tagline is right there in the hero. */ html[data-script="cjk"] .wrap--rail .mast .eyebrow{ writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.25em} /* Complex scripts CAN have a spine tagline: sideways-rl lays the line out horizontally FIRST (full shaping — ligatures, matras, joining all intact) and rotates the rendered run as a unit, like a book spine. Only where the browser lacks sideways-* does the label hide (better absent than severed). */ @media (min-width:960px){ html[data-script="cx"] .wrap--rail .mast .eyebrow{display:none} @supports (writing-mode:sideways-rl){ html[data-script="cx"] .wrap--rail .mast .eyebrow{ display:block;writing-mode:sideways-rl;letter-spacing:0;text-transform:none; font-family:var(--font-sans);font-size:1.05rem} /* Brand furniture: Arabic gets its spine length the CALLIGRAPHIC way — kashida (tatweel) elongation inside the words themselves (baked into the ar 'tag' string), at a real naskh size. Never letter-gaps, never word-gaps. */ /* Amiri COLLAPSES tatweel runs (smart-kashida), defeating the elongation — the spine uses Segoe UI, which renders each kashida segment literally, so the calligraphic stretch actually spans the rail. Bold for brand weight. */ html[dir=rtl][data-script="cx"] .wrap--rail .mast .eyebrow{ font-family:"Segoe UI",var(--font-sans);font-weight:500;font-size:1rem;color:var(--fg-muted)} } } /* 3) Italic is a Latin convention: CJK has no italic form (fake oblique skews the characters) and connected scripts distort — display italics go upright. */ html[data-script="cjk"] .serif-i,html[data-script="cx"] .serif-i{font-style:normal} /* 4) Readability floor for dense stacked scripts (Thai/Khmer/Lao/Myanmar tone marks, Indic conjuncts): captions tuned for Latin x-height are a squint. Complex-script pages get the same floor RTL already earned. */ html[data-script="cx"] footer,html[data-script="cx"] .choice__d, html[data-script="cx"] .cap__d,html[data-script="cx"] .llm-note{ font-size:1rem;line-height:1.8} html[data-script="cx"] .cap__p,html[data-script="cx"] .steps{font-size:1.05rem;line-height:1.75} /* Urdu: the generic Arabic stack dropped ہ/ڈ to a broken fallback (rendered as digits!) — prefer faces with full Urdu coverage first. */ html[lang="ur"]{--font-arabic:"Urdu Typesetting","Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic","Amiri",serif} .lang{position:relative;display:inline-flex} .lang__btn{position:relative;min-width:44px;font-family:var(--font-mono);gap:0;padding:0 var(--s3); overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none} .lang__abbr{font-size:var(--t-sm);line-height:1;letter-spacing:.02em} /* "hold me" cue + hold-progress: a frosted-glass grabber that charges to full width over the ~0.5s hold (fits the rounded-rect button cleanly). */ .lang__hold{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:16px;height:4px; border-radius:var(--r-full);pointer-events:none;opacity:.9; background:linear-gradient(180deg,var(--glass-fill),var(--glass-fill-2)); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-inner),0 1px 2px rgba(0,0,0,.14); -webkit-backdrop-filter:blur(6px) saturate(var(--glass-sat)); backdrop-filter:blur(6px) saturate(var(--glass-sat)); transition:width .16s var(--ease),opacity .16s,box-shadow .16s} .lang__btn:hover .lang__hold{opacity:1} .lang__btn.is-holding .lang__hold{width:calc(100% - 12px);opacity:1; box-shadow:inset 0 1px 0 var(--glass-inner),0 0 12px color-mix(in srgb,var(--fg) 24%,transparent); transition:width .5s linear,opacity .12s,box-shadow .12s} @media (prefers-reduced-motion:reduce){ .lang__btn.is-holding .lang__hold{width:16px;transition:none} /* no charge; grabber stays the cue */ } /* full-list menu — glass box; the INNER list scrolls so the glass border ring stays put (fixes the scrolled-off border artifact). */ .lang__menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60; width:min(240px,80vw);padding:var(--s2)} .lang__list{max-height:min(60vh,340px);overflow-y:auto} .lang__opt{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%; padding:var(--s2) var(--s3);background:transparent;border:0;border-radius:var(--r-sm);cursor:pointer; color:var(--fg);font-family:var(--font-sans);font-size:var(--t-sm);text-align:start} .lang__opt:hover,.lang__opt:focus-visible{background:var(--surface-2);outline:none} .lang__opt.is-active{background:var(--surface-2)} .lang__opt-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lang__opt-abbr{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-muted);flex:none} /* Back button — a clear ghost button (border + hover), shown on the legal page in the spine (vertical pill) and mobile header (horizontal, with a back arrow). Shared #themeBtn sizing lives here too so the theme toggle works on every page. */ .navbtn{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3); border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--fg); font-family:var(--font-sans);font-size:var(--t-sm);line-height:1;text-decoration:none; transition:border-color var(--d2),background var(--d2)} .navbtn:hover{border-color:var(--fg-muted);background:var(--surface-2)} .navbtn__i{flex:none} html[dir=rtl] .navbtn__i{transform:scaleX(-1)} /* arrow points the reading-back way */ #themeBtn{width:44px;padding:0} /* Capture mode (?flat=1): screenshot/stitching tools composite backdrop-filter AND large blur shadows against undefined buffers, smearing the glass. This flag kills every backdrop-filter on the page, zeroes the glass blur/saturate/shadow tokens (the 70px shadow halos were the second smear source), and renders glass surfaces solid — the same fallback used when backdrop-filter is unsupported. :root.flat outranks the theme-scoped token blocks by order at equal specificity. */ :root.flat{--glass-shadow:0 0 0 1px var(--line);--glass-blur:0px;--glass-sat:100%} html.flat *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.flat .glass,html.flat .cap__pop{background:var(--surface)!important} html.flat .cap__pop{box-shadow:0 0 0 1px var(--line)!important} html.flat .glass::before,html.flat .glass::after{display:none!important} /* Secret flat toggle — the mark in the wordmark. At rest it is the plain logo; on tap it pops out of its socket like a liquid-glass puzzle piece, swirls, and clicks back in as a flat tile (reverse swirl going back to glass). The costume tile (::before) simply tracks the live mode — JS flips html.flat mid-swirl, so the piece visibly morphs glass→flat (or flat→glass) at the top of the spin. */ .markchip{position:relative;display:inline-flex;align-items:center;justify-content:center; background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer; border-radius:26%;-webkit-tap-highlight-color:transparent} .markchip:focus-visible{outline:2px solid var(--fg-muted);outline-offset:4px} .markchip .mark{position:relative;z-index:1} .markchip::before{content:"";position:absolute;inset:-24%;border-radius:26%;opacity:0; background:color-mix(in srgb,var(--surface) 88%,transparent); -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%); box-shadow:0 0 0 1px var(--line),0 10px 28px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.14); transition:opacity .18s ease,background .3s ease,box-shadow .3s ease} html.flat .markchip::before{background:var(--surface); box-shadow:0 0 0 1px var(--line),inset 0 0 0 1px var(--line)} .markchip.anim{animation:mark-swirl 1.25s cubic-bezier(.45,.05,.35,1.15) both;z-index:8} .markchip.anim.rev{animation-name:mark-swirl-rev} .markchip.anim::before{opacity:1} @keyframes mark-swirl{ 0%{transform:scale(1) rotate(0deg)} 22%{transform:scale(1.5) rotate(-20deg)} /* pop out of the socket, slight wind-up */ 78%{transform:scale(1.5) rotate(560deg)} /* swirl in place; mode morphs mid-spin */ 100%{transform:scale(1) rotate(720deg)} /* click back into place */ } @keyframes mark-swirl-rev{ 0%{transform:scale(1) rotate(0deg)} 22%{transform:scale(1.5) rotate(20deg)} 78%{transform:scale(1.5) rotate(-560deg)} 100%{transform:scale(1) rotate(-720deg)} } @media (prefers-reduced-motion:reduce){.markchip.anim{animation:none}} /* ═══ Mobile & touch parity (2026-07 mobile audit) ═══ */ /* Language menu: absolutely-positioned panel escaped the viewport when end-aligned to the 44px button near the screen edge (LTR fell off the left, RTL off the right). Pin it to the viewport on phones. */ @media (max-width:600px){ .lang__menu{position:fixed;top:72px;inset-inline:12px;width:auto;max-width:none} /* Two-row header, identical in every language: row 1 brand + controls, row 2 tagline + status pill. The wordmark's flex-grow eats row 1's free space so the tagline can never join it (Arabic used to fit inline while English wrapped — a layout lottery by string length). */ .mast__sep{display:none} .mast__left{display:contents} .mast .wordmark{flex-grow:1} .mast .eyebrow{order:2;white-space:nowrap;letter-spacing:.14em} .mast .cap{order:3;margin-inline-start:auto;position:relative} } /* Hold-to-open is invisible on touch (the grabber bar only lit on :hover) — keep it always visible as the affordance. */ @media (hover:none){ .lang__hold{opacity:1} } /* 44px touch minimum on coarse pointers; desktop visuals unchanged. */ @media (pointer:coarse){ .btn,.btn--sm{height:auto;min-height:44px} .input,.select{height:auto;min-height:44px} .tab{min-height:44px} .lang__opt{min-height:44px} .check{min-height:44px;display:inline-flex;align-items:center} details>summary{padding-block:10px} footer a,.toc a{display:inline-block;padding:10px 4px;margin:-6px 0} .res__yes,.res__no{padding:11px 16px;min-height:44px} .res__acts{gap:.75em} .insight a{display:inline-block;padding:8px 4px;margin:-8px -4px;font-size:.875rem} /* invisible expanded hit areas for tiny chrome controls */ .cap__chip,.markchip{position:relative} .cap__chip::after,.markchip::after{content:"";position:absolute;inset:-10px} } /* Autocomplete titles: wrap to two lines instead of ellipsis so near-identical exams (MB-910 vs MB-920 …) stay distinguishable on a narrow screen. */ @media (max-width:620px){ .ac__item{align-items:flex-start} .ac__title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} } /* Screen-reader-only labels: visually hidden, still announced. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}