/* ==========================================================================
   ts-design.css  ·  TrulySovereign shared design system  ·  v0.1 proposal
   Scope: trulysovereign.com, RADAR, JCR, PROBE, FARADAY, Undertow.
   Built from what already works: the main site's brand tokens (already copied
   by RADAR and the JCR demo) and the Undertow dashboard's dense, readable
   tool layout (glance tiles, status pills, sticky tabs, mobile behaviour).

   Two surfaces, one token set:
     data-ts-theme="dark"   brand + public tools (site, RADAR, JCR, FARADAY page)
     data-ts-theme="light"  workbench tools with long working sessions
                            (Undertow, PROBE). The top bar and footer stay dark
                            in both, so every tool reads as one family.
   Per tool: set data-ts-tool="radar|jcr|probe|faraday|undertow" on <html>.
   A tool accent marks identity only. It never encodes status.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL, latin subset; same files as the site) */
@font-face{font-family:"Orbitron";font-weight:500 700;font-display:swap;src:local("Orbitron"),url(/fonts/orbitron-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:local("Inter"),url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:local("Inter Medium"),url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:local("Inter SemiBold"),url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:local("Inter Bold"),url(/fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Share Tech Mono";font-weight:400;font-display:swap;src:local("Share Tech Mono"),url(/fonts/share-tech-mono-latin-400-normal.woff2) format("woff2")}

:root{
  /* ---- Brand core (unchanged from trulysovereign.com index.css) ---- */
  --ts-cyan:      #00ccff;   /* hsl(192 100% 50%)  primary */
  --ts-violet:    #8a4dff;   /* hsl(262 100% 59%)  secondary */
  --ts-magenta:   #ff3366;   /* hsl(345 100% 60%)  accent, Contact only */
  --ts-gold:      #ebc247;   /* hsl(45 85% 60%)    rule lines, highlights */
  --ts-night:     #00030a;   /* hsl(230 100% 2%)   page background, dark */
  --ts-navy:      #070b16;   /* top bar + footer, both themes */
  --ts-steel:     #788ca0;

  /* ---- Tool accents (identity only: stripe, mark, active tab) ---- */
  --ts-acc-site:     var(--ts-cyan);
  --ts-acc-radar:    #00ccff;
  --ts-acc-jcr:      #a58bff;
  --ts-acc-probe:    #4fbf87;
  --ts-acc-faraday:  #d4935a;
  --ts-acc-undertow: #14b8a6;
  --ts-tool: var(--ts-acc-site);

  /* ---- Status (same meaning everywhere; always paired with a label) ---- */
  --ts-ok:   #22c55e;  --ts-ok-ink:#166534;   --ts-ok-bg:#dcfce7;
  --ts-warn: #f5a524;  --ts-warn-ink:#92400e; --ts-warn-bg:#fef3c7;
  --ts-fail: #f43f5e;  --ts-fail-ink:#9f1239; --ts-fail-bg:#ffe4e6;
  --ts-info: #0ea5e9;  --ts-info-ink:#075985; --ts-info-bg:#e0f2fe;
  --ts-na:   #94a3b8;  --ts-na-ink:#334155;   --ts-na-bg:#e2e8f0;

  /* ---- Maturity labels (site StatusBadge + new EXPERIMENT and SYNTHETIC) ---- */
  --ts-m-ga:       var(--ts-ok);
  --ts-m-limited:  var(--ts-warn);
  --ts-m-inuse:    var(--ts-cyan);
  --ts-m-research: var(--ts-steel);
  --ts-m-hold:     var(--ts-warn);
  --ts-m-experiment: #2dd4bf;
  --ts-m-synthetic:  var(--ts-gold);

  /* ---- Type ---- */
  --ts-font-display: "Orbitron", "Segoe UI", sans-serif;     /* wordmarks, tool names, marketing H1 only */
  --ts-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ts-font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ts-text-2xs: 11px;  /* mono labels, badges */
  --ts-text-xs:  12px;  /* meta, captions */
  --ts-text-sm:  13px;  /* table cells, secondary */
  --ts-text-base:14px;  /* tool body */
  --ts-text-md:  16px;  /* marketing body, card titles */
  --ts-text-lg:  18px;
  --ts-text-xl:  22px;  /* page title in tools */
  --ts-text-2xl: 28px;  /* KPI numbers */
  --ts-text-3xl: 36px;  /* marketing H2 / tool hero */
  --ts-text-4xl: clamp(32px, 4.4vw, 56px); /* marketing H1 */
  --ts-leading: 1.5;
  --ts-track-display: .06em;
  --ts-track-label: .14em;

  /* ---- Space (4px base) ---- */
  --ts-s1:4px; --ts-s2:8px; --ts-s3:12px; --ts-s4:16px; --ts-s5:20px;
  --ts-s6:24px; --ts-s8:32px; --ts-s12:48px; --ts-s16:64px;
  --ts-content: 1180px;  /* tools */
  --ts-content-site: 1152px; --ts-prose: 768px; --ts-form: 448px; /* site tiers, unchanged */
  --ts-bar-h: 56px;

  /* ---- Shape + depth ---- */
  --ts-r-sm: 6px; --ts-r-md: 10px; --ts-r-lg: 14px; --ts-r-pill: 999px;
  --ts-shadow-1: 0 1px 2px rgba(2,6,23,.06);
  --ts-shadow-2: 0 8px 24px rgba(2,6,23,.18);
  --ts-glow: 0 0 40px hsl(192 100% 50% / .18);
  --ts-focus: 0 0 0 2px var(--ts-bg), 0 0 0 4px var(--ts-cyan);
  --ts-ease: cubic-bezier(.22,1,.36,1); --ts-fast: .14s;
}

/* ---------- Theme surfaces ---------- */
:root, [data-ts-theme="dark"]{
  --ts-bg:#00030a; --ts-surface:#0b0f1c; --ts-surface-2:#111729; --ts-line:#1d2438; --ts-line-strong:#2c3650;
  --ts-ink:#e1e7ef; --ts-ink-2:#b4bfd0; --ts-mute:#7a879c;
  --ts-link: var(--ts-cyan);
  /* status pills on dark: tinted, not pastel */
  --ts-ok-bg:hsl(142 70% 45% / .14);  --ts-ok-ink:#5ee59a;
  --ts-warn-bg:hsl(38 92% 55% / .14); --ts-warn-ink:#ffc35c;
  --ts-fail-bg:hsl(350 90% 60% / .15);--ts-fail-ink:#ff8aa0;
  --ts-info-bg:hsl(199 90% 50% / .14);--ts-info-ink:#6fd3ff;
  --ts-na-bg:hsl(215 20% 60% / .14);  --ts-na-ink:#a9b6c8;
  color-scheme: dark;
}
[data-ts-theme="light"]{
  --ts-bg:#f4f6fa; --ts-surface:#ffffff; --ts-surface-2:#f8fafc; --ts-line:#e5e7eb; --ts-line-strong:#cbd5e1;
  --ts-ink:#0f172a; --ts-ink-2:#334155; --ts-mute:#64748b;
  --ts-link:#0369a1;
  --ts-ok-bg:#dcfce7; --ts-ok-ink:#166534; --ts-warn-bg:#fef3c7; --ts-warn-ink:#92400e;
  --ts-fail-bg:#ffe4e6; --ts-fail-ink:#9f1239; --ts-info-bg:#e0f2fe; --ts-info-ink:#075985;
  --ts-na-bg:#e2e8f0; --ts-na-ink:#334155;
  color-scheme: light;
}
[data-ts-tool="radar"]{--ts-tool:var(--ts-acc-radar)}
[data-ts-tool="jcr"]{--ts-tool:var(--ts-acc-jcr)}
[data-ts-tool="probe"]{--ts-tool:var(--ts-acc-probe)}
[data-ts-tool="faraday"]{--ts-tool:var(--ts-acc-faraday)}
[data-ts-tool="undertow"]{--ts-tool:var(--ts-acc-undertow)}

/* ---------- Base ---------- */
.ts{background:var(--ts-bg);color:var(--ts-ink);font-family:var(--ts-font-body);font-size:var(--ts-text-base);line-height:var(--ts-leading);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;margin:0}
.ts *{box-sizing:border-box}
.ts a{color:var(--ts-link);text-underline-offset:2px}
.ts :focus-visible{outline:none;box-shadow:var(--ts-focus);border-radius:var(--ts-r-sm)}
.ts-main{max-width:var(--ts-content);margin:0 auto;padding:var(--ts-s4) var(--ts-s5) var(--ts-s16)}
.ts-h1{font-family:var(--ts-font-display);font-size:var(--ts-text-4xl);letter-spacing:var(--ts-track-display);text-transform:uppercase;line-height:1.1;margin:0}
.ts-title{font-size:var(--ts-text-xl);font-weight:700;margin:0;letter-spacing:-.01em}
.ts-sub{color:var(--ts-mute);font-size:var(--ts-text-sm);margin:2px 0 var(--ts-s3)}
.ts-label{font-family:var(--ts-font-mono);font-size:var(--ts-text-2xs);letter-spacing:var(--ts-track-label);text-transform:uppercase;color:var(--ts-mute)}
.ts-num{font-variant-numeric:tabular-nums}

/* ---------- Top bar (identical on every subdomain) ---------- */
.ts-bar{position:sticky;top:0;z-index:50;background:var(--ts-navy);color:#e6edf6;border-bottom:1px solid rgba(255,255,255,.06)}
.ts-bar__row{max-width:var(--ts-content);margin:0 auto;height:var(--ts-bar-h);display:flex;align-items:center;gap:var(--ts-s3);padding:0 var(--ts-s5)}
.ts-mark{width:28px;height:28px;flex:0 0 auto;display:block}
.ts-bar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.ts-bar__co{font-family:var(--ts-font-display);font-size:12px;letter-spacing:.16em;color:#8fa0b8}
.ts-bar__sep{color:#3a4660}
.ts-bar__tool{font-family:var(--ts-font-display);font-weight:700;font-size:16px;letter-spacing:.08em;color:#fff;display:flex;align-items:center;gap:8px}
.ts-bar__tool::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ts-tool);box-shadow:0 0 10px var(--ts-tool)}
.ts-bar__right{margin-left:auto;display:flex;align-items:center;gap:var(--ts-s2)}
.ts-switch{position:relative}
.ts-switch>button{font:500 13px var(--ts-font-body);color:#cbd5e1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--ts-r-md);padding:6px 10px;display:flex;align-items:center;gap:6px;cursor:pointer}
.ts-switch__menu{position:absolute;right:0;top:calc(100% + 8px);width:300px;background:#0b1120;border:1px solid #1f2a40;border-radius:var(--ts-r-lg);box-shadow:var(--ts-shadow-2);padding:6px;display:none}
.ts-switch.open .ts-switch__menu{display:block}
.ts .ts-switch__item,.ts-switch__item{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--ts-r-md);color:#e2e8f0;text-decoration:none}
.ts-switch__item:hover,.ts-switch__item[aria-current]{background:rgba(255,255,255,.06)}
.ts-switch__item i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ts-switch__item b{font-family:var(--ts-font-display);font-size:13px;letter-spacing:.08em}
.ts-switch__item small{display:block;color:#7d8aa1;font-size:11px}
.ts-tabs{max-width:var(--ts-content);margin:0 auto;display:flex;gap:2px;padding:0 var(--ts-s3);overflow-x:auto;scrollbar-width:none}
.ts-tabs::-webkit-scrollbar{display:none}
.ts-tabs a{color:#a9b6c9;text-decoration:none;padding:9px 12px 11px;font-size:14px;font-weight:500;white-space:nowrap;border-bottom:3px solid transparent}
.ts-tabs a[aria-current]{color:#fff;border-color:var(--ts-tool)}

/* ---------- Badges ---------- */
.ts-badge{display:inline-flex;align-items:center;gap:6px;font:400 var(--ts-text-2xs)/1 var(--ts-font-mono);letter-spacing:var(--ts-track-label);text-transform:uppercase;padding:4px 8px;border-radius:var(--ts-r-sm);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--c);background:color-mix(in srgb,var(--c) 8%,transparent);white-space:nowrap}
.ts-badge--ga{--c:var(--ts-m-ga)} .ts-badge--limited{--c:var(--ts-m-limited)} .ts-badge--inuse{--c:var(--ts-m-inuse)}
.ts-badge--research{--c:var(--ts-m-research)} .ts-badge--hold{--c:var(--ts-m-hold)} .ts-badge--experiment{--c:var(--ts-m-experiment)}
.ts-badge--synthetic{--c:var(--ts-m-synthetic)} .ts-badge--private{--c:var(--ts-steel)}
[data-ts-theme="light"] .ts-badge--synthetic{--c:#a16207} [data-ts-theme="light"] .ts-badge--limited,[data-ts-theme="light"] .ts-badge--hold{--c:#b45309} [data-ts-theme="light"] .ts-badge--inuse{--c:#0369a1} [data-ts-theme="light"] .ts-badge--ga{--c:#15803d} [data-ts-theme="light"] .ts-badge--experiment{--c:#0f766e} [data-ts-theme="light"] .ts-badge--research,[data-ts-theme="light"] .ts-badge--private{--c:#475569}
.ts-badge--ga::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Status pill (Undertow pattern, promoted) ---------- */
.ts-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:var(--ts-r-pill);background:var(--b);color:var(--k)}
.ts-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ts-pill--ok{--b:var(--ts-ok-bg);--k:var(--ts-ok-ink)} .ts-pill--warn{--b:var(--ts-warn-bg);--k:var(--ts-warn-ink)}
.ts-pill--fail{--b:var(--ts-fail-bg);--k:var(--ts-fail-ink)} .ts-pill--info{--b:var(--ts-info-bg);--k:var(--ts-info-ink)} .ts-pill--na{--b:var(--ts-na-bg);--k:var(--ts-na-ink)}
.ts-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--ts-na)}
.ts-dot--ok{background:var(--ts-ok)} .ts-dot--warn{background:var(--ts-warn)} .ts-dot--fail{background:var(--ts-fail)}

/* ---------- Buttons ---------- */
.ts-btn{font:600 13px/1 var(--ts-font-body);display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--ts-r-md);border:1px solid var(--ts-line-strong);background:var(--ts-surface);color:var(--ts-ink);cursor:pointer;text-decoration:none;min-height:36px}
.ts-btn:hover{border-color:var(--ts-mute)}
.ts-btn--primary,[data-ts-theme="dark"] .ts-btn--primary{background:var(--ts-cyan);color:#00030a;border-color:var(--ts-cyan)}
[data-ts-theme="light"] .ts-btn--primary{background:#0f172a;color:#fff;border-color:#0f172a}
.ts-btn--ghost{background:transparent;border-color:transparent;color:var(--ts-link)}
.ts-btn--danger{color:var(--ts-fail-ink);border-color:color-mix(in srgb,var(--ts-fail) 55%,transparent)}
.ts-btn[disabled]{opacity:.45;cursor:not-allowed}
.ts-btn--sm{padding:6px 10px;min-height:30px;font-size:12px}

/* ---------- Cards, tiles ---------- */
.ts-card{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);padding:var(--ts-s4);box-shadow:var(--ts-shadow-1)}
.ts-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-s2);margin-bottom:var(--ts-s3)}
.ts-card__title{font-size:var(--ts-text-md);font-weight:700;margin:0}
.ts-card--tool{border-top:3px solid var(--ts-tool)}
.ts-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ts-s3)}
.ts a.ts-tile,.ts-tile{background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;text-decoration:none;color:var(--ts-ink)}
.ts-tile__l{font-size:12px;font-weight:600;color:var(--ts-mute)}
.ts-tile__v{font-size:var(--ts-text-2xl);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.ts-tile__s{font-size:12px;color:var(--ts-mute)}
.ts-tile--warn{border-color:color-mix(in srgb,var(--ts-warn) 60%,transparent);background:color-mix(in srgb,var(--ts-warn) 6%,var(--ts-surface))}
.ts-tile--fail{border-color:color-mix(in srgb,var(--ts-fail) 60%,transparent);background:color-mix(in srgb,var(--ts-fail) 6%,var(--ts-surface))}

/* ---------- Table ---------- */
.ts-table-wrap{overflow-x:auto;border:1px solid var(--ts-line);border-radius:var(--ts-r-lg);background:var(--ts-surface)}
.ts-table{border-collapse:collapse;width:100%;font-size:var(--ts-text-sm)}
.ts-table th{position:sticky;top:0;background:var(--ts-surface-2);font:600 12px var(--ts-font-body);color:var(--ts-mute);text-align:left;padding:8px 12px;border-bottom:1px solid var(--ts-line)}
.ts-table td{padding:9px 12px;border-bottom:1px solid var(--ts-line);vertical-align:top}
.ts-table tr:last-child td{border-bottom:0}
.ts-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.ts-table code,.ts-mono{font-family:var(--ts-font-mono);font-size:12px}

/* ---------- Forms ---------- */
.ts-field{display:flex;flex-direction:column;gap:4px}
.ts-field>span{font-size:12px;font-weight:600;color:var(--ts-ink-2)}
.ts-input,.ts-select,.ts-textarea{font:400 14px var(--ts-font-body);color:var(--ts-ink);background:var(--ts-surface);border:1px solid var(--ts-line-strong);border-radius:var(--ts-r-md);padding:8px 10px;min-height:38px;max-width:100%}
.ts-input:focus,.ts-select:focus,.ts-textarea:focus{outline:none;border-color:var(--ts-cyan);box-shadow:0 0 0 3px hsl(192 100% 50% / .18)}
.ts-textarea{width:100%;resize:vertical}
.ts-textarea.ts-mono{font-family:var(--ts-font-mono);font-size:13px}
.ts-hint{font-size:12px;color:var(--ts-mute)} .ts-error{font-size:12px;color:var(--ts-fail-ink);font-weight:600}
.ts-seg{display:inline-flex;gap:4px;background:var(--ts-surface-2);border:1px solid var(--ts-line);border-radius:12px;padding:4px}
.ts-seg button{border:0;background:transparent;border-radius:9px;padding:7px 12px;font:600 13px var(--ts-font-body);color:var(--ts-ink-2);cursor:pointer}
.ts-seg button[aria-pressed="true"]{background:var(--ts-surface);color:var(--ts-ink);box-shadow:var(--ts-shadow-1)}

/* ---------- Banners, empty state ---------- */
.ts-banner{border-radius:var(--ts-r-md);padding:10px 12px;font-size:13px;display:flex;gap:8px;align-items:flex-start;border:1px solid}
.ts-banner--warn{background:var(--ts-warn-bg);color:var(--ts-warn-ink);border-color:color-mix(in srgb,var(--ts-warn) 40%,transparent)}
.ts-banner--fail{background:var(--ts-fail-bg);color:var(--ts-fail-ink);border-color:color-mix(in srgb,var(--ts-fail) 40%,transparent)}
.ts-banner--synthetic{background:color-mix(in srgb,var(--ts-gold) 10%,transparent);color:var(--ts-ink-2);border-color:color-mix(in srgb,var(--ts-gold) 45%,transparent)}
.ts-empty{border:1px dashed var(--ts-line-strong);border-radius:var(--ts-r-lg);padding:var(--ts-s8) var(--ts-s6);text-align:center;color:var(--ts-mute)}
.ts-empty b{display:block;color:var(--ts-ink);font-size:var(--ts-text-md);margin:8px 0 4px}

/* ---------- Footer (identical on every subdomain) ---------- */
.ts-foot{background:var(--ts-navy);color:#8a97ac;font-size:12px;margin-top:var(--ts-s8)}
.ts-foot__row{max-width:var(--ts-content);margin:0 auto;padding:var(--ts-s6) var(--ts-s5);display:flex;flex-wrap:wrap;gap:var(--ts-s3) var(--ts-s8);align-items:center}
.ts-foot a{color:#b9c6d8;text-decoration:none} .ts-foot a:hover{color:#fff}
.ts-foot__brand{display:flex;align-items:center;gap:8px;font-family:var(--ts-font-display);letter-spacing:.14em;color:#cfe8ff;font-size:11px}
.ts-foot__tools{display:flex;gap:14px;flex-wrap:wrap}
.ts-foot__meta{margin-left:auto;font-family:var(--ts-font-mono);letter-spacing:.06em}

/* ---------- Layout helpers ---------- */
.ts-grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--ts-s3);align-items:start}
.ts-stack{display:flex;flex-direction:column;gap:var(--ts-s3)}
.ts-row{display:flex;gap:var(--ts-s2);flex-wrap:wrap;align-items:center}

/* ---------- Mobile (<=640px), Undertow's proven rules ---------- */
@media (max-width:980px){.ts-grid2{grid-template-columns:1fr}}
@media (max-width:640px){
  .ts-bar__row{padding:0 var(--ts-s3);gap:var(--ts-s2)}
  .ts-bar__co,.ts-bar__sep,.ts-bar__hide-sm{display:none}
  .ts-main{padding:var(--ts-s3) var(--ts-s3) 96px}
  .ts-tiles{grid-template-columns:1fr 1fr;gap:var(--ts-s2)}
  .ts-tile__v{font-size:20px}
  .ts-foot__meta{margin-left:0}
  .ts-btn{min-height:44px}            /* touch target */
  .ts-switch__menu{position:fixed;left:8px;right:8px;width:auto;top:60px}
}
@media (prefers-reduced-motion:reduce){.ts *{transition:none!important;animation:none!important}}