/* ================================================================
   ChemEngLab — Refined Liquid Glass
   Consistent glass treatment across all module pages.
   Add once, before </head>:
     <link rel="stylesheet" href="glass-overrides.css">
   ================================================================ */

/* ── Result / output panels (.res) ─────────────────────────── */
.res {
  background:        rgba(255,255,255,0.62) !important;
  backdrop-filter:   blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border:            1.5px solid rgba(255,255,255,0.80) !important;
  border-radius:     18px !important;
  box-shadow:
    inset 0 1.5px 0  rgba(255,255,255,0.92),
    inset 0 0   20px rgba(255,255,255,0.12),
    inset 0 -1px 0   rgba(255,255,255,0.14),
    0  2px  4px rgba(0,0,0,0.03),
    0  8px 24px rgba(0,0,0,0.07),
    0 20px 48px rgba(0,0,0,0.04) !important;
}

/* Override liquid-glass.js lg-applied defaults on .res */
.res.lg-applied {
  border: 1.5px solid rgba(255,255,255,0.80) !important;
  box-shadow:
    inset 0 1.5px 0  rgba(255,255,255,0.92),
    inset 0 0   20px rgba(255,255,255,0.12),
    inset 0 -1px 0   rgba(255,255,255,0.14),
    0  2px  4px rgba(0,0,0,0.03),
    0  8px 24px rgba(0,0,0,0.07),
    0 20px 48px rgba(0,0,0,0.04) !important;
}

/* ── Result panel internals ─────────────────────────────────── */
.res h3 {
  font-size:     13px;
  font-weight:   700;
  margin-bottom: 10px;
  letter-spacing: -0.1px;
}
.kv {
  border-bottom: 1px solid rgba(0,0,0,0.055) !important;
  padding: 5px 0 !important;
}
.kv:last-child { border: none !important; }
.kv span:last-child {
  font-family: 'DM Mono', 'SF Mono', ui-monospace, monospace;
}

/* ── Tab navigation bar ─────────────────────────────────────── */
nav {
  background:      rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom:   1px solid rgba(255,255,255,0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 1px 0 rgba(200,224,208,0.25),
    0 2px 8px rgba(0,0,0,0.04) !important;
}
nav.lg-applied {
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 1px 0 rgba(200,224,208,0.25),
    0 2px 8px rgba(0,0,0,0.04) !important;
}
.tab {
  font-size:   12.5px !important;
  font-weight: 500    !important;
  padding:     10px 15px !important;
  transition:  color 0.15s ease, border-color 0.15s ease !important;
}

/* ── Dimensionless-group / info cards (.card) ───────────────── */
.card {
  background:      rgba(255,255,255,0.64) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border:          1.5px solid rgba(255,255,255,0.80) !important;
  box-shadow:
    inset 0 1.5px 0  rgba(255,255,255,0.88),
    inset 0 0   14px rgba(255,255,255,0.10),
    0  2px  6px rgba(0,0,0,0.03),
    0  8px 20px rgba(0,0,0,0.05) !important;
}
.card.lg-applied {
  border: 1.5px solid rgba(255,255,255,0.80) !important;
  box-shadow:
    inset 0 1.5px 0  rgba(255,255,255,0.88),
    inset 0 0   14px rgba(255,255,255,0.10),
    0  2px  6px rgba(0,0,0,0.03),
    0  8px 20px rgba(0,0,0,0.05) !important;
}

/* ── Form inputs & selects ──────────────────────────────────── */
.field input,
.field select {
  background:      rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border:          1.5px solid rgba(255,255,255,0.76) !important;
  border-radius:   10px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.88),
    inset 0 2px  6px rgba(0,0,0,0.035) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.field input:focus,
.field select:focus {
  outline:      none !important;
  border-color: rgba(255,255,255,0.95) !important;
  box-shadow:
    inset 0 1.5px 0  rgba(255,255,255,0.95),
    inset 0 2px  6px rgba(0,0,0,0.03),
    0 0 0 3px rgba(28,155,93,0.12) !important;
}

/* ── Primary button ─────────────────────────────────────────── */
.btn:not(.ghost) {
  background:  linear-gradient(158deg, rgba(66,144,255,0.90), rgba(38,104,216,0.92)) !important;
  border:      1.5px solid rgba(255,255,255,0.26) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 4px 14px rgba(38,104,216,0.28),
    0 1px  3px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(4px) !important;
  transition: box-shadow 0.15s ease, transform 0.12s ease !important;
}
.btn:not(.ghost):hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 6px 20px rgba(38,104,216,0.36),
    0 2px  6px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px) !important;
}
.btn:not(.ghost):active {
  transform: translateY(0) !important;
}

/* ── Ghost button ───────────────────────────────────────────── */
.btn.ghost {
  background:      rgba(54,134,253,0.09) !important;
  backdrop-filter: blur(8px) !important;
  border:          1.5px solid rgba(54,134,253,0.36) !important;
  border-radius:   11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 3px rgba(0,0,0,0.04) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.btn.ghost:hover {
  background:   rgba(54,134,253,0.16) !important;
  border-color: rgba(54,134,253,0.55) !important;
}

/* ── Panel/section headers inside result areas ──────────────── */
.sect {
  font-size:      10.5px !important;
  letter-spacing: 0.55px !important;
  border-bottom:  1px solid rgba(207,227,214,0.80) !important;
  padding-bottom: 6px !important;
  margin: 18px 0 10px !important;
}

/* ── Sticky page header — add specular shadow ───────────────── */
header[style*="sticky"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 1px 0 rgba(255,255,255,0.04),
    0 4px 24px rgba(0,0,0,0.18) !important;
}

/* ── Geometry / toggle buttons (sys designer) ───────────────── */
.geobtn {
  border:       1px solid rgba(207,227,214,0.70) !important;
  border-radius: 9px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60) !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.geobtn.on {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 0 0 2px rgba(28,155,93,0.14) !important;
}

/* ── Sit items (system builder elements) ────────────────────── */
.sit {
  backdrop-filter: blur(10px) !important;
  border:          1px solid rgba(207,227,214,0.65) !important;
  box-shadow:      inset 0 1px 0 rgba(255,255,255,0.60) !important;
}

/* ── Formula / code blocks ──────────────────────────────────── */
.formula {
  background:    rgba(240,247,242,0.80) !important;
  border:        1px solid rgba(207,227,214,0.75) !important;
  backdrop-filter: blur(6px) !important;
}

/* ── Professional pass: crisper corners, defined edges ──────── */
.res, .res.lg-applied { border-radius: 12px !important; }
.btn, button.btn { border-radius: 10px !important; }
.field input, .field select, .field textarea,
input[type="number"], input[type="text"], select, textarea {
  border-radius: 8px !important;
}
.card, .panel .card { border-radius: 16px !important; }

/* ================================================================
   Fluid motion layer — Apple-style easing on every state change
   ================================================================ */
:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-apple:    cubic-bezier(0.28, 0.11, 0.32, 1);
}
html { scroll-behavior: smooth; }

/* Page content fades in on load */
@keyframes cel-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: cel-page-in 0.45s var(--ease-apple) both; }

/* Tab panels cross-fade + rise on every switch
   (display:none -> block restarts the animation) */
@keyframes cel-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.panel.on { animation: cel-panel-in 0.5s var(--ease-out-expo) both; }

/* Result panels ease up when populated */
@keyframes cel-res-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}
.res:not(:empty) { animation: cel-res-in 0.55s var(--ease-out-expo) both; }

/* Tabs: smooth colour + indicator slide feel */
.tab { transition: color 0.25s var(--ease-apple), border-color 0.3s var(--ease-apple), background 0.25s var(--ease-apple) !important; }

/* Buttons: soft hover, gentle press */
.btn, button.btn, .geobtn, .sys-t {
  transition: transform 0.18s var(--ease-apple), box-shadow 0.35s var(--ease-apple),
              background 0.25s var(--ease-apple), border-color 0.25s var(--ease-apple),
              color 0.25s var(--ease-apple), opacity 0.25s var(--ease-apple) !important;
}
.btn:hover, button.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.btn:active, button.btn:active, .geobtn:active, .sys-t:active { transform: scale(0.97); }

/* Inputs: focused fields glow in softly */
.field input, .field select, .field textarea,
input[type="number"], input[type="text"], select, textarea {
  transition: border-color 0.25s var(--ease-apple), box-shadow 0.3s var(--ease-apple), background 0.25s var(--ease-apple) !important;
}
.field input:focus, input[type="number"]:focus, input[type="text"]:focus, textarea:focus {
  box-shadow: 0 0 0 3.5px rgba(28,155,93,0.10) !important;
}

/* Cards and result rows lift smoothly */
.card { transition: transform 0.35s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo), border-color 0.3s var(--ease-apple) !important; }

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

/* ── Selects: soft chips with a drawn chevron (replaces the native look) ──
   ".field select" variants included to out-rank the shorthand background
   rule above (equal specificity, later in the file wins). */
select, .field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236a8873' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  padding-right: 26px !important;
  cursor: pointer;
}
select:focus, .field select:focus {
  outline: none;
  border-color: #1c9b5d !important;
  box-shadow: 0 0 0 3.5px rgba(28,155,93,0.10) !important;
}

/* unit selects read as quiet mono chips beside their input */
select.tunit-sel, .field select.tunit-sel,
select[id$="-unit"], .field select[id$="-unit"],
select[data-k="Fu"], select[data-k="nu"], select[data-k="v0u"] {
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  color: #41564a !important;
  background-color: rgba(18,32,26,0.05) !important;
  border: 1px solid rgba(18,32,26,0.08) !important;
  letter-spacing: 0.2px;
  background-position: right 7px center !important;
  padding: 0 22px 0 9px !important;
  min-height: 38px;
  transition: background-color 0.2s ease, border-color 0.25s ease;
}
select.tunit-sel:hover, .field select.tunit-sel:hover,
select[id$="-unit"]:hover, .field select[id$="-unit"]:hover,
select[data-k="Fu"]:hover, select[data-k="nu"]:hover, select[data-k="v0u"]:hover {
  background-color: rgba(18,32,26,0.09) !important;
}