/* <pg-whtr> waist-to-height and <pg-whr> waist-to-hip calculators (tool.js). Shared by both tool pages.
   Light-DOM children are the no-JS fallback; hidden once the element upgrades. */
pg-whtr,pg-whr{
  --wr-ink:#1d1d1f;--wr-muted:#6e6e73;--wr-panel:#f2f1ee;--wr-card:#fff;--wr-line:rgba(0,0,0,.1);--wr-fill:rgba(0,0,0,.055);
  --wr-orange:#ff8a1f;--wr-accent:#c25e00;--wr-hip:#a77de8;--wr-hip-ink:#7a4fc4;
  --wr-z0:#e4e1dc;--wr-z1:#cfe8d5;--wr-z2:#f7ddb8;--wr-z3:#f4c3a6;
  --wr-z1-ink:#1f6b34;--wr-z2-ink:#8a5000;--wr-z3-ink:#9a3412;--wr-z0-ink:#57534e;
  --wr-body:#e7e4df;--wr-body-edge:#c4bfb8;
  --wr-ease:cubic-bezier(.22,1,.36,1);
  display:block;margin:36px 0;color:var(--wr-ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",InterLocal,system-ui,sans-serif;-webkit-tap-highlight-color:transparent
}
@media (prefers-color-scheme:dark){
  pg-whtr,pg-whr{
    --wr-ink:#f5f5f7;--wr-muted:#98989d;--wr-panel:#141416;--wr-card:#1f1f22;--wr-line:rgba(255,255,255,.12);--wr-fill:rgba(255,255,255,.08);
    --wr-accent:#ff9f3f;--wr-hip:#c9a7ff;--wr-hip-ink:#c9a7ff;
    --wr-z0:#3a3936;--wr-z1:#285636;--wr-z2:#634719;--wr-z3:#6b3520;
    --wr-z1-ink:#7ee09a;--wr-z2-ink:#ffc46b;--wr-z3-ink:#ffab85;--wr-z0-ink:#c7c2bc;
    --wr-body:#3a3937;--wr-body-edge:#5a5754
  }
}
pg-whtr[data-ready]>:not(.wr-ui),pg-whr[data-ready]>:not(.wr-ui){display:none}
/* widgets.css hides every non-.pg-ui child of [data-ready]; keep ours visible */
pg-whtr[data-ready]>.wr-ui,pg-whr[data-ready]>.wr-ui{display:grid}
pg-whtr>.wr-fallback,pg-whr>.wr-fallback{padding:22px 24px;border-radius:24px;background:var(--wr-panel);font-size:16px;line-height:1.55}
.wr-fallback>:last-child{margin-bottom:0}

.wr-ui{position:relative;display:grid;gap:clamp(16px,2.6vw,28px);background:var(--wr-panel);border-radius:28px;padding:clamp(16px,3.2vw,30px);font-size:16px;line-height:1.5;container-type:inline-size}
.wr-ui p{margin:0}
.wr-ui :focus-visible{outline:2px solid var(--wr-orange);outline-offset:3px}
.wr-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.wr-main{display:grid;gap:clamp(18px,3vw,30px)}
@container (min-width:640px){.wr-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}

/* Form */
.wr-form{display:grid;gap:18px;min-width:0}
.wr-toggles{display:flex;flex-wrap:wrap;gap:10px}
.wr-seg{display:inline-flex;margin:0;padding:3px;border:0;border-radius:999px;background:var(--wr-fill);min-width:0}
.wr-seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wr-seg label{position:relative;cursor:pointer}
.wr-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wr-seg span{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;font-size:14.5px;font-weight:560;color:var(--wr-muted);white-space:nowrap;transition:color .2s,background .3s var(--wr-ease),box-shadow .3s var(--wr-ease)}
.wr-seg input:checked+span{color:var(--wr-ink);background:var(--wr-card);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -2px rgba(0,0,0,.14)}
.wr-seg input:focus-visible+span{outline:2px solid var(--wr-orange);outline-offset:1px}
@media (prefers-color-scheme:dark){.wr-seg input:checked+span{background:rgba(255,255,255,.16);box-shadow:none}}
.wr-field{min-width:0;margin:0;padding:0;border:0}
.wr-field[hidden]{display:none}
.wr-label{display:block;padding:0;font-size:14px;font-weight:620;margin:0 0 6px;letter-spacing:-.005em}
.wr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wr-input{position:relative;display:flex;align-items:center;min-width:0}
.wr-input input{width:100%;min-width:0;height:52px;padding:0 46px 0 15px;border-radius:14px;border:1px solid var(--wr-line);background:var(--wr-card);color:var(--wr-ink);font:inherit;font-size:19px;font-weight:560;font-variant-numeric:tabular-nums;letter-spacing:-.01em;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.wr-input input::placeholder{color:var(--wr-muted);opacity:.55;font-weight:450}
.wr-input input:focus{outline:none;border-color:var(--wr-orange);box-shadow:0 0 0 3px rgba(255,138,31,.22)}
.wr-input input[aria-invalid=true]{border-color:#d97706}
.wr-unit{position:absolute;right:15px;font-size:15px;color:var(--wr-muted);pointer-events:none}
.wr-hint{margin-top:6px!important;font-size:13.5px;line-height:1.4;color:var(--wr-muted)}
.wr-hint.bad{color:var(--wr-z3-ink)}
.wr-hint a{color:var(--wr-accent);text-underline-offset:3px}

/* Result */
.wr-result{display:grid;gap:18px;align-content:start;min-width:0;padding:clamp(16px,2.6vw,24px);border-radius:22px;background:var(--wr-card);box-shadow:0 0 0 1px var(--wr-line)}
.wr-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px}
.wr-num{font-size:clamp(52px,12cqi,72px);font-weight:700;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.wr-empty .wr-num{color:var(--wr-muted);opacity:.45}
.wr-chip{display:inline-flex;align-items:center;min-height:30px;padding:3px 13px;border-radius:999px;font-size:14px;font-weight:650;line-height:1.25;background:var(--wr-fill);color:var(--wr-muted)}
.wr-chip[data-z="0"]{background:var(--wr-z0);color:var(--wr-z0-ink)}
.wr-chip[data-z="1"]{background:var(--wr-z1);color:var(--wr-z1-ink)}
.wr-chip[data-z="2"]{background:var(--wr-z2);color:var(--wr-z2-ink)}
.wr-chip[data-z="3"]{background:var(--wr-z3);color:var(--wr-z3-ink)}
.wr-desc{font-size:15.5px;line-height:1.5;color:var(--wr-muted)}
.wr-desc b{color:var(--wr-ink);font-weight:620}

/* Scale */
.wr-scale{position:relative;padding:34px 0 0}
.wr-track{position:relative;height:14px;border-radius:7px;overflow:hidden;display:flex;background:var(--wr-fill)}
.wr-zone{height:100%;flex:none}
.wr-zone[data-z="0"]{background:var(--wr-z0)}
.wr-zone[data-z="1"]{background:var(--wr-z1)}
.wr-zone[data-z="2"]{background:var(--wr-z2)}
.wr-zone[data-z="3"]{background:var(--wr-z3)}
.wr-zone+.wr-zone{box-shadow:inset 2px 0 0 var(--wr-card)}
.wr-marker{position:absolute;top:0;left:var(--x,50%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:left .45s var(--wr-ease),opacity .3s;pointer-events:none}
.wr-marker b{display:block;padding:2px 9px;border-radius:999px;background:var(--wr-ink);color:var(--wr-card);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;line-height:20px}
.wr-marker i{display:block;width:2px;height:24px;margin-top:2px;background:var(--wr-ink);border-radius:1px}
.wr-empty .wr-marker{opacity:0}
.wr-ticks{position:relative;height:20px;margin-top:6px;font-size:12.5px;color:var(--wr-muted);font-variant-numeric:tabular-nums}
.wr-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.wr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12.5px;color:var(--wr-muted)}
.wr-legend span{display:inline-flex;align-items:center;gap:6px}
.wr-legend span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.wr-cut{position:absolute;top:28px;height:26px;width:0;margin-left:-1px;border-left:2px dashed var(--wr-ink);opacity:.55}
.wr-legend .cut::before{width:0;height:12px;border-radius:0;background:none;border-left:2px dashed var(--wr-ink);opacity:.55}

/* Half-your-height bars */
.wr-bars{display:grid;gap:8px}
.wr-bar-row{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:10px;font-size:13px;color:var(--wr-muted)}
.wr-bar{position:relative;height:12px;border-radius:6px;background:var(--wr-fill)}
.wr-bar>span{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:6px;background:var(--wr-muted);opacity:.5;transition:width .45s var(--wr-ease)}
.wr-bar.waist>span{opacity:1;background:var(--wr-z1-ink)}
.wr-bar.waist.over>span{background:var(--wr-orange)}
.wr-half{position:absolute;top:-5px;bottom:-5px;left:50%;border-left:2px dashed var(--wr-ink);opacity:.6}
.wr-bars-cap{font-size:13px;color:var(--wr-muted)}

/* Targets */
.wr-targets{display:grid;gap:10px;margin:0;padding:14px 16px;border-radius:16px;background:var(--wr-panel)}
.wr-targets div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;line-height:1.4}
.wr-targets dt{color:var(--wr-muted)}
.wr-targets dd{margin:0;font-weight:650;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wr-targets[hidden]{display:none}

/* Shape (waist-to-hip) */
.wr-shape-wrap{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center}
.wr-shape{width:104px;height:auto;overflow:visible}
.wr-shape path.body{fill:var(--wr-body);stroke:var(--wr-body-edge);stroke-width:1.5;transition:d .45s var(--wr-ease)}
.wr-shape .tape-w{stroke:var(--wr-orange);stroke-width:5;fill:none;transition:rx .45s var(--wr-ease)}
.wr-shape .tape-h{stroke:var(--wr-hip);stroke-width:5;fill:none}

/* Footer */
.wr-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.wr-actions{display:flex;flex-wrap:wrap;gap:8px}
.wr-btn{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 15px;border:0;border-radius:999px;background:var(--wr-fill);color:var(--wr-ink);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s var(--wr-ease)}
.wr-btn:hover{background:color-mix(in srgb,var(--wr-orange) 16%,var(--wr-fill))}
.wr-btn:active{transform:scale(.97)}
.wr-btn svg{width:15px;height:15px}
.wr-note{font-size:12.5px;color:var(--wr-muted)}

@media (prefers-reduced-motion:reduce){
  .wr-ui *{transition:none!important}
}
.wr-ui a.wr-btn{color:var(--wr-ink);text-decoration:none}