/* StarSync UI kit v2.2 (2026-10-09: clearer button hover/press states; v2.1 deepened light tokens to pass 4.5:1). Source of truth for starsync.dev and every StarSync extension / tool UI.
   Direction: redesign option A (see Redesign Options/). Black, one cyan accent, bright red for danger,
   no gradients, no glow. Light + dark from day one.
   Copy this file + fonts/ into a project and add class="ss" to <body>. Don't fork it per project:
   change it here, bump the version line, re-copy. See BRAND.md. v1 is kept in "v1 (2026-10-05)/". */

@font-face { font-family: 'Inter';          src: url('fonts/inter-latin.woff2') format('woff2');          font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk';  src: url('fonts/space-grotesk-latin.woff2') format('woff2');  font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

/* ---------- Tokens: dark (default) ---------- */
:root {
  --ss-bg: #060606;        /* page / popup background (Shrav's black, unchanged) */
  --ss-surface: #111111;   /* cards, tables, tiles */
  --ss-raised: #181818;    /* inputs, tracks, hover rows */
  --ss-line: #222222;      /* hairlines */
  --ss-line-strong: #333333;
  --ss-text: #F2F2F2;
  --ss-text-2: #A3A3A3;    /* secondary */
  --ss-text-3: #8A8A8A;    /* labels, hints (4.5:1+ on bg) */
  --ss-accent: #37B5FE;    /* the one accent: primary buttons, links, focus, "working" */
  --ss-on-accent: #060606; /* text on an accent fill */
  --ss-danger: #FE1817;    /* errors + destructive actions only */
  --ss-on-danger: #060606;
  --ss-accent-hover: #8AD3FF; /* primary button hover: clearly lighter */
  --ss-danger-hover: #FF5A59;
  --ss-ok: #7DD856;        /* on / healthy / success */
  --ss-warn: #FFB547;

  --ss-font-head: 'Space Grotesk', system-ui, sans-serif;
  --ss-font-body: 'Inter', system-ui, sans-serif;
  --ss-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ss-fs: 13px;           /* base size: 13px for popups; the site sets 16px */

  --ss-r-sm: 4px;  --ss-r: 6px;  --ss-r-lg: 10px;  --ss-r-pill: 999px;
  --ss-ease: .18s ease;
  color-scheme: dark;

  /* v1 names kept as aliases so v1 popups keep working after re-copying */
  --ss-cyan: var(--ss-accent);  --ss-red: var(--ss-danger);  --ss-green: var(--ss-ok);  --ss-amber: var(--ss-warn);
  --ss-card: var(--ss-surface); --ss-card-hi: var(--ss-raised); --ss-bg-2: var(--ss-surface);
  --ss-border: var(--ss-line-strong); --ss-border-soft: var(--ss-line);
}

/* ---------- Tokens: light (OS setting, or data-theme="light" on <html>) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ss-bg: #F7F8FA; --ss-surface: #FFFFFF; --ss-raised: #EEF0F3; --ss-line: #E3E6EA; --ss-line-strong: #CDD2D8;
    --ss-text: #0E1116; --ss-text-2: #4A5260; --ss-text-3: #656C7A;
    --ss-accent: #006FBA; --ss-on-accent: #FFFFFF; --ss-danger: #D70F0E; --ss-on-danger: #FFFFFF;
    --ss-accent-hover: #004F86; --ss-danger-hover: #A80B0A;
    --ss-ok: #2D7A31; --ss-warn: #9A5B00;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ss-bg: #F7F8FA; --ss-surface: #FFFFFF; --ss-raised: #EEF0F3; --ss-line: #E3E6EA; --ss-line-strong: #CDD2D8;
  --ss-text: #0E1116; --ss-text-2: #4A5260; --ss-text-3: #656C7A;
  --ss-accent: #006FBA; --ss-on-accent: #FFFFFF; --ss-danger: #D70F0E; --ss-on-danger: #FFFFFF;
  --ss-accent-hover: #004F86; --ss-danger-hover: #A80B0A;
  --ss-ok: #2D7A31; --ss-warn: #9A5B00;
  color-scheme: light;
}

/* ---------- Base ---------- */
.ss { background: var(--ss-bg); color: var(--ss-text); font: 400 var(--ss-fs)/1.55 var(--ss-font-body); margin: 0;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss a { color: var(--ss-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ss a:hover { text-decoration-thickness: 2px; }
.ss :focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; border-radius: var(--ss-r-sm); }
.ss ::selection { background: var(--ss-accent); color: var(--ss-on-accent); }

/* Type. Headings: Space Grotesk, sentence case, tight. Numbers line up. */
.ss h1, .ss h2, .ss h3, .ss-h1, .ss-h2, .ss-h3 { font-family: var(--ss-font-head); font-weight: 600; color: var(--ss-text);
  letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; }
.ss-h1 { font-size: clamp(2.1em, 5.5vw, 4.3em); }
.ss-h2 { font-size: clamp(1.6em, 3.2vw, 2.5em); }
.ss-h3 { font-size: 1.25em; letter-spacing: -0.01em; }
.ss p { margin: 0 0 1em; max-width: 68ch; }
.ss-lead { font-size: 1.15em; color: var(--ss-text-2); }
.ss-muted { color: var(--ss-text-3); }
.ss-small { font-size: .85em; }
.ss-mono, .ss code, .ss kbd { font-family: var(--ss-font-mono); font-size: .92em; }
.ss-num { font-variant-numeric: tabular-nums; }
.ss-label { font: 500 .78em/1.2 var(--ss-font-mono); color: var(--ss-text-3); letter-spacing: 0; }

/* ---------- Header (popups): logo + name + one status pill ---------- */
.ss-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ss-line); }
.ss-head img { width: 22px; height: 22px; flex: none; }
.ss-title { font: 600 1.05em/1 var(--ss-font-head); letter-spacing: -0.01em; color: var(--ss-text); }
.ss-head .ss-pill { margin-left: auto; }
.ss-sub { font-size: .85em; color: var(--ss-text-3); }

/* ---------- Surfaces ---------- */
.ss-card { background: var(--ss-surface); border: 1px solid var(--ss-line); border-radius: var(--ss-r-lg); padding: 14px 16px; }
.ss-stack > * + * { margin-top: 10px; }
.ss-rule { border: 0; border-top: 1px solid var(--ss-line); margin: 16px 0; }

/* Big number ("the one thing the user came for") */
.ss-big { font: 600 2.6em/1 var(--ss-font-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Stat tiles */
.ss-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.ss-stat { background: var(--ss-surface); border: 1px solid var(--ss-line); border-radius: var(--ss-r); padding: 9px 11px; }
.ss-stat small { display: block; font: 500 .78em/1.2 var(--ss-font-mono); color: var(--ss-text-3); }
.ss-stat b { display: block; font: 600 1.35em/1.2 var(--ss-font-head); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Key/value rows */
.ss-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--ss-line); }
.ss-kv:first-of-type { border-top: 0; }
.ss-kv > :first-child { color: var(--ss-text-3); }
.ss-kv > :last-child { text-align: right; font-family: var(--ss-font-mono); font-size: .92em; }

/* Table (option A's tools table): wrap in .ss-table-wrap for sideways scroll on small screens */
.ss-table-wrap { border: 1px solid var(--ss-line); border-radius: var(--ss-r-lg); overflow-x: auto; background: var(--ss-surface); }
.ss-table { width: 100%; border-collapse: collapse; }
.ss-table th { text-align: left; font: 500 .78em/1.2 var(--ss-font-mono); color: var(--ss-text-3); padding: 12px 16px; border-bottom: 1px solid var(--ss-line); }
.ss-table td { padding: 16px; border-top: 1px solid var(--ss-line); vertical-align: top; }
.ss-table tr:first-child td { border-top: 0; }
.ss-table tbody tr:hover { background: var(--ss-raised); }
.ss-table .ss-name { font-weight: 600; color: var(--ss-text); }
.ss-table .ss-kind { font-family: var(--ss-font-mono); font-size: .85em; color: var(--ss-text-3); white-space: nowrap; }

/* ---------- Status pill: .on .off .busy .warn .err ---------- */
.ss-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--ss-r-pill);
           font: 500 .78em/1.6 var(--ss-font-mono); border: 1px solid currentColor; white-space: nowrap; }
.ss-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-pill.on { color: var(--ss-ok); } .ss-pill.off { color: var(--ss-text-3); } .ss-pill.busy { color: var(--ss-accent); }
.ss-pill.warn { color: var(--ss-warn); } .ss-pill.err { color: var(--ss-danger); }
.ss-pill.busy::before { animation: ss-pulse 1s ease-in-out infinite; }

/* ---------- Buttons: default = secondary (outline), .primary, .danger, .ghost, .block ---------- */
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          font: 600 .95em/1 var(--ss-font-body); cursor: pointer; text-decoration: none;
          border-radius: var(--ss-r); padding: 10px 16px; min-height: 36px;
          border: 1px solid var(--ss-line-strong); background: transparent; color: var(--ss-text);
          transition: background var(--ss-ease), border-color var(--ss-ease), color var(--ss-ease); }
.ss a.ss-btn { color: var(--ss-text); text-decoration: none; }
.ss-btn:hover { border-color: var(--ss-text-2); background: var(--ss-raised); }
.ss-btn:active { background: var(--ss-line); }
.ss-btn.primary, .ss a.ss-btn.primary { background: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-on-accent); }
.ss-btn.primary:hover, .ss a.ss-btn.primary:hover { background: var(--ss-accent-hover); border-color: var(--ss-accent-hover); }
.ss-btn.primary:active { filter: brightness(.9); }
.ss-btn.danger, .ss a.ss-btn.danger { background: var(--ss-danger); border-color: var(--ss-danger); color: var(--ss-on-danger); }
.ss-btn.danger:hover, .ss a.ss-btn.danger:hover { background: var(--ss-danger-hover); border-color: var(--ss-danger-hover); }
.ss-btn.ghost { border-color: transparent; color: var(--ss-text-2); }
.ss-btn.ghost.danger-text, .ss-link-danger { background: none; border: 0; color: var(--ss-danger); text-decoration: underline;
          text-underline-offset: 3px; cursor: pointer; font: inherit; padding: 4px; }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: .45; cursor: default; filter: none; }
.ss-btn.block { width: 100%; }
.ss-btn.lg { padding: 13px 20px; font-size: 1em; min-height: 44px; }

/* ---------- Forms ---------- */
.ss-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ss-field > label { font-weight: 600; font-size: .92em; }
.ss-field .ss-hint { font-size: .85em; color: var(--ss-text-3); }
.ss-input, .ss-select, .ss-textarea { width: 100%; font: inherit; color: var(--ss-text); background: var(--ss-raised);
          border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r); padding: 10px 12px; min-height: 40px; }
.ss-textarea { min-height: 120px; resize: vertical; }
.ss-input:focus, .ss-select:focus, .ss-textarea:focus { outline: 2px solid var(--ss-accent); outline-offset: 0; border-color: transparent; }
.ss-input[aria-invalid="true"], .ss-textarea[aria-invalid="true"] { border-color: var(--ss-danger); }
.ss-check { display: flex; gap: 10px; align-items: flex-start; }
.ss-check input { accent-color: var(--ss-accent); width: 18px; height: 18px; margin-top: 2px; }

/* Toggle switch: <label class="ss-toggle"><input type="checkbox"><span></span></label> */
.ss-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.ss-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ss-toggle span { position: absolute; inset: 0; border-radius: var(--ss-r-pill); background: var(--ss-raised);
                  border: 1px solid var(--ss-line-strong); transition: all var(--ss-ease); cursor: pointer; }
.ss-toggle span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
                         background: var(--ss-text-3); transition: all var(--ss-ease); }
.ss-toggle input:checked + span { background: var(--ss-ok); border-color: var(--ss-ok); }
.ss-toggle input:checked + span::after { left: 20px; background: var(--ss-bg); }
.ss-toggle input:focus-visible + span { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

/* Progress bar: <div class="ss-progress"><i style="width:40%"></i></div>; .indet for unknown length */
.ss-progress { height: 6px; border-radius: var(--ss-r-pill); background: var(--ss-raised); overflow: hidden; }
.ss-progress i { display: block; height: 100%; border-radius: inherit; background: var(--ss-accent); transition: width .3s ease; }
.ss-progress.ok i { background: var(--ss-ok); }
.ss-progress.indet i { width: 35% !important; animation: ss-slide 1.1s ease-in-out infinite; }

/* Alerts */
.ss-alert { border-radius: var(--ss-r); padding: 9px 12px; font-size: .92em; border: 1px solid; }
.ss-alert.err  { color: var(--ss-danger); border-color: color-mix(in srgb, var(--ss-danger) 40%, transparent); background: color-mix(in srgb, var(--ss-danger) 8%, transparent); }
.ss-alert.warn { color: var(--ss-warn);   border-color: color-mix(in srgb, var(--ss-warn) 40%, transparent);   background: color-mix(in srgb, var(--ss-warn) 8%, transparent); }
.ss-alert.ok   { color: var(--ss-ok);     border-color: color-mix(in srgb, var(--ss-ok) 40%, transparent);     background: color-mix(in srgb, var(--ss-ok) 8%, transparent); }

/* Modal / sheet (in-popup overlay). On the site prefer a native <dialog class="ss-dialog">. */
.ss-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: flex-end; }
.ss-modal.open { display: flex; }
.ss-modal > .ss-sheet { width: 100%; max-height: 90%; overflow: auto; background: var(--ss-surface);
                         border-top: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0; padding: 14px 16px; }
.ss-dialog { background: var(--ss-surface); color: var(--ss-text); border: 1px solid var(--ss-line-strong); border-radius: var(--ss-r-lg); padding: 20px; max-width: min(520px, 92vw); }
.ss-dialog::backdrop { background: rgba(0,0,0,.6); }

/* Footer (popups): version left, "StarSync" right */
.ss-foot { padding: 9px 14px; border-top: 1px solid var(--ss-line); display: flex; justify-content: space-between;
           color: var(--ss-text-3); font: 500 .78em/1.4 var(--ss-font-mono); }

/* Orbit rings (C's quiet background detail): <div class="ss-rings" aria-hidden="true"></div> inside a positioned parent */
.ss-rings { position: absolute; pointer-events: none; z-index: 0; width: 900px; height: 900px; right: -260px; top: -320px;
            border-radius: 50%; border: 1px solid var(--ss-line); }
.ss-rings::before, .ss-rings::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--ss-line); }
.ss-rings::before { inset: 140px; } .ss-rings::after { inset: 290px; }

/* Visually hidden (screen readers only) + skip link */
.ss-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss-skip { position: absolute; left: 12px; top: -48px; background: var(--ss-accent); color: var(--ss-on-accent); padding: 8px 12px; border-radius: var(--ss-r); z-index: 100; }
.ss-skip:focus { top: 12px; }

@keyframes ss-pulse { 50% { opacity: .3; } }
@keyframes ss-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ss *, .ss *::before, .ss *::after { animation: none !important; transition: none !important; } }