/* NHL Calendar — app-specific layout on top of css/styles.css.
   Tokens only, from the site stylesheet. No new colours, no shadows, no
   transitions beyond the 80ms background change on press. */

/* Wider than a tool page's 680px: the team grid needs four columns. */
.app-column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xl);
  padding-top: var(--sp-3xl);
  padding-bottom: var(--sp-3xl);
}

/* Everything except the team grid keeps the reading width. */
.app-narrow { max-width: var(--content-width); }

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */

.app-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.app-section-tools {
  display: flex;
  align-items: baseline;
  gap: var(--sp-md);
}

.app-section-tools .meta { font-variant-numeric: tabular-nums; }

/* Step number: plain, tabular, muted. Structure, not decoration. */
.app-step {
  display: inline-block;
  min-width: 20px;
  margin-right: var(--sp-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.app-hint { margin: 0; }

.btn-link {
  font: inherit;
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: none;
  padding: var(--sp-xs) 0;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--accent-pressed); }

/* --------------------------------------------------------------------------
   Team grid — four division columns, stacking at 900px and 560px
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.division {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

/* Division header reads as structure: label type over a hairline. */
.division legend {
  width: 100%;
  padding: 0 0 var(--sp-sm);
  margin-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
}

.division-teams {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* One tile: [checkbox] [logo] [City / Name]. Selected is shown four ways,
   none of them colour alone: the checkbox tick, the full-colour logo (grey
   when off), the heavier name, and the border. */
.team {
  position: relative;
  display: grid;
  grid-template-columns: 18px 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-md);
  min-height: 56px;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  cursor: pointer;
  transition: background-color 80ms linear;
}

.team:hover { background: var(--row-hover); border-color: var(--border-hover); }

.team input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Focus ring on the whole tile, not the tiny box. */
.team input:focus-visible { outline: none; }
.team:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }

.team-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
}

/* If a logo can't load (offline, blocked), the tricode stands in. */
.team-mono {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.team.no-logo img { display: none; }
.team.no-logo .team-mono { display: block; }

.team-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.team-place { font-size: 14px; color: var(--text-muted); }
.team-name  { font-size: 15px; color: var(--text); }

.team.is-selected {
  border-color: var(--accent);
  background: var(--surface-raised);
}
.team.is-selected:hover { background: var(--row-hover); }
.team.is-selected .team-logo img { filter: none; opacity: 1; }
.team.is-selected .team-name { font-weight: 700; }
.team.is-selected .team-mono { color: var(--accent); }

/* --------------------------------------------------------------------------
   Options
   -------------------------------------------------------------------------- */

.app-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
}

.app-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  min-width: 0;
}

.app-fieldset legend { padding: 0; margin-bottom: var(--sp-sm); }
.app-fieldset .spec { margin: 0 0 var(--sp-xs); }

.choice {
  display: flex;
  gap: var(--sp-sm);
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}

.choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Get it
   -------------------------------------------------------------------------- */

.app-sends .spec-table th { width: 20%; }
.app-sends .mono { font-size: 14px; }

.app-sends-note {
  display: block;
  color: var(--text-muted);
}

/* The design system's "in progress" button state. */
.btn-download.is-busy,
.btn-download.is-busy:disabled {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
  color: #FFFFFF;
}

#get-hint:empty,
#progress:empty { display: none; }

#progress { font-variant-numeric: tabular-nums; }

.app-outcome:focus { outline: none; }
.app-outcome:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.app-outcome-title { font-size: 17px; line-height: 1.3; }
.app-outcome--ok .app-outcome-title    { color: var(--ok); }
.app-outcome--error .app-outcome-title { color: var(--error); }

.app-outcome p { margin: 0; }

.app-notes {
  margin: 0;
  padding-left: var(--sp-xl);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.5;
}
.app-notes:empty { display: none; }

.app-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.app-button-row .btn-secondary,
.app-button-row .btn-quiet {
  width: auto;
  font-size: 15px;
}

.app-howto .spec-table th { width: 28%; }

.app-howto {
  border-top: 1px solid var(--surface-sunken);
  padding-top: var(--sp-lg);
}

.app-tip {
  display: block;
  margin-top: var(--sp-xs);
  color: var(--text-muted);
}

#success-summary { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .app-column { padding-top: 24px; padding-bottom: 24px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-2xl); }
  .app-options { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .tool-title { font-size: 24px; }
}

/* Phones: one division per block, its eight teams two across. */
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .division-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .team {
    grid-template-columns: 18px 28px minmax(0, 1fr);
    gap: var(--sp-sm);
    padding: var(--sp-sm);
  }
  .team-logo, .team-logo img { width: 28px; height: 28px; }
  .team-name { font-size: 14px; }
  .app-button-row .btn-secondary,
  .app-button-row .btn-quiet { width: 100%; }
}