/* ═══════════════════════════════════════════════════════
   HubFlow — Exercise Enhanced Styles
   Elevates exercise pages to match guide-level visual
   quality: richer backgrounds, stronger elevation,
   refined spacing and card treatments
   ═══════════════════════════════════════════════════════ */

/* ─── ENHANCED BACKGROUND ─── */
html {
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(37, 99, 235, .08) 0%, rgba(37, 99, 235, .03) 40%, transparent 64%),
    radial-gradient(620px 460px at 100% 4%, rgba(37, 99, 235, .05) 0%, transparent 58%),
    linear-gradient(180deg, var(--lp-bg) 0%, #F8F4EE 55%, #F0EBE3 100%);
  background-attachment: fixed;
  min-height: 100%;
}
html[data-theme="dark"] {
  background: var(--lp-bg);
  background-attachment: fixed;
}

/* ─── BODY ENHANCEMENTS ─── */
body {
  background: transparent !important;
  position: relative;
  opacity: 0;
}
body.shell-ready {
  opacity: 1;
}
/* Fallback: reveal after 600ms even if exercise-shell.js fails */
@keyframes shell-fallback { to { opacity: 1; } }
body:not(.shell-ready) {
  animation: shell-fallback 0s 600ms forwards;
}
/* Reduced motion: skip the hide/reveal entirely */
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1 !important; }
}

/* Subtle dot pattern overlay */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(rgba(37, 99, 235, .04) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 22%, #000 0%, transparent 80%);
}
[data-theme="dark"] body::after { display: none; }

/* ─── TOP BAR REFINEMENT ─── */
.top-bar {
  position: relative;
  z-index: 1;
  background: var(--lp-surface);
  padding: var(--lp-header-pad-y) var(--lp-header-pad-x);
  margin-bottom: 0;
  border-bottom: 1px solid var(--lp-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: var(--lp-header-height);
  min-height: var(--lp-header-height);
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Hoisted to body by exercise-shell.js — stay aligned with main column (sidebar padding) */
body > .top-bar {
  width: 100%;
  margin-left: 0;
}

.top-bar__start,
.top-bar__end {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.top-bar__end {
  gap: 6px;
  justify-content: flex-end;
  margin-left: auto;
}

.top-bar > a.lp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top-bar > a.lp-icon-btn .lp-nav-svg {
  width: 18px;
  height: 18px;
}

.learnflow-signature {
  font-family: var(--lp-font-display);
  font-size: var(--lp-header-title-size);
  font-weight: var(--lp-header-title-weight);
  letter-spacing: var(--lp-header-title-tracking);
  line-height: var(--lp-header-title-line-height);
  color: var(--lp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.learnflow-signature .accent {
  font-style: italic;
  color: var(--lp-accent);
  font-weight: var(--lp-weight-normal);
}

.tb-counter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--lp-score-group-gap);
  height: var(--lp-score-height);
  min-width: 0;
  justify-content: center;
  padding: 0 var(--lp-score-padding-x);
  border: var(--lp-score-border-width) solid var(--lp-score-border);
  border-radius: var(--lp-score-radius);
  background: var(--lp-score-bg);
  color: var(--lp-score-value-color);
  font-family: var(--lp-score-font-family);
  font-size: var(--lp-score-value-size);
  font-weight: var(--lp-score-value-weight);
  white-space: nowrap;
  box-shadow: var(--lp-score-shadow);
  flex-shrink: 0;
}
.tb-counter .lp-header-stats__icon {
  width: var(--lp-score-icon-size);
  height: var(--lp-score-icon-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tb-counter .lp-header-stats__icon--target {
  color: var(--lp-score-icon-color);
}

/* Mobile-first L2: [←] título centrado [☰] — grid homologado DeskFlow */
.top-bar.top-bar--secondary {
  height: var(--lp-header-height-compact);
  min-height: var(--lp-header-height-compact);
  padding: var(--lp-header-pad-y-compact) var(--lp-header-pad-x-compact);
  gap: 0;
  display: grid;
  grid-template-columns: var(--lp-navbtn-size, 44px) minmax(0, 1fr) var(--lp-navbtn-size, 44px);
  align-items: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.top-bar.top-bar--secondary .top-bar__start,
.top-bar.top-bar--secondary .top-bar__end {
  width: var(--lp-navbtn-size);
  height: var(--lp-navbtn-size);
  min-width: var(--lp-navbtn-size);
  min-height: var(--lp-navbtn-size);
  margin-left: 0;
  z-index: 2;
}

.top-bar.top-bar--secondary .top-bar__start {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.top-bar.top-bar--secondary .top-bar__end {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  justify-content: flex-end;
}

.top-bar.top-bar--secondary .learnflow-signature {
  grid-column: 2;
  grid-row: 1;
  position: static;
  transform: none;
  text-align: center;
  align-self: center;
  flex: unset;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 0 2px;
  font-family: var(--lp-font-display);
  font-size: var(--lp-header-title-size);
  font-weight: var(--lp-header-title-weight);
  letter-spacing: var(--lp-header-title-tracking);
  line-height: var(--lp-header-title-line-height);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar.top-bar--secondary .tb-counter {
  display: none !important;
}

@media (min-width: 861px) {
  .top-bar.top-bar--secondary {
    display: flex;
    height: var(--lp-header-height);
    min-height: var(--lp-header-height);
    padding: var(--lp-header-pad-y) var(--lp-header-pad-x);
    gap: 10px;
  }

  .top-bar.top-bar--secondary .top-bar__start,
  .top-bar.top-bar--secondary .top-bar__end,
  .top-bar.top-bar--secondary .learnflow-signature {
    grid-column: auto;
    grid-row: auto;
  }

  .top-bar.top-bar--secondary .learnflow-signature {
    position: static;
    transform: none;
    text-align: left;
    flex: 1;
    max-width: none;
    pointer-events: auto;
    font-size: var(--lp-header-title-size);
  }

  .top-bar.top-bar--secondary .tb-counter {
    display: inline-flex !important;
  }
}

@media (max-width: 860px) {
  .top-bar.top-bar--secondary .top-bar__start .lp-icon-btn,
  .top-bar.top-bar--secondary .top-bar__end .lp-icon-btn,
  .top-bar.top-bar--secondary .top-bar__end button.lp-icon-btn {
    width: var(--lp-navbtn-size);
    height: var(--lp-navbtn-size);
    min-width: var(--lp-navbtn-size);
    min-height: var(--lp-navbtn-size);
  }

  /* Counter vive en el área de juego en mobile — header solo [←] título [☰] */
  .top-bar.top-bar--secondary .tb-counter {
    display: none !important;
  }

  /* Counter compacto: solo "1/90", sin icono target */
  .tb-counter .lp-header-stats__icon {
    display: none;
  }

  .tb-counter {
    height: 36px;
    padding: 0 10px;
    gap: 0;
    font-size: var(--lp-score-font-size);
  }

  .tb-counter .tb-counter__text {
    font-size: 0.875rem;
    font-weight: var(--lp-score-value-weight);
  }
}

/* ─── HEADER SECTION ─── */
/* ─── WIDER WRAP FOR EXERCISES ─── */
.wrap { max-width: 860px; }

.header {
  padding: 0;
  margin-bottom: 10px;
}
h1 {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  line-height: 1.3;
  margin-bottom: 6px;
}

/* ─── EXERCISE CONTROL PANEL (homologated via exercise-shell.js) ─── */
.ex-control-panel {
  display: flex;
  flex-direction: column;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-xs);
  overflow: hidden;
}

.ex-header__scope {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--lp-border-subtle);
  background: var(--lp-surface);
}
.ex-header__scope .cat-bar,
.ex-header__scope #catBar,
.ex-header__scope #levelBar,
.ex-header__scope .cat-scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.ex-header__scope .cat-bar::-webkit-scrollbar,
.ex-header__scope #catBar::-webkit-scrollbar,
.ex-header__scope #levelBar::-webkit-scrollbar {
  display: none;
}

.ex-header__modes {
  padding: 6px 8px;
  background: var(--lp-bg-paper);
  border-bottom: 1px solid var(--lp-border-subtle);
}
.ex-header__modes .pill-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  margin: 0;
  box-shadow: none;
  border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-bg-paper);
  padding: 3px;
  gap: 4px;
  overflow: hidden;
}
.ex-mode-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--lp-radius-full);
  background: var(--lp-chip-active-bg);
  border: 1.5px solid var(--lp-chip-active-border);
  box-shadow: var(--lp-chip-active-shadow);
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.15, 0.64, 1),
    width 0.28s cubic-bezier(0.34, 1.15, 0.64, 1),
    height 0.28s cubic-bezier(0.34, 1.15, 0.64, 1),
    opacity 0.18s ease;
  will-change: transform, width;
}
.ex-mode-indicator.is-ready {
  opacity: 1;
}
.ex-header__modes .pill-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.68rem;
  text-align: center;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  transition: color 0.22s ease, font-weight 0.22s ease;
}
.ex-header__modes .pill-btn.active,
.ex-header__modes .pill-btn.active:is(.purple, .green, .red, .orange, .teal) {
  background: transparent !important;
  color: var(--lp-chip-active-text);
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: var(--lp-weight-extrabold);
}
.ex-header__modes .pill-btn.active:hover,
.ex-header__modes .pill-btn.active:is(.purple, .green, .red, .orange, .teal):hover {
  background: transparent !important;
  color: var(--lp-chip-active-text);
  border-color: transparent !important;
}

.ex-progress-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 12px;
}
.ex-progress-row + .ex-progress-row {
  border-top: 1px solid var(--lp-border-subtle);
}
.ex-progress-row--session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 8px 12px 10px;
  min-height: 52px;
}
.ex-progress-row--session:has(.timer-bar.show) {
  grid-template-columns: 1fr;
  padding-top: 6px;
  padding-bottom: 6px;
  row-gap: 4px;
}
.ex-progress-row--session:has(#pairScore.show) {
  grid-template-columns: 1fr;
  padding-top: 6px;
  padding-bottom: 6px;
  row-gap: 4px;
}
.ex-progress-row--session::before {
  display: block;
  font-size: .58rem;
  font-weight: var(--lp-weight-extrabold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
  line-height: 1.2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  content: 'Sesión actual';
}
.ex-progress-row--session:has(.timer-bar.show)::before,
.ex-progress-row--session:has(#pairScore.show)::before {
  display: none;
}

/* Flatten .progress so labels + track participate in the session grid */
.ex-progress-row--session .progress {
  display: contents;
  margin: 0;
}
.ex-progress-row--session .progress__labels {
  display: contents;
}
.ex-progress-row--session #progTxt,
.ex-progress-row--session .progress__labels > :first-child {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--lp-font-mono);
  font-size: 0.68rem;
  font-weight: var(--lp-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--lp-ink-soft);
}
.ex-progress-row--session #progPct,
.ex-progress-row--session .progress__labels > :last-child {
  display: none;
}
.ex-progress-row--session .progress__track {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: var(--lp-progress-height, 6px);
  background: var(--lp-border);
  border-radius: var(--lp-radius-full);
  overflow: hidden;
}
.ex-progress-row--session .progress__fill {
  height: 100%;
  border-radius: var(--lp-radius-full);
  transition: width 0.5s var(--lp-ease);
}

.ex-progress-row--session #livesBar,
.ex-progress-row--session #streakBar {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  font-size: 0.72rem;
  font-weight: var(--lp-weight-bold);
  line-height: 1;
  text-align: center;
}
.ex-progress-row--session #streakBar {
  color: var(--lp-success-dark);
}
.ex-progress-row--session:has(#livesBar.show) #progTxt,
.ex-progress-row--session:has(#livesBar.show) #progPct,
.ex-progress-row--session:has(#livesBar.show)::before,
.ex-progress-row--session:has(#streakBar.show) #progTxt,
.ex-progress-row--session:has(#streakBar.show) #progPct,
.ex-progress-row--session:has(#streakBar.show)::before {
  display: none;
}

.ex-progress-row--session #pairScore {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  display: none;
  margin: 0;
  padding: 0;
  font-family: var(--lp-font-mono);
  font-size: .68rem;
  font-weight: var(--lp-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--lp-muted);
  text-align: center;
  z-index: 1;
}
.ex-progress-row--session #pairScore.show {
  display: block;
  color: var(--lp-error);
}
.ex-progress-row--session:has(#pairScore.show) {
  padding-top: 6px;
  padding-bottom: 6px;
  row-gap: 4px;
}

.ex-progress-row--session .timer-bar {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0 5px 0 4px;
  min-height: 0;
  border-radius: var(--lp-radius-full);
  background: color-mix(in srgb, var(--lp-warning) 10%, var(--lp-surface));
  border: 1px solid color-mix(in srgb, var(--lp-warning) 28%, var(--lp-border));
  box-shadow: none;
  z-index: 1;
}
.ex-progress-row--session .timer-bar.show {
  display: inline-flex;
}
.ex-progress-row--session .timer-bar::before {
  content: '⏱';
  font-size: .58rem;
  line-height: 1;
  opacity: .85;
}
.ex-progress-row--session .timer-display {
  font-family: var(--lp-font-mono);
  font-size: .68rem;
  font-weight: var(--lp-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--lp-warning);
  letter-spacing: .01em;
}
.ex-progress-row--session .timer-display.warn {
  color: var(--lp-error);
  animation: pulse .5s infinite alternate;
}

.ex-header__progress {
  display: flex;
  flex-direction: column;
  background: var(--lp-bg-paper);
  border-top: 1px solid var(--lp-border-subtle);
  min-height: 52px;
  flex-shrink: 0;
}

.ex-control-panel .progress {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ex-control-panel .progress__labels {
  margin: 0;
}

@media (max-width: 639px) {
  .ex-header__scope { padding: 6px 8px 4px; }
  .ex-header__modes { padding: 4px 6px; }
  .ex-header__modes .pill-bar {
    gap: 3px;
    padding: 3px;
  }
  .ex-header__modes .pill-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: clamp(0.62rem, 2.6vw, 0.7rem);
  }
  .ex-header__scope .cat-btn {
    font-size: clamp(0.62rem, 2.6vw, 0.68rem);
    padding: 8px 10px;
    min-height: 44px;
  }
  .ex-progress-row { padding: 6px 10px; gap: 3px; }
  .ex-progress-row--session {
    padding: 7px 10px 9px;
    row-gap: 5px;
    min-height: 48px;
  }
  .ex-progress-row--session::before { font-size: .54rem; }
  .ex-progress-row--session #progTxt,
  .ex-progress-row--session .progress__labels > :first-child {
    font-size: 0.64rem;
  }
  .ex-progress-row--session:has(#pairScore.show) {
    padding-top: 3px;
    padding-bottom: 3px;
    row-gap: 2px;
  }
  .ex-progress-row--session:has(#pairScore.show) #pairScore {
    font-size: .64rem;
  }
  .ex-progress-row--session:has(.timer-bar.show) {
    padding-top: 3px;
    padding-bottom: 3px;
    row-gap: 2px;
  }
  .ex-progress-row--session:has(.timer-bar.show) .timer-bar {
    padding: 0 4px 0 3px;
    gap: 2px;
  }
  .ex-progress-row--session:has(.timer-bar.show) .timer-display {
    font-size: .64rem;
  }
}

/* ─── PILL BAR ENHANCED (fallback outside control panel) ─── */
.pill-bar {
  box-shadow: var(--lp-shadow-sm);
  margin-bottom: 10px;
}
.pill-btn.active {
  box-shadow: var(--lp-chip-active-shadow);
}
[data-theme="dark"] .pill-btn.active {
  box-shadow: var(--lp-chip-active-shadow);
}

/* ─── LEVEL BAR ENHANCED (legacy — spelling now uses .cat-bar + .cat-btn) ─── */
/* ─── PROGRESS BAR ENHANCED (legacy headers only — not .ex-control-panel) ─── */
.header:not(.ex-control-panel) .progress,
.wrap > .progress {
  margin-bottom: 6px;
  padding: 6px 12px;
  background: var(--lp-surface);
  border-radius: var(--lp-radius-sm);
  border: 1px solid var(--lp-border-subtle);
  box-shadow: var(--lp-shadow-xs);
}

/* ─── CARD GRID ENHANCED ─── */
.card-grid {
  gap: 5px;
}

/* ─── WORD CARDS ENHANCED ─── */
.word-card {
  box-shadow: var(--lp-shadow-sm);
  transition: border-color .2s, background .2s, transform .2s var(--lp-ease), box-shadow .2s;
  border-radius: var(--lp-radius-md);
}
.word-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--lp-shadow-md);
}
.word-card__verb {
  font-size: .88rem;
  margin-bottom: 2px;
}
.word-card__input,
.word-card__select {
  border-radius: var(--lp-radius-xs);
}

/* ─── BUTTON ENHANCED ─── */
.check-area {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lp-border-subtle);
}
/* .check-area .btn override eliminado: el radius canónico ya es --lp-radius-md
   y el padding se unifica con .lp-btn (INFORME-BOTONES §2.4 / Fase D) */

/* ─── RESULT OVERLAY ENHANCED ─── */
.result-box {
  border-radius: var(--lp-radius-xl);
  padding: 32px;
  box-shadow: var(--lp-shadow-hover);
}

/* ─── SCROLL BODY SPACING ─── */
.scroll-body {
  padding: 6px 0 48px;
}

/* Stable mode stage — modest min-height on the container only (not flex-grow) */
.wrap:has(.ex-mode-stage) {
  --lp-mode-stage-min-h: 0px;
}
.ex-mode-stage {
  flex: 0 1 auto;
  width: 100%;
  min-height: var(--lp-mode-stage-min-h);
}
/* Anti-jump: study/quiz/timed share exact stage height */
.ex-mode-stage:has([data-area="study"].show),
.ex-mode-stage:has([data-area="quiz"].show),
.ex-mode-stage:has([data-area="timed"].show),
.ex-mode-stage:has([data-area="practice"].show) { min-height: 230px; }
.ex-mode-stage:has([data-area="match"].show),
.ex-mode-stage:has([data-area="battle"].show) { min-height: var(--lp-flashcard-mode-h, 230px); }
.ex-mode-stage > [data-area] {
  width: 100%;
}
.ex-mode-stage > [data-area].show {
  justify-content: flex-start;
}
@media (prefers-reduced-motion: no-preference) {
  .ex-mode-stage > [data-area].show {
    animation: ex-mode-enter 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .ex-header__progress {
    transition: opacity 0.2s ease;
  }
}
@keyframes ex-mode-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ex-mode-stage > [data-area].show { animation: none; }
  .ex-mode-indicator { transition: none; }
}

.ex-bottom-nav[hidden] {
  display: none !important;
}
.scroll-body:has(.ex-bottom-nav:not([hidden])) {
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .scroll-body:has(.ex-bottom-nav:not([hidden])),
  .scroll-body:has(.fc-nav:not([hidden])) {
    padding-bottom: max(
      var(--ex-bottom-nav-scroll-reserve),
      calc(var(--ex-bottom-nav-min-height) + env(safe-area-inset-bottom))
    );
  }

  body.shell-ready > .wrap:has(> .ex-bottom-nav:not([hidden])) .scroll-body,
  body.shell-ready > .wrap:has(> #exBottomNav:not([hidden])) .scroll-body {
    padding-bottom: 0;
  }

  /* Footer + depth toast compete with fixed bottom nav — hide on mobile */
  body.shell-ready:has(#exBottomNav:not([hidden])) .exercise-foot,
  body.shell-ready:has(#exBottomNav:not([hidden])) .depth-banner,
  body.shell-ready:has(#exBottomNav:not([hidden])) .depth-bell {
    display: none !important;
  }
}

body:not(.shell-ready) .scroll-body:has(.ex-bottom-nav:not([hidden])) {
  padding-bottom: max(var(--ex-bottom-nav-scroll-reserve), calc(var(--ex-bottom-nav-min-height) + env(safe-area-inset-bottom)));
}
@media (max-width: 639px) {
  .scroll-body { padding: 0; }
  .top-bar.top-bar--secondary { margin-bottom: 4px; gap: 0; }
  .tb-counter { height: 32px; padding: 0 8px; border-width: 1px; box-shadow: none; }
  .tb-counter .tb-counter__text { font-size: 0.8125rem; }
  .header { padding: 0; margin-bottom: 6px; }
  h1 { margin-bottom: 4px; }
  .ex-header__modes .pill-bar { margin-bottom: 0; }
  .ex-header__modes .pill-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: clamp(0.62rem, 2.6vw, 0.7rem);
  }
  /* Legacy headers not homologated via exercise-shell */
  .header:not(.ex-control-panel) .pill-btn {
    font-size: 0.52rem;
    padding: 5px 6px;
    min-height: 32px;
    flex: 0 0 auto;
  }
  .header:not(.ex-control-panel) .pill-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .header:not(.ex-control-panel) .pill-bar::-webkit-scrollbar { display: none; }
  .ex-control-panel .progress { margin-bottom: 0; padding: 0; }
}

/* ─── LEGEND ENHANCED ─── */
.legend {
  padding: 6px 10px;
  background: var(--lp-bg-paper);
  border-radius: var(--lp-radius-sm);
  border: 1px solid var(--lp-border-subtle);
}

/* Timer fallback for exercises not homologated via exercise-shell */
.wrap > .timer-bar.show,
.header:not(.ex-control-panel) .timer-bar.show {
  display: block;
  padding: 2px 10px;
  background: var(--lp-surface);
  border-radius: var(--lp-radius-sm);
  border: 1px solid var(--lp-border-subtle);
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 700;
  font-family: var(--lp-font-mono);
  text-align: center;
}

/* ─── MOBILE VIEWPORT LOCK (all exercises — inner scroll only) ─── */
@media (max-width: 767px) {
  html:has(body.shell-ready),
  html:has(body.shell-ready) body {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.shell-ready {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  body.shell-ready > .top-bar {
    flex-shrink: 0;
    width: 100%;
    margin-left: 0;
  }

  body.shell-ready > .wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 10px;
    max-width: 100%;
  }

  body.shell-ready .header {
    flex-shrink: 0;
  }

  body.shell-ready .scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 0;
    padding-bottom: max(
      var(--ex-bottom-nav-scroll-reserve),
      calc(var(--ex-bottom-nav-min-height) + env(safe-area-inset-bottom))
    );
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.shell-ready:has(#exBottomNav:not([hidden])) .scroll-body {
    padding-bottom: max(
      var(--ex-bottom-nav-scroll-reserve),
      calc(var(--ex-bottom-nav-min-height) + env(safe-area-inset-bottom))
    );
  }

  body.shell-ready .scroll-body > .ex-mode-stage {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.shell-ready .scroll-body > .ex-mode-stage > [data-area].show {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
  }

  body.shell-ready .scroll-body > .ex-bottom-nav,
  body.shell-ready .scroll-body > .fc-nav {
    flex-shrink: 0;
    margin-top: 0;
  }
}

/* ─── MOBILE VIEWPORT LOCK (standard media — no @custom-media dependency) ─── */
@media (max-width: 767px) {
  html:has(body.shell-ready),
  html:has(body.shell-ready) body {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.shell-ready {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  body.shell-ready > .top-bar {
    flex-shrink: 0;
    width: 100%;
    margin-left: 0;
  }

  body.shell-ready > .wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 10px;
    max-width: 100%;
  }

  body.shell-ready .header {
    flex-shrink: 0;
  }

  body.shell-ready .scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.shell-ready > .wrap > #exBottomNav,
  body.shell-ready > .wrap > .ex-bottom-nav {
    flex-shrink: 0;
  }

  body.shell-ready > .wrap:has(> #exBottomNav:not([hidden])) .scroll-body {
    padding-bottom: 8px;
  }

  body.shell-ready:has(#exBottomNav:not([hidden])) .exercise-foot,
  body.shell-ready:has(#exBottomNav:not([hidden])) .depth-banner,
  body.shell-ready:has(#exBottomNav:not([hidden])) .depth-bell {
    display: none !important;
  }
}