/* --------------------------------------------------------------------------
   Unified operational UI contract

   Primary work moves in one visible sequence. Independent comparisons and
   controls stay parallel while there is room, then collapse into reading order.
   These rules intentionally affect presentation only; workflow state and gates
   remain owned by their existing components and server actions.
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

:where(
  .topbar h1,
  .panel-heading h2,
  .panel-action-row h2,
  .coach-command-hero h2,
  .coach-view-panel h2,
  .coach-view-panel h3,
  .pf-section-head h2,
  .pf-total strong,
  .run-head h2,
  .wps-head h2,
  .member-workspace-title h1
) {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
}

:where(
  .manager-dashboard,
  .member-management-workspace,
  .coach-management,
  .payroll-flow,
  .reports-workspace,
  .catalog-workspace,
  .automations-workspace
) {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
}

:where(
  .manager-dashboard,
  .member-management-workspace,
  .coach-management,
  .payroll-flow,
  .reports-workspace,
  .catalog-workspace,
  .automations-workspace
) > * + * {
  margin-block-start: 0;
}

.content {
  gap: var(--content-gap);
}

.panel {
  border-radius: var(--radius-xl);
}

:where(
  .primary-button,
  .secondary-button,
  .planner-save,
  .signout-button,
  .pf-month,
  .payroll-tabnav button,
  .coach-command-tabs button,
  .coach-card-action,
  .member-action-rail button
) {
  min-height: var(--control-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  line-height: 1.2;
  transition-duration: var(--motion-standard);
  transition-timing-function: var(--ease-standard);
}

:where(
  .search-box,
  .workspace-switcher,
  .pf-month,
  .run-month input,
  .run-form input,
  .run-paid input,
  .wps-employer input,
  .wps-emp-row input
) {
  min-height: var(--control-default);
  border-radius: var(--radius-sm);
}

:where(
  .nav-item,
  .portal-link,
  .panel a,
  .panel button,
  .panel summary,
  .topbar button,
  .topbar input,
  .topbar select
) {
  transition-duration: var(--motion-standard);
  transition-timing-function: var(--ease-standard);
}

:where(
  a,
  button,
  input,
  select,
  textarea,
  summary
):focus-visible {
  outline: 3px solid rgba(226, 0, 26, .22);
  outline-offset: 2px;
}

/* Sequenced work: preserve one obvious reading and approval path. */
.payroll-flow,
.coach-view-panel,
.coach-leave-view {
  align-content: start;
  gap: var(--content-gap);
}

.pf-workspace,
.pf-review-panel,
.coach-leave-view > * {
  scroll-margin-top: calc(var(--space-6) + 112px);
}

.pf-section-head,
.coach-source-boundary,
.coach-roster-control {
  gap: var(--space-3);
}

/* Parallel work: equal tracks for independent facts and actions. */
.pf-breakdown,
.pf-review-summary,
.wps-control-summary,
.coach-command-hero aside,
.member-workspace-pulse {
  align-items: stretch;
}

.pf-review-summary > *,
.wps-control-summary > *,
.coach-command-hero aside > *,
.member-workspace-pulse > * {
  min-width: 0;
}

.pf-header {
  container-type: inline-size;
}

@container (max-width: 720px) {
  .pf-header-top {
    align-items: stretch;
    flex-direction: column;
  }

  .pf-header-actions,
  .pf-month {
    width: 100%;
  }

  .pf-month {
    justify-content: space-between;
  }

  .pf-steps {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .pf-steps li:not(:last-child)::after {
    top: 26px;
    right: auto;
    bottom: calc(-1 * var(--space-2));
    left: 13px;
    width: 1px;
    height: auto;
  }
}

@media (max-width: 760px) {
  .coach-command-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .member-workspace-header {
    align-items: stretch;
    flex-direction: column;
  }

  .coach-command-hero aside,
  .member-workspace-pulse {
    width: 100%;
  }

  :where(
    .primary-button,
    .secondary-button,
    .planner-save,
    .signout-button,
    .payroll-tabnav button,
    .coach-command-tabs button,
    .coach-card-action,
    .member-action-rail button
  ) {
    min-height: var(--control-touch);
  }

  .pf-review-summary,
  .wps-control-summary {
    grid-template-columns: 1fr;
  }

  .pf-header-actions {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
.pf-disclosure[open] .pf-chevron { transform: rotate(180deg); }
.pf-disclosure-body { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.pf-disclosure-body > :first-child { margin-top: 14px; }
.pf-disclosure-body > .wps-card { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.pf-review-summary { display: grid; grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(80px, .65fr)); gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pf-review-summary > div { display: grid; align-content: center; gap: 3px; min-height: 66px; padding: 10px 13px; border-left: 1px solid var(--border); }
.pf-review-summary > div:first-child { border-left: 0; }
.pf-review-summary small { font-size: var(--text-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.pf-review-summary b { font-size: var(--text-body); color: var(--ink); }
.pf-review-primary { grid-template-columns: 24px 1fr; align-items: center; background: rgba(26,26,78,.035); color: var(--navy); }
.pf-review-primary span { display: grid; gap: 2px; }
.pf-review-primary strong { font: 900 var(--text-title)/1 var(--font-display); color: var(--navy); }
.pf-submit-note { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(214,158,46,.1); color: #8a570b; font-size: 11.5px; font-weight: 700; }
.pf-empty-note { margin: 0; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); font-size: 12.5px; }
@media (max-width: 880px) {
  .pf-header { position: relative; }
  .pf-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pf-steps li::after { display: none; }
  .pf-steps li > span:last-child { background: transparent; }
  .pf-review-summary { grid-template-columns: 1fr 1fr; }
  .pf-review-summary > div { border-top: 1px solid var(--border); }
  .pf-review-summary > div:nth-child(2) { border-top: 0; }
  .pf-review-summary > div:nth-child(odd) { border-left: 0; }
  .pf-review-primary { grid-column: 1 / -1; border-top: 0 !important; }
}
@media (max-width: 620px) {
  .pf-header-top, .pf-header-actions, .pf-action-dock, .pf-action-dock > div { align-items: stretch; flex-direction: column; }
  .pf-header-actions { width: 100%; }
  .pf-status { justify-content: center; }
  .pf-month { justify-content: space-between; }
  .pf-month input { width: auto; }
  .pf-section-head { flex-wrap: wrap; }
  .pf-save-state, .pf-section-head > .run-badge { margin-left: 35px; }
  .pf-action-dock { position: relative; bottom: auto; }
  .pf-action-dock > div { display: grid; }
  .pf-budget-check > div { position: static; margin-top: 10px; }
  .pf-disclosure > summary { grid-template-columns: 34px minmax(0, 1fr) 18px; }
  .pf-disclosure-value { grid-column: 2; grid-row: 2; justify-items: start; text-align: left; }
  .pf-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .pf-review-summary { grid-template-columns: 1fr; }
  .pf-review-summary > div { border-left: 0; border-top: 1px solid var(--border) !important; }
  .pf-review-primary { grid-column: auto; border-top: 0 !important; }
}