/* ============================================================
   Shared shell for every sub-page (privacy, terms, about, status)
   ============================================================
   ⚠️ These are NOT index.html. They are ordinary documents: no canvas, no
   WebGL, no point cloud, no scene. They borrow the palette and the typography
   so they read as the same site, and nothing else. Keep them that way — a
   privacy policy that takes four seconds to render is a worse privacy policy.

   ⚠️ Unlike index.html, these pages DO have a doctype and render in standards
   mode. index.html is stuck in quirks mode for historical reasons (HANDOFF §11);
   there was no reason to inherit that here. Do not copy layout code between
   them and assume it behaves the same.

   ⭐ The Arabic face is LINKED here, not embedded — the opposite of index.html,
   deliberately. index.html embeds it because HANDOFF §1 requires the scene to
   run from a double-clicked file, and a font file will not load from a file://
   origin. These pages carry no scene, and duplicating 132 KB of base64 into two
   text documents to serve an offline case nobody has is waste. Over file:// the
   Arabic here falls back to the system face, which is fine for prose. See §20.
   ============================================================ */

@font-face{
  font-family:"Abdo Master";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/abdo-master-book.woff2") format("woff2");
}
@font-face{
  font-family:"Abdo Master";
  font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/abdo-master-bold.woff2") format("woff2");
}

:root{
  --accent:#00a6c3;
  --accent-rgb:0 166 195;
  --accent-deep:#006c81;
  --green:#509544;
  --green-deep:#184621;
  --green-deep-rgb:24 70 33;
  --particle:#ffffff;
  --backdrop:#000000;
  --duration-normal:250ms;
  --ease-entrance:cubic-bezier(0.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--backdrop);color:var(--particle);
  font-family:"General Sans","Mulish",ui-sans-serif,system-ui,sans-serif;font-weight:500;
  font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* A single wash of the brand's ground so the page is not flat black — the one
   nod to the scene, and it costs nothing. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgb(var(--green-deep-rgb) / .55), transparent 60%),
    radial-gradient(90% 70% at 88% 8%, rgb(var(--accent-rgb) / .16), transparent 62%);
}
.wrap{position:relative;z-index:1}

a{color:var(--accent);text-underline-offset:.15em}
a:hover{color:var(--particle)}

/* ---------- header ---------- */
.lhead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.125rem 1.25rem;border-bottom:1px solid rgb(255 255 255 / .1);
}
.lbrand{display:inline-flex;align-items:center;gap:.75rem;color:var(--particle);text-decoration:none;line-height:1}
.lbrand img{height:2.25rem;width:auto;display:block}
.lbrand span{font-family:"Italiana",Georgia,serif;font-size:1.625rem;letter-spacing:.01em}
.llang{
  font-family:inherit;font-size:.8125rem;font-weight:500;line-height:1;
  padding:.5rem .875rem;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--particle);
  border:1px solid rgb(255 255 255 / .22);
  transition:border-color var(--duration-normal) var(--ease-entrance),
             color var(--duration-normal) var(--ease-entrance);
}
.llang:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- document ---------- */
.ldoc{max-width:44rem;margin:0 auto;padding:3rem 1.25rem 5rem}
.leyebrow{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgb(var(--accent-rgb) / .85);margin:0 0 .75rem;
}
h1{
  font-family:"Italiana",Georgia,serif;font-weight:400;text-transform:uppercase;
  font-size:2.75rem;line-height:1.1;margin:0 0 1rem;
}
.lupdated{font-size:.8125rem;color:rgb(255 255 255 / .45);margin:0 0 2.5rem}
.lintro{font-size:1.0625rem;line-height:1.7;color:rgb(255 255 255 / .82);margin:0 0 2.5rem}
h2{
  font-size:1.25rem;line-height:1.35;font-weight:600;margin:2.75rem 0 .875rem;
  padding-top:1.75rem;border-top:1px solid rgb(255 255 255 / .12);
}
h3{font-size:1rem;line-height:1.4;font-weight:600;margin:1.75rem 0 .5rem;color:rgb(255 255 255 / .92)}
p,li{color:rgb(255 255 255 / .72)}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-inline-start:1.25rem}
li{margin:0 0 .5rem}
strong{color:var(--particle);font-weight:600}
.lnote{
  border-inline-start:2px solid rgb(var(--accent-rgb) / .5);
  padding:.125rem 0 .125rem 1rem;margin:0 0 1.25rem;
}
[dir="rtl"] .lnote{padding:.125rem 1rem .125rem 0}
.lnote p:last-child{margin-bottom:0}

/* Tables carry the processor list and the data inventory — the two things a
   reader actually scans for. They must not blow the page out sideways. */
.ltable-wrap{overflow-x:auto;margin:0 0 1.5rem}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.9375rem}
th,td{text-align:start;padding:.625rem .75rem;border-bottom:1px solid rgb(255 255 255 / .1);vertical-align:top}
th{color:var(--particle);font-weight:600;white-space:nowrap}
td{color:rgb(255 255 255 / .72)}

/* ---------- numbered method steps (about) ---------- */
.lsteps{list-style:none;margin:0 0 1.5rem;padding:0;counter-reset:step}
.lsteps li{
  counter-increment:step;position:relative;
  padding-inline-start:2.75rem;margin:0 0 1.5rem;
}
.lsteps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:.1rem;
  font-size:.8125rem;font-weight:600;color:rgb(var(--accent-rgb) / .85);
  font-variant-numeric:tabular-nums;
}
.lsteps h3{margin:0 0 .375rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.625rem}
.lsteps h3 i{
  font-style:normal;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .42);
}
.lsteps p{margin:0}
/* ⚠️ The step numbers are Latin in both languages, matching the 01–04 eyebrows
   on the main site — one numeral system per page (HANDOFF §14). */
html[lang="ar"] .lsteps h3 i{letter-spacing:normal}

/* ---------- status rows ---------- */
.lstatus{margin:0 0 1rem;border-top:1px solid rgb(255 255 255 / .12)}
.lrow{
  display:flex;align-items:center;gap:.875rem;
  padding:1rem .25rem;border-bottom:1px solid rgb(255 255 255 / .12);
}
.lrow-name{font-weight:600;color:var(--particle);flex:none;min-width:9rem}
.lrow-state{color:rgb(255 255 255 / .68);font-size:.9375rem}
.ldot{
  flex:none;width:.625rem;height:.625rem;border-radius:50%;
  background:rgb(255 255 255 / .3);
  box-shadow:0 0 0 0 rgb(255 255 255 / .25);
}
/* Colour is never the only signal — every row also states its condition in
   words, so this reads the same to anyone who cannot separate the hues. */
.ldot[data-state="ok"]{background:var(--green);box-shadow:0 0 .5rem rgb(80 149 68 / .8)}
.ldot[data-state="degraded"]{background:#d8a13c;box-shadow:0 0 .5rem rgb(216 161 60 / .7)}
.ldot[data-state="down"]{background:#c2564a;box-shadow:0 0 .5rem rgb(194 86 74 / .7)}
.ldot[data-state="unknown"]{background:rgb(255 255 255 / .28)}
.ldot[data-state="checking"]{background:var(--accent);animation:lpulse 1.1s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ldot[data-state="checking"]{animation:none;opacity:.7}}
.lchecked{font-size:.8125rem;color:rgb(255 255 255 / .45);margin:0 0 1.25rem}

/* ---------- buttons ---------- */
.lcta{margin:2.5rem 0 0}
.lbtn{
  display:inline-block;padding:.8125rem 1.5rem;
  font-family:inherit;font-size:1rem;font-weight:500;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;border:none;border-radius:0;
  background:var(--particle);color:var(--backdrop);
  transition:background-color var(--duration-normal) var(--ease-entrance),
             transform var(--duration-normal) var(--ease-entrance);
}
.lbtn:hover{background:rgb(255 255 255 / .9);color:var(--backdrop);transform:translateY(-.125rem)}
.lbtn-ghost{
  background:transparent;color:var(--particle);
  border:1px solid rgb(255 255 255 / .22);
  padding:.5rem 1.125rem;font-size:.875rem;
}
.lbtn-ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.lbtn:hover{transform:none}}

/* ---------- footer ---------- */
.lfoot{
  border-top:1px solid rgb(255 255 255 / .12);
  padding:2rem 1.25rem 3rem;max-width:44rem;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  font-size:.8125rem;color:rgb(255 255 255 / .45);
}
.lfoot a{color:rgb(255 255 255 / .62);text-decoration:none}
.lfoot a:hover{color:var(--accent)}
.lfoot .lspacer{flex:1}

@media (min-width:640px){
  .lhead{padding:1.125rem 1.875rem}
  .lbrand img{height:2.75rem}
  .lbrand span{font-size:2rem}
  .ldoc{padding:4.5rem 1.875rem 6rem}
  h1{font-size:3.5rem}
  .lfoot{padding:2rem 1.875rem 3.5rem}
}

/* ---------- Arabic ----------
   Same rules the main site learned the hard way: the family has to be named on
   anything that sets its own, letter-spacing must be reset because the script is
   joined, and Arabic sets taller than Latin at the same size. */
html[lang="ar"] body,
html[lang="ar"] .llang,
html[lang="ar"] table{
  font-family:"Abdo Master","Noto Sans Arabic",ui-sans-serif,system-ui,sans-serif;
}
html[lang="ar"] h1{
  font-family:"Abdo Master","Noto Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:normal;line-height:1.36;font-size:2.25rem;
}
@media (min-width:640px){html[lang="ar"] h1{font-size:2.75rem}}
html[lang="ar"] .leyebrow{letter-spacing:normal}
html[lang="ar"] body{line-height:1.9}
html[lang="ar"] .lintro{line-height:1.95}
html[lang="ar"] h2{line-height:1.6}
html[lang="ar"] h3{line-height:1.6}
/* MAGPIE is set in Arabic on the main site too (§18) — but the wordmark there is
   in the brand face, and Italiana has no Arabic glyphs, so it must come off. */
html[lang="ar"] .lbrand span{
  font-family:"Abdo Master","Noto Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:normal;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}