/* The shared vocabulary's styles. See `components/ui.js` for why it exists.
 *
 * Two rules this file keeps, and `scripts/check-ui.js` enforces:
 *
 *   1. **Tokens only.** No raw hex (guardrail 10, already mechanical), and no
 *      raw pixel spacing, size or radius either — every value here is a token,
 *      because the 190 raw-px paddings scattered across the screen stylesheets
 *      are exactly how "8px everywhere" drifted into 9, 11, 13, 14, 15 and 17.
 *
 *   2. **Nothing here is global.** Every selector starts `.ui-`, so this file
 *      cannot do to another stylesheet what `admin.css`'s `.kicker` did to
 *      `live.css` — win a cascade nobody knew they were in.
 */

/* --- empty states ----------------------------------------------------------- */

.ui-empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  color: var(--soft);
}

.ui-empty-text {
  margin: 0;
  font-size: var(--size-small);
}

/* --- section headings -------------------------------------------------------- */

.ui-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

/* The variation that was real: admin drew a hairline, Live did not. */
.ui-head--rule {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin: var(--space-4) 0 var(--space-3);
}

.ui-head--gap { color: var(--gap); }
.ui-head--live { color: var(--live); }
.ui-head--soon { color: var(--soon); }

/* --- stat tiles -------------------------------------------------------------- */

.ui-stat {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-left: var(--border-accent) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.ui-stat--ok   { border-left-color: var(--live); }
.ui-stat--warn { border-left-color: var(--soon); }
.ui-stat--gap  { border-left-color: var(--gap); }
.ui-stat--met  { border-left-color: var(--ink); }

.ui-stat-label {
  margin: 0;
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

.ui-stat-value {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--size-h2);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ui-stat-note {
  margin: var(--space-1) 0 0;
  font-size: var(--size-small);
  color: var(--soft);
}

/* --- progress bars ------------------------------------------------------------ */

.ui-bar {
  height: var(--bar-height);
  border-radius: var(--radius-pill);
  background: var(--card);
  overflow: hidden;
}

.ui-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--t-tea);
}

.ui-bar--ok .ui-bar-fill  { background: var(--live); }
.ui-bar--gap .ui-bar-fill { background: var(--gap); }

/* --- rows of controls ----------------------------------------------------------- */

.ui-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* The floor, and the reason this file exists. Seventeen hand-written versions
   * of this row used three different gaps and one raw `9px`. */
  gap: var(--space-2);
}

.ui-row--end { justify-content: flex-end; }
.ui-row--between { justify-content: space-between; }

/* Two full-width buttons one above the other, for the case where they are a
 * safe choice and a destructive one and 8px of air is not enough distance. */
.ui-row--stack { flex-direction: column; align-items: stretch; }

/* --- a person as a row you can open ---------------------------------------------- */

.ui-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

a.ui-person, button.ui-person { cursor: pointer; }

a.ui-person:hover, button.ui-person:hover,
a.ui-person:focus-visible, button.ui-person:focus-visible {
  background: var(--card);
}

.ui-person-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ui-person-name { font-weight: var(--weight-semibold); }
.ui-person-sub { font-size: var(--size-small); color: var(--soft); }

.ui-person-right {
  margin-left: auto;
  font-size: var(--size-small);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}