/* ==========================================================================
   GIG Auction — component library
   Design system: PRD v1.0 Appendix A (GIG Kuwait). Tokens only; no literals.

   Two worlds, one type system:
     CATALOGUE — warm canvas, thin display type, asymmetric shapes. Public
                 site, lot browse, console data surfaces.
     FLOOR     — deep indigo / navy, enormous numerals, mint as the single
                 accent. Live lot room rail, live control, TV.
   The switch between them when a lot goes live is deliberate.

   Load order (A.8): tokens/fonts, colors, typography, spacing, shape, base,
   then this file, then /assets/js/ds.js.
   ========================================================================== */

/* ── Layout primitives ─────────────────────────────────────────────────── */

.shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-page); }
.shell > main { flex: 1; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1560px; }
.container--narrow { max-width: 720px; }

.band { padding-block: var(--space-14); }
.band--tight { padding-block: var(--space-8); }
.band--sand { background: var(--surface-band); }
.band--soft { background: var(--surface-decor); }
.band--dark { background: var(--gig-indigo); color: var(--text-on-dark); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--text-on-dark); }
.band--dark p { color: var(--text-on-dark-muted); }

.stack { display: grid; gap: var(--space-4); }
.stack--lg { display: grid; gap: var(--space-8); }
.stack--sm { display: grid; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.spacer { flex: 1; }

.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.grid-auto { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (min-width: 760px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Decorative teardrops and circles (A.1) — never interactive, never on top. */
.decor { position: relative; isolation: isolate; overflow: clip; }
.decor__shape {
  position: absolute; z-index: -1; pointer-events: none;
  background: var(--surface-decor); opacity: .55;
  border-radius: 50% 50% 50% 8%;
}
.decor__shape--sand { background: var(--gig-sand); }
.decor__shape--glow { background: var(--gig-mint); opacity: .16; border-radius: 50%; filter: blur(2px); }
.decor__shape--lav  { background: var(--gig-lavender); opacity: .20; border-radius: 50% 50% 8% 50%; }

/* ── Type helpers ──────────────────────────────────────────────────────── */

.eyebrow {
  display: block; font-size: var(--text-xs); font-weight: var(--weight-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-heading); margin: 0 0 var(--space-2);
}
.eyebrow::after { content: ""; display: block; width: 60px; height: 2px; background: currentColor; margin-block-start: var(--space-2); }
.eyebrow--plain::after { display: none; }
.eyebrow--ondark { color: var(--gig-copper); }

.display {
  font-family: var(--font-display); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
  color: var(--text-structure); margin: 0; text-wrap: balance;
}
.display--xl { font-size: clamp(38px, 6vw, var(--text-display)); }
.display--lg { font-size: clamp(32px, 5vw, var(--text-h1)); }
.display--md { font-size: clamp(26px, 3.4vw, var(--text-h2)); }
.lead { font-size: var(--text-lead); line-height: 1.6; color: var(--text-body); max-width: 62ch; margin: 0; }
.muted { color: var(--text-body); }
.faint { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.tabular { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Section heading: copper eyebrow + rule, indigo title, optional lead. */
.sec { margin-block-end: var(--space-8); }
.sec__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(26px, 3.4vw, var(--text-h2)); letter-spacing: -.02em; color: var(--text-structure); margin: 0 0 var(--space-2); text-wrap: balance; }
.band--dark .sec__title { color: var(--text-on-dark); }

/* ── Prices ────────────────────────────────────────────────────────────── */

.price { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: baseline; gap: .28em; }
.price__cur { font-size: .62em; font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: .04em; }
.price--sm { font-size: var(--text-body); }
.price--md { font-size: 22px; }
.price--lg { font-size: 32px; }
.price--xl { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(40px, 6vw, 68px); letter-spacing: -.03em; }
.price--mint { color: var(--gig-mint); }
.price--mint .price__cur { color: var(--gig-mint-light); }
.price--ondark { color: var(--text-on-dark); }
.price--ondark .price__cur { color: var(--text-on-dark-muted); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-6);
  font-family: var(--font-body); font-weight: var(--weight-strong); font-size: var(--text-body);
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--gig-indigo); outline-offset: 2px; }

.btn--primary { background: var(--action-primary); color: var(--gig-indigo-800); border-color: var(--action-primary); font-weight: var(--weight-eyebrow); }
.btn--primary:hover:not(:disabled) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--text-on-dark); box-shadow: var(--shadow-sm); }
.btn--outline { background: transparent; color: var(--text-structure); border-color: var(--gig-indigo); }
.btn--outline:hover:not(:disabled) { background: var(--gig-indigo-a08); }
.btn--ghost { background: var(--surface-card); color: var(--text-structure); border-color: var(--border-hairline); }
.btn--ghost:hover:not(:disabled) { background: var(--gig-indigo-a08); border-color: var(--gig-indigo-a25); }
.btn--bare { background: transparent; color: var(--text-structure); border-color: transparent; padding-inline: var(--space-3); }
.btn--bare:hover:not(:disabled) { background: var(--gig-indigo-a08); }
.btn--danger { background: transparent; color: var(--gig-coral); border-color: var(--gig-coral); }
.btn--danger:hover:not(:disabled) { background: var(--gig-coral); color: var(--text-on-dark); }
/* On dark grounds */
.btn--ondark { background: rgba(255,255,255,.10); color: var(--text-on-dark); border-color: rgba(255,255,255,.22); }
.btn--ondark:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.btn--ondark-danger { background: transparent; color: var(--gig-coral); border-color: var(--gig-coral); }
.btn--ondark-danger:hover:not(:disabled) { background: var(--gig-coral); color: var(--gig-indigo-800); }

.btn--lg { min-height: 54px; padding: 0 var(--space-8); font-size: 17px; }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: 44px; min-height: 44px; }
.btn--icon.btn--sm { width: 36px; min-height: 36px; }
.btn svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Chips (filters, increments) ───────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1.5px solid var(--border-hairline);
  background: var(--surface-card); color: var(--text-body);
  font-size: var(--text-sm); font-weight: var(--weight-strong); cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--gig-indigo); color: var(--text-structure); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--gig-indigo); border-color: var(--gig-indigo); color: var(--text-on-dark); }
.chip__count { opacity: .7; font-weight: var(--weight-body); }
.chip--inc { border-color: var(--gig-indigo); color: var(--text-structure); background: transparent; }
.chip--inc:hover { background: var(--gig-indigo-a08); }
.chip--ondark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--text-on-dark); }
.chip--ondark:hover { background: rgba(255,255,255,.16); border-color: var(--gig-mint); color: var(--text-on-dark); }

/* ── Status badges (A.3) ───────────────────────────────────────────────── */

.state {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-eyebrow);
  letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  background: var(--state-pending-bg); color: var(--state-pending-fg);
}
.state--live      { background: var(--state-live-bg);    color: var(--gig-indigo-800); }
.state--waiting   { background: var(--state-waiting-bg); color: var(--text-on-dark); }
.state--scheduled { background: transparent; color: var(--state-scheduled-fg); box-shadow: inset 0 0 0 1.5px var(--gig-indigo); }
.state--paused    { background: var(--state-paused-bg);  color: var(--text-on-dark); }
.state--ended     { background: var(--state-ended-bg);   color: var(--state-ended-fg); }
.state--pending   { background: var(--state-pending-bg); color: var(--state-pending-fg); }
.state--sold      { background: var(--gig-mint);         color: var(--gig-indigo-800); }
.state--leading   { background: var(--surface-success);  color: var(--state-leading-fg); }
.state--outbid    { background: var(--gig-coral);        color: var(--text-on-dark); }
.state--approved  { background: var(--gig-mint);         color: var(--gig-indigo-800); }
.state--draft     { background: var(--gig-gray-100);     color: var(--gig-gray-700); }
.state--lg { height: 30px; padding: 0 14px; font-size: var(--text-sm); }
.state--live::before, .state--waiting::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs);
}
.card--pad-sm { padding: var(--space-4) var(--space-5); }
.card--flush { padding: 0; overflow: hidden; }
.card--dark { background: var(--gig-indigo-800); border-color: transparent; color: var(--text-on-dark); }
.card--sand { background: var(--surface-band); border-color: transparent; }
.card--hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.card__title { font-size: var(--text-h3); font-weight: var(--weight-strong); color: var(--text-structure); margin: 0; }
.card--dark .card__title { color: var(--text-on-dark); }

/* KPI tile — copper eyebrow, thin indigo number, muted sub-line. */
.kpi-row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: grid; gap: 4px; align-content: start; }
.kpi__label { font-size: var(--text-xs); font-weight: var(--weight-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-heading); }
.kpi__value { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h2); line-height: 1.02; letter-spacing: var(--tracking-display); color: var(--text-structure); font-variant-numeric: tabular-nums; }
.kpi__value--sm { font-size: 30px; }
.kpi__sub { font-size: var(--text-sm); color: var(--text-muted); }
.kpi--accent { background: var(--gig-indigo); border-color: transparent; }
.kpi--accent .kpi__label { color: var(--gig-copper); }
.kpi--accent .kpi__value { color: var(--text-on-dark); }
.kpi--accent .kpi__sub { color: var(--text-on-dark-muted); }
.kpi--mint .kpi__value { color: var(--gig-mint-dark); }

/* ── Lot card — the catalogue unit. Image carries the wedge mask. ─────── */

.lot-card {
  display: flex; flex-direction: column; background: var(--surface-card);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs);
  text-decoration: none; color: inherit; border: 1px solid var(--border-hairline);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lot-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.lot-card__media {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--gig-indigo-800), var(--gig-navy));
  border-radius: var(--radius-card-mask); overflow: hidden; color: var(--gig-mint-light);
}
.lot-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lot-card__media > svg { width: 30%; max-width: 84px; height: auto; opacity: .85; stroke-width: 1; }
.lot-card__media::after { content: ""; position: absolute; inset: 0; background: var(--gig-overlay-photo); opacity: .35; pointer-events: none; }
.lot-card__badge { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: 2; }
/* Badges over lot imagery need their own ground — the outline-only scheduled
   variant disappears against the dark photo overlay. */
.lot-card__badge.state--scheduled, .lot-card__badge.state--pending, .lot-card__badge.state--ended {
  background: var(--gig-glass-header); backdrop-filter: blur(6px); box-shadow: none; color: var(--text-structure);
}
.lot-card__clock {
  position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); z-index: 2;
  background: var(--gig-glass-header); backdrop-filter: blur(8px);
  border-radius: var(--radius-pill); padding: 3px 12px;
  font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-sm);
  color: var(--text-structure); font-variant-numeric: tabular-nums; direction: ltr;
}
.lot-card__clock.is-urgent { color: var(--gig-coral); }
.lot-card__body { padding: var(--space-5) var(--space-5) var(--space-6); display: grid; gap: 6px; align-content: start; flex: 1; }
.lot-card__num { font-family: var(--font-display); font-weight: var(--weight-eyebrow); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-heading); }
.lot-card__title { font-size: var(--text-h3); font-weight: var(--weight-strong); color: var(--text-strong); margin: 0; line-height: 1.3; }
.lot-card__meta { font-size: var(--text-sm); color: var(--text-muted); }
.lot-card__foot { margin-block-start: auto; padding-block-start: var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.lot-card__pricelabel { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-eyebrow); color: var(--text-muted); margin-block-end: 2px; }
.lot-card__pos { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.lot-card__pos--leading { color: var(--state-leading-fg); }
.lot-card__pos--outbid  { color: var(--state-outbid-fg); }

/* ── Countdown ─────────────────────────────────────────────────────────── */

.count {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1;
  color: var(--text-structure); direction: ltr; unicode-bidi: isolate;
  transition: color var(--dur-fast) var(--ease);
}
.count--sm { font-size: 24px; }
.count--md { font-size: 40px; }
.count--lg { font-size: clamp(48px, 8vw, 96px); }
.count--ondark { color: var(--text-on-dark); }
.count.is-urgent { color: var(--gig-coral); }
.count.is-paused { color: var(--gig-copper); }
.count.is-ended  { color: var(--text-muted); }
.count.is-extended { animation: flash-mint 320ms var(--ease); }
@keyframes flash-mint { 0% { color: var(--gig-mint); transform: scale(1.04); } 100% { color: inherit; transform: scale(1); } }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; }
.field-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.label { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--text-body); }
.label .req { color: var(--gig-coral); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 var(--space-5);
  font-family: var(--font-body); font-size: var(--text-body); color: var(--text-strong);
  background: var(--surface-card); border: 1.5px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea { border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); min-height: 110px; resize: vertical; line-height: 1.6; }
.select { padding-inline-end: var(--space-8); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gig-indigo); box-shadow: 0 0 0 3px var(--gig-indigo-a18); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--gig-gray-100); color: var(--text-muted); cursor: not-allowed; }
.input.is-error, .select.is-error { border-color: var(--gig-coral); box-shadow: 0 0 0 3px var(--gig-coral-a12); }
.help { font-size: var(--text-sm); color: var(--text-muted); }
.err { font-size: var(--text-sm); color: var(--gig-coral); font-weight: var(--weight-medium); }
.input--money { font-size: 20px; font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; padding-inline-start: 58px; }
.money-wrap { position: relative; }
.money-wrap__cur { position: absolute; inset-inline-start: var(--space-5); top: 50%; transform: translateY(-50%); font-size: var(--text-sm); font-weight: var(--weight-eyebrow); color: var(--text-muted); pointer-events: none; letter-spacing: .04em; }
.check { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.check input { width: 20px; height: 20px; accent-color: var(--gig-indigo); }

/* A row of fields + a trailing delete button — lot specs/media rows, category
   management rows. Default 1fr 1.4fr auto; pass an inline grid-template-columns
   override for a different column count/shape. */
.specrow { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--space-2); align-items: center; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.radio-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); border: 1.5px solid var(--border-hairline); border-radius: var(--radius-md); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card b { color: var(--text-strong); font-weight: var(--weight-strong); }
.radio-card span { font-size: var(--text-sm); color: var(--text-muted); }
.radio-card:has(input:checked) { border-color: var(--gig-indigo); background: var(--gig-indigo-a08); }
.radio-card:has(input:checked) b { color: var(--text-structure); }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--surface-card); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--gig-indigo); color: var(--text-on-dark);
  font-weight: var(--weight-strong); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase;
  padding: var(--space-3) var(--space-4); text-align: start; white-space: nowrap;
}
.table tbody td { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--gig-gray-100); color: var(--text-strong); vertical-align: middle; }
.table tbody tr:first-child td { border-block-start: 0; }
.table tbody tr:hover td { background: var(--surface-page); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }
.table th.num { text-align: end; }
.table .strong { font-weight: var(--weight-strong); color: var(--text-strong); }
.table .sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-block-start: 2px; }
.table tbody tr.is-highlight td { background: var(--surface-success); }
.table__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.table--fixed { table-layout: auto; }

/* ── Site header (glass, 80px) ─────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--gig-glass-header); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-block-end: 1px solid var(--border-hairline);
  display: flex; align-items: center; gap: var(--space-4);
  padding-inline: var(--gutter);
}
.site-head__inner { width: 100%; max-width: var(--container-max); margin-inline: auto; display: flex; align-items: center; gap: var(--space-4); }
.site-head--wide .site-head__inner { max-width: 1560px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; }
.brand img, .brand svg { height: 34px; width: auto; display: block; }
.site-nav { display: flex; gap: var(--space-1); }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-strong); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-structure); text-decoration: none; border-radius: var(--radius-pill);
}
.site-nav__link:hover { text-decoration: none; background: var(--gig-indigo-a08); }
.site-nav__link.is-active::after { content: ""; position: absolute; inset-inline: var(--space-4); inset-block-end: 4px; height: 4px; border-radius: 2px; background: var(--gig-copper); }
.site-head__right { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.lang-btn { font-family: var(--font-display); font-weight: var(--weight-eyebrow); color: var(--gig-copper); background: none; border: 0; cursor: pointer; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); letter-spacing: .06em; }
.lang-btn:hover { background: var(--gig-copper-a12); }
.who { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gig-mint); flex: none; }
.dot.is-stale { background: var(--gig-copper); } .dot.is-offline { background: var(--gig-coral); }
@media (max-width: 860px) { .site-nav { display: none; } }

/* ── Site footer ───────────────────────────────────────────────────────── */

.site-foot { background: var(--gig-indigo); color: var(--text-on-dark); padding-block: var(--space-12) var(--space-8); margin-block-start: auto; }
.site-foot a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-foot a:hover { color: var(--text-on-dark); text-decoration: underline; }
.site-foot__grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-foot__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-eyebrow); color: var(--gig-copper); margin: 0 0 var(--space-3); }
.site-foot__bar { margin-block-start: var(--space-8); padding-block-start: var(--space-4); border-block-start: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; font-size: var(--text-sm); color: var(--text-on-dark-muted); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { position: relative; background: linear-gradient(140deg, var(--gig-indigo-800) 0%, var(--gig-indigo) 45%, var(--gig-navy) 100%); color: var(--text-on-dark); overflow: clip; }
.hero__inner { position: relative; z-index: 1; padding-block: var(--space-20) var(--space-20); display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.1fr .9fr; padding-block: var(--space-30) var(--space-20); } }
.hero__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(40px, 6.4vw, var(--text-display)); letter-spacing: var(--tracking-display); line-height: 1.04; color: var(--text-on-dark); margin: 0 0 var(--space-5); text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--gig-mint); }
.hero__lead { font-size: var(--text-lead); line-height: 1.65; color: var(--text-on-dark-muted); max-width: 54ch; margin: 0 0 var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block-start: var(--space-12); }
.hero__stat b { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 40px; line-height: 1; color: var(--text-on-dark); font-variant-numeric: tabular-nums; }
.hero__stat span { font-size: var(--text-sm); color: var(--text-on-dark-muted); }
.hero__art { position: relative; min-height: 280px; }

/* Layered teardrops behind the hero */
.hero__shape { position: absolute; border-radius: 50% 50% 50% 8%; pointer-events: none; }
.hero__shape--1 { width: 420px; height: 420px; background: rgba(107,202,186,.14); inset-block-start: -60px; inset-inline-end: -80px; }
.hero__shape--2 { width: 260px; height: 260px; background: rgba(210,140,100,.18); inset-block-end: -60px; inset-inline-end: 200px; border-radius: 50% 50% 8% 50%; }
.hero__shape--3 { width: 180px; height: 180px; background: rgba(143,134,214,.20); inset-block-start: 40%; inset-inline-start: -60px; border-radius: 50%; }

/* Steps band */
.steps { display: grid; gap: var(--space-4); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-block-start: var(--space-5); border-block-start: 2px solid var(--gig-sand); counter-increment: step; }
.step::before { content: counter(step, decimal); position: absolute; inset-block-start: -1px; inset-inline-start: 0; transform: translateY(-50%); background: var(--surface-band); padding-inline-end: var(--space-3); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 28px; line-height: 1; color: var(--gig-copper); }
.step h3 { font-size: var(--text-h3); font-weight: var(--weight-strong); color: var(--text-structure); margin: var(--space-3) 0 4px; }
.step p { font-size: var(--text-sm); color: var(--text-body); margin: 0; }
.step.is-first { border-color: var(--gig-copper); }

/* Event card — wide, asymmetric */
.event-card { display: grid; gap: var(--space-6); grid-template-columns: 1fr; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); padding: var(--space-6); align-items: center; }
@media (min-width: 760px) { .event-card { grid-template-columns: 1fr auto; } }
.event-card__date { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 34px; color: var(--text-heading); line-height: 1; letter-spacing: -.02em; }

/* ── Console shell ─────────────────────────────────────────────────────── */

.console-head {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--gig-glass-header); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-block-end: 1px solid var(--border-hairline);
  display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--gutter);
}
.event-pick {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4);
  border: 1.5px solid var(--border-hairline); background: var(--surface-card); color: var(--text-strong);
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-strong); cursor: pointer; max-width: 320px;
}
.event-pick:hover { border-color: var(--gig-indigo); }
.event-pick svg { width: 16px; height: 16px; color: var(--text-structure); flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
.event-pick__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Platform scope. Same slot as the event picker so the eye lands in the same
   place, deliberately NOT a control: no pointer, no hover border, a dashed
   edge. It reports where you are rather than offering a choice, because on a
   platform page there is no event to choose. */
.event-pick--platform {
  cursor: default; border-style: dashed; border-color: var(--gig-copper);
  background: transparent; color: var(--text-structure);
}
.event-pick--platform svg { color: var(--gig-copper); }

/* And the band changes colour with it. The indigo band means "inside this
   event"; a change made under the darker band lands on every event, and that
   difference has to be visible before the click, not after. */
.subnav--platform { background: linear-gradient(90deg, var(--gig-navy), var(--gig-indigo-800)); border-block-end: 2px solid var(--gig-copper); }

/* Indigo sub-nav band with the drop-radius active tab (A.6 SubNavTabs) */
.subnav { background: var(--gig-indigo); min-height: var(--subnav-h); display: flex; align-items: flex-end; gap: 2px; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav__inner { display: flex; align-items: flex-end; gap: 2px; width: 100%; max-width: 1560px; margin-inline: auto; }
.subnav__tab {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5);
  color: var(--text-on-dark-muted); font-size: var(--text-sm); font-weight: var(--weight-strong);
  text-decoration: none; white-space: nowrap; border-radius: var(--radius-drop);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
[dir="rtl"] .subnav__tab { border-radius: 0 38px; }
.subnav__tab:hover { color: var(--text-on-dark); text-decoration: none; background: rgba(255,255,255,.08); }
.subnav__tab.is-active { background: var(--surface-page); color: var(--text-structure); }
.subnav__tab .badge-n { background: var(--gig-copper); color: var(--gig-indigo-800); border-radius: var(--radius-pill); font-size: 10px; font-weight: var(--weight-eyebrow); padding: 1px 7px; }
.console-body { padding-block: var(--space-6) var(--space-20); }

/* ── Event readiness ───────────────────────────────────────────────────
   A checklist that has to be readable at a glance from across a desk, so
   status is carried by a coloured rail down the side of each row rather than
   by a small icon: colour is what the eye picks up first, and the mark and the
   text carry the same information for anyone who does not see the colour. */
.readiness { margin-block-end: var(--space-6); }
.readiness__bar {
  block-size: 8px; border-radius: var(--radius-pill); background: var(--gig-sand);
  overflow: hidden; margin-block: var(--space-3);
}
.readiness__fill {
  display: block; block-size: 100%; inline-size: 0;
  background: linear-gradient(90deg, var(--gig-copper), var(--gig-mint-dark));
  transition: inline-size var(--dur-slow, .4s) var(--ease);
}
.readiness.is-ready .readiness__fill { background: var(--gig-mint-dark); }

/* ── Readiness strip ─────────────────────────────────────────────────────
   Seven steps ACROSS rather than down. As a vertical list this panel ran to
   most of a screen on an event page whose actual subject is the live floor
   below it — an operator scrolled past the checklist every time to reach the
   sale. Across, the same seven answers occupy one band and are read in a
   glance, which is what a checklist is for.

   The status colour moves from a left edge to a top edge with the turn, so
   the marker still runs along the reading direction and the tiles keep one
   set of edges. */
.readiness__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.rstep { display: block; }
.rstep__mark {
  flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: var(--weight-strong);
  background: var(--gig-sand); color: var(--text-structure);
}
.rstep__link {
  display: grid; gap: 3px; align-content: start; block-size: 100%;
  text-decoration: none; color: inherit;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-block-start: 3px solid var(--border-hairline);
  background: var(--surface-page);
}
.rstep__link:hover { background: var(--gig-gray-100); text-decoration: none; }
.rstep__head { display: flex; align-items: center; gap: var(--space-2); }
.rstep__link b { font-size: var(--text-sm); line-height: 1.3; }
/* Chips size to their own text; in a grid they would stretch to the column
   and read as a banner rather than a tag. */
.rstep__link .chip { justify-self: start; }
.rstep__link .sub { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }

.rstep--done .rstep__mark  { background: var(--gig-mint); color: var(--gig-indigo-800); }
.rstep--done .rstep__link  { border-block-start-color: var(--gig-mint-dark); }
.rstep--partial .rstep__mark { background: var(--gig-copper); color: #fff; }
.rstep--partial .rstep__link { border-block-start-color: var(--gig-copper); }
.rstep--todo .rstep__link  { border-block-start-color: var(--border-hairline); }
/* "unknown" means the check itself failed. It must not look like "done", and
   it must not look like "todo" either — the honest signal is "we do not know". */
.rstep--unknown .rstep__mark { background: var(--danger); color: #fff; }
.rstep--unknown .rstep__link { border-block-start-color: var(--danger); }
/* Scope banner — replaces the scope RADIO that used to let an event page
   publish terms for every event in the company. It states which document is
   being edited rather than offering the choice. */
.scope-banner {
  display: grid; gap: 2px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-page);
  border-inline-start: 3px solid var(--gig-indigo);
}
.scope-banner--global { border-inline-start-color: var(--gig-copper); }
.scope-banner span { color: var(--text-muted); font-size: var(--text-sm); }

/* ── Trader wallet ─────────────────────────────────────────────────────
   The amount outstanding is the largest thing on the card, because it is the
   one number the trader came for. Everything else is evidence for it. */
.card--due { border-color: var(--gig-copper); }
.twl-owed {
  font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px);
  color: var(--gig-copper); direction: ltr; unicode-bidi: isolate;
}
.twl-short { color: var(--gig-copper); font-size: var(--text-sm); margin-inline-start: var(--space-2); }

.chip__n { margin-inline-start: var(--space-2); opacity: .7; font-variant-numeric: tabular-nums; }
.evcard__title a { color: inherit; text-decoration: none; }
.evcard__title a:hover { color: var(--gig-indigo); text-decoration: underline; }

/* ── Lot gallery ───────────────────────────────────────────────────────
   The screen a salvage buyer decides on. Big, dark, and out of the way: the
   photograph is the content and everything else is chrome, so the controls sit
   over it at low contrast until hovered. */
.gal { margin: 0; display: grid; gap: var(--space-3); }
.gal__stage {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card-mask);
  overflow: hidden; background: var(--gig-navy); display: grid; place-items: center;
}
.gal__stage:fullscreen { aspect-ratio: auto; block-size: 100vh; border-radius: 0; }
.gal__img {
  inline-size: 100%; block-size: 100%; object-fit: contain;
  transition: transform var(--dur-slow, .3s) var(--ease, ease);
  will-change: transform;
}
.gal__nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0;
  background: rgba(3, 12, 57, .55); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--dur-fast, .15s) var(--ease, ease);
}
.gal__nav:hover { background: rgba(3, 12, 57, .85); }
.gal__nav--prev { inset-inline-start: var(--space-3); }
.gal__nav--next { inset-inline-end: var(--space-3); }
/* Arrows follow reading order: in RTL "next" sits on the left. */
[dir="rtl"] .gal__nav--prev { inset-inline-start: auto; inset-inline-end: var(--space-3); }
[dir="rtl"] .gal__nav--next { inset-inline-end: auto; inset-inline-start: var(--space-3); }
.gal__tools {
  position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3);
  display: flex; gap: var(--space-2);
}
.gal__tool {
  inline-size: 36px; block-size: 36px; border-radius: var(--radius-md); border: 0;
  background: rgba(3, 12, 57, .55); color: #fff; cursor: pointer; font-size: 16px;
}
.gal__tool:hover { background: rgba(3, 12, 57, .85); }
.gal__count {
  position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3);
  background: rgba(3, 12, 57, .6); color: #fff; padding: 2px 10px;
  border-radius: var(--radius-pill); font-size: var(--text-sm);
  direction: ltr; unicode-bidi: isolate;
}
.gal__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding-block-end: 4px; scrollbar-width: thin; }
.gal__thumb {
  flex: none; inline-size: 84px; block-size: 62px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden;
  background: var(--gig-gray-100);
}
.gal__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.gal__thumb.is-active { border-color: var(--gig-indigo); }
.gal--empty { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-page); border-radius: var(--radius-card-mask); }

/* A photograph nobody has opened is the interesting row in the coverage
   table — it is the damage that was never looked at. */
.mv-unseen { color: var(--gig-copper); font-weight: var(--weight-strong); }

/* ── Filter row ────────────────────────────────────────────────────────
   Search + facet chips + sort, used by the lot catalogue and the trader's
   auctions list. It lived in ONE page's inline <style>, so the second page to
   use the markup rendered the search icon at its intrinsic size — a large
   black circle in the middle of the page — and stacked the controls full
   width. Shared markup needs shared CSS. */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.filters-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-block-end: var(--space-6); }
@media (min-width: 900px) {
  /* The controls column needs a floor, or the search box and the sort wrap
     onto separate rows and the filter bar looks half-built.
     `.cluster` already supplies display:flex and the gap; restating them here
     under the SAME selector is what made an earlier attempt fail — two rules
     of equal specificity, and the later one put flex-wrap back to wrap. */
  .filters-row { grid-template-columns: 1fr minmax(420px, 42%); align-items: center; }
  .filters-row > .cluster { flex-wrap: nowrap; }
}
.filters__search { position: relative; flex: 1 1 240px; min-inline-size: 200px; }
/* The controls column keeps search and sort on ONE line where there is room;
   stacking them wasted a whole row and made the page look unfinished. */

.filters__search .input { padding-inline-start: 44px; }
.filters__search svg {
  position: absolute; inset-inline-start: 14px; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 18px; block-size: 18px;
  color: var(--text-muted); stroke: currentColor; fill: none; stroke-width: 1.5;
  pointer-events: none;
}

/* ── Trader event cards ────────────────────────────────────────────────
   One card per sale, one call to action on each. A card offering "apply",
   "accept terms", "pay" and "browse" at once has decided nothing on the
   trader's behalf, which is how the old screen felt. */
.evcard { display: grid; gap: var(--space-3); }
.evcard--live { border-color: var(--gig-mint-dark); box-shadow: 0 0 0 1px var(--gig-mint-dark) inset; }
.evcard__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.evcard__title { font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); margin: 0; color: var(--text-structure); }
.evcard__lots { margin: 0; color: var(--text-muted); }
/* Facts on one side, the single action on the other, so a wide card is not
   half empty — the content was all hugging one edge with nothing opposite it. */
.evcard__body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.evcard__facts { display: grid; gap: var(--space-2); min-inline-size: 0; }
.evcard__foot { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.evcard__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.evstep { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.evstep > span:first-child {
  inline-size: 18px; block-size: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; background: var(--gig-sand); color: var(--text-structure);
}
.evstep.is-done > span:first-child { background: var(--gig-mint); color: var(--gig-indigo-800); }
.evstep.is-blocking > span:first-child { background: var(--gig-copper); color: #fff; }
.evstep.is-blocking { color: var(--text-strong); font-weight: var(--weight-strong); }
.chip--live { background: var(--gig-mint-dark); color: #fff; }
.chip--soon { background: var(--gig-copper); color: #fff; }

/* ── Company wallet ────────────────────────────────────────────────────
   Held and earned sit side by side with a rule between them and are never
   added. The layout is the argument: a single "total money at GIG" figure
   would look like earnings, grow every time a trader posts a refundable bond,
   and shrink the moment bonds are returned. */
.fin-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.fin-block { display: grid; gap: var(--space-2); align-content: start; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--border-hairline); }
.fin-block--held   { border-inline-start-color: var(--gig-copper); }
.fin-block--earned { border-inline-start-color: var(--gig-mint-dark); }
.fin-big { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); color: var(--text-structure); }
.fin-lines { margin: 0; display: grid; gap: 4px; }
.fin-lines > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.fin-lines dt { color: var(--text-muted); margin: 0; }
.fin-lines dd { margin: 0; }
.card--danger { border-color: var(--danger); }
.chip--danger { background: var(--danger); color: #fff; }

/* ── Trader checklist ──────────────────────────────────────────────────
   Same visual language as the console readiness list, deliberately: the two
   answer the same question from opposite sides of the sale, and an operator
   helping a trader on the phone should recognise what they are looking at. */
.checklist { margin-block-end: var(--space-6); }
.checklist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.checklist__link {
  display: flex; align-items: center; gap: var(--space-3); justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--border-hairline);
  text-decoration: none; color: inherit; background: var(--surface-page);
}
a.checklist__link:hover { text-decoration: none; filter: brightness(.985); }
.checklist__link .sub { display: block; color: var(--text-muted); font-size: var(--text-sm); }
.checklist__go { flex: none; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--gig-indigo); }
.checklist__item.is-blocking .checklist__link { border-inline-start-color: var(--gig-copper); }
.checklist__item.is-optional .checklist__link { border-inline-start-color: var(--gig-mint-dark); }

.chip--soft {
  font-size: 11px; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--gig-sand); color: var(--text-structure); margin-inline-start: var(--space-2);
}
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; justify-content: space-between; margin-block-end: var(--space-6); }
.page-head h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(28px, 3.6vw, 44px); letter-spacing: var(--tracking-display); color: var(--text-structure); margin: 0; }

/* ── Floor: the live lot rail and live control ─────────────────────────── */

.floor {
  background: linear-gradient(165deg, var(--gig-indigo-800), var(--gig-navy));
  color: var(--text-on-dark); border-radius: var(--radius-xl); padding: var(--space-6);
  display: grid; gap: var(--space-5); box-shadow: var(--shadow-lg); position: relative; overflow: clip;
}
.floor::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(107,202,186,.10); inset-block-start: -120px; inset-inline-end: -100px; pointer-events: none; }
.floor__label { font-size: var(--text-xs); font-weight: var(--weight-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gig-copper); }
.floor__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: relative; z-index: 1; }
.floor__divider { height: 1px; background: rgba(255,255,255,.14); }
.floor__leader { font-size: var(--text-sm); color: var(--gig-mint-light); font-weight: var(--weight-strong); }
.floor__leader--you { color: var(--gig-mint); }
.floor__leader--outbid { color: var(--gig-coral); }
.floor__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--text-on-dark-muted); position: relative; z-index: 1; }
.floor__meta b { color: var(--text-on-dark); font-weight: var(--weight-strong); }
.floor__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); position: relative; z-index: 1; }
.floor .input, .floor .select { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--text-on-dark); }
.floor .input::placeholder { color: rgba(255,255,255,.45); }
.floor .input:focus { border-color: var(--gig-mint); box-shadow: 0 0 0 3px rgba(107,202,186,.25); }
.floor .money-wrap__cur { color: var(--gig-mint-light); }
.floor .label { color: var(--text-on-dark-muted); }

/* Bid history */
.bidlog { list-style: none; margin: 0; padding: 0; display: grid; }
.bidlog__row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-block-start: 1px solid var(--gig-gray-100); font-size: var(--text-sm); }
.bidlog__row:first-child { border-block-start: 0; }
.bidlog__who { color: var(--text-body); display: inline-flex; align-items: center; gap: 8px; }
.bidlog__row.is-mine .bidlog__who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gig-copper); flex: none; }
.bidlog__row.is-mine .bidlog__who { color: var(--text-strong); font-weight: var(--weight-strong); }
.bidlog__row.is-cancelled { color: var(--text-muted); text-decoration: line-through; }
.bidlog__amt { font-variant-numeric: tabular-nums; font-weight: var(--weight-strong); color: var(--text-strong); direction: ltr; }
.bidlog__time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.bidlog__tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 0 6px; }

/* Staircase price chart */
.chart { width: 100%; height: 220px; }
/* The plot is a time series: it always reads left-to-right so the SVG path
   and the HTML dot overlay agree, even inside an RTL page. */
.chart__inner { position: relative; width: 100%; height: 100%; direction: ltr; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--surface-card); pointer-events: none; }
.chart__dot--mine { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.floor .chart__dot, .tv__lot .chart__dot { box-shadow: 0 0 0 2px var(--gig-indigo-800); }
.chart__label { position: absolute; inset-inline-start: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); direction: ltr; unicode-bidi: isolate; background: inherit; padding-inline-end: 6px; }
.chart__label--top { top: 0; transform: translateY(-4px); }
.chart__label--bot { bottom: 0; transform: translateY(4px); }
.tv__lot .chart__label, .floor .chart__label { color: var(--text-on-dark-muted); }
.chart__empty { height: 100%; display: grid; place-items: center; color: var(--text-muted); font-size: var(--text-sm); }

/* ── Toast ─────────────────────────────────────────────────────────────── */

.toasts { position: fixed; inset-block-start: calc(var(--header-h) + var(--space-3)); inset-inline-end: var(--space-6); z-index: 900; display: grid; gap: var(--space-2); pointer-events: none; width: min(380px, calc(100vw - var(--space-8))); }
.toast {
  pointer-events: auto; background: var(--gig-indigo-800); color: var(--text-on-dark);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 4px 1fr auto; gap: var(--space-3); align-items: center;
  font-size: var(--text-sm); overflow: hidden; animation: toast-in 220ms var(--ease);
}
.toast::before { content: ""; align-self: stretch; border-radius: 2px; background: var(--toast-dot, var(--gig-gray-300)); }
.toast--success { --toast-dot: var(--gig-mint); }
.toast--error   { --toast-dot: var(--gig-coral); }
.toast--warn    { --toast-dot: var(--gig-copper); }
.toast--info    { --toast-dot: var(--gig-mint-light); }
.toast__close { background: none; border: 0; color: inherit; cursor: pointer; opacity: .7; font-size: 18px; line-height: 1; padding: 2px 4px; }
.toast__close:hover { opacity: 1; }
.toast.is-out { animation: toast-out 180ms var(--ease) forwards; }
@keyframes toast-in { from { transform: translateY(-10px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }
@media (max-width: 640px) { .toasts { inset-inline: var(--space-4); width: auto; } }

/* ── Modal / drawer ────────────────────────────────────────────────────── */

.scrim { position: fixed; inset: 0; background: var(--gig-scrim); backdrop-filter: blur(2px); z-index: 900; display: grid; place-items: center; padding: var(--gutter); animation: fade 160ms var(--ease); }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface-card); border-radius: var(--radius-xl); padding: var(--space-8); width: min(560px, 100%); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-lg); display: grid; gap: var(--space-4); }
.modal--wide { width: min(880px, 100%); }
.modal__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 30px; letter-spacing: -.02em; color: var(--text-structure); margin: 0; }
.modal__actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; margin-block-start: var(--space-2); }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(560px, 100%); background: var(--surface-card); z-index: 901; box-shadow: var(--shadow-lg); display: grid; grid-template-rows: auto 1fr auto; animation: slide-in 240ms var(--ease); }
@keyframes slide-in { from { transform: translateX(var(--slide-from, 100%)); } }
[dir="rtl"] .drawer { --slide-from: -100%; }
.drawer__head { padding: var(--space-6); border-block-end: 1px solid var(--border-hairline); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.drawer__body { padding: var(--space-6); overflow: auto; display: grid; gap: var(--space-5); align-content: start; }
.drawer__foot { padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--border-hairline); display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; background: var(--surface-page); }

/* ── Empty / loading ───────────────────────────────────────────────────── */

.empty { padding: var(--space-20) var(--space-6); text-align: center; display: grid; gap: var(--space-3); justify-items: center; color: var(--text-muted); }
.empty__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 28px; color: var(--text-structure); margin: 0; letter-spacing: -.02em; }
.empty svg { width: 56px; height: 56px; color: var(--gig-sand); stroke: currentColor; fill: none; stroke-width: 1.2; }
.skeleton { background: linear-gradient(90deg, var(--gig-gray-100) 25%, var(--surface-page) 50%, var(--gig-gray-100) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-md); }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { width: 20px; height: 20px; border: 2px solid var(--gig-indigo-a18); border-top-color: var(--gig-indigo); border-radius: 50%; animation: spin .7s linear infinite; }
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
/* On a primary button the ring sits on indigo, so it has to invert or it
   disappears into the fill. */
.btn--primary .spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton lines. Sized to the type they stand in for, so the swap to real
   content does not move anything — the jump is most of what makes a fast page
   feel slow. */
.sk-card { display: grid; gap: var(--space-3); }
.sk-line { block-size: 12px; border-radius: var(--radius-pill); }
.sk-line--title { block-size: 22px; inline-size: 46%; }

/* The top bar: for work happening on a page that is already showing something.
   Indeterminate on purpose — a fake percentage is a lie, and the honest signal
   is simply "still working". */
.loadbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  z-index: 200; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-fast, .15s) var(--ease, ease);
  background: linear-gradient(90deg,
    transparent, var(--gig-copper), var(--gig-mint), var(--gig-indigo), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
}
.loadbar.is-on { opacity: 1; animation: loadbar-sweep 1.1s var(--ease, ease) infinite; }
@keyframes loadbar-sweep {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* Anyone who has asked the system to stop animating gets a static indicator
   rather than none: the information is "busy", and removing it entirely would
   leave them with less than everyone else. */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--gig-gray-100); }
  .spinner { animation: none; border-top-color: var(--gig-indigo); opacity: .6; }
  .loadbar.is-on { animation: none; background: var(--gig-indigo); background-size: 100% 100%; }
}

/* ── Definition list (specs, summaries) ────────────────────────────────── */

.deflist { display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; }
.deflist > div { border-block-end: 1px solid var(--gig-gray-100); padding-block-end: var(--space-2); }
.deflist dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-eyebrow); color: var(--text-muted); }
.deflist dd { margin: 0; color: var(--text-strong); font-weight: var(--weight-medium); }
.deflist--rows { grid-template-columns: 1fr; }
.deflist--rows > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); align-items: baseline; }

/* ── TV display (navy, no chrome) ──────────────────────────────────────── */

.tv { min-height: 100vh; background: var(--gig-navy); color: var(--text-on-dark); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-6); padding: var(--space-6) var(--space-8); }
.tv__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.tv__brand { display: flex; align-items: center; gap: var(--space-4); }
.tv__brand img { height: 44px; }
.tv__event { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 30px; color: var(--text-on-dark); letter-spacing: -.02em; }
.tv__clock { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 30px; color: var(--gig-mint-light); font-variant-numeric: tabular-nums; direction: ltr; }
.tv__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-content: stretch; }
.tv__lot { height: 100%; }
@media (min-width: 900px) { .tv__grid--2 { grid-template-columns: 1fr 1fr; } }
.tv__lot { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl); padding: var(--space-6); display: grid; gap: var(--space-4); grid-template-rows: auto auto auto minmax(140px, 1fr); position: relative; overflow: clip; }
.tv__lot::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(107,202,186,.08); inset-block-start: -100px; inset-inline-end: -80px; }
.tv__lot-num { font-family: var(--font-display); font-weight: var(--weight-eyebrow); font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gig-copper); }
.tv__lot-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(26px, 2.6vw, 40px); color: var(--text-on-dark); margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.tv__figures { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; position: relative; z-index: 1; }
.tv__agenda { background: rgba(255,255,255,.05); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); display: flex; gap: var(--space-8); overflow-x: auto; align-items: center; }
.tv__agenda-item { display: grid; gap: 2px; white-space: nowrap; }
.tv__agenda-item b { color: var(--text-on-dark); font-weight: var(--weight-strong); }
.tv__agenda-item span { font-size: var(--text-sm); color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }

/* ── Auth screens ──────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh; display: grid; place-items: center; padding: var(--space-8) var(--space-4);
  background:
    radial-gradient(circle at 8% 12%, var(--surface-decor) 0 240px, transparent 241px),
    radial-gradient(circle at 92% 88%, var(--gig-sand) 0 200px, transparent 201px),
    var(--surface-page);
}
.auth__card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-12) var(--space-8); width: 100%; max-width: 460px; display: grid; gap: var(--space-5); }
.auth__card--wide { max-width: 620px; }
.auth__brand { display: flex; justify-content: center; margin-block-end: var(--space-2); }
.auth__brand img { height: 42px; }
.auth__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 34px; letter-spacing: -.03em; color: var(--text-structure); text-align: center; margin: 0; }
.auth__sub { text-align: center; color: var(--text-body); font-size: var(--text-sm); margin: 0; }
.auth__foot { text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.auth__foot a { color: var(--text-structure); font-weight: var(--weight-strong); }

/* Password reveal */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-inline-end: 50px; }
.pw-toggle { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--text-muted); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.pw-toggle:hover { color: var(--text-structure); background: var(--gig-indigo-a08); }
.pw-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ── Progress / meters ─────────────────────────────────────────────────── */

.meter { height: 6px; border-radius: var(--radius-pill); background: var(--gig-gray-100); overflow: hidden; }
.meter__fill { height: 100%; background: var(--gig-mint); border-radius: inherit; transition: width var(--dur) var(--ease); }
.meter__fill--copper { background: var(--gig-copper); }

/* ── Utility: scroll shadow for sticky rails ───────────────────────────── */
.sticky-rail { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
@media (max-width: 1023px) { .sticky-rail { position: static; } }


/* ── Invitation rows ─────────────────────────────────────────────────────
   Shared by the per-lot "who may bid" panel and the trader-registry invite
   picker. One definition because they are the same object rendered twice:
   a trader, what they deal in, and what they have actually done. */
.invrow { display:flex; align-items:center; gap: var(--space-3); justify-content:space-between;
          padding: var(--space-3) 0; border-block-start:1px solid var(--gig-gray-100); cursor:pointer; }
.invrow:first-child { border-block-start:0; }
.invrow--out { opacity:.55; }
/* justify-items so a child does not stretch across the row. Without it the
   LTR contact line fills the full width and its text lands at the far end,
   metres from the name it belongs to. */
.invrow__who { display:grid; gap:3px; min-inline-size:0; flex:1; justify-items:start; }
.invrow__name { font-weight:600; color: var(--text-strong); }
.invrow__sub { color: var(--text-muted); font-size: var(--text-xs); }
.invrow__pick { flex:none; inline-size:18px; block-size:18px; margin:0; }
.invrow__stats { display:flex; gap: var(--space-3); flex-wrap:wrap; align-items:center;
                 font-size: var(--text-xs); color: var(--text-muted); }
.invrow__stat b { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.invrow__tags { display:flex; gap:6px; flex-wrap:wrap; }

/* NOT .chip: that is a 36px interactive filter control, and a dozen of them
   in a dense list reads as a wall of buttons rather than labels on a row. */
.itag { display:inline-flex; align-items:center; padding:1px 8px; border-radius:999px;
        font-size: var(--text-xs); line-height:1.6; white-space:nowrap;
        background: var(--gig-gray-100); color: var(--text-body); }
.itag--match { background: var(--gig-mint); color: var(--gig-indigo-800); font-weight:600; }
.itag--warn  { background: var(--gig-copper); color:#fff; font-weight:600; }

.inv2-bar { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center;
            margin-block-start: var(--space-3); }

/* A picker modal: header and actions hold their place, the list is the only
   thing that scrolls.
   Without this the list grew to its own max-height, pushed the action row past
   the modal's 86vh and off the bottom of the screen — so an operator could
   select traders and then had no way to reach the button that invites them.
   Nested scroll regions made it worse: scrolling to look for the button
   scrolled the list instead. */
.modal--picker { display:flex; flex-direction:column; width: min(1120px, 100%); max-block-size: 90vh; padding: var(--space-6) var(--space-7); }
.modal--picker > .modal__list { flex:1 1 auto; min-block-size:0; overflow-y:auto;
                                border-block: 1px solid var(--gig-gray-100); }
.modal--picker > .modal__actions { flex:none; align-items:center; }

/* The selection bar: what is selected, and the three ways to change it in
   bulk. Sticks to the top of the list so it stays reachable while scrolling
   a long registry — choosing "all" after scrolling to the bottom should not
   mean scrolling back up. */
.pickbar { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center;
           justify-content:space-between; padding-block: var(--space-3); }
.pickbar__count { font-weight:600; color: var(--text-structure); font-size: var(--text-sm); }
.pickbar__count b { font-variant-numeric: tabular-nums; }
.pickbar__acts { display:flex; gap: var(--space-2); flex-wrap:wrap; }

/* Denser rows for a picker: two columns on a wide modal so a long registry
   is scannable without endless scrolling. */
.invgrid { display:grid; gap:0; }
@media (min-width: 900px) { .invgrid { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
.invgrid > .invrow { border-block-start: 1px solid var(--gig-gray-100); }
@media (min-width: 900px) { .invgrid > .invrow:nth-child(2) { border-block-start: 0; } }

.invrow__stat--pill { background: var(--surface-page); border-radius: var(--radius-sm, 6px);
                      padding: 1px 6px; }
.invrow--picked { background: color-mix(in srgb, var(--gig-mint) 14%, transparent); }
.inv2-bar .input { flex:1; min-inline-size:200px; }