/* Claimsfy glass look: the same translucent glass as the website and the app icons, in every edition.
   Loaded after the app's own styles by one <link data-glass="<edition>"> tag (the edition picks its tint, deep tone and wash).
   Screen only: printing and every report, PDF and Word output stay exactly as they were. Report previews (.xpage) are never touched.
   Blur only on a few large surfaces (header, side menu, dialogs, sticky view heads); cards and lists use translucent fills without
   blur so long lists scroll smoothly on phones. Fonts, icons, layout and behaviour are the app's own. One file, the same in every edition. */
@media screen{

/* ---------- tokens: light ---------- */
:root{
  --g-mist:#EDF4F1; --g-ink-on:#FFFFFF;
  --g-tint:#CAF2EA; --g-deep:#196B55; --g-wash:#8FE3C6; --g-bt:#196B55; --g-bb:#145644; --g-wash2:#A9B8F2;
  --g-card:rgb(255 255 255 / .68); --g-card-hi:rgb(255 255 255 / .86); --g-solid:rgb(255 255 255 / .96);
  --g-bar:rgb(250 252 251 / .7); --g-heavy:rgb(255 255 255 / .95); --g-chip:rgb(255 255 255 / .62);
  --g-edge:rgba(255,255,255,.92); --g-hi:rgba(255,255,255,.95);
  --g-rim:color-mix(in srgb,var(--g-deep) 13%,transparent); --g-line:color-mix(in srgb,var(--g-deep) 14%,rgba(24,60,50,.08));
  --g-shadow:0 12px 28px -20px color-mix(in srgb,var(--g-deep) 55%,transparent),0 2px 8px -4px rgba(22,70,58,.10);
  --g-shadow-lg:0 30px 70px -28px color-mix(in srgb,var(--g-deep) 50%,rgba(0,0,0,.3)),0 6px 18px -8px rgba(22,70,58,.16);
  --g-scrim:color-mix(in srgb,var(--g-deep) 22%,rgba(12,20,18,.34));
  --g-wash-amt:40%; --g-tint-amt:70%;
  --g-blur:saturate(1.6) blur(18px);
  --g-bar-solid:color-mix(in srgb,var(--g-mist) 45%,#FAFCFB);
}
/* each edition: tint / deep / wash from the translucent app icons; button tones keep white text at 4.5:1 or better */
/* @editions-light (written by apply.py from its edition map) */
:root:has(link[data-glass="field"]){--g-tint:#F2E3CA;--g-deep:#7C531D;--g-wash:#F5C48A;--g-bt:#7C531D;--g-bb:#634217;--g-wash2:#8FE3C6}
:root:has(link[data-glass="desk"]){--g-tint:#CAF2EA;--g-deep:#196B55;--g-wash:#8FE3C6;--g-bt:#196B55;--g-bb:#145644;--g-wash2:#A9B8F2}
:root:has(link[data-glass="carrier"]){--g-tint:#CACFF2;--g-deep:#21368C;--g-wash:#A9B8F2;--g-bt:#21368C;--g-bb:#1A2B70;--g-wash2:#8FE3C6}
:root:has(link[data-glass="tpa"]){--g-tint:#DECAF2;--g-deep:#51218C;--g-wash:#C9AEF2;--g-bt:#51218C;--g-bb:#411A70;--g-wash2:#A9B8F2}
:root:has(link[data-glass="qa"]){--g-tint:#F2CAD2;--g-deep:#8C213D;--g-wash:#F2AFC0;--g-bt:#8C213D;--g-bb:#701A31;--g-wash2:#C9AEF2}
:root:has(link[data-glass="letters"]){--g-tint:#CADDF2;--g-deep:#215A8C;--g-wash:#A9CBEF;--g-bt:#215A8C;--g-bb:#1A4870;--g-wash2:#8FE3C6}
:root:has(link[data-glass="estimate"]){--g-tint:#E2F2CA;--g-deep:#4D6718;--g-wash:#CFE89A;--g-bt:#4D6718;--g-bb:#3E5213;--g-wash2:#9ADBE8}
:root:has(link[data-glass="contents"]){--g-tint:#CAE9F2;--g-deep:#1A6370;--g-wash:#9ADBE8;--g-bt:#1A6370;--g-bb:#154F5A;--g-wash2:#CFE89A}
:root:has(link[data-glass="medical"]){--g-tint:#D4D3F6;--g-deep:#2A2AAE;--g-wash:#B2B0F0;--g-bt:#2A2AAE;--g-bb:#22228A;--g-wash2:#9ADBE8}
:root:has(link[data-glass="verify"]){--g-tint:#F2CAE7;--g-deep:#8C2176;--g-wash:#EFAEDF;--g-bt:#8C2176;--g-bb:#701A5E;--g-wash2:#C9AEF2}
:root:has(link[data-glass="publicentity"]){--g-tint:#CDD5DE;--g-deep:#2E465C;--g-wash:#A9BCCE;--g-bt:#2E465C;--g-bb:#253A4D;--g-wash2:#9ADBE8}
/* @end */
/* the edition colour becomes the app's accent (selected states, links, primary buttons) */
:root:has(link[data-glass]){--accent:var(--g-deep);--accent-soft:color-mix(in srgb,var(--g-tint) 70%,#fff);--accent-ink:#FFFFFF}

/* ---------- tokens: dark (deep tinted glass) ---------- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not(:has(link[data-glass-auth],link[data-glass-light])){
  --g-mist:#0C1311;
  --g-card:rgb(28 37 34 / .7); --g-card-hi:rgb(30 40 37 / .82); --g-solid:rgb(26 34 32 / .97);
  --g-bar:rgb(14 21 19 / .7); --g-heavy:rgb(22 30 28 / .9); --g-chip:rgb(255 255 255 / .06);
  --g-edge:rgba(255,255,255,.09); --g-hi:rgba(255,255,255,.07); --g-rim:rgba(0,0,0,.42); --g-line:rgba(255,255,255,.1);
  --g-shadow:0 12px 30px -18px rgba(0,0,0,.6),0 2px 8px -4px rgba(0,0,0,.4); --g-shadow-lg:0 30px 70px -24px rgba(0,0,0,.7),0 6px 18px -8px rgba(0,0,0,.45);
  --g-scrim:rgba(4,8,7,.55); --g-wash-amt:16%; --g-tint-amt:55%; --g-bar-solid:color-mix(in srgb,var(--g-mist) 40%,#141C1A);
}}
:root[data-theme="dark"]{
  --g-mist:#0C1311;
  --g-card:rgb(28 37 34 / .7); --g-card-hi:rgb(30 40 37 / .82); --g-solid:rgb(26 34 32 / .97);
  --g-bar:rgb(14 21 19 / .7); --g-heavy:rgb(22 30 28 / .9); --g-chip:rgb(255 255 255 / .06);
  --g-edge:rgba(255,255,255,.09); --g-hi:rgba(255,255,255,.07); --g-rim:rgba(0,0,0,.42); --g-line:rgba(255,255,255,.1);
  --g-shadow:0 12px 30px -18px rgba(0,0,0,.6),0 2px 8px -4px rgba(0,0,0,.4); --g-shadow-lg:0 30px 70px -24px rgba(0,0,0,.7),0 6px 18px -8px rgba(0,0,0,.45);
  --g-scrim:rgba(4,8,7,.55); --g-wash-amt:16%; --g-tint-amt:55%; --g-bar-solid:color-mix(in srgb,var(--g-mist) 40%,#141C1A);
}
/* dark: the edition's light tone for accents and its dark tint for washes */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not(:has(link[data-glass-auth],link[data-glass-light])){--g-dtint:#0A342D;--g-dacc:#74DCC3}}
:root[data-theme="dark"]{--g-dtint:#0A342D;--g-dacc:#74DCC3}
/* @editions-dark (written by apply.py from its edition map) */
:root:has(link[data-glass="field"]){--g-dtint:#3E2707;--g-dacc:#F6B65E}
:root:has(link[data-glass="desk"]){--g-dtint:#0A342D;--g-dacc:#74DCC3}
:root:has(link[data-glass="carrier"]){--g-dtint:#18244D;--g-dacc:#AFC4FF}
:root:has(link[data-glass="tpa"]){--g-dtint:#2C1748;--g-dacc:#D6C2FF}
:root:has(link[data-glass="qa"]){--g-dtint:#40101E;--g-dacc:#F7AFC1}
:root:has(link[data-glass="letters"]){--g-dtint:#16232F;--g-dacc:#AECBE4}
:root:has(link[data-glass="estimate"]){--g-dtint:#212E08;--g-dacc:#C6E27F}
:root:has(link[data-glass="contents"]){--g-dtint:#06303C;--g-dacc:#9ED9EA}
:root:has(link[data-glass="medical"]){--g-dtint:#17174A;--g-dacc:#B9B8FF}
:root:has(link[data-glass="verify"]){--g-dtint:#3C0F33;--g-dacc:#F3B4E6}
:root:has(link[data-glass="publicentity"]){--g-dtint:#18222C;--g-dacc:#A6BBD0}
/* @end */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):has(link[data-glass]):not(:has(link[data-glass-auth],link[data-glass-light])){--accent:var(--g-dacc);--accent-soft:color-mix(in srgb,var(--g-dtint) 80%,#1A2220);--accent-ink:#0B1210;--g-tint:var(--g-dtint)}}
:root[data-theme="dark"]:has(link[data-glass]){--accent:var(--g-dacc);--accent-soft:color-mix(in srgb,var(--g-dtint) 80%,#1A2220);--accent-ink:#0B1210;--g-tint:var(--g-dtint)}

/* ---------- background: mint mist with two very soft edition washes ---------- */
html{background:var(--g-mist)}
html body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 760px at 104% -12%,color-mix(in srgb,var(--g-wash) var(--g-wash-amt),transparent),transparent 68%),
    radial-gradient(1000px 700px at -8% 108%,color-mix(in srgb,var(--g-tint) var(--g-tint-amt),transparent),transparent 64%),
    var(--g-mist)}

/* ---------- frosted header and side menu (blurred: a few large surfaces only) ---------- */
/* the header holds the side menu (position:fixed), so its frost sits on a layer behind it: a blur on the header itself would trap the menu */
header.top{background:transparent;border-bottom-color:var(--g-line);box-shadow:inset 0 -1px 0 var(--g-hi)}
header.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--g-bar);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
body.freeze header.top{box-shadow:inset 0 -1px 0 var(--g-hi),0 8px 22px -16px color-mix(in srgb,var(--g-deep) 40%,rgba(0,0,0,.2))}
html.cfynav:root body nav.tabs,html.cfynav:root body #navHead{background:var(--g-bar);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-color:var(--g-line)}
html.cfynav:root body nav.tabs{box-shadow:inset -1px 0 0 var(--g-hi)}
html.cfynav:root body nav.tabs>.navtools{background:var(--g-bar-solid);border-top-color:var(--g-line)}
@media (max-width:999px){html.cfynav:root body nav.tabs,html.cfynav:root body #navHead{background:var(--g-heavy)}html.cfynav:root body #navScrim{background:var(--g-scrim)}}
html.cfynav:root body nav.tabs .tab[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--c),inset 0 1px 0 var(--g-hi),0 0 0 1px color-mix(in srgb,var(--c) 18%,transparent)}
/* a view's own head, when it sticks under the header */
body.freeze .view>.head{background:transparent}
body.freeze .view>.head.stuck{background:var(--g-bar);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-bottom-color:var(--g-line)}

/* ---------- glass cards: translucent fill, white inner edge, faint tinted rim (no blur, so lists scroll smoothly) ----------
   Done through the app's own --panel/--line on the card itself (restored for what is inside it), and at zero specificity,
   so a card the app colours or outlines itself (warnings, highlighted sections, coloured left edges) keeps that look. */
:root{--g-panel0:var(--panel);--g-line0:var(--line)}
:where(.panel,.pc,.empty,.wlsec,.boq,.note-card,.payauth,.rvstrip,.inspnav,.ctcard,.dspcard,.fincard,.qfcard,.excard,.cntile,.wxcard,.actc,.fqcard,.patile,.sktile,.lrg,.cfyv-row,.chkpanel,.fiacard,.pendbar,.tpabal>div,.ferkpi>div,.notestats div,.histsum div,.actsum div,.sum>div)>*{--panel:var(--g-panel0);--line:var(--g-line0)}
:where(.panel,.pc,.empty,.wlsec,.boq,.note-card,.payauth,.rvstrip,.inspnav,.ctcard,.dspcard,.fincard,.qfcard,.excard,.cntile,.wxcard,.actc,.fqcard,.patile,.sktile,.lrg,.cfyv-row,.chkpanel,.fiacard,.pendbar,.tpabal>div,.ferkpi>div,.notestats div,.histsum div,.actsum div,.sum>div):where(:not(.xpage *)){
  --panel:var(--g-card);--line:var(--g-edge);box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow)}
:where(.panel,.pc,.empty,.wlsec,.note-card,.cfyv-row,.ctcard,.dspcard,.fincard,.qfcard,.excard,.wxcard):where(:not(.xpage *)){border-radius:12px}
/* a card inside a card: lighter, no second shadow */
:where(.panel,.wlsec,.note-card,.pc) :where(.panel,.pc,.empty,.note-card,.ctcard,.fincard,.qfcard,.sum>div):where(:not(.xpage *)){--panel:var(--g-card-hi);box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim)}
:where(.drop):where(:not(.xpage *)){--panel:var(--g-chip);--line:color-mix(in srgb,var(--g-deep) 28%,transparent)}

/* ---------- tables and forms stay crisp: solid backgrounds behind dense claim data ---------- */
:where(.tablewrap):where(:not(.xpage *)){--panel:var(--g-solid);box-shadow:0 0 0 1px var(--g-rim);border-radius:10px}
:where(.panel,.wlsec,.pc,.note-card,.tablewrap) :where(table):where(:not(.xpage table)){background-color:var(--g-solid)}
:where(input[type=text],input[type=date],input[type=number],input[type=email],input[type=search],input[type=tel],input:not([type]),select,textarea):where(:not(.xpage *)):focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* ---------- buttons ---------- */
/* ordinary buttons: soft glass through the app's own variables, so buttons the app colours itself keep their colours */
:where(.btn):where(:not(.xpage *,.inspnav *)){--panel:linear-gradient(180deg,var(--g-card-hi),var(--g-chip));--line:var(--g-edge);border-radius:9px}
:where(.btn)>*{--panel:var(--g-panel0);--line:var(--g-line0)}
:where(.btn:not(.ghost):not(.primary)):where(:not(.xpage *,.inspnav *)){box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),0 1px 2px rgba(22,70,58,.06)}
:where(.btn:not(.ghost):not(.primary):not([disabled])):where(:not(.inspnav *)):hover{box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 2px 6px -2px rgba(22,70,58,.14)}
/* primary: the edition's deep tone as a gradient, a soft sheen on top, white text */
.btn.primary:not(.xpage *){background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));border-color:var(--g-bb);color:var(--g-ink-on);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px -10px var(--g-bb)}
.btn.primary:not([disabled]):hover{filter:brightness(1.1)}
@media (prefers-reduced-motion: no-preference){.btn{transition:box-shadow .15s ease,filter .15s ease,border-color .15s ease}}

/* ---------- tabs, segments and chips as soft glass ---------- */
.seg:not(.xpage *){background:var(--g-chip);border-color:var(--g-edge);box-shadow:0 0 0 1px var(--g-rim);border-radius:10px}
.segbtn:not(.xpage *){background:transparent;border-right-color:var(--g-line)}
.segbtn[aria-checked="true"],.segbtn[aria-pressed="true"]{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));color:#fff}
.chip:not(.xpage *){box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
.inspnav .tab[aria-selected="true"],.inspnav button[aria-current],.inspnav [aria-pressed="true"]{box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim)}
.state:not(.xpage *),.cfyv-reason:not(.xpage *){box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}

/* ---------- dialogs: the page behind blurs; the dialog is frosted glass with the icons' edge highlight ---------- */
:is([id$="Dlg"]:not(#prtDlg),#lobPick,#cfySet,#sdStd,.cfyv-dlg,.lcx-dlg){background:var(--g-scrim);-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2)}
:is([id$="Dlg"]:not(#prtDlg):not(#sk3dDlg),#lobPick,#cfySet,#sdStd,.cfyv-dlg,.lcx-dlg)>:first-child:not(.xpage):not(.xprev){background-color:var(--g-heavy);border-color:var(--g-edge);box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow-lg)}
/* menus that open over content stay nearly solid (no blur needed) */
:is(.menupanel,#userMenu,#bellPanel):not(.xpage *){background:var(--g-solid);border-color:var(--g-edge);box-shadow:0 0 0 1px var(--g-rim),var(--g-shadow-lg)}

/* report previews: only the frame around the page, the page itself is untouched */
.xprev{background:color-mix(in srgb,var(--g-tint) 30%,var(--sunk))}

/* ---------- sign-in, create-account and password pages (the server's small pages) ---------- */
:root:has(link[data-glass-auth]) body>form{background:rgb(255 255 255 / .78)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge)!important;
  box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow-lg)!important;border-radius:18px!important}
:root:has(link[data-glass-auth]) body>form button{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));border:1px solid var(--g-bb);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 18px -10px var(--g-bb);border-radius:10px}
:root:has(link[data-glass-auth]) body>form input{background:rgb(255 255 255 / .92)}
:root:has(link[data-glass-auth]) body>form .alt{background:rgb(255 255 255 / .55);border-radius:10px}

/* ---------- the server's own pages: Academy, back office, claim calls, client / department and vendor portals, claim links,
   report-a-claim and photo pages. One <link data-glass-page="<kind>"> each (tools/glass/apply.py). Academy and back office follow
   the person's Appearance choice; every other kind (data-glass-light) stays light. Certificates, invoices and printed pages keep
   their own look (screen only, and .cert/.inv are never touched). Selectors under :where() keep the page's own specificity, so a
   page's coloured states (warnings, pending, closed) still win where the page made them more specific. */
/* header bars: frosted like the app's; the bar keeps its place, the frost sits on a layer behind it */
:root:has(link[data-glass-page]) :is(header.top,header.pt,.cdtop),:root:has(link[data-glass-page="form"]) body>header{position:relative;background:transparent;border-bottom-color:var(--g-line);box-shadow:inset 0 -1px 0 var(--g-hi)}
:root:has(link[data-glass-page]) :is(header.top,header.pt,.cdtop)::before,:root:has(link[data-glass-page="form"]) body>header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--g-bar);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}

/* Academy and back office: through their own colour variables (so a dark Appearance choice still works) */
:root:has(link[data-glass-page="academy"],link[data-glass-page="office"]){--panel:var(--g-card-hi);--soft:color-mix(in srgb,var(--g-tint) 62%,var(--g-solid))}
:where(:root:has(link[data-glass-page="academy"],link[data-glass-page="office"])) :is(.card,.tw,ol.mods,fieldset,.kpi):not(.inv,.inv *){--line:var(--g-edge);box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow)}
:where(:root:has(link[data-glass-page="academy"],link[data-glass-page="office"])) :is(.card,.tw,ol.mods,fieldset,.kpi):not(.inv,.inv *)>*{--line:var(--g-line0)}
:where(:root:has(link[data-glass-page="academy"],link[data-glass-page="office"])) .card .tw{box-shadow:0 0 0 1px var(--g-rim)}
:where(:root:has(link[data-glass-page="academy"],link[data-glass-page="office"])) .btn:not(.ghost):not(.danger):not(.inv *){background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));border-color:var(--g-bb);color:var(--g-ink-on);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px -10px var(--g-bb)}
:where(:root:has(link[data-glass-page="academy"],link[data-glass-page="office"])) :is(.btn.ghost,.btn.danger){background:var(--g-chip);box-shadow:inset 0 1px 0 var(--g-hi),0 1px 2px rgba(22,70,58,.06)}
:where(:root:has(link[data-glass-page="academy"])) .tabs{background:var(--g-chip);border-color:var(--g-edge);box-shadow:0 0 0 1px var(--g-rim)}
:where(:root:has(link[data-glass-page="academy"])) .tabs a.on{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));color:var(--g-ink-on)}
:where(:root:has(link[data-glass-page="academy"])) .timer{background:var(--g-heavy);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-color:var(--g-edge);box-shadow:0 0 0 1px var(--g-rim),var(--g-shadow)}
:where(:root:has(link[data-glass-page="office"])) .top nav a.on{background:color-mix(in srgb,var(--g-tint) 62%,var(--g-solid));color:var(--accent)}
:where(:root:has(link[data-glass-page="office"])) .subtabs a.on{border-color:var(--accent)}

/* portals and claim links (light): the page's own colours, re-tinted */
:where(:root:has(link[data-glass-page="portal"])) a{color:var(--g-deep)}
:where(:root:has(link[data-glass-page="portal"])) .brand span{color:var(--g-deep)}
:where(:root:has(link[data-glass-page="portal"])) .card:not(.corr,.okc){background:var(--g-card)}
:where(:root:has(link[data-glass-page="portal"])) .card:not(.ret){border-color:var(--g-edge)}
:where(:root:has(link[data-glass-page="portal"])) .card{box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow)}
:where(:root:has(link[data-glass-page="portal"])) :is(th,td){border-bottom-color:var(--g-line)}
:where(:root:has(link[data-glass-page="portal"])) .chip{background:color-mix(in srgb,var(--g-tint) 55%,#fff);color:var(--g-deep)}
:where(:root:has(link[data-glass-page="portal"])) .filters a{background:var(--g-chip);border-color:var(--g-edge);box-shadow:0 0 0 1px var(--g-rim)}
:where(:root:has(link[data-glass-page="portal"])) .tabsf a{background:var(--g-chip)}
:where(:root:has(link[data-glass-page="portal"])) :is(.filters,.tabsf) a.on{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));border-color:var(--g-bb);color:var(--g-ink-on)}
:where(:root:has(link[data-glass-page="portal"])) .steps div.on{border-top-color:var(--g-deep)}
:where(:root:has(link[data-glass-page="portal"])) .msg{background:rgb(255 255 255 / .72);box-shadow:0 0 0 1px var(--g-rim)}
:where(:root:has(link[data-glass-page="portal"])) .msg.mine{background:color-mix(in srgb,var(--g-tint) 70%,#fff)}
:where(:root:has(link[data-glass-page="portal"])) .auth{background:rgb(255 255 255 / .5);border-color:var(--g-edge);box-shadow:0 0 0 1px var(--g-rim)}
:where(:root:has(link[data-glass-page="portal"])) .auth.pending{background:rgb(255 251 240 / .9);border-color:#E8A317;box-shadow:none}
:where(:root:has(link[data-glass-page="portal"])) .ok{background:color-mix(in srgb,var(--g-tint) 55%,#fff);border-color:var(--g-deep);color:var(--g-deep)}
:where(:root:has(link[data-glass-page="portal"])) .tli{background:rgb(255 255 255 / .72)}
:where(:root:has(link[data-glass-page="portal"])) .tli.vendor{background:color-mix(in srgb,var(--g-tint) 45%,#fff)}
:where(:root:has(link[data-glass-page="portal"])) .tli.status{border-left-color:var(--g-deep)}
:where(:root:has(link[data-glass-page="portal"])) .empty{box-shadow:none;border-radius:0}
/* the letter page's button carries its colour inline */
:root:has(link[data-glass-page="portal"]) .card a.btn[style]{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb))!important}

/* report-a-claim, send-an-assignment, photo and capture links, support approval (light) */
:where(:root:has(link[data-glass-page="sheet"],link[data-glass-page="form"])) a{color:var(--g-deep)}
:where(:root:has(link[data-glass-page="sheet"],link[data-glass-page="form"])) :is(.tag,.brand span){color:var(--g-deep)}
:where(:root:has(link[data-glass-page="sheet"])) h2{color:var(--g-deep)}
:where(:root:has(link[data-glass-page="sheet"])) main,:where(:root:has(link[data-glass-page="form"])) .card{background:var(--g-card);border-color:var(--g-edge);box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow)}
:where(:root:has(link[data-glass-page="sheet"])) main{box-shadow:inset 0 1px 0 var(--g-hi),0 0 0 1px var(--g-rim),var(--g-shadow-lg)}
:where(:root:has(link[data-glass-page="form"])) .ok{color:var(--g-deep)}

/* the client portal's walkthrough: the edition colour instead of its built-in green */
:root:has(link[data-glass-page="portal"]) #cfyTourTip :is(button:not(.g,.skip),a.b){background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));border-color:var(--g-bb);color:var(--g-ink-on)}
:root:has(link[data-glass-page="portal"]) #cfyTourTip button.g{border-color:var(--g-deep);color:var(--g-deep)}
:root:has(link[data-glass-page="portal"]) #cfyTourTip :is(.ct){color:var(--g-deep)}
:root:has(link[data-glass-page="portal"]) #cfyTourTip .dots i.on{background:var(--g-deep)}
:root:has(link[data-glass-page="portal"]) #cfyTourTip button.skip{box-shadow:none}

/* every light kind: fields and buttons */
:where(:root:has(link[data-glass-light])) :is(input,select,textarea){background:rgb(255 255 255 / .86);border-color:color-mix(in srgb,var(--g-deep) 16%,#C9D2CE)}
:where(:root:has(link[data-glass-page="portal"],link[data-glass-page="sheet"],link[data-glass-page="form"])) :is(button,.btn){background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--g-bt),var(--g-bb));border-color:var(--g-bb);color:var(--g-ink-on);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px -10px var(--g-bb)}
:where(:root:has(link[data-glass-page="portal"],link[data-glass-page="sheet"],link[data-glass-page="form"])) :is(button,.btn):is(.ghost,.alt),:where(:root:has(link[data-glass-page="form"])) .alt{background:rgb(255 255 255 / .72);color:var(--g-deep);border-color:color-mix(in srgb,var(--g-deep) 45%,transparent);box-shadow:inset 0 1px 0 var(--g-hi),0 1px 2px rgba(22,70,58,.06)}
:where(:root:has(link[data-glass-page="portal"])) button.deny{background:rgb(255 255 255 / .72);color:#B3261E;border-color:#B3261E;box-shadow:inset 0 1px 0 var(--g-hi)}
:where(:root:has(link[data-glass-page="form"])) .areas button{background:rgb(255 255 255 / .72);color:#18211F;border-color:#B9C4BF;box-shadow:inset 0 1px 0 var(--g-hi)}
:where(:root:has(link[data-glass-page="form"])) .areas button[aria-pressed=true]{background:color-mix(in srgb,var(--g-tint) 60%,#fff);border-color:var(--g-deep);color:var(--g-deep)}
:where(:root:has(link[data-glass-light])) :is(button,.btn):not([disabled]):hover{filter:brightness(1.08)}

/* ---------- fallbacks ---------- */
/* no backdrop-filter: the frosted surfaces get more opaque */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--g-bar:rgb(250 252 251 / .96);--g-heavy:rgb(255 255 255 / .98)}
  :root[data-theme="dark"]{--g-bar:rgb(16 23 21 / .97);--g-heavy:rgb(22 30 28 / .98)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not(:has(link[data-glass-auth],link[data-glass-light])){--g-bar:rgb(16 23 21 / .97);--g-heavy:rgb(22 30 28 / .98)}}}
/* reduce transparency: everything opaque, no blur */
@media (prefers-reduced-transparency: reduce){
  :root{--g-card:var(--panel);--g-card-hi:var(--panel);--g-solid:var(--panel);--g-bar:var(--panel);--g-heavy:var(--panel);--g-chip:var(--panel)}
  body::before{background:var(--bg)}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}
}