/* Geist variable fonts — self-hosted, eliminates Google Fonts CDN round-trip. Single woff2 per family covers all weights (100–900). */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist.woff2) format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono.woff2) format('woff2'); } :root { --bg-primary: #0c0a09; --bg-secondary: #1c1917; --bg-card: rgba(255, 255, 255, 0.025); --bg-card-hover: rgba(255, 255, 255, 0.04); --bg-glass: rgba(255, 255, 255, 0.03); --border-subtle: rgba(255, 255, 255, 0.06); --border-accent: rgba(245, 158, 11, 0.3); --text-primary: #fafaf9; --text-secondary: #c8c3be; --text-muted: #78716c; --accent-amber: #f59e0b; --accent-green: #4ade80; --accent-rose: #f87171; --accent-orange: #fb923c; --accent-blue: #60a5fa; --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.25); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; /* Hoard glyph as a mask source, shared by .toolbar-btn--agent and .empty-state-mark */ --hoard-mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M220.6 304.6L220.6 411.7L145 411.7L145 130.3L220.6 130.3L220.6 237.4L321.4 237.4L321.4 130.3L397 130.3L397 411.7L321.4 411.7L321.4 304.6L220.6 304.6Z'/%3E%3C/svg%3E"); /* Card-detail control system (ahg-pxxe7): tokens the handoff calls --s1/--s2/--s3/--t1/--t4/--border/--amber-tint/etc that don't have a same-name repo token yet. --s1 duplicates --bg-secondary's value, so it's aliased instead of a second hardcoded hex. See .context/card-detail-control-system.md for the token map. */ --s1: var(--bg-secondary); --s2: #292524; --s3: #3c3532; --t1: #d6d3d1; --t4: #57534e; --border: #44403c; --amber-tint: rgba(245, 158, 11, 0.12); --amber-tint-border: rgba(245, 158, 11, 0.28); --green-tint: rgba(74, 222, 128, 0.12); --rose-tint: rgba(248, 113, 113, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Prevent white flash before body renders (html element is painted before body) */ html { background: var(--bg-primary); } /* Kill 300ms tap delay on all interactive elements */ a, button, input, select, textarea, label, [role="tab"], [role="checkbox"], [onclick], .binder-card, .qa-set-chip { touch-action: manipulation; } /* ── Dashboard loading skeleton ─────────────────────────────────────────── */ /* CSS lives in so it's available at first paint, before body renders. */ #dashboard-skeleton { position: fixed; inset: 0; z-index: 9998; background: var(--bg-primary); padding: 32px; overflow: hidden; transition: opacity 200ms ease-out; } #dashboard-skeleton.skel-out { opacity: 0; pointer-events: none; } .skel-inner { max-width: 2000px; margin: 0 auto; } .skel-bar { border-radius: 4px; background: linear-gradient(90deg, #1c1917 25%, #2e2b28 50%, #1c1917 75%); background-size: 600px 100%; animation: skel-shimmer 1.5s linear infinite; flex-shrink: 0; } [data-theme="light"] .skel-bar { background: linear-gradient(90deg, #e5e1dc 25%, #d6d1cc 50%, #e5e1dc 75%); background-size: 600px 100%; animation: skel-shimmer 1.5s linear infinite; } @keyframes skel-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 12px; flex-wrap: wrap; } .skel-header-right { display: flex; gap: 8px; align-items: center; } .skel-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.06); margin: 0 4px; flex-shrink: 0; } [data-theme="light"] .skel-sep { background: rgba(0,0,0,0.08); } .skel-tabs { display: flex; gap: 24px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="light"] .skel-tabs { border-bottom-color: rgba(0,0,0,0.08); } .skel-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; } .skel-stat-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } [data-theme="light"] .skel-stat-card { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.06); } .skel-table { display: flex; flex-direction: column; } .skel-trow { display: flex; gap: 32px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } [data-theme="light"] .skel-trow { border-bottom-color: rgba(0,0,0,0.04); } @media (max-width: 960px) { .skel-stats { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { #dashboard-skeleton { padding: 16px; } .skel-header-right .skel-bar:nth-child(n+4) { display: none; } .skel-tabs .skel-bar:nth-child(n+5) { display: none; } .skel-trow .skel-bar:nth-child(n+3) { display: none; } } @media (max-width: 480px) { #dashboard-skeleton { padding: 12px; } .skel-stats { grid-template-columns: 1fr; } .skel-stats .skel-stat-card:nth-child(n+3) { display: none; } } body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(to bottom, #222120 0%, #1c1917 30%, #121010 100%) var(--bg-primary); background-attachment: fixed; min-height: 100vh; padding: 32px; color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* iOS WKWebView drops background-attachment:fixed compositor layers on background, causing a white flash when the PWA is brought back to the foreground. */ @supports (-webkit-touch-callout: none) { body { background-attachment: scroll; } } .container { max-width: 2000px; margin: 0 auto; background: var(--bg-secondary); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); padding: 24px 32px; min-height: calc(100vh - 64px); } h1 { color: var(--text-primary); margin-bottom: 8px; font-size: 28px; font-weight: 700; font-family: 'Cabinet Grotesk', 'Geist', sans-serif; letter-spacing: -0.3px; } h1 a { color: var(--text-primary); text-decoration: none; } h1 a em { font-style: italic; color: var(--accent-amber); } h2 { color: var(--text-primary); font-size: 22px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 8px; font-family: 'Cabinet Grotesk', 'Geist', sans-serif; } h3 { color: var(--text-primary); font-size: 18px; font-weight: 600; font-family: 'Cabinet Grotesk', 'Geist', sans-serif; } .subtitle { color: var(--text-secondary); margin-bottom: 24px; font-size: 18px; font-weight: 400; } .subtitle a { color: var(--accent-amber); text-decoration: none; transition: color 0.15s; } .subtitle a:hover { color: #fbbf24; } table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; font-size: 18px; } thead { background: var(--bg-glass); } th { padding: 8px 12px; text-align: left; font-weight: 500; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-subtle); } th:first-child { border-radius: var(--radius-md) 0 0 0; } th:last-child { border-radius: 0 var(--radius-md) 0 0; } td { padding: 10px 16px; transition: background 0.2s ease; vertical-align: middle; } tbody tr { transition: all 0.2s ease; box-shadow: inset 0 -1px 0 var(--border-subtle); } tbody tr:hover { background: var(--bg-card-hover); } tbody tr:last-child { box-shadow: none; } .underpriced { background: rgba(245, 158, 11, 0.08); box-shadow: inset 3px 0 0 var(--accent-amber), inset 0 -1px 0 var(--border-subtle); } .underpriced:hover { background: rgba(245, 158, 11, 0.12); } .card-link { color: var(--text-primary); text-decoration: none; transition: all 0.2s ease; } .card-link:hover { color: var(--accent-amber); } .set-link { color: var(--text-secondary); text-decoration: none; transition: color 0.15s; cursor: pointer; } .set-link:hover { color: var(--text-primary); } .status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; white-space: nowrap; } .status.underpriced { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber); border-color: rgba(245, 158, 11, 0.25); box-shadow: none; } .status.on-target { background: rgba(74, 222, 128, 0.10); color: var(--accent-green); border-color: rgba(74, 222, 128, 0.20); } .price { font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 18px; text-align: right; white-space: nowrap; } .positive { color: var(--accent-green); } .negative { color: var(--text-muted); } .pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 18px; } .pagination a { padding: 10px 20px; background: var(--bg-glass); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-md); font-size: 18px; font-weight: 500; border: 1px solid var(--border-subtle); transition: all 0.2s ease; } .pagination a:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); } .pagination a.disabled { background: var(--bg-glass); color: var(--text-muted); border-color: var(--border-subtle); pointer-events: none; } .stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin: 24px 0; } .stat { background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; transition: all 0.3s ease; min-width: 0; } .stat-label { font-size: clamp(10px, 1.2vw, 18px); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .stat-value { font-size: clamp(16px, 2vw, 28px); font-weight: 600; font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; color: var(--text-primary); margin-top: 8px; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; } .rarity-badge { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; font-family: 'Geist Mono', monospace; border: 1px solid; } .rarity-badge.rarity-c { background: rgba(120, 113, 108, 0.12); color: #a8a29e; border-color: rgba(120, 113, 108, 0.25); } .rarity-badge.rarity-u { background: rgba(96, 165, 250, 0.10); color: var(--accent-blue); border-color: rgba(96, 165, 250, 0.20); } .rarity-badge.rarity-r { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber); border-color: rgba(245, 158, 11, 0.25); } .rarity-badge.rarity-m { background: rgba(248, 113, 113, 0.10); color: var(--accent-rose); border-color: rgba(248, 113, 113, 0.25); } .rarity-badge.rarity-p { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber); border-color: rgba(245, 158, 11, 0.25); } .rarity-badge.rarity-unknown, .rarity-badge.rarity-t { background: rgba(120, 113, 108, 0.12); color: var(--text-muted); border-color: rgba(120, 113, 108, 0.20); } /* Toolbar button hierarchy: primary, ghost, icon */ .toolbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-weight: 500; font-size: 14px; font-family: 'Geist', sans-serif; transition: background 0.15s, border-color 0.15s, color 0.15s; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap; } .toolbar-btn--primary { background: var(--accent-amber); color: #0c0a09; border: 1px solid var(--accent-amber); } .toolbar-btn--primary:hover:not(:disabled) { background: #fbbf24; border-color: #fbbf24; } .toolbar-btn--primary:disabled { opacity: 0.5; cursor: default; } .toolbar-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); } .toolbar-btn--ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); border-color: var(--text-muted); } .toolbar-btn--ghost.active { background: rgba(245,158,11,0.12); color: var(--accent-amber); border-color: var(--accent-amber); } /* ahg-ezh7s.3: shared "agent needs an update" notice. Lives in the global layout (not dashboard.css.erb) because it renders on both dashboard surfaces (detail panel, movers/push status lines) AND settings pages, which don't load dashboard.css.erb. Ruby twin: ApplicationHelper #agent_update_notice. JS twin: agentUpdateNoticeHtml() in dashboard.js. */ .agent-update-notice { color: var(--text-secondary); font-size: 14px; } .agent-update-notice__link { color: var(--accent-amber); text-decoration: underline; } .agent-update-notice__link:hover { color: #fbbf24; } .agent-update-notice-row { margin-top: 8px; } /* ahg-ezh7s.9: plain-language watch provenance line under the Watch toggle in the detail panel's Repricing row -- who/why a card is watched and when it lapses, instead of a bare on/off eye. Same global-layout home as .agent-update-notice above and for the same reason: the detail panel renders wherever dashboard.js runs, which is not limited to the dashboard.css.erb-loading page. Wraps rather than clips at 375px -- this is the longest copy in the row. */ .watch-provenance-row { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); } /* Header utilities wrap to a second row rather than squishing the buttons to the point their labels clip ("Sync Now" -> "ync Now"), which happened on medium widths with the sidebar expanded. */ .header-desktop { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; } .header-desktop .toolbar-btn, .header-desktop .header-search-trigger { flex-shrink: 0; } /* Omnipresent search, styled as a field so it reads as search, not a button. Magnifier + placeholder + the keyboard hint. */ .header-search-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; min-width: 200px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-primary); color: var(--text-muted); font-family: 'Geist', sans-serif; font-size: 14px; line-height: 1; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, color 0.15s; } .header-search-trigger:hover { border-color: var(--text-muted); color: var(--text-secondary); } .header-search-trigger svg { flex-shrink: 0; } .header-search-trigger-text { flex: 1; white-space: nowrap; } .header-search-trigger-kbd { flex-shrink: 0; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px; line-height: 1.4; } /* Tight headers (medium widths / sidebar open): collapse the field to an icon-only square so it never competes for the row's width. */ @media (max-width: 1150px) { .header-search-trigger { min-width: 0; padding: 8px; } .header-search-trigger-text, .header-search-trigger-kbd { display: none; } } /* Agent buttons: actions that dispatch a sync/push to TCGplayer through the Hoard agent. Visual base is --ghost; --agent adds the Hoard glyph so they read as "this hands work to your agent" vs. a local/instant action — icon presence only, no color, so it doesn't pull the eye. See DESIGN.md. The glyph is a ::before mask (not a child element) so it survives the btn.textContent label updates these buttons get during sync/enrich. */ .toolbar-btn--agent::before { content: ""; width: 15px; height: 15px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--hoard-mark-svg) center / contain no-repeat; mask: var(--hoard-mark-svg) center / contain no-repeat; } .toolbar-btn--agent:disabled::before { opacity: 0.5; } /* Agent offline (body class toggled by updateSyncPill): tint the Hoard glyph amber so the disconnect is visible on the button before the user clicks. Glyph only — the label stays put so the button doesn't read as disabled. */ body.agent-offline .toolbar-btn--agent::before { background-color: var(--accent-amber); } .price-locked-row { border-left: 3px solid rgba(245,158,11,0.5); } .price-locked-row:hover { background: rgba(245,158,11,0.04); } .detail-trigger-cell { width: 44px; padding: 0 6px; text-align: center; position: relative; } .detail-trigger-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 22px; padding: 0; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s, transform 0.2s ease; line-height: 1; font-family: 'Geist', sans-serif; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .detail-trigger-btn:hover { color: var(--accent-amber); background: rgba(245, 158, 11, 0.08); } tr.table-row-selected { background: rgba(245, 158, 11, 0.10); } tr.table-row-selected-b { background: rgba(96, 165, 250, 0.10); } tr.table-row-selected .detail-trigger-btn { color: var(--accent-amber); transform: rotate(90deg); } tr.table-row-selected-b .detail-trigger-btn { color: var(--accent-blue); } .table-active-marker { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.86); background: rgba(28,25,23,0.9); color: var(--accent-amber); font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 800; line-height: 1; pointer-events: none; z-index: 2; box-shadow: 0 3px 10px rgba(0,0,0,0.25); } tr.table-row-selected-b .table-active-marker { color: #93c5fd; } .toolbar-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s; font-size: 20px; text-decoration: none; } .toolbar-icon:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } /* Export dropdown */ .export-dropdown { position: relative; display: inline-flex; } .export-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--bg-secondary, #1c1917); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-width: 180px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.3); overflow: hidden; } .export-dropdown.open .export-dropdown-menu { display: block; } .export-dropdown-menu a { display: block; padding: 10px 14px; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-family: 'Geist', sans-serif; transition: background 0.1s, color 0.1s; } .export-dropdown-menu a:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); } /* Merged status indicator */ .toolbar-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: 'Geist', sans-serif; color: var(--text-muted); } .toolbar-status .status-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; } /* Legacy compat — keep .sync-button working for triggerSync JS */ .sync-button { display: none; } /* Pinned query chip bar */ #pinned-queries-bar { display: none; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; overflow: hidden; } #pinned-queries-bar.visible { display: flex; } /* ── Chip Bar Overflow ───────────────────────────────────────── */ #pinned-queries-chips { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; min-width: 0; } .chips-overflow-pill { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 12px; padding: 6px 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--radius-sm); color: var(--accent-amber); cursor: pointer; white-space: nowrap; font-family: 'Geist', sans-serif; transition: background 0.15s ease-in-out; } .chips-overflow-pill:hover { background: rgba(245, 158, 11, 0.15); } .pinned-chip { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 16px; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; font-family: 'Geist', sans-serif; transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, opacity 0.25s ease-out; line-height: 1; } .pinned-chip:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); border-color: var(--text-muted); } .pinned-chip:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; } .pinned-chip.active { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.25); color: var(--accent-amber); } .pinned-chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .pinned-chip .chip-count { flex-shrink: 0; color: var(--text-secondary); margin-left: auto; } .pinned-chip .chip-pricing-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; font-family: 'Geist Mono', monospace; transition: background 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out, transform 0.1s ease-in-out; cursor: pointer; position: relative; } .pinned-chip .chip-pricing-icon.pricing-inactive { color: var(--text-secondary); background: rgba(120, 113, 108, 0.18); border: 1.5px solid rgba(120, 113, 108, 0.35); } .pinned-chip .chip-pricing-icon.pricing-inactive:hover { color: var(--accent-amber); background: rgba(245, 158, 11, 0.15); border-color: var(--accent-amber); transform: scale(1.15); } .pinned-chip .chip-pricing-icon.pricing-active { color: var(--accent-amber); background: rgba(245, 158, 11, 0.15); border: 1.5px solid rgba(245, 158, 11, 0.4); } .pinned-chip .chip-pricing-icon.pricing-active:hover { background: rgba(245, 158, 11, 0.25); border-color: var(--accent-amber); transform: scale(1.1); } /* Pricing popover */ .pricing-popover-backdrop { position: fixed; inset: 0; z-index: 999; } .pricing-popover { position: absolute; z-index: 1000; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 16px; width: 280px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); font-family: 'Geist', sans-serif; } .pricing-popover-title { font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .pricing-popover-field { margin-bottom: 12px; } .pricing-popover-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: block; } .pricing-popover-select { width: 100%; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); font-family: 'Geist Mono', monospace; font-size: 14px; padding: 8px 12px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8a29e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .pricing-popover-select:focus { outline: none; border-color: var(--accent-amber); } .pricing-popover-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; } .pricing-popover-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-amber); cursor: pointer; } .pricing-popover-checkbox span { font-size: 13px; color: var(--text-primary); } .pricing-popover-stats { font-size: 12px; color: var(--text-muted); padding: 8px 0; border-top: 1px solid var(--border-subtle); margin-top: 4px; } .pricing-popover-stats .stat-value { color: var(--text-primary); font-family: 'Geist Mono', monospace; } .pricing-popover-flight { font-size: 12px; color: var(--text-muted); padding: 10px 0 0; margin-top: 8px; border-top: 1px solid var(--border-subtle); line-height: 1.4; } .pricing-popover-flight strong { color: var(--text-primary); font-weight: 600; } .pricing-popover-flight.is-blocked { color: var(--accent-rose); } .pricing-popover-flight.is-warning { color: var(--text-secondary); } .pricing-popover-flight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .pricing-popover-flight-stat { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 6px 8px; } .pricing-popover-flight-value { color: var(--text-primary); font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; } /* Card lists (ahg-xdibj) — popover section, list picker, detail-panel row */ .cards-lists-section { border-top: 1px solid var(--border-subtle); margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } /* Standalone in its own popover — the popover header carries the title, so drop the separator the in-bookmarks layout needed. */ .cards-lists-section--standalone { border-top: 0; margin-top: 0; padding-top: 0; } .cards-lists-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); font-weight: 500; } .cards-lists-chips { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } .cards-lists-empty { color: var(--text-muted); font-size: 13px; line-height: 1.4; } /* ahg-ezh7s.7: the pinned "Watching / N" system entry. Same chip shape as a list chip so it reads as a set of cards, amber-tinted and eye-marked so it reads as Hoard's, not the seller's. No delete affordance — it is virtual. */ .watching-entry { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.22); color: var(--text-primary); } .watching-entry:hover { background: rgba(245, 158, 11, 0.14); border-color: var(--accent-amber); color: var(--text-primary); } .watching-entry-eye { flex-shrink: 0; color: var(--accent-amber); } .watching-entry .chip-count { color: var(--accent-amber); font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; } .watching-entry-notice { font-size: 13px; line-height: 1.4; } .cards-lists-divider { height: 1px; background: var(--border-subtle); margin: 6px 0 2px; } .cards-lists-new-btn { font-size: 14px; padding: 6px 16px; white-space: nowrap; justify-content: flex-start; align-self: flex-start; } .cards-lists-new-form { display: flex; gap: 6px; align-items: center; } /* author display:flex beats the UA [hidden] rule — restore it explicitly */ .cards-lists-new-form[hidden], .cards-lists-new-btn[hidden] { display: none; } .cards-lists-new-form input { flex: 1; min-width: 0; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); font-family: 'Geist', sans-serif; font-size: 16px; padding: 8px 12px; } .cards-lists-new-form input:focus { outline: none; border-color: var(--accent-amber); } .list-picker { position: fixed; width: 280px; } /* fixed: JS anchors it with viewport coords */ .list-picker-rows { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; } .list-picker-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; background: none; border: none; border-radius: 6px; color: var(--text-primary); font-family: 'Geist', sans-serif; font-size: 14px; cursor: pointer; text-align: left; width: 100%; } .list-picker-row:hover { background: rgba(255, 255, 255, 0.05); } .list-picker-row:disabled { opacity: 0.5; cursor: default; } .list-picker-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-amber); cursor: pointer; flex-shrink: 0; } .list-picker-row .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .list-picker-row .chip-count { flex-shrink: 0; color: var(--text-muted); font-size: 12px; font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; } .list-picker-new { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); } .list-picker-new input { flex: 1; min-width: 0; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); font-family: 'Geist', sans-serif; font-size: 16px; padding: 8px 12px; } .list-picker-new input:focus { outline: none; border-color: var(--accent-amber); } .binder-detail-lists { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .binder-detail-lists:empty { display: none; } .binder-detail-lists-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 500; } .binder-detail-lists-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .binder-detail-add-list-btn { background: none; border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: 'Geist', sans-serif; font-size: 13px; padding: 5px 12px; min-height: 32px; cursor: pointer; transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .binder-detail-add-list-btn:hover { color: var(--accent-amber); border-color: var(--accent-amber); } .lists-empty-link { color: var(--accent-amber); text-decoration: underline; text-underline-offset: 2px; } .binder-detail-lists .list-chip-remove { display: none; margin-left: 6px; padding: 0 2px; color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; } .binder-detail-lists .list-chip:hover .list-chip-remove, .binder-detail-lists .list-chip:focus-visible .list-chip-remove { display: inline; } .binder-detail-lists .list-chip-remove:hover { color: var(--accent-rose, #f87171); } @media (hover: none) { .binder-detail-lists .list-chip-remove { display: none !important; } } .lists-empty-delete { display: inline-block; margin-top: 10px; color: var(--text-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; } .lists-empty-delete:hover { color: var(--accent-rose, #f87171); } @media (max-width: 480px) { .list-picker { position: fixed; top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; } .binder-detail-add-list-btn { min-height: 44px; } } .pricing-popover-actions { display: flex; gap: 8px; margin-top: 12px; } .pricing-popover-save { flex: 1; padding: 8px 16px; background: var(--accent-amber); color: #0c0a09; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: 'Geist', sans-serif; cursor: pointer; transition: background 0.15s ease-in-out; } .pricing-popover-save:hover { background: #d97706; } .pricing-popover-save:disabled { opacity: 0.5; cursor: not-allowed; } .pricing-popover-remove { padding: 8px 12px; background: transparent; color: var(--accent-rose); border: 1px solid rgba(248, 113, 113, 0.25); border-radius: 6px; font-size: 12px; font-family: 'Geist', sans-serif; cursor: pointer; transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out; } .pricing-popover-remove:hover { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.4); } .pricing-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 24px; font-size: 13px; color: var(--text-primary); font-family: 'Geist', sans-serif; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); z-index: 1001; opacity: 0; transition: opacity 0.25s ease-out; pointer-events: none; } .pricing-toast.visible { opacity: 1; } .pricing-toast .toast-icon { color: var(--accent-amber); margin-right: 8px; } @media (max-width: 768px) { .pricing-popover { width: 260px; } } /* Inline "Syncing…" status chip (replaces the old floating plain-text span). Hidden until JS gives it text via setSyncStatusMsg(); the spinner makes the in-progress state read as intentional rather than stray text. */ .sync-status-chip { display: none; align-items: center; gap: 7px; padding: 3px 11px; border-radius: var(--radius-md, 8px); background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.30); font-size: 12px; font-weight: 500; color: var(--accent-amber); white-space: nowrap; } .sync-status-chip.visible { display: inline-flex; } .sync-status-chip .sync-status-spinner { width: 11px; height: 11px; border: 2px solid rgba(245, 158, 11, 0.30); border-top-color: var(--accent-amber); border-radius: 50%; animation: sync-status-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes sync-status-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sync-status-chip .sync-status-spinner { animation: none; } } .log-line { padding: 2px 0; white-space: pre-wrap; word-break: break-all; } .log-error { color: var(--accent-rose); } .log-warn { color: var(--accent-amber); } .log-info { color: var(--text-secondary); } .tabs { display: flex; gap: 2px; margin-bottom: 28px; border-bottom: 1px solid var(--border-subtle); width: 100%; } .tab-button { padding: 10px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 18px; font-weight: 500; font-family: 'Geist', sans-serif; color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .tab-button:hover { color: var(--text-primary); border-bottom-color: var(--border-subtle); } .tab-button.active { color: var(--accent-amber); border-bottom-color: var(--accent-amber); } .tab-content { display: none; animation: fadeIn 0.3s ease; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .search-container { margin: 24px 0; padding: 20px; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .search-container input[type="text"] { flex: 1; padding: 14px 18px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: 18px; color: var(--text-primary); transition: all 0.2s ease; } .search-container input[type="text"]:focus { outline: none; border-color: var(--accent-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); } .search-container input[type="text"]::placeholder { color: var(--text-muted); } .search-container button[type="submit"] { padding: 12px 24px; background: rgba(245, 158, 11, 0.08); color: var(--accent-amber); border: 1px solid var(--accent-amber); border-radius: var(--radius-md); font-weight: 500; font-size: 18px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .search-container button[type="submit"]:hover { background: rgba(245, 158, 11, 0.15); } .clear-button { padding: 14px 24px; background: var(--bg-glass); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md); font-weight: 500; font-size: 18px; border: 1px solid var(--border-subtle); transition: all 0.2s ease; } .clear-button:hover { color: var(--text-primary); border-color: var(--text-muted); } #calendar-loading, #trends-loading { padding: 40px; text-align: center; color: var(--text-muted); font-size: 18px; } #trends-chart-container { background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } ::selection { background: rgba(245, 158, 11, 0.25); color: white; } [data-theme="light"] { --bg-primary: #fafaf9; --bg-secondary: #f5f5f4; --bg-card: rgba(0, 0, 0, 0.02); --bg-card-hover: rgba(0, 0, 0, 0.05); --bg-glass: rgba(0, 0, 0, 0.03); --border-subtle: rgba(0, 0, 0, 0.15); --border-accent: rgba(217, 119, 6, 0.3); --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #78716c; --accent-amber: #d97706; --accent-green: #16a34a; --accent-rose: #dc2626; --text-secondary: #78716c; --text-muted: #57534e; --accent-orange: #ea580c; --accent-blue: #2563eb; --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06); /* Card-detail control system (ahg-pxxe7) light-mode equivalents. */ --s1: var(--bg-secondary); --s2: #e7e5e4; --s3: #d6d3d1; --t1: #44403c; --t4: #a8a29e; --border: #d6d3d1; --amber-tint: rgba(217, 119, 6, 0.12); --amber-tint-border: rgba(217, 119, 6, 0.28); --green-tint: rgba(22, 163, 74, 0.12); --rose-tint: rgba(220, 38, 38, 0.12); } html[data-theme="light"] body { background: var(--bg-primary); background-attachment: initial; } html, body, .container, .stat, .tab-button, .search-container, .toolbar-btn, .toolbar-icon, .export-dropdown-menu, td, th, thead, .kpi-card, .spike-card, .pinned-card, .history-row { transition: background-color 350ms ease-in-out, color 350ms ease-in-out, border-color 350ms ease-in-out, box-shadow 350ms ease-in-out; } /* JS-rendered component classes */ .spike-grid { display: flex; gap: 12px; flex-wrap: wrap; } .spike-heading { margin: 0 0 12px; color: var(--accent-amber); font-size: 18px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } .spike-view-all { font-size: 18px; text-transform: none; letter-spacing: normal; color: var(--accent-amber); margin-left: 12px; } .spike-card { display: flex; flex-direction: column; text-decoration: none; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 0; width: 220px; flex-shrink: 0; transition: border-color 0.15s; cursor: pointer; overflow: hidden; } .spike-card .spike-name, .spike-card .spike-set, .spike-card .spike-price, .spike-card .spike-value { padding-left: 16px; padding-right: 16px; } .spike-card .spike-name { padding-top: 10px; } .spike-card .spike-value { padding-bottom: 12px; } .spike-art { width: 100%; height: 100px; object-fit: cover; display: block; } .spike-art.pokemon-art { object-position: center 30%; transform: scale(1.8); transform-origin: center 35%; } .spike-art-placeholder { background: var(--bg-tertiary, var(--border-subtle)); background-image: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%); } /* 2x5 grid spike-alerts for movers tab header */ .spike-grid-2x5 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .spike-row { display: flex; gap: 8px; } .spike-row .spike-card { flex: 1; min-width: 0; width: auto; flex-direction: row; align-items: center; padding: 10px 14px; gap: 8px; border-radius: var(--radius-md); position: relative; overflow: hidden; min-height: 56px; background: #0f0e0d; } @media (min-width: 769px) { .spike-alerts-inline .spike-row { flex-wrap: wrap; align-items: stretch; } .spike-alerts-inline .spike-row .spike-card { flex: 1 1 220px; max-width: 320px; } } .spike-row .spike-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0.7; transition: opacity 0.25s ease, transform 0.4s ease; border-radius: 0; } .spike-row .spike-art.pokemon-art { object-position: center 25%; object-fit: cover; transform: scale(1.6); transform-origin: center 30%; } .spike-row .spike-card:hover .spike-art { opacity: 0.85; transform: scale(1.05); } .spike-row .spike-card:hover .spike-art.pokemon-art { transform: scale(1.75); } .spike-row .spike-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,0.75) 0%, rgba(10,9,8,0.45) 50%, rgba(10,9,8,0.1) 100%); pointer-events: none; } [data-theme="light"] .spike-row .spike-card { background: #e8e5e0; } [data-theme="light"] .spike-row .spike-card::after { background: linear-gradient(90deg, rgba(250,250,249,0.85) 0%, rgba(250,250,249,0.55) 50%, rgba(250,250,249,0.1) 100%); } [data-theme="light"] .spike-row .spike-name { color: #1c1917; text-shadow: 0 1px 2px rgba(255,255,255,0.5); } [data-theme="light"] .spike-row .spike-value { text-shadow: 0 1px 2px rgba(255,255,255,0.5); color: #1c1917; } .spike-row .spike-card-text { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; } .spike-row .spike-name { padding: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); } .spike-row .spike-set, .spike-row .spike-price { display: none; } .spike-row .spike-value { padding: 0; font-size: 12px; white-space: nowrap; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.6); color: #fff; } .spike-row .spike-name span { color: rgba(255,255,255,0.65) !important; } [data-theme="light"] .spike-row .spike-name span { color: rgba(0,0,0,0.45) !important; } .spike-row .set-icon { position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .card-hover-preview { display: none; position: fixed; z-index: 9999; pointer-events: none; gap: 8px; } .product-image-frame { background-color: var(--bg-secondary); background-position: center; background-repeat: no-repeat; background-size: cover; } .product-image-placeholder-visible { background-image: url(/assets/product-image-placeholder-f2573f556838b3ec5429afda0516d051c32df1180a5d639e6a174114b4651f4b.svg); background-position: center; background-repeat: no-repeat; background-size: cover; } .product-image-missing { display: none !important; } /* ── Movers Hero + Tail (replaces spike-grid-2x5 on the movers tab) ── */ .movers-hero { display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-amber); border-radius: var(--radius-lg); margin-bottom: 12px; align-items: center; cursor: pointer; transition: box-shadow 120ms ease; } /* Hover preview: subtle inset accent ring instead of a bg flip so the data swap reads as the primary signal (and avoids light-mode contrast bugs when the hardcoded dark fallback fights the cream background). */ .movers-hero.is-previewing { box-shadow: inset 0 0 0 1px var(--border-accent); } .movers-hero-thumb-wrap { width: 100px; height: 140px; border-radius: 8px; overflow: hidden; background: var(--bg-card); display:flex; align-items:center; justify-content:center; } .movers-hero-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Pokemon card thumbnails: the card frame wastes the top/bottom of the wrapper (HP bar, name, attacks text), so zoom in tight on the artwork which sits ~25% from the top. scale(2.4) crops the bezel and centers the eye on the actual illustration. Tuned in dogfood on Lugia V / Gyarados / Recall hero panels — earlier scale(1.6) showed the attacks. */ .movers-hero-thumb-wrap img.pokemon-art { object-position: center 25%; transform: scale(2.4); transform-origin: center 25%; } .movers-hero-name { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 20px; margin: 0 0 4px; color: var(--text-primary); } .movers-hero-name .num { color: var(--text-muted); font-weight: 400; font-size: 16px; margin-left: 6px; } .movers-hero-meta { color: var(--text-secondary); font-size: 13px; margin: 0 0 6px; } .movers-hero-why { color: var(--text-muted); font-size: 11px; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; } .movers-hero-stats { text-align: right; min-width: 180px; } .movers-hero-price { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--text-primary); } .movers-hero-delta { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-size: 17px; margin-top: 4px; } .movers-hero-pct { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); margin-top: 2px; } .movers-hero-sparkline { margin-top: 6px; display: block; margin-left: auto; } .movers-tail-list { display: flex; flex-direction: column; } .movers-tail-row { display: grid; grid-template-columns: 36px 1fr 120px 120px 70px; align-items: center; gap: 14px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); border-left: 2px solid transparent; font-size: 14px; cursor: pointer; transition: background 80ms ease, border-left-color 80ms ease; text-decoration: none; color: inherit; } .movers-tail-row:hover { background: var(--bg-card-hover); border-left-color: var(--accent-amber); } .movers-tail-row.is-pinned { background: var(--bg-card); border-left-color: var(--accent-amber); } .movers-tail-thumb { width: 36px; height: 36px; border-radius: 4px; overflow: hidden; background: var(--bg-card); flex-shrink: 0; display:flex; align-items:center; justify-content:center; } .movers-tail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .movers-tail-thumb img.pokemon-art { object-position: center 30%; transform: scale(1.6); transform-origin: center 35%; } .movers-tail-name { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .movers-tail-name .num { color: var(--text-muted); font-weight: 400; font-size: 11px; margin-left: 4px; } .movers-tail-name .cond { color: var(--text-muted); font-weight: 400; font-size: 11px; margin-left: 4px; } .movers-tail-meta { color: var(--text-muted); font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .movers-tail-price { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-size: 16px; text-align: right; color: var(--text-primary); } .movers-tail-delta { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; } .movers-tail-pct { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); text-align: right; } .movers-tail-arrow { font-size: 9px; margin-right: 2px; } /* Mobile-only "Filters" toggle. Both filter bars live inside #movers-filters-collapsible; on mobile we hide them by default behind this button. The toggle sits inline with the flat-tab nav on the right (via .movers-subtab-row flex layout). Desktop hides the toggle — both bars stay open. */ .movers-subtab-row { display: flex; align-items: center; gap: 12px; } .movers-subtab-row .subtab-bar { margin-bottom: 0; min-width: 0; flex: 1; } .movers-filters-toggle { display: none; } .movers-filters-chevron { display: inline-block; transition: transform 150ms ease; font-size: 11px; } @media (max-width: 768px) { .movers-filters-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13px; font-weight: 500; font-family: 'Geist', sans-serif; cursor: pointer; flex-shrink: 0; } .movers-filters-toggle[aria-expanded="true"] { color: var(--text-primary); } .movers-filters-toggle[aria-expanded="true"] .movers-filters-chevron { transform: rotate(180deg); } .movers-filters-collapsible { display: none; } .movers-filters-collapsible.is-open { display: block; margin-top: 12px; } } /* Flat Movers/Sleepers subtab bar: 4 buttons that wrap to two lines on narrow viewports without this. Make it horizontally scrollable instead so all four options stay on one row, even at 375px. */ .subtab-bar.movers-flat-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* overflow-y:hidden clips at the padding box, and the active indicator lives at bottom:-9px → height 2px below each button. Without this extra bottom padding the underline gets sliced off mid-pixel. */ padding-bottom: 14px; margin-bottom: 16px; } .subtab-bar.movers-flat-tabs .subtab-btn { white-space: nowrap; flex-shrink: 0; } @media (max-width: 768px) { /* Keep the 3-col layout (thumb | info | stats) on mobile so the price sits next to the card instead of stacking into a half-empty row below. Tighter sizes keep it readable at 375px. */ .movers-hero { grid-template-columns: 72px 1fr auto; gap: 10px; padding: 12px; } .movers-hero-thumb-wrap { width: 72px; height: 100px; } .movers-hero-info { min-width: 0; overflow: hidden; } .movers-hero-name { font-size: 16px; word-wrap: break-word; } .movers-hero-meta, .movers-hero-why { white-space: normal; font-size: 11px; } .movers-hero-stats { text-align: right; min-width: 0; } .movers-hero-sparkline { display: none; } .movers-hero-price { font-size: 22px; } .movers-hero-delta { font-size: 14px; margin-top: 2px; } .movers-hero-pct { font-size: 12px; } .movers-tail-row { grid-template-columns: 32px 1fr 90px 90px; gap: 10px; padding: 8px 10px; font-size: 13px; } .movers-tail-pct { display: none; } /* Mobile flat-tab labels are still long enough that 4 + arrows can overflow the viewport. Tighter padding + smaller font keeps them comfortably tappable while fitting all four at 375px. */ .subtab-bar.movers-flat-tabs .subtab-btn { padding: 8px 10px; font-size: 13px; } .movers-tail-price { font-size: 14px; } } /* ── Consolidated movers filter bar (Source · Min · Window grouping) ── */ .movers-filter-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: space-between; } /* Secondary row: game-scoped filters (Format chips, Set picker). Slightly quieter background + tighter padding so it reads as "additional" rather than competing with the primary bar above. */ .movers-filter-bar.movers-filter-bar--secondary { background: transparent; border-color: var(--border-subtle); padding: 8px 14px; margin-top: -4px; } .movers-filter-bar .filter-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; font-family: 'Geist', sans-serif; } /* wrap, not nowrap: the Source group grows by two controls (grade picker + scope pill) when PriceCharting is active, and nowrap forced the mobile rule below to reach for overflow-x — which clips the grade 's dropdown at 375px. Wrapping to a second line costs vertical space and keeps every control reachable (ahg-eyhj5). */ .movers-filter-bar .filter-group { flex-wrap: wrap; row-gap: 8px; } } .card-hover-img-wrap { position: relative; overflow: hidden; border-radius: 14px; } .card-hover-img-wrap.product-image-frame { box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .card-hover-img-wrap.product-image-placeholder-visible { width: 280px; aspect-ratio: 5 / 7; } .card-hover-preview img { width: 280px; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); display: block; } .card-hover-info { position: absolute; bottom: 0; right: 0; padding: 8px 12px; background: rgba(0,0,0,0.78); border-radius: 8px 0 14px 0; color: #fff; text-align: right; max-width: 90%; z-index: 3; } .card-hover-name { font-size: 14px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* Larger + extra horizontal spacing between the delta and the price so the two monospace numbers read as distinct stats instead of running together in the small overlay corner. */ .card-hover-detail { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.9); margin-top: 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); gap: 14px; } .card-hover-no-img { width: 280px; min-height: 200px; border-radius: 14px; background: linear-gradient(180deg, var(--bg-secondary) 40%, #1c1917); box-shadow: 0 8px 32px rgba(0,0,0,0.5); display: flex; align-items: flex-end; } .card-hover-no-img .card-hover-info { position: relative; border-radius: 0 0 14px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); } .spike-card:hover { border-color: rgba(255, 255, 255, 0.15); } .spike-card.up:hover { border-color: rgba(74, 222, 128, 0.4); } .spike-card.down:hover { border-color: rgba(248, 113, 113, 0.4); } .spike-card.up { border-color: rgba(74, 222, 128, 0.25); } .spike-card.down { border-color: rgba(248, 113, 113, 0.25); } .spike-name { color: var(--text-primary); font-size: 18px; font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spike-set { color: var(--text-secondary); font-size: 18px; margin-bottom: 4px; } .spike-price { color: var(--text-primary); font-size: 18px; font-family: 'Geist Mono', monospace; font-weight: 500; margin-top: auto; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .spike-value { font-size: 18px; font-weight: 600; font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; } /* Full spikes table */ .spikes-table { width: 100%; border-collapse: collapse; } .spikes-table th { text-align: left; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); } .spikes-table td { padding: 12px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 18px; } .spikes-table tr:hover { background: var(--bg-secondary); } .spikes-table a { color: var(--text-primary); text-decoration: none; } .spikes-table a:hover { color: var(--accent-amber); } .kpi-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px 24px; min-width: 140px; } .kpi-card.alert { border-color: var(--accent-amber); } .kpi-label { color: var(--text-secondary); font-size: 18px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; margin-bottom: 4px; } .kpi-label.alert { color: var(--accent-amber); } .kpi-value { color: var(--text-primary); font-size: 22px; font-weight: 600; font-family: 'Geist Mono', monospace; letter-spacing: -0.5px; } .history-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); } .history-code { flex: 1; background: rgba(245, 158, 11, 0.08); padding: 4px 10px; border-radius: var(--radius-md); color: var(--accent-amber); font-size: 18px; } .history-time { color: var(--text-muted); font-size: 18px; white-space: nowrap; } .history-link { color: var(--text-secondary); font-size: 18px; white-space: nowrap; text-decoration: none; } .history-link-muted { color: var(--text-muted); font-size: 18px; white-space: nowrap; text-decoration: none; } .history-pin-btn { background: none; border: 1px solid var(--border-accent); color: var(--accent-amber); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; font-size: 18px; } .history-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; } .pinned-card { background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.18); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; } .pinned-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pinned-code { flex: 1; min-width: 0; background: rgba(245, 158, 11, 0.08); padding: 4px 10px; border-radius: var(--radius-md); color: var(--accent-amber); font-size: 18px; overflow: hidden; text-overflow: ellipsis; } .pinned-snapshot-btn { background: var(--bg-glass); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: 18px; } .pinned-unpin-btn { background: none; border: 1px solid var(--border-subtle); color: var(--text-muted); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; font-size: 18px; } .pinned-delete-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; } .pinned-info { color: var(--text-muted); font-size: 18px; margin: 10px 0 0; } .snapshot-summary { display: flex; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; } .snapshot-label { color: var(--text-secondary); font-size: 18px; } .snapshot-val { color: var(--text-primary); } .calendar-highlight { background: rgba(245, 158, 11, 0.06); border-left: 2px solid var(--accent-amber); } .clr-primary { color: var(--text-primary); } .clr-secondary { color: var(--text-secondary); } .clr-muted { color: var(--text-muted); } .clr-accent { color: var(--accent-amber); } .clr-positive { color: var(--accent-green); } .clr-negative { color: var(--accent-rose); } .clr-error { color: var(--accent-rose); } .clr-accent-bold { color: var(--accent-amber); font-weight: 600; } .clr-muted-bold { color: var(--text-muted); font-weight: 400; } .text-bold { font-weight: 700; } .empty-text { color: var(--text-muted); } .theme-toggle { background: none; border: none; border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer; padding: 0; font-size: 20px; line-height: 1; transition: color 150ms ease; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .status-dot--connected { background: #4ade80; } .status-dot--stale { background: #fb923c; } .status-dot--disconnected { background: #a8a29e; } /* Time-window toggle (scaled-down tab-bar) */ .time-toggle { display: flex; gap: 2px; margin-bottom: 20px; flex-wrap: wrap; } .time-toggle button { padding: 6px 14px; background: transparent; border: none; border-bottom: 2px solid transparent; font-size: 18px; font-weight: 500; font-family: 'Geist', sans-serif; color: var(--text-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .time-toggle button:hover { color: var(--text-secondary); } .time-toggle button.active { color: var(--accent-amber); border-bottom-color: var(--accent-amber); } /* Two-column movers layout */ .movers-columns { display: flex; gap: 24px; } .movers-column { flex: 1; min-width: 0; overflow: hidden; } .movers-column .spikes-table { width: 100%; table-layout: fixed; } .movers-column .spikes-table .spike-col-delta { width: 120px; white-space: nowrap; text-align: right; padding-right: 12px; } .movers-column .spikes-table .spike-col-set { width: 44px; padding-left: 0; padding-right: 12px; text-align: center; } .movers-column .spikes-table .spike-col-set .set-link { display: inline-flex; width: 28px; justify-content: center; vertical-align: middle; } .movers-column .spikes-table .spike-col-thumb, #returns-pull-table .spike-col-thumb { width: 44px; padding: 4px 8px 4px 0; text-align: center; } /* Clipping wrapper for table-row thumbnails. The img's pokemon-art transform: scale(2.4) would otherwise visually overflow into the neighboring card-name column. */ .movers-column .spikes-table .spike-col-thumb .spike-thumb-wrap, #returns-pull-table .spike-col-thumb .spike-thumb-wrap { display: inline-block; width: 32px; height: 32px; border-radius: 4px; overflow: hidden; vertical-align: middle; } .movers-column .spikes-table .spike-col-thumb .spike-thumb-img, #returns-pull-table .spike-col-thumb .spike-thumb-img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; } /* Same Pokemon zoom-into-art treatment for the table-row thumbnails. Wrapper is only 32x32, so we need an even more aggressive crop or the HP bar / attacks dominate the thumbnail. */ .movers-column .spikes-table .spike-col-thumb .spike-thumb-img.pokemon-art, #returns-pull-table .spike-col-thumb .spike-thumb-img.pokemon-art { object-position: center 25%; transform: scale(2.4); transform-origin: center 25%; } /* Whole-row click to open detail slideout. Affordance: pointer cursor and a subtle row-hover background lift so the row reads as a tap target. */ .movers-column .spikes-table tr.spike-row-clickable { cursor: pointer; } .movers-column .spikes-table tr.spike-row-clickable:hover { background: var(--bg-card-hover); } .movers-column .spikes-table .spike-col-card { width: auto; } .movers-column .spikes-table .spike-col-market { width: 110px; white-space: nowrap; } .movers-column .spikes-table .spike-col-spark { width: 112px; padding: 2px 8px; overflow: hidden; } /* Right-align the percent column so the % signs stack vertically and the digits build out to the left, matching tabular-nums alignment. Wider than the original 80px to fit large extreme moves like +1910.6% without truncating into the set-icon column. */ .movers-column .spikes-table .spike-col-pct { width: 96px; white-space: nowrap; text-align: right; padding-right: 12px; } .spike-sparkline { display: block; width: 96px; height: 28px; margin: 0 auto; } .movers-column .spikes-table td:nth-child(3) { word-break: break-word; } /* card name wraps */ .movers-column .spikes-table td[data-card-name] { display: table-cell; vertical-align: middle; } .spike-card-name-wrap { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; } .spike-card-set-meta { color: var(--text-muted); font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Set icons */ .set-icon { width: 28px; max-height: 28px; object-fit: contain; vertical-align: middle; opacity: 0.7; } [data-theme="dark"] .set-icon { filter: invert(0.8); } /* Rarity-colored set icons — MTG standard colors SVGs are black, so invert(1) makes white, then sepia+saturate+hue-rotate tints */ /* Common: dark grey */ .set-icon.rarity-c { filter: invert(0.35); } /* Uncommon: cool silver-blue */ .set-icon.rarity-u { filter: invert(0.55) sepia(0.3) saturate(2) hue-rotate(180deg); } /* Rare: warm gold */ .set-icon.rarity-r { filter: invert(0.5) sepia(1) saturate(10) hue-rotate(15deg) brightness(1.0); } /* Mythic: distinct orange-red — shifted far from gold */ .set-icon.rarity-m { filter: invert(0.5) sepia(1) saturate(15) hue-rotate(-30deg) brightness(0.95); } /* Promo: same as rare */ .set-icon.rarity-p { filter: invert(0.5) sepia(1) saturate(10) hue-rotate(15deg) brightness(1.0); } /* Token/unknown: faint grey */ .set-icon.rarity-t, .set-icon.rarity-unknown { filter: invert(0.25); } /* Dark mode */ [data-theme="dark"] .set-icon.rarity-c { filter: invert(0.5); } [data-theme="dark"] .set-icon.rarity-u { filter: invert(0.7) sepia(0.3) saturate(3) hue-rotate(180deg); } [data-theme="dark"] .set-icon.rarity-r { filter: invert(0.6) sepia(1) saturate(10) hue-rotate(15deg) brightness(1.2); } [data-theme="dark"] .set-icon.rarity-m { filter: invert(0.6) sepia(1) saturate(15) hue-rotate(-30deg) brightness(1.1); } [data-theme="dark"] .set-icon.rarity-p { filter: invert(0.6) sepia(1) saturate(10) hue-rotate(15deg) brightness(1.2); } [data-theme="dark"] .set-icon.rarity-t, [data-theme="dark"] .set-icon.rarity-unknown { filter: invert(0.4); } /* Pokemon set symbols — black PNGs, invert in dark mode */ .set-icon.pokemon-set-icon { filter: none; opacity: 1; } [data-theme="dark"] .set-icon.pokemon-set-icon { filter: invert(1); } /* Pokemon Japan rarity badge (short text pill) */ .rarity-jp-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 3px; background: var(--text-primary); color: var(--surface-primary, #fff); font-size: 9px; font-weight: 700; font-family: 'Geist Mono', monospace; letter-spacing: 0.02em; flex-shrink: 0; vertical-align: middle; } [data-theme="dark"] .rarity-jp-badge { background: var(--text-secondary); color: var(--surface-primary, #1c1917); } /* ── Customer Panel ──────────────────────────────────────────────── */ .customer-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; } .customer-panel-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 250ms ease-out; } .customer-panel.open .customer-panel-scrim { opacity: 1; } .customer-panel-content { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; background: var(--bg-secondary); border-left: 1px solid var(--border-subtle); padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform 250ms ease-out; } .customer-panel.open .customer-panel-content { transform: translateX(0); } .customer-panel-close { position: sticky; bottom: 0; width: 100%; padding: 14px; margin-top: 24px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; font-family: 'Geist', sans-serif; cursor: pointer; transition: color 100ms ease, background 100ms ease; } .customer-panel-close:hover { color: var(--text-primary); background: var(--bg-tertiary, rgba(255,255,255,0.05)); } /* ── Pins Panel ──────────────────────────────────────────────── */ .pins-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; pointer-events: none; } .pins-panel.open { pointer-events: auto; } .pins-panel-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 250ms ease-out; } .pins-panel.open .pins-panel-scrim { opacity: 1; } .pins-panel-content { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; background: var(--bg-secondary); border-left: 1px solid var(--border-subtle); padding: 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 250ms ease-out; pointer-events: auto; } .pins-panel.open .pins-panel-content { transform: translateX(0); } .pins-panel-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--text-muted); font-size: 28px; cursor: pointer; padding: 8px; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: color 100ms ease; touch-action: manipulation; } .pins-panel-close:hover { color: var(--text-primary); } /* Pin row */ /* ── Pin rows (Manage Pins panel) ──────────────────────────── */ .pin-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: 6px; min-height: 48px; background: var(--bg-glass); cursor: grab; transition: background 100ms ease-in-out, border-color 100ms ease-in-out; } .pin-row:hover { background: var(--bg-secondary); border-color: var(--text-muted); } .pin-row:active { cursor: grabbing; background: var(--bg-tertiary, rgba(255,255,255,0.04)); } .pin-grip { cursor: grab; color: var(--text-muted); flex-shrink: 0; font-size: 16px; padding: 4px 2px; user-select: none; touch-action: none; opacity: 0.4; transition: opacity 100ms ease-in-out; } .pin-row:hover .pin-grip { opacity: 0.8; } .pin-grip:active { cursor: grabbing; } .pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pin-label { font-size: 14px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .pin-label-input { width: 100%; background: var(--bg-primary); border: 1px solid var(--accent-amber); border-radius: var(--radius-sm); color: var(--text-primary); font-family: 'Geist', sans-serif; font-size: 14px; padding: 4px 8px; outline: none; } .pin-stats { display: flex; align-items: center; gap: 8px; } .pin-count { font-size: 13px; color: var(--text-secondary); font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; } .pin-game-icon { flex-shrink: 0; color: var(--text-muted); display: inline-flex; align-items: center; line-height: 1; } .mtg-pw-icon { display: inline-block; width: 14px; height: 14px; background: url(/assets/mtg-planeswalker-64a418ee820dcd76b5167db395cecf6e6c77ffc937404a74156f4d8f91fcfaa1.jpg) center/contain no-repeat; vertical-align: middle; flex-shrink: 0; } [data-theme="dark"] .mtg-pw-icon { filter: invert(1); } .chip-game-icon { flex-shrink: 0; color: var(--text-muted); display: inline-flex; align-items: center; line-height: 1; } .pin-pricing { font-size: 13px; color: var(--accent-amber); font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; } .pin-delete { flex-shrink: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 4px; border-radius: var(--radius-sm); opacity: 0; transition: opacity 100ms ease-in-out, color 100ms ease-in-out, background 100ms ease-in-out; } .pin-row:hover .pin-delete { opacity: 1; } .pin-delete:hover { color: var(--accent-rose); background: rgba(248, 113, 113, 0.08); } /* Reorder buttons */ .pin-reorder-btns { display: none; flex-shrink: 0; flex-direction: column; gap: 2px; } .pin-reorder-btn { background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 6px; transition: color 100ms ease-in-out, border-color 100ms ease-in-out; } .pin-reorder-btn:hover { color: var(--text-primary); border-color: var(--text-muted); } /* Drag state */ .pin-row.dragging { opacity: 0.4; border-style: dashed; } .pin-row.drag-over { border-color: var(--accent-amber); box-shadow: 0 -2px 0 0 var(--accent-amber); } @media (max-width: 768px) { .pins-panel-content { width: 100%; padding: 16px; } .pin-delete { opacity: 1; font-size: 20px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .pin-reorder-btns { display: flex; } .pin-reorder-btn { font-size: 14px; padding: 8px 10px; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; } .pin-grip { display: none; } .pin-row { padding: 12px; gap: 10px; } .pin-label { font-size: 16px; } .pin-count { font-size: 14px; } } /* ── Customer Tab Styles ─────────────────────────────────────────── */ #customers-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 24px 0; } .pareto-bar { width: 100%; height: 6px; background: var(--border-subtle); border-radius: 3px; margin-top: 8px; overflow: hidden; } .pareto-bar-fill { height: 100%; background: var(--accent-amber); border-radius: 3px; transition: width 500ms ease-out; } #customers-table-body { /* parent table inherits */ } #customers-tab table { table-layout: fixed; width: 100%; } #customers-tab th:nth-child(1), #customers-tab td:nth-child(1) { width: 28%; text-align: left; } /* Buyer */ #customers-tab th:nth-child(2), #customers-tab td:nth-child(2) { width: 10%; text-align: right; } /* Orders */ #customers-tab th:nth-child(3), #customers-tab td:nth-child(3) { width: 14%; text-align: right; } /* Revenue */ #customers-tab th:nth-child(4), #customers-tab td:nth-child(4) { width: 14%; text-align: left; } /* Last Order */ #customers-tab th:nth-child(5), #customers-tab td:nth-child(5) { width: 8%; text-align: right; } /* Days */ #customers-tab th:nth-child(6), #customers-tab td:nth-child(6) { width: 14%; text-align: center; } /* Rating */ #customers-tab th:nth-child(7), #customers-tab td:nth-child(7) { width: 12%; text-align: right; } /* Tier */ #customers-tab td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .customers-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .customers-sortable:hover { color: var(--text-primary); } .customers-sortable .sort-arrow { display: inline-block; width: 10px; margin-left: 4px; font-size: 10px; text-align: center; opacity: 0.4; } .customers-sortable[aria-sort="ascending"] .sort-arrow, .customers-sortable[aria-sort="descending"] .sort-arrow { opacity: 1; color: var(--accent-amber); } .tier-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: 'Geist', sans-serif; border: 1px solid; white-space: nowrap; } .tier-new { background: rgba(120, 113, 108, 0.12); color: #a8a29e; border-color: rgba(120, 113, 108, 0.25); } .tier-regular { background: rgba(96, 165, 250, 0.10); color: var(--accent-blue); border-color: rgba(96, 165, 250, 0.20); } .tier-loyal { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber); border-color: rgba(245, 158, 11, 0.25); } .tier-vip { background: rgba(251, 146, 60, 0.10); color: var(--accent-orange); border-color: rgba(251, 146, 60, 0.25); } /* Buyer-rating chips — seller's view of buyer trust signal (NOT buyer's feedback rating of seller, which is the hearts column). Color bands match Buyer::Rating::Result#color_band: red ≤2★, yellow <3.5★, green ≥3.5★. Grey for buyers with no signal yet. */ .buyer-rating { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: 'Geist Mono', monospace; border: 1px solid; white-space: nowrap; vertical-align: middle; } .buyer-rating-red { background: rgba(244, 63, 94, 0.10); color: var(--accent-rose); border-color: rgba(244, 63, 94, 0.30); } .buyer-rating-yellow { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber); border-color: rgba(245, 158, 11, 0.25); } .buyer-rating-green { background: rgba(34, 197, 94, 0.10); color: var(--accent-green); border-color: rgba(34, 197, 94, 0.25); } .buyer-rating-grey { background: rgba(120, 113, 108, 0.08); color: #a8a29e; border-color: rgba(120, 113, 108, 0.20); } .customers-filter-btn { padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; font-family: 'Geist', sans-serif; cursor: pointer; border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-secondary); transition: all 0.15s; } .customers-filter-btn:hover { border-color: var(--accent-amber); color: var(--text-primary); } .customers-filter-btn.active { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber); border-color: var(--accent-amber); } .customers-stat-action { cursor: pointer; transition: border-color 0.15s, background 0.15s; } .customers-stat-action:hover { border-color: var(--accent-amber); background: rgba(245, 158, 11, 0.04); } .customers-stat-action:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; } .customer-note-icon { font-size: 18px; cursor: default; opacity: 0.6; } .customer-note-preview { display: none; position: fixed; z-index: 9999; pointer-events: none; max-width: 320px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-secondary); border: 1px solid var(--border-subtle); box-shadow: 0 8px 32px rgba(0,0,0,0.35); color: var(--text-primary); font-size: 14px; line-height: 1.5; font-family: 'Geist', sans-serif; white-space: pre-wrap; word-break: break-word; } .customer-row { cursor: pointer; } .customer-row:hover { background: var(--bg-card-hover); } .had-issue { color: var(--accent-rose); margin-right: 4px; } .pagination-btn { padding: 10px 20px; background: var(--bg-glass); color: var(--text-primary); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid var(--border-subtle); cursor: pointer; font-family: 'Geist', sans-serif; transition: background 0.15s, border-color 0.15s; } .pagination-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); } .pagination-btn:disabled { color: var(--text-muted); cursor: default; pointer-events: none; } /* Skeleton loading rows */ .skeleton-row td { position: relative; overflow: hidden; } .skeleton-bar { display: inline-block; height: 14px; background: var(--border-subtle); border-radius: 3px; animation: skeletonPulse 1.5s ease-in-out infinite; } @keyframes skeletonPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* Panel order table */ .panel-order-table { width: 100%; font-size: 13px; border-collapse: collapse; } .panel-order-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); text-align: left; } .panel-order-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 13px; } @media (max-width: 768px) { .customer-panel-content { width: 100%; } .customers-hide-mobile { display: none; } #customers-stats { grid-template-columns: repeat(2, 1fr); } } /* ── Binder Mode ───────────────────────────────────────────────────── */ .binder-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .binder-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .binder-search-input { padding: 8px 30px 8px 14px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: 'Geist', sans-serif; font-size: 14px; min-width: 200px; width: 100%; transition: border-color 100ms ease; } .binder-search-input:focus { outline: none; border-color: var(--accent-amber); } .binder-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 1; background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 2px 6px; line-height: 1; } .binder-search-clear:hover { color: var(--text-primary); } .binder-sort-select { padding: 8px 14px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: 'Geist', sans-serif; font-size: 14px; cursor: pointer; } .binder-stack-toggle { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-family: 'Geist', sans-serif; font-size: 14px; cursor: pointer; user-select: none; } .binder-stack-toggle input { cursor: pointer; } .binder-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; transition: opacity 150ms ease-in-out; } .binder-card { position: relative; width: 240px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; flex-shrink: 0; transition: border-color 100ms ease, transform 0.12s ease-out, box-shadow 0.12s ease-out; border: 1px solid transparent; will-change: transform; background-color: var(--bg-secondary); } .binder-card:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; } .binder-card:focus-visible .binder-card-overlay { opacity: 1; } .binder-card:hover { border-color: var(--accent-amber); } .binder-card-active { box-shadow: 0 0 0 3px rgba(245,158,11,0.9), 0 0 0 6px rgba(28,25,23,0.9), 0 10px 24px rgba(245,158,11,0.24); } .binder-card-active-b { box-shadow: 0 0 0 3px rgba(96,165,250,0.95), 0 0 0 6px rgba(28,25,23,0.9), 0 10px 24px rgba(96,165,250,0.24); } .binder-card-active-marker { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9); background: rgba(28,25,23,0.88); color: var(--accent-amber); font-family: 'Geist Mono', monospace; font-size: 30px; font-weight: 800; line-height: 1; box-shadow: 0 8px 24px rgba(0,0,0,0.34); pointer-events: none; z-index: 7; } .binder-card-active-b .binder-card-active-marker { color: #93c5fd; } .binder-card img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); } .binder-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity 100ms ease; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .binder-card:hover .binder-card-overlay { opacity: 1; } /* Speed flip easter egg — .binder-card-3d is the rotating element. It must not have overflow:hidden so transform-style:preserve-3d works (overflow:hidden on the same element flattens the 3D context). */ .binder-card-3d { position: relative; transform-style: preserve-3d; transform: perspective(800px); transition: transform 0.4s ease; } .binder-card img { backface-visibility: hidden; } .binder-card .binder-card-back { position: absolute; inset: 0; backface-visibility: hidden; transform: rotateY(180deg); background-image: url(/assets/card-backs/hoard-2ebfb2500bfb5ac303a82c4cb3aa2c1bf270b5b1190ddd627c707328a0596ced.svg); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } /* Magic must be pinned explicitly — it used to ride the default. The default is now the Hoard-branded back, so any game without a sourced official back (incl. un-onboarded / future lines) gets Hoard, not Magic's brown back. */ .binder-card .binder-card-back[data-game="Magic"] { background-image: url(/assets/card-backs/magic-99a40d3b80e660a6a2fd12dca85bca196b678d24120e837fc71d5935cffd064d.jpg); } .binder-card .binder-card-back[data-game="Pokemon"] { background-image: url(/assets/card-backs/pokemon-56b5d61cb53c24e788638814985e88e8c29d98a8ae27cdf84f9bd88c2d12567e.jpg); } .binder-card .binder-card-back[data-game="Pokemon Japan"] { background-image: url(/assets/card-backs/pokemon-japan-0ea6866401805674af6613bdc375a254a349748bbc037d219719be6bc3804c48.jpg); } .binder-card .binder-card-back[data-card-back="pokemon-japan-old"] { background-image: url(/assets/card-backs/pokemon-japan-old-2c397bc6356f3ea33b6cf8eb1d9093a44b7d64b690893e42061b1a064d97b0da.jpg); } .binder-card .binder-card-back[data-card-back="pokemon-japan-modern"] { background-image: url(/assets/card-backs/pokemon-japan-0ea6866401805674af6613bdc375a254a349748bbc037d219719be6bc3804c48.jpg); } .binder-card .binder-card-back[data-game="YuGiOh"] { background-image: url(/assets/card-backs/yugioh-f45631a7bc226d4f8fc2bfc459d81e3839d5d872b293c63f1c9f380f0a6a1998.jpg); } .binder-card .binder-card-back[data-game="Lorcana"] { background-image: url(/assets/card-backs/lorcana-3542c0303a2c2193a727ff5d3dd8fe2b7ca8f34d20fb4530d77a79eed0e66094.png); } .binder-card .binder-card-back[data-game="One Piece"] { background-image: url(/assets/card-backs/one-piece-6865596beb856444d8bafebd6a9f7e863e04d857df18a238f059d8b2cce1306b.webp); } .binder-card .binder-card-back[data-game="Riftbound"] { background-image: url(/assets/card-backs/riftbound-8e5f9299c5893864abe8b32fd065f896c9ceb21a2b52449144cc8240450b5ae4.png); } .binder-card .binder-card-back[data-game="Star Wars Unlimited"] { background-image: url(/assets/card-backs/star-wars-unlimited-758a3708ab5ec9fdeb867054d088c266d43f62ffe9dc77cd803a5c769c97085c.jpg); } .binder-card .binder-card-back[data-game="Flesh & Blood"] { background-image: url(/assets/card-backs/flesh-and-blood-ca757a8faaae93d2ad3a0b389af3cc6ea8921d560b26bafedd71d76adef0f44f.png); } .binder-card .binder-card-back[data-game="Cardfight Vanguard"] { background-image: url(/assets/card-backs/cardfight-vanguard-625a0892db16a4e71beef608d9e60821c5e6386466a1fd6f2f562a37eb570a62.webp); } .binder-card .binder-card-back[data-game="Weiss Schwarz"] { background-image: url(/assets/card-backs/weiss-schwarz-9dd8c9ab9660b37e5dbfc41dfcd2d3652b458cd13dd7c7205665e05e97e72c55.png); } .binder-card .binder-card-back[data-game="Union Arena"] { background-image: url(/assets/card-backs/union-arena-0c1dc6e6635c3543477d8ed3b83061d2492fd2dd85a8153b8b8e21ad86ef96cc.png); } .binder-card .binder-card-back[data-game="Digimon"] { background-image: url(/assets/card-backs/digimon-995234ab1fe73d31f4085cf02f49110e473df4a5c5109f1f46994f8dcc8c8ab2.jpg); } .binder-card .binder-card-back[data-game="Dragon Ball Super"] { background-image: url(/assets/card-backs/dragon-ball-super-37f95a499ff6603b66d18fc58c8071d917b77a40b6fdb89cfbfd77fbc3565bd4.png); } .binder-card .binder-card-back[data-game="Final Fantasy"] { background-image: url(/assets/card-backs/final-fantasy-07d5c5ebb945436e9d2cebbc1a665eb91a8c718aaf3d9a3782a2666d89bde555.jpg); } .binder-card .binder-card-back[data-game="Alpha Clash"] { background-image: url(/assets/card-backs/alpha-clash-59048a7be3ce3e1c6ac4443beb8cf95c0d581281e977cf16ab05aa05c86fcfe3.jpg); } .binder-card .binder-card-back[data-game="UniVersus"] { background-image: url(/assets/card-backs/universus-12d4701e2e039812816ba4237152ed560fb3fc21c4a227f52fabdff84521fcfd.webp); } .binder-card .binder-card-back[data-game="Dragon Ball Fusion World"] { background-image: url(/assets/card-backs/dragon-ball-fusion-world-95fdab8ca4af442c67c8abd8e0e6c6f9fe56e22659bcbfa427b783a7e278f3a9.webp); } .binder-card .binder-card-back[data-game="Grand Archive"] { background-image: url(/assets/card-backs/grand-archive-f23488580c2627f9069bae1cacb3e2d59a16919cf16052ce379da68f8b9ccc7b.jpg); } .binder-card .binder-card-back::after { content: none; } .binder-card.flipped .binder-card-3d { transform: perspective(800px) rotateY(180deg); } .binder-card.flipped .binder-card-overlay { opacity: 0 !important; } /* Hide foil shimmer when flipped to a generic card back (no real back face image) */ .binder-card.flipped[data-foil]::after { opacity: 0 !important; } .binder-card.flipped.has-back[data-foil]::after { opacity: unset !important; } /* Art Gallery Mode */ .art-gallery { gap: 12px !important; align-items: flex-start; } .binder-card--art { width: 360px; border-radius: 8px; } .binder-card--art img { width: 100%; display: block; } .binder-card--art:not(.binder-card--art-pokemon):not(.binder-card--art-full-card) img { aspect-ratio: 626/457; object-fit: cover; } .binder-card--art-cropped { aspect-ratio: 626/457; overflow: hidden; } .binder-card-art-crop { position: relative; width: 100%; overflow: hidden; background: #111; backface-visibility: hidden; } .binder-card-art-crop-source { position: absolute; display: block; border-radius: 0; object-fit: unset; } .binder-card--art-full-card { width: 260px; } .binder-card--art-full-card img { height: auto; object-fit: contain; } .art-gallery.art-gallery--spotlight { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; align-items: stretch; } .art-gallery.art-gallery--spotlight .binder-card--art { width: auto; height: 100%; } .art-gallery.art-gallery--spotlight .binder-card--art img { height: 100%; border-radius: inherit; } .art-gallery--spotlight .binder-card--art-feature { grid-column: span 2; grid-row: span 2; } .art-gallery--spotlight .binder-card--art-feature-selected { outline: 2px solid var(--accent-amber); outline-offset: -2px; } .art-gallery--spotlight .binder-card--art-full-card { grid-column: span 1; grid-row: span 2; background: var(--bg-primary); } .art-gallery--spotlight .binder-card--art-full-card img { object-fit: contain; background: var(--bg-primary); } .art-gallery--spotlight .binder-card--art-feature .binder-card-overlay { padding: 56px 20px 16px; } .art-gallery--spotlight .binder-card--art-feature .binder-card-name { font-size: 22px; } .art-gallery--spotlight .binder-card--art-feature .binder-card-meta { font-size: 14px; } /* Art mode on phones: two tiles per row instead of one giant 360px card. Scoped to non-spotlight art-gallery (spotlight keeps its own grid). The .art-gallery prefix outspecifies the unscoped .binder-card--art width so this wins regardless of stylesheet load order. */ @media (max-width: 768px) { .art-gallery:not(.art-gallery--spotlight) .binder-card--art, .art-gallery:not(.art-gallery--spotlight) .binder-card--art-full-card { width: calc(50% - 6px); } } .binder-card-spotlight-btn { position: absolute; top: 10px; right: 10px; z-index: 4; opacity: 0; transform: translateY(-4px); pointer-events: none; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(17,17,17,0.72); color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 600; font-family: 'Geist', sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,0.28); backdrop-filter: blur(8px); cursor: pointer; transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background 140ms ease; } .binder-card:hover .binder-card-spotlight-btn, .binder-card:focus-within .binder-card-spotlight-btn, .binder-card-spotlight-btn.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .binder-card-spotlight-btn:hover, .binder-card-spotlight-btn.active { border-color: rgba(245,158,11,0.68); background: rgba(245,158,11,0.22); color: #fff; } .binder-card--art .binder-card-overlay { padding: 32px 12px 10px; background: linear-gradient(transparent 0%, rgba(0,0,0,0.8) 100%); } .binder-card--art .binder-card-name { font-size: 14px; } .binder-card--art .binder-card-meta { font-size: 12px; color: rgba(255,255,255,0.7); } .binder-card--art-pokemon img { width: 100%; display: block; } /* Match the art cards' size in the gallery: same width (the base .binder-card--no-image width:240 would otherwise win over .art's 360) and stretch to the row's height so it isn't a short box next to a tall card (art cards are landscape crops for Magic, full portraits for other games — stretching matches either). */ .binder-card--art.binder-card--no-image { width: 360px; height: auto; align-self: stretch; } .binder-card--art.product-image-frame { background-size: cover; } /* Show only the centered name/set/condition/price block; the hover overlay would otherwise sit on top of it and double the text. */ .binder-card--art.binder-card--no-image .binder-card-fallback { justify-content: center; padding-bottom: 8px; } .binder-card--art.binder-card--no-image .binder-card-overlay { display: none; } @media (max-width: 768px) { .binder-card--art { width: calc(100% - 8px); } .art-gallery.art-gallery--spotlight { display: flex; grid-auto-rows: auto; } .art-gallery--spotlight .binder-card--art-feature, .art-gallery--spotlight .binder-card--art-full-card { width: calc(100% - 8px); } .art-gallery.art-gallery--spotlight .binder-card--art { height: auto; } .art-gallery.art-gallery--spotlight .binder-card--art img { height: auto; } .art-gallery--spotlight .binder-card--art-feature .binder-card-overlay { padding: 32px 12px 10px; } .art-gallery--spotlight .binder-card--art-feature .binder-card-name { font-size: 16px; } .art-gallery--spotlight .binder-card--art-feature .binder-card-meta { font-size: 12px; } } .binder-card-name { font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 600; color: #fafaf9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .binder-card-meta { font-family: 'Geist Mono', monospace; font-size: 11px; color: #e7e5e4; } .pricing-rule-pill { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(245,158,11,0.34); background: rgba(245,158,11,0.12); color: var(--accent-amber); font-family: 'Geist Mono', monospace; font-size: 10px; line-height: 1.2; white-space: nowrap; text-decoration: none; vertical-align: middle; cursor: pointer; } .pricing-rule-pill:hover { border-color: rgba(245,158,11,0.62); background: rgba(245,158,11,0.18); color: var(--accent-amber); } .pricing-rule-pill--muted { border-color: var(--border-subtle); background: rgba(255,255,255,0.04); color: var(--text-muted); } .pricing-rule-pill--muted:hover { border-color: rgba(245,158,11,0.44); background: rgba(245,158,11,0.10); color: var(--accent-amber); } .binder-card-overlay .pricing-rule-pill { width: fit-content; color: #fbbf24; border-color: rgba(251,191,36,0.42); background: rgba(0,0,0,0.46); } .binder-card-inline-rule { margin-top: 6px; } .binder-card-stack-badge { position: absolute; top: 6px; right: 6px; background: var(--accent-amber); color: #0c0a09; font-family: 'Geist Mono', monospace; font-size: 18px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); z-index: 2; line-height: 1.2; } .binder-card-printing-badge { position: absolute; top: 4px; left: 4px; background: rgba(28, 25, 23, 0.92); color: var(--accent-amber); font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: var(--radius-sm); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(245, 158, 11, 0.4); pointer-events: none; z-index: 2; line-height: 1; white-space: nowrap; } /* On the no-image fallback cards, lift the badge above the fallback content */ .binder-card--no-image .binder-card-printing-badge { top: 6px; left: 6px; } /* ── Foil shimmer overlay ──────────────────────────────────────────── */ @keyframes foil-shift { 0% { background-position: 0% 50%, 0% 50%; } 50% { background-position: 100% 50%, 100% 50%; } 100% { background-position: 0% 50%, 0% 50%; } } .binder-card[data-foil]::after, .card-hover-img-wrap[data-foil]::after, .binder-detail-img-wrap[data-foil]::after, .card-row-thumb-wrap[data-foil]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; /* Two layers: specular highlight spot + rainbow sweep */ background: radial-gradient( ellipse 55% 40% at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%), rgba(255,255,255,0.18) 0%, transparent 70% ), linear-gradient( 125deg, transparent 15%, rgba(255,80,180, 0.22) 20%, rgba(255,180,0, 0.18) 28%, rgba(80,255,160, 0.18) 36%, rgba(80,160,255, 0.22) 44%, rgba(180,80,255, 0.18) 52%, rgba(255,80,120, 0.18) 60%, transparent 65% ); background-size: 100% 100%, 300% 300%; background-position: 0 0, calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%); animation: foil-shift 4s ease infinite; mix-blend-mode: color-dodge; pointer-events: none; z-index: 1; opacity: 0.9; transition: background-position 0.05s linear; } /* Pause auto-animation while mouse is tracking */ .binder-card[data-foil].foil-active::after, .card-hover-img-wrap[data-foil].foil-active::after, .binder-detail-img-wrap[data-foil].foil-active::after, .card-row-thumb-wrap[data-foil].foil-active::after { animation-play-state: paused; } /* Thumbnails skip the idle animation entirely — a table with 2000 foil rows would otherwise spawn 2000 mix-blend-mode compositor layers and saturate the GPU. The shimmer is still driven by --mx/--my on hover (foil-active). */ .card-row-thumb-wrap[data-foil]::after { animation: none; } .card-row-thumb-wrap[data-foil].foil-active::after { animation: foil-shift 4s ease infinite; } /* Holo gets a slightly stronger effect */ .binder-card[data-foil="holo"]::after, .card-hover-img-wrap[data-foil="holo"]::after, .binder-detail-img-wrap[data-foil="holo"]::after, .card-row-thumb-wrap[data-foil="holo"]::after { opacity: 1; animation-duration: 3s; } /* Foil-etched: silver/white with screen blend */ .binder-card[data-foil="foil-etched"]::after, .card-hover-img-wrap[data-foil="foil-etched"]::after, .binder-detail-img-wrap[data-foil="foil-etched"]::after, .card-row-thumb-wrap[data-foil="foil-etched"]::after { background: radial-gradient( ellipse 55% 40% at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%), rgba(255,255,255,0.22) 0%, transparent 70% ), linear-gradient( 125deg, transparent 20%, rgba(220,220,255, 0.3) 26%, rgba(255,255,220, 0.2) 32%, rgba(220,255,220, 0.2) 38%, transparent 44%, rgba(220,220,255, 0.25) 70%, transparent 76% ); background-size: 100% 100%, 250% 250%; background-position: 0 0, calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%); mix-blend-mode: screen; animation-duration: 2.5s; } .binder-card-consignor-chip { position: absolute; top: 6px; left: 6px; background: rgba(28, 25, 23, 0.82); /* Over card art the chip bg is always dark, so the name stays a fixed light. Color identity now rides on .consignor-chip-dot, not the text. */ color: #fafaf9; font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent-amber)) 40%, transparent); pointer-events: auto; cursor: pointer; z-index: 2; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; transition: background 100ms; } .binder-card-consignor-chip:hover { background: rgba(28, 25, 23, 0.96); } /* In table view the chip sits inline in a , not over card art. The bg is a theme-following tint, so the name follows the theme too (near-black in light, near-white in dark) instead of the bright palette color, which was unreadable on the pale tint in light mode. */ td .binder-card-consignor-chip { position: static; display: inline-block; vertical-align: middle; margin-left: 6px; border-radius: 3px; padding: 2px 7px; text-align: left; color: var(--text-primary); background: color-mix(in srgb, var(--chip-color, var(--accent-amber)) 12%, transparent); } /* Consignor color identity as a small swatch dot (matches the filter dropdown), keeping the name text readable. */ .consignor-chip-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; vertical-align: baseline; flex-shrink: 0; } .consignor-chip-sep { opacity: 0.4; margin: 0 4px; } td .binder-card-consignor-chip:hover { background: color-mix(in srgb, var(--chip-color, var(--accent-amber)) 22%, transparent); } .consignor-color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } /* No-image fallback card */ .binder-card--no-image { width: 240px; height: 334px; border: 1px solid var(--border-subtle); } /* No-image binder cards show the clean name/set/condition/price block; drop the generic "Product Image Coming Soon" placeholder art behind it — the two collided into an unreadable overlap. The dark frame background remains. */ .binder-card--no-image.product-image-placeholder-visible { background-image: none; } /* Desktop binder: art in a frame with an always-visible price footer below. */ .binder-card--footed { display: flex; flex-direction: column; } .binder-card--footed .binder-card-frame { position: relative; flex: 0 0 auto; } .binder-card-footer { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 6px; padding: 7px 9px; font-family: 'Geist Mono', monospace; border-top: 1px solid var(--border-subtle); } .binder-card-footer-cond { text-align: left; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .binder-card-footer-price { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .binder-card-footer-num { text-align: right; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* No-image card: same frame box (5:7 like a card) + shared footer so it sits flush beside art cards. The frame just shows name + set. */ .binder-card--no-image.binder-card--footed { height: auto; } .binder-card--no-image-frame { aspect-ratio: 5 / 7; display: flex; align-items: center; justify-content: center; } .binder-card-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 8px; text-align: center; gap: 4px; } .binder-card-fallback-name { font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .binder-card-fallback-set { font-family: 'Geist', sans-serif; font-size: 10px; color: var(--text-secondary); } .binder-card-fallback-condition { font-family: 'Geist', sans-serif; font-size: 10px; color: var(--text-muted); } .binder-card-fallback-price { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; color: var(--accent-amber); } /* Skeleton loading */ .binder-card--skeleton { width: 240px; height: 334px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); overflow: hidden; } .binder-skeleton-shimmer { width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%); animation: binderShimmer 1.5s infinite; } @keyframes binderShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Binder pagination */ .binder-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 0; } .binder-page-btn { padding: 8px 18px; background: var(--bg-glass); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 100ms ease; } .binder-page-btn:hover:not(:disabled) { border-color: var(--accent-amber); } .binder-page-btn:disabled { opacity: 0.4; cursor: default; } .binder-page-info { font-family: 'Geist', sans-serif; font-size: 14px; color: var(--text-secondary); } /* Desktop page-turn zones flanking the binder grid. The whole left/right edge is the hit target — like grabbing the edge of a book page — instead of a tiny floating button. The chevron is faint at rest and the edge washes amber on hover. */ .binder-grid-wrapper { position: relative; } .binder-page-arrow { display: none; position: absolute; top: 0; bottom: 0; width: 56px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; align-items: flex-start; z-index: 5; transition: background 150ms ease, color 150ms ease; } /* The zone spans the whole (tall) grid, so the chevron is sticky-pinned to the middle of the viewport — it stays visible wherever you've scrolled instead of sitting centered thousands of px down. */ .binder-page-arrow svg { position: sticky; top: calc(50vh - 12px); opacity: 0.3; transition: opacity 150ms ease, transform 150ms ease; } /* Fill the gutter between the wrapper edge and the (centred) card block — JS sizes the width to the actual gutter (positionBinderArrows). The chevron sits on the INNER edge, right beside the cards, not out at the window. */ .binder-page-arrow--prev { left: 0; justify-content: flex-end; padding-right: 8px; } .binder-page-arrow--next { right: 0; justify-content: flex-start; padding-left: 8px; } .binder-page-arrow--prev:hover:not(:disabled) { background: linear-gradient(to right, rgba(245, 158, 11, 0.16), transparent); } .binder-page-arrow--next:hover:not(:disabled) { background: linear-gradient(to left, rgba(245, 158, 11, 0.16), transparent); } .binder-page-arrow:hover:not(:disabled) { color: var(--accent-amber); } .binder-page-arrow:hover:not(:disabled) svg { opacity: 1; } .binder-page-arrow--prev:hover:not(:disabled) svg { transform: translateX(-3px); } .binder-page-arrow--next:hover:not(:disabled) svg { transform: translateX(3px); } /* Hide the zone entirely at the first/last page so there's no dead edge. */ .binder-page-arrow:disabled { display: none; } @media (min-width: 1200px) { .binder-page-arrow:not(:disabled) { display: flex; } } /* Binder empty/error */ .binder-empty, .binder-error { text-align: center; padding: 60px 20px; } .binder-empty-title { font-family: 'Cabinet Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .binder-empty-subtitle { font-family: 'Geist', sans-serif; font-size: 14px; color: var(--text-muted); } .binder-error p { color: var(--accent-rose); font-size: 18px; margin-bottom: 12px; } /* ── Binder Detail Panel ───────────────────────────────────────────── */ .binder-detail-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; pointer-events: none; } .binder-detail-content { pointer-events: auto; } .binder-detail-scrim { display: none; } .binder-detail-scrim-unused { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 250ms ease-out; } .binder-detail-panel.open .binder-detail-scrim { opacity: 1; } .binder-detail-content { position: absolute; top: 0; right: 0; bottom: 0; width: 620px; background: var(--bg-secondary); border-left: 1px solid var(--border-subtle); padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform 250ms ease-out; } .binder-detail-panel.open .binder-detail-content { transform: translateX(0); } /* 96px clears the sticky close so trailing buttons (OK/Cancel/Assign etc.) never end up trapped underneath it. */ #binder-detail-body { padding-bottom: 96px; } .binder-detail-close { position: sticky; bottom: 0; width: 100%; padding: 14px; margin-top: 24px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 14px; font-family: 'Geist', sans-serif; cursor: pointer; transition: color 100ms ease, background 100ms ease; z-index: 1; } .binder-detail-close:hover { color: var(--text-primary); background: var(--bg-tertiary, rgba(255,255,255,0.05)); } /* Tap-friendly controls for the Owner row state machine inside the binder detail panel. Replaces inline 12-13px / 2px-padding styles. */ .owner-row-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-size: 14px; font-family: 'Geist', sans-serif; cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms; } .owner-row-btn:hover, .owner-row-btn:focus-visible { border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.08); color: var(--accent-amber); outline: none; } .owner-row-btn--primary { border-color: var(--accent-amber); background: var(--accent-amber); color: #000; font-weight: 600; } .owner-row-btn--primary:hover, .owner-row-btn--primary:focus-visible { background: var(--accent-amber); color: #000; filter: brightness(1.08); border-color: var(--accent-amber); } .owner-row-btn--ok { border-color: var(--accent-amber); color: var(--accent-amber); background: transparent; } .owner-row-control { min-height: 36px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-primary); font-size: 14px; font-family: 'Geist', sans-serif; } .owner-row-qty { width: 72px; text-align: right; } .owner-row-label { font-size: 14px; color: var(--text-muted); } .binder-detail-img-wrap { position: relative; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius-lg); transition: transform 0.12s ease-out, box-shadow 0.12s ease-out; transform-style: preserve-3d; will-change: transform; } .binder-detail-img-wrap .binder-card-printing-badge { top: 8px; left: 8px; font-size: 10px; padding: 4px 7px; } .binder-detail-img { width: 100%; border-radius: var(--radius-lg); display: block; transition: opacity 0.15s ease, transform 0.4s ease; } .binder-detail-flip-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.5); padding: 3px 10px; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .binder-detail-img-wrap:hover .binder-detail-flip-hint { opacity: 1; } /* Custom (photo) listing: the seller's real photo is not card-shaped, so contain it on a neutral field rather than cropping to card proportions. */ .binder-detail-img-wrap--photo { margin-bottom: 8px; } .binder-detail-img--photo { object-fit: contain; max-height: 420px; background: var(--surface-2, #1a1815); } .binder-photo-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 4px 7px; border-radius: 6px; background: rgba(0,0,0,0.62); color: #fff; letter-spacing: 0.03em; pointer-events: none; } /* ahg-g7ckn: inline listing photo toggle in the detail panel. */ .binder-photo-toggle { display: block; width: 100%; margin-bottom: 8px; padding: 6px 0; font-size: 12px; font-family: 'Geist', sans-serif; font-weight: 500; color: var(--text-muted); background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .binder-photo-toggle:hover { color: var(--text-primary); border-color: var(--border-muted); } .binder-photo-inline { margin-bottom: 12px; } .binder-photo-inline img { width: 100%; display: block; border-radius: var(--radius-md); object-fit: contain; max-height: 300px; background: var(--surface-2, #1a1815); } /* ahg-g7ckn: listing photo rendered inline below the card art in the hover popup. */ .card-hover-listing-photo { margin-top: 6px; } .card-hover-listing-photo img { width: 280px; border-radius: 14px; display: block; box-shadow: 0 8px 32px rgba(0,0,0,0.5); object-fit: contain; max-height: 200px; background: #111; } .binder-detail-flip-btn { display: block; width: 100%; margin-top: 8px; padding: 6px 0; font-size: 12px; font-family: 'Geist', sans-serif; font-weight: 500; color: var(--text-muted); background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .binder-detail-flip-btn:hover { color: var(--accent-amber); background: rgba(245, 158, 11, 0.08); border-color: var(--border-accent); } .mobile-card-look-closer { display: none; } /* Recent cards tray */ .recent-tray { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } .recent-tray-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .recent-tray-cards { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .recent-tray-cards::-webkit-scrollbar { display: none; } .recent-tray-card { flex-shrink: 0; width: 48px; height: 67px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 1px solid var(--border-subtle); transition: border-color 0.15s, transform 0.1s; } .recent-tray-card:hover { border-color: var(--accent-amber); transform: scale(1.08); } .recent-tray-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .recent-tray-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 8px; color: var(--text-muted); background: var(--bg-secondary); text-align: center; padding: 2px; word-break: break-all; } .mana-sym { vertical-align: -2px; display: inline; margin: 0 1px; } .mana-sym-sm { vertical-align: -2px; } /* ahg-boem7: compare-view action links -- neutral --text-primary label, .link-external (added in dashboard.js) supplies the trailing arrow via ::after for the genuinely external ones (TCGplayer/My Listing/ PriceCharting). This class now only carries layout (padding/hover chip), never color -- amber was the 4th-register violation this pass removes. */ .compare-action-link { font-size: 14px; text-decoration: none; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .compare-action-link:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-subtle); } .compare-card-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; min-width: 0; } .compare-card-name { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.25; } /* Internal drill-in ("View All My Editions"): neutral --text-primary, no underline (deliberately not .link-internal's dotted-underline pattern -- it isn't attribute-scoped, and the compact card heading reads cleaner without a second underlined element next to the name). */ .compare-card-copies-link { color: var(--text-primary); font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; } .compare-card-copies-link:hover { color: var(--text-secondary); } .compare-card-status { margin: 4px 0 2px; } .compare-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--text-muted); margin-top: 6px; } .compare-card-variance { white-space: nowrap; } .compare-card-controls { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .compare-condition-select { font-size: 16px; color: var(--text-secondary); background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 4px 6px; cursor: pointer; font-family: inherit; max-width: 100%; min-height: 32px; } /* Unselect -> control 03 (.cdx-ghost-btn, added in dashboard.js). The compact size below keeps it side-by-side with the condition select in the ~200px mini-card column; the ghost look itself (border/hover fill/ focus ring) still comes from .cdx-ghost-btn. Scoped to .compare-cards-row only -- .compare-remove-btn.cdx-ghost-btn is also reused verbatim by the single-card panel's dismiss button (binder-detail-dismiss) and the compare-view undo toast, both of which want the full-size default and must NOT be compacted by this rule. */ .compare-cards-row .compare-remove-btn.cdx-ghost-btn { padding: 4px 10px; min-height: 32px; gap: 4px; } /* No-art placeholder (ahg-k8m58): card-shaped, names the card + set, with a quiet "No image" tag so it reads as intentional, not broken. Shared by the single-card panel and the compact compare card (--compact). */ .binder-detail-no-img { width: 100%; aspect-ratio: 5 / 7; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; } .binder-detail-no-img .card-noimg-name { font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 600; color: var(--text-secondary); line-height: 1.3; } .binder-detail-no-img .card-noimg-set { font-size: 13px; color: var(--text-muted); } .binder-detail-no-img .card-noimg-tag { margin-top: 4px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; } .binder-detail-no-img--compact { padding: 12px; gap: 5px; } .binder-detail-no-img--compact .card-noimg-name { font-size: 13px; } .binder-detail-no-img--compact .card-noimg-set { font-size: 11px; } .binder-detail-no-img--compact .card-noimg-tag { font-size: 9px; } .binder-detail-columns { display: flex; gap: 20px; margin-bottom: 12px; } .binder-detail-col-img { flex-shrink: 0; width: 240px; } .binder-detail-col-img img { width: 100%; border-radius: var(--radius-lg); } .binder-detail-col-info { flex: 1; min-width: 0; /* Center sparse identity (name only, for text-light cards) beside the tall art instead of leaving a void below it. No-op when the info column is the taller of the two (text-heavy Magic cards). ahg-k8m58. */ display: flex; flex-direction: column; justify-content: center; } .binder-detail-name { font-family: 'Cabinet Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px 0; } .binder-detail-set { font-family: 'Geist', sans-serif; font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; } /* Tap-friendly filter chips for clickable fields in the detail panel. Minimum ~32px target height inline, ~44px when tapped with finger (padding extends the hit area). */ .binder-detail-filter-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 13px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms; } .binder-detail-filter-chip:hover, .binder-detail-filter-chip:focus-visible { border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.10); color: var(--accent-amber); outline: none; } /* Inline word filters used in the type line — flow with text but give each word a finger-sized tap area without breaking lines. */ .binder-detail-type-word { display: inline-block; padding: 4px 6px; margin: 0 1px; border-radius: 6px; color: inherit; text-decoration: none; cursor: pointer; transition: background 120ms, color 120ms; } .binder-detail-type-word:hover, .binder-detail-type-word:focus-visible { background: rgba(245,158,11,0.10); color: var(--accent-amber); outline: none; } /* Set name link in .binder-detail-set: padded but visually unobtrusive. */ .binder-detail-set-link { display: inline-block; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; color: inherit; text-decoration: none; cursor: pointer; transition: background 120ms, color 120ms; } .binder-detail-set-link:hover, .binder-detail-set-link:focus-visible { background: rgba(245,158,11,0.10); color: var(--accent-amber); outline: none; } .binder-detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-family: 'Geist', sans-serif; font-size: 14px; color: var(--text-secondary); } .binder-detail-row span:last-child { color: var(--text-primary); font-weight: 500; } .binder-detail-price { font-family: 'Geist Mono', monospace; color: var(--accent-amber) !important; } .binder-all-copies-btn { margin-top: 16px; width: 100%; padding: 10px; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 100ms ease; } .binder-all-copies-btn:hover { border-color: var(--accent-amber); color: var(--text-primary); } .binder-tcg-link { display: block; margin-top: 8px; width: 100%; padding: 10px; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--accent-amber); font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; transition: border-color 100ms ease; box-sizing: border-box; } .binder-tcg-link:hover { border-color: var(--accent-amber); } .binder-detail-stack-info { margin-top: 16px; padding: 12px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius-md); font-family: 'Geist', sans-serif; font-size: 13px; color: var(--accent-amber); text-align: center; } .binder-stack-copies { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; } .binder-stack-copy-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--bg-secondary); font-size: 13px; } .binder-stack-copy-condition { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .binder-stack-copy-owner { font-size: 13px; text-align: center; } .binder-stack-copy-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-amber); white-space: nowrap; } /* ── Scrollable table wrapper ─────────────────────────────────── */ .table-wrap { overflow-x: auto; overflow-y: hidden; /* Windows: prevent auto-rendering scrollbars */ -webkit-overflow-scrolling: touch; } /* ── Responsive: 1200px (stat cards start getting tight) ──── */ @media (max-width: 1200px) { .stats { gap: 12px; } .stat { padding: 16px; } .stat-label { font-size: 14px; } .stat-value { font-size: 22px; } } /* ── Responsive: 960px (narrow monitors, tablet landscape) ──── */ @media (max-width: 960px) { body { padding: 20px; } .container { padding: 20px 24px; } table { font-size: 15px; } th { padding: 8px 12px; } td { padding: 9px 14px; } .stats { gap: 8px; } .stat { padding: 12px; } .stat-label { font-size: 12px; } .stat-value { font-size: 18px; } .price { font-size: 15px; } .stat-value { font-size: 24px; } .spike-card { width: 180px; } .movers-columns { gap: 16px; } .kpi-value { font-size: 20px; } .spikes-table td { font-size: 15px; } } /* ── Responsive: 768px (tablet portrait) ───────────────────── */ @media (max-width: 768px) { /* No outer body padding on mobile — the framing strip of body gradient around the container reads as a wonky margin band, and it stops the sticky header from spanning edge-to-edge. Container goes full-width; horizontal padding inside the container keeps content from touching the viewport edges. */ body { padding: 0; } .container { padding: 12px 8px; border-radius: 0; border: none; box-shadow: none; min-height: 100vh; } h1 { font-size: 22px; } h2 { font-size: 16px; margin-bottom: 4px; } .subtitle { font-size: 14px; margin-bottom: 12px; } .dashboard-header { margin-bottom: 12px; } .tabs { margin-bottom: 12px; } table { font-size: 14px; } th { padding: 8px 10px; } td { padding: 8px 10px; } .price { font-size: 14px; } .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; } .stat { padding: 10px 8px; } .stat-label { font-size: 10px; } .stat-value { font-size: 16px; } .stat-delta { display: none; } .search-container { padding: 14px; } .search-container input[type="text"] { font-size: 15px; padding: 12px 14px; } .search-container button[type="submit"] { font-size: 14px; padding: 10px 18px; } .clear-button { font-size: 14px; padding: 12px 18px; } .tabs { gap: 0; } .tab-button { padding: 8px 10px; font-size: 14px; flex: 1; text-align: center; } .time-toggle button { font-size: 14px; padding: 5px 10px; } /* Spike cards: two-line row layout for mobile. No !important needed — these rules are lower specificity (0,1,0) than .spike-row .spike-card (0,2,0), so spike-row cards are unaffected. */ .spike-grid { flex-wrap: wrap; overflow-x: visible; gap: 0; } .spike-card { width: 100%; flex: 1 1 100%; display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 10px 4px; border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid var(--border-subtle); } .spike-card:last-child { border-bottom: none; } .spike-art { width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius-md); margin: 0; grid-row: 1 / 3; grid-column: 1; } .spike-art-placeholder { width: 40px; height: 40px; min-width: 40px; grid-row: 1 / 3; grid-column: 1; } .spike-name, .spike-set, .spike-price, .spike-value { padding-left: 0 !important; padding-right: 0 !important; } .spike-name { grid-column: 2; grid-row: 1; font-size: 14px !important; padding-top: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .spike-set { display: none; } .spike-price { grid-column: 3; grid-row: 1; text-align: right; font-size: 14px !important; margin: 0 !important; line-height: 1.3; font-weight: 600; } .spike-value { grid-column: 2 / 4; grid-row: 2; text-align: left; font-size: 12px !important; padding-bottom: 0 !important; white-space: nowrap; line-height: 1.3; } .spikes-table td { font-size: 14px; } .spikes-table th, .spikes-table td { padding: 10px 10px; } .spike-heading { font-size: 14px; } .spike-view-all { font-size: 14px; } .pagination { font-size: 14px; } .pagination a { padding: 8px 14px; font-size: 14px; } .pagination-btn { padding: 8px 14px; font-size: 13px; } .kpi-card { padding: 10px 12px; min-width: 0; flex: 1; } .kpi-label { font-size: 11px; } .kpi-value { font-size: 16px; } .movers-columns { flex-direction: column; } .spike-row { flex-wrap: wrap; gap: 6px; } /* spike-row cards: full-bleed card art on mobile, full-width single-column. Specificity (0,2,0) naturally beats .spike-card (0,1,0) above. */ .spike-row .spike-card { display: flex; flex: 1 1 100%; width: 100%; flex-direction: row; align-items: center; padding: 10px 14px; gap: 8px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; min-height: 64px; background: #0f0e0d; } [data-theme="light"] .spike-row .spike-card { background: #e8e5e0; } .spike-row .spike-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0.7; border-radius: 0; margin: 0; } .spike-row .spike-art.pokemon-art { object-position: center 25%; transform: scale(1.6); transform-origin: center 30%; } .spike-row .spike-art-placeholder { display: none; } .spike-row .set-icon { display: none; } .spike-row .spike-value { font-size: 16px !important; } .spike-row .spike-name { font-size: 15px !important; } /* pinned-chip: full-width handled by flex container */ .history-code, .history-time, .history-link, .history-link-muted, .history-pin-btn, .history-remove-btn, .pinned-code, .pinned-info, .pinned-snapshot-btn, .pinned-unpin-btn, .pinned-delete-btn, .snapshot-label { font-size: 13px; } /* Customer panel & table */ .customer-panel-content { width: 100%; } .customers-hide-mobile { display: none; } #customers-stats { grid-template-columns: repeat(2, 1fr); } /* Mobile: hide Days + Their Feedback (rating hearts) via .customers-hide-mobile so the table fits without horizontal scroll. Override the inline min-width: 800px and the column percentages that were calibrated for 7 columns. */ #customers-tab .table-wrap { overflow-x: hidden; } #customers-tab table { min-width: 0 !important; table-layout: auto; width: 100%; } #customers-tab th, #customers-tab td { padding: 8px 6px; font-size: 13px; } #customers-tab th { font-size: 11px; } /* Buyer flexes and truncates; remaining numeric cells hug content */ #customers-tab th:nth-child(1), #customers-tab td:nth-child(1) { width: auto; max-width: 0; overflow: hidden; text-overflow: ellipsis; } #customers-tab th:nth-child(2), #customers-tab td:nth-child(2), #customers-tab th:nth-child(3), #customers-tab td:nth-child(3), #customers-tab th:nth-child(4), #customers-tab td:nth-child(4) { width: 1%; white-space: nowrap; } /* Trust & Tier: cap width so ★ rating + VIP stack vertically and the cell stays narrow even when both badges are present. */ #customers-tab th:nth-child(7), #customers-tab td:nth-child(7) { width: 1%; max-width: 64px; white-space: normal; text-align: right; } #customers-tab td:nth-child(7) .buyer-rating, #customers-tab td:nth-child(7) .tier-badge { display: inline-flex; margin: 1px 0; } /* Binder: always-on overlay on touch devices */ .binder-card-overlay { opacity: 1; padding: 16px 6px 6px; } .binder-card-name { font-size: 11px; } .binder-card-meta { font-size: 10px; } /* Binder detail: bottom sheet on mobile */ .binder-detail-content { width: 100%; top: auto; bottom: 0; max-height: 70vh; border-left: none; border-top: 1px solid var(--border-subtle); border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); padding: 16px; overscroll-behavior: contain; /* prevent scroll bleeding to page behind */ -webkit-overflow-scrolling: touch; } .binder-detail-scrim { display: block; position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 250ms; pointer-events: none; } .binder-detail-panel.open .binder-detail-scrim { opacity: 1; pointer-events: auto; } .binder-detail-panel.open { pointer-events: auto; } .binder-detail-panel.open .binder-detail-content { transform: translateY(0); } .binder-detail-columns { flex-direction: row; gap: 12px; } .binder-detail-col-img { width: 100px; flex-shrink: 0; } .binder-detail-col-info { flex: 1; min-width: 0; } .binder-detail-name { font-size: 18px !important; } .binder-detail-img-wrap--lookable { cursor: zoom-in; } /* Mobile: sticky close for thumb reach. The 96px padding-bottom on #binder-detail-body below keeps trailing buttons clear of the sticky bar — so OK/Cancel/Assign etc. never end up trapped underneath. */ .binder-detail-close { position: sticky; bottom: 0; width: 100%; margin: 16px 0 0; border-radius: var(--radius-md); padding: 14px; font-size: 16px; min-height: 48px; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); z-index: 1; } #binder-detail-body { padding-bottom: 96px; } body.mobile-card-look-closer-open { overflow: hidden; } .mobile-card-look-closer { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; } .mobile-card-look-closer.open { opacity: 1; pointer-events: auto; } .mobile-card-look-closer__scrim { position: absolute; inset: 0; background: rgba(18, 18, 18, 0.78); backdrop-filter: blur(4px); } .mobile-card-look-closer__content { position: relative; width: min(88vw, 430px); max-height: 92vh; display: flex; justify-content: center; } .mobile-card-look-closer__content img { width: 100%; height: auto; max-height: 92vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 18px 60px rgba(0,0,0,0.45); } .mobile-card-look-closer__close { position: absolute; top: -12px; right: -12px; z-index: 1; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.24); background: rgba(18,18,18,0.86); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .binder-card, .binder-card--no-image, .binder-card--skeleton { width: calc(50% - 4px); height: auto; } .binder-search-input { min-width: 140px; flex: 1; } /* Mobile inline pricing cards (card + data side by side) */ .binder-card-inline { width: 100% !important; display: flex; align-items: flex-start; gap: 12px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-secondary); cursor: pointer; touch-action: manipulation; transition: border-color 100ms; position: relative; } .binder-card-inline:active { border-color: var(--accent-amber); } .binder-card-inline-img { width: 90px; aspect-ratio: 5 / 7; flex-shrink: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); background-color: var(--bg-primary); } .binder-card-inline-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .binder-card-inline-name { font-size: 14px; font-weight: 600; color: var(--text-primary); font-family: 'Geist', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .binder-card-inline-set { font-size: 12px; color: var(--text-muted); font-family: 'Geist', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .binder-card-inline-prices { width: 100%; border-collapse: collapse; margin-top: 4px; } .binder-card-inline-prices td { font-size: 13px; padding: 1px 0; font-family: 'Geist Mono', monospace; color: var(--text-primary); } .binder-card-inline-prices td:first-child { color: var(--text-muted); font-family: 'Geist', sans-serif; font-size: 12px; width: 55px; } .binder-card-inline-status { font-size: 11px; font-weight: 700; font-family: 'Geist Mono', monospace; letter-spacing: 0.04em; margin-top: 2px; } } /* ── Responsive: 480px (large phones) ──────────────────────── */ @media (max-width: 480px) { [aria-label="Outcome metrics"] { flex-direction: column !important; gap: 20px !important; padding: 16px 20px !important; } [aria-label="Outcome metrics"] > div:first-child > div:nth-child(2) { font-size: 32px !important; } [aria-label="Outcome metrics"] > div:not(:first-child) { display: inline-flex; flex-direction: column; } [aria-label="Outcome metrics"] > div:not(:first-child) > div:nth-child(2) { font-size: 20px !important; } h1 { font-size: 20px; } .tab-button { padding: 6px 6px; font-size: 13px; } .stats { grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0; } .stat { padding: 8px 6px; } .stat-label { font-size: 12px; } .stat-value { font-size: 16px; } /* Compact header on phones — tight bottom margin reclaims the dead space between the logo row and the first content (e.g. the cards search). */ .dashboard-header { margin-bottom: 4px !important; gap: 8px; flex-wrap: wrap; } .dashboard-header h1 { font-size: 24px; } .sync-pill { font-size: 11px !important; padding: 3px 8px !important; } .product-line-selector { margin-left: auto; } .spike-grid { gap: 0; } /* Pagination: bigger tap targets on phones */ .pagination a { padding: 12px 24px; min-height: 44px; display: inline-flex; align-items: center; } .pagination { font-size: 14px; } .pagination-btn { min-height: 44px; padding: 10px 16px !important; } .binder-card, .binder-card--no-image { width: calc(50% - 4px); min-width: 150px; } .binder-card--skeleton { width: calc(50% - 4px); min-width: 150px; height: 222px; } .search-container { padding: 10px; } .search-container input[type="text"] { font-size: 14px; padding: 10px 12px; } .search-container button[type="submit"] { padding: 10px 14px; } .clear-button { padding: 10px 14px; font-size: 13px; } #customers-stats { grid-template-columns: 1fr; } .kpi-card { min-width: 0; } .snapshot-summary { gap: 12px; } } /* ── Responsive: 360px (small phones) ──────────────────────── */ @media (max-width: 360px) { body { padding: 0; } .container { padding: 8px 3px; } h1 { font-size: 18px; } .stat-value { font-size: 16px; } .tab-button { padding: 6px 4px; font-size: 12px; } .binder-card, .binder-card--no-image, .binder-card--skeleton { width: calc(50% - 4px); } } /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .binder-card[data-foil]::after, .card-hover-img-wrap[data-foil]::after, .binder-detail-img-wrap[data-foil]::after, .card-row-thumb-wrap[data-foil]::after { animation: none !important; } .binder-card-3d { transition: none !important; } .binder-detail-img { transition: none !important; } .binder-detail-flip-hint { transition: none !important; } } /* Compare view: keep card images same size as single-card view */ .compare-cards-row .binder-detail-img-wrap { max-width: 240px; } .compare-cards-row .binder-detail-img-wrap img { width: 100%; } /* ── Compare view: side-by-side on all screens ──────────────── */ /* ahg-boem7: 14px text floor + 16px input floor (iOS zoom) apply on mobile too -- only padding/gap compact here, never font-size below those minimums. */ @media (max-width: 480px) { .compare-cards-row { flex-direction: row !important; gap: 8px !important; } .compare-cards-row > div { flex: 1 !important; min-width: 0 !important; max-width: none !important; } .compare-cards-row .binder-detail-img-wrap { max-width: 100%; } .compare-cards-row .compare-remove-btn.cdx-ghost-btn { padding: 4px 8px !important; min-height: 32px !important; } .compare-cards-row .compare-condition-select { padding: 3px 4px !important; } } /* ahg-x2wx: inline help affordance for table column headers. Click the header (or the ? chip inside it) to surface a plain-English definition. The whole header is the tap target so we satisfy the 44px mobile rule without inflating chrome. */ .hint-host { position: relative; } button.hint-chip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; border: none; border-radius: 50%; background: var(--border-subtle); color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; user-select: none; cursor: help; font-family: inherit; transition: background 150ms ease-out, color 150ms ease-out; } button.hint-chip:hover, button.hint-chip:focus-visible, .hint-host[aria-expanded="true"] button.hint-chip { background: var(--accent-amber); color: var(--bg-secondary); outline: none; } /* Mobile: expand the tap target without changing visual size */ @media (hover: none), (pointer: coarse) { button.hint-chip { width: 24px; height: 24px; font-size: 13px; } } .hint-popover { position: absolute; z-index: 50; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: var(--radius-md); padding: 12px 14px; max-width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--text-primary); text-transform: none; letter-spacing: 0; text-align: left; opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; } [data-theme="dark"] .hint-popover { background: #2a2622; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .hint-popover[data-open="true"] { opacity: 1; pointer-events: auto; } .hint-popover .hint-title { font-weight: 600; margin-bottom: 6px; } .hint-popover .hint-body { color: var(--text-primary); } .hint-popover .hint-example { display: block; margin-top: 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); } /* Price update action bar */ .reprice-bar { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-bottom: 2px solid var(--accent-amber); padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: var(--radius-lg); margin-bottom: 16px; } .reprice-bar-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #reprice-bar-text { color: var(--text-primary); font-size: 14px; font-weight: 500; } .reprice-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-muted); font-size: 12px; } .reprice-step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .reprice-step:not(:last-child)::after { content: "\2192"; color: var(--text-muted); opacity: 0.7; } /* ahg-jukmn: "View N impacted cards" shortcut — align-self keeps the dotted underline hugging the text in the flex column instead of stretching full width. */ .reprice-view-cards-link { align-self: flex-start; font-size: 13px; } .reprice-step.is-active { color: var(--accent-amber); font-weight: 600; } .reprice-step.is-complete { color: var(--accent-green); } .reprice-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } @media (max-width: 640px) { .reprice-bar { flex-direction: column; align-items: stretch; } .reprice-bar-actions { flex-wrap: wrap; } .reprice-bar-actions .toolbar-btn { flex: 1 1 auto; } } #cards-table-view table:has([data-reprice-col]) tbody tr { background: var(--bg-secondary); } #cards-table-view table:has([data-reprice-col]) tbody tr:hover { background: var(--bg-card-hover); } #cards-table-view table:has([data-reprice-col]) tbody tr.underpriced { background: color-mix(in srgb, var(--accent-amber) 8%, var(--bg-secondary)); } /* ahg-x2wx: dim bookkeeping/target-only rows so the eye lands on real movers */ #cards-table-view table:has([data-reprice-col]) tbody tr.row-noop { opacity: 0.55; } #cards-table-view table:has([data-reprice-col]) tbody tr.row-noop:hover { opacity: 1; } #cards-table-view table:has([data-reprice-col]) tbody tr.row-noop-toggle { background: transparent; } #cards-table-view table:has([data-reprice-col]) tbody tr.row-noop-toggle:hover { background: transparent; } /* Status column is suppressed in preview — the header is hidden in JS (exitRepriceMode restores it), and body cells render as an empty placeholder so the appended Change cell still lands at position 18. Hide the placeholder so the column fully collapses. */ #cards-table-view table:has([data-reprice-col]) tbody tr > td.reprice-status-cell { display: none; } /* Reprice analyze-phase loading indicators. Live between the user clicking "Update Prices" and the analyze job returning — the _setRepricePreviewBanner / _renderRepriceTable handoff overwrites both the bar text and the tbody, so no explicit teardown needed. */ .reprice-spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-subtle); border-top-color: var(--accent-amber); animation: reprice-spinner-spin 0.8s linear infinite; vertical-align: -2px; margin-right: 8px; flex-shrink: 0; } @keyframes reprice-spinner-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .reprice-spinner { animation-duration: 2s; } } .reprice-skeleton-row td { padding: 10px 14px !important; border: none !important; } .reprice-skeleton-bar { height: 18px; border-radius: 4px; background: linear-gradient(90deg, #292524 25%, #3c3532 50%, #292524 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s ease-in-out infinite; } [data-theme="light"] .reprice-skeleton-bar { background: linear-gradient(90deg, #e7e5e4 25%, #d6d3d1 50%, #e7e5e4 75%); background-size: 200% 100%; } .stat-delta { font-size: 12px; font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; margin-top: 4px; } .stat-delta.positive { color: var(--accent-green); } .stat-delta.negative { color: var(--accent-rose); } .stat-value.skeleton { background: linear-gradient(90deg, #292524 25%, #3c3532 50%, #292524 75%); background-size: 200% 100%; animation: skeleton-pulse 1.5s ease-in-out infinite; border-radius: 4px; color: transparent !important; } [data-theme="light"] .stat-value.skeleton { background: linear-gradient(90deg, #e7e5e4 25%, #d6d3d1 50%, #e7e5e4 75%); background-size: 200% 100%; } @keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Price override inline edit */ .price-override-input::-webkit-inner-spin-button, .price-override-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .price-override-input { -moz-appearance: textfield; } /* Price override adj popover */ .price-adj-popover { position: fixed; z-index: 9999; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 12px 10px; min-width: 196px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .price-adj-popover-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; } .price-adj-picks { display: flex; gap: 6px; margin-bottom: 8px; } .price-adj { flex: 1; padding: 6px 0; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 6px; font-family: 'Geist Mono', monospace; font-size: 12px; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; } .price-adj--neg { color: var(--accent-rose); } .price-adj--neg:hover { background: rgba(248,113,113,0.08); border-color: var(--accent-rose); } .price-adj--pos { color: var(--accent-green); } .price-adj--pos:hover { background: rgba(74,222,128,0.08); border-color: var(--accent-green); } .price-adj-hint { font-size: 11px; color: var(--text-muted); text-align: center; } /* ══════════════════════════════════════════════════════════════════ Card-detail control system (ahg-pxxe7): the 7-class control vocabulary from .context/card-detail-control-system.md. Amber is rationed to 3 registers system-wide — solid primary-commit fill (existing .toolbar-btn--primary), tinted active-setting (.is-amber below), and active-tab text+underline (existing .card-tab-btn-- active) — everything else here is warm neutral gray. Class names are a contract with dashboard.js (JS-agent emits them verbatim) — do not rename. Real (non-decorative) text is bumped to the app's 14px mobile-minimum floor where the prototype specimens use 12.5– 13.5px; mono uppercase decorative labels (control label, status pill, badge) keep their smaller prototype sizes per that floor's own exemption. ══════════════════════════════════════════════════ */ /* 01/02 — segmented control: view switch (neutral) + behavior setting (active carries .is-amber — amber budget register 2). */ .cdx-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--s2); border: 1px solid var(--border); border-radius: 7px; } .cdx-seg-item { display: inline-flex; align-items: center; padding: 5px 12px; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: 400 14px 'Geist', sans-serif; line-height: 1; cursor: pointer; transition: background 150ms cubic-bezier(.16,1,.3,1), border-color 150ms cubic-bezier(.16,1,.3,1), color 150ms cubic-bezier(.16,1,.3,1); } /* Larger segment size (7px 14px / 14px) for standalone use outside the panel's compact rows; the panel itself uses the default sm sizing. */ .cdx-seg-item--lg { padding: 7px 14px; } .cdx-seg-item:hover { color: var(--text-secondary); } .cdx-seg-item.is-active { background: var(--s3); color: var(--text-primary); font-weight: 600; } .cdx-seg-item.is-amber { background: var(--amber-tint); border-color: var(--amber-tint-border); color: var(--accent-amber); } .cdx-seg-item.is-amber::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 999px; background: var(--accent-amber); vertical-align: middle; } .cdx-seg-item:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; } /* Reconcile legacy chrome when a container carries BOTH the old .depth-mode-group and the new .cdx-seg vocabulary (repricing + QR segmented controls): drop the old inter-segment divider hairline and the container's overflow clip, which would otherwise clip the focus ring. */ .cdx-seg.depth-mode-group { overflow: visible; } .cdx-seg .cdx-seg-item + .cdx-seg-item { border-left: none; } /* Mono-uppercase frame label for a behavior setting (e.g. "Repricing") — decorative, so it stays under the 14px floor. */ .cdx-ctl-label { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } /* Hover tooltip for the hand-built price-history charts (chart_hover.js). Positioned by JS inside the chart container; pointer-events off so it never steals the crosshair. */ .chx-tip { position: absolute; display: none; pointer-events: none; z-index: 20; min-width: 104px; padding: 7px 9px; background: var(--s1, #1c1917); border: 1px solid var(--border); border-radius: var(--radius-md, 6px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.18)); font-family: 'Geist', sans-serif; } .chx-tip .chx-date { color: var(--text-muted); font-size: 14px; margin-bottom: 5px; } .chx-tip .chx-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .chx-tip .chx-row + .chx-row { margin-top: 3px; } .chx-tip .chx-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; } .chx-tip .chx-lbl { color: var(--text-secondary); font-size: 14px; } .chx-tip .chx-num { margin-left: auto; padding-left: 14px; font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--text-primary); } /* 03/04 — Action (ghost button) + agent action (ghost + Hoard H glyph). The glyph is the only difference from a plain action — never amber. */ .cdx-ghost-btn, .cdx-agent-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: 500 14px 'Geist', sans-serif; line-height: 1; cursor: pointer; text-decoration: none; transition: background 100ms cubic-bezier(.16,1,.3,1), border-color 100ms cubic-bezier(.16,1,.3,1), color 100ms cubic-bezier(.16,1,.3,1); } .cdx-ghost-btn:hover, .cdx-agent-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--text-muted); color: var(--text-primary); } .cdx-ghost-btn:focus-visible, .cdx-agent-btn:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; } .cdx-ghost-btn:disabled, .cdx-agent-btn:disabled { opacity: 0.6; cursor: default; } .cdx-agent-btn::before { content: ""; width: 13px; height: 13px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--hoard-mark-svg) center / contain no-repeat; mask: var(--hoard-mark-svg) center / contain no-repeat; } /* 05 — Status: non-interactive tinted pill, colored by meaning. */ .cdx-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font: 600 11px 'Geist Mono', monospace; letter-spacing: 0.07em; text-transform: uppercase; } .cdx-status-pill::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 999px; background: currentColor; } .cdx-status-pill.is-good { background: var(--green-tint); border: 1px solid var(--accent-green); color: var(--accent-green); } .cdx-status-pill.is-bad { background: var(--rose-tint); border: 1px solid var(--accent-rose); color: var(--accent-rose); } .cdx-status-pill.is-neutral { background: var(--bg-glass); border: 1px solid var(--border-subtle); color: var(--text-muted); } /* 06 — Attribute filter chip: drill-in shortcut, dotted-underline label. Never amber; read-only facts (Qty) stay plain mono text. */ .cdx-filter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; min-height: 44px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-glass); color: var(--text-secondary); font: 400 14px 'Geist', sans-serif; cursor: pointer; transition: background 100ms cubic-bezier(.16,1,.3,1), color 100ms cubic-bezier(.16,1,.3,1); } .cdx-filter-chip:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .cdx-filter-chip:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; } .cdx-filter-chip-icon { display: inline-flex; flex-shrink: 0; width: 10px; height: 10px; opacity: 0.7; } .cdx-filter-chip-label { border-bottom: 1px dotted var(--text-muted); line-height: 1.2; } /* Value row (Current / Source / Target / Upside price rows). */ .cdx-val-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--border-subtle); } .cdx-val-label { width: 64px; flex-shrink: 0; font-size: 14px; color: var(--text-muted); } .cdx-val-mid { flex: 1; min-width: 0; font-size: 14px; color: var(--text-secondary); } .cdx-val-badge { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px 7px; margin-right: 6px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-muted); white-space: nowrap; } .cdx-val-num { font-family: 'Geist Mono', monospace; font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); text-align: right; white-space: nowrap; } /* Per-row value color overrides (Source/Upside rows read quieter). */ .cdx-val-num--secondary { color: var(--text-secondary); } .cdx-val-num--muted { color: var(--text-muted); } /* Mobile (~380–560px right rail): classes above already hold at this width (inline-flex, flex-wrap-friendly, no fixed widths besides the 64px value-row label). Confirm against the full-width panel override a few hundred lines down (search "Binder detail: bottom sheet"). */ @media (max-width: 480px) { .cdx-seg-item { padding: 5px 10px; } .cdx-ghost-btn, .cdx-agent-btn, .cdx-filter-chip { padding: 8px 12px; } }