/* Property rows, chips and the side panel's head (the Module Inspector dock
   they came from went in v5 Part 8 — css/page.css has the page), plus the
   pickers and popups (icon collection, classifier type, kind popup, context
   menu, inline rename) and the Classifier / Manager / Locator view bodies. */
.insp-head{padding:10px 14px;border-bottom:1px solid var(--border);font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:7px}
.insp-label{padding:10px 14px 4px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3-aa,var(--t2))}
.prop{display:flex;align-items:center;gap:8px;padding:5px 14px;font-size:calc(12px * var(--fsc,1))}
.prop .pk{width:88px;color:var(--t3-aa,var(--t2));flex-shrink:0}
.prop .pv{flex:1;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Editable text attributes (classifier-detail.js's contenteditable case)
   need to visually read as a text box, same as .pv-input/.pv-textarea and
   .cls-lv-inp already do — plain .pv is also used read-only elsewhere
   (inspector.js), so this is scoped to the editable case only. */
.prop .pv[contenteditable]{display:inline-block;background:var(--surface);border:1px solid var(--border);
	border-radius:var(--r);padding:5px 8px}
.prop .pv[contenteditable]:focus{border-color:var(--accent);outline:none}
.prop .pv.ghost{color:var(--t3-aa,var(--t2));font-style:italic}
.prop .acts{margin-left:auto}
/* Procress 24 (UX-LAYOUT §13.1): ✎ / delete always shown — no button on a
   path may appear only under the pointer */
.insp-attr .acts{display:flex;gap:2px}
.insp-attr .pk-link{cursor:pointer}
.insp-attr .pk-link:hover{color:var(--t1);text-decoration:underline}
.insp-attr .pk-link:focus-visible{outline:var(--focus-ring) solid var(--accentH,var(--accent));outline-offset:2px}

/* Icon Collection picker (progress.md Phase 5) */
.ipk-tabs{margin-bottom:10px}
.ipk-symbol{font-size:calc(17px * var(--fsc,1))}
/* Procress 29 part 5: as many 36px cells as fit, never wider than the picker
   (eight fixed columns ran past a 280px popup and scrolled it sideways). */
.ipk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));justify-items:center;gap:6px;margin-bottom:10px}
.ipk-cell{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--rs);background:var(--raised);
	color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:calc(16px * var(--fsc,1))}
.ipk-cell:hover{background:var(--hover);color:var(--t1)}
.ipk-cell.sel{border-color:var(--accent);background:rgba(99,102,241,.15);color:var(--t1)}
.ipk-color-row,.ipk-preview-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ipk-color-row .pk,.ipk-preview-row .pk{width:60px;flex-shrink:0;color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1))}
.ipk-colors{display:flex;flex-wrap:wrap;gap:6px}
.ipk-colors .cswatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.ipk-colors .cswatch.sel{border-color:var(--t1)}
.kicon-glyph{font-size:calc(14px * var(--fsc,1));line-height:1}

/* Uploaded tab (Icon Collection picker) — native upload + canvas circular crop */
.ipk-upload-pane{display:flex;flex-direction:column;align-items:center;gap:10px}
.icrop-empty{width:100%;padding:28px 14px;border:1px dashed var(--border);border-radius:var(--r);
	display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--t3-aa,var(--t2));cursor:pointer;text-align:center}
.icrop-empty:hover{background:var(--hover);color:var(--t2)}
.icrop-empty .icon{width:24px;height:24px}
.icrop-stage{position:relative;width:220px;height:220px}
.icrop-canvas{display:block;width:220px;height:220px;cursor:grab}
.icrop-canvas:active{cursor:grabbing}
.icrop-mask{position:absolute;top:0;left:0;width:220px;height:220px;border-radius:50%;
	box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none}
.icrop-zoom{width:100%;accent-color:var(--accent)}
.icrop-actions{display:flex;gap:8px;justify-content:flex-end;width:100%}
.icrop-result{display:flex;flex-direction:column;align-items:center;gap:8px}
.icrop-result-img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.icrop-preview-img{width:15px;height:15px;border-radius:50%;object-fit:cover}

/* Classifier type picker (progress.md Phase 5) */
.typegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.typecard{border:1px solid var(--border);border-radius:var(--r);padding:11px;cursor:pointer}
.typecard:hover{border-color:var(--t3)}
.typecard.sel{border-color:var(--accent);background:rgba(99,102,241,.08)}
.typecard h5{font-size:calc(var(--fs-body) * var(--fsc,1));margin-bottom:3px;display:flex;gap:6px;align-items:center}
.typecard h5 .icon{width:14px;height:14px}
.typecard p{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));line-height:1.45}

/* Module create-modal kind picker (list of module cards w/ icon+color+desc) */
.kindgrid{max-height:280px;overflow-y:auto;padding-right:2px}
.kindgrid.locked .kindcard{cursor:default}
.kindgrid.locked .kindcard:hover{border-color:var(--accent)}

/* .popover / .popover-menu: css/popover.css (Procress 22) */
/* v5 kind picker (hub/menus.js buildKindListHtml): search, Artisan row,
   recent, and the structure / view / data headings of V5.md §9.5. */
.kind-search{width:100%;margin:0 0 6px;position:sticky;top:0;z-index:calc(var(--z-base) + 1)}
.kind-artisan-row{border:1px dashed var(--border);border-radius:var(--rs);margin-bottom:4px}
.kind-list-head{padding:6px 8px 2px;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3-aa,var(--t2))}
.kind-list-cat{margin-top:4px;border-top:1px solid var(--border);padding-top:8px;color:var(--t2)}
.kind-list-sub{text-transform:none;letter-spacing:0;font-weight:600;padding-left:12px}
.kind-list-item{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;border-radius:var(--rs);cursor:pointer}
.kind-list-item:hover{background:var(--hover)}
.kind-list-item .kicon{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.kind-list-item .kicon .icon{width:16px;height:16px;stroke-width:2.2}
.kli-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.kli-name{font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t1)}
.kli-desc{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));line-height:1.35}
/* Procress 29 part 5: one size for every tab — the popup no longer grows and
   shrinks as Icons / Emoji / Symbols / Uploaded swap in. The preview, the
   tabs, the search and the colour row stay put; only the grid of the open tab
   scrolls, and only up and down. Inside a modal the picker gets a fixed grid
   height instead (the modal body scrolls as a whole). */
.icon-edit-popup{padding:12px;width:320px;height:min(500px,calc(100vh - 16px));display:flex;flex-direction:column;overflow:hidden}
.ipk-wrap{display:flex;flex-direction:column;min-height:0;flex:1}
.ipk-pane{display:flex;flex-direction:column;min-height:0;flex:1}
.ipk-pane[hidden]{display:none}
.ipk-search{margin-bottom:8px}
.ipk-scroll{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1;overscroll-behavior:contain}
.ipk-color-row{flex-shrink:0;margin:10px 0 0}
#modal .ipk-pane{flex:none;height:240px}
.ipk-sets{margin-bottom:8px;overflow-x:auto;flex-shrink:0}
.ipk-sets .seg{width:100%}
.ipk-grid .lazy-more{grid-column:1/-1;height:1px}
.set-icon-pending{display:inline-block;width:1em;height:1em}
.ipk-custom{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ipk-custom .pk{flex-shrink:0;color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1))}
.ipk-custom-text{flex:1;min-width:0;font-size:calc(16px * var(--fsc,1))}
.ipk-upload img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ipk-color-custom{width:20px;height:20px;padding:0;border-radius:var(--rs);border:1px dashed var(--t3-aa,var(--t2));background:transparent;
	color:var(--t1);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ipk-color-custom .icon{width:12px;height:12px}
.ipk-color-custom[aria-expanded="true"]{outline:1px solid var(--accent)}
.ipk-color-panel{flex:1;min-height:0;overflow-y:auto;margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
.ipk-color-open .ipk-pane{display:none}
/* Procress 29 part 5: core/color-panel.js */
.cpanel{display:flex;flex-direction:column;gap:8px}
.cpanel-body{display:flex;flex-direction:column;align-items:center;gap:8px}
.cpanel-body[hidden]{display:none}
.cpanel-wheel{width:168px;height:168px;border-radius:50%;cursor:crosshair;touch-action:none}
.cpanel-v{width:168px;accent-color:var(--accent)}
.cpanel-rgb{display:flex;align-items:center;gap:8px;width:100%}
.cpanel-rgb span{width:30px;flex-shrink:0;color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1))}
.cpanel-rgb input[type=range]{flex:1;accent-color:var(--accent)}
.cpanel-rgb output{width:28px;text-align:right;font-variant-numeric:tabular-nums}
.cpanel-hex{flex:1;font-family:var(--font-mono,monospace)}
.cpanel-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:stretch}
.cpanel-cell{aspect-ratio:1;border:0;border-radius:3px;padding:0;cursor:pointer;min-height:0}
.cpanel-cell:focus-visible{outline:var(--focus-ring) solid var(--accentH,var(--accent));outline-offset:1px}
.cpanel-foot{display:flex;align-items:center;gap:8px}
.cpanel-swatch{width:22px;height:22px;border-radius:50%;border:1px solid var(--border)}
.cpanel-code{flex:1;font-variant-numeric:tabular-nums}
.cpanel-ok{flex-shrink:0}
.ipk-custom-use{flex-shrink:0}
.ipk-uploads{margin-top:4px}

/* Tag-link popup (Plan part6 #3) — wraps hashtagSelector()'s own .fg/
   .tag-add-box markup unchanged, just needs the floating-panel sizing. */
.tag-link-popup{padding:12px;width:320px;max-height:calc(100vh - 40px);overflow-y:auto}

/* Right-click context menu (hub.js) — reuses .popover base + .kind-list-item
   rows; Major-module variant appends action rows below the full create-list,
   so it gets the same docked scrollable max-height as .icon-edit-popup above. */
.context-menu-popup{width:280px;max-height:min(72vh,520px);overflow-y:auto;padding:6px}
.ctx-sep{height:0;border-top:1px solid var(--border);margin:5px 0}
/* A group's name over its rows (page ⋯, UX-LAYOUT §6.3). */
.ctx-head{padding:6px 12px 2px;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--t3-aa,var(--t2));pointer-events:none;user-select:none}
/* Module edit modal sectioning (Plan part6 #4a) — same uppercase/spaced
   typographic treatment as .insp-label, tuned for a modal body's padding
   (no dock-specific horizontal offset) instead of copying it verbatim. */
.mm-section-label{font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3-aa,var(--t2));margin:2px 0 10px}
.ctx-check{margin-left:auto;flex-shrink:0;color:var(--accent-text,var(--accent));font-weight:700}
/* Per-vault actions on the Welcome list (core/nexus-options.js). Narrower than
   the module context menu: five short verbs, no icons, no submenus. */
.nexus-options-popup{width:210px;padding:6px}
.kli-danger .kli-name{color:var(--danger)}
/* "Create" row's hover submenu (openCreateSubmenu, hub.js) */
.kli-submenu-parent{align-items:center}
.kli-arrow{margin-left:auto;flex-shrink:0;color:var(--t3-aa,var(--t2))}
.ctx-submenu{width:280px;max-height:min(72vh,520px);overflow-y:auto;padding:6px}
/* v5 Part 3 menu engine (hub/ctxmenu.js): icon glyphs replace the ✓/›
   characters, keyboard focus shows like hover, disabled rows read as such. */
.ctx-check .icon,.kli-arrow .icon,.theme-check .icon,.prefs-theme-check .icon{width:12px;height:12px}
.kind-list-item:focus{outline:none;background:var(--raised)}
.kind-list-item:focus-visible{box-shadow:inset 0 0 0 1px var(--accent)}
.kli-disabled{opacity:.45;pointer-events:none}
.kli-hint{margin-left:auto;padding-left:10px;flex-shrink:0;color:var(--t3-aa,var(--t2));font-size:calc(var(--fs-meta) * var(--fsc,1))}
.context-menu-popup .kind-list-item .kicon{flex-shrink:0;display:inline-flex}
.context-menu-popup .kind-list-item .kicon .icon{width:14px;height:14px}

/* Inline rename (double-click a module name in the Nest row or its open
   detail header) */
.rename-input{
	background:var(--bg);border:1px solid var(--accent);border-radius:var(--rs);
	color:var(--t1);font:inherit;padding:1px 5px;min-width:0;
}
.li .rename-input{flex:1}
/* Rename-mode focus lock (Plan part1 #5) — pointer-events:none kills every
   :hover highlight app-wide (nothing left for the cursor to "land on"),
   while the active rename box keeps working normally: typing needs no
   pointer-events, and a click to place the caret only needs it re-enabled
   on the input itself. Clicking anywhere else still blurs the input
   (falls through to <body>), so click-outside-to-save/cancel still works.
   The whole ANCESTOR CHAIN of the input also needs pointer-events:auto, not
   just the input — Chromium's mousedown-to-focus handling for a descendant
   can misfire when any ancestor has pointer-events:none, even though the
   descendant itself re-enables it, so a click meant to place the caret
   blurred (and saved/closed) the box instead. */
body.renaming-lock *{pointer-events:none}
body.renaming-lock .rename-input,
body.renaming-lock *:has(.rename-input){pointer-events:auto}

.togglerow{display:flex;align-items:center;gap:8px;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t2);margin-top:7px}
.tg{width:26px;height:14px;border-radius:var(--r);background:var(--raised);border:1px solid var(--border);position:relative;flex-shrink:0}
.tg.on{background:var(--accent);border-color:var(--accent)}
.tg::after{content:'';position:absolute;top:1px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--t2)}
.tg.on::after{left:auto;right:2px;background:var(--on-accent)}
/* Nest-tree options popup rows (Plan part1 #2) — .togglerow's own
   margin-top:7px is tuned for stacking inside a modal body, not a
   .popover, so give these their own tighter row padding/hover. */
.nest-opt-row{padding:7px 8px;margin-top:0;border-radius:var(--rs);cursor:pointer}
.nest-opt-row:hover{background:var(--hover)}
/* the one 3-way row among the Nest options — not a toggle, so it opts out of
   the hover affordance the boolean rows use and stacks label over control */
.nest-sig-row{cursor:default;padding-top:9px}
.nest-sig-row:hover{background:none}
.nest-sig-label{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin-bottom:5px}
/* nowrap + a popup floor: the longest label ("Type name") wraps to two lines in
   several locales otherwise, which leaves the three buttons different heights */
.nest-sig-row .name-mode-seg .btn{padding:4px 6px;font-size:calc(var(--fs-meta) * var(--fsc,1));white-space:nowrap}
.nest-options-popup{min-width:230px;padding:4px}

/* Classifier views (progress.md Phase 5) */
.classifier-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.viewbar{margin-left:auto} /* the view bar is a segmented control (.seg, css/controls.css) + ⚙ */
.viewbar .vlbl{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t1);padding:0 8px;align-self:center}
.seg.viewbar > .vitem{min-height:var(--ctl-md)}
.seg.viewbar > .vgear{display:none;padding:0 8px}
.pblock .seg.viewbar > .vgear{display:inline-flex}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;flex-shrink:0;vertical-align:middle}
.cls-table-wrap{overflow-x:auto}
.cls-table{width:100%;border-collapse:collapse;font-size:calc(var(--fs-body) * var(--fsc,1))}
.cls-table th{color:var(--t3-aa,var(--t2));text-align:left;font-weight:600;font-size:calc(var(--fs-meta) * var(--fsc,1));letter-spacing:.04em;
	text-transform:uppercase;padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.cls-table th .btn{height:auto;min-height:var(--ctl-sm);padding:0 var(--sp-1);margin-left:calc(-1 * var(--sp-1));color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.cls-table th .btn:hover{color:var(--t1)}
.cls-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--t2)}
.cls-table td:first-child{color:var(--t1);white-space:nowrap}
.cls-cell:focus{outline:1px solid var(--accent);outline-offset:-1px;background:var(--raised)}
.cls-rowacts{display:flex;gap:2px;white-space:nowrap}
.cls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.card.cls-tile{padding:14px 10px;text-align:center}
.cls-card-dot{width:26px;height:26px;border-radius:50%;margin:0 auto 8px}
.cls-card-name{font-size:calc(var(--fs-body) * var(--fsc,1));color:var(--t1)}
.cls-listdetail{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;min-height:260px}
.cls-list{width:200px;flex-shrink:0;border-right:1px solid var(--border);padding:6px}
.cls-detail{flex:1;padding:14px 16px;min-width:0}
.cls-rel-wrap{display:flex;flex-direction:column;gap:10px}
.cls-rel-add{align-self:flex-start}
.cls-rel-list{margin-top:2px}
.cls-rel-swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.cls-rel-recent-lbl{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));margin:6px 0 4px}
.cls-rel-endpoints{display:flex;gap:10px}
.cls-rel-endpoints>div{flex:1}
.pv-input,.pv-textarea{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
	color:var(--t1);font-size:calc(12px * var(--fsc,1));padding:5px 8px;font-family:inherit}
.pv-textarea{min-height:60px;resize:vertical}
/* Procress 27 part 1 — core/wiki-field.js: a field shows its [[links]] as
   links until it is edited (same look as .md-preview's) */
:is([data-wiki-view],[data-wiki-box]) .wikilink{color:var(--accent-text,var(--accent));cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}
:is([data-wiki-view],[data-wiki-box]) .wikilink:hover{border-bottom-color:var(--accent)}
.wiki-view-wrap{flex:1;min-width:0;display:flex}
.wiki-view-wrap>*{flex:1;min-width:0}
.wiki-view-wrap:not(.editing) textarea,.wiki-view-wrap.editing .wiki-view{display:none}
.wiki-view{white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;resize:none}
/* ── Classifier element level/condition table + links (Process 8 part 1) ── */
.cls-lv-wrap{padding:6px 14px 10px}
.cls-lv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.cls-lv-add{padding:3px 9px;font-size:calc(var(--fs-meta) * var(--fsc,1))}
/* Column widths come from a <colgroup> written per-row by
   clsLevelColumnWidths() (level <=10% of the row, condition 30% of what's
   left, info the rest, grip/action reserved as small fixed shares of the
   same 100% budget) rather than from CSS, since the ratio depends on which
   columns a given attribute actually has. */
.cls-lv-table{width:100%;border-collapse:collapse;table-layout:fixed}
.cls-lv-table th{text-align:left;font-size:calc(var(--fs-meta) * var(--fsc,1));font-weight:500;color:var(--t3-aa,var(--t2));
	padding:3px 6px;border-bottom:1px solid var(--border)}
.cls-lv-table td{padding:2px 4px;vertical-align:middle}
.cls-lv-table td.cls-lv-grip{text-align:center}
.cls-lv-table td.cls-lv-act{text-align:right}
.cls-lv-inp{width:100%;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;outline:none}
.cls-lv-inp:focus{border-color:var(--accent)}
.cls-lv-empty{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));padding:3px 2px}
.cls-link-label{margin-top:10px}
.cls-link-list{padding:0 14px}
.cls-tpl-editing{border-left:2px solid var(--accent)}
/* v5 Part 3 (V5.md §7.4): folded level tables, inline "+ field", private
   fields and the Level & Condition disclosure in the fields modal. */
.cls-lv-head{cursor:pointer;list-style:none}
.cls-lv-head::-webkit-details-marker{display:none}
.cls-lv-head .pk{flex:1;min-width:0}
.cls-lv-sum{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.cls-cell-ro{color:var(--t2);cursor:pointer;font-style:italic}
.cls-cell-ro:hover{background:var(--raised)}
/* Procress 26 part 3: the table edits in place and reorders by drag.
   Name cell = grip · dot · name (double click renames); a choice, tick, link
   or level cell holds its own control; drop markers for rows, columns, cards. */
.cls-name-cell .nar-grip{display:inline-flex;vertical-align:middle;margin-right:4px}
/* Procress 29 part 6: the name is a cell like the fields — one click and the
   box is in place, the same size and the same focus ring as .cls-cell:focus;
   the dot (or the object's icon) before it opens the icon & colour popup. */
.cls-name-cell{white-space:nowrap}
.cls-name-cell .rename-input,.cls-detail-name .rename-input{width:calc(100% - 52px);min-width:8em;border:0;border-radius:0;padding:0 2px;margin:0;
	font:inherit;color:inherit;background:var(--raised);outline:1px solid var(--accent);outline-offset:1px}
.cls-name{cursor:text;border-radius:var(--rs)}
.cls-name:hover{background:var(--raised)}
.cls-name:focus-visible{outline:var(--focus-ring) solid var(--accentH,var(--accent));outline-offset:2px}
.cls-obj-icon{min-height:0;width:20px;height:20px;padding:0;margin-right:6px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border-radius:50%}
.cls-obj-icon .dot{width:10px;height:10px;margin:0}
.cls-obj-icon .cls-obj-ico,.cls-obj-icon .cls-obj-ico .icon{width:16px;height:16px;display:inline-flex}
.cls-obj-icon-wrap{cursor:pointer;display:inline-flex}
.cls-detail-name{display:flex;align-items:center}
.cls-cell-ctl{padding:4px 8px}
.cls-cell-ctl .pv{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cls-cell-ctl .pv-input{min-width:7em;padding:2px 6px}
.cls-lv-cell{display:inline-block;min-width:3em;padding:2px 4px;border-radius:var(--rs)}
.cls-lv-cell:focus{outline:1px solid var(--accent);background:var(--raised)}
.cls-lv-all{margin-left:4px}
.cls-table th.cls-col-head{cursor:grab}
.cls-table th.drop-before{box-shadow:inset 2px 0 0 0 var(--accent)}
.cls-table th.drop-after{box-shadow:inset -2px 0 0 0 var(--accent)}
.cls-tile.drop-before{box-shadow:-3px 0 0 var(--accent)}
.cls-tile.drop-after{box-shadow:3px 0 0 var(--accent)}
.cls-addfield{display:flex;align-items:center;gap:6px;padding:6px 14px}
.cls-addfield-inp{flex:1;min-width:0;padding:5px 7px;background:transparent;border:1px dashed var(--border);
	border-radius:var(--rs);color:var(--t1);font-size:calc(var(--fs-body) * var(--fsc,1));font-family:inherit;outline:none}
.cls-addfield-inp:focus{border-style:solid;border-color:var(--accent);background:var(--raised)}
.cls-priv{margin-top:6px}
.cls-priv>summary{cursor:pointer}
.cls-adv{margin:8px 0;padding:6px 8px;border:1px solid var(--border);border-radius:var(--rs)}
.cls-adv>summary{cursor:pointer;font-size:calc(12px * var(--fsc,1));color:var(--t2)}
/* Procress 28 part 3: the field form's Level & Condition — always open, two checkboxes */
.cls-flags>legend{padding:0 4px;font-size:calc(12px * var(--fsc,1));color:var(--t2)}
.cls-flags .cls-flag-hint{margin:0 0 6px 24px}

/* Manager view (progress.md Phase 6) */
.card.mgr-tile{display:flex;flex-direction:column;align-items:center;gap:4px}
.mgr-card-icon{display:flex;align-items:center;justify-content:center}
.mgr-card-icon .icon{width:22px;height:22px}
.mgr-card-icon .kicon-img-icon{width:22px;height:22px;border-radius:50%;object-fit:cover}
.mgr-card-count{font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2))}
/* Process 8 part 2: "<majors below> / <own minors>" on a Manager list row. */

/* Canvas chrome: pan/zoom hint pill + zoom control (progress.md Phase 7,
   cross-cutting per Section A.3 #6 — every canvas/graph kind gets these) */
.chint{position:absolute;left:14px;bottom:14px;z-index:calc(var(--z-base) + 3);font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2));
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 10px}
.czoom{position:absolute;right:14px;bottom:14px;z-index:calc(var(--z-base) + 3);display:flex;align-items:center;gap:7px;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:4px 8px}
.btn.zbtn{width:24px;height:24px;padding:0;border:1px solid var(--border);border-radius:var(--rs);display:inline-flex;
	align-items:center;justify-content:center;color:var(--t2);font-size:calc(12px * var(--fsc,1));background:var(--raised);cursor:pointer}
.btn.zbtn:hover{color:var(--t1)}
.zlvl{color:var(--t1);font-size:calc(var(--fs-meta) * var(--fsc,1));min-width:34px;text-align:center}

/* Locator (progress.md Phase 7) */
.locator-scalelbl{margin-left:auto;font-size:calc(var(--fs-meta) * var(--fsc,1));color:var(--t3-aa,var(--t2))}
.map-whiteboard.locator-board{
	background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
		linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
	background-size:120px 120px,120px 120px,24px 24px,24px 24px}

/* v5 Part 4 (V5.md §8.9): Manager hand-pick */
.mgr-pick-list{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:2px;margin-top:8px}
.mgr-pick-row{display:flex;align-items:center;gap:8px}
.mgr-pick-row .ghost{margin-left:auto;font-size:calc(var(--fs-meta) * var(--fsc,1))}
.mgr-picked{color:var(--accent-text,var(--accent));display:inline-flex;vertical-align:-2px}
.mgr-picked .icon{width:12px;height:12px}
.mgr-pick{flex-shrink:0}
/* v5 Part 7 §11.3: Classifier field types (mod/cls-field-types.js). */
.cls-multi{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.cls-multi-opt{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:calc(var(--fs-body) * var(--fsc,1))}
.cls-multi-opt input{width:auto;margin:0}
.cls-url{display:flex;gap:4px;align-items:center}
.cls-url .pv-input{flex:1;min-width:0}
.cls-rel{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cls-rel-chip{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.btn.cls-rel-x{opacity:.6;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:0;background:none;color:inherit}
.btn.cls-rel-x:hover{opacity:1;color:var(--danger)}
.cls-formula{font-variant-numeric:tabular-nums;color:var(--t2)}
.cls-opt[hidden]{display:none}
.cls-num{text-align:right;font-variant-numeric:tabular-nums}
/* v5 Part 7 §11.6: relations in story time (mod/exhibitor-time.js). */
.exh-asof{width:6.5em}
.exh-span{display:flex;gap:6px;flex-wrap:wrap}