/* === Generated Page Components === */
/* Auto-generated by scripts/build.js — do not edit manually. */
/* All colors come from shared.css CSS variables — respects dark mode. */

/* Pal Entity Page */
.pal-hero { display:flex; gap:2rem; padding:2rem 1.5rem; max-width:1100px; margin:0 auto; align-items:center; flex-wrap:wrap; }
.pal-hero-image img { max-width:300px; height:auto; border-radius:12px; background:var(--muted-bg); }
.pal-hero-info { flex:1; min-width:280px; }
.pal-number { color:var(--text3); font-size:.85rem; }
.pal-hero-info h1 { margin:.25rem 0; font-size:2rem; }
.pal-hero-info h1 small { font-size:1rem; color:var(--text2); font-weight:400; }
.pal-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0; }
.tag { display:inline-block; padding:.25rem .65rem; border-radius:20px; font-size:.8rem; font-weight:600; }
.tag-element { background:var(--blue-l); color:var(--blue); }
.tag-role { background:var(--green-l); color:var(--green); }
.tag-bestfor { background:var(--gold-l); color:var(--gold); text-decoration:none; }
.rarity-badge { padding:.25rem .75rem; border-radius:20px; font-size:.8rem; font-weight:700; background:var(--gold-l); color:var(--gold); }
.pal-bestfor, .pal-stage { margin:.5rem 0; color:var(--text2); font-size:.9rem; }

/* Quick Facts */
.quick-facts, .stats-section, .work-section, .skills-section, .how-to-get, .breeding-section, .drops-section, .best-uses, .related-tools {
  max-width:900px; margin:2rem auto; padding:1.5rem; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border);
}
.facts-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; }
.facts-grid div { padding:.5rem 0; }
.facts-grid dt { font-size:.75rem; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; }
.facts-grid dd { font-size:1rem; font-weight:600; margin:0; }

/* Stat Bars */
.stat-row { display:flex; align-items:center; gap:.75rem; margin:.5rem 0; }
.stat-label { width:80px; font-size:.85rem; color:var(--text2); }
.stat-bar-track { flex:1; height:10px; background:var(--muted-bg); border-radius:5px; overflow:hidden; }
.stat-bar-fill { height:100%; background:var(--blue); border-radius:5px; transition:width .3s; }
.stat-value { width:40px; text-align:right; font-weight:600; font-size:.9rem; }

/* Work Suitability */
.work-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.75rem; }
.work-item { display:flex; align-items:center; gap:.5rem; }
.work-label { width:100px; font-size:.85rem; }
.work-bars { display:flex; gap:3px; }
.work-bar { width:20px; height:8px; background:var(--muted-bg); border-radius:2px; }
.work-bar.filled { background:var(--green); }
.work-level { font-weight:600; font-size:.85rem; margin-left:auto; }

/* Tables */
.skills-table, .breeding-table, .drops-table, .ranking-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.skills-table th, .breeding-table th, .drops-table th, .ranking-table th {
  text-align:left; padding:.5rem .75rem; background:var(--thead-bg); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
}
.skills-table td, .breeding-table td, .drops-table td, .ranking-table td { padding:.5rem .75rem; border-bottom:1px solid var(--border); }

/* Partner Skill Card */
.partner-skill-card { background:var(--purple-l); padding:1rem 1.25rem; border-radius:var(--radius); margin-bottom:1.5rem; }
.partner-skill-card h3 { margin:0 0 .5rem; color:var(--purple); }

/* Best Uses */
.use-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.use-card { padding:1rem; border:1px solid var(--border); border-radius:var(--radius); }
.use-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.use-header h3 { margin:0; font-size:1.05rem; }
.use-header h3 a { color:var(--text); text-decoration:none; }
.use-score { font-size:1.25rem; font-weight:700; color:var(--green); }
.use-reasons { margin:.5rem 0 0; padding-left:1.25rem; font-size:.85rem; color:var(--text2); }

/* Tool Cards */
.tool-links { display:flex; gap:1rem; flex-wrap:wrap; }
.tool-card { display:flex; flex-direction:column; gap:.35rem; padding:1.25rem; border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text); flex:1; min-width:220px; transition:border-color .2s; }
.tool-card:hover { border-color:var(--green); }
.tool-card .tool-icon { font-size:1.5rem; }
.tool-card strong { font-size:1.05rem; }
.tool-card span:last-child { font-size:.85rem; color:var(--text2); }

/* Decision Page */
.decision-hero { max-width:900px; margin:2rem auto; padding:1.5rem; }
.decision-hero h1 { font-size:2rem; }
.decision-hero .hero-desc { color:var(--text2); font-size:1.05rem; line-height:1.7; }
.ranking-methodology { max-width:900px; margin:2rem auto; padding:1.5rem; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); }
.ranking-table-section { max-width:1100px; margin:2rem auto; padding:1.5rem; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); }
.rank-cell { font-size:1.2rem; }
.lv-badge { font-size:.75rem; color:var(--text3); }
.score-badge { font-weight:700; padding:.2rem .5rem; border-radius:4px; }
.score-badge.s-tier { background:var(--gold-l); color:var(--gold); }
.score-badge.a-tier { background:var(--green-l); color:var(--green); }

/* Detail Cards */
.detail-cards { max-width:900px; margin:2rem auto; }
.pal-detail-card { padding:1.5rem; margin-bottom:1.5rem; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); }
.card-header { display:flex; align-items:center; gap:1rem; }
.card-rank { font-size:1.5rem; font-weight:700; color:var(--green); min-width:40px; }
.card-header img { border-radius:8px; background:var(--muted-bg); }
.card-header h3 { margin:0; }
.card-header h3 a { color:var(--text); text-decoration:none; }
.card-score { color:var(--text2); font-size:.85rem; }
.card-body { margin-top:1rem; }
.card-stats { display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:.75rem; font-size:.85rem; }
.card-pros { margin:.75rem 0; }
.card-pros h4 { margin:0 0 .5rem; font-size:.9rem; }
.card-pros ul { margin:0; padding-left:1.25rem; font-size:.85rem; color:var(--text2); }
.card-availability { font-size:.85rem; margin:.5rem 0; }
.card-cta { display:inline-block; margin-top:.75rem; padding:.4rem 1rem; background:var(--green-l); color:var(--green); border-radius:var(--radius-sm); text-decoration:none; font-weight:600; font-size:.85rem; }

/* Breadcrumb */
.breadcrumb { max-width:1100px; margin:1rem auto; padding:0 1.5rem; }
.breadcrumb ol { list-style:none; display:flex; gap:.5rem; font-size:.85rem; color:var(--text3); }
.breadcrumb a { color:var(--text2); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Related Decisions */
.related-decisions, .related-tools { max-width:900px; margin:2rem auto; padding:1.5rem; }
.decision-links { display:flex; gap:1rem; flex-wrap:wrap; }
.decision-link-card { padding:.75rem 1.25rem; border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text); font-weight:600; }
.decision-link-card:hover { border-color:var(--green); }

/* Section Intro */
.section-intro { color:var(--text2); font-size:.9rem; margin-bottom:1rem; }

/* Responsive */
@media (max-width:768px) {
  .pal-hero { flex-direction:column; text-align:center; }
  .pal-hero-image img { max-width:200px; }
  .pal-hero-info h1 { font-size:1.5rem; }
  .facts-grid { grid-template-columns:repeat(2, 1fr); }
  .work-grid { grid-template-columns:1fr; }
  .tool-links, .decision-links { flex-direction:column; }
}