/* Routine workspace presentation. Shared site styles and domain code stay separate. */
main.compare-page { max-width: 92rem; }
.compare-header { margin-block: 1rem; padding-block: .5rem .75rem; }
.compare-header h1 { max-width: none; font-size: clamp(1.8rem, 3vw, 2.65rem); margin-block: 0 .25rem; }
.compare-header .eyebrow { margin-block: 0 .25rem; }
.compare-header .lede { margin-block: 0 .5rem; font-size: 1.1rem; }
.compare-header .note { max-width: 80rem; margin-block: .5rem; padding-block: .25rem; font-size: .8rem; }
.compare-toolbar { gap: .5rem; padding-block: .5rem; margin: 0; }
.compare-page button, .compare-page input, .compare-page select { border-radius: .3rem; }
.compare-page button { min-height: 2rem; }
.compare-page .tool-button, .compare-page .metric-switcher button, .compare-page .view-switcher button { padding: .4rem .65rem; font-size: .85rem; }
.save-status { font-size: .8rem; }
.routine-editor { margin: .5rem 0 1.25rem; border-radius: .5rem; }
.routine-editor > summary { padding: .6rem .85rem; }
.routine-editor-content { padding: 0 .75rem .75rem; }
.builder-helper { margin: .2rem 0 .65rem; padding-block: .2rem; font-size: .8rem; }
.routine-grid, .routine-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.routine-builder { border: 0; padding: 0; }
.routine-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: center; }
.routine-heading > label:first-child { grid-column: 1; font-size: .8rem; }
.routine-heading .custom-name-label { grid-column: 2; grid-row: 1; margin: 0; font-size: .8rem; }
.routine-heading .routine-source { grid-column: 1; grid-row: 2; }
.routine-name-editor { grid-column: 2; grid-row: 2 / span 2; align-self: start; max-width: 16rem; }
.routine-name-editor summary { padding: .5rem; cursor: pointer; font-size: .8rem; }
.routine-name-editor label { display: block; font-size: .75rem; }
.routine-name-editor input { width: 100%; }
.routine-caption { grid-column: 1; margin: 0; font-size: .85rem; font-weight: 600; }
.routine-source, .routine-name { min-width: 0; padding: .4rem .5rem; font-size: .95rem; height: 2.5rem; border-width: 1px; }
.routine-total { grid-column: 1 / -1; font-size: .78rem; }
.scope-field { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .8rem; }
.scope-field select { width: auto; max-width: 100%; min-width: 0; padding: .3rem .5rem; }
.routine-day-toolbar { margin: .5rem 0; gap: .4rem; }
.routine-day-toolbar .text-button { padding: .25rem .45rem; font-size: .8rem; }
.routine-days { align-items: start; gap: .75rem; }
.day-card { border-radius: .4rem; overflow: clip; }
.day-header { grid-template-columns: auto minmax(0, 1fr) auto; padding: .5rem; gap: .4rem; background: var(--surface); }
.day-actions { grid-column: 3; gap: .2rem; }
.day-name { padding: .2rem .35rem; border-color: transparent; background: transparent; font-size: .95rem; }
.day-name:hover, .day-name:focus { border-color: var(--border); background: var(--background); }
.day-title-block p { font-size: .72rem; margin-top: .1rem; }
.day-content { padding: 0 .5rem .5rem; }
.routine-items { gap: 0; }
.routine-item { padding: .6rem 0; gap: .35rem .5rem; border: 0; border-bottom: 1px solid var(--border); }
.routine-item-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.routine-item-copy small { flex-basis: 100%; }
.routine-item-copy strong { font-size: .9rem; }
.routine-item-copy span { font-size: .72rem; }
.reorder-actions { gap: .2rem; }
.compare-page .icon-button { min-width: 2rem; min-height: 2rem; }
.set-list { display: table; width: 17rem; max-width: 100%; grid-column: 1 / -1; border-collapse: collapse; margin: .2rem 0 0; table-layout: fixed; }
.set-list thead { color: var(--muted); font-size: .7rem; }
.set-list th, .set-list td { padding: .15rem .3rem; text-align: left; border: 0; }
.set-list th:first-child, .set-list th:last-child { width: 2.5rem; }
.set-list tbody th { font-size: .8rem; font-weight: 500; }
.set-row { display: table-row; background: transparent; }
.set-row input { width: 100%; height: 2rem; padding: .2rem .4rem; font-size: .85rem; }
.compare-page .set-row .icon-button { min-width: 2rem; min-height: 2rem; }
.set-row input { appearance: textfield; }
.set-row input::-webkit-inner-spin-button, .set-row input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.add-set-button { padding: .25rem .45rem; margin: 0; min-height: 2rem; }
.load-warning { margin: 0; }
.routine-item.missing-load { padding-left: .4rem; }
.add-exercise-button { width: auto; max-width: 100%; margin: .5rem 0 0; padding: .4rem .7rem; font-size: .8rem; border-width: 1px; }
.empty-routine { padding: .75rem; margin-top: .5rem; font-size: .85rem; }
.compare-results { margin-top: 1rem; }
.compare-results h2 { font-size: 1.5rem; margin-bottom: .3rem; }
.compare-results .eyebrow { font-size: .7rem; }
#scale-note { font-size: .8rem; margin: .35rem 0 .75rem; max-width: none; }
.analysis-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.comparison-map-card { width: 100%; max-width: 36rem; margin: 0 auto; padding: .75rem; border-radius: .5rem; }
.comparison-map-card h3 { font-size: 1rem; margin: 0 0 .4rem; }
.comparison-map { min-height: 0; }
.comparison-map .anatomy-svg { width: 100%; max-height: 29rem; }
.map-legend { gap: .35rem .75rem; font-size: .7rem; margin-top: .5rem; }
.muscle-detail-panel { min-width: 0; }
.muscle-detail-panel h3 { font-size: 1rem; margin: 0; }
#table-note { margin: .25rem 0; font-size: .75rem; overflow-wrap: anywhere; }
.muscle-group-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-block: .5rem; }
.muscle-group-actions button { padding: .25rem .45rem; font-size: .75rem; }
#muscle-groups { display: grid; gap: .35rem; }
.muscle-group { border: 1px solid var(--border); border-radius: .3rem; overflow: clip; background: var(--surface); }
.muscle-group summary { cursor: pointer; padding: .5rem .65rem; font-size: .85rem; }
.muscle-group summary span { float: right; color: var(--muted); font-size: .75rem; }
.muscle-group summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.muscle-group .comparison-table { min-width: 0; table-layout: fixed; font-size: .8rem; }
.muscle-group .comparison-table th:first-child { width: 50%; }
.muscle-group .comparison-table th, .muscle-group .comparison-table td { padding: .35rem .5rem; overflow-wrap: anywhere; }
.muscle-group .comparison-table td, .muscle-group .comparison-table thead th:not(:first-child) { text-align: right; }
.muscle-group .comparison-table thead { font-size: .68rem; color: var(--muted); }
.muscle-emphasis { display: block; font-size: .65rem; font-weight: 400; color: var(--muted); border-left: 2px solid; padding-left: .3rem; margin-top: .1rem; }
.muscle-emphasis.emphasis-a { border-color: #bd5a00; }
.muscle-emphasis.emphasis-b { border-color: #3567b0; }
.comparison-summary, .important-limitation { margin-top: 1rem; padding: .75rem 1rem; border-radius: .4rem; }
.comparison-summary h2, .important-limitation h2 { font-size: 1rem; margin-bottom: .3rem; }
.comparison-summary p, .comparison-summary li, .important-limitation p { font-size: .85rem; }
.important-limitation p { margin-top: .25rem; }
.compare-cta { margin-top: 1.5rem; padding-block: 1rem; }
.compare-cta h2 { font-size: 1.2rem; }
.methodology { margin-top: 1rem; }
.exercise-picker .picker-shell { padding: 1rem; }
.exercise-picker .exercise-result { padding: .55rem .7rem; }

@media (min-width: 50rem) {
  #muscle-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 75rem) {
  .routine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routine-grid.is-single { grid-template-columns: minmax(0, 1fr); }
  .is-single .routine-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-single .routine-heading { max-width: 52rem; }
}
@media (max-width: 37.5rem) {
  .compare-header { margin-top: 1rem; }
  .compare-toolbar { gap: .5rem; }
  .compare-toolbar .metric-switcher { order: 2; width: 100%; }
  .metric-switcher button { flex: 1; }
  .save-status { margin-left: 0; }
  .routine-editor-content { padding-inline: .5rem; }
  .routine-heading { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .routine-heading .custom-name-label { grid-column: 1; grid-row: 3; margin-top: .25rem; }
  .routine-name-editor { grid-column: 1; grid-row: auto; }
  .day-header { grid-template-columns: auto minmax(0, 1fr); }
  .day-actions { grid-column: 2; }
  .compare-page button, .compare-page .icon-button, .compare-page .day-toggle { min-width: 2.5rem; min-height: 2.5rem; }
  .routine-item { grid-template-columns: minmax(0, 1fr) auto; }
  .routine-item-copy strong { font-size: .85rem; }
  .set-list { width: 100%; }
  .set-list th:first-child, .set-list th:last-child { width: 3rem; }
  .set-row label { font-size: .7rem; }
  .set-row input { height: 2.5rem; font-size: 1rem; }
  .compare-page .set-row .icon-button { min-width: 2.5rem; min-height: 2.5rem; }
  .muscle-group summary { padding-block: .65rem; }
  .muscle-group .comparison-table th, .muscle-group .comparison-table td { padding-inline: .3rem; }
  .muscle-group .comparison-table th:first-child { width: 43%; }
  .routine-source, .routine-name, .day-name, .scope-field select { font-size: 1rem; }
}

.mode-switcher { display: flex; flex-wrap: wrap; gap: .25rem; }
.mode-switcher button { padding: .45rem .7rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.mode-switcher button[aria-pressed="true"] { background: var(--accent); color: var(--button-text); border-color: var(--accent); }
.metric-explanation { font-size: .9rem; max-width: 70rem; line-height: 1.5; }
.analysis-disclosure { padding: .75rem; border: 1px solid var(--border); border-radius: .4rem; }
.analysis-disclosure > summary { font-weight: 700; cursor: pointer; padding: .25rem; }
.analysis-disclosure > summary:focus-visible { outline: 3px solid var(--focus); }
.comparison-map-card { max-width: 32rem; }
.routine-map-panel { min-width: 0; }
.compare-results { margin-bottom: 1rem; }
@media (min-width: 75rem) {
  .analysis-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .analysis-layout #muscle-groups { grid-template-columns: minmax(0, 1fr); }
}

/* Match the comparison map's orange A / blue B distinction, with labels retained. */
.routine-grid:not(.is-single) .routine-builder[data-routine="0"] { --routine-accent: #bd5a00; }
.routine-grid:not(.is-single) .routine-builder[data-routine="1"] { --routine-accent: #3567b0; }
.routine-grid:not(.is-single) .routine-builder {
  border-top: 4px solid var(--routine-accent);
  border-radius: .4rem;
  padding: .65rem;
  background: color-mix(in srgb, var(--routine-accent) 9%, var(--surface));
}
.routine-grid:not(.is-single) .day-header {
  background: color-mix(in srgb, var(--routine-accent) 7%, var(--surface));
}