/* Winter Gamer Summit. A plain 1990s web page: gray page, serif text, blue links,
   default rules, bordered tables, system buttons.
   The base element rules come first. Every other stylesheet relies on them and adds layout only.
   Nothing here moves, glows or rounds. The wheel's own spin is the one motion on the page. */

/* ---- base element rules ---- */
:root {
  --page: #c0c0c0;
  --ink: #000000;
  --paper: #ffffff;
  --rule: #808080;
  --button: #dfdfdf;
  --err: #cc0000;
  --link: #0000ee;
  --visited: #551a8b;
  --active: #ff0000;
}

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

body {
  margin: 0;
  padding: 0 8px;
  background: var(--page);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
a:active { color: var(--active); }

h1, h2, h3 { font-family: inherit; font-weight: bold; }
h1 { font-size: 32px; margin: 16px 0 4px; }
h2 { font-size: 24px; margin: 16px 0 8px; }
h3 { font-size: 18px; margin: 12px 0 6px; }

hr { margin: 16px 0; }

table { border-collapse: collapse; }
th, td {
  border: 1px solid var(--rule);
  padding: 4px;
  background: var(--paper);
  text-align: left;
  vertical-align: top;
}
th { font-weight: bold; }

button {
  min-height: 32px;
  padding: 4px 10px;
  font: 14px Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--button);
  border: 2px outset var(--paper);
  border-radius: 0;
  cursor: pointer;
}
button:active { border-style: inset; }
button[aria-pressed="true"] { border-style: inset; font-weight: bold; }
button:disabled { color: var(--rule); cursor: default; }
button:focus-visible { outline: 1px dotted var(--ink); outline-offset: 1px; }

input, select, textarea {
  max-width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 2px inset var(--paper);
  border-radius: 0;
}
input:disabled, select:disabled { color: var(--rule); }

dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
}

/* ---- shared plain pieces ---- */
/* a button that reads as a link: blue, underlined, still a real button */
.linkish {
  min-height: 0;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  background: none;
  border: 0;
}
.linkish:active { color: var(--active); border: 0; }

.fine { font-size: 14px; }
.err-line { color: var(--err); }
.status-box {
  margin: 8px 0;
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--ink);
}
.status-box--error { color: var(--err); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phone-only { display: none; }
/* a person's color as a small square next to their name */
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1px solid var(--ink);
  vertical-align: baseline;
}
/* a wide table scrolls inside its own box on a phone, never the page */
.table-scroll { max-width: 100%; overflow-x: auto; }

/* ---- page ---- */
.page { max-width: 800px; margin: 0 auto; }

/* ---- header ---- */
.hdr { text-align: center; }
.hdr__sub { margin: 0 0 8px; font-size: 20px; }
.hdr__img {
  display: block;
  width: 120px;
  height: auto;
  aspect-ratio: 540 / 1110;
  margin: 8px auto;
  border: 1px solid var(--ink);
}
.hdr__nav { margin: 8px 0; }

/* ---- Who's gaming? ---- */
.roster { margin: 8px 0; padding: 0; list-style: none; }
.roster__item { margin: 4px 0; }
.roster__x { margin-left: 8px; }

/* ---- When we gamin? ---- */
.callout p { margin: 4px 0; }
.quick { display: none; }
.when-grid th, .when-grid td { text-align: center; vertical-align: middle; }
.when-grid .when-grid__name { text-align: left; white-space: nowrap; }
.col__line { display: block; font-weight: normal; }
.col__best { display: block; }
/* Every answer button is one width, and each date column is held to it, so
   picking an answer never moves the columns. */
.cell { width: 64px; padding-left: 2px; padding-right: 2px; font-size: 12px; white-space: nowrap; }
.when-grid thead th + th { width: 64px; }
/* a cell on someone else's row is still a button (it says whose row it is), drawn as plain text */
.row--other .cell { background: none; border: 0; }
.row--total th, .row--total td { font-weight: bold; }

/* ---- Vote ---- */
.vote__label { display: block; margin-bottom: 4px; }
.vote__select { width: 100%; }

/* ---- Game ---- */
.arcade__screen { max-width: 100%; }

/* ---- phone ---- */
@media (max-width: 600px) {
  .phone-only { display: block; }
  .quick { display: block; }
  .quick__row { margin: 4px 0; }
  .quick__row > span:first-child { display: inline-block; min-width: 5.5em; }
  .when-grid .when-grid__name { white-space: normal; }
}