/* V2: expressive glass on the shell, stable reading planes in the workspace. */
:root {
  --glass-fill: rgba(246, 251, 245, .38);
  --dialog-title-glass: rgba(247, 250, 244, .94);
  --dialog-title-mid: rgba(243, 248, 240, .58);
  --glass-ink: #263f31;
  --glass-muted: #3c5746;
  --glass-rim: rgba(255, 255, 255, .82);
  --glass-inner: rgba(255, 255, 255, .46);
  --glass-shadow: rgba(50, 77, 57, .14);
  --glass-edge-dark: rgba(59, 86, 66, .13);
  --glass-selected: rgba(255, 255, 255, .52);
  --glass-hover: rgba(255, 255, 255, .26);
  --scene-base: #d6e4d9;
  --scene-green: #80b69a;
  --scene-mint: #c5e1d2;
  --scene-warm: #c8b99a;
  --scene-texture-opacity: .13;
  --scene-blend: luminosity;
}
:root[data-theme="graphite"] {
  --glass-fill: rgba(25, 38, 29, .52);
  --dialog-title-glass: rgba(27, 37, 30, .94);
  --dialog-title-mid: rgba(29, 41, 32, .60);
  --glass-ink: #f6fff5;
  --glass-muted: #eaf5e9;
  --glass-rim: rgba(224, 247, 225, .40);
  --glass-inner: rgba(233, 255, 236, .21);
  --glass-shadow: rgba(0, 12, 6, .36);
  --glass-edge-dark: rgba(0, 14, 6, .44);
  --glass-selected: rgba(10, 24, 15, .20);
  --glass-hover: rgba(220, 246, 224, .08);
  --scene-base: #253d30;
  --scene-green: #3e6e50;
  --scene-mint: #647f66;
  --scene-warm: #776e4f;
  --scene-texture-opacity: .26;
  --scene-blend: screen;
}

.material-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ground);
}
.material-scene::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--sidebar) + 76px);
  background:
    radial-gradient(ellipse at 24% 17%, var(--scene-mint) 0%, transparent 49%),
    radial-gradient(ellipse at 80% 59%, var(--scene-green) 0%, transparent 57%),
    radial-gradient(ellipse at -30% 100%, var(--scene-warm) 0%, transparent 52%),
    var(--scene-base);
}
.material-scene::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--sidebar) + 60px);
  background: url("assets/flow-texture.png") 61% center / auto 110% no-repeat;
  opacity: var(--scene-texture-opacity);
  mix-blend-mode: var(--scene-blend);
}
.glass-fold {
  position: absolute;
  left: -160px;
  top: 23%;
  width: 450px;
  height: 250px;
  border-radius: 46% 54% 66% 34%;
  background: var(--scene-mint);
  opacity: .66;
  transform: rotate(-33deg);
  box-shadow: 0 32px 60px rgba(21, 54, 30, .1);
}
.glass-fold + .glass-fold {
  left: -155px;
  top: 70%;
  width: 415px;
  height: 220px;
  transform: rotate(38deg);
  opacity: .50;
  background: var(--scene-warm);
}
.main-content { position: relative; z-index: 1; background: var(--ground); }

.side-rail {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-top-color: var(--glass-inner);
  background: var(--glass-fill);
  color: var(--glass-ink);
  -webkit-backdrop-filter: blur(24px) saturate(1.32);
  backdrop-filter: blur(24px) saturate(1.32);
  box-shadow: 0 12px 32px -16px var(--glass-shadow);
}
.side-rail::before {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  opacity: 1;
  background: linear-gradient(116deg,
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .08) 26%,
    transparent 42%,
    transparent 62%,
    rgba(255, 255, 255, .065) 100%);
}
.side-rail::after {
  content: none;
}
:root[data-theme="graphite"] .side-rail::before {
  background: linear-gradient(116deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.015) 26%,
    transparent 45%,
    transparent 65%,
    rgba(255,255,255,.025));
}
:root[data-theme="graphite"] .nav-item.is-active {
  background: var(--glass-selected);
}
.side-rail > * { position: relative; z-index: 2; }
.rail-brand b { color: var(--glass-ink); }
.rail-brand small, .rail-caption, .theme-link, .login-preview-button,
.material-label small { color: var(--glass-muted); }
.material-label strong { color: var(--glass-ink); }
.rail-bottom { border-top-color: var(--glass-inner); }
.rail-brand img { box-shadow: none; border: 1px solid transparent; }
.nav-item { color: var(--glass-muted); }
.nav-item:hover { background: var(--glass-hover); color: var(--glass-ink); }
.nav-item.is-active {
  color: var(--glass-ink);
  background: var(--glass-selected);
  border: 1px solid transparent;
  box-shadow: none;
}
.side-rail .rail-live { background: currentColor; color: var(--glass-ink); }
.side-rail :focus-visible { outline-color: var(--focus-ring); }

/* A thicker transparent rim makes the floating material visible around solid content. */
.detail-dialog {
  border-radius: 23px;
  border: 1px solid var(--glass-rim);
  border-right-color: var(--glass-inner);
  border-bottom-color: var(--glass-edge-dark);
  background: linear-gradient(180deg, var(--dialog-title-glass) 0%, var(--glass-fill) 44%, var(--glass-fill) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  backdrop-filter: blur(30px) saturate(1.3);
  box-shadow: 0 28px 90px -12px var(--glass-shadow), inset 0 1.5px 1px var(--glass-rim), inset 1px 0 1px var(--glass-inner);
}
.detail-dialog::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-heading {
  padding-top: 25px;
  padding-bottom: 24px;
  background: linear-gradient(180deg, var(--dialog-title-glass) 0%, var(--dialog-title-mid) 64%, transparent 100%);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.detail-dialog .dialog-heading {
  border-bottom: 0;
  box-shadow: none;
}
.dialog-heading h2 { color: var(--ink); }
.dialog-content { margin: 16px; border-radius: 12px; }
.dialog-heading .icon-button, .dialog-back {
  background: var(--glass-hover);
  border-color: var(--control);
}

.login-form-panel { isolation: isolate; overflow: hidden; }
.login-form-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 20%, var(--scene-mint), transparent 43%),
    radial-gradient(ellipse at 15% 70%, var(--scene-green), transparent 45%);
  opacity: .36;
}
.login-card {
  background: var(--glass-fill);
  border-color: var(--glass-rim);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(25px) saturate(1.25);
  backdrop-filter: blur(25px) saturate(1.25);
  box-shadow: 0 18px 50px -20px var(--glass-shadow), inset 0 1.5px 1px var(--glass-rim), inset 1px 0 1px var(--glass-inner);
}
.login-card input { background: var(--paper); }

@media (max-width: 980px) {
  .side-rail::after { inset: 3px; }
  .side-rail { border-radius: 19px; }
}
@media (max-width: 650px) {
  .side-rail {
    border-radius: 18px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    backdrop-filter: blur(28px) saturate(1.3);
    overflow: hidden;
  }
  .side-rail::after { border-radius: 14px; }
  .nav-item { border-radius: 11px; }
  .material-scene { display: none; }
  .dialog-content { margin: 10px; padding: 17px 13px; }
  .detail-dialog { border-radius: 18px; }
  .dialog-heading { padding: 21px 18px; }
  .login-card { padding: 28px 24px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side-rail { background: var(--raised); color: var(--ink); }
  .side-rail .nav-item, .side-rail .rail-brand b, .side-rail .material-label strong { color: var(--ink); }
  .side-rail .rail-brand small, .side-rail .rail-caption, .side-rail .theme-link,
  .side-rail .login-preview-button, .side-rail .material-label small { color: var(--muted); }
  .detail-dialog, .dialog-heading, .login-card { background: var(--raised); }
}
@media (prefers-reduced-transparency: reduce) {
  .material-scene { display: none; }
  .side-rail, .detail-dialog, .dialog-heading, .login-card { background: var(--raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .side-rail::before, .side-rail::after { display: none; }
  .side-rail .nav-item, .side-rail .rail-brand b, .side-rail .material-label strong { color: var(--ink); }
  .side-rail .rail-brand small, .side-rail .rail-caption, .side-rail .theme-link,
  .side-rail .login-preview-button, .side-rail .material-label small { color: var(--muted); }
}