/* My pod.
 *
 * A card per member, people-first, with the two facts a lead is scanning for —
 * shifts and dues — as chips rather than a table. A table is what the Google
 * Sheet was; the point of this screen is that you can read it on a phone in the
 * dark, holding a cup of tea. Tokens only (guardrail 10). */

.mypod { display: block; max-width: 70rem; }

.mypod-head { margin-bottom: var(--space-5); }

/* --- the little boxes at the top -------------------------------------------
 *
 * The tiles are the shared `statTile()` (`components/ui.js`); only the grid
 * that arranges them lives here, exactly as the Tally does it. `150px` is the
 * narrowest a tile can be and still hold "dues paid" on one line above
 * "6 / 11", which puts two side by side at 390px and four across on a desktop.
 * Nothing here is a tap target — the filter chips underneath are the controls,
 * and they carry the 48px floor. */
.mypod-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.mypod-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* The pressed state has to survive being read at arm's length in the sun, so it
   is a filled pill rather than a border change. */
.mypod-filters .btn.is-on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.mypod-pod { margin-bottom: var(--space-6); }

.mypod-pod-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--size-h2);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.mypod-pod-note {
  font-family: var(--font-ui);
  font-size: var(--size-small);
  color: var(--soft);
}

.mypod-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.mypod-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-left-color: var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  color: var(--ink);
  font: inherit;
}

button.mypod-card { cursor: pointer; }

/* Below the **minimum** is the whole reason this screen exists, so it is visible
   from across a card and not only in a chip.

   It keys on `standing.meets_minimum`, never on the discount threshold. Until
   2026-08-04 it keyed on the latter, so a camper who had done exactly what camp
   asks wore the same red stripe as somebody who had done nothing — and their
   lead was told to chase them. Somebody between the two thresholds gets no
   stripe at all, because there is nothing to chase. */
.mypod-card.is-short { border-left-color: var(--soon); }

.mypod-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.mypod-card-name {
  font-weight: var(--weight-semibold);
  font-size: var(--size-body);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.mypod-card-sub { font-size: var(--size-small); color: var(--soft); }

.mypod-card-go { flex: none; color: var(--soft); font-size: var(--size-h2); }

.mypod-tag {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

.mypod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.mypod-chip {
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}

.mypod-chip--ok { background: var(--live-bg); border-color: var(--live-bg); color: var(--ink); }
/* The shift chip's third state: met the minimum, on the full fee. The plain
   `.mypod-chip` background is exactly right for it — a fact, not a flag — so
   `met` deliberately adds nothing but a name to key on. */
.mypod-chip--met { background: var(--panel); border-color: var(--line); color: var(--ink); }
.mypod-chip--short { background: var(--soon-bg); border-color: var(--soon-bg); color: var(--ink); }
.mypod-chip--warn { background: var(--gap-bg); border-color: var(--gap-bg); color: var(--ink); }

.mypod-coverage {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.mypod-invite { max-width: 34rem; }
.mypod-invite .dir-lede { margin: var(--space-3) 0 0; }

@media (max-width: 767px) {
  /* One column. Two 280px cards side by side on a 390px screen is two cards
     nobody can read, and a member's name wrapping mid-word is worse than a
     longer page. */
  .mypod-people { grid-template-columns: 1fr; }
}

/* --- how far along the pod is ----------------------------------------------
 *
 * Against `people x the minimum`, which is what camp asks of this pod — not
 * against the biggest pod in camp, which is a leaderboard wearing a progress
 * bar's clothes. The numbers are printed beside it: a bar on its own is a mood,
 * and a lead deciding whether to send a message needs the figure.
 *
 * The bar itself is `.ui-bar` (`components/ui.css`) — this screen drew its own
 * track and fill at the same height, from the same tokens, which is precisely
 * the fifth-copy-of-a-primitive the shared vocabulary exists to end. Only the
 * wrapper and the sentence under it are this screen's.
 */

.mypod-progress {
  margin-top: var(--space-3);
}

.mypod-progress-note {
  margin: var(--space-2) 0 0;
  font-size: var(--size-small);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

/* --- who is on right now ---------------------------------------------------
 *
 * Burn only. The first thing a lead opens this screen for once camp is running:
 * who of mine is on a shift at this moment, so they can go and find them.
 */

.mypod-onnow {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--live-bg);
  border: 1px solid var(--live);
  border-radius: var(--radius-card);
}

/* Every row here is a 48px tap target that opens a profile, so they need a gap
 * a thumb can see. 2px read as a single block of text with hidden seams. */
.mypod-onnow-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* The whole row is the target, and it clears the 48px floor — this is read
 * one-handed, in dust, by somebody walking towards the teahouse. */
.mypod-onnow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.mypod-onnow-row:hover,
.mypod-onnow-row:focus-visible {
  background: var(--panel);
  outline: none;
}

.mypod-onnow-row:focus-visible {
  box-shadow: 0 0 0 2px var(--live);
}

.mypod-onnow-who {
  font-weight: 600;
  color: var(--ink);
}

.mypod-onnow-what {
  font-size: 14px;
  color: var(--soft);
}

.mypod-onnow-when {
  margin-left: auto;
  font-size: 14px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.mypod-onnow-next {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--live);
}


/* This screen's own lede, replacing three borrowings of `directory.css`'s
 * `.dir-lede`. That worked only because every stylesheet is loaded globally —
 * unlink or rename `directory.css` and My pod, the profile and the Tally all
 * silently lose their styling with no test failing. */
.mypod-lede {
  margin: 0 0 var(--space-3);
  color: var(--soft);
  font-size: var(--size-body);
  max-width: 62ch;
}

/* The lead sign-in door (see `mypod.js#leadSignInForm`). */
.mypod-signin { margin: var(--space-4) 0; max-width: 420px; }
.mypod-signin-fields { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }