.role-switcher { display: flex; gap: .5rem; margin: 1.2rem 0 0; padding: .35rem; width: fit-content; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.role-switcher a { padding: .4rem .8rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 800; }
.role-switcher a.active { background: var(--green); color: #fff; }
.role-page-hero { margin: 1rem 0 2rem; padding: clamp(2rem, 6vw, 5rem); border-radius: 28px; }
.role-page-hero.resident { background: #e4f5ea; }
.role-page-hero.chief { background: #fff2cc; }
.role-page-hero.candidate { background: #e8ecfa; }
.role-page-hero h1 { max-width: 850px; margin: .15em 0; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.02; letter-spacing: -.045em; }
.role-page-hero > p:last-child { max-width: 760px; font-size: 1.1rem; }
.role-tool { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.5fr); gap: 1.5rem; align-items: start; margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.role-tool h2 { margin: 0; }
.role-tool .searchbox { margin: 0; }
.role-tool .actions { grid-column: 2; margin: 0; }
.role-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 2rem; }
.role-data-grid article { padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.role-data-grid article > span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mint); color: var(--green); font-weight: 900; }
.role-data-grid h3 { margin: .8rem 0 .3rem; }
.role-data-grid p { margin: 0; color: var(--muted); }
.role-boundary { margin: 2rem 0; padding: 1.3rem; border-left: 5px solid var(--gold); background: #fff6dc; }
.role-boundary.important { border-color: #5268a7; background: #eef0fa; }
.role-boundary b { font-size: 1.15rem; }
.role-boundary p { margin-bottom: 0; }
.role-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.role-checklist > div { padding: 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.role-checklist h2 { margin-top: 0; }
.knowledge-section, .tool-section, .official-links { margin: 3.5rem 0; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.knowledge-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.knowledge-card h3 { margin: 0 0 .35rem; }
.knowledge-card p { margin: 0; color: var(--muted); }
.tool-intro { max-width: 760px; color: var(--muted); }
.local-tool { margin: 1.2rem 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.local-tool h3 { margin-top: 0; }
.tool-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.tool-fields label { display: flex; flex-direction: column; gap: .3rem; color: var(--ink); font-weight: 800; }
.tool-fields .wide { grid-column: 1 / -1; }
.tool-fields input, .tool-fields select, .tool-fields textarea { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid #aab7ac; border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-weight: 400; }
.tool-fields textarea { min-height: 100px; resize: vertical; }
.tool-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.quiet-button { min-height: 46px; padding: .65rem 1rem; border: 1px solid var(--green); border-radius: 999px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-weight: 800; }
.tool-output { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: #f3f6f3; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-limit { color: var(--muted); font-size: .88rem; }
.source-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: 0; list-style: none; }
.source-list a { display: block; min-height: 100%; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 800; }
.source-list small { display: block; color: var(--muted); font-weight: 400; }
@media (max-width: 760px) {
  .role-switcher { width: 100%; }
  .role-switcher a { flex: 1; text-align: center; }
  .role-tool, .role-data-grid, .role-checklist, .knowledge-grid, .tool-fields, .source-list { grid-template-columns: 1fr; }
  .role-tool .actions { grid-column: 1; }
  .tool-fields .wide { grid-column: 1; }
}