/* ============================================================
   SANAD design system · v0.3
   Tokens → primitives → components. Light + dark. Mobile-first.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* palette */
  --ink:#1B201B; --paper:#F3F1EA; --card:#FBFAF5; --raise:#FFFFFF;
  --olive:#2E4A33; --olive-ink:#24402A; --olive-soft:#E4E9E0;
  --crimson:#A32638; --crimson-soft:#F4E3E4;
  --gold:#B9862E; --gold-soft:#F3EAD3;
  --line:#DBD6C8; --line-strong:#C6C0AF; --dim:#5C6156;
  --bg-outer:#22261F; --topbar:#1B201B; --topbar-ink:#F3F1EA; --topbar-dim:#9BA394; --topbar-chip:#2A2F28; --topbar-chip-line:#3A4036;
  --shadow:0 1px 3px rgba(27,32,27,.08),0 8px 24px rgba(27,32,27,.06);
  --shadow-lift:0 4px 12px rgba(27,32,27,.14),0 16px 40px rgba(27,32,27,.12);
  --scrim:rgba(20,24,19,.55);
  /* type */
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --display:'Archivo',-apple-system,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fs-xs:11px; --fs-s:12.5px; --fs-m:14px; --fs-l:16.5px; --fs-xl:21px; --fs-xxl:26px;
  /* space & shape */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --radius:10px; --radius-s:7px; --radius-pill:100px;
  --nav-h:60px;
}
[data-theme="dark"]{
  --ink:#EDEBE2; --paper:#15180F0; --paper:#171A15; --card:#1F231D; --raise:#262B24;
  --olive:#9DB8A2; --olive-ink:#B7CDBB; --olive-soft:#26312A;
  --crimson:#D2606F; --crimson-soft:#3A2226;
  --gold:#D8AC55; --gold-soft:#39301C;
  --line:#343A31; --line-strong:#465043; --dim:#9BA394;
  --bg-outer:#0E100C; --topbar:#10130E; --topbar-ink:#EDEBE2; --topbar-dim:#8A9184; --topbar-chip:#1D211B; --topbar-chip-line:#31372E;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 4px 14px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.45);
  --scrim:rgba(0,0,0,.6);
}

/* ---------- reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{height:100%}
body{background:var(--bg-outer);font-family:var(--body);color:var(--ink);font-size:var(--fs-m);line-height:1.5}
img,svg{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;min-height:44px}
input,textarea,select{font-family:inherit;font-size:var(--fs-m);color:var(--ink)}
a{color:var(--olive);text-underline-offset:2px}
[data-theme="dark"] a{color:var(--olive-ink)}
:focus-visible{outline:2.5px solid var(--crimson);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold-soft)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200;border-radius:0 0 var(--radius-s) 0}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- app shell ---------- */
.shell{max-width:520px;margin:0 auto;min-height:100dvh;background:var(--paper);display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px rgba(0,0,0,.45)}
.shell.wide{max-width:1160px;box-shadow:none;background:var(--paper)}
main{flex:1;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}
.shell.wide main{padding-bottom:60px}

/* stitch divider — the brand signature */
.stitch{height:8px;flex:none;background-image:
  linear-gradient(45deg,transparent 42%,var(--crimson) 42%,var(--crimson) 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--crimson) 42%,var(--crimson) 58%,transparent 58%);
  background-size:8px 8px;opacity:.55}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--topbar);color:var(--topbar-ink);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;gap:10px}
.topbar .logo{display:flex;align-items:baseline;gap:8px;margin-right:auto;text-decoration:none;color:inherit}
.topbar .ar{font-family:'Amiri',serif;font-size:25px;line-height:1}
.topbar .en{font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.14em}
.topbar .tag{font-family:var(--mono);font-size:8.5px;color:var(--topbar-dim);letter-spacing:.06em;display:block;margin-top:2px}
.icon-btn{width:42px;height:42px;min-height:42px;border-radius:50%;display:grid;place-items:center;color:var(--topbar-ink);background:var(--topbar-chip);border:1px solid var(--topbar-chip-line);font-size:17px;position:relative}
.icon-btn:active{transform:scale(.94)}
.net-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--gold);display:none}
.offline .net-dot{display:block}
.count-pill{display:flex;align-items:center;gap:7px;background:var(--topbar-chip);border:1px solid var(--topbar-chip-line);border-radius:var(--radius-pill);padding:6px 12px}
.count-n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--gold)}
.count-l{font-family:var(--mono);font-size:8px;color:var(--topbar-dim);line-height:1.25;text-transform:uppercase;letter-spacing:.08em}

/* install / status banner */
.banner{display:flex;gap:10px;align-items:center;background:var(--gold-soft);border-bottom:1px solid var(--gold);padding:10px 14px;font-size:var(--fs-s);line-height:1.45}
.banner .grow{flex:1}
.banner button{min-height:34px;padding:6px 12px;border-radius:var(--radius-s);font-family:var(--display);font-weight:700;font-size:12px}
.banner .go{background:var(--ink);color:var(--paper)}
.banner .dismiss{color:var(--dim)}

/* ---------- bottom nav ---------- */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:var(--topbar);display:flex;z-index:70;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--topbar-chip-line)}
.nav a{flex:1;color:var(--topbar-dim);padding:9px 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:3px;align-items:center;text-decoration:none;position:relative;min-height:var(--nav-h)}
.nav a .ic{font-size:18px;line-height:1}
.nav a[aria-current="page"]{color:var(--gold)}
.nav a .dot{position:absolute;top:8px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--crimson);display:none}
.nav a.hasnew .dot{display:block}

/* ---------- headings / section ---------- */
.section-head{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.section-head h1{font-family:var(--display);font-weight:900;font-size:var(--fs-xxl);letter-spacing:-.01em}
.section-head p{font-size:var(--fs-s);color:var(--dim);margin-top:4px;max-width:60ch}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);border:1px solid var(--line)}
.badge.published{background:var(--olive-soft);color:var(--olive);border-color:var(--olive)}
[data-theme="dark"] .badge.published{color:var(--olive-ink)}
.badge.developing{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}
.badge.draft{background:transparent;color:var(--dim)}
.badge.halted{background:var(--crimson-soft);color:var(--crimson);border-color:var(--crimson)}
.badge.field{background:var(--crimson-soft);color:var(--crimson);border-color:transparent}

/* ---------- cards & feed rows ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);margin:0 var(--sp-4) var(--sp-3);box-shadow:var(--shadow)}
.rowlink{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px var(--sp-4);margin:0 var(--sp-4) var(--sp-3);box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease}
.rowlink:active{transform:scale(.985)}
@media(hover:hover){.rowlink:hover{box-shadow:var(--shadow-lift);border-color:var(--line-strong)}}
.rowlink .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.rowlink h2,.rowlink h3{font-family:var(--display);font-weight:800;font-size:var(--fs-l);line-height:1.22}
.rowlink .lede{font-size:var(--fs-s);color:var(--dim);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rowlink .meta{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.rowlink .chev{float:right;color:var(--dim)}

/* filter chips */
.chips{display:flex;gap:8px;padding:0 var(--sp-4) var(--sp-3);overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--radius-pill);padding:7px 14px;font-size:var(--fs-s);min-height:36px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--olive-soft);color:var(--olive-ink);border-color:var(--olive)}

/* ---------- detail page ---------- */
.detail-bar{display:flex;align-items:center;gap:6px;padding:10px var(--sp-3) 4px}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:var(--radius-s)}
.detail{padding:2px var(--sp-4) var(--sp-6)}
.detail .meta-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.detail h1{font-family:var(--display);font-weight:900;font-size:22px;line-height:1.18;letter-spacing:-.01em}
.detail .stamp{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:6px}
.block{margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.block>h4{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--olive);margin-bottom:8px}
[data-theme="dark"] .block>h4{color:var(--olive-ink)}
.facts li{font-size:var(--fs-m);line-height:1.55;margin:0 0 10px 18px}
.prose{font-size:var(--fs-m);line-height:1.6}
.cp{background:var(--olive-soft);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.cp .q{font-weight:700;font-size:var(--fs-s);color:var(--crimson);margin-bottom:5px}
.cp .a{font-size:var(--fs-s);line-height:1.55}
.src a{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-s);margin-bottom:8px;word-break:break-word;text-decoration:none}
.src a .lbl{text-decoration:underline;text-underline-offset:2px}
.src a .ext{color:var(--dim);font-size:11px;flex:none}
.pitfall{background:var(--crimson-soft);border-left:3px solid var(--crimson);border-radius:0 var(--radius-s) var(--radius-s) 0;padding:11px 13px;font-size:var(--fs-s);line-height:1.55}
.corr{background:var(--crimson);color:#fff;border-radius:var(--radius);padding:11px 13px;font-size:var(--fs-s);margin-top:10px}
.corr b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.action-row{display:flex;gap:8px;margin-top:var(--sp-5);flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--radius-s);padding:11px 16px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em}
[data-theme="dark"] .btn{background:var(--olive-soft);border-color:var(--olive);color:var(--olive-ink)}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
[data-theme="dark"] .btn.secondary{color:var(--ink)}
.btn.crimson{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn.small{min-height:36px;padding:7px 12px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(.97)}

/* pill links (Act) */
.pill-links a{display:inline-flex;align-items:center;gap:6px;margin:4px 8px 4px 0;font-size:var(--fs-s);background:var(--olive-soft);color:var(--olive);border-radius:var(--radius-pill);padding:8px 14px;text-decoration:none;font-weight:600;min-height:36px}
[data-theme="dark"] .pill-links a{color:var(--olive-ink)}
.asks li{font-size:var(--fs-s);line-height:1.55;margin:0 0 8px 18px}

/* ---------- search overlay ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:var(--scrim);display:none}
.overlay.open{display:block}
.search-panel{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:var(--paper);max-height:100dvh;display:flex;flex-direction:column;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lift)}
.search-top{display:flex;gap:8px;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid var(--line)}
.search-top input{flex:1;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);padding:11px 13px;font-size:16px}
.search-results{overflow-y:auto;padding:10px 0 18px}
.sr-group{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:12px 16px 6px}
.sr-item{display:block;padding:11px 16px;text-decoration:none;color:inherit}
.sr-item:active,.sr-item:focus{background:var(--olive-soft)}
.sr-item b{font-family:var(--display);font-weight:700;font-size:var(--fs-m);line-height:1.3;display:block}
.sr-item span{font-size:var(--fs-s);color:var(--dim);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-item mark{background:var(--gold-soft);color:inherit;border-radius:3px;padding:0 2px}
.sr-empty{padding:26px 16px;color:var(--dim);font-size:var(--fs-s);text-align:center}

/* ---------- modal / sheet ---------- */
.modal-scrim{position:fixed;inset:0;z-index:110;background:var(--scrim);display:none;align-items:flex-end;justify-content:center}
.modal-scrim.open{display:flex}
.sheet{width:100%;max-width:520px;background:var(--paper);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-lift);max-height:92dvh;display:flex;flex-direction:column;animation:up .22s ease}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-family:var(--display);font-weight:800;font-size:var(--fs-l);flex:1}
.sheet-body{padding:14px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto}
.sheet .close{color:var(--dim);font-size:20px;width:40px;height:40px;min-height:40px;display:grid;place-items:center}

/* forms */
label.f{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);margin:14px 0 5px}
[data-theme="dark"] label.f{color:var(--olive-ink)}
input[type=text],input[type=url],textarea,select{width:100%;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--raise);padding:11px 12px}
textarea{min-height:88px;resize:vertical;line-height:1.5}
.field-hint{font-size:var(--fs-xs);color:var(--dim);margin-top:4px}

/* toast */
.toast{position:fixed;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);left:50%;transform:translateX(-50%) translateY(8px);background:var(--olive);color:#fff;padding:11px 18px;border-radius:var(--radius-pill);font-family:var(--display);font-weight:700;font-size:13px;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:130;max-width:88%;text-align:center}
[data-theme="dark"] .toast{background:var(--olive-soft);color:var(--olive-ink);border:1px solid var(--olive)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* drill */
.drill-claim{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.3;padding:6px 0 2px}
.drill-tally{font-family:var(--mono);font-size:11px;color:var(--dim)}

/* ---------- desk-specific ---------- */
.deskbar{position:sticky;top:0;z-index:60;background:var(--topbar);color:var(--topbar-ink);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.deskbar .env{font-family:var(--mono);font-size:9px;background:var(--crimson);color:#fff;padding:3px 8px;border-radius:var(--radius-pill);letter-spacing:.1em}
.desk-tabs{display:flex;gap:2px;background:var(--topbar);padding:0 12px;overflow-x:auto}
.desk-tabs button{color:var(--topbar-dim);font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:10px 14px;border-bottom:2.5px solid transparent;min-height:40px}
.desk-tabs button[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.desk-wrap{max-width:1160px;margin:0 auto;padding:18px 14px 60px;display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
@media(max-width:860px){.desk-wrap{grid-template-columns:1fr}}
.desk-col h2{font-family:var(--display);font-weight:900;font-size:15px;margin:4px 2px 10px}
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow)}
.item.sel{border-color:var(--crimson);box-shadow:0 0 0 1.5px var(--crimson)}
.item h3{font-family:var(--display);font-weight:700;font-size:13px;line-height:1.3;margin:6px 0 2px}
.item .m{font-family:var(--mono);font-size:10px;color:var(--dim)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.panel h3{font-family:var(--display);font-weight:800;font-size:15px}
.gates{background:var(--olive-soft);border-radius:var(--radius);padding:12px 14px;margin-top:14px}
.gates h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.gate{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-s);margin-bottom:6px;line-height:1.4}
.gate .ok{color:var(--olive);font-weight:800}
[data-theme="dark"] .gate .ok{color:var(--olive-ink)}
.gate .no{color:var(--crimson);font-weight:800}
.redteam label{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-s);margin-bottom:6px;line-height:1.4;cursor:pointer}
.redteam input{margin-top:2px;width:auto}
.saved-ind{font-family:var(--mono);font-size:10px;color:var(--dim)}
.halted-note{background:var(--crimson-soft);border-radius:var(--radius-s);padding:9px 11px;font-size:var(--fs-s);margin-top:8px}
.warnbar{background:var(--gold-soft);border-bottom:1px solid var(--gold);padding:9px 16px;font-size:var(--fs-s);line-height:1.5}
.preview-frame{border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;background:var(--paper);max-width:420px}
.preview-frame .stitch{opacity:.55}
.stat{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:0 10px 10px 0;text-align:center}
.stat b{font-family:var(--display);font-weight:900;font-size:22px;display:block}
.stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
hr.div{border:none;border-top:1px solid var(--line);margin:16px 0}
.small{font-size:var(--fs-s);color:var(--dim)}
.mono{font-family:var(--mono)}