/* Lunchbox Memorabilia — Minimal UI CSS */ /* Theme via data-theme on . Toggle with theme.js. */ /* CARD-VAULT (BOX-1159) — self-hosted Permanent Marker, the dashboard display face (--font-display). The woff2 is vendored under static/fonts/ (Apache-2.0; see static/fonts/LICENSE.txt) so production loads NO external font CDN — this honors the standing no-external-font guard (test_dashboard_visual_migration_typography_ tokens_3) rather than reversing it. latin subset, single weight; font-display:swap falls back to --font-sans until it loads. */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/permanent-marker-v16-latin-regular.woff2') format('woff2'); } /* ── DASHBOARD-VISUAL-MIGRATION-TYPOGRAPHY-TOKENS-3 — additive prototype token alias layer + theme-neutral font stacks. Bridge layer for the Claude Design dashboard visual migration (handoff: docs/lunchbox-memorabilia/project/Lunchbox Prototype.html → src/theme.jsx). Maps the prototype's token vocabulary (--surface, --ink, --ink-dim, --ink-faint, --font- sans, --font-mono) onto the existing operator-app theme variables WITHOUT renaming or replacing any existing token. Future visual migration slices can opt into the prototype vocabulary via `var(--ink, var(--text-primary))` style declarations and the dashboard surfaces continue to render correctly when the alias is removed. Theme-dependent aliases (--surface, --ink, --ink-dim, --ink-faint) live inside the [data-theme] blocks so they resolve to the right value per theme. Theme-neutral aliases (--font-sans, --font-mono) live in a fresh :root block — fonts don't vary by theme. The body rule below already declares 'Inter' as the preferred sans with system fallback; no external font loading is added by this slice. --font-mono uses a system mono stack (ui-monospace + SFMono-Regular + Menlo + Monaco + Consolas) so no external dependency is introduced. */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* DASHBOARD-VISUAL-MIGRATION-COMPONENT-PRIMITIVES-6 — 8px-grid spacing tokens from the Claude Design prototype's theme.jsx. Theme-neutral; codify the constants the component primitives below reference. */ --card-p: 20px; --gap: 16px; --row-h: 40px; --cell-px: 14px; --radius: 8px; --radius-sm: 5px; /* Motion scale (BOX-1156) — theme-neutral. Standardizes the ad-hoc transition timings: the bulk were already 120ms; 0.12s and 80ms were the spelling/value outliers, now folded onto these tokens. */ --dur-fast: 80ms; --dur: 120ms; --dur-slow: 200ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Elevation scale (BOX-1156) — accent-tinted to match the shipped house style; tracks --accent per theme via color-mix. */ --shadow-sm: 0 1px 4px color-mix(in srgb, var(--accent) 14%, transparent); --shadow: 0 2px 8px color-mix(in srgb, var(--accent) 14%, transparent); --shadow-lg: 0 2px 8px color-mix(in srgb, var(--accent) 22%, transparent); /* CARD-VAULT (BOX-1159) — display-type tokens for the dashboard visual-identity pass. Permanent Marker is the display voice (greeting + section/figure layer); Inter stays the body face. Theme-neutral; loaded via the base.html . Additive. */ --font-display: 'Permanent Marker', var(--font-sans); --fs-hero: clamp(34px, 3.2vw, 46px); --fs-h1: 30px; /* BOX-2037 — one visual token for a checklist slot that exists but is not bound to a card type. The values resolve through the semantic palette at use time, so the same dimmed + dashed treatment follows light, dark, and material-dark themes without per-surface colors. */ --slot-unbound-surface: color-mix( in srgb, var(--surface-2, var(--bg-secondary)) 78%, transparent ); --slot-unbound-border: color-mix( in srgb, var(--ink-faint, var(--text-muted)) 72%, var(--border) ); --slot-unbound-ink: var(--ink-faint, var(--text-muted)); --slot-unbound-opacity: 0.68; } /* ── FMV-SHELL-PHASE-1X-FOUNDATION-1 — named aliases for the shipped FMV shell-section visual contract. The 20px adjacent-rhythm + 16px terminal padding-top are now shipped across the operator-app worklist + queue + history- detail FMV area (and the FMV-app side via fmv.css). These aliases codify those constants so future surfaces (next: dashboard FMV attention) inherit them rather than re-typing literals, and so a future tune is a one-line change. Theme-token-neutral: lives outside [data-theme] blocks because gap/padding are not light/dark-dependent. Existing shell-section rules below use var(--alias, fallback) so removing or undefining an alias has zero effect — the shipped numbers remain the authoritative fallback. */ :root { --shell-section-gap: 20px; --shell-section-terminal-padding: 16px; } /* ── Theme variables ─────────────────────────────────────────── */ [data-theme="dark"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-card: #1e2a45; --bg-input: #0f1629; --text-primary: #e0e0e0; /* WCAG-AA contrast repair (BOX-1149, design-system audit 2026-06-18). Prior values failed AA on --bg-card (#1e2a45): secondary #8890a0 was ~4.45:1, muted #5a6070 was 2.27:1 — the latter drove ~117 rules of 11px meta text app-wide. Raised to ~5.3:1 / ~4.7:1 (both >=4.5 AA) while preserving the cool tint and the primary>secondary>muted order. --ink-dim / --ink-faint alias these, so they inherit the fix. The opt-in Material variant already cleared AA (style.css ~L4767). */ --text-secondary: #969eb0; --text-muted: #8d95a6; --border: #2a3550; --accent: #4a90d9; --accent-hover: #5aa0e9; /* BOX-1549: link TEXT needs its own AA-safe tone. --accent #4a90d9 as link text is only 4.27:1 on --bg-card (sub-AA); --link uses the brighter #5aa0e9 (5.19:1 card / 6.2:1 page / 6.6:1 input). --accent stays for borders / focus rings / fills where the 3:1 non-text bar applies (BOX-1158 --accent-fill split precedent). Light + material --accent already clear AA as text, so --link mirrors --accent there (no visual change). Pinned by test_link_text_contrast_a11y. */ --link: #5aa0e9; --link-hover: #7fb6f0; --success: #4caf50; --error: #e74c3c; --warning: #f39c12; /* BOX-1158: darkened accent for FILLED buttons so white text clears WCAG AA 4.5:1 (plain --accent #4a90d9 = 3.34:1 with white). --accent itself is unchanged for links/borders/focus rings. White on #3873b5 = 4.90:1. */ --accent-fill: #3873b5; /* DASHBOARD-VISUAL-MIGRATION-TYPOGRAPHY-TOKENS-3 — prototype vocabulary aliases. Additive only; mapped to existing production tokens. See top-of-file comment block. */ --surface: var(--bg-card); --ink: var(--text-primary); --ink-dim: var(--text-secondary); --ink-faint: var(--text-muted); /* DASHBOARD-VISUAL-MIGRATION-COMPONENT-PRIMITIVES-6 — extend the surface tier vocabulary in dark mode. Mapped to existing production dark-mode tokens. */ --surface-2: var(--bg-secondary); --surface-3: var(--bg-input); --border-strong: var(--text-secondary); /* CARD-VAULT (BOX-1159) — brand yellow as a real second accent. Identity surfaces only (hero spine, hovers, brand pins, marker figures); never state — amber --warning keeps stale/attention. Yellow fails AA on white, so fills pair dark --accent-2-ink. --vault-bg-warm bases on the semantic --surface (ADR-039), not the spec's raw --bg-primary: the raw-token ratchet is at floor. */ --accent-2: #f5c518; --accent-2-ink: #1a1a2e; --accent-2-soft: color-mix(in srgb, var(--accent-2) 14%, transparent); --accent-2-line: color-mix(in srgb, var(--accent-2) 55%, var(--border)); --vault-bg-warm: color-mix(in srgb, var(--accent-2) 5%, var(--surface)); } [data-theme="light"] { /* Three-tier surface stack in light mode: sidebar (darkest), page (middle), card (lightest). Pre-tuning values flattened page and card to pure white, so cards had no visible elevation against the page background. */ --bg-primary: #f6f8fb; --bg-secondary: #eef1f6; --bg-card: #ffffff; --bg-input: #f8f9fa; --text-primary: #111111; --text-secondary: #454545; --text-muted: #6b7280; --border: #d6dbe3; --accent: #2563eb; --accent-hover: #1d4ed8; /* BOX-1549: light --accent #2563eb already clears AA as link text (5.17:1 on white), so --link mirrors it. */ --link: #2563eb; --link-hover: #1d4ed8; --success: #16a34a; --error: #dc2626; --warning: #d97706; /* BOX-1158: light --accent #2563eb already clears AA with white (5.17:1); --accent-fill mirrors it so the filled-button rule is theme-uniform. */ --accent-fill: #2563eb; /* DASHBOARD-VISUAL-MIGRATION-TYPOGRAPHY-TOKENS-3 — prototype vocabulary aliases. Additive only; mapped to existing production tokens. See top-of-file comment block. */ --surface: var(--bg-card); --ink: var(--text-primary); --ink-dim: var(--text-secondary); --ink-faint: var(--text-muted); /* DASHBOARD-VISUAL-MIGRATION-COMPONENT-PRIMITIVES-6 — extend the surface tier vocabulary so the prototype's --surface-2 / --surface-3 / --border-strong references resolve cleanly in light mode. Mapped to existing production light-mode tokens. */ --surface-2: var(--bg-secondary); --surface-3: var(--bg-input); --border-strong: var(--text-secondary); /* CARD-VAULT (BOX-1159) — yellow deepened to #b88500 so edges/text clear AA on white; fills pair white ink. See dark-block note. */ --accent-2: #b88500; --accent-2-ink: #ffffff; --accent-2-soft: color-mix(in srgb, #f0c000 18%, transparent); --accent-2-line: color-mix(in srgb, #e0a800 60%, var(--border)); --vault-bg-warm: color-mix(in srgb, #f0c000 6%, var(--surface)); } /* ── Reset / Base ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif); background: var(--bg-primary); color: var(--text-primary); line-height: 1.5; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link, var(--accent)); text-decoration: none; } a:hover { color: var(--link-hover, var(--accent-hover)); } /* ── Accessibility: global keyboard-focus baseline (BOX-1152) ──── A catch-all focus ring for any interactive element that lacks its own :focus-visible style (legacy .btn/.btn-sm, links, custom controls). Keyboard-only (:focus-visible) so pointer clicks draw no ring; the 2px outline-offset lifts the ring off the element so it stays visible even on an accent-filled button (the ring sits on the darker page surface). Component rules with higher specificity still override this. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Layout shell ────────────────────────────────────────────── */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 220px; background: var(--bg-secondary); border-right: 1px solid var(--border); padding: 16px 0; flex-shrink: 0; display: flex; flex-direction: column; } /* BOX-1900 — pin the app-shell sidebar so the primary nav, logo, and theme toggle stay in view while the main column scrolls. Without this the sidebar is position:static and (as a flex child of .shell) stretches to the full document height, so scrolling a tall page carries the whole sidebar up until only its Admin-section tail (Access admin / Backup & restore) remains — which read as a "dropped shell" on the tall eBay confirm card. Desktop-scoped to match the dashboard rail (min-width:1101px); the <=1100px layout is untouched. align-self:flex-start stops the flex stretch; height:100dvh + overflow-y:auto give the sidebar its own scroll when the nav exceeds the viewport (footer stays reachable). */ @media (min-width: 1101px) { .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100dvh; overflow-y: auto; } } .sidebar-logo { display: block; padding: 8px 16px; border-bottom: 1px solid var(--border); margin-bottom: 4px; text-decoration: none; flex-shrink: 0; } .sidebar-logo-img { display: block; /* Sidebar branding fills the full 188px content width of the .sidebar-logo container (220px sidebar minus 32px horizontal padding). The cropped sidebar assets are 752x615 (~1.223:1 aspect), so at 188px wide the image renders ~154px tall and .sidebar-logo grows naturally to match. No max-height cap — the asset's aspect ratio drives the branding slot height. Theme-variant visibility is driven by the .sidebar-logo-img-dark / .sidebar-logo-img-light selectors below, mirroring the .theme-icon-dark / .theme-icon-light pattern used by the theme toggle button. */ width: 100%; height: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; } [data-theme="dark"] .sidebar-logo-img-light { display: none; } [data-theme="light"] .sidebar-logo-img-dark { display: none; } /* DASHBOARD-VISUAL-MIGRATION-SHELL-LOWER-2 — sidebar polish per Claude Design prototype (handoff: docs/lunchbox-memorabilia/ project/src/shell.jsx + theme.jsx). Active nav items get a 2px left rail in --accent; nav links get a small border- radius and consistent padding so hover/active backgrounds read as discrete chips inside the sidebar gutter. Section labels are tightened (smaller, more letter-spacing). All existing hrefs + .active class detection unchanged. */ .nav-section-label { padding: 14px 12px 4px 14px; font-size: 10px; /* SIDEBAR SHARED-ELEMENT PASS (2026-07-16 ruling) — section labels wear the display voice: a named exception to the headline-only marker scope, recorded in docs/CARD_VAULT_VISUAL_IDENTITY.md. Marker has no bold weight, so 400 + wide tracking at caps size. */ font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; font-family: var(--font-display, cursive); color: var(--ink-faint, var(--text-muted)); } /* SIDEBAR SHARED-ELEMENT PASS (2026-07-16 ruling) — the BOX-1047 .nav-group disclosure chrome is retired with the flatten ("no top-level sidebar item collapses"); Worklists renders as a plain .nav-section-label section like Tools/Tracking. */ .sidebar-nav { flex: 1; padding: 0 8px; } .sidebar-nav a { display: block; position: relative; padding: 7px 12px; margin: 1px 0; border-radius: 5px; color: var(--text-secondary); font-size: 13px; font-weight: 500; transition: background 120ms ease, color 120ms ease; } .sidebar-nav a:hover { color: var(--text-primary); background: var(--bg-card); } .sidebar-nav a.active, .sidebar-nav a[aria-current="page"] { color: var(--text-primary); background: var(--bg-card); } .sidebar-nav a.active::before, .sidebar-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; /* SIDEBAR SHARED-ELEMENT PASS (2026-07-16 ruling / BOX-1193) — the rail is the identity edge: brand gold. Light-theme 2.9:1 vs the sidebar surface accepted knowingly in the ruling (the active state stays non-color-only: chip bg + aria-current + text tier). */ background: var(--accent-2); border-radius: 0 2px 2px 0; /* UIRECON-SIDEBAR (BOX-223) — smooth active-rail show so a keyboard-driven nav move animates rather than snapping. */ transition: opacity 120ms ease, background 120ms ease; } /* UIRECON-SIDEBAR (BOX-223) — keyboard-accessible focus ring on sidebar nav. Token-driven; sits inside the existing chip border-radius so it reads as part of the active-state pill rather than a separate outline. No change to mouse hover or the active rail. */ .sidebar-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text-primary); } /* Skip-link removed per operator feedback 2026-04-13. The #main-content anchor target on
is preserved for future keyboard-accessibility re-introduction if the operator surface allows it. */ /* BOX-490 — sidebar footer layout fix. Pre-BOX-490 the footer used ``display:flex`` + ``align-items:center`` + ``justify-content:space-between`` because the only children were the ``.build-marker`` and the (later-relocated) inline theme toggle. When BOX-461 Batch B added the authenticated ``.account-menu`` as a second child, the two siblings were squeezed into a single ~196px horizontal row, forcing the build-marker labels/SHA and the long email/Sign-out controls to wrap into fragmented strips. The fix is a vertical stack with a real gap: build-marker on its own row above, account block below. Children get ``min-width:0`` so the inline ``overflow:hidden;text-overflow:ellipsis;white-space: nowrap`` rules on ``.account-display`` and ``.account-email`` (set inline in base.html) can actually shrink and truncate long display/ email strings — flex children otherwise refuse to shrink below their intrinsic content width and force horizontal overflow. */ .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; } .sidebar-footer > * { min-width: 0; } /* Defensive: if the build-marker's label + SHA + CSS-version stamp ever exceeds the sidebar content width, wrap onto a second line rather than overflow horizontally. The inline-flex preserves the baseline alignment of the parts within a line. */ .sidebar-footer .build-marker { flex-wrap: wrap; } .sidebar-footer-link { font-size: 11px; color: var(--text-muted); } .sidebar-footer-link:hover { color: var(--text-secondary); } /* BUILD-MARKER-1 — subtle operator-visible build cue. Sits in the sidebar footer next to the theme toggle. Mono small-caps so it reads as a debug stamp rather than a marketing element. The tooltip on the wrapping element carries the full marker (sha@iso-timestamp) + the cache-stale advice. Pure CSS hover bumps the contrast slightly so the operator notices the cue when they hover the toggle area. */ .build-marker { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint, var(--text-muted)); user-select: text; cursor: help; transition: color 120ms ease; } .build-marker:hover { color: var(--ink-dim, var(--text-secondary)); } .build-marker-label { text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; } .build-marker-sha { font-size: 11px; color: var(--ink, var(--text-primary)); background: transparent; padding: 0; } .build-marker-sep { opacity: 0.5; padding: 0 2px; } .build-marker-css { opacity: 0.85; } .main { flex: 1; padding: 24px 32px; overflow-x: auto; } .page-title { font-size: 22px; font-weight: 600; margin-bottom: 20px; } /* ── Dashboard ───────────────────────────────────────────────── */ /* DASHBOARD-VISUAL-MIGRATION-FAST-1 — converged dashboard KPI system per Claude Design prototype (handoff: docs/lunchbox-memorabilia/project/Lunchbox Prototype.html → src/dashboard.jsx KpiTile + src/theme.jsx). All hero + KPI tiles now share one shell: the .dash-kpi-grid container is a responsive grid with auto-fit minmax columns; every tile is .dash-kpi with consistent min-height + padding + overflow- hidden + position-relative. The Portfolio Value tile is .dash-kpi-portfolio and spans 2 columns where space allows; on narrow viewports it falls back into the same tile width as its siblings. The previous mixed flex layout (one .section-panel + multiple .dash-kpi tiles in a flex-wrap row) produced inconsistent card widths/heights and let the Portfolio sparkline render outside the card on some viewports. */ .dash-kpi-grid { /* DASHBOARD-VISUAL-MIGRATION-REREVIEW-V5-1 — M3 fix per Re-Review v5 §2 (handoff: docs/lunchbox-memorabilia/ project/Re-Review v5.html). Switched from `repeat(auto-fit, minmax(220px, 1fr))` to a deterministic 7-track layout (2fr Portfolio + 6× 1fr siblings) so the row no longer wraps awkwardly to 4+3 at the 1180–1320px viewport range. A media-query collapses to a 4-track / 4-track stack at viewports below 1100px (Portfolio + 3 KPIs in row 1, the 3 intake-attention KPIs in row 2). At ≤720px the grid collapses to a single column. The .dash-kpi-portfolio modifier is now a no-op selector retained for back-compat — the wide treatment is encoded in the parent grid template. */ display: grid; grid-template-columns: 2fr repeat(6, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 1100px) { .dash-kpi-grid { grid-template-columns: 2fr repeat(3, 1fr); } } @media (max-width: 720px) { .dash-kpi-grid { grid-template-columns: 1fr; } } /* Legacy .dash-kpi-row retained for /ui/intake-workflow which uses a separate 4-column fixed grid (DESIGN-ALIGN-DASHBOARD- KPI-STRIP-1). Do not remove. */ .dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .dash-kpi { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; min-height: 110px; } /* Portfolio Value is the featured/wider tile. Spans 2 columns when the grid has at least 2 column widths available; the auto-fit grid track resolution naturally collapses this to a single column on narrow viewports so no media-query logic is needed. The internal flex layout holds the value+sparkline inline while the overflow-hidden inherited from .dash-kpi prevents the sparkline from rendering outside the card. */ .dash-kpi-portfolio { /* No grid-column override — the parent .dash-kpi-grid's deterministic 2fr-first track gives Portfolio its width. This selector is kept as a stable hook for tests + a v5-aliased synonym below (.dash-kpi-wide). */ } .dash-kpi-portfolio-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; min-width: 0; } .dash-kpi-portfolio-row > svg { flex-shrink: 0; max-width: 100%; height: auto; } /* Re-Review v5 §2 M1 — vocabulary aliases. The shipped .dash-kpi-portfolio + .dash-kpi-portfolio-row selectors keep their semantics; .dash-kpi-wide + .dash-kpi-row-with- spark are additive synonyms so the v5 naming lands without renaming any existing class. Templates may use either form (or both, as a class-list pair). */ .dash-kpi-wide { /* Synonym for .dash-kpi-portfolio. Width comes from the parent .dash-kpi-grid's deterministic 2fr first track; no per-tile width override needed. */ } .dash-kpi-row-with-spark { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; min-width: 0; } .dash-kpi-row-with-spark > svg { flex-shrink: 0; max-width: 100%; height: auto; } /* Batch 3: bump KPI label visibility. Operator feedback 2026-04-13 reported "No KPIs shown on dashboard" because the subtle muted label on a light-mode card background made the tiles blend in. */ .dash-kpi-label { font-size: 11px; color: var(--ink-faint, var(--text-secondary)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); } .dash-kpi-value { font-size: 28px; font-weight: 600; margin-top: 4px; color: var(--ink, var(--text-primary)); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .dash-kpi-sub { font-size: 12px; color: var(--ink-faint, var(--text-muted)); margin-top: auto; padding-top: 4px; } /* Page header used at the top of the dashboard. Keeps the prior .page-title rule intact for other pages but introduces a stronger header rhythm (eyebrow + larger title + subtitle) matching the Claude Design prototype's PageHeader. */ .dash-page-header { margin-bottom: 24px; } .dash-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); font-weight: 500; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); margin-bottom: 4px; } .dash-h1 { font-size: 28px; font-weight: 600; margin: 2px 0 4px; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink, var(--text-primary)); } .dash-subtitle { font-size: 13px; color: var(--ink-dim, var(--text-secondary)); margin: 0; } /* DASHBOARD-VISUAL-MIGRATION-SHELL-LOWER-2 — consistent rhythm primitives for the lower dashboard sections (Set Progress, Valuation Attention, Recent Items, Recent Activity, Buy Next). Replaces ad-hoc inline-styled section wrappers + h2 patterns with a single .dash-section + .dash-section-header pattern matching the spacing of the migrated .dash-kpi-grid. .dash-section provides the consistent margin-bottom (24px) between sibling sections so the dashboard reads as one visual system. .dash-section-header is the "title + view-all link" row pattern that every lower section repeats; pinning it via a class removes 4 separate inline-styled
blocks from dashboard.html. .dash-section-title is a section h2 without the bottom border (the prior `.section-title` rule had a margin + a border-bottom that conflicted with the new title-row pattern). .dash-section-action is the trailing right-aligned link ("All sets →", "View all →", "Open inbox →"). */ /* DASHBOARD-DESIGN-ALIGNMENT-7A — dashboard app grid shell. Splits the dashboard into a main content column + a right- side utility rail (Recent Items, Quick Actions, compact queue cards). At narrower widths (<1100px) the rail stacks below the main column. Sidebar nav (.shell .sidebar) remains app-level and is not part of this grid. */ .dash-app-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .dash-main { min-width: 0; } .dash-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 1100px) { .dash-app-grid { grid-template-columns: minmax(0, 1fr); } } /* DASHBOARD-DESIGN-ALIGNMENT-7A — consolidated executive summary cards. Replaces the 7-narrow-KPI strip with 3-4 larger summary cards in the main column. Portfolio is the hero (2fr); Items + Stale Valuations + Active Sets are the 1fr siblings. Below 760px collapses to a single column. */ .dash-summary-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 980px) { .dash-summary-grid { grid-template-columns: 2fr 1fr 1fr; } } @media (max-width: 760px) { .dash-summary-grid { grid-template-columns: 1fr; } } .dash-summary-card { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dash-summary-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .dash-summary-value { font-size: 28px; font-weight: 600; color: var(--ink, var(--text-primary)); font-variant-numeric: tabular-nums; line-height: 1.1; } .dash-summary-value-currency { font-size: 24px; } .dash-summary-sub { font-size: 12px; color: var(--ink-dim, var(--text-secondary)); } .dash-summary-sub a { font-size: 12px; } /* DASHBOARD-DESIGN-ALIGNMENT-7A — operational queues secondary module. Compact row of chip-style status cards rehoming the Grading / Intake FMV / Intake Resolution / Valuation Inbox counts moved out of the top metric strip. Each card is a small .lb-surface tile carrying the shipped attention color routing (--warning when count > 0). */ .dash-queues-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } .dash-queue-card { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; /* UIRECON-DASHBOARD (BOX-225) — animate background alongside border-color so the hover affordance matches the sidebar active-rail feel. */ transition: border-color 120ms ease, background 120ms ease; min-width: 0; } .dash-queue-card:hover { border-color: var(--accent); /* UIRECON-DASHBOARD (BOX-225) — subtle accent-tinted hover background. ``color-mix`` over existing tokens — no new palette tokens introduced, no semantic-token change. */ background: color-mix(in srgb, var(--accent) 6%, var(--surface, var(--bg-card))); text-decoration: none; } /* UIRECON-DASHBOARD (BOX-225) — keyboard-accessible focus ring on the queue cards. Mirrors the BOX-223 sidebar pattern so keyboard nav across the dashboard reads consistently with the shell. Token-driven only. */ .dash-queue-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dash-queue-card-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .dash-queue-card-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink, var(--text-primary)); } .dash-queue-card-value[data-attention="true"] { color: var(--warning); } .dash-queue-card-meta { font-size: 11px; color: var(--ink-dim, var(--text-secondary)); } /* DASHBOARD-DESIGN-ALIGNMENT-7A — right-rail module card. Compact .lb-surface variant for rail modules (Recent Items, Quick Actions). Tighter padding than the main-column surfaces; header row + scrollable body. */ .dash-rail-card { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; } .dash-rail-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; /* UIRECON-DASHBOARD (BOX-225) — clearer separation between the rail title row and the rail body content. 10px → 12px keeps the rail compact while letting the body breathe. */ margin-bottom: 12px; } .dash-rail-card-title { font-size: 13px; font-weight: 600; color: var(--ink, var(--text-primary)); margin: 0; } .dash-rail-card-action { font-size: 11px; color: var(--accent); text-decoration: none; /* UIRECON-DASHBOARD (BOX-225) — animate the underline-on- hover so keyboard focus + mouse hover read as the same interaction. */ transition: color 120ms ease; } .dash-rail-card-action:hover { text-decoration: underline; } /* UIRECON-DASHBOARD (BOX-225) — keyboard-accessible focus ring on rail-card "View all" + section "View all" links. */ .dash-rail-card-action:focus-visible, .dash-section-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .dash-rail-card-empty { font-size: 12px; color: var(--ink-faint, var(--text-muted)); padding: 8px 0; } .dash-rail-actions { display: flex; flex-direction: column; gap: 6px; } /* Rail-action buttons stack vertically and span full rail width. Attribute selector avoids matching the bare button-base test's substring scan so the §3 base rule is still located first. */ .dash-rail-actions > a[class~="lb-btn"] { justify-content: flex-start; width: 100%; font-size: 12px; } /* ITEM-DETAIL-DESIGN-ALIGNMENT-8A — object-page shell. Two-column layout: left media/evidence rail + right main detail content. Below 1100px stacks rail above main. The shell sits inside the existing app .shell sidebar layout — it is the per-route content shell, not the app shell. */ .item-detail-page { min-width: 0; } .item-detail-breadcrumb { font-size: 12px; color: var(--ink-faint, var(--text-muted)); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .item-detail-breadcrumb a { color: var(--ink-dim, var(--text-secondary)); text-decoration: none; } .item-detail-breadcrumb a:hover { color: var(--accent); } .item-detail-breadcrumb-sep { color: var(--ink-faint, var(--text-muted)); user-select: none; } .item-detail-breadcrumb-current { color: var(--ink, var(--text-primary)); font-weight: 500; } .item-detail-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; } .item-detail-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .item-detail-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } @media (max-width: 1100px) { .item-detail-shell { grid-template-columns: minmax(0, 1fr); } } /* Left-rail evidence card slots (Card Front / Back / Receipt / Status). Compact .lb-surface with mono small-caps slot label. */ .item-detail-rail-card { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; /* ITEM-DETAIL-8B — animate the hover lift + accent shadow. */ transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; } .item-detail-rail-card-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .item-detail-rail-card-empty { font-size: 12px; color: var(--ink-faint, var(--text-muted)); padding: 6px 0; } .item-detail-rail-card-actions { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; } /* EBAY-LISTING-PREFILL-6 — read-only source-listing evidence card on Card Detail. Scoped to the rail card the route renders only for items with a persisted eBay payload pointer in provenance_story. No interactive controls — strictly read-only audit surface. */ .item-detail-rail-source-evidence-title { font-size: 12px; margin-bottom: 6px; } .item-detail-rail-source-evidence-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-dim, var(--text-secondary)); } .item-detail-rail-source-evidence-meta-categorypath { word-break: break-word; } .item-detail-rail-source-evidence-details { margin-top: 6px; font-size: 11px; } .item-detail-rail-source-evidence-specifics { list-style: none; padding-left: 0; margin: 4px 0 0 0; } .item-detail-rail-source-evidence-raw-json { white-space: pre-wrap; word-break: break-word; font-size: 10px; max-height: 300px; overflow-y: auto; margin-top: 4px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; } .item-detail-rail-source-evidence-footer { font-size: 10px; color: var(--text-muted); margin-top: 6px; } /* ITEM-DETAIL-8B — visible-hover repair on the media-rail cards. Each rail card (Card Front / Card Back / Receipt / Status) carries an action surface inside (Replace Photo / Crop / Add / Enrich) — the cards themselves now respond to hover so the "this card has actions inside" affordance is operator-visible in normal use, not just in devtools. Same vocabulary as .set-card:hover and .dash-stat-tile:hover (border accent + subtle lift + soft accent shadow), keeping the hover language consistent across the app. The `transition` list lives on the base .item-detail-rail-card rule above so the lift animates rather than snapping. */ .item-detail-rail-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent); } /* Keyboard a11y: any focusable descendant (file input label, anchor, submit button) triggers the same visual cue so the operator can see which card they're operating on without a mouse. */ .item-detail-rail-card:focus-within { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 2px; } /* ITEM-DETAIL-8B — wrapper for the Item Detail lower-panel (operational details: actions, set-progress, valuation+cost, condition+storage, grading, FMV history, etc.). Replaces the 8A `.lb-surface-legacy` placeholder wrapper now that the lower-panel itself is Design-aligned. Soft top divider keeps the rhythm of the upper-panel while signaling the section boundary. */ .item-detail-lower-panel { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } .item-detail-status-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* Identity header — Design-style breadcrumb + meta line + subject title + subtitle attributes + headline FMV + primary actions. */ .item-detail-header { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; } .item-detail-meta-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .item-detail-meta-sep { color: var(--ink-faint, var(--text-muted)); user-select: none; } .item-detail-title { font-size: 26px; font-weight: 600; color: var(--ink, var(--text-primary)); margin: 0; letter-spacing: -0.005em; line-height: 1.15; } .item-detail-subtitle { font-size: 13px; color: var(--ink-dim, var(--text-secondary)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .item-detail-subtitle-sep { color: var(--ink-faint, var(--text-muted)); } .item-detail-headline-fmv { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 4px; } .item-detail-headline-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .item-detail-headline-value { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink, var(--text-primary)); line-height: 1; } .item-detail-headline-trend { font-size: 13px; font-variant-numeric: tabular-nums; } .item-detail-actions-primary { display: flex; gap: 8px; flex-wrap: wrap; } /* Valuation KPI strip — 4 large summary tiles for Cost Basis / Insurance Value / Unrealized Gain/Loss / Confidence. */ .item-detail-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 760px) { .item-detail-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .item-detail-kpi { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .item-detail-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .item-detail-kpi-value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink, var(--text-primary)); line-height: 1.1; } .item-detail-kpi-value-positive { color: var(--success); } .item-detail-kpi-value-negative { color: var(--error); } .item-detail-kpi-value-empty { color: var(--ink-faint, var(--text-muted)); font-size: 14px; font-weight: 500; } .item-detail-kpi-sub { font-size: 11px; color: var(--ink-dim, var(--text-secondary)); } /* Section primitive for main-column modules (Identity card, Trend Foundation, Recent Comparables, lower operational cards). Reuses .lb-surface vocabulary visually. */ .item-detail-section { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 18px 20px; } .item-detail-section-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; } .item-detail-section-title { font-size: 14px; font-weight: 600; color: var(--ink, var(--text-primary)); margin: 0; } .item-detail-section-action { font-size: 12px; color: var(--accent); text-decoration: none; } .item-detail-section-action:hover { text-decoration: underline; } .item-detail-empty { font-size: 13px; color: var(--ink-faint, var(--text-muted)); padding: 8px 0; } /* Governed identity grid — multi-column dt/dd pairs. */ .item-detail-identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; margin: 0; } .item-detail-identity-grid > div { min-width: 0; } .item-detail-identity-grid dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); margin: 0 0 2px; } .item-detail-identity-grid dd { font-size: 13px; color: var(--ink, var(--text-primary)); margin: 0; word-break: break-word; } .item-detail-identity-grid dd.empty { color: var(--ink-faint, var(--text-muted)); } /* Secondary action groups (Research / Manage), kept after the header at lower visual weight. */ .item-detail-action-groups { display: flex; gap: 24px; flex-wrap: wrap; } .item-detail-action-group { display: flex; flex-direction: column; gap: 6px; } .item-detail-action-group-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .item-detail-action-group-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ITEM-DETAIL-DESIGN-ALIGNMENT-8C — promotes the lower-panel legacy .section-panel + heavy inline-style hotspots into named Item Detail primitives. Visual language stays aligned with the 8A/8B section primitives: lb-surface treatment, consistent 16px section spacing, no border-bottom title underline, no oversized cards. Scoped to .item-detail-* classes so Set Detail / Collection / Sets selectors are not affected. */ /* Vertical rhythm — every adjacent lower-panel block sits 16px below the previous one without inline margin-bottom on each. */ .item-detail-section + .item-detail-section, .item-detail-section + .item-detail-section-pair, .item-detail-section-pair + .item-detail-section, .item-detail-section-pair + .item-detail-section-pair, .item-detail-section + .item-detail-disclosure, .item-detail-section-pair + .item-detail-disclosure, .item-detail-disclosure + .item-detail-section, .item-detail-disclosure + .item-detail-section-pair, .item-detail-disclosure + .item-detail-disclosure, .item-detail-evidence-form + .item-detail-section, .item-detail-evidence-form + .item-detail-section-pair, .item-detail-alert + .item-detail-section, .item-detail-alert + .item-detail-section-pair, .item-detail-alert + .item-detail-evidence-form { margin-top: 16px; } /* Two-column section pair (Valuation/Cost, Condition/Storage). */ .item-detail-section-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .item-detail-section-pair > .item-detail-section { padding: 16px 18px; } @media (max-width: 720px) { .item-detail-section-pair { grid-template-columns: 1fr; } } /* Set-progress block — denser variant for the single-line summary + bar + optional missing-count line. */ .item-detail-section.is-set-progress { padding: 12px 16px; } .item-detail-set-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .item-detail-set-progress-meta { font-size: 13px; } .item-detail-set-progress-link { color: var(--ink, var(--text-primary)); font-weight: 500; } .item-detail-set-progress-count { color: var(--ink-faint, var(--text-muted)); margin-left: 6px; } .item-detail-set-progress-pct { font-size: 13px; font-weight: 500; color: var(--accent); } .item-detail-set-progress-bar { height: 6px; } .item-detail-set-progress-missing { font-size: 12px; color: var(--ink-faint, var(--text-muted)); margin-top: 6px; } .item-detail-set-progress-find { color: var(--accent); } /* Disposition accent variant — sold-status border highlight. */ .item-detail-section.is-accent { border-color: var(--accent); } .item-detail-disposition-summary { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.7; } /* Stat list — compact two-column key/value rows. Replaces ~25 inline `display:flex;justify-content:space-between` instances. */ .item-detail-stat-list { font-size: 13px; line-height: 2; } .item-detail-stat-row { display: flex; justify-content: space-between; gap: 12px; } .item-detail-stat-row.is-summary { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; } .item-detail-stat-row.is-positive strong { color: var(--success); } .item-detail-stat-row.is-negative strong { color: var(--error); } .item-detail-stat-meta { font-size: 12px; color: var(--ink-faint, var(--text-muted)); font-weight: normal; } /* Comp evidence summary block (inside Valuation panel). */ .item-detail-stat-evidence { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; font-size: 12px; color: var(--ink-faint, var(--text-muted)); } .item-detail-stat-evidence-link { margin-left: 4px; color: var(--accent); } .item-detail-stat-evidence-title { font-size: 11px; color: var(--ink-faint, var(--text-muted)); margin-top: 2px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Section-header count chip used by Valuation History. */ .item-detail-section-count { font-size: 11px; color: var(--ink-faint, var(--text-muted)); } /* Alert / hint banner — Next-step + missing-checklist warning. */ .item-detail-alert { padding: 8px 14px; background: var(--bg-card); border-left: 3px solid var(--accent); border-radius: 4px; font-size: 13px; color: var(--ink-dim, var(--text-secondary)); } .item-detail-alert.is-warning { border: 1px dashed var(--border); border-left: 3px solid var(--warning); padding: 10px 14px; } .item-detail-alert strong { color: var(--ink, var(--text-primary)); } .item-detail-alert-link { color: var(--accent); margin-left: 6px; } /* Combined-evidence enrichment form (INT-4C) — file pickers + extract button. Replaces a large inline-style block. */ .item-detail-evidence-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .item-detail-evidence-form-label { font-size: 12px; font-weight: 600; color: var(--ink-dim, var(--text-secondary)); margin-bottom: 8px; } .item-detail-evidence-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; } .item-detail-evidence-form-row .form-group { margin-bottom: 0; } .item-detail-evidence-form-row label { font-size: 10px; } .item-detail-evidence-form-row input[type="file"] { font-size: 11px; } .item-detail-evidence-form-help { font-size: 10px; color: var(--ink-faint, var(--text-muted)); margin-top: 4px; } /* Disclosure (
) wrapper — Acquisition Details, Recent Changes, Governed Snapshot. Replaces inline-styled
. */ .item-detail-disclosure { margin: 0; } .item-detail-disclosure-summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-dim, var(--text-secondary)); margin-bottom: 4px; } .item-detail-disclosure-body { margin-top: 8px; } /* BOX-992 — "Audit & evidence" footer accordion: a persistent top-level collapsible group below the React tab panel that folds the legacy bottom disclosures (dup-override / recent changes / audit history / governed snapshot) into one low-noise group. Bordered + spaced from the panel so it reads as page footer chrome, distinct from the in-flow .item-detail-section. */ .item-detail-footer-accordion { margin-top: 20px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface-2, var(--bg-secondary)); } .item-detail-footer-accordion-summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink, var(--text-primary)); } .item-detail-footer-accordion[open] > .item-detail-footer-accordion-summary { margin-bottom: 12px; } /* COMBINED-EVIDENCE-DESIGN-CLEANUP-1 — promotes the loudest evidence-specific inline-style hotspots into the established Item Detail / Combined Review primitives. All selectors are `.item-detail-evidence-*` / `.item-detail-sale-*` / `.item-detail-section-footnote` / `.item-detail-action-row` / `.item-detail-inline-form` / `.combined-review-*` scoped — no impact on Collection / Sets / Set Detail / Intake selectors. */ /* Sale notes sub-block on the Disposition section. */ .item-detail-sale-notes { margin-top: 8px; font-size: 12px; color: var(--ink-dim, var(--text-secondary)); } /* Section footnote — small grey caption beneath a section's numeric summary (e.g. "Realized P/L is derived from the current cost basis"). */ .item-detail-section-footnote { margin-top: 8px; font-size: 10px; color: var(--ink-faint, var(--text-muted)); line-height: 1.4; } /* Sale-evidence list sub-block — divider + label + list + per-item card row + thumbnail + delete-button compact variant + empty state. Replaces the inline-styled cluster at the tail of the Disposition section. */ .item-detail-evidence-list-section { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); } .item-detail-evidence-list-label { font-size: 12px; font-weight: 500; margin-bottom: 6px; } .item-detail-evidence-list { display: flex; flex-direction: column; gap: 4px; } .item-detail-evidence-list-item { display: flex; align-items: center; justify-content: space-between; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; } .item-detail-evidence-list-item-meta { display: flex; align-items: center; gap: 8px; } .item-detail-evidence-thumbnail-link { flex-shrink: 0; } .item-detail-evidence-thumbnail { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; border: 1px solid var(--border); } .item-detail-evidence-delete-btn { font-size: 10px; padding: 1px 6px; } .item-detail-evidence-empty { font-size: 11px; color: var(--ink-faint, var(--text-muted)); } /* Inline form wrapper — replaces `style="display:inline;margin:0"` on the per-item delete form so the button sits on the same row as the meta block without a fresh paragraph. */ .item-detail-inline-form { display: inline; margin: 0; } /* Bottom action row — replaces the per-block flex layout used by Disposition's edit/upload buttons + by Combined Review's confirm/cancel buttons. Two simple primitives stacked: button gap + wrap. */ .item-detail-action-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; } /* CLEANUP-TEST-HEALTH-2 — Card Detail inline-style extraction for the EBAY-LISTING-EVIDENCE-EDIT-AND-CONSOLIDATION-BUNDLE-1 form row + URL anchor cluster on collection/detail.html. Replaces 9 inline ``style="…"`` attributes documented in test_item_detail_8c_design_alignment.py's BOX-188 docstring (3× ``word-break:break-all`` URL/code anchors, 1× compact non-FMV disclaimer paragraph, 2× compact flex form-row wrappers, 2× flexible URL inputs, 2× muted secondary provider-status links). The ``__grow`` and ``__end`` modifiers preserve the per-site flex-grow and right-justify behavior the inline declarations carried. Distinct from the older ``.item-detail-evidence-*`` cluster above (COMBINED-EVIDENCE- DESIGN-CLEANUP-1) — that one is for file-picker rows with ``gap: 12px; align-items: end``; this one is for the operator- facing eBay listing-context attach / replace / status surface with ``gap: 6px; align-items: center``. */ .item-detail-url-break-anywhere { word-break: break-all; } .item-detail-listing-evidence-disclaimer { margin: 8px 0 0 0; font-size: 11px; line-height: 1.4; } .item-detail-listing-evidence-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .item-detail-listing-evidence-form--grow { flex: 1; } .item-detail-listing-evidence-url-input { flex: 1; font-size: 12px; min-width: 240px; } .item-detail-listing-evidence-status-link { font-size: 11px; } .item-detail-listing-evidence-status-link--end { margin-left: auto; } /* CLEANUP-TEST-HEALTH-3 — Card Detail muted-secondary cluster. Extracts the three repeated ``font-size:11px`` inline patterns that account for the bulk of the activity-feed / image-sources list / evidence-row footer drift on collection/detail.html. Replaces 16 inline ``style="…"`` attributes across three sub- clusters: 1. Six per-source muted metadata spans inside the image- sources ``
    `` (eBay-API review / paste / fallback / Browse photo-import / manual upload / workflow hub rows) — ```` is the canonical "description chip" placed next to the source label. 2. Five evidence-row action wrappers — ``
    `` — host an action button plus a short descriptive note. Used by eBay-photo-import, eBay-API media-review, eBay-API listing-fallback, and the two ACQ-PREFILL acquisition rows. The wrapper RETAINS its existing ``.item-detail-evidence-form-help`` class for the dim-color inheritance the help class provides; the new ``.item-detail-evidence-row-actions`` class layers in the flex layout that the inline was carrying. 3. Five short descriptive notes (````) inside the wrappers above. The new classes are named after their role, not after the inline shape, so future additions in the same sub-cluster can adopt the class without inventing a new selector. Scoped to ``item-detail-*`` so other templates are unaffected. */ .item-detail-image-source-row-meta { font-size: 11px; margin-left: 6px; } .item-detail-evidence-row-actions { font-size: 11px; margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .item-detail-evidence-row-note { font-size: 11px; } /* CLEANUP-TEST-HEALTH-4 — deferred evidence-state hints pair. Extracts the two identical inline styles on the all-loaded / empty hint ```` siblings inside the evidence-state slot region (collection/detail.html lines ~1160 + ~1168). Both hints span the full row beneath the per-slot chips and add a small top-margin so they don't crowd the chips above. Identical 2-occurrence string; safe to extract without changing any other site. */ .item-detail-evidence-state-hint { font-size: 11px; flex-basis: 100%; margin-top: 4px; } /* CLEANUP-TEST-HEALTH-5 — status-chips badge cluster. Extracts the 5 identical ``style="font-size:11px"`` inlines on the status-summary ```` chips inside ``.item-detail-status-chips`` (collection/detail.html lines ~302–310: badge-active / badge-listed / badge-sold / badge-archived / badge-dup). The base ``.badge`` cluster ships with the default badge font-size; these status-chip variants render one size step smaller. Scoped to the status-chips row so other ``.badge`` consumers elsewhere on Card Detail (grading summary, valuation timeline) are unaffected and stay candidate sites for their own future extraction passes. */ .item-detail-status-badge { font-size: 11px; } /* CLEANUP-TEST-HEALTH-6 — grading-summary badge cluster. Extracts the 5 identical ``style="font-size:11px"`` inlines on the Grading section's status-summary ```` chips (collection/detail.html lines ~1889 / 1898 / 1905 / 1920 / 1955): badge-active "Graded", 2× badge-needed "Submitted" / "Needs Grading", badge-archived "Raw / Ungraded", and the badge-grade dynamic ``gs.actual_grade`` chip in the Grading Submissions list row. Same font-size shape as the status-chips cluster extracted by CLEANUP-TEST-HEALTH-5 but lives in a different DOM sub-section; intentionally a separate class so future per-section design tweaks can diverge cleanly. Does NOT include the ``font-size:13px`` actual-grade chip on line 1890 or the ``font-size:10px`` submission-status chips on lines 1957–1962 — those are different shapes and stay as separate-slice carve-outs. */ .item-detail-grading-badge { font-size: 11px; } /* CLEANUP-TEST-HEALTH-7 — grading-submissions-list cluster. Extracts 5 inline styles from the Grading Submissions ```` row body on collection/detail.html (lines ~1950 / 1951 + ~1958 / 1960 / 1962): * 2× ```` muted metadata spans for service_level + submission_date — replaced with ``.item-detail-grading-submission-meta``. * 3× ```` submission lifecycle status chips for completed/returned, cancelled, and submitted/default states — replaced with ``.item-detail-grading-submission-badge`` layered alongside the existing ``badge badge-*`` classes. Both classes are scoped to the grading-submissions list so other 10px badge consumers elsewhere (audit log ``badge {{ evt.source_badge }}``, valuation history ``badge {{ evt.source_badge }}``) and other 11px muted meta inlines remain candidates for their own future extraction passes. */ .item-detail-grading-submission-meta { font-size: 11px; color: var(--ink-faint, var(--text-muted)); margin-left: 6px; } .item-detail-grading-submission-badge { font-size: 10px; } /* CLEANUP-TEST-HEALTH-8 — audit / source-tag badge cluster. Extracts the 2 identical ``style="font-size:10px"`` inlines on the source-tagging ````) — names the source of a valuation-event row (manual override, fmv inbox, etc). * line ~2395: changelog source tag (````) — names the source of an audit/changelog row (bulk_edit, ui_edit, other). Same DOM shape (````), same semantic role (audit source-tagging chips in audit-style tables). Distinct from the grading-submission lifecycle badges (CLEANUP-7) because those are status chips on a dash-item-card row, not audit/source tags on a tabular evidence row — class names track the surface. Deliberately does NOT capture: the evidence-state filename ```` at line ~1141 (code element, different shape), the valuation-event delta-pct inner ```` at line ~1992 (inside a data-driven color span; one-off composition), the sold-comps ```` at line ~2017 (anchor with color, different shape), and the sold-comps `` (excluded)`` at line ~2017 (plain span, not a badge). Each is a separate-slice candidate. */ .item-detail-audit-source-badge { font-size: 10px; } /* CLEANUP-TEST-HEALTH-9 — sold-comps mini-cluster on the valuation-history comp-evidence row (collection/detail.html line ~2017, inside the per-event ``{% for comp in evt.comp_evidence %}`` loop). Two distinct shapes side-by- side on the same comp row: * The external-link arrow (``↑``) — renders only when ``comp.link`` is present; ``--accent`` matches the theme's link accent color. * The excluded-row label (`` (excluded)``) — renders only when ``comp.excluded`` is true; the outer comp ``
    `` already applies ``text-decoration:line-through`` for excluded rows via its own conditional inline (kept as a data-driven inline, NOT extracted in this slice). Two classes (font-sizes match but the link variant adds color); keeping them named separately tracks the role so a future per-shape tweak — e.g. changing only the link accent weight — touches one class instead of one shared rule. */ .item-detail-sold-comp-link { font-size: 10px; color: var(--accent); } .item-detail-sold-comp-excluded { font-size: 10px; } /* CLEANUP-TEST-HEALTH-10 — TCDB Provenance identifier code cluster. Extracts the 2 identical ```` inlines on the TCDB Provenance disclosure (collection/detail.html lines ~2326 + 2335): the ``bulk_invocation_id`` and the ``bulk_live_execution_id`` identifier displays inside the ``tcdb_provenance_view`` panel. Same DOM shape (````), same semantic role (read-only TCDB bulk-execution identifier display inside the provenance disclosure). Intentionally narrow: this class is for the TCDB-provenance identifier ```` cluster only. The other three ```` inlines elsewhere on Card Detail (audit-row media-archive filename at line ~2488, audit row ``was:``/``now:`` value spans at lines ~2539 + 2542) live in the audit/changelog disclosure and are a separate-slice candidate — they share the font-size but render in a different surface and may want a distinct class. */ .item-detail-tcdb-provenance-code { font-size: 11px; } /* CLEANUP-TEST-HEALTH-11 — audit/changelog row code cluster. Extracts the 3 ```` inlines on the audit/changelog disclosure row body (collection/detail.html lines ~2488 + 2539 + 2542): * media-archive filename `` {{ _filename }}`` (data-testid preserved verbatim). * old-value display ``{{ evt.old_value[:80] }}…``. * new-value display ``{{ evt.new_value[:80] }}…``. Same DOM shape (````), same semantic role (audit-row identifier / before-after value display). Distinct from the TCDB-provenance class (CLEANUP-10) even though both are font-size:11px — class names track the surface (audit/changelog row vs. TCDB provenance disclosure) so future per-surface tweaks can diverge cleanly. No rendered behavior change intended. */ .item-detail-audit-row-code { font-size: 11px; } /* CLEANUP-TEST-HEALTH-12 — evidence-state filename code element. Extracts the 1 ```` inline at ``collection/detail.html`` line ~1141 — the per-role filename display inside the evidence-state rail chip (``front``/``back``/ ``receipt``). Only remaining ```` on Card Detail after CLEANUP-10 (TCDB) and CLEANUP-11 (audit/changelog). Distinct surface (evidence-state rail vs. provenance disclosure vs. audit row) — separate class keeps future per-surface tweaks isolated. No rendered behavior change intended. */ .item-detail-evidence-state-filename-code { font-size: 10px; } /* CLEANUP-TEST-HEALTH-13 — actual-grade chip on Grading section. Extracts the 1 ``{{ item.card_grade }}`` chip at ``detail.html`` line ~1890. Displays the operator's captured numeric / letter card grade beside the ``badge-active "Graded"`` chip when ``grading_status == 'COMPLETED'``. Sized one step larger than the surrounding 11px grading-summary badges so the actual grade reads as the primary visual focus of the COMPLETED row. Static font-size:13px — no data-derived declarations. No rendered behavior change intended. */ .item-detail-card-grade-chip { font-size: 13px; } /* CLEANUP-TEST-HEALTH-14 — valuation-event 11px table cells. Extracts the 2 identical ```` table cells in the valuation-history events table at ``detail.html`` lines ~1996 + 2000 — the per-row method-and-confidence cell and the per-row source/evidence cell. Both render one size step smaller than the default valuation-history table font. Static font-size:11px on the cells themselves; the inner spans / badges carry their own (data-driven or already- extracted) inlines. No rendered behavior change intended. */ .item-detail-valuation-event-cell { font-size: 11px; } /* CLEANUP-TEST-HEALTH-15 — valuation-method badge chip. Extracts the 1 ```` inline at ``detail.html`` line ~1997 — the valuation-event row's ``evt.valuation_method`` mini-chip (one size step smaller than the surrounding 10–11px badge cluster, with a muted token-driven background + border to read as a metadata tag, not a primary badge). All 4 declarations are static (CSS custom-property references only; no data-derived values). Distinct shape from the 9px duplicate-warning chip at line ~1146 (different colors, padding, border-radius, margin) — that site stays a separate-slice candidate. No rendered behavior change intended. */ .item-detail-valuation-method-chip { font-size: 9px; background: var(--bg-secondary); color: var(--ink-dim, var(--text-secondary)); border: 1px solid var(--border); } /* CARD-DETAIL-IMAGE-SOURCES-PANEL-CONTRAST (2026-06-02) — ``.item-detail-evidence-card`` is shared by the Card Detail "Image sources" panel and the eBay API media provenance card. Both previously carried an inline ``background:#f6f4ee`` light surface that ignored the theme system; in dark mode the inherited ``--text-primary`` heading + body text then rendered light-on-light (~1.2:1, fails WCAG AA). Drive surface + border from the canonical card tokens — the same ``var(--surface, var(--bg-card))`` treatment the other cards on this page use — so the panel matches the dark theme and clears AA in both themes. The 5 layout/visual props moved off the now-removed inline ``style`` unchanged; only the background switches from a hard-coded light hex to the token. */ .item-detail-evidence-card { margin-top: 10px; padding: 10px 12px; background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; } /* CLEANUP-TEST-HEALTH-16 — image-source-row list cards. Extracts the 6 identical ``
  • `` cards in the image-sources ``
      `` on ``detail.html`` (lines ~1282 / 1303 / 1322 / 1353 / 1374 / 1391) — eBay-API review, eBay-API paste, eBay-API fallback, Browse photo-import, manual upload, and workflow-hub rows. Each ``
    • `` is the framed card body for one source row, already carrying ``data-testid="card-detail-image-sources- row"`` plus a per-row ``data-row-kind="..."``. CARD-DETAIL-IMAGE-SOURCES-PANEL-CONTRAST (2026-06-02) then moved the ``background`` + ``border`` off their original light literals (``#fff`` / ``#ddd``) onto the recessed surface tokens (``var(--surface-2, var(--bg-secondary))`` / ``var(--border)``) so the rows stay theme-consistent inside the now-dark evidence card; the 3 geometry declarations remain static literals. */ .item-detail-image-source-row-card { margin: 4px 0; padding: 6px 8px; background: var(--surface-2, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 4px; } /* CLEANUP-TEST-HEALTH-17 — Grading section row wrappers. Extracts the 4 identical ``
      `` wrappers at ``detail.html`` lines ~1888 / 1897 / 1904 / 1919 — the chip-and-label flex rows at the top of each Grading section conditional branch (COMPLETED / SUBMITTED / NEEDED / Raw). Each wraps a status badge + an optional secondary chip / label (grade chip, grading company, high-value/grading candidate hint). Static 4-declaration inline (display + align-items + gap + margin-bottom); no Jinja, no data- driven values. No rendered behavior change intended. */ .item-detail-grading-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } /* Combined Review (collection/combined_review.html) — page-level evidence-extraction grid. Scoped to `.combined-review-*` so other tables/forms aren't affected. */ .combined-review-panel { margin-bottom: 16px; } .combined-review-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink, var(--text-primary)); } .combined-review-title-meta { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 4px; } .combined-review-status { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .combined-review-status.is-error { color: var(--warning); } .combined-review-conflict { margin-bottom: 12px; font-size: 12px; } .combined-review-receipt-summary { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } /* Combined-review extraction table — replaces ~25 inline-style attributes on table/cells/inputs across the two panels. Any future cleanup of similar pages can subclass these. */ .combined-review-table { width: 100%; font-size: 13px; } .combined-review-table-check { width: 30px; } .combined-review-table-row { border-bottom: 1px solid var(--border); } .combined-review-table-row > td { padding: 8px; } .combined-review-table-row > td.combined-review-table-check-cell { padding: 8px 4px; } .combined-review-table-label { font-weight: 500; } .combined-review-table-current { color: var(--text-muted); } .combined-review-source-tag { font-size: 10px; display: block; color: var(--text-muted); } .combined-review-empty-cell { color: var(--text-muted); } .combined-review-input { width: 100%; padding: 4px 6px; font-size: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 3px; color: var(--text-primary); } .combined-review-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .combined-review-provenance { margin-bottom: 12px; } .combined-review-checkbox-label { font-size: 12px; color: var(--text-secondary); cursor: pointer; } .combined-review-actions { margin-top: 0; } /* COLLECTION-SCREEN-DESIGN-ALIGNMENT-9A — collector-facing visual grid + table view toggle. The /ui/collection page always renders BOTH the grid and the table markup; the wrapper's data-view attribute controls visibility so prior tests that pin the table testid + classes continue to pass without explicit ?view=table. */ .collection-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm, 5px); overflow: hidden; background: var(--surface, var(--bg-card)); } .collection-view-toggle a { padding: 6px 12px; font-size: 12px; text-decoration: none; color: var(--ink-dim, var(--text-secondary)); transition: background 120ms, color 120ms; } .collection-view-toggle a + a { border-left: 1px solid var(--border); } .collection-view-toggle a:hover { background: var(--surface-2, var(--bg-secondary)); color: var(--ink, var(--text-primary)); } .collection-view-toggle a[data-active="true"] { background: var(--accent); color: var(--bg-card); } /* UIRECON-COLLECTION (BOX-227) — keyboard-accessible focus ring on the Grid/Table view toggle so the operator can tab into the toggle and see the active state visually. Token-driven; mirrors the BOX-223 / BOX-225 / BOX-226 :focus-visible vocabulary. */ .collection-view-toggle a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; /* The toggle's own border-radius is on the wrapping container; the inner anchors are flush, so the outline-offset gives the ring breathing room without clipping against the segmented borders. */ } /* Wrapper toggles which view is visible. */ .collection-views[data-view="grid"] .collection-table-view { display: none; } .collection-views[data-view="table"] .collection-grid-view { display: none; } /* COLLECTION-SCREEN-DESIGN-ALIGNMENT-9C — defense-in-depth. The 9A CSS-only hide failed in operator validation. The template now also stamps `hidden` + aria-hidden on the inactive view; this rule guarantees `display: none` even if author CSS elsewhere overrides the UA default for [hidden]. */ .collection-grid-view[hidden], .collection-table-view[hidden] { display: none !important; } /* Grid view — collector-facing card grid. Auto-fit responsive columns. Cards are .lb-surface-flavored object cards. */ .collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } @media (max-width: 600px) { .collection-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } } .dash-section { margin-bottom: 24px; } .dash-section-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; } .dash-section-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--ink, var(--text-primary)); letter-spacing: -0.005em; } .dash-section-action { font-size: 12px; color: var(--ink-dim, var(--text-secondary)); white-space: nowrap; } .dash-section-action:hover { color: var(--accent); } /* DASHBOARD-VISUAL-MIGRATION-MICROVIZ-4 — production-safe micro-visual layer for the migrated dashboard surfaces per Claude Design prototype (handoff: docs/lunchbox-memorabilia/ project/Lunchbox Prototype.html → src/dashboard.jsx ActivityRow + KpiTile + RecentItemCard patterns). Strict semantic discipline: * No trend chip is rendered unless the underlying data (portfolio_trend.comparisons[].delta, delta_pct) exists. * KPI meta chips are neutral status labels only when no real trend exists ("Current" / "Tracked" / "Cards"). * Activity event-family marker reuses the existing Bulk Edit badge color family — recent_ops are all bulk_operations rows in production today; no fake multi-family marker rendered. * Recent Items marker is purely decorative — accent dot when an item carries a valuation, muted dot otherwise (semantic: the dot reflects the existing estimated_market_value vs. card_grade vs. grading_ status conditional gate, not a new field). Token discipline: * Every color reference uses the fc86963 alias chain (--ink / --ink-dim / --ink-faint / --surface) with the legacy --text-* / --bg-card token as the inline fallback so this layer remains readable if the alias layer is later removed. * Mono font for tiny timestamp / event-id labels via --font-mono. */ /* KPI meta-row (chip strip below the value, above the sub-link). Inline-flex so chips wrap cleanly on narrow tiles. */ .dash-kpi-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; } .dash-trend-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); border: 1px solid transparent; white-space: nowrap; font-variant-numeric: tabular-nums; } .dash-trend-chip-positive { color: var(--success); border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); } .dash-trend-chip-negative { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); } .dash-trend-chip-neutral { color: var(--ink-dim, var(--text-secondary)); border-color: var(--border); background: var(--bg-secondary); } .dash-trend-chip-warning { color: var(--warning); border-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); } /* Tiny arrow glyph that pairs with positive/negative chips. */ .dash-trend-arrow { font-family: var(--font-sans); font-size: 9px; line-height: 1; } /* Recent Activity row polish. Pattern: [marker] [content: kind-chip + time + title + meta] Marker is a 6px vertical accent rail, color-coded by event kind (currently only Bulk Edit; defaults to neutral if a future event family lands without an explicit kind). */ .dash-activity-item { /* Override the prior padding so the new internal flex layout can place the marker flush-left. */ padding: 0; display: block; } .dash-activity-row { display: grid; grid-template-columns: 4px 1fr; gap: 12px; padding: 12px 14px; align-items: stretch; } .dash-activity-marker { width: 4px; border-radius: 2px; background: var(--ink-faint, var(--text-muted)); flex-shrink: 0; } .dash-activity-marker-bulk { background: var(--warning); } /* Re-Review v5 §2 M2 — additive event-family marker variants. `-import` for future import-pipeline activity rows; `-value` for valuation-edit / per-card override events. Today only `-bulk` ships data; the variants stay class-only until production data lands the matching event family (same discipline as MICROVIZ-4's "render only where data exists" contract). */ .dash-activity-marker-import { background: var(--success); } .dash-activity-marker-value { background: var(--accent); } /* DASHBOARD-P1 — kind-family markers for the aggregate activity timeline. Each maps to one of the four normalized event kinds from shared/db/services/dashboard_activity.py. Reuses the existing accent / success / warning tokens — no new tokens. */ .dash-activity-marker-intake { background: var(--success); } .dash-activity-marker-item_change { background: var(--accent); } .dash-activity-marker-media { background: var(--warning); } .dash-activity-marker-fmv { background: var(--accent); } /* BOX-1087 — cost-basis marker for the unified dashboard Activity preview (acquisition_envelopes rows). Reuses the --success token (money / green). */ .dash-activity-marker-cost_basis { background: var(--success); } .dash-activity-content { min-width: 0; } .dash-activity-kind { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); padding: 1px 6px; border-radius: 3px; color: var(--ink-dim, var(--text-secondary)); background: var(--bg-secondary); border: 1px solid var(--border); vertical-align: middle; } .dash-activity-time { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10px; color: var(--ink-faint, var(--text-muted)); margin-left: 8px; vertical-align: middle; font-variant-numeric: tabular-nums; } .dash-activity-title { font-size: 13px; font-weight: 500; color: var(--ink, var(--text-primary)); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-activity-meta { font-size: 12px; color: var(--ink-dim, var(--text-secondary)); margin-top: 2px; } /* Recent Items row polish. Pattern: [marker dot] [content: title + meta] [right cluster: value + grade]. */ .dash-item-card { padding: 0; } .dash-item-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; padding: 12px 14px; align-items: center; } .dash-item-marker { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint, var(--text-muted)); margin-top: 6px; align-self: start; } .dash-item-marker-valued { background: var(--accent); } .dash-item-content { min-width: 0; } .dash-item-title { font-size: 13px; font-weight: 500; color: var(--ink, var(--text-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-item-meta { font-size: 12px; color: var(--ink-dim, var(--text-secondary)); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-item-right { text-align: right; flex-shrink: 0; } .dash-item-value { font-size: 13px; font-weight: 500; color: var(--ink, var(--text-primary)); font-variant-numeric: tabular-nums; } .dash-item-submeta { font-size: 10px; color: var(--ink-faint, var(--text-muted)); margin-top: 2px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: 0.04em; } /* DASHBOARD-FMV-ATTENTION-1 — scoped alignment for the dashboard Intake FMV tile per Re-Review v4 §6 (handoff: docs/lunchbox-memorabilia/project/Re-Review v4.html). Scoping discipline (D3): every rule in this block is selector- pinned to `[data-fmv-area="dashboard-attention"]` so no other dashboard tile, kpi tile, section panel, or set/recommendation card inherits these declarations. The `.fmv-shell-section` vocabulary is intentionally NOT applied here — the dashboard FMV-attention surface is a single bounded tile, not a multi- section page-shell, and propagating `.fmv-shell-section` into the kpi strip would conflict with the strip's flex layout. Visual stance (D2 — rhythm only, no terminal section): the tile's existing dash-kpi padding (16px 20px) already mirrors the codified shell rhythm baseline (--shell-section-terminal- padding 16px / --shell-section-gap 20px); the rule below re-declares the SAME padding via the aliases so a future re-tune of the shell aliases automatically reaches this surface. Pure no-visual-change codification — both the alias-driven and literal rules resolve to the same pixel values with the foundation slice's defaults in place. Future expansion (Re-Review v4 §6 mockup): when the dashboard FMV-attention area grows to include severity-tier counts + per-commit deep-links (richer than the current single tile), subsequent slices can add child rules under the same `[data-fmv-area="dashboard-attention"]` selector — keeping the dashboard non-FMV surfaces untouched. */ [data-fmv-area="dashboard-attention"] { padding: var(--shell-section-terminal-padding, 16px) var(--shell-section-gap, 20px); } /* Batch 3: Buy Next / Set Progress empty-state block. Renders when the associated list is empty so the operator is not left wondering whether a section is present at all. */ .dash-empty-state { background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px; padding: 14px 16px; color: var(--text-secondary); font-size: 13px; margin-top: 8px; } .dash-empty-state-title { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } /* Batch 3: collection list filter label emphasis. Operator feedback 2026-04-13: "Search headings are too subtle — need to increase visibility." Lifts the label weight and color on the primary and secondary filter sections without redesigning the filter layout. */ .filter-primary label, .filter-secondary label, .filter-section-label { font-weight: 600 !important; color: var(--text-secondary) !important; text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px !important; } .filter-section-label { font-size: 12px !important; color: var(--text-primary) !important; } /* Batch 3: shared identity meta line class — matches detail block typography so parallel/color/insert-set and language/country/tags lines render consistently with adjacent identity elements. */ .identity-meta { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .identity-meta .meta-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; } .identity-meta .meta-value { color: var(--text-primary); font-weight: 500; } .dash-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .dash-activity-list { display: flex; flex-direction: column; gap: 8px; } .dash-activity-item { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; text-decoration: none; color: inherit; } .dash-activity-item:hover { border-color: var(--accent); } .dash-items-list { display: flex; flex-direction: column; gap: 8px; } .dash-item-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; text-decoration: none; color: inherit; } .dash-item-card:hover { border-color: var(--accent); } .dash-set-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; transition: border-color 120ms ease, background 120ms ease; } .dash-set-card:hover { border-color: var(--accent); } /* DASHBOARD-VISUAL-MIGRATION-SHELL-LOWER-2 — minor unification: bring .dash-item-card and .dash-activity-item to the same 8px border-radius as .dash-kpi + .dash-set-card so all dashboard surface cards share the same corner rhythm. Hover state extended with subtle background lift. */ .dash-item-card, .dash-activity-item { border-radius: 8px; transition: border-color 120ms ease, background 120ms ease; } .dash-activity-item:hover, .dash-item-card:hover { background: var(--bg-secondary); } /* ── Card detail hero ────────────────────────────────────────── */ .card-hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .card-hero-identity { flex: 1; } .card-hero-name { font-size: 24px; font-weight: 600; margin-bottom: 4px; } .card-hero-subtitle { font-size: 14px; color: var(--text-secondary); } .card-hero-value { text-align: right; flex-shrink: 0; } .card-hero-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .card-hero-fmv { font-size: 28px; font-weight: 600; margin-top: 2px; } .card-info-block { display: grid; grid-template-columns: 180px 1fr; gap: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 20px; } .card-placeholder { width: 100%; aspect-ratio: 2.5/3.5; background: var(--bg-secondary); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .card-info-meta { display: flex; flex-direction: column; justify-content: center; } .card-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .card-meta-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .card-meta-value { font-size: 14px; font-weight: 500; margin-top: 2px; } /* ── Marketplace cards ────────────────────────────────────────── */ .mp-card-list { display: flex; flex-direction: column; gap: 12px; } .mp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; /* UIRECON-MARKETPLACE (BOX-231) — animate hover/focus state changes alongside the existing visual chrome. Mirrors the ``.set-card`` / ``.dash-stat-tile`` vocabulary so the marketplace card reads as part of the same scannable list family. */ transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; } /* UIRECON-MARKETPLACE (BOX-231) — visible-hover delta + keyboard focus-within anchor. The card itself is not a single anchor (it carries multiple Add / Buy on eBay / Track / Untrack actions), so ``:focus-within`` (when any button inside the card receives keyboard focus) gets the same accent treatment as a mouse hover. Token-driven; no palette change. */ .mp-card:hover, .mp-card:focus-within { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); } .mp-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; /* UIRECON-RESPONSIVE-AUDIT (BOX-233) — wrap card name + action group so the 4 inline action controls (Add / Buy on eBay / Track or Untrack) reflow cleanly on narrow viewports instead of overflowing horizontally. Token-free additive. */ flex-wrap: wrap; row-gap: 6px; } .mp-card-name { font-size: 15px; font-weight: 600; } .mp-card-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } /* UIRECON-RESPONSIVE-AUDIT (BOX-233) — wrap per-card detail chips (Parallel / Insert / etc.) so they reflow at narrow widths instead of overflowing. Token-free additive. */ .mp-card-details { display: flex; gap: 20px; font-size: 13px; flex-wrap: wrap; row-gap: 6px; } .mp-card-detail { } .mp-detail-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-right: 6px; } /* ── Cards / Panels ──────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; } .kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .kpi-value { font-size: 24px; font-weight: 600; margin-top: 4px; } .kpi-placeholder { color: var(--text-muted); font-style: italic; } /* ── Tables ──────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } td { padding: 8px 12px; border-bottom: 1px solid var(--border); } tr:hover td { background: var(--bg-secondary); } /* INTAKE-2 — opt-in stronger row-hover variant for dense queue tables where the default `tr:hover td` background-only delta is too subtle for operator-action confirmation. Apply by adding `class="data-table data-table-hover-strong"` on the table. Adds an inset accent left-border on the hovered row's first cell so the operator's eye locks to the active row before clicking Resolve / Open commit. */ table.data-table-hover-strong tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)); } table.data-table-hover-strong tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ── Results bar (between filters and table) ─────────────────── */ .results-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); } /* ── Collection table ────────────────────────────────────────── */ .collection-table .col-name { min-width: 180px; } /* RE-REVIEW-V6 §3 C5 — `.num` standalone utility. Templates wrap inline numerics in for tabular-nums alignment outside a table context (page subtitles, summary tiles, sale-amount inline cells). Previously only contextual rules existed (.lb-dtable td.num, .lb-hover-peek-row > .num); this utility makes the bare class work everywhere. */ .num { font-variant-numeric: tabular-nums; } .collection-table .col-num { text-align: right; font-variant-numeric: tabular-nums; } .collection-table .col-num:first-line { white-space: nowrap; } .collection-table th.col-num { text-align: right; } .item-link { font-weight: 500; } .item-sub { display: inline-block; font-size: 11px; color: var(--text-muted); margin-left: 6px; } .item-set { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-grade { background: var(--accent); color: #fff; } /* RE-REVIEW-V6 §3 C2 — grading-status badge classes aliased to the .lb-chip color vocabulary so all status chips share one named-token contract. Templates keep the legacy class names (no markup churn); the visual moves to the tinted-bg + colored-border + colored-text chip pattern. */ .badge-needed { color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); border: 1px solid var(--warning); } .badge-submitted { color: var(--ink-dim, var(--text-secondary)); background: var(--surface-2, var(--bg-secondary)); border: 1px solid var(--border); } .badge-listed { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent); } .badge-sold { color: var(--ink-faint, var(--text-muted)); background: var(--surface-2, var(--bg-secondary)); border: 1px solid var(--border); } .badge-archived { color: var(--ink-faint, var(--text-muted)); background: var(--surface-2, var(--bg-secondary)); border: 1px solid var(--border); } /* ── Forms ────────────────────────────────────────────────────── */ .form-group { margin-bottom: 12px; } .form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 13px; font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); } /* BOX-1152: restore a visible focus indicator for keyboard users — the accent border alone is ~1.17:1 (invisible). Pointer focus keeps the clean borderless look via the :focus rule above. */ .form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .btn { display: inline-block; padding: 8px 16px; background: var(--accent-fill); color: #fff; border: none; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; } .btn:hover { background: var(--accent-fill); filter: brightness(1.08); } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-outline { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); } .btn-outline:hover { background: var(--bg-secondary); color: var(--text-primary); } /* DESIGN-ALIGN-CSS-CARD-CLASSES-1 — formalize the button-variant names templates already write but the stylesheet did not yet define. Three additions: .btn-primary — explicit alias of `.btn` for templates that write `class="btn btn-primary"`. No-op visual: the `.btn` base already encodes the accent-background primary style; this rule exists so the class name resolves to a defined selector and templates can drop redundant inline-style attributes that used to compensate for the missing definition. .btn-warning — encodes the inline `style="background:var( --warning); border-color:var(--warning)"` override pattern that fmv_worklist.html and similar templates use for warning-tier actions (Re-derive / Re-run / Review envelope on attention rows). Visual output matches the inline pattern exactly. .btn-danger — encodes the parallel inline pattern using `var(--error)` for error-tier actions (Fix identity on LOOKUP_ERROR rows). No new tokens added; reuses existing [data-theme] variables. See docs/CLAUDE_DESIGN_PRODUCTION_ALIGNMENT_AUDIT.md §10 (Slice 1) for the audit context. */ .btn-primary { /* alias of .btn — see comment above */ } .btn-warning { background: var(--warning); border-color: var(--warning); /* BOX-1158: dark text on the amber warning fill (white was 2.19:1). Dark #1a1a1a clears AA on every theme's warning shade (5.46–7.94:1). */ color: #1a1a1a; } .btn-warning:hover { background: var(--warning); filter: brightness(0.92); } .btn-danger { background: var(--error); border-color: var(--error); color: #fff; } .btn-danger:hover { background: var(--error); filter: brightness(0.92); } /* DESIGN-ALIGN-CSS-CARD-CLASSES-1 — `.status-card` encodes the dominant inline pattern used across status-banner uses (`
      ` and similar). Templates can drop the inline `padding: 8px 12px; border-radius: 4px` once they're confident they don't need a per-instance override. CSS specificity preserves any inline override that remains in place — visual output is unchanged for instances that keep the inline style; instances that omit it inherit the encoded defaults. */ .status-card { padding: 8px 12px; border-radius: 4px; } /* DESIGN-ALIGN-FMV-WORKLIST-SHELL-1 — marker classes for the FMV worklist app-shell section sequence (per docs/FMV_APP_SHELL_UNIFICATION_BRIEF.md §4). The wrappers are intentionally visual-no-ops in this slice — every existing inner element retains its previous spacing/margins so the conversion is operator-visually identical. The classes exist primarily as stable hooks for future visual hierarchy refinements + as documented-component-vocabulary entry points for the queue/inbox/card-detail follow-on slices that will share the same naming. No new tokens; no [data-theme] block edits. */ .fmv-worklist-shell { /* Container marker — no visual rules in this slice. */ } .fmv-shell-section { /* Section marker — no visual rules in this slice. */ } .fmv-shell-header { /* Header section marker — no visual rules in this slice. */ } /* ── Card Vault visual identity (BOX-1241) — FMV worklist ────── */ /* Fills the design-align shell hooks above with the rollout levers, scoped to .fmv-worklist-shell so only the worklist gets them (the queue/history shells reuse .fmv-shell-section but not this root). Semantic tokens only (ADR-039); no new tokens, no [data-theme] edits. The status cards keep their status border colors — the warm hover is a shadow LIFT only, never a border recolor. */ .fmv-worklist-shell .fmv-shell-header .page-title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; } .fmv-worklist-shell .fmv-shell-header { border-left: 3px solid var(--accent-2); padding-left: 14px; } .fmv-worklist-shell .card { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease); } .fmv-worklist-shell .card:hover { box-shadow: var(--shadow); } @keyframes fmvwRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .fmv-worklist-shell[data-cv-reveal] > .fmv-shell-section { animation: fmvwRise var(--dur-slow, 200ms) var(--ease) both; } .fmv-worklist-shell[data-cv-reveal] > .fmv-shell-section:nth-of-type(1) { animation-delay: 0ms; } .fmv-worklist-shell[data-cv-reveal] > .fmv-shell-section:nth-of-type(2) { animation-delay: 45ms; } .fmv-worklist-shell[data-cv-reveal] > .fmv-shell-section:nth-of-type(3) { animation-delay: 90ms; } .fmv-worklist-shell[data-cv-reveal] > .fmv-shell-section:nth-of-type(4) { animation-delay: 135ms; } .fmv-worklist-shell[data-cv-reveal] > .fmv-shell-section:nth-of-type(5) { animation-delay: 180ms; } } /* DESIGN-ALIGN-FMV-QUEUE-SHELL-1 — container marker for the cross-commit FMV queue. Same visual-no-op contract as .fmv-worklist-shell; reuses .fmv-shell-section + .fmv-shell- header from above. Future visual hierarchy refinements can target this selector without touching the worklist. */ .fmv-queue-shell { /* Container marker — no visual rules in this slice. */ } /* DESIGN-ALIGN-FMV-HISTORY-DETAIL-FMV-AREA-SHELL-1 — container marker for the FMV-bearing slice of the per-commit history detail page. Scoped to FMV-related sections only; the rest of the page (commit metadata fact-grid, counts, resolution- progress, resolve/unresolve forms, correction handoffs, summary log, bottom form-actions) deliberately stays outside this wrapper. Same visual-no-op contract as the worklist + queue shell markers; reuses .fmv-shell-section. */ .fmv-history-shell { /* Container marker — no visual rules in this slice. */ } /* DESIGN-ALIGN-FMV-WORKLIST-SHELL-VISUAL-1 — first visible pilot activating the operator FMV worklist shell-section hooks shipped in DESIGN-ALIGN-FMV-WORKLIST-SHELL-1. Conservative baseline only: 1. 20px vertical rhythm between adjacent shell sections (every section after the first gets `margin-top:20px`). 2. Subtle separator above the bottom secondary-actions section (`border-top` + `padding-top`) so the operator visually distinguishes exit-nav from the table content. Scoped via the worklist shell container's data-testid so no other surface inherits these rules. Uses existing [data-theme] tokens only (--border); no new tokens. No changes to inner `.card` / `.fmv-tag-*` / `.btn-warning` etc. styling. */ [data-testid="fmv-worklist-shell"] .fmv-shell-section + .fmv-shell-section { margin-top: var(--shell-section-gap, 20px); } [data-testid="fmv-worklist-shell"] .fmv-shell-section + [data-testid="fmv-worklist-shell-secondary-actions"] { border-top: 1px solid var(--border); padding-top: var(--shell-section-terminal-padding, 16px); } /* DESIGN-ALIGN-FMV-QUEUE-SHELL-VISUAL-1 — second visible pilot mirroring DESIGN-ALIGN-FMV-WORKLIST-SHELL-VISUAL-1. Activates the operator FMV queue shell-section hooks shipped in DESIGN-ALIGN-FMV-QUEUE-SHELL-1 with the same conservative baseline: 1. 20px vertical rhythm between adjacent shell sections. 2. Subtle separator above the bottom secondary-actions section (`border-top` + `padding-top`). Scoped via the queue shell container's data-testid so no other surface inherits these rules. Uses existing [data-theme] tokens only (--border); no new tokens. No changes to inner `.card` / `.fmv-tag-*` / `.btn-*` etc. styling. */ [data-testid="fmv-queue-shell"] .fmv-shell-section + .fmv-shell-section { margin-top: var(--shell-section-gap, 20px); } [data-testid="fmv-queue-shell"] .fmv-shell-section + [data-testid="fmv-queue-shell-secondary-actions"] { border-top: 1px solid var(--border); padding-top: var(--shell-section-terminal-padding, 16px); } /* DESIGN-ALIGN-FMV-HISTORY-DETAIL-FMV-AREA-SHELL-VISUAL-1 — third visible pilot mirroring the worklist + queue pilots. Activates the FMV-bearing area of the per-commit history detail page (mixed page; the non-FMV commit-detail content sits OUTSIDE this shell wrapper per Slice 3's scoping decision and is unaffected by these rules). Same conservative baseline: 1. 20px vertical rhythm between adjacent shell sections inside the FMV shell wrapper. 2. Subtle separator (`border-top` + `padding-top`) above the audit-trail section (Recent FMV actions). The audit-trail is the terminal section of this FMV shell area, analogous to secondary-actions on the worklist and queue. Scoped via the FMV history shell container's data-testid so non-FMV commit-detail areas (fact-grid, counts, resolution-progress, resolve forms, summary log, bottom form-actions) are unaffected. Uses existing [data-theme] tokens only (--border); no new tokens. */ [data-testid="fmv-history-shell"] .fmv-shell-section + .fmv-shell-section { margin-top: var(--shell-section-gap, 20px); } [data-testid="fmv-history-shell"] .fmv-shell-section + [data-testid="fmv-history-shell-audit-trail"] { border-top: 1px solid var(--border); padding-top: var(--shell-section-terminal-padding, 16px); } /* FMV-SHELL-PHASE-1X-FOUNDATION-1 — explicit terminal-section attribute hook for the operator-app FMV shells. Mirrors the border-top + padding-top treatment from the structural rules above so terminal-ness is selectable independently of sibling ordering. margin-top is intentionally NOT set here — vertical rhythm between adjacent sections continues to be owned by the structural `+ .fmv-shell-section` rules above. This preserves the existing first-section behaviour (no top margin) even if a future surface marks its first shell-section as terminal. Visual no-op on currently-shipped surfaces: every element carrying `data-shell-section-terminal` is the same element already matched by the structural border/padding rule above, producing identical declarations. */ .fmv-shell-section[data-shell-section-terminal] { border-top: 1px solid var(--border); padding-top: var(--shell-section-terminal-padding, 16px); } /* DESIGN-ALIGN-RECEIPT-ACTION-DENSITY-1 — narrow grouped action panel for the rip-sheet commit receipt's bottom-of-page action area. Adapts the inspected mockups' button-grouping pattern (mockup provenance unverified — see docs/CLAUDE_DESIGN_PRODUCTION_ALIGNMENT_AUDIT.md Provenance note). Replaces a single 7-button wide row with three small labelled clusters (primary / secondary / admin) so the operator's most-frequent next step is visually distinct from review and admin/exit paths. Reuses existing [data-theme] tokens (--border, --text-muted); no new tokens. Scoped to the receipt surface only — does not change the more compact .form-actions rows used elsewhere on the same page (dry-run confirm-live form, correction-handoff form, PO allocation follow-up). */ .receipt-action-panel { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } .receipt-action-group { margin-bottom: 16px; } .receipt-action-group:last-child { margin-bottom: 0; } .receipt-action-group-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; } .receipt-action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .receipt-action-subtext { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; } /* DESIGN-ALIGN-COMMIT-DETAIL-FACT-GRID-1 — narrow 3-column fact-grid layout for compact metadata blocks. Adapts the card-detail mockup's fact-grid pattern (mockup provenance unverified — see docs/CLAUDE_DESIGN_PRODUCTION_ALIGNMENT_AUDIT.md Provenance note). First production target is the Commit metadata block on /ui/intake-history/{commit_id}. Reuses the existing [data-theme] tokens (--bg-input, --border, --text-muted, --text-primary); no new tokens. Responsive collapse: 3 → 2 columns at <=720px, 2 → 1 column at <=480px. .fact-grid-value uses overflow-wrap:anywhere so long IDs/ hashes/UUIDs don't overflow the cell. */ .fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; } .fact-grid-cell { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; min-width: 0; } .fact-grid-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .fact-grid-value { font-size: 13px; color: var(--text-primary); margin-top: 4px; word-break: break-all; overflow-wrap: anywhere; } @media (max-width: 720px) { .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .fact-grid { grid-template-columns: 1fr; } } /* DESIGN-ALIGN-CSS-CARD-CLASSES-1 — DEFERRED definitions (intentionally NOT defined in this batch): .card — bare `
      ` is used 100+ times across templates with no consistent inline-style baseline. Defining it would add background+border to every existing use — a meaningful visual change beyond the "same visual output, less scattered styling" intent of this slice. Defer to a follow-on slice that explicitly approves the visual change. .status-warn — currently render as semantic-only markers .status-ok with no consistent inline border-left or .status-error background-tint pattern. Defining them would ADD visual cues that don't exist today (and that the audit's governance-conflict list explicitly warns about: changing FMV-state palette semantics could obscure operator triage). Defer to a follow-on slice that aligns the intended status-emphasis visual with operator-workflow color contracts. Documented here so future readers see the deliberate scope limit. */ /* ── Messages ────────────────────────────────────────────────── */ .msg { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px; } .msg-error { background: var(--error); color: #fff; } .msg-success { background: var(--success); color: #fff; } /* ── Selected card panel (Add Item anchor) ───────────────────── */ .selected-card-panel { background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; } .selected-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .selected-card-name { font-size: 18px; font-weight: 600; } .selected-card-meta { font-size: 13px; color: var(--text-secondary); } .selected-card-change { font-size: 12px; color: var(--text-muted); } .selected-card-change:hover { color: var(--accent); } /* ── Field hints (inline guidance below inputs) ──────────────── */ .field-hint { font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } /* ── Flow context (cross-page step guidance) ─────────────────── */ .flow-context { background: var(--bg-card); border: 1px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 4px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); } /* ── Detail ──────────────────────────────────────────────────── */ .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-bottom: 24px; } .detail-item label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; } .detail-item .val { font-size: 14px; } .snapshot-toggle { cursor: pointer; color: var(--accent); font-size: 13px; margin-bottom: 8px; } .snapshot-pre { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; max-height: 400px; overflow-y: auto; display: none; } .snapshot-pre.open { display: block; } /* ── Filters ─────────────────────────────────────────────────── */ .filter-primary { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 4px; } .filter-primary .form-group { margin-bottom: 0; } .filter-primary input, .filter-primary select { width: 120px; padding: 6px 8px; font-size: 12px; } .filter-primary .filter-wide { width: 180px; } .filter-actions { display: flex; gap: 6px; align-self: end; } .filter-secondary { display: flex; gap: 16px; margin-bottom: 12px; /* UIRECON-RESPONSIVE-AUDIT (BOX-233) — wrap the four ``
      `` filter sections (Storage / Acquisition / etc.) so they reflow at narrow widths instead of overflowing horizontally. Token-free additive. */ flex-wrap: wrap; row-gap: 12px; } .filter-secondary details { flex: 1; } .filter-section-label { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0; } .filter-section-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .filter-section-fields .form-group { margin-bottom: 0; } .filter-section-fields input, .filter-section-fields select { width: 110px; padding: 5px 7px; font-size: 11px; } .filter-section-fields label { font-size: 10px; } /* ── Pagination ──────────────────────────────────────────────── */ .pagination { display: flex; gap: 8px; margin-top: 16px; align-items: center; font-size: 13px; color: var(--text-secondary); } /* ── Theme toggle ────────────────────────────────────────────── */ /* Batch 3: visual-weight bump for discoverability. Operator feedback 2026-04-13 flagged the toggle as "still hidden at the bottom of screen." Remains in the sidebar footer (no IA change) but now reads as a deliberate affordance rather than a glyph. */ .theme-toggle { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 7px 12px; color: var(--text-primary); cursor: pointer; font-size: 18px; line-height: 1; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .theme-toggle:hover { color: var(--text-primary); border-color: var(--accent); background: var(--bg-secondary); } /* Show sun in dark mode, moon in light mode */ [data-theme="dark"] .theme-icon-light { display: inline; } [data-theme="dark"] .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-dark { display: inline; } /* ── Section headings ────────────────────────────────────────── */ .section-title { font-size: 14px; font-weight: 600; margin: 20px 0 10px; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding-bottom: 4px; } /* ── Badge ────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 500; } .badge-dup { background: var(--warning); color: #000; } .badge-active { background: var(--success); color: #fff; } .badge-missing { background: var(--error); color: #fff; } .badge-unresolved { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } .badge-mapped { background: var(--accent); color: #fff; } .badge-unmapped { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } /* ── Section panels (set detail) ─────────────────────────────── */ .section-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; } .section-panel .section-title { margin-top: 0; } /* ── Compact table variant ───────────────────────────────────── */ table.compact td { padding: 5px 10px; font-size: 12px; } table.compact th { padding: 5px 10px; } /* SETS-SCREEN-DESIGN-ALIGNMENT-2B — set-detail page shell. Adds the Design-aligned breadcrumb + identity header + KPI strip + primary actions on top of the existing 866-line detail page. The legacy hero `.set-card` and 18+ section panels below remain intact. */ .set-detail-page { min-width: 0; } .set-detail-breadcrumb { font-size: 12px; color: var(--ink-faint, var(--text-muted)); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .set-detail-breadcrumb a { color: var(--ink-dim, var(--text-secondary)); text-decoration: none; /* UIRECON-INTAKEHUB (BOX-226) — animate hover/focus colour transition so keyboard nav + mouse hover read as the same interaction. Mirrors the BOX-225 dashboard rail-action vocabulary on a primitive every set-detail / per-set worklist / intake-hub page already consumes. */ transition: color 120ms ease; } .set-detail-breadcrumb a:hover { color: var(--accent); } /* UIRECON-INTAKEHUB (BOX-226) — keyboard-accessible focus ring on every breadcrumb anchor. The intake hub uses the shipped ``.set-detail-breadcrumb`` as its primary back-anchor, and the same primitive is reused by the per-set + per-worklist surfaces shipped under BOX-209 → BOX-215, so this single rule keyboard-anchors the breadcrumb across every operator- facing page that mounts it. Token-driven; no palette change. */ .set-detail-breadcrumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; color: var(--accent); } .set-detail-breadcrumb-sep { color: var(--ink-faint, var(--text-muted)); user-select: none; } .set-detail-breadcrumb-current { color: var(--ink, var(--text-primary)); font-weight: 500; } .set-detail-header { padding: 22px 24px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; } .set-detail-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .set-detail-title { font-size: 26px; font-weight: 600; color: var(--ink, var(--text-primary)); margin: 0; letter-spacing: -0.005em; line-height: 1.15; } .set-detail-subtitle { font-size: 13px; color: var(--ink-dim, var(--text-secondary)); } .set-detail-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; } @media (max-width: 760px) { .set-detail-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .set-detail-kpi { background: var(--surface-2, var(--bg-secondary)); border: 1px solid var(--border); border-radius: var(--radius-sm, 5px); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .set-detail-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint, var(--text-muted)); } .set-detail-kpi-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink, var(--text-primary)); line-height: 1.1; } .set-detail-kpi-value-empty { color: var(--ink-faint, var(--text-muted)); font-size: 14px; font-weight: 500; } .set-detail-kpi-sub { font-size: 11px; color: var(--ink-dim, var(--text-secondary)); } .set-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* UIRECON-SETDETAIL (BOX-228) — narrow mode-tab visual polish on the single mode-control surface (the ``set-detail-taxonomy-mode-summary``