/* HK Ads Desk - ICU (Critical ads). One place in HK ADS CITY: the city hospital's intensive care ward at night.
   Black glass, phosphor traces, precise type. Colour only where it means something: red = act now, amber = watch,
   green = fine, Platinum Ice = the city's own light. Every class here starts with icu-. Loads after app.css. */
.icu{--crgb:255,95,87;--icu-scr:#04070b;--icu-ln:rgba(255,255,255,.06);position:relative;overflow-anchor:none}   /* icu.js keeps the scroll steady itself when a live scan changes the ward */
.icu[data-ward=obs]{--crgb:240,180,76}
.icu[data-clear][data-ward=icu]{--crgb:62,207,142}
.icu [hidden]{display:none!important}
.icu-lbl{display:block;font:600 10px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);white-space:nowrap}

/* a figure that just changed (FX.setNum rolls its digits): a soft light behind it that fades - only opacity moves */
.icu .fx-bump{position:relative}
.icu .fx-bump::after{content:"";position:absolute;left:-8px;right:-8px;top:-5px;bottom:-5px;border-radius:10px;pointer-events:none;background:radial-gradient(closest-side,currentColor,transparent);opacity:0;animation:icuBump 1.3s var(--ease)}
@keyframes icuBump{0%{opacity:0}18%{opacity:.32}100%{opacity:0}}

/* ---------- head: the sign over the ward door ---------- */
.icu-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:16px}
.icu-sign{display:flex;align-items:flex-end;gap:6px 18px;flex-wrap:wrap;margin-top:11px}
.icu-kick{display:flex;align-items:center;gap:9px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 18px rgba(127,210,255,.55);white-space:nowrap}
.icu-kick i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad);animation:breathe 2.4s ease-in-out infinite}
.icu[data-clear] .icu-kick i{background:var(--good);box-shadow:0 0 10px var(--good);animation:none}
.icu-kick span{letter-spacing:.05em;text-transform:none;color:var(--muted);text-shadow:none}
.icu-head h1{font:400 54px/.82 var(--display);letter-spacing:.08em;color:#eef7ff;text-shadow:0 0 18px rgba(127,210,255,.55),0 0 56px rgba(127,210,255,.25)}
.icu-head p{margin:0 0 1px;font-size:15px;line-height:1.3;color:var(--soft)}
.icu-wards{background:rgba(8,10,14,.6)}
.icu-wards button{display:inline-flex;align-items:center;gap:8px;padding:7px 14px}
.icu-wards button b{font:500 11.5px/1 var(--mono);padding:3px 6px;border-radius:5px;color:var(--muted);background:rgba(255,255,255,.05)}
.icu-wards button.on b{color:rgb(var(--crgb));background:rgba(var(--crgb),.12)}

/* ---------- ward board: the central station ---------- */
.icu-board{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;
  background:radial-gradient(520px 230px at 4% -8%,rgba(255,95,87,.12),transparent 70%),radial-gradient(760px 300px at 98% -30%,rgba(127,210,255,.11),transparent 70%),linear-gradient(180deg,#0c1017,#06080d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.35),0 34px 70px -40px #000}
.icu[data-clear] .icu-board{background:radial-gradient(520px 230px at 4% -8%,rgba(62,207,142,.09),transparent 70%),radial-gradient(760px 300px at 98% -30%,rgba(127,210,255,.11),transparent 70%),linear-gradient(180deg,#0c1017,#06080d)}
.icu-board::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:linear-gradient(112deg,rgba(255,255,255,.035),transparent 24%)}
.icu-stats{display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr}
.icu-stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-width:0;margin:0;padding:17px 22px 15px;border:0;border-radius:0;background:none;color:var(--text);font:inherit;letter-spacing:inherit;text-align:left}
.icu-stat+.icu-stat{box-shadow:-1px 0 0 var(--icu-ln)}
button.icu-stat{cursor:pointer}
button.icu-stat:hover{background:rgba(255,255,255,.022)}
button.icu-stat:focus-visible{outline:none;background:rgba(169,216,240,.06)}
.icu-stat .icu-lbl{display:flex;align-items:center;gap:8px}
.icu-stat>b em{display:none}                          /* "this week": beside the number on phones, in the line below it on wider screens */
.icu-led{flex:none;width:6px;height:6px;border-radius:50%;background:var(--sc,var(--idle));box-shadow:0 0 8px var(--sc,transparent)}
.icu-stat[data-tone=bad]{--sc:#ff7b74}.icu-stat[data-tone=warn]{--sc:var(--warn)}.icu-stat[data-tone=good]{--sc:var(--good)}
.icu-stat[data-tone=bad] .icu-led{animation:breathe 2.4s ease-in-out infinite}
.icu-stat>b{display:block;margin:10px 0 7px;font-size:42px;font-weight:300;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sc,var(--text))}
.icu-stat[data-tone=bad]>b{text-shadow:0 0 34px rgba(255,95,87,.38)}
.icu-stat>b .m{font-family:inherit;letter-spacing:inherit}
.icu-stat>b .m-cur{color:inherit;opacity:.7}
.icu-stat>small{display:block;font:400 11.5px/1.35 var(--mono);color:var(--muted)}
.icu-stat.on::before{content:"";position:absolute;left:22px;right:40%;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--sc),transparent);box-shadow:0 0 14px var(--sc)}

/* ---------- a phosphor screen: still svg trace below, the live sweep (canvas) on top ---------- */
.icu-scr{position:relative;min-width:0;min-height:104px;overflow:hidden;background:var(--icu-scr)}
.icu-scr>svg.icu-ecg,.icu-scr>canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.icu-scr>canvas{pointer-events:none}
.icu-ecg{fill:none;stroke:rgb(var(--crgb));stroke-linecap:round;stroke-linejoin:round}
.icu-glow{stroke-width:6;opacity:.15;transition:opacity .5s var(--ease)}
.icu-line{stroke-width:1.6;opacity:.95;transition:opacity .5s var(--ease)}
.icu-live>.icu-ecg .icu-glow{opacity:.07}
.icu-live>.icu-ecg .icu-line{opacity:.58}
/* fine grid, vignette and a glass sheen sit above the trace */
.icu-scr::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.04),transparent 30%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.42)),
    linear-gradient(rgba(127,210,255,.035) 1px,transparent 1px) 0 -1px/100% 26px,linear-gradient(90deg,rgba(127,210,255,.035) 1px,transparent 1px) -1px 0/26px 100%}
.icu-note{position:absolute;left:10px;right:10px;bottom:6px;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 8px;font:400 10px/1 var(--mono);letter-spacing:.01em;white-space:nowrap;pointer-events:none;color:rgba(var(--crgb),.9)}
.icu-note span:last-child{color:var(--muted)}
.icu-note i{font-style:normal}
/* the dotted line: how tall a healthy beat is (₹15 or less per result) */
.icu-ref{position:absolute;left:0;right:0;z-index:2;height:0;border-top:1px dashed rgba(127,210,255,.2);pointer-events:none}
.icu-ref span{position:absolute;right:9px;bottom:3px;font:400 9px/1 var(--mono);letter-spacing:.03em;white-space:nowrap;color:rgba(169,216,240,.62)}

/* the ward rhythm strip */
.icu-strip{min-height:0;height:66px;border-top:1px solid var(--icu-ln);cursor:pointer}
.icu-strip .icu-line{stroke-width:1.4}
.icu-strip-cap{position:absolute;left:14px;right:14px;top:8px;z-index:2;display:flex;align-items:baseline;gap:10px;pointer-events:none;white-space:nowrap;overflow:hidden}
.icu-strip-cap b{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--crgb),.95)}
.icu-strip-cap span{font:400 10.5px/1 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.icu-strip-cap em{font-style:normal}
.icu-hl{position:absolute;top:0;bottom:0;left:0;width:0;z-index:1;opacity:0;pointer-events:none;transition:opacity .15s var(--ease);
  background:linear-gradient(180deg,rgba(var(--crgb),.2),rgba(var(--crgb),.04));box-shadow:inset 1px 0 0 rgba(var(--crgb),.4),inset -1px 0 0 rgba(var(--crgb),.4)}

/* how to read a monitor */
.icu-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:9px 16px 10px;border-top:1px solid var(--icu-ln);font-size:12px;line-height:1.3;color:var(--muted)}
.icu-key>span:not(.icu-lbl){display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.icu-key b{font-weight:500;color:var(--soft)}
.icu-mini{flex:none;width:46px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 3px rgba(127,210,255,.55))}
.icu-key [data-flat] .icu-mini{stroke:var(--bad);filter:drop-shadow(0 0 3px rgba(255,95,87,.6))}
.icu-key [data-ref] .icu-mini{stroke:rgba(169,216,240,.6);stroke-dasharray:3 3;filter:none}

/* ---------- ward bar: what is listed, and the order ---------- */
.icu-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:16px 0 12px;min-height:34px}
.icu-cap{font-size:13.5px;color:var(--muted)}
.icu-cap b{margin-right:9px;font-size:15px;font-weight:500;color:var(--text)}
.icu-sortbox{display:flex;align-items:center;gap:10px}
.icu-sorts button{padding:6px 12px}

/* ---------- the ward: bedside monitors ---------- */
.icu-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,372px),1fr));gap:14px;align-items:stretch}
.icu-mon[data-out]{pointer-events:none}                /* an ad that left the ward: lifted out where it stood, fading */
.icu-mon{--crgb:255,95,87;--em-cut:#11141a;position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border-radius:16px;
  background:var(--grain),linear-gradient(180deg,#12151c,#0b0d12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--hair),0 2px 4px rgba(0,0,0,.3),0 18px 36px -20px rgba(0,0,0,.85),0 30px 60px -38px rgba(var(--crgb),.5)}
.icu-mon[data-st=watch]{--crgb:240,180,76}
.icu-mon[data-kind=flat]{--crgb:255,95,87}
.icu-mon::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--crgb),.8),transparent)}
@media (hover:hover) and (min-width:641px){.icu-mon:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--hair2),0 2px 4px rgba(0,0,0,.3),0 22px 40px -20px rgba(0,0,0,.9),0 30px 60px -34px rgba(var(--crgb),.7)}}
.icu-enter .icu-mon{animation:in .34s var(--ease) backwards;animation-delay:calc(var(--i,0)*26ms)}
/* found from the rhythm strip: a ring that fades out (only its opacity moves) */
.icu-mon.icu-ping::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(169,216,240,.95),0 0 46px -4px rgba(127,210,255,.75);animation:icuPing 1.7s var(--ease) both}
@keyframes icuPing{0%,35%{opacity:1}100%{opacity:0}}

/* patient line */
.icu-pt{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}
.icu-who{flex:1;min-width:0;display:flex;align-items:center;gap:11px;margin:0;padding:0;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.icu-who:focus-visible{outline:2px solid rgba(169,216,240,.55);outline-offset:4px}
.icu-who .em{align-self:flex-start;margin-top:2px}
.icu-id{min-width:0;display:block}
.icu-id b{display:block;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.018em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icu-who:hover .icu-id b{color:#fff}
.icu-id small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:1px;font-size:12px;line-height:1.4;color:var(--muted)}
.icu-id small i{font-style:normal;color:var(--dim)}
.icu-tags{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.icu-sib{margin:0;padding:3px 0 3px 6px;border:0;background:none;cursor:pointer;font:400 10.5px/1 var(--mono);letter-spacing:0;color:var(--muted);white-space:nowrap}
.icu-sib:hover,.icu-sib:focus-visible{color:var(--accent);outline:none}

/* the display: one black glass with the trace, the big reading and the small ones */
.icu-disp{border-radius:12px;overflow:hidden;background:var(--icu-scr);box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.055),0 1px 0 rgba(255,255,255,.05)}
.icu-mon[data-kind=flat] .icu-disp{box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,95,87,.36),0 0 30px -12px rgba(255,95,87,.75)}
.icu-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(136px,36%)}
.icu-alarm{position:absolute;left:8px;right:8px;top:8px;z-index:2;display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;font:500 11px/1.25 var(--sans);color:#ffb7b2;background:rgba(255,95,87,.14);
  box-shadow:inset 0 0 0 1px rgba(255,95,87,.42),0 0 24px -6px rgba(255,95,87,.75);animation:breathe 2.8s ease-in-out infinite}
.icu-alarm i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--bad);box-shadow:0 0 8px var(--bad)}
.icu-alarm span{min-width:0}
.icu-alarm em{font-style:normal}
.icu-num{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 11px;border-left:1px solid var(--icu-ln)}
.icu-num[data-c=bad]{--n:var(--bad);--nrgb:255,95,87}.icu-num[data-c=warn]{--n:var(--warn);--nrgb:240,180,76}.icu-num[data-c=good]{--n:var(--good);--nrgb:62,207,142}
.icu-num .icu-lbl{display:flex;align-items:center;gap:7px}
.icu-num .icu-lbl em{display:none}                    /* the window ("7 days") sits here on phones, after the number on wider screens */
.icu-lamp{flex:none;width:6px;height:6px;border-radius:50%;background:rgb(var(--crgb));box-shadow:0 0 8px rgb(var(--crgb));opacity:.3}
.icu-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:31px;font-weight:300;line-height:1.1;letter-spacing:-.04em;color:var(--n,var(--text));text-shadow:0 0 22px rgba(var(--nrgb,255,255,255),.42)}
.icu-big.icu-long{font-size:23px}
.icu-val{display:contents}                             /* only a handle for live updates: it makes no box of its own */
.icu-big .m-cur{color:inherit;opacity:.7}
.icu-big small{font:400 10.5px/1 var(--mono);letter-spacing:0;color:var(--muted);text-shadow:none}
.icu-nores{font-size:20px;font-weight:400;letter-spacing:-.02em}
.icu-trend{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;line-height:1.2;color:var(--soft);white-space:nowrap}
.icu-trend svg{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icu-trend[data-t=bad]{color:var(--bad)}.icu-trend[data-t=good]{color:var(--good)}.icu-trend[data-t=idle]{color:var(--muted)}
.icu-why{min-height:13px;font-size:10.5px;line-height:1.25;color:var(--muted)}

/* 3 days / yesterday / today */
.icu-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--icu-ln)}
.icu-days>div{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:7px 10px 8px}
.icu-days>div+div{border-left:1px solid var(--icu-ln)}
.icu-days span{font-size:11px;color:var(--muted);white-space:nowrap}
.icu-days b{font:500 12px/1 var(--mono);letter-spacing:-.02em;white-space:nowrap;color:var(--soft)}
.icu-days [data-c=bad] b{color:var(--bad)}.icu-days [data-c=warn] b{color:var(--warn)}.icu-days [data-c=good] b{color:var(--good)}
.icu-days.icu-new{grid-template-columns:minmax(0,1fr)}
.icu-days.icu-new>div{justify-content:flex-start;gap:9px}
.icu-days.icu-new b{font:400 11px/1.2 var(--sans);letter-spacing:0;color:var(--muted)}
.icu-days.icu-new span{color:var(--accent)}

/* spent / results / wasted / daily budget */
.icu-tiles{display:grid;grid-template-columns:minmax(max-content,.9fr) minmax(max-content,.95fr) minmax(0,1.4fr) minmax(max-content,1fr);border-top:1px solid var(--icu-ln)}
.icu-tiles[data-n="3"]{grid-template-columns:minmax(max-content,1fr) minmax(max-content,1fr) minmax(0,1.4fr)}
.icu-tile{min-width:0;padding:9px 10px 10px}
.icu-tile+.icu-tile{border-left:1px solid var(--icu-ln)}
.icu-tile>b{display:block;margin:6px 0 4px;font-size:18px;font-weight:400;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
.icu-tile>b>i{margin-left:4px;font:400 11px/1 var(--sans);font-style:normal;letter-spacing:0;color:var(--muted)}
.icu-tile>small{display:block;font-size:10.5px;line-height:1.3;color:var(--muted)}
.icu-tile[data-c=ice]>b{color:var(--accent)}
.icu-tile[data-c=bad]>b{color:var(--bad)}
.icu-tile[data-c=good]>b{color:var(--good)}
.icu-tile[data-c] .m-cur{color:inherit;opacity:.7}
/* how much of the money was above the target: ice = fair cost, red = wasted */
.icu-waste{display:flex;justify-content:flex-end;height:3px;background:rgba(127,210,255,.2)}
.icu-waste i{display:block;height:100%;background:linear-gradient(90deg,rgba(255,95,87,.75),#ff5f57);box-shadow:0 0 10px rgba(255,95,87,.7)}

/* diagnosis + treatment */
.icu-dx{margin:0;font-size:12.5px;line-height:1.5;color:var(--soft)}
.icu-dx .icu-lbl{margin-bottom:3px}
.icu-rx{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.icu-rx .btn{min-height:36px}
.icu-open{margin-left:auto}

/* an empty ward: quiet, one steady green trace */
.icu-empty{grid-column:1/-1;display:grid;justify-items:center;gap:8px;margin-top:16px;padding:26px 18px 34px;border-radius:18px;text-align:center;--crgb:62,207,142;
  background:radial-gradient(600px 220px at 50% 0%,rgba(62,207,142,.07),transparent 70%),linear-gradient(180deg,#0c1017,#07090d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--hair),0 30px 60px -40px #000}
.icu-quiet{width:min(720px,100%);height:118px;margin-bottom:12px;border-radius:12px;box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.055),0 0 40px -18px rgba(62,207,142,.6)}
.icu-standby{--crgb:127,170,200;box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.055)}
.icu-empty>b{font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.icu-empty>p{margin:0;font-size:14px;color:var(--soft)}
.icu-empty>small{max-width:520px;font-size:12.5px;color:var(--muted)}
.icu-empty .btn{margin-top:10px}

.icu-foot{margin:22px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:980px}

/* ---------- smaller screens ---------- */
@media (max-width:900px){
  .icu-stats{grid-template-columns:1fr 1fr}
  .icu-stat:nth-child(odd){box-shadow:none}
  .icu-stat:nth-child(n+3){border-top:1px solid var(--icu-ln)}
  .icu-stat>b{font-size:36px}
}
@media (max-width:820px){
  .icu-head h1{font-size:48px}
  .icu-wards{display:flex;width:100%}
  .icu-wards button{flex:1;justify-content:center;min-height:44px;padding:9px 10px}
  .icu-strip-cap em{display:none}
}
/* ---------- phones (640px or less): compact and light ----------
   Every monitor is folded to its patient line, trace, big reading and one summary line; a tap opens it in place
   (icu.js writes the inside only then, and keeps the first monitor of the ward open). No grain, no big soft shadows,
   no glow filters, no entry animation: the only things that move are opacities, one chevron and the canvas sweep of
   the monitors on screen. Monitors off screen are skipped by the browser (content-visibility). */
.icu-sum{display:none}
@media (max-width:640px){
  .icu-grid{gap:10px}
  .icu-mon{gap:8px;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,#12151c,#0b0d12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--hair);content-visibility:auto;contain-intrinsic-size:auto 151px}   /* a folded monitor is 171px with its padding */
  .icu-enter .icu-mon{animation:none}
  .icu-mon.icu-ping::after{box-shadow:inset 0 0 0 2px rgba(169,216,240,.95)}
  .icu-mon .em svg{filter:none}
  .icu-mon .em::after,.icu-mon .tag.live::before{animation:none}
  .icu-disp{box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
  .icu-mon[data-kind=flat] .icu-disp{box-shadow:inset 0 0 0 1px rgba(255,95,87,.42)}
  .icu-top{grid-template-columns:minmax(0,1fr) minmax(140px,36%)}
  .icu-top>.icu-scr{min-height:76px}
  .icu-scr::after{background:linear-gradient(rgba(127,210,255,.035) 1px,transparent 1px) 0 -1px/100% 26px,linear-gradient(90deg,rgba(127,210,255,.035) 1px,transparent 1px) -1px 0/26px 100%}
  .icu-glow,.icu-line{transition:none}
  .icu-alarm{left:6px;right:6px;top:6px;padding:4px 8px;box-shadow:inset 0 0 0 1px rgba(255,95,87,.42)}
  .icu-num{gap:2px;padding:7px 10px}
  .icu-num .icu-lbl em{display:inline;margin-left:auto;font:400 10px/1 var(--mono);font-style:normal;letter-spacing:0;text-transform:none;color:var(--muted)}
  .icu-big{font-size:27px;text-shadow:none}
  .icu-big small{display:none}
  .icu-waste i{box-shadow:none}
  .icu-rx .btn{min-height:44px}
  /* the summary line, which is also the "Details" control */
  .icu-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:20px;margin:0;padding:0;border:0;border-radius:8px;background:none;color:var(--soft);font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
  .icu-sum:focus-visible{outline:2px solid rgba(169,216,240,.55);outline-offset:3px}
  .icu-sum-t{display:flex;flex-wrap:wrap;gap:0 12px;min-width:0;font-size:12px;line-height:1.4;white-space:nowrap}
  .icu-sum-t b{font-weight:500}
  .icu-sum-t b[data-c=bad]{color:var(--bad)}
  .icu-sum-t b[data-c=good]{color:var(--good)}
  .icu-sum-c{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
  .icu-sum-c i{font-style:normal}
  .icu-sum-c [data-o="1"]{display:none}
  .icu-chev{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
  /* open: the control moves to the end and says "Hide details" */
  .icu-mon:not(.icu-shut) .icu-sum{order:5;justify-content:flex-end;min-height:32px}
  .icu-mon:not(.icu-shut) .icu-sum-t,.icu-mon:not(.icu-shut) .icu-sum-c [data-o="0"]{display:none}
  .icu-mon:not(.icu-shut) .icu-sum-c [data-o="1"]{display:inline}
  .icu-mon:not(.icu-shut) .icu-chev{transform:rotate(180deg)}
  /* folded */
  .icu-shut{cursor:pointer}
  .icu-shut .icu-why,.icu-shut .icu-days,.icu-shut .icu-tiles,.icu-shut .icu-waste,.icu-shut .icu-dx,.icu-shut .icu-rx,.icu-shut .icu-alarm em,.icu-shut .icu-sib{display:none}
  .icu-shut .icu-id small{-webkit-line-clamp:1}
  .icu-shut .icu-note{flex-wrap:nowrap}
  .icu-shut .icu-note span:first-child{flex:none}
  .icu-shut .icu-note span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* the rest of the page, lighter */
  .icu-board{box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(255,255,255,.07)}
  .icu-stat[data-tone=bad]>b{text-shadow:none}
  .icu-mini,.icu-key [data-flat] .icu-mini{filter:none}
  .icu-empty{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--hair)}
}
@media (max-width:560px){
  /* the top of the page stays short, so the first monitor is on the first screen */
  .icu-kick{letter-spacing:.16em}
  .icu-head{margin-bottom:12px}
  .icu-sign{flex-wrap:nowrap;align-items:center;gap:14px;margin-top:9px}
  .icu-head h1{font-size:42px}
  .icu-head p{font-size:13.5px;line-height:1.35}
  /* ward board: label and number only; the small lines under the numbers are dropped ("this week" moves beside its number) */
  .icu-stat{padding:10px 12px 9px}
  .icu-stat .icu-lbl{white-space:normal;align-items:flex-start;gap:6px}
  .icu-stat .icu-led{margin-top:3px}
  .icu-stat>b{margin:5px 0 0;font-size:24px;white-space:normal}
  .icu-stat>b em{display:inline-block;margin-left:7px;font:400 10.5px/1 var(--mono);font-style:normal;letter-spacing:0;white-space:nowrap;color:var(--muted)}
  .icu-stat>small{display:none}
  .icu-stat.on::before{left:12px}
  .icu-strip{height:56px}
  /* how to read a monitor: one short paragraph instead of four rows */
  .icu-key{display:block;padding:8px 12px 9px;font-size:11.5px;line-height:1.55}
  .icu-key .icu-lbl{margin-bottom:2px}
  .icu-key>span:not(.icu-lbl){display:inline;white-space:normal}
  .icu-key>span:not(.icu-lbl)+span:not(.icu-lbl)::before{content:" · ";color:var(--dim)}
  .icu-mini{display:none}
  .icu-bar{margin:12px 0 10px}
  .icu-cap{display:none}
  .icu-sortbox{width:100%}
  .icu-sorts{display:flex;flex:1}
  .icu-sorts button{flex:1 1 auto;min-height:42px;padding:8px 6px;font-size:12.5px;white-space:nowrap}
  .icu-x{display:none}
  .icu-note i{display:none}
  .icu-days>div{flex-direction:column;align-items:flex-start;gap:4px;padding:7px 9px 8px}
  .icu-days.icu-new>div{flex-direction:row;align-items:baseline}
  .icu-tiles,.icu-tiles[data-n="3"]{grid-template-columns:1fr 1fr}
  .icu-tile:nth-child(odd){border-left:0}
  .icu-tile:nth-child(n+3){border-top:1px solid var(--icu-ln)}
  .icu-tiles[data-n="3"] .icu-tile:last-child{grid-column:1/-1}
  .icu-rx .btn{flex:1 1 0;min-height:44px}
  .icu-open{flex-basis:100%!important;margin-left:0}
  .icu-quiet{height:96px}
}
/* very narrow phones: in an open monitor the trace gets the full width and the big reading sits under it */
@media (max-width:350px){
  .icu-mon:not(.icu-shut) .icu-top{grid-template-columns:minmax(0,1fr)}
  .icu-mon:not(.icu-shut) .icu-num{border-left:0;border-top:1px solid var(--icu-ln)}
  .icu-mon:not(.icu-shut) .icu-note i{display:inline}
  .icu-shut .icu-note span:last-child{display:none}
  .icu-sortbox>.icu-lbl{display:none}
}
@media (prefers-reduced-motion:reduce){.icu-glow,.icu-line{transition:none}}