/* HK Ads Desk - "Who is responding" (client panel). Loads after app.css + clientmap.css; every class here starts with aud-.
   The section lays itself out by ITS OWN width (container queries), not the window's: about 700 px inside the laptop
   panel, 300-360 px on a phone; a browser without container queries simply gets the phone layout.
   Colour is the Desk's rule for a cost per result (--tone: good / warn / bad, grey when there is no result); everything
   else is Platinum Ice. Only what the data sets is animated - once, with the Desk's calm easing. */
.aud{--aud-ease:var(--ease,cubic-bezier(.16,1,.3,1));--tone:var(--accent);--trgb:169,216,240;
  --aud-well:var(--cm-well,var(--well,rgba(0,0,0,.24)));
  --aud-sink:var(--cm-sink,var(--sink,inset 0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.035),0 0 0 1px var(--hair)));
  container:aud/inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.aud [hidden]{display:none!important}
.aud .lbl{font-size:11.5px;letter-spacing:.07em}      /* the Desk's micro-label, one notch up: nothing here is smaller than 11.5 px */
/* --tone for text and solid marks, --trgb (the same colour as r,g,b) wherever it has to be see-through */
.aud-t-good{--tone:var(--good);--trgb:62,207,142}.aud-t-warn{--tone:var(--warn);--trgb:240,180,76}.aud-t-bad{--tone:var(--bad);--trgb:255,95,87}
.aud-t-none{--tone:var(--idle);--trgb:91,98,112}.aud-t-ice{--tone:var(--accent);--trgb:169,216,240}
.aud-c{color:var(--tone)}
.aud-c.aud-t-none{color:var(--muted)}
/* a figure that rolls (FX.setNum): its own box with a line of exactly one em, so the rolling digits sit on the text line */
:where(.aud) [data-n]{display:inline-block;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.aud [data-n] od-c{white-space:pre}      /* "1 in 247" keeps its spaces while the digits roll */
/* a card keeps the panel's look even on a page that does not define the panel's own tokens */
.aud .cm-card{background:var(--cm-grain,var(--grain,none)),var(--cm-surf,var(--surf,linear-gradient(180deg,#121419,#0d0f12)));
  box-shadow:var(--cm-raise,var(--raise,inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--hair),0 2px 4px rgba(0,0,0,.3),0 14px 32px -16px rgba(0,0,0,.75)))}

/* ---------- section title: the period, when it was read, the colour key ---------- */
.aud-top{display:grid;gap:9px;padding:8px 2px 0;min-width:0}
.aud-head{margin-bottom:0}
.aud-head h3{flex-wrap:wrap;row-gap:2px;font-size:15px}
.aud-head h3 .ic{color:var(--accent)}
.aud-sub{font-size:13px}
.aud-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.aud-sep{font-style:normal;color:var(--dim)}
.aud-reading{color:var(--accent);animation:audPulse 1.4s ease-in-out infinite}
.aud-scan{position:relative;height:1px;overflow:hidden;background:var(--hair)}
.aud[data-busy] .aud-scan::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:audScan 1.5s ease-in-out infinite}
.aud-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.aud-key span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.aud-key i{width:8px;height:8px;border-radius:2px;background:var(--tone)}

/* ---------- nothing yet / nothing at all: one calm card ---------- */
/* before any numbers the section takes no room unless it is reading (or fill() was told the read failed): the page
   around it may be showing its own line for a read that did not come back */
.aud[data-state=blank]:not([data-busy]):not([data-failed]){display:none}
.aud-none{display:grid;gap:14px;justify-items:center;padding:26px 18px}
.aud[data-state=ok] .aud-none{display:none}
.aud-none p{margin:0;max-width:54ch;font-size:13px;line-height:1.55;color:var(--muted);text-align:center;text-wrap:balance}
.aud-sk{display:none;gap:8px;justify-items:center;width:min(320px,100%)}
.aud[data-state=blank][data-busy] .aud-sk{display:grid}
.aud-sk i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.11),rgba(255,255,255,.04)) 0 0/200% 100%;animation:audShim 1.4s linear infinite}
.aud-sk i:nth-child(1){width:64%}.aud-sk i:nth-child(2){width:100%}.aud-sk i:nth-child(3){width:46%}

/* ---------- shared by every card ---------- */
.aud-card .cm-h h3 .ic{color:var(--muted)}
.aud-body{min-width:0}
.aud-say{margin:0 0 16px;max-width:62ch;font-size:14px;line-height:1.5;color:var(--soft);text-wrap:pretty}
.aud-say b{color:var(--text);font-weight:500}
.aud-say b.aud-c{color:var(--tone)}
.aud-notes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.aud-notes li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.aud-notes li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--dim)}
.aud-notes b{color:var(--soft);font-weight:500}
.aud-notes b.aud-c{color:var(--tone)}
.aud-quiet{margin:0;padding:16px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center;background:var(--aud-well);box-shadow:var(--aud-sink)}
.aud-quiet+.aud-dev{border-top:0;padding-top:0}
.aud-places+.aud-quiet{margin-top:16px}
.aud-grid{min-width:0}
/* everything that carries a tooltip: hover / tap / keyboard */
.aud [data-t]{outline:none;-webkit-tap-highlight-color:transparent;cursor:default}
.aud-step,.aud-act,.aud-bh,.aud-pl,.aud-half,.aud-wd,.aud-g,.aud-st,.aud-dvl{transition:background .15s,box-shadow .15s}
.aud-step:hover,.aud-step[data-on],.aud-act:hover,.aud-act[data-on],.aud-bh:hover,.aud-bh[data-on],.aud-pl:hover,.aud-pl[data-on],
.aud-half:hover,.aud-half[data-on],.aud-wd:hover,.aud-wd[data-on],.aud-g:hover,.aud-g[data-on],.aud-st:hover,.aud-st[data-on],
.aud-dvl:hover,.aud-dvl[data-on]{background-color:rgba(255,255,255,.045)}
.aud div[data-t]:focus-visible,.aud span[data-t]:focus-visible{box-shadow:0 0 0 2px rgba(169,216,240,.4)}

/* tooltip (the Desk's shared #tip) */
#tip .aud-tt{display:grid;gap:3px;min-width:184px}
#tip .aud-tt-h{margin-bottom:3px;font-size:13px;font-weight:500;color:var(--text)}
#tip .aud-tt-r{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#tip .aud-tt-r>span{color:var(--muted)}
#tip .aud-tt-r b{display:inline;margin:0;font-size:12.5px;font-weight:500;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
#tip .aud-tt-r b.aud-c{color:var(--tone)}
#tip .aud-tt-r b.aud-c.aud-t-none{color:var(--muted)}
#tip .aud-tt-p{margin:5px 0 0;max-width:270px;font-size:12px;line-height:1.45;color:var(--muted)}

/* ================= 1. the path ================= */
/* four figures in one sunk well. They share their rows (label / figure / small print), so a label that wraps on a
   narrow phone never pushes one figure lower than its neighbour */
.aud-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:20px;border-radius:14px;overflow:hidden;background:var(--aud-well);box-shadow:var(--aud-sink)}
.aud-st{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:5px;align-content:start;min-width:0;padding:13px 14px 11px}
@supports not (grid-template-rows:subgrid){.aud-st{grid-row:auto;grid-template-rows:none}}
.aud-st:nth-child(even){box-shadow:-1px 0 0 var(--hair)}
.aud-st:nth-child(n+3){border-top:1px solid var(--hair)}
.aud-st:focus-visible{box-shadow:inset 0 0 0 2px rgba(169,216,240,.4)!important}
.aud-st-v{min-height:25px;font-size:21px;font-weight:300;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;color:var(--text)}
.aud-st-v b,.aud-st-v .m{font-weight:300}
.aud-st-v .m.aud-c,.aud-st-v .m.aud-c>b{color:var(--tone)}
.aud-st small{font-size:11.5px;line-height:1.35;color:var(--muted)}

.aud-flow{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;align-items:start}
.aud-reach+.aud-reach{margin-top:22px}
.aud-flow.aud-one .aud-reach{max-width:460px}
/* a reach = its title row + its river; side by side the two title rows are one row (subgrid), so both rivers start level */
.aud-reach{--rw:96px;--rh:42px;grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0;min-width:0}
@supports not (grid-template-rows:subgrid){.aud-reach{grid-row:auto;display:block}}
.aud-rh{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;min-height:17px}
.aud-rh small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.aud-rv{position:relative;padding-top:18px}
/* the river: a clipped sheet of water. Its outline is the polygon written by the script (width = the real count) */
.aud-riv{position:absolute;left:0;top:18px;bottom:0;z-index:1;width:var(--rw);pointer-events:none}
.aud-bed{position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 calc(100% - 20px),transparent);mask-image:linear-gradient(#000 calc(100% - 20px),transparent)}   /* it runs on past the last step */
/* ice-blue water, darker towards both banks; where it becomes chats (--y1 to --y2) it takes the colour of the cost per result */
.aud-water{position:absolute;inset:0;overflow:hidden;--c1:rgba(169,216,240,.5);--c2:var(--c1);
  background:linear-gradient(90deg,rgba(10,11,14,.6),rgba(10,11,14,0) 36%,rgba(10,11,14,0) 64%,rgba(10,11,14,.6)),
    linear-gradient(180deg,var(--c1) 0,var(--c1) var(--y1,100%),var(--c2) var(--y2,100%),var(--c2) 100%);
  transition:clip-path .8s var(--aud-ease),-webkit-clip-path .8s var(--aud-ease)}
.aud-water.aud-turn{--c2:rgba(var(--trgb),.64)}
/* a slow current: soft bands of light drifting down mid-stream, only while the card is on screen */
.aud-cur{position:absolute;left:0;right:0;top:-84px;bottom:0;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 42px,rgba(255,255,255,0) 84px);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 40%,#000 60%,transparent 92%);mask-image:linear-gradient(90deg,transparent 8%,#000 40%,#000 60%,transparent 92%)}
.aud-card[data-live] .aud-cur{opacity:1;animation:audFlow 4.8s linear infinite}
/* "drawn N x bigger": the lens that opens onto the second river */
.aud-fan{position:absolute;left:0;top:-16px;width:100%;height:14px;overflow:visible}
.aud-fan-f{fill:rgba(169,216,240,.07)}
.aud-fan-l{fill:none;stroke:rgba(169,216,240,.42);stroke-width:1;stroke-dasharray:2 3}
/* lead forms: a small pool beside the chats, at the river's own scale */
.aud-pool{position:absolute;top:calc(var(--rh) * (var(--row) + .5) - 4px);height:8px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--tone) 0 2px,transparent 2px 4px);transition:left .8s var(--aud-ease),width .8s var(--aud-ease)}
.aud-steps{position:relative;padding-left:calc(var(--rw) + 12px)}
.aud-step{position:relative;height:var(--rh);display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:9px;align-content:center;align-items:baseline;border-radius:8px;padding-right:4px}
/* a hairline from the water's edge to the number that measures it */
.aud-step::before{content:"";position:absolute;left:calc(var(--rw) * (var(--f,0) - 1) / 2 - 8px);top:50%;width:calc(var(--rw) * (1 - var(--f,0)) / 2 + 3px);height:1px;background:var(--hair3);pointer-events:none;
  transition:left .8s var(--aud-ease),width .8s var(--aud-ease),background .15s}
.aud-step:hover::before,.aud-step[data-on]::before,.aud-step:focus-visible::before{background:var(--accent)}
.aud-sn{justify-self:end;font-size:14px;font-weight:500;color:var(--text)}
.aud-sl{font-size:13px;line-height:18px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aud-ss{grid-column:2;font-size:11.5px;line-height:15px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aud-side .aud-sn,.aud-side .aud-sl{color:var(--muted)}

/* ================= 2. who ================= */
.aud-grid-who{display:grid;gap:16px}
.aud-gen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.aud-g{display:grid;gap:6px;align-content:start;min-width:0;padding:6px 8px;margin:-6px -8px;border-radius:10px}
.aud-g-m{justify-items:end;text-align:right}
.aud-g-n{font-size:26px;font-weight:300;letter-spacing:-.03em;color:var(--text)}
.aud-g small{font-size:11.5px;line-height:1.3;color:var(--muted)}
.aud-g small+small{margin-top:-3px}
.aud-split{grid-column:1/-1;display:flex;gap:2px;height:5px;border-radius:3px;overflow:hidden}
.aud-split i{flex:0 0 0;min-width:2px;background:var(--tone);transition:flex-grow .7s var(--aud-ease),background .3s}
/* women to the left of the ages, men to the right; a bar = that group's results (money when there are none) */
.aud-pyr{display:grid;gap:2px;min-width:0}
.aud-prow{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;min-height:31px}      /* (56 px: room for "not shown") */
.aud-pyr-1 .aud-prow{grid-template-columns:56px minmax(0,1fr)}
.aud-page{font-size:12px;color:var(--muted);text-align:center;white-space:nowrap}
.aud-phead{min-height:20px;font-size:11.5px;color:var(--muted)}
.aud-phead>:first-child{text-align:right;padding-right:4px}.aud-phead>:last-child{padding-left:4px}
.aud-phead .aud-page{font-size:11.5px;color:var(--dim)}
.aud-half{--nw:34px;display:flex;align-items:center;gap:6px;height:29px;min-width:0;border-radius:6px}
.aud-pyr-rs .aud-half{--nw:52px}
.aud-half-f{flex-direction:row-reverse}
.aud-pbar{flex:0 0 auto;display:block;width:calc(var(--f) * (100% - var(--nw) - 6px));min-width:2px;height:18px;transition:width .7s var(--aud-ease)}
.aud-pbar i{display:block;width:100%;height:100%;border-radius:0 4px 4px 0;background:var(--tone);background:linear-gradient(90deg,rgba(var(--trgb),.52),rgba(var(--trgb),.92));transition:background .3s}
.aud-half-f .aud-pbar i{border-radius:4px 0 0 4px;background:linear-gradient(270deg,rgba(var(--trgb),.52),rgba(var(--trgb),.92))}
.aud-pn{font-size:12.5px;font-weight:500;color:var(--soft)}
.aud-t-none .aud-pn{color:var(--dim)}

/* ================= 3. where ================= */
/* a shelf of phones. Every tile's picture / name / numbers share the rows of the shelf (subgrid), so the phones stand
   on one line whatever their size and however long a name is */
.aud-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:2px 8px;justify-items:center;max-width:calc(var(--n,9) * 124px)}
.aud-pl{--pw:56px;grid-row:span 5;display:grid;grid-template-rows:subgrid;justify-items:center;width:100%;max-width:116px;min-width:0;padding:8px 2px 12px;border-radius:10px;text-align:center}
.aud-pl-pic{align-self:end;display:flex;align-items:flex-end;justify-content:center;width:calc(100% + 8px);margin:0 -4px 6px;padding-bottom:8px;box-shadow:0 1px 0 var(--hair)}
@supports not (grid-template-rows:subgrid){
  .aud-places{align-items:end;row-gap:10px}
  .aud-pl{grid-row:auto;grid-template-rows:none;align-content:end;row-gap:2px}
  .aud-pl-n{min-height:31px}
}
/* one phone: its AREA is the placement's share of the money (--k = the square root of that share) */
.aud-phone{position:relative;display:block;flex:none;width:calc(var(--pw) * var(--k));aspect-ratio:9/16;border-radius:19%/10.7%;overflow:hidden;background:#090b0f;
  box-shadow:inset 0 0 0 1px var(--hair3),0 8px 16px -10px #000;transform-origin:50% 100%;transition:width .7s var(--aud-ease)}
.aud-phone>i{position:absolute;display:block}
.aud-phone::before{content:"";position:absolute;z-index:2;left:39%;right:39%;top:3.2%;height:1.6%;min-height:1px;border-radius:9px;background:rgba(255,255,255,.22)}
/* the lit part = where the ad sits on that screen, in the colour of its cost per result */
.aud-ad{inset:7.5% 10%;border-radius:11%/6.5%;background:rgba(var(--trgb),.3);box-shadow:inset 0 0 0 1px rgba(var(--trgb),.75);transition:background .3s,box-shadow .3s}
.aud-t-none .aud-ad{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair3)}
.aud-w1,.aud-w2{--ink:rgba(255,255,255,.5);--ink2:rgba(255,255,255,.26);z-index:1}
/* reels: the ad is the whole screen; three round buttons on the right, a caption at the bottom */
.aud-k-reels .aud-w1{right:15%;top:47%;width:9%;height:27%;background:radial-gradient(circle closest-side,var(--ink) 88%,transparent) 50% 0/100% 26% no-repeat,radial-gradient(circle closest-side,var(--ink) 88%,transparent) 50% 50%/100% 26% no-repeat,radial-gradient(circle closest-side,var(--ink) 88%,transparent) 50% 100%/100% 26% no-repeat}
.aud-k-reels .aud-w2{left:16%;bottom:13%;width:40%;height:6.5%;background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 26% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 0 100%/64% 26% no-repeat}
/* stories: the whole screen too; progress strips on top, a reply pill at the bottom */
.aud-k-story .aud-w1{left:15%;right:15%;top:12%;height:1.5%;min-height:1px;background:linear-gradient(90deg,var(--ink) 0 30%,transparent 30% 35%,var(--ink2) 35% 65%,transparent 65% 70%,var(--ink2) 70%)}
.aud-k-story .aud-w2{left:22%;right:22%;bottom:13%;height:5.5%;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ink)}
/* feed: a post between other posts */
.aud-k-feed .aud-ad{inset:25% 10% 27%;border-radius:8%/9%}
.aud-k-feed .aud-w1{left:11%;top:13%;width:52%;height:6.5%;background:radial-gradient(circle closest-side,var(--ink) 88%,transparent) 0 50%/22% 100% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 100% 50%/66% 30% no-repeat}
.aud-k-feed .aud-w2{left:11%;bottom:12%;width:60%;height:8%;background:linear-gradient(var(--ink2),var(--ink2)) 0 0/100% 24% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 0 100%/60% 24% no-repeat}
/* explore / search: one tile of a grid */
.aud-k-grid .aud-w1{inset:9% 10%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 30%,transparent 30% 35%);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 16%,transparent 16% 20%);mask-image:repeating-linear-gradient(180deg,#000 0 16%,transparent 16% 20%)}
.aud-k-grid .aud-ad{left:38%;right:10%;top:25.4%;bottom:45%;border-radius:6%/5%}
.aud-k-grid .aud-w2{display:none}
/* video feeds: a wide video with a list under it */
.aud-k-video .aud-ad{inset:15% 10% 53%;border-radius:7%/11%}
.aud-k-video .aud-w2{left:44%;top:25.5%;width:14%;aspect-ratio:1;background:var(--ink);-webkit-clip-path:polygon(18% 0,100% 50%,18% 100%);clip-path:polygon(18% 0,100% 50%,18% 100%)}
.aud-k-video .aud-w1{left:11%;right:30%;top:55%;height:27%;background:linear-gradient(var(--ink2),var(--ink2)) 0 0/100% 9% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 0 45%/70% 9% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 0 90%/86% 9% no-repeat}
/* any other place: a strip in the middle of the screen */
.aud-k-other .aud-ad{inset:38% 10%;border-radius:7%/14%}
.aud-k-other .aud-w1{left:11%;right:26%;top:17%;height:13%;background:linear-gradient(var(--ink2),var(--ink2)) 0 0/100% 16% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 0 100%/62% 16% no-repeat}
.aud-k-other .aud-w2{left:11%;right:26%;bottom:17%;height:13%;background:linear-gradient(var(--ink2),var(--ink2)) 0 0/100% 16% no-repeat,linear-gradient(var(--ink2),var(--ink2)) 0 100%/62% 16% no-repeat}
.aud-sm>.aud-w1,.aud-sm>.aud-w2,.aud-sm::before{display:none}      /* a small phone only keeps the lit part */
.aud-pl-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-bottom:3px;font-size:12px;line-height:15.5px;color:var(--soft);overflow-wrap:anywhere}
.aud-pl-s,.aud-pl-r{font-size:11.5px;line-height:1.4;color:var(--muted);white-space:nowrap}
.aud-pl-s b,.aud-pl-r b{font-weight:500;color:var(--text)}
.aud-pl-c{padding:3px 0 1px;font-size:12.5px;font-weight:500;color:var(--soft)}
.aud-pl-c.aud-c{color:var(--tone)}
.aud-t-none .aud-pl-c.aud-c{color:var(--dim);font-weight:400}
/* devices: one bar split by the money each kind of device took */
.aud-dev{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.aud-dev-h{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:10px}
.aud-dev-h small{font-size:12px;color:var(--muted)}
.aud-dev-h small b{font-weight:500;color:var(--text)}
.aud-devbar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.aud-dv{display:block;background:var(--accent);opacity:var(--a,1)}
.aud-devbar .aud-dv{flex:0 0 0;min-width:3px;transition:flex-grow .7s var(--aud-ease),filter .15s}
.aud-devbar .aud-dv:hover,.aud-devbar .aud-dv[data-on]{filter:brightness(1.35)}
.aud-devleg{display:flex;flex-wrap:wrap;gap:4px 6px;margin:8px -7px 0}
.aud-dvl{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border-radius:7px;font-size:12px;color:var(--soft);white-space:nowrap}
.aud-dvl .aud-dv{width:8px;height:8px;border-radius:2px}
.aud-dvl b{font-weight:500;color:var(--text)}

/* ================= 4. when ================= */
.aud-grid-when{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.aud-dial{position:relative;width:304px;max-width:100%;margin:0 auto}
.aud-dial svg{display:block;width:100%;height:auto;overflow:visible}
.aud-d-ring{fill:none;stroke:var(--hair);stroke-width:1}
.aud-d-out{stroke-dasharray:1 5;stroke-linecap:round;stroke:var(--hair2)}
.aud-d-day{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5;stroke-linecap:round}      /* the daylight half: 6 am to 6 pm */
.aud-d-tick{stroke:var(--hair3);stroke-width:1}
.aud-d-tx{fill:var(--muted);font:500 11.5px var(--sans);letter-spacing:0}
.aud-d-ico{fill:none;stroke:var(--muted);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.aud-hr{outline:none}
.aud-hit{fill:transparent;stroke:none;transition:fill .15s}
.aud-hr:hover .aud-hit,.aud-hr[data-on] .aud-hit{fill:rgba(255,255,255,.055)}
.aud-hr:focus-visible .aud-hit{fill:rgba(169,216,240,.1);stroke:rgba(169,216,240,.55);stroke-width:1}
.aud-mny{fill:none;stroke:var(--soft);stroke-width:4;transition:opacity .6s var(--aud-ease)}
.aud-hbar{fill:none;stroke:var(--tone);stroke-width:8;stroke-linecap:round;transition:stroke-dasharray .7s var(--aud-ease),stroke .3s,opacity .3s}
.aud-z .aud-hbar{stroke:var(--idle);opacity:.38}
/* a best hour wears a numbered bead on the outer ring (the same 1 2 3 as the list beside the dial) */
.aud-bead{fill:#111318;stroke:var(--hair3);stroke-width:1;opacity:0;transition:opacity .3s}
.aud-bead-t{fill:var(--text);font:600 11.5px var(--sans);opacity:0;transition:opacity .3s;pointer-events:none}
.aud-peak .aud-bead,.aud-peak .aud-bead-t{opacity:1}
.aud-dial-c{position:absolute;left:50%;top:50%;width:76px;transform:translate(-50%,-50%);display:grid;gap:4px;justify-items:center;text-align:center;pointer-events:none}
.aud-dial-c small{font-size:11.5px;line-height:1;color:var(--muted);white-space:nowrap}
.aud-dial-c b{font-size:21px;font-weight:300;letter-spacing:-.03em;color:var(--text)}
.aud-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.aud-leg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.aud-leg i{display:block;flex:none}
.aud-lg-b{width:14px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--good) 0 34%,var(--warn) 34% 67%,var(--bad) 67%)}
.aud-lg-b.aud-lg-ice{background:var(--accent)}
.aud-lg-m{width:14px;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(185,190,199,.2),rgba(185,190,199,.95))}
.aud-when-r{display:grid;gap:18px;align-content:start;min-width:0}
.aud-when-r .aud-notes{margin-top:0}
.aud-best .lbl,.aud-week .lbl{margin-bottom:8px}
.aud-bh{display:grid;grid-template-columns:16px minmax(0,1fr) auto 58px;align-items:center;gap:8px;min-height:34px;padding:0 8px;margin:0 -8px;border-radius:8px;font-size:13px}
.aud-bh+.aud-bh{background-image:linear-gradient(var(--hair),var(--hair));background-size:calc(100% - 16px) 1px;background-position:8px 0;background-repeat:no-repeat}
.aud-bh i{font:500 11.5px var(--mono);font-style:normal;color:var(--dim)}
.aud-bh span{color:var(--soft);white-space:nowrap}
.aud-bh b{font-weight:500;color:var(--text)}
.aud-bh em{justify-self:end;font-style:normal;font-weight:500}
.aud-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;align-items:end}
.aud-wd{display:grid;justify-items:center;gap:6px;padding:6px 0 4px;border-radius:8px}
.aud-wd b{font-size:11.5px;font-weight:500;color:var(--soft)}
.aud-wbar{display:flex;align-items:flex-end;width:100%;max-width:24px;height:54px;border-radius:4px;background:rgba(255,255,255,.035)}
.aud-wbar i{display:block;width:100%;height:calc(var(--f) * 100%);min-height:2px;border-radius:4px 4px 2px 2px;background:var(--tone);background:linear-gradient(180deg,rgba(var(--trgb),.92),rgba(var(--trgb),.46));transition:height .7s var(--aud-ease),background .3s}
.aud-wd small{font-size:11.5px;color:var(--muted)}

/* ================= 5. what else ================= */
.aud-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.aud-acol{display:grid;grid-template-columns:minmax(0,1fr);gap:1px 28px;align-content:start;min-width:0}
.aud-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:baseline;padding:7px 8px 9px;margin:0 -8px;border-radius:8px}
.aud-act-l{font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aud-act-n{font-size:13px;color:var(--text);white-space:nowrap}
.aud-act-n b{font-weight:500}
.aud-act-n small{margin-left:6px;font-size:11.5px;color:var(--muted)}
.aud-act-b{grid-column:1/-1;height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.05)}
.aud-act-b i{display:block;height:100%;width:calc(var(--f) * 100%);min-width:2px;border-radius:3px;background:var(--accent);background:linear-gradient(90deg,rgba(169,216,240,.4),var(--accent));transition:width .7s var(--aud-ease)}
.aud-zoom{grid-column:1/-1;margin:0 0 2px;padding-top:10px;border-top:1px solid var(--hair);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---------- wide: the laptop panel (about 700 px) ---------- */
@container aud (min-width:600px){
  .aud-say{font-size:14.5px}
  .aud-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aud-st:nth-child(n){border-top:0;box-shadow:none}
  .aud-st+.aud-st{box-shadow:-1px 0 0 var(--hair)}
  .aud-st-v{min-height:26px;font-size:23px}
  .aud-flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .aud-reach+.aud-reach{margin-top:0}
  .aud-flow.aud-one{grid-template-columns:minmax(0,1fr)}
  .aud-reach{--rw:112px}      /* two rivers side by side: the words keep enough room in the Desk's own (wider) typeface */
  .aud-pl{--pw:64px}
  .aud-grid-who{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"pyr gen" "pyr notes";grid-template-rows:auto 1fr;column-gap:26px;align-items:start}
  .aud-grid-who>.aud-pyr{grid-area:pyr;padding-right:26px;box-shadow:1px 0 0 var(--hair)}
  .aud-grid-who>.aud-gen{grid-area:gen}
  .aud-grid-who>.aud-notes{grid-area:notes;margin-top:0}
  .aud-grid-who.aud-one{grid-template-columns:minmax(0,1fr);grid-template-areas:"pyr"}
  .aud-grid-who.aud-one>.aud-pyr{padding-right:0;box-shadow:none;max-width:460px}
  .aud-grid-when{grid-template-columns:304px minmax(0,1fr);column-gap:26px;align-items:start}
  .aud-grid-when.aud-one{grid-template-columns:minmax(0,1fr)}
  .aud-when-r{padding-left:26px;box-shadow:-1px 0 0 var(--hair);min-height:100%}
  .aud-acol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* ---------- a very narrow phone ---------- */
@container aud (max-width:330px){
  .aud-reach{--rw:84px}
  .aud-step{grid-template-columns:42px minmax(0,1fr);column-gap:8px}
}

/* ---------- entrance: once, when a card is first seen. Only "from" is given, so every mark ends on its real value ---------- */
.aud-card[data-in] .aud-bed{animation:audPour 1s var(--aud-ease) backwards}
.aud-card[data-in] .aud-pool,.aud-card[data-in] .aud-fan{animation:audFade .5s ease .5s backwards}
.aud-card[data-in] .aud-pbar{animation:audW .7s var(--aud-ease) backwards;animation-delay:calc(var(--i,0) * 35ms + 60ms)}
.aud-card[data-in] .aud-phone{animation:audPop .6s var(--aud-ease) backwards;animation-delay:calc(var(--i,0) * 40ms)}      /* they rise from the shelf, never invisible */
.aud-card[data-in] .aud-devbar{animation:audWipe .8s var(--aud-ease) .25s backwards}
.aud-card[data-in] .aud-hbar{animation:audDash .7s var(--aud-ease) backwards;animation-delay:calc(var(--i,0) * 18ms + 60ms)}
.aud-card[data-in] .aud-wbar i{animation:audH .7s var(--aud-ease) backwards;animation-delay:calc(var(--i,0) * 40ms + 200ms)}
.aud-card[data-in] .aud-act-b i{animation:audW .7s var(--aud-ease) backwards;animation-delay:calc(var(--i,0) * 40ms + 60ms)}
@keyframes audPour{from{-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
@keyframes audW{from{width:0}}
@keyframes audH{from{height:0}}
@keyframes audDash{from{stroke-dasharray:0 400px}}
@keyframes audPop{from{transform:scale(.35)}}
@keyframes audWipe{from{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
@keyframes audFade{from{opacity:0}}
@keyframes audFlow{to{transform:translateY(84px)}}
@keyframes audScan{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
@keyframes audShim{to{background-position:-200% 0}}
@keyframes audPulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .aud,.aud *,.aud *::before,.aud *::after{animation:none!important;transition:none!important}
  .aud-cur{display:none}
}