/* --------------------------------------------------------------------------- detail.css - a ROUTE stylesheet, not part of the always-loaded core. Detail-page furniture: the hero, the fact list, the pricing panel, the sparkline, the advertising label and the source link. NOT the breadcrumb - that moved to breadcrumb.css in #847, because a theme page renders a trail and nothing else here, and its own header says what that cost. Loaded by: /sets/{SetNumber}, /minifigs/{FigNumber}, /parts/{PartNumber}, /collection/{Id} - and by /dev/gallery, which renders everything. Linked from those pages' own markup (), so it arrives AFTER tokens/reset/app/components: at equal specificity a rule here beats the same selector in the core sheet, which reverses the order these rules had inside components.css. Why the split exists, and what a page that links the wrong set breaks, is in docs/architecture/performance-budgets.md. --------------------------------------------------------------------------- */ /* ================= Sparkline ================= A small inline trend line, not a chart library (design-system.md names none, and a sparkline does not need one). Sized to read at a glance rather than to be inspected. GLOBAL, NOT SCOPED, and that is the whole point of the rule sitting here. It lived in MarketPricesSection.razor.css until #475 - a scoped sheet, so every declaration carried that one component's own [b-xxxxxxxxxx] attribute. SetPricingSection renders the identical markup on the public /sets/{SetNumber} page and matched none of it: no stroke, no width, no height. The symptom was not a missing chart, which somebody would have reported - it was a tall blank void in the middle of the pricing stack, which reads as spacing. Guard: PricePanelLayoutTests. */ .bd-sparkline { display: block; width: 100%; height: 40px; } .bd-sparkline polyline { stroke: var(--bd-color-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* ================= Set-detail pricing panel ================= Issue #475. One card around everything the public /sets/{SetNumber} page says about money, so the page has a boundary between "facts about this set" and "what it has sold for". Before this the pricing content was eight sibling blocks in the page's own stack at one visual weight - two headline facts, a trend, computed statistics and raw evidence, all reading as one undifferentiated list. Only pricing gets a card. Boxing the identity block above it too would fight the page's deliberate simplicity: a page where everything is in a box is a page where nothing is grouped. */ .bd-price-panel { display: flex; flex-direction: column; gap: var(--bd-space-4); padding: var(--bd-space-4); border: 1px solid var(--bd-color-border); border-radius: var(--bd-radius-lg); background: var(--bd-color-section-surface); } /* Tier 1 - the two numbers a visitor scans for first, side by side once there is room and stacked when there is not. auto-fit + minmax, never a fixed count of plain 1fr columns, for two independent reasons. A bare 1fr track floors at its content's intrinsic width, so one long unbroken money string would widen the grid past the viewport - the exact shape NoHorizontalScrollSourceGuardTests sweeps these stylesheets for, and which it will not let this comment even spell out. And with auto-fit the column count stops being written down at all, which is what reserves the slot for RRP (#472, not built): the day a third figure arrives it is one more child element, not a re-layout of a shipped page. min(100%, 15rem) rather than a bare 15rem so the track's own minimum can never exceed the container it sits in - at 390px the panel's content box is narrower than 15rem once the shell and the panel's own padding are taken off, and a floor wider than the box is an overflow whatever the column count says. */ .bd-price-panel__headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--bd-space-4); } /* One figure: a quiet label over a promoted value. min-width: 0 because each figure is a grid item whose value is a long unbroken-ish string; without it the item cannot shrink below that string and the auto-fit arithmetic above is undone by its own contents. */ .bd-price-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* The value line wraps rather than overflowing - it is one localised string ("480.00 EUR - Near mint - sold 15/08/2026") that must not be split into parts, so the only place it can give is at its own spaces. */ .bd-price-figure__value { overflow-wrap: anywhere; } /* Advertising label on an affiliate price link (SourceLink.razor, which carries the reasoning). Built only from tokens that already have a documented contrast pair, so it adds no row to design-system.md's table. */ .bd-ad-label { display: inline-flex; align-items: center; flex: none; padding: 0 var(--bd-space-2); border: 1px solid var(--bd-color-border); border-radius: var(--bd-radius-sm); color: var(--bd-color-on-surface); font-family: var(--bd-font-body); font-weight: 600; font-size: var(--bd-type-label-size); line-height: var(--bd-type-label-line); letter-spacing: var(--bd-type-label-tracking); text-transform: uppercase; white-space: nowrap; } .bd-source-link { flex: none; } /* ========================================================================= The detail hero (issue #847) — the render and the facts as one grid. ONE COLUMN FIRST, TWO FROM 905px, which is the shell's own breakpoint so the hero splits exactly when the sidebar stops being a drawer. Mobile first is not a preference here: the MAUI heads render these components and ship to five stores, and a hero written two-column-first and narrowed in a max-width query renders two columns wherever query support is partial. The media and the facts are SIBLINGS OF ONE GRID rather than a picture with a paragraph under it — that is what makes the desktop layout a track change instead of a re-parenting, and re-parenting is the edit nobody makes when the time comes. min-width: 0 on both columns is not decoration. A grid item's default minimum is its content's intrinsic width, so one long unbroken set name or money string floors its whole track and widens the document instead of wrapping — the shape NoHorizontalScrollSourceGuardTests sweeps for one layout system over, and which no CI render can see. Guard: DetailPageLayoutTests. ========================================================================= */ .bd-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bd-space-5); align-items: start; } .bd-detail-hero__media { min-width: 0; } .bd-detail-hero__body { display: flex; flex-direction: column; gap: var(--bd-space-3); min-width: 0; } @media (min-width: 905px) { .bd-detail-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bd-space-6); } /* The render follows the reader down a page that is several screens long. Sticky rather than fixed: it stops at the bottom of its own column, so it can never overlap what comes after. */ .bd-detail-hero__media { position: sticky; top: var(--bd-space-4); } } /* The facts are a