/* Colossal Heads — clubhouse design system, in the TMVL house style.
   Navy body, slate header bars, slab-serif display, newspaper columns. */
:root{
  --navy:#002e6d; --slate:#29363b; --slate2:#475a62; --gray:#8f9a9f;
  --blue:#1d66ab; --cont:#efefef; --paper:#ffffff; --ink:#2b3640;
  --ink-soft:#5b6770; --ink-faint:#8a949c; --line:#d5dade; --gold:#f2cf63;
  --slab:'Zilla Slab', Georgia, serif;
  --body:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--navy);font-family:var(--body);font-size:13px;color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.45}
a{color:inherit;text-decoration:none}
#ch{max-width:1040px;margin:0 auto;background:var(--cont)}

/* the marquee - the red box: what the league needs you to know, above everything */
.ch-alerts{background:#8b1a1a;border:2px solid #b02a2a;padding:3px;
  display:flex;flex-direction:column;gap:3px}
.ch-alerts .al{padding:5px 10px;font-size:12px;font-weight:bold;color:#fff;
  line-height:1.35}
.ch-alerts .al a{color:#fff;text-decoration:underline}
.ch-alerts .al b{font-weight:bold}
.ch-alerts .al.note{background:#7d2fa0}      /* the plain announcement */
.ch-alerts .al.deadline{background:#a2248c}  /* a clock is running */
.ch-alerts .al.good{background:#1b7a34}      /* a nudge, an opportunity */
.ch-alerts .al.warn{background:#b4560d}      /* something is wrong or about to be */
.ch-alerts .al.quiet{background:#3a474d}     /* housekeeping */

/* orders strip */
.ch-orders{background:var(--slate);color:#cdd4d8;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;padding:6px 12px;font-size:12px;border-bottom:1px solid #1b2429}
.ch-orders b{color:var(--gold);font-family:var(--slab);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:12px}
.ch-orders .who{display:flex;gap:5px}
.ch-orders .hd{width:22px;height:22px;border-radius:50%;border:2px solid #3a474d}
.ch-orders .rt{margin-left:auto;color:#9aa4ab}
.ch-orders .rt a{color:var(--gold)}

/* masthead */
/* Everything in the masthead hangs from the top edge now: the ball and the wordmark first,
   the season line stepped in under them, and the coach's line opposite. align-items was
   center, which left the brand floating in the middle of the bar with the season line
   opposite it like a second heading. */
.ch-mast{background:var(--slate);color:#fff;display:flex;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 16px}
/* The badge is no longer trapped on the wordmark's line - it sits beside the whole block and
   stretches to whatever height the name and the season line make together, which is what
   "let the logo explore the space top to bottom" asks for. aspect-ratio keeps it a circle at
   whatever that height turns out to be, so it never needs a hard-coded size again.

   The wordmark rides at the very top: line-height 1 and a small negative lift, because a
   slab face leaves air above its caps and the eye reads that gap as the text sitting low. */
.ch-idcol{display:flex;align-items:flex-start;gap:13px;min-width:0}
.ch-idtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch-brand{display:flex;align-items:center;gap:13px}
/* 58px is the stack it stands beside: the 31px wordmark, the 2px gap and the 25px season
   line. Sized outright rather than stretched - align-self:stretch with aspect-ratio:1 feeds
   its own height back through its width and the old round badge ran away to 119px. The
   heads are wide, not round, so only the height is fixed and the width follows. */
.ch-logo{height:58px;width:auto;flex:none;display:block}
.ch-word{font-family:var(--slab);font-weight:700;font-size:31px;line-height:1;
  text-transform:uppercase;letter-spacing:.005em;margin-top:-3px}
.ch-word .u{color:#aeb8bd}
.ch-circle{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;
  border:2px solid var(--gold);color:var(--gold);font-family:var(--slab);font-weight:700;
  font-size:13px;vertical-align:middle;margin:0 4px}
/* Already under the wordmark now that both share a column, so the indent is a step in from
   it rather than a reach across the badge. Smaller than it was, because it is a subtitle:
   it says where in the year this page is, it does not share billing with the name. */
.ch-season{font-family:var(--slab);font-weight:400;color:#9aa4ab;font-size:16px;
  text-transform:uppercase;white-space:nowrap;margin-left:14px}
@media (max-width:520px){.ch-season{margin-left:0;white-space:normal}}
.ch-season b{color:#cfd6da;font-weight:600}
.ch-sep{color:#7f8b92}

/* nav */
.ch-nav{background:var(--slate2);display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto;
  font-family:var(--slab);font-weight:400;font-size:13px}
.ch-nav a{color:#fff;padding:7px 10px 8px;border-right:1px solid rgba(255,255,255,.12);white-space:nowrap}
.ch-nav a.on{background:rgba(0,0,0,.18);font-weight:600}
.ch-nav a:hover{background:rgba(0,0,0,.14)}
/* The sub bar wraps rather than scrolls, and does not clip: a scrolling bar would cut the
   Handbook menu off at its own bottom edge, and on a narrow screen half the row was simply
   out of sight with nothing to say so. */
.ch-sub{background:var(--gray);color:var(--slate);display:flex;flex-wrap:wrap;gap:12px;
  padding:5px 14px;font-size:11px;align-items:center;overflow:visible;position:relative}
.ch-sub a{white-space:nowrap}
.ch-sub a{color:var(--slate)}
.ch-sub a:hover{text-decoration:underline}
.ch-sub .who2{margin-left:auto;color:#26333a}
.ch-sub .who2 b{color:#111}
.ch-sub .jn{font-weight:bold;color:#3a1f00}
/* The right end of the second bar: Waitlist, and Join / Login when nobody is signed in. */
.ch-sub .ch-subr{margin-left:auto;display:inline-flex;align-items:center;gap:12px}
.ch-sub .ch-subr a.on{font-weight:bold}

/* The Handbook menu. Opens on hover for a mouse, on focus for a keyboard, and on a tap
   through the .open class - so it works without waiting for the script. */
.ch-drop{position:relative;display:inline-flex}
.ch-drop .dt{font:inherit;font-family:inherit;font-size:11px;color:var(--slate);background:none;
  border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap}
.ch-drop.on .dt{font-weight:bold}
.ch-drop .dt:hover{text-decoration:underline}
.ch-drop .dt .ca{font-size:9px;line-height:1;transition:transform .12s}
.ch-drop:hover .dt .ca,.ch-drop.open .dt .ca{transform:rotate(180deg)}
.ch-drop .dm{position:absolute;top:100%;left:-10px;margin-top:5px;display:none;z-index:60;
  min-width:158px;background:var(--slate);border:1px solid #1b2429;
  box-shadow:0 6px 16px rgba(0,0,0,.3);padding:4px 0}
.ch-drop:hover .dm,.ch-drop:focus-within .dm,.ch-drop.open .dm{display:block}
.ch-drop .dm a{display:block;padding:5px 13px;color:#e4e9ec;font-size:11.5px;white-space:nowrap}
.ch-drop .dm a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.ch-drop .dm a.on{font-weight:bold;color:var(--gold)}
.ch-drop .dt:focus-visible,.ch-drop .dm a:focus-visible{outline:2px solid var(--gold);
  outline-offset:1px}
@media (prefers-reduced-motion:reduce){.ch-drop .dt .ca{transition:none}}

/* badge row */
/* Four rows of twelve. A wrapping flex row sized the chips to the text inside them, which
   capped them at 38px - too small for a painted mascot to read. A fixed 12-column grid lets
   each chip take a whole cell instead, so the logos get roughly double the area. */
/* Six conference blocks across, each a two-wide column of eight crests under its own
   name. Still four rows of twelve overall, but the pairs are readable as leagues, and
   the blocks run left to right roughly west to east across the country. */
.ch-badges{background:var(--paper);padding:10px 12px;display:grid;
  grid-template-columns:repeat(6,1fr);gap:10px 16px;
  border-bottom:1px solid var(--line)}
.ch-conf{display:flex;flex-direction:column;gap:6px;min-width:0}
.ch-conf-name{font-family:var(--slab);font-weight:700;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-bottom:2px;
  border-bottom:1px solid var(--line)}
.ch-conf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;justify-items:center}
@media(max-width:1000px){.ch-badges{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ch-badges{grid-template-columns:repeat(2,1fr)}}
.ch-conftag{font-family:var(--slab);font-weight:700;font-size:10px;text-transform:uppercase;
  color:#fff;background:var(--slate2);padding:3px 5px;border-radius:2px;letter-spacing:.03em}
.ch-badge{width:100%;max-width:74px;aspect-ratio:1;border-radius:50%;display:grid;
  place-items:center;font-family:var(--slab);font-weight:700;font-size:13px;
  border:2px solid var(--bd,#fff);transition:transform .1s}
a.ch-badge{cursor:pointer}
.ch-badge:hover{transform:scale(1.08)}
.ch-badge:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* A chip showing a painted logo, at ANY size. ch_chip() emits .has-logo for every chip
   class - ch-badge, mini, thumb - so the sizing has to be class-agnostic: without it the
   256px PNG renders at natural size and pours out of a 27px slate chip. Percentages keep
   the same inset at every diameter, and the white disc is needed because the art is drawn
   in the team's own colours and would vanish on the team's own background. */
.has-logo{background:#fff}
.has-logo img{width:84%;height:84%;object-fit:contain;display:block}

/* session banner */
.ch-banner{background:var(--blue);color:#fff;font-family:var(--slab);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:14px;padding:7px 16px}
.ch-banner .g{color:#bfe0ff;font-weight:400}

/* columns */
.ch-cols{display:grid;grid-template-columns:1fr 330px 288px;gap:10px;padding:10px}
@media(max-width:980px){.ch-cols{grid-template-columns:1fr 300px}}
@media(max-width:700px){.ch-cols{grid-template-columns:1fr}}
.ch-col{display:flex;flex-direction:column;gap:10px;min-width:0}

/* boxes + section headers */
.box{background:var(--paper);border:1px solid var(--line)}

/* Pictures in comments - Allan, 2026-09-10: "keep image small normally but let people hover
   and open it to make it larger". Small by default, bigger under the pointer, full size on a
   click (js/comments.js draws the lightbox). The homepage Wall is the right-hand column, so a
   picture there grows leftward into the page, never off its edge; a game thread is full width
   and grows the other way. */
.wpost .wimg{display:inline-block;margin-top:6px;line-height:0;position:relative;z-index:1;cursor:zoom-in}
.wpost .wimg img{display:block;max-width:220px;max-height:140px;width:auto;height:auto;
  border:1px solid var(--line);border-radius:4px;background:#fff;transform-origin:top right;
  transition:transform .15s ease,box-shadow .15s ease}
.box.wall.thread .wpost .wimg img{transform-origin:top left}
.wpost .wimg:hover{z-index:30}
.wpost .wimg:hover img{transform:scale(1.8);box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media (hover:none){.wpost .wimg:hover img{transform:none;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.wpost .wimg img{transition:none}}
.cmt-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(10,16,22,.86);display:flex;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.cmt-lightbox img{max-width:100%;max-height:100%;border-radius:4px;background:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
/* The composer's side: a camera to pick a file, and the picture waiting to go with its x. */
.cmt-attach{cursor:pointer;font-size:15px;line-height:1;opacity:.7;margin-left:6px;user-select:none}
.cmt-attach:hover{opacity:1}
.cmt-preview{display:flex;align-items:flex-start;gap:6px;margin:6px 0 2px}
.cmt-preview[hidden]{display:none}
.cmt-preview img{max-width:160px;max-height:90px;border:1px solid var(--line);border-radius:3px;background:#fff}
.cmt-preview .cmt-unpic{border:0;background:#e3e8eb;color:var(--ink);border-radius:50%;width:20px;height:20px;
  line-height:20px;padding:0;cursor:pointer;font-size:14px}
.cmt-preview .cmt-unpic:hover{background:#d3dadf}

/* Learn the game - the front page's tutorial cards (include_learn.php). Allan, 2026-09-10.
   The classes card lays the five years out as five columns: what the year gives (segments a
   skill, drawn as five pips) and what it means. The last year is gold-topped: it graduates. */
.ch-learn{padding:10px 10px 0}
.box.learn .lc-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.box.learn .lc-yr{border:1px solid var(--line);border-top:3px solid var(--slate2);border-radius:3px;
  padding:8px 10px 9px;background:#fbfcfc;display:flex;flex-direction:column;min-width:0}
.box.learn .lc-yr.last{border-top-color:var(--gold)}
.box.learn .lc-code{font-family:var(--slab);font-weight:700;font-size:20px;color:var(--slate);line-height:1}
.box.learn .lc-nm{font-family:var(--slab);font-size:13px;color:var(--ink-soft);margin-left:6px}
.box.learn .lc-when{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-top:3px}
.box.learn .lc-seg{display:flex;gap:3px;margin:9px 0 3px}
.box.learn .lc-seg i{width:16px;height:8px;border-radius:2px;background:#e1e6e9}
.box.learn .lc-seg i.on{background:#2f8f4e}
.box.learn .lc-segtx{font-size:11.5px;color:var(--ink)}
.box.learn .lc-segtx b{font-family:var(--slab);font-size:13px}
.box.learn .lc-note{font-size:11.5px;color:var(--ink-soft);margin-top:5px;line-height:1.4;flex:1}
.box.learn .lc-flag{align-self:flex-start;margin-top:7px;font-size:10.5px;font-weight:600;padding:1px 7px;
  border-radius:9px;background:#fdf0ec;color:#a3372a}
.box.learn .lc-flag.never{background:#eaf5ed;color:#2a7c46}
.box.learn .lc-foot{margin:11px 0 1px 18px;font-size:12.5px;color:var(--ink);line-height:1.5}
.box.learn .lc-foot li{margin:2px 0}
/* Basic first, advanced folded - Allan, 2026-09-10: the segments were "advanced". The basic
   columns carry one plain-English line; the numbers live in a <details> a coach opens. */
.box.learn .lc-mean{font-size:12px;color:var(--ink);margin-top:7px;line-height:1.45;flex:1}
.box.learn details.lc-adv{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.box.learn details.lc-adv summary{cursor:pointer;list-style:none;font-family:var(--slab);font-weight:600;
  font-size:13px;color:var(--blue)}
.box.learn details.lc-adv summary::-webkit-details-marker{display:none}
.box.learn details.lc-adv summary::before{content:'\25B8  ';color:var(--ink-faint)}
.box.learn details.lc-adv[open] summary::before{content:'\25BE  '}
.box.learn details.lc-adv summary:hover{text-decoration:underline}
.box.learn .lc-ladder.adv{margin-top:9px}
.box.learn .lc-ladder.adv .lc-yr{background:#fff;border-top-width:2px;padding:7px 10px 8px}
/* The cards are a carousel - Allan, 2026-09-10: "a mindset on these cards of a carousel". One card
   shows at a time; the arrows in its header page through the deck, and any word that has a
   card of its own (POT, ...) is a link that slides the deck to it. Without JavaScript every
   card simply stacks and the same links jump down the page - .js-deck is added by the script. */
.learn-deck.js-deck .box.learn{display:none}
.learn-deck.js-deck .box.learn.is-current{display:block}
.box.learn + .box.learn{margin-top:10px}
.learn-deck.js-deck .box.learn + .box.learn{margin-top:0}
.box.learn .lc-deck{float:right;display:flex;align-items:center;gap:7px;font-family:var(--body);
  font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none}
.box.learn .lc-deck a{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;font-size:13px;line-height:1}
.box.learn .lc-deck a:hover{background:rgba(255,255,255,.16)}
.box.learn .lc-deck .lc-count{opacity:.8;min-width:38px;text-align:center}
.box.learn .lc-lead{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--ink)}
/* A word with a card of its own. */
.box.learn a.lc-term{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px dotted currentColor}
.box.learn a.lc-term:hover{border-bottom-style:solid}
/* The POT card's camp table: free segments a season, by potential and class. */
.box.learn table.lc-camp{border-collapse:collapse;margin:8px 0 2px;font-size:12px;background:#fff}
.box.learn table.lc-camp th,.box.learn table.lc-camp td{border:1px solid var(--line);padding:4px 10px;text-align:center}
.box.learn table.lc-camp th{background:#f3f5f6;font-family:var(--slab);font-weight:600;color:var(--slate)}
.box.learn table.lc-camp td.z{color:var(--ink-faint)}
.box.learn .lc-pots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.box.learn .lc-pot{border:1px solid var(--line);border-radius:3px;padding:8px 10px 9px;background:#fbfcfc;text-align:center}
/* ">" and not a space: the figure is the tile's own <b>. With a space it also caught any bold
   word in the tile's text, and "Depth Chart" on the CP card came out as a 22px figure. */
.box.learn .lc-pot > b{display:block;font-family:var(--slab);font-size:22px;color:var(--slate);line-height:1}
.box.learn .lc-pot span{display:block;font-size:11px;color:var(--ink-soft);margin-top:4px;line-height:1.35}
.box.learn .lc-pot i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-faint);margin-top:3px}
/* The CP card's four steps reuse the POT tiles, four across, words left-aligned under the figure. */
.box.learn .lc-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.box.learn .lc-steps .lc-pot{text-align:left}
.box.learn .lc-steps .lc-pot i{text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.box.learn .lc-steps .lc-pot span{font-size:12px;color:var(--ink)}
/* The skills card: seven tiles across, then a position table (core / also counts / a dot). */
.box.learn .lc-skills{grid-template-columns:repeat(7,minmax(0,1fr))}
.box.learn .lc-skills .lc-pot{text-align:left}
.box.learn .lc-skills .lc-pot > b{font-size:17px}
.box.learn .lc-skills .lc-pot i{text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.box.learn .lc-skills .lc-pot span{font-size:11.5px;color:var(--ink)}
.box.learn .lc-tblwrap{overflow-x:auto}
.box.learn table.lc-pos td{font-size:14px;line-height:1;padding:5px 12px}
.box.learn table.lc-pos td.core{color:#2f8f4e}
.box.learn table.lc-pos td.also{color:var(--slate2)}
@media(max-width:900px){.box.learn .lc-skills{grid-template-columns:repeat(4,minmax(0,1fr))}
  .box.learn .lc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.box.learn .lc-pots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.box.learn .lc-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.box.learn .lc-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sh{background:var(--slate);color:#fff;font-family:var(--slab);font-weight:500;
  text-transform:uppercase;font-size:13.5px;letter-spacing:.04em;padding:4px 9px 3px;
  border-bottom:2px solid var(--blue);display:flex;align-items:baseline;gap:8px}
.sh .r{margin-left:auto;font-size:11px;color:#b9c2c7;font-weight:400}
.bd{padding:9px 11px}
.more{padding:6px 11px;font-size:11.5px;border-top:1px solid var(--line)}
.more a{color:var(--blue);font-weight:bold}

/* slate */
.grow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:520px){.grow{grid-template-columns:1fr}}
.gm{background:var(--paper);padding:9px 11px}
.gm .t{display:flex;align-items:center;gap:8px;padding:3px 0}
.mini{width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--slab);font-weight:700;font-size:8px;border:1.5px solid var(--bd,#fff)}
.gm .nm{font-family:var(--slab);font-weight:600;font-size:15px}
.gm .rk{font-family:var(--slab);font-weight:700;font-size:11px;color:var(--gold);
  background:var(--slate);border-radius:3px;padding:0 4px;margin-right:2px}
.gm .rc{margin-left:auto;color:var(--ink-faint);font-size:12px;font-variant-numeric:tabular-nums}
.gm .pv{font-size:10.5px;color:var(--blue);font-weight:bold;text-transform:uppercase;
  letter-spacing:.03em;padding-top:5px;border-top:1px dashed var(--line);margin-top:4px}

/* list entries */
.ent{display:flex;gap:9px;padding:8px 11px;border-bottom:1px solid #edeef0;align-items:flex-start}
.ent:last-child{border-bottom:0}
.thumb{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--slab);font-weight:700;font-size:9px;border:2px solid var(--bd,#fff)}
.ent .h4{font-family:var(--slab);font-weight:600;font-size:14px;color:#123;line-height:1.18}
.ent .h4:hover{color:var(--blue)}
.ent .m{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.tag2{font-family:var(--slab);font-weight:700;font-size:9px;text-transform:uppercase;
  color:#fff;background:#3a7a3f;padding:1px 4px;border-radius:2px;letter-spacing:.03em;margin-right:4px}
.tag2.b{background:var(--blue)}.tag2.o{background:#b4531f}

/* key stats */
.substat{background:var(--gray);color:var(--slate);font-family:var(--slab);font-weight:600;
  text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding:3px 11px}
.kv{display:flex;align-items:center;gap:9px;padding:5px 11px;border-bottom:1px solid #edeef0}
.kv:last-child{border-bottom:0}
.kv .k{font-family:var(--slab);font-weight:700;color:var(--ink-faint);width:14px;text-align:right}
.kv .sw{width:16px;height:16px;border-radius:4px;flex:none;border:1.5px solid var(--bd,#fff)}
.kv .n{font-weight:600}.kv .tm{color:var(--ink-faint);font-size:11px}
.kv .v{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-family:var(--slab);font-weight:600}

/* rankings */
.rk{display:flex;align-items:center;gap:9px;padding:5px 10px;border-bottom:1px solid #edeef0}
.rk:last-child{border-bottom:0}
.rk.top{background:#fbf1c9}
.rk .p{font-family:var(--slab);font-weight:700;font-size:15px;width:22px;text-align:center;
  color:var(--ink-faint);font-variant-numeric:tabular-nums}
.rk.top .p{color:#946c00}
.rk .sw{width:20px;height:20px;border-radius:50%;flex:none;border:1.5px solid var(--bd,#fff)}
.rk .tn{font-family:var(--slab);font-weight:600;font-size:14px}
.rk .cf{font-size:10px;color:var(--ink-faint);text-transform:uppercase;margin-left:3px}
.rk .wl{margin-left:auto;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rk .mv{width:32px;text-align:right;font-family:var(--slab);font-weight:700;font-size:11px}
.up{color:#2f8f4e}.dn{color:#c0483a}.fl{color:var(--ink-faint)}.nw{color:var(--blue)}

/* blog */
.blog .ent .thumb{border-radius:4px}

/* the wall */
.wall .bd{padding:0}
.wpost{display:flex;gap:8px;padding:8px 11px;border-bottom:1px solid #edeef0;align-items:flex-start}
.wpost:last-child{border-bottom:0}
.wav{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--slab);font-weight:700;font-size:8px;border:2px solid var(--bd,#fff)}
.wpost .wb{min-width:0;flex:1 1 auto}   /* grows, so the edit box gets the full width */
.wpost .wby{font-family:var(--slab);font-weight:700;font-size:11px;text-transform:uppercase;
  color:var(--ink-soft);letter-spacing:.02em}
.wpost .wt{font-size:11px;color:var(--ink-faint);margin-left:5px;font-family:var(--body);
  text-transform:none;letter-spacing:0;font-weight:400}
.wpost .wtx{font-size:12.5px;line-height:1.35;color:#26323a;margin-top:1px;
  overflow-wrap:anywhere}
.wform{padding:9px 11px;border-bottom:1px solid var(--line);background:#f6f8f9}
.wform textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:7px;
  font-family:var(--body);font-size:12.5px;resize:vertical;min-height:52px;background:#fff}
.wform .wr{display:flex;align-items:center;gap:8px;margin-top:6px}
.wform button{font-family:var(--slab);font-weight:600;text-transform:uppercase;font-size:12px;
  letter-spacing:.03em;color:#fff;background:var(--blue);border:0;border-radius:4px;
  padding:6px 13px;cursor:pointer}
.wform button:hover{background:#17548c}
.wform .as{font-size:11px;color:var(--ink-faint)}
.wlogin{padding:10px 11px;font-size:12px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.wlogin a{color:var(--blue);font-weight:bold}

/* Emoji in anything a coach wrote: 15% larger than the text around them, whatever size
   that text is, because at comment sizes an emoji reads smaller than it looks. em, not
   px, so the rule holds in every box on the site. */
.emo{font-size:1.15em;line-height:1;vertical-align:-.06em;font-family:"Apple Color Emoji",
  "Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* tagging: @handles in a post, the picker under the box, the Mentions page */
.wment{color:var(--blue);font-weight:600;text-decoration:none;background:#e9f1f9;
  border-radius:2px;padding:0 2px;margin:0 -1px}
.wment:hover{text-decoration:underline}
.wpost .wnew{font-family:var(--slab);font-weight:700;font-size:9px;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;background:#c0483a;border-radius:3px;padding:1px 4px;margin-left:6px}
.ch-nav .pip{display:inline-block;min-width:16px;text-align:center;font-size:10px;font-weight:700;
  line-height:16px;border-radius:8px;background:#c0483a;color:#fff;margin-left:5px;padding:0 4px}
.wmentwrap{position:relative}
.wmenu{position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;
  border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 20px rgba(16,24,32,.2);
  max-height:212px;overflow:auto}
.wmi{display:flex;align-items:center;gap:7px;padding:5px 8px;cursor:pointer;font-size:12px}
.wmi.on,.wmi:hover{background:#eef4f9}
.wmi .wmc{font-family:var(--slab);font-weight:700;font-size:9px;letter-spacing:.03em;
  border-radius:3px;padding:2px 4px;min-width:34px;text-align:center}
.wmi b{font-family:var(--slab);font-weight:600}
.wmi .wmn{color:var(--ink-faint);font-size:11px;margin-left:auto}

/* the tagging explainer on the Mentions page */
.tagguide{margin-top:12px}
.tagguide .bd{padding:12px 14px;font-size:12.5px;line-height:1.5;color:#26323a}
.tagguide .lead{margin:0 0 10px;color:var(--ink-soft)}
.tagguide h4{font-family:var(--slab);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--blue);margin:14px 0 5px}
.tagguide p{margin:0 0 8px}
.tagguide ul{margin:0 0 8px;padding-left:18px}
.tagguide li{margin-bottom:4px}
.tagguide table.data{margin:4px 0 8px;font-size:12px}
.tagguide .wment{margin-right:3px}
.tagguide .wnew{font-family:var(--slab);font-weight:700;font-size:9px;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;background:#c0483a;border-radius:3px;padding:1px 4px}

/* the emoji button and its popup (js/emoji-picker.js) */
.cmt-emoji-btn{cursor:pointer;font-size:16px;line-height:1;user-select:none;opacity:.75}
.cmt-emoji-btn:hover{opacity:1}
.cmt-emoji-popup{position:absolute;z-index:1000;background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:0 6px 18px rgba(16,24,32,.2);padding:6px;display:flex;
  flex-wrap:wrap;width:214px;gap:2px}
.cmt-emoji-popup span{cursor:pointer;font-size:18px;padding:3px;border-radius:4px;line-height:1.4}
.cmt-emoji-popup span:hover{background:#eef4f9}

/* the fifteen-minute edit window (js/comment-edit-delete.js) */
.wpost .cmt-edit{font-size:10.5px;color:var(--blue);margin-left:6px;cursor:pointer;font-weight:600}
.wpost .cmt-edit:hover{text-decoration:underline}
.wpost .wedited{font-size:10.5px;color:var(--ink-faint);margin-left:5px;font-style:italic;cursor:help}
.cmt-editbox{margin:3px 0 1px;position:relative}
.cmt-editbox textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:6px;
  font-family:var(--body);font-size:12.5px;resize:vertical;min-height:48px;background:#fff;
  box-sizing:border-box}
.cmt-editrow{display:flex;align-items:center;gap:9px;margin-top:4px}
.cmt-save{font-family:var(--slab);font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.03em;color:#fff;background:var(--blue);border:0;border-radius:4px;
  padding:4px 11px;cursor:pointer}
.cmt-save:hover{background:#17548c}
.cmt-save:disabled{opacity:.5;cursor:default}
.cmt-cancel{font-size:11px;color:var(--ink-faint);cursor:pointer}
.cmt-cancel:hover{color:#b23a2a}

/* what the AJAX poster says back (js/comments.js) */
.cmt-note{font-size:11px;color:var(--ink-faint);margin-left:8px}
.cmt-note.bad{color:#c0483a;font-weight:600}
.wpost.wnewpost{animation:wfade .45s ease-out}
@keyframes wfade{from{opacity:0;background:#fffbe6}to{opacity:1;background:transparent}}

/* tag from anywhere: the dock in the corner of every page */
.wdock{position:fixed;right:14px;bottom:14px;z-index:900;font-family:var(--body)}
.wdock-tab{font-family:var(--slab);font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.04em;color:#fff;background:var(--blue);border:0;border-radius:16px;
  padding:8px 14px;cursor:pointer;box-shadow:0 3px 10px rgba(16,24,32,.3)}
.wdock-tab:hover{background:#17548c}
.wdock-card{width:310px;background:var(--paper);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 28px rgba(16,24,32,.32);overflow:visible}
.wdock-h{display:flex;align-items:center;font-family:var(--slab);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
  padding:7px 10px;border-bottom:1px solid var(--line);background:#f6f8f9}
.wdock-x{margin-left:auto;border:0;background:none;color:var(--ink-faint);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px}
.wdock-x:hover{color:#b23a2a}
.wdock .wform{border-bottom:0}
.wdock .wform textarea{min-height:64px}

/* footer */
.ch-foot{padding:12px 16px;color:#9fb2cf;font-size:11px;text-align:center;
  font-family:var(--slab);letter-spacing:.05em;text-transform:uppercase}

/* generic content (interior pages that adopt the chrome) */
.ch-page{background:var(--paper);margin:10px;border:1px solid var(--line)}
.ch-page .bd{padding:14px 16px}
.gm .wx{font-size:10.5px;color:#b9c2c8;margin:2px 0 0;letter-spacing:.02em}.gm .wx small{color:#7d8a92;text-transform:uppercase;font-size:9px;margin-left:4px}
.gm .rv{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b23a2a;margin:0 0 3px}
.thread-wrap{max-width:640px;margin:18px 0 10px}
.wpost .wgame{font-size:10.5px;color:var(--blue);margin-left:6px;text-decoration:none;font-weight:600}
.wpost .wdel{display:inline;margin-left:5px;vertical-align:-1px}
.wpost .wdel button{border:0;background:none;color:var(--ink-soft);cursor:pointer;
  font-size:18px;line-height:1;padding:0 5px;border-radius:3px}
.wpost .wdel button:hover{color:#fff;background:#b23a2a}
.wempty{padding:12px;font-size:12.5px;color:var(--ink-faint)}
.thread .wform{border-top:1px solid var(--line);border-bottom:0}
.gm .ln{font-size:10.5px;color:var(--ink-faint);margin:2px 0 0}

/* Homepage postseason door - TMVL-style bracket panels, deliberately spoiler-free */
.box.postseason .ps-panel{display:block;padding:8px 11px 9px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.box.postseason .ps-panel:last-child{border-bottom:0}
.box.postseason .ps-panel:hover{background:var(--slate2,#f3f5f6)}
.box.postseason .ps-title{font-family:Georgia,serif;font-size:15px;font-weight:bold;letter-spacing:.2px;margin-bottom:4px}
.box.postseason .ps-art{display:block;width:100%;height:auto;fill:none;stroke:var(--ink-faint,#7a878d);stroke-width:1.3}
.box.postseason .ps-art rect{fill:var(--paper);stroke:var(--ink-faint,#7a878d)}
.box.postseason .ps-link{margin-top:5px;font-size:11px;font-weight:bold;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);text-decoration:underline dotted}
.gm .rv.playoff{color:var(--blue)}
.gm .rv.bowl{color:#8a6d1c}

/* Your own corner of the masthead, laid out like the WC dashboard: the mark on the left,
   who you are on the right. It reads as a panel rather than a line of text, because it is
   the one thing on this bar that belongs to you and not to the league. */
.ch-me{display:flex;align-items:center;gap:11px;padding:5px 12px 5px 6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:5px}
.ch-me .mk{width:52px;height:52px;object-fit:contain;flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* The mark is a link to My Team: it lifts a touch under the pointer so it reads as one. */
.ch-me .mkl{display:block;flex:none;border-radius:4px;line-height:0}
.ch-me .mkl .mk{transition:transform .12s ease,filter .12s ease}
.ch-me .mkl:hover .mk{transform:scale(1.07);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.ch-me .mkl:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ch-me .mkl .mk{transition:none}}
.ch-me .tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ch-me .tx b{font-family:var(--slab);font-size:15px;color:#fff;font-weight:600;
  white-space:nowrap}
.ch-me .tx .tm{font-size:12px;color:#aeb8bd;white-space:nowrap}
.ch-me .tx .lk{font-size:11px;color:#7f8b92;margin-top:2px;white-space:nowrap}
.ch-me .tx .lk a{color:#9aa4ab;text-decoration:none}
.ch-me .tx .lk a:hover{color:var(--gold);text-decoration:underline}
@media (max-width:520px){.ch-me{width:100%}}

/* THE LEAGUE SWITCHER. Allan, 2026-09-12: "Take a look at the U1/U2 top right where we list
   all the links to my other leagues. Can we add something here in the top right for other
   leagues?" Theirs is a right-floated row of small tabs with the current league filled in;
   this is the same idea in this masthead's language - quiet translucent chips on the slate,
   and the league you are on in the gold the rest of the chrome uses for "here". The right
   column becomes a stack so the chips sit above the coach panel rather than beside it. */
.ch-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ch-leagues{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.ch-leagues .lg{font-family:var(--slab);font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:rgba(255,255,255,.62);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);border-radius:3px;padding:3px 7px;
  text-decoration:none;white-space:nowrap}
.ch-leagues a.lg:hover{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32)}
.ch-leagues .lg.on{color:var(--gold);background:rgba(224,181,42,.12);border-color:rgba(224,181,42,.45)}
/* On a phone the five chips wrap and strand one on a line of its own. You do not need to be
   told which league you are looking at while you are looking at it, so the current chip goes
   and the other four fit on one row. */
@media (max-width:520px){
  .ch-right{align-items:stretch}
  .ch-leagues{justify-content:flex-start}
  .ch-leagues .lg.on{display:none}
  .ch-leagues .lg{font-size:10px;padding:3px 6px}
}