/* Spotlight motion and focus ring. Kept here rather than in design/tokens/ because they use
 * color-mix() and a reduced-motion override, which the token files don't express. */
:root {
  --sl-transition: 120ms ease;
  --sl-focus-ring:
    0 0 0 3px color-mix(in srgb, var(--sl-teal) 40%, transparent),
    0 0 0 1px var(--sl-teal-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root { --sl-transition: 0ms; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Spotlight component styles
 *
 * Naming: .sl-<block>, .sl-<block>--<modifier>, .sl-<block>__<element>
 *
 * The `sl-` prefix namespaces the library so it can coexist with application
 * CSS and with the HTML mockups, which use unprefixed class names. The
 * mockups are reference artifacts; this is the production vocabulary.
 *
 * Rules the conformance spec enforces mechanically:
 *   - no literal hex outside tokens.css (channel swatches read from data)
 *   - no border-radius other than var(--sl-radius), which is 0
 *   - no box-shadow except focus rings and dark-mode glow
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Pill ─────────────────────────────────────────────────────────────── */

.sl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  padding: 3px 7px;
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--sl-border) solid;
  border-radius: var(--sl-radius);
  white-space: nowrap;
}

.sl-pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;          /* the one intentional curve — a dot is a dot */
  background: currentColor;
  flex-shrink: 0;
}

.sl-pill--green { color: var(--sl-green); background: var(--sl-green-soft); border-color: var(--sl-green); }
.sl-pill--amber { color: var(--sl-amber); background: var(--sl-amber-soft); border-color: var(--sl-amber); }
.sl-pill--red   { color: var(--sl-red);   background: var(--sl-red-soft);   border-color: var(--sl-red); }
.sl-pill--teal  { color: var(--sl-teal);  background: var(--sl-teal-soft);  border-color: var(--sl-teal-deep); }
.sl-pill--muted { color: var(--sl-text-dim); background: var(--sl-paper-3); border-color: var(--sl-line-strong); }
.sl-pill--faded { color: var(--sl-text-mute); background: var(--sl-paper-3); border-color: var(--sl-line-strong); opacity: 0.65; }

/* ── Tier chip ────────────────────────────────────────────────────────── */

.sl-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  padding: 3px var(--sl-space-3);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  font-weight: 600;
  color: var(--sl-text-2);
  background: var(--sl-paper);
  border: var(--sl-border) solid var(--sl-line-strong);
  border-radius: var(--sl-radius);
  white-space: nowrap;
}

.sl-tier-chip__dot { width: 7px; height: 7px; flex-shrink: 0; }
.sl-tier-chip--foundation .sl-tier-chip__dot { background: var(--sl-bronze); }
.sl-tier-chip--growth     .sl-tier-chip__dot { background: var(--sl-silver); }
.sl-tier-chip--enterprise .sl-tier-chip__dot { background: var(--sl-gold); }

/* ── Button ───────────────────────────────────────────────────────────── */

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-2);
  padding: 7px var(--sl-space-4);
  min-height: 32px;
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sl-text);
  background: var(--sl-paper-2);
  border: var(--sl-border) solid var(--sl-line-strong);
  border-radius: var(--sl-radius);
  cursor: pointer;
  transition: color var(--sl-transition), background var(--sl-transition), border-color var(--sl-transition);
  text-decoration: none;
}

.sl-btn:hover {
  color: var(--sl-teal);
  background: var(--sl-teal-soft);
  border-color: var(--sl-teal-deep);
}

.sl-btn:focus-visible { outline: none; box-shadow: var(--sl-focus-ring); }

.sl-btn[disabled],
.sl-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.sl-btn[disabled]:hover { color: var(--sl-text); background: var(--sl-paper-2); border-color: var(--sl-line-strong); }

.sl-btn--primary {
  color: var(--sl-paper);
  background: var(--sl-teal-deep);
  border-color: var(--sl-teal-deep);
  font-weight: 600;
  box-shadow: var(--sl-glow-teal);
}
.sl-btn--primary:hover { color: var(--sl-paper); background: var(--sl-teal); border-color: var(--sl-teal); }

.sl-btn--danger { color: var(--sl-red); border-color: var(--sl-red); background: transparent; }
.sl-btn--danger:hover { color: var(--sl-paper); background: var(--sl-red); border-color: var(--sl-red); }

.sl-btn--ghost { background: transparent; border-color: transparent; color: var(--sl-text-dim); }

.sl-btn--sm { padding: 5px var(--sl-space-3); min-height: 26px; font-size: var(--sl-text-xs); }
.sl-btn--lg { padding: 10px var(--sl-space-5); min-height: 40px; font-size: var(--sl-text-md); }

/* ── Stat strip ───────────────────────────────────────────────────────── */

/* The 1px gap over a line-colored background is what draws the gridlines.
 * No borders on the cells themselves — the gap is the border. */
.sl-stat-strip {
  display: grid;
  grid-template-columns: repeat(var(--sl-stat-columns, auto-fit), minmax(160px, 1fr));
  gap: var(--sl-border);
  background: var(--sl-line);
  border: var(--sl-border) solid var(--sl-line);
  border-radius: var(--sl-radius);
}

.sl-stat {
  background: var(--sl-paper-2);
  padding: var(--sl-space-5) var(--sl-space-6);
  min-width: 0;
}

.sl-stat__label {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: var(--sl-tracking-mono);
  text-transform: uppercase;
  color: var(--sl-text-mute);
  margin-bottom: var(--sl-space-2);
}

.sl-stat__value {
  font-family: var(--sl-font-display);
  font-size: var(--sl-display-sm);
  font-weight: 500;
  letter-spacing: var(--sl-tracking-tight);
  color: var(--sl-text);
  line-height: 1;
}

.sl-stat__value--lit  { color: var(--sl-teal); text-shadow: var(--sl-glow-text); }
.sl-stat__value--warn { color: var(--sl-amber); }
.sl-stat__value--bad  { color: var(--sl-red); }

.sl-stat__meta {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  color: var(--sl-text-dim);
  margin-top: var(--sl-space-1);
  line-height: 1.45;
}

.sl-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-1);
  margin-top: var(--sl-space-2);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  font-weight: 600;
}
.sl-stat__delta--up   { color: var(--sl-green); }
.sl-stat__delta--down { color: var(--sl-red); }
.sl-stat__delta--flat { color: var(--sl-text-mute); }

/* ── Data table ───────────────────────────────────────────────────────── */

.sl-table-wrap {
  /* Visually hidden labels in cells are absolutely positioned; without this they
     escape the sideways scroll and widen the whole page on a phone. */
  position: relative;
  border: var(--sl-border) solid var(--sl-line);
  border-radius: var(--sl-radius);
  background: var(--sl-paper-2);
  overflow-x: auto;
}

.sl-table { width: 100%; border-collapse: collapse; font-size: var(--sl-text-md); }

.sl-table thead th {
  text-align: left;
  padding: var(--sl-space-4) var(--sl-space-5);
  background: var(--sl-paper-3);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: var(--sl-tracking-mono);
  text-transform: uppercase;
  color: var(--sl-text-2);
  border-bottom: var(--sl-border) solid var(--sl-line-strong);
  white-space: nowrap;
}

.sl-table th.sl-table__num,
.sl-table td.sl-table__num { text-align: right; font-family: var(--sl-font-mono); font-size: var(--sl-text-sm); }

.sl-table tbody td {
  padding: var(--sl-space-4) var(--sl-space-5);
  border-bottom: var(--sl-border) solid var(--sl-line);
  color: var(--sl-text-2);
  vertical-align: middle;
}

.sl-table tbody tr:last-child td { border-bottom: none; }
.sl-table tbody tr:hover td { background: var(--sl-paper-3); }

.sl-table tfoot td {
  padding: var(--sl-space-4) var(--sl-space-5);
  background: var(--sl-paper-3);
  border-top: 2px solid var(--sl-line-strong);
  font-family: var(--sl-font-mono);
  font-weight: 600;
  color: var(--sl-text);
}

.sl-table__foot-bar {
  padding: var(--sl-space-4) var(--sl-space-5);
  background: var(--sl-paper-3);
  border-top: var(--sl-border) solid var(--sl-line);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  color: var(--sl-text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sl-space-4);
}

.sl-table__foot-bar a { color: var(--sl-teal); text-decoration: none; font-weight: 600; }
.sl-table__foot-bar a:hover { text-decoration: underline; }

.sl-table__empty {
  text-align: center;
  color: var(--sl-text-mute);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-md);
  padding: var(--sl-space-8) var(--sl-space-5);
}

/* ── Confirm block ────────────────────────────────────────────────────── */

.sl-confirm {
  padding: var(--sl-space-5) var(--sl-space-6);
  border: var(--sl-border) solid;
  border-left-width: 3px;
  border-radius: var(--sl-radius);
}

.sl-confirm--info    { border-color: var(--sl-teal-deep); background: var(--sl-teal-soft); }
.sl-confirm--warning { border-color: var(--sl-amber);      background: var(--sl-amber-soft); }
.sl-confirm--danger  { border-color: var(--sl-red);        background: var(--sl-red-soft); }
.sl-confirm--success { border-color: var(--sl-green);      background: var(--sl-green-soft); }

.sl-confirm__head { display: flex; align-items: center; gap: var(--sl-space-3); margin-bottom: var(--sl-space-3); }
.sl-confirm__icon { width: 18px; height: 18px; flex-shrink: 0; }

.sl-confirm__title {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  font-weight: 600;
  letter-spacing: var(--sl-tracking-mono);
  text-transform: uppercase;
}

.sl-confirm--info    .sl-confirm__title, .sl-confirm--info    .sl-confirm__icon { color: var(--sl-teal); }
.sl-confirm--warning .sl-confirm__title, .sl-confirm--warning .sl-confirm__icon { color: var(--sl-amber); }
.sl-confirm--danger  .sl-confirm__title, .sl-confirm--danger  .sl-confirm__icon { color: var(--sl-red); }
.sl-confirm--success .sl-confirm__title, .sl-confirm--success .sl-confirm__icon { color: var(--sl-green); }

.sl-confirm__body { font-size: var(--sl-text-md); color: var(--sl-text-2); line-height: 1.6; }
.sl-confirm__body strong { color: var(--sl-text); }
.sl-confirm__body code {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  background: var(--sl-paper);
  padding: 1px 5px;
}

/* ── Freshness indicator ──────────────────────────────────────────────── */

.sl-freshness {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-xs);
  font-weight: 500;
  color: var(--sl-text-dim);
  white-space: nowrap;
}

.sl-freshness__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sl-freshness--fresh { color: var(--sl-text-dim); }
.sl-freshness--aging { color: var(--sl-amber); }
.sl-freshness--stale { color: var(--sl-red); font-weight: 600; }
.sl-freshness--never { color: var(--sl-text-mute); font-style: italic; }

/* ── Name cell ────────────────────────────────────────────────────────── */

.sl-name-cell { display: flex; align-items: center; gap: var(--sl-space-4); min-width: 0; }

.sl-name-cell__mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  font-weight: 700;
  color: var(--sl-text);
  background: var(--sl-paper-3);
  border: var(--sl-border) solid var(--sl-line-strong);
  border-radius: var(--sl-radius);
  flex-shrink: 0;
  text-transform: uppercase;
}

.sl-name-cell__mark--bronze { background: var(--sl-bronze); border-color: var(--sl-bronze); color: var(--sl-paper); }
.sl-name-cell__mark--silver { background: var(--sl-silver); border-color: var(--sl-silver); color: var(--sl-paper); }
.sl-name-cell__mark--gold   { background: var(--sl-gold);   border-color: var(--sl-gold);   color: var(--sl-paper); }
.sl-name-cell__mark--teal   { background: var(--sl-teal-soft); border-color: var(--sl-teal-deep); color: var(--sl-teal); }

.sl-name-cell__body { min-width: 0; }
.sl-name-cell__primary { color: var(--sl-text); font-weight: 500; font-size: var(--sl-text-lg); line-height: 1.25; }
.sl-name-cell__secondary {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-sm);
  color: var(--sl-text-dim);
  margin-top: 2px;
}

/* ── Screen-reader only ───────────────────────────────────────────────── */

.sl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}