/* propeeks.gg's look, in one place: every page links it (propeeks_web.page()); the part before "the pages" - the tokens
   and the bar - also goes inline onto your server's control page (its own CSS: server/MovementBots/Panel.cs, the same
   tokens). Ported from Daniel's weekly_schedule (its web app's "Omni Blue" Linear-style theme: blue-violet tinted dark
   surfaces, cool neutral text, 8 px controls and 12 px cards, soft layered shadows, quick transitions) with ProPeeks'
   own yellow - the logo's - as the accent where weekly_schedule has its blue. Plain CSS, nothing loaded from elsewhere. */

/* ==== tokens */
:root {
  color-scheme: dark;
  /* surfaces - weekly_schedule's lch(L 7-18%, hue 283) as hex: under the page, the page, a card, raised on a card */
  --bg-deep: #16161c;
  --bg: #191a23;
  --card: #1f202b;
  --raised: #242531;
  --hover: #333544;
  --border: #2a2b38;
  --border-strong: #333544;
  --overlay: rgba(110, 120, 131, .1);      /* a hovered row or link */
  --overlay-2: rgba(110, 120, 131, .16);
  /* text - Linear's cool neutrals (on --bg: 13.4, 7.5, 6.4, 5.5 : 1) */
  --text: #e0e3e6;
  --text-body: #d1d5d9;
  --text-2: #959faa;
  --text-3: #88929c;
  /* the accent: ProPeeks' yellow (12.4 : 1 on --bg); dark text on it (13.6 : 1) - its tints follow it (weekly_schedule's
     blue instead: --accent: #76b2ed, 7.7 : 1 on --bg, the same dark text on it 8.5 : 1) */
  --accent: #ffd65a;
  --accent-fg: #0c1117;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-faint: color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-select: color-mix(in srgb, var(--accent) 30%, transparent);
  /* weekly_schedule's accent, ProPeeks' second colour: a chart's second series, information */
  --blue: #76b2ed;
  --indigo: #7a84dc;                        /* Discord */
  --success: #4aba60;
  --danger: #e86661;
  --grid: rgba(118, 178, 237, .1);          /* a chart's grid lines (weekly_schedule's) */
  --day-head: linear-gradient(135deg, #1d1f2d, #242531);       /* weekly_schedule's day headers: a weekday, */
  --weekend-head: linear-gradient(135deg, #2a2031, #242531);   /* the weekend (a violet tint) */
  /* the calendar's shades: how much you played that day */
  --heat-1: color-mix(in srgb, var(--accent) 12%, var(--card));
  --heat-2: color-mix(in srgb, var(--accent) 28%, var(--card));
  --heat-3: color-mix(in srgb, var(--accent) 58%, var(--card));
  --heat-4: color-mix(in srgb, var(--accent) 88%, var(--card));
  /* type */
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* space: 4 px steps; radius; shadows (weekly_schedule's 4 tiers); motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --r-sm: 4px;
  --r-md: 6px;
  --r: 8px;
  --r-xl: 12px;
  --r-full: 999px;
  --shadow-100: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 4px rgba(0, 0, 0, .1);
  --shadow-200: 0 0 0 1px rgba(0, 0, 0, .05), 0 1.5px 4px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .2);
  --shadow-300: 0 0 0 1px rgba(0, 0, 0, .05), 0 3px 5px rgba(0, 0, 0, .1), 0 6px 24px rgba(0, 0, 0, .25);
  --shadow-400: 0 0 0 1px rgba(0, 0, 0, .05), 0 5px 12px rgba(0, 0, 0, .1), 0 12px 32px rgba(0, 0, 0, .2), 0 20px 96px rgba(0, 0, 0, .4);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --fast: 100ms;
  --normal: 150ms;
}

/* ==== the bar over every page (#ppbar: everything scoped to it - on the control page it sits on that page's CSS) */
#ppbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; box-sizing: border-box; min-height: 52px; padding: 8px 20px;
  background: var(--bg-deep); border-bottom: 1px solid var(--border); color: var(--text-3); font: 500 14px/20px var(--font);
  letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#ppbar * { box-sizing: border-box; }
@media (min-width: 641px) { #ppbar { position: sticky; top: 0; z-index: 50; } }   /* (in sight as you scroll - your call; a phone's
   screen scrolls it away: the room's for the page) */
#ppbar a { color: var(--text-2); text-decoration: none; padding: 6px 10px; border-radius: var(--r-md);
  transition: color var(--normal) var(--ease), background-color var(--normal) var(--ease); }
#ppbar a:hover { color: var(--text); background: var(--overlay); }
#ppbar a.on { color: var(--accent); background: var(--accent-soft); }
#ppbar a.play { position: relative; color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-line); }
#ppbar a.play:not(.on)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: pp-play-ring 2.4s var(--ease) infinite; }   /* (Play: where you start - ringed, a pulse going out from it; still once you're on it) */
@keyframes pp-play-ring { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 60%, 100% { box-shadow: 0 0 0 9px transparent; } }
#ppbar .brand { color: var(--accent); font-weight: 700; font-size: 15px; letter-spacing: .02em; padding: 6px 6px 6px 0; }
#ppbar .brand:hover { color: var(--accent); background: none; }
#ppbar .pill { padding: 0 8px; margin-right: 8px; border-radius: var(--r-full); background: var(--overlay-2); color: var(--text-2);
  font-size: 11px; line-height: 18px; font-weight: 500; }
#ppbar .chip { padding: 5px 10px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-100); color: var(--text-2);
  font-variant-numeric: tabular-nums; }
#ppbar .grow { flex: 1; }
#ppbar .conn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 3px; }   /* (your server: Join, its line, copy) */
#ppbar a.join { padding: 3px 14px; border-radius: var(--r-md); background: #3ecf6e; color: #0b1f12; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 0 0 1px #6fe596 inset, 0 0 10px rgba(62, 207, 110, .35); }   /* (joining: green, apart from the yellow - as on the control page) */
#ppbar a.join:hover { background: #62e08c; color: #0b1f12; }
#ppbar .conn code { font: 13px/18px ui-monospace, monospace; color: var(--text); user-select: all; }
#ppbar .conn code:empty { display: none; }
#ppbar .conn button { padding: 1px 8px; font-size: 12px; }
#ppbar .conn.wait a.join, #ppbar .conn.wait a.join:hover { background: var(--raised); color: var(--text-3); box-shadow: 0 0 0 1px var(--border-strong) inset;
  cursor: default; }
#ppbar .conn.wait code { min-width: 21ch; color: var(--text-3); }
#ppbar .conn button:disabled { opacity: .5; cursor: default; }   /* (your server starting: Join waiting in its place, the room
   for its address kept - lit as it's up, nothing moving: #79) */
#ppbar .conn.gone form, #ppbar .conn.gone button { display: none; }   /* (#227: your server stopped - Join greyed, 'stopped' in
   place of its address, nothing to restart or stop) */
@media (max-width: 480px) {                                   /* (#196: a phone - your server's chip no wider than the screen: */
  #ppbar { padding: 8px 12px; }                               /*  Restart and Stop under Join and the address if they don't fit) */
  #ppbar .conn { flex-wrap: wrap; max-width: 100%; }
  #ppbar .conn code, #ppbar .conn.wait code { min-width: 0; overflow-wrap: anywhere; }
}
#ppbar a.discord { color: var(--indigo); }
#ppbar a.ask { padding: 3px 12px; border-radius: var(--r-full); background: var(--accent); color: var(--accent-fg); font-weight: 600; }
#ppbar a.ask:hover { background: var(--accent); opacity: .9; }
#ppbar .me { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; color: var(--text); }
#ppbar .deploys { flex-basis: 100%; font: 12px/18px ui-monospace, monospace; color: var(--text-3); overflow-wrap: anywhere; }   /* (#1090:
   the admins' row of deployed commits - under the bar's own) */
#ppbar .deploys a.sha { padding: 0 2px; color: var(--accent); }
#ppbar .deploys .lag.old { color: var(--text-2); }
#ppbar a.me { padding: 4px 8px; }                           /* (#186: you - your profile) */
#ppbar a.me.on { color: var(--accent); }
#ppbar .me img { width: 22px; height: 22px; border-radius: var(--r-sm); }
#ppbar a.tokens { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-full);   /* (#105: your clip */
  background: var(--card); box-shadow: var(--shadow-100); color: var(--text-2); font-variant-numeric: tabular-nums; }   /*  tokens - only yours) */
#ppbar a.tokens b { color: var(--text); font-weight: 600; }
#ppbar a.tokens svg { color: var(--accent); }
#ppbar form { margin: 0; }
#ppbar button { margin: 0; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--raised);
  color: var(--text); font: 500 13px/18px var(--font); letter-spacing: .01em; cursor: pointer; box-shadow: none;
  transition: background-color var(--normal) var(--ease), transform var(--fast) var(--ease); }
#ppbar button:hover { background: var(--hover); }
#ppbar button:active { transform: scale(.95); }
#ppbar .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-100); }
#ppbar .seg a { padding: 3px 10px; border-radius: var(--r-md); color: var(--text-3); font-weight: 600; }
#ppbar .seg a:hover { color: var(--text); }
#ppbar .seg a.on { background: var(--accent); color: var(--accent-fg); }
#ppbar .asbeta button { color: var(--text-3); }                 /* (#372: See as a beta tester - on: a marker you can't miss, */
#ppbar .asbeta button.on { border-color: var(--blue); background: var(--blue); color: var(--accent-fg); font-weight: 600; }   /*  one click off) */
#ppbar .asbeta button.on:hover { opacity: .9; }
#ppbar :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  #ppbar { gap: 2px 2px; padding: 6px 10px; }
  #ppbar .grow { display: none; }
  #ppbar a { padding: 5px 8px; }
}
/* your rank in a line under the bar (#27: leaderboards.my_line) - over the control page too, so it's the bar's: one line,
   cut short rather than wrapped (nothing under it moves as it's looked at again); a phone: all of it, on two lines */
#pprank { box-sizing: border-box; padding: 5px 20px; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text-2);
  font: 13px/20px var(--font); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pprank:empty { display: none; }
#pprank a { margin-right: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
#pprank a:hover { text-decoration: underline; }
#pprank b { color: var(--text); font-weight: 600; }
#pprank svg.mi { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
@media (max-width: 640px) { #pprank { padding: 5px 10px; white-space: normal; } }
/* Getting started (#140: onboarding.py) - a small card under the bar (and your rank's line) till its steps are done or it's
   hidden; over the control page too, so it's the bar's: every rule scoped to it, nothing taken from the page's own CSS. As wide
   as the page's main; a step a column (its button under it), a phone's a row each (its button on the right) */
#ppstart { box-sizing: border-box; max-width: 960px; margin: var(--s5) auto calc(-1 * var(--s3)); padding: 0 var(--s6); color: var(--text-2);
  font: 14px/20px var(--font); letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#ppstart * { box-sizing: border-box; }
#ppstart.wide { max-width: 1240px; margin-bottom: calc(-1 * var(--s1)); }   /* (over the control page: as wide as its main) */
#ppstart .in { padding: var(--s3) var(--s4) var(--s4); border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-200), inset 0 0 0 1px var(--accent-faint); }
#ppstart .hd { display: flex; align-items: center; gap: var(--s3); }
#ppstart .hd b { color: var(--text); font-size: 15px; font-weight: 600; }
#ppstart .of { color: var(--accent); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
#ppstart .track { width: 96px; height: 4px; border-radius: var(--r-full); background: var(--raised); overflow: hidden; }
#ppstart .track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
#ppstart .grow { flex: 1; }
#ppstart form { margin: 0; }
#ppstart button.x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -5px -8px -5px 0;
  padding: 0; border: 0; border-radius: var(--r-md); background: none; box-shadow: none; color: var(--text-3); font: 400 15px/1 var(--font);
  cursor: pointer; transition: color var(--normal) var(--ease), background-color var(--normal) var(--ease); }
#ppstart button.x:hover { background: var(--overlay-2); color: var(--text); }
#ppstart ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3) var(--s5); margin: var(--s3) 0 0;
  padding: 0; list-style: none; }
#ppstart li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: start;
  column-gap: var(--s3); margin: 0; padding: 0; }   /* (the buttons in a line, whatever the lines over them) */
#ppstart li b { display: block; color: var(--text); font-weight: 600; }
#ppstart li div span { display: block; color: var(--text-2); font-size: 13px; line-height: 18px; }
#ppstart .tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: -1px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-2); font-size: 12px; font-weight: 600; }
#ppstart li.done .tick { background: var(--success); box-shadow: none; color: #0b1f12; }
#ppstart li.done b { color: var(--text-2); }
#ppstart a.go { grid-column: 2; grid-row: 2; justify-self: start; margin-top: var(--s2); padding: 4px 12px; border-radius: var(--r); background: var(--accent);
  color: var(--accent-fg); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: opacity var(--normal) var(--ease); }
#ppstart a.go:hover { opacity: .9; }
#ppstart :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  #ppstart { margin-top: var(--s3); padding: 0 var(--s4); }
  #ppstart .in { padding: var(--s3); }
  #ppstart ol { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  #ppstart li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; }
  #ppstart a.go { grid-column: 3; grid-row: 1; align-self: center; margin: 0 0 0 var(--s1); }
}
/* Play's way in (#195: propeeks_web.go_html) - under the bar as your server comes up, the step you're at (data-phase: its
   block shown): open CS2 now, then Join - the main button, green as the bar's -, then what starts. data-picked: a drill kept
   for when you join (its name said) or not. Over the control page too, so it's the bar's: every rule scoped to it */
#ppgo { box-sizing: border-box; max-width: 960px; margin: var(--s5) auto calc(-1 * var(--s3)); padding: 0 var(--s6); color: var(--text-2);
  font: 14px/20px var(--font); letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#ppgo * { box-sizing: border-box; }
#ppgo[hidden] { display: none; }
#ppgo.wide { max-width: 1240px; margin-bottom: calc(-1 * var(--s1)); }
#ppgo .in { display: none; align-items: center; gap: var(--s3) var(--s6); padding: var(--s4) var(--s5); border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-200), inset 0 0 0 1px var(--accent-line); }
#ppgo[data-phase=starting] .p-starting, #ppgo[data-phase=up] .p-up, #ppgo[data-phase=in] .p-in { display: flex; }
#ppgo .p-up { box-shadow: var(--shadow-200), inset 0 0 0 1px rgba(62, 207, 110, .55); }
#ppgo[data-picked="0"] .picked, #ppgo[data-picked="1"] .nopick { display: none; }
#ppgo .tx { flex: 1; min-width: 0; }
#ppgo .tx > b { display: block; margin-bottom: 2px; color: var(--text); font-size: 17px; line-height: 24px; font-weight: 600; }
#ppgo .tx > span { display: block; }
#ppgo .tx span b { color: var(--text); font-weight: 600; }
#ppgo .next { margin-top: var(--s1); }
#ppgo .alt { margin-top: var(--s2); color: var(--text-3); font-size: 13px; line-height: 18px; }
#ppgo a.gobtn, #ppgo button.gobtn { flex: none; padding: 12px 28px; border-radius: var(--r); background: var(--accent); color: var(--accent-fg); font-size: 16px;
  line-height: 22px; font-weight: 700; letter-spacing: .3px; text-align: center; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 16px var(--accent-glow); transition: opacity var(--normal) var(--ease); }
#ppgo a.gobtn.join { background: #3ecf6e; color: #0b1f12; box-shadow: 0 0 0 1px #6fe596 inset, 0 0 16px rgba(62, 207, 110, .45); }
#ppgo button.gobtn { margin: 0; border: 0; cursor: pointer; font-family: inherit; }   /* (#227: Restart it - a form's) */
#ppgo a.gobtn:hover, #ppgo button.gobtn:hover { opacity: .9; }
#ppgo :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#ppgo .btns { flex: none; display: flex; flex-direction: column; gap: var(--s2); }
/* (#196) no answer to Steam's query (data-a2s 0): the line to copy first - Copy the line the main button, Join beside it, quieter;
   a steam:// link that opened nothing (data-nosteam 1): get Steam; the plain starting page's title says how the start's going */
#ppgo .btns a.gobtn.copy, #ppgo .tx > .a2s-no, #ppgo .tx > .nosteam { display: none; }
#ppgo[data-a2s="0"] .btns a.gobtn.copy, #ppgo[data-a2s="0"] .tx > .a2s-no, #ppgo[data-nosteam="1"] .tx > .nosteam { display: block; }
#ppgo[data-a2s="0"] .tx > .a2s-yes, #ppgo[data-reload="1"] .next > .state { display: none; }
#ppgo[data-a2s="0"] a.gobtn.join { padding: 8px 20px; font-size: 14px; background: none; color: #6fe596; box-shadow: 0 0 0 1px #3ecf6e inset; }
#ppgo code.line { display: block; margin-top: var(--s1); padding: 6px 10px; border-radius: var(--r); background: var(--bg-deep, #16161c); color: var(--text);
  font: 13px/18px ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
#ppgo .nosteam { color: #f0b37a; }
#ppgo .nosteam a { color: inherit; text-decoration: underline; }
/* (#196) one status line: the control page's own line for your server's start under the way in - this says it while it's shown */
body[data-go]:not([data-go=""]) main #starting { display: none !important; }   /* (#1355: the way in's step on the body - GO_JS: in Play's band, not main's sibling) */
/* (#227) Steam says you're in CS2 already (data-cs2 1): no Open CS2 step - "CS2's open - Join as soon as your server's up" */
#ppgo[data-cs2] .cs2-yes { display: none; }
#ppgo[data-cs2="1"] .cs2-yes { display: block; }
#ppgo[data-cs2="1"] .cs2-no { display: none; }
/* (#227) your server gone - stopped, whichever way, and why: Start it again (data-phase gone) - or not answering: Restart it
   (down, in amber); stopped, the control page's own 'stopped' line, the plain starting page's title and who can join go */
#ppgo[data-phase=gone] .p-gone, #ppgo[data-phase=down] .p-down { display: flex; }
#ppgo .p-down { box-shadow: var(--shadow-200), inset 0 0 0 1px rgba(240, 179, 122, .6); }
#ppgo .tx > .why { color: var(--text); }
#ppgo .tx > .why:empty { display: none; }
#ppgo form.btns { margin: 0; }
body[data-go=gone] main > .status.upd:not(#update), body[data-go=gone] .boot, body[data-go=gone] #ppwho { display: none !important; }
body[data-go=gone] main:not(.bleed) > *, body[data-go=down] main:not(.bleed) > * { opacity: .4; pointer-events: none; }   /* (its controls: nothing to control - the control page's main; not the site's own Play pages, the way in in them) */
/* #230: the Join step names the account you signed in with (a server that lets in by Steam ID: data-by) and what Steam
   shows before you try (data-acct: CS2 open on another of yours - let in too; yours offline - in amber) */
#ppgo .acct, #ppgo .acct-warn { display: none; }
#ppgo[data-by=steamid] .tx > .acct { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--text-2); }
#ppgo .acct .av { flex: none; width: 24px; height: 24px; border-radius: 4px; background: var(--raised); }
#ppgo[data-by=steamid][data-acct=other] .tx > .acct-warn, #ppgo[data-by=steamid][data-acct=offline] .tx > .acct-warn { display: block; margin-top: var(--s1); }
#ppgo[data-acct=offline] .acct-warn { color: #f0b37a; }
#ppgo[data-acct=offline] .acct-warn b { color: inherit; }
/* #230: someone turned away from your server - the control page's alert (Panel.cs fills .pp-host: its look), over the way in */
#ppturned { box-sizing: border-box; max-width: 960px; margin: var(--s5) auto 0; padding: 0 var(--s6); font: 14px/20px var(--font);
  letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#ppturned * { box-sizing: border-box; }
#ppturned[hidden] { display: none; }
#ppturned.wide { max-width: 1240px; }
#ppturned .pp-host { margin: 0; }
#ppturned:not([hidden]) + #ppgo { margin-top: var(--s3); }
@media (max-width: 700px) {
  #ppgo { margin-top: var(--s3); padding: 0 var(--s4); }
  #ppgo .in { flex-direction: column; align-items: stretch; padding: var(--s3) var(--s4) var(--s4); }
  #ppturned { margin-top: var(--s3); padding: 0 var(--s4); }
}
/* Who can join your server (#201: propeeks_web.who_box, friends.py) - under the way in on Play: who (data-fr: on, off,
   private, unknown - the last two in amber: why your friends can't join by themselves), Let my Steam friends join, your
   invite link. Over the control page too, so it's the bar's: every rule scoped to it */
#ppwho { box-sizing: border-box; max-width: 960px; margin: var(--s4) auto calc(-1 * var(--s3)); padding: 0 var(--s6); color: var(--text-2);
  font: 14px/20px var(--font); letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#ppwho * { box-sizing: border-box; }
#ppwho.wide { max-width: 1240px; margin-bottom: calc(-1 * var(--s1)); }
#ppwho .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s6); padding: var(--s3) var(--s5);
  border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200), inset 0 0 0 1px var(--border-strong); }
#ppwho .tx > b { display: block; margin-bottom: 2px; color: var(--text); font-size: 15px; line-height: 22px; font-weight: 600; }
#ppwho .tx b { color: var(--text); font-weight: 600; }
#ppwho .line { display: block; }
#ppwho[data-fr=private] .line, #ppwho[data-fr=unknown] .line { color: #f0b37a; }
#ppwho[data-fr=private] .line b, #ppwho[data-fr=unknown] .line b { color: inherit; }
#ppwho form { margin: 0; }
#ppwho .fr { display: flex; align-items: center; gap: var(--s2); }
#ppwho .fr label { display: inline-flex; flex-direction: row; align-items: center; gap: var(--s2); color: var(--text); font: 500 14px/20px var(--font);
  cursor: pointer; white-space: nowrap; }   /* (the control page's own labels: a column, small - not here) */
#ppwho .fr input { width: 18px; height: 18px; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: #3ecf6e; cursor: pointer; }
#ppwho .inv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--border); }
#ppwho .inv .lbl { color: var(--text); font-weight: 600; }
#ppwho .inv input { flex: 1 1 280px; width: auto; min-width: 0; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--bg-deep); color: var(--text); font: 13px/18px ui-monospace, monospace; }
#ppwho button { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--raised); color: var(--text); font: 500 13px/18px var(--font); cursor: pointer; }
#ppwho button:hover { background: var(--hover); }
#ppwho button.ghost { background: none; color: var(--text-2); }
#ppwho button[hidden] { display: none; }
#ppwho .alt { flex-basis: 100%; color: var(--text-3); font-size: 13px; line-height: 18px; }
#ppwho :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  #ppwho { margin-top: var(--s3); padding: 0 var(--s4); }
  #ppwho .in { grid-template-columns: minmax(0, 1fr); padding: var(--s3) var(--s4); }
  #ppwho .fr label { white-space: normal; }
}

/* ==== the pages */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #3a3b43 var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--accent-select); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a3b43; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #46464e; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

main { max-width: 960px; margin: var(--s10) auto 56px; padding: 0 var(--s6); }
main.wide { max-width: 1180px; }
h1 { margin: 0 0 var(--s2); color: var(--accent); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; }
h2 { margin: 36px 0 var(--s3); color: var(--accent); font-size: 18px; line-height: 28px; font-weight: 600; }
h3 { margin: var(--s6) 0 var(--s2); color: var(--text); font-size: 15px; line-height: 22px; font-weight: 600; }
p { margin: var(--s3) 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--normal) var(--ease), color var(--normal) var(--ease); }
a:hover { text-decoration-color: currentColor; }
b, strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s8) 0; }
.sub { color: var(--text-2); font-size: 14px; line-height: 22px; margin-bottom: var(--s6); }
.msg { color: var(--danger); }
.ok { color: var(--success); }
.won { color: var(--success); }
.lost { color: var(--danger); }
code, kbd { padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text);
  font: .9em/1.4 var(--mono); }
footer.foot { max-width: 960px; margin: var(--s10) auto var(--s6); padding: var(--s4) var(--s6) 0; border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 13px; }
footer.foot a { color: var(--text-2); }

/* buttons: the accent one (weekly_schedule's primary), the quiet one (its bordered secondary) */
button, .btn { font-family: inherit; letter-spacing: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 9px 18px; border: 1px solid transparent;
  border-radius: var(--r); background: var(--accent); color: var(--accent-fg); font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow-100);
  transition: opacity var(--normal) var(--ease), background-color var(--normal) var(--ease), transform var(--fast) var(--ease); }
.btn:hover { opacity: .9; }
.btn.dim, button.small { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r); background: var(--raised); color: var(--text); font-size: 13px; line-height: 18px; font-weight: 500;
  cursor: pointer; box-shadow: none; transition: background-color var(--normal) var(--ease), transform var(--fast) var(--ease); }
.btn.dim:hover, button.small:hover { background: var(--hover); opacity: 1; }
.btn:active, button.small:active { transform: scale(.95); }
.btn[disabled], button[disabled] { opacity: .5; cursor: default; transform: none; }
.btn.dim[disabled]:hover, button.small[disabled]:hover { background: var(--raised); }

/* inputs: set into the page (weekly_schedule's bg-background in a card), the accent on focus */
input, select, textarea { padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-deep);
  color: var(--text); font: 15px/1.4 var(--font); letter-spacing: .01em;
  transition: border-color var(--normal) var(--ease), box-shadow var(--normal) var(--ease); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=radio], input[type=checkbox] { width: auto; padding: 0; accent-color: var(--accent); box-shadow: none; }
input[type=file] { max-width: 100%; padding: 6px; font-size: 14px; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--raised); color: var(--text); font: 500 13px var(--font); cursor: pointer; }
textarea { display: block; width: 100%; line-height: 1.5; }
label.choice { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 2px 0; padding: 6px 10px; border-radius: var(--r);
  cursor: pointer; transition: background-color var(--normal) var(--ease); }
label.choice:hover { background: var(--overlay); }
a.lang { float: right; font-size: 14px; }

/* tables: a card each (weekly_schedule's panels); inside a card, plain */
table { width: 100%; margin: var(--s3) 0; border-collapse: separate; border-spacing: 0; border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-200); font-size: 14px; font-variant-numeric: tabular-nums; }
th { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .02em; text-align: left; vertical-align: bottom; }
td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
tr:last-child > td { border-bottom: 0; }
td form { margin: 0; }
.box table, .card table, details table { margin: var(--s2) 0 0; border-radius: 0; background: none; box-shadow: none; }
img.av { width: 22px; height: 22px; margin-right: var(--s2); border-radius: var(--r-sm); vertical-align: middle; }

/* cards: a number and what it is; a box of text and controls */
.cards { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0 var(--s2); }
.card { min-width: 128px; padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.card b { display: block; color: var(--accent); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
.card span { color: var(--text-3); font-size: 12px; line-height: 16px; }
.box { margin: var(--s4) 0; padding: var(--s4) var(--s5); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.box p { margin: 6px 0; }
.box ol { color: var(--text-2); }
/* Matches' connect box (#368): a step per code - Steam's page as it looks, the field with its template, checked as you type */
.codes .code { margin: 0 0 var(--s5); }
.codes label { display: block; margin: 0 0 var(--s1); }
.codes img { display: block; width: 100%; max-width: 640px; height: auto; margin: 6px 0 var(--s2); border-radius: var(--r); box-shadow: var(--shadow-200); }
.codes input { width: 420px; max-width: 100%; font-family: var(--mono); letter-spacing: .03em; }
.codes input.good { border-color: var(--success); }
.codes input.bad { border-color: var(--danger); }
.codes .hint { margin: 4px 0 0; color: var(--text-3); font-size: 13px; font-family: var(--mono); }
.codes .hint.good { color: var(--success); }
.codes .hint.bad { color: var(--danger); }
@media (max-width: 480px) { .codes input { font-size: 13px; letter-spacing: 0; } }   /* (the share code whole on a phone) */

/* tags: a pill - neutral, or a mode's colour (its class sets --mode: weekly_schedule's category colours) */
.tag { display: inline-block; padding: 1px 8px; border-radius: var(--r-full); background: var(--mode, var(--overlay-2)); color: var(--mode-fg, var(--text-2));
  font-size: 12px; line-height: 18px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.posts .tag, .post .tag { margin-left: var(--s2); }
.c-peeks { --mode: #ffd65a; } .c-awpflicks { --mode: #ff9933; } .c-entries { --mode: #4aba60; } .c-executes { --mode: #e86661; }
.c-takes { --mode: #5a9bd5; } .c-transfers { --mode: #b070cc; } .c-spraylab { --mode: #3ab8c8; } .c-zombies { --mode: #8899aa; }
.c-awpholds { --mode: #f060a0; } .c-deagle { --mode: #f5b070; } .c-nadelab { --mode: #40d9a8; } .c-prefire { --mode: #b8d84a; }
.c-jumplab { --mode: #c6a4ff; }
.c-peeks, .c-awpflicks, .c-entries, .c-executes, .c-takes, .c-transfers, .c-spraylab, .c-zombies, .c-awpholds, .c-deagle, .c-nadelab, .c-prefire, .c-jumplab { --mode-fg: var(--accent-fg); }
/* a mode's icon (#69: static/mode-icons.svg - a page with one has them all in it, out of sight; each a <use> of its symbol):
   the text's colour - in a tag, dark on its mode's colour; where you pick one, its mode's colour */
.mode-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.mi { display: inline-block; flex: none; width: 1.15em; height: 1.15em; margin-right: .4em; vertical-align: -.22em; }
.tag svg.mi { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.modepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 var(--s2); max-width: 840px; margin: var(--s2) 0 18px; }
.modepick svg.mi { width: 18px; height: 18px; margin: 0; color: var(--mode, currentColor); }
.c-smokeblock { --mode: #40d9a8; }                    /* (the survey's Smoke Block: Nade Lab's) */
.c-cstrafe { --mode: #8c9cf0; --mode-fg: var(--accent-fg); }   /* (Counter-Strafes, #76: its icon's colour, ready) */
.c-shootcrouch { --mode: #a78bfa; --mode-fg: var(--accent-fg); }   /* (Shoot-Crouch, #112) */
.c-peektech { --mode: #c8a96a; --mode-fg: var(--accent-fg); }      /* (Peek Technique, #113) */
.c-flashtiming { --mode: #f2e86d; --mode-fg: var(--accent-fg); }   /* (Flash Timing, #115) */
.c-clutch { --mode: #ff5e3a; --mode-fg: var(--accent-fg); }   /* (Clutch, #132) */
.c-wallbangs { --mode: #b0bec5; --mode-fg: var(--accent-fg); }   /* (Wallbangs, #124: concrete grey) */
.c-preaim { --mode: #ff9ec7; --mode-fg: var(--accent-fg); }   /* (Pre-aim, #107) */
.c-smokeshots { --mode: #d6d6c2; --mode-fg: var(--accent-fg); }   /* (Smoke Shots, #304: smoke grey) */
.c-speedkills { --mode: #ff3d5a; }   /* (Speed Kills, #1372: red) */
.c-crossfire { --mode: #64d2ff; --mode-fg: var(--accent-fg); }   /* (Crossfire, #128: sky blue) */

/* ---- activity: the month (weekly_schedule's day headers; how much you played in the accent), the day */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0; padding: var(--s3) var(--s4);
  border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.nav > a { padding: 5px 10px; border-radius: var(--r); background: var(--bg); color: var(--text); font-size: 14px; text-decoration: none;
  transition: background-color var(--normal) var(--ease); }
.nav > a:hover { background: var(--hover); }
.nav > b { color: var(--text); font-size: 18px; font-weight: 700; }
.nav form { display: flex; gap: var(--s2); margin: 0 0 0 auto; }
.nav input[type=date] { padding: 4px 8px; font-size: 14px; }
.cal { width: auto; margin: 0 -6px; border-collapse: separate; border-spacing: 6px; border-radius: 0; background: none; box-shadow: none; }
.cal th { padding: 6px 4px; border: 0; border-radius: var(--r); background: var(--day-head); color: var(--text);
  font-size: 12px; font-weight: 600; text-align: center; vertical-align: middle; }
.cal th:nth-child(n+6) { background: var(--weekend-head); }
.cal td { width: 104px; height: 64px; padding: 0; border: 0; border-radius: var(--r); background: var(--card); vertical-align: top;
  box-shadow: var(--shadow-100), inset 0 1px 0 rgba(255, 255, 255, .03); }
.cal td.out { background: transparent; box-shadow: none; }
.cal td a { display: block; height: 100%; padding: 6px 8px; border-radius: inherit; color: var(--text); font-size: 12px; line-height: 16px;
  text-decoration: none; transition: background-color var(--normal) var(--ease); }
.cal td a:hover { background: var(--overlay-2); }
.cal td a b { display: block; margin-bottom: 2px; font-size: 14px; line-height: 18px; }
.cal td span { display: block; color: var(--text-2); }
.cal td.l1 { background: var(--heat-1); } .cal td.l2 { background: var(--heat-2); } .cal td.l3 { background: var(--heat-3); } .cal td.l4 { background: var(--heat-4); }
.cal td.l3 a, .cal td.l3 span, .cal td.l4 a, .cal td.l4 span { color: var(--accent-fg); }
.cal td.today a b { color: var(--accent); }
.cal td.l3.today a b, .cal td.l4.today a b { color: var(--accent-fg); text-decoration: underline; }
.cal td.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 12px 2px var(--accent-glow); }
/* a session: weekly_schedule's time block - its mode's colour down the left, tinted, a faint metallic sheen */
details.sess { margin: 6px 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--mode, var(--text-3)); border-radius: var(--r-md);
  background-color: color-mix(in srgb, var(--mode, var(--card)) 7%, var(--card));
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 50%, rgba(0, 0, 0, .04) 100%);
  box-shadow: var(--shadow-100), inset 0 1px 0 rgba(255, 255, 255, .06); transition: background-color var(--normal) var(--ease); }
details.sess:hover { background-color: color-mix(in srgb, var(--mode, var(--card)) 11%, var(--card)); }
details.sess summary { cursor: pointer; }
details.sess summary::marker { color: var(--text-3); }
details.sess > .sub { margin: var(--s2) 0 0; }
table.tries td, table.tries th { padding: 4px 8px; font-size: 13px; }
/* a chart (plain SVG): weekly_schedule's grid and ticks */
svg.chart { display: block; width: 100%; max-width: 900px; height: auto; margin: var(--s2) 0; border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-200); }
svg.chart text { fill: var(--text-3); font: 11px var(--font); }
svg.chart text.blue { fill: var(--blue); }
svg.chart .grid { stroke: var(--grid); }
svg.chart .bar { fill: var(--accent); opacity: .85; }
svg.chart .bar:hover { opacity: 1; }
svg.chart .line { fill: none; stroke: var(--blue); stroke-width: 2; }
td.hot { color: var(--accent-fg); font-weight: 600; }
.barchart { display: flex; align-items: flex-end; gap: 2px; height: 148px; padding: var(--s3) var(--s4) 0; border-radius: var(--r-xl);
  background: var(--card); box-shadow: var(--shadow-200); background-image: linear-gradient(var(--grid) 1px, transparent 1px);
  background-size: 100% 34px; background-position: 0 var(--s3); }
.barchart > div { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; height: 100%; }
.barchart i { display: block; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .85; }
.barchart > div:hover i { opacity: 1; }
.meter { display: inline-block; height: 10px; border-radius: 3px; background: var(--accent); vertical-align: middle; }

/* ---- matches */
.working { color: var(--accent); }
.spin { display: inline-block; width: 12px; height: 12px; margin-right: var(--s2); vertical-align: -1px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* uploading demos (#12): the box lit while files are dragged over the page; a line a file - its name, size, bar, what's
   happening - in a list that scrolls past a dozen */
#ppup [hidden] { display: none; }
#ppup.drop { outline: 2px dashed var(--accent-line); outline-offset: -6px; background: var(--accent-faint); }
.uppick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: var(--s2) 0; }
.uppick input { font-size: 14px; }
.uppick .upleft { margin: 0; }
.upall { color: var(--text); font-size: 14px; }
.uplist { max-height: 384px; overflow: auto; margin: var(--s2) 0 0; padding: 0; list-style: none; }
.uplist li { display: grid; grid-template-columns: minmax(0, 1.4fr) 64px 120px minmax(0, 1.6fr); gap: var(--s3); align-items: center;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.uplist .upname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uplist .upsize { color: var(--text-3); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.uplist .upsay { grid-column: 4; margin: 0; font-variant-numeric: tabular-nums; }      /* (in its column with the bar gone too) */
.uplist .upsay button.small { padding: 1px 10px; margin-left: var(--s1); }
.uplist progress { width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--raised); overflow: hidden; appearance: none; }
.uplist progress::-webkit-progress-bar { background: var(--raised); }
.uplist progress::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.uplist progress::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
/* the match's players: one table, the scoreboard's columns, the aim's or the positioning's (#78) - weekly_schedule's segmented
   toggle on plain radios (no script needed; matches.VIEW_JS only remembers the pick) */
.mview { position: relative; margin-top: 28px; }
.mview > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-100); }
.seg label { padding: 5px 16px; border-radius: var(--r-md); color: var(--text-3); font-size: 14px; line-height: 20px; font-weight: 600;
  cursor: pointer; transition: color var(--normal) var(--ease), background-color var(--normal) var(--ease); }
.seg label:hover { color: var(--text); }
#mv-score:checked ~ .seg label[for=mv-score], #mv-aim:checked ~ .seg label[for=mv-aim], #mv-pos:checked ~ .seg label[for=mv-pos],
#mv-shots:checked ~ .seg label[for=mv-shots] { background: var(--accent); color: var(--accent-fg); }
#mv-score:focus-visible ~ .seg label[for=mv-score], #mv-aim:focus-visible ~ .seg label[for=mv-aim],
#mv-pos:focus-visible ~ .seg label[for=mv-pos], #mv-shots:focus-visible ~ .seg label[for=mv-shots] { outline: 2px solid var(--accent); outline-offset: 2px; }
#mv-score:checked ~ :is(.v-aim, .v-pos, .v-shots), #mv-score:checked ~ * :is(.v-aim, .v-pos, .v-shots),
#mv-aim:checked ~ :is(.v-score, .v-pos, .v-shots), #mv-aim:checked ~ * :is(.v-score, .v-pos, .v-shots),
#mv-pos:checked ~ :is(.v-score, .v-aim, .v-shots), #mv-pos:checked ~ * :is(.v-score, .v-aim, .v-shots),
#mv-shots:checked ~ :is(.v-score, .v-aim, .v-pos), #mv-shots:checked ~ * :is(.v-score, .v-aim, .v-pos) { display: none; }
.mtscroll { max-height: 170px; overflow-y: auto; }                            /* (3 rows and the header: Shots, Fights) */
.mtscroll .mt th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
.mtwrap { overflow-x: auto; max-width: 100%; }                                   /* (a wide table scrolls inside its card) */
.mtwrap .mt { width: 100%; }
.mtwrap .mt th, .mtwrap .mt td { padding-left: 8px; padding-right: 8px; }
.cpmaps { display: flex; flex-wrap: wrap; gap: var(--s2); } .cpm { padding: 2px 10px; border-radius: var(--r-full); background: var(--overlay); }
.mt td.n, .mt th.n { text-align: right; }
.mt th { white-space: nowrap; }
.mt th[title] { cursor: help; text-decoration: underline dotted var(--text-3); text-underline-offset: 3px; }
.mt tr.me td { background: var(--accent-faint); }
.mt tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.mt td.best { color: var(--accent); font-weight: 600; }
.coach pre { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/19px var(--mono, monospace); }   /* (#104: /admin/messages) */
.coach summary { cursor: pointer; color: var(--text-2); }
td.coach { min-width: 320px; max-width: 560px; }
.mt tr.team td { padding-top: 10px; padding-bottom: 6px; background: var(--overlay); color: var(--text-3); font-size: 12px; font-weight: 500;
  letter-spacing: .02em; }
.mt td a, .mt td.who { white-space: nowrap; }
.rounds { display: flex; flex-wrap: wrap; gap: 3px; margin: var(--s2) 0 var(--s1); }
.rounds span { width: 18px; height: 18px; border-radius: var(--r-sm); color: var(--accent-fg); font-size: 10px; line-height: 18px; font-weight: 700;
  text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.rounds .w { background: var(--success); } .rounds .l { background: var(--danger); }
.rounds .t { background: #e0b35a; } .rounds .ct { background: #6fa8e0; }   /* (a match you weren't in: the game's T and CT colours) */
.rounds i { width: 10px; }
.wprounds { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0 var(--s3); }   /* (#275: each round's win chance) */
.wpr { margin: 0; padding: 3px 4px 1px; border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow-100);
  border-top: 2px solid var(--danger); }
.wpr.w { border-top-color: var(--success); }
.wpr svg { display: block; overflow: visible; }
.wpr polyline { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; }
.wpr .mid { stroke: var(--border-strong); stroke-dasharray: 2 2; }
.wpr figcaption { color: var(--text-3); font-size: 11px; line-height: 14px; text-align: center; }
.mt.wp td.w { color: var(--success); } .mt.wp td.l { color: var(--danger); }
svg.radar { display: block; width: 180px; height: 180px; border-radius: var(--r-md); background: #2a2d36; }   /* (#78: a duel's spot) */
.mt tr.asis td { color: var(--text-3); }                     /* (#57: a burst a pro would have fired as you did) */
.mt td.when { white-space: nowrap; }                         /* (#120: a moment's round, CS2's clock then, its demo tick) */
.mt td.when .sub { font-size: 12px; }
.mt button.tk { padding: 0 6px; margin-left: 2px; font-size: 11px; line-height: 16px; }
.mt.moments td:first-child, .mt.moments td:last-child { white-space: nowrap; }   /* (#105: a moment's rank, its score) */
/* #105's clips: a moment's Make a clip (or its clip's state), the Clips section's players, your clip tokens' line */
svg.ticon { flex: none; vertical-align: -2px; }
.mt td.clipc form { display: inline-flex; }
.mt td.clipc .msg { display: block; font-size: 12px; white-space: normal; }
button.small.clipbtn { gap: 5px; }
button.small.clipbtn svg { color: var(--accent); }
a.cliplink { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.clipstate { margin: 0; white-space: nowrap; }
p.cliptok { margin: var(--s2) 0; }
p.cliptok svg { color: var(--accent); }
.mclips { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--s4); margin: var(--s3) 0 var(--s6); }
figure.mclip { margin: 0; padding: var(--s2); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); scroll-margin-top: 70px; }
figure.mclip video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: #000; }
figure.mclip figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: var(--s2) var(--s1) 2px; color: var(--text-2);
  font-size: 13px; line-height: 20px; }
figure.mclip figcaption b { color: var(--text); }
figure.mclip figcaption .grow { flex: 1; }
figure.mclip figcaption form { margin: 0; }
/* #186: Make a clip in the background - its cell's states in place (the width kept: nothing under it moves), animated:
   Scheduling… / Queued (a spinner, a bar sliding), Recording… (the bar filling as the site says); 120 fps beside the button */
.mt td.clipc { width: 128px; min-width: 128px; max-width: 128px; white-space: normal; }   /* (one width whatever it says: a phone's table
   laid out again as a cell changed moved the rows above it - the page jumped) */
.mt td.clipc form.clipmake { flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cl-short { display: none; }
@media (max-width: 640px) {                                  /* (a phone: the column narrower - "Clip", the states on lines of their own) */
  .mt td.clipc { width: 86px; min-width: 86px; max-width: 86px; }
  .mt td.clipc .cl-long { display: none; }
  .mt td.clipc .cl-short { display: inline; }
  .mt td.clipc .clipst { min-width: 0; white-space: normal; }
  .mt td.clipc .clipwhy { max-width: none; }
  .mt td.clipc a.cliplink { white-space: normal; }
}
label.clipfps { display: inline-flex; align-items: center; gap: 3px; margin: 0; color: var(--text-3); font-size: 11px; line-height: 16px;
  white-space: nowrap; cursor: pointer; }
label.clipfps input { width: 12px; height: 12px; margin: 0; accent-color: var(--accent); }
.clipst { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; row-gap: 3px; min-width: 112px;
  color: var(--text); font-size: 13px; line-height: 18px; white-space: nowrap; }
.clipst small { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.clipst .clipbar { grid-column: 1 / -1; }
.clipst .clipwhy { grid-column: 1 / -1; max-width: 220px; color: var(--text-3); font-size: 11px; line-height: 15px; white-space: normal; }
.mt td.clipc .clipwhy { max-width: 180px; }
.clipspin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--overlay-2); border-top-color: var(--accent);
  animation: pp-clipspin .8s linear infinite; }
.clipst.s .clipspin { border-top-color: var(--text-2); }
.clipbar { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--overlay-2); }
.clipbar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: width 5s linear; }
.clipbar.ind i { width: 35%; animation: pp-clipslide 1.3s ease-in-out infinite; transition: none; }
.clipst.s .clipbar.ind i { background: var(--text-2); }
@keyframes pp-clipspin { to { transform: rotate(360deg); } }
@keyframes pp-clipslide { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .clipspin { animation-duration: 2.4s; } .clipbar.ind i { animation-duration: 3.5s; } }
.fpstag { padding: 0 6px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; }
figure.mclip figcaption button.play120 { padding: 1px 8px; font-size: 12px; }
/* #186: Your clips - every clip you asked for (a card each: played; on its way - its state in the video's place; failed), your
   tokens, Get more tokens beside them */
.clipcards .card b { display: flex; align-items: center; gap: 8px; }
.clipcards .card b span.ctokn { color: inherit; font-size: inherit; line-height: inherit; }
figure.mclip figcaption .cap { min-width: 0; }
.clipcards .card b svg { width: 20px; height: 20px; }
.clipsplit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s4); align-items: start; }
.clipsplit .mclips { margin-top: var(--s3); }
.clipph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: var(--s3); border-radius: var(--r-md);
  background: var(--bg-deep); text-align: center; }
.clipph .clipst { min-width: 180px; }
.clipph .clipcell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clipph .clipcell .msg { margin: 0; }
figure.mclip.failed .clipph { background: repeating-linear-gradient(135deg, var(--bg-deep) 0 12px, var(--card) 12px 24px); }
.box.clipbuy { margin-top: var(--s3); }
.box.clipbuy h2 { margin-top: 0; }
.buyf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--s2) 0; }
.buyf input { width: 64px; padding: 3px 8px; }
.buyf button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) { .clipsplit { grid-template-columns: 1fr; } }
form.pickf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 4px var(--s1) 2px; font-size: 12px; }
form.pickf button { padding: 1px 8px; font-size: 12px; }
form.pickf .picked { color: var(--accent); font-weight: 600; }
form.pickf .sub { flex-basis: 100%; font-size: 11px; line-height: 15px; }
/* #186: a public profile's Highlights - the clips its player picked, right below the name */
.hlstrip { margin: var(--s3) 0 var(--s4); }
.hlstrip h2 { margin: 0 0 var(--s1); }
.mclips.hl { margin: var(--s2) 0 0; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* #194: Share on a clip (its page's link copied - a phone's share sheet), and the clip's own page, propeeks.gg/c/<id>: the clip
   big, who and what, Share and the ProPeeks mark under it, then Train this and Clip your own side by side */
a.clipshare { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border: 1px solid var(--accent-line); border-radius: var(--r);
  color: var(--accent); font-size: 12px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--normal) var(--ease), border-color var(--normal) var(--ease), transform var(--fast) var(--ease); }
a.clipshare:hover { background: var(--accent-soft); }
a.clipshare:active { transform: scale(.95); }
a.clipshare.done { border-color: var(--success); color: var(--success); }
a.clipshare.big { padding: 7px 16px; border-color: transparent; background: var(--accent); color: var(--accent-fg); font-size: 14px; line-height: 20px;
  box-shadow: var(--shadow-100); }
a.clipshare.big:hover { background: var(--accent); opacity: .9; }
a.clipshare.big.done { background: var(--success); color: #0b1f12; }
.cshead h1 { overflow-wrap: anywhere; }
.cshead h1 .won, .cshead h1 .lost { font-size: 22px; font-weight: 600; }
.cshead .sub { margin-bottom: var(--s4); }
figure.mclip.csclip { padding: var(--s2); }
figure.mclip.csclip figcaption { font-size: 14px; line-height: 22px; }
figure.mclip.csclip figcaption .cap .sub { margin: 0; font-size: 13px; }
.csacts { margin: var(--s3) 0 var(--s2); }
a.ppmark { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: var(--r-full); background: var(--card);
  box-shadow: var(--shadow-100); color: var(--text-2); font-size: 12px; font-weight: 600; text-decoration: none; }
a.ppmark img { width: 16px; height: 16px; border-radius: 3px; }
a.ppmark:hover { color: var(--text); }
.csgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; margin-top: var(--s2); }
.csgrid .box { display: flex; flex-direction: column; margin: 0; }
.csgrid .box h2 { margin: 0 0 var(--s2); }
.csgrid .box p.sub { margin: 0 0 var(--s3); }
.csgrid .box p.what { margin: 0 0 var(--s2); color: var(--text); }
.csgrid .csgo { margin-top: auto; }
.csgrid .csgo form { margin: 0; }
.box.cstrain { box-shadow: var(--shadow-200), inset 0 0 0 1px var(--accent-faint); }
@media (max-width: 640px) {
  .csgrid { grid-template-columns: minmax(0, 1fr); }
  .cshead h1 { font-size: 24px; line-height: 30px; }
  figure.mclip.csclip { margin: 0 calc(-1 * var(--s3)); }
  .csacts a.clipshare.big { flex: 1; justify-content: center; }
}
form.grantf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
form.grantf input { padding: 3px 8px; font-size: 13px; }
form.grantf input[name=n] { width: 52px; }
@media (max-width: 640px) { .mclips { grid-template-columns: 1fr; } }
.xhcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3); margin: var(--s3) 0; }   /* (#106:
   crosshair placement's worst - a card each) */
.xhcard { padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-100); }
.xhtop { color: var(--text-2); font-size: 13px; margin-bottom: var(--s2); }
.xhtop .who { white-space: nowrap; }
.xhbody { display: flex; gap: var(--s3); align-items: flex-start; }
.xhbody p { margin: 0 0 var(--s2); color: var(--text-2); font-size: 14px; line-height: 21px; }
.xhbody p b { color: var(--text); }
.btn.dim.xhin, button.small.xhin { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border-strong)); }   /* (#789: in your training) */
.xhtrainact { margin: var(--s2) 0; }
.mt.xhtrain td.xpl { white-space: nowrap; } .mt.xhtrain td.act { text-align: right; }
@media (max-width: 600px) { .mt.xhtrain .xm, .mt.xhtrain .xp { display: none; } }   /* (a phone: the place, round, degrees, match, Remove) */
svg.radar.xhmap { flex: none; width: 140px; height: 140px; }
dl.defs dt { margin-top: var(--s3); color: var(--accent); font-weight: 600; }
dl.defs dd { margin: 2px 0 0; color: var(--text-2); }
.av.none { display: inline-block; width: 22px; height: 22px; margin-right: var(--s2); border-radius: var(--r-sm); background: var(--raised);
  vertical-align: middle; }
.rk { margin-left: var(--s1); font-size: 12px; }                         /* (a rank as text: no pictures here) */
.fc { color: #ff5500; font-weight: 600; }     /* (a FACEIT match, a FACEIT level - #13: its name in its orange, text: their logo's theirs) */
img.rank { width: 50px; height: 20px; margin-left: var(--s2); vertical-align: middle; }
img.rank.big { width: 80px; height: 32px; margin-left: 14px; }
.prem { display: inline-block; width: 62px; height: 22px; margin-left: var(--s2); padding-left: 12px; vertical-align: middle;
  background: no-repeat center / 100% 100%; font: italic 700 10px/22px var(--font); letter-spacing: .3px; text-align: center;
  text-shadow: 1px 1px 1px #000; filter: brightness(1.15); }
.prem b { font-size: 13px; font-weight: 900; }
.prem.big { width: 100px; height: 36px; margin-left: 14px; padding-left: 20px; font-size: 15px; line-height: 36px; vertical-align: 4px; }
.prem.big b { font-size: 20px; }
img.av.big, .av.big.none { width: 44px; height: 44px; margin-right: var(--s3); border-radius: var(--r-md); vertical-align: -10px; }

/* ---- leaderboards (#27): the period (a segmented pair), the modes (the control page's buttons, each its mode's colour), a
   board's filters (chips), the boards (yours highlighted as the match tables do) */
.lbnav { margin: var(--s4) 0 var(--s2); }
.seg a { padding: 5px 16px; border-radius: var(--r-md); color: var(--text-3); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: color var(--normal) var(--ease), background-color var(--normal) var(--ease); }
.seg a:hover { color: var(--text); }
.seg a.on { background: var(--accent); color: var(--accent-fg); }
.mtabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; box-sizing: border-box; margin: var(--s2) 0 var(--s3); }   /* (#216: Matches' modes) */
.mtabs .n { margin-left: 4px; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
.modes { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s3) 0 var(--s2); }
.modes a { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-100);
  color: var(--text-2); font-size: 14px; line-height: 20px; text-decoration: none; transition: background-color var(--normal) var(--ease); }
.modes a svg.mi { color: var(--mode, currentColor); }
.modes a:hover { background: var(--raised); color: var(--text); }
.modes a.on { background: color-mix(in srgb, var(--mode, var(--accent)) 14%, var(--card)); box-shadow: inset 0 0 0 1px var(--mode, var(--accent));
  color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: var(--s3) 0; }
.chips a { padding: 3px 11px; border-radius: var(--r-full); background: var(--card); box-shadow: var(--shadow-100); color: var(--text-2); font-size: 13px;
  line-height: 20px; text-decoration: none; }
.chips a:hover { background: var(--raised); color: var(--text); }
.chips a.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.chips .lab { margin: 0 4px 0 14px; color: var(--text-3); font-size: 12px; }
.chips .lab:first-child { margin-left: 0; }
/* ---- feedback (#144): the form's More of this picks (hidden while another kind's picked - shown where :has() isn't
   known), the admins' list: each kind's tag, a spot to copy, the states (the item's own lit) */
form.fb:has(input[value=more]:not(:checked)) .fb-more { display: none; }
.fb-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); max-width: 640px; margin: var(--s2) 0 0 10px; }
.tag.fbk-problem { --mode: var(--danger); --mode-fg: var(--accent-fg); }
.tag.fbk-idea { --mode: var(--blue); --mode-fg: var(--accent-fg); }
.tag.fbk-more { --mode: var(--success); --mode-fg: var(--accent-fg); }
.fb-spot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: 6px; white-space: normal; }
.fb-spot code { user-select: all; overflow-wrap: anywhere; }
.fb-states { display: flex; flex-wrap: wrap; gap: 4px; }
.fb-states button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
/* ---- x's review reports (#161, reviews.py): their tag, a setup's page - its fields, the bots, the log scrolled */
.tag.fbk-review { --mode: #c6a4ff; --mode-fg: var(--accent-fg); }
.xr-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: var(--s2) 0 var(--s3); font-size: 14px; }
.xr-kv dt { color: var(--text-3); } .xr-kv dd { margin: 0; overflow-wrap: anywhere; }
.xr-log { max-height: 60vh; overflow: auto; background: var(--bg-deep, #16161c); border-radius: var(--r); padding: 10px 12px;
  font: 12px/1.5 ui-monospace, monospace; white-space: pre; }
table.xr-bots td, table.xr-bots th { font-size: 13px; white-space: nowrap; } .xr-wide { overflow-x: auto; }
/* ---- the board (#145): the items - a vote, its tags, its text, who and when, a request's spot on the radar -, an item's
   page (yours, the admins' box, the comments) */
.badd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.badd .sub { margin: 0; }
.blist { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0; }
.bitem { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-100); scroll-margin-top: 72px; }
.bitem:target { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-100); }
.bitem.big { margin: var(--s2) 0 var(--s4); padding: var(--s4) var(--s5); box-shadow: var(--shadow-200); }
.bbody { flex: 1; min-width: 0; }
.btags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.btext { display: block; color: var(--text); font-size: 15px; line-height: 22px; text-decoration: none; overflow-wrap: anywhere; }
a.btext:hover { text-decoration: underline; }
h1.btext { margin: 4px 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; white-space: pre-wrap; }
.bmeta { margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 22px; }
.bmeta .sub { margin: 0; font-size: 13px; }
.bmeta .av.none { display: none; }
.bmeta img.av { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.bvf { margin: 0; }
.bv { display: flex; flex: none; flex-direction: column; align-items: center; width: 56px; padding: 6px 0 5px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--raised); color: var(--text-2); font: inherit; line-height: 1; text-decoration: none; cursor: pointer; }
.bv .arr { font-size: 12px; }
.bv b { margin: 4px 0 2px; color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
.bv .vl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
button.bv:hover, a.bv:hover { border-color: var(--accent-line); color: var(--text); }
button.bv:active { transform: scale(.95); }
.bv.on { border-color: var(--accent); background: var(--accent-faint); color: var(--accent); }
.bv.own, .bv.shut { cursor: default; opacity: .75; }
.tag.bst-new { --mode: var(--overlay-2); }
.tag.bst-planned { --mode: var(--indigo); --mode-fg: var(--accent-fg); }
.tag.bst-progress { --mode: var(--accent); --mode-fg: var(--accent-fg); }
.tag.bst-done { --mode: var(--success); --mode-fg: var(--accent-fg); }
.tag.bst-wont { --mode: var(--overlay); --mode-fg: var(--text-3); }
svg.radar.bspot { flex: none; width: 96px; height: 96px; }
svg.radar.bspot.big { width: 220px; height: 220px; }
.bcrumb { margin: 0; }
.bown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.bown p { margin: 0; }
.bown form { margin: 0; }
.badmin .badrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.badmin form { margin: 0; }
.badmin input[name=into] { width: 5em; padding: 3px 8px; margin-right: 4px; }
.bcom { margin: var(--s2) 0; padding: var(--s2) var(--s4); border-left: 2px solid var(--border-strong); scroll-margin-top: 72px; }
.bcom:target { border-left-color: var(--accent); background: var(--accent-faint); }
.bcom.hid { opacity: .5; }
.bcom .bmeta { margin: 0; }
.bcom .bmeta .tag { margin-left: 4px; font-size: 11px; }
.bcom form.inline { display: inline; margin-left: var(--s2); }
.bcom p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bcform { max-width: 720px; margin: var(--s4) 0; }
.bcform textarea { width: 100%; }
.bcfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.bcfoot .sub { margin: 0; }
.bnote ul.plist { margin: 6px 0; }
@media (max-width: 640px) {
  .bitem { gap: var(--s3); padding: var(--s3); }
  .bitem.big { flex-wrap: wrap; padding: var(--s3); }
  .bitem.big svg.radar.bspot.big { width: 100%; height: auto; aspect-ratio: 1; }
  .bv { width: 46px; }
  svg.radar.bspot { width: 64px; height: 64px; }
  h1.btext { font-size: 17px; line-height: 24px; }
}
table.lb td.n, table.lb th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.lb td:first-child { width: 3em; color: var(--text-3); }
table.lb td.who { overflow-wrap: anywhere; }
table.lb tr.me td { background: var(--accent-faint); }
table.lb tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); font-weight: 700; }
table.lb tr.gap td { padding: 0 12px; color: var(--text-3); text-align: center; line-height: 18px; }
table.lb .tag { margin-left: 6px; background: var(--accent); color: var(--accent-fg); font-size: 11px; line-height: 16px; font-weight: 600; }
table.lb.list td:first-child { width: auto; color: var(--text); }
table.lb.list tr.sel td { background: var(--overlay); }
.anon { color: var(--text-2); }
p.yours { margin: var(--s2) 0 0; }
p.yours b { color: var(--accent); }
.whoami .av { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
form.inl { display: inline-block; margin: 2px 6px 2px 0; }
/* #217: a stage (/admin/releases) - Admins, Beta (the control page's BETA badge's yellow), Public */
.tag.stage-admin { --mode: var(--danger); --mode-fg: var(--accent-fg); }
.tag.stage-beta { --mode: var(--accent); --mode-fg: var(--accent-fg); }
form.relbulk { display: grid; gap: var(--s2); max-width: 640px; margin: var(--s3) 0; }
form.relbulk label { color: var(--text-2); font-size: 13px; }

/* ---- the training plan (#28: plans.py) - a box; each item raised in it: its number, the drill's tag, where and how long,
   Start on the right; why (the numbers), where it showed up, progress - quieter */
.plan h2 { margin-top: 0; }
.plan h2 .sub { margin: 0; font-size: 14px; font-weight: 400; }
.pitem { margin: var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--raised); }
.pitem p { margin: 6px 0; color: var(--text-body); }
.pitem p.sub { margin: 4px 0; color: var(--text-2); }
.pitem p.prog { color: var(--text-3); }
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.phead .pn { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--overlay-2);
  color: var(--text-2); font-size: 12px; font-weight: 700; }
.phead .pwhat { flex: 1 1 220px; color: var(--text-2); font-size: 14px; }
.phead form.inl { margin: 0; }
table.pmini td { vertical-align: middle; }
table.pmini td .sub { display: block; margin: 0; font-size: 12px; line-height: 16px; }
table.pmini td.pdrill { white-space: nowrap; }
table.pmini td.pdrill .tag { margin-right: var(--s2); }
table.pmini td form.inl { margin: 0; }
.c-habit { --mode: var(--overlay-2); --mode-fg: var(--text-2); }   /* (#78's positioning: a habit for your matches - no drill) */

/* ---- the profile (#103: profiles.py) - your numbers over time. Its charts: small multiples, one a number, inline SVG with
   no script (a match's numbers on :hover / :focus - its title - and in the table under it). The dataviz way: yours is the
   one series that's the point (the accent: your last 10 matches as of each match; each match's own faint), the rest
   context - your lobbies a gray line, the pros a blue one (scripts' validator on --raised: gray / blue all-pairs ΔE 15.5,
   CVD 15.4; the accent is the brand's, its contrast 12:1) - hairline grid, direct label on your end only, a legend over them */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }   /* (the headline numbers: two a row on a phone) */
.pcards .card { min-width: 0; }
.card b.rpic { height: 36px; margin-bottom: 2px; }                 /* (#216: Premier's rating on its tier's badge, as Matches shows it) */
.card b.rpic .prem.big { margin: 0; vertical-align: top; }
.card b.rpic .prem span { font-size: inherit; line-height: inherit; }
.card b.rpic .prem b { display: inline; color: inherit; font-size: 20px; line-height: inherit; letter-spacing: normal; }
.mranks h2 { margin-top: 0; }
.mrlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); margin-top: var(--s3); }   /* (#216: each map's
   Competitive rank - its picture, the map, when it was seen) */
.mrank { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: var(--s2) var(--s3);
  border-radius: var(--r-md); background: var(--raised); }
.mrank img.rpic { width: 80px; height: 32px; margin-bottom: 2px; }
.mrank .rname { color: var(--accent); font-weight: 700; line-height: 32px; }
.mrank b { color: var(--text); font-size: 14px; line-height: 20px; }
.mrank span:last-child { color: var(--text-3); font-size: 12px; line-height: 16px; }
.ptrends { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); margin: var(--s3) 0 0; }
.ptrend { margin: 0; padding: var(--s3) var(--s3) var(--s2); border-radius: var(--r); background: var(--raised); }
.pitem .ptrend { margin: var(--s2) 0 0; padding: var(--s2) 0 0; max-width: 340px; background: none; }
.ptrend figcaption { color: var(--text-body); font-size: 13px; line-height: 18px; }
.ptrend figcaption b { color: var(--text); font-weight: 600; }
.ptrend figcaption span { color: var(--text-3); font-size: 12px; }
svg.trend { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
svg.trend text { fill: var(--text-3); font: 10px var(--font); font-variant-numeric: tabular-nums; }
svg.trend text.end { fill: var(--text); font-size: 11px; font-weight: 600; }
svg.trend .grid { stroke: var(--border-strong); stroke-width: 1; }
svg.trend .you { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.trend .lobby { fill: none; stroke: #6b7380; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
svg.trend .pros { stroke: #3987e5; stroke-width: 1.5; }
svg.trend .sess { stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; }
svg.trend .pt { cursor: default; }
svg.trend .pt .hit { fill: transparent; }
svg.trend .pt .dot { fill: var(--accent); opacity: .38; transition: opacity var(--fast) var(--ease); }
svg.trend .pt:hover .dot, svg.trend .pt:focus .dot { opacity: 1; stroke: var(--text); stroke-width: 1.5; }
svg.trend .pt:focus { outline: none; }
svg.trend .endpt { fill: var(--accent); stroke: var(--raised); stroke-width: 2; }
.pitem svg.trend .endpt { stroke: var(--raised); }
.plegend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: var(--s2) 0 0; color: var(--text-2); font-size: 12px; }
.plegend span { display: inline-flex; align-items: center; gap: 6px; }
.plegend .k { display: inline-block; flex: none; }
.plegend .k.you { width: 16px; height: 2px; border-radius: 1px; background: var(--accent); }
.plegend .k.lobby { width: 16px; height: 2px; border-radius: 1px; background: #6b7380; }
.plegend .k.pros { width: 16px; height: 2px; border-radius: 1px; background: #3987e5; }
.plegend .k.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .38; }
.plegend .k.sess { width: 2px; height: 8px; border-radius: 1px; background: var(--text-2); }
details.tv { margin: 4px 0 0; color: var(--text-3); font-size: 12px; }
details.tv summary { cursor: pointer; }
details.tv table { font-size: 12px; }
details.how { margin: 6px 0 0; color: var(--text-3); font-size: 13px; line-height: 20px; }   /* (#231: how we work it out, folded) */
details.how summary { cursor: pointer; color: var(--text-2); }
details.how p { margin: 4px 0 0; }
dl.gdl + details.how { margin-top: var(--s2); }
ul.plist { margin: 6px 0; padding-left: 18px; color: var(--text-body); }
ul.plist li { margin: 3px 0; }
/* (#230: your other Steam accounts on /profile - each with Remove) */
ul.accts { margin: 10px 0 0; padding: 0; list-style: none; }
ul.accts li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
ul.accts .av { flex: none; width: 32px; height: 32px; border-radius: 4px; background: var(--raised); }
ul.accts .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
ul.accts form { margin: 0; }
.pst { white-space: nowrap; }
.pst::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--overlay-2);
  vertical-align: 1px; }
.pst.gap::before { background: var(--danger); }
.pst.likely::before { background: #fab219; }
.pst.ahead::before { background: var(--success); }
.pst.few { color: var(--text-3); }

/* ---- doing well (#28: profiles.well_html) - the plan's box the other way round: your strengths, what's getting better,
   your bests side by side (one under the other on a phone), each part raised in it with the profile's green 'ahead' dot */
.well h2 { margin-top: 0; }
.well h2 .sub { margin: 0; font-size: 14px; font-weight: 400; }
.wparts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); }
.wpart { padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--raised); }
.wpart h3 { margin: 0 0 var(--s2); color: var(--text-2); font-size: 13px; line-height: 18px; }
.wpart h3::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--success);
  vertical-align: 1px; }
.wpart p.sub { margin: 4px 0 0; font-size: 12px; }
ul.wlist { margin: 0; padding: 0; list-style: none; color: var(--text-body); font-size: 14px; line-height: 20px; }
ul.wlist li { margin: 0 0 var(--s2); }
ul.wlist li:last-child { margin-bottom: 0; }
ul.wlist li b { color: var(--text); font-weight: 600; }
ul.wlist .wday { margin-right: 6px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
ul.wlist .wsure { display: inline-block; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-3);
  font-size: 11px; line-height: 16px; vertical-align: 1px; }
.box.well > ul.wlist { margin: var(--s2) 0; }

/* ---- the blog and the legal pages: reading width, calmer text */
.post, .article { max-width: 720px; }
.post h1 { margin-bottom: var(--s2); font-size: 34px; line-height: 1.2; letter-spacing: -.015em; }
.post h2, .article h2 { margin-top: var(--s10); font-size: 22px; line-height: 30px; }
.post h3, .article h3 { margin-top: 28px; color: var(--text); font-size: 17px; }
.post p, .post li, .article p, .article li { color: var(--text-body); font-size: 17px; line-height: 1.7; }
.post li, .article li { margin: var(--s1) 0; }
.post img, .post video { display: block; max-width: 100%; height: auto; margin: var(--s3) 0 6px; border-radius: var(--r-xl); box-shadow: var(--shadow-200); }
.post video { width: 100%; background: var(--bg-deep); }
.post .cap { margin-top: 0; color: var(--text-3); font-size: 14px; line-height: 1.5; }
.post table, .article table { margin: var(--s4) 0 var(--s6); font-size: 15px; }
.post th, .post td { padding: 8px 12px; }
.post blockquote { margin: var(--s5) 0; padding: var(--s1) var(--s5); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  background: var(--card); color: var(--text-2); }
.post blockquote p { color: var(--text-2); }
.post code { font-size: 15px; }
.post .meta { margin-bottom: var(--s8); color: var(--text-3); font-size: 14px; }
.posts .item { position: relative; margin: 14px 0; padding: 18px 22px; border: 1px solid transparent; border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-200); transition: border-color var(--normal) var(--ease); }
.posts .item:hover { border-color: var(--border-strong); }
.posts .item a.t { font-size: 20px; line-height: 28px; font-weight: 600; text-decoration: none; }
.posts .item a.t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* (the whole card opens it - your call;
   still one link: the title's) */
.posts .item:hover a.t { text-decoration: underline; text-decoration-color: var(--accent-line); }
.posts .item p { margin: 6px 0 0; color: var(--text-2); }

/* ---- the front page, signed out (#129: landing.py): the pitch beside the narrated execute, the drills' clips in a grid, the
   made-up match's pictures, the beta. Every clip 16:9 on the page's darkest surface, a card's corners and shadow */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; margin-bottom: var(--s8); }
.hero.solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.hero h1 { margin-bottom: var(--s4); font-size: 40px; line-height: 1.15; letter-spacing: -.02em; }
.hero .lead { color: var(--text-body); font-size: 18px; line-height: 1.6; }
.hero .sub { margin-bottom: 0; }
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.cta .btn { padding: 11px 22px; font-size: 15px; }
.cta .btn.dim { padding: 10px 18px; font-size: 15px; }
.clip, .player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl);
  background: var(--bg-deep); box-shadow: var(--shadow-200); }
.clip.ph { display: flex; align-items: center; justify-content: center;   /* (no clip yet: the mode's icon on its colour) */
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--mode) 22%, var(--card)), var(--bg-deep) 75%); }
.clip.ph svg.mi { width: 64px; height: 64px; margin: 0; color: var(--mode); opacity: .85; }
.player, .drill, .still { margin: 0; }
.player .frame { position: relative; }
.player .playbig { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  align-items: center; gap: var(--s2); padding: 12px 22px 12px 16px; border: 0; border-radius: var(--r-full); background: var(--accent);
  color: var(--accent-fg); font: 600 16px/24px var(--font); cursor: pointer; box-shadow: var(--shadow-300), 0 0 0 6px var(--accent-soft);
  transition: transform var(--fast) var(--ease), box-shadow var(--normal) var(--ease); }
.player .playbig svg { width: 24px; height: 24px; fill: currentColor; }
.player .playbig:hover { box-shadow: var(--shadow-300), 0 0 0 10px var(--accent-soft); }
.player .playbig:active { transform: translate(-50%, -50%) scale(.95); }
.player.js .playbig { display: inline-flex; }                     /* (its script there: the button; never once it's playing) */
.player.js.on .playbig { display: none; }
.player figcaption, .drill figcaption, .still figcaption { margin-top: 10px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.drills { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s6) var(--s5); margin: var(--s4) 0 var(--s3); }
.drill .tag { margin-right: 4px; }
.sndclip { position: relative; }                                   /* (a drill's clip with the team's calls: its Sound button) */
.sndclip .snd { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; border: 0; border-radius: var(--r-full); background: rgba(14, 14, 18, .72); color: var(--text);
  font: 600 13px/18px var(--font); cursor: pointer; transition: background var(--fast) var(--ease); }
.sndclip .snd[hidden] { display: none; }
.sndclip .snd svg { width: 16px; height: 16px; fill: currentColor; }
.sndclip .snd:hover { background: rgba(14, 14, 18, .9); }
.sndclip .snd[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); }
.stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); margin: var(--s4) 0; }
.still a { display: block; border-radius: var(--r-xl); box-shadow: var(--shadow-200); overflow: hidden; }
.still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left;
  transition: transform var(--normal) var(--ease); }
.still a:hover img { transform: scale(1.015); }
.still figcaption b, .player figcaption b { color: var(--text); font-weight: 600; }
/* (a match picture opened large over the page, the page dimmed behind - LANDING_JS: a click outside it, the X, Esc or the
   back button closes it; a phone's its own picture) */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: max(3vh, 48px) 3vw 3vh; background: rgba(6, 8, 12, .88); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-xl);
  box-shadow: var(--shadow-300); cursor: default; }
.lightbox .lb-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .12); color: #fff; font: 600 20px/40px var(--font); cursor: pointer; }
.lightbox .lb-x:hover { background: rgba(255, 255, 255, .22); }
html.lb-on { overflow: hidden; }
/* (#1133's next page: what you notice of the bots - a card each, its clip or its line alone -, the drills' groups, the beta's
   questions folded) */
.hero .real { margin: var(--s3) 0; color: var(--text); font-size: 16px; font-weight: 600; }   /* (#1133: the realism line) */
/* (#1133: the clips' sound, one control for them all - off till pressed: the clip most in sight heard, the rest muted) */
.sndall { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px 9px 12px; border: 0; border-radius: var(--r-full); background: rgba(14, 14, 18, .85); color: var(--text);
  font: 600 14px/20px var(--font); cursor: pointer; box-shadow: var(--shadow-300); }
.sndall[hidden] { display: none; }
.sndall svg { width: 18px; height: 18px; fill: currentColor; }
.sndall[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); }
.point { padding: var(--s4) var(--s5); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200);
  border-left: 3px solid var(--accent); }
.point b { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }
.point p { margin: 0; color: var(--text-body); font-size: 15px; line-height: 1.5; }
.drills.think { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
@media (max-width: 700px) { .drills.think { grid-template-columns: minmax(0, 1fr); } }   /* (a phone: a card a row, as the drills) */
h3.grp { margin: var(--s6) 0 0; color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.drill .tag.stage-beta, h2 .tag.stage-beta { margin-left: 2px; font-size: 11px; vertical-align: 2px; }
.c-fullrounds { --mode: #e0a458; --mode-fg: var(--accent-fg); }   /* (Full rounds: no icon of its own) */
.faq { max-width: 720px; margin: var(--s5) 0; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { padding: 12px 0; color: var(--text); font-weight: 600; cursor: pointer; }
.faq details p { margin: 0 0 14px; color: var(--text-body); }
ul.beta { max-width: 720px; padding-left: 22px; color: var(--text-body); }
ul.beta li { margin: 6px 0; }
ul.beta li::marker { color: var(--accent); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .hero h1 { font-size: 32px; }
}

/* ---- a phone */
@media (max-width: 700px) {
  .xhcards { grid-template-columns: 1fr; }                   /* (#106: a card a row; its map over its words) */
  .xhbody { flex-direction: column; }
  main { margin: var(--s6) auto var(--s10); padding: 0 var(--s4); }
  h1 { font-size: 24px; line-height: 32px; }
  h2 { margin-top: 28px; }
  footer.foot { padding: var(--s4) var(--s4) 0; }
  /* tables: every column on the screen, no sideways scroll - tighter, words wrap (a long name or id breaks anywhere,
     numbers never), the match tables tightest; the admin-style ones (table.stack) a block a row, "label: value" lines */
  table { font-size: 13px; }
  th { padding: 7px 4px; font-size: 11px; line-height: 14px; letter-spacing: 0; }
  td { padding: 7px 4px; }
  th:first-child, td:first-child { padding-left: 10px; }
  th:last-child, td:last-child { padding-right: 10px; }
  td { overflow-wrap: break-word; }
  .mt td:first-child, td.who, td.id, table.stack td { overflow-wrap: anywhere; }   /* (names and ids: may break anywhere) */
  .id, td.id a { word-break: break-all; }
  .mt { font-size: 12px; }
  .mt th { font-size: 10px; white-space: normal; }
  .mt th, .mt td { padding-left: 3px; padding-right: 3px; }
  .mt th:first-child, .mt td:first-child { padding-left: 8px; }
  .mt th:last-child, .mt td:last-child { padding-right: 8px; }
  .mt td a, .mt td.who { white-space: normal; }
  .mt .av, .mt .av.none { width: 16px; height: 16px; margin-right: 4px; }
  .mt td:first-child .rk, .mt td:first-child .prem, .mt td:first-child img.rank { display: block; margin: 2px 0 0; }
  .mt .rk { font-size: 10px; line-height: 13px; }
  .mt td.when { white-space: normal; }                                   /* (#120: the clock under the round, the button under it) */
  .mt td.when .sub { display: block; font-size: 10px; line-height: 13px; white-space: nowrap; }
  .mt button.tk { margin: 2px 0 0; padding: 0 4px; font-size: 10px; }
  table.tries td, table.tries th { padding: 4px 3px; font-size: 12px; }
  svg.chart text { font-size: 20px; }                                     /* (the chart drawn ~0.4x: its words still readable) */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto; }
  table.stack th { display: none; }
  table.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.stack tr:first-child { padding: 0; border: 0; }                  /* (the header row: its cells hidden) */
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { position: relative; min-height: 22px; padding: 2px 0 2px 38%; border: 0; line-height: 20px; }
  table.stack td::before { content: attr(data-label); position: absolute; top: 2px; left: 0; width: 35%; color: var(--text-3);
    font-size: 12px; line-height: 20px; overflow-wrap: normal; }
  table.stack td:not([data-label]) { padding-left: 0; }
  table.stack td:first-child { padding: 0 0 4px; font-size: 14px; font-weight: 600; }
  table.stack td:empty { display: none; }
  table.stack td form { margin-top: 6px; }
  .cal { width: 100%; margin: 0 -3px; border-spacing: 3px; table-layout: fixed; }
  .cal td { width: auto; height: 46px; }
  .cal td a { padding: 4px 5px; }
  .cal td span { display: none; }
  .nav form { margin-left: 0; }
  .post h1 { font-size: 27px; }
  .post p, .post li, .article p, .article li { font-size: 16px; }
  .posts .item { padding: var(--s4); }
  .box { padding: var(--s3) var(--s4); }
  .uplist li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }                       /* (a file: its name and size, then */
  .uplist progress, .uplist .upsay { grid-column: 1 / -1; }                                     /*  its bar, then what's happening) */
  table.pmini td.pdrill .tag { display: none; }                          /* (a match's plan box: the drill's Start only - its name's above) */
  .pitem { padding: var(--s3); }
  .hero h1 { font-size: 28px; }                                          /* (the front page: one column, the pitch first) */
  .hero .lead { font-size: 16px; }
  .drills, .stills { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .still.two img { aspect-ratio: 4 / 5; }                                /* (its phone picture: the page as a phone shows it) */
  svg.radar { width: 104px; height: 104px; }                             /* (#78: a duel's spot - 180 px took a phone's table past its edge) */
  .player .playbig { padding: 10px 18px 10px 12px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important; }
}

h1 a.steam { color: inherit; text-decoration: none; }   /* a match player's name: their Steam profile */
h1 a.steam:hover { text-decoration: underline; }
h1 a.steam .ext { font-size: 0.55em; margin-left: 4px; vertical-align: super; opacity: 0.55; }
h1 a.ppname { color: inherit; text-decoration: none; }   /* (a match player's name: their ProPeeks profile, Steam from there) */
h1 a.ppname:hover { text-decoration: underline; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0; }          /* (#121: who sees */
.share .sub { margin: 0; }                                                                                              /*  it, its link) */
.share form { margin: 0; }

/* ---- public profiles (#131: public_profiles.py) - /u/<handle>: a player's profile as anyone sees it; yours on /profile */
h1 a.pp { margin-left: 14px; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-2);
  font-size: 13px; line-height: 20px; font-weight: 500; vertical-align: 6px; text-decoration: none; white-space: nowrap; }   /* (a match */
h1 a.pp:hover { border-color: var(--accent-line); color: var(--text); }                                                    /*  player's) */
table.lb a.pp { color: inherit; text-decoration: none; }   /* (a leaderboard name shown by name: their public profile) */
table.lb a.pp:hover { text-decoration: underline; }
p.publine { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
form.startline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
/* Getting started's buttons land on /matches' boxes (#140: #connect, #steam) - clear of the bar, lit */
.goto { scroll-margin-top: 72px; }
.goto:target > .box { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-200); }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.rcard { min-width: 0; padding: var(--s3); background: var(--raised); box-shadow: none; }
.rcard .rmode { display: block; color: var(--text-2); font-size: 12px; line-height: 16px; }
.rcard .rmode svg.mi { color: var(--mode, currentColor); }
.rcard b { font-size: 20px; line-height: 28px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }   /* (#305: progress by drill) */
.pcard { min-width: 0; padding: var(--s3); background: var(--raised); box-shadow: none; }
.pcard .rmode { display: block; margin-bottom: var(--s2); color: var(--text-2); font-size: 13px; }
.pcard .rmode svg.mi { color: var(--mode, currentColor); }
.pcard .pc { margin-top: var(--s2); }
svg.pchart { display: block; width: 100%; height: auto; }
svg.pchart text { fill: var(--text-3); font: 10px var(--font); }
svg.pchart .grid { stroke: var(--grid); }
svg.pchart .line { fill: none; stroke: var(--mode, var(--blue)); stroke-width: 2; stroke-linejoin: round; }
svg.pchart .dot { fill: var(--mode, var(--blue)); }
.pubform label.handle { display: block; margin: var(--s2) 0; color: var(--text-2); font-size: 14px; }
.pubform label.handle span { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; color: var(--text-3); font-family: var(--mono); }
.pubform label.handle input { width: 220px; font-family: var(--mono); }
@media (max-width: 700px) {
  h1 a.pp { display: inline-block; margin: 6px 0 0; vertical-align: 0; }
  .pubform label.handle span { display: flex; margin: 4px 0 0; }
  .pubform label.handle input { flex: 1; width: auto; min-width: 0; }
}

/* ---- Saved (#117: saved.py) - what you named in game, your saved lineups: Start, Rename, Delete */
table.saved td { vertical-align: top; }
table.saved td:first-child { width: 1%; white-space: nowrap; }
table.saved td.who b.nm { font-family: var(--mono); font-size: 15px; }
table.saved td.act { width: 1%; white-space: nowrap; }
table.saved td.act form.inl { margin: 0 6px 0 0; vertical-align: top; }
table.saved details.edit { display: inline-block; margin: 6px 6px 0 0; vertical-align: top; color: var(--text-2); font-size: 14px; }
table.saved details.edit summary { cursor: pointer; }
table.saved details.edit[open] { display: block; }
table.saved details.edit form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; white-space: normal; }
table.saved details.edit input { width: 220px; padding: 4px 8px; font-family: var(--mono); font-size: 14px; }
#how code { font-family: var(--mono); font-size: 13px; }
@media (max-width: 700px) {                            /* (a row a block: its tag and name, what it is, its buttons) */
  table.saved, table.saved tbody, table.saved tr { display: block; }
  table.saved tr { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
  table.saved tr:last-child { border-bottom: 0; }
  table.saved td, table.saved td:first-child, table.saved td.act { display: block; width: auto; padding: 4px 12px; border: 0; white-space: normal; }
  table.saved td:first-child, table.saved td.who { display: inline-block; }
}
/* ---- shared setups (#146: shares.py) - Saved's Share, a share's page (the radar beside what it is), /setups */
table.saved details.share form input[name=note] { width: 360px; max-width: 100%; font-family: inherit; }
table.saved details.share label.choice { flex-basis: 100%; padding: 2px 0; }
table.saved details.share input[type=checkbox] { width: auto; padding: 0; }
table.saved .publink { margin-top: 4px; font-size: 13px; white-space: normal; }
table.saved .publink a { font-family: var(--mono); }
h1 .nm { font-family: var(--mono); }
.box.setup { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; }
.box.setup > div { flex: 1; min-width: 240px; }
.box.setup p.what { margin: 0 0 var(--s1); font-size: 17px; }
svg.radar.setup { width: 260px; height: 260px; flex: none; }
blockquote.note { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--accent); background: var(--overlay);
                  border-radius: 0 var(--r) var(--r) 0; color: var(--text-body); }
form.filters { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s3) 0; }
form.filters label { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); font-size: 14px; }
table.setups td { vertical-align: top; }
table.setups td.who b.nm { font-family: var(--mono); }
p.pages { display: flex; gap: var(--s4); }
@media (max-width: 700px) {
  svg.radar.setup { width: 100%; height: auto; aspect-ratio: 1; }
  table.saved details.share form input[name=note] { width: 100%; }
}
/* ---- reports (#135): a week's or a month's - the period in a line, the change against the period before (better / worse only
   where the samples say so), the charts' hollow dots (a period with too few to tell) */
p.rline { margin: var(--s4) 0 var(--s2); color: var(--text-body); font-size: 16px; line-height: 24px; }
p.rnav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0 0 var(--s2); font-size: 14px; }
.mt td.chg { font-weight: 600; }
.chg.better { color: var(--success); }
.chg.worse { color: var(--danger); }
.chg.same { color: var(--text-2); font-weight: 400; }
.chg.few { color: var(--text-3); font-weight: 400; }
svg.trend .pt .dot.few { fill: var(--raised); stroke: var(--accent); stroke-width: 1.5; opacity: .7; }
svg.trend .endpt.few { fill: var(--raised); stroke: var(--accent); stroke-width: 2; }
.plegend .k.few { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); opacity: .7; }
/* (#295: your spray outline - your crosshair's path, its spread, the ideal) */
svg.spray { display: block; width: 100%; max-width: 240px; height: auto; margin: 6px auto 0; overflow: visible; }
svg.spray text { fill: var(--text-3); font: 10px var(--font); font-variant-numeric: tabular-nums; }
svg.spray .band { fill: var(--accent); opacity: .12; }
svg.spray .ideal { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; }
svg.spray .you { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.spray .pt .dot { fill: var(--accent); }
svg.spray .pt:hover .dot, svg.spray .pt:focus .dot { stroke: var(--text); stroke-width: 1.5; }
svg.spray .pt:focus { outline: none; }
svg.spray .start { fill: var(--raised); stroke: var(--text); stroke-width: 1.5; }
.plegend .k.ideal { width: 16px; height: 0; border-top: 2px dashed var(--text-2); }
.plegend .k.band { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); opacity: .2; }
.dshots h3 { margin: var(--s4) 0 var(--s1); font-size: 15px; }
.dshots .ptrend .plist { margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: 12px; }
.dshots .ptrend .plist b { margin-right: 6px; font-variant-numeric: tabular-nums; }
.dshots .mt th, .dshots .mt td { white-space: nowrap; }   /* (a phone: the table scrolls in its card, no word broken) */
.mt.rnums td small { display: block; color: var(--text-3); font-size: 12px; line-height: 16px; }
.mt.rnums td.n { white-space: nowrap; }
.mt.rnums th .sub, .mt.rnums td .sub { font-size: inherit; }
/* ---- the glossary (#142): a number's name links to its entry (dotted: it's a word's meaning, not a page of yours), which way
   is better beside it where the name doesn't say (lb: words in a sentence, an arrow in a table or a card); /glossary's entries */
a.gl { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
a.gl:hover { color: var(--accent); text-decoration-color: currentColor; }
.lb { margin-left: 6px; color: var(--text-3); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
th .lb, .card .lb, td .lb { margin-left: 3px; font-size: 12px; }
nav.gtoc { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: var(--s3) 0 var(--s2); color: var(--text-3); font-size: 14px; }
.gent { margin: var(--s3) 0; padding: var(--s4) var(--s5); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200);
  scroll-margin-top: 72px; }
.gent:target { box-shadow: 0 0 0 2px var(--accent-line), var(--shadow-200); }
.gent h3 { margin: 0 0 4px; }
.gent h3 a { color: var(--text); text-decoration: none; }
.gent h3 a:hover { color: var(--accent); }
.gent > p { margin: 0 0 var(--s3); color: var(--text-body); }
.gent > p:last-child { margin-bottom: 0; }
dl.gdl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; margin: 0; font-size: 14px; line-height: 22px; }
dl.gdl dt { color: var(--text-3); }
dl.gdl dd { margin: 0; color: var(--text-2); }
dl.gdl .tag { margin-right: 6px; }
@media (max-width: 640px) {
  .gent { padding: var(--s3) var(--s4); }
  dl.gdl { grid-template-columns: 1fr; gap: 0; }
  dl.gdl dt { margin-top: 8px; font-size: 12px; line-height: 18px; letter-spacing: .02em; }
}

/* someone's invite link (#201: propeeks_web invite, friends.invite_html) - your Join to their server, green as the bar's */
#ppinv .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
#ppinv a.btn.join { padding: 11px 26px; background: #3ecf6e; color: #0b1f12; font-size: 16px; font-weight: 700;
  box-shadow: 0 0 0 1px #6fe596 inset, 0 0 16px rgba(62, 207, 110, .45); }
#ppinv code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; user-select: all; }

/* the scenario browser (#211: scenarios.py, /scenarios) - the search and filters, then a card each: its mini radar (the map's
   small picture, lazy, cropped round its dots by the inline style; the dots an SVG over it), what it is, Play */
form.scf { gap: var(--s2) var(--s4); }
form.scf label.sc-q { flex: 1 1 100%; }
form.scf label.sc-q input { flex: 1; min-width: 0; padding: 8px 12px; font-size: 15px; }
form.scf a.sc-reset { color: var(--text-2); font-size: 14px; }
.scft-box, form.scf label.scft { display: none; }                /* (a phone's toggle for the filters - see below) */
.scfs { display: contents; }
.sc-key { white-space: nowrap; }
.sc-key i { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; border-radius: 50%; vertical-align: -1px; }
.sc-key i.y { background: #4cd07d; } .sc-key i.t { background: #ff5a5a; } .sc-key i.b { background: #ffd65a; }
.sc-voice { margin-left: var(--s2); padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.sc-voice.on { color: var(--text); border-color: var(--text-2); }
.sc-tier { margin-left: var(--s2); padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 500; }   /* (#763: a clutch's difficulty) */
.sc-tier.t0 { color: #3fb950; } .sc-tier.t1 { color: #8ccf4d; } .sc-tier.t2 { color: #d4a72c; } .sc-tier.t3 { color: #e8793a; } .sc-tier.t4 { color: #f85149; }
.sc-count { margin: var(--s2) 0; color: var(--text-2); font-size: 14px; }
.scs { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: var(--s3); }
article.sc { display: flex; gap: var(--s4); padding: var(--s3); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.sc .mr { position: relative; flex: none; width: 132px; height: 132px; overflow: hidden; border-radius: var(--r-md); background: #2a2d36; }
.sc .mr img { position: absolute; display: block; max-width: none; height: auto; aspect-ratio: 1; }   /* (a square: its size known before it loads - lazy needs it) */
.sc .mr svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.sc h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 2px; }
.sc h3 .sc-num { font-family: var(--mono); font-size: 14px; }
.sc p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 18px; }
.sc p.sc-what { color: var(--text-body); font-size: 14px; line-height: 20px; }
.sc p.sc-what b { color: var(--accent); }
.sc .sc-rot { color: var(--text-3); white-space: nowrap; }
.sc .fam { color: var(--blue); }
.sc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); margin-top: auto; padding-top: 6px; }
.sc-act form.inl { margin: 0; }
.sc-act .btn { padding: 6px 18px; }
.sc-rec { color: var(--text-3); font-size: 13px; }
.sc-rec.on { color: var(--text-2); }
@media (max-width: 640px) {
  .scs { grid-template-columns: 1fr; }
  article.sc { gap: var(--s3); padding: 10px; }
  .sc .mr { width: 96px; height: 96px; }
  form.scf label.sc-q { flex: 1 1 50%; }
  form.scf label.sc-q span { display: none; }
  form.scf label.scft { display: inline-flex; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: var(--r);
    background: var(--raised); color: var(--text); cursor: pointer; }
  .scft-box:checked + label.scft { background: var(--hover); }
  .scfs { display: none; }
  .scft-box:checked ~ .scfs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; width: 100%; align-items: end; }
  .scfs label { flex-direction: column; align-items: stretch; gap: 2px; font-size: 12px; }
  .scfs label select { width: 100%; }
}

/* ==== the callout maps (#223: callouts.py) - the radar with a path a place over it; the panel beside it (under it on a phone);
   the list of every place; the maps' cards on /callouts */
nav.cm-maps { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 var(--s4); }
nav.cm-maps a { padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-2); font-size: 13px;
  text-decoration: none; }
nav.cm-maps a:hover { background: var(--overlay); color: var(--text); }
nav.cm-maps a.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.cm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
.cm-map { position: relative; width: min(100%, calc(80vh * var(--ar, 1))); margin: 0 auto; overflow: hidden; border-radius: var(--r-xl); background: #22242d; box-shadow: var(--shadow-200);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cm-map picture img { position: absolute; display: block; max-width: none; height: auto; aspect-ratio: 1; opacity: .9; pointer-events: none; }
.cm-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-map[data-ly="0"] .cm-ly1, .cm-map[data-ly="1"] .cm-ly0 { display: none; }
.cm-a { fill: rgba(118, 178, 237, .1); fill-rule: evenodd; stroke: rgba(224, 227, 230, .55); stroke-width: 1.2px; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; cursor: pointer; transition: fill var(--fast) var(--ease); }
.cm-a:hover { fill: rgba(255, 214, 90, .22); }
.cm-a.grp { fill: rgba(255, 214, 90, .14); }
.cm-a.on, .cm-a.lit { fill: rgba(255, 214, 90, .42); stroke: var(--accent); stroke-width: 2px; }
.cm-a.good { fill: rgba(74, 186, 96, .55); stroke: var(--success); stroke-width: 2px; }
.cm-a.bad { fill: rgba(232, 102, 97, .5); stroke: var(--danger); stroke-width: 2px; }
.cm-l, .cm-m text { fill: #fff; font-weight: 650; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(10, 12, 16, .85);
  stroke-width: .22em; stroke-linejoin: round; pointer-events: none; }
.cm-m { cursor: pointer; }
.cm-m circle { fill: var(--blue); stroke: #0c1117; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.cm-m text { font-size: .8em; font-style: italic; fill: #cfe3f7; }
.cm-m circle.cm-sr { fill: rgba(118, 178, 237, .12); stroke: var(--blue); stroke-width: 1.5px; stroke-dasharray: 4 3; transition: fill var(--fast) var(--ease); }
.cm-spot:hover circle.cm-sr, .cm-spot:focus circle.cm-sr { fill: rgba(118, 178, 237, .3); }
.cm-src { margin: 4px 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 20px; }   /* (a spot's sources: admins only) */
.cm-quizzing .cm-l, .cm-quizzing .cm-m { display: none; }
.cm-side { position: sticky; top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.cm-modes, .cm-lys { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-modes button.on, .cm-lys button.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.cm-panel, .cm-quiz { min-height: 120px; padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.cm-panel h3, .cm-item h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 4px; }
.cm-say { color: var(--accent); font-size: 20px; line-height: 26px; font-weight: 700; }
.cm-cs2 { color: var(--text-3); font-size: 13px; font-weight: 500; }
.cm-panel p, .cm-item p { margin: 4px 0; color: var(--text-2); font-size: 14px; line-height: 20px; }
.cm-panel p b, .cm-item p b { color: var(--text); }
.cm-panel i, .cm-item i { color: var(--text-body); }
.cm-drills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.cm-drills form.inl { margin: 0; }
.cm-drills .btn.dim { padding: 4px 12px; font-size: 13px; }
.cm-q { margin: 0 0 var(--s2); color: var(--text); font-size: 15px; }
.cm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cm-opts button.small { justify-content: center; padding: 8px 10px; font-size: 14px; }
.cm-opts button.good { border-color: var(--success); background: color-mix(in srgb, var(--success) 25%, var(--raised)); opacity: 1; }
.cm-opts button.bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 25%, var(--raised)); opacity: 1; }
.cm-res { min-height: 28px; margin: var(--s2) 0 0; color: var(--text-2); }
.cm-res button { margin-left: 6px; }
.cm-mine { margin: 0; color: var(--text-2); font-size: 13px; }
.cm-keep { margin: 0; font-size: 13px; }
.cm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); }
.cm-item { padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-100); scroll-margin-top: var(--s6); }
.cm-item:target { box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-200); }
.cm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); }
a.cm-card { display: flex; flex-direction: column; gap: 4px; padding: var(--s3); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200);
  color: var(--text); text-decoration: none; transition: background-color var(--normal) var(--ease); }
a.cm-card:hover { background: var(--raised); }
a.cm-card img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-md); background: #22242d; }
.cm-cn { color: var(--accent); font-size: 17px; font-weight: 650; }
.cm-ct { color: var(--text-2); font-size: 13px; line-height: 18px; }
@media (max-width: 899px) {
  .cm-wrap { grid-template-columns: 1fr; gap: var(--s3); }
  .cm-side { position: static; }
  .cm-l { font-size: 1.45em; }
  .cm-l.cm-sm { display: none; }
  .cm-m text { display: none; }
}
/* Browse (#211, #214: browse.py) - its sections' tabs; routines (routines.py): cards, a routine's steps, the builder */
.browse-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--s4); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-100); }
.browse-tabs a { padding: 5px 16px; border-radius: var(--r-md); color: var(--text-3); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.browse-tabs a:hover { color: var(--text); }
.browse-tabs a.on { background: var(--accent); color: var(--accent-fg); }
.rt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s5); }
a.rt-card { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--shadow-200); color: var(--text-body); text-decoration: none; transition: background .12s; }
a.rt-card:hover { background: var(--raised); color: var(--text); }
a.rt-card .sub { margin: 0; }
.rt-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rt-top b { color: var(--text); font-size: 16px; line-height: 22px; }
.rt-top .sub { margin-left: auto; font-size: 12px; }
.rt-icons svg.mi { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.rt-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.rt-stars { color: var(--accent); letter-spacing: 1px; }
.rt-stars .sub { letter-spacing: 0; }
ol.rt-steps { padding-left: 26px; }
ol.rt-steps > li { margin: 10px 0; }
ol.rt-steps svg.mi { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.rt-why { margin-top: 2px; color: var(--text-2); font-size: 13px; line-height: 18px; }
.rt-where { color: var(--text-3); font-size: 13px; line-height: 18px; }
.rt-fs .sub { display: inline; margin: 0 0 0 4px; font-size: 12px; }
.rt-addrow form.inl { margin: 0; }
form.rt-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0; }
form.rt-play label { display: inline-flex; align-items: center; gap: 6px; }
form.rt-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
form.rt-rate button.on { background: var(--accent); color: var(--accent-fg); }
.rt-build label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; }
.rt-build label.rt-wide { display: flex; flex-direction: column; align-items: stretch; gap: 4px; max-width: 640px; margin: var(--s3) 0; }
.rt-build ol.rt-steps { padding: 0; }
li.rt-step { list-style: none; margin: var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.rt-sh { display: flex; align-items: center; gap: 6px; }
.rt-sh .grow, .rt-addrow .grow { flex: 1; }
.rt-sh .pn { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--overlay-2);
  color: var(--text-2); font-size: 12px; font-weight: 700; }
.rt-sh svg.mi { width: 18px; height: 18px; }
.rt-fs { display: flex; flex-wrap: wrap; margin-top: 6px; }
.rt-fs select, .rt-fs input[type=number] { max-width: 190px; }
.rt-fs input[type=number] { width: 80px; }
.rt-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
@media (max-width: 600px) {
  .rt-cards { grid-template-columns: minmax(0, 1fr); }
  .rt-build label { margin-right: 10px; }
  li.rt-step { padding: var(--s3); }
  .browse-tabs { display: flex; }
  .browse-tabs a { flex: 1; text-align: center; padding: 5px 8px; }
}
form.rt-rate .sub { margin: 0 6px 0 0; }

/* ---- #250: FACEIT on the profile - its level's badge (drawn by faceit_profiles.badge in FACEIT's colours) with the Elo
   beside Premier's card, the FACEIT box (the stats, recent results, Hide my FACEIT), a public page's title, and Matches'
   FACEIT tab: a line a match, FACEIT's scoreboard under it */
svg.fclvl { flex: none; vertical-align: middle; }
.card b.fcb { display: flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 2px; color: var(--text); }
.card b.fcb svg.fclvl { width: 36px; height: 36px; }
.card b.fcb .fcelo { color: var(--text); font-size: 22px; line-height: 36px; font-variant-numeric: tabular-nums; }
h1 .fctag { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; vertical-align: -8px; font-size: 20px; }
h1 .fctag b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fcbox h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.fcbox h2 svg.fclvl { width: 30px; height: 30px; }
.fcbox p.fcwho { margin: var(--s2) 0 0; color: var(--text-2); font-size: 14px; }
.fcbox .sub, .fcgames .sub { margin: 0; }
.fcbox > p.sub, .fcgames > p.sub { margin: var(--s2) 0; }
.fcgames h2 { margin-top: 0; }
.fcbox .fcnick { color: var(--text); font-weight: 700; }
.fcbox .fcelo { color: var(--text); }
.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.fcards .card { min-width: 0; padding: var(--s2) var(--s3); background: var(--raised); box-shadow: none; }
.fcards .card b { font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }
.fcards .card span { display: block; }
.fcards .card span.fcn { color: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.fcrec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: var(--s3) 0 var(--s2); }
.fcrec .fclab { color: var(--text-2); font-size: 13px; }
.fcres { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.fcres i { display: inline-block; width: 20px; height: 22px; border-radius: var(--r-sm); font: 700 12px/22px var(--mono); font-style: normal;
  text-align: center; }
.fcres i.w { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.fcres i.l { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.fcswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--s2); }
.fcswitch .sub { margin: 0; }
details.fcg { margin: 6px 0; padding: var(--s2) var(--s3); border-left: 3px solid #ff5500; border-radius: var(--r-md); background: var(--raised); }
details.fcg summary { display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(130px, 1.3fr) minmax(84px, .9fr) repeat(3, minmax(60px, .7fr))
  minmax(110px, 1fr); gap: 8px; align-items: center; cursor: pointer; list-style: none; }
details.fcg summary::-webkit-details-marker { display: none; }
details.fcg summary .n { text-align: right; font-variant-numeric: tabular-nums; }
details.fcg summary > :last-child { text-align: right; }
details.fcg .fcmap { font-weight: 600; }
details.fcg .fcmap::before { content: "▸ "; color: var(--text-3); }
details.fcg[open] .fcmap::before { content: "▾ "; }
details.fcg table.fcsb { width: 100%; margin-top: var(--s2); }
details.fcg .fcmeta { margin: var(--s2) 0 var(--s1); }
@media (max-width: 700px) {
  details.fcg summary { display: flex; flex-wrap: wrap; gap: 2px 12px; }
  details.fcg summary .fcmap { flex-basis: 100%; }
  details.fcg summary > :last-child { margin-left: auto; }
  .card b.fcb .fcelo { font-size: 20px; }
  h1 .fctag { margin-left: 8px; font-size: 18px; }
}

/* #307: /pricing - the plans side by side */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.tier h2 { margin-top: 0; }
.tier.mine { border-color: var(--accent); }
.tier .tprice { font-size: 28px; font-weight: 700; }
.tier .tprice .sub { font-size: 14px; font-weight: 400; }
.tier ul { padding-left: 18px; }
.tier form.inl { display: inline-block; margin: 4px 4px 0 0; }

/* #414: /admin/health - the flags, the tiles with a sparkline each, the cycle-time table (review wait marked) */
.hl-flags, .hl-ok { margin: var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-200); }
.hl-flags { border-left: 3px solid var(--danger); }
.hl-flags b:first-child { color: var(--danger); }
.hl-flags ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.hl-ok { border-left: 3px solid var(--success); color: var(--success); font-weight: 600; }
.hl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s6); }
.hl-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s3) var(--s4); border-radius: var(--r-xl);
  background: var(--card); box-shadow: var(--shadow-200); }
.hl-tile.hl-main { grid-column: span 2; border: 1px solid var(--accent-line); background: linear-gradient(var(--accent-faint), var(--accent-faint)), var(--card); }
.hl-tile b { color: var(--accent); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
.hl-tile.hl-main b { font-size: 30px; line-height: 38px; }
.hl-label { color: var(--text); font-size: 13px; font-weight: 600; }
.hl-detail, .hl-tile small { color: var(--text-3); font-size: 12px; line-height: 16px; }
.hl-spark { width: 100%; height: 32px; margin-top: var(--s1); overflow: visible; }
.hl-spark polyline { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hl-spark circle { fill: var(--blue); }
.hl-spark circle.wk { fill: var(--accent); }
.hl-spark circle.now { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hl-arrow { font-size: .8em; font-weight: 700; }
.hl-up { color: var(--danger); } .hl-down { color: var(--success); } .hl-flat { color: var(--text-3); } .hl-bad { color: var(--danger); font-weight: 600; }
.hl-scroll { overflow-x: auto; }
.hl-table th:first-child { text-align: left; }
.hl-table td { white-space: nowrap; }
.hl-table td small { color: var(--text-3); }
.hl-table .hl-rev { background: var(--accent-faint); color: var(--text); }
.hl-list { padding-left: var(--s5); line-height: 26px; }
.hl-list small { color: var(--text-3); }
@media (max-width: 480px) { .hl-tiles { grid-template-columns: 1fr 1fr; } .hl-tile { padding: var(--s3); } .hl-tile b { font-size: 20px; line-height: 28px; } }