/* ===========================================================================
   Application styles — PASGR AYPS Platform.

   `pasgr-brand.css` supplies the tokens and the brand devices; it deliberately
   styles nothing on its own, so that the brand can be shared with the print
   builders without dragging a web layout along. This file is what turns those
   tokens into a page — until it existed, the platform rendered as unstyled
   serif text with the brand rules floating above it.

   DIRECTION RULE, same as the brand sheet: logical properties only. No
   `left`/`right` anywhere; gate G3 enforces it.
   =========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

/* ---- layout -------------------------------------------------------------- */

.page {
  max-inline-size: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main.page { padding-block: 1.75rem 3rem; }

/* ---- masthead ------------------------------------------------------------ */

.masthead { background: var(--surface); border-block-end: 1px solid var(--border); }

.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-block: 0.7rem;
}

.masthead__brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  color: inherit;
  margin-inline-end: auto;   /* pushes the controls to the trailing edge */
}
.masthead__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.masthead__tagline {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.masthead__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.masthead__controls form { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.masthead__controls label {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.masthead__bell {
  font-size: var(--t-small);
  text-decoration: none;
  white-space: nowrap;
}

.masthead__who { font-size: var(--t-small); color: var(--muted); }
.masthead__who strong { color: var(--ink); font-weight: 600; }

/* ---- typography ---------------------------------------------------------- */

h1 { font-size: var(--t-h1); font-weight: 700; color: var(--primary);
     margin-block: 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); font-weight: 700; margin-block: 1.4rem 0.5rem; }
h3 { font-size: var(--t-h3); font-weight: 600; margin-block: 1rem 0.4rem; }
p  { margin-block: 0 0.8rem; }
small { font-size: var(--t-small); color: var(--muted); }
code { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--primary); text-underline-offset: 0.15em; }
a:hover { color: var(--primary-hover); }

.lede { font-size: 1.05rem; color: var(--muted); max-inline-size: 46rem; }

/* ---- controls ------------------------------------------------------------ */

button, .button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-control);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.secondary, .button.secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--border);
}
button.secondary:hover, .button.secondary:hover { border-color: var(--primary); }

/* Radios and checkboxes are excluded: they are not text fields, and giving
   them a field's padding, border and `max-inline-size` inflated the control
   until it filled the row and pushed its own label off the edge. */
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 0.4rem 0.55rem;
  max-inline-size: 100%;
}

input[type="radio"], input[type="checkbox"] {
  inline-size: auto;
  flex: none;
  margin: 0;
  accent-color: var(--primary);
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
label { font-weight: 600; display: inline-block; margin-block-end: 0.2rem; }

/* A label wrapping its own control is a choice, not a field caption: the box or
   radio belongs *beside* the words. Without this the control sat on its own
   line above the text and a four-option question read as eight items. */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}
label:has(> input[type="radio"]) input,
label:has(> input[type="checkbox"]) input {
  translate: 0 0.15rem;   /* optical alignment with the first text line */
}
form p { margin-block-end: 0.9rem; }
form p input:not([type="checkbox"]):not([type="radio"]),
form p select, form p textarea { inline-size: 100%; }

/* ---- tables -------------------------------------------------------------- */

table { border-collapse: collapse; inline-size: 100%; font-size: var(--t-small); }
th, td { text-align: start; padding: 0.45rem 0.6rem; border-block-end: 1px solid var(--border); }
thead th { background: var(--primary); color: #fff; font-weight: 600; }
tbody tr:hover { background: var(--primary-tint); }

.scroll-x { overflow-x: auto; }   /* wide tables scroll, the page never does */

/* ---- lists --------------------------------------------------------------- */

ul, ol { margin-block: 0 0.8rem; padding-inline-start: 1.4rem; }
li { margin-block-end: 0.25rem; }
ul.plain { list-style: none; padding-inline-start: 0; }

/* ---- cards and callouts (device classes live in the brand sheet) --------- */

.pasgr-card { margin-block-end: 0.75rem; }
.pasgr-callout { margin-block: 0.75rem; }
.pasgr-chip { vertical-align: 0.1em; }

.stack > * + * { margin-block-start: 0.75rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* ---- the sign-in card ---------------------------------------------------- */

.auth-card {
  max-inline-size: 24rem;
  margin-inline: auto;
  margin-block-start: 2rem;
  padding: 1.6rem;
}

.auth-card label { display: block; }
.auth-card__secondary { margin-block-start: 0.75rem; }

/* A one-time code is read off a screen and typed in a hurry — big, spaced and
   monospaced so a 6 and an 8 cannot be confused. */
.otp-input {
  inline-size: 100%;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.3em;
}

/* ---- imported course content --------------------------------------------- */
/* Authored HTML carries the source platform's inline CSS, which was written for
   a single light-themed site. Imported here it makes pale text sit on a pale
   panel the moment a reader's browser is in dark mode — unreadable, and not the
   author's fault. So the *structure* of the markup is honoured and its
   *palette* is not: colours are neutralised and re-expressed in theme tokens,
   which is also what makes the same content legible in a future high-contrast
   or RTL skin. `!important` is warranted here precisely because it is
   overriding inline styles this platform did not write. */

.content-body { margin-block-end: 1rem; }
.content-body > *:first-child { margin-block-start: 0; }

.content-body [style] {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* The material's callout box is a left border plus padding. Keep the device,
   re-theme the surface. */
.content-body [style*="border-left"],
.content-body [style*="border-inline-start"] {
  background: var(--surface) !important;
  border-inline-start: 4px solid var(--accent) !important;
  border-radius: var(--radius-control);
  padding: 0.7rem 0.9rem;
  margin-block: 0.75rem;
}

.content-body img { max-inline-size: 100%; height: auto; }
.content-body table { margin-block: 0.75rem; }
.content-body pre { overflow-x: auto; }

/* An inline magnitude bar. Full-width and viewBox-scaled, so it needs no
   script, no chart library and no fixed pixel size — and it reads correctly in
   an RTL locale because the fill grows from the inline start. */
.magnitude {
  inline-size: 100%;
  block-size: 0.6rem;
  border-radius: var(--radius-control);
  overflow: hidden;
}

/* ---- footer -------------------------------------------------------------- */

.site-footer { margin-block-start: 3rem; }
.site-footer__credit {
  padding-block: 0.75rem 1.5rem;
  font-size: var(--t-label);
  color: var(--muted);
  text-align: center;
}

/* ---- small screens ------------------------------------------------------- */

@media (max-width: 40rem) {
  .masthead__bar { gap: 0.6rem; }
  .masthead__controls { inline-size: 100%; }
  .page { padding-inline: 0.9rem; }
}

/* ---- Cards --------------------------------------------------------------
   Ported from the CEGER Training Platform's `.home-card`, which is the design
   this platform is meant to feel like: a white card on a near-white ground,
   a coloured edge on the reading side, a title in that colour, and one obvious
   action. Nothing floats on a dark field.

   Two deliberate departures from the original.

   The stripe uses `border-inline-start`, not `border-left`. CEGER's is
   physical and would sit on the wrong edge in an RTL locale; gate G3 refuses
   physical direction in layout CSS for exactly that reason.

   And the stripe colour is a ROLE token, not a fixed green. It defaults to
   `--primary` and any card can override `--stripe` — which is what lets a
   country card carry its own accent without a modifier class per country.
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-block: 0.75rem 2rem;
}

.card {
  --stripe: var(--primary);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--stripe);
  border-radius: 8px;
  padding: 1.35rem 1.4rem;
  box-shadow: var(--elevation);
}

/* The title is TEXT, so it never takes `--stripe`.
   The stripe is a border and may be any colour a card likes — PASGR's orange,
   a country's accent, a chart hue. None of those are guaranteed to clear
   4.5:1, and a country accent like Ghana's gold certainly does not. Painting
   the heading from the same variable would have made the stripe silently
   decide whether the title was readable. */
.card__title {
  margin: 0 0 0.5rem;
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
}

.card__meta {
  margin: 0 0 0.5rem;
  font-size: var(--t-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Takes the slack so every button in a row sits on the same line, however
   uneven the descriptions are. */
.card__desc { flex: 1; margin: 0 0 1rem; color: var(--ink); }

.card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: auto; }

/* THE STRIPE IS THE BORDER AND NOTHING ELSE.
   Buttons keep `--primary` even on a card whose stripe is something else,
   because a filled button carries a WHITE LABEL and the stripe is not
   required to be dark enough for one. Measured: white on Ghana's accent
   #A8901F is 3.15:1 and on PASGR's orange #F1592D is 3.38:1 — both below the
   4.5:1 a label needs. Letting the stripe fill the button would have made a
   country's decorative colour decide whether its own button was readable.
   (The CEGER platform reaches the same conclusion: its stripe modifiers
   "only override the left-border colour".) */
.card .button.secondary { background: transparent; color: var(--primary); border-color: var(--border); }

/* Section heading above a grid — the "Field & Team Tools" treatment. */
.section-head {
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--primary);
  margin-block: 2rem 0.25rem;
}
.section-head + .section-note { margin-block: 0 0.75rem; color: var(--muted); }

/* ---- Panels, filter rows and stacked forms ------------------------------
   The shapes the CEGER platform uses on its list and form screens, so a
   country team moving between the two platforms meets the same furniture.
   -------------------------------------------------------------------------- */

/* A card used as a container rather than a tile: no stripe, more padding. */
.panel { padding: 1.35rem 1.4rem; margin-block-end: 1.5rem; }
.panel > :first-child { margin-block-start: 0; }
.panel > :last-child { margin-block-end: 0; }

/* Filters side by side, each with a visible label. An `aria-label` alone
   satisfies a screen reader and leaves everyone else guessing what the
   dropdown filters — the label is not an accessibility nicety, it is the
   only thing that says what the control does. */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: end;
}
.filter-grid label { display: block; font-weight: 600; margin-block-end: 0.25rem; }
.filter-grid select { inline-size: 100%; }
.filter-grid__go { display: flex; align-items: end; }

/* One field per row, label above. Django's default renders `Label:` with a
   trailing colon and no structure; this gives each field a block of its own
   so long forms stay readable. */
.stacked-form .field { margin-block-end: 1.1rem; }
.stacked-form .field > label { display: block; font-weight: 600; margin-block-end: 0.3rem; }
.stacked-form .field__help { display: block; color: var(--muted); margin-block-start: 0.25rem; }
.stacked-form .field__error { display: block; color: var(--danger); margin-block-start: 0.25rem; }
.stacked-form ul { list-style: none; padding-inline-start: 0; margin: 0; }
.stacked-form ul li { margin-block-end: 0.2rem; }

/* ---- The instrument -----------------------------------------------------
   A question is not a table row. The CEGER platform renders each as a block
   carrying its code, its prompt, and — separately and unmistakably — the
   INSTRUCTION, which is guidance for the interviewer and must never be read
   to the respondent. Flattening that into a cell is how an enumerator ends up
   reading the instruction aloud.
   -------------------------------------------------------------------------- */

.q-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-block-end: 0.85rem;
  background: var(--paper);
}
.q-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.q-card__code {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--primary);
}
.q-card__prompt { font-weight: 600; }
.q-card__meta { margin: 0.35rem 0 0; color: var(--muted); font-size: var(--t-small); }

/* The instruction. Tinted ground and a leading rule so it cannot be mistaken
   for the words the respondent hears. */
.q-instruction {
  margin-block-start: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border-inline-start: 3px solid var(--accent);
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
}
.q-instruction__label { font-weight: 700; color: var(--primary); }
.q-instruction__note { color: var(--muted); font-style: italic; }

/* A label that exists for a screen reader where the placeholder carries the
   visual cue. Placeholders are not labels — they vanish on focus. */
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}