/* bdd-keys.css
   The web demo's keyboard, and the two things only the demo needs: a start control and a MIDI
   indicator. Nothing here ships inside the plug-in -- in a DAW the notes come from the host.

   It is a fourth row of the panel's own grid rather than a bar bolted underneath, so it scales
   with everything else and sits inside the same padding. That is why the stage grows by exactly
   one row (100px: 90 plus the 10px row gap) here, and why WAM/build.sh patches STAGE_HEIGHT in
   its copy of yoi-panel.js to match. Change one and you must change the other; the build fails
   loudly if the line it patches has moved. */

#stage.yoi-modern {
    height: 740px;
    grid-template-rows: 46px 398px 132px 90px;
}

#stage.yoi-modern > .bdd-keys { grid-column: 1 / -1; grid-row: 4; }

.bdd-keys {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 0 12px;
    border: 1px solid var(--bdd-line);
    border-radius: var(--bdd-radius);
    background: var(--bdd-card);
}

/* ------------------------------------------------------------------ start */

.bdd-keys__start {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--bdd-accent) !important;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bdd-accent) 14%, var(--bdd-card));
    color: var(--bdd-accent);
    font: 800 10px/1 var(--bdd-font);
    letter-spacing: .12em;
    cursor: pointer;
}

.bdd-keys__start:hover { background: color-mix(in srgb, var(--bdd-accent) 24%, var(--bdd-card)); }

/* Running: it stops being a button and becomes a readout. */
.bdd-keys__start.is-running {
    border-color: var(--bdd-line-strong) !important;
    background: var(--bdd-card);
    color: var(--bdd-muted);
    cursor: default;
}

.bdd-keys__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bdd-accent);
}

.bdd-keys__start.is-running .bdd-keys__dot { background: var(--yoi-blue, #72c8d5); }

/* Loading, and only then: a pulse, so a slow connection looks busy rather than broken. */
.bdd-keys__start.is-loading .bdd-keys__dot { animation: bdd-keys-pulse 1s ease-in-out infinite; }

@keyframes bdd-keys-pulse { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
    .bdd-keys__start.is-loading .bdd-keys__dot { animation: none; }
}

/* --------------------------------------------------------------- the keys */

/* The white keys lay out in a row and the black ones are placed over the seams, so the geometry
   is a piano's rather than a strip of equal buttons. */
.bdd-keys__board {
    position: relative;
    display: flex;
    height: 68px;
    touch-action: none;   /* a drag across the keys plays them; it must not scroll the page */
}

.bdd-keys__key {
    position: relative;
    padding: 0;
    border: 1px solid var(--bdd-well) !important;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.bdd-keys__key--white {
    flex: 1 1 0;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(#e6e9ed, #c3c9d1);
    color: #6a7280;
}

/* Absolutely positioned, so a percentage width here would resolve against the board rather than
   against a white key -- 60% of the whole keyboard each. Both the width and the left offset are
   therefore worked out per key in bdd-keys.js, where the number of white keys is known. */
.bdd-keys__key--black {
    position: absolute;
    top: 0;
    height: 62%;
    z-index: 2;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(#2b3037, #15181c);
    color: var(--bdd-muted);
    transform: translateX(-50%);
}

.bdd-keys__key--white.is-held { background: linear-gradient(color-mix(in srgb, var(--bdd-accent) 45%, #e6e9ed), var(--bdd-accent)); }
.bdd-keys__key--black.is-held { background: linear-gradient(color-mix(in srgb, var(--bdd-accent) 70%, #2b3037), color-mix(in srgb, var(--bdd-accent) 85%, #15181c)); }

.bdd-keys__key:focus-visible { outline: 2px solid var(--bdd-accent); outline-offset: -2px; }

/* C labels only: every key labelled is noise at this size, and the octaves are what you look for. */
.bdd-keys__label {
    position: absolute;
    bottom: 5px; left: 0; right: 0;
    font: 700 8px/1 var(--bdd-font);
    letter-spacing: .06em;
    text-align: center;
    pointer-events: none;
}

/* ---------------------------------------------------------------- the end */

.bdd-keys__aside {
    display: grid;
    justify-items: end;
    row-gap: 4px;
    max-width: 190px;
}

.bdd-keys__hint {
    color: var(--bdd-faint);
    font: 700 8px/1.4 var(--bdd-font);
    letter-spacing: .1em;
    text-align: right;
    text-transform: uppercase;
}

.bdd-keys__midi {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 6px;
    color: var(--bdd-faint);
    font: 700 8px/1 var(--bdd-font);
    letter-spacing: .12em;
}

.bdd-keys__midi .bdd-keys__dot { background: var(--bdd-line-strong); }
.bdd-keys__midi.is-on { color: var(--yoi-blue, #72c8d5); }
.bdd-keys__midi.is-on .bdd-keys__dot { background: var(--yoi-blue, #72c8d5); }

/* ------------------------------------------------- what the demo can't do

   The web demo doesn't save (YOI_DOCS/decisions/web-audio-module.md): there is nowhere to save to
   and nothing to save it for. So SAVE AS, DELETE and the DEMO/ACTIVATE badge go, and the LICENSE
   page goes with them -- a demo has nothing to activate.

   Hidden here, in the demo's own stylesheet, rather than by teaching yoi-panel.js a demo mode:
   this is the one page where it applies, and the shared editor stays byte-identical across the AU,
   the VST3 and the web. The decision doc's route (the plug-in sends a status and the page hides
   them when told) is the better long-term home for it, once something other than this page needs
   it. The preset menu itself stays: factory presets are still to come. */

#preset-save, #preset-delete, #license-badge { display: none !important; }

/* The LICENSE tab and its page. The page is hidden by class because showDetailsPage() sets
   `hidden` on each page as it switches, so hiding it only while hidden wouldn't hold. The tab
   stays in the tab bar's arrow-key order (that lives in bdd-controls.js, not in CSS), so an arrow
   press can still land on it; it lands on an empty sheet rather than on a license form. */
.details-tabs .tab[aria-label="LICENSE"] { display: none !important; }
.details-page.license-page { display: none !important; }