/* ATP Live shared base: tokens, page chrome, buttons, tiles, circles, focus ring.
   Chrome mirrors the voting tool (cream gradient, dark pill buttons, system font stack, orange focus ring);
   the spec palette (navy/orange/teal/grey/body) is for the 1-7 scale, markers and results.
   No inline styles anywhere: pages vary appearance with classes and custom properties set from script
   through el.style.setProperty(...). */

:root {
  color-scheme: light;

  /* Spec palette: scale, markers, results. */
  --navy: #1F3A5F;
  --orange: #E8792B;
  --teal: #2A9D8F;
  --grey: #5A6472;
  --fg: #2B2B2B;

  /* Supporting tokens (prototype). */
  --muted: #5A6472;
  --panel: #FFFFFF;
  --peach: #FDF0E6;
  --line: #E6E0D9;
  --on-navy: #FFFFFF;
  --on-orange: #2B2B2B;   /* white on orange is 2.9:1; body text on orange is 4.9:1 */

  /* Page chrome (voting / amazingteamperformance.co.uk). */
  --atp-dark: #292929;
  --atp-dark-hover: #1F1F1F;
  --atp-orange: #DD7500;
  --atp-orange-tint: #FAEAD9;
  --atp-cream-1: #EBEFD5;
  --atp-cream-2: #F1F1D5;
  --atp-line: #AFACAD;
  --page-end: #FFFFFF;
  --btn-bg: var(--atp-dark);
  --btn-bg-hover: var(--atp-dark-hover);
  --btn-fg: #FFFFFF;
  --btn2-bg: #FFFFFF;
  --btn2-bg-hover: var(--atp-orange-tint);
  --btn2-fg: var(--atp-dark);

  /* Focus ring: orange outline over a dark halo, so it reads at 3:1+ on cream, white and orange alike. */
  --ring: var(--atp-orange);
  --ring-halo: var(--atp-dark);

  /* Circles (ATP.circles). */
  --circ-stroke: var(--navy);
  --circ-fill: var(--orange);
  --circ-fill-opacity: 0.22;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
}

/* Dark mode: the prototype's values. data-theme="light" on <html> opts out; data-theme="dark" forces it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #9DB8D8;
    --orange: #F2924D;
    --teal: #4FC0B1;
    --grey: #9AA3B0;
    --fg: #ECEDEF;
    --muted: #9AA3B0;
    --panel: #1E2228;
    --peach: #2A2118;
    --line: #2E343C;
    --on-navy: #16191D;
    --on-orange: #16191D;
    --atp-cream-1: #16191D;
    --atp-cream-2: #16191D;
    --atp-line: #4A525C;
    --page-end: #16191D;
    --btn-bg: #ECEDEF;
    --btn-bg-hover: #FFFFFF;
    --btn-fg: #16191D;
    --btn2-bg: #1E2228;
    --btn2-bg-hover: #2A2118;
    --btn2-fg: #ECEDEF;
    --ring: #F2924D;
    --ring-halo: #16191D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #9DB8D8;
  --orange: #F2924D;
  --teal: #4FC0B1;
  --grey: #9AA3B0;
  --fg: #ECEDEF;
  --muted: #9AA3B0;
  --panel: #1E2228;
  --peach: #2A2118;
  --line: #2E343C;
  --on-navy: #16191D;
  --on-orange: #16191D;
  --atp-cream-1: #16191D;
  --atp-cream-2: #16191D;
  --atp-line: #4A525C;
  --page-end: #16191D;
  --btn-bg: #ECEDEF;
  --btn-bg-hover: #FFFFFF;
  --btn-fg: #16191D;
  --btn2-bg: #1E2228;
  --btn2-bg-hover: #2A2118;
  --btn2-fg: #ECEDEF;
  --ring: #F2924D;
  --ring-halo: #16191D;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  line-height: 1.5;
  color: var(--fg);
  background-color: var(--page-end);
  background-image: linear-gradient(180deg, var(--atp-cream-1) 0%, var(--atp-cream-2) 40%, var(--page-end) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 {
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

[hidden] { display: none !important; }

img, svg { max-width: 100%; }

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
}

.muted { color: var(--muted); }

/* Screen-reader-only text. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus: one ring for every focusable thing. The dark halo fills the 2px offset gap AND shows 2px beyond the
   orange outline (outlines paint over box-shadows), so the ring's outer edge is dark: 3:1+ against cream. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ring-halo);
}

/* Logo. As an <img> the file's own wordmark colour (#292929) applies; to follow the theme, inline the
   SVG and the wordmark (fill="currentColor") picks up the color set here. */
.atp-logo {
  display: block;
  height: 36px;
  width: auto;
  color: var(--atp-dark);
}
:root[data-theme="dark"] .atp-logo { color: var(--fg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .atp-logo { color: var(--fg); }
}
.atp-logo svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Buttons: dark pills (primary) and outlined pills (secondary). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-secondary {
  background: var(--btn2-bg);
  color: var(--btn2-fg);
  border-color: var(--atp-line);
  font-weight: 500;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (hover: hover) {
  .btn:hover:not(:disabled) {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
  }
  .btn-secondary:hover:not(:disabled) {
    background: var(--btn2-bg-hover);
    border-color: var(--btn2-fg);
  }
}

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

/* Circles (markup from ATP.circles). Colours come from these classes; the SVG has no style attributes. */
.atp-circles {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.atp-circles circle {
  fill: none;
  stroke: var(--circ-stroke);
  stroke-width: 0.14;
}
.atp-circles.is-filled circle {
  fill: var(--circ-fill);
  fill-opacity: var(--circ-fill-opacity);
  stroke: var(--circ-fill);
}

/* Scale tiles: circles above an orange number band (A4 handout). Pages set the layout grid. */
.tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 44px;
  padding: 10px 8px 0;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.tile .atp-circles { height: 40px; }
.tile-num {
  display: block;
  margin: 10px -8px 0;
  padding: 3px 0;
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tile[aria-pressed="true"] {
  border-color: var(--orange);
  background: var(--peach);
}
.tile[aria-pressed="true"] .tile-num {
  background: var(--orange);
  color: var(--on-orange);
}
@media (hover: hover) {
  .tile:hover:not(:disabled) { border-color: var(--navy); }
}
.tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Connection status ("Reconnecting"), shown by pages from ATP.poll's onError. */
.status-banner {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--peach);
  color: var(--fg);
  border: 1px solid var(--orange);
  font-size: 13px;
  font-weight: 600;
}

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