/* The college portal's top bar, for pages that use the MLB site's stylesheet (the Grid page). Same look as college.css's .cb-top. */
.cb-top { --cbg: #FFFFFF; --cink: #14171F; --cink2: #677084; --cink3: #6E7687; --cline: #E5E7EB; --cline2: #D0D4DC; --ccard: #FFFFFF; --cacc: #14171F;
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 10px 20px; box-sizing: border-box;
  background: color-mix(in srgb, var(--cbg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 0.5px solid var(--cline);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; color: var(--cink); }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .cb-top { --cbg: #000000; --cink: #FFFFFF; --cink2: rgba(255,255,255,.76); --cink3: rgba(255,255,255,.58); --cline: rgba(255,255,255,.1); --cline2: rgba(255,255,255,.2); --ccard: #161616; --cacc: #FFFFFF; }
.cb-top[hidden] { display: none; }
.cb-nav { display: flex; gap: 4px; }
.cb-nav a { text-decoration: none; padding: 7px 12px; border-radius: 999px; font-weight: 600; color: var(--cink2); }
.cb-nav a.on { background: var(--cacc); color: var(--cbg); }
.cb-who { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cb-who select { font: inherit; padding: 6px 8px; border-radius: 8px; border: .5px solid var(--cline2); background: var(--ccard); color: var(--cink); }
.cb-acct { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--cink2); font-weight: 600; }
.cb-acct .ti { font-size: 20px; }
@media (max-width: 700px) { .cb-top { gap: 10px; padding: 8px 12px; flex-wrap: wrap; } .cb-nav a { padding: 6px 9px; } .cb-who { gap: 6px; } }
.cb-game { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cline2, rgba(0,0,0,.22));
  text-decoration: none; font-weight: 650; color: var(--cink, #1a1a1a); white-space: nowrap; }
.cb-game:hover { background: var(--cacc, #1c1f24); color: var(--cbg, #f5f4ef); }
.cb-game[hidden] { display: none; }
/* the moon / sun: the same quiet icon as the MLB site's corner button (owner 2026-10-21) */
.cb-top .cb-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: transparent; color: var(--cink3); cursor: pointer; font-size: 19px; }
.cb-top .cb-theme:hover, .cb-top .cb-theme:focus-visible { background: var(--ui-fill, rgba(127,127,127,.12)); color: var(--cink); outline: none; }
/* brand lockup (owner 2026-10-20: "looks kinda cheap with college"): COLLEGE set small under the wordmark, spread to its width; then the
   school's own logo + name after a hairline (when the school has sent one) */
.cb-brand { display: flex; align-items: center; text-decoration: none; }
.cb-lock { display: inline-flex; flex-direction: column; gap: 4px; }
.cb-logo svg { height: 21px; width: auto; display: block; color: var(--cink); }
.cb-sub { display: flex; justify-content: space-between; padding: 0 1px; font-size: 8.5px; font-weight: 600; line-height: 1; color: var(--cink3); letter-spacing: 0; text-transform: none; }
.cb-sub i { font-style: normal; }
.cb-school { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--cline2); height: 34px; }
.cb-school[hidden] { display: none; }
.cb-school img { height: 32px; width: auto; display: block; }
.cb-school img[hidden] { display: none; }
.cb-school span { font-weight: 650; font-size: 14.5px; color: var(--cink); white-space: nowrap; }
@media (max-width: 900px) { .cb-school span { display: none; } }
/* the school's color (js/theme.js applyBrand): tabs, buttons, active choices - xPEKT's black / white when a school has none */
:root { --school-accent: var(--sa-light, #14171F); --school-on: var(--sa-light-on, #ffffff); }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) { --school-accent: var(--sa-dark, #FFFFFF); --school-on: var(--sa-dark-on, #000000); }
.cb-top .cb-nav a.on { background: var(--school-accent); color: var(--school-on); }
/* printouts: the school's logo + name across the top, no top bar or watermark */
.cp-print-brand { display: none; }
@media print {
  .cb-top, .cb-watermark { display: none !important; }
  .cp-print-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 3px solid var(--sa-light, #14171F);
    color: #000; font: 650 16px/1.2 -apple-system, BlinkMacSystemFont, "Inter", Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cp-print-brand img { height: 42px; width: auto; }
  .cp-print-brand img[hidden] { display: none; }
  .cp-print-brand .pb-x { margin-left: auto; font-size: 12px; font-weight: 650; color: #555; letter-spacing: .02em; }   /* the brand keeps its own spelling: xPEKT */
}
/* loading: the xPEKT mark (js/theme.js loaderHtml) - both college pages. Every style keeps the brand's red / green / red bars. */
.xl-loader { display: flex; justify-content: center; align-items: center; padding: 72px 0; }
.xl-loader svg { width: 64px; height: auto; overflow: visible; }
.xl-loader .xl-ink { fill: currentColor; }
.xl-loader.mini { display: inline-flex; padding: 0; margin-left: 7px; vertical-align: -4px; }
.xl-loader.mini svg { width: 20px; }
/* trace: a beam racing around the full-color mark's outline */
.xl-trace path.xl-beam, .xl-trace path.xl-glow { fill: none; stroke: var(--school-accent, currentColor); stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 18 82; animation: xl-run 1.5s linear infinite; }
.xl-trace path.xl-beam { stroke-width: 10; } .xl-trace path.xl-glow { stroke-width: 24; opacity: 0.5; }
.xl-loader.mini.xl-trace path.xl-beam { stroke-width: 22; } .xl-loader.mini.xl-trace path.xl-glow { stroke-width: 40; }
@keyframes xl-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* bars: the outline stays, the bars light up one after another, then reset */
.xl-bars .xl-bar { opacity: 0.12; animation: xl-fill 1.6s ease-in-out infinite; }
.xl-bars .b2 { animation-delay: 0.25s; } .xl-bars .b3 { animation-delay: 0.5s; }
@keyframes xl-fill { 0%, 8% { opacity: 0.12; } 22%, 70% { opacity: 1; } 88%, 100% { opacity: 0.12; } }
/* pulse: the full mark, its bars breathing in turn */
.xl-pulse .xl-bar { animation: xl-breathe 1.4s ease-in-out infinite; }
.xl-pulse .b2 { animation-delay: 0.18s; } .xl-pulse .b3 { animation-delay: 0.36s; }
@keyframes xl-breathe { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
/* shine: the wordmark with a light sweeping across it */
.xl-shine .xl-word { display: inline-block; color: currentColor; -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.35) 35%, #000 50%, rgba(0,0,0,.35) 65%);
  mask-image: linear-gradient(100deg, rgba(0,0,0,.35) 35%, #000 50%, rgba(0,0,0,.35) 65%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: xl-sweep 1.6s linear infinite; }
.xl-shine .xl-word svg { width: 170px; display: block; }
.xl-loader.mini.xl-shine .xl-word svg { width: 46px; }
@keyframes xl-sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .xl-loader * { animation-duration: 4s !important; } }
/* the preview page (#/loaders) */
.xl-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.xl-pick { border: 1px solid var(--cline, rgba(0,0,0,.1)); border-radius: 16px; padding: 10px 14px 16px; text-align: center; }
.xl-pick .xl-loader { padding: 34px 0 22px; }
.xl-pick b { display: block; font-size: 15px; } .xl-pick p { margin: 4px 0 10px; font-size: 12.5px; opacity: .7; }
/* phones: the owner's school picker must not push the bar past the screen (audit 2026-10-21) */
@media (max-width: 700px) { #school-pick { max-width: 150px; min-width: 0; text-overflow: ellipsis; } }