/* 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;
}

/*
 * The same page with other choices, loading (router.ts): what was on screen
 * stays, dimmed, under a thin bar across the top of the window. Both wait a
 * moment, so a quick update shows neither.
 */
.team-view[aria-busy="true"] > .team-view-content {
  opacity: 0.55;
  transition: opacity 0.15s ease 0.2s;
}

.team-view[aria-busy="true"]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 3px;
  background: linear-gradient(
      90deg,
      transparent 0%,
      var(--color-accent) 40%,
      var(--color-accent) 60%,
      transparent 100%
    )
    0 0 / 40% 100% no-repeat var(--color-accent-soft);
  opacity: 0;
  animation:
    team-view-appear 0s linear 0.2s forwards,
    team-view-loading 1.1s ease-in-out 0.2s infinite;
}

@keyframes team-view-appear {
  to {
    opacity: 1;
  }
}

@keyframes team-view-loading {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-view[aria-busy="true"]::before {
    animation: team-view-appear 0s linear 0.2s forwards;
    background: var(--color-accent);
  }
}

.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;
}

/* Fields share a row and wrap, but never stretch past a field's width: one
   left alone on the last row stays the size of the others above it. */
.team-form .form-field {
  flex: 1 1 180px;
  max-width: 320px;
}

/* A row where some fields have help under them (a NASP or School number):
   the fields line up by their tops, so the labels share one line and the
   inputs one row, with the help hanging below. The button drops by a label's
   height to sit level with the inputs, not with the help. */
.team-form:has(> .form-field > .field-help) {
  align-items: flex-start;
}

.team-form:has(> .form-field > .field-help) .form-field > label {
  line-height: 1.5;
}

.team-form:has(> .form-field > .field-help) > .button {
  margin-top: calc(0.78rem * 1.5 + 4px + (2.5rem - var(--size-control, 42px)) / 2);
}

/* A phone stacks the fields, and the button starts a line of its own. */
@media (max-width: 520px) {
  .team-form:has(> .form-field > .field-help) > .button {
    margin-top: 0;
  }
}

.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;
}