/* =========================================================================
   SazehFlow — "Liquid glass" material layer (loaded after css/style.css).
   Direction: refined translucent glass for NAVIGATION, SUMMARY PANELS, MENUS and
   CONTROLS — layered depth, specular top edge, soft ambient light behind it.
   Dense data (tables, forms, printed sheets) stays on solid surfaces so numbers
   remain legible. Original work: no Apple assets, just CSS.
   Fallbacks: no backdrop-filter → opaque tinted surface; prefers-reduced-
   transparency / prefers-contrast → opaque; prefers-reduced-motion → no motion.
   ========================================================================= */
:root{
  --lg-blur:blur(22px) saturate(180%);
  --lg-blur-strong:blur(30px) saturate(190%);
  /* material = warm tint + body fill + specular sheen (layered backgrounds, no pseudo elements) */
  --lg-sheen:linear-gradient(180deg,rgba(var(--ink-rgb),.13),rgba(var(--ink-rgb),0) 34%);
  --lg-tint:radial-gradient(130% 100% at 0% 0%,rgba(var(--gold-rgb),.07),transparent 55%),radial-gradient(110% 90% at 100% 100%,rgba(var(--sky-rgb),.06),transparent 58%);
  --lg-fill:linear-gradient(160deg,rgba(var(--ink-rgb),.10),rgba(var(--ink-rgb),.035) 46%,rgba(var(--ink-rgb),.06));
  --lg-material:var(--lg-sheen),var(--lg-tint),var(--lg-fill);
  --lg-edge:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(var(--ink-rgb),.05),inset 0 0 0 1px rgba(var(--ink-rgb),.07);
  --lg-lift:0 1px 1px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.30),0 28px 56px -24px rgba(0,0,0,.55);
  --lg-line:rgba(var(--ink-rgb),.16);
  --lg-solid:#1a1918;                       /* opaque fallback */
  --lg-r:20px;
}

/* ---- ambient light: gives the glass something to refract (tool pages + hero-less pages) ---- */
.estimate-hero,.control-hero{position:relative;isolation:isolate}
.estimate-hero::before{content:"";position:absolute;inset:-10% -5% auto;height:78vh;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 46% at 16% 22%,rgba(var(--gold-rgb),.22),transparent 70%),radial-gradient(34% 42% at 84% 12%,rgba(var(--sky-rgb),.17),transparent 70%),radial-gradient(40% 40% at 60% 64%,rgba(150,110,190,.10),transparent 72%);
  filter:blur(6px)}
@media (prefers-reduced-motion:no-preference){
  .estimate-hero::before{animation:lgDrift 28s ease-in-out infinite alternate}
  @keyframes lgDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}
}

/* ---- the material itself ---- */
.glass,.sch-panel,.ctl-form,.ctl-source,.sch-tiles,.calc-card,.calc-result{
  background:var(--lg-material);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:1px solid var(--lg-line);
  box-shadow:var(--lg-edge),var(--lg-lift);
}
.sch-panel,.ctl-form{border-radius:var(--lg-r)}
a.glass:hover,button.glass:hover{background:var(--lg-sheen),var(--lg-tint),linear-gradient(160deg,rgba(var(--ink-rgb),.17),rgba(var(--ink-rgb),.07));border-color:rgba(var(--ink-rgb),.34);transform:translateY(-1px);box-shadow:var(--lg-edge),0 14px 34px rgba(0,0,0,.36)}

/* ---- navigation: floating glass bar ---- */
.site-header.is-scrolled{
  background:var(--lg-sheen),linear-gradient(180deg,rgba(28,27,26,.62),rgba(18,17,16,.5));
  -webkit-backdrop-filter:var(--lg-blur-strong);backdrop-filter:var(--lg-blur-strong);
  border-bottom-color:rgba(var(--ink-rgb),.14);
  box-shadow:inset 0 -1px 0 rgba(var(--ink-rgb),.06),0 10px 34px rgba(0,0,0,.34)}
.nav-drop-menu{background:var(--lg-sheen),linear-gradient(160deg,rgba(38,36,34,.82),rgba(20,19,18,.78));
  -webkit-backdrop-filter:var(--lg-blur-strong);backdrop-filter:var(--lg-blur-strong);border-color:var(--lg-line);
  box-shadow:var(--lg-edge),0 24px 60px rgba(0,0,0,.5);border-radius:22px}
.nav-drop-menu a{border-radius:14px;transition:background var(--dur-1),transform var(--dur-1)}
.nav-drop-menu a:hover{background:rgba(var(--ink-rgb),.08)}
.nav>a:hover,.nav-drop-btn:hover{background:rgba(var(--ink-rgb),.08)}
.nav>a[aria-current="page"],.nav-drop.is-current .nav-drop-btn{background:rgba(var(--ink-rgb),.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);color:var(--text-strong)}
.lang-toggle{background:rgba(var(--ink-rgb),.07);border:1px solid var(--lg-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.back-to-top{border-radius:50%;box-shadow:var(--lg-edge),var(--lg-lift)}

/* ---- controls: pill buttons with a glass lens ---- */
.calc-btn{border-radius:999px;background:var(--lg-sheen),linear-gradient(160deg,rgba(var(--gold-rgb),.22),rgba(var(--gold-rgb),.10));
  border:1px solid rgba(var(--gold-rgb),.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.25);
  transition:background var(--dur-1),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-1)}
.calc-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(var(--gold-rgb),.22)}
.calc-btn:active{transform:translateY(0) scale(.985)}
.calc-btn-outline{background:var(--lg-sheen),rgba(var(--ink-rgb),.05);border-color:var(--lg-line);color:var(--text)}
.calc-btn-outline:hover{background:var(--lg-sheen),rgba(var(--ink-rgb),.1);border-color:rgba(var(--ink-rgb),.34)}
.seg-mini{background:rgba(var(--ink-rgb),.07);border:1px solid var(--lg-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);border-radius:999px}
.seg-mini button{border-radius:999px}
.seg-mini button.on{background:linear-gradient(160deg,rgba(var(--ink-rgb),.2),rgba(var(--ink-rgb),.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.25);color:var(--text-strong)}

/* ---- summary tiles: glass, with a soft lit edge ---- */
.sch-tiles{border-radius:var(--lg-r);overflow:hidden}
.sch-tile{transition:background var(--dur-2)}
.sch-tile:hover{background:rgba(var(--ink-rgb),.04)}
.sch-tile.lead .v{text-shadow:0 0 24px rgba(var(--gold-rgb),.35)}
.bl-card{background:rgba(var(--ink-rgb),.04);border-color:rgba(var(--ink-rgb),.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);border-radius:16px}

/* ---- inputs: recessed glass wells ---- */
.ctl-form input[type=number],.ctl-form select,.bl-app .bl-in,.bl-app input[type=text],.bl-app input[type=number],.bl-app select,.sch-form input,.sch-form select{
  background:rgba(0,0,0,.22);border:1px solid rgba(var(--ink-rgb),.14);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 1px 0 rgba(var(--ink-rgb),.05);border-radius:12px;
  transition:border-color var(--dur-1),box-shadow var(--dur-1),background var(--dur-1)}
.ctl-form input:focus,.ctl-form select:focus,.bl-app input:focus,.bl-app select:focus{background:rgba(0,0,0,.3);border-color:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 0 0 3px rgba(var(--gold-rgb),.28)}

/* ---- data stays SOLID and readable ---- */
.sch-tscroll,.sch-gscroll{background:rgba(var(--paper-rgb),.55);border-radius:14px;border:1px solid rgba(var(--ink-rgb),.07)}
.sch-table th{background:rgba(var(--ink-rgb),.04)}
.sch-table tbody tr{transition:background var(--dur-1)}
.sch-table tbody tr:hover{background:rgba(var(--ink-rgb),.035)}
.sch-table td,.sch-table th{border-bottom-color:rgba(var(--ink-rgb),.07)}
.bl-paper,.bl-paper *{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---- focus, motion, accessibility ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.glass,.sch-panel,.calc-btn{will-change:auto}
@media (prefers-reduced-motion:reduce){
  .glass,.sch-panel,.calc-btn,.nav-drop-menu a,.sch-tile{transition:none!important}
  a.glass:hover,button.glass:hover,.calc-btn:hover{transform:none}
}
/* no blur support → tinted opaque surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.sch-panel,.ctl-form,.ctl-source,.sch-tiles,.nav-drop-menu,.site-header.is-scrolled{background:var(--lg-solid)}
}
/* user asked for reduced transparency / more contrast → opaque, stronger borders */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .glass,.sch-panel,.ctl-form,.ctl-source,.sch-tiles,.nav-drop-menu,.site-header.is-scrolled,.bl-card{
    background:var(--lg-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(var(--ink-rgb),.38)}
  .estimate-hero::before{display:none}
}
/* blur is the most expensive effect: lighten it on small screens */
@media (max-width:700px){:root{--lg-blur:blur(14px) saturate(160%);--lg-blur-strong:blur(18px) saturate(170%)}}
@media print{.glass,.sch-panel{background:#fff!important;box-shadow:none!important}}