/* المحور — ألوان BRAND.md §4 · عرض الهاتف هو الأصل (ت-48) · النحاسي للتمييز فقط */
:root { --void:#000; --star:#fff; --night:#0A0E14; --graphite:#1C222B; --dust:#B9C0C9; --ash:#8A929C; --brass:#D9B74A;
  --sans:'IBM Plex Sans Arabic',system-ui,sans-serif; --serif:'Noto Naskh Arabic','IBM Plex Sans Arabic',serif; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:500; font-display:swap; src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:600; font-display:swap; src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:600; font-display:swap; src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F; }
/* خط العناوين والأقوال محلي (أمر المالك 2026-11-05 «نزّل خط العناوين») — ملف متغيّر الوزن، حروفه العربية؛ اللاتيني في العناوين يقع على Plex */
@font-face { font-family:'Noto Naskh Arabic'; font-weight:400 700; font-display:swap; src:url(fonts/noto-naskh-arabic-arabic-wght-normal.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--void); color:var(--dust); font-family:var(--sans); font-size:14px; line-height:1.7; -webkit-text-size-adjust:100%; }
.shell { max-width:430px; min-height:100dvh; margin:0 auto; background:var(--night); position:relative; display:flex; flex-direction:column; }
.view { flex:1; display:flex; flex-direction:column; gap:16px; padding:20px 16px 104px; min-width:0; }
.boot { margin:40vh 0 0; text-align:center; color:var(--ash); }
h1 { margin:0; font-family:var(--serif); font-size:26px; font-weight:600; color:var(--star); line-height:1.4; }
h2 { margin:0; font-size:15px; font-weight:600; color:var(--star); }
h3 { margin:0; font-size:13px; font-weight:600; color:var(--star); }
p { margin:0; }
a { color:var(--brass); text-decoration:none; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }
.eyebrow { font-size:12px; color:var(--brass); font-weight:600; }
.muted { color:var(--ash); font-size:12px; }
.head { display:flex; flex-direction:column; gap:4px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stack { display:flex; flex-direction:column; gap:10px; }
.card { background:var(--void); border:1px solid var(--graphite); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.card.warn { border-style:dashed; border-color:var(--ash); }
.quote { margin:0; font-family:var(--serif); font-size:16px; color:var(--star); line-height:1.9; overflow-wrap:anywhere; }
.big { font-family:var(--serif); font-size:22px; color:var(--star); }
.key { font-size:12px; color:var(--brass); overflow-wrap:anywhere; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { min-height:44px; padding:0 14px; border-radius:999px; background:transparent; border:1px solid var(--graphite); color:var(--dust); font-size:13px; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background:var(--brass); color:#000; border-color:var(--brass); }
.chip.off { color:var(--ash); border-style:dashed; text-decoration:line-through; }
.chip.on { background:var(--graphite); color:var(--star); border-color:var(--graphite); }
.badge { font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--graphite); color:var(--ash); white-space:nowrap; }
.badge.cond { color:var(--brass); border-color:var(--brass); }
.badge.st { color:var(--star); border-color:var(--dust); }
.segs { display:flex; gap:3px; } .segs i { flex:1; height:4px; border-radius:2px; background:var(--graphite); } .segs i.on { background:var(--brass); }
.pillars { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(64px,1fr); gap:8px; overflow-x:auto; padding-bottom:4px; }
.pillar { border:1px solid var(--graphite); border-radius:12px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; text-align:center; }
.pillar b { font-size:26px; line-height:1.25; color:var(--star); font-weight:500; } .pillar.empty { border-style:dashed; }
.palaces { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,auto); gap:4px; }
.palace { border:1px solid var(--graphite); border-radius:8px; padding:6px 3px; min-height:84px; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:11px; line-height:1.4; text-align:center; }
.palace b { color:var(--star); font-size:12px; font-weight:500; line-height:1.35; } .palace.on { border-color:var(--brass); }
.meters { display:flex; flex-direction:column; gap:10px; } .meter { display:grid; grid-template-columns:64px 1fr 48px; align-items:center; gap:10px; font-size:12px; }
.meter b { color:var(--star); font-weight:500; text-align:left; direction:ltr; } .track { position:relative; height:6px; background:var(--graphite); border-radius:3px; direction:ltr; }
.track i { position:absolute; top:0; bottom:0; background:var(--brass); border-radius:3px; } .track em { position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--dust); }
.vbars { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; align-items:end; }
.vbar { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; color:var(--ash); } .vbar b { font-size:11px; color:var(--star); font-weight:500; } .vbar i { width:100%; background:var(--brass); border-radius:3px 3px 0 0; } .vbar span { writing-mode:vertical-rl; height:48px; font-size:10px; }
.spans { display:flex; flex-direction:column; gap:8px; } .span { display:grid; grid-template-columns:56px 1fr 78px; align-items:center; gap:8px; font-size:12px; } .span b { color:var(--star); font-weight:500; font-size:11px; text-align:left; direction:ltr; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; } .tile { border:1px solid var(--graphite); border-radius:12px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.tile b { font-size:28px; line-height:1.2; color:var(--star); font-weight:500; }
.tablewrap { overflow-x:auto; } table.grid { width:100%; border-collapse:collapse; font-size:12px; } table.grid th { text-align:start; color:var(--ash); font-weight:400; padding:6px 6px; border-bottom:1px solid var(--graphite); white-space:nowrap; }
table.grid td { padding:7px 6px; border-bottom:1px solid var(--graphite); color:var(--star); vertical-align:top; }
.full { display:flex; flex-direction:column; gap:6px; min-width:0; } dl.kv { display:grid; grid-template-columns:minmax(84px,auto) 1fr; gap:6px 12px; margin:0; font-size:12px; } dl.kv dt { color:var(--ash); } dl.kv dd { margin:0; color:var(--star); overflow-wrap:anywhere; min-width:0; }
details.sub { border-top:1px solid var(--graphite); } details.sub > summary { font-size:13px; font-weight:500; min-height:44px; } details.sub > :not(summary) { margin-bottom:10px; }
.grid2 > .card > .row { flex-wrap:wrap; } .grid2 > .card .badge { white-space:normal; }
.card.hero { padding:20px; border-radius:18px; }
/* الباب المتقابل: عارضة مستوية دائماً (لا ترجيح · ت-38) وتحتها كفّتان */
.card.differ { border-color:var(--brass); gap:10px; }
.opp { display:inline-block; width:14px; height:6px; margin-inline-start:6px; flex-shrink:0; background:radial-gradient(circle at 3px 3px, currentColor 2.6px, transparent 3px), radial-gradient(circle at 11px 3px, transparent 1.6px, currentColor 1.9px, currentColor 2.6px, transparent 3px); }
.facing { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:var(--dust); border-top:1px dashed var(--graphite); padding-top:8px; }
.facing .opp { color:var(--brass); margin:0; } .facing b { color:var(--star); font-weight:500; } .facing .link { margin-inline-start:auto; border-color:var(--brass); color:var(--star); }
.opphead { display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--graphite); padding-top:12px; margin-top:4px; }
.card.differ .chip[aria-pressed="true"] { background:var(--brass); color:#000; border-color:var(--brass); }
.beam { display:grid; grid-template-columns:1fr 14px 1fr; align-items:end; column-gap:0; padding:6px 0 0; position:relative; }
.beam b { font-family:var(--serif); font-size:16px; line-height:1.5; font-weight:600; color:var(--star); text-align:center; padding-bottom:8px; border-bottom:1px solid var(--brass); }
.beam i { width:10px; height:10px; background:var(--brass); transform:rotate(45deg); margin:0 2px -5px; }
.pans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; position:relative; align-items:start; }
.pans::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--graphite); }
.card.side { padding:12px 10px; border-radius:12px; gap:6px; }
.card.side > .row { flex-direction:column; align-items:flex-start; gap:4px; }
.card.side .badges { justify-content:flex-start; }
.card.side .quote { font-size:14.5px; line-height:1.8; }
.card.side .link { padding:0 10px; min-height:40px; }
.textbtn { background:none; border:0; padding:0; min-height:44px; color:var(--ash); font-size:12px; text-decoration:underline; }
.badges { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.btn { min-height:48px; padding:0 16px; border-radius:12px; border:1px solid var(--brass); background:transparent; color:var(--star); font-size:14px; display:flex; align-items:center; justify-content:center; text-align:center; }
.btn.primary { background:var(--brass); color:#000; border:0; font-weight:600; font-size:16px; min-height:52px; }
.btn.quiet { border-color:var(--graphite); color:var(--dust); }
.link { min-height:44px; padding:0 12px; border-radius:999px; background:transparent; border:1px solid var(--graphite); color:var(--dust); font-size:12px; align-self:flex-start; }
.src { font-size:12px; background:var(--night); border-radius:10px; padding:10px 12px; line-height:1.8; overflow-wrap:anywhere; }
.src b { color:var(--star); font-weight:500; }
.field { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.field input, .field select { height:46px; background:var(--void); border:1px solid var(--graphite); border-radius:10px; color:var(--star); padding:0 12px; font-size:15px; width:100%; min-width:0; }
.field input:focus, .field select:focus { outline:0; border-color:var(--brass); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ltr { direction:ltr; text-align:right; }
[dir=ltr] .ltr { text-align:left; }
[dir=ltr] .view, [dir=ltr] .tabs { font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; }
[dir=ltr] h1, [dir=ltr] .big, [dir=ltr] .quote[dir=ltr] { font-family:Georgia,'Times New Roman',serif; }
.list { display:flex; flex-direction:column; background:var(--void); border:1px solid var(--graphite); border-radius:14px; overflow:hidden; }
.item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; min-height:56px; border-top:1px solid var(--graphite); color:var(--dust); background:transparent; border-inline:0; border-bottom:0; width:100%; text-align:start; }
.item:first-child { border-top:0; }
.item .t { font-size:14px; color:var(--star); display:flex; align-items:center; gap:8px; }
.item .s { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--brass); }
.dot.part { background:transparent; border:2px solid var(--brass); }
.dot.wait { background:transparent; border:1px solid var(--dust); }
.dot.err { background:#fff; }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; }
.legend span { display:flex; align-items:center; gap:6px; }
.seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; background:var(--void); border:1px solid var(--graphite); border-radius:12px; padding:4px; }
.seg button { min-height:44px; border-radius:9px; border:0; background:transparent; color:var(--ash); font-size:13px; }
.seg button[aria-selected="true"] { background:var(--graphite); color:var(--star); }
.days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.day { height:58px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:transparent; border:1px solid var(--graphite); color:var(--dust); }
.day b { font-size:16px; font-weight:600; } .day span { font-size:11px; }
.day[aria-pressed="true"] { background:var(--brass); color:#000; border:0; }
.bar { height:6px; background:var(--graphite); border-radius:3px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--brass); border-radius:3px; }
.ev { display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--graphite); font-size:13px; }
.ev:first-child { border-top:0; } .ev time { width:84px; flex-shrink:0; color:var(--brass); } .ev span { color:var(--star); }
.tree { font-size:12px; direction:ltr; text-align:left; overflow-x:auto; background:var(--void); border:1px solid var(--graphite); border-radius:12px; padding:12px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--dust); font-family:ui-monospace,Consolas,monospace; }
.fine { font-size:11px; color:var(--ash); line-height:1.8; }
.tabs { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; height:76px; background:var(--void); border-top:1px solid var(--graphite); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:center; padding-bottom:env(safe-area-inset-bottom); z-index:5; }
.tabs a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px; color:var(--ash); min-height:56px; }
.tabs a[aria-current="page"] { color:var(--brass); }
.logo { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:20px; }
.back { min-height:44px; display:flex; align-items:center; font-size:13px; }
.switch { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 14px; border-top:1px solid var(--graphite); font-size:13px; color:var(--star); }
.switch:first-child { border-top:0; }
.switch input { width:22px; height:22px; accent-color:var(--brass); }
details > summary::after { content:'+'; margin-inline-start:auto; color:var(--brass); font-size:18px; font-weight:400; }
details[open] > summary::after { content:'−'; }
details > summary::-webkit-details-marker { display:none; }
details > summary { list-style:none; gap:10px; min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--star); font-size:14px; font-weight:600; }
@media print { .tabs, .noprint { display:none !important; } html, body, .shell, .card { background:#fff !important; color:#000 !important; } .quote, h1, h2, h3, .src b { color:#000 !important; } .shell { max-width:none; } }