/* ---- Theme tokens -------------------------------------------------- */

:root {
  --jsb-bg: #f4f5f7;
  --jsb-surface: #ffffff;
  --jsb-fg: #1a1d23;
  --jsb-fg-muted: #5b6270;
  --jsb-border: #d7dbe2;
  --jsb-accent: #2d6cdf;
  --jsb-accent-fg: #ffffff;
  --jsb-tab-bg: #eceef2;
  --jsb-tab-hover: #e2e5eb;
  --jsb-shadow: 0 1px 3px rgba(20, 22, 30, 0.08), 0 1px 2px rgba(20, 22, 30, 0.06);
  --jsb-danger: #c0392b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --jsb-bg: #1b1d22;
    --jsb-surface: #24262c;
    --jsb-fg: #e8e9ec;
    --jsb-fg-muted: #9aa0ab;
    --jsb-border: #383b43;
    --jsb-accent: #5b9dff;
    --jsb-accent-fg: #10141c;
    --jsb-tab-bg: #202226;
    --jsb-tab-hover: #2b2e34;
    --jsb-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --jsb-danger: #ff6b6b;
  }
}

/* ---- Base ------------------------------------------------------------ */

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--jsb-bg);
  color: var(--jsb-fg);
}

button, select {
  font-family: inherit;
  font-size: 14px;
  color: var(--jsb-fg);
  background-color: var(--jsb-surface);
  border: 1px solid var(--jsb-border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* An author `display` rule beats the UA stylesheet's `[hidden] { display:
   none }` regardless of specificity, so buttons hidden by the tab-switch
   script (which sets .hidden) would otherwise stay visible. Restore it. */
button[hidden] { display: none; }

button:hover:not(:disabled) { border-color: var(--jsb-accent); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--jsb-accent); outline-offset: 1px; }
button:disabled { opacity: 0.45; cursor: default; }

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

a { color: var(--jsb-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: none; border-top: 1px solid var(--jsb-border); margin: 16px 0; }

/* ---- App shell / tabs -------------------------------------------------- */

.jsb-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.jsb-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: var(--jsb-tab-bg);
  border-bottom: 1px solid var(--jsb-border);
  padding: 0 8px;
}

.jsb-tab-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.jsb-tab-divider {
  width: 1px;
  height: 20px;
  background-color: var(--jsb-border);
}
.jsb-tab-divider[hidden] { display: none; }

.jsb-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--jsb-fg-muted);
  cursor: pointer;
}

.jsb-tab:hover { background-color: var(--jsb-tab-hover); color: var(--jsb-fg); }
.jsb-tab:focus-visible { outline: 2px solid var(--jsb-accent); outline-offset: -2px; }

.jsb-tab.is-active {
  color: var(--jsb-fg);
  border-bottom-color: var(--jsb-accent);
}

/* Close "x" on dynamic tabs (e.g. the File Editor tab). Plain span, not a
   nested <button> - buttons can't contain interactive descendants. */
.jsb-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
}
.jsb-tab-close:hover { background-color: var(--jsb-border); color: var(--jsb-fg); }

.jsb-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px;
  overflow: auto;
}

.jsb-tabpanel[hidden] { display: none !important; }

#tab-code {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#editorframe {
  flex: 1 1 auto;
  min-height: 0;
}

#tab-fileeditor {
  display: flex;
  overflow: hidden;
}

#fileeditor-textarea {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: solid 1px var(--jsb-border);
  border-radius: 6px;
  padding: 8px;
  background-color: var(--jsb-bg);
  color: var(--jsb-fg);
  font-family: "Courier New", monospace;
  font-size: 12pt;
}

/* ---- Debugger inspector ------------------------------------------------ */

/* Hidden until a breakpoint is hit; .is-debugging then halves the editor
   to make room for it (toggled from index.js). */
#debug-inspector {
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--jsb-border);
  background-color: var(--jsb-surface);
}

#tab-code.is-debugging #editorframe {
  flex: 1 1 50%;
}

#tab-code.is-debugging #debug-inspector {
  display: flex;
  flex: 1 1 50%;
}

.jsb-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--jsb-border);
  background-color: var(--jsb-tab-bg);
  flex: none;
}

.jsb-inspector-actions {
  display: flex;
  gap: 8px;
}

.jsb-inspector-actions button {
  padding: 4px 12px;
  font-size: 13px;
}

.jsb-inspector-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 1px;
  overflow: hidden;
  background-color: var(--jsb-border);
}

.jsb-inspector-col {
  flex: 1 1 0;
  min-width: 0;
  overflow: auto;
  padding: 10px 12px;
  background-color: var(--jsb-surface);
}

.jsb-inspector-col h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jsb-fg-muted);
}

.jsb-debugtable {
  width: 100%;
  border-collapse: collapse;
  font-family: Courier, Monospace;
  font-size: 12px;
}

.jsb-debugtable td {
  padding: 2px 6px 2px 0;
  border-bottom: 1px solid var(--jsb-border);
  vertical-align: top;
  word-break: break-word;
}

.jsb-debugtable td:first-child {
  color: var(--jsb-fg-muted);
  white-space: nowrap;
}

.jsb-debugtable-empty { color: var(--jsb-fg-muted); font-style: italic; }

#tab-output {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 32px;
}

/* ---- "Paper" (for copying output) -------------------------------------- */

#tab-textoutput {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#paper {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Courier, Monospace;
  background-color: #000000;
  color: #33ff33;
  padding: 16px;
  white-space: pre;
  border: 1px solid var(--jsb-border);
  border-radius: 10px;
  box-shadow: var(--jsb-shadow);
}

/* ---- File Manager -------------------------------------------------- */

.jsb-filetable {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  background-color: var(--jsb-surface);
  border: 1px solid var(--jsb-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--jsb-shadow);
}

.jsb-filetable th, .jsb-filetable td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--jsb-border);
}

.jsb-filetable th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jsb-fg-muted);
  background-color: var(--jsb-tab-bg);
}

.jsb-filetable td:first-child {
  font-family: Courier, Monospace;
}

.jsb-filetable td:nth-child(2), .jsb-filetable th:nth-child(2) {
  text-align: right;
  color: var(--jsb-fg-muted);
  white-space: nowrap;
}

.jsb-filetable td:last-child, .jsb-filetable th:last-child {
  text-align: right;
  white-space: nowrap;
}

.jsb-filetable tbody tr:last-child td { border-bottom: none; }
.jsb-filetable tbody tr:hover { background-color: var(--jsb-tab-hover); }

.jsb-filetable-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.jsb-filetable-actions button {
  padding: 4px 10px;
  font-size: 13px;
}

.jsb-btn-danger {
  color: var(--jsb-danger);
  border-color: var(--jsb-danger);
}
.jsb-btn-danger:hover:not(:disabled) {
  background-color: var(--jsb-danger);
  color: var(--jsb-accent-fg);
  border-color: var(--jsb-danger);
}

#filemanager-empty { color: var(--jsb-fg-muted); font-style: italic; }

/* ---- LoRes Editor ---------------------------------------------------- */

.jsb-lores-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.jsb-lores-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.jsb-lores-color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Slide toggle (checkbox styled as a switch) */
.jsb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.jsb-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jsb-toggle-track {
  position: relative;
  flex: none;
  width: 38px;
  height: 20px;
  background-color: var(--jsb-border);
  border-radius: 999px;
  transition: background-color 0.15s ease;
}

.jsb-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--jsb-surface);
  border-radius: 50%;
  box-shadow: var(--jsb-shadow);
  transition: transform 0.15s ease;
}

.jsb-toggle input:checked ~ .jsb-toggle-track {
  background-color: var(--jsb-accent);
}

.jsb-toggle input:checked ~ .jsb-toggle-track .jsb-toggle-thumb {
  transform: translateX(18px);
}

.jsb-toggle input:focus-visible ~ .jsb-toggle-track {
  outline: 2px solid var(--jsb-accent);
  outline-offset: 2px;
}

.jsb-lores-grid-wrapper {
  max-width: 100%;
  overflow: auto;
  padding: 12px;
  background-color: var(--jsb-surface);
  border: 1px solid var(--jsb-border);
  border-radius: 10px;
  box-shadow: var(--jsb-shadow);
}

.jsb-lores-grid-wrapper:focus-visible {
  outline: 2px solid var(--jsb-accent);
  outline-offset: 2px;
}

.jsb-lores-grid {
  /* Not "collapse": browsers generally refuse to paint box-shadow/outline
     on <td>/<th> inside a collapsed-border table, which is how the
     current-cell highlight below is drawn. */
  border-collapse: separate;
  border-spacing: 0;
}

.jsb-lores-grid th {
  width: 14px;
  height: 16px;
  padding: 0;
  font-size: 8px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  color: var(--jsb-fg-muted);
  white-space: nowrap;
}

.jsb-lores-grid td {
  width: 14px;
  height: 8px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(128, 128, 128, 0.2);
  cursor: pointer;
}

/* Row numbers down the left side - override the taller header/footer
   height so body rows stay a compact 8px, matching the data cells. */
.jsb-lores-grid tbody th.jsb-lores-rownum {
  width: auto;
  height: 8px;
  min-width: 18px;
  padding: 0 4px 0 0;
  font-size: 8px;
  line-height: 8px;
  text-align: right;
  color: var(--jsb-fg-muted);
}

.jsb-lores-grid th.jsb-lores-corner {
  width: 18px;
}

.jsb-lores-grid td.is-current {
  position: relative;
  z-index: 1;
  outline: 2px solid #fff;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px #000;
}