/* App shell and page composition, using the same tokens as the interactive hero. */
.app-body { background:var(--color-canvas); }
.app-header { background:var(--color-canvas); border-bottom:1px solid var(--color-border); }
.app-header__inner { max-width:1280px; min-height:96px; padding:16px 40px; gap:48px; }
.app-brand { gap:12px; font-size:26px; line-height:.95; letter-spacing:-1px; flex-shrink:0; }
.app-brand__mark { display:grid; place-items:center; width:42px; height:44px; padding-right:3px; border-radius:4px; background:var(--color-ink); color:var(--color-surface); font-size:30px; letter-spacing:-2px; }
.app-brand__sub { display:block; margin-top:5px; font:11px var(--font-mono); letter-spacing:1.4px; text-transform:uppercase; }
.app-menu { margin-left:auto; }
.app-nav { justify-content:flex-end; gap:6px; }
.app-nav__link { border-radius:6px; padding:12px; font-weight:500; }
.app-nav__link--active,.app-nav__link--active:hover { color:var(--color-brand); background:var(--color-brand-soft); }
.app-nav form.button_to { margin-left:10px; }
.app-menu__toggle {
  display:none;
  place-items:center;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--color-ink);
  cursor:pointer;
}
.app-menu__toggle:hover { background:var(--color-surface-sunken); }
.app-menu.is-open .app-menu__toggle { background:var(--color-brand-soft); color:var(--color-brand); }
.app-menu__bars {
  position:relative;
  display:block;
  width:18px;
  height:12px;
}
.app-menu__bars span {
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:1px;
  background:currentColor;
  transition:transform .15s ease,opacity .15s ease,top .15s ease;
}
.app-menu__bars span:nth-child(1) { top:0; }
.app-menu__bars span:nth-child(2) { top:5px; }
.app-menu__bars span:nth-child(3) { top:10px; }
.app-menu.is-open .app-menu__bars span:nth-child(1) { top:5px; transform:rotate(45deg); }
.app-menu.is-open .app-menu__bars span:nth-child(2) { opacity:0; }
.app-menu.is-open .app-menu__bars span:nth-child(3) { top:5px; transform:rotate(-45deg); }
.app-main { max-width:1280px; padding:44px 40px 64px; }
.app-footer { background:transparent; }
.app-footer__inner { max-width:1280px; padding-inline:40px; }
.app-body h1 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; line-height:1.08; }
.app-body h2 { letter-spacing:-.035em; }
.app-eyebrow { margin:0 0 12px; font:500 11px/1.5 var(--font-mono); color:var(--color-ink-muted); letter-spacing:1px; text-transform:uppercase; }
.page-lede { max-width:660px; margin:0 0 28px; color:var(--color-ink-muted); font-size:18px; }
.app-body .btn { min-height:44px; border-radius:6px; font-weight:500; }
.app-body .btn--sm { min-height:36px; }
.app-body .btn--xs { min-height:30px; }
.app-body .btn--danger { color:var(--color-danger); }
.app-body :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]),textarea,select) { border-radius:6px; }
.app-body :is(a,button,input,textarea,select,summary):focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
.app-body :is(.card,.editor-card,.decision-card) { box-shadow:none; }
.app-body .card { padding:28px; }
.app-body .provider-badge { color:var(--color-ink); background:var(--color-surface-sunken); border:1px solid var(--color-border); border-radius:6px; }
.app-body .provider-badge--strava { background:var(--color-strava); color:#fff; border-color:transparent; }
.app-body .provider-badge--garmin { background:#007cc3; color:#fff; border-color:transparent; }
.app-body .provider-badge--wahoo { background:#1a1f36; color:#fff; border-color:transparent; }
.app-body .provider-badge--polar { background:#d1002c; color:#fff; border-color:transparent; }
.app-body .provider-badge--karoo { background:#111; color:#fff; border-color:transparent; }
.app-body .provider-badge--intervals_icu { background:#5b6570; color:#fff; border-color:transparent; }
.app-body .provider-badge .provider-mark { display:block; width:1.05em; height:1.05em; }
.app-body .service-action--connect { background:var(--color-brand-soft); color:var(--color-brand); border-color:var(--color-border); }
.app-body .service-action--connect:hover { background:var(--color-brand); color:var(--color-surface); }
.app-body .dash-fab {
  min-height: 3.5rem;
  border-radius: 999px;
}
.dash-head__title { font-weight:700; }
.stat__num { font:500 29px/1.1 var(--font-mono); letter-spacing:-1px; }
/* Connections stay compact; account controls live on the Connections page. */
.connection-summary {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.connection-summary[hidden], .connection-prompt[hidden] { display: none; }
.connection-summary__head, .connection-summary__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.connection-summary__head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.connection-summary__body { margin-top: 8px; }
.connection-summary__services { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.connection-summary__icons { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.connection-summary__icons li { display: flex; }
.connection-summary__icons .provider-badge { width: 25px; height: 25px; font-size: 12px; }
.connection-summary__count { color: var(--color-ink-muted); font-size: 12px; }
.connection-summary__link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  font: 600 12px/1.4 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.connection-summary__link[hidden] { display: none; }
.connection-summary__link:hover { text-decoration: underline; }
.connection-summary__notice { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); font-size: 12px; }
.connection-summary__notice a { color: var(--color-warning); }
.connection-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.connection-prompt__copy { flex: 1 1 320px; }
.connection-prompt h2 { margin: 0 0 6px; font-size: 21px; }
.connection-prompt p { max-width: 560px; margin: 0; color: var(--color-ink-muted); font-size: 15px; }
.connection-prompt__providers { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--color-ink-muted); font-size: 12px; }
.connection-prompt__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.connections-tabs { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.connections-tabs a { padding: 12px 0; border-bottom: 2px solid transparent; color: var(--color-ink-muted); text-decoration: none; }
.connections-tabs a[aria-current=page] { border-bottom-color: var(--color-brand); color: var(--color-brand); }
.connections-empty { padding: 16px 0; color: var(--color-ink-muted); }
.connections-page .rowitem { scroll-margin-top: 24px; }
.connections-tabs + .rowitem { border-top: 0; }
@media (max-width: 640px) {
  .connections-page .rowitem { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; gap: 8px 12px; }
  .connections-page .rowitem__meta { grid-column: 2; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
}
@media (pointer: coarse) {
  .connection-summary__link, .connection-summary__notice a { min-height: 44px; }
  .connection-summary__notice a { display: inline-flex; align-items: center; }
  .connections-page .service-action { min-height: 44px; }
}
.dash-create { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; background:var(--color-surface); }
.today-gen { border:0; border-radius:0; box-shadow:none; padding:32px; }
.today-gen__title { font-size:26px; font-weight:700; }
.today-gen__lede { max-width:400px; margin:12px 0 24px; font-size:16px; }
.today-gen__form { gap:16px; }
.today-gen__foot { margin-top:24px; max-width:420px; line-height:1.7; }
.sport-seg { border-radius:6px; padding:4px; }
.sport-seg label { border-radius:4px; min-height:38px; display:flex; align-items:center; }
.sport-seg input:checked + label { color:var(--color-brand); background:var(--color-brand-soft); box-shadow:none; }
.assistant-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:32px; background:linear-gradient(160deg,var(--color-surface),var(--color-canvas)); border-left:1px solid var(--color-border); }
.assistant-card h2 { font-size:25px; margin:0 0 12px; }
.assistant-card p:not(.app-eyebrow) { color:var(--color-ink-muted); margin:0 0 20px; font-size:15px; }
.assistant-example { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:16px; margin-bottom:20px; font-size:15px; }
.assistant-card__caption { margin-top:8px; color:var(--color-ink-muted); font:11px var(--font-mono); }
.services-grid { gap:8px; }
.services-card { box-shadow:none; border-radius:8px; }
.services-card--compact { padding:8px 10px; gap:8px; }
.services-card__desc { line-height:1.5; }
.week__grid { border-radius:8px; }
.context-card { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px; margin:24px 0; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); }
.context-card h2,.context-card h3 { margin:0 0 8px; font-size:22px; }
.context-card p { margin:0; max-width:620px; color:var(--color-ink-muted); }
.context-card .app-eyebrow { margin-bottom:10px; }
.context-card__actions { display:flex; flex-wrap:wrap; gap:10px; }
.install-banner { margin:0; }
.install-banner__details {
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
}
.install-banner__summary {
  display:flex;
  align-items:center;
  gap:12px;
  list-style:none;
  cursor:pointer;
  padding:16px 20px;
}
.install-banner__summary::-webkit-details-marker { display:none; }
.install-banner__summary .app-eyebrow { margin:0; }
.install-banner__toggle {
  margin-left:auto;
  font:700 12px var(--font-sans);
  color:var(--color-brand);
}
.install-banner__details[open] .install-banner__show,
.install-banner__details:not([open]) .install-banner__hide { display:none; }
.install-banner__panel {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:0 20px 20px;
  flex-wrap:wrap;
}
.install-banner__copy h2 { margin:0 0 8px; font-size:22px; }
.install-banner__copy p { margin:0; max-width:620px; color:var(--color-ink-muted); }
.install-banner .platform-marks { margin-top:12px; }
.install-banner__actions { display:flex; flex-wrap:wrap; gap:10px; }
@media (min-width:761px) {
  .install-banner { display:none; }
}
@media (min-width:1001px) {
  .app-menu { display:flex; flex:1; min-width:0; justify-content:flex-end; }
  .app-menu .app-nav { display:flex; }
}
@media (display-mode: standalone) {
  .install-banner { display:none !important; }
}
html.bt-install-dismissed .install-banner { display:none !important; }
.connections-page>.rowlist { background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:8px 24px; }
.connections-page .rowitem { padding-block:24px; }
.calendar-connect { margin-bottom:32px; }
.calendar__grid { border-radius:8px; overflow:hidden; border-color:var(--color-border); background:var(--color-border); }
.calendar__cell { min-height:130px; padding:10px; }
.calendar__dow { padding:12px 0; font-family:var(--font-mono); font-weight:400; }
.calendar__date { font-family:var(--font-mono); font-size:12px; margin-bottom:12px; }
.calendar__cell.is-today .calendar__date { color:var(--color-brand); font-weight:600; }
.calendar__legend { margin-top:20px; }
.section-heading { margin-bottom:24px; align-items:center; }
.workout-show__meta { margin-bottom:24px; }
.session-profile { display:flex; align-items:flex-end; gap:2px; height:170px; margin:24px 0 32px; border-bottom:1px solid var(--color-border); background:repeating-linear-gradient(to top,transparent 0,transparent 39px,var(--color-border) 40px,transparent 41px); padding-top:16px; }
.session-profile__bar { flex:var(--segment-size) 1 0; min-width:0; height:var(--segment-height); background:var(--color-brand); border-radius:3px 3px 0 0; opacity:.8; }
.wsteps { padding:24px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; }
.delivery { margin-top:32px; padding:28px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); scroll-margin-top:28px; }
.delivery-next { background:var(--color-brand-soft); border:0; margin:20px 0; }
.delivery__actions { gap:10px; }
.delivery-details { margin-top:24px; font-size:14px; }
.delivery-details summary { cursor:pointer; color:var(--color-ink-muted); }
.app-main:has(.settings-layout) { max-width:1280px; }
.settings__intro { margin-bottom:32px; }
.settings-layout { gap:40px; }
.settings-toc { font-size:14px; }
.settings-toc__list a { border-radius:4px; }
.settings section[id] { scroll-margin-top:30px; }
.auth { max-width:480px; margin:36px auto; }
.auth .card { padding:36px; }
.auth h1 { font-size:36px; }
.auth__intent { color:var(--color-ink-muted); line-height:1.6; }
.auth__form { margin-top:24px; }
.auth__followup .auth__form { margin-top:0; }
.skip-link:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link:focus { position:fixed; top:10px; left:10px; z-index:100; padding:12px; background:var(--color-surface); }
@media(max-width:1000px) {
  .app-header__inner { padding:10px 20px; flex-wrap:nowrap; gap:12px; min-height:56px; align-items:center; }
  .app-header__inner:has(.app-menu:not(.app-menu--js)) { flex-wrap:wrap; align-items:flex-start; }
  .app-menu { position:relative; }
  .app-menu--js .app-menu__toggle { display:grid; }
  .app-menu:not(.app-menu--js) { flex-basis:100%; }
  .app-menu:not(.app-menu--js) .app-nav {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:8px 0 0;
  }
  .app-menu--js .app-nav {
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:30;
    min-width:16rem;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:8px;
    border:1px solid var(--color-border);
    border-radius:8px;
    background:var(--color-surface);
    box-shadow:var(--shadow-md);
  }
  .app-menu--js.is-open .app-nav { display:flex; }
  .app-nav__link { font-size:15px; justify-content:flex-start; padding:12px; }
  .app-nav form.button_to { margin:8px 0 0; width:100%; padding-top:8px; border-top:1px solid var(--color-border); }
  .app-nav__signout { display:flex; align-items:center; width:100%; min-height:44px; font-size:15px; justify-content:flex-start; padding:12px; }
  .today-gen,.assistant-card { padding:24px; }
  .today-gen__form { flex-wrap:wrap; }
  .context-card { flex-wrap:wrap; }
}
@media(max-width:760px) {
  .app-header__inner { padding:10px 20px; }
  .app-main { padding:20px 20px 44px; }
  .app-footer__inner { padding-inline:20px; }
  .dashboard { gap:20px; }
  .dash-head__hi { margin-bottom:4px; }
  .app-body .dash-head__title { font-size:1.7rem; margin-bottom:6px; }
  .stat-row { gap:16px; }
  .stat__num { font-size:22px; }
  .dash-create { grid-template-columns:minmax(0,1fr); }
  .assistant-card { border-left:0; border-top:1px solid var(--color-border); }
  .calendar__cell { min-height:84px; padding:4px; }
  .calendar__date { margin-bottom:6px; }
  .calendar__dow { font-size:10px; }
  .context-card { gap:16px; padding:20px; }
  .context-card .btn { white-space:normal; }
  .section-heading__actions { flex-wrap:wrap; }
  .session-profile { height:130px; }
  .delivery,.wsteps { padding:20px; }
  .connections-page>.rowlist { padding-inline:16px; }
  .settings-layout { display:block; }
  .settings-toc { position:static; margin-bottom:24px; }
  .settings-toc__list { display:flex; flex-wrap:wrap; gap:4px 12px; }
  .auth { margin:12px auto; }
  .auth .card { padding:24px; }
  .install-banner__summary { padding:12px 14px; }
  .install-banner__panel { padding:0 14px 14px; }
  .install-banner__copy h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .app-body * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

.day-workout { display:flex; flex-direction:column; gap:3px; padding:8px; border-left:2px solid var(--color-brand); border-radius:4px; color:var(--color-ink); background:var(--color-brand-soft); text-decoration:none; font-size:12px; min-width:0; overflow-wrap:anywhere; }
.day-workout small { font:10px var(--font-mono); color:var(--color-brand); }
.week .day-workout { width:100%; min-height:3.5rem; justify-content:center; }
.week .day-workout__name { width:100%; max-width:24ch; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar__cell .wpill { flex-wrap:wrap; }
.wpill__name { width:100%; font-size:11px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.editor-session-profile { margin:12px 0; }

.session-profile[hidden] { display:none; }
@media(max-width:600px) {
  .calendar__cell .grade { display:none; }
  .calendar__cell .wpill { padding:3px; }
  .calendar__cell .wpill__sport { font-size:9px; }
  .calendar__cell .wpill__name { font-size:9px; }
}

.calendar__planned-list { display:none; }
@media(max-width:600px) {
  .calendar__planned-list { display:block; margin:24px 0; }
  .calendar__planned-list h3 { font-size:18px; }
  .calendar__planned-list .day-workout { margin-top:8px; padding:12px; font-size:14px; }
}

.app-body .app-header {
  padding-top: env(safe-area-inset-top, 0px);
}
.app-body .app-header__inner {
  padding-left: max(40px, env(safe-area-inset-left, 0px));
  padding-right: max(40px, env(safe-area-inset-right, 0px));
}
.app-body .app-main {
  padding-left: max(40px, env(safe-area-inset-left, 0px));
  padding-right: max(40px, env(safe-area-inset-right, 0px));
}
.app-body .app-footer {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: max(40px, env(safe-area-inset-left, 0px));
  padding-right: max(40px, env(safe-area-inset-right, 0px));
}
/* Dashboard: one weekly summary, with connections alongside on wide screens. */
.dash-stage {
  display: grid;
  gap: 20px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "rail"
    "plan";
}
.dash-head { grid-area: head; min-width: 0; }
.dash-rail { grid-area: rail; }
.dash-plan { grid-area: plan; min-width: 0; }
.dash-upcoming { grid-column: 1 / -1; }
.dash-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.dash-head__hi, .dash-head__title { overflow-wrap: anywhere; }
.dash-head__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  color: var(--color-ink-muted);
  font: 500 15px/1.5 var(--font-mono);
}
.dash-head__metric {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.dash-head__metric dt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dash-head__metric dd {
  order: -1;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.dash-head__separator { margin-right: 12px; }
@media (min-width: 761px) {
  .dash-head__metrics { font-size: 18px; gap: 8px 20px; }
  .dash-head__metric dt {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .dash-head__separator { margin-right: 20px; }
}
.dash-plan { display: grid; gap: 28px; }
.week__note {
  margin: -4px 0 12px;
  color: var(--color-ink-muted);
  font-size: 15px;
}
@media (min-width: 960px) {
  .dash-stage {
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: 32px;
    row-gap: 28px;
    grid-template-areas:
      "head rail"
      "plan plan";
  }
}

@media (max-width: 760px) {
  .app-body .app-header__inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .app-body .app-main {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .app-body .app-footer {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}