/* Everything is scoped under .imbse so the landing and lab can sit inside another page. Each page keeps its own page rules. */
.imbse .run-label { background: #fff6dc; border-left: 4px solid #d9a400; padding: 8px 12px; margin: 0 0 4px; }
.imbse .run-meta { color: #59616b; font-size: 14px; margin: 0 0 16px; }
.imbse .lab-grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(260px, 360px); gap: 24px; }
.imbse .steps { list-style: none; padding: 0; margin: 0; }
.imbse .step { width: 100%; text-align: left; padding: 10px; margin-bottom: 8px; border: 1px solid #ccd; border-radius: 6px;
  background: #fff; font: inherit; cursor: pointer; }
.imbse .step.current { border-color: #2b5fd9; box-shadow: 0 0 0 2px #2b5fd933; }
.imbse .decision { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.imbse .decision-accepted { color: #1d7a3a; }
.imbse .decision-rejected { color: #b3261e; }
.imbse .gates { padding-left: 20px; }
.imbse .revision { color: #59616b; font-size: 14px; }
.imbse .view { overflow-x: auto; background: #fff; border: 1px solid #dde; border-radius: 6px; padding: 8px; }
.imbse .view svg { display: block; } /* natural size; .view scrolls sideways when a diagram is wider */
.imbse .node rect { fill: #fff; stroke: #6b7480; }
.imbse .node text { font: 12px system-ui, sans-serif; fill: #1d232a; }
.imbse .node.hl-added rect { fill: #e3f5e8; stroke: #1d7a3a; stroke-width: 2; }
.imbse .node.hl-changed rect { fill: #fff3d6; stroke: #b07d00; stroke-width: 2; }
.imbse .edge { fill: none; stroke: #9aa3ad; }
.imbse .error { color: #b3261e; }
@media (max-width: 1100px) { .imbse .lab-grid { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
  .imbse .conversation { grid-column: 1 / -1; } }
@media (max-width: 720px) { .imbse .lab-grid { grid-template-columns: 1fr; } }
/* Plan 3 views */
.imbse .port rect { fill: #e8eef9; stroke: #2b5fd9; }
.imbse .port-label, .imbse .edge-label { font: 11px system-ui, sans-serif; fill: #3b4450; }
.imbse .edge.hl-added, .imbse .edge.hl-changed { stroke: #b07d00; stroke-width: 2; }
.imbse .port.hl-added rect, .imbse .port.hl-changed rect { fill: #fff3d6; stroke: #b07d00; }
.imbse .view-notice { color: #59616b; font-style: italic; }
.imbse .view-unresolved { color: #8a5a00; font-size: 14px; }
.imbse .view-state marker path { fill: #6b7480; }
.imbse .initial { fill: #1d232a; }
.imbse .trace { border-collapse: collapse; width: 100%; margin-bottom: 12px; font-size: 14px; }
.imbse .trace th, .imbse .trace td { border-bottom: 1px solid #dde; padding: 6px 8px; text-align: left; vertical-align: top; }
.imbse .trace .doc { color: #59616b; }
.imbse .trace .doc { border-left: 3px solid #ccd; padding: 0 0 0 12px; margin: 0 0 12px; font-size: 14px; }
.imbse .trace .none { color: #8a5a00; font-style: italic; }
.imbse .ref { font: inherit; background: none; border: 0; padding: 0; color: #2b5fd9; cursor: pointer; text-decoration: underline; }
.imbse .col-head { font: 11px system-ui, sans-serif; fill: #59616b; text-transform: uppercase; }
.imbse .view-change section { margin: 8px 0; }
.imbse .view-change h3 { font-size: 15px; margin: 8px 0 4px; }
.imbse .view-change .fields { color: #3b4450; font-size: 14px; }
.imbse .toolbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; font-size: 14px; }
.imbse .toolbar .saved { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.imbse .toolbar .saved ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0; margin: 0; }
.imbse .toolbar .saved p { margin: 0; color: #59616b; }
.imbse .toolbar details { flex-basis: 100%; }
.imbse .toolbar-message { flex-basis: 100%; margin: 0; color: #1d5a2d; }
.imbse .del { border: 0; background: none; color: #b3261e; cursor: pointer; }
.imbse .view-and-panel { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 16px; align-items: start; }
.imbse .panel { background: #fff; border: 1px solid #dde; border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.imbse .panel h3 { margin: 4px 0; font-size: 16px; }
.imbse .panel .kind, .imbse .panel .qname { color: #59616b; font-weight: normal; }
.imbse .panel blockquote { margin: 8px 0; padding-left: 8px; border-left: 3px solid #d9a400; }
.imbse .panel .label { color: #8a5a00; font-size: 13px; }
.imbse .view [data-handle] { cursor: pointer; }
@media (max-width: 960px) { .imbse .view-and-panel { grid-template-columns: 1fr; } }
/* The three-column lab leaves the middle column narrow: stack the panel under the view there. */
@media (min-width: 1101px) { .imbse .view-and-panel { grid-template-columns: 1fr; } }
.imbse .view .view { border: 0; padding: 0; background: none; }
/* Plan 4: modes, run picker, review, conversation, chat */
.imbse .mode { font-size: 14px; padding: 6px 12px; border-radius: 6px; margin: 0 0 8px; }
.imbse .mode-live { background: #e3f5e8; border-left: 4px solid #1d7a3a; }
.imbse .mode-recorded { background: #eef1f6; border-left: 4px solid #6b7480; }
.imbse .run-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.imbse .run-picker button, .imbse .review button, .imbse .chat button, .imbse .explain, .imbse .reply button { font: inherit; font-size: 14px;
  padding: 4px 10px; border: 1px solid #ccd; border-radius: 6px; background: #fff; cursor: pointer; }
.imbse .run-picker button[aria-current="true"] { border-color: #2b5fd9; box-shadow: 0 0 0 2px #2b5fd933; }
.imbse button:disabled { opacity: 0.55; cursor: wait; }
.imbse .review { background: #fff; border: 1px solid #dde; border-radius: 6px; padding: 8px 16px; margin-bottom: 16px; }
.imbse .review h3 { margin: 4px 0; } .imbse .review h4 { margin: 12px 0 4px; font-size: 14px; color: #3b4450; }
.imbse .review blockquote, .imbse .panel blockquote { margin: 4px 0; padding: 4px 12px; border-left: 3px solid #d9a400; background: #fffbef; }
.imbse .note, .imbse .label, .imbse .reply-label, .imbse .status { color: #59616b; font-size: 13px; }
.imbse .confirm { list-style: none; padding-left: 0; }
.imbse .question { font-weight: 600; }
.imbse .transcript { list-style: none; padding: 0; margin: 0; }
.imbse .exchange { margin-bottom: 12px; }
.imbse .exchange .ask { background: #eef1f6; border-radius: 6px; padding: 6px 10px; }
.imbse .exchange .reply { background: #fff; border: 1px solid #dde; border-radius: 6px; padding: 6px 10px; margin: 4px 0 0 16px; }
.imbse .exchange.current .reply { border-color: #2b5fd9; }
.imbse .exchange p { margin: 4px 0; overflow-wrap: anywhere; }
.imbse .chat { display: grid; gap: 8px; margin-top: 12px; }
.imbse .chat textarea { width: 100%; box-sizing: border-box; font: inherit; }
.imbse .chat fieldset { border: 1px solid #dde; border-radius: 6px; font-size: 14px; }
.imbse .waiting { color: #b07d00; }
.imbse .view g[data-handle]:focus { outline: none; }
.imbse .view g[data-handle]:focus rect { stroke: #2b5fd9; stroke-width: 3; }
.imbse .review code, .imbse .exchange code, .imbse .panel code { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .imbse * { scroll-behavior: auto !important; transition: none !important; } }