/* AROURI internal reference UI. Navigation is intentionally outside this stylesheet. */
:root{
  --flow-accent:var(--amber);
  --flow-accent-soft:color-mix(in srgb,var(--amber) 14%,transparent);
  --flow-accent-faint:color-mix(in srgb,var(--amber) 7%,transparent);
  --flow-panel:color-mix(in srgb,var(--surf) 94%,var(--bg));
  --flow-panel-2:color-mix(in srgb,var(--surf-2) 90%,var(--bg));
  --flow-line:color-mix(in srgb,var(--line) 82%,var(--amber) 18%);
  --flow-shadow:0 22px 48px -38px rgba(var(--accent-rgb),.82),0 12px 30px -26px rgba(0,0,0,.55);
}
#sec-today,#sec-train,#sec-fuel,#sec-meal,#sec-body,#sec-mind,#sec-stats{position:relative;isolation:isolate}
#sec-today>.section:first-child,#sec-train>.section:first-child,#sec-fuel>.section:first-child,#sec-meal>.section:first-child,#sec-body>.section:first-child,#sec-mind>.section:first-child,#sec-stats>.section:first-child{margin-bottom:16px}
#sec-today>.card,#sec-train>.card,#sec-fuel>.card,#sec-meal>.card,#sec-body>.card,#sec-mind>.card,#sec-stats>.card,#sec-today>.flow-details,#sec-train>.flow-details,#sec-fuel>.flow-details,#sec-meal>.flow-details,#sec-body>.flow-details,#sec-mind>.flow-details,#sec-stats>.flow-details{margin-top:14px}
.flow-primary{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--amber) 54%,var(--line));background:linear-gradient(135deg,var(--flow-accent-faint),transparent 42%),var(--flow-panel);box-shadow:var(--flow-shadow)}
.flow-primary:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 58%,color-mix(in srgb,var(--amber) 5%,transparent))}
.flow-primary>*{position:relative;z-index:1}.flow-primary h2,.flow-primary h3{margin:4px 0 8px}.flow-primary .big{max-width:18ch}
.flow-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px}.flow-section-copy{max-width:68ch}
.flow-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0}.flow-kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow-kpi{position:relative;min-width:0;padding:14px 15px;border:1px solid var(--flow-line);border-radius:8px;background:linear-gradient(145deg,var(--flow-panel-2),var(--flow-panel))}
.flow-kpi:before{content:'';position:absolute;left:14px;top:0;width:28px;height:2px;background:var(--flow-accent);opacity:.72}
.flow-kpi span{display:block;color:var(--faint);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:0}.flow-kpi b{display:block;margin-top:7px;font-size:clamp(18px,2vw,24px);line-height:1;color:var(--bone);overflow-wrap:anywhere}.flow-kpi small{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.35}
.flow-why,.flow-insight,.flow-insight-line{margin:14px 0 0;padding:12px 14px;border:1px solid var(--flow-line);border-left:3px solid var(--flow-accent);border-radius:0 7px 7px 0;background:var(--flow-panel-2);color:var(--muted);line-height:1.55}
.flow-insight-line{display:flex;align-items:center;min-height:48px}.flow-action-pills,.flow-context-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.flow-action-pills .pill,.flow-context-tags span{padding:7px 10px;border:1px solid var(--flow-line);border-radius:999px;background:var(--flow-panel-2);color:var(--muted);font-size:11px;white-space:normal}
.flow-details{border:1px solid var(--flow-line);background:color-mix(in srgb,var(--flow-panel) 94%,transparent);border-radius:8px;overflow:hidden}.flow-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:13px 16px;cursor:pointer;font-weight:750;color:var(--bone);list-style:none}.flow-details>summary::-webkit-details-marker{display:none}.flow-details>summary:after{content:'+';display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--flow-line);border-radius:50%;color:var(--flow-accent);font-size:17px;flex:none}.flow-details[open]>summary{background:var(--flow-accent-soft);border-bottom:1px solid var(--flow-line)}.flow-details[open]>summary:after{content:'−'}.flow-details-body{padding:14px}.flow-details-body>.card{box-shadow:none;margin-bottom:12px}.flow-details-body>.card:last-child{margin-bottom:0}
.flow-timeline{background:var(--flow-panel)}.flow-time-grid{display:grid;gap:8px;margin:14px 0 0}.flow-time-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 13px;border:1px solid var(--flow-line);border-radius:7px;background:var(--flow-panel-2)}.flow-time-row span{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--flow-accent)}.flow-time-row b{min-width:0;color:var(--bone)}.flow-time-row small{color:var(--muted);white-space:nowrap}.flow-quick-check{margin:14px 0}
.flow-workout-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr);gap:20px;padding-bottom:18px!important}.flow-workout-hero .flow-hero-kpis{grid-column:1/-1;margin-top:2px}.flow-hero-copy{align-self:center;padding:8px 0}.flow-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.flow-hero-mark{display:grid;place-items:center;min-height:166px}.flow-hero-mark span{position:relative;width:126px;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--flow-accent) 50%,transparent);border-radius:50%;background:radial-gradient(circle,var(--flow-accent-soft),transparent 66%);box-shadow:0 0 0 16px color-mix(in srgb,var(--flow-accent) 4%,transparent),0 0 48px -18px rgba(var(--accent-rgb),.85)}.flow-hero-mark span:before,.flow-hero-mark span:after{content:'';position:absolute;left:50%;top:50%;background:var(--flow-accent);transform:translate(-50%,-50%);border-radius:3px}.flow-hero-mark span:before{width:58%;height:8px;box-shadow:0 -18px 0 -2px var(--flow-accent),0 18px 0 -2px var(--flow-accent)}.flow-hero-mark span:after{width:8px;height:72%}.flow-workout-list{background:var(--flow-panel)}.flow-workout-list #exList{margin-top:12px}.flow-workout-list .row{border-color:var(--flow-line);background:var(--flow-panel-2)}.flow-recovery-card{border-left:3px solid var(--sage)}
.flow-nutrition-budget{display:grid;grid-template-columns:minmax(0,1fr) 154px;gap:24px;align-items:center}.flow-nutrition-budget .btn{margin-top:15px}.flow-budget-ring{--flow-progress:0%;position:relative;display:grid;place-content:center;width:140px;aspect-ratio:1;margin:auto;border-radius:50%;text-align:center;background:radial-gradient(circle at center,var(--flow-panel) 0 57%,transparent 58%),conic-gradient(var(--flow-accent) var(--flow-progress),var(--flow-panel-2) 0);box-shadow:inset 0 0 0 1px var(--flow-line),0 16px 34px -28px rgba(var(--accent-rgb),.9)}.flow-budget-ring b{font-size:27px;line-height:1;color:var(--bone)}.flow-budget-ring small{margin-top:6px;color:var(--muted);font-size:10px}.flow-macro-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.flow-macro-item{padding:12px;border:1px solid var(--flow-line);border-radius:8px;background:var(--flow-panel-2);min-width:0}.flow-macro-item .macro{margin:0!important}.flow-food-timeline{background:var(--flow-panel)}.flow-meal-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:14px 0}.flow-meal-slots>span{display:grid;grid-template-columns:10px 1fr;gap:4px 8px;align-items:center;min-width:0;padding:11px;border:1px solid var(--flow-line);border-radius:7px;background:var(--flow-panel-2);font-size:12px;color:var(--bone)}.flow-meal-slots i{width:8px;height:8px;border:1px solid var(--muted);border-radius:50%}.flow-meal-slots small{grid-column:2;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-meal-slots .is-complete i{border-color:var(--sage);background:var(--sage);box-shadow:0 0 10px color-mix(in srgb,var(--sage) 70%,transparent)}.flow-food-log{display:grid;gap:7px;margin-top:10px}.flow-compact-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.flow-compact-actions .btn{min-width:0}
.flow-meal-context{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.flow-featured-meal{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);gap:24px;align-items:stretch;padding:16px!important}.flow-meal-visual{position:relative;min-height:320px;overflow:hidden;border:1px solid var(--flow-line);border-radius:7px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--sage) 32%,var(--flow-panel)) 0 26%,transparent 27%),linear-gradient(145deg,var(--flow-panel-2),color-mix(in srgb,var(--clay) 13%,var(--flow-panel)))}.flow-meal-visual:before{content:'';position:absolute;width:210px;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:10px solid color-mix(in srgb,var(--bone) 42%,transparent);box-shadow:0 22px 45px -24px rgba(0,0,0,.65),inset 0 0 0 1px var(--flow-line)}.flow-meal-visual span{position:absolute;left:50%;top:50%;width:130px;height:64px;transform:translate(-50%,-50%) rotate(-7deg);border-radius:50%;background:linear-gradient(135deg,var(--clay),var(--amber));box-shadow:-34px 34px 0 -12px var(--sage),38px 28px 0 -14px color-mix(in srgb,var(--amber) 72%,var(--bone))}.flow-featured-copy{align-self:center;padding:14px 12px 14px 0}.flow-featured-copy h2{max-width:18ch;margin:12px 0}.flow-featured-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.flow-featured-metrics span{padding:10px;border:1px solid var(--flow-line);border-radius:7px;background:var(--flow-panel-2);font-size:10px;color:var(--muted)}.flow-featured-metrics b{display:block;margin-bottom:4px;font-size:18px;color:var(--bone)}.flow-meal-alternatives{margin-top:20px}.flow-meal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.flow-recipe-card{position:relative;height:100%;text-align:left!important;padding:18px!important;overflow:hidden}.flow-recipe-card:after{content:'';position:absolute;right:-24px;top:-24px;width:92px;aspect-ratio:1;border-radius:50%;background:var(--flow-accent-soft)}.flow-recipe-card h3{font-size:17px;margin:12px 0 5px;max-width:24ch}.flow-recipe-card .macros-mini{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.flow-recipe-card .macros-mini span{padding:5px 7px;border:1px solid var(--flow-line);border-radius:5px;color:var(--muted);font-size:10px}.flow-recipe-card .flow-summary-row{margin-top:14px}.flow-summary-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.flow-body-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.flow-visible-chart{margin-top:16px;padding:14px;border:1px solid var(--flow-line);border-radius:8px;background:linear-gradient(180deg,var(--flow-panel-2),var(--flow-panel));min-height:160px}.flow-visible-chart .empty{min-height:128px;display:grid;place-items:center;text-align:center}#sec-body .flow-primary>.section:first-child{padding-bottom:12px;border-bottom:1px solid var(--flow-line)}#sec-body .flow-primary>.section h2{font-size:clamp(32px,4vw,52px)}#sec-body>.card:not(.flow-primary){background:var(--flow-panel)}
.flow-wellness-main{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:14px}.flow-wellness-main>.card{margin-top:0!important;background:var(--flow-panel)}.flow-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.flow-choice{border:1px solid var(--flow-line);background:var(--flow-panel-2);border-radius:8px;padding:13px}.flow-choice b{display:block;margin-bottom:9px}.flow-choice .seg{width:100%}.flow-word-seg{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.flow-word-seg button{min-width:0;white-space:normal}#sec-mind .support-check{width:100%;margin-top:14px}#sec-mind .flow-kpis{grid-template-columns:1fr 1fr}#sec-mind .flow-kpis .flow-kpi:last-child{grid-column:1/-1}
.stats-periods{display:inline-grid!important;grid-template-columns:repeat(4,minmax(54px,1fr));gap:4px;margin:0 0 12px}.stats-periods button{min-width:0}.stats-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stats-chart-card{background:var(--flow-panel)!important}.flow-details .short-programs-grid{margin-top:8px}.flow-details .workout-support{margin-top:12px}.flow-details .training-environment{margin-bottom:12px}
@media(min-width:861px){.pagehead{max-width:1160px!important;min-height:0!important;padding:11px 16px!important;margin-bottom:18px!important;gap:12px!important}.pagehead .wordmark{font-size:clamp(22px,2.1vw,30px)!important;line-height:1!important}.pagehead .eyebrow{font-size:9px!important;margin-bottom:2px!important}.pagehead .head-progress-stack{grid-template-columns:190px 236px!important;min-width:438px!important;gap:5px!important}.pagehead .head-progress-stack .head-chip{min-height:31px!important;padding:4px 10px!important}.pagehead .head-progress-stack .xp-chip{grid-row:1/3!important}.pagehead .head-progress-stack .plan,.pagehead .head-progress-stack .last-save{min-width:236px!important}}
body.app-paged .main:not(.full){padding-bottom:clamp(130px,14vh,190px)!important}
@media(max-width:980px){.flow-workout-hero{grid-template-columns:1fr}.flow-hero-mark{display:none}.flow-workout-hero .flow-hero-kpis{grid-column:1}.flow-featured-meal{grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr)}.flow-macro-board{grid-template-columns:1fr 1fr}}
@media(max-width:760px){#sec-today>.section:first-child,#sec-train>.section:first-child,#sec-fuel>.section:first-child,#sec-meal>.section:first-child,#sec-body>.section:first-child,#sec-mind>.section:first-child,#sec-stats>.section:first-child{margin-bottom:11px}.flow-next,.flow-nutrition-budget{grid-template-columns:1fr}.flow-next .btn{width:100%}.flow-budget-ring{width:118px;grid-row:1;justify-self:end;margin:0 0 -62px auto;opacity:.9}.flow-nutrition-budget>div:first-child{position:relative;z-index:1;padding-right:72px}.flow-kpis,.flow-kpis.four,.flow-body-overview{grid-template-columns:1fr 1fr}.flow-kpi{padding:11px}.flow-kpi b{font-size:17px}.flow-macro-board{grid-template-columns:1fr 1fr}.flow-featured-meal{grid-template-columns:1fr;padding:11px!important}.flow-meal-visual{min-height:196px}.flow-meal-visual:before{width:150px}.flow-meal-visual span{width:98px;height:48px}.flow-featured-copy{padding:8px 3px 4px}.flow-featured-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-meal-grid,.flow-wellness-main,.flow-check-grid,.stats-chart-grid{grid-template-columns:1fr}.flow-meal-context{display:block}.flow-context-tags{margin-top:12px}.flow-meal-slots{grid-template-columns:1fr 1fr}.flow-time-row{grid-template-columns:58px minmax(0,1fr);gap:5px 8px}.flow-time-row small{grid-column:2;white-space:normal}.flow-word-seg{grid-template-columns:repeat(3,minmax(0,1fr))!important}.stats-periods{display:grid!important;width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}.stats-periods button{padding:9px 4px!important;font-size:11px!important}.flow-visible-chart{min-height:132px;padding:8px}.flow-details>summary{font-size:13px;padding:12px 13px}.flow-details-body{padding:10px}.flow-hero-actions{display:grid;grid-template-columns:1fr}.flow-hero-actions .btn{width:100%;min-width:0}}
@media(max-width:410px){.flow-budget-ring{width:104px;margin-bottom:-52px}.flow-nutrition-budget>div:first-child{padding-right:50px}.flow-featured-metrics{grid-template-columns:1fr}.flow-meal-slots{grid-template-columns:1fr}}

/* Meals reference implementation. The application shell and navigation remain owned elsewhere. */
#sec-meal .meal-ref-shell{--meal-line:color-mix(in srgb,var(--amber) 42%,var(--line));--meal-panel:color-mix(in srgb,var(--surf) 94%,var(--bg));display:grid;gap:14px;width:min(100%,1160px);margin:0 auto}
#sec-meal .meal-ref-shell>.card,#sec-meal .meal-ref-alt{margin:0;border-color:var(--meal-line);background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 5%,transparent),transparent 48%),var(--meal-panel);box-shadow:0 22px 46px -38px rgba(var(--accent-rgb),.84)}
.meal-ref-now{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:20px!important}.meal-ref-now-icon{display:grid;place-items:center;width:72px;aspect-ratio:1;border:1px solid var(--amber);border-radius:50%;background:var(--flow-accent-soft);font-size:28px}.meal-ref-now h2{margin:5px 0 4px;font-size:clamp(24px,3vw,34px)}.meal-ref-now p,.meal-ref-now small{margin:0;color:var(--muted)}.meal-ref-pill,.meal-ref-kicker,.meal-ref-role{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:5px 10px;border:1px solid var(--meal-line);border-radius:999px;background:var(--flow-accent-soft);color:var(--amber);font-size:11px;font-weight:800}
.meal-ref-featured{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);gap:26px;padding:18px!important;overflow:hidden}.meal-ref-featured-media{position:relative;min-height:350px;overflow:hidden;border:1px solid var(--meal-line);border-radius:7px;background:var(--flow-panel-2)}.meal-ref-featured-media:after{content:'';position:absolute;inset:auto 0 0;height:38%;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 74%,transparent))}.meal-ref-featured-media img{width:100%;height:100%;object-fit:cover;display:block}.meal-ref-featured-copy{align-self:center;padding:8px 8px 8px 0}.meal-ref-featured-copy h2{margin:14px 0;font-size:clamp(27px,3.1vw,42px);line-height:1.06;max-width:19ch}.meal-ref-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:15px 0}.meal-ref-metrics span{padding:10px 8px;border:1px solid var(--meal-line);border-radius:7px;color:var(--muted);font-size:10px}.meal-ref-metrics b{display:block;margin-bottom:4px;color:var(--bone);font-size:18px}.meal-ref-why{padding:13px 0;border-top:1px solid var(--flow-line)}.meal-ref-why p{margin:6px 0 0;color:var(--muted);line-height:1.55}.meal-ref-main-actions,.meal-ref-alt-actions{display:grid;grid-template-columns:1.25fr .75fr;gap:9px;margin-top:14px}.meal-ref-main-actions .btn,.meal-ref-alt-actions .btn{width:100%;min-width:0}
.meal-ref-alternatives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.meal-ref-alt{display:flex;flex-direction:column;min-width:0;padding:12px!important}.meal-ref-alt-media{display:block;width:100%;aspect-ratio:4/3;margin:10px 0;padding:0;border:0;border-radius:7px;overflow:hidden;background:color-mix(in srgb,var(--surf-2) 82%,transparent);cursor:pointer}.meal-ref-alt-media img{width:100%;height:100%;object-fit:contain;display:block}.meal-ref-alt h3{margin:0;min-height:44px;font-size:15px;line-height:1.35}.meal-ref-alt-metrics{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.meal-ref-alt-metrics span{padding:6px;border:1px solid var(--flow-line);border-radius:5px;color:var(--muted);font-size:10px}.meal-ref-alt-actions{grid-template-columns:1fr 1fr;margin-top:auto;padding-top:12px}.meal-ref-alt-actions .btn{padding:8px 6px!important;font-size:10px!important}
.meal-ref-insight,.meal-ref-context,.meal-ref-plan{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px!important}.meal-ref-insight{grid-template-columns:auto minmax(0,1fr)}.meal-ref-insight>span,.meal-ref-context>span,.meal-ref-plan>span{display:grid;place-items:center;width:44px;aspect-ratio:1;border:1px solid var(--meal-line);border-radius:50%;background:var(--flow-accent-soft);font-size:19px}.meal-ref-insight p,.meal-ref-context p,.meal-ref-plan p{margin:4px 0 0;color:var(--muted)}.meal-ref-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.meal-ref-tools .flow-details{margin:0}.meal-ref-tools .flow-details[open]{grid-column:1/-1}
@media(max-width:980px){.meal-ref-featured{grid-template-columns:minmax(250px,.85fr) minmax(0,1.15fr)}.meal-ref-alternatives{grid-template-columns:1fr 1fr}.meal-ref-tools{grid-template-columns:1fr}}
@media(max-width:760px){#sec-meal .meal-ref-shell{gap:10px}.meal-ref-now{grid-template-columns:54px minmax(0,1fr);gap:11px;padding:13px!important}.meal-ref-now-icon{width:52px;font-size:21px}.meal-ref-now h2{font-size:22px}.meal-ref-featured{grid-template-columns:1fr;gap:12px;padding:11px!important}.meal-ref-featured-media{min-height:0;aspect-ratio:3/2}.meal-ref-featured-copy{padding:3px}.meal-ref-featured-copy h2{font-size:28px}.meal-ref-metrics{grid-template-columns:1fr 1fr}.meal-ref-main-actions{grid-template-columns:1fr 1fr}.meal-ref-alternatives{gap:9px}.meal-ref-alt{padding:9px!important}.meal-ref-alt h3{font-size:13px;min-height:52px}.meal-ref-alt-metrics span:nth-child(3),.meal-ref-alt-metrics span:nth-child(4){display:none}.meal-ref-alt-actions{grid-template-columns:1fr}.meal-ref-alt-actions .ghost{display:none}.meal-ref-insight,.meal-ref-context,.meal-ref-plan{grid-template-columns:42px minmax(0,1fr);padding:13px!important}.meal-ref-context .btn,.meal-ref-plan .btn{grid-column:1/-1;width:100%}}
@media(max-width:380px){.meal-ref-alternatives{grid-template-columns:1fr}.meal-ref-alt{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}.meal-ref-role{grid-column:1/-1}.meal-ref-alt-media{grid-row:2/5;margin:0}.meal-ref-alt h3{min-height:0}.meal-ref-alt-metrics{grid-template-columns:1fr 1fr}.meal-ref-alt-actions{padding-top:0}}

/* Exercise reference implementation. The application navigation remains owned elsewhere. */
#sec-train .train-ref{
  --train-line:color-mix(in srgb,var(--amber) 44%,var(--line));
  --train-panel:color-mix(in srgb,var(--surf) 93%,var(--bg));
  --train-panel-2:color-mix(in srgb,var(--surf-2) 90%,var(--bg));
  width:min(100%,1160px);
  margin:0 auto;
  display:grid;
  gap:14px;
  color:var(--bone);
}
#sec-train .train-ref svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#sec-train .train-ref button{font:inherit;letter-spacing:0}
#sec-train .train-ref-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:2px 6px 8px}
#sec-train .train-ref-top h1{margin:0;color:var(--bone);font-size:36px;line-height:1.08;letter-spacing:0}
#sec-train .train-ref-top p{display:flex;align-items:center;gap:9px;margin:10px 0 0;color:var(--muted);font-size:15px;text-transform:capitalize}
#sec-train .train-ref-top p svg{width:19px;height:19px;color:var(--amber)}
#sec-train .train-ref-xp{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 16px;border:1px solid var(--train-line);border-radius:999px;background:var(--train-panel);color:var(--bone);box-shadow:0 12px 28px -24px rgba(var(--accent-rgb),.9);cursor:pointer}
#sec-train .train-ref-xp>span{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--amber);border-radius:7px;color:var(--amber);font-size:14px}
#sec-train .train-ref-xp b{font-size:14px;white-space:nowrap}
#sec-train .train-ref-xp svg{width:16px;height:16px;color:var(--muted)}
#sec-train .train-ref-hero{padding:26px 28px 24px;border:1px solid var(--train-line);border-radius:8px;background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--amber) 12%,transparent),transparent 32%),var(--train-panel);box-shadow:0 22px 48px -38px rgba(var(--accent-rgb),.9)}
#sec-train .train-ref-hero-main{display:grid;grid-template-columns:116px minmax(0,1fr);gap:24px;align-items:center}
#sec-train .train-ref-hero-icon{display:grid;place-items:center;width:112px;height:112px;border:2px solid var(--amber);border-radius:50%;color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--train-panel));box-shadow:0 0 34px -18px rgba(var(--accent-rgb),.9)}
#sec-train .train-ref-hero-icon svg{width:50px;height:50px;stroke-width:1.5}
#sec-train .train-ref-hero-copy{min-width:0}
#sec-train .train-ref-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--train-line);border-radius:999px;color:var(--amber);font-size:12px;font-weight:750}
#sec-train .train-ref-hero-copy h2{margin:10px 0 4px;font-size:30px;line-height:1.15;letter-spacing:0}
#sec-train .train-ref-hero-copy>p{margin:0;color:var(--muted);font-size:18px}
#sec-train .train-ref-hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
#sec-train .train-ref-hero-meta>span{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;min-width:0}
#sec-train .train-ref-hero-meta i{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--train-line);border-radius:50%;color:var(--amber);background:var(--train-panel-2);font-style:normal}
#sec-train .train-ref-hero-meta i.sage{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 50%,var(--line))}
#sec-train .train-ref-hero-meta b{min-width:0;color:var(--bone);font-size:14px;overflow-wrap:anywhere}
#sec-train .train-ref-hero-meta small{color:var(--muted);font-size:11px}
#sec-train .train-ref-start{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin-top:24px;border:0;border-radius:8px;background:var(--amber);color:var(--bg);font-size:17px;font-weight:850;box-shadow:0 16px 34px -24px rgba(var(--accent-rgb),.9);cursor:pointer}
#sec-train .train-ref-start svg{width:21px;height:21px}
#sec-train .train-ref-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#sec-train .train-ref-kpis article{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;gap:3px 10px;min-width:0;padding:16px;border:1px solid var(--train-line);border-radius:8px;background:var(--train-panel)}
#sec-train .train-ref-kpis i{grid-row:1/4;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--train-line);border-radius:50%;color:var(--amber);background:var(--train-panel-2);font-style:normal}
#sec-train .train-ref-kpis i.sage{color:var(--sage);border-color:color-mix(in srgb,var(--sage) 50%,var(--line))}
#sec-train .train-ref-kpis i.violet{color:var(--clay);border-color:color-mix(in srgb,var(--clay) 50%,var(--line))}
#sec-train .train-ref-kpis i.blue{color:var(--info,var(--amber));border-color:color-mix(in srgb,var(--info,var(--amber)) 50%,var(--line))}
#sec-train .train-ref-kpis span{color:var(--muted);font-size:11px}
#sec-train .train-ref-kpis b{min-width:0;color:var(--bone);font-size:18px;line-height:1.1;overflow-wrap:anywhere}
#sec-train .train-ref-kpis small{min-width:0;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
#sec-train .train-ref-plan{position:relative;padding:18px 22px;border:1px solid var(--train-line);border-radius:8px;background:var(--train-panel)}
#sec-train .train-ref-plan-progress{position:absolute;right:18px;top:14px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}
#sec-train .train-ref-plan-progress>span{width:70px;height:4px;overflow:hidden;border-radius:999px;background:var(--train-panel-2)}
#sec-train .train-ref-plan-progress i{display:block;height:100%;border-radius:inherit;background:var(--amber)}
#sec-train .train-ref-phase+.train-ref-phase{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
#sec-train .train-ref-phase-head{display:flex;align-items:center;gap:8px;padding-right:112px;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800}
#sec-train .train-ref-phase-head>span{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 11px color-mix(in srgb,var(--amber) 65%,transparent)}
#sec-train .train-ref-phase-warmup .train-ref-phase-head>span{background:var(--sage);box-shadow:0 0 11px color-mix(in srgb,var(--sage) 65%,transparent)}
#sec-train .train-ref-phase-cooldown .train-ref-phase-head>span{background:var(--info,var(--amber));box-shadow:0 0 11px color-mix(in srgb,var(--info,var(--amber)) 65%,transparent)}
#sec-train .train-ref-phase-cardio .train-ref-phase-head>span{background:var(--clay);box-shadow:0 0 11px color-mix(in srgb,var(--clay) 65%,transparent)}
#sec-train .train-ref-phase-head b{color:var(--bone);font-size:10px}
#sec-train .train-ref-phase-head small{font-size:10px;text-transform:none;font-weight:600}
#sec-train .train-ref-phase-rows{display:grid;margin-top:8px}
#sec-train .train-ref-exercise{display:grid;grid-template-columns:38px 58px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:64px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
#sec-train .train-ref-exercise:last-child{border-bottom:0}
#sec-train .train-ref-check{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--train-line);border-radius:8px;background:transparent;color:var(--bg);font-weight:900;cursor:pointer}
#sec-train .train-ref-exercise.is-done .train-ref-check{border-color:var(--sage);background:var(--sage)}
#sec-train .train-ref-exercise.is-done .train-ref-ex-copy{opacity:.62}
#sec-train .train-ref-thumb{position:relative;width:56px;height:46px;padding:0;overflow:hidden;border:1px solid var(--train-line);border-radius:7px;background:var(--train-panel-2);color:var(--amber);cursor:pointer}
#sec-train .train-ref-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#sec-train .train-ref-thumb>span{position:absolute;inset:0;display:grid;place-items:center;color:var(--amber);background:color-mix(in srgb,var(--bg) 52%,transparent);opacity:0;transition:opacity .18s ease}
#sec-train .train-ref-thumb:hover>span,#sec-train .train-ref-thumb:focus-visible>span{opacity:1}
#sec-train .train-ref-thumb>span svg{width:18px;height:18px;fill:currentColor;stroke-width:0}
#sec-train .train-ref-thumb.no-media{display:grid;place-items:center}
#sec-train .train-ref-ex-copy{min-width:0}
#sec-train .train-ref-ex-copy b{display:block;color:var(--bone);font-size:14px;line-height:1.25;overflow-wrap:anywhere}
#sec-train .train-ref-ex-copy span{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35;overflow-wrap:anywhere}
#sec-train .train-ref-ex-action{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:54px;min-height:36px;padding:5px 8px;border:0;background:transparent;color:var(--amber);cursor:pointer}
#sec-train .train-ref-ex-action svg{width:19px;height:19px}
#sec-train .train-ref-ex-action span{font-size:12px;color:var(--muted)}
#sec-train .train-ref-plan>footer{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
#sec-train .train-ref-context-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:12px}
#sec-train .train-ref-context{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center;min-width:0;min-height:96px;padding:14px 18px;border:1px solid var(--train-line);border-radius:8px;background:var(--train-panel);color:var(--bone);text-align:left;cursor:pointer}
#sec-train .train-ref-context>i{display:grid;place-items:center;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--sage) 52%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--sage) 10%,var(--train-panel));color:var(--sage);font-style:normal}
#sec-train .train-ref-meal>i{border-color:color-mix(in srgb,var(--clay) 52%,var(--line));background:color-mix(in srgb,var(--clay) 10%,var(--train-panel));color:var(--clay)}
#sec-train .train-ref-context>span{min-width:0}
#sec-train .train-ref-context b,#sec-train .train-ref-context small{display:block;overflow-wrap:anywhere}
#sec-train .train-ref-context b{font-size:15px}
#sec-train .train-ref-context small{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}
#sec-train .train-ref-context em{padding:9px 11px;border:1px solid color-mix(in srgb,var(--clay) 50%,var(--line));border-radius:7px;color:var(--clay);font-size:11px;font-style:normal;white-space:nowrap}
#sec-train .train-ref-context>svg{width:16px;height:16px;color:var(--muted)}
#sec-train .train-ref>.flow-details{margin-top:0}

@media(max-width:980px){
  #sec-train .train-ref-kpis{grid-template-columns:1fr 1fr}
  #sec-train .train-ref-context-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  #sec-train .train-ref{gap:11px}
  #sec-train .train-ref-top{padding:0 2px 4px}
  #sec-train .train-ref-top h1{font-size:30px}
  #sec-train .train-ref-top p{margin-top:7px;font-size:13px}
  #sec-train .train-ref-xp{min-height:40px;padding:0 11px;gap:7px}
  #sec-train .train-ref-xp b{font-size:12px}
  #sec-train .train-ref-xp>span{width:22px;height:22px}
  #sec-train .train-ref-hero{padding:16px 14px}
  #sec-train .train-ref-hero-main{grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:5px 13px}
  #sec-train .train-ref-hero-icon{grid-column:1;grid-row:1/4;width:66px;height:66px}
  #sec-train .train-ref-hero-copy{display:contents}
  #sec-train .train-ref-tag{grid-column:2;grid-row:1;justify-self:start}
  #sec-train .train-ref-hero-copy h2{grid-column:2;grid-row:2}
  #sec-train .train-ref-hero-copy>p{grid-column:2;grid-row:3}
  #sec-train .train-ref-hero-icon svg{width:32px;height:32px}
  #sec-train .train-ref-tag{min-height:24px;padding:0 9px;font-size:10px}
  #sec-train .train-ref-hero-copy h2{margin-top:7px;font-size:21px}
  #sec-train .train-ref-hero-copy>p{font-size:14px}
  #sec-train .train-ref-hero-meta{grid-column:1/-1;grid-row:4;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
  #sec-train .train-ref-hero-meta>span{display:flex;flex-wrap:wrap;justify-content:center;column-gap:5px;text-align:center}
  #sec-train .train-ref-hero-meta i{width:34px;height:34px;flex:none}
  #sec-train .train-ref-hero-meta i svg{width:17px;height:17px}
  #sec-train .train-ref-hero-meta b{font-size:11px}
  #sec-train .train-ref-hero-meta small{width:100%;font-size:9px}
  #sec-train .train-ref-start{min-height:48px;margin-top:16px;font-size:14px}
  #sec-train .train-ref-kpis{gap:8px}
  #sec-train .train-ref-kpis article{grid-template-columns:36px minmax(0,1fr);padding:11px;gap:2px 8px}
  #sec-train .train-ref-kpis i{width:36px;height:36px}
  #sec-train .train-ref-kpis i svg{width:18px;height:18px}
  #sec-train .train-ref-kpis b{font-size:15px}
  #sec-train .train-ref-kpis span,#sec-train .train-ref-kpis small{font-size:9px}
  #sec-train .train-ref-plan{padding:14px 12px}
  #sec-train .train-ref-plan-progress{right:12px;top:10px}
  #sec-train .train-ref-plan-progress>span{width:44px}
  #sec-train .train-ref-phase-head{padding-right:78px}
  #sec-train .train-ref-exercise{grid-template-columns:32px 48px minmax(0,1fr) 40px;gap:7px;min-height:59px}
  #sec-train .train-ref-check{width:28px;height:28px}
  #sec-train .train-ref-thumb{width:46px;height:40px}
  #sec-train .train-ref-ex-copy b{font-size:12px}
  #sec-train .train-ref-ex-copy span{font-size:9px}
  #sec-train .train-ref-ex-action{min-width:38px;padding:4px 2px;gap:3px}
  #sec-train .train-ref-ex-action svg{width:17px;height:17px}
  #sec-train .train-ref-ex-action svg:last-child:not(:first-child){display:none}
  #sec-train .train-ref-ex-action span{font-size:10px}
  #sec-train .train-ref-plan>footer{display:grid;grid-template-columns:1fr 1fr}
  #sec-train .train-ref-plan>footer .btn{width:100%;min-width:0;padding-left:7px;padding-right:7px;font-size:11px}
  #sec-train .train-ref-context{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;min-height:86px;padding:11px 12px}
  #sec-train .train-ref-context>i{width:44px;height:44px}
  #sec-train .train-ref-context b{font-size:13px}
  #sec-train .train-ref-context small{font-size:10px}
  #sec-train .train-ref-context em{display:none}
}
@media(max-width:410px){
  #sec-train .train-ref-top h1{font-size:27px}
  #sec-train .train-ref-top p{font-size:11px}
  #sec-train .train-ref-xp>span{display:none}
  #sec-train .train-ref-xp{padding:0 9px}
  #sec-train .train-ref-hero-main{grid-template-columns:58px minmax(0,1fr)}
  #sec-train .train-ref-hero-icon{width:56px;height:56px}
  #sec-train .train-ref-hero-icon svg{width:28px;height:28px}
  #sec-train .train-ref-hero-copy h2{font-size:18px}
  #sec-train .train-ref-hero-meta{gap:5px}
  #sec-train .train-ref-hero-meta i{width:30px;height:30px}
  #sec-train .train-ref-kpis article{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;text-align:left}
  #sec-train .train-ref-kpis i{grid-row:auto;width:32px;height:32px}
  #sec-train .train-ref-exercise{grid-template-columns:29px 43px minmax(0,1fr) 34px;gap:5px}
  #sec-train .train-ref-thumb{width:41px;height:37px}
}