/* 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); }

.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; }

/* Short of the target is the whole reason this screen exists, so it is visible
   from across a card and not only in a chip. */
.mypod-card.is-short { border-left-color: var(--gap); }

.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); }
.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; }
}