.ad-placeholder {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .display-5 {
  letter-spacing: 0.1em;
}

.user-select-all {
  user-select: all;
}

.beta-banner {
  background-color: #fff3cd;
  border-bottom: 1px solid #ffe69c;
  color: #664d03;
  font-size: 0.925rem;
  text-align: center;
}

.beta-banner .badge {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.beta-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

.beta-banner-link {
  color: #664d03;
  text-decoration: underline;
  flex: 0 0 auto;
}

.beta-banner-link:hover {
  color: #412e02;
}

/* Dark-mode variant of the beta banner. Light yellow on a dark page
   is jarring (high luminance against low luminance reads as "pop-up
   ad"). Switch to a dimmer amber-on-charcoal palette that still
   reads as a notice without screaming at the visitor. Triggered by
   Bootstrap 5.3's [data-bs-theme="dark"] attribute, which the
   FOUC-blocking script in base.html sets from localStorage before
   CSS paints — so dark-mode visitors never see a yellow flash. */
[data-bs-theme="dark"] .beta-banner {
  background-color: #3a2f00;
  border-bottom-color: #5c4a00;
  color: #ffe69c;
}
[data-bs-theme="dark"] .beta-banner-link {
  color: #ffe69c;
}
[data-bs-theme="dark"] .beta-banner-link:hover {
  color: #fff3cd;
}

/* Navbar logo. base.html emits TWO static 80x80 PNGs (the solid
 * + transparent variants) inside a flex container; CSS toggles
 * which one is visible based on the active theme. The
 * ``.navbar-logo`` wrapper itself is just a flex container that
 * reserves the 40x40 display slot; the actual image elements are
 * absolutely positioned inside it.
 *
 * Why TWO static PNGs (not a single SVG with ``fill="currentColor"``,
 * not a single PNG with ``filter: invert(1)``):
 *
 *   1. The previous inline-SVG approach traced the INVERTED alpha
 *      mask of icon-navbar.png via potracer, so the rendered shape
 *      was the background of the source rather than the padlock
 *      shape itself. With ``fill="currentColor"`` painting the
 *      background, the padlock became a transparent hole. The
 *      visual was an "outline box with a padlock cutout" rather
 *      than a solid padlock icon, and iOS Safari rendered it
 *      incorrectly under theme toggle.
 *
 *   2. The earlier PNG + ``filter: invert(1)`` approach (commit
 *      history) has a long-standing iOS Safari rendering quirk:
 *      the filter sometimes fails to repaint on theme toggle,
 *      leaving the icon dark-on-dark in dark mode.
 *
 *   3. Two static images + CSS visibility is the boring, well-
 *      tested approach. No filter trick, no SVG trace, no JS
 *      image-swap. Works identically on every browser incl. iOS
 *      Safari and Android WebView.
 *
 * The two images are loaded eagerly (no ``loading="lazy"``) so the
 * swap is instantaneous when the user toggles theme. The 80x80 PNG
 * source is rendered at 40x40 CSS pixels; on 2x retina displays
 * the source matches the physical pixel grid so the render is
 * crisp without any upscaling.
 *
 * Visibility rules below cover both:
 *   - User-explicit toggle (``[data-bs-theme="dark"]`` or
 *     ``[data-bs-theme="light"]`` set by theme-toggle.js).
 *   - OS-level preference (``prefers-color-scheme: dark``) when the
 *     user is in auto mode (no ``data-bs-theme`` attribute).
 *
 * The :not([data-bs-theme="..."]) selector on the @media block
 * prevents a flash when the user toggles to light while the OS
 * reports dark (the explicit user choice wins). */
.navbar-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
}
.navbar-logo img {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 40px;
}
/* Default (auto mode + light OS, or explicit [data-bs-theme="light"]):
   show the SOLID variant (dark bg + cream padlock pops on light
   navbar bg). */
.navbar-logo-transparent { display: none; }
/* Explicit dark mode (user toggled to dark). */
[data-bs-theme="dark"] .navbar-logo-solid { display: none; }
[data-bs-theme="dark"] .navbar-logo-transparent { display: block; }
/* Auto mode + dark OS preference: show the TRANSPARENT variant
   (cream bg + navy padlock pops on dark navbar bg). The
   ``:not([data-bs-theme="light"])`` guard ensures the user's
   explicit light choice wins over the OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .navbar-logo-solid { display: none; }
  :root:not([data-bs-theme="light"]) .navbar-logo-transparent { display: block; }
}

/* Per-org visual identity on the /codes page. Each <section.org-block>
   gets a CSS custom property ``--org-accent`` (set inline from
   org_accent_color(slug) in app/ads/routes.py) that paints:
     - a 4px vertical bar on the section header (left edge)
     - a 4px left border on every card under that section
   This gives a user with multiple org memberships a stable visual cue
   so they can tell sites apart at a glance. The accent is deterministic
   per slug so it stays consistent across renders / page loads. */
.org-block-header {
  border-left: 4px solid var(--org-accent, transparent);
  padding-left: 0.75rem;
}

.org-block-accent {
  display: inline-block;
  width: 4px;
  height: 1.4em;
  background-color: var(--org-accent, transparent);
  border-radius: 2px;
}

.org-block-card {
  border-left: 4px solid var(--org-accent, transparent);
}