so the .open machinery + toggle
focus still drive the drawer; it just never collapses.) */
#addDetails > summary {
display: none;
}
#addDetails > .details-body {
margin-top: 0;
}
.mcp-chat {
display: flex;
flex-direction: column;
gap: 10px;
}
.mcp-chat-widget {
position: fixed;
right: 16px;
bottom: 148px;
z-index: 75;
display: flex;
flex-direction: column;
width: min(var(--mcp-chat-width, 430px), calc(100vw - 24px));
height: min(var(--mcp-chat-height, 430px), calc(100dvh - 24px));
min-width: min(340px, calc(100vw - 24px));
min-height: min(320px, calc(100dvh - 24px));
max-width: calc(100vw - 24px);
max-height: calc(100dvh - 24px);
/* one floating-panel frame: the modal-card tokens (BEN-634) */
background: var(--color-surface);
border: var(--vui-modal-card-border);
border-radius: var(--vui-modal-card-radius);
box-shadow: var(--vui-modal-card-shadow);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
visibility: hidden;
/* Corner rounding follows vellum's technique (.feedback-capture-body):
overflow: visible on the frame + inner-radius clipping on the head/body
children, not overflow: hidden on the frame itself (BEN-689) — that
would clip outside-edge decorations like the resize grip. */
overflow: visible;
resize: none;
transition:
opacity 120ms ease,
transform 120ms ease,
visibility 120ms ease;
}
.mcp-chat-widget.is-positioned {
left: var(--mcp-chat-left);
top: var(--mcp-chat-top);
right: auto;
bottom: auto;
}
.mcp-chat-widget.is-dragging,
.mcp-chat-widget.is-resizing {
transition: none;
user-select: none;
}
.mcp-chat-resize-handle {
position: absolute;
z-index: 3;
touch-action: none;
}
.mcp-chat-resize-left {
bottom: 12px;
cursor: ew-resize;
left: 0;
top: 42px;
width: 8px;
}
.mcp-chat-resize-right {
bottom: 12px;
cursor: ew-resize;
right: 0;
top: 42px;
width: 8px;
}
.mcp-chat-resize-bottom {
bottom: 0;
cursor: ns-resize;
height: 8px;
left: 12px;
right: 12px;
}
.mcp-chat-resize-bottom-left {
bottom: 0;
cursor: nesw-resize;
height: 16px;
left: 0;
width: 16px;
}
.mcp-chat-resize-bottom-right {
bottom: 0;
cursor: nwse-resize;
height: 16px;
right: 0;
width: 16px;
}
body.mcp-chat-open .mcp-chat-widget {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
visibility: visible;
}
.mcp-chat-head {
cursor: grab;
gap: 12px;
touch-action: none;
border-radius: calc(var(--vui-modal-card-radius) - var(--vui-border-width))
calc(var(--vui-modal-card-radius) - var(--vui-border-width)) 0 0;
}
.mcp-chat-widget.is-dragging .mcp-chat-head {
cursor: grabbing;
}
.mcp-chat-head-actions {
align-items: center;
display: inline-flex;
gap: 8px;
}
.mcp-chat-head .ui-modal-title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.mcp-chat-seal {
width: 36px;
height: 36px;
flex: 0 0 auto;
stroke: currentColor;
stroke-width: 1.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.mcp-chat-quill {
width: 16px;
height: 16px;
flex: 0 0 auto;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
#mcpChatSend {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-left: auto;
}
.mcp-chat-consulting {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-text-muted);
}
.mcp-chat-stars {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
font-size: 12px;
}
.mcp-chat-stars > span {
opacity: 0.3;
animation: chat-star-light 1200ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.mcp-chat-stars > span:nth-child(2) {
animation-delay: 160ms;
}
.mcp-chat-stars > span:nth-child(3) {
animation-delay: 320ms;
}
@keyframes chat-star-light {
0%,
65%,
100% {
opacity: 0.3;
}
25%,
40% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.mcp-chat-stars > span {
animation: none;
opacity: 0.7;
}
}
.mcp-chat-widget .mcp-chat {
flex: 1 1 auto;
min-height: 0;
/* Own scroll clipping (independent of the frame's overflow: visible above)
plus the bottom-corner radius the frame used to provide for free. */
overflow: hidden;
border-radius: 0 0 calc(var(--vui-modal-card-radius) - var(--vui-border-width))
calc(var(--vui-modal-card-radius) - var(--vui-border-width));
padding: 10px;
}
/* BEN-608: layout only — the visual comes from the BEN-403 arcane-ledger
field base (themed surface/border/mono), which also flips in dark. */
.mcp-chat textarea {
width: 100%;
min-width: 0;
}
.mcp-chat-log {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow: auto;
border: 1px solid var(--color-line-beige);
background: var(--color-surface-warm);
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mcp-chat-empty {
align-self: stretch;
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: 1.35;
margin: auto 0;
padding: 10px;
}
.mcp-chat-empty-title {
color: var(--color-neutral-900);
font-size: var(--font-size-base);
margin-bottom: 4px;
}
.mcp-chat-empty-copy {
margin-bottom: 10px;
}
.mcp-chat-empty-examples {
display: grid;
gap: 4px;
list-style: none;
}
.mcp-chat-empty-examples li {
min-width: 0;
}
.mcp-chat-message {
display: grid;
gap: 3px;
}
.mcp-chat-role {
color: var(--color-neutral-500);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.mcp-chat-body {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: var(--font-size-base);
line-height: 1.35;
}
.mcp-chat-inline-card.card-name-button {
display: inline;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
width: auto;
}
.mcp-chat-inline-card.card-name-button:hover,
.mcp-chat-inline-card.card-name-button:focus-visible {
text-decoration-style: solid;
}
.mcp-chat-inline-location {
display: inline-flex;
margin: 0 2px;
vertical-align: text-bottom;
white-space: nowrap;
}
.mcp-chat-inline-location .loc-pill {
cursor: default;
}
.mcp-chat-card-results {
border: 1px solid var(--color-neutral-border-warm);
background: var(--color-neutral-surface-warm);
display: grid;
gap: 4px;
margin-top: 8px;
overflow: hidden;
padding: 6px;
}
.mcp-chat-card-results-head {
align-items: center;
color: var(--color-neutral-500);
display: flex;
font-size: var(--font-size-xs);
gap: 8px;
justify-content: space-between;
text-transform: uppercase;
}
.mcp-chat-card-results-actions {
align-items: center;
display: inline-flex;
gap: 8px;
}
.mcp-chat-card-results-copy {
background: transparent;
border: none;
color: var(--color-neutral-550);
cursor: pointer;
font-size: var(--font-size-xs);
padding: 0;
text-transform: none;
text-decoration: underline;
text-underline-offset: 2px;
}
.mcp-chat-card-results-copy:hover,
.mcp-chat-card-results-copy:focus-visible {
color: var(--color-neutral-black);
outline: none;
}
.mcp-chat-card-summary {
display: grid;
gap: 4px;
}
.mcp-chat-card-summary-item {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
min-width: 0;
padding: 2px 0;
}
.mcp-chat-card-summary-meta {
font-size: var(--font-size-sm-plus);
}
.mcp-chat-card-summary-location {
display: inline-flex;
}
.mcp-chat-card-details {
border-top: 1px solid var(--color-line-beige-soft);
margin-top: 2px;
padding-top: 4px;
}
.mcp-chat-card-details > summary {
color: var(--color-neutral-500);
cursor: pointer;
font-size: var(--font-size-xs);
line-height: 1.2;
width: max-content;
}
.mcp-chat-card-details[open] {
display: grid;
gap: 4px;
}
.mcp-chat-card-list {
display: grid;
overflow-x: auto;
}
.mcp-chat-card-row {
border-top: 1px solid var(--color-line-beige-soft);
display: grid;
grid-template-columns:
minmax(180px, 1.6fr) 64px 48px 72px 58px 76px minmax(140px, 1fr) minmax(130px, 1fr)
44px 72px 44px;
min-width: 970px;
}
.mcp-chat-card-header {
background: var(--color-surface-parchment);
border-top: 0;
color: var(--color-neutral-500);
font-size: var(--font-size-xxs);
line-height: 1;
text-transform: uppercase;
}
.mcp-chat-card-header-cell {
align-items: center;
display: flex;
min-width: 0;
padding: 4px 8px;
white-space: nowrap;
}
.mcp-chat-reference-row > *:not(.mcp-chat-card-move) {
align-items: center;
display: flex;
min-width: 0;
padding: 6px 8px;
}
.mcp-chat-reference-row .card-name-button {
white-space: normal;
}
.mcp-chat-reference-row .tags-cell {
padding-top: 4px;
padding-bottom: 4px;
}
.mcp-chat-card-edit-cell {
justify-content: flex-end;
}
.mcp-chat-card-edit {
background: transparent;
border: none;
color: var(--color-status-neutral-text);
cursor: pointer;
font: inherit;
font-size: var(--font-size-xs);
padding: 0;
text-decoration: underline;
text-underline-offset: 2px;
}
.mcp-chat-card-edit:hover,
.mcp-chat-card-edit:focus-visible {
color: var(--color-neutral-black);
outline: none;
}
.mcp-chat-card-move {
border-left: 2px solid var(--color-line-warm-divider-strong);
display: grid;
gap: 6px;
grid-column: 1 / -1;
padding-left: 8px;
}
.mcp-chat-card-move-field {
display: grid;
gap: 3px;
}
.mcp-chat-card-move-field span {
color: var(--color-neutral-500);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.mcp-chat-card-move select,
.mcp-chat-card-move input {
min-width: 0;
width: 100%;
border: 1px solid var(--color-neutral-200);
background: var(--color-neutral-white);
border-radius: var(--radius-tight);
color: var(--color-neutral-900);
font: inherit;
min-height: 30px;
padding: 4px 6px;
}
.mcp-chat-card-move-new {
display: grid;
gap: 6px;
grid-template-columns: 92px minmax(0, 1fr);
}
.mcp-chat-card-move-actions {
align-items: center;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.mcp-chat-card-move-error {
color: var(--color-danger-text-plain);
flex: 1;
font-size: var(--font-size-xs);
line-height: 1.2;
}
.mcp-chat-preview-panel,
.mcp-chat-draft-panel {
border: 1px solid var(--color-neutral-900);
background: var(--color-neutral-surface-warm);
display: grid;
gap: 8px;
margin: 8px 0;
max-height: min(26vh, 220px);
overflow: auto;
padding: 8px;
}
.mcp-chat-draft-panel {
max-height: min(38vh, 340px);
}
.mcp-chat-preview-panel,
.mcp-chat-draft-panel,
.mcp-chat-preview-list,
.mcp-chat-preview-group,
.mcp-chat-draft-row,
.mcp-chat-draft-controls {
grid-template-columns: minmax(0, 1fr);
}
.mcp-chat-signedout {
border: 1px solid var(--color-neutral-900);
background: var(--color-neutral-surface-warm);
display: grid;
gap: 8px;
justify-items: start;
margin: 8px 0;
padding: 10px;
}
.mcp-chat-signedout-copy {
color: var(--color-neutral-700);
font-size: var(--font-size-sm-plus);
line-height: 1.3;
}
.mcp-chat-preview-head,
.mcp-chat-preview-row {
display: grid;
gap: 8px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.mcp-chat-preview-title {
font-size: var(--font-size-xs);
text-transform: uppercase;
color: var(--color-neutral-550);
}
.mcp-chat-preview-list {
display: grid;
gap: 8px;
}
.mcp-chat-preview-group {
display: grid;
gap: 6px;
}
.mcp-chat-preview-group-title {
color: var(--color-status-neutral-text);
font-size: var(--font-size-xxs);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.mcp-chat-preview-row {
border-top: 1px solid var(--color-line-beige);
padding-top: 8px;
}
.mcp-chat-preview-row.has-error .mcp-chat-preview-meta {
color: var(--color-danger-text-plain);
}
.mcp-chat-draft-row {
border-top: 1px solid var(--color-line-beige);
display: grid;
gap: 6px;
padding-top: 6px;
}
.mcp-chat-draft-row.has-error .mcp-chat-preview-meta {
color: var(--color-danger-text-plain);
}
.mcp-chat-draft-controls {
display: grid;
gap: 6px;
}
.mcp-chat-draft-add-preview {
align-items: center;
flex-direction: row;
gap: 10px;
margin-top: 0;
min-height: 0;
padding-top: 0;
border-top: 0;
}
.mcp-chat-draft-add-preview .add-preview-img-wrap {
gap: 0;
}
.mcp-chat-draft-add-preview .add-preview-img {
width: 74px;
}
.mcp-chat-draft-add-preview .add-preview-name {
font-size: var(--font-size-lg);
line-height: 1.1;
margin-bottom: 1px;
}
.mcp-chat-draft-add-preview .add-preview-meta {
font-size: var(--font-size-xs);
line-height: 1.25;
margin-bottom: 0;
}
.mcp-chat-draft-printing-picker {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.mcp-chat-draft-printing-picker .printing-list {
max-height: 112px;
}
.mcp-chat-draft-printing-picker .printing-row {
padding-top: 4px;
padding-bottom: 4px;
}
.mcp-chat-draft-option-bar {
display: grid;
gap: 7px;
grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
}
.mcp-chat-draft-field {
display: grid;
gap: 3px;
min-width: 0;
}
.mcp-chat-draft-field-wide,
.mcp-chat-draft-printing {
grid-column: 1 / -1;
}
.mcp-chat-draft-field span {
color: var(--color-neutral-500);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.mcp-chat-draft-field input,
.mcp-chat-draft-field select {
min-width: 0;
width: 100%;
border: 1px solid var(--color-neutral-200);
background: var(--color-neutral-white);
border-radius: var(--radius-tight);
color: var(--color-neutral-900);
font: inherit;
min-height: 30px;
padding: 4px 6px;
}
.mcp-chat-draft-printing {
color: var(--color-neutral-700);
font-size: var(--font-size-sm-plus);
line-height: 1.25;
}
.mcp-chat-preview-summary {
font-size: var(--font-size-base);
line-height: 1.25;
}
.mcp-chat-preview-meta {
color: var(--color-neutral-500);
font-size: var(--font-size-xs);
line-height: 1.25;
margin-top: 2px;
}
.mcp-chat-preview-actions,
.mcp-chat-preview-row-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.mcp-chat-preview-action {
min-height: 28px;
min-width: 0;
padding: 0 8px;
}
.mcp-chat-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
flex: 0 0 auto;
gap: 8px;
align-items: end;
}
.mcp-chat-form textarea {
min-height: 70px;
resize: none;
}
.mcp-chat-form .btn {
min-height: 32px;
min-width: 56px;
}
@media (hover: none) {
.mcp-chat-head {
cursor: auto;
touch-action: auto;
}
}
.mcp-chat-apply {
justify-self: start;
margin-top: 4px;
}
body.share-mode .mcp-chat-widget,
body.share-mode .sync-details-modal,
body.share-mode .mcp-chat-fab {
display: none;
}
/* Add-cards panel */
/* .tab-row/.tab-btn (vellum) — first consumer (BEN-689). Only the
icon+label layout delta lives here; chrome/active-state/focus all come
from vellum. */
.add-tabs {
margin-bottom: 12px;
}
.add-tab {
display: inline-flex;
align-items: center;
gap: 5px;
}
.add-tab-icon,
.add-tab-icon-svg {
display: inline-flex;
flex: 0 0 auto;
}
.add-mode {
display: none;
}
.add-mode.active {
display: block;
}
.add-printing-toggle {
margin-top: 8px;
}
#addDetails[data-add-mode='scan'] .printing-picker.scan-collapsed {
display: none;
}
.card-scan {
--scan-card-ratio: 0.716;
}
.card-scan-handoff {
display: grid;
gap: 14px;
align-items: center;
margin-bottom: 12px;
}
.card-scan-handoff.has-qr {
grid-template-columns: 176px minmax(0, 1fr);
}
.card-scan-handoff-copy,
.card-scan-handoff-copy > div:first-child {
display: grid;
gap: 8px;
}
.card-scan-handoff-copy > div:first-child {
gap: 3px;
}
.card-scan-handoff span,
.card-scan-privacy {
color: var(--color-text-muted);
font-size: var(--font-size-sm-plus);
line-height: 1.35;
}
.card-scan-handoff span[data-connected='true'] {
color: var(--color-status-success-text);
}
.card-scan-qr {
background: var(--color-neutral-white);
border: 1px solid var(--color-line-subtle);
border-radius: var(--radius-tight);
display: none;
}
.card-scan-handoff.has-qr .card-scan-qr {
display: block;
}
.add-preview {
scroll-margin-top: 72px;
}
.card-scan-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.card-scan-link-row input {
min-width: 0;
width: 100%;
}
.card-scan-stage {
align-items: center;
aspect-ratio: 4 / 5;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--color-neutral-black) 92%, var(--color-surface)),
color-mix(in srgb, var(--color-neutral-black) 76%, var(--color-surface))
);
border: 1px solid var(--color-neutral-700);
border-radius: var(--radius-tight);
display: grid;
justify-items: center;
max-height: 54dvh;
overflow: hidden;
position: relative;
}
.card-scan-stage video {
display: none;
height: 100%;
object-fit: cover;
width: 100%;
}
.card-scan-stage.is-live video {
display: block;
}
.card-scan-frame {
aspect-ratio: var(--scan-card-ratio);
border: 2px solid color-mix(in srgb, var(--color-neutral-white) 78%, transparent);
border-radius: 9px;
box-shadow: 0 0 0 999px color-mix(in srgb, var(--color-neutral-black) 42%, transparent);
display: none;
height: min(80%, 440px);
pointer-events: none;
position: absolute;
transition:
border-color 160ms ease,
box-shadow 160ms ease;
}
.card-scan-stage.is-live .card-scan-frame {
display: block;
}
.card-scan-stage[data-quality='ready'] .card-scan-frame {
border-color: color-mix(in srgb, var(--color-status-success-text) 82%, white);
box-shadow:
0 0 0 999px color-mix(in srgb, var(--color-neutral-black) 42%, transparent),
0 0 0 3px color-mix(in srgb, var(--color-status-success-text) 28%, transparent);
}
.card-scan-idle {
align-items: center;
color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
display: grid;
gap: 10px;
justify-items: center;
}
.card-scan-idle svg {
fill: none;
height: 52px;
stroke: currentColor;
stroke-linejoin: round;
stroke-width: 1.25;
width: 52px;
}
.card-scan-stage.is-live .card-scan-idle,
.card-scan-working {
display: none;
}
.card-scan.is-analyzing .card-scan-working {
align-items: center;
background: color-mix(in srgb, var(--color-neutral-black) 68%, transparent);
color: var(--color-text-inverse);
display: flex;
gap: 8px;
inset: 0;
justify-content: center;
position: absolute;
z-index: 2;
}
.card-scan-status {
line-height: 1.35;
margin: 10px 0 8px;
min-height: 19px;
}
.card-scan-status[data-kind='error'] {
color: var(--color-danger-text-deep);
}
.card-scan-status[data-kind='success'] {
color: var(--color-status-success-text);
}
.card-scan-status[data-kind='uncertain'] {
color: var(--color-status-warning-text);
}
.card-scan-candidates {
border-top: 1px solid var(--color-line-faint);
margin: 8px 0 10px;
padding-top: 10px;
}
.card-scan-candidate-title {
color: var(--color-text-muted);
font-size: var(--font-size-sm-plus);
margin: 0 0 7px;
}
.card-scan-candidate-list {
display: grid;
gap: 5px;
}
.card-scan-candidate {
align-items: center;
background: var(--color-surface);
border: 1px solid var(--color-line-subtle);
border-radius: var(--radius-tight);
color: var(--color-text);
cursor: pointer;
display: grid;
font: inherit;
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
padding: 6px;
text-align: left;
transition:
background-color 140ms ease,
border-color 140ms ease,
transform 140ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.card-scan-candidate:active {
transform: scale(0.98);
}
.card-scan-candidate img {
border-radius: 3px;
display: block;
width: 34px;
}
.card-scan-candidate span {
display: grid;
gap: 1px;
min-width: 0;
}
.card-scan-candidate strong,
.card-scan-candidate small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-scan-candidate small {
color: var(--color-text-muted);
}
@media (hover: hover) and (pointer: fine) {
.card-scan-candidate:hover {
background: var(--color-surface-hover);
border-color: var(--color-line-strong);
}
}
/* BEN-981: session queue — reuses .history-list for row scaffolding (see
.card-scan-queue-list below), only the queue-specific bits live here. */
.card-scan-queue {
border-top: 1px solid var(--color-line-faint);
margin: 0 0 12px;
padding-top: 10px;
}
.card-scan.is-paired-phone .card-scan-queue {
display: none;
}
.card-scan-queue-head {
align-items: baseline;
display: flex;
gap: 8px;
justify-content: space-between;
margin-bottom: 6px;
}
.card-scan-queue-totals {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.card-scan-queue-list {
max-height: 200px;
}
.scan-queue-row .history-row-meta {
flex-wrap: wrap;
}
.scan-queue-thumb {
border-radius: 2px;
display: block;
height: 24px;
width: 17px;
}
.scan-queue-badge {
font-size: var(--font-size-xxxs);
letter-spacing: 0.04em;
text-transform: lowercase;
}
.scan-queue-badge-pending {
--ui-chip-bg: var(--color-surface-hover);
--ui-chip-border: var(--color-line);
--ui-chip-ink: var(--color-text-muted);
}
.scan-queue-badge-confirmed {
--ui-chip-bg: var(--color-success-bg);
--ui-chip-border: var(--color-success-border);
--ui-chip-ink: var(--color-status-success-text);
}
.scan-queue-badge-corrected {
--ui-chip-bg: color-mix(in srgb, var(--color-status-warning-text) 14%, transparent);
--ui-chip-border: color-mix(in srgb, var(--color-status-warning-text) 45%, transparent);
--ui-chip-ink: var(--color-status-warning-text);
}
.scan-queue-badge-skipped {
--ui-chip-bg: var(--color-surface-hover);
--ui-chip-border: var(--color-line);
--ui-chip-ink: var(--color-text-muted);
}
.scan-queue-fix {
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
font: inherit;
font-size: var(--font-size-xs);
margin-left: auto;
padding: 0;
text-decoration: underline;
}
.scan-queue-fix:hover,
.scan-queue-fix:focus-visible {
color: var(--color-text-strong);
}
.scan-queue-error {
color: var(--color-danger-text-deep);
font-size: var(--font-size-xs);
}
.scan-queue-correct {
margin-top: 6px;
max-width: none;
}
.scan-queue-correct input {
width: 100%;
}
.scan-queue-empty-row {
box-shadow: none !important;
}
.card-scan-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.card-scan-privacy {
border-top: 1px solid var(--color-line-faint);
margin-top: 12px;
padding-top: 10px;
}
.card-scan-gate-card {
max-width: 430px;
}
.name-search {
position: relative;
max-width: 360px;
}
.app-right .name-search {
max-width: none;
}
/* BEN-571: step-1 empty state — example searches with the chat panel's
quote-bar treatment. Hidden once a printing list or preview is up. */
.add-empty {
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: 1.35;
margin-top: 14px;
padding: 2px;
}
.add-empty-copy {
margin-bottom: 10px;
}
.add-empty-examples {
display: grid;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.add-empty-examples li {
border-left: 2px solid var(--color-line-warm-divider);
padding-left: 8px;
}
/* Quiet-link chrome comes from the shared family (BEN-613). */
.add-details .details-body:has(.printing-picker.active) .add-empty,
.add-details .details-body:has(.add-preview.active) .add-empty {
display: none;
}
.name-search input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--color-neutral-black);
padding: 6px 2px;
font-size: var(--font-size-lg);
font-family: inherit;
text-transform: none;
outline: none;
}
.name-search input:focus {
border-bottom-width: 2px;
}
.autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-neutral-white);
border: 1px solid var(--color-neutral-200);
border-top: none;
max-height: 240px;
overflow-y: auto;
z-index: 50;
list-style: none;
margin: 0;
padding: 0;
display: none;
}
.autocomplete-list.active {
display: block;
}
.autocomplete-list li {
padding: 6px 10px;
font-size: var(--font-size-md);
cursor: pointer;
text-transform: none;
}
.autocomplete-list li.highlight,
.autocomplete-list li:hover {
background: color-mix(in srgb, var(--color-accent-soft) 54%, var(--color-surface-raised));
color: var(--color-text-strong);
}
.ac-suggestion-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.ac-suggestion-name {
flex: 1;
min-width: 0;
}
.suggestion-recent-badge {
font-size: var(--font-size-xxs);
padding: 0;
color: var(--color-text-muted);
border: 0;
background: transparent;
white-space: nowrap;
text-transform: none;
}
.mic-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.mic-btn {
align-items: center;
background-color: var(--color-text-strong);
background-image:
radial-gradient(rgba(21, 16, 13, 0.1) 1px, transparent 1px),
linear-gradient(rgba(255, 245, 210, 0.08), rgba(0, 0, 0, 0.05));
background-size:
6px 6px,
auto;
border: var(--border-width) solid var(--color-text-strong);
border-radius: var(--radius-sharp);
box-shadow: var(--shadow-firm);
color: var(--color-text-inverse);
cursor: pointer;
display: inline-flex;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-title);
justify-content: center;
letter-spacing: 0.04em;
line-height: 1;
min-height: var(--control-height-compact);
padding: 4px 10px;
text-transform: lowercase;
transition:
transform var(--motion-fast) steps(2, end),
box-shadow var(--motion-fast) steps(2, end),
background-color var(--motion-fast),
filter var(--motion-fast);
}
.mic-btn:hover {
box-shadow: var(--press-shadow);
filter: brightness(1.05);
transform: translate(var(--press-shift), var(--press-shift));
}
.mic-btn:active {
box-shadow: 0 0 0 var(--color-shadow);
filter: brightness(0.94);
transform: translate(4px, 4px);
}
.mic-btn:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.mic-btn.on {
background-color: var(--color-danger);
border-color: var(--color-text-strong);
color: var(--color-text-inverse);
}
.mic-status {
font-size: var(--font-size-xs-plus);
color: var(--color-neutral-350);
}
.mic-status strong {
color: var(--color-neutral-black);
}
.autoadd-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--font-size-xs-plus);
color: var(--color-neutral-350);
cursor: pointer;
text-transform: lowercase;
}
.autoadd-toggle input {
accent-color: var(--color-neutral-black);
cursor: pointer;
}
.vocab-hint {
font-size: var(--font-size-xxs);
color: var(--color-neutral-250);
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.vocab-hint strong {
color: var(--color-neutral-400);
font-weight: 400;
}
.add-preview {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-line-faint);
}
.add-preview.active {
display: flex;
}
.add-editor {
display: none;
flex-direction: column;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-line-faint);
}
.add-editor.active {
display: flex;
}
.printing-picker {
display: none;
flex-direction: column;
gap: 4px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-line-faint);
}
.printing-picker.active {
display: flex;
}
.detail-printing-picker {
display: flex;
margin-top: 12px;
padding-top: 12px;
}
.printing-filter-input {
width: 100%;
border: 1px solid var(--color-status-neutral-border);
background: var(--color-neutral-white);
padding: 6px 8px;
font: inherit;
font-size: var(--font-size-sm);
text-transform: lowercase;
outline: none;
}
.printing-filter-input:focus {
border-color: var(--color-neutral-black);
}
.printing-list-caption {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-bottom: 2px;
text-transform: none;
}
.printing-list-caption .truncate-hint {
color: var(--color-warn-text-gold);
}
.printing-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--color-line-faint);
border-radius: var(--radius-tight);
background: var(--color-neutral-white);
}
.printing-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-bottom: 1px solid var(--color-line-faint);
cursor: pointer;
font-size: var(--font-size-sm);
line-height: 1.2;
}
.printing-row:last-child {
border-bottom: none;
}
.printing-row:hover {
background: var(--color-surface-beige-soft);
}
.printing-row:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.printing-row.selected {
background: var(--color-warn-bg-cream);
box-shadow: inset 3px 0 0 var(--color-neutral-black);
}
.printing-row .set-icon {
flex-shrink: 0;
margin-right: 0;
}
.printing-set-code {
font-weight: 500;
text-transform: uppercase;
min-width: 38px;
}
.printing-set-name {
color: var(--color-text-muted);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: none;
}
.printing-cn {
color: var(--color-text-muted);
min-width: 38px;
text-align: right;
}
.printing-owned-badge {
font-size: var(--font-size-xxs);
padding: 1px 5px;
border-radius: var(--radius-tight);
background: var(--color-tag-amber-bg);
color: var(--color-tag-amber-text);
border: 1px solid var(--color-tag-amber-line);
white-space: nowrap;
text-transform: none;
}
.printing-price-badge {
font-size: var(--font-size-xxs);
padding: 1px 5px;
border-radius: var(--radius-tight);
background: var(--color-tag-blue-bg);
color: var(--color-tag-blue-text);
border: 1px solid var(--color-tag-blue-line);
white-space: nowrap;
text-transform: none;
}
.printing-year {
color: var(--color-text-muted);
min-width: 36px;
text-align: right;
}
.field-hint {
margin-top: 4px;
font-size: var(--font-size-xxs);
color: var(--color-warn-text-deep);
line-height: 1.25;
text-transform: none;
}
.field-hint.hidden {
display: none;
}
.add-preview-img-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
position: relative;
}
.add-preview-img {
width: 140px;
max-width: 100%;
border-radius: var(--radius-card);
align-self: center;
}
.add-preview-img.is-loading {
opacity: 0.35;
}
.add-preview-img-wrap.loading::after {
animation: vui-spin 0.5s linear infinite;
border: 2px solid var(--color-neutral-200);
border-radius: 50%;
border-top-color: var(--color-neutral-black);
content: '';
height: 18px;
left: 50%;
margin-left: -9px;
margin-top: -9px;
pointer-events: none;
position: absolute;
top: 50%;
width: 18px;
}
.add-preview-info {
flex: 1;
min-width: 0;
}
.add-preview-name {
font-size: var(--font-size-xl);
margin-bottom: 2px;
text-align: left;
text-transform: none;
}
.add-preview-meta {
font-size: var(--font-size-xs-plus);
color: var(--color-text-muted);
margin-bottom: 10px;
text-transform: none;
}
.add-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 10px;
margin-bottom: 10px;
}
.add-fields .field {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.add-fields .field-finish,
.add-fields .field-condition,
.add-fields .field-language,
.add-fields .field-qty {
grid-column: span 1;
}
.add-fields .field-qty {
max-width: 80px;
}
.add-fields .field-location {
grid-column: 1 / -1;
}
.add-fields label {
font-size: var(--font-size-xs);
letter-spacing: 0.03em;
color: var(--color-text-muted);
}
.add-fields input,
.add-fields select {
background: transparent;
border: none;
border-bottom: 1px solid var(--color-neutral-black);
padding: 4px 2px;
font-size: var(--font-size-base);
font-family: inherit;
text-transform: lowercase;
outline: none;
border-radius: var(--radius-square);
-webkit-appearance: none;
}
.add-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.danger-zone {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed var(--color-line-faint);
text-align: right;
}
/* Import source choices (BEN-984 criterion 4) — lead with what the user has,
not parser vocabulary; format detail only shows once a source is picked. */
.import-source-choices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.import-surface-fields {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.import-source-btn {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
background: var(--color-surface);
color: var(--color-text-strong);
padding: 10px 12px;
cursor: pointer;
text-align: left;
transition: all var(--motion-base);
}
.import-source-btn:hover {
border-color: var(--color-text-strong);
}
.import-source-btn.active {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.import-source-btn-title {
font-weight: 600;
}
.import-source-btn-hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.import-source-panel {
margin-bottom: 8px;
}
.import-provider-url {
width: 100%;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-sharp);
padding: 8px;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
background: var(--color-surface);
color: var(--color-text-strong);
margin-bottom: 8px;
}
.import-provider-url:focus {
border-color: var(--color-text-strong);
outline: none;
}
/* "what can I import?" disclosure (BEN-984 criterion 5) */
.import-disclosure {
border-top: var(--border-width) solid var(--color-line);
padding-top: 8px;
margin-top: 4px;
}
.import-disclosure summary {
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.import-disclosure-body {
margin-top: 8px;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.import-disclosure-body p {
margin: 0 0 6px;
}
.import-disclosure-label {
color: var(--color-text-strong);
}
.import-disclosure-example {
background: var(--color-line-faint);
border-radius: var(--radius-tight);
padding: 6px 8px;
margin: 0 0 6px;
font-family: var(--font-mono);
font-size: 0.95em;
white-space: pre-wrap;
text-transform: none;
}
/* Native dialog gives the React restore flow focus trapping and an inert backdrop. */
.archive-restore-dialog {
margin: auto;
width: min(34rem, calc(100vw - 2rem));
max-height: calc(100dvh - 2rem);
box-sizing: border-box;
overflow-y: auto;
padding: 1.5rem;
border: 1px solid var(--color-text-muted);
border-radius: var(--radius-lg, 12px);
background: var(--color-surface-raised);
color: var(--color-text);
font: inherit;
}
.archive-restore-dialog::backdrop {
background: rgb(0 0 0 / 35%);
}
.archive-restore-dialog h2 {
margin: 0 0 0.5rem;
}
.archive-restore-date {
color: var(--color-text-muted);
}
.archive-restore-counts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.archive-restore-counts dt {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.archive-restore-counts dd {
margin: 0.25rem 0 0;
font-size: 1.5rem;
font-weight: 600;
}
.archive-restore-confirmation {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-top: 1.5rem;
}
.archive-restore-confirmation input {
margin-top: 0.2rem;
flex: 0 0 auto;
}
.archive-restore-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
.archive-restore-error {
color: var(--color-error-text, #9b2424);
}
.archive-restore-status {
min-height: 1.5em;
font-size: 0.85rem;
}
/* Keep destination labels readable while the selected pill retains its outline. */
.add-editor .location-pill-btn .loc-pill,
.add-editor .loc-type-radio .loc-pill {
opacity: 1;
}
/* Biblioplex: responsive. Cascade order is declared in ../styles.css. */
/* Responsive overrides */
@media (max-width: 768px) {
.deck-view-wrap {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.deck-preview-panel {
display: none !important;
}
}
/* Below ~900px: collapse the border-frame to a single column */
@media (max-width: 900px) {
.sidebar-collapsed-trigger {
display: none !important;
}
.sidebar-footer {
display: none !important;
}
html,
body {
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
body {
overflow-x: hidden;
overflow-y: visible;
}
/* Prevent iOS Safari auto-zoom: any focusable input must compute to >=16px.
Listed offenders out-specify a bare input[type] rule, so they are named
here too; each selector keeps its own specificity and wins on source order. */
input[type='text'],
input[type='search'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='url'],
textarea,
select,
.sidebar-section .search-wrap .search-input,
.controls .search-input,
.search-wrap .search-input,
.loc-field .loc-name-input,
.bulk-loc-field .loc-name-input,
.controls .filter-select,
#filterFormat .ms-trigger,
#detailQty,
#mcpChatInput {
font-size: max(16px, 1em);
}
.app-shell,
body.view-list .app-shell,
body.view-grid .app-shell,
body.view-locations .app-shell,
body.view-deck .app-shell,
body.left-sidebar-collapsed .app-shell,
body.view-collection .app-shell,
body.view-list .app-shell,
body.view-grid .app-shell,
body.view-locations .app-shell,
body.view-deck .app-shell {
height: auto;
min-height: 100vh;
grid-template-rows: auto minmax(0, 1fr) auto;
/* Single full-width column for main at mobile — sidebar + right detail pane
overlay (off-canvas), they must not reserve grid columns. Was gated on
left-sidebar-collapsed, so the non-collapsed state kept the desktop 3-col
grid (areas said 1 col, columns said 3) and squished main into ~140px.
!important because desktop var()-based column rules win on source order. */
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
'header'
'main'
'footer';
}
/* The side rails use grid-area: left / right, which the single-column area
template above no longer defines — so as in-flow grid items they spawned
phantom implicit columns and crushed main. At mobile they become off-canvas
drawers (fixed, out of grid flow), driven by the drawer-open classes the JS
toggles at narrow widths — independent of the desktop collapse preference,
which is what the agent's rules were (wrongly) gated on. */
body:is(.view-collection, .view-list, .view-grid, .view-locations, .view-deck) #appLeft,
body:is(.view-collection, .view-list, .view-grid, .view-locations, .view-deck) .app-right {
position: fixed;
top: 0;
height: 100dvh;
z-index: 170;
}
body:is(.view-collection, .view-list, .view-grid, .view-locations, .view-deck) #appLeft {
left: 0;
transform: translateX(-100%);
}
body:is(.view-collection, .view-list, .view-grid, .view-locations, .view-deck) .app-right {
right: 0;
transform: translateX(100%);
}
body.left-drawer-open #appLeft {
transform: translateX(0) !important;
}
body.right-drawer-open .app-right {
transform: translateX(0);
}
body.view-grid .app-shell,
body.left-sidebar-collapsed.view-grid .app-shell {
grid-template-rows: auto minmax(0, 1fr) 0;
}
.app-header {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 8px 14px;
height: auto;
min-height: 50px;
}
.app-header h1 {
font-size: var(--font-size-xl);
}
/* BEN-520: on mobile the filters FAB opens the sidebar drawer (backdrop tap /
Escape close it) — no edge resizing, hide the strip. */
.sidebar-resize-handle {
display: none;
}
.app-primary-nav.mobile-bottom-nav {
align-items: stretch;
backdrop-filter: blur(16px) saturate(140%);
background: color-mix(in srgb, var(--color-bg) 96%, transparent);
border-top: var(--border-width) solid var(--color-line);
bottom: 0;
box-shadow: 0 -8px 24px rgba(45, 34, 27, 0.06);
display: grid;
gap: 4px;
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
left: 0;
min-height: calc(var(--vui-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
position: fixed;
right: 0;
z-index: var(--vui-z-fab);
}
.app-header-views {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-self: stretch;
width: 100%;
}
.app-header-views .toggle-view,
.app-primary-nav .sync-chip {
border: 0;
border-radius: var(--radius-soft);
box-shadow: none;
flex-direction: column;
font-size: var(--font-size-xs);
gap: 3px;
min-height: var(--vui-touch-target);
padding: 5px 6px;
}
.app-header-views .toggle-view + .toggle-view {
margin-left: 0;
}
.app-header-views .view-icon,
.app-primary-nav .sync-dot {
height: 18px;
margin: 0;
width: 18px;
}
.app-header-views .toggle-view.active,
.app-header-views .toggle-view[aria-pressed='true'] {
background: var(--color-accent-soft);
border-color: transparent;
color: var(--color-accent);
}
.sync-account-slot {
align-items: stretch;
justify-content: stretch;
justify-self: stretch;
min-width: 0;
}
.sync-account-slot .sync-chip {
justify-content: center;
width: 100%;
}
.sync-account-slot .sync-label {
display: block;
font-size: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sync-account-slot .sync-label::after {
content: 'account';
font-size: var(--font-size-xs);
}
.sync-menu {
bottom: calc(100% + 8px);
left: auto;
right: 0;
top: auto;
}
.app-left {
border-bottom: 0;
border-right: 1px solid var(--color-line);
box-shadow: var(--shadow-drawer-side-right);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
left: 0;
max-width: 100vw;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
pointer-events: none;
position: fixed;
top: 0;
bottom: 0;
transform: translateX(-100%);
transition:
transform var(--vui-motion-drawer) var(--vui-ease-drawer),
opacity var(--vui-motion-exit) var(--vui-ease-out),
box-shadow var(--vui-motion-base) ease;
width: min(420px, 100vw);
z-index: 50;
}
body.left-sidebar-collapsed .app-left {
min-width: 0;
opacity: 1;
padding: 0;
pointer-events: none;
transform: translateX(-100%);
width: min(420px, 100vw);
}
body.left-drawer-open .app-left {
pointer-events: auto;
transform: translateX(0);
}
.mobile-filter-sheet-head {
display: flex;
flex: 0 0 auto;
min-height: 56px;
padding-left: 16px;
padding-right: 12px;
top: 0;
z-index: 8;
}
.mobile-filter-sheet-close {
min-height: var(--vui-touch-target);
padding-left: 14px;
padding-right: 14px;
}
.mobile-sidebar-tabs {
display: grid;
flex: 0 0 auto;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 10px 16px 0;
position: sticky;
top: 56px;
z-index: 7;
}
.mobile-sidebar-tabs .segment-btn {
min-height: var(--vui-touch-target);
}
.app-left[data-mobile-tab='browse'] #collectionFiltersSection,
.app-left[data-mobile-tab='browse'] .sidebar-view-settings,
.app-left[data-mobile-tab='browse'] .sidebar-grid-view-settings,
.app-left[data-mobile-tab='filters'] #collectionSearchSection,
.app-left[data-mobile-tab='filters'] #collectionScopeSection,
.app-left[data-mobile-tab='filters'] .sidebar-view-settings,
.app-left[data-mobile-tab='filters'] .sidebar-grid-view-settings,
.app-left[data-mobile-tab='view'] #collectionSearchSection,
.app-left[data-mobile-tab='view'] #collectionScopeSection,
.app-left[data-mobile-tab='view'] #collectionFiltersSection {
display: none;
}
.app-left .sidebar-section {
flex: 0 0 auto;
min-width: 0;
padding: 14px 16px 0;
width: 100%;
}
.app-left .sidebar-section:last-of-type {
padding-bottom: 16px;
}
.app-left .search-input,
.app-left .ms-trigger,
.app-left .clear-filters-btn,
.app-left .scope-option,
.app-left .collection-display-controls .segment-btn,
.app-left .collection-column-settings-panel button {
min-height: var(--vui-touch-target);
}
.app-left .search-syntax-link {
align-items: center;
display: inline-flex;
min-height: var(--vui-touch-target);
}
.app-left .history-actions button,
.app-left .history-list .icon-btn {
min-height: var(--vui-touch-target);
min-width: var(--vui-touch-target);
}
.app-center {
min-width: 0;
overflow-x: hidden;
overflow-y: visible;
padding: 14px 14px calc(132px + env(safe-area-inset-bottom, 0px));
width: 100%;
}
/* List view zeroes app-center padding at higher specificity (see base rule),
so it needs its own bottom clearance for the fixed FAB row. */
body.view-list .app-center {
padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}
.mobile-collection-toolbar {
display: none;
}
body.view-list:not(.share-mode) .mobile-collection-toolbar {
display: flex;
justify-content: flex-end;
}
.mobile-filter-trigger {
gap: 6px;
min-height: var(--vui-touch-target);
}
.mobile-filter-trigger svg {
height: 16px;
width: 16px;
}
.bulk-bar {
bottom: calc(12px + var(--app-footer-h));
max-width: calc(100vw - 16px);
}
.bulk-edit-panel {
bottom: calc(12px + var(--app-footer-h) + 52px + 8px);
max-height: calc(100vh - 24px - var(--app-footer-h) - 52px - 8px);
width: calc(100vw - 16px);
}
body.view-grid .app-center,
body.view-grid #collectionSection {
height: auto;
min-height: 0;
overflow: visible;
}
.app-right {
border-left: none;
border-top: 1px solid var(--color-neutral-black);
bottom: 0;
box-shadow: var(--shadow-drawer-side);
display: none;
max-width: 100vw;
overflow-y: auto;
padding: 14px;
position: fixed;
right: 0;
top: 0;
width: min(480px, 100vw);
z-index: 50;
}
.app-right-close {
align-items: center;
align-self: flex-end;
background: transparent;
border: 1px solid var(--color-neutral-200);
color: var(--color-neutral-500);
cursor: pointer;
display: inline-flex;
font: inherit;
height: var(--vui-touch-target);
justify-content: center;
margin-bottom: 8px;
min-width: var(--vui-touch-target);
padding: 0 10px;
position: sticky;
top: 0;
z-index: 2;
}
.app-right-close:hover,
.app-right-close:focus-visible {
border-color: var(--color-neutral-black);
color: var(--color-neutral-black);
outline: none;
}
.app-right details.add-details,
.app-right details.import-details {
background: transparent;
border: 0;
margin: 0;
padding: 0;
}
.app-right details.add-details summary,
.app-right details.import-details summary {
border-bottom: 1px solid var(--color-status-neutral-border);
font-size: var(--font-size-xl);
padding: 0 0 10px;
}
.app-right details.add-details .details-body,
.app-right details.import-details .details-body {
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.add-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
}
.add-tab {
min-height: var(--vui-touch-target);
padding: 8px 6px;
}
.add-tab span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-scan-handoff {
display: none;
}
.card-scan-link-row {
grid-template-columns: 1fr;
}
.card-scan-stage {
max-height: 52dvh;
}
.card-scan-actions .btn {
min-height: var(--vui-touch-target);
}
.card-scan.is-paired-phone .card-scan-privacy::before {
color: var(--color-status-success-text);
content: 'connected to your computer · ';
font-weight: 600;
}
.name-search input,
.printing-filter-input {
min-height: var(--vui-touch-target);
padding: 9px 4px;
}
.add-empty-examples {
gap: 0;
}
.add-empty-examples li {
border-left: 0;
padding-left: 0;
}
.add-empty-example {
align-items: center;
display: inline-flex;
min-height: var(--vui-touch-target);
padding: 0 8px;
}
.autocomplete-list li,
.printing-row {
min-height: 42px;
padding: 10px 9px;
}
.add-preview.active {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: start;
gap: 12px;
}
.add-preview-img {
width: 112px;
}
.add-preview-meta {
margin-bottom: 4px;
}
.printing-list {
max-height: min(38vh, 320px);
}
.add-fields,
.detail-form {
grid-template-columns: 1fr;
}
.add-fields .field-finish,
.add-fields .field-condition,
.add-fields .field-language,
.add-fields .field-qty,
.add-fields .field-location,
.add-fields .field-full {
grid-column: 1;
}
.add-fields .field-qty,
#detailQty {
max-width: 96px;
}
.condition-toggle span,
.language-toggle span {
align-items: center;
display: flex;
justify-content: center;
min-height: 44px;
}
/* BEN-500: 44x44 minimum touch targets on mobile (Apple HIG / WCAG 2.5.5). */
.icon-btn {
min-height: 44px;
min-width: 44px;
}
.segment-btn {
min-height: 44px;
}
.settings-toggle {
min-height: 44px;
}
.add-actions {
background: var(--color-neutral-white);
border-top: 1px solid var(--color-status-neutral-border);
bottom: 0;
margin-top: 14px;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
position: sticky;
z-index: 3;
}
.add-actions .btn,
.drawer-actions .btn {
flex: 1 1 0;
min-height: 42px;
}
.detail-drawer {
height: 100dvh;
width: 100vw;
}
/* History opens as a bottom sheet on mobile rather than a full-screen slide-in
— it is a glance surface, not a form. */
.history-panel {
border-left: 0;
border-top: var(--border-width) solid var(--color-text-strong);
border-radius: var(--radius-soft) var(--radius-soft) 0 0;
height: 72dvh;
top: auto;
bottom: 0;
transform: translateY(100%);
width: 100vw;
}
.history-panel.visible {
transform: translateY(0);
}
.history-panel .drawer-body {
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.drawer-head {
align-items: center;
padding: 12px 14px;
}
.drawer-head .rune-close {
min-height: var(--vui-touch-target);
min-width: var(--vui-touch-target);
}
.drawer-body {
display: flex;
flex-direction: column;
padding: 12px 14px 0;
}
#detailForm {
display: contents;
}
.detail-stack-panel {
margin-bottom: 12px;
order: 2;
}
.detail-price-card {
order: 1;
}
.detail-other-copies {
order: 3;
}
.detail-card-decks {
order: 4;
}
.detail-lifecycle {
order: 5;
}
#detailImageWrap {
align-self: center;
order: 6;
width: 100%;
}
.detail-advanced {
order: 7;
}
.detail-quick-btn,
.detail-nav-btn {
min-height: var(--vui-touch-target);
}
.detail-nav {
padding: 8px 14px;
}
.detail-price a,
.detail-advanced > summary {
align-items: center;
display: inline-flex;
min-height: var(--vui-touch-target);
}
.drawer-actions {
padding-left: 14px;
padding-right: 14px;
}
.drawer-image-frame,
.drawer-placeholder {
max-width: 220px;
}
body.view-list .app-right,
body.view-grid .app-right,
body.view-locations .app-right,
body.view-deck .app-right {
display: none;
}
body.view-list.right-drawer-open .app-right,
body.view-grid.right-drawer-open .app-right,
body.view-deck.right-drawer-open .app-right {
display: flex;
border-left: 1px solid var(--color-neutral-black);
border-top: 0;
bottom: 0;
height: 100dvh;
top: 0;
width: 100vw;
}
body .app-right-layer .app-right.ui-drawer {
bottom: 0;
height: 100dvh;
max-width: 100vw;
top: 0;
width: 100vw;
}
.app-right-layer .app-right-drawer-handle {
margin: -14px -14px 2px;
top: -14px;
}
body.view-deck .app-left,
body.view-deck:not(.right-drawer-open) .app-right {
display: none;
}
.deck-view-wrap,
.deck-hero,
.deck-content-grid,
.deck-dashboard,
.deck-metadata-form,
.deck-export-form,
.deck-meta-strip {
grid-template-columns: 1fr;
}
.deck-workspace-controls {
background: var(--color-surface-beige-pale);
position: sticky;
top: 0;
z-index: 12;
}
.deck-workspace-root {
min-width: 0;
order: 1;
}
.deck-side-column {
height: auto;
margin-top: 18px;
order: 2;
position: static;
}
.deck-workspace-nav-row {
align-items: center;
padding: 8px;
}
.deck-workspace-nav {
display: none;
}
.deck-mobile-mode-control {
min-width: 0;
width: auto;
}
.deck-mobile-mode-control select {
min-width: 0;
}
.deck-build-mode-toggle {
margin-left: auto;
}
.deck-context-controls {
align-items: stretch;
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 8px;
}
.deck-toolbar-field {
align-items: stretch;
display: grid;
gap: 4px;
}
.deck-toolbar-field select {
min-width: 0;
width: 100%;
}
.deck-view-settings-wrap {
grid-column: 1 / -1;
}
.deck-view-settings-trigger {
justify-content: center;
width: 100%;
}
.deck-display-menu {
left: 0;
min-width: 0;
right: 0;
width: auto;
}
.deck-hero-side {
min-width: 0;
}
.deck-hero-actions {
justify-content: flex-start;
}
.deck-hero-actions .btn {
flex: 1 1 130px;
}
.deck-metadata-description {
grid-column: 1;
}
.deck-metadata-actions {
justify-content: stretch;
}
.deck-metadata-actions .btn {
flex: 1 1 auto;
}
.deck-export-actions {
justify-content: stretch;
}
.deck-export-actions .btn {
flex: 1 1 auto;
}
.deck-preview-panel {
display: none;
}
.deck-columns {
--deck-card-w: minmax(130px, 1fr);
grid-template-columns: repeat(var(--deck-logical-columns, 1), minmax(130px, 1fr));
}
.list-view.active {
max-width: 100%;
overflow-x: auto;
}
body.view-list .list-view.active,
body.view-grid .grid-pages-list {
overflow-x: visible;
}
body.view-list .list-view.active table,
body.view-list .list-view.active thead,
body.view-list .list-view.active tbody,
body.view-grid .grid-list-table,
body.view-grid .grid-list-table thead,
body.view-grid .grid-list-table tbody {
display: block;
min-width: 0;
width: 100%;
}
/* Neutralize the JS-set inline --collection-table-real-width (desktop column
sum) so the reflowed list table fills the viewport instead of overflowing.
#listView > table is an ID rule; match its specificity to win on source order. */
#listView > table {
min-width: 0;
}
body.view-list .list-view.active thead,
body.view-grid .grid-list-table thead {
display: none;
}
/* BEN-523: condensed mobile list rows for ALL list views (not just shares) —
tighter gaps/padding so many rows fit. (Location stays visible here; only
share mode hides it, since a share is scoped to one container.) */
body.view-list .list-view.active tbody,
body.view-grid .grid-list-table tbody {
display: grid;
gap: 4px;
}
body.view-list .list-view.active tbody tr,
body.view-grid .grid-list-table tbody tr {
align-items: center;
background: var(--color-surface-raised);
border: 1px solid var(--color-status-neutral-border);
display: flex;
flex-wrap: wrap;
gap: 3px 8px;
min-height: 58px;
padding: 6px 8px;
}
body.view-list .list-view.active tbody tr:hover,
body.view-grid .grid-list-table tbody tr:hover {
background: var(--color-surface-raised);
}
/* BEN-666: the zero-results placeholder isn't a data row — don't give it the
card-style row border used by the mobile condensed layout. */
body.view-list .list-view.active tbody tr.collection-zero-results,
body.view-grid .grid-list-table tbody tr.collection-zero-results {
border: 0;
}
body.view-list .list-view.active td,
body.view-grid .grid-list-table td {
display: block;
padding: 0;
}
body.view-list .list-view.active td[data-column-id],
body.view-grid .grid-list-table td[data-column-id] {
min-width: 0;
width: auto;
}
body.view-list .list-view.active .col-check {
align-self: center;
flex: 0 0 auto;
order: 0;
width: auto;
}
body.view-grid .grid-list-table .col-check {
display: none;
}
body.view-list .list-view.active .card-name-cell,
body.view-grid .grid-list-table .card-name-cell {
align-items: center;
display: flex;
flex: 1 1 calc(100% - 96px);
gap: 8px;
min-width: 0;
order: 1;
}
body.view-list .list-view.active .card-name-thumb,
body.view-grid .grid-list-table .card-name-thumb {
display: block;
flex: 0 0 auto;
height: 42px;
margin: 0;
width: 30px;
}
body.view-list .list-view.active .card-name-button,
body.view-grid .grid-list-table .card-name-button {
align-items: center;
display: flex;
font-size: var(--font-size-md);
min-height: var(--vui-touch-target);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
text-align: left;
white-space: nowrap;
}
body.view-list .list-view.active .price-cell,
body.view-grid .grid-list-table .price-cell {
color: var(--color-neutral-black);
font-size: var(--font-size-md);
font-weight: 600;
margin-left: auto;
order: 2;
}
body.view-list .list-view.active .set-cell,
body.view-list .list-view.active .cn-cell,
body.view-list .list-view.active .finish-cell,
body.view-list .list-view.active .rarity-cell,
body.view-list .list-view.active .condition-cell,
body.view-list .list-view.active .qty-cell,
body.view-grid .grid-list-table .set-cell,
body.view-grid .grid-list-table .cn-cell,
body.view-grid .grid-list-table .finish-cell,
body.view-grid .grid-list-table .rarity-cell,
body.view-grid .grid-list-table .condition-cell,
body.view-grid .grid-list-table .qty-cell {
flex: 0 1 auto;
font-size: var(--font-size-xs);
order: 3;
}
body.view-list .list-view.active .location-cell,
body.view-grid .grid-list-table .location-cell {
flex: 0 1 auto;
margin-top: 3px;
order: 4;
}
body.view-list .list-view.active .tags-cell,
body.view-grid .grid-list-table .tags-cell {
flex: 1 1 auto;
order: 5;
}
body.view-list .list-view.active .col-check {
align-items: center;
display: flex;
justify-content: center;
min-height: var(--vui-touch-target);
min-width: 28px;
}
body.view-list .list-view.active .row-check {
height: 20px;
margin: 0;
width: 20px;
}
body.view-list .list-view.active .row-tag-input,
body.view-grid .grid-list-table .row-tag-input {
min-height: 30px;
}
/* BEN-516/BEN-523: the condensed mobile row density now applies to all list
views (above). Share mode additionally drops the per-row location, since a
share is scoped to one container and the location repeats on every row. */
body.share-mode.view-list .list-view.active .location-cell,
body.share-mode.view-grid .grid-list-table .location-cell {
display: none;
}
.grid-actions {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
.grid-actions-primary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
width: 100%;
}
.grid-actions .segment-btn {
flex: 1 1 0;
min-height: 44px;
}
.grid-price-toggle {
height: var(--vui-touch-target);
min-height: var(--vui-touch-target);
}
.grid-sort-field {
min-width: 0;
}
.grid-sort-field select,
.grid-search-input,
.grid-filter-trigger {
height: var(--vui-touch-target);
}
.grid-sort-field select {
min-width: 0;
width: 100%;
}
.grid-search-input {
grid-column: 1 / -1;
max-width: none;
width: 100%;
}
.grid-summary {
flex: 1 1 100%;
margin-left: 0;
text-align: right;
}
.grid-filter-menu[open] .grid-explore-controls {
left: 0;
right: auto;
width: min(220px, calc(100vw - 44px));
}
.grid-surface {
padding: 12px;
}
.grid-page {
gap: 10px;
width: min(var(--grid-page-width, 760px), calc(100vw - 48px));
}
.grid-nav {
gap: 8px;
}
.grid-nav .btn {
flex: 1 1 96px;
min-height: 40px;
}
.location-card {
min-height: 92px;
}
body.view-list.right-drawer-open .app-right-backdrop,
body.view-grid.right-drawer-open .app-right-backdrop,
body.view-deck.right-drawer-open .app-right-backdrop,
body.left-drawer-open .app-right-backdrop {
display: block;
z-index: 130;
}
.app-right-layer.open .app-right-backdrop.ui-drawer-backdrop {
z-index: 40;
}
.fab-cluster {
align-items: center;
bottom: calc(var(--vui-mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
max-width: calc(100vw - 32px);
}
.fab-cluster > .mobile-utility-menu {
display: block;
}
.fab-cluster > .mobile-utility-menu > summary {
display: inline-flex;
}
.fab-cluster > .mobile-utility-menu > .mobile-utility-menu-panel {
bottom: calc(100% + 8px);
display: grid;
}
.fab-cluster > .mobile-utility-menu:not([open]) > .mobile-utility-menu-panel {
display: none;
}
.mobile-utility-trigger,
.mobile-utility-menu-panel .fab-btn-primary {
min-height: var(--vui-touch-target);
}
.mobile-history-action {
display: flex;
}
.mobile-utility-menu-panel .fab-btn {
border: 0;
border-bottom: var(--border-width) solid var(--color-line);
border-radius: 0;
box-shadow: none;
min-height: var(--vui-touch-target);
width: 100%;
}
.fab-cluster > .mobile-utility-menu .mobile-utility-menu-item {
min-height: var(--vui-touch-target);
}
.mcp-chat-widget {
bottom: calc(106px + env(safe-area-inset-bottom, 0px));
height: min(
var(--mcp-chat-height, 430px),
calc(100dvh - 132px - env(safe-area-inset-bottom, 0px))
);
max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px));
min-width: calc(100vw - 24px);
right: 12px;
resize: none;
width: calc(100vw - 24px);
}
.mcp-chat-resize-handle {
display: none;
}
.mcp-chat-widget.is-positioned {
left: var(--mcp-chat-left);
top: var(--mcp-chat-top);
right: auto;
bottom: auto;
}
.mcp-chat-form {
grid-template-columns: 1fr;
}
.mcp-chat-form .btn {
min-height: var(--vui-touch-target);
}
body.left-drawer-open .fab-cluster {
display: none;
}
/* BEN-568: keyboard-shortcut chips mean nothing on narrow viewports (the
hover:none block covers wide touch screens). */
.fab-shortcut,
.btn-shortcut {
display: none;
}
.fab-btn.mobile-filter-fab {
display: none;
}
body.view-deck .fab-btn.mobile-filter-fab,
body.share-mode .fab-btn.mobile-filter-fab {
display: none;
}
body.view-decks-home .fab-cluster,
body.view-storage-home .fab-cluster {
display: flex;
}
body.view-decks-home .fab-btn[data-fab-target],
body.view-storage-home .fab-btn[data-fab-target] {
display: none;
}
/* The bottom nav is fixed over the shell, so the footer needs to clear it or
the totals + history ticker sit underneath it and are unreachable. */
.app-footer {
grid-template-rows: auto;
min-height: 0;
padding-bottom: calc(var(--vui-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
}
.app-footer .app-totals-strip {
justify-content: flex-start;
padding: 8px 14px;
}
/* Narrow screens keep the ticker's controls but drop its prose — the
spelled-out totals already claim the width. It takes its own left-aligned
row so the FAB cluster (which floats bottom-right) can't sit on top of it. */
.app-footer {
flex-wrap: wrap;
}
.app-history-ticker {
border-bottom: 0;
flex: 1 0 100%;
justify-content: flex-start;
padding: 0 14px 8px;
}
.app-history-ticker .ticker-label,
.app-history-ticker .ticker-summary {
display: none;
}
.app-history-ticker .ticker-summary + .ticker-action::before {
content: none;
margin-right: 0;
}
.app-footer .app-about-link {
padding: 8px 14px 8px 0;
}
.settings-popover {
left: var(--settings-left, 12px);
right: auto;
width: min(280px, calc(100vw - 28px));
max-height: calc(100dvh - 80px);
overflow-y: auto;
}
}
/* BEN-986: 600-900px compact table tier. Below 900px the block above flips
the collection table straight to phone card rows — fine at phone widths,
but at 760px those rows stretch edge-to-edge with big dead space and no
real tabular scan. Here the table stays a table: same column model
(`views/collectionTableColumnConfig.js` ids via `data-column-id`, colgroup
from `views/listRowView.js`), just a smaller column subset chosen by task
priority (name / set / price / container). Everything else stays reachable
via the existing row-tap detail drawer. Percentage widths (not px)
guarantee the visible columns can never exceed the table's own width, so
there's no horizontal scroll to fight. Selectors intentionally mirror the
ones above at matching specificity — later in the cascade wins the tie, so
each override lands only in this width band. */
@media (min-width: 600px) and (max-width: 900px) {
body.view-list .list-view.active table,
body.view-grid .grid-list-table {
display: table;
}
body.view-list .list-view.active thead,
body.view-grid .grid-list-table thead {
display: table-header-group;
}
body.view-list .list-view.active thead th,
body.view-grid .grid-list-table thead th {
/* #listView isn't height-bounded below 901px (the page scrolls as one
document — see the comment on the 901px rule above), so a sticky
header here would latch to an unpredictable ancestor. Let it scroll
with the content instead. */
position: static;
}
body.view-list .list-view.active tbody,
body.view-grid .grid-list-table tbody {
display: table-row-group;
}
body.view-list .list-view.active tbody tr,
body.view-grid .grid-list-table tbody tr {
align-items: unset;
background: transparent;
border: 0;
border-bottom: var(--border-width) solid var(--color-line);
display: table-row;
flex-wrap: unset;
gap: 0;
min-height: 0;
padding: 0;
}
body.view-list .list-view.active tbody tr:hover,
body.view-grid .grid-list-table tbody tr:hover {
background: color-mix(in srgb, var(--color-accent-soft) 28%, var(--color-surface-raised));
}
body.view-list .list-view.active tbody tr.row-selected,
body.view-grid .grid-list-table tbody tr.row-selected,
body.view-list .list-view.active tbody tr.row-selected:hover,
body.view-grid .grid-list-table tbody tr.row-selected:hover {
background: var(--color-warn-soft);
}
body.view-list .list-view.active td,
body.view-grid .grid-list-table td {
display: table-cell;
padding: 6px 8px;
}
body.view-list .list-view.active tbody td:not(.col-check):not(.collection-table-filler),
body.view-grid .grid-list-table tbody td:not(.col-check):not(.collection-table-filler) {
padding-top: 7px;
padding-bottom: 5px;
}
body.view-list .list-view.active td.collection-table-filler,
body.view-grid .grid-list-table td.collection-table-filler,
body.view-list .list-view.active th.collection-table-filler,
body.view-grid .grid-list-table th.collection-table-filler {
padding: 0;
width: 0;
}
body.view-list .list-view.active .col-check {
align-items: unset;
display: table-cell;
justify-content: unset;
min-height: 0;
min-width: 0;
text-align: center;
vertical-align: middle;
}
body.view-list .list-view.active .card-name-cell,
body.view-grid .grid-list-table .card-name-cell {
align-items: unset;
display: table-cell;
flex: unset;
gap: 0;
min-width: 128px;
order: unset;
}
body.view-list .list-view.active .card-name-thumb,
body.view-grid .grid-list-table .card-name-thumb {
/* Thumbnails are the phone-card affordance (BEN-524) — a compact table
row uses the plain desktop-style truncated name instead. */
display: none;
}
/* Task-priority column subset: name, set, price, container (+ the always-
present select checkbox). Everything else — cn, finish, rarity,
condition, tags, added, modified, qty — is one tap away in the detail
drawer, not deleted from the data model. One rule hides the , | ,
and | together since all three share `data-column-id`. */
body.view-list .list-view.active [data-column-id='cn'],
body.view-list .list-view.active [data-column-id='finish'],
body.view-list .list-view.active [data-column-id='rarity'],
body.view-list .list-view.active [data-column-id='condition'],
body.view-list .list-view.active [data-column-id='tags'],
body.view-list .list-view.active [data-column-id='added'],
body.view-list .list-view.active [data-column-id='modified'],
body.view-list .list-view.active [data-column-id='qty'],
body.view-grid .grid-list-table [data-column-id='cn'],
body.view-grid .grid-list-table [data-column-id='finish'],
body.view-grid .grid-list-table [data-column-id='rarity'],
body.view-grid .grid-list-table [data-column-id='condition'],
body.view-grid .grid-list-table [data-column-id='tags'],
body.view-grid .grid-list-table [data-column-id='added'],
body.view-grid .grid-list-table [data-column-id='modified'],
body.view-grid .grid-list-table [data-column-id='qty'] {
display: none !important;
}
/* Share mode already drops the location column at phone widths (a share is
scoped to one container, so it repeats on every row) — same call here. */
body.share-mode.view-list .list-view.active [data-column-id='location'],
body.share-mode.view-grid .grid-list-table [data-column-id='location'] {
display: none;
}
/* Percentage widths sum to 100% of the table's own width, so the
visible columns can never add up to more than the viewport — no
horizontal scroll regardless of any desktop drag-resized column widths
(those are px and live in the inline `style` attribute, which these
`!important` rules intentionally out-rank). */
body.view-list
.list-view.active
colgroup[data-collection-table-columns]
col[data-column-id='check'] {
width: 8% !important;
}
/* The grid-mode reference table hides the select checkbox td entirely
(rule above this tier) — collapse its column too, instead of leaving a
blank 8%-wide gap; name/set/price/location fall a little short of 100%
without it and the filler column silently absorbs the remainder. */
body.view-grid
.grid-list-table
colgroup[data-collection-table-columns]
col[data-column-id='check'] {
display: none;
}
body.view-list
.list-view.active
colgroup[data-collection-table-columns]
col[data-column-id='name'],
body.view-grid
.grid-list-table
colgroup[data-collection-table-columns]
col[data-column-id='name'] {
width: 38% !important;
}
body.view-list
.list-view.active
colgroup[data-collection-table-columns]
col[data-column-id='set'],
body.view-grid
.grid-list-table
colgroup[data-collection-table-columns]
col[data-column-id='set'] {
width: 15% !important;
}
body.view-list
.list-view.active
colgroup[data-collection-table-columns]
col[data-column-id='price'],
body.view-grid
.grid-list-table
colgroup[data-collection-table-columns]
col[data-column-id='price'] {
width: 15% !important;
}
body.view-list
.list-view.active
colgroup[data-collection-table-columns]
col[data-column-id='location'],
body.view-grid
.grid-list-table
colgroup[data-collection-table-columns]
col[data-column-id='location'] {
width: 24% !important;
}
}
.mcp-chat-form-actions {
align-items: center;
display: flex;
justify-content: space-between;
gap: 6px;
}
@media (max-width: 600px) {
.app-header {
gap: 6px;
padding: 8px 10px;
}
.app-header h1 {
font-size: var(--font-size-xl);
}
.quick-jump-panel {
/* --header-h is measured + set by the quick-jump open() handler so the
panel clears a header that may grow (e.g. a sync banner). */
padding-top: calc(var(--header-h, 50px) + 12px);
}
.quick-jump-result {
grid-template-columns: 54px minmax(0, 1fr);
}
.app-header-views .toggle-view {
padding-left: 8px;
padding-right: 8px;
}
.sync-chip {
padding-left: 8px;
padding-right: 8px;
}
.app-center {
padding: 10px 12px calc(132px + env(safe-area-inset-bottom, 0px));
--app-center-pad-top: 10px;
}
.app-left {
padding: 0;
}
.app-right {
padding: 10px 12px;
}
.grid,
.grid.grid-small,
.grid.grid-medium {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 6px;
}
.grid.grid-large {
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
gap: 8px;
}
.locations-list {
grid-template-columns: 1fr;
}
.location-card-name {
align-items: flex-start;
}
.location-card-edit-btn,
.location-card-menu-btn {
min-height: 32px;
min-width: 32px;
}
.grid-surface {
padding: 10px;
}
.container-identity-strip {
flex-wrap: wrap;
}
.container-identity-spacer {
display: none;
}
.container-identity-strip .grid-summary {
flex: 1 1 100%;
text-align: left;
}
.grid-page {
gap: 8px;
width: min(var(--grid-page-width, 760px), calc(100vw - 44px));
}
.grid-page-indicator {
min-width: 82px;
}
.deck-columns {
--deck-card-w: 150px;
--deck-name-bar: 26px;
gap: 16px 8px;
}
}
@media (max-width: 520px) {
.app-header {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding-left: 8px;
padding-right: 8px;
}
.app-header h1 {
font-size: var(--font-size-lg);
}
.app-header-views .toggle-view {
font-size: var(--font-size-xs);
min-width: var(--vui-touch-target);
padding: 5px 4px;
}
.app-header-views .view-icon {
margin-right: 0;
}
.sync-account-slot {
min-width: 0;
}
.sync-chip {
gap: 3px;
justify-content: center;
min-width: var(--vui-touch-target);
padding-left: 4px;
padding-right: 4px;
}
.sync-chip .sync-label {
display: block;
}
.settings-toggle {
padding-left: 7px;
padding-right: 7px;
}
}
@media (hover: none) {
.card-actions {
opacity: 1;
pointer-events: auto;
}
.card-caption {
display: none;
}
/* BEN-496/BEN-521: no physical keyboard on touch devices — hide the keyboard
shortcut hints (FAB letter badges and inline ctrl/shift/esc badges). */
.fab-shortcut,
.btn-shortcut {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.app-shell,
.app-left,
.detail-drawer {
transition: none;
}
}
/* Biblioplex: theme tools. Cascade order is declared in ../styles.css. */
/* Theme editor — design tool, mounted on demand. */
.theme-editor {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line-strong);
box-shadow: var(--shadow-overlay);
color: var(--color-text);
display: flex;
flex-direction: column;
font: inherit;
font-size: var(--font-size-sm);
max-height: 80vh;
position: fixed;
right: calc(24px + env(safe-area-inset-right, 0px));
top: 80px;
width: 380px;
z-index: 200;
}
.theme-editor.is-dragging {
user-select: none;
}
.theme-editor-head {
align-items: center;
background: var(--color-text);
color: var(--color-text-inverse);
cursor: grab;
display: flex;
flex-shrink: 0;
gap: var(--space-2);
justify-content: space-between;
padding: var(--space-2) var(--space-3);
}
.theme-editor.is-dragging .theme-editor-head {
cursor: grabbing;
}
.theme-editor-head h2 {
font-size: var(--font-size-md);
font-weight: 400;
margin: 0;
}
.theme-editor-head-actions {
align-items: center;
display: flex;
gap: var(--space-1);
}
.theme-editor-btn {
background: transparent;
border: 1px solid var(--color-on-dark-line);
color: var(--color-text-inverse);
cursor: pointer;
font: inherit;
font-size: var(--font-size-sm);
padding: 2px 8px;
}
.theme-editor-btn:hover {
border-color: var(--color-text-inverse);
}
.theme-editor-btn-primary {
background: var(--color-text-inverse);
color: var(--color-text);
}
.theme-editor-close {
background: transparent;
border: 1px solid var(--color-on-dark-line);
color: var(--color-text-inverse);
cursor: pointer;
font: inherit;
height: 22px;
width: 22px;
padding: 0;
}
.theme-editor-preset-bar {
align-items: center;
background: var(--color-surface-sunken);
border-bottom: var(--border-width) solid var(--color-line);
display: flex;
flex-shrink: 0;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
}
.theme-editor-preset-label {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.theme-editor-preset-select {
flex: 1 1 auto;
}
.theme-editor-dirty {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.theme-editor-dirty.is-dirty {
color: var(--color-warn);
}
.theme-editor-dirty.is-saved {
color: var(--color-success);
}
.theme-editor-body {
overflow-y: auto;
padding: var(--space-2) var(--space-3);
}
.theme-editor-section {
border-bottom: var(--border-width) solid var(--color-line);
padding: var(--space-2) 0;
}
.theme-editor-section:last-child {
border-bottom: none;
}
.theme-editor-section > summary {
color: var(--color-text-muted);
cursor: pointer;
font-size: var(--font-size-xs);
letter-spacing: 0.04em;
list-style: none;
margin-bottom: var(--space-1);
text-transform: uppercase;
}
.theme-editor-section > summary::-webkit-details-marker {
display: none;
}
.theme-editor-grid {
display: grid;
gap: var(--space-1);
}
.theme-editor-row {
align-items: center;
display: grid;
gap: var(--space-2);
grid-template-columns: 130px 1fr;
}
.theme-editor-row-label {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-editor-control {
align-items: center;
display: flex;
gap: var(--space-1);
min-width: 0;
}
.theme-editor-color-picker {
background: none;
border: var(--border-width) solid var(--color-line-strong);
cursor: pointer;
flex-shrink: 0;
height: 22px;
padding: 0;
width: 30px;
}
.theme-editor-text-input,
.theme-editor-select,
.theme-editor-number-input {
background: var(--color-surface-sunken);
border: var(--border-width) solid var(--color-line);
color: var(--color-text);
font: inherit;
font-size: var(--font-size-xs);
min-width: 0;
padding: 2px 6px;
}
.theme-editor-text-input {
flex: 1 1 auto;
}
.theme-editor-text-input-wide {
width: 100%;
}
.theme-editor-number-input {
width: 64px;
}
.theme-editor-unit-suffix {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.theme-editor-export-area {
background: var(--color-surface-sunken);
border: none;
border-top: var(--border-width) solid var(--color-line);
color: var(--color-text);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
height: 140px;
padding: var(--space-2) var(--space-3);
resize: vertical;
width: 100%;
}
/* Theme gallery — full-screen swatch grid for browsing presets. */
.theme-gallery-overlay {
background: rgba(0, 0, 0, 0.55);
display: flex;
flex-direction: column;
inset: 0;
position: fixed;
z-index: 220;
}
.theme-gallery-head {
align-items: center;
background: var(--color-text);
color: var(--color-text-inverse);
display: flex;
flex-shrink: 0;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
}
.theme-gallery-head h2 {
font-size: var(--font-size-base);
font-weight: 400;
margin: 0;
}
.theme-gallery-hint {
color: var(--color-on-dark-text-soft);
font-size: var(--font-size-xs);
margin-left: auto;
}
.theme-gallery-close {
background: transparent;
border: 1px solid var(--color-on-dark-line);
color: var(--color-text-inverse);
cursor: pointer;
font: inherit;
height: 24px;
padding: 0;
width: 24px;
}
.theme-gallery-close:hover {
border-color: var(--color-text-inverse);
}
.theme-gallery-grid {
display: grid;
flex: 1 1 auto;
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
overflow-y: auto;
padding: var(--space-4);
}
/* Each swatch tile establishes its OWN token scope via inline style.
Every selector inside .theme-swatch-body therefore renders with that
tile theme rather than the global theme. */
.theme-swatch {
background: var(--color-bg);
border: var(--border-width) solid var(--color-line-strong);
color: var(--color-text);
cursor: pointer;
display: flex;
flex-direction: column;
font-family: var(--font-body);
font-size: var(--font-size-base);
overflow: hidden;
padding: 0;
text-align: left;
text-transform: var(--text-case);
transition:
transform var(--motion-fast) ease,
box-shadow var(--motion-fast) ease;
}
.theme-swatch:hover {
box-shadow: var(--shadow-overlay);
transform: translateY(-2px);
}
.theme-swatch-label {
align-items: baseline;
background: var(--color-surface-sunken);
border-bottom: var(--border-width) solid var(--color-line);
display: flex;
gap: var(--space-2);
justify-content: space-between;
padding: var(--space-2) var(--space-3);
}
.theme-swatch-label-name {
color: var(--color-text-strong);
font-family: var(--font-heading);
font-size: var(--font-size-md);
}
.theme-swatch-label-mode {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.theme-swatch-body {
background: var(--color-surface);
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
}
.theme-swatch-header {
align-items: baseline;
display: flex;
justify-content: space-between;
}
.theme-swatch-title {
color: var(--color-text-strong);
font-family: var(--font-heading);
font-size: var(--font-size-md);
}
.theme-swatch-meta {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.theme-swatch-card-strip {
display: flex;
gap: 6px;
}
.theme-swatch-card-pip {
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-subtle);
height: 18px;
width: 18px;
}
.theme-swatch-card-pip[data-pip='w'] {
background: var(--color-mana-w);
}
.theme-swatch-card-pip[data-pip='u'] {
background: var(--color-mana-u);
}
.theme-swatch-card-pip[data-pip='b'] {
background: var(--color-mana-b);
}
.theme-swatch-card-pip[data-pip='r'] {
background: var(--color-mana-r);
}
.theme-swatch-card-pip[data-pip='g'] {
background: var(--color-mana-g);
}
.theme-swatch-card-pip[data-pip='c'] {
background: var(--color-mana-c);
}
.theme-swatch-row {
border-bottom: var(--border-width) solid var(--color-line);
display: grid;
font-size: var(--font-size-sm);
gap: var(--space-2);
grid-template-columns: 1fr 36px 18px 30px;
padding: 4px 0;
}
.theme-swatch-row-alt {
background: var(--color-surface-sunken);
margin: 0 calc(-1 * var(--space-3));
padding-left: var(--space-3);
padding-right: var(--space-3);
}
.theme-swatch-cell-name {
color: var(--color-text-strong);
}
.theme-swatch-cell-set,
.theme-swatch-cell-rarity,
.theme-swatch-cell-qty {
color: var(--color-text-muted);
}
.theme-swatch-input-row {
display: flex;
}
.theme-swatch-input {
background: var(--color-input-bg);
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-sharp);
color: var(--color-text);
flex: 1 1 auto;
font: inherit;
font-family: var(--font-body);
font-size: var(--font-size-sm);
padding: 4px 8px;
}
.theme-swatch-btn-row {
display: flex;
gap: var(--space-1);
}
.theme-swatch-btn {
background: transparent;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-sharp);
color: var(--color-text-strong);
cursor: pointer;
font: inherit;
font-family: var(--font-body);
font-size: var(--font-size-sm);
padding: 4px 10px;
text-transform: var(--text-case);
}
.theme-swatch-btn-primary {
background: var(--color-text-strong);
border-color: var(--color-text-strong);
color: var(--color-text-inverse);
}
.theme-swatch-btn-danger {
color: var(--color-danger);
border-color: var(--color-danger-line);
}
.theme-swatch-status-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.theme-swatch-chip {
border: 1px solid;
border-radius: var(--radius-sharp);
font-size: var(--font-size-xxs);
padding: 2px 8px;
}
.theme-swatch-chip-success {
background: var(--color-success-soft);
border-color: var(--color-success-line);
color: var(--color-success);
}
.theme-swatch-chip-warn {
background: var(--color-warn-soft);
border-color: var(--color-warn-line);
color: var(--color-warn);
}
.theme-swatch-chip-danger {
background: var(--color-danger-soft);
border-color: var(--color-danger-line);
color: var(--color-danger);
}
.theme-swatch-chip-info {
background: var(--color-info-soft);
border-color: var(--color-info-line);
color: var(--color-info);
}
/* Biblioplex: design library. Cascade order is declared in ../styles.css. */
/* Design system library — single-home overlay for components + patterns. */
.lib-overlay {
background: var(--color-bg);
color: var(--color-text);
display: flex;
flex-direction: column;
font-family: var(--font-body);
font-size: var(--font-size-base);
inset: 0;
position: fixed;
z-index: 230;
}
.lib-head {
align-items: center;
background: var(--color-text);
color: var(--color-text-inverse);
display: flex;
flex-shrink: 0;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
}
.lib-head h2 {
font-family: var(--font-heading);
font-size: var(--font-size-base);
font-weight: 400;
margin: 0;
}
.lib-head-hint {
color: var(--color-on-dark-text-soft);
font-size: var(--font-size-xs);
margin-left: var(--space-2);
}
.lib-head-theme {
align-items: center;
display: flex;
gap: var(--space-2);
margin-left: auto;
}
.lib-head-theme > span {
color: var(--color-on-dark-text-soft);
font-size: var(--font-size-xs);
text-transform: uppercase;
}
.lib-head-theme-select {
background: transparent;
border: 1px solid var(--color-on-dark-line);
color: var(--color-text-inverse);
font: inherit;
font-size: var(--font-size-sm);
padding: 2px 6px;
}
.lib-close {
background: transparent;
border: 1px solid var(--color-on-dark-line);
color: var(--color-text-inverse);
cursor: pointer;
font: inherit;
height: 24px;
padding: 0;
width: 24px;
}
.lib-close:hover {
border-color: var(--color-text-inverse);
}
.lib-shell {
display: grid;
flex: 1 1 auto;
grid-template-columns: 240px 1fr;
min-height: 0;
}
.lib-nav {
background: var(--color-surface-sunken);
border-right: var(--border-width) solid var(--color-line);
overflow-y: auto;
padding: var(--space-3);
}
.lib-nav-group + .lib-nav-group {
margin-top: var(--space-4);
}
.lib-nav-label {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
letter-spacing: 0.04em;
margin-bottom: var(--space-1);
text-transform: uppercase;
}
.lib-nav-list {
display: flex;
flex-direction: column;
}
.lib-nav-item {
background: transparent;
border: none;
border-left: 2px solid transparent;
color: var(--color-text-muted);
cursor: pointer;
font: inherit;
font-family: var(--font-body);
font-size: var(--font-size-sm);
padding: 4px 8px;
text-align: left;
text-transform: var(--text-case);
transition:
color var(--motion-fast) ease,
border-color var(--motion-fast) ease;
}
.lib-nav-item:hover {
color: var(--color-text);
}
.lib-nav-item.is-active {
border-left-color: var(--color-text-strong);
color: var(--color-text-strong);
}
.lib-main {
overflow-y: auto;
padding: var(--space-4) var(--space-5);
}
.lib-entry-head {
margin-bottom: var(--space-4);
}
.lib-entry-kicker {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lib-entry-title {
color: var(--color-text-strong);
font-family: var(--font-heading);
font-size: var(--font-size-heading);
font-weight: 400;
margin: 0 0 var(--space-2);
}
.lib-entry-rule {
color: var(--color-text);
font-size: var(--font-size-md);
margin: 0 0 var(--space-2);
max-width: 70ch;
}
.lib-entry-tokens {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.lib-entry-tokens code {
background: var(--color-surface-sunken);
border: var(--border-width) solid var(--color-line);
font-family: var(--font-mono);
margin-right: 4px;
padding: 1px 4px;
}
.lib-entry-demo {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
padding: var(--space-4);
}
/* shared scaffolds used by entry builders */
.lib-stack {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.lib-stack-row {
align-items: center;
display: flex;
gap: var(--space-3);
}
.lib-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.lib-subhead {
color: var(--color-text-muted);
font-family: var(--font-heading);
font-size: var(--font-size-sm);
font-weight: 400;
margin: var(--space-3) 0 var(--space-1);
text-transform: uppercase;
}
.lib-subhead:first-child {
margin-top: 0;
}
.lib-note {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin-top: var(--space-2);
max-width: 70ch;
}
.lib-field-label {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
min-width: 120px;
text-transform: uppercase;
}
/* color swatches */
.lib-swatches {
display: grid;
gap: var(--space-2);
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.lib-swatch {
align-items: center;
border: var(--border-width) solid var(--color-line);
display: flex;
gap: var(--space-2);
padding: var(--space-1);
}
.lib-swatch-chip {
border: var(--border-width) solid var(--color-line);
flex-shrink: 0;
height: 28px;
width: 28px;
}
.lib-swatch-name {
color: var(--color-text);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
}
/* spacing */
.lib-spacing-row {
align-items: center;
display: flex;
gap: var(--space-3);
}
.lib-spacing-label {
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
min-width: 80px;
}
.lib-spacing-bar {
background: var(--color-text-strong);
display: inline-block;
height: 8px;
}
/* radii */
.lib-radii {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.lib-radius-cell {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.lib-radius-shape {
background: var(--color-text-strong);
height: 48px;
width: 48px;
}
.lib-radius-label {
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
}
/* shadows */
.lib-shadows {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.lib-shadow-card {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
padding: var(--space-3);
text-align: center;
}
/* motion */
.lib-motion {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.lib-motion-card {
align-items: center;
background: var(--color-surface);
border: var(--border-width) solid var(--color-line-strong);
color: var(--color-text);
cursor: default;
display: flex;
flex-direction: column;
font-size: var(--font-size-sm);
height: 96px;
justify-content: center;
text-align: center;
width: 140px;
}
.lib-motion-card[data-speed='fast']:hover {
background: var(--color-text-strong);
color: var(--color-text-inverse);
transition: all var(--motion-fast) ease;
}
.lib-motion-card[data-speed='base']:hover {
background: var(--color-text-strong);
color: var(--color-text-inverse);
transition: all var(--motion-base) ease;
}
.lib-motion-card[data-speed='slow']:hover {
background: var(--color-text-strong);
color: var(--color-text-inverse);
transition: all var(--motion-slow) ease;
}
/* truncation */
.lib-trunc-demo {
align-items: center;
display: flex;
gap: var(--space-3);
max-width: 520px;
}
.lib-trunc {
display: inline-block;
flex: 1 1 auto;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lib-trunc-multi {
display: -webkit-box;
flex: 1 1 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 360px;
overflow: hidden;
}
/* hover */
.lib-hover-row {
align-items: center;
display: flex;
gap: var(--space-3);
}
.lib-hover-card {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
cursor: default;
font-size: var(--font-size-sm);
padding: var(--space-3);
transition:
transform var(--motion-fast) ease,
box-shadow var(--motion-fast) ease;
width: 220px;
}
.lib-hover-card:hover {
box-shadow: var(--shadow-firm);
transform: translateY(-2px);
}
/* Settings popover additions for theme picker */
.settings-options-stack {
display: flex;
flex-direction: column;
}
.settings-theme-select {
background: transparent;
border: var(--border-width) solid var(--color-line-strong);
color: var(--color-text);
cursor: pointer;
font: inherit;
font-size: var(--font-size-sm);
min-height: 28px;
padding: 4px 8px;
text-transform: var(--text-case);
}
.settings-theme-select:hover,
.settings-theme-select:focus-visible {
border-color: var(--color-text-strong);
color: var(--color-text-strong);
outline: none;
}
/* Biblioplex: patterns. Cascade order is declared in ../styles.css. */
/* Banner (BEN-449) is vellum-ui's canonical .banner component
(components.css) — biblioplex no longer carries a local copy (BEN-704
dedup). [hidden] is handled by vellum's global guard in base.css. */
/* Site-stale banner (BEN-386) — shown when a newer deploy is live on the
server than the one this tab loaded. Soft affordance only; no auto-reload.
BEN-449: adopts the shared .banner pattern; only its hidden state is set
here. */
.site-stale-banner.hidden {
display: none;
}
/* BEN-862 / ADR 0013: sync alert banner — the single surface for every sync
problem (it replaced a second bottom-right notice that used to show at the same
time). Rides the shared .banner family; only its tint + hidden state live here.
Two tones: danger when a change was actually lost, warn when the collection is
intact but read-only (offline, can't reach sync). Status tokens carry their own
light/dark values. */
.sync-alert-banner {
background: var(--vui-status-danger-bg);
border-bottom-color: var(--vui-status-danger-border);
color: var(--vui-status-danger-text);
}
.sync-alert-banner-warning {
background: var(--vui-status-warn-bg);
border-bottom-color: var(--vui-status-warn-border);
color: var(--vui-status-warn-text);
}
.sync-alert-banner.hidden {
display: none;
}
/* BEN-876: auth-loss banner — the "fails loudly" surface for an unexpected
sign-out (a 401 that survived refresh+retry, or Clerk invalidating the
session out from under the user). Rides the shared .banner family; only its
danger tint + hidden state live here. Never shown for a deliberate sign-out
(see syncEngine.js deliberateSignOutInFlight). */
.auth-loss-banner {
background: var(--vui-status-danger-bg);
border-bottom-color: var(--vui-status-danger-border);
color: var(--vui-status-danger-text);
}
.auth-loss-banner.hidden {
display: none;
}
/* ---- Container tiers (ported from arcane-ledger). Token-driven so they
render heavy chrome under arcane (default) and dial back via
DIAL_BACK_FROM_ARCANE under every other theme. ---- */
.tome,
.branch,
.scroll,
.panel {
position: relative;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
box-shadow: var(--shadow-hard);
padding: var(--space-5);
}
.tome {
background: var(--color-surface-raised);
}
.branch {
background: var(--color-surface);
}
.scroll {
border-style: double;
border-width: calc(var(--border-width) + 1px);
background: var(--color-surface-raised);
}
.panel {
border-width: max(1px, calc(var(--border-width) - 1px));
background: var(--color-surface);
padding: var(--space-4);
}
/* Section heading typography that pairs with the container tiers. */
.tome > .heading,
.branch > .heading,
.scroll > .heading,
.panel > .heading {
margin: 0 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: var(--border-width) solid var(--color-text-strong);
color: var(--color-text-strong);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-title);
letter-spacing: var(--label-tracking);
text-transform: var(--label-transform);
}
/* ---- Pattern library (ported from arcane-ledger). All token-driven so
they auto-theme. Generic class names, usable anywhere in biblioplex. ---- */
/* Spreadsheet sheet — chunky bordered table with row/col heads, formula cells,
sum totals, and a "selected" cell outline. */
.sheet-wrap {
overflow: auto;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
background: var(--color-surface-raised);
box-shadow: var(--shadow-hard);
}
.sheet-wrap table {
width: 100%;
border-collapse: collapse;
}
.sheet-wrap th,
.sheet-wrap td {
border: 1px solid var(--color-line);
padding: 6px 9px;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
.sheet-wrap .row-head,
.sheet-wrap .col-head,
.sheet-wrap .corner {
background: var(--color-surface-sunken);
font-weight: var(--font-weight-title);
text-align: center;
width: 44px;
}
.sheet-wrap .cell-formula {
background: var(--color-accent-soft);
font-weight: var(--font-weight-title);
}
.sheet-wrap .cell-sum {
background: var(--color-warn-soft);
font-weight: var(--font-weight-title);
}
.sheet-wrap .cell-selected {
outline: 3px solid var(--color-accent);
outline-offset: -3px;
background: var(--color-info-soft);
}
.sheet-wrap .num {
text-align: right;
}
/* Formula bar — one-line fx token + monospace input + optional status pill. */
.formula-bar {
display: flex;
align-items: center;
gap: 10px;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
background: var(--color-surface-raised);
padding: 8px 10px;
box-shadow: var(--shadow-hard-small);
font-family: var(--font-mono);
}
.formula-token {
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-accent);
color: var(--color-text-inverse);
padding: 6px 8px;
line-height: 1;
font-weight: var(--font-weight-title);
}
.formula-input {
flex: 1;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface);
padding: 8px 10px;
font-family: var(--font-mono);
overflow: hidden;
white-space: nowrap;
min-width: 0;
}
.formula-status {
background: var(--color-danger);
color: var(--color-text-inverse);
padding: 4px 8px;
border-radius: var(--radius-sharp);
font-size: var(--font-size-xs);
text-transform: uppercase;
font-family: var(--font-mono);
}
/* Toolbar — wrapping row of monospace "tool" pills for view controls. */
.toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-2);
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
background: var(--color-surface);
}
.tool {
padding: 6px 8px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-title);
text-transform: uppercase;
box-shadow: var(--shadow-hard-small);
cursor: pointer;
}
/* Range slider — minimal styled input[type=range]. */
.range {
width: 100%;
appearance: none;
height: 8px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-pill);
background: var(--color-surface-sunken);
cursor: pointer;
}
.range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border: var(--border-width) solid var(--color-line-strong);
border-radius: 50%;
background: var(--color-accent);
box-shadow: var(--shadow-hard-small);
cursor: grab;
}
.range::-moz-range-thumb {
width: 18px;
height: 18px;
border: var(--border-width) solid var(--color-line-strong);
border-radius: 50%;
background: var(--color-accent);
box-shadow: var(--shadow-hard-small);
cursor: grab;
}
/* Switch toggle comes from vellum (.switch / .switch-input / .switch-track);
the legacy local block collided with it (BEN-613). */
/* Pagination — page-number chips with active and muted states. */
.page-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 4px 8px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
box-shadow: var(--shadow-hard-small);
font-family: var(--font-mono);
font-weight: var(--font-weight-title);
cursor: pointer;
user-select: none;
transition:
transform var(--motion-fast) ease,
box-shadow var(--motion-fast) ease;
}
.page-chip:not(.muted):hover {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 var(--color-text-strong);
}
.page-chip.active {
background: var(--color-accent);
color: var(--color-text-inverse);
}
.page-chip.muted {
cursor: default;
opacity: 0.65;
}
/* Dropdown via details/summary — declarative open/close, popover menu. */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > summary {
position: relative;
padding: 8px 28px 8px 10px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
font-family: var(--font-mono);
font-weight: var(--font-weight-title);
cursor: pointer;
box-shadow: var(--shadow-hard-small);
list-style: none;
user-select: none;
}
.dropdown > summary::-webkit-details-marker {
display: none;
}
.dropdown > summary::after {
content: '▾';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + 4px);
min-width: 180px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
padding: 4px;
box-shadow: var(--shadow-popover);
z-index: 20;
}
.dropdown-item {
display: block;
width: 100%;
padding: 6px 10px;
border: 0;
background: transparent;
font-family: var(--font-mono);
font-weight: var(--font-weight-title);
text-align: left;
cursor: pointer;
}
.dropdown-item:hover {
background: var(--color-surface-hover);
}
/* Tooltips come from vellum's .tooltip-host + data-tooltip (BEN-606). */
/* Metric grid — fluid-column tile grid of labeled values. */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-2);
}
.metric {
display: grid;
gap: 5px;
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
background: var(--color-surface-raised);
padding: 10px;
box-shadow: var(--shadow-hard-small);
font-family: var(--font-mono);
}
.metric > span {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--label-tracking);
}
.metric > strong {
font-family: var(--font-body);
font-size: 1.4rem;
line-height: 1;
font-weight: var(--font-weight-title);
}
/* Notice — emphatic info block on accent surface. */
.notice {
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-soft);
background: var(--color-accent);
color: var(--color-text-inverse);
padding: 12px 14px;
box-shadow: var(--shadow-hard-small);
font-family: var(--font-mono);
font-weight: var(--font-weight-title);
}
/* Biblioplex: decoration. Cascade order is declared in ../styles.css. */
/* ============================================================
* Arcane-ledger foundation decoration
*
* Applies the arcane-ledger visual language to biblioplex's actual
* component classes. Layered last in the cascade so it wins at equal
* specificity over earlier component rules.
*
* Locked to the arcane aesthetic (no dial-back). The 12 other themes
* are intentionally parked while we iterate on this one.
* ============================================================ */
/* --- Body dust overlay: subtle parchment grain over the whole app --- */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
opacity: 0.18;
background:
radial-gradient(rgba(255, 245, 210, 0.22) 1px, transparent 1px),
radial-gradient(rgba(21, 16, 13, 0.16) 1px, transparent 1px);
background-size:
17px 19px,
29px 31px;
background-position:
0 0,
7px 11px;
mix-blend-mode: soft-light;
}
/* --- BEN-399: removed the gilded top stripe on .app-header — it read as a
broken dashed line rather than a skeuomorphic gilt edge. position:
relative kept (harmless, other decorations may anchor to it). --- */
.app-header {
position: relative;
}
/* --- Bark rail decoration on sidebars (the "branch" panels) --- */
.app-left,
.app-right {
position: relative;
}
.app-left::after,
.app-right::after {
/* BEN-405: hidden for now — the bark rail adds clutter where it's placed.
CSS kept intact so it can be revived later. */
display: none;
content: '';
position: absolute;
top: 12px;
bottom: 12px;
width: 7px;
border: 2px solid var(--color-text-strong);
border-radius: var(--radius-soft);
background:
repeating-linear-gradient(
180deg,
rgba(0, 0, 0, 0.18),
rgba(0, 0, 0, 0.18) 5px,
transparent 5px,
transparent 12px
),
var(--color-text-muted);
box-shadow: var(--shadow-hard-small);
pointer-events: none;
z-index: 1;
}
.app-left::after {
right: -4px;
}
.app-right::after {
left: -4px;
}
/* Compatibility mirror of Vellum's button primitive. Biblioplex still has
app-specific button selectors below, so the shared base values remain here
until that legacy cascade is fully retired. */
.btn {
align-content: center;
align-items: center;
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-sharp);
position: relative;
box-shadow: var(--shadow-soft);
display: inline-flex;
/* Button labels and icon/shortcut adornments are a single unbreakable unit. */
flex-wrap: nowrap;
gap: 6px;
justify-content: center;
min-height: var(--control-height-compact);
padding: calc(var(--control-pad-y) - 1px) var(--control-pad-x) calc(var(--control-pad-y) + 1px);
text-align: center;
text-wrap: nowrap;
white-space: nowrap;
font-size: var(--font-size-sm);
font-family: var(--font-body);
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
cursor: pointer;
text-transform: none;
background-image: none;
transition:
transform var(--motion-fast) cubic-bezier(0.23, 1, 0.32, 1),
border-color var(--motion-fast) ease,
background-color var(--motion-fast) ease,
box-shadow var(--motion-fast) ease;
}
.btn > svg,
.segment-btn > svg {
align-self: center;
display: block;
flex: 0 0 auto;
}
.btn:hover:not(:disabled),
.ds-force-hover .btn:not(:disabled) {
/* BEN-470: :not(:disabled) keeps disabled controls visually still while
preserving their explanatory title tooltip. */
background-color: var(--color-surface-hover);
border-color: var(--color-line-strong);
color: var(--color-text-strong);
transform: none;
box-shadow: var(--shadow-soft);
filter: none;
}
.btn:active:not(:disabled),
.ds-force-active .btn:not(:disabled) {
transform: scale(0.98);
box-shadow: var(--shadow-subtle);
filter: none;
}
.btn:disabled {
box-shadow: none;
filter: none;
opacity: 0.62;
}
.btn:focus-visible,
.ds-force-focus .btn {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* Variants mirror Vellum's accent primary, quiet secondary, and soft danger. */
.btn:not(.btn-secondary):not(.btn-danger) {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-text-inverse);
font-weight: 500;
}
.btn:not(.btn-secondary):not(.btn-danger):hover:not(:disabled),
.ds-force-hover .btn:not(.btn-secondary):not(.btn-danger):not(:disabled) {
background-color: var(--color-btn-primary-hover);
border-color: var(--color-btn-primary-hover);
color: var(--color-text-inverse);
}
.btn.btn-secondary {
background-color: var(--color-surface-raised);
color: var(--color-text-strong);
border-color: var(--color-line);
}
.btn.btn-secondary:hover:not(:disabled),
.ds-force-hover .btn.btn-secondary:not(:disabled) {
background-color: var(--color-surface-hover);
}
.btn.btn-danger {
background-color: var(--color-danger-soft);
color: var(--color-danger);
border-color: var(--color-danger-line);
}
.btn.btn-danger:hover:not(:disabled) {
color: var(--color-danger);
border-color: var(--color-danger);
}
.ds-force-hover .btn.btn-danger:not(:disabled) {
color: var(--color-danger);
border-color: var(--color-danger);
}
/* BEN-470: every disabled variant reads as a flat, muted surface with no
raise or hover response. */
.btn:not(.btn-secondary):not(.btn-danger):disabled,
.btn.btn-secondary:disabled,
.btn.btn-danger:disabled {
background-color: var(--color-surface-sunken);
color: var(--color-text-muted);
border-color: var(--color-line);
box-shadow: none;
filter: none;
transform: none;
cursor: default;
}
/* --- BEN-403: default arcane-ledger field. A real bordered vellum field with a
carved-in inset shadow and mono type — the documented input style. App
inputs with their own higher-specificity treatment (compact sidebar
underlines, inline editors) keep theirs; everything else gets this. --- */
input[type='text'],
input[type='search'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='password'],
input:not([type]),
textarea,
select {
border: var(--border-width) solid var(--color-line-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
color: var(--color-text-strong);
/* BEN-467: extra right padding so the native dropdown arrow has breathing
room from the border instead of crowding it. */
padding: 8px 32px 8px 10px;
font-family: var(--font-mono);
/* BEN-613: token base size — fields without an explicit size used to fall
back to the UA default. */
font-size: var(--font-size-sm);
text-overflow: ellipsis;
box-shadow: var(--input-bevel);
}
input[type='text']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='password']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-line-focus);
}
/* (The hard-shadow + mono chip identity that used to be layered here moved
into the vellum .ui-chip base — one chip fleet-wide.) */
/* --- Press transitions on page chips --- */
.page-chip:not(.muted) {
transition:
transform var(--motion-fast) steps(2, end),
box-shadow var(--motion-fast) steps(2, end),
background-color var(--motion-fast);
}
.page-chip:not(.muted):hover {
transform: translate(1px, 1px);
background: var(--color-surface);
}
.page-chip:not(.muted):active {
transform: translate(var(--press-shift), var(--press-shift));
box-shadow: 0 0 0 var(--color-shadow);
}
/* (BEN-532/610's sunken head band retired — every head wears vellum's ink
band, no local fill.) */
/* BEN-655 (2026-07-02): heads go flat — the BEN-532 drop shadow is retired. */
/* --- Table headers: hatched parchment background --- */
table thead th {
/* BEN-420: cool sunken token instead of the hardcoded gold so the hatched
header matches the cooler canvas. */
background-image:
linear-gradient(var(--color-surface-sunken), var(--color-surface-sunken)),
repeating-linear-gradient(90deg, rgba(21, 16, 13, 0.08) 0 4px, transparent 4px 9px),
radial-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1px);
background-size:
auto,
auto,
5px 5px;
}
/* (BEN-400's generic .modal* family retired — the chat panel and the design
system demo both compose the real chat-head classes now: the vellum drag
band + .mcp-chat-head vocabulary.) */
/* BEN-604: the close affordance is vellum's quiet grey × (.rune-close in
vendored vellum-ui.css) — no local override. Glyph rule still holds:
.rune-close uses ✕ (U+2715); .icon-btn close/dismiss use × (U+00D7). */
/* Drag-band chrome comes from vellum (.ui-modal-head-drag /
.feedback-capture-head). Settings-popover-specific: bleed the band to the
popover edges. */
.settings-modal-head {
margin: 0 -12px 2px;
}
/* Reset belongs to an existing conversation and stays visually quiet beside Ask. */
.mcp-chat-form .mcp-chat-clear {
appearance: none;
min-height: 32px;
padding: 4px 6px;
margin-left: -6px;
border: 0;
border-radius: 2px;
background: transparent;
color: var(--color-text-muted);
font: inherit;
font-size: 11px;
text-transform: none;
cursor: pointer;
box-shadow: none;
}
.mcp-chat-form .mcp-chat-clear:hover {
color: var(--color-text-strong);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.mcp-chat-form .mcp-chat-clear:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
@media (max-width: 600px) {
.mcp-chat-form .mcp-chat-clear {
min-height: 44px;
}
}
/* Keep older Vellum pins visually consistent with its unmarked modal handles. */
.vui-modal-resize-bottom-left::before,
.feedback-capture-resize-bottom-left::before {
content: none;
}
/* Biblioplex: design system reference. Cascade order is declared in ../styles.css. */
/* ============================================================
* Design system reference standalone page
*
* Served at /design-system.html. Linked from the settings popover.
* ============================================================ */
body.design-system-page {
overflow: auto;
background: var(--color-bg);
}
body.design-system-page::before,
body.design-system-page::after {
/* The body dust overlay and any pseudo-elements meant for the app shell
don't apply on the design system page — keep it clean. */
content: none;
}
.ds-page-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 32px 24px 64px;
display: flex;
flex-direction: column;
gap: 32px;
}
.ds-page-head {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px 24px;
border: var(--border-width) solid var(--color-text-strong);
border-radius: var(--radius-soft);
background-image: linear-gradient(var(--color-surface-sunken), var(--color-surface-sunken));
box-shadow: var(--shadow-hard);
}
.ds-page-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--font-size-jumbo);
font-weight: var(--font-weight-title);
letter-spacing: -0.02em;
}
.ds-page-sub {
margin: 0;
font-size: var(--font-size-md);
color: var(--color-text-muted);
/* keep clear of the absolutely-positioned .ds-page-links column */
max-width: 64ch;
}
.ds-page-links {
position: absolute;
top: 14px;
right: 18px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.ds-page-body {
display: flex;
flex-direction: column;
gap: 28px;
}
.ds-page-layout {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.ds-toc {
position: sticky;
top: 16px;
align-self: start;
display: flex;
flex-direction: column;
gap: 2px;
max-height: calc(100vh - 32px);
overflow-y: auto;
padding-right: 4px;
}
.ds-toc-title {
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
text-transform: uppercase;
letter-spacing: var(--label-tracking);
color: var(--color-text-muted);
margin: 10px 0 4px;
}
.ds-toc-link {
text-decoration: none;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
text-transform: lowercase;
padding: 4px 8px;
border-radius: var(--radius-sharp);
border-left: 2px solid transparent;
}
.ds-toc-link:hover {
color: var(--color-text-strong);
background: var(--color-surface-hover);
}
.ds-toc-link.active {
color: var(--color-accent);
border-left-color: var(--color-accent);
background: var(--color-surface-hover);
}
.ds-toc-states {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-line);
}
@media (max-width: 900px) {
.ds-page-layout {
grid-template-columns: 1fr;
}
.ds-toc {
position: static;
max-height: none;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.ds-toc-states {
flex-basis: 100%;
border-bottom: none;
}
}
.ds-group {
display: flex;
flex-direction: column;
gap: 14px;
scroll-margin-top: 16px;
}
.ds-group-title {
margin: 0;
padding-bottom: 6px;
border-bottom: var(--border-width) solid var(--color-text-strong);
font-family: var(--font-mono);
font-size: var(--font-size-md);
font-weight: var(--font-weight-title);
text-transform: uppercase;
letter-spacing: var(--label-tracking);
}
.ds-entry {
display: grid;
grid-template-columns: 280px 1fr;
gap: 18px;
align-items: start;
padding: 12px;
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-soft);
background: var(--color-surface-raised);
}
.ds-entry-head {
display: flex;
flex-direction: column;
gap: 6px;
}
.ds-entry-name {
margin: 0;
font-family: var(--font-body);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-title);
}
.ds-entry-selectors {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.ds-entry-selectors code {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
padding: 2px 5px;
border: 1px solid var(--color-line);
border-radius: var(--radius-tight);
background: var(--color-surface);
}
.ds-entry-desc {
grid-column: 1 / 2;
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.45;
}
.ds-entry-demo {
grid-column: 2 / 3;
grid-row: 1 / 3;
padding: 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-soft);
background: var(--color-surface);
display: flex;
flex-direction: column;
gap: 10px;
overflow: auto; /* zoomed demos can scroll within the panel instead of spilling */
}
/* Per-demo zoom controls — a vellum compact segmented pinned to the demo edge */
.ds-zoom-bar {
align-self: flex-end;
}
.ds-zoom-stage {
width: fit-content;
}
.ds-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.ds-stack {
display: flex;
flex-direction: column;
gap: 8px;
}
.ds-history-frame {
background: var(--color-surface-sunken);
border-radius: var(--radius-soft);
padding: 10px;
}
.ds-knobs {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 8px 10px;
border: 1px dashed var(--color-line);
border-radius: var(--radius-sharp);
background: var(--color-surface-sunken);
}
.ds-knob {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
text-transform: lowercase;
color: var(--color-text-muted);
}
.ds-knob input[type='text'],
.ds-knob select {
font-size: var(--font-size-xxs);
padding: 2px 4px;
}
.ds-knob input[type='text'] {
width: 120px;
}
.ds-knob-canvas {
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-substate {
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
text-transform: lowercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: 2px;
}
.ds-static-popover {
border: var(--border-width) solid var(--color-text-strong);
border-radius: var(--radius-soft);
background: var(--color-surface-raised);
box-shadow: var(--shadow-overlay);
overflow: hidden;
width: 280px;
}
.ds-static-popover-body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* BEN-479: render the position:fixed feedback-capture widget statically in the
catalog. position:relative (not static) so the rune-close stays anchored to
the widget corner; size to content instead of the fixed viewport frame. */
.ds-static-feedback {
position: relative;
inset: auto;
width: min(360px, 100%);
height: auto;
min-height: 0;
max-height: none;
}
.ds-table-wrap {
width: 100%;
/* BEN-466: as a flex item inside .ds-entry-demo, min-width:auto would let the
wide demo table stretch the card past its grid cell. min-width:0 lets the
wrap shrink so overflow-x scrolls the table instead of breaking layout. */
min-width: 0;
overflow-x: auto;
border: var(--border-width) solid var(--color-text-strong);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
box-shadow: var(--shadow-hard-small);
}
.ds-table-wrap table {
font-size: var(--font-size-xs);
}
/* DS demo of the chat panel — a static stand-in for the floating
.mcp-chat-widget frame (which is fixed-position + hidden until opened). */
.ds-chat-panel {
position: relative;
display: flex;
flex-direction: column;
max-width: 560px;
background: var(--color-neutral-white);
border: 1px solid var(--color-neutral-900);
border-radius: var(--radius-soft);
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
overflow: hidden;
}
.ds-chat-panel-body {
padding: 16px;
}
.ds-modal-log {
border: 2px solid var(--color-line);
border-radius: var(--radius-sharp);
background: var(--color-surface-raised);
padding: 14px;
margin-bottom: 10px;
}
.ds-modal-empty-title {
margin: 4px 0;
font-family: var(--font-display);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-title);
}
.ds-modal-hint {
margin: 0 0 12px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.ds-modal-prompts {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.ds-modal-prompts li {
padding-left: 10px;
border-left: 2px solid var(--color-warn-line-soft);
font-size: var(--font-size-sm);
}
.ds-modal-compose {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: stretch;
}
.ds-modal-compose textarea {
margin: 0;
resize: vertical;
}
@media (max-width: 720px) {
.ds-entry {
grid-template-columns: 1fr;
}
.ds-entry-demo {
grid-column: 1 / 2;
grid-row: auto;
}
.ds-page-links {
position: static;
flex-direction: row;
align-items: flex-start;
align-self: flex-start;
margin-top: 6px;
}
}
/* BEN-477: adherence backlog checklist — priority-tagged rows of known DS drift */
.ds-backlog-list {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.ds-backlog-item {
display: flex;
align-items: baseline;
gap: 8px;
font-size: var(--font-size-sm);
line-height: 1.4;
}
.ds-backlog-prio {
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-title);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 1px 6px;
border-radius: var(--radius-sharp);
border: 1px solid var(--color-line);
min-width: 3.2em;
text-align: center;
}
.ds-backlog-prio-high {
background: var(--color-danger-soft);
border-color: var(--color-danger-line);
color: var(--color-danger);
}
.ds-backlog-prio-med {
background: var(--color-warn-soft-pale);
border-color: var(--color-warn-line);
color: var(--color-text-muted);
}
.ds-backlog-prio-low {
background: var(--color-surface-hover);
color: var(--color-text-muted);
}
.ds-backlog-text {
color: var(--color-text);
}
/* BEN-987: state treatments + stress gallery catalog entries. */
.ds-empty-state-holder {
width: 100%;
}
.ds-stress-width-row {
display: flex;
gap: 14px;
align-items: flex-start;
overflow-x: auto;
padding-bottom: 4px;
width: 100%;
}
.ds-stress-frame {
flex: 0 0 auto;
border: 1px dashed var(--color-line);
border-radius: var(--radius-sharp);
overflow: hidden;
}
.ds-stress-frame-label {
padding: 4px 8px;
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
color: var(--color-text-muted);
background: var(--color-surface-sunken);
text-transform: lowercase;
}
.ds-stress-frame-body {
padding: 8px;
overflow: auto;
}
.ds-stress-long-names {
max-width: 480px;
}
/* Forces the reduced-motion end state for visual review without touching OS
settings — vellum's .skeleton already gates its own animation on
prefers-reduced-motion; this just reproduces that end state on demand. */
.ds-force-reduced-motion .skeleton {
animation: none;
}
/* Biblioplex: collection toolbar. Cascade order is declared in ../styles.css. */
/* BEN-959 revised preview: keep search and the three most common filters in a
compact workbench. Less frequent filters and growing display preferences use
focused popovers. Live controls return to the mobile sheet below 901px. */
.collection-controls-toolbar {
--collection-toolbar-control-size: 32px;
align-items: center;
gap: 10px;
grid-template-columns: minmax(0, 1fr) max-content;
padding: 9px 12px;
}
body.view-list .collection-controls-toolbar.is-active:not([hidden]) {
display: grid;
}
.collection-controls-toolbar .collection-toolbar-search {
border: 0;
margin: 0;
min-width: 0;
padding: 0;
}
.collection-toolbar-search > .sidebar-label,
.collection-toolbar-search > .search-syntax-link,
.collection-toolbar-view > .sidebar-label {
display: none;
}
.collection-toolbar-search .search-wrap {
max-width: none;
width: 100%;
}
.collection-toolbar-search .search-input {
block-size: var(--collection-toolbar-control-size);
box-sizing: border-box;
}
/* Deliberately nowrap in the three-column layout: keeping it a single line is
what gives the grid track a truthful min-content floor (see the toolbar's
grid-template-columns). Wrapping is enabled only in the two-row layout below,
where the row spans the full width and has somewhere to wrap to. */
.collection-toolbar-primary-filters {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 6px;
min-width: 0;
position: relative;
}
.collection-toolbar-primary-filter {
flex: 0 0 auto;
min-width: 0;
}
.collection-toolbar-filter--set {
width: clamp(88px, 8vw, 108px);
}
.collection-toolbar-filter--tags {
width: clamp(116px, 11vw, 148px);
}
.collection-toolbar-filter--format {
width: clamp(112px, 10vw, 138px);
}
.collection-toolbar-filter--format .ms-trigger-label,
.collection-toolbar-filter--format .ms-pill {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.collection-toolbar-primary-filter .multiselect .ms-trigger {
block-size: var(--collection-toolbar-control-size);
box-sizing: border-box;
white-space: nowrap;
}
.collection-toolbar-popover-trigger {
align-items: center;
display: inline-flex;
gap: 6px;
justify-content: center;
block-size: var(--collection-toolbar-control-size, 32px);
box-sizing: border-box;
white-space: nowrap;
}
.collection-toolbar-popover-trigger svg {
height: 15px;
width: 15px;
}
.collection-toolbar-more-control {
align-items: stretch;
display: inline-flex;
flex: 0 0 auto;
min-width: 0;
}
.collection-toolbar-more-control .collection-toolbar-more-trigger.is-active {
background: var(--color-accent-soft);
border-color: var(--color-accent);
border-bottom-right-radius: 0;
border-top-right-radius: 0;
color: var(--color-text-strong);
}
.collection-toolbar-more-clear {
align-items: center;
appearance: none;
background: var(--color-accent-soft);
border: 1px solid var(--color-accent);
border-left: 0;
border-radius: 0 var(--radius-sharp) var(--radius-sharp) 0;
color: var(--color-text-strong);
cursor: pointer;
display: inline-flex;
font: 600 var(--font-size-md) / 1 var(--font-mono);
justify-content: center;
block-size: var(--collection-toolbar-control-size);
box-sizing: border-box;
min-width: var(--collection-toolbar-control-size);
padding: 0 8px;
}
.collection-toolbar-more-clear:hover,
.collection-toolbar-more-clear:focus-visible {
background: color-mix(in srgb, var(--color-accent-soft) 72%, var(--color-surface-raised));
}
.collection-toolbar-more-clear:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.collection-toolbar-more-clear[hidden] {
display: none;
}
.collection-controls-toolbar > .collection-toolbar-view {
align-items: center;
border: 0;
display: flex;
gap: 6px;
justify-self: end;
margin: 0;
min-width: 108px;
padding: 0;
position: relative;
width: auto;
}
body.view-list .collection-controls-toolbar > .collection-toolbar-view {
display: flex;
}
.collection-toolbar-view .collection-display-controls {
background: transparent;
display: block;
flex: 0 0 68px;
min-width: 0;
width: 68px;
}
.collection-toolbar-view .collection-display-controls-main,
.collection-toolbar-view .collection-display-mode {
flex: 0 0 68px;
width: 68px;
}
.collection-toolbar-view .collection-display-mode .segment-btn {
align-items: center;
display: inline-flex;
flex: 0 0 34px;
height: 32px;
justify-content: center;
padding: 0;
width: 34px;
}
.collection-toolbar-view .collection-display-mode .view-icon-svg {
height: 15px;
width: 15px;
}
.collection-toolbar-settings-trigger {
flex: 0 0 auto;
height: 32px;
padding: 0 10px;
}
.sidebar-view-settings:not(.collection-toolbar-view) > .collection-toolbar-settings-trigger,
.sidebar-view-settings:not(.collection-toolbar-view) > .collection-toolbar-settings-popover {
display: none;
}
.collection-toolbar-popover[hidden] {
display: none !important;
}
.collection-toolbar-popover {
background: var(--color-surface-raised);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-soft);
box-shadow: var(--shadow-popover);
color: var(--color-text);
padding: 12px;
position: absolute;
top: calc(100% + 8px);
z-index: 80;
}
.collection-toolbar-more-popover {
right: 0;
max-height: min(720px, calc(100vh - 112px));
overflow: hidden;
padding: 0;
width: min(640px, calc(100vw - 32px));
}
.collection-toolbar-settings-popover {
right: 0;
width: min(336px, calc(100vw - 32px));
}
.collection-toolbar-settings-popover.is-top-layer {
max-width: calc(100vw - 24px);
overflow-y: auto;
position: fixed;
z-index: 2000;
}
.collection-toolbar-more-popover.is-top-layer {
max-width: calc(100vw - 24px);
overflow: hidden;
position: fixed;
z-index: 2000;
}
.collection-toolbar-popover-head {
border-bottom: 1px solid var(--color-line-faint);
display: grid;
gap: 2px;
margin: 0 0 11px;
padding: 0 0 10px;
}
.collection-toolbar-more-popover .collection-toolbar-popover-head {
align-items: center;
display: flex;
flex: 0 0 auto;
justify-content: space-between;
margin: 0;
padding: 12px 14px;
}
.collection-toolbar-more-popover .collection-toolbar-popover-head > div {
display: grid;
gap: 2px;
}
.collection-toolbar-popover-body {
min-height: 0;
overflow-y: auto;
padding: 12px 14px;
}
.collection-toolbar-popover-actions {
align-items: center;
background: var(--color-surface-raised);
border-top: 1px solid var(--color-line-faint);
display: flex;
flex: 0 0 auto;
gap: 8px;
justify-content: flex-end;
padding: 10px 14px;
}
.collection-toolbar-more-popover:not([hidden]) {
display: flex;
flex-direction: column;
}
.collection-toolbar-popover-head strong {
color: var(--color-text-strong);
font-size: var(--font-size-sm);
text-transform: lowercase;
}
.collection-toolbar-popover-head span {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
line-height: 1.35;
}
.collection-toolbar-more-popover .collection-toolbar-popover-body > .sidebar-section {
border: 0;
margin: 0;
padding: 0;
}
.collection-toolbar-more-popover
.collection-toolbar-popover-body
> .sidebar-section
> .sidebar-label {
display: none;
}
.collection-toolbar-more-popover .sidebar-filters {
display: block;
}
.collection-filter-hierarchy {
display: grid;
gap: 16px;
}
.collection-filter-group {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.collection-filter-group h4 {
border-bottom: 1px solid var(--color-line-faint);
color: var(--color-text-strong);
font-size: var(--font-size-xs-plus);
grid-column: 1 / -1;
margin: 0;
padding: 0 0 6px;
text-transform: lowercase;
white-space: nowrap;
}
.collection-filter-field {
display: grid;
gap: 5px;
min-width: 0;
}
.collection-filter-label {
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
letter-spacing: 0.05em;
text-transform: lowercase;
}
.collection-filter-range {
display: grid;
gap: 10px;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.collection-toolbar-more-popover
:is(
input:not([type]),
input[type='text'],
input[type='number'],
input[type='search'],
input[type='url'],
input[type='email'],
select,
.ms-trigger
) {
min-height: var(--control-height, 36px);
width: 100%;
}
.collection-toolbar-more-popover .advanced-filter-wide {
grid-column: 1 / -1;
}
.collection-toolbar-more-popover .sidebar-filters > [data-toolbar-filter-label]:not([hidden]) {
display: grid;
gap: 4px;
}
.collection-toolbar-more-popover
.sidebar-filters
> [data-toolbar-filter-label]:not([hidden])::before {
color: var(--color-text-muted);
content: attr(data-toolbar-filter-label);
font-family: var(--font-mono);
font-size: var(--font-size-xxs);
letter-spacing: 0.05em;
text-transform: lowercase;
}
.collection-toolbar-more-popover .sidebar-filters .clear-filters-btn:not([hidden]) {
display: none;
}
.collection-toolbar-more-popover .clear-filters-label-short {
display: none;
}
.collection-toolbar-more-popover .clear-filters-label-long {
display: inline;
}
.collection-toolbar-settings-popover .collection-column-settings-panel {
margin: 0;
min-width: 0;
overflow: visible;
width: 100%;
}
.collection-toolbar-settings-popover .collection-column-settings-dropdown > .ms-trigger {
display: none;
}
.collection-toolbar-settings-popover .collection-column-settings-dropdown > .ms-popover {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: block;
left: auto;
margin: 0;
max-height: 330px;
overflow-y: auto;
position: static;
right: auto;
}
.collection-toolbar-settings-popover .collection-column-settings-dropdown .ms-option {
align-items: center;
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
gap: 8px;
font-size: 13px;
line-height: 1.35;
border-radius: var(--radius-sharp);
padding: 5px 4px;
}
.collection-toolbar-settings-popover .collection-column-settings-dropdown .ms-popover {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 10px;
}
#filterMinPrice,
#filterMaxPrice {
appearance: textfield;
-moz-appearance: textfield;
font-variant-numeric: tabular-nums;
}
#filterMinPrice::-webkit-inner-spin-button,
#filterMinPrice::-webkit-outer-spin-button,
#filterMaxPrice::-webkit-inner-spin-button,
#filterMaxPrice::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.collection-controls-toolbar
> .sidebar-view-settings.is-visual-mode
.collection-toolbar-settings-popover
.collection-visual-settings {
align-items: stretch;
flex-direction: column;
gap: 0;
width: 100%;
}
.collection-toolbar-settings-popover .collection-price-style-control {
padding: 0;
}
/* BEN-990: applied-filter formula chips — a second toolbar row under
search/filters/view settings. Spans the full grid width regardless of
which column layout is active above. */
.collection-toolbar-filter-chips {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 6px;
grid-column: 1 / -1;
grid-row: 2;
}
.collection-toolbar-filter-chips.hidden {
display: none;
}
.filter-chip-wrap {
position: relative;
}
.filter-chip.ui-chip .ui-chip-label {
cursor: pointer;
}
.filter-chip.ui-chip .ui-chip-label:focus-visible {
border-radius: var(--radius-sharp);
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.filter-chip-editor {
display: grid;
gap: 8px;
left: 0;
min-width: 220px;
padding: 10px;
right: auto;
}
.filter-chip-editor-options {
display: grid;
gap: 4px;
max-height: 220px;
overflow-y: auto;
}
.filter-chip-editor-option {
align-items: center;
display: flex;
gap: 6px;
font-size: var(--font-size-sm);
}
.filter-chip-editor-input {
min-height: var(--control-height, 36px);
width: 100%;
}
.filter-chip-editor-actions {
display: flex;
justify-content: flex-end;
}
.filter-chip-editor-apply {
min-height: 30px;
padding-inline: 12px;
}
@media (max-width: 1100px) and (min-width: 901px) {
.collection-controls-toolbar {
grid-template-columns: minmax(0, 1fr) max-content;
}
.collection-toolbar-filter-chips {
grid-row: 2;
}
.collection-toolbar-search {
grid-column: 1;
grid-row: 1;
}
.collection-controls-toolbar > .collection-toolbar-view {
grid-column: 2;
grid-row: 1;
}
.collection-toolbar-primary-filter {
width: auto;
}
.collection-toolbar-filter--set {
flex: 1 1 122px;
min-width: 118px;
}
.collection-toolbar-filter--tags {
flex: 1 1 164px;
min-width: 148px;
}
.collection-toolbar-filter--format {
flex: 1 1 190px;
min-width: 176px;
}
.collection-toolbar-more-control {
flex: 0 0 auto;
}
.collection-toolbar-more-popover {
left: 12px;
right: auto;
}
}
|