/* ============================================================================
   ROCKETTES TEAM — tournament pages (/tournament/<item>) + Team Portal (/team/<item>)
   coloradorockettes.com, MongooseYouthSports site. 2026-10-25 MDT.

   Two sources, both ported, not reinvented:
   - HERO = the coloradorockettes.com home (Content/Snippets/custom-home-v2.html md5 0860247724605387ba197eeaba2df8c7):
     same sunset photo, same blur placeholder + fade-in, same scrim, same nav padding, same glass box
     (turnerlee.com .home2-col__bottom, byte-for-byte), same h1 face / weight / tracking, same .hm-num / .hm-label.
     Declared differences from the home: hero min-height clamp(560px,82vh,860px) not 100svh (a page, not a landing);
     h1 clamp(42px,5.8vw,104px) not clamp(44px,6.4vw,112px) (tournament names are longer than "Colorado Rockettes");
     event logo clamp(120px,17vh,190px) in the home's CR* slot; box min-height clamp(130px,17vh,180px) not
     clamp(140px,19vh,200px); lede 15px not 13px (it carries dates and a venue); boxes carry tournament facts.
   - CONTENT = holyfamilytigers.com/gameimpact's panel language (css/gameimpact/gi.css .panel/.ph, .wkg game
     card, table.linfo key/value rows): white panels with a header plate on a dark wall. Declared difference:
     the plate is the Rockettes purple (--color1l -> --color1d) instead of HF's gold metal, and type is the
     Rockettes Nexa (fonts arrive from Liquid as --cr-f1/--cr-f2/--cr-f3 on .cr, set in custom-cr-prelude.html).
   - CONTROLS = the style guide (00_resources/style-guide-cache/MongooseYouthSports.md): .btn .btn-color1
     .btn-xxs, .form-floating inputs, table.table, and .btn-toggle-group — which the public template does not load,
     so its block is PORTED below from turnerlee.com/shared/core/v1/sst-styles.css L4083-4268
     (md5 0200b766884efc0632080ef20d1cf772), unchanged.
   Colors are brand tokens only (--color1*, --color2*, --color3) plus white/black alpha, as on the home.
   Traps already paid for on the home, restated here (t_tlc-styles.css):
     img{margin:0 auto} -> margin:0 · a:hover img scale -> .hover-no · h1/h2 text-transform -> none ·
     section{margin-bottom:60px} -> no <section> · a:link (0,1,1) strips linked boxes -> scope .cr .x (0,2,0) ·
     --LinkHoverDecoration underline -> none (house rule: links never underline).
============================================================================ */

.cr{
  --PrimaryButtonColor:var(--color1);--PrimaryButtonVisitedColor:var(--color1);--PrimaryButtonDisabledColor:var(--color1d);
  --buttonTextTransform:capitalize;--LinkHoverDecoration:none;
  --cr-ink:#fff;--cr-ink2:rgba(255,255,255,.88);--cr-ink3:rgba(255,255,255,.72);
  --cr-line:rgba(255,255,255,.14);
  --cr-pad:clamp(16px,3.4vw,56px);
  --cr-in:var(--bs-success,#198754);--cr-maybe:var(--bs-warning,#ffc107);--cr-out:var(--bs-danger,#dc3545);
  position:relative;margin:0;min-height:100vh;color:var(--cr-ink);font-family:var(--cr-f1);
  background:var(--color1xd) linear-gradient(180deg,var(--color1xd) 0,var(--color1xd) 420px,#000 100%);
  isolation:isolate;
}
.cr a{color:inherit;text-decoration:none}
.cr a:hover{text-decoration:none}
.cr img{margin:0}
.cr h1,.cr h2,.cr h3,.cr h4{text-transform:none}
/* keyboard focus: the site sheets strip outlines from every link and button (t_tlc-styles a:focus, button:focus,
   .btn-color1 outline:0 !important), so the ring comes back here, white on the dark ground, purple on white panels */
.cr a:focus-visible,.cr button:focus-visible,.cr .btn:focus-visible,.cr summary:focus-visible{outline:2px solid #fff !important;outline-offset:2px}
.cr .cr-panel :focus-visible,.cr .cr-sheet :focus-visible{outline-color:var(--color1) !important}
.cr .btn-toggle-group .btn-check:focus-visible + .btn{outline:2px solid #fff;outline-offset:-4px;z-index:3}
.cr .btn{white-space:nowrap;font-family:var(--cr-f3);flex-shrink:0} /* .btn-xxs pads by % of its containing block: in a content-sized flex box that resolves small, so the label must never be squeezed under it */

/* ---------- HERO (port of custom-home-v2 .hm) ---------- */
.cr-hero{position:relative;min-height:clamp(560px,82vh,860px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.cr-hero.is-compact{min-height:clamp(250px,34vh,360px)}
/* the home's 510-byte blurred copy of the photo (custom-home-v2.html .hm-bg), shown until the real photo fades in */
.cr-hero-bg{position:absolute;inset:0;z-index:-2;background:#000 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAkADADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMBAgUE/8QAIxAAAQQCAQUAAwAAAAAAAAAAAQACAxEEIRIFEzFBUSJCkf/EABgBAAMBAQAAAAAAAAAAAAAAAAABAwQC/8QAHREAAgIDAAMAAAAAAAAAAAAAAAECMQMREiEyQv/aAAwDAQACEQMRAD8AecZp9JIgYZ+2HAO+LEHUsse1EeXknJE+rAWTlKma+pO4m7NCI3bdRVmskMejbSsTLzcjKAGgR7ToOp5cTA08SB4S6kqZ1pO4mnHAY/ycKA9rrgfHKaa61gz9SyponMPEX8XHiy5OKTweDf1Ujkb9mTljXyiGt34tOaHhtcNKsTuDw6rpdhz3FlCMfxR8lzkIA8tpS2Pl4Klzi425DnAjWkC2VLAP2UdsnwQqmyospgOaAm0KQhAigANpRG0IQBUhACEJiP/Z) center 62%/cover no-repeat}
.cr-hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:0;transition:opacity .6s ease;margin:0}
.cr-hero-bg img.is-in{opacity:1}
.cr-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.10) 26%,rgba(0,0,0,.18) 52%,var(--color1xd) 100%);opacity:.92}
.cr-hero.is-compact .cr-hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 45%,var(--color1xd) 100%);opacity:.96}

.cr-nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2.4vh,26px) var(--cr-pad)}
.cr-brand{display:flex;align-items:center;flex:none}
.cr-brand img{display:block;height:clamp(28px,4.2vh,44px);width:auto}
.cr-nav-r{margin-left:auto;display:flex;align-items:center;gap:clamp(6px,1vw,14px);flex-wrap:wrap;justify-content:flex-end}
.cr .cr-navlink{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-family:var(--cr-f1);font-size:14px;line-height:1.2;color:var(--cr-ink2);transition:color .15s ease,background-color .15s ease}
.cr .cr-navlink:hover{color:#fff;background-color:rgba(255,255,255,.10)}
.cr .cr-navlink.on{color:#fff;background-color:rgba(255,255,255,.14)}
.cr-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cr-ink3)}

.cr-hero-body{position:relative;z-index:2;width:100%;max-width:calc(1440px + 2 * var(--cr-pad));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,40vw,600px);align-items:end;
  gap:clamp(20px,3vw,48px);padding:clamp(110px,16vh,170px) var(--cr-pad) clamp(24px,4.5vh,52px)}
.cr-hero.is-compact .cr-hero-body{grid-template-columns:minmax(0,1fr) auto;padding-top:clamp(96px,14vh,130px)}
.cr .cr-hero-logo{display:block;height:clamp(120px,17vh,190px);width:auto;max-width:100%;object-fit:contain;margin:0 0 clamp(12px,2vh,22px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.cr-h1{margin:0;font-family:var(--cr-f2);font-weight:300;font-size:clamp(42px,5.8vw,104px);line-height:.98;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.cr-hero.is-compact .cr-h1{font-size:clamp(36px,4.6vw,72px)}
.cr-lede{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:clamp(14px,2.4vh,26px);font-family:var(--cr-f1);font-size:15px;line-height:1.35;color:var(--cr-ink2)}
.cr-lede span{display:flex;align-items:center;gap:8px}
.cr-lede :is(i,svg){color:var(--color2xl);width:16px;text-align:center}

/* glass — turnerlee.com .home2-col__bottom, byte-for-byte (as on the home) */
.cr .cr-box{
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(3px) saturate(1.3);
          backdrop-filter: blur(3px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cr .cr-box {
    background: rgba(0, 0, 0, 0.45);
  }
}
.cr-boxes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.cr-box{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:clamp(14px,1.4vw,22px);color:#fff;min-height:clamp(130px,17vh,180px)}
a.cr-box:hover{color:#fff}
.cr-box.is-wide{grid-column:span 2;min-height:0}
.cr-num{font-family:var(--cr-f2);font-weight:300;font-size:calc(clamp(34px,3.6vw,60px) - 2px);line-height:.9;letter-spacing:-.01em;color:#fff}
.cr-label{font-family:var(--cr-f1);font-weight:400;font-size:13px;line-height:1.3;color:var(--cr-ink2)}
.cr-wide-title{font-family:var(--cr-f2);font-weight:300;font-size:clamp(24px,2.2vw,34px);line-height:1;color:#fff}
/* the home's game list (.hm-games), same row grammar */
.cr-hgames{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cr-hgames li{display:flex;align-items:center;gap:12px}
.cr-hgame-team{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}
.cr-hgame-team b{font-family:var(--cr-f1);font-weight:400;font-size:14px;line-height:1.2;color:#fff}
.cr-hgame-team span{font-family:var(--cr-f1);font-weight:400;font-size:12px;line-height:1.25;color:rgba(255,255,255,.75)}
.cr-hgame-time{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;font-family:var(--cr-f1);font-size:14px;line-height:1.2;color:#fff;white-space:nowrap}
.cr-hgame-time small{font-size:12px;line-height:1.25;color:rgba(255,255,255,.75)}

/* team mark — initials disc (no opponent logos exist for PG travel teams; empty is honest, initials are the name) */
.cr-mark{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--cr-f3);font-size:12px;line-height:1;letter-spacing:.02em;color:var(--color1);background:var(--color2xl)}
.cr-mark.is-us{background:var(--color1);color:#fff}
.cr-mark img{display:block;width:70%;height:70%;object-fit:contain;margin:0}

/* Icons: the Font Awesome kit replaces each <i> with an <svg class="svg-inline--fa">, so icon rules match :is(i,svg). */
/* ---------- PAGE BODY ---------- */
.cr-main{max-width:calc(1440px + 2 * var(--cr-pad));margin:0 auto;padding:clamp(24px,4vh,48px) var(--cr-pad) clamp(40px,7vh,80px)}
.cr-sec{margin:0 0 clamp(36px,6vh,64px)}
.cr-sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.cr-sec-head h2{margin:0;font-family:var(--cr-f2);font-weight:300;font-size:clamp(28px,3vw,46px);line-height:1;color:#fff}
.cr-sec-head .cr-sec-meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--cr-ink2)}
.cr-grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.cr-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.cr-stack{display:flex;flex-direction:column;gap:16px}

/* panel + header plate — gi.css .panel/.ph grammar, Rockettes plate */
.cr-panel{background:#fff;color:var(--color3);border-radius:10px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.cr-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:10px 16px;
  background:linear-gradient(180deg,var(--color1l),var(--color1d));color:#fff;
  font-family:var(--cr-f3);font-size:12px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.cr-ph .cr-ph-meta{font-family:var(--cr-f1);font-size:12px;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.82)}
.cr-pb{padding:16px}
.cr-pb > :last-child{margin-bottom:0}
.cr-panel p{font-family:var(--cr-f1);font-size:16px;line-height:1.5;color:var(--color3);margin:0 0 12px}

/* game card — gi.css .wkg grammar */
.cr-game{display:flex;flex-direction:column;height:100%}
.cr-game-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 0;font-family:var(--cr-f3);font-size:12px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--color1)}
.cr-game-cap .cr-game-st{font-family:var(--cr-f1);letter-spacing:.04em;color:var(--color2d)}
.cr-game-rows{display:flex;flex-direction:column;gap:10px;padding:12px 16px 14px}
.cr-tr{display:flex;align-items:center;gap:12px}
.cr-tr .cr-tn{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}
.cr-tr .cr-tn b{font-family:var(--cr-f1);font-weight:700;font-size:17px;line-height:1.2;color:var(--color3)}
.cr-tr .cr-tn span{font-family:var(--cr-f1);font-size:13px;line-height:1.25;color:var(--color2d)}
.cr-tr .cr-sc{font-family:var(--cr-f1);font-weight:700;font-size:22px;line-height:1;color:var(--color3);min-width:28px;text-align:right}
.cr-tr.is-lead .cr-sc,.cr-tr.is-lead .cr-tn b{color:var(--color1)}
.cr-game-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--color2xl);font-size:14px;color:var(--color2d)}
.cr-game-foot .cr-where{display:flex;align-items:center;gap:8px}
.cr-game-foot .cr-where :is(i,svg){color:var(--color1)}
.cr-result{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 6px;border-radius:4px;font-family:var(--cr-f3);font-size:12px;color:#fff;background:var(--color2d)}
.cr-result.is-off{background:var(--color3)}
.cr-game-note{display:flex;align-items:center;gap:10px;padding:10px 16px 12px;border-top:1px solid var(--color2xl);font-size:14px;line-height:1.4;color:var(--color3)}
.cr-game-note :is(i,svg){color:var(--color1)}
.cr-result.is-w{background:var(--cr-in)}
.cr-result.is-l{background:var(--cr-out)}

/* schedule tables (style guide: table / table-striped) */
.cr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cr .cr-table{margin:0;font-family:var(--cr-f1);font-size:15px;color:var(--color3);min-width:620px}
.cr .cr-table th{font-family:var(--cr-f3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color2d);font-weight:400;white-space:nowrap;border-bottom-color:var(--color2xl)}
.cr .cr-table td,.cr .cr-table th{vertical-align:middle;white-space:nowrap}
.cr .cr-table tr.is-us td{background:color-mix(in srgb,var(--color1) 9%,#fff);color:var(--color1)}
.cr .cr-table tr.is-us b{font-weight:700}
.cr-day{font-family:var(--cr-f3);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color1);padding:14px 16px 6px}

/* bracket columns */
.cr-bracket{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:14px;overflow-x:auto;padding:16px}
.cr-bcol{display:flex;flex-direction:column;gap:12px;justify-content:space-around}
.cr-bcol h3{margin:0 0 2px;font-family:var(--cr-f3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color2d);font-weight:400}
.cr-bslot{border:1px solid var(--color2xl);border-radius:8px;overflow:hidden}
.cr-bslot-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:12px;color:var(--color2d);background:color-mix(in srgb,var(--color2xl) 35%,#fff)}
.cr-bslot-t{display:flex;align-items:center;padding:7px 10px;font-size:14px;line-height:1.2;color:var(--color3)}
.cr-bslot-t + .cr-bslot-t{border-top:1px solid var(--color2xl)}

/* key/value — gi.css table.linfo grammar */
.cr-kv{margin:0;display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:0}
.cr-kv dt,.cr-kv dd{margin:0;padding:11px 0;border-bottom:1px solid var(--color2xl);display:flex;align-items:center}
.cr-kv dt{padding-right:18px;font-family:var(--cr-f3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color2d);font-weight:400}
.cr-kv dd{font-family:var(--cr-f1);font-size:16px;line-height:1.35;color:var(--color3)}
.cr-kv dt:last-of-type,.cr-kv dd:last-of-type{border-bottom:0}
.cr-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cr-actions .btn :is(i,svg){margin-left:6px}

/* roster */
.cr-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cr-player{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--color2xl);border-radius:10px;background:#fff}
.cr-jersey{flex:none;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:8px;background:var(--color1);color:#fff;font-family:var(--cr-f3);font-size:22px;line-height:1}
.cr-player-n{display:flex;flex-direction:column;justify-content:center;min-width:0}
.cr-player-n b{font-family:var(--cr-f1);font-weight:700;font-size:17px;line-height:1.2;color:var(--color3)}
.cr-player-n span{font-family:var(--cr-f1);font-size:13px;line-height:1.3;color:var(--color2d)}

/* counts + who's in */
.cr-counts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cr-count{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;font-family:var(--cr-f1);font-size:13px;line-height:1;color:var(--color3);background:color-mix(in srgb,var(--color2xl) 45%,#fff)}
.cr-count :is(i,svg){font-size:13px}
.cr-count.is-in :is(i,svg){color:var(--cr-in)}
.cr-count.is-maybe :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}
.cr-count.is-out :is(i,svg){color:var(--cr-out)}
.cr-count.is-none :is(i,svg){color:var(--color2d)}
.cr-who-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 14px;margin:12px 0 0;padding:0;list-style:none}
.cr-who-list li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14px;color:var(--color3)}
.cr-who-list li :is(i,svg){width:16px;text-align:center}
.cr-who-list li.is-in :is(i,svg){color:var(--cr-in)}
.cr-who-list li.is-maybe :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}
.cr-who-list li.is-out :is(i,svg){color:var(--cr-out)}
.cr-who-list li.is-none{color:var(--color2d)}
.cr-who-list li.is-none :is(i,svg){color:var(--color2d)}
.cr-who-list small{color:var(--color2d);font-size:12px}

/* callout on the dark ground (glass) */
.cr-callout{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:clamp(16px,2vw,26px)}
.cr-callout h3{margin:0 0 4px;font-family:var(--cr-f2);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.05;color:#fff}
.cr-callout p{margin:0;font-size:15px;line-height:1.4;color:var(--cr-ink2)}

/* footer */
.cr-foot{border-top:1px solid var(--cr-line);padding:28px var(--cr-pad) 40px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cr-foot-brand{display:flex;align-items:center;gap:14px}
.cr-foot-brand img{display:block;height:44px;width:auto}
.cr-foot-brand span{font-size:13px;line-height:1.35;color:var(--cr-ink3)}
.cr-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px}

/* ---------- TEAM PORTAL ---------- */
.cr-ev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0}
.cr-ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:84px;padding:14px 10px;background:var(--color1);color:#fff;text-align:center}
.cr-ev-date .d1{font-family:var(--cr-f3);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.cr-ev-date .d2{font-family:var(--cr-f2);font-weight:300;font-size:34px;line-height:1}
.cr-ev-date .d3{font-family:var(--cr-f1);font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.82)}
.cr-ev-date.is-practice{background:var(--color3)}
.cr-ev-date.is-event{background:var(--color2d)}
.cr-ev-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px;min-width:0}
.cr-ev-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cr-ev-title{display:flex;flex-direction:column;justify-content:center;min-width:0}
.cr-ev-title b{font-family:var(--cr-f1);font-weight:700;font-size:18px;line-height:1.2;color:var(--color3)}
.cr-ev-title span{font-family:var(--cr-f1);font-size:14px;line-height:1.35;color:var(--color2d)}
.cr-ev-kind{font-family:var(--cr-f3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color1)}
.cr-mine{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid var(--color2xl)}
.cr-mine-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cr-mine-row .cr-mine-name{display:flex;align-items:center;gap:10px;min-width:150px;font-family:var(--cr-f1);font-size:16px;font-weight:700;color:var(--color3)}
.cr-mine-row .cr-mine-name .cr-jersey{width:34px;height:34px;font-size:15px;border-radius:6px}
.cr-mine-row .form-floating{flex:1;min-width:200px;margin:0}
.cr-mine-row .cr-saved{font-size:13px;color:var(--color2d);min-width:70px}
.cr-mine-row .cr-saved.is-err{color:var(--cr-out)}
.cr-more{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font-family:var(--cr-f1);font-size:14px;color:var(--color1);cursor:pointer}
.cr-more :is(i,svg){transition:transform .15s ease}
.cr-more[aria-expanded="true"] :is(i,svg){transform:rotate(180deg)}
.cr-empty{padding:18px 16px;font-size:16px;color:var(--color2d)}

/* availability grid */
.cr .cr-grid{min-width:0;font-size:14px}
.cr .cr-grid th,.cr .cr-grid td{text-align:center;padding:8px 6px}
.cr .cr-grid th.cr-ev-col,.cr .cr-grid td.cr-ev-col{position:sticky;left:0;z-index:1;text-align:left;background:#fff;min-width:210px;max-width:260px;white-space:normal}
.cr .cr-grid thead th{position:sticky;top:0;z-index:2;background:#fff}
.cr .cr-grid thead th.cr-ev-col{z-index:3}
.cr .cr-grid .cr-pcol{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
.cr .cr-grid .cr-pcol b{font-family:var(--cr-f3);font-size:15px;color:var(--color1);letter-spacing:0}
.cr .cr-grid .cr-pcol span{font-family:var(--cr-f1);font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--color2d)}
.cr .cr-grid .cr-pcol.is-mine b{color:#fff;background:var(--color1);border-radius:6px;padding:2px 7px}
.cr .cr-grid td :is(i,svg){font-size:18px}
.cr .cr-grid td.is-in :is(i,svg){color:var(--cr-in)}
.cr .cr-grid td.is-maybe :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}
.cr .cr-grid td.is-out :is(i,svg){color:var(--cr-out)}
.cr .cr-grid td.is-none :is(i,svg){color:var(--color2d)}
.cr .cr-grid .cr-ev-col b{display:block;font-family:var(--cr-f1);font-weight:700;font-size:14px;color:var(--color3)}
.cr .cr-grid .cr-ev-col span{display:block;font-size:12px;color:var(--color2d)}
.cr .cr-cell{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:0;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;transition:background-color .15s ease}
.cr .cr-cell:hover{background:color-mix(in srgb,var(--color1) 10%,#fff)}
.cr .cr-grid .cr-cell:focus-visible{outline:2px solid var(--color1) !important;outline-offset:-2px}
.cr .cr-grid td.is-saving :is(i,svg){opacity:.4}
.cr .cr-grid th.cr-ev-col{font-weight:400;text-transform:none;letter-spacing:normal}
.cr .cr-gridscroll{max-height:75vh;overflow:auto}   /* a bounded scroller, so the sticky header row has something to stick to */
.cr-grid-status{margin:0;padding:0 16px;font-size:14px;color:var(--color3)}
.cr-grid-status:empty{display:none}
.cr-grid-status.is-err{padding:10px 16px;color:var(--cr-out)}
.cr .cr-grid .cr-tot{font-family:var(--cr-f3);font-size:13px;color:var(--color1)}
.cr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-top:1px solid var(--color2xl);font-size:13px;color:var(--color2d)}
.cr-legend span{display:inline-flex;align-items:center;gap:6px}
.cr-legend span{color:var(--color3)}
.cr-legend .is-in :is(i,svg){color:var(--cr-in)} .cr-legend .is-maybe :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}
.cr-legend .is-out :is(i,svg){color:var(--cr-out)} .cr-legend .is-none :is(i,svg){color:var(--color2d)}
.cr-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:14px 16px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--color2xl)} /* the guide's group is nowrap: on a phone it scrolls sideways inside its own row instead of widening the page */

/* manage (coach) */
.cr-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cr-form .span2{grid-column:span 2}
.cr-form .span4{grid-column:1/-1}
.cr-form .form-floating{margin:0}
.cr-form-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cr-mlist{list-style:none;margin:0;padding:0}
.cr-mlist li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--color2xl)}
.cr-mlist li:last-child{border-bottom:0}
.cr-mlist .cr-ml-t{display:flex;flex-direction:column;justify-content:center;min-width:0}
.cr-mlist .cr-ml-t b{font-size:15px;color:var(--color3)}
.cr-mlist .cr-ml-t span{font-size:13px;color:var(--color2d)}
.cr-mlist .cr-actions{flex:1 1 300px;justify-content:flex-end}   /* .btn-xxs pads by % of this box: it needs a width of its own, not its content's */
.cr-callout > .cr-actions{flex:0 1 340px;justify-content:flex-end}
.cr-pb-note{padding-top:0}
.cr-pb-note p{font-size:14px;color:var(--color2d)}
#cr-payform .cr-pay-warn{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--cr-out) 10%,#fff);color:var(--color3);font-size:15px}

/* fees: the Books parent view keeps its own light styles inside a white sheet */
.cr-sheet{background:#fff;color:var(--color3);border-radius:10px;padding:clamp(16px,2.4vw,32px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.cr-sheet .books-parent{padding:0}
.cr-sheet h1{font-family:var(--cr-f2);font-weight:300;font-size:clamp(30px,3vw,44px);color:var(--color1);text-transform:none;margin:0 0 18px}
.cr-pay-amt{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cr-pay-amt b{font-family:var(--cr-f2);font-weight:300;font-size:40px;line-height:1;color:var(--color1)}

/* ---------- toggle group — PORT, sst-styles.css L4083-4268 (md5 0200b766884efc0632080ef20d1cf772), unchanged ---------- */
.btn-toggle-group {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0;
	--tgb: var(--PrimaryButtonColor, var(--color1, #0079c1));
	--tg-off: var(--ToggleGroupOffColor, var(--color1xd, color-mix(in srgb, var(--tgb), black 38%)));
	--tg-on: var(--ToggleGroupOnColor, var(--tgb));
	--tg-hover: var(--ToggleGroupHoverColor, var(--PrimaryButtonHoverColor, var(--color1xl, #0094ec)));
	--tg-text: var(--PrimaryButtonTextColor, #fff);
}
.btn-toggle-group input.btn-check[type="radio"]:not(:checked),
.btn-toggle-group input.btn-check[type="radio"]:checked,
.btn-toggle-group input.btn-check[type="checkbox"]:not(:checked),
.btn-toggle-group input.btn-check[type="checkbox"]:checked {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	clip: rect(0, 0, 0, 0) !important;
}
.btn-toggle-group .btn-check + .btn {
	padding: 1.15em 20px !important;
	line-height: 1.19em !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border: 0 !important;
	background-color: var(--tg-off) !important;
	color: var(--tg-text) !important;
	position: relative;
	z-index: 0;
	transition: background-color .15s ease;
	--tg-fill: var(--tg-off);
	box-shadow: 2px 0 0 0 var(--tg-fill);
}
.btn-toggle-group .btn-check:first-of-type + .btn {
	border-top-left-radius: var(--ToggleGroupRadius, .4rem) !important;
	border-bottom-left-radius: var(--ToggleGroupRadius, .4rem) !important;
}
.btn-toggle-group .btn-check:last-of-type + .btn {
	border-top-right-radius: var(--ToggleGroupRadius, .4rem) !important;
	border-bottom-right-radius: var(--ToggleGroupRadius, .4rem) !important;
	box-shadow: none;
}
.btn-toggle-group .btn-check:checked + .btn,
.btn-toggle-group .btn-check:active + .btn {
	background-color: var(--tg-on) !important;
	color: var(--tg-text) !important;
	--tg-fill: var(--tg-on);
	z-index: 1;
}
.btn-toggle-group .btn-check:not(:checked) + .btn:hover {
	background-color: var(--tg-hover) !important;
	color: var(--tg-text) !important;
	--tg-fill: var(--tg-hover);
	z-index: 2;
}
.btn-toggle-group .btn-check + .btn:hover {
	-webkit-animation: none !important;
	animation: none !important;
}
.btn-check + label::before,
.btn-check + label::after,
.btn-check + .btn::before,
.btn-check + .btn::after {
	display: none !important;
	content: none !important;
}
/* ---------- end port ---------- */

/* ---------- field text color — PORT, sst-styles.css L3438-3456 (md5 0200b766884efc0632080ef20d1cf772), scoped to .cr ----------
   The public template does not load sst-styles.css, so t_tlc-styles.css input[type="text"]… (0,1,1) painted field text
   rgba(0,0,0,.8) against the guide's var(--InputColor). .cr raises the guide's own rule to (0,2,0); values unchanged.
   (Field FONT comes from turnerlee.com/shared/core/v1/sst-site-structure.css, linked by custom-cr-prelude.html.) */
.cr .form-control,
.cr .form-select,
.cr .form-floating > .form-control,
.cr .form-floating > .form-select {
	color: var(--InputColor);
	background-color: var(--InputBgColor);
	border-color: var(--InputBorderColor);
}
.cr .form-control:hover,
.cr .form-select:hover {
	color: var(--InputColorHover);
	background-color: var(--InputBgColorHover);
	border-color: var(--InputBorderColorHover);
}
.cr .form-control:focus,
.cr .form-select:focus {
	color: var(--InputColorFocus) !important;
	background-color: var(--InputBgColorFocus) !important;
	border-color: var(--InputBorderColorFocus) !important;
}

/* ---------- the Player Fees form (a copy of the site's Payments form layout) on a phone — scoped to /team/pay ----------
   Measured 2026-10-25 at 375: the amount box and the btn-lg submit ran 9-19px past the screen (the .cr .btn nowrap above
   kept "Send Payment Now" on one line), and the City / State / Zip row (.flex-nowrap, Bootstrap !important) clipped
   State to "C" and Zip to "805". Desktop is untouched. */
#cr-payform .btn{white-space:normal}
#cr-payform label.input-amount,#cr-payform input.input-amount,#cr-payform .w-90{max-width:100%}
#cr-payform input[type='text'].input-amount{min-width:0} /* t_tlc-styles.css input[type='text'].input-amount pins min-width:350px, wider than a phone's sheet */
@media (max-width:560px){
  #cr-payform .d-flex.flex-nowrap{flex-wrap:wrap !important}
  #cr-payform .d-flex.flex-nowrap > .flex-grow-1{flex:1 1 100%}
  #cr-payform input[type='text'].input-amount{width:100% !important} /* the site rule is width:49% !important; on a phone that left ~76px for the digits */
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cr-grid2{grid-template-columns:minmax(0,1fr)} /* 1fr = minmax(auto,1fr): the payment form's min-content set the floor and pushed the sheet 58px past a phone */
  .cr-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .cr-hero{min-height:0}
  .cr-hero-body,.cr-hero.is-compact .cr-hero-body{grid-template-columns:1fr;padding-top:clamp(100px,18vh,150px)}
  .cr-hero-bg img{object-position:13% 62%}
  .cr-hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.38) 40%,var(--color1xd) 100%)}
  .cr-nav{flex-wrap:wrap}
  .cr-grid3{grid-template-columns:minmax(0,1fr)}
  .cr-num{font-size:min(32px,calc((50vw - 50px) / 4.8))}
}
@media (max-width:560px){
  .cr-boxes{grid-template-columns:1fr}
  .cr-box.is-wide{grid-column:auto}
  .cr-form{grid-template-columns:1fr}
  .cr-form .span2{grid-column:auto}
  .cr-ev{grid-template-columns:1fr}
  .cr-ev-date{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 16px;min-width:0}
  .cr-ev-date .d2{font-size:24px}
  .cr-kv{grid-template-columns:1fr}
  .cr-kv dt{border-bottom:0;padding-bottom:0}
  .cr-nav-r .cr-navlink :is(i,svg) + span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}