/* Builder pane shell — the recursive split-tree grid, tab strip shrink
   behaviour, the layout picker, and the overlay panels that float above it
   (Search Link, Version History, Cloud Sync, Settings expansion). */
/* Builder shell (Phase 19, mockups 16/17; recursive split tree Plan part4 #2)
   — arbitrarily nested .bsplit containers, each a 3-track grid (pane / 5px
   gutter+handle / pane), down to .bpane leaves. */
#main-inner.builder-grid{display:grid;padding:0;gap:0;overflow:hidden}
#main-inner.builder-grid > .bpane,#main-inner.builder-grid > .bsplit{grid-column:1;grid-row:1}
.bsplit{display:grid;min-width:0;min-height:0}
.bpane{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.bpane.focused{box-shadow:inset 0 2px 0 var(--accent)}
.bpane-head{display:flex;align-items:center;gap:4px;padding:4px 8px;border-bottom:1px solid var(--border);
	background:var(--surface);flex-shrink:0;overflow:hidden}
.bpane-head .bnav{padding:0;margin:0;border-radius:0;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.bpane-head .bnav:disabled{opacity:.35;pointer-events:none}
.bpane-tabs{display:flex;gap:4px;overflow-x:auto;min-width:0;min-height:32px;flex:1}
.bpane-tabs::-webkit-scrollbar{height:4px}
/* Plan part1 #3: tabs shrink together to fit the bar instead of staying a
   fixed width and overflowing into the horizontal scrollbar above (kept
   only as a defensive fallback for a pathological tab count — unreachable
   in realistic use once .tabs-compact's icon-only floor kicks in). */
.bpane-tabs .project-tab{flex:1 1 0;min-width:28px;max-width:200px}
.bpane-tabs.reordering .project-tab{transition:transform .12s ease,opacity .12s ease}
.bpane-tabs.reordering .project-tab.tab-dragging{transition:none;position:relative;z-index:calc(var(--z-base) + 1);background:var(--raised);box-shadow:var(--shadow-pop)}
.bpane-tabs.reordering .project-tab.tab-carried{opacity:.35;box-shadow:none}
.bpane-tabs .project-tab.pane-active{background:var(--raised)}
.bpane-tabs .project-tab.tab-drop-before{box-shadow:inset 2px 0 0 0 var(--accent)}
.bpane-tabs .project-tab.tab-drop-after{box-shadow:inset -2px 0 0 0 var(--accent)}
.bpane-tabs .project-tab .tab-kicon{display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0}
.bpane-tabs .project-tab .tab-kicon .icon{width:14px;height:14px}
.bpane-tabs .project-tab .ek{
	font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));border:1px solid var(--border);
	border-radius:var(--rs);padding:0 4px;flex-shrink:0;letter-spacing:.03em;
}
.bpane-tabs .project-tab .ek .icon{width:12px;height:12px}
.bpane-tabs.tabs-compact .project-tab{padding:0 6px;justify-content:center;gap:0}
.bpane-tabs.tabs-compact .project-tab .tab-name,
.bpane-tabs.tabs-compact .project-tab .ek{display:none}
.bpane-tabs.tabs-compact .project-tab .tab-close{display:none}
.bpane-tabs.tabs-compact .project-tab:hover .tab-kicon{display:none}
.bpane-tabs.tabs-compact .project-tab:hover .tab-close{display:flex}
.bpane-body{--bpane-pad:24px;flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--bpane-pad);min-width:0;position:relative}
.bpane-body.drop-left{box-shadow:inset 4px 0 0 0 var(--accent)}
.bpane-body.drop-right{box-shadow:inset -4px 0 0 0 var(--accent)}
.bpane-body.drop-top{box-shadow:inset 0 4px 0 0 var(--accent)}
.bpane-body.drop-bottom{box-shadow:inset 0 -4px 0 0 var(--accent)}
.bpane-body.drop-center{outline:2px dashed var(--accent);outline-offset:-4px}
#main-inner.builder-split .bpane-body{--bpane-pad:14px}

.builder-resize-handle{background:transparent}
.builder-resize-handle:hover,.builder-resize-handle.is-resizing{background:var(--accent)}
.builder-resize-handle.col{cursor:col-resize}
.builder-resize-handle.row{cursor:row-resize}

/* Title-bar layout-picker: single trigger button replacing the old 3-button
   .bsplit row, styled off #settings-menu-wrap / .title-settings-btn / #settings-menu. */
#layout-menu-wrap{
	position:relative;height:100%;display:flex;align-items:center;flex-shrink:0;
	-webkit-app-region:no-drag;
}
.title-layout-btn{
	width:34px;height:34px;border:none;border-radius:var(--r);background:transparent;
	color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;
	font-size:calc(15px * var(--fsc,1));font-family:inherit;-webkit-app-region:no-drag;
}
.title-layout-btn:hover,.title-layout-btn.active{background:var(--hover);color:var(--t1)}
#layout-menu{
	position:absolute;top:38px;right:0;width:130px;background:var(--surface);
	border:1px solid var(--border);border-radius:0 0 var(--r) var(--r);
	box-shadow:var(--shadow-menu);padding:4px;z-index:calc(var(--z-dropdown) + 200);
}
#layout-menu.hidden{display:none}
.layout-menu-item{
	width:100%;display:flex;align-items:center;gap:8px;padding:7px 8px;
	border:none;border-radius:var(--rs);background:transparent;color:var(--t2);
	font-size:calc(var(--fs-body) * var(--fsc,1));cursor:pointer;font-family:inherit;text-align:left;
}
.layout-menu-item:hover{background:var(--hover);color:var(--t1)}
.layout-menu-item.act{background:var(--accent);color:var(--on-accent)}

/* Search Link overlay (Phase 20, mockup 24) */
#qs-box .qs-inputrow{display:flex;align-items:center;gap:8px;padding:4px 12px;border-bottom:1px solid var(--border)}
#qs-box .qs-inputrow .qs-glass{color:var(--t3-aa,var(--t2));display:flex}
#qs-box .qs-inputrow input{flex:1;border:none;background:transparent}
/* G6: a command's shortcut as keycaps, and the recent-run marker */
.qs-keys{display:inline-flex;gap:3px;margin-left:6px}
.qs-keys kbd{font:calc(10px * var(--fsc,1))/1 ui-monospace,Consolas,monospace;color:var(--t3-aa,var(--t2));border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--rs);padding:2px 5px;background:var(--surface)}
.qs-recent{display:inline-flex;margin-left:6px;color:var(--t3-aa,var(--t2))}
.qs-recent .icon{width:12px;height:12px}
#qs-box .qs-kbd{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));border:1px solid var(--border);border-radius:var(--r);padding:2px 7px}
.qs-filters{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.qs-flabel{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2))}
.qs-filters select{background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);color:var(--t1);
	font-size:calc(var(--fs-meta) * var(--fsc,1));padding:3px 6px}
.qs-item .qs-handle{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--accentH);flex-shrink:0}
.qs-item .qs-lc{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--accentH);border:1px solid var(--accent);border-radius:var(--rl);padding:1px 7px;flex-shrink:0}
.qs-item .qs-pin{opacity:0;cursor:pointer;flex-shrink:0;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.qs-item:hover .qs-pin,.qs-item.sel .qs-pin{opacity:.8}
.qs-foot{display:flex;gap:14px;align-items:center;padding:7px 12px;border-top:1px solid var(--border);
	font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));flex-wrap:wrap}
.qs-foot b{color:var(--t2);font-weight:600}
.qs-foot .qs-count{margin-left:auto}

/* Version History panel (Phase 21, mockup 26) */
.vh-panel{display:flex;flex-direction:column}
.vh-panel .insp-head .vh-count{margin-left:auto;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2))}
.vh-list{flex:1;overflow-y:auto;padding:8px 10px}
.vh-foot{padding:10px 14px;border-top:1px solid var(--border);font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));line-height:1.6}

/* Plugin panel (v4.3.0) — a plugin's own page docked in the Inspector slot.
   Same flex-column shape as .vh-panel above; the <webview> fills the body, so
   everything inside it is styled by the plugin's own stylesheet, not ours. */
.plugin-panel{display:flex;flex-direction:column}
/* Only the title stretches — a bare `span` selector here would also stretch the
   icon span next to it and push the title into the middle of the header. */
.plugin-panel .plgp-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plgp-view{flex:1;width:100%;border:0;background:var(--bg)}
.plgp-btn.active{color:var(--accentH)}

/* Cloud Sync modal (Token Sync — Supabase) */
.sync-status-row{display:flex;justify-content:space-between;gap:12px;padding:4px 2px;
	font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t2)}
.sync-status-row b{color:var(--t1);font-weight:600;text-align:right}
.sync-key-row{display:flex;align-items:center;gap:8px}
.sync-key-row input{flex:1}
.sync-key-code{flex:1;background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);
	padding:7px 10px;font-family:monospace;font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t1);
	letter-spacing:.5px;user-select:all}
.sync-hint{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin:2px 0 8px;line-height:1.45}

/* DDX Transfer (src/renderer/transfer.js) — the code and PIN are read aloud
   and typed across from another screen, so they get a monospace face and
   generous tracking. A run-together 0/O or 1/l is the entire failure mode of
   this screen, and it is also why the code alphabet excludes I, L, O and U. */
.trx-codebox{text-align:center;padding:8px 0}
.trx-label{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);
	text-transform:uppercase;letter-spacing:.08em}
.trx-value{font-family:monospace;font-size:calc(26px * var(--fsc,1));font-weight:600;
	letter-spacing:.12em;color:var(--t1);margin:2px 0 12px;user-select:all;word-break:break-all}
.trx-value.trx-pin{font-size:calc(21px * var(--fsc,1));color:var(--accent-text,var(--accent))}
.trx-code-input{font-family:monospace;font-size:calc(17px * var(--fsc,1));
	letter-spacing:.12em;text-align:center;text-transform:uppercase}
.trx-qr{display:flex;justify-content:center;margin:4px 0 10px}
/* The white plate and the padding are not decoration: the quiet zone is part
   of the QR spec, and a dark-themed card without it does not scan. */
.trx-qr svg{width:190px;height:190px;background:var(--paper);padding:10px;border-radius:var(--rs)}
.sync-upload-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
	padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);margin-bottom:6px}
.sync-upload-row-mine{border-color:var(--accent)}
.sync-upload-actions{display:flex;gap:6px;flex-shrink:0}
.chip-status + .chip, b + .chip{margin-left:6px}

/* Plugin install preview (Setting window -> Plugin): what a pasted repo link
   would install, shown before anything is written. */
.plugin-preview{border:1px solid var(--border);border-radius:var(--rs);background:var(--raised);
	padding:10px 12px;margin:8px 0 12px}
.plugin-preview-head{margin-bottom:6px}
.plugin-preview-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
	font-size:calc(12px * var(--fsc,1));color:var(--t2);padding:2px 0}
.plugin-preview-row b{color:var(--t1);font-weight:600;text-align:right}
.plugin-preview-files{margin:2px 0 8px;padding-left:18px;max-height:132px;overflow-y:auto;
	font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));line-height:1.6}
.plugin-preview-warn{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--danger);line-height:1.45;margin:4px 0 8px}
.plugin-preview-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
/* Unmet dependencies on an INSTALLED plugin's row (v4.9.0). Reuses the
   preview's warn/list type so a requirement reads the same before and after
   install; the per-item Download button is what's new. */
.plugin-dep-missing{margin-top:6px;padding-left:8px;border-left:2px solid var(--danger)}
.plugin-dep-missing .plugin-preview-warn{margin:0 0 4px}
.plugin-dep-missing .plugin-preview-files{margin:0;max-height:none}
.plugin-dep-missing li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0}

/* Google Drive backup (Preferences panel "Backup" section) */
.drive-bar{height:6px;border-radius:var(--rs);background:var(--raised);overflow:hidden;margin:2px 0 8px}
.drive-bar-fill{height:100%;background:var(--accent);border-radius:var(--rs)}
.drive-bar-fill.drive-bar-near{background:var(--accent)}
.drive-bar-fill.drive-bar-full{background:var(--danger)}

/* Settings expansion (Phase 22, mockup 27) */
.settings-hint{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin-top:6px;line-height:1.5}
.settings-number{width:100%;background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);
	color:var(--t1);padding:6px 10px}
.theme-tool{cursor:pointer;color:var(--t3-aa,var(--t2));padding:0 3px}
.theme-tool:hover{color:var(--accentH)}
.ctm-grid{display:grid;grid-template-columns:1fr 220px;gap:18px}
.ctm-rows{max-height:320px;overflow-y:auto}
.ctm-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:3px 0}
.ctm-tok{width:90px;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2)}
.ctm-color{width:30px;height:24px;border:none;background:transparent;padding:0;cursor:pointer}
.ctm-hex{flex:1;background:var(--raised);border:1px solid var(--border);border-radius:var(--rs);
	color:var(--t1);padding:4px 8px;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.ctm-sample{flex-shrink:0;min-width:22px;text-align:center;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700}
.ctm-grad-toggle{display:flex;gap:4px;flex-shrink:0}
.ctm-grad-end{width:26px;height:22px;border:none;background:transparent;padding:0;cursor:pointer}
.ctm-grad-deg{width:60px;padding:4px 6px;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.ctm-preview{border:1px solid var(--border);border-radius:var(--r);height:150px;display:flex;overflow:hidden}
.ctm-preview.mini{height:80px;pointer-events:none}
.ctm-pv-side{width:60px;padding:8px 6px;display:flex;flex-direction:column;gap:6px}
.ctm-pv-side i{display:block;height:8px;border-radius:var(--rs)}
.ctm-preview.mini .ctm-pv-side{width:34px;padding:6px 4px;gap:4px}
.ctm-preview.mini .ctm-pv-side i{height:5px}
.ctm-pv-main{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px}
.ctm-pv-txt{display:block;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctm-pv-txt.w60{width:60%}.ctm-pv-txt.w80{width:80%}
.ctm-preview.mini .ctm-pv-main{padding:6px;gap:4px}
.ctm-preview.mini .ctm-pv-txt{font-size:calc(8px * var(--fsc,1))}
.ctm-pv-btn{width:70px;height:18px;border-radius:var(--rs);margin-top:auto;border:none;cursor:pointer;
	font-family:inherit;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:600}
.ctm-preview.mini .ctm-pv-btn{width:46px;height:12px;font-size:calc(7px * var(--fsc,1))}
/* v5 Part 8 (§12.11): a top-row pane's tab strip, lifted onto the title bar
   by core/titlebar-tabs.js. The head drags the window; only the tabs don't,
   so the space right of the last tab is still title bar. */
.bpane-head.tb-tabgroup{position:fixed;z-index:calc(var(--z-sticky) + 50);background:transparent;border-bottom:none;padding:0 4px;
	align-items:flex-end;-webkit-app-region:drag}
.bpane-head.tb-tabgroup .bpane-tabs{flex:0 1 auto;min-height:0;height:100%;align-items:flex-end;padding-top:5px;-webkit-app-region:no-drag}
/* Procress 28 part 1: the buttons after the strip too — inside the drag head
   they were window-drag area, so on Windows a click moved the window. */
.bpane-head.tb-tabgroup .bpane-acts{-webkit-app-region:no-drag}
/* Procress 16 B2: + (new tab) · ⧉ (split) · tab list, after the strip. The
   list only shows once the strip has shrunk to icons; an inactive tab's ×
   shows on hover, like a browser. */
.bpane-acts{display:flex;align-items:center;gap:2px;flex-shrink:0}
.bpane-head:not(:has(.tabs-compact)) .bpane-tablist{display:none}
.bpane-tabs .project-tab:not(.active):not(.pane-active):not(:hover) .tab-close{visibility:hidden}
.qs-item .qs-pin .icon{width:12px;height:12px}
/* Procress 28 part 1: a tab held at a pane's edge — the body slides over by
   half and the half the new pane would take shows as a slot (builder.js
   onBodyDragOver sets --split-px / --split-top). */
.bpane{position:relative}
.bpane > .bpane-body{transition:margin .18s ease}
.bpane.split-preview-left > .bpane-body{margin-left:var(--split-px)}
.bpane.split-preview-right > .bpane-body{margin-right:var(--split-px)}
.bpane.split-preview-top > .bpane-body{margin-top:var(--split-px)}
.bpane.split-preview-bottom > .bpane-body{margin-bottom:var(--split-px)}
.bpane.split-preview::after{content:'';position:absolute;pointer-events:none;border:2px dashed var(--accent);border-radius:var(--rl);
	background:color-mix(in srgb,var(--accent) 12%,transparent);box-sizing:border-box}
.bpane.split-preview-left::after{left:6px;top:calc(var(--split-top) + 6px);bottom:6px;width:calc(var(--split-px) - 12px)}
.bpane.split-preview-right::after{right:6px;top:calc(var(--split-top) + 6px);bottom:6px;width:calc(var(--split-px) - 12px)}
.bpane.split-preview-top::after{left:6px;right:6px;top:calc(var(--split-top) + 6px);height:calc(var(--split-px) - 12px)}
.bpane.split-preview-bottom::after{left:6px;right:6px;bottom:6px;height:calc(var(--split-px) - 12px)}
.bpane.split-preview > .bpane-body{box-shadow:none}
@media (prefers-reduced-motion:reduce){.bpane > .bpane-body{transition:none}}