/* usl-theme.css — shared "tactical" theme for all USL Web pages.
   :root holds the dark (navy) palette. Light is the site default, applied
   via html[data-theme="light"] when preference is missing or light (see
   assets/usl-theme-toggle.js). Explicit dark removes that attribute and
   uses :root. Link this AFTER Bootstrap. Page-specific structural styles
   can stay. */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --usl-bg:          #1a1a2e;
  --usl-surface:     #16213e;
  --usl-surface-2:   #0f3460;
  --usl-surface-3:   #0a1730;
  --usl-accent:      #e94560;
  --usl-accent-2:    #ff6b81;
  --usl-text:        #e0e0e0;
  --usl-heading:     #ffffff;
  --usl-muted:       #8899aa;
  --usl-border:      rgba(255, 255, 255, 0.08);
  --usl-border-2:    #232b47;
  --usl-line:        #1c2950;
  --usl-chip-text:   #ccddee;
  --usl-nav-link:    #ccdddd;
  --usl-shadow:      rgba(0, 0, 0, 0.4);
  --usl-on-accent:   #ffffff;
  --usl-overlay:     rgba(6, 10, 20, 0.86);
  color-scheme: dark;
}

html[data-theme="light"] {
  --usl-bg:          #f3f5f9;
  --usl-surface:     #ffffff;
  --usl-surface-2:   #e8eef6;
  --usl-surface-3:   #dce4ef;
  --usl-accent:      #d12d4a;
  --usl-accent-2:    #e94560;
  --usl-text:        #243044;
  --usl-heading:     #122033;
  --usl-muted:       #5a6b7d;
  --usl-border:      rgba(18, 32, 51, 0.12);
  --usl-border-2:    #d3dce8;
  --usl-line:        #c5d0de;
  --usl-chip-text:   #334155;
  --usl-nav-link:    #243044;
  --usl-shadow:      rgba(18, 32, 51, 0.12);
  --usl-on-accent:   #ffffff;
  --usl-overlay:     rgba(18, 32, 51, 0.55);
  color-scheme: light;
}

html {
  background: var(--usl-bg);
  /* Unitless --usl-font-scale (head boot / usl-font-scale.js). 1 is the
     current size. rem, including Bootstrap 4, stays in proportion. */
  font-size: calc(var(--usl-font-scale, 1) * 100%);
}

body {
  background: var(--usl-bg) !important;
  color: var(--usl-text) !important;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--usl-heading); }
a { color: var(--usl-accent); }
a:hover { color: var(--usl-accent-2); text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--usl-surface); }
::-webkit-scrollbar-thumb { background: var(--usl-accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--usl-accent-2); }

/* page header / footer bands */
header, footer {
  background: var(--usl-surface) !important;
  color: var(--usl-heading);
}
header h1 span { color: var(--usl-accent); }

html[data-theme="light"] header.text-white,
html[data-theme="light"] footer.text-white {
  color: var(--usl-heading) !important;
}

/* cards / accordions */
.card { background: var(--usl-surface); border: 1px solid var(--usl-border); color: var(--usl-text); }
.card-header { background: var(--usl-surface-2) !important; color: var(--usl-heading) !important; border-bottom: 1px solid var(--usl-border); }
.card-body { background: var(--usl-surface) !important; color: var(--usl-text) !important; }
.card-header .btn-link { color: var(--usl-heading) !important; text-decoration: none; }
.card-header .btn-link:hover { color: var(--usl-accent) !important; }

/* buttons — coral primary */
.btn-dark, .btn-primary {
  background: var(--usl-accent) !important;
  border: none !important;
  color: var(--usl-on-accent) !important;
}
.btn-dark:hover, .btn-primary:hover { background: var(--usl-accent-2) !important; color: var(--usl-on-accent) !important; }
.btn-outline-light, .btn-outline-dark { border-color: var(--usl-accent) !important; color: var(--usl-accent) !important; }
.btn-outline-light:hover, .btn-outline-dark:hover { background: var(--usl-accent) !important; color: var(--usl-on-accent) !important; }

/* forms */
.form-control {
  background: var(--usl-surface-2);
  border: 1px solid var(--usl-border);
  color: var(--usl-heading);
}
.form-control:focus {
  background: var(--usl-surface-2);
  border-color: var(--usl-accent);
  color: var(--usl-heading);
  box-shadow: 0 0 0 0.15rem rgba(233, 69, 96, 0.25);
}
.form-control::placeholder { color: var(--usl-muted); }
label { color: var(--usl-text); }

/* list groups */
.list-group-item { background: var(--usl-surface); color: var(--usl-text); border: 1px solid var(--usl-border); }
.list-group-item a { color: var(--usl-text); }
.list-group-item a:hover { color: var(--usl-accent); }

/* generic light surfaces some pages use */
.description, .content-box { background: var(--usl-surface); color: var(--usl-text); border: 1px solid var(--usl-border); }
.bg-white, .bg-light { background: var(--usl-surface) !important; color: var(--usl-text); }
.text-muted { color: var(--usl-muted) !important; }
.table { color: var(--usl-text); }

/* footer social icons */
.social-icon { color: var(--usl-heading); margin: 0 8px; font-size: 1.1rem; }
.social-icon:hover { color: var(--usl-accent); }

/* ---- shared navbar (navbar.html loaded into #navbar-placeholder) ---- */
#navbar-placeholder .navbar {
  background: var(--usl-surface);
  padding: 6px 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px var(--usl-shadow);
  flex-wrap: wrap;
}
#navbar-placeholder .navbar > .container {
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 992px) {
  #navbar-placeholder .navbar,
  #navbar-placeholder .navbar > .container {
    flex-wrap: wrap;
  }
}
/* Above 100% the pill row no longer fits one line. Wrap instead of clipping.
   At 100% and below, the tuned nowrap row is unchanged. */
@media (min-width: 992px) {
  html[data-usl-font-up] #navbar-placeholder .navbar,
  html[data-usl-font-up] #navbar-placeholder .navbar > .container,
  html[data-usl-font-up] #navbar-placeholder .navbar-nav {
    flex-wrap: wrap;
  }
}
#navbar-placeholder .navbar-brand { color: var(--usl-heading); font-family: 'Rajdhani', sans-serif; font-weight: 700; }
#navbar-placeholder .navbar-brand img { height: 40px; width: auto; margin-right: 8px; }
@media (max-width: 575.98px) {
  #navbar-placeholder .navbar-brand-text { display: none; }
}
#navbar-placeholder .nav-link { color: var(--usl-nav-link) !important; white-space: nowrap; }
#navbar-placeholder .nav-link:hover { color: var(--usl-accent) !important; }
@media (min-width: 992px) {
  #navbar-placeholder .navbar-nav { align-items: center; flex-wrap: wrap; gap: 8px; }
}
#navbar-placeholder .dropdown-menu { background: var(--usl-surface-2); }
#navbar-placeholder .dropdown-item { color: var(--usl-nav-link); }
#navbar-placeholder .dropdown-item:hover { background: var(--usl-surface); color: var(--usl-heading); }

html[data-theme="light"] #navbar-placeholder .navbar-toggler {
  border-color: rgba(18, 32, 51, 0.25);
}
html[data-theme="light"] #navbar-placeholder .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(18, 32, 51, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Theme toggle — sun in dark (switch to light), moon in light (switch to dark). */
.usl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--usl-border);
  border-radius: 50%;
  background: transparent;
  color: var(--usl-heading);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.usl-theme-toggle:hover,
.usl-theme-toggle:focus {
  color: var(--usl-accent);
  border-color: var(--usl-accent);
  text-decoration: none;
  outline: 0;
}
.usl-theme-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--usl-accent);
}
/* A non-Default skin paints its own colors, so light/dark has nothing to change.
   Dim the control as soon as html/body[data-skin] is set (the head boot does
   that before paint) so a saved skin never flashes an enabled button. */
html[data-skin] button[data-usl-theme-toggle],
body[data-skin] button[data-usl-theme-toggle] {
  opacity: 0.45;
  cursor: not-allowed !important;
  position: relative;
}
html[data-skin] button[data-usl-theme-toggle]:hover,
html[data-skin] button[data-usl-theme-toggle]:focus,
body[data-skin] button[data-usl-theme-toggle]:hover,
body[data-skin] button[data-usl-theme-toggle]:focus {
  opacity: 0.45;
  cursor: not-allowed !important;
}
/* Skin stylesheets force a pointer cursor on every button. This wins that. */
body[data-skin][data-skin-cursors="on"] button[data-usl-theme-toggle],
body[data-skin][data-skin-cursors="on"] button[data-usl-theme-toggle]:hover,
body[data-skin][data-skin-cursors="on"] button[data-usl-theme-toggle]:focus {
  cursor: not-allowed !important;
}
/* The hint sits beside the button, not inside it. Opacity on the button would
   fade this panel too, which is what washed the type out over the wordmark. */
.usl-theme-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.usl-theme-toggle-tip {
  display: none;
}
body[data-skin] .usl-theme-toggle-wrap:hover .usl-theme-toggle-tip,
body[data-skin] .usl-theme-toggle-wrap:focus-within .usl-theme-toggle-tip {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 15.5rem;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1a2332 !important;
  color: #f4f7fb !important;
  opacity: 1 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  text-align: left;
  text-transform: none !important;
  text-shadow: none !important;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.usl-theme-toggle .usl-theme-icon-sun { display: inline-block !important; }
.usl-theme-toggle .usl-theme-icon-moon { display: none !important; }
html[data-theme="light"] .usl-theme-toggle .usl-theme-icon-sun,
.usl-theme-toggle[data-mode="light"] .usl-theme-icon-sun { display: none !important; }
html[data-theme="light"] .usl-theme-toggle .usl-theme-icon-moon,
.usl-theme-toggle[data-mode="light"] .usl-theme-icon-moon { display: inline-block !important; }

.usl-theme-toggle-compact {
  width: 34px;
  height: 34px;
  margin-left: 4px;
  margin-right: 6px;
}

/* Text size — capital A beside a smaller a, centered in the same circle as
   the other navbar icon buttons. The circle is rem so the glyphs stay inside
   it as the root scale changes. The popover below is px on purpose: it must
   not grow while the slider is dragging. */
#navbar-placeholder .nav-font-item {
  display: flex;
  align-items: center;
  padding-left: 4px;
}
#navbar-placeholder .usl-font-scale-btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 2.375rem;
  min-width: 2.375rem;
  max-width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 1px solid var(--usl-border);
  border-radius: 50%;
  background: transparent;
  color: var(--usl-heading);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
#navbar-placeholder .usl-font-scale-btn:hover,
#navbar-placeholder .usl-font-scale-btn:focus {
  color: var(--usl-accent);
  border-color: var(--usl-accent);
  outline: 0;
}
#navbar-placeholder .usl-font-scale-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--usl-accent);
}
#navbar-placeholder .usl-font-scale-a,
#navbar-placeholder .usl-font-scale-a-sm {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
}
#navbar-placeholder .usl-font-scale-a {
  font-size: 1rem;
  font-weight: 700;
}
#navbar-placeholder .usl-font-scale-a-sm {
  font-size: 0.72rem;
  font-weight: 600;
}
#navbar-placeholder .usl-font-scale-btn-compact {
  width: 2.125rem;
  min-width: 2.125rem;
  max-width: 2.125rem;
  height: 2.125rem;
  margin-left: 4px;
  margin-right: 6px;
  padding: 0;
}
@media (max-width: 399.98px) {
  #navbar-placeholder .usl-font-scale-btn-compact {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    height: 2rem;
    margin-right: 4px;
    padding: 0;
  }
}
/* Skins paint icon buttons as circles and sometimes zero out radius on
   buttons. Keep this one a circle, with the glyphs centered, on every skin. */
body[data-skin] #navbar-placeholder .usl-font-scale-btn {
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 2.375rem !important;
  min-width: 2.375rem !important;
  max-width: 2.375rem !important;
  height: 2.375rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body[data-skin] #navbar-placeholder .usl-font-scale-btn-compact {
  width: 2.125rem !important;
  min-width: 2.125rem !important;
  max-width: 2.125rem !important;
  height: 2.125rem !important;
  padding: 0 !important;
}
@media (max-width: 399.98px) {
  body[data-skin] #navbar-placeholder .usl-font-scale-btn-compact {
    width: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
  }
}
body[data-skin] #navbar-placeholder .usl-font-scale-a,
body[data-skin] #navbar-placeholder .usl-font-scale-a-sm {
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.usl-font-scale-pop {
  position: fixed;
  z-index: 1080;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 74px;
  margin: 0;
  padding: 10px 8px 8px;
  background: var(--usl-surface) !important;
  color: var(--usl-heading) !important;
  border: 1px solid var(--usl-border-2) !important;
  border-radius: 12px;
  box-shadow: 0 12px 28px var(--usl-shadow);
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}
.usl-font-scale-pop[hidden] { display: none !important; }
.usl-font-scale-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.usl-font-scale-mark {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--usl-heading) !important;
}
.usl-font-scale-mark-sm { font-size: 14px !important; }
.usl-font-scale-range {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  box-sizing: border-box;
  width: 22px;
  height: 136px;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 16px;
  accent-color: var(--usl-accent);
  cursor: pointer;
  touch-action: none;
}
.usl-font-scale-range:focus { outline: none; }
.usl-font-scale-range:focus-visible {
  outline: 2px solid var(--usl-accent);
  outline-offset: 2px;
}
.usl-font-scale-range::-webkit-slider-runnable-track {
  width: 4px;
  height: 136px;
  background: var(--usl-border-2);
  border: none;
  border-radius: 4px;
}
.usl-font-scale-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--usl-accent);
  border: 2px solid var(--usl-heading);
  cursor: pointer;
}
.usl-font-scale-range::-moz-range-track {
  width: 4px;
  height: 136px;
  background: var(--usl-border-2);
  border: none;
  border-radius: 4px;
}
.usl-font-scale-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--usl-accent);
  border: 2px solid var(--usl-heading);
  cursor: pointer;
}
.usl-font-scale-readout {
  margin: 0;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--usl-muted) !important;
  font-variant-numeric: tabular-nums;
}
.usl-font-scale-reset {
  appearance: none;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid var(--usl-border-2) !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--usl-heading) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  cursor: pointer;
}
.usl-font-scale-reset:hover,
.usl-font-scale-reset:focus {
  border-color: var(--usl-accent) !important;
  color: var(--usl-accent) !important;
  outline: 0;
}
#navbar-placeholder .nav-theme-item {
  display: flex;
  align-items: center;
  padding-left: 8px;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-theme-item {
    padding: 8px 0 12px;
  }
  #navbar-placeholder .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    order: 99;
  }
}

/* Store — teal/slate pill, not the pink Suggest treatment. Same muted teal
   language as the Store Buy button so the nav destination and the catalog
   feel like one thing. */
#navbar-placeholder .btn-store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e4a58;
  color: #e7f6f8 !important;
  border: 1.5px solid #5ec4d4;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 27px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
#navbar-placeholder .btn-store:hover,
#navbar-placeholder .btn-store:focus {
  background: #245a6a;
  color: #fff !important;
  border-color: #7ad7e4;
  text-decoration: none;
  transform: translateY(-1px);
}
#navbar-placeholder .btn-store.active {
  background: #245a6a;
  border-color: #7ad7e4;
  color: #fff !important;
}
html[data-theme="light"] #navbar-placeholder .btn-store {
  background: #e7f6f8;
  color: #1e4a58 !important;
  border-color: #3aa8b8;
}
html[data-theme="light"] #navbar-placeholder .btn-store:hover,
html[data-theme="light"] #navbar-placeholder .btn-store:focus,
html[data-theme="light"] #navbar-placeholder .btn-store.active {
  background: #d2eef2;
  color: #163844 !important;
  border-color: #2b8fa0;
}
#navbar-placeholder .btn-store-nav {
  padding: 6px 16px;
  font-size: 0.92rem;
}
#navbar-placeholder .btn-store-compact {
  padding: 5px 12px;
  font-size: 0.85rem;
  margin-left: auto;
  margin-right: 6px;
}
#navbar-placeholder .nav-store-item {
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-store-item {
    padding: 8px 0 4px;
  }
}

/* Reader, News, and Videos — ghost pills like Contact, cluster-only (no compact
   twin next to Store). Outline only: not the Store teal fill or the Suggest coral. */
#navbar-placeholder .btn-reader,
#navbar-placeholder .btn-news,
#navbar-placeholder .btn-topics,
#navbar-placeholder .btn-library,
#navbar-placeholder .btn-videos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--usl-heading) !important;
  border: 1.5px solid var(--usl-border-2);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 27px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
#navbar-placeholder .btn-reader:hover,
#navbar-placeholder .btn-reader:focus,
#navbar-placeholder .btn-news:hover,
#navbar-placeholder .btn-news:focus,
#navbar-placeholder .btn-topics:hover,
#navbar-placeholder .btn-library:hover,
#navbar-placeholder .btn-topics:focus,
#navbar-placeholder .btn-library:focus,
#navbar-placeholder .btn-videos:hover,
#navbar-placeholder .btn-videos:focus {
  background: var(--usl-surface-2);
  color: var(--usl-heading) !important;
  border-color: var(--usl-muted);
  text-decoration: none;
  transform: translateY(-1px);
}
#navbar-placeholder .btn-reader.active,
#navbar-placeholder .btn-news.active,
#navbar-placeholder .btn-topics.active,
#navbar-placeholder .btn-library.active,
#navbar-placeholder .btn-videos.active {
  border-color: #5ec4d4;
  color: var(--usl-heading) !important;
}
#navbar-placeholder .btn-reader-nav,
#navbar-placeholder .btn-news-nav,
#navbar-placeholder .btn-topics-nav,
#navbar-placeholder .btn-library-nav,
#navbar-placeholder .btn-videos-nav {
  padding: 6px 16px;
  font-size: 0.92rem;
}
#navbar-placeholder .nav-reader-item,
#navbar-placeholder .nav-news-item,
#navbar-placeholder .nav-topics-item,
#navbar-placeholder .nav-library-item,
#navbar-placeholder .nav-videos-item {
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-reader-item,
  #navbar-placeholder .nav-news-item,
  #navbar-placeholder .nav-topics-item,
  #navbar-placeholder .nav-library-item,
  #navbar-placeholder .nav-videos-item {
    padding: 8px 0 4px;
  }
}

/* Contact Us — same pill box as Store/Suggest, outline/ghost so it does not
   compete with the two filled CTAs. */
#navbar-placeholder .btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--usl-heading) !important;
  border: 1.5px solid var(--usl-border-2);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 27px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
#navbar-placeholder .btn-contact:hover,
#navbar-placeholder .btn-contact:focus {
  background: var(--usl-surface-2);
  color: var(--usl-heading) !important;
  border-color: var(--usl-muted);
  text-decoration: none;
  transform: translateY(-1px);
}
html[data-theme="light"] #navbar-placeholder .btn-contact:hover,
html[data-theme="light"] #navbar-placeholder .btn-contact:focus {
  border-color: #8aa0b5;
}
#navbar-placeholder .btn-contact-nav {
  padding: 6px 16px;
  font-size: 0.92rem;
}
#navbar-placeholder .btn-contact-compact {
  padding: 5px 12px;
  font-size: 0.85rem;
  margin-left: 0;
  margin-right: 6px;
}
#navbar-placeholder .nav-contact-item {
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-contact-item {
    padding: 8px 0 4px;
  }
}

/* Suggest a Site — pink pill immediately after Contact Us (shared public pages).
   1.5px border keeps the box the same height as Store and Contact. */
#navbar-placeholder .btn-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--usl-accent);
  color: var(--usl-on-accent) !important;
  border: 1.5px solid var(--usl-accent);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 27px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(233, 69, 96, .3);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
#navbar-placeholder .btn-suggest:hover,
#navbar-placeholder .btn-suggest:focus {
  background: var(--usl-accent-2);
  border-color: var(--usl-accent-2);
  color: var(--usl-on-accent) !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(233, 69, 96, .45);
}
#navbar-placeholder .btn-suggest-nav {
  padding: 6px 16px;
  font-size: 0.92rem;
}
#navbar-placeholder .btn-suggest-compact {
  padding: 5px 12px;
  font-size: 0.85rem;
  margin-left: 0;
  margin-right: 6px;
}
#navbar-placeholder .nav-suggest-item {
  display: flex;
  align-items: center;
  padding-left: 0;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-suggest-item {
    padding: 8px 0 12px;
  }
}

/* Auth — ghost pills, hamburger/cluster only (no compact twin next to Store). */
#navbar-placeholder .btn-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--usl-heading) !important;
  border: 1.5px solid transparent;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 27px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: none;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
#navbar-placeholder .btn-auth:hover,
#navbar-placeholder .btn-auth:focus {
  background: var(--usl-surface-2);
  border-color: var(--usl-border-2);
  color: var(--usl-heading) !important;
  text-decoration: none;
}
#navbar-placeholder .btn-auth-nav {
  padding: 6px 14px;
  font-size: 0.92rem;
}
#navbar-placeholder .nav-auth-item {
  display: flex;
  align-items: center;
}
#navbar-placeholder .nav-auth-item[hidden] {
  display: none !important;
}
/* Signed-in login (email) on the Account control — muted, ellipsis on overflow.
   inline-block (not flex) so text-overflow can actually clip the text node. */
#navbar-placeholder a[data-usl-auth-email] {
  display: inline-block;
  flex-shrink: 1;
  min-width: 0;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--usl-muted) !important;
}
#navbar-placeholder a[data-usl-auth-email]:hover,
#navbar-placeholder a[data-usl-auth-email]:focus {
  color: var(--usl-heading) !important;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-auth-item {
    padding: 4px 0;
    min-width: 0;
    max-width: 100%;
  }
  #navbar-placeholder a[data-usl-auth-email] {
    display: block;
    max-width: 100%;
  }
}

/* Saved bookmark — homepage-only compact control. Other pages hide it.
   Icon language matches the theme toggle; green matches the directory Saved filter. */
#navbar-placeholder .usl-saved-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--usl-border);
  border-radius: 50%;
  background: transparent;
  color: #22c55e;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
#navbar-placeholder .usl-saved-toggle:hover,
#navbar-placeholder .usl-saved-toggle:focus {
  color: #16a34a;
  border-color: #22c55e;
  text-decoration: none;
  outline: 0;
}
#navbar-placeholder .usl-saved-toggle:focus-visible {
  box-shadow: 0 0 0 2px #22c55e;
}
#navbar-placeholder .usl-saved-toggle.has-saved {
  border-color: #22c55e;
}
#navbar-placeholder .usl-saved-toggle.active {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
#navbar-placeholder .usl-saved-toggle.active:hover,
#navbar-placeholder .usl-saved-toggle.active:focus {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
#navbar-placeholder .usl-saved-toggle .saved-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #22c55e;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}
#navbar-placeholder .usl-saved-toggle.active .saved-count {
  background: #14532d;
  color: #fff;
}
#navbar-placeholder .usl-saved-toggle-compact {
  width: 34px;
  height: 34px;
  margin-left: 0;
  margin-right: 6px;
}
#navbar-placeholder .nav-saved-item {
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  #navbar-placeholder .nav-saved-item {
    padding: 8px 0 4px;
  }
}
/* Saved filter only exists on the homepage directory. */
body:not(.usl-home) #navbar-placeholder .usl-saved-toggle-compact,
body:not(.usl-home) #navbar-placeholder .nav-saved-item {
  display: none !important;
}

@media (max-width: 519.98px) {
  /* Phones: Contact stays in the hamburger so Store/Suggest/Saved/theme fit. */
  #navbar-placeholder .btn-contact-compact {
    display: none !important;
  }
}
@media (max-width: 399.98px) {
  #navbar-placeholder .btn-store-compact,
  #navbar-placeholder .btn-suggest-compact {
    padding: 4px 8px;
    font-size: 0.78rem;
    gap: 4px;
    margin-right: 4px;
  }
  #navbar-placeholder .usl-saved-toggle-compact,
  #navbar-placeholder .usl-theme-toggle-compact {
    width: 32px;
    height: 32px;
    margin-right: 4px;
  }
  #navbar-placeholder .navbar-toggler {
    padding: 4px 8px;
  }
}

/* Shared CSS wordmark (home, store, reader, videos, auth): title, cyan→pink
   rule, site logo under the title. Lives here so the lockup cannot drift
   between pages. The emblem is a self-contained mark (dark field, transparent
   corners), so the same asset stays readable in light and dark. */
.home-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 16px 0;
  background: var(--usl-bg);
}

.home-wordmark-link {
  display: flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.home-wordmark-link:hover,
.home-wordmark-link:focus {
  color: inherit;
  text-decoration: none;
}

.home-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  max-width: 100%;
  text-align: center;
}

.home-wordmark-title {
  display: block;
  margin: 0;
  color: var(--usl-heading);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 4vw + 0.45rem, 3.05rem);
  letter-spacing: .02em;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(180, 220, 255, .35);
}
html[data-usl-font-up] .home-wordmark-title {
  white-space: normal;
}

.home-wordmark-rule {
  display: block;
  width: 100%;
  height: 3px;
  margin: 3px 0 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00e5ff 0%, #ff3cac 100%);
  box-shadow:
    0 0 8px rgba(0, 229, 255, .55),
    0 0 10px rgba(255, 60, 172, .4);
}

.home-wordmark-logo {
  display: block;
  width: auto;
  height: clamp(4.24rem, 3.84vw + 1.76rem, 5.36rem);
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .home-banner {
    padding: 2px 12px 0;
  }

  .home-wordmark-title {
    white-space: normal;
    padding: 0 4px;
  }

  .home-wordmark-rule {
    width: min(100%, 22rem);
    margin: 2px auto 2px;
  }

  .home-wordmark-logo {
    height: 4rem;
  }
}

html[data-theme="light"] .home-wordmark-title {
  color: var(--usl-heading);
  text-shadow: none;
}

/* Situation strip — homepage only, under the public nav.
   Own surface (not the navbar), hairlines, and a level accent — not an alert,
   not a Store CTA, not a DEFCON board. */
.usl-situation {
  --usl-situation-accent: #3d8a6a;
  background: var(--usl-surface-2);
  border-top: 1px solid var(--usl-border);
  border-bottom: 1px solid var(--usl-border);
  border-left: 3px solid var(--usl-situation-accent);
  color: var(--usl-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  line-height: 1.4;
}
.usl-situation[hidden] { display: none !important; }
.usl-situation--calm { --usl-situation-accent: #3d8a6a; }
.usl-situation--elevated { --usl-situation-accent: #b8942e; }
.usl-situation--high { --usl-situation-accent: #c47a40; }
.usl-situation--critical { --usl-situation-accent: #9a5555; }
.usl-situation-bar {
  cursor: pointer;
  padding: 8px 16px;
  color: var(--usl-text);
}
.usl-situation-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.usl-situation-kicker {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--usl-muted);
}
.usl-situation-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.usl-situation-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.usl-situation--calm .usl-situation-level {
  color: #3d8a6a;
  background: rgba(78, 161, 114, 0.12);
  border-color: rgba(78, 161, 114, 0.28);
}
.usl-situation--elevated .usl-situation-level {
  color: #9a7a2a;
  background: rgba(201, 162, 64, 0.14);
  border-color: rgba(201, 162, 64, 0.3);
}
.usl-situation--high .usl-situation-level {
  color: #b56a38;
  background: rgba(196, 118, 64, 0.16);
  border-color: rgba(196, 118, 64, 0.38);
}
.usl-situation--critical .usl-situation-level {
  color: #9a5555;
  background: rgba(154, 80, 80, 0.12);
  border-color: rgba(154, 80, 80, 0.3);
}
.usl-situation-headline {
  font-weight: 500;
  color: var(--usl-heading);
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-usl-font-up] .usl-situation-headline {
  flex-basis: 100%;
}
.usl-situation-asof {
  color: var(--usl-muted);
  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
}
.usl-situation-regions {
  color: var(--usl-muted);
  font-size: 0.8rem;
}
.usl-situation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid var(--usl-border-2);
  border-radius: 999px;
  background: var(--usl-surface);
  color: var(--usl-heading);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  flex: 0 0 auto;
}
.usl-situation-toggle:hover,
.usl-situation-toggle:focus {
  border-color: var(--usl-muted);
  outline: 0;
}
.usl-situation-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--usl-situation-accent);
}
.usl-situation-toggle-label { white-space: nowrap; }
.usl-situation-chevron {
  width: 0.42em;
  height: 0.42em;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.usl-situation--open .usl-situation-chevron {
  transform: rotate(225deg);
  margin-top: 3px;
}
.usl-situation-panel {
  padding: 0 16px 12px;
  max-width: 860px;
}
.usl-situation-panel[hidden] { display: none !important; }
.usl-situation-copy {
  margin: 0;
  color: var(--usl-text);
  font-size: 0.9rem;
}
.usl-situation-copy + .usl-situation-copy {
  margin-top: 0.85em;
}
.usl-situation-panel > .usl-situation-copy:last-of-type {
  margin-bottom: 10px;
}
.usl-situation-sources-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--usl-muted);
  margin-bottom: 4px;
}
.usl-situation-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
}
.usl-situation-sources li { margin: 0 0 2px; }
.usl-situation-sources a { color: var(--usl-muted); text-decoration: underline; }
.usl-situation-sources a:hover { color: var(--usl-heading); }
.usl-situation-archive {
  color: var(--usl-muted);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.usl-situation-archive:hover,
.usl-situation-archive:focus { color: var(--usl-heading); }
@media (max-width: 575.98px) {
  .usl-situation-bar { padding: 8px 12px; }
  .usl-situation-toggle {
    padding: 7px 12px;
    min-height: 32px;
  }
}

/* Skin picker — local choice only (assets/usl-skin.js). The palette button
   stays a 38px circle so the homepage search keeps its width. The swatch
   panel is built from the SKINS registry and appended to <body>. Its colors
   are neutral on purpose: body[data-skin] sets color with !important, so
   every label here uses an explicit dark color with !important too. */
#navbar-placeholder .usl-skin-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 6px 0 0;
}
#navbar-placeholder .nav-skin-item {
  align-items: center;
}
#navbar-placeholder .usl-skin-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  background-image: none;
  color: var(--usl-heading);
  border: 1px solid var(--usl-border-2);
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
#navbar-placeholder .usl-skin-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#navbar-placeholder .usl-skin-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--usl-accent);
}
#navbar-placeholder .usl-skin-picker-compact .usl-skin-btn {
  width: 34px;
  height: 34px;
  margin-left: 4px;
  margin-right: 6px;
  font-size: 0.85rem;
}
/* Keep the palette button above the scrim so a second click closes the panel. */
#navbar-placeholder .navbar:has(.usl-skin-picker.is-open) {
  z-index: 1058;
}
.usl-skin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: transparent;
}
.usl-skin-backdrop[hidden],
.usl-skin-panel[hidden] {
  display: none !important;
}
@media (max-width: 991.98px) {
  .usl-skin-backdrop { background: rgba(10, 16, 28, 0.45); }
}
.usl-skin-panel {
  position: fixed;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  width: 392px;
  margin: 0;
  padding: 10px 10px 8px;
  overflow: hidden;
  background: #ffffff !important;
  color: #1a2332 !important;
  border: 1px solid #d5dbe3;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.28);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif !important;
}
.usl-skin-handle {
  display: none;
  width: 36px;
  height: 4px;
  margin: 2px auto 8px;
  border-radius: 4px;
  background: #c5ced8 !important;
}
.usl-skin-panel-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  max-height: min(64vh, 560px);
  padding: 0 2px 6px;
}
/* Skin sheets restyle every h2. These selectors outrank
   body[data-skin] h2 so the headings stay dark on the white panel. */
body .usl-skin-panel h2.usl-skin-heading {
  margin: 10px 4px 6px;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  color: #3a4658 !important;
  background: transparent !important;
}
.usl-skin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.usl-skin-tile {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 4px;
  background: transparent !important;
  color: #1a2332 !important;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}
.usl-skin-tile:hover,
.usl-skin-tile:focus {
  background: #eef2f6 !important;
  outline: none;
}
.usl-skin-tile:focus-visible {
  outline: 2px solid #0b57d0;
  outline-offset: 1px;
}
.usl-skin-swatch {
  position: relative;
  display: block;
  height: 46px;
  padding: 8px 8px 0;
  border-radius: 8px;
  background: var(--swatch-page) !important;
  box-shadow: inset 0 0 0 1px rgba(18, 32, 51, 0.2);
}
.usl-skin-swatch-card {
  display: block;
  height: 26px;
  border-radius: 4px;
  background: var(--swatch-card) !important;
  border-top: 4px solid var(--swatch-accent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.usl-skin-tile[aria-pressed="true"] .usl-skin-swatch {
  box-shadow:
    inset 0 0 0 1px rgba(18, 32, 51, 0.2),
    0 0 0 2px #ffffff,
    0 0 0 4px #0b57d0;
}
.usl-skin-tile[aria-pressed="true"] .usl-skin-swatch::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #1a2332;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2 6.4 11l6.1-6.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  box-shadow: 0 0 0 2px #ffffff;
}
.usl-skin-tile-name {
  display: block;
  margin-top: 4px;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1a2332 !important;
  white-space: normal;
  overflow-wrap: break-word;
}
@media (max-width: 991.98px) {
  .usl-skin-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: min(78vh, 720px);
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .usl-skin-panel-scroll {
    max-height: calc(78vh - 28px);
    overflow: auto;
  }
  .usl-skin-handle { display: block; }
}

/* Floating "Update available" control. rem so the text-size slider scales it.
   Default (no skin) uses the accent button in light and dark. A skin paints
   it with that skin's surface, text, and border. */
.usl-update-btn {
  position: fixed;
  z-index: 1040;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--usl-accent);
  color: var(--usl-on-accent);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 0.4rem 1.1rem var(--usl-shadow);
  cursor: pointer;
}
.usl-update-btn[hidden] {
  display: none !important;
}
.usl-update-btn:hover,
.usl-update-btn:focus {
  background: var(--usl-accent-2);
  color: var(--usl-on-accent);
  text-decoration: none;
}
.usl-update-btn:focus {
  outline: 0;
}
.usl-update-btn:focus-visible {
  outline: 2px solid var(--usl-heading);
  outline-offset: 3px;
}
body[data-skin] .usl-update-btn {
  background: var(--skin-surface-strong, var(--skin-surface-solid, var(--skin-surface, var(--usl-surface))));
  color: var(--skin-text, var(--usl-heading));
  border-color: var(--skin-border, var(--usl-border-2));
  border-radius: var(--skin-radius-card, 999px);
  font-family: var(--skin-font-display, 'Rajdhani', sans-serif);
  box-shadow: var(--skin-shadow, 0 0.4rem 1.1rem var(--usl-shadow));
}
body[data-skin] .usl-update-btn:hover,
body[data-skin] .usl-update-btn:focus {
  background: var(--skin-surface-strong, var(--skin-surface-solid, var(--skin-surface, var(--usl-surface))));
  color: var(--skin-text, var(--usl-heading));
  filter: brightness(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .usl-update-btn {
    transition: none;
  }
}

/* Shared theme applied across all navbar-linked pages (rollout 2026-07-05; light 2026-09). */