/* Shared primitives, loaded after V4 styles. Screen composition stays in views. */
html { scroll-padding-block-end: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-5)); }
body.byke-shell {
  max-width: var(--content-max);
  border: 0;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-5));
  font-family: var(--font-body);
  line-height: 1.5;
}
.byke-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.byke-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.byke-shell header.top { padding: var(--space-5) var(--page-gutter); border: 0; background: var(--bg-primary); }
.byke-brand { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; color: var(--text-primary); text-decoration: none; }
.byke-brand::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 22px; background: var(--signal-red); opacity: 0; }
body[data-living-state='training'] .byke-brand::after { opacity: 1; animation: byke-pulse var(--motion-event) var(--ease-byke) 1; }
body[data-event] .byke-brand::after { animation: byke-strike var(--motion-event) var(--ease-byke); }
.byke-brand__name { font: 700 38px/.92 var(--font-display); letter-spacing: -.065em; }
.byke-brand__coach { font: 400 14px/1 var(--font-body); letter-spacing: -.025em; padding-right: 1px; }
.byke-brand:focus-visible { border-radius: var(--radius-sm); }
.byke-header-note { max-width: 12ch; margin: 0; color: var(--text-muted); font: 400 10px/1.5 var(--font-technical); letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.byke-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.byke-page-title { margin: 0; font: 700 var(--type-page)/1.08 var(--font-display); letter-spacing: -.04em; }
.byke-section-title { margin: 0; font: 600 var(--type-section)/1.2 var(--font-display); letter-spacing: -.025em; }
.byke-kicker, .kicker { color: var(--text-muted); font: 400 var(--type-micro)/1.4 var(--font-technical); letter-spacing: .12em; text-transform: uppercase; }
.byke-caption { margin: 0; color: var(--text-secondary); font: 400 var(--type-caption)/1.5 var(--font-body); }
.byke-copy { color: var(--text-secondary); font: 400 var(--type-body)/1.5 var(--font-body); }

/* Legacy button/input aliases retain their handlers, labels and focus behavior. */
.btn, .byke-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text-primary);
  font: 600 var(--type-body)/1.35 var(--font-body);
  letter-spacing: -.015em;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--motion-micro) var(--ease-byke), background var(--motion-micro), border-color var(--motion-micro);
}
.btn.accent, .byke-button--primary { background: var(--signal-red); border-color: var(--signal-red); color: var(--text-on-signal); }
.btn.ghost, .byke-button--secondary { background: transparent; border-color: var(--border-control); color: var(--text-primary); }
.byke-button--quiet { background: transparent; border-color: transparent; padding-inline: 0; justify-content: flex-start; }
.byke-button--full { width: 100%; }
.btn.sm { font-size: var(--type-caption); min-height: var(--touch-target); padding: var(--space-2) var(--space-3); }
.btn.big { min-height: 56px; font-size: var(--type-label); padding: var(--space-4) var(--space-5); letter-spacing: -.015em; }
.btn:disabled, .byke-button:disabled { opacity: .45; cursor: default; }
.btn:active:not(:disabled), .byke-button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.icon-btn, .byke-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--touch-target); height: var(--touch-target); padding: 0; color: var(--text-primary); background: transparent; border: 1px solid var(--border-control); border-radius: var(--radius-round); filter: none; cursor: pointer; }
.byke-icon-button--quiet { border-color: transparent; }
label { font-family: var(--font-body); font-size: var(--type-caption); line-height: 1.5; letter-spacing: 0; text-transform: none; }
input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea { min-height: var(--control-height); font-size: 16px; border-radius: var(--radius-sm); background: var(--bg-secondary); border-color: var(--border-control); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role='button']:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Open sections are the default; a panel is an explicit grouping choice. */
.byke-section { padding: var(--space-6) var(--page-gutter); }
.byke-section + .byke-section { padding-top: var(--space-3); }
.byke-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.byke-section-heading > * { min-width: 0; }
.byke-panel { padding: var(--space-5); background: var(--surface-1); border: 0; border-radius: var(--radius-md); }
.byke-panel > :first-child { margin-top: 0; }
.byke-panel > :last-child { margin-bottom: 0; }
.byke-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
.byke-stack { display: grid; gap: var(--space-4); }
.byke-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.byke-pair > *, .byke-stack > * { min-width: 0; }
.byke-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-secondary); }
.byke-hero__visual { display: block; overflow: hidden; aspect-ratio: 6 / 5; background: var(--surface-1); }
.byke-hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--image-position, 65% 45%); }
.byke-hero__body { position: relative; padding: var(--space-5); }
.byke-hero__title { max-width: 16ch; margin: var(--space-2) 0 var(--space-3); font: 700 var(--type-hero)/1.03 var(--font-display); letter-spacing: -.045em; overflow-wrap: break-word; }
.byke-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--text-secondary); font-size: var(--type-caption); }
.byke-hero__facts > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.byke-hero--overlay .byke-hero__body { position: absolute; inset: auto 0 0; background: var(--image-scrim); }
.byke-hero--overlay .byke-kicker { color: var(--text-secondary); }
.byke-hero--overlay .byke-hero__visual { min-height: 310px; }
.byke-metric { min-width: 0; }
.byke-metric__label { display: block; margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--type-caption); }
.byke-metric__value { display: block; font: 700 var(--type-metric)/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.byke-metric__unit { font-size: var(--type-caption); font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.byke-metric__context { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--type-caption); line-height: 1.4; }
.byke-metric--compact .byke-metric__value { font-size: 28px; }
.byke-metric--instrument .byke-metric__value { font-size: var(--type-instrument); }
.byke-evidence { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font: 400 var(--type-micro)/1.5 var(--font-technical); letter-spacing: .035em; }
.byke-evidence--future { border-bottom: 1px dashed currentColor; }
.byke-training-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); width: 100%; min-height: 76px; padding: var(--space-4) 0; border: 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); background: transparent; text-align: left; text-decoration: none; }
.byke-training-row--image { grid-template-columns: 72px minmax(0, 1fr) auto; }
.byke-training-row__image { width: 72px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.byke-training-row__title { display: block; margin: var(--space-1) 0; font: 600 var(--type-label)/1.3 var(--font-display); letter-spacing: -.015em; }
.byke-training-row__meta { display: block; color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.45; }
.byke-training-row__action { display: flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); }
.byke-progress { height: 4px; width: 100%; background: var(--surface-3); border-radius: var(--radius-none); overflow: hidden; }
.byke-progress > span { display: block; height: 100%; width: var(--progress, 0%); max-width: 100%; background: var(--text-primary); transition: width var(--motion-data) var(--ease-byke); }
.byke-progress--signal > span { background: var(--signal-red); }
.byke-notice, .byke-empty, .byke-error { padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-secondary); font-size: var(--type-body); line-height: 1.5; }
.byke-notice h3, .byke-empty h3, .byke-error h3 { margin: 0 0 var(--space-2); color: var(--text-primary); font-size: var(--type-label); line-height: 1.3; }
.byke-notice p, .byke-empty p, .byke-error p { margin: 0 0 var(--space-4); }
.byke-notice p:last-child, .byke-empty p:last-child, .byke-error p:last-child { margin-bottom: 0; }
.byke-notice--safety { border-left: 2px solid var(--signal-red); }
.byke-loading { min-height: 140px; padding: var(--space-5); color: var(--text-secondary); }
.byke-skeleton { display: block; height: 14px; width: 70%; margin-block: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); }
.byke-skeleton--title { width: 50%; height: 30px; }

/* The same control styling serves existing body tabs and new section selectors. */
.segment, .byke-segment { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--bg-primary); }
.segment button, .byke-segment button { flex: 1; min-width: 0; min-height: var(--touch-target); padding: var(--space-2); border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); font: 400 var(--type-caption)/1.3 var(--font-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.segment button[aria-pressed='true'], .byke-segment button[aria-pressed='true'] { background: var(--surface-3); color: var(--text-primary); font-weight: 600; }
.byke-shell nav.tabs { max-width: var(--content-max); min-height: var(--nav-height); background: var(--bg-primary); border-top: 1px solid var(--border-subtle); }
.byke-shell nav.tabs::before { display: block; top: 0; left: calc((var(--active-tab, 0) + .5) * 20% - 8px); width: 16px; height: 2px; background: var(--text-primary); transform: none; transition: left var(--motion-nav) var(--ease-byke); }
.byke-shell nav.tabs button { justify-content: center; align-items: center; gap: 5px; min-width: 0; min-height: var(--nav-height); padding: var(--space-2) var(--space-1); border: 0; color: var(--text-muted); font: 400 var(--type-micro)/1.2 var(--font-body); letter-spacing: 0; text-transform: none; }
.byke-shell nav.tabs button .byke-icon { width: 20px; height: 20px; }
.byke-shell nav.tabs button.active { color: var(--text-primary); font-weight: 600; }
.byke-shell nav.tabs button.active .byke-icon { stroke-width: 2; }
.byke-shell nav.tabs button .i { color: inherit; font: inherit; letter-spacing: inherit; }
.byke-shell nav.tabs button.active::after { display: none; }

@media (hover: hover) {
  .btn:hover:not(:disabled), .byke-button:hover:not(:disabled) { opacity: 1; background: var(--surface-3); }
  .btn.accent:hover:not(:disabled), .byke-button--primary:hover:not(:disabled) { background: var(--signal-red); border-color: var(--text-primary); }
  .btn.ghost:hover:not(:disabled), .byke-button--secondary:hover:not(:disabled) { background: transparent; border-color: var(--text-primary); }
  .byke-training-row:is(button, a):hover { background: var(--bg-secondary); }
}
@media (max-width: 379px) {
  .byke-hero__body, .byke-panel { padding: var(--space-4); }
  .byke-training-row--image { grid-template-columns: 60px minmax(0, 1fr) auto; gap: var(--space-3); }
  .byke-training-row__image { width: 60px; height: 60px; }
}
@media (min-width: 768px) {
  .byke-desktop-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
  .byke-desktop-grid > * { min-width: 0; }
  .byke-hero__visual { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .byke-button, .byke-progress > span, .byke-shell nav.tabs button { transition: none; }
  .byke-button:active:not(:disabled), .btn:active:not(:disabled) { transform: none; }
}