/* =============================================================================
   Mission Ready by Ashford Fitness
   css/screens.css — Screen-specific layouts
   NEW in Phase 2.

   Each screen is a full-viewport section hidden by default.
   app.js shows/hides screens by toggling the .is-active class.
   Only one screen should be active at a time.

   Screens defined here:
     #screen-boot          — spinner shown while validateCode runs on open
     #screen-code-entry    — enter AF-XXXX-XXXX code
     #screen-restore       — offer to restore profile from Supabase
     #screen-blocked       — wrong device / revoked
     #screen-home          — placeholder (onboarding → Phase 3 populates this)
     #screen-test          — Step 3 test shell (loaded when ?screen=test)
   ============================================================================= */


/* ── Screen container system ─────────────────────────────────────────────────
   All screens share this base. Each has a unique id.
   .is-active → display:flex with column layout.
   ────────────────────────────────────────────────────────────────────────── */

.screen {
  display:        none;
  flex-direction: column;
  min-height:     100vh;
  width:          100%;
}

.screen.is-active {
  display: flex;
}


/* ── Boot / loading screen ───────────────────────────────────────────────────
   Shown while validateCode call is in flight on every app open.
   Typically visible for < 1 second — just needs to feel intentional.
   ────────────────────────────────────────────────────────────────────────── */

#screen-boot {
  align-items:     center;
  justify-content: center;
  background:      var(--colour-bg);
  gap:             var(--space-5);
}

.boot-logo {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-4);
}

.boot-logo__icon {
  width:           52px;
  height:          52px;
  background:      var(--colour-accent);
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.boot-logo__icon svg {
  width:        28px;
  height:       28px;
  fill:         none;
  stroke:       #fff;
  stroke-width: 2.2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.boot-logo__name {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
}

.boot-spinner {
  width:        32px;
  height:       32px;
  border:       3px solid var(--colour-border-light);
  border-top:   3px solid var(--colour-accent);
  border-radius: 50%;
  animation:    spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.boot-status {
  font-size:   var(--text-sm);
  color:       var(--colour-text-dim);
  letter-spacing: var(--tracking-wide);
}


/* ── Code entry screen ───────────────────────────────────────────────────────
   First screen for a user with no valid local auth.
   ────────────────────────────────────────────────────────────────────────── */

#screen-code-entry {
  background: var(--colour-bg);
}

.code-entry-layout {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-6) var(--space-4);
  max-width:      480px;
  margin:         0 auto;
  width:          100%;
}

.code-entry-header {
  padding:    var(--space-8) 0 var(--space-6);
  text-align: center;
}

.code-entry-header__icon {
  width:           48px;
  height:          48px;
  background:      var(--colour-accent);
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-4);
}

.code-entry-header__icon svg {
  width:        26px;
  height:       26px;
  fill:         none;
  stroke:       #fff;
  stroke-width: 2.2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.code-entry-header__title {
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-2);
}

.code-entry-header__subtitle {
  font-size:   var(--text-sm);
  color:       var(--colour-text-secondary);
  line-height: var(--leading-body);
}

.code-entry-card {
  background:    var(--colour-surface);
  border:        1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  margin-bottom: var(--space-4);
}

/* Inline validation error under the input */
.code-entry-error {
  display:       none;
  font-size:     var(--text-sm);
  color:         var(--colour-error);
  margin-top:    var(--space-2);
  padding-left:  var(--space-1);
}

.code-entry-error.is-visible {
  display: block;
}

.code-entry-help {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  text-align:  center;
  margin-top:  var(--space-4);
  line-height: var(--leading-body);
}

.code-entry-help a {
  color: var(--colour-accent-light);
}

/* Spacer pushes disclaimer to bottom */
.code-entry-layout__spacer {
  flex: 1;
}

.code-entry-disclaimer {
  margin-top: var(--space-6);
  padding-bottom: var(--space-4);
}


/* ── Blocked screen ──────────────────────────────────────────────────────────
   Wrong device or revoked code.
   ────────────────────────────────────────────────────────────────────────── */

#screen-blocked {
  align-items:     center;
  justify-content: center;
  background:      var(--colour-bg);
  padding:         var(--space-6) var(--space-4);
}

.blocked-layout {
  max-width:      440px;
  width:          100%;
  text-align:     center;
}

.blocked-icon {
  width:           56px;
  height:          56px;
  background:      var(--colour-error-bg);
  border:          1px solid rgba(201, 76, 76, 0.3);
  border-radius:   var(--radius-xl);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-5);
}

.blocked-icon svg {
  width:        28px;
  height:       28px;
  fill:         none;
  stroke:       var(--colour-error);
  stroke-width: 2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.blocked-title {
  font-size:     var(--text-xl);
  font-weight:   var(--weight-bold);
  color:         var(--colour-text);
  margin-bottom: var(--space-3);
}

.blocked-message {
  font-size:     var(--text-base);
  color:         var(--colour-text-secondary);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-6);
}

.blocked-message strong {
  color:       var(--colour-text);
  font-weight: var(--weight-semi);
}

.blocked-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.blocked-try-again {
  font-size:     var(--text-sm);
  color:         var(--colour-text-dim);
  margin-top:    var(--space-4);
}

.blocked-try-again button {
  color:       var(--colour-accent-light);
  font-size:   var(--text-sm);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0;
  text-decoration: underline;
}


/* ── Restore screen ──────────────────────────────────────────────────────────
   Shown when: no local profile, but Supabase backup exists.
   ────────────────────────────────────────────────────────────────────────── */

#screen-restore {
  align-items:     center;
  justify-content: center;
  background:      var(--colour-bg);
  padding:         var(--space-6) var(--space-4);
}

.restore-layout {
  max-width:   440px;
  width:       100%;
  text-align:  center;
}

.restore-icon {
  width:           56px;
  height:          56px;
  background:      var(--colour-accent-bg);
  border:          1px solid rgba(61, 122, 79, 0.3);
  border-radius:   var(--radius-xl);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-5);
}

.restore-icon svg {
  width:        28px;
  height:       28px;
  fill:         none;
  stroke:       var(--colour-accent-light);
  stroke-width: 2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.restore-title {
  font-size:     var(--text-xl);
  font-weight:   var(--weight-bold);
  color:         var(--colour-text);
  margin-bottom: var(--space-3);
}

.restore-message {
  font-size:     var(--text-base);
  color:         var(--colour-text-secondary);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-6);
}

.restore-meta {
  display:          flex;
  gap:              var(--space-3);
  justify-content:  center;
  flex-wrap:        wrap;
  margin-bottom:    var(--space-6);
}

.restore-meta__pill {
  background:    var(--colour-surface-2);
  border:        1px solid var(--colour-border-light);
  border-radius: 999px;
  padding:       var(--space-1) var(--space-3);
  font-size:     var(--text-xs);
  color:         var(--colour-text-secondary);
  letter-spacing: var(--tracking-wide);
}

.restore-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.restore-skip {
  font-size:  var(--text-sm);
  color:      var(--colour-text-dim);
  margin-top: var(--space-3);
}

.restore-skip button {
  color:           var(--colour-text-dim);
  font-size:       var(--text-sm);
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
}


/* ── Home screen placeholder ─────────────────────────────────────────────────
   Shown after successful auth, before onboarding is built (Phase 3).
   Replaced entirely in Phase 3.
   ────────────────────────────────────────────────────────────────────────── */

#screen-home {
  background: var(--colour-bg);
}

.home-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         var(--space-6) var(--space-4);
  text-align:      center;
  gap:             var(--space-4);
}

.home-placeholder__badge {
  background:    var(--colour-accent-bg);
  border:        1px solid rgba(61, 122, 79, 0.4);
  border-radius: 999px;
  padding:       var(--space-2) var(--space-4);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:         var(--colour-accent-light);
}

.home-placeholder__title {
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  color:          var(--colour-text);
  letter-spacing: var(--tracking-tight);
}

.home-placeholder__body {
  font-size:   var(--text-base);
  color:       var(--colour-text-secondary);
  line-height: var(--leading-body);
  max-width:   320px;
}

.home-placeholder__code {
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  color:         var(--colour-text-dim);
  background:    var(--colour-surface-2);
  border:        1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  padding:       var(--space-2) var(--space-3);
  letter-spacing: 0.08em;
}


/* ── Test shell screen ───────────────────────────────────────────────────────
   Wraps the Step 3 test shell content when ?screen=test is in the URL.
   The shell itself is rendered by test-shell.js into #screen-test.
   ────────────────────────────────────────────────────────────────────────── */

#screen-test {
  background: var(--colour-bg);
}

.test-shell-wrapper {
  max-width:     560px;
  margin:        0 auto;
  padding:       var(--space-4);
  padding-bottom: var(--space-16);
}

/* Test screen back link */
.test-back-bar {
  padding:        var(--space-3) 0;
  margin-bottom:  var(--space-4);
  border-bottom:  1px solid var(--colour-border);
}

.test-back-bar a {
  font-size:      var(--text-sm);
  color:          var(--colour-text-dim);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
}

.test-back-bar a:hover {
  color: var(--colour-text-secondary);
}


/* ── Global app chrome ───────────────────────────────────────────────────────
   Persistent thin bar at the top of every real screen (not boot, not test).
   Contains only the Mission Ready wordmark.
   ────────────────────────────────────────────────────────────────────────── */

.app-chrome {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         var(--space-4) var(--space-4) var(--space-3);
  border-bottom:   1px solid var(--colour-border);
  background:      var(--colour-bg);
  position:        sticky;
  top:             0;
  z-index:         10;
}

.app-chrome__icon {
  width:           28px;
  height:          28px;
  background:      var(--colour-accent);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.app-chrome__icon svg {
  width:        15px;
  height:       15px;
  fill:         none;
  stroke:       #fff;
  stroke-width: 2.2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.app-chrome__name {
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
}

/* The chrome is hidden on boot and test screens */
#screen-boot    .app-chrome,
#screen-test    .app-chrome { display: none; }


/* =============================================================================
   Phase 3 additions — Onboarding screen layout
   Added to existing screens.css. Original content unchanged above.
   ============================================================================= */

/* ── Onboarding screen container ─────────────────────────────────────────────── */

#screen-onboarding {
  background:     var(--colour-bg);
  flex-direction: column;
}

/* ── Chrome: sticky progress bar ────────────────────────────────────────────── */

.ob-chrome {
  position:      sticky;
  top:           0;
  z-index:       10;
  background:    var(--colour-bg);
  padding:       var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--colour-border);
}

.ob-progress {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.ob-progress__bar-track {
  flex:          1;
  height:        4px;
  background:    var(--colour-border-light);
  border-radius: 2px;
  overflow:      hidden;
}

.ob-progress__bar {
  height:        100%;
  background:    var(--colour-accent);
  border-radius: 2px;
  transition:    width 300ms ease;
}

.ob-progress__label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  color:          var(--colour-text-dim);
  letter-spacing: var(--tracking-wide);
  white-space:    nowrap;
  flex-shrink:    0;
}

/* ── Step panels ─────────────────────────────────────────────────────────────── */

.ob-step {
  display: none;
  flex:    1;
}

.ob-step.is-active {
  display: block;
}

.ob-step-inner {
  max-width:  480px;
  margin:     0 auto;
  padding:    var(--space-6) var(--space-4) var(--space-16);
}

/* ── Step header ─────────────────────────────────────────────────────────────── */

.ob-step-header {
  margin-bottom: var(--space-6);
}

.ob-step-title {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-2);
  line-height:    var(--leading-snug);
}

.ob-step-subtitle {
  font-size:   var(--text-sm);
  color:       var(--colour-text-secondary);
  line-height: var(--leading-body);
}

/* ── Step nav buttons ────────────────────────────────────────────────────────── */

.ob-step-nav {
  margin-top: var(--space-6);
}

.ob-step-nav--two {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap:     var(--space-3);
}

/* On very small screens, stack navigation */
@media (max-width: 360px) {
  .ob-step-nav--two {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   Phase 4 additions — Home and Session screen styles
   ============================================================================= */

/* ── Home dynamic container ──────────────────────────────────────────────────── */

#screen-home {
  flex-direction: column;
}

.home-dynamic {
  max-width:   480px;
  margin:      0 auto;
  padding:     var(--space-5) var(--space-4) var(--space-16);
  width:       100%;
}

.home-loading {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-4);
  padding:         var(--space-12) 0;
}

.home-loading__text {
  font-size:  var(--text-sm);
  color:      var(--colour-text-dim);
}

/* ── Home meta bar ───────────────────────────────────────────────────────────── */

.home-meta {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  margin-bottom: var(--space-4);
}

.home-meta__service {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semi);
  color:       var(--colour-accent-light);
}

.home-meta__dot {
  color:     var(--colour-text-dim);
  font-size: var(--text-xs);
}

.home-meta__weeks {
  font-size: var(--text-sm);
  color:     var(--colour-text-secondary);
}

/* ── Last session pill ───────────────────────────────────────────────────────── */

.home-last {
  display:       flex;
  align-items:   baseline;
  gap:           var(--space-2);
  margin-bottom: var(--space-4);
  font-size:     var(--text-xs);
}

.home-last__label {
  color:          var(--colour-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  flex-shrink:    0;
}

.home-last__value {
  color:       var(--colour-text-secondary);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* ── Today's session card ────────────────────────────────────────────────────── */

.home-session-card {
  background:    var(--colour-surface);
  border:        1px solid var(--colour-border);
  border-left:   3px solid var(--colour-accent);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow:    var(--shadow-card);
}

.home-session-card__eyebrow {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-accent-light);
  margin-bottom:  var(--space-2);
}

.home-session-card__name {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-1);
  line-height:    var(--leading-snug);
}

.home-session-card__focus {
  font-size:     var(--text-sm);
  color:         var(--colour-text-secondary);
  margin-bottom: var(--space-3);
}

.home-session-card__meta {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     var(--text-xs);
  color:         var(--colour-text-dim);
  margin-bottom: var(--space-2);
}

.home-session-card__dot { color: var(--colour-text-dim); }

.home-session-card__safety {
  font-size:     var(--text-xs);
  color:         var(--colour-warning);
  background:    var(--colour-warning-bg);
  border-radius: var(--radius-sm);
  padding:       var(--space-2) var(--space-3);
  margin-top:    var(--space-3);
  line-height:   var(--leading-body);
}

/* ── Home secondary actions ──────────────────────────────────────────────────── */

.home-actions {
  text-align:  center;
  margin-top:  var(--space-2);
}

.home-actions__link {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  text-decoration: none;
}

.home-actions__link:hover { color: var(--colour-text-secondary); }


/* ── Session screen ──────────────────────────────────────────────────────────── */

#screen-session {
  background:     var(--colour-bg);
  flex-direction: column;
}

.app-chrome__back {
  margin-left:  auto;
  font-size:    var(--text-sm);
  color:        var(--colour-text-dim);
  background:   none;
  border:       none;
  cursor:       pointer;
  padding:      var(--space-1) 0;
  flex-shrink:  0;
}

.app-chrome__back:hover { color: var(--colour-text-secondary); }

.session-dynamic {
  max-width:      480px;
  margin:         0 auto;
  padding:        var(--space-5) var(--space-4) var(--space-16);
  width:          100%;
}

.session-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom:  1px solid var(--colour-border);
}

.session-title {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-2);
}

.session-meta {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     var(--text-sm);
  color:         var(--colour-text-secondary);
  margin-bottom: var(--space-3);
}

.session-meta__dot { color: var(--colour-text-dim); }

.session-why {
  font-size:   var(--text-sm);
  color:       var(--colour-text-secondary);
  line-height: var(--leading-body);
  border-left: 2px solid var(--colour-accent);
  padding-left: var(--space-3);
}

/* ── Session blocks ──────────────────────────────────────────────────────────── */

.session-block {
  margin-bottom: var(--space-5);
}

.session-block__heading {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-accent-light);
  margin-bottom:  var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--colour-border);
}

.session-block__rest {
  font-weight:    var(--weight-normal);
  text-transform: none;
  letter-spacing: normal;
  color:          var(--colour-text-dim);
  font-size:      var(--text-xs);
}

/* ── Exercise list ───────────────────────────────────────────────────────────── */

.session-exercise-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}

.session-exercise {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-1);
  padding:       var(--space-3) var(--space-4);
  background:    var(--colour-surface);
  border:        1px solid var(--colour-border);
  border-radius: var(--radius-md);
}

.session-exercise__name {
  font-size:   var(--text-base);
  font-weight: var(--weight-semi);
  color:       var(--colour-text);
}

.session-exercise__detail {
  font-size:   var(--text-sm);
  color:       var(--colour-accent-light);
  font-weight: var(--weight-medium);
}

.session-exercise__note {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  font-style:  italic;
}

/* ── Session notes ───────────────────────────────────────────────────────────── */

.session-note {
  margin-bottom: var(--space-4);
  padding:       var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  line-height:   var(--leading-body);
}

.session-note__label {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom:  var(--space-2);
}

.session-note--coach {
  background:  var(--colour-surface);
  border:      1px solid var(--colour-border);
  border-left: 3px solid var(--colour-accent);
  color:       var(--colour-text-secondary);
}

.session-note--coach .session-note__label { color: var(--colour-accent-light); }

.session-note--progress {
  background: var(--colour-surface-2);
  border:     1px solid var(--colour-border);
  color:      var(--colour-text-secondary);
}

.session-note--progress .session-note__label { color: var(--colour-text-dim); }

.session-note--safety {
  background: var(--colour-warning-bg);
  border:     1px solid rgba(201, 168, 76, 0.3);
  color:      var(--colour-warning);
}

.session-note--safety .session-note__label { color: var(--colour-warning); }

/* ── Coaching CTA ────────────────────────────────────────────────────────────── */

.session-cta-block {
  margin-top:    var(--space-6);
  padding-top:   var(--space-5);
  border-top:    1px solid var(--colour-border);
  text-align:    center;
}

.session-cta-block__hint {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  margin-top:  var(--space-3);
  line-height: var(--leading-body);
}


/* =============================================================================
   Phase 5 additions — Log screen and What's Next screen
   ============================================================================= */

/* ── Session complete button (added to session screen) ───────────────────────── */

.session-complete-block {
  margin-top:    var(--space-5);
  padding-top:   var(--space-5);
  border-top:    1px solid var(--colour-border);
}

/* ── Log screen ──────────────────────────────────────────────────────────────── */

#screen-log {
  background:     var(--colour-bg);
  flex-direction: column;
}

.log-screen-inner {
  max-width:   480px;
  margin:      0 auto;
  padding:     var(--space-5) var(--space-4) var(--space-16);
  width:       100%;
}

.log-screen-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom:  1px solid var(--colour-border);
}

.log-screen-title {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-1);
}

.log-screen-subtitle {
  font-size: var(--text-sm);
  color:     var(--colour-text-dim);
}

/* ── Log form fields ─────────────────────────────────────────────────────────── */

.log-field {
  margin-bottom: var(--space-6);
}

.log-label {
  display:       block;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semi);
  color:         var(--colour-text);
  margin-bottom: var(--space-3);
  line-height:   var(--leading-snug);
}

.log-label__hint {
  display:     block;
  font-size:   var(--text-xs);
  font-weight: var(--weight-normal);
  color:       var(--colour-text-dim);
  margin-top:  var(--space-1);
}

.log-label--sub {
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  color:         var(--colour-text-dim);
  margin-top:    var(--space-3);
  margin-bottom: var(--space-2);
}

/* ── Completion / pain toggle (Yes / Partly / No) ────────────────────────────── */

.log-toggle-group {
  display: flex;
  gap:     var(--space-2);
}

.log-toggle {
  flex:          1;
  padding:       var(--space-3) var(--space-2);
  background:    var(--colour-surface);
  border:        2px solid var(--colour-border);
  border-radius: var(--radius-md);
  color:         var(--colour-text-secondary);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  cursor:        pointer;
  text-align:    center;
  transition:    all var(--transition-fast);
  min-height:    48px;
}

.log-toggle:hover {
  border-color: var(--colour-border-light);
  color:        var(--colour-text);
}

.log-toggle.is-selected {
  border-color: var(--colour-accent);
  background:   var(--colour-accent-bg);
  color:        var(--colour-accent-light);
  font-weight:  var(--weight-semi);
}

/* ── RPE row ─────────────────────────────────────────────────────────────────── */

.log-rpe-row {
  display:         flex;
  gap:             var(--space-1);
  justify-content: space-between;
}

.log-rpe-btn {
  flex:            1;
  aspect-ratio:    1;
  min-width:       0;
  max-width:       44px;
  background:      var(--colour-surface);
  border:          1px solid var(--colour-border);
  border-radius:   var(--radius-sm);
  color:           var(--colour-text-dim);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  cursor:          pointer;
  transition:      all var(--transition-fast);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.log-rpe-btn:hover {
  border-color: var(--colour-accent);
  color:        var(--colour-text);
}

/* All buttons up to and including selected fill green */
.log-rpe-btn.is-filled {
  background:   var(--colour-accent-bg);
  border-color: var(--colour-accent);
  color:        var(--colour-accent-light);
}

/* The selected button itself is fully filled */
.log-rpe-btn.is-selected {
  background:  var(--colour-accent);
  border-color: var(--colour-accent);
  color:        #fff;
  font-weight: var(--weight-bold);
}

/* ── Pain areas (conditionally shown) ────────────────────────────────────────── */

.log-pain-areas {
  display:       none;
  margin-top:    var(--space-3);
  padding:       var(--space-3) var(--space-4);
  background:    var(--colour-surface-2);
  border:        1px solid var(--colour-border);
  border-radius: var(--radius-md);
}

.log-pain-areas.is-visible {
  display: block;
}

.log-chip-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-top: var(--space-2);
}

.log-chip {
  padding:       var(--space-2) var(--space-3);
  background:    var(--colour-surface);
  border:        1px solid var(--colour-border-light);
  border-radius: 999px;
  color:         var(--colour-text-secondary);
  font-size:     var(--text-sm);
  cursor:        pointer;
  transition:    all var(--transition-fast);
}

.log-chip:hover {
  border-color: var(--colour-accent);
  color:        var(--colour-text);
}

.log-chip.is-selected {
  background:   var(--colour-accent-bg);
  border-color: var(--colour-accent);
  color:        var(--colour-accent-light);
  font-weight:  var(--weight-medium);
}

/* ── Textarea ────────────────────────────────────────────────────────────────── */

.log-textarea {
  resize:      vertical;
  min-height:  80px;
  line-height: var(--leading-body);
}

/* ── Validation error ────────────────────────────────────────────────────────── */

.log-error {
  display:       none;
  font-size:     var(--text-sm);
  color:         var(--colour-error);
  margin-bottom: var(--space-4);
  padding:       var(--space-2) var(--space-3);
  background:    var(--colour-error-bg);
  border-left:   3px solid var(--colour-error);
  border-radius: var(--radius-sm);
}

.log-error.is-visible {
  display: block;
}

/* ── Backup status ───────────────────────────────────────────────────────────── */

.log-backup-status {
  font-size:   var(--text-xs);
  text-align:  center;
  margin-top:  var(--space-3);
  min-height:  1.4em;
}

.log-backup-status--ok      { color: var(--colour-success); }
.log-backup-status--pending { color: var(--colour-warning); }

/* ── What's next screen ──────────────────────────────────────────────────────── */

#screen-whats-next {
  background:     var(--colour-bg);
  flex-direction: column;
}

.wn-dynamic {
  max-width:   480px;
  margin:      0 auto;
  padding:     var(--space-6) var(--space-4) var(--space-16);
  width:       100%;
}

/* ── What's next header ──────────────────────────────────────────────────────── */

.wn-header {
  text-align:    center;
  margin-bottom: var(--space-6);
}

.wn-header__badge {
  display:        inline-block;
  background:     var(--colour-accent-bg);
  border:         1px solid rgba(61, 122, 79, 0.35);
  border-radius:  999px;
  padding:        var(--space-1) var(--space-4);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-accent-light);
  margin-bottom:  var(--space-4);
}

.wn-header__title {
  font-size:      var(--text-3xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-2);
}

.wn-header__pain-note {
  font-size:     var(--text-sm);
  color:         var(--colour-warning);
  background:    var(--colour-warning-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-top:    var(--space-3);
  line-height:   var(--leading-body);
  text-align:    left;
}

/* ── What's next session card ────────────────────────────────────────────────── */

.wn-next-card {
  background:    var(--colour-surface);
  border:        1px solid var(--colour-border);
  border-left:   3px solid var(--colour-accent);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow:    var(--shadow-card);
}

.wn-next-card__eyebrow {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-accent-light);
  margin-bottom:  var(--space-2);
}

.wn-next-card__name {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-1);
  line-height:    var(--leading-snug);
}

.wn-next-card__focus {
  font-size:     var(--text-sm);
  color:         var(--colour-text-secondary);
  margin-bottom: var(--space-3);
}

.wn-next-card__meta {
  display:   flex;
  gap:       var(--space-2);
  font-size: var(--text-xs);
  color:     var(--colour-text-dim);
}

/* ── What's next actions ─────────────────────────────────────────────────────── */

.wn-actions {
  margin-bottom: var(--space-5);
}

/* ── Coaching CTA ────────────────────────────────────────────────────────────── */

.wn-coaching {
  text-align:  center;
  padding-top: var(--space-4);
  border-top:  1px solid var(--colour-border);
}

.wn-coaching__link {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--colour-text-secondary);
}

.wn-coaching__link:hover {
  color: var(--colour-accent-light);
}

.wn-coaching__hint {
  font-size:  var(--text-xs);
  color:      var(--colour-text-dim);
  margin-top: var(--space-2);
  line-height: var(--leading-body);
}


/* =============================================================================
   Phase 6 additions — Progress screen
   ============================================================================= */

/* ── Progress screen container ───────────────────────────────────────────────── */

#screen-progress {
  background:     var(--colour-bg);
  flex-direction: column;
}

.prog-dynamic {
  max-width:      480px;
  margin:         0 auto;
  padding:        var(--space-5) var(--space-4) var(--space-16);
  width:          100%;
}

/* ── Section layout ──────────────────────────────────────────────────────────── */

.prog-section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom:  1px solid var(--colour-border);
}

.prog-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.prog-section--cta {
  padding-top:    var(--space-2);
  text-align:     center;
}

.prog-section__heading {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-text-dim);
  margin-bottom:  var(--space-4);
}

/* ── Header ──────────────────────────────────────────────────────────────────── */

.prog-header {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--colour-border);
}

.prog-header__service {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-1);
}

.prog-header__weeks {
  font-size:   var(--text-sm);
  color:       var(--colour-accent-light);
  font-weight: var(--weight-medium);
}

/* ── Empty states ────────────────────────────────────────────────────────────── */

.prog-empty {
  font-size:   var(--text-base);
  color:       var(--colour-text-dim);
  text-align:  center;
  padding:     var(--space-8) 0;
}

.prog-empty-note {
  font-size:   var(--text-sm);
  color:       var(--colour-text-dim);
  line-height: var(--leading-body);
  font-style:  italic;
}

/* ── Verification notice ─────────────────────────────────────────────────────── */

.prog-verification-notice {
  background:    var(--colour-surface-2);
  border:        1px solid var(--colour-border);
  border-left:   3px solid var(--colour-warning);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size:     var(--text-xs);
  color:         var(--colour-text-secondary);
  line-height:   var(--leading-body);
}

/* ── Score list ──────────────────────────────────────────────────────────────── */

.prog-score-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.prog-score-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) 0;
  border-bottom:   1px solid var(--colour-border);
  gap:             var(--space-4);
}

.prog-score-row:last-child {
  border-bottom: none;
}

.prog-score-row__label {
  font-size:  var(--text-sm);
  color:      var(--colour-text-secondary);
  flex:       1;
  min-width:  0;
}

.prog-score-row__value {
  font-size:   var(--text-base);
  font-weight: var(--weight-semi);
  color:       var(--colour-text);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* ── Training this week ──────────────────────────────────────────────────────── */

.prog-week-summary {
  display:   flex;
  gap:       var(--space-6);
  margin-bottom: var(--space-3);
}

.prog-week-stat {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

.prog-week-stat__number {
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-accent-light);
  line-height:    1;
}

.prog-week-stat__label {
  font-size:      var(--text-xs);
  color:          var(--colour-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top:     var(--space-1);
}

.prog-week-types {
  font-size:   var(--text-sm);
  color:       var(--colour-text-secondary);
  line-height: var(--leading-body);
}

/* ── Session history list ────────────────────────────────────────────────────── */

.prog-history-list {
  display:        flex;
  flex-direction: column;
}

.prog-history-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
  padding:         var(--space-3) 0;
  border-bottom:   1px solid var(--colour-border);
}

.prog-history-row:last-child {
  border-bottom: none;
}

.prog-history-row__left {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
  flex:           1;
}

.prog-history-row__date {
  font-size:      var(--text-xs);
  color:          var(--colour-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  flex-shrink:    0;
}

.prog-history-row__name {
  font-size:    var(--text-sm);
  color:        var(--colour-text);
  font-weight:  var(--weight-medium);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.prog-history-row__right {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

.prog-history-row__pain {
  font-size: var(--text-xs);
  color:     var(--colour-warning);
}

.prog-history-row__status {
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  border-radius: 999px;
  padding:       2px var(--space-2);
}

.prog-history-row__status--yes {
  background: var(--colour-success-bg);
  color:      #6dbf85;
}

.prog-history-row__status--partly {
  background: var(--colour-warning-bg);
  color:      var(--colour-warning);
}

.prog-history-row__status--no {
  background: var(--colour-error-bg);
  color:      #e07a7a;
}

.prog-history-row__status--unknown {
  background: var(--colour-surface-2);
  color:      var(--colour-text-dim);
}

.prog-history-row__rpe {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  font-family: var(--font-mono);
  min-width:   3ch;
  text-align:  right;
}

/* ── Coaching CTA ────────────────────────────────────────────────────────────── */

.prog-cta-hint {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  margin-top:  var(--space-3);
  line-height: var(--leading-body);
}

/* ── Home screen: View Progress button ───────────────────────────────────────── */

/* The home-actions div now contains a full-width button + a small link.
   Update layout so the button is full-width and the link sits below it. */

.home-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-top:     var(--space-2);
  align-items:    center;
}

/* Override the btn-full inside home-actions to ensure full width */
.home-actions .btn-full {
  width: 100%;
}


/* =============================================================================
   Phase 7 additions — Profile screen and inline edit panels
   ============================================================================= */

/* ── Profile screen container ────────────────────────────────────────────────── */

#screen-profile {
  background:     var(--colour-bg);
  flex-direction: column;
}

.prof-dynamic {
  max-width:   480px;
  margin:      0 auto;
  padding:     var(--space-5) var(--space-4) var(--space-16);
  width:       100%;
}

/* ── Page title ──────────────────────────────────────────────────────────────── */

.prof-page-title {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom:  1px solid var(--colour-border);
}

/* ── Section wrapper ─────────────────────────────────────────────────────────── */

.prof-section {
  padding-bottom:  var(--space-5);
  margin-bottom:   var(--space-5);
  border-bottom:   1px solid var(--colour-border);
}

.prof-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* ── Section header row ──────────────────────────────────────────────────────── */

.prof-section__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-3);
}

.prof-section__meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  flex:           1;
  min-width:      0;
}

.prof-section__label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-text-dim);
}

.prof-section__value {
  font-size:   var(--text-sm);
  color:       var(--colour-text);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.prof-section__value--truncate {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.prof-section__value--sub {
  font-size:   var(--text-xs);
  color:       var(--colour-text-secondary);
  font-weight: var(--weight-normal);
}

/* ── Edit button ─────────────────────────────────────────────────────────────── */

.prof-edit-btn {
  flex-shrink:    0;
  padding:        var(--space-1) var(--space-3);
  background:     var(--colour-surface-2);
  border:         1px solid var(--colour-border-light);
  border-radius:  var(--radius-sm);
  color:          var(--colour-text-secondary);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  cursor:         pointer;
  letter-spacing: var(--tracking-wide);
  transition:     all var(--transition-fast);
  min-height:     32px;
}

.prof-edit-btn:hover {
  border-color: var(--colour-accent);
  color:        var(--colour-accent-light);
}

/* ── Read-only badge ─────────────────────────────────────────────────────────── */

.prof-section__readonly {
  flex-shrink:    0;
  font-size:      var(--text-xs);
  color:          var(--colour-text-dim);
  letter-spacing: var(--tracking-wide);
  padding-top:    2px;
}

.prof-readonly-note {
  font-size:   var(--text-xs);
  color:       var(--colour-text-dim);
  margin-top:  var(--space-2);
  font-style:  italic;
}

/* ── Inline edit panel ───────────────────────────────────────────────────────── */

.prof-panel {
  overflow: hidden;
}

.prof-panel[hidden] {
  display: none;
}

.prof-panel.is-open {
  display: block;
}

.prof-panel__inner {
  padding-top: var(--space-4);
}

.prof-panel__hint {
  font-size:     var(--text-xs);
  color:         var(--colour-text-dim);
  margin-bottom: var(--space-4);
  font-style:    italic;
}

/* ── Panel error ─────────────────────────────────────────────────────────────── */

.prof-panel__error {
  display:       none;
  font-size:     var(--text-sm);
  color:         var(--colour-error);
  margin-bottom: var(--space-3);
  padding:       var(--space-2) var(--space-3);
  background:    var(--colour-error-bg);
  border-left:   3px solid var(--colour-error);
  border-radius: var(--radius-sm);
}

.prof-panel__error.is-visible {
  display: block;
}

/* ── Panel action bar ────────────────────────────────────────────────────────── */

.prof-panel__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-top:  var(--space-4);
  flex-wrap:   wrap;
}

/* ── "Saved ✓" confirmation message ─────────────────────────────────────────── */

.prof-saved-msg {
  font-size:   var(--text-sm);
  color:       var(--colour-success);
  font-weight: var(--weight-medium);
  display:     none;
}

.prof-saved-msg.is-visible {
  display: inline;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */

.prof-empty {
  font-size:  var(--text-base);
  color:      var(--colour-text-dim);
  text-align: center;
  padding:    var(--space-8) 0;
}


/* =============================================================================
   Phase 8 additions — Welcome, Disclaimer, Sticky Session Footer,
   Start New Goal, App Footer Bar, Mobile fixes
   ============================================================================= */

/* ── Welcome screen ──────────────────────────────────────────────────────────── */

#screen-welcome {
  background:      var(--colour-bg);
  align-items:     center;
  justify-content: center;
}

.welcome-outer {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        var(--space-6) var(--space-4);
  max-width:      420px;
  width:          100%;
  gap:            var(--space-4);
}

.welcome-outer__icon {
  width:           52px;
  height:          52px;
  border-radius:   var(--radius-lg);
  flex-shrink:     0;
}

.welcome-outer__brand {
  font-size:      var(--text-lg);
  font-weight:    var(--weight-bold);
  color:          var(--colour-text-dim);
  letter-spacing: var(--tracking-tight);
}

.welcome-dynamic {
  width: 100%;
}

/* Welcome card (rendered by showWelcomeScreen) */
.welcome-card {
  background:    var(--colour-surface);
  border:        1px solid var(--colour-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-6);
  text-align:    center;
  box-shadow:    var(--shadow-elevated);
}

.welcome-card__icon {
  width:           52px;
  height:          52px;
  background:      var(--colour-accent);
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-4);
}

.welcome-card__title {
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-3);
}

.welcome-card__body {
  font-size:     var(--text-sm);
  color:         var(--colour-text-secondary);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-5);
}

/* ── Disclaimer screen ───────────────────────────────────────────────────────── */

#screen-disclaimer {
  background:     var(--colour-bg);
  flex-direction: column;
}

.disclaimer-dynamic {
  max-width:   480px;
  margin:      0 auto;
  padding:     var(--space-5) var(--space-4) var(--space-16);
  width:       100%;
}

.disclaimer-full {
  /* content rendered by showDisclaimerScreen */
}

.disclaimer-full__title {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color:          var(--colour-text);
  margin-bottom:  var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom:  1px solid var(--colour-border);
}

.disclaimer-full__body {
  font-size:     var(--text-sm);
  color:         var(--colour-text-secondary);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-4);
}

.disclaimer-full__body strong {
  color:       var(--colour-text);
  font-weight: var(--weight-semi);
}

.disclaimer-full__contact {
  margin-top:    var(--space-5);
  padding-top:   var(--space-4);
  border-top:    1px solid var(--colour-border);
}

.disclaimer-full__contact-label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--colour-text-dim);
  margin-bottom:  var(--space-2);
}

.disclaimer-full__contact-link {
  font-size:   var(--text-sm);
  color:       var(--colour-accent-light);
}

/* ── Session sticky footer ───────────────────────────────────────────────────── */

/* The session screen must not clip the sticky footer.
   Make #screen-session a flex column with relative positioning. */
#screen-session {
  position: relative;
}

.session-sticky-footer {
  position:   sticky;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    20;
  background: linear-gradient(to top, var(--colour-bg) 80%, transparent);
  padding:    var(--space-3) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
}

/* Give session-dynamic enough bottom padding so content doesn't hide
   behind the sticky footer (~80px) */
.session-dynamic {
  padding-bottom: 88px;
}

/* Remove the old inline complete-block margin since button moved to footer */
.session-complete-block {
  display: none;
}

/* Session standards note */
.session-standards-note {
  font-size:     var(--text-xs);
  color:         var(--colour-text-dim);
  background:    var(--colour-surface-2);
  border-radius: var(--radius-sm);
  padding:       var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  line-height:   var(--leading-body);
}

/* ── App footer bar (home, progress, profile screens) ────────────────────────── */

.app-footer-bar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-6) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  font-size:       var(--text-xs);
  color:           var(--colour-text-dim);
  flex-wrap:       wrap;
  text-align:      center;
}

.app-footer-bar__link {
  background:      none;
  border:          none;
  color:           var(--colour-text-dim);
  font-size:       var(--text-xs);
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-footer-bar__link:hover {
  color: var(--colour-accent-light);
}

/* ── Profile screen — danger zone and footer ─────────────────────────────────── */

.prof-section--danger {
  border-color: transparent;
  margin-top:   var(--space-3);
}

.prof-danger-link {
  background:      none;
  border:          none;
  color:           var(--colour-error);
  font-size:       var(--text-sm);
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top:      var(--space-2);
  display:         block;
}

.prof-danger-link:hover {
  color: #e07a7a;
}

.prof-newgoal-confirm {
  margin-top: var(--space-3);
}

.prof-newgoal-confirm__text {
  font-size:     var(--text-sm);
  color:         var(--colour-text-secondary);
  background:    var(--colour-error-bg);
  border:        1px solid rgba(201, 76, 76, 0.25);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  line-height:   var(--leading-body);
}

/* btn-danger — used for confirm destructive action */
.btn-danger {
  background: var(--colour-error-bg);
  color:      var(--colour-error);
  border:     1px solid rgba(201, 76, 76, 0.35);
}

.btn-danger:hover {
  background: rgba(201, 76, 76, 0.22);
}

.prof-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-4) 0 var(--space-2);
  font-size:       var(--text-xs);
  flex-wrap:       wrap;
  text-align:      center;
  border-top:      1px solid var(--colour-border);
  margin-top:      var(--space-4);
}

.prof-footer__link {
  background:      none;
  border:          none;
  color:           var(--colour-text-dim);
  font-size:       var(--text-xs);
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prof-footer__link:hover { color: var(--colour-accent-light); }

.prof-footer__sep {
  color: var(--colour-text-dim);
}

/* ── Mobile viewport fixes ───────────────────────────────────────────────────── */

/* RPE buttons: minimum touch target on narrow screens (375px iPhone SE) */
@media (max-width: 400px) {
  .log-rpe-row {
    gap: 3px;
  }
  .log-rpe-btn {
    font-size: var(--text-xs);
    min-height: 40px;
  }
}

/* Onboarding nav: stack on very small screens */
@media (max-width: 360px) {
  .ob-step-nav--two {
    grid-template-columns: 1fr;
  }
}

/* App chrome back button: ensure it doesn't overflow */
@media (max-width: 380px) {
  .app-chrome__back {
    font-size: var(--text-xs);
  }
  .app-chrome__name {
    font-size: var(--text-sm);
  }
}

/* Home actions: tighten vertical spacing on small screens */
@media (max-width: 400px) {
  .home-actions {
    gap: var(--space-2);
  }
  .home-actions .btn {
    padding-top:    var(--space-2);
    padding-bottom: var(--space-2);
    font-size:      var(--text-sm);
  }
}