/* Weight journey hero on Home (app/journey.js). Colors, type and radii come from
   the template's tokens; only geometry and hierarchy are set here. */
/* The hero floats beside the shortcuts and the Now tiles on a laptop; whatever
   is taller simply continues, so no column is left blank under the other. */
.app-journey{float:left;width:clamp(380px,45%,420px);margin:0 24px 24px 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 20px;min-width:0;color:var(--t1);font-variant-numeric:tabular-nums}
.app-journey-side{min-width:0}
.app-journey-side .app-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px}
.app-journey-side .app-shortcuts section:first-child .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.app-journey-side>h2{margin-top:24px}
.app-journey-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin:0 0 14px}
.app-journey h2{font-size:20px!important;font-weight:500;line-height:1.25;letter-spacing:-.01em;text-transform:none;color:var(--t1);margin:0 0 8px!important}
.app-journey-number{font-size:52px;font-weight:500;line-height:1.1;letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
.app-journey-unit{font-size:16px;letter-spacing:0;color:var(--t2)}
.app-journey-number .kg{font-size:14px;letter-spacing:0;white-space:nowrap}
.app-journey-missing{font-size:22px;letter-spacing:0;color:var(--t2);line-height:1.3}
.app-journey-date{font-size:12px;color:var(--t2);margin:6px 0 0;line-height:1.5}
.app-journey-spectrum{position:relative;height:336px;margin:30px 0 26px 12px}
.app-journey-track{position:absolute;left:2px;top:0;bottom:0;width:38px;border-radius:24px;background:var(--line)}
.app-journey-traveled{position:absolute;top:0;left:0;width:100%;border-radius:20px;background:var(--green);background:linear-gradient(to bottom,color-mix(in srgb,var(--green) 24%,var(--card)),var(--green))}
.app-journey-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.app-journey-leaders path{fill:none;stroke:var(--t2);stroke-width:1.5}
.app-journey-mark{position:absolute;left:0;right:0;height:0}
.app-journey-dot{position:absolute;left:2px;top:0;width:38px;height:38px;border-radius:50%;transform:translateY(-50%);background:var(--green);box-shadow:0 0 0 5px var(--card)}
.app-journey-label{position:absolute;left:60px;right:0;top:0;transform:translateY(calc(-50% + var(--shift,0px)));min-height:34px;display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:1.3;color:var(--t2)}
.app-journey-label small{font-size:12px;color:var(--t3);margin-top:3px}
.app-journey-mark.is-goal .app-journey-label{color:var(--t1)}
.app-journey-mark.is-current .app-journey-label{color:var(--t1)}
.app-journey-mark.is-current strong{font-weight:600;font-size:20px;line-height:1.2}
.app-journey-mark.is-current small{color:var(--t2)}
.app-journey-mark.is-moving{transition:top .3s ease}
.app-journey-traveled.is-moving{transition:height .3s ease}
.app-journey-arc.is-moving{transition:stroke-dasharray .3s ease}
@media (prefers-reduced-motion:reduce){.app-journey-mark.is-moving,.app-journey-traveled.is-moving,.app-journey-arc.is-moving{transition:none}}
.app-journey-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.app-journey-foot-text{flex:1 1 180px;min-width:0}
.app-journey-ring{position:relative;flex:none;width:64px;height:64px}
.app-journey-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.app-journey-ring circle{fill:none;stroke:var(--line);stroke-width:7}
.app-journey-ring .app-journey-arc{stroke:var(--green);stroke-linecap:round}
.app-journey-ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--t1)}
.app-journey-foot strong{font-weight:600;display:block}
.app-journey-foot small{display:block;font-size:12px;color:var(--t2)}
.app-journey-values{list-style:none;padding:0;margin:20px 0 0;font-size:14px}
.app-journey-values li{padding:8px 0;border-top:1px solid var(--line)}
.app-journey-values small{display:block;font-size:12px;color:var(--t2)}
.app-journey-lanes{margin-top:0!important}
.app-journey-lanes .tiles{margin-top:8px}
@media screen and (max-width:760px){
 .app-journey{float:none;width:auto;margin:0 0 24px;padding:20px 18px}
 .app-journey-eyebrow{margin-bottom:12px}
 .app-journey-number{font-size:44px}
 .app-journey-spectrum{height:260px;margin:24px 0 22px 10px}
 .app-journey-side>h2{margin-top:26px!important}
}