/* Halldin & Co Sourcing Console -- Diamond section. Design tokens
   (palette/type) live in halldin-tokens.css, shared verbatim across every
   Halldin section (see that file's own header for why it's a documented
   copy, not a live cross-app import) -- imported here, everything below
   is this section's own component styling built on those tokens. */
@import url("halldin-tokens.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

body:has(#login-view:not(.hidden)) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none !important;
}

/* -- Login -- */
#login-view {
  width: 100%;
  max-width: 340px;
  padding: 0 1.5rem;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 8px;
}

#login-form h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
  text-align: center;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}

#login-form input {
  padding: 0.65rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  font-size: 1rem;
  font-family: var(--font-ui);
}

#login-form input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

#login-form button {
  padding: 0.65rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #1c2b1f;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

#login-form button:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.error {
  color: var(--critical);
  font-size: 0.875rem;
  min-height: 1.25rem;
  margin: 0;
  text-align: center;
}

/* -- App shell: fixed sidebar + scrolling main content -- */
#app-view {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

.sidebar {
  background: linear-gradient(180deg, #0c2419 0%, var(--ground) 100%);
  border-right: 1px solid var(--surface-line);
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 6px;
  text-decoration: none;
  cursor: pointer;
}

.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: var(--gold-bright);
  line-height: 1.15;
}

.brand-word small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 3px;
}

nav.tabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

nav.tabs .nav-label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 10px 8px;
  margin-top: 14px;
}

nav.tabs .nav-label:first-child {
  margin-top: 0;
}

.tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 3px;
  border: none;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  color: var(--ink-dim);
  cursor: pointer;
}

.tab-btn .nav-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.tab-btn:hover {
  background: rgba(198, 161, 91, 0.07);
  color: var(--ink);
}

.tab-btn.active {
  background: var(--surface-raised);
  color: var(--gold-bright);
}

.tab-btn.active::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.tab-btn.active .nav-count {
  color: var(--gold);
}

.sidebar-foot {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid var(--surface-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#logout-btn {
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--font-ui);
}

#logout-btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.switch-section-link {
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--font-ui);
  text-decoration: none;
}

.switch-section-link:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(198, 161, 91, 0.07);
}

main {
  padding: 24px 32px 56px;
  min-width: 0;
}

/* -- Generic buttons (scrape controls, sync buttons, Add Stone, form
   actions, tab-adjacent controls) -- one shared look, distinguished by
   .color-preset-btn (already the class app.js reuses for every one of
   these), an .active variant, and a .btn-gold accent used sparingly for
   the single primary action per view. */
.color-preset-btn {
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-ui);
}

.color-preset-btn:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

.color-preset-btn.active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(198, 161, 91, 0.1);
}

.color-preset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -- Top strip: scrape controls, shared across every tab -- */
.scrape-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.scrape-control select {
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
}

.scrape-control button {
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #1c2b1f;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-ui);
}

.scrape-control button:hover {
  background: var(--gold-bright);
}

.scrape-control button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-raised);
  border-color: var(--surface-line);
  color: var(--ink-muted);
}

.scrape-error {
  color: var(--critical);
}

.scrape-success {
  color: var(--positive);
}

/* Block-level banners, not inline text -- these two states are meant to be
   unmissable, not just a colored word in a status line you could skim. */
.scrape-blocked,
.scrape-cooldown {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  font-weight: 600;
}

.scrape-blocked {
  background: var(--critical-bg);
  border: 1px solid var(--critical);
  color: var(--critical);
}

.scrape-cooldown {
  background: var(--attention-bg);
  border: 1px solid var(--attention);
  color: var(--attention);
}

/* Deliberately styled to look like a warning, not a normal action button --
   this bypasses a safeguard, and should never visually read as routine. */
.scrape-override-btn {
  border-color: var(--critical) !important;
  background: transparent !important;
  color: var(--critical) !important;
}

.scrape-override-btn:hover {
  background: var(--critical-bg) !important;
}

.abort-scrape-btn {
  border-color: var(--attention) !important;
  background: transparent !important;
  color: var(--attention) !important;
}

.abort-scrape-btn:hover {
  background: var(--attention-bg) !important;
}

/* Informational, not alarming -- "there's newer data" is routine, not a
   warning -- so its own dusty-blue tone rather than the amber
   scrape-cooldown "caution" meaning, though same block-banner treatment
   for visibility. */
.favorites-newer-data-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  background: var(--info-bg);
  border: 1px solid var(--info);
  color: var(--info);
  font-weight: 600;
}

.favorites-newer-data-banner button {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--info);
  background: var(--surface);
  color: var(--info);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-ui);
}

.favorites-newer-data-banner button:hover {
  background: var(--info-bg);
}

.verify-gia-link {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  border: 1px solid var(--info);
  color: var(--info);
  text-decoration: none;
  font-size: 0.72rem;
  white-space: nowrap;
}

.verify-gia-link:hover {
  background: var(--info-bg);
}

/* The plain "Open lot" (url column) and "Open" (favorites) links --
   :not(.verify-gia-link) so this stays lower specificity than that link's
   own distinct button-style treatment above, rather than accidentally
   overriding it. Bare <a> tags otherwise render in the browser's default
   blue/underline, which is legible but visually clashes with everything
   else in this design system. */
.lot-table a:not(.verify-gia-link) {
  color: var(--gold-bright);
  text-decoration: none;
}

.lot-table a:not(.verify-gia-link):hover {
  text-decoration: underline;
}

.heart-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  color: var(--ink-muted);
}

.heart-btn.favorited {
  color: var(--critical);
}

.heart-btn:hover {
  color: var(--critical);
}

/* Small chip, not a bare emoji floating in a cell -- consistent with every
   other status indicator in the tables (.confidence-*, .reserve-*). */
.hot-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1;
  cursor: default;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--attention-bg);
  color: var(--attention);
}

.spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--surface-line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#results-summary {
  color: var(--ink-muted);
  font-size: 0.83rem;
  margin: 0 0 0.85rem;
}

/* -- Tables -- */
.table-wrap {
  overflow-x: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--surface-line) var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.table-wrap::-webkit-scrollbar {
  height: 11px;
}

.table-wrap::-webkit-scrollbar-track {
  background: var(--surface);
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--surface-line);
  border-radius: 6px;
  border: 2px solid var(--surface);
}

.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

.lot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}

.lot-table th,
.lot-table td {
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--surface-line);
  text-align: left;
  white-space: nowrap;
}

.lot-table thead th {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  position: sticky;
  top: 0;
  background: var(--surface-raised);
  border-top: none;
  border-bottom: 1.5px solid var(--gold);
}

.lot-tbody tr:hover td {
  background: rgba(198, 161, 91, 0.045);
}

/* Click a row to pin this highlight -- a visual anchor for wide tables so
   scrolling horizontally to a far-right column doesn't lose track of
   which row you were on (see enableRowSelection in app.js). Deliberately
   NOT !important -- a pill-styled status cell (.confidence-*, etc.) keeps
   its own tinted background on top of this, since that color is still
   real information worth preserving, not something a selection highlight
   should wash out. cursor: pointer on the row signals it's clickable. */
.lot-tbody tr {
  cursor: pointer;
}

.lot-tbody tr.row-selected td {
  background: rgba(198, 161, 91, 0.16);
}

.lot-tbody tr.row-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--gold);
}

/* Chip-styled status cells -- the underlying className app.js already
   applies directly to the <td> (td.className = `confidence-${tier}`, same
   for ref-confidence/reserve) is reused as-is; this is a CSS-only
   restyle from bare colored text to a tinted, rounded cell so status
   reads as a glanceable chip rather than another line of plain text. */
.confidence-high,
.confidence-medium,
.confidence-low,
.confidence-none,
.ref-confidence-close,
.ref-confidence-moderate,
.ref-confidence-far,
.reserve-met,
.reserve-not-met {
  border-radius: 999px !important;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
}

.confidence-high { background: var(--positive-bg) !important; color: var(--positive) !important; }
.confidence-medium { background: var(--info-bg) !important; color: var(--info) !important; }
.confidence-low { background: var(--attention-bg) !important; color: var(--attention) !important; }
.confidence-none { background: var(--neutral-bg) !important; color: var(--ink-muted) !important; font-weight: 500; }

.ref-confidence-close { background: var(--positive-bg) !important; color: var(--positive) !important; }
.ref-confidence-moderate { background: var(--attention-bg) !important; color: var(--attention) !important; }
.ref-confidence-far { background: var(--critical-bg) !important; color: var(--critical) !important; }

.reserve-met { background: var(--positive-bg) !important; color: var(--positive) !important; }
.reserve-not-met { background: var(--attention-bg) !important; color: var(--attention) !important; }

.tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.favorites-summary {
  color: var(--ink-muted);
  font-size: 0.83rem;
  margin: 0.5rem 0 1rem;
}

.market-meta {
  color: var(--ink-muted);
  font-size: 0.79rem;
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

/* Long explanatory copy (methodology, real-coverage caveats) tucked behind
   a native disclosure -- every word is still there, just not occupying
   default vertical space. The short dynamic meta line above each (fetch
   timestamps etc, still a plain .market-meta <p>) stays always visible. */
details.methodology {
  margin: 0 0 0.9rem;
}

details.methodology summary {
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--info);
  list-style: none;
}

details.methodology summary::-webkit-details-marker {
  display: none;
}

details.methodology summary::before {
  content: "+ ";
  color: var(--gold);
}

details.methodology[open] summary::before {
  content: "\2212 ";
}

details.methodology p {
  margin: 0.5rem 0 0;
}

/* -- Filter panels (Natural/Colored/Lab-Grown/Parcels/Favorites/Ended/
   Inventory) -- one shared layout, built dynamically per tab (see
   buildFilterPanel in app.js). Tightened: smaller gaps/padding/control
   sizes than a plain form, label-and-control on one line where it fits. */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: flex-end;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.filter-field label {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}

.filter-field select,
.filter-field input[type="number"],
.filter-field input[type="text"],
.filter-field input[type="date"],
.filter-field textarea {
  padding: 0.32rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--ground);
  color: var(--ink);
  width: 6.2rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}

.filter-field select:focus,
.filter-field input:focus,
.filter-field textarea:focus {
  outline: 1.5px solid var(--gold);
  outline-offset: 0;
}

.filter-field textarea {
  width: 16rem;
  min-height: 3.2rem;
  font-family: inherit;
  resize: vertical;
}

.filter-field.carat-range {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.filter-field.carat-range input {
  width: 3.8rem;
}

.filter-lab-group,
.filter-radio-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  max-width: 20rem;
}

.filter-lab-group legend,
.filter-radio-group legend {
  width: 100%;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  padding: 0;
}

.filter-lab-group label,
.filter-radio-group label {
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--ink-dim);
}

.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* -- Market tab cards -- */
.market-card {
  max-width: 44rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

.market-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.5rem;
}

.market-card h3 {
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
  color: var(--ink-dim);
  font-weight: 600;
}

.chart-card {
  max-width: 40rem;
  margin-top: 1.1rem;
}

.roi-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.1rem;
}

.roi-chart-grid .chart-card {
  max-width: none;
  margin-top: 0;
}

.chart-single-point {
  padding: 0.5rem 0;
}

.chart-single-value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
}

.chart-wrap {
  position: relative;
}

.history-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -120%);
  background: var(--surface-raised);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
}

.chart-tooltip-date {
  color: var(--ink-muted);
}

.chart-tooltip-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Mirrors .reserve-met/.reserve-not-met's positive/attention logic, but for
   a signed EUR/% figure (diff-vs-cost, diff-vs-market, realized return)
   rather than a binary auction outcome -- positive is favorable, negative
   isn't. Plain tinted text (not a chip) -- these sit inline with other
   plain numeric cells, a pill here would be visual noise, not signal. */
.return-positive {
  color: var(--positive);
}

.return-negative {
  color: var(--critical);
}

/* -- Inventory tab's In Stock / Sold toggle -- a smaller-scale variant of
   .tab-btn, scoped inside one section rather than the sidebar nav. -- */
.inventory-subnav {
  display: flex;
  gap: 0.5rem;
  margin: 0.9rem 0;
}

.subtab-btn {
  padding: 0.32rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-ui);
}

.subtab-btn.active {
  background: var(--surface-raised);
  color: var(--gold-bright);
  border-color: var(--gold);
}

.subtab-btn:hover {
  color: var(--ink);
}

/* Shared small floating form (Mark Purchased / Mark Sold) -- see
   showInlinePopover in app.js. Positioned absolutely near whichever button
   opened it; not a modal overlay, so the rest of the page stays visible
   and interactive underneath it. */
.inline-popover {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  min-width: 14rem;
}

.inline-popover-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gold-bright);
}

.inline-popover .filter-field input {
  width: 100%;
}

.inline-popover-actions {
  display: flex;
  gap: 0.5rem;
}

.inline-popover-actions button {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
}

.inline-popover-actions button:first-child {
  background: var(--gold);
  border-color: var(--gold);
  color: #1c2b1f;
  font-weight: 600;
}

.inline-popover-actions button:hover {
  opacity: 0.9;
}

.inline-popover .error {
  min-height: 0;
  text-align: left;
}

.editable-value {
  cursor: pointer;
  border-bottom: 1px dashed var(--ink-muted);
  padding-bottom: 1px;
}

.editable-value:hover {
  border-bottom-color: var(--ink);
}

/* A correction that's actually been made (persisted), distinct from the
   default guess every uncorrected shipping cell shows. */
.editable-value.value-corrected {
  color: var(--info);
  font-weight: 600;
  border-bottom-style: solid;
}

.editable-input {
  width: 4.5rem;
  padding: 0.2rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--gold);
  background: var(--ground);
  color: var(--ink);
}

/* Fixed to the viewport, not the table -- reachable no matter how far down
   the page you're scrolled, unlike .table-wrap's own scrollbar which only
   ever sits at that specific table's bottom edge. Synced to the real
   table's scrollLeft in both directions (see refreshStickyScrollbar). */
.sticky-hscroll {
  position: fixed;
  bottom: 0;
  /* Must match main's own horizontal padding (32px each side) + .table-
     wrap's 1px border, not just the sidebar width -- confirmed via direct
     measurement that leaving this at left:var(--sidebar-width); right:0
     made this bar ~66-81px WIDER than the real table content area, so its
     own computed max scrollLeft fell short of the table's true right
     edge, leaving the last column (e.g. the Link column) genuinely
     unreachable via this control specifically (the table's own native
     scrollbar/wheel scroll were never affected, only this bar). */
  left: calc(var(--sidebar-width) + 33px);
  right: 33px;
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--ground);
  border-top: 1px solid var(--surface-line);
  z-index: 50;
  scrollbar-width: auto;
  scrollbar-color: var(--surface-line) var(--ground);
}

.sticky-hscroll::-webkit-scrollbar {
  height: 13px;
}

.sticky-hscroll::-webkit-scrollbar-track {
  background: var(--ground);
}

.sticky-hscroll::-webkit-scrollbar-thumb {
  background: var(--surface-line);
  border-radius: 6px;
  border: 2px solid var(--ground);
}

.sticky-hscroll::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* No visible height of its own -- exists purely so the sticky bar's
   scrollable width (and therefore its thumb's proportions) matches the
   real table's scrollWidth. */
#sticky-hscroll-spacer {
  height: 1px;
}

@media (max-width: 980px) {
  #app-view {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  nav.tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tab-btn.active::before {
    display: none;
  }
  .sticky-hscroll {
    left: 33px;
  }
}

/* -- Phones: card view --
   Every .lot-table cell is stamped with a data-label attribute by the
   MutationObserver in app.js (setUpMobileTableLabels), sourced from that
   column's own <th> text -- turning the table into a stack of "label /
   value" cards below is pure CSS from there, no per-renderer JS changes
   needed. Nothing above this breakpoint touches the desktop layout. */
@media (max-width: 700px) {
  .table-wrap {
    overflow-x: visible;
    border: none;
  }

  .sticky-hscroll {
    display: none;
  }

  .lot-table,
  .lot-table tbody,
  .lot-table tr {
    display: block;
    width: 100%;
  }

  .lot-table thead {
    display: none;
  }

  .lot-tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 4px 12px;
  }

  .lot-table td {
    display: block;
    padding: 7px 0;
    border-top: none;
    border-bottom: 1px solid var(--surface-line);
    white-space: normal;
    text-align: left;
  }

  .lot-table td:last-child {
    border-bottom: none;
  }

  .lot-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }

  .lot-table td:not([data-label])::before {
    content: none;
    margin-bottom: 0;
  }

  /* The gold accent used to mark the whole row now goes on the card
     itself rather than getting stranded on just its cramped first field. */
  .lot-tbody tr.row-selected {
    box-shadow: inset 3px 0 0 var(--gold);
  }

  .lot-tbody tr.row-selected td:first-child {
    box-shadow: none;
  }
}