/* === Gruvbox theme mapping & editor cosmetics ========================= */

:root{
  --gb-bg:#fbf1c7; --gb-surface:#f2e5bc; --gb-surface-hover:#ebdbb2; --gb-muted:#d5c4a1;
  --gb-fg:#3c3836; --gb-fg-muted:#7c6f64;
  --gb-red:#cc241d; --gb-green:#98971a; --gb-yellow:#d79921; --gb-blue:#458588;
  --gb-purple:#b16286; --gb-aqua:#689d6a; --gb-orange:#d65d0e; --gb-gray:#7c6f64;
  --gb-border:#d5c4a1; --gb-ring:var(--gb-aqua);
}


@media (prefers-color-scheme: dark){
  :root{
    --gb-bg:#1d2021; --gb-surface:#282828; --gb-surface-hover:#32302f; --gb-muted:#3c3836;
    --gb-fg:#ebdbb2; --gb-fg-muted:#a89984;
    --gb-red:#fb4934; --gb-green:#b8bb26; --gb-yellow:#fabd2f; --gb-blue:#83a598;
    --gb-purple:#d3869b; --gb-aqua:#8ec07c; --gb-orange:#fe8019; --gb-gray:#a89984;
    --gb-border:#504945; --gb-ring:var(--gb-aqua);
  }
}

/* Tailwind token remaps */
.bg-gray-100{background-color:var(--gb-bg)!important}
.text-gray-900{color:var(--gb-fg)!important}
.dark\:bg-gray-900{background-color:var(--gb-bg)!important}
.dark\:text-gray-100{color:var(--gb-fg)!important}
.bg-white{background-color:var(--gb-surface)!important}
.bg-gray-200{background-color:var(--gb-surface)!important}
.hover\:bg-gray-300:hover{background-color:var(--gb-surface-hover)!important}
.dark\:bg-gray-800{background-color:var(--gb-surface)!important}
.dark\:bg-gray-700{background-color:var(--gb-muted)!important}
.dark\:hover\:bg-gray-600:hover{background-color:var(--gb-surface-hover)!important}
.text-gray-600{color:var(--gb-fg-muted)!important}
.text-gray-700{color:var(--gb-fg)!important}
.text-gray-100{color:var(--gb-bg)!important}
.text-gray-300{color:var(--gb-fg-muted)!important}
.text-gray-400{color:var(--gb-gray)!important}
.text-green-600,.dark\:text-green-400{color:var(--gb-green)!important}
.text-red-700,.dark\:text-red-400{color:var(--gb-red)!important}
.bg-gray-900{background-color:var(--gb-fg)!important}
.dark\:bg-gray-100{background-color:var(--gb-fg)!important}
.dark\:text-gray-900{color:var(--gb-bg)!important}
.border-gray-200{border-color:var(--gb-border)!important}
.hover\:border-gray-300:hover{border-color:var(--gb-border)!important}
.dark\:border-gray-700{border-color:var(--gb-border)!important}
.dark\:hover\:border-gray-600:hover{border-color:var(--gb-border)!important}
.ring-blue-400{--tw-ring-color:var(--gb-ring)!important}

/* Split + handle */
.gb-split {
  display: grid;
  grid-template-columns: 30% 10px 70%;  /* left:30%, handle:10px, right:70% */
  gap: 0;
  height: 100vh;
  max-height: 100vh;
}
.gb-handle {
  width: 10px;
  cursor: col-resize;
  background: transparent;   /* ⬅ remove background color */
  position: relative;
}

.gb-handle:hover {
  background: transparent;   /* keep transparent on hover */
}

.gb-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 36px;
  background: var(--gb-frame);  /* or another border color */
  border-radius: 2px;
  box-shadow: -4px 0 0 var(--gb-frame), 4px 0 0 var(--gb-frame);
}


/* Top bar */
.gb-topbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:8px}
.gb-btn{
  background:var(--gb-aqua);color:#1d2021;font-weight:800;
  padding:8px 14px;border-radius:12px;border:2px solid color-mix(in oklab,var(--gb-aqua) 60%, var(--gb-border));
}
.gb-btn:hover{background:color-mix(in oklab, var(--gb-aqua) 85%, white)}

/* CodeMirror theme (gbx) — SQUARE edges for the editor panel */
.CodeMirror{
  height:100%;
  font-family:"Fira Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:800; font-size:18px; line-height:1.55; letter-spacing:.1px;
  background:var(--gb-surface); color:var(--gb-fg);
  border:2px solid var(--gb-border);
  border-radius:0;                     /* << square edges for source code panel */
  padding:10px;
}
.cm-s-gbx .CodeMirror-gutters{
  background:linear-gradient(to right, color-mix(in oklab, var(--gb-muted) 25%, transparent), transparent);
  border-right:1px solid var(--gb-border);
}
.cm-s-gbx .CodeMirror-linenumber{color:var(--gb-fg-muted); font-weight:600}
.cm-s-gbx .CodeMirror-cursor{border-left:3px solid var(--gb-orange)}
.cm-s-gbx .CodeMirror-selected{background:color-mix(in oklab, var(--gb-orange) 30%, transparent)}
.cm-s-gbx .cm-string{color:var(--gb-aqua)}
.cm-s-gbx .cm-number{color:var(--gb-purple); font-weight:800}
.cm-s-gbx .cm-atom{color:var(--gb-blue); font-weight:800}
.cm-s-gbx .cm-property{color:var(--gb-yellow); font-weight:800}
.cm-s-gbx .cm-punctuation{color:var(--gb-fg-muted)}
.cm-s-gbx .cm-error{background:transparent;color:var(--gb-red);text-decoration:underline wavy var(--gb-red)}
.cm-s-gbx .CodeMirror-activeline-background{background:color-mix(in oklab, var(--gb-muted) 30%, transparent)}

/* Strong frame color for pane borders */
:root { --gb-frame: #bdae93; }                   /* light */
@media (prefers-color-scheme: dark){
  :root { --gb-frame: #665c54; }                 /* dark (more contrast than --gb-border) */
}

/* Diagram pane chrome */
.gb-diagram {
  background: var(--gb-surface);
  border: 2px solid var(--gb-frame);
  border-radius: 0;                 /* ⬅️ square edges */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18) inset,
    0 1px 0 rgba(0,0,0,.12);
}


.CodeMirror {
  height: 100%;
  font-family: "Fira Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.8;              /* ⬅️ increase line height */
  letter-spacing: .1px;
  background: var(--gb-surface);
  color: var(--gb-fg);
  border: 2px solid var(--gb-border);
  border-radius: 0;              /* square corners */
  padding: 10px;
  overflow: auto;                /* ensure scrollbars can appear */
  white-space: pre;              /* preserve spaces */
}

/* Disable wrapping, allow horizontal scroll */
.CodeMirror-wrap pre {
  white-space: pre;              /* no wrapping */
}

.gb-diagram text, .gb-diagram tspan {
  font-family: "Fira Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important; /* bold */
}

.text-gb-red {
  color: var(--gb-orange); /* this is #cc241d in light, #fb4934 in dark mode */
}

.gb-split { align-items: stretch; }  /* keeps children full-height */


/* Remove inner scrollbars on root/fallback */
#root, #fallback {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Ensure body handles scrolling naturally */
html, body {
  height: auto;
  overflow: auto;
}

/* Optional: if JSON/graph panes are wrapped in containers with their own overflow */
.json-viewer-container,
.graph-viewer-container {
  overflow: visible !important;
  height: auto !important;
}

/* ===== Remove inner scrollbars; let the page scroll ===== */

/* Let the split layout grow to content height */
.gb-split{
  height: auto !important;
  min-height: 100vh;
  max-height: none !important;
}

/* Columns & handle should size to content rather than force 100% height */
.gb-split > * {
  height: auto !important;
}

/* Right diagram pane: no internal scroller; child should participate in normal flow */
.gb-diagram { height: auto !important; }
.gb-diagram > div {           /* this targets the wrapper that had overflow-auto + h-full */
  overflow: visible !important;
  height: auto !important;
}
.gb-diagram .mermaid {        /* the SVG should be in normal flow, not absolutely positioned */
  position: static !important;
}

/* CodeMirror: grow with content, no internal scroller */
.CodeMirror{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Left pane should match right pane height and the editor should fill it */
.gb-left{
  display: flex;
  flex-direction: column;
  align-self: stretch;       /* grid item fills the grid row height */
  min-height: 0;             /* allow children to size correctly */
}

/* Let CodeMirror fill the left pane (override earlier 100% rule) */
.gb-left .CodeMirror{
  flex: 1 1 auto;
  height: auto !important;   /* not %; avoid dependency on explicit parent height */
  max-height: none !important;
  overflow: visible !important; /* so the page/browser scrollbar handles scrolling */
}

/* Keep left column from painting into the handle/right pane */
.gb-left { 
  overflow-x: hidden;                /* block any sideways bleed */
}

/* Editor: page handles vertical scroll; no horizontal overflow */
.gb-left .CodeMirror{
  box-sizing: border-box;
  max-width: 100%;
  overflow-y: visible !important;    /* let the page scroll vertically */
  overflow-x: hidden !important;     /* prevent sideways bleed */
}

/* Enable soft wrapping for long JSON lines (was: no wrapping) */
.CodeMirror-wrap pre{
  white-space: pre-wrap;             /* allow wrapping within lines */
  overflow-wrap: anywhere;           /* break long tokens/URLs if needed */
  word-break: break-word;
}

/* Remove only the top padding above the title */
#root > .p-6 { padding-top: 0 !important; }

#loaded-json, #loaded-json-container { display: none; }

.CodeMirror{
font-size:20px !important; 
}