/* ===========================================================================
 * D'leaps Studio OS - Mist glass (V32, bolt-on)
 *
 * The reference: a calm assistant dashboard. A pastel wash on the canvas
 * (periwinkle at the top left, blush at the bottom left, white across the
 * middle), one faint arc, a few pearl spheres floating behind the glass, and
 * frosted white panels with a soft white rim and almost no edge. Quiet ink,
 * cool grey secondary text, colour kept for the few things that act.
 *
 * Brand: the blush is the mauve (#cf91bf) lifted to a wash, the cool side is
 * periwinkle with a whisper of the turquoise mark. Primary buttons are a
 * satin magenta-mauve (no glossy jewel), switches stay turquoise. No green.
 *
 * Layering: loaded LAST, after crystal-glass.css and glass-buttons.css, and
 * scoped to html[data-wall="liquid"] (the default look) like the layers it
 * sits on. It mostly re-points the --cg-* tokens crystal-glass.css reads,
 * so every card, pill, field and orb follows. White and iMac are untouched.
 * Nothing here is inside @media print: BOQ, invoice, receipt stay paper.
 *
 * Contrast (WCAG 2.1, checked):
 *   white on the primary at its lightest point #C44A86:  4.5:1
 *   ink #2B2A28 on frosted white over the wash:          11:1+
 *   secondary #5E6278 on the lightest / darkest wash:    5.4:1 / 4.8:1
 *   ink on the turquoise switch #8BE6EC:                 10:1
 *
 * Roll back: delete the mist-glass.css <link> in index.html (V29 crystal
 * glass returns untouched).
 * =========================================================================== */

@media screen {

html[data-wall="liquid"] {
  --mg-canvas: #F3F4FA;
  --mg-peri:   rgba(160,180,246,.80);
  --mg-blush:  rgba(224,174,210,.74);
  --mg-tq:     rgba(98,232,239,.18);
  --mg-ink:    #2B2A28;
  --mg-ink-2:  #5E6278;

  /* the edge: a white rim and a hairline, no prism, no bevel thickness */
  --cg-rim:    inset 0 0 0 1px rgba(255,255,255,.88);
  --cg-hi:     inset 0 1px 0 rgba(255,255,255,1);
  --cg-thick:  0 0 0 0 transparent;
  --cg-prism:  0 0 0 0 transparent;
  --cg-hair:   0 0 0 1px rgba(140,150,196,.13);
  --cg-drop:   0 1px 2px rgba(80,90,150,.05), 0 22px 44px -24px rgba(80,90,150,.30);
  --cg-drop-s: 0 1px 2px rgba(80,90,150,.06), 0 8px 18px -12px rgba(80,90,150,.30);
  --cg-edge:   var(--cg-rim), var(--cg-hi), var(--cg-hair);

  /* frosted white, flatter than crystal */
  --cg-glass:   linear-gradient(160deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.46) 100%);
  --cg-glass-2: linear-gradient(170deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.40) 100%);
  --cg-blur:    blur(26px) saturate(160%);

  /* satin primary (white type), satin turquoise (ink) */
  --cg-mag:    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 48%), linear-gradient(180deg, #C44A86 0%, #A93C78 100%);
  --cg-mag-sh: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -12px rgba(169,60,120,.60);
  --cg-tq:     linear-gradient(180deg, #A8F0F3 0%, #8BE6EC 100%);
  --cg-tq-sh:  inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px -10px rgba(40,190,202,.50);

  --cg-ink:   var(--mg-ink);
  --cg-ink-2: var(--mg-ink-2);
  --cg-canvas: var(--mg-canvas); --cg-canvas-2: #EEF0F8;
  --lq-ink-2: var(--mg-ink-2);
  --muted:     var(--mg-ink-2);
  --graph-ink: var(--mg-ink-2);
  --lg-shadow-ctl: var(--cg-rim), var(--cg-hi), var(--cg-hair), var(--cg-drop-s);
  --lg-shadow-hi:  var(--cg-edge), 0 2px 4px rgba(80,90,150,.06), 0 30px 56px -24px rgba(80,90,150,.36);
  --lg-tint: #A93C78;

  /* the wash: periwinkle top left, blush bottom left, white middle, a turquoise breath at the right,
     and the faint arc that crosses the reference */
  --gm-pools:
    radial-gradient(64vw 52vw at -6% -14%, var(--mg-peri) 0%, rgba(168,186,244,0) 62%),
    radial-gradient(58vw 46vw at -4% 112%, var(--mg-blush) 0%, rgba(226,182,214,0) 64%),
    radial-gradient(44vw 40vw at 104% 62%, var(--mg-tq) 0%, rgba(98,232,239,0) 70%),
    radial-gradient(46vw 34vw at 62% 108%, rgba(196,208,248,.40) 0%, rgba(196,208,248,0) 70%),
    radial-gradient(circle at 24% 70%, rgba(255,255,255,0) 0, rgba(255,255,255,0) calc(38vw - 1px), rgba(255,255,255,.55) 38vw, rgba(255,255,255,0) calc(38vw + 2px)),
    radial-gradient(60vw 44vw at 58% 34%, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 70%);
}

html[data-wall="liquid"] body:before {
  background: var(--gm-pools), linear-gradient(180deg, #F5F6FC 0%, var(--mg-canvas) 100%) !important;
  background-repeat: no-repeat !important; background-size: auto !important;
}

/* pearl spheres behind the glass (decoration only, never takes a click).
   Each sphere is two layers: a centred disc (closest-side, so it never clips)
   and a smaller white highlight up and to the left of centre. */
html[data-wall="liquid"] body:after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle closest-side, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) calc(34px + 21px) calc(100% - 4vh - 54px) / 75px 75px no-repeat,
    radial-gradient(circle closest-side, #F7F7FC 0%, #E9EAF5 58%, #D3D5E9 94%, rgba(210,212,232,0) 100%) 34px calc(100% - 4vh) / 150px 150px no-repeat,
    radial-gradient(closest-side, rgba(80,90,150,.18), rgba(80,90,150,0)) calc(34px + 18px) calc(100% - 4vh + 15px) / 120px 33px no-repeat,
    radial-gradient(circle closest-side, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) calc(96px + 6px) calc(44vh + 6px) / 22px 22px no-repeat,
    radial-gradient(circle closest-side, #F7F7FC 0%, #E9EAF5 58%, #D3D5E9 94%, rgba(210,212,232,0) 100%) 96px 44vh / 44px 44px no-repeat,
    radial-gradient(circle closest-side, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) calc(100% - 3vw - 23px) calc(30vh + 9px) / 32px 32px no-repeat,
    radial-gradient(circle closest-side, #FBF7FB 0%, #EFE4F0 58%, #DCCDE3 94%, rgba(210,212,232,0) 100%) calc(100% - 3vw) 30vh / 64px 64px no-repeat,
    radial-gradient(circle closest-side, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) calc(100% - 24vw - 9px) calc(100% - 5vh - 9px) / 13px 13px no-repeat,
    radial-gradient(circle closest-side, #F5FCFD 0%, #E0F3F6 58%, #C6E5EA 94%, rgba(210,212,232,0) 100%) calc(100% - 24vw) calc(100% - 5vh) / 26px 26px no-repeat;
}
@media (max-width: 700px) {
  html[data-wall="liquid"] body:after {
    background:
      radial-gradient(circle closest-side, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) calc(-34px + 15px) calc(100% - 3vh - 40px) / 55px 55px no-repeat,
      radial-gradient(circle closest-side, #F7F7FC 0%, #E9EAF5 58%, #D3D5E9 94%, rgba(210,212,232,0) 100%) -34px calc(100% - 3vh) / 110px 110px no-repeat,
      radial-gradient(circle closest-side, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) calc(100% - 12px - 14px) calc(15vh + 6px) / 20px 20px no-repeat,
      radial-gradient(circle closest-side, #FBF7FB 0%, #EFE4F0 58%, #DCCDE3 94%, rgba(210,212,232,0) 100%) calc(100% - 12px) 15vh / 40px 40px no-repeat;
  }
}

/* ---- panels: frosted white ---------------------------------------------------------- */
html[data-wall="liquid"] .card, html[data-wall="liquid"] .stat, html[data-wall="liquid"] .tile,
html[data-wall="liquid"] .cl-card, html[data-wall="liquid"] .cl-panel, html[data-wall="liquid"] .lw-glass,
html[data-wall="liquid"] .dash-tile, html[data-wall="liquid"] #dl-sd-root .sd-glass {
  border-radius: 22px !important;
}
/* tiles inside panels: the reference's small white cards */
html[data-wall="liquid"] #dl-sd-root .sd-task, html[data-wall="liquid"] #dl-sd-root .sd-row,
html[data-wall="liquid"] #dl-sd-root .sd-stat, html[data-wall="liquid"] .lead-card, html[data-wall="liquid"] .sum-box {
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(140,150,196,.10), 0 6px 16px -12px rgba(80,90,150,.30) !important;
}
html[data-wall="liquid"] #dl-sd-root .sd-task:hover, html[data-wall="liquid"] #dl-sd-root .sd-row:hover,
html[data-wall="liquid"] .lead-card:hover {
  background: rgba(255,255,255,.86) !important;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(140,150,196,.12), 0 14px 26px -14px rgba(80,90,150,.36) !important;
}

/* ---- chrome --------------------------------------------------------------------------- */
html[data-wall="liquid"] .sidebar, html[data-wall="liquid"] .topbar {
  background: linear-gradient(170deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.34) 100%) !important;
  box-shadow: var(--cg-rim), var(--cg-hair), 0 20px 46px -30px rgba(80,90,150,.36) !important;
}
html[data-wall="liquid"] .navlink { color: var(--mg-ink-2) !important; }
html[data-wall="liquid"] .navlink:hover { background: rgba(255,255,255,.62) !important; color: var(--mg-ink) !important; }
html[data-wall="liquid"] .navlink.active {
  background: rgba(255,255,255,.92) !important; color: var(--mg-ink) !important;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(140,150,196,.12), 0 8px 18px -10px rgba(80,90,150,.34),
              inset 3px 0 0 #62E8EF !important;
}
html[data-wall="liquid"] .page-title { color: var(--mg-ink); }
html[data-wall="liquid"] .muted:has(+ .page-title) { color: var(--mg-ink-2) !important; }

/* ---- buttons ---------------------------------------------------------------------------- */
html[data-wall="liquid"] .btn-primary, html[data-wall="liquid"] .lw-btn.p, html[data-wall="liquid"] .login-btn,
html[data-wall="liquid"] #dl-sd-root .sd-btn.p, html[data-wall="liquid"] #dl-sd-root .sd-btn.m, html[data-wall="liquid"] .vh-go {
  text-shadow: none !important;
}
html[data-wall="liquid"] .btn-ghost, html[data-wall="liquid"] .lw-btn.g, html[data-wall="liquid"] .lw-chip,
html[data-wall="liquid"] #dl-sd-root .sd-chip, html[data-wall="liquid"] #dl-sd-root .sd-btn.g {
  background: rgba(255,255,255,.66) !important;
}
html[data-wall="liquid"] .icon-btn, html[data-wall="liquid"] #dl-wall-btn {
  background: rgba(255,255,255,.78) !important; border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(140,150,196,.14), 0 6px 14px -8px rgba(80,90,150,.36) !important;
}
html[data-wall="liquid"] .pill {
  background: rgba(255,255,255,.80) !important;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(140,150,196,.14), 0 4px 10px -6px rgba(80,90,150,.30) !important;
}

/* ---- fields: frosted, recessed by a hairline only --------------------------------------- */
html[data-wall="liquid"] .input, html[data-wall="liquid"] select.input, html[data-wall="liquid"] textarea.input,
html[data-wall="liquid"] .lw-in, html[data-wall="liquid"] .lw-search, html[data-wall="liquid"] .login-field input,
html[data-wall="liquid"] #dl-sd-root .sd-in, html[data-wall="liquid"] .ch-search, html[data-wall="liquid"] .vh-bar {
  background: rgba(255,255,255,.64) !important;
  box-shadow: inset 0 0 0 1px rgba(140,150,196,.22), inset 0 1px 2px rgba(80,90,150,.06) !important;
}
html[data-wall="liquid"] .input:focus, html[data-wall="liquid"] select.input:focus, html[data-wall="liquid"] textarea.input:focus,
html[data-wall="liquid"] .lw-in:focus, html[data-wall="liquid"] .lw-search:focus, html[data-wall="liquid"] .login-field input:focus,
html[data-wall="liquid"] #dl-sd-root .sd-in:focus, html[data-wall="liquid"] .vh-bar:focus-within {
  background: rgba(255,255,255,.94) !important;
  box-shadow: inset 0 0 0 1px rgba(155,80,137,.34), 0 0 0 4px rgba(207,145,191,.22) !important;
}
/* the big "Ask Veeha" bar reads like the reference prompt line */
html[data-wall="liquid"] .vh-bar { border-radius: 18px !important; }

/* ---- segmented controls ------------------------------------------------------------------ */
html[data-wall="liquid"] .lead-views, html[data-wall="liquid"] .proc-tabs, html[data-wall="liquid"] .tk-tabs,
html[data-wall="liquid"] .lw-views:not(:has(.lw-btn)), html[data-wall="liquid"] .lw-tabs, html[data-wall="liquid"] #dl-sd-root .sd-tabs {
  background: rgba(255,255,255,.40) !important;
  box-shadow: inset 0 0 0 1px rgba(140,150,196,.20) !important;
}

/* ---- BOQ editor: section heads and the add bar join the glass ----------------------------- */
html[data-wall="liquid"] .boq-sec {
  border: 0 !important; border-radius: 18px; overflow: visible;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 0 0 1px rgba(140,150,196,.12), 0 16px 34px -24px rgba(80,90,150,.34);
}
html[data-wall="liquid"] .boq-sec-head { background: rgba(247,234,243,.70) !important; border-bottom: 1px solid rgba(155,80,137,.12) !important; border-radius: 18px 18px 0 0; }
html[data-wall="liquid"] .boq-addbar { background: rgba(255,255,255,.55) !important; border-top: 1px solid rgba(140,150,196,.14) !important; border-radius: 0 0 18px 18px; box-shadow: none !important; }
html[data-wall="liquid"] .boq-scroll table.boq th { background: transparent; }

/* ---- overlays ----------------------------------------------------------------------------- */
html[data-wall="liquid"] .overlay, html[data-wall="liquid"] .nav-scrim { background: rgba(214,220,244,.42) !important; }
html[data-wall="liquid"] .modal, html[data-wall="liquid"] .tb-menu {
  background: rgba(255,255,255,.86) !important;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(140,150,196,.14), 0 34px 80px -24px rgba(80,90,150,.44) !important;
}
html[data-wall="liquid"] * { scrollbar-color: rgba(80,90,150,.24) transparent; }

/* ---- documents stay paper (same rule as crystal, restated so it wins over the panel radius) -- */
html[data-wall="liquid"] .boq-doc, html[data-wall="liquid"] .a4, html[data-wall="liquid"] .req-print {
  background: #fff !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
@media (max-width: 700px) { html[data-wall="liquid"] { --cg-blur: blur(16px) saturate(150%); } }
} /* end @media screen */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen { html[data-wall="liquid"] { --cg-glass: linear-gradient(170deg, #FDFDFF, #F4F5FB); --cg-glass-2: linear-gradient(170deg, #FBFBFE, #F2F3FA); } }
}
@media screen and (prefers-reduced-transparency: reduce) {
  html[data-wall="liquid"] { --cg-glass: linear-gradient(170deg, #FDFDFF, #F4F5FB); --cg-glass-2: linear-gradient(170deg, #FBFBFE, #F2F3FA); }
  html[data-wall="liquid"] body:after { display: none; }
}