/* ============================================================
   Editor shell — fullscreen React tool pages (planet / fireworks /
   sokoban). Loaded AFTER main.css (for tokens + header + buttons)
   and BEFORE each editor's own bundle CSS.
   ============================================================ */

/* ── Fullscreen shell (replaces fullscreen.css) ────────────── */
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

.fs-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Header: full-width, with a tool-context label ─────────── */
.editor-header { position: sticky; top: 0; flex-shrink: 0; }
.editor-header .site-header__inner { max-width: none; }

.editor-context {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.editor-context::before {
  content: "/";
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-right: 0.6em;
  font-weight: 400;
}
.site-nav a.is-active {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

@media (max-width: 720px) {
  html, body { overflow: auto; height: auto; }
  .fs-body { overflow: auto; height: auto; }
  .editor-context { display: none; }
}

/* ── antd neo-brutalist overrides (Sokoban) ────────────────────
   ConfigProvider handles colours/radius/fonts; these add the ink
   border + hard-shadow language antd tokens can't express. ────── */
.ant-btn {
  border: 2px solid var(--text) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--text) !important;
  font-family: var(--font-mono);
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ant-btn:not(:disabled):hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--text) !important;
}
.ant-btn:disabled { box-shadow: none; opacity: 0.4; }
.ant-btn-primary { color: var(--accent-contrast) !important; }

.ant-select .ant-select-selector,
.ant-input-number,
.ant-input {
  border: 2px solid var(--text) !important;
  border-radius: 0 !important;
}

/* Sliders: square accent track + ink handle */
.ant-slider-rail { border-radius: 0 !important; }
.ant-slider-track { border-radius: 0 !important; background: var(--accent) !important; }
.ant-slider-handle::after {
  border-radius: 0 !important;
  box-shadow: 0 0 0 2px var(--text) !important;
}

.ant-collapse,
.ant-collapse-item,
.ant-collapse-content {
  border-radius: 0 !important;
  border-color: var(--text) !important;
}

.ant-dropdown-menu,
.ant-select-dropdown {
  border-radius: 0 !important;
  border: 2px solid var(--text) !important;
  box-shadow: 4px 4px 0 var(--text) !important;
}