@import url('/static/design/v3/tokens.css');

@import url('/static/design/v3/components.css');

@font-face {
  font-family:'Bricolage Grotesque';
  src:url('/static/fonts/bricolage-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}

[hidden] {
  display:none !important;
}

html {
  min-width:320px;
}

body {
  padding: max(env(safe-area-inset-top),var(--telegram-safe-top,0px)) max(env(safe-area-inset-right),var(--telegram-safe-right,0px)) max(env(safe-area-inset-bottom),var(--telegram-safe-bottom,0px)) max(env(safe-area-inset-left),var(--telegram-safe-left,0px));
}

button,a,input {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.55;
}
a {
  color:var(--c-flare-ink);
}
svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.site-header {
  max-width:520px;
  margin:auto;
  padding:var(--s-5) var(--gutter) var(--s-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand {
  color:var(--c-ink);
  text-decoration:none;
  font:var(--t-title);
  letter-spacing:var(--tracking-display);
}

#main {
  max-width:520px;
  margin:auto;
}
.site-footer {
  display:none;
}
.legacy-heading {
  display:none;
}

.sw-screen {
  min-height:calc(100svh - 80px);
  padding-top:var(--s-4);
  padding-bottom:calc(110px + var(--telegram-safe-bottom,0px));
  gap:var(--s-5);
}

.sw-screen:has(.sw-welcome-tile) {
  min-height:calc(100svh - 80px);
  padding-bottom:var(--s-6);
}
.sw-welcome-tile {
  margin-top:64px;
  background:var(--c-surface);
  box-shadow:0 0 0 6px var(--c-flare-tint);
}
.sw-intro {
  margin:0;
  font-size:18px;
}
.sw-center {
  text-align:center;
  margin:0;
}

.c-msg--coach {
  max-width:100%;
  margin-top:calc(-1 * var(--s-2));
}
.c-coach-sig {
  margin-top:0;
}
.c-card {
  flex-shrink:0;
}
.c-chips {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
}
.c-chip.is-selected {
  background:var(--c-flare-tint);
  color:var(--c-flare-ink);
  border-color:var(--c-flare);
}

.c-tabbar {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,520px);
  z-index:5;
  padding-bottom:max(env(safe-area-inset-bottom),var(--telegram-safe-bottom,0px),var(--s-3));
}

.c-tab {
  border:0;
  background:transparent;
  color:var(--c-ink-2);
}
.c-tab[aria-current=page] {
  color:var(--c-ink);
}
.c-tab[aria-current=page] svg {
  color:var(--c-flare);
}

.c-day-row {
  border:0;
  width:100%;
  text-align:left;
  color:var(--c-ink);
  background:var(--c-surface);
}
.sw-day-copy {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
}
.sw-day-copy b {
  overflow-wrap:anywhere;
}

.c-zoom-stage {
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
}
.sw-ridge-bar {
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  border-radius:var(--r-xs) var(--r-xs) 2px 2px;
  height:var(--h);
  min-height:12px;
  background:var(--c-flare-tint);
}
.sw-ridge-bar.is-now {
  background:var(--c-flare);
  box-shadow:0 0 0 3px var(--c-flare-tint);
}
.c-ridge:has(button) {
  padding-block:var(--s-2);
}
.c-ridge-legend {
  margin-top:var(--s-2);
}

.sw-fuel {
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
}
.sw-fuel-total {
  display:flex;
  align-items:center;
  gap:var(--s-4);
}
.sw-fuel-total p {
  margin:var(--s-2) 0;
}
.sw-ring {
  width:100px;
  height:100px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-pill);
  background:radial-gradient(closest-side,var(--c-surface) 76%,transparent 77%),conic-gradient(var(--c-flare) var(--progress),var(--c-surface-2) 0);
}
.sw-ring b {
  font:var(--t-num-m);
}
.sw-ring small {
  font:var(--t-footnote);
  color:var(--c-ink-2);
  font-size:11px;
}
.sw-warning {
  border-left:4px solid var(--c-sun);
  padding:var(--s-3);
  background:var(--c-sun-tint);
  color:var(--c-sun-ink);
  margin:0;
  border-radius:var(--r-xs);
}

.landing {
  padding:var(--gutter);
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
}
.landing h1 {
  font:var(--t-display-xl);
  letter-spacing:var(--tracking-display);
}
.landing p {
  margin:0;
  color:var(--c-ink-2);
}
.field {
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
}
.field input {
  width:100%;
  min-width:0;
  min-height:var(--tap);
  border:1px solid var(--c-line);
  background:var(--c-surface);
  border-radius:var(--r-sm);
  padding:var(--s-3);
}
.text-button {
  border:0;
  background:transparent;
  min-height:var(--tap);
  color:var(--c-ink-2);
  padding:var(--s-2);
}
.button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:56px;
  border-radius:var(--r-pill);
  padding:var(--s-3) var(--s-5);
  border:0;
  text-decoration:none;
  font-size:19px;
  font-weight:700;
}
.primary {
  background:var(--c-flare);
  color:white;
}
.secondary {
  background:var(--c-surface-2);
  color:var(--c-ink);
}
.full-width {
  width:100%;
}
.email-login form {
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
}
.email-actions {
  display:flex;
  justify-content:space-between;
}
.notice {
  margin:var(--s-3) var(--gutter);
  padding:var(--s-4);
  background:var(--c-leaf-tint);
  color:var(--c-leaf-ink);
  border-radius:var(--r-md);
}
.notice.error,.error,.connection-error {
  color:var(--c-rose-ink);
}
.notice.error {
  background:var(--c-rose-tint);
}
.fine-print,.privacy-note,.form-explainer,.email-status,.local-inbox-note,.garmin-feedback,.chart-note,.day-note {
  font:var(--t-footnote);
  color:var(--c-ink-2);
}
.skip-link {
  position:absolute;
  left:-9999px;
}
.skip-link:focus {
  left:var(--gutter);
  top:var(--s-2);
  z-index:10;
}
.initial-loading {
  padding:var(--gutter);
}
.key-input-row {
  display:flex;
  gap:var(--s-2);
}
.garmin-key-setup,.connection-card {
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
}
.connection-card {
  margin:0 var(--gutter) var(--s-5);
}
.connection-heading {
  display:flex;
  justify-content:space-between;
  gap:var(--s-2);
  align-items:center;
}
.connection-heading h2 {
  font:var(--t-title);
  margin:0;
}
.connection-status {
  font:var(--t-footnote);
}
.connection-card form {
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.connection-card p {
  margin:0;
}
.connection-description {
  color:var(--c-ink-2);
}
.connection-card:has(#connect-form[hidden]) .key-settings-link {
  display:none;
}

.nutrition-panel {
  margin:0 var(--gutter) 110px;
}
.section-label,.day-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s-2);
}
.section-label h2 {
  font:var(--t-headline);
  margin:0;
}
.section-label>span,.day-status {
  font:var(--t-footnote);
  color:var(--c-ink-2);
}
.nutrition-chart {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--s-1);
  padding-top:var(--s-5);
}
.chart-day {
  padding:0;
  min-height:150px;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s-2);
  color:var(--c-ink-2);
}
.bar-slot {
  height:125px;
  width:100%;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:var(--s-1);
}
.bar {
  height:var(--bar-height);
  min-height:2px;
  max-width:24px;
  width:70%;
  border-radius:var(--r-xs) var(--r-xs) 0 0;
  background:var(--c-flare);
}
.partial .bar,.partial-key {
  background:repeating-linear-gradient(-45deg,var(--c-flare) 0 4px,var(--c-flare-tint) 4px 8px);
}
.no-meals .bar,.unknown .bar {
  background:var(--c-line);
}
.bar-label {
  font:var(--t-footnote);
  font-size:10px;
}
.day-label {
  font:var(--t-footnote);
}
.chart-day[aria-pressed=true] .day-label {
  color:var(--c-flare-ink);
  font-weight:700;
}
.nutrition-day {
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--c-line);
}
.day-heading h3 {
  font:var(--t-headline);
  margin:0;
}
.calorie-total {
  display:flex;
  gap:var(--s-2);
  align-items:baseline;
}
.calorie-total>span:first-child {
  font:var(--t-num-xl);
}
.calorie-unit {
  font:var(--t-footnote);
  color:var(--c-ink-2);
}
.macros {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-2);
}
.macros dt {
  font:var(--t-footnote);
}
.macros dd {
  margin:var(--s-1) 0;
  font:var(--t-num-m);
}
.macros>div:nth-child(1){color:var(--c-berry-ink);
}
.macros>div:nth-child(2){color:var(--c-sun-ink);
}
.macros>div:nth-child(3){color:var(--c-sky-ink);
}
.partial-key {
  display:inline-block;
  width:14px;
  height:14px;
  vertical-align:middle;
  border-radius:var(--r-xs);
}
.nutrition-message {
  padding-block:var(--s-4);
}
.activities-panel {
  margin:var(--gutter);
}
.activity-list {
  padding:0;
  list-style:none;
}
.activity {
  padding:var(--s-3);
  border-top:1px solid var(--c-line);
}
.activity-metrics,.activity-summary {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
}
.activity-metric {
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
}
.metric-label {
  font:var(--t-label);
  color:var(--c-ink-2);
}
.activity-title {
  font:var(--t-headline);
}
.activity-date {
  font:var(--t-footnote);
  color:var(--c-ink-2);
}

@media(max-width:359px){.c-hero__stats {
  gap:var(--s-4);
}
.c-hero__stats b {
  font:var(--t-num-m);
}
.sw-fuel-total {
  gap:var(--s-3);
}
.sw-ring {
  width:88px;
  height:88px;
}
.c-stat__value {
  font-size:24px;
}
.day-heading {
  align-items:flex-start;
  flex-direction:column;
}
}

.c-tab {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-1);
  padding:var(--s-2) 0;
  font:600 11px/1 var(--font-text);
  min-height:48px;
}

.sw-screen > .connection-card,.sw-screen > .nutrition-panel {
  margin:0;
}

/* Branching forms can wrap beyond one viewport. Keep every choice above its CTA. */
.sw-screen > .c-dock {
  position: static;
  flex-shrink: 0;
}

/* Shared React components: mobile retains v3; roomy browsers get a two-column day. */
.sw-baseline-group { display:flex; flex-direction:column; gap:var(--s-3); }
.sw-baseline-group h2 { margin:0; }
.sw-today-training { display:flex; flex-direction:column; gap:var(--s-5); }
.sw-coach-message { display:flex; flex-direction:column; gap:var(--s-5); }
.sw-page-heading { display:flex; flex-direction:column; gap:var(--s-3); }
.sw-page-heading h1 { margin:0; }
.sw-fuel-layout { display:flex; flex-direction:column; gap:var(--s-5); }
.sw-fuel-layout > .nutrition-panel { margin:0; }
.sw-garmin-wrap .connection-card { margin:0; }
.sw-garmin-wrap .activities-panel { margin:var(--s-4) 0 0; }
.auth-alternative { margin-bottom:var(--s-4)!important; }
.landing .sw-welcome-tile { margin-top:var(--s-6); }
.sw-onboarding { max-width:520px; margin-inline:auto; }
@media(min-width:900px) {
  html:not(.telegram-miniapp) .site-header { max-width:1120px; padding-top:var(--s-6); }
  html:not(.telegram-miniapp) #main { max-width:1120px; }
  html:not(.telegram-miniapp) .sw-member-screen { max-width:1120px; min-height:calc(100svh - 100px); padding-top:var(--s-6); padding-bottom:140px; }
  html:not(.telegram-miniapp) .sw-member-screen:has(.sw-today-training) { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-content:start; align-items:start; }
  html:not(.telegram-miniapp) .sw-page-heading { grid-column:1/-1; }
  html:not(.telegram-miniapp) .sw-coach-message { grid-column:1/-1; max-width:760px; }
  html:not(.telegram-miniapp) .sw-today-training { grid-column:1; grid-row:3/5; }
  html:not(.telegram-miniapp) .sw-today-fuel { grid-column:2; grid-row:3; }
  html:not(.telegram-miniapp) .sw-change-focus { grid-column:2; justify-self:start; }
  html:not(.telegram-miniapp) .sw-fuel-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:start; }
  html:not(.telegram-miniapp) .c-tabbar { width:min(calc(100% - 2 * var(--gutter)),720px); bottom:var(--s-4); border-radius:var(--r-lg); border:1px solid var(--c-line); box-shadow:var(--e-card); }
  html:not(.telegram-miniapp) .landing { max-width:560px; margin-inline:auto; min-height:calc(100svh - 100px); }
  html:not(.telegram-miniapp) .c-zoom-stage { max-width:900px; width:100%; margin-inline:auto; }
}

/* Welcome is the only onboarding screen with the stronger haze/contours. */
.sw-onboarding:has(.sw-welcome-tile) { position:relative; isolation:isolate; overflow:hidden; background-image:var(--c-haze); }
.sw-onboarding:has(.sw-welcome-tile)::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:currentColor; opacity:var(--topo-opacity); -webkit-mask:var(--topo) right -60px top -40px / 420px no-repeat; mask:var(--topo) right -60px top -40px / 420px no-repeat; }