/* PollSet: the trainee's full-screen poll-taking page, on top of the shared ../../assets/style.css. Also used (via
   pollset/inc/admin.php) for the admin's read-only instance view and day summary, which reuse .ps-bars and the
   colour-contrast convention but not the full-screen layout below. */

/* ---------- The full-screen poll app (index.php) ---------- */

body.ps-page { margin: 0; }
.ps-app { position: fixed; inset: 0; display: flex; background: #fff; }
.ps-app[hidden] { display: none; }

/* flex-basis 0 (not "auto"): a reliable, content-independent 50/50 split - with "auto" each panel's initial size before
   growth depends a little on its own content, so the divide could creep left/right by a few pixels between questions. */
.ps-qa { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
.ps-graph { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; background: #fff; border-left: 1px solid var(--line); }

/* No live metrics: just the question/answer panel, centred and capped in width until the screen is narrow. */
.ps-app:not(.has-graph) .ps-qa { flex: 1 1 auto; max-width: 900px; margin: 0 auto; border-left: 0; }

.ps-question { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 22vh; padding: 24px 32px; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.25; border-bottom: 1px solid; }
.ps-q-number { position: absolute; top: 14px; left: 18px; font-size: 2rem; font-weight: 700; }

.ps-answers { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px 28px; }
.ps-answers.two-col { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-auto-rows: 1fr; gap: 10px 16px; }

.ps-answer { flex: 1 1 0; min-height: 3.2em; display: flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 600; cursor: pointer; border: 0; text-align: center; outline-offset: -4px; transition: outline-color 0.1s; }
.ps-answer.picked { outline: 4px solid currentColor; }

/* The per-poll answer timer (only when "Allow going back" is off and a positive "Time to answer" is set): a plain grey bar
   that fills over that many seconds, then auto-advances. */
.ps-timer { flex: 0 0 auto; height: 6px; margin: 0 28px 14px; background: #e2e5e9; border-radius: 3px; overflow: hidden; }
.ps-timer-fill { height: 100%; width: 0%; background: #9aa3ad; }

.ps-nav { flex: 0 0 auto; display: flex; gap: 12px; padding: 12px; background: #fff; }
.ps-nav-btn { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; min-height: calc(11vh - 24px); border: 0; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 700; }
.ps-nav-btn[hidden] { visibility: hidden; }
.ps-nav-btn:disabled { cursor: default; opacity: 0.6; }

/* The organisation's logo, top-right of the graph panel: never wider than 200px or 20% of the panel, whichever
   is smaller, and never taller than the question banner opposite it (22vh, same as .ps-question/.ps-graph-spacer
   below), so it can never reach down into the bars. */
.ps-logo { position: absolute; top: 14px; right: 14px; z-index: 4; max-width: min(200px, 20%); max-height: 22vh; opacity: 0.5; }

/* The mobile panel-swap button: top right of whichever panel is showing, or top left once you're looking at the other. */
.ps-mobile-toggle { position: absolute; top: 14px; z-index: 5; padding: 8px 14px; border: 1px solid rgba(0,0,0,0.15); border-radius: 20px;
  background: rgba(255,255,255,0.92); color: var(--navy); font-size: 0.9rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.ps-mobile-toggle.left { left: 14px; }
.ps-mobile-toggle.right { right: 14px; }

@media (min-width: 701px) {
  .ps-mobile-toggle { display: none; }
}
@media (max-width: 700px) {
  .ps-app.has-graph .ps-qa, .ps-app.has-graph .ps-graph { display: none; border-left: 0; }
  .ps-app.has-graph.show-graph .ps-graph { display: flex; }
  .ps-app.has-graph:not(.show-graph) .ps-qa { display: flex; }
}

/* ---------- The bar chart (live on the trainee page, static on the admin's instance/summary views) ---------- */

/* .ps-graph-spacer and .ps-graph-bottom-spacer match .ps-question's and .ps-nav's rendered heights, so the bars between them
   line up with the answers panel beside them (which sits between the same two things: the question banner and the nav buttons). */
.ps-graph-inner { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; }
.ps-graph-spacer { flex: 0 0 auto; min-height: 22vh; }
.ps-graph-bottom-spacer { flex: 0 0 auto; min-height: 11vh; }
.ps-bars { display: flex; flex-direction: column; gap: 16px; }
.ps-bars.two-col { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-auto-rows: 1fr; gap: 16px 24px; }
.ps-graph-inner .ps-bars { flex: 1 1 auto; padding: 20px 28px; }
/* The row shares the available height equally with the others (so it lines up with its answer on the left), but the bar itself
   only grows up to 50px tall and sits centred in whatever room the row has - it shrinks below that if the row is tighter. */
.ps-bar-row { flex: 1 1 0; min-height: 2.4em; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ps-bar-label { flex: 0 0 auto; margin: 0 0 4px; font-size: 0.9rem; font-weight: 600; color: var(--badge-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-bar-track { flex: 0 1 50px; min-height: 0; max-height: 50px; background: var(--surface-alt); border-radius: 6px; }
/* A .ps-view-polls list (the admin's day summary, and the trainee Results page) has no bounded-height parent (unlike the
   trainee's live graph panel), so the "fill available height" rules above give one-column bars (auto-sized flex row: shrinks
   to the 2.4em floor) and two-column ones (grid row: grows toward the 50px cap) two different heights. Fix them both to one
   height in between, regardless of column count. */
.ps-view-polls .ps-bar-row { flex: 0 0 auto; min-height: 0; justify-content: flex-start; }
.ps-view-polls .ps-bar-track { flex: 0 0 auto; height: 28px; max-height: none; }
.ps-bar-fill { box-sizing: border-box; display: flex; align-items: center; height: 100%; padding: 0 12px; border-radius: 6px;
  font-size: 0.9rem; font-weight: 700; white-space: nowrap; transition: width 0.4s; }
/* Zero: no coloured segment at all (not even a sliver) - the count just sits as plain text on the empty track, indented
   the same as every other bar's number (not the padding-left: 0 this used to have, which sat it flush against the edge). */
.ps-bar-fill.zero { background: none; color: var(--badge-text); }
.ps-graph-empty { color: var(--muted); padding: 20px 28px; }

/* A read-only "one block per poll" list, its question banner in the poll's own colours: the trainee-facing Results page (below)
   and, via pollset/inc/admin.php, the admin's own read-only instance/day-summary views. The question sits flush with the left
   edge; its answers/bars are indented under it instead (and narrowed to match, so the indent doesn't push them off the right). */
.ps-view-polls { display: flex; flex-direction: column; gap: 18px; }
.ps-view-poll:not(:last-child) { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ps-view-q { margin: 0 0 10px; padding: 10px 14px 10px 0; border-radius: 8px; font-weight: 600; }
.ps-view-polls .ps-bars, .ps-view-polls .ps-view-options { margin-left: 24px; width: calc(100% - 24px); }

/* ---------- The Results page (pollset/index.php?...&results=1), reached from a poll's last "See Results" button, or its own
   shareable link: the pooled group results, styled like a single side of the poll/graph split - centred, half the display's
   width on desktop, full width at <= 860px, scrolling vertically as needed. ---------- */

.ps-results-app { position: fixed; inset: 0; display: flex; justify-content: center; background: #fff; }
.ps-results-panel { width: 50%; height: 100%; overflow: auto; box-sizing: border-box; padding: 32px; }
.ps-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 0.6em; }
.ps-results-head h1 { margin: 0; }
@media (max-width: 700px) {
  .ps-results-panel { width: 100%; }
}

/* ---------- Entry screen ("enter a poll set id") and the not-found message: the shared card-panel look ---------- */

.ps-entry input[type=text] { text-transform: lowercase; }