/* Participant layout CSS (templates/base.html), FL-042.
 *
 * Moved verbatim out of the <style> block in templates/base.html on 7
 * October 2026. An inline <style> block beats every stylesheet by load
 * order, which is how the fleet's nav bars drifted in July. The template
 * links this sheet at the exact place the block stood (in <head>, after
 * foundation.css and style.css, before a page's own extra_head and
 * phronon-tokens.css), so every rule still wins the same cascade fights.
 * Polarity Profiler alone owns it: sync_shared_assets.py does not carry it.
 */

:root {
  --navy: #0F1B2D;
  --blue: #2980b9;
  --blue-light: #d6eaf8;
  --amber: #e67e22;
  --bg: #f2f5f9;
  --text: #2c3e50;
  --muted: #7f8c8d;
}
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.top-bar { background: var(--navy); color: #fff; padding: 14px 20px; }
/* .top-bar-title is a <span> on participant pages, deliberately NOT a link.
   Until 3 September 2026 the reason was that GET / deleted the participant
   cookie, so clicking it mid-assessment threw the progress away. That is no
   longer true — the answers are on the session row and the cookie survives
   the entrance — but the span stays: the entrance is not a step of the
   questionnaire, and a prominent way out of a page of unsaved radio
   buttons is still a way to lose the page you were on. Educator pages
   (backoffice login / forgot / reset password, and the .bo-nav__brand
   navbar) DO link — nothing is at risk there. */
.top-bar-title { font-size: 14px; font-weight: 700; letter-spacing: .4px; text-decoration: none; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.top-bar-title::before { content: ''; display: inline-block; width: 22px; height: 22px; background: url('/static/brand/pp-icon.svg?v=20260818') center / contain no-repeat; flex-shrink: 0; }
.top-bar-step { font-size: 12px; opacity: .65; }
/* Language switcher — sits in the top bar's right-hand group, next to the
   step indicator. Styled for the navy bar rather than the page background. */
.top-bar-right { display: flex; align-items: center; gap: 12px; }
.lang-select {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.lang-select option { color: #2c3e50; background: #fff; }
.lang-select:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }