/* ============================================================================ HoloScope.Web — app.css · POKEDEX LIGHT THEME Re-skin of the app from the old dark Bootstrap look to the Pokedex design system. Layout/geometry is preserved 1:1 from the original; only colors, typography, borders, radii and elevation are remapped to design tokens. HOW THIS WORKS - Imports the design-system token + component layers. - Overrides Bootstrap 5.3 CSS variables so every Bootstrap component (.btn, .form-control, .form-select, .badge, .modal…) adopts the light palette. - Restyles HoloScope's own classes with semantic tokens. IMPORTANT companion change (see handoff README): - In wwwroot/index.html change to - The old "[data-bs-theme=dark] …" override block is intentionally GONE. ============================================================================ */ @import url("ds-tokens.css"); @import url("ds-anatomical.css"); @import url("ds-type.css"); @import url("ds-components.css"); @import url("presentation.css"); @import url("learn.css"); /* --------------------------------------------------------------------------- 1 · BOOTSTRAP THEME → POKEDEX (light + violet) Map Bootstrap's design variables to our tokens so its components reskin. --------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { --bs-primary: var(--violet-600); --bs-primary-rgb: 122, 40, 214; --bs-link-color: var(--violet-600); --bs-link-color-rgb: 122, 40, 214; --bs-link-hover-color: var(--violet-700); --bs-body-bg: var(--bg-app); --bs-body-color: var(--fg-primary); --bs-secondary-color: var(--fg-secondary); --bs-tertiary-color: var(--fg-muted); --bs-border-color: var(--border-default); --bs-secondary-bg: var(--bg-sunken); --bs-tertiary-bg: var(--bg-sunken); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-xs); --bs-border-radius-lg: var(--radius-md); --bs-font-sans-serif: var(--font-sans); --bs-body-font-size: var(--text-base); --bs-danger: var(--red-500); --bs-danger-rgb: 229, 72, 77; --bs-success: var(--mint-600); --bs-warning: var(--amber-500); --bs-info: var(--blue-500); } /* Dark theme: same token-driven mapping, with dark-appropriate literal rgb pairs. Our semantic tokens (--bg-app, --accent, …) already flip via the [data-bs-theme="dark"] block in ds-tokens.css, so every Bootstrap component reskins to the dark palette. Loaded after bootstrap.min.css → wins on its dark block. */ [data-bs-theme="dark"] { --bs-primary: var(--accent); --bs-primary-rgb: 142, 61, 236; /* violet-500 */ --bs-link-color: var(--fg-link); --bs-link-color-rgb: 196, 155, 255; /* violet-300 */ --bs-link-hover-color: var(--accent-hover); --bs-body-bg: var(--bg-app); --bs-body-color: var(--fg-primary); --bs-emphasis-color: var(--fg-primary); --bs-secondary-color: var(--fg-secondary); --bs-tertiary-color: var(--fg-muted); --bs-border-color: var(--border-default); --bs-secondary-bg: var(--bg-sunken); --bs-tertiary-bg: var(--bg-sunken); --bs-danger: var(--danger); --bs-danger-rgb: 240, 86, 91; --bs-success: var(--success); --bs-warning: var(--warning); --bs-info: var(--info); } html, body { font-family: var(--font-sans); background: var(--bg-app); color: var(--fg-primary); } /* Links */ a, .btn-link { color: var(--fg-link); text-decoration: none; } a:hover, .btn-link:hover { color: var(--accent-hover); } /* ---- Buttons: lean on the design system, override Bootstrap class names ---- */ .btn { border-radius: var(--radius-sm); font-weight: var(--weight-medium); font-size: var(--text-sm); transition: var(--transition-colors); } .btn-primary { color: var(--fg-on-accent); background-color: var(--accent); border-color: var(--accent); } .btn-primary:hover, .btn-primary:focus { color: var(--fg-on-accent); background-color: var(--accent-hover); border-color: var(--accent-hover); } .btn-primary:active { background-color: var(--accent-active) !important; border-color: var(--accent-active) !important; } .btn-secondary { color: var(--accent-fg); background-color: var(--accent-subtle); border-color: transparent; } .btn-secondary:hover, .btn-secondary:focus { color: var(--accent-fg); background-color: var(--accent-subtle-hover); border-color: transparent; } .btn-light { color: var(--fg-primary); background-color: var(--bg-surface); border-color: var(--border-default); } .btn-light:hover { background-color: var(--bg-hover); border-color: var(--border-strong); } .btn-light:active, .btn-light.btn-primary { background-color: var(--accent-subtle) !important; border-color: var(--border-accent) !important; color: var(--accent-fg) !important; } .btn-outline-secondary { color: var(--fg-secondary); border-color: var(--border-default); } .btn-outline-secondary:hover { color: var(--fg-primary); background-color: var(--bg-hover); border-color: var(--border-strong); } /* red-600 (not --danger/red-500) so white label clears WCAG AA (5.1:1) in both themes. */ .btn-danger { background-color: var(--red-600); border-color: var(--red-600); color: #fff; } .btn-danger:hover { background-color: var(--red-700); border-color: var(--red-700); } .btn-outline-danger { color: var(--danger-fg); border-color: var(--red-100); } .btn-outline-danger:hover { background-color: var(--danger-bg); border-color: var(--red-100); color: var(--danger-fg); } /* Leading icon inside a text button — token spacing (replaces inline margins). */ .btn__icon-leading { margin-right: var(--space-3); } /* One consistent focus ring everywhere. */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: var(--ring-focus); } /* Form controls */ .form-control, .form-select { border-color: var(--border-default); border-radius: var(--radius-sm); color: var(--fg-primary); background-color: var(--bg-surface); } .form-control:focus, .form-select:focus { border-color: var(--accent); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .content { padding-top: 1.1rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--mint-600); } .invalid { outline: 1px solid var(--danger); } .validation-message { color: var(--danger); } code { color: var(--accent-fg); background: var(--accent-subtle); padding: 0.1em 0.36em; border-radius: var(--radius-xs); } /* Blazor error UI + loading spinner */ #blazor-error-ui { color-scheme: light only; background: var(--warning-bg); bottom: 0; box-shadow: var(--shadow-md); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: var(--z-toast); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: var(--danger); padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; } .loading-progress circle { fill: none; stroke: var(--slate-150); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; color: var(--fg-secondary); } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* =========================================================================== 2 · HOLOSCOPE EDITOR (layout preserved; colors → tokens) =========================================================================== */ /* Fill the area below the app header (the logged-in user bar) instead of a hard 100vh — otherwise the header pushes the editor down and the bottom of the sidebar (W/L + colour settings) falls below the fold. */ .editor { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; height: 100%; box-sizing: border-box; overflow: hidden; background: var(--bg-app); } .editor__toolbar { position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex: 0 0 auto; } /* Main editor top bar (NOT the labeling editor, which reuses .editor__toolbar as a plain flex row): a 3-column grid so the centred layout switch lives in its OWN column and can't overlap the stackbar, and the right cluster (validate + assistant + user menu) stays on the first row instead of wrapping to a third line. Side columns shrink; the left one wraps its chips rather than spilling into centre. */ /* align-items:start so that when the left cluster wraps (many stacks / long name) the centred switch and the right cluster stay pinned to the TOP row — i.e. the user/report button never drops below ← Cases. */ .editor__toolbar.editor__toolbar--main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0.4rem 1rem; } .editor__bar-left { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.9rem; min-width: 0; } /* Right cluster: right-aligned in its own grid column. It wraps WITHIN the column (rather than spilling left over the centred switch) if it ever gets too wide — but the common editing cluster (Validate + Assistant + user) fits on one row at any realistic editor width, so the user/report button stays on the top row next to ← Cases. Only the wide validated cluster on a very narrow window wraps a row. */ .editor__bar-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem 0.5rem; min-width: 0; } /* AI assistant entry — a compact top-bar pill (replaces the floating bubble inside the editor). */ .editor-chatbtn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; height: 30px; padding: 0 0.6rem 0 0.55rem; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .editor-chatbtn:hover { background: var(--bg-hover); color: var(--fg-primary); border-color: var(--border-strong); } .editor-chatbtn__ico { display: inline-flex; color: var(--accent); } .editor-chatbtn.is-open { background: var(--accent-subtle); border-color: var(--border-accent); color: var(--accent-fg); } .editor-chatbtn.is-open .editor-chatbtn__ico { color: var(--accent-fg); } .editor-chatbtn__label { white-space: nowrap; } .editor__viewsettings { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } /* Shared case note (editor sidebar, below the brush panel) */ .editor__notes { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); flex: 0 0 auto; } .editor__notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .editor__notes-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-secondary); } .editor__notes-hint { font-size: var(--text-2xs); color: var(--fg-muted); } .editor__notes-input { width: 100%; resize: vertical; box-sizing: border-box; font-size: var(--text-xs); padding: 0.35rem 0.45rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); } .editor__viewtoggles { display: flex; gap: 1rem; font-size: var(--text-sm); } .editor__viewtoggles label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; color: var(--fg-secondary); } .editor__dims { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); } .editor__save { display: flex; gap: 0.35rem; align-items: center; } .editor__status { color: var(--success-fg); font-size: var(--text-sm); } .editor__empty { color: var(--fg-muted); padding: 2rem; } /* Unified loading panel (spinner + title + phase) — shared look with the import "Building case" screen. */ .hs-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 4rem 1.5rem; color: var(--fg-muted); } /* Boot-overlap: cover the (still-empty) booting canvas with the loading spinner until HasVolume. */ .hs-loading--overlay { position: absolute; inset: 0; background: var(--bg-app); z-index: 5; padding: 0; } .hs-loading__spinner { width: 40px; height: 40px; border: 3px solid var(--slate-150); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } .hs-loading__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); } .hs-loading__sub { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); min-height: 1.2em; } /* Centered error state (case failed to open / not found) — card-like, matches the loading panel. */ .hs-error { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; padding: 4rem 1.5rem; max-width: 30rem; margin: 0 auto; } .hs-error__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--danger-bg); color: var(--danger); margin-bottom: 0.25rem; } .hs-error__icon--muted { background: var(--slate-150); color: var(--fg-muted); } .hs-error__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); } .hs-error__msg { font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.5; } .hs-error__actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; } .editor__viewports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; min-height: 0; } /* The imaging panes stay DARK by design (radiology convention + contrast). */ .slice-view { display: flex; flex-direction: column; background: var(--bg-canvas); border-radius: var(--radius-sm); padding: 0.25rem; min-height: 0; min-width: 0; } .slice-view__header { display: flex; justify-content: space-between; color: var(--fg-on-canvas); font-size: var(--text-xs); padding: 0.15rem 0.35rem; flex: 0 0 auto; } .slice-view__canvas { flex: 1 1 auto; width: 100%; min-height: 0; image-rendering: pixelated; background: #000; object-fit: contain; } /* Slice slider only reveals while the cursor is over that pane (opacity, not display → no reflow). The cell is pointer-events:none (brush strokes pass through to the canvas) so CSS :hover can't drive this — viewport.input.js reports the hovered pane and toggles .is-hover. */ /* Compact slice slider, inline in the header to the left of the slice index. Revealed only while the cursor is over the pane (JS toggles .is-hover) OR while the slider itself is hovered/focused/dragged (moving onto it fires the canvas pointerleave that clears .is-hover — :hover/:active bridge that). */ .slice-view__slider { width: 18rem; min-width: 3rem; height: 1rem; margin: 0; flex: 0 1 auto; accent-color: var(--violet-400); opacity: 0; transition: opacity 0.12s ease; } /* Revealed while: the cursor is over the pane (JS .is-hover); OR any interactive header control is hovered (moving onto the slider/fs button fires the canvas pointerleave that clears .is-hover — the header gets :hover from its interactive descendants even though it's pointer-events:none, bridging the handoff); OR the slider is being dragged/keyboard-focused. :focus-visible NOT :focus so a mouse click doesn't pin it. */ .slice-view__slider.is-hover, .slice-view__header:hover .slice-view__slider, .slice-view__slider:focus-visible, .slice-view__slider:active { opacity: 1; } .editor__viewports--quad { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; } .editor-viewport { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; background: var(--bg-canvas); border-radius: var(--radius-sm); } .editor-viewport__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .editor-viewport__overlay { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); pointer-events: none; } .ev-cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; padding: 0.25rem; } /* The header is an overlay strip across the TOP of the canvas. Don't give the whole bar pointer-events (it would swallow a brush press in that strip — you couldn't START a stroke near the top, only drag in). Only the interactive children opt back in (.ev-fs button + .slice-view__toggle, below); the title/index text + empty space stay transparent so a press there falls through to the canvas. */ .ev-cell .slice-view__slider, .ev-cell .slice-view__toggle { pointer-events: auto; } .editor-viewport__overlay--full { grid-template-columns: 1fr; grid-template-rows: 1fr; } .slice-view__hdr-right { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } /* Per-pane fullscreen toggle — same square-icon look as .ev-vtool, sized like the mini clip buttons so it sits flush in the header row. */ .ev-fs { pointer-events: auto; width: 1.95rem; height: 1.95rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.16); background: rgba(18,20,26,0.5); color: var(--fg-on-canvas); cursor: pointer; transition: var(--transition-colors); line-height: 1; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ev-fs:hover { background: rgba(40,44,54,0.72); border-color: rgba(255,255,255,0.38); } .ev-fs__icon { width: 16px; height: 16px; } /* Square icon toggles stacked on the right edge of the 3D pane (volume / seg / hide-table / cinematic + clip plane, and the clip orientation sub-row). The overlay is pointer-events:none; each button opts back in so empty gaps still fall through to the canvas (orbit). */ .ev-vstack { position: absolute; top: 0.4rem; right: 0.4rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; z-index: 2; } /* Clip-plane toggle bar, bottom-right corner of the 3D pane; right-anchored so the orientation/flip sub-row (DOM order before the toggle) fans out to the LEFT while the toggle stays put in the corner. */ .ev-clipbar { position: absolute; right: 0.4rem; bottom: 0.4rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; z-index: 2; } /* Clip toggle + its orientation sub-row stay on one horizontal row (sub-row fans LEFT) even though the outer bar is now a vertical column matching the top stack. */ .ev-clipgroup { display: flex; flex-direction: row; align-items: center; gap: 0.3rem; } .ev-vtool { pointer-events: auto; width: 1.95rem; height: 1.95rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.16); background: rgba(18,20,26,0.5); color: var(--fg-on-canvas); cursor: pointer; transition: var(--transition-colors); font-size: var(--text-2xs); font-weight: var(--weight-bold, 700); line-height: 1; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ev-vtool:hover:not(:disabled) { background: rgba(40,44,54,0.72); border-color: rgba(255,255,255,0.38); } /* ---- Layout switcher — centre column of the top-bar grid (see .editor__toolbar--main) ---- */ /* It sits in its own grid track, so it centres in the bar without overlapping the left/right clusters. */ .editor__layout-switch { grid-column: 2; justify-self: center; display: flex; gap: 0.25rem; } .editor__lay { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); cursor: pointer; transition: var(--transition-colors); } .editor__lay:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--fg-primary); } .editor__lay.is-on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--accent-subtle); } .editor__lay.is-on:hover { background: var(--accent); color: #fff; } /* Separator between the layout switch and the (independent) hide-table toggle. */ .editor__lay-sep { align-self: center; width: 1px; height: 1.25rem; margin: 0 0.2rem; background: var(--border-strong); } /* Split overlay mirrors the renderer's split cells() (SPLIT_LARGE_FRAC = 0.75): left half = large slice (top 75%) over a 3-plane mini strip (bottom 25%); right half = 3D. Keep 75/25 + thirds in sync with cells(). */ /* Reuse the base grid's repeat(2,1fr) COLUMNS (single row) so the 50% divider rounds pixel-identically to the quad layout — a flex split rounds the boundary slightly differently, shifting the 3D title / 2D padding by ~1px between layouts. Children auto-place into col 1 (2D) and col 2 (3D). */ .editor-viewport__overlay--split { grid-template-rows: 1fr; } .ev-split__left { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .ev-split__right { min-width: 0; min-height: 0; } .ev-split__large { flex: 0 0 75%; min-height: 0; } /* Strip fills the bottom 25% with no padding/gap so its buttons tile EXACTLY over the canvas mini-slices (which have no inset) — any gap here lets the slice peek out past the frame. Borders draw INSIDE (box-sizing) so a frame never grows the button past its canvas cell. */ .ev-split__strip { flex: 0 0 25%; min-height: 0; display: flex; flex-direction: row; } .ev-mini { pointer-events: auto; position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; padding: 0; } .ev-mini:hover { border-color: rgba(255,255,255,0.55); } .ev-mini.is-active { border-color: var(--violet-400, #9a82ff); box-shadow: 0 0 0 2px var(--violet-400, #9a82ff) inset; z-index: 1; } .ev-mini__tag { position: absolute; left: 3px; bottom: 2px; font-size: var(--text-2xs); font-weight: var(--weight-bold, 700); color: var(--fg-on-canvas); text-shadow: 0 1px 2px rgba(0,0,0,0.85); pointer-events: none; } .ev-mini.is-active .ev-mini__tag { color: #fff; } /* Focus layout: 4fr:1fr COLUMNS (large 80% + rail 20%) — matches FOCUS_RAIL_FRAC (0.2) and rounds like the quad/split grids. The rail is a vertical 4-stack of thumbnail buttons over the (inset) canvas thumbnails; tiles reuse the .ev-mini look. Click promotes; the active one is bordered. */ .editor-viewport__overlay--focus { grid-template-columns: 4fr 1fr; grid-template-rows: 1fr; } .ev-focus__main { min-width: 0; min-height: 0; } .ev-focus__rail { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .ev-focustile { pointer-events: auto; position: relative; flex: 1 1 0; min-height: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; padding: 0; } .ev-focustile:hover { border-color: rgba(255,255,255,0.55); } .ev-focustile.is-active { border-color: var(--violet-400, #9a82ff); box-shadow: 0 0 0 2px var(--violet-400, #9a82ff) inset; z-index: 1; } .ev-vtool:disabled { opacity: 0.4; cursor: default; } .ev-vtool.is-on { background: rgba(54,214,198,0.22); border-color: #36d6c6; color: #cffaf3; } .ev-vtool__icon { width: 16px; height: 16px; } /* Clip orientation + flip: smaller squares in a row under the clip toggle (two-letter / icon labels). */ .ev-vsub { display: flex; flex-direction: row; gap: 0.25rem; } /* 3D scene-background picker: the landscape button (ev-vtool) in the tool stack fans a labelled preset row to its LEFT (DOM order: sub-row before the button). Dark translucent to match the over-canvas tools. */ .ev-envgroup { display: flex; flex-direction: row; align-items: center; gap: 0.3rem; } .ev-envsub { display: flex; flex-direction: row; gap: 0.2rem; } .ev-envtile { pointer-events: auto; padding: 0 0.4rem; height: 1.95rem; display: inline-flex; align-items: center; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.16); background: rgba(18,20,26,0.5); color: var(--fg-on-canvas); cursor: pointer; font-size: var(--text-2xs); font-weight: var(--weight-bold, 700); line-height: 1; white-space: nowrap; transition: var(--transition-colors); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ev-envtile:hover { background: rgba(40,44,54,0.72); border-color: rgba(255,255,255,0.38); } .ev-envtile.is-on { background: var(--violet-500, #7c5cff); border-color: var(--violet-400, #9a82ff); color: #fff; } .ev-vtool--mini { width: 1.55rem; height: 1.55rem; font-size: 9px; letter-spacing: 0.02em; } .ev-vtool--mini .ev-vtool__icon { width: 13px; height: 13px; } /* Clip-plane position slider: stacked OVER the orientation buttons (column), spanning their width. Dragging it glides the cut plane through the stack (off01 ∈ [-1,1], the same unit the 3D move-handle reports). */ .ev-clipcontrols { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; } .ev-clipslider { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 0; background: transparent; cursor: pointer; } .ev-clipslider:focus { outline: none; } .ev-clipslider::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); } .ev-clipslider::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); } .ev-clipslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -4px; border-radius: 50%; background: #36d6c6; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.65); } .ev-clipslider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #36d6c6; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.65); } /* Walk-mode block tools (issue #187): a small control hint next to the walk switch (left-click adds, right-click removes — the two "tools" are the two mouse buttons). */ .ev-walkhint { color: var(--fg-on-canvas); font-size: var(--text-2xs); opacity: 0.8; white-space: nowrap; } /* Centre crosshair for aiming the walk block tools — dim while navigating, bright when a tool is armed. */ .ev-crosshair { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.5; } .ev-crosshair.is-armed { opacity: 0.95; } .ev-crosshair::before, .ev-crosshair::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.9); } .ev-crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .ev-crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); } /* sidebar / panels */ .editor__workspace { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: 0.5rem; flex: 1 1 auto; min-height: 0; } .editor__sidebar { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; overflow-y: auto; overflow-x: hidden; } .stacks { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); } .stacks__head { display: flex; justify-content: space-between; align-items: center; font-weight: var(--weight-semibold); } .stacks__upload-btn { position: relative; overflow: hidden; } .stacks__upload-btn input[type=file] { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; } .stacks__empty, .stacks__phase, .stacks__error { color: var(--fg-muted); font-size: var(--text-xs); margin: 0; } .stacks__error { color: var(--danger); } .stacks__coreg-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); cursor: pointer; } .stacks__coreg-hint { color: var(--warning-fg); font-size: var(--text-2xs); margin: 0.15rem 0 0; } .stack { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.35rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); cursor: pointer; } .stack:hover { border-color: var(--border-accent); } .stack--active { border-color: var(--border-accent); background: var(--bg-selected); box-shadow: var(--ring-selected); cursor: default; } .stack__row { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); } .stack__row--head { font-weight: var(--weight-medium); } .stack__row--coreg label { display: inline-flex; flex-direction: column; font-size: var(--text-2xs); color: var(--fg-secondary); } .stack__row--coreg input { width: 4rem; font-size: var(--text-xs); padding: 0.1rem 0.25rem; } .stack__name { flex: 1 1 auto; } .stack__icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--fg-muted); } .stack__eye { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0.15rem; border: 0; background: none; color: var(--fg-secondary); cursor: pointer; border-radius: var(--radius-sm); } .stack__eye svg { width: 14px; height: 14px; } .stack__eye:hover { color: var(--fg-default); background: var(--bg-sunken); } .stack__eye--off { color: var(--fg-muted); opacity: 0.6; } .stack__del { padding: 0 0.35rem; font-size: var(--text-2xs); } .stack__primary { padding: 0 0.35rem; font-size: var(--text-xs); color: var(--warning-fg); } .segpanel { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Tool-independent extras (Smoothing / Advanced) — pinned to the sidebar bottom; the debug row (.editor__viewsettings) trails right below it. */ .segpanel--general { margin-top: auto; flex: 0 0 auto; } .segpanel__readonly { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--success-fg); background: var(--success-bg); padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); } .segpanel__toolbar { display: flex; flex-direction: column; gap: 0.3rem; } /* Tools in a fixed 5-wide grid + a 2-wide history row, so the buttons never wrap raggedly. */ .segpanel__tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; } .segpanel__history { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; } /* The TOOL zone (Editing header → tools → active-tool settings) is pinned at the TOP of the panel; the segment LIST sits below it, separated by a hairline. Reordered via flex `order` (the markup keeps segments first) so the segment list scrolls independently under a fixed tool zone. */ .segpanel__readonly { order: 0; } .segpanel__editing-head { order: 1; } .segpanel__toolbar { order: 2; } .segpanel__params { order: 3; } .segpanel__segments { order: 4; padding-top: 0.7rem; border-top: 1px solid var(--border-subtle); } .segpanel__editing-head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .segpanel__editing-lead { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-faint); flex: 0 0 auto; } .segpanel__editing-sw { width: 12px; height: 12px; border-radius: var(--radius-xs); flex: 0 0 auto; background: var(--swatch, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } .segpanel__editing-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .segpanel__editing-name--none { color: var(--fg-muted); font-weight: var(--weight-medium); } /* Live volume on the active segment row (mono, right-aligned before the row actions). */ /* Active-segment shelf: a subtle indented strip under the active row (volume + rename/delete). Indent aligns its content under the row's NAME (past the swatch), so it reads as a detail of the item above it. */ /* Name + volume stacked in one column: volume is a compact second line under the name, so the row barely grows in height. Opacity slider lives in the hover/active action cluster. */ .segpanel__seg-main { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; gap: 1px; } .segpanel__seg-main > .segpanel__seg-name { flex: 0 0 auto; line-height: 1.2; } .segpanel__seg-main > .segpanel__rename { flex: 0 0 auto; } .segpanel__seg-cc { flex: 0 0 auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); line-height: 1.05; color: var(--fg-muted); white-space: nowrap; } .segpanel__seg-op { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 54px; height: 4px; border-radius: var(--radius-full); background: var(--bg-active); outline: none; cursor: pointer; } .segpanel__seg-op::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer; } .segpanel__seg-op::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer; } /* Per-segment "…" actions popover (crop / rename / delete), anchored under the row's action buttons. */ .segpanel__kebab.is-open { background: var(--bg-active); color: var(--fg-primary); } /* Fixed (viewport-anchored) so the scrollable segments panel can't clip it; positioned at the click point (inline left/top) and pulled up-left so its right edge sits at the cursor. */ .segpanel__segmenu { position: fixed; z-index: var(--z-dropdown, 1000); transform: translate(-100%, 8px); display: flex; flex-direction: column; min-width: 9.5rem; padding: 0.3rem; background: var(--bg-raised, var(--bg-surface)); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--elevation-menu, var(--shadow-md)); cursor: default; } .segpanel__segmenu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border: none; background: none; color: var(--fg-primary); font: inherit; font-size: var(--text-sm); text-align: left; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-colors); } /* --bg-hover is ~invisible on the raised menu surface (dark theme: #1E212B vs #1C1F28); --bg-active reads. */ .segpanel__segmenu-item:hover { background: var(--bg-active); } .segpanel__segmenu-item--danger { color: var(--danger); } .segpanel__segmenu-item--danger:hover { background: var(--danger-bg); } .segpanel__menu-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-dropdown, 1000) - 1); } .segpanel__params { display: flex; flex-direction: column; gap: 0.4rem; } .segpanel__params label { display: flex; flex-direction: column; color: var(--fg-secondary); } .segpanel__params input[type=range] { accent-color: var(--accent); } .segpanel__check { flex-direction: row !important; align-items: center; gap: 0.35rem; } .segpanel__tool { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 2.2rem; padding: 0; position: static; } /* A mouse click leaves the tool button focused — without this, a DESELECTED tool keeps the purple focus ring and reads as still active. Keyboard focus (:focus-visible) keeps its ring. */ .segpanel__tool:focus:not(:focus-visible) { box-shadow: none; } /* ─── Tooltips ──────────────────────────────────────────────────────────────── One look for every editor hover hint: a dark card that fades in after a shared delay (--tip-delay). Two shapes share the palette so they read as one system: • Tool icons (.hs-tip child span) — a rich card with a bold title + optional description line. Anchored to the toolbar ROW (left/right:0, max-width:100%) and dropped BELOW it, so even a long, multi-line hint stays inside the panel — which clips at its edges (overflow-x:hidden) and has little room above the near-top row. The button is position:static so the card resolves against the row, not the icon. • Everything else ([data-tip] pseudo) — a compact label that replaces the sluggish, unstyled native title= tooltips. Anchored to whichever edge its host hugs so it never spills past the clipped panel edge. */ .segpanel { --tip-delay: 0.4s; } .segpanel__tools { position: relative; } .hs-tip { position: absolute; top: calc(100% + 7px); left: var(--tip-cx, 50%); width: max-content; max-width: 100%; display: flex; flex-direction: column; gap: 0.1rem; text-align: center; padding: 0.4rem 0.6rem; white-space: normal; /* host button is nowrap — let long hints wrap */ background: var(--slate-900); color: var(--slate-0); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); pointer-events: none; z-index: var(--z-tooltip); opacity: 0; transform: translate(-50%, -4px) scale(0.97); transform-origin: top center; transition: opacity 0.13s ease, transform 0.13s ease; transition-delay: 0s; } /* Short (title-only) tips sit centered directly UNDER their own icon — --tip-cx is the icon's centre in the 5-column tools row (col N centre ≈ (N·2−1)·10%). */ .segpanel__tools .segpanel__tool:nth-child(1) .hs-tip { --tip-cx: 10%; } .segpanel__tools .segpanel__tool:nth-child(2) .hs-tip { --tip-cx: 30%; } .segpanel__tools .segpanel__tool:nth-child(3) .hs-tip { --tip-cx: 50%; } .segpanel__tools .segpanel__tool:nth-child(4) .hs-tip { --tip-cx: 70%; } .segpanel__tools .segpanel__tool:nth-child(5) .hs-tip { --tip-cx: 90%; } /* Wide (described) cards fill the row and centre on it, so a long multi-line hint can't clip. */ .hs-tip:has(.hs-tip__desc) { text-align: left; left: 0; right: 0; margin-inline: auto; transform: translate(0, -4px) scale(0.97); } .hs-tip__title { font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.3; } .hs-tip__desc { font-size: var(--text-2xs); font-weight: var(--weight-regular); line-height: 1.35; color: var(--slate-300); } .segpanel__tool:hover .hs-tip, .segpanel__tool:focus-visible .hs-tip { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: var(--tip-delay, 0.4s); } .segpanel__tool:hover .hs-tip:has(.hs-tip__desc), .segpanel__tool:focus-visible .hs-tip:has(.hs-tip__desc) { transform: translate(0, 0) scale(1); } /* A JUST-CLICKED tool suppresses its tip until the pointer leaves it (body class set by the index.html click handler — on , not the button, because Blazor rewrites the button's class attribute when the tool activates): the card drops exactly where the tool's settings appear, so a still cursor left it covering the controls the click revealed. Keyed to :hover so only the still-hovered button is muted. */ body.hs-tipsoff .segpanel__tool:hover .hs-tip { display: none; } /* [data-tip] tooltips are rendered by the cursor-anchored JS driver (.hs-cursortip, see index.html): one shared node that spawns at the pointer and clamps to the viewport so it never clips. The old CSS ::after pseudo (and every positional override of it below) is suppressed — [data-tip] stays as the text source only. */ [data-tip] { position: relative; } [data-tip]::after { content: none !important; } .hs-cursortip { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip, 3000); pointer-events: none; max-width: min(20rem, calc(100vw - 16px)); white-space: normal; text-align: left; padding: 0.3rem 0.5rem; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.35; background: var(--slate-900); color: var(--slate-0); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.12s ease; } .hs-cursortip.is-shown { opacity: 1; } /* Seg-row actions: the tip sits centered directly UNDER the hovered icon (default anchor). Cap the width so a long hint wraps instead of spilling past the panel's clipped right edge. */ .segpanel__seg-actions [data-tip]::after { max-width: 10rem; } /* The swatch hugs the row's LEFT edge — left-anchor so its tip grows right, not off-panel. */ .segpanel__swatch-wrap[data-tip]::after { left: 0; right: auto; transform: translateX(0) translateY(4px); } .segpanel__swatch-wrap[data-tip]:hover::after { transform: translateX(0) translateY(0); } /* Multi-button rows: an edge-column button's centered tip would clip — anchor the tip to the full-width ROW container and cap it to the row, so it centers and never clips. */ .segpanel__ai-bar, .segpanel__ai-actions, .segpanel__wlpresets, .segpanel__morph-btns, .segpanel__combine-btns, .segpanel__vessel-btns, .ctpreset-picker__grid { position: relative; } .segpanel__ai-bar [data-tip], .segpanel__ai-actions [data-tip], .segpanel__wlpresets [data-tip], .segpanel__morph-btns [data-tip], .segpanel__combine-btns [data-tip], .segpanel__vessel-btns [data-tip], .ctpreset-picker__grid [data-tip] { position: static; } .segpanel__ai-bar [data-tip]::after, .segpanel__ai-actions [data-tip]::after, .segpanel__wlpresets [data-tip]::after, .segpanel__morph-btns [data-tip]::after, .segpanel__combine-btns [data-tip]::after, .segpanel__vessel-btns [data-tip]::after, .ctpreset-picker__grid [data-tip]::after { left: 0; right: 0; margin-inline: auto; max-width: 100%; transform: translateX(0) translateY(4px); } .segpanel__ai-bar [data-tip]:hover::after, .segpanel__ai-actions [data-tip]:hover::after, .segpanel__wlpresets [data-tip]:hover::after, .segpanel__morph-btns [data-tip]:hover::after, .segpanel__combine-btns [data-tip]:hover::after, .segpanel__vessel-btns [data-tip]:hover::after, .ctpreset-picker__grid [data-tip]:hover::after { transform: translateX(0) translateY(0); } /* ─ Viewport overlay controls + top-bar stack chips ───────────────────────────── Same styled tip + shared delay (via the --tip-delay fallback), positioned for their context. These live OUTSIDE .segpanel, on the dark canvas / top bar. */ /* Top-right tool stack + per-cell fullscreen: the tip sits to the LEFT of the button, vertically centred. Below/beside would land it behind the next button — each control has backdrop-filter (its own stacking context), so a later sibling paints over an earlier one's tooltip. To the left it clears the whole button column, on-canvas. */ .ev-vstack [data-tip]::after, .ev-fs[data-tip]::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 8px); transform: translateY(-50%) translateX(4px); transform-origin: center right; } .ev-vstack [data-tip]:hover::after, .ev-vstack [data-tip]:focus-visible::after, .ev-fs[data-tip]:hover::after, .ev-fs[data-tip]:focus-visible::after { transform: translateY(-50%) translateX(0); } /* Top bar sits at the screen top — drop stack-chip tips BELOW, centered on the chip. */ .hs-stackbar [data-tip]::after { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) translateY(-4px); transform-origin: top center; } .hs-stackbar [data-tip]:hover::after, .hs-stackbar [data-tip]:focus-visible::after { transform: translateX(-50%) translateY(0); } /* The appearance menu lives inside .hs-stackbar but is its own scrolling panel, so the "drop tips BELOW" rule above would push its tooltips onto the clipped bottom edge of the menu. Put them ABOVE instead. */ .hs-stackbar .hs-appmenu [data-tip]::after { top: auto; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px); transform-origin: bottom center; } .hs-stackbar .hs-appmenu [data-tip]:hover::after, .hs-stackbar .hs-appmenu [data-tip]:focus-visible::after { transform: translateX(-50%) translateY(0); } /* Colormap cards: anchor the tip to the GRID (spans its width) so edge-card tips can't clip on the x-overflow-hidden panel, sitting just above the grid. */ .hs-stackbar .hs-appmenu .ctpreset-picker__grid [data-tip]::after { left: 0; right: 0; margin-inline: auto; transform: translateY(4px); } .hs-stackbar .hs-appmenu .ctpreset-picker__grid [data-tip]:hover::after, .hs-stackbar .hs-appmenu .ctpreset-picker__grid [data-tip]:focus-visible::after { transform: translateY(0); } .segpanel__icon { width: 18px; height: 18px; } .segpanel__hint { color: var(--fg-muted); font-size: var(--text-xs); } /* Contrast tool settings: W/L readout + preset shelf (window/level is set by dragging the image). */ .segpanel__wl { font-size: var(--text-xs); color: var(--fg-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } .segpanel__wl b { color: var(--fg-primary); font-weight: var(--weight-semibold); } .segpanel__wlpresets { display: flex; flex-wrap: wrap; gap: 0.25rem; } /* Toggle switch as a bordered card row — title + sub-label so an option reads as a real feature of the tool, not a bare afterthought checkbox. */ /* Raised against the panel (which is --bg-surface) with a strong border so the row reads as a tappable control in both themes — a bare --bg-surface fill was invisible on the same-colour panel. */ .segpanel__switch { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.5rem 0.6rem; background: var(--bg-active); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-family: inherit; color: var(--fg-secondary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .segpanel__switch:hover:not(:disabled) { border-color: var(--accent); } .segpanel__switch.is-on { border-color: var(--border-accent); background: var(--accent-subtle); color: var(--fg-primary); } .segpanel__switch:disabled { opacity: 0.55; cursor: default; } .segpanel__switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-subtle-hover); border-color: var(--border-accent); } .segpanel__switch-track { position: relative; width: 34px; height: 18px; border-radius: var(--radius-full); background: var(--slate-300); transition: background 0.15s ease; flex: 0 0 auto; } .segpanel__switch.is-on .segpanel__switch-track { background: var(--accent); } .segpanel__switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left 0.15s ease; } .segpanel__switch.is-on .segpanel__switch-thumb { left: 18px; } .segpanel__switch-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .segpanel__switch-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); } .segpanel__switch-sub { font-size: var(--text-xs); color: var(--fg-secondary); line-height: 1.35; } /* History (Undo/Redo): full-width labelled buttons — icon + text, paired in the 2-col row. */ .segpanel__histbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; height: 2.4rem; padding: 0 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .segpanel__histbtn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-hover); } .segpanel__histbtn:active:not(:disabled) { background: var(--bg-active); } .segpanel__histbtn:disabled { color: var(--fg-disabled); cursor: default; } .segpanel__histbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-subtle-hover); border-color: var(--border-accent); } .segpanel__histicon { width: 16px; height: 16px; flex: 0 0 auto; } /* Slider: header row (label · value) above a styled range track. */ .hs-slider { display: flex; flex-direction: column; gap: 0.4rem; } .hs-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .hs-slider__label { font-size: var(--text-sm); color: var(--fg-secondary); } .hs-slider__val { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); font-variant-numeric: tabular-nums; } .hs-slider__unit { margin-left: 0.25rem; font-weight: var(--weight-medium); color: var(--fg-muted); } /* hs-range — design-system range input. Filled left portion via --range-fill (0–100%), chunky haloed thumb. Cross-browser via the -webkit/-moz pseudo-elements. */ .hs-range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; } .hs-range:disabled { cursor: default; opacity: 0.55; } .hs-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--accent) 0 var(--range-fill, 0%), var(--track-empty, var(--border-strong)) var(--range-fill, 0%) 100%); } .hs-range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--track-empty, var(--border-strong)); } .hs-range::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--accent); } .hs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--border-default), var(--shadow-sm); transition: transform 0.1s ease; } .hs-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--border-default), var(--shadow-sm); } .hs-range:hover:not(:disabled)::-webkit-slider-thumb { transform: scale(1.12); } .hs-range:active:not(:disabled)::-webkit-slider-thumb { transform: scale(1.12); } .hs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--border-accent), 0 0 0 4px var(--accent-subtle-hover); } .hs-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--border-accent), 0 0 0 4px var(--accent-subtle-hover); } .segpanel__section-head { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-primary); margin-top: 0.15rem; } /* CT intensity presets — inline in Image Appearance tool settings */ .ctpreset-section__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.5rem; } .ctpreset-picker__loading { font-size: var(--text-sm); color: var(--fg-secondary); padding: 0.15rem 0 0.35rem; } .ctpreset-picker__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .ctpreset-picker__card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.3rem; background: var(--bg-subtle); border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-family: inherit; } .ctpreset-picker__card:hover { background: var(--bg-hover); border-color: var(--border-subtle); } .ctpreset-picker__card.is-active { border-color: var(--accent); background: var(--bg-selected); } .ctpreset-picker__thumb { width: 100%; aspect-ratio: 1; border-radius: var(--radius-xs); background: var(--bg-canvas); display: block; } .ctpreset-picker__thumb--graph { position: relative; overflow: hidden; min-height: 2.5rem; } .ctpreset-picker__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-xs); } .ctpreset-picker__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ctpreset-picker__fill { fill: rgba(15, 15, 15, 0.72); } .ctpreset-picker__curve { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; } .ctpreset-picker__label { font-size: 0.68rem; line-height: 1.2; color: var(--fg-secondary); } .ctpreset-graph { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.5rem; padding: 0.4rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-subtle); } .ctpreset-graph__header { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; font-size: var(--text-2xs); color: var(--fg-muted); } .ctpreset-graph__title { font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-secondary); text-align: center; flex: 1 1 auto; } .ctpreset-graph__hud { font-family: var(--font-mono); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .ctpreset-graph__body { height: 2.75rem; border-radius: var(--radius-xs); overflow: hidden; position: relative; border: 1px solid var(--border-subtle); } .ctpreset-graph__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ctpreset-graph__window { fill: rgba(255, 255, 255, 0.1); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .ctpreset-graph__fill { fill: rgba(15, 15, 15, 0.72); } .ctpreset-graph__curve { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; } .ctpreset-graph__caption { font-size: var(--text-xs); color: var(--fg-secondary); text-align: center; } /* Threshold-brush range picker: an intensity histogram with a draggable [low,high] band. */ .thr-hist { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; } .thr-hist__header { display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; font-size: var(--text-2xs); color: var(--fg-muted); } .thr-hist__title { font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-secondary); text-align: center; flex: 1 1 auto; } .thr-hist__hud { font-family: var(--font-mono); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .thr-hist__body { position: relative; height: 3.25rem; overflow: hidden; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); background: var(--bg-subtle); cursor: ew-resize; touch-action: none; user-select: none; } .thr-hist__body--ro { cursor: default; } .thr-hist__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .thr-hist__fill { fill: color-mix(in srgb, var(--fg-secondary) 48%, transparent); } .thr-hist__band { fill: color-mix(in srgb, var(--accent) 24%, transparent); stroke: none; } .thr-hist__handle { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .thr-hist__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-muted); font-size: var(--text-xs); } .thr-hist__caption { font-size: var(--text-2xs); color: var(--fg-muted); text-align: center; } .thr-hist__fine { display: block; font-size: var(--text-xs); } .segpanel__seg-head { display: flex; justify-content: space-between; align-items: center; font-weight: var(--weight-semibold); } .segpanel__ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0 0.4rem; } .segpanel__ai-view { display: inline-flex; margin-left: auto; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; } .segpanel__ai-view-btn { padding: 0.1rem 0.5rem; font-size: var(--text-xs); background: var(--bg-surface); color: var(--fg-secondary); border: none; border-left: 1px solid var(--border-default); cursor: pointer; } .segpanel__ai-view-btn:first-child { border-left: none; } .segpanel__ai-view-btn.is-on { background: var(--accent-subtle); color: var(--accent-fg); } .segpanel__spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border-default); border-top-color: var(--accent); border-radius: 50%; animation: segpanel-spin 0.7s linear infinite; } @keyframes segpanel-spin { to { transform: rotate(360deg); } } .segpanel__ai-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: var(--text-xs); color: var(--fg-secondary); margin: 0 0 0.4rem; } .segpanel__ai-legend span { display: inline-flex; align-items: center; gap: 0.25rem; } .segpanel__ai-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .segpanel__ai-tag { font-size: var(--text-xs); color: var(--fg-faint); padding: 0 0.15rem; } .segpanel__ai-tag--err { color: var(--danger-fg, #ef4444); font-weight: var(--weight-bold); } /* min-height reserves room for the hover/active action buttons (1.7rem + 0.6rem padding) so the row doesn't grow — and push its siblings down — when they appear. */ .segpanel__seg { position: relative; display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.35rem; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-colors); min-height: 2.3rem; } .segpanel__seg:hover { background: var(--bg-hover); } .segpanel__seg.is-active { background: var(--bg-selected); box-shadow: var(--ring-selected); } /* Dim only the colour + name/volume for a hidden segment — NOT the whole row. A row-level opacity would also grey the ⋯ popover (a child) and, worse, create a stacking context that traps the popover below the click-backdrop so its items stop working. */ .segpanel__seg.is-hidden .segpanel__swatch-wrap, .segpanel__seg.is-hidden .segpanel__seg-main { opacity: 0.55; } .segpanel__swatch { width: 14px; height: 14px; border-radius: var(--radius-xs); display: block; background: var(--swatch, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } /* Swatch button: shows the current colour and opens the structure/colour editor modal. */ .segpanel__swatch-wrap { display: inline-flex; flex: 0 0 auto; cursor: pointer; line-height: 0; padding: 0; border: none; background: none; border-radius: var(--radius-xs); } .segpanel__swatch-wrap:hover .segpanel__swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px var(--border-accent); } .segpanel__seg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .segpanel__seg-name--muted { color: var(--fg-muted); } .segpanel__rename { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); padding: 0.1rem 0.3rem; border: 1px solid var(--border-accent); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--fg-primary); } .segpanel__rename:focus { outline: none; box-shadow: var(--ring-selected); } /* Row actions: removed from layout (not just faded) until the row is hovered/active, so the name fills the whole row for long, unselected segments instead of being truncated to leave room for hidden buttons. */ .segpanel__seg-actions { display: none; align-items: center; gap: 0.1rem; flex: 0 0 auto; } .segpanel__seg:hover .segpanel__seg-actions, .segpanel__seg.is-active .segpanel__seg-actions, .segpanel__seg.is-menuopen .segpanel__seg-actions { display: flex; } /* Keep the row looking hovered while its ⋯ menu is open (the fixed menu isn't a child, so moving onto it drops :hover and the actions would otherwise vanish). */ .segpanel__seg.is-menuopen:not(.is-active) { background: var(--bg-hover); } .segpanel__act { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; border: none; background: none; color: var(--fg-muted); border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition-colors); } .segpanel__act:hover { background: var(--bg-hover); color: var(--fg-primary); } .segpanel__act--danger:hover { background: var(--danger-bg); color: var(--danger); } .segpanel__act-icon { width: 15px; height: 15px; } .segpanel__confirm { font-size: var(--text-2xs); color: var(--danger-fg); margin-right: 0.15rem; } /* Structure/colour picker modal (Add segment + edit colour/name) */ .segpick { display: flex; flex-direction: column; gap: 0.75rem; } .segpick__custom { display: flex; gap: 0.75rem; align-items: flex-end; } .segpick__field { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--text-xs); color: var(--fg-secondary); } .segpick__field--name { flex: 1 1 auto; } .segpick__name-input { font-size: var(--text-sm); padding: 0.35rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); } .segpick__name-input:focus { outline: none; border-color: var(--border-accent); box-shadow: var(--ring-selected); } .segpick__color-wrap { position: relative; display: inline-flex; width: 2.4rem; height: 2.1rem; } .segpick__color-wrap .segpanel__swatch, .segpick__color-wrap .segpick__swatch { width: 100%; height: 100%; border-radius: var(--radius-sm); } .segpick__color { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0; cursor: pointer; } .segpick__swatch { display: block; border-radius: var(--radius-xs); background: var(--swatch, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); width: 14px; height: 14px; flex: 0 0 auto; } .segpick__divider { display: flex; align-items: center; text-align: center; color: var(--fg-muted); font-size: var(--text-xs); } .segpick__divider::before, .segpick__divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-subtle); } .segpick__divider span { padding: 0 0.6rem; } .segpick__search { font-size: var(--text-sm); padding: 0.4rem 0.6rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); } .segpick__search:focus { outline: none; border-color: var(--border-accent); box-shadow: var(--ring-selected); } .segpick__list { display: flex; flex-direction: column; gap: 0.1rem; max-height: 18rem; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 0.35rem; } .segpick__group-label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-muted); padding: 0.4rem 0.35rem 0.15rem; } .segpick__item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.35rem 0.4rem; border: none; background: none; border-radius: var(--radius-xs); cursor: pointer; color: var(--fg-primary); font-size: var(--text-sm); transition: var(--transition-colors); } .segpick__item:hover { background: var(--bg-hover); } .segpick__item.is-selected { background: var(--bg-selected); box-shadow: var(--ring-selected); } .segpick__item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Multi-add batch chips */ .segpick__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .segpick__chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.4rem 0.2rem 0.35rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 999px; font-size: var(--text-sm); color: var(--fg-primary); } .segpick__chip-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .segpick__chip-ai { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--accent-fg, #6cf); letter-spacing: 0.04em; } .segpick__chip-x { border: none; background: none; color: var(--fg-muted); cursor: pointer; font-size: var(--text-xs); line-height: 1; padding: 0 0.1rem; } .segpick__chip-x:hover { color: var(--danger-fg); } .segpick__addmanual { align-self: flex-start; font-size: var(--text-sm); color: var(--fg-primary); background: var(--bg-surface); border: 1px dashed var(--border-default); border-radius: var(--radius-sm); padding: 0.35rem 0.55rem; cursor: pointer; } .segpick__addmanual:hover { background: var(--bg-hover); border-color: var(--border-accent); } .segpick__item-check { margin-left: auto; color: var(--accent-fg, #6cf); font-weight: var(--weight-semibold); } /* "Use AI" toggle */ .segpick__ai { display: flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); color: var(--fg-primary); cursor: pointer; } .segpick__ai.is-disabled { color: var(--fg-muted); cursor: not-allowed; } .segpick__ai-hint { font-size: var(--text-2xs); color: var(--fg-muted); } /* Auto-seg quality tier picker, tucked under the "Use AI" toggle — indented so it reads as a sub-option. */ .segpick__ai-tier { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.1rem 0 0.2rem 1.65rem; } /* Per-segment AI state in the segment list row */ .segpanel__ai-spin { flex: 0 0 auto; width: 13px; height: 13px; margin-left: 0.35rem; border: 2px solid var(--border-default); border-top-color: var(--accent-fg, #6cf); border-radius: 50%; animation: hs-ai-spin 0.7s linear infinite; } @keyframes hs-ai-spin { to { transform: rotate(360deg); } } /* Auto-seg row status: spinner + queued/elapsed label (Queued… / Running m:ss). */ .segpanel__ai-run { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.35rem; } .segpanel__ai-run .segpanel__ai-spin { margin-left: 0; } .segpanel__ai-run-label { font-size: var(--text-2xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .segpanel__ai-failed { flex: 0 0 auto; margin-left: 0.35rem; font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--danger-fg); background: none; border: 1px solid var(--danger-fg); border-radius: var(--radius-xs); padding: 0.05rem 0.3rem; cursor: pointer; } /* Device the finished AI fill's inference ran on (GPU/CPU provenance chip). */ .segpanel__ai-device { flex: 0 0 auto; margin-left: 0.35rem; font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--fg-muted); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 0.05rem 0.3rem; white-space: nowrap; cursor: default; } /* AI-brush (interactive) panel: point counts, status line, action rows. */ .segpanel__ai-counts { display: flex; gap: 0.75rem; font-size: var(--text-xs); font-variant-numeric: tabular-nums; } .segpanel__ai-count--inc { color: #27d957; } .segpanel__ai-count--exc { color: #ff5b5b; } .segpanel__ai-status { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); color: var(--fg-muted); min-height: 1.3em; } .segpanel__ai-status-sub { color: var(--fg-muted); opacity: 0.75; } .segpanel__ai-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--border-default); } .segpanel__ai-dot--ok { background: #27d957; } .segpanel__ai-dot--err { background: var(--danger-fg); } .segpanel__ai-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .segpanel__ai-actions .btn { flex: 1 1 auto; } /* Smart-segment prompt: input row + typeahead of accepted structures beneath it. */ .segpanel__chatinput { display: flex; gap: 0.35rem; align-items: center; } .segpanel__chatinput .segpanel__smart-input { flex: 1 1 auto; min-width: 0; } .segpanel__chatinput .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .segpanel__suggest { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; } .segpanel__suggest-item { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.3rem 0.5rem; background: none; border: none; text-align: left; font-size: var(--text-xs); color: var(--fg-default); cursor: pointer; } .segpanel__suggest-item:hover { background: var(--bg-muted, rgba(128, 128, 128, 0.12)); } .segpanel__suggest-swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--swatch); } .segpanel__suggest-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .segpanel__suggest-group { flex: 0 0 auto; font-size: var(--text-2xs); color: var(--fg-muted); } /* AI-filling row: the delete button is the ONLY action (slider/eye/kebab hidden), so the spinner+elapsed label get the room they need instead of cramming into the hover-actions cluster. */ .segpanel__seg-actions--pending { display: flex; align-items: center; } .segpick__empty { color: var(--fg-muted); font-size: var(--text-sm); padding: 1rem; text-align: center; } .segpanel__count { margin-left: auto; color: var(--fg-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .segpanel__morph, .segpanel__combine, .segpanel__export, .segpanel__ai-settings { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); } .segpanel__morph-head, .segpanel__combine-head, .segpanel__export-head, .segpanel__ai-settings-head { display: flex; justify-content: space-between; align-items: center; font-weight: var(--weight-semibold); } .segpanel__ai-settings-label { font-size: var(--text-xs); color: var(--fg-secondary); margin-top: 0.2rem; } .segpanel__ai-host { color: var(--fg-muted); } .segpanel__morph-r { display: flex; align-items: center; gap: 0.3rem; font-weight: 400; font-size: var(--text-xs); } .segpanel__morph-r input[type=range] { width: 5rem; accent-color: var(--accent); } .segpanel__morph-btns, .segpanel__combine-btns { display: flex; flex-wrap: wrap; gap: 0.25rem; } .segpanel__smooth { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.4rem 0 0.5rem; } .segpanel__smooth label:not(.segpanel__check) { display: flex; flex-direction: column; color: var(--fg-secondary); } .segpanel__smooth input[type=range] { accent-color: var(--accent); } .segpanel__smooth-head { font-weight: var(--weight-semibold); font-size: var(--text-xs); color: var(--fg-secondary); margin-top: 0.25rem; } .segpanel__smooth-head:first-child { margin-top: 0; } .segpanel__select { width: 100%; padding: 0.15rem; font-size: var(--text-xs); } .segpanel__export-row { display: flex; gap: 0.4rem; align-items: center; } .segpanel__advtoggle { border: none; background: none; text-align: left; padding: 0.25rem 0; cursor: pointer; color: var(--fg-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-top: 1px solid var(--border-subtle); } .segpanel__advtoggle:hover { color: var(--fg-primary); } .slice-view__toggle { color: var(--fg-on-canvas); font-size: var(--text-2xs); display: flex; gap: 0.25rem; align-items: center; opacity: 0.8; } .slice-view__error { color: #ff9a9a; font-size: var(--text-2xs); padding: 0.15rem 0.35rem; } /* Fixed-width so the label cycling saved↔saving doesn't shift the stack chips that follow it. */ .editor__autosave { color: var(--fg-muted); font-size: var(--text-xs); margin-left: 0.5rem; display: inline-block; min-width: 8.5rem; white-space: nowrap; } .editor__case { display: flex; align-items: center; gap: 0.3rem; } .editor__case--staging { gap: 0.5rem; } .editor__case-name { font-weight: var(--weight-semibold); } /* Case name doubles as the rename control (editor page): hover hints editability, click swaps to the inline input. --editable only — the labeling page shows the same class as a plain span. */ /* button.* so the text cursor beats bootstrap's button:not(:disabled){cursor:pointer}. */ button.editor__case-name--editable { font-size: inherit; font-family: inherit; color: inherit; background: none; border: none; padding: 0.15rem 0.4rem; margin: -0.15rem -0.1rem; border-radius: var(--radius-sm); cursor: text; transition: var(--transition-colors); } button.editor__case-name--editable:hover { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-default); } /* ============================================================ Top-bar image stacks (Direction D) Stacks as clickable chips inline in the editor top bar. Active chip = accent tint; the primary stack carries the violet Master badge, every other stack reads Aligned (mint) or Coregister (amber, actionable). A square Add chip + a Coregister-all cluster when anything is pending. */ .hs-stackbar { display: inline-flex; align-items: center; gap: var(--space-2); padding-left: var(--space-4); border-left: 1px solid var(--border-subtle); min-width: 0; } .tchip { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; transition: var(--transition-colors); } .tchip:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--fg-primary); } .tchip:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 3px var(--border-accent)); } .tchip.is-active { background: var(--accent-subtle); border-color: var(--border-accent); color: var(--accent-fg); } .tchip__ico { display: inline-flex; color: var(--fg-muted); flex: 0 0 auto; } .tchip.is-active .tchip__ico { color: var(--accent-fg); } .tchip__name { overflow: hidden; text-overflow: ellipsis; max-width: 14rem; } .tchip.is-off { color: var(--fg-muted); } .tchip.is-off .tchip__name { font-style: italic; } /* 3D-visibility eye: always visible on the chip (not hover-gated like the kebab) */ .tchip__eye { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 0.1rem; border-radius: var(--radius-xs); color: var(--fg-muted); flex: 0 0 auto; transition: var(--transition-colors); } .tchip__eye:hover { background: var(--bg-active); color: var(--fg-secondary); } .tchip__eye.is-off { color: var(--fg-faint); } /* kebab: quiet until hover/active/open, so a single clean chip isn't busy */ .tchip__kebab { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 0.1rem; border-radius: var(--radius-xs); color: var(--fg-faint); opacity: 0; transition: var(--transition-colors); } .tchip:hover .tchip__kebab, .tchip.is-active .tchip__kebab, .tchip__kebab.is-open { opacity: 1; } .tchip__kebab:hover { background: var(--bg-active); color: var(--fg-secondary); } .tchip__add { width: 32px; padding: 0; justify-content: center; color: var(--fg-secondary); position: relative; overflow: hidden; } .tchip__add:hover { background: var(--accent-subtle); border-color: var(--border-accent); color: var(--accent-fg); } .tchip__add input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* status badges (shared vocabulary: violet master · mint aligned · amber coregister) */ .sbadge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-3xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 1px var(--space-2); border-radius: var(--radius-full); white-space: nowrap; line-height: 1.5; } .sbadge--master { background: var(--accent); color: var(--fg-on-accent); } .sbadge--aligned { background: var(--success-bg); color: var(--success-fg); } .sbadge--coreg { background: var(--warning-bg); color: var(--warning-fg); border: 1px solid var(--warning); cursor: pointer; transition: var(--transition-colors); } .sbadge--coreg:hover { background: var(--warning); color: #fff; } /* per-chip options popover */ .hs-stackmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-dropdown, 1000); display: flex; flex-direction: column; min-width: 14rem; padding: 0.3rem; background: var(--bg-raised, var(--bg-surface)); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--elevation-menu, var(--shadow-md)); cursor: default; font-weight: var(--weight-normal); } .hs-stackmenu__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border: none; background: none; color: var(--fg-primary); font: inherit; font-size: var(--text-sm); text-align: left; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-colors); } .hs-stackmenu__item:hover { background: var(--bg-hover); } .hs-stackmenu__item--danger { color: var(--danger); } .hs-stackmenu__item--danger:hover { background: var(--danger-bg); } .hs-stackmenu__coreg { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.4rem 0.5rem; border-top: 1px solid var(--border-subtle); margin-top: 0.2rem; } .hs-stackmenu__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-faint); } .hs-stackmenu__xyz { display: flex; gap: 0.3rem; } .hs-stackmenu__xyz label { display: inline-flex; flex-direction: column; font-size: var(--text-2xs); color: var(--fg-secondary); gap: 2px; } .hs-stackmenu__xyz input { width: 3.6rem; font-size: var(--text-xs); padding: 0.15rem 0.3rem; border: 1px solid var(--border-default); border-radius: var(--radius-xs); background: var(--bg-surface); color: var(--fg-primary); } .hs-stackmenu__drag { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); color: var(--fg-secondary); cursor: pointer; } /* coregister-all cluster (amber dot + button), shown only while a stack is pending */ .hs-stackbar__coreg { display: inline-flex; align-items: center; gap: var(--space-2); } .hs-stackbar__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--warning); flex: 0 0 auto; } .hs-stackbar__coreg-btn { display: inline-flex; align-items: center; gap: 0.35rem; } .hs-stackbar__error { font-size: var(--text-xs); color: var(--danger); } .hs-stackbar__phase { font-size: var(--text-xs); color: var(--fg-muted); } /* ── Per-chip image-appearance (contrast) button + its drop-down menu ───────────── */ .tchip__contrast { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 0.1rem; border-radius: var(--radius-xs); color: var(--fg-muted); flex: 0 0 auto; transition: var(--transition-colors); } .tchip__contrast:hover { background: var(--bg-active); color: var(--fg-secondary); } .tchip__contrast.is-open { background: var(--accent); color: var(--slate-0); } .tchip.is-active .tchip__contrast { color: var(--accent-fg); } .tchip.is-active .tchip__contrast.is-open { color: var(--slate-0); } /* transparent click-off catcher behind the open appearance menu */ .hs-appmenu__backdrop { position: fixed; inset: 0; z-index: var(--z-dropdown, 1000); } /* the "big menu below" — wide appearance panel dropped under the stack bar. Anchored to the chip's RIGHT edge (grows leftward): the top-bar chips always sit in the right portion of the screen, so a left-anchored menu would spill off the right edge. */ .hs-appmenu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: calc(var(--z-dropdown, 1000) + 1); display: block; width: 32rem; max-width: min(32rem, 94vw); max-height: min(92vh, 54rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; /* revealed by hsPlaceMenu once clamped into the viewport (avoids an off-screen flash) */ background: var(--bg-raised, var(--bg-surface)); border: 1px solid var(--border-default); border-radius: var(--radius-lg, var(--radius-md)); box-shadow: var(--elevation-menu, var(--shadow-lg)); cursor: default; font-weight: var(--weight-normal); } .hs-appmenu__head { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.7rem 0.85rem 0.55rem; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; position: sticky; top: 0; z-index: 1; background: var(--bg-raised, var(--bg-surface)); } .hs-appmenu__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); } .hs-appmenu__sub { font-size: var(--text-xs); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; } .hs-appmenu__close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -2px -4px 0 0; padding: 0; border: none; background: none; color: var(--fg-muted); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-colors); flex: 0 0 auto; align-self: center; } .hs-appmenu__close:hover { background: var(--bg-hover); color: var(--fg-primary); } .hs-appmenu .imgapp { padding: 0.8rem 1rem 0.9rem; gap: 0.65rem; } /* In the wide popover the colormap grid gets more columns so all presets fit without scrolling. The thumbs use a FIXED height (not aspect-ratio) so a scrollbar shrinking the column width can't grow their height and trigger a scroll-reservation feedback loop (classic Windows scrollbars). */ .hs-appmenu .ctpreset-picker__grid { grid-template-columns: repeat(5, 1fr); } .hs-appmenu .ctpreset-picker__thumb { aspect-ratio: auto; height: 3.25rem; } .hs-appmenu .imgapp__presets { grid-template-columns: repeat(3, 1fr); } /* the graph/section already sit under the imgapp gap — drop their own top margins in the popover */ .hs-appmenu .ctpreset-graph { margin-top: 0; } .hs-appmenu .ctpreset-graph__body { height: 2.4rem; } /* ── Image Appearance panel body (shared: top-bar popover + labeling sidebar) ───── */ .imgapp { display: flex; flex-direction: column; gap: 0.7rem; } .imgapp__section { display: flex; flex-direction: column; gap: 0.45rem; } .imgapp__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps, 0.05em); } .imgapp__wlrow { display: flex; align-items: center; } .imgapp__wlreadout { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); background: var(--bg-subtle); border: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--fg-secondary); font-variant-numeric: tabular-nums; } .imgapp__wlreadout b { color: var(--fg-primary); font-weight: var(--weight-semibold); } .imgapp__wltag { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.03em; color: var(--fg-faint); text-transform: uppercase; } .imgapp__wltag:not(:first-child) { margin-left: 0.25rem; } /* the contrast hint, restyled as a dismissible callout with inline mouse + drag-direction icons */ .imgapp__tip { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.75rem; background: var(--accent-subtle); border: 1px solid var(--border-accent); border-radius: var(--radius-md); } .imgapp__tip-line { margin: 0; font-size: var(--text-xs); line-height: 1.7; color: var(--fg-secondary); } .imgapp__tip-line b { color: var(--fg-primary); font-weight: var(--weight-semibold); } /* inline icons flow with the words — sized to the text, accent-tinted, nudged onto the baseline */ .imgapp__ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.16em; color: var(--accent); margin-right: 0.15em; } .imgapp__ico--mouse { width: 1.15em; height: 1.15em; vertical-align: -0.28em; } .imgapp__tip-dismiss { align-self: flex-start; padding: 0; border: none; background: none; font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--accent); cursor: pointer; } .imgapp__tip-dismiss:hover { text-decoration: underline; } /* redesigned contrast presets — Soft tissue / Bone / … as tidy cards with the W/L sub-label */ .imgapp__presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: 0.4rem; } .wlpreset { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; padding: 0.4rem 0.55rem; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.13s ease, background 0.13s ease, box-shadow 0.13s ease; } .wlpreset:hover { border-color: var(--border-strong); background: var(--bg-hover); } .wlpreset:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-subtle-hover, var(--accent-subtle)); border-color: var(--border-accent); } .wlpreset.is-active { border-color: var(--border-accent); background: var(--accent-subtle); } .wlpreset__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); line-height: 1.15; } .wlpreset__hu { font-size: var(--text-2xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; } .wlpreset.is-active .wlpreset__hu { color: var(--accent-fg); } .wlpreset--auto { background: transparent; border-style: dashed; } .editor__rename-input { padding: 0.15rem 0.4rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 14rem; } .editor__rename-act { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: none; background: none; border-radius: var(--radius-sm); color: var(--fg-secondary); cursor: pointer; transition: var(--transition-colors); } .editor__rename-act:hover:not(:disabled) { background: var(--bg-hover); color: var(--fg-primary); } .editor__rename-act--confirm { color: var(--success-fg); } .editor__staging-label { font-weight: var(--weight-semibold); color: var(--warning-fg); } .editor__staging-name { padding: 0.15rem 0.4rem; font-size: var(--text-sm); } .editor__staging-error { color: var(--danger); font-size: var(--text-sm); } .editor__ai-btn { display: inline-flex; align-items: center; gap: 0.4rem; } .editor__spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--slate-200); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* mint-700/800 (not bright --success) so the white label clears WCAG AA (4.5:1) in both themes — white on the brand-bright mint was unreadable (1.8:1 dark / 2.9:1 light). */ .btn-success { color: #fff; background-color: var(--mint-700); border-color: transparent; } .btn-success:hover:not(:disabled), .btn-success:focus:not(:disabled) { background-color: var(--mint-800); color: #fff; } /* Green-OUTLINE success (used by the editor Validate button) — quieter than the solid fill. */ .btn-outline-success { color: var(--success-fg); background-color: transparent; border-color: var(--success); } .btn-outline-success:hover:not(:disabled), .btn-outline-success:focus:not(:disabled) { color: var(--success-fg); background-color: var(--success-bg); border-color: var(--success); } .editor__reopen-btn { margin-left: 0.25rem; } .editor__validated { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--success-fg); background: var(--success-bg); padding: 0.15rem 0.5rem; border-radius: 999px; } /* =========================================================================== 3 · LIBRARY =========================================================================== */ .library { min-height: 100vh; display: flex; flex-direction: column; padding: 2rem; box-sizing: border-box; background: var(--bg-app); } .library__header, .library__status, .library__loading, .library__empty, .library__list { width: 100%; max-width: 880px; align-self: center; } .library__header { display: flex; align-items: center; margin-bottom: 1.5rem; } .library__title { margin: 0; margin-right: auto; font-size: var(--text-h1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); } .library__actions { display: flex; gap: 0.5rem; align-items: center; } .library__status { color: var(--success-fg); font-size: var(--text-sm); margin-bottom: 0.75rem; } .library__create-hint { color: var(--fg-secondary); font-size: var(--text-xs); margin: 0 0 0.5rem; } .library__create-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .library__ai-toggle { margin: 0.5rem 0 0.25rem; } .library__create label.btn { margin: 0; cursor: pointer; } .library__dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; color: var(--fg-muted); background: var(--bg-sunken); } .library__dropzone.is-drag { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-fg); } .library__loading { display: flex; align-items: center; gap: 0.75rem; padding: 3rem 0; color: var(--fg-muted); } .library__spinner { width: 18px; height: 18px; border: 2px solid var(--slate-150); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; } .library__empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5rem 2rem; color: var(--fg-faint); } .library__empty-icon { margin-bottom: 1.25rem; color: var(--accent); opacity: 0.7; } .library__empty-title { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-secondary); margin: 0 0 0.5rem; } .library__empty-sub { font-size: var(--text-base); color: var(--fg-muted); margin: 0 0 1.75rem; line-height: 1.6; } .library__list { display: flex; flex-direction: column; gap: 0.5rem; } .library__row { display: flex; align-items: center; gap: 1rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.85rem 1rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, border-color 0.15s; } .library__row:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .library__row--clickable { cursor: pointer; } .library__row--unsupported { background: var(--warning-bg); border-color: var(--amber-100); } .library__row-icon { color: var(--fg-faint); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .library__row-check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 0.15rem; } .library__row-check input { cursor: pointer; } .library__row-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; background: #000; display: block; } .library__row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; } .library__row-name { font-weight: var(--weight-semibold); font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .library__row-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .library__row-date { font-size: var(--text-xs); color: var(--fg-muted); } .library__row-warn { font-size: var(--text-xs); color: var(--warning-fg); font-weight: var(--weight-medium); } .library__row-controls { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } /* Status badges → tokens */ .library__badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .library__badge--draft { background: var(--bg-active); color: var(--fg-secondary); } .library__badge--inprogress { background: var(--info-bg); color: var(--info-fg); } .library__badge--validated { background: var(--success-bg); color: var(--success-fg); } .library__rename-row { display: flex; gap: 0.4rem; align-items: center; } .library__rename-input { flex: 1 1 auto; padding: 0.3rem 0.5rem; font-size: var(--text-base); border: 1px solid var(--accent); border-radius: var(--radius-sm); outline: none; box-shadow: var(--ring-focus); } .library__delete-confirm-label { font-size: var(--text-sm); color: var(--danger); font-weight: var(--weight-medium); white-space: nowrap; } /* =========================================================================== 4 · MODALS / DIALOGS =========================================================================== */ .hs-modal-overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: var(--z-overlay); } .hs-modal { background: var(--bg-raised); border-radius: var(--radius-lg); width: min(480px, 92vw); box-shadow: var(--elevation-dialog); } .hs-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); } .hs-modal__header h3 { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-semibold); } .hs-modal__close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--fg-muted); } .hs-modal__close:hover { color: var(--fg-primary); } .hs-modal__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .hs-modal__field { display: flex; flex-direction: column; gap: 0.25rem; } .hs-modal__field input { padding: 0.4rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); } .hs-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .hs-modal--wide { width: min(640px, 95vw); } /* =========================================================================== 5 · AI SEGMENT MODAL =========================================================================== */ .ai-seg__target { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); margin-bottom: 0.5rem; } .ai-seg__target select { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); } .ai-seg__hint { font-size: var(--text-xs); color: var(--fg-muted); margin: 0 0 0.5rem; } .ai-seg__config { display: flex; flex-direction: column; gap: 0.75rem; } .ai-seg__row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .ai-seg__row label { display: flex; flex-direction: column; gap: 0.2rem; } .ai-seg__row select { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); } .ai-seg__check { flex-direction: row !important; align-items: center; gap: 0.4rem !important; } .ai-seg__picker { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } .ai-seg__picker-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--bg-sunken); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; } .ai-seg__search { flex: 1; min-width: 140px; padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-sm); } .ai-seg__count { font-size: var(--text-xs); color: var(--fg-muted); margin-left: auto; } .ai-seg__groups { max-height: 350px; overflow-y: auto; padding: 0.25rem 0; } .ai-seg__group { border-bottom: 1px solid var(--border-subtle); } .ai-seg__group:last-child { border-bottom: none; } .ai-seg__group-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; cursor: pointer; user-select: none; font-size: var(--text-sm); background: var(--bg-surface); position: sticky; top: 0; } .ai-seg__group-header:hover { background: var(--bg-hover); } .ai-seg__group-arrow { font-size: 0.6rem; transition: transform 0.15s; display: inline-block; color: var(--fg-muted); } .ai-seg__group-arrow--open { transform: rotate(90deg); } .ai-seg__group-count { font-size: var(--text-xs); color: var(--fg-muted); } .ai-seg__item { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem 0.2rem 1.4rem; font-size: var(--text-sm); cursor: pointer; } .ai-seg__item:hover { background: var(--bg-hover); } .ai-seg__color { width: 12px; height: 12px; border-radius: var(--radius-xs); flex-shrink: 0; background: var(--swatch, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .ai-seg__progress { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; } .ai-seg__status { font-size: var(--text-base); } .ai-seg__error { color: var(--danger); font-size: var(--text-sm); } .ai-seg__done { display: flex; align-items: center; gap: 0.75rem; } /* =========================================================================== 6 · PROGRESS + ERRORS =========================================================================== */ .hs-progress { display: flex; flex-direction: column; gap: 0.35rem; } .hs-progress__label { font-size: var(--text-sm); color: var(--fg-secondary); } .hs-progress__bar { height: 8px; background: var(--bg-active); border-radius: var(--radius-full); overflow: hidden; } .hs-progress__fill { height: 100%; background: var(--accent); transition: width 0.1s linear; } .library__open-error { display: flex; flex-direction: column; gap: 0.4rem; } .library__open-error strong { color: var(--danger); } .library__open-error pre { background: var(--danger-bg); border: 1px solid var(--red-100); border-radius: var(--radius-sm); padding: 0.5rem; margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm); color: var(--red-700); } /* =========================================================================== 7 · RESEARCH WORKSPACE (shell + projects + case list) =========================================================================== */ .shell { display: flex; min-height: 100vh; background: var(--bg-app); } .shell__nav { flex: 0 0 220px; width: 220px; box-sizing: border-box; padding: 1.25rem 0.75rem; border-right: 1px solid var(--border-default); background: var(--bg-surface); display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; } .shell__brand { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.5rem; } .shell__brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); } .shell__brand-name { font-weight: var(--weight-semibold); font-size: var(--text-base); } .shell__beta { padding: 0.05rem 0.4rem; border-radius: var(--radius-full); background: var(--warning-bg); color: var(--warning-fg); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .shell__group { display: flex; flex-direction: column; gap: 0.15rem; } .shell__group-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-faint); font-weight: var(--weight-semibold); padding: 0 0.6rem 0.35rem; } .shell__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; transition: background 0.12s, color 0.12s; } .shell__link:hover { background: var(--bg-sunken); color: var(--fg-primary); } .shell__link.active { background: var(--accent-subtle); color: var(--accent-fg); } .shell__link svg { flex-shrink: 0; } .shell__soon { margin-left: auto; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-faint); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 0.05rem 0.4rem; } .shell__account { margin-top: auto; padding: 0.75rem 0.6rem 0; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 0.5rem; } .shell__account-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); } .shell__account-link { font-size: var(--text-sm); color: var(--fg-muted); text-decoration: none; } .shell__account-link:hover { color: var(--accent-fg); } .shell__account-signout { align-self: flex-start; } .shell__main { flex: 1 1 auto; min-width: 0; overflow-y: auto; height: 100vh; } .page { max-width: 980px; margin: 0 auto; padding: 2rem; box-sizing: border-box; } .page__crumbs { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: 0.75rem; } .page__crumbs a { color: var(--fg-secondary); text-decoration: none; } .page__crumbs a:hover { color: var(--accent-fg); } .page__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .page__title { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); } .page__subtitle { margin: 0.3rem 0 0; color: var(--fg-muted); font-size: var(--text-sm); } .page__actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; } .page__status { color: var(--danger); font-size: var(--text-sm); margin: 0 0 0.75rem; } .page__loading { display: flex; align-items: center; gap: 0.75rem; padding: 3rem 0; color: var(--fg-muted); } .card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1rem; box-shadow: var(--shadow-sm); } .card--form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; max-width: 520px; } .card__actions { display: flex; gap: 0.5rem; } .field { width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; font-size: var(--text-sm); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); outline: none; } .field:focus { border-color: var(--accent); box-shadow: var(--ring-focus); } .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; } .projcard { position: relative; display: flex; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, border-color 0.15s; min-height: 120px; } .projcard:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .projcard--all { background: var(--bg-sunken); } .projcard__body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 auto; min-width: 0; padding: 1rem; cursor: pointer; } .projcard__icon { color: var(--accent); opacity: 0.85; } .projcard__name { font-weight: var(--weight-semibold); font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.5rem; } .projcard__desc { font-size: var(--text-sm); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1 1 auto; } .projcard__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.35rem; font-size: var(--text-xs); color: var(--fg-faint); } .projcard__count { font-weight: var(--weight-semibold); color: var(--fg-secondary); } .projcard__opts { position: absolute; z-index: 2; top: 0.55rem; right: 0.55rem; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--fg-faint); cursor: pointer; opacity: 0.45; transition: opacity 0.15s, background 0.15s, color 0.15s; } .projcard:hover .projcard__opts { opacity: 1; } .projcard__opts:hover { background: var(--bg-sunken); color: var(--fg-secondary); } .projcard__opts:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; } .projcard--editing { cursor: default; flex-direction: column; gap: 0.5rem; justify-content: center; padding: 1rem; } .projcard--editing:hover { box-shadow: var(--shadow-sm); border-color: var(--accent); } .projcard__edit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; } .projcard__edit-delete { margin-left: auto; } .projcard__confirm { font-size: var(--text-xs); color: var(--fg-secondary); margin-right: auto; } .caselist__toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .caselist__search { display: flex; align-items: center; gap: 0.45rem; flex: 1 1 240px; min-width: 180px; padding: 0.4rem 0.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-muted); } .caselist__search:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); } .caselist__search-input { border: 0; outline: 0; background: transparent; font-size: var(--text-sm); color: var(--fg-primary); flex: 1 1 auto; } .caselist__select { padding: 0.4rem 0.6rem; font-size: var(--text-sm); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); } .caselist__count { font-size: var(--text-xs); color: var(--fg-faint); margin-left: auto; } .caselist__none { color: var(--fg-muted); font-size: var(--text-sm); padding: 2rem 0; text-align: center; } .caselist__subject { font-size: var(--text-xs); color: var(--fg-secondary); } .caselist__chip { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); color: var(--accent-fg); background: var(--accent-subtle); border-radius: var(--radius-full); padding: 0.1rem 0.5rem; } .caseedit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; padding: 0.25rem 0; } .caseedit__field { display: flex; flex-direction: column; gap: 0.2rem; } .caseedit__label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-faint); font-weight: var(--weight-semibold); } .caseedit__actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; } /* --------------------------------------------------------------------------- Labeling pages — /labeling and /labeling/{projectId} Shares the .library* shell from the clinical library; only the labeling-specific chrome (chips, status pills, status switch, tag chips, schema editor, project header) is bespoke. --------------------------------------------------------------------------- */ /* Project list cards */ .lbl-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: var(--radius-full); background: var(--bg-sunken); color: var(--fg-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); } /* Clickable project chip (image library "used in") */ .lbl-chip--link { gap: 0.35rem; border: 1px solid var(--border-default); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .lbl-chip--link:hover { background: var(--bg-hover); color: var(--fg-primary); } .lbl-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; border-radius: var(--radius-full); background: var(--bg-canvas); color: var(--fg-muted); font-size: 0.65rem; } /* Warning chip (e.g. "already in this project") */ .lbl-chip--warn { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--red-100); } /* Active trained-model chip */ .lbl-chip--active { background: color-mix(in srgb, #3cb44b 18%, var(--bg-sunken)); color: var(--fg-primary); font-weight: var(--weight-semibold); } /* Per-project coloured chip + dot (deterministic --proj colour) */ .lbl-chip__dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-full); background: var(--proj, var(--fg-muted)); flex: 0 0 auto; } .lbl-chip--proj { border-color: color-mix(in srgb, var(--proj) 55%, transparent); background: color-mix(in srgb, var(--proj) 12%, var(--bg-sunken)); color: var(--fg-primary); } .lbl-chip--proj:hover { background: color-mix(in srgb, var(--proj) 22%, var(--bg-sunken)); color: var(--fg-primary); } /* Image-library toolbar (search + filters + view toggle) */ .library__toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .library__search { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--fg-muted); } .library__search input { border: none; background: transparent; outline: none; color: var(--fg-primary); font-size: var(--text-sm); min-width: 13rem; } .library__filter { width: auto; min-width: 9rem; } .library__toolbar-spacer { flex: 1 1 auto; } .library__count { font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; } .library__view-toggle { display: inline-flex; gap: 0.25rem; } /* Dataset detail */ .ds-meta { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; } .ds-section { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); margin: 1rem 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; } /* Image-library grid view */ .library__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; } .lib-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); } .lib-card__top { display: flex; align-items: center; gap: 0.5rem; } .lib-card__name { font-weight: var(--weight-semibold); color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lib-card__projects { margin-top: 0.1rem; } .lib-card__controls { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.25rem; } /* Image-library "add to projects" picker */ .lbl-pick__rows { display: flex; flex-direction: column; gap: 0.25rem; max-height: 16rem; overflow-y: auto; } .lbl-pick__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; } .lbl-pick__row:hover { background: var(--bg-hover); } .lbl-pick__name { flex: 1; font-size: var(--text-sm); color: var(--fg-primary); } /* New-project modal label-schema editor */ .lbl-form__row { display: flex; flex-direction: column; gap: 0.25rem; } .lbl-form__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); } .lbl-form__section-title { display: flex; align-items: baseline; gap: 0.75rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); margin-top: 0.25rem; } .lbl-form__hint { font-weight: var(--weight-regular); color: var(--fg-muted); font-size: var(--text-xs); } .lbl-form__error { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--red-100); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font-size: var(--text-sm); margin: 0; } .lbl-form__progress { width: 100%; height: 0.5rem; background: var(--bg-subtle); border-radius: var(--radius-sm); overflow: hidden; margin-top: 0.4rem; } .lbl-form__progress-bar { height: 100%; background: var(--accent-fg); transition: width 120ms linear; } .lbl-schema__rows { display: flex; flex-direction: column; gap: 0.4rem; } /* Dataset→project label-map editor: chip · arrow · full-width select (don't reuse the schema grid, whose narrow color column squeezes the select and clips its options). */ .lbl-map__rows { display: flex; flex-direction: column; gap: 0.4rem; } .lbl-map__row { display: grid; grid-template-columns: minmax(6rem, auto) auto 1fr; gap: 0.5rem; align-items: center; } .lbl-map__row select { width: 100%; } .lbl-map__arrow { color: var(--fg-muted); } .lbl-schema__row { display: grid; grid-template-columns: 70px 1fr 38px 36px; gap: 0.4rem; align-items: center; } .lbl-schema__id { padding: 0.3rem 0.4rem; } .lbl-schema__name { padding: 0.3rem 0.5rem; } .lbl-schema__color { width: 38px; height: 32px; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: transparent; cursor: pointer; } /* Project page — header breadcrumb + schema bar */ .lbl-project__title-wrap { display: flex; flex-direction: column; gap: 0.15rem; margin-right: auto; } .lbl-project__breadcrumb { font-size: var(--text-xs); color: var(--fg-muted); text-decoration: none; } .lbl-project__breadcrumb:hover { color: var(--accent-fg); } .lbl-schema-bar { width: 100%; max-width: 880px; align-self: center; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0; margin-bottom: 0.5rem; } .lbl-schema-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-surface); font-size: var(--text-xs); color: var(--fg-primary); } .lbl-schema-chip__swatch { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); flex-shrink: 0; } .lbl-schema-chip__id { color: var(--fg-muted); font-variant-numeric: tabular-nums; } /* Filters */ .lbl-filters { width: 100%; max-width: 880px; align-self: center; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .lbl-filters__pills { display: flex; gap: 0.3rem; flex-wrap: wrap; } .lbl-pill { padding: 0.2rem 0.7rem; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; transition: var(--transition-colors); } .lbl-pill:hover { background: var(--bg-hover); color: var(--fg-primary); } .lbl-pill--on { background: var(--accent-subtle); color: var(--accent-fg); border-color: var(--border-accent); } .lbl-filters__inputs { display: flex; gap: 0.3rem; align-items: center; } .lbl-filters__search { width: 180px; } .lbl-filters__tag { width: 130px; } /* Status badge (on rows) */ .lbl-status-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .lbl-status-badge--unlabeled { background: var(--bg-active); color: var(--fg-secondary); } .lbl-status-badge--inprogress { background: var(--info-bg); color: var(--info-fg); } .lbl-status-badge--review { background: var(--warning-bg); color: var(--warning-fg); } .lbl-status-badge--labeled { background: var(--success-bg); color: var(--success-fg); } .lbl-status-badge--clinical { background: var(--accent); color: var(--fg-on-accent); } .lbl-status-badge--ailabeled { background: var(--accent-subtle); color: var(--accent-fg); } /* Status switch (per-row button group) */ .lbl-status-switch { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; } .lbl-status-switch__btn { padding: 0.2rem 0.5rem; min-width: 26px; background: var(--bg-surface); color: var(--fg-secondary); border: none; border-left: 1px solid var(--border-default); font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; transition: var(--transition-colors); } .lbl-status-switch__btn:first-child { border-left: none; } .lbl-status-switch__btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--fg-primary); } .lbl-status-switch__btn--on { background: var(--accent); color: var(--fg-on-accent); } .lbl-status-switch__btn--on:hover:not(:disabled) { background: var(--accent-hover); color: var(--fg-on-accent); } /* Labeled/Clinical (and any disabled) buttons are shown but greyed — they're reached via review sign-off, not set here. The current status stays highlighted (--on) even while disabled. */ .lbl-status-switch__btn:disabled:not(.lbl-status-switch__btn--on) { opacity: 0.4; cursor: not-allowed; } .lbl-status-switch__btn:disabled.lbl-status-switch__btn--on { cursor: default; } /* Review progress chips (case list) */ .lbl-review-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-full); background: var(--bg-hover); color: var(--fg-secondary); font-size: var(--text-2xs); font-weight: var(--weight-semibold); } .lbl-review-who { font-size: var(--text-2xs); color: var(--fg-muted); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Reviewer panel (editor toolbar) */ .lbl-review { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .lbl-review__group { display: inline-flex; align-items: center; gap: 0.4rem; } .lbl-review__count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-secondary); } .lbl-review__names { font-size: var(--text-xs); color: var(--fg-muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbl-review__error { font-size: var(--text-xs); color: var(--danger-fg); } /* Imports panel (project page) — return to an in-progress / recent import */ .lbl-imports { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.6rem 0.8rem; margin-bottom: 1rem; background: var(--bg-surface); } .lbl-imports__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; } .lbl-imports__close { margin-left: auto; background: none; border: none; color: var(--fg-muted); cursor: pointer; font-size: var(--text-sm); line-height: 1; padding: 0 0.2rem; } .lbl-imports__close:hover { color: var(--fg-primary); } /* highlight the top-bar Imports button while a job is running */ .lbl-imports-btn--active { border-color: var(--warning-fg); color: var(--warning-fg); } .lbl-imports__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-secondary); } .lbl-imports__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .lbl-imports__row { display: flex; align-items: center; gap: 0.6rem; } .lbl-imports__meta { font-size: var(--text-xs); color: var(--fg-muted); } .lbl-imports__row .btn { margin-left: auto; } /* Import status view (?job=) */ .lbl-import__status-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0; } /* AI-accuracy panel (project page) */ .lbl-aiacc { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.5rem 0.8rem; margin-bottom: 1rem; background: var(--bg-surface); } .lbl-aiacc__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .lbl-aiacc__toggle { background: none; border: none; color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; padding: 0; } .lbl-aiacc__filter { margin-left: auto; font-size: var(--text-xs); color: var(--fg-secondary); display: inline-flex; align-items: center; gap: 0.3rem; } .lbl-aiacc__table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font-size: var(--text-xs); } .lbl-aiacc__table th, .lbl-aiacc__table td { text-align: left; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border-subtle); } .lbl-aiacc__table th { color: var(--fg-muted); font-weight: var(--weight-semibold); } /* Tag chips on case rows */ .lbl-tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-fg); font-size: var(--text-xs); font-weight: var(--weight-medium); } .lbl-tag-chip__x { background: none; border: none; color: var(--accent-fg); cursor: pointer; padding: 0 0.15rem; font-size: var(--text-sm); line-height: 1; opacity: 0.6; } .lbl-tag-chip__x:hover { opacity: 1; } .lbl-tag-chip--add { background: transparent; border: 1px dashed var(--border-strong); color: var(--fg-muted); cursor: pointer; } .lbl-tag-chip--add:hover { color: var(--accent-fg); border-color: var(--border-accent); } .lbl-tag-add { display: inline-flex; gap: 0.3rem; align-items: center; } .lbl-tag-add__input { width: 140px; } /* Auth + platform */ /* App shell: a body that fills the viewport (no global header bar). The editor fills app-body exactly (height:100%); scrolling list pages scroll inside app-body. */ .app-root { display: flex; flex-direction: column; height: 100vh; } .app-body { flex: 1 1 auto; min-height: 0; overflow: auto; } /* ============================================================================ 8b · PLATFORM ADMIN (Platform.razor — sidebar + tab panels) ============================================================================ */ .pl { display: flex; height: 100vh; width: 100%; overflow: hidden; background: var(--bg-app); color: var(--fg-primary); } .pl-side { flex: 0 0 220px; display: flex; flex-direction: column; background: var(--bg-surface); border-right: 1px solid var(--border-default); } .pl-side__head { padding: 16px 14px 10px; border-bottom: 1px solid var(--border-default); } .pl-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; text-decoration: none; } .pl-brand:hover .ws-brand__name { color: var(--accent); } .pl-side__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg-primary); } .pl-side__sub { margin: 4px 0 0; font-size: var(--text-xs); color: var(--fg-muted); } .pl-side__nav { flex: 1; padding: 8px 10px; overflow-y: auto; } .pl-nav { display: flex; flex-direction: column; gap: 2px; } .pl-nav__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; text-align: left; } .pl-nav__btn:hover { background: var(--bg-hover); color: var(--fg-primary); } .pl-nav__btn.is-active { background: var(--accent-subtle); color: var(--accent-fg); } .pl-side__foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border-default); } .pl-foot__spacer { flex: 1 1 auto; } .pl-foot__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--fg-muted); cursor: pointer; text-decoration: none; } .pl-foot__icon:hover { background: var(--bg-hover); color: var(--fg-primary); } .pl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .pl-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); } .pl-bar__title { margin: 0; font-size: 18px; font-weight: 700; flex: 1; } .pl-scroll { flex: 1; overflow-y: auto; padding: 20px; } .pl-panel { max-width: 960px; } .pl-panel--wide { max-width: none; } .pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; } .pl-card { padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); } .pl-card__label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); font-weight: var(--weight-semibold); margin-bottom: 6px; } .pl-card__value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-primary); } .pl-card__hint { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 4px; } .pl-section { margin-bottom: 28px; } .pl-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pl-section__head h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; } .pl-section__hint { font-size: var(--text-xs); color: var(--fg-muted); margin: -6px 0 12px; } .pl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; } .pl-field { display: flex; flex-direction: column; gap: 4px; } .pl-field__label { font-size: var(--text-xs); color: var(--fg-secondary); font-weight: 500; } .pl-input { height: var(--control-height-sm); padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); font-size: var(--text-sm); min-width: 0; } .pl-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); } .pl-input--area { height: auto; min-height: 120px; padding: 10px; font-family: var(--font-mono); font-size: var(--text-xs); resize: vertical; } .pl-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--fg-secondary); white-space: nowrap; } /* Field grids hold ONLY labelled inputs; align inputs at the top so an optional hint under one field (e.g. password) doesn't push its input out of line with siblings. Buttons go in .pl-form-actions and checkboxes in .pl-form-checks — never inside the grid. */ .pl-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-items: start; margin-bottom: 10px; } .pl-form-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 12px; } .pl-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 4px; } .pl-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); } .pl-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .pl-table th, .pl-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .pl-table th { background: var(--bg-sunken); color: var(--fg-secondary); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; } .pl-table tr:last-child td { border-bottom: 0; } .pl-table tr:hover td { background: var(--bg-hover); } .pl-table tr.is-disabled td { opacity: 0.55; } .pl-table tr.is-edit td { background: var(--accent-subtle); } .pl-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: 600; } .pl-badge--ok { background: var(--success-bg); color: var(--success); } .pl-badge--warn { background: var(--warning-bg); color: var(--warning); } .pl-badge--muted { background: var(--bg-sunken); color: var(--fg-muted); } .pl-badge--accent { background: var(--accent-subtle); color: var(--accent-fg); } .pl-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pl-empty { padding: 32px; text-align: center; color: var(--fg-muted); font-size: var(--text-sm); } .pl-toast { margin: 0 20px 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); } .pl-toast--ok { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border, transparent); } .pl-toast--err { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border, transparent); } .pl-token { font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; padding: 8px 10px; background: var(--bg-sunken); border-radius: var(--radius-sm); margin-top: 8px; } .pl-mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); } .pl-card--clickable { cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } .pl-card--clickable:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); } .pl-card__value--warn { color: var(--danger); } .pl-row-clickable { cursor: pointer; } .pl-row-clickable:hover td { background: var(--accent-subtle); } .pl-cards--org { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .pl-org-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .pl-org-header__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; } .pl-org-back { margin-top: 2px; } .pl-org-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; } .pl-org-sub { margin: 0; font-size: var(--text-sm); color: var(--fg-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pl-compare-strip { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 10px 14px; margin-bottom: 20px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--fg-secondary); } .pl-chart-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .pl-charts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .pl-charts-grid { grid-template-columns: 1fr; } } .pl-chart-panel { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 0; } .pl-chart-panel--wide { margin-bottom: 24px; } .pl-org-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 8px; } @media (max-width: 900px) { .pl-org-grid { grid-template-columns: 1fr; } } /* Org-scoped user manager embedded in the org detail page. */ .pl-org-users { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-sunken); padding: 16px 18px; margin-bottom: 20px; } .pl-org-users > .pl-section__head { margin-bottom: 16px; } .pl-users-embed .pl-section:last-child { margin-bottom: 0; } .pl-chart { margin-top: 4px; } .pl-chart__svg { width: 100%; height: 120px; display: block; background: var(--bg-sunken); border-radius: var(--radius-sm); } .pl-chart__bar { fill: var(--accent); opacity: 0.85; } .pl-chart__labels { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; font-size: 10px; color: var(--fg-muted); font-family: var(--font-mono); overflow: hidden; } .pl-chart__labels span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-chart__peak { margin-top: 6px; font-size: var(--text-xs); color: var(--fg-muted); } .pl-chart-empty { height: 120px; display: flex; align-items: center; justify-content: center; padding: 0; } .pl-hbars { display: flex; flex-direction: column; gap: 10px; } .pl-hbar { display: grid; grid-template-columns: 5.5rem 1fr 2rem; gap: 8px; align-items: center; font-size: var(--text-sm); } .pl-hbar__label { color: var(--fg-secondary); } .pl-hbar__track { height: 8px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; } .pl-hbar__fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); min-width: 2px; } .pl-hbar__fill--validated { background: var(--success); } .pl-hbar__fill--inprogress { background: var(--accent); } .pl-hbar__fill--draft { background: var(--fg-muted); opacity: 0.45; } .pl-hbar__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-primary); font-weight: 600; } .pl-errors-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .pl-errors-layout { grid-template-columns: 1fr; } } .pl-dl { display: grid; grid-template-columns: 7rem 1fr; gap: 6px 12px; font-size: var(--text-sm); margin: 0; } .pl-dl dt { color: var(--fg-muted); font-weight: 500; } .pl-dl dd { margin: 0; } .pl-stack { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px; font-family: var(--font-mono); font-size: 11px; overflow: auto; max-height: 200px; white-space: pre-wrap; word-break: break-word; } .pl-stack--sm { max-height: 120px; } .pl-timeline { list-style: none; margin: 0; padding: 0 0 0 8px; border-left: 2px solid var(--border-default); } .pl-timeline__item { position: relative; padding: 8px 0 8px 16px; font-size: var(--text-sm); } .pl-timeline__item::before { content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-default); } .pl-timeline__item--nav::before { background: var(--accent); } .pl-timeline__item--error::before { background: var(--danger); } .pl-timeline__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); margin-right: 8px; } .pl-timeline__type { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); margin-right: 6px; } .pl-timeline__route { display: block; font-size: var(--text-xs); color: var(--fg-muted); margin-top: 2px; } /* ---- Server metrics dashboard (Server tab) ---- */ .pl-metric { padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 6px; } .pl-metric__value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-primary); line-height: 1.1; } .pl-metric__value--muted { color: var(--fg-muted); } .pl-metric__value--net { font-size: 15px; display: flex; flex-direction: column; gap: 2px; } .pl-meter { height: 6px; background: var(--bg-sunken); border-radius: var(--radius-full); overflow: hidden; } .pl-meter__fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); min-width: 2px; transition: width var(--duration-fast) linear; } .pl-meter__fill--gpu { background: var(--success); } .pl-meter__fill.is-warn, .pl-hbar__fill.is-warn { background: var(--warning); } .pl-meter__fill.is-crit, .pl-hbar__fill.is-crit { background: var(--danger); } .pl-net-dn { color: var(--success); font-variant-numeric: tabular-nums; } .pl-net-up { color: var(--info); font-variant-numeric: tabular-nums; } .pl-live { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: var(--text-xs); color: var(--success); text-transform: uppercase; letter-spacing: 0.04em; } .pl-live--off { color: var(--fg-muted); } .pl-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pl-pulse 1.6s ease-in-out infinite; } .pl-live--off .pl-live__dot { background: var(--fg-muted); animation: none; } @keyframes pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .pl-server-updated { align-self: center; color: var(--fg-muted); font-size: var(--text-xs); } .pl-chart-now { font-size: var(--text-sm); font-weight: 600; color: var(--fg-primary); font-variant-numeric: tabular-nums; } .pl-chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--text-2xs); color: var(--fg-muted); } .pl-spark { width: 100%; height: 110px; display: block; background: var(--bg-sunken); border-radius: var(--radius-sm); } .pl-spark__area { fill: color-mix(in srgb, var(--spark, var(--accent)) 20%, transparent); stroke: none; } .pl-spark__line { fill: none; stroke: var(--spark, var(--accent)); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .pl-spark__grid { stroke: var(--border-subtle); stroke-width: 0.5; vector-effect: non-scaling-stroke; } .pl-spark--cpu { --spark: var(--accent); } .pl-spark--ram { --spark: var(--info); } .pl-spark--gpu { --spark: var(--success); } .pl-spark__line--a { stroke: var(--success); } .pl-spark__line--b { stroke: var(--info); } .pl-cores { display: flex; flex-wrap: wrap; gap: 4px; } .pl-core { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--accent) calc(var(--l, 0) * 1%), var(--bg-sunken)); } .pl-gpu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .pl-gpu { display: flex; flex-direction: column; gap: 8px; } .pl-gpu__name { font-weight: 600; font-size: var(--text-sm); color: var(--fg-primary); } .pl-gpu__stats { display: flex; flex-wrap: wrap; gap: 6px; } .pl-hbar__fill--gpu { background: var(--success); } .pl-drive { display: flex; flex-direction: column; gap: 4px; } .pl-drive__head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); flex-wrap: wrap; } .pl-drive__name { font-weight: 600; color: var(--fg-primary); } .pl-drive__track { height: 10px; } /* Two-segment used/free bar (storage) — both portions always visible. */ .pl-split { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-sunken); } .pl-split--lg { height: 12px; } .pl-split__used { flex: 0 0 auto; min-width: 2px; background: var(--accent); } .pl-split__used.is-warn { background: var(--warning); } .pl-split__used.is-crit { background: var(--danger); } .pl-split__free { flex: 1 1 auto; background: color-mix(in srgb, var(--success) 45%, var(--bg-sunken)); } .pl-gpu__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pl-gpu__big { display: flex; gap: 22px; flex-wrap: wrap; } .pl-gpu__big > div { display: flex; flex-direction: column; } .pl-gpu__num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-primary); line-height: 1.15; } .pl-gpu__cap { font-size: var(--text-xs); color: var(--fg-muted); } /* "Report a problem" trigger — inline in each page's top bar (no longer floating). */ .report-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .report-btn:hover { background: var(--bg-hover); color: var(--fg-primary); border-color: var(--border-strong); } /* Pushes the button to the far right of bars that have no flex spacer of their own. */ .report-btn--push { margin-left: auto; } .report-problem-backdrop { position: fixed; inset: 0; background: rgba(14,16,22,.35); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .report-problem { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1.25rem; max-width: 28rem; width: 100%; box-shadow: var(--shadow-lg); } .report-problem h3 { margin: 0 0 0.5rem; font-size: 1rem; } /* Full-width, readable textarea (not the platform mono/auto-width default). */ .report-problem .pl-input--area { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 0; font-family: var(--font-sans); font-size: var(--text-sm); } .report-problem .pl-section__hint { margin: 0 0 4px; } /* Auth + platform (legacy login helpers) */ .login { max-width: 24rem; margin: 4rem auto; padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .login__label { font-size: var(--text-sm); color: var(--fg-secondary); } .login__input { padding: 0.5rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .login__error { color: var(--danger); font-size: var(--text-sm); } .login__hint, .login__seeds { font-size: var(--text-sm); color: var(--fg-muted); } .login__users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .login__user-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); cursor: pointer; text-align: left; } .login__user-btn:hover:not(:disabled) { background: var(--bg-hover); } .login__user-btn:disabled { opacity: 0.6; cursor: wait; } .login__user-email { font-size: var(--text-sm); font-weight: 500; } .login__user-role { font-size: var(--text-xs); color: var(--fg-muted); } .login__manual { margin-top: 1rem; font-size: var(--text-sm); color: var(--fg-secondary); } .login__manual summary { cursor: pointer; margin-bottom: 0.5rem; } .login__input--sm { padding: 0.35rem 0.5rem; font-size: var(--text-sm); } /* ============================================================================ 9 · LIBRARY WORKSPACE (Library.razor — full-viewport sidebar + tiles/list) Global (not scoped) because the markup renders icons as raw-SVG MarkupString, which CSS-isolation can't attribute. All classes are ws-* to avoid clashes. ============================================================================ */ .ws { display: flex; height: 100vh; width: 100%; overflow: hidden; background: var(--bg-app); color: var(--fg-primary); } .ws svg { flex-shrink: 0; } /* ---- sidebar ---- */ .ws-side { flex: 0 0 252px; width: 252px; box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg-surface); border-right: 1px solid var(--border-default); } .ws-side__top { padding: 14px 14px 0; } .ws-side__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; } .ws-side__edu { padding: 8px 10px; border-top: 1px solid var(--border-default); } .ws-side__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-default); } .ws-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .ws-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .ws-brand__name { font-size: 16px; font-weight: 700; color: var(--fg-primary); } .ws-search { display: flex; align-items: center; gap: 7px; height: var(--control-height-sm); padding: 0 9px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-muted); } .ws-search:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); } .ws-search__input { border: 0; outline: 0; background: transparent; flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--fg-primary); } .ws-over { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); font-weight: var(--weight-semibold); padding: 12px 8px 5px; } .ws-over--folders { padding-top: 14px; } .ws-over__toggle { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 0; } .ws-over__add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--fg-muted); cursor: pointer; } .ws-over__add:hover { background: var(--bg-hover); color: var(--fg-primary); } .ws-item { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 7px 8px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; color: var(--fg-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .ws-item svg { color: var(--fg-muted); } .ws-item:hover { background: var(--bg-hover); color: var(--fg-primary); } .ws-item.is-active { background: var(--accent-subtle); color: var(--accent-fg); } .ws-item.is-active svg { color: var(--accent); } .ws-item__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-item__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); font-variant-numeric: tabular-nums; } .ws-item.is-active .ws-item__count { color: var(--accent-fg); } /* Hover actions are absolutely positioned so revealing them never reflows the row (no "bounce"). */ .ws-item__acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 1px; opacity: 0; pointer-events: none; } .ws-item--folder:hover .ws-item__acts { opacity: 1; pointer-events: auto; } .ws-item--folder:hover .ws-item__count { opacity: 0; } .ws-fic { display: inline-flex; flex-shrink: 0; } .ws-item.is-soon { color: var(--fg-faint); cursor: default; } .ws-item.is-soon:hover { background: transparent; color: var(--fg-faint); } .ws-item.is-soon svg { color: var(--fg-faint); } .ws-soon { font-size: var(--text-3xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--fg-faint); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 1px 6px; } /* "Beta" tag on the Labeling nav group (preview feature) */ .ws-beta { font-size: var(--text-3xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--warning-fg); background: var(--warning-bg); border-radius: var(--radius-full); padding: 1px 6px; } a.ws-item { text-decoration: none; color: inherit; } .ws-folder-edit { display: flex; align-items: center; gap: 4px; padding: 3px 8px; } .ws-folder-edit__input { flex: 1 1 auto; min-width: 0; height: 24px; padding: 0 7px; font-size: var(--text-sm); border: 1px solid var(--accent); border-radius: var(--radius-sm); outline: none; box-shadow: var(--ring-focus); } .ws-folder-confirm { display: flex; align-items: center; gap: 4px; padding: 5px 8px; font-size: var(--text-xs); color: var(--fg-secondary); } .ws-folder-confirm span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-folders-empty { padding: 6px 10px; font-size: var(--text-xs); color: var(--fg-faint); } .ws-mini { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--fg-muted); cursor: pointer; text-decoration: none; } .ws-mini:hover { background: var(--bg-hover); color: var(--fg-primary); } .ws-mini--ok:hover { background: var(--accent-subtle); color: var(--accent); } .ws-mini--danger { color: var(--danger); } .ws-mini--danger:hover { background: var(--danger-bg); color: var(--danger); } .ws-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--gradient-brand); color: #fff; font-size: 11px; font-weight: 700; } .ws-foot__name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- main ---- */ .ws-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; } /* Drag-and-drop import: dropping a scan folder over the library stages files + jumps to /import. */ .ws-drop { position: absolute; inset: 8px; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-app) 72%, transparent); backdrop-filter: blur(2px); border: 2px dashed var(--border-accent); border-radius: var(--radius-md); pointer-events: none; } .ws-drop__card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; color: var(--fg-primary); } .ws-drop__ic { color: var(--accent); } .ws-drop__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); } .ws-drop__sub { font-size: var(--text-sm); color: var(--fg-muted); } .ws-bar { flex: 0 0 56px; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default); } .ws-bar__title { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .ws-bar__name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-bar__sub { font-size: var(--text-sm); color: var(--fg-muted); white-space: nowrap; } .ws-bar__spacer { flex: 1 1 auto; } .ws-select { height: var(--control-height); padding: 0 26px 0 10px; font-size: var(--text-sm); color: var(--fg-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236C7283' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; -webkit-appearance: none; appearance: none; cursor: pointer; } .ws-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); } .ws-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-sm); } .ws-seg button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--fg-muted); cursor: pointer; } .ws-seg button:hover { color: var(--fg-primary); } .ws-seg button.is-active { background: var(--bg-surface); color: var(--accent-fg); box-shadow: var(--shadow-xs); } .ws-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--control-height); padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: var(--transition-colors); } .ws-btn:hover { background: var(--bg-hover); } .ws-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .ws-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .ws-btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } .ws-btn--danger:hover { filter: brightness(0.95); } .ws-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ws-banner { display: flex; align-items: center; gap: 10px; margin: 12px 22px 0; padding: 9px 12px; background: var(--danger-bg); border: 1px solid var(--red-100); border-radius: var(--radius-sm); color: var(--danger-fg); font-size: var(--text-sm); } .ws-banner__ic { display: flex; flex-shrink: 0; color: var(--danger); } .ws-banner__msg { flex: 1 1 auto; } .ws-banner__x { display: flex; flex-shrink: 0; padding: 2px; background: none; border: 0; cursor: pointer; color: var(--fg-muted); border-radius: var(--radius-sm); } .ws-banner__x:hover { color: var(--fg-primary); background: var(--bg-hover); } .ws-fail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60vh; padding: 40px 22px; text-align: center; } .ws-fail__ic { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 12px; border-radius: var(--radius-xl); background: var(--danger-bg); border: 1px solid var(--border-subtle); color: var(--danger); } .ws-fail h3 { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); } .ws-fail p { margin: 0 0 14px; font-size: var(--text-sm); color: var(--fg-muted); max-width: 380px; } .ws-fail__actions { display: flex; gap: 8px; } .ws-fail__detail { margin-top: 16px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px 8px; } .ws-loading { display: flex; align-items: center; gap: 10px; padding: 48px 22px; color: var(--fg-muted); } .ws-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60vh; padding: 40px 22px; text-align: center; } .ws-empty__ic { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 12px; border-radius: var(--radius-xl); background: var(--gradient-violet-wash); border: 1px solid var(--border-subtle); color: var(--accent); } .ws-empty h3 { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); } .ws-empty p { margin: 0 0 14px; font-size: var(--text-sm); color: var(--fg-muted); max-width: 360px; } .ws-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ws-faint { color: var(--fg-faint); } /* ---- tiles ---- */ .ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(326px, 1fr)); gap: 18px; padding: 22px; } .ws-tile { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--elevation-card); overflow: hidden; cursor: pointer; transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .ws-tile:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); } .ws-tile--warn { border-color: var(--amber-100); } .ws-cover { position: relative; aspect-ratio: 16 / 10; background: var(--bg-canvas); overflow: hidden; } .ws-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; } .ws-cover__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #3A3F52; background: radial-gradient(120% 120% at 50% 35%, #181B26 0%, #0E1016 70%); } .ws-glass { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-full); background: rgba(8, 10, 16, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #EAECF3; font-size: 10.5px; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 600; } .ws-glass--tl { top: 9px; left: 9px; } .ws-glass--tr { top: 9px; right: 9px; text-transform: none; letter-spacing: 0; font-family: var(--font-mono); } /* Collab (phase 1): "X editing" badge — bottom-left of the tile cover (status=tl, modality=tr, kebab=br). */ .ws-glass--lock { bottom: 9px; left: 9px; max-width: calc(100% - 18px); text-transform: none; letter-spacing: 0; background: rgba(180, 83, 9, 0.86); color: #FFF7ED; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-glass--lock svg { flex-shrink: 0; } .ws-dot { width: 6px; height: 6px; border-radius: var(--radius-full); } .ws-kebab { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: rgba(8, 10, 16, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #EAECF3; cursor: pointer; opacity: 0; transition: opacity var(--duration-fast); } .ws-tile:hover .ws-kebab { opacity: 1; } .ws-tile__body { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px; } .ws-tile__title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-tile__sub { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; overflow: hidden; } .ws-meta-dot { flex-shrink: 0; width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--fg-faint); } .ws-tag { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-tag svg { color: var(--fg-faint); } .ws-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); } .ws-seg-count { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-secondary); } .ws-seg-count svg { color: var(--fg-faint); } .ws-tile__date { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-faint); min-width: 0; } .ws-tile__editor { color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Collab (phase 1): "X editing" chip in the dense list row name cell. */ .ws-row__lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-full); background: rgba(180, 83, 9, 0.14); color: #B45309; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } /* Collab (phase 1): editor read-only banner — "X is editing this case". Solid dark-amber bar with light text + a bright white name, so it reads clearly over the dark editor chrome. */ .collab-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; background: #7C2D12; color: #FDE9C8; font-size: var(--text-sm); font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.25); } .collab-banner__ic { flex-shrink: 0; color: #FBBF24; } .collab-banner__msg { flex: 1; } .collab-banner strong { color: #FFFFFF; font-weight: 700; } .collab-banner--free { background: #14532D; color: #DCFCE7; } /* Editor's live-broadcast banner. */ .collab-banner--live { background: #0B3B5E; color: #D6ECFF; } .collab-banner--live strong { color: #FFFFFF; } .collab-banner__live { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: collab-pulse 1.6s ease-out infinite; } @keyframes collab-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .collab-banner--free .collab-banner__ic { color: #4ADE80; } .collab-banner__x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 13px; opacity: 0.75; padding: 0 4px; } .collab-banner__x:hover { opacity: 1; } /* Phase 3: handoff / request controls inside banners. */ .collab-banner--req { background: #3B2E0B; color: #FDE9C8; } .collab-banner--req strong { color: #FFFFFF; } .collab-watcher { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; } .collab-banner__btn { border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.10); color: inherit; cursor: pointer; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: var(--radius-full); } .collab-banner__btn:hover:not(:disabled) { background: rgba(255,255,255,0.22); } .collab-banner__btn:disabled { opacity: 0.55; cursor: default; } .collab-banner__btn--ok { background: #16A34A; border-color: #16A34A; color: #FFFFFF; } .collab-banner__btn--ok:hover:not(:disabled) { background: #15803D; } .collab-banner__note { margin-left: 8px; opacity: 0.85; font-style: italic; } /* ---- list ---- */ .ws-table { padding: 0 22px 22px; } .ws-thead { position: sticky; top: 0; z-index: 1; display: grid; align-items: center; height: 38px; gap: 12px; grid-template-columns: 64px minmax(0, 2fr) 116px 104px 96px minmax(0, 1.4fr) 138px; background: var(--bg-app); border-bottom: 1px solid var(--border-default); } .ws-th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); font-weight: var(--weight-semibold); } .ws-th--num { text-align: right; } .ws-th--sort { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; user-select: none; } .ws-th--num.ws-th--sort { justify-content: flex-end; } .ws-th--sort:hover { color: var(--fg-primary); } .ws-row { position: relative; display: grid; align-items: center; height: 60px; gap: 12px; grid-template-columns: 64px minmax(0, 2fr) 116px 104px 96px minmax(0, 1.4fr) 138px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--duration-fast); } .ws-row:hover { background: var(--bg-hover); } .ws-row__thumb { width: 52px; height: 40px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-canvas); } .ws-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ws-row__thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #3A3F52; } .ws-row__name { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ws-row__name b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-row__name span { font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-row__cell { min-width: 0; font-size: var(--text-xs); color: var(--fg-secondary); } .ws-row__cell .ws-tag svg { color: var(--fg-faint); } .ws-row__num { text-align: right; font-size: var(--text-sm); color: var(--fg-secondary); } .ws-row__date { font-size: var(--text-xs); color: var(--fg-faint); } .ws-row__editor { display: block; color: var(--fg-secondary); } .ws-kebab--row { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--fg-muted); opacity: 0; } .ws-row:hover .ws-kebab--row { opacity: 1; } .ws-kebab--row:hover { background: var(--bg-active); color: var(--fg-primary); } .ws-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .ws-badge--draft { background: var(--bg-active); color: var(--fg-secondary); } .ws-badge--inprogress { background: var(--info-bg); color: var(--info-fg); } .ws-badge--validated { background: var(--success-bg); color: var(--success-fg); } /* ---- case kebab menu ---- */ .ws-menu { position: absolute; z-index: var(--z-dropdown); right: 8px; top: calc(100% - 4px); min-width: 150px; display: flex; flex-direction: column; padding: 4px; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--elevation-menu); } .ws-cover .ws-menu { top: auto; bottom: 40px; } .ws-menu__item { display: flex; align-items: center; padding: 7px 10px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: var(--text-sm); color: var(--fg-primary); border-radius: var(--radius-sm); } .ws-menu__item:hover { background: var(--bg-hover); } .ws-menu__item--danger { color: var(--danger); } .ws-menu__item--danger:hover { background: var(--danger-bg); } /* ---- modals ---- */ .ws-scrim { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: center; justify-content: center; background: var(--scrim); padding: 20px; } .ws-modal { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--bg-raised); border-radius: var(--radius-lg); box-shadow: var(--elevation-dialog); } .ws-modal__head { font-size: var(--text-h3); font-weight: var(--weight-semibold); } .ws-modal__text { margin: 0; font-size: var(--text-sm); color: var(--fg-secondary); } .ws-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--fg-muted); } .ws-input { height: var(--control-height); padding: 0 10px; font-size: var(--text-sm); color: var(--fg-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); } .ws-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); } .ws-modal__acts { display: flex; gap: 8px; margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .ws-tile, .ws-item, .ws-btn, .ws-kebab { transition: none; } .ws-tile:hover { transform: none; } }