/* ═══════════════════════════════════════════════════════════════════════
   ORBIT164 UI KIT - shared visual primitives.
   ADDITIVE ONLY: these classes are NOT yet wired into existing pages. They
   exist so the upcoming page rebuilds use ONE vocabulary instead of re-inlining
   styles. Tokens come from :root in index.html (--bg/--surface/--border/
   --yellow/--green/--red2/--text*/--r/--font/--font-display).

   Direction: hunter-native, fast in the aisle, deep after the hunt, private +
   earned + slightly reverent - not a generic collector/social app.

   Rules these encode:
     1. ONE surface depth per card. NEVER nest .ui-panel inside .ui-panel.
     2. Group with quiet section bands (.ui-label), not big hero headers.
     3. Numbers/score = --font-display; body copy = --font.
     4. Privacy reads QUIET (muted, reassuring) - never alarm-red.
     5. Earned states (Wild Seal / Verified / Legendary / Target) carry color;
        everything else stays neutral so the earned thing pops.
     6. Actions are full-width and thumb-reachable on mobile.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section label - the quiet band header above a group ───────────────── */
.ui-label{font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--text3);text-transform:uppercase;margin:18px 2px 8px;}
.ui-label:first-child{margin-top:0;}

/* ── Flat panel - one surface, one border, one radius. Do NOT nest. ────── */
.ui-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;}
.ui-panel + .ui-panel{margin-top:8px;}
/* Left-accent variant for a panel that needs a quiet category tint. */
.ui-panel.accent-green{border-left:3px solid var(--green);}
.ui-panel.accent-yellow{border-left:3px solid var(--yellow);}

/* ── Compact stat grid - hairline dividers via the border-bg trick ─────── */
.ui-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden;}
.ui-statgrid.cols-2{grid-template-columns:repeat(2,1fr);}
.ui-statgrid.cols-4{grid-template-columns:repeat(4,1fr);}
.ui-stat{background:var(--surface);text-align:center;padding:14px 8px;min-width:0;}
.ui-stat.hl-bg{background:rgba(255,215,0,0.06);}
/* Numbers use the readable body font (Nunito) with tabular, lining figures so
   digits 1 and 7 are unmistakable - the display font is kept for labels/titles. */
.ui-stat .v{font-family:'Nunito',sans-serif;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;font-size:26px;line-height:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui-stat .v.hl{color:var(--yellow);}
.ui-stat .k{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin-top:5px;}

/* ── Action row - icon · label/sub · chevron. The standard list item. ──── */
.ui-row{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;font-family:var(--font);color:var(--text);margin-bottom:8px;transition:border-color .12s ease,transform .1s ease;}
.ui-row:active{transform:scale(.99);}
.ui-row > .ic{font-size:20px;line-height:1;flex-shrink:0;}
.ui-row > .bd{flex:1;min-width:0;display:flex;flex-direction:column;}
.ui-row .t{font-size:14px;font-weight:900;color:var(--text);}
.ui-row .s{font-size:11px;font-weight:700;color:var(--text3);margin-top:2px;}
.ui-row > .ch{color:var(--text3);font-size:18px;flex-shrink:0;}
.ui-row.danger{border-color:rgba(232,25,10,.35);}
.ui-row.danger .t{color:var(--red2);}

/* ── Identity panel - avatar/name block; flat, no nested cards ─────────── */
.ui-identity{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;}
.ui-identity .meta{flex:1;min-width:0;}
.ui-identity .name{font-family:var(--font-display);font-size:22px;letter-spacing:1px;color:var(--yellow);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-identity .sub{font-size:11px;font-weight:700;color:var(--text3);margin-top:5px;}

/* ── Chips - earned / state signals. Base + colored variants. ──────────── */
.ui-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.04em;line-height:1;border:1px solid var(--border);background:var(--surface2);color:var(--text2);}
.ui-chip--seal{background:rgba(79,184,255,.14);border-color:rgba(79,184,255,.5);color:#4FB8FF;}          /* Wild Sealed */
.ui-chip--legendary{background:rgba(255,167,38,.14);border-color:rgba(255,167,38,.5);color:#FFA726;}    /* Legendary Seal */
.ui-chip--verified{background:rgba(0,200,83,.14);border-color:rgba(0,200,83,.5);color:var(--green);}    /* Verified Find */
.ui-chip--target{background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.45);color:var(--yellow);}  /* Target Hit */
.ui-chip--rare{background:rgba(232,25,10,.12);border-color:rgba(232,25,10,.45);color:var(--red2);}      /* Rare / TH / Rare Strike */
.ui-chip--season{background:rgba(255,215,0,.10);border-color:rgba(255,215,0,.35);color:var(--yellow);}  /* Beta Season N */
.ui-chip--dna{background:rgba(155,89,182,.12);border-color:rgba(155,89,182,.4);color:#B07AD8;}          /* Hunt DNA archetype */
.ui-chip--muted{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text3);}

/* ── Quiet privacy badge + note - reassuring, never alarming ───────────── */
.ui-privacy{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--text3);}
.ui-privacy-note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--r);padding:12px 16px;}
.ui-privacy-note .t{font-size:13px;font-weight:900;color:var(--text);}
.ui-privacy-note .s{font-size:11.5px;font-weight:700;color:var(--text3);line-height:1.5;margin-top:5px;}

/* ── Mobile-safe action buttons - full-width, thumb-friendly, stacked ──── */
.ui-actions{display:flex;flex-direction:column;gap:10px;}
.ui-actions.row{flex-direction:row;}
.ui-actions.row > *{flex:1;min-width:0;}
.ui-cta{width:100%;padding:14px;border:0;border-radius:var(--r);font-family:var(--font-display);font-size:20px;letter-spacing:1.5px;cursor:pointer;color:#fff;transition:transform .1s ease,box-shadow .12s ease;}
.ui-cta--primary{background:linear-gradient(135deg,var(--red),#FF3D00);box-shadow:0 8px 22px rgba(232,25,10,.4);}
.ui-cta--go{background:linear-gradient(135deg,var(--green),#0AA84F);}
.ui-cta--quiet{background:transparent;border:1px solid var(--border);color:var(--text2);font-family:var(--font);font-size:13px;font-weight:900;letter-spacing:.06em;padding:11px;}
.ui-cta:active{transform:scale(.98);}

/* ═══════════════════════════════════════════════════════════════════════
   MODULE / CONSOLE VOCABULARY (v2 visual pass - additive)
   Makes major systems read like named modules in a collector command center:
   a compact tech-console header (number + title + one status chip), quiet
   scanner-bracket accents, and a Proof + Trust explainer block. Tokens only;
   dark-theme; mobile-first; no big heroes, no nested cards, no giant gradients.
   ═══════════════════════════════════════════════════════════════════════ */

/* Compact module header: "01 · HUNT MODE" + optional chip on the right. Sits
   ABOVE or at the top of a flat card - never a hero. */
.os-modhead{display:flex;align-items:center;gap:8px;margin:0 0 8px;}
.os-modhead .num{font-family:'Nunito',sans-serif;font-variant-numeric:tabular-nums lining-nums;font-size:13px;line-height:1;color:var(--text3);letter-spacing:1px;opacity:.85;font-weight:900;}
.os-modhead .ttl{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);}
.os-modhead .sp{flex:1;}
.os-modhead.accent-yellow .num{color:var(--yellow);}
.os-modhead.accent-green .num{color:var(--green);}
.os-modhead.accent-blue .num{color:var(--blue2);}
.os-modhead.accent-red .num{color:var(--red2);}

/* Tiny status chip with an optional pulsing dot. Quieter than .ui-chip. */
.os-status{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);background:var(--surface2);color:var(--text3);}
.os-status .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.os-status.live{color:var(--green);border-color:rgba(0,200,83,.45);background:rgba(0,200,83,.10);}
.os-status.live .d{box-shadow:0 0 6px var(--green);animation:osPulse 1.8s ease-in-out infinite;}
.os-status.warm{color:var(--yellow);border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.08);}
.os-status.alert{color:var(--red2);border-color:rgba(232,25,10,.4);background:rgba(232,25,10,.08);}
@keyframes osPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@media (prefers-reduced-motion: reduce){.os-status.live .d{animation:none;}}

/* Quiet left-accent that turns a flat card into a "module". One border only. */
.os-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 13px;}
.os-card.lead-yellow{border-left:3px solid var(--yellow);}
.os-card.lead-green{border-left:3px solid var(--green);}
.os-card.lead-blue{border-left:3px solid var(--blue2);}
.os-card.lead-red{border-left:3px solid var(--red2);}

/* Scanner corner brackets - a subtle "vision console" frame. Decorative only,
   pointer-events off so it never blocks taps. */
.os-bracket{position:relative;}
.os-bracket::before,.os-bracket::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;opacity:.55;}
.os-bracket::before{top:6px;left:6px;border-top:2px solid var(--yellow);border-left:2px solid var(--yellow);border-top-left-radius:4px;}
.os-bracket::after{bottom:6px;right:6px;border-bottom:2px solid var(--yellow);border-right:2px solid var(--yellow);border-bottom-right-radius:4px;}

/* ── Proof + Trust explainer module - compact, scannable, mobile-first ──── */
.os-trust{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.os-trust-item{display:flex;align-items:flex-start;gap:11px;background:var(--surface);padding:12px 14px;}
.os-trust-item .ic{font-size:17px;line-height:1.2;flex-shrink:0;width:22px;text-align:center;}
.os-trust-item .bd{min-width:0;}
.os-trust-item .t{font-size:13px;font-weight:900;color:var(--text);letter-spacing:.01em;}
.os-trust-item .t .tag{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-left:7px;}
.os-trust-item .t .tag.care{color:var(--yellow);}
.os-trust-item .s{font-size:11.5px;font-weight:700;color:var(--text3);line-height:1.5;margin-top:3px;}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ui-row:active,.ui-cta:active{transform:none;}
}