/* CPAL-1.0 License. See chaosaccelerator.com/license.html */

:root {
  --settings-btn-size: 40px;
}

/* ---- The two views, in one document ---- */
/* Both stack (absolute) so a transition can cross-fade them; [hidden] needs an explicit display: none since author styles beat the UA rule. */
#app {
  position: relative;
}

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.view[hidden] {
  display: none;
}

/* Opened by a link to the map: the editor stays laid out but unseen. Set by chaos.html, cleared by transition.js. */
.opening-map #editor-view {
  visibility: hidden;
}

.view.is-transitioning {
  pointer-events: none;
}

/* Lift the editor toolbar above #grid-view (and #grid-menu-column's z-index 3) while transitioning, so it is seen fading. */
#editor-view.is-transitioning #panel {
  position: relative;
  z-index: 4;
}
/* The builder's floating controls go above the transition layer and fade on --float-fade (transition.js),
   so the tiles fading away at the end cannot show them again. A closed settings card stays closed. */
#editor-view.is-transitioning :is(#fractalize-wrap, #btn-home, #playback-toolbar, #btn-settings, #settings-panel.open, #speed-popup, #editor-topbar) {
  z-index: 51;
  opacity: var(--float-fade, 1);
}

/* ---- The transition layer: above both views; the grid shows through as its canvas fades out ---- */
#transition-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
}

#transition-layer[hidden] {
  display: none;
}

#transition-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#transition-skip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0.75;
}
#transition-skip:hover {
  opacity: 1;
}

/* ---- Watermark: a child of #app so it stays put across views; fixed to the viewport corner ---- */
#watermark {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 2000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  user-select: none;
}

/* ---- The floating settings button (editor only): absolute against .view, since a backdrop-filter ancestor would hijack position: fixed ---- */
.floating-settings-btn {
  position: absolute;
  top: var(--panel-inset);
  right: var(--panel-inset);
  z-index: 12;
  width: var(--settings-btn-size);
  height: var(--settings-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  background: var(--bg-panel-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.floating-settings-btn:hover {
  background: var(--bg-input);
}

.floating-home-btn {
  position: absolute;
  top: var(--panel-inset);
  left: var(--panel-inset);
  z-index: 12;
  width: var(--settings-btn-size);
  height: var(--settings-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--bg-panel-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  text-decoration: none;
}
.floating-home-btn:hover {
  background: var(--bg-input);
}

/* ---- The settings panel: the button expanding into a card ---- */
/* Always in the DOM (never [hidden]) so the opacity/transform transition has something to animate. */
.settings-panel {
  position: absolute;
  top: var(--panel-inset);
  right: var(--panel-inset);
  width: 280px;
  max-width: calc(100% - var(--panel-inset) * 2);
  max-height: calc(100% - var(--panel-inset) * 2);
  background: var(--bg-panel-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 15;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.settings-panel.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-panel-header h2 {
  font-size: 14px;
  margin: 0;
}
.settings-panel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* ---- Playback controls: the shared row shape for the grid's preview and the editor's transport ---- */
.playback-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.playback-controls input[type="range"] {
  flex: 1;
  min-width: 0;
  width: auto;
}

/* Shows its value (0.5x..16x), so it widens instead of staying a 32px square. */
.speed-btn {
  width: auto;
  min-width: 32px;
  padding: 0 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.speed-btn[aria-expanded="true"] {
  background: var(--bg-input);
  border-color: var(--accent);
}

/* Fixed popover, placed by JS (positionSpeedPopup) against whichever speed button opened it. */
.speed-popup {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  background: var(--bg-panel-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.speed-popup[hidden] {
  display: none;
}
/* A horizontal range rotated vertical (no cross-browser vertical type). -90deg, not 90deg: the max end must face UP. */
.speed-slider-track {
  position: relative;
  width: 28px;
  height: 120px;
}
.speed-slider-track input[type="range"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.speed-value {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
}

/* ---- Sound volume: label, speaker icon, slider in one row ---- */
.volume-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 10px;
}
.volume-field > span:first-child {
  color: var(--text-dim);
  flex-shrink: 0;
}
.volume-field input[type="range"] {
  flex: 1;
  min-width: 0;
  width: auto;
}

/* Speaker icon shared by the mute buttons and .volume-icon; arcs and X toggled via style.display in JS, since [hidden] on SVG children is unreliable. */
.volume-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-dim);
}
.icon-button svg {
  display: inline-flex;
  flex-shrink: 0;
}
.vol-mute-x {
  display: none;
}

/* ---- Color Blind Support: each option drawn on its own Output color scale ---- */
.color-blind-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 10px;
}
.color-blind-field > span {
  color: var(--text-dim);
  flex-shrink: 0;
  line-height: 30px;
}
.color-blind-select {
  flex: 1;
  min-width: 0;
}
#color-blind-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  outline: none;
}
#color-blind-field .color-blind-option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 2px #000;
  cursor: pointer;
}
#color-blind-list .color-blind-option + .color-blind-option { margin-top: 4px; }
#color-blind-button::after {
  content: "\25BE";
  float: right;
}
#color-blind-list .color-blind-option[aria-selected="true"],
#color-blind-list .color-blind-option.is-active {
  border-color: var(--text);
}
#color-blind-field .color-blind-option[data-value="off"] {
  background: var(--bg-input);
  color: var(--text);
  font-weight: normal;
  text-shadow: none;
}
/* Cividis */
#color-blind-field .color-blind-option[data-value="red-green"] {
  background: linear-gradient(to right, #00204d, #00336f, #39486b, #575c6d, #707173, #8a8779, #a69d75, #c4b56c, #e4cf5b, #ffea46);
}
/* Inferno */
#color-blind-field .color-blind-option[data-value="blue-yellow"] {
  background: linear-gradient(to right, #000004, #1b0c42, #4b0c6b, #781c6d, #a52c60, #cf4446, #ed6925, #fb9a06, #f7d03c, #fcffa4);
}
#color-blind-field .color-blind-option[data-value="monochrome"] {
  background: linear-gradient(to right in oklab, oklch(30% 0 0), oklch(97% 0 0));
}

/* ---- The shared settings body (#shared-settings-body) while it is a guest in the builder's panel ---- */
#editor-settings-mount {
  padding: 0;
  min-height: 0;
  display: flex;
}
#editor-settings-mount > .menu-card-body {
  flex: 1;
  min-width: 0;
}
.settings-panel {
  width: 320px;
}
#editor-settings-mount .field span { display: block; }
#editor-settings-mount .field select { width: 100%; }
#editor-settings-mount button.secondary { padding: 6px 10px; }
#editor-settings-mount .readout { white-space: nowrap; }

/* ---- Simple Mode / Advanced Mode switch (app-mode.js) ---- */
.mode-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.mode-switch [data-mode] {
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.mode-switch .is-current {
  color: var(--text);
  font-weight: 600;
}

/* Simple Mode: the map keeps only Inspect and Settings, the builder only the basic tools. */
html.simple-mode #shared-settings-body > :not(#mode-switch, .volume-field, #color-blind-field, #grid-btn-tips, #grid-btn-reset-all, #settings-about-link),
html.simple-mode #menu-stats,
html.simple-mode #grid-btn-stats,
html.simple-mode #grid-stats-panel,
html.simple-mode #menu-display,
html.simple-mode #grid-btn-display,
html.simple-mode #grid-display-panel,
html.simple-mode #menu-playback,
html.simple-mode #grid-btn-playback,
html.simple-mode #grid-playback-panel,
html.simple-mode #menu-movie,
html.simple-mode #grid-btn-movie,
html.simple-mode #menu-challenges,
html.simple-mode #grid-btn-challenges,
html.simple-mode #menu-render-progress,
html.simple-mode #hover-readout,
html.simple-mode #separation-details,
html.simple-mode #trace-tails-field,
html.simple-mode #btn-inspect-grid,
html.simple-mode #grid-inspect-panel .section-label,
html.simple-mode #grid-inspect-panel .tool-grid,
html.simple-mode #panel .tool-btn:is([data-tool="line"], [data-tool="portal"], [data-tool="hinge"],
  [data-tool="spring"], [data-tool="velocity"], [data-tool="input-velocity"]),
html.simple-mode #panel .collapsible,
html.simple-mode #simulation-section,
html.simple-mode #btn-speed,
html.simple-mode #speed-popup,
html.simple-mode #samples-section h2,
html.simple-mode #hover-playback-controls,
html.simple-mode #btn-sample-double-pendulum,
html.simple-mode #btn-sample-binary-star,
html:not(.simple-mode) .simple-mode-only {
  display: none !important;
}
#hover-preview > #hover-mute {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(12, 13, 17, 0.75);
}
#hover-preview > #hover-mute:hover { background: var(--bg-input); }
/* Simple Mode samples: Clear All, then the one sample, on one row. */
html.simple-mode #samples-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.simple-mode #samples-section > :is(.tool-grid, .editor-actions) { display: contents; }
html.simple-mode #btn-clear-all { order: -1; }

/* ---- Toasts (app-message.js): opacity-animated, never [hidden] ---- */
.app-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  text-align: center;
  background: rgba(12, 13, 17, 0.92);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 9px 14px;
  color: #ff9a9a;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.app-toast.visible {
  opacity: 1;
}
#fractalize-wrap > .app-toast {
  bottom: calc(100% + 10px);
  pointer-events: none;
}
#grid-toast {
  bottom: var(--toast-bottom);
}

/* ---- Alert and prompt dialogs (app-message.js): top center, over everything ---- */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 12px 12px;
}
.app-dialog {
  width: max-content;
  max-width: min(420px, 100%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  padding: 16px;
  color: var(--text);
}
.app-dialog p {
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.45;
}
.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.app-dialog-actions button {
  min-width: 72px;
}

/* ---- Drop shadow off (Settings > Performance): no blur behind floating panels, a more solid fill instead ---- */
html.drop-shadow-off {
  --bg-panel-float: rgba(27, 30, 39, 0.95);
}
html.drop-shadow-off :is(.floating-settings-btn, .floating-home-btn, .settings-panel, .speed-popup,
  .menu-back, .menu-toggle, .menu-card, .stats-status, #playback-toolbar) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The last line of Settings, in the builder and on the map. */
#settings-about-link {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}
#settings-about-link:hover { color: var(--text); }