/* From Author to Learner - fixed total height (CANVAS_HEIGHT 600):
   title bar 36px + body 564px (diagram 58% | info panel 42%).
   Under 560px the info panel moves below the diagram; the total height stays 600px. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
main { display: block; }

#app {
    position: relative;
    height: 600px;
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    background: aliceblue;
    overflow: hidden;
}
#titlebar { flex: 0 0 36px; padding: 8px 12px 0 12px; }
#title { font-size: 19px; font-weight: bold; }

#body { flex: 1 1 auto; min-height: 0; display: flex; }
#diagram-panel {
    flex: 0 0 58%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 8px 8px;
    overflow: hidden;       /* never scroll inside the iframe */
}
#diagram { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#diagram svg { max-width: 100%; max-height: 100%; height: auto; }

#info-panel {
    flex: 1 1 auto;
    min-width: 0;
    background: white;
    border-left: 1px solid silver;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    overflow: hidden;
}
#legend { font-size: 13px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid gainsboro; }
#legend div { margin: 2px 0; }
.swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    vertical-align: -1px; margin-right: 6px; border: 1px solid #333;
}
#info h3 { margin: 0 0 6px 0; font-size: 17px; }
#info p { margin: 0 0 8px 0; }
#info .label { font-weight: bold; }
#info .hint { color: dimgray; }
#info code {
    display: block;
    background: darkslategray;
    color: white;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 5px;
    margin: 3px 0 8px 0;
    white-space: pre-wrap;
    word-break: break-word;
}
#info .wrong { color: firebrick; font-weight: bold; }

/* Mermaid interaction styles */
#diagram .node { cursor: pointer; }
#diagram .node.selected rect { stroke: gold !important; stroke-width: 4px !important; }
#diagram path.flowchart-link.hl { stroke: #d9480f !important; stroke-width: 4px !important; }
#diagram .edge-hit { cursor: help; }

#edge-tip {
    position: absolute;
    display: none;
    max-width: 230px;
    background: #2c3e50;
    color: white;
    font-size: 13px;
    line-height: 1.35;
    padding: 7px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

@media (max-width: 559px) {
    #body { flex-direction: column; }
    #diagram-panel { flex: 1 1 auto; min-height: 0; }
    #info-panel { flex: 0 0 215px; border-left: none; border-top: 1px solid silver; font-size: 14px; padding: 8px 10px; line-height: 1.3; }
    #legend { display: none; }
    #info h3 { font-size: 16px; }
}