/* Reinnovate Events — design language.
   Three commitments make this identifiable with the logo cropped out:
   full-bleed bands never cards · one axis per surface · settle never bounce.
   Nothing here derives from Kahoot, Mentimeter, Slido, Poll Everywhere or Vevox. */

:root {
  /* Monochrome first. One high-chroma signal hue per session. */
  --ink:        #12100E;
  --ink-2:      #1C1915;
  --ink-3:      #2A2620;
  --bone:       #F5F1EA;
  --bone-2:     #E8E2D7;
  --bone-3:     #D6CEC0;
  --graphite:   #5C554A;
  --signal:     #FF5A36;
  --signal-dim: #C43D1F;
  --amber:      #E8A33D;
  --sage:       #6E8B6B;

  /* Zero overshoot. Things land; they do not spring. */
  --settle: cubic-bezier(0.20, 0.90, 0.10, 1.00);
  --t-tap: 90ms;
  --t-commit: 140ms;
  --t-enter: 220ms;
  --t-band: 480ms;

  --voice: 'Archivo Condensed', 'Roboto Condensed', 'Oswald', 'Haettenschweiler',
           'Arial Narrow', system-ui, sans-serif;
  --record: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --tap: 48px;   /* Pocket — above the 2.5.8 floor */
  --tap-desk: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--record);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.voice {
  font-family: var(--voice);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 0.98;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

:focus-visible {
  /* 1.4.11 needs 3:1 against the adjacent ground. A single ring in the theme's
     signal colour measured 2.76:1 on Corporate and 1.32:1 on Arcade — the
     "High Contrast" theme had the worst indicator in the product. A two-tone
     ring cannot fail: whichever ground it lands on, one of the two rings
     contrasts against it. */
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--bone), 0 0 0 9px var(--ink);
}
/* On a dark surface the same trick runs inverted. */
[data-surface="dark"] :focus-visible,
.on-ink :focus-visible {
  outline-color: var(--bone);
  box-shadow: 0 0 0 6px var(--ink), 0 0 0 9px var(--bone);
}

/* ── Bands ────────────────────────────────────────────────────────────────
   The band IS the datum. Anchored to the left edge, full width, no card, no
   shadow, no margin. Length is the value. Label sits inside the left end. */

.band {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.band-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(var(--rel, 0));
  transform-origin: left center;
  transition: transform var(--t-band) var(--settle);
  z-index: 0;
}
/* ── Vertical columns ──────────────────────────────────────────────────────
   The same bands, turned 90 degrees. Only the LAYOUT changes: the fill is the
   same element with the same --rel, so the reveal transition, the texture
   classes, the leading state and the quiet-mode overrides all keep working
   without a second code path. Opt in per event. */
.bands[data-chart="columns"] {
  flex-direction: row;
  align-items: flex-end;
  gap: 1.2%;
}
.bands[data-chart="columns"] .band {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.bands[data-chart="columns"] .band-fill {
  inset: auto 0 0 0;
  width: 100%;
  height: 100%;
  transform: scaleY(var(--rel, 0));
  transform-origin: center bottom;
}
.bands[data-chart="columns"] .band-body {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: .4em;
  padding-bottom: .6em;
}
/* A column is narrow, so a long option label cannot sit on one line. */
.bands[data-chart="columns"] .band-label {
  font-size: .8em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.band-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
}
.band-glyph {
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--voice);
  font-weight: 800;
}
.band-label { flex: 1; min-width: 0; text-align: left; }
.band-value { flex: none; font-variant-numeric: tabular-nums; }

/* Series differentiate by luminance and texture first, hue second — this is
   simultaneously the colourblind story and the projector story. */
.tx-1 { background: var(--signal); }
.tx-2 { background: var(--signal-dim);
        background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 6px, transparent 6px 12px); }
.tx-3 { background: var(--graphite);
        background-image: radial-gradient(circle at 4px 4px, rgba(255,255,255,.30) 1.6px, transparent 1.7px);
        background-size: 10px 10px; }
.tx-4 { background: var(--ink-3);
        background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.20) 0 5px, transparent 5px 10px),
                          repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 5px, transparent 5px 10px); }

/* ── Rails ──────────────────────────────────────────────────────────────── */

.rail {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}
.dot {
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  flex: none;
  background: var(--sage);
}
.dot.warn { background: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
.dot.off  { background: var(--graphite); }
@keyframes pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }

/* ── Quiet Mode ───────────────────────────────────────────────────────────
   One mode, not three: reduced-motion, screen-reader and low-bandwidth collapse
   into a single toggle that also auto-engages on sustained frame drop. */

.quiet .band-fill { transition: none !important; }
.quiet [data-motion] { animation: none !important; transition: none !important; }
.quiet .dot.warn { animation: none; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Support-access banner. Full-bleed and unmissable by design: someone outside the
   company being able to see this workspace's configuration is a state to stay aware
   of, not a notification to dismiss. */
.supportbar {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  background: var(--signal); color: #fff;
  font-size: .9rem; line-height: 1.4;
}
.supportbar .sub { opacity: .85; }
.supportbar .btn { background: rgba(255,255,255,.18); color: #fff; border: 0; }
.supportbar .btn.primary { background: #fff; color: var(--ink); }
.supportbar.live { background: var(--ink); }

/* ── hidden means hidden ──────────────────────────────────────────────────────
   The UA stylesheet's `[hidden] { display: none }` loses to ANY author rule
   that sets display, regardless of specificity — author styles beat UA styles.
   So `.fbfab { display: flex }` silently defeats `el.hidden = true`, and the
   JS looks correct while the element never leaves the screen.

   This bit us three times in one day, each reported as a separate bug:
     - the feedback button appeared before the presenter ever pushed it
     - the score chip showed "0 pts" on polls that are not scored at all
     - the Ask button ignored the per-event question-box toggle
   All three had correct JS. A sweep found eight elements across five surfaces
   with the same defect, including .askfab, .scorechip, .joincard and .qr.

   `!important` is deliberate and is the standard remedy: `hidden` is an
   assertion that the element is not relevant, and no layout rule should be able
   to overrule it. Anything that needs to stay in the layout must not use the
   attribute in the first place.

   test/contrast.mjs fails the build if an author rule re-introduces the
   override. */
[hidden] { display: none !important; }