/* ============================================================================ 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"); /* --------------------------------------------------------------------------- 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); } 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); } .btn-danger { background-color: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background-color: var(--red-600); border-color: var(--red-600); } .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) =========================================================================== */ .editor { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; height: 100vh; box-sizing: border-box; overflow: hidden; background: var(--bg-app); } .editor__toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex: 0 0 auto; } .editor__window { display: flex; gap: 1rem; align-items: center; } .editor__window label { display: flex; flex-direction: column; font-size: var(--text-xs); flex: 1 1 0; color: var(--fg-secondary); } .editor__window input[type=range] { width: 100%; accent-color: var(--accent); } .editor__viewsettings { margin-top: auto; 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); } .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; } .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-view__slider { width: 100%; flex: 0 0 auto; accent-color: var(--violet-400); } .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 { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; padding: 0.25rem; } .ev-cell .slice-view__header, .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; } .ev-fs { pointer-events: auto; background: none; border: none; color: var(--fg-on-canvas); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 0.2rem; opacity: 0.75; } .ev-fs:hover { opacity: 1; } /* 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: auto; } .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--dims { color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-2xs); } .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__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: auto; min-height: 0; } .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__tools { display: flex; flex-wrap: wrap; gap: 0.25rem; } .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: 2.2rem; height: 2.2rem; padding: 0; } .segpanel__icon { width: 18px; height: 18px; } .segpanel__hint { color: var(--fg-muted); font-size: var(--text-xs); } .segpanel__seg-head { display: flex; justify-content: space-between; align-items: center; font-weight: var(--weight-semibold); } .segpanel__seg { 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: 2rem; } .segpanel__seg:hover { background: var(--bg-hover); } .segpanel__seg.is-active { background: var(--bg-selected); box-shadow: var(--ring-selected); } .segpanel__seg.is-hidden { opacity: 0.6; } .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: hidden until the row is hovered/active/editing to keep the list calm. */ .segpanel__seg-actions { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; flex: 0 0 auto; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); } .segpanel__seg:hover .segpanel__seg-actions, .segpanel__seg.is-active .segpanel__seg-actions { opacity: 1; } .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); } /* 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); } } .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; } .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__stats { 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 { display: flex; justify-content: space-between; align-items: center; font-weight: var(--weight-semibold); } .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__select { width: 100%; padding: 0.15rem; font-size: var(--text-xs); } .segpanel__export-row { display: flex; gap: 0.4rem; align-items: center; } .segpanel__statlist { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; } .segpanel__statlist > div { display: flex; justify-content: space-between; gap: 0.5rem; } .segpanel__statlist dt { color: var(--fg-muted); margin: 0; } .segpanel__statlist dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .segpanel__stat-empty { color: var(--fg-muted); font-size: var(--text-xs); } .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); } .segpanel__oblique { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); } .segpanel__oblique label:not(.segpanel__check) { display: flex; flex-direction: column; font-size: var(--text-xs); } .segpanel__oblique input[type=range] { width: 100%; accent-color: var(--accent); } .editor__shelf { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--fg-secondary); font-size: var(--text-xs); padding: 0 0.25rem; align-self: flex-end; } .editor__shelf:hover { color: var(--fg-primary); } .editor__wlpresets { display: flex; flex-wrap: wrap; gap: 0.25rem; } .editor__oblique { display: flex; flex-direction: column; gap: 0.3rem; } .editor__oblique label { display: flex; flex-direction: column; font-size: var(--text-xs); } .editor__oblique input[type=range] { width: 100%; accent-color: var(--accent); } .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; } .editor__autosave { color: var(--fg-muted); font-size: var(--text-xs); margin-left: 0.5rem; } .editor__case { display: flex; align-items: center; gap: 0.3rem; } .editor__case--staging { gap: 0.5rem; } .editor__case-name { font-weight: var(--weight-semibold); } .editor__edit { padding: 0 0.25rem; line-height: 1; } .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); } } .btn-success { color: #fff; background-color: var(--success); border-color: transparent; } .btn-success:hover:not(:disabled), .btn-success:focus:not(:disabled) { background-color: var(--mint-700); color: #fff; } .editor__validate-btn, .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; } .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(--slate-100); color: var(--slate-600); } .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(--slate-150); 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__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; } /* Auth + platform */ .app-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); } .app-header__user { font-size: var(--text-sm); color: var(--fg-secondary); margin-right: auto; } .app-header__link { font-size: var(--text-sm); } .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; } .platform { padding: 1rem 1.5rem; max-width: 48rem; } .platform section { margin-bottom: 2rem; }