/* Background-only treatment, separate from the shared button stylesheet. */
:root {
  --lake-image: url("./assets/ansgar-lake.jpg");
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

/* Only this photograph is blurred. Content and controls stay sharp. */
body::after {
  content: "";
  position: fixed;
  inset: -28px;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  background: var(--lake-image) center / cover no-repeat;
  filter: blur(10px) saturate(.78) contrast(.96);
}

body[data-lake-screen="workspace"]::after {
  opacity: .34;
}

body[data-lake-screen="auth"]::before {
  opacity: 0;
}

body[data-lake-screen="workspace"]::before {
  opacity: .12;
}

/* Fixed decoration also covers the gutters around the existing login layout. */
#auth-screen {
  position: relative;
  isolation: isolate;
  color: #f5fbff;
  background: transparent;
  z-index: 1;
}

#auth-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #193443;
  background-image:
    linear-gradient(90deg, rgba(5, 20, 31, .64), rgba(8, 25, 39, .24) 52%, rgba(5, 20, 31, .34)),
    var(--lake-image);
  background-size: cover;
  background-position: center;
  filter: saturate(.92) contrast(.98);
}

#auth-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 32, .04), rgba(4, 16, 27, .18));
}

#auth-screen > * {
  position: relative;
  z-index: 1;
}

/* JS projects the shoreline onto the same centered, cover-cropped photograph. */
#auth-screen > .lake-surface {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  --lake-x: 50%;
  --lake-y: 75%;
}

.lake-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 170px 65px at var(--lake-x) var(--lake-y), rgba(215, 242, 247, .13), transparent 80%);
  transition: opacity .3s ease;
}

#auth-screen[data-lake-active="true"] .lake-surface::before {
  opacity: 1;
}

.lake-ripple {
  position: absolute;
  width: 170px;
  height: 66px;
  border: 1px solid rgba(218, 244, 250, .46);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(221, 244, 249, .08), inset 0 0 8px rgba(221, 244, 249, .06);
  animation: lake-ripple 1.7s cubic-bezier(.16, .6, .28, 1) both;
}

.lake-ripple::after {
  content: "";
  position: absolute;
  inset: 8px 21px;
  border: 1px solid rgba(218, 244, 250, .23);
  border-radius: inherit;
}

@keyframes lake-ripple {
  0% { transform: translate(-50%, -50%) scale(.18); opacity: 0; }
  14% { opacity: .75; }
  100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }
}

#auth-screen .auth-brand strong,
#auth-screen .auth-story h2 {
  color: #f7fcff;
  text-shadow: 0 2px 20px rgba(2, 14, 24, .28);
}

#auth-screen .auth-brand > span:last-child,
#auth-screen .auth-story > p,
#auth-screen .auth-story-foot,
#auth-screen .auth-footer {
  color: #dfebf0;
}

#auth-screen .auth-story > .eyebrow {
  color: #c5dce5;
}

#auth-screen .auth-brand > span:last-child,
#auth-screen .auth-story-foot {
  border-color: rgba(220, 239, 245, .28);
}

#auth-screen .auth-form {
  background: rgba(249, 253, 255, .92);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 26px 80px rgba(2, 15, 26, .3), 0 2px 0 rgba(255, 255, 255, .42) inset;
  backdrop-filter: blur(16px);
}

#auth-screen .auth-form h1,
#auth-screen .auth-form > p,
#auth-screen .auth-form label,
#auth-screen .auth-form .muted {
  color: #233640;
}

#auth-screen .auth-form input {
  background: rgba(255, 255, 255, .9);
  border-color: #bfd0d6;
  color: #1e3038;
}

#auth-screen .auth-form input:focus {
  border-color: #177b63;
  box-shadow: 0 0 0 3px rgba(23, 123, 99, .15);
}

#auth-screen .auth-form .form-error {
  color: #a42f43;
}

#auth-screen .auth-access {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 430px;
  justify-self: end;
}

#auth-screen .auth-access .auth-form {
  padding: 26px 30px;
}

#auth-screen .auth-access .auth-form > p:last-child {
  margin-bottom: 0;
}

#auth-screen .auth-site-notice {
  padding: 12px 15px;
  border: 1px solid rgba(223, 235, 240, .2);
  border-radius: 8px;
  background: rgba(8, 28, 41, .4);
  color: #dfebf0;
}

#auth-screen .auth-site-notice p {
  font-size: 11px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

/* Static frosted workspace; no pointer motion or button-style overrides. */
#workbench {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  background: transparent;
  z-index: 0;
}

#workbench::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(249, 251, 252, .28), rgba(244, 249, 250, .38));
}

#workbench .sidebar.workspace-header,
#workbench .topbar {
  background: rgba(255, 255, 255, .88);
}

#workbench .panel,
#workbench .band,
#workbench .item-card,
#workbench .live-control-panel,
#workbench .live-dashboard-panel,
#workbench .metric {
  background: rgba(255, 255, 255, .89);
  box-shadow: 0 10px 28px rgba(32, 42, 48, .06), 0 1px 0 rgba(255, 255, 255, .5) inset;
}

#workbench .overview-dataset,
#workbench .workflow-strip,
#workbench .module-card,
#workbench .conversation-empty,
#workbench .analysis-item,
#workbench .live-explain,
#workbench .live-dashboard-metrics .metric,
#workbench .live-evidence-strip {
  background: rgba(246, 250, 251, .85);
}

#workbench .page-header .muted,
#workbench .dataset-note,
#workbench footer {
  color: #40545e;
}

#workbench .eyebrow {
  color: #53666d;
}

@media (max-width: 700px) {
  body::after {
    filter: blur(8px) saturate(.78) contrast(.96);
  }

  #auth-screen::before {
    background-image:
      linear-gradient(180deg, rgba(5, 20, 31, .62), rgba(8, 25, 39, .28) 52%, rgba(5, 20, 31, .46)),
      var(--lake-image);
  }

  #auth-screen .auth-form {
    background: rgba(249, 253, 255, .95);
    backdrop-filter: blur(12px);
  }

  #auth-screen .auth-access {
    max-width: none;
  }

  #auth-screen .auth-access .auth-form {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  #auth-screen > .lake-surface {
    display: none;
  }
}