/* <pg-water-weight>: matches the guide widgets (public/widgets.css): panel, segmented controls, chips, chart. */
pg-water-weight{
  --ww-ink:#1d1d1f;--ww-muted:#6e6e73;--ww-panel:#f2f1ee;--ww-card:#fff;--ww-line:rgba(0,0,0,.09);--ww-fill:rgba(0,0,0,.055);
  --ww-orange:#ff8a1f;--ww-accent:#c25e00;--ww-good:#248a3d;--ww-bad:#d70015;--ww-blue:#0a84a8;--ww-ease:cubic-bezier(.22,1,.36,1);
  display:block;margin:36px 0 48px;color:var(--ww-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-water-weight{--ww-ink:#f5f5f7;--ww-muted:#98989d;--ww-panel:#141416;--ww-card:#1f1f22;--ww-line:rgba(255,255,255,.1);--ww-fill:rgba(255,255,255,.08);--ww-accent:#ff9f3f;--ww-good:#30d158;--ww-bad:#ff6961;--ww-blue:#7fe9ff}
}
pg-water-weight[data-ready]>:not(.ww-ui){display:none}

/* No-JS fallback */
.ww-fallback{padding:22px 24px;border-radius:28px;background:var(--ww-panel)}
.ww-fallback>:first-child{margin-top:0}.ww-fallback>:last-child{margin-bottom:0}
.ww-fallback code{font-size:.92em}

.ww-ui{position:relative;background:var(--ww-panel);border-radius:28px;padding:clamp(14px,3.4vw,28px);container-type:inline-size;font-size:16px;line-height:1.5}
.ww-ui :focus-visible{outline:2px solid var(--ww-orange);outline-offset:3px}
.ww-ui button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.ww-ui p{margin:0}
.ww-ui [hidden]{display:none!important}
.ww-ui a{color:var(--ww-accent)}
.ww-eyebrow{font-size:13px;font-weight:650;letter-spacing:.01em;color:var(--ww-accent)}

/* Header: tabs + unit toggle */
.ww-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.ww-tabs,.ww-seg{display:inline-flex;max-width:100%;padding:3px;border-radius:999px;background:var(--ww-fill);overflow-x:auto;scrollbar-width:none}
.ww-tabs::-webkit-scrollbar,.ww-seg::-webkit-scrollbar{display:none}
.ww-ui .ww-tabs button,.ww-ui .ww-seg button{flex:none;height:34px;padding:0 15px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ww-muted);white-space:nowrap;transition:color .2s,background .25s,box-shadow .25s}
.ww-ui .ww-tabs button{height:38px;padding:0 18px;font-size:15px}
.ww-ui .ww-tabs [aria-selected=true],.ww-ui .ww-seg [aria-pressed=true]{color:var(--ww-ink);background:var(--ww-card);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -2px rgba(0,0,0,.12)}
@media (prefers-color-scheme:dark){.ww-ui .ww-tabs [aria-selected=true],.ww-ui .ww-seg [aria-pressed=true]{background:rgba(255,255,255,.16);box-shadow:none}}
.ww-ui .ww-tabs button:focus-visible,.ww-ui .ww-seg button:focus-visible{outline-offset:-2px}
.ww-units button{min-width:44px}
@container (max-width:520px){
  .ww-head{flex-direction:column;align-items:stretch}
  .ww-tabs{display:flex}.ww-ui .ww-tabs button{flex:1 1 auto;padding:0 10px;font-size:14px}
  .ww-units{align-self:flex-end}
}

/* Panels */
.ww-panel:focus{outline:none}
.ww-est,.ww-body{display:grid;gap:22px}
@container (min-width:760px){
  .ww-est{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;column-gap:28px;row-gap:16px;align-items:start}
  .ww-est .ww-in-a{grid-column:1;grid-row:1}.ww-est .ww-in-b{grid-column:1;grid-row:2}.ww-est .ww-result{grid-column:2;grid-row:1/3}
  .ww-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .ww-body .ww-vol{grid-column:1/-1}
  .ww-est .ww-result{position:sticky;top:calc(var(--nav,56px) + 16px)}
}
.ww-inputs{display:grid;gap:16px;align-content:start}
.ww-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@container (max-width:300px){.ww-row2{grid-template-columns:1fr}}
.ww-field{display:grid;gap:6px;min-width:0;align-content:start}
.ww-field>label,.ww-label{font-size:14px;font-weight:600}
.ww-ui .ww-hint{font-size:12.5px;line-height:1.4;color:var(--ww-muted);min-height:0}
.ww-hint:empty{display:none}
.ww-field.bad .ww-hint{color:var(--ww-bad)}
.ww-field.bad .ww-input{box-shadow:inset 0 0 0 1.5px var(--ww-bad)}
.ww-input{display:flex;align-items:center;height:46px;padding:0 14px;border-radius:14px;background:var(--ww-card);box-shadow:inset 0 0 0 1px var(--ww-line);transition:box-shadow .2s}
.ww-input:focus-within{box-shadow:inset 0 0 0 2px var(--ww-orange)}
.ww-input input{flex:1;min-width:0;width:100%;height:100%;border:0;background:none;color:inherit;font:inherit;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;outline:none;padding:0}
.ww-input input::placeholder{color:var(--ww-muted);font-weight:500;opacity:.7}
.ww-suffix{flex:none;margin-left:6px;font-size:14px;color:var(--ww-muted)}
.ww-field .ww-seg{justify-self:start}

.ww-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ww-chips-label{font-size:13px;font-weight:600;color:var(--ww-muted);margin-right:2px}
.ww-ui .ww-chip{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;font-size:13.5px;font-weight:600;background:var(--ww-card);box-shadow:inset 0 0 0 1px var(--ww-line);transition:background .2s,box-shadow .2s,transform .2s var(--ww-ease)}
.ww-ui .ww-chip:hover{box-shadow:inset 0 0 0 1px var(--ww-muted)}
.ww-ui .ww-chip:active{transform:scale(.96)}
.ww-ui .ww-chip[aria-pressed=true]{background:var(--ww-orange);color:#1a0d00;box-shadow:none}
.ww-ui .ww-chip-quiet{background:transparent;color:var(--ww-muted)}

/* Slider */
.ww-slider>label{display:flex;justify-content:space-between;gap:10px}
.ww-slider output{font-weight:500;color:var(--ww-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13.5px}
.ww-slider input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:none;cursor:pointer}
.ww-slider input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ww-orange) var(--fill,0%),var(--ww-fill) var(--fill,0%))}
.ww-slider input::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ww-orange) var(--fill,0%),var(--ww-fill) var(--fill,0%))}
.ww-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.2)}
.ww-slider input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.2)}
.ww-slider input:focus-visible{outline:none}
.ww-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--ww-orange)}
.ww-slider input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--ww-orange)}

/* Results card */
.ww-result{padding:clamp(18px,3vw,26px);border-radius:22px;background:var(--ww-card);box-shadow:0 1px 0 var(--ww-line)}
.ww-ui .ww-big{margin:4px 0 6px;font-size:clamp(30px,7cqi,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;font-variant-numeric:tabular-nums;text-wrap:balance}
.ww-ui .ww-lead{color:var(--ww-muted);font-size:15.5px;line-height:1.5}

/* Range bars */
.ww-bars{position:relative;display:grid;gap:16px;margin-top:22px}
.ww-bars:empty{display:none}
.ww-bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px 12px}
.ww-bar-track{grid-column:1/-1;grid-row:2}
.ww-axis{grid-template-columns:minmax(0,1fr)}.ww-axis>span:first-child,.ww-axis .ww-bar-val{display:none}
.ww-bar-label{font-size:13.5px;font-weight:600;line-height:1.25}
.ww-bar-label small{display:block;font-size:12px;font-weight:500;color:var(--ww-muted)}
.ww-bar-track{position:relative;height:12px;border-radius:6px;background:var(--ww-fill)}
.ww-bar-track::before{content:"";position:absolute;left:var(--zero,50%);top:-5px;bottom:-5px;width:1px;background:var(--ww-muted);opacity:.45}
.ww-bar{position:absolute;top:0;bottom:0;border-radius:6px;transition:left .45s var(--ww-ease),width .45s var(--ww-ease)}
.ww-bar.down{background:linear-gradient(90deg,#33c2e6,#0a84a8)}
.ww-bar.up{background:linear-gradient(90deg,#ff9f3f,#ff6a1f)}
.ww-bar.both{background:linear-gradient(90deg,#0a84a8,#ff9f3f)}
.ww-bar-val{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--ww-muted)}
.ww-bar-row.total{padding-top:12px;border-top:1px solid var(--ww-line)}
.ww-bar-row.total .ww-bar-label,.ww-bar-row.total .ww-bar-val{color:var(--ww-ink);font-weight:700}
.ww-bar-row.total .ww-bar-track{height:16px;border-radius:8px}.ww-bar-row.total .ww-bar{border-radius:8px}
.ww-axis .ww-bar-track{grid-row:1;height:14px;background:none}.ww-axis .ww-bar-track::before{display:none}
.ww-axis b{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:500;color:var(--ww-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ww-axis .ww-bar-val{font-weight:500;font-size:11.5px}
.ww-obs{position:absolute;top:-6px;bottom:-6px;width:0;margin-left:-1px;border-left:2px dashed var(--ww-ink);pointer-events:none;transition:left .45s var(--ww-ease)}
.ww-axis .ww-bar-track:has(.ww-obs-label){height:36px}
.ww-ui .ww-obs-label{position:absolute;top:16px;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--ww-ink);padding:1px 6px;border-radius:6px;background:var(--ww-panel)}
.ww-split p{margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--ww-panel);font-size:14.5px;line-height:1.45}
}

/* Trend */
.ww-trend{display:grid;gap:16px}
.ww-trend-top{display:grid;gap:14px}
.ww-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ww-tile{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:var(--ww-card);min-width:0}
.ww-tile span{font-size:12.5px;font-weight:600;color:var(--ww-muted)}
.ww-tile b{font-size:clamp(18px,3.6cqi,24px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ww-tile.lead b{color:var(--ww-accent)}
.ww-tile small{font-size:12px;line-height:1.3;color:var(--ww-muted)}
@container (max-width:560px){.ww-tiles{grid-template-columns:1fr 1fr}.ww-tile.lead{grid-column:1/-1}}
.ww-plot{position:relative;aspect-ratio:16/7.2;min-height:250px;touch-action:pan-y;cursor:crosshair;border-radius:14px;background:var(--ww-card)}
.ww-plot canvas{position:absolute;inset:0;width:100%;height:100%}
.ww-plot:focus-visible{outline:2px solid var(--ww-orange);outline-offset:3px}
@container (max-width:520px){.ww-plot{aspect-ratio:4/3.6}}
.ww-readout{position:absolute;top:8px;left:0;display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.35;white-space:nowrap;pointer-events:none;
  background:var(--ww-card);box-shadow:0 0 0 1px var(--ww-line),0 8px 24px -8px rgba(0,0,0,.25);opacity:0;transition:opacity .15s}
.ww-readout.on{opacity:1}
.ww-readout span{color:var(--ww-muted)}
.ww-readout em{font-style:normal;font-weight:600;color:var(--ww-ink);font-variant-numeric:tabular-nums}
.ww-readout .r-trend em{color:var(--ww-accent)}
.ww-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ww-muted)}
.ww-legend span{display:inline-flex;align-items:center;gap:7px}
.ww-legend span::before{content:"";flex:none}
.k-dot::before{width:7px;height:7px;border-radius:50%;background:var(--ww-ink);opacity:.55}
.k-trend::before{width:16px;height:4px;border-radius:2px;background:linear-gradient(90deg,#ff9f3f,#ff4f6d)}
.k-band::before{width:16px;height:10px;border-radius:3px;background:rgba(0,150,190,.16)}
.k-fit::before{width:16px;border-top:2px dashed var(--ww-ink);opacity:.7}
@media (prefers-color-scheme:dark){.k-band::before{background:rgba(127,233,255,.22)}}

.ww-trend-grid{display:grid;gap:18px;margin-top:4px}
@container (min-width:760px){.ww-trend-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}}
.ww-trend-input{display:grid;gap:8px;align-content:start}
.ww-trend-input textarea{width:100%;min-height:150px;resize:vertical;padding:12px 14px;border:0;border-radius:14px;background:var(--ww-card);color:inherit;box-shadow:inset 0 0 0 1px var(--ww-line);
  font:500 14px/1.55 ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.ww-trend-input textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ww-orange)}
.ww-add{display:flex;gap:8px}
.ww-add .ww-input{flex:1;max-width:180px}
.ww-ui .ww-btn{height:46px;padding:0 18px;border-radius:999px;background:var(--ww-orange);color:#1a0d00;font-weight:650;font-size:15px;white-space:nowrap;transition:transform .2s var(--ww-ease),background .2s}
.ww-ui .ww-btn:hover{background:#ff9a3a}.ww-ui .ww-btn:active{transform:scale(.97)}
.ww-check{display:flex;gap:10px;align-items:flex-start;margin-top:4px;font-size:14px;font-weight:600;cursor:pointer}
.ww-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ww-orange)}
.ww-check small{display:block;font-weight:500;font-size:12.5px;color:var(--ww-muted)}
.ww-trend-side{display:grid;gap:16px;align-content:start}
.ww-verdict{padding:16px 18px;border-radius:18px;background:var(--ww-card);font-size:14.5px;line-height:1.45;color:var(--ww-muted);border-left:4px solid var(--c,var(--ww-muted))}
.ww-verdict[data-status=good]{--c:var(--ww-good)}.ww-verdict[data-status=flat]{--c:#8b5cf6}.ww-verdict[data-status=up]{--c:var(--ww-orange)}.ww-verdict[data-status=wait]{--c:var(--ww-muted)}
.ww-ui .ww-v-title{margin-bottom:4px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ww-ink)}
.ww-verdict p+p{margin-top:6px}
.ww-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* Body water */
.ww-tbw{display:flex;gap:18px;align-items:center;margin-top:6px}
.ww-glass{position:relative;flex:none;width:72px;height:112px;border-radius:12px 12px 20px 20px;background:var(--ww-fill);overflow:hidden;box-shadow:inset 0 0 0 2px var(--ww-line)}
.ww-glass i{position:absolute;left:0;right:0;bottom:0;height:var(--p,60%);background:linear-gradient(180deg,#7fe9ff,#0a84a8);transition:height .6s var(--ww-ease)}
.ww-glass i::before{content:"";position:absolute;left:-10%;right:-10%;top:-4px;height:8px;border-radius:50%;background:#bdf4ff;opacity:.8}
.ww-glass b{position:absolute;inset:auto 0 10px;text-align:center;font-size:15px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.ww-ht{display:flex;gap:8px}
.ww-ht .ww-input{flex:1}
.ww-ui:not(.ww-metric) .ww-met,.ww-ui.ww-metric .ww-imp{display:none}
.ww-vol{padding:clamp(16px,3vw,22px);border-radius:22px;background:var(--ww-card)}
.ww-vol-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0}
.ww-vol-row .ww-input{width:110px;background:var(--ww-panel)}
.ww-vol select{height:46px;padding:0 34px 0 14px;border:0;border-radius:14px;background:var(--ww-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:inherit;font:inherit;font-size:16px;font-weight:600;-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px var(--ww-line);cursor:pointer}
.ww-vol select:focus-visible{outline:2px solid var(--ww-orange);outline-offset:2px}
.ww-eq{font-size:22px;color:var(--ww-muted)}
.ww-vol-out{display:flex;flex-direction:column;line-height:1.2}
.ww-vol-out b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ww-vol-out span{font-size:13px;color:var(--ww-muted)}

.ww-ui .ww-foot{margin-top:20px;font-size:12.5px;color:var(--ww-muted);text-align:center}

@media (prefers-reduced-motion:reduce){pg-water-weight *{transition:none!important;animation:none!important}}
.ww-axis b:first-child{transform:none}.ww-axis b:last-of-type{transform:translateX(-100%)}
@container (max-width:440px){.ww-more{display:none}}
@container (max-width:759px){.ww-trend-side{order:-1}}