/* ============================================================
   UFO EXPERIENCE — Command Center V1
   طبقة قدرات جديدة فوق نظام التصميم القائم (BLACK INTELLIGENCE).
   لا خطوط جديدة ولا ألوان جديدة — كلّها var(--*) من bi.css.
   لا تمسّ النواة: تقرأ /feed/*.json فقط.
   ============================================================ */

/* freshness pill */
.fresh{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);
  letter-spacing:.06em;padding:5px 9px;border-radius:2px;border:1px solid var(--line-soft);
  color:var(--faint);direction:ltr;vertical-align:middle}
.fresh .dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.fresh.live{color:var(--up);border-color:rgba(38,200,137,.28)}
.fresh.live .dot{background:var(--up);box-shadow:0 0 8px var(--up);animation:livepulse 1.7s ease-in-out infinite}
.fresh.lag{color:var(--gold);border-color:rgba(214,175,88,.28)}
.fresh.lag .dot{background:var(--gold)}
.fresh.stale{color:var(--down);border-color:rgba(239,82,103,.28)}
.fresh.stale .dot{background:var(--down)}
@media(prefers-reduced-motion:reduce){.fresh.live .dot{animation:none}}

/* command-center hero / situation */
.cc-hero{padding:34px 0 8px}
.cc-situation{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cc-state{font-family:var(--geo);font-size:clamp(22px,4vw,34px);font-weight:700;letter-spacing:.02em;
  line-height:1.15}
.cc-sub{color:var(--faint);font-size:13px;margin-top:6px;max-width:60ch;line-height:1.7}
.cc-q{color:var(--muted);font-size:12.5px}

/* dashboard grid of panels */
.cc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:20px}
.panel{grid-column:span 6;background:linear-gradient(180deg,#0D1016,#090B0F);
  border:1px solid var(--line-soft);border-radius:3px;padding:16px 17px;position:relative}
.panel.updated{animation:panelflash 1.1s ease-out}
@keyframes panelflash{0%{border-color:rgba(214,175,88,.55)}100%{border-color:var(--line-soft)}}
@media(prefers-reduced-motion:reduce){.panel.updated{animation:none}}
.panel .phead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.panel .phead .kicker{margin:0}
.panel .phead .fresh{margin-inline-start:auto}
.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media(max-width:900px){.panel,.span-4,.span-6,.span-8{grid-column:span 12}}
/* responsive card grid for reading files (NOT the 12-col dashboard grid) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:start}
.card-grid .file{margin-bottom:0}

/* big metric */
.big{font-family:var(--mono);font-size:30px;font-weight:600;direction:ltr;line-height:1}
.big .u{font-size:13px;color:var(--faint);margin-inline-start:6px}
.subline{color:var(--muted);font-size:12.5px;line-height:1.8;margin-top:8px}

/* funnel */
.funnel{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.frow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.ftrack{height:20px;border-radius:2px;background:#0A0C11;border:1px solid var(--line-soft);
  position:relative;overflow:hidden}
.ffill{position:absolute;inset-block:0;inset-inline-start:0;
  background:linear-gradient(90deg,rgba(214,175,88,.16),rgba(214,175,88,.42));border-inline-end:1px solid var(--gold-dk)}
.frow .fl{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fv{font-family:var(--mono);font-size:12.5px;color:var(--ivory);direction:ltr;min-width:52px;text-align:end}
.frow.sel .fl{color:var(--gold)}

/* attention objects */
.att{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:4px}
.att-card{background:#0A0C11;border:1px solid var(--line-soft);border-radius:3px;padding:12px;
  cursor:pointer;transition:.18s;display:block;text-align:start}
.att-card:hover{border-color:var(--line);transform:translateY(-2px)}
.att-card .as{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.att-card .as .sym{font-family:var(--geo);font-size:13px;font-weight:700;direction:ltr}
.att-card .score{margin-inline-start:auto;font-family:var(--mono);font-size:12px;color:var(--gold);direction:ltr}
.att-card .note{font-size:11.5px;color:var(--muted);line-height:1.6}
.att-empty{padding:22px 14px;text-align:center;color:var(--muted);font-size:13px;
  border:1px dashed var(--line-soft);border-radius:3px;line-height:1.8}
.att-empty b{color:var(--gold);font-weight:600}

/* changes-since-last-visit band */
.changes{margin-top:16px;border:1px solid rgba(76,201,232,.22);background:rgba(76,201,232,.04);
  border-radius:3px;padding:14px 16px}
.changes.none{border-color:var(--line-soft);background:rgba(214,175,88,.03)}
.changes h4{font-size:13px;color:var(--tech);margin-bottom:8px;font-weight:700}
.changes.none h4{color:var(--gold)}
.changes ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.changes li{font-size:12.5px;color:var(--muted);line-height:1.7;padding-inline-start:16px;position:relative}
.changes li::before{content:"▸";position:absolute;inset-inline-start:0;color:var(--tech)}
.changes .when{color:var(--faint);font-size:11.5px}

/* degraded / unavailable */
.degraded{border:1px solid rgba(239,82,103,.24);background:rgba(239,82,103,.04);border-radius:3px;
  padding:14px 16px;color:var(--down-lt);font-size:12.5px;line-height:1.8}
.degraded b{color:var(--down);font-weight:600}
.skel{background:linear-gradient(90deg,#0C0F14,#12161d,#0C0F14);border-radius:2px;height:14px;
  animation:skel 1.4s ease-in-out infinite;background-size:200% 100%}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* deep-links row */
.deeplinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.deeplinks a{border:1px solid var(--line);color:var(--ivory);background:rgba(13,16,22,.6);
  border-radius:2px;padding:10px 14px;font-size:12.5px;transition:.18s;display:inline-flex;gap:8px;align-items:center}
.deeplinks a:hover{border-color:rgba(200,164,89,.42);color:var(--gold-lt)}
.deeplinks a .k{font:700 9px/1 var(--geo);letter-spacing:.2em;color:var(--gold-dk);direction:ltr}

/* ============ Decision Story drawer ============ */
.drawer-bg{position:fixed;inset:0;z-index:60;background:rgba(2,2,2,.72);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-bg.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;inset-inline-end:0;z-index:61;height:100vh;width:min(560px,100vw);
  background:var(--bg-2);border-inline-start:1px solid var(--line);overflow-y:auto;
  transform:translateX(100%);transition:transform .22s ease-out}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.on{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.drawer,.drawer-bg{transition:none}}
.drawer .dh{position:sticky;top:0;background:rgba(8,9,12,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);padding:16px 20px;display:flex;align-items:center;gap:12px;z-index:2}
.drawer .dh .close{margin-inline-start:auto;border:1px solid var(--line);color:var(--muted);
  background:none;width:32px;height:32px;border-radius:2px;cursor:pointer;font-size:16px}
.drawer .dh .close:hover{color:var(--gold);border-color:rgba(200,164,89,.4)}
.drawer .db{padding:18px 20px 60px}
.drawer .sec{margin:18px 0}
.drawer .sec .lbl{font:700 9.5px/1 var(--geo);letter-spacing:.28em;color:var(--gold-dk);
  direction:ltr;margin-bottom:10px;display:block}
.reasons{list-style:none;display:flex;flex-direction:column;gap:8px}
.reasons li{font-size:13px;color:var(--ivory);line-height:1.6;padding:10px 12px;border-radius:2px;
  background:rgba(38,200,137,.05);border-inline-start:2px solid var(--up-dk)}
.reasons li:first-child{background:rgba(38,200,137,.09);border-inline-start-color:var(--up)}
.reasons.risk li{background:rgba(239,82,103,.05);border-inline-start-color:var(--down-dk);color:var(--down-lt)}
.reasons .rk{font:700 8px/1 var(--geo);letter-spacing:.16em;color:var(--up);display:block;margin-bottom:4px;direction:ltr}
.reasons.risk .rk{color:var(--down)}
.tl{list-style:none;border-inline-start:1px solid var(--line-soft);margin-inline-start:6px;
  padding-inline-start:16px;display:flex;flex-direction:column;gap:14px}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;inset-inline-start:-21px;top:4px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--bg-2)}
.tl .tt{font-family:var(--mono);font-size:10.5px;color:var(--faint);direction:ltr}
.tl .tx{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:3px}
.tl .st{font:700 9px/1 var(--geo);letter-spacing:.14em;color:var(--up);direction:ltr}
.dna-tbl{width:100%;border-collapse:collapse;font-size:12px}
.dna-tbl td{padding:7px 8px;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.dna-tbl td:last-child{text-align:end;font-family:var(--mono);color:var(--ivory);direction:ltr}
.dna-tbl tr.best td{color:var(--up-lt)}
.calib{font-size:12px;color:var(--muted);line-height:1.8;padding:11px 13px;
  background:rgba(76,201,232,.04);border-inline-start:2px solid var(--tech);border-radius:2px}
.calib b{font-family:var(--mono);color:var(--tech);direction:ltr}
.adv{border:1px solid var(--line-soft);border-radius:3px;overflow:hidden}
.adv .aq{width:100%;text-align:start;background:#0A0C11;border:none;border-bottom:1px solid var(--line-soft);
  color:var(--gold-lt);font:600 12.5px/1.4 var(--body);padding:12px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
.adv .aq:hover{background:#0d1016}
.adv .aq::before{content:"?";font:700 11px/1 var(--geo);color:var(--gold-dk);
  border:1px solid var(--gold-dk);border-radius:50%;width:18px;height:18px;display:grid;place-items:center;flex:none}
.adv .aa{padding:0 14px;max-height:0;overflow:hidden;transition:max-height .22s ease,padding .22s}
.adv .aa.open{max-height:600px;padding:12px 14px}
.adv .aa p{font-size:12.5px;color:var(--muted);line-height:1.75;margin-bottom:8px}
.adv-note{font-size:11.5px;color:var(--faint);line-height:1.7;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line-soft)}
.prov{font-size:10.5px;color:var(--faint);line-height:1.7;margin-top:6px;direction:ltr;font-family:var(--mono)}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}

/* discovery stream items reuse .panel; small event chip */
.evk{font:700 8.5px/1 var(--geo);letter-spacing:.16em;padding:4px 8px;border-radius:2px;direction:ltr;
  border:1px solid var(--line-soft);color:var(--faint)}
.evk.op{color:var(--up);border-color:rgba(38,200,137,.28)}
.evk.mon{color:var(--tech);border-color:rgba(76,201,232,.28)}
.evk.ret{color:var(--down);border-color:rgba(239,82,103,.28)}
.disc{display:flex;flex-direction:column;gap:10px}
.disc .d1{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.disc .terms{font-size:13px;color:var(--ivory)}
.disc .stat{font-family:var(--mono);font-size:12px;color:var(--gold);direction:ltr;margin-inline-start:auto}
.disc .sub{font-size:11.5px;color:var(--faint);width:100%;line-height:1.6}