/* ─────────────────────────────────────────────────────────────────────────────
   GemID gem-page styles — shared by all gem detail pages and reference tables.
   Extracted from inline <style> blocks to reduce duplication across 130+ pages.
   ───────────────────────────────────────────────────────────────────────────── */

/* Page-specific styles for generated reference/gem pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brand-light); }

/* MAIN CONTENT */
main { flex: 1; padding: 2rem 1.5rem; max-width: 1200px; margin: 0 auto; width: 100%; }

/* PAGE HEADER */
.page-header { margin-bottom: 2rem; }
.page-header h1 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: var(--text-xl); font-weight: 700; margin-bottom: 0.75rem; line-height: 1.2; }
.page-header p { color: var(--muted); font-size: var(--text-md); max-width: 720px; }

/* BREADCRUMB */
.breadcrumb {
  display: inline-flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; font-size: var(--text-sm); color: var(--muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { opacity: 0.4; }

/* TABLES */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
thead { position: sticky; top: 0; z-index: 10; }
th {
  background: var(--surface2); color: var(--muted);
  font-weight: 600; text-align: left;
  padding: 0.75rem 1rem; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }
td a { color: var(--brand-light); font-weight: 500; }

/* Sticky first column */
.sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 5; }
th.sticky-col { background: var(--surface2); }
tr:hover td.sticky-col { background: var(--surface2); }

/* FILTER BAR */
.filter-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem;
}
.filter-bar h2 { font-size: var(--text-base); font-weight: 600; color: var(--muted); margin-bottom: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 0.375rem; }
.filter-group label { font-size: var(--text-sm); color: var(--muted); font-weight: 500; }
.filter-group input[type="text"],
.filter-group input[type="number"] {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: var(--text-base); width: 100%;
  min-width: 0;
}
.filter-group input:focus { outline: none; border-color: var(--brand); }
.filter-range { display: flex; gap: 0.5rem; align-items: center; }
.filter-range input { width: 80px; }
.filter-range span { color: var(--muted); font-size: var(--text-sm); }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checkbox-pill {
  display: flex; align-items: center; gap: 0.375rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.75rem;
  font-size: var(--text-sm); cursor: pointer; user-select: none;
  color: var(--muted); transition: border-color 0.15s, color 0.15s;
}
.checkbox-pill:has(input:checked) { border-color: var(--brand); color: var(--text); }
.checkbox-pill input { display: none; }
.result-count { font-size: var(--text-base); color: var(--muted); margin-bottom: 0.75rem; }
.result-count strong { color: var(--text); }
.filter-reset { font-size: var(--text-sm); color: var(--brand-light); cursor: pointer; background: none; border: none; padding: 0; margin-left: auto; }
.filter-reset:hover { text-decoration: underline; }

/* PROPERTY CARD */
.prop-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem;
}
.prop-card h2 { font-size: var(--text-md); font-weight: 600; color: var(--muted); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.prop-item { display: flex; flex-direction: column; gap: 0.2rem; }
.prop-label { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.prop-value { font-size: var(--text-md); font-weight: 600; color: var(--text); }

/* SECTIONS — card treatment matching prop-card */
.section { margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.section h2 { font-size: var(--text-md); font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.section ul { list-style: disc; padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.section li { color: var(--text); font-size: var(--text-base); line-height: 1.65; }

/* CTA BOX */
.cta-box {
  background: var(--brand-dim); border: 1px solid var(--brand);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cta-box p { flex: 1; color: var(--text); font-size: var(--text-base); }
.cta-box a {
  white-space: nowrap;
  color: var(--brand-light);
  font-weight: 600;
  font-size: var(--text-base);
  border: none !important;
  box-shadow: none !important;
  background: none;
  padding: 0;
  min-height: auto;
  min-width: auto;
}

/* SEO COPY */
.seo-section { margin: 2rem 0; max-width: 760px; }
.seo-section p { color: var(--muted); font-size: var(--text-base); margin-bottom: 1rem; line-height: 1.7; }

/* TAG PILLS */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tag {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.2rem 0.65rem;
  font-size: var(--text-sm); color: var(--muted);
}

/* BACK LINKS */
.back-links { display: inline-flex; gap: 1.5rem; flex-wrap: wrap; font-size: var(--text-base); margin-bottom: 1.5rem; }
.back-links a { color: var(--muted); }
.back-links a:hover { color: var(--text); }

/* PAGE ANCHORS */
.page-anchors {
  display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: var(--text-sm); color: var(--muted);
  margin-bottom: 1.5rem; padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}
.page-anchors a { color: var(--muted); }
.page-anchors a:hover { color: var(--brand-light); }

/* RELATED GEMS */
.related-gems { display: flex; flex-wrap: wrap; gap: 0.375rem 0; }
.related-gems a { color: var(--brand-light); }
.related-gems a + a::before { content: ' · '; color: var(--subtle); }

@media (max-width: 640px) {
  main { padding: 1.25rem 1rem; }
  .filter-range input { width: 70px; }
}