/* Staff console. One stylesheet, and the fonts already on the viewer's computer: the page's policy
   lets nothing be loaded from another site, and nothing here asks for it.

   Tokens first, then the shell, then what the page says, then the way in. The look is the console's
   design: night for the rail and the way in, violet for what a person presses, and the rink's own
   lines where there is nothing else to draw. */

:root {
  --ground: #F3F3F8;
  --sheet: #FFFFFF;
  --well: #F6F6FA;
  --rule: #DFDDEA;
  --field-rule: #8D8AA6;
  --ink: #15132B;
  --ink-2: #4A4863;
  --ink-3: #64627E;
  --night: #120F27;
  --night-rule: #26214A;
  --night-on: #2C2556;
  --rail-ink: #BEBAD9;
  --rail-ink-3: #8A86AA;
  --violet: #5530D0;
  --on-violet: #FFFFFF;
  --violet-wash: #EEEAFD;
  --teal: #0B6A73;
  --teal-wash: #DDF2F2;
  --red: #B5222C;
  --red-solid: #C4262E;
  --on-red: #FFFFFF;
  --red-wash: #FBE9EA;
  --amber: #835000;
  --amber-wash: #FFF1D2;
  --green: #1C743A;
  --green-wash: #E1F3E7;
  --band: #F26A1B;
  --blue-line: #1456C8;
  --toast: #15132B;
  --on-toast: #F3F3F8;
  --float: 0 1px 2px rgba(21, 19, 43, .08), 0 14px 36px rgba(21, 19, 43, .16);
  --scrim: rgba(18, 15, 39, .55);
  color-scheme: light;
}

/* Dark is written twice: for a system that asks for it, and for a person who chose it. A test holds
   the two blocks to the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0C0B19;
    --sheet: #15132A;
    --well: #100E21;
    --rule: #45416F;
    --field-rule: #6F6B9C;
    --ink: #ECEBF5;
    --ink-2: #ABA8C6;
    --ink-3: #8E8BAC;
    --night: #08070F;
    --night-rule: #2E2952;
    --night-on: #211C45;
    --rail-ink: #BEBAD9;
    --rail-ink-3: #8A86AA;
    --violet: #A898FF;
    --on-violet: #140F33;
    --violet-wash: #261F55;
    --teal: #52D2D5;
    --teal-wash: #0E2E33;
    --red: #FF8388;
    --red-solid: #D7373F;
    --on-red: #FFFFFF;
    --red-wash: #3A171C;
    --amber: #F2B84B;
    --amber-wash: #382A0E;
    --green: #62D48C;
    --green-wash: #123020;
    --band: #FF8A3D;
    --blue-line: #74ABFF;
    --toast: #ECEBF5;
    --on-toast: #15132B;
    --float: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* The way in is night whatever the theme. */
:root[data-theme="dark"], .signin {
  --ground: #0C0B19;
  --sheet: #15132A;
  --well: #100E21;
  --rule: #45416F;
  --field-rule: #6F6B9C;
  --ink: #ECEBF5;
  --ink-2: #ABA8C6;
  --ink-3: #8E8BAC;
  --night: #08070F;
  --night-rule: #2E2952;
  --night-on: #211C45;
  --rail-ink: #BEBAD9;
  --rail-ink-3: #8A86AA;
  --violet: #A898FF;
  --on-violet: #140F33;
  --violet-wash: #261F55;
  --teal: #52D2D5;
  --teal-wash: #0E2E33;
  --red: #FF8388;
  --red-solid: #D7373F;
  --on-red: #FFFFFF;
  --red-wash: #3A171C;
  --amber: #F2B84B;
  --amber-wash: #382A0E;
  --green: #62D48C;
  --green-wash: #123020;
  --band: #FF8A3D;
  --blue-line: #74ABFF;
  --toast: #ECEBF5;
  --on-toast: #15132B;
  --float: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --display: Bahnschrift, "DIN Alternate", "Avenir Next Condensed", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--violet); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* The drawings: one sprite in the document, shown through <use>. 24 px grid, 1.75 stroke. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Shell: the rail and one working column */

.app { display: flex; flex-wrap: wrap; min-height: 100vh; }

.rail {
  flex: 0 0 248px;
  /* Stays in view on a long page: who is signed in and the way out are in its foot. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 14px;
  background: var(--night);
  color: var(--rail-ink);
  border-right: 1px solid var(--night-rule);
}
/* The rail is night in both themes, where the light theme's violet does not show. */
.rail :focus-visible { outline-color: #A898FF; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* A browser asked to shrink a picture to a third of its size breaks its thin strokes. So each logo is
   a file made for the width it is drawn at (the rail's) or for twice that (the sign-in page's). */
.logo { display: block; width: 100%; height: auto; }
.rail .logo { width: 216px; max-width: 100%; }
.brand-name { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rail-ink-3); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav:empty { display: none; }

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.me { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; padding: 12px; border: 1px solid var(--night-rule); border-radius: 12px; }
.me-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #ECEBF5; color: #120F27; font-size: 12px; font-weight: 700; grid-row: span 2; }
.me-name { color: #FFFFFF; font-weight: 600; overflow-wrap: anywhere; }
.prev { grid-column: 1 / -1; margin-top: 6px; color: var(--rail-ink-3); font-size: 12px; line-height: 1.4; }
.prev strong { display: block; color: var(--rail-ink); font-weight: 500; }
/* Said in full at every width, under the line that says when the session ends: whoever looks for
   it may be in a hurry, and a drawing alone would not tell them what it ends. */
.me-end {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid var(--night-rule);
  border-radius: 8px;
  background: transparent;
  color: var(--rail-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.me-end:hover { background: var(--night-on); color: #FFFFFF; }
.me-end .ic { width: 16px; height: 16px; }

.rail-btns { display: flex; gap: 6px; }
.rail-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--night-rule);
  border-radius: 8px;
  background: transparent;
  color: var(--rail-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rail-btn:hover { background: var(--night-on); color: #FFFFFF; }
.rail-btn[disabled] { opacity: .5; cursor: progress; }

.theme-seg { flex: 1; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--night-rule); border-radius: 8px; }
.theme-seg button { flex: 1; display: grid; place-items: center; min-height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--rail-ink-3); cursor: pointer; }
.theme-seg button:hover { color: #FFFFFF; }
.theme-seg button[aria-checked="true"] { background: var(--night-on); color: #FFFFFF; }

/* The role wears what the officials wear: stripes on the sleeve, an orange band for the one in
   charge, and two for the one who names them. A developer is no official: a plain sleeve. */
.role { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 9px 2px 5px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rail .role { border-color: var(--night-rule); }
.sleeve { display: inline-block; width: 12px; height: 14px; border-radius: 3px; border: 1px solid currentColor; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.role.developer .sleeve { background: none; opacity: .45; }
.role.reader .sleeve { opacity: .45; }
.role.admin .sleeve {
  background:
    linear-gradient(var(--band), var(--band)) 0 45% / 100% 34% no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px);
}
.role.superadmin .sleeve {
  background:
    linear-gradient(var(--band), var(--band)) 0 18% / 100% 26% no-repeat,
    linear-gradient(var(--band), var(--band)) 0 78% / 100% 26% no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px);
}

.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 0 36px 56px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 16px; min-height: 56px; }
.view { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.view:focus { outline: none; }

/* Page heads */

.page-title { font: 600 28px/1.1 var(--display); }
.page-lead { margin-top: 6px; color: var(--ink-2); max-width: 64ch; }
/* A rink seen from the side of the page: the goal lines, the blue lines and the red line. */
.rink-rule {
  height: 11px;
  background:
    linear-gradient(var(--red), var(--red)) 50% 0 / 3px 100% no-repeat,
    linear-gradient(var(--blue-line), var(--blue-line)) 37.5% 0 / 3px 100% no-repeat,
    linear-gradient(var(--blue-line), var(--blue-line)) 62.5% 0 / 3px 100% no-repeat,
    linear-gradient(var(--red), var(--red)) 5.5% 0 / 1px 100% no-repeat,
    linear-gradient(var(--red), var(--red)) 94.5% 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.btn.danger { background: var(--red-solid); border-color: var(--red-solid); color: var(--on-red); }
.btn.primary:hover, .btn.danger:hover { filter: brightness(1.08); }
.btn.small { min-height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; }
.btn.small .ic { width: 16px; height: 16px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--well); color: var(--ink); }
.btn.danger-ink { color: var(--red); }
.btn.icon { min-height: 32px; width: 32px; padding: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sec-head .actions { align-items: center; }

/* The rail's entries, the trail, and the one search box */

.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--rail-ink); font-weight: 500; white-space: nowrap; text-decoration: none; }
.nav-item:hover { background: var(--night-on); color: #FFFFFF; }
.nav-item[aria-current] { background: var(--night-on); color: #FFFFFF; font-weight: 600; }
.nav-item[aria-current] .ic { color: #52D2D5; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-weight: 500; }
.crumbs:empty { display: none; }
.crumbs a { font-weight: 600; text-decoration: none; }
.crumbs .ic { width: 14px; height: 14px; color: var(--ink-3); }
.crumbs .here { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { position: relative; margin-left: auto; flex: 0 1 420px; display: flex; align-items: center; }
.search > .ic { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; height: 40px; padding: 0 40px 0 38px; border: 1px solid var(--field-rule); border-radius: 10px; background: var(--sheet); }
.search input::placeholder, .find-box input::placeholder, .inp::placeholder { color: var(--ink-3); }
.key { position: absolute; right: 10px; min-width: 22px; padding: 0 5px; border: 1px solid var(--rule); border-radius: 5px; background: var(--well); color: var(--ink-3); font: 600 12px/22px var(--ui); text-align: center; pointer-events: none; }

/* Small words */

.muted { color: var(--ink-2); font-weight: 400; }
.tiny { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.mono { font-family: var(--mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.hint { color: var(--ink-2); font-size: 13px; }
.err { color: var(--red); font-weight: 600; font-size: 13px; }
.end { text-align: right; }
.sprite .solid { fill: currentColor; stroke: none; }

/* Heads of a page and of a part of it */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.sec-head h2 { font: 600 16px/1.3 var(--ui); }
.cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: start; }
section > .btn { margin-top: 12px; }

/* Chips and flags: what is true of a player or a line, in a word */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip .ic { width: 15px; height: 15px; }
.chip.rec { background: var(--teal-wash); color: var(--teal); }
.chip.ban { background: var(--red-wash); color: var(--red); }
.chip.ok { background: var(--green-wash); color: var(--green); }
.chip.plain { background: var(--well); color: var(--ink-2); }
.chip.watch { background: var(--amber-wash); color: var(--amber); }
.flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--amber-wash); color: var(--amber); font-size: 12px; font-weight: 600; white-space: nowrap; }
.flag.plain { background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.flag.teal { background: var(--teal-wash); color: var(--teal); }
.flag.red { background: var(--red-wash); color: var(--red); }
.flags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.rc { display: inline-block; min-width: 24px; padding: 1px 5px; border-radius: 6px; font-size: 12px; font-weight: 700; text-align: center; }
.rc.win { background: var(--green-wash); color: var(--green); }
.rc.loss { background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }

/* A player's two letters on one of six jerseys. The colours hold white letters in both themes. */

.avatar { display: grid; place-items: center; flex: none; color: #FFFFFF; font: 600 15px/1 var(--display); letter-spacing: .02em; }
.avatar.lg { width: 72px; height: 72px; border-radius: 16px; font-size: 26px; }
.avatar.md { width: 40px; height: 40px; border-radius: 10px; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.avatar.bot { background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.shade-0 { background: #274B7A; }
.shade-1 { background: #1F6B4A; }
.shade-2 { background: #7A2E2A; }
.shade-3 { background: #4B2A7A; }
.shade-4 { background: #6B5A1F; }
.shade-5 { background: #1F5F6B; }

/* Cards and lines */

.card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); min-width: 0; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-title { font-weight: 700; }
.row-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.row-line:last-child { border-bottom: 0; }
.when { display: block; font-weight: 600; white-space: nowrap; }
a.when { text-decoration: none; }
a.when:hover { text-decoration: underline; }
.when-abs { display: block; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
/* A session used from somewhere other than where it was opened: worth a second look. */
.when-abs.moved { color: var(--amber); font-weight: 600; }
.who-name { font-weight: 600; overflow-wrap: anywhere; }

.alert { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; border-radius: 12px; align-items: start; }
.alert > .ic { margin-top: 1px; }
.alert .t { font-weight: 700; }
.alert .b { grid-column: 2; color: var(--ink); }
.alert .act { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.alert.amber { background: var(--amber-wash); color: var(--amber); }
.alert.red { background: var(--red-wash); color: var(--red); }
.alert.teal { background: var(--teal-wash); color: var(--teal); }
.alert.plain { background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); }
.alert.plain > .ic { color: var(--ink-2); }
.alert.plain .b { color: var(--ink-2); }
.empty-title { font-weight: 700; color: var(--ink); }
.lock { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 72px 16px; text-align: center; }
.lock .badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.lock .badge .ic { width: 26px; height: 26px; }
.lock h1 { font: 600 24px/1.2 var(--display); }
.lock p { color: var(--ink-2); max-width: 46ch; }

/* Waiting: the shape of what is coming */

.waiting { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.sk { display: block; height: 44px; border-radius: 8px; background: linear-gradient(90deg, var(--well) 25%, var(--rule) 37%, var(--well) 63%) 0 0 / 400% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Tables: a player's games */

.table-wrap { border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--violet-wash); }
.score-line { display: flex; align-items: center; gap: 8px; }
.score { font: 600 20px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.score .them { color: var(--ink-3); font-weight: 400; }
.replay { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }

/* A player's lifetime totals, above their games */

.career { margin-bottom: 28px; }
.career-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.fig { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); min-width: 0; }
.fig-n { font: 600 20px/1 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fig-l { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.career-modes { overflow-x: auto; }
.career-modes td { padding: 8px 12px; }
.career-modes .num, .career-modes th + th { text-align: right; font-variant-numeric: tabular-nums; }
.career-cut, .career-note { margin-top: 8px; }

/* Fields and the one dialog */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-name { font-weight: 600; overflow-wrap: anywhere; }
.inp { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--field-rule); border-radius: 8px; background: var(--sheet); }
.inp:focus-visible { border-color: var(--violet); outline-offset: 0; }
select.inp { width: auto; min-width: 124px; min-height: 34px; padding: 4px 8px; }
.radio-list { display: flex; flex-direction: column; gap: 6px; }
.radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); cursor: pointer; }
.radio.on { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.radio input { margin: 3px 0 0; accent-color: var(--violet); }
.radio strong { display: block; }
.dlg-fields { display: flex; flex-direction: column; gap: 16px; }
select.inp.wide { width: 100%; min-height: 40px; }
textarea.inp { min-height: 84px; resize: vertical; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; }
.counter { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* One of a few, side by side: the choice is a radio button that is there for the keyboard and not drawn. */
.segments { display: inline-flex; padding: 2px; border: 1px solid var(--rule); border-radius: 8px; background: var(--well); }
.segments.wide { display: flex; flex-wrap: wrap; }
.segments label { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 6px; border-radius: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label.on { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
.segments label:focus-within { outline: 2px solid var(--violet); outline-offset: 1px; }

.dlg { width: calc(100% - 32px); max-width: 520px; padding: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); color: var(--ink); box-shadow: var(--float); overflow: hidden; }
.dlg::backdrop { background: var(--scrim); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 8px; }
.dlg-head h2 { font: 600 22px/1.2 var(--display); overflow-wrap: anywhere; }
.dlg-head .hint { margin-top: 4px; }
.dlg-body { display: flex; flex-direction: column; gap: 16px; padding: 8px 20px 20px; }
.dlg-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--well); }

/* Find */

.find-hero { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.find-box { position: relative; display: flex; align-items: center; }
.find-box > .ic { position: absolute; left: 16px; width: 22px; height: 22px; color: var(--ink-3); pointer-events: none; }
.find-box input { width: 100%; height: 56px; padding: 0 44px 0 50px; border: 1px solid var(--field-rule); border-radius: 14px; background: var(--sheet); font-size: 18px; }
.find-box input:focus-visible { border-color: var(--violet); outline-offset: 0; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); font-size: 13px; }
.kind .mono { color: var(--ink); }
.found { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.found .sec-head { margin-bottom: 0; }
.result { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.result:last-child { border-bottom: 0; }
a.result:hover { background: var(--violet-wash); }
.result .avatar { grid-row: span 2; }
.result .nm { font-weight: 600; overflow-wrap: anywhere; }
.result .tag, .handle .tag { color: var(--ink-3); font-weight: 400; }
.result .sub { grid-column: 2; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.result .st { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.result .was { grid-column: 2; color: var(--ink-2); font-size: 12px; overflow-wrap: anywhere; }

/* A player */

.player-top { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.player-head { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
.player-head .actions { margin-left: auto; }
/* A note is a moderator's own words: its line breaks are kept, and a long word wraps. */
.alert .note, .ev-note { white-space: pre-line; overflow-wrap: anywhere; }

/* What was done about a player, newest first, down one line */

.history { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.history .empty { align-self: stretch; padding: 24px 16px; }
.timeline { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.event { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.event .line { position: absolute; left: 11.5px; top: 28px; bottom: 2px; width: 1px; background: var(--rule); }
.dot { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 50%; background: var(--well); color: var(--ink-2); }
.dot .ic { width: 13px; height: 13px; }
.dot.ban { border-color: transparent; background: var(--red-wash); color: var(--red); }
.dot.ok { border-color: transparent; background: var(--green-wash); color: var(--green); }
.dot.rec { border-color: transparent; background: var(--teal-wash); color: var(--teal); }
.dot.case { border-color: transparent; background: var(--amber-wash); color: var(--amber); }
.ev-title { font-weight: 600; overflow-wrap: anywhere; }
.ev-meta { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.ev-note { max-width: 60ch; margin-top: 2px; color: var(--ink-2); }

/* A player's case, beside their history, and the watch list of every open one */

.side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.note-line { display: flex; flex-direction: column; gap: 6px; }
.note-row { display: flex; gap: 8px; }
.note-row .inp { flex: 1; min-width: 0; }
.case-notes { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.case-note { padding: 10px 0 0; border-top: 1px solid var(--rule); }
.case-note .note { white-space: pre-line; overflow-wrap: anywhere; }
.watch-head, .watch-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.8fr) minmax(0, 1.4fr) 6rem; gap: 8px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.watch-head { padding: 8px 16px; background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.watch-row:last-child { border-bottom: 0; }
.watch-player { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.watch-player .avatar { grid-row: span 2; }
.watch-player .nm { font-weight: 600; overflow-wrap: anywhere; }
.watch-player .tag { color: var(--ink-3); font-weight: 400; }
.watch-player .sub { grid-column: 2; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.watch-player .muted { grid-column: 1 / -1; }
.watch-cell { min-width: 0; overflow-wrap: anywhere; }
.watch-note .note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.watch-more { margin-top: 10px; }
.cell-label { display: none; }
/* A chip in a cell narrower than its words wraps them rather than spill under the next cell. */
.watch-state .chip { white-space: normal; }
/* Beside the rail, a window narrower than a wide laptop's has no room for six columns: three, the
   player with who opened the case and since when, the note over the ban and recording, and the button. */
@media (max-width: 1280px) {
  .watch-head { display: none; }
  .watch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 6rem; align-items: start; }
  .watch-player { grid-column: 1; grid-row: 1; }
  .watch-by { grid-column: 1; grid-row: 2; }
  .watch-since { grid-column: 1; grid-row: 3; }
  .watch-note { grid-column: 2; grid-row: 1 / span 2; }
  .watch-state { grid-column: 2; grid-row: 3; }
  .watch-open { grid-column: 3; grid-row: 1; }
  .cell-label { display: inline; }
}
/* Narrower still, one cell under the other, as on a phone. */
@media (max-width: 1100px) {
  .watch-row { grid-template-columns: minmax(0, 1fr); }
  .watch-row > * { grid-column: auto; grid-row: auto; }
  .watch-open { justify-self: start; }
}
.player-id { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 280px; }
.handle { font: 600 40px/1 var(--display); overflow-wrap: anywhere; }
.player-id .formerly { margin: -4px 0 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.facts, .meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.meta-i { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.meta-i dt { color: var(--ink-3); }
.meta-i dd { margin: 0; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }

/* A game */

.board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px 24px; align-items: center; padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--sheet); }
.board .side { display: flex; flex-direction: column; gap: 2px; }
.board .side.away { align-items: flex-end; text-align: right; }
.board .team { font: 600 20px/1.1 var(--display); }
.board .big { font: 600 64px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: flex; align-items: center; gap: 18px; }
.board .big .dash, .board .big .lose { color: var(--ink-3); }
.board .big .dash { font-weight: 400; }
.board .mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.board .meta { grid-column: 1 / -1; justify-content: center; padding-top: 14px; border-top: 1px solid var(--rule); }
.rosters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.roster li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.roster li:last-child { border-bottom: 0; }
.roster a { font-weight: 600; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.roster a:hover { color: var(--violet); text-decoration: underline; }

/* Staff: one line a person, in four columns that stack on a narrow screen */

.person { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr); gap: 8px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.person:last-child { border-bottom: 0; }
.role-line { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.role-line:last-child { border-bottom: 0; }
.role-does { font-size: 13px; color: var(--ink-2); }
.roles-note { margin-top: 8px; }
.person-head { padding: 8px 16px; background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.role-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Test accounts: one line a login, in five columns that stack on a narrow screen */

.acct-row, .acct-head { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.6fr) 11rem; gap: 8px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.acct-row:last-child { border-bottom: 0; }
.acct-head { padding: 8px 16px; background: var(--well); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px; border: 1px solid transparent; border-radius: 999px; background: var(--chip-wash); color: var(--chip-ink); font-size: 12px; line-height: 18px; white-space: nowrap; }
.tag-chip b { font-weight: 700; }
.tag-chip > span { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.tag-chip.tc0 { --chip-wash: var(--violet-wash); --chip-ink: var(--violet); }
.tag-chip.tc1 { --chip-wash: var(--teal-wash); --chip-ink: var(--teal); }
.tag-chip.tc2 { --chip-wash: var(--green-wash); --chip-ink: var(--green); }
.tag-chip.tc3 { --chip-wash: var(--amber-wash); --chip-ink: var(--amber); }
.tag-chip.tc4 { --chip-wash: var(--well); --chip-ink: var(--ink-2); border-color: var(--rule); }
/* A tag marked to come off: an outline of itself, until the question is answered or it is kept again */
.tag-chip.gone { border: 1px dashed currentColor; background: transparent; opacity: .55; text-decoration: line-through; }
.chip-x { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -3px -7px -3px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chip-x .ic { width: 12px; height: 12px; }
.chip-x:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-picker .tag-chip { padding: 4px 10px; font-size: 13px; }
.acct-state { font-weight: 600; overflow-wrap: anywhere; }
.acct-none { padding: 16px; color: var(--ink-2); }
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--well); }
.filter-text { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.filter-text > .ic { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.filter-text .inp { padding-left: 38px; }
.list-filters select.inp { flex: 0 1 260px; min-height: 40px; }
.tag-field { width: auto; flex: 1 1 160px; min-width: 0; }
.made { display: flex; flex-direction: column; gap: 8px; }
.made > .btn { align-self: flex-start; }
.made-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.made-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.not-done { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--amber-wash); color: var(--amber); font-size: 13px; overflow-wrap: anywhere; }
.player-id .tags-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 0; color: var(--ink-2); font-size: 13px; }
.tags-line .fact-label { font-weight: 600; }

/* Nothing to show */

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; border: 1px dashed var(--rule); border-radius: 12px; background: var(--sheet); text-align: center; }
.empty p { max-width: 48ch; color: var(--ink-2); }
.empty .rink { width: min(220px, 70%); height: auto; }
.narrow { max-width: 760px; }
/* The game's own ice from above: a blue side and a red side, each with its zone at the centre, its
   goal line, its goalie's half octagon and two eight-sided face-off marks. It is drawn once, in the
   document's sprite, and takes its colours from wherever it is shown. */
.rink-ice { fill: var(--well); stroke: var(--ink-3); stroke-width: 2; }
.rink-centre { fill: none; stroke: var(--ink-3); stroke-width: 1.25; }
.rink-red { fill: none; stroke: var(--red); stroke-width: 1.25; }
.rink-blue { fill: none; stroke: var(--blue-line); stroke-width: 1.25; }
.rink-zone, .rink-spot { stroke: none; }
.rink-zone.rink-red, .rink-area.rink-red, .rink-spot.rink-red { fill: var(--red); }
.rink-zone.rink-blue, .rink-area.rink-blue, .rink-spot.rink-blue { fill: var(--blue-line); }
.rink-zone { fill-opacity: .18; }
.rink-area { fill-opacity: .3; }

/* What the page tells you */

.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100% - 32px); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--toast); color: var(--on-toast); box-shadow: var(--float); max-width: 384px; pointer-events: auto; animation: rise .18s ease-out; }
.toast > .ic { margin-top: 1px; }
.toast .x { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px auto; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.toast .x .ic { width: 15px; height: 15px; }
/* The toast is the page's ink turned over, so the ring on it is the ground's own colour. */
.toast .x:focus-visible { outline-color: currentColor; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* The way in */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 88px 16px; background: var(--night); color: #ECEBF5; position: relative; overflow: hidden; }
.signin .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: 420px; text-align: center; }
.signin .logo { max-width: 420px; }
.signin .name { font: 600 13px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #8A86AA; }
/* The rink the page stands on, most of it below the fold. */
.signin .ice { position: absolute; left: 50%; bottom: -202px; width: 1100px; max-width: none; transform: translateX(-50%); opacity: .35; pointer-events: none; --well: transparent; --ink-3: #2C2556; --blue-line: #3A3A8C; --red: #6B2A45; }
/* Google's own picture of its button, as Google ships it. Its branding rules forbid a redrawn "G",
   other colours, another typeface and a stretched button: so it is drawn at the size it was made for. */
.gbtn { display: inline-block; border-radius: 4px; line-height: 0; }
.gbtn img { display: block; width: 180px; height: 40px; }
.signin .note { color: #8A86AA; font-size: 13px; max-width: 36ch; }
.signin .refused { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 12px 14px; border-radius: 12px; background: #3A171C; color: #FFC7CA; text-align: left; }
.signin .refused.plain { background: #1E1A38; color: #DCD8F2; }
.signin .refused > .ic { margin-top: 1px; }
.signin .again { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.signin .btn { background: transparent; color: inherit; }
.studio { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; }
.studio img { display: block; width: 112px; height: auto; opacity: .85; }

/* Narrower screens: the rail lies down across the top */

@media (max-width: 720px) {
  .role-line { grid-template-columns: minmax(0, 1fr); }
  .app { align-content: flex-start; }
  .rail, .nav, .main { min-width: 0; max-width: 100%; }
  .rail { flex-basis: 100%; position: static; height: auto; overflow-y: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--night-rule); }
  .brand { flex-direction: row; }
  .rail .logo { width: 104px; }
  .brand-name { display: none; }
  .nav { order: 4; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 2px 4px; margin: 0 -4px; }
  .rail-foot { display: contents; }
  .rail-btns { margin-left: auto; }
  .rail-btn { flex: none; padding: 0 10px; }
  .rail-btn .lbl { display: none; }
  .theme-seg { flex: none; }
  .theme-seg button { width: 32px; }
  .me { order: 3; flex-basis: 100%; grid-template-columns: 32px minmax(0, 1fr) auto; padding: 10px 12px; }
  .me-av { grid-row: auto; }
  .me .role { grid-row: 1; grid-column: 3; }
  .prev { margin-top: 0; }
  .prev strong { display: inline; }
  .main { padding: 0 16px 40px; gap: 16px; }
  .page-title { font-size: 24px; }
  .signin .ice { width: 700px; bottom: -172px; }
  .nav-item { width: auto; padding: 0 10px; }
  .search { flex-basis: 100%; margin-left: 0; }
  .find-box input { height: 52px; font-size: 16px; }
  .hide-sm { display: none; }
  .handle { font-size: 28px; }
  .avatar.lg { width: 56px; height: 56px; font-size: 20px; }
  .result { grid-template-columns: 40px minmax(0, 1fr); }
  .result .st { grid-row: auto; grid-column: 2; justify-content: flex-start; }
  .board { padding: 16px; gap: 12px; }
  .board .big { font-size: 40px; gap: 10px; }
  .board .team { font-size: 15px; }
  .rosters { grid-template-columns: minmax(0, 1fr); }
  .alert { grid-template-columns: 20px minmax(0, 1fr); }
  .alert .act { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 6px; }
  .dlg-foot .btn { flex: 1; }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person-head { display: none; }
  .person .actions { justify-content: flex-start; }
  .acct-row { grid-template-columns: 28px minmax(0, 1fr); }
  .acct-row > :not(:first-child) { grid-column: 2; }
  .acct-head { grid-template-columns: 28px minmax(0, 1fr); }
  .acct-head > :nth-child(n+3) { display: none; }
  .acct-row .actions { justify-content: flex-start; }
  .list-filters select.inp { flex-basis: 100%; }
  th, td, .career-modes td { padding: 8px; }
  .replay .left { display: none; }
}

@media (max-width: 1100px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}