/* ============================================================
   1635 RESOURCES — V2 METALLIC LAYER
   Loaded AFTER v2-overrides.css. All 8 Critical-Minerals tiles
   get a true metallic finish: brushed gradient + sheen highlight
   + dark vignette bottom + light edge top + diagonal grain.
   ============================================================ */

/* Shared metallic structure for every Critical-Minerals tile */
#critical .metal-card {
  position: relative;
  overflow: hidden;
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 18px 36px -18px rgba(6,30,34,.45);
}
/* Diagonal brushed-metal grain overlay */
#critical .metal-card::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 4px);
  pointer-events:none;
  mix-blend-mode: overlay;
  z-index: 1;
}
/* Diagonal sheen sweep */
#critical .metal-card::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.18) 68%,
    rgba(255,255,255,0) 78%);
  pointer-events:none;
  z-index: 1;
}
#critical .metal-card .sym,
#critical .metal-card .name,
#critical .metal-card .ir,
#critical .metal-card .desc { position: relative; z-index: 2; }

/* ---------- ROW 1 ---------- */

/* Sb — metallic GOLD (1635 Capital Partners brand) */
#critical .metals.row1 .metal-card:nth-child(1) {
  background: linear-gradient(160deg,
    #F4D06B 0%, #E2B14A 28%, #C8902C 55%, #B27817 78%, #8E5A06 100%);
  color: #2C1F06;
}
#critical .metals.row1 .metal-card:nth-child(1) .sym,
#critical .metals.row1 .metal-card:nth-child(1) .name { color: #2C1F06; text-shadow: 0 1px 0 rgba(255,245,200,.45); }
#critical .metals.row1 .metal-card:nth-child(1) .ir { color: rgba(44,31,6,.78); }
#critical .metals.row1 .metal-card:nth-child(1) .desc { color: rgba(44,31,6,.82); }

/* Ti — TITANIUM as METALLIC SAPPHIRE BLUE */
#critical .metals.row1 .metal-card:nth-child(2) {
  background: linear-gradient(160deg,
    #5B9BFF 0%, #2D7FF9 26%, #1B5DD1 55%, #0F3FA0 80%, #062770 100%);
  color: #F4F6F9;
}
#critical .metals.row1 .metal-card:nth-child(2) .sym,
#critical .metals.row1 .metal-card:nth-child(2) .name { color: #F4F6F9; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
#critical .metals.row1 .metal-card:nth-child(2) .ir { color: rgba(244,246,249,.82); }
#critical .metals.row1 .metal-card:nth-child(2) .desc { color: rgba(244,246,249,.88); }

/* V — VANADIUM as BRIGHT METALLIC RUBY */
#critical .metals.row1 .metal-card:nth-child(3) {
  background:
    radial-gradient(circle at 22% 16%, rgba(255,170,195,.28) 0%, rgba(255,170,195,0) 26%),
    linear-gradient(160deg,
      #FF4D79 0%,
      #E0115F 18%,
      #C20E35 42%,
      #8E0B28 68%,
      #5B071A 86%,
      #32030E 100%);
  color: #FFF4F7;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 28px rgba(224,17,95,.22),
    0 0 24px rgba(255,77,121,.14);
}

#critical .metals.row1 .metal-card:nth-child(3) .sym,
#critical .metals.row1 .metal-card:nth-child(3) .name {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

#critical .metals.row1 .metal-card:nth-child(3) .ir {
  color: rgba(255,244,247,.94);
}

#critical .metals.row1 .metal-card:nth-child(3) .desc {
  color: rgba(255,244,247,.96);
}

/* Cu — COPPER (real coppery metallic) */
#critical .metals.row1 .metal-card:nth-child(4) {
  background: linear-gradient(160deg,
    #E8A47C 0%, #D87B4A 22%, #B85A2B 48%, #8C3F1E 75%, #5B2811 100%);
  color: #FFEFE3;
}
#critical .metals.row1 .metal-card:nth-child(4) .sym,
#critical .metals.row1 .metal-card:nth-child(4) .name { color: #FFF1E5; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#critical .metals.row1 .metal-card:nth-child(4) .ir { color: rgba(255,231,210,.82); }
#critical .metals.row1 .metal-card:nth-child(4) .desc { color: rgba(255,231,210,.88); }

/* ---------- ROW 2 ---------- */

/* Ga — GALLIUM as BRIGHTER METALLIC PINK SILVER (Option E) */
#critical .metals.row2 .metal-card:nth-child(1) {
  background: linear-gradient(160deg,
    #FFE9F0 0%,
    #F7BDD1 20%,
    #EDA6C4 42%,
    #C97E9E 64%,
    #8F5C72 82%,
    #5B3E4C 100%);
  color: #1F1418;
}

#critical .metals.row2 .metal-card:nth-child(1) .sym,
#critical .metals.row2 .metal-card:nth-child(1) .name {
  color: #1F1418;
  text-shadow: 0 1px 0 rgba(255, 244, 248, 0.72);
}

#critical .metals.row2 .metal-card:nth-child(1) .ir {
  color: rgba(31, 20, 24, 0.92);
}

#critical .metals.row2 .metal-card:nth-child(1) .desc {
  color: rgba(31, 20, 24, 0.95);
}

/* Mn — MANGANESE as METALLIC GREEN */
#critical .metals.row2 .metal-card:nth-child(2) {
  background: linear-gradient(160deg,
    #6FE48C 0%, #3DD964 26%, #1FB849 55%, #0E7F30 80%, #064B1B 100%);
  color: #06200F;
}
#critical .metals.row2 .metal-card:nth-child(2) .sym,
#critical .metals.row2 .metal-card:nth-child(2) .name { color: #06200F; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
#critical .metals.row2 .metal-card:nth-child(2) .ir { color: rgba(6,32,15,.78); }
#critical .metals.row2 .metal-card:nth-child(2) .desc { color: rgba(6,32,15,.86); }

/* Mo — MOLYBDENUM bright polished silver */
#critical .metals.row2 .metal-card:nth-child(3) {
  background: linear-gradient(160deg,
    #EEF1F4 0%, #CFD5DC 25%, #A5ADB6 55%, #7A828D 80%, #525964 100%);
  color: #16222B;
}
#critical .metals.row2 .metal-card:nth-child(3) .sym,
#critical .metals.row2 .metal-card:nth-child(3) .name { color: #0F1A22; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
#critical .metals.row2 .metal-card:nth-child(3) .ir { color: rgba(15,26,34,.72); }
#critical .metals.row2 .metal-card:nth-child(3) .desc { color: rgba(15,26,34,.82); }

/* Pd — PALLADIUM as metallic ROYAL BLUE per 43-101 brand */
#critical .metals.row2 .metal-card:nth-child(4) {
  background: linear-gradient(160deg,
    #2D4870 0%, #1A3357 26%, #0C2540 56%, #061A33 80%, #02101F 100%);
  color: #F4F6F9;
}
#critical .metals.row2 .metal-card:nth-child(4) .sym,
#critical .metals.row2 .metal-card:nth-child(4) .name { color: #F4F6F9; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
#critical .metals.row2 .metal-card:nth-child(4) .ir { color: rgba(244,246,249,.78); }
#critical .metals.row2 .metal-card:nth-child(4) .desc { color: rgba(244,246,249,.86); }

/* ============================================================
   PRECIOUS METALS — Au gold, Ag silver, Pt platinum metallic
   Apply matching treatment to the spot tiles for cohesion.
   ============================================================ */

#precious .spot {
  position: relative;
  overflow: hidden;
}
#precious .spot::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,.10) 68%,
    rgba(255,255,255,0) 78%);
  pointer-events:none; z-index:1;
}
#precious .spot::after {
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.04) 0 1px,
      transparent 1px 4px);
  pointer-events:none; z-index:1;
  mix-blend-mode: overlay;
}
#precious .spot > * { position: relative; z-index: 2; }

/* Au — METALLIC GOLD */
#precious .spot:nth-child(1) {
  background: linear-gradient(160deg,
    #F4D06B 0%, #E2B14A 28%, #C8902C 55%, #9C6B14 85%, #6B4708 100%);
  border-color: rgba(255,200,61,.55);
}
#precious .spot:nth-child(1) .spot-sym { color: #FFF6D6; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
#precious .spot:nth-child(1) .spot-name { color: rgba(44,31,6,.78); }
#precious .spot:nth-child(1) .spot-price { color: #2C1F06; text-shadow: 0 1px 0 rgba(255,245,200,.45); }
#precious .spot:nth-child(1) .spot-price small { color: #6B4708; }
#precious .spot:nth-child(1) .spot-note { color: rgba(44,31,6,.78); }

/* Ag — METALLIC SILVER */
#precious .spot:nth-child(2) {
  background: linear-gradient(160deg,
    #ECEEF1 0%, #C7CCD3 28%, #9CA4AE 55%, #6E7682 82%, #495160 100%);
  border-color: rgba(220,228,235,.45);
}
#precious .spot:nth-child(2) .spot-sym { color: #FAFBFC; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
#precious .spot:nth-child(2) .spot-name { color: rgba(15,26,34,.7); }
#precious .spot:nth-child(2) .spot-price { color: #0F1A22; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
#precious .spot:nth-child(2) .spot-price small { color: #495160; }
#precious .spot:nth-child(2) .spot-note { color: rgba(15,26,34,.74); }

/* Pt — METALLIC PLATINUM with a HINT OF SKY BLUE */
#precious .spot:nth-child(3) {
  background: linear-gradient(160deg,
    #EAF3FA 0%, #C6D8E8 26%, #94B0CB 55%, #6385A8 80%, #3F5C82 100%);
  border-color: rgba(140,180,235,.65);
}
#precious .spot:nth-child(3) .spot-sym { color: #FAFCFC; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
#precious .spot:nth-child(3) .spot-name { color: rgba(15,26,34,.7); }
#precious .spot:nth-child(3) .spot-price { color: #0F1A22; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
#precious .spot:nth-child(3) .spot-price small { color: #3B4D58; }
#precious .spot:nth-child(3) .spot-note { color: rgba(15,26,34,.74); }

/* ============================================================
   TEXT CONTRAST BOOST — applies to all 8 mineral tiles
   Bolder weights, higher opacity, stronger shadow for legibility
   against the brushed metallic backgrounds.
   ============================================================ */

#critical .metal-card .name {
  font-weight: 700;        /* was 600 */
  letter-spacing: -.005em;
  font-size: 22px;          /* up from 20px */
}
#critical .metal-card .ir {
  font-weight: 800;         /* was 700 */
  letter-spacing: .16em;    /* slightly looser for label punch */
  font-size: 11.5px;
  opacity: 1;               /* trust each tile's per-color override below */
}
#critical .metal-card .desc {
  font-weight: 500;         /* was 400 implied */
  font-size: 14px;          /* up from 13 */
  line-height: 1.55;
}

/* Per-tile contrast lift — stronger text shadows for legibility */

/* Sb gold tile (dark text on warm metal) */
#critical .metals.row1 .metal-card:nth-child(1) .sym,
#critical .metals.row1 .metal-card:nth-child(1) .name { text-shadow: 0 1px 0 rgba(255,245,200,.7), 0 -1px 0 rgba(0,0,0,.05); }
#critical .metals.row1 .metal-card:nth-child(1) .ir,
#critical .metals.row1 .metal-card:nth-child(1) .desc { color: #1A0F00; }

/* Ti sapphire (light text on deep blue) */
#critical .metals.row1 .metal-card:nth-child(2) .sym,
#critical .metals.row1 .metal-card:nth-child(2) .name { color: #FFFFFF; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
#critical .metals.row1 .metal-card:nth-child(2) .ir,
#critical .metals.row1 .metal-card:nth-child(2) .desc { color: rgba(255,255,255,.96); }

/* V ruby burgundy (light text on deep red) */
#critical .metals.row1 .metal-card:nth-child(3) .sym,
#critical .metals.row1 .metal-card:nth-child(3) .name { color: #FFFFFF; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
#critical .metals.row1 .metal-card:nth-child(3) .ir,
#critical .metals.row1 .metal-card:nth-child(3) .desc { color: rgba(255,255,255,.96); }

/* Cu copper (light text on warm metal) */
#critical .metals.row1 .metal-card:nth-child(4) .sym,
#critical .metals.row1 .metal-card:nth-child(4) .name { color: #FFFFFF; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
#critical .metals.row1 .metal-card:nth-child(4) .ir,
#critical .metals.row1 .metal-card:nth-child(4) .desc { color: rgba(255,247,240,.97); }

/* Ga pink-silver (dark text on light metal) */
#critical .metals.row2 .metal-card:nth-child(1) .sym,
#critical .metals.row2 .metal-card:nth-child(1) .name { color: #14080C; text-shadow: 0 1px 0 rgba(255,240,245,.7); }
#critical .metals.row2 .metal-card:nth-child(1) .ir,
#critical .metals.row2 .metal-card:nth-child(1) .desc { color: #14080C; }

/* Mn green (dark text on green metal) */
#critical .metals.row2 .metal-card:nth-child(2) .sym,
#critical .metals.row2 .metal-card:nth-child(2) .name { color: #04140A; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
#critical .metals.row2 .metal-card:nth-child(2) .ir,
#critical .metals.row2 .metal-card:nth-child(2) .desc { color: #04140A; }

/* Mo silver (dark text on light metal) */
#critical .metals.row2 .metal-card:nth-child(3) .sym,
#critical .metals.row2 .metal-card:nth-child(3) .name { color: #06141C; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
#critical .metals.row2 .metal-card:nth-child(3) .ir,
#critical .metals.row2 .metal-card:nth-child(3) .desc { color: #06141C; }

/* Pd royal blue (light text on dark blue) */
#critical .metals.row2 .metal-card:nth-child(4) .sym,
#critical .metals.row2 .metal-card:nth-child(4) .name { color: #FFFFFF; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
#critical .metals.row2 .metal-card:nth-child(4) .ir,
#critical .metals.row2 .metal-card:nth-child(4) .desc { color: rgba(255,255,255,.96); }

/* ============================================================
   RELIANCE BAR CHART — color overrides + mobile horizontal scroll
   Trust-color palette per user spec:
     1 Titanium → Blue
     2 Manganese → Black
     3 Gallium → Red (China-dominated)
     4 Antimony → Green
     5 Platinum → Gold
     6 Palladium → Silver
   ============================================================ */

/* Override the prior v2-overrides.css rainbow colors */
.reliance .bar-row:nth-child(1) .bar-fill { background: #305CDE; color: #FFFFFF; }       /* Ti → Blue */
.reliance .bar-row:nth-child(2) .bar-fill { background: #1A1F26; color: #FFFFFF; }       /* Mn → Black */
.reliance .bar-row:nth-child(3) .bar-fill { background: #E63946; color: #FFFFFF; }       /* Ga → Red (China) */
.reliance .bar-row:nth-child(4) .bar-fill { background: #3DD964; color: #06200F; }       /* Sb → Green */
.reliance .bar-row:nth-child(5) .bar-fill { background: #F4C14B; color: #2C1F06; }       /* Pt → Gold */
.reliance .bar-row:nth-child(6) .bar-fill { background: #C5CDD5; color: #0F1A22; }       /* Pd → Silver */

/* Make the desc colors readable against their bar */
.reliance .bar-row:nth-child(1) .bar-fill .desc,
.reliance .bar-row:nth-child(2) .bar-fill .desc,
.reliance .bar-row:nth-child(3) .bar-fill .desc { color: rgba(255,255,255,.88); }
.reliance .bar-row:nth-child(4) .bar-fill .desc { color: rgba(6,32,15,.78); }
.reliance .bar-row:nth-child(5) .bar-fill .desc { color: rgba(44,31,6,.78); }
.reliance .bar-row:nth-child(6) .bar-fill .desc { color: rgba(15,26,34,.78); }

/* ----------------------------------------------------------
   MOBILE — labels stay fixed on the left; each bar track
   scrolls horizontally so descriptions are fully readable.
   ---------------------------------------------------------- */
@media (max-width: 880px) {
  .reliance .bar-row {
    grid-template-columns: 120px 1fr;
    gap: 10px;
    font-size: 13px;
  }
  .reliance .bar-label { font-size: 13px; }
  /* Each bar track gets its own horizontal scroll */
  .reliance .bar-track {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: 28px;
    /* fade hint on the right edge */
    mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  }
  .reliance .bar-track::-webkit-scrollbar { display: none; }
  /* Force the bar-fill to take a fixed inner width so descriptions fit */
  .reliance .bar-fill {
    height: 28px;
    min-width: 460px;          /* room for full description */
    padding: 0 12px;
  }
  /* For bars with less than 100% width, override min-width because the fill
     itself is sized by width:NN% — use the inline width as a min instead */
  .reliance .bar-row:nth-child(1) .bar-fill,
  .reliance .bar-row:nth-child(2) .bar-fill,
  .reliance .bar-row:nth-child(3) .bar-fill { width: 460px !important; }
  .reliance .bar-row:nth-child(4) .bar-fill { width: 419px !important; }   /* 91% of 460 */
  .reliance .bar-row:nth-child(5) .bar-fill { width: 391px !important; }   /* 85% of 460 */
  .reliance .bar-row:nth-child(6) .bar-fill { width: 166px !important; }   /* 36% of 460 */
  .reliance .bar-fill .desc {
    max-width: none;
    white-space: nowrap;
    text-overflow: clip;
    overflow: visible;
  }
  .reliance .src { padding-top: 4px; }
}

/* Scroll-hint label placed before the source line, mobile only */
@media (max-width: 880px) {
  .reliance .src::before {
    content: 'Swipe \2192  to read full descriptions';
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 8px;
  }
}

/* ============================================================
   BAR CHART — text color overrides
   Top 3 (Ti / Mn / Ga) keep white text on their dark fills.
   Bottom 3 (Sb green / Pt gold / Pd silver) need FULLY BLACK text
   for both the percent number and the description.
   ============================================================ */

/* TOP 3 — white text (explicit so nothing else overrides) */
.reliance .bar-row:nth-child(1) .bar-fill .pct,
.reliance .bar-row:nth-child(1) .bar-fill .desc,
.reliance .bar-row:nth-child(2) .bar-fill .pct,
.reliance .bar-row:nth-child(2) .bar-fill .desc,
.reliance .bar-row:nth-child(3) .bar-fill .pct,
.reliance .bar-row:nth-child(3) .bar-fill .desc {
  color: #FFFFFF !important;
  font-weight: 700;
}

/* BOTTOM 3 — fully black text (percent + description) */
.reliance .bar-row:nth-child(4) .bar-fill .pct,
.reliance .bar-row:nth-child(4) .bar-fill .desc,
.reliance .bar-row:nth-child(5) .bar-fill .pct,
.reliance .bar-row:nth-child(5) .bar-fill .desc,
.reliance .bar-row:nth-child(6) .bar-fill .pct,
.reliance .bar-row:nth-child(6) .bar-fill .desc {
  color: #000000 !important;
  font-weight: 700;
}