/* AL-YASSIN website v49 · transparent glass layer (owner, 27 Oct). Website only, not the app.
   One file, loaded last on every page: remove the <link> to switch it off. Text colours are unchanged; only surfaces
   become see-through. Phones get the see-through surfaces without the blur on content cards (smooth scrolling);
   no blur support or "reduce transparency" gets solid surfaces. */
:root{--gl-dk:rgba(14,28,50,.50);--gl-dk2:rgba(10,20,36,.66);--gl-dkb:rgba(255,255,255,.11);--gl-dkh:rgba(255,255,255,.07);
--gl-lt:rgba(255,253,248,.56);--gl-lt2:rgba(255,253,248,.74);--gl-ltb:rgba(255,255,255,.85);--gl-lth:rgba(255,255,255,.9);
--gl-sh:0 14px 40px -18px rgba(10,20,36,.30);--gl-shd:0 18px 50px -20px rgba(0,0,0,.65)}

/* ---- header, phone menu, consent bar, footer (all pages) ---- */
.gh-bar{background:linear-gradient(180deg,rgba(10,20,36,.70),rgba(10,20,36,.52));-webkit-backdrop-filter:blur(18px) saturate(165%);backdrop-filter:blur(18px) saturate(165%);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:inset 0 -1px 0 rgba(201,164,92,.12),0 8px 30px -18px rgba(0,0,0,.6)}
.gh-lang{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gh-menu{background:rgba(8,16,30,.78);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
.gh-mg{border-radius:14px}
#ays-cb{background:rgba(12,24,44,.90)!important;-webkit-backdrop-filter:blur(16px) saturate(150%)!important;backdrop-filter:blur(16px) saturate(150%)!important;border-top:1px solid rgba(255,255,255,.12)!important;box-shadow:0 -10px 30px -16px rgba(0,0,0,.55)!important}
.gf{background:linear-gradient(180deg,rgba(10,20,36,.92),#07101F)}
/* a dark band fixed under the header: at the top of a light page the see-through header stays navy, and content
   that scrolls under it shows through blurred */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:64px;background:#0A1424;z-index:-1;pointer-events:none}
@media print{body::before{display:none}}

/* ---- dark pages (home, services, approvals, systems, sectors, contact) ---- */
html:has(link[href$="/assets/site.css"]) body{background-color:#07101F;background-image:radial-gradient(1100px 700px at 8% 30%,rgba(63,120,210,.13),transparent 60%),radial-gradient(900px 640px at 92% 55%,rgba(201,164,92,.11),transparent 62%),radial-gradient(800px 600px at 30% 92%,rgba(63,166,107,.07),transparent 60%);background-attachment:fixed}
html:has(link[href$="/assets/site.css"]) .pillars{background:transparent;border:0;gap:14px}
html:has(link[href$="/assets/site.css"]) .pillar{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid var(--gl-dkb);border-radius:16px;box-shadow:inset 0 1px 0 var(--gl-dkh),var(--gl-shd)}
html:has(link[href$="/assets/site.css"]) .door-grid{background:rgba(14,28,50,.38);border-color:var(--gl-dkb);box-shadow:inset 0 1px 0 var(--gl-dkh),var(--gl-shd)}
html:has(link[href$="/assets/site.css"]) .door:hover{background:rgba(255,255,255,.06)}
html:has(link[href$="/assets/site.css"]) .sheet{background:rgba(14,28,50,.80);border-color:var(--gl-dkb);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}

/* ---- paper pages (exams, tools, standards, checklists, field app, news …) ---- */
html:has(link[href$="/assets/exams.css"]) body{background-color:#FBF7EE;background-image:radial-gradient(900px 620px at 6% 40%,rgba(201,164,92,.16),transparent 62%),radial-gradient(860px 600px at 96% 70%,rgba(63,120,210,.10),transparent 60%),radial-gradient(700px 520px at 50% 105%,rgba(201,164,92,.10),transparent 60%);background-attachment:fixed}
.xh{background-image:radial-gradient(640px 360px at 85% 15%,rgba(201,164,92,.20),transparent 70%),radial-gradient(560px 380px at 10% 110%,rgba(63,120,210,.22),transparent 70%),repeating-linear-gradient(0deg,rgba(241,242,239,.045) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(241,242,239,.045) 0 1px,transparent 1px 24px)}
.xh .facts{border:0;gap:10px;padding-bottom:clamp(20px,3vw,32px)}
.xh .facts>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html:has(link[href$="/assets/exams.css"]) .cards a,html:has(link[href$="/assets/exams.css"]) .panel,html:has(link[href$="/assets/exams.css"]) .sheet,html:has(link[href$="/assets/exams.css"]) .fa-feat article,html:has(link[href$="/assets/exams.css"]) .qa details,html:has(link[href$="/assets/exams.css"]) .faq details,html:has(link[href$="/assets/exams.css"]) .tblw,html:has(link[href$="/assets/exams.css"]) .tbl-w,html:has(link[href$="/assets/exams.css"]) .reg-tbl-w,html:has(link[href$="/assets/exams.css"]) .tb,html:has(link[href$="/assets/exams.css"]) .pk-c,html:has(link[href$="/assets/exams.css"]) .feed,html:has(link[href$="/assets/exams.css"]) .ctry,html:has(link[href$="/assets/exams.css"]) .ckl,html:has(link[href$="/assets/exams.css"]) .ckrec,html:has(link[href$="/assets/exams.css"]) details.ckt{background:var(--gl-lt);border-color:var(--gl-ltb);box-shadow:inset 0 1px 0 var(--gl-lth),var(--gl-sh)}
html:has(link[href$="/assets/exams.css"]) .ckb,html:has(link[href$="/assets/exams.css"]) .ckno,html:has(link[href$="/assets/exams.css"]) .ind{background:var(--gl-lt);box-shadow:var(--gl-sh)}
html:has(link[href$="/assets/exams.css"]) .cards a:hover{background:var(--gl-lt2)}
html:has(link[href$="/assets/exams.css"]) .is-not,html:has(link[href$="/assets/exams.css"]) .rule,html:has(link[href$="/assets/exams.css"]) .quote{background:rgba(244,238,225,.55)}
html:has(link[href$="/assets/exams.css"]) .seg,html:has(link[href$="/assets/exams.css"]) .fld input,html:has(link[href$="/assets/exams.css"]) .fld select,html:has(link[href$="/assets/exams.css"]) .find input,html:has(link[href$="/assets/exams.css"]) .tb-act button,html:has(link[href$="/assets/exams.css"]) .tb-act a{background:rgba(255,255,255,.72)}
@media (min-width:721px){
html:has(link[href$="/assets/exams.css"]) .cards a,html:has(link[href$="/assets/exams.css"]) .panel,html:has(link[href$="/assets/exams.css"]) .fa-feat article,html:has(link[href$="/assets/exams.css"]) .qa details,html:has(link[href$="/assets/exams.css"]) .faq details,html:has(link[href$="/assets/exams.css"]) .tblw,html:has(link[href$="/assets/exams.css"]) .tbl-w,html:has(link[href$="/assets/exams.css"]) .reg-tbl-w,html:has(link[href$="/assets/exams.css"]) .tb,html:has(link[href$="/assets/exams.css"]) .pk-c,html:has(link[href$="/assets/exams.css"]) .feed,html:has(link[href$="/assets/exams.css"]) .ctry,html:has(link[href$="/assets/exams.css"]) .ckl,html:has(link[href$="/assets/exams.css"]) .ckrec,html:has(link[href$="/assets/exams.css"]) details.ckt{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
html:has(link[href$="/assets/site.css"]) .pillar,html:has(link[href$="/assets/site.css"]) .door-grid{-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}}

/* ---- no blur, or the visitor asked for less transparency: solid surfaces ---- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.gh-bar{background:rgba(10,20,36,.96)}.gh-menu{background:#0A1424}#ays-cb{background:#0F1C31!important}
html:has(link[href$="/assets/exams.css"]) .cards a,html:has(link[href$="/assets/exams.css"]) .panel,html:has(link[href$="/assets/exams.css"]) .fa-feat article,html:has(link[href$="/assets/exams.css"]) .qa details,html:has(link[href$="/assets/exams.css"]) .faq details,html:has(link[href$="/assets/exams.css"]) .tblw,html:has(link[href$="/assets/exams.css"]) .tbl-w,html:has(link[href$="/assets/exams.css"]) .reg-tbl-w,html:has(link[href$="/assets/exams.css"]) .tb,html:has(link[href$="/assets/exams.css"]) .pk-c,html:has(link[href$="/assets/exams.css"]) .feed,html:has(link[href$="/assets/exams.css"]) .ctry,html:has(link[href$="/assets/exams.css"]) .ckl,html:has(link[href$="/assets/exams.css"]) .ckrec,html:has(link[href$="/assets/exams.css"]) details.ckt{background:#FFFDF8}
.pillar{background:#0E1B30}.door-grid{background:#0E1B30}}
@media (prefers-reduced-transparency:reduce){
.gh-bar{background:#0A1424;-webkit-backdrop-filter:none;backdrop-filter:none}.gh-menu{background:#0A1424;-webkit-backdrop-filter:none;backdrop-filter:none}
#ays-cb{background:#0F1C31!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:has(link[href$="/assets/exams.css"]) .cards a,html:has(link[href$="/assets/exams.css"]) .panel,html:has(link[href$="/assets/exams.css"]) .fa-feat article,html:has(link[href$="/assets/exams.css"]) .qa details,html:has(link[href$="/assets/exams.css"]) .faq details,html:has(link[href$="/assets/exams.css"]) .tblw,html:has(link[href$="/assets/exams.css"]) .tbl-w,html:has(link[href$="/assets/exams.css"]) .reg-tbl-w,html:has(link[href$="/assets/exams.css"]) .tb,html:has(link[href$="/assets/exams.css"]) .pk-c,html:has(link[href$="/assets/exams.css"]) .feed,html:has(link[href$="/assets/exams.css"]) .ctry,html:has(link[href$="/assets/exams.css"]) .ckl,html:has(link[href$="/assets/exams.css"]) .ckrec,html:has(link[href$="/assets/exams.css"]) details.ckt,html:has(link[href$="/assets/exams.css"]) .ckb,html:has(link[href$="/assets/exams.css"]) .ckno,html:has(link[href$="/assets/exams.css"]) .ind{background:#FFFDF8;-webkit-backdrop-filter:none;backdrop-filter:none}
html:has(link[href$="/assets/site.css"]) .pillar,html:has(link[href$="/assets/site.css"]) .door-grid{background:#0E1B30;-webkit-backdrop-filter:none;backdrop-filter:none}.xh .facts>div{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media print{html body{background:#fff!important}html:has(link[href$="/assets/exams.css"]) .cards a,html:has(link[href$="/assets/exams.css"]) .panel,html:has(link[href$="/assets/exams.css"]) .ckl,html:has(link[href$="/assets/exams.css"]) .ckrec,html:has(link[href$="/assets/exams.css"]) .tblw,html:has(link[href$="/assets/exams.css"]) .tbl-w{background:#fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}