/* ============================================================================
   VoteHub Live — one theme for the phone, the projector and the console.

   Two sources, deliberately:
   · the LOOK is WHINO's. Art Whino has shown lowbrow / pop-surrealist work
     since 2007, and the gallery's own site runs vermilion CTAs and coral links
     over near-black. Those are the values below, read off whinova.com rather
     than eyeballed, so this reads as the gallery's own tool.
   · the STRUCTURE is Apple's HIG — a real type scale, 44pt minimum targets,
     translucent bars, colour used only to mean something, generous spacing.

   This started life on OfficialWC26's gold, because WC26 hosts the pages. The
   look is now the gallery's: an art battle is not a football bracket, and the
   room should not be looking at someone else's brand.

   Every colour decision below is a contrast ratio against --paper, measured,
   not guessed. Nothing in the interface is under 4.5:1.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
  /* Ground and surfaces. Near-black, warmed a touch off the old blue-black:
     a gallery wall at night, and the least light a projector can spill into a
     dark room. Cards are light lifted off it, never a second colour. */
  --paper:      #121114;
  --surface:    rgba(255,255,255,0.040);
  --surface-2:  rgba(255,255,255,0.070);
  --surface-3:  rgba(255,255,255,0.100);
  --line:       rgba(255,255,255,0.09);
  --line-soft:  rgba(255,255,255,0.055);

  /* Ink */
  --ink:        #FFFFFF;
  --ink-2:      rgba(255,255,255,0.64);
  --ink-3:      rgba(255,255,255,0.36);

  /* White leads. It is the brightest thing available on this ground, which is
     what a room reading a screen code from forty feet actually needs, and it
     is the only "colour" that cannot fight the paintings the night is about.
     Everything you can act on wears it: buttons, the screen code, the section
     heads, the row that is live.
     Its meaning is carried by weight and placement rather than hue, so the
     one job left to colour is saying which of two things happened -- and that
     is what the gold below is for. */
  --accent:      #FFFFFF;
  --accent-ink:  #14100E;          /* 18.4:1 ON the white */
  --accent-dim:  rgba(255,255,255,0.13);
  --accent-line: rgba(255,255,255,0.30);
  --accent-glow: rgba(255,255,255,0.26);

  /* Winning. Gold, because gold has meant "won" for longer than any brand has
     existed, and because it is the one way to mark a champion that is not a
     shade of red. Vermilion held this slot -- the Battle Royale mark's own
     colour -- but it put red on the wall, and this screen is supposed to have
     none. It is reserved for winning: the champion, the crowned row, the name
     that went through. */
  --accent-2:      #F5C518;
  --accent-2-ink:  #14100E;          /* 11.6:1 ON the gold */
  --accent-2-dim:  rgba(245,197,24,0.14);
  --accent-2-line: rgba(245,197,24,0.34);
  --accent-2-glow: rgba(245,197,24,0.28);

  /* State colours mean exactly one thing each, and none of them may be
     mistaken for the accent — "you can press this" has to stay unambiguous.
     That pushed paint off orange and urgent off red, which is why they are a
     hotter yellow and a pinker red than the palette they replace. */
  --live:       #3DD16A;   /* voting is open        — 9.4:1 */
  --paint:      #B064D0;   /* painting, or paused   — 5.0:1  */
  --paint-dim:  rgba(176,100,208,0.12);
  --paint-line: rgba(176,100,208,0.34);
  --judge:      #7C6BFF;   /* the judging pool      — 4.9:1  */

  /* Running out. No red, and the alarm is motion rather than hue: the clock
     takes a heartbeat in its last minute and the countdown is a number 62vh
     tall doing the same. Colour alone could not carry this anyway now that
     the lead is white -- a white "urgent" clock is identical to a white
     ordinary one, which is exactly the bug this replaced. */
  --urgent:     #FFFFFF;
  --urgent-hi:  #FFFFFF;
  --urgent-glow:rgba(255,255,255,0.40);

  /* Destructive controls in the CONSOLE only -- never the projector, never a
     phone. An organiser about to wipe a round should see red; a room should
     not. This is the one red left in the palette and it lives behind a
     password. */
  --danger:     #E0344F;
  --danger-hi:  #FF6B85;

  /* Read off the Celebration of the Arts mark the night runs under: its paint
     splatters are cyan, magenta and violet. Nothing in the interface is
     coloured from here — these exist so the contestants can be. */
  --splash-cyan:    #00BCD8;
  --splash-indigo:  #5B6BE8;
  --splash-violet:  #B064D0;
  --splash-yellow:  #FFC93C;

  --radius:     16px;
  --radius-sm:  11px;
  --gap:        16px;

  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.45);
  --font:       'Barlow', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display:'Barlow Condensed', 'Barlow', -apple-system, system-ui, sans-serif;
}

/* ============================================================================
   Light. Not an inversion -- an inversion of a palette built for a dark room
   is a palette nothing was checked against. Every hue below is the same hue as
   its dark counterpart, darkened until it clears 4.5:1 on BOTH the ground and
   a white card, measured. The two themes are one palette at two weights.

   The one that cannot simply darken is the accent: white leads in the dark and
   would vanish here, so "you can act on this" becomes near-black, and the ink
   on top of it flips to white. Gold still means winning; it is a bronze here
   because gold on paper is 1.4:1 and invisible.

   Set on <html> by each surface from the event, so the organiser's choice in
   Set up reaches the wall and every phone.
   ============================================================================ */
:root[data-theme="light"] {
  --paper:      #EDEAE3;
  --surface:    rgba(255,255,255,0.78);
  --surface-2:  rgba(255,255,255,0.92);
  --surface-3:  #FFFFFF;
  --line:       rgba(20,18,26,0.13);
  --line-soft:  rgba(20,18,26,0.07);

  --ink:        #141219;
  --ink-2:      #4A4753;
  --ink-3:      #696770;

  --accent:      #141219;          /* 15.5:1 on the ground */
  --accent-ink:  #FFFFFF;          /* 18.6:1 ON the accent */
  --accent-dim:  rgba(20,18,26,0.07);
  --accent-line: rgba(20,18,26,0.22);
  --accent-glow: rgba(20,18,26,0.16);

  --accent-2:      #806400;        /* 4.7:1 — gold at paper weight */
  --accent-2-ink:  #FFFFFF;
  --accent-2-dim:  rgba(128,100,0,0.10);
  --accent-2-line: rgba(128,100,0,0.30);
  --accent-2-glow: rgba(128,100,0,0.22);

  --live:       #0F7A32;   /* 4.5:1 */
  --paint:      #7B2FA8;   /* 6.2:1 */
  --paint-dim:  rgba(123,47,168,0.09);
  --paint-line: rgba(123,47,168,0.28);
  --judge:      #4438C4;   /* 6.7:1 */

  /* The last minute is still motion, not hue -- but on paper the alarm has to
     be something you can see, so it is the ink rather than the ground. */
  --urgent:     #141219;
  --urgent-hi:  #141219;
  --urgent-glow:rgba(20,18,26,0.30);

  --danger:     #C0202F;   /* 5.0:1 */
  --danger-hi:  #8E0C1A;

  --shadow:     0 1px 2px rgba(20,18,26,.10), 0 12px 34px rgba(20,18,26,.12);
}

/* The projector's own scrims assume a dark room behind them. */
:root[data-theme="light"] .champ::before,
:root[data-theme="light"] .pchamp::before {
  background: radial-gradient(120% 90% at 50% 18%, var(--accent-2-glow), rgba(237,234,227,0.97));
}
:root[data-theme="light"] .countdown {
  background: radial-gradient(ellipse at center, #FFFFFF 0%, var(--paper) 70%);
}
/* The mark is white ink on transparency, which disappears on paper. */
/* .barmark is deliberately NOT in this list. These are white marks sitting
   directly on paper, so inverting them is what makes them visible. .barmark
   carries its own background chip, and inverting a chip flips the box and the
   glyph together -- a black W on a black square. It gets a dark chip instead,
   below, so the white mark reads in both themes.

   The event marks left this list when the house mark gave way to the Battle
   Royale lockup. That one is not white ink -- it is a full-colour drawing with
   a brush, a pencil and near-black lettering -- and inverting it turned the
   lettering white and the tools navy, which is how it looked on paper: a
   photographic negative of a logo. Two files, one per ground, is the honest
   way to do it; the swap lives beside each mark. */
:root[data-theme="light"] .vh-auth .mark { filter: invert(1); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A class that sets `display` beats the UA's [hidden] rule, which silently
   un-hides anything toggled from JS. One rule that always wins. */
[hidden] { display: none !important; }

button, input, select, textarea { font-family: inherit; }
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Big statements — round names, clocks, headlines — take the condensed face:
   a poster voice, which is the right one for a room being asked to look up. */
.display-face {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Section labels: small, quiet, wide. */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Numbers that change in place must not jitter. */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

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