/* ==========================================================================
   AdsorpFit — stylesheet
   Palette is built around water: deep ocean for structure, aqua for
   interaction, a warm coral for fitted curves so they separate cleanly from
   experimental points in both light and dark themes.
   ========================================================================== */

/* Palette inherited from BrineFlow so the two SWAT · UTOP tools read as one
   family: the same cyan accent (#37c8cf), the same deep navy structure, the
   same two-tone wordmark. The light theme is a derived companion — the
   accent is darkened to #12839a there so it still passes contrast on white. */
:root {
  --ocean-950: #03141f;
  --ocean-900: #060e17;
  --ocean-800: #0b1a28;
  --ocean-700: #12374d;
  --ocean-600: #1a93a8;
  --ocean-500: #2aa9bd;
  --aqua-400: #37c8cf;
  --aqua-300: #6fdce1;
  --aqua-200: #a6ebee;
  --foam-100: #e2f2f5;
  --foam-50: #f1fafb;

  --coral: #d4453c;
  --coral-dark: #a8322b;
  --amber: #d38b1c;
  --violet: #6f5a9e;
  --green: #1f8f61;

  --bg: #eaf2f6;
  --surface: #ffffff;
  --surface-2: #f5fafc;
  --surface-glass: rgba(255, 255, 255, 0.84);
  --border: #cbdde6;
  --border-strong: #a3c2d0;
  --text: #0d2530;
  --text-2: #41606e;
  --text-3: #74919f;
  --text-muted: #5b7a8c;
  --accent: #12839a;
  --shadow-sm: 0 1px 2px rgba(6, 44, 67, 0.06), 0 2px 6px rgba(6, 44, 67, 0.05);
  --shadow: 0 2px 8px rgba(6, 44, 67, 0.08), 0 8px 24px rgba(6, 44, 67, 0.07);
  --shadow-lg: 0 8px 32px rgba(6, 44, 67, 0.13), 0 2px 8px rgba(6, 44, 67, 0.08);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo,
          Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  --bg: #060e17;
  --surface: #0b1a28;
  --surface-2: #0f2233;
  --surface-glass: rgba(12, 24, 37, 0.88);
  --border: #1e394f;
  --border-strong: #27506e;
  --text: #dceaf3;
  --text-2: #9fc0d0;
  --text-3: #6f8fa3;
  --text-muted: #7797ac;
  --foam-100: #0f2233;
  --foam-50: #0b1a28;
  --accent: #37c8cf;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  --coral: #ff6058;
  --coral-dark: #d4453c;
  --amber: #ffc46b;
  --green: #35c48a;
}

* { box-sizing: border-box; }

/* Both html and body need this: body alone still lets the document scroll
   horizontally in some engines, and the fixed wave layer is wider than the
   viewport by design. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ==========================================================================
   Water background
   ========================================================================== */

#water-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(92, 198, 216, 0.28), transparent 62%),
    radial-gradient(1000px 600px at 88% 4%, rgba(27, 140, 184, 0.22), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 62%, rgba(154, 221, 232, 0.30) 100%);
}

:root[data-theme="dark"] #water-bg {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(27, 140, 184, 0.22), transparent 62%),
    radial-gradient(1000px 600px at 88% 4%, rgba(10, 90, 126, 0.28), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, rgba(8, 72, 99, 0.5) 100%);
}

#caustics {
  position: absolute;
  inset: -10%;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  filter: blur(1px);
}
:root[data-theme="dark"] #caustics { opacity: 0.22; }

.waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30vh;
  min-height: 200px;
}

.waves svg { width: 200%; height: 100%; display: block; }

.wave-layer { will-change: transform; }
.wave-1 { animation: drift 26s linear infinite; opacity: 0.30; }
.wave-2 { animation: drift 38s linear infinite reverse; opacity: 0.22; }
.wave-3 { animation: drift 52s linear infinite; opacity: 0.16; }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* rising bubbles — a small number, cheap to animate */
/* Each bubble takes its hue from --bub, set per element in water.js, so the
   drift reads as a spread of water tones rather than one flat colour. The
   highlight stays white to keep the glassy look. */
.bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.30) 16%,
      color-mix(in srgb, var(--bub, #5cc6d8) 42%, transparent) 52%,
      color-mix(in srgb, var(--bub, #5cc6d8) 14%, transparent) 82%,
      transparent 100%);
  border: 1px solid color-mix(in srgb, var(--bub, #5cc6d8) 55%, transparent);
  box-shadow:
    inset -3px -4px 8px color-mix(in srgb, var(--bub, #5cc6d8) 30%, transparent),
    0 0 10px color-mix(in srgb, var(--bub, #5cc6d8) 22%, transparent);
  animation: rise linear infinite;
  will-change: transform, opacity;
}

/* Opacity is lower than it was because there are now many more bubbles:
   density and per-bubble weight trade off against each other, and the point
   is a background you can ignore while reading. */
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.65); opacity: 0; }
  12%  { opacity: 0.46; }
  50%  { transform: translate3d(18px, -46vh, 0) scale(1); }
  88%  { opacity: 0.30; }
  100% { transform: translate3d(-12px, -102vh, 0) scale(1.12); opacity: 0; }
}

/* Motion is governed by data-motion and by nothing else. The operating
   system's reduce-motion setting picks the default for a first-time
   visitor, which the inline script in the head of index.html applies
   before the first paint, so the attribute is always present by the time
   any of this is evaluated. Deciding it in two places is what produced the
   original bug, where a stylesheet rule keyed on the system setting
   outranked the reader's own choice and no setting in the app could win. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.shell { max-width: none; margin: 0; padding: 0 18px 80px; }

header.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: var(--surface-glass);
  border-bottom: 1px solid var(--border);
}

.masthead-inner {
  max-width: none;
  margin: 0;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}

nav.tabs { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }

nav.tabs button {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 9px; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
nav.tabs button:hover { background: var(--foam-100); color: var(--text); }
nav.tabs button[aria-selected="true"] {
  background: var(--ocean-600); color: #fff;
  box-shadow: 0 1px 3px rgba(16, 115, 160, .4);
}

.icon-btn {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--text-2); width: 40px; height: 40px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer;
  transition: background .16s, color .16s;
}
.icon-btn:hover { background: var(--foam-100); color: var(--text); }

/* ==========================================================================
   Panels
   ========================================================================== */

.grid-2 { display: grid; gap: 18px; align-items: start; }
@media (max-width: 1150px) { .grid-2 { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
}

.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.panel-head h2, .panel-head h3 {
  margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px;
}
.panel-head .hint { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.panel-body { padding: 17px; }
.panel.collapsed .panel-body { display: none; }

.section-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.65px; color: var(--text-muted);
  margin: 20px 0 9px;
}
.section-title:first-child { margin-top: 0; }

/* ==========================================================================
   Form controls
   ========================================================================== */

label.field { display: block; margin-bottom: 12px; }
label.field > span.lbl {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); margin-bottom: 5px;
}
label.field > span.sub {
  display: block; font-size: 11.5px; color: var(--text-muted);
  font-weight: 400; margin-top: 3px; line-height: 1.45;
}

input[type="text"], input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ocean-500);
  box-shadow: 0 0 0 3px rgba(27, 140, 184, 0.16);
}
textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; resize: vertical; }
input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--ocean-600); }

.row { display: grid; gap: 11px; }
.row.c2 { grid-template-columns: 1fr 1fr; }
.row.c3 { grid-template-columns: 1fr 1fr 1fr; }
.row.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .row.c3, .row.c4 { grid-template-columns: 1fr 1fr; } }

.btn {
  appearance: none; font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 17px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: all .15s; display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(145deg, var(--ocean-600), var(--ocean-800));
  border-color: var(--ocean-800); color: #fff;
  box-shadow: 0 1px 3px rgba(8, 72, 99, .35);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.09); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ocean-600); }
.btn.ghost:hover { background: var(--foam-100); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn.danger { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 35%, var(--border)); }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--foam-100); color: var(--text-2);
}
.chip.good { background: color-mix(in srgb, var(--green) 14%, transparent);
             color: var(--green); border-color: color-mix(in srgb, var(--green) 34%, transparent); }
.chip.warn { background: color-mix(in srgb, var(--amber) 18%, transparent);
             color: #8a6116; border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
:root[data-theme="dark"] .chip.warn { color: var(--amber); }
.chip.bad  { background: color-mix(in srgb, var(--coral) 14%, transparent);
             color: var(--coral); border-color: color-mix(in srgb, var(--coral) 34%, transparent); }
.chip.info { background: color-mix(in srgb, var(--ocean-500) 13%, transparent);
             color: var(--ocean-700); border-color: color-mix(in srgb, var(--ocean-500) 30%, transparent); }
:root[data-theme="dark"] .chip.info { color: var(--aqua-300); }

/* ==========================================================================
   Model picker
   ========================================================================== */

.model-group { margin-bottom: 16px; }
.model-group > .gh {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
}
.model-group > .gh .t {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
}
.model-group > .gh .line { flex: 1; height: 1px; background: var(--border); }

.model-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background .13s, border-color .13s;
}
.model-item:hover { background: var(--surface-2); border-color: var(--border); }
.model-item input { margin-top: 3px; flex: none; accent-color: var(--ocean-600); width: 15px; height: 15px; }
.model-item .mi-body { flex: 1; min-width: 0; }
.model-item .mi-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.model-item .mi-eq {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-item .mi-info {
  flex: none; width: 20px; height: 20px; border-radius: 5px; border: none;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.model-item .mi-info:hover { background: var(--foam-100); color: var(--ocean-600); }

/* ==========================================================================
   Results
   ========================================================================== */

table.data {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.data th {
  text-align: left; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.45px; color: var(--text-muted);
  padding: 8px 11px; border-bottom: 2px solid var(--border);
  white-space: nowrap; background: var(--surface-2);
}
table.data td {
  padding: 8px 11px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
table.data tr.best td { background: color-mix(in srgb, var(--green) 9%, transparent); }
table.data tr.best td:first-child { box-shadow: inset 3px 0 0 var(--green); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

.result-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 14px; overflow: hidden; background: var(--surface);
}
.result-card > .rh {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
.result-card > .rh .rank {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--ocean-700); color: #fff;
}
.result-card > .rh .rname { font-weight: 700; font-size: 14px; }
.result-card > .rh .rstats { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.result-card > .rb { padding: 15px; }
.result-card.collapsed > .rb { display: none; }

.equation {
  font-family: var(--serif); font-size: 15px; text-align: center;
  padding: 13px; margin: 0 0 14px;
  background: var(--foam-50); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow-x: auto;
}

.interp { margin: 0; padding: 0; list-style: none; }
.interp li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 11px;
  font-size: 13.5px; line-height: 1.62; color: var(--text);
}
.interp li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--aqua-400);
}
.interp li strong { font-weight: 700; }
.interp code { font-family: var(--mono); font-size: 12.5px;
  background: var(--foam-100); padding: 1px 5px; border-radius: 4px; }

.callout {
  display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.55; margin-bottom: 11px;
  border: 1px solid; align-items: flex-start;
}
.callout .ci { flex: none; font-size: 15px; line-height: 1.3; }
.callout.warn { background: color-mix(in srgb, var(--amber) 11%, var(--surface));
                border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.callout.bad  { background: color-mix(in srgb, var(--coral) 9%, var(--surface));
                border-color: color-mix(in srgb, var(--coral) 35%, transparent); }
.callout.info { background: color-mix(in srgb, var(--ocean-500) 8%, var(--surface));
                border-color: color-mix(in srgb, var(--ocean-500) 28%, transparent); }
.callout.good { background: color-mix(in srgb, var(--green) 9%, var(--surface));
                border-color: color-mix(in srgb, var(--green) 32%, transparent); }

/* ==========================================================================
   Figure workspace
   ========================================================================== */

.figure-shell { display: grid; grid-template-columns: 1fr 290px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .figure-shell { grid-template-columns: 1fr; } }

#plot-area {
  min-height: 220px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.style-stack { max-height: 74vh; overflow-y: auto; padding-right: 5px; }
.style-stack::-webkit-scrollbar { width: 8px; }
.style-stack::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

details.sty {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; background: var(--surface); overflow: hidden;
}
details.sty > summary {
  padding: 8px 12px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); list-style: none;
  display: flex; align-items: center; gap: 7px;
}
details.sty > summary::-webkit-details-marker { display: none; }
details.sty > summary::before {
  content: "▸"; font-size: 10px; color: var(--text-muted);
  transition: transform .16s;
}
details.sty[open] > summary::before { transform: rotate(90deg); }
details.sty > .sb { padding: 12px; border-top: 1px solid var(--border); }

.mini-label { font-size: 11.5px; font-weight: 600; color: var(--text-2);
  display: block; margin-bottom: 3px; }
.mini-field { margin-bottom: 10px; }
.inline-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  margin-bottom: 8px; cursor: pointer; }
.inline-check input { accent-color: var(--ocean-600); width: 15px; height: 15px; }

/* ==========================================================================
   Loading / boot
   ========================================================================== */

/* The veil is deliberately translucent. The water behind it is the only
   thing moving during the ten to twenty seconds Pyodide takes to arrive,
   and hiding it behind an opaque panel made the wait feel broken. */
:root { --boot-veil: rgba(234, 242, 246, 0.70); }
:root[data-theme="dark"] { --boot-veil: rgba(6, 14, 23, 0.72); }

#boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--boot-veil);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: opacity .5s, visibility .5s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-card {
  text-align: center; width: min(560px, calc(100vw - 32px));
  padding: 30px 34px 26px;
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-title {
  font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1.1;
}
.boot-title b { color: var(--accent); font-weight: 700; }
.boot-tagline {
  font-size: 13px; color: var(--text-2); margin: 6px 0 4px;
}
.boot-msg { font-size: 12.5px; color: var(--text-3); margin-top: 9px; min-height: 18px; }
.boot-bar { height: 4px; background: var(--border); border-radius: 2px;
  overflow: hidden; margin-top: 16px; }
.boot-bar > i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--aqua-400), var(--ocean-600));
  transition: width .4s ease; }

/* While the runtime downloads, the page behind the veil steps back so the
   water is the only thing moving. Without this the frosted panels show
   through and the motion the card sits on is lost. #boot precedes them all
   in the markup, which is what makes the sibling selector possible. */
#boot ~ header.masthead, #boot ~ main, #boot ~ footer.site-foot {
  transition: opacity .7s ease .2s;
}
#boot:not(.done) ~ header.masthead,
#boot:not(.done) ~ main,
#boot:not(.done) ~ footer.site-foot { opacity: 0; pointer-events: none; }

/* One sentence of real adsorption science, changed every few seconds.
   Held at a fixed height so nothing below it shifts when the text swaps.
   The text lives in its own span: as a bare text node beside <b> it would
   become a second flex item and break into a column of its own. */
.boot-fact {
  min-height: 46px; margin: 4px auto 0; max-width: 480px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.8px; line-height: 1.55; color: var(--text-2);
  transition: opacity .45s ease;
}
.boot-fact.swap { opacity: 0; }
.boot-fact b { color: var(--text); font-weight: 600; }
.boot-fact sub { font-size: .72em; line-height: 0; vertical-align: -0.28em; }

.boot-brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.boot-brand .mark { height: 21px; opacity: .9; }
.boot-brand .vr { height: 22px; }
.boot-by { font-size: 11.5px; color: var(--text-3); margin: 8px 0 0; line-height: 1.5; }
.boot-by b { color: var(--text-2); font-weight: 600; }
.boot-privacy { font-size: 10.8px; color: var(--text-3); margin: 9px 0 0; line-height: 1.45; }

/* ---------- the adsorption figure on the loading screen ---------- */
/* overflow is clipped so the adsorbate enters cleanly at the top edge
   instead of appearing over the tagline on its way down */
.boot-art { width: 100%; height: auto; margin: 12px 0 2px; display: block;
  overflow: hidden; }
.ba-slab { fill: var(--text-3); opacity: .30; }
.ba-sites rect { fill: var(--accent); opacity: .45; }
.ba-hatch path { stroke: var(--text-3); stroke-width: 1.4; opacity: .30; }
.ba-rule { stroke: var(--border-strong); stroke-width: 1; opacity: .5; }
.ba-axis { stroke: var(--text-3); stroke-width: 1.4; opacity: .7; }
.ba-asym { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .55; }
.ba-curve { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.ba-lab { fill: var(--text-3); font-size: 11px; font-family: var(--sans); }
.ba-mol circle { fill: var(--accent); opacity: 0; }
.ba-pts circle { fill: var(--accent); opacity: 0; }

.ba-mol circle { animation: ba-adsorb 9s cubic-bezier(.34, .1, .3, 1) infinite; }
.ba-pts circle { animation: ba-pop 9s linear infinite; }
.ba-curve { stroke-dasharray: 237; animation: ba-draw 9s ease-out infinite; }

@keyframes ba-adsorb {
  0%        { transform: translateY(-126px); opacity: 0; }
  5%        { opacity: .9; }
  18%       { transform: translateY(0); }
  21%       { transform: translateY(-4px); }
  24%, 86%  { transform: translateY(0); opacity: .9; }
  96%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes ba-pop {
  0%, 3%    { opacity: 0; }
  9%, 86%   { opacity: .9; }
  96%, 100% { opacity: 0; }
}
@keyframes ba-draw {
  0%        { stroke-dashoffset: 237; opacity: 0; }
  5%        { opacity: 1; }
  48%, 88%  { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* With motion off, the figure still says what it means: a full monolayer
   and a finished curve, simply held still. */
:root[data-motion="off"] .ba-mol circle,
:root[data-motion="off"] .ba-pts circle,
:root[data-motion="off"] .ba-curve { animation: none; opacity: .9; }
:root[data-motion="off"] .ba-curve { stroke-dashoffset: 0; opacity: 1; }

/* No prefers-reduced-motion rule here on purpose. The rule above, keyed on
   data-motion, is the only thing that stops this figure, and the attribute
   is set before the first paint. A reader who asks for reduced motion at
   the operating system level gets data-motion="off" by default and so gets
   the still figure; a reader who then chooses Full gets the animation. */

.spinner-inline {
  width: 14px; height: 14px; border: 2px solid var(--border);
  border-top-color: var(--ocean-600); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.empty {
  text-align: center; padding: 48px 24px; color: var(--text-muted);
  font-size: 13.5px;
}
.empty .big { font-size: 34px; margin-bottom: 10px; opacity: 0.45; }

.modal-back {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: rgba(3, 32, 47, 0.55); backdrop-filter: blur(3px); padding: 24px;
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-width: 640px; width: 100%;
  max-height: 84vh; overflow-y: auto;
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { font-weight: 650; color: var(--text-2); }
.kv dd { margin: 0; }

.tiny { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

.toast-host { position: fixed; bottom: 22px; right: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--ocean-900); color: #fff; padding: 11px 16px;
  border-radius: var(--radius-sm); font-size: 13px; box-shadow: var(--shadow-lg);
  animation: slidein .25s ease; max-width: 380px;
}
.toast.bad { background: var(--coral-dark); }
.toast.good { background: var(--green); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ==========================================================================
   Preference-driven modes
   Layout, density and motion are all driven by data-* attributes on <html>,
   set by prefs.js, so switching any of them is a single attribute write with
   no re-render of the page.
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
:root[data-layout="right"] .grid-2 {
  grid-template-columns: 1fr minmax(360px, 420px);
}
:root[data-layout="right"] .grid-2 > .col-left  { order: 2; }
:root[data-layout="right"] .grid-2 > .col-right { order: 1; }

:root[data-layout="stack"] .grid-2 { grid-template-columns: 1fr; }
:root[data-layout="stack"] .figure-shell { grid-template-columns: 1fr; }
:root[data-layout="stack"] .style-stack { max-height: none; }

/* --- density ------------------------------------------------------------ */
:root[data-density="compact"] {
  --radius: 9px; --radius-sm: 6px; --radius-lg: 13px;
}
:root[data-density="compact"] body { font-size: 13.5px; line-height: 1.5; }
:root[data-density="compact"] .panel-body { padding: 12px; }
:root[data-density="compact"] .panel-head { padding: 9px 13px; }
:root[data-density="compact"] .panel { margin-bottom: 12px; }
:root[data-density="compact"] label.field { margin-bottom: 8px; }
:root[data-density="compact"] table.data td,
:root[data-density="compact"] table.data th { padding: 5px 8px; }
:root[data-density="compact"] .model-item { padding: 5px 8px; }
:root[data-density="compact"] .interp li { margin-bottom: 7px; }
:root[data-density="compact"] .shell { padding: 0 10px 56px; }

/* --- motion ------------------------------------------------------------- */
:root[data-motion="calm"] .wave-1 { animation-duration: 70s; opacity: .18; }
:root[data-motion="calm"] .wave-2 { animation-duration: 95s; opacity: .13; }
:root[data-motion="calm"] .wave-3 { animation-duration: 130s; opacity: .09; }
:root[data-motion="calm"] #bubbles { display: none; }
:root[data-motion="calm"] #caustics { opacity: .12; }

:root[data-motion="off"] .wave-1,
:root[data-motion="off"] .wave-2,
:root[data-motion="off"] .wave-3,
:root[data-motion="off"] .bubble { animation: none !important; }
:root[data-motion="off"] #bubbles,
:root[data-motion="off"] #caustics { display: none; }

/* ==========================================================================
   Masthead additions
   ========================================================================== */

.masthead-tools { display: flex; gap: 3px; align-items: center; }

.lang-switch {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--surface);
}
.lang-switch { height: 40px; align-items: center; border-radius: 9px; }
.lang-switch button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; padding: 0 12px;
  height: 100%; color: var(--text-muted);
  transition: background .15s, color .15s;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--ocean-600); color: #fff;
}

/* ==========================================================================
   Equations (KaTeX)
   ========================================================================== */

.equation {
  font-size: 15px; text-align: center;
  padding: 15px 13px; margin: 0 0 14px;
  background: var(--foam-50); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow-x: auto; overflow-y: hidden;
}
.equation .katex { font-size: 1.16em; color: var(--text); }
.equation.fallback { font-family: var(--mono); font-size: 12.5px; }
.mi-eq .katex { font-size: .92em; }
.mi-eq { line-height: 1.9; white-space: normal; }

/* ==========================================================================
   Advisor
   ========================================================================== */

.advice-group { margin-bottom: 16px; }
.advice-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px;
}
.advice-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.advice-head.recommend { color: var(--green); }
.advice-head.recommend .dot { background: var(--green); }
.advice-head.usable { color: var(--amber); }
.advice-head.usable .dot { background: var(--amber); }
.advice-head.avoid { color: var(--coral); }
.advice-head.avoid .dot { background: var(--coral); }
.advice-head .line { flex: 1; height: 1px; background: var(--border); }

.advice-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 7px; background: var(--surface);
  border-left: 3px solid var(--border);
}
.advice-item.recommend { border-left-color: var(--green); }
.advice-item.usable { border-left-color: var(--amber); }
.advice-item.avoid { border-left-color: var(--coral); }
.advice-item .ai-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  flex-wrap: wrap;
}
.advice-item .ai-name { font-weight: 650; font-size: 13.5px; }
.advice-item .ai-why { margin: 0; padding-left: 16px; font-size: 12.5px;
  color: var(--text-2); line-height: 1.55; }
.advice-item .ai-why li { margin-bottom: 4px; }
.advice-item label.pick {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin-left: auto; font-size: 11.5px; color: var(--text-muted);
}
.advice-item label.pick input { accent-color: var(--ocean-600); }

/* ==========================================================================
   Issues
   ========================================================================== */

.issue { border-left: 3px solid; }
.issue.block { border-left-color: var(--coral); }
.issue.warn  { border-left-color: var(--amber); }
.issue.info  { border-left-color: var(--ocean-600); }

.badge-block, .badge-warn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
}
.badge-block { background: var(--coral); color: #fff; }
.badge-warn { background: var(--amber); color: #2c1e00; }

/* ==========================================================================
   Settings & projects drawer
   ========================================================================== */

.drawer-back {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(3, 20, 31, .5); backdrop-filter: blur(3px);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 141;
  width: min(430px, 100%); background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: slidein-drawer .22s ease;
}
@keyframes slidein-drawer { from { transform: translateX(24px); opacity: .4; } }
:root[data-motion="off"] .drawer { animation: none; }
.drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.drawer-head h3 { margin: 0; font-size: 15.5px; }
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }

.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  margin-bottom: 14px;
}
.seg button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 6px;
  color: var(--text-2); border-right: 1px solid var(--border);
  transition: background .14s, color .14s;
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--ocean-600); color: #fff; }

.proj-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 7px; background: var(--surface-2);
}
.proj-item .pn { font-weight: 650; font-size: 13.5px; }
.proj-item .pd { font-size: 11.5px; color: var(--text-muted); }
.proj-item .pa { margin-left: auto; display: flex; gap: 4px; flex: none; }
.proj-item .pb { min-width: 0; flex: 1; }

/* Korean text needs a font with proper hangul coverage; Inter has none, so
   the stack is swapped when the document language is Korean. */
:root[lang="ko"] body,
:root[lang="ko"] input,
:root[lang="ko"] select,
:root[lang="ko"] textarea,
:root[lang="ko"] button {
  font-family: "Noto Sans KR", "Malgun Gothic", var(--sans);
}
:root[lang="ko"] .mono,
:root[lang="ko"] table.data td.num,
:root[lang="ko"] table.data th.num { font-family: var(--mono); }

/* ==========================================================================
   Manual layout control: column splitter, panel grips, plot resize
   ========================================================================== */

.grid-2 {
  grid-template-columns: var(--split, minmax(360px, 420px)) 10px 1fr;
}
:root[data-layout="right"] .grid-2 {
  grid-template-columns: 1fr 10px var(--split, minmax(360px, 420px));
}
:root[data-layout="stack"] .grid-2 { grid-template-columns: 1fr; }
:root[data-layout="stack"] .col-splitter { display: none; }
@media (max-width: 1150px) {
  .grid-2 { grid-template-columns: 1fr; }
  .col-splitter { display: none; }
}

.col-splitter {
  position: relative;
  align-self: stretch;
  min-height: 120px;
  cursor: col-resize;
  border-radius: 5px;
  transition: background .15s;
}
.col-splitter::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--border-strong);
  transition: background .15s, height .15s;
}
.col-splitter:hover { background: color-mix(in srgb, var(--ocean-600) 9%, transparent); }
.col-splitter:hover::before { background: var(--ocean-600); height: 68px; }
:root[data-layout="right"] .grid-2 > .col-left  { order: 3; }
:root[data-layout="right"] .grid-2 > .col-splitter { order: 2; }
:root[data-layout="right"] .grid-2 > .col-right { order: 1; }

/* --- panel header controls ---------------------------------------------- */

.panel-grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 20px; flex: none; margin-right: -2px;
  color: var(--text-3); cursor: grab; border-radius: 4px;
  opacity: .55; transition: opacity .15s, color .15s, background .15s;
}
.panel-head:hover .panel-grip { opacity: 1; }
.panel-grip:hover { color: var(--ocean-600); background: var(--foam-100); }
.panel-grip:active { cursor: grabbing; }

.panel-toggle {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 6px; margin-left: 4px;
  transition: background .15s, color .15s, transform .18s;
}
.panel-toggle:hover { background: var(--foam-100); color: var(--text); }
.panel.collapsed .panel-toggle { transform: rotate(-90deg); }
.panel-head .hint + .panel-toggle { margin-left: 6px; }
.panel-head > .hint { margin-left: auto; }

.panel.dragging {
  box-shadow: var(--shadow-lg);
  opacity: .95;
  pointer-events: none;
  transform: rotate(-0.35deg);
}
:root[data-motion="off"] .panel.dragging { transform: none; }

.panel-placeholder {
  border: 2px dashed var(--ocean-500);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ocean-500) 7%, transparent);
  margin-bottom: 18px;
}
:root[data-density="compact"] .panel-placeholder { margin-bottom: 12px; }

/* --- plot resize grip ---------------------------------------------------- */

.plot-resize {
  height: 12px;
  margin: 2px 0 8px;
  cursor: row-resize;
  position: relative;
  border-radius: 4px;
  transition: background .15s;
}
.plot-resize::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--border-strong);
  transition: background .15s, width .15s;
}
.plot-resize:hover { background: color-mix(in srgb, var(--ocean-600) 8%, transparent); }
.plot-resize:hover::before { background: var(--ocean-600); width: 76px; }

/* Plot boxes carry an inline height set by Fig.draw, so this is only a floor
   for the moment before the first draw. It must not be the value Plotly ends
   up measuring, or the plot collapses to it on every redraw. */
#plot-area, [id$="-plot"] { min-height: 220px; }

/* ==========================================================================
   Toolbar buttons, focus mode and panel resizing
   ========================================================================== */

/* The masthead already has a button language: the tab pills. The tool
   buttons borrow it exactly, so the row reads as one set of controls rather
   than two. Same height, radius, weight and hover fill; the only difference
   is that these carry an icon and do not take a selected state. */
.tool-btn {
  appearance: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s;
}
.tool-btn:hover { background: var(--foam-100); color: var(--text); }
.tool-btn:active { background: color-mix(in srgb, var(--ocean-600) 14%, transparent); }
.tool-btn .ti {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; opacity: .75;
}
.tool-btn:hover .ti { opacity: 1; }
.tool-btn .ti svg { display: block; }
.proj-badge {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; font-size: 11px;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  background: color-mix(in srgb, var(--ocean-600) 14%, transparent);
  color: var(--ocean-600);
}
:root[data-theme="dark"] .proj-badge {
  color: var(--aqua-300);
  background: color-mix(in srgb, var(--aqua-400) 16%, transparent);
}
@media (max-width: 1240px) { .tool-btn span:not(.ti):not(.proj-badge) { display: none; } }

/* --- focus a single panel over the window -------------------------------- */

.focus-back {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(3, 20, 31, .55); backdrop-filter: blur(3px);
}
.panel.focused {
  position: fixed; z-index: 131;
  top: 3vh; left: 4vw; right: 4vw; bottom: 3vh;
  margin: 0; height: auto !important;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.panel.focused > .panel-body { flex: 1; overflow-y: auto; }
.panel.focused .panel-resize { display: none; }

.panel-focus-btn {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 6px; margin-left: 2px;
  transition: background .15s, color .15s;
}
.panel-focus-btn:hover { background: var(--foam-100); color: var(--text); }

/* --- panel bottom-edge resize -------------------------------------------- */

.panel { position: relative; }
.panel.sized { overflow: hidden; display: flex; flex-direction: column; }
.panel.sized > .panel-body { flex: 1; overflow-y: auto; }

.panel-resize {
  height: 9px; flex: none; cursor: row-resize; position: relative;
  border-top: 1px solid transparent; transition: background .15s;
}
.panel-resize::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 0; transform: translate(-50%, -50%);
  border-top: 2px dotted var(--border-strong);
  transition: border-color .15s, width .15s;
}
.panel-resize:hover { background: color-mix(in srgb, var(--ocean-600) 8%, transparent); }
.panel-resize:hover::before { border-color: var(--ocean-600); width: 60px; }
.panel.collapsed .panel-resize { display: none; }

/* --- inline rename and delete inside a project row ------------------------ */

.proj-item .pn.editable { cursor: text; border-radius: 4px; padding: 1px 4px;
  margin: -1px -4px; transition: background .14s; }
.proj-item .pn.editable:hover { background: var(--foam-100); }
.proj-item input[type="text"] { font-size: 13.5px; padding: 6px 9px; }
.proj-item.confirming {
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
  background: color-mix(in srgb, var(--coral) 8%, var(--surface-2));
}
.proj-item.confirming .pn { color: var(--coral); font-weight: 700; }
.btn.sm.danger:hover { background: color-mix(in srgb, var(--coral) 12%, transparent);
  border-color: var(--coral); color: var(--coral); }

/* ==========================================================================
   Brand, institutional marks and footer
   Structure and proportions follow BrineFlow so the two tools read as one
   family: the lab mark sits first in a white chip, a hairline rule separates
   it from the wordmark, and the footer gathers all three marks and the
   product line into a single bordered strip with the contact row beneath.
   ========================================================================== */

.brandwrap { display: flex; align-items: center; gap: 12px; position: relative; }

/* The mark sits on the page itself, with no plate behind it: the dark theme
   swaps to the light artwork instead, so both variants stay transparent. */
.labchip {
  display: flex; align-items: center; gap: 9px;
  padding: 2px 4px; border-radius: 9px;
  transition: transform .2s, filter .2s;
  flex: none;
}
.labchip:hover { transform: translateY(-1px);
                 filter: drop-shadow(0 2px 8px rgba(55, 200, 207, .45)); }
.labchip .mark { height: 26px; }
:root[data-motion="off"] .labchip:hover { transform: none; }

.vr {
  width: 1px; height: 30px; flex: none;
  background: linear-gradient(transparent, rgba(140, 200, 220, .45), transparent);
}

.title h1 {
  font-size: 19px; letter-spacing: .4px; font-weight: 700;
  color: var(--text); line-height: 1.1; margin: 0;
}
.title h1 b { color: var(--accent); font-weight: 700; }
.title p {
  margin: 2px 0 0; font-size: 10.5px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.ver {
  font-size: 9.5px; letter-spacing: .8px; padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  vertical-align: middle; margin-left: 6px; font-weight: 700;
}
@media (max-width: 1080px) { .labchip, .brandwrap .vr { display: none; } }

/* --- footer --------------------------------------------------------------- */

footer.site-foot {
  border-top: 1px solid var(--border);
  margin-top: 36px; padding: 16px 20px 34px;
  color: var(--text-muted); font-size: 11.5px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: var(--surface-glass);
}
footer.site-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
footer.site-foot a:hover { text-decoration: underline; }

.fbrand {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: center;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.fbrand .mark { height: 24px; opacity: .95; transition: opacity .2s; }
.fbrand a:hover .mark { opacity: 1; }
.fbrand > span:last-child { line-height: 1.5; }



.contact {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center; font-size: 11.8px;
}
.contact b { color: var(--text-2); font-weight: 650; }

:root[lang="ko"] .title h1 { font-family: var(--sans); }
:root[lang="ko"] .title p { letter-spacing: 0; }

/* --- field help buttons --------------------------------------------------- */

label.field > span.lbl { display: flex; align-items: center; gap: 6px; }

.field-info {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); width: 16px; height: 16px; flex: none;
  border-radius: 50%; font-size: 10.5px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.field-info:hover {
  background: var(--ocean-600); border-color: var(--ocean-600); color: #fff;
}

.help-body p { margin: 0 0 12px; line-height: 1.65; }
.help-body p:last-child { margin-bottom: 0; }
.help-body ul { margin: 0 0 12px; padding-left: 20px; }
.help-body li { margin-bottom: 7px; line-height: 1.6; }
.help-body .egs {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  font-size: 13px; margin: 10px 0 14px; padding: 11px 13px;
  background: var(--foam-50); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.help-body .egs b { font-weight: 600; }
.help-body .egs span { font-family: var(--mono); font-size: 12.5px; text-align: right; }

/* --- example dataset picker ---------------------------------------------- */

.preset-pick {
  width: auto; max-width: 260px; font-size: 12.5px; padding: 5px 9px;
  border-radius: var(--radius-sm);
}
.preset-cite {
  font-size: 11px; color: var(--text-muted); line-height: 1.5;
  margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--foam-50); border: 1px solid var(--border);
}
.preset-cite b { color: var(--text-2); font-weight: 650; }
.preset-cite .src { display: block; margin-top: 4px; opacity: .85; }

/* --- rendered parameter symbols and units --------------------------------- */

.sym .katex { font-size: 1.02em; }
.sym.unit .katex { font-size: .88em; color: var(--text-muted); }
.sym-fallback { font-family: var(--mono); font-size: 12.5px; }
table.data td .sym { white-space: nowrap; }
.kv dt .sym { white-space: nowrap; }

/* --- scientific notation in prose ---------------------------------------- */

.interp sub, .callout sub, .advice-item sub, .help-body sub,
.interp sup, .callout sup, .advice-item sup, .help-body sup {
  font-size: .72em; line-height: 0;
}
.interp sub, .callout sub, .advice-item sub, .help-body sub { vertical-align: -0.28em; }
.interp sup, .callout sup, .advice-item sup, .help-body sup { vertical-align: 0.45em; }

/* ---------- model index -------------------------------------------------
   The catalogue in the Guide tab. It is written into index.html rather
   than built by JavaScript, because a search crawler never runs Pyodide
   and would otherwise see nothing of what this site actually does. */
.mi-panel { max-width: 880px; margin: 22px auto 40px; }
.mi-panel h3 {
  margin: 26px 0 10px; font-size: 1.02rem; color: var(--accent);
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.mi-panel > .panel-body > p { color: var(--text-2); line-height: 1.65; }
dl.model-index { margin: 0; }
dl.model-index dt {
  font-weight: 600; color: var(--text); margin-top: 14px; font-size: .95rem;
}
dl.model-index dd {
  margin: 3px 0 0 0; color: var(--text-2); line-height: 1.6; font-size: .88rem;
}
dl.model-index dd cite {
  display: block; color: var(--text-3); font-style: normal; font-size: .8rem;
  margin-top: 2px;
}
.mi-year { color: var(--text-3); font-weight: 400; font-size: .85em; }
.mi-p { color: var(--text-3); }
dl.model-index sub { vertical-align: -0.28em; font-size: .72em; line-height: 0; }
dl.model-index sup { vertical-align: 0.45em; font-size: .72em; line-height: 0; }