/* The 15 v3 module kinds — Chronicler, Wanderer, Narrator, Author, Scribe,
   Drafter, Viewer, Connector, Sketcher, Designer — plus the Sage Hut and
   Import Dock sections and the shared canvas/format toolbars. */
/* ═══ v3 redo pass — builder tab strip, title-bar vault label, header chips
   (progress.md mockups 01-33; decisions (o), A.2/A.3) ═══════════════════ */
.titlebar-vault{font-size:calc(12px * var(--fsc,1));color:var(--t3-aa,var(--t2));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
/* accent "create Major module" rail tool (mockup 01) */
#nav-sidebar .nav-btn.create{background:var(--accent);color:var(--on-accent);border-radius:var(--r)}
#nav-sidebar .nav-btn.create:hover{background:var(--accentH)}
/* module header chips row (tags + link count) */
.module-head .chip{vertical-align:2px;margin-left:6px}
/* ── Chronicler: one-line event rows, side-by-side dates, graph icons ── */
.chr-daterow{display:flex;gap:14px;flex-wrap:wrap}
/* 300px is the width a full 5-box date row actually needs (52+52+70+52+52 plus
   separators). Below that the two dates wrap to their own lines instead of
   squeezing the year field to nothing — which is what happens in the Downline
   list's narrow right-hand column, as opposed to the wide Oneline inspector. */
.chr-daterow .fg{flex:1;min-width:300px}
.chr-insp-foot{display:flex;justify-content:flex-end;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.chr-node-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--t2)}
.chr-node-icon .icon{width:14px;height:14px}
.chr-node-icon .kicon-img-icon{width:14px;height:14px;border-radius:50%;object-fit:cover}
.chr-downline-graph.is-panning{cursor:grabbing}

.module-head .module-handle{
	display:inline-block;min-height:0;line-height:1.4;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:500;color:var(--accentH);
	border:1px solid var(--accent);border-radius:var(--rl);padding:1px 9px;vertical-align:2px;
}
.module-head .mtags{display:flex;gap:6px;margin-top:7px;align-items:center;flex-wrap:wrap}
/* floating canvas toolbar (mockup 03) */
.ctoolbar-float{
	position:absolute;top:12px;left:14px;z-index:calc(var(--z-base) + 3);display:flex;gap:5px;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:5px;
}
.czoom .zsep{width:1px;height:12px;background:var(--border);margin:0 3px}
/* Chronicler Down-line view: vertical proportional line + event list (mockup 22) */
.chr-downline{display:flex;gap:22px;align-items:flex-start}
.chr-downline-graph{flex:0 0 340px;min-width:0;position:relative;overflow:hidden}
.chr-downline-note{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin-top:6px}
.chr-downline-list{flex:1;min-width:0}
/* Chronicler event inspector (Plan part3 #2/#2.1/#2.2): shared below-graph
   (One-line) and per-row dropdown (Down-line) editable panel, one open at a time */
.chr-insp-row{margin-bottom:8px}
.chr-insp-body{
	padding:14px 16px 4px;margin-top:6px;
	background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
	animation:chrInspOpen .14s ease;
}
@keyframes chrInspOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* ── Custom-calendar panel + unit pages (Process 8 part 1) ── */
/* The bar wrapper is the positioning context the panel overlays: the panel is
   absolutely placed over the view bar rather than pushing the grid down. */
.chr-cal-barwrap{position:relative}
.chr-cal-bar{margin-bottom:10px}
.chr-cal-panel{
	position:absolute;top:0;left:0;right:0;z-index:calc(var(--z-base) + 5);
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	box-shadow:var(--shadow-menu);padding:8px 10px 12px;max-height:70vh;overflow-y:auto;
}
.chr-cal-panel-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chr-cal-pagebar{margin-left:0}
.chr-cal-panel-btn{padding:4px 9px;font-size:calc(var(--fs-meta) * var(--fsc,1));white-space:nowrap}
.chr-cal-panel-body{padding:2px}
.chr-cal-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.chr-cal-mainrow{margin-bottom:9px}
.chr-cal-eq{font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t2)}
.chr-cal-num{width:80px}
.chr-cal-unitname{font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t1);font-weight:500}
.chr-cal-sel{padding:5px 7px;background:var(--raised);border:1px solid var(--border);
	border-radius:var(--rs);color:var(--t1);font-size:calc(var(--fs-body) * var(--fsc,1));font-family:inherit}
.chr-cal-hint{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin:2px 0 8px}
.chr-cal-toggles{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0}
.chr-cal-modechip{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--accentH);
	border:1px solid var(--accent);border-radius:var(--rl);padding:1px 8px}
/* Auto-fill rather than a fixed count: a unit may have 3 children or 40. */
.chr-cal-grid-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:6px 0 10px}
.chr-cal-cellin{display:flex;flex-direction:column;gap:3px}
.chr-cal-cellin span{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chr-cal-previewlabel{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));
	text-transform:uppercase;letter-spacing:.04em;margin:10px 0 5px}
.chr-cal-preview{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
	border-radius:var(--rs);overflow:hidden}
.chr-cal-pcell{background:var(--raised);color:var(--t2);font-size:calc(var(--fs-meta) * var(--fsc,1));
	text-align:center;padding:5px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chr-cal-variant{margin-top:10px}
/* Leading blanks that push day 1 under its real weekday — visually empty, so
   no background of their own. */
.chr-cal-blank{background:var(--bg);pointer-events:none}

/* Chronicler calendar view (Plan part5 #3) */
.chr-calendar{display:flex;flex-direction:column}
.chr-cal-settings{
	display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
	padding:12px 14px;margin-bottom:10px;
	background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
}
.chr-cal-settings .fg{min-width:120px}
.chr-cal-settings .fg input{width:100%}
.chr-cal-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.chr-cal-dowcell{background:var(--raised);color:var(--t3-aa,var(--t2));font-size:11px;font-weight:600;text-align:center;padding:6px 4px}
.chr-cal-cell{background:var(--surface);min-height:64px;padding:4px 5px;display:flex;flex-direction:column;gap:2px}
.chr-cal-daynum{font-size:11px;color:var(--t3-aa,var(--t2))}
.chr-cal-ev{
	font-size:10.5px;color:var(--on-media);border-radius:var(--rs);padding:1px 5px;cursor:pointer;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Classifier grid card icon (mockup 21) */
.cls-card-icon{
	width:34px;height:34px;border-radius:50%;border:2px solid var(--border);
	display:flex;align-items:center;justify-content:center;margin:0 auto 8px;
}
.cls-card-icon .icon{width:16px;height:16px}

/* ═══ TimeMap "Wanderer" (Phase 9, mockup 10) ═══════════════════════════ */
.wanderer-split{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.wnd-map-pane{height:380px;border:none;border-radius:0;border-bottom:1px solid var(--border)}
.wnd-tl-pane{min-height:200px;background:var(--surface);padding:8px 4px}
.wnd-refline{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin:2px 0 10px}
/* Wanderer Area view (Plan part5 W5) */
.wnd-area-top{display:flex;min-height:0}
.wnd-area-top .wnd-map-pane{flex:1;min-width:0}
.wnd-arealist-pane{width:260px;flex:0 0 260px;background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);overflow-y:auto;padding:8px}
.wnd-area-row{margin-bottom:6px}
.wnd-area-body{padding:8px 10px;margin-top:4px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r)}

/* Story "Narrator" route board (Phase 10, mockup 11) */
.nar-layout{display:flex;gap:12px;align-items:stretch;min-height:0}
.nar-board{position:relative;flex:1;min-width:0;height:560px;overflow:hidden;
	background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
	background-image:linear-gradient(rgba(90,90,114,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(90,90,114,.14) 1px,transparent 1px);
	background-size:24px 24px;
}
.nar-board.is-panning{cursor:grabbing}
/* Plan part5 Narrator #3: top-center slide-in notice — same idiom as
   #toast's transform+opacity+transition, repositioned to slide down from
   the top-center of the board instead of up from the bottom-right. Lives
   as a sibling of #nar-graph so it never pans/zooms with the board. */
.nar-notice{position:absolute;top:14px;left:50%;z-index:calc(var(--z-base) + 5);
	background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
	padding:9px 15px;font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t1);
	box-shadow:var(--shadow-float);
	transform:translateX(-50%) translateY(-40px);opacity:0;transition:all .2s ease;pointer-events:none;
}
.nar-notice.show{transform:translateX(-50%) translateY(0);opacity:1}
#nar-graph{position:relative;width:2400px;height:1600px;transform-origin:0 0}
#nar-edges{position:absolute;inset:0;pointer-events:none}
.nar-node{position:absolute;width:190px;background:color-mix(in srgb,var(--surface) 92%,transparent); /* Procress 18 part 5: was a fixed dark fill under theme text */border:1.5px solid var(--border);
	border-radius:var(--r);padding:8px 10px;cursor:grab;user-select:none;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.nar-node.sel{box-shadow:0 0 0 3px rgba(99,102,241,.35),0 4px 16px rgba(0,0,0,.35)}
.nar-node.edge-from{outline:2px dashed var(--accent);outline-offset:2px}
.nar-node-head{display:flex;align-items:center;gap:3px}
.nar-node .nn-name{font-size:calc(var(--fs-body) * var(--fsc,1));font-weight:650;color:var(--t1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nar-node .nn-snippet{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);margin-top:3px;line-height:1.45;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nar-node .nn-snippet.ghost{color:var(--t3-aa,var(--t2));font-style:italic}
.nar-node .nn-count{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);margin-top:3px}
.nar-node .nn-desc{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));font-style:italic;margin-top:3px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nar-conv{width:300px;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);
	border:1px solid var(--border);border-radius:var(--r);overflow:hidden;max-height:560px}
.nar-talks{flex:1;overflow-y:auto;padding:6px 8px}
.nar-talk{display:flex;gap:5px;align-items:center;margin-bottom:6px}
.nar-talk .nt-speaker{width:84px;flex-shrink:0}
.nar-talk .nt-text{flex:1;min-width:0}
.nar-talk input{background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);
	padding:5px 8px;color:var(--t1);font-size:calc(12px * var(--fsc,1))}
.nar-talk-new{padding:8px;border-top:1px solid var(--border)}
/* Process 8 part 2 — one ordered list of two row kinds. .nar-row is the drag
   handle wrapper both kinds share; .drop-before/.drop-after come from the
   generic reorder rules the module tree and Author's chapter list use. */
.nar-row{border-radius:var(--rs)}
.nar-grip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;color:var(--t3-aa,var(--t2));cursor:grab;opacity:.55;touch-action:none}
.nar-grip:hover{color:var(--t2);opacity:1}
.nar-grip .icon{width:14px;height:14px}
.nar-row.drop-before{box-shadow:inset 0 2px 0 0 var(--accent)}
.nar-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--accent)}
.nar-choice{border:1px dashed var(--border);padding:6px;margin-bottom:6px;background:var(--raised)}
.nar-choice-head{display:flex;gap:5px;align-items:center}
.nar-choice-head .nt-text{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);
	border-radius:var(--rs);padding:5px 8px;color:var(--t1);font-size:calc(12px * var(--fsc,1))}
.nar-choice-opts{margin:6px 0 0 12px;border-left:2px solid var(--border);padding-left:8px}
/* The conversation panel is only 300px wide, so an option's four controls
   wrap onto two lines: the option text owns the first, the effect kind and
   its value share the second. One row of four would truncate every label. */
.nar-choice-opt{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:6px}
.nar-choice-opt input,.nar-choice-opt select{background:var(--surface);border:1px solid var(--border);
	border-radius:var(--rs);padding:4px 6px;color:var(--t1);font-size:calc(var(--fs-meta) * var(--fsc,1));min-width:0}
.nar-choice-opt .nco-text{flex:1 1 calc(100% - 34px);order:1}
.nar-choice-opt > .btn{order:2;flex:0 0 auto}
.nar-choice-opt .nco-kind{flex:1 1 calc(45% - 4px);order:3}
.nar-choice-opt .nco-effect,.nar-choice-opt .nco-jump{flex:1 1 calc(55% - 4px);order:4}
.nar-read-choice{margin:6px 0;padding-left:10px;border-left:2px solid var(--border)}
.nar-read-choice-opt{font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t2);line-height:1.7}
.nar-read-choice-opt .ghost{color:var(--t3-aa,var(--t2))}
.nar-reader{max-width:760px}
.nar-read-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	padding:12px 16px;margin-bottom:12px}
.nar-read-sec h4{font-size:calc(var(--fs-body) * var(--fsc,1));margin-bottom:6px}
.nar-read-line{font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t2);line-height:1.8}
.nar-read-line.ghost{color:var(--t3-aa,var(--t2))}
.nar-read-branch{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--accentH);margin-top:8px;border-top:1px dashed var(--border);padding-top:7px}

/* Book "Author" (Phase 11, mockup 12) */
.author-layout{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;min-height:480px}
.author-chapters{width:230px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:10px 6px;overflow-y:auto}
.sk-pages{max-width:560px}
.au-col-label{padding:0 14px 8px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;letter-spacing:.05em;color:var(--t2)}
.author-main{flex:1;min-width:0;padding:14px 18px;overflow-y:auto;background:var(--bg)}
.au-editor{height:calc(100vh - 300px);min-height:420px;display:flex;flex-direction:column}
/* Procress 28 part 5: the chapter name typed in place, and its synopsis + status
   between the name and the text */
.mded-title.au-title{flex:1;min-width:0;border:1px solid transparent;border-radius:var(--rs);background:transparent;color:var(--t1);padding:2px 6px;margin-left:-6px;font-family:inherit}
.mded-title.au-title:hover{border-color:var(--border)}
.mded-title.au-title:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.au-meta{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px}
.au-meta-status{flex:0 0 auto;width:auto}
.au-meta-syn{flex:1;min-height:0;field-sizing:content;max-height:9lh;resize:none;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);background:transparent;border:1px dashed var(--border)}
.au-meta-syn:focus{color:var(--t1);border-style:solid}
/* Author rich-text (contenteditable) editor (Plan part5 Author #1/#2) */
.au-rich-toolbar{display:flex;gap:4px;padding:6px 0;flex-wrap:wrap;align-items:center}
.au-rich-toolbar .btn{min-width:30px;font-size:calc(12px * var(--fsc,1));font-weight:700;color:var(--t2)}
.au-rich-sep{width:1px;align-self:stretch;background:var(--border);margin:2px 6px}
.au-rich-body{
	flex:1;min-height:240px;padding:12px;font-size:calc(14px * var(--fsc,1));line-height:1.8;
	color:var(--t1);border:1px solid var(--border);border-radius:var(--r);
	background:var(--surface);overflow-y:auto;outline:none;
}
.au-rich-body:focus{border-color:var(--accent)}
/* Author Book view — paginated reading + .doc export (Plan part5 Author #5) */
.au-book-export{width:100%;margin-top:10px;justify-content:center}
.au-book-pages{display:flex;flex-direction:column;align-items:flex-start;gap:24px;background:var(--bg);overflow-x:auto}
.au-book-page{
	width:600px;height:820px;flex-shrink:0;overflow:hidden;box-sizing:border-box;
	padding:40px 48px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:calc(var(--fs-body) * var(--fsc,1));line-height:1.8;color:var(--t2);
}
.au-book-measure{position:fixed;left:-9999px;top:0;visibility:hidden;pointer-events:none}
.au-book-chapter-h{font-size:calc(17px * var(--fsc,1));color:var(--t1);margin-bottom:14px}
.au-outline-sec{margin-bottom:14px}
.au-outline-ch{font-size:calc(var(--fs-body) * var(--fsc,1));font-weight:650;color:var(--t1);cursor:pointer;padding:4px 0}
.au-outline-ch:hover{color:var(--accentH)}
/* Procress 28 part 5: a Part divider (mod/author-parts.js) — a rule across the
   chapter column; a name sits in its middle and the rule gives way to it */
.au-part{position:relative;display:flex;align-items:center;min-height:28px;padding:4px 6px;color:var(--t3-aa,var(--t2));cursor:grab;user-select:none;border-radius:var(--rs)}
.au-part::before,.au-part::after{content:"";flex:1;border-top:1px solid var(--t3-aa,var(--border))}
.au-part:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.au-part-t,.au-part .rename-input{flex:0 1 auto;padding:0 10px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:650;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}
.au-part .rename-input{text-transform:none;font-weight:500;width:60%}
.au-part-x{position:absolute;right:0;top:50%;transform:translateY(-50%);visibility:hidden;background:var(--surface)}
.au-part:hover .au-part-x,.au-part:focus-within .au-part-x{visibility:visible}
.au-outline-part{margin:10px 0 2px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--t3-aa,var(--t2));border-bottom:1px solid var(--border)}
.au-book-part{font-size:calc(22px * var(--fsc,1));text-align:center;margin:40% 0 0;color:var(--t1)}
.au-outline-h{font-size:calc(12px * var(--fsc,1));color:var(--t2);padding:2px 0}
.au-outline-h.ghost{color:var(--t3-aa,var(--t2))}
.au-reading{max-width:680px;font-size:calc(var(--fs-body) * var(--fsc,1));line-height:2;color:var(--t2)}

/* Chat "Scribe" (Phase 12, mockup 06) — bubble stream + input row */
.chs-main{display:flex;flex-direction:column;padding:0}
/* Procress 18 part 3: list 260 px · conversation in the middle · composer
   pinned to the foot — the layout is the viewport's height, the stream scrolls */
.chs-layout{height:max(420px,calc(100vh - 300px))}
.chs-layout .chs-sessions{width:260px}
.chs-sessions-head{display:flex;flex-direction:column;gap:6px;padding:0 8px 8px}
.chs-find{width:100%}
.chs-stream{flex:1;overflow-y:auto;padding:16px 18px;min-height:0}
.chs-day{text-align:center;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin:10px 0 12px}
.chs-row{display:flex;justify-content:flex-end;margin-bottom:10px}
.chs-row.left{justify-content:flex-start}
.chs-bubble{position:relative;max-width:70%;background:var(--accent);color:var(--on-accent);
	border-radius:14px 14px 4px 14px;padding:8px 12px 6px;font-size:calc(var(--fs-body) * var(--fsc,1));line-height:1.55;
	box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:grab;user-select:none}
.chs-bubble:active{cursor:grabbing}
.chs-bubble .chs-text{overflow-wrap:break-word}
.chs-bubble .chs-text .wikilink{color:var(--on-accent);text-decoration:underline;cursor:pointer}
.chs-bubble .chs-time{display:block;text-align:right;font-size:calc(var(--fs-meta) * var(--fsc,1));opacity:.75;margin-top:3px}
.chs-bubble .chs-acts{position:absolute;left:-90px;top:50%;transform:translateY(-50%);
	display:none;gap:2px}
.chs-row.left .chs-bubble .chs-acts{left:auto;right:-90px}
.chs-row:hover .chs-acts{display:flex}
.chs-inputrow{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}
.chs-inputrow input{flex:1;background:var(--raised);border:1px solid var(--border);border-radius:18px;
	padding:9px 14px;color:var(--t1);font-size:calc(var(--fs-body) * var(--fsc,1))}
.chs-inputrow input:focus{outline:none;border-color:var(--accent)}
.chs-snippet{display:block;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));font-weight:400;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chs-transcript{padding:14px 18px}
.chs-tr-row{display:flex;gap:12px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:calc(var(--fs-body) * var(--fsc,1))}
.chs-tr-time{color:var(--t3-aa,var(--t2));flex-shrink:0;font-size:calc(var(--fs-meta) * var(--fsc,1));padding-top:1px;min-width:110px}
.chs-tr-text{color:var(--t2);overflow-wrap:break-word}

/* Doc "Drafter" (Phase 13, mockup 13) + shared md format bar */
.drafter-hint{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin:2px 0 10px}
.mded-fmtbar{display:flex;gap:4px;padding:6px 0}
.mded-fmtbar .btn{min-width:30px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;color:var(--t2)}

/* Analys "Viewer" / Relation "Connector" (Phase 14, mockups 14/32/33/15) */
.vw-filterlabel{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2))}
.vw-chip-or{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));font-weight:700}

/* Obsidian-style filter popup (Plan part6 #1-2) — reuses .popover's base
   floating-panel chrome, wider than the 280px icon/kind-list baseline since
   nested group/rule rows need more horizontal room. Live-saves on every
   control, no Save/Cancel footer, matching every other .popover. */
.filter-popup{padding:12px;width:380px;max-height:calc(100vh - 40px);overflow-y:auto}
.fp-groups{display:flex;flex-direction:column;gap:2px}
.fp-group{border:1px solid var(--border);border-radius:var(--rs);padding:8px;background:var(--raised)}
.fp-rules{display:flex;flex-direction:column}
.fp-or-divider{display:flex;align-items:center;gap:8px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;color:var(--t3-aa,var(--t2));margin:6px 0}
.fp-or-divider::before,.fp-or-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.fp-rule-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.fp-rule-row:last-child{margin-bottom:0}
.fp-field,.fp-op{flex-shrink:0}
.fp-input{flex:1;min-width:0}
.fp-field,.fp-op,.fp-input{
	background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);
	color:var(--t1);font:inherit;font-size:calc(var(--fs-meta) * var(--fsc,1));padding:4px 6px;
}
select.fp-input[multiple]{padding:2px}
.fp-group-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.fp-add-group{margin-top:10px;width:100%;justify-content:center}
.fp-empty{font-size:calc(var(--fs-meta) * var(--fsc,1));padding:4px 0}
.vw-table{width:100%;border-collapse:collapse;font-size:calc(var(--fs-body) * var(--fsc,1))}
.vw-table th{text-align:left;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;letter-spacing:.05em;color:var(--t3-aa,var(--t2));
	padding:8px 10px;border-bottom:1px solid var(--border)}
.vw-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--t2)}
.vw-table tbody tr{cursor:pointer}
.vw-table tbody tr:hover td{background:var(--raised)}
.vw-table .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.vw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.vw-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	padding:10px 12px;cursor:pointer}
.vw-card:hover{background:var(--raised)}
.vw-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vw-card-name{font-size:calc(var(--fs-body) * var(--fsc,1));font-weight:650}
.vw-card-kind{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));flex-shrink:0}
.vw-card-src{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin-top:4px}
.vw-card-time{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);margin-top:2px}
.vw-card-tags{margin-top:6px}
.vw-board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.vw-col{min-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:8px}
.vw-col-head{display:flex;justify-content:space-between;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;color:var(--accentH);
	padding:2px 4px 8px}
.vw-col-head .cnt{color:var(--t3-aa,var(--t2))}
.vw-col-card{background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);
	padding:8px 10px;margin-bottom:8px;cursor:pointer}
.vw-col-card:hover{border-color:var(--accent)}
.vw-kindchecks{display:flex;flex-wrap:wrap;gap:8px}
.vw-kc{font-size:calc(12px * var(--fsc,1));color:var(--t2);display:flex;align-items:center;gap:4px}
.vw-groupby{background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);color:var(--t1);padding:3px 6px}
.cn-wrap{position:relative}
/* An empty Designer canvas: the kind's empty state floats over the board,
   which stays usable around it — only the card takes clicks. */
.cn-empty{position:absolute;left:0;right:0;top:40px;z-index:calc(var(--z-base) + 2);pointer-events:none}
.cn-empty .kind-empty{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--rl,12px);padding:18px 20px}
.cn-board{height:600px}
/* v5 Exhibitor Scene (mod/exhibitor-scene.js): Hierarchy | canvas | Inspector */
.exh-scene{display:flex;gap:10px;height:620px;min-height:0}
.exh-hier,.exh-insp{flex:0 0 220px;display:flex;flex-direction:column;min-height:0;overflow:auto;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:calc(12px * var(--fsc,1))}
.exh-insp{flex-basis:240px;padding-bottom:10px}
.exh-insp .fg,.exh-insp .fv-useimg,.exh-insp .btn,.exh-insp .drafter-hint{margin:6px 10px}
.exh-hier-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;
	font-weight:600;color:var(--t2);border-bottom:1px solid var(--border)}
.exh-hier-head .cnt{font-weight:400;color:var(--t3-aa,var(--t2))}
.exh-hier-list{flex:0 1 auto;overflow:auto;max-height:45%}
.exh-hier .li{display:flex;align-items:center;gap:6px;cursor:pointer}
.exh-hier .li .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exh-hier .li .kind{color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1))}
.exh-hidden .name{opacity:.45}
.exh-empty{padding:10px}
.exh-search{margin:6px 10px;width:calc(100% - 20px)}
.exh-palette{flex:1 1 auto;overflow:auto}
.exh-pal-row{cursor:grab}
.exh-stage-wrap{position:relative;flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--r);
	overflow:hidden;background:var(--bg)}
.exh-stage-wrap .is-panning{cursor:grabbing}
.exh-linking{outline:2px dashed var(--accent);outline-offset:-2px}
.exh-linkbar{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
	padding:6px 10px;background:var(--raised);border:1px solid var(--accent);border-radius:var(--r);z-index:calc(var(--z-base) + 2)}
#cn-graph{position:relative;width:1600px;height:1100px;transform-origin:0 0}
#cn-edges{position:absolute;inset:0;pointer-events:none}
.cn-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:grab;user-select:none;width:52px}
.cn-circle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
	border:2px solid var(--accent);background:var(--surface);color:var(--t2)}
.cn-name{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t1);white-space:nowrap}
.cn-edge-label{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);background:var(--surface);border:1px solid var(--border);
	border-radius:var(--r);padding:1px 6px;text-align:center;width:max-content;max-width:138px;margin:0 auto;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-count{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin-left:8px}

/* Drawing "Sketcher" (Phase 15, mockup 28) — the canvas is a fixed dark
   drawing surface (like the Gallery/Export thumbnails' #0b0b10), not the
   ambient app theme: pen strokes include near-white (#f8fafc), which would
   vanish against a light theme's background otherwise. */
.sk-board{height:600px;background:var(--canvas-dark);background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px}
#sk-stage{position:relative;transform-origin:0 0}
#sk-canvas{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.sk-tools{position:absolute;left:14px;top:14px;z-index:calc(var(--z-base) + 4);display:flex;align-items:center;gap:6px;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:6px 10px;
	box-shadow:0 4px 16px rgba(0,0,0,.35)}
.sk-tools .btn.act{background:var(--accent);color:var(--on-accent)}
.sk-tools .zsep{width:1px;height:16px;background:var(--border)}
/* v5 Part 6 §10.6: Chronicler's advanced tier floats over its graph, the
   .sk-tools pattern — the top bar keeps only Add Event and the view chips. */
.chr-stage{position:relative}
.chr-tools{position:absolute;right:10px;top:8px;z-index:calc(var(--z-base) + 4);display:flex;align-items:center;gap:6px;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 8px;
	box-shadow:0 4px 16px rgba(0,0,0,.35)}
.chr-tools select{max-width:160px}
.btn.sk-swatch{width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;cursor:pointer;border:2px solid transparent}
.btn.sk-swatch.act{border-color:var(--t1)}
.btn.sk-width{display:flex;align-items:center;width:24px;min-height:24px;cursor:pointer;padding:0;border-radius:var(--rs);background:none}
.sk-width span{display:block;width:100%;background:var(--t2);border-radius:2px}
.sk-width.act span{background:var(--accentH)}
.sk-export{position:absolute;right:14px;top:14px;z-index:calc(var(--z-base) + 4)}
.sk-pin{position:absolute;z-index:calc(var(--z-base) + 3);display:flex;align-items:center;gap:5px;cursor:grab;user-select:none;
	background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r);padding:5px 10px;
	font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--accentH);box-shadow:0 3px 12px rgba(0,0,0,.3)}
.sk-pin small{color:var(--t3-aa,var(--t2))}
.sk-pin .sk-pin-x{padding:0 4px}
.sk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.sk-thumb{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:8px;cursor:pointer}
.sk-thumb:hover{border-color:var(--accent)}
.sk-thumb img{width:100%;border-radius:var(--rs);background:var(--canvas-dark);aspect-ratio:16/11;object-fit:cover}
.sk-thumb span{display:block;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);margin-top:6px}
.sk-exportview{max-width:820px}

/* Graph "Designer" (Phase 16, mockup 31) */
.dg-node{position:absolute;z-index:calc(var(--z-base) + 2);transform:translate(-50%,-50%);cursor:grab;user-select:none;
	display:flex;align-items:center;justify-content:center;text-align:center;
	background:var(--surface);border:2px solid var(--accent);border-radius:var(--r);
	min-width:110px;min-height:40px;padding:8px 14px;font-size:calc(var(--fs-body) * var(--fsc,1));font-weight:600}
.dg-node.edge-from{outline:2px dashed var(--accent);outline-offset:3px}
.dg-circle{border-radius:50%;width:120px;height:120px;min-width:120px;padding:10px}
.dg-text{background:transparent;border-color:transparent;min-width:60px}
.dg-diamond{background:transparent;border:none;width:130px;height:130px}
.dg-diamond .dg-diamond-box{position:absolute;inset:14px;background:var(--surface);
	border:2px solid var(--accent);transform:rotate(45deg);border-radius:var(--r)}
.dg-diamond .dg-label{position:relative;z-index:calc(var(--z-base) + 1);max-width:90px}
/* Process 8 part 2 — the wider shape palette.
   Border-drawable shapes are plain rules on the node itself. The rest are
   .dg-poly: a clip-path plate painted in the node colour with an inset copy
   punched out in var(--surface), which leaves a 2px outline a border cannot
   draw on a polygon. Both layers must carry the same clip-path. */
.dg-rounded{border-radius:14px}
.dg-ellipse{border-radius:50%;width:150px;height:92px}
.dg-pill{border-radius:999px;padding:8px 20px}
.dg-poly{background:transparent;border:none;width:132px;height:100px}
.dg-poly .dg-poly-box{position:absolute;inset:0;background:var(--dg-col,var(--accent))}
.dg-poly .dg-poly-box::after{content:'';position:absolute;inset:2px;background:var(--surface)}
.dg-poly .dg-label{position:relative;z-index:calc(var(--z-base) + 1);max-width:88px}
.dg-hexagon .dg-poly-box,.dg-hexagon .dg-poly-box::after{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.dg-parallelogram .dg-poly-box,.dg-parallelogram .dg-poly-box::after{clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.dg-triangle .dg-poly-box,.dg-triangle .dg-poly-box::after{clip-path:polygon(50% 4%,100% 100%,0 100%)}
.dg-star .dg-poly-box,.dg-star .dg-poly-box::after{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.dg-cross .dg-poly-box,.dg-cross .dg-poly-box::after{clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}
.dg-note .dg-poly-box,.dg-note .dg-poly-box::after{clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,0 100%)}
.dg-shape-popup{padding:10px;width:274px}
.dg-shape-popup .ipk-cell{font-size:calc(16px * var(--fsc,1))}
.dg-pin{flex-direction:row;gap:6px;font-weight:500;border-width:1.5px;min-height:34px}
.dg-pin small{color:var(--t3-aa,var(--t2))}
.dg-edge-label{cursor:pointer}
.dg-matrix th{white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.dg-matrix td{text-align:center;color:var(--t3-aa,var(--t2))}
.dg-matrix td.dg-mx-hit{color:var(--accentH)}

/* Sage Hut section (Phase 17, mockup 25) */
.sh-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0 20px}
.sh-tile{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);
	border-radius:var(--r);padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.sh-tile .sh-k{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2))}
.sh-tile .sh-v{font-size:1.5em;font-weight:700}
.sh-section{font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;letter-spacing:.05em;color:var(--t2);margin:8px 0 10px}
.sh-bar-row{display:flex;align-items:center;gap:12px;padding:7px 0;cursor:pointer}
.sh-bar-row:hover .sh-bar-name{color:var(--accentH)}
.sh-bar-name{width:240px;flex-shrink:0;font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t1);display:flex;align-items:center;gap:6px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-bar-track{flex:1;height:12px;background:var(--raised);border-radius:var(--r);overflow:hidden}
.sh-bar-fill{display:block;height:100%;border-radius:var(--r)}
.sh-bar-val{width:70px;text-align:right;font-size:calc(12px * var(--fsc,1));color:var(--t2);flex-shrink:0}
.sh-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;
	font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);cursor:pointer;background:var(--surface);border:1px solid var(--border);
	border-radius:var(--rl);padding:2px 8px;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sh-node:hover{color:var(--accentH);border-color:var(--accent)}
.sh-node .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Import Dock section + file viewer (Phase 18, mockup 29) */
.dock-ficon{font-size:calc(12px * var(--fsc,1));color:var(--t3-aa,var(--t2))}
.dock-png,.dock-jpg,.dock-jpeg,.dock-gif,.dock-webp,.dock-svg{color:#38bdf8}
.dock-md{color:#34d399}
.dock-docx{color:#facc15}
/* v5 Asset Nest — one colour per asset class (mod/importdock.js assetClass) */
.dock-image{color:#38bdf8}
.dock-audio{color:#f472b6}
.dock-video{color:#a78bfa}
.dock-doc{color:#facc15}
.dock-url{color:#34d399}
.nest-asset-row .kicon{width:auto}
.asset-missing{opacity:.5}
.asset-missing .name{text-decoration:line-through dotted}
.module-assets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.module-assets .pk{color:var(--t3-aa,var(--t2))}
.module-assets .chip{cursor:pointer}
.fv-media{display:flex;justify-content:center;padding:18px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.fv-media video{max-width:100%;max-height:520px}
.fv-media audio{width:100%;max-width:560px}
.fv-url{word-break:break-all;color:var(--t2)}
.fv-wrap{min-height:0}
.fv-imgwrap{height:520px;overflow:auto;display:flex;align-items:center;justify-content:center;
	border:1px solid var(--border);border-radius:var(--r);
	background-image:linear-gradient(45deg,rgba(90,90,114,.12) 25%,transparent 25%,transparent 75%,rgba(90,90,114,.12) 75%),linear-gradient(45deg,rgba(90,90,114,.12) 25%,transparent 25%,transparent 75%,rgba(90,90,114,.12) 75%);
	background-size:24px 24px;background-position:0 0,12px 12px}
.fv-imgwrap img{max-width:80%;max-height:80%;transition:transform .12s}
.fv-pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	padding:14px 16px;font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t2);white-space:pre-wrap;max-height:520px;overflow:auto}
.fv-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:calc(12px * var(--fsc,1))}
.fv-foot .pk{color:var(--t3-aa,var(--t2))}
.fv-useimg{display:flex;align-items:center;gap:5px;color:var(--t2);font-size:calc(var(--fs-meta) * var(--fsc,1))}
.disp-thumb{display:block;height:64px;border-radius:var(--rs);overflow:hidden;margin-bottom:8px;background:var(--raised)}
.disp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.disp-thumb:has(img:not([src])){display:none}
.disp-thumb.disp-empty{display:none}

.exh-fld-list{max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:2px}
.exh-fld{margin-right:4px}

/* v5 Part 4 (V5.md §8.2): the page navbar — hub/page-head.js. The app's
   first position:sticky: .bpane-body / #main-inner scroll, the head pins.
   The two solid shadows paint over the scroller's top padding and the
   head's own bottom margin, so content scrolling past never shows through
   a gap above or below the pinned bar. */
.page-navbar{position:sticky;top:0;z-index:calc(var(--z-base) + 6);background:var(--bg);padding-left:12px;padding-top:6px;
	box-shadow:0 -24px 0 0 var(--bg),0 12px 0 0 var(--bg)}
.page-navbar .navbar-row{display:flex;align-items:center;gap:8px}
.page-navbar .navbar-h{margin:0;font-size:calc(var(--fs-title) * var(--fsc,1));display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.page-navbar .navbar-grow{flex:1;min-width:0}
.page-navbar .navbar-sub,.page-title .navbar-sub{margin-top:2px}
.page-title{padding-left:12px}
.page-title .navbar-row{display:flex;align-items:center;gap:8px}
.page-title .navbar-h{margin:0;font-size:calc(var(--fs-title) * var(--fsc,1));display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
/* Title layout per page (Procress 13 part 4, REDESIGN.md C6 — hub/page-head.js) */
.page-title.ph--center,.page-title.ph--right{text-align:center}
.page-title.ph--right{text-align:right}
.page-title.ph--center .navbar-row,.page-title.ph--center .navbar-h,.page-title.ph--center .mtags{justify-content:center}
.page-title.ph--right .navbar-row,.page-title.ph--right .navbar-h,.page-title.ph--right .mtags{justify-content:flex-end}
.page-title.ph--center .navbar-h,.page-title.ph--right .navbar-h{flex:0 1 auto}
.ph-icon{font-size:calc(40px * var(--fsc,1));line-height:1;margin:4px 0 6px}
.ph-icon{color:var(--ph-col,var(--accent))}
.ph-icon[onclick]{cursor:pointer}
.ph-icon-cb{margin:2px 0 8px}
.ph-icon .icon,.ph-icon .kicon-img-icon{width:calc(40px * var(--fsc,1));height:calc(40px * var(--fsc,1))}
.ph-cover{height:150px;margin:0 0 10px;border-radius:var(--rl);background:var(--raised) center/cover no-repeat}
.ph-cover[data-ph="gone"]{display:none}
.ph-pop{width:300px;padding:10px 12px}
/* Procress 28 part 2: the page head's 🔗 — linked modules and a search to link one */
.ph-links-open{display:inline-flex;align-items:center;gap:4px}
.ph-link-n:empty{display:none}
.ph-links-pop .ls-list{max-height:320px;overflow-y:auto}
.ph-links-pop .ph-link-q{width:100%}
.ph-pop-h{font-weight:600;margin-bottom:6px}
.ph-pop-label{font-size:var(--fs-xs);color:var(--t3-aa,var(--t2));margin:10px 0 4px}
.ph-pop-hint{font-size:var(--fs-xs);color:var(--t3-aa,var(--t2));margin-top:8px}
.ph-acts{display:flex;gap:4px}
.ph-acts .btn{flex:1;justify-content:center}
.ph-pop .fg{margin:0}
.ph-covers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:180px;overflow-y:auto}
.ph-cover-opt{aspect-ratio:16/10;border:2px solid transparent;border-radius:var(--rs);background:var(--raised) center/cover no-repeat;cursor:pointer;color:var(--t2)}
.ph-cover-opt.active{border-color:var(--accent)}
.ph-cover-none{display:grid;place-items:center}
.module-handle-inp{width:160px;font-size:calc(12px * var(--fsc,1))}
.module-handle-add{padding:1px 7px;opacity:.55;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.module-handle-add:hover,.module-handle-add:focus-visible{opacity:1}
/* Procress 29 part 4: the name renames on one click; the handle sits after it */
.navbar-h .ph-name{cursor:text;border-radius:var(--rs)}
.navbar-h .ph-name:hover{background:var(--hover)}
.navbar-h .ph-name:focus-visible{outline:var(--focus-ring) solid var(--accentH,var(--accent));outline-offset:2px}
.navbar-h .module-handle,.navbar-h .module-handle-add,.navbar-h .module-handle-inp{margin-left:8px;vertical-align:middle}

/* ── Diviner (v5 Part 7, V5.md §11.5) ── */
.div-dice{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.div-dice input{width:7em}
.div-dice-out{font-size:calc(12px * var(--fsc,1));color:var(--t2);font-variant-numeric:tabular-nums}
.div-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.div-head h3{margin:0;font-size:calc(16px * var(--fsc,1))}
.div-head .div-roll{margin-left:auto}
.div-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:var(--raised);
  color:var(--t2);font-size:calc(var(--fs-meta) * var(--fsc,1));white-space:nowrap}
.div-chip .icon{width:12px;height:12px}
.div-result{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:14px 16px;margin-bottom:14px}
.div-result.warn{border-color:var(--warn)}
.div-result-text{font-size:calc(18px * var(--fsc,1));font-weight:600;color:var(--t1);word-break:break-word}
.div-result-dice,.div-steps{margin-top:4px;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));font-variant-numeric:tabular-nums}
.div-entries{display:flex;flex-direction:column;gap:4px}
.div-entry{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;gap:8px;align-items:center}
.div-entry-head{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));text-transform:uppercase;letter-spacing:.04em}
.div-lead{display:inline-flex;align-items:center;gap:4px}
.div-text{display:flex;align-items:center;gap:6px;min-width:0}
.div-text input{flex:1;min-width:0}
.div-hist{margin-top:14px}
.div-hist-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--border);font-size:calc(12px * var(--fsc,1))}
.div-hist-row small{color:var(--t3-aa,var(--t2));font-variant-numeric:tabular-nums}
.div-main{display:flex;flex-direction:column}
.div-result.empty-result{background:transparent;border-style:dashed}
.div-link{max-width:40%;overflow:hidden;text-overflow:ellipsis}

/* ── Narrator conditions + play-test (v5 Part 7, V5.md §11.6) ── */
.nar-logic-btn{position:relative;width:auto;gap:3px}
.nar-logic-btn.on{color:var(--accent-text,var(--accent))}
.nar-logic-badge{font-size:calc(var(--fs-meta) * var(--fsc,1))}
.nar-logic-row{display:grid;grid-template-columns:1fr auto 1fr auto;gap:6px;align-items:center;margin-bottom:6px}
.nar-play-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nar-play-hidden{display:inline-flex;align-items:center;gap:4px;font-size:calc(12px * var(--fsc,1));color:var(--t2)}
.nar-play{display:grid;grid-template-columns:1fr 220px;gap:14px;align-items:start}
.nar-play-script{min-width:0}
.nar-play-head{margin:14px 0 6px}
.nar-play-pick{color:var(--accent-text,var(--accent));font-weight:600}
.nar-play-next{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}
.nar-play-opt{text-align:left}
.nar-play-vars{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:8px 10px;position:sticky;top:0}
.nar-play-var{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:calc(12px * var(--fsc,1))}
.nar-play-var.changed b{color:var(--accent-text,var(--accent))}
@media (max-width:720px){.nar-play{grid-template-columns:1fr}}

/* ── Designer comic pages (v5 Part 7, V5.md §11.6) ── */
.dg-node.dg-panel,.dg-node.dg-balloon{display:flex;flex-direction:column;padding:0;box-sizing:border-box;overflow:visible}
.dg-node.dg-panel{border:2px solid var(--dg-col);border-radius:2px;background:var(--surface)}
.dg-panel-img{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dg-panel-img img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.dg-panel-cap{padding:3px 6px;font-size:calc(var(--fs-meta) * var(--fsc,1));background:var(--raised);color:var(--t1);border-top:1px solid var(--border)}
.dg-node.dg-balloon{justify-content:center;align-items:center;text-align:center;padding:6px 10px;border:2px solid var(--dg-col);
  border-radius:50%/40%;background:var(--surface);position:relative}
.dg-node.dg-balloon::after{content:'';position:absolute;left:22%;bottom:-12px;border:7px solid transparent;border-top:12px solid var(--dg-col);border-bottom:0}
.dg-balloon-who{font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:600}
.dg-resize{position:absolute;right:-5px;bottom:-5px;width:12px;height:12px;border-radius:var(--rs);background:var(--dg-col);cursor:nwse-resize;opacity:0;transition:opacity .15s}
.dg-node:hover .dg-resize{opacity:.9}
.dg-order{position:absolute;left:-9px;top:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--rl);background:var(--accent);
  color:var(--bg);font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;display:flex;align-items:center;justify-content:center}

/* ── Author corkboard (v5 Part 7, V5.md §11.6) ── */
.au-board-sum{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.au-status-pill{padding:2px 9px;border-radius:999px;background:var(--raised);font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2)}
.au-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.au-card{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border);border-top:3px solid var(--border);
  border-radius:var(--r);background:var(--surface);min-height:150px}
.au-card.sel{box-shadow:0 0 0 1px var(--accent)}
.au-card[data-status="idea"],.au-status-pill[data-status="idea"]{border-top-color:var(--t3)}
.au-card[data-status="draft"],.au-status-pill[data-status="draft"]{border-top-color:var(--warn)}
.au-card[data-status="revised"],.au-status-pill[data-status="revised"]{border-top-color:var(--accent)}
.au-card[data-status="done"],.au-status-pill[data-status="done"]{border-top-color:var(--ok,var(--accent))}
.au-status-pill[data-status]{border-top:2px solid}
.au-card.drop-before{box-shadow:-3px 0 0 var(--accent)}
.au-card.drop-after{box-shadow:3px 0 0 var(--accent)}
.au-card-head{display:flex;align-items:center;gap:6px}
.au-card-no{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));font-variant-numeric:tabular-nums}
.au-card-name{flex:1;min-width:0;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-card-syn{flex:1;resize:vertical;font-size:calc(12px * var(--fsc,1));background:transparent;border:1px dashed var(--border)}
.au-card-foot{display:flex;align-items:center;gap:6px;justify-content:space-between}
.au-card-status{font-size:calc(var(--fs-meta) * var(--fsc,1))}
.au-card-pov{display:inline-flex;align-items:center;gap:3px;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);overflow:hidden}
.au-card-pov .icon{width:12px;height:12px}
.au-card-add{align-items:center;justify-content:center;color:var(--t3-aa,var(--t2));cursor:pointer;border-style:dashed}
/* a table cell that opens what it names (Sage hut) */
td.lk{cursor:pointer}