/* Polarity Profiler's foundation: the page baseline and the small class
 * vocabulary its templates are written in (FL-098 point 4, 12 October 2026).
 *
 * Until that day every page loaded Bootstrap 5.3.0 (about 230 KB of CSS and
 * 80 KB of JavaScript) for roughly 120 of its class names and one modal. The
 * classes the templates use are defined here instead, with the values they
 * rendered with, and nothing else: the templates did not change, and neither
 * did how they look. The one modal (Data Management's delete confirmation)
 * became a native <dialog>; its rules are in backoffice-data-management.css.
 *
 * WHERE IT LOADS: first, in the slot Bootstrap had, in templates/base.html,
 * templates/backoffice/base.html and templates/backoffice/login.html. Every
 * tool sheet and every shared sheet loads after it, so each of their rules
 * still wins the same fights it won against Bootstrap.
 *
 * WHAT IS NOT HERE: anything PP's pages do not use. Before adding a class,
 * check that the shared sheets (backoffice-core.css, phronon-tokens.css) do
 * not already say it; a backoffice page should reach for their vocabulary
 * (.bo-table, .bo-page-header, .btn from backoffice-core) first.
 *
 * Polarity Profiler alone owns this file: sync_shared_assets.py does not
 * carry it. Colours are the values Bootstrap 5.3.0 used, written out. */

/* ── Page baseline ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
               "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: #212529; background-color: #fff;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
h1, h2, h3, h4, h5, h6, .h5 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
}
h5, .h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-top: 0; margin-bottom: 1rem; }
ol, ul { padding-left: 2rem; }
ol, ul, dl { margin-top: 0; margin-bottom: 1rem; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: .5rem; margin-left: 0; }
blockquote, figure { margin: 0 0 1rem; }
b, strong { font-weight: bolder; }
small, .small { font-size: .875em; }
sub, sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
a { color: #0d6efd; text-decoration: underline; }
a:hover { color: #0a58ca; }
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }
code, kbd, pre, samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: .875em; }
code { font-size: .875em; color: #d63384; word-wrap: break-word; }
a > code { color: inherit; }
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
caption { padding-top: .5rem; padding-bottom: .5rem; color: rgba(33, 37, 41, .75); text-align: left; }
th { text-align: inherit; text-align: -webkit-match-parent; }
thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; }
label { display: inline-block; }
button { border-radius: 0; }
button:focus:not(:focus-visible) { outline: 0; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
[role="button"] { cursor: pointer; }
select { word-wrap: normal; }
select:disabled { opacity: 1; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) { cursor: pointer; }
textarea { resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend {
  float: left; width: 100%; padding: 0; margin-bottom: .5rem;
  font-size: calc(1.275rem + .3vw); line-height: inherit;
}
@media (min-width: 1200px) { legend { font-size: 1.5rem; } }
legend + * { clear: left; }
::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field { padding: 0; }
::-webkit-inner-spin-button { height: auto; }
[type="search"] { outline-offset: -2px; -webkit-appearance: textfield; }
::-webkit-search-decoration { -webkit-appearance: none; }
::file-selector-button { font: inherit; -webkit-appearance: button; }
output { display: inline-block; }
iframe { border: 0; }
summary { display: list-item; cursor: pointer; }
progress { vertical-align: baseline; }

/* ── Layout: the page container and the twelve-column row ──────────────── */
.container { width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.row {
  --gutter-x: 1.5rem; --gutter-y: 0;
  display: flex; flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-.5 * var(--gutter-x));
  margin-left: calc(-.5 * var(--gutter-x));
}
.row > * {
  flex-shrink: 0; width: 100%; max-width: 100%;
  padding-right: calc(var(--gutter-x) * .5); padding-left: calc(var(--gutter-x) * .5);
  margin-top: var(--gutter-y);
}
.g-2 { --gutter-x: .5rem; --gutter-y: .5rem; }
.g-3 { --gutter-x: 1rem; --gutter-y: 1rem; }
.g-4 { --gutter-x: 1.5rem; --gutter-y: 1.5rem; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-6 { flex: 0 0 auto; width: 50%; }
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) { .col-lg-6 { flex: 0 0 auto; width: 50%; } }

/* ── Buttons ─────────────────────────────────────────────────────────────
   On backoffice pages backoffice-core.css (loaded last) restyles .btn,
   .btn-primary, .btn-secondary, .btn-danger and .btn-sm; these rules are
   what the participant pages, and the variants core does not define, use. */
.btn {
  display: inline-block;
  padding: .375rem .75rem;
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: #212529; text-align: center; text-decoration: none; vertical-align: middle;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  border: 1px solid transparent; border-radius: .375rem;
  background-color: transparent;
  transition: color .15s ease-in-out, background-color .15s ease-in-out,
              border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn:focus-visible { outline: 0; }
.btn:disabled { pointer-events: none; opacity: .65; }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }

.btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; }
.btn-primary:focus-visible { box-shadow: 0 0 0 .25rem rgba(49, 132, 253, .5); }
.btn-primary:active, .btn-primary.active { color: #fff; background-color: #0a58ca; border-color: #0a53be; }
.btn-primary:disabled { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }

.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-secondary:hover, .btn-secondary:focus-visible { color: #fff; background-color: #5c636a; border-color: #565e64; }
.btn-secondary:focus-visible { box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5); }
.btn-secondary:active, .btn-secondary.active { color: #fff; background-color: #565e64; border-color: #51585e; }
.btn-secondary:disabled { color: #fff; background-color: #6c757d; border-color: #6c757d; }

.btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-danger:hover, .btn-danger:focus-visible { color: #fff; background-color: #bb2d3b; border-color: #b02a37; }
.btn-danger:focus-visible { box-shadow: 0 0 0 .25rem rgba(225, 83, 97, .5); }
.btn-danger:active, .btn-danger.active { color: #fff; background-color: #b02a37; border-color: #a52834; }
.btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; }

.btn-warning { color: #000; background-color: #ffc107; border-color: #ffc107; }
.btn-warning:hover, .btn-warning:focus-visible { color: #000; background-color: #ffca2c; border-color: #ffc720; }
.btn-warning:focus-visible { box-shadow: 0 0 0 .25rem rgba(217, 164, 6, .5); }
.btn-warning:active, .btn-warning.active { color: #000; background-color: #ffcd39; border-color: #ffc720; }
.btn-warning:disabled { color: #000; background-color: #ffc107; border-color: #ffc107; }

/* The outline buttons: coloured text and border, filled on hover. */
.btn-outline-primary   { color: #0d6efd; border-color: #0d6efd; }
.btn-outline-secondary { color: #6c757d; border-color: #6c757d; }
.btn-outline-success   { color: #198754; border-color: #198754; }
.btn-outline-danger    { color: #dc3545; border-color: #dc3545; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible,
.btn-outline-primary:active, .btn-outline-primary.active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible,
.btn-outline-secondary:active, .btn-outline-secondary.active { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-outline-success:hover, .btn-outline-success:focus-visible,
.btn-outline-success:active, .btn-outline-success.active { color: #fff; background-color: #198754; border-color: #198754; }
.btn-outline-danger:hover, .btn-outline-danger:focus-visible,
.btn-outline-danger:active, .btn-outline-danger.active { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-outline-primary:focus-visible   { box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .5); }
.btn-outline-secondary:focus-visible { box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .5); }
.btn-outline-success:focus-visible   { box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .5); }
.btn-outline-danger:focus-visible    { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .5); }
.btn-outline-primary:disabled   { color: #0d6efd; background-color: transparent; }
.btn-outline-secondary:disabled { color: #6c757d; background-color: transparent; }
.btn-outline-success:disabled   { color: #198754; background-color: transparent; }
.btn-outline-danger:disabled    { color: #dc3545; background-color: transparent; }

/* A row of joined buttons (the A / B / C part switch on the results charts). */
.btn-group { position: relative; display: inline-flex; vertical-align: middle; border-radius: .375rem; }
.btn-group > .btn { position: relative; flex: 1 1 auto; }
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 1; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* :where() keeps this at the weight of .btn-sm, so backoffice-core's .btn
   (loaded later) sets the padding on backoffice pages, as it did before. */
:where(.btn-group-sm) > .btn { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }

/* ── Alerts, cards, badges ───────────────────────────────────────────────── */
.alert {
  position: relative; padding: 1rem; margin-bottom: 1rem;
  border: 1px solid transparent; border-radius: .375rem;
}
.alert-secondary { color: #2b2f32; background-color: #e2e3e5; border-color: #c4c8cb; }
.alert-success   { color: #0a3622; background-color: #d1e7dd; border-color: #a3cfbb; }
.alert-info      { color: #055160; background-color: #cff4fc; border-color: #9eeaf9; }
.alert-warning   { color: #664d03; background-color: #fff3cd; border-color: #ffe69c; }
.alert-danger    { color: #58151c; background-color: #f8d7da; border-color: #f1aeb5; }
.alert-light     { color: #495057; background-color: #fcfcfd; border-color: #e9ecef; }

.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  color: #212529; word-wrap: break-word;
  background-color: #fff; background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .175); border-radius: .375rem;
}
.card-body { flex: 1 1 auto; padding: 1rem; }

.badge {
  display: inline-block; padding: .35em .65em;
  font-size: .75em; font-weight: 700; line-height: 1;
  color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline;
  border-radius: .375rem;
}
.badge:empty { display: none; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-label { margin-bottom: .5rem; }
.form-text { margin-top: .25rem; font-size: .875em; color: rgba(33, 37, 41, .75); }
.form-control, .form-select {
  display: block; width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: #212529; background-color: #fff;
  border: 1px solid #dee2e6; border-radius: .375rem;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .form-control, .form-select { transition: none; } }
.form-control:focus { color: #212529; background-color: #fff; }
.form-control:focus, .form-select:focus {
  border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.form-control { background-clip: padding-box; }
.form-control::placeholder { color: rgba(33, 37, 41, .75); opacity: 1; }
.form-control:disabled, .form-select:disabled { background-color: #e9ecef; opacity: 1; }
.form-control::-webkit-date-and-time-value { min-width: 85px; height: 1.5em; margin: 0; }
.form-control::-webkit-datetime-edit { display: block; padding: 0; }
textarea.form-control { min-height: calc(1.5em + .75rem + 2px); }
.form-control-sm {
  min-height: calc(1.5em + .5rem + 2px);
  padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem;
}
.form-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}
.form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: .75rem; background-image: none; }
.form-select-sm {
  padding-top: .25rem; padding-bottom: .25rem; padding-left: .5rem;
  font-size: .875rem; border-radius: .25rem;
}

.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem; }
.form-check .form-check-input { float: left; margin-left: -1.5em; }
.form-check-input {
  width: 1em; height: 1em; margin-top: .25em; vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  border: 1px solid #dee2e6;
  -webkit-appearance: none; appearance: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.form-check-input[type="checkbox"] { border-radius: .25em; }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:active { filter: brightness(90%); }
.form-check-input:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:disabled { pointer-events: none; filter: none; opacity: .5; }
.form-check-input:disabled ~ .form-check-label { cursor: default; opacity: .5; }

/* ── Tables ──────────────────────────────────────────────────────────────
   The custom properties let .table-light (a header row), .table-warning (an
   excluded row) and .table-hover combine, as they did before. */
.table {
  --tbl-color: #212529; --tbl-bg: #fff; --tbl-border-color: #dee2e6;
  --tbl-accent-bg: transparent;
  --tbl-hover-color: #212529; --tbl-hover-bg: rgba(0, 0, 0, .075);
  width: 100%; margin-bottom: 1rem; vertical-align: top;
  border-color: var(--tbl-border-color);
}
.table > :not(caption) > * > * {
  padding: .5rem .5rem;
  color: var(--tbl-color-state, var(--tbl-color));
  background-color: var(--tbl-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--tbl-bg-state, var(--tbl-accent-bg));
}
.table > tbody { vertical-align: inherit; }
.table > thead { vertical-align: bottom; }
.table-sm > :not(caption) > * > * { padding: .25rem .25rem; }
.table-hover > tbody > tr:hover > * { --tbl-color-state: var(--tbl-hover-color); --tbl-bg-state: var(--tbl-hover-bg); }
.table-light {
  --tbl-color: #000; --tbl-bg: #f8f9fa; --tbl-border-color: #dfe0e1;
  --tbl-hover-color: #000; --tbl-hover-bg: #e5e6e7;
  color: var(--tbl-color); border-color: var(--tbl-border-color);
}
.table-warning {
  --tbl-color: #000; --tbl-bg: #fff3cd; --tbl-border-color: #e6dbb9;
  --tbl-hover-color: #000; --tbl-hover-bg: #ece1be;
  color: var(--tbl-color); border-color: var(--tbl-border-color);
}
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Single-purpose classes ──────────────────────────────────────────────
   Each does one thing and wins over a component rule, as before. */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-self-end { align-self: flex-end !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.me-1 { margin-right: .25rem !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-auto { margin-left: auto !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.px-2 { padding-right: .5rem !important; padding-left: .5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.fw-normal { font-weight: 400 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.text-muted { color: rgba(33, 37, 41, .75) !important; }
.text-dark { color: #212529 !important; }
.text-danger { color: #dc3545 !important; }
.text-info-emphasis { color: #055160 !important; }
.text-warning-emphasis { color: #664d03 !important; }

.bg-light { background-color: #f8f9fa !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #198754 !important; }
.bg-info { background-color: #0dcaf0 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info-subtle { background-color: #cff4fc !important; }
.border { border: 1px solid #dee2e6 !important; }
.border-0 { border: 0 !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; }