/* Shared styles for the Team Communication Tools and Home/Away pages. Colors come from each sport's theme.css (loaded after this file). */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(/resources/coachguide/tools/fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(/resources/coachguide/tools/fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(/resources/coachguide/tools/fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(/resources/coachguide/tools/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(/resources/coachguide/tools/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface2:#E8ECF2; --ink:#14202E; --muted:#5B6776; --line:#D5DBE4;
  --accent:#2F5F8F; --accent-ink:#2A5580; --on-accent:#FFFFFF; --accent-soft:#E2ECF6; --hl:#2F5F8F; --hl-soft:#E8F0F8; --focus:#14202E;
  --warn:#8A5A00; --warn-soft:#FFF1D6;
  --hdr-bg:#2F5F8F; --hdr-ink:#FFFFFF; --hdr-sub:#DCE8F4;
  --strip:repeating-linear-gradient(90deg,#9DB4CC 0 38px,#7F9AB8 38px 40px); --strip-h:6px;
  color-scheme:light;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif; --body:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45;-webkit-tap-highlight-color:transparent}
a{color:var(--accent-ink);text-underline-offset:2px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:860px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{background:var(--hdr-bg);color:var(--hdr-ink);padding-top:env(safe-area-inset-top,0px)}
header.top .wrap{padding-top:16px;padding-bottom:14px}
header.top .kicker{font-family:var(--display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:14px;color:var(--hdr-sub);margin:0}
header.top h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:34px;line-height:1.05;margin:2px 0 0}
.strip{height:var(--strip-h);background:var(--strip)}
main{padding-top:18px;padding-bottom:40px}
.lead{font-size:18px;margin:0 0 14px}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;margin:0 0 6px}
.checked{display:inline-block;font-family:var(--display);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:15px;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:3px 12px}
.disc{font-size:15px;color:var(--muted);margin:6px 0 18px}
h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:23px;margin:26px 0 8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:12px 0}
.card h2{margin:0 0 4px;font-size:21px}
.card p{margin:4px 0}
.card.tint{background:var(--hl-soft);border-color:var(--hl)}
.card.warn{background:var(--warn-soft);border-color:var(--warn)}
ul.tips{margin:4px 0 2px;padding-left:20px}
ul.tips li{margin:5px 0}
/* matrix: stacked cards on phones, a real table from 720px up and in print */
table.matrix{width:100%;border-collapse:collapse;margin-top:10px}
table.matrix thead{position:absolute;left:-9999px}
table.matrix tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;padding:10px 14px}
table.matrix td{display:block;padding:5px 0;border:0}
table.matrix td::before{content:attr(data-label);display:block;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--muted)}
table.matrix td.tool{font-weight:600;font-size:20px;padding-top:0}
table.matrix td.tool::before{display:none}
table.matrix td.tool a{display:inline-block;padding:4px 0;min-height:32px}
table.matrix td.price span{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:1px 10px;font-size:15px;font-weight:600}
table.matrix ul{margin:2px 0 0;padding-left:18px}
table.matrix li{margin:3px 0;font-size:16px}
table.matrix li.sport{list-style:none;margin-left:-18px;padding:5px 10px;background:var(--hl-soft);border-radius:8px}
.site a{font-weight:600;word-break:break-word}
@media (min-width:720px){
  table.matrix thead{position:static}
  table.matrix{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
  table.matrix tr{display:table-row;border:0;border-radius:0;margin:0;padding:0;background:none}
  table.matrix th{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:14px;text-align:left;color:var(--muted);background:var(--surface2);padding:10px 12px}
  table.matrix td{display:table-cell;padding:12px;border-top:1px solid var(--line);vertical-align:top}
  table.matrix td::before{display:none}
  table.matrix td.tool{font-size:19px;width:15%}
  table.matrix td.where{width:20%;font-size:16px}
  table.matrix td.price{width:15%}
  table.matrix td.know{width:50%}
}
/* links */
.links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
footer{border-top:1px solid var(--line);padding:16px 0 28px;font-size:14px;color:var(--muted)}
footer p{margin:4px 0}
@media print{
  body{background:#fff;color:#000;font-size:11.5pt}
  header.top{background:#fff!important;color:#000;border-bottom:3px solid #000}
  header.top .kicker{color:#444}
  .strip,.links,.noprint{display:none!important}
  .card,table.matrix{break-inside:avoid;border-color:#999}
  table.matrix thead{position:static}
  table.matrix{display:table;border:1px solid #999}
  table.matrix tr{display:table-row;border:0;margin:0;padding:0}
  table.matrix th{display:table-cell;background:#eee;color:#000;padding:6px;text-align:left;font-size:10pt}
  table.matrix td{display:table-cell;padding:6px;border-top:1px solid #999;vertical-align:top;font-size:10pt}
  table.matrix td::before{display:none}
  table.matrix li{font-size:10pt}
  table.matrix li.sport{background:none;padding:0;margin-left:-18px}
  a{color:#000;text-decoration:none}
  .checked,table.matrix td.price span{background:none;border:1px solid #666;color:#000}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.crumbs{margin:0 0 4px;font-size:15px;color:var(--hdr-sub)}
.crumbs a{color:var(--hdr-sub);display:inline-block;padding:9px 0;text-decoration:underline;text-underline-offset:3px}
.crumbs a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
footer a{color:inherit}
@media print{.crumbs{display:none}}