#exploration-graph { margin:18px 0;padding:22px;border:1px solid #dce4ef;border-radius:12px;background:#fff; }
#exploration-graph[hidden] { display:none; }
.graph-header { display:flex;align-items:start;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.graph-header h3 { margin:4px 0 8px;font-size:19px;color:#172033; }
.graph-toolbar { display:flex;gap:6px;flex-wrap:wrap; }
.graph-toolbar button { padding:7px 11px;border:1px solid #cbd5e1;background:#f8fafc;border-radius:6px;cursor:pointer;color:#344054;font:inherit;font-size:12px; }
#graph-summary { color:#334155;font-size:13px; }
#graph-state { font-size:12px;font-weight:600;color:#334155; }
#graph-note,#graph-read-status { color:#64748b;font-size:12px;line-height:1.65; }
#graph-read-status:not(:empty) { color:#a16207; }
.graph-workspace { display:grid;grid-template-columns:minmax(0,1fr) 290px;border:1px solid #e2e8f0;border-radius:9px;overflow:hidden;margin-top:14px; }
.graph-canvas { min-width:0;overflow:auto;background-color:#f8fafc;background-image:radial-gradient(#dbe3ed 1px,transparent 1px);background-size:20px 20px; }
#exploration-svg { display:block;min-width:600px;width:100%;height:460px; }
.graph-edge { fill:none;stroke:#9caebf;stroke-width:2; }
.graph-edge.agent { stroke:#8b5cf6;stroke-width:3; }
.graph-arrow { fill:#64748b; }
.graph-edge-label { fill:#475569;font:11px system-ui;paint-order:stroke;stroke:#f8fafc;stroke-width:5; }
.graph-node { cursor:pointer;outline:none; }
.graph-node rect { fill:#fff;stroke:#94a3b8;stroke-width:1.5; }
.graph-node.current rect { fill:#eaf3ff;stroke:#2563eb;stroke-width:2.5; }
.graph-node.trouble rect { stroke-dasharray:5 3; }
.graph-node.selected rect,.graph-node:focus-visible rect { stroke:#7c3aed;stroke-width:3; }
.graph-node text { fill:#172033;font:600 13px system-ui;pointer-events:none; }
.graph-node .graph-node-subtitle { fill:#64748b;font:10px system-ui; }
#graph-details { padding:16px;border-left:1px solid #e2e8f0;background:#fff;overflow:auto;max-height:460px;font-size:12px;line-height:1.65; }
#graph-details h4 { margin:0 0 10px;font-size:15px; }
#graph-details p { overflow-wrap:anywhere;margin:9px 0; }
#graph-details details { border-top:1px solid #e2e8f0;padding-top:10px;margin-top:14px; }
.graph-mono { font:10px/1.7 ui-monospace,SFMono-Regular,monospace;color:#64748b;overflow-wrap:anywhere; }
.graph-outcome { font-weight:700;color:#334155; }
.graph-history { margin-top:16px; }
.graph-history summary { font-weight:600;font-size:13px;cursor:pointer; }
#graph-timeline { max-height:260px;overflow:auto;padding:0;list-style:none;margin:12px 0 0; }
#graph-timeline button { display:block;width:100%;padding:9px 12px;text-align:left;border:0;border-bottom:1px solid #edf1f6;background:#fff;color:#334155;font:12px/1.5 system-ui;cursor:pointer; }
#graph-timeline button[data-outcome="ineffective"],#graph-timeline button[data-outcome="interrupted"],#graph-timeline button[data-outcome="blocked"] { border-left:3px solid #d97706; }
#graph-timeline button[aria-pressed="true"],#graph-timeline button:hover { background:#f1edff; }
.graph-toolbar button:focus-visible,#graph-timeline button:focus-visible { outline:3px solid #93c5fd;outline-offset:-3px; }
@media(max-width:850px) { .graph-workspace { grid-template-columns:1fr; } #graph-details { border-left:0;border-top:1px solid #e2e8f0;max-height:330px; } #exploration-svg { height:350px; } }

#exploration-graph { container-type:inline-size;font-family:system-ui,-apple-system,sans-serif;box-sizing:border-box; }
.graph-trouble-badge { fill:#d97706;stroke:#fff;stroke-width:1.5; }
@container (max-width:850px) { .graph-workspace { grid-template-columns:1fr; } #graph-details { border-left:0;border-top:1px solid #e2e8f0;max-height:300px; } }

.graph-canvas { height:460px; }
#exploration-svg { width:auto;height:auto;min-width:0;max-width:none; }
@media(max-width:850px) { .graph-canvas { height:350px; } }

.navigation-goals { padding:16px 18px;margin:16px 0;border:1px solid #dce5f5;border-radius:10px;background:#f8faff;font-size:12px;line-height:1.7; }
.navigation-goals h4 { margin:0 0 8px;color:#334155;font-size:13px; }
.navigation-goals strong { font-size:15px;color:#172033; }
.navigation-goals p { margin:6px 0; }
.navigation-goals details { margin-top:10px; }
.navigation-goals summary { cursor:pointer;font-weight:600; }
.goal-status { font-weight:700;color:#2563eb; }
.goal-status[data-state="completed"] { color:#047857; }
.goal-status[data-state="blocked"],.goal-status[data-state="interrupted"] { color:#b45309; }
.goal-status[data-state="deferred"] { color:#64748b; }
.goal-milestones { padding-left:18px;margin:10px 0; }
.utility-table { width:100%;border-collapse:collapse;font:10px/1.6 system-ui; }
.utility-table th,.utility-table td { padding:7px 5px;vertical-align:top;text-align:left;border-bottom:1px solid #e2e8f0;overflow-wrap:anywhere; }
.utility-table .selected { background:#f1edff; }

/* Native disclosure state survives graph/timeline refreshes. Both start closed. */
.collapsible-panel > .panel-disclosure { cursor:pointer; outline-offset:6px; color:#172033; }
.panel-disclosure .disclosure-label { display:inline-block; vertical-align:middle; }
.panel-disclosure .eyebrow { display:block; margin:0 0 6px; font-size:10px; letter-spacing:.08em; }
.panel-disclosure .disclosure-title { display:block; font-size:18px; font-weight:700; line-height:1.4; }
.collapsible-panel[open] > .panel-disclosure { margin-bottom:16px; }
.collapsible-panel > .graph-header { justify-content:flex-end; }