/* Coastal Carolina Soccer — one stylesheet, one set of tokens.
   Nothing below uses a size, space or colour that is not on a ramp declared
   here: if a new step is needed it is added to a ramp, never invented inline. */

:root{
  /* surface + ink */
  --bg:#ffffff; --panel:#f7f8f8; --line:#e3e6e6; --line-soft:#eef0f0;
  --ink:#212021; --ink-soft:#6b6f70; --ink-faint:#9aa0a1;
  --accent:#0f8b8d; --accent-soft:#e6f2f2;
  --map-water:#eef2f3; --map-land:#ffffff; --map-line:#d6dcdc; --dot:#8d9899;
  --shadow:0 1px 2px rgba(33,32,33,.05), 0 8px 24px rgba(33,32,33,.05);

  /* space */
  --s-05:5px; --s-10:10px; --s-15:15px; --s-20:20px;
  --s-30:30px; --s-45:45px; --s-60:60px; --s-90:90px;

  /* type */
  --fs-xs:11px; --fs-sm:13px; --fs-base:16px; --fs-lg:20px;
  --fs-xl:28px; --fs-2xl:40px;

  --radius:5px; --radius-lg:10px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme:dark){:root{
  --bg:#141616; --panel:#1c1f1f; --line:#2b2f2f; --line-soft:#232727;
  --ink:#e8eaea; --ink-soft:#a0a6a6; --ink-faint:#6d7474;
  --accent:#39b3b0; --accent-soft:#16302f;
  --map-water:#101313; --map-land:#1e2222; --map-line:#2c3131; --dot:#606b6b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--fs-base)/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}

.wrap{width:80%;max-width:1400px;margin:0 auto}
@media (max-width:900px){.wrap{width:auto;padding-left:var(--s-20);padding-right:var(--s-20)}}

/* ---------------------------------------------------------------- masthead */
.masthead{position:sticky;top:0;z-index:10;background:var(--bg);
  border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:var(--s-30);
  padding-top:var(--s-15);padding-bottom:var(--s-15)}
.brand{display:flex;align-items:baseline;gap:var(--s-10);color:var(--ink);
  font-weight:600;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--accent)}
.brand .mark{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);
  transform:translateY(-1px)}
nav.main{display:flex;gap:var(--s-20);margin-left:auto;font-size:var(--fs-sm)}
nav.main a{color:var(--ink-soft)}
nav.main a:hover{color:var(--accent);text-decoration:none}
nav.main a.on{color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:700px){
  .masthead .wrap{flex-wrap:wrap;gap:var(--s-10)}
  nav.main{margin-left:0;width:100%;overflow-x:auto;gap:var(--s-15);
    padding-bottom:var(--s-05)}
}

main{padding-top:var(--s-45);padding-bottom:var(--s-90);display:block}
@media (max-width:900px){main{padding-top:var(--s-30);padding-bottom:var(--s-60)}}

/* ------------------------------------------------------------------- hero */
.hero{margin-bottom:var(--s-45)}
h1{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;margin:0 0 var(--s-10);
  line-height:1.15}
.hero .sub{color:var(--ink-soft);margin:0}
.hero .meta{color:var(--ink-faint);font-size:var(--fs-sm);margin:var(--s-15) 0 0}
.hero .meta a{color:var(--accent)}
@media (max-width:700px){h1{font-size:var(--fs-xl)}}

/* A page that is not the home page gets the same block, one step quieter. */
.pagehead{margin-bottom:var(--s-30);padding-bottom:var(--s-20);
  border-bottom:1px solid var(--line)}
.pagehead h1{font-size:var(--fs-xl)}
.pagehead .sub{color:var(--ink-soft);font-size:var(--fs-sm);margin:0}
.crumb{font-size:var(--fs-sm);color:var(--ink-faint);margin:0 0 var(--s-10)}
.crumb a{color:var(--ink-soft)}

/* ------------------------------------------------------------- stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--s-05) var(--s-30);margin:var(--s-30) 0 0;padding:0;list-style:none}
.stats div{border-top:1px solid var(--line);padding-top:var(--s-10)}
.stats dt{color:var(--ink-faint);font-size:var(--fs-sm)}
.stats dd{margin:0;font-size:var(--fs-lg);font-weight:600;
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- section */
section{margin-bottom:var(--s-60)}
.shead{display:flex;align-items:baseline;gap:var(--s-15);
  margin:0 0 var(--s-15);padding-bottom:var(--s-10);
  border-bottom:2px solid var(--accent)}
.shead h2{font-size:var(--fs-lg);font-weight:600;margin:0}
.shead .smeta{color:var(--ink-faint);font-size:var(--fs-sm)}
.shead .more-link{margin-left:auto;font-size:var(--fs-sm);white-space:nowrap}
@media (max-width:700px){
  /* Keep the heading on one line and send its aside to a line of its own,
     rather than letting a two-word title break in half. */
  .shead{flex-wrap:wrap;gap:0 var(--s-15)}
  .shead .smeta{order:3;flex-basis:100%}
}
h3{font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);
  margin:var(--s-30) 0 var(--s-10)}
.note{color:var(--ink-faint);font-size:var(--fs-sm);margin:0 0 var(--s-15)}
.empty{color:var(--ink-faint);font-size:var(--fs-sm);margin:0}

/* ----------------------------------------------------------------- tables */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);white-space:nowrap}
th,td{padding:var(--s-10);text-align:right;border-bottom:1px solid var(--line-soft)}
th{color:var(--ink-faint);font-weight:500;border-bottom:1px solid var(--line)}
th.t,td.t{text-align:left}
tbody tr:hover{background:var(--panel)}
td{font-variant-numeric:tabular-nums}
.strong{font-weight:600;color:var(--ink)}
.strong a{color:var(--ink)}
.strong a:hover{color:var(--accent)}
.muted{color:var(--ink-soft)}
.nil{color:var(--ink-faint)}
.rk{width:var(--s-30);color:var(--ink-faint);text-align:right}
.lead{font-weight:600;color:var(--accent)}
.res-W{color:var(--accent);font-weight:600}
.res-L{color:var(--ink-faint)}
.res-T{color:var(--ink-soft)}
.tag{margin-left:var(--s-05);padding:1px var(--s-05);border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent);font-size:var(--fs-xs);
  vertical-align:1px}
table.sortable th[data-sort]{cursor:pointer;user-select:none}
table.sortable th[data-sort]:hover{color:var(--ink)}
table.sortable th.asc::after{content:" \2191"}
table.sortable th.desc::after{content:" \2193"}
.more{display:block;margin-top:var(--s-15);background:none;border:0;padding:0;
  font:inherit;font-size:var(--fs-sm);color:var(--accent);cursor:pointer}
.more:hover{text-decoration:underline}
tbody tr[hidden]{display:none}

/* --------------------------------------------------------------- league list */
.leaguelist{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));
  gap:0 var(--s-30)}
.leaguelist a{display:grid;grid-template-columns:var(--s-20) auto 1fr auto;
  align-items:baseline;gap:var(--s-10);padding:var(--s-10) var(--s-05);
  border-bottom:1px solid var(--line-soft);color:var(--ink);font-size:var(--fs-sm)}
.leaguelist a:hover{background:var(--panel);text-decoration:none}
.leaguelist a:hover .lg-name{color:var(--accent)}
.lg-ord{color:var(--ink-faint);font-variant-numeric:tabular-nums;text-align:right}
.swatch{flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot)}
.leaguelist a:hover .swatch{background:var(--accent)}
.lg-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.lg-meta{color:var(--ink-faint);white-space:nowrap;text-align:right}
@media (max-width:700px){
  /* Narrow screens: let the league name have the full line and drop its numbers
     underneath, rather than truncating the name to a stub. */
  .leaguelist a{grid-template-columns:var(--s-20) auto 1fr;row-gap:0}
  .lg-name{grid-column:3;white-space:normal;overflow:visible}
  .lg-meta{grid-column:3;text-align:left}
}

/* ---------------------------------------------------------------- the map */
.map{margin:0;position:relative}
.map svg{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.water{fill:var(--map-water)}
.land{fill:var(--map-land);stroke:var(--map-line);stroke-width:.7;
  stroke-linejoin:round;fill-rule:evenodd}
.dot{fill:var(--dot);stroke:var(--map-land);stroke-width:1.5;cursor:pointer;
  transition:fill .12s,opacity .12s}
.dot:hover{fill:var(--accent)}
.dots.filtered .dot{opacity:.15}
.dots.filtered .dot.on{opacity:1;fill:var(--accent)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);
  font-size:var(--fs-sm);padding:var(--s-05) var(--s-10);border-radius:var(--radius);
  transform:translate(-50%,-165%);white-space:nowrap;z-index:2}
.maplegend{margin-top:var(--s-30)}
.map + .note{margin-top:var(--s-15)}

/* --------------------------------------------------------------- team page */
.teamhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-30);
  margin-bottom:var(--s-30);padding-bottom:var(--s-20);
  border-bottom:1px solid var(--line)}
.teamhead h1{margin:0;font-size:var(--fs-xl)}
.teamhead .where{color:var(--ink-soft);font-size:var(--fs-sm);margin:var(--s-05) 0 0}
.teamhead .figures{display:flex;gap:var(--s-30);margin-left:auto;
  font-variant-numeric:tabular-nums}
.teamhead .figures div{text-align:right}
.teamhead .figures dt{color:var(--ink-faint);font-size:var(--fs-sm)}
.teamhead .figures dd{margin:0;font-size:var(--fs-lg);font-weight:600}
@media (max-width:700px){
  .teamhead .figures{margin-left:0;flex-wrap:wrap;gap:var(--s-20)}
  .teamhead .figures div{text-align:left}
}

/* ------------------------------------------------------------------ search */
.searchbox{display:flex;gap:var(--s-10);margin-bottom:var(--s-30)}
.searchbox input{flex:1;min-width:0;padding:var(--s-10) var(--s-15);font:inherit;
  font-size:var(--fs-sm);color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius)}
.searchbox input::placeholder{color:var(--ink-faint)}
.searchbox button{padding:var(--s-10) var(--s-20);font-size:var(--fs-sm);
  font-weight:600;color:var(--bg);background:var(--accent);border:0;
  border-radius:var(--radius);cursor:pointer}
.searchbox button:hover{opacity:.9}

/* ------------------------------------------------------------------ footer */
footer{border-top:1px solid var(--line);padding-top:var(--s-30);
  padding-bottom:var(--s-45);color:var(--ink-faint);font-size:var(--fs-sm)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-10) var(--s-30)}
footer nav{display:flex;gap:var(--s-20);margin-left:auto}
footer a{color:var(--ink-soft)}
@media (max-width:700px){footer nav{margin-left:0}}

/* ------------------------------------------------------------------ errors */
.problem{padding:var(--s-45) 0;max-width:34em}
.problem h1{font-size:var(--fs-xl)}
.problem p{color:var(--ink-soft);margin:0 0 var(--s-15)}