/* ==========================================================================
   TeamGauge — participation web view layout
   --------------------------------------------------------------------------
   Mobile-first per Convention 11. The org cell uses the full content width
   at every viewport — its inner row centers a 384px-max dial with the
   date/topic captions hugging the dial on either side at any size that has
   room, wrapping cleanly when it doesn't. The team row stacks single-column
   by default and lays out 5-across at >= 768px.
   ========================================================================== */

.tg__org-row {
  display: flex;
  justify-content: center;
  padding-top: var(--space-6);
}

.tg__org-cell {
  width: 100%;
  max-width: var(--content-max-width);
}

.tg__team-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.tg__team-cell {
  max-width: 384px;
  padding: 0 var(--space-2);
  box-sizing: border-box;
  margin: 0 auto;
}

.tg__members {
  margin: var(--space-3) auto 0;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-align: center;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .tg__team-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tg__team-cell {
    width: 20%;
    margin: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Aperio gauge wrapper — composition around a .ds-chart-dial primitive
   that adds optional title / date / topic chrome and the team-name caption.
   ────────────────────────────────────────────────────────────────────────── */

.ag-wrap {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
}

.ag-title {
  display: inline-block;
  color: var(--text-primary);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  white-space: nowrap;
  margin-top: var(--space-3);
}

/* The row is a 3-column grid. Left and right flanks are explicit FIXED-and-EQUAL
   widths per breakpoint; the dial sits in the centre column (1fr) and is
   centred within it via `justify-self: center`. Equal flank widths are what
   guarantees the dial lands on the row's geometric centre — no flex-grow
   stretching, no content-width drift.

   Mobile (default): single-column stack — date, dial, topic — centre-aligned.
   ≥768px: 180px flanks, dial column flexible (max 384px).
   ≥1024px: 240px flanks, slightly more breathing room.
*/

.ag-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  margin: var(--space-2) auto 0;
  width: 100%;
  max-width: var(--content-max-width);
}

.ag-row__date,
.ag-row__topic {
  width: 100%;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.ag-row__date  { order: 1; }
.ag-row__dial  { order: 2; width: 100%; max-width: 384px; justify-self: center; }
.ag-row__topic { order: 3; }

@media (min-width: 768px) {
  .ag-row {
    grid-template-columns: 180px 1fr 180px;
    gap: var(--space-4);
  }
  .ag-row__date  { text-align: left; }
  .ag-row__topic { text-align: right; }
}

@media (min-width: 1024px) {
  .ag-row {
    grid-template-columns: 240px 1fr 240px;
  }
}

.ag-row__topic-value {
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
}