/* Shared bidder colors and controls. No auction layout or business behavior. */
html.calm.light {
  color-scheme: light;
  --bg: #f8f5ef;
  --card: #fffdf9;
  --ink: #17231f;
  --muted: #58665f;
  --gold: #0a6658;
  --live: #0a6658;
  --warn: #815300;
  --closed: #606e67;
  --line: #ddd9cf;
  --field: #fffdf9;
  --fieldline: #c9c5bb;
  --brand-gold: #a57b22;
  --brand-gold-text: #73510d;
  --on-gold: #fffdf9;
  --info: #1d5fa8;
  --mint: #d9eee8;
  --coral: #e66c4f;
  --media: #f1eee7;
  --calm-positive: #0a6658;
  --calm-negative: #a53d2a;
  --calm-disclosure: #73510d;
  --calm-packaging: #6f461b;
  --calm-packaging-border: #b77a3b;
  --calm-flash: #d9eee8;
}

html.calm:not(.light) {
  color-scheme: dark;
  --bg: #111a17;
  --card: #18231f;
  --ink: #f4f1e9;
  --muted: #aeb9b4;
  --gold: #69c2af;
  --live: #72c9a2;
  --warn: #e9bc68;
  --closed: #96a09c;
  --line: #30403a;
  --field: #1b2823;
  --fieldline: #40534b;
  --brand-gold: #d2af59;
  --brand-gold-text: #d2af59;
  --on-gold: #111a17;
  --info: #8ab8f0;
  --mint: #183c33;
  --coral: #ec826a;
  --media: #0d1512;
  --calm-positive: #72c9a2;
  --calm-negative: #ff9b86;
  --calm-disclosure: #e9bc68;
  --calm-packaging: #f1c88f;
  --calm-packaging-border: #c98f52;
  --calm-flash: #20443a;
}

html.calm body {
  background:
    radial-gradient(circle at 85% 3%, #e8f1ea 0, transparent 26rem),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.5;
  background-repeat: no-repeat;
}

html.calm:not(.light) body {
  background:
    radial-gradient(circle at 85% 3%, #1a332c 0, transparent 26rem),
    var(--bg);
  background-repeat: no-repeat;
}

html.calm .bhnav {
  gap: .25rem;
  padding: .65rem max(1rem, calc((100vw - 1180px) / 2));
  background: var(--card);
  background: color-mix(in srgb, var(--card) 94%, #f8f5ef);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(23, 35, 31, .06);
}

html.calm .bhnav a {
  color: var(--muted);
  border-radius: 999px;
  padding: .43rem .7rem;
  font-size: .82rem;
}

html.calm .bhnav a:hover,
html.calm .bhnav a:focus-visible {
  background: var(--mint);
  color: var(--ink);
}

html.calm .bhnav a.on {
  color: var(--gold);
  background: var(--mint);
  outline: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
}

html.calm .bhnav .calm-brand {
  gap: .65rem;
  color: var(--ink);
  font-size: 1.22rem;
  font-weight: 850;
  letter-spacing: -.03em;
  padding: .2rem .7rem .2rem .15rem;
}

html.calm .bhnav .calm-brand .brand-mark {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  border-radius: 10px;
  background: #0a6658;
  color: #fff;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 850;
  letter-spacing: 0;
}

html.calm:not(.light) .bhnav .calm-brand .brand-mark {
  background: #69c2af;
  color: #111a17;
}

html.calm .bhnav .cta {
  background: var(--gold);
  color: #fffdf9 !important;
}

html.calm:not(.light) .bhnav .cta {
  color: #111a17 !important;
}

html.calm .bhnav-menu {
  position: relative;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
}

html.calm .bhnav-menu summary {
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

html.calm .bhnav-menu summary::-webkit-details-marker {
  display: none;
}

html.calm .bhnav-menu summary::after {
  content: "⌄";
  margin-left: .35rem;
  color: var(--gold);
  font-size: .7rem;
}

html.calm .bhnav-menu summary:hover,
html.calm .bhnav-menu summary:focus-visible,
html.calm .bhnav-menu[open] summary {
  color: var(--ink);
  background: var(--mint);
  border-color: color-mix(in srgb, var(--gold) 25%, var(--line));
}

html.calm .bhnav-account-menu summary {
  border-color: var(--line);
  color: var(--ink);
}

html.calm .bhnav-dropdown {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 120;
  display: grid;
  min-width: 190px;
  padding: .4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(23, 35, 31, .18);
}

html.calm .bhnav-dropdown a,
html.calm .bhnav-dropdown button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: .55rem .65rem;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

html.calm .bhnav-dropdown button:hover,
html.calm .bhnav-dropdown button:focus-visible,
html.calm .bhnav-dropdown a:hover,
html.calm .bhnav-dropdown a:focus-visible {
  color: var(--ink);
  background: var(--mint);
}

/* A teal ring clears WCAG's 3:1 focus-indicator threshold in both calm
   palettes. It intentionally replaces the Ryzen amber ring, which does not
   contrast sufficiently against the source cream background. */
html.calm :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px !important;
}

/* The compact navigation shares both calm palettes. Its base dark colours
   must not survive underneath the light-theme link override. */
html.calm .bhnav-mobile-menu > summary {
  color: var(--ink);
  background: var(--card);
  border-color: var(--fieldline);
}
html.calm .bhnav-mobile-menu[open] > summary {
  color: var(--gold);
  border-color: var(--gold);
}
html.calm .bhnav-mobile-panel {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}
html.calm .bhnav .bhnav-mobile-panel a,
html.calm .bhnav .bhnav-mobile-panel button { color: var(--ink); }
html.calm .bhnav-mobile-group strong { color:var(--gold); }
html.calm .bhnav .bhnav-mobile-panel button:hover,
html.calm .bhnav .bhnav-mobile-panel button:focus-visible,
html.calm .bhnav .bhnav-mobile-panel a:hover,
html.calm .bhnav .bhnav-mobile-panel a:focus-visible {
  color: var(--gold);
  background: var(--field);
}

html.calm {
  --paper: var(--bg);
  --tile: var(--card);
  --soft: var(--muted);
  --rule: var(--line);
  --goldsoft: var(--gold);
  --gold-soft: var(--gold);
  --gold-bg: color-mix(in srgb, var(--gold) 10%, var(--card));
  --positive-bg: color-mix(in srgb, var(--calm-positive) 12%, var(--card));
  --negative-bg: color-mix(in srgb, var(--calm-negative) 12%, var(--card));
  --warn-bg: color-mix(in srgb, var(--warn) 12%, var(--card));
}
html.calm body { margin:0; }
html.calm input::placeholder, html.calm textarea::placeholder { color:var(--muted); opacity:1; }
html.calm .bhnav .bhnav-encore-badge { background:var(--gold); color:var(--on-gold); }
html.calm .bhnav .bhnav-mobile-dock { border-color:var(--fieldline); color:var(--gold); }
html.calm .bhnav-mobile-group + .bhnav-mobile-group { border-color:var(--line); }
html.calm button.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  box-sizing:border-box; width:auto; min-width:44px; min-height:44px; margin:0;
  padding:.5rem .75rem; border:1.5px solid var(--fieldline); border-radius:8px;
  background:var(--card); color:var(--ink); font:700 .85rem/1.25 system-ui,sans-serif;
  cursor:pointer; white-space:nowrap; box-shadow:none;
}
html.calm button.theme-toggle:hover { background:var(--mint); border-color:var(--gold); }
html.calm .theme-toggle [data-theme-icon] { color:var(--gold); }
html.calm .bidder-appearance { display:flex; justify-content:flex-end; padding:.6rem clamp(1rem,4vw,2rem); max-width:1180px; margin:0 auto; }
@media (max-width:640px) {
  html.calm .bhnav { padding:.45rem .55rem; }
  html.calm .bhnav a, html.calm .bhnav-menu summary { min-height:44px; }
}
@media (max-width:1100px) {
  html.calm .bhnav-menu[open] .bhnav-dropdown { position:fixed; top:calc(var(--bhnav-height,49px) + .4rem); right:.6rem; }
}
@media print {
  html.calm, html.calm.light, html.calm:not(.light) {
    color-scheme:light; --bg:#fff; --card:#fff; --ink:#17231f; --muted:#45534d;
    --gold:#0a6658; --on-gold:#fff; --brand-gold-text:#73510d; --line:#bbb;
    --field:#fff; --fieldline:#999; --calm-positive:#0a6658; --calm-negative:#a53d2a; --warn:#73510d;
  }
  html.calm body, html.calm:not(.light) body { background:#fff; color:#17231f; }
  html.calm .theme-toggle, html.calm .bidder-appearance { display:none !important; }
}