/* ==== TOOLBAR ==== */
.toolbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--s-3) 0;
  margin-bottom: var(--s-6);
}

.toolbar__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.toolbar__brand {
  display: flex;
  align-items: center;
}

.toolbar__logo {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-accent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.toolbar__logo:hover {
  opacity: 0.8;
}

.toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.toolbar__link {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-ink-muted);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.toolbar__link:hover {
  color: var(--c-ink);
  background: var(--c-surface-sunk);
}

.toolbar__link--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.toolbar__link--primary:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
  opacity: 0.9;
}

.toolbar__link--logout {
  color: var(--c-ink-faint);
}

.toolbar__link--logout:hover {
  color: var(--c-ink-muted);
}

/* ==== CARDS ==== */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.card--accent {
  background: var(--c-surface-accent);
  border: 2px solid var(--c-border-strong);
}

.card--compact {
  padding: var(--s-5);
}

/* ==== BUTTONS ==== */
.btn {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  opacity: 0.9;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.btn--secondary {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-ink-muted);
}

.btn--icon {
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--r-md);
  font-size: 11px;
  flex-shrink: 0;
}

.btn--danger {
  background: #dc2626;
  color: white;
}

.btn--sm {
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-sm);
}

.btn:disabled {
  border-color: var(--c-disabled-border);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
  opacity: 1;
}

/* ==== BADGES & CHIPS ==== */
.badge--live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--c-accent-wash);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-accent);
}

.badge--neutral {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(234, 225, 212, 0.13);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: var(--s-2);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink-muted);
}

.badge--pts {
  display: inline-block;
  background: var(--c-pts-bg);
  border-radius: var(--r-xs);
  padding: 6px 2px;
  font-size: var(--t-2xs);
  font-weight: 700;
  color: var(--c-pts-ink);
  text-align: center;
  min-width: 42px;
}

.badge--pts.is-muted {
  background: var(--c-pts-bg-muted);
  color: var(--c-pts-ink-muted);
}

.chip--owner {
  display: inline-block;
  background: var(--c-chip-bg);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-1);
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--c-ink-faint);
}

/* ==== AVATAR ==== */
.avatar {
  --avatar-size: 48px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--t-card);
  font-weight: 700;
  flex-shrink: 0;
}

.avatar--sm {
  --avatar-size: 32px;
  font-size: var(--t-item);
}

/* ==== PROGRESS BAR ==== */
.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--c-border);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--fill, var(--c-accent));
  transition: width 0.3s ease;
}

/* ==== ROSTER ROW ==== */
.roster-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: transparent;
  transition: background 0.15s ease;
}

.roster-row.is-active {
  background: var(--c-surface-accent);
  color: var(--c-ink);
  font-weight: 700;
}

.roster-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fill, var(--c-accent));
  flex-shrink: 0;
}

.roster-row__name {
  flex: 1;
  font-size: var(--t-body);
}

.roster-row__score {
  font-size: var(--t-body);
  font-weight: 700;
}

.roster-row__total {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--c-ink-muted);
}

/* ==== ITEM CARD ==== */
.item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 76px;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  text-align: left;
  transition: all 0.15s ease;
}

.item-card--available {
  border-color: var(--c-border);
  background: var(--c-surface);
}

.item-card--available:hover {
  border-color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.1);
}

.item-card--claimed {
  background: var(--c-surface-sunk);
  border-color: transparent;
  cursor: default;
}

.item-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.item-card__name {
  font-size: var(--t-item);
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-card--claimed .item-card__name {
  color: var(--c-ink-faint);
}

.item-card__actions {
  flex-shrink: 0;
}

/* ==== EYEBROW ==== */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.eyebrow--accent {
  color: var(--c-accent);
}

/* ==== SECTION HEADING ==== */
.section-heading {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--t-section);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}

.section-heading + .item-grid {
  margin-bottom: var(--s-7);
}

/* ==== PAGE HEADER ==== */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-6);
}

.page-header__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.page-header__eyebrow {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  font-size: var(--t-body);
  font-style: italic;
  color: var(--c-accent);
}

.page-header__title {
  font-size: var(--t-h1);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.page-header__badges {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ==== DIVIDER ==== */
.divider {
  border: 0;
  border-top: 1px solid var(--c-divider);
  margin: var(--s-4) 0;
}

/* ==== FORMS ==== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.form-field label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field textarea,
.form-field select {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-accent);
}

.form-field textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.form-errors {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #dc2626;
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}

.form-errors h3 {
  font-size: var(--t-body);
  font-weight: 600;
  color: #dc2626;
  margin-bottom: var(--s-2);
}

.form-errors ul {
  list-style: disc;
  margin-left: var(--s-5);
}

.form-errors li {
  font-size: var(--t-sm);
  color: #dc2626;
  margin-bottom: var(--s-1);
}

/* ==== ALERTS ==== */
.alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
}

.alert-error {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid #dc2626;
  color: #dc2626;
}

/* ==== TABLES ==== */
.setup-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.setup-table thead {
  background: var(--c-surface-sunk);
}

.setup-table th {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-border);
}

.setup-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-body);
}

.setup-table tbody tr:last-child td {
  border-bottom: none;
}

.setup-table td.actions {
  display: flex;
  gap: var(--s-2);
}

/* ==== EMPTY STATES ==== */
.empty-state {
  padding: var(--s-6);
  text-align: center;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

/* ==== TURN HISTORY ==== */
.turn-history {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.turn-history__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
}

.turn-history__turn-number {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-ink-muted);
  flex-shrink: 0;
  min-width: 24px;
}

.turn-history__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.turn-history__participant {
  font-size: var(--t-sm);
  font-weight: 600;
}

.turn-history__action {
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
}