/* ════════════════════════════════════════════════════════════════════
   FILAMENT MATERIAL GUIDE
   Reskinned to the shared MakerX utility look (dark + green-neon).
   Data-bearing colours are kept: per-material tier accent, difficulty
   tags (easy/medium/hard), temp warmth (cool/warm/hot), and property bars.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens (shared MakerX palette + retained data colours) ── */
:root {
  --bg:       #0b0e14;
  --surface:  rgba(26,74,26,.28);
  --surface2: rgba(26,74,26,.45);
  --border:   rgba(62,198,62,.14);
  --accent:   var(--green-neon);
  --accent3:  #7fff6b;
  --hot:  #ff3b3b;
  --warm: #ff9f43;
  --cool: #74b9ff;
}

/* ── Hero (matches the other utility pages) ── */
.tool-hero { padding: 90px 48px 28px; max-width: 1200px; margin: 0 auto; position: relative; overflow: hidden; }
.tool-hero h1 { font-family: 'Rajdhani', sans-serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; color: var(--white); line-height: 1.1; margin-bottom: 16px; }
.tool-hero h1 em { font-style: normal; color: var(--green-neon); }
.tool-hero p { font-family: 'Exo 2', sans-serif; font-size: 1rem; color: var(--grey); max-width: 660px; line-height: 1.75; }
.tool-hero-glow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse at 50% 0%, rgba(62,198,62,.13) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 820px) { .tool-hero { padding: 70px 20px 22px; } }

/* ── Layout ── */
.app { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 8px 48px 80px; }
@media (max-width: 820px) { .app { padding: 8px 20px 60px; } }

/* ── Search + difficulty filter ── */
.guide-top { display: flex; gap: 10px; margin-bottom: 22px; align-items: center; flex-wrap: wrap; }
.search-box {
  flex: 1; min-width: 180px;
  background: var(--bg); border: 1px solid var(--border); color: var(--white);
  border-radius: 6px; padding: 10px 14px;
  font-family: 'Exo 2', sans-serif; font-size: .88rem; outline: none; transition: border-color .15s, box-shadow .15s;
}
.search-box::placeholder { color: var(--grey); }
.search-box:focus { border-color: var(--green-neon); box-shadow: 0 0 0 2px rgba(62,198,62,.12); }
.filter-btn {
  padding: 9px 18px; background: transparent; border: 1px solid var(--border); color: var(--grey);
  font-family: 'Rajdhani', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; transition: all .15s; border-radius: 6px;
}
.filter-btn:hover { border-color: rgba(255,255,255,.2); color: var(--white); }
.filter-btn.active { border-color: var(--green-neon); color: var(--green-neon); background: rgba(30,80,30,.92); }

/* ── Material cards (translucent at rest, green fill on hover) ── */
.mat-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.mat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; position: relative; transition: background .2s, border-color .2s, transform .2s;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mat-card:hover { background: rgba(30,80,30,.92); border-color: rgba(62,198,62,.40); transform: translateY(-2px); }

/* Left tier accent (data-bearing — kept) */
.mat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.mat-card.pla::before   { background: var(--cool); }
.mat-card.abs::before   { background: var(--warm); }
.mat-card.petg::before  { background: var(--accent3); }
.mat-card.tpu::before   { background: #a29bfe; }
.mat-card.nylon::before { background: var(--green-neon); }
.mat-card.asa::before   { background: var(--hot); }

.mat-header {
  padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.mat-name { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; color: var(--white); }
.mat-tag {
  font-family: 'Rajdhani', sans-serif; font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  padding: 3px 9px; border-radius: 4px; text-transform: uppercase;
}
.easy   { background: rgba(116,185,255,.15); color: var(--cool); border: 1px solid var(--cool); }
.medium { background: rgba(255,159,67,.15);  color: var(--warm); border: 1px solid var(--warm); }
.hard   { background: rgba(255,59,59,.15);   color: var(--hot);  border: 1px solid var(--hot); }

.mat-body { padding: 16px 16px 16px 20px; }

.mat-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.spec-label { font-family: 'Rajdhani', sans-serif; font-size: .64rem; color: var(--grey2); letter-spacing: .16em; text-transform: uppercase; }
.spec-val   { font-family: 'Rajdhani', sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--white); margin-top: 3px; }
.spec-val.hot  { color: var(--hot); }
.spec-val.warm { color: var(--warm); }
.spec-val.cool { color: var(--cool); }

.mat-bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row  { display: flex; align-items: center; gap: 10px; }
.bar-name { font-family: 'Rajdhani', sans-serif; font-size: .68rem; color: var(--grey2); width: 70px; letter-spacing: .08em; text-transform: uppercase; }
.bar-track { flex: 1; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.bar-pct   { font-family: 'Rajdhani', sans-serif; font-size: .72rem; color: var(--grey2); width: 30px; text-align: right; }

.mat-tips {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-family: 'Exo 2', sans-serif; font-size: .82rem; color: var(--grey); line-height: 1.6;
}
.mat-tips strong { color: var(--green-neon); font-weight: 600; }

.empty-state {
  grid-column: 1/-1; padding: 60px; text-align: center;
  font-family: 'Rajdhani', sans-serif; color: var(--grey2); letter-spacing: .1em;
  border: 1px dashed var(--border); border-radius: 12px; font-size: .9rem;
}