/* Layout: the inner pages of the REVTRAK drawing set. Each page is one drawing: an ink title band with
   the page's key plan (the truss with its node lit), then paper sheets of detail, a title block, and the
   way on to the joined nodes. Tokens are the RevTrak Design System's, the same as the home page. */
:root{
  --canvas:#F3F2EE; --surface:#FFFFFF; --sunken:#F7F6F3; --hover:#F4F3EF; --selected:#F2F8DC;
  --line:#E3E1DB; --line-control:#80868F;
  --text:#0E1726; --text-2:#4B5565; --text-3:#646D7D;
  --action:#0E1726; --action-hover:#24324A; --on-action:#F5F3EE;
  --focus:#0E1726; --focus-gap:#F3F2EE;
  --a:#13693F; --a-soft:#E2F3E9; --b:#0A6670; --b-soft:#DDF1F2; --c:#9A4700; --c-soft:#FCEEDB; --d:#B3261E; --d-soft:#FBE5E2;
  --sub:#1F4FD1; --sub-soft:#E6ECFC; --rev:#5A3BC0; --rev-soft:#EDE8FB; --neu:#4B5565; --neu-soft:#EEEDE9; --on-code:#FFFFFF;
  --bezel:#0E1726;
  --band:#0E1726; --band-2:#18233A; --band-surface:#131D2E; --band-line:#28364D;
  --band-text:#F5F3EE; --band-text-2:#C3CAD6; --band-text-3:#8D97A8;
  --lime:#C6F432; --lime-hover:#D6F86A; --ink:#0E1726; --paper:#F5F3EE;
  --ba:#6BD49B; --bb:#5BC8D1; --bc:#F2A65A; --bd:#FF8A7E; --bsub:#8FAEFF;
  --font-display:"IBM Plex Sans Condensed","IBM Plex Sans Arabic","Arial Narrow",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0A0F18; --surface:#111925; --sunken:#0D141F; --hover:#162132; --selected:#1B2614;
    --line:#223044; --line-control:#66748A;
    --text:#E7EAEF; --text-2:#AAB3C0; --text-3:#8C97A7;
    --action:#C6F432; --action-hover:#D6F86A; --on-action:#0E1726;
    --focus:#C6F432; --focus-gap:#0A0F18;
    --a:#6BD49B; --a-soft:#11301F; --b:#5BC8D1; --b-soft:#0E2D31; --c:#F2A65A; --c-soft:#352210; --d:#FF8A7E; --d-soft:#3B1613;
    --sub:#8FAEFF; --sub-soft:#152349; --rev:#B8A5FF; --rev-soft:#251B46; --neu:#AAB3C0; --neu-soft:#1B2433; --on-code:#0E1726;
    --bezel:#04070C;
    --band:#070B12; --band-2:#121B2A; --band-surface:#0E1622; --band-line:#1F2B3D;
    --band-text-2:#AEB7C5; --band-text-3:#7C879A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#0A0F18; --surface:#111925; --sunken:#0D141F; --hover:#162132; --selected:#1B2614;
  --line:#223044; --line-control:#66748A;
  --text:#E7EAEF; --text-2:#AAB3C0; --text-3:#8C97A7;
  --action:#C6F432; --action-hover:#D6F86A; --on-action:#0E1726;
  --focus:#C6F432; --focus-gap:#0A0F18;
  --a:#6BD49B; --a-soft:#11301F; --b:#5BC8D1; --b-soft:#0E2D31; --c:#F2A65A; --c-soft:#352210; --d:#FF8A7E; --d-soft:#3B1613;
  --sub:#8FAEFF; --sub-soft:#152349; --rev:#B8A5FF; --rev-soft:#251B46; --neu:#AAB3C0; --neu-soft:#1B2433; --on-code:#0E1726;
  --bezel:#04070C;
  --band:#070B12; --band-2:#121B2A; --band-surface:#0E1622; --band-line:#1F2B3D;
  --band-text-2:#AEB7C5; --band-text-3:#7C879A;
  color-scheme:dark;
}

/* the two languages: every text comes as a pair, and the page shows one of them */
:root:not([lang="ar"]) [data-l="ar"],:root[lang="ar"] [data-l="en"]{display:none!important}

:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
:root[lang="ar"] body{line-height:1.75}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-gap),0 0 0 4px var(--focus);border-radius:4px}
.band :focus-visible{box-shadow:0 0 0 2px var(--band),0 0 0 4px var(--lime)}
.ref{font-family:var(--font-mono);font-size:.88em;font-weight:500;letter-spacing:.01em;direction:ltr;unicode-bidi:isolate}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{background:var(--band);color:var(--band-text)}
[dir="rtl"] .mirror{transform:scaleX(-1)}
.skip{position:fixed;inset-inline-start:16px;top:-60px;z-index:100;background:var(--lime);color:var(--ink);padding:8px 12px;border-radius:4px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--band)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--band);color:var(--band-text);border-bottom:1px solid var(--band-line)}
.top>.wrap{display:flex;align-items:center;gap:20px;min-height:60px}
.logo{display:inline-flex;flex:none;border-radius:2px}
.logo svg{display:block;height:22px;width:auto}
.nav{display:none;gap:2px;min-width:0}
@media (min-width:1100px){.nav{display:flex}}
.nav a{position:relative;color:var(--band-text-2);text-decoration:none;font-size:14px;font-weight:500;padding:8px 10px;border-radius:4px;white-space:nowrap;transition:color .12s}
.nav a:hover{color:var(--band-text)}
.nav a[aria-current="page"]{color:var(--band-text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:10px;bottom:1px;height:2px;background:var(--lime)}
.top-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.lang,.menu-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--band-line);color:var(--band-text);height:36px;min-width:72px;justify-content:center;padding-inline:12px;border-radius:4px;font:500 14px/1 var(--font-sans);cursor:pointer;transition:border-color .12s}
.lang:hover,.menu-btn:hover{border-color:var(--band-text-3)}
.menu-btn svg{width:14px;height:14px}
@media (min-width:1100px){.menu-btn{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:20px;border-radius:4px;border:1px solid transparent;font:600 15px/1 var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.btn svg{width:16px;height:16px;flex:none}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-hover)}
.btn-line{background:transparent;color:var(--band-text);border-color:var(--band-line)}
.btn-line:hover{border-color:var(--band-text-3)}
.btn-ink{background:var(--action);color:var(--on-action)}
.btn-ink:hover{background:var(--action-hover)}
.top .btn{height:36px;font-size:14px;padding-inline:14px}
@media (max-width:560px){.top .btn{display:none}}
.menu{border-top:1px solid var(--band-line);background:var(--band)}
.menu .wrap{padding-block:12px 18px;display:grid;gap:18px}
@media (min-width:700px){.menu .wrap{grid-template-columns:2fr 1fr}}
.menu h2{font:500 11.5px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--band-text-3);margin-bottom:6px}
:root[lang="ar"] .menu h2{font-family:var(--font-sans);font-size:13px;letter-spacing:0;text-transform:none}
.menu ul{list-style:none;padding:0;display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.menu a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:9px 8px;border-radius:4px;color:var(--band-text);text-decoration:none;font-size:15px}
.menu a:hover{background:var(--band-2)}
.menu a span{font:500 12px/1 var(--font-mono);color:var(--lime)}
.menu a[aria-current="page"]{background:var(--band-2)}
@media (min-width:1100px){.menu{display:none!important}}

/* shared type */
.over{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.band .over{color:var(--band-text-3)}
:root[lang="ar"] .over{font-family:var(--font-sans);font-size:13px;letter-spacing:0;text-transform:none}
.h1{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5.6vw,76px);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
:root[lang="ar"] .h1{letter-spacing:0;line-height:1.25;font-size:clamp(34px,4.6vw,62px)}
.h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.8vw,48px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
:root[lang="ar"] .h2{letter-spacing:0;line-height:1.3;font-size:clamp(28px,3.4vw,42px)}
.h3{font-size:19px;font-weight:600;line-height:1.3}
.lead{font-size:18px;line-height:1.6;color:var(--text-2);max-width:62ch}
.band .lead{color:var(--band-text-2)}
.sh{display:grid;gap:14px;max-width:800px}
.prose{display:grid;gap:14px;max-width:68ch;font-size:16.5px;color:var(--text-2)}
.prose b,.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--text);text-decoration-thickness:1px;text-underline-offset:3px}

/* the sheet: each section is a drawing sheet with a ruler of grid letters */
.sheet{position:relative;border-top:1px solid var(--line);scroll-margin-top:64px}
.band.sheet{border-top:0}
.sheet>.wrap{padding-block:64px 56px;display:grid;gap:36px}
@media (min-width:900px){.sheet>.wrap{padding-block:84px 64px;gap:44px}}
.ruler{display:none}
@media (min-width:900px){
  .ruler{display:flex;justify-content:space-around;position:absolute;top:0;inset-inline:0;max-width:1240px;margin-inline:auto;font:500 10px/1 var(--font-mono);color:var(--text-3);pointer-events:none}
  .ruler span{position:relative;padding-top:12px}
  .ruler span::before{content:"";position:absolute;top:0;inset-inline-start:50%;width:1px;height:6px;background:var(--line-control);opacity:.6}
  .band .ruler{color:var(--band-text-3)}
  .band .ruler span::before{background:var(--band-line);opacity:1}
}

/* the page's title band */
.ph>.wrap{padding-block:48px 56px;display:grid;gap:36px;align-items:center}
@media (min-width:980px){.ph>.wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;padding-block:72px 80px}}
.ph .lead{margin-top:6px}
.ph-t{display:grid;gap:16px;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font:500 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--band-text-3)}
:root[lang="ar"] .crumbs{font-family:var(--font-sans);font-size:13px;letter-spacing:0;text-transform:none}
.crumbs a{color:var(--band-text-2);text-decoration:none}
.crumbs a:hover{color:var(--band-text)}
.crumbs i{font-style:normal;opacity:.6}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.ph-kp{display:grid;gap:10px;justify-items:center;min-width:0;background:var(--band-surface);border:1px solid var(--band-line);border-radius:8px;padding:22px 20px 18px}
.ph-kp svg{display:block;width:100%;max-width:420px;height:auto}
.ph-kp p{font-size:13.5px;color:var(--band-text-3);text-align:center;max-width:40ch}

/* the truss drawings, drawn by build.py */
.kp-g{stroke:var(--line-control);stroke-width:8}
.kp-m{stroke:var(--line-control);stroke-width:7;opacity:.5}
.kp-m.on{stroke:var(--text);stroke-width:13;opacity:1}
.kp-n{fill:var(--surface);stroke:var(--line-control);stroke-width:8}
.kp-n.on{fill:var(--lime);stroke:var(--ink);stroke-width:9}
.band .kp-g,.band .kp-m{stroke:var(--band-line);opacity:1}
.band .kp-m.on{stroke:var(--lime)}
.band .kp-n{fill:var(--band);stroke:var(--band-text-3)}
.band .kp-n.on{fill:var(--lime);stroke:var(--ink)}
.big .kp-m{stroke-width:4}
.big .kp-m.on{stroke-width:7}
.big .kp-n{stroke-width:3}
.big .kp-n.on{stroke-width:3}
.big .kp-g{stroke-width:3}
.big text{font-family:var(--font-sans);font-size:24px;font-weight:600;fill:var(--band-text-2)}
.big text.on{fill:var(--band-text)}
.big .kp-num{font-family:var(--font-mono);font-size:17px;font-weight:600;fill:var(--band-text-2);text-anchor:middle;dominant-baseline:central}
.big .kp-num.on{fill:var(--ink)}
.big a .kp-n{transition:stroke .12s}
.big a:hover .kp-n,.big a:focus-visible .kp-n{stroke:var(--lime)}
.big a:focus-visible{outline:none}

/* capability blocks */
.caps{display:grid;gap:12px}
@media (min-width:700px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.caps.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cap{display:grid;gap:8px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;min-width:0}
.cap h3{font-size:17px;font-weight:600;line-height:1.35}
.cap p{font-size:15px;color:var(--text-2)}
.cap ul{list-style:none;padding:0;display:grid;gap:6px;font-size:14.5px;color:var(--text-2)}
.cap li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px}
.cap li::before{content:"";width:6px;height:6px;margin-top:9px;background:var(--text-3);border-radius:1px}
.cap .k{font:600 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
:root[lang="ar"] .cap .k{font-family:var(--font-sans);font-size:12px;letter-spacing:0;text-transform:none}

/* two columns: words beside a picture of the screen */
.split{display:grid;gap:32px;align-items:start}
@media (min-width:1000px){.split{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}}
.split.flip>:first-child{order:2}
@media (max-width:999px){.split.flip>:first-child{order:0}}
.figure{min-width:0;display:flex;justify-content:center}
.figure>div{width:100%;max-width:640px;display:grid;justify-items:center}
.cap-note{font-size:12.5px;color:var(--text-3);text-align:center;margin-top:10px}

/* who uses it */
.who{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:800px){.who{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
.who>div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.who b{font-size:16.5px;font-weight:600}
.who span{font-size:15px;color:var(--text-2)}

/* rules it keeps: general notes on a drawing */
.notes{border:1px solid var(--line-control);border-radius:2px;background:var(--surface)}
.notes-h{padding:10px 16px;border-bottom:1px solid var(--line-control);font:600 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
:root[lang="ar"] .notes-h{font-family:var(--font-sans);font-size:13px;letter-spacing:0;text-transform:none}
.notes ol{list-style:none;padding:0;display:grid;counter-reset:n}
@media (min-width:820px){.notes ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
.notes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:18px;border-bottom:1px solid var(--line);counter-increment:n}
.notes li::before{content:counter(n,decimal-leading-zero);font:600 13px/1.6 var(--font-mono);color:var(--text-3)}
@media (min-width:820px){.notes li:nth-child(odd){border-inline-end:1px solid var(--line)}}
.notes b{display:block;font-size:16.5px;font-weight:600;line-height:1.35}
.notes p{margin-top:5px;font-size:15px;color:var(--text-2)}

/* joined to: the members that tie this node to the rest */
.joins{display:grid;gap:10px}
@media (min-width:700px){.joins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.joins{grid-template-columns:repeat(3,minmax(0,1fr))}}
.join{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:16px;border:1px solid var(--band-line);border-radius:6px;background:var(--band-surface);color:var(--band-text);text-decoration:none;transition:border-color .12s}
a.join:hover{border-color:var(--band-text-3)}
.join .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--paper);font:600 12px/1 var(--font-mono)}
.join b{display:block;font-size:16px;font-weight:600}
.join small{display:block;font:600 10.5px/1.4 var(--font-mono);letter-spacing:.05em;color:var(--lime);margin-top:2px}
.join span{display:block;font-size:14px;color:var(--band-text-2);margin-top:4px}

/* steps: getting started */
.steps{list-style:none;padding:0;display:grid;gap:0;counter-reset:s;position:relative}
.steps>li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding-bottom:28px;position:relative;counter-increment:s}
.steps>li::before{content:counter(s,decimal-leading-zero);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--text);font:600 14px/1 var(--font-mono);background:var(--canvas);position:relative;z-index:1}
.steps>li::after{content:"";position:absolute;inset-inline-start:22px;top:44px;bottom:0;width:1.5px;background:var(--line-control)}
.steps>li:last-child::after{display:none}
.steps h3{font-size:19px;font-weight:600;line-height:1.3;padding-top:9px}
.steps p{margin-top:6px;color:var(--text-2);max-width:66ch}
.steps ul{margin-top:8px;padding-inline-start:18px;color:var(--text-2);display:grid;gap:4px}

/* questions */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:center;padding:18px 2px;cursor:pointer;list-style:none;font-size:17px;font-weight:600;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;justify-self:end;border-inline-end:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq .a{padding:0 2px 20px;display:grid;gap:10px;max-width:72ch;color:var(--text-2);font-size:16px}
.faq-group{display:grid;gap:14px}
.faq-group+.faq-group{margin-top:28px}

/* index of areas */
.areas{display:grid;gap:12px}
@media (min-width:640px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.areas{grid-template-columns:repeat(5,minmax(0,1fr))}}
.area{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;text-decoration:none;color:var(--text);transition:border-color .12s,background .12s}
.area:hover{border-color:var(--line-control);background:var(--hover)}
.area .hd{display:flex;align-items:center;gap:10px}
.area .n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--text);font:600 12px/1 var(--font-mono)}
.area b{font-size:17px;font-weight:600;line-height:1.3}
.area p{font-size:14px;color:var(--text-2)}
.area .go{margin-top:auto;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.area .go svg{width:14px;height:14px}

/* facts in a row of figures that are true about the product */
.facts{display:grid;gap:0;border-top:1px solid var(--band-line)}
@media (min-width:800px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
.facts>div{padding:18px 0;border-bottom:1px solid var(--band-line);display:grid;gap:4px}
.facts b{font-size:18px;font-weight:600;color:var(--band-text)}
.facts span{font-size:15px;color:var(--band-text-2)}

/* title block with key plan */
.tb{display:grid;grid-template-columns:repeat(4,auto);width:max-content;max-width:100%;margin-inline-start:auto;border:1px solid var(--line-control);border-radius:2px;font-family:var(--font-mono)}
.tb>div{padding:6px 12px;border-inline-start:1px solid var(--line-control);min-width:0}
.tb>div:first-child{border-inline-start:0}
.tb small{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.tb span{display:block;font-size:12px;font-weight:500;margin-top:2px;white-space:nowrap}
:root[lang="ar"] .tb small{font-family:var(--font-sans);font-size:11px;letter-spacing:0;text-transform:none}
:root[lang="ar"] .tb span{font-family:var(--font-sans)}
.tb .kp{display:grid;align-content:center;gap:4px}
.tb .kp svg{display:block;width:92px;height:auto}
.band .tb,.band .tb>div{border-color:var(--band-line)}
.band .tb small{color:var(--band-text-3)}
@media (max-width:560px){
  .tb{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .tb>div:nth-child(3){border-inline-start:0}
  .tb>div:nth-child(n+3){border-top:1px solid var(--line-control)}
  .band .tb>div:nth-child(n+3){border-top-color:var(--band-line)}
}

/* product mock screens (pictures of the app, built from the design system) */
.mock-p{width:100%;max-width:340px;border:10px solid var(--bezel);border-radius:30px;background:var(--surface);overflow:hidden;box-shadow:0 0 0 1px var(--line);color:var(--text);text-align:start}
.mock-d{width:100%;max-width:640px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);color:var(--text);text-align:start}
.pbar{display:flex;justify-content:space-between;padding:8px 18px 6px;font:600 11px/1 var(--font-mono);color:var(--text-2)}
.scr{min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.scr-h{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.scr-h b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.scr-h small{display:block;font-size:12px;color:var(--text-3);margin-top:3px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.kpis div{padding:12px 16px;border-inline-start:1px solid var(--line);min-width:0}
.kpis div:first-child{border-inline-start:0}
.kpis small{display:block;font-size:11px;color:var(--text-3)}
.kpis b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
@media (max-width:640px){.kpis div{padding:10px 12px}.kpis b{font-size:15px;white-space:normal}}
.grp{padding:8px 16px;font:600 10.5px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--sunken);border-bottom:1px solid var(--line)}
:root[lang="ar"] .grp{font-family:var(--font-sans);font-size:12px;letter-spacing:0;text-transform:none}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.row .t{min-width:0}
.row .t .ref{display:block;font-size:11.5px;color:var(--text-2)}
.row .t p{margin-top:2px;line-height:1.4}
.row .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mini{display:inline-flex;align-items:center;height:28px;padding-inline:10px;border-radius:4px;border:1px solid var(--line-control);background:var(--surface);color:var(--text);font:500 12.5px/1 var(--font-sans);white-space:nowrap}
.mini.p{background:var(--action);border-color:var(--action);color:var(--on-action)}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding-inline:7px 8px;border-radius:3px;font:500 12px/1 var(--font-sans);background:var(--xs);color:var(--x);white-space:nowrap}
.chip .k{display:inline-grid;place-items:center;min-width:16px;height:16px;padding-inline:2px;border-radius:2px;background:var(--x);color:var(--on-code);font:600 10.5px/1 var(--font-mono);margin-inline-start:-3px}
.chip.a{--x:var(--a);--xs:var(--a-soft)} .chip.b{--x:var(--b);--xs:var(--b-soft)} .chip.c{--x:var(--c);--xs:var(--c-soft)} .chip.d{--x:var(--d);--xs:var(--d-soft)}
.chip.sub{--x:var(--sub);--xs:var(--sub-soft)} .chip.rev{--x:var(--rev);--xs:var(--rev-soft)} .chip.neu{--x:var(--neu);--xs:var(--neu-soft)}
.bar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;margin-top:auto;border-top:1px solid var(--line);background:var(--sunken)}
.bar .mini{flex:1 1 auto;justify-content:center;height:40px;font-size:14px}
.ex-tag{display:inline-block;font-size:12px;color:var(--text-3);border:1px dashed var(--line-control);padding:2px 8px;border-radius:3px}

/* the closing band */
.close .wrap{padding-block:72px 64px;display:grid;gap:22px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail code{font-family:var(--font-mono);font-size:clamp(19px,3vw,26px);font-weight:500;color:var(--band-text);background:var(--band-surface);border:1px solid var(--band-line);border-radius:4px;padding:10px 16px;-webkit-user-select:all;user-select:all;direction:ltr}
.copy-msg{font-size:13px;color:var(--band-text-3);min-height:20px}

/* footer */
.foot .wrap{padding-block:36px 44px;display:grid;gap:28px;border-top:1px solid var(--band-line)}
@media (min-width:900px){.foot .wrap{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}}
.foot h2{font:500 11px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--band-text-3);margin-bottom:10px}
:root[lang="ar"] .foot h2{font-family:var(--font-sans);font-size:12.5px;letter-spacing:0;text-transform:none}
.foot ul{list-style:none;padding:0;display:grid;gap:7px}
.foot a{color:var(--band-text-2);text-decoration:none;font-size:14px}
.foot a:hover{color:var(--band-text)}
.foot-l{display:grid;gap:10px;align-content:start;font-size:13px;color:var(--band-text-3)}
.foot-l .logo svg{height:20px}
/* preview only: a passage waiting for the owner's confirmation (build.py leaves it out of the served site) */
.check-block{outline:2px dashed var(--c);outline-offset:-2px;position:relative}
.check-tag{position:sticky;top:64px;z-index:2;margin:0;padding:6px 16px;background:var(--c-soft);color:var(--c);font:600 12px/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important}}