/* Boltzmannator — modern light/dark UI */

:root {
  --accent:        #1565C0;
  --accent-hover:  #1259a8;
  --bg:            #e9eaef;
  --panel-bg:      #f5f5f7;
  --panel-border:  #e0e0e6;
  --card-bg:       #ffffff;
  --text:          #1d1d22;
  --muted:         #6b6b74;
  --faint:         #9a9aa2;
  --tabs-bg:       #e2e2ea;
  --tab-bg:        #fafafc;
  --tab-border:    #d3d3dc;
  --tab-text:      #555;
  --field-bg:      #ffffff;
  --field-border:  #d4d4dc;
  --track:         #d7d7df;
  --sep:           #e2e2e8;
  --shadow:        0 2px 12px rgba(0,0,0,.15);
  --positive:      #21BA45;
}

html.dark {
  --bg:            #17171b;
  --panel-bg:      #26262b;
  --panel-border:  #34343d;
  --card-bg:       #23232a;
  --text:          #e2e2e2;
  --muted:         #a0a0a8;
  --faint:         #77777f;
  --tabs-bg:       #3a3a42;
  --tab-bg:        #2d2d34;
  --tab-border:    #4c4c56;
  --tab-text:      #b9b9c2;
  --field-bg:      #2e2e35;
  --field-border:  #46464f;
  --track:         #47474f;
  --sep:           #3a3a42;
  --shadow:        0 2px 14px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

#app {
  display: flex;
  height: 100vh; height: 100dvh;
  /* With viewport-fit=cover the page fills the whole screen (no auto margin);
     these insets keep content clear of the notch / status bar / home
     indicator. They are 0 in a normal browser and on desktop, so nothing
     changes there — they only matter for a home-screen (standalone) launch,
     where they reclaim the wasted top strip in landscape. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── Control panel ──────────────────────────────────────────────────── */

#panel {
  width: 340px; min-width: 340px;
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  padding: 8px;
  transition: background .25s;
}

#header-row {
  display: flex; justify-content: center; align-items: center; gap: 10px;
}
#header-img {
  width: 230px; display: block; border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
#pic-dots { display: flex; flex-direction: column; gap: 8px; }
.pic-dot {
  width: 13px; height: 13px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--faint); background: transparent;
  transition: background .15s, border-color .15s, transform .1s;
}
.pic-dot:hover { transform: scale(1.2); }
.pic-dot.active { background: var(--accent); border-color: var(--accent); }

/* ── Tabs (segmented pill) ──────────────────────────────────────────── */

#tabs {
  display: flex; background: var(--tabs-bg); border-radius: 10px;
  padding: 3px; gap: 3px;
}
.tab {
  flex: 1 1 0; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px;
  min-height: 34px; border-radius: 8px;
  background: var(--tab-bg); border: 1px solid var(--tab-border);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.07);
  color: var(--tab-text);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { color: var(--text); border-color: var(--faint); }
.tab.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.tab .nabla { font-size: 19px; font-weight: 600; line-height: 1; }
.tab.tab-icon { flex: 0 0 38px; padding: 0; }
.tab.tab-icon .qmark { font-size: 17px; font-weight: 700; line-height: 1; }

/* ── Scrollable tab content ─────────────────────────────────────────── */

#tab-scroll {
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 2px 6px 2px 2px;
  scrollbar-width: thin;
}
.tabpanel { display: flex; flex-direction: column; gap: 3px; }
.tabpanel.hidden { display: none; }

.sect-title { font-weight: 700; font-size: 13px; margin: 6px 0 2px; }
.sect-sub   { font-size: 12.5px; color: var(--muted); font-style: italic;
              margin-bottom: 2px; }
.grp-label  { font-size: 12.5px; font-style: italic; color: var(--muted);
              margin-top: 9px; }

hr.sep { border: none; border-top: 1px solid var(--sep); margin: 5px 0;
         width: 100%; }

/* ── Rows / layout helpers ──────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: 8px; }
.row > span { white-space: nowrap; }
.row.gap { gap: 8px; }
.row.spread { justify-content: space-between; }
.grow { flex: 1; }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* ── Sliders ────────────────────────────────────────────────────────── */

.sldrow { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.sldrow .lbl { min-width: 22px; font-size: 13px; flex: 0 0 auto; }
.sldrow .val {
  min-width: 46px; text-align: right; font-weight: 600; font-size: 12.5px;
  color: var(--text); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 18px; background: transparent; margin: 0; min-width: 0;
  --p: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right,
      var(--accent) 0%, var(--accent) var(--p),
      var(--track) var(--p), var(--track) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  margin-top: -5px; cursor: pointer;
  transition: transform .1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--track);
}
input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: 2px; background: var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card-bg);
  cursor: pointer;
}

/* ── Selects / inputs ───────────────────────────────────────────────── */

select, input[type="text"] {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: 7px;
  padding: 5px 8px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
select { width: 100%; cursor: pointer; }
select:focus, input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(21,101,192,.18);
}
input.num { width: 70px; text-align: center; }
input.num-sm { width: 52px; text-align: center; }

/* ── Checkboxes / radios ────────────────────────────────────────────── */

label.check, label.radio {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; user-select: none;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 15px; height: 15px; margin: 0; cursor: pointer;
}
.radio-group { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* ── Dark-mode switch ───────────────────────────────────────────────── */

label.switch {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  user-select: none;
}
label.switch input { display: none; }
label.switch .track {
  width: 34px; height: 19px; border-radius: 10px; background: var(--track);
  position: relative; transition: background .2s;
}
label.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: left .2s;
}
label.switch input:checked + .track { background: var(--accent); }
label.switch input:checked + .track::after { left: 17px; }
.switch-label { font-size: 13px; }

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  border: none; border-radius: 8px; color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: .2px; padding: 7px 10px; cursor: pointer;
  transition: filter .12s, transform .05s, box-shadow .12s;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.btn:hover  { filter: brightness(1.12); box-shadow: 0 2px 5px rgba(0,0,0,.22); }
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn.full { width: 100%; }

.btn-primary  { background: #1565C0; }
.btn-teal     { background: #00796B; }
.btn-positive { background: #21BA45; }
.btn-negative { background: #C10015; }
.btn-orange   { background: #EF6C00; }
.btn-bluegrey { background: #546E7A; }
.btn-bluegrey7{ background: #455A64; }
.btn-grey     { background: #424248; }
.btn-purple   { background: #7E57C2; }

/* ── Progress bar ───────────────────────────────────────────────────── */

#prog-wrap { width: 100%; margin: 3px 0 1px; }
#prog-bar {
  position: relative; width: 100%; height: 20px; border-radius: 6px;
  background: var(--track); overflow: hidden;
}
#prog-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--positive); border-radius: 6px;
  transition: width .12s linear;
}
#prog-epoch {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 600; color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,.55);
}
#prog-label {
  font-size: 12.5px; text-align: center; white-space: pre; margin-top: 3px;
  min-height: 17px;
}

/* ── Bottom controls / footer ───────────────────────────────────────── */

#panel-bottom { display: flex; flex-direction: column; gap: 5px; }
#footer {
  width: 100%; text-align: center; font-size: 10px; color: var(--faint);
  margin-top: 2px;
}

/* ── Responsive: shrink the header on short windows so the controls
      always stay usable ─────────────────────────────────────────────── */

@media (max-height: 860px) {
  #header-img { width: 180px; }
}
@media (max-height: 700px) {
  #header-img { width: 130px; }
  .tab { min-height: 30px; }
}
@media (max-height: 560px) {
  #header-row { display: none; }
  /* header removed from the grid → drop its row so the bottom bar keeps its
     own track (otherwise items shift up and Reset/Exit collapse to 0). */
  #panel { grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* ── Plot panel ─────────────────────────────────────────────────────── */

#plotwrap {
  flex: 1; height: 100vh; height: 100dvh; padding: 14px;
  display: flex; min-width: 0; position: relative;
}

/* Full-screen toggle: only shown on touch devices whose browser actually
   supports the Fullscreen API (JS adds .avail); hidden on iOS Safari, which
   does not support it for regular pages, and on desktop (fine pointer). */
#btn-fs {
  position: absolute; top: 20px; right: 20px; z-index: 6;
  width: 36px; height: 36px; border: none; border-radius: 9px;
  background: rgba(20,20,26,.30); color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#btn-fs svg { width: 19px; height: 19px; }
#btn-fs:active { background: rgba(20,20,26,.48); }
@media (pointer: coarse) { #btn-fs.avail { display: inline-flex; } }
#plotcard {
  position: relative;
  flex: 1; min-width: 0; min-height: 0;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  padding: 6px; overflow: hidden;
  display: flex;
  transition: background .25s;
}
#plot { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; }

/* ── Theory / Help overlay ──────────────────────────────────────────── */

#overlay {
  position: absolute; inset: 14px; z-index: 10; display: flex;
}
#overlay-card {
  flex: 1; min-width: 0; min-height: 0; position: relative;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  overflow: hidden; display: flex;
}
#overlay-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--tabs-bg); color: var(--muted);
  font-size: 21px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
#overlay-close:hover { background: var(--accent); color: #fff; }
#overlay-scroll {
  flex: 1; overflow-y: auto; padding: 26px 42px 34px;
  scrollbar-width: thin;
}
.doc { max-width: 760px; margin: 0 auto; font-size: 14.5px;
       line-height: 1.55; color: var(--text); }
.doc h2 { font-size: 23px; font-weight: 700; margin: 0 0 8px;
          letter-spacing: -.2px; }
.doc h3 { font-size: 15.5px; font-weight: 700; margin: 20px 0 5px;
          color: var(--accent); }
html.dark .doc h3 { color: #6ba3e8; }
.doc p { margin: 6px 0; }
.doc .lead { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.doc .eq {
  display: block; text-align: center; margin: 10px 0;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 16.5px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.doc .eq .katex-display { margin: 4px 0; }
.doc .eq .katex { font-size: 1.08em; }
.doc ul, .doc ol { margin: 6px 0; padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc .refs { font-size: 13px; color: var(--muted); line-height: 1.6; }
.doc .cdot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: baseline; margin-right: 1px;
}
.doc i, .doc em { font-style: italic; }

/* one-click experiment setup buttons in the Help page */
.try-btn {
  display: inline-block; margin-left: 4px; padding: 2px 10px;
  border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; vertical-align: 1px;
  transition: background .15s, color .15s;
}
.try-btn:hover { background: var(--accent); color: #fff; }
html.dark .try-btn { border-color: #6ba3e8; color: #6ba3e8; }
html.dark .try-btn:hover { background: #6ba3e8; color: #17171b; }

/* figure-download button over the plot (companion to #btn-fs) */
#btn-dl {
  position: absolute; top: 20px; right: 20px; z-index: 6;
  width: 36px; height: 36px; border: none; border-radius: 9px;
  background: transparent; color: var(--faint); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .45; transition: opacity .15s, background .15s, color .15s;
}
#btn-dl:hover { opacity: 1; background: var(--tabs-bg); color: var(--text); }
#btn-dl svg { width: 19px; height: 19px; }
/* on touch devices the full-screen button owns that corner */
@media (pointer: coarse) { #btn-dl { right: 64px; opacity: .6; } }

/* share-link button, to the left of the download button */
#btn-share {
  position: absolute; top: 20px; right: 64px; z-index: 6;
  width: 36px; height: 36px; border: none; border-radius: 9px;
  background: transparent; color: var(--faint); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .45; transition: opacity .15s, background .15s, color .15s;
}
#btn-share:hover { opacity: 1; background: var(--tabs-bg); color: var(--text); }
#btn-share svg { width: 18px; height: 18px; }
@media (pointer: coarse) { #btn-share { right: 108px; opacity: .6; } }

/* toast notification (link copied) */
#toast {
  position: fixed; top: 66px; right: 24px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ── Hover tooltips ─────────────────────────────────────────────────── */

#tooltip {
  position: fixed; z-index: 100; max-width: 280px;
  background: #2c2c33; color: #f0f0f2;
  border: 1px solid #46464f;
  border-radius: 8px; padding: 7px 10px;
  font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease-out;
}
#tooltip.show { opacity: 1; }
html.dark #tooltip { background: #3a3a44; border-color: #55555f; }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE / TOUCH
   On a narrow PORTRAIT screen the desktop side-by-side layout does not fit,
   so we stack vertically: the plot becomes a band pinned at the top and the
   control panel fills the rest (its tab content scrolls internally, exactly
   as on desktop).  The plot therefore stays visible live while sliders are
   moved.  In LANDSCAPE we keep the side-by-side layout (there is enough
   width), only trimming the panel.  A separate coarse-pointer block enlarges
   the touch targets (slider thumbs, checkboxes, buttons).
   ═══════════════════════════════════════════════════════════════════════ */

/* — Portrait phones/tablets: stack plot over controls — */
@media (max-width: 820px) and (orientation: portrait) {
  #app { flex-direction: column; }

  #plotwrap {
    order: 0;
    /* dvh (not vh) so the band tracks the visible viewport and can't be left
       too tall by a stale vh after an orientation change */
    flex: 0 0 42vh;
    flex-basis: 42dvh;
    height: auto; width: 100%;
    padding: 8px 8px 4px;
  }
  #plotcard { padding: 4px; }

  #panel {
    order: 1;
    width: 100%; min-width: 0;
    height: auto; flex: 1 1 auto; min-height: 0;
    /* header is hidden below → 3-row grid so the bottom bar keeps its track */
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-right: none;
    border-top: 1px solid var(--panel-border);
    padding: 6px 10px 8px;
  }

  /* The decorative portrait yields to the controls on a phone: hiding it
     gives the scrollable tab area the room it needs.  (The picture chooser
     is a desktop nicety; it returns in landscape and on wider screens.) */
  #header-row { display: none; }
  #tab-scroll { padding-right: 2px; }

  /* Theory/Help: the plot band is too small a home on a phone held upright —
     let the overlay cover the whole screen instead. */
  #overlay {
    position: fixed;
    inset: calc(8px + env(safe-area-inset-top)) 8px
           calc(8px + env(safe-area-inset-bottom));
    z-index: 50;
  }
  #overlay-scroll { padding: 20px 18px 26px; }
}

/* Very short portrait (small phones): give the plot a bit less height */
@media (max-width: 820px) and (orientation: portrait) and (max-height: 640px) {
  #plotwrap { flex-basis: 36vh; flex-basis: 36dvh; }
}

/* — Small landscape (phones held sideways): keep side-by-side, trim panel — */
@media (max-width: 900px) and (orientation: landscape) {
  #panel { width: 288px; min-width: 288px; padding: 6px; }
  #plotwrap { padding: 8px; }
}

/* — Touch devices: bigger hit targets regardless of orientation — */
@media (pointer: coarse) {
  input[type="range"] { height: 30px; touch-action: none; }
  input[type="range"]::-webkit-slider-runnable-track { height: 5px; }
  input[type="range"]::-webkit-slider-thumb {
    width: 24px; height: 24px; margin-top: -10px; border-width: 3px;
  }
  input[type="range"]::-moz-range-track,
  input[type="range"]::-moz-range-progress { height: 5px; }
  input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-width: 3px;
  }
  .sldrow { min-height: 34px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  label.check, label.radio, .switch-label { font-size: 14px; }
  label.switch .track { width: 42px; height: 24px; border-radius: 12px; }
  label.switch .track::after { width: 20px; height: 20px; }
  label.switch input:checked + .track::after { left: 20px; }
  .tab { min-height: 42px; font-size: 13.5px; }
  .btn { padding: 11px 12px; font-size: 14px; }
  select, input[type="text"] { padding: 8px 9px; font-size: 14px; }
  .pic-dot { width: 16px; height: 16px; }
}

/* invisible hover targets over the free-energy readout on the canvas */
.fe-hot { position: absolute; display: none; cursor: help; z-index: 5; }

/* KaTeX-typeset equation lines inside information boxes */
#tooltip .tip-eq { display: block; margin: 5px 0; font-size: 13px; }