/* One person's page.
 *
 * A big photograph, the name, the roles, then whatever half of camp's own record
 * this viewer is allowed. Nothing here has a raw colour value in it (guardrail
 * 10) — every one is a token from tokens.css, and `npm run check` walks this
 * file to prove it. */

.person { display: block; max-width: 60rem; }

/* --- the head ------------------------------------------------------------ */

.person-head {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.person-head-body { min-width: 0; }

/* The Directory's disc, enlarged. Identifying somebody in the dark at 3am is
   what a profile is *for*, so the photograph leads and it is big — 132px on a
   laptop, still 96px on a 390px phone where it is a third of the width. */
.person-photo {
  width: 132px;
  height: 132px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px dashed var(--line);
  color: var(--soft);
  font-size: 40px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person-photo--filled {
  border-style: solid;
  border-color: var(--line);
  overflow: hidden;
  padding: 0;
}

.person-name {
  font-family: var(--font-display);
  font-size: var(--size-display);
  line-height: 1.15;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.person-playa {
  font-size: var(--size-h2);
  color: var(--soft);
  margin: var(--space-1) 0 0;
}

.person-pod {
  font-size: var(--size-body);
  color: var(--soft);
  margin: var(--space-1) 0 0;
}

.person-seats {
  font-size: var(--size-small);
  color: var(--soft);
  margin: var(--space-2) 0 0;
}

/* Every role, as its own chip. A person can hold several — camp's admins mostly
   lead a pod as well — and a page that printed the first one would be wrong
   about most of them. */
.person-roles {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.person-role {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--size-small);
  color: var(--ink);
}

.person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* --- camp's own record --------------------------------------------------- */

/* Visibly a different kind of thing from the public half above it: a panel with
   an edge, saying out loud why it is on screen. Somebody reading a colleague's
   dues should be in no doubt that not everybody can. */
.person-private {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.person-private-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--size-h2);
  font-family: var(--font-display);
  margin: 0 0 var(--space-4);
}

.person-private-why {
  font-family: var(--font-ui);
  font-size: var(--size-micro);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

.person-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.person-stat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-control);
  padding: var(--space-3);
}

.person-stat--ok { border-left-color: var(--live); }
.person-stat--warn { border-left-color: var(--gap); }

.person-stat-label {
  font-size: var(--size-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
  margin: 0;
}

.person-stat-value {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  margin: var(--space-1) 0 0;
}

.person-stat-note {
  font-size: var(--size-small);
  color: var(--soft);
  margin: var(--space-1) 0 0;
}

.person-contact { margin-top: var(--space-4); }

.person-contact-head {
  font-size: var(--size-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 var(--space-2);
}

.person-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--size-body);
}

/* A tel: link on a phone is a tap target, so it gets the floor everything else
   gets rather than being a 16px line of text somebody stabs at in the dust. */
.person-contact-list a {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.person-contact-list .is-soft { color: var(--soft); }

/* --- the seats they hold ------------------------------------------------- */

.person-section-head {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  margin: 0 0 var(--space-3);
}

.person-shift-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.person-shift-open {
  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-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  color: var(--ink);
  font: inherit;
}

button.person-shift-open { cursor: pointer; }

.person-shift-emoji { font-size: 20px; flex: none; }

.person-shift-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.person-shift-when { font-weight: var(--weight-semibold); }

.person-shift-what { font-size: var(--size-small); color: var(--soft); }

.person-shift-premium {
  flex: none;
  background: var(--t-prem-t);
  color: var(--t-prem-fg);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
}

.person-empty { max-width: 34rem; }

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

@media (max-width: 767px) {
  /* The photo stays beside the name rather than stacking above it: a 132px disc
     on its own line pushes everything worth reading below the fold on a 390px
     screen, which is the failure a screenshot caught on the Directory. */
  .person-head { gap: var(--space-4); }

  .person-photo {
    width: 96px;
    height: 96px;
    font-size: 30px;
  }

  .person-stats { grid-template-columns: 1fr; }
}