/* Shared Titan template supplies page width, headings and card styling. */
html:not(.app-ready)[data-initial-view="recruits"] #recruits-view { display: block; }
.recruits-page .about-story-section > section { margin-top: 2rem; }
.recruits-page section > h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.recruits-page .about-story-section > p:not(.about-story-lead),
.recruits-page section > p:not(.about-story-close) { color: var(--muted); font: 1rem/1.68 system-ui, sans-serif; }
.recruits-page .recruit-job-role { margin-bottom: .7rem; color: var(--gold); font-size: .85rem; }
.recruits-page code { overflow-wrap: anywhere; }
.recruit-race-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.recruit-race-grid h3 { font-size: 1rem; }
.recruit-job { min-width: 0; }
@media (max-width: 1100px) { .recruit-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .recruit-race-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .recruit-job-grid { grid-template-columns: 1fr; } .recruit-race-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Four Recruit pools retain the established cards with matching addon colors. */
.recruit-pool-grid .about-story-card { border: 1px solid var(--recruit-pool-border); background: var(--recruit-pool-bg); color: var(--recruit-pool-text, var(--text)); }
.recruit-pool-grid .about-story-card h3, .recruit-pool-grid .about-story-card p { color: inherit; }
.recruit-pool-tank { --recruit-pool-bg: #263f62; --recruit-pool-border: #507aa8; --recruit-pool-text: #f5f1e8; }
.recruit-pool-healer { --recruit-pool-bg: #23572b; --recruit-pool-border: #64a36b; --recruit-pool-text: #f5f1e8; }
.recruit-pool-support { --recruit-pool-bg: #c2a533; --recruit-pool-border: #e0c25d; --recruit-pool-text: #211c0d; }
.recruit-pool-dps { --recruit-pool-bg: #612625; --recruit-pool-border: #ad5b55; --recruit-pool-text: #f5f1e8; }

.recruit-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .recruit-pool-grid { grid-template-columns: 1fr; } }