:root{
  color-scheme:dark;
  /* A8-COMPOSER-ROOT-DARK-SCHEME-v1 */

  --line:
    color-mix(
      in srgb,
      #eef5f8 23%,
      transparent
    );

  --muted:
    color-mix(
      in srgb,
      #eef5f8 65%,
      transparent
    );

  --gold:#e2b85c;
  --blue:#83adff;
  --good:var(--gold);
  --bad:#ef8b8b;
}

*{
  box-sizing:border-box;
}

body{
  color:#eef5f8;
  /* A8-COMPOSER-EXPLICIT-DARK-PALETTE-v1 */
  max-width:1180px;

  margin:22px auto;

  padding:
    0 14px 60px;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.42;

  background:
    linear-gradient(
      rgba(7,9,13,.68),
      rgba(7,9,13,.85)
    ),
    url("/music/assets/a8_audio_antique_bg.png")
      center/cover
      scroll no-repeat;
}

.panel{
  margin:14px 0;
  padding:16px;

  border:
    1px solid
    var(--line);

  border-radius:14px;

  background:
    color-mix(
      in srgb,
      #111315 90%,
      transparent
    );

  backdrop-filter:
    none;
}

h1{
  margin:
    .2rem 0
    .6rem;

  font-size:
    clamp(
      2.3rem,
      6vw,
      4.8rem
    );

  line-height:.94;
  letter-spacing:-.05em;
}

h2,
h3{
  margin:
    .15rem 0
    .5rem;
}

.sub{
  color:var(--muted);
}

.eyebrow{
  color:var(--gold);

  font-size:.74rem;
  font-weight:850;

  letter-spacing:.15em;
  text-transform:uppercase;
}

button,
input{
  font:inherit;
}

button{
  border:
    1px solid
    var(--line);

  border-radius:8px;

  min-height:38px;

  padding:
    7px 10px;

  background:#111315;
  color:#eef5f8;

  cursor:pointer;
  font-weight:750;
}

button:hover{
  transform:
    translateY(-1px);
}

button:disabled{
  opacity:.38;
  cursor:not-allowed;
  transform:none;
}

button.primary{
  background:
    linear-gradient(
      #f4da85,
      #c89c3c
    );

  color:#181208;

  border-color:#efd175;
}

button.play{
  background:
    linear-gradient(
      #bbd2ff,
      #739fff
    );

  color:#071326;
}

button.selected{
  outline:
    2px solid
    var(--gold);
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.status{
  font-weight:800;
}

.status.good{
  color:var(--good);
}

.status.bad{
  color:var(--bad);
}


/* ==================================================
   NOTE / REST PALETTE
   ================================================== */

.palette-rest-row{
  display:grid;

  grid-template-columns:
    88px 1fr;

  gap:12px;
  align-items:center;

  margin-bottom:12px;
}

.rest-source{
  min-height:62px;

  display:grid;
  place-items:center;

  background:
    rgba(140,140,140,.12);

  border-style:dashed;
}

.rest-source strong{
  font-size:1.55rem;
}

.rest-source small{
  color:var(--muted);
}

.palette-octave{
  display:grid;

  grid-template-columns:
    65px
    minmax(
      760px,
      1fr
    );

  align-items:center;

  gap:8px;

  margin:6px 0;
}

.octave-label{
  font-size:.72rem;
  font-weight:850;

  color:var(--muted);
}

.palette-scroll{
  overflow-x:auto;
}

.palette-notes{
  display:grid;

  grid-template-columns:
    repeat(
      12,
      minmax(
        58px,
        1fr
      )
    );

  gap:5px;
}

.note-source{
  min-width:0;
  min-height:52px;

  display:grid;
  gap:1px;

  text-align:center;
}

.note-source strong{
  font-size:1rem;
}

.note-source small{
  overflow:hidden;

  text-overflow:ellipsis;

  font:
    650 .67rem
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  color:var(--muted);
}


/*
 * Keep the palette and open score bar
 * visually together.
 */
#palettePanel{
  margin-bottom:6px;
}

#scorePanel{
  margin-top:6px;
  margin-bottom:6px;
}


/* ==================================================
   SINGLE INSPECTOR
   ================================================== */

.inspector{
  position:static;

  top:auto;

  z-index:auto;

  border:
    2px solid
    color-mix(
      in srgb,
      var(--gold) 55%,
      var(--line)
    );

  box-shadow:
    0 9px 30px
    rgba(0,0,0,.26);
}

.inspector-head{
  display:flex;

  justify-content:
    space-between;

  gap:12px;

  align-items:center;

  margin-bottom:10px;
}

.selection-identity{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}

.selection-identity strong{
  font-size:1.15rem;
}

.selection-identity span{
  color:var(--muted);
  font-size:.8rem;
}

.inspector-grid{
  display:grid;

  grid-template-columns:
    1.2fr 1fr 1fr;

  gap:10px;
}

.inspector-box{
  min-width:0;

  padding:10px;

  border:
    1px solid
    var(--line);

  border-radius:9px;
}

.inspector-box label{
  display:grid;
  gap:4px;

  color:var(--muted);

  font-size:.72rem;
  font-weight:800;
}

.inspector-box input[type=text]{
  width:100%;

  min-height:38px;

  padding:6px 8px;

  border:
    1px solid
    var(--line);

  border-radius:7px;

  background:#111315;
  color:#eef5f8;
}

.segment-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;

  margin-top:6px;
}

.seg-btn{
  min-height:31px;

  padding:
    4px 7px;

  font-size:.73rem;
}

.inspector-footer{
  display:flex;

  justify-content:
    space-between;

  gap:10px;

  align-items:center;

  flex-wrap:wrap;

  margin-top:10px;
}

.rest-after{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}

.rest-after > span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
}


/* ==================================================
   BAR STACK
   ================================================== */

.song-head{
  display:flex;

  justify-content:
    space-between;

  gap:12px;

  align-items:end;

  flex-wrap:wrap;
}

.bar-stack{
  display:grid;
  gap:8px;

  margin-top:12px;
}

.bar-card{
  overflow:hidden;

  border:
    1px solid
    var(--line);

  border-radius:11px;

  background:
    rgba(5,10,18,.18);
}

.bar-card.complete{
  border-left:
    4px solid
    var(--good);
}

.bar-card.active{
  box-shadow:
    0 0 0 2px
    rgba(226,184,92,.26);
}

.bar-header{
  padding:7px;
}

.bar-open{
  width:100%;

  display:grid;

  grid-template-columns:
    auto auto 1fr;

  gap:10px;

  align-items:center;

  text-align:left;

  border:0;
}

.bar-open > span{
  color:var(--gold);
  font-size:.70rem;
}

.bar-open small{
  color:var(--muted);

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* THE MUSICAL SURFACE */

.music-lane{
  position:relative;

  display:grid;

  grid-template-columns:
    repeat(
      64,
      minmax(
        0,
        1fr
      )
    );

  min-height:88px;

  margin:
    0 10px 9px;

  border:
    2px solid
    var(--line);

  border-radius:8px;

  overflow:hidden;

  background-image:
    linear-gradient(
      to bottom,
      transparent 24%,
      rgba(255,255,255,.08) 25%,
      transparent 26%,
      transparent 49%,
      rgba(255,255,255,.08) 50%,
      transparent 51%,
      transparent 74%,
      rgba(255,255,255,.08) 75%,
      transparent 76%
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent
        calc(
          1.5625% - 1px
        ),
      rgba(255,255,255,.07)
        calc(
          1.5625% - 1px
        ),
      rgba(255,255,255,.07)
        1.5625%
    );
}

.music-lane.drag-over{
  outline:
    3px solid
    var(--blue);

  outline-offset:2px;
}

.score-chip{
  min-width:0;

  margin:7px 1px;

  padding:4px;

  display:grid;

  place-items:center;

  align-content:center;

  gap:2px;

  overflow:hidden;

  border-radius:7px;

  box-shadow:
    0 4px 10px
    rgba(0,0,0,.22);
}

.note-chip{
  background:
    color-mix(
      in srgb,
      var(--blue) 35%,
      #111315
    );
}

.rest-chip{
  background:
    color-mix(
      in srgb,
      #eef5f8 12%,
      #111315
    );

  border-style:dashed;
}

.score-chip.selected{
  outline:
    3px solid
    var(--gold);

  z-index:2;
}

.score-chip.playing{
  box-shadow:
    0 0 0 3px
    var(--good),
    0 0 22px
    color-mix(in srgb,var(--gold) 40%,transparent);
}

.chip-symbol{
  font-size:
    clamp(
      .72rem,
      1.8vw,
      1.25rem
    );

  font-weight:900;
}

.score-chip small{
  font:
    700 .61rem
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.bar-footer{
  display:flex;

  justify-content:
    space-between;

  gap:10px;

  align-items:center;

  flex-wrap:wrap;

  padding:
    8px 10px 10px;
}

.bar-meter{
  display:flex;
  gap:12px;

  color:var(--muted);

  font-size:.76rem;
}

.bar-meter strong{
  color:#eef5f8;
}

.bar-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}


/* ==================================================
   JOVIAN QUICK AREA
   ================================================== */

.jovian-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}

.jovian-read{
  font:
    800 1rem
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  padding:6px 9px;

  border:
    1px solid
    var(--line);

  border-radius:8px;
}


/* ==================================================
   PLAYER
   ================================================== */

.player-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.file-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:10px;
}

input[type=text]{
  min-height:39px;

  padding:6px 8px;

  border:
    1px solid
    var(--line);

  border-radius:8px;

  background:#111315;
  color:#eef5f8;
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media(max-width:850px){

  .inspector{
    position:static;
  }

  .inspector-grid{
    grid-template-columns:
      1fr;
  }

  .palette-octave{
    grid-template-columns:
      55px
      minmax(
        720px,
        1fr
      );
  }

}

@media(max-width:560px){

  body{
    padding:
      0 8px 40px;
  }

  .panel{
    padding:12px;
  }

  .bar-open{
    grid-template-columns:
      1fr;
  }

  .bar-open small{
    white-space:normal;
  }

  .music-lane{
    min-height:76px;
  }

}



/*
 * Composer navigation placement only.
 *
 * The menu contents remain the exact
 * mirrored Audio-page dropdown.
 */

body {
  position: relative;
}

.a8ComposerTopMenu {
  position: relative;
  top: auto;
  right: auto;
  z-index: 100;
  margin: 0;
  flex: 0 0 auto;
}

.a8ComposerTopMenu > summary {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;
  padding: 4px 9px;

  border: 1px solid rgba(127,127,127,.42);
  border-radius: 999px;

  cursor: pointer;
  user-select: none;

  background: #111315;
  color: #eef5f8;

  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .025em;

  list-style: none;
}

.a8ComposerTopMenu > summary::-webkit-details-marker {
  display: none;
}

.a8ComposerTopMenu[open] {
  z-index: 200;
}

/*
 * Keep the opened menu anchored against
 * the right edge rather than expanding
 * toward the COSIGO title.
 */
.a8ComposerTopMenu > :not(summary) {
  position: relative;
}

@media (max-width: 700px) {

  .a8ComposerTopMenu > summary {
    min-height: 30px;
    padding: 3px 8px;
  }

}




/*
 * A8 COMPOSER · HUMAN MUSIC DOORS
 *
 * Fixed inside the top bar rather than participating
 * in flex wrapping. COSIGO stays left; MENU stays right.
 */
.cosigo-global-nav .a8-topline{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  position:relative;
  min-height:42px;
}

.a8ComposerMusicDoors{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex:0 0 auto;
  z-index:150;
}

.a8ComposerMusicPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid #425467;
  border-radius:999px;
  background:rgba(17,24,32,.74);
  color:#c8ddf5;
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.055em;
  text-decoration:none;
  white-space:nowrap;
}

.a8ComposerMusicPill:hover,
.a8ComposerMusicPill:focus-visible{
  background:#182431;
  color:#fff;
  border-color:#6f8499;
  outline:none;
}

@media (max-width:760px){

  .a8ComposerMusicDoors{
    gap:5px;
  }

  .a8ComposerMusicPill{
    min-height:30px;
    padding:5px 7px;
    font-size:.62rem;
    letter-spacing:.035em;
  }

}


/*
 * Exact Audio-page dropdown structure:
 *
 * details.a8ComposerTopMenu
 *   summary
 *   div.a8-menu-panel
 *     a
 *     a
 *     ...
 */

.a8ComposerTopMenu .a8-menu-panel {
  display: block;
  position: absolute;
  z-index: 1000;
  right: 0;
  top: calc(100% + 7px);
  min-width: 180px;
  padding: 7px;
  border: 1px solid #425467;
  border-radius: 9px;
  background: #0d141b;
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
}

.a8ComposerTopMenu .a8-menu-panel a {
  display: block;
  width: auto;
  padding: 9px 10px;
  margin: 0;
  border-radius: 6px;
  color: #c8ddf5;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.a8ComposerTopMenu .a8-menu-panel a:hover,
.a8ComposerTopMenu .a8-menu-panel a:focus,
.a8ComposerTopMenu .a8-menu-panel a[aria-current="page"] {
  background: #182431;
  color: #fff;
}

@media (max-width: 760px) {

  .a8ComposerTopMenu .a8-menu-panel {
    min-width: 170px;
    max-width: calc(100vw - 24px);
  }

  .a8ComposerTopMenu .a8-menu-panel a {
    white-space: normal;
  }

}


/* A8-CONNECT-PULSE-V1 */
#connectCore{
  border-color:var(--good);
  animation:a8ConnectPulse 1.6s ease-in-out infinite;
}

@keyframes a8ConnectPulse{
  0%,100%{
    box-shadow:
      0 0 0 2px color-mix(in srgb,var(--gold) 18%,transparent),
      0 0 8px color-mix(in srgb,var(--gold) 28%,transparent);
  }

  50%{
    box-shadow:
      0 0 0 5px color-mix(in srgb,var(--gold) 30%,transparent),
      0 0 24px color-mix(in srgb,var(--gold) 85%,transparent);
  }
}

@media (prefers-reduced-motion:reduce){
  #connectCore{
    animation:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent);
  }
}
/* A8-CONNECT-PULSE-V1-END */

/* ==================================================
   A8-COMPOSER-GLASS-CARDS-FINAL
   Presentation only.
   No score, Core20, playback or submission logic.
   ================================================== */

.panel{
  background:
    rgba(7,11,16,.28) !important;

  backdrop-filter:
    blur(1px);

  -webkit-backdrop-filter:
    blur(1px);
}


/* Event-editing wells inside the inspector. */
.inspector-box{
  background:
    rgba(8,14,21,.18);
}


/*
 * Individual score bars were already translucent.
 * Open them slightly more while retaining boundaries.
 */
.bar-card{
  background:
    rgba(5,10,18,.14) !important;
}


/*
 * Core20 observer is injected dynamically by JS.
 * Specific selectors + !important keep this final
 * presentation authoritative regardless of injection order.
 */
#a8ComposerCoreObserver{
  background:
    rgba(7,11,16,.22) !important;

  backdrop-filter:
    blur(1px);

  -webkit-backdrop-filter:
    blur(1px);
}

#a8ComposerCoreObserver
.a8CoreObserverState{
  background:
    rgba(8,14,21,.20) !important;
}

#a8ComposerCoreObserver
.a8CoreObserverCell{
  background:
    rgba(8,14,21,.16) !important;
}

/* ==================================================
   A8-COMPOSER-DESKTOP-GLASS-ALL-WIDTHS-v1

   Desktop presentation is authoritative at every width.
   Responsive rules may rearrange layout, but they do not
   repaint the Composer laboratory.

   color-scheme is scoped to the dark operational surfaces
   so #111315 / #eef5f8 cannot flip to light-OS colors
   on phones.
   ================================================== */

.panel,
#a8ComposerCoreObserver{
  color-scheme:dark;
  color:#eef5f8;
}

/*
 * No mobile glass repaint exists here.
 * Phone/tablet inherit the exact desktop glass paint:
 *
 * panel                  rgba(7,11,16,.28) + blur(1px)
 * inspector-box          rgba(8,14,21,.18)
 * bar-card               rgba(5,10,18,.14)
 * Core20 observer        rgba(7,11,16,.22) + blur(1px)
 * observer state         rgba(8,14,21,.20)
 * observer cell          rgba(8,14,21,.16)
 */



/* ==========================================================
   A8 COMPOSER MOBILE PALETTE POINTER DRAG v1

   Only palette source controls own touch drag.
   The page outside these controls keeps normal scrolling.
   ========================================================== */

@media (hover:none), (pointer:coarse){

  .note-source,
  .rest-source{
    touch-action:none;

    -webkit-user-select:none;
    user-select:none;
  }

  .note-source.a8-touch-drag-source,
  .rest-source.a8-touch-drag-source{
    transform:scale(1.06);

    opacity:.78;

    outline:
      3px solid
      var(--gold);

    outline-offset:2px;
  }
}


/*
 * Active finger drag only.
 * No score geometry or timing change.
 */
body.a8-composer-touch-dragging{
  -webkit-user-select:none;
  user-select:none;
}

/* ==================================================
   A8 COMPOSER MOBILE EXISTING SCORE REORDER v1

   Existing score chips become direct touch-drag
   handles on coarse/touch devices.

   Pointer position changes ORDER only.
   It never defines A8 duration.
   ================================================== */

@media (hover:none), (pointer:coarse){

  #bars .score-chip{
    touch-action:none;
  }

  #bars
  .score-chip
  .a8-touch-score-drag-source{
    cursor:grabbing;
  }

  #bars
  .score-chip.a8-touch-score-drag-source{
    opacity:.68;
  }
}

body.a8-composer-score-touch-dragging{
  user-select:none;
  -webkit-user-select:none;
}


/* =============================================================
   CHARLIE MUSIC_A · FLOATING GLASS EVENT EDITOR · VISUAL TEST
   Selected event only. No event handlers or music timing changes.
   ============================================================= */
@supports selector(:has(*)) {
  body:has(#inspectorBody:not([hidden])) #inspector {
    position: fixed;
    top: auto;
    right: 18px;
    bottom: 18px;
    left: auto;
    z-index: 150;
    width: min(760px, calc(100vw - 36px));
    max-height: min(72vh, 730px);
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    background: rgba(10, 19, 30, .78) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 14px 45px rgba(0,0,0,.55);
  }
  body:has(#inspectorBody:not([hidden])) #inspector .inspector-box {
    background: rgba(8,14,21,.63);
  }
  @media (max-width: 850px) {
    body:has(#inspectorBody:not([hidden])) #inspector {
      right: 8px;
      bottom: 8px;
      width: calc(100vw - 16px);
      max-height: 55vh;
    }
  }
}
/* END CHARLIE FLOATING GLASS EVENT EDITOR */