/* Team, My Profile and the W-4 sheet (js/modules/team.js, js/profile.js).
   Builds on app.css (groups, kv rows, forms); everything here is tm-*. */

/* ---------------- My Profile ---------------- */
.tm-profile { max-width: 880px; }
.tm-photo { display: flex; align-items: center; gap: 18px; padding: 2px 4px; }
.tm-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.tm-photo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-spinner { width: 18px; height: 18px; border-width: 2px; }
.tm-footnote { font-size: 0.88rem; color: var(--text-dim); overflow-wrap: anywhere; }
.tm-warn { color: var(--orange); }
.tm-red { color: var(--red); }
.tm-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-width: 0; }
.tm-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* SSN behind its mask, with Show & Edit */
.tm-masked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 42px; }
.tm-masked-label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.tm-masked-value { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.tm-ssn-edit { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tm-ssn-edit > .field { flex: 1 1 220px; }
.tm-ssn-edit > .btn { margin-top: 28px; }

/* ---------------- Sheets (W-4, Team editor) ---------------- */
.tm-sheet-form { display: flex; flex-direction: column; gap: 18px; }
.tm-sheet-form > .form-section + .form-section { border-top: 1px solid var(--line); padding-top: 16px; }
.tm-card { border-radius: var(--radius-ui); box-shadow: none; }
.tm-foot { font-size: 0.82rem; color: var(--text-faint); overflow-wrap: anywhere; }
.tm-foot.tm-red { color: var(--red); }
.tm-title-icon { display: flex; align-items: center; gap: 6px; }
.tm-title-icon .icon { color: var(--ink); }
.tm-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; }
.tm-stepper-label { font-size: 0.92rem; font-weight: 600; color: var(--ink); min-width: 0; }
.tm-step-controls { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tm-step-count { min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }

/* ---------------- Team list and profile ---------------- */
.tm-linked { display: inline-flex; color: var(--ink); }
.tm-toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
}
.tm-person { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.tm-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-person-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.tm-ink-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-dim); }
.tm-ink-label .icon, .tm-inline .icon { color: var(--ink); }
.tm-inline { display: inline-flex; align-items: center; gap: 6px; }
.tm-shift { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap; }
.tm-shift > .icon { color: var(--ink); }
.tm-shift-text { flex: 1 1 180px; min-width: 0; color: var(--ink); }
.tm-foot-line { display: block; }
.tm-foot-line + .tm-foot-line { margin-top: 4px; }
.tm-delete { display: flex; }

@media (max-width: 760px) {
  .tm-photo { gap: 14px; }
  .tm-delete .btn { width: 100%; }
  .tm-ssn-edit > .btn { margin-top: 0; }
}