/* SOMA rendered UI contracts
   This file loads after style.css and owns cross-route interaction and
   compact-readability invariants. Component appearance stays in style.css. */

:root {
  --ui-touch-target: 44px;
  --ui-compact-label: 12px;
}

/* Semantic hiding must win over component display declarations. */
[hidden] {
  display: none !important;
}

/* One Program identity, one day navigator, one action bar. A one-day Program
   does not render a day tablist because there is no navigation choice. */
#view-programs .day-detail-header--actions-only .session-header-actions {
  width: 100%;
}

/* Older protected Program payloads may still contain their former carousel
   mount. The shared command bar is the only visible day navigator. */
#view-programs .profile-content > .weekly-carousel {
  display: none !important;
}

@media screen and (min-width: 721px) {
  #view-programs.programs-layout--single-day-custom .programs-hero {
    margin-block: var(--space-4);
    padding-block: clamp(var(--space-6), 3vw, var(--space-10));
  }

  #view-programs.programs-layout--single-day-custom .programs-hero__name {
    font-size: clamp(4.25rem, 8vw, 8rem);
  }

  #view-programs.programs-layout--single-day-custom .programs-hero__stat {
    min-width: 6.5rem;
    padding: var(--space-3) var(--space-4);
  }

  #view-programs.programs-layout--single-day-custom .programs-hero__stat-value {
    font-size: var(--text-2xl);
  }

}

.program-day-demo-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-left: 9px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border-hard));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

@media screen and (max-width: 720px) {
  #view-programs .container--wide > .page-header {
    margin-bottom: 14px;
    padding-block: 18px 10px;
  }

  #view-programs .container--wide > .page-header p {
    display: none;
  }

  #view-programs .profile-content:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  #view-programs .profile-content > [id$='-day-detail'] {
    order: 1;
  }

  #view-programs .profile-content > .alert {
    order: 2;
    margin-top: 16px;
  }
}

/* Catalog owns viewport-fixed filter sheets on compact screens. A retained
   route transform would otherwise make fixed sheets document-relative. */
#view-catalog.view.active {
  animation: none;
}

/* Closed drawers must not contribute their translated panel to document width. */
.briefing-drawer:not(.open) {
  display: none;
}

.briefing-drawer.open .briefing-drawer-panel {
  animation: ui-drawer-enter 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ui-drawer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Shared interaction floor for small controls. */
.tap-44 {
  min-width: var(--ui-touch-target);
  min-height: var(--ui-touch-target);
}

.main-nav .nav-btn {
  min-height: var(--ui-touch-target);
}

/* Persistent navigation exposes the five daily training destinations. Less
   frequent tools remain one deliberate step away in Explore instead of
   competing for equal prominence across the entire header. */
@media screen and (min-width: 1101px) {
  .site-header {
    overflow: visible;
  }

  .header-inner,
  .main-nav {
    min-width: 0;
  }

  .main-nav {
    overflow: visible;
  }
}

#view-programs .mode-btn {
  min-height: var(--ui-touch-target);
}

#view-progress .meas-field input {
  min-height: var(--ui-touch-target);
}

.persona-chip,
#view-catalog .progression-details summary,
#view-programs .ex-card__rest-start,
#view-programs .rest-duration-option {
  min-height: var(--ui-touch-target);
}

#view-programs .ex-card__rest-start,
#view-programs .rest-duration-option {
  min-width: var(--ui-touch-target);
}

@media screen and (max-width: 900px) {
  #view-dashboard .dash-readiness__heading > span,
  #view-catalog .card-muscle-tag,
  #view-catalog .exercise-card .badge,
  #view-catalog .muscle-label,
  #view-catalog .catalog-card__meta-label,
  #view-catalog .catalog-muscle-btn-label,
  #view-catalog .muscle-pick-group-title,
  #view-catalog .catalog-anatomy-details summary,
  #view-catalog .catalog-anatomy-details__hint,
  #view-catalog .catalog-anatomy-details .muscle-diagram__chip,
  #view-catalog .catalog-anatomy-details .muscle-diagram__list-term,
  #view-catalog .catalog-anatomy-details .muscle-diagram__list-def,
  #view-catalog .prog-step-index,
  #view-programs .skill-reference-card__eyebrow,
  #view-programs .day-detail-header .day-schedule-pill,
  #view-programs .day-detail-header .progress-context-chip,
  #view-programs .day-detail-header .pcc-week,
  #view-programs .session-guide-actions__label,
  #view-programs .program-guidance-card__index,
  #view-programs .cmd-briefing .cmd-label-lg,
  #view-programs .day-detail-header .day-label-sm,
  #view-programs .ex-card__metric-label,
  #view-programs .programs-hero__stat-label,
  #view-programs .session-block-header > .session-time-badge,
  #view-programs .session-hypertrophy > .session-block-header > .session-time-badge,
  #view-programs .session-block:not(.session-hypertrophy) > .session-block-header > .session-time-badge,
  #view-programs .ex-card__index,
  #view-programs .rest-duration-option,
  #view-programs .rest-duration-separator,
  #view-programs .rest-duration-unit,
  #view-programs .rest-duration-static,
  #view-timer .timer-workspace-eyebrow,
  #view-timer .timer-workspace-live span,
  #view-timer .timer-panel-heading > div > span,
  #view-timer .timer-multi-countdown-section > header span,
  #view-timer .timer-multi-section-actions > button,
  #view-timer .timer-multi-card__actions button,
  #view-timer .timer-multi-card__copy > span,
  #view-timer .timer-workspace-sound-picker .session-timer-sound-trigger span,
  #view-timer .timer-inline-control [data-timer-sound-test],
  #view-skills .skill-path__eyebrow,
  #view-skills .skill-path__count,
  #view-skills .skill-path__current span,
  #view-skills .reference-card-toggle__label small,
  #view-skills .reference-card-toggle__action,
  #view-flexibility .reference-card-toggle__label small,
  #view-flexibility .reference-card-toggle__action,
  #view-science .science-kicker,
  #view-science .readiness-chart__rail span,
  #view-science .readiness-chart__axis,
  #view-science .readiness-chart__legend,
  #view-science .readiness-signal > span,
  #view-science .volume-landmark > span,
  .site-footer__tagline {
    font-size: var(--ui-compact-label);
  }

  #view-catalog .muscle-label.secondary,
  #view-catalog .catalog-card__meta-label,
  #view-catalog .catalog-anatomy-details__hint,
  #view-catalog .catalog-anatomy-details .muscle-diagram__list-term,
  #view-programs .skill-reference-card__eyebrow,
  #view-programs .session-guide-actions__label,
  #view-programs .ex-card__metric-label,
  #view-programs .rest-duration-separator,
  #view-programs .rest-duration-unit,
  #view-programs .rest-duration-static {
    color: var(--ink-secondary);
  }

  #view-catalog .card-muscle-row,
  #view-catalog .catalog-card__equipment {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  #view-programs .ex-card__index > span {
    display: none;
  }

  #view-programs .rest-duration-option.is-selected {
    color: var(--ink-primary);
  }

  #view-timer .timer-multi-section-actions > button {
    white-space: nowrap;
  }

  .session-timer-stepper > button,
  #view-skills .prog-step .skill-mark-btn,
  #view-catalog .prog-step-pill,
  .section-jump__arrow,
  #view-programs .weekly-carousel-arrow {
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  #view-progress :is(
    .progress-section-meta,
    .capability-progress-card__label,
    .capability-progress-card__trend,
    .heatmap-legend,
    .vol-target,
    .vol-legend,
    .weekly-exposure__metrics article > span,
    .weekly-exposure__metrics article > small,
    .weekly-exposure__muscles header p,
    .exposure-muscle-row,
    .training-calendar__weekdays span,
    .training-calendar__day,
    .training-calendar__day i,
    .training-day-detail > header span,
    .training-day-detail > header > strong,
    .training-day-detail button small,
    .conditioning-history time,
    .program-archive-compare nav button span,
    .program-archive-compare section > div,
    .program-archive-compare section > div > span:first-child,
    .pr-table th,
    .pr-chip
  ) {
    font-size: var(--ui-compact-label);
  }

  #view-progress :is(
    .meas-field input,
    .measurements-form .btn-primary,
    .data-mgmt button,
    .data-mgmt label,
    .program-archive-compare nav button
  ) {
    min-height: var(--ui-touch-target);
  }
}

@media screen and (max-width: 768px) {
  #view-programs .day-detail-header > .session-header-actions > :is(
    .session-edit-program,
    .session-fit-launch,
    .session-start-btn,
    .session-timer-launch
  ) {
    height: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-compact-label);
    text-align: center;
  }

  .section-jump__btn,
  #view-skills .skill-mark-btn,
  #view-programs .session-log-toggle,
  #view-programs .session-log-widget .session-log-toggle,
  #view-programs .ex-card__rest-pill,
  #view-programs .rest-divider__pill,
  #view-programs .session-block-header[role='button'],
  .muscle-pick {
    min-height: var(--ui-touch-target);
  }

  .section-help {
    display: inline-flex;
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    cursor: pointer;
  }

  .section-jump {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }

  .section-jump-shell .section-jump {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .nav-drawer-pref .theme-switch__opt,
  .nav-drawer-pref .theme-switch::before,
  .nav-drawer-pref .model-switch--drawer::before,
  .nav-drawer-pref .model-switch--drawer .model-switch__opt {
    width: 62px;
    height: var(--ui-touch-target);
  }

  .nav-drawer-pref .theme-switch[data-theme='light']::before,
  .nav-drawer-pref .model-switch--drawer[data-model='female']::before {
    transform: translateX(62px);
  }

  #view-programs .weekly-carousel-arrow,
  .section-jump__arrow {
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
  }

  /* Catalog filter panels become viewport-bound sheets on phones. The panel
     owns one scroll region so its first and last choices always remain reachable. */
  #view-catalog .catalog-muscle-panel.open {
    position: fixed;
    z-index: 2080;
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: min(78dvh, 620px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-color: var(--border-hard);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    scrollbar-gutter: stable;
  }

  /* The workout logger is a one-hand training surface. Keep visible controls
     compact while their actual touch geometry follows the shared 44 px floor. */
  .session-log-overlay .session-log-unit-toggle {
    width: 132px;
  }

  .session-log-overlay .session-log-unit-toggle button,
  .session-log-overlay .set-num,
  .session-log-overlay .set-side,
  .session-log-overlay .stepper-btn,
  .session-log-overlay .set-delete-handle,
  .session-log-overlay .set-add,
  .session-log-overlay .session-log-date-control,
  .session-log-overlay .session-log-form input.session-log-date {
    min-width: var(--ui-touch-target);
    min-height: var(--ui-touch-target);
  }

  .session-log-overlay .set-num,
  .session-log-overlay .set-side {
    width: var(--ui-touch-target);
    height: var(--ui-touch-target);
  }

  .session-log-overlay .stepper-btn {
    width: var(--ui-touch-target);
    flex-basis: var(--ui-touch-target);
  }

  .session-log-overlay .set-add {
    min-height: var(--ui-touch-target);
  }

  #view-progress .training-calendar {
    overflow-x: visible;
  }

  #view-progress :is(.training-calendar__weekdays, .training-calendar__grid) {
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  #view-progress .training-calendar__day {
    width: auto;
    min-width: 0;
    min-height: var(--ui-touch-target);
  }

  #view-progress .pr-table {
    display: block;
    width: 100%;
  }

  #view-progress .pr-table thead {
    display: none;
  }

  #view-progress .pr-table tbody {
    display: grid;
    gap: 8px;
  }

  #view-progress .pr-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
  }

  #view-progress .pr-table td {
    display: grid;
    grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  #view-progress .pr-table td::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: var(--ui-compact-label);
    font-weight: 800;
    text-transform: uppercase;
  }

  #view-progress .pr-table td {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 380px) {
  .session-log-overlay .set-rows[data-layout='loaded'] .set-rows-heading {
    display: none;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-row__content {
    grid-template-columns: var(--ui-touch-target) minmax(0, 1fr);
    gap: 10px;
    padding: 10px var(--ui-touch-target) 10px 8px;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--num {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--load,
  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--metric {
    grid-column: 2;
    width: 100%;
    justify-self: stretch;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--load { grid-row: 1; }
  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--metric { grid-row: 2; }
  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--effort {
    grid-column: 1;
    grid-row: 2;
    width: var(--ui-touch-target);
    align-self: end;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] :is(.set-field--load, .set-field--metric, .set-field--effort) > .set-field-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 4px !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    color: var(--ink-muted);
    font-size: var(--ui-compact-label);
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--effort > .set-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .effort-trigger {
    width: var(--ui-touch-target);
    min-width: var(--ui-touch-target);
    padding: 0;
    grid-template-columns: 20px;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .effort-trigger-chevron {
    display: none;
  }

  .session-log-overlay .set-rows[data-layout='loaded'] .set-field--prev {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

@media screen and (max-width: 480px) {
  #view-timer .timer-mode-tabs > button {
    min-height: 48px;
  }

  #view-timer .timer-mode-tabs strong {
    font-size: var(--ui-compact-label);
  }

  #view-timer .timer-multi-countdown-section > header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  #view-timer .timer-multi-countdown-section > header > div > span {
    display: none;
  }

  #view-timer .timer-multi-section-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Logger quantities use the same direct wheel interaction as Timer values.
   The closed control stays compact, while the open wheel owns the larger edit
   surface and its explicit adjustment buttons. */
.session-log-overlay .stepper--quantity-wheel {
  position: relative;
  width: min(100%, 140px);
  max-width: 140px;
  overflow: hidden;
  justify-self: start;
}

.session-log-overlay .stepper--quantity-wheel.is-wheel-open {
  z-index: 126;
  overflow: visible;
}

.session-log-overlay .stepper--quantity-wheel .set-input {
  width: 100%;
  min-width: 0;
  padding-inline: 12px;
  border-inline: 0;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.session-log-overlay .set-row:has(.stepper--quantity-wheel.is-wheel-open),
.session-log-overlay .set-row__content:has(.stepper--quantity-wheel.is-wheel-open) {
  z-index: 126;
  overflow: visible;
}

.session-log-overlay .set-row:has(.stepper--quantity-wheel.is-wheel-open) .set-delete-handle {
  pointer-events: none;
}

@media screen and (min-width: 700px) {
  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) {
    grid-template-columns: minmax(112px, 140px) minmax(150px, 190px);
    justify-content: start;
  }

  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) .set-field--metric {
    width: 140px;
  }

  .session-log-overlay .set-row__controls:not(:has(.set-field--load)) .set-field--effort {
    width: min(100%, 190px);
  }
}

@media screen and (max-width: 699.98px) {
  .session-log-overlay .set-rows[data-layout='simple'] :is(.set-rows-heading, .set-row__content) {
    grid-template-columns: var(--ui-touch-target) minmax(104px, 132px) minmax(68px, 1fr);
  }

  .session-log-overlay .set-rows[data-layout='simple'] .set-field--metric {
    width: min(100%, 132px);
    justify-self: start;
  }

  .session-log-overlay .set-rows[data-layout='simple'] .stepper--quantity-wheel {
    width: min(100%, 132px);
  }
}

@media screen and (max-width: 380px) {
  .session-log-overlay .set-rows[data-layout='simple'] :is(.set-rows-heading, .set-row__content) {
    grid-template-columns: var(--ui-touch-target) minmax(96px, 120px) minmax(60px, 1fr);
  }

  .session-log-overlay .set-rows[data-layout='simple'] .stepper--quantity-wheel {
    width: min(100%, 120px);
  }
}