/* waves — the shared components, drawn from tokens.css.
   Linked after tokens.css by the studio, the recorder, the landing and
   join pages (the listener pages carry their own compact set). Type,
   focus, buttons, fields, chips, cards, tables, tabs and the toast: one
   look on every surface, in both themes and inside any .stage. */

/* ---- type */
body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
.mono, code, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
button, input, textarea, select, .tab { font: inherit; }
a { color: var(--accent-text); }
.muted { color: var(--muted); }
.ok { color: var(--success); }
.warning { color: var(--warning); }
.problem { color: var(--danger-text); }

/* ---- focus: one ring everywhere, including native selects */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- buttons: primary, secondary (.ghost), tertiary text (.linkish),
   destructive text at rest (.danger), filled destructive confirm
   (.danger-solid), live red for Record and Stop only (.rec / .live) */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--r-s);
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
button:hover { background: var(--accent-hover); }
button:disabled { background: var(--surface-3); color: var(--muted); border-color: transparent; cursor: default; }
button.ghost { background: var(--surface); color: var(--text); border-color: var(--line-input); }
button.ghost:hover { background: var(--surface-2); }
button.ghost:disabled { background: var(--surface-3); color: var(--muted); border-color: transparent; }
button.danger { background: transparent; color: var(--danger-text); border-color: transparent; }
button.danger:hover { background: var(--surface-2); }
button.ghost.danger { border-color: var(--line-input); }
button.danger-solid { background: var(--danger); color: var(--on-accent); }
button.danger-solid:hover { background: var(--danger); filter: brightness(1.1); }
button.rec, button.live { background: var(--live); color: var(--on-live); }
button.rec:hover, button.live:hover { background: var(--live); filter: brightness(1.08); }
button.small { min-height: 30px; padding: 0 10px; font-size: 13px; }
button.linkish {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--accent-text); font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px;
}
button.linkish:hover { background: none; color: var(--text); }
.cta {
  display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; padding: 0 16px; border: 0; border-radius: var(--r-s);
  background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none;
}
.cta:hover { background: var(--accent-hover); }
.cta:disabled { background: var(--surface-3); color: var(--muted); cursor: default; }

/* ---- fields */
input, textarea, select {
  width: 100%; min-height: 36px; padding: 7px 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-input); border-radius: var(--r-s);
  font-size: 14px; line-height: 1.4;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 16px; min-height: 0; accent-color: var(--accent); }
label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin: 12px 0 6px; }
.hint, .field-hint { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  input, textarea, select { font-size: 16px; }   /* iOS zooms into anything smaller */
}

/* ---- chips: five states and nothing else */
.badge, .chip, .pill, .tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; line-height: 1;
  background: var(--surface-2); color: var(--text-2); border: 1px solid transparent;
  white-space: nowrap; vertical-align: middle;
}
.badge.public, .badge.live, .chip.published, .pill.done, .badge.active, .chip.active {
  background: var(--success-soft); color: var(--success);
}
.badge.private, .badge.submitted, .chip.scheduled, .chip.invited {
  background: var(--accent-soft); color: var(--accent-text);
}
.badge.rejected, .chip.attention, .badge.attention {
  background: var(--warning-soft); color: var(--warning);
}
.chip.draft, .chip.revoked, .badge.draft { background: var(--surface-2); color: var(--text-2); }
.pill.live { background: transparent; border-color: var(--line); color: var(--live-text); }
.pill.live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); animation: live-pulse 1.6s ease-out infinite;
}
.pill.link { cursor: pointer; color: var(--text); background: var(--surface); border-color: var(--line-input); }
.pill.link:hover { border-color: var(--accent); color: var(--accent-text); }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- cards and panels: hairline at rest, a lift only when clickable */
.card, .panel, section.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 16px;
}
.card { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.card:hover { box-shadow: var(--shadow-2); }
.card h3 { margin: 0 0 6px; }
.card .meta { color: var(--muted); font-size: 13px; }

/* ---- tables: eyebrow header, 48px rows, tabular figures */
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th {
  text-align: left; padding: 10px 10px 8px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
td {
  text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line);
  font-size: 14px; vertical-align: top; font-variant-numeric: tabular-nums;
}
tr:last-child td { border-bottom: 0; }

/* ---- tabs */
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--text-2); min-height: 0;
  padding: 9px 14px 11px; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab .count {
  background: none; border: 0; padding: 0; min-height: 0; margin-left: 6px;
  font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums;
}
.tab.active .count { color: var(--text-2); }
.tab .count.live { color: var(--live-text); }
.tab .count.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); margin-right: 5px; vertical-align: 1px;
  animation: live-pulse 1.6s ease-out infinite;
}

/* ---- toast: one style on every surface, bottom-left on desktop */
#toast {
  position: fixed; bottom: 24px; left: 24px; z-index: 80;
  max-width: min(480px, calc(100vw - 32px));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-m);
  box-shadow: var(--shadow-3);
  padding: 10px 14px; font-size: 14px; line-height: 1.45;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
#toast.show { opacity: 1; transform: none; }
@media (max-width: 700px) {
  #toast { left: 16px; right: 16px; bottom: 16px; max-width: none; text-align: center; }
}

/* ---- cover art placeholder: quiet, the initial in the secondary ink */
.placeholder-art, .show-art.placeholder, .head-art.placeholder, .art-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); font-weight: 600;
}

/* ---- icons: one 16px line set from ui.js icon(), drawn in currentColor */
.ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
button .ic:first-child { margin-left: -2px; }
button .ic:last-child { margin-right: -2px; }
.ic-more { width: 18px; }

/* ---- segmented control: one choice among a few, e.g. Publish now | Schedule,
   All | Drafts | Published, 7 | 30 | 90 | All, System | Light | Dark */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border-radius: var(--r-s); }
.seg > button, .seg > label {
  min-height: 28px; padding: 0 10px; margin: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.seg > label input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg > button:hover, .seg > label:hover { background: transparent; color: var(--text); }
.seg > button[aria-pressed="true"], .seg > label:has(input:checked) {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
}
.seg > button:disabled { color: var(--muted); background: transparent; cursor: default; }
.seg.small > button, .seg.small > label { min-height: 24px; padding: 0 8px; font-size: 12.5px; }

/* ---- row list: the one table for sessions, team, participants, subscribers,
   admin users and codes, and "Needs attention". Cells sit on one 48px line
   from 720px up and stack into a card below it. */
.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.rows > .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 4px 16px; min-height: 48px; padding: 8px 14px; border-bottom: 1px solid var(--line);
}
.rows > .row:last-child { border-bottom: 0; }
.rows > .row.head { min-height: 34px; padding: 6px 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.rows > .row.link { cursor: pointer; }
.rows > .row.link:hover { background: var(--surface-2); }
.row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.row-meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-aux { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
.rows.plain { border: 0; border-radius: 0; background: transparent; }
.rows.plain > .row { padding-left: 0; padding-right: 0; }
@media (max-width: 719px) {
  .rows > .row { grid-template-columns: 1fr; padding: 12px 14px; }
  .rows > .row.head { display: none; }
  .row-title { white-space: normal; }
  .row-aux { flex-wrap: wrap; gap: 6px 12px; }
  .row-actions { justify-self: stretch; flex-wrap: wrap; margin-top: 4px; }
}

/* ---- "How this works": helper prose folded behind one line */
details.how { margin: 8px 0 0; }
details.how > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--accent-text); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s; }
details.how[open] > summary::before { transform: rotate(90deg); }
details.how > *:not(summary) { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}