/* 0d · Bento theme · site.css — tokens, base, components and page patterns for the public site (also loaded by the
   admin before admin.css). Source of truth: resources/design/bento/foundation.md (helmet block v1) + the d-*.dc.html
   boards. Class names are the Bento vocabulary (docs/FRONTEND.md). Rules:
   · colours only through tokens; light = default, dark = html[data-scheme="dark"] (set by /assets/theme-init.js),
     with a prefers-color-scheme fallback when no data-scheme is set (no JS);
   · logical properties only (a physical property must carry the comment physical-ok);
   · no !important except inside the reduced-motion block and .sr-only/[hidden] guards. */

/* ---------- 0. Document ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--table)}
body{margin:0;background:var(--table)}
[hidden]{display:none !important}

/* ---------- 1. Tokens: theme-agnostic (type, space, radii, motion, layout) ---------- */
:root{
--font-display:"Bricolage Grotesque","Almarai","Bricolage Fallback","Almarai Fallback",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
--font-body:"Figtree","Almarai","Figtree Fallback","Almarai Fallback",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
--font-ar:"Almarai","Figtree","Almarai Fallback","Figtree Fallback",system-ui,"Segoe UI",Tahoma,sans-serif;
--font-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--fs-hero:76px;--fs-d1:56px;--fs-h1:44px;--fs-h2:32px;--fs-h3:22px;--fs-h4:18px;
--fs-lead:19px;--fs-body:16px;--fs-sm:14px;--fs-xs:12.5px;--fs-mono:13.5px;--fs-num:96px;
--lh-body:1.6;--lh-prose:1.7;--lh-display:.98;--lh-h1:1.05;--lh-h2:1.1;--lh-h3:1.22;
--tr-hero:-.035em;--tr-tight:-.025em;--tr-snug:-.012em;--tr-num:-.045em;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;--s10:64px;--s11:80px;--s12:96px;
--gap:16px;--pad:28px;--pad-lg:40px;--section:64px;
--r-xl:28px;--r-lg:24px;--r-md:18px;--r-ctl:14px;--r-sm:10px;--r-xs:6px;--r-pill:999px;
--ease:cubic-bezier(.2,.8,.2,1);--ease-pop:cubic-bezier(.34,1.56,.64,1);--t1:120ms;--t2:200ms;--t3:360ms;
--maxw:1240px;--maxw-read:720px;--gutter:clamp(16px,4vw,48px);
}

/* ---------- 2. Colour tokens: light (default) ---------- */
:root,.theme-light{
color-scheme:light;
--table:#EEEDE9;--tile:#FFFFFF;--tile-2:#F5F4F0;--sunk:#E9E7E1;
--line:#E4E2DC;--line-strong:#D2CFC7;--field-line:#87868C;--field-bg:#FFFFFF;
--text:#1B1B1D;--muted:#5D5D63;
--amber:#EEA90E;--amber-hover:#E09D05;--on-amber:#1B1B1D;--amber-text:#8A5D00;--amber-tint:#FDF3DD;
--ink:#1C1C1E;--on-ink:#F2F2F0;--ink-tint:#F1F1F2;
--primary:#EEA90E;--primary-hover:#E09D05;--on-primary:#1B1B1D;
--sel:#1C1C1E;--sel-hover:#36363A;--on-sel:#F2F2F0;
--toggle-on:#1C1C1E;--toggle-knob:#EEA90E;
--focus:#8A5D00;--focus-halo:#F8DD9F;--selection:#F8DD9F;
--ok:#0B7363;--ok-tint:#E3F3EF;--danger:#B42318;--danger-tint:#FCE9E6;--on-danger:#FFFFFF;
--code-bg:#1C1C1E;--code-text:#F2F2F0;
--disabled-bg:#E9E8E3;--disabled-text:#8E8D93;
--scrim:rgba(17,17,18,.86);
--shadow-sm:0 1px 2px rgba(27,27,29,.08);
--shadow-lift:0 2px 6px rgba(27,27,29,.05),0 16px 32px -14px rgba(27,27,29,.28);
--shadow-pop:0 6px 16px -4px rgba(27,27,29,.14),0 28px 60px -18px rgba(27,27,29,.32);
}

/* ---------- 3. Colour tokens: dark (html[data-scheme="dark"]; .theme-dark forces it on one panel) ---------- */
:root[data-scheme="dark"],.theme-dark{
color-scheme:dark;
--table:#111112;--tile:#1C1C1F;--tile-2:#252529;--sunk:#2D2D32;
--line:#2E2E33;--line-strong:#414148;--field-line:#77777F;--field-bg:#1C1C1F;
--text:#F2F2F0;--muted:#A6A6AD;
--amber:#EEA90E;--amber-hover:#F5B92E;--on-amber:#1B1B1D;--amber-text:#EEA90E;--amber-tint:#3E331C;
--ink:#2B2B30;--on-ink:#F2F2F0;--ink-tint:#2A2A2E;
--primary:#EEA90E;--primary-hover:#F5B92E;--on-primary:#1B1B1D;
--sel:#F2F2F0;--sel-hover:#DADAD6;--on-sel:#1B1B1D;
--toggle-on:#EEA90E;--toggle-knob:#1B1B1D;
--focus:#EEA90E;--focus-halo:#5A4518;--selection:#6B5216;
--ok:#4CC9B6;--ok-tint:#173431;--danger:#FF8A7A;--danger-tint:#3B1F1C;--on-danger:#1B1B1D;
--code-bg:#111112;--code-text:#F2F2F0;
--disabled-bg:#26262A;--disabled-text:#6E6E76;
--scrim:rgba(0,0,0,.88);
--shadow-sm:0 1px 2px rgba(0,0,0,.5);
--shadow-lift:0 2px 6px rgba(0,0,0,.3),0 18px 36px -12px rgba(0,0,0,.72);
--shadow-pop:0 8px 18px -4px rgba(0,0,0,.45),0 30px 64px -16px rgba(0,0,0,.8);
}
/* no JavaScript (no data-scheme attribute): follow the operating system */
@media (prefers-color-scheme:dark){
:root:not([data-scheme]){
color-scheme:dark;
--table:#111112;--tile:#1C1C1F;--tile-2:#252529;--sunk:#2D2D32;
--line:#2E2E33;--line-strong:#414148;--field-line:#77777F;--field-bg:#1C1C1F;
--text:#F2F2F0;--muted:#A6A6AD;
--amber:#EEA90E;--amber-hover:#F5B92E;--on-amber:#1B1B1D;--amber-text:#EEA90E;--amber-tint:#3E331C;
--ink:#2B2B30;--on-ink:#F2F2F0;--ink-tint:#2A2A2E;
--primary:#EEA90E;--primary-hover:#F5B92E;--on-primary:#1B1B1D;
--sel:#F2F2F0;--sel-hover:#DADAD6;--on-sel:#1B1B1D;
--toggle-on:#EEA90E;--toggle-knob:#1B1B1D;
--focus:#EEA90E;--focus-halo:#5A4518;--selection:#6B5216;
--ok:#4CC9B6;--ok-tint:#173431;--danger:#FF8A7A;--danger-tint:#3B1F1C;--on-danger:#1B1B1D;
--code-bg:#111112;--code-text:#F2F2F0;
--disabled-bg:#26262A;--disabled-text:#6E6E76;
--scrim:rgba(0,0,0,.88);
--shadow-sm:0 1px 2px rgba(0,0,0,.5);
--shadow-lift:0 2px 6px rgba(0,0,0,.3),0 18px 36px -12px rgba(0,0,0,.72);
--shadow-pop:0 8px 18px -4px rgba(0,0,0,.45),0 30px 64px -16px rgba(0,0,0,.8);
}
}
.theme-light,.theme-dark{color:var(--text)}

/* ---------- 4. Base (body.site; zero-specificity resets so components always win) ---------- */
.site{min-height:100vh;background:var(--table);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-wrap:break-word}
:where(.site) *,:where(.site) *::before,:where(.site) *::after{box-sizing:border-box}
:where(.site) :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,ul,ol){margin:0}
:where(.site) :where(ul,ol){padding:0;list-style:none}
:where(.site) :where(h1,h2,h3,h4,h5,h6){font-family:var(--font-display);font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug);color:var(--text);text-wrap:balance}
:where(.site) h1{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-h1);letter-spacing:var(--tr-tight)}
:where(.site) h2{font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-h2);letter-spacing:var(--tr-tight)}
:where(.site) h3{font-size:var(--fs-h3)}
:where(.site) h4{font-size:var(--fs-h4)}
:where(.site) p{text-wrap:pretty}
:where(.site) a{color:inherit;text-decoration:none}
:where(.site) img{display:block;max-width:100%;height:auto}
:where(.site) :where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit;margin:0}
:where(.site) button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:where(.site) :where(code,kbd,samp,pre){font-family:var(--font-mono)}
:where(.site) :where(strong,b){font-weight:700}
:where(.site) table{border-collapse:collapse}
:where(.site) hr{border:0;height:1px;margin:0;background:var(--line)}
:where(.site) [id]{scroll-margin-top:24px}
:where(.site) :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:where(.site) fieldset{min-width:0;margin:0;padding:0;border:0}
:where(.site) legend{padding:0}
:where(.site) dialog{color:var(--text)}
.site ::selection{background:var(--selection);color:var(--text)}
.site ::placeholder{color:var(--muted);opacity:1}

/* ---------- 5. Arabic + RTL (lang/dir live on <html>; nested lang/dir elements re-tune themselves) ---------- */
:root[lang="ar"],.site [lang="ar"]{--font-display:"Almarai","Figtree","Almarai Fallback","Figtree Fallback",system-ui,"Segoe UI",Tahoma,sans-serif;--font-body:"Almarai","Figtree","Almarai Fallback","Figtree Fallback",system-ui,"Segoe UI",Tahoma,sans-serif;--tr-hero:0em;--tr-tight:0em;--tr-snug:0em;--tr-num:0em;--fs-hero:60px;--lh-body:1.8;--lh-prose:1.95;--lh-display:1.3;--lh-h1:1.35;--lh-h2:1.4;--lh-h3:1.5}
.site [lang="en"]{--font-display:"Bricolage Grotesque","Almarai","Bricolage Fallback","Almarai Fallback",ui-sans-serif,system-ui,"Segoe UI",sans-serif;--font-body:"Figtree","Almarai","Figtree Fallback","Almarai Fallback",ui-sans-serif,system-ui,"Segoe UI",sans-serif;--tr-hero:-.035em;--tr-tight:-.025em;--tr-snug:-.012em;--tr-num:-.045em;--lh-body:1.6;--lh-prose:1.7;--lh-display:.98;--lh-h1:1.05;--lh-h2:1.1;--lh-h3:1.22}
.site [lang="ar"],.site [lang="en"]{font-family:var(--font-body)}
.site [dir="rtl"]{line-height:var(--lh-body)}
[dir="rtl"] .flip,[dir="rtl"] .icon--dir{transform:scaleX(-1)}
.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- 6. Layout ---------- */
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--read{max-width:calc(var(--maxw-read) + 2 * var(--gutter))}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:1/-1}
.rows-2{grid-row:span 2}.rows-3{grid-row:span 3}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--gap)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3)}
.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.section{padding-top:var(--section)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);padding-bottom:var(--s5)}

/* ---------- 7. Tiles (the bento unit) ---------- */
.tile{position:relative;isolation:isolate;min-width:0;padding:var(--pad);border-radius:var(--r-lg);background:var(--tile);color:var(--text)}
.tile--xl{padding:var(--pad-lg);border-radius:var(--r-xl)}
.tile--flush{padding:0;overflow:hidden}
.tile--clip{overflow:hidden}
.tile--soft{background:var(--tile-2)}
.tile--dash{background:transparent;border:2px dashed var(--line-strong)}
a.tile,.tile--link{display:block;transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
a.tile:hover,.tile--link:hover,.tile.is-hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
a.tile:active{transform:translateY(0)}

/* ---------- 8. Type helpers ---------- */
.display{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:800;line-height:var(--lh-display);letter-spacing:var(--tr-hero);text-wrap:balance}
.h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-h1);letter-spacing:var(--tr-tight)}
.h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;line-height:var(--lh-h2);letter-spacing:var(--tr-tight)}
.h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.h4{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.muted{color:var(--muted)}
.amber-text{color:var(--amber-text)}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono)}
.tnum{font-variant-numeric:tabular-nums}
.num{font-family:var(--font-display);font-size:var(--fs-num);font-weight:800;line-height:.86;letter-spacing:var(--tr-num);font-variant-numeric:lining-nums tabular-nums}
.kicker{font-size:13px;font-weight:600;line-height:1.3;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:12px 14px;border-radius:var(--r-pill);background:var(--amber-tint);color:var(--text);font-size:14px;font-weight:600;line-height:1}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--amber);flex:none}
.link{color:var(--text);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color var(--t1) var(--ease)}
.link:hover{text-decoration-color:currentColor}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text);transition:gap var(--t2) var(--ease)}
.arrow-link:hover{gap:10px}
.arrow-link .icon{width:18px;height:18px}
.tbd{display:inline-flex;align-items:center;padding:2px 8px;border-radius:8px;border:1.5px dashed var(--amber-text);background:var(--amber-tint);color:var(--amber-text);font-family:var(--font-mono);font-size:.8em;font-weight:600;letter-spacing:0}
:root[lang="ar"] .tbd,.tbd[lang="ar"]{font-family:var(--font-body)}

/* ---------- 9. Icons (sprite: <svg class="icon"><use href="…/icons.svg#i-NAME">) + icon chips ---------- */
.icon,.ic{display:inline-block;flex:none;width:24px;height:24px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic--16{width:16px;height:16px}.ic--18{width:18px;height:18px}.ic--20{width:20px;height:20px}.ic--32{width:32px;height:32px}.ic--48{width:48px;height:48px}
.ichip{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-ctl);background:var(--ink-tint);color:var(--text)}
.ichip .icon{width:22px;height:22px}
.ichip--amber{background:var(--amber-tint);color:var(--amber-text)}
.ichip--solid{background:var(--amber);color:var(--on-amber)}
.ichip--ink{background:var(--sel);color:var(--on-sel)}
.ichip--ok{background:var(--ok-tint);color:var(--ok)}
.ichip--danger{background:var(--danger-tint);color:var(--danger)}
.ichip--sm{width:36px;height:36px;border-radius:12px}.ichip--sm .icon{width:18px;height:18px}
.ichip--lg{width:56px;height:56px;border-radius:18px}.ichip--lg .icon{width:28px;height:28px}
.ichip--xl{width:72px;height:72px;border-radius:22px}.ichip--xl .icon{width:34px;height:34px}
.app-icon{display:block;flex:none;width:56px;height:56px;border-radius:13px}
.app-icon--72{width:72px;height:72px;border-radius:16.5px}
.app-icon--64{width:64px;height:64px;border-radius:15px}
:root[data-scheme="dark"] .app-icon,.theme-dark .app-icon,.tile--ink .app-icon{box-shadow:0 0 0 1px var(--line-strong)}
img.app-icon{object-fit:cover}

/* ---------- 10. Header, skip link, phone menu sheet ---------- */
.skip-link{position:absolute;top:8px;inset-inline-start:8px;z-index:100;display:inline-flex;align-items:center;height:44px;padding-inline:18px;border-radius:var(--r-ctl);background:var(--primary);color:var(--on-primary);font-weight:700;transform:translateY(-150%);transition:transform var(--t2) var(--ease)}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:3px solid var(--focus);outline-offset:2px}
.hdr{position:relative;padding-top:var(--s4)}
.hdr__bar{display:flex;align-items:center;gap:var(--s2);height:68px;padding-inline:10px;border-radius:22px;background:var(--tile)}
.hdr__logo{display:inline-flex;align-items:center;height:52px;padding-inline:10px;border-radius:var(--r-ctl);color:var(--text);transition:background-color var(--t1) var(--ease)}
.hdr__logo:hover{background:var(--tile-2)}
.hdr__logo svg,.hdr__logo img{display:block;width:59px;height:40px}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:var(--s3)}
.nav__link{display:inline-flex;align-items:center;gap:8px;height:44px;padding-inline:16px;border-radius:var(--r-ctl);color:var(--text);font-size:15px;font-weight:600;line-height:1;white-space:nowrap;transition:background-color var(--t1) var(--ease)}
.nav__link:hover{background:var(--tile-2)}
.nav__link[aria-current="page"]{background:var(--amber-tint)}
.nav__link[aria-current="page"]::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--amber);flex:none}
.hdr__actions{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.hdr .hdr__menu{display:none}
.lang-switch{font-weight:600}
.hdr__menu .ph-ic-close,.hdr__menu[aria-expanded="true"] .ph-ic-menu{display:none}
.hdr__menu[aria-expanded="true"] .ph-ic-close{display:inline-block}
.ph-menu-anchor{position:relative;z-index:30;height:0}
.ph-menu{position:absolute;top:var(--s2);inset-inline:var(--gutter);display:none;flex-direction:column;gap:2px;padding:var(--s2);border-radius:var(--r-lg);background:var(--tile);box-shadow:var(--shadow-pop)}
.ph-menu.is-open,.ph-menu:target{display:flex}
.ph-menu .nav__link{height:48px;font-size:16px}
.ph-menu hr{margin:6px 14px}
/* theme toggle: JS only (the button does nothing without it); the moon shows in light, the sun in dark */
:root:not(.js) [data-theme-toggle]{display:none}
.show-dark{display:none}
:root[data-scheme="dark"] .show-dark,.theme-dark .show-dark{display:inline-block}
:root[data-scheme="dark"] .show-light,.theme-dark .show-light{display:none}
@media (prefers-color-scheme:dark){
:root:not([data-scheme]) .show-dark{display:inline-block}
:root:not([data-scheme]) .show-light{display:none}
}
/* language hint (site.js inserts it when the visitor's languages prefer the other version of the page) */
.lang-hint{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);padding:10px;padding-inline-start:18px;border-radius:var(--r-md);background:var(--amber-tint);color:var(--text);font-size:15px;font-weight:600}
.lang-hint::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--amber);flex:none}
.lang-hint__text{flex:1 1 auto;min-width:0}
.lang-hint .btn--icon{margin-inline-start:auto}

/* ---------- 11. Footer ---------- */
.ftr{padding-block:var(--section) var(--s6)}
.ftr__tile{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--s8) var(--s7);padding:var(--pad-lg);border-radius:var(--r-xl)}
.ftr__brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.ftr__brand .logo svg,.ftr__brand .logo img{width:68px;height:46px}
.ftr__desc{max-width:34ch;color:var(--muted);font-size:15px}
.ftr__contact{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ftr__col{display:flex;flex-direction:column;gap:var(--s3)}
.ftr__title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:var(--tr-snug);color:var(--text)}
.ftr__links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ftr__link{color:var(--muted);font-size:15px;transition:color var(--t1) var(--ease)}
.ftr__link:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ftr__link--sm{font-size:13px}
.ftr__bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s6);border-top:1px solid var(--line);color:var(--muted);font-size:14px}

/* ---------- 12. Buttons ---------- */
.btn{--h:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding-inline:18px;border:1.5px solid transparent;border-radius:var(--r-ctl);font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease),color var(--t1) var(--ease),transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease)}
.btn .icon{width:20px;height:20px}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--primary:hover{background:var(--primary-hover)}
.btn--secondary{background:var(--tile);color:var(--text);border-color:var(--line-strong)}
.btn--secondary:hover{background:var(--tile-2);border-color:var(--field-line)}
.btn--ghost{background:transparent;color:var(--text)}
.btn--ghost:hover{background:var(--tile-2)}
.btn--ink{background:var(--sel);color:var(--on-sel)}
.btn--ink:hover{background:var(--sel-hover)}
.btn--danger{background:var(--danger-tint);color:var(--danger)}
.btn--danger:hover{background:var(--danger);color:var(--on-danger)}
.btn--sm{--h:36px;padding-inline:14px;border-radius:12px;font-size:14px}
.btn--sm .icon{width:18px;height:18px}
.btn--lg{--h:54px;padding-inline:24px;border-radius:16px;font-size:16.5px}
.btn--lg .icon{width:22px;height:22px}
.btn--icon{width:var(--h);padding-inline:0}
.btn--block{display:flex;width:100%}
.btn--stack{flex-direction:column;gap:3px;height:auto;min-height:var(--h);padding-block:10px;white-space:normal;text-align:center}
.btn__sub{font-size:12.5px;font-weight:500;opacity:.85}
.btn__lines{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start}
.btn:focus-visible,.btn.is-focus{outline:3px solid var(--focus);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:transparent;cursor:not-allowed;transform:none;box-shadow:none}
.btn.is-busy{cursor:progress;opacity:.75}

/* ---------- 13. Chips, badges, tags, platform pills, status ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:14px;border:0;border-radius:var(--r-pill);background:var(--tile-2);color:var(--text);font-size:14.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.chip:hover{background:var(--sunk)}
.chip .icon{width:18px;height:18px}
.chip__count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.chip__check{display:none}
/* a chip can be a <label> around a visually hidden checkbox (forms that work without JS) */
.chip__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip[aria-pressed="true"],.chip.is-on,.chip:has(> .chip__input:checked){background:var(--sel);color:var(--on-sel);font-weight:600}
.chip[aria-pressed="true"] .chip__count,.chip.is-on .chip__count,.chip:has(> .chip__input:checked) .chip__count{color:var(--on-sel)}
.chip[aria-pressed="true"] .chip__check,.chip.is-on .chip__check,.chip:has(> .chip__input:checked) .chip__check{display:inline-block}
.chip:has(> .chip__input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding-inline:10px;border-radius:var(--r-pill);background:var(--ink-tint);color:var(--text);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}
.badge .icon{width:15px;height:15px}
.badge--amber{background:var(--amber-tint);color:var(--amber-text)}
.badge--solid{background:var(--amber);color:var(--on-amber)}
.badge--ink{background:var(--sel);color:var(--on-sel)}
.badge--ok{background:var(--ok-tint);color:var(--ok)}
.badge--danger{background:var(--danger-tint);color:var(--danger)}
.badge--line{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.tag{display:inline-flex;align-items:center;height:26px;padding-inline:10px;border-radius:var(--r-pill);background:var(--tile-2);color:var(--muted);font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}
a.tag{transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
a.tag:hover{background:var(--sunk);color:var(--text)}
.plats{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.plat{display:inline-flex;align-items:center;gap:6px;height:30px;padding-inline:10px 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--text);font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.plat .icon{width:16px;height:16px}
.status{display:inline-flex;align-items:center;gap:7px;height:28px;padding-inline:10px 12px;border-radius:var(--r-pill);background:var(--ok-tint);color:var(--ok);font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status--draft{background:var(--ink-tint);color:var(--muted)}
.status--warn{background:var(--amber-tint);color:var(--amber-text)}
.status--danger{background:var(--danger-tint);color:var(--danger)}
.count-pill{display:inline-grid;place-items:center;min-width:22px;height:22px;padding-inline:6px;border-radius:var(--r-pill);background:var(--amber);color:var(--on-amber);font-size:12px;font-weight:700;line-height:1}

/* ---------- 14. Form controls ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.label{color:var(--text);font-size:14px;font-weight:600;line-height:1.3}
.hint{color:var(--muted);font-size:13px;line-height:1.45}
.counter{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.counter.is-over{color:var(--danger);font-weight:600}
.field__error{display:flex;align-items:flex-start;gap:6px;color:var(--danger);font-size:13.5px;font-weight:600;line-height:1.45}
.field__error .icon{width:16px;height:16px;margin-top:1px}
.input,.select,.textarea{display:block;width:100%;height:46px;padding-inline:14px;border:1.5px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field-bg);color:var(--text);font-family:var(--font-body);font-size:15.5px;line-height:1.3;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--muted)}
.input:focus,.select:focus,.textarea:focus,.input.is-focus,.select.is-focus,.textarea.is-focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px var(--focus-halo)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus,.textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--danger-tint)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--disabled-bg);color:var(--disabled-text);border-color:transparent;cursor:not-allowed}
.input[readonly],.textarea[readonly]{background:var(--tile-2)}
.input--mono{font-family:var(--font-mono);font-size:14px}
.textarea{height:auto;min-height:132px;padding-block:12px;line-height:1.6;resize:vertical}
.textarea--code{font-family:var(--font-mono);font-size:13.5px;line-height:1.7}
.textarea--sm{min-height:0;padding-block:10px;font-size:14.5px;line-height:1.5;resize:none}
.search{position:relative;display:block;min-width:0}
.search .icon{position:absolute;top:50%;inset-inline-start:14px;width:20px;height:20px;margin-top:-10px;color:var(--muted);pointer-events:none}
.search .input{padding-inline-start:44px}
.search .input::-webkit-search-cancel-button{cursor:pointer}
.select{appearance:none;-webkit-appearance:none;padding-inline-end:44px;cursor:pointer}
.select-wrap{position:relative;display:block;min-width:0}
.select-wrap .icon{position:absolute;top:50%;inset-inline-end:14px;width:20px;height:20px;margin-top:-10px;color:var(--muted);pointer-events:none}
.check{position:relative;display:inline-flex;align-items:flex-start;gap:10px;color:var(--text);font-size:15px;line-height:22px;cursor:pointer}
.check__input{position:absolute;top:0;inset-inline-start:0;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.check__box{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border:2px solid var(--field-line);border-radius:7px;background:var(--field-bg);color:transparent;transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.check__box .icon{width:16px;height:16px;stroke-width:3}
.check:hover .check__box{border-color:var(--text)}
.check__input:checked + .check__box{background:var(--sel);border-color:var(--sel);color:var(--on-sel)}
.check__input:focus-visible + .check__box{outline:3px solid var(--focus);outline-offset:2px}
.check__count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.toggle{position:relative;display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:15px;line-height:1.35;cursor:pointer}
.toggle__input{position:absolute;top:50%;inset-inline-start:0;width:48px;height:28px;margin:-14px 0 0;opacity:0;cursor:pointer}
.toggle__track{position:relative;flex:none;width:48px;height:28px;border:2px solid var(--field-line);border-radius:var(--r-pill);background:transparent;transition:background-color var(--t2) var(--ease),border-color var(--t2) var(--ease)}
.toggle__knob{position:absolute;top:50%;inset-inline-start:4px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--field-line);transition:inset-inline-start var(--t2) var(--ease-pop),width var(--t2) var(--ease),height var(--t2) var(--ease),margin var(--t2) var(--ease),background-color var(--t2) var(--ease)}
.toggle__input:checked + .toggle__track{background:var(--toggle-on);border-color:var(--toggle-on)}
.toggle__input:checked + .toggle__track .toggle__knob{inset-inline-start:22px;width:20px;height:20px;margin-top:-10px;background:var(--toggle-knob)}
.toggle__input:focus-visible + .toggle__track{outline:3px solid var(--focus);outline-offset:2px}
.toggle__input:disabled + .toggle__track{opacity:.45}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:52px;padding-block:6px}
.toggle-row + .toggle-row{border-top:1px solid var(--line)}
.tg-text{display:flex;flex-direction:column;gap:2px}
.tg-text .hint{font-size:12.5px}
/* honeypot field: off-screen for people, present for bots */
.hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
/* form status message (comment form, contact form, admin notices) */
.notice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--tile-2);color:var(--text);font-size:15px;line-height:1.5}
.notice > .icon{width:20px;height:20px;margin-top:1px}
.notice--ok{background:var(--ok-tint)}
.notice--ok > .icon{color:var(--ok)}
.notice--error{background:var(--danger-tint)}
.notice--error > .icon{color:var(--danger)}
.notice--warn{background:var(--amber-tint)}
.notice--warn > .icon{color:var(--amber-text)}

/* ---------- 15. Tabs / segmented, breadcrumb ---------- */
.tabs{display:inline-flex;align-items:center;gap:4px;width:fit-content;max-width:100%;padding:4px;border-radius:16px;background:var(--tile-2)}
.tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding-inline:16px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.tab .icon{width:18px;height:18px}
.tab:hover{background:var(--sunk);color:var(--text)}
.tab[aria-selected="true"],.tab[aria-pressed="true"],.tab[aria-current="true"],.tab.is-on,.tab:has(> .tab__input:checked){background:var(--sel);color:var(--on-sel)}
.tab__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tab:has(> .tab__input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tab__n{color:var(--muted);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.tab.is-on .tab__n,.tab[aria-pressed="true"] .tab__n,.tab[aria-selected="true"] .tab__n{color:var(--on-sel)}
.tabs--block{display:flex}
.tabs--block .tab{flex:1 1 0}
.crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;gap:6px}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--t1) var(--ease),text-decoration-color var(--t1) var(--ease)}
.crumbs a:hover{color:var(--text);text-decoration-color:var(--amber)}
.crumbs .icon{width:16px;height:16px}
.crumbs [aria-current="page"]{color:var(--text);font-weight:600}

/* ---------- 16. Tables + facts list ---------- */
.table-wrap{position:relative;overflow-x:auto;border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--line)}
.table tr:first-child th:first-child{border-start-start-radius:var(--r-md)}
.table tr:first-child th:last-child{border-start-end-radius:var(--r-md)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.table th{padding:12px 16px;background:var(--tile-2);color:var(--muted);font-size:13px;font-weight:600;text-align:start;white-space:nowrap}
.table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}
.table--dense th{padding:10px 12px}
.table--dense td{padding:12px}
.facts{display:flex;flex-direction:column}
.facts__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding-block:11px;border-top:1px solid var(--line);font-size:14.5px}
.facts__row:first-child{border-top:0}
.facts__k{color:var(--muted)}
.facts__v{font-weight:600;text-align:end}
.facts__row--wrap{flex-wrap:wrap;row-gap:6px}
.facts__sub{display:flex;align-items:flex-start;gap:8px;flex-basis:100%;font-size:14px;line-height:1.45}
.facts__sub .icon{width:16px;height:16px;margin-top:2px;color:var(--muted)}

/* ---------- 17. Prose (rendered markdown from the content pipeline), LTR + RTL ---------- */
.prose{max-width:var(--maxw-read);color:var(--text);font-size:17px;line-height:var(--lh-prose)}
.prose > * + *{margin-top:1em}
.prose > :first-child{margin-top:0}
.prose :is(h1,h2,h3,h4,h5,h6){position:relative}
.prose h1{font-size:40px;line-height:1.08}
.prose h2{margin-top:1.7em;font-size:28px;line-height:1.15}
.prose h3{margin-top:1.4em;font-size:21px;line-height:1.25}
.prose h4{margin-top:1.3em;font-family:var(--font-body);font-size:17px;font-weight:700;letter-spacing:0}
.prose :is(h5,h6){margin-top:1.2em;font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:0}
.prose :is(h1,h2,h3,h4,h5,h6) + *{margin-top:.55em}
.prose :is(h2,h3,h4,h5,h6)[id]{scroll-margin-top:24px}
/* heading permalinks (league/commonmark HeadingPermalinkExtension, inserted after the text, aria-hidden) */
.prose .heading-permalink{display:inline;margin-inline-start:.3em;padding-inline:.15em;border-radius:6px;line-height:0;color:var(--muted);font-family:var(--font-body);font-weight:600;text-decoration:none;opacity:0;transition:opacity var(--t1) var(--ease),color var(--t1) var(--ease)}
.prose :is(h2,h3,h4,h5,h6):hover .heading-permalink,.prose .heading-permalink:focus-visible{opacity:1}
.prose .heading-permalink:hover{color:var(--amber-text)}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose a.heading-permalink{text-decoration:none}
.prose ul{padding-inline-start:1.5em}
.prose ul > li{position:relative}
.prose ul > li::before{content:"";position:absolute;top:calc(var(--lh-prose) * .5em - .21em);inset-inline-start:-1.15em;width:.42em;height:.42em;border-radius:3px;background:var(--amber)}
.prose ol{padding-inline-start:1.6em;list-style:decimal}
.prose ol > li::marker{color:var(--amber-text);font-family:var(--font-display);font-weight:800}
.prose li + li{margin-top:.45em}
.prose li > :is(ul,ol){margin-top:.45em}
.prose li > p + p{margin-top:.6em}
/* GFM task lists */
.prose li:has(> input[type="checkbox"])::before{content:none}
.prose li > input[type="checkbox"]{width:1.05em;height:1.05em;margin-inline:-1.4em .45em;vertical-align:-.12em;accent-color:var(--sel)}
.prose blockquote{padding:18px 22px;border-radius:var(--r-md);background:var(--amber-tint);color:var(--text)}
.prose blockquote > * + *{margin-top:.75em}
.prose code{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.12em .4em;border-radius:var(--r-xs);background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--line);font-size:.86em;direction:ltr;unicode-bidi:isolate}
.prose kbd{padding:.1em .45em;border-radius:var(--r-xs);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 0 var(--line-strong);font-size:.82em;direction:ltr;unicode-bidi:isolate}
.prose pre{padding:18px 20px;border-radius:var(--r-md);background:var(--code-bg);color:var(--code-text);font-size:14px;line-height:1.65;direction:ltr;text-align:left;/* physical-ok: code is always LTR */overflow-x:auto;tab-size:4}
.prose pre code{padding:0;background:none;box-shadow:none;font-size:inherit;color:inherit;unicode-bidi:normal}
.prose pre:focus-visible{outline-offset:2px}
/* tables: the pipeline wraps every table in div.table-wrap (frame + horizontal scroll) */
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.5}
.prose table{border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--line)}
.prose .table-wrap{box-shadow:none}
.prose th{padding:12px 14px;background:var(--tile-2);font-weight:700;text-align:start;vertical-align:bottom}
.prose td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.prose :is(th,td) + :is(th,td){border-inline-start:1px solid var(--line)}
.prose tr:first-child th:first-child{border-start-start-radius:var(--r-md)}
.prose tr:first-child th:last-child{border-start-end-radius:var(--r-md)}
/* GFM column alignment arrives as align="left|center|right": map it to logical sides so Arabic tables mirror */
.prose :is(th,td)[align="left"]{text-align:start}
.prose :is(th,td)[align="center"]{text-align:center}
.prose :is(th,td)[align="right"]{text-align:end}
.prose hr{height:2px;margin-block:2em;border-radius:2px;background:var(--line)}
.prose img{border-radius:var(--r-md)}
.prose picture{display:block}
.prose figure{display:flex;flex-direction:column;gap:10px}
.prose figure img{width:100%;box-shadow:inset 0 0 0 1.5px var(--line)}
.prose figcaption{color:var(--muted);font-size:14px;line-height:1.5}
.prose del{color:var(--muted)}
.prose sup{line-height:0}
.prose mark{padding-inline:.15em;border-radius:3px;background:var(--selection);color:var(--text)}
.prose :is(b,strong){font-weight:700}
/* footnotes (league/commonmark FootnoteExtension) */
.prose .footnote-ref,.prose sup a{padding-inline:.15em;font-size:.78em;font-weight:700;text-decoration:none;color:var(--amber-text)}
.prose .footnotes{margin-top:2.2em;padding-top:1em;border-top:2px solid var(--line);color:var(--muted);font-size:.88em}
.prose .footnotes hr{display:none}
.prose .footnotes ol{margin:0}
.prose .footnote-backref{margin-inline-start:.3em;text-decoration:none}
/* callouts: GitHub alerts become aside.callout.callout--note|tip|important|warning|caution (role="note");
   the icon chip is drawn by CSS so the pipeline output needs no icon markup. Optional first child p.callout__title. */
.prose .callout,.callout{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px 20px;border-radius:var(--r-md);background:var(--tile-2);color:var(--text)}
.callout::before,.callout::after{content:"";grid-column:1;grid-row:1 / span 9;align-self:start;width:36px;height:36px}
.callout::before{border-radius:12px;background:var(--amber-tint)}
.callout::after{background:var(--amber-text);-webkit-mask:var(--callout-icon) center / 18px 18px no-repeat;mask:var(--callout-icon) center / 18px 18px no-repeat}
.callout > *{grid-column:2;min-width:0}
.callout > * + *{margin-top:.6em}
.callout > :first-child{margin-top:0}
.callout > .ichip{grid-column:1;grid-row:1 / span 9}
.callout:has(> .ichip)::before,.callout:has(> .ichip)::after{content:none}
.callout__title{font-weight:700}
.callout{--callout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.8' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.callout--tip{--callout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 17.5h5M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2v1.5h5V16c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.callout--important{--callout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17H7.5A4 4 0 0 1 3.5 13V8A4 4 0 0 1 7.5 4h9A4 4 0 0 1 20.5 8v5a4 4 0 0 1-4 4H12l-4 3.5z'/%3E%3Cpath d='M12 7.3v3.7'/%3E%3Ccircle cx='12' cy='13.6' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.callout--warning{--callout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.27 4.1a2 2 0 0 1 3.46 0l7.5 13A2 2 0 0 1 19.5 20h-15a2 2 0 0 1-1.73-3z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='16.9' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.callout--caution{--callout-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3z'/%3E%3Cpath d='M12 7.5v5'/%3E%3Ccircle cx='12' cy='16' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.callout.callout--tip::before{background:var(--ok-tint)}
.callout.callout--tip::after{background:var(--ok)}
.callout.callout--important,.callout.callout--warning{background:var(--amber-tint)}
.callout.callout--important::before,.callout.callout--warning::before{background:var(--amber)}
.callout.callout--important::after,.callout.callout--warning::after{background:var(--on-amber)}
.callout.callout--caution{background:var(--danger-tint)}
.callout.callout--caution::before{background:var(--danger)}
.callout.callout--caution::after{background:var(--on-danger)}
/* code block with a copy button (site.js wraps .prose pre in div.codeblock) */
.codeblock{position:relative;direction:ltr}
.codeblock pre{padding-inline-end:124px}
.codeblock > .btn{position:absolute;top:9px;inset-inline-end:9px}
:root[lang="ar"] .prose,.prose[dir="rtl"],[dir="rtl"] .prose{font-size:18.5px}
:root[lang="ar"] .prose h2,.prose[dir="rtl"] h2,[dir="rtl"] .prose h2{font-size:27px;line-height:1.45}
:root[lang="ar"] .prose h3,.prose[dir="rtl"] h3,[dir="rtl"] .prose h3{font-size:21px;line-height:1.5}
:root[lang="ar"] .prose ol > li::marker,.prose[dir="rtl"] ol > li::marker,[dir="rtl"] .prose ol > li::marker{font-family:var(--font-body)}
.prose[lang="en"],[lang="en"] > .prose{font-size:17px}

/* ---------- 18. Software card + article card ---------- */
.app-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;height:100%;padding:22px;border-radius:var(--r-lg);background:var(--tile);color:var(--text);transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
a.app-card:hover,.app-card.is-hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
a.app-card:active{transform:translateY(0)}
.app-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.app-card__head{display:flex;flex-direction:column;gap:6px}
.app-card__name{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.app-card__tagline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:15px;line-height:1.5}
.app-card__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.app-card__plats{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;color:var(--text);font-weight:600}
.app-card__plats > span{display:inline-flex;align-items:center;gap:6px}
.app-card__plats .icon{width:18px;height:18px}
.post-card{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--r-lg);background:var(--tile);color:var(--text);transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
a.post-card:hover,.post-card.is-hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.post-card__cover{position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:2/1;overflow:hidden;background:var(--amber);color:var(--on-amber)}
.post-card__cover--ink{background:var(--ink);color:var(--on-ink)}
.post-card__cover--soft{background:var(--tile-2);color:var(--text)}
.post-card__cover img{width:100%;height:100%;object-fit:cover}
.post-card__glyph{font-family:var(--font-display);font-size:96px;font-weight:800;line-height:1;letter-spacing:var(--tr-num)}
.post-card__cover--ink .post-card__glyph[lang="ar"]{margin-inline-end:56px;font-size:80px}
.post-card__body{display:flex;flex-direction:column;flex:1;gap:10px;padding:20px 22px 22px}
.post-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:13.5px}
.post-card__meta > span{display:inline-flex;align-items:center;gap:6px}
.post-card__meta .icon{width:16px;height:16px}
.post-card__title{font-family:var(--font-display);font-size:21px;font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.post-card__excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:15px;line-height:1.55}
.post-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}

/* ---------- 19. Gallery + screenshot frames + lightbox ---------- */
.gallery{display:flex;flex-direction:column;gap:var(--s3)}
.gallery__panel{display:flex;flex-direction:column;gap:var(--s3)}
.gallery__main{display:flex;flex-direction:column;gap:10px}
:root:not(.js) .gallery__tabs{display:none}
/* with JS, only the first platform panel shows until site.js takes over (no flash of every panel) */
:root.js [data-gallery]:not([data-ready]) .gallery__panel ~ .gallery__panel{display:none}
.shot{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--tile-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.shot img{display:block;width:100%;height:100%;object-fit:contain}
.shot--win{aspect-ratio:16/10}
.shot--phone{aspect-ratio:540/1199;border-radius:26px}
a.shot,button.shot{cursor:zoom-in}
.shot__zoom{position:absolute;inset-block-end:12px;inset-inline-end:12px;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tile);color:var(--text);box-shadow:var(--shadow-sm);opacity:0;transition:opacity var(--t1) var(--ease)}
.shot:hover .shot__zoom,.shot:focus-visible .shot__zoom{opacity:1}
.shot__zoom .icon{width:20px;height:20px}
.stage{display:flex;align-items:center;justify-content:center;gap:var(--s4);aspect-ratio:16/10;padding:var(--s6);border-radius:var(--r-lg);background:var(--tile-2)}
.stage .shot--phone{height:100%;width:auto}
.thumbs{display:flex;gap:10px;padding:6px;overflow-x:auto;scroll-snap-type:x mandatory}
.thumb{flex:none;display:block;width:116px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--tile-2);box-shadow:inset 0 0 0 1.5px var(--line);opacity:.72;cursor:pointer;scroll-snap-align:start;transition:opacity var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.thumb--phone{width:58px}
.thumb--phone img{aspect-ratio:540/1199}
.thumb:hover{opacity:1}
.thumb[aria-pressed="true"],.thumb[aria-current="true"],.thumb.is-on{opacity:1;box-shadow:0 0 0 2px var(--tile),0 0 0 5px var(--sel)}
.caption{color:var(--muted);font-size:14px;line-height:1.5}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.strip > *{flex:none;scroll-snap-align:start}
.strip .shot--phone{width:200px}
/* lightbox: a <dialog> built by site.js (data-lightbox); keyboard, swipe, RTL order, focus kept inside */
.lightbox{width:100vw;max-width:100vw;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:transparent;color:#F2F2F0;overflow:hidden}
.lightbox::backdrop{background:var(--scrim)}
.lightbox__inner{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;width:100%;height:100%;padding:16px clamp(12px,3vw,32px) 20px;touch-action:pan-y}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#F2F2F0;font-size:14px;font-weight:600}
.lightbox__count{font-variant-numeric:tabular-nums}
.lightbox__stage{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0}
.lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--r-md);object-fit:contain;background:#1C1C1F;box-shadow:0 30px 64px -16px rgba(0,0,0,.8)}
.lightbox__img--phone{border-radius:26px}
.lightbox__cap{max-width:72ch;margin-inline:auto;color:#D2D2D6;font-size:15px;line-height:1.5;text-align:center}
.lightbox .btn{--h:48px;background:rgba(242,242,240,.12);color:#F2F2F0;border-color:transparent}
.lightbox .btn:hover{background:rgba(242,242,240,.24)}
.lightbox .btn:focus-visible{outline-color:#EEA90E}
.lightbox__nav{position:absolute;top:50%;margin-top:-24px;z-index:1}
.lightbox__nav--prev{inset-inline-start:0}
.lightbox__nav--next{inset-inline-end:0}
.lightbox__nav:disabled{opacity:.3;background:rgba(242,242,240,.12);color:#F2F2F0}
:root.has-dialog,.has-dialog body{overflow:hidden}

/* ---------- 20. Download row, copy box, copy buttons ---------- */
.dls{display:flex;flex-direction:column;gap:10px}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--s3) var(--s5);padding:18px 20px;border-radius:var(--r-lg);background:var(--tile)}
.dl__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.dl__title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--font-display);font-size:17px;font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.dl__file{color:var(--muted);font-family:var(--font-mono);font-size:13px;overflow-wrap:anywhere}
.dl__meta{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--muted);font-size:13.5px}
.dl > .btn{min-width:150px}
.dl__end{grid-column:4}
.dl .copybox__label{min-width:48px}
.copybox{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:12px 4px;border-radius:12px;background:var(--tile-2);color:var(--text);font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.copybox__label{color:var(--muted);font-family:var(--font-body);font-size:12px;font-weight:600}
.copybox .btn{--h:32px;border-radius:9px}
.copybox .btn .icon{width:17px;height:17px}
.copybox.is-copied .copybox__label,.copybox__label.is-ok{color:var(--ok)}
[data-copy] .ic-done,[data-share] .ic-done,.copybtn .ic-done{display:none}
[data-copy].is-copied .ic-copy,[data-share].is-copied .ic-copy,.copybtn.is-copied .ic-copy{display:none}
[data-copy].is-copied .ic-done,[data-share].is-copied .ic-done,.copybtn.is-copied .ic-done{display:inline-block;color:var(--ok)}
.btn--primary[data-copy].is-copied .ic-done{color:inherit}
[data-copy] .copied-text,[data-share] .copied-text{display:none}
[data-copy].is-copied .copy-text,[data-share].is-copied .copy-text{display:none}
[data-copy].is-copied .copied-text,[data-share].is-copied .copied-text{display:inline}
/* JS-only controls; pre[data-copy] is the markdown pipeline's code-block marker and must stay visible */
:root:not(.js) [data-copy]:not(pre),:root:not(.js) [data-share],:root:not(.js) [data-reply-to]{display:none}

/* ---------- 21. Price card ---------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--gap)}
.price{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:18px;height:100%;padding:26px;border-radius:var(--r-lg);background:var(--tile);color:var(--text)}
.price--inset{background:var(--tile-2)}
.price__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:28px}
.price__name{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.price__amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.price__value{font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1;letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums}
.price__value .tbd{padding:7px 10px;font-size:.5em;line-height:1.2;white-space:nowrap;vertical-align:top}
.price__per{color:var(--muted);font-size:14px}
.price__list{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.price__list li{display:flex;align-items:flex-start;gap:10px}
.price__list .icon{width:20px;height:20px;margin-top:1px;color:var(--amber-text)}
.price .btn{margin-top:auto}

/* ---------- 22. Like, share, comments, avatar ---------- */
.like{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:14px 18px;border:0;border-radius:var(--r-pill);background:var(--tile-2);color:var(--text);font-size:15px;font-weight:600;line-height:1;cursor:pointer;transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease),transform var(--t1) var(--ease)}
.like:hover{background:var(--sunk)}
.like:active{transform:scale(.97)}
.like .icon{width:22px;height:22px}
.like__count{color:var(--muted);font-variant-numeric:tabular-nums}
.like__on{display:none}
.like[aria-pressed="true"],.like.is-liked{background:var(--amber);color:var(--on-amber)}
.like[aria-pressed="true"] .like__count,.like.is-liked .like__count{color:var(--on-amber)}
.like[aria-pressed="true"] .like__on,.like.is-liked .like__on{display:inline-block;animation:bento-pop var(--t3) var(--ease-pop)}
.like[aria-pressed="true"] .like__off,.like.is-liked .like__off{display:none}
.like--sm{height:34px;gap:6px;padding-inline:10px 12px;font-size:13.5px}
.like--sm .icon{width:18px;height:18px}
:root:not(.js) .like{cursor:default;pointer-events:none}
@keyframes bento-pop{0%{transform:scale(.5)}100%{transform:scale(1)}}
.avatar{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-ctl);background:var(--ink-tint);color:var(--text);font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1}
.avatar--amber{background:var(--amber);color:var(--on-amber)}
.avatar--ink{background:var(--sel);color:var(--on-sel)}
.avatar--sm{width:36px;height:36px;border-radius:12px;font-size:15px}
.avatar--lg{width:64px;height:64px;border-radius:20px;font-size:26px}
.comments{display:flex;flex-direction:column;gap:12px}
.comment{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:20px;border-radius:var(--r-lg);background:var(--tile)}
.comment--reply{padding:16px;border-radius:var(--r-md);background:var(--tile-2)}
.comment--pending{box-shadow:inset 0 0 0 2px var(--amber-tint)}
.comment__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.comment__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.comment__name{font-weight:700}
.comment__time{color:var(--muted);font-size:13.5px}
.comment__text{line-height:var(--lh-body)}
.comment__text > * + *{margin-top:.6em}
.comment__text a{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px;overflow-wrap:anywhere}
.comment__actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.comment__replies{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.comment-form{display:flex;flex-direction:column;gap:16px}
[data-form-status]:empty{display:none}
.comment-form__replying{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px;padding-inline-start:14px;border-radius:var(--r-ctl);background:var(--amber-tint);font-size:14.5px;font-weight:600}
.comment-form__replying .btn{margin-inline-start:auto}
/* the form moves under the comment being answered (site.js data-reply-to) */
.comment .comment-form{align-self:stretch;gap:12px;padding:16px;border-radius:var(--r-md);background:var(--tile-2)}
.comment--reply .comment-form,.comment .comment .comment-form{background:var(--tile)}
.comment .comment-form .textarea{min-height:96px}
.comment .comment-form .comment-form__title{display:none}

/* ---------- 23. Accordion (native details/summary) ---------- */
.accs{display:flex;flex-direction:column;gap:10px}
.acc{overflow:hidden;border-radius:var(--r-lg);background:var(--tile)}
.acc__h{margin:0;font:inherit}
.acc__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px;border:0;background:transparent;color:var(--text);font-family:var(--font-display);font-size:18px;font-weight:700;line-height:var(--lh-h3);text-align:start;cursor:pointer;list-style:none}
.acc__btn::-webkit-details-marker{display:none}
.acc__btn::marker{content:""}
.acc__btn:hover{background:var(--tile-2)}
.acc__chev{width:22px;height:22px;margin-inline-start:auto;color:var(--muted);transition:transform var(--t2) var(--ease)}
.acc__btn[aria-expanded="true"] .acc__chev,details[open] > .acc__btn .acc__chev{transform:rotate(180deg)}
.acc__panel{padding:4px 18px 20px}
.acc .dl{border-radius:var(--r-md);background:var(--tile-2)}
.acc .dl .copybox{background:var(--tile)}
.acc .price{gap:14px;padding:20px;border-radius:var(--r-md)}
.acc .price__value{font-size:36px}

/* ---------- 24. Dialog (confirm, used by admin.js and site.js) ---------- */
.dialog{width:min(460px,calc(100vw - 32px));margin:auto;padding:0;border:0;border-radius:var(--r-lg);background:var(--tile);color:var(--text);box-shadow:var(--shadow-pop)}
.dialog::backdrop{background:var(--scrim)}
.dialog__body{display:flex;flex-direction:column;gap:14px;padding:24px}
.dialog__title{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.3}
.dialog__text{color:var(--muted);font-size:15px;line-height:1.55}
.dialog__acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:6px}

/* ---------- 25. Utilities + motif ---------- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.divider{height:1px;background:var(--line)}
.nowrap{white-space:nowrap}
.ms-auto{margin-inline-start:auto}
.self-start{align-self:flex-start}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-end{justify-content:flex-end}
.no-wrap{flex-wrap:nowrap}
.w-full{width:100%}
.mw-360{max-width:360px}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.fs-15{font-size:15px}
.pt-4{padding-top:4px}.pt-8{padding-top:8px}.pb-2{padding-bottom:2px}.pb-6{padding-bottom:6px}
.gap-2{gap:2px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-18{gap:18px}.gap-20{gap:20px}.gap-22{gap:22px}.gap-24{gap:24px}.gap-28{gap:28px}
.peek{position:absolute;z-index:-1;height:auto;pointer-events:none;fill:var(--amber)}
.peek--ink{fill:var(--ink)}
.peek__ink{fill:var(--text)}
.peek--tr{top:-56px;inset-inline-end:-44px;width:220px}
.peek--br{bottom:-64px;inset-inline-end:-40px;width:220px}
.peek--bl{bottom:-56px;inset-inline-start:-40px;width:200px}
.peek--tl{top:-60px;inset-inline-start:-44px;width:200px}
[dir="rtl"] .peek{transform:scaleX(-1)}
.logo{display:inline-flex;align-items:center;color:var(--text)}
.logo svg{display:block}
/* a logo uploaded in Appearance (View\Brand::logoFor) keeps its aspect ratio and its own colours: on dark grounds it
   sits on a light plate so a dark logo stays visible */
.hdr__logo .logo-up,.site .logo .logo-up{width:auto}
.logo-up{box-sizing:content-box;border-radius:8px}
:root[data-scheme="dark"] .logo-up,.theme-dark .logo-up,.tile--ink .logo-up{padding:3px 6px;background:#F7F6F2}
@media (prefers-color-scheme:dark){
:root:not([data-scheme]) .logo-up{padding:3px 6px;background:#F7F6F2}
}
/* meter widths without inline styles: .meter__bar.pct-0 … .pct-100 (steps of 5) */
.meter{height:8px;overflow:hidden;border-radius:var(--r-pill);background:var(--tile-2)}
.meter__bar{width:0;height:100%;border-radius:inherit;background:var(--amber)}
.pct-5{width:5%}.pct-10{width:10%}.pct-15{width:15%}.pct-20{width:20%}.pct-25{width:25%}.pct-30{width:30%}.pct-35{width:35%}.pct-40{width:40%}.pct-45{width:45%}.pct-50{width:50%}.pct-55{width:55%}.pct-60{width:60%}.pct-65{width:65%}.pct-70{width:70%}.pct-75{width:75%}.pct-80{width:80%}.pct-85{width:85%}.pct-90{width:90%}.pct-95{width:95%}.pct-100{width:100%}

/* ---------- 26. Scoped colour blocks (keep LAST among components: they re-tune every token inside) ---------- */
.tile--tint{background:var(--amber-tint)}
.tile--amber{background:var(--amber);color:var(--text);--text:#1B1B1D;--muted:#4A3A12;--tile:#F5BF45;--tile-2:#F3B732;--sunk:#E6A70F;--line:#D99B10;--line-strong:#A87A10;--field-line:#6E5418;--field-bg:#FFF8E8;--amber-text:#1B1B1D;--amber-tint:#F5BF45;--ink-tint:#F3B732;--primary:#1B1B1D;--primary-hover:#36363A;--on-primary:#F2F2F0;--sel:#1B1B1D;--sel-hover:#36363A;--on-sel:#F2F2F0;--toggle-on:#1B1B1D;--toggle-knob:#F2F2F0;--focus:#1B1B1D;--focus-halo:#F7CF6E;--selection:#FFF1CC}
.tile--ink{background:var(--ink);color:var(--text);--text:#F2F2F0;--muted:#ABABB2;--tile:#2A2A2E;--tile-2:#2A2A2E;--sunk:#35353A;--line:#38383E;--line-strong:#4C4C54;--field-line:#7E7E86;--field-bg:#232326;--amber-text:#EEA90E;--amber-tint:#3D321B;--ink-tint:#2E2E33;--sel:#F2F2F0;--sel-hover:#DADAD6;--on-sel:#1B1B1D;--toggle-on:#EEA90E;--toggle-knob:#1B1B1D;--focus:#EEA90E;--focus-halo:#5A4518;--ok:#4CC9B6;--ok-tint:#173431;--danger:#FF8A7A;--danger-tint:#3B1F1C;--on-danger:#1B1B1D;--code-bg:#111112;--selection:#6B5216}
:root[data-scheme="dark"] .tile--ink,.theme-dark .tile--ink{--tile:#36363C;--tile-2:#36363C;--sunk:#404047;--line:#45454C;--line-strong:#5A5A62;--ink-tint:#3A3A40;--amber-tint:#4A3C1E;--field-bg:#2B2B30;--muted:#B4B4BA}
@media (prefers-color-scheme:dark){
:root:not([data-scheme]) .tile--ink{--tile:#36363C;--tile-2:#36363C;--sunk:#404047;--line:#45454C;--line-strong:#5A5A62;--ink-tint:#3A3A40;--amber-tint:#4A3C1E;--field-bg:#2B2B30;--muted:#B4B4BA}
}

/* =====================================================================================================================
   PAGE PATTERNS (from the boards' board-only rules; class names unchanged)
   ===================================================================================================================== */

/* ---------- 27. Home (d-home) ---------- */
.home{padding-top:var(--gap)}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s7);min-height:600px}
.hero__peek{width:330px;top:-46px;inset-inline-end:-118px}
.hero__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);max-width:520px;margin-top:auto}
.hero__body .lead{max-width:430px}
.hero__ctas{padding-top:var(--s2)}
.hero-bento .fact{display:flex;flex-direction:column;gap:var(--s4)}
.fact__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.fact__foot{display:flex;flex-direction:column;gap:var(--s2);margin-top:auto}
.fact__count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.fact__unit{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1;letter-spacing:var(--tr-tight)}
.fact__note{color:var(--muted);font-size:14.5px;line-height:1.45}
.fact__ar{align-self:flex-start;font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1.25}
.fact__go{transition:transform var(--t2) var(--ease)}
a.fact:hover .fact__go{transform:translateX(3px)}/* physical-ok: mirrored on the next line */
[dir="rtl"] a.fact:hover .fact__go{transform:translateX(-3px)}/* physical-ok */
.fact__ext{color:var(--muted)}
.toolbox{display:grid;grid-template-columns:repeat(4,minmax(0,56px));gap:10px;flex:0 1 auto;min-width:0}
/* the tiles shrink only when the phone is narrower than the 4 x 56 px row (reflow at 320 px, WCAG 1.4.10) */
.toolbox > *{width:100%;max-width:56px;height:auto;aspect-ratio:1/1}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--s8)}
.feat__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.feat__icon{width:72px;height:72px;border-radius:17px}
.feat__meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:14.5px}
.feat__media{display:flex;flex-direction:column;gap:10px;min-width:0}
.cards--3{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.aa{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s8)}
.aa__copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);max-width:660px}
.aa__kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;line-height:1}
.aa__title{font-size:var(--fs-d1);line-height:1;letter-spacing:var(--tr-tight)}
.aa__text{max-width:46ch;font-size:var(--fs-lead);line-height:1.55}
.aa__art{display:flex;align-items:center;gap:var(--s4);padding-inline-end:var(--s4)}
.aa__to{width:32px;height:32px;color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(2,72px);gap:12px}
.slots .app-icon{width:72px;height:72px;border-radius:18px}
.slot{display:grid;place-items:center;width:72px;height:72px;border:2px dashed var(--line-strong);border-radius:18px;color:var(--muted)}
.slot .icon{width:26px;height:26px}

/* ---------- 28. Software catalog (d-software) ---------- */
.cat{display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--gap)}
/* page head: the tile's own 12-column grid repeats the bento below, so the controls sit exactly over the card columns */
.cat-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:var(--s5) var(--gap);padding:var(--s7) 0}
.cat-head__title{grid-column:1 / span 3;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding-inline-start:var(--pad-lg)}
.cat-count{display:inline-flex;align-items:center;height:46px;padding-inline:18px;border-radius:var(--r-pill);background:var(--tile-2);color:var(--text);font-size:15.5px;font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease)}
.cat-count.is-filtered{background:var(--sel);color:var(--on-sel)}
.cat-tools{grid-column:4 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);min-width:0;padding-inline-end:132px}
.cat-tools .search{flex:1 1 280px}
.cat-tools .select-wrap{flex:0 0 228px}
.cat-submit{flex:none}
:root.js .cat-submit{display:none}
/* filter tile (one card wide) */
.cat-main{align-items:start}
.fpanel{position:sticky;top:var(--s4);padding:var(--s6)}
.fpanel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s5)}
.fpanel__title{display:flex;align-items:center;gap:10px}
.fgroup{display:flex;flex-direction:column;gap:var(--s3);padding-block:var(--s5);border-top:1px solid var(--line)}
.fgroup:last-child{padding-bottom:0}
.fgroup__title{display:flex;align-items:center;gap:8px}
.frows{display:flex;flex-direction:column;gap:4px;margin-inline:-10px}
.fpanel .chip{border:1.5px solid transparent}
.chip--row{width:100%;height:40px;padding-inline:10px 12px;gap:10px;border-radius:12px;background:transparent}
.chip--row:not(.is-on):not(:has(> .chip__input:checked)):hover{background:var(--tile-2)}
.chip--row .chip__count{margin-inline-start:auto}
.chip__glyph{color:var(--muted)}
.chip.is-on .chip__glyph,.chip:has(> .chip__input:checked) .chip__glyph{display:none}
.fpanel .chip.is-dim{border-style:dashed;border-color:var(--line-strong);background:transparent;color:var(--muted)}
.fpanel .chip.is-dim:hover{background:var(--tile-2)}
.fpanel .chip.is-on:hover,.fpanel .chip:has(> .chip__input:checked):hover,.rbar .chip:hover{background:var(--sel-hover)}
.trows{display:flex;flex-direction:column}
.fpanel .toggle-row{min-height:44px;padding-block:4px}
.fpanel .toggle{font-size:14.5px;font-weight:500}
.toggle-row.is-dim .toggle{color:var(--muted)}
/* results */
.cat-results{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
/* the 298 px catalog cards are narrower than the home cards: three lines let every real tagline show in full */
.cat-results .cards:not(.is-list) .app-card__tagline{-webkit-line-clamp:3}
.rbar > li{display:flex}
.rbar .chip .icon{width:16px;height:16px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);min-height:420px;padding:var(--s9) var(--s6);text-align:center}
.empty > .row{justify-content:center}
/* error pages: the search box and its button share one line, the box takes the room */
.empty > form.row{flex-wrap:nowrap;width:100%;max-width:460px}
.empty > form.row > .search{flex:1 1 auto}
.app-card.is-filtered-out{display:none}
/* list view: one row per tool */
.cards.is-list{grid-template-columns:minmax(0,1fr);gap:10px}
.cards.is-list .app-card{display:grid;grid-template-columns:56px minmax(0,1fr) 300px;grid-template-areas:"icon main price" "icon foot traits";align-items:center;gap:8px 22px;padding:18px 22px}
.cards.is-list .app-card__top{display:contents}
.cards.is-list .app-card__top > .app-icon,.cards.is-list .app-card__top > .ichip{grid-area:icon}
.cards.is-list .app-card__top > .badge{grid-area:price;justify-self:end}
.cards.is-list .app-card > .stack,.cards.is-list .app-card > .app-card__head{grid-area:main}
.cards.is-list .app-card > .badges{grid-area:traits;justify-content:flex-end}
.cards.is-list .app-card__foot{grid-area:foot;justify-content:flex-start;gap:6px 20px;margin-top:0;padding-top:0;border-top:0}
.cards.is-list .app-card__tagline{-webkit-line-clamp:1}

/* ---------- 29. Software detail, compact (d-wirepulse) ---------- */
.dp{display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--s5)}
.dp-sec{display:flex;flex-direction:column;min-width:0;padding-top:var(--s6)}
.dp-hero > .tile{display:flex;flex-direction:column}
.dp-title{gap:20px}
.dp-title .peek{width:150px;top:-42px;inset-inline-end:-34px}
.dp-dev{display:flex;align-items:center;gap:16px}
.dp-dev .app-icon{width:72px;height:72px;border-radius:16.5px}
.dp-short{color:var(--text);font-size:15px;line-height:1.5}
.dp-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.dp-ver{display:flex;flex-wrap:wrap;gap:2px 14px}
.dp-ver > span{white-space:nowrap}
.dp-privacy-tags{margin-top:auto;padding-top:var(--s2)}
.ic-back{transform:scaleX(-1)}
[dir="rtl"] .ic-back{transform:none}
.dp-gallery .stage .shot--phone{width:26.5%;height:auto}
.dp-stage-cap{display:flex;flex-direction:column;gap:8px;max-width:240px}
.dp-anchors{background:var(--tile)}
/* the facts card is sticky only inside its own span-4 column wrapper (owner rule O-1) */
.dp-facts{position:sticky;top:24px}
.dp-note{display:flex;align-items:flex-start;gap:8px;max-width:66ch;color:var(--muted);font-size:14.5px;line-height:1.5}
.dp-note .icon{width:18px;height:18px;margin-top:2px;color:var(--amber-text)}
.dp-note strong{color:var(--text);font-weight:600}
.dp .prose td:first-child{font-weight:600}
.dp-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s3) var(--s7);padding-top:var(--s4)}
.dp-col{display:flex;flex-direction:column;min-width:0}
.dp-col > .tile{flex:1}
.dp-rel + .dp-rel{padding-top:var(--s5);border-top:1px solid var(--line)}
.dp-rel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3)}
/* collapsible section cards on phones: each section's content sits in <details class="dp-acc" open data-sm-details>;
   above 720 px the summary is not displayed and .dp-sec__body keeps the section's column layout (section 32 + 32b) */
.dp-sec__body{display:flex;flex-direction:column;min-width:0}

/* ---------- 30. Article (d-article-ar) ---------- */
.art{display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--s6)}
.art > .section{padding-top:calc(var(--section) - var(--gap))}
.art-article{display:flex;flex-direction:column;gap:var(--gap)}
.art-title{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.art-title .lead{line-height:1.85}
.art-tags{display:flex;flex-wrap:wrap;gap:6px}
.art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;color:var(--muted);font-size:15px;line-height:1.5}
.art-meta > span{display:inline-flex;align-items:center;gap:8px}
.art-meta .icon{width:18px;height:18px}
.art-meta strong{color:var(--text)}
.art-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);width:100%;padding-top:var(--s5);border-top:1px solid var(--line)}
.art-title .art-bar{margin-top:auto}
.art-bar__end{margin-inline-start:auto}
.art-cover{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:320px}
.art-cover__glyph{font-family:var(--font-display);font-size:112px;font-weight:800;line-height:1.15;color:var(--text)}
.art-read{display:flex;flex-direction:column;gap:var(--s8)}
.art-prose{width:100%;margin-inline:auto}
.art-basmala{font-weight:700;text-align:center}
.prose .art-eq{padding:22px 26px}
.art-eq p{font-family:var(--font-display);font-size:22px;font-weight:800;line-height:1.8}
.art-eq__op{color:var(--amber-text)}
.art-end{width:100%;max-width:var(--maxw-read);margin-inline:auto}
.art-rail{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.art-rail__top{flex:1 1 auto}
.art-toc{position:sticky;top:var(--s6);display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6) var(--s5)}
.art-toc__list{counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.art-toc__link{counter-increment:toc;display:flex;align-items:flex-start;gap:12px;padding:7px 8px;border-radius:12px;color:var(--text);font-size:15px;line-height:26px;transition:background-color var(--t1) var(--ease)}
.art-toc__link::before{content:counter(toc);display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--tile-2);color:var(--muted);font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.art-toc__link:hover{background:var(--tile-2)}
.art-toc__link[aria-current="true"]{background:var(--amber-tint);font-weight:700}
.art-toc__link[aria-current="true"]::before{background:var(--amber);color:var(--on-amber)}
.art-author{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.art-count{display:flex;align-items:center;gap:12px}
.art-count .count-pill{min-width:32px;height:32px;padding-inline:9px;font-size:15px}
.art-form{align-self:start}
.art-form .textarea{min-height:104px}
.comments > .comment:last-child{flex:1 1 auto}
.art-nudge{padding-inline-end:100px}
.art-reply{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-md);background:var(--tile-2)}
.comment--reply .art-reply{background:var(--tile)}
.art-reply .textarea{min-height:96px}

/* ---------- 31. Phone page (d-mobile-ar; these classes also serve any page at <= 720 px) ---------- */
.site .ph-en[lang="en"]{font-family:var(--font-display)}
.ph-main{display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--gap)}
.ph-tap{min-height:44px}
.ph-nw{white-space:nowrap}
.ph-hero{display:flex;flex-direction:column;gap:var(--s5)}
.ph-hero__icon{width:72px;height:72px;border-radius:17px}
.ph-hero__id{display:flex;flex-direction:column;gap:8px}
.ph-hero .kicker{line-height:1.6}
.ph-hero .lead{line-height:1.8}
.ph-title{font-size:40px;line-height:1}
.ph-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:14px;line-height:1.5}
.ph-cta{display:flex;flex-direction:column;gap:10px}
.ph-cta__title{display:inline-flex;align-items:center;gap:8px}
.ph-also{align-self:center}
.ph-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.ph-fact{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--s4);min-height:156px}
.ph-fact__big{display:flex;align-items:baseline;gap:8px}
.ph-fact__unit{font-family:var(--font-display);font-size:24px;font-weight:800;line-height:1}
.ph-fact__note{color:var(--muted);font-size:14px;line-height:1.6}
.ph-fact__title{font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1.45}
.ph-shots{display:flex;flex-direction:column;gap:var(--s4)}
.ph-shots__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.site .ph-strip{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);padding-bottom:var(--s3);scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.ph-strip:focus-visible{outline-offset:-3px;border-radius:var(--r-md)}
.ph-shot{display:flex;flex-direction:column;gap:12px;width:200px}
.ph-shot__cap{display:flex;align-items:baseline;gap:8px;color:var(--text);font-size:15px;font-weight:700;line-height:1.4}
.ph-shot__n{color:var(--amber-text);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.ph-panel{display:flex;flex-direction:column;gap:var(--s4)}
.ph-panel__lead{font-size:16px;line-height:1.8}
.ph-note{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-md);background:var(--tile-2)}
.ph-note__head{display:flex;align-items:center;gap:10px}
.ph-note__title{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.4}
.ph-note__date{margin-inline-start:auto;color:var(--muted);font-size:13.5px}
.ph-note .prose{font-size:16px}

/* =====================================================================================================================
   RESPONSIVE (boards: <= 1100 tablet, <= 960, <= 720 phone)
   ===================================================================================================================== */
@media (min-width:721px) and (max-width:1100px){
.hero-bento > .hero{grid-column:1/-1;grid-row:auto}
.hero-bento > .fact--tools{grid-column:span 6}
.hero-bento > .fact--oss,.hero-bento > .fact--ar{grid-column:span 3}
.hero__body .lead{max-width:min(430px,calc(100% - 120px))}
}
@media (max-width:1100px){
.cat-head{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad-lg)}
.cat-head__title,.cat-tools{grid-column:1 / -1}
.cat-head__title{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);padding-inline-start:0}
.cat-tools{padding-inline-end:96px}
.cat-main > .fpanel,.cat-main > .cat-results{grid-column:1 / -1}
.fpanel{position:static}
.fpanel__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));column-gap:var(--s7)}
}
@media (max-width:960px){
.feat,.aa{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 32. Phone (<= 720 px) ---------- */
@media (max-width:720px){
:root{--fs-hero:44px;--fs-d1:38px;--fs-h1:32px;--fs-h2:26px;--fs-h3:20px;--fs-lead:17px;--fs-num:72px;--gap:12px;--pad:20px;--pad-lg:24px;--section:44px;--r-xl:24px;--r-lg:22px;--gutter:16px}
:root[lang="ar"],.site [lang="ar"]{--fs-hero:38px}
.bento{grid-template-columns:minmax(0,1fr)}
.bento > *{grid-column:1/-1;grid-row:auto}
.hdr{padding-top:var(--s3)}
.hdr__bar{height:60px;padding-inline:6px;border-radius:20px}
.nav,.hide-sm{display:none}
.hdr .hdr__menu{display:inline-flex}
.ftr__tile{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s7) var(--s4);padding:var(--s6)}
.ftr__brand{grid-column:1/-1}
.ftr__links{align-items:stretch;gap:0}
.ftr__link{display:inline-flex;align-items:center;min-height:44px}
.ftr__tile .peek{display:none}
.btn{--h:46px}
.btn--sm{--h:44px}
.chip,.tab{height:44px}
.tabs{overflow-x:auto}
.like{height:48px}
.like--sm{height:44px}
.dl{grid-template-columns:auto minmax(0,1fr);align-items:start;padding:16px}
.dl > .copybox,.dl > .btn{grid-column:1/-1}
.dl > .btn{width:100%}
.dl__end{grid-column:1/-1}
.dl .copybox .btn{margin-inline-start:auto}
.copybox{height:52px}
.copybox .btn{--h:44px}
.prose{font-size:16.5px}
:root[lang="ar"] .prose,.prose[dir="rtl"],[dir="rtl"] .prose{font-size:17.5px}
.codeblock pre{padding-inline-end:20px;padding-top:56px}
.acc__btn{min-height:60px}
.comment{padding:16px;gap:12px}
.comment--reply{padding:14px}
.check,.toggle{min-height:44px;align-items:center}
.peek{width:150px}
.thumb{min-height:44px}
/* small links (breadcrumbs, "see all" arrows, tags) get an invisible 44 px tall hit area; the layout does not move */
.crumbs a,.arrow-link,a.tag{position:relative}
.crumbs a::after,.arrow-link::after,a.tag::after{content:"";position:absolute;inset-block:min(0px,calc(50% - 22px));inset-inline:0}
/* home */
.hero{min-height:0;gap:var(--s6)}
.hero__peek{width:150px;top:-30px;inset-inline-end:-84px}
.hero__body{max-width:none}
.hero .display{max-width:calc(100% - 44px)}
.aa__art{display:none}
/* catalog */
.cat-head{padding:var(--s6) var(--pad-lg)}
.cat-head .peek{display:none}
.cat-tools{padding-inline-end:0}
.cat-tools .search{flex-basis:100%}
.cat-tools .select-wrap{flex:1 1 auto}
.chip--row{height:44px}
.cards.is-list .app-card{display:flex;padding:22px}
.cards.is-list .app-card__top{display:flex}
.cards.is-list .app-card__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);justify-content:space-between}
.cards.is-list .app-card__tagline{-webkit-line-clamp:2}
.empty{min-height:320px;padding:var(--s8) var(--s5)}
/* error pages and empty states: the actions stack full width; no peek (it would sit on the text, as in the footer) */
.empty > .row:not(form){flex-direction:column;align-items:stretch;width:100%;max-width:340px}
.empty > .peek{display:none}
/* detail: the phone composition (tests/browser/styleguide/phone-ar.html) built from the desktop markup */
.dp{padding-top:var(--gap)}
.dp > .crumbs,.dp-anchors{display:none}
.dp-facts{position:static}
.dp-title{gap:var(--s5)}
.dp-dev{flex-direction:column;align-items:flex-start;gap:var(--s5);margin-bottom:-12px}
.dp-dev .stack{flex-direction:row;flex-wrap:wrap;gap:0 6px}
.dp-dev .stack > span{color:var(--muted);font-size:13px;font-weight:600;line-height:1.6}
.dp-dev .stack > .muted{order:-1}
.dp-dev .stack > .muted::after{content:"\00B7";margin-inline-start:6px}
.dp-title h1{font-size:40px;line-height:1}
.dp-title .lead{line-height:1.8}
.dp-short{display:none}
.dp-ver{gap:4px 14px;font-size:14px;line-height:1.5}
.dp-cta{gap:10px}
.dp-cta__more{flex-direction:column;align-items:stretch;gap:10px}
.dp-cta__more > .btn{width:100%}
.dp-cta__more > .arrow-link{align-self:center;min-height:44px}
.ph-duo > :only-child{grid-column:1/-1;min-height:0}
.ph-fact__big{flex-wrap:wrap;row-gap:6px}
/* screenshots: a charcoal tile with a sideways strip (the stage and the arrows give way to the thumbnails) */
.dp-gallery{background:var(--ink);color:var(--text);--text:#F2F2F0;--muted:#ABABB2;--tile:#2A2A2E;--tile-2:#2A2A2E;--sunk:#35353A;--line:#38383E;--line-strong:#4C4C54;--amber-text:#EEA90E;--amber-tint:#3D321B;--ink-tint:#2E2E33;--sel:#F2F2F0;--sel-hover:#DADAD6;--on-sel:#1B1B1D;--focus:#EEA90E;--focus-halo:#5A4518}
:root[data-scheme="dark"] .dp-gallery{--tile:#36363C;--tile-2:#36363C;--sunk:#404047;--line:#45454C;--line-strong:#5A5A62;--ink-tint:#3A3A40;--amber-tint:#4A3C1E;--muted:#B4B4BA}
.dp-gallery__h{padding-bottom:var(--s4);font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-snug)}
.dp-gallery .gallery__tabs.row,.dp-gallery .gallery__panel > figure{display:none}
:root.js .dp-gallery [data-sm-platform]:not([data-ready]) .gallery__panel{display:none}
:root.js .dp-gallery [data-sm-platform]:not([data-ready]) .gallery__panel--sm{display:flex}
.dp-gallery .thumbs{gap:12px;margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) var(--s3);scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.dp-gallery .thumb{display:flex;flex-direction:column;gap:12px;width:min(300px,78vw);padding:0;border-radius:0;background:none;box-shadow:none;opacity:1;overflow:visible}
.dp-gallery .thumb--phone{width:200px}
.dp-gallery .thumb img{border-radius:var(--r-md);background:var(--tile-2)}
.dp-gallery .thumb--phone img{border-radius:26px}
.thumb__cap{display:flex;align-items:baseline;gap:8px;color:var(--text);font-size:15px;font-weight:700;line-height:1.4}
.thumb__n{flex:none;color:var(--amber-text);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.thumb__label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* section cards: overview, details, downloads, pricing, release notes, privacy */
.dp-sec{padding-top:0}
.dp-card{padding:0;overflow:hidden;border-radius:var(--r-lg);background:var(--tile)}
.dp-acc__body{padding:4px 18px 20px}
.dp-sec__body{gap:var(--s4)}
.dp-acc__body > h2,.dp-acc__body > .sec-head > h2,.dp-col > .sec-head{display:none}
.dp-acc__body > .sec-head{padding-bottom:0}
.dp-acc .dl{border-radius:var(--r-md);background:var(--tile-2)}
.dp-acc .dl .copybox{background:var(--tile)}
.dp-acc .acc{background:var(--tile-2)}
.dp-acc .price{gap:14px;padding:20px;border-radius:var(--r-md)}
.dp-acc .price:not(.tile--ink):not(.tile--amber){background:var(--tile-2)}
.dp-acc .price__value{font-size:36px}
.dp-acc .dp-rel{padding:16px;border-radius:var(--r-md);background:var(--tile-2)}
.dp-acc .dp-rel + .dp-rel{padding-top:16px;border-top:0}
/* article */
.art-toc{display:none}
.art-rail{order:1}
.art-cover{min-height:180px}
.art-cover__glyph{font-size:96px}
.art-bar__end{margin-inline-start:0}
.art-nudge{padding-inline-end:0}
/* lightbox */
.lightbox__nav{top:auto;bottom:0;margin-top:0}
.lightbox__inner{padding-bottom:72px}
}
@media (prefers-color-scheme:dark) and (max-width:720px){
:root:not([data-scheme]) .dp-gallery{--tile:#36363C;--tile-2:#36363C;--sunk:#404047;--line:#45454C;--line-strong:#5A5A62;--ink-tint:#3A3A40;--amber-tint:#4A3C1E;--muted:#B4B4BA}
}

/* ---------- 32b. Above the phone breakpoint (> 720 px): phone-only parts are not displayed ---------- */
@media (min-width:721px){
.show-sm,.dp-acc__btn{display:none}
.dp-gallery__h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ---------- 33. Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
.site *,.site *::before,.site *::after{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
html{scroll-behavior:auto}
}

/* ---------- 34. Forced colours (Windows high contrast) ---------- */
@media (forced-colors:active){
.btn,.chip,.tab,.input,.select,.textarea,.like,.tile,.app-card,.post-card,.dl,.price,.comment,.acc{border:1px solid CanvasText}
.chip.is-on,.chip:has(> .chip__input:checked),.tab.is-on,.tab[aria-pressed="true"],.like[aria-pressed="true"]{outline:2px solid Highlight}
.peek{display:none}
}

/* ---------- 35. Print ---------- */
@media print{
:root:is([data-scheme],:not([data-scheme])),.theme-dark{color-scheme:light;--table:#fff;--tile:#fff;--tile-2:#f4f4f4;--sunk:#eee;--line:#bbb;--line-strong:#999;--field-line:#666;--field-bg:#fff;--text:#000;--muted:#333;--amber-text:#6b4800;--amber-tint:#fdf3dd;--ink:#fff;--on-ink:#000;--ink-tint:#f1f1f1;--sel:#000;--on-sel:#fff;--code-bg:#f4f4f4;--code-text:#000}
html,body,.site{background:#fff !important;color:#000}
.hdr,.ftr,.skip-link,.lang-hint,.ph-menu-anchor,.dp-anchors,.art-toc,.thumbs,.gallery__tabs,.like,[data-share],[data-copy],.comment-form,.art-form,.btn,.peek,.cat-tools,.fpanel,.rbar,.lightbox{display:none !important}
.tile,.app-card,.post-card,.dl,.price,.comment,.acc{box-shadow:none !important;border:1px solid #ccc;break-inside:avoid}
.tile--ink,.tile--amber,.post-card__cover,.post-card__cover--ink{background:#fff !important;color:#000 !important;--text:#000;--muted:#333}
.bento{display:block}
.bento > *{margin-bottom:12px}
.prose{max-width:none;font-size:11.5pt}
.prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#333;overflow-wrap:anywhere}
.prose pre{white-space:pre-wrap;border:1px solid #ccc}
.prose .heading-permalink{display:none}
details.acc > :not(summary){display:block}
a{color:#000}
}