@import url("../fonts/inter.css");
@import url("../fonts/monoid.css");

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  background-color: #111122;
}
.container {
  display: flex;
  width: 100%;
  height: 100%;
}
#resizer {
  flex-shrink: 0;
  width: 5px;
  background: #555;
  cursor: col-resize; /* Indicates this can be dragged horizontally */
  user-select: none; /* Prevents text selection while dragging */
}

.editor-pane {
  flex-shrink: 0; /* Prevents the editor from shrinking on its own */
  width: 40%; /* Initial width */
  min-width: 200px;
  max-width: 80%;
}

.diagram-pane {
  flex-grow: 1; /* Allows the diagram to take up the remaining space */
  display: flex; /* Helps the SVG fill the pane */
}
.cm-editor {
  height: 100%;
}
svg {
  width: 100%;
  height: 100%;
}
.iconoired {
  font-size: 150%;
  fill: #2aa198;
}
.node {
  cursor: grab;
}
.node.grabbing {
  cursor: grabbing;
}
.node.prose-node {
  cursor: pointer;
}
.node.expanded-node {
  cursor: default;
}
.node rect {
  stroke-width: 2px;
  stroke: #2aa198; /* Solarized Cyan */
  fill: #1a1a2e;
}
.node text.label {
  font-size: 14px;
  font-weight: 600;
  fill: #93a1a1;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.link {
  fill: none;
  stroke: #cb4b16; /* Solarized Orange */
  stroke-width: 2px;
}
.link-label {
  font-size: 12px;
  fill: #b58900; /* Solarized Yellow */
  text-anchor: middle;
  dominant-baseline: middle;
  stroke: #111122;
  stroke-width: 4px;
  paint-order: stroke;
  pointer-events: none;
}
.node.prose-node > rect {
  stroke: #268bd2; /* Solarized Blue for highlight */
}
.prose-content {
  font-size: 13px;
  color: #93a1a1;
  line-height: 1.5;
  background-color: #1f1f33;
  padding: 10px;
  border-radius: 4px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
.prose-content p {
  margin: 0;
}
.prose-content a {
  color: #c60;
}
.prose-content::-webkit-scrollbar {
  width: 8px;
}
.prose-content::-webkit-scrollbar-track {
  background: #1a1a2e;
}
.prose-content::-webkit-scrollbar-thumb {
  background-color: #268bd2;
  border-radius: 4px;
  border: 2px solid #1a1a2e;
}

/* Styles for the view-only (quiz) mode */
.container.view-only .editor-pane,
.container.view-only #resizer {
  display: none;
}

.container.view-only .diagram-pane {
  width: 100%;
  height: 100%;
}

/* Style for the highlighted element in quiz mode */
.quiz-highlight rect {
  stroke: #dc322f; /* Solarized Red */
  stroke-width: 3px;
}

.quiz-highlight > text {
  fill: #dc322f; /* Solarized Red */
}