/* Tagged GU brand, from "Tagged GU Logo Options.pdf" option 5:
   navy + brick red on warm cream, gold rules; Playfair Display italic for
   "Tagged", Oswald condensed capitals for "GU" and labels. */
:root {
  --navy: #1b2a4e;
  --red: #b5432f;
  --red-dark: #9a3624;
  --gold: #c99a4b;
  --cream: #f5efe2;

  --ink: #1d2433;
  --muted: #6e6758;
  --line: #e2d8c4;
  --ground: #efe7d8;
  --card: #fbf8f1;
  --accent: #1b2a4e;
  --accent-soft: #e5e8f0;
  --error: #a3261f;

  --font-script: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-caps: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 20px; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; }

/* The way in, for a phone. Above 880px the form already sits beside the pitch
   and needs no help; below it, the form is off the bottom of the screen and this
   button is the only thing telling a visitor the site can be entered at all.
   :not([hidden]) so the hidden attribute still wins when signed in. */
.signin-link { display: none; }
@media (max-width: 879px) {
  .signin-link:not([hidden]) {
    display: inline-block; cursor: pointer;
    background: var(--navy); color: #fff; border: 1px solid var(--navy);
    font: inherit; font-weight: 600; font-size: 14px;
    padding: 7px 16px; border-radius: 6px;
  }
}

/* Top navigation */
.site-nav { display: flex; gap: 4px; flex: 1; margin-left: 18px; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 6px 10px; border-radius: 6px;
}
.site-nav a:hover { color: var(--ink); background: var(--ground); }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* Home page */
.hero { text-align: center; padding: 28px 0 8px; }
.hero h1 { font-size: 30px; line-height: 1.2; margin: 0 0 6px; }
.hero p { margin: 0 0 20px; }
.hero .searchbar { max-width: 760px; margin: 0 auto; }
.home-section { margin-top: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 14px; }
.section-head h2 { font-size: 20px; margin: 0; }
.section-head .muted { font-size: 13px; }

.players-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.player-column h3 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 10px;
}
.player-card {
  display: flex; align-items: center; gap: 12px; padding: 8px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none;
}
.player-card:hover { border-color: var(--accent); }
.player-pic {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  background: #eceae5; display: flex; align-items: center; justify-content: center;
}
.player-pic img { width: 100%; height: 100%; object-fit: cover; }
.player-body { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-rank {
  flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.player-text { display: flex; flex-direction: column; min-width: 0; }
.player-name { font-weight: 600; overflow-wrap: anywhere; }
.player-meta { font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  .players-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .topbar { flex-wrap: wrap; }
  .site-nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .hero h1 { font-size: 24px; }
}
.account { display: flex; align-items: center; gap: 12px; font-size: 14px; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
h1 { font-size: 22px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.error { color: var(--error); margin: 12px 0 0; }
code { background: var(--line); padding: 1px 5px; border-radius: 4px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.narrow { max-width: 380px; margin: 40px auto; }
form label { display: block; margin: 14px 0 0; font-size: 14px; font-weight: 600; }
input[type=email], input[type=password], input[type=search], input[type=text] {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; border: 1px solid #c9cdd3; border-radius: 8px; background: #fff;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
}
button:disabled { opacity: 0.45; cursor: default; }
#login-form button { width: 100%; margin-top: 20px; }
button.link { background: none; border: none; color: var(--accent); padding: 0; }

.searchbar { display: flex; gap: 10px; }
.searchbar input { margin-top: 0; font-size: 17px; padding: 12px 14px; }
.searchbar select {
  font: inherit; font-size: 15px; padding: 0 10px; border: 1px solid #c9cdd3;
  border-radius: 8px; background: #fff; color: var(--ink); flex: 0 0 auto;
}
.options {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 12px 2px 18px; font-size: 14px;
}
.toggle { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.option-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.page-size { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.page-size select {
  font: inherit; font-size: 14px; padding: 3px 6px; border: 1px solid #c9cdd3;
  border-radius: 6px; background: #fff; color: var(--ink);
}

/* On/off switch for the table view. The real checkbox stays in place (invisible)
   so it keeps keyboard focus and screen-reader support. */
.switch { position: relative; display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.switch .track {
  position: relative; width: 36px; height: 20px; border-radius: 999px;
  background: #c9cdd3; transition: background 0.15s;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Filters: a panel beside the results, or behind a "Filters" button on a phone. */
.search-layout { display: block; }
.search-layout.with-filters {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start;
}
.filters {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-size: 14px;
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
}
.facet + .facet { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#facet-lists:not(:empty) + .facet { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.facet h3 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin: 0 0 8px;
}
.check { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; margin: 0; font-weight: 400; cursor: pointer; }
.check input { margin: 3px 0 0; flex: 0 0 auto; }
.check-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.count { color: var(--muted); font-size: 12px; padding-top: 1px; }
.facet .more { font-size: 13px; margin-top: 4px; }
.facet-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.range { display: flex; align-items: center; gap: 6px; }
.range input {
  width: 100%; min-width: 0; padding: 6px 8px; font: inherit; font-size: 14px;
  border: 1px solid #c9cdd3; border-radius: 6px; background: #fff;
}
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-weight: 400; }
.check-row select, .filters select {
  font: inherit; font-size: 14px; padding: 3px 6px; border: 1px solid #c9cdd3; border-radius: 6px; background: #fff;
}
#clear-filters { margin-top: 14px; font-size: 13px; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.chip {
  font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
}
.chip:hover { border-color: var(--accent); }
.active-filters .link { font-size: 13px; margin-left: 4px; }

.filters-toggle { background: var(--card); color: var(--accent); padding: 5px 12px; font-size: 14px; }

@media (max-width: 860px) {
  .search-layout.with-filters { display: block; }
  .filters { position: static; max-height: none; margin-bottom: 16px; }
  .filters:not(.open) { display: none; }
}
@media (min-width: 861px) {
  .filters-toggle { display: none !important; }
}

/* "Hide filters": the panel folds away and the results take the full width.
   Its own class, not .filters-toggle, which CSS hides on wide screens. */
.filters-collapse { background: var(--card); color: var(--accent); padding: 5px 12px; font-size: 14px; }
/* Wide screens only: on a phone the panel is opened and closed by the Filters
   button instead, and hiding it here stopped that button working. */
@media (min-width: 861px) {
  .search-layout.with-filters.filters-collapsed { grid-template-columns: minmax(0, 1fr); }
  .filters-collapsed .filters { display: none; }
}
@media (max-width: 860px) { .filters-collapse { display: none !important; } }

/* Compare photo-matched: two tables, one above the other. */
.split-results { display: block; }
.split-side + .split-side { margin-top: 26px; }
.split-side .section-head { margin-bottom: 8px; }
.split-side h2 { font-size: 17px; }

/* Table view. Scrolls sideways on its own on a narrow screen. */
.results-table {
  overflow-x: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
}
table.lots { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lots th {
  text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); padding: 10px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.lots td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.lots tbody tr:last-child td { border-bottom: none; }
table.lots tbody tr:hover { background: #fafaf8; }
table.lots .num { text-align: right; }
table.lots .nowrap { white-space: nowrap; }
table.lots .title-cell { min-width: 280px; font-weight: 500; }
table.lots .title-cell a { color: inherit; text-decoration: none; }
table.lots .title-cell a:hover { text-decoration: underline; }
table.lots .price-cell { font-weight: 700; }
table.lots .price-cell.unsold { font-weight: 500; color: var(--muted); }
table.lots .badges { flex-wrap: wrap; }
table.lots .cell-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* The title column stays put while the rest scrolls sideways. */
table.lots th.title-cell, table.lots td.title-cell {
  position: sticky; left: 0; background: var(--card); z-index: 1;
}
table.lots tbody tr:hover td.title-cell { background: #fafaf8; }

/* On a phone each row becomes a block: no sideways scrolling, and every cell
   carries its column name (data-label, set in app.js). */
@media (max-width: 720px) {
  .results-table { border: none; background: none; }
  table.lots thead { display: none; }
  table.lots, table.lots tbody, table.lots tr, table.lots td { display: block; width: auto; }
  table.lots tr {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 12px;
  }
  table.lots td { border: none; padding: 2px 0; text-align: left !important; }
  table.lots td.title-cell { position: static; font-size: 15px; margin-bottom: 6px; }
  table.lots td:empty { display: none; }
  table.lots td[data-label]:not(.title-cell)::before {
    content: attr(data-label) ": "; color: var(--muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  table.lots td.price-cell { font-size: 16px; }
}

.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.pic { aspect-ratio: 4 / 3; background: #eceae5; display: flex; align-items: center; justify-content: center; }
.pic img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pic.none { color: var(--muted); font-size: 13px; }
.body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.title { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0; }
.title a { color: inherit; text-decoration: none; }
.title a:hover { text-decoration: underline; }
.price { font-size: 18px; font-weight: 700; }
.price.unsold { font-size: 14px; font-weight: 600; color: var(--muted); }
.meta { font-size: 13px; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--line); }
.badge.match { background: var(--accent-soft); color: var(--accent); }

a.pic { text-decoration: none; }
.listing-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.listing-link:hover { text-decoration: underline; }
.card .listing-link { margin-top: 2px; }

/* Detail page */
.back-link { display: inline-block; margin: 0 0 16px; color: var(--accent); font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.detail { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.detail-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.detail-title { font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.detail-price { font-size: 30px; font-weight: 700; margin: 0 0 4px; }
.detail-price.unsold { font-size: 20px; color: var(--muted); }
.button-link {
  display: inline-block; margin: 14px 0 4px; padding: 10px 16px; border-radius: 8px;
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
}
.button-link:hover { filter: brightness(1.1); }
.detail-section { margin-top: 22px; }
.detail-section h2 {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.detail-section .badges { margin-bottom: 10px; }
.detail-text { margin: 0; white-space: pre-line; max-width: 75ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.fine-print { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.fine-print a { color: var(--muted); }
.source-note { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 22px; }

/* Who owns the listings, and where to write about them. On every page. */
.site-footer {
  max-width: 1100px; margin: 0 auto; padding: 18px 16px 32px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.site-footer p { margin: 0 0 6px; max-width: 72ch; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--muted); }

/* The policy pages: terms.html, privacy.html, data-use.html. Plain reading
   width, since these are documents rather than screens of data. */
main.legal { max-width: 760px; }
main.legal h1 { font-size: 26px; margin-bottom: 4px; }
main.legal h2 {
  font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--navy);
  margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
main.legal p, main.legal li { line-height: 1.65; }
main.legal ul { margin: 8px 0; padding-left: 20px; }
main.legal li { margin: 5px 0; }
main.legal a { color: var(--red-dark); }

/* The two tick boxes on the beta request form. Not bold like the field
   labels above them - these are sentences, not headings. */
.tick {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; font-size: 13px; font-weight: 400; line-height: 1.45;
}
.tick input { margin: 2px 0 0; flex: none; }
.tick a { color: var(--red-dark); }

.gallery-main {
  aspect-ratio: 1 / 1; max-height: 62vh; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main.none { background: #eceae5; color: var(--muted); }
.gallery-count { font-size: 13px; margin: 6px 0 0; min-height: 1em; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-height: 176px; overflow-y: auto; }
.thumb {
  width: 64px; height: 64px; padding: 0; background: #fff; border: 2px solid var(--line);
  border-radius: 6px; overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb[aria-current="true"] { border-color: var(--accent); }

@media (max-width: 760px) {
  .detail { padding: 16px; }
  .detail-top { grid-template-columns: 1fr; }
}

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.pager button { background: var(--card); color: var(--accent); }

@media (max-width: 520px) {
  .searchbar { flex-direction: column; }
  .results { grid-template-columns: 1fr; }
}

/* ---- Tagged GU brand (logo option 5) ------------------------------------ */

/* Header: cream bar with a navy rule, the wordmark in the logo's two faces. */
.topbar { background: var(--cream); border-bottom: 3px solid var(--navy); }
.brand { display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; }
.brand-script {
  font-family: var(--font-script); font-style: italic; font-weight: 800;
  color: var(--navy); font-size: 27px;
}
.brand-gu {
  font-family: var(--font-caps); font-weight: 700; color: var(--red);
  font-size: 23px; letter-spacing: 0.05em;
}
.site-nav a {
  font-family: var(--font-caps); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 13px; color: var(--navy); border-radius: 0;
}
.site-nav a:hover { background: transparent; color: var(--red); }
.site-nav a[aria-current="page"] {
  color: var(--red); background: transparent; box-shadow: inset 0 -2px 0 var(--red);
}
.account { font-family: var(--font-caps); letter-spacing: 0.03em; }

/* Buttons: brick red for actions, navy for quieter ones. */
button { background: var(--red); border-color: var(--red); font-family: var(--font-caps); letter-spacing: 0.06em; font-weight: 600; }
button:hover:not(:disabled) { background: var(--red-dark); border-color: var(--red-dark); }
button.link, button.link:hover:not(:disabled) { background: none; border: none; color: var(--navy); font-family: inherit; letter-spacing: 0; }
.pager button, .filters-toggle {
  background: var(--card); color: var(--navy); border-color: var(--navy);
}
.pager button:hover:not(:disabled), .filters-toggle:hover {
  background: var(--navy); color: var(--cream); border-color: var(--navy);
}
.button-link { background: var(--red); font-family: var(--font-caps); letter-spacing: 0.06em; }
.button-link:hover { filter: none; background: var(--red-dark); }
a.back-link, .listing-link { color: var(--navy); }
input:focus, select:focus { outline-color: var(--navy); }

/* Home hero: the logo itself, framed like the tag - dashed navy border, gold rules. */
.hero {
  background: var(--cream); border: 4px dashed var(--navy); border-radius: 3px;
  padding: 34px 20px 30px; margin-top: 4px;
}
.hero-mark { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.gold-rule { display: block; width: 130px; height: 4px; background: var(--gold); }
.hero-script {
  font-family: var(--font-script); font-style: italic; font-weight: 800;
  font-size: clamp(54px, 9vw, 96px); line-height: 1.12; color: var(--navy);
  margin-top: 12px;
}
.hero-gu {
  font-family: var(--font-caps); font-weight: 700; color: var(--red);
  font-size: clamp(62px, 10vw, 112px); line-height: 1; letter-spacing: 0.08em;
  margin: 2px 0 16px; padding-left: 0.08em;
}
.mark-tagline {
  font-family: var(--font-caps); font-weight: 600; letter-spacing: 0.18em;
  color: var(--navy); font-size: 15px; margin-top: 14px;
}
.hero h1 {
  font-family: var(--font-caps); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 20px; color: var(--navy); margin: 8px 0 4px;
}

/* Section headings and small labels in the logo's condensed capitals. */
.section-head h2 {
  font-family: var(--font-caps); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy);
}
.player-column h3, .facet h3, .detail-section h2, table.lots th {
  font-family: var(--font-caps); color: var(--navy); letter-spacing: 0.09em;
}
.player-column h3 { color: var(--red); font-size: 15px; }
h1 { color: var(--navy); }

/* Accents */
.price, .detail-price, table.lots .price-cell { color: var(--navy); }
.badge.match { background: #f6e1db; color: var(--red); }
.player-rank { background: var(--navy); color: var(--cream); }
.player-card:hover, .chip:hover { border-color: var(--red); }
.chip { background: #f6e1db; color: var(--red); }
.thumb[aria-current="true"] { border-color: var(--red); }
.switch input:checked + .track { background: var(--navy); }

/* Date sold: two calendar pickers, stacked to fit the filter panel. */
.date-range { display: flex; flex-direction: column; gap: 8px; }
.date-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-weight: 400; font-size: 13px; color: var(--muted); }
.date-field input {
  flex: 0 1 160px; min-width: 0; padding: 5px 8px; font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid #c9cdd3; border-radius: 6px; background: #fff;
}

/* "See all" beside a home section's heading */
.section-actions { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.see-all {
  font-family: var(--font-caps); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 14px; color: var(--red); text-decoration: none; white-space: nowrap;
}
.see-all:hover { text-decoration: underline; }

/* Beta access, forgot password, set password */
button.secondary {
  background: var(--card); color: var(--navy); border-color: var(--navy); width: 100%; margin-top: 10px;
}
button.secondary:hover:not(:disabled) { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.login-links { margin: 12px 0 0; font-size: 14px; text-align: center; }
.beta-callout {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; font-size: 14px;
}
.beta-callout p { margin: 0; }
.optional { font-weight: 400; color: var(--muted); }
textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
  border: 1px solid #c9cdd3; border-radius: 8px; background: #fff; resize: vertical;
}
.success { color: #2f6b3a; background: #e6f1e3; border-radius: 8px; padding: 12px 14px; margin: 16px 0 0; }
.small { font-size: 13px; margin: 8px 0 0; }
#set-password form button[type=submit], #request-form button[type=submit], #forgot-form button[type=submit] { width: 100%; margin-top: 18px; }
#set-password h1 { font-family: var(--font-caps); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 18px; }
/* The honeypot field: invisible to people, still in the form for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sign-in: the wordmark above the form. */
.login-mark { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.login-mark .brand-script { font-size: 44px; line-height: 1.1; }
.login-mark .brand-gu { font-size: 44px; letter-spacing: 0.08em; }
.login-mark .mark-tagline { font-size: 12px; margin-top: 8px; }
#login h1 { font-family: var(--font-caps); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 18px; }
/* The navy rule belongs to the sign-in card, not the whole page, now that the
   signed-out view carries an introduction beside it. */
#login .panel { border-top: 4px solid var(--navy); }

/* Signed-out page: what the site is, next to the way in. One column on a phone,
   two side by side once there is room for both. */
.signin-page { max-width: 940px; margin: 40px auto; display: grid; gap: 30px; }
.signin-card { width: 100%; max-width: 380px; margin: 0 auto; }
@media (min-width: 880px) {
  .signin-page { grid-template-columns: 1fr 380px; align-items: start; gap: 48px; }
  .signin-card { margin: 0; }
}
.signin-intro { min-width: 0; }
.intro-head {
  font-family: var(--font-caps); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: clamp(22px, 4vw, 30px); line-height: 1.15;
  color: var(--navy); margin: 0 0 14px;
}
/* Taglines carry the page: one big word, one line of substance under it.
   ACE's steer (2026-10-02) - say it in words, not paragraphs. */
.taglines { list-style: none; margin: 0 0 24px; padding: 0; }
.taglines li { padding: 13px 0; border-top: 1px solid var(--line); }
.taglines li:last-child { border-bottom: 1px solid var(--line); }
.tag-word {
  display: block; font-family: var(--font-caps); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
  font-size: clamp(26px, 5.5vw, 38px); color: var(--red-dark);
}
.tag-gloss { display: block; margin-top: 5px; font-size: 15px; color: var(--navy); }
.intro-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 14px; margin: 0 0 20px; padding: 16px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.intro-stats div { margin: 0; }
.intro-stats dt {
  font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.intro-stats dd {
  margin: 3px 0 0; font-size: 21px; font-weight: 600; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.intro-note { font-size: 13px; color: var(--muted); margin: 0; max-width: 56ch; }

/* Suggest an edit: a quiet control that opens a form of ticks and values. */
/* Site buttons stretch to their container, which is right in the sign-in card and
   wrong for a quiet control sitting in the middle of a lot page. */
/* Outlined in red was still too quiet - it read as page furniture. Filled, it
   matches the weight of the other red actions on the page, and the question
   above it gives the button something to answer. (ACE, 2026-10-09) */
.suggest-lead { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
button.suggest-open {
  width: auto; display: inline-block; margin: 0 0 4px;
  background: var(--red); border: 1px solid var(--red); color: #fff;
  font-weight: 600;
}
button.suggest-open:hover:not(:disabled) {
  background: var(--red-dark); border-color: var(--red-dark); color: #fff;
}
button.suggest-open:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 3px; }
/* The dialog it opens carries the same red edge, so the two read as one thing. */
.suggest-dialog { border-top-color: var(--red) !important; }
.suggest-form button[type="submit"] { width: auto; display: inline-block; }
.suggest-wrap { margin-top: 18px; }
.suggest-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto;
  border: 1px solid var(--line); border-top: 4px solid var(--navy);
  border-radius: 10px; padding: 22px; background: var(--card); color: inherit;
}
.suggest-dialog::backdrop { background: rgba(20, 24, 31, 0.55); }
.suggest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.suggest-title {
  font-family: var(--font-caps); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 18px; color: var(--navy); margin: 0;
}
.suggest-close {
  width: auto; background: none; border: none; color: var(--muted);
  font-size: 26px; line-height: 1; padding: 0 4px; margin: -4px -4px 0 0;
}
.suggest-close:hover:not(:disabled) { background: none; color: var(--navy); }
.suggest-lot { margin: 6px 0 16px; font-size: 13px; color: var(--muted); }
.suggest-form { margin-top: 0; }
.suggest-form > p { margin: 0 0 14px; }
.suggest-fields { list-style: none; margin: 0 0 16px; padding: 0; }
.suggest-fields li {
  display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: 6px 14px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.suggest-fields li:last-child { border-bottom: none; }
.suggest-tick { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.suggest-tick input { width: 16px; height: 16px; margin: 0; flex: none; }
.suggest-now {
  grid-column: 1; font-size: 12px; color: var(--muted); margin-left: 24px;
  overflow-wrap: anywhere;
}
.suggest-value { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; min-width: 0; }
.suggest-value:disabled { background: #f3f4f6; color: var(--muted); }
.suggest-note-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.suggest-note { display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; border: 1px solid #c9cdd3; border-radius: 8px; background: #fff; resize: vertical; }
@media (max-width: 620px) {
  .suggest-fields li { grid-template-columns: 1fr; }
  .suggest-value { grid-column: 1; grid-row: auto; }
  .suggest-now { margin-left: 24px; }
}

/* Comparable sales */
.comps-subject { margin: 0 0 12px; max-width: 900px; }
.comps-results { margin-top: 4px; }
.comps-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; }
.comps-more { margin-top: 18px; text-align: center; }
.match-badge {
  display: inline-block; align-self: flex-start; font-family: var(--font-caps);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px;
  background: var(--cream); color: var(--muted); border: 1px solid var(--line);
}
.match-badge.high { background: #e7f0e4; color: #2f5d2a; border-color: #c7ddc1; }
.match-badge.medium { background: #fdf1de; color: #8a5a1b; border-color: #edd6ac; }
.match-badge.low { background: #f1f1ef; color: #6b6b66; border-color: #dededa; }
#comps h1 { margin: 0; }

/* Upcoming auctions */
#auctions h1 { margin: 0; }
.auctions-intro { margin: 4px 0 20px; max-width: 640px; }
/* The lots are the page; the sales are context beside them. One column on a
   phone, with the lots first - a visitor came to see what is up for auction,
   not a calendar. */
.upcoming-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* Filters left, lots centre, sales right - but only where all three fit. Below
   that everything stacks with the lots FIRST: a visitor came to see what is up
   for auction, not to read a filter rail. */
/* Three columns need 200 + 260 of rail plus gaps, so about 460px of furniture.
   At 920 that still leaves ~440 for the lots, which is enough for a row with a
   64px thumbnail. A browser window at 1100 had plenty of room and was being
   sent to the stacked layout for no reason. */
@media (min-width: 920px) {
  .upcoming-layout { grid-template-columns: 200px minmax(0, 1fr) 260px; gap: 26px; align-items: start; }
  .upcoming-filters { order: 0; }
  .upcoming-main { order: 1; }
  .upcoming-side { order: 2; }
  /* Collapsing has to give the space back, or it is just hiding. The column
     shrinks to the width of its own toggle rather than disappearing, so the
     control that re-opens it is still there - Explore needs a separate button
     for that because it hides the panel completely. */
  .upcoming-layout.filters-collapsed  { grid-template-columns: auto minmax(0, 1fr) 260px; }
  .upcoming-layout.auctions-collapsed { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .upcoming-layout.filters-collapsed.auctions-collapsed {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  /* Vertical when collapsed, so the strip is narrow instead of a wide stub. */
  .filters-collapsed .upcoming-filters .panel-toggle,
  .auctions-collapsed .upcoming-side .panel-toggle {
    writing-mode: vertical-rl; text-orientation: mixed; gap: 8px;
  }
  .filters-collapsed .upcoming-filters .panel-caret,
  .auctions-collapsed .upcoming-side .panel-caret { writing-mode: horizontal-tb; }
  .filters-collapsed .filter-head { display: block; }
  /* No room for it in a vertical strip, and it would be unreadable. */
  .filters-collapsed .live-clear { display: none; }
}
/* Two columns before one: the filter rail drops under the lots first, because
   it is the part a visitor needs least on a narrow screen. */
@media (min-width: 700px) and (max-width: 919px) {
  .upcoming-layout { grid-template-columns: minmax(0, 1fr) 240px; }
  /* Filters used to span the full width BELOW the lots here, which buried the
     control the same way the phone layout did - 334 lots is a long way to
     scroll to reach a filter. It now sits above the lots in the left column,
     with the auctions column beside both. */
  .upcoming-filters { grid-column: 1; grid-row: 1; }
  .upcoming-main    { grid-column: 1; grid-row: 2; }
  .upcoming-side    { grid-column: 2; grid-row: 1 / span 2; }
}
/* On a phone both rails used to sit BELOW the lots. With 334 lots open that
   put the Filter control about 4,300px down the page - past every lot - and
   since both panels remember being collapsed, all that was waiting there was a
   20px stub. They were reachable in theory and invisible in practice.
   So on a phone they go ABOVE the lots as two one-line headers that open in
   place. Closed, they cost about 80px, which is the price of being able to
   find them; the lots still start near the top. */
@media (max-width: 699px) {
  /* The search box lives inside .upcoming-main, so ordering whole panels sent
     it below the rails too - and search is the point of the page. display:
     contents dissolves that wrapper here, letting its children take their own
     place in the stack: search first, the two rails next, the lots after. */
  .upcoming-main { display: contents; }
  .upcoming-main > * { order: 3; }
  #live-search-form, .upcoming-main > .search-hint, #recent-listings { order: -1; }
  .upcoming-filters { order: 1; }
  .upcoming-side    { order: 2; }
  .upcoming-layout  { gap: 14px; }

  /* A full-width row that reads as something you can tap, rather than two
     words floating in the margin. */
  .upcoming-filters .panel-toggle,
  .upcoming-side .panel-toggle {
    width: 100%; justify-content: flex-start; gap: 10px;
    padding: 12px 2px; border-bottom: 1px solid var(--line);
  }
  .upcoming-filters .filter-head { align-items: center; }
  /* Open, the rail needs room under its header. */
  .upcoming-filters #live-facets:not([hidden]),
  .upcoming-side #auctions-panel:not([hidden]) { padding-top: 14px; }
}
.upcoming-filters { min-width: 0; }
.filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.facet-group { margin: 0 0 18px; }
.facet-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
                  color: var(--muted); margin: 0 0 6px; }
.facet-row { display: flex; align-items: baseline; gap: 7px; font-size: 14px;
             padding: 2px 0; cursor: pointer; }
.facet-row input { margin: 0; flex: 0 0 auto; }
.facet-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Auction names are long and, worse, they differ at the END - Heritage runs
   "...Auction #152641" and "...Auction #152642" side by side, and one line
   with an ellipsis renders them identical. So this group alone wraps instead
   of truncating, and the row aligns to the top rather than the baseline. */
.facet-group-auction .facet-name { white-space: normal; overflow: visible;
                                   line-height: 1.3; }
.facet-group-auction .facet-row { align-items: flex-start; }
.facet-group-auction .facet-row input { margin-top: 3px; }
.facet-count { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.facet-more { font-size: 13px; padding: 2px 0; }
.live-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 14px; flex-wrap: wrap; }
.live-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }

/* Saved searches */
.nav-badge { display: inline-block; min-width: 17px; margin-left: 6px; padding: 0 5px;
             background: var(--red); color: #fff; border-radius: 9px;
             font-size: 11px; line-height: 17px; text-align: center; font-weight: 700; }
/* The heart on its own was easy to miss beside a red Search button, so it is
   bigger and carries the word. One control, not two: the word is part of the
   button and shares its hit area and hover. */
.save-search { background: none; border: 0; cursor: pointer; line-height: 1;
               color: var(--muted); padding: 0 8px;
               display: inline-flex; align-items: center; gap: 6px; }
.save-search .heart { font-size: 30px; line-height: 1; }
.save-search .save-word { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.save-search:hover, .save-search.is-saved { color: var(--red); }
.save-search:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.saved-group { margin: 0 0 30px; }
.saved-table { display: flex; flex-direction: column; }
.saved-row { display: flex; gap: 14px; align-items: baseline;
             padding: 12px 2px; border-top: 1px solid var(--line); }
.saved-row:first-child { border-top: 0; }
.saved-q { flex: 1; min-width: 0; font-weight: 600; }
.saved-q .muted { font-weight: 400; font-size: 13px; }
.saved-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.saved-new { background: var(--red); color: #fff; border-radius: 9px;
             padding: 1px 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.saved-delete { background: none; border: 0; color: var(--muted); cursor: pointer;
                font-size: 15px; padding: 0 4px; }
.saved-delete:hover { color: var(--red); }
.scope-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px;
                max-width: 420px; background: var(--card); color: var(--ink); }
.scope-dialog::backdrop { background: rgba(0,0,0,0.35); }
.scope-dialog h2 { margin: 0 0 4px; font-size: 18px; }
.scope-dialog .choices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.scope-dialog .choices label { display: flex; gap: 8px; align-items: baseline; }
.scope-dialog .row { display: flex; gap: 10px; justify-content: flex-end; }

/* A heading that is also a button. Keeping the <h2> inside it means the caret
   and the words are one target, which matters most on a phone where these
   panels sit below the lots and are the first thing worth collapsing. */
.panel-toggle { background: none; border: 0; padding: 0; cursor: pointer;
                display: flex; align-items: baseline; gap: 6px; color: inherit;
                font: inherit; text-align: left; }
.panel-toggle .side-head { margin: 0; }
.panel-caret { font-size: 11px; transition: transform 0.12s ease; color: var(--muted); }
.panel-toggle[aria-expanded="false"] .panel-caret { transform: rotate(-90deg); }
.panel-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.upcoming-main { min-width: 0; }
.upcoming-side { min-width: 0; }
.side-head { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.06em;
             font-size: 14px; margin: 0 0 4px; }
.side-note { font-size: 13px; margin: 0 0 14px; }
.search-hint { font-size: 13px; margin: 6px 0 18px; }

/* Stacked in the sidebar, not a two-across grid any more. */
.auction-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* A row, not a card. Every Heritage listing is text-only and always will be -
   their photographs live on lot pages we cannot reach - while Goldin and Hunt
   carry one. A card grid would look broken for the largest source; a row with
   an optional thumbnail degrades without comment. */
.live-results { display: flex; flex-direction: column; gap: 0; }
.live-row { display: flex; gap: 14px; align-items: flex-start;
            padding: 14px 2px; border-top: 1px solid var(--line); }
.live-row:first-child { border-top: 0; }
.live-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px;
              object-fit: cover; background: var(--line); }
.live-thumb.is-empty { background: repeating-linear-gradient(45deg,
     var(--line), var(--line) 6px, transparent 6px, transparent 12px); }
.live-body { min-width: 0; flex: 1; }
.live-title { font-weight: 600; line-height: 1.35; margin: 0 0 4px; }
.live-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.live-sale { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.live-comps { font-size: 13px; margin-top: 6px; display: inline-block; }
/* Compact in the sidebar: these are context beside the lots, not the page.
   Smaller type, tighter padding, and the calendar buttons stack rather than
   forcing the card wide. */
.auction-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.upcoming-side .auction-card .auction-house { font-size: 11px; letter-spacing: 0.05em; margin: 0 0 2px; }
.upcoming-side .auction-card .auction-title { font-size: 14px; line-height: 1.3; margin: 0 0 6px; }
.upcoming-side .auction-card .facts { margin: 0 0 4px; }
.upcoming-side .auction-card .facts dt { font-size: 11px; }
.upcoming-side .auction-card .facts dd { font-size: 12px; margin: 0; }
.upcoming-side .auction-card .auction-countdown { font-size: 12px; margin: 0 0 6px; }
.upcoming-side .auction-card .cal-buttons { display: flex; flex-direction: column; gap: 4px; }
.upcoming-side .auction-card .cal-buttons > * { font-size: 12px; padding: 4px 8px; text-align: center; }
.auction-lots { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
/* The house name was 12px condensed caps tracked out to 1.5px, which reads
   letter by letter rather than as a word. Bigger, barely tracked, heavier and
   a step darker (2026-09-29). */
.auction-house {
  font-family: var(--font-caps); text-transform: uppercase;
  letter-spacing: 0.6px; font-size: 14px; font-weight: 600;
  color: var(--red-dark); margin: 0 0 6px;
}
.auction-title { font-size: 19px; margin: 0 0 10px; line-height: 1.3; }
.auction-title a { color: inherit; text-decoration: none; }
.auction-title a:hover { text-decoration: underline; }
.auction-countdown { font-weight: 600; color: var(--navy); margin: 8px 0; }
.cal-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.button-link { display: inline-block; background: var(--red); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 6px; }
.button-link:hover { filter: brightness(1.08); }
.cal-buttons button.secondary { width: auto; margin: 0; padding: 8px 14px; font-size: 14px; }

/* Recent big sales: 3 across, 2 on a tablet, 1 on a phone - 6 sales fill every row. */
#big-sales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { #big-sales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #big-sales { grid-template-columns: 1fr; } }


/* Recent searches: chips under the box, not a dropdown. A dropdown hides until
   you click into the field, which is exactly when you are already typing. */
.recent-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
                margin: 8px 0 14px; font-size: 13px; }
.recent-label { color: var(--muted); margin-right: 2px; }
.recent-chip { background: var(--card); border: 1px solid var(--line);
               border-radius: 14px; padding: 3px 11px; font-size: 13px;
               color: var(--navy); cursor: pointer; font-family: inherit; }
.recent-chip:hover { border-color: var(--navy); }
.recent-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.recent-chip .n { color: var(--muted); margin-left: 5px; font-size: 12px; }

/* What a saved search is filtered to, under its name. Quiet: it is how you tell
   two saves of the same words apart, not something to read every time. */
.saved-filters {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}