/* site.css — per-fork overrides for WebApp.
   Most styling should come from the design system tokens. Use this file
   sparingly: layout glue for the appbar/footer, Bootstrap focus harmonization,
   and any fork-specific component variants. */

/* ---- Appbar (header) — built from system tokens, sticky on scroll. ----- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--ink);
}
.appbar__brand img {
  height: 28px;
  width: auto;
  display: block;
}
.appbar__title {
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--ink);
}

.appbar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  margin-left: var(--sp-4);
}
/* Targeting `.appbar a` (class + element) ties with `a:visited` (0,0,1,1).
   `.appbar a.appbar__link` (class + class + element) wins outright (0,0,2,1)
   so the visited-link rule from colors_and_type.css can't push these dim. */
.appbar a.appbar__link,
.appbar a.appbar__link:link,
.appbar a.appbar__link:visited {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);          /* high-contrast: nav must be reachable at a glance */
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-color) var(--ease),
              border-color var(--dur-color) var(--ease);
}
.appbar a.appbar__link:hover,
.appbar a.appbar__link:focus-visible {
  color: var(--theme-accent, var(--brand));
  border-bottom-color: var(--theme-accent, var(--brand));
}

.appbar__user {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .appbar { flex-wrap: wrap; gap: var(--sp-3); }
  .appbar__nav { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; }
}

/* ---- Main page wrapper ---- */
.page {
  flex: 1;
  padding: var(--sp-12) 0;
}

/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--rule);
  padding: var(--sp-6) 0;
  margin-top: var(--sp-12);
  color: var(--ink-mute);
  font-size: var(--text-sm);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
/* `.footer a:visited` (0,0,2,1) ties with `a:not(.btn):visited` (0,0,2,1);
   site.css loads after colors_and_type.css so source order wins. No HTML
   class needed — works on any <a> already inside .footer. */
.footer a,
.footer a:link,
.footer a:visited {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink-soft) 35%, transparent);
}
.footer a:hover { color: var(--theme-accent, var(--brand)); }

/* ---- Bootstrap form harmonization ---- */
/* The validation summary uses Bootstrap classes — tone its border to ours. */
.text-danger { color: #b91c1c !important; }    /* readable on light bg */
.field-validation-error { color: #b91c1c; font-size: var(--text-xs); }
.input-validation-error,
.input-validation-error:focus {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px color-mix(in srgb, #b91c1c 18%, transparent);
}
.validation-summary-errors {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  color: var(--warn-ink);
  margin-bottom: var(--sp-6);
}
.validation-summary-errors ul { margin: 0; padding-left: var(--sp-6); }

/* Bootstrap `.form-control` / `.form-select` -> system `.field` rough alignment,
   without replacing the class (so jquery-validation still finds it).
   Use `--bg-soft` (not `--bg`): in dark mode `--bg` equals the page background,
   so the input would melt into the page. `--bg-soft` keeps a visible step. */
.form-control,
.form-select {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.form-control::placeholder { color: var(--ink-mute); opacity: 1; }
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
/* Disabled / readonly: Bootstrap forces a LIGHT gray bg and WebKit greys the
   text-fill, so on dark mode you get light-on-light (unreadable). Repaint with
   our tokens and pin the text-fill color so the value stays legible. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background: var(--bg-tint);
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  opacity: 1;
  cursor: not-allowed;
}
.form-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); margin-bottom: var(--sp-2); }

/* Bootstrap buttons → system .btn variants, opt-in. Use class="btn btn--primary"
   for new code; old `class="btn btn-primary"` keeps working via Bootstrap.
   Scaffolded Identity pages still use Bootstrap outline buttons — give them a
   visible contour on navy (Bootstrap's default border vanishes in dark mode). */
.btn-outline-secondary {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-mute);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink-mute) 14%, transparent);
  border-color: var(--brand-soft);
}

/* ---- Bootstrap nav-pills (Manage account side nav) ----
   Bootstrap's inactive `.nav-link` color is the brand primary, which renders
   as dim indigo on the navy dark-mode background — barely legible. Repaint to
   our neutral, and keep the active pill on the theme accent. */
.nav-pills .nav-link {
  color: var(--ink-soft);
  font-weight: var(--fw-medium);
  border-radius: var(--radius);
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink-mute) 14%, transparent);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  /* `--brand-blue` (not `--theme-accent`): the site theme accent is `--brand`
     dark-indigo, which stays dim on navy in dark mode. `--brand-blue` reads
     well on the navy bg in both light and dark. */
  background: var(--brand-blue);
}

/* A `multiple` <select> sitting in a `d-flex` cell collapses to a sliver and
   truncates each option to its first letter. Give it room to show role names. */
.form-select[multiple] { min-width: 12rem; }

/* Body must stretch to push footer down */
body { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Card body color guarantee ----
   Bootstrap re-declares `body { color: var(--bs-body-color) }` which in some
   browser cascades resolves to slate-700 (dim on navy). Force `.card` body
   copy to `--ink-soft` explicitly. Don't touch `.card span` — that would
   override `.section-eyebrow`'s themed accent. */
.card { color: var(--ink-soft); }
.card p,
.card li,
.card dd,
.card dt { color: inherit; }
.card h1, .card h2, .card h3, .card h4 { color: var(--ink); }
.card a:not(.btn) { color: var(--theme-accent, var(--brand)); }