{% comment %}
beed — Carbon Design System v11 (dark theme, g100).
Every spacing, font size, and color token is drawn from Carbon.
The amber accent is the one intentional deviation — the signature element
per the frontend-design skill's "spend your boldness in one place" rule.
{% endcomment %}
/* ── IBM Plex (Carbon's typeface) ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;1,400&family=IBM+Plex+Serif:wght@300;400&display=swap');

/* ── Carbon token mapping (dark theme / g100) ─────────────────────────────── */
:root {
  /* Background / layer — Carbon gray-100 theme */
  --cds-background: #161616;       /* gray-100: page background */
  --cds-layer-01: #262626;         /* gray-90:  primary container (cards, tiles) */
  --cds-layer-02: #393939;         /* gray-80:  secondary container */
  --cds-layer-hover: #474747;      /* gray-80-hover */
  --cds-layer-selected: #333333;

  /* Text — Carbon tokens on g100 */
  --cds-text-primary: #f4f4f4;     /* gray-10 */
  --cds-text-secondary: #c6c6c6;   /* gray-30 */
  --cds-text-placeholder: rgba(244,244,244,0.4);
  --cds-text-disabled: rgba(244,244,244,0.25);
  --cds-text-helper: #a8a8a8;      /* gray-40 */
  --cds-text-on-color: #ffffff;
  --cds-text-error: #da1e28;

  /* Border — Carbon subtle on g100 */
  --cds-border-subtle: #393939;    /* gray-80 */
  --cds-border-subtle-01: #525252; /* gray-70 */
  --cds-border-strong: #6f6f6f;    /* gray-60 */

  /* Interactive — Carbon blue-60 */
  --cds-interactive: #0f62fe;
  --cds-interactive-hover: #0050e6;
  --cds-focus: #ffffff;            /* white focus ring on dark bg */
  --cds-link-primary: #78a9ff;     /* blue-40 */
  --cds-link-primary-hover: #a6c8ff; /* blue-30 */

  /* Support — Carbon status tokens */
  --cds-support-success: #24a148;  /* green-50 */
  --cds-support-warning: #f1c21b;  /* yellow-30 */
  --cds-support-error: #da1e28;    /* red-60 */
  --cds-support-info: #4589ff;     /* blue-50 */

  /* ── Signature accent (the one intentional deviation) ─────────────────── */
  --accent: #e59a3c;
  --accent-soft: rgba(229,154,60,.14);
  --accent-text: #f0b264;

  /* ── Carbon type scale ──────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'Courier New', monospace;
  --font-serif: 'IBM Plex Serif', 'Georgia', Times, serif;

  /* Type scale (Carbon steps in rem) */
  --fs-caption: 0.75rem;   /* 12px — label-01, caption-01, code-01 */
  --fs-body: 0.875rem;     /* 14px — body-01, heading-01 */
  --fs-body-lg: 1rem;      /* 16px — body-02 */
  --fs-heading-03: 1.25rem;/* 20px — productive-heading-03 */
  --fs-heading-04: 1.75rem;/* 28px — productive-heading-04, page h1 */
  --fs-heading-05: 2rem;   /* 32px — productive-heading-05 */

  /* ── Carbon spacing scale (rem) ─────────────────────────────────────────── */
  --sp-01: 0.125rem;  /* 2px */
  --sp-02: 0.25rem;   /* 4px */
  --sp-03: 0.5rem;    /* 8px */
  --sp-04: 0.75rem;   /* 12px */
  --sp-05: 1rem;      /* 16px — default */
  --sp-06: 1.5rem;    /* 24px */
  --sp-07: 2rem;      /* 32px */
  --sp-08: 2.5rem;    /* 40px */
  --sp-09: 3rem;      /* 48px */
  --sp-10: 4rem;      /* 64px */

  /* ── Carbon border-radius ────────────────────────────────────────────────── */
  --radius: 0;             /* sharp by default */
  --radius-sm: 2px;        /* interactive elements */
  --radius-round: 999px;   /* tags, badges */
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body {
  margin: 0; padding-top: 3rem; /* offset for fixed header */
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a{color:var(--cds-link-primary);text-decoration:none}
a:hover{text-decoration:underline;color:var(--cds-link-primary-hover)}
.wrap{max-width:99rem;margin:0 auto;padding:0 var(--sp-06)}

/* ════════════════════════════════════════════════════════════════════════════
   UI SHELL — Carbon Header pattern (48px fixed header)
   Carbon ref: .cds--header is 3rem (48px) tall, border-bottom, sticky.
   The header name uses IBM Plex Sans at 14px semibold.
   Nav items sit in a horizontal menu-bar with 16px inline padding each.
   Active items show a background highlight (not a bottom border — the
   bottom-border pattern requires JS to move an indicator bar).
   ════════════════════════════════════════════════════════════════════════════ */
.cds--header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  display: flex; align-items: center;
  height: 3rem;                       /* Carbon: exactly 48px */
  padding: 0 var(--sp-05);            /* 0 16px */
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle);
}

/* Brand / product name on the left */
.cds--header__name {
  display: flex; align-items: center; gap: var(--sp-03);
  font-family: var(--font-sans);      /* Carbon: Sans, NOT mono */
  font-size: var(--fs-body);          /* 14px */
  font-weight: 600;
  color: var(--cds-text-primary);
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
}
.cds--header__name .dot {
  width: 8px; height: 8px; border-radius: var(--radius-sm);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Context label — lighter, smaller */
.cds--header__name .context {
  font-weight: 400; color: var(--cds-text-secondary);
  font-size: var(--fs-body);
}

/* Horizontal navigation row */
.cds--header__nav {
  display: flex; align-items: stretch;
  height: 100%;                        /* fill the 48px header */
  margin-left: var(--sp-07);           /* 32px gap after brand */
  gap: var(--sp-01);                   /* 2px between items */
  overflow-x: auto;
}
/* Each nav link is a 48px-tall touch target */
.cds--header__nav a {
  display: inline-flex; align-items: center;
  height: 100%;
  padding: 0 var(--sp-05);            /* 0 16px horizontal */
  font-family: var(--font-sans);
  font-size: var(--fs-body);          /* 14px */
  font-weight: 400;
  color: var(--cds-text-secondary);
  text-decoration: none;
  border: none;                        /* no bottom border by default */
  border-radius: var(--radius);
  transition: background-color 110ms cubic-bezier(0.2,0,0.38,0.9),
              color 110ms cubic-bezier(0.2,0,0.38,0.9);
  white-space: nowrap;
}
.cds--header__nav a:hover {
  background: var(--cds-layer-hover);
  color: var(--cds-text-primary);
  text-decoration: none;
}
/* Active nav item — background highlight (Carbon does this OR a border bar) */
.cds--header__nav a.active,
.cds--header__nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
}

/* Badge inside a nav link */
.cds--header__nav a .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; height: 1.125rem;
  padding: 0 var(--sp-01);
  margin-left: var(--sp-03);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  color: var(--cds-text-on-color);
  background: var(--cds-support-error);
  border-radius: var(--radius-round);
  line-height: 1;
}

/* Right-side actions (user name + sign out) */
.cds--header__global {
  display: flex; align-items: center; gap: var(--sp-05);
  margin-left: auto;
  height: 100%;
}
.cds--header__global .user-name {
  font-family: var(--font-sans);
  font-size: var(--fs-body);           /* 14px */
  color: var(--cds-text-secondary);
}

/* ── Main content area ────────────────────────────────────────────────────── */
main{padding:var(--sp-07) 0 var(--sp-10)}
h1{font-family:var(--font-sans);font-size:var(--fs-heading-04);font-weight:400;line-height:1.28572;margin:0 0 var(--sp-01);color:var(--cds-text-primary)}
h2{font-family:var(--font-sans);font-size:var(--fs-heading-03);font-weight:400;line-height:1.4;margin:var(--sp-07) 0 var(--sp-04);color:var(--cds-text-primary)}
.sub{color:var(--cds-text-secondary);font-size:var(--fs-body-lg);margin:0 0 var(--sp-06);line-height:1.5;max-width:48rem}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--sp-03)}

/* ── Cards (Carbon Tile pattern) ──────────────────────────────────────────── */
.card{background:var(--cds-layer-01);border:1px solid var(--cds-border-subtle);padding:var(--sp-05)}
.grid{display:grid;gap:var(--sp-05)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:66rem){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:42rem){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── Stat tiles ───────────────────────────────────────────────────────────── */
.stat .n{font-family:var(--font-mono);font-size:var(--fs-heading-05);font-weight:300;line-height:1.25;color:var(--cds-text-primary)}
.stat .l{font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--cds-text-secondary);margin-top:var(--sp-03);letter-spacing:0}
.stat .n.warn{color:var(--cds-support-warning)}
.stat .n.crit{color:var(--cds-support-error)}
.stat .n.good{color:var(--cds-support-success)}
.stat .n.accent{color:var(--accent-text)}

/* ── Tables (Carbon Data Table pattern) ───────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
thead{background:var(--cds-layer-01)}
th,td{text-align:left;padding:var(--sp-04) var(--sp-05);border-bottom:1px solid var(--cds-border-subtle)}
th{font-family:var(--font-sans);font-size:var(--fs-caption);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cds-text-secondary)}
tr:hover td{background:var(--cds-layer-hover)}
.tablecard{overflow-x:auto;background:var(--cds-layer-01);border:1px solid var(--cds-border-subtle)}
.tablecard table{min-width:520px}

/* ── Tags / Pills (Carbon Tag pattern) ────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:var(--sp-01);font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:600;padding:var(--sp-01) var(--sp-03);border-radius:var(--radius-round);border:1px solid var(--cds-border-subtle);color:var(--cds-text-secondary);line-height:1.5}
.pill.good{color:var(--cds-support-success);border-color:var(--cds-support-success)}
.pill.warn{color:var(--cds-support-warning);border-color:var(--cds-support-warning)}
.pill.crit{color:var(--cds-support-error);border-color:var(--cds-support-error)}
.pill.accent{color:var(--accent-text);border-color:var(--accent)}
.code{font-family:var(--font-mono);font-weight:600;letter-spacing:.06em;background:var(--accent-soft);color:var(--accent-text);padding:var(--sp-01) var(--sp-04);border-radius:var(--radius);display:inline-block;font-size:var(--fs-caption)}

/* ── Buttons (Carbon Button pattern) ──────────────────────────────────────── */
.btn{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:400;cursor:pointer;border:1px solid transparent;background:var(--cds-layer-02);color:var(--cds-text-primary);padding:calc(var(--sp-04) - 1px) calc(var(--sp-06) - 1px);border-radius:var(--radius);display:inline-flex;align-items:center;gap:var(--sp-03);min-height:2.5rem;transition:all 110ms cubic-bezier(0.2,0,0.38,0.9);line-height:1.28572}
.btn:hover{background:var(--cds-layer-hover);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--cds-focus);outline-offset:2px}
.btn.primary{background:var(--cds-interactive);color:var(--cds-text-on-color);border-color:var(--cds-interactive)}
.btn.primary:hover{background:var(--cds-interactive-hover);border-color:var(--cds-interactive-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--cds-text-secondary)}
.btn.ghost:hover{background:var(--cds-layer-hover);color:var(--cds-text-primary)}
.btn.danger{color:var(--cds-support-error);border-color:var(--cds-support-error);background:transparent}
.btn.danger:hover{background:rgba(218,30,40,.12)}
.btn.sm{font-size:var(--fs-caption);padding:var(--sp-01) var(--sp-04);min-height:2rem;letter-spacing:.04em}

/* ── Form inputs (Carbon Text Input pattern, size-md: 40px) ───────────────── */
input,select,textarea{font-family:var(--font-sans);font-size:var(--fs-body);background:var(--cds-layer-01);border:1px solid var(--cds-border-subtle);color:var(--cds-text-primary);padding:var(--sp-04) var(--sp-05);min-height:2.5rem;width:100%;border-radius:var(--radius);transition:border-color 110ms cubic-bezier(0.2,0,0.38,0.9)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cds-focus);outline-offset:-2px;border-color:var(--cds-focus)}
input::placeholder,textarea::placeholder{color:var(--cds-text-placeholder)}
label{display:block;font-family:var(--font-sans);font-size:var(--fs-caption);font-weight:400;color:var(--cds-text-secondary);margin:var(--sp-05) 0 var(--sp-03);letter-spacing:0}
form .row{display:flex;gap:var(--sp-04);align-items:center}

/* ── Messages (Carbon Inline Notification pattern) ────────────────────────── */
.messages{display:flex;flex-direction:column;gap:var(--sp-03);margin-bottom:var(--sp-06)}
.msg{padding:var(--sp-04) var(--sp-05);font-size:var(--fs-body);background:var(--cds-layer-01);color:var(--cds-text-primary);border-left:3px solid var(--cds-border-strong);display:flex;align-items:flex-start;gap:var(--sp-03)}
.msg::before{content:'';display:inline-block;width:1rem;height:1rem;margin-top:0.125rem;flex-shrink:0;background:currentColor;mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.msg.success{border-left-color:var(--cds-support-success);background:rgba(36,161,72,.08)}
.msg.success::before{background:var(--cds-support-success);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.293-9.707l-4 4L5.5 8.5l.707-.707L7 9.293l3.293-3.293.707.707z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.293-9.707l-4 4L5.5 8.5l.707-.707L7 9.293l3.293-3.293.707.707z'/%3E%3C/svg%3E")}
.msg.error{border-left-color:var(--cds-support-error);background:rgba(218,30,40,.08)}
.msg.error::before{background:var(--cds-support-error);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM6.707 5.293L8 6.586l1.293-1.293.707.707L8.707 7.293 10 8.586l-.707.707L8 8l-1.293 1.293-.707-.707L7.293 7.293 6 6l.707-.707z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM6.707 5.293L8 6.586l1.293-1.293.707.707L8.707 7.293 10 8.586l-.707.707L8 8l-1.293 1.293-.707-.707L7.293 7.293 6 6l.707-.707z'/%3E%3C/svg%3E")}
.msg.warning{border-left-color:var(--cds-support-warning);background:rgba(241,194,27,.08)}
.msg.warning::before{background:var(--cds-support-warning);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1L15 15H1L8 1zm0 2.77L2.55 14h10.9L8 3.77zM7 6h2v4H7V6zm0 5h2v2H7v-2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1L15 15H1L8 1zm0 2.77L2.55 14h10.9L8 3.77zM7 6h2v4H7V6zm0 5h2v2H7v-2z'/%3E%3C/svg%3E")}

/* ── Utility ───────────────────────────────────────────────────────────────── */
.muted{color:var(--cds-text-secondary)} .faint{color:var(--cds-text-helper)}
.mono{font-family:var(--font-mono)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-05);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--sp-04)}
.empty{text-align:center;color:var(--cds-text-secondary);font-family:var(--font-sans);font-size:var(--fs-body);padding:var(--sp-09) var(--sp-06)}

/* ── Auth pages (login / landing — no header shell) ───────────────────────── */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-06)}
.authcard{width:100%;max-width:22.5rem}

/* ── Browse module: entry tiles + inline notice ────────────────────────────── */
/* Carbon clickable Tile: layer-02 on layer-01 page, sharp corners, hover lift
   by background only (no shadow — depth comes from the layer system). */
.linkgrid{display:grid;gap:var(--sp-04);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.linktile{display:flex;flex-direction:column;gap:var(--sp-02);background:var(--cds-layer-02);border:1px solid var(--cds-border-subtle);padding:var(--sp-05);color:var(--cds-text-primary);text-decoration:none;transition:background 110ms cubic-bezier(0.2,0,0.38,0.9)}
.linktile:hover{background:var(--cds-layer-hover);text-decoration:none}
.linktile:focus-visible{outline:2px solid var(--cds-focus);outline-offset:2px}
.linktile.primary{border-color:var(--cds-interactive)}
.linktile .t{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-03);font-size:var(--fs-body);line-height:1.28572}
.linktile .t .ext{color:var(--cds-text-secondary);font-size:var(--fs-caption)}
.linktile .d{font-size:var(--fs-caption);color:var(--cds-text-secondary);line-height:1.33333}

/* Carbon inline notification: 3px status stripe on the leading edge. */
.notice{background:var(--cds-layer-01);border:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-interactive);padding:var(--sp-05)}
.notice .h{font-size:var(--fs-body);color:var(--cds-text-primary);margin-bottom:var(--sp-03)}
.notice ol{margin:0;padding-left:var(--sp-06);color:var(--cds-text-secondary);font-size:var(--fs-body);line-height:1.42857}
.notice ol li{margin-bottom:var(--sp-02)}

/* ── Live pulse (shared: live auction page, browse grid, lot detail) ───────── */
.live-pulse{display:inline-block;width:8px;height:8px;border-radius:var(--radius-round);background:var(--cds-support-error);box-shadow:0 0 0 0 rgba(218,30,40,.6);animation:live-pulse-anim 1.5s infinite}
@keyframes live-pulse-anim{0%{box-shadow:0 0 0 0 rgba(218,30,40,.6)}70%{box-shadow:0 0 0 6px rgba(218,30,40,0)}100%{box-shadow:0 0 0 0 rgba(218,30,40,0)}}
@media (prefers-reduced-motion:reduce){.live-pulse{animation:none}}

/* ── Browse: account switcher (Carbon Content Switcher) ───────────────────── */
.switcher{display:inline-flex;border:1px solid var(--cds-border-subtle);margin-bottom:var(--sp-06);overflow:hidden}
.switcher a{padding:var(--sp-04) var(--sp-06);font-size:var(--fs-body);color:var(--cds-text-secondary);background:var(--cds-layer-01);text-decoration:none;border-right:1px solid var(--cds-border-subtle);transition:background 110ms cubic-bezier(0.2,0,0.38,0.9)}
.switcher a:last-child{border-right:0}
.switcher a:hover{background:var(--cds-layer-hover);color:var(--cds-text-primary);text-decoration:none}
.switcher a.active{background:var(--cds-interactive);color:var(--cds-text-on-color)}

/* ── Browse: filter bar ───────────────────────────────────────────────────── */
.filterrow{display:flex;flex-wrap:wrap;gap:var(--sp-05);align-items:flex-end}
.filterbar .f{display:flex;flex-direction:column;min-width:8rem}
.filterbar .f.grow{flex:1 1 18rem}
.filterbar .f.narrow{min-width:6.5rem;max-width:8rem}
.filterbar label{margin:0 0 var(--sp-03)}

/* ── Browse: vehicle result grid (Carbon clickable Tile) ──────────────────── */
.cargrid{display:grid;gap:var(--sp-05);grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.carcard{display:flex;flex-direction:column;background:var(--cds-layer-01);border:1px solid var(--cds-border-subtle);color:var(--cds-text-primary);text-decoration:none;transition:background 110ms cubic-bezier(0.2,0,0.38,0.9)}
.carcard:hover{background:var(--cds-layer-02);text-decoration:none}
.carcard:focus-visible{outline:2px solid var(--cds-focus);outline-offset:2px}
.carcard .ph{position:relative;aspect-ratio:4/3;background:var(--cds-layer-02);overflow:hidden}
.carcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.carcard .badge-live,.carcard .badge-bid{position:absolute;top:var(--sp-04);font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:600;padding:var(--sp-02) var(--sp-04);display:inline-flex;align-items:center;gap:var(--sp-03)}
.carcard .badge-live{left:var(--sp-04);background:var(--cds-background);color:var(--cds-text-primary);border:1px solid var(--cds-support-error)}
.carcard .badge-bid{right:var(--sp-04);background:var(--cds-background);color:var(--accent-text);border:1px solid var(--accent)}
.carcard .body{padding:var(--sp-05);display:flex;flex-direction:column;gap:var(--sp-03);flex:1}
.carcard .t{font-size:var(--fs-body-lg);line-height:1.375}
.carcard .meta{font-size:var(--fs-caption);color:var(--cds-text-helper)}
.carcard .specs{display:flex;flex-wrap:wrap;gap:var(--sp-02)}
.carcard .foot{margin-top:auto;padding-top:var(--sp-04);border-top:1px solid var(--cds-border-subtle)}

/* ── Browse: lot detail ───────────────────────────────────────────────────── */
.backlink{font-size:var(--fs-body);color:var(--cds-link-primary)}
.lotlayout{display:grid;gap:var(--sp-06);grid-template-columns:1fr}
@media (min-width:66rem){.lotlayout{grid-template-columns:minmax(0,2fr) minmax(18rem,1fr)}}
.gallery img#lot-hero{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--cds-layer-02)}
.gallery .thumbs{display:flex;gap:var(--sp-03);padding:var(--sp-04);overflow-x:auto}
.gallery .thumb{flex:0 0 auto;width:5rem;height:3.75rem;padding:0;border:1px solid var(--cds-border-subtle);background:none;cursor:pointer;min-height:0}
.gallery .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .thumb.active{border-color:var(--cds-interactive)}
.gallery .thumb:focus-visible{outline:2px solid var(--cds-focus);outline-offset:2px}

/* Notice variants (status stripe colour follows the message kind). */
.notice.err{border-left-color:var(--cds-support-error)}
.notice.warn{border-left-color:var(--cds-support-warning)}

/* ── Browse: auction picker tiles ──────────────────────────────────────────── */
.auctiontile{display:flex;flex-direction:column;gap:var(--sp-04);background:var(--cds-layer-01);border:1px solid var(--cds-border-subtle);padding:var(--sp-06);color:var(--cds-text-primary);text-decoration:none;transition:background 110ms cubic-bezier(0.2,0,0.38,0.9)}
.auctiontile:hover{background:var(--cds-layer-02);text-decoration:none}
.auctiontile:focus-visible{outline:2px solid var(--cds-focus);outline-offset:2px}
.auctiontile .name{font-size:var(--fs-heading-03);line-height:1.4}
.auctiontile .blurb{font-size:var(--fs-body);color:var(--cds-text-secondary);line-height:1.42857}
.auctiontile .foot{margin-top:auto;padding-top:var(--sp-04);border-top:1px solid var(--cds-border-subtle);font-size:var(--fs-caption)}
.auctiontile .go{color:var(--cds-link-primary)}
.auctiontile.off{opacity:.65;cursor:not-allowed}
.auctiontile.off .name{color:var(--cds-text-secondary)}