a,
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}
a:focus,
a:active {
  background-color: transparent;
  outline: none;
}
body {
  font-family: Nunito Sans, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #30a5bf;
}

#page-wrapper {
  padding: 0;
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
}

.inner-page-wrapper {
  margin: auto;
  width: 100%;
  max-width: 1200px;
}

.filters-section {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 16px;
  /* No box-shadow: the 24px shadow blur was bleeding out of the 1200px
     inner-page-wrapper into the outer #page-wrapper gutters, creating
     subtle horizontal lines at the top/bottom of the card in those outer
     areas (the sticky-zone bg only covers the inner 1200px, so the shadow
     tint on the outer gutters was ONLY present in the card's y-range,
     which read as a seam). The 1px border alone gives adequate separation
     against the page's #f7f7f7 bg. */
  border: 1px solid #e4e7ee;
  margin-bottom: 10px;
}

/* Gold sponsors card — matches .filters-section chrome (same rounded card,
   same border, same white surface, same #f7f7f7 page gutter) so the top of
   the page reads as a coherent stack. Logos are centered in a single flex
   row that wraps on narrow viewports. Card is hidden until at least one
   sponsor renders (setupGoldSponsorSection unhides it). */
.gold-sponsors-card {
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid #e4e7ee;
  padding: 12px 16px;
  /* Top spacing under the fixed nav — body has the nav-height padding already;
     this gives the sponsors card a bit of breathing room above it. */
  margin-top: 12px;
  margin-bottom: 10px;
}
#gold-sponsors-wrapper {
  display: flex;
  align-items: center;
  /* Distribute logos across the full width with even space between them,
     rather than a fixed gap that could overflow into a second row. */
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
}
.gold-sponsor-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Allow each slot to shrink below its intrinsic image width so the row
     stays on a single line as more sponsors are added. */
  flex: 1 1 0;
  min-width: 0;
}
.gold-sponsor-wrapper img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.gold-sponsor-wrapper a {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.filter-wrapper {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.filter-wrapper .label {
  width: 100px;
  color: #5b6577;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================================
   Quick Commodity row + Market row pills — visual + behavioural parity with
   News page's market-option pills. Each pill carries a colored dot; .selected
   gets the teal background. Dots for Quick Commodity pills are colored
   inline via JS using /investor-deck/js/config/minerals.js#mineralColors.
   ============================================================================ */
.drilling-main-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Commodity pills — no shared grey wrapper on this row (per Drilling design
   decision — clean, borderless-group look). Font-size + paddings mirror the
   Movers Search Type chip so the two pages feel consistent. Selected chip
   uses the brand teal fill. */
#quick-commodity-buttons-wrapper {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  flex-grow: 0;
  width: max-content;
}
.quick-commodity-option {
  border: 1px solid transparent;
  color: #1f2937;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  transition: all .15s ease;
  white-space: nowrap;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  border: 1px solid #e5e7eb;
  font-family: Nunito Sans;
  font-weight: 600;
}
.quick-commodity-option.selected {
  background: #30a5bf;
  border-color: rgba(0, 0, 0, .04);
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
}
.quick-commodity-option:hover:not(.selected) {
  background: #e2e8f0;
}
.quick-commodity-option .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #cbd5e1;
  flex-shrink: 0;
}
/* "All Commodities" pill has no dot (per design). */
.quick-commodity-option[data-commodity="all"] .dot {
  display: none;
}

/* ============================================================================
   Main filters row — Search + Date Range + Clear / More Filters / Download.
   Mirrors News' #search-date-and-more-filters-wrapper layout: search on left,
   date pill, then a right-anchored cluster pushed via margin-left:auto.
   ============================================================================ */
.drilling-main-row {
  gap: 2em;
  margin-bottom: 0px;
}
.drilling-search-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  width: 410px;
}
.drilling-search-wrapper #search-wrapper {
  flex: 1;
  position: relative;
}
.drilling-date-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-grow: 0;
}
.drilling-actions-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}
.drilling-actions-wrapper .reset-news-filter-btn {
  cursor: pointer;
  color: #5b6577;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  padding: 6px 4px;
  white-space: nowrap;
  text-decoration: none;
}
.drilling-actions-wrapper .reset-news-filter-btn:hover {
  color: #30a5bf;
  text-decoration: underline;
}
.drilling-actions-wrapper .news-filter-btn {
  background: #30a5bf;
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
  position: relative;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 14px;
}
.drilling-actions-wrapper .news-filter-btn:hover {
  opacity: 0.85;
}
.drilling-actions-wrapper .news-filter-btn .filter-count-badge {
  position: absolute;
  border-radius: 1000px;
  background-color: #6e6e6e;
  color: #fff;
  font-size: 11px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -5px;
  right: -5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.drilling-download-icon-btn {
  background: #fff;
  border: 1px solid #e4e7ee;
  color: #1f2937;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.drilling-download-icon-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}
.drilling-download-icon-btn.visitor-locked-btn {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================================
   Hide legacy filter pills (Commodity / Marketcap / Location / Equivalency) on
   desktop — they stay in the DOM so the existing filter-state code (radios,
   checkboxes, sliders) still works, but the mobile drawer is the only UI.
   The Date Range pill was pulled into the main row; everything else is hidden.
   ============================================================================ */
.drilling-legacy-pills-row {
  display: none;
}

/* ============================================================================
   Mobile (<= 641px) overrides — mobile-filter-drawer.css hides all
   .filter-wrapper--desktop and shows the mobile filter trigger button. The
   .drilling-main-row inherits that hide, so the search input would vanish
   too. Bring just the search portion back; date pill + actions cluster stay
   hidden because the drawer owns them on mobile.

   Specificity note: mobile-filter-drawer.css loads AFTER this stylesheet (see
   <link> order in index-page.html), and its hide rule (.filters-section
   .filter-wrapper--desktop, !important) ties on specificity with our 2-class
   selector — last !important wins, which would hide our row. We chain the
   .filter-wrapper--desktop class onto the selector to bump specificity to
   3 classes so we win the cascade cleanly. Same idea for the inner search
   wrapper.
   ============================================================================ */
@media (max-width: 641px) {
  .filters-section .drilling-main-row.filter-wrapper--desktop {
    display: flex !important;
    flex-wrap: wrap;
  }
  .filters-section .drilling-main-row.filter-wrapper--desktop .drilling-search-wrapper {
    display: flex !important;
    width: 100%;
  }
  .filters-section .drilling-main-row.filter-wrapper--desktop .drilling-date-wrapper,
  .filters-section .drilling-main-row.filter-wrapper--desktop .drilling-actions-wrapper {
    display: none !important;
  }
  /* Re-show the commodity row on mobile — it's not in the drawer, so without
     this override commodity filtering is inaccessible on mobile. The pill
     wrapper below is set to overflow-x: auto by the 900px mobile block, so
     the pills scroll horizontally within a single line. The More Commodities
     dropdown wraps under the pills on its own row. */
  .filters-section .drilling-commodity-row.filter-wrapper--desktop {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .filters-section .drilling-commodity-row .label {
    display: none;
  }
  .filters-section .drilling-commodity-row #more-commodities-wrapper {
    width: 100%;
    flex-basis: 100%;
    margin-top: 4px;
  }
}

/* ============================================================================
   Drawer sections that duplicate the desktop main-row controls (Market, Date
   Range) — hide them in the drawer on desktop. On mobile the main row is
   hidden so the drawer becomes the only entry point and these sections are
   visible.
   ============================================================================ */
@media (min-width: 642px) {
  #mobile-filter-drawer .mobile-filter-drawer__section[data-section-id="market"],
  #mobile-filter-drawer .mobile-filter-drawer__section[data-section-id="date-range"] {
    display: none !important;
  }
}

#eqv-warning {
  font-size: 14px;
  display: none;
  margin-top: 30px;
}

#eqv-warning.show {
  display: block;
}

.table-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 40px;
}

.table-title:first-of-type {
  margin-top: 0;
}

.table-wrapper {
  overflow-x: auto;
  /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
  max-width: 1200px;
  width: 100%;
}

.table-scroll-wrapper {
  width: 100%;
  min-width: 1200px;
}

.table-header {
  display: flex;
  background-color: #edeef4;
  border-radius: 4px;
  border: 1px solid #f3f3f3;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}

.single-row {
  display: flex;
  align-items: center;
  margin-top: 1px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #f3f3f3;
  box-sizing: border-box;
  padding: 0 10px;
  min-height: 58px; /* Fixed height to prevent table jumping during pagination */
  width: 100%;
}

.single-row.highlighted {
  background-color: #f0fbff !important;
}
.single-row.highlighted .full-width-chart-wrapper {
  background-color: #fff;
}

.single-row.highlighted .col-date {
  font-weight: bold;
}

.single-table-header {
  padding: 10px 6px;
  box-sizing: border-box;
  font-weight: bold;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 13px;
  position: relative;
  white-space: nowrap;
}

.single-table-header.sortable {
  cursor: pointer;
}

.single-table-header.sortable::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  opacity: 0.3;
  right: 1em;
  content: "↑";
}

.single-table-header.sortable::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  opacity: 0.3;
  right: 0.5em;
  content: "↓";
}

.single-table-header.sortable.disabled {
  cursor: auto;
}

.single-table-header.sortable.disabled::after {
  display: none !important;
}

.single-table-header.sortable.disabled::before {
  display: none !important;
}

.single-table-header.sort-asc::before {
  opacity: 1;
}
.single-table-header.sort-desc::after {
  opacity: 1;
}

.single-cell {
  padding: 10px 6px;
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 13px;
}

.single-cell a {
  text-decoration: none;
  border-bottom: 0;
  cursor: pointer;
  color: var(--main-color-192342);
}

.single-cell a:hover {
  border-bottom: 2px solid #30a5bf;
}

#page-wrapper.compact #header-news,
#page-wrapper.compact .col-news {
  display: none;
}
#page-wrapper.compact #header-marketcap,
#page-wrapper.compact .col-marketcap {
  display: none;
}
#page-wrapper.compact #header-socials,
#page-wrapper.compact .col-socials {
  display: none;
}

#page-wrapper.compact #header-company,
#page-wrapper.compact .col-company {
  width: 200px;
}
#page-wrapper.compact #header-project,
#page-wrapper.compact .col-project {
  width: 100px;
}
#page-wrapper.compact #header-mineral-value,
#page-wrapper.compact .col-mineral-value {
  width: 55px;
}
#page-wrapper.compact #header-from,
#page-wrapper.compact .col-from {
  width: 60px;
}
#page-wrapper.compact #header-interval,
#page-wrapper.compact .col-interval {
  width: 65px;
}

#page-wrapper.compact #header-gradexwidth,
#page-wrapper.compact .col-gradexwidth {
  width: 150px;
}

#page-wrapper.compact #header-gradexwidth,
#page-wrapper.compact .col-gradexwidth {
  width: 150px;
}
#page-wrapper.compact #header-location,
#page-wrapper.compact .col-location {
  display: none;
}

#page-wrapper.compact .single-cell,
#page-wrapper.compact .single-table-header {
  font-size: 11px;
  padding: 6px 2px;
}

#page-wrapper.compact .load-more-button {
  display: none;
}
#page-wrapper.compact .table-title {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0;
}

#page-wrapper.compact {
  background-color: #fff;
}
#page-wrapper.compact .single-row {
  background-color: #fff;
}

#page-wrapper.compact .chart-total-grade-x-width {
  font-size: 10px;
  line-height: 10px;
}

#page-wrapper.embed #loginModal {
  display: none !important;
}
#page-wrapper.embed #eqv-warning {
  display: none !important;
}
#page-wrapper.embed .filter-controls-wrapper {
  display: none !important;
}

#page-wrapper.embed #filter-tags-wrapper {
  display: none !important;
}

#page-wrapper.embed {
  padding: 0 !important;
}

#page-wrapper.embed .inner-page-wrapper {
  margin: unset;
}

/* ----------------------------------------------------------------------------
   Legacy per-commodity-table column widths (`.col-news`, `.col-company`,
   `.col-date`, `.col-gradexwidth` etc. keyed by `#header-*` IDs) — deleted.
   Those rules pinned column widths on the old commodity-partitioned tables
   that no longer render, but the class names overlapped with the new
   `.drill-intercepts-table .col-*` classes and were overriding the
   colgroup / fixed-layout widths on the new table. Since the old tables
   are gone, the rules are removed entirely. Any styles for individual
   column contents (marketcap font-weight, chart wrappers, etc.) that
   remained useful were kept below.
   ---------------------------------------------------------------------------- */
.marketcap-value {
  font-weight: 700;
}

.full-width-chart-wrapper {
  background-color: #f7f7f7;
  border-radius: 8px 15px 15px 8px;
  position: relative;
  isolation: isolate;
}

.chart-wrapper {
  display: flex;
  height: 20px;
}

.chart-total-grade-x-width {
  line-height: 12px;
  font-size: 12px;
  pointer-events: none;
}

.chart-segment {
  transition: all 0.1s ease;
  cursor: pointer;
  min-width: 10px;
}

.chart-segment:hover {
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  transform: scaleY(1.05);
}

#search-wrapper {
  position: relative;
  margin-right: 10px;
  width: 300px;
}

#controls-wrapper {
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
}

#search {
  background: #fff;
  border: 1px solid #e4e7ee;
  color: #1f2937;
  padding: 10px 12px;
  border-radius: 1000px;
  outline: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02) inset;
  min-height: 42px;
  min-width: 300px;
  padding-left: 30px;
  transition: all .15s ease;
}

#search:hover, #search:focus {
  outline: 1px solid #30A5BF;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  cursor: pointer;
  display: none;
}

#search-icon-wrapper {
  position: absolute;
  left: 0;
  width: 33px;
  height: 100%;
  bottom: 0;
  padding: 8px;
  box-sizing: border-box;
  background-color: #30a5bf;
  border-radius: 4px 0 0 4px;
}

#search-icon-wrapper img {
  filter: invert(1);
}

.single-control-container {
  margin-right: 10px;
  position: relative;
}

.single-control-container:last-of-type {
  margin-right: 0;
}

.single-control-container label {
  text-transform: uppercase;
  font-size: 14px;
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

/* No results card - styled similar to map sidebar */
#no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

#no-results.show {
  display: flex;
}

#no-results .no-results-icon {
  width: 64px;
  height: 64px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

#no-results .no-results-icon svg {
  width: 32px;
  height: 32px;
  color: #9ca3af;
}

#no-results .no-results-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

#no-results .no-results-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.load-more-button {
  width: 112px;
  cursor: pointer;
  margin-top: 6px;
  color: #9296ad;
  transition: opacity 0.15s ease;
  opacity: 1;
  margin-left: 100%;
  transform: translateX(-100%);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  line-height: 22px;
}

.load-more-button:hover {
  opacity: 0.8;
}

/* search bar autocomplete */
.autocomplete {
  position: relative;
}
.autocomplete-options {
  cursor: pointer;
  z-index: 1000;
  display: none;
  position: absolute;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
  border-radius: 4px;
  font-size: 11px;
  animation: growOut 150ms ease-in-out forwards;
  transform-origin: top center;
  margin-top: 6px;
  border-radius: 4px;
}
.search-option {
  font-size: 14px;
  min-height: 1.4em;
  padding: 0.2em 2em 0.2em 1em;
}

.search-option:hover {
  background-color: rgb(245, 245, 245);
}

/* Filter selectors */
.filter-controls-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

#filter-control-buttons-wrapper {
  display: flex;
  align-items: center;
}

#search-and-sort-wrapper {
  display: flex;
  margin-right: 10px;
}

.filter-selector {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  color: #192342;
  cursor: pointer;
  opacity: 1;
  user-select: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-right: 6px;
  border: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
}
/* 
.filter-selector {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: 1px solid #30a5bf;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #192342;
  cursor: pointer;
  opacity: 1;
  user-select: none;
  border-radius: 10px;
  transition: all 0.2s ease;
  margin-right: 10px;
  border: 0 !important;
} */

.filter-selector[is-disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

#sort-settings-wrapper {
  display: none;
  height: 38px;
  width: 38px;
  padding: 0;
  background-color: #30a5bf;
  flex-grow: 0;
}

#sort-settings-wrapper img {
  margin-top: 8px;
  margin-left: 8px;
  filter: invert(1);
  height: 20px;
}

.filter-selector:last-of-type {
  margin-right: 0;
}

.filter-selector.open {
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
}

.filter-selector-label {
  font-size: 14px;
  white-space: nowrap;
  color: #192342;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  -o-user-select: none;
  user-select: none;
}

.filter-selector select {
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 4px;
}

.filter-selector-header {
  position: absolute;
  top: 5px;
  right: 5px;
}

.filter-selector:last-of-type .filter-selector-content {
  left: unset;
  right: 0;
}

.filter-selector-content {
  position: absolute;
  background-color: #fff;
  padding: 26px 0 10px 0;
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
  left: 0;
  width: max-content;
  border-radius: 4px;
  display: none;
  z-index: 1999;
  animation: growOut 200ms ease-in-out forwards;
  transform-origin: top center;
}

.filter-selector.open .filter-selector-content {
  display: block;
}

.filter-selector-options {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 30px;
}

.filter-selector-options::-webkit-scrollbar {
  width: 10px;
}

.filter-selector-options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 1000px;
  border-right: 2px solid #fff;
}

.filter-selector-options::-webkit-scrollbar-thumb {
  background: rgb(212, 212, 212);
  border-radius: 1000px;
  border-right: 2px solid #fff;
}

.filter-selector-options::-webkit-scrollbar-thumb:hover {
  background: rgb(158, 158, 158);
}

.filter-option {
  margin-bottom: 10px;
}

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
  transform: scale(1.2);
  margin-right: 10px;
  display: inline !important;
}

.filter-option:last-of-type {
  margin-bottom: 0;
}

.filter-selector-footer {
  display: flex;
  padding: 20px 26px 0 26px;
  margin-top: 10px;
  border-top: 1px solid rgb(212, 212, 212);
  justify-content: space-between;
}

.filter-selector-footer button {
  cursor: pointer;
  border-radius: 0;
  outline: 0;
  border: 2px solid #30a5bf;
  padding: 8px 16px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
}

.filter-btn-clear {
  background-color: #fff;
  color: #30a5bf;
  margin-right: 10px;
}

.filter-btn-clear.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.filter-btn-search {
  color: #fff;
  background-color: #30a5bf;
}

.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.8;
  -webkit-transition: 0.1s;
  transition: opacity 0.1s;
  margin-top: 10px;
  margin-bottom: 10px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #30a5bf;
  cursor: pointer;
  border-radius: 100%;
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #30a5bf;
  cursor: pointer;
  border-radius: 100%;
}

#commodity-filter-both-sliders-wrapper {
  display: none;
  margin-top: 16px;
}

.slider-wrapper {
  opacity: 1;
  transition: opacity 0.15s ease;
}

.slider-wrapper:hover {
  opacity: 1 !important;
}

.slider-wrapper.disabled {
  opacity: 0.5;
}

.or-divider {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 10px;
  justify-content: center;
}

.or-divider div {
  height: 1px;
  background-color: #30a5bf;
  width: 20px;
  margin-right: 6px;
  margin-left: 6px;
}

.range-slider-label {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

#filter-grade-slider-units {
  text-transform: lowercase;
}

@keyframes growOut {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#date-range-picker {
  display: flex;
}

.custom-date-wrapper {
  position: relative;
}

#date-range-picker input {
  padding: 6px 8px 6px 34px;
  width: 130px;
  border: 1px solid;
  border-radius: 4px;
}

#date-range-picker input:first-of-type {
  margin-right: 10px;
}

.calendar-icon-wrapper {
  position: absolute;
  left: 0;
  width: 33px;
  height: 29px;
  bottom: 0;
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--main-color-192342);
  border-radius: 4px 0 0 4px;
}

.calendar-icon-wrapper img {
  filter: invert(1);
  transform: translateY(-3px);
}

.input-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

#filter-tags-wrapper {
  margin-bottom: 20px;
}

#filter-tags-header {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 16px;
}

#filter-tags-container {
  display: flex;
}

.filter-tag {
  border: 1px solid #bdbdbd;
  padding: 2px 2px 2px 8px;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 1000px;
  margin-right: 6px;
  background-color: #fff;
}

.filter-tag-bold {
  font-weight: 700;
  color: #192342;
}

.filter-tag-close-btn {
  position: relative;
  margin-left: 10px;
  cursor: pointer;
  opacity: 1;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.filter-tag-close-btn:hover {
  color: #192342;
  font-weight: 700;
}

#blocker {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

#marketcap-slider-wrapper {
  width: 300px;
}

#marketcap-range-slider {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.range-slider .range-slider__thumb {
  background: #30a5bf;
}

.range-slider .range-slider__range {
  background: #30a5bf;
}

#marketcap-range-slider-labels {
  width: 100%;
  margin-top: 24px;
  position: relative;
}

#marketcap-range-slider-labels span {
  font-size: 8px;
  color: #979797;
  position: absolute;
  bottom: 0;
}

#marketcap-range-slider-labels span:nth-of-type(1) {
  left: 0%;
}
#marketcap-range-slider-labels span:nth-of-type(2) {
  left: 12.5%;
}
#marketcap-range-slider-labels span:nth-of-type(3) {
  left: 23%;
}
#marketcap-range-slider-labels span:nth-of-type(4) {
  left: 34%;
}
#marketcap-range-slider-labels span:nth-of-type(5) {
  left: 46%;
}
#marketcap-range-slider-labels span:nth-of-type(6) {
  left: 57%;
}
#marketcap-range-slider-labels span:nth-of-type(7) {
  left: 69%;
}
#marketcap-range-slider-labels span:nth-of-type(8) {
  left: 79%;
}
#marketcap-range-slider-labels span:nth-of-type(9) {
  left: 90%;
}

#marketcap-inputs-wrapper {
  display: flex;
  justify-content: space-between;
  color: #192342;
}

#marketcap-inputs-wrapper div {
  display: flex;
  align-items: center;
  font-weight: 300;
}

#marketcap-inputs-wrapper div:first-of-type {
  justify-content: flex-start;
}
#marketcap-inputs-wrapper div:first-of-type {
  justify-content: flex-end;
}

#marketcap-inputs-wrapper input {
  width: 60px;
  color: #192342;
  margin-left: 2px;
  margin-right: 2px;
  padding: 4px;
}

/* Chrome, Safari, Edge, Opera */
#marketcap-inputs-wrapper input::-webkit-outer-spin-button,
#marketcap-inputs-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#marketcap-inputs-wrapper input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

#marketcap-range-slider-ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 24px);
  transform: translateX(12px);
}

.range-slider-tick {
  width: 1px;
  background-color: #979797;
  height: 4px;
}

.range-slider-tick:first-of-type,
.range-slider-tick:last-of-type {
  visibility: hidden;
}

.qmod-ui-tool {
  font-size: 12px !important;
  margin-top: 2px;
  font-family: unset !important;
}

.qmod-longname {
  display: none !important;
}

.qmod-volume {
  display: none !important;
}

.subtext {
  font-size: 12px;
  font-weight: 300;
  margin-top: 6px;
}

.dropdown-search-wrapper {
  position: relative;
}

.dropdown-content {
  position: fixed;
  width: calc(100% - 60px) !important;
  display: none;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
}

.dropdown-content .option {
  padding: 6px 20px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.dropdown-content .option mark {
  background-color: unset;
  font-weight: 900;
  color: #30a5bf;
  pointer-events: none;
}

.dropdown-content .option.header {
  font-weight: 700;
  pointer-events: none;
  text-transform: uppercase;
  font-size: 14px;
  background-color: #30a5bf;
  color: #fff;
}

.dropdown-content .option:hover {
  background-color: rgb(236, 236, 236);
}
.dropdown-content.show {
  display: block;
}

.close-btn {
  font-weight: 700;
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
  display: none;
}

.close-btn:hover {
  opacity: 1;
}

.theme-toggle-switch:before {
  top: 3px !important;
}

.theme-toggle {
  margin-left: 10px;
}

.theme-toggle-switch {
  box-shadow: none;
  border: 1px solid #30a5bf;
}

#tables-wrapper {
  position: relative;
}

#gold-sponsors-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 10px;
}

#gold-sponsors-label {
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  margin-right: 20px;
  width: 125px;
}

.gold-sponsor-wrapper {
  margin-right: 20px;
}

.gold-sponsor-wrapper:last-of-type {
  margin-right: 0;
}

.gold-sponsor-wrapper img {
  width: 100%;
  max-width: 260px;
  max-height: 100px;
}

.pro-badge {
  justify-content: center;
  align-items: center;
  background-color: #da373d;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  padding: 2px 6px;
  text-transform: uppercase;
  position: relative;
  margin-left: -10px;
  left: -3px;
  bottom: -2px;
  border-radius: 12px;
}
@media (max-width: 767px) {
  .pro-badge {
    font-size: 9px;
    line-height: 12px;
    margin: 0;
    left: 2px;
    bottom: 0;
  }
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}
.h-full{
  height: 100%;
}
#nav-new a {
  font-size: 12.8px;
  border-bottom: 3px solid transparent;
}
#nav-new .menu .dropdown .nav-item,
#nav-new .menu .dropdown a {
  cursor: pointer;
}
#nav-new .menu .dropdown .nav-item svg {
  position: relative;
  top: -2px;
  left: 5px;
}
#nav-new .menu .dropdown .dropdown-menu {
  display: none;
  background: white;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
#nav-new .menu .dropdown .dropdown-menu {
  min-width: 130px;
  display: none;
  flex-direction: column;
}

#nav-new .menu .dropdown .dropdown-menu li {
  padding: 0;
  text-align: left;
}

#nav-new .menu .dropdown .dropdown-menu li:hover {
  background-color: #e9ecef;
}

#nav-new .menu .dropdown .dropdown-menu li a,
#nav-new .menu .dropdown .dropdown-menu li a.on-hover:hover,
#nav-new .menu .dropdown .dropdown-menu li a.active-link {
  border-bottom: none !important;
}
#mobile-menu .submenu .active-link-mobile,
#mobile-menu .submenu .dropdown-menu .active-link-mobile,
.profile .submenu .dropdown-menu .active-link-mobile {
  text-decoration: underline !important;
}
#mobile-menu .submenu .dropdown-toggle.active-link-mobile,
.profile .submenu .dropdown-toggle.active-link-mobile{
  text-decoration: none !important;
}
#mobile-menu .submenu a,
#mobile-menu .submenu .dropdown-menu a,
.profile .submenu .dropdown-menu a {
  transition: background-color text-decoration 0.2s !important;
}

#mobile-menu .submenu a:active,
#mobile-menu .submenu .dropdown-menu a:active,
.profile .submenu .dropdown-menu a:active {
  background-color: rgba(51, 181, 229, 0.4) !important; /* Light blue */
  text-decoration: underline !important;
}

#nav-new .menu .dropdown .dropdown-menu li a {
  display: flex;
  color: #000;
  white-space: nowrap;
  text-transform: capitalize;
  padding: 8px 16px;
  margin: 0;
}
#nav-new .menu .dropdown .dropdown-menu li a:hover {
  color: #000;
}

#nav-new .menu .dropdown:hover .dropdown-menu {
  display: block;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 3px 3px;
}

#nav-new .profile .submenu .relative {
  position: relative;
}

#mobile-menu .submenu a,
.profile .submenu a,
#nav-new .profile .submenu a {
  padding: 0 !important;
  margin: 0 !important;
  color: #000 !important;
}
.profile .submenu .dropdown-menu,
#nav-new .profile .submenu .dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  position: absolute;
  top: 0;
  left: 100%;
}

#mobile-menu .submenu a {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  border-bottom: none !important;
}
#mobile-menu .submenu a svg {
  transform: rotate(-90deg) scale(0.9);
}
#mobile-menu .submenu .dropdown-menu {
  width: 150px;
  display: none;
}

#mobile-menu .submenu li.relative:hover .dropdown-menu {
  display: block;
}

@media only screen and (max-width: 900px) {
  #page-wrapper {
    padding: 26px;
  }

  .filter-selector {
    padding: 6px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  #search,
  #search::placeholder,
  .filter-selector-label {
    font-size: 12px;
  }
}

@media only screen and (max-width: 800px) {
  .filter-controls-wrapper {
    max-width: calc(100vw - 60px);
    flex-wrap: wrap;
  }

  #filter-control-buttons-wrapper {
    flex-wrap: wrap;
  }

  .filter-selector {
    max-width: 140px;
    margin-bottom: 6px;
    justify-content: center;
  }

  #sort-settings-wrapper {
    height: 38px;
    width: 38px;
  }

  #search-and-sort-wrapper {
    width: 100%;
    margin-right: 0;
  }

  #search-wrapper {
    flex-grow: 1;
    margin-bottom: 10px;
  }
  #search {
    width: 100%;
    box-sizing: border-box;
  }
  #search,
  #search::placeholder,
  .filter-selector-label {
    font-size: 14px;
  }
  .filter-selector {
    padding: 6px 20px;
  }
}
@media (max-width: 767px) {
  .profile .submenu .dropdown-menu,
  #nav-new .profile .submenu .dropdown-menu {
    position: static;
    border: none;
  }
  #mobile-menu .submenu {
    width: 100% !important;
  }
  #mobile-menu .submenu .dropdown-menu {
    width: 100%;
  }
  .profile .submenu li,
  .profile .submenu a {
    font-size: 14px !important;
  }
  .profile .submenu li {
    padding-inline: 5px !important;
    border-top: 1px solid #dcdcdc;
  }
  .profile .submenu li:first-child{
    border-top-color: transparent;
  }
  .profile .submenu a {
    padding-inline: 0 !important;
  }
  ul.submenu li:hover, ul.submenu a:hover{
    background-color: transparent;
  }
  .profile .submenu li.relative:last-child{
    padding-bottom: 0 !important;
  }
  .profile .submenu li.relative >a{
    padding-inline: 5px !important;
  }
  .profile .submenu .dropdown-parent .dropdown-menu {
    display: none !important;
  }
  .profile .submenu .dropdown-parent.open .dropdown-menu.show {
    display: block !important;
  }
  .profile .submenu .dropdown-menu{
    border-top: 1px solid #dcdcdc;
    padding: 5px 0 0;
    margin: 10px 0 0;
  }
  .profile .submenu .dropdown-menu li{
    border-top: none;
    padding-inline: 5px !important;
    padding-block: 5px !important;
  }
  .profile .submenu .dropdown-menu li a{
    font-weight: 400;
  }
  .profile .submenu .dropdown-parent .dropdown-toggle svg,
  #mobile-menu .submenu .dropdown-parent .dropdown-toggle svg {
    transform: rotate(0deg) scale(0.9);
  }
  .profile .submenu .dropdown-parent.open .dropdown-toggle svg,
  #mobile-menu .submenu .dropdown-parent.open .dropdown-toggle svg{
    transform: rotate(180deg) scale(0.9);
  }
  #main-nav-user-name {
    display: none;
  }
}
@media only screen and (max-width: 641px) {
  /* Prevent horizontal overflow on mobile */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body.noscroll {
    overflow: hidden;
  }

  #page-wrapper {
    padding: 10px;
    box-sizing: border-box;
    padding-top: 10px !important;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .inner-page-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #blocker {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0 0 0 / 0.2);
    z-index: 1998;
  }

  #page-wrapper.modal-open #blocker {
    display: block;
  }

  .filter-selector-content {
    text-align: left;
    width: calc(100vw - 20px) !important;
    padding: 40px 0 40px 0;
    left: 10px;
    position: fixed;
    top: 10px;
    /* animation: fadeIn 150ms ease-in-out forwards; */
  }

  .filter-selector-options {
    padding: 0 20px;
    max-height: none;
    overflow-y: visible;
  }

  /* Remove max-height on dropdown content to prevent nested scrollbars */
  .dropdown-content {
    max-height: none;
    overflow-y: visible;
  }

  #marketcap-slider-wrapper {
    width: 100%;
  }

  #marketcap-inputs-wrapper input {
    width: 70px;
  }

  .filter-selector:last-of-type .filter-selector-content {
    left: 10px;
    right: unset;
  }

  #date-range-picker {
    flex-wrap: wrap;
  }

  .custom-date-wrapper {
    width: 100%;
  }

  .custom-date-wrapper:first-of-type {
    margin-bottom: 6px;
  }

  #date-range-picker input {
    width: 100%;
    box-sizing: border-box;
  }

  .filter-selector-header {
    top: 10px;
    right: 10px;
  }

  .filter-close-btn {
    font-size: 24px;
  }

  .filter-selector select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
  }

  .autocomplete-options {
    width: 100%;
  }

  .search-option {
    font-size: 16px;
    padding: 0.4em 1em 0.4em 1em;
  }

  #filter-tags-wrapper {
    margin-bottom: 20px;
    padding: 0 12px;
  }

  #filter-tags-container {
    flex-wrap: wrap;
  }

  .filter-tag {
    margin-bottom: 6px;
  }

  .filter-tag-close-btn {
    font-size: 18px;
  }

  .filters-section {
    padding: 12px;
    margin-bottom: 8px;
  }

  .gold-sponsors-card {
    padding: 10px 12px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /* Mobile: 3-column grid so 6 sponsors lay out as two neat rows of three
     rather than being squeezed onto one line. Overrides the desktop flex row. */
  #gold-sponsors-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
  }
  .gold-sponsor-wrapper {
    /* Reset the desktop flex sizing — grid handles the column widths now. */
    flex: initial;
  }
  .gold-sponsor-wrapper img {
    max-height: 40px;
  }

  .filter-controls-wrapper {
    margin-bottom: 12px;
    margin-top: 8px;
    max-width: 100%;
    padding: 0;
  }

  #market-buttons-wrapper {
    padding: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .single-control-container {
    flex-grow: 0;
    margin-right: 4px;
    margin-bottom: 4px;
  }

  .market-option {
    font-size: 11px;
    white-space: nowrap;
    padding: 6px 12px;
  }

  #market-buttons-wrapper {
    gap: 4px;
  }

  .filter-wrapper {
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-wrapper .label {
    width: auto;
    font-size: 13px;
    margin-right: 8px;
  }

  .filter-selector {
    flex-grow: 0;
    flex-shrink: 1;
    text-align: center;
    justify-content: center;
    margin-bottom: 6px;
    max-width: none;
    min-width: 0;
    margin-right: 4px;
    margin-left: 4px;
    position: unset;
    padding: 6px 10px;
  }

  #filter-control-buttons-wrapper {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 0;
    margin-right: 0;
    position: relative;
  }

  .filter-selector-label,
  #search,
  #search::placeholder {
    font-size: 11px;
  }

  .filter-selector-label {
    white-space: nowrap;
  }

  #sort-settings-wrapper {
    display: block;
    height: 35px;
    width: 35px;
    flex-shrink: 0;
    margin-left: 0;
  }

  #sort-settings-wrapper img {
    margin-left: 0;
  }

  #search-wrapper {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }

  #search-label {
    display: none;
  }

  #search {
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgb(153, 153, 153);
  }

  .load-more-button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .table-wrapper {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-shadow: unset;
  }

  .table-scroll-wrapper {
    width: 100%;
    min-width: unset;
    overflow: visible;
  }

  .table-rows-container {
    width: 100%;
    overflow: visible;
  }

  .table-title {
    margin-top: 30px;
    padding: 8px 12px;
    text-align: center;
    background-color: #edeef4;
    border-radius: 8px;
    border: 1px solid #e4e7ee;
    font-size: 16px;
  }

  .table-title:first-of-type {
    margin-top: 20px;
  }

  .table-header {
    display: none;
  }

  /* Mobile card layout - uses flex-wrap with order to control layout */
  .single-row {
    display: flex;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid #e4e7ee;
    background: #fff;
    min-height: unset;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .single-row:nth-of-type(even) {
    background: #fff;
  }

  .single-cell {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 2px 0;
    font-size: 13px;
    box-sizing: border-box;
  }

  .options-header {
    padding: 0 10px;
    text-align: center;
  }

  .single-cell a {
    border-bottom: none;
  }

  .col-news a,
  .col-socials a {
    border-bottom: 0;
  }

  /* Company name - prominent at top */
  .col-company {
    flex: 0 0 100%;
    order: 1;
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 6px;
  }

  .col-company a {
    -webkit-line-clamp: unset;
    display: block;
  }

  /* Location - under company name */
  .col-location {
    flex: 0 0 100%;
    order: 2;
    color: #6b7280;
    font-size: 13px;
    padding-bottom: 8px;
    -webkit-line-clamp: unset;
  }

  /* Hide date on mobile - less important */
  .col-date {
    display: none;
  }

  /* Metrics row styles - width controlled by flex */

  /* Grade (g/t) value - shows the mineral concentration */
  .col-mineral-value {
    flex: 0 0 100%;
    order: 3;
    padding-bottom: 4px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
  }
  .col-mineral-value::before {
    content: "Grade: ";
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
  }
  .col-mineral-value::after {
    content: " g/t";
    font-weight: 400;
    font-size: 12px;
    color: #6b7280;
  }

  /* From depth */
  .col-from::before {
    content: "From: ";
    font-weight: 600;
    font-size: 12px;
    color: #6b7280;
  }
  .col-from {
    flex: 0 0 100%;
    order: 4;
    text-align: left;
    padding-bottom: 2px;
  }
  .col-from::after {
    content: "m";
    font-size: 12px;
    color: #6b7280;
  }

  /* Hide interval on mobile to save space */
  .col-interval {
    display: none;
  }

  /* Grade x Width bar - full width */
  .col-gradexwidth {
    flex: 0 0 100%;
    order: 5;
    margin: 4px 0 0 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Grade x Width total label */
  .chart-total-grade-x-width {
    margin-bottom: 4px;
    font-size: 12px;
    color: #1f2937;
    font-weight: 500;
  }

  .chart-total-grade-x-width::before {
    content: "Grade x Width: ";
    font-weight: 600;
    color: #6b7280;
  }

  .full-width-chart-wrapper {
    width: 100% !important;
  }

  .full-width-chart {
    max-width: 100%;
  }

  /* Footer row - article and socials on same line */
  .col-news {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    order: 6;
    text-align: left;
    padding-top: 8px;
  }

  /* Hide the default news icon */
  .col-news img {
    display: none;
  }

  /* Remove the "Article:" prefix */
  .col-news::before {
    content: none;
  }

  /* Style the news link as a button-like link */
  .col-news a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #f3f4f6;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
  }

  .col-news a:hover {
    background-color: #e5e7eb;
  }

  /* Add external link icon after the link text */
  .col-news a::before {
    content: "View article";
  }

  .col-news a::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Hide the original link text (the icon) */
  .col-news a img {
    display: none;
  }

  /* Hide project on mobile */
  .col-project {
    display: none;
  }

  /* Hide marketcap on mobile */
  .col-marketcap {
    display: none;
  }

  /* Socials - inline with article, aligned right */
  .col-socials {
    display: flex;
    flex: 1 0 auto;
    width: auto;
    order: 7;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
  }
  .col-socials img {
    width: 24px;
    height: 24px;
  }

  #header-primary-commodity,
  .col-primary-commodity {
    display: none;
  }

  .vsb-main {
    width: 100%;
  }

  .vsb-main button {
    border-radius: 6px !important;
  }

  .vsb-menu {
    position: fixed;
    left: 10px;
    width: calc(100% - 20px);
  }

  #clear-search-btn {
    top: 6px;
  }

  #gold-sponsors-wrapper {
    margin-bottom: 10px;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  #gold-sponsors-label {
    font-size: 14px;
    line-height: 16px;
    margin-right: 10px;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
  }

  .gold-sponsor-wrapper {
    margin-right: 10px;
  }

  .gold-sponsor-wrapper:last-of-type {
    margin-right: 0;
  }

  .gold-sponsor-wrapper img {
    width: 140px;
    max-width: 200px;
    min-width: 140px;
    flex-shrink: 1;
    flex-grow: 1;
  }

  /* Mobile pagination */
  .drilling-pagination {
    padding: 12px 8px;
    margin: 16px 0;
  }

  .drilling-pagination__info {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .drilling-pagination__controls {
    gap: 4px;
  }

  .drilling-pagination__page {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .drilling-pagination__btn {
    width: 32px;
    height: 32px;
  }

  .drilling-pagination__pages {
    gap: 2px;
  }

  /* Mobile no results card */
  #no-results {
    margin: 20px 10px;
    padding: 32px 16px;
    max-width: none;
  }

  #no-results .no-results-icon {
    width: 56px;
    height: 56px;
  }

  #no-results .no-results-icon svg {
    width: 28px;
    height: 28px;
  }

  #no-results .no-results-title {
    font-size: 16px;
  }

  #no-results .no-results-subtitle {
    font-size: 13px;
  }

  /* Mobile download button */
  #download-wrapper {
    width: 100%;
    margin-top: 8px;
  }

  #download-btn {
    width: 100%;
    justify-content: center;
  }

  /* Active filters on mobile */
  #filter-tags-wrapper {
    margin-bottom: 12px;
  }

  .filter-tag {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* Download Button Styles */
#download-wrapper {
  margin-left: auto;
}

#download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background-color: #30a5bf;
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
}

#download-btn:hover {
  background-color: #2894ac;
  box-shadow: 0 8px 20px rgba(48, 165, 191, .45);
}

#download-btn:active {
  transform: translateY(0);
}

#download-btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#download-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

#download-btn.loading span {
  opacity: 0;
}

#download-btn.loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: download-spin 0.8s linear infinite;
}

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

#download-btn svg {
  flex-shrink: 0;
}

/* Responsive styles for download button */
@media only screen and (max-width: 768px) {
  #download-wrapper {
    width: 100%;
    margin-left: 0;
  }

  #download-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Sticky column headers for the drilling tables. Each .table-header sits
   immediately below the sticky filter zone when the page scrolls.

   IMPORTANT: this only engages at viewport widths ≥ 1200px because the table
   has min-width: 1200px and its parent (.table-wrapper) normally uses
   overflow-x: auto to provide horizontal scrolling at narrower widths. An
   overflow-x scroll container disables `position: sticky` for vertical scroll.
   At ≥ 1200px the table fits without horizontal scroll, so we can safely drop
   the overflow and let the header stick to the page viewport. Below 1200px
   the existing horizontal-scroll behaviour is preserved and sticky column
   headers don't engage — matches the "horizontal scrolling still works
   cleanly on smaller screens" requirement. */
@media (min-width: 1200px) {
  .table-wrapper {
    overflow-x: visible;
  }
  .table-header {
    position: sticky;
    /* nav (65px) + measured filter sticky-zone height (published by
       /js/sticky-filters.js into --mh-sticky-zone-h). Fallback covers the
       initial paint before JS measures. */
    top: calc(65px + var(--mh-sticky-zone-h, 220px));
    z-index: 40;
  }
}

/* Collapsed sticky filter state — engaged by /js/sticky-filters.js when the
   user scrolls past ~80px. Drilling has no search bar (unlike News/Movers),
   so there's no wasted-space problem to solve by hiding rows — the collapse
   just tightens vertical rhythm (padding, row gap, divider) and keeps every
   control accessible without opening the drawer. Active Filters + date-nav
   still hide since the tags surface below the filter zone. */
.mh-sticky-zone.is-scrolled .filters-section {
  padding: 8px 12px;
  transition: padding 0.18s ease;
}
.mh-sticky-zone.is-scrolled .filters-section .filter-wrapper {
  margin-bottom: 6px;
}
.mh-sticky-zone.is-scrolled .filters-section .filter-wrapper:last-child {
  margin-bottom: 0;
}
/* Drop the divider + bottom padding between the two rows so the compressed
   state reads as one compact strip rather than two half-height rows. */
.mh-sticky-zone.is-scrolled .drilling-commodity-row {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}
/* Kill the visible seam between the filter card and the results below when
   scrolled. sticky-filters.css draws a 1px #e5e7eb line across the zone's
   bottom edge on .is-scrolled — meant as a boundary marker on pages whose
   filter card doesn't itself carry a border (News/Movers use it for that).
   Drilling's card already has its own border, so that extra line plus the
   strip of #f7f7f7 visible between the card and it reads as a mismatched
   seam. Remove the border on our zone only, and close the strip by zeroing
   the card's bottom margin + the zone's bottom padding while scrolled. */
#drilling-sticky-zone.is-scrolled {
  border-bottom: 0;
  padding-bottom: 0;

}
#drilling-sticky-zone.is-scrolled .filters-section {
  margin-bottom: 0;
    border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#drilling-date-nav {
  display: none !important;
}

/* Extend the sticky zone's background to the FULL viewport width so there's
   no compositing-layer boundary between the zone's bg (#f7f7f7, only 1200px
   wide inside .inner-page-wrapper) and the outer #page-wrapper gutters
   (also #f7f7f7). Chrome promotes the sticky element to its own compositing
   layer for scroll performance, and even when both bg colors are literally
   identical, subpixel-offset rendering between layers can produce a hairline
   seam at their boundary during scroll. Kill the seam by putting the whole
   background on ONE layer — a full-viewport-width ::before pseudo pinned to
   the sticky-zone. Use `left: calc(50% - 50vw)` to escape the 1200px inner
   wrapper (which is centered, so its 50% matches the viewport's 50%).
   Behind the card + filter content via z-index: -1 in the sticky's own
   stacking context (created by position: sticky). */
#drilling-sticky-zone {
  background-color: transparent;
  isolation: isolate;
}
#drilling-sticky-zone::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background-color: #f7f7f7;
  z-index: -1;
  pointer-events: none;
}
/* Hide Active Filters strip while pinned. !important because
   investor-deck.js's populateFilterTags sets style="display: block" inline
   whenever a filter tag is present (which is exactly when we still want to
   hide it during scroll). Inline styles otherwise beat normal CSS. */
.mh-sticky-zone.is-scrolled #filter-tags-wrapper {
  display: none !important;
}
.mh-sticky-zone.is-scrolled #drilling-date-nav {
  padding-top: 2px;
  padding-bottom: 4px;
}

/* ============================================================================
   More Filters drawer — desktop override
   /css/mobile-filter-drawer.css hides .mobile-filter-drawer at >=642px because
   it's mobile-only on News/Movers/etc. The Drilling page reuses the drawer as
   its desktop "More Filters" surface, so override the media-query hide for our
   instance. #mobile-filter-drawer is the default containerId set in
   investor-deck.js initMobileFilterDrawer().
   ============================================================================ */
@media (min-width: 642px) {
  #mobile-filter-drawer.mobile-filter-drawer {
    display: flex !important;
  }
  #mobile-filter-drawer-backdrop.mobile-filter-drawer-backdrop {
    display: block !important;
  }
}

/* Commodity multi-select inside the drawer — checkboxes with a colored dot
   (matches the Quick Commodity row palette). */
.drawer-commodity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.drawer-commodity-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #1f2937;
}
.drawer-commodity-option label:hover {
  background: #f1f5f9;
}
.drawer-commodity-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #30a5bf;
  flex-shrink: 0;
}
.drawer-commodity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.drawer-commodity-label {
  flex: 1;
}
/* Scoped under #mobile-filter-drawer to outrank
   .mobile-filter-drawer__section-content > * { padding: 0 20px 20px 20px }
   in mobile-filter-drawer.css (which loads AFTER this file, so a same-
   specificity rule would lose the tie). */
#mobile-filter-drawer .drawer-commodity-clear {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #5b6577;
  text-align: center;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
#mobile-filter-drawer .drawer-commodity-clear:hover {
  background: #f1f5f9;
  border-color: #30a5bf;
  color: #1f2937;
}
#mobile-filter-drawer .drawer-commodity-clear:active {
  background: #e2e8f0;
}

/* Marketcap slider, moved from the legacy pill into the drawer.
   The slider was sized for a popover; reset overflow + width so it fits the
   drawer column, and give it a little breathing room. */
/* mobile-filter-drawer.css:273 sets `padding: 0 !important` on
   .mobile-filter-drawer .filter-selector-options (its baseline reset for any
   filter content moved in). Match the specificity + !important to restore
   breathing room around the marketcap slider. */
#mobile-filter-drawer .filter-selector-options {
  padding: 12px 16px !important;
  width: 100%;
  overflow: visible !important;
  box-sizing: border-box;
}
#mobile-filter-drawer #marketcap-slider-wrapper {
  width: 100%;
  padding: 4px 0;
}

/* ============================================================================
   Drill Intercepts — unified table (MHD ticket)
   Landing-page style: light grey rounded G×W tracks, coloured commodity
   dots, sortable headers, page-based pagination footer. Brand teal is
   #30a5bf (matches News page).
   ============================================================================ */

:root {
  --mh-teal: #30a5bf;
  --mh-teal-dark: #1e8ba3;
  --mh-teal-tint: rgba(48, 165, 191, .12);
}

/* --- Row 1: Commodity quick pills + More Commodities dropdown ------------ */
.drilling-commodity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.drilling-commodity-row > .label { margin-right: 4px; }
#more-commodities-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
#more-commodities-wrapper sl-select {
  min-width: 200px;
  --sl-input-border-radius-medium: 999px;
}
#more-commodities-wrapper sl-select::part(combobox) {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  height: 34px;
  min-height: unset;
  font-family: Nunito Sans;
  font-weight: 600;
  color: #1f2937;
}

/* Divider between the two filter rows. Row 1 (Commodity) sits above the
   line, Row 2 (Market / Date / Actions) below it — matches the mockup. */
.drilling-commodity-row {
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}

/* --- Row 2: Market radio-group + Date + Actions --------------------------- */
.drilling-market-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.drilling-market-wrapper .label { margin-right: 4px; }

/* Market selector — pill-group with a grey wrapper, matching the /market-movers
   #market-buttons-wrapper. Each option is a transparent pill inside the grey
   container; the selected option is teal-filled with a soft shadow. */
#market-buttons-wrapper {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  background-color: #f1f5f9;
  border-radius: 1000px;
  padding: 6px;
  flex-grow: 0;
  width: max-content;
}
#market-buttons-wrapper .market-option {
  border: 1px solid transparent;
  color: #1f2937;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  background: #f1f5f9;
  transition: all .15s ease;
  white-space: nowrap;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
#market-buttons-wrapper .market-option.selected {
  background: #30a5bf;
  border-color: rgba(0, 0, 0, .04);
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
}
#market-buttons-wrapper .market-option:hover:not(.selected) {
  background: #e2e8f0;
}

/* Date range widget — mirrors the newsroom styling. The DateRangePickerWidget
   renders as <details><summary>...</summary><ul>...</ul></details>; the
   summary is the pill-shaped trigger and the ul is the dropdown menu.
   Values match newsroom.js so /investor-deck feels visually identical to
   /news + /market-movers. */
.drilling-date-wrapper .label { margin-right: 4px; }
#drilling-date-range-picker-widget-container {
  display: inline-block;
  position: relative;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget {
  position: relative;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget > summary {
  list-style: none !important;
  background-color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  border: 1px solid #e4e7ee !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  min-height: 36px;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget > summary::-webkit-details-marker {
  display: none !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget > summary::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border: none !important;
  border-right: 2px solid #666 !important;
  border-bottom: 2px solid #666 !important;
  transform: rotate(45deg) !important;
  margin-left: auto !important;
  margin-top: -2px !important;
  background-image: none !important;
  background: none !important;
  flex-shrink: 0 !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget > summary:hover,
#drilling-date-range-picker-widget-container .daterangepicker-widget[open] > summary {
  border-color: var(--mh-teal) !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-current-text {
  padding-left: 0 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
#drilling-date-range-picker-widget-container .fa-calendar,
#drilling-date-range-picker-widget-container .input-icon {
  font-size: 14px !important;
  color: #555 !important;
  margin-top: 0 !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-range-options {
  position: absolute !important;
  right: auto !important;
  z-index: 1000 !important;
  border-top: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  top: 43px !important;
  left: 0 !important;
  background: #fff !important;
  border: 1px solid #e4e7ee !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;
  min-width: 220px !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-range-option {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  list-style: none !important;
  display: block !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-range-option label {
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  gap: 10px !important;
  font-size: 14px !important;
  margin: 0 !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-range-option label:hover {
  background-color: #f5f5f5 !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-range-option input[type="radio"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transform: none !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-custom-range-wrapper {
  padding: 10px 12px !important;
  border-top: 1px solid #eee !important;
  background: #fafafa !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: none !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-custom-range {
  display: flex !important;
  gap: 8px !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-custom-range .custom-date-wrapper {
  flex: 1 !important;
  position: relative !important;
  width: auto !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-custom-range input[type="text"] {
  width: 100% !important;
  padding: 6px 8px 6px 28px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-custom-range input[type="text"]:focus {
  outline: none !important;
  border-color: var(--mh-teal) !important;
}
#drilling-date-range-picker-widget-container .daterangepicker-widget-custom-range .input-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  color: #666 !important;
}

/* --- Card + Table --------------------------------------------------------- */
#tables-wrapper {
  padding-bottom: 60px; /* space so the last row isn't clipped by the eqv-warning strip */
}
#tables-wrapper.is-empty {
  /* No rows to protect from the eqv-warning strip — drop the padding so the
     empty-state card doesn't float in the middle of a tall wrapper. */
  padding-bottom: 0;
}
#tables-wrapper .drill-intercepts-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  /* No box-shadow — matches the removal on .filters-section. The 24px shadow
     blur was bleeding upward into the sticky-zone's y-range and creating a
     visible L-shape seam against the sticky-zone's full-viewport pseudo bg
     (bleed hidden inside pseudo range, visible outside). Border alone gives
     enough visual separation against the #f7f7f7 page bg. */
  margin: 16px 0;
  /* overflow: visible so the sticky <thead> can escape the card's clipping
     context and stick to the viewport (relative to the site nav offset). */
  overflow: visible;
}
.drill-intercepts-header {
  padding: 20px 24px 12px;
}
.drill-intercepts-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  padding-left: 0;
}
.drill-intercepts-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}
.drill-intercepts-scroll {
  width: 100%;
  /* Keep visible so the sticky <thead> escapes to the viewport. Horizontal
     overflow is handled in mobile styles below where narrow viewports fall
     back to card layout instead. */
  overflow: visible;
}
.drill-intercepts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #111827;
  /* Fixed layout + a <colgroup> emitted in JS (see COL_WIDTHS in
     investor-deck.js) owns the per-column widths deterministically. Auto
     layout was reading widths off cell content and stretching Commodity
     to ~114px etc — fixed + colgroup fixes that. Location gets `auto`
     width in the colgroup so it flexes to fill remaining space between
     Market Cap and News. */
  table-layout: fixed;
}
/* Nowrap on the columns whose content is a short fixed-format value
   ("14 EDT", "35.4 m", "$25.7M"). Grade + Commodity are excluded because
   their content can legitimately carry a long commodity name (e.g.
   "Graphitic Carbon" — the muted unit suffix inside col-grade and the
   commodity label inside col-commodity), which would otherwise nowrap
   and paint over the adjacent cells. Grade + Commodity wrap to a second
   line for the long-name outlier rows; the fixed short-symbol majority
   (Au / Cu / Li2O / …) still renders on one line. */
.drill-intercepts-table .col-date,
.drill-intercepts-table .col-width,
.drill-intercepts-table .col-from,
.drill-intercepts-table .col-marketcap { white-space: nowrap; }
/* Belt and braces — table-layout: fixed means cells honour their colgroup
   widths, but `white-space: nowrap` content in any cell can still visually
   paint outside its box. `overflow: hidden` on every body cell prevents
   that regardless of which cell overflows first. */
.drill-intercepts-table tbody td { overflow: hidden; }
/* Commodity + Grade cells wrap long commodity names cleanly. Break-word
   handles the tiny minority of single-token names that exceed column
   width; normal wrapping handles multi-word ("Graphitic Carbon"). */
.drill-intercepts-table .col-commodity,
.drill-intercepts-table .col-grade {
  white-space: normal;
  overflow-wrap: break-word;
}
/* Drop the inline-flex container in favour of block+inline flow so the
   commodity text wraps naturally at its content edges. The dot then
   sits inline with the first line and stays put when the text wraps to
   a second line — `vertical-align: middle` keeps it centered against
   the text x-height rather than sitting at the baseline. */
.drill-intercepts-table .cell-commodity {
  display: block;
}
.drill-intercepts-table .cell-commodity .commodity-dot {
  vertical-align: middle;
  margin-right: 6px;
}
.drill-intercepts-table .cell-commodity .commodity-text {
  vertical-align: middle;
}

/* Sticky header — pins immediately below the sticky filter zone as the page
   scrolls. Uses --mh-sticky-zone-h published by /js/sticky-filters.js so it
   tracks the filter zone's collapsed/expanded height (the fallback covers the
   initial paint before JS measures). Title case, bold, dark; slightly smaller
   than body copy for a compact feel. */
.drill-intercepts-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #111827;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  white-space: nowrap;
  vertical-align: middle;
  position: sticky;
  top: calc(65px + var(--mh-sticky-zone-h, 220px));
  z-index: 40;
}
.drill-intercepts-table thead th.col-news { text-align: center; }

/* Match the filter card's 14px top-corner radius on the first and last
   sticky <th> cells. Otherwise the pinned header reads as a sharp-cornered
   rectangle bumping into the rounded filter card above — jarring. The card
   wrapper has overflow:visible (so the sticky thead can escape the card's
   clip box) which means the card's own border-radius doesn't clip the
   thead — the cells own their corners directly. Bottom corners stay square
   because rows appear below. */
/* .drill-intercepts-table thead th:first-child {
  border-top-left-radius: 14px;
}
.drill-intercepts-table thead th:last-child {
  border-top-right-radius: 14px;
} */

/* Sort button — single fa-sort glyph beside the label. Muted grey when
   inactive; swaps to fa-sort-up / fa-sort-down in brand teal when active. */
.drill-intercepts-table thead th.sortable { cursor: pointer; user-select: none; }
.drill-intercepts-table thead th .sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
}
/* Custom inline-SVG sort icon (see renderTable for the markup). Two arrows,
   stroke-only. Neutral = both muted grey; active-asc = up teal, down grey;
   active-desc = down teal, up grey. Hover mid-tone. */
.drill-intercepts-table thead th .sort-icon {
  flex-shrink: 0;
  width: 12px;
  height: 14px;
}
.drill-intercepts-table thead th .sort-icon-up,
.drill-intercepts-table thead th .sort-icon-down { stroke: #d1d5db; }
/* Hover darkens only the INACTIVE-direction arrows. Excluding the active
   .sort-asc/.sort-desc columns is load-bearing — without the :not() gate
   the hover selector wins on specificity (`.sortable:hover` is one class
   more than `.sort-asc` alone) and stomps the teal-active state while the
   cursor sits over the column, so clicking a new column appears to do
   nothing until you move the mouse away. */
.drill-intercepts-table thead th.sortable:not(.sort-asc):not(.sort-desc):hover .sort-icon-up,
.drill-intercepts-table thead th.sortable:not(.sort-asc):not(.sort-desc):hover .sort-icon-down { stroke: #9ca3af; }
/* On an already-sorted column, hover keeps the teal arrow and only nudges
   the opposite-direction arrow — signals the click-to-flip affordance
   without hiding the current sort. */
.drill-intercepts-table thead th.sortable.sort-asc:hover .sort-icon-down { stroke: #9ca3af; }
.drill-intercepts-table thead th.sortable.sort-desc:hover .sort-icon-up { stroke: #9ca3af; }
.drill-intercepts-table thead th.sort-asc .sort-icon-up { stroke: var(--mh-teal); }
.drill-intercepts-table thead th.sort-desc .sort-icon-down { stroke: var(--mh-teal); }

/* Body rows */
.drill-intercepts-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.drill-intercepts-table tbody tr:last-child td { border-bottom: 0; }
.drill-intercepts-table tbody tr:hover td { background: #fafbfc; }

/* Cell typography — three-tier system so the table reads consistently:
   - Primary value (13px, 600, #111827): the number/name the user scans for.
     Applied to Grade × Width, Grade, Width, From, Market Cap, Company name.
   - Secondary body (12px, 400-500, #6b7280 or #111827): date, project name.
   - Micro meta (11px, 400, #9ca3af): ticker, currency, tz, inline units.
   Any exception (e.g. Commodity label sits inline with a dot, so it inherits
   the base 13px) is deliberate. */

.cell-date-value { font-weight: 500; color: #111827; font-size: 12px; }
.cell-date-tz { font-size: 11px; color: #9ca3af; margin-top: 2px; }

.cell-company-name { font-size: 13px; font-weight: 600; color: #111827; cursor: pointer; }
.cell-company-name[role="link"]:hover { color: var(--mh-teal); }
.cell-company-project { font-size: 12px; color: #6b7280; margin-top: 3px; }
.cell-company-ticker { font-size: 11px; color: #9ca3af; margin-left: 4px; }

.cell-commodity { display: inline-flex; align-items: center; gap: 6px; color: #111827; font-weight: 500; }
.commodity-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.commodity-text { color: #111827; }

/* Grade × Width — value line has commodity + unit in muted grey. */
.cell-gxw-value { font-weight: 600; color: #111827; margin-bottom: 5px; font-size: 13px; }
.cell-gxw-value .cell-gxw-unit { color: #9ca3af; font-weight: 400; margin-left: 3px; font-size: 11px; }
.cell-gxw-bar { width: 100%; max-width: 140px; height: 10px; background: #f1f3f5; border-radius: 999px; overflow: hidden; }
/* Fill container. Was previously a single coloured div; now hosts one or
   more .cell-gxw-bar-seg children arranged in a row so equivalent-grade
   intercepts can paint per-commodity coloured segments. Rounded corners
   sit on the container so the seg edges stay square inside. */
.cell-gxw-bar-fill {
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  transition: width .3s ease;
}
/* Each segment carries `flex: <share>` inline so widths track each
   commodity's proportion of the total GxW. `min-width` guarantees a
   visible sliver even for tiny contributors (~1% of the interval would
   otherwise render as <2px and disappear); flex-shrink: 0 stops the
   layout from squeezing that minimum back to zero when totals overflow.
   Hover cursor + subtle brightness pop tell the user the segment is a
   distinct interactive target (tippy tooltip attaches on hover). */
.cell-gxw-bar-seg {
  display: block;
  height: 100%;
  min-width: 6px;
  flex-shrink: 0;
  cursor: pointer;
  transition: filter .12s ease;
}
.cell-gxw-bar-seg:hover {
  filter: brightness(1.12) saturate(1.1);
}

/* Grade / Width / From — value bold, unit muted. Bumping the naked-td text
   to 600 matches the treatment of GxW and Market Cap primaries. Scoped to
   tbody so the thead's font-weight: 700 (see `.drill-intercepts-table
   thead th`) isn't shadowed by class specificity — otherwise the Grade /
   Width / From column headings render at 600 while every other heading
   sits at 700, and the row visibly reads with three thin outliers. */
.drill-intercepts-table tbody .col-grade,
.drill-intercepts-table tbody .col-width,
.drill-intercepts-table tbody .col-from { color: #111827; font-weight: 600; }
.cell-value-unit { color: #9ca3af; font-weight: 400; margin-left: 3px; font-size: 11px; }

.cell-mcap-value { font-weight: 600; color: #111827; }
.cell-mcap-currency { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* Location — single-line ellipsis. Under auto table-layout the column
   flexes to fill remaining space, so long strings like "Western Australia,
   Australia" have room to fit; anything longer than the flex width truncates
   with an ellipsis. Single-line keeps every row the same height so the
   bottom borders line up cleanly with sibling cells (2-line clamp caused
   the misalignment reported in the earlier screenshot). */
.drill-intercepts-table .col-location {
  color: #111827;
  line-height: 1.4;
  /* Under fixed table-layout the auto-width Location col gets a computed
     width from the browser (remaining space after the sized columns) —
     inner ellipsis works without the max-width:0 trick. */
}
.cell-location-inner {
  /* 2-line clamp — matches the Company / Project cell's wrap behaviour.
     Long locations ("Newfoundland and Labrador, Canada", "Western Australia,
     Australia") don't get truncated on the first comma anymore; anything
     past line 2 still ellipses. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.drill-intercepts-table .col-news { text-align: center; }
.cell-news-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--mh-teal);
  background: var(--mh-teal-tint);
  text-decoration: none;
  transition: background .15s ease;
}
.cell-news-link:hover { background: rgba(48, 165, 191, .22); }

/* Icon-only "View in 3D" action beside the news button — same 32px teal
   square treatment; only renders when the release has verified Basic 3D
   drill data (row.basic_3d). */
.cell-3d-link { margin-left: 6px; }
.cell-3d-link svg { display: block; }

/* --- Footer / pagination -------------------------------------------------- */
.drill-intercepts-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 20px;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #f3f4f6;
  font-size: 13px;
}
.drill-footer-summary { color: #6b7280; }
.drill-footer-pager { display: inline-flex; align-items: center; gap: 4px; }
.drill-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #111827;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.drill-page-btn:hover:not(.disabled):not(.active) { background: #f3f4f6; }
.drill-page-btn.active {
  background: var(--mh-teal);
  color: #fff;
  border-color: var(--mh-teal);
}
.drill-page-btn.disabled,
.drill-page-btn:disabled { color: #d1d5db; cursor: not-allowed; }
/* Larger chevron for prev/next; teal when active (not disabled), muted grey otherwise. */
.drill-page-btn.drill-page-chevron {
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  color: var(--mh-teal);
  padding: 0 8px;
}
.drill-page-btn.drill-page-chevron.disabled,
.drill-page-btn.drill-page-chevron:disabled { color: #d1d5db; }
.drill-page-ellipsis { color: #9ca3af; padding: 0 4px; user-select: none; }

.drill-footer-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.drill-footer-page-size-label { white-space: nowrap; }
/* Shoelace <sl-select> defaults to display:block width:auto but the internal
   combobox part is sized off its content + fixed padding + slots — the caret
   suffix alone eats ~28px and prefix/clear reserved space adds more. So the
   host width is `auto` on paper but never shrinks below ~130px. Fix by
   pinning the host to a compact fixed width and letting the combobox fill
   it; the <display-input> caret / value still render fine at this size. */
.drill-footer-page-size sl-select {
  width: 76px;
  --sl-input-height-small: 32px;
}
.drill-footer-page-size sl-select::part(combobox) {
  padding-left: 10px;
  padding-right: 4px;
}

/* --- Error state ---------------------------------------------------------- */
.drill-error-card {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  color: #991b1b;
  margin: 16px 0;
}

/* --- More Filters drawer (desktop overrides) ----------------------------- */
/* On desktop the drawer is a full-screen slide-in with all sections shown
   simultaneously — no accordion behaviour. Hide the section chevron and
   force content visible. On mobile the drawer keeps its default accordion. */
@media (min-width: 901px) {
  /* Header — tighten the mobile spec so the drawer reads as a compact desktop
     surface rather than a phone screen. Underline it with a stronger divider
     so the eye locks onto the section list below. */
  #mobile-filter-drawer .mobile-filter-drawer__header {
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
  }
  #mobile-filter-drawer .mobile-filter-drawer__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0;
  }
  #mobile-filter-drawer .mobile-filter-drawer__close {
    width: 32px;
    height: 32px;
  }

  /* Sections — de-accordion. Each section reads as a labeled row: label on
     top in Title Case (not uppercase), controls below, thin #e5e7eb divider
     between. Section vertical padding tightened from ~24px to ~14px. */
  .mobile-filter-drawer__section {
    padding: 14px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 0 !important;
  }
  .mobile-filter-drawer__section:last-child {
    border-bottom: 0 !important;
  }
  .mobile-filter-drawer__section-header {
    cursor: default !important;
    pointer-events: none;
    padding: 0 24px 8px 24px !important;
    background: transparent !important;
  }
  .mobile-filter-drawer__section-chevron {
    display: none !important;
  }
  .mobile-filter-drawer__section-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;      /* was uppercase — Title Case reads as desktop */
    letter-spacing: 0;
    color: #111827;
  }
  /* Own the horizontal 24px gutter at the section-content level, NOT on the
     direct child. mobile-filter-drawer.css:151 puts padding on `> *` — that
     works for simple form fields but breaks any child that has its own
     absolutely-positioned pieces (e.g. .drawer-autocomplete has a clear-X at
     right:10px of the wrapper and a dropdown at left:0 / right:0). If padding
     lives on the wrapper, those absolute coords are offset from the padding
     edge and the X floats outside the input, dropdown outruns the input. By
     hoisting padding to the parent + zeroing the child, the wrapper becomes
     the reference box for both the input's width:100% and the absolute
     children — all three align to the same edges. */
  .mobile-filter-drawer__section-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 24px !important;
    background: transparent !important;
  }
  .mobile-filter-drawer__section-content > * {
    padding: 0 !important;
  }

  /* Footer — sit flush with a firmer top border, tighter vertical padding.
     Reset softens (no border, subtle grey) so Apply owns the visual weight. */
  #mobile-filter-drawer .mobile-filter-drawer__footer {
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    gap: 10px;
  }
  #mobile-filter-drawer .mobile-filter-drawer__btn {
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
  }
  #mobile-filter-drawer .mobile-filter-drawer__btn--reset {
    background: transparent;
    border-color: transparent;
    color: #5b6577;
    flex: 0 0 auto;
  }
  #mobile-filter-drawer .mobile-filter-drawer__btn--reset:hover {
    background: #f3f4f6;
    color: #111827;
  }
  #mobile-filter-drawer .mobile-filter-drawer__btn--apply {
    box-shadow: 0 6px 18px rgba(48, 165, 191, .35);
  }

  /* Min / Max range rows (Market Cap + GxW / Grade / Width / From). Both
     labels share the row 50/50 so the Min and Max inputs render at the
     exact same width regardless of placeholder length ("0" vs "No max"),
     unit label ($M vs m vs empty) or actual value. Without `flex: 1 1 0`
     each label sized to content and the two inputs drifted apart. */
  #mobile-filter-drawer .drawer-marketcap-inputs {
    gap: 14px;
  }
  #mobile-filter-drawer .drawer-marketcap-inputs label {
    flex: 1 1 0;
    min-width: 0;
  }
  #mobile-filter-drawer .drawer-marketcap-inputs input {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 10px;
  }
  /* Kill the native number-input spinners — they shift the visual width
     of the input differently between Chrome and Firefox, breaking the
     50/50 alignment. Filter is admin-numeric only; keyboard entry works
     fine without them. */
  #mobile-filter-drawer .drawer-marketcap-inputs input[type="number"]::-webkit-inner-spin-button,
  #mobile-filter-drawer .drawer-marketcap-inputs input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  #mobile-filter-drawer .drawer-marketcap-inputs input[type="number"] {
    -moz-appearance: textfield;
  }
  #mobile-filter-drawer .drawer-marketcap-inputs > label > span:first-child {
    /* Min / Max label — fixed content width so it doesn't eat input room. */
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-right: 4px;
    flex: 0 0 auto;
  }
  #mobile-filter-drawer .drawer-marketcap-inputs > label > span:last-child {
    /* Trailing unit ($M / m / empty). Reserve a fixed width across every
       range section so inputs land in the same column regardless of
       whether the section has a unit label at all. $M is the widest of
       the current set (~22px); 24px covers it. */
    flex: 0 0 24px;
    margin-left: 4px;
    text-align: left;
  }

  /* Location dropdowns — a touch more compact than default sl-select medium. */
  #mobile-filter-drawer .drawer-location {
    gap: 10px;
  }
  #mobile-filter-drawer .drawer-field > span {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 2px;
  }

  /* Gold Equivalency toggle — pull the label + switch into a single line
     without the loose default gap. */
  #mobile-filter-drawer .drawer-toggle {
    padding: 4px 0;
    font-size: 14px;
    color: #111827;
  }
}

/* Drawer content — inline autocomplete + form styles */
.market-buttons-drawer { display: flex; flex-direction: column; gap: 8px; }
.market-buttons-drawer .market-option.drawer-option {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
}
.market-buttons-drawer .market-option.drawer-option.selected {
  border-color: var(--mh-teal);
  background: var(--mh-teal-tint);
  color: var(--mh-teal-dark);
}

.drawer-text-input {
  width: 100%;
  padding: 9px 32px 9px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  background: #fff;
  color: #111827;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.drawer-text-input:focus {
  outline: none;
  border-color: var(--mh-teal);
  box-shadow: 0 0 0 3px var(--mh-teal-tint);
}

.drawer-autocomplete { position: relative; }
.drawer-autocomplete-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  /* Transparent chip — reads as an inline glyph inside the input rather than
     a separate button pinned to the edge (the earlier grey circle bg looked
     like it was overhanging the input's right border). */
  background: transparent;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .12s ease, color .12s ease;
}
.drawer-autocomplete-clear:hover { background: #f3f4f6; color: #111827; }

/* Chevron affordance for the Project autocomplete's picker mode. Shown only
   when a company is selected AND the input has no value — signals "click to
   see options" like a native dropdown. Position matches the clear-X so they
   share the same slot (they never appear simultaneously: chevron shows when
   the input is empty, clear-X shows when it has content). */
.drawer-autocomplete-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .12s ease, color .12s ease;
}
.drawer-autocomplete-chevron:hover { background: #f3f4f6; color: #111827; }
/* Show the chevron in picker mode ONLY while the input is empty. Once the
   user types, :placeholder-shown drops and this selector no longer matches,
   leaving the chevron hidden (clear-X — controlled by JS — takes over the
   slot when there's actual content). Selector uses the general-sibling
   combinator (~) because the clear-X sits between input and chevron in DOM. */
.drawer-autocomplete.is-picker-mode .drawer-text-input:placeholder-shown ~ .drawer-autocomplete-chevron {
  display: inline-flex;
}
.drawer-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}
.drawer-autocomplete-dropdown.is-open { display: block; }
.drawer-autocomplete-option {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: inherit;
  color: #111827;
}
.drawer-autocomplete-option:hover,
.drawer-autocomplete-option.is-hovered { background: var(--mh-teal-tint); }
.drawer-autocomplete-option-label { font-weight: 500; font-size: 14px; }
.drawer-autocomplete-option-sub { font-size: 12px; color: #6b7280; }
.drawer-autocomplete-empty { padding: 10px 12px; color: #9ca3af; font-size: 13px; }

/* Range-row layout (Market Cap + GxW / Grade / Width / From). Two labels
   split the row 50/50 (`flex: 1 1 0`) so Min and Max inputs render at
   identical widths regardless of value / placeholder / unit label. */
.drawer-marketcap-inputs { display: flex; gap: 10px; }
.drawer-marketcap-inputs label { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.drawer-marketcap-inputs input {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}
.drawer-marketcap-inputs span { color: #6b7280; font-size: 13px; flex: 0 0 auto; }
/* Trailing unit slot reserves a fixed 24px so inputs land in the same
   column across rows (Market Cap "$M" is ~22px, others are "m" or empty). */
.drawer-marketcap-inputs > label > span:last-child { flex: 0 0 24px; text-align: left; }
/* Suppress native number spinners — they shift the effective input width
   differently between Chrome and Firefox and break the 50/50 alignment. */
.drawer-marketcap-inputs input[type="number"]::-webkit-inner-spin-button,
.drawer-marketcap-inputs input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.drawer-marketcap-inputs input[type="number"] { -moz-appearance: textfield; }

.drawer-location { display: flex; flex-direction: column; gap: 12px; }
.drawer-field { display: flex; flex-direction: column; gap: 4px; }
.drawer-field > span { font-size: 12px; color: #6b7280; }
.drawer-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* --- Mobile-only responsive tweaks ---------------------------------------
   Card layout modelled on the legacy production drilling page: company +
   location header, then Grade / From / Grade × Width lines with the GxW
   bar as the visual hero. Deliberately spare — no ticker chip, no date,
   no commodity dot, no market cap. Users skim vertically down through
   cards; anything beyond company identity + the three headline metrics
   adds noise on a phone width. */
@media (max-width: 900px) {
  #quick-commodity-buttons-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
  }
  #more-commodities-wrapper { width: 100%; margin-left: 0; margin-top: 8px; }
  #more-commodities-wrapper sl-select { width: 100%; min-width: 0; }

  /* Neutralize the legacy pseudo-content pollution from the 641px block at
     ~line 2079 (pre-redesign commodity-partitioned tables). We paint our
     own labels via ::before on grade / from / gradeXWidth below. */
  .drill-intercepts-table .col-from::before,
  .drill-intercepts-table .col-from::after,
  .drill-intercepts-table .col-grade::before,
  .drill-intercepts-table .col-grade::after,
  .drill-intercepts-table .col-width::before,
  .drill-intercepts-table .col-width::after,
  .drill-intercepts-table .col-marketcap::before,
  .drill-intercepts-table .col-marketcap::after,
  .drill-intercepts-table .col-news::before,
  .drill-intercepts-table .col-news::after,
  .drill-intercepts-table .col-news a::before,
  .drill-intercepts-table .col-news a::after {
    content: none !important;
  }
  /* Legacy .col-news a (line 2154) paints a grey chip + hides img. Restore
     our teal-tinted icon chip with a scoped, !important-armed override. */
  .drill-intercepts-table .col-news .cell-news-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: var(--mh-teal-tint) !important;
    color: var(--mh-teal) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }
  .drill-intercepts-table .col-news .cell-news-link i { color: var(--mh-teal); }

  /* Container chrome */
  #tables-wrapper { padding: 0 8px 20px; }
  #tables-wrapper.is-empty { padding-bottom: 0; }
  .drill-intercepts-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .drill-intercepts-header { padding: 8px 4px 12px; }
  .drill-intercepts-title { font-size: 18px !important; }

  /* Kill the table's sticky thead + horizontal semantics on mobile; each
     row becomes a stand-alone card. */
  .drill-intercepts-scroll { overflow: visible !important; }
  .drill-intercepts-table thead { display: none; }
  .drill-intercepts-table,
  .drill-intercepts-table tbody { display: block; width: 100%; }

  /* --- Card layout ------------------------------------------------------
     2-col grid so the news icon can sit top-right; the rest of the cells
     stack down the left column full-width. */
  .drill-intercepts-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 16px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    border-bottom: 1px solid #e5e7eb;
  }
  /* !important beats the desktop `.drill-intercepts-table tbody td` rule
     (specificity 0-1-2) which sets padding: 14px 16px + border-bottom.
     Without it col-company keeps the desktop's 16px left padding and
     shifts right of the flush-left metric cells; and a stray half-width
     bottom border draws across the col-company cell (row 1 stretches
     with content) while col-news (align-self: start) sits above it. */
  .drill-intercepts-table td {
    display: block;
    padding: 0 !important;
    border-bottom: 0 !important;
    white-space: normal;
    background: transparent !important;
  }

  /* Hide cells that don't earn their vertical space on mobile. Date,
     commodity dot, width, market cap and location are all dropped —
     company name + project line + the three metric rows are the scan
     surface. */
  .drill-intercepts-table .col-date,
  .drill-intercepts-table .col-commodity,
  .drill-intercepts-table .col-width,
  .drill-intercepts-table .col-marketcap,
  .drill-intercepts-table .col-location {
    display: none;
  }

  /* Row 1 — Company header on the left, News icon top-right. */
  .drill-intercepts-table .col-company {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-bottom: 8px !important;
  }
  .drill-intercepts-table .col-news {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .cell-company-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111827 !important;
  }
  .cell-company-project {
    margin-top: 4px;
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.35 !important;
  }
  .cell-company-ticker {
    color: #9ca3af !important;
    margin-left: 6px !important;
  }

  /* Rows 2-4 — Grade, From, Grade × Width. Full-width, each with a small
     grey "Label:" prefix inline with the value. Matches the production
     card's rhythm (label + value + unit on one line). */
  .drill-intercepts-table .col-grade,
  .drill-intercepts-table .col-from,
  .drill-intercepts-table .col-gradeXWidth {
    grid-column: 1 / -1;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #111827 !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 0 !important;
  }
  .drill-intercepts-table .col-grade      { grid-row: 2; }
  .drill-intercepts-table .col-from       { grid-row: 3; }
  .drill-intercepts-table .col-gradeXWidth { grid-row: 4; padding-top: 4px !important; }

  /* Label prefixes. Later cascade position beats the legacy `content: none`
     reset above (both !important, later wins). */
  .drill-intercepts-table .col-grade::before,
  .drill-intercepts-table .col-from::before,
  .drill-intercepts-table .col-gradeXWidth::before {
    display: inline;
    color: #6b7280;
    font-weight: 500;
    margin-right: 4px;
  }
  .drill-intercepts-table .col-grade::before       { content: 'Grade: '         !important; }
  .drill-intercepts-table .col-from::before        { content: 'From: '          !important; }
  .drill-intercepts-table .col-gradeXWidth::before { content: 'Grade \00D7 Width: ' !important; }

  /* Unit spans read as muted secondary. */
  .drill-intercepts-table .col-grade .cell-value-unit,
  .drill-intercepts-table .col-from .cell-value-unit,
  .drill-intercepts-table .col-gradeXWidth .cell-value-unit {
    color: #6b7280 !important;
    font-weight: 500 !important;
    margin-left: 2px !important;
    font-size: 12px !important;
  }

  /* GxW value flows inline with the "Grade × Width:" label. Bar drops
     below on its own line via block display. */
  .cell-gxw-value {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .cell-gxw-bar {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 8px !important;
    height: 10px !important;
    background: #f1f3f5 !important;
    border-radius: 999px !important;
  }
  .cell-gxw-bar-fill {
    height: 100% !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    display: flex !important;
  }
  /* Segment min-width slightly larger on mobile — 8px reads better against
     the 10px-tall bar than the 6px desktop value. Tap targets: same
     tippy hover mechanism works from touch (the browser synthesizes a
     mouseover on first tap). */
  .cell-gxw-bar-seg {
    display: block !important;
    height: 100% !important;
    min-width: 8px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  .drill-intercepts-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 4px;
  }
}