/**
 * Studio UI presentation layer
 *
 * Cosmetic-only overrides for pitch-class input, library filters, and the
 * instrument surfaces. Navigation and result-card selectors are deliberately
 * absent from this file.
 */


/* ----------------------------------------------------------------------
 * Identifier control strip
 * ------------------------------------------------------------------- */

.identifier-page .identifier-tool-toolbar {
  box-shadow: none;
  backdrop-filter: none;
}

.identifier-page .identifier-search-control input {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  background: color-mix(in srgb, var(--studio-panel-raised) 72%, var(--surface));
  box-shadow: none;
}

.identifier-page .identifier-search-control input:hover {
  border-color: var(--studio-divider);
}

.identifier-page .identifier-search-control input:focus-visible {
  border-color: var(--studio-focus);
  background: var(--studio-panel-raised);
  box-shadow: none;
}

.identifier-page .identifier-search-results {
  padding: 5px;
  border: 0;
  border-radius: 3px;
  background: var(--studio-panel-raised);
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
}

.identifier-page .identifier-search-option {
  border-radius: 2px;
}

.identifier-page .identifier-search-option:hover,
.identifier-page .identifier-search-option.is-highlighted {
  background: var(--studio-recessed);
}

.identifier-page .identifier-notation-toggle {
  border: 0;
  border-radius: 3px;
  background: var(--studio-control);
  color: var(--studio-ink);
  box-shadow: none;
  filter: none;
}

.identifier-page .identifier-notation-toggle:hover {
  background: var(--studio-control-hover);
  box-shadow: none;
  filter: none;
  transform: none;
}

.identifier-page .identifier-notation-toggle:active,
.identifier-page .identifier-notation-toggle.is-active {
  background: var(--studio-accent);
  color: #fffaf0;
}

.identifier-page .identifier-playback-controls select {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--studio-panel-raised) 70%, var(--surface));
  box-shadow: none;
}

.identifier-page .identifier-playback-controls select:focus-visible {
  border-bottom-color: var(--studio-focus);
  outline: 0;
  box-shadow: none;
}

.identifier-page .identifier-playback-controls .preview-switch,
body .omni-playback-controls .preview-switch {
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
}

.identifier-page .identifier-playback-controls .preview-switch .switch-track,
body .omni-playback-controls .preview-switch .switch-track {
  width: 26px;
  height: 14px;
  border: 0;
  border-radius: 2px;
  background: var(--studio-control-hover);
}

.identifier-page .identifier-playback-controls .preview-switch .switch-track::after,
body .omni-playback-controls .preview-switch .switch-track::after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--studio-faint);
}

.identifier-page .identifier-playback-controls .preview-switch
  input:checked + .switch-track,
body .omni-playback-controls .preview-switch input:checked + .switch-track {
  border: 0;
  background: var(--studio-accent-soft);
}

.identifier-page .identifier-playback-controls .preview-switch
  input:checked + .switch-track::after,
body .omni-playback-controls .preview-switch
  input:checked + .switch-track::after {
  background: var(--studio-accent-strong);
  transform: translateX(12px);
}

.identifier-page .identifier-command-actions .settings-menu-toggle {
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--studio-panel-raised) 70%, var(--surface));
  box-shadow: none;
}

.identifier-page .identifier-main-play {
  border: 0;
  border-radius: 4px;
  background: var(--studio-control);
  color: var(--studio-ink);
  box-shadow: none;
}

.identifier-page .identifier-main-play:hover:not(:disabled) {
  background: var(--studio-control-hover);
  transform: none;
}

.identifier-page .identifier-main-play:active:not(:disabled) {
  background: var(--studio-accent);
  color: #fffaf0;
}

/* ----------------------------------------------------------------------
 * Pitch-class input: a single, flush industrial bank
 * ------------------------------------------------------------------- */

.identifier-page .identifier-input-section {
  padding: 16px;
  border: 0;
  border-radius: 5px;
  background: var(--studio-panel);
  box-shadow: none;
}

.identifier-page .identifier-input-section .identifier-section-heading {
  margin-bottom: 15px;
}

.identifier-page .identifier-input-section .identifier-eyebrow,
.identifier-page .identifier-instruments-section .identifier-eyebrow {
  color: var(--studio-accent);
}

.identifier-page .identifier-input-section .identifier-selection-status {
  color: var(--studio-muted);
}

.identifier-page .identifier-note-controls {
  gap: 8px;
}

.identifier-page .identifier-note-grid {
  gap: 2px;
  padding: 3px;
  border-radius: 4px;
  background: var(--studio-recessed);
}

.identifier-page .identifier-note-choice {
  min-height: 44px;
}

.identifier-page .identifier-note-button,
.scale-identifier-page .identifier-note-button,
.chord-identifier-page .identifier-note-button {
  width: 100%;
  max-width: none;
  min-height: 44px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 2px;
  background: var(--studio-panel-raised);
  color: var(--studio-muted);
  box-shadow: none;
  transition: background-color 100ms ease, color 100ms ease;
}

.identifier-page .identifier-note-button:hover {
  border: 0;
  background: var(--studio-control-hover);
  color: var(--studio-ink);
  transform: none;
}

.identifier-page .identifier-note-button.is-active,
.scale-identifier-page .identifier-note-button.is-active,
.chord-identifier-page .identifier-note-button.is-active {
  border: 0;
  background: var(--studio-accent);
  color: #fffaf0;
  box-shadow: inset 0 -3px 0 rgb(56 34 13 / 22%);
}

/* Root presentation — both the assumed and the forced root — is owned by the
   root-control block near the end of this file. Nothing here may tint it. */

.identifier-page .identifier-root-lock,
.scale-identifier-page .identifier-root-lock,
.chord-identifier-page .identifier-root-lock {
  right: 3px;
  bottom: 3px;
  left: 3px;
  min-height: 15px;
  padding: 1px 2px;
  border: 0;
  border-radius: 1px;
  background: color-mix(in srgb, var(--studio-ink) 84%, transparent);
  color: var(--studio-panel-raised);
  box-shadow: none;
}

.identifier-page .identifier-clear-button {
  min-height: 38px;
  padding-inline: 10px;
  border: 0;
  border-radius: 2px;
  background: var(--studio-control);
  color: var(--studio-muted);
}

.identifier-page .identifier-clear-button:hover:not(:disabled) {
  border: 0;
  background: var(--studio-control-hover);
  color: var(--studio-ink);
}

.identifier-page .identifier-note-button:focus-visible,
.identifier-page .identifier-clear-button:focus-visible,
.identifier-page .identifier-root-lock:focus-visible {
  outline: 1px solid var(--studio-focus);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
 * Instrument panels: matte chassis and integrated local controls
 * ------------------------------------------------------------------- */

.identifier-page .identifier-instruments-section {
  padding: 16px;
  border: 0;
  border-radius: 5px;
  background: var(--studio-panel);
  box-shadow: none;
}

.identifier-page .identifier-instrument-stage {
  padding: 10px;
  border: 0;
  border-radius: 4px;
  background: var(--studio-recessed);
  box-shadow: none;
}

.identifier-page .identifier-instrument-stage + .identifier-instrument-stage {
  margin-top: 8px;
}

.identifier-page .identifier-instrument-stage-heading {
  margin-bottom: 7px;
  padding: 0 2px 6px;
  border: 0;
}

.identifier-page .identifier-instrument-stage h3 {
  color: var(--studio-muted);
  letter-spacing: .1em;
}

.identifier-page .identifier-collapse-glyph {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 2px;
  background: var(--studio-control);
  color: var(--studio-accent-strong);
  font-size: 10px;
}

.identifier-page .identifier-instrument-collapse:hover .identifier-collapse-glyph {
  border: 0;
  background: var(--studio-control-hover);
}

.identifier-page .instrument-viewport,
body [data-feature-panel="fretboard"] .instrument-viewport,
body [data-feature-panel="piano"] .instrument-viewport {
  border: 0;
  border-radius: 3px;
  background: var(--studio-panel-raised);
  box-shadow: none;
}

.identifier-page .fretboard-control-bar,
.identifier-page .identifier-piano-control-bar,
body [data-feature-panel="fretboard"] .fretboard-control-bar,
body [data-feature-panel="piano"] .piano-control-bar {
  min-height: 34px;
  margin: 0 0 7px;
  padding: 4px 7px;
  border: 0;
  border-radius: 2px;
  background: var(--studio-control);
  box-shadow: none;
}

.identifier-page .identifier-piano-control-bar {
  margin-bottom: 7px;
}

.identifier-page .fretboard-capo-control,
body [data-feature-panel="fretboard"] .fretboard-capo-control {
  margin: 0;
  padding: 0 2px 0 8px;
  border: 0;
  background: transparent;
  color: var(--studio-muted);
}

.identifier-page .inline-tuning-select,
body [data-feature-panel="fretboard"] .inline-tuning-select {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 1px;
  background-color: var(--studio-panel-raised);
  color: var(--studio-ink);
  box-shadow: none;
}

.identifier-page .inline-tuning-select:focus-visible,
body [data-feature-panel="fretboard"] .inline-tuning-select:focus-visible {
  border-bottom-color: var(--studio-focus);
  outline: 0;
}

.identifier-page .inline-tuning-reset,
body [data-feature-panel="fretboard"] .inline-tuning-reset {
  color: var(--studio-accent-strong);
}

.identifier-page .fretboard-voicing-browser > summary,
body [data-feature-panel="fretboard"] .fretboard-voicing-browser > summary {
  color: var(--studio-ink);
}

.identifier-page .fretboard-voicing-button,
body [data-feature-panel="fretboard"] .fretboard-voicing-button {
  border: 0;
  border-radius: 2px;
  background: var(--studio-panel-raised);
  color: var(--studio-muted);
  box-shadow: none;
}

.identifier-page .fretboard-voicing-button:hover,
.identifier-page .fretboard-voicing-button.is-selected,
body [data-feature-panel="fretboard"] .fretboard-voicing-button:hover,
body [data-feature-panel="fretboard"] .fretboard-voicing-button.is-selected {
  border: 0;
  background: var(--studio-accent-soft);
  color: var(--studio-ink);
}

/* Square, console-style toggles replace phone-style pills. */
.identifier-instruments-section .feature-switch,
body .omni-filter-panel .feature-switch,
body [data-feature-panel="fretboard"] .feature-switch,
body [data-feature-panel="piano"] .feature-switch {
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
}

.identifier-instruments-section .switch-track,
body .omni-filter-panel .switch-track,
body [data-feature-panel="fretboard"] .switch-track,
body [data-feature-panel="piano"] .switch-track {
  width: 26px;
  height: 14px;
  border: 0;
  border-radius: 2px;
  background: var(--studio-control-hover);
}

.identifier-instruments-section .switch-track::after,
body .omni-filter-panel .switch-track::after,
body [data-feature-panel="fretboard"] .switch-track::after,
body [data-feature-panel="piano"] .switch-track::after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--studio-faint);
}

.identifier-instruments-section .feature-switch input:checked + .switch-track,
body .omni-filter-panel .feature-switch input:checked + .switch-track,
body [data-feature-panel="fretboard"] .feature-switch input:checked + .switch-track,
body [data-feature-panel="piano"] .feature-switch input:checked + .switch-track {
  border: 0;
  background: var(--studio-accent-soft);
}

.identifier-instruments-section .feature-switch input:checked + .switch-track::after,
body .omni-filter-panel .feature-switch input:checked + .switch-track::after,
body [data-feature-panel="fretboard"] .feature-switch input:checked + .switch-track::after,
body [data-feature-panel="piano"] .feature-switch input:checked + .switch-track::after {
  background: var(--studio-accent-strong);
  transform: translateX(12px);
}

.identifier-instruments-section .feature-switch input:focus-visible + .switch-track,
body .omni-filter-panel .feature-switch input:focus-visible + .switch-track,
body [data-feature-panel="fretboard"] .feature-switch input:focus-visible + .switch-track,
body [data-feature-panel="piano"] .feature-switch input:focus-visible + .switch-track {
  outline: 1px solid var(--studio-focus);
  outline-offset: 2px;
}

body [data-feature-panel="fretboard"],
body [data-feature-panel="piano"] {
  border: 0;
  border-radius: 5px;
  background: var(--studio-panel);
  box-shadow: none;
}

body [data-feature-panel="fretboard"] .feature-panel-heading,
body [data-feature-panel="piano"] .feature-panel-heading {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--studio-divider);
}

/* ----------------------------------------------------------------------
 * Library filters: borderless tonal groups and compact segmented choices
 * ------------------------------------------------------------------- */

body .omni-filter-panel {
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: var(--studio-panel);
  box-shadow: none;
}

body .omni-command-mount .omni-filter-panel {
  padding: 10px 12px;
  border: 0;
}

body .omni-filter-panel > details > summary {
  min-height: 30px;
  padding: 0 2px 8px;
  border: 0;
  color: var(--studio-ink);
  letter-spacing: .01em;
}

body .omni-filter-panel summary::after {
  border-color: var(--studio-accent);
}

body .omni-filter-panel summary small,
body .omni-filter-field > span,
body .omni-cardinality-fields span,
body .omni-filter-group legend {
  color: var(--studio-muted);
}

body .omni-filter-content {
  gap: 9px;
  padding-top: 10px;
}

body .omni-filter-field input,
body .omni-filter-field select,
body .omni-cardinality-fields input {
  min-height: 32px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  background: var(--studio-panel-raised);
  color: var(--studio-ink);
  box-shadow: none;
}

body .omni-filter-field input:hover,
body .omni-filter-field select:hover,
body .omni-cardinality-fields input:hover {
  background: var(--studio-control);
}

body .omni-filter-field input:focus-visible,
body .omni-filter-field select:focus-visible,
body .omni-cardinality-fields input:focus-visible {
  border-bottom-color: var(--studio-focus);
  outline: 0;
  background: var(--studio-panel-raised);
  box-shadow: none;
}

body .omni-filter-panel .omni-hierarchy-filter {
  border: 0;
  border-radius: 2px;
  background: var(--studio-recessed);
}

body .omni-filter-panel .omni-hierarchy-filter > summary {
  padding-inline: 9px;
}

body .omni-hierarchy-options {
  gap: 2px;
  padding: 2px 6px 7px;
}

body .omni-hierarchy-options label,
body .omni-interval-filters label {
  border: 0;
  border-radius: 2px;
  background: var(--studio-panel-raised);
  color: var(--studio-muted);
  box-shadow: none;
}

body .omni-hierarchy-options label:hover,
body .omni-interval-filters label:hover {
  background: var(--studio-control-hover);
  color: var(--studio-ink);
}

body .omni-hierarchy-options label:has(input:checked),
body .omni-interval-filters label:has(input:checked) {
  border: 0;
  background: var(--studio-accent-soft);
  color: var(--studio-accent-strong);
  box-shadow: inset 0 -2px 0 var(--studio-accent);
}

body .omni-hierarchy-options input,
body .omni-interval-filters input {
  accent-color: var(--studio-accent);
}

body .omni-property-filters {
  gap: 3px;
  padding: 6px;
  border-radius: 2px;
  background: var(--studio-recessed);
}

body .omni-filter-panel .omni-reset-button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 2px;
  background: var(--studio-control);
  color: var(--studio-muted);
  box-shadow: none;
}

body .omni-filter-panel .omni-reset-button:hover {
  border: 0;
  background: var(--studio-control-hover);
  color: var(--studio-ink);
}

/* Library search and local dropdowns use a flush, underline-on-focus model. */
body .omni-quick-search-control input,
body .omni-root-control select,
body .omni-formula-control select {
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  background-color: var(--studio-panel-raised);
  box-shadow: none;
}

body .omni-quick-search-control input:focus-visible,
body .omni-root-control select:focus-visible,
body .omni-formula-control select:focus-visible {
  border-bottom-color: var(--studio-focus);
  outline: 0;
  box-shadow: none;
}

/* Keep the exact existing grid math at all breakpoints. */
@media (max-width: 700px) {
  .identifier-page .identifier-note-grid {
    gap: 2px;
  }

  .identifier-page .identifier-note-button,
  .scale-identifier-page .identifier-note-button,
  .chord-identifier-page .identifier-note-button {
    min-height: 38px;
  }

  body .omni-filter-panel,
  body .omni-command-mount .omni-filter-panel {
    padding: 9px;
  }
}

/* ======================================================================
 * Surgical border + grouping override
 *
 * Structural lines are intentionally retained only inside the fretboard
 * matrix and between physical piano keys. Everything wrapping those playable
 * surfaces is separated exclusively by tone and whitespace.
 * =================================================================== */

/* Main module shells and their nested grouping shells. */
.identifier-page .identifier-input-section,
.identifier-page .identifier-instruments-section,
.identifier-page .identifier-instrument-stage,
.identifier-page .identifier-instrument-stage-heading,
.identifier-page #identifier-fretboard-mount,
.identifier-page #identifier-piano-mount,
.identifier-page .instrument-viewport,
.identifier-page .identifier-scaled-instrument-frame,
.identifier-page .fretboard-control-bar,
.identifier-page .identifier-piano-control-bar,
.identifier-page .identifier-position-browser,
.identifier-page .fretboard-capo-control,
body .omni-filter-panel,
body .omni-filter-panel > details,
body .omni-filter-panel .omni-filter-group,
body .omni-filter-panel .omni-hierarchy-filter,
body .omni-filter-panel .omni-hierarchy-options,
body .omni-filter-panel .omni-property-filters,
body [data-feature-panel="fretboard"],
body [data-feature-panel="piano"],
body [data-feature-panel="fretboard"] .feature-panel-heading,
body [data-feature-panel="piano"] .feature-panel-heading,
body [data-feature-panel="fretboard"] .instrument-viewport,
body [data-feature-panel="piano"] .instrument-viewport,
body [data-feature-panel="fretboard"] .fretboard-control-bar,
body [data-feature-panel="piano"] .piano-control-bar {
  border: none !important;
  box-shadow: none !important;
}

/* Local controls are also borderless; state is communicated by tone. */
.identifier-page .identifier-note-grid,
.identifier-page .identifier-note-button,
.identifier-page .identifier-root-lock,
.identifier-page .identifier-clear-button,
.identifier-page .identifier-collapse-glyph,
.identifier-page .inline-tuning-select,
.identifier-page .inline-tuning-reset,
.identifier-page .fretboard-voicing-button,
.identifier-page .identifier-instruments-section .switch-track,
body .omni-filter-panel input,
body .omni-filter-panel select,
body .omni-filter-panel button,
body .omni-filter-panel .switch-track,
body .omni-filter-panel .omni-hierarchy-options label,
body .omni-filter-panel .omni-interval-filters label,
body [data-feature-panel="fretboard"] .inline-tuning-select,
body [data-feature-panel="fretboard"] .inline-tuning-reset,
body [data-feature-panel="fretboard"] .fretboard-voicing-button,
body [data-feature-panel="fretboard"] .switch-track,
body [data-feature-panel="piano"] .switch-track {
  border: none !important;
  box-shadow: none !important;
}

/* Pitch classes read as one cohesive segmented hardware bank. */
.identifier-page .identifier-input-section {
  padding: 18px !important;
}

.identifier-page .identifier-input-section .identifier-section-heading {
  margin-bottom: 20px;
}

.identifier-page .identifier-note-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
}

.identifier-page .identifier-note-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
  padding: 4px;
  background: var(--studio-recessed);
}

.identifier-page .identifier-note-button {
  background: var(--studio-panel-raised) !important;
  color: var(--studio-muted);
}

.identifier-page .identifier-note-button:hover {
  background: var(--studio-control-hover) !important;
  color: var(--studio-ink);
}

.identifier-page .identifier-note-button.is-active {
  background: var(--studio-accent) !important;
  color: #fffaf0;
}

.identifier-page .identifier-clear-button {
  min-width: 62px;
  background: var(--studio-control) !important;
}

/* Unrelated instrument sections breathe; related controls stay compact. */
.identifier-page .identifier-instruments-section {
  padding: 18px !important;
}

.identifier-page .identifier-instruments-heading-row {
  margin-bottom: 20px;
}

.identifier-page .identifier-instrument-stage {
  padding: 15px !important;
}

.identifier-page .identifier-instrument-stage + .identifier-instrument-stage {
  margin-top: 18px !important;
}

.identifier-page .identifier-instrument-stage-heading {
  margin-bottom: 14px !important;
  padding: 0 2px !important;
}

.identifier-page .fretboard-control-bar {
  display: flex !important;
  min-height: 40px;
  align-items: center !important;
  justify-content: space-between;
  gap: 18px !important;
  margin: 0 0 14px !important;
  padding: 7px 10px !important;
}

.identifier-page .identifier-position-browser {
  min-width: 0;
  flex: 1 1 auto;
}

.identifier-page .identifier-guitar-controls {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: flex-end;
  gap: 12px !important;
  margin-left: auto;
}

.identifier-page .identifier-instrument-switch,
.identifier-page .fretboard-capo-control {
  display: flex !important;
  min-height: 28px;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.identifier-page .identifier-piano-control-bar {
  display: flex !important;
  min-height: 40px;
  align-items: center !important;
  justify-content: flex-end;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 7px 10px !important;
}

.identifier-page .fret-corner,
body [data-feature-panel="fretboard"] .fret-corner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px !important;
  padding-inline: 7px !important;
}

/* Library Guitar controls no longer overlap in one grid cell. */
body [data-feature-panel="fretboard"] .fretboard-control-bar {
  display: flex !important;
  min-height: 42px;
  align-items: center !important;
  justify-content: space-between;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 8px 12px !important;
}

body [data-feature-panel="fretboard"] .fretboard-control-bar
  > .fretboard-voicing-browser,
body [data-feature-panel="fretboard"] .fretboard-control-bar
  > .fretboard-capo-control {
  grid-area: auto !important;
}

body [data-feature-panel="fretboard"] .fretboard-voicing-browser {
  min-width: 0;
  flex: 1 1 auto;
}

body [data-feature-panel="fretboard"] .fretboard-capo-control {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

body [data-feature-panel="piano"] .piano-control-bar {
  display: flex !important;
  min-height: 42px;
  align-items: center !important;
  justify-content: flex-end;
  gap: 12px !important;
  margin: 0 0 16px !important;
  padding: 8px 12px !important;
}

body [data-feature-panel="fretboard"],
body [data-feature-panel="piano"] {
  padding: 18px !important;
}

body [data-feature-panel="fretboard"] .feature-panel-heading,
body [data-feature-panel="piano"] .feature-panel-heading {
  margin-bottom: 18px !important;
  padding: 0 !important;
}

/* Filter hierarchy is established by rhythm, never by separator strokes. */
body .omni-filter-panel,
body .omni-command-mount .omni-filter-panel {
  padding: 18px !important;
}

body .omni-filter-panel > details > summary {
  min-height: 32px;
  margin-bottom: 18px;
  padding: 0 !important;
  border: none !important;
}

body .omni-filter-content,
body .omni-command-mount .omni-filter-content {
  display: grid !important;
  align-items: start;
  column-gap: 12px !important;
  row-gap: 18px !important;
  padding: 0 !important;
}

body .omni-filter-field,
body .omni-cardinality-fields label {
  display: grid;
  align-content: start;
  gap: 8px !important;
}

body .omni-cardinality-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

body .omni-interval-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px !important;
}

body .omni-hierarchy-options {
  display: grid;
  gap: 5px !important;
  padding: 10px !important;
}

body .omni-property-filters {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px !important;
  padding: 12px !important;
}

body .omni-filter-panel .omni-switch {
  display: grid;
  min-height: 30px;
  align-items: center;
}

body .omni-filter-panel input,
body .omni-filter-panel select {
  background-color: var(--studio-panel-raised) !important;
}

body .omni-filter-panel input:hover,
body .omni-filter-panel select:hover {
  background-color: var(--studio-control) !important;
}

body .omni-filter-panel input:focus-visible,
body .omni-filter-panel select:focus-visible,
.identifier-page .inline-tuning-select:focus-visible {
  border: none !important;
  outline: 1px solid var(--studio-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  .identifier-page .fretboard-control-bar,
  .identifier-page .identifier-guitar-controls,
  body [data-feature-panel="fretboard"] .fretboard-control-bar {
    align-items: stretch !important;
    flex-direction: column;
  }

  .identifier-page .identifier-guitar-controls {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 0;
  }

  body .omni-property-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Exact Library module shells; native grid/accordion geometry is untouched. */
:root {
  --library-module-surface: rgb(74 65 53 / 4%);
}

:root[data-theme="dark"] {
  --library-module-surface: rgb(255 255 255 / 3%);
}

body .feature-grid > .feature-panel[data-feature-panel],
body .feature-grid > .feature-panel[data-feature-panel="caged"],
body .feature-grid > .feature-panel[data-feature-panel="circleOfFifths"],
body .feature-grid > .feature-panel[data-feature-panel="tonnetz"] {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  background-color: var(--library-module-surface) !important;
  box-shadow: none !important;
}

body .feature-grid > .feature-panel[data-feature-panel]::before,
body .feature-grid > .feature-panel[data-feature-panel]::after,
body .feature-grid > .feature-panel[data-feature-panel="caged"]::before,
body .feature-grid > .feature-panel[data-feature-panel="caged"]::after,
body .feature-grid > .feature-panel[data-feature-panel="circleOfFifths"]::before,
body .feature-grid > .feature-panel[data-feature-panel="circleOfFifths"]::after,
body .feature-grid > .feature-panel[data-feature-panel="tonnetz"]::before,
body .feature-grid > .feature-panel[data-feature-panel="tonnetz"]::after {
  display: none !important;
  content: none !important;
}

body .feature-grid > .feature-panel[data-feature-panel="caged"] .caged-result,
body .feature-grid > .feature-panel[data-feature-panel="circleOfFifths"] .geometry-container,
body .feature-grid > .feature-panel[data-feature-panel="tonnetz"] .geometry-container,
body .feature-grid > .feature-panel[data-feature-panel="colorWheel"] .color-wheel-container,
body .feature-grid > .feature-panel[data-feature-panel="semitoneMatrix"] .semitone-matrix-container,
body .feature-grid > .feature-panel[data-feature-panel="harmonicAnalysis"] .harmonic-summary,
body .feature-grid > .feature-panel[data-feature-panel="harmonicAnalysis"] .harmonic-grid {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* =========================================================
   THE FINAL UI NUKE: BORDER & HACK ANNIHILATION
   ========================================================= */

/* 1. Tüm ana modül kabuklarındaki standart çerçeveleri yok et ve ton-sür-ton zemin ver */
.feature-panel,
.feature-panel-wide,
.geometry-container,
.color-wheel-container,
.semitone-matrix-container,
.caged-result,
.harmonic-analysis-container .harmonic-grid,
.tuning-editor,
.staff-container {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--surface-raised) !important; /* Ana zeminden çok hafif farklı şık bir ton */
}

/* 2. SİNSİ HİLEYİ YOK ET: 1px gap ve arkaplan rengiyle yapılan sahte çizgileri sil */
.voicing-grid,
.neo-riemannian-grid,
.figured-bass-grid,
.schenkerian-sequence,
.harmonic-summary {
    background: transparent !important;
    border: none !important;
    gap: 8px !important; /* 1px sahte çizgi yerine nefes alan boşluk */
}

/* 3. Sahte çizgilerden kurtarılan iç elemanlara şık, yuvarlatılmış zemin ver */
.voicing-item,
.neo-riemannian-item,
.figured-bass-item,
.schenkerian-degree,
.harmonic-metric {
    background: var(--surface-raised) !important;
    border-radius: 8px !important;
}

/* 4. Başlıkların altındaki gereksiz, kalabalık yaratan ayırıcı çizgileri sil */
.dashboard-heading,
.feature-category,
.feature-panel-heading,
.voicing-group + .voicing-group {
    border-bottom: none !important;
    border-top: none !important;
}

/* 5. Tablolardaki kalın kenarlıkları kaldır */
.acoustic-table th,
.acoustic-table td,
.semitone-matrix th,
.semitone-matrix td {
    border: none !important;
}

/* Structural hierarchy recovery. Visual feature modules remain borderless. */
body .omni-command-shell {
  border-bottom: 1px solid var(--line-soft) !important;
  background: var(--header-background);
  box-shadow: 0 8px 24px var(--command-shadow);
}

body .omni-panel-shell {
  border-top: 1px solid var(--line-soft) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  background: var(--control-background);
}

body .control-panel,
body .omni-command-panel {
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

body .dashboard-layout > .master-dashboard {
  border-right: 1px solid var(--line-soft) !important;
  background: var(--sidebar-background) !important;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--line-soft) 45%, transparent);
}

body .omni-command-mount .omni-filter-panel,
body .omni-filter-panel {
  border: 1px solid var(--line-soft) !important;
  border-radius: 6px;
  background: var(--studio-panel) !important;
  box-shadow: none !important;
}

body .omni-command-mount .omni-results-shell {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--surface);
}

body .omni-filter-panel .omni-hierarchy-filter,
body .omni-filter-panel .omni-property-filters,
body .omni-filter-panel .omni-interval-filters {
  border: 1px solid var(--line-soft) !important;
  border-radius: 4px;
  background: var(--studio-recessed);
  box-shadow: none !important;
}

body .omni-filter-panel .omni-interval-filters {
  padding: 6px;
}

body .acoustic-table,
body .semitone-matrix {
  border: 1px solid var(--line-soft);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-raised);
}

body .acoustic-table th,
body .acoustic-table td,
body .semitone-matrix th,
body .semitone-matrix td {
  border-right: 1px solid var(--line-soft) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}

body .acoustic-table tr > :last-child,
body .semitone-matrix tr > :last-child {
  border-right: 0 !important;
}

body .acoustic-table tr:last-child > *,
body .semitone-matrix tr:last-child > * {
  border-bottom: 0 !important;
}

/* Fine macro-layout lines; visual feature modules remain untouched. */
body .master-dashboard {
  border-right: 1px solid var(--line-soft) !important;
}

body .omni-filter-panel,
body .omni-command-mount .omni-filter-panel {
  border: 1px solid var(--line-soft) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 6px;
}

body .app-header,
body .omni-command-shell,
body .control-shell,
body .control-panel,
body .omni-command-panel {
  border-bottom: 1px solid var(--line-soft) !important;
}

body .omni-command-mount .omni-library-panel,
body .omni-command-mount .omni-results-shell {
  border: 1px solid var(--line-soft) !important;
  border-radius: 6px;
  background: var(--surface);
}

body .omni-command-mount .omni-library-heading {
  border-bottom: 1px solid var(--line-soft) !important;
}

body .identifier-card,
body .chord-anthropology-column,
body .chord-mini-data-card,
body .omni-category-block {
  border: 1px solid var(--line-soft) !important;
  border-radius: 6px;
}

/* Keep non-root black-key selections distinct from the amber root color. */
body .piano-key.black-key.active-note:not(.root-note) {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: #ffffff;
}

/* Final hierarchy pass: fine boundaries and subtly warm module surfaces. */
:root {
  --module-shell-surface: color-mix(in srgb, var(--surface-raised) 94%, #ead9bd 6%);
  --module-shell-line: color-mix(in srgb, var(--line-soft) 88%, #b89562 12%);
}

:root[data-theme="dark"] {
  --module-shell-surface: color-mix(in srgb, var(--surface-raised) 96%, #b88a4d 4%);
  --module-shell-line: color-mix(in srgb, var(--line-soft) 90%, #c29a63 10%);
}

body .feature-grid > .feature-panel[data-feature-panel],
body .feature-grid > .feature-panel[data-feature-panel="caged"],
body .feature-grid > .feature-panel[data-feature-panel="circleOfFifths"],
body .feature-grid > .feature-panel[data-feature-panel="tonnetz"] {
  border: 1px solid var(--module-shell-line) !important;
  border-radius: 6px !important;
  background: var(--module-shell-surface) !important;
  box-shadow: none !important;
}

body .feature-grid > .feature-panel[data-feature-panel] > .feature-panel-heading {
  border-bottom: 1px solid var(--module-shell-line) !important;
}

body .omni-command-mount .omni-library-heading > .omni-library-title,
body .omni-command-mount .omni-library-heading > .omni-root-control,
body .omni-command-mount .omni-library-heading > .omni-formula-control,
body .omni-command-mount .omni-library-heading > .omni-selection-summary,
body .omni-command-mount .omni-library-heading > .omni-quick-search-control,
body .omni-command-mount .omni-library-heading > .omni-playback-controls {
  min-width: 0;
  border: 1px solid var(--line-soft) !important;
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-raised) 97%, var(--accent) 3%);
  box-shadow: none !important;
}

body .omni-command-mount .omni-library-layout,
body .omni-command-mount .omni-results-shell,
.identifier-page .identifier-input-section,
.identifier-page .identifier-instruments-section,
.identifier-page .identifier-results-section,
.identifier-page .identifier-instrument-stage,
.identifier-page .identifier-root-filter-shell {
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

.identifier-page .identifier-input-section,
.identifier-page .identifier-instruments-section,
.identifier-page .identifier-results-section,
.identifier-page .identifier-instrument-stage {
  border: 1px solid var(--line-soft) !important;
  border-radius: 6px;
}

.identifier-page .identifier-note-button,
.scale-identifier-page .identifier-note-button,
.chord-identifier-page .identifier-note-button {
  font-weight: 820 !important;
}

body #identifier-play-button {
  border-color: #b69b55 !important;
  background: #d8c47e !important;
  color: #292617 !important;
  box-shadow: none !important;
}

body #identifier-play-button:hover:not(:disabled) {
  border-color: #c4aa62 !important;
  background: #e0cd8a !important;
}

body #identifier-play-button:disabled {
  border-color: #a9965d !important;
  background: #cbb978 !important;
  color: #3b3521 !important;
  opacity: .72;
}

body .piano-scale-frame {
  overflow-x: clip !important;
  overflow-y: clip !important;
  scrollbar-width: none !important;
}

body .piano-scale-frame::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Library header refinements from annotated review. */
body .omni-command-mount .omni-library-heading > .omni-root-control,
body .omni-command-mount .omni-library-heading > .omni-formula-control {
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

body .omni-command-mount .omni-root-control select,
body .omni-command-mount .omni-formula-control select {
  border: 1px solid var(--line-soft) !important;
  border-radius: 4px;
  background: var(--studio-panel-raised);
}

body .omni-command-mount .omni-root-control select:focus-visible,
body .omni-command-mount .omni-formula-control select:focus-visible {
  border-color: var(--blue) !important;
  outline: 1px solid var(--blue);
  outline-offset: 1px;
}

body .omni-command-mount .omni-library-heading > .omni-selection-summary {
  border-color: var(--blue) !important;
  background: color-mix(in srgb, var(--blue) 42%, var(--surface-raised)) !important;
}

body .omni-command-mount .omni-selection-summary .selection-mode,
body .omni-command-mount .omni-selection-summary strong {
  color: var(--strong-text);
}

body .omni-command-mount .omni-selection-summary > span:last-child {
  color: var(--text);
}

/* Annotation pass: only the actual inputs/selects retain control outlines. */
body .omni-command-mount .omni-library-heading > .omni-quick-search-control,
body .omni-command-mount .omni-library-heading > .omni-playback-controls {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body .omni-command-mount .omni-quick-search-control input,
body .omni-command-mount .omni-playback-controls select {
  border: 1px solid var(--line-soft) !important;
  border-radius: 4px;
  background: var(--studio-panel-raised);
  box-shadow: none !important;
}

body .omni-command-mount .omni-playback-controls > .playback-field,
body .omni-command-mount .omni-playback-controls > .preview-switch,
body .omni-command-mount .omni-playback-controls > .audio-status-badge {
  border: 0 !important;
  outline: 0;
  background-color: transparent;
  box-shadow: none !important;
}

body .omni-command-mount .omni-library-heading > .omni-selection-summary {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  border-color: var(--success) !important;
  background: color-mix(
    in srgb,
    var(--success) 22%,
    var(--surface-raised)
  ) !important;
  text-align: center;
}

body .omni-command-mount .omni-selection-summary > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--strong-text);
  text-overflow: ellipsis;
}

/* ================================================ Identifier root control ==
   The 'Force as Root' control is a small round button pinned to the cell's
   corner. It is absolutely positioned, so it never contributes to the note
   button's size, and it sits clear of the letter, which is centred.

   Three states are distinguishable, which the previous single orange fill could
   not do:
     selected            blue fill        (in the chord/scale)
     root + selected     orange fill + ring
     root, not selected  ring only, no fill - the note is the tonal centre but
                         is not sounding, so colouring it orange would claim
                         membership it does not have.

   "Root" here means either root, and they look identical on purpose. A chord or
   scale always has one: when the user has not forced anything, the engine still
   assumes one (`is-implicit-root`), and that assumption drives the analysis, the
   fretboard and the piano. Marking only the forced root left the default one
   invisible while every other panel was already colouring it. What separates the
   two is the lock dot in the corner, not the note itself.
   ========================================================================== */

.identifier-note-choice {
  position: relative;
}

.identifier-page .identifier-root-lock,
.scale-identifier-page .identifier-root-lock,
.chord-identifier-page .identifier-root-lock {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 3px;
  bottom: auto;
  left: auto;
  display: grid;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  place-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  /* The label stays in the accessibility tree; only its glyph is hidden. */
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.identifier-root-lock::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, #f97316 70%, transparent);
  border-radius: 50%;
  background: rgb(0 0 0 / 25%);
  transition: background 120ms ease, border-color 120ms ease;
}

.identifier-root-lock:hover::after {
  border-color: #f97316;
  background: color-mix(in srgb, #f97316 35%, transparent);
}

.identifier-note-choice.has-locked-root .identifier-root-lock::after {
  border-color: #fff;
  background: #f97316;
}

/* Root and sounding: filled, with a ring that reads at a glance. Both the
   assumed root and the forced root land here. */
.identifier-page .identifier-note-button.is-implicit-root,
.identifier-page .identifier-note-choice.has-locked-root .identifier-note-button.is-active {
  background: #f97316 !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 60%),
    0 0 0 3px color-mix(in srgb, #f97316 55%, transparent) !important;
}

/* Root but not sounding: outlined only. No orange fill, because the note is
   not part of the chord or scale. */
.identifier-page .identifier-note-choice.has-locked-root .identifier-note-button:not(.is-active) {
  background: transparent !important;
  color: #f97316 !important;
  font-weight: 800;
  box-shadow:
    inset 0 0 0 2px #f97316,
    0 0 0 2px color-mix(in srgb, #f97316 30%, transparent) !important;
}


/* ==================================================== Mobile layer (≤768px)
   One coherent block. An earlier revision grew into several stacked patches
   that fought each other; this replaces all of them.
   Guiding rule: do not force horizontal scrolling on the instruments. They are
   sized by transform: scale(), which shrinks what you see but not the layout
   box — so an overflow-x scroller travels across a mostly empty 2184px canvas
   while the visible keyboard stays squeezed at the far left. Their own
   fit-to-view scaling already solves this; the layer below just gives it room.
   ========================================================================== */

@media (max-width: 768px) {
  /* ---------------------------------------------------------------- header */

  .identifier-site-nav-inner,
  .omni-command-toolbar,
  .article-site-header-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-inline: 12px;
    gap: 8px;
  }

  .identifier-site-nav-inner > .brand-link,
  .omni-command-toolbar .omni-brand-group {
    order: -1;
    margin-inline-end: auto;
  }

  .brand-logo {
    width: auto;
    max-width: min(118px, 34vw);
    height: auto;
    aspect-ratio: 500 / 200;
  }

  .auth-cluster {
    min-width: 0;
    flex-shrink: 1;
    gap: 6px;
  }

  .auth-cluster .auth-account-email {
    display: none;
  }

  /* The tab strip gets its own line and scrolls; the sheet below escapes it. */
  .omni-library-tabs {
    flex: 1 1 100%;
    order: 3;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  .omni-library-tabs::-webkit-scrollbar { display: none; }
  .omni-library-tabs > * { flex: 0 0 auto; }

  /* Dropdowns became bottom sheets: a desktop popover anchored near the right
     edge simply cannot fit, which is why they ran off-screen. */
  .nav-dropdown-menu {
    position: fixed;
    inset: auto 10px 12px 10px;
    width: auto;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 500;
    box-shadow: 0 -8px 32px rgb(0 0 0 / 45%);
  }

  .omni-library-tabs summary,
  .omni-library-tabs .article-nav-link,
  .nav-dropdown-menu a,
  .support-button,
  .auth-signin-button {
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  /* ----------------------------------------------------- pitch class input */

  .identifier-note-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .identifier-note-choice {
    position: relative;
    min-width: 0;
  }

  .identifier-note-button {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 14px;
  }

  /* ------------------------------------------------------------ instruments */

  /* Let the panels be narrow; the instruments' own scaling fills them. No
     forced overflow, so there is no empty canvas to scroll into. */
  .instrument-viewport,
  .fretboard-viewport,
  .piano-viewport,
  #fretboard-container,
  #piano-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Control bars sat above the keyboards eating vertical space. Collapsed to
     their contents so the instrument itself is what fills the panel. */
  .piano-control-bar,
  .fretboard-control-bar,
  .identifier-guitar-controls {
    display: flex;
    height: auto;
    min-height: 0;
    padding: 6px 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ------------------------------------------------- identifier page layout */

  /* The notation sidebar is sticky and tall; on a phone it painted over the
     note buttons. It becomes the next block in the flow instead — and without
     a forced height, which is what left a large empty gap above the fold. */
  .identifier-sidebar-inner,
  .identifier-sidebar,
  .identifier-sidebar-shell {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    transform: none;
  }

  #identifier-app-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* ---------------------------------------------------- reading and modals */

  .article-wrapper,
  .article-content {
    max-width: 100%;
    padding-inline: 18px;
  }

  .article-content { font-size: 17px; line-height: 1.72; }
  .article-content h1 { font-size: 27px; }
  .article-content h2 { font-size: 22px; }
  .article-content pre,
  .article-content table { max-width: 100%; overflow-x: auto; }

  .auth-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .auth-form-panel,
  .auth-perks { padding: 22px 18px; }

  .library-panel { width: 100%; }

  input, select, textarea { font-size: 16px; }

  .auth-field input,
  .auth-submit-button,
  .auth-google-button { min-height: 46px; }

  .download-menu {
    position: fixed;
    inset: auto 10px 10px 10px;
    min-width: 0;
  }

  .download-toast { left: 12px; right: 12px; max-width: none; }
}

@media (max-width: 400px) {
  .identifier-note-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .omni-category-cards { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* identifier.css pins the brand with `flex: 0 0 auto`; without the ability to
     shrink, the header line measures wider than the viewport and the first item
     resolves to a negative offset. Both halves are needed: let it shrink, and
     clip the header so a residual overflow cannot scroll the document. */
  .identifier-site-nav .brand-link,
  .omni-command-toolbar .brand-link {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .identifier-site-nav,
  .omni-command-shell,
  .article-site-header {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }

  /* The base rule sets position/top for a desktop popover; the sheet needs to
     win outright or it reopens off-screen. */
  .nav-dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  /* The brand only stays at x=0 when something else in the row absorbs the
     shrink. The auth cluster is the widest optional block, so it yields first
     and wraps its own contents rather than pushing the logo off the edge. */
  .identifier-site-nav-inner .auth-cluster,
  .omni-command-toolbar .auth-cluster {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
  }

  .identifier-site-nav-inner,
  .omni-command-toolbar {
    align-content: flex-start;
  }

  .identifier-site-nav-inner > .brand-link,
  .omni-command-toolbar .omni-brand-group {
    order: -1 !important;
    margin-inline-start: 0 !important;
  }
}

/* Unified tick switches ------------------------------------------------- */

.feature-switch {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 8px !important;
}

.feature-switch .switch-track {
  width: 18px !important;
  height: 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: 3px !important;
  background: var(--surface-raised) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 55%, transparent) !important;
}

.feature-switch .switch-track::after {
  position: absolute !important;
  top: 2px !important;
  left: 5px !important;
  width: 5px !important;
  height: 9px !important;
  border: 0 !important;
  border-right: 2px solid var(--studio-faint) !important;
  border-bottom: 2px solid var(--studio-faint) !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 0;
  transform: rotate(45deg) !important;
  transition: opacity 120ms ease !important;
}

.feature-switch input:checked + .switch-track {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
  box-shadow: none !important;
}

.feature-switch input:checked + .switch-track::after {
  background: transparent !important;
  opacity: 1;
  transform: rotate(45deg) !important;
}

.feature-switch input:focus-visible + .switch-track {
  outline: 2px solid var(--studio-focus) !important;
  outline-offset: 2px !important;
}