/* EagleStrike — the public sale floor.

   A second stylesheet rather than more of eaglestrike.css, and the two are for two
   different audiences. eaglestrike.css dresses the saleroom: a working tool, navy, held at
   arm's length in a hall under bad lighting by somebody who uses it every Saturday. This
   one dresses the shop window — near-black and gold, the first thing a member of the public
   ever sees of the business, and the thing that has to make a stranger trust it with a bid.

   Everything here is prefixed .ea- and reads its own tokens, so nothing in it can reach
   into a saleroom screen. The two files share a font and nothing else.

   House rules from the design system, kept to on purpose: rounded corners on a scale
   (8/12/18/26), free-standing cards on a gap rather than cells sharing hairlines, soft
   layered shadows instead of hard borders, pills for chips and filters, and the eyebrow
   pattern — accent dash, small-caps label, then the heading. No mono face anywhere. */

:root {
  --ea-bg: #0b0d12;
  --ea-panel: #14171f;
  --ea-panel-2: #191d27;
  --ea-line: rgba(255, 255, 255, 0.07);
  --ea-ink: #f2f3f5;
  --ea-mute: #8b91a0;

  --ea-gold: #d4a94f;
  --ea-gold-deep: #b98d33;
  --ea-blue: #3b82f6;
  --ea-green: #3ddc6b;
  --ea-red: #ff5b5b;

  /* The radius scale. Four steps, used in this order: chips and small controls, inputs and
     tiles, cards, and the big rounded panels. */
  --ea-r-sm: 8px;
  --ea-r-md: 12px;
  --ea-r-lg: 18px;
  --ea-r-xl: 26px;

  --ea-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ea-shadow-2: 0 8px 24px -14px rgba(0, 0, 0, 0.7);
  --ea-shadow-3: 0 18px 40px -18px rgba(0, 0, 0, 0.7);

  /* ---- theme-dependent pieces ----

     Everything below this line differs between the dark theme (these values) and the light
     one (the two blocks after this). The accents above are the colour of TEXT and small
     marks on the page, so the light theme deepens them until they read on off-white; the
     -fill tokens are the colour of a solid button or badge with dark type on it, and stay
     the same bright gold and green in both themes because that type needs them bright. */
  color-scheme: dark;

  --ea-gold-fill: #d4a94f;
  --ea-gold-fill-deep: #b98d33;
  --ea-green-fill: #3ddc6b;
  --ea-red-fill: #ff5b5b;

  /* Red and blue lifted for type sitting on a wash of themselves. */
  --ea-red-soft: #ff8a8a;
  --ea-red-text: #ff6b6b;
  --ea-blue-soft: #7fb0ff;

  /* Channel triplets, for the rgba() washes: over = the colour a hover or a quiet surface is
     tinted towards, glass = the header and anything else frosted over the page. */
  --ea-over-rgb: 255, 255, 255;
  --ea-glass-rgb: 13, 16, 24;

  /* The empty photo well on a lot card, and the window the bid barrel turns behind. */
  --ea-photo-a: #1c2130;
  --ea-photo-b: #10131b;
  /* The shade at the foot of a lot photo. Lighter in light, where it would otherwise grey
     out an empty well. */
  --ea-card-shade: rgba(11, 13, 18, 0.55);
  --ea-well-a: #0d1017;
  --ea-well-b: #090b11;
  --ea-placeholder: #565c6c;

  /* Which logo file shows. The dark one has its black ground baked in; the light one is
     cut out. See SaleBrand.razor. */
  --ea-logo-dark: block;
  --ea-logo-light: none;
}

/* ---------- the light theme ----------

   Two blocks with the same values, because CSS has no way to say "either of these". The
   first is somebody who picked Light; the second is a device set to light mode where nobody
   has picked anything. Picking Dark sets data-theme="dark", which the :not() steps aside
   for. The choice itself is kept by eaglestrike.js, and set before first paint by the
   script in the host page's <head>. Keep the two blocks identical. */
:root[data-theme="light"] {
  color-scheme: light;

  --ea-bg: #e4dfd4;
  --ea-panel: #f3f0e9;
  --ea-panel-2: #ebe7de;
  --ea-line: rgba(20, 22, 30, 0.15);
  --ea-ink: #121419;
  --ea-mute: #4f5561;

  --ea-gold: #7a570d;
  --ea-gold-deep: #604409;
  --ea-blue: #1d4ed8;
  --ea-green: #146c33;
  --ea-red: #b0222a;

  --ea-shadow-1: 0 1px 2px rgba(20, 22, 30, 0.1);
  --ea-shadow-2: 0 10px 26px -14px rgba(20, 22, 30, 0.35);
  --ea-shadow-3: 0 18px 40px -18px rgba(20, 22, 30, 0.4);

  --ea-red-soft: #a51f26;
  --ea-red-text: #b0222a;
  --ea-blue-soft: #1d4ed8;

  --ea-over-rgb: 20, 22, 30;
  --ea-glass-rgb: 228, 223, 212;

  --ea-photo-a: #d6d0c3;
  --ea-photo-b: #c9c2b3;
  --ea-card-shade: rgba(20, 22, 30, 0.2);
  --ea-well-a: #f3f0e9;
  --ea-well-b: #e7e2d8;
  --ea-placeholder: #6b707b;

  --ea-logo-dark: none;
  --ea-logo-light: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --ea-bg: #e4dfd4;
    --ea-panel: #f3f0e9;
    --ea-panel-2: #ebe7de;
    --ea-line: rgba(20, 22, 30, 0.15);
    --ea-ink: #121419;
    --ea-mute: #4f5561;

    --ea-gold: #7a570d;
    --ea-gold-deep: #604409;
    --ea-blue: #1d4ed8;
    --ea-green: #146c33;
    --ea-red: #b0222a;

    --ea-shadow-1: 0 1px 2px rgba(20, 22, 30, 0.1);
    --ea-shadow-2: 0 10px 26px -14px rgba(20, 22, 30, 0.35);
    --ea-shadow-3: 0 18px 40px -18px rgba(20, 22, 30, 0.4);

    --ea-red-soft: #a51f26;
    --ea-red-text: #b0222a;
    --ea-blue-soft: #1d4ed8;

    --ea-over-rgb: 20, 22, 30;
    --ea-glass-rgb: 228, 223, 212;

    --ea-photo-a: #d6d0c3;
    --ea-photo-b: #c9c2b3;
    --ea-card-shade: rgba(20, 22, 30, 0.2);
    --ea-well-a: #f3f0e9;
    --ea-well-b: #e7e2d8;
    --ea-placeholder: #6b707b;

    --ea-logo-dark: none;
    --ea-logo-light: block;
  }
}

/* Kept as a no-op wrapper so a page can be dropped into either shell while the saleroom
   still exists. The column and the padding now come from .ea-main above. */
.ea-floor { color: var(--ea-ink); }

/* Centred: pages that narrow it with their own max-width (My purchases, notifications,
   "couldn't find that page") otherwise sat against the left edge. */
.ea-floor__inner { width: 100%; margin-inline: auto; }

.ea-muted { color: var(--ea-mute); }

.ea-small { font-size: 12px; }

.ea-error {
  background: rgba(255, 91, 91, 0.1);
  border: 1px solid rgba(255, 91, 91, 0.25);
  color: var(--ea-red-soft);
  border-radius: var(--ea-r-md);
  padding: 11px 13px;
  font-size: 13px;
  margin: 0 0 12px;
  border-radius: 10px;
}

.ea-empty {
  text-align: center;
  color: var(--ea-mute);
  padding: 56px 20px;
  font-size: 15px;
}

/* ---------- the sale's own shell ----------

   The public floor does NOT reuse the saleroom's shell, and that is the single most
   important thing in this file. The saleroom has a navy top bar naming the open house and
   sale, and a bottom tab bar with a raised centre button — both right for a clerk holding a
   phone in a hall, and both wrong here. A shop window has a brand, a way in, and the stock.

   So: a sticky header with the brand on the left and the way to your account on the right,
   a second row of tabs on a phone, no bottom bar at all, and one 1080px column down the
   middle that the header, the hero and the grid all line up on. */

.ea-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--ea-bg);
  color: var(--ea-ink);
}

.ea-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ea-line);
  padding-top: env(safe-area-inset-top, 0px);
}

/* The frosted glass, on a layer behind the header rather than on the header itself. A
   backdrop-filter on the header would make it the containing block for everything fixed inside
   it, and the sign-in pop-up (.ea-modal, rendered by HeaderAccount) could then only centre
   itself within the header bar instead of the screen. */
.ea-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--ea-glass-rgb), 0.85);
  backdrop-filter: blur(14px);
}

.ea-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1080px;
  height: 56px;
  margin: 0 auto;
  padding: 0 16px;
}

.ea-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.ea-brand__img { display: var(--ea-logo-dark); height: 34px; width: auto; border-radius: 4px; }
.ea-brand__img--light { display: var(--ea-logo-light); border-radius: 0; }

/* The wordmark shown until a logo file is dropped in beside this stylesheet. Sized to the
   same 34/40px band so swapping one for the other does not move the header. */
.ea-brand__mark { display: block; flex: none; }

.ea-brand__word { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }

.ea-brand__name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ea-ink);
}

.ea-brand__sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ea-gold);
}

.ea-nav { display: flex; align-items: center; gap: 4px; }

/* The brand and the page tabs sit together on the left; the account controls on the right. */
.ea-header__left { display: flex; align-items: center; gap: 28px; min-width: 0; }

/* Hidden on a phone, where the same two destinations are the row of tabs under the header.
   Showing both would be the same navigation twice in 120 vertical pixels. */
.ea-nav__btn {
  display: none;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ea-mute);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ea-nav__btn--on { background: rgba(var(--ea-over-rgb), 0.06); color: var(--ea-ink); }

.ea-account {
  margin-left: 6px;
  padding: 8px 16px;
  border: 1px solid var(--ea-line);
  border-radius: 999px;
  background: rgba(var(--ea-over-rgb), 0.05);
  color: var(--ea-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ea-account:disabled { opacity: 0.6; cursor: default; }

/* Room between the picture and "Log out", so they read as two controls. */
.ea-who + .ea-account { margin-left: 10px; }

/* Who is signed in: the Google account's picture, or its initial on a colour of its own, the
   way Google draws it. Not a link — just who is signed in, with the name and email as its
   tooltip. */
.ea-who {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 50%;
  cursor: default;
}

.ea-who__pic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(var(--ea-over-rgb), 0.08);
}

.ea-who__pic--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.ea-who__error {
  position: absolute;
  top: 100%;
  right: 16px;
  max-width: 280px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--ea-r-sm);
  background: var(--ea-panel-2);
  box-shadow: var(--ea-shadow-2);
  color: var(--ea-red);
  font-size: 13px;
  line-height: 1.4;
}

/* The sign-in pop-up the header's "Sign in" opens: Google, or an emailed one-time link, in the
   middle of the screen over a dimmed page. */
.ea-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  animation: ea-modal-in 0.15s ease-out;
}

/* The page behind stays put while the pop-up is open. */
body:has(.ea-modal) { overflow: hidden; }

.ea-signin {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--ea-line);
  border-radius: 18px;
  background: var(--ea-panel);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6);
  color: var(--ea-ink);
  font-size: 14px;
  text-align: left;
  animation: ea-signin-in 0.18s ease-out;
}

@keyframes ea-modal-in { from { opacity: 0; } }

@keyframes ea-signin-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
  .ea-modal, .ea-signin { animation: none; }
}

.ea-signin__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.ea-signin__title { font-size: 17px; font-weight: 700; color: var(--ea-ink); }

.ea-signin__close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ea-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ea-signin__close:hover { background: rgba(var(--ea-over-rgb), 0.06); color: var(--ea-ink); }

.ea-signin__google,
.ea-signin__apple { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Pay by EFT (My purchases), in the sign-in pop-up's frame: what to transfer, the reference to
   quote, and the house's bank details. The reference is the one thing a buyer must not get
   wrong — it is how the house knows whose money it is — so it is the thing in gold. */
.ea-eft__amount { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }

.ea-eft__for { margin: 2px 0 16px; color: var(--ea-mute); font-size: 13px; }

.ea-eft__ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ea-gold);
  border-radius: var(--ea-r-md);
  background: rgba(212, 169, 79, 0.08);
}

.ea-eft__ref-label { color: var(--ea-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.ea-eft__ref-value { margin-top: 3px; font-size: 21px; font-weight: 800; letter-spacing: 0.04em; overflow-wrap: anywhere; }

.ea-eft__rows { margin-bottom: 14px; }

.ea-eft__row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 7px 0; border-top: 1px solid var(--ea-line); }

.ea-eft__row:last-child { border-bottom: 1px solid var(--ea-line); }

.ea-eft__k { flex: 0 0 116px; color: var(--ea-mute); font-size: 13px; }

.ea-eft__v { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.ea-eft__copy {
  flex: none;
  padding: 6px 11px;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-sm);
  background: rgba(var(--ea-over-rgb), 0.04);
  color: var(--ea-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ea-eft__copy:hover { background: rgba(var(--ea-over-rgb), 0.08); }

.ea-eft__copy:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 2px; }

/* The house's own note — where to send proof of payment. Its line breaks are the house's. */
.ea-eft__note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--ea-r-sm);
  background: rgba(var(--ea-over-rgb), 0.04);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

/* "or" between two ways in, with a rule either side. Used on /login and /account too. */
.ea-signin__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--ea-mute);
  font-size: 12px;
}

.ea-signin__or::before,
.ea-signin__or::after { content: ""; flex: 1; height: 1px; background: var(--ea-line); }

/* On a phone, the page tabs are a row under the header rather than a bar at the bottom. There are
   only ever two of them, and a bottom bar for two destinations spends a lot of thumb room to
   say very little. */
.ea-mtabs {
  display: flex;
  gap: 6px;
  padding: 8px 16px 10px;
  border-top: 1px solid var(--ea-line);
}

.ea-mtab {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--ea-line);
  border-radius: 10px;
  background: rgba(var(--ea-over-rgb), 0.04);
  color: var(--ea-mute);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ea-mtab--on {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--ea-blue-soft);
}

.ea-main {
  flex: 1;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ---------- eyebrow ---------- */

.ea-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ea-mute);
}

.ea-eyebrow__mark {
  display: inline-block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ea-gold);
}

/* ---------- hero ---------- */

.ea-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--ea-line);
}

/* Decorative only, and aria-hidden in the markup. A blue-to-gold bloom behind the heading,
   which is what stops a near-black page reading as an unstyled one. */
.ea-hero__glow {
  position: absolute;
  top: -140px;
  right: -100px;
  z-index: 0;
  width: 520px;
  height: 400px;
  pointer-events: none;
  background: radial-gradient(closest-side,
      rgba(59, 130, 246, 0.13), rgba(212, 169, 79, 0.05) 55%, transparent 75%);
}

.ea-hero__inner { position: relative; z-index: 1; padding: 18px 0 32px; }

.ea-hero__title {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
}

.ea-hero__title em { font-style: normal; color: var(--ea-gold); }

.ea-hero__sub {
  max-width: 520px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ea-mute);
}

/* Under a past auction's headline: the sale lined up to take its place. */
.ea-hero__next {
  max-width: 520px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ea-mute);
}

.ea-hero__next strong { font-weight: 700; color: var(--ea-ink); }

.ea-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px 28px;
  margin-top: 32px;
}

.ea-metric__num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.ea-metric__num--live { color: var(--ea-green); }

.ea-metric__num--gold { color: var(--ea-gold); }

.ea-metric__label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ea-mute);
}

.ea-metric__divide { display: none; }

.ea-livedot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--ea-green);
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22);
}

.ea-livedot--sm {
  width: 5px;
  height: 5px;
  margin-right: 5px;
  box-shadow: none;
  background: currentColor;
  vertical-align: baseline;
}

/* ---------- terms strip ---------- */

/* One hairline of gap between tiles, coloured like the border, so the strip reads as one
   object rather than four cards. The only place in this file that does — a terms strip is a
   table of facts, not a set of things to tap. */
.ea-terms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  background: var(--ea-line);
}

.ea-term { background: var(--ea-panel); padding: 16px 18px; }

.ea-term__label {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ea-mute);
}

.ea-term__value { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }

.ea-term__note { margin-top: 3px; font-size: 11.5px; color: var(--ea-mute); }

/* ---------- filters ---------- */

.ea-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ea-filters::-webkit-scrollbar { height: 0; }

.ea-filter {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--ea-line);
  border-radius: 999px;
  background: var(--ea-panel);
  color: var(--ea-mute);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ea-filter--on { background: var(--ea-ink); border-color: var(--ea-ink); color: var(--ea-bg); }

.ea-filter__count {
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(var(--ea-over-rgb), 0.08);
  color: var(--ea-mute);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.ea-filter--on .ea-filter__count { background: rgba(var(--ea-glass-rgb), 0.15); color: var(--ea-bg); }

/* ---------- lot cards ---------- */

.ea-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* The tab bar is focused only to scroll back up when the lot page changes; the bar itself
   isn't a control. */
.ea-filters:focus { outline: none; }

.ea-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ea-line);
  border-radius: 16px;
  background: var(--ea-panel);
  color: var(--ea-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 280ms ease, border-color 280ms ease;
}

.ea-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ea-shadow-3);
  border-color: rgba(212, 169, 79, 0.35);
}

.ea-card:hover .ea-card__photo { transform: scale(1.04); }

/* The card the floor hands the focus back to, on the way back from a lot (LotCard.TakeFocus):
   a ring for a keyboard, nothing for a finger. */
.ea-card:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 3px; }

.ea-card:focus:not(:focus-visible) { outline: none; }

.ea-card__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, var(--ea-photo-a), var(--ea-photo-b));
}

.ea-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ea-card__glyph { font-size: 52px; opacity: 0.85; }

.ea-card__grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--ea-card-shade), transparent 42%);
}

.ea-card__lot {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(11, 13, 18, 0.55);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f4f2ec;
}

/* How many photographs the lot has, when it has more than the cover. Same glass as the lot
   number opposite. */
.ea-card__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.55);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  color: #f4f2ec;
  font-variant-numeric: tabular-nums;
}

.ea-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ea-badge--live { background: rgba(11, 30, 18, 0.7); color: var(--ea-green-fill); }
.ea-badge--soon { background: rgba(30, 24, 10, 0.7); color: var(--ea-gold-fill); }
.ea-badge--done { background: rgba(11, 13, 18, 0.7); color: #c2c8d4; }

/* Static position for the detail page, where the badge sits in the flow above the title
   rather than floating on a photograph. */
.ea-badge--inline { position: static; }

.ea-card__body { padding: 16px 18px 18px; }

.ea-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 40px;
  margin-bottom: 14px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.1px;
}

.ea-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ea-mute);
}

.ea-card__price {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

.ea-card__meta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }

.ea-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--ea-line);
  font-size: 12.5px;
  color: var(--ea-mute);
  font-variant-numeric: tabular-nums;
}

.ea-card__foot b { font-weight: inherit; }

/* The clock line is the one gold thing in the footer, as in the artifact — muted once closed. */
.ea-card__when { color: var(--ea-gold); font-weight: 600; }

.ea-card__when--done { color: var(--ea-mute); }

.ea-card__dot { color: var(--ea-line); }

/* ---------- countdown ---------- */

.ea-countdown { display: flex; gap: 4px; justify-content: flex-end; }

.ea-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(var(--ea-over-rgb), 0.05);
}

.ea-unit__n {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--ea-gold);
  font-variant-numeric: tabular-nums;
}

.ea-unit__u {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ea-mute);
}

.ea-ended { font-size: 20px; font-weight: 700; color: var(--ea-mute); }

/* ---------- lot detail ---------- */

.ea-back {
  margin-bottom: 16px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ea-mute);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ea-detail { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }

.ea-detail__media { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* A fixed 4:3 window with the whole photograph inside it rather than cropped to fill: a lot's
   photographs come in every shape, and the one a bidder needs may be the detail at the edge. */
.ea-detail__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  min-height: 200px;
  border: 1px solid var(--ea-line);
  border-radius: 16px;
  background: var(--ea-panel-2);
  overflow: hidden;
}

.ea-detail__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.ea-detail__img .ea-badge { top: 14px; right: auto; left: 14px; }

.ea-detail__glyph { font-size: 76px; opacity: 0.9; padding: 40px 0; }

.ea-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.55);
  backdrop-filter: blur(6px);
  color: #f4f2ec;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ea-gallery__nav:hover { background: rgba(11, 13, 18, 0.78); }

.ea-gallery__nav:focus-visible { outline: 2px solid var(--ea-gold-fill); outline-offset: 2px; }

.ea-gallery__nav--prev { left: 10px; }

.ea-gallery__nav--next { right: 10px; }

.ea-gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.55);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  color: #f4f2ec;
  font-variant-numeric: tabular-nums;
}

.ea-gallery__thumbs {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ea-gallery__thumb {
  flex: none;
  width: 60px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--ea-panel-2);
  opacity: 0.65;
  cursor: pointer;
}

.ea-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ea-gallery__thumb:hover { opacity: 1; }

.ea-gallery__thumb--on { border-color: var(--ea-gold); opacity: 1; }

.ea-lotno {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ea-mute);
}

.ea-detail__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.6px;
}

.ea-detail__desc {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ea-mute);
}

.ea-pricebox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--ea-line);
  border-radius: 16px;
  background: var(--ea-panel);
}

.ea-bigprice {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.ea-subtle { margin-top: 6px; font-size: 13px; color: var(--ea-mute); }

/* ---------- banners ---------- */

.ea-banner {
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-md);
  background: rgba(var(--ea-over-rgb), 0.04);
  font-size: 13px;
  color: var(--ea-mute);
}

.ea-banner--lead {
  background: rgba(52, 199, 89, 0.1);
  border-color: rgba(52, 199, 89, 0.3);
  color: var(--ea-green);
  font-weight: 600;
}

.ea-banner--warn {
  background: rgba(201, 162, 77, 0.1);
  border-color: rgba(201, 162, 77, 0.28);
  color: var(--ea-gold);
}

.ea-banner--tap {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: rgba(201, 162, 77, 0.08);
  border-color: rgba(201, 162, 77, 0.25);
  color: var(--ea-gold);
}

/* ---------- the bid barrel ---------- */

.ea-barrel {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--ea-line);
  border-radius: 16px;
  background: var(--ea-panel);
}

.ea-barrel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.ea-barrel__reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ea-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ea-barrel__reset:disabled { opacity: 0.4; cursor: default; }

.ea-barrel__roller { display: flex; align-items: stretch; gap: 10px; }

.ea-step {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-md);
  background: var(--ea-panel-2);
  color: var(--ea-ink);
  font: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.ea-step:disabled { opacity: 0.4; cursor: default; }

/* The window the reels turn behind. touch-action:none is what lets a drag on a phone move
   the barrel instead of scrolling the page. */
.ea-window {
  position: relative;
  flex: 1;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-md);
  background: linear-gradient(180deg, var(--ea-well-a), var(--ea-well-b));
  box-shadow: inset 0 1px 0 rgba(var(--ea-over-rgb), 0.04);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.ea-window:active { cursor: grabbing; }

.ea-window__row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
}

.ea-fade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 40%;
  pointer-events: none;
}

.ea-fade--top { top: 0; background: linear-gradient(var(--ea-well-b), transparent); }
.ea-fade--bot { bottom: 0; background: linear-gradient(transparent, var(--ea-well-b)); }

.ea-guide {
  position: absolute;
  left: 14px;
  right: 14px;
  z-index: 4;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(212, 169, 79, 0.35), transparent);
}

.ea-guide--top { top: 10px; }
.ea-guide--bot { bottom: 10px; }

.ea-reel { position: relative; display: inline-block; width: 26px; height: 64px; overflow: hidden; }

.ea-reel__strip { transition: transform 340ms cubic-bezier(0.22, 0.85, 0.24, 1); }

.ea-reel__digit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ea-gold);
  font-variant-numeric: tabular-nums;
}

.ea-reel--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ea-gold);
}

.ea-hint {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--ea-mute);
}

/* ---------- the maximum ---------- */

.ea-max {
  margin: 14px 0;
  padding: 13px;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-md);
  background: rgba(var(--ea-over-rgb), 0.03);
}

.ea-max__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ea-max__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.ea-max__tag {
  padding: 2px 7px;
  border: 1px solid rgba(212, 169, 79, 0.28);
  border-radius: 999px;
  background: rgba(212, 169, 79, 0.12);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ea-gold);
}

.ea-max__val {
  font-size: 14px;
  font-weight: 700;
  color: var(--ea-gold);
  font-variant-numeric: tabular-nums;
}

.ea-max__row { display: flex; align-items: center; gap: 10px; }

.ea-max__step {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ea-line);
  border-radius: 10px;
  background: var(--ea-panel-2);
  color: var(--ea-ink);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ea-max__step:disabled { opacity: 0.4; cursor: default; }

.ea-max__track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--ea-over-rgb), 0.07);
}

.ea-max__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ea-gold-deep), var(--ea-gold));
  transition: width 200ms ease;
}

.ea-max__help { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ea-mute); }

/* ---------- the button that costs money ---------- */

.ea-place {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: var(--ea-r-md);
  background: linear-gradient(180deg, var(--ea-gold-fill), var(--ea-gold-fill-deep));
  color: #1a1408;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 6px 20px -8px rgba(212, 169, 79, 0.5);
}

.ea-place:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

.ea-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  border: 0;
  border-radius: var(--ea-r-md);
  background: #25d366;
  color: #052e16;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ea-btn {
  padding: 13px 18px;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-md);
  background: rgba(var(--ea-over-rgb), 0.05);
  color: var(--ea-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ea-btn--gold { background: var(--ea-gold-fill); border-color: var(--ea-gold-fill); color: #141210; font-weight: 700; }

.ea-btn--danger {
  background: rgba(255, 80, 80, 0.09);
  border-color: rgba(255, 80, 80, 0.22);
  color: var(--ea-red-text);
}

.ea-btn--block { display: block; width: 100%; }

.ea-btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- bid history ---------- */

.ea-history { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--ea-line); }

.ea-history__title { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }

.ea-history__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ea-line);
  font-size: 15px;
}

.ea-history__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ea-mute); }

.ea-history__row--lead .ea-history__who { color: var(--ea-ink); font-weight: 700; }

.ea-history__amount { font-weight: 700; font-variant-numeric: tabular-nums; }

.ea-tag {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.ea-tag--lead { background: rgba(52, 199, 89, 0.14); color: var(--ea-green); }

.ea-tag--auto {
  background: rgba(var(--ea-over-rgb), 0.06);
  color: var(--ea-mute);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ea-tag--you { background: rgba(212, 169, 79, 0.14); color: var(--ea-gold); }

/* ---------- notifications ---------- */

.ea-notifs { display: flex; flex-direction: column; gap: 10px; }

.ea-notif {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  background: rgba(var(--ea-over-rgb), 0.04);
  color: var(--ea-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ea-notif--outbid { background: rgba(201, 162, 77, 0.1); border-color: rgba(201, 162, 77, 0.3); }
.ea-notif--won { background: rgba(52, 199, 89, 0.1); border-color: rgba(52, 199, 89, 0.3); }

.ea-notif__icon { flex: none; font-size: 20px; line-height: 1.2; }

.ea-notif__msg { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }

.ea-notif__time { display: block; margin-top: 4px; font-size: 12px; color: var(--ea-mute); }

.ea-notif__dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ea-gold);
}

/* ---------- the theme button ----------

   The bell's shape without the bell's states: a round 40px button that sits in the same row
   and so has to look like it belongs there. */

.ea-theme {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ea-line);
  border-radius: 999px;
  background: rgba(var(--ea-over-rgb), 0.05);
  color: var(--ea-ink);
  cursor: pointer;
}

.ea-theme:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 2px; }


/* ---------- the bell ---------- */

.ea-bell {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ea-line);
  border-radius: 999px;
  background: rgba(var(--ea-over-rgb), 0.05);
  color: var(--ea-ink);
  cursor: pointer;
}

.ea-bell--on { background: rgba(201, 162, 77, 0.16); border-color: rgba(201, 162, 77, 0.35); color: var(--ea-gold); }

.ea-bell__count {
  position: absolute;
  top: -3px;
  right: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--ea-bg);
  border-radius: 999px;
  background: var(--ea-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

/* ---------- account / forms ---------- */

.ea-panel {
  max-width: 460px;
  margin: 12px auto;
  padding: 26px;
  border: 1px solid var(--ea-line);
  border-radius: 22px;
  background: var(--ea-panel);
}

/* The lot form: the artifact's form card — a little tighter and squarer than the auth panel. */
.ea-panel--wide { max-width: 620px; padding: 22px; border-radius: 18px; }

.ea-panel__centre { text-align: center; }

.ea-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ea-gold-fill), var(--ea-gold-fill-deep));
  color: #1a1408;
  font-size: 24px;
  font-weight: 700;
}

.ea-h2 { margin: 12px 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.3px; }

.ea-h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }

.ea-pill {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.ea-pill--ok { background: rgba(52, 199, 89, 0.14); color: var(--ea-green); }
.ea-pill--wait { background: rgba(201, 162, 77, 0.14); color: var(--ea-gold); }
.ea-pill--bad { background: rgba(255, 80, 80, 0.12); color: var(--ea-red-text); }
.ea-pill--done { background: rgba(var(--ea-over-rgb), 0.06); color: var(--ea-mute); }

/* Sold: gold, the house colour, rather than green — green is "bidding now" on the same row. */
.ea-pill--sold { background: rgba(201, 162, 77, 0.16); color: var(--ea-gold); }

/* Carried to or from another auction. Blue, because it is information about the lot's
   history rather than its state. */
.ea-pill--info { background: rgba(59, 130, 246, 0.14); color: var(--ea-blue-soft); }

/* A label that opens something — the carry labels on the Admin screen. */
.ea-pill--link { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }

.ea-pill--link:hover { text-decoration: underline; }

.ea-pill--link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- the Register to bid button, on the sale floor ---------- */

.ea-regcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 26px;
}

.ea-regcta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ea-gold-fill), var(--ea-gold-fill-deep));
  color: #1a1408;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1px;
  cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(212, 169, 79, 0.6);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ea-regcta__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(212, 169, 79, 0.7); }

.ea-regcta__btn:disabled { opacity: 0.7; cursor: default; }

.ea-regcta__note { max-width: 340px; font-size: 13px; line-height: 1.45; color: var(--ea-mute); }

.ea-regcta--done .ea-pill { font-size: 13px; }

@media (max-width: 699px) {
  .ea-regcta__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-regcta__btn { transition: none; }
  .ea-regcta__btn:hover:not(:disabled) { transform: none; }
}

/* ---------- registering to bid, on the lot page ---------- */

.ea-register {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(212, 169, 79, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(212, 169, 79, 0.08), rgba(212, 169, 79, 0.03));
}

.ea-register__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.ea-register__title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }

.ea-register__text { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ea-mute); }

/* ---------- admin: which sale ----------

   The strip above the lots on the Admin screen: the sale being managed, where it stands
   (on the live site, up next, finished), and the way to line up another. */
.ea-salebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  background: var(--ea-panel);
}

.ea-salebar__pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }

.ea-salebar__pick .ea-input { padding: 9px 12px; font-size: 14px; }

/* ---------- auction picker ----------

   Components/SalePicker.razor, the "Managing" field. A button dressed as an input that shows
   the auction's name, its status label and when it runs; the list opens under it, and as a
   sheet from the bottom of the screen on a phone. */
.ea-pick { position: relative; flex: 1; min-width: 0; }

.ea-pick__field { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }

.ea-pick__name { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.ea-pick__field .ea-pill,
.ea-pick__opt .ea-pill { flex: none; padding: 3px 9px; font-size: 11.5px; line-height: 1.4; }

.ea-pick__when { flex: 1; min-width: 0; overflow: hidden; color: var(--ea-mute); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.ea-pick__chevron { flex: none; width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--ea-mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }

.ea-pick__field[aria-expanded="true"] .ea-pick__chevron { transform: rotate(180deg); }

.ea-pick__backdrop { position: fixed; inset: 0; z-index: 60; }

.ea-pick__pop {
  position: absolute;
  z-index: 61;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  background: var(--ea-panel-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  outline: none;
}

.ea-pick__group { padding: 10px 10px 4px; color: var(--ea-mute); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.ea-pick__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--ea-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ea-pick__opt:hover { background: rgba(var(--ea-over-rgb), 0.06); }

.ea-pick__opt:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: -2px; }

.ea-pick__opt--on,
.ea-pick__opt--on:hover { border-color: rgba(201, 162, 77, 0.35); background: rgba(201, 162, 77, 0.08); }

.ea-pick__optmain { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }

.ea-pick__optname { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.ea-pick__optwhen { color: var(--ea-mute); font-size: 12px; }

.ea-pick__check { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ea-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 699px) {
  .ea-pick__when { display: none; }

  /* The "Managing" label goes above the field and the name may take two lines, so a phone
     shows "Demo Auction" rather than "Demo Auc…" beside the status pill. */
  .ea-salebar__pick { flex-basis: 100%; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .ea-salebar__pick > .ea-field__label { flex-basis: 100%; }

  .ea-pick__name {
    display: -webkit-box;
    flex: 1 1 auto;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .ea-pick__backdrop { background: rgba(0, 0, 0, 0.45); }

  .ea-pick__pop {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    min-width: 0;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
}

/* Its own width first, so when the sale's buttons don't fit beside it they wrap under it
   rather than squeezing the name to one letter a line. */
.ea-salebar__name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; }

.ea-salebar .ea-pill { white-space: nowrap; }

.ea-salebar__new,
.ea-salebar__btn { padding: 8px 14px; border-radius: 9px; font-size: 13px; white-space: nowrap; }

/* Asking before something that can't be undone — settling a sale. Inline, under the sale bar,
   rather than a browser dialog. */
.ea-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; line-height: 1.5; }

.ea-confirm__actions { display: flex; gap: 8px; }

.ea-confirm__actions .ea-btn { padding: 8px 14px; border-radius: 9px; font-size: 13px; }

.ea-stats { display: flex; gap: 12px; margin-top: 18px; }

.ea-stat { flex: 1; padding: 14px; border-radius: var(--ea-r-md); background: rgba(var(--ea-over-rgb), 0.04); }

.ea-stat__n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

.ea-stat__l { margin-top: 2px; font-size: 12px; color: var(--ea-mute); }

/* ---------- buyers ----------

   Components/SaleBuyers.razor, the Buyers tab on the Admin screen: a card per buyer with what
   they won and what they owe. */
.ea-buyers__stats { flex-wrap: wrap; margin-top: 0; }

.ea-buyers__stats .ea-stat { min-width: 140px; }

.ea-stat--owed .ea-stat__n { color: var(--ea-gold); }

.ea-buyers__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 12px; }

.ea-buyers__search { flex: 1; min-width: 200px; padding: 10px 12px; font-size: 14px; }

.ea-segs--sm .ea-seg { flex: none; padding: 7px 13px; }

.ea-buyers { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }

/* Focused only to scroll back up when the page changes; it isn't a control. */
.ea-buyers:focus { outline: none; }

.ea-buyer { padding: 16px; border: 1px solid var(--ea-line); border-radius: 14px; background: var(--ea-panel); }

.ea-buyer__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }

.ea-buyer__who { min-width: 0; }

.ea-buyer__name { font-size: 16px; font-weight: 700; }

.ea-buyer__paddle { color: var(--ea-mute); font-size: 13px; font-weight: 500; }

.ea-buyer__contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }

.ea-buyer__contact a { color: var(--ea-blue-soft); text-decoration: none; }

.ea-buyer__contact a:hover { text-decoration: underline; }

.ea-buyer__owed { text-align: right; }

.ea-buyer__owed .ea-pill { padding: 3px 9px; font-size: 11.5px; }

.ea-buyer__amount { margin-top: 6px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.ea-buyer__lots { margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ea-line); list-style: none; }

.ea-buyer__lots li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ea-line); font-size: 14px; }

.ea-buyer__lotno { flex: none; min-width: 34px; color: var(--ea-mute); font-variant-numeric: tabular-nums; }

.ea-buyer__lottitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ea-buyer__amt { flex: none; font-variant-numeric: tabular-nums; }

.ea-buyer__sums { display: grid; grid-template-columns: 1fr auto; gap: 5px 0; max-width: 340px; margin: 12px 0 0 auto; font-size: 13px; }

.ea-buyer__sums dt { color: var(--ea-mute); }

/* The space between the columns is padding rather than grid gap, so the rule over Total runs
   unbroken across both. */
.ea-buyer__sums dd { margin: 0; padding-left: 18px; font-variant-numeric: tabular-nums; text-align: right; }

.ea-buyer__sums .ea-buyer__rule { padding-top: 6px; border-top: 1px solid var(--ea-line); color: var(--ea-ink); font-weight: 700; }

.ea-buyer__sums .ea-buyer__due { color: var(--ea-ink); font-weight: 700; }

/* ---------- my purchases ----------

   Pages/Purchases.razor, a bidder's own wins. Built on the Buyers-tab card (.ea-buyer) with
   pictures on the lots and the where-to-collect, how-to-pay block underneath. */
.ea-mylots { margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ea-line); list-style: none; }

.ea-mylot { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ea-line); }

.ea-mylot .ea-thumb { width: 42px; height: 42px; font-size: 20px; }

.ea-mylot__main { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.ea-mylot__title { overflow: hidden; color: var(--ea-ink); font-size: 14px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }

a.ea-mylot__title:hover { text-decoration: underline; }

.ea-mylot__amt { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }

.ea-mypay { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ea-line); font-size: 13px; }

.ea-mypay__label { margin-bottom: 6px; color: var(--ea-mute); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.ea-mypay__row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }

.ea-myinfo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--ea-r-md);
  background: rgba(var(--ea-over-rgb), 0.04);
  font-size: 13px;
}

.ea-myinfo dt { color: var(--ea-mute); }

.ea-myinfo dd { margin: 0; }

/* ---------- pager ----------

   Components/Pager.razor, under long lists: how many are showing, then Previous, the page
   numbers and Next. On a phone the arrows lose their words. */
.ea-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; }

.ea-pager__range { color: var(--ea-mute); font-size: 13px; font-variant-numeric: tabular-nums; }

.ea-pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ea-pager__btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ea-line);
  border-radius: 9px;
  background: rgba(var(--ea-over-rgb), 0.05);
  color: var(--ea-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.ea-pager__btn:hover:not(:disabled) { background: rgba(var(--ea-over-rgb), 0.1); }

.ea-pager__btn:disabled { opacity: 0.4; cursor: default; }

.ea-pager__btn:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 2px; }

.ea-pager__btn--on,
.ea-pager__btn--on:hover:not(:disabled) { border-color: var(--ea-gold-fill); background: var(--ea-gold-fill); color: #141210; }

.ea-pager__gap { min-width: 16px; color: var(--ea-mute); text-align: center; }

@media (max-width: 520px) {
  .ea-pager__word { display: none; }
  .ea-pager { justify-content: center; }
  .ea-pager__range { flex-basis: 100%; text-align: center; }
}

/* Paying from My purchases: "Pay all" under what's owed, and a small "Pay R…" per lot. */
.ea-paybtn { margin-top: 10px; padding: 9px 16px; border-radius: 10px; font-size: 13px; white-space: nowrap; }

.ea-mylot__pay { flex: none; padding: 7px 12px; border-radius: 9px; background: rgba(var(--ea-over-rgb), 0.07); font-size: 12.5px; white-space: nowrap; }

.ea-mylot__tag { flex: none; padding: 3px 9px; font-size: 11.5px; }

@media (max-width: 520px) {
  .ea-mylot { flex-wrap: wrap; }
  .ea-mylot__main { flex-basis: calc(100% - 60px); }
  .ea-mylot__amt { margin-left: 54px; }
  .ea-mylot__pay, .ea-mylot__tag { margin-left: auto; }
}

/* A link inside a banner — "See your purchases" under a won lot. */
.ea-banner__link { margin-left: 4px; color: inherit; font-weight: 700; text-decoration: underline; }

/* A stat tile that goes somewhere — "won" on the account page. */
.ea-stat--link { color: inherit; text-decoration: none; }

.ea-stat--link:hover { background: rgba(var(--ea-over-rgb), 0.08); }

@media (max-width: 520px) {
  .ea-buyer__owed { flex-basis: 100%; text-align: left; }
  .ea-buyer__sums { max-width: none; }

  /* Five tabs don't fit across a phone. They scroll sideways instead of running off the edge. */
  .ea-head .ea-segs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ea-head .ea-segs::-webkit-scrollbar { display: none; }
  .ea-head .ea-seg { padding: 9px 12px; }
}

.ea-field { display: block; margin-bottom: 14px; text-align: left; }

.ea-field__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--ea-mute); }

.ea-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px;
  border: 1px solid var(--ea-line);
  border-radius: 11px;
  background: var(--ea-bg);
  color: var(--ea-ink);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.ea-input:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 2px; }

/* A field that can't change any more — shown, so the value is still readable, but plainly off. */
.ea-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- date and time picker ----------

   Components/DateTimePicker.razor. The field is a button that looks like an input; the panel
   opens under it (right-aligned in the second column of a pair, so it stays inside the form)
   and as a sheet from the bottom of the screen on a phone. */
.ea-dtp { position: relative; }

.ea-dtp__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }

.ea-dtp__field > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ea-dtp__placeholder { color: var(--ea-placeholder); }

/* Two date fields side by side leave too little room on a phone for "Wed 30 Sep 2026 · 22:43",
   so a pair of them stacks there instead of cutting the time off. */
.ea-pair--dates > * { min-width: 0; }

@media (max-width: 520px) {
  .ea-pair.ea-pair--dates { grid-template-columns: 1fr; gap: 0; }
}

.ea-dtp__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ea-mute); stroke-width: 1.7; stroke-linecap: round; }

.ea-dtp__backdrop { position: fixed; inset: 0; z-index: 60; }

.ea-dtp__pop {
  position: absolute;
  z-index: 61;
  top: calc(100% + 6px);
  left: 0;
  width: 296px;
  padding: 14px;
  border: 1px solid var(--ea-line);
  border-radius: 16px;
  background: var(--ea-panel-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  outline: none;
}

.ea-pair > :last-child .ea-dtp__pop { left: auto; right: 0; }

.ea-dtp__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.ea-dtp__month { font-size: 14px; font-weight: 700; }

.ea-dtp__navbtn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ea-line);
  border-radius: 9px;
  background: rgba(var(--ea-over-rgb), 0.05);
  color: var(--ea-ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ea-dtp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.ea-dtp__dow { padding: 4px 0; color: var(--ea-mute); font-size: 11px; font-weight: 600; text-align: center; }

.ea-dtp__day {
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--ea-ink);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.ea-dtp__day:hover { background: rgba(var(--ea-over-rgb), 0.07); }

.ea-dtp__day--out { color: var(--ea-placeholder); }

.ea-dtp__day--today { border-color: rgba(var(--ea-over-rgb), 0.28); }

.ea-dtp__day--on,
.ea-dtp__day--on:hover { border-color: var(--ea-gold-fill); background: var(--ea-gold-fill); color: #141210; font-weight: 700; }

.ea-dtp__navbtn:focus-visible,
.ea-dtp__day:focus-visible,
.ea-dtp__link:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 1px; }

.ea-dtp__time { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ea-line); }

.ea-dtp__timelabel { flex: 1; color: var(--ea-mute); font-size: 12px; font-weight: 500; }

.ea-dtp__select { width: auto; padding: 8px 10px; font-size: 14px; font-variant-numeric: tabular-nums; }

.ea-dtp__colon { font-weight: 700; }

.ea-dtp__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.ea-dtp__link { padding: 6px 2px; border: 0; background: none; color: var(--ea-gold); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

.ea-dtp__done { padding: 9px 20px; border-radius: 10px; font-size: 13px; }

@media (max-width: 699px) {
  .ea-dtp__backdrop { background: rgba(0, 0, 0, 0.45); }

  .ea-dtp__pop,
  .ea-pair > :last-child .ea-dtp__pop {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: 420px;
    margin: 0 auto;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .ea-dtp__day { height: 40px; }
}

.ea-input--multi { min-height: 78px; resize: vertical; }

.ea-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ea-toggle { display: flex; padding: 4px; margin-bottom: 20px; border-radius: var(--ea-r-md); background: rgba(var(--ea-over-rgb), 0.05); }

.ea-toggle__btn {
  flex: 1;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ea-mute);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ea-toggle__btn--on { background: var(--ea-gold-fill); color: #141210; }

/* ---------- admin ---------- */

.ea-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.ea-segs { display: flex; gap: 5px; padding: 4px; border-radius: var(--ea-r-md); background: rgba(var(--ea-over-rgb), 0.05); }

.ea-seg {
  flex: 1;
  padding: 9px 15px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ea-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ea-seg--on { background: var(--ea-gold-fill); color: #141210; }

.ea-rows { display: flex; flex-direction: column; gap: 10px; }

.ea-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid var(--ea-line);
  border-radius: 14px;
  background: var(--ea-panel);
}

.ea-row__main { flex: 1; min-width: 0; }

.ea-row__title { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.ea-thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--ea-panel-2);
  font-size: 23px;
}

.ea-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* The lot form's photographs: square tiles in the order they will be shown, the cover first,
   and an "Add photos" tile at the end until the lot is full. The tools sit on dark glass in
   both themes, like the chips on a lot card, so their colours are fixed. */
.ea-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.ea-photos__count { margin-left: 4px; opacity: 0.75; }

.ea-photos__tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-md);
  background: var(--ea-panel-2);
}

.ea-photos__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ea-photos__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ea-gold-fill);
  color: #141210;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ea-photos__tools {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

.ea-photos__tool {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--ea-r-sm);
  background: rgba(11, 13, 18, 0.7);
  color: #f4f2ec;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ea-photos__tool:disabled { opacity: 0.35; cursor: default; }

.ea-photos__tool:focus-visible { outline: 2px solid var(--ea-gold-fill); outline-offset: 1px; }

.ea-photos__tool--remove { margin-left: auto; color: #ffb4b4; font-size: 13px; }

.ea-photos__add {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  padding: 6px;
  border: 1.5px dashed rgba(var(--ea-over-rgb), 0.22);
  border-radius: var(--ea-r-md);
  color: var(--ea-mute);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.ea-photos__add:hover { border-color: var(--ea-gold); color: var(--ea-gold); }

.ea-photos__add:focus-within { outline: 2px solid var(--ea-gold); outline-offset: 2px; }

.ea-photos__add--busy { cursor: progress; }

.ea-photos__plus { font-size: 26px; font-weight: 400; line-height: 1; }

/* The real file input, stretched invisibly over the tile: a click anywhere on it opens the
   picker in every browser and WebView, which a hidden input behind a label does not. */
.ea-photos__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ea-photos__input:disabled { cursor: progress; }

.ea-emoji-row { display: flex; flex-wrap: wrap; gap: 8px; }

.ea-emoji {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ea-line);
  border-radius: 11px;
  background: var(--ea-bg);
  font-size: 20px;
  cursor: pointer;
}

.ea-emoji--on { border-color: transparent; outline: 2px solid var(--ea-gold); outline-offset: 2px; }

/* ---------- toast ---------- */

.ea-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 100;
  max-width: 90vw;
  padding: 13px 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--ea-green-fill);
  color: #052e16;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.ea-toast--bad { background: var(--ea-red-fill); color: #3a0000; }

/* ---------- wider than a phone ---------- */

@media (min-width: 700px) {
  .ea-header__inner { height: 64px; padding: 0 24px; }
  .ea-brand__img { height: 40px; }
  .ea-brand__name { font-size: 17px; }
  .ea-nav__btn { display: block; }
  .ea-mtabs { display: none; }
  .ea-main { padding: 32px 24px 80px; }

  .ea-hero__title { font-size: 64px; }
  .ea-hero__sub { font-size: 17px; }

  .ea-metrics { gap: 0; }
  .ea-metric__divide { display: block; width: 1px; margin: 4px 28px; background: var(--ea-line); }

  .ea-terms { grid-template-columns: repeat(4, 1fr); }

  .ea-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
  .ea-card__img { height: 210px; }
  .ea-card__glyph { font-size: 58px; }

  .ea-window, .ea-reel, .ea-reel__digit, .ea-reel--static { height: 72px; }
  .ea-reel { width: 30px; }
  .ea-reel__digit, .ea-reel--static { font-size: 40px; }

  .ea-guide--top { top: 12px; }
  .ea-guide--bot { bottom: 12px; }

  .ea-bigprice { font-size: 36px; }
  .ea-detail__title { font-size: 32px; }
  .ea-detail__glyph { font-size: 104px; }
  .ea-unit__n { font-size: 22px; }
  .ea-h1 { font-size: 30px; }
  .ea-seg { flex: none; }
}

@media (min-width: 900px) {
  .ea-detail { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 32px; }
  .ea-detail__img { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-card,
  .ea-card__photo,
  .ea-reel__strip,
  .ea-max__fill,
  .ea-step { transition: none; }

  .ea-card:hover { transform: none; }
}

/* ---------- matched to the artifact ----------

   The small-control sizes and page-wide details the artifact uses. Scoped to .ea-main so the
   header and its sign-in controls are left exactly as they are. */

.ea-main { -webkit-font-smoothing: antialiased; }

.ea-main input::placeholder,
.ea-main textarea::placeholder { color: var(--ea-placeholder); }

.ea-main button:focus-visible,
.ea-main a:focus-visible,
.ea-main textarea:focus-visible { outline: 2px solid var(--ea-gold); outline-offset: 2px; }

/* The Live filter keeps its green dot until it is the selected pill. */
.ea-filter .ea-livedot--sm { background: var(--ea-green); }
.ea-filter--on .ea-livedot--sm { background: currentColor; }

/* Buttons inside a list row or a page heading are the artifact's small buttons, not the
   full-size ones used in forms. */
.ea-row .ea-btn,
.ea-head .ea-btn {
  padding: 8px 14px;
  border-radius: 9px;
  background: rgba(var(--ea-over-rgb), 0.07);
  font-size: 13px;
  white-space: nowrap;
}

.ea-row .ea-btn--danger {
  padding: 8px 13px;
  background: rgba(255, 80, 80, 0.09);
  border-color: rgba(255, 80, 80, 0.2);
}

/* "Approve" is the green go button in the artifact. */
.ea-row .ea-btn--gold {
  padding: 8px 16px;
  border-color: transparent;
  background: var(--ea-green-fill);
  color: #052e16;
  font-weight: 700;
}

.ea-row .ea-pill { padding: 5px 11px; font-size: 12px; white-space: nowrap; }

/* A lot row on the Admin screen can carry four buttons (Edit, View, Carry over, Withdraw or
   Delete), so they sit in their own group that wraps rather than squeezing the title. */
.ea-row__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

.ea-row__actions .ea-small { color: var(--ea-mute); }

/* The title with the lot's labels beside it, wrapping under it when there isn't room. */
.ea-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin-bottom: 3px; }

.ea-row__head .ea-row__title { min-width: 0; max-width: 100%; }

.ea-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ea-row .ea-tags .ea-pill { padding: 3px 9px; font-size: 11.5px; line-height: 1.4; }

@media (max-width: 699px) {
  .ea-row--lot { flex-wrap: wrap; }
  .ea-row--lot .ea-row__actions { flex-basis: 100%; justify-content: flex-start; }

  /* Row pills are hidden on a phone elsewhere; a lot's labels are the point, so they stay. */
  .ea-row .ea-tags .ea-pill { display: inline-block; }
}

/* Picking one of a few options — which auction lots are carried into. A row per choice, the
   whole row clickable, the chosen one outlined in gold. */
.ea-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.ea-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--ea-line);
  border-radius: 12px;
  cursor: pointer;
}

.ea-choice--on { border-color: var(--ea-gold); background: rgba(201, 162, 77, 0.08); }

.ea-choice input { flex: none; margin: 0; accent-color: var(--ea-gold-fill); }

.ea-choice__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ea-choice__title { font-size: 15px; font-weight: 600; }

@media (max-width: 699px) {
  .ea-row .ea-pill { display: none; }
}

/* ---------- one addition to the saleroom's own vocabulary ---------- */

/* The role badge in the top bar is drawn by eaglestrike.css and keys off the role name, so
   a fourth role needs a fourth rule. It lives here rather than there because the role it
   describes only exists because of the public sale. */
.es-role--bidder {
  background: rgba(212, 169, 79, 0.16);
  color: var(--ea-gold);
}

/* ---------- footer ----------

   Terms and privacy on every public screen. Quiet on purpose: it is there to be found, not
   to compete with the lots. .ea-main keeps its own bottom padding, so this sits below it. */

.ea-footer {
  border-top: 1px solid var(--ea-line);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  font-size: 13px;
  color: var(--ea-mute);
}

.ea-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.ea-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.ea-footer a,
.ea-register__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ea-line);
}

.ea-footer a:hover,
.ea-register__legal a:hover { color: var(--ea-gold); text-decoration-color: currentColor; }

.ea-register__legal {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ea-mute);
}

/* ---------- bidder identity ----------

   Components/BidderIdentityForm.razor (the bidder supplying their ID on /account) and
   Components/BidderIdentityViewer.razor (the owner checking it on the Bidders tab). */
.ea-h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }

.ea-idform { text-align: left; }

.ea-idform .ea-segs { display: flex; }

.ea-idform__shot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ea-idform__shot input[type="file"] { max-width: 100%; font-size: 13px; color: var(--ea-mute); }

.ea-idform__thumb {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--ea-line);
  border-radius: var(--ea-r-sm);
}

.ea-idform__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  color: var(--ea-mute);
  font-size: 13px;
  line-height: 1.5;
}

.ea-idform__consent input { margin-top: 3px; flex: none; }

.ea-pill--xs { margin-left: 8px; padding: 2px 8px; font-size: 11px; vertical-align: middle; }

.ea-idview {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--ea-line);
  border-radius: 16px;
  background: var(--ea-panel-2);
}

.ea-idview__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.ea-idview__facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }

.ea-idview__facts dt { color: var(--ea-mute); }

.ea-idview__facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.ea-idview__docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

.ea-idview__doc { margin: 0; }

.ea-idview__doc img { display: block; width: 100%; border: 1px solid var(--ea-line); border-radius: var(--ea-r-sm); }

@media (max-width: 520px) {
  .ea-idform .ea-pair { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- profile and the register flow ----------

   Pages/Profile.razor, the header picture that links to it, and Components/RegisterFlow.razor —
   the "Register to bid" pop-up on the sale floor. */
a.ea-who--link { cursor: pointer; }

a.ea-who--link:hover .ea-who__pic,
a.ea-who--link:focus-visible .ea-who__pic { box-shadow: 0 0 0 2px var(--ea-gold); }

.ea-profile__reg { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.ea-regflow { width: min(460px, 100%); }

.ea-steps {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ea-mute);
}

.ea-steps li {
  flex: 1;
  padding-top: 8px;
  border-top: 3px solid var(--ea-line);
  white-space: nowrap;
}

.ea-steps li.ea-steps__done { border-top-color: rgba(212, 169, 79, 0.45); }

.ea-steps li.ea-steps__on { border-top-color: var(--ea-gold); color: var(--ea-ink); font-weight: 600; }

.ea-regflow__done { text-align: center; line-height: 1.5; margin-bottom: 14px; }

.ea-regflow__paddle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 72px;
  margin: 4px auto 10px;
  padding: 0 14px;
  border-radius: 18px;
  background: var(--ea-gold-fill);
  color: #141210;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
}