/* Widget style (Account): Default or Glass, each in four amounts (Default 0 / 50 / 75 / 100 %, Glass 25 / 50 / 75 / 100 %). JS/profile-glass.js sets data-ws ("default" | "glass") and
   data-wl (Default: 0 | 50 | 75 | 100; Glass: 25 | 50 | 75 | 100) on <html>; with neither set (an account that never chose) nothing here applies and the cards stay exactly as they were.
   --wt is the amount as a fraction. Plain CSS: no script, no filter, no sampling. */
html[data-wl="0"]{--wt:0}html[data-wl="25"]{--wt:.25}html[data-wl="50"]{--wt:.5}html[data-wl="75"]{--wt:.75}html[data-wl="100"]{--wt:1}

/* BLURRED (the "default" style): the same dark cards, much less solid and more blurred behind. 0 %: untouched. 50 %: 30 % opaque, 40 px blur;
   75 %: 12 % opaque, 56 px; 100 %: 4 % opaque, 72 px (the owner's steps, 23 October 2026: each step moved one up and a new, clearest 100 added) */
html[data-ws="default"][data-wl="50"]{--da:.3;--db:28px}
html[data-ws="default"][data-wl="75"]{--da:.12;--db:28px}
html[data-ws="default"][data-wl="100"]{--da:.04;--db:28px}
html[data-ws="default"]:not([data-wl="0"])[data-wl] .w{
 background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(11,15,20,var(--da));
 -webkit-backdrop-filter:blur(var(--db));backdrop-filter:blur(var(--db))}

/* GLASS: 100 % is the windows' own glass ("Modal Glass") exactly; lower amounts are the solid card with that glass faded in */
html[data-ws="glass"][data-wl] .w{position:relative;
 background:linear-gradient(160deg,rgba(255,255,255,calc(.075 + .125*var(--wt))) 0%,rgba(255,255,255,calc(.02 + .06*var(--wt))) 45%,rgba(255,255,255,calc(.03 + .1*var(--wt))) 100%),rgba(11,15,20,calc(1 - var(--wt)));
 border:1px solid rgba(255,255,255,calc(.1 + .3*var(--wt)));
 -webkit-backdrop-filter:blur(calc(8px + 20px*var(--wt))) saturate(calc(1 + .8*var(--wt)));backdrop-filter:blur(calc(8px + 20px*var(--wt))) saturate(calc(1 + .8*var(--wt)));
 box-shadow:0 calc(24px + 6px*var(--wt)) calc(60px + 30px*var(--wt)) rgba(0,0,0,calc(.35 + .15*var(--wt))),inset 0 1px 0 rgba(255,255,255,calc(.1 + .55*var(--wt))),inset 0 0 0 1px rgba(255,255,255,calc(.12*var(--wt)))}
html[data-ws="glass"][data-wl] .w::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 55% at 18% -8%,rgba(255,255,255,calc(.3*var(--wt))),transparent 58%)}
html[data-ws="glass"][data-wl] .acct .danger{border-color:rgba(255,90,106,.3)}

/* the phone layout's full-bleed chart stays bare in every style (same switch as the layout's: phones and touch tablets up to 1399) */
@media (max-width:850px), (pointer:coarse) and (max-width:1399px){html[data-ws]:not([data-wl="0"])[data-wl] .w.hero{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}html[data-ws]:not([data-wl="0"])[data-wl] .w.hero::before{display:none}}
@media (prefers-reduced-transparency:reduce){html[data-ws]:not([data-wl="0"])[data-wl] .w{background:#0f141a;-webkit-backdrop-filter:none;backdrop-filter:none}html[data-ws]:not([data-wl="0"])[data-wl] .w::before{display:none}}

/* Nothing outside the page may tint a blurred or glass card (the owner's report, 23 October 2026: Chrome's red tab theme showed in the top edge of
   a card at the viewport edge). A blur reads the pixels around the card, and at the edge of the page those were the browser's own. A filter on the
   page's container makes it the backdrop root: the cards then blur only what is inside the page, and the page paints its own opaque ground. */