/* Core layout vocabulary shared by every module — #left-panel, #main-area,
   the .ph panel header, the .li list row, folders and the project sidebar. */
/* LEFT PANEL */
#left-panel{
	width:var(--sidebar); background:var(--surface);
	border-right:1px solid var(--border);
	display:flex;flex-direction:column;
	overflow:hidden; flex-shrink:0;
	transition:width var(--ease), border-color var(--ease);
}
#app.left-panel-collapsed #left-panel{width:0;border-right-color:transparent}
/* Plan process4 part2 #3: while the user is actively dragging
   #left-panel-resize, JS writes --sidebar on every mousemove — with the
   transition above still active each write restarts a fresh 150ms eased
   animation toward the new width, so the panel perpetually chases the
   cursor instead of tracking it and reads as stuttery. Suspending the
   transition for the duration of the drag (panel-resizing, toggled in
   core/ui.js) makes width track the cursor 1:1; mouseup removes it so the
   collapse toggle above keeps its smooth animation. */
#left-panel.panel-resizing{transition:none}
#left-panel-inner{flex:1;overflow-y:auto;padding:1px}

/* Plan process4 part2 #3: blocks native text-selection highlight from
   flickering across module names/tree rows while the cursor sweeps over
   them mid-drag (toggled on body by the resize handlers in core/ui.js). */
body.resize-drag-active{user-select:none}
.panel-resize-handle{width:5px;flex-shrink:0;cursor:col-resize;background:transparent}
.panel-resize-handle:hover,.panel-resize-handle.is-resizing{background:var(--accent)}
.panel-resize-handle-v{width:auto;height:5px;cursor:row-resize}
/* Plan part1 #2: resizable page view (Sage Hut / Import Dock file preview /
   Kind Browser) — #page-view-resize reuses .panel-resize-handle as-is. When
   S.pageViewWidth is unset .page-view has no inline style, so flex:1 1 auto
   fills the shell and .page-view-filler collapses to 0 — identical to
   today's full-width behavior until the user actually drags the handle. */
.page-view-shell{display:flex;height:100%}
.page-view{flex:1 1 auto;min-width:0;overflow:auto}
.page-view-filler{flex:1 1 auto}
#app.left-panel-collapsed #left-panel-resize{display:none}
#left-panel-foot{flex-shrink:0;border-top:1px solid var(--border);padding:0}
#left-panel-foot:empty{display:none}

/* MAIN */
#main-area{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}
#main-inner{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px;min-width:0}
#main-inner.relation-main{
	display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
	min-height:0;scrollbar-gutter:stable;padding-bottom:18px;
}
#main-inner.relation-main::-webkit-scrollbar,
.relation-main .rel-underboard::-webkit-scrollbar{width:12px}
#main-inner.relation-main::-webkit-scrollbar-track,
.relation-main .rel-underboard::-webkit-scrollbar-track{background:var(--surface);border-radius:999px}
#main-inner.relation-main::-webkit-scrollbar-thumb,
.relation-main .rel-underboard::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:3px solid var(--surface)}
#main-inner.relation-main::-webkit-scrollbar-thumb:hover,
.relation-main .rel-underboard::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* PANEL HEADER */
.ph{
	display:flex;align-items:center;gap:6px;
	padding:10px 12px 8px;
	border-bottom:1px solid var(--border);
	margin-bottom:4px;
}
.ph h4{font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3-aa,var(--t2));flex:1}
.ph .icon{width:14px;height:14px}

/* LIST ITEM */
.li{
	display:flex;align-items:center;gap:8px;
	padding:2px 10px; border-radius:var(--r);
	cursor:pointer; color:var(--t2); font-size:calc(var(--fs-body) * var(--fsc,1));
	transition:all var(--ease); position:relative;
}
.li:hover{background:var(--hover);color:var(--t1)}
.li.active{background:var(--hover);color:var(--t1)}
.li.active::before{
	content:'';position:absolute;left:0;top:6px;bottom:6px;
	width:3px;background:var(--accent);border-radius:0 2px 2px 0;
}
.li .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.li .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .acts{display:none;gap:2px;-webkit-user-drag:none}
.li:hover .acts{display:flex}
/* Sized to fit inside the row's own resting height (13.5px text + 2px×2
   padding) — the default 28px .btn-i would otherwise stretch .li taller
   the moment .acts appears on hover, turning a highlight into a resize. */
.li .acts .btn-i{width:18px;height:18px;padding:2px}
.li .acts .btn-i .icon{width:12px;height:12px}
/* Hub's Legacy Import section (Plan part2 #1): one .li-head per legacy
   target (Director/Navigator/Hero/Writer), grouping that target's own
   migrate-list rows underneath it. */
.legacy-target-group{margin-bottom:10px}
.legacy-target-group:last-child{margin-bottom:0}
.li-head{
	display:flex;align-items:center;gap:6px;padding:6px 10px 2px;
	color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:600;
	text-transform:uppercase;letter-spacing:.05em;
}
.li-head .icon{width:13px;height:13px}
/* Content-item "minor module" leaves in the Nest tree (Plan part4) — a
   plain, non-draggable .li row (no grip/chevron/context-menu, see
   buildNestItemRow) one level under their owning module. */
.nest-item-row{cursor:pointer}
.nest-item-row .kicon{margin-left:3px}
.nest-item-row .kicon .icon{width:14px;height:14px}
/* Content item's own dedicated Builder page body (Plan part4) — just a
   sizing/spacing wrapper around whichever per-kind fields it renders. */
.item-page-body{padding:14px 18px}
/* The element pages of dialogues, Diviner tables, sketch pages and map pins (mod/item.js). */
.item-lines{margin:6px 0 10px;padding-left:22px;line-height:1.6}
.item-lines .item-choice ul{margin:2px 0;padding-left:18px;list-style:circle;color:var(--t2)}
.item-roll{flex:1;font-weight:600}
.item-sketch{display:block;max-width:min(100%,640px);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}


/* FOLDER */
.folder-sec{margin-bottom:2px}
.fhead{
	display:flex;align-items:center;gap:6px;
	padding:6px 10px;border-radius:var(--r);
	cursor:pointer;color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1));
	font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.fhead:hover{color:var(--t2)}
.fhead .icon{width:13px;height:13px;margin-right:4px;display:inline-block}
.ftgl{font-size:calc(9px * var(--fsc,1));transition:transform var(--ease)}
.ftgl.open{transform:rotate(90deg)}
.fchildren{padding-left:10px}

/* Hero attribute editor — collapsible header for a levelable attribute's
   level-stat rows (see toggleHeroLevelGroup in hero.js). */
.lv-acc-head{display:flex;align-items:center;cursor:pointer;padding:4px 2px;border-radius:var(--rs)}
.lv-acc-head:hover{background:var(--raised)}

/* Navigator: per-novel "character category" fav toggle (person emoji) */
.char-fav{
	background:var(--raised);border:none;cursor:pointer;padding:2px 4px;line-height:1;
	font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t3-aa,var(--t2));transition:background var(--ease),color var(--ease);
	border-radius:var(--rs);
}
.char-fav:hover{color:var(--t1)}
.char-fav.active{color:var(--accent-text,var(--accent));background:color-mix(in srgb, var(--accent) 15%, transparent)}

/* Floating name tooltip for canvas (Konva) nodes — the map board's placed
   objects/characters have no native DOM element to attach a title= to. */
.konva-tooltip{
	position:absolute;pointer-events:none;z-index:calc(var(--z-base) + 5);
	background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);
	padding:3px 7px;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t1);white-space:nowrap;
	box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translate(-50%,-100%);
}

/* PROJECT CONTEXT SIDEBAR */
.project-side-head{
	padding:12px 12px 10px;
	border-bottom:1px solid var(--border);
	margin-bottom:6px;
}
.project-side-title{
	display:flex;
	align-items:center;
	gap:8px;
	min-width:0;
	color:var(--t1);
}
.project-side-title .dot{
	width:10px;
	height:10px;
	border-radius:50%;
	flex-shrink:0;
}
.project-side-title .name{
	flex:1;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:calc(var(--fs-body) * var(--fsc,1));
	font-weight:700;
}
.project-side-code{
	margin:5px 0 0 18px;
	color:var(--t3-aa,var(--t2));
	font-size:calc(var(--fs-meta) * var(--fsc,1));
	font-family:monospace;
}
.ph.compact{
	padding:9px 10px 7px;
	margin:8px 0 4px;
}
.project-detail-ph{margin-top:12px}
.project-detail-list{
	display:flex;
	flex-direction:column;
	gap:6px;
}

/* DIVIDER */
.div{height:1px;background:var(--border);margin:10px 4px}


/* Procress 18 part 5: reflow. Under 1100 px the Properties panel stops taking
   the workspace's width and floats over it (still pinned open, still a
   toggle); under 980 px the sidebar narrows. The page's buttons keep one
   line each, so its primary action never squeezes out. */
@media (max-width:1100px){
	:has(> #side-panel){position:relative}
	#side-panel{position:absolute;top:0;bottom:0;right:0;z-index:calc(var(--z-sticky) + 20);box-shadow:var(--shadow-menu)}
	#side-panel-resize{display:none}
}
@media (max-width:980px){
	#left-panel{width:min(var(--sidebar),220px)}
	#title-left-zone{width:calc(var(--nav) + min(var(--sidebar),220px))}
}
.navbar-acts .btn{white-space:nowrap}

/* Procress 18 part 5: the surface ladder — frame & rail → sidebar →
   workspace → Properties, each zone one step above the one behind it, and
   the edge between zones is the only line. Built from each theme's own
   surfaces (custom and package themes too). Nothing goes above --raised:
   the secondary text tones are tuned against it (measured, ui-contrast.mjs),
   so the workspace takes --surface as its backdrop — cards on it keep their
   borders — and the panel takes --raised. */
body{--l-side:color-mix(in srgb,var(--bg) 50%,var(--surface))}
#left-panel{background:var(--l-side)}
#main-area{--bg:var(--surface);background:var(--bg)}
#side-panel{--bg:var(--raised);background:var(--raised)}