/* Guided body measurements: accessible HTML over the supplied Alpine art. */
body.has-measure-dialog { overflow:hidden; }
.measure-dialog { --measure-blue:#0866ff; --measure-ink:#07102a; --measure-muted:#6b7e9f; box-sizing:border-box; position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:100dvh; margin:0; padding:14px 20px 12px; border:0; border-radius:0; color:var(--measure-ink); background:#f4f9fd url('./media/measurements/alpine.webp') center/cover no-repeat; font-family:'Plus Jakarta Sans',sans-serif; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.measure-dialog::backdrop { background:#07102a52; backdrop-filter:blur(10px); }
.measure-dialog *, .measure-dashboard-head *, .measure-dashboard-grid * { box-sizing:border-box; }
.measure-dialog button { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; border:0; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.measure-dialog button:disabled { cursor:wait; opacity:.55; }
.measure-dialog button:focus-visible,.measure-dialog input:focus-visible { outline:3px solid #0866ff; outline-offset:4px; }
.measure-dialog .wellness-icon { display:inline-block; flex:0 0 auto; width:22px; height:22px; background:currentColor; mask:var(--wellness-icon) center/contain no-repeat; -webkit-mask:var(--wellness-icon) center/contain no-repeat; }
.measure-header { display:flex; align-items:center; justify-content:space-between; height:44px; gap:12px; }
.measure-dialog .measure-header h2 { margin:0; font-size:18px; font-weight:750; line-height:1.3; letter-spacing:-.5px; color:var(--measure-ink); }
.measure-dialog .measure-round { padding:0; min-width:44px; width:44px; height:44px; border-radius:50%; color:var(--measure-ink); background:#ffffffdb; box-shadow:0 0 0 1px #dfe8f333; }
.measure-round .wellness-icon { width:25px; height:25px; }
.measure-progress { display:flex; gap:7px; margin:10px 28px 0; height:5px; }
.measure-dialog .measure-progress-segment { position:relative; display:block; height:5px; min-height:5px; flex:1; padding:0; border:0; border-radius:9px; background:#d3deea; transition:background .4s; }
.measure-progress-segment::after { content:''; position:absolute; inset:-15px 0; }
.measure-dialog .measure-progress-segment[data-status='done'] { background:#c7ddff; }
.measure-dialog .measure-progress-segment[data-status='active'] { background:#0866ff; }
.measure-dialog .measure-count { margin:7px 0 0; text-align:center; color:var(--measure-muted); font-size:13px; line-height:18px; font-weight:600; }
.measure-intro { text-align:center; margin-top:16px; }
.measure-dialog .measure-intro h1 { margin:0; padding:0; color:var(--measure-ink); font-size:36px; line-height:1.18; font-weight:800; letter-spacing:-1.5px; outline:none; }
.measure-dialog .measure-intro p { margin:4px 0 0; color:var(--measure-muted); font-size:16px; line-height:23px; font-weight:550; letter-spacing:-.5px; }
.measure-layout { display:grid; grid-template-columns:minmax(0,1fr); }
.measure-visual { min-width:0; text-align:center; }
.measure-scene { position:relative; height:clamp(280px,calc(100svh - 496px),350px); margin:0 -20px; overflow:hidden; isolation:isolate; }
.measure-camera { position:absolute; inset:0; transform-origin:50% 50%; transition:transform 800ms cubic-bezier(.2,.75,.2,1); will-change:transform; }
.measure-dialog .measure-mannequin { position:absolute; display:block; width:auto; height:365px; max-width:none; margin:0; left:50%; top:0; transform:translateX(-50%); opacity:0; transition:opacity 580ms cubic-bezier(.22,.61,.36,1); }
.measure-dialog .measure-mannequin[data-active='true'] { opacity:1; }
.measure-leader { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.measure-leader path { stroke:#0866ff; stroke-width:1; fill:none; }
.measure-leader circle { fill:#0866ff; stroke:#fff; stroke-width:1.5; }
.measure-zone-label { position:absolute; color:#0866ff; font-size:12px; font-weight:650; line-height:17px; letter-spacing:-.3px; white-space:nowrap; pointer-events:none; }
.measure-dialog .measure-help { min-height:44px; height:44px; padding:0 8px; margin-top:-10px; background:transparent; color:var(--measure-blue); font-size:16px; font-weight:650; }
.measure-help .wellness-icon { width:20px; height:20px; }
.measure-dialog .measure-help-copy { margin:0 4px 14px; padding:12px 14px; border-radius:14px; background:#ffffffcc; font-size:14px; color:#4f6384; line-height:1.6; text-align:left; }
.measure-help-copy[hidden] { display:none; }
.measure-dialog .measure-form { min-width:0; margin:2px 0 0; padding:0; }
.measure-field label { display:block; margin:0 0 8px; color:var(--measure-ink); font-size:18px; line-height:25px; font-weight:700; letter-spacing:-.4px; }
.measure-input-wrap { display:flex; align-items:center; height:69px; border:1.5px solid #0866ff; border-radius:13px; background:#ffffffd9; overflow:hidden; transition:box-shadow .25s; }
.measure-input-wrap:focus-within { box-shadow:0 0 0 4px #0866ff0d; }
.measure-dialog .measure-input { display:block; width:100%; min-width:0; height:100%; margin:0; padding:0 14px; border:0; border-radius:0; outline:none; background:transparent; box-shadow:none; color:var(--measure-ink); font-family:inherit; font-size:48px; font-weight:800; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.measure-input::placeholder { color:#b3c1d5; }
.measure-dialog .measure-input:focus-visible { outline:0; }
.measure-unit { display:flex; align-items:center; justify-content:center; min-width:60px; height:36px; border-left:1px solid #dfe7f0; color:#5e7294; font-size:25px; font-weight:700; }
.measure-dialog .measure-reference { margin:10px 0 0; color:var(--measure-muted); font-size:13px; font-weight:550; line-height:20px; letter-spacing:-.25px; }
.measure-error { padding:0; margin:8px 0; color:#a22d3c; font-size:14px; line-height:1.5; }
.measure-error[hidden] { display:none; }
.measure-date { position:relative; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; margin:14px 0 12px; border:1px solid #dce5ef; border-radius:13px; background:#ffffffc9; color:var(--measure-ink); font-size:14px; font-weight:550; cursor:pointer; }
.measure-date .wellness-icon { width:19px; height:19px; }
.measure-date .wellness-icon:last-child { margin-left:auto; width:16px; height:16px; color:#0866ff; }
.measure-date input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.measure-date:focus-within { outline:3px solid #0866ff; outline-offset:3px; }
.measure-primary,.measure-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border:0; border-radius:14px; background:#0866ff; color:#fff; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; transition:background .2s,box-shadow .2s,transform .2s; }
.measure-dialog .measure-primary { display:flex; width:100%; min-height:44px; padding:10px; color:#fff; background:#0866ff; border-radius:14px; font-size:17px; font-weight:700; }
.measure-primary:hover { background:#0054df; box-shadow:0 6px 18px #0866ff1f; }
.measure-primary:active { transform:scale(.985); }
.measure-dialog .measure-skip { display:flex; width:100%; min-height:44px; padding:8px; margin-top:4px; background:transparent; color:#0866ff; font-size:16px; font-weight:650; }
.measure-dialog.is-weight { inset:auto 0 0; width:100%; height:auto; max-height:calc(100dvh - 24px); margin:0; padding:26px 22px 16px; border-radius:28px 28px 0 0; background:#f8fbff; }
.measure-weight-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.measure-dialog .measure-weight-header h2 { margin:0; font-size:24px; font-weight:800; letter-spacing:-.8px; }
.measure-tabs { display:flex; padding:3px; margin:22px 0; border-radius:14px; background:#e9f0fa; }
.measure-dialog .measure-tabs button { width:50%; min-height:44px; border-radius:12px; background:transparent; color:#4f6384; font-size:15px; font-weight:650; }
.measure-dialog .measure-tabs .is-selected { background:#0866ff; color:#fff; }
.measure-weight-form .measure-date { margin:0 0 20px; }
.measure-weight-form .measure-primary { margin-top:26px; }
.measure-summary-list { padding:6px 0; }
.measure-summary-row { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:14px 0; border-bottom:1px solid #dfe7ef; }
.measure-summary-row > span { color:#4f6384; font-size:14px; }
.measure-summary-row strong { font-size:18px; }
.measure-edit { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:5px 0; border:0; border-radius:8px; background:transparent; color:#0866ff; font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.measure-summary-row .measure-edit { grid-column:2; grid-row:2; padding:0; min-height:30px; }
.measure-dialog.is-summary .measure-visual { display:none; }
.measure-dialog.is-summary .measure-intro { margin:30px 0 20px; }
.measure-dialog.is-summary .measure-layout { grid-template-columns:1fr; }
.measure-dialog.is-summary .measure-form { max-width:480px; width:100%; margin:auto; }
.measure-dialog.is-summary .measure-intro h1 { font-size:32px; }
.measure-progress-tabs { display:flex; gap:4px; width:max-content; padding:4px; margin:0 0 20px 8px; border:1px solid var(--nav-edge,#e5edf6); border-radius:999px; background:var(--nav-glass,#edf4fa); }
.measure-progress-tabs button { min-height:44px; padding:8px 20px; border:0; border-radius:999px; background:transparent; color:var(--muted,#4f6384); font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
.measure-progress-tabs button[aria-pressed='true'] { color:#0866ff; background:var(--nav-glass-hi,#fff); box-shadow:0 3px 12px #14386e12; }
.measure-dashboard-head { margin:10px 8px 24px; }
.measure-dashboard-head h2 { margin:0; font-size:30px; letter-spacing:-1px; }
.measure-dashboard-head p { color:var(--muted,#6b7e9f); font-size:15px; }
.measure-dashboard-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.measure-secondary { border:1px solid #0866ff26; background:#ffffffa8; color:#0866ff; }
.measure-dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.measure-dashboard-card { min-width:0; padding:24px; border:6px solid var(--nav-glass,#ffffff70); border-radius:30px; background:var(--pg-core,#ffffffb8); box-shadow:0 0 0 1px var(--nav-edge,#fff); }
.measure-dashboard-card h3 { margin:0 0 16px; font-size:20px; }
.measure-dashboard-value { margin:0; font-size:42px; font-weight:800; letter-spacing:-1.5px; }
.measure-dashboard-grid .measure-reference { color:var(--muted,#6b7e9f); font-size:13px; line-height:1.6; }
.measure-dashboard-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 10px; padding:15px 0; border-bottom:1px solid #07102a0c; }
.measure-dashboard-row > div { display:flex; flex-direction:column; gap:5px; }
.measure-dashboard-row strong { font-size:14px; font-weight:650; }
.measure-dashboard-row span { color:var(--muted,#6b7e9f); font-size:12px; }
.measure-dashboard-row b { font-size:20px; }
.measure-dashboard-row .measure-edit { grid-column:2; min-height:32px; padding:2px; }
.measure-history { margin-top:22px; }
.measure-history summary { min-height:44px; padding:10px 0; color:var(--nav-link,#0866ff); font-size:14px; cursor:pointer; }
.measure-history ol { list-style:none; margin:0; padding:0; max-height:320px; overflow:auto; }
.measure-history li { display:flex; flex-direction:column; gap:5px; padding:10px 0; border-top:1px solid #07102a0c; font-size:12px; }
.measure-history time { font-weight:700; }
.measure-home-actions { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:16px; }
.measure-home-actions button { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--nav-link,#0866ff); font-size:13px; font-weight:650; }
.measure-home-actions .today-icon { width:17px; height:17px; }
.measure-profile-actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.measure-toast { position:fixed; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 24px); bottom:110px; left:50%; transform:translateX(-50%); z-index:100; padding:12px 16px; border-radius:18px; background:#07102a; color:#fff; box-shadow:0 8px 35px #07102a30; font-size:14px; }
.measure-toast .wellness-icon { width:20px; height:20px; }
.measure-toast-undo { min-height:44px; padding:0 8px; border:0; background:transparent; color:#8ab9ff; font:inherit; font-weight:700; cursor:pointer; }
.measure-toast .measure-round { width:32px; min-width:32px; height:44px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; }
@media(min-width:761px) {
 .measure-dialog.is-guided { inset:0; width:min(1060px,calc(100vw - 48px)); height:min(860px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); margin:auto; padding:24px 32px; border:1px solid #ffffffd9; border-radius:32px; box-shadow:0 35px 100px #07102a30; }
 .measure-header { height:46px; }
 .measure-progress { max-width:320px; margin:10px auto 0; }
 .measure-dialog .measure-intro { margin-top:15px; }
 .measure-dialog .measure-intro h1 { font-size:36px; }
 .measure-dialog .measure-intro p { font-size:16px; }
 .measure-layout { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:36px; margin-top:10px; }
 .measure-scene { height:440px; margin:0; }
 .measure-dialog .measure-mannequin { height:460px; }
 .measure-zone-label { font-size:13px; }
 .measure-dialog .measure-form { padding-right:12px; }
 .measure-field label { font-size:17px; }
 .measure-input-wrap { height:80px; }
 .measure-dialog .measure-input { font-size:50px; }
 .measure-dialog .measure-reference { font-size:14px; }
 .measure-date { margin-top:26px; height:54px; font-size:15px; }
 .measure-dialog .measure-primary { min-height:54px; font-size:17px; }
 .measure-dialog .measure-skip { margin-top:8px; }
 .measure-dialog.is-weight { inset:0; width:460px; height:max-content; max-height:calc(100dvh - 48px); margin:auto; padding:28px; border-radius:28px; }
 .measure-toast { bottom:24px; }
}
@media(max-width:760px) {
 .measure-dashboard-grid { grid-template-columns:1fr; }
 .measure-dashboard-card { padding:18px; border-radius:26px; }
 .measure-dashboard-actions { flex-direction:column; }
 .measure-dashboard-actions button { width:100%; }
 .measure-dashboard-head { margin:4px 2px 20px; }
 .measure-progress-tabs { margin-left:0; }
 .measure-dashboard-head h2 { font-size:28px; }
}
@media(max-width:359px) {
 .measure-dialog { padding-left:16px; padding-right:16px; }
 .measure-scene { margin:0 -16px; }
 .measure-dialog .measure-intro h1 { font-size:30px; }
 .measure-dialog .measure-intro p { font-size:14px; }
 .measure-dialog .measure-reference { font-size:12px; }
 .measure-date { padding:0 10px; font-size:12px; }
 .measure-zone-label { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .measure-camera,.measure-mannequin,.measure-progress-segment,.measure-primary,.measure-secondary { transition:none!important; animation:none!important; }
}
body[data-today-motion='none'] .measure-camera,body[data-today-motion='none'] .measure-mannequin { transition:none; }
/* Match the mobile reference's header and vertical rhythm at 390 × 844. */
.measure-header { padding:0; border:0; background:transparent; box-shadow:none; position:static; }
@media(max-width:760px) {
 .measure-dialog.is-guided { padding-bottom:2px; }
 .measure-header { width:calc(100% + 12px); margin:0 -6px; }
 .measure-intro { margin-top:12px; }
 .measure-dialog .measure-intro p { line-height:22px; }
 .measure-field label { line-height:22px; margin-bottom:4px; }
 .measure-form .measure-date { margin-top:7px; }
}
.measure-zone-history { grid-column:1; grid-row:2; min-width:0; }
.measure-zone-history summary { min-height:32px; padding:6px 0; color:var(--nav-link,#0866ff); font-size:12px; font-weight:600; cursor:pointer; }
.measure-zone-history[open] { grid-column:1/-1; grid-row:3; }
.measure-zone-history .wellness-chart { margin:10px 0; }
@media(min-width:761px) { .measure-dialog.is-guided { height:min(750px,calc(100dvh - 48px)); } }
@media(min-width:500px) and (max-width:760px) { .measure-dialog.is-guided { padding-left:calc((100vw - 430px)/2); padding-right:calc((100vw - 430px)/2); } }
/* Shared shell header styles must not turn these focused headers into nav bars. */
.measure-dashboard-head { display:block; position:static; padding:0; border:0; background:transparent; box-shadow:none; }
.measure-dashboard-head .measure-dashboard-actions { margin-top:0; }
.measure-weight-header { position:static; padding:0; margin:0; border:0; background:transparent; box-shadow:none; }
.pg-body-description { margin:10px 0 0; color:var(--muted,#6b7e9f); font-size:15px; line-height:1.5; }
.pg-body-description[hidden] { display:none; }
.pg-hero.is-body { padding-bottom:18px; }
.measure-secondary:hover { background:#e7f0ff; color:#0757de; }
.measure-edit:hover { background:#0866ff0d; color:#0757de; }
.measure-toast-undo:hover { background:#ffffff12; }
@media(max-width:359px) and (max-height:780px) {
 .measure-scene { height:250px; }
 .measure-dialog .measure-mannequin { height:330px; }
}
.measure-dashboard-card h2 { margin:0 0 16px; font-size:20px; font-weight:700; }
/* Keep the instructions discoverable when the dialog is shorter than its content. */
.measure-dialog .measure-help-copy { scroll-margin-block:16px; border:1px solid #d0dff1; }
.measure-dialog .measure-help-copy:focus { outline:2px solid #0866ff; outline-offset:3px; }
.measure-dialog .measure-help[aria-expanded='true'] { border-radius:999px; background:#0866ff0c; }
/* Both sides share one step, with a separate value and dated reference. */
.measure-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.measure-pair .measure-field { min-width:0; }
.measure-pair .measure-field label { font-size:15px; letter-spacing:-.35px; }
.measure-pair .measure-input-wrap { height:69px; border-color:#b8cfee; }
.measure-pair .measure-field.is-active .measure-input-wrap { border-color:#0866ff; box-shadow:0 0 0 3px #0866ff0a; }
.measure-dialog .measure-pair .measure-input { padding:0 10px; font-size:34px; letter-spacing:-1px; }
.measure-pair .measure-unit { min-width:37px; font-size:18px; height:30px; }
.measure-dialog .measure-pair .measure-reference { margin-top:7px; font-size:12px; line-height:18px; }
.measure-dialog .measure-side-hint { margin:12px 0 0; color:#4f6384; font-size:12px; line-height:18px; }
.measure-dialog .measure-legacy-reference { margin:8px 0 0; color:var(--measure-muted); font-size:12px; line-height:18px; }
.measure-camera[data-mirrored='true'] .measure-mannequin { transform:translateX(-50%) scaleX(-1); }
.measure-side-readings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:5px 0; }
.measure-side-readings > div { display:flex; flex-direction:column; gap:4px; }
.measure-side-readings b { font-size:19px; }
.measure-dashboard-row.is-bilateral > div { grid-column:1/-1; }
.measure-dashboard-row.is-bilateral > .measure-edit { grid-row:2; }
.measure-zone-history h3 { margin:14px 0 4px; font-size:13px; color:var(--muted,#6b7e9f); }
@media(min-width:761px) { .measure-pair .measure-input-wrap { height:80px; } .measure-dialog .measure-pair .measure-input { font-size:38px; } }
@media(max-width:359px) { .measure-pair { gap:10px; } .measure-pair .measure-field label { font-size:14px; } .measure-dialog .measure-pair .measure-input { padding:0 8px; font-size:30px; } .measure-pair .measure-unit { min-width:32px; } }

@media(max-width:760px) { .measure-dialog.is-bilateral .measure-scene { height:clamp(220px,calc(100svh - 590px),290px); } .measure-dialog.is-bilateral .measure-mannequin { height:330px; } }