/* HK Ads Desk - POWER HOUSE (Money page, power.js). The city's power house at night: every client is a tall glass tank and
   the glowing liquid inside is its ad money.
     level  = days of money left (empty = 0, full = 7 days or more)
     colour = red: 2 days or less, or under Rs 500 · amber: 2 to 4 days · green: 4 days or more
     dry    = money over (dark glass, dead gauge) · frosted = nothing to measure (no ads running / money not shown)
     bubbles + pipe = money going out each day (faster bubbles, thicker pipe = a bigger daily budget)
   Loads after app.css + cards.css; every class starts with pw-.

   LIGHT BY DESIGN
   - The first paint is complete with no animation at all: each level is a plain inline px value (--lh).
   - Only transform and opacity ever move (levels, waves, bubbles, pipe flow, breathing, refill). Nothing animates height,
     box-shadow, filter or background-position.
   - A tank animates only while it is on screen ([data-live], set by power.js) and everything stands still while the page
     is being scrolled ([data-scroll]) or the tab is hidden ([data-hold]).
   - While the page is being scrolled nothing answers the pointer either: tanks passing under a resting mouse would
     otherwise each be redrawn (hover styles sit behind :not([data-scroll])). A tank never moves on hover or press - the
     glass only lights up - so pointing at a tank never makes the browser build new layers.
   - Each tank is its own box (contain + content-visibility): one tank never repaints its neighbours.
   - Few layers: the browser keeps one layer per moving thing plus one for whatever is drawn above it. So the moving
     things are few (wave, bubbles, pipe flow, the red glow), the red glow is the LAST thing drawn in a tank, and nothing
     at rest carries an opacity, a filter or a clip it does not need (each of those is bookkeeping on every frame).
   - Touch devices get a lighter drawing (see the pointer:coarse block at the end).
   The glass is 244px tall with a 4px wall; the liquid column is 222px (--pw-col = COL in power.js). */

.pw-root{--pw-gh:244px;--pw-col:222px;position:relative;isolation:isolate}
.pw-root::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-30px;height:640px;pointer-events:none;
  background:radial-gradient(56% 60% at 50% 0,rgba(127,210,255,.085),transparent 70%)}
.pw-root [hidden]{display:none!important}
.pw-root od-c{white-space:pre}                  /* FX.setNum: keep the spaces of "Lasts 5 days" while the digit rolls */
/* tone = one meaning each. --l0 top of the liquid · --l1 deep liquid · --wv the surface wave (one tile, same colours) */
.pw-root [data-tone=good]{--rgb:62,207,142;--l0:#1b5240;--l1:#2a8862;
  --wv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='9' viewBox='0 0 96 9'%3E%3Cpath d='M0 5Q24 1 48 5T96 5V9H0Z' fill='%231b5240'/%3E%3Cpath d='M0 5Q24 1 48 5T96 5' fill='none' stroke='%233ecf8e' stroke-opacity='.65'/%3E%3C/svg%3E")}
.pw-root [data-tone=warn]{--rgb:240,180,76;--l0:#5c4822;--l1:#9a7431;
  --wv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='9' viewBox='0 0 96 9'%3E%3Cpath d='M0 5Q24 1 48 5T96 5V9H0Z' fill='%235c4822'/%3E%3Cpath d='M0 5Q24 1 48 5T96 5' fill='none' stroke='%23f0b44c' stroke-opacity='.65'/%3E%3C/svg%3E")}
.pw-root [data-tone=bad]{--rgb:255,95,87;--l0:#5e2627;--l1:#a23d3a;
  --wv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='9' viewBox='0 0 96 9'%3E%3Cpath d='M0 5Q24 1 48 5T96 5V9H0Z' fill='%235e2627'/%3E%3Cpath d='M0 5Q24 1 48 5T96 5' fill='none' stroke='%23ff5f57' stroke-opacity='.65'/%3E%3C/svg%3E")}
.pw-root [data-tone=idle]{--rgb:143,176,196}

/* ---------- head ---------- */
.pw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-bottom:18px}
.pw-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:10px;font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 18px rgba(127,210,255,.55)}
.pw-eyebrow i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.pw-eyebrow span{letter-spacing:.1em;color:var(--muted);text-shadow:none}
.pw-head h1{font-size:30px;line-height:1.1;letter-spacing:-.04em}
.pw-head h1 span{background:linear-gradient(90deg,#fff,#a9d8f0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pw-head p{margin:6px 0 0;color:var(--muted)}
.pw-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pw-read{display:inline-flex;align-items:center;gap:8px;font:400 12px/1 var(--mono);color:var(--muted);white-space:nowrap}
.pw-read i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(62,207,142,.15)}
.pw-read.old i{background:var(--warn);box-shadow:0 0 0 3px rgba(240,180,76,.15)}
.pw-view button{display:inline-flex;align-items:center;gap:7px}
.pw-view .ic{width:15px;height:15px}

/* ---------- control deck ---------- */
.pw-deck{position:relative;margin-bottom:16px;border-radius:20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(17,22,31,.9),rgba(8,10,15,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.075),0 30px 60px -36px #000,0 0 90px -50px rgba(127,210,255,.5)}
.pw-deck::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(169,216,240,.75),transparent)}
.pw-deck::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 78%);mask:linear-gradient(180deg,#000,transparent 78%)}
/* five tiles: money left · going out · to add today · to add for 1 week · money over */
.pw-kpis{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.75fr)}
.pw-kpi{position:relative;min-width:0;padding:18px 22px 16px;display:grid;align-content:start;gap:8px}
.pw-kpi+.pw-kpi{box-shadow:-1px 0 0 var(--hair)}
.pw-kpi .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-num{font-size:34px;font-weight:300;line-height:1;letter-spacing:-.045em;white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums}
.pw-num b{font-weight:inherit}
.pw-num .m-per{font-size:.38em;letter-spacing:0;margin-left:.3em}
.pw-kpi[data-none] .m-cur,.pw-kpi[data-none] .m-per{display:none}
.pw-kpi small{font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-kpi[data-tone=warn] .pw-num{color:var(--warn)}
.pw-kpi[data-tone=bad] .pw-num{color:#ff7b74}
.pw-kpi[data-tone=good] .pw-num{color:var(--good)}
.pw-kpi[data-tone] .m-cur{color:inherit;opacity:.75}
/* a tile with a button ("Copy all", "1-week list"): the button sits under the figure, so five tiles fit at every width */
.pw-kadd>.btn{justify-self:start;margin-top:2px}
@media (max-width:1180px) and (min-width:821px){.pw-kpi{padding:16px 16px 14px}.pw-num{font-size:27px}}
/* the main line: everything going out, as one pipe */
.pw-main{position:relative;height:6px;margin-top:2px;border-radius:99px;overflow:hidden;background:rgba(127,210,255,.1);box-shadow:inset 0 0 0 1px rgba(127,210,255,.16)}
.pw-main i{position:absolute;top:0;bottom:0;left:-36px;right:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 14px,rgba(127,210,255,.85) 20px,#eaf7ff 23px,transparent 24px,transparent 36px)}
.pw-kpi[data-none] .pw-main{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)}
.pw-kpi[data-none] .pw-main i{display:none}
.pw-main i{animation:pwMain 1.5s linear infinite}
@keyframes pwMain{to{transform:translate3d(36px,0,0)}}

/* the main reservoir: every tank side by side, emptiest first. A bar is a plain box with a plain height (no layer and no
   clip of its own); when the money changes power.js stretches it from the old height to the new one, once (scaleY) */
.pw-board{padding:2px 22px 18px}
.pw-bh{margin-bottom:9px}
.pw-res{position:relative;height:76px;padding:0 12px;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0c1018,#06080c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07),0 1px 0 1px rgba(255,255,255,.03)}
.pw-res::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:calc((100% - 12px) * 2 / 7);height:0;border-top:1px dashed rgba(255,120,112,.4);pointer-events:none}
.pw-res::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.025) 20%,transparent 42%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.05)}
.pw-cells{display:grid;height:100%;align-items:stretch}
.pw-cell{--rgb:91,98,112;position:relative;min-width:0;cursor:pointer;transform-origin:50% 100%}
.pw-cell::before{content:"";position:absolute;left:0;right:22%;bottom:0;height:calc((100% - 12px) * var(--lv,0));min-height:2px;border-radius:2px 2px 0 0;transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(var(--rgb),.9) 0,rgba(var(--rgb),.9) 2px,rgba(var(--rgb),.47) 2px,rgba(var(--rgb),.19) 100%)}
.pw-cell[data-kind=dry]::before{height:3px;background:rgba(255,95,87,.78)}
.pw-cell[data-kind=frost]::before{height:calc(100% - 12px);background:linear-gradient(180deg,rgba(169,216,240,.14),rgba(169,216,240,.05))}
.pw-cell.off{opacity:.2}
.pw-cell:hover::after,.pw-cell.on::after{content:"";position:absolute;left:0;right:22%;top:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.2))}
.pw-scale{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 14px;margin-top:7px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.pw-scale i{font-style:normal;color:#ff9a94}
/* money that just came in */
.pw-gains{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 22px 16px;margin-top:-4px}
.pw-gchip{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;padding:5px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--text);
  background:rgba(127,210,255,.08);box-shadow:inset 0 0 0 1px rgba(127,210,255,.3)}
.pw-gchip:hover{background:rgba(127,210,255,.14)}
.pw-gchip b{font-weight:500;color:#bfe8ff}

/* ---------- filters + key ---------- */
.pw-bar{display:flex;gap:8px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.pw-chips .chip{display:inline-flex;align-items:center}
.pw-dot{flex:none;width:7px;height:7px;margin-right:8px;border-radius:50%;background:rgb(var(--rgb,91,98,112));box-shadow:0 0 8px rgba(var(--rgb,91,98,112),.7)}
.pw-dot.over{background:transparent;box-shadow:inset 0 0 0 1.5px #ff6a63}
.pw-key{font-size:12px;line-height:1.45;color:var(--muted)}
.pw-root[data-view=list] .pw-key{display:none}
.pw-root[data-empty] .pw-deck,.pw-root[data-empty] .pw-bar,.pw-root[data-empty] .pw-key{display:none}

/* ---------- the floor: tanks ---------- */
.pw-floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:6px 0;margin:0 -9px;overflow-anchor:none}
.pw-floor>.empty{grid-column:1/-1}
.pw-sec{grid-column:1/-1;display:flex;align-items:center;gap:0 10px;flex-wrap:wrap;min-width:0;margin:14px 9px 6px;font-size:13.5px;line-height:1.3;color:var(--soft)}
.pw-sec:first-child{margin-top:6px}
.pw-sec b{font-weight:500;color:var(--text)}
.pw-sec em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}
.pw-sec span{color:var(--muted);font-size:12.5px}
.pw-sec::after{content:"";flex:1;min-width:20px;height:1px;background:linear-gradient(90deg,var(--hair2),transparent)}
.pw-sec .pw-dot{margin-right:0}
/* phones: a calm group is one row that opens in place */
.pw-fold{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;margin:10px 6px 4px;padding:10px 14px;border:0;border-radius:12px;cursor:pointer;text-align:left;
  font:400 13.5px/1.3 var(--sans);color:var(--soft);background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--hair2);-webkit-tap-highlight-color:transparent}
.pw-fold>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-fold b{font-weight:500;color:var(--text)}
.pw-fold em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}
.pw-fold u{flex:none;display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-weight:500;color:var(--accent)}
.pw-fold u .ic{width:15px;height:15px}
.pw-fold.open u .ic{transform:rotate(180deg)}
.pw-fold .pw-dot{margin-right:0}
.pw-fold.end{justify-content:center;margin-top:2px;margin-bottom:8px;color:var(--accent);font-weight:500}
.pw-list>.pw-fold{margin:8px 0 2px}

.pw-tank{--rgb:143,176,196;--px:9px;position:relative;display:block;min-width:0;height:338px;padding:6px var(--px) 10px;cursor:pointer;outline:0;
  contain:layout paint style;content-visibility:auto;contain-intrinsic-size:auto 338px;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* red tanks breathe: a calm glow around the glass that starts lit - nothing blinks, only its opacity moves. It is drawn
   on top of the tank (z-index), so this one moving layer never pushes the rest of the tank into layers of its own */
.pw-tank[data-tone=bad]::after{content:"";position:absolute;z-index:7;left:var(--px);right:var(--px);top:22px;height:var(--pw-gh);border-radius:26px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,95,87,.55),0 0 9px rgba(255,95,87,.5)}
.pw-tank[data-live][data-tone=bad]::after{animation:pwBreathe 3s ease-in-out infinite;animation-delay:var(--ph,0s)}
@keyframes pwBreathe{50%{opacity:.22}}
/* the client icon answers with the tank, not on its own (app.css brightens it with a filter and scales the glyph) */
.pw-root .em:hover{filter:none}
.pw-root .em:hover>*{transform:none}

/* lid: a metal cap with the days gauge (7 marks = 7 days of money) */
.pw-cap{position:relative;z-index:2;height:16px;margin:0 22px;padding:0 10px;display:flex;align-items:center;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#4d5665 0,#2b313b 40%,#171b21 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.06)}
.pw-cap::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-3px;height:4px;border-radius:2px;
  background:linear-gradient(180deg,#414a57,#15181d);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(0,0,0,.6)}
.pw-gauge{--seg:calc((100% - 18px) / 7);position:relative;flex:1;height:4px;
  background:linear-gradient(90deg,rgb(var(--rgb)) calc(var(--lv,0) * 100%),#4a515d 0)}
.pw-gauge::after{content:"";position:absolute;inset:0;                /* the six gaps between the seven day marks */
  background:repeating-linear-gradient(90deg,rgba(36,41,49,0) 0,rgba(36,41,49,0) var(--seg),#242931 var(--seg),#242931 calc(var(--seg) + 3px))}
.pw-tank[data-kind=dry] .pw-gauge,.pw-tank[data-kind=frost] .pw-gauge{background:#363c46}

/* glass: a thick wall, the well inside it, reflections on top */
.pw-glass{position:relative;height:var(--pw-gh);border-radius:26px;isolation:isolate;
  background:linear-gradient(90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.07) 3%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.06) 97%,rgba(255,255,255,.15) 100%),#0b0e14;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.65)}
.pw-well{position:absolute;inset:4px;z-index:1;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0e131c 0,#090c12 50%,#06080b 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
/* the cylinder: darker towards both walls, shade under the lid, a soft light rising from the base (plain gradients) */
.pw-well::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 7px),
    linear-gradient(0deg,rgba(var(--rgb),.4),rgba(var(--rgb),0) 18px),
    linear-gradient(90deg,rgba(0,0,0,.44) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 72%,rgba(0,0,0,.38) 100%)}
/* reflections: a hard streak near the left wall, a soft one on the right, light on the shoulder, a sheen across */
.pw-glass::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(5px 44% at 11% 34%,rgba(255,255,255,.42),rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 100%),
    radial-gradient(9px 36% at 88.5% 40%,rgba(255,255,255,.12),rgba(255,255,255,0) 100%),
    radial-gradient(78% 22px at 50% 0,rgba(255,255,255,.15),rgba(255,255,255,0) 100%),
    linear-gradient(118deg,rgba(255,255,255,.07) 0,rgba(255,255,255,.015) 22%,rgba(255,255,255,0) 34%)}
/* pointer over a tank / jump from the reservoir: the glass lights up. The light exists only then (it has no "content"
   at rest, so there is no hidden layer), the tank itself never moves, and nothing lights while the page is scrolled */
.pw-glass::after{position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0,rgba(255,255,255,.1),rgba(255,255,255,0) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.pw-ping .pw-glass::after{content:""}
@media (hover:hover){
  .pw-root:not([data-scroll]) .pw-tank:hover .pw-glass::after{content:""}
  .pw-root:not([data-scroll]) .pw-tank:active .pw-glass::after{content:"";background:radial-gradient(120% 76% at 50% 0,rgba(255,255,255,.17),rgba(255,255,255,.02) 76%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
}
.pw-tank:focus-visible .pw-glass{box-shadow:0 0 0 1px rgba(169,216,240,.8),0 0 0 4px rgba(169,216,240,.18)}
.pw-ping .pw-glass,.pw-row.pw-ping{box-shadow:0 0 0 1px rgba(169,216,240,.85),0 0 0 5px rgba(169,216,240,.16)}
/* day marks: one tick a day, the 2-day ("low") tick longer and red */
.pw-marks{position:absolute;z-index:2;right:2px;bottom:0;width:5px;height:var(--pw-col);pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0,transparent calc(100% / 7 - 1px),rgba(255,255,255,.31) calc(100% / 7 - 1px),rgba(255,255,255,.31) calc(100% / 7))}
.pw-marks::after{content:"";position:absolute;right:0;bottom:calc(200% / 7 - 1px);width:9px;height:1px;background:rgba(255,120,112,.82)}
.pw-tank[data-kind=frost] .pw-marks{display:none}

/* liquid: one column that slides down to its level (transform only), lit from the base, a drifting surface, bubbles */
.pw-liq{position:absolute;z-index:1;left:0;right:0;bottom:0;height:var(--pw-col);
  transform:translateY(calc(var(--pw-col) - var(--lh,0px)));transition:transform 1s var(--ease)}
.pw-tank[data-kind=dry] .pw-liq{transform:translateY(calc(var(--pw-col) + 12px))}       /* drained: fully below the well */
.pw-tank[data-kind=frost] .pw-liq{display:none}
/* the surface is brightest where it meets the glass and stays quiet in the middle, where the words are */
.pw-liq::before,.pw-liq::after{content:"";position:absolute;z-index:3;top:-5px;width:38%;height:10px;pointer-events:none}
.pw-liq::before{left:0;background:linear-gradient(90deg,rgb(var(--rgb)),rgba(var(--rgb),0) 84%) 0 50%/100% 1.5px no-repeat,radial-gradient(100% 50% at 0 50%,rgba(var(--rgb),.7),rgba(var(--rgb),0) 100%)}
.pw-liq::after{right:0;background:linear-gradient(270deg,rgb(var(--rgb)),rgba(var(--rgb),0) 84%) 0 50%/100% 1.5px no-repeat,radial-gradient(100% 50% at 100% 50%,rgba(var(--rgb),.7),rgba(var(--rgb),0) 100%)}
.pw-body{position:absolute;inset:0;z-index:1;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--rgb),.22),rgba(var(--rgb),0) 14px),linear-gradient(0deg,var(--l1),var(--l0))}
/* the light at the base stays at the bottom of the tank while the column slides (it moves the other way) */
.pw-glow{position:absolute;left:0;right:0;bottom:0;height:var(--pw-col);pointer-events:none;
  transform:translateY(calc(var(--lh,0px) - var(--pw-col)));transition:transform 1s var(--ease);
  background:radial-gradient(70% 46px at 50% 100%,rgba(255,255,255,.3),rgba(255,255,255,0) 74%),linear-gradient(0deg,rgb(var(--rgb)) 0,rgba(var(--rgb),0) 64px)}
/* the wave: one tiled picture drifting sideways by exactly one tile */
.pw-wv{position:absolute;z-index:2;left:0;bottom:calc(100% - 1px);width:calc(100% + 96px);height:9px;pointer-events:none;background:var(--wv) 0 0/96px 9px repeat-x}
.pw-tank[data-live] .pw-wv{animation:pwWave 6.5s linear infinite;animation-delay:var(--ph,0s)}
@keyframes pwWave{to{transform:translate3d(-96px,0,0)}}
/* bubbles: ONE element per tank - a small tiled picture sliding up one tile (132px) per loop, faster for a bigger daily
   budget (--bt). They exist only while the tank is on screen. */
.pw-bub{display:none;position:absolute;left:0;right:0;top:0;height:calc(100% + 132px);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='132'%3E%3Cg fill='white' fill-opacity='.085' stroke='white' stroke-opacity='.58' stroke-width='.9'%3E%3Ccircle cx='22' cy='16' r='2.8'/%3E%3Ccircle cx='112' cy='54' r='2'/%3E%3Ccircle cx='68' cy='94' r='3.4'/%3E%3Ccircle cx='140' cy='120' r='1.7'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.43'%3E%3Ccircle cx='44' cy='60' r='1.1'/%3E%3Ccircle cx='92' cy='8' r='.9'/%3E%3Ccircle cx='128' cy='86' r='1.2'/%3E%3Ccircle cx='8' cy='112' r='1'/%3E%3Ccircle cx='84' cy='38' r='.8'/%3E%3C/g%3E%3C/svg%3E") var(--bx,0px) 0/160px 132px repeat}
.pw-tank[data-live] .pw-bub{display:block;animation:pwBub var(--bt,6s) linear infinite;animation-delay:var(--ph,0s)}
@keyframes pwBub{to{transform:translate3d(0,-132px,0)}}

/* what is written on the glass */
.pw-info{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;min-width:0;padding:15px 12px 13px;text-align:center;
  text-shadow:0 1px 3px rgba(3,5,8,.92)}
.pw-info .em{--em-cut:#0b0e14;margin-bottom:7px}
.pw-info .em svg{filter:none}                      /* 87 icons: skip the glyph glow here, it costs a filter pass each */
.pw-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;max-width:100%;min-height:31px;font-size:12.5px;font-weight:500;line-height:15.5px;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.pw-amt{flex:none;margin-top:7px;font-size:26px;font-weight:300;line-height:1;letter-spacing:-.035em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.pw-amt b{font-weight:inherit}
.pw-amt.big{font-size:21px;line-height:26px}
.pw-amt .m-cur{color:rgba(255,255,255,.72)}
.pw-amt.none{color:var(--dim);text-shadow:none}
.pw-amt.none .m-cur{display:none}
.pw-s1,.pw-s2{flex:none;display:block;max-width:100%;font-size:11.5px;line-height:15px;white-space:nowrap}      /* short fixed phrases: no clip needed */
.pw-s1{margin-top:8px;font-weight:500;color:var(--text)}
.pw-s2{margin-top:1px;color:#c9ced6}
.pw-s2:empty{display:none}
.pw-need{flex:none;margin-top:auto;font-size:11.5px;line-height:1.3;color:#ffdcd9;white-space:nowrap}
.pw-need b{font-weight:600;color:#fff}
.pw-copy.btn{flex:none;width:100%;margin-top:6px;min-height:26px;padding:4px 6px;gap:5px;font-size:11.5px;text-shadow:none;color:var(--text);background:rgba(8,10,14,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.2)}
.pw-copy.btn:hover{background:rgba(22,26,33,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.32)}
.pw-copy.btn .ic{width:13px;height:13px}

/* dry: money over - dark glass, dead gauge, only the warning light at the base */
.pw-tank[data-kind=dry] .pw-well{background:linear-gradient(180deg,#0a0c11,#050608)}
.pw-tank[data-kind=dry] .pw-well::after{background:
    linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 7px),
    radial-gradient(90% 58px at 50% 100%,rgba(255,95,87,.5),rgba(255,95,87,0) 100%),
    linear-gradient(90deg,rgba(0,0,0,.44) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 72%,rgba(0,0,0,.38) 100%)}
.pw-tank[data-kind=dry] .pw-glass::before{background:
    radial-gradient(5px 44% at 11% 34%,rgba(255,255,255,.25),rgba(255,255,255,.07) 55%,rgba(255,255,255,0) 100%),
    radial-gradient(9px 36% at 88.5% 40%,rgba(255,255,255,.07),rgba(255,255,255,0) 100%),
    radial-gradient(78% 22px at 50% 0,rgba(255,255,255,.09),rgba(255,255,255,0) 100%),
    linear-gradient(118deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.01) 22%,rgba(255,255,255,0) 34%)}
/* its icon goes dull: a dark veil over the tile and a greyer glyph (plain colours - a filter would cost a layer pass) */
.pw-tank[data-kind=dry] .em::before{background:rgba(7,9,12,.46)}
.pw-tank[data-kind=dry] .em svg{stroke:color-mix(in srgb,var(--e1) 30%,#8f97a3)}
.pw-tank[data-kind=dry] .pw-name{color:var(--soft)}
.pw-amt.zero{color:#ff8a84}
.pw-amt.zero .m-cur{color:inherit;opacity:.7}
.pw-plate{flex:none;margin-top:8px;padding:4px 9px;border-radius:6px;font:600 10.5px/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;text-shadow:none;
  color:#ffb1ac;background:rgba(255,95,87,.12);box-shadow:inset 0 0 0 1px rgba(255,95,87,.5)}
.pw-tank[data-kind=dry] .pw-s1{margin-top:6px;font-weight:400;color:var(--muted)}

/* frosted: nothing to measure, so no level is drawn */
.pw-frost{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--grain),linear-gradient(118deg,rgba(255,255,255,.05) 0,transparent 30%,rgba(255,255,255,.035) 52%,transparent 74%),linear-gradient(180deg,rgba(196,226,242,.17),rgba(150,184,206,.08))}
.pw-tank[data-kind=frost] .pw-well::after{background:
    linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 7px),
    linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 72%,rgba(0,0,0,.34) 100%)}
/* a frosted tank's icon is grey (its own colours are swapped for greys; app.css does this with a filter) */
.pw-root .em[data-h=idle]{filter:none;--e1:#7b8490!important;--e2:#4d545e!important}
.pw-tank[data-kind=frost] .pw-amt{color:var(--soft)}
.pw-tank[data-kind=frost] .pw-s1{color:var(--soft);font-weight:400}
.pw-tank[data-kind=frost] .pw-s2{color:var(--muted)}
.pw-tank[data-kind=frost] .pw-name{color:var(--soft)}

/* base: the plinth (a light under the tank), the outlet pipe (thickness = daily budget), the reading */
.pw-base{position:relative;isolation:isolate}
.pw-base::before{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:6px;height:54px;pointer-events:none;background:radial-gradient(50% 62% at 50% 0,rgba(var(--rgb),.2),rgba(var(--rgb),0) 76%)}
.pw-tank[data-kind=frost] .pw-base::before{display:none}
.pw-plinth{display:block;height:9px;margin:-1px 9px 0;border-radius:2px 2px 7px 7px;
  background:linear-gradient(180deg,rgba(var(--rgb),.42),rgba(var(--rgb),0) 5px),linear-gradient(180deg,#39414c 0,#1c2027 55%,#0d0f13 100%);
  box-shadow:inset 0 1px 0 rgba(var(--rgb),.9),0 1px 0 rgba(0,0,0,.6)}
.pw-tank[data-kind=frost] .pw-plinth{background:linear-gradient(180deg,#39414c 0,#1c2027 55%,#0d0f13 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 rgba(0,0,0,.6)}
.pw-pb{position:relative;height:16px;display:flex;align-items:center;margin:0 4px;padding:0 4px}
.pw-pb::before,.pw-pb::after{content:"";position:absolute;top:50%;width:4px;height:calc(var(--pt,4px) + 6px);margin-top:calc((var(--pt,4px) + 6px) / -2);border-radius:1.5px;
  background:linear-gradient(180deg,#4d5665,#1b1f26);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.pw-pb::before{left:0}.pw-pb::after{right:0}
.pw-pipe{position:relative;flex:1;height:var(--pt,4px);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,rgba(0,0,0,.4)),rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(0,0,0,.55)}
.pw-tank[data-flow] .pw-pipe{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 45%,rgba(0,0,0,.4)),rgba(var(--rgb),.3)}
.pw-pipe i{position:absolute;top:0;bottom:0;left:-28px;right:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 9px,rgba(var(--rgb),.95) 15px,rgba(255,255,255,.85) 17px,transparent 18px,transparent 28px)}
.pw-tank:not([data-flow]) .pw-pipe i{display:none}
.pw-tank[data-live] .pw-pipe i{animation:pwFlow var(--ft,1.4s) linear infinite}
@keyframes pwFlow{to{transform:translate3d(28px,0,0)}}
.pw-day{margin-top:5px;min-height:30px;text-align:center;font-size:12.5px;line-height:16px;color:var(--soft);white-space:nowrap}
.pw-day b{font-weight:500;color:var(--text)}
.pw-day b:empty+span{color:var(--muted)}
.pw-day small{display:block;margin-top:1px;font:600 9.5px/13px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* refill: money came in since the last look (light pours in, the level rises, a tag says how much) */
.pw-gain{position:absolute;z-index:8;left:50%;top:calc(22px + var(--pw-gh) - 12px);transform:translateX(-50%);padding:3px 9px;border-radius:99px;white-space:nowrap;pointer-events:none;
  font-size:11.5px;font-weight:500;line-height:16px;color:#eaf7ff;background:#0c1620;box-shadow:inset 0 0 0 1px rgba(127,210,255,.6)}
.pw-pour{position:absolute;z-index:0;left:50%;top:0;bottom:0;width:12px;margin-left:-6px;opacity:0;pointer-events:none;transform-origin:50% 0;
  background:linear-gradient(90deg,rgba(234,247,255,0),rgba(234,247,255,.75) 40%,rgba(234,247,255,.75) 60%,rgba(234,247,255,0))}
.pw-flash{position:absolute;z-index:4;inset:0;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14))}
.pw-tank.pw-refill .pw-liq{animation:pwRise 2.6s cubic-bezier(.3,.1,.2,1)}
.pw-tank.pw-refill .pw-glow{animation:pwRiseG 2.6s cubic-bezier(.3,.1,.2,1)}
.pw-tank.pw-refill .pw-pour{animation:pwPour 2.8s ease-out}
.pw-tank.pw-refill .pw-flash{animation:pwFlash 2.8s ease-out}
.pw-tank.pw-refill .pw-gain{animation:pwGain .7s var(--ease) 1.4s backwards}
@keyframes pwRise{from{transform:translateY(calc(var(--pw-col) - var(--fh,0px)))}}
@keyframes pwRiseG{from{transform:translateY(calc(var(--fh,0px) - var(--pw-col)))}}
@keyframes pwPour{0%{opacity:0;transform:scaleY(0)}12%{opacity:1;transform:scaleY(1)}72%{opacity:.85;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes pwFlash{28%{opacity:.85}}
@keyframes pwGain{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.9)}}

/* ---------- list view ---------- */
.pw-list{display:grid;gap:6px;overflow-anchor:none}
.pw-list>.pw-sec{margin:14px 2px 2px}
.pw-list>.pw-lh+.pw-sec{margin-top:4px}
.pw-lh,.pw-row{display:grid;grid-template-columns:28px minmax(0,1.7fr) minmax(84px,.7fr) minmax(112px,.9fr) minmax(84px,.7fr) minmax(92px,.7fr) 78px;gap:14px;align-items:center}
.pw-lh{padding:6px 14px 0 16px;font:600 10.5px/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pw-lh span:nth-child(n+3){text-align:right}
.pw-row{--rgb:143,176,196;position:relative;padding:9px 14px 9px 16px;border-radius:12px;cursor:pointer;outline:0;
  background:linear-gradient(180deg,rgba(17,21,28,.9),rgba(11,13,18,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px var(--hair);
  contain:layout paint style;content-visibility:auto;contain-intrinsic-size:auto 54px}
.pw-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:rgb(var(--rgb))}
.pw-row[data-kind=frost]::before{background:var(--hair3)}
.pw-root:not([data-scroll]) .pw-row:hover{background:linear-gradient(180deg,rgba(23,27,35,.95),rgba(14,17,22,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--hair2)}
.pw-row:focus-visible{box-shadow:0 0 0 1px rgba(169,216,240,.7),0 0 0 4px rgba(169,216,240,.14)}
.pw-row .em{--em-cut:#0f1217}
.pw-row .em svg{filter:none}
.pw-rn{min-width:0}
.pw-rn b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-rn small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-rc{min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.pw-rc b{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.pw-rc small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-rm b{font-size:15px}
.pw-rm[data-gain] small{color:#bfe8ff}
.pw-row[data-tone=bad] .pw-rm b,.pw-row[data-tone=bad] .pw-rd b{color:#ff7b74}
.pw-row[data-tone=warn] .pw-rd b{color:var(--warn)}
.pw-row[data-kind=frost] .pw-rm b{color:var(--soft);font-weight:400}
.pw-ra b{color:var(--text)}
.pw-row:not([data-need]) .pw-ra b{color:var(--dim);font-weight:400}
.pw-rx{display:flex;justify-content:flex-end}
.pw-rcopy .ic{width:14px;height:14px}

/* ---------- phone ---------- */
@media (max-width:820px){
  .pw-head{margin-bottom:14px}
  .pw-head h1{font-size:26px}
  .pw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-kpi{padding:14px 16px 13px;gap:6px}
  .pw-kpi:nth-child(3){box-shadow:0 -1px 0 var(--hair)}
  .pw-kpi:nth-child(4){box-shadow:-1px 0 0 var(--hair),0 -1px 0 var(--hair)}
  .pw-kpi:nth-child(5){grid-column:1 / -1;box-shadow:0 -1px 0 var(--hair)}
  .pw-num{font-size:26px}
  .pw-board{padding:2px 14px 14px}
  .pw-res{height:64px;padding:0 9px;border-radius:14px}
  .pw-gains{padding:0 14px 14px}
  .pw-lh{display:none}
  .pw-list>.pw-sec:first-child{margin-top:4px}
  .pw-row{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"em name money" "em days burn" "em add copy";gap:2px 12px;padding:10px 12px 10px 14px;contain-intrinsic-size:auto 86px}
  .pw-row>.em{grid-area:em;align-self:start;margin-top:2px}
  .pw-rn{grid-area:name}.pw-rm{grid-area:money}.pw-rd{grid-area:days}.pw-rb{grid-area:burn}.pw-ra{grid-area:add}.pw-rx{grid-area:copy}
  .pw-rn small{display:none}
  .pw-rc{display:flex;align-items:baseline;gap:5px;text-align:left}
  .pw-rm,.pw-rb,.pw-rx{justify-content:flex-end}
  .pw-rm:not([data-gain]) small{display:none}
  .pw-rd b,.pw-rb b,.pw-ra b{font-size:12.5px;font-weight:500}
  .pw-rd small,.pw-rb small,.pw-ra small{font-size:12px}
  .pw-ra{flex-direction:row-reverse;justify-content:flex-end}
  .pw-row:not([data-need]) .pw-ra,.pw-row:not([data-need]) .pw-rx{display:none}
}
@media (max-width:520px){
  .pw-floor{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -6px}
  .pw-tank{--px:13px}
  .pw-sec{margin-left:6px;margin-right:6px}
  .pw-tools{width:100%;justify-content:space-between}
  .pw-chips .chip{padding:6px 10px}
}
@media (max-width:345px){
  .pw-tank{--px:7px}
  .pw-info{padding-left:10px;padding-right:10px}
  .pw-cap{margin:0 18px}
}

/* ---------- touch devices: lighter still ----------
   bubbles only where money is running out (red + amber), nothing that needs a blur, fewer layers per tank */
@media (pointer:coarse){
  .pw-copy.btn{min-height:36px;font-size:12px}
  .pw-rcopy.btn{min-height:34px;padding:6px 12px;box-shadow:0 0 0 1px var(--hair2)}
  .pw-tank[data-tone=good] .pw-bub{display:none}
  .pw-marks,.pw-base::before,.pw-glass::after{display:none}
  .pw-info{text-shadow:0 1px 0 rgba(3,5,8,.9)}
  .pw-tank[data-tone=bad]::after{box-shadow:0 0 0 1px rgba(255,95,87,.6),0 0 0 3px rgba(255,95,87,.16)}
  .pw-ping .pw-glass,.pw-row.pw-ping{box-shadow:0 0 0 1px rgba(169,216,240,.85),0 0 0 4px rgba(169,216,240,.18)}
  .pw-deck{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.075)}
  .pw-eyebrow{text-shadow:none}
  .pw-eyebrow i,.pw-dot{box-shadow:none}
  .pw-dot.over{box-shadow:inset 0 0 0 1.5px #ff6a63}
  /* the client icon keeps its glyph and colours; the glass effects that need blur are dropped */
  .pw-root .em{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .pw-root .em::before{content:none}
  .pw-glass::before{background:
    radial-gradient(5px 44% at 11% 34%,rgba(255,255,255,.42),rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 100%),
    radial-gradient(78% 22px at 50% 0,rgba(255,255,255,.15),rgba(255,255,255,0) 100%)}
  .pw-tank[data-kind=dry] .pw-glass::before{background:
    radial-gradient(5px 44% at 11% 34%,rgba(255,255,255,.25),rgba(255,255,255,.07) 55%,rgba(255,255,255,0) 100%),
    radial-gradient(78% 22px at 50% 0,rgba(255,255,255,.09),rgba(255,255,255,0) 100%)}
}

/* ---------- still mode ---------- */
.pw-root[data-scroll] .pw-wv,.pw-root[data-scroll] .pw-bub,.pw-root[data-scroll] .pw-pipe i,.pw-root[data-scroll] .pw-tank::after,.pw-root[data-scroll] .pw-main i,
.pw-root[data-hold] .pw-wv,.pw-root[data-hold] .pw-bub,.pw-root[data-hold] .pw-pipe i,.pw-root[data-hold] .pw-tank::after,.pw-root[data-hold] .pw-main i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .pw-tank[data-live] .pw-bub{display:none}
  .pw-main i{display:none}
}

/* ---------- the 1-week list (a dialog): who does not have 7 days of money, and what each one has to add ---------- */
.pw-wk{display:grid;gap:14px;min-width:0}
.pw-wk [data-tone=bad]{--c:#ff6b63}.pw-wk [data-tone=warn]{--c:var(--warn)}.pw-wk [data-tone=good]{--c:var(--good)}.pw-wk [data-tone=idle]{--c:var(--muted)}
.pw-wh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.pw-wh h3{font-size:21px;font-weight:500;letter-spacing:-.03em}
.pw-wh p{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.pw-wh p b{font-weight:500;color:var(--text)}
.pw-wkey{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.pw-wkey span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pw-wkey i{width:9px;height:9px;border-radius:3px;background:var(--c);box-shadow:0 0 8px var(--c)}
.pw-wlist{display:grid;gap:1px;max-height:min(56vh,520px);overflow:auto;margin:0 -8px;padding:2px 8px;overscroll-behavior:contain}
.pw-wrow{--c:var(--muted);display:grid;grid-template-columns:28px minmax(0,1.5fr) 132px minmax(62px,auto) minmax(94px,auto);align-items:center;gap:14px;width:100%;padding:10px 12px;
  border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;animation:pw-win .35s both;animation-delay:calc(var(--i,0) * 22ms)}
.pw-wrow:hover,.pw-wrow:focus-visible{background:rgba(255,255,255,.05);outline:none}
.pw-wrow+.pw-wrow{box-shadow:0 -1px 0 var(--hair)}
.pw-wn{min-width:0;display:grid;gap:3px}
.pw-wn b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-wn small,.pw-wb small,.pw-wa small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* one box = one day of money; a part of a day fills a part of its box */
.pw-wm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.pw-wm i{position:relative;height:14px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pw-wm i[style]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:inherit;background:var(--c);opacity:.92}
.pw-wb,.pw-wa{display:grid;gap:3px;justify-items:end;text-align:right;white-space:nowrap}
.pw-wb b{font-weight:400;color:var(--soft);font-variant-numeric:tabular-nums}
.pw-wa b{font-size:16px;font-weight:500;color:var(--c);font-variant-numeric:tabular-nums}
.pw-wnote{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
@keyframes pw-win{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .pw-wh h3{font-size:19px}
  .pw-wrow{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"em name add" "em meter burn";gap:7px 12px;padding:11px 8px}
  .pw-wrow>.em{grid-area:em;align-self:start;margin-top:2px}
  .pw-wn{grid-area:name}.pw-wm{grid-area:meter;max-width:176px}.pw-wa{grid-area:add}
  .pw-wb{grid-area:burn;display:flex;align-items:baseline;justify-content:flex-end;gap:5px}
  .pw-wn small{white-space:normal}
  .pw-wlist{max-height:56vh}
}
@media (prefers-reduced-motion:reduce){.pw-wrow{animation:none}}