/* =============================================================================
   styles.css — the drum machine's own sheet

   Tokens only. Every colour here is a var() that site.css defines and dark.css
   redefines, so this one file serves both editions and there is nothing to keep
   in step. A literal colour in this file is a bug in the dark edition that the
   paper edition cannot show you.

   Two house rules are load-bearing in this file and both were paid for
   elsewhere on the site:

     * --accent is an INK, never a large fill. A block that has to be the
       accent colour takes --accent-fill and puts --on-accent on top of it.
     * Nothing may make the document wider than the viewport. The sixteen-step
       grid does not scroll sideways and does not overflow: under 40rem it
       re-lays itself as two lines of eight, which is half a bar a line.
   ========================================================================== */

/* ------------------------------------------------------------ the transport */
.dm-transport {
    display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
}
.dm-transport .run__kbd { margin-left: auto; }
@media (max-width: 44rem) {
    .dm-transport .run__kbd { margin-left: 0; flex-basis: 100%; }
}
.dm-transport .btn--go {
    min-width: 7.5rem; font-size: .92rem; padding: .85rem 1.4rem;
    letter-spacing: .06em; text-transform: uppercase;
}

/* The output meter. Small, and it reports the analyser that sits after the
   kill — which is to say it reports what is actually leaving the page. */
.dm-meter {
    display: block; width: 64px; height: 6px; flex: 0 0 auto;
    border-radius: 3px; background: var(--tint);
    border: 1px solid var(--line); overflow: hidden;
}
.dm-meter i {
    display: block; height: 100%; width: 0;
    background: var(--accent-fill);
    transition: width .07s linear;
}
@media (prefers-reduced-motion: reduce) { .dm-meter i { transition: none; } }

/* ------------------------------------------------------------------ the grid */
.dm-gridwrap { margin: .2rem 0 .3rem; }
.dm-grid { display: grid; gap: .4rem; }

.dm-row {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: a 1fr track grows to min-content, and one
       unwrappable strip of sixteen cells would then set the width of the whole
       document. */
    grid-template-columns: 6.2rem minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
}

/* A <button> renders as a framed grey box until it is reset — the same defect
   this site fixed in twenty-three copies of the menu row. */
.dm-name {
    display: flex; align-items: baseline; gap: .4rem;
    font: inherit; text-align: left; cursor: pointer;
    padding: .5rem .6rem; min-width: 0;
    border: 1px solid var(--line); border-radius: 9px;
    background: transparent; color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dm-name:hover { border-color: var(--ink); }
.dm-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-name b {
    font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-name span {
    margin-left: auto; font-size: .66rem; font-weight: 700;
    color: var(--ink-55); font-variant-numeric: tabular-nums;
}
.dm-name.is-sel { border-color: var(--ink); background: var(--tint); }
.dm-name.is-muted b { text-decoration: line-through; }
.dm-name.is-muted { opacity: .55; }

.dm-steps {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: .25rem;
    min-width: 0;
}

.dm-cell {
    -webkit-appearance: none; appearance: none;
    height: 30px; min-width: 0; padding: 0;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--paper); cursor: pointer;
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .dm-cell { transition: none; } }
/* The top of each beat, as a reading aid. It is not a state and it carries no
   sound with it. */
.dm-cell.is-beat { background: var(--tint); border-color: var(--line); }
.dm-cell:hover { border-color: var(--ink); }
.dm-cell.is-on { background: var(--ink); border-color: var(--ink); }
.dm-cell.is-acc { background: var(--accent-fill); border-color: var(--accent); }
.dm-cell.is-out { opacity: .32; }
.dm-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The playhead. An outline rather than a fill, so it reads on all three cell
   states — and on the accented cell, where an accent outline would vanish into
   the fill, it flips to the ink. */
.dm-cell.is-now { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-cell.is-acc.is-now { outline-color: var(--ink); }

/* The keyboard cursor, drawn inside the cell so it can sit under the playhead
   outline without the two fighting for the same two pixels. */
.dm-cell.is-cursor { box-shadow: inset 0 0 0 2px var(--ink-55); }
.dm-cell.is-on.is-cursor, .dm-cell.is-acc.is-cursor { box-shadow: inset 0 0 0 2px var(--paper); }

/* Under 40rem the name goes above its own row of steps and the sixteen cells
   fall into two lines of eight. Sixteen cells across a 360px phone would be
   twenty pixels each, which is not a target a finger can hit. */
@media (max-width: 40rem) {
    .dm-row { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding-bottom: .35rem; }
    .dm-row + .dm-row { border-top: 1px solid var(--line-soft); padding-top: .55rem; }
    .dm-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .dm-cell { height: 34px; }
    .dm-name { padding: .35rem .5rem; }
}

/* ----------------------------------------------------------- the voice panel */
.dm-voice {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--paper); padding: .95rem 1rem;
    display: grid; gap: .9rem;
}
.dm-voice__head {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
}
.dm-voice__head .lbl { margin: 0 auto 0 0; font-size: .72rem; letter-spacing: .14em; }
.dm-voice__acts { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- the slots */
.dm-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    gap: .5rem;
}
.dm-slot {
    display: flex; flex-direction: column; gap: .12rem; min-width: 0;
    font: inherit; text-align: left; cursor: pointer;
    padding: .6rem .7rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: transparent; color: var(--ink);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dm-slot:hover { border-color: var(--ink); }
.dm-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-slot b { font-size: .85rem; font-weight: 600; }
.dm-slot span { font-size: .72rem; color: var(--ink-55); }
.dm-slot.is-full { background: var(--tint); }
.dm-slot.is-sel { border-color: var(--ink); }
.dm-slot.is-sel b { text-decoration: underline; text-underline-offset: 3px; }

.dm-slotacts { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ----------------------------------------------------------------- the link
   16px is the floor on any input this site ships: below it iOS Safari zooms
   the page on focus and carries the fixed header off the screen with it. The
   house .field is .95rem, so this one field says so itself. */
.dm-link { font-size: 1rem; }