:root {
  --bg: #05050a;
  --panel-bg: rgba(20,20,30,0.72);
  --text: #e8e8f0;
  --accent: #f5a623;
  --border: rgba(255,255,255,0.12);
}
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none;
}
#canvas-container { position: fixed; inset: 0; }
canvas { display: block; touch-action: none; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Left/right column stacks position their child .panel elements; individual
   panels no longer position themselves so they can stack without knowing
   each other's height. */
#left-stack {
  position: fixed; top: 16px; left: 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 320px;
}
#right-stack {
  position: fixed; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  max-width: 200px;
}

#title-panel h1 { font-size: 15px; margin: 0 0 4px 0; font-weight: 600; }
#title-panel p { font-size: 12px; margin: 0; color: #b8b8c8; line-height: 1.4; }

/* no fixed width: stretches to the title panel above it in #left-stack */
#controls-panel { align-self: stretch; }
.row { margin-bottom: 12px; }
.row:last-child { margin-bottom: 0; }
.row label { display: block; font-size: 11px; color: #b8b8c8; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

.btn-group { display: flex; gap: 6px; flex-wrap: wrap; }
/* Until app.js has built and positioned the UI it stays invisible: the panels are
   filled in by JavaScript after first paint, and letting them grow on screen
   showed up as a large Cumulative Layout Shift (the periodic table alone 0.29). */
html:not(.app-ready) #left-stack,
html:not(.app-ready) #right-stack,
html:not(.app-ready) #periodic-table-panel,
html:not(.app-ready) #scale-bar { visibility: hidden; }

/* .btn / .elbtn are real <button>s now: reset the UA defaults */
.btn, .elbtn { margin: 0; font-family: inherit; line-height: normal; }
.btn:focus-visible, .elbtn:focus-visible, #pt-header:focus-visible, .reset-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn {
  flex: 1 1 34px; padding: 7px 4px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px;
  transition: background-color 0.15s; /* not `all`: colour/border/font-weight transitions are non-composited animations */
  color: var(--text);
}
.btn:hover { background: rgba(255,255,255,0.12); }
.btn.active { background: var(--accent); color: #1a1200; border-color: var(--accent); font-weight: 600; }

input[type=range] {
  width: 100%; accent-color: var(--accent);
}
.val-display { font-size: 11px; color: var(--accent); float: right; }
.reset-btn {
  float: right; margin-left: 8px; padding: 0 6px; font-size: 10px; line-height: 16px;
  color: var(--text); background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; text-transform: none; letter-spacing: normal;
}
.reset-btn:hover { background: rgba(255,255,255,0.14); }
kbd {
  font-size: 10px; line-height: 14px; font-family: inherit; padding: 0 5px; margin-left: 2px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px;
  background: rgba(255,255,255,0.08); color: #ccc;
}

#legend { text-align: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
#legend-bar {
  height: 14px; width: 100%; border-radius: 3px;
  background: linear-gradient(to right, #000000, #3f0f4f, #a51931, #e6660a, #ffe34d);
  margin: 6px 0;
}
#legend .lbl { display: flex; justify-content: space-between; font-size: 10px; color: #999; }

#legend[hidden] { display: none; }
#hint { font-size: 11px; color: #999; text-align: right; }

/* Help dialog (first-run + F1). z-index sits below the shader-compile overlay. */
#help-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62);
}
#help-overlay[hidden] { display: none; }
.help-box {
  width: 940px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; padding: 22px 28px 18px 28px;
}
.help-head { margin-bottom: 12px; }
.help-box h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: 0.01em; }
.help-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--accent); }

/* tabs */
.help-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.help-tab {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600;
  color: #9a9aac; cursor: pointer; border-radius: 6px 6px 0 0;
}
.help-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.help-tab.active { color: #fff; border-bottom-color: var(--accent); }
.help-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Every tab holds two sections side by side (the references tab uses columns),
   in a fixed-height area so the dialog does not jump between tabs. */
.help-panels { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; height: 520px; max-height: calc(100vh - 220px); }
.help-tabpanel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; align-items: start; }
.help-tabpanel.help-refs, .help-tabpanel.help-single { display: block; }
/* must come AFTER the display rules above and be at least as specific, or hidden panels (notably References) stay visible */
.help-tabpanel[hidden], .help-tabpanel.help-refs[hidden], .help-tabpanel.help-single[hidden] { display: none; }
.help-box h3 {
  margin: 0 0 10px 0; padding-bottom: 5px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: #9a9aac;
  border-bottom: 1px solid var(--border);
}
.help-box p { margin: 0 0 8px 0; font-size: 13px; line-height: 1.55; color: #d4d4e0; }
.help-box em { font-style: normal; color: #fff; font-weight: 500; }
.help-steps { margin: 0 0 10px 0; padding-left: 20px; font-size: 13px; line-height: 1.55; color: #d4d4e0; }
.help-steps li { margin-bottom: 4px; padding-left: 4px; }
.help-steps li::marker { color: var(--accent); font-weight: 700; }
/* term above its description: longer lines, so even the longest tab fits without scrolling */
.help-defs { margin: 0; font-size: 12.5px; line-height: 1.45; }
.help-defs dt { color: #fff; font-weight: 600; margin-top: 9px; }
.help-defs dt:first-child { margin-top: 0; }
.help-defs dd { margin: 1px 0 0 0; color: #cfcfdc; }
.help-keys { border-collapse: collapse; width: 100%; font-size: 13px; }
.help-keys td { padding: 5px 0; border-bottom: 1px solid var(--border); color: #cfcfdc; }
.help-keys tr:last-child td { border-bottom: none; }
.help-keys td:first-child { width: 130px; color: #fff; white-space: nowrap; }
.help-refs ol { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.5; color: #aaaabb; columns: 2; column-gap: 36px; }
.help-refs li { margin-bottom: 8px; break-inside: avoid; }
.help-refs a { color: #7fb8ff; text-decoration: none; word-break: break-all; }
.help-license { margin: 10px 0 0 0; font-size: 12px; color: #aaaabb; }
.help-contact { max-width: 440px; }
.help-reveal {
  padding: 7px 16px; font: inherit; font-size: 13px; cursor: pointer; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text);
}
.help-reveal:hover { background: rgba(255,255,255,0.14); }
.help-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#mail-slot a { color: #7fb8ff; font-size: 14px; }
.help-license a { color: #7fb8ff; text-decoration: none; }
.help-license a:hover { text-decoration: underline; }
.help-refs a:hover { text-decoration: underline; }
.help-actions { text-align: right; margin-top: 14px; }
#help-close {
  padding: 7px 20px; font-size: 13px; cursor: pointer; border-radius: 6px;
  background: var(--accent); color: #1a1200; border: 1px solid var(--accent); font-weight: 600;
}
@media (max-width: 760px) {
  .help-tabpanel { grid-template-columns: 1fr; }
  .help-refs ol { columns: 1; }
  .help-tab { padding: 8px 10px; font-size: 12px; }
}

/* Periodic table: its own full-width bottom panel, since 18 columns need far
   more horizontal room than the 260px controls sidebar ever did. */
#periodic-table-panel {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  overflow-x: auto;
  z-index: 6; /* above the scale bar / axes globe, so a pulled-up table covers them */
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Slid down so only the header strip stays visible (distance set from app.js). */
#periodic-table-panel.collapsed { transform: translateY(var(--pt-shift, 0px)); }
#periodic-table-panel .pt-label {
  font-size: 11px; color: #b8b8c8; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
#periodic-table-panel .pt-chevron { display: inline-block; font-size: 10px; color: var(--accent); transition: transform 0.6s; }
#periodic-table-panel #pt-title { text-transform: none; font-size: 12px; letter-spacing: 0; color: #e8e8f0; }
/* Hint that the table can be pulled back up: the chevron bobs while it is tucked away. */
#periodic-table-panel.collapsed .pt-chevron { animation: pt-bob 1.4s ease-in-out infinite; }
#periodic-table-panel:not(.collapsed) .pt-chevron { transform: rotate(180deg); }
@keyframes pt-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
#periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(26px, 1fr));
  grid-auto-rows: 26px;
  gap: 3px;
  max-width: 920px;
  margin: 0 auto;
}
.elbtn {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer; user-select: none;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text);
  transition: background 0.15s, opacity 0.15s;
}
.elbtn:hover { background: rgba(255,255,255,0.14); }
.elbtn.active { background: var(--accent); color: #1a1200; border-color: var(--accent); font-weight: 600; }
.elbtn.unavailable {
  cursor: default; opacity: 0.25; color: #888;
}
.elbtn.unavailable:hover { background: rgba(255,255,255,0.06); }

/* Startup shader-compile indicator. Indeterminate on purpose: the compile is
   one blocking call, so real percentages can't be reported. The fill animates
   with transform only, which Chrome runs on the compositor thread, so it
   keeps moving even while the main thread is stuck compiling. */
/* Full-screen dimming layer: darkens every panel underneath and swallows
   pointer events (no pointer-events:none) so the UI is visibly unusable until
   precompiling is done. */
#compile-toast {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65);
}
#compile-toast[hidden] { display: none; }
#compile-toast .box {
  width: 280px; padding: 14px 18px;
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text); text-align: center;
}
#compile-toast .bar { margin-top: 10px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,0.1); }
#compile-toast .bar-fill { width: 40%; height: 100%; background: var(--accent); will-change: transform; animation: compile-slide 1.1s ease-in-out infinite; }
@keyframes compile-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Scale bar, bottom-left of the free view area (positioned from app.js). */
#scale-bar {
  position: fixed; bottom: 0; z-index: 5; pointer-events: none;
  font-size: 11px; color: #8d90a0; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#scale-line {
  height: 6px; margin-top: 3px;
  border: 1.5px solid #7a7d8e; border-top: none; box-sizing: border-box;
}

/* Radial probability panel (top right, under the legend). */
#radial-panel { width: 200px; padding: 10px 12px; }
#radial-panel .radial-title { font-size: 11px; color: #b8b8c8; margin-bottom: 6px; }
#radial-canvas { display: block; width: 100%; }
#radial-info { margin-top: 6px; font-size: 10px; line-height: 1.45; color: #aaaabb; }

/* ======================= Responsive layout (phones) =======================
   Small screens (<= 700px wide, or a touch device that is short and wide, i.e. a
   phone in landscape) swap the three floating panels for a bottom sheet with
   tabs (portrait) or a side column (landscape). app.js moves the existing DOM
   nodes into the sheet and adds html.layout-sheet / html.layout-column. */
#compact-bar, #sheet { display: none; }
html.layout-sheet #left-stack, html.layout-sheet #right-stack, html.layout-sheet #periodic-table-panel,
html.layout-column #left-stack, html.layout-column #right-stack, html.layout-column #periodic-table-panel { display: none; }
html.layout-sheet #sheet, html.layout-column #sheet { display: flex; }
html.layout-sheet #compact-bar, html.layout-column #compact-bar { display: block; }
html:not(.app-ready) #sheet, html:not(.app-ready) #compact-bar { visibility: hidden; }

#compact-bar {
  position: fixed; z-index: 7; top: calc(8px + env(safe-area-inset-top)); left: 10px;
  max-width: calc(100vw - 20px); padding: 6px 14px; box-sizing: border-box;
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: 999px;
  backdrop-filter: blur(6px); pointer-events: none;
}
#sheet {
  position: fixed; z-index: 8; flex-direction: column;
  background: rgba(16,16,26,0.95); backdrop-filter: blur(8px);
  border: 1px solid var(--border); box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
}
html.layout-sheet #sheet { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; border-bottom: none; }
html.layout-column #sheet { top: 0; right: 0; bottom: 0; width: min(340px, 44vw); border-radius: 16px 0 0 16px; border-right: none; }
.sheet-tabs { display: flex; gap: 2px; padding: 5px 6px; }
html.layout-sheet .sheet-tabs { order: 1; padding-bottom: calc(5px + env(safe-area-inset-bottom)); } /* tabs below the content: thumb reach */
.sheet-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; font: inherit; font-size: 13px; font-weight: 600;
  color: #9a9aac; background: none; border: none; border-radius: 10px; cursor: pointer;
}
.sheet-tab.active { color: #1a1200; background: var(--accent); }
.sheet-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sheet-help { flex: 0 0 44px; font-size: 17px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.layout-sheet .sheet-body { order: 0; max-height: 0; padding: 0 16px; transition: max-height 0.3s ease, padding 0.3s ease; }
html.layout-sheet #sheet.open .sheet-body { max-height: var(--sheet-body-h, 380px); padding: 12px 16px 6px; }
html.layout-column #compact-bar { max-width: calc(100vw - min(340px, 44vw) - 30px); }
html.layout-column .sheet-body { flex: 1 1 auto; min-height: 0; padding: 10px 14px 14px; }
.sheet-pane[hidden] { display: none; }

/* Panels that were floating cards on the desktop become plain sections in the sheet. */
#sheet .panel { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; backdrop-filter: none; }
#sheet #title-panel { margin-bottom: 16px; }
#sheet #radial-panel { width: 100%; }
#sheet .row { margin-bottom: 16px; }
#sheet .row:last-child { margin-bottom: 4px; }
#sheet .btn { min-height: 44px; font-size: 13px; }
#sheet .btn-group { gap: 8px; }
#sheet input[type=range] { height: 34px; }
#sheet .reset-btn { padding: 4px 12px; line-height: 22px; font-size: 12px; }
#sheet label[style] { min-height: 32px; }
#sheet input[type=checkbox] { width: 20px; height: 20px; }
/* The periodic table keeps its 18 columns but with finger-sized cells, scrolled sideways. */
#sheet-pane-element { overflow-x: auto; padding-bottom: 8px; }
#sheet #periodic-grid { grid-template-columns: repeat(18, 38px); grid-auto-rows: 36px; gap: 3px; width: max-content; }
#sheet .elbtn { font-size: 12px; }

@media (max-width: 760px) {
  .help-box { padding: 16px; }
  .help-panels { height: auto; max-height: calc(100vh - 210px); }
  .help-tabs { overflow-x: auto; scrollbar-width: none; }
  .help-tab { flex: 0 0 auto; }
}