/* components.css — reset, app shell, and the 11 rebuilt design-system components.
   Per-theme differences (font-family, case, radius, borders, shadows) switch on :root[data-theme]. */

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);}
body{
  font-family:var(--font-body);color:var(--text-strong);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;}
::-webkit-scrollbar-track{background:var(--scroll-track);}
@keyframes mkfade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.mkfade{animation:mkfade .4s var(--ease-out);}
.mono{font-family:var(--font-mono);}
.hidden{display:none !important;}

/* ---------- Topbar shell ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:12px 24px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line-card);flex-wrap:wrap;}
.topbar-brand{display:flex;align-items:center;gap:11px;padding-right:20px;border-right:1px solid var(--line-bright);}
.topbar-brand .bt{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-0.01em;line-height:1.05;color:var(--text-strong);}
.topbar-brand .bs{font-family:var(--font-body);font-size:11px;color:var(--text-muted);margin-top:2px;}
.topbar-nav{display:flex;align-items:center;gap:8px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.topbar-state{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-label);}
.brand-logo{flex:none;color:var(--text-strong);}.brand-logo .mark-n,.brand-logo .needle{fill:currentColor;}.brand-logo .needle-egg{fill:var(--brand-egg-deep);}
.screen-scroll{height:calc(100vh - 56px);overflow:auto;}

/* Theme toggle */
.theme-toggle{width:34px;height:34px;border:1px solid var(--line-bright);background:transparent;color:var(--text-strong);
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;
  transition:border-color .2s,color .2s;}
.theme-toggle:hover{border-color:var(--text-strong);}
.theme-toggle svg{width:16px;height:16px;display:block;}

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1;
  padding:0 18px;height:44px;border-radius:10px;white-space:nowrap;
  transition:background .2s,border-color .2s,transform .2s;}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-subtle{background:transparent;color:var(--text-strong);border:1px solid var(--line-bright);}
.btn-subtle:hover{border-color:var(--text-strong);background:var(--hover-tint);}
.btn-sm{height:36px;font-size:13px;padding:0 14px;border-radius:9px;}

/* ---------- Chip ---------- */
.chip{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:500;font-size:13px;line-height:1;
  height:34px;padding:0 15px;border-radius:999px;white-space:nowrap;
  background:transparent;color:var(--text-body);border:1px solid var(--line-bright);
  transition:background .18s,color .18s,border-color .18s;}
.chip:hover{border-color:var(--text-muted);}
.chip.active{background:var(--chip-active-bg);color:var(--chip-active-fg);border-color:var(--chip-active-bg);}
.chip-sm{height:32px;font-size:12.5px;padding:0 13px;}
.chip-xs{height:30px;font-size:12px;padding:0 12px;}

/* ---------- Tag (mono uppercase label) ---------- */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  background:var(--surface-inset);color:var(--text-muted);border:1px solid var(--line-bright);}
.tag[data-tone="high"]{color:var(--rag-high);border-color:color-mix(in srgb,var(--rag-high) 40%,transparent);background:color-mix(in srgb,var(--rag-high) 8%,transparent);}
.tag[data-tone="medium"]{color:var(--rag-med);border-color:color-mix(in srgb,var(--rag-med) 40%,transparent);background:color-mix(in srgb,var(--rag-med) 8%,transparent);}
.tag[data-tone="low"]{color:var(--rag-low);border-color:color-mix(in srgb,var(--rag-low) 40%,transparent);background:color-mix(in srgb,var(--rag-low) 8%,transparent);}

/* ---------- RiskBadge ---------- */
.riskbadge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.02em;white-space:nowrap;}
.riskbadge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.riskbadge[data-level="high"]{color:var(--rag-high);background:color-mix(in srgb,var(--rag-high) 12%,transparent);}
.riskbadge[data-level="med"]{color:var(--rag-med);background:color-mix(in srgb,var(--rag-med) 12%,transparent);}
.riskbadge[data-level="low"]{color:var(--rag-low);background:color-mix(in srgb,var(--rag-low) 12%,transparent);}
.riskbadge[data-level="none"]{color:var(--rag-none);background:color-mix(in srgb,var(--rag-none) 12%,transparent);}
.riskbadge[data-solid="true"]{height:30px;padding:0 14px;color:#fff;}
.riskbadge[data-solid="true"][data-level="high"]{background:var(--rag-high);}
.riskbadge[data-solid="true"][data-level="med"]{background:var(--rag-med);}
.riskbadge[data-solid="true"][data-level="low"]{background:var(--rag-low);}
.riskbadge[data-solid="true"] .dot{background:rgba(255,255,255,0.9);}

/* ---------- StatusPill ---------- */
.statuspill{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 9px;border-radius:999px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;}
.statuspill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.statuspill[data-tone="ok"]{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);}
.statuspill[data-tone="progress"]{color:var(--tone-progress);background:color-mix(in srgb,var(--tone-progress) 12%,transparent);}
.statuspill[data-tone="warn"]{color:var(--tone-warn);background:color-mix(in srgb,var(--tone-warn) 12%,transparent);}
.statuspill[data-tone="idle"]{color:var(--grey-2);background:color-mix(in srgb,var(--grey-2) 14%,transparent);}

/* ---------- DefectPin (teardrop) ---------- */
.defectpin{position:relative;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;}
.defectpin .drop{position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:1.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.35);}
.defectpin .num{position:relative;z-index:1;font-family:var(--font-mono);font-weight:600;color:#fff;font-size:9px;letter-spacing:-0.02em;}
.defectpin[data-sev="1"] .drop{background:var(--sev-1);} .defectpin[data-sev="2"] .drop{background:var(--sev-2);}
.defectpin[data-sev="3"] .drop{background:var(--sev-3);} .defectpin[data-sev="4"] .drop{background:var(--sev-4);}
.defectpin[data-sev="5"] .drop{background:var(--sev-5);}
.defectpin[data-selected="true"]{transform:scale(1.12);}
.defectpin[data-selected="true"] .drop{box-shadow:0 0 0 3px color-mix(in srgb,var(--text-strong) 18%,transparent),0 2px 8px rgba(0,0,0,0.4);}

/* ---------- ConfidenceTier ---------- */
.conftier{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--tone-progress);background:color-mix(in srgb,var(--tone-progress) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tone-progress) 30%,transparent);}
.conftier .steps{display:inline-flex;gap:2px;}
.conftier .steps i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.3;}
.conftier .steps i.on{opacity:1;}
.conftier[data-tier="candidate"]{color:var(--grey-2);background:color-mix(in srgb,var(--grey-2) 12%,transparent);border-color:color-mix(in srgb,var(--grey-2) 30%,transparent);}
.conftier[data-tier="corroborated"],.conftier[data-tier="verified"]{color:var(--ok);background:var(--ok-quiet);border-color:color-mix(in srgb,var(--ok) 34%,transparent);}

/* ---------- PriorityMark ---------- */
.pmark{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 6px;border-radius:8px;
  font-family:var(--font-body);font-size:12.5px;color:var(--text-body);
  border:1px solid var(--line-bright);background:var(--surface-inset);}
.pmark .p{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;
  font-family:var(--font-mono);font-size:10px;font-weight:500;color:#fff;background:var(--rag-high);}
.pmark[data-priority="2"] .p{background:var(--rag-med);} .pmark[data-priority="3"] .p{background:var(--rag-low);}

/* ---------- DataCaption (figures-come-from-survey) ---------- */
.datacaption{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;
  background:var(--caption-bg);border:1px solid var(--caption-border);color:var(--caption-fg);backdrop-filter:blur(6px);}
.datacaption .ic{opacity:0.7;}

/* ---------- Textarea ---------- */
.field-label{display:block;font-size:12px;color:var(--text-body);margin:0 0 6px;}
.ta{width:100%;min-height:84px;resize:vertical;font-family:var(--font-body);font-size:13px;line-height:1.5;
  color:var(--text-strong);background:var(--surface-inset);border:1px solid var(--line-bright);border-radius:8px;padding:10px 12px;}
.ta::placeholder{color:var(--text-faint);}
.ta:focus{outline:none;border-color:var(--text-muted);}

/* ---------- StatBlock ---------- */
.statblock .v{font-family:var(--font-mono);font-weight:500;font-size:32px;line-height:1;color:var(--text-strong);letter-spacing:-0.02em;}
.statblock .v .u{font-size:14px;color:var(--text-label);margin-left:3px;}
.statblock .l{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-label);margin-top:14px;}