/* Copyright (c) 2026 Brownie, LLC. All rights reserved. */

/*
 * The Team page (team.html): the parts every view shares. Each area has its
 * own file: team-account.css (signing in, your programs), team-program.css
 * (a program's setup and people), team-roster.css (rosters, teams and the
 * roll-over). All of them use the variables in styles.css.
 */

.home-link {
  color: inherit;
  text-decoration: none;
}

.header-section {
  color: var(--color-text-muted);
  font-weight: 500;
}

.account-area {
  align-items: center;
}

.account-name {
  color: var(--color-text);
  font-weight: 600;
}

.team-view {
  display: grid;
  gap: 16px;
  outline: none;
}

/* Each render fills its own container (see main.ts), laid out like the view. */
.team-view-content {
  display: grid;
  gap: 16px;
}

.team-section {
  display: grid;
  gap: 12px;
}

.team-section h2 {
  margin: 0;
}

/* Headings take focus after a change; only show it for keyboard use. */
.team-section h2:focus:not(:focus-visible) {
  outline: none;
}

.team-section p {
  margin: 0;
}

.team-section h3 {
  margin: 8px 0 0;
  font-size: 1rem;
}

/* A form laid out as fields in a row, wrapping on narrow screens. */
.team-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.team-form .form-field {
  flex: 1 1 180px;
}

.form-error {
  margin: 0;
  color: var(--color-danger);
}

/* Errors under a row or a form take a line of their own, and no space when empty. */
.error-slot {
  flex: 1 1 100%;
}

.error-slot:empty {
  display: none;
}

/* The toast stays in the page as a live region, so screen readers announce
   it; it only looks gone while empty. */
.toast:empty {
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* A list of items with actions on the right, such as people or teams. */
.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.item-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  background: var(--color-surface);
}

.item-list .item-title {
  font-weight: 600;
}

.item-list .item-detail {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.button.is-danger {
  color: var(--color-danger);
  border-color: currentColor;
}