/* My Shifts.
 *
 * The design's proportions, with two deliberate corrections: every control
 * clears the 48px tap floor (the design draws some at 44), and the territory
 * tint under a shift row takes its text colour from `--t-*-deep` rather than
 * the primary, which is 1.89:1 on its own tint in sun mode
 * (04_DESIGN_HANDOFF.md § Contrast). */

.me { display: block; }

/* --- where you stand ------------------------------------------------------ */

.me-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 17px 19px;
  margin-bottom: var(--space-4);
}

.me-who { flex: 1 1 160px; min-width: 0; }

.me-name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: var(--weight-normal);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.me-pod { font-size: var(--size-small); color: var(--soft); margin: 2px 0 0; }

.me-stat { display: flex; flex-direction: column; gap: 2px; flex: none; }

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

.me-stat-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.me-dues {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  padding-top: 6px;
  line-height: 1.2;
}

.me-stat-note { font-size: var(--size-micro); font-weight: var(--weight-semibold); }
.me-stat-note.is-soft { font-weight: var(--weight-normal); color: var(--soft); }

/* Scoped, not global — this stylesheet is linked into the SPA alongside five
   others and a bare `.is-live` would repaint half of them. */
.me-head .is-live { color: var(--live); }
.me-head .is-soon { color: var(--soon); }
.me-head .is-gap { color: var(--gap); }

.me-signout { flex: none; align-self: center; }

/* --- how camp finds you --------------------------------------------------- */

.me-editor { margin-bottom: var(--space-5); }

.me-kicker {
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 11px;
}

.me-fields { display: flex; flex-direction: column; gap: 11px; }

.me-fields--row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 11px;
}

.me-field { display: flex; flex-direction: column; gap: 5px; }
.me-field .field-label { margin-top: 0; font-size: var(--size-micro); }

.me-editor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }

.me-confirm {
  background: var(--soon-bg);
  color: var(--ink);
  border-radius: var(--radius-control);
  padding: 13px 15px;
  margin-top: 13px;
}

.me-confirm-copy { font-size: var(--size-small); line-height: 1.5; margin: 0; }
.me-confirm .me-editor-actions { margin-top: 11px; }

.me .btn--ink {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.me-error {
  color: var(--gap);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  margin: var(--space-2) 0 0;
}

/* --- the seats you hold --------------------------------------------------- */

.me-shifts { margin-top: var(--space-4); }

.me-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.me-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  /* The territory tint is painted inline by me.js, so the token layer stays the
     only place a colour is named. This is the fallback for a row without one. */
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-control);
  padding: 13px 15px;
  min-height: 56px;
}

.me-row-emoji { font-size: 17px; flex: none; line-height: 1; }
.me-row-body { flex: 1; min-width: 0; }

.me-row-title {
  display: block;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.me-row-sub {
  display: block;
  font-size: var(--size-small);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.me-release { flex: none; white-space: nowrap; background: transparent; }

.me-empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-4);
  margin: 0;
  color: var(--soft);
  font-size: var(--size-body);
  text-align: center;
}

/* --- elsewhere ------------------------------------------------------------ */

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

.me-links .btn { text-decoration: none; }

/* --- the 401 -------------------------------------------------------------- */

.me-signin { max-width: 30rem; }
.me-signin-panel { margin-top: var(--space-4); }
.me-signin .me-fields { margin-bottom: var(--space-4); }

@media (max-width: 480px) {
  .me-head { gap: var(--space-4); padding: var(--space-4); }
  .me-signout { align-self: flex-start; }
}