/* 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; }

.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. */
.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.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.small { min-height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 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) {
  .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; }
}

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