for keyboard / middle-click navigation.
Kill the default accent colour on the link itself — the kind badge
carries the "what is this" signal now, and the row's text should sit
as body copy, not as a wall of blue. The hover background keeps the
row feeling clickable. */
.source-viewer__refs-item a {
text-decoration: none;
display: block;
padding: 6px 8px;
border-radius: var(--r);
color: var(--ink);
}
.source-viewer__refs-item a:hover {
background: var(--surface-sunken);
}
.source-viewer__refs-item a:hover .source-viewer__refs-name {
text-decoration: underline;
}
/* Refs groups borrow the outline-section chevron + heading styles for
collapsibility. The vertical rhythm between groups matches the
outline panel so the two read as a paired pattern. */
.source-viewer__refs-group + .source-viewer__refs-group {
margin-top: 8px;
}
.source-viewer__refs-group:not(.is-open) .source-viewer__refs-list {
display: none;
}
/* Member sub-row: indented under the object-row so the visual hierarchy
reads object → member → call-site snippet. Badge keeps the row in sync
with the outline pane's chip vocabulary (proc / local / trigger / …). */
.source-viewer__refs-member-row {
display: flex;
gap: 6px;
align-items: baseline;
margin-top: 3px;
margin-left: 4px;
min-width: 0;
}
.source-viewer__refs-member-name {
font-family: var(--mono);
font-size: 12.5px;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
}
/* Outline right-click menu — one-item popover for Find references on a
procedure / field / trigger / object row. Positioned by JS at the
click point. */
.source-viewer__outline-menu {
position: fixed;
z-index: 100;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r);
box-shadow: 0 4px 12px var(--shadow-color, rgba(0, 0, 0, 0.4));
padding: 4px 0;
min-width: 180px;
}
.source-viewer__outline-menu-item {
display: block;
width: 100%;
padding: 6px 12px;
background: transparent;
border: 0;
color: var(--ink);
font: inherit;
font-size: 12.5px;
text-align: left;
cursor: pointer;
}
.source-viewer__outline-menu-item:hover {
background: var(--surface-2, rgba(124, 124, 144, 0.12));
}
/* Object-row: badge + name on the left, module/line meta pinned right.
Tabular row layout means the eye scans the badge column first, then the
name, then drifts right for the location — same rhythm as the outline. */
.source-viewer__refs-row-top {
display: flex;
gap: 6px;
align-items: baseline;
}
.source-viewer__refs-line {
flex: 0 0 auto;
font-size: 11px;
font-family: var(--mono, "SFMono-Regular", Consolas, monospace);
}
.source-viewer__refs-snippet {
display: block;
margin-top: 4px;
margin-left: 4px;
font-family: var(--mono, "SFMono-Regular", Consolas, monospace);
font-size: 12px;
color: var(--ink-3);
background: var(--surface-2);
padding: 3px 8px;
border-left: 2px solid var(--border-strong);
border-radius: 0 3px 3px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-viewer__refs-item.is-current a {
background: var(--blue-50, rgba(99, 102, 241, 0.15));
font-weight: 500;
}
.source-viewer__refs-name {
font-family: var(--mono, "SFMono-Regular", Consolas, monospace);
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
}
/* Hover-only tooltip for a refs row. Stays out of the document flow —
appended to by source-viewer.js so the row can stay visually
tight while the extension / file path / kind details surface on
demand. */
.source-viewer__refs-tooltip {
position: absolute;
z-index: 200;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r);
box-shadow: 0 6px 18px var(--shadow-color);
padding: 8px 10px;
font-size: 12px;
line-height: 1.45;
color: var(--ink);
pointer-events: none;
}
.source-viewer__refs-tooltip[hidden] {
display: none;
}
.source-viewer__refs-tooltip-where {
font-weight: 600;
margin-bottom: 2px;
}
.source-viewer__refs-tooltip-loc {
font-family: var(--mono);
font-size: 11.5px;
color: var(--ink-3);
word-break: break-all;
}
.source-viewer__refs-tooltip-member {
margin-top: 6px;
font-family: var(--mono);
font-size: 11.5px;
}
.source-viewer__refs-tooltip-kind {
margin-top: 6px;
font-size: 11px;
}
.source-viewer__body {
padding: 0;
margin: 0;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r);
overflow-x: auto;
max-height: calc(100vh - 220px);
overflow-y: auto;
}
.source-viewer__body > code {
display: block;
font-family: var(--mono, "SFMono-Regular", Consolas, monospace);
font-size: 12.5px;
line-height: 1.5;
}
.source-viewer__line {
display: grid;
grid-template-columns: 4rem 1fr;
gap: 12px;
padding: 0 12px;
white-space: pre;
}
.source-viewer__line:hover {
background: rgba(124, 124, 144, 0.08);
}
.source-viewer__line--hit {
background: rgba(255, 213, 79, 0.14);
border-left: 3px solid var(--blue, #ffd54f);
padding-left: 9px;
}
.source-viewer__lineno {
text-align: right;
color: var(--text-2, #b0b0c2);
user-select: none;
}
.source-viewer__text {
white-space: pre;
}
.object-explorer-upload .field__label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-2, #b0b0c2);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.object-explorer-upload .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* The default `display: none` on `[hidden]` would normally hide this
panel, but specifying `display: flex` unconditionally would beat
that. Scope the flex layout to the visible state instead so the
`hidden` attribute keeps working as a plain on/off toggle. */
.upload-progress:not([hidden]) {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
padding: 12px 16px;
background: var(--surface-2, rgba(124, 124, 144, 0.08));
border: 1px solid var(--border, #2a2a35);
border-radius: 6px;
}
.upload-progress p {
margin: 0;
}
.upload-progress__spinner {
width: 18px;
height: 18px;
border: 2px solid var(--border, #2a2a35);
border-top-color: var(--text-1, #d8d8e0);
border-radius: 50%;
animation: upload-spin 0.8s linear infinite;
flex-shrink: 0;
}
@keyframes upload-spin {
to { transform: rotate(360deg); }
}
/* When the upload is in flight: visually lock down the form so the user
knows input is captured and that re-clicking is a no-op. Pointer
events are blocked on the inputs section (everything inside
.form-section), while the progress panel and its parent form-actions
stay interactive enough to read but not re-submit. The submit
button itself carries .btn--loading + the disabled attribute. */
.object-explorer-upload.is-uploading .form-section {
opacity: 0.55;
pointer-events: none;
user-select: none;
}
/* Disabled buttons get a visual cue too — the .btn class doesn't have a
:disabled rule anywhere else and the browser default barely dims it,
so the user thinks the click didn't take. Applies globally; nothing
else relies on disabled buttons looking active. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
/* Diff line decorations applied by CodeMirror's Decoration.line(). Selectors
live in the global stylesheet (not the scoped CodeDiffViewer.razor.css)
because CodeMirror renders .cm-line outside the Blazor component's scope-id
wrapper, so ::deep can't reach it. */
.cm-line--diff-added { background: rgba(46, 160, 67, 0.18); }
.cm-line--diff-removed { background: rgba(248, 81, 73, 0.18); }
.cm-line--diff-modified { background: rgba(210, 153, 34, 0.18); }
/* Click affordances on Object Explorer tokens.
- cm-symbol-decl (procedure / field / object-header *declarations*):
solid underline at half opacity. The name is "the source" — hover
keeps the same line but brightens for an explicit "yes, this is
clickable" signal.
- cm-symbol-ref (call / field-access *reference sites*): dotted
underline. Reads as a hyperlink — the user expects to follow it
somewhere. Hover brightens to mirror the link affordance.
Both get cursor: pointer so the hand confirms interactivity before
the user even needs the underline to read. */
.cm-symbol-decl,
.cm-symbol-ref {
cursor: pointer;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
text-underline-offset: 3px;
transition: text-decoration-color 80ms ease-out;
}
.cm-symbol-decl {
text-decoration: underline solid currentColor;
}
.cm-symbol-ref {
text-decoration: underline dotted currentColor;
}
.cm-symbol-decl:hover,
.cm-symbol-ref:hover {
text-decoration-color: currentColor;
}
/* When the user holds Cmd/Ctrl over the editor, hint that identifier-
shaped tokens are clickable for "Go to definition". We can't pre-
resolve which tokens have a target without running a parser, so this is
an honest "anything could be navigable" affordance — the click itself
does the resolution. The selectors hit CodeMirror's syntax-highlight
tok-* classes plus our declaration marks. */
.cm-modifier-down,
.cm-modifier-down .cm-line {
cursor: pointer;
}
.cm-modifier-down .tok-variableName,
.cm-modifier-down .tok-typeName,
.cm-modifier-down .tok-propertyName,
.cm-modifier-down .tok-className,
.cm-modifier-down .tok-keyword,
.cm-modifier-down .cm-symbol-decl,
.cm-modifier-down .cm-symbol-ref {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: currentColor;
text-underline-offset: 2px;
}
.cm-symbol-menu {
position: fixed;
z-index: 1000;
background: var(--surface-1, #1a1c22);
border: 1px solid var(--border, #2a2a35);
border-radius: 6px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
padding: 4px;
min-width: 160px;
font-size: 13px;
}
.cm-symbol-menu__item {
appearance: none;
background: transparent;
border: 0;
width: 100%;
text-align: left;
padding: 6px 10px;
border-radius: 4px;
color: var(--text-1, #d8d8e0);
cursor: pointer;
font: inherit;
}
.cm-symbol-menu__item:hover:not(.cm-symbol-menu__item--disabled) {
background: var(--surface-hover, rgba(124, 124, 144, 0.16));
}
.cm-symbol-menu__item--disabled {
color: var(--text-muted, rgba(216, 216, 224, 0.45));
cursor: not-allowed;
}
/* CodeMirror @codemirror/search panel (Ctrl/Cmd-F). The default
styling renders bare inputs/buttons; bring them in line with the
app's button + input look. */
.cm-panels.cm-panels-top {
border-bottom: 1px solid var(--border-strong);
background: var(--surface);
}
/* Bottom-docked status bar (built by buildStatusBarExtension in
code-editor.js). Sits below cm-scroller and inherits theme colours
from the editor's container. Left/right split mirrors VS Code's
layout — cursor position on the left, document totals on the right. */
.cm-panels.cm-panels-bottom {
border-top: 1px solid var(--border-strong);
background: var(--surface);
}
.cm-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 3px 10px;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
color: var(--ink-3);
font-family: var(--mono);
}
.cm-status-bar__left,
.cm-status-bar__right {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cm-search.cm-panel {
padding: 8px 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
background: var(--surface);
color: var(--ink);
font-family: inherit;
}
.cm-search .cm-textfield {
font-family: inherit;
font-size: 13px;
padding: 4px 8px;
color: var(--ink);
background: var(--surface-2, var(--bg));
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm, 4px);
outline: none;
}
.cm-search .cm-textfield:focus {
border-color: var(--blue);
}
.cm-search .cm-button {
font-family: inherit;
font-size: 12.5px;
padding: 4px 10px;
color: var(--ink);
background: transparent;
background-image: none;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
}
.cm-search .cm-button:hover {
background: var(--surface-2, rgba(124, 124, 144, 0.12));
}
.cm-search label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
color: var(--ink-3);
cursor: pointer;
}
.cm-search label input[type="checkbox"] {
accent-color: var(--blue);
margin: 0;
}
.cm-panel button[name="close"] {
margin-left: auto;
padding: 0 8px;
font-size: 16px;
line-height: 1;
color: var(--ink-3);
background: transparent;
border: 0;
cursor: pointer;
}
.cm-panel button[name="close"]:hover {
color: var(--ink);
}
/* Sticky highlight on the line the user navigated to via a deep link
or a References-panel click. Backing colour comes from
--blue-50 so it tracks the active theme. The actual
line.background rule lives in CM6's baseTheme (currentLineTheme in
code-editor.js) so it survives CodeMirror's row virtualisation. */
/* File viewer layout: code editor + right-rail inspector panel. The
editor fills the remaining width and grows to its content height —
long files extend the page rather than scrolling internally. The
panel stays in view via `position: sticky` so the outline / refs
are always one glance away. Stacks vertically on narrow viewports. */
.object-explorer__file-layout {
display: flex;
gap: 16px;
align-items: flex-start;
}
.object-explorer__file-layout > .code-viewer-host {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 1100px) {
.object-explorer__file-layout {
flex-direction: column;
}
}
.inspector-panel {
/* Scale with viewport — narrow browser still gets the minimum, wide
monitors get more room for reference snippets. */
flex: 0 0 clamp(280px, 28vw, 520px);
display: flex;
flex-direction: column;
/* Sticky-follow on scroll. The nearest scrolling ancestor is
.content (`overflow-y: auto`), so the panel pins to the top of
the work column once it would otherwise scroll out of view.
max-height caps it to the viewport so long outlines get their
own internal scrollbar instead of overflowing the screen. */
position: sticky;
top: 16px;
max-height: calc(100vh - var(--top-h) - 32px);
border: 1px solid var(--border, #2a2a35);
border-radius: 6px;
background: var(--surface-1, #1a1c22);
overflow: hidden;
font-size: 13px;
}
@media (max-width: 1100px) {
/* In the stacked layout sticky would pin the panel to the top of
the column, hiding the editor as the user scrolls — unhelpful.
Drop back to its natural flow position. */
.inspector-panel {
position: static;
max-height: 60vh;
}
}
.inspector-panel__crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 8px 10px;
border-bottom: 1px solid var(--border, #2a2a35);
background: var(--surface-2, rgba(124, 124, 144, 0.08));
font-size: 12.5px;
}
.inspector-panel__crumb {
appearance: none;
background: transparent;
border: 0;
padding: 2px 6px;
border-radius: 4px;
color: inherit;
font: inherit;
cursor: default;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inspector-panel__crumb--link {
color: var(--text-2, #b0b0c2);
cursor: pointer;
}
.inspector-panel__crumb--link:hover {
background: var(--surface-hover, rgba(124, 124, 144, 0.16));
color: var(--text-1, #d8d8e0);
}
.inspector-panel__crumb--current {
color: var(--text-1, #d8d8e0);
font-weight: 600;
}
.inspector-panel__crumb-sep {
color: var(--text-3, #6b6b80);
}
.inspector-panel__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 10px 12px;
}
.inspector-panel__empty {
margin: 12px 4px;
}
.inspector-panel__filter {
margin-bottom: 8px;
}
.inspector-panel__filter-input {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--border, #2a2a35);
border-radius: 4px;
background: var(--surface-2, rgba(124, 124, 144, 0.08));
color: var(--text-1, #d8d8e0);
font: inherit;
font-size: 12.5px;
}
.inspector-panel__filter-input::placeholder {
color: var(--text-3, #6b6b80);
}
.inspector-panel__sections,
.inspector-panel__items,
.inspector-panel__refs-files,
.inspector-panel__refs-hits {
list-style: none;
margin: 0;
padding: 0;
}
.inspector-panel__section + .inspector-panel__section {
margin-top: 12px;
}
.inspector-panel__section-title {
margin: 0 0 4px 0;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-2, #b0b0c2);
display: flex;
gap: 6px;
align-items: baseline;
}
/* Collapsible section header — same typography as the static title, plus
a leading chevron and a button cursor so it's discoverable. The chevron
itself is a vendored Lucide icon, so no rotation animation; we swap
chevron-right / chevron-down between collapsed and expanded states. */
.inspector-panel__section-toggle {
appearance: none;
background: transparent;
border: 0;
padding: 4px 0;
margin: 0 0 4px 0;
width: 100%;
font: inherit;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-2, #b0b0c2);
display: flex;
gap: 6px;
align-items: center;
cursor: pointer;
text-align: left;
}
.inspector-panel__section-toggle:hover {
color: var(--text-1, #d8d8e0);
}
.inspector-panel__section-title-text {
flex: 0 0 auto;
}
/* Full-viewport invisible backdrop used to dismiss the outline row's
right-click menu on outside-click. Sits below the menu (z-index 999
vs the menu's 1000). Pointer-events: auto so the click is caught. */
.cm-symbol-menu-backdrop {
position: fixed;
inset: 0;
z-index: 999;
background: transparent;
}
.inspector-panel__item {
display: flex;
align-items: center;
gap: 2px;
border-radius: 4px;
}
.inspector-panel__item:hover {
background: var(--surface-hover, rgba(124, 124, 144, 0.10));
}
.inspector-panel__item-link {
flex: 1 1 auto;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 4px 6px;
color: inherit;
text-decoration: none;
font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: 12.5px;
min-width: 0;
}
/* Override the global `a:hover { text-decoration: underline }` — the row
already changes background on hover, the redundant underline reads as
noise. */
.inspector-panel__item-link:hover {
text-decoration: none;
}
.inspector-panel__item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 0 1 auto;
min-width: 0;
}
/* Field type / procedure signature, rendered between the name and the
line-number badge. Truncated with ellipsis so a 200-character method
signature doesn't push the line off-row; full text is on the title
attribute so hovering reveals it. */
.inspector-panel__item-sig {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
}
.inspector-panel__item-line {
flex-shrink: 0;
}
.inspector-panel__item-action {
appearance: none;
background: transparent;
border: 0;
padding: 4px 6px;
border-radius: 4px;
color: var(--text-3, #6b6b80);
cursor: pointer;
/* Only reveal the find-references button while the row is hovered or
the button itself is focused — keeps the row visually quiet at rest. */
opacity: 0;
transition: opacity 80ms ease-out;
}
.inspector-panel__item:hover .inspector-panel__item-action,
.inspector-panel__item-action:focus {
opacity: 1;
}
.inspector-panel__item-action:hover {
background: var(--surface-hover, rgba(124, 124, 144, 0.16));
color: var(--text-1, #d8d8e0);
}
.inspector-panel__refs-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
margin: 4px 0 12px 0;
}
.inspector-panel__refs-section + .inspector-panel__refs-section {
margin-top: 14px;
}
.inspector-panel__refs-file {
border: 1px solid var(--border, #2a2a35);
border-radius: 4px;
overflow: hidden;
margin-top: 8px;
}
.inspector-panel__refs-file-header {
display: flex;
align-items: baseline;
gap: 6px;
padding: 4px 8px;
background: var(--surface-2, rgba(124, 124, 144, 0.08));
font-size: 12px;
}
.inspector-panel__refs-hit {
display: grid;
grid-template-columns: 40px 1fr;
gap: 8px;
padding: 4px 8px;
border-top: 1px solid var(--border, #2a2a35);
text-decoration: none;
color: inherit;
font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: 12px;
}
.inspector-panel__refs-hit:hover {
background: var(--surface-hover, rgba(124, 124, 144, 0.10));
/* Suppress the global `a:hover` underline — background change is enough. */
text-decoration: none;
}
.inspector-panel__refs-hit-line {
color: var(--text-3, #6b6b80);
text-align: right;
}
.inspector-panel__refs-hit-snippet {
color: var(--text-1, #d8d8e0);
white-space: pre;
overflow-x: auto;
}
/* ---------- References page ---------- */
.object-explorer__references .references__section {
margin-top: 24px;
}
.references__section h2 {
font-size: 15px;
margin: 0 0 12px 0;
}
.references__toggle {
appearance: none;
background: transparent;
border: 0;
padding: 0;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
font-size: 15px;
font-weight: 600;
}
.references__possibly-related-explainer {
margin: 4px 0 12px 22px;
}
.references__file {
border: 1px solid var(--border, #2a2a35);
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
}
.references__file-header {
padding: 8px 12px;
background: var(--surface-2, rgba(124, 124, 144, 0.08));
display: flex;
align-items: baseline;
gap: 8px;
}
.references__hits {
list-style: none;
margin: 0;
padding: 0;
}
.references__hit {
border-top: 1px solid var(--border, #2a2a35);
}
.references__hit-link {
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
padding: 6px 12px;
text-decoration: none;
color: inherit;
font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: 12.5px;
}
.references__hit-link:hover {
background: var(--surface-hover, rgba(124, 124, 144, 0.12));
}
.references__hit-line {
color: var(--text-3, #6b6b80);
text-align: right;
user-select: none;
}
.references__hit-snippet {
color: var(--text-1, #d8d8e0);
white-space: pre;
overflow-x: auto;
}
/* Account security & admin user-create additions (M-AccountSecurity) */
.invite-link-box {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r);
font-family: var(--mono);
font-size: 12.5px;
overflow-x: auto;
}
.invite-link-box code {
white-space: nowrap;
flex: 1;
}
.inline-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.inline-checkbox input {
width: auto;
}
.email-change-row td {
background: var(--bg);
padding: 12px 16px;
}
/* ---------- Release & file compare ---------- */
/* Side-by-side diff viewer (/object-explorer/compare/file): two CodeMirror
panes laid out as a 2-column grid. Each pane is a full `.source-viewer`
shell minus the outline DOM, so the existing CodeMirror styling carries
through unchanged. Below 1100px we stack vertically.
Line-level diff colouring uses CodeMirror's line decoration mechanism
(see code-editor.js → buildLineDecorationExtensions). Lines flagged
inserted/deleted/modified get a full-row tint; imaginary rows pad the
shorter side so both panes line up visually.
Colours pulled from the existing theme palette to stay dark-mode safe.
*/
/* Page shell: mirror the normal source-viewer's pattern — flex column
that fills .content's grid-row height, so the panes can take the
remaining space below the header without a hard-coded calc(). */
.oe-compare-file {
padding: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.oe-compare-file__header {
flex: 0 0 auto;
align-items: flex-start;
gap: 16px;
}
/* Override the 72ch prose cap inherited from `.admin-page__header p`
(admin.css) so the full "Release · Module · Path" labels show instead of
wrapping early. The extra ancestor class wins the specificity tie against
admin.css, which loads after tools.css. */
.oe-compare-file__header .oe-compare-file__breadcrumbs p {
margin: 0 0 4px;
max-width: none;
}
.oe-compare-file__panes {
/* Fills the rest of .oe-compare-file. grid-template-rows: 1fr is what
lets the inner .source-viewer { height: 100% } resolve correctly —
without it, the row would be auto-sized and the cm-editor would
collapse to zero height. */
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 12px;
margin-top: 12px;
}
.oe-compare-file__panes > .source-viewer--compare {
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--surface);
/* Row so the editor and the KDiff3-style overview ruler sit side by side
(the base .source-viewer is a column). */
flex-direction: row;
/* min-height: 0 keeps the grid item from forcing the cm-scroller's
intrinsic content height up the cascade — without it, long files
blow the viewport on browsers that compute grid items' min size
as min-content. */
min-height: 0;
}
@media (max-width: 1100px) {
.oe-compare-file__panes {
grid-template-columns: 1fr;
/* Stack vertically and give each pane half the available space. */
grid-template-rows: 1fr 1fr;
}
}
/* Diff line tints — applied to rows. The colour
variables fall back to the named lights so each pane reads the same in
light and dark themes. */
.cm-line.cm-diff-inserted { background-color: rgba(38, 176, 80, 0.16); }
.cm-line.cm-diff-deleted { background-color: rgba(179, 33, 33, 0.18); }
.cm-line.cm-diff-modified { background-color: rgba(234, 179, 8, 0.20); }
.cm-line.cm-diff-imaginary { background-color: var(--surface-sunken); color: var(--ink-3); }
/* Alignment filler — a blank block widget (built in code-editor.js's
buildFillerDecorationExtensions) that pads the shorter compare pane so
matching lines stay aligned KDiff3-style. A faint diagonal hatch over the
muted surface reads as "no content here" without drawing the eye like real
code, with hairline borders marking where the gap opens and closes. */
.cm-diff-filler {
background-color: var(--surface-sunken);
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 5px,
var(--border) 5px,
var(--border) 6px);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
opacity: 0.6;
}
/* Diff change-bar gutter — a thin column (built in code-editor.js's
buildDiffGutterExtensions) that paints one coloured cell per changed line so
the run of changes is visible at a glance. Colours mirror the line tints but
fully opaque to read as a solid bar. */
.cm-diff-gutter { width: 4px; }
.cm-diff-gutter .cm-gutterElement { padding: 0; }
.cm-diff-gutter-mark { width: 4px; }
.cm-diff-gutter-inserted { background-color: rgb(38, 176, 80); }
.cm-diff-gutter-deleted { background-color: rgb(179, 33, 33); }
.cm-diff-gutter-modified { background-color: rgb(234, 179, 8); }
/* KDiff3-style overview ruler (compare panes, built in source-viewer.js's
buildDiffOverview). A thin full-height strip on the right edge of each pane
that maps every changed line in the WHOLE file to a coloured mark, so the
spread of changes is visible without scrolling. Each mark is a button that
jumps the editor to that change. */
.oe-diff-overview {
position: relative;
flex: 0 0 14px;
align-self: stretch;
background: var(--surface-sunken);
border-left: 1px solid var(--border);
}
.oe-diff-overview__mark {
position: absolute;
left: 2px;
right: 2px;
padding: 0;
border: 0;
border-radius: 1px;
min-height: 3px;
cursor: pointer;
opacity: 0.85;
}
.oe-diff-overview__mark:hover {
left: 0;
right: 0;
opacity: 1;
outline: 1px solid var(--ink-3);
}
.oe-diff-overview__mark--inserted { background-color: rgb(38, 176, 80); }
.oe-diff-overview__mark--deleted { background-color: rgb(179, 33, 33); }
.oe-diff-overview__mark--modified { background-color: rgb(234, 179, 8); }
.oe-diff-overview__mark--imaginary { background-color: var(--border); }
/* Change summary line in the compare header. */
.oe-compare-file__summary { margin: 6px 0 0; font-weight: 500; }
/* Compare-with-release picker on the single-file viewer header.
Sits stacked under the Download button on the right edge. The
picker collapses to one row inside its container (the field label
stays above the select for accessibility, but no min-width pushes
it wider than the outline column). */
.source-viewer__compare-picker {
display: flex;
align-items: stretch;
width: 100%;
}
.source-viewer__compare-picker .field {
width: 100%;
min-width: 0;
}
/* Header actions wrapper — sits to the right of the breadcrumb and
stacks the Download button + Compare-with-release picker
vertically. The column width tracks the outline panel's width so
the two controls always read as a visual pair with the outline
below them (rather than the picker stretching wider than its
own outline column did). */
.source-viewer__header-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
margin-left: auto;
width: var(--source-viewer-outline-width, 340px);
max-width: 100%;
}
.source-viewer__header-actions > .btn {
width: 100%;
justify-content: center;
text-align: center;
}
.source-viewer__header-actions .field__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
}
/* Status-row badges in the Compare-with-release results table. Reuse the
same flat-pill shape as the existing kind badges but with semantic colour. */
.badge--success { background-color: rgba(38, 176, 80, 0.18); color: var(--good); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.badge--danger { background-color: rgba(179, 33, 33, 0.18); color: var(--danger); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.badge--warning { background-color: rgba(234, 179, 8, 0.20); color: #8a6d00; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
@media (prefers-color-scheme: dark) {
.badge--warning { color: #ffd05a; }
}
/* ---- split-button + dropdown row actions (.ra) ----
Shared globally (rather than scoped to RowActionsMenu) so any results row or
factbox list can mount the same split button — the Object Explorer source rows
and the customer-build history both use it. Behaviour (one-open-at-a-time,
close-on-outside-click / scroll / Escape) is wired for every details.ra__menu
by wwwroot/row-actions-menu.js. Values from the Object Explorer design study
(.design/translator/styles/screens.css). The popup is positioned absolutely
under the caret; keep the surrounding table/list wrapper overflow visible so
it isn't clipped. */
/* stretch so the caret (a inside a ) matches the height of
the primary button rather than sizing to its own short content */
.ra { display: inline-flex; align-items: stretch; }
.ra__main,
.ra__caret {
border: 1px solid var(--border-input);
background: var(--surface);
color: var(--ink-2);
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: background 0.12s, color 0.12s, border-color 0.12s;
text-decoration: none;
}
.ra__main { padding: 7px 12px; border-radius: var(--r) 0 0 var(--r); }
.ra__main:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.ra__main:hover svg { color: var(--blue); }
.ra__main svg { color: var(--ink-4); flex: 0 0 auto; }
/* Caret is the of the menu's ; strip the native marker. */
.ra__caret {
padding: 7px 8px;
border-left: 0;
border-radius: 0 var(--r) var(--r) 0;
list-style: none;
}
.ra__caret::-webkit-details-marker { display: none; }
.ra__caret::marker { content: ""; }
.ra__caret svg { color: var(--ink-4); transition: transform 0.15s; }
.ra__caret:hover { background: var(--surface-sunken); color: var(--ink); }
.ra__caret:hover svg { color: var(--blue); }
.ra__menu { position: relative; display: inline-flex; }
.ra__menu[open] > .ra__caret { background: var(--blue-50); border-color: var(--blue); color: var(--blue-700); }
.ra__menu[open] > .ra__caret svg { color: var(--blue); transform: rotate(180deg); }
/* Solo trigger: a single square icon button (kebab) that opens the menu, for
tight spots like the project Builds factbox where a labelled split button
crowds the row. Same menu, just a one-icon affordance. */
.ra__solo {
border: 1px solid var(--border-input);
background: var(--surface);
color: var(--ink-2);
padding: 6px;
border-radius: var(--r);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
list-style: none;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ra__solo::-webkit-details-marker { display: none; }
.ra__solo::marker { content: ""; }
.ra__solo svg { color: var(--ink-4); flex: 0 0 auto; }
.ra__solo:hover { background: var(--surface-sunken); color: var(--ink); }
.ra__solo:hover svg { color: var(--blue); }
.ra__menu[open] > .ra__solo { background: var(--blue-50); border-color: var(--blue); color: var(--blue-700); }
.ra__menu[open] > .ra__solo svg { color: var(--blue); }
/* Popup */
.ra__pop {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 11px;
box-shadow: var(--shadow-lg);
padding: 6px;
min-width: 212px;
z-index: 80;
}
.ra__item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 0;
background: transparent;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
border-radius: 7px;
cursor: pointer;
text-align: left;
text-decoration: none;
box-sizing: border-box;
}
.ra__item svg { width: 15px; height: 15px; color: var(--ink-4); flex: 0 0 auto; }
.ra__item:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.ra__item:hover svg { color: var(--blue); }
.ra__item--danger { color: var(--danger); }
.ra__item--danger:hover { background: var(--surface-sunken); color: var(--danger); }
.ra__item--danger svg,
.ra__item--danger:hover svg { color: var(--danger); }
.ra__divider { height: 1px; background: var(--border); margin: 5px 4px; }
/* "Compare with…" submenu */
.ra__sub { position: relative; }
.ra__item--parent { list-style: none; }
.ra__item--parent::-webkit-details-marker { display: none; }
.ra__item--parent::marker { content: ""; }
.ra__subcaret { margin-left: auto; transition: transform 0.15s; }
.ra__sub[open] > .ra__item--parent { color: var(--ink); background: var(--surface-sunken); }
.ra__sub[open] > .ra__item--parent .ra__subcaret { transform: rotate(90deg); color: var(--blue); }
.ra__sublist {
margin: 2px 0 3px 19px;
padding-left: 8px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.ra__item--leaf { padding: 7px 10px; }
.ra__item--leaf .mono { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.ra__item--leaf:hover .mono { color: var(--ink); }
/* ════════════════════════════════════════════════════════════════════════
Projects + Artifacts tools (recreated from the Claude Design handoff;
see .design/artifacts.md). Uses the shared base.css tokens, so the screens
theme light/dark automatically.
════════════════════════════════════════════════════════════════════════ */
.proj-page,
.art-page { max-width: 1100px; }
.proj-page .sub,
.art-page .sub { color: var(--ink-3); font-size: 14px; max-width: 760px; line-height: 1.55; margin: 6px 0 0; }
.art-page .plain-link,
.proj-page .plain-link { color: var(--blue); text-decoration: none; font-size: 13px; }
.art-page .plain-link:hover { text-decoration: underline; }
.art-fail { color: var(--danger); font-size: 13.5px; margin: 4px 0 10px; }
/* A latest-build chip that links into the Artifacts tool (Projects directory). */
.art-latest { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.art-latest:hover { text-decoration: none; }
.art-app__meta { color: var(--ink-3); font-size: 12.5px; }
/* ── Artifacts landing: header + toolbar ─────────────────────────────── */
.art-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.art-head .ah-text h1 { margin: 0; }
.art-head .btn { flex: 0 0 auto; }
.art-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.art-search { position: relative; flex: 1; max-width: 440px; }
.art-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-4); width: 17px; height: 17px; pointer-events: none; }
.art-search .input {
width: 100%;
height: 40px;
font: inherit;
font-size: 14px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--r);
padding: 0 13px 0 40px;
outline: none;
transition: border-color 0.12s, box-shadow 0.12s;
}
.art-search .input::placeholder { color: var(--ink-4); }
.art-search .input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.art-toolbar .tb-sort { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.art-toolbar .tb-sort b { color: var(--ink-2); font-weight: 600; }
.art-count { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.art-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.art-count .sep { margin: 0 8px; color: var(--border-strong); }
/* ── Artifacts landing: project list (scales to ~100 projects) ───────── */
.art-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.alr {
display: grid;
grid-template-columns: minmax(280px, 2.2fr) minmax(190px, 1.2fr) 116px minmax(140px, 1fr) 44px;
align-items: center; gap: 18px;
padding: 0 20px; min-height: 60px;
border-bottom: 1px solid var(--border);
}
.alr:last-child { border-bottom: 0; }
.alr.head {
min-height: 40px; background: var(--surface-2);
font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-4);
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.alr.proj { position: relative; transition: background .1s; }
.alr.proj:hover { background: var(--surface-2); }
/* col 1 — project identity. The name is a stretched link covering the row;
the actions cell sits above it so its buttons stay clickable. */
.al-proj { display: flex; align-items: center; gap: 13px; min-width: 0; }
.al-pico { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; }
.al-ptext { min-width: 0; }
.al-pname { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.al-rowlink::after { content: ""; position: absolute; inset: 0; }
/* A secondary link inside a stretched-link row (e.g. the pipeline row's project
link) must sit above the row overlay to stay independently clickable. */
.al-sublink { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.al-sublink:hover { color: var(--blue); text-decoration: underline; }
.alr.proj:hover .al-pname { color: var(--blue-700); }
.al-pmeta { margin-top: 3px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-4); }
.al-avatar { width: 16px; height: 16px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; font-size: 8px; font-weight: 700; color: var(--blue-700); background: var(--blue-100); }
.al-pmeta .reps { display: inline-flex; align-items: center; gap: 4px; }
.al-pmeta .reps svg { color: var(--ink-4); }
/* col 2 — latest build summary (commit on top, branch + BC chip below) */
.al-build { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-commit { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.al-commit svg { color: var(--ink-4); flex: 0 0 auto; }
.al-bmeta { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-4); }
.al-bmeta .br { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-bmeta .br svg { color: var(--ink-4); flex: 0 0 auto; }
.al-ver { font-family: var(--mono); font-size: 10px; color: var(--ink-3); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
/* col 4 — date */
.al-date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
/* col 5 — actions (download + kebab), lifted above the stretched row link */
.al-act { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* While the kebab menu is open, raise this row's actions above the rows below
so the popover isn't trapped under their (z-indexed) action cells. */
.al-act:has(.ra__menu[open]) { z-index: 50; }
/* ── Artifacts detail: breadcrumb + header ───────────────────────────── */
.det-bc { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-4); margin-bottom: 16px; }
.det-bc a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.det-bc a:hover { color: var(--blue); }
.det-bc .cur { color: var(--ink-2); font-weight: 600; }
.det-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 6px; }
.det-id { display: flex; align-items: center; gap: 15px; min-width: 0; }
.det-pico { width: 50px; height: 50px; border-radius: 13px; flex: 0 0 auto; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; }
.det-title h1 { margin: 0; }
.det-sub { margin-top: 8px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.det-sub .av { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--blue-700); background: var(--blue-100); }
.det-sub .meta { display: inline-flex; align-items: center; gap: 6px; }
.det-sub .meta svg { color: var(--ink-4); }
.det-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* ── Artifacts detail: two-column layout + cards ─────────────────────── */
/* Fixed 264px rail to match the Cookbook detail (.rd-grid); the main column takes the rest. */
.det-grid { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 18px; margin-top: 24px; align-items: start; }
.det-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Collapse to a single column on narrow viewports, matching the Cookbook (.rd-grid). */
@media (max-width: 980px) {
.det-grid { grid-template-columns: 1fr; }
}
.det-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.det-card.hero { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dc-head .dc-t { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-4); display: inline-flex; align-items: center; gap: 8px; }
.dc-head .dc-t svg { color: var(--ink-4); }
.dc-head .al-date { font-size: 11.5px; }
.dc-body { padding: 16px 18px; }
/* latest-build hero summary line */
.lb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-commit { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.lb-commit svg { color: var(--ink-4); flex: 0 0 auto; }
.lb-branch { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.lb-branch svg { color: var(--ink-4); }
.lb-ver { font-family: var(--mono); font-size: 11px; color: var(--ink-3); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.lb-when { font-size: 12px; color: var(--ink-4); margin-left: auto; }
.lb-deliv { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 11px; }
.lb-deliv .lbd-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lb-explore { margin-top: 14px; }
/* deliverable rows */
.app-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.app-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.app-row:last-child { border-bottom: 0; }
.app-row:hover { background: var(--surface-2); }
.app-ico { width: 30px; height: 30px; border-radius: 7px; background: var(--good-bg); color: var(--good); display: grid; place-items: center; }
.app-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-all; }
.app-pub { margin-top: 2px; font-size: 11px; color: var(--ink-4); }
.app-size { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* per-repo changelog */
.chg { margin-top: 18px; }
.chg-h { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.chg-repo { margin-bottom: 13px; }
.chg-repo:last-child { margin-bottom: 0; }
.chg-repo .cr-name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.chg-repo .cr-name svg { color: var(--ink-4); }
.chg-repo ul { list-style: none; margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 5px; }
.chg-repo li { position: relative; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.chg-repo li::before { content: ""; position: absolute; left: -14px; top: 7px; width: 5px; height: 5px; border-radius: 999px; background: var(--border-strong); }
.chg-repo li.chg-note { font-style: italic; }
.chg-repo li.chg-note::before { background: transparent; }
.chg-repo li .sha { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
/* build history timeline */
/* Fixed tracks for status / when / actions so they line up row-to-row (each row
is its own grid); the message column (1fr) takes the slack and wraps. */
.hist-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 104px 116px 132px; align-items: center; gap: 13px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.hist-row:last-child { border-bottom: 0; }
.hist-row:hover { background: var(--surface-2); }
.hist-rail { display: grid; place-items: center; }
.hist-rail .hdot { width: 9px; height: 9px; border-radius: 999px; }
.hist-rail .hdot.ready { background: var(--good); }
.hist-rail .hdot.failed { background: var(--danger); }
.hist-rail .hdot.building, .hist-rail .hdot.queued { background: var(--st-untrans); }
.hist-commit { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.hist-msg { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); line-height: 1.45; text-wrap: pretty; }
.hist-msg .hist-fail { color: var(--danger); }
.hist-msg .hist-more { margin-left: 6px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.hist-msg .hist-none { font-style: italic; }
.hist-when { font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.hist-act { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hist-apps { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
/* build log terminal */
.logbox { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.logbox-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--ink-3); }
.logbox-h .lh-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.logbox-h .lh-l svg { color: var(--ink-4); flex: 0 0 auto; }
.logbox-h .lh-l .sha { font-family: var(--mono); font-weight: 600; color: var(--ink-2); }
.logbox pre { margin: 0; padding: 13px 15px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink-2); max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.logbox .l-ok { color: var(--good); }
.logbox .l-warn { color: var(--st-untrans); }
.logbox .l-err { color: var(--danger); }
.logbox .l-dim { color: var(--ink-4); }
/* side-rail project factbox */
.pj-meta { display: flex; flex-direction: column; }
.pj-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pj-row:first-child { padding-top: 0; }
.pj-row:last-child { border-bottom: 0; }
.pj-k { color: var(--ink-4); }
.pj-v { color: var(--ink-2); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pj-v .av.sm { width: 18px; height: 18px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; font-size: 8px; font-weight: 700; color: var(--blue-700); background: var(--blue-100); }
.pj-link {
margin-top: 14px; display: flex; align-items: center; gap: 9px;
padding: 10px 12px; border-radius: var(--r-md, var(--r));
background: var(--blue-50); color: var(--blue-700); border: 1px solid transparent;
font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .12s, background .12s;
}
.pj-link:hover { border-color: var(--blue); background: var(--blue-100); }
.pj-link svg:last-child { margin-left: auto; color: var(--blue); }
/* side-rail repositories list (read-only; editing lives in the Projects tool) */
.repo-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.repo-row:first-child { padding-top: 0; }
.repo-row:last-child { border-bottom: 0; padding-bottom: 0; }
.repo-ico { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-3); display: grid; place-items: center; }
.repo-main { flex: 1; min-width: 0; }
.repo-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-meta { margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.repo-meta svg { color: var(--ink-4); flex: 0 0 auto; }
.repo-link { flex: 0 0 auto; color: var(--ink-4); display: grid; place-items: center; padding: 4px; border-radius: 6px; }
.repo-link:hover { color: var(--blue); background: var(--surface-sunken); }
/* compare-builds picker (stacked for the narrow rail) */
.cmp-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cmp-row .input {
width: 100%;
height: 36px;
font: inherit;
font-size: 13px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--r);
padding: 0 10px;
outline: none;
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s;
}
.cmp-row .input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.cmp-vs { font-size: 12px; color: var(--ink-4); text-align: center; }
.cmp-go { justify-content: center; }
/* ---------- Pipeline editor + extension picker (modal) ---------- */
.pe-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.pe-field .field__input {
width: 100%;
height: 36px;
font: inherit;
font-size: 13px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--r);
padding: 0 10px;
outline: none;
transition: border-color 0.12s, box-shadow 0.12s;
}
.pe-field .field__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
/* Native select chrome replaced with the app's caret, matching the OE pickers. */
.pe-field select.field__input {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding-right: 28px;
background-image:
linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.pe-field select.field__input:focus {
background-image:
linear-gradient(45deg, transparent 50%, var(--blue) 50%),
linear-gradient(135deg, var(--blue) 50%, transparent 50%);
}
/* Project detail: the project's pipelines list. */
.pl-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.pl-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--ink);
font-size: 13.5px;
text-decoration: none;
}
.pl-item:hover { background: var(--surface-sunken); border-color: var(--blue); }
.nb-status { display: flex; align-items: center; gap: 9px; }
.nb-spin {
width: 15px;
height: 15px;
border: 2px solid var(--border);
border-top-color: var(--blue);
border-radius: 50%;
flex: 0 0 auto;
animation: nb-spin 0.7s linear infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }
.nb-list {
display: flex;
flex-direction: column;
max-height: 340px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--r);
margin: 0 0 10px;
}
.nb-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border);
}
.nb-row:last-child { border-bottom: none; }
.nb-row:hover { background: var(--surface-sunken); }
.nb-row input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.nb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.nb-meta { font-size: 12px; color: var(--ink-3); }
.nb-foot {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--ink-3);
margin: 0 0 14px;
}
.nb-sep { color: var(--ink-4); }
.nb-count { margin-left: auto; color: var(--ink-3); }
/* Discovery toolbar under the checklist: "Last discovered …" + Refresh. */
.pe-discovery {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px;
}
.pe-discovery .muted { font-size: 12.5px; }
.pe-discovery .btn { margin-left: auto; }
/* Why the primary action is disabled — shown only when it's user-correctable. */
.pe-hint { margin: 0 0 8px; font-size: 12.5px; }
.nb-linkbtn {
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 12.5px;
color: var(--blue);
cursor: pointer;
}
.nb-linkbtn:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════════════════
Project SETTINGS — left sub-nav + one active section
(recreated from the Claude Design "Project settings" handoff; see
.design/artifacts.md). Sits inside .art-page.art-detail and reuses the
shared base.css tokens, so it themes light/dark automatically.
════════════════════════════════════════════════════════════════════════ */
.set-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 30px; margin-top: 24px; align-items: start; }
@media (max-width: 880px) { .set-grid { grid-template-columns: 1fr; } }
/* ── left sub-nav ─────────────────────────────────────────────────────── */
.set-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 3px; }
.set-nav .cap-label { padding: 0 12px 8px; }
.set-nav-item {
display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--ink-2);
text-align: left; cursor: pointer; background: transparent; border: 1px solid transparent;
font-family: inherit; transition: background .12s, color .12s;
}
.set-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.set-nav-item.active { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.set-nav-item svg { flex: 0 0 auto; }
.set-nav-item .sn-label { flex: 1; min-width: 0; }
.set-nav-item .sn-badge {
font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-3);
border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center;
}
.set-nav-item.active .sn-badge { background: var(--blue-100); border-color: transparent; color: var(--blue-700); }
.set-nav-item .sn-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.set-nav-item .sn-dot.off { background: var(--ink-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-4) 18%, transparent); }
.set-nav-item .sn-dot.on { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.set-nav-divider { height: 1px; background: var(--border); margin: 10px 12px; }
.set-nav-item.danger { color: var(--danger); }
.set-nav-item.danger:hover, .set-nav-item.danger.active { background: var(--danger-bg, color-mix(in srgb, var(--danger) 12%, var(--surface))); color: var(--danger); }
/* ── content side ─────────────────────────────────────────────────────── */
.set-content { min-width: 0; }
.set-sec-head { margin-bottom: 18px; }
.set-sec-head h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; display: flex; align-items: center; gap: 12px; }
.set-sec-head .desc { margin-top: 7px; font-size: 13px; color: var(--ink-3); line-height: 1.55; max-width: 620px; }
.set-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.set-pill .pd { width: 6px; height: 6px; border-radius: 999px; }
.set-pill.off { background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-3); }
.set-pill.off .pd { background: var(--ink-4); }
/* "Connected / synced" green pill, shared shape with the build-status pills */
.state { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.state .sd { width: 6px; height: 6px; border-radius: 999px; }
.state.ready { color: var(--good); background: var(--good-bg); }
.state.ready .sd { background: var(--good); }
.set-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: 22px 24px; }
.set-panel + .set-panel { margin-top: 18px; }
.set-panel--danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.set-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.set-foot .note { font-size: 12px; color: var(--ink-4); margin-left: auto; }
.set-foot .note b { color: var(--ink-2); font-weight: 600; }
.set-subhead { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }
.set-subhead .cap-label { margin: 0; }
.set-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-sunken); font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.set-empty svg { color: var(--ink-4); flex: 0 0 auto; }
/* ── audit trail (read-only) ──────────────────────────────────────────── */
.av { border-radius: 999px; display: grid; place-items: center; font-weight: 700; color: var(--blue-700); background: var(--blue-100); }
.av.sm { width: 20px; height: 20px; font-size: 8.5px; flex: 0 0 auto; }
.audit { display: flex; flex-direction: column; }
.audit-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.audit-row:first-child { padding-top: 0; }
.audit-row:last-child { border-bottom: 0; padding-bottom: 0; }
.audit-k { font-size: 12.5px; color: var(--ink-4); }
.audit-v { font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.audit-v.muted { font-weight: 500; }
.audit-t { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
/* ── environments table (BC connection) ───────────────────────────────── */
.env-tbl { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.env-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1.1fr) auto; align-items: center; gap: 16px; padding: 0 16px; min-height: 62px; border-bottom: 1px solid var(--border); }
.env-row:last-child { border-bottom: 0; }
.env-row.head { min-height: 38px; background: var(--surface-2); font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-4); }
.env-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.env-ico { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-3); display: grid; place-items: center; }
.env-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.env-company { font-size: 13px; color: var(--ink-2); min-width: 0; }
.env-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Per-environment update window: a caption under the name + an inline editor strip. */
.env-window { margin-top: 2px; font-size: 11.5px; color: var(--ink-4); }
.env-window-edit { padding: 13px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.env-window-edit:last-child { border-bottom: 0; }
.ewe-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ewe-time { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ewe-time .field__input {
width: 130px; height: 36px; font: inherit; font-size: 13px; color: var(--ink);
background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r);
padding: 0 10px; outline: none; transition: border-color .12s, box-shadow .12s;
}
.ewe-time .field__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.type-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-2); width: max-content; }
.type-pill .td { width: 7px; height: 7px; border-radius: 999px; }
.type-pill.prod .td { background: var(--blue); }
.type-pill.sandbox .td { background: var(--st-untrans); }
/* ── releases list (Releases tool) ────────────────────────────────────── */
/* Inline warnings in the row meta: Force Sync mode and a vanished environment. */
.rpe-force, .rpe-missing { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 600; }
.rpe-force svg, .rpe-missing svg { color: var(--danger); }
/* The Force-Sync / Production acknowledgement in the editor + release dialogs. */
.rpe-confirm { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--danger); border-radius: var(--r-sm); background: color-mix(in srgb, var(--danger) 7%, transparent); font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.rpe-confirm input { margin-top: 2px; flex: 0 0 auto; }
/* Release dialog: the "when" picker row + the outside-window note. */
.rb-when-row { display: flex; align-items: center; gap: 8px; }
.rb-when-row .field__input { flex: 1; }
.rb-outside { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--st-untrans); font-weight: 600; }
.rb-outside svg { color: var(--st-untrans); }
/* ── delivery history (release pipeline detail) ───────────────────────── */
.del-list { display: flex; flex-direction: column; gap: 10px; }
.del-row { border: 1px solid var(--border); border-radius: var(--r); padding: 13px 15px; background: var(--surface); }
.del-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.del-build { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.del-when { font-size: 12px; color: var(--ink-4); }
.del-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-left: auto; }
.del-outside { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--st-untrans); }
.del-outside svg { color: var(--st-untrans); }
.del-actions { display: inline-flex; gap: 6px; }
.del-fail { margin: 9px 0 0; font-size: 12.5px; color: var(--danger); }
.del-apps { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.del-app { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.del-app-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--ink-4); }
.del-app-dot--ok { background: var(--good); }
.del-app-dot--fail { background: var(--danger); }
.del-app-dot--busy { background: var(--st-untrans); }
.del-app-dot--skip { background: var(--border-strong); }
.del-app-dot--pending { background: var(--ink-4); opacity: .5; }
.del-app-name { font-weight: 600; color: var(--ink-2); }
.del-app-ver { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.del-app-msg { color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
.del-app-dot--busy { animation: del-pill-dot-pulse 1.4s ease-in-out infinite; }
}
@keyframes del-pill-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* ── pipelines list (links into the Pipelines tool) ───────────────────── */
.pipe-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r); text-decoration: none; transition: border-color .12s, background .12s; }
.pipe-row + .pipe-row { margin-top: 10px; }
.pipe-row:hover { border-color: var(--blue); background: var(--surface-2); }
.pipe-ico { width: 34px; height: 34px; border-radius: 8px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; }
.pipe-main { flex: 1; min-width: 0; }
.pipe-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pipe-row:hover .pipe-name { color: var(--blue-700); }
.pipe-meta { margin-top: 2px; font-size: 12px; color: var(--ink-4); }
.pipe-row .chev { margin-left: auto; color: var(--ink-4); display: grid; place-items: center; }
/* ============================================================================
Your account (/account) — design handoff "Account settings.html".
The page reuses the .set-grid sub-nav, .set-panel, .audit and .det-head
primitives from the project-settings rework (#463); these .acc-* classes
cover the account-specific bits the handoff adds: the identity avatar, the
two-step-verification method cards, and the grid-based tables for passkeys,
access tokens, connected assistants and repository providers.
============================================================================ */
.acc-avatar { width: 54px; height: 54px; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); display: grid; place-items: center; font-size: 18px; font-weight: 700; flex: 0 0 auto; letter-spacing: .5px; }
.acc-rolepill { font-size: 11px; font-weight: 600; color: var(--blue-700); background: var(--blue-50); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* method cards — two-step verification, danger zone */
.acc-method { border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; }
.acc-method + .acc-method { margin-top: 14px; }
.acc-method-h { display: flex; align-items: flex-start; gap: 13px; }
.acc-method-ico { width: 38px; height: 38px; border-radius: 9px; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-3); display: grid; place-items: center; flex: 0 0 auto; }
.acc-method-ico.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: transparent; color: var(--danger); }
.acc-method-tt { flex: 1; min-width: 0; }
.acc-method-name { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.acc-method-sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 560px; }
.acc-badge { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.acc-badge.on { color: var(--good); background: var(--good-bg); }
.acc-badge.off { color: var(--ink-4); background: var(--surface-sunken); border: 1px solid var(--border); }
.acc-method-act { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.acc-method-act .note { margin-left: auto; font-size: 12px; color: var(--ink-4); }
.acc-method-act .note b { color: var(--ink-2); font-weight: 600; }
.acc-method-act .inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-method-act .inline-form input { max-width: 168px; }
/* grid tables — passkeys, access tokens, connected assistants, repos */
.acc-tbl { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.acc-row { display: grid; align-items: center; gap: 16px; padding: 0 16px; min-height: 60px; border-bottom: 1px solid var(--border); }
.acc-row:last-child { border-bottom: 0; }
.acc-row.head { min-height: 38px; background: var(--surface-2); font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-4); }
.acc-c-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acc-c-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-3); display: grid; place-items: center; flex: 0 0 auto; }
.acc-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-nsub { margin-top: 2px; font-size: 11.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.acc-meta.mono { font-family: var(--mono); font-size: 11.5px; }
.acc-scope { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--ink-2); justify-self: start; }
.acc-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--good); font-weight: 600; }
.acc-tbl.tt-pat .acc-row { grid-template-columns: 1.5fr 132px 118px 108px 40px; }
.acc-tbl.tt-asst .acc-row { grid-template-columns: 1.6fr 1fr 130px 40px; }
.acc-tbl.tt-repo .acc-row { grid-template-columns: 1.6fr 150px 130px 40px; }
.acc-tbl.tt-pass .acc-row { grid-template-columns: 1.6fr 130px 130px 40px; }
/* compact icon-only delete/disconnect button for table rows */
.acc-del { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; justify-self: end; transition: background .12s, color .12s, border-color .12s; }
.acc-del:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }