/* Sign up — the territory picker.
 *
 * Every colour here is a token from tokens.css (guardrail 10). Territory
 * colours are not written here at all: they are rows in the `territory` table,
 * so the screen paints them as inline styles straight from the API with the
 * token in front. The rules below carry a neutral token as the fallback.
 */

.pk-hero { margin-bottom: var(--space-5); }
.pk-lede { max-width: 36em; font-size: var(--size-body); }

/* The burn's phase CTA. The dot breathes so the screen reads as connected to
 * something happening; reduced motion turns it into a plain dot (tokens.css). */
.pk-livecta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--live-bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.pk-livedot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--live);
  animation: breathe 2.6s ease-in-out infinite;
}

/* --- camp pulse ----------------------------------------------------------- */

/* Fill, no border. The design floats this panel on the page — the --panel
 * against --bg is the whole separation, and outlining it as well made the one
 * number on the screen look like a form field. */
.pk-pulse {
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: var(--space-4) 18px;
  margin-bottom: var(--space-5);
}

.pk-pulse-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pk-session {
  margin: 0;
  font-size: var(--size-small);
  color: var(--soft);
  max-width: 24em;
}

/* --- the fill bar, at camp scale and on every card ------------------------ */

.pk-bar {
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--card);
  overflow: hidden;
}

/* The width is the only thing the screen sets from data, straight from the
 * fill percentage the API already computed. */
.pk-bar-on {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--t-tea);
}

/* On a card the track sits on the territory's tint. The design cuts it *into*
 * the tint — `rgba(42,38,32,0.12)`, a shadow of the ink — rather than laying a
 * lighter surface on top of it, which is what --panel did: six bright white
 * slots that read as the loudest thing on each card. */
.pk-bar--card { height: 8px; background: color-mix(in srgb, var(--ink) 12%, transparent); }

/* Strike and Build have no seats to count, but they keep the track: six cards
 * with one rhythm, as the design draws them. */
.pk-bar--empty > .pk-bar-on { width: 0; }

/* --- the six cards -------------------------------------------------------- */

/* Four across on a desktop, as the design lays them out. At 300px the six
 * territories came out three-wide and two rows tall, which is a different
 * screen: you scroll to see camp instead of taking it in at once. */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: var(--space-3);
}

/* `border: 0` is the design's. A saturated tint against --bg already separates
 * the card; ringing it in its own primary as well turned six calm blocks into
 * six outlined ones. */
.pk-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 128px;
  text-align: left;
  padding: 17px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.pk-card-head { display: flex; align-items: center; gap: var(--space-2); }
.pk-card-emoji { font-size: 19px; }

.pk-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}

.pk-card-roles {
  flex: 1;
  font-size: var(--size-small);
  color: var(--soft);
  line-height: 1.35;
}

.pk-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
}

.pk-card-count { font-weight: var(--weight-semibold); }
.pk-card-gap { font-weight: var(--weight-semibold); white-space: nowrap; }
.pk-card-gap.is-gap { color: var(--gap); }
.pk-card-gap.is-full { color: var(--live); }
.pk-card-gap.is-open { color: var(--soft); }

/* --- the rest of camp ----------------------------------------------------- */

.pk-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
  /* One column, full-width tappable bands — the design's mobile picker. */
  .pk-grid { grid-template-columns: 1fr; }
  .pk-card { min-height: 0; }
  .pk-pulse-row { flex-direction: column; align-items: flex-start; }
  .pk-footer .btn { flex: 1 1 auto; }
}