/*
 * Shared by index.html and privacy.html: colour tokens (light/dark), base type,
 * the sticky header, buttons and the footer. Page-only styles stay in each page.
 */
:root{
  --accent:#753BD9;
  --ground:#FFFFFF;
  --ground-2:#F3F5FB;
  --surface:#FFFFFF;
  --ink:#0E1424;
  --ink-2:#4B5570;
  --ink-3:#7E87A0;
  --rule:#E3E7F1;
  /* Text ON the accent. White in both themes: --accent is the same purple in both. */
  --accent-ink:#FFFFFF;
  --tint:color-mix(in oklab, var(--accent) 8%, var(--surface));
  --tint-2:color-mix(in oklab, var(--accent) 14%, var(--surface));
  --accent-text:color-mix(in oklab, var(--accent) 88%, #000000);
  --ok:#17916B;
  --warn:#C8691A;
  --deep:#0E1424;
  --deep-ink:#EEF1FA;
  --radius:20px;
  --shadow:0 2px 4px rgba(14,20,36,.04), 0 18px 46px -26px rgba(14,20,36,.45);
  --display:"Alexandria","Helvetica Neue",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Helvetica Neue",system-ui,sans-serif;
  --maxw:1140px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0E18;
    --ground-2:#101627;
    --surface:#141B2C;
    --ink:#EAEEF8;
    --ink-2:#AEB7CC;
    --ink-3:#7E87A0;
    --rule:#242C41;
    --tint:color-mix(in oklab, var(--accent) 20%, var(--surface));
    --tint-2:color-mix(in oklab, var(--accent) 30%, var(--surface));
    --accent-text:color-mix(in oklab, var(--accent) 55%, #FFFFFF);
    --ok:#3DBD93;
    --warn:#E39A4E;
    --deep:#141B2C;
    --deep-ink:#EAEEF8;
    --shadow:0 2px 4px rgba(0,0,0,.5), 0 20px 50px -28px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0E18;
  --ground-2:#101627;
  --surface:#141B2C;
  --ink:#EAEEF8;
  --ink-2:#AEB7CC;
  --ink-3:#7E87A0;
  --rule:#242C41;
  --tint:color-mix(in oklab, var(--accent) 20%, var(--surface));
  --tint-2:color-mix(in oklab, var(--accent) 30%, var(--surface));
  --accent-text:color-mix(in oklab, var(--accent) 55%, #FFFFFF);
  --ok:#3DBD93;
  --warn:#E39A4E;
  --deep:#141B2C;
  --deep-ink:#EAEEF8;
  --shadow:0 2px 4px rgba(0,0,0,.5), 0 20px 50px -28px rgba(0,0,0,1);
}

@media (prefers-reduced-motion: no-preference){
  :root{scroll-behavior:smooth}
}
main[id], main section[id]{scroll-margin-top:86px}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.2; text-wrap:balance; margin:0; letter-spacing:-.015em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.eyebrow{font-size:.82rem; font-weight:600; color:var(--accent-text); margin-bottom:12px}

/* ---------- nav ---------- */
header.top{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:color-mix(in oklab, var(--ground) 86%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);
}
.top-in{display:flex; align-items:center; gap:14px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.25rem}
.mark{
  width:30px; height:30px; border-radius:10px; flex:none;
  /* Flat, like brand/minassati-icon.svg: the header shows the app icon itself. */
  background:var(--accent);
  display:grid; place-items:center; color:#fff;
}
nav.links{display:flex; gap:24px; margin-inline-start:32px; font-size:.94rem; color:var(--ink-2)}
nav.links a{text-decoration:none}
nav.links a:hover{color:var(--accent-text)}
.tools{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 20px -10px var(--accent)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:9px 15px; font-size:.86rem; border-radius:10px}
@media (max-width:900px){ nav.links{display:none} }
/* Log in: two doors, the app (teachers, families, students) and the office
   console at /admin/. A native <details>, so it opens without JS. */
.login{position:relative}
.login summary{list-style:none}
.login summary::-webkit-details-marker{display:none}
.login-menu{
  position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:20;
  width:min(260px, calc(100vw - 32px)); padding:6px;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.35);
}
.login-menu a{display:flex; flex-direction:column; gap:2px; min-height:44px; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--ink)}
.login-menu a:hover, .login-menu a:focus-visible{background:var(--rule)}
.login-menu b{font-weight:600; font-size:.92rem; line-height:1.4}
.login-menu span{font-size:.8rem; line-height:1.4; color:var(--ink-3)}
/* Phones: top-bar buttons get a full 44px touch target. */
@media (max-width:480px){ .tools .btn{min-height:44px} }

footer{border-top:1px solid var(--rule); margin-top:clamp(40px,7vw,80px); padding-block:34px; color:var(--ink-3); font-size:.88rem}
.foot-in{display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center}