/*
 * design-liquid.css — design "זכוכית נוזלית" (`tally:liquid-design`, 2026-10-30, Almon).
 *
 * Option E of the mock-up https://claude.ai/artifact/GNAmLut7PPtLuRHAYrJkde:
 * Apple-style liquid glass over a quiet mountain scene, every button made like
 * the floating corner button. The look comes from glass bending what is behind
 * it at the edge, not from low opacity.
 *
 * html[data-liquid] sits on top of M · בצבע (data-design="etched", data-etch="color"),
 * so every colour and chart rule of that design still applies. js/liquid.js adds the
 * layers (.lg-body bends, .lg-spec lights), the bend maps and the press. Only Chrome
 * and Samsung can bend (data-engine="chromium"); other browsers
 * get the same look with blur alone.
 */
.lg-body,.lg-ring,.lg-spec{display:none}
/* ---- shared parts ---- */
html[data-design][data-liquid]{
  --rim-top:rgba(255,255,255,.95);--rim-side:rgba(255,255,255,.42);--rim-low:rgba(255,255,255,.62);--rim-glow:rgba(255,255,255,.55);
  --rim-out:rgba(62,50,96,.13);--drop:rgba(46,34,84,.24);--spec:rgba(255,255,255,.55);--white-thumb:rgba(255,255,255,.86);
  --rim:inset 0 1.5px 1px -.5px var(--rim-top),inset 1.5px 0 1px -.5px var(--rim-side),inset -1.5px 0 1px -.5px var(--rim-side),inset 0 -1.5px 1px -.5px var(--rim-low),inset 0 9px 12px -9px var(--rim-glow),inset 0 -9px 12px -9px var(--rim-glow),0 0 0 .5px var(--rim-out);
  --lift:0 2px 3px rgba(46,34,84,.05),0 14px 28px -10px var(--drop);
  --etch:transparent;--thick:rgba(248,247,251,.96);
}
html[data-design][data-liquid][data-mode="dark"]{
  --rim-top:rgba(255,255,255,.5);--rim-side:rgba(255,255,255,.16);--rim-low:rgba(255,255,255,.24);--rim-glow:rgba(255,255,255,.14);
  --rim-out:rgba(0,0,0,.5);--drop:rgba(0,0,0,.55);--spec:rgba(255,255,255,.22);--white-thumb:rgba(255,255,255,.2);--thick:rgba(30,28,42,.96);
  --lift:0 2px 3px rgba(0,0,0,.2),0 16px 30px -10px var(--drop);
}
html[data-design][data-liquid] :is(.home-pane,.home-block,.project-card,.hero,.search-field,.home-act__ic::before){outline:none}
html[data-design][data-liquid] .home-act__ic::before{display:none}
html[data-design][data-liquid] .home-lens::after{display:none}
/* Layers sit behind the content of any glass piece */
html[data-design][data-liquid] :is(.halves__orb,.orb-menu__icon,.orb-menu__me,.home-act__ic,.home-pane__go,.home-pane,.home-block,.project-card,.hero,.status-filter__chip,.search-field,.home-chip,.segmented){isolation:isolate}
html[data-design][data-liquid] :is(.home-pane__go,.home-act__ic,.orb-menu__icon,.orb-menu__me,.home-pane,.home-block,.project-card,.status-filter__chip,.home-chip,.segmented,.search-field){position:relative}
html[data-design][data-liquid] .lg-spec{display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 90% at var(--mx,28%) var(--my,0%),var(--spec),transparent 62%);mix-blend-mode:soft-light}
/* the piece that presses and springs */

/* The clear liquid control: used by every option for the floating layer */
html[data-design][data-liquid] :is(.halves__orb,.orb-menu__icon,.home-act__ic,.home-pane__go){
  background:linear-gradient(170deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 48%,rgba(255,255,255,.12));
  backdrop-filter:blur(3px) saturate(1.7) brightness(1.04);-webkit-backdrop-filter:blur(3px) saturate(1.7) brightness(1.04);
  box-shadow:var(--rim),var(--lift);
}
html[data-design][data-liquid][data-mode="dark"] :is(.halves__orb,.orb-menu__icon,.home-act__ic,.home-pane__go){background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.015) 48%,rgba(255,255,255,.05))}
html[data-design][data-liquid] .halves__orb{inline-size:62px;block-size:62px}
html[data-design][data-liquid] .orb-menu__item.is-selected .orb-menu__icon{background:var(--white-thumb);color:var(--accent)}
html[data-design][data-liquid] .orb-menu__scrim{background:color-mix(in srgb,var(--bg) 42%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
/* Selected = Apple's bright capsule */
html[data-design][data-liquid] :is(.status-filter__chip.is-selected,.segmented__tab.is-selected,.sidebar__item.is-selected){background:var(--white-thumb);color:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 .5px var(--rim-out),0 6px 14px -6px var(--drop);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design][data-liquid] .status-filter__chip:not(.is-selected){background:linear-gradient(170deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:var(--rim);border-color:transparent}
html[data-design][data-liquid][data-mode="dark"] .status-filter__chip:not(.is-selected){background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
html[data-design][data-liquid] .btn--primary{background:linear-gradient(175deg,color-mix(in srgb,var(--accent) 82%,white 6%),color-mix(in srgb,var(--accent) 92%,black 4%));box-shadow:inset 0 1.5px 1px -.5px rgba(255,255,255,.7),inset 0 -1.5px 1px -.5px rgba(255,255,255,.25),inset 0 10px 12px -10px rgba(255,255,255,.5),0 10px 22px -10px color-mix(in srgb,var(--accent) 65%,transparent)}

/* ---- The scene, and panes that bend it ---- */
html[data-design][data-etch][data-liquid]{--room:url("../img/scene-light.webp")}
html[data-design][data-etch][data-liquid][data-mode="dark"]{--room:url("../img/scene-dark.webp")}
html[data-liquid] :is(.home-pane,.home-block,.project-card,.hero,.search-field){background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:var(--rim),var(--lift);border-radius:30px}
html[data-liquid] :is(.sidebar__rail,.sidebar__panel){background:rgba(255,255,255,.2);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);border-color:transparent;box-shadow:var(--rim)}
html[data-liquid][data-mode="dark"] :is(.sidebar__rail,.sidebar__panel){background:rgba(20,18,40,.3)}
html[data-design][data-liquid] :is(.halves__orb,.orb-menu__icon,.home-act__ic,.home-pane__go,.home-pane,.home-block,.project-card,.hero,.search-field){background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-liquid] :is(.halves__orb,.orb-menu__icon,.home-act__ic,.home-pane__go,.home-pane,.home-block,.project-card,.hero,.search-field)>.lg-body{display:block;position:absolute;inset:0;z-index:-2;border-radius:inherit;background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 50%,rgba(255,255,255,.1))}
html[data-liquid] :is(.home-pane,.home-block,.project-card,.hero,.search-field)>.lg-body{background:linear-gradient(170deg,rgba(255,255,255,.34),rgba(255,255,255,.2) 50%,rgba(255,255,255,.28))}
html[data-liquid][data-mode="dark"] :is(.home-pane,.home-block,.project-card,.hero,.search-field)>.lg-body{background:linear-gradient(170deg,rgba(34,30,56,.42),rgba(20,18,40,.3) 50%,rgba(30,28,50,.36))}
html[data-liquid][data-engine="other"] .lg-body{backdrop-filter:blur(6px) saturate(1.7);-webkit-backdrop-filter:blur(6px) saturate(1.7)}
html[data-liquid][data-engine="other"] :is(.home-pane,.home-block,.project-card,.hero,.search-field)>.lg-body{backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}

/* ---- Buttons hold still when pressed (Almon, 2026-10-31) ---- */
html[data-design][data-liquid] :is(.home-item__ic,.btn,.sidebar__item,.sidebar__add,.orb-menu__pill){isolation:isolate;position:relative}
html[data-design][data-liquid] :is(.halves__orb,.home-act__ic,.home-pane__go,.status-filter__chip,.home-chip,.btn,.orb-menu__icon,.orb-menu__pill,.sidebar__item,.sidebar__add,.home-item__ic,.segmented__tab,.home-act,.home-item,.orb-menu__item){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html[data-design][data-liquid] :is(.home-act:active,.home-item:active,button.home-pane__hero:active){opacity:1}

/* ---- Every button made like the corner button ---- */
html[data-design][data-etch][data-liquid] :is(.home-act__ic,.home-item__ic,.sidebar__rail .sidebar__item){border-radius:50%}
html[data-design][data-etch][data-liquid] .segmented__tab{border-radius:999px}
html[data-design][data-etch][data-liquid] .home-act__ic{inline-size:62px;block-size:62px}
html[data-design][data-etch][data-liquid] .home-item__ic{inline-size:40px;block-size:40px}
html[data-design][data-etch][data-liquid] :is(.home-item__ic,.sidebar__rail .sidebar__item:not(.is-selected),.btn,.sidebar__add,.home-chip,.orb-menu__pill){background:none;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--rim),var(--lift)}
html[data-design][data-etch][data-liquid] :is(.home-item__ic,.sidebar__rail .sidebar__item,.btn,.sidebar__add,.home-chip,.orb-menu__pill,.status-filter__chip)>.lg-body{display:block;position:absolute;inset:0;z-index:-2;border-radius:inherit;background:linear-gradient(170deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 48%,rgba(255,255,255,.13))}
html[data-design][data-etch][data-liquid][data-mode="dark"] :is(.home-item__ic,.sidebar__rail .sidebar__item,.btn,.sidebar__add,.home-chip,.orb-menu__pill,.status-filter__chip)>.lg-body{background:linear-gradient(170deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 48%,rgba(255,255,255,.06))}
html[data-design][data-etch][data-liquid][data-engine="other"] :is(.home-item__ic,.sidebar__rail .sidebar__item,.btn,.sidebar__add,.home-chip,.orb-menu__pill,.status-filter__chip)>.lg-body{backdrop-filter:blur(6px) saturate(1.7);-webkit-backdrop-filter:blur(6px) saturate(1.7)}
html[data-design][data-etch][data-liquid] :is(.btn,.sidebar__add,.home-chip,.orb-menu__pill,.status-filter__chip){border-radius:999px}
html[data-design][data-etch][data-liquid] .btn{color:var(--accent)}
html[data-design][data-etch][data-liquid] .btn--primary{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:700}
html[data-design][data-etch][data-liquid] .status-filter__chip:not(.is-selected){background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-design][data-etch][data-liquid] .sidebar__rail{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;position:relative;isolation:isolate}
html[data-design][data-etch][data-liquid] .sidebar__rail>.lg-body{display:block;position:absolute;inset:0;z-index:-2;background:rgba(255,255,255,.2);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5)}
html[data-design][data-etch][data-liquid][data-mode="dark"] .sidebar__rail>.lg-body{background:rgba(20,18,40,.3)}
html[data-design][data-etch][data-liquid] .sidebar__rail .sidebar__item{inline-size:46px;block-size:46px;display:grid;place-items:center;padding:0}
html[data-design][data-etch][data-liquid] .sidebar__panel .sidebar__item{border-radius:14px}

/* Browsers that cannot bend: the blur belongs on the button itself. */
html[data-design][data-liquid][data-engine="other"] :is(.halves__orb,.orb-menu__icon,.home-act__ic,.home-pane__go,.home-item__ic,.btn,.sidebar__add,.home-chip,.orb-menu__pill,.status-filter__chip){backdrop-filter:blur(6px) saturate(1.7);-webkit-backdrop-filter:blur(6px) saturate(1.7)}
html[data-design][data-liquid][data-engine="other"] :is(.halves__orb,.orb-menu__icon,.home-act__ic,.home-pane__go,.home-item__ic,.btn,.sidebar__add,.home-chip,.orb-menu__pill,.status-filter__chip)>.lg-body{backdrop-filter:none;-webkit-backdrop-filter:none}

/* What lies over the cards with text of its own must not let the text behind show through. */
html[data-design][data-liquid] :is(.suggest,.install-hint){background:var(--thick)}

/* Nothing moves under the finger: the app's own small nudges are off here too. */
html[data-design][data-liquid] :is(.btn:active,.project-card:active,.home-act:active .home-act__ic){transform:none}

/* A transparent border leaves a gap between the rim and its outer line, which reads as a double edge. */
html[data-design][data-etch][data-liquid] :is(.status-filter__chip,.home-chip){border:0;margin:1px}