:root{color-scheme:dark;--canvas:#363636;--surface:#414141;--raised:#4b4b4b;--border:#686868;--text:#f0f4f8;--secondary:#b7c0cc;--accent:#60d0e8;--flow-forward:#60d0e8;--flow-back:#c6a0ee;--flow-error:#ff7777;font:14px/1.5 system-ui,sans-serif;color:var(--text);background:var(--canvas)}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--surface)}h1{font-size:22px;margin:3px 0 0;letter-spacing:-.5px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--secondary)}button,select,input,textarea{font:inherit;color:inherit;background:var(--raised);border:1px solid var(--border);border-radius:7px}button,select{padding:8px 12px;min-height:36px;cursor:pointer}button:hover{border-color:var(--accent)}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,#canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);color:#0d1015;border:0;font-weight:650}nav{display:flex;gap:16px;align-items:center;padding:12px 24px;border-block:1px solid var(--border)}nav label{display:flex;align-items:center;gap:10px}#coverage{color:var(--secondary);font-size:12px;flex:1}.exchange{display:flex;gap:8px}main{display:flex;flex:1;min-height:0}#canvas{user-select:none;-webkit-user-select:none;flex:1;position:relative;overflow:hidden;touch-action:none;cursor:grab;background-image:radial-gradient(#626262 1px,transparent 1px);background-size:24px 24px}#canvas.dragging{cursor:grabbing}#world{position:absolute;overflow:visible;transform-origin:0 0;width:1px;height:1px}#edges{position:absolute;inset:0;width:1px;height:1px;overflow:visible;pointer-events:none}.edge{fill:none;stroke:var(--edge-color,var(--accent));stroke-width:2}.edge.active{stroke-width:3}.edge-label{font-size:12px;fill:var(--edge-color,#d5dde7);paint-order:stroke;stroke:var(--canvas);stroke-width:7;stroke-linejoin:round}.node{position:absolute;width:270px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0004;overflow:hidden;cursor:default}.node.selected{border:2px solid var(--accent);box-shadow:0 0 0 4px #60d0e81a}.node-head{display:flex;align-items:center;gap:8px;padding:12px;cursor:move;background:var(--raised)}.node-head button{padding:0;background:none;border:0;text-align:left;min-height:0;flex:1;font-weight:600}.number{font-size:11px;color:var(--secondary)}.thumb{border:0;border-radius:0;background:none;padding:0;display:block;width:100%;min-height:0}.thumb img{width:100%;height:147px;object-fit:contain;display:block}.missing{height:147px;display:flex;align-items:center;justify-content:center;color:var(--secondary);font-size:12px;background:#383838}.node-bottom{padding:9px 12px;font-size:11px;color:var(--secondary);display:flex;justify-content:space-between}.note-count{color:var(--accent)}.canvas-help{position:absolute;bottom:18px;left:20px;pointer-events:none;font-size:11px;color:var(--secondary);background:#363636ee;padding:8px 12px;border-radius:6px}.canvas-help span{opacity:.8}.zoom{position:absolute;bottom:20px;right:20px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);padding:4px;border-radius:8px}.zoom button{border:0;background:none}.zoom output{min-width:40px;text-align:center}aside{width:390px;flex-shrink:0;overflow:auto;border-left:1px solid var(--border);background:var(--surface);padding:22px}aside h2{font-size:20px;margin:0}aside h3{font-size:13px;margin:22px 0 7px}aside p{color:var(--secondary);font-size:13px}.inspector-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.preview{width:100%;padding:0;margin:18px 0 0;background:var(--canvas);overflow:hidden}.preview img{display:block;width:100%}.destinations{display:flex;flex-direction:column;gap:6px}.destinations button{text-align:left;font-size:12px}.destinations small{color:var(--secondary);display:block}details{margin-top:24px;font-size:11px;color:var(--secondary)}summary{cursor:pointer}.note-form{display:flex;flex-direction:column;gap:8px}.note-form label{font-size:12px;color:var(--secondary)}input,textarea{width:100%;padding:10px}textarea{min-height:100px;resize:vertical}.note{border:1px solid var(--border);border-radius:8px;padding:12px;margin:10px 0}.note p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);margin:8px 0}.note small{color:var(--secondary)}.note-actions{display:flex;gap:8px;margin-top:8px}.note-actions button{font-size:11px;min-height:28px;padding:3px 8px}footer{padding:9px 24px;font-size:11px;color:var(--secondary);border-top:1px solid var(--border)}dialog{padding:16px;background:var(--canvas);border:1px solid var(--border);max-width:96vw;max-height:94vh;border-radius:12px}dialog::backdrop{background:#000b}dialog img{display:block;max-width:90vw;max-height:80vh;object-fit:contain;margin-top:12px}[hidden]{display:none!important}@media(max-width:800px){header{padding:12px}h1{font-size:17px}.eyebrow{font-size:9px}.exchange button{font-size:11px;padding:6px}nav{padding:8px;gap:8px;flex-wrap:wrap}#coverage{display:none}aside{position:absolute;right:0;top:130px;bottom:35px;width:min(390px,90vw);z-index:4;box-shadow:-15px 0 40px #0006}.canvas-help{max-width:55%;left:8px;font-size:10px}footer{padding:6px 12px}}

body.canvas-dragging,body.canvas-dragging *{user-select:none!important;-webkit-user-select:none!important}#canvas img{-webkit-user-drag:none}

.node,.node *{cursor:default}.node-title{flex:1;font-weight:600}.node:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.node.is-dragging,.node.is-dragging *{cursor:grabbing}.node.is-dragging{border-color:var(--accent);box-shadow:0 12px 32px #0006;z-index:2}.node-bottom{align-items:center;min-height:35px}.note-dot{width:8px;height:8px;border-radius:50%;background:#ffab55;flex-shrink:0}.review-state[data-state=approved]{color:#b6e5be}.review-state[data-state=changes]{color:#ffd0a1}.review-control{display:flex;flex-direction:column;gap:8px;margin-top:18px;font-size:12px;color:var(--secondary)}

.node{transition:opacity .25s,filter .25s,border-color .25s}.node.neighbor{border-color:var(--accent)}.node.dimmed{opacity:.28;filter:brightness(.55) saturate(.3)}.edge.dimmed,.edge-label.dimmed{opacity:.15}.edge,.edge-label{transition:opacity .25s}.node.is-dragging{opacity:1;filter:none}@media(prefers-reduced-motion:reduce){.node,.edge,.edge-label{transition:none}}@media(max-width:800px){aside{top:auto;height:42vh;max-height:420px}}

.note-form{margin-top:18px}

.legend-forward{color:var(--flow-forward)}.legend-back{color:var(--flow-back)}.legend-error{color:var(--flow-error)}
.outcome-hint{color:var(--flow-forward);margin-left:auto;text-align:right;font-size:10px}
.callout-marker{position:absolute;right:9px;top:8px;border-radius:50%;background:#f0c47a;color:#282828;width:18px;height:18px;text-align:center;font-weight:700;font-size:12px;z-index:1}
.callout-marker::after{content:attr(data-note);display:none;position:absolute;top:25px;right:0;width:215px;padding:9px 11px;border:1px solid #f0c47a;border-radius:7px;background:#35312a;color:#fff;text-align:left;font-weight:400;line-height:1.35;box-shadow:0 5px 16px #0009}
.callout-marker:hover::after,.callout-marker:focus-visible::after,.callout-marker.is-open::after{display:block}
.callout-marker{cursor:pointer!important}.callout-marker:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.end-actions{border-left:3px solid var(--flow-forward);padding:1px 10px;margin-top:18px}.end-actions p{margin:6px 0}
.node-bottom.has-summary{flex-wrap:wrap}.summary-note{flex-basis:100%;color:var(--text);font-size:10px;line-height:1.3;margin-top:4px}
.scene-summary{border-left:3px solid var(--flow-forward);padding:7px 10px;background:#344649;color:var(--text)}
.research-question{margin:16px 0 0;padding:12px 14px;border-left:4px solid var(--accent);border-radius:0 7px 7px 0;background:#344649;color:var(--text);font-size:15px;font-weight:650;line-height:1.4}
#import-dialog{width:min(440px,90vw);padding:22px}#import-dialog h2{margin:0 0 12px;font-size:19px}#import-dialog p{font-size:13px;color:var(--secondary)}#import-dialog strong{color:var(--text)}.import-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:22px}
#help-dialog{width:min(780px,calc(100vw - 32px));max-height:min(88dvh,900px);padding:0;overflow:auto;border:1px solid #65717a;border-radius:18px;background:#292f33;box-shadow:0 24px 80px #0009}
.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:30px 34px 25px;border-bottom:1px solid #485158;background:linear-gradient(135deg,#34464c,#292f33 70%)}
.help-kicker{display:block;margin-bottom:9px;color:var(--accent);font-size:11px;font-weight:750;letter-spacing:.13em}
#help-dialog h2{margin:0;color:var(--text);font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.03em}
#help-dialog p{margin:7px 0 0;color:#cbd4da;font-size:14px;line-height:1.5}
.help-close{flex:none;width:36px;height:36px;min-height:36px;padding:0;border:1px solid #6a777e;border-radius:50%;background:#3e4b50;color:var(--text);font-size:24px;line-height:1}
.help-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:22px 24px;list-style:none}
.help-steps li{display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px;border:1px solid #4d5b61;border-radius:12px;background:#353e42}
.help-step-number{color:var(--accent);font-size:22px;font-weight:750;letter-spacing:-.05em;line-height:1}
#help-dialog h3{margin:0;color:var(--text);font-size:15px;line-height:1.3}
.help-steps p{font-size:12px!important;line-height:1.55!important}
#help-dialog strong{color:var(--text)}
.help-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 34px 30px}
.help-bottom section{padding-top:18px;border-top:1px solid #526067}
.help-legend-items{display:flex;flex-direction:column;gap:11px;margin-top:15px;color:#dbe2e6;font-size:12px}
.help-legend-items span{display:flex;align-items:center;gap:12px}
.help-line{display:inline-block;width:32px;height:0;flex:none;border-top:3px solid var(--flow-forward)}
.help-line-back{border-color:var(--flow-back)}
.help-line-error{border-color:var(--flow-error)}
.help-note p{margin-top:11px!important;font-size:12px!important;line-height:1.55!important}
@media(max-width:620px){#help-dialog{max-height:90dvh}.help-head{padding:24px 22px}.help-steps{grid-template-columns:1fr;padding:16px}.help-steps li{flex-direction:row;padding:16px}.help-step-number{min-width:31px}.help-bottom{grid-template-columns:1fr;gap:16px;padding:0 22px 24px}}
.node.path-muted:not(.selected){opacity:.33;filter:brightness(.67) saturate(.55)}.node.dimmed.path-muted:not(.selected){opacity:.18}.node.selected{opacity:1;filter:none}
.node.path-muted:hover,.node.path-muted:focus-within,.node.dimmed.path-muted:hover,.node.dimmed.path-muted:focus-within{opacity:1;filter:none}
.edge.secondary-edge:not(.active),.edge-label.secondary-edge:not(.active){opacity:.5}
.edge.path-bridge:not(.active),.edge-label.path-bridge:not(.active){opacity:.34}
.edge.path-muted:not(.active),.edge-label.path-muted:not(.active){opacity:.12}
.edge.dimmed:not(.active),.edge-label.dimmed:not(.active){opacity:.12}
.node.route-summary{border-style:dashed;border-color:var(--flow-forward);background:#343b3d}
nav{flex-wrap:wrap}#journey-guide{flex-basis:100%;font-size:12px;color:var(--secondary);padding-top:2px}#journey-guide strong{color:var(--text)}
#journey-guide button{min-height:26px;margin-left:8px;padding:2px 8px;color:var(--text)}
.route-summary .node-head{background:#405052}
.route-summary .thumb{display:flex;align-items:center;justify-content:center;padding:18px;min-height:150px;background:#343b3d}
.route-summary .summary-body{margin:0;color:var(--text);font-size:13px;line-height:1.45;text-align:left}
.route-summary .summary-footer{color:var(--secondary);font-size:11px}

/* Readable supporting text at normal map zoom. */
.eyebrow,.number{font-size:12px}
#coverage,#journey-guide,.canvas-help,footer{font-size:13px}
.edge-label{font-size:14px}
.node-title{font-size:14px;line-height:1.35}
.node-bottom{gap:6px;flex-wrap:wrap;font-size:12px;line-height:1.35}
.outcome-hint,.summary-note,.route-summary .summary-footer{font-size:12px}
.review-control,.note-form label{font-size:13px}
aside h3{font-size:15px}aside p{font-size:14px}
.destinations button{font-size:14px}.destinations small,.note small{font-size:12px}
.note-actions button{font-size:12px;min-height:32px}
details{font-size:13px}
#help-dialog .help-steps p,#help-dialog .help-note p{font-size:13px!important}
.help-kicker,.help-legend-items{font-size:13px}
@media(max-width:800px){.eyebrow{font-size:11px}.exchange button{font-size:13px}.canvas-help,footer{font-size:12px}}