/* ============================================================================
   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 18px not 13px (it carries dates and a venue; type scale raised 2026-10-26, Craig: "all of the text is too small"); 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-xs (the guide's standard; was btn-xxs until 2026-10-26; toggle groups stay btn-xxs = their spec), .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,.85);
  --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}
.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.
   PINNED, Craig 2026-10-26: "The background image should not scroll. It should always be in place... The content can scroll
   above it". position:fixed (not background-attachment, which iOS ignores) on the layer the hero already had; the hero lost
   isolation + overflow so this z-index:-2 lands in .cr's stacking context, under every panel instead of over them. */
.cr-hero-bg{position:fixed;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,.5) 0%,rgba(0,0,0,.36) 26%,rgba(0,0,0,.38) 52%,var(--color1xd) 100%);opacity:.92} /* light stops raised from .10/.18 when the photo was pinned: scrolled white text measured 2.2:1 over the sunset band (review 2026-10-26) */
.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:17px;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:18px;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;
}
/* the photo is pinned now (2026-10-26), so every window travels over the bright sunset band: the home's .07 white glass left
   15px captions at 2.9:1 there. A dark tint keeps the blur + edge and holds the text inside at AA while scrolling. */
.cr .cr-box{background:rgba(0,0,0,.34)}
@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 .cr-nw{white-space:nowrap}
.cr-label{font-family:var(--cr-f1);font-weight:400;font-size:16px;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:17px;line-height:1.2;color:#fff}
.cr-hgame-team span{font-family:var(--cr-f1);font-weight:400;font-size:15px;line-height:1.25;color:rgba(255,255,255,.88)}
.cr-hgame-time{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;font-family:var(--cr-f1);font-size:17px;line-height:1.2;color:#fff;white-space:nowrap}
.cr-hgame-time small{font-size:15px;line-height:1.25;color:rgba(255,255,255,.88)}

/* 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:15px;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 > [data-cr-tlink][hidden]{display:none !important}   /* the Tournament page button on ALL / Practices (.btn sets display) */
.cr-sec-head .cr-sec-meta{display:flex;align-items:center;gap:10px;font-size:17px;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:15px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.cr-ph .cr-ph-meta{font-family:var(--cr-f1);font-size:15px;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:18px;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:15px;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:20px;line-height:1.2;color:var(--color3)}
.cr-tr .cr-tn span{font-family:var(--cr-f1);font-size:16px;line-height:1.25;color:var(--color2d)}
.cr-tr .cr-sc{font-family:var(--cr-f1);font-weight:700;font-size:26px;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:17px;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:15px;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:17px;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 td{font-size:inherit}
.cr .cr-table{margin:0;font-family:var(--cr-f1);font-size:18px;color:var(--color3);min-width:620px}
.cr .cr-table th{font-family:var(--cr-f3);font-size:14px;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:15px;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:14px;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;flex-wrap:wrap;row-gap:0;line-height:1.3;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:15px;color:var(--color2d);background:color-mix(in srgb,var(--color2xl) 35%,#fff)}
.cr-bslot-cap > *{white-space:nowrap}
.cr-bslot-t{display:flex;align-items:center;padding:7px 10px;font-size:17px;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:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--color2d);font-weight:400}
.cr-kv dd{font-family:var(--cr-f1);font-size:18px;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:26px;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:20px;line-height:1.2;color:var(--color3)}
.cr-player-n span{font-family:var(--cr-f1);font-size:16px;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:16px;line-height:1;color:var(--color3);background:color-mix(in srgb,var(--color2xl) 45%,#fff)}
.cr-count :is(i,svg){font-size:20px}
.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:17px;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:15px}

/* 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:18px;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:16px;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:15px;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.cr-ev-date .d2{font-family:var(--cr-f2);font-weight:300;font-size:38px;line-height:1}
.cr-ev-date .d3{font-family:var(--cr-f1);font-size:15px;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:21px;line-height:1.2;color:var(--color3)}
.cr-ev-title span{font-family:var(--cr-f1);font-size:17px;line-height:1.35;color:var(--color2d)}
.cr-ev-kind{font-family:var(--cr-f3);font-size:14px;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:18px;font-weight:700;color:var(--color3)}
.cr-mine-row .cr-mine-name .cr-jersey{width:34px;height:34px;font-size:18px;border-radius:6px}
.cr-mine-row .cr-mine-ans{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;flex:1;min-width:150px;font-size:18px;font-weight:600;color:var(--color3)}
.cr-mine-ans :is(i,svg){width:16px;text-align:center}
.cr-mine-ans.is-in :is(i,svg){color:var(--cr-in)}
.cr-mine-ans.is-maybe :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}
.cr-mine-ans.is-out :is(i,svg){color:var(--cr-out)}
.cr-mine-ans.is-none{color:var(--color2d)}
.cr-mine-ans.is-none :is(i,svg){color:var(--color2d)}
.cr-mine-ans small{flex-basis:100%;padding-left:24px;font-size:16px;font-weight:400;color:var(--color2d)}
.cr-mine-row .cr-saved{font-size:16px;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:17px;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:18px;color:var(--color2d)}

/* availability grid */
.cr .cr-grid{min-width:0;font-size:17px}
.cr .cr-grid th,.cr .cr-grid td{text-align:center;padding:8px 6px;font-size:inherit}
.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:var(--cr-stick,0px);z-index:2;background:#fff} /* --cr-stick (js stickToScreen): also held at the top of the screen, Craig 2026-10-28 */
.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:18px;color:var(--color1);letter-spacing:0}
.cr .cr-grid .cr-pcol span{font-family:var(--cr-f1);font-size:16px;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:26px}
.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:17px;color:var(--color3)}
.cr .cr-grid .cr-ev-col span{display:block;font-size:15px;color:var(--color2d)}
.cr .cr-cell{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;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}
/* Craig 2026-11-03: one click toggles a cell, a double click opens its window — manipulation stops a phone's double-tap zoom eating
   the second tap. The coach's date tile is a bare button around the same tile (js paintGrid .cr-rowin -> the Everyone In confirm). */
.cr .cr-grid .cr-cell{touch-action:manipulation}
.cr .cr-grid .cr-rowin{display:inline-flex;flex:none;padding:0;margin:0;border:0;border-radius:10px;background:none;color:inherit;font:inherit;line-height:1;cursor:pointer;touch-action:manipulation}
.cr .cr-grid .cr-rowin: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}
/* Craig 2026-10-26: "don't scroll the events in a window. they must scroll the entire page so it's easy to review" — no height
   cap, no inner vertical scroll: the grid is as tall as its rows and the page scrolls. Sideways scroll stays for the wide roster
   (the event column keeps its sticky left). Declared: the header row no longer pins while the page scrolls (it pinned inside the box). */
.cr .cr-gridscroll{overflow:auto;max-height:max(320px,calc(100vh - 150px));max-height:max(320px,calc(100dvh - 150px))} /* the window scrolls inside itself so thead (sticky top:0) keeps the player numbers in view; js holdAtBottom adds the 1s pause at its bottom (Craig 2026-10-28) */
.cr-grid-status{margin:0;padding:0 16px;font-size:17px;color:var(--color3)}
.cr-grid-status:empty{display:none}
.cr-grid-status.is-err{padding:10px 16px;color:var(--cr-out)}
.cr .cr-grid :is(td.cr-tot,td.cr-g){font-family:var(--cr-os);font-weight:300;font-size:44px;line-height:1;font-variant-numeric:tabular-nums;min-width:64px} /* Craig 2026-10-28: the In total large in green, the G guest count large in gray (the event cards' number blocks' face) */
.cr .cr-grid td.cr-tot{color:var(--cr-in)}
.cr .cr-grid td.cr-g{color:var(--color2d)}
.cr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-top:1px solid var(--color2xl);font-size:16px;color:var(--color2d)}
.cr-legend span{display:inline-flex;align-items:center;gap:6px}
.cr-legend :is(i,svg){font-size:20px}
.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-hero-ctl{align-self:center;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* the grid's view group, out of the window and up in the hero's title row (GameImpact's h1 + group, Craig 2026-10-28); the guide's group is nowrap: on a phone it scrolls sideways inside its own row instead of widening the page */
.cr-sec > .cr-hero-ctl{margin:0 0 16px}
.cr .cr-hero-ctl .btn-toggle-group .btn{white-space:normal} /* the guide's segments wrap normally; .cr .btn (nowrap) won here. .cr .btn flex-shrink:0 still keeps each label on one line */

/* 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 .form-floating > label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* Bootstrap 5.2's own rule; the site loads 5.1.3, so a long label ran out of its field on a phone */
.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:18px;color:var(--color3)}
.cr-mlist .cr-ml-t span{font-size:16px;color:var(--color2d)}
.cr-mlist .cr-actions{flex:1 1 300px;justify-content:flex-end}
/* manage list (js mountManage) — ONE button size on the page. Craig 2026-10-27: "never ever do multiple button sizes and random spaces".
   .btn-xs pads by % of its containing block, so a button's size followed whatever box it landed in (measured at 2769: Add 285x64,
   Edit/Delete 485-500 wide at a different x on every row). Every button now sits in its own fixed track (--cr-mbtn), so they all
   resolve the same; the actions are one right-hand column, the event text one left edge, both centered on the row. Add an event
   lines up with that text edge (same 16px inset). Own class names, so the shared .cr-actions pair rule (0,7,0) never reaches them. */
.cr [data-cr-mount="manage"]{--cr-mbtn:170px}
.cr .cr-madd{display:grid;grid-template-columns:var(--cr-mbtn);padding:0 16px}
.cr .cr-mlist li.cr-mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px}
.cr .cr-mact{display:grid;grid-template-columns:repeat(2,var(--cr-mbtn));gap:10px}
.cr :is(.cr-madd,.cr-mact) > .btn{width:100%;margin:0}
@media (max-width:560px){
  .cr .cr-mlist li.cr-mrow{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .cr :is(.cr-madd,.cr-mact){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
/* a pair of buttons = equal columns side by side (house rule), never a ragged pair or a smaller one under */
.cr .cr-actions:has(> .btn + .btn):not(:has(> .btn + .btn + .btn)){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:10px}
.cr .cr-actions:has(> .btn + .btn):not(:has(> .btn + .btn + .btn)) > .btn{width:100%;margin:0;white-space:normal}
.cr .cr-sec.cr-actions:has(> .btn + .btn){width:max-content;max-width:100%}   /* a page-level pair sizes to its longer label, not to the page */   /* .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:17px;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:18px}

/* 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.
   2026-10-27: :is(.cr, .cr-modals) — the windows on <body> sit outside .cr and showed rgba(0,0,0,.8); :is() keeps (0,2,0).
   (Field FONT comes from turnerlee.com/shared/core/v1/sst-site-structure.css, linked by custom-cr-prelude.html.) */
:is(.cr, .cr-modals) .form-control,
:is(.cr, .cr-modals) .form-select,
:is(.cr, .cr-modals) .form-floating > .form-control,
:is(.cr, .cr-modals) .form-floating > .form-select {
	color: var(--InputColor);
	background-color: var(--InputBgColor);
	border-color: var(--InputBorderColor);
}
:is(.cr, .cr-modals) .form-control:hover,
:is(.cr, .cr-modals) .form-select:hover {
	color: var(--InputColorHover);
	background-color: var(--InputBgColorHover);
	border-color: var(--InputBorderColorHover);
}
:is(.cr, .cr-modals) .form-control:focus,
:is(.cr, .cr-modals) .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}
#cr-payform .flex-xl-nowrap{flex-wrap:wrap !important} /* City/State/Zip at 1200+: nowrap squeezed State to 'C' and Zip to '8051' (review 2026-10-26); Bootstrap's own rule is !important */ /* 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:28px}
  .cr-kv{grid-template-columns:1fr}
  .cr-kv dt{border-bottom:0;padding-bottom:0}
  .cr .cr-grid :is(td.cr-tot,td.cr-g){font-size:34px;min-width:48px}
  .cr .cr-grid th.cr-ev-col,.cr .cr-grid td.cr-ev-col{min-width:170px;max-width:170px} /* 210px leaves under 2 player columns on a 375 screen; times are unbreakable (js t12), the date wraps before them */
  .cr-ph{flex-wrap:wrap;row-gap:2px}
  .cr-ph > *{white-space:nowrap}
  .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}
}

/* ---------- availability window — style guide "Modal: short form" (tracker-modal.css), on <body> in .ct-dashboard ----------
   Built by js/custom-cr-team.js openAv. Everything visible is the guide's; these lines are only the page lock (Books'
   html.tax-modal-open, renamed), the event readout in the second column, and the save error line. */
html.cr-modal-open{overflow:hidden}
/* the guide page's inherited base, measured on #sg-demo-shortform 2026-10-26: 1.03rem / 1.3. This template's html,body{line-height:160%}
   computes to a LENGTH (30.976px) and inherits as one, so the title band drew 71px against the guide's 57px. */
.cr-modals{font-size:1.03rem;line-height:1.3}
.cr-modals [hidden]{display:none !important}
.cr-modals .cr-av-ev{display:flex;flex-direction:column;gap:2px;margin-top:2px;font-size:18px;line-height:1.35;color:var(--ct-text)}
.cr-modals .cr-av-ev b{font-weight:600}
.cr-modals .cr-av-err{margin:0;font-size:17px;color:var(--bs-danger,#dc3545)}
.cr-modals .cr-av-err:empty{display:none}
/* whole-tournament window (js openTv, 2026-10-26): the name buttons in the grid header + card rows keep their text look — a
   button reset, hover = color change only (never underline, never movement) — and the game rows are one line each:
   date + game on the left, the guide's inline radios on the right, wrapping under on narrow screens. */
.cr .cr-pbtn{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.cr .cr-grid button.cr-pbtn{display:flex;flex-direction:column;align-items:center}
.cr .cr-pbtn:hover > span:last-child,.cr .cr-mine-row .cr-pbtn:hover{color:var(--color1)}
.cr .cr-pbtn:focus-visible{outline:2px solid var(--color1);outline-offset:2px;border-radius:6px}
.cr-modals .cr-tv-rows{display:flex;flex-direction:column;gap:10px}
/* one game = one line: date + game in the left track, the four answers in the right (a grid, so the answers never drop under the
   date at the window's 720px — measured 2026-10-26: a wrapping flex row put them 54px below); under 600px they stack */
.cr-modals .cr-tv-row{display:grid;grid-template-columns:minmax(150px,1fr) auto;align-items:center;gap:6px 14px;padding:8px 0;border-top:1px solid var(--ct-line,rgba(0,0,0,.12))}
.cr-modals .cr-tv-row:first-child{border-top:0;padding-top:0}
.cr-modals .cr-tv-ev{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:17px;line-height:1.3;color:var(--ct-text)}
.cr-modals .cr-tv-ev b{font-weight:600}
/* the guide's .ct-radio-group stacks its checks (a column); these two groups are the guide's INLINE variant, so they run across */
.cr-modals .cr-tv-row .ct-radio-group,.cr-modals #cr-tv-all{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px}
.cr-modals .cr-tv-row .ct-radio-group .form-check-inline,.cr-modals #cr-tv-all .form-check-inline{margin-right:0}
@media (max-width:600px){.cr-modals .cr-tv-row{grid-template-columns:1fr}}
/* the whole-tournament window sits IN the page (Craig, same day: the events must scroll with the entire page, never inside a
   window): the backdrop is absolute from the document's top and as tall as the document (js tvPlace sets --cr-tv-h), the card
   starts where the reader is (--cr-tv-top = scrollY + 24) and runs as long as it needs; nothing is locked or capped. */
.cr-modals #cr-tv-modal.open{position:absolute;top:0;left:0;right:0;width:100%;height:var(--cr-tv-h,100%);min-height:100vh;overflow:visible;align-items:flex-start;justify-content:center}
.cr-modals #cr-tv-modal.open .ct-modal{margin:var(--cr-tv-top,24px) auto 48px;max-height:none;overflow:visible}
.cr-modals .cr-tv-none{margin:0;font-size:17px;color:var(--ct-text)}
.cr-modals #cr-tv-modal .ct-modal{max-width:720px}
/* add / edit event window (js openEv, 2026-10-27): the manage form's own 4-column grid, moved into the guide's shell. At the guide's
   640px a column is 139px and Tournament, Who sees it, Round / pool and both score labels cut off; 880px = 199px columns, measured
   with nothing cut. Under 1100px the form's own media rules drop it to 2 columns, then 1. */
.cr-modals #cr-ev-modal .ct-modal{max-width:880px}
.cr-modals #cr-ev-modal .cr-av-err.is-ok{color:var(--ct-text)}   /* "<tournament> is saved. Add its games." — a confirmation, not an error */
/* the type picker (guide .btn-toggle-group) sits OUTSIDE .ct-form-group: tracker-modal.css ".ct-form-group label" (uppercase, 70%, 1px tracking)
   would otherwise restyle its buttons, which are <label>s (measured 2026-10-27 against #sg-demo-togglegroup). 34px under it = the form's own
   row rhythm (22px field margin + 12px grid gap). */
.cr-modals #cr-ev-modal .cr-ev-types{margin-bottom:34px}
.cr-modals{--buttonTextTransform:capitalize}
/* the windows' host carries .onLt (the guide modal's context), and sst-cm-variables-base .onLt re-points every --Input* token to its own
   (#212529 ink), so popup fields stopped reading the page's input tokens the page's own fields use (measured vs the guide's #sg-text,
   2026-10-27: ink #212529 vs rgb(49,0,111)). inherit = the page's value, no hex. */
.cr-modals.onLt{--InputColor:inherit;--InputColorHover:inherit;--InputColorFocus:inherit;--InputBgColor:inherit;--InputBgColorHover:inherit;--InputBgColorFocus:inherit;--InputBorderColor:inherit;--InputBorderColorHover:inherit;--InputBorderColorFocus:inherit}   /* the page's own value (.cr above); unset outside .cr it computed none vs the guide's capitalize */
.cr-modals #cr-ev-modal .cr-ev-types > .ct-form-group{margin:0}
.cr-modals #cr-ev-modal .cr-ev-types .btn-toggle-group{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cr-modals #cr-ev-modal .cr-ev-types .btn-toggle-group > .btn{white-space:nowrap;flex-shrink:0}   /* the page's .cr .btn pair (line 48), which never reaches the windows: without it 'Tournament' wrapped to 'Tournamen / t' at 375 */   /* .cr-filter's answer: the guide's group is nowrap, so on a phone it scrolls inside its row (379px of buttons in a 295px body at 375) */

/* ==== AVAILABILITY — CARDS, DATE TILES, NUMBER BLOCKS, PLAYER PLATES, GRID CIRCLES — 2026-10-26 16:18 MDT ====
   Craig 2026-10-26 (/impeccable): "make my blocks consistent like the turnerlee horizontal cards with hierarchy and beautiful layout
   across all responsive" · "these circles need to be 50% bigger, and subtle light gray border, thin" · "numbers need to be blocks
   like Ops section (all players numbers need to be like this on purple bg)" · "dates ... exactly like these calendar icons/numbers
   from https://craigwhitlock.com/ops/tickets" · "right side of these avail cards need to have numbers like the turnerlee number blocks".
   Sources: TurnerLee Custom_Content/WebHosting/List-Card-Stretch.html (card) · CraigWhitlock css/custom-tickets.css:479-490 (tile,
   md5 19600cc3…) · TurnerLee Content/Pages/ops/subscriptions.html:61-92 + :1272-1274 (number blocks, md5 f9c98cda…) ·
   css/cr-player-card.css + js/cr-jersey.js (plates). (0,2,x)+ so it outranks the older single-class card rules above at every width. */
.cr{--cr-ring:color-mix(in srgb,var(--color2xl) 60%,#fff);--cr-band:color-mix(in srgb,var(--color2xl) 22%,#fff);
  --cr-os:"Open Sans",-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
[data-cr-mount="events"],[data-cr-mount="flight"]{container:crev / inline-size}   /* flight: the group-flight card (Craig 2026-10-29) is an avail card */

/* CARD — plate | title column | number band; the portal card's 1px edge and 15px radius */
.cr .cr-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"date body counts";gap:0;border:1px solid rgba(0,0,0,.2);border-radius:15px;overflow:clip}
.cr .cr-ev > .cr-ev-date{grid-area:date;--cr-ev-bg:var(--color1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;padding:16px 18px;background:var(--cr-ev-bg)}
.cr .cr-ev > .cr-ev-date.is-practice{--cr-ev-bg:var(--color3)}
.cr .cr-ev > .cr-ev-date.is-event{--cr-ev-bg:var(--color2d)}
.cr .cr-ev.has-tc > .cr-ev-date{--cr-ev-bg:var(--cr-tc)}   /* the tournament's color (see TOURNAMENT COLOR above) */
.cr .cr-ev > .cr-ev-body{grid-area:body;justify-content:center;gap:12px;padding:16px 22px}
.cr .cr-ev .cr-ev-title{gap:3px}
.cr .cr-ev .cr-ev-title .cr-ev-kind{font-family:var(--cr-os);font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:uppercase;color:rgba(0,0,0,.5)}
.cr .cr-ev .cr-ev-title b{font-family:var(--cr-os);font-size:22px;font-weight:400;line-height:1.2;color:var(--color1)}
.cr .cr-ev .cr-ev-title > span:not(.cr-ev-kind){font-family:var(--cr-os);font-size:17px;font-weight:400;line-height:1.35;color:var(--color2d)}
.cr .cr-ev > .cr-counts{grid-area:counts;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0;padding:12px 14px;background:var(--cr-band)}

/* DATE TILE = css/cr-cal.css (the tickets tile, one source with the home's next-games row). Contexts only here: on the plate the
   month letters take the plate color; on the white grid the tile inks in purple (the tickets dark-ink variant: purple outline + band,
   white month, purple day) at its small size (.is-sm, set by js calTile). */
.cr .cr-ev .cr-cal{--cr-cal-bg:var(--cr-ev-bg,var(--color1))}
.cr .cr-grid .cr-cal{--cr-cal-ink:var(--color1);--cr-cal-bg:#fff}
/* TOURNAMENT COLOR + DAY STRIPES (Craig 2026-10-26: "instead of alternating rows, it needs to be alternating days — SAT light
   gray (3 games), SUN white"; "Calendar icon could alternate tourneys ... PG should be blue color from logo, USSSA ... TC ..."; "bg of the
   rows per each tourney were super subtle bgs of the same calendar icon"). --cr-tc = CM Tournaments Color, set by js tcAttrs on the
   grid row and the card: the grid tile inks in it, the card's date plate fills with it, and every game of a striped day sits on a
   6% tint of it (a plain 6% gray when the tournament has no color). Bootstrap's table-striped is off this table (js). */
.cr .cr-grid tbody tr.is-alt > th,.cr .cr-grid tbody tr.is-alt > td{background:color-mix(in srgb,var(--cr-tc,#000) 6%,#fff)}
.cr .cr-grid tr.has-tc .cr-cal{--cr-cal-ink:var(--cr-tc)}

/* NUMBER BLOCKS — subscriptions.html: a centered column, light number (font2 there -> Open Sans 300 here) over an uppercase label,
   both in the dark brand ink (color1xd). Number 370% of the block's 16.32px there = 60px; 52px here to sit four across a card. */
.cr .cr-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:86px;padding:4px 12px}
.cr .cr-stat-n{font-family:var(--cr-os);font-weight:300;font-size:52px;line-height:1.3;color:var(--color1xd);font-variant-numeric:tabular-nums}
.cr .cr-stat-l{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--cr-os);font-size:15px;font-weight:400;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:var(--color1xd)}
.cr .cr-stat-l :is(i,svg){font-size:16px}
.cr .cr-stat.is-in .cr-stat-l :is(i,svg){color:var(--cr-in)}
.cr .cr-stat.is-maybe .cr-stat-l :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}
.cr .cr-stat.is-out .cr-stat-l :is(i,svg){color:var(--cr-out)}
.cr .cr-stat.is-none .cr-stat-l :is(i,svg){color:var(--color2d)}

/* PLAYER PLATES — the Books plate (cr-player-card.css): purple field, JerseyM54 silver with the homepage drop shadow */
.cr .cr-jplate{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:44px;border-radius:8px;background:var(--color1);color:#b9bbbd;font-family:var(--cr-os);font-size:18px;line-height:1}
.cr .cr-jplate .cr-jersey-svg{display:block;width:auto;height:28px;max-width:44px;fill:#b9bbbd;filter:drop-shadow(0 2px 3px rgba(8,0,22,.5))}
.cr .cr-mine-row .cr-mine-name .cr-jplate{width:44px;height:36px;border-radius:6px}
.cr .cr-mine-row .cr-mine-name .cr-jplate .cr-jersey-svg{height:22px;max-width:36px}
.cr .cr-who-list li .cr-jplate,.cr .cr-mlist .cr-jplate{width:34px;height:28px;border-radius:5px}
.cr .cr-who-list li .cr-jplate .cr-jersey-svg,.cr .cr-mlist .cr-jplate .cr-jersey-svg{height:16px;max-width:28px;filter:drop-shadow(0 1px 1.5px rgba(8,0,22,.5))}
.cr .cr-mlist li > .cr-jplate{margin-right:-4px}
/* Who's in: icon + plate + name stay on one line; the name wraps inside its own box (it dropped under the plate at a 180px column) */
.cr .cr-who-list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cr .cr-who-list li > span:not(.cr-jplate){flex:1 1 0;min-width:0}
.cr .cr-who-list li > small{flex-basis:100%;padding-left:60px}
.cr .cr-mlist li:has(> .cr-jplate){justify-content:flex-start}
.cr .cr-mlist li:has(> .cr-jplate) .cr-actions{margin-left:auto}

/* GRID — header numbers on plates; circles 26px -> 39px (+50%) with a thin light-gray ring; the event column leads with the tile */
.cr .cr-grid .cr-pcol{gap:6px;min-width:60px}
.cr .cr-grid .cr-pcol.is-mine > span{color:var(--color1)}
.cr .cr-grid td :is(i,svg){font-size:39px}
.cr .cr-grid td svg{border-radius:50%;box-shadow:0 0 0 1px var(--cr-ring)}
.cr .cr-grid .cr-dot{display:block;width:39px;height:39px;margin:0 auto;border:1px solid var(--cr-ring);border-radius:50%;background:#fff;box-sizing:border-box}
.cr .cr-cell{width:56px;height:56px}
/* the same drawn ring in the grid's key and the cards' No reply label, so the key matches the grid */
.cr .cr-dot.is-sm{display:inline-block;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--color2xl);border-radius:50%;background:#fff;box-sizing:border-box}
.cr .cr-grid th.cr-ev-col .cr-evc{display:flex;align-items:center;gap:12px}
.cr .cr-grid th.cr-ev-col .cr-evc-t{display:flex;flex-direction:column;min-width:0}
.cr .cr-grid th.cr-ev-col .cr-cal span{display:block}
/* .cr .cr-grid .cr-ev-col span (0,3,1) paints every span in the column color2d / 15px: the tile's two spans take theirs back */
.cr .cr-grid th.cr-ev-col .cr-cal .cr-cal-month{color:var(--cr-cal-bg);font-size:14px}
.cr .cr-grid th.cr-ev-col .cr-cal .cr-cal-day{color:var(--cr-cal-ink);font-size:32px}
.cr .cr-grid th.cr-ev-col .cr-cal.cr-cal-tbd .cr-cal-day{font-size:18px}

/* RESPONSIVE (the events column's own width): narrow card = plate | body over the number band; phone = the small tile */
/* phone: the event column keeps its 170px (so two player columns still show at 375); the tile sits over its text instead of beside it
   (beside it, measured 375: the text had ~80px and ran to 5 lines) */
@media (max-width:560px){
  .cr .cr-grid th.cr-ev-col .cr-evc{flex-direction:column;align-items:flex-start;gap:6px}
}
@container crev (max-width:860px){
  .cr .cr-ev{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"date body" "date counts"}
  .cr .cr-ev > .cr-counts{justify-content:space-around;padding:8px 10px}
}
@container crev (max-width:560px){
  .cr .cr-ev > .cr-ev-date{padding:12px 10px}
  .cr .cr-ev .cr-cal{flex-basis:64px;width:64px;border-width:2px;border-radius:10px}
  .cr .cr-ev .cr-cal .cr-cal-month{font-size:14px;padding:4px 2px}
  .cr .cr-ev .cr-cal .cr-cal-day{font-size:32px;padding:3px 2px 5px}
  .cr .cr-ev .cr-cal.cr-cal-tbd .cr-cal-day{font-size:18px;padding:10px 2px 12px}
  .cr .cr-ev > .cr-ev-body{padding:12px 14px}
  .cr .cr-ev .cr-ev-title b{font-size:20px}
  /* four equal columns; the icon sits over its label and a two-word label wraps, so IN / MAYBE / OUT / NO REPLY never touch (measured 375: 37/65/50/85px, labels abutting) */
  .cr .cr-ev > .cr-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
  .cr .cr-stat{min-width:0;padding:2px 4px}
  .cr .cr-stat-n{font-size:36px}
  .cr .cr-stat-l{flex-direction:column;gap:3px;font-size:14px;white-space:normal;text-align:center}
  .cr .cr-stat-l :is(i,svg){font-size:16px}
}

/* GROUP FLIGHT TABLE (Craig 2026-10-29: DataTable, every item click-to-copy) — the guide's §7 DataTable (css/cr-datatable.css);
   here only the panel fit and the copy affordance: a hovered filled cell outlines in color1, a copied one flashes the In green */
.cr-flight .cr-ph{padding:12px 16px}
.cr-flight .cr-ph-meta b{font-weight:700}
.cr-flight .cr-ph,.cr-flight .cr-ph-meta{white-space:normal;overflow:visible;text-overflow:clip;min-width:0}   /* the label wraps on a phone instead of clipping */
/* Craig 2026-10-30: "headers are the wrong size ... DataTable in Style Guide SST" — the guide §7 header as measured on
   coloradorockettes.com/ops/style-guide (12.8544px / 700 / caps / 0.771px tracking / Open Sans); the public page lacks the ops stack
   that sets them, so the computed values are pinned here. !important: .font60 and .font2 (_tlc-fonts.css) are !important */
.cr-flight table.dataTable thead th{font-size:12.8544px !important;letter-spacing:.06em;font-family:"Open Sans",HypatiaSans,"Helvetica Neue",Arial,sans-serif !important}
.cr-flight table.dataTable tbody td{font-family:"Open Sans",sans-serif}   /* the guide's cell face, so this table reads like every other DataTable */
.cr-flight td[data-copy]{cursor:pointer}
/* Craig 2026-10-29: "just the text highlight color if it's color4 then highlight on hover is color4xl. dont make a square box on hover or click" — only the text color changes */
.cr-flight td[data-copy]:focus-visible{outline:0}
.cr-flight td[data-copy] .cr-cp{transition:color .12s}
.cr-flight td[data-copy]:hover .cr-cp,.cr-flight td[data-copy]:focus-visible .cr-cp{color:var(--color4xl)}
.cr-flight td.cr-fl-j{width:1%;white-space:nowrap}
/* the SST sticky-thead rule's `background:#fff !important` shorthand (cr-datatable.css, verbatim) resets repeat/position/size after the
   sort-icon rule set them, so a sorted header tiled its arrow across the cell: put them back, one specificity step up */
.cr-flight table.dataTable thead th{background-repeat:no-repeat !important;background-position:right 8px center !important;background-size:8px 12px !important}
.cr-flight table.dataTable thead th.cr-fl-n{cursor:default;background-image:none !important;padding-right:15px !important}   /* the count: no sort arrow */
.cr-flight td.cr-fl-n{color:var(--color2d);text-align:right}
/* COPIED PILL — Craig 2026-10-30: "should not make the square go bigger ... a little tiny alert just directly above it. We do this in the
   Style Guide SST" + "should just say, copied quickly in a little pill and fade away". The guide's .copy-click::after tooltip
   (t_tlc-3rdparty.css), geometry verbatim, shown only in the copied state; the cell itself never changes size or text */
.cr-flight td[data-copy] .cr-cp{position:relative}
.cr-flight td[data-copy] .cr-cp::after{content:"Copied";position:absolute;bottom:calc(100% + 6px);left:50%;z-index:9;padding:8px 16px;white-space:nowrap;
  background-color:white;border-radius:4px;box-shadow:rgba(0,0,0,0) 0 0 0 -12px;pointer-events:none;backface-visibility:hidden;opacity:0;transform:translate(-50%,12px);
  font:400 11.0334px/1 "Open Sans",sans-serif;text-transform:uppercase;letter-spacing:normal;color:var(--color1);
  transition:box-shadow .3s ease,opacity .3s ease,transform .3s ease}
.cr-flight td[data-copy].is-copied .cr-cp::after{box-shadow:rgba(0,0,0,.1) 0 4px 8px;opacity:1;transform:translate(-50%,0)}
/* STATUS — Craig 2026-10-30: "I don't need the word in. I just need a big checkmark ... same as with each game" = the game card's
   Who's in icon (custom-cr-tournament.css .crt-gc-who li > i: 36px) */
.cr-flight td.cr-fl-st{white-space:nowrap}
.cr-flight td.cr-fl-st :is(i,svg){width:36px;height:36px;font-size:36px;vertical-align:middle}
.cr-flight td.cr-fl-st.is-in :is(i,svg){color:var(--cr-in)}
.cr-flight td.cr-fl-st.is-maybe :is(i,svg){color:color-mix(in srgb,var(--cr-maybe) 70%,#000)}

/* Craig 2026-11-01: shared game scores beside logos on Team Portal event cards, using the portal's current font and ink. */
.cr .cr-match{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cr .cr-match-side{display:inline-flex;align-items:center;gap:8px}
.cr .cr-match-side > img,.cr .cr-match-initials{width:40px;height:40px;object-fit:contain;flex:none}
.cr .cr-match-initials{display:grid;place-items:center;border:1px solid var(--color1);border-radius:50%;font:700 16px/1 var(--cr-os);color:var(--color1)}
.cr .cr-match-score{font:700 36px/1 var(--cr-os);color:var(--color1);font-variant-numeric:tabular-nums}
.cr .cr-match-vs{font:400 18px/1 var(--cr-os);color:var(--color2d)}