/* Hunt desk (member Overview tab). New surface, new file per the design
   system's precedence (docs/design/DESIGN-SYSTEM.md): tokens only, spacing on
   the 4px scale, every state, dark mode inherited from site/member-tokens.css.
   Class prefix `hd-` keeps this file's selectors from ever matching the
   retired `.overview-*` rules still shipping in site/member.css. */

.hunt-desk { max-width: 1400px; }

/* ---- heading ------------------------------------------------------------ */
.hd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin: 0 0 var(--space-5); flex-wrap: wrap; }
.hd-head h2 { margin: var(--space-1) 0 var(--space-2); font-size: clamp(28px, 4vw, 44px); line-height: var(--leading-flat); max-width: 18ch; }
.hd-head-accent { background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hd-head p:not(.eyebrow) { margin: 0; max-width: 58ch; color: var(--body); }
.hd-head-actions { display: flex; gap: var(--space-3); flex: 0 0 auto; flex-wrap: wrap; }

/* ---- stat tiles (row 1) -------------------------------------------------- */
.hd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
@media (min-width: 640px) { .hd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Capped rather than repeat(5, 1fr): on a wide viewport an uncapped column
   stretches each tile across the full row width, wasting the extra space
   inside the tile instead of leaving it as margin. */
@media (min-width: 1100px) { .hd-tiles { grid-template-columns: repeat(5, minmax(180px, 260px)); justify-content: start; } }

.hd-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--border-strong) solid var(--border-control); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--card1), var(--card2)); box-shadow: var(--elev-2); min-width: 0; }
/* A tile that is a call to action (the eBay reconnect/connect prompt) is an
   <a> with this same class, not a <div> -- reset the browser's default link
   styling and add the shared base-interactive-states treatment (Section 9.0)
   instead of a bespoke one. */
.hd-tile--link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color var(--duration-2) var(--ease-standard), background-color var(--duration-2) var(--ease-standard); }
.hd-tile--link:hover { border-color: var(--accent); background: linear-gradient(180deg, var(--card1-hi), var(--card2-hi)); }
.hd-tile__label { margin: 0; font: 700 var(--font-size-100)/var(--leading-tight) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hd-tile__figure { margin: 0; font: 800 var(--font-size-700)/var(--leading-tight) var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.hd-tile__figure small { display: block; font: 700 var(--font-size-300)/var(--leading-snug) var(--font-sans); color: var(--muted); margin-top: var(--space-1); }
.hd-tile__change { margin: 0; font: 700 var(--font-size-400)/var(--leading-snug) var(--font-sans); color: var(--status-neutral); }
.hd-tile__change.is-up { color: var(--status-up); }
.hd-tile__change.is-down { color: var(--status-down); }
.hd-tile__change.is-empty { color: var(--muted); font-weight: 400; font-family: var(--font-sans); }
.hd-tile__meta { margin: 0; font: 400 var(--font-size-200)/var(--leading-snug) var(--font-sans); color: var(--muted); }

/* Skeleton parity (docs/design/DESIGN-SYSTEM.md 9.15): each bar is sized to
   the line it stands in for (--font-size-*/--leading-* above, rounded up to
   the nearest even pixel) so a resolved tile never changes height. */
.hd-tile--skeleton .hd-tile__label,
.hd-tile--skeleton .hd-tile__figure,
.hd-tile--skeleton .hd-tile__change { border-radius: var(--radius-xs); color: transparent; background: linear-gradient(105deg, var(--well) 15%, var(--card1-hi) 42%, var(--well) 68%); background-size: 220% 100%; animation: member-shimmer var(--duration-ambient) ease-in-out infinite; }
.hd-tile--skeleton .hd-tile__label { width: 64%; height: 13px; }
.hd-tile--skeleton .hd-tile__figure { width: 82%; height: 28px; }
/* Portfolio value is the only tile with a figureNote (docs/design/DESIGN-SYSTEM.md
   9.8 "shows the denominator") under its figure -- one taller shimmer block
   stands in for both lines rather than nesting a second bar. */
.hd-tile--skeleton-note .hd-tile__figure { height: 50px; }
.hd-tile--skeleton .hd-tile__change { width: 48%; height: 19px; }

/* ---- budget line --------------------------------------------------------- */
.hd-budget { margin: 0 0 var(--space-5); padding: var(--space-2) var(--space-4); border: var(--border-hairline) dashed var(--border-dash); border-radius: var(--radius-sm); background: var(--well); color: var(--body); font: 400 var(--font-size-500)/var(--leading-snug) var(--font-sans); }
.hd-budget strong { color: var(--text); font-weight: 700; }

/* ---- two-column row (feed / timeline) ------------------------------------ */
.hd-rows2 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0 0 var(--space-5); align-items: start; }
@media (min-width: 1100px) { .hd-rows2 { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.hd-main { display: grid; gap: var(--space-4); min-width: 0; }
.hd-main .hd-row3 { margin: 0; grid-template-columns: 1fr; }

.hd-panel { min-width: 0; border: var(--border-strong) solid var(--outline); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card1), var(--card2)); box-shadow: var(--elev-3), var(--elev-inset); padding: clamp(var(--space-5), 3vw, var(--space-6)); }
.hd-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); flex-wrap: wrap; }
.hd-panel-head h3 { margin: var(--space-1) 0 0; font-size: var(--font-size-600); line-height: var(--leading-snug); }
.hd-panel-head .muted { margin: 0; }

/* ---- live opportunities feed ---------------------------------------------- */
.hd-feed-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hd-feed-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); background: var(--well); }
.hd-feed-art { width: 64px; aspect-ratio: 5 / 7; border-radius: var(--radius-sm); overflow: hidden; background: var(--card2); display: flex; align-items: center; justify-content: center; }
.hd-feed-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-feed-art-img-empty { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--card2); border: var(--border-strong) dashed var(--border-control); border-radius: inherit; color: var(--muted); }
.hd-feed-art-img-empty svg { width: 36%; height: 36%; }
.hd-feed-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hd-feed-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.hd-feed-identity strong { font-size: var(--font-size-500); line-height: var(--leading-snug); color: var(--text); overflow-wrap: anywhere; }
.hd-feed-identity span { font: 700 var(--font-size-200)/var(--leading-tight) var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.hd-feed-prices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hd-price-box { display: inline-flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); }
.hd-price-box__eyebrow { font: 700 var(--font-size-100)/var(--leading-tight) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.hd-price-box__value { font: 700 var(--font-size-500)/var(--leading-tight) var(--font-mono); }
.hd-price-box--live { border: var(--border-strong) solid var(--data-live); }
.hd-price-box--live .hd-price-box__eyebrow, .hd-price-box--live .hd-price-box__value { color: var(--data-live); }
.hd-price-box--guide { border: var(--border-strong) dashed var(--data-benchmark); }
.hd-price-box--guide .hd-price-box__eyebrow, .hd-price-box--guide .hd-price-box__value { color: var(--data-benchmark); }

.hd-feed-stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; font: 400 var(--font-size-300)/var(--leading-snug) var(--font-sans); color: var(--body); }
.hd-feed-stats .is-discount { color: var(--status-up); font-weight: 700; }

.hd-checklist { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.hd-checklist li { display: inline-flex; align-items: center; gap: var(--space-1); font: 400 var(--font-size-200)/var(--leading-tight) var(--font-sans); padding: var(--space-1) var(--space-1); border-radius: var(--radius-xs); border: var(--border-hairline) solid var(--border-control); color: var(--muted); }
.hd-checklist li .ps-glyph { font-size: var(--font-size-500); font-weight: 900; line-height: 1; }
.hd-checklist li.is-yes { border-color: var(--status-up); color: var(--status-up); }
.hd-checklist li.is-no { border-color: var(--status-down); color: var(--status-down); }
.hd-checklist li.is-unknown { border-style: dashed; }

.hd-feed-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

.hd-empty { border: var(--border-strong) dashed var(--border-control); border-radius: var(--radius-md); padding: var(--space-6); text-align: left; }
.hd-empty p { margin: var(--space-1) 0 0; color: var(--body); font-size: var(--font-size-300); }
.hd-empty strong { display: block; font-size: var(--font-size-600); color: var(--text); }

.hd-feed-skeleton-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); }
.hd-feed-skeleton-row .hd-feed-art, .hd-feed-skeleton-row .hd-skeleton-line { background: linear-gradient(105deg, var(--well) 15%, var(--card1-hi) 42%, var(--well) 68%); background-size: 220% 100%; animation: member-shimmer var(--duration-ambient) ease-in-out infinite; border: none; }
.hd-skeleton-line { height: 14px; border-radius: var(--radius-xs); margin: 4px 0; }
.hd-skeleton-line--wide { width: 70%; }
.hd-skeleton-line--mid { width: 45%; }
.hd-skeleton-line--short { width: 25%; }

/* ---- alerts / activity timeline ------------------------------------------ */
.hd-timeline-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hd-timeline-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.hd-timeline-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--accent); margin-top: 6px; }
.hd-timeline-row.kind-sale .hd-timeline-dot { background: var(--status-up); }
.hd-timeline-row.kind-alert .hd-timeline-dot { background: var(--data-live); }
.hd-timeline-row.kind-watch .hd-timeline-dot { background: var(--accent); }
.hd-timeline-row.kind-card .hd-timeline-dot { background: var(--status-info); }
.hd-timeline-copy { min-width: 0; }
.hd-timeline-copy p { margin: 0; font-size: var(--font-size-400); color: var(--text); overflow-wrap: anywhere; }
.hd-timeline-copy time { display: block; font: 400 var(--font-size-200)/var(--leading-tight) var(--font-mono); color: var(--muted); margin-top: var(--space-1); }

/* ---- row 3: recently added / top movers ----------------------------------- */
.hd-row3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0 0 var(--space-5); }
@media (min-width: 900px) { .hd-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hd-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x proximity; }
/* Newest to your stack / Top movers: below 640px stays the clipped
   horizontal strip above (thumb-scrollable, one hand); at 640px and up
   there is room to lay out as many tiles as fit instead of clipping, up to
   what the JS already slices (overviewView's `recent` at 10, `movers` at
   8). `auto-fit`, not `auto-fill`: auto-fill reserves a full row of empty
   128px column tracks up to the panel width even when there are only a
   few cards to show, which is exactly the "randomly 4 cards" half-empty
   panel the owner reported on Top movers (2026-09-23) -- auto-fit collapses
   those empty tracks so the `1fr` on the real cards fills the row instead. */
@media (min-width: 640px) {
  .hd-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); overflow-x: visible; }
}
.hd-card { scroll-snap-align: start; flex: 0 0 auto; width: 128px; display: flex; flex-direction: column; gap: var(--space-1); }
/* Tile image rule (2026-09-27): the same art box as the Collection grid and
   Discover tiles (--art-box-aspect, the PSA template's 0.6072), so a slab
   fills the tile edge to edge instead of losing its top and bottom to a 5:7
   box. Catalog card art fills the box (cover), as on the Collection grid; a
   listing photo renders as the contained .ps-art-photo (site/slab.css). */
.hd-card-art { position: relative; width: 128px; aspect-ratio: var(--art-box-aspect); border-radius: var(--radius-sm); background: var(--card2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hd-card-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-card-art > .ps-slab { flex: 0 0 auto; width: min(100%, calc(100% * var(--slab-tpl-aspect, var(--art-box-aspect)) / var(--art-box-aspect))); }
.hd-card-art-img-empty { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--card2); border: var(--border-strong) dashed var(--border-control); border-radius: inherit; color: var(--muted); }
.hd-card-art-img-empty svg { width: 36%; height: 36%; }
/* Title max two lines with ellipsis (design spec 2026-09-23 item 8). */
.hd-card-name { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 700 var(--font-size-300)/var(--leading-snug) var(--font-sans); color: var(--text); overflow: hidden; }
/* "Set · #Number" under a cleaned Collectr pipe-title (displayTitle(),
   site/member.js) or a catalog-bound card's own console_name. One line,
   truncated -- it is context for hd-card-name, never the primary label. */
.hd-card-subtitle { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--font-size-200)/var(--leading-tight) var(--font-sans); color: var(--muted); }
/* Same content shape as .hd-tile__change ("+$8.00 (7d)") -- same fix: body face, not mono. */
.hd-card-value { margin: 0; font: 700 var(--font-size-300)/var(--leading-snug) var(--font-sans); color: var(--body); }
.hd-card-value.is-up { color: var(--status-up); }
.hd-card-value.is-down { color: var(--status-down); }
/* Top movers "why included" (e.g. "3 price points") / Recently added source
   tag share this treatment -- small, muted, last line of the tile. */
.hd-card-meta, .hd-card-source { margin: 0; font: 400 var(--font-size-100)/var(--leading-tight) var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* At >=640px .hd-strip becomes a grid whose auto-fit tracks stretch to fill
   the row (comment above), but .hd-card's own width:128px above still wins
   the cascade at equal specificity -- overriding it here (after, same
   specificity, later wins) is what actually lets a card fill its track
   instead of sitting 128px wide inside a wider one, which was the residual
   half-empty-panel gap measured after the auto-fit fix alone (2 movers:
   288px track, 128px card, 160px empty). Art is capped, not unbounded: two
   movers alone would otherwise blow a single slab up past 280px. */
@media (min-width: 640px) {
  .hd-card { width: auto; }
  .hd-card-art { width: 100%; max-width: 200px; margin: 0 auto; }
}

.hd-card--skeleton .hd-card-art { background: linear-gradient(105deg, var(--well) 15%, var(--card1-hi) 42%, var(--well) 68%); background-size: 220% 100%; animation: member-shimmer var(--duration-ambient) ease-in-out infinite; border: none; }
.hd-card--skeleton .hd-card-name, .hd-card--skeleton .hd-card-value { height: 12px; border-radius: var(--radius-xs); background: var(--card1-hi); color: transparent; }

/* "Only N of your cards have enough 7-day price data" (Top movers shortfall
   note, owner report 2026-09-23) -- a sibling of #hd-movers-body (.hd-strip,
   the auto-fit grid), never a child of it: a full-span grid child defeats
   auto-fit's own empty-track collapse (site/overview.css .hd-strip comment). */
#hd-movers-note { margin: 0 0 var(--space-3); }

/* ---- Ask Ash prompt bar ---------------------------------------------------- */
.hd-ask { border: var(--border-strong) solid var(--outline); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card1), var(--card2)); box-shadow: var(--elev-3), var(--elev-inset); padding: clamp(var(--space-5), 3vw, var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3); }
.hd-ask-head h3 { margin: var(--space-1) 0 0; font-size: var(--font-size-600); }
/* .hd-ask .hd-ask-form (two classes, not one) deliberately outweighs the
   sitewide `.live-member form { flex-direction:column; gap:18px }` rule
   (site/member.css:45, one class + one type = higher specificity than a
   single class alone) -- this composer is the one form on the page that
   stays a single row. */
.hd-ask .hd-ask-form { display: flex; flex-direction: row; gap: var(--space-2); align-items: center; padding: var(--space-2); border: var(--border-strong) solid var(--border-control); border-radius: var(--radius-md); background: var(--well); transition: border-color var(--duration-2) var(--ease-standard), box-shadow var(--duration-2) var(--ease-standard); }
.hd-ask .hd-ask-form:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.hd-ask-form input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: var(--font-size-500); min-height: var(--control-height); padding-inline: var(--space-2); }
.hd-ask-form input:focus { outline: 0; }
.hd-ask-form input::placeholder { color: var(--muted); }
.hd-ask-form button { flex: 0 0 auto; width: var(--control-height); min-height: var(--control-height); }
.hd-ask-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hd-ask-chip { display: inline-flex; align-items: center; min-height: 34px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); border: var(--border-hairline) solid var(--border-control); background: var(--well); color: var(--body); font: 700 var(--font-size-400)/var(--leading-tight) var(--font-sans); cursor: pointer; transition: border-color var(--duration-2) var(--ease-standard), background-color var(--duration-2) var(--ease-standard), color var(--duration-2) var(--ease-standard); }
.hd-ask-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--card1-hi); color: var(--text); }
.hd-ask-chip:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.hd-ask-chip:active:not(:disabled) { transform: translateY(1px); }
.hd-ask-chip:disabled { opacity: .5; cursor: not-allowed; }
.hd-ask-chip--skeleton { color: transparent; background: linear-gradient(105deg, var(--well) 15%, var(--card1-hi) 42%, var(--well) 68%); background-size: 220% 100%; animation: member-shimmer var(--duration-ambient) ease-in-out infinite; border-color: var(--border); width: 180px; }

/* ---- shared focus-visible for plain buttons/links inside this screen ------ */
.hunt-desk button:focus-visible, .hunt-desk a:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-color: var(--accent); }

/* ---- Portfolio panel (value over time, Collectr-style) ------------------- */
.hd-portfolio { border: var(--border-strong) solid var(--outline); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card1), var(--card2)); box-shadow: var(--elev-3), var(--elev-inset); padding: clamp(var(--space-5), 3vw, var(--space-6)); margin: 0 0 var(--space-5); }
.hd-portfolio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.hd-portfolio-headline { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hd-portfolio-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0; }
.hd-portfolio-figure { font: 800 clamp(26px, 3.6vw, 42px)/var(--leading-flat) var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.hd-portfolio-cost { font: 700 var(--font-size-400)/var(--leading-snug) var(--font-sans); color: var(--muted); }
.hd-portfolio-change { margin: 0; font: 700 var(--font-size-500)/var(--leading-snug) var(--font-sans); color: var(--status-neutral); }
.hd-portfolio-change.is-up { color: var(--status-up); }
.hd-portfolio-change.is-down { color: var(--status-down); }
.hd-portfolio-change.is-empty { color: var(--muted); font-weight: 400; }
.hd-portfolio-range.ps-tabs--segmented { margin: 0; flex: 0 0 auto; }

.hd-portfolio-body { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .hd-portfolio-body { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); } }
.hd-portfolio-chart { min-width: 0; }
.hd-portfolio-chart .muted { margin: var(--space-6) 0; text-align: center; }

.hd-portfolio-breakdown { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); background: var(--well); }
.hd-portfolio-breakdown .eyebrow { margin: 0; }
.hd-breakdown-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--card2); }
.hd-breakdown-seg { display: block; height: 100%; }
.hd-breakdown-seg--graded { background: var(--accent); }
.hd-breakdown-seg--raw { background: var(--data-benchmark); }
.hd-breakdown-seg--listed { background: var(--data-live); }
.hd-breakdown-seg--sold { background: var(--status-up); }
.hd-breakdown-rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hd-breakdown-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); font: 400 var(--font-size-300)/var(--leading-snug) var(--font-sans); color: var(--body); }
.hd-breakdown-row--empty { grid-template-columns: 1fr; text-align: center; padding: var(--space-2) 0; }
.hd-breakdown-swatch { width: 10px; height: 10px; border-radius: var(--radius-circle); background: var(--muted); }
.hd-breakdown-row--graded .hd-breakdown-swatch { background: var(--accent); }
.hd-breakdown-row--raw .hd-breakdown-swatch { background: var(--data-benchmark); }
.hd-breakdown-row--listed .hd-breakdown-swatch { background: var(--data-live); }
.hd-breakdown-row--sold .hd-breakdown-swatch { background: var(--status-up); }
.hd-breakdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-breakdown-count { color: var(--muted); font: 700 var(--font-size-200)/var(--leading-tight) var(--font-mono); }
.hd-breakdown-pct { min-width: 3.4em; text-align: right; font-weight: 700; color: var(--text); }

/* Skeleton parity while GET /api/portfolio/history is in flight -- reuses
   the same member-shimmer keyframe every other Overview skeleton in this
   file uses, never a bespoke animation. */
.hd-portfolio[aria-busy="true"] .hd-portfolio-figure,
.hd-portfolio[aria-busy="true"] .hd-portfolio-chart { border-radius: var(--radius-xs); color: transparent; background: linear-gradient(105deg, var(--well) 15%, var(--card1-hi) 42%, var(--well) 68%); background-size: 220% 100%; animation: member-shimmer var(--duration-ambient) ease-in-out infinite; }
.hd-portfolio[aria-busy="true"] .hd-portfolio-figure { display: inline-block; width: 10ch; height: 42px; }
.hd-portfolio[aria-busy="true"] .hd-portfolio-chart { height: 220px; }
.hd-portfolio[aria-busy="true"] .hd-portfolio-chart .muted { display: none; }

@media (max-width: 639px) {
  .hd-portfolio-head { flex-direction: column; align-items: stretch; }
}

/* ---- reduced motion: every animated element in this file goes flat ------- */
@media (prefers-reduced-motion: reduce) {
  .hunt-desk .hd-tile--skeleton .hd-tile__label,
  .hunt-desk .hd-tile--skeleton .hd-tile__figure,
  .hunt-desk .hd-tile--skeleton .hd-tile__change,
  .hunt-desk .hd-feed-skeleton-row .hd-feed-art,
  .hunt-desk .hd-feed-skeleton-row .hd-skeleton-line,
  .hunt-desk .hd-card--skeleton .hd-card-art,
  .hunt-desk .hd-ask-chip--skeleton,
  .hunt-desk .hd-portfolio[aria-busy="true"] .hd-portfolio-figure,
  .hunt-desk .hd-portfolio[aria-busy="true"] .hd-portfolio-chart { animation: none; background: var(--card1-hi); }
}

/* ---- narrow / mobile --------------------------------------------------- */
/* Pending reads are honest, bounded statuses, not invented charts or cards.
   Keep the state class for independent completion/watchdog bookkeeping. */
.hunt-desk .hd-tile--skeleton .hd-tile__label,
.hunt-desk .hd-tile--skeleton .hd-tile__figure { width:auto; height:auto; background:none; animation:none; color:var(--muted); }
.hunt-desk .hd-tile--skeleton .hd-tile__figure { font-size:calc(14px * var(--type-scale,1)); font-weight:500; }
.hunt-desk .hd-portfolio[aria-busy="true"] .hd-portfolio-figure { width:auto; height:auto; background:none; animation:none; color:var(--muted); font-size:calc(14px * var(--type-scale,1)); font-weight:500; }
.hunt-desk .hd-portfolio[aria-busy="true"] .hd-portfolio-chart { height:auto; background:none; animation:none; color:var(--muted); }
.hunt-desk .hd-portfolio[aria-busy="true"] .hd-portfolio-breakdown { display:none; }
.hunt-desk .hd-portfolio[aria-busy="true"] .hd-portfolio-body { grid-template-columns:1fr; }
.hunt-desk .hd-strip > .module-pending { width:100%; }
@media (max-width: 639px) {
  .hd-feed-row { grid-template-columns: 48px minmax(0, 1fr); }
  .hd-feed-art { width: 48px; }
  .hd-head-actions { width: 100%; }
  .hd-head-actions > * { flex: 1 1 auto; }
}

.hd-head + .hd-ask, .hd-ending-soon + .hd-ask { margin: 0 0 var(--space-5); }

/* "Ending soon" panel (owner report 2026-09-23: "probably also overview as
   highlights for things ending in 12 hours or less") -- above every other
   panel, same .hd-panel treatment .hd-feed/.hd-recent/.hd-movers already
   use, so it reads as a peer panel and not a second header. */
.hd-ending-soon { margin: 0 0 var(--space-5); }
/* The result count is unknown: two pretend slab rows made this panel jump
   by 150px on an empty or unavailable result. Keep transient/terminal copy
   compact and equal-sized; real auctions alone expand into a list. */
.hd-ending-soon-status { margin: 0; color: var(--muted); font-size: var(--font-size-500); line-height: var(--leading-snug); }

/* Actual marketplace listing photos only: this row never borrows catalog art
   or fabricates a slab. The contained image preserves the seller's complete
   photo (including slab/cert edges) inside a reserved, stable thumbnail box. */
.hd-ending-soon .hd-ending-soon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.hd-ending-soon-listing { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-width: 0; min-height: 72px; color: inherit; text-decoration: none; }
.hd-ending-soon-listing:focus-visible { outline: 0; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.hd-ending-soon-row .ps-signal-row__art { width: 52px; aspect-ratio: 4 / 5; background: var(--card2); }
.hd-ending-soon-row .ps-signal-row__art-img { object-fit: contain; }
.hd-ending-soon-photo--empty { color: var(--muted); }
.hd-ending-soon-copy { display: grid; justify-items: start; gap: var(--space-1); min-width: 0; }
.hd-ending-soon-row .ps-signal-row__title { width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: var(--leading-snug); }
.hd-ending-soon-meta { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--space-3); }

@media (max-width: 639px) {
  .hd-ending-soon .hd-ending-soon-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .hd-ending-soon-listing { grid-template-columns: 48px minmax(0, 1fr); min-height: 64px; }
  .hd-ending-soon-row .ps-signal-row__art { width: 48px; }
  .hd-ending-soon-meta { justify-content: space-between; margin-left: calc(48px + var(--space-3)); }
}