/* Vasslab shared page shell v0.3 */

:root {
  --vasslab-bg: #eef3f6;
  --vasslab-surface: #ffffff;
  --vasslab-surface-soft: #f6f8fa;
  --vasslab-ink: #17232c;
  --vasslab-muted: #64747e;
  --vasslab-line: #d6dde2;
  --vasslab-line-strong: #bccbd3;
  --vasslab-blue: #176f9e;
  --vasslab-blue-dark: #105878;
  --vasslab-blue-soft: #eaf4f8;
  --vasslab-water-line: #2f83b6;
  --vasslab-water-fill: #cfe5f2;
  --vasslab-egl: #b45309;
  --vasslab-critical-depth: #7c5aa6;
  --vasslab-normal-depth: #00897b;
  --vasslab-conjugate-depth: #c2416c;
  --vasslab-drawing-contrast-light: #ffffff;
  --vasslab-drawing-contrast-dark: #17232c;
  --vasslab-handle: #e8742b;
  --vasslab-valid: #257a58;
  --vasslab-warning: #9a3412;
  --vasslab-warning-bg: #fff7ed;

  --vasslab-page-max-width: 1220px;
  --vasslab-page-max-width-wide: 1440px;
  --vasslab-page-gutter: 20px;
  --vasslab-gap: 14px;
  --vasslab-gap-large: 18px;
  --vasslab-card-radius: 16px;
  --vasslab-radius-small: 12px;
  --vasslab-panel-padding: 16px;
  --vasslab-panel-padding-large: 20px;
  --vasslab-shadow: 0 10px 30px rgba(24, 47, 62, 0.08);
  --vasslab-shadow-small: 0 5px 18px rgba(24, 47, 62, 0.07);
}

html {
  scroll-padding-top: calc(var(--vasslab-menu-height, 58px) + 16px);
}

body.vasslab-page-root {
  margin: 0;
  min-width: 300px;
  background: var(--vasslab-bg);
  color: var(--vasslab-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

body.vasslab-page-root[data-vasslab-theme="dark"] {
  --vasslab-bg: #0e1820;
  --vasslab-surface: #16242e;
  --vasslab-surface-soft: #111e27;
  --vasslab-ink: #edf4f7;
  --vasslab-muted: #b8c7ce;
  --vasslab-line: #344954;
  --vasslab-line-strong: #526a77;
  --vasslab-blue: #71bce4;
  --vasslab-blue-dark: #9bd2ef;
  --vasslab-blue-soft: #173748;
  --vasslab-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
  --vasslab-shadow-small: 0 6px 20px rgba(0, 0, 0, 0.22);
}

body.vasslab-page-root *,
body.vasslab-page-root *::before,
body.vasslab-page-root *::after {
  box-sizing: border-box;
}

body.vasslab-page-root img,
body.vasslab-page-root canvas,
body.vasslab-page-root svg {
  max-width: 100%;
}

body.vasslab-page-root a:not(.vasslab-button) { color: inherit; }

body.vasslab-page-root :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--vasslab-blue) 28%, transparent);
  outline-offset: 3px;
}

.vasslab-page {
  width: min(
    calc(100% - 2 * var(--vasslab-page-gutter)),
    var(--vasslab-page-max-width)
  );
  margin-inline: auto;
}

.vasslab-page--wide {
  --vasslab-page-max-width: var(--vasslab-page-max-width-wide);
}

.vasslab-lab-intro {
  margin-block: clamp(16px, 3vw, 26px) 16px;
}

.vasslab-lab-intro h1 {
  max-width: 980px;
  margin: 0;
  color: var(--vasslab-ink);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.vasslab-lab-intro p {
  width: 100%;
  max-width: none;
  margin: 8px 0 0;
  color: var(--vasslab-muted);
  font-size: clamp(0.95rem, 1.5vw, 1.06rem);
  line-height: 1.55;
}

.vasslab-workspace {
  display: grid;
  gap: var(--vasslab-gap);
  align-items: start;
}

.vasslab-workspace--sidebar {
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.72fr);
}

.vasslab-workspace--dashboard {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
}

.vasslab-workspace--below { grid-template-columns: minmax(0, 1fr); }
.vasslab-sidebar { display: grid; gap: var(--vasslab-gap); align-content: start; }
.vasslab-stack { display: grid; gap: var(--vasslab-gap); }
.vasslab-stack--small { gap: 9px; }

.vasslab-model-shell,
.vasslab-card {
  min-width: 0;
  border: 1px solid var(--vasslab-line);
  border-radius: var(--vasslab-card-radius);
  background: var(--vasslab-surface);
  box-shadow: var(--vasslab-shadow-small);
}

.vasslab-model-shell {
  position: relative;
  overflow: hidden;
}

.vasslab-model-shell--padded { padding: var(--vasslab-panel-padding); }
.vasslab-model-shell--flat { box-shadow: none; }
.vasslab-model-shell--overflow-visible { overflow: visible; }

.vasslab-card { padding: var(--vasslab-panel-padding-large); }

.vasslab-card--notice {
  border-color: color-mix(in srgb, var(--vasslab-blue) 34%, var(--vasslab-line));
  background: color-mix(in srgb, var(--vasslab-blue) 5%, var(--vasslab-surface));
}

.vasslab-card--state { background: var(--vasslab-surface-soft); }

.vasslab-card--warning {
  border-color: color-mix(in srgb, var(--vasslab-warning) 30%, var(--vasslab-line));
  background: var(--vasslab-warning-bg);
  color: var(--vasslab-warning);
}

.vasslab-card--about {
  width: 100%;
  max-width: none;
  margin-top: var(--vasslab-gap-large);
  margin-inline: 0;
}

.vasslab-card h2,
.vasslab-card h3,
.vasslab-card-title {
  margin: 0;
  color: var(--vasslab-ink);
  letter-spacing: -0.025em;
}

.vasslab-card h2,
.vasslab-card-title { font-size: 1.08rem; }
.vasslab-card h3 { font-size: 0.98rem; }

.vasslab-card p { margin: 0; color: var(--vasslab-muted); }
.vasslab-card p + p { margin-top: 12px; }
.vasslab-card h2 + p,
.vasslab-card h3 + p,
.vasslab-card-title + p { margin-top: 8px; }

.vasslab-card-lead {
  color: var(--vasslab-ink) !important;
  font-weight: 700;
}

.vasslab-card ul,
.vasslab-card ol {
  margin: 10px 0 0;
  padding-left: 1.2rem;
  color: var(--vasslab-muted);
}

.vasslab-card li + li { margin-top: 7px; }

.vasslab-info-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.75fr);
  gap: var(--vasslab-gap);
  margin-top: var(--vasslab-gap-large);
}

.vasslab-info-grid--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vasslab-section { margin-top: var(--vasslab-gap-large); }

.vasslab-section-heading {
  margin: 0 0 10px;
  font-size: 1.12rem;
  letter-spacing: -0.025em;
}

.vasslab-equation {
  margin-block: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.vasslab-equation--compact { margin-block: 7px; }
.vasslab-equation--left { text-align: left; }

.vasslab-canvas-wrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
  touch-action: auto;
}

.vasslab-canvas-wrap.is-dragging { touch-action: none; }

.vasslab-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}

.vasslab-scroll-x {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vasslab-details {
  border-top: 1px solid var(--vasslab-line);
  margin-top: 14px;
  padding-top: 10px;
}

.vasslab-details summary {
  cursor: pointer;
  color: var(--vasslab-muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.vasslab-details[open] summary { margin-bottom: 10px; }

.vasslab-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

vasslab-menu:not(:defined) {
  display: block;
  min-height: 58px;
  border-bottom: 1px solid rgba(132, 156, 170, 0.28);
  background: rgba(238, 243, 246, 0.96);
}

vasslab-footer:not(:defined) { display: block; min-height: 130px; }

@media (max-width: 1000px) {
  .vasslab-workspace--sidebar,
  .vasslab-workspace--dashboard { grid-template-columns: 1fr; }

  .vasslab-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --vasslab-page-gutter: 10px; }
  .vasslab-lab-intro { margin-block: 15px 12px; padding-inline: 2px; }
  .vasslab-card { padding: 17px; }
  .vasslab-info-grid--equal { grid-template-columns: 1fr; }
  .vasslab-model--edge-mobile {
    margin-inline: calc(-1 * var(--vasslab-page-gutter));
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

@media (max-width: 440px) {
  .vasslab-card { padding: 15px; }
}

@media (prefers-color-scheme: dark) {
  body.vasslab-page-root[data-vasslab-theme="auto"] {
    --vasslab-bg: #0e1820;
    --vasslab-surface: #16242e;
    --vasslab-surface-soft: #111e27;
    --vasslab-ink: #edf4f7;
    --vasslab-muted: #b8c7ce;
    --vasslab-line: #344954;
    --vasslab-line-strong: #526a77;
    --vasslab-blue: #71bce4;
    --vasslab-blue-dark: #9bd2ef;
    --vasslab-blue-soft: #173748;
    --vasslab-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
    --vasslab-shadow-small: 0 6px 20px rgba(0, 0, 0, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}