/* Team pages. Layered on /blog/blog.css, which already carries the tokens, the
   nav, the footer and the .tool cards — so this file is only the parts a team
   page has that nothing else does.

   The school's own colour arrives as --team on the hero, set inline by the bake
   script. It is used for a band and an accent and nothing structural, so a
   school with a near-black primary (there are several) still reads. */

/* The band uses the school's raw colour behind a scrim; every WORD uses
   --team-accent, which the bake script derived to be readable on this
   background. Never colour text with --team directly. */
.team-hero{border-bottom:2px solid var(--team-accent,var(--green-hi));padding:40px 0 34px;
  background-image:linear-gradient(rgba(15,19,17,.74),rgba(15,19,17,.95)),
    linear-gradient(100deg,var(--team,#278350) 0%,var(--team,#278350) 52%,var(--bg) 100%)}
.team-hero .kicker{color:var(--team-accent,var(--orange-hi))}
.crest{box-shadow:0 0 0 3px var(--team-accent,transparent)}
.hero-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.crest{width:84px;height:84px;object-fit:contain;flex:none;
  background:#fff;border-radius:50%;padding:9px}
.team-hero h1{font-family:var(--display);font-size:clamp(28px,5vw,44px);line-height:1.06}
.team-hero h1 span{color:var(--muted);display:block;font-size:.52em;margin-top:6px}
.hero-sub{color:var(--muted);font-size:14.5px;margin-top:10px}
.hero-sub b{color:var(--team-accent,var(--orange-hi))}
/* The school's official X handle, under the venue line. */
.hero-x{display:inline-block;color:var(--team-accent,var(--orange-hi));font-weight:700;
  font-size:13.5px;text-decoration:none;margin-top:7px}
.hero-x:hover{text-decoration:underline}

.team-main{padding:26px 0 60px}

/* Next up — the live band, hidden until the database answers. */
.next{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;margin-bottom:20px}
.next-lab{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--team-accent,var(--orange-hi));margin-bottom:10px}
.next-row{display:flex;align-items:center;gap:13px}
.next-row img{width:40px;height:40px;object-fit:contain;background:#fff;
  border-radius:50%;padding:4px;flex:none}
.next-who{flex:1;min-width:0}
.next-who b{display:block;font-size:16.5px}
.next-who span{color:var(--faint);font-size:13px}
.next-line{background:var(--panel-hi);border:1px solid var(--line);border-radius:10px;
  padding:7px 12px;font:700 14px var(--body);color:#E8B23A;flex:none}

.block{margin-top:34px}
.block > h2{font-family:var(--display);font-size:clamp(19px,2.8vw,25px);margin-bottom:6px}
.block > h2 small{font-family:var(--body);font-size:13.5px;font-weight:600;
  color:var(--faint);margin-left:9px}
.block .note{color:var(--faint);font-size:13.5px;line-height:1.6;margin-bottom:16px;
  max-width:56em}
.none{color:var(--faint);font-size:14.5px}

/* Schedule — every row is a door to the game sheet. */
.sched{display:grid;gap:8px}
.sched .row{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-left-width:3px;border-radius:12px;padding:11px 14px}
.sched .row[data-game]{cursor:pointer;transition:border-color .15s}
.sched .row[data-game]:hover{border-color:#3E4A42}
.sched .row[data-game]:focus-visible{outline:2px solid var(--team-accent,var(--orange-hi));
  outline-offset:2px}
.sched .row.won{border-left-color:var(--team-accent,var(--green-hi))}
.sched .row.lost{border-left-color:#7f3b3b}
.sched .wk{color:var(--faint);font:700 12px var(--body);width:44px;flex:none}
.sched img{width:26px;height:26px;object-fit:contain;background:#fff;border-radius:50%;
  padding:2px;flex:none}
.sched .opp{flex:1;font-weight:700;font-size:15px;min-width:0}
/* The opponent's name is a way to their page. Dotted underline as the
   affordance — the same one the Rooter uses — so it reads as clickable
   without shouting over the result. */
.sched .opp a{color:inherit;text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.32)}
.sched .opp a:hover{border-bottom-style:solid;border-bottom-color:currentColor}
.sched .opp a:focus-visible{outline:2px solid var(--team-accent,var(--orange-hi));
  outline-offset:2px;border-radius:2px}
.next-who a{color:inherit;text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.32)}
.next-who a:hover{border-bottom-style:solid;border-bottom-color:currentColor}
.sched .res{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums;
  text-align:right}
.sched .row.won .res b{color:#7CE0A8}
.sched .row.lost .res b{color:#F87171}

/* Roster and history tables */
.pos{margin-top:24px}
.pos h3{font-family:var(--display);font-size:15px;margin-bottom:9px;
  color:var(--team-accent,var(--ink))}
.pos h3 span{color:var(--faint);font-family:var(--body);font-size:12.5px;
  font-weight:700;margin-left:7px}

/* A position group: one closed row until you open it. Native <details>, so
   the arrow, the keyboard and the screen reader all come for free — and a
   browser with scripts off still collapses it. */
.grp{margin-top:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.grp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 15px;font-family:var(--display);font-size:15px;
  color:var(--team-accent,var(--ink))}
.grp > summary::-webkit-details-marker{display:none}
.grp > summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin-left:2px;transition:transform .15s}
.grp[open] > summary::before{transform:rotate(45deg)}
.grp > summary:hover{background:var(--panel-hi)}
.grp .gname{flex:1;min-width:0}
.grp .gn{color:var(--faint);font-family:var(--body);font-size:12.5px;font-weight:700}
.grp > .roster{padding:0 15px 14px}
.roster-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.roster-bar .seg{margin-bottom:0}
.roster-all{margin-top:0}
.roster{width:100%;border-collapse:collapse;font-size:14px;display:block;
  overflow-x:auto;white-space:nowrap}
.roster th{text-align:left;color:var(--faint);font:800 11px var(--body);
  letter-spacing:.09em;text-transform:uppercase;padding:0 14px 8px 0}
.roster td{padding:8px 14px 8px 0;border-top:1px solid var(--line)}
.roster td.n{color:var(--faint);font-variant-numeric:tabular-nums;width:38px}
.roster td.nm{font-weight:700;color:var(--ink)}
.roster td.hm{color:var(--faint)}
.roster.hist td.nm{font-weight:800}
button.more{margin-top:10px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted);border-radius:10px;padding:9px 16px;font:800 13px var(--body);
  cursor:pointer}
button.more:hover{color:var(--ink);border-color:#3a4a41}

@media(max-width:640px){
  .crest{width:60px;height:60px}
  .roster td.hm,.roster th:last-child{display:none}
  /* Two lines instead of a squeezed one: "at Mississippi State" was wrapping
     to three lines fighting the date for the same row. */
  .sched .row{display:grid;grid-template-columns:auto 26px 1fr;gap:6px 10px;align-items:center}
  .sched .res{grid-column:1/-1;text-align:left;padding-left:54px}
}

/* ── The media-guide strip ─────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin-bottom:20px}
.fact{background:var(--panel);padding:14px 16px}
/* The last fact's row-closing span is set live by team.js — eleven facts
   won't divide evenly at every width, and a ragged end read as a hole in
   the page (Austin, 18 Aug). CSS alone can't say 'span the remainder'. */
.fact dt{color:var(--faint);font:800 10.5px var(--body);letter-spacing:.1em;
  text-transform:uppercase}
.fact dd{margin-top:5px;font-size:14.5px;font-weight:700;line-height:1.4}

/* ── Segmented control ─────────────────────────────────── */
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:3px;gap:3px;margin-bottom:6px}
.seg button{border:0;background:transparent;color:var(--muted);font:800 13px var(--body);
  padding:8px 15px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--team-accent,var(--orange));color:var(--team-ink,#141414)}