/* Shared screen typography. Keep the navigation and exported previews on their own scales. */
@media screen {
  :is(body.programming-app, body.planner-app, body.staging-app, body.coastal-home, body.coastal-clients) {
    --cf-font-size-100: 0.75rem;
    --cf-font-size-200: 0.8125rem;
    --cf-font-size-300: 0.875rem;
    --cf-font-size-400: 1rem;
    --cf-font-size-500: 1.125rem;
    --cf-font-size-600: 1.5rem;
    --cf-font-size-700: 1.75rem;
    /* Resolve aliases here so desktop-only root overrides cannot change the scale. */
    --text-small: var(--cf-font-size-100);
    --text-secondary: var(--cf-font-size-200);
    --text-base: var(--cf-font-size-300);
    --text-emphasis: var(--cf-font-size-400);
    --text-section: var(--cf-font-size-500);
    --text-heading: var(--cf-font-size-600);
    --text-display: var(--cf-font-size-700);
    font-size: var(--text-base);
    line-height: 1.5;
  }
}

@media screen {
  /* Side-by-side sessions use the shared menu's compact text hierarchy. */
  body.programming-app[data-flow-view="build"] .programme-build-pane {
    --text-small: 0.6875rem;
    --text-secondary: var(--cf-font-size-100);
    --text-base: var(--cf-font-size-200);
    --text-emphasis: var(--cf-font-size-300);
    --text-section: 0.9375rem;
    font-size: var(--text-base);
    line-height: 1.4;
  }

  body.programming-app[data-flow-view="build"] .builder-session-column > header h3 {
    font-size: var(--text-section);
    font-weight: 600;
    line-height: 1.3;
  }

  body.programming-app[data-flow-view="build"] .programme-build-pane label {
    font-size: var(--text-small);
    font-weight: 500;
  }

  body.programming-app[data-flow-view="build"] .programme-build-pane :is(input, select, textarea) {
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
  }

  /* Programming tables retain readable columns and local horizontal scrolling. */
  body.programming-app:not([data-app-route="client"]):not([data-app-route="gym"]) {
    --progress-week-width: 260px;
  }

  body.programming-app .progression-range-control input,
  body.programming-app .progression-note-box textarea,
  body.programming-app .base-value,
  body.programming-app .review-table td,
  body.programming-app .version-item,
  body.programming-app .client-finder-status,
  body.programming-app .auth-detail,
  body.programming-app .workflow-brief,
  body.programming-app .session-column-actions button,
  body.programming-app .workflow-review-table pre,
  body.programming-app .workflow-review-table thead th,
  body.programming-app .workflow-review-table tbody th,
  body.programming-app .workflow-review-empty {
    font-size: var(--text-base);
  }

  body.programming-app .analytics-bar-scale,
  body.programming-app .programming-brand small,
  body.programming-app .save-state,
  body.programming-app .session-overview-field,
  body.programming-app .review-stat span,
  body.programming-app .review-table th,
  body.programming-app .version-history header span,
  body.programming-app .client-finder-result small,
  body.programming-app .client-finder-result code,
  body.programming-app .client-finder-result em {
    font-size: var(--text-small);
  }

  body.programming-app .review-session h2,
  body.programming-app .version-history h2,
  body.programming-app .programme-dialog h2 {
    font-size: var(--text-section);
  }

  body.programming-app .session-column-actions,
  body.programming-app .review-version-actions,
  body.programming-app .progression-session-toolbar {
    flex-wrap: wrap;
  }

  /* Both calendars share the same readable controls, labels and editor fields. */
  .planner-app :is(.planner-shell, .manager-shell, dialog) label,
  .planner-app #editor-fields label,
  .planner-app :is(.filter-label, .field-note, .duration-note, .save-strip,
    .calendar-help, .planner-footer, .warnings, .legend, .source-link,
    .copy-note, .previous-pattern-week, .progression-paging, .header-label),
  .planner-app .plan-toolbar p,
  .planner-app .lane-label > span,
  .planner-app .lane-label .programme-name,
  .planner-app .event-track-picker legend,
  .planner-app .track-choice small,
  .planner-app .event-track-option small,
  .planner-app .progression-scroll small,
  .planner-app .day-session > span,
  .planner-app .progression-rest-day,
  .planner-app #editor-fields .weekday-session-count {
    font-size: var(--text-small);
  }

  .planner-app :is(.planner-shell, .manager-shell, dialog) :is(input, select, textarea),
  .planner-app #editor-fields :is(input, select, textarea),
  .planner-app #track-filter > summary,
  .planner-app :is(.add-in-lane, .track-label),
  .planner-app .track-filter-actions button,
  .planner-app .track-choice strong,
  .planner-app .event-track-option strong,
  .planner-app #undo-resize {
    font-size: var(--text-base);
  }

  .planner-app :is(.planner-heading h1, .manager-heading h1) {
    font-size: var(--text-display);
  }

  .planner-app :is(.planner-heading h2, .editor-heading h2) {
    font-size: var(--text-heading);
  }

  .planner-app #editor-fields h3 {
    font-size: var(--text-section);
  }

  .planner-app .eyebrow,
  .planner-app .month-axis > span,
  .planner-app .week-axis small,
  .planner-app .week-axis strong,
  .planner-app .day-week-axis > span {
    font-size: var(--text-small);
  }

  /* Tiles keep their existing lane geometry across screen sizes. */
  .planner-app .calendar-item {
    font-size: var(--text-base);
    line-height: 1.2;
  }

  .planner-app .calendar-item > span,
  .planner-app .calendar-item > .event-tracks,
  .planner-app .calendar-item .block-open > span,
  .planner-app .calendar-item .block-open > .block-emphasis,
  .planner-app .block-details > .block-emphasis,
  .planner-app .block-details > .block-dates,
  .planner-app .drag-preview {
    font-size: var(--text-small);
    line-height: 1.2;
  }

  .planner-app .calendar-item .block-open > .block-preview {
    font-size: inherit;
  }

  .planner-app .block-details > strong {
    font-size: var(--text-base);
    line-height: 1.2;
  }

  .planner-app .progression-scroll table {
    min-width: 1120px;
    font-size: var(--text-small);
  }

  /* Legacy dense field rules use !important, so replace only those font sizes. */
  .planner-app .progression-scroll textarea,
  .planner-app .progression-scroll .weekday-session-count select {
    font-size: var(--text-base) !important;
  }

  /* Mobile controls stay legible without automatic browser zoom on focus. */
  @media (max-width: 760px) {
    body.programming-app:not([data-app-route="client"]):not([data-app-route="gym"])
      :is(.app-shell, .auth-gate, .modal-backdrop, .programme-dialog) :is(input, select, textarea):not(:where(.client-phone *, .gym-tv *)),
    .planner-app :is(.planner-shell, .manager-shell, dialog) :is(input, select, textarea),
    .planner-app #editor-fields :is(input, select, textarea) {
      font-size: 16px;
    }

    .planner-app .progression-scroll textarea,
    .planner-app .progression-scroll .weekday-session-count select {
      font-size: 16px !important;
    }
  }
}

/* Home, uploader and client content use the common scale without changing navigation. */
@media screen {
  body.coastal-home,
  body.coastal-clients,
  body.staging-app {
    font-size: var(--text-base);
    line-height: 1.5;
  }

  body.coastal-home main h1,
  body.coastal-clients .shell h1 {
    font-size: var(--text-display);
    line-height: 1.25;
  }

  body.coastal-home main h2,
  body.coastal-clients .shell h2,
  body.coastal-clients .report-preview-header h2 {
    font-size: var(--text-heading);
    line-height: 1.3;
  }

  body.coastal-clients .view-heading h3,
  body.coastal-clients .analysis-heading h3,
  body.coastal-clients .dialog-heading h3 {
    font-size: var(--text-section);
    line-height: 1.4;
  }

  body.coastal-clients .tile-heading h4,
  body.coastal-clients .training-day-heading h3,
  body.coastal-clients .training-component h4,
  body.coastal-clients .dashboard-empty h4 {
    font-size: var(--text-emphasis);
    line-height: 1.4;
  }

  body.coastal-home .home-intro,
  body.coastal-home .upcoming-list li > div,
  body.coastal-home .workspace-links a,
  body.coastal-home .client-directory a,
  body.coastal-clients .hero p,
  body.coastal-clients .view-heading p,
  body.coastal-clients .analysis-heading p,
  body.coastal-clients .detail-row > strong,
  body.coastal-clients .sets-block li,
  body.coastal-clients .training-note p {
    font-size: var(--text-base);
    line-height: 1.5;
  }

  body.coastal-home main input,
  body.coastal-home main button,
  body.coastal-clients .shell input,
  body.coastal-clients .shell select,
  body.coastal-clients .shell textarea,
  body.coastal-clients dialog input,
  body.coastal-clients dialog select,
  body.coastal-clients dialog textarea {
    font-size: var(--text-base);
    line-height: 1.4;
  }

  body.coastal-home .home-brand,
  body.coastal-home .home-eyebrow,
  body.coastal-home .section-kicker,
  body.coastal-home .window-label,
  body.coastal-home .workspace-links .action-number,
  body.coastal-home .programme-columns,
  body.coastal-home .programme-client,
  body.coastal-home .mobile-label {
    font-size: var(--text-small);
    line-height: 1.4;
  }

  body.coastal-home #home-date,
  body.coastal-home .home-metrics span,
  body.coastal-home .programme-summary span,
  body.coastal-home .programme-secondary,
  body.coastal-home .section-heading > p,
  body.coastal-home .section-heading label,
  body.coastal-home .overview-heading a,
  body.coastal-home .panel-description,
  body.coastal-home .schedule-note,
  body.coastal-home .event-date,
  body.coastal-home .event-label,
  body.coastal-home .workspace-links a > div > span,
  body.coastal-home .programme-filters button,
  body.coastal-home #programme-count,
  body.coastal-home .client-directory li span,
  body.coastal-home #client-status,
  body.coastal-home .empty-state {
    font-size: var(--text-secondary);
    line-height: 1.5;
  }

  /* Client labels and table headings remain secondary to values, but readable. */
  body.coastal-clients .eyebrow,
  body.coastal-clients .step,
  body.coastal-clients .status,
  body.coastal-clients .metric span,
  body.coastal-clients .selection-count,
  body.coastal-clients .tile-heading span,
  body.coastal-clients .tile-series-head,
  body.coastal-clients .tile-exercise-picker legend span,
  body.coastal-clients .movement-summary thead th,
  body.coastal-clients .detail-stats thead th,
  body.coastal-clients .detail-entries th,
  body.coastal-clients .training-source,
  body.coastal-clients .report-preview-header span,
  body.coastal-clients .report-progress-values thead th {
    font-size: var(--text-small);
    line-height: 1.4;
  }

  body.coastal-clients label,
  body.coastal-clients legend,
  body.coastal-clients .movement-picker-control,
  body.coastal-clients .movement-search-label,
  body.coastal-clients .message,
  body.coastal-clients .guidance,
  body.coastal-clients .limit-note,
  body.coastal-clients .chart-note,
  body.coastal-clients .tile-exercise-list,
  body.coastal-clients .tile-series-row,
  body.coastal-clients .tile-footer,
  body.coastal-clients .text-button,
  body.coastal-clients .filter-chip,
  body.coastal-clients .section-tab,
  body.coastal-clients .review-period,
  body.coastal-clients .training-day-heading time,
  body.coastal-clients .result-source-context,
  body.coastal-clients .training-component h5,
  body.coastal-clients .detail-row > span,
  body.coastal-clients .training-note strong,
  body.coastal-clients .not-completed,
  body.coastal-clients .empty-summary,
  body.coastal-clients .empty-movements,
  body.coastal-clients .mini-chart-empty,
  body.coastal-clients .sidebar-safety,
  body.coastal-clients .privacy-note,
  body.coastal-clients .dialog-heading p,
  body.coastal-clients .movement-summary table,
  body.coastal-clients .detail-stats table,
  body.coastal-clients .detail-entries table,
  body.coastal-clients .report-preview-header p,
  body.coastal-clients .report-narrative p,
  body.coastal-clients .report-athlete-notes p,
  body.coastal-clients .report-progress-item span,
  body.coastal-clients .report-progress-values table,
  body.coastal-clients .report-preview footer {
    font-size: var(--text-secondary);
    line-height: 1.5;
  }

  body.coastal-clients .report-narrative h3,
  body.coastal-clients .report-progress > h3,
  body.coastal-clients .report-athlete-notes h3,
  body.coastal-clients .report-progress-item h4 {
    font-size: var(--text-base);
    line-height: 1.4;
  }

  body.coastal-clients .range-preset,
  body.coastal-clients .workspace-nav {
    font-size: var(--text-secondary);
  }

  /* The common cf tokens cover uploader UI; these legacy fields use literal sizes. */
  body.staging-app .multi-week-source,
  body.staging-app .section-upload-preview {
    font-size: var(--text-base);
    line-height: 1.5;
  }

  body.staging-app .source-disclosure pre,
  body.staging-app .upload-safety-context dd,
  body.staging-app .upload-safety-summary pre,
  body.staging-app .wod-details pre,
  body.staging-app .movement-match-id,
  body.staging-app .upload-safety-target code,
  body.staging-app .movement-finder-result code,
  body.staging-app .wod-verification-card code,
  body.staging-app .wod-component code,
  body.staging-app .session-count-field,
  body.staging-app .week-move-preview,
  body.staging-app .review-notes-empty,
  body.staging-app .review-technical,
  body.staging-app .consistency-issue {
    font-size: var(--text-secondary);
    line-height: 1.5;
  }

  body.staging-app .review-day-tab em {
    font-size: var(--text-small);
    line-height: 1.4;
  }

  body.staging-app .review-panel-title {
    font-size: var(--text-section);
    line-height: 1.4;
  }
}

@media screen and (max-width: 760px) {
  body.coastal-home main input,
  body.coastal-clients .shell input,
  body.coastal-clients .shell select,
  body.coastal-clients .shell textarea,
  body.coastal-clients dialog input,
  body.coastal-clients dialog select,
  body.coastal-clients dialog textarea,
  body.staging-app input,
  body.staging-app select,
  body.staging-app textarea,
  body.staging-app .multi-week-source {
    font-size: 16px;
  }
}

@media screen {
  /* The coach workspace scale must not resize embedded device or export previews. */
  .programming-app :is(.client-phone, .gym-tv, .pdf-export) {
    --cf-font-size-100: 10px;
    --cf-font-size-200: 11px;
    --cf-font-size-300: 12px;
    --cf-font-size-400: 13px;
    --cf-font-size-500: 15px;
    --cf-font-size-600: 18px;
    --cf-font-size-700: 21px;
    --text-small: 10px;
    --text-secondary: 11px;
    --text-base: 12px;
    --text-emphasis: 13px;
    --text-section: 15px;
    --text-heading: 18px;
    --text-display: 21px;
    line-height: 1.45;
  }

  .programming-app :is(.client-phone, .pdf-export) {
    font-size: 12px;
  }

  /* Match the existing wide-screen preview metadata treatment. */
  @media (min-width: 1600px) {
    .programming-app :is(.client-phone, .gym-tv, .pdf-export) {
      --text-small: 11px;
      --text-secondary: 12px;
    }
  }
}