/* ==========================================================================
   Guitar Imp — chords
   The chord box is the same instrument as the neck in the other tools, turned
   to face you and cut down to five frets: rosewood, six strings at their real
   gauges, pearl markers, and a bone nut when the box is at the first fret. The
   cells and their dots are the shared ones from style.css, so a dot here means
   what it means everywhere else on the site.
   ========================================================================== */

.chord {
    --gut-width: 26px;
}

/* The name is the diagram's title and its own input: there is nowhere else on a
   phone screen to put a text field, and a chord that has been named wants the
   name over the box anyway. */
.chord__name {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 5px 0 7px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--bone);
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 5.6vw, 26px);
    /* Syne sits tall in its line box and an input clips what overflows, so the
       cap of a letter loses its top at anything tighter than this. */
    line-height: 1.35;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.chord__name::placeholder {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: var(--nickel);
}

.chord__name:focus { border-bottom-color: var(--glow); }

/* --------------------------------------------------------------------------
   Open and muted strings

   The row above the nut, on the same column template as the board so a mark
   sits over its own string.
   -------------------------------------------------------------------------- */

.chord__marks {
    display: grid;
    grid-template-columns: var(--gut-width) repeat(6, minmax(0, 1fr));
    padding-bottom: 3px;
}

.mark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 5px 0;
    border: 0;
    background: none;
    color: var(--bone);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mark__sym { display: block; height: 1em; }

.mark.is-muted { color: var(--nickel); }

@media (hover: hover) {
    .mark:hover { color: var(--glow); }
}

/* --------------------------------------------------------------------------
   The box
   -------------------------------------------------------------------------- */

/* At the first fret the nut is bone, the way it is under the header. Anywhere
   else up the neck there is no nut to draw, only the fret wire below the last
   fret the box is not showing. */
.chord__nut {
    height: 7px;
    margin-left: var(--gut-width);
    border-radius: 0 0 2px 2px;
    background: linear-gradient(180deg, #f6eddc, #d3c8b1 55%, #857a6a);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .6);
}

.chords.is-high .chord__nut {
    height: 2px;
    border-radius: 0;
    background: rgba(214, 206, 192, .45);
    box-shadow: none;
}

.chord__body {
    display: grid;
    grid-template-columns: var(--gut-width) minmax(0, 1fr);
    /* Five frets, tall enough for a thumb and short enough that the box, its
       name and the controls under it all fit a phone in portrait. */
    height: clamp(200px, 31vh, 270px);
}

.chord__nums {
    display: grid;
    grid-template-rows: var(--rows);
}

.chord__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: var(--rows);
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, var(--rosewood), var(--rosewood-mid) 60%, var(--rosewood-dark));
    box-shadow:
        inset 13px 0 22px -13px rgba(0, 0, 0, .8),
        inset -13px 0 22px -13px rgba(0, 0, 0, .8);
    overflow: hidden;
    /* A barre is drawn by dragging across a fret, so a sideways drag belongs to
       the board; an up-and-down one still scrolls the page. */
    touch-action: pan-y;
}

/* The fret wire is the cell's own bottom edge, the same way the neck closes its
   last fret without a row to hang the wire on. */
.chord__board .cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(214, 206, 192, .45);
}

.chord__wood,
.chord__barres {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: var(--rows);
    pointer-events: none;
}

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

/* Grain, raked off-vertical the same way the neck's is. */
.chord__wood::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: repeating-linear-gradient(
        93deg,
        rgba(255, 240, 220, .014) 0 2px,
        transparent 2px 11px
    );
}

/* One slot per row. A marked fret shows a pearl in the middle of its row; the
   twelfth and twenty-fourth show the usual pair. */
.chord__marker { position: relative; }

.chord__marker .pearl {
    display: none;
    top: 50%;
}

.chord__marker.is-marked .pearl:first-child,
.chord__marker.is-double .pearl { display: block; }

.chord__marker.is-double .pearl:first-child { margin-left: -16.667%; }
.chord__marker.is-double .pearl:last-child  { margin-left:  16.667%; }

/* A barre: one bar in the row it is held at, running from the middle of the
   first string it covers to the middle of the last. The bar sits over the
   cells and takes no taps of its own — tapping a cell it covers lifts it. */
.barre {
    align-self: center;
    height: min(26px, 84%);
    border-radius: 999px;
    background: var(--glow);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
}

.barre.is-draft { opacity: .45; }

/* --------------------------------------------------------------------------
   Under the box
   -------------------------------------------------------------------------- */

.chord__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(12px, 3vw, 16px);
}

.pos {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
}

.pos__step {
    width: 36px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--bone);
    font: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pos__step:disabled { opacity: .3; cursor: default; }

.pos__label {
    min-width: 46px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--bone-dim);
    font-variant-numeric: tabular-nums;
}

.chord__go { min-width: 108px; text-align: center; border: 0; font-family: inherit; cursor: pointer; }

/* A string lights as it is struck, so a strum reads as well as it sounds. */
.chord .gut { transition: opacity .3s ease; }
.chord .gut.is-ringing { opacity: .55; transition-duration: .05s; }

@media (max-width: 359px) {
    .chord { --gut-width: 20px; }
    .chord__go { min-width: 92px; }
}