/* BidHero — member / public UI (sidebar shell, cards, detail, prose).
 * Loaded only by the member layouts, after bidhero.css. DS tokens only. */
@layer reset, foundation, theme, semantic, component-tokens, layout, typography, components, utilities, app;

@layer app {
i.fa-solid, i.fa-regular { display: inline-block; width: 1.1em; text-align: center; flex: none; }

/* ---------- Top bar ---------- */
.bh-logo { flex: none; }
body { background: var(--color-background-primary); }
.bh-topbar { display: flex; align-items: center; gap: var(--space-lg); padding-inline: var(--space-xl); }
.bh-logo { --logo-lockup-emblem-size: 2rem; margin-right: var(--space-sm); }
@media (min-width: 769px) { .bh-topbar .bh-nav-links { flex: none; display: flex; align-items: center; gap: var(--space-xs); margin-left: 0; } }
.bh-nav-links .topbar-link { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-xs); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); }
.bh-nav-links .topbar-link.is-active { background: var(--color-brand-primary-soft); color: var(--color-brand-primary); }
.bh-nav-links .topbar-link i { font-size: .8em; }
.bh-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); }
.bh-topbar-right .button { white-space: nowrap; }
.bh-points-pill { white-space: nowrap; }
.bh-theme-toggle { color: var(--color-foreground-primary); }
.bh-logout-form { display: block; margin: 0; }
.bh-logout-form .dropdown-item { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.account-trigger-name { font-size: var(--font-size-sm); }
@media (max-width: 768px) { .bh-topbar { gap: var(--space-sm); padding-inline: var(--space-md); } }

/* ---------- Shell ---------- */
.bh-main { min-height: 60vh; padding-inline: var(--space-lg); }
.bh-shell { max-width: 69rem; margin: 0 auto; padding: var(--space-xl) 0 var(--space-3xl); display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.bh-content { min-width: 0; }
.bh-footer { margin-top: 0; }
.bh-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); flex-wrap: wrap; padding: var(--space-xl) var(--space-lg); font-size: var(--font-size-sm); }
.bh-footer-links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.bh-footer-links a, .bh-footer-copy { color: var(--color-foreground-secondary); }
@media (max-width: 860px) { .bh-shell { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---------- Sidebar ---------- */
.bh-side-title { margin: 0 0 var(--space-md); padding: 0 var(--space-md); font-family: var(--font-family-body, inherit); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-foreground-secondary); line-height: 1.2; }
.bh-side-nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
.bh-side-link { display: block; padding: .6875rem var(--space-md); border: 1px solid transparent; border-radius: var(--radius-lg); color: var(--color-foreground-secondary); font-size: var(--font-size-sm); line-height: 1.5; width: fit-content; min-width: 0; }
.bh-side-link:hover { color: var(--color-foreground-primary); }
.bh-side-link.is-active { background: var(--color-brand-primary-soft); border-color: var(--color-border-info, var(--color-brand-primary)); color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
@media (max-width: 860px) { .bh-side-nav { flex-direction: row; flex-wrap: wrap; } }

/* ---------- Page head ---------- */
.breadcrumbs>*+*::before { content: "\f054" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: .6em !important; }
.bh-content .breadcrumbs { font-size: var(--font-size-sm); margin: 0 0 var(--space-lg); color: var(--color-foreground-secondary); }
.bh-content .breadcrumbs a { color: var(--color-foreground-secondary); }
.bh-content .breadcrumbs [aria-current] { color: var(--color-foreground-primary); font-weight: var(--font-weight-semibold); }
.bh-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.bh-page-title { margin: 0; font-size: var(--font-size-2xl); line-height: 1.2; }
.bh-view-toggle { display: inline-flex; padding: var(--space-2xs); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); background: var(--color-surface-base); box-shadow: var(--shadow-xs, none); }
.bh-view-btn { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-foreground-secondary); cursor: pointer; }
.bh-view-btn.is-active { background: var(--color-brand-primary-soft); color: var(--color-brand-primary); }

/* ---------- Cards ---------- */
.bh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.bh-card { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs, var(--shadow-sm)); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); overflow: hidden; transform: none; }
.bh-card:hover { transform: none; border-color: var(--color-border-subtle); box-shadow: var(--shadow-sm); }
.bh-card-media { display: block; }
.bh-card-img, .bh-card-img-placeholder { width: 100%; height: 11.125rem; border-radius: var(--radius-xl); background: var(--color-background-secondary); object-fit: cover; display: block; }
.bh-card-img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0; }
.bh-card-img-placeholder.has-label { color: var(--color-foreground-disabled, var(--color-foreground-muted)); }
.bh-noimg i { font-size: 3.5rem; opacity: .35; }
.bh-noimg span { font-size: var(--font-size-xl); opacity: .5; font-family: var(--font-family-heading); }
.bh-card-body { padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.bh-card-badge { align-self: flex-start; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; max-width: 100%; }
.bh-card-badge i { margin-right: var(--space-2xs); }
.bh-card-title { margin: 0; font-size: 1rem; line-height: 1.25; }
.bh-card-title a { color: var(--color-foreground-primary); }
.bh-card-desc { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--color-foreground-secondary); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bh-card-foot { margin-top: auto; padding-top: var(--space-xs); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.bh-card-bid-label { display: block; font-size: var(--font-size-xs); text-transform: uppercase; color: var(--color-foreground-secondary); line-height: 1.2; }
.bh-card-price { display: block; padding: 0; margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: .04em; color: var(--color-brand-primary); line-height: 1.2; }
.bh-card .button { flex: none; }
/* The design-system badge has a fixed height; a long "Ends in 1164day(s) 13hour(s) 33min(s)" must wrap inside the card, so let the pill grow. */
.bh-card-countdown { margin: 0; font-variant-numeric: normal; color: inherit; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; align-items: flex-start; height: auto; max-height: none; padding-block: .25rem; border-radius: var(--radius-xl); }
.bh-card-countdown i { flex: none; margin-top: .15em; }
.bh-card-countdown .bh-cd-text { min-width: 0; }
.bh-card-badge.badge-warning { color: var(--color-utility-warning-bold, var(--color-feedback-warning)); }
.bh-card .button { min-height: 2.75rem; }

/* list view */
.bh-grid.is-list { grid-template-columns: 1fr; }
.bh-grid.is-list .bh-card { flex-direction: row; align-items: stretch; }
.bh-grid.is-list .bh-card-media { flex: 0 0 11rem; }
.bh-grid.is-list .bh-card-img, .bh-grid.is-list .bh-card-img-placeholder { height: 100%; min-height: 8rem; }
@media (max-width: 1020px) { .bh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bh-grid { grid-template-columns: 1fr; } .bh-grid.is-list .bh-card { flex-direction: column; } .bh-grid.is-list .bh-card-media { flex-basis: auto; } }

/* ---------- Empty ---------- */
.bh-content .empty-state { padding-block: var(--space-2xl); }
.bh-content .empty-state h4 { font-size: var(--font-size-xl); }

/* ---------- Prose pages (terms, proxy bidding, privacy) ---------- */
.bh-prose { max-width: 48rem; padding: var(--space-xl); background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs, var(--shadow-sm)); }
.bh-prose h1 { margin: 0 0 var(--space-xl); font-size: var(--font-size-2xl); }
.bh-prose p, .bh-prose li { color: var(--color-foreground-secondary); line-height: 1.7; margin: 0 0 var(--space-lg); }
.bh-prose ul { margin: 0 0 var(--space-xs); padding-left: var(--space-xl); }
.bh-prose li { margin: 0; line-height: 1.75; }
.bh-prose h4 { margin: var(--space-lg) 0 var(--space-xs); color: var(--color-brand-primary); }
.bh-prose-note { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-md); font-size: var(--font-size-sm); font-style: italic; margin-top: var(--space-xs); }
.bh-prose-note p { margin: 0; font-size: inherit; line-height: 1.5; }

/* ---------- Auth pages ---------- */
.bh-auth-wrap { background: var(--color-background-primary); flex-direction: column; justify-content: center; gap: var(--space-md); padding: var(--space-xl); }
.bh-auth-brand { display: flex; justify-content: center; margin-bottom: 0; }
.bh-auth-brand { --logo-lockup-emblem-size: 2.625rem; margin: 0 0 var(--space-xs); }
.bh-auth-card { max-width: 32rem; padding: var(--space-lg) var(--space-lg); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); }
.bh-auth-head { text-align: center; margin-bottom: var(--space-xl); }
.bh-auth-head h1 { margin: 0; font-size: var(--font-size-xl); line-height: 1.2; }
.bh-auth-head p { margin: 0; color: var(--color-foreground-secondary); font-size: var(--font-size-sm); }
.bh-auth-card .field { margin-bottom: var(--space-sm); }
.bh-auth-links { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-xl); }
.bh-auth-links a { color: var(--color-foreground-primary); }
.bh-auth-intro { color: var(--color-foreground-secondary); margin: 0 0 var(--space-lg); line-height: 1.5; }
.bh-auth-foot { font-size: var(--font-size-sm); color: var(--color-foreground-secondary); }
.bh-auth-foot a { color: var(--color-foreground-secondary); text-decoration: underline; }
.bh-ms-btn { border-radius: var(--radius-pill); }

/* ---------- Detail ---------- */
.bh-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 8fr); gap: var(--space-lg); align-items: start; margin-bottom: var(--space-lg); }
.bh-panel { background: var(--color-surface-base); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xs, var(--shadow-sm)); padding: var(--space-lg); }
.bh-panel h1, .bh-panel h2 { margin: 0 0 var(--space-md); }
.bh-detail-title { font-size: var(--font-size-2xl); }
.bh-detail-img { width: 100%; max-height: 22rem; min-height: 14rem; object-fit: contain; border: 0; background: transparent; border-radius: var(--radius-xl); }
.bh-detail-noimg { min-height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-foreground-muted); }
.bh-detail-noimg i { font-size: 7rem; opacity: .2; }
.bh-detail-noimg span { font-size: var(--font-size-3xl); opacity: .35; font-family: var(--font-family-heading); }
.bh-countdown-alert { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.bh-countdown-alert .bh-countdown { display: inline-flex; gap: var(--space-xs); margin: 0; color: inherit; }
.bh-countdown-alert .bh-countdown-unit { display: inline-flex; align-items: baseline; gap: 2px; }
.bh-countdown-alert .bh-countdown-num { display: inline; font-size: inherit; font-family: var(--font-family-mono); color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
.bh-countdown-alert .bh-countdown-label { text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--color-brand-primary); }
.bh-countdown-alert .bh-ended { font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); color: var(--color-brand-primary); }
.bh-stat-label { display: block; font-size: var(--font-size-xs); text-transform: uppercase; color: var(--color-foreground-secondary); }
.bh-bid-current { font-size: 2.5rem; letter-spacing: .06em; margin-bottom: var(--space-md); line-height: 1.2; }
.bh-bid-row-line { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.bh-bid-box { border-top: 1px solid var(--color-border-subtle); padding: var(--space-lg); }
.bh-bid-input { display: flex; gap: var(--space-sm); align-items: center; }
.bh-bid-input .input { flex: 1; }
.bh-info-grid { margin-top: var(--space-md); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; align-items: center; gap: var(--space-2xl); font-size: var(--font-size-sm); }
.bh-info-label { text-transform: uppercase; font-size: var(--font-size-xs); color: var(--color-foreground-secondary); }
.bh-detail-thumbs { margin-top: var(--space-sm); }
@media (max-width: 860px) { .bh-detail { grid-template-columns: 1fr; } }

/* ---------- Profile / tables ---------- */
.bh-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.bh-profile-grid .bh-panel h2 { font-size: var(--font-size-lg); margin-bottom: var(--space-xl); }
.bh-kv-label { display: block; font-size: var(--font-size-xs); text-transform: uppercase; color: var(--color-foreground-secondary); margin-top: var(--space-sm); }
.bh-kv-value { display: block; font-weight: var(--font-weight-semibold); }
.bh-kv-points { font-family: var(--font-family-heading); font-size: var(--font-size-xl); letter-spacing: .06em; color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
.bh-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
@media (max-width: 1020px) { .bh-profile-grid { grid-template-columns: 1fr; } }
.bh-content .table-wrap { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-2xl); background: var(--color-surface-base); box-shadow: var(--shadow-xs, var(--shadow-sm)); overflow: auto; }
.bh-content .table thead th { text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: .06em; color: var(--color-brand-primary); }
.bh-section-title { font-size: var(--font-size-lg); margin: var(--space-lg) 0 var(--space-sm); }
.bh-content .bh-section { padding: 0; }
.bh-content .bh-pagination { margin-top: var(--space-lg); }
}

@layer app {
.bh-pw-wrap { position: relative; }
.bh-pw-wrap .input { padding-right: 3rem; }
.bh-pw-toggle { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); background: none; border: 0; padding: var(--space-xs); cursor: pointer; color: var(--color-foreground-secondary); }
.bh-prose-list { padding-left: var(--space-xl); margin: 0 0 var(--space-lg); }
.bh-prose-list li { margin-bottom: var(--space-lg); }
.bh-auth-card .button-block { margin-top: var(--space-xs); }
.bh-auth-card .field-optional { font-size: var(--font-size-xs); }
}

@layer app {
.bh-auth-card .input { min-height: 2.75rem; font-size: 1rem; }
.bh-auth-card .button-lg { min-height: 3rem; }
.bh-prose-list { list-style: decimal; }
.bh-prose-list li { margin-bottom: var(--space-xl); }
.bh-prose ul { list-style: disc; }
}

@layer app {
.bh-panel h2 { font-size: var(--font-size-xl); }
.bh-footer-inner { padding-inline: var(--space-xl); }
.bh-auth-card { padding: var(--space-xl); }
}

@layer app {
body:has(.bh-shell) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(.bh-shell) .bh-main { flex: 1 0 auto; }
}

/* Profile — spacing per target */
.bh-profile-grid { margin-top: var(--space-lg); }
.bh-profile-grid .bh-panel { padding: var(--space-xl); }
.bh-profile-grid .bh-kv-value { font-size: var(--font-size-base); }

/* Profile: wide info panel (email | points | tags) above two equal form panels */
.bh-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-profile-grid .bh-panel-wide { grid-column: 1 / -1; }
.bh-info-row { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; }
.bh-info-block { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.bh-info-tags { flex: 1 1 22rem; }
.bh-info-block .bh-kv-label { margin-top: 0; }
@media (max-width: 1020px) { .bh-profile-grid { grid-template-columns: 1fr; } }