/* SkyBreaker base styles. See Docs/SkyBreaker/design-system.md. */

.sk-root {
  font-family: var(--sk-font);
  color: var(--sk-text);
  background: var(--sk-bg);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.35;
}

.sk-root * { box-sizing: border-box; }

/* Typography */
.sk-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-3);
}
.sk-h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.sk-h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.sk-h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.sk-h4 { font-size: 13px; font-weight: 600; }

.sk-mono { font-family: var(--sk-mono); font-feature-settings: "ss01", "tnum"; }
.sk-num  { font-variant-numeric: tabular-nums; }

/* Surfaces */
.sk-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
}
.sk-card-hi {
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
}
.sk-divider { height: 1px; background: var(--sk-border); }

/* Pills */
.sk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sk-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 24%, transparent);
}
.sk-pill-yes   { color: var(--sk-yes);    background: var(--sk-yes-soft);    border-color: var(--sk-yes-line); }
.sk-pill-no    { color: var(--sk-no);     background: var(--sk-no-soft);     border-color: var(--sk-no-line); }
.sk-pill-info  { color: var(--sk-info);   background: var(--sk-info-soft);   border-color: transparent; }
.sk-pill-warn  { color: var(--sk-warn);   background: var(--sk-warn-soft);   border-color: transparent; }
.sk-pill-brand { color: var(--sk-brand);  background: var(--sk-brand-soft);  border-color: var(--sk-brand-line); }
.sk-pill-mute  { color: var(--sk-text-2); background: var(--sk-surface-hi);  border-color: var(--sk-border); }

/* Feed bars (stadium feed status) */
.sk-feed {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: 6px;
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-border);
}
.sk-feed .bar { width: 5px; height: 14px; border-radius: 1px; background: var(--sk-border-hard); }
.sk-feed .bar.g { background: var(--sk-yes); box-shadow: 0 0 8px color-mix(in srgb, var(--sk-yes) 60%, transparent); }
.sk-feed .bar.r { background: var(--sk-no);  box-shadow: 0 0 8px color-mix(in srgb, var(--sk-no) 60%, transparent); }
.sk-feed .bar.o { background: var(--sk-warn); }

/* Kill switch */
.sk-killswitch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-border-hard);
}
.sk-killswitch .lbl { font-size: 11px; color: var(--sk-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.sk-killswitch .status-live { font-size: 12px; font-weight: 700; color: var(--sk-yes); }
.sk-killswitch .status-off  { font-size: 12px; font-weight: 700; color: var(--sk-no); }
.sk-killswitch .toggle {
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--sk-yes-soft); border: 1px solid var(--sk-yes-line);
  position: relative;
}
.sk-killswitch .toggle::after {
  content: ""; position: absolute; top: 2px; left: 18px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sk-yes);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-yes) 18%, transparent);
}
.sk-killswitch.off .toggle { background: var(--sk-no-soft); border-color: var(--sk-no-line); }
.sk-killswitch.off .toggle::after { left: 2px; background: var(--sk-no); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-no) 18%, transparent); }

/* Tables */
.sk-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.sk-tbl th, .sk-tbl td { text-align: left; padding: 9px 12px; }
.sk-tbl thead th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sk-text-3);
  border-bottom: 1px solid var(--sk-border);
  background: var(--sk-bg-elevated);
}
.sk-tbl tbody tr { border-bottom: 1px solid var(--sk-border-soft); }
.sk-tbl tbody tr:last-child { border-bottom: 0; }
.sk-tbl td.r, .sk-tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.sk-tbl td.c, .sk-tbl th.c { text-align: center; }
.sk-tbl td.mine { background: var(--sk-mkt-mine-soft); }

/* Sidebar */
.sk-sidebar {
  background: var(--sk-bg-elevated);
  border-right: 1px solid var(--sk-border);
}
.sk-sidebar .sk-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sk-text-2);
  cursor: pointer;
  text-decoration: none;
}
.sk-sidebar .sk-nav-item:hover { background: var(--sk-surface-hi); color: var(--sk-text); }
.sk-sidebar .sk-nav-item.active { background: var(--sk-surface-hi); color: var(--sk-text); }
.sk-sidebar .sk-nav-item .ic { width: 18px; height: 18px; opacity: 0.8; flex-shrink: 0; }

/* Misc */
.sk-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sk-kbd {
  font-family: var(--sk-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--sk-surface-hi); color: var(--sk-text-2);
  border: 1px solid var(--sk-border);
}
.sk-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.sk-scroll::-webkit-scrollbar-thumb { background: var(--sk-border-hard); border-radius: 3px; }
.sk-scroll::-webkit-scrollbar-track { background: transparent; }

/* Placeholder marker — wraps any value with no real data source yet.
   `grep -r sk-placeholder` lists everything still pending. */
.sk-placeholder {
  color: var(--sk-text-4);
  text-decoration: underline dotted var(--sk-warn);
  text-underline-offset: 3px;
  cursor: help;
}