:root{
  --ink:#16222b; --ink-soft:#4a5c69; --ink-faint:#71848f;
  --accent:#14425f; --accent-soft:#e8f0f4; --accent-line:#b9cedb;
  --paper:#ffffff; --ground:#f6f8f9; --line:#dde4e8;
  --warn-bg:#fdf6e8; --warn-line:#e4cd97; --warn-ink:#7a5a12;
  --max:72rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--accent)}
a:hover{color:#0b2b40}
h1,h2,h3{line-height:1.25; color:var(--ink); margin:0 0 .5em}
h1{font-size:2rem; letter-spacing:-.01em}
h2{font-size:1.3rem; margin-top:2.4rem; padding-bottom:.4rem; border-bottom:1px solid var(--line)}
h3{font-size:1.05rem; margin-top:1.8rem}
p,ul,ol{margin:0 0 1.1rem}
ul,ol{padding-left:1.3rem}
li{margin-bottom:.35rem}
small{color:var(--ink-faint)}

/* ---------- shell ---------- */
.masthead{background:var(--accent); color:#fff}
.masthead__inner{max-width:var(--max); margin:0 auto; padding:1.1rem 1.5rem}
.masthead__title{display:block; color:#fff; text-decoration:none; font-size:1.05rem; font-weight:600; letter-spacing:.01em}
.masthead__sub{display:block; color:#b9d2e2; font-size:.82rem; margin-top:.15rem}
.nav{background:#0e3249}
.nav__inner{max-width:var(--max); margin:0 auto; padding:0 1.5rem; display:flex; flex-wrap:wrap; gap:.25rem}
.nav a{color:#cfe0ea; text-decoration:none; padding:.7rem .9rem; font-size:.9rem; border-bottom:3px solid transparent}
.nav a:hover{color:#fff; background:rgba(255,255,255,.07)}
.nav a[aria-current]{color:#fff; border-bottom-color:#7fb5d4; font-weight:600}

.wrap{max-width:var(--max); margin:0 auto; padding:2rem 1.5rem 4rem}
.layout{display:grid; grid-template-columns:15rem 1fr; gap:2.5rem; align-items:start}
@media (max-width:48rem){ .layout{grid-template-columns:1fr; gap:1.5rem} }

.crumb{font-size:.82rem; color:var(--ink-faint); margin:0 0 1rem}
.crumb a{color:var(--ink-soft)}

/* ---------- side nav ---------- */
.side{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:1rem 0; position:sticky; top:1rem}
.side h2{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
  margin:0 0 .5rem; padding:0 1.1rem; border:0}
.side a{display:block; padding:.45rem 1.1rem; font-size:.9rem; text-decoration:none; color:var(--ink-soft); border-left:3px solid transparent}
.side a:hover{background:var(--accent-soft); color:var(--accent)}
.side a[aria-current]{border-left-color:var(--accent); color:var(--accent); font-weight:600; background:var(--accent-soft)}

/* ---------- content ---------- */
.panel{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:2rem 2.2rem}
@media (max-width:48rem){ .panel{padding:1.4rem} .wrap{padding:1.25rem 1rem 3rem} h1{font-size:1.55rem} }
.lede{font-size:1.1rem; color:var(--ink-soft); margin-bottom:1.6rem}

.placeholder{
  border:1px dashed var(--accent-line); background:var(--accent-soft);
  border-radius:4px; padding:1rem 1.2rem; margin:0 0 1.2rem; color:var(--ink-soft); font-size:.94rem;
}
.placeholder > :last-child{margin-bottom:0}
.tag{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--accent); background:#fff; border:1px solid var(--accent-line);
  border-radius:2px; padding:.1rem .4rem; margin-right:.5rem; vertical-align:.08em;
}
.note{background:var(--warn-bg); border-left:3px solid var(--warn-line); color:var(--warn-ink);
  padding:.9rem 1.1rem; border-radius:0 3px 3px 0; margin:0 0 1.2rem; font-size:.92rem}
.note > :last-child{margin-bottom:0}
.note strong{color:#5e4409}

.linklist{list-style:none; padding:0; margin:0 0 1.2rem}
.linklist li{border-bottom:1px solid var(--line); padding:.6rem 0; margin:0}
.linklist li:last-child{border-bottom:0}
.linklist .src{display:block; font-size:.8rem; color:var(--ink-faint)}

/* ---------- home ---------- */
.hero{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:2.4rem 2.2rem; margin-bottom:1.5rem}
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.2rem; margin-bottom:1.5rem}
.choice{display:block; background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--accent);
  border-radius:4px; padding:1.5rem 1.6rem; text-decoration:none; color:inherit}
.choice:hover{border-color:var(--accent-line); border-top-color:var(--accent); background:#fcfdfe}
.choice h2{margin:0 0 .4rem; border:0; padding:0; font-size:1.15rem; color:var(--accent)}
.choice p{margin:0; font-size:.93rem; color:var(--ink-soft)}
.choice .more{display:inline-block; margin-top:.8rem; font-size:.85rem; font-weight:600; color:var(--accent)}

/* ---------- trainer cards ---------- */
.filters{background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:1rem 1.2rem; margin-bottom:1.5rem;
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end}
.field{display:flex; flex-direction:column; gap:.25rem; flex:1 1 11rem; min-width:0}
.field label{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600}
.field select,.field input{font:inherit; font-size:.9rem; padding:.45rem .55rem; border:1px solid var(--line);
  border-radius:3px; background:#fff; color:var(--ink); width:100%}
.cards{display:grid; gap:1.2rem}
.card{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:4px; padding:1.4rem 1.6rem}
.card__name{margin:0; font-size:1.1rem; border:0; padding:0}
.card__role{color:var(--ink-soft); font-size:.92rem; margin:.15rem 0 .9rem}
.badges{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem}
.badge{font-size:.72rem; font-weight:600; padding:.18rem .5rem; border-radius:2px; border:1px solid var(--accent-line);
  background:var(--accent-soft); color:var(--accent)}
.badge--plain{background:#f2f5f6; border-color:var(--line); color:var(--ink-soft)}
.dl{margin:0; font-size:.9rem; display:grid; grid-template-columns:11rem 1fr; gap:.3rem 1rem}
@media (max-width:40rem){ .dl{grid-template-columns:1fr; gap:0} .dl dt{margin-top:.6rem} }
.dl dt{color:var(--ink-faint); font-weight:600}
.dl dd{margin:0}
.card__foot{margin-top:1rem; padding-top:.7rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--ink-faint)}

table{width:100%; border-collapse:collapse; font-size:.9rem; margin:0 0 1.2rem}
th,td{text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint)}
.scroll{overflow-x:auto}

.footer{border-top:1px solid var(--line); background:var(--paper); margin-top:2rem}
.footer__inner{max-width:var(--max); margin:0 auto; padding:1.8rem 1.5rem; font-size:.84rem; color:var(--ink-faint)}
.footer__inner p{margin:0 0 .6rem}
.footer__inner a{color:var(--ink-soft)}

/* ---------- directory ---------- */
.result-count{font-size:.88rem; color:var(--ink-faint); margin:0 0 1rem}
.cards--grid{grid-template-columns:repeat(auto-fill,minmax(18.5rem,1fr))}
.tcard{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:4px; padding:1.3rem; text-decoration:none; color:inherit}
.tcard:hover{border-color:var(--accent-line); box-shadow:0 1px 4px rgba(20,66,95,.08)}
.tcard__top{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:.9rem}
.avatar{flex:0 0 3.25rem; width:3.25rem; height:3.25rem; border-radius:50%; background:var(--accent-soft);
  border:1px solid var(--accent-line); color:var(--accent); display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:.95rem; letter-spacing:.02em}
.tcard__name{margin:0; font-size:1.02rem; font-weight:600; color:var(--accent); border:0; padding:0; line-height:1.3}
.tcard__meta{margin:.2rem 0 0; font-size:.84rem; color:var(--ink-faint)}
.tcard__where{font-size:.86rem; color:var(--ink-soft); margin:0 0 .8rem}
.tcard__foot{margin-top:auto; padding-top:.8rem; border-top:1px solid var(--line);
  font-size:.82rem; font-weight:600; color:var(--accent)}
.profile__head{display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:1.4rem}
.avatar--lg{flex:0 0 5rem; width:5rem; height:5rem; font-size:1.4rem}
.profile__head h1{margin:0 0 .2rem}
.profile__head .tcard__meta{font-size:.95rem}
.share{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; background:var(--ground);
  border:1px solid var(--line); border-radius:4px; padding:.7rem .9rem; margin:0 0 1.4rem; font-size:.85rem}
.share code{background:#fff; border:1px solid var(--line); border-radius:3px; padding:.15rem .4rem;
  font-size:.82rem; color:var(--ink-soft)}