/* ===========================================================================
 * D'leaps Studio OS - Apple-style glass, iMac wallpaper or white (V24, bolt-on)
 *
 * V24: two backdrops, switched from the top bar and remembered per browser:
 *   iMac  (default) the reference wallpaper - a soft lavender and peach bokeh
 *         (/glass-bokeh.webp, already on the server) - with macOS glass on it:
 *         milky panes, bright hairline rims, and the hero widgets as clear
 *         tinted glass with white type, like iMac desktop widgets.
 *   White the V23 look below.
 * html[data-wall="imac"] is set by a two-line script in index.html before
 * anything paints; without it the page simply stays white.
 * The weather card is gone; its place is Turnover + Profit (.sd-hfin).
 *
 * The page is white again. Surfaces are Apple's light "materials": translucent
 * white with a strong blur and saturation boost, a hairline edge, a soft
 * two-layer shadow, and an inner top highlight. Two very faint pools of the
 * logo's turquoise and magenta sit behind everything so the glass has
 * something to frost; set --gm-pools: none for pure white.
 *
 * Accent: the logo's turquoise, deepened to #127F89 where it carries white
 * text (4.75:1). Magenta #CE3F70 for highlights (4.6:1 with white).
 * Controls follow Apple: grey segmented tracks with a white selected pill,
 * filled rounded fields, switches with a big white knob, solid accent buttons.
 *
 * The logo is shown exactly as the file is: no plate, outline, halo or filter.
 * The sidebar collapses on its own (see sidebar-rail.js): icons by default,
 * it opens over the page while the pointer is on it, and the edge handle
 * pins it open when you want it to stay.
 *
 * Loaded AFTER the bundle CSS in index.html, so it only overrides.
 * Roll back: point the <link> in index.html at /glass-v23.css (white only),
 * /glass-v22.css (turquoise +
 * magenta bokeh), /glass-v21.css, /glass-v20.css, /glass-v19.css ...
 *
 * Kept from the handover: everything sits inside @media screen (the one
 * @media print block in the bundle is untouched), document sheets stay solid
 * white, one blur layer deep, token NAMES unchanged for the bolt-on widgets.
 * =========================================================================== */

@media screen {

:root {
  --gm-turq:        #62E8EF;
  --gm-turq-deep:   #127F89;
  --gm-mag:         #E05886;
  --gm-mag-deep:    #CE3F70;
  --gm-ink2:        #6E6E73;                 /* Apple secondary label: 5.1:1 on white */
  --gm-fill:        rgba(118,118,128,.12);   /* Apple tertiary fill: tracks, wells */
  --gm-fill-2:      rgba(118,118,128,.08);
  --gm-sep:         rgba(60,60,67,.12);      /* Apple separator */
  --gm-pools:       radial-gradient(48vw 40vw at 92% -6%,  rgba(98,232,239,.16) 0%, transparent 62%),
                    radial-gradient(44vw 40vw at -6% 104%, rgba(224,88,134,.10) 0%, transparent 62%),
                    radial-gradient(30vw 26vw at 40% 52%,  rgba(98,232,239,.05) 0%, transparent 70%);

  --lg-field:       #FBFBFD;

  /* materials */
  --lg-fill:        linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.68) 100%);
  --lg-fill-soft:   linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.60) 100%);
  --lg-rim:         linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  --lg-blur:        blur(30px) saturate(180%);

  --lg-shadow:      inset 0 1px 0 rgba(255,255,255,.9),
                    0 0 0 .5px rgba(0,0,0,.06),
                    0 1px 2px rgba(0,0,0,.04),
                    0 10px 30px -8px rgba(0,0,0,.10);
  --lg-shadow-hi:   inset 0 1px 0 rgba(255,255,255,.9),
                    0 0 0 .5px rgba(0,0,0,.07),
                    0 2px 4px rgba(0,0,0,.05),
                    0 18px 40px -10px rgba(0,0,0,.14);
  --lg-shadow-ctl:  0 0 0 .5px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.06);
  --lg-shadow-tint: 0 1px 2px rgba(0,0,0,.08), 0 6px 16px -6px rgba(18,127,137,.45);
  --lg-well:        none;

  /* accent */
  --lg-tint:        #127F89;
  --lg-tint-rim:    #127F89;
  --lg-primary-ink: #ffffff;
  --lg-mag:         #CE3F70;
  --lg-mag-rim:     #CE3F70;

  /* hero widgets (clock, weather) */
  --gm-hero:        linear-gradient(165deg, #138A94 0%, #0D5A63 100%);   /* weather: white type >= 4.6:1 */
  --gm-hero-ink:    #ffffff;

  --lg-r-slab:      22px;
  --lg-r-inner:     14px;

  --glass-bg:        rgba(255,255,255,.76);
  --glass-bg-strong: rgba(255,255,255,.90);
  --glass-bg-soft:   rgba(255,255,255,.60);
  --glass-edge:      rgba(0,0,0,.06);
  --glass-line:      var(--gm-sep);
  --glass-blur:      var(--lg-blur);
  --glass-shadow:    var(--lg-shadow);
  --glass-shadow-hi: var(--lg-shadow-hi);
  --glass-radius:    var(--lg-r-slab);

  --surface:   rgba(255,255,255,.80);
  --border:    rgba(0,0,0,.06);
  --rule:      var(--gm-sep);
  --paper2:    var(--gm-fill-2);
  --muted:     var(--gm-ink2);
  --graph-ink: var(--gm-ink2);
}

/* ---- the page: white ------------------------------------------------------------- */
html { background: var(--lg-field); }
body { background: transparent; }
body:before {
  opacity: 1; z-index: -1;
  background: var(--gm-pools), var(--lg-field);
  background-size: auto; background-repeat: no-repeat;
}
#root, .shell, .shell-body { background: transparent; }
.main:before { display: none !important; }   /* the notebook margin rule */
.muted:has(+ .page-title) { color: var(--gm-ink2) !important; letter-spacing: .14em; }

/* ---- surfaces ----------------------------------------------------------------------- */
.card, .stat, .tile, .where-card, .promise-card, .cl-card, .cl-panel,
.ch-list, .ch-main, .lw-glass {
  background: var(--lg-fill) !important;
  border: 0 !important;
  border-radius: var(--lg-r-slab) !important;
  box-shadow: var(--lg-shadow) !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover, .stat:hover, .cl-card:hover { box-shadow: var(--lg-shadow-hi) !important; }
.cl-card:hover, .promise-card:hover { transform: translateY(-1px); }

.card .card, .card .stat, .card .cl-card, .modal .card, .sidebar .card,
.cl-panel .cl-card, .ch-main .card, .lw-glass .lw-glass {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--gm-fill-2) !important;
  border-radius: var(--lg-r-inner) !important;
  box-shadow: none !important;
}

/* ---- chrome ---------------------------------------------------------------------------- */
.sidebar, .topbar {
  background: var(--lg-fill-soft) !important;
  border: 0 !important;
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
}
.sidebar-foot { background: transparent !important; border-top-color: var(--gm-sep) !important; }
@media (min-width: 901px) {
  .sidebar {
    top: 12px; margin: 12px 0 12px 12px; height: calc(100vh - 24px);
    border-radius: 24px;
    box-shadow: var(--lg-shadow) !important;
  }
  .topbar {
    top: 12px; margin: 12px 12px 0 14px;
    border-radius: 999px;
    box-shadow: var(--lg-shadow-ctl) !important;
  }
}
@media (max-width: 900px) {
  .sidebar { border-radius: 0 24px 24px 0; background: rgba(255,255,255,.94) !important; box-shadow: 0 20px 60px rgba(0,0,0,.18) !important; }
  .topbar  { box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 6px 18px -10px rgba(0,0,0,.2) !important; }
}
.sidebar-head .sb-logo-full { height: 48px !important; width: auto; max-width: 100%; }   /* size only; the logo itself is untouched */

.tb-user {
  background: rgba(255,255,255,.7) !important;
  border: 0 !important; border-radius: 999px !important;
  box-shadow: var(--lg-shadow-ctl);
}
.tb-icon { border-radius: 999px; }
.tb-icon:hover, .tb-link:hover { background: var(--gm-fill-2) !important; }

/* sidebar items: Apple source-list selection */
.navlink { border-radius: 11px !important; transition: background .15s ease; }
.navlink:hover { background: var(--gm-fill-2); }
.navlink.active {
  background: rgba(98,232,239,.20) !important;
  border: 0 !important; box-shadow: none !important;
  color: var(--ink) !important; font-weight: 600;
}
.navlink.active svg { color: var(--gm-turq-deep); }
.navlink.active:after { display: none !important; }   /* the hand-drawn underline: clean list selection instead */

/* ---- classic dashboard tiles --------------------------------------------------------------- */
.dash-tile {
  --mauve-tint: rgba(98,232,239,.10); --mag-tint: rgba(224,88,134,.08); --paper2: var(--gm-fill-2);
  border: 0 !important;
  border-radius: var(--lg-r-slab) !important;
  box-shadow: var(--lg-shadow);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.dash-tile[style*="228, 250, 251"] { background: rgba(98,232,239,.12) !important; }
.dash-tile[style*="231, 245, 238"] { background: rgba(255,255,255,.78) !important; }
.dash-tile[style*="251, 241, 227"] { background: rgba(224,88,134,.08) !important; }
.dash-tile-link:hover .dash-tile { box-shadow: var(--lg-shadow-hi); transform: translateY(-1px); }

/* ---- buttons ---------------------------------------------------------------------------------- */
.btn, .lw-btn {
  border-radius: 999px !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn:active, .lw-btn:active { transform: scale(.97); }
.btn-ghost, .icon-btn, .lw-btn.g, .lw-chip {
  background: rgba(255,255,255,.9) !important;
  border: 0 !important;
  color: var(--ink) !important;
  box-shadow: var(--lg-shadow-ctl) !important;
}
.btn-ghost:hover, .icon-btn:hover, .lw-btn.g:hover, .lw-chip:hover { background: #fff !important; }
.btn-primary, .lw-btn.p {
  background: var(--lg-tint) !important; border: 0 !important;
  color: var(--lg-primary-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--lg-shadow-tint) !important;
}
.btn-accent, .lw-btn.m {
  background: var(--lg-mag) !important; border: 0 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.08), 0 6px 16px -6px rgba(206,63,112,.45) !important;
}
.btn-primary:hover, .btn-accent:hover, .lw-btn.p:hover, .lw-btn.m:hover { filter: brightness(1.08); }
.btn[disabled], .lw-btn[disabled] { opacity: .45; filter: none; }

/* ---- segmented controls: Apple's grey track, white selected pill ------------------------------ */
.lead-views, .proc-tabs, .tk-tabs, .lw-views:not(:has(.lw-btn)), .lw-tabs {
  gap: 2px !important; padding: 3px;
  border-radius: 999px;
  background: var(--gm-fill);
  border: 0; box-shadow: none;
  width: fit-content; max-width: 100%;
}
.lead-view, .proc-tab, .tk-tab, .lw-views:not(:has(.lw-btn)) .lw-chip, .lw-tabs .lw-chip {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--ink) !important; border-radius: 999px !important;
}
.lead-view:hover, .proc-tab:hover, .tk-tab:hover,
.lw-views:not(:has(.lw-btn)) .lw-chip:hover, .lw-tabs .lw-chip:hover { background: rgba(255,255,255,.5) !important; }
.lead-view.active, .proc-tab.active, .tk-tab.on, .tk-tab.active, .cl-view.active,
.lw-chip.on, .lw-views .lw-chip.on, .lw-tabs .lw-chip.on {
  background: #fff !important; color: var(--ink) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04), 0 0 0 .5px rgba(0,0,0,.04) !important;
}
.cl-view, .pill, .ch-chip {
  background: rgba(255,255,255,.85) !important; border: 0 !important;
  box-shadow: var(--lg-shadow-ctl) !important;
}

/* ---- fields: filled, no border, accent focus ring --------------------------------------------- */
.input, select.input, textarea.input, .lw-in, .lw-search, .login-field input {
  background: var(--gm-fill-2) !important;
  border: 0 !important; box-shadow: none !important;
  transition: box-shadow .15s ease, background .15s ease;
}
input.input, select.input, .lw-search { border-radius: 12px !important; padding-left: .9rem; padding-right: .9rem; }
textarea.input { border-radius: 14px !important; }
.cl-search .input { padding-left: 2.3rem !important; }
.input::placeholder, .lw-in::placeholder, .lw-search::placeholder { color: #8E8E93; }
.input:focus, select.input:focus, textarea.input:focus, .lw-in:focus, .lw-search:focus, .login-field input:focus {
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(98,232,239,.45), 0 0 0 1px rgba(18,127,137,.6) !important;
  outline: none;
}

/* switches: Apple proportions, turquoise when on */
label:not(.ch-pick) > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 46px; height: 28px; margin: 0; border-radius: 999px;
  position: relative; cursor: pointer;
  background: rgba(120,120,128,.16); border: 0; box-shadow: none;
  transition: background .2s ease;
}
label:not(.ch-pick) > input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06);
  transition: transform .25s cubic-bezier(.3,1.3,.5,1);
}
label:not(.ch-pick) > input[type="checkbox"]:checked { background: #1FB5BF; }
label:not(.ch-pick) > input[type="checkbox"]:checked::after { transform: translateX(18px); }
label:not(.ch-pick) > input[type="checkbox"]:focus-visible { outline: 3px solid rgba(98,232,239,.6); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gm-turq-deep); }

/* ---- tables -------------------------------------------------------------------------------------- */
.table th { background: transparent; border-bottom-color: var(--gm-sep); color: var(--gm-ink2); }
.table td { border-bottom-color: var(--gm-sep); }
.table tr:hover td { background: rgba(98,232,239,.06); }

/* ---- secondary surfaces --------------------------------------------------------------------------- */
.lead-card, .cl-act, .cl-proj, .ch-item:hover, .ch-compose, .ch-search,
.tk-first, .tk-msg, .tk-reply, .tk-row:hover, .lead-log, .sum-box, .boq-addbar, .doc-toolbar {
  background: rgba(255,255,255,.86) !important;
  border-color: var(--gm-sep) !important;
}
.lead-card { border-radius: var(--lg-r-inner) !important; box-shadow: var(--lg-shadow-ctl) !important; transition: box-shadow .18s ease, transform .18s ease; }
.lead-card:hover { box-shadow: var(--lg-shadow-hi) !important; transform: translateY(-1px); }
.column-head { border-bottom-color: var(--gm-sep); }

/* ---- overlays ----------------------------------------------------------------------------------------- */
.overlay, .nav-scrim {
  background: rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal, .tb-menu {
  background: rgba(255,255,255,.88) !important; border: 0 !important;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 24px 70px -12px rgba(0,0,0,.28) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.modal { border-radius: 26px !important; }
.tb-menu { border-radius: 16px !important; }

/* ---- the home-page dashboards (studio-dashboards.js) ------------------------------------------------------ */
/* clock: a light widget with large dark numerals; weather: Apple-Weather style deep-teal gradient */
#dl-sd-root .sd-hclock {
  background: var(--lg-fill) !important; color: var(--ink) !important; text-shadow: none !important;
  box-shadow: var(--lg-shadow) !important; border: 0 !important;
}
#dl-sd-root .sd-hclock .tm { font-weight: 200; }
#dl-sd-root .sd-hclock .dt { color: var(--gm-turq-deep); }
#dl-sd-root .sd-hglass:after { display: none; }
#dl-sd-root .sd-hfin { border: 0 !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 34px -12px rgba(13,90,99,.55) !important; text-shadow: none; }
#dl-sd-root .sd-hfin .big.neg { color: #FFD0DD; }
/* icon tiles: iOS Settings style, filled colour with a white glyph */
#dl-sd-root .sd-kic { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.12); border-radius: 9px; }
#dl-sd-root .sd-kic.mint  { background: linear-gradient(180deg, #2BC0C9, #1592A0); }
#dl-sd-root .sd-kic.pink  { background: linear-gradient(180deg, #F06C9B, #D9417A); }
#dl-sd-root .sd-kic.lav   { background: linear-gradient(180deg, #C25AAA, #9A3A8A); }
#dl-sd-root .sd-kic.peach { background: linear-gradient(180deg, #1E8C93, #11666E); }
/* rings: Activity style, the track is the ring's own colour, faint */
#dl-sd-root .sd-ring.mint .tr  { stroke: rgba(18,163,174,.16); }
#dl-sd-root .sd-ring.pink .tr  { stroke: rgba(212,65,122,.16); }
#dl-sd-root .sd-ring.lav .tr   { stroke: rgba(176,58,134,.16); }
#dl-sd-root .sd-ring.peach .tr { stroke: rgba(22,127,136,.16); }
#dl-sd-root .sd-chip { box-shadow: var(--lg-shadow-ctl); }
#dl-sd-root .sd-chip.on { background: #fff; color: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
#dl-sd-root .sd-tabs { background: var(--gm-fill); padding: 3px; border-radius: 999px; gap: 2px; }
#dl-sd-root .sd-tabs .sd-chip:not(.on) { background: transparent; box-shadow: none; }
@media (max-width: 700px) { #dl-sd-root .sd-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } #dl-sd-root .sd-tabs::-webkit-scrollbar { display: none; } }
#dl-sd-root .sd-task, #dl-sd-root .sd-row { background: rgba(255,255,255,.75); box-shadow: 0 0 0 .5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.05); }
#dl-sd-root .sd-in { background: var(--gm-fill-2); border: 0; box-shadow: none; border-radius: 12px; }
#dl-sd-root .sd-brief { background: rgba(255,255,255,.78); box-shadow: var(--lg-shadow); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }

/* ---- the collapsed sidebar ------------------------------------------------------------------
 * The bundle's rail (68px icons) opens on hover. While NOT pinned, that peek now
 * floats over the page instead of pushing it sideways: the open sidebar keeps a
 * 68px footprint via a negative right margin. Pinned open, it takes its full width.
 * sidebar-rail.js adds the edge handle and remembers the choice per browser. */
@media (min-width: 901px) {
  .sidebar { transition: width .22s ease, margin .22s ease, box-shadow .22s ease; overflow: visible !important; }   /* the nav scrolls itself; the edge handle must not be clipped */
  body:has(.tb-rail-toggle[aria-label="Pin sidebar open"]) .sidebar.is-open {
    margin-right: -184px;
    background: rgba(255,255,255,.88) !important;   /* floating over content: near-solid */
    box-shadow: var(--lg-shadow), 0 30px 70px -20px rgba(0,0,0,.22) !important;
  }
  .sidebar.is-rail .sidebar-head { padding: .2rem 0 !important; justify-content: center; }
  .sidebar.is-rail .navlink.active { border-radius: 16px !important; }
}
#dl-rail-handle {
  position: absolute; top: 34px; right: -14px; z-index: 45;
  width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--gm-turq-deep);
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .2s ease, color .15s ease;
}
#dl-rail-handle:hover { color: var(--gm-mag); transform: scale(1.08); }
#dl-rail-handle:focus-visible { outline: 2px solid var(--gm-mag); outline-offset: 2px; }
#dl-rail-handle svg { transition: transform .22s ease; }
body:has(.tb-rail-toggle[aria-label="Pin sidebar open"]) #dl-rail-handle svg { transform: rotate(180deg); }   /* not pinned: the chevron points open */
@media (max-width: 900px) { #dl-rail-handle { display: none; } }

/* ===========================================================================================
 * iMAC MODE - the reference wallpaper behind macOS glass
 * =========================================================================================== */
html[data-wall="imac"] {
  --lg-field:       #A5A2DE;
  --lg-fill:        linear-gradient(165deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.60) 100%);
  --lg-fill-soft:   linear-gradient(165deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.48) 100%);
  --lg-blur:        blur(34px) saturate(185%);
  --lg-shadow:      inset 0 1px 0 rgba(255,255,255,.95),
                    inset 0 0 0 .5px rgba(255,255,255,.65),
                    0 1px 2px rgba(30,20,80,.06),
                    0 16px 40px -14px rgba(30,20,80,.32);
  --lg-shadow-hi:   inset 0 1px 0 #fff,
                    inset 0 0 0 .5px rgba(255,255,255,.75),
                    0 2px 6px rgba(30,20,80,.08),
                    0 24px 50px -16px rgba(30,20,80,.40);
  --lg-shadow-ctl:  inset 0 0 0 .5px rgba(255,255,255,.7), 0 1px 2px rgba(30,20,80,.08), 0 4px 12px -4px rgba(30,20,80,.22);
  --gm-ink2:        #4F4C47;                  /* darker secondary: >= 4.7:1 on glass over the darkest lights */
  --gm-fill:        rgba(255,255,255,.38);
  --gm-fill-2:      rgba(255,255,255,.52);
  --gm-sep:         rgba(40,30,90,.12);
  --gm-hero:        linear-gradient(165deg, rgba(74,64,150,.60) 0%, rgba(44,40,112,.56) 100%);   /* white type >= 4.5:1 over the lightest lights */
  --surface:        rgba(255,255,255,.70);
}
html[data-wall="imac"] body:before { background: #A5A2DE url("/glass-bokeh.webp") center 40% / cover no-repeat; }
@media (max-aspect-ratio: 4/5) {
  html[data-wall="imac"] body:before { background-image: url("/glass-bokeh-m.webp"); background-position: center 30%; }
}
html[data-wall="imac"] .page-title, html[data-wall="imac"] .sd-hello { color: var(--ink); }
html[data-wall="imac"] .muted:has(+ .page-title), html[data-wall="imac"] #dl-sd-root .sd-date { color: var(--ink) !important; opacity: .85; }
html[data-wall="imac"] .navlink.active { background: rgba(255,255,255,.72) !important; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.8), 0 1px 3px rgba(30,20,80,.10) !important; }
html[data-wall="imac"] .navlink:hover { background: rgba(255,255,255,.42); }
html[data-wall="imac"] .lead-view.active, html[data-wall="imac"] .proc-tab.active, html[data-wall="imac"] .tk-tab.on,
html[data-wall="imac"] .tk-tab.active, html[data-wall="imac"] .lw-chip.on, html[data-wall="imac"] #dl-sd-root .sd-chip.on {
  background: rgba(255,255,255,.95) !important;
}
html[data-wall="imac"] .input, html[data-wall="imac"] .lw-in, html[data-wall="imac"] .lw-search, html[data-wall="imac"] .login-field input {
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7) !important;
}
html[data-wall="imac"] .input:focus, html[data-wall="imac"] .lw-in:focus, html[data-wall="imac"] .lw-search:focus, html[data-wall="imac"] .login-field input:focus {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 4px rgba(98,232,239,.55), 0 0 0 1px rgba(18,127,137,.7) !important;
}
html[data-wall="imac"] .sidebar, html[data-wall="imac"] .topbar { box-shadow: var(--lg-shadow) !important; }
html[data-wall="imac"] .modal, html[data-wall="imac"] .tb-menu { background: rgba(255,255,255,.86) !important; }
/* hero widgets: clear tinted glass with white type, like the desktop widgets in the reference */
html[data-wall="imac"] #dl-sd-root .sd-hglass {
  background: var(--gm-hero) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(20,12,60,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 .5px rgba(255,255,255,.5), 0 20px 46px -18px rgba(30,20,80,.5) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
}
html[data-wall="imac"] #dl-sd-root .sd-hclock .dt { color: #fff; }
html[data-wall="imac"] #dl-sd-root .sd-hglass:after { display: block; }
html[data-wall="imac"] #dl-sd-root .sd-hfin .big.neg { color: #FFC4D6; }
html[data-wall="imac"] #dl-sd-root .sd-brief { background: rgba(255,255,255,.70); }
html[data-wall="imac"] .lg-art { opacity: .5; mix-blend-mode: soft-light; }
html[data-wall="imac"] .login-right { background: rgba(255,255,255,.66) !important; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 .5px rgba(255,255,255,.7), 0 30px 80px -24px rgba(30,20,80,.45) !important; }
html[data-wall="imac"] .login-left h1, html[data-wall="imac"] .login-left em { color: var(--ink); }

/* the backdrop switch (wall-switch.js) sits in the top bar with the other icons */
#dl-wall-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
#dl-wall-btn:hover { background: var(--gm-fill-2); }
#dl-wall-btn:focus-visible { outline: 3px solid rgba(98,232,239,.7); outline-offset: 2px; }

/* ---- documents stay paper ----------------------------------------------------------------------- */
.boq-doc, .a4, .doc-viewport .a4, .req-print {
  background: #fff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

.btn:focus-visible, .navlink:focus-visible, .lead-view:focus-visible, .proc-tab:focus-visible,
.tk-tab:focus-visible, .lw-chip:focus-visible, .lw-btn:focus-visible, .icon-btn:focus-visible {
  outline: 3px solid rgba(98,232,239,.7); outline-offset: 2px;
}
* { scrollbar-color: rgba(0,0,0,.22) transparent; }
@media (max-width: 700px) { :root { --lg-blur: blur(20px) saturate(170%); } }

/* ===========================================================================================
 * LOGIN - white page, one glass sheet, the drawn room behind it. Logo untouched.
 * =========================================================================================== */
.login-wrap { position: relative; background: transparent !important; isolation: isolate; }
.login-left  { background: transparent !important; grid-column: 1; grid-row: 1; z-index: 1; }
.login-right {
  grid-column: 2; grid-row: 1; z-index: 2;
  align-self: center; justify-self: center;
  width: min(420px, calc(100% - 3rem));
  min-height: 0 !important; margin: 2rem 0;
  padding: 2.5rem 2.3rem 2.3rem !important;
  border-radius: 28px;
  background: rgba(255,255,255,.72) !important;
  border: 0;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.06), 0 30px 80px -24px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.lg-art {
  grid-column: 2; grid-row: 1; z-index: 0;
  position: relative; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; opacity: .7;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%);
}
.lg-art svg { width: 100%; height: 100%; max-height: 100vh; display: block; }
.login-right .eyebrow { color: var(--gm-turq-deep) !important; }
.login-right h1 { font-weight: 400 !important; }
.login-field label { color: var(--gm-ink2) !important; }
.login-field input { border-radius: 14px !important; padding: .85rem 1rem !important; font-size: 1rem !important; }
.login-btn {
  border-radius: 14px !important; padding: 1rem !important; margin-top: .4rem;
  background: var(--lg-tint) !important; border: 0 !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--lg-shadow-tint) !important;
  transition: transform .12s ease, filter .15s ease;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:active { transform: scale(.98); }
.login-btn:focus-visible { outline: 3px solid rgba(98,232,239,.7); outline-offset: 3px; }
.login-left .promise-grid { gap: .9rem; }
.login-left .promise-card { padding: 1.05rem 1.1rem !important; border-radius: 20px !important; }
.login-left .promise-ic {
  width: 48px !important; height: 48px !important; border-radius: 12px !important;
  display: grid !important; place-items: center;
  background: rgba(98,232,239,.16) !important;
  margin-bottom: .6rem !important;
}
.login-left .promise-card:nth-child(even) .promise-ic { background: rgba(224,88,134,.10) !important; }
.login-left .promise-ic svg { width: 32px; height: 32px; display: block; overflow: visible; }

.lg-art .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lg-draw 1.9s cubic-bezier(.45,.05,.3,1) forwards; }
.lg-art .wash { opacity: 0; animation: lg-wash 1.2s ease forwards; animation-delay: 1.5s; }
.lg-art .note { opacity: 0; animation: lg-wash .8s ease forwards; animation-delay: 2.2s; }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }
@keyframes lg-wash { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lg-art .ln { animation: none; stroke-dashoffset: 0; }
  .lg-art .wash, .lg-art .note { animation: none; opacity: 1; }
  .card, .cl-card, .promise-card, .lead-card, .dash-tile { transition: none !important; transform: none !important; }
}
@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr !important; min-height: 100vh; }
  .login-right, .lg-art { grid-column: 1; }
  .login-right { margin: 1.5rem 0; padding: 2rem 1.5rem 1.8rem !important; border-radius: 26px; }
  .lg-art { position: fixed; inset: 0; -webkit-mask-image: none; mask-image: none; opacity: .35; }
}

} /* end @media screen */

/* ---- fallbacks -------------------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen {
    :root { --surface: #ffffff; --glass-bg: #ffffff; --glass-bg-strong: #ffffff;
            --lg-fill: linear-gradient(#ffffff,#ffffff); --lg-fill-soft: linear-gradient(#fafafc,#fafafc); }
  }
}
@media screen and (prefers-reduced-transparency: reduce) {
  :root { --surface: #ffffff; --glass-bg: #ffffff; --glass-bg-strong: #ffffff; --glass-bg-soft: #fafafc;
          --lg-fill: linear-gradient(#ffffff,#ffffff); --lg-fill-soft: linear-gradient(#fafafc,#fafafc); --gm-pools: none; }
  .sidebar, .topbar, .card, .stat, .tile, .modal, .tb-menu, .cl-card, .dash-tile, .overlay,
  .lw-glass, .login-right, .promise-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ===========================================================================
 * V26.1 - green retired across the ERP, every mode. The bundle's --success
 * (profile "saved" banner, chat "available" dot) becomes brand magenta.
 * =========================================================================== */
:root { --success: #B8326A; }
.profile-ok { background: #FBE3EE !important; color: #9B1F4A !important; }