/*
 * ArcherTech bidder portal — one design layer on the calm floor tokens.
 *
 * bidder-theme.css owns the palette (html.calm.light / html.calm:not(.light)),
 * the body tint, the nav and the focus ring. This file owns the portal
 * components so My Desk, wins, bids, invoices, the Dock, account and search
 * read as one product with the floor. Every state carries an icon or a word;
 * colour is never the only signal (operator is colour-blind).
 */

html.calm {
  --shadow: 0 8px 26px rgba(23, 35, 31, .065);
  --radius: 16px;
  --serif: Georgia, "Times New Roman", serif;
  --encore-surface-a: color-mix(in srgb, var(--ink) 92%, var(--info));
  --encore-surface-b: color-mix(in srgb, var(--ink) 88%, var(--bg));
  --encore-ink: var(--bg);
  --encore-muted: color-mix(in srgb, var(--bg) 78%, var(--muted));
  --encore-highlight: var(--bg);
  --encore-action-surface: color-mix(in srgb, var(--brand-gold) 86%, var(--on-gold));
  --encore-action-ink: var(--ink);
}
html.calm:not(.light) {
  --shadow: 0 8px 26px rgba(0, 0, 0, .35);
  --encore-surface-a: color-mix(in srgb, var(--card) 82%, var(--info));
  --encore-surface-b: color-mix(in srgb, var(--bg) 88%, var(--card));
  --encore-ink: var(--ink);
  --encore-muted: var(--muted);
  --encore-highlight: var(--ink);
  --encore-action-surface: var(--brand-gold);
  --encore-action-ink: var(--bg);
}

html.calm body { margin: 0; }
html.calm * { box-sizing: border-box; }
html.calm [hidden] { display: none !important; }

/* ---- page shell ------------------------------------------------------- */
html.calm .at-page { max-width: 1180px; margin: 0 auto; padding: 1rem; }
html.calm .at-page.narrow { max-width: 720px; }
html.calm .at-page.tight { max-width: 560px; }

html.calm .at-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; padding: .6rem 0 1rem;
}
html.calm .at-kicker {
  margin: 0 0 .3rem; color: var(--brand-gold-text); font-size: .68rem;
  font-weight: 750; letter-spacing: .19em; text-transform: uppercase;
}
html.calm .at-top h1 {
  margin: 0; font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.02em; line-height: 1.12;
}
html.calm .at-sub { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
html.calm .at-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
html.calm .at-back { color: var(--gold); text-decoration: none; font-size: .85rem; font-weight: 650; }
html.calm .at-back:hover { text-decoration: underline; }

/* ---- cards / panels ---------------------------------------------------- */
html.calm .at-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.05rem; box-shadow: var(--shadow); margin: 0 0 .85rem;
}
html.calm .at-card h2 { margin: 0 0 .7rem; font-size: 1rem; font-weight: 750; }
html.calm .at-card.accent { border-left: 5px solid var(--gold); }
html.calm .at-card.accent.warn { border-left-color: var(--warn); }
html.calm .at-card.accent.danger { border-left-color: var(--calm-negative); }
html.calm .at-card.accent.good { border-left-color: var(--calm-positive); }

/* Package-provided account, social sign-in and MFA pages share this shell. */
html.calm .bidder-auth { padding-block:2rem; overflow-wrap:anywhere; }
html.calm .bidder-auth a { color:var(--gold); }
html.calm .bidder-auth h1 { font-size:clamp(1.4rem,4vw,1.8rem); line-height:1.2; }
html.calm .bidder-auth label { display:block; margin:.65rem 0 .3rem; }
html.calm .bidder-auth input:not([type="checkbox"]):not([type="radio"]),
html.calm .bidder-auth select, html.calm .bidder-auth textarea {
  max-width:100%; width:100%; min-height:44px; padding:.65rem; font:inherit;
  color:var(--ink); background:var(--field); border:1px solid var(--fieldline); border-radius:8px;
}
html.calm .bidder-auth .at-card button {
  min-height:44px; max-width:100%; padding:.65rem 1rem; border:0; border-radius:9px;
  color:var(--on-gold); background:var(--gold); font:inherit; font-weight:650; cursor:pointer;
}
html.calm .bidder-auth .errorlist { color:var(--calm-negative); }
html.calm .bidder-auth ul { padding-inline-start:1.3rem; }
html.calm .bidder-auth pre { max-width:100%; white-space:pre-wrap; }
html.calm .bidder-auth img, html.calm .bidder-auth svg { max-width:100%; height:auto; }
/* Authenticator QR marks are black on transparency in the package SVG. */
html.calm .bidder-auth img[src^="data:image/svg+xml"] { background:#fff; }

/* ---- buttons ----------------------------------------------------------- */
html.calm .at-btn, html.calm .at-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .6rem 1rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 750; text-decoration: none;
  white-space: nowrap;
}
html.calm .at-btn {
  color: var(--on-gold); background: var(--gold); border: 0;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--gold) 18%, transparent);
}
html.calm .at-btn:hover:not(:disabled) { filter: brightness(.93); }
html.calm .at-btn:disabled {
  color: var(--closed); background: color-mix(in srgb, var(--closed) 14%, var(--card));
  box-shadow: none; cursor: not-allowed;
}
html.calm .at-btn-ghost {
  color: var(--gold); background: var(--card); border: 1.5px solid var(--line);
}
html.calm .at-btn-ghost:hover { border-color: var(--gold); }
html.calm .at-btn.block, html.calm .at-btn-ghost.block { display: flex; width: 100%; }

/* ---- badges & state chips (icon + word, always) ------------------------ */
html.calm .at-badge {
  display: inline-block; padding: .16rem .55rem; border-radius: 999px;
  border: 1px solid currentColor; font-size: .72rem; font-weight: 750;
  letter-spacing: .03em; white-space: nowrap;
}
html.calm .at-badge.live, html.calm .at-badge.paid, html.calm .at-badge.good { color: var(--calm-positive); }
html.calm .at-badge.warn, html.calm .at-badge.open { color: var(--warn); }
html.calm .at-badge.bad { color: var(--calm-negative); }
html.calm .at-badge.info { color: var(--info); }
html.calm .at-badge.closed, html.calm .at-badge.void { color: var(--closed); }
html.calm .at-badge.gold { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }

html.calm .goodtxt, html.calm .lead, html.calm .ok { color: var(--calm-positive); }
html.calm .warntxt { color: var(--warn); }
html.calm .badtxt, html.calm .out, html.calm .err { color: var(--calm-negative); }
html.calm .muted { color: var(--muted); }

/* ---- KPI tiles ---------------------------------------------------------- */
html.calm .at-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
html.calm .at-kpi {
  border: 1px solid var(--line); border-radius: 12px; padding: .75rem .8rem;
  background: var(--card);
}
html.calm .at-kpi b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
html.calm .at-kpi span { font-size: .75rem; color: var(--muted); }

/* ---- list rows ---------------------------------------------------------- */
html.calm .at-row {
  display: flex; gap: .8rem; align-items: center; padding: .7rem 0;
  border-top: 1px solid var(--line); color: inherit; text-decoration: none;
}
html.calm .at-row:first-of-type { border-top: 0; }
html.calm a.at-row:hover .title { color: var(--gold); }
html.calm .at-row .thumb {
  width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex: none;
  background: var(--media);
}
html.calm .at-row .grow { flex: 1; min-width: 0; }
html.calm .at-row .title {
  display: block; font-weight: 700; font-size: .92rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
html.calm .at-row .meta { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }
html.calm .at-row .amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Card rows (search results, bids) */
html.calm a.at-tile {
  display: flex; gap: .8rem; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: .8rem;
  margin: 0 0 .6rem; color: inherit; text-decoration: none; box-shadow: var(--shadow);
}
html.calm a.at-tile:hover { border-color: var(--gold); }
html.calm a.at-tile.lead { border-left: 4px solid var(--calm-positive); }
html.calm a.at-tile.out { border-left: 4px solid var(--calm-negative); }

/* ---- forms ------------------------------------------------------------- */
html.calm .at-input, html.calm .at-page input[type=text], html.calm .at-page input[type=tel],
html.calm .at-page input[type=search], html.calm .at-page input[type=email],
html.calm .at-page select, html.calm .at-page textarea {
  width: 100%; padding: .62rem .75rem; border-radius: 10px; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--field); border: 1px solid var(--fieldline);
}
html.calm .at-page select { width: auto; }
html.calm .at-page label { font-size: .82rem; color: var(--muted); }

/* ---- chips / toolbars --------------------------------------------------- */
html.calm .at-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
html.calm .at-chip {
  display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line);
  border-radius: 999px; padding: .32rem .7rem; font-size: .78rem; font-weight: 700;
  color: var(--muted); text-decoration: none; background: var(--card); cursor: pointer;
  font-family: inherit;
}
html.calm .at-chip:hover, html.calm .at-chip.on, html.calm .at-chip.active {
  border-color: var(--gold); color: var(--gold); background: var(--gold-bg);
}

/* ---- notices ----------------------------------------------------------- */
html.calm .at-notice {
  border-radius: 12px; padding: .75rem .95rem; margin: 0 0 .85rem; font-size: .9rem;
  border: 1.5px solid var(--line); background: var(--card);
}
html.calm .at-notice.good { border-color: var(--calm-positive); background: var(--positive-bg); }
html.calm .at-notice.warn { border-color: var(--warn); background: var(--warn-bg); }
html.calm .at-notice.bad { border-color: var(--calm-negative); background: var(--negative-bg); }

html.calm .at-empty {
  border: 1px dashed var(--line); border-radius: 14px; padding: 1.3rem; color: var(--muted);
  text-align: center; font-size: .9rem;
}
html.calm .at-foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--muted); font-size: .72rem; margin: 1.2rem 0 .4rem;
}

/* ---- Private Encore signal -------------------------------------------- */
html.calm .encore {
  position: relative; overflow: hidden; color: var(--encore-ink);
  border-color: color-mix(in srgb, var(--brand-gold) 72%, transparent);
  background:
    radial-gradient(circle at 92% 0,
      color-mix(in srgb, var(--brand-gold) 18%, transparent), transparent 38%),
    linear-gradient(135deg, var(--encore-surface-a), var(--encore-surface-b));
}
html.calm .encore::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--brand-gold);
}
html.calm .encore-layout {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem;
  align-items: center;
}
html.calm .encore-layout > div { min-width: 0; }
html.calm .encore-media {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px;
  border-radius: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--encore-surface-a) 76%, var(--gold));
  border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, var(--line));
}
html.calm .encore-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
html.calm .encore-fallback {
  font: italic 850 2.35rem var(--serif); color: var(--brand-gold);
}
html.calm .encore-media:not(.is-missing) .encore-fallback { visibility: hidden; }
html.calm .encore-media.is-missing .encore-img { display: none; }
html.calm .encore .eyebrow { color: var(--encore-highlight); }
html.calm .encore h2 {
  font: 600 1.2rem var(--serif); margin: .2rem 0; color: var(--encore-ink);
}
html.calm .encore .title { color: var(--encore-ink); }
html.calm .encore-price {
  font-size: 1.4rem; color: var(--encore-highlight); font-weight: 850;
}
html.calm .encore-clock {
  font-variant-numeric: tabular-nums; color: var(--encore-highlight); font-weight: 800;
}
html.calm .encore-actions { text-align: right; }
html.calm .encore-note, html.calm .encore .sub { color: var(--encore-muted); }
html.calm .encore-note { font-size: .78rem; margin: .25rem 0 0; }
html.calm .encore .btn {
  margin-top: .45rem; background: var(--encore-action-surface);
  color: var(--encore-action-ink);
}
html.calm .encore .btn:hover {
  background: color-mix(in srgb, var(--encore-action-surface) 82%, var(--encore-ink));
  color: var(--encore-action-ink);
}
html.calm .encore-review {
  display: inline-block; margin-top: .35rem; padding: .3rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--calm-positive) 13%, transparent);
  color: color-mix(in srgb, var(--calm-positive) 76%, var(--encore-ink));
  font-size: .75rem; font-weight: 850;
}

/* ---- Pickup Pass -------------------------------------------------------- */
html.calm .pass {
  border: 2px solid var(--gold); border-radius: 14px; background: var(--card);
  padding: .85rem .9rem; margin: .75rem 0 .25rem; box-shadow: var(--shadow);
}
html.calm .pass-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
html.calm .pass-head b { color: var(--brand-gold-text); letter-spacing: .1em; font-size: .78rem; }
html.calm .pass-head span { color: var(--muted); font-size: .8rem; }
html.calm .pass-body { display: flex; gap: .9rem; align-items: center; margin-top: .6rem; }
html.calm .pass-qr {
  flex: 0 0 132px; width: 132px; height: 132px; background: #fff; border-radius: 10px;
  padding: 6px; border: 1px solid var(--line);
}
html.calm .pass-qr svg { width: 100%; height: 100%; display: block; }
html.calm .pass-meta { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.45; }
html.calm .pass-no { font-size: 1.35rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
html.calm .pass-by { margin-top: .2rem; }
html.calm .pass-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
html.calm .pass-actions a {
  flex: 1 1 9rem; text-align: center; text-decoration: none; font-weight: 750; font-size: .85rem;
  padding: .55rem .6rem; border-radius: 9px; border: 1.5px solid var(--line);
  color: var(--ink); background: var(--field);
}
html.calm .pass-actions a:hover, html.calm .pass-actions a:focus-visible { border-color: var(--gold); color: var(--gold); }
html.calm .pass.locked { border-color: var(--fieldline); }
html.calm .pass.locked .pass-qr { display: none; }
html.calm .pass.done { border-style: dashed; border-color: var(--line); padding: .6rem .9rem; box-shadow: none; }

@media (max-width: 800px) {
  html.calm .at-kpis { grid-template-columns: repeat(2, 1fr); }
  html.calm .at-top { align-items: flex-start; }
}
@media (max-width: 650px) {
  html.calm .encore-layout { grid-template-columns: 72px 1fr; }
  html.calm .encore-media { width: 72px; height: 72px; }
  html.calm .encore-actions { grid-column: 1 / -1; text-align: left; }
  html.calm .encore .btn { display: block; text-align: center; }
}
@media (max-width: 420px) {
  html.calm .pass-body { flex-direction: column; align-items: stretch; }
  html.calm .pass-qr { width: min(60vw, 220px); height: auto; aspect-ratio: 1; flex-basis: auto; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { html.calm * { transition: none !important; } }

/* List tiles carry a compact price; the floor's 1.45rem price belongs to lot cards. */
html.calm a.at-tile .price, html.calm a.row .price {
  font-size: 1.05rem; font-weight: 750; margin-left: auto; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Saved-lot components own their layout independently of the auction floor. */
html.calm .bidder-dock header.at-top { max-width:1280px; margin:0 auto; padding:.6rem .75rem .4rem; display:block; }
html.calm .bidder-dock header.at-top .at-row-top { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
html.calm .bidder-dock main { padding:.75rem; max-width:1280px; margin:0 auto; display:grid;
         grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
         gap:.75rem; align-items:stretch; }
html.calm .bidder-dock .lot { min-width:0; overflow:hidden; background:var(--card); border-radius:12px; padding:1rem;
         border:1.5px solid var(--line); display:flex; flex-direction:column; }
html.calm .bidder-dock .lot.winning { border-color:var(--gold);
    background:var(--positive-bg); }
html.calm .bidder-dock .lot.losing { border-color:var(--calm-negative); }
html.calm .bidder-dock .lot img.hero { width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:8px;
                  background:var(--media); display:block; margin-bottom:.6rem; }
html.calm .bidder-dock .lot h2 { font-size:1rem; margin:0 0 .35rem; line-height:1.3;
            min-height:2.6em; overflow-wrap:break-word; }
html.calm .bidder-dock .lot h2 a { color:inherit; text-decoration:none; }
html.calm .bidder-dock .lot h2 a:hover { color:var(--gold); }
html.calm .bidder-dock .chip { display:inline-block; font-size:.68rem; font-weight:700; padding:.12rem .45rem;
          border-radius:999px; border:1.5px solid currentColor; margin:0 .3rem .5rem 0;
          letter-spacing:.02em; white-space:normal; max-width:100%; overflow-wrap:anywhere; }
html.calm .bidder-dock .chip.live { color:var(--live); }
html.calm .bidder-dock .chip.closed { color:var(--muted); }
html.calm .bidder-dock .chip.standing-win { background:var(--gold); color:var(--on-gold); }
html.calm .bidder-dock .chip.standing-lose { background:var(--negative-bg); color:var(--calm-negative); }
html.calm .bidder-dock .row { display:flex; justify-content:space-between; align-items:flex-end;
         gap:.5rem; margin-top:auto; }
html.calm .bidder-dock .price { font-size:1.5rem; font-weight:600; }
html.calm .bidder-dock .price small,
html.calm .bidder-dock .clock small { display:block; font-size:.72rem; font-weight:400;
         color:var(--muted); letter-spacing:.03em; }
html.calm .bidder-dock .clock { font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums;
           text-align:right; }
html.calm .bidder-dock .bidbtn { width:100%; margin-top:.75rem; padding:.85rem; font-size:1.05rem;
            font-weight:600; border:0; border-radius:10px; background:var(--gold);
            color:var(--on-gold); cursor:pointer; }
html.calm .bidder-dock .bidbtn:disabled { background:var(--fieldline); color:var(--closed); }
html.calm .bidder-dock .note { font-size:.85rem; color:var(--muted); margin:.4rem 0 0; min-height:1.1em; }
html.calm .bidder-dock .note.ok { color:var(--calm-positive); }
html.calm .bidder-dock .note.bad { color:var(--calm-negative); }
html.calm .bidder-dock .undock { background:none; border:1.5px solid var(--fieldline); color:var(--muted);
            border-radius:999px; padding:.2rem .6rem; font-size:.75rem;
            font-weight:700; cursor:pointer; float:right; }
html.calm .bidder-dock .undock:hover { border-color:var(--calm-negative); color:var(--calm-negative); }
html.calm .bidder-dock .muted { color:var(--muted); text-align:center; padding:2rem 1rem; font-size:.9rem;
           grid-column:1/-1; }
html.calm .bidder-dock .live-dot { font-size:.78rem; color:var(--calm-positive); }
html.calm .bidder-dock .pager { grid-column:1/-1; display:flex; gap:.6rem; flex-wrap:wrap;
           justify-content:center; padding:.5rem; }
html.calm .bidder-dock .pager a { border:1px solid var(--fieldline); border-radius:9px; padding:.55rem .75rem;
             color:var(--gold); text-decoration:none; font-size:.82rem; }
html.calm .bidder-dock .fchip { border:1.5px solid var(--fieldline); background:none; color:var(--muted);
             border-radius:999px; padding:.3rem .7rem; font-size:.8rem;
             font-weight:700; cursor:pointer; white-space:nowrap; }
html.calm .bidder-dock .fchip .n { font-variant-numeric:tabular-nums; }
html.calm .bidder-dock .fchip.active { border-color:var(--gold); color:var(--gold);
                    background:var(--gold-bg); }
@media (max-width:640px) {
html.calm .bidder-dock main { grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem; padding:.5rem; }
html.calm .bidder-dock .lot { padding:.6rem; }
html.calm .bidder-dock .bidbtn { padding:.7rem; font-size:.95rem; }
  html.calm .bidder-dock .row { flex-wrap:wrap; }
}