/* =============================
     Shared Units Pages & Controls Styles
     ============================= */
  :root { --pad:10px; }
  body {
    /* background:#f5f5f5; */
    text-align:center;
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    margin:0; padding:0;
  }
  header {
    /* background:#fff;  */
    border-bottom:1px solid #e5e5e5;
    position:sticky; top:0; z-index:1050;
  }

  h1 { margin:0; font-size:22px; font-weight:800; }

  .controls {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    max-height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth mobile scrolling */
  }

  .main {background: #f5f5f5;}

  @media (max-width: 768px) {
    .controls {
      max-height: 100px;
    }
  }

  /* Prevent controls from shrinking */
  .controls > * {
    flex-shrink: 0;
    min-width: max-content;
  }

  /* Updated hover/focus for both form-select and custom buttons */
  .form-select:focus, .btn-form-style:hover, .btn-form-style:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: none;
  }

  .btn-form-style {
    padding: 0.375rem 0.75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background: #fff !important;
    color: #212529 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Units Landmarks menu. Fixed positioning keeps it out of the scrolling
     controls strip; the script anchors it to the button when opened. */
  .landmarks-dropdown { position: relative; }
  #landmarks-btn { min-width: 230px; cursor: pointer; }
  .landmarks-menu {
    position: fixed;
    z-index: 2000;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    padding: 10px 14px;
    min-width: 260px;
    max-width: calc(100vw - 20px);
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
  }
  .lm-group {
    color: #888;
    font-size: 12px;
    letter-spacing: .04em;
    margin: 10px 0 4px;
    text-transform: uppercase;
  }
  .lm-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 4px 0;
    white-space: nowrap;
  }
  .lm-all {
    border-bottom: 1px solid #eee;
    font-weight: 600;
    padding-bottom: 8px;
  }
  .lm-option {
    border-top: 1px dashed #eee;
    color: #666;
    font-size: 14px;
    margin-top: 4px;
    padding-top: 8px;
  }
  .lm-center-stage-icon {
    flex: 0 0 18px;
    height: 18px;
    margin-top: 0;
    width: 18px;
  }
  /* =============================
     SVG Styling
     ============================= */
  svg { margin-top:12px; }
  .key-chart > svg { display:block; height:auto; width:100%; }
  #keyboard {
    display:block;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    max-width:1160px;
    width:calc(100% - 2rem);
  }
  text.octave-label { font-size:20px; font-weight:600; fill:#0f172a; text-anchor:middle; }
  text.unit-label   { font-size:18px; font-weight:300; fill:#0f172a; text-anchor:middle;}
  .dot { stroke-width:1; cursor:pointer; }
  .dot[data-track="red"]  { fill:#E02424; stroke:#E02424; }
  .dot[data-track="blue"] { fill:#1E90FF; stroke:#1E90FF; }
  .hidden { opacity:0; }
  .note-label { font-size:24px; fill:#111; text-anchor:middle; user-select:none; }
  #keyboard .landmark-marker {
    dominant-baseline: alphabetic;
    font-size: 24px;
    pointer-events: none;
    text-anchor: middle;
    user-select: none;
  }
  #keyboard .camp-target {
    cursor: crosshair;
    fill: transparent;
  }
  #keyboard .camp-target:focus-visible {
    outline: none;
    stroke: #0d6efd;
    stroke-dasharray: 4 3;
    stroke-width: 2;
  }

  @media (max-width: 768px){
    svg { width: 96vw; height:auto; }

    .navbar-brand {
      font-size: 14px;
    }
    h1 {
      font-size: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 100%;
    }

    /* Force controls to stay in max 2 rows with horizontal scroll */
    .controls {
      max-height: 100px !important;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    .controls > * {
      flex-shrink: 0;
      min-width: max-content;
    }
  }

  /* =============================
     Shared Link & Card Styles
     ============================= */


/* Shared link styles for consistent hover effects */
.text-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.text-link:hover {
  color: #0b5cff !important;
  text-decoration: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .text-link:hover {
    color: #6aa2ff !important;
  }
}

.controls {
  padding-top: 1rem;
}

/* Card hover effects for image links */
.image-card {
  display: inline-block;
  border: 1px solid #f0f0f0;
  border-radius: .25rem;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
  outline: none;
}

.image-card:focus-visible {
  border: 1px solid #f0f0f0;
  border-radius: .25rem;
  box-shadow: 0 0 0 3px rgba(11, 92, 255, 0.35);
}

.image-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 92, 255, 0.4);
}

/* Fix img-thumbnail border for light backgrounds */
.img-thumbnail {
  border-color: transparent !important;
}