/* Track Mechanics V38.81.146 — Field Clarity, Selector-First & Responsive Integrity
   Final general layout owner. mobile-nav-integrity.css must remain after this file. */

:root {
  --tm-major-gap: 28px;
  --tm-section-gap: 22px;
  --tm-control-gap: 12px;
  --tm-mobile-major-gap: 24px;
  --tm-mobile-section-gap: 18px;
}

/* Every flexible child must be allowed to shrink instead of forcing page overflow. */
.page *, .page-shell *, .experience-page *, .group-page *, .main-shell *, .surface-card *,
.evidence-panel *, .experience-section *, .work-choice *, .join-ceremony *, .member-access-sheet * {
  box-sizing: border-box;
  min-inline-size: 0;
}

/* Major sections need visible breathing room rather than a continuous wall of controls. */
.page > :is(section, form, article, nav, .surface-card, .evidence-panel, .experience-section, .work-choice, .info-banner, .warning-banner, .success-banner, .empty-state) +
:is(section, form, article, nav, .surface-card, .evidence-panel, .experience-section, .work-choice, .info-banner, .warning-banner, .success-banner, .empty-state),
.page-shell > :is(section, form, article, nav, .surface-card, .evidence-panel, .experience-section) +
:is(section, form, article, nav, .surface-card, .evidence-panel, .experience-section),
.experience-page > :is(section, form, article, nav) + :is(section, form, article, nav),
.group-page > :is(section, form, article, nav) + :is(section, form, article, nav) {
  margin-block-start: var(--tm-major-gap);
}

:is(.surface-card, .evidence-panel, .experience-section, .work-choice, .join-review-card, .active-team-invite, .team-invite-form,
    .purposeful-practice-panel, .tm-season-block, .tm-season-command, .tm-meet-week-hero, .tm-meet-prep-form,
    .member-contact-card, .capability-ledger, .member-ledger, .lab-section, .support-entry-form) {
  overflow-wrap: anywhere;
}

/* Consistent internal rhythm. */
:is(.form-grid, .lab-form, .new-group-form, .team-invite-form, .accept-invite-form, .join-reference-form,
    .support-entry-form, .tm-season-grid, .tm-check-grid, .member-contact-editor form) {
  gap: var(--tm-control-gap);
}

:is(.form-grid, .lab-form, .tm-season-grid, .member-phone-grid, .new-group-composition, .member-access-sheet, .join-ceremony,
    .tm-performance-actions, .capture-actions, .practice-support-tools, .actions, .section-head, .join-review-heading,
    .result-analysis-head, .tm-season-tabs, .group-tabs) > * {
  min-inline-size: 0;
}

/* Controls should never become wider than their container. */
input, select, textarea, button, .btn, [role="button"] {
  max-inline-size: 100%;
}

select[multiple] {
  min-block-size: 9rem;
  padding-block: 8px;
}

textarea {
  resize: vertical;
}

/* Long labels are allowed to wrap. This intentionally defeats legacy nowrap rules on generic buttons. */
button:not(.bottom-nav-item):not(.rail-nav-item),
.btn,
.capture-action,
.support-link,
.experience-quick-action,
.group-tabs button,
.tm-season-tabs button {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.22;
  text-wrap: pretty;
}

.actions,
.tm-performance-actions,
.capture-actions,
.practice-support-tools,
.member-contact-actions,
.tm-season-tabs,
.group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.actions > :is(button, .btn),
.tm-performance-actions > :is(button, .btn),
.practice-support-tools > :is(button, .btn) {
  flex: 0 1 auto;
}

/* Text and data may wrap; opaque IDs/URLs must not blow out cards. */
:is(h1, h2, h3, h4, p, li, dd, dt, strong, small, span, label, summary, a, code, pre) {
  overflow-wrap: break-word;
}

:is(.human-invite-code, code, pre, .result-origin, .result-source, .helper) {
  overflow-wrap: anywhere;
}

pre {
  max-inline-size: 100%;
  overflow: auto;
}

/* Media and generated evidence stay within the content box. */
img, video, svg, canvas, iframe {
  max-inline-size: 100%;
}

/* Wide data surfaces are scroll containers rather than page-overflow sources. */
:is(.table-wrap, .results-table-wrap, .standards-table-wrap, .report-table-wrap, .tm-table-wrap, .data-table-wrap) {
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Invitation deep-link state: no redundant code field on personal links. */
.join-direct-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line, #DFE5EB);
  border-radius: 18px;
  background: var(--surface, #fff);
}

.join-direct-spinner {
  inline-size: 32px;
  block-size: 32px;
  border: 3px solid rgba(43, 102, 195, .18);
  border-top-color: #2B66C3;
  border-radius: 50%;
  animation: tm-join-spin .9s linear infinite;
}

@keyframes tm-join-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .join-direct-spinner { animation: none; border-top-color: rgba(43, 102, 195, .18); }
}

/* Small-screen integrity: content stacks before it compresses. */
@media (max-width: 720px) {
  :root {
    --tm-major-gap: var(--tm-mobile-major-gap);
    --tm-section-gap: var(--tm-mobile-section-gap);
    --tm-control-gap: 14px;
  }

  .page,
  .page-shell,
  .experience-page,
  .group-page {
    row-gap: var(--tm-mobile-section-gap);
  }

  .page-heading,
  .page-header,
  .group-heading {
    margin-block-end: 22px;
  }

  :is(.surface-card, .evidence-panel, .experience-section, .work-choice, .join-review-card, .team-invite-form,
      .purposeful-practice-panel, .tm-season-block, .tm-season-command, .tm-meet-week-hero, .tm-meet-prep-form,
      .member-contact-card, .capability-ledger, .member-ledger, .support-entry-form) {
    padding: clamp(16px, 4.8vw, 22px);
  }

  :is(.form-grid, .lab-form, .tm-season-grid, .new-group-composition, .member-access-sheet, .join-ceremony,
      .member-phone-grid, .join-review-details, .tm-evidence-grid, .performance-evidence-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.form-span, .tm-span-2, .tm-span-3) {
    grid-column: 1 / -1 !important;
  }

  .section-head,
  .join-review-heading,
  .result-analysis-head,
  .tm-meet-week-hero,
  .tm-season-command {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .actions,
  .tm-performance-actions,
  .capture-actions,
  .practice-support-tools,
  .member-contact-actions,
  .tm-season-tabs,
  .group-tabs {
    gap: 10px;
  }

  .actions > :is(button, .btn),
  .tm-performance-actions > :is(button, .btn),
  .capture-actions > :is(button, .btn, .capture-action),
  .practice-support-tools > :is(button, .btn),
  .tm-season-tabs > :is(button, .btn) {
    flex: 1 1 min(100%, 13rem);
    min-block-size: 48px;
  }

  .group-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-inline-size: 100%;
    scrollbar-width: thin;
  }
  .group-tabs > button {
    flex: 0 0 auto;
  }

  .team-invite-qr,
  .active-team-invite,
  .join-direct-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .team-invite-qr svg,
  .team-invite-qr img {
    margin-inline: auto;
  }

  .human-invite-code {
    font-size: clamp(1rem, 5vw, 1.35rem);
    letter-spacing: .03em;
  }

  /* Avoid large summary cards packing four cells side-by-side on phones. */
  :is(.tm-performance-summary-grid, .tm-evidence-grid, .summary-grid, .metric-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  :root { --tm-major-gap: 22px; }

  :is(.tm-performance-summary-grid, .tm-evidence-grid, .summary-grid, .metric-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .actions > :is(button, .btn),
  .tm-performance-actions > :is(button, .btn),
  .capture-actions > :is(button, .btn, .capture-action),
  .practice-support-tools > :is(button, .btn),
  .tm-season-tabs > :is(button, .btn) {
    inline-size: 100%;
    flex-basis: 100%;
  }

  .join-direct-card { padding: 16px; }
}

/* V38.81.147 — Turnkey coaching and two-tier invitation clarity. */
.turnkey-plan-summary {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 18px;
  background: var(--surface-soft, #f8fafb);
  min-inline-size: 0;
}
.turnkey-plan-summary h3,
.turnkey-plan-summary p { margin: 0; }
.turnkey-plan-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.turnkey-plan-summary dl > div { min-inline-size: 0; }
.turnkey-plan-summary dt {
  color: var(--muted, #667487);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.turnkey-plan-summary dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}
.turnkey-workout-plan {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: inherit;
}
.turnkey-workout-plan small { opacity: .86; line-height: 1.45; }
.turnkey-advanced {
  margin-block: 10px;
}
.turnkey-advanced > summary {
  cursor: pointer;
  min-block-size: 48px;
}
.turnkey-advanced > summary span:first-child {
  display: grid;
  gap: 3px;
  min-inline-size: 0;
}
.turnkey-advanced > summary small {
  overflow-wrap: anywhere;
}
.turnkey-invite-form {
  display: grid;
  gap: 18px;
}
.invite-type-choice,
.invite-participant-choice {
  display: grid;
  gap: 10px;
  min-inline-size: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.invite-type-choice legend,
.invite-participant-choice legend {
  font-weight: 800;
  margin-block-end: 6px;
}
.turnkey-choice {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 14px;
  background: var(--surface, #fff);
  min-inline-size: 0;
}
.turnkey-choice input { margin-block-start: 4px; }
.turnkey-choice span { display: grid; gap: 3px; min-inline-size: 0; }
.turnkey-choice small { color: var(--muted, #667487); overflow-wrap: anywhere; }
.invite-participant-choice {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.invite-participant-choice label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 12px;
}
[data-participant-invite-fields] { display: grid; gap: 14px; min-inline-size: 0; }
[data-participant-invite-fields][hidden] { display: none !important; }
.turnkey-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.turnkey-diagnostic {
  margin-block-start: 18px;
  color: var(--muted, #667487);
}
.tm-resilient-route .experience-section {
  display: grid;
  gap: 16px;
}

@media (max-width: 560px) {
  .turnkey-plan-summary dl,
  .invite-participant-choice { grid-template-columns: minmax(0,1fr); }
  .turnkey-practice-create > .form-span,
  .turnkey-practice-create > label,
  .turnkey-invite-form > * { min-inline-size: 0; max-inline-size: 100%; }
  .turnkey-recovery-actions > .btn { inline-size: 100%; }
}

/* V38.81.147 — turnkey coaching: put the plan first, details on demand. */
.tm-season-turnkey,
.tm-season-review-auto {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  margin-block: clamp(18px, 3vw, 34px);
}
.tm-turnkey-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.tm-turnkey-facts > span {
  display: grid;
  gap: 4px;
  min-inline-size: 0;
}
.tm-turnkey-facts small { opacity: .78; }
.tm-turnkey-facts strong,
.tm-auto-blocks strong,
.tm-auto-blocks span { overflow-wrap: anywhere; }
.tm-auto-blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tm-auto-blocks article {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 12px;
}
.tm-turnkey-primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block: 16px 28px;
  padding: 16px 18px;
  border: 1px solid var(--line, #dfe5eb);
  border-radius: 14px;
  background: var(--surface, #fff);
}
.tm-turnkey-primary-action > div { display: grid; gap: 4px; min-inline-size: 0; }
.tm-turnkey-primary-action span { color: var(--muted, #667487); }
.tm-season-advanced,
.tm-season-review-advanced { margin-block: 18px 34px; }

@media (max-width: 720px) {
  .tm-turnkey-facts,
  .tm-auto-blocks { grid-template-columns: minmax(0, 1fr); }
  .tm-turnkey-primary-action { align-items: stretch; flex-direction: column; }
  .tm-turnkey-primary-action .btn { inline-size: 100%; }
}