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, 420px), 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-raised);
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-text-muted);
font-size: var(--font-size-xs);
text-transform: none;
}
.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: none;
}
.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: none;
}
.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: none;
}
.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: none;
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: none;
}
.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: none;
}
.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;
}
/* A paired phone only sends scans to its computer, including the shared editor. */
.scan-standalone-page .add-tabs,
.scan-standalone-page .add-mode:not(#addModeScan),
.scan-standalone-page #cardScanManual,
.scan-standalone-page .card-scan-handoff,
.scan-standalone-page .card-scan-queue,
.scan-standalone-page #addPreviewExisting,
.scan-standalone-page .field:has(#addTagsRow),
.scan-standalone-page .add-fields .field-location,
.scan-standalone-page #addDeckOptions {
display: none;
}
/* The paired link owns the document, outside the collection and drawer layers.
Feedback and card art remain available to the shared confirmation editor. */
body.scan-standalone > :not(#scanStandalone, #feedback, .image-lightbox) {
display: none !important;
}
body.scan-standalone {
height: auto;
min-height: 100dvh;
overflow-y: auto;
}
.scan-standalone-page:not([hidden]) {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 100dvh;
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.scan-standalone-header h1 {
font-size: var(--font-size-xl);
margin: 0 0 6px;
}
.scan-standalone-header p {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin: 0;
}
.scan-standalone-page #addDetails {
background: transparent;
border: 0;
margin: 0;
padding: 0;
}
.scan-standalone-page #addDetails,
.scan-standalone-page #addDetails > .details-body,
.scan-standalone-page #addModeScan.active {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.scan-standalone-page #addModeScan.active {
gap: 12px;
min-height: calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.scan-standalone-page .card-scan-stage {
aspect-ratio: 4 / 5;
flex: none;
min-height: 0;
max-height: 65dvh;
width: 100%;
}
.scan-standalone-page #addModeScan:has(.card-scan-candidates:not([hidden])) .card-scan-stage {
flex: none;
height: 25dvh;
min-height: 0;
}
.scan-standalone-page .card-scan-status,
.scan-standalone-page .card-scan-privacy {
margin: 0;
}
.scan-standalone-page .card-scan.is-paired-phone .card-scan-privacy::before {
content: none;
}
.scan-standalone-page .card-scan-actions {
display: flex;
gap: 8px;
margin-top: auto;
}
.scan-standalone-page .card-scan-actions .btn {
flex: 1;
min-height: 48px;
}
.scan-standalone-page .add-preview {
scroll-margin-top: 16px;
}
.scan-standalone-page #addEditor .add-actions {
background: var(--color-bg);
}
.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: 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 {
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--font-size-sm);
min-width: 0;
width: 100%;
}
.card-scan-stage {
align-items: center;
aspect-ratio: 4 / 5;
/* M-27: aspect-ratio + max-height already shrink this narrower than its
container; without this it sits at the left edge instead of centered. */
margin-inline: auto;
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 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: none;
display: none;
height: 100%;
object-fit: cover;
object-position: center;
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;
display: none;
height: min(80%, 440px);
max-width: 92%;
pointer-events: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.card-scan-stage.is-live .card-scan-frame {
display: block;
}
.card-scan-stage[data-quality='captured'] .card-scan-frame {
border-color: color-mix(in srgb, var(--color-status-success-text) 82%, white);
}
.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:not(.is-paired-phone).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;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
border-radius: var(--radius-tight);
padding: 8px 12px;
justify-content: center;
position: absolute;
z-index: 2;
}
.card-scan.is-pair-host > .card-scan-stage,
.card-scan.is-pair-host > .card-scan-status,
.card-scan.is-pair-host > .card-scan-candidates,
.card-scan.is-pair-host > .card-scan-actions,
.card-scan.is-pair-host > .card-scan-privacy,
.card-scan:not(.is-pair-host) > .card-scan-handoff,
.card-scan.is-paired-phone ~ #addPrintingToggle,
.card-scan.is-paired-phone ~ #addPrintingPicker,
.card-scan.is-paired-phone ~ #addPreview,
.card-scan.is-paired-phone ~ #addEditor {
display: none;
}
.card-scan.has-connected-phone:not(.show-phone-link) .card-scan-qr-slot,
.card-scan.has-connected-phone:not(.show-phone-link) .card-scan-link-row {
display: none;
}
.card-scan.has-connected-phone:not(.show-phone-link) .card-scan-handoff.has-qr {
grid-template-columns: minmax(0, 1fr);
}
.card-scan-status {
display: grid;
gap: 4px;
line-height: 1.35;
margin: 10px 0 8px;
min-height: 19px;
}
.card-scan-processing {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.card-scan-reconnect {
justify-self: start;
}
.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-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);
}
}
/* Desktop review queue. Each row keeps the printing and physical details together. */
.card-scan-queue {
margin: 16px 0;
}
.card-scan.is-paired-phone .card-scan-queue {
display: none;
}
.card-scan-queue:not(:has(.scan-queue-row)) {
display: none;
}
.card-scan-queue-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 12px;
justify-content: space-between;
margin-bottom: 12px;
}
.card-scan-queue-totals {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.card-scan-queue-list {
display: grid;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
max-height: none;
overflow: visible;
}
ul.card-scan-queue-list > li.scan-queue-row {
display: grid;
gap: 12px;
padding: 16px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
ul.card-scan-queue-list > li.scan-queue-row + li.scan-queue-row {
border-top: 1px solid var(--color-line-subtle);
}
.scan-queue-card {
display: grid;
grid-template-columns: minmax(100px, 36%) minmax(0, 1fr);
align-items: stretch;
gap: 14px;
min-width: 0;
}
.scan-queue-card:not(:has(.scan-queue-thumb)) {
grid-template-columns: minmax(0, 1fr);
}
.scan-queue-summary {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.scan-queue-heading {
display: flex;
align-items: flex-start;
gap: 8px;
}
.scan-queue-heading > input {
margin-top: 5px;
flex: none;
}
.scan-queue-thumb {
display: block;
width: 100%;
height: 100%;
min-height: 150px;
aspect-ratio: 0.716;
object-fit: contain;
object-position: top;
border-radius: 6px;
}
.scan-queue-card-copy {
min-width: 0;
display: grid;
gap: 4px;
}
.scan-queue-card-copy strong {
font-size: var(--font-size-sm-plus);
line-height: 1.35;
}
.scan-queue-properties {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.scan-queue-state {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.scan-queue-row-confirmed .scan-queue-state,
.scan-queue-row-corrected .scan-queue-state {
color: var(--color-status-success-text);
}
.scan-queue-row-actions,
.scan-queue-bulk-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.scan-queue-row-actions {
flex-wrap: nowrap;
gap: 6px;
}
.scan-queue-row-actions .btn {
min-height: 34px;
padding-inline: 8px;
white-space: nowrap;
}
@media (max-width: 420px) {
.scan-queue-card {
gap: 10px;
}
}
.scan-queue-toolbar:not(:empty) {
display: grid;
gap: 10px;
padding: 0 0 12px;
}
.scan-queue-select-all {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--font-size-sm);
}
.scan-queue-error {
color: var(--color-danger-text-deep);
font-size: var(--font-size-sm);
}
.scan-queue-correct {
display: grid;
gap: 8px;
min-width: 0;
max-width: none;
}
.scan-queue-correct input {
width: 100%;
min-width: 0;
}
.scan-queue-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.scan-queue-fields label {
display: grid;
gap: 5px;
min-width: 0;
font-size: var(--font-size-sm);
}
.scan-queue-fields select {
width: 100%;
min-width: 0;
}
.scan-queue-printing-review {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
.scan-queue-printing-picker {
margin: 8px 0;
}
.scan-queue-printing-picker summary {
cursor: pointer;
font-size: var(--font-size-sm);
padding: 4px 0 8px;
}
.scan-queue-printing-picker .printing-list {
max-height: 220px;
overflow: auto;
}
.scan-queue-printing-review li.printing-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 6px 8px;
box-shadow: none;
}
.scan-queue-selection {
margin: 10px 0;
font-size: var(--font-size-sm);
}
.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 {
padding: 0;
}
/* 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: none;
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: none;
}
.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: none;
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);
/* Clear the filter input's focus ring. */
margin: 10px 0 4px;
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-surface-hover);
font-weight: 600;
}
.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;
aspect-ratio: 488 / 680;
object-fit: contain;
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;
}
#addPreview .add-preview-info {
min-height: 100px;
}
.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: none;
outline: none;
border-radius: var(--radius-square);
-webkit-appearance: none;
}
.add-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Reserve the action geometry while artwork, finishes and prices resolve. */
#addEditor .add-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
#addCardBtn {
width: 100%;
min-height: 44px;
height: 44px;
white-space: nowrap;
}
#addCardCancel {
justify-self: end;
width: auto;
}
#addFinish {
min-height: 32px;
}
.location-combobox {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
}
.location-combobox input.field-input {
flex: 1;
min-width: 0;
width: 100%;
padding: 8px 2px;
color: var(--color-text);
}
.location-field-icon:empty {
display: none;
}
.location-field-hint {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.tag-combobox {
flex: 1;
min-width: 100px;
}
.tag-combobox input {
width: 100%;
}
.editor-suggestions {
position: fixed;
margin: 0;
min-width: 0;
box-sizing: border-box;
box-shadow: none;
background: var(--color-surface);
border: 1px solid var(--color-line);
color: var(--color-text);
}
.editor-suggestions .combobox-option {
align-items: center;
padding: 6px 8px;
min-height: 36px;
white-space: normal;
}
.editor-suggestions .combobox-option-label {
flex: 1;
overflow-wrap: anywhere;
}
.editor-suggestions .combobox-option.is-selected {
font-weight: 600;
}
.editor-suggestions .combobox-option.is-active,
.editor-suggestions .combobox-option:hover {
background: var(--color-surface-hover);
}
.location-option-icon,
.location-field-icon {
display: inline-flex;
flex: 0 0 20px;
}
.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;
font: inherit;
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-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;
}
.archive-restore-dialog {
margin: auto;
width: min(34rem, calc(100vw - 2rem));
max-height: calc(100dvh - 2rem);
box-sizing: border-box;
overflow-y: auto;
}
.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;
}
/* The Archivist's voice is text, never an accent rail on a message. */
.mcp-chat-head .ui-modal-title,
.mcp-chat-assistant .mcp-chat-body {
color: var(--color-archivist);
}
/* Pairing has stable geometry before the QR response arrives. */
.card-scan-qr-slot {
width: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
background: var(--color-surface-hover);
}
.card-scan-qr-slot .card-scan-qr {
width: 100%;
height: 100%;
object-fit: contain;
}
.card-scan-qr-slot .card-scan-qr[hidden] {
display: none;
}
.card-scan.has-connected-phone:not(.show-phone-link) .card-scan-handoff-copy {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-scan-last-sent {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.card-scan-last-sent img {
width: 42px;
height: 58px;
object-fit: cover;
}
.card-scan.is-reporting .card-scan-stage,
.card-scan.is-reporting .card-scan-status,
.card-scan.is-reporting .card-scan-actions > button {
display: none;
}
.scan-report {
flex: 1 0 100%;
min-width: 0;
padding: 16px;
border: 1px solid var(--color-line);
border-radius: var(--radius-tight);
background: var(--color-surface);
text-align: left;
}
.scan-report-preview {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.scan-report-preview img {
width: 54px;
height: 76px;
object-fit: contain;
}
.scan-report-preview p {
margin: 4px 0 0;
color: var(--color-text-muted);
}
.scan-report fieldset {
display: grid;
gap: 12px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.scan-report legend {
margin-bottom: 12px;
font-weight: 600;
}
.scan-report label,
.scan-report-field {
display: grid;
gap: 6px;
min-width: 0;
}
.scan-report input:not([type='checkbox']),
.scan-report textarea,
.scan-report select {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.scan-report-printing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.scan-report label.scan-report-consent {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.scan-report-consent input {
flex: 0 0 auto;
margin-top: 3px;
}
.scan-report-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.scan-queue-expand {
justify-self: end;
}
.scan-queue-row:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
}
@media (min-width: 901px) {
.app-right.scan-review-expanded:has(#addModeScan.active) {
width: calc(100vw - 48px) !important;
max-width: none;
}
.scan-review-expanded .card-scan-handoff {
max-width: 360px;
}
.scan-review-expanded .has-connected-phone:not(.show-phone-link) .card-scan-handoff {
max-width: none;
}
.scan-review-expanded .card-scan-queue-list {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
align-items: start;
}
.scan-review-expanded ul.card-scan-queue-list > li.scan-queue-row {
padding: 0;
border: 0;
}
.scan-review-expanded .scan-queue-card {
grid-template-columns: minmax(0, 1fr);
}
.scan-review-expanded .scan-queue-thumb {
max-height: 390px;
}
.scan-review-expanded .scan-queue-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.scan-review-expanded .scan-queue-expand {
margin-left: auto;
order: 2;
}
}
.scan-review-expanded .card-scan-queue:not(:has(.scan-queue-row)) {
display: block;
}
@media (max-width: 900px) {
.scan-queue-expand {
display: none;
}
}
/* Camera guidance stays separate from photos already captured for processing. */
.card-scan.is-paired-phone .card-scan-unpaired-copy,
.card-scan.is-batch-scan .card-scan-single-copy,
.card-scan:not(.is-batch-scan) .card-scan-batch-copy {
display: none;
}
/* M-27: nothing previously hid the "paired" copy when this device is doing
its own scanning (not relaying to a paired desktop) — it showed alongside
the unpaired copy above, reading as one run-on paragraph. */
.card-scan:not(.is-paired-phone) .card-scan-paired-copy {
display: none;
}
/* An unpaired phone scanning a stack reviews it here, including the ?scan page. */
.scan-standalone-page .card-scan.is-batch-scan .card-scan-queue:has(.scan-queue-row) {
display: block;
}
.card-scan-captures {
border-top: 1px solid var(--color-line-faint);
padding-top: 12px;
font-size: var(--font-size-sm);
}
.card-scan-captures ul {
display: grid;
gap: 12px;
padding: 0;
margin: 8px 0 0;
list-style: none;
}
.card-scan-capture {
display: flex;
align-items: center;
gap: 12px;
}
.card-scan-capture img {
width: 56px;
aspect-ratio: 0.716;
object-fit: cover;
flex: none;
border-radius: var(--radius-tight);
}
.card-scan-capture > div {
display: grid;
gap: 3px;
}
.card-scan-capture small,
.card-scan-capture span {
color: var(--color-text-muted);
}
.scan-queue-save-actions {
display: flex;
justify-content: flex-end;
margin-top: 12px;
}
.scan-queue-quantity {
display: flex;
align-items: center;
gap: 8px;
}
.scan-queue-quantity output {
min-width: 2ch;
text-align: center;
}
/* Tomebound: 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;
}
}
/* M-10: iOS Safari zooms the page on focus when a field's computed font-size
is under 16px. This used to be a hand-maintained list of "known offender"
selectors (needed to out-specify their own font-size rules) that still
missed ~60 fields; a coarse-pointer rule with !important reaches every
text-entry control regardless of what else sets its font-size, present or
future. Non-text input types are excluded since a checkbox/radio/range/
color/file field never triggers the zoom and doesn't need this override. */
@media (pointer: coarse) {
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not(
[type='file']
):not([type='hidden']),
select,
textarea,
[contenteditable='true'] {
font-size: max(16px, 1em) !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;
}
.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: 100dvh;
min-height: 0;
/* The footer is a content-sized grid row. Only a displayed bottom bar
reserves space outside it; floatingActions measures both boxes. */
padding-bottom: var(--app-bottom-nav-h, 0px);
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) auto;
}
.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);
}
/* The collection toolbar is sticky at 50. Its reserved left gutter must
expose the navigation control, while drawers/backdrops remain above it. */
body.view-list #book-stage .book-sidebar-workbench > .book-header {
z-index: 51;
}
/* Deck identity and actions start below a real navigation row, so the
floating book controls cannot cover the title, build mode, or export. */
body.view-deck #book-stage .book-sidebar-workbench > .book-header {
align-items: center;
background: var(--color-surface);
border-right: 0;
border-bottom: 1px solid var(--color-line);
flex: 0 0 56px;
height: 56px;
justify-content: space-between;
padding: 6px 8px;
position: relative;
width: 100%;
}
body.view-deck
#book-stage
.book-header
> :is(.book-sidebar-toggle, .quick-jump-collapsed-trigger) {
height: 44px;
inset: auto;
margin: 0;
min-height: 44px;
position: relative;
width: 44px;
}
body.view-deck .deck-hero-actions :is(.deck-build-mode-toggle, .btn) {
min-height: 44px;
}
body.view-deck:not(.left-drawer-open) #book-stage .book-sidebar-workbench .app-left,
body.view-deck #book-stage .book-sidebar-mobile-open .book-sidebar-backdrop {
top: 56px;
}
/* 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 {
/* Unframed shells show primary navigation here for every account state.
The book navigation frame hides its header and uses the sidebar. */
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-account-slot .sync-chip-cta .sync-label {
font-size: var(--font-size-xs);
white-space: normal;
}
.sync-account-slot .sync-chip-cta .sync-label::after {
content: none;
}
.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;
/* M-05: sticky with no background lets scrolled fields slide up under it. */
background: var(--color-surface);
border-bottom: var(--border-width) solid var(--color-line);
}
.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;
width: auto;
z-index: 7;
/* M-05: same transparent-sticky problem as the head above. */
background: var(--color-surface);
}
.mobile-sidebar-tabs .segment-btn,
html[data-theme] .app-left .mobile-sidebar-tabs .segment-btn {
color: var(--color-text-strong);
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%;
/* M-35: the drawer runs edge to edge — clear the notch/rounded-corner
inset in landscape (additive to the existing 16px). */
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
.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);
/* M-34: the 44px hit area is taller than the single line of text, which
pushed "All Cards" well below it — pull the surrounding sections back
in without shrinking the tap target. */
margin-block: -13px;
}
.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: auto;
padding: 14px 14px var(--app-floating-clearance, 68px);
width: 100%;
}
/* Keep the toolbar and footer still; #listView owns scrolling and clearance
for the floating actions, without extending the page itself. */
body.view-list .app-center {
padding-bottom: 0;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
body.view-list #collectionSection {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
body.view-list #collectionSection.hidden {
display: none;
}
.mobile-collection-toolbar {
display: none;
}
body.view-list:not(.share-mode) .mobile-collection-toolbar {
display: flex;
justify-content: flex-end;
}
/* M-35: the sticky header (and the Browse & filters sheet head, which
shares this class) sits at the physical top edge — clear the Dynamic
Island/notch inset instead of sliding under it now that the viewport
covers that area. Additive to vellum's own padding, not a replacement. */
.mobile-toolbar {
padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
.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-bar .bulk-count {
flex-shrink: 0;
}
.bulk-edit-panel {
bottom: calc(12px + var(--app-footer-h) + 52px + 8px);
max-height: calc(100vh - 24px - var(--app-footer-h) - 52px - 8px);
/* iOS: 100vh exceeds the visible area while Safari's bars are showing. */
max-height: calc(100dvh - 24px - var(--app-footer-h) - 52px - 8px);
width: calc(100vw - 16px);
}
body.view-grid .app-center,
body.view-grid #collectionSection {
min-height: 0;
}
body.view-grid .app-center {
overflow: auto;
}
.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-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;
}
/* M-28: #addEditor .add-actions is a single-column grid on desktop (Add
full width, Cancel a small right-aligned link below it) — on a phone
that grid stacks the two buttons and the wrap alone runs the sticky
footer to 117px. Go side by side, matching .drawer-actions above. */
#addEditor .add-actions {
display: flex;
flex-wrap: nowrap;
/* Cover #addDetails' 16px bottom padding, which sticky bottom: 0 leaves
open for scrolled fields to show through. */
bottom: -16px;
margin-bottom: -16px;
padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}
#addCardBtn,
#addCardCancel {
justify-self: auto;
width: auto;
flex: 1 1 0;
min-width: 0;
}
.detail-drawer {
height: 100dvh;
width: 100vw;
}
/* M-35: the drawer is full-bleed only at this width — clear the
notch/rounded-corner inset in landscape (desktop's fixed-width side
panel doesn't need this). */
.drawer-actions {
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
/* 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;
/* M-19: vellum's .ui-drawer caps width at min(92vw, 480px), leaving a 32px
strip uncovered — this sheet is meant to run full width on phones. */
max-width: none;
/* M-35: full-width bottom sheet — clear the notch/rounded-corner in landscape. */
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
.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;
}
/* The header stays outside the single mobile scrollport. Art and navigation
lead; the form follows in the same reading order as the desktop modal. */
#detailDrawer .drawer-body {
display: block;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
#detailDrawer #detailForm,
#detailDrawer .detail-scroll {
display: block;
}
#detailDrawer .detail-art-column {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
#detailDrawer #detailImageWrap {
width: 100%;
}
#detailDrawer :is(.drawer-image-frame, .drawer-placeholder) {
/* Header = title line + metadata + padding/border. Leave another 76px for
body padding, the art/nav gap, and the 44px navigation targets. */
--detail-mobile-header-height: calc(var(--detail-title-line-height) + 26px + 25px);
/* M-31: capping only at the available height let the art fill the whole
first screen, pushing price/quantity/Move below the fold on every
open. Also cap at ~55% of the viewport height so that row is always
visible without scrolling. */
width: min(
100%,
calc((100dvh - var(--detail-mobile-header-height) - 76px) * 488 / 680),
calc(55dvh * 488 / 680)
);
max-width: none;
margin: 0 auto;
}
#detailDrawer .detail-nav {
justify-content: center;
border: 0;
padding: 0;
}
#detailDrawer :is(.rune-close, .detail-nav-btn, .detail-quantity-btn, #detailMove) {
min-width: 44px;
min-height: 44px;
}
#detailDrawer .detail-quantity-control {
grid-template-columns: 44px minmax(42px, 1fr) 44px;
}
#detailDrawer .detail-quantity-value {
height: 44px;
}
.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;
}
/* BEN-mobile-audit M-06: was position:sticky with a transparent background
(deck-workspace.css ".deck-workspace .deck-workspace-controls" beat this
on specificity, so the bg never painted) and it ate ~160px permanently
once scrolled. Scroll away with the content instead — the fixed topbar
strip already covers quick nav/mode switching once scrolled. */
.deck-workspace .deck-workspace-controls {
position: static;
}
.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: auto;
min-height: 0;
padding-bottom: var(--app-floating-clearance, 68px);
}
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(--app-footer-measured-h, var(--app-footer-h)) + var(--app-bottom-nav-h, 0px) + 12px
);
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;
max-width: calc(100vw - 32px);
max-height: calc(
100dvh - var(--app-footer-measured-h, var(--app-footer-h)) - var(--app-bottom-nav-h, 0px) -
var(--app-more-h, 44px) - 32px
);
overflow-y: auto;
}
.fab-cluster > .mobile-utility-menu:not([open]) > .mobile-utility-menu-panel {
display: none;
}
.mobile-utility-trigger,
.fab-actions .fab-action[data-fab-target='addDetails'] {
min-height: var(--vui-touch-target);
}
/* M-26: icon-only 44px on phones — the trigger already carries
aria-label="More actions", so hiding the visible label doesn't touch the
accessible name. The panel it opens keeps full labels. */
.mobile-utility-trigger {
width: var(--vui-touch-target);
padding: 0;
gap: 0;
justify-content: center;
}
.mobile-utility-trigger .fab-label {
display: none;
}
.mobile-history-action,
.mobile-about-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);
}
/* M-33: a floating card over a still-scrollable list read as broken on a
phone. A full-height sheet needs no separate backdrop — it IS the whole
screen. .mcp-chat already lays out log (flex: 1 1 auto, scrolls) above
form (flex: 0 0 auto) in a column, so the composer stays pinned to the
bottom for free; only the widget's own geometry needs to go edge-to-edge.
top/bottom (not an explicit height) so --mcp-chat-keyboard-inset can
shrink the sheet from the bottom without fighting a fixed height. */
.mcp-chat-widget,
.mcp-chat-widget.is-positioned {
top: 0;
left: 0;
right: 0;
bottom: var(--mcp-chat-keyboard-inset, 0px);
width: auto;
height: auto;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
border: 0;
border-radius: 0;
resize: none;
}
.mcp-chat-head,
.mcp-chat-widget .mcp-chat {
border-radius: 0;
}
.mcp-chat-resize-handle {
display: none;
}
.mcp-chat-form {
grid-template-columns: 1fr;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mcp-chat-form .btn {
min-height: var(--vui-touch-target);
}
/* Coarse-pointer composer: 16px+ so iOS doesn't zoom the page on focus. */
#mcpChatInput {
font-size: max(16px, 1em);
}
body.left-drawer-open .fab-cluster {
display: none;
}
/* M-03/M-26: the bulk bar spans nearly the full width of this same corner,
and More sits right on top of its Clear button. Hide More (not the whole
cluster — other FAB buttons already hide per-view) while a selection is
active; nothing else needs the corner then. */
body:has(#bulkBar.active) .fab-cluster > .mobile-utility-menu {
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;
}
.toast-stack {
bottom: calc(
var(--app-footer-measured-h, var(--app-footer-h)) + var(--app-bottom-nav-h, 0px) +
var(--app-floating-clearance, 68px)
);
max-width: calc(100vw - 24px);
}
/* At most two single-line rows: totals, then the latest change with its
undo/history actions. About moves to the more menu. Spacing separates
totals at this width: no dot can be stranded at a line edge. */
.app-footer {
min-height: 0;
/* M-35: left/right clear the notch/rounded-corner inset in landscape. */
padding: 6px calc(14px + env(safe-area-inset-right, 0px))
calc(6px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
flex-wrap: wrap;
align-items: center;
gap: 2px 12px;
}
html[data-mobile-nav-visible] .app-footer {
/* The navigation already owns the safe area while displayed. */
padding-bottom: 6px;
}
.app-footer #appTotalsStrip {
flex: 1 1 100%;
min-width: 0;
min-height: 0;
justify-content: flex-start;
/* Whole totals wrap on the narrowest phones rather than clipping. */
flex-wrap: wrap;
padding: 0;
gap: 2px 12px;
}
.app-footer #appTotalsStrip .total-part {
flex: none;
white-space: nowrap;
}
.app-footer #appTotalsStrip .sep {
display: none;
}
.app-footer .app-history-ticker {
border-bottom: 0;
flex: 1 1 100%;
flex-wrap: nowrap;
justify-content: flex-start;
min-width: 0;
margin: 0;
padding: 0;
}
.app-footer .app-history-ticker :is(.ticker-label, .ticker-action) {
flex: none;
}
.app-footer .app-history-ticker .ticker-summary {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-footer .app-history-ticker :is(.history-entity-ref, .history-entity-ref-name) {
white-space: nowrap;
}
.app-history-ticker .ticker-action + .ticker-action::before,
.app-history-ticker .ticker-summary + .ticker-action::before {
content: none;
margin-right: 0;
}
.app-footer .app-about-link {
display: none;
}
.settings-popover {
left: var(--settings-left, 12px);
right: auto;
width: min(280px, calc(100vw - 28px));
max-height: calc(100dvh - 80px);
overflow-y: auto;
}
}
/* M-23: in a short landscape viewport, the More menu's single-column list
(Portal, Help, Feedback, Chat, Add, History, About) scrolls internally with
several items hidden below the fold. Two columns halves the row count. */
@media (max-width: 900px) and (max-height: 420px) {
.fab-cluster > .mobile-utility-menu > .mobile-utility-menu-panel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phone collection rows keep the printing together below the name. Explicit
cell sizing prevents desktop table density and borders leaking into the
two-line layout. Binder pages and deck tables keep their own presentation. */
@media (max-width: 599px) {
body.view-list .list-view.active tbody {
gap: 0;
}
body.view-list .list-view.active tbody tr.detail-trigger {
--mobile-row-leading: 48px;
border: 0;
border-bottom: 1px solid var(--color-line);
column-gap: 4px;
display: grid;
grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
grid-template-rows: 22px 20px;
min-height: 60px;
padding: 8px 10px 8px var(--mobile-row-leading);
position: relative;
row-gap: 1px;
}
body.view-list .list-view.active tbody tr.detail-trigger:has(.col-check) {
--mobile-row-leading: 76px;
}
body.view-list #listView.active tbody tr.detail-trigger td {
border: 0;
height: auto;
line-height: 20px;
margin: 0;
min-height: 0;
padding: 0;
}
body.view-list .list-view.active tbody tr.detail-trigger .card-name-cell {
display: block;
grid-column: 1 / 4;
grid-row: 1;
min-width: 0;
overflow: visible;
}
body.view-list .list-view.active .card-name-cell .card-name-thumb {
height: 42px;
left: calc(var(--mobile-row-leading) - 40px);
position: absolute;
top: 8px;
width: 30px;
}
body.view-list .list-view.active .card-name-cell .card-name-button {
display: block;
font-size: var(--font-size-md);
line-height: 22px;
min-height: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
body.view-list .list-view.active tbody tr.detail-trigger .price-cell {
grid-column: 4;
grid-row: 1;
justify-self: end;
}
body.view-list .list-view.active tbody tr.detail-trigger .set-cell {
grid-column: 1;
grid-row: 2;
white-space: nowrap;
}
body.view-list .list-view.active tbody tr.detail-trigger .cn-cell {
grid-column: 2;
grid-row: 2;
white-space: nowrap;
}
body.view-list .list-view.active tbody tr.detail-trigger .location-cell {
grid-column: 3;
grid-row: 2;
min-width: 0;
overflow: hidden;
padding-left: 4px;
}
body.view-list .list-view.active .location-cell .location-pill {
max-width: 100%;
}
body.view-list .list-view.active tbody tr.detail-trigger .qty-cell {
grid-column: 4;
grid-row: 2;
justify-self: end;
}
body.view-list .list-view.active tbody tr.detail-trigger .col-check {
height: 44px;
left: 6px;
position: absolute;
top: 8px;
width: 28px;
}
body.view-list
.list-view.active
tbody
tr.detail-trigger
:is(
.finish-cell,
.rarity-cell,
.condition-cell,
.tags-cell,
.collection-date-cell,
.collection-table-filler
) {
display: none;
}
}
@media (max-width: 599px) and (pointer: coarse) {
/* M-12: the checkbox's own hit box is 20x20 inside a 28x44 cell, so a
near miss falls through to the row and opens detail instead of
selecting. A `::before` hit-slop sized to the whole leading column at
full row height covers the miss (listRowActions.js's onClick routes any
tap landing on `.col-check` to a selection toggle); the checkbox glyph
itself is untouched, so nothing moves on screen. Sized in pixels, not
percent -- percentage height on this absolutely positioned box resolves
to 0 against a min-height-only row. */
body.view-list .list-view.active tbody tr.detail-trigger .col-check::before {
content: '';
position: absolute;
left: -6px;
top: -8px;
width: var(--mobile-row-leading);
height: 60px;
}
}
/* 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 {
/* Contain the book sort glyph in its column, not at the viewport edge. */
position: relative;
}
.list-view .collection-column-resize-handle {
/* This tier uses percentage columns rather than desktop drag widths. */
display: none;
}
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;
}
}
/* Landscape phones (iPhone-class devices in landscape sit around 350-430px
tall): the chrome above/below #listView leaves so little height that a
portrait-tuned layout barely shows any content. Scoped by height, not
orientation — the max-width above already keeps this off desktop. Placed
after the compact-table tier above so the sticky restore here wins the
cascade against that tier's `position: relative`. */
@media (max-width: 900px) and (max-height: 500px) {
/* M-31: art sits beside the form instead of above it, so the
price/quantity row never needs a scroll to reach. */
#detailDrawer .drawer-body {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: start;
gap: 14px;
}
#detailDrawer .detail-art-column {
margin-bottom: 0;
}
#detailDrawer :is(.drawer-image-frame, .drawer-placeholder) {
width: min(42vw, calc((100dvh - var(--detail-mobile-header-height) - 76px) * 488 / 680));
}
/* The narrow art column has no room for .detail-nav-position's fixed
16ch flex-basis alongside both 44px buttons (it doesn't shrink) —
drop the "N of M" label here and pin the buttons to the column's own
edges instead of centering a row wider than its container. */
#detailDrawer .detail-nav {
justify-content: space-between;
}
#detailDrawer .detail-nav-position {
display: none;
}
#detailDrawer #detailForm,
#detailDrawer .detail-scroll {
display: block;
}
/* M-18: the compact-table tier's `thead th { position: relative }` (above)
keeps a book decoration glyph inside its column but also stops the
header sticking, so a landscape phone's ~3 visible rows lose their
column labels on the first scroll. Restore sticky for the real table
(not the grid-mode reference table, which still needs the glyph fix). */
body.view-list .list-view.active thead th {
position: sticky;
}
/* The header row's own compact height/font live in book.css, next to the
60px/22px-blackletter rule this overrides. */
/* Collapse the footer to just the totals line so the list keeps its rows. */
.app-footer .app-history-ticker {
display: none;
}
}
.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 var(--app-floating-clearance, 68px);
--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;
gap: 16px 8px;
}
/* BEN-mobile-audit M-06: the sticky "View/Group/Sort" strip's status text
is the widest part of the fixed topbar and the first thing to overflow;
the card count/legality is still visible in the deck header above. */
.deck-topbar-status {
display: none;
}
/* BEN-mobile-audit M-07: --deck-name-bar was a fixed 26-36px tuned for a
~160-250px desktop card. On a phone a stacked column collapses to one
~378px-wide card (deckColumnLayoutForWidth has no room for a second),
so a 26px strip only bares the border, not the printed name. Measured
against real card art, the name plate sits at roughly 5%-10% of card
height (680/488 aspect) regardless of card size, so reveal to 11% of
that height (a hair past the plate) plus 48px of clearance below it for
the menu/quantity pill, so the pill has somewhere to live that isn't on
top of the name (see the pill rules below). Applies to every card size
since the rendered width on a phone is governed by viewport, not the
desktop small/medium/large preference. */
.deck-workspace.deck-card-size-small,
.deck-workspace.deck-card-size-medium,
.deck-workspace.deck-card-size-large {
--deck-name-bar: calc(100% * 680 / 488 * 0.11 + 48px);
}
/* Move the menu/quantity pill down into that clearance, off the name, and
shrink its visible size back down — the mobile 44px touch-target floor
(.icon-btn) otherwise inflates it to a solid 44px square. The hit area
stays 44px via the invisible ::after slop instead. */
.deck-workspace .deck-stack .deck-card .deck-card-menu-btn,
.deck-workspace .deck-side-stack .deck-card .deck-card-menu-btn,
.deck-workspace .deck-stack .deck-card .deck-card-quantity-pill,
.deck-workspace .deck-side-stack .deck-card .deck-card-quantity-pill {
top: 11%;
height: 22px;
min-height: 0;
}
.deck-workspace .deck-stack .deck-card .deck-card-menu-btn::after,
.deck-workspace .deck-side-stack .deck-card .deck-card-menu-btn::after {
content: '';
position: absolute;
inset: -11px 0;
}
/* M-24: Gallery was one left-aligned column (the desktop card width never
fit twice in a phone-width row). Two narrower columns fill the width. */
.deck-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@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;
}
/* M-25: .title-edit-cue is opacity: 0 until :hover/:focus-visible, so it
never actually shows on touch — but it still reserves layout width in
the title button's flex row, truncating short container/deck names
sooner than necessary. Drop it; tapping the title already opens the
same edit dialog. */
.title-edit-cue {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.app-shell,
.app-left,
.detail-drawer {
transition: none;
}
}
/* Tomebound: 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: none;
}
.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: none;
}
.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: none;
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: none;
}
.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: none;
}
.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);
}
/* Tomebound: 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: none;
}
.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: none;
}
.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: none;
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: none;
}
.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: none;
}
.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: none;
}
/* 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: none;
}
.settings-theme-select:hover,
.settings-theme-select:focus-visible {
border-color: var(--color-text-strong);
color: var(--color-text-strong);
outline: none;
}
/* Tomebound: patterns. Cascade order is declared in ../styles.css. */
/* Banner (BEN-449) is vellum-ui's canonical .banner component
(components.css) — tomebound 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 tomebound. ---- */
/* 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: none;
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: none;
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: none;
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);
}
/* Tomebound: decoration. Cascade order is declared in ../styles.css. */
/* ============================================================
* Arcane-ledger foundation decoration
*
* Applies the arcane-ledger visual language to tomebound'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. Tomebound 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;
}
}
/* Resize hit targets stay available without a decorative corner grip. */
.vui-modal-resize-handle::before,
.vui-modal-resize-handle::after,
.feedback-capture-resize-bottom-left::before {
content: none;
}
@media (max-width: 900px) {
.ui-modal-card > .vui-modal-resize-handle {
display: none;
}
}
/* Tomebound: 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: none;
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: none;
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: none;
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: none;
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: none;
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: none;
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: none;
}
.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;
}
/* Tomebound: 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-md, 5px) var(--radius-md, 5px) 0;
color: var(--color-text-strong);
cursor: pointer;
display: inline-flex;
font: inherit;
font-variant-numeric: tabular-nums;
justify-content: center;
block-size: var(--collection-toolbar-control-size);
box-sizing: border-box;
min-width: var(--collection-toolbar-control-size);
padding: 0 8px;
white-space: nowrap;
}
.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));
/* iOS: 100vh exceeds the visible area while Safari's bars are showing. */
max-height: min(720px, calc(100dvh - 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-popover-count {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
margin-right: auto;
}
.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: none;
}
.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;
}
/* Three levels: section titles (strong, body face) head a group of fields;
field labels stay small and muted; values read at control size. Sections are
separated by a full-width rule above each title. */
.collection-filter-hierarchy {
display: grid;
gap: 0;
}
.collection-filter-group {
display: grid;
gap: 10px 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 16px 0 18px;
}
.collection-filter-group:first-child {
padding-top: 2px;
}
.collection-filter-group + .collection-filter-group {
border-top: 1px solid var(--color-line);
}
.collection-filter-group-title {
color: var(--color-text-strong);
font-family: var(--font-body);
font-size: var(--font-size-md);
font-weight: 600;
grid-column: 1 / -1;
letter-spacing: -0.005em;
margin: 0 0 2px;
text-transform: none;
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: none;
}
.collection-filter-hierarchy .is-filter-active {
background: var(--color-accent-soft);
border-radius: var(--radius-sharp);
box-shadow: 0 0 0 5px var(--color-accent-soft);
color: var(--color-text-strong);
}
.collection-filter-hierarchy .is-filter-active > :is(span, .collection-filter-label),
.collection-filter-hierarchy label.is-filter-active {
color: var(--color-text-strong);
font-weight: 600;
}
.collection-filter-hierarchy .is-filter-active :is(input, select, .ms-trigger) {
border-color: var(--color-accent);
font-weight: 400;
}
.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: none;
}
.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 {
opacity: 1;
scale: 1;
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;
}
/* A separate row between the collection toolbar and the table or gallery. */
.collection-toolbar-filter-chips {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 0 0 auto;
padding: 8px 12px;
border-bottom: 1px solid var(--color-line-faint);
}
.collection-toolbar-filter-chips.hidden,
body:not(.view-list) .app-center > .collection-toolbar-filter-chips {
display: none;
}
.collection-toolbar-filter-chips .filter-chip {
font-size: var(--font-size-sm);
min-height: 26px;
}
.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;
}
}
/* Match Vellum's popover motion without changing layout or anchored transforms. */
:is(
.ms-popover,
.search-help-popover,
.settings-popover,
.sync-menu,
.autocomplete-list,
.deck-meta-ac-list,
.container-icon-picker,
.collection-toolbar-popover
) {
opacity: 1;
scale: 1;
transform-origin: var(--vui-popover-origin-x) var(--vui-popover-origin-y);
transition:
opacity var(--vui-motion-enter) var(--vui-ease-out),
scale var(--vui-motion-enter) var(--vui-ease-out),
display var(--vui-motion-enter) allow-discrete;
}
:is(
.ms-popover,
.search-help-popover,
.settings-popover,
.sync-menu,
.autocomplete-list,
.deck-meta-ac-list,
.container-icon-picker,
.collection-toolbar-popover
)[hidden],
:is(
.ms-popover,
.search-help-popover,
.settings-popover,
.sync-menu,
.collection-toolbar-popover
)[data-vui-state='closed'],
.search-help-popover:not(.visible),
.autocomplete-list:not(.active),
.deck-meta-ac-list:not(.active),
.multiselect:not(.collection-column-settings-dropdown) > .ms-popover:not(.open) {
opacity: 0;
scale: 0.97;
transition-duration: var(--vui-motion-exit);
}
@starting-style {
:is(
.ms-popover,
.search-help-popover,
.settings-popover,
.sync-menu,
.autocomplete-list,
.deck-meta-ac-list,
.container-icon-picker,
.collection-toolbar-popover
) {
opacity: 0;
scale: 0.97;
}
}
.collection-toolbar-popover-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.collection-view-settings-section[aria-label='sort'] label,
#collectionSettingsSort {
text-transform: none;
}
.autocomplete-pending {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
color: var(--color-text-muted);
cursor: default;
}
.history-drawer-layer {
z-index: 1101;
}
.mobile-filter-layer {
z-index: 170;
}
.mobile-filter-sheet-footer,
.mobile-utility-menu-head {
display: none;
}
.confirm-modal-body .field-label {
display: grid;
gap: 8px;
}
@media (max-width: 900px) {
.mobile-filter-sheet-footer {
display: flex;
margin-top: auto;
/* M-35: last thing in the sheet, sitting at the physical bottom edge. */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-utility-menu-head {
display: flex;
}
body .app-right-layer .app-right.ui-drawer {
display: flex;
transition: transform var(--vui-motion-drawer) var(--vui-ease-drawer);
}
.app-right-layer:not(.open) .app-right.ui-drawer {
transform: translateX(100%);
}
.app-right-layer.open .app-right.ui-drawer {
transform: translateX(0);
}
.mobile-filter-layer #appLeft.ui-drawer {
display: flex;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-snap: 0s;
--motion-fast: 0s;
--motion-base: 0s;
--motion-slow: 0s;
}
:is(
.ms-popover,
.search-help-popover,
.settings-popover,
.sync-menu,
.autocomplete-list,
.deck-meta-ac-list,
.container-icon-picker,
.collection-toolbar-popover,
.drawer-backdrop
),
body .app-right-layer .app-right.ui-drawer {
transition: none;
scale: 1;
}
}
|