/* Territory-page — the shape Build and Strike share. See `territory-page.js`
 * for why this exists: an audit on 2026-08-04 found `build.css` and
 * `strike.css` were 235 and 245 lines of the same design with a different
 * prefix. Everything below is a rule that was byte-identical in both files
 * apart from `build`/`strike` in the class name.
 *
 * Tokens only, no raw hex (05_CONVENTIONS.md guardrail 10). The territory's
 * own colour is never written here — it arrives as an inline style from
 * `territoryPaint`, the same helper the Schedule already uses.
 */

.tpg-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2) var(--space-3) 0;
  border: 0;
  background: none;
  color: var(--soft);
  font: inherit;
  font-size: var(--size-small);
  cursor: pointer;
}

/* --- the territory header --------------------------------------------------- */

.tpg-hero {
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}

.tpg-hero-head { display: flex; align-items: center; gap: var(--space-3); }

.tpg-hero-emoji { font-size: 23px; line-height: 1; }

.tpg-hero-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 29px);
  font-weight: var(--weight-normal);
  line-height: 1.15;
}

.tpg-hero-blurb {
  margin: var(--space-2) 0 0;
  max-width: 46em;
  font-size: 15px;
  color: var(--soft);
}

.tpg-hero-times {
  margin: var(--space-2) 0 0;
  font-size: var(--size-micro);
  color: var(--soft);
}

/* --- the identity capture, and the fields inside it ------------------------- */

/* A fill and a radius, the way the design draws a block like this — never an
 * outlined card. A form on this page is part of the page, not a second
 * document on it. */
.tpg-identity {
  border-radius: var(--radius-control);
  background: var(--card);
  padding: 13px 14px;
  margin-bottom: var(--space-4);
}

/* A kicker, not a second page title. The design labels a block like this at
 * 11px/700/0.16em uppercase in --soft; a 21px serif heading in the middle of
 * a form competes with the territory's own name at the top of the screen. */
.tpg-identity-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

.tpg-identity-note {
  margin: var(--space-3) 0 0;
  font-size: var(--size-micro);
  color: var(--soft);
}

/* The fields grid and the single-field column. Build reuses this for its
 * contact fields too (see `build.css`'s `.build-fields`, which adds only the
 * bottom margin that block needs and this one does not). */
.tpg-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

/* Bottom-aligned so the inputs form one line across the row even when a hint
 * wraps to two lines in a narrow column. */
.tpg-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* --- the error line, the actions row, the save button ----------------------- */

.tpg-error {
  margin: 0 0 var(--space-3);
  font-size: var(--size-small);
  color: var(--gap);
}

.tpg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.tpg-save {
  font-size: 15px;
  padding: var(--space-3) var(--space-5);
}

.tpg-actions-note { font-size: var(--size-small); color: var(--soft); }

@media (max-width: 767px) {
  .tpg-save { flex: 1 1 auto; }
}