/*
 * Atlas Musical — WordPress compatibility and desktop expansion
 * Version 3.1.0
 * Loaded after the premium layer to neutralize host-theme collisions.
 */

/* Dedicated page: keep the browser/document title, remove only the visible
   title injected by the WordPress theme. */
body.atlas-musical-page .entry-title,
body.atlas-musical-page .page-title,
body.atlas-musical-page .wp-block-post-title {
  display: none !important;
}

@supports selector(:has(*)) {
  body.atlas-musical-page .entry-header:has(> .entry-title:empty),
  body.atlas-musical-page .page-header:has(> .page-title:empty) {
    display: none !important;
  }
}

body.atlas-musical-page .entry-content,
body.atlas-musical-page .post-content,
body.atlas-musical-page .page-content,
body.atlas-musical-page .wp-block-post-content,
body.atlas-musical-page article.page,
body.atlas-musical-page main.site-main,
body.atlas-musical-page .content-area,
body.atlas-musical-page .site-content {
  max-width: none !important;
  overflow: visible !important;
}

body.atlas-musical-page .entry-content,
body.atlas-musical-page .post-content,
body.atlas-musical-page .page-content,
body.atlas-musical-page .wp-block-post-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Break out of narrow theme content columns on the page created by the plugin. */
.atlas-musical.atlas-musical--standalone {
  max-width: 1780px;
  width: calc(100vw - 40px);
  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);
}

@media (min-width: 1820px) {
  .atlas-musical.atlas-musical--standalone {
    margin-left: calc(50% - 890px);
    margin-right: calc(50% - 890px);
    width: 1780px;
  }
}

/* WordPress themes frequently style every button with their brand colour.
   Structural controls must remain transparent inside the Atlas. */
.atlas-musical button {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  box-shadow: none;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
}

.atlas-musical .am-brand,
.atlas-musical .am-card-main,
.atlas-musical .am-text-button,
.atlas-musical .am-back-button,
.atlas-musical .am-side-action {
  background: transparent !important;
  border-color: transparent;
  color: inherit !important;
  box-shadow: none !important;
}

.atlas-musical .am-card-main:hover,
.atlas-musical .am-card-main:focus,
.atlas-musical .am-brand:hover,
.atlas-musical .am-brand:focus {
  background: transparent !important;
}

.atlas-musical .am-primary-nav button {
  background: transparent !important;
  color: var(--am-muted) !important;
}

.atlas-musical .am-primary-nav button:hover {
  background: color-mix(in srgb, var(--am-ink) 6%, transparent) !important;
  color: var(--am-ink) !important;
}

.atlas-musical .am-primary-nav button.is-active {
  background: var(--am-ink) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}

.atlas-musical .am-button-primary {
  background: linear-gradient(135deg, var(--am-ink), color-mix(in srgb, var(--am-ink) 80%, var(--am-accent))) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}

.atlas-musical .am-button-ghost {
  background: color-mix(in srgb, var(--am-surface-solid) 48%, transparent) !important;
  color: var(--am-ink) !important;
}

.atlas-musical .am-icon-button {
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent) !important;
  border-color: var(--am-line) !important;
  color: var(--am-ink) !important;
}

.atlas-musical .am-icon-button:hover,
.atlas-musical .am-icon-button.is-active {
  background: var(--am-ink) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}

/* The backdrop is itself a button. Force it away from the theme's blue button
   treatment; this was the source of the large blue area in the detail view. */
.atlas-musical .am-drawer-backdrop {
  appearance: none !important;
  background: rgba(8, 9, 7, .66) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.atlas-musical .am-drawer-panel {
  background: var(--am-bg) !important;
  max-width: 1320px;
  width: min(1320px, 84vw);
}

.atlas-musical .am-drawer-hero {
  min-height: 500px;
}

.atlas-musical .am-detail-image-placeholder {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.14), transparent 25%),
    color-mix(in srgb, var(--type) 72%, var(--am-ink));
}

/* Card bodies are always Atlas surfaces, never the host theme's button colour. */
.atlas-musical .am-card,
.atlas-musical .am-card-main,
.atlas-musical .am-card-body {
  color: var(--am-ink) !important;
}

.atlas-musical .am-card-body {
  background: var(--am-surface-solid);
}

.atlas-musical .am-card-main:focus-visible {
  outline-offset: -4px;
}

/* Audio: request metadata, expose duration/status outside native controls, and
   make failures understandable rather than leaving a silent broken player. */
.atlas-musical .am-audio-track audio {
  background: transparent;
  display: block;
  height: 44px;
  margin: 15px 0 8px;
  max-width: 100%;
  width: 100%;
}

.atlas-musical .am-audio-meta {
  align-items: center;
  color: var(--am-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .64rem;
  gap: 6px 14px;
  margin: 0 2px 13px;
}

.atlas-musical .am-audio-meta span:first-child {
  color: var(--am-ink);
  font-weight: 800;
}

.atlas-musical .am-audio-meta a {
  font-weight: 800;
  margin-left: auto;
  text-decoration: none;
}

.atlas-musical .am-audio-track.has-audio-error {
  border-color: color-mix(in srgb, var(--am-accent) 42%, var(--am-line));
}

.atlas-musical .am-audio-track.has-audio-error [data-audio-state] {
  color: var(--am-accent);
  font-weight: 750;
}

/* Desktop density: use the available space rather than reproducing a tablet
   layout on a wide monitor. */
@container atlas (min-width: 1380px) {
  .atlas-musical .am-topbar {
    grid-template-columns: minmax(240px, auto) minmax(420px, 820px) minmax(110px, auto);
  }

  .atlas-musical .am-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .atlas-musical .am-card-grid-compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .atlas-musical .am-path-grid-full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .atlas-musical .am-world-layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  }
}

@container atlas (min-width: 1580px) {
  .atlas-musical {
    --am-content-pad: clamp(54px, 4cqi, 88px);
  }

  .atlas-musical .am-hero {
    min-height: 660px;
  }

  .atlas-musical .am-card-visual {
    height: 205px;
  }
}

@container atlas (max-width: 860px) {
  .atlas-musical .am-drawer-panel {
    max-width: 860px;
    width: min(100vw, 860px);
  }

  .atlas-musical .am-drawer-hero {
    min-height: 390px;
  }
}

@media (max-width: 900px) {
  .atlas-musical.atlas-musical--standalone {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    width: 100vw;
  }
}

@media (max-width: 680px) {
  .atlas-musical .am-audio-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .atlas-musical .am-audio-meta a {
    margin-left: 0;
  }
}

/* Compatibility fallback for browsers without :has(). */
@supports not selector(:has(*)) {
  body.atlas-musical-page .entry-header,
  body.atlas-musical-page .page-header {
    display: none !important;
  }
}

/* Native hidden must win over component display rules. Without this rule,
   .am-loading { display:flex } kept the loader visible even after JavaScript
   had finished and set the hidden attribute. */
.atlas-musical[hidden],
.atlas-musical [hidden] {
  display: none !important;
}

/* Width calculations include the component border on all breakpoints. */
.atlas-musical {
  box-sizing: border-box;
}

/* 1.4.0 — hard reset for host themes that force a blue background on every
   button, sometimes with !important. Every structural button is restyled below. */
.atlas-musical button {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

.atlas-musical .am-stat-card,
.atlas-musical .am-path-card,
.atlas-musical .am-timeline-node,
.atlas-musical .am-quiz-choices button,
.atlas-musical .am-related-grid button,
.atlas-musical .am-type-filter {
  background-color: var(--am-surface-solid) !important;
  color: var(--am-ink) !important;
}

.atlas-musical .am-stat-card {
  background-color: color-mix(in srgb, var(--am-surface-solid) 72%, transparent) !important;
}

.atlas-musical .am-path-card {
  background-color: var(--am-surface-solid) !important;
  background-image: none !important;
}

.atlas-musical .am-card-favorite {
  background-color: color-mix(in srgb, var(--am-surface-solid) 92%, transparent) !important;
  color: var(--am-ink) !important;
}

.atlas-musical .am-world-controls button,
.atlas-musical .am-audio-tools button,
.atlas-musical .am-back-button,
.atlas-musical .am-side-action,
.atlas-musical .am-text-button,
.atlas-musical .am-path-steps button {
  background-color: transparent !important;
  color: var(--am-ink) !important;
}

.atlas-musical .am-world-controls button.is-active,
.atlas-musical .am-audio-tools button.is-active {
  background-color: var(--am-ink) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}

.atlas-musical .am-quiz-choices button.is-correct {
  background-color: color-mix(in srgb, var(--am-teal) 14%, var(--am-surface-solid)) !important;
}

.atlas-musical .am-quiz-choices button.is-wrong {
  background-color: color-mix(in srgb, var(--am-accent) 12%, var(--am-surface-solid)) !important;
}

.atlas-musical .am-type-filter.is-active {
  background-color: color-mix(in srgb, var(--type, var(--am-ink)) 15%, var(--am-surface-solid)) !important;
}

.atlas-musical .am-type-filter:first-child.is-active {
  background-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}

.atlas-musical .am-button-primary,
.atlas-musical .am-primary-nav button.is-active,
.atlas-musical .am-icon-button:hover,
.atlas-musical .am-icon-button.is-active {
  color: var(--am-bg) !important;
}

/* 1.5.0 — the type filter itself now carries the established colour code,
   rather than reserving colour for the tiny icon only. */
.atlas-musical .am-type-filter:not(:first-child) {
  background-color: color-mix(in srgb, var(--type) 9%, var(--am-surface-solid)) !important;
  border-color: color-mix(in srgb, var(--type) 28%, var(--am-line)) !important;
  color: color-mix(in srgb, var(--type) 82%, var(--am-ink)) !important;
}

.atlas-musical .am-type-filter:not(:first-child) .am-filter-dot {
  background-color: color-mix(in srgb, var(--type) 18%, var(--am-surface-solid)) !important;
  border-color: color-mix(in srgb, var(--type) 38%, transparent) !important;
  color: var(--type) !important;
}

.atlas-musical .am-type-filter:not(:first-child) small {
  background-color: color-mix(in srgb, var(--type) 12%, var(--am-surface-solid)) !important;
  color: color-mix(in srgb, var(--type) 75%, var(--am-ink)) !important;
}

.atlas-musical .am-type-filter:not(:first-child).is-active {
  background-color: var(--type) !important;
  border-color: var(--type) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--type) 24%, transparent) !important;
  color: #fff !important;
}

.atlas-musical .am-type-filter:not(:first-child).is-active .am-filter-dot,
.atlas-musical .am-type-filter:not(:first-child).is-active small {
  background-color: rgba(255,255,255,.17) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

.atlas-musical .am-page-count-note {
  align-items: center;
  background: color-mix(in srgb, var(--am-surface-solid) 76%, transparent);
  border: 1px solid var(--am-line);
  border-radius: 999px;
  color: var(--am-muted);
  display: inline-flex;
  font-size: .73rem;
  font-weight: 700;
  margin-top: 17px;
  padding: 8px 13px;
}

.atlas-musical .am-page-count-note strong {
  color: var(--am-ink);
  margin-right: 4px;
}

/* Instrument sheets favour a legible documentary plate: the full instrument
   remains visible instead of being cropped like a portrait. */
.atlas-musical .am-detail-type-instrument .am-detail-image-placeholder {
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--type) 14%, transparent), transparent 32%),
    color-mix(in srgb, var(--am-surface-solid) 94%, var(--type)) !important;
}

.atlas-musical .am-detail-type-instrument .am-detail-image-placeholder img {
  background: color-mix(in srgb, #fff 96%, var(--type));
  object-fit: contain;
  padding: clamp(16px, 2.3vw, 34px);
}

.atlas-musical .am-instrument-fallback {
  align-items: center;
  color: var(--type);
  display: flex;
  flex-direction: column;
  gap: 5px;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: absolute;
  text-align: center;
}

.atlas-musical .am-instrument-fallback svg {
  fill: none;
  height: min(48%, 190px);
  margin-bottom: 10px;
  max-width: 260px;
  opacity: .76;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  width: 62%;
}

.atlas-musical .am-instrument-fallback strong {
  color: color-mix(in srgb, var(--type) 76%, var(--am-ink));
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2.2cqi, 2.1rem);
}

.atlas-musical .am-instrument-fallback small {
  bottom: auto;
  color: var(--am-muted);
  font-size: .68rem;
  left: auto;
  max-width: 80%;
  position: static;
}

@container atlas (max-width: 620px) {
  .atlas-musical .am-page-count-note {
    align-items: flex-start;
    border-radius: 14px;
    line-height: 1.4;
  }
}

/* Re-assert type variables after the generic premium filter declaration. */
.atlas-musical .am-type-filter.am-type-composer { --type: #9e3656; }
.atlas-musical .am-type-filter.am-type-work { --type: #b97828; }
.atlas-musical .am-type-filter.am-type-instrument { --type: #26756e; }
.atlas-musical .am-type-filter.am-type-tradition { --type: #3c6590; }
.atlas-musical .am-type-filter.am-type-concept { --type: #72548f; }
.atlas-musical .am-type-filter.am-type-event { --type: #73705c; }

/* 1.6.0 — preserve the new editorial cards against global theme button rules. */
.atlas-musical .am-world-region-card {
  background-color: var(--am-surface-solid) !important;
  background-image: linear-gradient(145deg, color-mix(in srgb, var(--region-card) 13%, var(--am-surface-solid)), var(--am-surface-solid)) !important;
  color: var(--am-ink) !important;
}
.atlas-musical .am-today-card .am-button-primary {
  background-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}
.atlas-musical .am-today-card .am-button-ghost {
  background-color: transparent !important;
  color: var(--am-ink) !important;
}


/* 1.7.0 — keep carousel controls inside the Atlas colour system. */
.atlas-musical .am-today-control,
.atlas-musical .am-today-dot {
  background-color: color-mix(in srgb, var(--am-surface-solid) 76%, transparent) !important;
  background-image: none !important;
  border-color: var(--am-line) !important;
  color: var(--am-ink) !important;
}
.atlas-musical .am-today-control:hover,
.atlas-musical .am-today-control:focus-visible {
  background-color: var(--am-ink) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}
.atlas-musical .am-today-dot.is-active {
  background-color: var(--am-accent) !important;
  border-color: var(--am-accent) !important;
}

/* 2.1.0 — preserve the new quiz palette against aggressive host-theme button rules. */
.atlas-musical .am-quiz-arena .am-quiz-choices button {
  background-color: color-mix(in srgb, var(--am-surface-solid) 96%, var(--type) 4%) !important;
  color: var(--am-ink) !important;
}
.atlas-musical .am-quiz-arena .am-quiz-choices button.is-correct {
  background-color: color-mix(in srgb, #168466 14%, var(--am-surface-solid)) !important;
}
.atlas-musical .am-quiz-arena .am-quiz-choices button.is-wrong {
  background-color: color-mix(in srgb, #b22f4f 12%, var(--am-surface-solid)) !important;
}
.atlas-musical .am-quiz-feedback-actions .am-button-primary,
.atlas-musical .am-quiz-launch-button,
.atlas-musical .am-quiz-finish-actions .am-button-primary {
  background-color: var(--am-ink) !important;
  border-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
}

/* 3.1.1 — Host themes must not collapse relation-card prose into the icon column. */
.atlas-musical .am-related-grid .am-related-card,
.atlas-musical .am-related-grid .am-related-card * {
  min-width: 0;
}
.atlas-musical .am-related-grid .am-related-card > p {
  float: none !important;
  max-width: none !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
}

/* 3.4: neutralise les styles globaux des thèmes sur les nouvelles commandes. */
.atlas-musical .am-mode-switcher button,
.atlas-musical .am-world-area-card,
.atlas-musical .am-circulation-card,
.atlas-musical .am-route-stage,
.atlas-musical .am-cultural-thread-nav button,
.atlas-musical .am-cultural-item {
  font: inherit;
  max-width: none;
  text-decoration: none;
}
.atlas-musical .am-mode-switcher button.is-active,
.atlas-musical .am-cultural-thread-nav button.is-active {
  background-color: var(--am-ink) !important;
  color: var(--am-bg) !important;
  -webkit-text-fill-color: var(--am-bg) !important;
}
.atlas-musical .am-world-area-card,
.atlas-musical .am-circulation-card,
.atlas-musical .am-route-stage,
.atlas-musical .am-cultural-item {
  background-color: var(--am-surface) !important;
  color: var(--am-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* 4.0 — protect provenance and quality controls from host-theme button rules. */
.atlas-musical .am-quality-level-grid button {
  background-color: var(--am-surface-2) !important;
  background-image: none !important;
  color: var(--am-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
.atlas-musical .am-quality-level-grid button strong { color: var(--am-accent) !important; }
.atlas-musical .am-quality-level-grid button span { color: var(--am-ink) !important; }
.atlas-musical .am-quality-level-grid button small { color: var(--am-muted) !important; }