/* ============================================================
   Forecast Face-Off — styling aligned with daa-labs.com
   Tokens, fonts, theme system match assets/css/styles.css and
   assets/js/theme.js in the daa-labs repo (Amanda Alvarez).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Space+Mono:wght@400;700&display=swap');

/* ── Brand tokens (mirror /assets/css/styles.css) ── */
:root {
  --color-ink:        #0F1923;
  --color-slate:      #1E2D3D;
  --color-steel:      #2E4A63;
  --color-fog:        #F0EDE8;
  --color-bone:       #F8F5F0;
  --color-labs-blue:  #1A5BAB;
  --color-labs-sky:   #3A9BD5;
  --color-citrus:     #E8B84B;
  --color-amber:      #C97D2E;
  --color-mint:       #2BB88A;
  --color-coral:      #C2766F;

  --font-sans:  'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'Space Mono', 'Courier New', monospace;

  /* Resolved theme tokens — defaults are dark */
  --bg:          var(--color-ink);
  --surface:     var(--color-slate);
  --surface-2:   var(--color-steel);
  --border:      rgba(58, 155, 213, 0.18);
  --border-strong: rgba(58, 155, 213, 0.28);
  --text:        var(--color-bone);
  --text-muted:  rgba(248, 245, 240, 0.55);
  --text-faint:  rgba(248, 245, 240, 0.32);
  --primary:     var(--color-labs-sky);     /* sky for dark */
  --primary-deep:var(--color-labs-blue);
  --accent:      var(--color-citrus);
  --shadow:      0 8px 32px rgba(58, 155, 213, 0.06);
}

[data-theme="light"],
[data-bs-theme="light"] {
  --bg:          var(--color-bone);
  --surface:     #ffffff;
  --surface-2:   var(--color-fog);
  --border:      rgba(26, 91, 171, 0.18);
  --border-strong: rgba(26, 91, 171, 0.32);
  --text:        var(--color-ink);
  --text-muted:  rgba(15, 25, 35, 0.55);
  --text-faint:  rgba(15, 25, 35, 0.30);
  --primary:     var(--color-labs-blue);    /* blue for light */
  --primary-deep:var(--color-labs-blue);
  --accent:      var(--color-amber);
  --shadow:      0 6px 20px rgba(15, 25, 35, 0.06);
}

/* ── Page chrome ────────────────────────────────────────────── */
html, body { background: var(--bg); }
body {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
/* Subtle grid behind everything (matches landing page) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(58,155,213,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,155,213,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-theme="light"] body::before,
[data-bs-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(26,91,171,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,91,171,0.05) 1px, transparent 1px);
}
.bslib-page-fill, .bslib-page-sidebar, .container-fluid { position: relative; z-index: 1; }

/* ── Navbar / title ─────────────────────────────────────────── */
.navbar, .bslib-page-navbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.5rem !important;
}
.navbar .navbar-brand,
.bslib-page-navbar .navbar-brand,
.bslib-page-title {
  color: var(--text) !important;
  font-family: var(--font-sans);
  font-weight: 600;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}
.app-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.wordmark-daa {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.wordmark-labs {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--primary);
  text-transform: uppercase;
}
.title-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border-strong);
}
.app-name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 400;
  color: var(--text);
}
.app-name em { font-style: italic; }
.app-subtitle {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: center;
}
.spacer { flex: 1; }

/* ── Theme toggle (matches landing-page .home-theme-toggle) ── */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
#theme-toggle:hover {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
#theme-toggle svg { width: 1rem; height: 1rem; }
[data-theme="dark"]  #theme-toggle .light-mode-icon,
[data-bs-theme="dark"] #theme-toggle .light-mode-icon { display: none; }
[data-theme="dark"]  #theme-toggle .dark-mode-icon,
[data-bs-theme="dark"] #theme-toggle .dark-mode-icon { display: inline-flex; }
[data-theme="light"] #theme-toggle .dark-mode-icon,
[data-bs-theme="light"] #theme-toggle .dark-mode-icon { display: none; }
[data-theme="light"] #theme-toggle .light-mode-icon,
[data-bs-theme="light"] #theme-toggle .light-mode-icon { display: inline-flex; }

/* ── Sidebar ────────────────────────────────────────────────── */
.bslib-sidebar-layout > .sidebar,
.bslib-sidebar-layout .sidebar-content {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  color: var(--text);
}
.bslib-sidebar-layout .sidebar-content { padding: 1.1rem 1rem !important; }
.sidebar h6 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 1.1rem 0 0.55rem;
}
.sidebar h6:first-of-type { margin-top: 0.25rem; }
.sidebar hr {
  border-color: var(--border);
  opacity: 1;
  margin: 0.9rem 0 0.6rem;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--primary);
  opacity: 0.5;
}
.card-header {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary) !important;
  padding: 0.85rem 1.1rem !important;
}

/* ── Form controls ──────────────────────────────────────────── */
.form-control,
.form-select,
input[type="number"],
input[type="text"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 0.5rem !important;
  font-family: var(--font-sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus,
input[type="number"]:focus,
input[type="text"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent) !important;
  outline: none;
}
.form-label,
label.control-label,
.shiny-input-container > label {
  color: var(--text);
  font-weight: 500;
  font-size: 0.85rem;
}
.shiny-input-container .help-block,
.form-text {
  color: var(--text-muted) !important;
  font-size: 0.78rem;
}

/* ── Switches ───────────────────────────────────────────────── */
.form-switch .form-check-input {
  width: 2.4em;
  height: 1.25em;
  background-color: var(--surface-2);
  border-color: var(--border-strong);
  cursor: pointer;
}
.form-switch .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}
.form-check-label {
  color: var(--text);
  font-size: 0.88rem;
  user-select: none;
}

/* ── Sliders (ionRangeSlider) ───────────────────────────────── */
.irs--shiny .irs-bar,
.irs--shiny .irs-handle {
  background: var(--primary);
  border-color: var(--primary);
}
.irs--shiny .irs-handle { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.irs--shiny .irs-line   { background: var(--surface-2); border-color: var(--border); }
.irs--shiny .irs-min, .irs--shiny .irs-max,
.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
  background: var(--surface-2);
  color: var(--text);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.irs--shiny .irs-grid-text { color: var(--text-faint); font-family: var(--font-mono); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  border-radius: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  transition: all .15s ease;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--border-strong);
  background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: var(--primary);
  color: var(--text);
}
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  font-family: var(--font-mono);
}

/* ── Group inputs grid ──────────────────────────────────────── */
.groups-toolbar {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 1rem;
}
.groups-count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
  text-transform: uppercase;
}
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
}
.group-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.group-cell::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  opacity: 0.5;
  transition: opacity .15s ease;
}
.group-cell:focus-within { border-color: var(--primary); transform: translateY(-1px); }
.group-cell:focus-within::before { opacity: 1; }
.group-cell .group-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 0.4rem;
}
.group-cell .group-color {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.group-cell .form-control {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text) !important;
  height: auto !important;
}
.group-cell .form-control:focus { box-shadow: none !important; }

/* ── Section help text inside cards ─────────────────────────── */
.section-help {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.section-help strong { color: var(--text); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────── */
.app-footer {
  margin-top: 2rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Spinner color (shinycssloaders) ────────────────────────── */
.shiny-spinner-output-container .load-container .object {
  background-color: var(--primary) !important;
}

/* ── Plotly modebar ─────────────────────────────────────────── */
.modebar { background: transparent !important; }
.modebar-btn path { fill: var(--text-faint) !important; }
.modebar-btn:hover path { fill: var(--primary) !important; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .group-cell, .btn, #theme-toggle { transition: none !important; }
  .group-cell:focus-within { transform: none; }
}

/* ============================================================
   Bedford Round 1 Explorer additions (same tokens as above)
   ============================================================ */
.navbar-nav .nav-link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted) !important; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--primary) !important; }
.bslib-page-navbar > .navbar .navbar-brand { flex: 1; }
.card-body, .card .card-body { color: var(--text); }
.xstats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0.3rem 0 0.6rem; }
.xstat { flex: 1 1 8.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.55rem 0.8rem; position: relative; overflow: hidden; }
.xstat::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--primary); opacity: 0.7; }
.xstat-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.xstat-value { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.15; color: var(--text); }
.xstat-sub { font-size: 0.72rem; color: var(--text-muted); }
.xtitle { font-family: var(--font-serif); font-size: 1.45rem; line-height: 1.15; color: var(--text); margin: 0.4rem 0 0; }
.xsub { font-size: 0.85rem; color: var(--text-muted); margin: 0.15rem 0 0.6rem; }
.xnote { font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 0.35rem 1.1rem 0.7rem; }
.selectize-input, .selectize-dropdown { background: var(--surface-2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 0.5rem !important; }
.selectize-dropdown .option:hover, .selectize-dropdown .active { background: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: var(--text) !important; }
.selectize-input .item { background: color-mix(in srgb, var(--primary) 22%, transparent) !important; color: var(--text) !important; border-radius: 4px; }
.form-check-input { background-color: var(--surface-2); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
/* DataTables on the theme */
.dataTables_wrapper, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--text-muted); font-size: 0.8rem; }
table.dataTable { color: var(--text); font-size: 0.82rem; }
table.dataTable thead th { border-bottom: 1px solid var(--border-strong) !important; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
table.dataTable tbody tr { background: transparent !important; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: color-mix(in srgb, var(--primary) 5%, transparent) !important; }
table.dataTable tbody td { border-bottom: 1px solid var(--border) !important; }
table.dataTable tbody tr:hover { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: color-mix(in srgb, var(--primary) 18%, transparent) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
/* Leaflet */
.leaflet-container { background: var(--surface-2); border-radius: 0 0 0.75rem 0.75rem; }
.leaflet-control-attribution { font-family: var(--font-mono); font-size: 9px; background: rgba(255,255,255,0.75) !important; }
.leaflet-bar a { color: #0F1923; }
/* Slider label chip */
.irs--shiny .irs-single { font-weight: 600; }

/* ── Plain HTML tables ── */
.xtable-wrap { overflow-x: auto; padding: 0.4rem 1rem 0.8rem; }
.xtable { width: 100%; border-collapse: collapse; font-size: 0.8rem; color: var(--text); }
.xtable th { text-align: left; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.xtable th.num, .xtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xtable td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.xtable tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.xtable tbody tr:hover td { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ── Swipe comparison labels and divider (leaflet-side-by-side) ── */
.sbs-label { position: absolute; top: 12px; z-index: 1000; background: rgba(15,25,35,0.78); color: #F8F5F0; padding: 4px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.sbs-label-left { left: 12px; }
.sbs-label-right { right: 12px; }
.leaflet-sbs-divider { background-color: #F8F5F0; box-shadow: 0 0 6px rgba(0,0,0,0.5); }
.sbs-tooltip { font-family: var(--font-sans); font-size: 12px; }

/* ---- Comments tab ---- */
.cmt-form { padding: 0.2rem 1.1rem 1rem; }
.cmt-form textarea.form-control { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 0.5rem; resize: vertical; }
.cmt-form .form-control { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.cmt-honey { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.cmt-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; }
.cmt-ok { color: var(--accent, #2E9E6B); font-weight: 600; }
.cmt-fail { color: #C2766F; font-weight: 600; }
.cmt-warn { margin: 0.4rem 1.1rem 0.9rem; padding: 0.6rem 0.8rem; border: 1px solid #C2766F; border-radius: 0.5rem; color: #C2766F; font-weight: 600; }
.cmt-help { padding: 0.2rem 1.1rem 0.6rem; font-size: 0.9rem; color: var(--text); }
.cmt-help p { margin-bottom: 0.7rem; }
.xlink { font-weight: 600; text-decoration: none; }
.cmt-export { padding: 0.2rem 1.1rem 0.8rem; font-size: 0.85rem; color: var(--text-muted); word-break: break-all; }
.cmt-export code { color: var(--text); }
.cmt-del { color: #C2766F; font-weight: 600; text-decoration: none; }

/* ---- Scenarios map: viewport-tall, full content width ---- */
.map-card { height: calc(100vh - 150px); min-height: 620px; }
.map-card .card-body { padding: 0; }
.map-card.bslib-full-screen { height: auto; }

/* ---- Theme toggle lives at the far right of the navbar ---- */
.navbar-nav .nav-item:has(#theme-toggle) { display: flex; align-items: center; margin-left: 0.9rem; }
.navbar-nav .nav-item:has(.app-subtitle) { display: flex; align-items: center; }
.navbar .navbar-nav { flex-grow: 1; }
.navbar .navbar-nav { justify-content: flex-end; }
@media (max-width: 1500px) { .app-title .app-subtitle { display: none; } }

/* ---- Accessibility: contrast, focus, structure ---- */
:root { --text-muted: rgba(248, 245, 240, 0.70); --text-faint: rgba(248, 245, 240, 0.55); }
[data-theme="light"], [data-bs-theme="light"] { --text-muted: rgba(15, 25, 35, 0.70); --text-faint: rgba(15, 25, 35, 0.55); }
.app-footer { color: var(--text-muted); }
[data-theme="light"] .navbar-nav .nav-link.active, [data-bs-theme="light"] .navbar-nav .nav-link.active,
[data-theme="light"] .navbar-nav .nav-link:hover, [data-bs-theme="light"] .navbar-nav .nav-link:hover { color: var(--color-labs-blue) !important; }
.xsub-inline { color: var(--text-muted); font-weight: 400; }
h1.app-name { margin: 0; line-height: inherit; }
:focus-visible { outline: 3px solid var(--color-citrus) !important; outline-offset: 2px; }
[data-theme="light"] :focus-visible, [data-bs-theme="light"] :focus-visible { outline-color: var(--color-labs-blue) !important; }
.leaflet-container:focus-visible, .xtable-wrap:focus-visible { outline-offset: -3px; }
.skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 2000; background: var(--surface); color: var(--text); padding: 0.5rem 0.9rem; border: 1px solid var(--primary); border-radius: 0.4rem; font-weight: 600; }
.skip-link:focus { left: 0.75rem; }
details.xdata { margin: 0.3rem 1.1rem 0; font-size: 0.85rem; }
details.xdata > summary { cursor: pointer; color: var(--primary); font-weight: 500; padding: 0.2rem 0; }
details.xdata[open] > summary { margin-bottom: 0.4rem; }
details.xdata .xtable-wrap { max-height: 320px; }
.irs--shiny .irs-handle[tabindex] { cursor: pointer; }
/* bslib marks the navbar with its own data-bs-theme, which would keep dark tokens inside it on the light page. */
[data-theme="light"] .navbar, [data-bs-theme="light"] .navbar { --text-muted: rgba(15, 25, 35, 0.70); --text: var(--color-ink); --primary: var(--color-labs-blue); }
/* Theme toggle: right edge of the navbar, outside the tab list. */
.navbar { position: relative; }
#theme-toggle { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); }
.navbar .navbar-nav { padding-right: 3.2rem; }
/* A focused tab must not fall back to Bootstrap's sky-on-bone hover color in the light theme. */
[data-theme="light"] .navbar-nav .nav-link:focus, [data-bs-theme="light"] .navbar-nav .nav-link:focus,
[data-theme="light"] .navbar-nav .nav-link:focus-visible, [data-bs-theme="light"] .navbar-nav .nav-link:focus-visible { color: var(--color-labs-blue) !important; }
/* A control row above a chart: fixed height, never squeezed by the card's fill layout. */
.xctl { flex: 0 0 auto; width: 40%; min-width: 220px; padding: 0.35rem 1.1rem 0; }
.xctl .form-group { margin-bottom: 0.4rem; }
/* Previous / Next stepping under the drawing picker */
.xstep { display: flex; gap: 0.5rem; margin: -0.3rem 0 0.9rem; }
.xstep .btn { flex: 1 1 0; }
.selectize-dropdown .optgroup-header { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); padding: 0.45rem 0.6rem 0.2rem; }

/* ---- Top bar spacing: one centred row, a clear break between the title and the tabs ---- */
.navbar > .container-fluid { align-items: center; padding-left: 1.5rem; padding-right: 1.5rem; }
.navbar .navbar-brand { margin: 0; padding: 0.35rem 0; display: flex; align-items: center; flex: 0 1 auto; }
.app-title { flex: 0 1 auto; gap: 1.1rem; }
.navbar .navbar-nav { flex: 1 1 auto; align-items: center; margin-left: 2.75rem; padding-right: 4rem; }
.navbar-nav > li:first-child { border-left: 1px solid var(--border-strong); padding-left: 1.2rem; }
.navbar-nav .nav-link { padding: 0.5rem 0.9rem; line-height: 1.2; }
.navbar-nav > li:first-child .nav-link { padding-left: 0; }
.navbar-nav .nav-item:has(.app-subtitle) { margin-left: 1.5rem; white-space: nowrap; }
@media (max-width: 1250px) {
  .navbar .navbar-nav { margin-left: 0; }
  .navbar-nav > li:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 1350px) { .navbar-nav .nav-item:has(.app-subtitle) { display: none; } }
.navbar-nav .nav-link { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.navbar-nav .nav-link { padding-bottom: 0.4rem; margin-bottom: 0; }
.bslib-page-navbar .navbar-nav .nav-link, .navbar-nav .nav-link { padding-bottom: 0.4rem !important; margin-bottom: 0 !important; }

/* ---- Title block: app name with the subtitle stacked beneath it ---- */
.app-name-block { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; line-height: 1; }
.app-name-block .app-name { margin: 0; line-height: 1; }
.app-name-block .app-subtitle { display: block !important; font-size: 0.58rem; letter-spacing: 0.18em; line-height: 1; align-self: flex-start; }
.navbar .navbar-nav { padding-right: 3.2rem; }
/* Emphasis color that clears 4.5:1 on the striped table rows in both themes */
:root { --primary-strong: #7CBDEA; }
[data-theme="light"], [data-bs-theme="light"] { --primary-strong: var(--color-labs-blue); }