/* The dashboard: the site's type and colors, laid out for work. */

.dash-top { justify-content: space-between; }
.who { display: flex; gap: 1rem; align-items: baseline; font-size: 0.9375rem; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.dash { padding: 1rem 0 4rem; }
.dash h1 { font: 700 clamp(1.9rem, 4vw, 2.6rem)/1.05 "Barlow Condensed", sans-serif; margin: 0 0 0.35rem; max-width: none; }
.dash h2 { font: 700 1.375rem/1.2 "Barlow Condensed", sans-serif; color: var(--ink); margin: 0 0 0.5rem; }
.dash p { margin: 0 0 0.75rem; max-width: var(--measure); }

.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(1.25rem, 4vw, 2rem); }
.panel.narrow { max-width: 30rem; margin: clamp(1rem, 6vw, 4rem) auto 0; }

.stack { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.label { font: 600 0.9375rem/1.2 "Barlow Semi Condensed", sans-serif; color: var(--ink); }
.hint { font-size: 0.875rem; color: var(--muted); }
input[type="text"], input[type="email"], select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #C3CAD3; border-radius: 4px; padding: 0.6rem 0.7rem; min-width: 0; width: 100%;
}
textarea { font: 500 0.875rem/1.45 "Plex Mono", ui-monospace, monospace; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: var(--red); }

.button {
  display: inline-block; font: 600 1rem/1 "Barlow", sans-serif; cursor: pointer;
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 4px; padding: 0.75rem 1.1rem;
}
.button:hover { background: #26323D; }
.button:disabled { opacity: 0.55; cursor: progress; }
.button.quiet { background: #fff; color: var(--ink); border-color: #C3CAD3; }
.button.quiet:hover { border-color: var(--ink); }
.link { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link.danger { color: #B3261E; }
.actions { display: flex; gap: 0.75rem; }
.error { color: #B3261E; font-weight: 600; margin: 0.25rem 0 0; }

.or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); margin: 1.25rem 0; font-size: 0.875rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.turnstile:empty { display: none; }

.choices { display: grid; gap: 0.75rem; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; border: 1px solid #C3CAD3; border-radius: 6px; padding: 0.9rem 1rem; cursor: pointer; background: #fff; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--red); }
.choice input { margin-top: 0.3rem; accent-color: var(--red); }
.choice span { display: grid; gap: 0.15rem; }
.choice strong { font: 700 1.25rem/1.2 "Barlow Condensed", sans-serif; color: var(--ink); }

.account-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; }
.switcher { width: auto; }

/* Tabs: the on-air one carries the tally red. */
.tabs { display: flex; gap: 1.5rem; box-shadow: inset 0 -3px 0 var(--ink); margin: 1.25rem 0 1.5rem; overflow-x: auto; }
.tab { font: 600 1.0625rem/1 "Barlow Semi Condensed", sans-serif; color: var(--muted); background: none; border: 0; padding: 0.6rem 0 0.7rem; cursor: pointer; border-bottom: 5px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--red); }

.list { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.list th { text-align: left; font: 600 0.875rem/1.2 "Barlow Semi Condensed", sans-serif; color: var(--muted); padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); background: #FAFBFC; }
.list td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.list tr:last-child td { border-bottom: 0; }
.list strong { color: var(--ink); }
.list tr.inactive td { color: var(--muted); }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions .link + .link { margin-left: 1rem; }
@media (max-width: 40rem) {
  .list thead { display: none; }
  .list tr { display: grid; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); }
  .list td { padding: 0.1rem 0; border: 0; }
  .row-actions { text-align: left; padding-top: 0.4rem !important; }
}

.empty { background: var(--paper); border: 1px dashed #C3CAD3; border-radius: 6px; padding: 1.5rem; margin-bottom: 1.5rem; }
.licenses { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.license-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.license-head p { margin: 0; }
.license .list { margin: 0; }
.serial { font: 500 0.9375rem/1 "Plex Mono", ui-monospace, monospace; color: var(--muted); }

.inline-form { display: grid; grid-template-columns: minmax(0, 28rem) auto; gap: 0.75rem; align-items: end; max-width: 40rem; }
.inline-form .actions { padding-bottom: 0; }
.inline-form .field .hint { grid-column: 1 / -1; }
.inline-form > div:last-child { grid-column: 1 / -1; }
@media (max-width: 40rem) { .inline-form { grid-template-columns: 1fr; } }

.invite { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1.25rem; max-width: 52rem; }
.row { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 0.75rem; }
@media (max-width: 44rem) { .row { grid-template-columns: 1fr; } }

.setting { padding: 0 0 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--rule); }
.setting:last-child { border-bottom: 0; }

.dialog { border: 0; border-radius: 8px; padding: 1.5rem; width: min(30rem, calc(100vw - 2rem)); box-shadow: 0 20px 60px rgba(14, 17, 22, 0.25); }
.dialog::backdrop { background: rgba(14, 17, 22, 0.45); }
.dialog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.75rem; }
.dialog h2 { font: 700 1.5rem/1.15 "Barlow Condensed", sans-serif; color: var(--ink); margin: 0; }
.dialog p { margin: 0 0 0.75rem; }

.code-out { min-height: 9rem; }