/*
 * Bassline Blueprint brand layer. Loads after theme.css and re-tunes the
 * Silicon dark theme: near-black ground, blue for structure (links,
 * buttons, watched state, editor notes), red reserved for the one "now"
 * signal on a screen (the editor playhead). The sign-in pages use the
 * logo's red for their one action instead (auth.css).
 */

:root {
  --bb-ink: #0b0c10; /* page */
  --bb-ink-rgb: 11, 12, 16; /* for rgba() tints of --bb-ink */
  --bb-well: #101218; /* inset surfaces: grid cells, notation panel */
  --bb-panel: #15171d; /* cards, thumbnails, form fields */
  --bb-panel-2: #1c1f27;
  --bb-line-soft: #1d2029;
  --bb-line: #262a33;
  --bb-line-strong: #3a4150;
  --bb-paper: #eceef2;
  --bb-mute: #8b90a0;
  --bb-blue: #3d7bff;
  --bb-blue-rgb: 61, 123, 255; /* for rgba() tints of --bb-blue */
  --bb-blue-deep: #2a56b8;
  --bb-blue-soft: #6a9bff;
  --bb-red: #ff3b4a;
  /* The logo's play mark, also the sign-in pages' one action (Aaron, Oct 9). */
  --bb-logo-red: #fc2a2f;
  --bb-logo-red-rgb: 252, 42, 47;
  --bb-logo-red-deep: #d91c22;
  /* The editor's Chord Tones helper: where to land, apart from the blue of
     the notes and the red of the playhead (Oct 9). */
  --bb-amber: #e3a857;
  --bb-amber-rgb: 227, 168, 87;
  --bb-brand-font: "DM Sans", sans-serif;

  /* Engraved score (editor). Staff lines sit well below the notes so the
     music reads first. For a light "paper" score instead, swap to roughly:
     bg #f4f2ed, ink #23262e, bar #8a8f99, line #b9bcc3. */
  --bb-score-bg: var(--bb-well);
  --bb-score-ink: #b9bec9; /* notes, rests, clef, fret numbers, chords */
  --bb-score-bar: #5d6473; /* barlines, TAB letters */
  --bb-score-line: #3b414e; /* staff and tab lines */
}

/* --- theme re-tune ------------------------------------------------------ */

[data-bs-theme="dark"] {
  --si-body-bg: var(--bb-ink);
  --si-body-bg-rgb: 11, 12, 16;
  --si-body-color: rgba(236, 238, 242, 0.72);
  --si-heading-color: var(--bb-paper);
  --si-link-color: var(--bb-blue);
  --si-link-hover-color: var(--bb-blue-soft);
  --si-link-color-rgb: 61, 123, 255;
  --si-link-hover-color-rgb: 106, 155, 255;
  --si-secondary-bg: var(--bb-panel-2);
  --si-tertiary-bg: var(--bb-panel);
  --si-border-color: var(--bb-line);
  --si-primary: var(--bb-blue);
  --si-primary-rgb: 61, 123, 255;
  --si-primary-text-emphasis: var(--bb-blue-soft);
}

body {
  background-color: var(--bb-ink);
}

iconify-icon {
  vertical-align: -0.125em;
}

/* Button icon a size up from its label; the offset re-centers the bigger
   glyph on the text (buttons are inline-block, not flex). */
.bb-btn-icon {
  font-size: 1.4em;
  vertical-align: -0.25em;
  margin-right: 0.35rem;
}

[data-bs-theme="dark"] .bg-light:not(.badge) {
  background-color: var(--bb-ink) !important;
}

[data-bs-theme="dark"] .navbar:not([data-bs-theme="light"]) {
  --si-navbar-stuck-bg: var(--bb-ink);
  --si-navbar-hover-color: var(--bb-blue-soft);
  --si-navbar-active-color: var(--bb-blue-soft);
}

.bb-navbar {
  border-bottom: 1px solid var(--bb-line);
}

/* The last menu link's own padding would leave its text short of the
   page's right edge; pull the menu out by that much so it lines up with
   the content below, as the wordmark does on the left. */
@media (min-width: 992px) {
  .bb-navbar .navbar-nav {
    margin-right: calc(-1 * var(--si-navbar-nav-link-padding-x));
  }
}

/* The edge is 7% white over the card's own background: the panel's grey,
   a touch brighter. The vendored theme hard-codes the card border as navy
   #041020 (ignoring --si-card-border-color), which read as a stray blue
   outline against the ink (Aaron, Sept 30), so the color is set here too. */
[data-bs-theme="dark"] .card {
  --si-card-bg: var(--bb-panel);
  --si-card-border-color: rgba(255, 255, 255, 0.07);
  border-color: var(--si-card-border-color);
}

/* The theme's dark modals are a blue-teal (#141f2a) found nowhere else;
   put them on the card surface with lines you can actually see. */
[data-bs-theme="dark"] .modal:not([data-bs-theme="light"]) {
  --si-modal-bg: var(--bb-panel);
  --si-modal-border-color: var(--bb-line-strong);
  --si-modal-header-border-color: var(--bb-line);
  --si-modal-footer-border-color: var(--bb-line);
}

.btn-primary {
  --si-btn-color: #fff;
  --si-btn-bg: var(--bb-blue);
  --si-btn-border-color: var(--bb-blue);
  --si-btn-hover-color: #fff;
  --si-btn-hover-bg: #2f6cf0;
  --si-btn-hover-border-color: #2f6cf0;
  --si-btn-active-color: #fff;
  --si-btn-active-bg: var(--bb-blue-deep);
  --si-btn-active-border-color: var(--bb-blue-deep);
  --si-btn-focus-shadow-rgb: 61, 123, 255;
  --si-btn-disabled-color: #fff;
  --si-btn-disabled-bg: var(--bb-blue-deep);
  --si-btn-disabled-border-color: var(--bb-blue-deep);
}

/* The theme glows its buttons and switches; keep them flat. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.form-check-input,
.form-check-input:checked {
  box-shadow: none !important;
}

/* The theme forces its yellow onto checked switches with !important in
   dark mode; these selectors match it exactly so blue wins by source order. */
.form-check-input:checked,
.form-switch .form-check-input:checked,
[data-bs-theme="dark"] .form-switch:not([data-bs-theme="light"]) .form-check-input:checked,
[data-bs-theme="dark"] .form-check:not([data-bs-theme="light"]) .form-check-input:checked:not(.is-invalid):not(:invalid) {
  background-color: var(--bb-blue) !important;
  border-color: var(--bb-blue) !important;
}

/* The logo (static/logo.svg: white type, red mark, no background), as
   tall as the text wordmark's line was, so the fixed navbar keeps its
   height. On phones it must share a line with the hamburger, or the navbar
   grows and hides the page heading. */
.bb-logo {
  display: block;
  width: auto;
  height: 32px;
}

.bb-logo-lg {
  height: 36px; /* sign-in and password pages */
}

@media (max-width: 575.98px) {
  .bb-logo {
    height: 26px;
  }
}

/* Each lesson video opens as its own one-item gallery, so lightGallery's
   "1 / 1" counter carries no information. Scoped under .lg-outer because
   the lightGallery stylesheet loads after this file and sets .lg-counter. */
.lg-outer .lg-counter {
  display: none;
}