/* Rail track styling for connections */
:root {
  /* Default sizing configuration - Medium preset */
  --rail-grid-size: 16px;
  --rail-font-size: 14px;
  --rail-track-width: 6px;
  --rail-text-border: 3px;
  /* Corner radii for textboxes */
  --rail-terminal-radius: calc(var(--rail-grid-size) * 0.9);
  --rail-nonterminal-radius: calc(var(--rail-grid-size) * 0.6);
}

.rail-track {
    fill: none; /* Prevent filling of the path */
    stroke: #000;
    stroke-width: var(--rail-track-width);
    stroke-linecap: butt; /* End exactly at coordinates, don't extend beyond */
}

/* Terminal styling for start/end points */
.start-terminal,
.end-terminal {
    fill: black;
    stroke: none;
}

.highlight {
    stroke: red;
}

/* Terminal and non-terminal text box styling */
.textbox {
    stroke-width: var(--rail-text-border);
    stroke: black;
    fill: none;
}

.textbox.terminal {
    fill: rgb(200, 200, 200);
}

.textbox.nonterminal {
    fill: rgb(210, 210, 210);
}

.textbox-text {
    font-family: Arial, sans-serif;
    font-size: var(--rail-font-size);
    fill: black;
    text-anchor: "middle";    
    dominant-baseline: "middle";
    alignment-baseline: "middle";
}

.textbox-text.nonterminal {
    text-decoration: underline; /* Underline non-terminals */
    cursor: pointer; /* Show it's clickable */
    pointer-events: auto; /* Ensure text can receive click events */
}

.textbox-text.nonterminal:hover {
    fill: #0066cc; /* Blue on hover */
}

/* CSS-based debug visualization using HTML overlays */
.debug-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.debug-box-overlay {
    position: absolute !important;
    border: 1px dotted hotpink !important;    
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.debug-baseline-overlay {
    position: absolute !important;
    border-top: 1px dashed hotpink !important;
    pointer-events: none !important;
}

/* Ensure container has relative positioning for debug overlay */
.diagram-container {
    position: relative;
    margin-top: 1rem;
}

/* Fallback: Old SVG-based debug styles (in case CSS approach doesn't work) */
.debug-box {
    stroke: hotpink;    
    stroke-width: 1px;
    stroke-dasharray:6 4;
    fill: none;
}

.debug-baseline {
    stroke: hotpink;    
    stroke-width: 1px;
    stroke-dasharray: 1 1;
    fill: none;
}

/* New syntax rule layout styles */
.syntax-rule {
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fafafa;
}

.syntax-rule h2 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.2rem;
}

script[type="text/railroad"] {
    display: none;
}

.error {
    color: red;
    font-weight: bold;
    padding: 1rem;
    background-color: #ffe6e6;
    border: 1px solid red;
    border-radius: 4px;
}