/* ---------------------------------------------------------------------------
   Base: the reset, and the handful of classes the markup still names.

   This file stands where Bootstrap used to. Bootstrap was shipping 227 KB on
   every request to provide a reset and about twenty classes, and site.css was
   overriding nearly all of the rest of it -- so the framework was being paid
   for twice, once to download and once to undo.

   Two rules govern edits here:

   1. Loaded BEFORE tokens.css, motion.css and site.css, so anything those files
      say wins. Nothing in here may be more specific than a single class, and
      nothing may use !important.
   2. Written in logical properties throughout, so one file is correct in both
      directions. Bootstrap needed a separate .rtl build; this does not, which
      is why the Arabic pages now load the same cached stylesheet as the
      English ones instead of a second copy of everything.
   --------------------------------------------------------------------------- */

/* ============================ Reset ===================================== */
/* Only what the pages actually lean on. A full normalize would be most of a
   framework again. */

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

body {
  margin: 0;
  /* Set here rather than left to the UA so a heading never inherits a serif
     for the instant before site.css lands. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 { margin-block: 0 .5rem; font-weight: 600; }
p { margin-block: 0 1rem; }
ul, ol { margin-block: 0 1rem; padding-inline-start: 2rem; }
ul ul, ol ol, ul ol, ol ul { margin-block-end: 0; }
dl { margin-block: 0 1rem; }
dt { font-weight: 600; }
dd { margin-block-end: .5rem; margin-inline-start: 0; }
figure { margin: 0 0 1rem; }
address { margin-block-end: 1rem; font-style: normal; line-height: inherit; }
blockquote { margin: 0 0 1rem; }

hr {
  margin: 1rem 0;
  border: 0;
  border-block-start: 1px solid;
  opacity: .2;
}

small { font-size: .875em; }
strong, b { font-weight: 700; }
sub, sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }

a { color: inherit; }
a:not([href]):not([class]) { color: inherit; text-decoration: none; }

img, svg, video, canvas { vertical-align: middle; }
img { max-width: 100%; height: auto; }

/* border-collapse is the one table default that breaks a design outright if it
   is missing: every cell draws its own doubled border. */
table { border-collapse: collapse; caption-side: bottom; }
caption { padding-block: .5rem; color: inherit; text-align: start; }
th { text-align: inherit; }
thead, tbody, tfoot, tr, td, th { border: 0 solid; border-color: inherit; }

label { display: inline-block; }

/* Form controls do not inherit type from their ancestors on their own, and a
   button rendering in the UA's font is the single most visible symptom of a
   missing reset. */
button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, select { text-transform: none; }
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; }
button { background-color: transparent; background-image: none; border: 0; }
textarea { resize: vertical; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { float: none; width: 100%; padding: 0; margin-block-end: .5rem; font-size: 1.5rem; line-height: inherit; }

/* Safari draws a date field's inner text top-aligned unless this is cleared. */
::-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; }
::-webkit-search-decoration { -webkit-appearance: none; }
::file-selector-button { font: inherit; -webkit-appearance: button; }

summary { display: list-item; cursor: pointer; }
[hidden] { display: none !important; }

/* ============================ Layout ==================================== */

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar > .container {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand { display: inline-block; text-decoration: none; }

.navbar-nav {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

.navbar-nav .nav-link { display: block; text-decoration: none; }

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

/* The mobile menu. Script toggles .show; without script the button does
   nothing and the menu stays closed, which is why every destination in it is
   also reachable from the footer. */
.collapse:not(.show) { display: none; }

.navbar-toggler {
  padding: .25rem .75rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  background-color: transparent;
  font-size: 1.25rem;
  line-height: 1;
  transition: box-shadow .15s ease-in-out;
}

.navbar-toggler:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* The one breakpoint the markup asks for by name. Above it the bar is a row and
   the toggler is gone; below it the menu is a panel the toggler opens. */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav { flex-direction: row; }
  .navbar-expand-lg .navbar-toggler { display: none; }

  .navbar-expand-lg .navbar-collapse {
    display: flex;
    flex-basis: auto;
  }

  /* Paired with .navbar-collapse above: a collapse that is open on mobile and
     then widened past the breakpoint must not stay display:none. */
  .navbar-expand-lg .collapse:not(.show) { display: flex; }
  .align-items-lg-center { align-items: center; }
}

/* ============================ Utilities ================================= */
/* Logical, so ms-auto pushes the nav away from the brand in both directions --
   which is the whole reason the Arabic build of Bootstrap existed. */
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.w-100 { width: 100%; }
.text-danger { color: var(--danger, #c02626); }
.lead { font-size: 1.15rem; font-weight: 400; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================ Components ================================ */

.table {
  width: 100%;
  margin-block-end: 1rem;
  vertical-align: middle;
  border-color: var(--border-hair, rgba(0, 0, 0, .1));
}

.table > :not(caption) > * > * { padding: .5rem; }
.table > tbody > tr + tr > * { border-block-start: 1px solid; }
.table-hover > tbody > tr { transition: background-color .15s ease; }
.table-hover > tbody > tr:hover { background-color: var(--surface-sunken, rgba(0, 0, 0, .03)); }

/* site.css owns how these look. What it never set, because Bootstrap was
   setting it, is that they are blocks filling their column. */
.form-label { display: block; }

.form-control, .form-select {
  display: block;
  width: 100%;
  appearance: none;
}

.form-control:disabled, .form-select:disabled { opacity: .65; cursor: not-allowed; }

/* The select arrow, which is the only thing appearance:none takes away that
   has to be given back. Inline-start-safe: it flips with the writing mode. */
.form-select {
  padding-inline-end: 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='%23666' 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 .85rem center;
  background-size: 15px 11px;
}

[dir="rtl"] .form-select { background-position: left .85rem center; }

/* Flex rather than Bootstrap's float-and-negative-margin: the markup is always
   an input followed by its label, and float: inline-start is still uneven
   across browsers where the plain box model is not. */
.form-check {
  display: flex;
  align-items: baseline;
  gap: .55em;
  min-height: 1.5rem;
  margin-block-end: .125rem;
}

/* Native, and tinted with accent-color. Bootstrap redrew the box with an
   appearance:none background image; a native control that simply takes the
   site's colour is less to ship and behaves properly with forced-colors. */
.form-check-input {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  accent-color: var(--accent, #e2611b);
}

.form-check-input:disabled { opacity: .65; }
.form-check-label { display: inline; }

.alert { position: relative; padding: 1rem; margin-block-end: 1rem; border: 1px solid transparent; border-radius: .5rem; }

/* Only the variant site.css does not already define. */
.alert-warning {
  color: #664100;
  background-color: #fff4d6;
  border-color: #ffe49c;
}

.btn-dark {
  --btn-bg: var(--navy-800, #0b141d);
  --btn-fg: #fff;
  --btn-line: var(--navy-800, #0b141d);
}

.btn-outline-dark {
  --btn-bg: transparent;
  --btn-fg: var(--text, #0b141d);
  --btn-line: var(--border-strong, rgba(11, 20, 29, .35));
}

.btn-outline-danger {
  --btn-bg: transparent;
  --btn-fg: var(--danger, #c02626);
  --btn-line: color-mix(in srgb, var(--danger, #c02626) 45%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-warning {
    color: #ffdf9e;
    background-color: rgba(120, 80, 0, .28);
    border-color: rgba(255, 205, 90, .32);
  }
}

:root[data-theme="dark"] .alert-warning {
  color: #ffdf9e;
  background-color: rgba(120, 80, 0, .28);
  border-color: rgba(255, 205, 90, .32);
}