/* memoe domains: the one-screen auction page (/domains) and its moderation page (/domains/admin). Brand tokens only; every colour is a
   custom property from brand.css/site.css. The screen is exactly the window's height (the page's first fold), with nothing scrolling
   inside it but the list of domains when the window is too short for all of them; the terms are below it. */

.page-domains { --domains-chrome: 84px; } /* the header's height, about; the screen is what is left of the window */
.page-domains [hidden] { display: none !important; }
.domains-main { width: 100%; max-width: 1760px; margin-inline: auto; padding: 0 clamp(10px, 1.2vw, 16px); }

/* ---------- the screen ---------- */
.domains-screen {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0;
  height: calc(100svh - var(--domains-chrome)); min-height: 520px; padding-bottom: 12px;
}
.domains-screen > * { min-width: 0; }
.domains-head { grid-row: 1; margin-bottom: 10px; }
.domains-screen > .notice { grid-row: 2; margin: 0 0 10px; }
.domains-grid { grid-row: 3; }
.domains-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 4px 28px; }
.domains-title { margin: 0; font-size: clamp(28px, 3.4vw, 48px); font-weight: var(--title-weight); line-height: 1.04; letter-spacing: var(--title-track); }
.domains-lede { max-width: 44em; font-size: 15px; line-height: 1.45; color: var(--fg); }
.domains-lede a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.domains-grid { display: grid; grid-template-columns: clamp(340px, 30vw, 460px) minmax(0, 1fr); gap: 12px; min-height: 0; }
.domains-grid > * { min-width: 0; min-height: 0; }

/* ---------- the sold domains: the whole bottom row ----------
   The top of the screen is the list of what is for sale (left) and the chosen domain's card (right); the sold domains are the row under both, the full
   width of the screen. It is a dark graphite band (the one solid thing on a page of pale glass, so it is the first thing the eye lands on after the card)
   with the name and the price of every sale in large type, the price in the gold the burning entries use. It is the screen's fourth row, `auto` high, so
   while nothing has sold (the band is hidden) it takes no room and leaves no gap; the list and the card are what is left above it (the card scrolls inside
   itself when that is too little). */
.dsold {
  grid-row: 4; margin-top: 12px; display: flex; align-items: center; gap: 4px 22px; padding: 10px 12px 10px 30px; border-radius: var(--radius-panel);
  background: var(--graphite-950); color: var(--text-on-image); box-shadow: 0 10px 30px color-mix(in srgb, var(--graphite-950) 22%, transparent);
}
.ds-title { flex: none; display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 24px; font-weight: var(--fw-medium); letter-spacing: -.01em; color: var(--text-on-image); }
.ds-count { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--fire-2); }
.ds-list { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; padding: 2px; overflow: auto hidden; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-on-image) 40%, transparent) transparent; }
.dsold .dl-item {
  flex: none; max-width: 380px; min-height: 56px; gap: 12px; padding: 0 22px 0 18px; font-size: 18px; color: var(--text-on-image);
  border-color: color-mix(in srgb, var(--text-on-image) 24%, transparent); scroll-snap-align: start;
}
.dsold .dl-item:hover { background: color-mix(in srgb, var(--text-on-image) 12%, transparent); }
.dsold .dl-item:focus-visible { outline-color: var(--text-on-image); }
.dsold .dl-meta { font-size: 18px; font-weight: var(--fw-medium); color: var(--fire-2); }
.dsold .dl-item[data-phase="sold"] .dl-mark { border-color: var(--fire-2); background: var(--fire-2); }
/* the one whose result the card shows: a light pill on the dark band */
.dsold .dl-item[aria-pressed="true"] { background: var(--text-on-image); color: var(--graphite-950); border-color: transparent; }
.dsold .dl-item[aria-pressed="true"] .dl-meta { color: var(--graphite-800); }
.dsold .dl-item[aria-pressed="true"][data-phase="sold"] .dl-mark { border-color: var(--graphite-800); background: var(--graphite-800); }

/* ---------- the list of domains ---------- */
.dlist { display: grid; align-content: start; gap: 4px; padding: 8px; overflow-y: auto; border-radius: var(--radius-panel); scrollbar-width: thin; }
.dl-empty { padding: 12px; }
.dl-item {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  position: relative; isolation: isolate; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 16px; color: var(--ink); text-align: left; background: transparent; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.dl-item:hover { background: color-mix(in srgb, var(--white) 55%, transparent); }
.dl-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dl-item[aria-pressed="true"] { background: var(--graphite-950); color: var(--text-on-image); }
.dl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.dl-meta { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-2); }
.dl-item[aria-pressed="true"] .dl-meta { color: color-mix(in srgb, var(--text-on-image) 82%, transparent); }
/* the mark before a name: live = a pulsing dot, upcoming = a ring, sold = filled, finished with nothing = a dash */
.dl-mark { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--slate-600); box-sizing: border-box; }
.dl-item[data-phase="live"] .dl-mark { border-color: var(--accent); background: var(--accent); animation: dl-pulse 2s ease-out infinite; }
.dl-item[data-phase="sold"] .dl-mark { border-color: var(--graphite-800); background: var(--graphite-800); }
.dl-item[data-phase="settling"] .dl-mark { border-color: var(--steel); background: color-mix(in srgb, var(--steel) 50%, transparent); }
.dl-item[data-phase="unsold"] .dl-mark { border-radius: 2px; height: 2px; border-width: 1px; margin-top: 0; }
.dl-item[aria-pressed="true"] .dl-mark { border-color: var(--text-on-image); }
.dl-item[aria-pressed="true"][data-phase="live"] .dl-mark { background: var(--accent); border-color: var(--accent); }
.dl-item[aria-pressed="true"][data-phase="sold"] .dl-mark { background: var(--text-on-image); }
@keyframes dl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ---------- fire: a live domain that has a bid burns, in the list and on its own panel ----------
   domains.js puts one decorative layer (`.fire`, aria-hidden, about a dozen small pieces) into the entry of every live domain with at least one
   bid, and into the panel when that domain is the one chosen; it is taken out the moment the domain ends. It is laid over the surface without
   taking any room (`position: absolute; inset: 0`, so neither the list nor the one-screen panel is a pixel taller) and takes no clicks. The pieces
   move by transform and opacity only (no filter, blur, shadow or layout), so a burning surface costs the compositor a handful of small layers.
   Sizes are in the layer's own units (`cqh`, `cqw`: it is a size container), so the same fire fits a 44 px entry and the whole panel.
   **The words stay readable because a band lies between the fire and them** (the layer's ::after, above every piece and under the text):
   a burning entry is a dark pill (graphite 950, white words) and its band is graphite at 80 to 84% where the words are, so the lightest piece
   under it (a white spark) leaves the name at 8.7:1 and the meta line at 6.5:1 or better (a flame is higher still); the panel's band is white at
   46% over its pale glass, so graphite 800 words stay at 7:1 or better over the darkest part of a flame (copper) and more over the rest (domains-pages.test.js
   works both out from these very values). The flames' colours are the
   five warm values below (copied from the first-place card's gold and copper; the one place on these pages warm colour is not a photograph,
   as on the home page); the layer is plain gone for forced colours and more contrast, and stands still for reduced motion. */
.page-domains { --fire-1: #F8EBBD; --fire-2: #E8CA74; --fire-3: #D2A94A; --fire-4: #BC8F33; --fire-base: #C2884F; }
.dl-item[data-fire="true"], .dl-item[data-fire="true"]:hover { color: var(--text-on-image); background: var(--graphite-950); }
.dl-item[data-fire="true"] .dl-meta { color: color-mix(in srgb, var(--text-on-image) 82%, transparent); }
.dl-item[data-fire="true"] .dl-mark { border-color: var(--fire-2); background: var(--fire-2); animation: none; }
.dl-item[aria-pressed="true"][data-fire="true"] { box-shadow: inset 0 0 0 2px var(--fire-2); }
.dl-item[aria-pressed="true"][data-fire="true"] .dl-mark { border-color: var(--fire-2); background: var(--fire-2); }
.dl-item > .dl-mark, .dl-item > .dl-name, .dl-item > .dl-meta { position: relative; z-index: 1; }
.dpanel[data-fire="true"] { position: relative; isolation: isolate; }
.dpanel > .dp-col { position: relative; z-index: 1; }

.fire {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; container-type: size;
  --flame: polygon(62% 0, 64% 8%, 67% 17%, 73% 27%, 81% 39%, 89% 53%, 95% 68%, 98% 82%, 93% 94%, 80% 100%, 20% 100%, 7% 94%, 2% 82%, 5% 68%, 12% 54%, 22% 42%, 30% 32%, 34% 22%, 42% 13%, 51% 7%, 57% 3%);
}
.fire > * { position: absolute; display: block; pointer-events: none; }
.fire::after { content: ""; position: absolute; inset: 0; }
.fire--tile::after { background: linear-gradient(180deg, color-mix(in srgb, var(--graphite-950) 84%, transparent), color-mix(in srgb, var(--graphite-950) 80%, transparent) 72%, color-mix(in srgb, var(--graphite-950) 12%, transparent)); }
.fire--panel::after { background: color-mix(in srgb, var(--white) 46%, transparent); }
.fire--panel { --wk: .62; }

/* a glow at the foot that breathes */
.fire-glow {
  left: -10%; right: -10%; bottom: -10cqh; height: 90cqh; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, color-mix(in srgb, var(--fire-3) 80%, transparent), color-mix(in srgb, var(--fire-base) 42%, transparent) 55%, transparent 80%);
  animation: fire-breathe 2.8s ease-in-out infinite;
}
@keyframes fire-breathe { 0%, 100% { opacity: .6; transform: scaleY(.9); } 50% { opacity: 1; transform: scaleY(1.1); } }

/* a tongue of flame: the copper foot to the pale gold tip, clear at the very top; each waves from its base on its own beat */
.fire-flame {
  left: var(--x); bottom: -4cqh; width: calc(var(--w) * var(--wk, 1)); height: var(--h); transform-origin: 50% 100%; scale: var(--flip, 1) 1; clip-path: var(--flame);
  background: linear-gradient(0deg, var(--fire-base), var(--fire-3) 24%, color-mix(in srgb, var(--fire-3) 94%, transparent) 48%, color-mix(in srgb, var(--fire-2) 82%, transparent) 70%, color-mix(in srgb, var(--fire-2) 40%, transparent) 90%, transparent);
  animation: fire-lick var(--d) ease-in-out var(--delay) infinite alternate;
}
@keyframes fire-lick {
  0% { transform: scale(.92, .84) skewX(-5deg); opacity: .66; }
  38% { transform: translateY(-2%) scale(1.04, 1.1) skewX(4deg); opacity: .92; }
  72% { transform: translateY(-1%) scale(.97, .95) skewX(-3deg); opacity: .76; }
  100% { transform: translateY(-4%) scale(1.06, 1.17) skewX(5deg); opacity: 1; }
}
.fire-flame.fi1 { --x: -3%; --w: 34cqh; --h: 70cqh; --d: 1.5s; --delay: -.2s; }
.fire-flame.fi2 { --x: 22%; --w: 40cqh; --h: 86cqh; --d: 1.2s; --delay: -.9s; --flip: -1; }
.fire-flame.fi3 { --x: 47%; --w: 44cqh; --h: 100cqh; --d: 1.8s; --delay: -.5s; }
.fire-flame.fi4 { --x: 71%; --w: 38cqh; --h: 80cqh; --d: 1.4s; --delay: -1.1s; --flip: -1; }
.fire-flame.fi5 { --x: 90%; --w: 36cqh; --h: 66cqh; --d: 1.9s; --delay: -.3s; }

/* an ember: a small bright spot that leaves the foot, drifts up and goes out */
.fire-ember {
  left: var(--x); bottom: 2cqh; width: var(--s); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--white) 0 18%, var(--fire-1) 38%, color-mix(in srgb, var(--fire-2) 40%, transparent) 62%, transparent 74%);
  animation: fire-rise var(--d) ease-out var(--delay) infinite;
}
@keyframes fire-rise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--rise) * -1)) scale(.25); opacity: 0; }
}
.fire-ember.fi1 { --x: 10%; --s: 6px; --d: 3.1s; --delay: -.4s; --dx: 3cqw; --rise: 80cqh; }
.fire-ember.fi2 { --x: 26%; --s: 4px; --d: 4.2s; --delay: -2.2s; --dx: -2cqw; --rise: 92cqh; }
.fire-ember.fi3 { --x: 44%; --s: 6px; --d: 3.6s; --delay: -1.4s; --dx: 4cqw; --rise: 72cqh; }
.fire-ember.fi4 { --x: 61%; --s: 4px; --d: 4.6s; --delay: -3.3s; --dx: -3cqw; --rise: 96cqh; }
.fire-ember.fi5 { --x: 78%; --s: 6px; --d: 3.3s; --delay: -.9s; --dx: 2cqw; --rise: 84cqh; }
.fire-ember.fi6 { --x: 93%; --s: 4px; --d: 4s; --delay: -2.8s; --dx: -4cqw; --rise: 90cqh; }

/* reduced motion: nothing moves; the glow and the flames stay as a still picture, the embers (which only exist in motion) are not drawn */
@media (prefers-reduced-motion: reduce) {
  .fire *, .fire *::after { animation: none; }
  .fire-ember { display: none; }
}
@media (forced-colors: active), (prefers-contrast: more) { .fire { display: none; } }

/* ---------- the chosen domain ---------- */
.dpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); align-content: center; padding: clamp(18px, 2.6vw, 36px); border-radius: var(--radius-panel); overflow: hidden auto; }
.dp-col { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; } /* a track that can't grow past the column: a long nowrap name must not widen it */
.dp-top-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.dp-name { margin: 0; min-width: 0; max-width: 100%; white-space: nowrap; /* one line, always: fit.js sets a smaller font-size when the name is wider than its column */ font-size: clamp(26px, min(4vw, 7.4svh), 68px); font-weight: var(--title-weight); line-height: 1.05; letter-spacing: var(--title-track); }
.dp-phase { font-size: 14px; font-weight: var(--fw-medium); color: var(--fg-2); }
.dp-clock { font-size: clamp(20px, 2vw, 28px); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dp-clock[data-soft="true"] { font-weight: var(--fw-medium); }
.dp-k { margin: 0; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .02em; color: var(--fg-2); }
.dp-bidder { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 52%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 22%, transparent); }
.dp-who [data-top-flag]:empty { display: none; }
.dp-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 18px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.dp-amount { font-size: clamp(34px, min(6vw, 11svh), 104px); line-height: 1; font-weight: var(--title-weight); letter-spacing: var(--title-track); font-variant-numeric: tabular-nums; }
.dp-bidder[data-mine="true"] { border-color: var(--graphite-800); background: color-mix(in srgb, var(--white) 72%, transparent); }

.dp-you { min-height: 1.4em; font-size: 15px; color: var(--fg); }
.dp-you:empty { display: none; } /* a first-time bidder has nothing said about them yet: no empty line and gap above the form */
.dp-bid { display: grid; gap: 8px; }
.amount-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.amount-symbol { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-medium); }
.amount-row input {
  width: 100%; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: clamp(20px, 2vw, 26px); font-variant-numeric: tabular-nums;
  color: var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 40%, transparent);
}
.amount-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.amount-row input:disabled { opacity: .6; }
.amount-row .button-primary { margin: 0; min-height: 56px; padding: 0 26px; white-space: nowrap; }
.dp-bid .hint { font-size: 14px; color: var(--fg-2); }
.bid-confirm { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border-radius: var(--radius-control); border-left: 3px solid var(--navy); background: color-mix(in srgb, var(--white) 56%, transparent); }
.bid-confirm p { font-size: 15px; }

.dp-win { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid var(--graphite-800); }
.dp-win p { font-size: 15px; line-height: 1.45; }
.dp-win-line { display: block; }
.dp-win-line + .dp-win-line { margin-top: 3px; }
.dp-win strong { font-size: 17px; font-weight: var(--fw-medium); }
.dp-win-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.dp-win-actions .button-primary, .dp-win-actions .button-secondary { margin: 0; min-height: 44px; padding: 0 20px; font-size: 15px; text-decoration: none; }

.dp-deal { display: grid; gap: 8px; margin: 0; }
.dp-deal > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.dp-deal dt { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .02em; color: var(--fg-2); }
.dp-deal dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--fg); }
.dp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.dp-foot a { text-decoration: underline; text-underline-offset: 3px; }
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.link-button:hover { color: var(--ink); }

/* ---------- under the bid button, for someone with no saved card: their email, the tick, and the two optional details ----------
   The bid button takes them straight to Stripe's page (the card, the name on it and the billing address are asked there; the email typed here
   is already on the customer, so Stripe shows it), so all that is asked here is the email, the tick that says the terms were understood in full
   and, if they like, a phone number (Stripe can't ask for one when it only saves a card) and a name to show beside their bids. */
.bid-first { display: grid; gap: 8px; }
.bid-email {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 15px; color: var(--ink);
  background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 40%, transparent);
}
.bid-email::placeholder { color: var(--slate-700); opacity: 1; }
.bid-email:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bid-email[aria-invalid="true"] { border-color: var(--destructive); }
.bid-accept { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 44px; font-size: 15px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.bid-accept input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--graphite-800); cursor: pointer; }
.bid-accept input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bid-accept a { text-decoration: underline; text-underline-offset: 3px; }
.bid-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bid-extra input {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 15px; color: var(--ink);
  background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 40%, transparent);
}
.bid-extra input::placeholder { color: var(--slate-700); opacity: 1; }
.bid-extra input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bid-next { margin: 0; }

/* ---------- the terms, under the fold ---------- */
.domains-terms-wrap { padding-top: 24px; }
.domains-terms-wrap .panel { scroll-margin-top: 16px; }
.page-domains .site-footer { padding-inline: clamp(10px, 1.2vw, 16px); }
.page-domains .footer-panel { max-width: 1760px; }

/* ---------- a phone, and any window too narrow for two columns ---------- */
@media (max-width: 1099px) {
  .page-domains { --domains-chrome: 76px; }
  .domains-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .dlist { display: flex; align-items: stretch; gap: 6px; padding: 6px; overflow: auto hidden; scroll-snap-type: x proximity; border-radius: var(--radius-card); }
  .dl-item { flex: none; grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "mark name" "meta meta"; align-content: center; gap: 0 8px; min-width: 150px; max-width: 220px; min-height: 52px; border-radius: var(--radius-control); scroll-snap-align: start; }
  .dl-mark { grid-area: mark; }
  .dl-name { grid-area: name; font-size: 15px; }
  .dl-meta { grid-area: meta; padding-left: 20px; font-size: 13px; }
  /* the sold band is one line high on a phone: the title, then each entry as the mark, the name and the price side by side. A phone has no room to spare
     (its bidding column was already trimmed to fit, see below), so the screen is "at least the window" here and not exactly it: when the band is shown and
     the card needs more than is left, the screen grows by that much and the band sits just under the fold, instead of the card scrolling inside itself */
  .domains-screen { height: auto; min-height: calc(100svh - var(--domains-chrome)); }
  .dsold { margin-top: 8px; padding: 4px 6px 4px 16px; gap: 4px 12px; border-radius: var(--radius-card); }
  .ds-title { gap: 8px; font-size: 18px; }
  .ds-count { font-size: 15px; }
  .ds-list { gap: 6px; }
  .dsold .dl-item { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "mark name meta"; gap: 8px; min-width: 0; max-width: 260px; min-height: 44px; padding: 0 16px 0 12px; font-size: 16px; border-radius: 999px; }
  .dsold .dl-meta { padding-left: 0; font-size: 15px; }
  .dpanel { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; align-content: start; }
  .dp-col { gap: 8px; }
  .dp-name { font-size: clamp(24px, 7vw, 32px); }
  .dp-clock { font-size: 18px; }
  .dp-bidder { padding: 10px 14px; gap: 2px; }
  .dp-who { font-size: 16px; }
  .dp-amount { font-size: clamp(30px, 9vw, 42px); }
  .amount-row input, .amount-row .button-primary { min-height: 48px; }
  .dp-deal dd { font-size: 14px; }
  .dp-deal > div { grid-template-columns: 4.6em minmax(0, 1fr); }
}
@media (max-width: 1099px) and (max-height: 760px) {
  .domains-lede { display: none; }
  /* (the floor of 520 px the screen has on a wide window is replaced above by the window's height) */
}
@media (max-width: 560px) {
  .bid-first { gap: 6px; }
  .bid-extra input, .bid-email { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .bid-accept { font-size: 14px; }
  .domains-lede { display: none; } /* the same words are in "you pay / you get" under the bid and in the terms */
  .domains-title { font-size: 28px; }
  .dp-bid .dp-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* still the input's label */
  .dp-deal dd, .dp-foot, .dp-bid .hint { font-size: 13px; }
  .dp-deal { gap: 4px; }
  .dp-bidder .fine { font-size: 13px; }
  .dpanel { padding: 14px; }
  .domains-screen > .notice { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 560px) and (max-height: 720px) {
  .dpanel { padding: 10px 12px; gap: 6px; }
  .dp-col { gap: 6px; }
  .dp-name { font-size: 24px; }
  .dp-clock { font-size: 16px; }
  .dp-bidder { padding: 8px 12px; }
  .dp-bidder .fine { display: none; }
  .dp-amount { font-size: 32px; }
  .dp-who { font-size: 15px; }
  .dp-k { font-size: 12px; }
  .amount-row input, .amount-row .button-primary { min-height: 44px; }
  .dl-item { min-height: 46px; }
  .dlist { padding: 4px; }
  /* a small phone has room for the amount, the tick and the button only: the optional phone and shown name, and the note under them, wait for a bigger screen
     (the way to Stripe is also said when the button is pressed, and "you pay / you get" is right below) */
  .bid-extra, .bid-next { display: none; }
  /* the email field made the column one row taller, so on the smallest phones "you get" waits too (it is the same words as the card under the fold, and the
     terms the tick agrees to say it); "you pay" stays, because it is what the button commits to */
  .dp-deal > div:nth-child(2) { display: none; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  /* the sold band is a row shorter here (the card above it has none to give) but still the full width and large type */
  .dsold { margin-top: 10px; padding: 4px 8px 4px 26px; }
  .ds-title { font-size: 20px; }
  .dsold .dl-item { min-height: 44px; font-size: 17px; }
  .dsold .dl-meta { font-size: 17px; }
  .dp-deal dd { font-size: 14px; }
  .dp-bidder { padding: 12px 16px; }
  /* the tick and the two optional details under the button need room a short window doesn't have: a tighter column, and the label of the amount stays only for a screen reader */
  .dp-col { gap: 10px; }
  .dp-bid { gap: 6px; }
  .dp-bid .dp-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bid-first { gap: 6px; }
  .bid-extra input, .bid-email { min-height: 40px; }
}
/* the email, the tick, the two optional details and the note under them are one row taller than they were: under about 670 px of height the note waits
   (the way to Stripe is also said under the terms and when the button is pressed) so the bidding still fits the first screen */
@media (min-width: 1100px) and (max-height: 670px) {
  .bid-next { display: none; }
  /* the full-width sold row under the card takes about 66 px of a window this short: the card's own top and bottom padding give back enough that nothing
     scrolls inside it (measured at 1100 x 640: the bidding column is 412 px, the card 418) */
  .dpanel { padding-block: 3px; }
}
/* the same on a phone up to about 860 px tall (an iPhone 12 to 16 is 844 to 852): measured, the email's row pushed the foot 22 px below the panel at 390 x 844 */
@media (max-width: 560px) and (max-height: 860px) {
  .bid-next { display: none; }
}

@media (prefers-reduced-motion: reduce) { .dl-item[data-phase="live"] .dl-mark { animation: none; } }
@media (forced-colors: active) {
  .dl-item[aria-pressed="true"], .dsold .dl-item[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .dl-mark { border-color: CanvasText; }
  .dsold { border: 1px solid CanvasText; }
  .dsold .dl-item, .dsold .dl-meta, .ds-title, .ds-count { color: CanvasText; }
  .dsold .dl-item[aria-pressed="true"] .dl-meta { color: HighlightText; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .dp-bidder, .dp-win, .bid-confirm { background: var(--white); }
}

/* ---------- the moderation page ---------- */
.page-domains-admin .page > * { max-width: 1180px; }
.da-section { display: grid; gap: 14px; }
.da-section h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: var(--title-weight); letter-spacing: var(--title-track); }
.da-add textarea { min-height: 120px; }
.da-table { display: grid; gap: 8px; }
.da-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.4fr); gap: 8px 16px; align-items: start; padding: 12px 14px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 52%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 20%, transparent); }
.da-row > * { min-width: 0; }
.da-name { margin: 0; font-size: 18px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.da-status { font-size: 13px; color: var(--fg-2); }
.da-line { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.da-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; justify-content: flex-end; }
.da-actions button, .da-actions input, .da-mini { min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; }
.da-actions button, .da-mini { cursor: pointer; border: 1px solid color-mix(in srgb, var(--slate-600) 45%, transparent); background: color-mix(in srgb, var(--white) 55%, transparent); color: var(--ink); }
.da-actions button:hover { background: var(--white); }
.da-actions button.is-primary { background: var(--graphite-800); color: var(--text-on-image); border-color: transparent; }
.da-actions input { width: 8em; border: 1px solid color-mix(in srgb, var(--slate-600) 45%, transparent); background: color-mix(in srgb, var(--white) 70%, transparent); color: var(--ink); }
.da-actions input.da-note { width: min(22em, 100%); }
.da-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.da-pre { margin: 0; max-height: 60svh; overflow: auto; padding: 14px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--white) 70%, transparent); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.da-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.da-start > * { margin: 0; }
.da-ends { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 52%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 20%, transparent); }
.da-sub { margin: 0; font-size: 18px; font-weight: var(--fw-medium); }
.da-count { font-size: 14px; color: var(--fg-2); }
.da-ends-result { display: grid; gap: 4px; }
.da-ends select, .da-ends input[type="datetime-local"] { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--slate-600) 45%, transparent); background: color-mix(in srgb, var(--white) 70%, transparent); font: inherit; color: var(--ink); }
.da-ends button:disabled { opacity: .55; cursor: default; }
.da-name .da-pick { width: 20px; height: 20px; margin: 0 8px -3px 0; accent-color: var(--graphite-800); cursor: pointer; }
.da-start input[type="datetime-local"] { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--slate-600) 45%, transparent); background: color-mix(in srgb, var(--white) 70%, transparent); font: inherit; color: var(--ink); }
@media (max-width: 860px) {
  .da-row { grid-template-columns: minmax(0, 1fr); }
  .da-actions { justify-content: flex-start; }
}

/* ---------- what you get: a copy of the founding edition's card (the home page's #about), under the fold ----------
   The card's own rules are the founding edition's (founders.css `.about-box`, `.about-get` ...); this only lays its two halves side by side
   when there is room: what memoe is, then what a domain buyer gets. It is below the screen, so it never takes room from the bidding. */
.domains-benefits { margin-bottom: 24px; gap: 24px 56px; grid-template-columns: minmax(0, 1fr); }
.dben-about, .dben-get { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dben-get .about-eyebrow { margin: 0; }
@media (min-width: 860px) {
  .domains-benefits { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
.page-domains .sponsor-slot { min-width: 0; }
.domains-benefits { grid-area: auto; } /* founders.css places .about-box in the home page's row by name; here it is an ordinary block */