/*
* mtgcollection stylesheet map
* 1. App shell, global modes, and shared controls
* 2. Collection grid and card tiles
* 3. Deck workspace, deck cards, and deck settings
* 4. Binder, locations, home views, and list/table view
* 5. Share/read-only mode, import, and add-card panels
* 6. Responsive overrides
*/
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
--app-footer-h: 38px;
--sidebar-tab-peek: 6px;
--sidebar-tab-hover-peek: 14px;
font-family: "Times New Roman", Times, Georgia, serif;
background: #f8f7f4;
color: #000;
text-transform: lowercase;
font-size: 0.9rem;
overflow: hidden;
}
html.text-size-compact { font-size: 15px; }
html.text-size-large { font-size: 18px; }
body.text-size-compact { --app-footer-h: 34px; }
body.text-size-large { --app-footer-h: 44px; }
/* A-shell border-frame layout */
.app-shell {
height: 100vh;
display: grid;
grid-template-rows: 60px minmax(0, 1fr) var(--app-footer-h);
grid-template-columns: 200px 1fr 360px;
grid-template-areas:
"header header header"
"left main right"
"left footer right";
transition: grid-template-columns 180ms ease;
}
.app-header {
grid-area: header;
border-bottom: 1px solid rgba(0,0,0,0.18);
box-shadow: 0 3px 8px -3px rgba(0,0,0,0.10);
background: #f8f7f4;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
padding: 0 20px;
gap: 18px;
}
.app-header h1 {
font-size: 1.3rem;
font-weight: 400;
letter-spacing: -0.02em;
white-space: nowrap;
}
.app-title-row {
align-items: center;
display: inline-flex;
gap: 10px;
min-width: 0;
}
.sidebar-edge-toggle {
--sidebar-tab-size: 38px;
--sidebar-tab-hit-inset: 5px;
background: #fff;
border: 1px solid #b9b4aa;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,0.16);
color: #111;
cursor: pointer;
display: grid;
font: inherit;
font-size: 1rem;
height: var(--sidebar-tab-size);
left: 200px;
opacity: 1;
padding: 0;
place-items: center;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
transition: left 180ms ease, border-color 120ms ease, box-shadow 120ms ease;
width: var(--sidebar-tab-size);
z-index: 46;
}
.sidebar-edge-toggle::before {
background: rgba(255,255,255,0.001);
border-radius: 999px;
content: "";
inset: calc(-1 * var(--sidebar-tab-hit-inset));
position: absolute;
}
.sidebar-edge-toggle:hover,
.sidebar-edge-toggle:focus-visible {
border-color: #777;
box-shadow: 0 3px 10px rgba(0,0,0,0.18);
outline: none;
}
body.left-sidebar-collapsed .sidebar-edge-toggle {
left: var(--sidebar-tab-peek);
}
body.sidebar-tab-simple .sidebar-edge-toggle {
--sidebar-tab-size: 34px;
--sidebar-tab-hit-inset: 6px;
border-radius: 999px;
left: 200px;
transform: translate(-50%, -50%);
width: var(--sidebar-tab-size);
}
body.left-sidebar-collapsed.sidebar-tab-simple .sidebar-edge-toggle {
left: var(--sidebar-tab-peek);
transform: translate(-50%, -50%);
}
body.left-sidebar-collapsed:not(.left-drawer-open) .sidebar-edge-toggle:hover,
body.left-sidebar-collapsed:not(.left-drawer-open) .sidebar-edge-toggle:focus-visible,
body.left-sidebar-collapsed:not(.left-drawer-open).left-sidebar-peeking .sidebar-edge-toggle,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:hover) .sidebar-edge-toggle,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:focus-visible) .sidebar-edge-toggle {
left: var(--sidebar-tab-hover-peek);
}
body.view-deck .sidebar-edge-toggle,
body.share-mode .sidebar-edge-toggle {
display: none;
}
body.chrome-classic .sidebar-edge-toggle {
border-color: #000;
box-shadow: none;
}
body.chrome-classic .sidebar-edge-toggle::before {
background: rgba(255,255,255,0.001);
}
.title-reset-btn {
background: transparent;
border: none;
padding: 0;
font: inherit;
color: inherit;
text-transform: lowercase;
cursor: pointer;
letter-spacing: inherit;
}
.title-reset-btn:hover { color: #444; }
.title-reset-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.app-header-views {
justify-self: end;
display: inline-flex;
border: 1px solid #000;
border-radius: 2px;
overflow: hidden;
}
.app-header-views .toggle-view {
background: transparent;
border: none;
border-right: 1px solid #000;
border-radius: 0;
padding: 5px 12px;
font-family: inherit;
font-size: 0.78rem;
text-transform: lowercase;
cursor: pointer;
color: #000;
}
.app-header-views .toggle-view:last-child { border-right: none; }
.app-header-views .toggle-view:hover { background: #eee; }
.app-header-views .toggle-view.active { background: #000; color: #fff; }
.app-header-views .view-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-right: 5px;
vertical-align: -2px;
line-height: 1;
font-size: 0.95em;
}
.app-header-views .view-icon-svg { vertical-align: -2px; }
.sync-account-slot {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
justify-self: end;
min-width: 84px;
}
.sync-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border: 1px solid #000;
border-radius: 2px;
background: #f8f7f4;
color: #000;
font-family: inherit;
font-size: 0.75rem;
text-transform: lowercase;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.sync-chip:hover { background: #eee; }
.sync-chip-needs-attention::after {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #8756a0;
box-shadow: 0 0 0 1px #f8f7f4, 0 0 0 2px rgba(0,0,0,0.22);
margin-left: 1px;
}
.sync-chip-error.sync-chip-needs-attention::after { background: #a02020; }
.sync-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #777;
}
.sync-chip-synced .sync-dot { background: #19784c; }
.sync-chip-syncing .sync-dot,
.sync-chip-signing-in .sync-dot { background: #9d6a00; }
.sync-chip-queued .sync-dot { background: #8756a0; }
.sync-chip-error .sync-dot { background: #a02020; }
.sync-chip-account .sync-dot {
position: relative;
width: 14px;
height: 14px;
border-radius: 0;
background: transparent;
}
.sync-chip-account .sync-dot::before,
.sync-chip-account .sync-dot::after {
content: "";
position: absolute;
left: 50%;
border: 1px solid currentColor;
transform: translateX(-50%);
}
.sync-chip-account .sync-dot::before {
top: 1px;
width: 5px;
height: 5px;
border-radius: 50%;
background: transparent;
}
.sync-chip-account .sync-dot::after {
bottom: 1px;
width: 10px;
height: 6px;
border-radius: 7px 7px 2px 2px;
border-bottom-width: 0;
}
.sync-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 80;
width: 210px;
border: 1px solid #000;
background: #fffefa;
box-shadow: 0 8px 18px rgba(0,0,0,0.16);
padding: 8px;
}
.sync-menu[hidden] { display: none; }
.sync-menu-meta {
display: grid;
gap: 2px;
padding: 2px 4px 8px;
border-bottom: 1px solid rgba(0,0,0,0.14);
margin-bottom: 6px;
font-size: 0.75rem;
}
.sync-menu-meta span { color: #666; }
.sync-menu-status {
align-items: flex-start;
border-top: 1px solid rgba(0,0,0,0.14);
color: #666;
display: flex;
gap: 7px;
line-height: 1.25;
margin-top: 6px;
padding: 8px 4px 2px;
}
.sync-menu-status-dot {
background: #777;
border-radius: 50%;
flex: 0 0 auto;
height: 7px;
margin-top: 4px;
width: 7px;
}
.sync-menu-status-synced .sync-menu-status-dot { background: #19784c; }
.sync-menu-status-syncing .sync-menu-status-dot,
.sync-menu-status-signing-in .sync-menu-status-dot { background: #9d6a00; }
.sync-menu-status-queued .sync-menu-status-dot { background: #8756a0; }
.sync-menu-status-error .sync-menu-status-dot { background: #a02020; }
.sync-menu-status-text {
display: grid;
gap: 2px;
min-width: 0;
}
.sync-menu-status-label {
color: #000;
font-size: 0.72rem;
font-weight: 400;
}
.sync-menu-status-detail {
font-size: 0.68rem;
}
.sync-menu .sync-menu-learn-link {
background: transparent;
border: 0;
color: #333;
cursor: pointer;
display: inline;
font: inherit;
font-size: 0.68rem;
padding: 0;
text-align: left;
text-decoration: underline;
text-underline-offset: 2px;
width: auto;
}
.sync-menu .sync-menu-learn-link:hover,
.sync-menu .sync-menu-learn-link:focus-visible {
background: transparent;
color: #000;
outline: none;
}
.sync-menu button {
display: block;
width: 100%;
border: none;
background: transparent;
padding: 6px 4px;
text-align: left;
font: inherit;
font-size: 0.78rem;
text-transform: lowercase;
cursor: pointer;
}
.sync-menu button:hover { background: #eee; }
.export-modal {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.25);
padding: 18px;
}
.export-modal[hidden] { display: none; }
.export-modal-card {
width: min(360px, 100%);
border: 1px solid #111;
background: #fff;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
padding: 14px;
}
.export-modal-title { margin: 0 0 12px; font-size: 1rem; }
.export-modal-body { display: flex; flex-direction: column; gap: 10px; }
.export-choice-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.export-choice-select {
min-width: 0;
font: inherit;
border: 1px solid #bbb;
background: #fff;
padding: 8px;
}
.export-choice-btn {
font: inherit;
border: 1px solid #111;
background: #fff;
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.export-choice-btn:hover { background: #eee; }
.export-modal-actions { display: flex; justify-content: flex-end; }
.sync-details-window {
position: fixed;
right: 16px;
top: 72px;
z-index: 76;
display: flex;
flex-direction: column;
width: min(var(--sync-details-width, 440px), calc(100vw - 24px));
height: min(var(--sync-details-height, 430px), calc(100dvh - 24px));
min-width: min(340px, calc(100vw - 24px));
min-height: min(300px, calc(100dvh - 24px));
max-width: calc(100vw - 24px);
max-height: calc(100dvh - 24px);
background: #fff;
border: 1px solid #111;
border-radius: 6px;
box-shadow: 0 14px 38px rgba(0,0,0,0.22);
opacity: 0;
overflow: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
visibility: hidden;
}
.sync-details-window.is-positioned {
left: var(--sync-details-left);
right: auto;
top: var(--sync-details-top);
}
.sync-details-window.is-dragging,
.sync-details-window.is-resizing {
transition: none;
user-select: none;
}
body.sync-details-open .sync-details-window {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
visibility: visible;
}
.sync-details-head {
align-items: center;
background: #111;
color: #fff;
cursor: move;
display: flex;
gap: 12px;
justify-content: space-between;
min-height: 42px;
padding: 8px 10px 8px 12px;
touch-action: none;
}
.sync-details-head h2 {
font-size: 0.86rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
}
.sync-details-close {
align-items: center;
background: transparent;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-flex;
font: inherit;
height: 28px;
justify-content: center;
min-width: 28px;
padding: 0 8px;
}
.sync-details-close:hover,
.sync-details-close:focus-visible {
border-color: #fff;
outline: none;
}
.sync-details-body {
background: #fbfaf7;
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 12px;
min-height: 0;
overflow: auto;
padding: 14px;
}
.sync-details-body p {
color: #333;
font-size: 0.82rem;
line-height: 1.42;
margin: 0;
}
.sync-details-section {
border-top: 1px solid #e2ded6;
padding-top: 10px;
}
.sync-details-section h3 {
font-size: 0.76rem;
font-weight: 600;
margin: 0 0 4px;
text-transform: lowercase;
}
.sync-details-resize-handle {
position: absolute;
z-index: 3;
touch-action: none;
}
.sync-details-resize-left {
bottom: 12px;
cursor: ew-resize;
left: 0;
top: 42px;
width: 8px;
}
.sync-details-resize-right {
bottom: 12px;
cursor: ew-resize;
right: 0;
top: 42px;
width: 8px;
}
.sync-details-resize-bottom {
bottom: 0;
cursor: ns-resize;
height: 8px;
left: 12px;
right: 12px;
}
.sync-details-resize-bottom-left {
bottom: 0;
cursor: nesw-resize;
height: 16px;
left: 0;
width: 16px;
}
.sync-details-resize-bottom-right {
bottom: 0;
cursor: nwse-resize;
height: 16px;
right: 0;
width: 16px;
}
.app-left {
grid-area: left;
border-right: 1px solid rgba(0,0,0,0.26);
box-shadow: 4px 0 10px -6px rgba(0,0,0,0.18);
padding: 16px 14px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
background: #efede7;
opacity: 1;
transform: translateX(0);
transition: transform 180ms ease, opacity 120ms ease, box-shadow 180ms ease;
will-change: transform;
}
.sidebar-label {
font-size: 0.65rem;
letter-spacing: 0.06em;
color: #666;
margin-bottom: 6px;
text-transform: lowercase;
}
.sidebar-section .search-wrap {
position: relative;
display: flex;
align-items: center;
max-width: none;
width: 100%;
}
.sidebar-section .search-wrap .search-input {
width: 100%;
flex: 1;
background: rgba(255,255,255,0.36);
border: none;
border-bottom: 1px solid #777;
padding: 4px 46px 4px 0;
font-family: inherit;
font-size: 0.85rem;
color: #000;
outline: none;
text-transform: lowercase;
border-radius: 0;
max-width: none;
}
.sidebar-section .search-wrap .search-input:focus {
background: rgba(255,255,255,0.52);
border-bottom-color: #000;
border-bottom-width: 2px;
}
.sidebar-filters {
display: flex;
flex-direction: column;
gap: 6px;
}
.sidebar-filters select {
background: transparent;
border: none;
border-bottom: 1px solid #bfb7aa;
padding: 4px 16px 4px 0;
font-family: inherit;
font-size: 0.8rem;
color: #333;
width: 100%;
outline: none;
text-transform: lowercase;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 2px center;
cursor: pointer;
min-width: 0;
}
.sidebar-filters select:hover { border-bottom-color: #000; }
.sidebar-sizes {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #eee;
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.sidebar-sizes .segmented { width: 100%; display: flex; }
.sidebar-sizes .segmented .segment-btn { flex: 1; }
.sidebar-sizes .btn { width: 100%; }
.sidebar-sizes .progress { font-size: 0.7rem; color: #999; margin-left: 0; text-align: center; }
.sidebar-view-settings {
display: none;
}
body.view-list .sidebar-view-settings {
display: grid;
gap: 6px;
}
.app-center {
grid-area: main;
overflow-y: auto;
padding: 18px 20px;
min-width: 0;
}
body.view-list .app-center { padding: 0; scrollbar-width: none; }
body.view-list .app-center::-webkit-scrollbar { display: none; }
body.left-sidebar-collapsed .app-left {
box-shadow: 4px 0 10px -6px rgba(0,0,0,0.18);
opacity: 1;
pointer-events: none;
transform: translateX(calc(-100% + var(--sidebar-tab-peek)));
width: 200px;
}
body.left-sidebar-collapsed:not(.left-drawer-open).left-sidebar-peeking .app-left,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:hover) .app-left,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:focus-visible) .app-left {
box-shadow: 4px 0 10px -6px rgba(0,0,0,0.18);
opacity: 1;
transform: translateX(calc(-100% + var(--sidebar-tab-hover-peek)));
}
body.left-sidebar-collapsed .app-shell {
grid-template-columns: var(--sidebar-tab-peek) minmax(0, 1fr) 360px;
}
body.left-sidebar-collapsed:not(.left-drawer-open).left-sidebar-peeking .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:hover) .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:focus-visible) .app-shell {
grid-template-columns: var(--sidebar-tab-hover-peek) minmax(0, 1fr) 360px;
}
body.left-sidebar-collapsed.view-list .app-shell,
body.left-sidebar-collapsed.view-binder .app-shell,
body.left-sidebar-collapsed.view-locations .app-shell {
grid-template-columns: var(--sidebar-tab-peek) minmax(0, 1fr) 0;
}
body.left-sidebar-collapsed:not(.left-drawer-open).left-sidebar-peeking.view-list .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open).left-sidebar-peeking.view-binder .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open).left-sidebar-peeking.view-locations .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:hover).view-list .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:hover).view-binder .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:hover).view-locations .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:focus-visible).view-list .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:focus-visible).view-binder .app-shell,
body.left-sidebar-collapsed:not(.left-drawer-open):has(.sidebar-edge-toggle:focus-visible).view-locations .app-shell {
grid-template-columns: var(--sidebar-tab-hover-peek) minmax(0, 1fr) 0;
}
body.left-sidebar-collapsed.view-deck .app-shell {
grid-template-columns: 0 minmax(0, 1fr) 0;
}
.app-totals-strip {
position: static;
z-index: auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
min-height: 36px;
margin: 0;
padding: 7px 20px 6px;
border-bottom: 1px solid rgba(0,0,0,0.16);
background: #f8f7f4;
color: #666;
font-size: 0.76rem;
line-height: 1.3;
}
body.view-list .app-totals-strip {
margin: 0;
padding: 8px 20px;
box-shadow: 0 -3px 8px -6px rgba(0,0,0,0.24);
}
.app-totals-strip strong {
color: #000;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.app-totals-strip .sep { color: #bbb; }
body.view-binder .app-center {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow-y: auto;
}
body.view-binder #collectionSection {
display: flex;
flex: 1 1 0;
flex-direction: column;
min-height: 0;
overflow: visible;
}
body.view-binder #collectionSection.hidden { display: none !important; }
.app-right {
grid-area: right;
border-left: 1px solid rgba(0,0,0,0.16);
box-shadow: -3px 0 8px -3px rgba(0,0,0,0.08);
overflow-y: auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 14px;
background: #f8f7f4;
}
.app-right details.add-details,
.app-right details.import-details,
.app-right details.stats-panel {
margin-bottom: 0;
}
.app-right-close {
display: none;
}
/* List-view + locations + binder: hide right sidebar until the add drawer opens. */
body.view-list .app-shell,
body.view-binder .app-shell,
body.view-locations .app-shell {
grid-template-columns: 200px 1fr 0;
}
body.view-binder .app-shell {
grid-template-rows: 60px minmax(0, 1fr) 0;
}
body.view-binder .app-footer {
display: none;
}
body.view-list .app-right,
body.view-binder .app-right,
body.view-locations .app-right { display: none; }
body.view-deck .app-shell {
grid-template-columns: 0 minmax(0, 1fr) 0;
}
body.view-deck .app-left,
body.view-deck .app-right {
display: none;
}
/* Drawer-open: float the sidebar in from the right for shapes that hide it. */
body.view-list.right-drawer-open .app-right,
body.view-binder.right-drawer-open .app-right,
body.view-deck.right-drawer-open .app-right {
display: flex;
position: fixed;
top: 60px;
right: 0;
bottom: var(--app-footer-h);
width: 440px;
z-index: 50;
box-shadow: -2px 0 12px rgba(0,0,0,0.15);
border-left: 1px solid #000;
background: #f8f7f4;
}
.app-right-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.18);
z-index: 40;
display: none;
}
body.view-list.right-drawer-open .app-right-backdrop,
body.view-binder.right-drawer-open .app-right-backdrop,
body.view-deck.right-drawer-open .app-right-backdrop { display: block; }
/* FAB cluster — always visible (even with an empty collection so the user
can reach the add panel from list view, where the right sidebar is hidden) */
.fab-cluster {
position: fixed;
right: 16px;
bottom: calc(var(--app-footer-h) + 48px);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
z-index: 30;
}
body.right-drawer-open .fab-cluster { display: none; }
body.view-locations .fab-cluster,
.fab-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: #000;
color: #fff;
border: 1px solid #000;
border-radius: 2px;
font-family: inherit;
font-size: 0.75rem;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
text-transform: lowercase;
letter-spacing: 0;
}
.fab-btn:hover { background: #333; }
.fab-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.fab-glyph {
font-family: "Times New Roman", Times, Georgia, serif;
font-size: 0.9rem;
line-height: 1;
}
.fab-label { white-space: nowrap; }
.fab-btn.mobile-filter-fab { display: none; }
body.right-drawer-open .fab-cluster {
display: flex;
z-index: 70;
}
body.right-drawer-open .fab-cluster .fab-btn:not(.mcp-chat-fab) {
display: none;
}
.app-footer {
grid-area: footer;
border-top: 1px solid rgba(0,0,0,0.18);
box-shadow: 0 -3px 8px -3px rgba(0,0,0,0.08);
background: #f8f7f4;
display: grid;
grid-template-rows: minmax(var(--app-footer-h), auto);
min-height: var(--app-footer-h);
padding: 0;
font-size: 0.75rem;
color: #444;
}
body.view-binder.right-drawer-open .app-right {
bottom: 0;
}
.footer-storage-nag { color: #999; font-size: 0.7rem; letter-spacing: 0.02em; }
.field-deck-only.hidden { display: none !important; }
.add-ownership-readout {
display: block;
color: #666;
font-size: 0.78rem;
margin-bottom: 4px;
}
.add-ownership-readout.placeholder-state { color: #b58a00; }
.add-placeholder-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: #555;
font-size: 0.78rem;
cursor: pointer;
}
.add-placeholder-toggle input { margin: 0; }
.settings-reset-action {
border: 1px dashed #ccc;
background: transparent;
color: #888;
cursor: pointer;
font: inherit;
font-size: 0.72rem;
min-height: 30px;
padding: 6px 8px;
text-transform: lowercase;
width: 100%;
}
.settings-reset-action:hover,
.settings-reset-action:focus-visible {
border-color: #000;
color: #000;
outline: none;
}
.settings-test-status {
font-size: 0.7rem;
color: #888;
opacity: 0;
transition: opacity 0.2s;
}
.settings-test-status.visible { opacity: 1; }
.header-settings {
display: inline-flex;
position: relative;
}
.settings-toggle {
background: none;
border: 1px solid #ddd;
border-radius: 2px;
cursor: pointer;
color: #777;
font: inherit;
font-size: 0.7rem;
letter-spacing: 0.02em;
padding: 2px 7px;
text-transform: lowercase;
}
.settings-toggle:hover,
.settings-toggle:focus-visible,
.settings-toggle[aria-expanded="true"] {
border-color: #000;
color: #000;
outline: none;
}
.settings-popover {
background: #fffefa;
border: 1px solid #000;
box-shadow: 0 10px 24px rgba(0,0,0,0.16);
color: #000;
display: grid;
gap: 12px;
padding: 12px;
position: absolute;
right: 0;
top: calc(100% + 8px);
width: 264px;
z-index: 90;
}
.settings-popover[hidden] { display: none; }
.settings-group {
display: grid;
gap: 5px;
}
.settings-label {
color: #777;
font-size: 0.65rem;
letter-spacing: 0.04em;
}
.settings-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
}
.settings-option {
background: transparent;
border: 1px solid #cfc8bb;
border-right: none;
color: #555;
cursor: pointer;
font: inherit;
font-size: 0.72rem;
line-height: 1;
min-height: 28px;
padding: 6px 8px;
text-transform: lowercase;
white-space: nowrap;
}
.settings-option:last-child { border-right: 1px solid #cfc8bb; }
.settings-option:hover,
.settings-option:focus-visible {
color: #000;
outline: none;
}
.settings-option.active {
background: #000;
border-color: #000;
color: #fff;
}
.settings-option.active + .settings-option {
border-left-color: #000;
}
.settings-utility-group {
border-top: 1px solid #e3ded4;
padding-top: 10px;
}
/* Classic chrome — opt-in via toggle, restores the hard 1px #000 frame */
body.chrome-classic .app-header { border-bottom: 1px solid #000; box-shadow: none; }
body.chrome-classic .app-left { border-right: 1px solid #000; box-shadow: none; }
body.chrome-classic .app-right { border-left: 1px solid #000; box-shadow: none; }
body.chrome-classic .app-footer { border-top: 1px solid #000; box-shadow: none; }
/* Proper-case mode — flip the global lowercase aesthetic */
body.proper-case * { text-transform: none; }
body.proper-case .set-cell,
body.proper-case .rarity-cell,
body.proper-case .condition-cell { text-transform: uppercase; }
body.proper-case th,
body.proper-case .sidebar-label,
body.proper-case .toggle-view,
body.proper-case .btn,
body.proper-case .fab-btn,
body.proper-case .fab-label,
body.proper-case label,
body.proper-case .pending-label,
body.proper-case .history-list .history-undo,
body.proper-case .history-details summary,
body.proper-case .ms-pill,
body.proper-case .ms-option,
body.proper-case .filter-select,
body.proper-case .stat-label,
body.proper-case .printing-set-name,
body.proper-case .title-reset-btn { text-transform: capitalize; }
/* Sentence-style strings — show source as-is in proper-case mode (source is
written sentence-case; lowercase mode is handled by body's text-transform). */
body.proper-case .footer-storage-nag,
body.proper-case .history-list .history-summary-text,
body.proper-case .printing-list-caption,
body.proper-case .ms-trigger-label { text-transform: none; }
/* Tags and locations are user-entered free text — keep them as stored
(lowercase) regardless of the case toggle. Override the .ms-pill / .ms-option
capitalize rule above for those specific multiselects. */
body.proper-case #filterLocation .ms-pill,
body.proper-case #filterLocation .ms-option,
body.proper-case #filterTag .ms-pill,
body.proper-case #filterTag .ms-option,
body.proper-case .loc-pill-name,
body.proper-case .loc-link,
body.proper-case .row-tag,
body.proper-case .tag-chip { text-transform: none !important; }
/* Multiselect filter control */
.multiselect { position: relative; width: 100%; }
.multiselect .ms-trigger {
width: 100%;
text-align: left;
background: transparent;
border: none;
border-bottom: 1px solid #ddd;
padding: 4px 16px 4px 0;
font-family: inherit;
font-size: 0.8rem;
color: #333;
cursor: pointer;
text-transform: lowercase;
border-radius: 0;
min-width: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 2px center;
}
.multiselect .ms-trigger:hover { border-bottom-color: #000; }
.multiselect.has-selection .ms-trigger { color: #000; border-bottom-color: #000; }
.multiselect .ms-popover {
display: none;
position: absolute;
z-index: 50;
top: 100%;
left: 0;
right: 0;
margin-top: 2px;
background: #fff;
border: 1px solid #000;
border-radius: 2px;
max-height: 240px;
overflow-y: auto;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.multiselect .ms-popover.open { display: block; }
.multiselect .ms-option {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
font-size: 0.8rem;
cursor: pointer;
text-transform: lowercase;
}
.multiselect .ms-option:hover { background: #f4f4f0; }
.multiselect .ms-option input { margin: 0; cursor: pointer; }
.multiselect .ms-empty { padding: 6px 8px; font-size: 0.75rem; color: #999; }
.multiselect .ms-group-header {
padding: 6px 8px 2px;
font-size: 0.65rem;
letter-spacing: 0.06em;
color: #999;
text-transform: lowercase;
border-top: 1px solid #eee;
}
.multiselect .ms-group-header:first-child { border-top: none; }
.multiselect .ms-trigger-label.ms-pills {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
.multiselect .ms-pill {
background: #f0ece0;
padding: 1px 6px;
border-radius: 2px;
font-size: 0.7rem;
line-height: 1.4;
color: #000;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clear-filters-btn {
display: none;
width: 100%;
margin-top: 4px;
text-align: center;
}
.clear-filters-btn.visible { display: block; }
.btn {
padding: 8px 16px;
border: 1px solid #000;
border-radius: 2px;
font-size: 0.8rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s;
text-transform: lowercase;
background: #000;
color: #fff;
}
.btn:hover { background: #333; }
.btn:disabled { background: #ccc; border-color: #ccc; cursor: default; }
.btn-secondary { background: transparent; color: #000; }
.btn-secondary:hover { background: #eee; }
.btn-danger { background: transparent; color: #999; border-color: #ccc; }
.btn-danger:hover { color: #c00; border-color: #c00; }
/* Drop zone */
.drop-zone {
border: 2px dashed #ccc;
border-radius: 4px;
padding: 40px 20px;
text-align: center;
color: #999;
cursor: pointer;
transition: all 0.15s;
margin-bottom: 16px;
}
.drop-zone:hover, .drop-zone.drag-over {
border-color: #000;
color: #000;
background: #fff;
}
.drop-zone p { margin: 4px 0; }
.drop-zone .small { font-size: 0.75rem; color: #ccc; }
.paste-area {
width: 100%;
min-height: 120px;
border: 1px solid #ccc;
border-radius: 2px;
padding: 8px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.75rem;
resize: vertical;
background: #fff;
color: #000;
text-transform: none;
margin-bottom: 8px;
}
.paste-area:focus { border-color: #000; outline: none; }
.import-actions { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.export-actions { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #eee; }
.export-label { font-size: 0.8rem; color: #666; }
.export-format-select { font: inherit; font-size: 0.8rem; padding: 4px 6px; border: 1px solid #ccc; background: #fff; }
/* Stats */
.stats {
display: flex;
gap: 24px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.stat-label { font-size: 0.7rem; letter-spacing: 0.03em; color: #999; }
.stat-value { font-size: 1.5rem; font-weight: 400; }
.stats-panel {
margin-bottom: 16px;
border: 1px solid #eee;
background: #fff;
padding: 10px 14px;
border-radius: 2px;
}
.stats-panel > summary {
cursor: pointer;
font-size: 0.8rem;
letter-spacing: 0.02em;
color: #666;
list-style: revert;
}
.stats-panel > summary::marker { color: #999; }
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 12px;
}
.stats-section-title {
font-size: 0.7rem;
letter-spacing: 0.04em;
color: #999;
font-weight: 400;
margin-bottom: 8px;
text-transform: lowercase;
}
.curve-row, .breakdown-row {
display: grid;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: #444;
margin-bottom: 3px;
text-transform: lowercase;
}
.curve-row { grid-template-columns: 24px 1fr 28px; }
.breakdown-row { grid-template-columns: 1fr 28px; }
.curve-bucket { color: #999; }
.curve-bar-wrap {
background: #f1f1f1;
height: 10px;
border-radius: 1px;
overflow: hidden;
}
.curve-bar {
height: 100%;
background: #222;
}
.breakdown-count, .curve-count { text-align: right; color: #666; font-variant-numeric: tabular-nums; }
.color-pie {
width: 88px;
height: 88px;
display: block;
margin: 0 auto 4px;
}
.color-legend {
font-size: 0.7rem;
color: #555;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px 6px;
}
.color-legend-row {
display: flex;
align-items: center;
gap: 5px;
text-transform: lowercase;
}
.color-swatch {
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}
/* Shared controls: search, segmented buttons, and filters */
.controls {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
}
.controls input, .controls select {
background: transparent;
border: none;
border-bottom: 1px solid #000;
color: #000;
padding: 4px 2px;
font-size: 0.85rem;
font-family: inherit;
text-transform: lowercase;
outline: none;
border-radius: 0;
-webkit-appearance: none;
}
.controls input:focus, .controls select:focus { border-bottom-width: 2px; }
.controls .search-input { width: 200px; flex: 1; max-width: 280px; }
.search-wrap {
position: relative;
display: flex;
align-items: center;
flex: 1;
max-width: 280px;
}
.search-wrap .search-input { flex: 1; padding-right: 46px; max-width: none; }
.search-clear-btn {
position: absolute;
right: 26px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: #999;
cursor: pointer;
font-size: 0.95rem;
line-height: 1;
padding: 0 4px;
display: none;
}
.search-clear-btn.visible { display: block; }
.search-clear-btn:hover, .search-clear-btn:focus-visible { color: #000; outline: none; }
.search-help-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 1px solid #ccc;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 0.65rem;
line-height: 1;
color: #999;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.search-help-btn:hover, .search-help-btn:focus-visible { color: #000; border-color: #000; outline: none; }
.search-help-popover {
position: fixed;
z-index: 100;
background: #fff;
border: 1px solid #ccc;
padding: 12px 14px;
font-size: 0.72rem;
line-height: 1.7;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
width: 320px;
max-width: calc(100vw - 40px);
text-transform: none;
display: none;
}
.search-help-popover.visible { display: block; }
.search-help-popover .syntax-title {
font-size: 0.7rem;
letter-spacing: 0.04em;
color: #999;
margin-bottom: 6px;
}
.search-help-popover code {
background: #f0f0f0;
padding: 1px 5px;
border-radius: 2px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.92em;
}
.controls .filter-select { min-width: 90px; padding-right: 16px; }
.segmented {
display: inline-flex;
border: 1px solid #ccc;
border-radius: 2px;
overflow: hidden;
}
.segment-btn {
appearance: none;
border: none;
border-right: 1px solid #ccc;
background: transparent;
color: #999;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
line-height: 1;
padding: 6px 8px;
text-transform: lowercase;
}
.segment-btn:last-child { border-right: none; }
.segment-btn.active {
background: #000;
color: #fff;
}
.segment-btn:focus-visible {
outline: 2px solid #000;
outline-offset: -2px;
}
/* Collection grid and card tiles */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.grid.grid-small { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 7px; }
.grid.grid-medium { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.grid.grid-large { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.card-tile {
position: relative;
border: none;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
background: #e8e8e8;
aspect-ratio: 488 / 680;
transition: transform 0.1s;
padding: 0;
display: block;
width: 100%;
font: inherit;
}
.card-tile:hover, .card-tile:focus-visible { transform: translateY(-2px); }
.card-tile:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.card-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-tile .placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 8px;
text-align: center;
font-size: 0.7rem;
color: #999;
text-transform: none;
}
.card-badges {
position: absolute;
top: 4px;
right: 4px;
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-end;
}
.badge {
background: rgba(0,0,0,0.8);
color: #fff;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 2px;
letter-spacing: 0.02em;
backdrop-filter: blur(4px);
}
.card-tile.is-foil::after,
.deck-card.is-foil .deck-card-face::after,
.collection-visual-card.is-foil .collection-visual-card-art::after,
.deck-preview-frame.is-foil::after,
.drawer-image-frame.is-foil::after,
.binder-slot.is-foil::after,
#cardPreview.is-foil::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(
110deg,
transparent 18%,
rgba(255, 90, 180, 0.42) 38%,
rgba(120, 200, 255, 0.42) 50%,
rgba(140, 255, 110, 0.42) 62%,
transparent 82%
);
mix-blend-mode: screen;
}
.card-tile.is-etched::after,
.deck-card.is-etched .deck-card-face::after,
.collection-visual-card.is-etched .collection-visual-card-art::after,
.deck-preview-frame.is-etched::after,
.drawer-image-frame.is-etched::after,
.binder-slot.is-etched::after,
#cardPreview.is-etched::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(110deg, transparent 25%, rgba(180, 80, 220, 0.45) 50%, transparent 75%);
mix-blend-mode: screen;
}
.card-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: #fff;
padding: 20px 6px 5px;
font-size: 0.65rem;
letter-spacing: 0.02em;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
.card-tile:hover .card-caption, .card-tile:focus-within .card-caption { opacity: 1; }
.card-loc {
position: absolute;
top: 4px;
left: 4px;
z-index: 2;
pointer-events: auto;
}
.card-loc .loc-pill {
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
cursor: pointer;
}
.card-loc .loc-pill:hover { filter: brightness(0.95); }
.card-actions {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 18px 6px 5px;
background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
color: #fff;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
.card-tile:hover .card-actions, .card-tile:focus-within .card-actions { opacity: 1; pointer-events: auto; }
.card-action-label, .card-scryfall-link {
color: #fff;
font-size: 0.65rem;
letter-spacing: 0.02em;
text-decoration: none;
text-transform: lowercase;
}
.card-scryfall-link {
appearance: none;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.45);
cursor: pointer;
font: inherit;
padding: 0;
}
.card-scryfall-link:hover, .card-scryfall-link:focus-visible { border-color: #fff; outline: none; }
/* Deck workspace, cards, settings, and dashboard */
/* Deck view — moxfield-style stacked columns */
.deck-view { display: none; }
.deck-view.active { display: block; }
.deck-view-wrap {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.deck-side-column {
display: flex;
flex-direction: column;
align-self: start;
position: sticky;
top: 14px;
height: calc(100vh - 160px);
min-height: 0;
}
.deck-preview-panel {
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
flex: 0 0 auto;
}
.deck-preview-panel.hidden { display: none; }
.deck-side-history {
margin-top: auto;
flex: 0 0 300px;
height: 300px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.deck-side-history > summary {
flex: 0 0 auto;
cursor: pointer;
padding: 8px 10px;
margin: 0 -10px;
color: #555;
font-size: 0.78rem;
user-select: none;
transition: background 0.12s, color 0.12s;
}
.deck-side-history > summary:hover {
color: #000;
background: rgba(0,0,0,0.06);
}
.deck-side-history[open] > summary {
color: #000;
border-bottom: 1px solid #e0dccc;
margin-bottom: 8px;
}
.deck-side-history > .details-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.deck-side-history[open] {
flex: 0 0 300px;
}
.deck-side-history:not([open]) {
flex: 0 0 auto;
height: auto;
}
.deck-side-history .history-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.deck-preview-frame {
position: relative;
width: 100%;
aspect-ratio: 488 / 680;
border-radius: 4%;
overflow: hidden;
background: #e8e8e8;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.deck-preview-card {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.deck-preview-card.hidden { display: none; }
.deck-preview-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 8px;
text-align: center;
font-size: 0.7rem;
color: #999;
text-transform: none;
}
.deck-preview-placeholder.hidden { display: none; }
/* foil/etched overlay handled by the unified .is-foil / .is-etched ::after
rule near the top of the stylesheet — no per-frame duplicate needed. */
.deck-preview-name {
font-size: 0.85rem;
color: #000;
text-transform: none;
margin-top: 4px;
line-height: 1.25;
}
.deck-preview-meta {
font-size: 0.7rem;
color: #999;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.deck-columns {
display: grid;
grid-template-columns: repeat(auto-fill, var(--deck-card-w, 210px));
gap: 22px 14px;
justify-content: start;
}
.deck-col {
min-width: 0;
}
.deck-col-header {
font-size: 0.75rem;
color: #555;
margin-bottom: 6px;
text-transform: lowercase;
letter-spacing: 0.04em;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.deck-col-header .deck-col-count {
color: #999;
font-variant-numeric: tabular-nums;
}
.deck-stack {
position: relative;
display: flex;
flex-direction: column;
}
.deck-card {
position: relative;
width: 100%;
aspect-ratio: 488 / 680;
margin-top: calc(var(--deck-name-bar) - 100% * 680 / 488);
border-radius: 4%;
transition: transform 0.1s;
}
.deck-card:first-child { margin-top: 0; }
.deck-card:focus-within,
.deck-card.menu-open {
z-index: 30;
}
.deck-card-placeholder { opacity: 0.6; }
.deck-card-placeholder::after {
content: 'placeholder';
position: absolute;
inset: auto 0 0 0;
text-align: center;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 0.65rem;
text-transform: lowercase;
padding: 1px 4px;
pointer-events: none;
}
.deck-text-row-placeholder { opacity: 0.7; }
.deck-row-loc {
display: inline-block;
margin-left: 8px;
color: #888;
font-size: 0.7rem;
text-transform: lowercase;
}
.deck-row-loc-placeholder { color: #b58a00; }
.deck-card-face {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: inherit;
overflow: hidden;
background: #e8e8e8;
color: inherit;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
font: inherit;
text-align: inherit;
}
.deck-card-face:focus-visible,
.deck-card-menu-btn:focus-visible,
.deck-card-menu button:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
.deck-card-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deck-card .placeholder {
display: flex; align-items: center; justify-content: center;
height: 100%; padding: 8px; text-align: center;
font-size: 0.7rem; color: #999; text-transform: none;
}
.deck-card-menu-btn {
position: absolute;
top: 4px;
left: 4px;
z-index: 4;
width: 28px;
height: 24px;
border: 1px solid rgba(0,0,0,0.3);
border-radius: 2px;
background: rgba(255,255,255,0.88);
color: #000;
font: inherit;
font-size: 1rem;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, background 0.12s;
}
.deck-card:hover .deck-card-menu-btn,
.deck-card:focus-within .deck-card-menu-btn,
.deck-card.menu-open .deck-card-menu-btn {
opacity: 1;
}
.deck-card-menu-btn:hover,
.deck-card-menu-btn[aria-expanded="true"] {
background: #fff;
}
.deck-card-menu {
position: absolute;
left: calc(100% + 6px);
top: 0;
z-index: 20;
min-width: 148px;
max-width: 190px;
display: flex;
flex-direction: column;
gap: 2px;
border: 1px solid #111;
border-radius: 3px;
background: #fff;
padding: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.deck-card-menu[hidden] {
display: none !important;
}
.deck-card-menu button {
width: 100%;
border: 0;
border-radius: 2px;
background: transparent;
color: #111;
cursor: pointer;
font: inherit;
font-size: 0.72rem;
line-height: 1.2;
padding: 5px 7px;
text-align: left;
text-transform: lowercase;
}
.deck-card-menu button:hover,
.deck-card-menu button:focus-visible {
background: #eee;
}
.deck-card-menu button[disabled] {
color: #999;
cursor: default;
}
.deck-card-menu button[disabled]:hover {
background: transparent;
}
.deck-card-menu-danger {
color: #9d1c1c !important;
}
@media (hover: none) {
.deck-card-menu-btn { opacity: 1; }
}
.deck-qty {
position: absolute;
top: 4px; right: 4px;
background: rgba(0,0,0,0.8);
color: #fff;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 2px;
backdrop-filter: blur(4px);
z-index: 3;
}
.deck-actions {
display: flex;
gap: 12px;
margin-bottom: 14px;
align-items: center;
flex-wrap: wrap;
}
.deck-group-control {
font-size: 0.75rem;
color: #999;
display: inline-flex;
align-items: center;
gap: 4px;
text-transform: lowercase;
}
.deck-group-control select {
background: transparent;
border: none;
border-bottom: 1px solid #000;
color: #000;
padding: 2px 2px;
font-size: 0.8rem;
font-family: inherit;
text-transform: lowercase;
outline: none;
border-radius: 0;
-webkit-appearance: none;
}
.deck-actions .deck-summary { font-size: 0.75rem; color: #666; margin-left: auto; }
.deck-actions .deck-summary .warn { color: #b04848; }
.deck-actions.hidden { display: none; }
.deck-workspace {
display: flex;
flex-direction: column;
gap: 16px;
}
.deck-workspace.deck-card-size-small {
--deck-card-w: 160px;
--deck-name-bar: 28px;
}
.deck-workspace.deck-card-size-medium {
--deck-card-w: 210px;
--deck-name-bar: 32px;
}
.deck-workspace.deck-card-size-large {
--deck-card-w: 250px;
--deck-name-bar: 36px;
}
.deck-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.deck-hero-main {
min-width: 0;
}
.deck-hero.is-editing .deck-hero-read {
display: none;
}
.deck-kicker {
font-size: 0.7rem;
color: #777;
text-transform: lowercase;
}
.deck-hero h2 {
margin: 0;
font-size: 1.7rem;
line-height: 1.1;
text-transform: none;
letter-spacing: 0;
}
.deck-description {
margin: 5px 0 0;
color: #555;
text-transform: none;
max-width: 760px;
line-height: 1.45;
}
.deck-description.is-empty {
color: #999;
}
.deck-meta-strip {
display: flex;
flex-wrap: wrap;
gap: 5px 16px;
margin: 8px 0 0;
}
.deck-meta-strip div {
display: flex;
gap: 4px;
min-width: 0;
}
.deck-meta-strip dt {
margin: 0;
color: #888;
font-size: 0.68rem;
text-transform: lowercase;
}
.deck-meta-strip dd {
margin: 0;
color: #000;
font-size: 0.82rem;
line-height: 1.25;
text-transform: none;
overflow-wrap: anywhere;
}
.deck-meta-card-link {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
padding: 0;
text-align: left;
text-decoration: underline;
text-decoration-color: #d9d4ca;
text-underline-offset: 2px;
}
.deck-meta-card-link:hover,
.deck-meta-card-link:focus-visible {
color: #000;
text-decoration-color: #000;
}
.deck-meta-strip .is-empty {
color: #999;
}
.deck-hero-side {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
min-width: 0;
}
.deck-hero-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.deck-hero-actions .btn {
padding: 7px 10px;
white-space: nowrap;
}
.deck-workspace-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
border-bottom: 1px solid #eee;
padding-bottom: 12px;
}
.deck-mode-tabs,
.deck-board-filter-tabs {
display: inline-flex;
border: 1px solid #bbb;
background: #fff;
}
.deck-mode-btn,
.deck-board-filter-btn {
border: 0;
border-right: 1px solid #bbb;
background: transparent;
color: #000;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
padding: 6px 9px;
text-transform: lowercase;
}
.deck-mode-btn:last-child,
.deck-board-filter-btn:last-child {
border-right: 0;
}
.deck-mode-btn.active,
.deck-board-filter-btn.active {
background: #000;
color: #fff;
}
.deck-ownership-toggle {
display: inline-flex;
border: 1px solid #bbb;
background: #fff;
}
.deck-ownership-btn {
border: 0;
border-right: 1px solid #bbb;
background: transparent;
color: #000;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
padding: 6px 10px;
text-transform: lowercase;
}
.deck-ownership-btn:last-child { border-right: 0; }
.deck-ownership-btn.active {
background: #000;
color: #fff;
}
.deck-ownership-btn:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
/* Decklist mode: drop the ownership/physical-location surface so the
deck reads as a clean list (for sharing, tournament reports, etc.). */
body.deck-ownership-decklist .deck-card-placeholder { opacity: 1; }
body.deck-ownership-decklist .deck-card-placeholder::after { display: none; }
body.deck-ownership-decklist .deck-text-row-placeholder { opacity: 1; }
body.deck-ownership-decklist .deck-row-loc { display: none; }
.deck-mode-btn:focus-visible,
.deck-board-filter-btn:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
/* Inline group-by bar that lives at the top of the visual deck mode. */
.deck-visual-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 8px;
color: #666;
}
.deck-visual-group-by {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
text-transform: lowercase;
}
.deck-visual-group-by select {
border: 1px solid #ccc;
background: #fff;
font: inherit;
font-size: 0.78rem;
padding: 2px 6px;
}
.deck-export-form label {
display: flex;
flex-direction: column;
gap: 4px;
color: #777;
font-size: 0.68rem;
text-transform: lowercase;
}
.deck-export-form select {
border: 1px solid #ccc;
background: #fff;
color: #000;
font: inherit;
font-size: 0.8rem;
padding: 7px 8px;
text-transform: none;
}
.deck-visual-price-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
color: #000;
font-size: 0.75rem;
text-transform: lowercase;
}
.deck-visual-price-toggle input {
margin: 0;
}
.deck-details-editor {
border: 1px solid #ddd;
background: #fafafa;
margin-top: 0;
padding: 12px;
}
.deck-metadata-form {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 10px;
align-items: start;
}
.deck-metadata-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
color: #777;
font-size: 0.68rem;
text-transform: lowercase;
}
.deck-metadata-form input,
.deck-metadata-form textarea,
.deck-metadata-form select {
border: 1px solid #ccc;
background: #fff;
color: #000;
font: inherit;
font-size: 0.8rem;
padding: 7px 8px;
min-width: 0;
border-radius: 0;
text-transform: none;
}
.deck-metadata-description {
grid-column: 1 / -1;
}
.deck-format-picker {
display: flex;
flex-direction: column;
gap: 4px;
}
.deck-meta-ac-wrap {
position: relative;
display: block;
}
.deck-meta-ac-list {
font-size: 0.78rem;
}
.deck-metadata-form[data-format=""] .deck-metadata-commander,
.deck-metadata-form[data-format=""] .deck-metadata-partner,
.deck-metadata-form:not([data-format="commander"]) .deck-metadata-commander,
.deck-metadata-form:not([data-format="commander"]) .deck-metadata-partner {
display: none;
}
.deck-metadata-form[data-format="commander"] .deck-metadata-cover {
display: none;
}
.deck-companion-add {
border: 1px dashed #bbb;
background: transparent;
color: #666;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
padding: 7px 8px;
text-align: left;
text-transform: lowercase;
}
.deck-companion-add:hover {
border-color: #000;
color: #000;
}
.deck-card-size-row {
display: flex;
flex-direction: column;
gap: 4px;
color: #777;
font-size: 0.68rem;
text-transform: lowercase;
}
.deck-visual-card-size {
flex-direction: row;
align-items: center;
gap: 6px;
}
.deck-control-label {
color: inherit;
}
.deck-card-size-segmented {
display: inline-flex;
align-self: flex-start;
border: 1px solid #bbb;
background: #fff;
}
.deck-card-size-btn {
border: 0;
border-right: 1px solid #bbb;
background: transparent;
color: #000;
cursor: pointer;
font: inherit;
font-size: 0.75rem;
padding: 6px 10px;
text-transform: lowercase;
}
.deck-card-size-btn:last-child { border-right: 0; }
.deck-card-size-btn.active {
background: #000;
color: #fff;
}
.deck-card-size-btn:focus-visible {
outline: 2px solid #000;
outline-offset: 2px;
}
.deck-metadata-form textarea {
min-height: 84px;
resize: vertical;
}
.deck-metadata-actions {
grid-column: 1 / -1;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.deck-dashboard {
display: grid;
grid-template-columns: repeat(4, minmax(160px, 1fr));
gap: 10px;
}
.deck-stat-card,
.deck-board-section,
.deck-sample-hand {
border: 1px solid #ddd;
background: #fff;
padding: 12px;
}
.deck-stat-card h3,
.deck-board-header h3 {
margin: 0;
font-size: 0.85rem;
font-weight: 600;
text-transform: lowercase;
}
.deck-content-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 18px;
align-items: start;
}
.deck-content-grid-single {
grid-template-columns: minmax(0, 1fr);
}
.deck-board-aside,
.deck-content-grid main {
display: flex;
flex-direction: column;
gap: 14px;
}
.deck-board-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
color: #555;
font-size: 0.75rem;
}
.deck-board-header > div {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.deck-side-stack {
--deck-card-w: 132px;
--deck-name-bar: 24px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 10px;
}
.deck-side-stack .deck-card {
margin-top: 0;
}
.deck-text-list {
display: flex;
flex-direction: column;
gap: 3px;
max-height: 360px;
overflow: auto;
font-size: 0.75rem;
}
.deck-text-list-full {
max-height: none;
}
.deck-text-mode {
display: grid;
gap: 12px;
}
.deck-text-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
text-transform: lowercase;
}
.deck-text-table thead th {
position: sticky;
top: 0;
z-index: 5;
background: #f8f7f4;
color: #555;
text-align: left;
font-weight: 500;
padding: 6px 8px;
box-shadow: inset 0 -1px 0 #000;
white-space: nowrap;
}
.deck-text-table tbody td {
padding: 4px 8px;
border-bottom: 1px solid #f1f1f1;
vertical-align: middle;
}
.deck-text-table tbody tr:hover { background: rgba(0,0,0,0.03); cursor: pointer; }
.deck-text-table .board-cell { width: 60px; white-space: nowrap; }
.board-pill {
display: inline-block;
padding: 1px 6px;
border: 1px solid #ddd;
background: #fafafa;
color: #555;
font-size: 0.7rem;
border-radius: 2px;
}
.board-pill-main { background: #efe6d4; color: #4a3f1d; border-color: #d8c89a; }
.board-pill-sideboard { background: #e3eadd; color: #2d4023; border-color: #b3c8a3; }
.board-pill-maybe { background: #ece8e0; color: #555; border-color: #c8c0ad; }
.deck-text-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 2px 0;
border-bottom: 1px solid #f1f1f1;
text-transform: none;
}
.deck-text-row span:last-child {
color: #888;
white-space: nowrap;
}
/* Sample hand row — same renderDeckCard articles as the visual deck view,
just laid out left-to-right instead of stacked. Inherits card-size from
the parent .deck-workspace.deck-card-size-{small|medium|large}. */
.deck-hand-cards {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
}
.deck-hand-cards .deck-card {
width: 160px !important;
flex: 0 0 auto;
margin-top: 0;
}
.deck-card-size-small .deck-hand-cards .deck-card { width: 120px !important; }
.deck-card-size-large .deck-hand-cards .deck-card { width: 200px !important; }
.shape-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
margin-bottom: 10px;
background: #f3efe6;
border-radius: 4px;
font-size: 0.75rem;
}
.shape-bar.hidden { display: none; }
body.view-list .shape-bar { margin: 8px 14px 0; }
.shape-bar-label { color: #555; flex: 1; }
.view-as-list-btn { font-size: 0.75rem; padding: 3px 8px; }
.view-as-list-btn.hidden { display: none; }
.deck-empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 80px 20px;
text-align: center;
}
.deck-empty-prompt {
font-size: 0.9rem;
color: #555;
margin: 0;
max-width: 480px;
line-height: 1.5;
text-transform: lowercase;
}
.deck-empty-prompt code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85em;
background: #f3f3f3;
padding: 1px 6px;
border-radius: 3px;
color: #333;
}
.deck-empty-chips {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
max-width: 600px;
}
.deck-empty-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.deck-empty-group-label {
font-size: 0.65rem;
letter-spacing: 0.06em;
color: #999;
text-transform: lowercase;
}
.deck-empty-chips-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.deck-empty-chip {
background: #fff;
border: 1px solid #ddd;
border-radius: 999px;
padding: 4px 12px;
font-size: 0.8rem;
font-family: inherit;
color: #333;
cursor: pointer;
text-transform: lowercase;
transition: border-color 0.1s, color 0.1s;
}
.deck-empty-chip:hover, .deck-empty-chip:focus-visible {
border-color: #000;
color: #000;
outline: none;
}
/* Binder, locations, home views, and list/table view */
/* Binder view — paginated card slots, IRL binder mental model */
.binder-view { display: none; }
.binder-view.active { display: block; }
body.view-binder .binder-view.active {
display: flex;
flex: 1 1 0;
flex-direction: column;
min-height: 0;
overflow: visible;
}
.binder-actions {
display: flex;
gap: 8px;
margin-bottom: 10px;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
min-height: 18px;
position: relative;
z-index: 5;
}
.binder-actions-primary {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.binder-explore-controls {
align-items: stretch;
color: #555;
display: flex;
flex-direction: column;
font-size: 0.75rem;
gap: 8px;
min-width: 185px;
}
.binder-actions .segmented {
display: inline-flex;
}
.binder-mode-control {
margin-left: 2px;
}
.binder-mode-control.hidden {
display: none;
}
.container-identity-strip .binder-mode-control {
margin-left: 4px;
}
.container-identity-strip .binder-mode-control .segment-btn {
font-size: 0.68rem;
min-height: 24px;
padding: 3px 7px;
}
.binder-mode-control .segment-btn {
padding-left: 8px;
padding-right: 8px;
}
.binder-control-field {
align-items: center;
display: inline-flex;
gap: 5px;
}
.binder-control-label {
color: #666;
}
.binder-control-field select,
.binder-search-input {
background: #fff;
border: 1px solid #d4d0c8;
border-radius: 0;
color: #222;
font: inherit;
height: 28px;
padding: 3px 7px;
}
.binder-control-field select:focus,
.binder-search-input:focus {
border-color: #000;
outline: none;
}
.binder-search-input {
min-width: 132px;
width: 16vw;
max-width: 190px;
}
.binder-filter-menu {
position: relative;
}
.binder-filter-menu > summary {
list-style: none;
}
.binder-filter-menu > summary::-webkit-details-marker {
display: none;
}
.binder-filter-trigger {
align-items: center;
background: #fff;
border: 1px solid #d4d0c8;
color: #333;
cursor: pointer;
display: inline-flex;
font-size: 0.75rem;
height: 28px;
padding: 4px 9px;
text-transform: lowercase;
}
.binder-filter-trigger:hover,
.binder-filter-trigger:focus-visible,
.binder-filter-menu[open] .binder-filter-trigger {
border-color: #000;
color: #000;
outline: none;
}
.binder-filter-menu.has-active-filters .binder-filter-trigger::after {
background: #000;
border-radius: 999px;
content: "";
height: 5px;
margin-left: 6px;
width: 5px;
}
.binder-filter-menu[open] .binder-explore-controls {
background: #fff;
border: 1px solid #cfc8ba;
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
padding: 10px;
position: absolute;
right: 0;
top: calc(100% + 4px);
}
.binder-filter-menu:not([open]) .binder-explore-controls {
display: none;
}
.binder-filter-menu .binder-control-field {
align-items: stretch;
flex-direction: column;
gap: 3px;
}
.binder-filter-menu .binder-control-field select {
min-width: 160px;
}
.binder-lens-reset {
height: 28px;
padding-bottom: 3px;
padding-top: 3px;
}
.binder-price-toggle {
align-items: center;
color: #555;
display: inline-flex;
font-size: 0.75rem;
gap: 5px;
text-transform: lowercase;
}
.binder-summary {
color: #666;
font-size: 0.75rem;
margin-left: auto;
text-align: right;
white-space: nowrap;
}
.binder-pages {
display: flex;
justify-content: center;
min-width: 0;
}
body.view-binder .binder-pages {
align-items: flex-start;
display: flex;
flex: 0 0 auto;
justify-content: center;
min-height: 0;
overflow: visible;
padding-top: 8px;
}
.binder-pages-list {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow-x: auto;
padding: 0;
}
body.view-binder .binder-pages-list {
align-items: stretch;
justify-content: flex-start;
overflow: auto;
}
.binder-list-table {
flex: 1 0 100%;
width: 100%;
}
.binder-list-table .col-check {
display: none;
}
.binder-surface {
background: #f1ede4;
border: 1px solid #d8d2c4;
border-radius: 6px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
box-sizing: border-box;
display: flex;
max-width: 100%;
padding: clamp(10px, 1.2vh, 16px);
width: fit-content;
}
.binder-page {
display: grid;
gap: clamp(10px, 1.1vh, 14px);
width: min(var(--binder-page-width, 860px), calc(100vw - 40px));
}
body.view-binder .binder-page {
height: auto;
max-height: none;
max-width: 100%;
min-height: 0;
min-width: 0;
}
.binder-page-4x3 {
--binder-page-width: min(860px, max(600px, calc(96vh - 185px)));
}
.binder-page-3x3 {
--binder-page-width: min(720px, max(480px, calc(72vh - 55px)));
}
.binder-page-2x2 {
--binder-page-width: min(590px, max(360px, calc(72vh - 65px)));
}
.binder-slot {
position: relative;
aspect-ratio: 488 / 680;
border-radius: 6%;
overflow: hidden;
cursor: pointer;
background: #e8e4d8;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08);
transition: transform 0.1s, box-shadow 0.1s;
}
body.view-binder .binder-slot {
height: auto;
min-height: 0;
width: 100%;
}
.binder-slot:hover, .binder-slot:focus-visible {
transform: translateY(-2px);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.15);
}
.binder-slot:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.binder-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.binder-slot .placeholder {
display: flex; align-items: center; justify-content: center;
height: 100%; padding: 8px; text-align: center;
font-size: 0.7rem; color: #999; text-transform: none;
}
.binder-slot.is-foil::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(
110deg,
transparent 25%,
rgba(255, 90, 180, 0.22) 42%,
rgba(120, 200, 255, 0.22) 50%,
rgba(140, 255, 110, 0.22) 58%,
transparent 75%
);
}
.binder-slot.is-etched::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(110deg, transparent 30%, rgba(180, 80, 220, 0.28) 50%, transparent 70%);
}
.binder-slot-empty {
cursor: default;
background: transparent;
box-shadow: none;
border: 1px dashed #c8c1ad;
}
.binder-slot-empty:hover { transform: none; box-shadow: none; }
.binder-page-organize .binder-slot {
cursor: grab;
}
.binder-page-organize .binder-slot:active {
cursor: grabbing;
}
.binder-page-organize .binder-slot-empty {
align-items: center;
color: #b3aa95;
display: flex;
font-size: 0.7rem;
justify-content: center;
}
.binder-slot.is-drag-over {
outline: 2px solid #000;
outline-offset: 2px;
}
.binder-empty-slot-label {
pointer-events: none;
}
.binder-qty {
position: absolute;
top: 4px; right: 4px;
background: rgba(0,0,0,0.8);
color: #fff;
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 2px;
backdrop-filter: blur(4px);
z-index: 3;
}
.binder-price-badge {
position: absolute;
right: 8%;
top: 12%;
z-index: 4;
background: rgba(0,0,0,0.78);
color: #fff;
border-radius: 2px;
padding: 2px 5px;
font-size: 0.78rem;
line-height: 1;
backdrop-filter: blur(4px);
}
.binder-page-4x3 .binder-price-badge {
font-size: 0.72rem;
padding: 2px 4px;
}
.binder-page-2x2 .binder-price-badge {
font-size: 0.88rem;
padding: 3px 6px;
}
.binder-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 14px;
}
.binder-nav.hidden { display: none; }
.binder-page-indicator {
font-size: 0.8rem;
color: #666;
min-width: 110px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.locations-view {
display: none;
max-width: 1100px;
margin: 0 auto;
}
.locations-view.active { display: block; }
.container-identity-strip {
align-items: center;
border-bottom: 1px solid #e2e2e2;
display: flex;
gap: 8px;
margin: 0 0 14px;
padding: 0 0 10px;
}
body.view-binder .container-identity-strip {
gap: 7px;
margin-bottom: 8px;
}
.container-identity-strip.hidden {
display: none;
}
.container-identity-name,
.container-identity-name-static {
appearance: none;
background: transparent;
border: 0;
color: #000;
font: inherit;
font-size: 1.02rem;
padding: 0 0 1px;
text-align: left;
text-transform: lowercase;
}
.container-identity-name {
border-bottom: 1px dotted #aaa;
cursor: text;
}
.container-identity-name-static {
border-bottom: 1px solid transparent;
}
.container-identity-edit-cue {
color: #999;
font-size: 0.62rem;
margin-left: 7px;
opacity: 0.7;
}
.container-identity-name:hover,
.container-identity-name:focus-visible {
border-bottom-color: #000;
outline: none;
text-decoration: none;
}
.container-identity-name:hover .container-identity-edit-cue,
.container-identity-name:focus-visible .container-identity-edit-cue {
color: #000;
opacity: 1;
}
.container-identity-spacer {
flex: 1 1 auto;
min-width: 16px;
}
.container-identity-edit {
align-items: center;
display: inline-flex;
gap: 6px;
min-width: 0;
}
.container-identity-input {
background: transparent;
border: 0;
border-bottom: 1px solid #999;
color: #000;
font: inherit;
font-size: 1.02rem;
min-width: 120px;
outline: none;
padding: 1px 2px;
text-transform: lowercase;
width: min(260px, 42vw);
}
.container-identity-input:focus {
border-bottom-color: #000;
}
.container-identity-save,
.container-identity-cancel {
padding: 3px 8px;
font-size: 0.72rem;
}
.loc-pill.container-identity-type {
cursor: default;
}
.loc-pill.container-identity-type:hover {
filter: none;
}
.locations-create {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0 18px;
border-bottom: 1px solid #ddd;
margin-bottom: 18px;
flex-wrap: wrap;
}
.locations-create input[type="text"], .locations-create select {
border: none;
border-bottom: 1px solid #bbb;
background: transparent;
padding: 6px 2px;
font-family: inherit;
}
.locations-create-label { font-size: 0.85rem; color: #555; }
.locations-create-types { display: inline-flex; gap: 6px; }
.locations-create-type { display: inline-flex; cursor: pointer; }
.locations-create-type input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.locations-create-type .loc-pill {
padding: 3px 8px;
font-size: 0.8rem;
opacity: 0.55;
transition: opacity 0.12s, box-shadow 0.12s;
}
.locations-create-type.is-selected .loc-pill {
opacity: 1;
box-shadow: 0 0 0 1px #000 inset;
}
.locations-create-type input:focus-visible + .loc-pill {
outline: 2px solid #000;
outline-offset: 2px;
}
.locations-create-type .loc-icon { width: 13px; height: 13px; opacity: 0.85; }
.locations-group { margin-bottom: 28px; }
.locations-group-title {
font-size: 0.75rem;
text-transform: lowercase;
color: #777;
margin-bottom: 8px;
}
.locations-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
align-items: start;
}
.location-card {
position: relative;
border: 1px solid #ddd;
background: #fff;
padding: 10px;
min-height: 80px;
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s;
}
.location-card:hover { border-color: #999; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.location-card:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
.location-card.editing { cursor: default; }
.location-card-name {
display: flex;
align-items: center;
gap: 6px;
font-size: 1rem;
margin-bottom: 6px;
}
.location-card-name .loc-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.location-card-name-text { flex: 1; min-width: 0; }
.location-card-edit-btn {
border: none;
background: transparent;
padding: 2px 4px;
color: #999;
cursor: pointer;
font-size: 0.85rem;
line-height: 1;
border-radius: 2px;
}
.location-card-edit-btn:hover, .location-card-edit-btn:focus-visible {
color: #000;
background: #f0ece0;
outline: none;
}
.location-card-stats {
font-size: 0.75rem;
color: #666;
font-variant-numeric: tabular-nums;
}
.location-card-menu-btn {
border: none;
background: transparent;
padding: 2px 6px;
color: #999;
cursor: pointer;
font-size: 1rem;
line-height: 1;
border-radius: 2px;
flex: 0 0 auto;
}
.location-card-menu-btn:hover, .location-card-menu-btn:focus-visible {
color: #000;
background: #f0ece0;
outline: none;
}
.location-card-menu {
position: absolute;
top: 32px;
right: 8px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
z-index: 5;
min-width: 100px;
padding: 4px 0;
display: none;
}
.location-card.menu-open .location-card-menu { display: block; }
.location-card-menu-item {
display: block;
width: 100%;
border: none;
background: transparent;
padding: 6px 10px;
text-align: left;
cursor: pointer;
font: inherit;
font-size: 0.8rem;
color: #b04848;
}
.location-card-menu-item:hover:not(:disabled) { background: #fef0f0; }
.location-card-menu-item:disabled { color: #bbb; cursor: not-allowed; }
.location-card-edit-row {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.location-card.editing .location-card-edit-row { display: flex; }
.location-card-edit-row .loc-type-radios { display: flex; gap: 4px; flex-wrap: wrap; }
.location-card-edit-row .location-rename-input {
border: none;
border-bottom: 1px solid #999;
background: transparent;
font: inherit;
padding: 4px 2px;
outline: none;
width: 100%;
min-width: 0;
}
.location-card-edit-row .location-rename-input:focus { border-bottom-color: #000; }
.location-card-edit-actions { display: flex; gap: 6px; }
/* Decks home — commander art + format badge */
.deck-home-card { padding-top: 0; padding-left: 0; padding-right: 0; }
.deck-home-art {
width: 100%;
height: 132px;
overflow: hidden;
background: #f0ece0;
margin-bottom: 8px;
position: relative;
}
.deck-home-art img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
}
.deck-home-art-empty {
display: flex;
align-items: center;
justify-content: center;
color: #aaa;
}
.deck-home-art-empty .loc-icon { width: 36px; height: 36px; }
.deck-home-card .location-card-name { padding: 0 10px; }
.deck-home-card .location-card-stats { padding: 0 10px 4px; }
.deck-home-card .location-card-edit-row { margin: 0 10px; }
.deck-home-add-card {
appearance: none;
background: transparent;
border: 1px dashed #aaa;
color: #777;
cursor: pointer;
display: block;
font: inherit;
min-height: 206px;
padding: 0 0 10px;
text-align: left;
text-transform: lowercase;
transition: border-color 0.12s, box-shadow 0.12s, color 0.12s;
width: 100%;
}
.deck-home-add-card:hover,
.deck-home-add-card:focus-visible {
border-color: #000;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
color: #000;
outline: none;
}
.deck-home-add-art {
align-items: center;
background: rgba(240,236,224,0.42);
border-bottom: 1px dashed #cfc8bb;
display: flex;
height: 132px;
justify-content: center;
margin-bottom: 8px;
position: relative;
width: 100%;
}
.deck-home-add-art .loc-icon {
height: 36px;
opacity: 0.45;
width: 36px;
}
.deck-home-add-plus {
align-items: center;
background: #f8f7f4;
border: 1px dashed #aaa;
border-radius: 999px;
display: inline-flex;
font-size: 1rem;
height: 24px;
justify-content: center;
left: calc(50% + 12px);
line-height: 1;
position: absolute;
top: calc(50% + 4px);
width: 24px;
}
.deck-home-add-body {
display: grid;
gap: 5px;
padding: 0 10px;
}
.deck-home-add-title {
font-size: 1rem;
color: inherit;
}
.deck-home-add-stats {
color: #999;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
}
.deck-home-badge {
font-size: 0.7rem;
padding: 1px 6px;
background: #f0ece0;
border: 1px solid #ddd;
color: #555;
margin-left: 4px;
border-radius: 2px;
}
.locations-create-decks input[type="text"] { min-width: 200px; }
/* Hide right sidebar on the new home shapes (alias of view-locations) */
body.view-decks-home .app-right,
body.view-storage-home .app-right { display: none; }
/* Hide FAB cluster on home shapes — primary action is "new deck/container" */
body.view-decks-home .fab-cluster,
body.view-storage-home .fab-cluster { display: none; }
#binderSizeControl.hidden { display: none; }
/* Table view (compact) */
.list-view { display: none; }
.list-view.active { display: block; }
.list-view table[hidden],
.collection-visual-view[hidden] { display: none !important; }
.grid.hidden { display: none; }
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
thead th {
text-align: left;
padding: 6px 8px;
box-shadow: inset 0 -1px 0 #000;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.03em;
color: #999;
position: sticky;
top: 0;
background: #f8f7f4;
z-index: 10;
}
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: #000; }
thead th.sort-active { color: #000; }
thead th .sort-indicator { display: none; }
thead th.sort-active .sort-indicator {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
vertical-align: middle;
}
thead th .sort-arrow { font-size: 0.85em; line-height: 1; }
thead th .sort-clear-btn {
background: none;
border: none;
padding: 0 2px 0 4px;
margin: 0;
color: #999;
cursor: pointer;
font-family: inherit;
font-size: 0.85em;
line-height: 1;
}
thead th .sort-clear-btn:hover { color: #000; }
tbody tr { border-bottom: 1px solid #eee; }
tbody tr:hover { background: #fff; cursor: pointer; }
tbody tr.row-selected, tbody tr.row-selected:hover { background: #fff8e6; }
td { padding: 6px 8px; vertical-align: middle; }
body.view-list .list-view.active tbody td:not(.col-check),
body.view-binder .binder-list-table tbody td:not(.col-check) {
padding-top: 7px;
padding-bottom: 5px;
}
.col-check {
padding-right: 4px;
text-align: center;
vertical-align: middle;
width: 28px;
}
.col-check.is-flowing-tab-check-cell {
position: relative;
transform: translateX(var(--pretext-flow-check-shift, 0));
will-change: transform;
z-index: 3;
}
.row-check {
display: block;
margin: 0 auto;
}
.header-check {
vertical-align: middle;
}
.set-cell { white-space: nowrap; }
/* Narrow fixed-ish columns — content is bounded so don't let table-auto inflate them */
th[data-sort="set"], .set-cell { width: 70px; }
th[data-sort="cn"], .cn-cell { width: 48px; }
th[data-sort="finish"], .finish-cell { width: 60px; }
th[data-sort="rarity"], .rarity-cell { width: 44px; }
th[data-sort="condition"], .condition-cell { width: 56px; }
th[data-sort="qty"], .qty-cell { width: 44px; }
th[data-sort="price"], .price-cell { width: 70px; white-space: nowrap; }
.location-cell { min-width: 140px; }
.tags-cell {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px;
}
.row-tag {
display: inline-flex;
align-items: center;
gap: 1px;
background: #f0ece0;
padding: 1px 2px 1px 5px;
border-radius: 2px;
font-size: 0.7rem;
line-height: 1.4;
color: #000;
white-space: nowrap;
}
.row-tag-remove {
border: none;
background: transparent;
color: #999;
cursor: pointer;
font: inherit;
font-size: 0.85rem;
line-height: 1;
padding: 0 3px;
border-radius: 50%;
}
.row-tag-remove:hover, .row-tag-remove:focus-visible {
color: #000;
outline: none;
}
.row-tag-input {
flex: 1 0 60px;
min-width: 50px;
width: 60px;
border: none;
background: transparent;
color: #000;
font: inherit;
font-size: 0.7rem;
padding: 1px 2px;
text-transform: lowercase;
}
.row-tag-input::placeholder { color: #bbb; }
.row-tag-input:focus {
outline: none;
background: #fafaf5;
}
/* Typed-location pills (list view + history + filter chips) */
.loc-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 4px 1px 5px;
border: 1px solid;
border-radius: 2px;
font-size: 0.7rem;
line-height: 1.4;
color: #000;
white-space: nowrap;
}
.loc-pill .loc-icon {
width: 11px;
height: 11px;
flex-shrink: 0;
opacity: 0.7;
}
.loc-pill-name { text-transform: lowercase; }
.loc-pill { cursor: pointer; }
.loc-pill:hover { filter: brightness(0.95); }
.loc-pill-deck { background: #efe6d4; border-color: #cbb98c; }
.loc-pill-binder { background: #e3eadd; border-color: #9fbb8c; }
.loc-pill-box { background: #ece8e0; border-color: #c2bdb0; }
/* Clickable typed-location button used inside history summaries.
Icon prefix instead of "type:" prefix saves horizontal space in the
narrow sidebar history list. Hover reveals the type via the title attr. */
.loc-link {
display: inline-flex;
align-items: baseline;
gap: 3px;
border: none;
background: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
text-transform: lowercase;
vertical-align: baseline;
}
.loc-link .loc-icon {
width: 10px;
height: 10px;
flex-shrink: 0;
align-self: center;
opacity: 0.85;
}
.loc-link:hover { text-decoration-style: solid; color: #000; }
.loc-link-deck { color: #6b5224; }
.loc-link-binder { color: #4a6839; }
.loc-link-box { color: #5a5247; }
.loc-pill-remove {
border: none;
background: transparent;
color: #888;
cursor: pointer;
font: inherit;
font-size: 0.85rem;
line-height: 1;
padding: 0 2px;
}
.loc-pill-remove:hover, .loc-pill-remove:focus-visible {
color: #000;
outline: none;
}
/* Inline location picker (list cell when location is empty) */
.loc-picker {
display: inline-flex;
gap: 3px;
align-items: center;
}
.loc-picker-target {
min-width: 70px;
max-width: 150px;
border: none;
background: transparent;
font: inherit;
font-size: 0.7rem;
color: #999;
text-transform: lowercase;
padding: 1px 0;
cursor: pointer;
}
.loc-picker-target:focus { outline: none; color: #000; }
.loc-picker.is-new .loc-picker-target { max-width: 86px; }
.loc-picker-new {
display: inline-flex;
gap: 3px;
align-items: center;
}
.loc-picker-new.hidden { display: none; }
.loc-picker-type {
border: none;
background: transparent;
font: inherit;
font-size: 0.7rem;
color: #999;
text-transform: lowercase;
padding: 1px 0;
cursor: pointer;
}
.loc-picker-type:focus { outline: none; color: #000; }
.loc-picker-name {
flex: 1 1 60px;
min-width: 50px;
border: none;
background: transparent;
color: #000;
font: inherit;
font-size: 0.7rem;
padding: 1px 2px;
text-transform: lowercase;
}
.loc-picker-name::placeholder { color: #bbb; }
.loc-picker-name:focus { outline: none; background: #fafaf5; }
/* Drawer / bulk-bar / add-form location field — type select + name input */
.loc-field {
display: flex;
gap: 6px;
align-items: stretch;
border-bottom: 1px solid #ccc;
}
.loc-field:focus-within { border-bottom-color: #000; }
.loc-field .loc-type-select {
border: none;
background: transparent;
font: inherit;
color: #555;
text-transform: lowercase;
padding: 4px 0;
cursor: pointer;
}
.loc-field .loc-type-select:focus { outline: none; color: #000; }
.loc-field .loc-name-input {
flex: 1;
border: none;
background: transparent;
color: #000;
font: inherit;
text-transform: lowercase;
padding: 4px 0;
}
/* Location picker in the add-card form: existing-container pills + inline new */
.location-picker { display: flex; flex-direction: column; gap: 8px; }
.location-pills { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.location-pills .loc-group-label {
width: 100%;
font-size: 0.65rem;
color: #999;
text-transform: uppercase;
margin: 4px 0 -2px;
}
.loc-pills-row-break {
flex: 1 0 100%;
height: 0;
margin-top: 4px;
}
.location-pill-btn {
border: none;
background: none;
padding: 0;
cursor: pointer;
font: inherit;
}
.location-pill-btn .loc-pill {
padding: 2px 6px;
font-size: 0.7rem;
opacity: 0.55;
transition: opacity 0.12s, box-shadow 0.12s;
}
.location-pill-btn:hover .loc-pill,
.location-pill-btn:focus-visible .loc-pill { opacity: 1; }
.location-pill-btn.is-selected .loc-pill {
opacity: 1;
box-shadow: 0 0 0 1px #000 inset;
}
.location-pill-new {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border: 1px dashed #999;
border-radius: 2px;
color: #555;
font-size: 0.7rem;
background: transparent;
cursor: pointer;
}
.location-pill-new:hover, .location-pill-new:focus-visible {
color: #000;
border-color: #000;
outline: none;
}
.location-pill-new.is-selected {
background: #000;
color: #fff;
border-style: solid;
border-color: #000;
}
.location-new.hidden { display: none; }
.field-full { grid-column: 1 / -1; }
/* Typed-pill radio variant of .loc-field — used by the add-card form */
.loc-field-typed { border-bottom: none; align-items: center; }
.loc-type-radios { display: inline-flex; gap: 4px; }
.loc-type-radio { display: inline-flex; cursor: pointer; }
.loc-type-radio input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.loc-type-radio .loc-pill {
padding: 2px 6px;
font-size: 0.7rem;
opacity: 0.5;
transition: opacity 0.12s, box-shadow 0.12s;
}
.loc-type-radio.is-selected .loc-pill {
opacity: 1;
box-shadow: 0 0 0 1px #000 inset;
}
.loc-type-radio input:focus-visible + .loc-pill {
outline: 2px solid #000;
outline-offset: 2px;
}
.loc-field-typed .loc-name-input { border-bottom: 1px solid #ccc; min-width: 0; }
.loc-field-typed:focus-within .loc-name-input { border-bottom-color: #000; }
.loc-field .loc-name-input:focus { outline: none; }
.set-icon {
width: 14px;
height: 14px;
vertical-align: -2px;
margin-right: 5px;
opacity: 0.55;
}
.row-check, .header-check { cursor: pointer; }
.bulk-bar {
display: none;
align-items: center;
box-sizing: border-box;
flex-wrap: nowrap;
gap: 8px;
height: 42px;
padding: 6px 10px;
margin: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
font-size: 0.8rem;
left: 200px;
min-width: 0;
overflow: visible;
position: fixed;
right: 0;
top: 60px;
z-index: 35;
}
.bulk-bar.active { display: flex; }
body.left-sidebar-collapsed .bulk-bar { left: 0; }
.bulk-count {
align-self: center;
flex: 0 1 auto;
font-weight: 400;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bulk-edit-menu {
flex: 0 0 auto;
min-width: 0;
position: relative;
}
.bulk-edit-menu > summary {
align-items: center;
cursor: pointer;
display: inline-flex;
list-style: none;
user-select: none;
}
.bulk-bar > .btn,
.bulk-edit-trigger {
flex: 0 0 auto;
padding: 6px 12px;
white-space: nowrap;
}
.bulk-edit-menu > summary::-webkit-details-marker { display: none; }
.bulk-edit-menu[open] > .bulk-edit-trigger {
background: #000;
border-color: #000;
color: #fff;
}
.bulk-edit-panel {
background: #fff;
border: 1px solid #d2cec6;
border-radius: 2px;
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
box-sizing: border-box;
display: grid;
gap: 12px 14px;
grid-template-columns: repeat(3, minmax(145px, 1fr));
left: 208px;
max-height: calc(100vh - 118px - var(--app-footer-h));
overflow: auto;
padding: 12px;
position: fixed;
top: 110px;
width: min(720px, calc(100vw - 216px));
z-index: 45;
}
body.left-sidebar-collapsed .bulk-edit-panel {
left: 8px;
width: min(720px, calc(100vw - 16px));
}
.bulk-edit-panel .field {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.bulk-edit-panel .field label {
font-size: 0.65rem;
color: #999;
letter-spacing: 0.03em;
}
.bulk-edit-panel input,
.bulk-edit-panel select {
background: transparent;
border: none;
border-bottom: 1px solid #000;
box-sizing: border-box;
padding: 4px 2px;
font-size: 0.85rem;
font-family: inherit;
text-transform: lowercase;
outline: none;
border-radius: 0;
-webkit-appearance: none;
min-width: 0;
width: 100%;
}
.bulk-bar .bulk-spacer { flex: 1; }
.bulk-location-field,
.bulk-pending { grid-column: 1 / -1; }
.bulk-location-picker {
gap: 8px;
}
.bulk-location-picker .location-pills {
max-height: 92px;
overflow: auto;
padding: 1px 0;
}
.bulk-location-picker .location-new {
margin-top: 2px;
}
.bulk-location-meta {
align-items: center;
color: #999;
display: flex;
font-size: 0.7rem;
gap: 8px;
justify-content: space-between;
}
.bulk-location-meta .danger-link {
flex: 0 0 auto;
}
.bulk-loc-field {
align-items: center;
border-bottom: none;
display: flex;
gap: 8px;
}
.bulk-loc-field .loc-type-radios { flex: 0 0 auto; }
.bulk-loc-field .loc-name-input {
flex: 1 1 180px;
width: auto;
}
.bulk-edit-panel .bulk-tag-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.bulk-edit-panel .bulk-tag-row input,
.bulk-edit-panel .bulk-tag-row select { flex: 1 1 auto; }
.bulk-tag-btn { padding: 2px 8px; font-size: 0.75rem; }
.bulk-pending {
display: none;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding-top: 8px;
margin-top: 4px;
border-top: 1px dashed #ddd;
}
.bulk-pending.active { display: flex; }
.pending-label {
font-size: 0.65rem;
color: #999;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-right: 4px;
}
.pending-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff8e6;
border: 1px solid #f0d977;
padding: 2px 4px 2px 8px;
border-radius: 2px;
font-size: 0.75rem;
color: #000;
}
.pending-pill-remove {
background: none;
border: none;
cursor: pointer;
padding: 0 4px;
font-size: 0.95rem;
line-height: 1;
color: #999;
}
.pending-pill-remove:hover { color: #000; }
.save-pending-btn { padding: 4px 14px; font-size: 0.75rem; }
.cancel-pending-btn { padding: 4px 12px; font-size: 0.75rem; }
@media (max-width: 860px) {
.bulk-edit-panel {
grid-template-columns: minmax(0, 1fr);
width: calc(100vw - 216px);
}
body.left-sidebar-collapsed .bulk-edit-panel {
width: calc(100vw - 16px);
}
}
.collection-display-controls {
align-items: center;
background: rgba(255,255,255,0.34);
display: flex;
justify-content: stretch;
width: 100%;
}
.collection-display-controls.segmented {
border-color: #bfb7aa;
overflow: hidden;
}
.collection-display-controls .segment-btn {
flex: 1;
min-width: 0;
padding: 5px 8px;
}
.collection-display-controls .segment-btn:last-child {
border-right: none;
}
.collection-visual-view {
padding: 12px;
}
.collection-visual-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(148px, 178px));
justify-content: start;
}
.collection-visual-card {
background: #fff;
border: 1px solid #d7d0c5;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
display: grid;
grid-template-rows: auto minmax(0, auto);
min-width: 0;
overflow: hidden;
}
.collection-visual-card:hover {
border-color: #aaa093;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.collection-visual-card-art {
appearance: none;
aspect-ratio: 5 / 7;
background: #ece8e0;
border: none;
cursor: pointer;
display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.collection-visual-card-art:focus-visible,
.collection-visual-card-name:focus-visible {
outline: 2px solid #000;
outline-offset: -2px;
}
.collection-visual-card-image {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.collection-visual-card-image-missing {
align-items: center;
color: #8d867a;
display: flex;
font-size: 2rem;
justify-content: center;
}
.collection-visual-card-body {
display: grid;
gap: 5px;
padding: 8px;
}
.collection-visual-card-name {
background: transparent;
border: none;
color: #000;
cursor: pointer;
font: inherit;
font-size: 0.86rem;
line-height: 1.15;
min-width: 0;
overflow-wrap: anywhere;
padding: 0;
text-align: left;
}
.collection-visual-card-name:hover { text-decoration: underline; }
.collection-visual-card-meta {
align-items: center;
color: #777;
display: flex;
flex-wrap: wrap;
font-size: 0.68rem;
gap: 4px 6px;
line-height: 1.25;
}
.collection-visual-card-qty,
.collection-visual-card-price {
color: #000;
}
.collection-visual-card-location {
min-width: 0;
}
.collection-visual-card-location .loc-pill {
max-width: 100%;
}
.history-card-name {
text-transform: none !important;
text-decoration: underline;
text-decoration-style: dotted;
cursor: pointer;
}
.history-card-name:hover { text-decoration-style: solid; }
.changelog-more-muted { color: #888; text-transform: none; }
.history-list {
list-style: none;
/* Negative right margin breaks out of the sidebar's 14px right padding so
the scrollbar gutter sits flush with the sidebar's right border. */
padding: 0 8px 0 0;
margin: 0 -14px 8px 0;
max-height: 240px;
overflow-y: auto;
scrollbar-gutter: stable;
font-size: 0.75rem;
}
.history-list li {
background: rgba(255,255,255,0.48);
box-shadow: inset 2px 0 0 #d8d0c4, inset 0 -1px 0 rgba(0,0,0,0.06);
color: #444;
display: flex;
flex-direction: column;
gap: 2px;
padding: 5px 7px 6px 9px;
position: relative;
word-break: break-word;
}
.history-list li + li { margin-top: 4px; }
.history-list li:last-child { box-shadow: inset 2px 0 0 #d8d0c4; }
.history-list .history-row-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
.history-list time { color: #999; font-size: 0.65rem; }
.history-list .history-undo {
align-items: center;
background: none;
border: none;
cursor: pointer;
display: inline-grid;
font: inherit;
font-size: 0.95rem;
height: 16px;
line-height: 1;
margin-right: -2px;
padding: 0;
place-items: center;
width: 16px;
color: #336;
text-decoration: none;
text-transform: lowercase;
}
.history-list .history-undo:hover,
.history-list .history-undo:focus-visible {
color: #000;
outline: 1px solid rgba(0,0,0,0.35);
outline-offset: 1px;
}
.history-list .history-summary-text { word-break: break-word; }
.history-list li.history-undone { text-decoration: line-through; color: #999; }
.history-list li.history-undone .loc-link,
.history-list li.history-undone .history-card-name {
text-decoration: line-through;
color: #999;
}
.history-list li.history-dismissed { color: #aaa; }
.history-list .history-empty {
background: transparent;
box-shadow: none;
color: #999;
font-style: italic;
padding-left: 0;
}
.history-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.history-actions .btn { font-size: 0.7rem; padding: 4px 8px; }
.sidebar-history { margin-top: 8px; }
.sidebar-history > summary { font-size: 0.75rem; color: #999; cursor: pointer; }
.sidebar-history > summary:hover { color: #000; }
.sidebar-history[open] > summary { color: #000; }
.card-name-cell {
min-width: 128px;
text-transform: none;
}
.card-name-button {
appearance: none;
background: none;
border: none;
color: inherit;
cursor: pointer;
display: block;
font: inherit;
padding: 0;
text-align: left;
text-transform: none;
width: 100%;
}
.card-name-button:hover, .card-name-button:focus-visible { text-decoration: underline; }
.card-name-button.is-flowing-tab-text {
overflow: visible;
position: relative;
text-decoration: none;
}
.card-name-button.is-flowing-tab-text .pretext-flow-line {
display: block;
left: 0;
line-height: var(--pretext-flow-line-height, 1.25);
overflow: visible;
pointer-events: none;
position: absolute;
top: 0;
white-space: pre;
will-change: transform;
}
.card-name-button.is-flowing-tab-text:hover .pretext-flow-line,
.card-name-button.is-flowing-tab-text:focus-visible .pretext-flow-line {
text-decoration: underline;
}
.card-preview-link { cursor: pointer; }
.muted { color: #999; }
.toggle-view {
font-size: 0.75rem;
color: #999;
background: none;
border: none;
cursor: pointer;
text-transform: lowercase;
font-family: inherit;
border-bottom: 1px solid #ccc;
padding: 0 0 1px;
}
.toggle-view:hover { color: #000; border-color: #000; }
.empty-state { text-align: center; padding: 40px 20px; color: #999; font-size: 0.85rem; }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
/* Share/read-only mode */
/* ---- Share: viewer banner ---- */
.share-banner {
background: #fff8e6;
border-bottom: 1px solid #e6dcb0;
padding: 8px 16px;
font-size: 0.8rem;
color: #555;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.share-banner.hidden { display: none; }
.share-banner strong { color: #000; }
/* ---- Share: modal ---- */
.share-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
}
.share-modal.visible { display: flex; }
.share-modal-card {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
padding: 20px;
width: min(440px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.share-modal-title { margin: 0 0 12px; font-size: 1rem; }
.share-modal-body { display: flex; flex-direction: column; gap: 12px; }
.share-modal-row { display: flex; gap: 8px; align-items: center; }
.share-modal-checkbox { font-size: 0.85rem; color: #555; cursor: pointer; }
.share-modal-checkbox input { margin: 0; }
.share-modal-label { font-size: 0.8rem; color: #555; min-width: 64px; }
.share-modal-url {
flex: 1;
border: 1px solid #ccc;
padding: 6px 8px;
font: inherit;
font-size: 0.8rem;
background: #fafafa;
min-width: 0;
}
.share-modal-meta { font-size: 0.75rem; color: #777; line-height: 1.4; }
.share-modal-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
/* ---- Share: viewer mode hides write affordances ---- */
body.share-mode .fab-cluster,
body.share-mode .app-left,
body.share-mode .app-right,
body.share-mode .app-header-views,
body.share-mode .deck-share-btn,
body.share-mode .deck-card-menu-btn,
body.share-mode .deck-card-menu,
body.share-mode [data-edit-deck-details],
body.share-mode [data-card-action="remove-from-deck"],
body.share-mode .deck-details-editor,
body.share-mode .settings-utility-group,
body.share-mode .bulk-bar,
body.share-mode .add-details,
body.share-mode .changelog-banners,
body.share-mode .history-details { display: none !important; }
/* Collapse the three-column grid into one column when both sidebars are
hidden so the deck workspace fills the width. */
body.share-mode .app-shell { grid-template-columns: 1fr !important; }
#cardPreview {
position: fixed;
width: 300px;
pointer-events: none;
z-index: 1000;
display: none;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
/* Border-radius matches the img inside so the .is-foil/.is-etched
::after overlay clips to card-shaped corners. */
border-radius: 4%;
}
#cardPreview.visible { display: block; }
#cardPreview img {
width: 100%;
border-radius: 4%;
display: block;
}
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.18);
z-index: 1100;
display: none;
}
.drawer-backdrop.visible { display: block; }
.detail-drawer {
position: fixed;
top: 0;
right: 0;
width: min(390px, 100vw);
height: 100vh;
background: #fff;
border-left: 1px solid #ddd;
z-index: 1101;
transform: translateX(100%);
transition: transform 0.16s ease;
display: flex;
flex-direction: column;
}
.detail-drawer.visible { transform: translateX(0); }
.drawer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px;
border-bottom: 1px solid #eee;
}
.drawer-title {
font-size: 1.05rem;
font-weight: 400;
text-transform: none;
}
.drawer-subtitle {
margin-top: 2px;
color: #999;
font-size: 0.75rem;
}
.legality-chip {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.7rem;
letter-spacing: 0.02em;
text-transform: lowercase;
border: 1px solid transparent;
}
.legality-chip.hidden { display: none; }
.legality-chip.legal { background: #effaef; border-color: #c4e5c4; color: #2c6b2c; }
.legality-chip.not_legal { background: #f4f4f4; border-color: #ddd; color: #777; }
.legality-chip.banned { background: #fbecec; border-color: #e6bebe; color: #8a2828; }
.legality-chip.restricted { background: #fff5dc; border-color: #e8d49a; color: #7a5a10; }
.icon-btn {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #999;
cursor: pointer;
font: inherit;
font-size: 1.2rem;
line-height: 1;
}
.icon-btn:hover { color: #000; }
.drawer-body {
overflow: auto;
padding: 16px;
}
.drawer-image-frame {
position: relative;
width: 100%;
margin: 0 auto 16px;
border-radius: 4%;
overflow: hidden;
}
.drawer-image {
width: 100%;
display: block;
border-radius: inherit;
}
.drawer-placeholder {
width: 100%;
aspect-ratio: 488 / 680;
margin: 0 auto 16px;
background: #eee;
color: #999;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px;
border-radius: 4px;
}
.detail-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.detail-field { display: flex; flex-direction: column; gap: 4px; }
.detail-field.full { grid-column: 1 / -1; }
.detail-field label {
font-size: 0.7rem;
color: #999;
letter-spacing: 0.03em;
}
.detail-field input, .detail-field select {
border: none;
border-bottom: 1px solid #ccc;
border-radius: 0;
background: transparent;
color: #000;
font: inherit;
padding: 5px 0;
text-transform: lowercase;
}
.detail-field input:focus, .detail-field select:focus {
border-bottom-color: #000;
outline: none;
}
#detailQty { max-width: 70px; }
.condition-toggle {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border: 1px solid #ccc;
border-radius: 2px;
overflow: hidden;
}
.deck-export-menu-wrap {
position: relative;
display: inline-flex;
}
.deck-export-panel {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 30;
min-width: 320px;
border: 1px solid #111;
background: #fff;
padding: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.deck-export-panel .deck-export-form {
grid-template-columns: 1fr;
gap: 10px;
}
.deck-export-panel .deck-export-actions {
justify-content: flex-end;
}
.deck-export-form {
display: grid;
grid-template-columns: minmax(130px, 0.6fr) minmax(0, 1.4fr) auto;
gap: 10px;
align-items: end;
}
.deck-export-checks {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
color: #000;
font-size: 0.75rem;
}
.deck-export-checks label {
flex-direction: row;
align-items: center;
color: inherit;
font-size: inherit;
}
.deck-export-checks input {
margin: 0;
}
.deck-export-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
}
.deck-notes-panel p {
margin: 0;
max-width: 780px;
line-height: 1.5;
text-transform: none;
white-space: pre-wrap;
}
.language-toggle {
display: inline-flex;
flex-wrap: wrap;
border: 1px solid #ccc;
border-radius: 2px;
overflow: hidden;
width: fit-content;
max-width: 100%;
vertical-align: top;
}
.condition-toggle input, .language-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.condition-toggle label, .language-toggle label { cursor: pointer; }
.condition-toggle span, .language-toggle span {
display: block;
padding: 6px 4px;
text-align: center;
border-right: 1px solid #ccc;
color: #999;
cursor: pointer;
font-size: 0.75rem;
line-height: 1;
}
.language-toggle span { min-width: 38px; padding-left: 8px; padding-right: 8px; }
.condition-toggle label:last-child span { border-right: none; }
.language-toggle label:last-child span { border-right: none; }
.condition-toggle input:checked + span, .language-toggle input:checked + span {
background: #000;
color: #fff;
}
.condition-toggle input:focus-visible + span, .language-toggle input:focus-visible + span {
outline: 2px solid #000;
outline-offset: -2px;
}
.language-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.language-other {
width: 54px;
display: none;
}
.language-other.visible { display: inline-block; }
.language-add {
border: none;
background: transparent;
color: #999;
cursor: pointer;
font: inherit;
font-size: 1rem;
line-height: 1;
padding: 4px 6px;
}
.language-add:hover, .language-add:focus-visible {
color: #000;
outline: none;
}
.tags-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
border-bottom: 1px solid #ccc;
padding: 4px 0;
}
.tags-row:focus-within { border-bottom-color: #000; }
.tag-chips {
display: contents;
}
.tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: #eee;
color: #000;
border-radius: 10px;
padding: 2px 4px 2px 8px;
font-size: 0.75rem;
line-height: 1.4;
text-transform: lowercase;
}
.tag-chip-remove {
border: none;
background: transparent;
color: #666;
cursor: pointer;
font: inherit;
font-size: 0.9rem;
line-height: 1;
padding: 0 4px;
border-radius: 50%;
}
.tag-chip-remove:hover, .tag-chip-remove:focus-visible {
color: #000;
outline: none;
}
.tag-input {
flex: 1 1 100px;
min-width: 80px;
border: none !important;
border-bottom: none !important;
background: transparent;
color: #000;
font: inherit;
padding: 2px 0 !important;
text-transform: lowercase;
}
.tag-input:focus { outline: none; }
.checkbox-field {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
color: #999;
font-size: 0.75rem;
}
.drawer-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 18px;
}
.detail-price {
font-size: 0.85rem;
color: #444;
text-transform: none;
margin-top: 14px;
}
.detail-price-label {
font-size: 0.7rem;
color: #999;
letter-spacing: 0.03em;
margin-right: 6px;
text-transform: lowercase;
}
.detail-price #detailPriceMark { color: #999; cursor: help; }
.detail-price a {
color: #999;
margin-left: 6px;
text-decoration: none;
border-bottom: 1px solid #ccc;
}
.detail-price a:hover { color: #000; border-color: #000; }
.image-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
cursor: zoom-out;
}
.image-lightbox.visible { display: flex; }
.image-lightbox img {
max-width: min(90vw, 600px);
max-height: 90vh;
border-radius: 3%;
display: block;
box-shadow: 0 6px 30px rgba(0,0,0,0.5);
}
.image-lightbox .lightbox-close {
position: absolute;
top: 16px;
right: 22px;
background: transparent;
border: none;
color: #fff;
font-size: 2rem;
line-height: 1;
cursor: pointer;
opacity: 0.7;
}
.image-lightbox .lightbox-close:hover { opacity: 1; }
.image-lightbox .lightbox-flip {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.92);
color: #000;
border: none;
border-radius: 2px;
cursor: pointer;
font: inherit;
font-size: 0.8rem;
text-transform: lowercase;
padding: 8px 16px;
}
.image-lightbox .lightbox-flip:hover { background: #fff; }
.image-lightbox .lightbox-flip.hidden { display: none; }
.flip-btn {
appearance: none;
background: transparent;
border: 1px solid #ccc;
border-radius: 2px;
color: #555;
cursor: pointer;
font: inherit;
font-size: 0.7rem;
letter-spacing: 0.02em;
padding: 4px 10px;
text-transform: lowercase;
}
.flip-btn:hover { border-color: #000; color: #000; }
.flip-btn.hidden { display: none; }
.drawer-flip-row {
display: flex;
justify-content: center;
margin: -8px 0 12px;
}
.add-preview-existing {
display: inline-block;
background: #fff7e0;
border: 1px solid #e8d49a;
color: #7a5a10;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.7rem;
margin-bottom: 8px;
text-transform: lowercase;
letter-spacing: 0.02em;
}
.add-preview-existing.hidden { display: none; }
.feedback {
position: fixed;
left: 220px;
bottom: 56px;
z-index: 90;
max-width: min(520px, calc(100vw - 260px));
font-size: 0.75rem;
line-height: 1.35;
padding: 8px 10px;
border-radius: 2px;
display: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.feedback.active { display: block; }
.feedback.error { background: #fff0f0; border: 1px solid #e8c0c0; color: #900; }
.feedback.info { background: #f0f4ff; border: 1px solid #c0d0e8; color: #336; }
.feedback.success { background: #f0fff0; border: 1px solid #c0e8c0; color: #060; }
.feedback .undo-btn {
appearance: none;
background: transparent;
border: none;
color: inherit;
cursor: pointer;
font: inherit;
font-size: inherit;
text-transform: lowercase;
text-decoration: underline;
padding: 0;
margin-left: 8px;
}
.feedback .undo-btn:hover { opacity: 0.7; }
body.view-deck .feedback,
body.share-mode .feedback {
left: 20px;
max-width: min(520px, calc(100vw - 40px));
}
.loading-spinner {
display: inline-block;
width: 12px; height: 12px;
border: 1.5px solid #ccc;
border-top-color: #000;
border-radius: 50%;
animation: spin 0.5s linear infinite;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
.progress {
font-size: 0.75rem;
color: #999;
margin-left: 8px;
}
.price-fallback-mark {
color: #999;
cursor: help;
margin-left: 1px;
}
/* Import and add-card panels */
details.import-details,
details.add-details {
margin-bottom: 16px;
padding: 12px;
background: #fff;
border: 1px solid #eee;
border-radius: 2px;
}
details.import-details summary,
details.add-details summary {
cursor: pointer;
font-size: 0.8rem;
letter-spacing: 0;
}
details.import-details summary::marker,
details.add-details summary::marker { color: #999; }
details.import-details .details-body,
details.add-details .details-body { margin-top: 12px; }
.mcp-chat {
display: flex;
flex-direction: column;
gap: 10px;
}
.mcp-chat-widget {
position: fixed;
right: 16px;
bottom: 148px;
z-index: 75;
display: flex;
flex-direction: column;
width: min(var(--mcp-chat-width, 430px), calc(100vw - 24px));
height: min(var(--mcp-chat-height, 430px), calc(100dvh - 24px));
min-width: min(340px, calc(100vw - 24px));
min-height: min(320px, calc(100dvh - 24px));
max-width: calc(100vw - 24px);
max-height: calc(100dvh - 24px);
background: #fff;
border: 1px solid #111;
border-radius: 6px;
box-shadow: 0 14px 38px rgba(0,0,0,0.22);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
visibility: hidden;
overflow: hidden;
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 {
align-items: center;
background: #111;
color: #fff;
display: flex;
gap: 12px;
justify-content: space-between;
min-height: 42px;
padding: 8px 10px 8px 12px;
touch-action: none;
}
.mcp-chat-head[data-mcp-chat-drag-handle] { cursor: move; }
.mcp-chat-head h2 {
font-size: 0.86rem;
font-weight: 600;
line-height: 1.2;
margin: 0;
}
.mcp-chat-head-actions {
align-items: center;
display: inline-flex;
gap: 8px;
}
.mcp-chat-clear {
align-items: center;
background: transparent;
border: 1px solid rgba(255,255,255,0.32);
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-flex;
font: inherit;
font-size: 0.72rem;
height: 28px;
justify-content: center;
padding: 0 9px;
}
.mcp-chat-clear:hover,
.mcp-chat-clear:focus-visible {
border-color: #fff;
outline: none;
}
.mcp-chat-close {
align-items: center;
background: transparent;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-flex;
font: inherit;
height: 28px;
justify-content: center;
min-width: 28px;
padding: 0 8px;
}
.mcp-chat-close:hover,
.mcp-chat-close:focus-visible {
border-color: #fff;
outline: none;
}
.mcp-chat-widget .mcp-chat {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
padding: 10px;
}
.mcp-chat textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 2px;
background: #fff;
color: #111;
font: inherit;
min-width: 0;
}
.mcp-chat textarea { padding: 8px; }
.mcp-chat-log {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow: auto;
border: 1px solid #e2ded6;
background: #fbfaf7;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mcp-chat-empty {
align-self: stretch;
color: #555;
font-size: 0.85rem;
line-height: 1.35;
margin: auto 0;
padding: 10px;
}
.mcp-chat-empty-title {
color: #111;
font-size: 0.92rem;
margin-bottom: 4px;
}
.mcp-chat-empty-copy {
color: #666;
margin-bottom: 10px;
}
.mcp-chat-empty-examples {
display: grid;
gap: 4px;
list-style: none;
}
.mcp-chat-empty-examples li {
border-left: 2px solid #cfc7b8;
color: #333;
padding-left: 8px;
}
.mcp-chat-message {
display: grid;
gap: 3px;
}
.mcp-chat-role {
color: #666;
font-size: 0.72rem;
text-transform: uppercase;
}
.mcp-chat-body {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 0.9rem;
line-height: 1.35;
}
.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-assistant .mcp-chat-body {
border-left: 2px solid #777;
padding-left: 8px;
}
.mcp-chat-card-results {
border: 1px solid #ddd6ca;
background: #fffefb;
display: grid;
gap: 4px;
margin-top: 8px;
overflow: hidden;
padding: 6px;
}
.mcp-chat-card-results-head {
align-items: center;
color: #666;
display: flex;
font-size: 0.72rem;
gap: 8px;
justify-content: space-between;
text-transform: uppercase;
}
.mcp-chat-card-results-copy {
background: transparent;
border: none;
color: #555;
cursor: pointer;
font-size: 0.72rem;
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: #000;
outline: none;
}
.mcp-chat-card-list {
display: grid;
overflow-x: auto;
}
.mcp-chat-card-row {
border-top: 1px solid #eee7dc;
display: grid;
grid-template-columns: minmax(170px, 1.6fr) 62px 42px 58px 38px 48px minmax(128px, 1fr) minmax(120px, 1fr) 36px 64px 36px;
min-width: 820px;
}
.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: #777;
cursor: pointer;
font: inherit;
font-size: 0.72rem;
padding: 0;
text-decoration: underline;
text-underline-offset: 2px;
}
.mcp-chat-card-edit:hover,
.mcp-chat-card-edit:focus-visible {
color: #000;
outline: none;
}
.mcp-chat-card-move {
border-left: 2px solid #d3cbbc;
display: grid;
gap: 6px;
grid-column: 1 / -1;
padding-left: 8px;
}
.mcp-chat-card-move[hidden] { display: none; }
.mcp-chat-card-move-field {
display: grid;
gap: 3px;
}
.mcp-chat-card-move-field span {
color: #666;
font-size: 0.72rem;
text-transform: uppercase;
}
.mcp-chat-card-move select,
.mcp-chat-card-move input {
min-width: 0;
width: 100%;
border: 1px solid #ccc;
background: #fff;
border-radius: 2px;
color: #111;
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-new[hidden] { display: none; }
.mcp-chat-card-move-actions {
align-items: center;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.mcp-chat-card-move-error {
color: #9f0000;
flex: 1;
font-size: 0.72rem;
line-height: 1.2;
}
.mcp-chat-preview-panel,
.mcp-chat-draft-panel {
border: 1px solid #111;
background: #fffefb;
display: grid;
gap: 8px;
margin: 8px 0;
max-height: min(26vh, 220px);
overflow: auto;
padding: 8px;
}
.mcp-chat-preview-panel[hidden],
.mcp-chat-draft-panel[hidden] {
display: none;
}
.mcp-chat-draft-panel {
max-height: min(38vh, 340px);
}
.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: 0.72rem;
text-transform: uppercase;
color: #555;
}
.mcp-chat-preview-list {
display: grid;
gap: 8px;
}
.mcp-chat-preview-row {
border-top: 1px solid #e2ded6;
padding-top: 8px;
}
.mcp-chat-preview-row.has-error .mcp-chat-preview-meta {
color: #9f0000;
}
.mcp-chat-draft-row {
border-top: 1px solid #e2ded6;
display: grid;
gap: 6px;
padding-top: 6px;
}
.mcp-chat-draft-row.has-error .mcp-chat-preview-meta {
color: #9f0000;
}
.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: 0.95rem;
line-height: 1.1;
margin-bottom: 1px;
}
.mcp-chat-draft-add-preview .add-preview-meta {
font-size: 0.7rem;
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: #666;
font-size: 0.72rem;
text-transform: uppercase;
}
.mcp-chat-draft-field input,
.mcp-chat-draft-field select {
min-width: 0;
width: 100%;
border: 1px solid #ccc;
background: #fff;
border-radius: 2px;
color: #111;
font: inherit;
min-height: 30px;
padding: 4px 6px;
}
.mcp-chat-draft-printing {
color: #333;
font-size: 0.82rem;
line-height: 1.25;
}
.mcp-chat-preview-summary {
font-size: 0.88rem;
line-height: 1.25;
}
.mcp-chat-preview-meta {
color: #666;
font-size: 0.72rem;
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) auto;
gap: 8px;
align-items: end;
}
.mcp-chat-form textarea {
min-height: 70px;
resize: none;
}
.mcp-chat-form .btn {
min-height: 38px;
min-width: 70px;
}
.mcp-chat-apply {
justify-self: start;
margin-top: 4px;
}
body.share-mode .mcp-chat-widget,
body.share-mode .sync-details-window,
body.share-mode .mcp-chat-fab {
display: none;
}
/* Add-cards panel */
.add-tabs {
display: inline-flex;
border: 1px solid #ccc;
border-radius: 2px;
overflow: hidden;
margin-bottom: 12px;
}
.add-tab {
appearance: none;
border: none;
border-right: 1px solid #ccc;
background: transparent;
color: #999;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font: inherit;
font-size: 0.75rem;
line-height: 1;
padding: 6px 12px;
text-transform: lowercase;
}
.add-tab-icon,
.add-tab-icon-svg {
display: inline-flex;
flex: 0 0 auto;
}
.add-tab:last-child { border-right: none; }
.add-tab.active { background: #000; color: #fff; }
.add-tab:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
.add-mode { display: none; }
.add-mode.active { display: block; }
.name-search { position: relative; max-width: 360px; }
.app-right .name-search { max-width: none; }
.name-search input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid #000;
padding: 6px 2px;
font-size: 0.95rem;
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: #fff;
border: 1px solid #ccc;
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: 0.85rem;
cursor: pointer;
text-transform: none;
}
.autocomplete-list li.highlight,
.autocomplete-list li:hover {
background: #000;
color: #fff;
}
.mic-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.mic-btn {
padding: 8px 16px;
border-radius: 2px;
border: 1px solid #000;
background: #000;
color: #fff;
cursor: pointer;
font-size: 0.8rem;
font-family: inherit;
text-transform: lowercase;
}
.mic-btn:hover { background: #333; }
.mic-btn.on { background: #c00; border-color: #c00; }
.mic-status { font-size: 0.75rem; color: #999; }
.mic-status strong { color: #000; }
.autoadd-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
color: #999;
cursor: pointer;
text-transform: lowercase;
}
.autoadd-toggle input { accent-color: #000; cursor: pointer; }
.vocab-hint {
font-size: 0.65rem;
color: #bbb;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.vocab-hint strong { color: #888; font-weight: 400; }
.add-preview {
display: none;
flex-direction: column;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
}
.add-preview.active { display: flex; }
.add-editor {
display: none;
flex-direction: column;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
}
.add-editor.active { display: flex; }
.printing-picker {
display: none;
flex-direction: column;
gap: 4px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
}
.printing-picker.active { display: flex; }
.detail-printing-picker {
display: flex;
margin-top: 12px;
padding-top: 12px;
}
.printing-filter-input {
width: 100%;
border: 1px solid #ddd;
background: #fff;
padding: 6px 8px;
font: inherit;
font-size: 0.78rem;
text-transform: lowercase;
outline: none;
}
.printing-filter-input:focus {
border-color: #000;
}
.printing-list-caption {
font-size: 0.7rem;
color: #999;
margin-bottom: 2px;
text-transform: none;
}
.printing-list-caption .truncate-hint { color: #b08020; }
.printing-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 240px;
overflow-y: auto;
border: 1px solid #eee;
border-radius: 2px;
background: #fff;
}
.printing-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-bottom: 1px solid #eee;
cursor: pointer;
font-size: 0.78rem;
line-height: 1.2;
}
.printing-row:last-child { border-bottom: none; }
.printing-row:hover { background: #f4f4f0; }
.printing-row.selected {
background: #fff8e6;
box-shadow: inset 3px 0 0 #000;
}
.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: #888;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: none;
}
.printing-cn { color: #999; min-width: 38px; text-align: right; }
.printing-owned-badge {
font-size: 0.65rem;
padding: 1px 5px;
border-radius: 2px;
background: #fff8d9;
color: #7a5f00;
border: 1px solid #e3cf84;
white-space: nowrap;
text-transform: none;
}
.printing-year { color: #999; min-width: 36px; text-align: right; }
.field-hint {
margin-top: 4px;
font-size: 0.68rem;
color: #9a6a00;
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;
}
.add-preview-img {
width: 140px;
max-width: 100%;
border-radius: 4%;
align-self: center;
}
.add-preview-info { flex: 1; min-width: 0; }
.add-preview-name {
font-size: 1.05rem;
margin-bottom: 2px;
text-align: left;
text-transform: none;
}
.add-preview-meta {
font-size: 0.75rem;
color: #999;
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: 0.7rem;
letter-spacing: 0.03em;
color: #999;
}
.add-fields input,
.add-fields select {
background: transparent;
border: none;
border-bottom: 1px solid #000;
padding: 4px 2px;
font-size: 0.9rem;
font-family: inherit;
text-transform: lowercase;
outline: none;
border-radius: 0;
-webkit-appearance: none;
}
.add-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.format-note { font-size: 0.7rem; color: #999; margin-top: 6px; }
.danger-zone {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed #eee;
text-align: right;
}
.danger-link {
appearance: none;
background: transparent;
border: none;
color: #999;
cursor: pointer;
font: inherit;
font-size: 0.7rem;
text-transform: lowercase;
text-decoration: underline;
padding: 0;
}
.danger-link:hover, .danger-link:focus-visible { color: #b04848; outline: none; }
.format-note code {
background: #eee;
padding: 1px 4px;
border-radius: 2px;
font-size: 0.95em;
text-transform: none;
}
/* Responsive overrides */
@media (max-width: 768px) {
.deck-view-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
.deck-preview-panel { display: none !important; }
}
/* Below ~900px: collapse the border-frame to a single column */
@media (max-width: 900px) {
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-binder .app-shell,
body.view-locations .app-shell,
body.view-deck .app-shell,
body.left-sidebar-collapsed .app-shell,
body.left-sidebar-collapsed.view-list .app-shell,
body.left-sidebar-collapsed.view-binder .app-shell,
body.left-sidebar-collapsed.view-locations .app-shell,
body.left-sidebar-collapsed.view-deck .app-shell {
height: auto;
min-height: 100vh;
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"header"
"main"
"footer";
}
body.view-binder .app-shell,
body.left-sidebar-collapsed.view-binder .app-shell {
grid-template-rows: auto minmax(0, 1fr) 0;
}
.app-header {
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 10px;
padding: 8px 14px;
height: auto;
min-height: 50px;
}
.app-header h1 { font-size: 1.05rem; }
.sidebar-edge-toggle {
left: 0;
z-index: 56;
}
body.sidebar-tab-simple .sidebar-edge-toggle {
left: 0;
transform: translate(-50%, -50%);
}
body.left-sidebar-collapsed .sidebar-edge-toggle,
body.left-sidebar-collapsed.sidebar-tab-simple .sidebar-edge-toggle {
left: 0;
}
body.left-drawer-open .sidebar-edge-toggle {
left: min(340px, calc(100vw - var(--sidebar-tab-size)));
opacity: 1;
}
body.left-drawer-open.sidebar-tab-simple .sidebar-edge-toggle {
left: min(340px, calc(100vw - var(--sidebar-tab-size)));
}
.app-header-views { justify-self: end; }
.sync-account-slot { justify-content: flex-end; justify-self: end; }
.sync-menu { left: auto; right: 0; }
.app-left {
border-bottom: 0;
border-right: 1px solid #000;
box-shadow: 2px 0 12px rgba(0,0,0,0.14);
display: none;
flex-direction: column;
flex-wrap: nowrap;
gap: 12px;
left: 0;
max-width: calc(100vw - 32px);
overflow-x: hidden;
overflow-y: auto;
padding: 14px;
position: fixed;
top: 0;
bottom: 0;
width: 340px;
z-index: 50;
}
body.left-sidebar-collapsed .app-left {
opacity: 1;
pointer-events: auto;
transform: none;
}
body.left-drawer-open .app-left { display: flex; }
.app-left .sidebar-section {
flex: 0 0 auto;
min-width: 0;
width: 100%;
}
.app-left .sidebar-sizes {
margin-top: 0;
padding-top: 0;
border-top: none;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.app-left .sidebar-sizes .segmented { width: auto; }
.app-left .sidebar-sizes .btn { width: auto; }
.app-center {
min-width: 0;
overflow-x: hidden;
overflow-y: visible;
padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px));
width: 100%;
}
.bulk-bar,
body.left-sidebar-collapsed .bulk-bar {
left: 0;
right: 0;
top: 0;
}
.bulk-edit-panel,
body.left-sidebar-collapsed .bulk-edit-panel {
left: 8px;
max-height: calc(100vh - 50px - var(--app-footer-h));
top: 50px;
width: calc(100vw - 16px);
}
body.view-binder .app-center,
body.view-binder #collectionSection {
height: auto;
min-height: 0;
overflow: visible;
}
.feedback {
left: 14px;
right: 14px;
bottom: 56px;
max-width: none;
}
body.view-deck .feedback,
body.share-mode .feedback {
left: 14px;
max-width: none;
}
.app-right {
border-left: none;
border-top: 1px solid #000;
bottom: 0;
box-shadow: -2px 0 12px rgba(0,0,0,0.15);
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 #ccc;
color: #666;
cursor: pointer;
display: inline-flex;
font: inherit;
height: 36px;
justify-content: center;
margin-bottom: 8px;
min-width: 36px;
padding: 0 10px;
position: sticky;
top: 0;
z-index: 2;
}
.app-right-close:hover,
.app-right-close:focus-visible {
border-color: #000;
color: #000;
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 #ddd;
font-size: 1rem;
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(3, minmax(0, 1fr));
width: 100%;
}
.add-tab {
min-height: 40px;
padding: 8px 6px;
}
.name-search input,
.printing-filter-input {
font-size: 16px;
min-height: 42px;
padding: 9px 4px;
}
.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: 36px;
}
.add-actions,
.drawer-actions {
background: #fff;
border-top: 1px solid #ddd;
bottom: 0;
margin-top: 14px;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
position: sticky;
z-index: 3;
}
.add-actions .btn,
.drawer-actions .btn {
flex: 1 1 0;
min-height: 42px;
}
.detail-drawer {
height: 100dvh;
width: 100vw;
}
.drawer-head {
padding: 12px 14px;
}
.drawer-body {
padding: 12px 14px 0;
}
.drawer-image-frame,
.drawer-placeholder {
max-width: 340px;
}
body.view-list .app-right,
body.view-binder .app-right,
body.view-locations .app-right,
body.view-deck .app-right { display: none; }
body.view-list.right-drawer-open .app-right,
body.view-binder.right-drawer-open .app-right,
body.view-deck.right-drawer-open .app-right {
display: flex;
border-left: 1px solid #000;
border-top: 0;
bottom: 0;
height: 100dvh;
top: 0;
width: 100vw;
}
body.view-deck .app-left,
body.view-deck:not(.right-drawer-open) .app-right { display: none; }
.deck-view-wrap,
.deck-hero,
.deck-content-grid,
.deck-dashboard,
.deck-metadata-form,
.deck-export-form,
.deck-meta-strip {
grid-template-columns: 1fr;
}
.deck-workspace-controls {
align-items: stretch;
background: #f8f7f4;
padding-bottom: 10px;
position: sticky;
top: 0;
z-index: 12;
}
.deck-mode-tabs,
.deck-board-filter-tabs {
width: 100%;
}
.deck-mode-btn,
.deck-board-filter-btn {
flex: 1 1 0;
min-height: 38px;
}
.deck-ownership-toggle {
width: 100%;
}
.deck-ownership-btn {
flex: 1 1 0;
min-height: 38px;
}
.deck-visual-controls {
align-items: stretch;
gap: 8px;
}
.deck-visual-group-by,
.deck-visual-card-size,
.deck-visual-price-toggle {
min-height: 38px;
}
.deck-visual-group-by select,
.deck-card-size-btn {
min-height: 34px;
}
.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(auto-fill, minmax(130px, 1fr));
}
.list-view.active {
max-width: 100%;
overflow-x: auto;
}
.list-view.active table {
min-width: 660px;
}
.binder-actions {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
.binder-actions-primary {
width: 100%;
}
.binder-actions #binderSizeControl {
flex: 1 1 220px;
}
.binder-actions .binder-mode-control {
flex: 0 0 auto;
}
.binder-actions .segment-btn {
flex: 1 1 0;
min-height: 38px;
}
.binder-mode-control .segment-btn {
min-height: 32px;
}
.binder-price-toggle {
min-height: 38px;
}
.binder-summary {
flex: 1 1 100%;
margin-left: 0;
text-align: right;
}
.binder-filter-menu[open] .binder-explore-controls {
left: 0;
right: auto;
width: min(220px, calc(100vw - 44px));
}
.binder-surface {
padding: 12px;
}
.binder-page {
gap: 10px;
width: min(var(--binder-page-width, 760px), calc(100vw - 48px));
}
.binder-nav {
gap: 8px;
}
.binder-nav .btn {
flex: 1 1 96px;
min-height: 40px;
}
.locations-create {
align-items: stretch;
}
.locations-create input[type="text"],
.locations-create select,
.locations-create .btn {
min-height: 40px;
}
.location-card {
min-height: 92px;
}
body.view-list.right-drawer-open .app-right-backdrop,
body.view-binder.right-drawer-open .app-right-backdrop,
body.view-deck.right-drawer-open .app-right-backdrop,
body.left-drawer-open .app-right-backdrop {
display: block;
}
.fab-cluster {
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
display: flex;
}
.mcp-chat-widget {
bottom: calc(106px + env(safe-area-inset-bottom, 0px));
height: min(var(--mcp-chat-height, 430px), calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)));
max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px));
min-width: calc(100vw - 24px);
right: 12px;
resize: none;
width: calc(100vw - 24px);
}
.sync-details-window {
height: min(var(--sync-details-height, 430px), calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)));
max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px));
min-width: calc(100vw - 24px);
right: 12px;
top: 72px;
width: calc(100vw - 24px);
}
.mcp-chat-resize-handle,
.sync-details-resize-handle {
display: none;
}
.mcp-chat-widget.is-positioned {
left: var(--mcp-chat-left);
top: var(--mcp-chat-top);
right: auto;
bottom: auto;
}
.sync-details-window.is-positioned {
left: var(--sync-details-left);
right: auto;
top: var(--sync-details-top);
}
.mcp-chat-form {
grid-template-columns: 1fr;
}
.mcp-chat-form .btn {
width: 100%;
}
body.left-drawer-open .fab-cluster { display: none; }
.fab-btn.mobile-filter-fab { display: inline-flex; }
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; }
.app-footer {
grid-template-rows: auto;
min-height: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-footer .app-totals-strip {
justify-content: flex-start;
padding: 8px 14px;
}
.settings-popover {
left: auto;
right: 0;
width: min(280px, calc(100vw - 28px));
}
}
@media (max-width: 600px) {
.app-header {
gap: 6px;
padding: 8px 10px;
}
.app-header h1 { font-size: 1rem; }
.app-header-views .toggle-view {
padding-left: 8px;
padding-right: 8px;
}
.sync-chip {
padding-left: 8px;
padding-right: 8px;
}
.app-center { padding: 10px 12px 24px; }
.app-left, .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-create {
display: grid;
grid-template-columns: 1fr;
}
.locations-create-types {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.locations-create-type .loc-pill,
.locations-create input[type="text"],
.locations-create .btn {
justify-content: center;
width: 100%;
}
.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;
}
body.view-list .list-view.active,
body.view-binder .binder-pages-list {
overflow-x: visible;
}
body.view-list .list-view.active table,
body.view-list .list-view.active thead,
body.view-list .list-view.active tbody,
body.view-binder .binder-list-table,
body.view-binder .binder-list-table thead,
body.view-binder .binder-list-table tbody {
display: block;
min-width: 0;
width: 100%;
}
body.view-list .list-view.active thead,
body.view-binder .binder-list-table thead {
display: none;
}
body.view-list .list-view.active tbody,
body.view-binder .binder-list-table tbody {
display: grid;
gap: 8px;
}
body.view-list .list-view.active tbody tr,
body.view-binder .binder-list-table tbody tr {
align-items: center;
background: #fff;
border: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
gap: 5px 8px;
padding: 10px;
}
body.view-list .list-view.active tbody tr:hover,
body.view-binder .binder-list-table tbody tr:hover {
background: #fff;
}
body.view-list .list-view.active td,
body.view-binder .binder-list-table td {
display: block;
padding: 0;
}
body.view-list .list-view.active .col-check {
align-self: center;
flex: 0 0 auto;
order: 0;
width: auto;
}
body.view-binder .binder-list-table .col-check {
display: none;
}
body.view-list .list-view.active .card-name-cell,
body.view-binder .binder-list-table .card-name-cell {
align-items: center;
display: flex;
flex: 1 1 calc(100% - 96px);
order: 1;
}
body.view-list .list-view.active .card-name-button,
body.view-binder .binder-list-table .card-name-button {
font-size: 0.95rem;
line-height: 1.25;
text-align: left;
white-space: normal;
}
body.view-list .list-view.active .price-cell,
body.view-binder .binder-list-table .price-cell {
color: #000;
font-size: 0.85rem;
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-binder .binder-list-table .set-cell,
body.view-binder .binder-list-table .cn-cell,
body.view-binder .binder-list-table .finish-cell,
body.view-binder .binder-list-table .rarity-cell,
body.view-binder .binder-list-table .condition-cell,
body.view-binder .binder-list-table .qty-cell {
flex: 0 1 auto;
font-size: 0.72rem;
order: 3;
}
body.view-list .list-view.active .location-cell,
body.view-binder .binder-list-table .location-cell {
flex: 1 1 100%;
margin-top: 4px;
order: 4;
}
body.view-list .list-view.active .tags-cell,
body.view-binder .binder-list-table .tags-cell {
flex: 1 1 100%;
order: 5;
}
body.view-list .list-view.active .row-tag-input,
body.view-binder .binder-list-table .row-tag-input {
min-height: 30px;
}
.binder-surface {
padding: 10px;
}
.container-identity-strip {
flex-wrap: wrap;
}
.container-identity-spacer {
display: none;
}
.container-identity-strip .binder-summary {
flex: 1 1 100%;
text-align: left;
}
.binder-page {
gap: 8px;
width: min(var(--binder-page-width, 760px), calc(100vw - 44px));
}
.binder-page-indicator {
min-width: 82px;
}
.deck-columns { --deck-card-w: 150px; --deck-name-bar: 26px; gap: 16px 8px; }
}
@media (max-width: 520px) {
.app-header {
grid-template-columns: max-content auto max-content;
gap: 5px;
padding-left: 8px;
padding-right: 8px;
}
.app-header h1 {
font-size: 0.95rem;
}
.app-header-views .toggle-view {
font-size: 0;
min-width: 32px;
padding: 5px 7px;
}
.app-header-views .view-icon {
font-size: 0.95rem;
margin-right: 0;
}
.sync-account-slot {
min-width: 0;
}
.sync-chip {
gap: 0;
justify-content: center;
min-width: 32px;
padding-left: 7px;
padding-right: 7px;
}
.sync-chip .sync-label {
display: none;
}
.settings-toggle {
padding-left: 7px;
padding-right: 7px;
}
}
@media (hover: none) {
.card-actions {
opacity: 1;
pointer-events: auto;
}
.card-caption {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.app-shell,
.app-left,
.sidebar-edge-toggle {
transition: none;
}
}