/* design-system.css — ZionLink
 *
 * UI Phase 1 (docs/UI_REDESIGN_PLAN.md). Evolves the existing palette
 * (already correct per CLAUDE.md's own aesthetic rules — dark, Geist, one
 * purple accent, no gradients-on-white) into one shared token + component
 * file, instead of every page re-declaring its own overlapping :root block.
 * platform-shell.css's existing --zl-* token names are the canonical ones
 * (that file is already shared across pages); this file adds the tokens it
 * was missing (status colors, spacing scale) and every reusable component
 * class the redesign needs. Existing pages are unaffected until they
 * opt in by linking this file — nothing here overrides page-local styles.
 */

:root{
  /* Color — matches platform-shell.css exactly, extended with status semantics */
  --zl-bg:#080809; --zl-s1:#0f0f11; --zl-s2:#141416;
  --zl-border:rgba(255,255,255,.075); --zl-border-hi:rgba(155,81,255,.22);
  --zl-purple:#9b51ff; --zl-purple-dim:rgba(155,81,255,.1);
  --zl-lavender:#c4a8ff; --zl-white:#fff;
  --zl-muted:#a1a1aa; --zl-dim:#52525b; --zl-dimmer:#27272a;
  --zl-paper:#f2ecdf;

  /* Status semantics (section 28 of the brief) — used consistently everywhere,
     never invented per-component */
  --zl-green:#4ade80; --zl-green-dim:rgba(74,222,128,.1);
  --zl-amber:#f59e0b; --zl-amber-dim:rgba(245,158,11,.1);
  --zl-red:#f87171; --zl-red-dim:rgba(248,113,113,.1);

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* Radius */
  --rad-sm:8px; --rad-md:12px; --rad-lg:16px;
}

.zl-ds{font-family:'Geist',system-ui,sans-serif;color:var(--zl-white);}
.zl-ds .mono{font-family:'Geist Mono',monospace;}
.zl-ds .serif{font-family:'Fraunces',Georgia,serif;color:var(--zl-paper);}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.zl-page{padding:40px 32px 80px;max-width:1180px;margin:0 auto;}
.zl-eyebrow{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--zl-lavender);margin-bottom:8px;}
.zl-h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:500;color:var(--zl-paper);letter-spacing:-.02em;line-height:1.15;}
.zl-sub{font-size:14px;color:var(--zl-muted);margin-top:6px;line-height:1.5;}
.zl-section-title{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--zl-dim);margin:var(--sp-6) 0 var(--sp-3);}

/* ── Card ───────────────────────────────────────────────────────────────── */
.zl-card{background:var(--zl-s1);border:1px solid var(--zl-border);border-radius:var(--rad-md);padding:var(--sp-5);}
.zl-card.accent{border-left:3px solid var(--zl-purple);}
.zl-card + .zl-card{margin-top:var(--sp-3);}
.zl-card-row{display:flex;gap:var(--sp-3);}
.zl-card-row .zl-card{flex:1;margin-top:0;}

/* ── Score (section 29 — compact, never a gauge) ───────────────────────── */
.zl-score{display:flex;align-items:baseline;gap:6px;}
.zl-score .num{font-size:26px;font-weight:650;color:var(--zl-white);line-height:1;}
.zl-score .max{font-size:13px;color:var(--zl-dim);}
.zl-score .trend{font-size:12.5px;font-weight:600;margin-left:4px;}
.zl-score .trend.up{color:var(--zl-lavender);}
.zl-score .trend.down{color:var(--zl-red);}
.zl-score-bar{height:4px;border-radius:2px;background:var(--zl-dimmer);margin-top:6px;overflow:hidden;width:120px;}
.zl-score-bar > i{display:block;height:100%;background:var(--zl-purple);border-radius:2px;}

/* ── Status pill — one shape, color-coded, not five badge styles ─────────── */
.zl-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.02em;font-family:'Geist Mono',monospace;text-transform:uppercase;}
.zl-pill.ready{background:var(--zl-purple-dim);color:var(--zl-lavender);}
.zl-pill.candidate{background:rgba(255,255,255,.06);color:var(--zl-muted);}
.zl-pill.watch{background:var(--zl-amber-dim);color:var(--zl-amber);}
.zl-pill.risk{background:var(--zl-red-dim);color:var(--zl-red);}
.zl-pill.reactivated{background:var(--zl-purple-dim);color:var(--zl-lavender);}

/* ── Buttons — three variants only ─────────────────────────────────────── */
.zl-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600;font-family:'Geist',sans-serif;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .15s;}
.zl-btn.primary{background:var(--zl-purple);color:#fff;}
.zl-btn.primary:hover{background:#a862ff;}
.zl-btn.ghost{background:none;border-color:var(--zl-border);color:var(--zl-white);}
.zl-btn.ghost:hover{border-color:var(--zl-border-hi);}
.zl-btn.text{background:none;border:none;color:var(--zl-lavender);padding:9px 4px;}
.zl-btn.small{padding:6px 12px;font-size:12px;}

/* ── Stat chip (Today's priority summary — clickable) ─────────────────── */
.zl-stat-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.zl-stat{flex:1;min-width:160px;background:var(--zl-s1);border:1px solid var(--zl-border);border-radius:var(--rad-md);padding:var(--sp-4);text-decoration:none;color:inherit;transition:border-color .15s;display:block;}
.zl-stat:hover{border-color:var(--zl-border-hi);}
.zl-stat .n{font-size:24px;font-weight:650;color:var(--zl-white);}
.zl-stat .n.amber{color:var(--zl-amber);}
.zl-stat .n.green{color:var(--zl-lavender);}
.zl-stat .l{font-size:12.5px;color:var(--zl-muted);margin-top:2px;}

/* ── Table → card responsive pattern ───────────────────────────────────── */
.zl-table{width:100%;border-collapse:collapse;}
.zl-table th{text-align:left;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--zl-dim);padding:0 var(--sp-3) var(--sp-2);border-bottom:1px solid var(--zl-border);font-weight:500;}
.zl-table td{padding:var(--sp-3);border-bottom:1px solid var(--zl-border);font-size:13.5px;}
.zl-table tr:last-child td{border-bottom:none;}
@media(max-width:720px){
  .zl-table thead{display:none;}
  .zl-table, .zl-table tbody, .zl-table tr, .zl-table td{display:block;width:100%;}
  .zl-table tr{background:var(--zl-s1);border:1px solid var(--zl-border);border-radius:var(--rad-md);margin-bottom:var(--sp-3);padding:var(--sp-3);}
  .zl-table td{border:none;padding:4px 0;}
  .zl-card-row{flex-direction:column;}
}

/* ── Empty / loading / error states ────────────────────────────────────── */
.zl-empty{padding:var(--sp-6) var(--sp-5);text-align:center;color:var(--zl-muted);font-size:13.5px;border:1px dashed var(--zl-border);border-radius:var(--rad-md);}
.zl-empty .zl-btn{margin-top:var(--sp-3);}
.zl-loading{color:var(--zl-dim);font-size:13px;display:flex;align-items:center;gap:8px;}
.zl-loading .dot{width:6px;height:6px;border-radius:50%;background:var(--zl-lavender);animation:zlPulse 1.4s infinite;}
@keyframes zlPulse{0%,100%{opacity:.3}50%{opacity:1}}
.zl-error{padding:var(--sp-4);border-radius:var(--rad-md);background:var(--zl-red-dim);border:1px solid rgba(248,113,113,.2);color:var(--zl-red);font-size:13px;}

/* ── Expansion selector (shell header) ─────────────────────────────────── */
.zl-exp-selector{position:relative;}
.zl-exp-trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--zl-border);background:var(--zl-s1);cursor:pointer;color:var(--zl-white);font-size:13px;font-weight:600;max-width:240px;}
.zl-exp-trigger:hover{border-color:var(--zl-border-hi);}
.zl-exp-trigger .cli{color:var(--zl-muted);font-weight:400;font-size:11.5px;display:block;margin-bottom:1px;}
.zl-exp-trigger svg{width:13px;height:13px;stroke:var(--zl-dim);flex-shrink:0;margin-left:auto;}
.zl-exp-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:#141416;border:1px solid var(--zl-border);border-radius:var(--rad-md);box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:1200;display:none;overflow:hidden;}
.zl-exp-menu.open{display:block;}
.zl-exp-item{display:block;padding:10px 14px;color:var(--zl-white);text-decoration:none;font-size:13px;cursor:pointer;border-bottom:1px solid var(--zl-border);}
.zl-exp-item:last-child{border-bottom:none;}
.zl-exp-item:hover{background:var(--zl-s2);}
.zl-exp-item.active{color:var(--zl-lavender);background:var(--zl-purple-dim);}
.zl-exp-item .st{font-size:10.5px;color:var(--zl-dim);text-transform:uppercase;font-family:'Geist Mono',monospace;margin-left:6px;}

/* ── Market Scope selector (market-scope.js, 2026-10-05) ──────────────────
   The shared multi-select, reusing the Expansion selector's own tokens and
   visual language (same trigger/menu shape) rather than a new style. */
.zl-scope-selector{position:relative;}
.zl-scope-trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--zl-border);background:var(--zl-s1);cursor:pointer;color:var(--zl-white);font-size:13px;font-weight:600;max-width:260px;}
.zl-scope-trigger:hover{border-color:var(--zl-border-hi);}
.zl-scope-dot{width:7px;height:7px;border-radius:50%;background:var(--zl-purple);flex-shrink:0;}
.zl-scope-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zl-scope-trigger svg{width:13px;height:13px;stroke:var(--zl-dim);flex-shrink:0;margin-left:auto;}
.zl-scope-menu{position:absolute;top:calc(100% + 6px);left:0;width:280px;max-height:360px;overflow-y:auto;background:#141416;border:1px solid var(--zl-border);border-radius:var(--rad-md);box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:1200;padding:6px 0;}
.zl-scope-heading{margin:0;padding:8px 14px 4px;color:var(--zl-dim);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.zl-scope-row{display:flex;align-items:center;gap:9px;padding:8px 14px;color:var(--zl-white);font-size:13px;cursor:pointer;}
.zl-scope-row:hover{background:var(--zl-s2);}
.zl-scope-row input{flex:0 0 auto;accent-color:var(--zl-purple);width:14px;height:14px;}
.zl-scope-row span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.zl-scope-row small{color:var(--zl-dim);font-size:10.5px;}
.zl-scope-all{border-bottom:1px solid var(--zl-border);margin-bottom:2px;padding-bottom:10px;}
.zl-scope-divider{display:none;}
@media(max-width:720px){
  .zl-scope-trigger{max-width:none;width:100%;}
  .zl-scope-menu{left:0;right:0;width:auto;}
}

/* ── Opportunity components (UI Phase 3) ───────────────────────────────── */
.zl-fact{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;background:var(--zl-s2);border:1px solid var(--zl-border);font-size:12.5px;color:var(--zl-white);}
.zl-fact::before{content:'✓';color:var(--zl-lavender);font-weight:700;font-size:11px;}
.zl-disqualifier{border:1px solid rgba(248,113,113,.28);background:var(--zl-red-dim);border-radius:var(--rad-md);padding:var(--sp-4);color:var(--zl-white);font-size:13px;line-height:1.5;}
.zl-disqualifier .lbl{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--zl-red);margin-bottom:6px;display:block;}

/* Timeline — used for both Intelligence (external Findings) and Activity
   (ZionLink/user workflow) sections; kept as one shared shape, callers
   supply their own dot color so the two stay visually distinguishable
   without becoming two different components. */
.zl-timeline{position:relative;padding-left:20px;}
.zl-timeline::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--zl-border);}
.zl-tl-item{position:relative;padding-bottom:var(--sp-4);}
.zl-tl-item:last-child{padding-bottom:0;}
.zl-tl-item::before{content:'';position:absolute;left:-20px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--zl-purple);border:2px solid var(--zl-bg);}
.zl-tl-item.activity::before{background:var(--zl-dim);}
.zl-tl-date{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--zl-dim);margin-bottom:3px;}
.zl-tl-title{font-size:13.5px;color:var(--zl-white);font-weight:600;line-height:1.4;}
.zl-tl-meta{font-size:12px;color:var(--zl-muted);margin-top:3px;}
.zl-tl-excerpt{font-size:12.5px;color:var(--zl-muted);margin-top:6px;line-height:1.55;background:var(--zl-s2);border-radius:8px;padding:10px 12px;display:none;}
.zl-tl-excerpt.open{display:block;}

/* Confidence / trust — deliberately unstyled as a pill (section 13: never
   merge with the state indicator that already uses .zl-pill's colors). */
.zl-trust{font-size:12.5px;color:var(--zl-muted);}
.zl-trust b{color:var(--zl-white);font-weight:600;}

.zl-filter-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:var(--sp-4) 0 var(--sp-5);}
.zl-filter-bar select,.zl-filter-bar input[type=text],.zl-filter-bar input[type=number]{background:var(--zl-s1);border:1px solid var(--zl-border);border-radius:8px;color:var(--zl-white);font-size:12.5px;padding:7px 10px;font-family:'Geist',sans-serif;}
.zl-filter-bar label{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--zl-muted);background:var(--zl-s1);border:1px solid var(--zl-border);border-radius:8px;padding:7px 10px;cursor:pointer;}
.zl-filter-bar label:has(input:checked){border-color:var(--zl-border-hi);color:var(--zl-white);}

/* platform-nav.js positions .zl-exp-bar inline at top:16px;left:98px (clear
   of the desktop left rail); on mobile the nav becomes a bottom bar instead,
   so the selector needs to move to a full-width top position or it would
   float in the middle of page content. */
@media(max-width:720px){
  .zl-exp-bar{position:fixed !important;top:10px !important;left:12px !important;right:12px !important;}
  .zl-exp-trigger{max-width:none;width:100%;}
  .zl-exp-menu{left:0;right:0;min-width:0;}
}
/* The selector bar is fixed and would otherwise overlap the top of whatever
   the page renders first — every page platform-nav.js runs on gets this
   class and reserves space for it, same principle as body.has-zl-shell's
   own padding-left/padding-bottom for the icon rail. */
body.has-zl-exp-bar{padding-top:56px;}
@media(max-width:720px){ body.has-zl-exp-bar{padding-top:50px;} }