/*
 * The sheet pages — bracket, tournament, home, events. The palette, the type and the furniture
 * come from style.css, which these pages load first; what is here is the difference: the dashboard
 * is one screen that never scrolls, and these are documents. Two rules undo that, and the rest is
 * the panels a document is made of.
 */

body.bracket {
  overflow: auto;
}

/* `hidden` is a UA style at the weakest specificity there is, so any rule below that sets `display`
   silently switches it back on. That is not theoretical: the operator panel ships shut and rendered
   open, on the one page anybody can read, until this line existed. */
.bracket [hidden] {
  display: none;
}

/* style.css lays the dashboard out on `main`, a two-column grid squeezed to the window from 1560px
   up. A sheet is a document: one column, as tall as it is. */
.sheet {
  display: block;
  flex: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ---- the panel: one card of the document ------------------------------------------------------ */

.panel {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.panel__head {
  margin: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
  color: var(--faint);
  font: 700 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel > .hint,
.panel > .note,
.panel > .field,
.panel > form,
.panel > .said {
  margin-left: 16px;
  margin-right: 16px;
}

.panel > .hint {
  margin-top: 12px;
  margin-bottom: 12px;
}

.panel > form {
  margin-bottom: 14px;
}

/* ---- the standings table ---------------------------------------------------------------------- */

/* The base sheet's .table is the dashboard's tournament table; this page's standings share its
   clothes and add the two kinds of kill as two kinds of colour. */
.table__name {
  color: var(--ink);
}

.table__number {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* The one number a reader is looking for. */
.table__number--total {
  color: var(--cyan);
}

/* What the booth added, so the two kinds of kill are visibly two. */
.table__number--attributed {
  color: var(--ok);
}

.table tbody tr:hover td {
  background: #22d3ee0a;
}

/* ---- the groups, as cards --------------------------------------------------------------------- */

/* Cards on the panel rather than tiles in a grid whose gaps are its background: five groups in a
   four-wide grid leaves an empty track, and a track coloured like a rule reads as a sixth group. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  padding: 10px 12px;
}

/* The final is not written down anywhere: it is the top of the table, worked out. Drawing it
   differently is how a reader knows not to look for it in the groups. */
.card--computed {
  border-style: dashed;
}

.card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.card__label {
  color: var(--faint);
  font: 700 10px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card__name {
  color: var(--ink);
  font: 600 13px var(--sans);
}

.card__members {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__members li {
  padding: 3px 0;
  color: var(--dim);
  font-size: 12.5px;
}

.card__empty,
.card__note {
  color: var(--faint);
  font-size: 12px;
}

/* ---- the operator's half, shut until somebody opens it ----------------------------------------- */

.panel--operator {
  border-color: var(--faint);
}

.disclose {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 0;
}

.disclose::before {
  content: "▸ ";
}

.disclose[aria-expanded="true"]::before {
  content: "▾ ";
}

.operator {
  padding: 14px 16px;
}

.operator__head {
  margin: 18px 0 10px;
  color: var(--faint);
  font: 700 10.5px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.operator__head:first-child {
  margin-top: 0;
}

.attribute {
  margin-bottom: 20px;
}

.attribute__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 12px;
}

/* ---- the fields --------------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel > .field {
  margin-bottom: 14px;
}

.field__label {
  color: var(--faint);
  font: 600 10.5px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px var(--mono);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--cyan);
  outline: none;
}

.field input[type="number"] {
  width: 6em;
}

.field textarea {
  width: 100%;
  resize: vertical;
}

/* The tokens the front door shows once: read-only, but still copyable, so they read as values
   rather than as a form asking to be filled. */
.field input[readonly] {
  color: var(--cyan);
}

/* ---- the bracket editor ------------------------------------------------------------------------ */

/* One card per group, its members wrapping. The member box is narrow on purpose — a Nitrox name is
   short, and five of them plus the group's own number should sit in one line at the width the
   sheet gives this panel. */
.groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.groups__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
}

.groups__name input {
  width: 16em;
}

.groups__members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.groups__member {
  display: flex;
  gap: 4px;
  align-items: center;
}

.groups__member input {
  width: 10em;
}

.groups__member button {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--dim);
  cursor: pointer;
}

.groups__member button:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ---- the quiet words ---------------------------------------------------------------------------- */

.hint {
  margin: 10px 0 0;
  max-width: 70ch;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.6;
}

.hint code,
.hint b {
  color: var(--dim);
}

.said {
  margin: 10px 0 0;
  font: 12.5px var(--mono);
  color: var(--faint);
}

.said[data-tone="ok"] {
  color: var(--ok);
}

.said[data-tone="bad"] {
  color: var(--danger);
}

.said a {
  color: var(--cyan);
}

/* ---- the front door's two lists ------------------------------------------------------------------ */

/* The browser sources to paste into OBS, and every page with the token that opens it. */
.sources,
.directory {
  margin: 12px 16px 14px;
  padding: 0;
  list-style: none;
}

.sources li,
.directory li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}

.sources li:last-child,
.directory li:last-child {
  border-bottom: 0;
}

/* The address is the part that gets pasted, so it is the part that is lit — and it is allowed to
   wrap, because a booth's own URLs are longer than the sheet. */
.sources b {
  color: var(--cyan);
  font: 12.5px var(--mono);
  overflow-wrap: anywhere;
}

.directory a {
  color: var(--cyan);
  text-decoration: none;
}

.directory code,
.directory b {
  color: var(--dim);
}

/* ---- the tournament overview ------------------------------------------------------------------- */

/* The body is a flex column (style.css), so a sheet shrinks to its content; this one has to fill
   its 1100px for the two days to sit side by side. */
.sheet--wide {
  width: 100%;
}

/* What is on and what is next, the two lines a viewer opens the page for, above everything else. */
.now {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.now__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.now__cell--live {
  border-color: #22d3ee55;
  box-shadow: inset 3px 0 0 var(--cyan);
}

.now__label {
  color: var(--faint);
  font: 700 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.now__title {
  color: var(--ink);
  font: 700 22px/1.2 var(--sans);
}

.now__cell--live .now__title {
  color: var(--cyan);
}

.now__when {
  color: var(--dim);
  font-size: 13px;
}

/* Three columns read left to right as the event runs; on a phone they stack in the same order. */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 14px 16px;
}

.flow__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* The arrow in the gutter between two columns: the bracket moves this way. */
.flow__col + .flow__col::before {
  content: "›";
  position: absolute;
  left: -21px;
  top: 50%;
  color: var(--faint);
  font: 700 22px var(--sans);
  transform: translateY(-50%);
}

.flow__head {
  margin: 0;
  color: var(--faint);
  font: 700 10px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Each round after the groups sits level with the middle of the one before it rather than at the
   top of its column, so the three columns step down into the final the way a bracket is drawn. */
.flow__col + .flow__col {
  justify-content: center;
}

.card--final {
  border-color: #22d3ee55;
}

.card--final .card__name {
  color: var(--cyan);
}

.card__from {
  color: var(--faint);
}

.card__members + .card__note,
.card__empty + .card__note {
  margin: 6px 0 0;
}

.card .card__empty {
  margin: 0;
}

@media (max-width: 760px) {
  .flow {
    grid-template-columns: 1fr;
  }

  .flow__col + .flow__col::before {
    content: none;
  }
}

/* The schedule: two days side by side where there is room. */
.days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 18px;
  padding: 14px 16px;
}

.day__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--ink);
  font: 700 15px var(--sans);
}

.day__date {
  color: var(--dim);
  font-weight: 400;
  font-size: 13px;
}

/* One time column for every row of a day, as wide as its widest time: "02:15 PM – 02:50 PM" in a
   12-hour locale is half as wide again as "14:15 – 14:50". */
.slots {
  display: grid;
  grid-template-columns: max-content 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 12px;
  align-items: baseline;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  border-radius: 4px;
}

.slot__time {
  color: var(--dim);
  font: 400 12.5px var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.slot__title {
  color: var(--ink);
  font-weight: 600;
}

.slot__who {
  grid-column: 2;
  color: var(--faint);
  font-size: 12px;
}

/* A pause is a line between games rather than a game: smaller, quieter, and still there. */
.slot[data-kind="pause"] {
  padding-top: 2px;
  padding-bottom: 2px;
}

.slot[data-kind="pause"] .slot__time,
.slot[data-kind="pause"] .slot__title {
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 400;
}

.slot[data-state="done"] {
  opacity: 0.45;
}

.slot[data-state="live"] {
  border-left-color: var(--cyan);
  background: #22d3ee14;
}

.slot[data-state="live"] .slot__title {
  color: var(--cyan);
}

.slot[data-next="true"] {
  border-left-color: var(--line);
}

/* ---- the event's own colours, on the tournament page only -------------------------------------- */

/* The organisers' poster for Subnautica Creator Royale: black boards on a deep-water gradient, the
   words alternating gold and sky blue. Scoped to `.royale` so the bracket and the operator's sheets
   keep the booth's own palette. No web font: the poster's face would be a request to a third party
   from every viewer, so the weight carries the look instead. */
.royale {
  --royale-gold: #f08a00;
  --royale-blue: #82c3dc;
  --cyan: var(--royale-gold);
  --panel: #000;
  --panel2: #07090d;
  --line: #2a3644;
}

body.royale {
  background: linear-gradient(180deg, #1f2c3a 0%, #4a7aa3 100%) fixed;
}

.royale__gold {
  background: linear-gradient(180deg, #f08a00 20%, #f6d873 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.royale__blue {
  color: var(--royale-blue);
}

/* The logo is the organisers' own, cut out of its white page so the gradient shows through. */
.royale__hero {
  margin: 4px 0 22px;
  text-align: center;
}

.royale__logo {
  width: min(440px, 100%);
  height: auto;
}

/* The cast's two homes, in their own colours so a viewer recognises them before reading them. The
   darker shades of each are the ones white text is legible on. */
.watch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -6px 0 22px;
}

.watch__link {
  padding: 9px 18px;
  border-radius: 999px;
  color: #fff;
  font: 700 15px var(--sans);
  text-decoration: none;
}

.watch__link:hover,
.watch__link:focus-visible {
  filter: brightness(1.15);
}

.watch__link--twitch {
  background: #772ce8;
}

.watch__link--youtube {
  background: #cc0000;
}

.royale .bar__title {
  font-size: 20px;
  font-weight: 800;
}

.royale .panel {
  border-color: #000;
}

/* The bracket is the poster: black boards straight on the water, not a board on a board. */
.royale .panel:has(.flow),
.royale .panel:has(.flow) > .panel__head {
  border-color: transparent;
  background: none;
}

.royale .panel__head,
.royale .flow__head {
  color: var(--royale-gold);
}

.royale .now__cell {
  border-color: #000;
}

.royale .now__cell--live,
.royale .card--final {
  border-color: #f08a0066;
}

.royale .card {
  border-color: #000;
  background: #000;
}

.royale .card__name {
  color: var(--royale-gold);
  font-size: 18px;
  font-weight: 800;
  text-transform: lowercase;
}

/* The poster's rows alternate gold and blue, and so do these. */
.royale .card__members li {
  color: var(--royale-gold);
  font-size: 15px;
  font-weight: 700;
}

.royale .card__members li:nth-child(even) {
  color: var(--royale-blue);
}

.royale .slot[data-state="live"] {
  background: #f08a0014;
}