/* Weekly gem digest styles. Follows the marketplace dark theme — same
 * vars (--surface, --border, --text, --text-dim, --accent, --radius-*).
 */

/* Report masthead — gives the data page a "designed" header band instead of
 * bare text on the page background: copper→teal accent rule along the top, a
 * subtle teal-tinted gradient, and the issue/date rendered as a pill. */
.digest-hero {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  margin-bottom: var(--space-md);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(58, 191, 176, 0.10), transparent 60%),
    linear-gradient(135deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.digest-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--accent), var(--pop));
}
.digest-kicker {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--pop);
  margin-bottom: 0.5rem;
}
.digest-hero h1 {
  margin: 0 0 var(--space-xs);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
}
.digest-hero .lede {
  margin: 0 0 var(--space-sm);
  color: var(--text-dim);
  max-width: 60ch;
}
.digest-meta {
  display: inline-block;
  margin-top: var(--space-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* No empty pill before the JS fills in the issue/date. */
.digest-meta:empty { display: none; }

.digest-section {
  margin-top: var(--space-lg);
}
.digest-section h2,
.digest-movers-label {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pop);             /* teal section headings — "look here" */
  margin: 0 0 var(--space-sm);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);   /* underlined heads, matching the marketplace sections */
}
.digest-pricing-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  opacity: 0.7;
  margin: -0.25rem 0 var(--space-sm);
  font-style: italic;
}

.digest-empty,
.digest-empty-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  color: var(--text-dim);
  text-align: center;
}

/* ───── Top movers (marquee strip) ──────────────────────────────
 * Continuous horizontal scroll; ambient framing per Doyle/Gordon
 * (2026-05-21) — same data, less leaderboard-y than the old 5-up grid.
 * The JS duplicates the rendered children so the track can translate
 * -50% for a seamless loop.
 */
.digest-movers-strip-section {
  margin-top: var(--space-md);
}
.digest-movers-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}
.digest-movers-strip::before,
.digest-movers-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.digest-movers-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}
.digest-movers-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}
.digest-movers-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: digest-marquee 60s linear infinite;
  will-change: transform;
}
.digest-movers-strip:hover .digest-movers-track {
  animation-play-state: paused;
}
@keyframes digest-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Fewer than ~4 movers: the JS skips the marquee (no clone, no animation)
 * and renders a static row so the -50% loop can't produce a gappy loop. */
.digest-movers-track.is-static {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  row-gap: var(--space-xs);
}

.mover-card {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 var(--space-md);
  border-right: 1px solid var(--border);
}
.mover-species {
  font-size: 0.78rem;
  color: var(--pop);             /* teal species labels in marquee */
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mover-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mover-wow {
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* The digest movers ticker runs for everyone, including prefers-reduced-motion
   (owner direction - it's a functional price ticker that should always scroll,
   not freeze). Intentionally no `animation: none` reduced-motion override here,
   matching the marketplace ticker in style.css. */

.wow-up   { color: #4ade80; }   /* bright green ▲ — uptrend (per owner) */
.wow-down { color: #c97d5e; }   /* rose-copper ▼ — downtrend */
.wow-flat { color: var(--text-dim); }

/* ───── Tab rows above the species table ────────────────────────
 * Two stacked rows: category (Rough/Faceted/Cab/...) and clarity
 * (Facet-grade/Cab-grade/Included/Specimen). Clarity is a slightly
 * lighter visual treatment to read as a sub-filter of category.
 */
.digest-cat-tabs,
.digest-clarity-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.digest-cat-tabs { margin-bottom: 6px; }
.digest-clarity-tabs { margin-bottom: var(--space-sm); }
.digest-cat-tab,
.digest-clarity-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.digest-clarity-tab {
  padding: 4px 12px;
  font-size: 0.78rem;
}
.digest-cat-tab:hover,
.digest-clarity-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}
.digest-cat-tab.active,
.digest-clarity-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* Clarity tabs sit on the left of their row; page-local search input is
 * right-aligned so it lands above the trend column of the table. The
 * clarity tabs only render when Rough is the active category — when
 * hidden, a spacer keeps the search input right-aligned. */
.digest-clarity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.digest-clarity-row .digest-clarity-tabs {
  margin-bottom: 0;
}
.digest-clarity-tabs-spacer {
  flex: 1 1 auto;
}
.digest-search {
  flex: 0 0 auto;
}

/* ───── Print control + row-select mode (owner request 2026-07-25) ─────
 * Native <details> dropdown next to the page search: Print all / Print
 * this view / Select rows. Select mode adds a checkbox column and a
 * pinned action bar. */
.digest-print {
  position: relative;
  flex: 0 0 auto;
}
.digest-print summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.digest-print summary::-webkit-details-marker { display: none; }
.digest-print summary:hover { color: var(--text); border-color: var(--accent); }
.digest-print[open] summary { color: var(--accent); border-color: var(--accent); }
.digest-print-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 12;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  min-width: 190px;
  overflow: hidden;
}
.digest-print-menu button {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 9px 14px;
  cursor: pointer;
}
.digest-print-menu button:hover { background: var(--accent-dim); color: var(--accent); }

.digest-select-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-dim);
  padding: 6px 12px;
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
}
.digest-select-bar span { margin-right: auto; }
.digest-select-bar button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 12px;
  cursor: pointer;
}
.digest-select-bar button:hover { border-color: var(--accent); color: var(--accent); }
.digest-select-bar button.primary {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.digest-table td.print-select,
.digest-table th.print-select {
  width: 34px;
  text-align: center;
  padding: 11px 6px;
}
.digest-table .print-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.digest-search input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 5px 10px;
  width: 200px;
  outline: none;
  transition: border-color 0.15s;
}
.digest-search input::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
}
.digest-search input:focus {
  border-color: var(--accent);
}
.cell-placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

/* Digest → Marketplace bridge: the "View →" link per row that deep-links
 * to the marketplace pre-filtered by material. Quiet at rest, copper on
 * hover so it doesn't visually shout next to the price columns. */
.digest-table td.listings-link a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s;
}
.digest-table td.listings-link a:hover {
  color: var(--accent);
}

@media (max-width: 560px) {
  .digest-search input { width: 100%; }
  .digest-search { flex: 1 1 100%; }
}

/* ───── Species price table ───────────────────────────────────
 * 16px floor on the body cells (owner direction 2026-05-22 — accessibility
 * for older eyes; cream-on-walnut at 16px reads comfortably from the back
 * of a workbench). Warm zebra striping uses --surface-2 for the alt rows.
 * Row padding stays generous so the row is a comfortable touch target on
 * tablets and easy to track visually for low-vision readers.
 */
/* Horizontal-scroll wrapper so the multi-column price table can scroll on
 * mobile instead of being clipped. The border/radius live on the wrapper now;
 * the table inside is borderless and keeps a 600px floor so it scrolls rather
 * than squishing below readable size. */
.digest-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
/* Pinned column headers while the species list scrolls (owner request
 * 2026-07-23) — desktop only, per site convention: mobile pins NOTHING.
 * Two load-bearing details:
 * 1. The scroll wrapper must NOT be a scroll container here, or sticky
 *    anchors to it instead of the viewport. clip (not hidden/auto) removes
 *    the scroll container while still clipping — same trick as the body
 *    overflow-x in style.css. The table fits at desktop widths anyway;
 *    <700px keeps overflow-x:auto for horizontal scrolling.
 * 2. top: 9.2rem = 6rem compact site header + 3.2rem pinned breadcrumb
 *    band — the same stacking offset as the browse-page toolbar. If the
 *    compact header height changes, update all of these together. */
@media (min-width: 700px) {
  .digest-table-scroll { overflow-x: clip; }
  /* Category tabs + clarity row + page search pin as one block right under
   * the breadcrumb band (9.2rem = 6rem compact header + breadcrumb).
   * Opaque page background + a little top padding so table rows vanish
   * cleanly under it instead of ghosting through the gaps. */
  .digest-controls-pin {
    position: sticky;
    top: 9.2rem;
    z-index: 6;
    background: var(--bg);
    padding-top: 6px;
  }
  /* Below the pinned stack: 9.2rem + controls block (~82px ≈ 5.1rem). */
  .digest-table thead th {
    position: sticky;
    top: 14.3rem;
    z-index: 5;
  }
  /* Select mode adds the action bar (~44px) to the pinned control block —
   * push the pinned thead down with it. */
  #digest-table-wrap:has(.digest-select-bar) .digest-table thead th {
    top: 17.1rem;
  }
}
.digest-table-scroll .digest-table {
  border: none;
  border-radius: 0;
  min-width: 600px;
  /* The base .digest-table rule sets overflow:hidden for its own corner
   * rounding — inside the wrapper that clipping is the wrapper's job, and
   * any non-visible overflow here makes the TABLE the sticky containing
   * scroll box, silently killing the pinned thead below. */
  overflow: visible;
}

.digest-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 1rem;          /* 16px base */
}
.digest-table th,
.digest-table td {
  padding: 11px 14px;        /* roomier rows */
  border-bottom: 0.5px solid var(--border);
  text-align: left;
}
.digest-table thead th {
  background: var(--surface-2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}
.digest-table th.sortable {
  cursor: pointer;
}
.digest-table th.sortable:hover {
  color: var(--accent);
}
/* Sortable headers render a real <button> inside the <th> for keyboard
 * access (Enter/Space fire click natively). Visually transparent so the
 * header looks the same as before. */
.digest-table th.sortable .th-sort-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
.digest-table th.sortable .th-sort-btn:hover {
  color: var(--accent);
}
.digest-table th.sortable .th-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.digest-table td.num,
.digest-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.digest-table .species-name {
  font-weight: 500;
}
.digest-table tbody tr:last-child td {
  border-bottom: none;
}
/* Zebra stripe with warm alt-row — eases row-tracking for the old guys
 * (Doyle 87, Gordon 77) and adds a "leather ledger" texture. */
.digest-table tbody tr:nth-child(even) {
  background: var(--surface-2);
}
.digest-table tbody tr:hover {
  background: rgba(201, 125, 94, 0.08);  /* rose-copper-tinted hover */
}
.trend-spark {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--pop);             /* teal sparkline — data signal */
  letter-spacing: 1px;
}
.trend-empty {
  color: var(--text-dim);
}

/* ───── Dealer spotlight ────────────────────────────────────── */
.digest-dealers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.dealer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);   /* copper spine — gives the flat cards a designed edge */
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-left-color 0.15s ease;
}
.dealer-card:hover {
  transform: translateY(-1px);
  border-left-color: var(--pop);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.dealer-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.dealer-highlight {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.dealer-detail {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ───── Unclassified bucket ─────────────────────────────────── */
.digest-other {
  background: rgba(212, 160, 23, 0.08);
  border: 1px solid rgba(212, 160, 23, 0.45);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  color: var(--text);
  font-size: 0.9rem;
}
.digest-other strong {
  color: #ecc167;
}
.other-toggle {
  display: inline-block;
  margin-left: var(--space-sm);
  background: transparent;
  border: 1px solid rgba(212, 160, 23, 0.55);
  color: #ecc167;
  border-radius: var(--radius);
  padding: 2px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.other-toggle:hover { background: rgba(212, 160, 23, 0.15); }
.other-list {
  margin-top: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.other-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ───── Archive list ────────────────────────────────────────── */
.archive-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.archive-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}
.archive-row:last-child { border-bottom: none; }
.archive-row:hover { background: rgba(255, 255, 255, 0.03); }
.archive-date { color: var(--text); }
.archive-meta { color: var(--text-dim); font-size: 0.85rem; }
.archive-issue { color: var(--text-dim); font-size: 0.85rem; }

/* ───── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .digest-dealers { grid-template-columns: 1fr; }
  .digest-table { font-size: 0.85rem; }
  .digest-table th, .digest-table td { padding: 6px 8px; }
  .digest-movers-track { animation-duration: 40s; }
  /* Fade the right edge so it's obvious the table scrolls sideways — same
   * mask pattern as the species/type scroll rails in style.css. */
  .digest-table-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
}
@media (max-width: 480px) {
  .digest-hero h1 { font-size: 1.5rem; }
}

/* The site header on mobile is governed solely by style.css (@media
 * max-width:600px) so every page shares ONE header definition. The earlier
 * per-page override here (and in marketplace.css) is what made the header
 * behave differently across pages — removed. */

/* iOS no-zoom floor for the page-local digest search input. */
@media (max-width: 560px) {
  .digest-search input { font-size: 16px; }
}