/* ==========================================================================
   QU0RUM — attendee interface stylesheet.

   CONF-DEL-004: the visual conventions of the supplied wireframe, comprising
   dark navy application chrome, the QU0RUM logo at top left, a left-hand
   vertical menu, a brand-red active tab indicator, a profile control at top
   right and light content cards.

   CONF-NFR-006: mobile-first. The layout is written for the handset first and
   widened at the breakpoint, not narrowed from a desktop layout.

   Palette values are taken from the supplied wireframe deck and from
   static/brand/logo_spec.json. Assumption A-28 holds the palette at navy
   chrome with brand-red accents; the blue #2061F7 in the logo pack is the
   accent bar inside the mark only and is never a user-interface colour.
   ========================================================================== */

:root {
  --q-chrome: #1f2933;        /* Top bar and left rail */
  --q-chrome-deep: #213840;   /* Rail hover, secondary chrome */
  --q-chrome-line: #2c4350;   /* Divider within the chrome */
  --q-accent: #ee2e24;        /* Brand-red active indicator and primary action */
  --q-accent-dark: #cf241b;
  --q-ground: #e2e8f0;        /* Page ground behind the cards */
  --q-card: #ffffff;          /* Content cards */
  --q-card-alt: #f7f9fb;      /* Secondary card fill */
  --q-border: #cbd2d9;        /* Card and field borders */
  --q-text: #1f2933;
  --q-muted: #64748b;         /* Secondary text */
  --q-focus: #2061f7;         /* Focus ring only; not a brand accent */

  --q-rail-width: 240px;
  --q-bar-height: 56px;
  --q-radius: 8px;
  --q-gap: 16px;
  --q-shadow: 0 1px 2px rgba(31, 41, 51, 0.08), 0 2px 8px rgba(31, 41, 51, 0.06);

  --q-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --q-mono: "Cascadia Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--q-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--q-text);
  background: var(--q-ground);
}

/* WCAG 2.2 AA: a visible focus indicator on every focusable control, per the
   review framework of the supplied deck. Never removed. */
:focus-visible {
  outline: 3px solid var(--q-focus);
  outline-offset: 2px;
}

/* Keyboard users reach the content without traversing the rail. */
.q-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--q-card);
  color: var(--q-text);
  padding: 12px 16px;
  z-index: 100;
}
.q-skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Application chrome — top bar
   -------------------------------------------------------------------------- */

.q-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--q-bar-height);
  padding: 0 12px;
  background: var(--q-chrome);
  color: #ffffff;
  border-bottom: 1px solid var(--q-chrome-line);
}

/* The mark sits top left. The dark-background variant is used directly on the
   chrome, the chrome being treated as an approved near-black substrate
   (decision DEC-03). No mark is redrawn, recoloured or substituted
   (CONF-DEL-013). */
.q-bar__mark {
  display: block;
  height: 22px;
  width: auto;
}
.q-bar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  /* WCAG 2.2 target size: no smaller than 24px in either direction. */
  min-height: 44px;
  /* Clear space on all four sides is 0.5 x cap height beyond the asset edge
     (mark specification, usage constraint 1). At a 22px asset height that is
     11px; 12px is applied. */
  padding: 0 12px 0 4px;
  text-decoration: none;
}

.q-bar__spacer { flex: 1 1 auto; }

/* Profile control, top right. */
.q-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--q-chrome-line);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  /* Fitts: target no smaller than 24px, with padding. */
  min-height: 36px;
}
.q-profile:hover { background: var(--q-chrome-deep); }
.q-profile__initials {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--q-accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.q-profile__name {
  display: none;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Menu toggle, handset only. The left-hand vertical menu is the convention on
   every width; below the breakpoint it is presented as a drawer so that it
   remains operable one-handed. */
.q-menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--q-chrome-line);
  border-radius: var(--q-radius);
  background: none;
  color: #ffffff;
  cursor: pointer;
}
.q-menu-toggle svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Application chrome — left vertical menu
   -------------------------------------------------------------------------- */

.q-shell { display: flex; min-height: calc(100vh - var(--q-bar-height)); }

.q-rail {
  position: fixed;
  inset: var(--q-bar-height) auto 0 0;
  z-index: 39;
  width: min(84vw, var(--q-rail-width));
  padding: 12px 0;
  background: var(--q-chrome);
  border-right: 1px solid var(--q-chrome-line);
  transform: translateX(-100%);
  transition: transform 160ms ease-out;
  overflow-y: auto;
}
.q-rail[data-open="true"] { transform: translateX(0); }

.q-rail__scrim {
  position: fixed;
  inset: var(--q-bar-height) 0 0 0;
  z-index: 38;
  background: rgba(31, 41, 51, 0.5);
  border: 0;
  padding: 0;
}
.q-rail__scrim[hidden] { display: none; }

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

.q-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px 10px 20px;
  color: #cbd2d9;
  text-decoration: none;
  font-size: 15px;
}
.q-rail__link:hover { background: var(--q-chrome-deep); color: #ffffff; }

/* Brand-red active indicator (CONF-DEL-004). Status is carried by the bar,
   the weight and the aria-current attribute, never by colour alone. */
.q-rail__link[aria-current="page"] {
  background: var(--q-chrome-deep);
  color: #ffffff;
  font-weight: 600;
}
.q-rail__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--q-accent);
}
.q-rail__icon { flex: 0 0 20px; width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.q-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--q-gap) 12px 48px;
}
.q-main--plain {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

.q-page-head { margin: 0 0 var(--q-gap); }
.q-page-head h1 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.q-page-head p { margin: 0; color: var(--q-muted); font-size: 14px; }

/* Light content cards (CONF-DEL-004). */
.q-card {
  background: var(--q-card);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius);
  box-shadow: var(--q-shadow);
  padding: 16px;
  margin: 0 0 var(--q-gap);
}
.q-card--quiet { background: var(--q-card-alt); box-shadow: none; }
.q-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.q-card__title { margin: 0; font-size: 16px; font-weight: 600; }
.q-card__meta { margin: 0; color: var(--q-muted); font-size: 13px; }

.q-grid { display: grid; gap: var(--q-gap); grid-template-columns: 1fr; }

/* Status is carried by an icon or a word plus a shape, not by colour alone. */
.q-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--q-border);
  background: var(--q-card-alt);
  font-size: 13px;
  font-weight: 600;
  color: var(--q-text);
  white-space: nowrap;
}
.q-state--open { border-color: #1f7a4d; color: #14603a; }
.q-state--closed { border-color: var(--q-muted); color: var(--q-muted); }
.q-state--published { border-color: var(--q-accent); color: var(--q-accent-dark); }

.q-stat { display: flex; flex-direction: column; gap: 2px; }
.q-stat__value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.q-stat__label { font-size: 13px; color: var(--q-muted); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.q-field { margin: 0 0 var(--q-gap); }
.q-field > label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.q-field input[type="email"],
.q-field input[type="text"],
.q-field input[type="password"],
.q-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--q-text);
  background: var(--q-card);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius);
}
.q-field textarea { min-height: 108px; resize: vertical; }
.q-field__help { margin: 6px 0 0; font-size: 13px; color: var(--q-muted); }

/* Consent controls. The processing consent and the marketing opt-in are
   separate records (CONF-NFR-017, CONF-NFR-018) and are presented as separate
   controls, the marketing one unselected by default. */
.q-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius);
  background: var(--q-card-alt);
  margin: 0 0 12px;
}
.q-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--q-accent);
}
.q-check label { font-size: 14px; line-height: 1.45; }

.q-errors {
  margin: 0 0 var(--q-gap);
  padding: 12px 14px;
  border: 1px solid var(--q-accent);
  border-left-width: 4px;
  border-radius: var(--q-radius);
  background: #fdecea;
  color: #8c1a13;
  font-size: 14px;
}
.q-errors ul { margin: 4px 0 0; padding-left: 20px; }

.q-notice {
  margin: 0 0 var(--q-gap);
  padding: 12px 14px;
  border: 1px solid var(--q-border);
  border-left: 4px solid var(--q-muted);
  border-radius: var(--q-radius);
  background: var(--q-card-alt);
  font-size: 14px;
}
.q-notice--pending { border-left-color: var(--q-accent); }

/* CONF-EVT-011. Its own namespace, and not .q-state: that class is the status
   pill of SC-05, SC-06 and SC-07, and a hide-while-empty rule written against
   it would have hidden every one of those pills. Found in the browser on
   10 September 2026 and not by the suite, which asserts nothing about them.

   The container sits on every signed-in screen and is empty until the poll
   fills it, so it must take no space while empty. It carries no box of its own
   — the notice inside does — so it collapses to nothing even where neither
   rule below applies. */
.q-session-notice:not(:has(.q-session-notice__box)) { display: none; }
.q-session-notice:empty { display: none; }
.q-session-notice__box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--q-gap);
  padding: 12px 14px;
  border: 1px solid var(--q-border);
  border-left: 4px solid var(--q-accent);
  border-radius: var(--q-radius);
  background: var(--q-card);
  box-shadow: var(--q-shadow);
  font-size: 14px;
}
.q-session-notice__what { margin: 0; font-weight: 600; }
/* A 44px target, as every other control on the attendee surface. */
.q-session-notice__act {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--q-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.q-session-notice__act:hover { background: var(--q-accent-dark); }

/* One clearly weighted primary action per view (Hick, Nielsen). */
.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--q-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.q-btn--primary { background: var(--q-accent); color: #ffffff; }
.q-btn--primary:hover { background: var(--q-accent-dark); }
.q-btn--secondary {
  background: var(--q-card);
  color: var(--q-text);
  border-color: var(--q-border);
}
.q-btn--block { width: 100%; }
.q-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.q-counter { font-size: 13px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
.q-counter[data-limit="true"] { color: var(--q-accent-dark); font-weight: 600; }

/* Increment 8: the device queue on SC-08 (CONF-NFR-009). Each response is
   listed with its state by word and shape; colour is secondary. */
.q-offline {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--q-accent);
  background: var(--q-card-alt);
  font-size: 14px;
}
.q-queue { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--q-border); }
.q-queue__item { padding: 10px 0; border-bottom: 1px solid var(--q-border); }
.q-queue__text { margin: 0 0 4px; overflow-wrap: anywhere; }
.q-queue__state { margin: 0; font-size: 13px; color: var(--q-muted); }
.q-queue__item[data-state="received"] .q-queue__state { color: #14603a; }
.q-queue__item[data-state="refused"] .q-queue__state { color: var(--q-accent-dark); font-weight: 600; }

/* --------------------------------------------------------------------------
   Lists and the mind map
   -------------------------------------------------------------------------- */

.q-list { list-style: none; margin: 0; padding: 0; }
.q-list > li + li { border-top: 1px solid var(--q-border); }
.q-list__item { padding: 12px 0; }
.q-list__text { margin: 0 0 4px; overflow-wrap: anywhere; }
.q-list__meta { margin: 0; font-size: 13px; color: var(--q-muted); }
.q-ref {
  font-family: var(--q-mono);
  font-size: 12px;
  color: var(--q-muted);
  margin-right: 6px;
}

/* SC-10. Theme nodes must be reachable and readable on a handset without the
   page frame scrolling horizontally (CONF-BRS-032, DP-B4 done-when). The map
   scrolls inside its own container; the page never does. */
.q-map { overflow: auto; -webkit-overflow-scrolling: touch; }
.q-map__canvas { min-width: 100%; height: 420px; display: block; }

.q-theme-list { display: grid; gap: 10px; grid-template-columns: 1fr; }
.q-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--q-card);
  border: 1px solid var(--q-border);
  border-left: 4px solid var(--q-accent);
  border-radius: var(--q-radius);
  text-decoration: none;
  color: var(--q-text);
}
.q-theme:hover { background: var(--q-card-alt); }
/* Increment 10, change 5. The swatch repeats the bubble's fill and stroke, so
   the map and the list name the same theme the same way (dry-run observation
   13). It sits beside the name and never replaces it: the name is what carries
   the meaning, and the swatch is aria-hidden for that reason. */
.q-theme__swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--q-border);
  border-radius: 50%;
}
.q-theme__name { font-weight: 600; overflow-wrap: anywhere; margin-right: auto; }
.q-theme__count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--q-muted);
}

.q-prose { max-width: 68ch; }
.q-prose h2 { font-size: 17px; margin: 24px 0 8px; }
.q-prose p, .q-prose li { font-size: 15px; }

.q-footer {
  margin: 32px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--q-border);
  font-size: 13px;
  color: var(--q-muted);
}
/* WCAG 2.2 target size: footer links are standalone controls, not links
   inside a sentence, so the 24px minimum applies to them. */
.q-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 2px;
  color: var(--q-muted);
}

/* --------------------------------------------------------------------------
   Widened layout. The rail becomes permanent; nothing else changes.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .q-menu-toggle { display: none; }
  .q-profile__name { display: block; }

  .q-rail {
    position: sticky;
    inset: auto;
    top: var(--q-bar-height);
    height: calc(100vh - var(--q-bar-height));
    width: var(--q-rail-width);
    transform: none;
  }
  .q-rail__scrim { display: none; }

  .q-main { padding: 24px 32px 64px; }
  .q-main--plain { padding: 48px 24px 64px; }
  .q-page-head h1 { font-size: 26px; }
  .q-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .q-rail { transition: none; }
}