/* ============================================================
   Vendu Cape — facelift design tokens + components
   Ported from designer drop-in (2026-05-20). Loads AFTER site.css
   so it overrides body/headings sitewide via :root variable
   remap + a small set of selector overrides. Page-specific
   rules in site.css continue to apply for layout/spacing/grid;
   only colour and typography are normalised here.
   ============================================================ */

/* ============================================================
   Legacy palette remap — :root in site.css declared its own
   tokens (--orange/--coal/--steel/...) that drive every page
   that hasn't been re-skinned yet. Replacing them HERE rebrands
   buttons, links, headings, chips, panels site-wide in one shot
   because every legacy rule reads through var().

   Concrete swaps:
     --orange      gold-yellow CTA  -> brand-green primary
     --orange-deep deep CTA / kicker -> brand-green-2 hover state
     --coal        ink              -> brand-ink
     --slate       muted green      -> brand-ink2
     --steel       muted body       -> brand-muted
     --sand        cream surface    -> brand-cream
     --line        hairline         -> brand-line
     --card        translucent card -> tinted brand-cream-2
     --shadow      panel shadow     -> brand shadow
   ============================================================ */
:root {
  /* Re-map LEGACY tokens (site.css reads through these via var()) */
  --orange:        #1F5F3F;
  --orange-deep:   #175033;
  --coal:          #0F1A14;
  --slate:         #2A332C;
  --steel:         #5B6660;
  --sand:          #F6F2E8;
  --line:          #E5DFCE;
  --white:         #FFFFFF;
  --card:          rgba(250, 247, 239, 0.86);
  --shadow:        0 24px 60px rgba(15, 26, 20, 0.10);
  --countdown-font: 'JetBrains Mono', 'Orbitron', ui-monospace, monospace;

  /* Brand tokens (used by the facelift component classes below). */
  --brand-green:    #1F5F3F;
  --brand-green-2:  #175033;
  --brand-green-3:  #0F3A24;
  --brand-green-4:  #0B2A1B;
  --brand-cream:    #F6F2E8;
  --brand-cream-2:  #FAF7EF;
  --brand-paper:    #EFE9DA;
  --brand-ink:      #0F1A14;
  --brand-ink2:     #2A332C;
  --brand-muted:    #5B6660;
  --brand-line:     #E5DFCE;
  --brand-gold:     #C9A24A;
  --brand-gold-2:   #B0863A;
}

html { background: var(--brand-cream); }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--brand-ink);
  -webkit-font-smoothing: antialiased;
}

/* Reset legacy gradient backdrop so the new design's flat cream surface dominates. */
body.site-shell { background: var(--brand-cream); }

.font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; }
.eyebrow      { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.mono         { font-family: 'JetBrains Mono', monospace; }

/* Hairline divider used between body and case-study meta on /about */
.hairline {
  background: linear-gradient(to right, transparent, var(--brand-line) 12%, var(--brand-line) 88%, transparent);
  height: 1px;
}

/* Decorative ornament used on numbered cards in About — small diamonds
   at each end of a 1px rule. Reads `currentColor` so it inherits the
   container's text colour (typically text-brand-line on About cards). */
.ornament-h { height: 1px; background: currentColor; position: relative; }
.ornament-h::before,
.ornament-h::after  { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; transform: rotate(45deg); background: currentColor; }
.ornament-h::before { left: -3px; }
.ornament-h::after  { right: -3px; }

/* ===== Buttons ===== */
.btn-primary { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(31,95,63,.55); }

/* ===== Live pulse ===== */
.live-dot { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); animation: vc-pulse 1.6s ease-out infinite; }
@keyframes vc-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(220, 38, 38, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0    rgba(220, 38, 38, 0); }
}

/* ===== Nav underline ===== */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--brand-green);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--brand-green); }

/* ===== Card hover ===== */
.lot-card { transition: transform .2s ease, box-shadow .2s ease; }
.lot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(15,26,20,.04), 0 24px 40px -22px rgba(15,26,20,.28);
}

/* ===== Lucide icon defaults ===== */
[data-lucide] { width: 18px; height: 18px; stroke-width: 1.5; }

/* ===== Form fields ===== */
.field-label {
  font-size: 12px; font-weight: 600; color: var(--brand-ink2);
  margin-bottom: 6px; display: block;
}
.field-input,
.field-select,
.field-textarea {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 14px; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.field-textarea { height: auto; padding: 12px 14px; min-height: 110px; line-height: 1.5; }
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231F5F3F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none; border-color: var(--brand-green); background: #FFFFFF;
}

/* ===== Tag pills ===== */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; min-height: 44px;
  background: var(--brand-cream-2); border: 1px solid var(--brand-line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: all .15s ease; color: var(--brand-ink); cursor: pointer;
}
.tag-pill:hover { background: var(--brand-green); color: var(--brand-cream); border-color: var(--brand-green); }
.tag-pill.active { background: var(--brand-green); color: var(--brand-cream); border-color: var(--brand-green); }

/* ===== Status chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
}
.chip-live     { background: #fee2e2; color: #991b1b; }
.chip-reserve  { background: var(--brand-cream); color: var(--brand-green-3); border: 1px solid var(--brand-line); }
.chip-pending  { background: #fef3c7; color: #92400e; }
.chip-stc      { background: #dbeafe; color: #1e40af; }
.chip-scheduled{ background: var(--brand-cream); color: var(--brand-green-3); border: 1px solid var(--brand-line); }
.chip-offers   { background: #fef3c7; color: #92400e; }
.chip-ended    { background: #e5e7eb; color: #374151; }

/* ===== Layout helpers (used by facelift pages) ===== */
.pad-y    { padding-top: 56px; padding-bottom: 56px; }
.pad-y-sm { padding-top: 36px; padding-bottom: 36px; }
@media (min-width: 768px) {
  .pad-y    { padding-top: 88px; padding-bottom: 88px; }
  .pad-y-sm { padding-top: 56px; padding-bottom: 56px; }
}

/* ===== Pagination (facelift override over default Livewire/Bootstrap pagination) ===== */
.facelift-pagination nav { display: flex; align-items: center; justify-content: space-between; }
.facelift-pagination ul,
.facelift-pagination .pagination { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.facelift-pagination li,
.facelift-pagination .pagination li { display: inline-flex; }
.facelift-pagination a,
.facelift-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  border: 1px solid var(--brand-line); color: var(--brand-ink);
  text-decoration: none; transition: all .15s ease;
}
.facelift-pagination a:hover { border-color: var(--brand-green); color: var(--brand-green); }
.facelift-pagination .active span,
.facelift-pagination li.active span,
.facelift-pagination span[aria-current="page"] {
  background: var(--brand-green); color: var(--brand-cream); border-color: var(--brand-green); font-weight: 600;
}
.facelift-pagination .disabled span,
.facelift-pagination li.disabled span { color: var(--brand-muted); opacity: .6; }

/* ============================================================
   GLOBAL SITEWIDE FOUNDATIONS
   The rules below normalise typography, buttons, links and
   surface colours for EVERY page — facelifted or not. They use
   the brand fonts/colours loaded above so the chrome (header,
   announcement bar, footer) and the page content feel like one
   design rather than chrome over an older skin.

   Specificity strategy:
     - `:where(body)` selectors keep specificity low so a page
       can override locally if it really needs to.
     - For rules that need to BEAT specific legacy selectors in
       site.css (e.g. `.hero h1`), we either bump specificity
       with `body` ancestor or use `!important` sparingly.
   ============================================================ */

/* Body baseline — Inter, brand ink, brand cream backdrop. Beats
   site.css `body { font-family: "IBM Plex Sans" ...; background: linear-gradient(...) }`
   because facelift.css is loaded after site.css. */
:where(html) { background: var(--brand-cream); }
:where(body) {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--brand-ink);
  background: var(--brand-cream);
}
body.site-shell {
  /* site.css ships a radial gradient backdrop; flatten it so the
     new chrome's solid cream doesn't sit on top of the old wash. */
  background: var(--brand-cream);
}

/* Brand wordmark in legacy header (kept for compat — the new
   chrome uses the PNG logo, but the .brand class is still
   referenced by a couple of admin/auth surfaces). */
.brand { font-family: 'Playfair Display', Georgia, serif !important; letter-spacing: 0; }
.brand .brand-subtitle { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.16em; }

/* Headings — Playfair Display sitewide. !important is used here
   because site.css has dozens of selectors like `.hero h1`,
   `.section-heading h2`, `.tender-result h2`, `.panel-heading h2`
   etc. that each set their own font-family. Rather than mirror
   every one of them, we override the family on the element. */
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}

/* `<strong>` elements that legacy CSS used as fake headings
   (numeric counters in tender scout, seller pills, auction
   meta stack). We give them the display font so they line up
   with real headings. */
.tender-scout-metrics strong,
.seller-pill strong,
.auction-meta-stack strong,
.empty-state strong {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Hero copy / narrow copy — keep at Inter but with brand muted. */
.hero-copy, .narrow-copy { color: var(--brand-muted); }

/* `.mono` collisions — site.css line 2398 defines `.mono` using
   Space Grotesk; facelift.css's own `.mono` rule above wins on
   load order but only sets font-family. Reinforce here so any
   late-loaded admin CSS can't fight it. */
body .mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: 0; }

/* Buttons — legacy `.solid-button` / `.ghost-button` are pill
   shaped. We keep the shape (some forms rely on the height) and
   only rebrand colour. */
body .solid-button {
  background: var(--brand-green);
  color: var(--brand-cream);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
body .solid-button:hover {
  background: var(--brand-green-2);
  color: var(--brand-cream);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px rgba(31, 95, 63, .55);
}
body .ghost-button {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--brand-line);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
}
body .ghost-button:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
  background: var(--brand-cream-2);
}
body .text-link { color: var(--brand-green); font-weight: 600; }
body .text-link:hover { color: var(--brand-green-2); }

/* Eyebrow / kicker text — JetBrains Mono cap-style. site.css
   declares the kicker rule with `color: var(--orange-deep)` —
   our :root remap turns that into brand-green automatically. */
body .eyebrow,
body .auction-card-kicker {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Surfaces — semi-transparent panels in site.css used
   rgba(255,255,255,*) which sat oddly against the cream
   backdrop. Re-tint them with brand-cream-2 so they read as
   "warm paper" instead of "white glass". */
body .hero-panel,
body .promise-card,
body .card-panel,
body .auction-card,
body .seller-pill,
body .feature-block {
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* Legacy footer + top-rail — sites/pages that still inject the
   legacy chrome (none today, but the .site-footer class lingers
   in past-sales partials) get rebranded to the same green-4 base
   used by the facelift footer. */
body .top-rail { background: var(--brand-green-4); color: var(--brand-cream); opacity: 0.92; }
body .site-footer { background: var(--brand-green-4); color: var(--brand-cream); }
body .site-footer h3, body .site-footer h4 { color: var(--brand-cream); }

/* Form fields in legacy pages (account forms, auth login) —
   neutral fill on brand cream-2 with green focus ring. */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="number"],
body input[type="url"],
body select,
body textarea {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--brand-ink);
}
body input:focus, body select:focus, body textarea:focus {
  outline: 2px solid var(--brand-green);
  outline-offset: 1px;
}

/* ============================================================
   LEGACY-CLASS DESIGN-CUE SWEEP
   The block below normalises the structural classes that legacy
   pages still use (hero / section / card-panel / promise-card /
   feature-block / split-panel / auth-card / toolbar / two-col-form
   / inline-links / past-sales / etc.) onto brand tokens. With this
   pass in place, every un-facelifted page picks up the same
   typography, surface tints, button shape, and field treatment as
   the explicitly re-skinned pages.

   Specificity is bumped with `body` ancestor or `!important` on
   the few rules that have to beat scoped legacy declarations.
   ============================================================ */

/* ----- Hero blocks ----- */
body .hero {
  padding: 4rem 0 2.5rem;
  background: transparent;
}
body .hero-compact { padding: 3rem 0 2rem; }
body .hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  line-height: 1;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
body .hero .eyebrow { color: var(--brand-green); margin-bottom: 1rem; }
body .hero-copy {
  font-size: 0.98rem; line-height: 1.7;
  color: var(--brand-muted);
  max-width: 56ch;
}

/* ----- Section + section-heading ----- */
body .section { padding: 4rem 0; }
body .section-tight { padding: 2.5rem 0 3.5rem; }
body .section-heading h1,
body .section-heading h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05;
  margin: 0 0 0.5rem;
  max-width: 22ch;
}
body .section-heading .eyebrow {
  color: var(--brand-green);
  margin-bottom: 0.6rem;
}
body .section-heading > p,
body .section-heading .narrow-copy { color: var(--brand-muted); }

/* Section-dark used by sell/account/admin proof bands. Re-tint to
   brand-green-4 (the deepest brand surface) instead of legacy slate. */
body .section-dark {
  background: var(--brand-green-4);
  color: var(--brand-cream);
}
body .section-dark h2, body .section-dark h3 { color: var(--brand-cream); }
body .section-dark .eyebrow { color: var(--brand-gold); }
body .section-dark .narrow-copy,
body .section-dark p { color: rgba(246, 242, 232, 0.78); }

/* ----- Surface panels (squared, brand cream-2, hairline border) ----- */
body .card-panel,
body .promise-card,
body .feature-block,
body .auction-card,
body .seller-pill,
body .hero-panel,
body .info-panel {
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
body .promise-card h3,
body .feature-block h3,
body .info-panel h3 {
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 0 0 0.6rem;
  color: var(--brand-ink);
}
body .promise-card p,
body .feature-block p,
body .info-panel p { color: var(--brand-muted); margin: 0 0 0.6rem; }

/* Auction card media slot (used by <x-auction-card>) — strip
   legacy gradient placeholder, keep aspect-ratio. */
body .auction-card-media { border-radius: 4px 4px 0 0; background: var(--brand-green-4); }
body .auction-card-body { padding: 1.25rem 1.25rem 1.4rem; }
body .auction-card h3 { font-size: 1.15rem; line-height: 1.25; }
body .auction-card-kicker { color: var(--brand-green); }

/* ----- Empty / placeholder states ----- */
body .empty-state {
  text-align: center;
  padding: 2.25rem 1.5rem;
}
body .empty-state strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
body .empty-state p { color: var(--brand-muted); margin: 0; }

/* ----- Split panel (used by /contact legacy, account pages) ----- */
body .split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 880px) {
  body .split-panel { grid-template-columns: 1fr; }
}

/* ----- Form layout primitives ----- */
body .toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.5rem;
}
body .toolbar label {
  display: grid; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--brand-ink2);
}
body .two-col-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
@media (max-width: 640px) { body .two-col-form { grid-template-columns: 1fr; } }
body .two-col-form .span-2 { grid-column: 1 / -1; }
body .two-col-form label,
body form label:not(.checkbox-row):not(.tag-pill):not([class*="cursor-pointer"]) {
  display: grid; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--brand-ink2);
}

/* Plain `<input>` / `<select>` / `<textarea>` inside legacy forms
   pick up the same look as `.field-input` — sharp corners, cream
   fill, brand-line border, brand-green focus ring. */
body form input[type="text"],
body form input[type="email"],
body form input[type="password"],
body form input[type="search"],
body form input[type="tel"],
body form input[type="number"],
body form input[type="url"],
body form input[type="date"],
body form input[type="datetime-local"],
body form select,
body form textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  border-radius: 0;
  color: var(--brand-ink);
  font: 14px/1.5 'Inter', system-ui, sans-serif;
  transition: border-color .15s ease, background .15s ease;
}
body form textarea { height: auto; padding: 12px 14px; min-height: 110px; }
body form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231F5F3F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
body form input:focus,
body form select:focus,
body form textarea:focus {
  outline: none;
  border-color: var(--brand-green);
  background: #FFFFFF;
}
body form input:focus-visible,
body form select:focus-visible,
body form textarea:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

body .checkbox-row {
  display: flex !important;
  align-items: center; gap: 0.6rem;
  font-size: 0.85rem; color: var(--brand-ink2);
  cursor: pointer;
}
body .checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--brand-green);
}

body .field-error,
body .form-error,
body .form-error-summary {
  display: block;
  font-size: 0.78rem;
  color: #991b1b;
  margin-top: 0.4rem;
}
body .form-error,
body .form-error-summary {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

/* Inline link rows in auth pages */
body .inline-links {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 1rem;
  font-size: 0.85rem;
}
body .inline-links a {
  color: var(--brand-green);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
body .inline-links a:hover { border-bottom-color: var(--brand-green); }

/* Password show/hide button on the login form */
body .input-with-action {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
body .input-with-action input { padding-right: 64px; }
body .input-action {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0;
  font: 0.72rem 'JetBrains Mono', monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-green);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
}
body .input-action:hover { color: var(--brand-green-2); }

/* ----- Auth shell ----- */
body .auth-shell {
  display: grid;
  place-items: center;
  padding: 2.5rem 0 3.5rem;
}
body .auth-card {
  width: 100%;
  max-width: 480px;
  display: grid;
  gap: 1.1rem;
  padding: 2rem 1.8rem;
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(15,26,20,.04), 0 24px 48px -28px rgba(15,26,20,.22);
}
body .auth-card h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}
body .auth-card .eyebrow { color: var(--brand-green); }

/* Eyebrow contrast fix — the base `.eyebrow` colour (site.css, which loads
   after Tailwind) was overriding the `text-brand-*` utility in the markup,
   dropping the hero kicker to ~1.2:1 (dark green on green) and the dark
   trust strip to ~1.7:1. Re-assert the utility colour on eyebrows so each
   surface keeps its intended high-contrast foreground. */
body .eyebrow.text-brand-green   { color: var(--brand-green); }
body .eyebrow.text-brand-green-4 { color: var(--brand-green-4); }
body .eyebrow.text-brand-gold    { color: var(--brand-gold); }
body .eyebrow.text-brand-cream   { color: var(--brand-cream); }
body .eyebrow.text-brand-muted   { color: var(--brand-muted); }

/* Buttons in auth card stretch full-width by default */
body .auth-card .solid-button { width: 100%; }
body .auth-card .ghost-button { width: 100%; }

/* ----- Buttons (squared, brand-green, no pill) ----- */
body .solid-button,
body .ghost-button {
  border-radius: 0;
  padding: 0.8rem 1.4rem;
  min-height: 44px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
body .solid-button { background: var(--brand-green); color: var(--brand-cream); }
body .solid-button:hover { background: var(--brand-green-2); }
body .ghost-button {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--brand-line);
}
body .ghost-button:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
  background: var(--brand-cream-2);
}

/* ----- Past-sales grid ----- */
body .past-sales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
body .past-sale-summary-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
}
body .past-sale-summary-media {
  aspect-ratio: 16 / 10;
  background: var(--brand-green-4);
  overflow: hidden;
}
body .past-sale-summary-media img,
body .past-sale-summary-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
body .past-sale-summary-body { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: 0.75rem; }
body .past-sale-summary-body h2 { font-size: 1.35rem; line-height: 1.2; margin: 0.1rem 0; }
body .past-sale-summary-body p { color: var(--brand-muted); margin: 0; font-size: 0.88rem; }
body .past-sale-summary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0.4rem 0 0.6rem;
}
body .past-sale-summary-stats div { display: grid; gap: 0.15rem; }
body .past-sale-summary-stats span {
  font: 0.7rem 'JetBrains Mono', monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-muted);
}
body .past-sale-summary-stats strong {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.05rem;
}

/* ----- Auction detail outer wrapper ----- */
body .auction-overview,
body .auction-detail-shell {
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  padding: 1.5rem;
}
body .auction-overview h1 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin: 0.25rem 0 0.6rem;
}

/* ----- Tender scout outer surface (uses .tender-scout-controls etc.
   already var()-themed, so they pick up brand colours via the :root
   remap. Just square corners + tighten radius.) ----- */
body .tender-scout-controls,
body .tender-scout-metrics div,
body .tender-scout-empty,
body .tender-scout-warnings,
body .tender-result,
body .tender-long-fields div { border-radius: 4px; }
body .tender-scout-toggle { border-radius: 4px; background: var(--brand-cream-2); }
body .tender-scout-controls input[type="text"] { border-radius: 0; height: 44px; }
body .tender-badges span { border-radius: 0; background: rgba(31, 95, 63, 0.10); color: var(--brand-green); }

/* ----- Auctions-category & generic legacy grids ----- */
body .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ----- Hairline divider stays consistent ----- */
body .ornament-h { color: var(--brand-line); }

/* ----- Lift any leftover translucent panels that read as
   "white glass on cream" with a flatter brand cream-2. ----- */
body .home-story-panel,
body .home-promise-card,
body .home-newsletter-banner,
body .seller-pill-rich,
body .sell-stage-panel,
body .sell-mini-card,
body .sell-service-card,
body .sell-track-card,
body .sell-proof-card,
body .sell-support-card,
body .sell-brief-form,
body .sell-valuation-panel,
body .sell-contact-chip,
body .sell-intent-option {
  background: var(--brand-cream-2);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  box-shadow: none;
}

/* Status chips (legacy `.status-*` series). The :root colour
   remap doesn't reach them because they use literal hex/rgb.
   Bring them onto the brand palette so the dashboard / account
   bid rows feel consistent with the facelifted auctions page. */
.status-live, .status-reserve-met, .status-approved, .status-approved-to-bid {
  background: rgba(31, 95, 63, 0.12); color: var(--brand-green-3);
}
.status-pending, .status-fica-pending, .status-pending-review, .status-uploaded {
  background: #fef3c7; color: #92400e;
}
.status-rejected, .status-expired { background: #fee2e2; color: #991b1b; }
.status-superseded { background: rgba(15, 26, 20, 0.08); color: var(--brand-muted); }
.status-stc { background: #dbeafe; color: #1e40af; }
.status-vendu { background: rgba(201, 162, 74, 0.16); color: var(--brand-gold-2); }