body{background:var(--cream);color:var(--ink);font:15px/1.5 var(--font-body)}[hidden]{display:none!important}button,input,select{font:inherit;color:inherit;background:var(--cream);border:1px solid var(--ink-faint);border-radius:0;padding:9px}button{cursor:pointer}button:hover{background:var(--cream-dark)}:focus-visible{outline:3px solid var(--rust);outline-offset:3px}header{display:flex;align-items:center;gap:24px;padding:16px 28px;border-bottom:4px solid var(--rust);font:12px var(--font-label)}header a{color:inherit;font-weight:bold;text-decoration:none}header span{flex:1}h1{font:42px/1.1 var(--font-title);letter-spacing:2px}h2{font:13px var(--font-label);text-transform:uppercase;margin:18px 0 12px}.eyebrow{font:11px var(--font-label);letter-spacing:2px;margin-bottom:10px}.password-row{display:flex;gap:8px}.password-row input{min-width:0;flex:1}#gate-error{color:var(--warn)}#workspace{padding:22px 28px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.heading p{font:12px var(--font-label)}.toolbar{display:flex;align-items:end;gap:14px;flex-wrap:wrap;border-block:1px solid var(--ink-faint);padding:14px 0}.toolbar label{display:grid;gap:5px;font:11px var(--font-label)}.toolbar input,.toolbar select{font:13px var(--font-body)}.toolbar .check{display:flex;align-items:center;min-height:40px}.check input{width:17px;height:17px}.canvas-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;margin-top:16px;border:1px solid var(--ink-faint)}.map-wrap{position:relative;min-width:0}.map-tools{display:flex;gap:6px;padding:10px;flex-wrap:wrap;border-bottom:1px solid var(--ink-faint)}.map-tools output{align-self:center;min-width:48px;text-align:center;font:12px var(--font-label)}#canvas{height:65vh;min-height:440px;overflow:hidden;position:relative;cursor:grab;touch-action:none;background:var(--cream-dark)}#world{position:absolute;transform-origin:0 0}#edges,#edge-labels{position:absolute;top:0;left:0;width:1px;height:1px;overflow:visible;pointer-events:none}.edge{stroke:var(--ink-faint);stroke-width:1.5;opacity:.32}.edge.prepared{stroke-dasharray:6 5}.edge.selected{stroke:var(--ink);stroke-width:2;opacity:.8}.node{position:absolute;width:202px;border:5px solid var(--faction);border-left-width:9px;background:var(--cream);cursor:default}.node.selected{outline:2px solid var(--ink);outline-offset:4px;z-index:2}.node-head{width:100%;border:0;padding:12px;text-align:left;cursor:grab;touch-action:none;display:block}.node-name{display:block;font-weight:700;margin:7px 0}.node-affiliation{display:block;padding:8px 10px;font:bold 10px/1.4 var(--font-label);background:var(--faction);color:#fff;text-transform:uppercase;letter-spacing:.4px}.badge{display:inline-block;font:bold 10px var(--font-label);padding:3px 5px;color:white;vertical-align:middle}.pc{background:#276a88}.npc{background:#995133}.node-more{border-top:1px solid var(--ink-faint);padding:12px;font-size:12px;line-height:1.5;max-height:300px;overflow:auto}.node-more p+p{margin-top:10px}.node-more small{display:block;color:var(--ink-faint);margin-top:10px}.canvas-help{font:11px/1.5 var(--font-label);padding:10px}.canvas-layout aside{padding:0 18px 18px;border-left:1px solid var(--ink-faint);max-height:calc(65vh + 100px);overflow:auto;font-size:12px}aside p{margin:12px 0}.legend-item{display:flex;gap:8px;align-items:center;margin:7px 0}.swatch{width:22px;height:16px;border:1px solid var(--ink);flex:none}#connections{padding-left:16px}#connections li{margin:12px 0}#note{font-size:11px;color:var(--ink-light)}#status{min-height:24px;font-size:12px}@media(max-width:800px){header{padding:14px}header span{font-size:10px}#workspace{padding:16px}.canvas-layout{grid-template-columns:1fr}.canvas-layout aside{border-left:0;border-top:1px solid var(--ink-faint);max-height:300px}#canvas{height:60vh;min-height:360px}.heading{gap:12px}h1{font-size:32px}.password-row{flex-wrap:wrap}.gate{padding:22px}.toolbar>label:first-child{width:100%}}

/* Portrait controls are separate buttons: clicking artwork never starts a node drag. */
.has-portrait .node-head{padding-right:72px;min-height:106px}
.portrait-thumb,.portrait-initials{position:absolute;right:8px;top:10px;width:52px;height:65px;padding:0;border:2px solid var(--faction);display:grid;place-items:center;overflow:hidden;background:var(--cream-dark)}
.portrait-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 25%;pointer-events:none}
.portrait-initials{font:bold 16px var(--font-label);color:var(--ink-faint);pointer-events:none}
.portrait-thumb:hover{outline:2px solid var(--ink);outline-offset:2px}
.node-head{user-select:none}
#portrait-dialog{margin:auto;max-width:94vw;max-height:94vh;padding:0;border:2px solid var(--ink);background:var(--cream);color:var(--ink)}
#portrait-dialog::backdrop{background:rgba(0,0,0,.8)}
.portrait-view{padding:16px;min-width:min(360px,85vw)}
.portrait-heading{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:12px}
.portrait-heading h2{margin:0;font-size:15px}
#portrait-image{display:block;max-width:100%;width:auto;height:auto;max-height:78vh;margin:auto;object-fit:contain}
#portrait-status:not(:empty){padding:20px 0}
.artifact-list{display:grid;gap:6px;margin:8px 0 14px}
.artifact-list button{text-align:left;font-size:12px}
.image-viewport{overflow:auto;max-height:74vh;max-width:calc(94vw - 36px)}
.image-actual-size #portrait-image{max-width:none;max-height:none}
#image-size{margin-bottom:10px;font-size:12px}

.node-connection{display:block;margin:5px 8px;padding:3px 6px;border-left:4px solid;font:10px/1.4 var(--font-label);color:var(--ink-light)}
.related-group{padding-left:16px}

/* Player view is the default; GM-only controls and keys appear with the GM layer. */
body:not(.gm) .gm-only{display:none!important}
body.gm header{border-bottom-color:var(--ink)}
#gm-dialog,#card-dialog,#string-dialog{margin:auto;max-width:min(580px,92vw);padding:0;border:2px solid var(--ink);background:var(--cream);color:var(--ink)}
#gm-dialog::backdrop,#card-dialog::backdrop,#string-dialog::backdrop{background:rgba(0,0,0,.7)}
.gate{padding:30px}
.gate h2{font:28px/1.1 var(--font-title);letter-spacing:1px;text-transform:none;margin:0 0 12px}
.gate p{margin:16px 0}
.gate label{display:block;margin-bottom:8px}
.gate small{display:block;color:var(--ink-faint)}
.gate .link{border:0;padding:0;background:none;text-decoration:underline;color:inherit}
#as-of{font:12px var(--font-label);color:var(--ink-light);margin-top:8px}
/* Hatched cards are GM-layer characters the party has not met yet. */
.node.unmet{background:repeating-linear-gradient(135deg,var(--cream) 0 8px,var(--cream-dark) 8px 10px)}
.unmet-tag{border-left-style:dashed;border-color:var(--ink-faint)}

/* Dragging and clicking cards must never paint text selections; unfolded notes stay copyable. */
#canvas{-webkit-user-select:none;user-select:none}
.node-more{-webkit-user-select:text;user-select:text}
#edge-labels{z-index:3}
.edge-label text{font:11px var(--font-body);fill:var(--ink)}
.edge-label rect{fill:var(--cream);stroke:var(--ink-faint);stroke-width:1}
.edge-label.selected rect{stroke:var(--ink)}
.node{transition:opacity .15s}
.node.dim{opacity:.35}
.node.dim:hover,.node.dim:focus-within{opacity:1}
.arrange,.board-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.arrange{margin-left:auto}
.arrange>span,.board-tools>span{font:11px var(--font-label);margin-right:2px}

/* Case board: the player's own cards and red strings. */
.board-card{--faction:var(--rust);border-style:dashed;border-width:3px;border-left-width:3px}
.board-card .node-head{min-height:0}
.board-card.kind-question .node-name::before{content:"? ";color:var(--rust)}
.badge.board{background:var(--rust);color:var(--cream)}
.card-actions{display:flex;gap:6px;margin-top:10px}
.card-actions button{padding:4px 10px;font-size:12px}
.edge.string{stroke:var(--warn);stroke-dasharray:9 4;stroke-width:2;opacity:.8}
.edge-label.string rect{stroke:var(--warn)}
.string-key{color:var(--warn);font-weight:bold}
#canvas.connecting,#canvas.connecting .node-head{cursor:crosshair}
.your-note{display:block;margin-top:12px;font:11px var(--font-label)}
.your-note textarea{display:block;width:100%;margin-top:6px;font:12px/1.4 var(--font-body);resize:vertical}
.has-note .node-name::after{content:" ✎";color:var(--rust)}
.board-menu{position:relative}
.board-menu summary{cursor:pointer;list-style:none;border:1px solid var(--ink-faint);padding:9px}
.board-menu summary::-webkit-details-marker{display:none}
.board-menu>div{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:grid;gap:4px;padding:8px;background:var(--cream);border:1px solid var(--ink);min-width:190px}
.board-menu>div button{text-align:left}
.gate input,.gate select,.gate textarea{width:100%;margin-bottom:12px}
.gate textarea{font:13px/1.4 var(--font-body);resize:vertical}
.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
/* Sidebar: open questions and loose ends. */
.panel-help{color:var(--ink-light);margin-top:-6px}
.questions{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:6px}
.question{display:grid;gap:2px;width:100%;text-align:left;padding:8px 10px;font-size:12px;line-height:1.35}
.question small{font:10px var(--font-label);color:var(--ink-light)}
.question[aria-expanded="true"]{border-color:var(--ink);background:var(--cream-dark)}
.question.own::before{content:"? ";color:var(--rust);font-weight:bold}
.question-detail{border:1px solid var(--ink-faint);border-top:0;padding:8px 10px 10px}
.question-detail ul{padding-left:16px;margin:0}
.question-detail li{margin:6px 0}
.question-detail .answer{font-weight:bold}
.pin{margin-top:8px;padding:5px 10px;font-size:12px}
details.key summary{cursor:pointer;list-style:none}
details.key summary::-webkit-details-marker{display:none}
details.key summary h2{display:inline-block}
details.key summary h2::after{content:" +"}
details.key[open] summary h2::after{content:" −"}
#connections .link{border:0;padding:0;background:none;text-decoration:underline;color:inherit;font-size:11px}