.tabi-header {
    margin-bottom: 2rem;
}

.tabi-header h3 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
}

.tabi-header p {
    margin: 0;
    color: var(--color-blue-300);
}



.tab-live-measure.repeat-start {
    border-left: 5px double var(--color-white);
}

.tab-live-measure.repeat-end {
    border-right: 5px double var(--color-white);
}

.tab-live-measure.repeat-end::after {
    content: "×" attr(data-repeat-count);

    position: absolute;
    right: 4px;
    top: -1.7rem;

    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: bold;
}

.tab-live-measure-meta {
    position: absolute;
    top: -1.7rem;
    right: 0.5rem;

    color: var(--color-blue-300);
    font-size: 0.72rem;
}

.tab-live-comment {
    position: absolute;
    top: -3rem;
    left: 0.5rem;

    color: var(--color-music-accent);
    font-size: 0.8rem;
    font-weight: 700;
}



.tablature {
    width: max-content;
    min-width: 100%;

    font-family: "Courier New", monospace;
}

.tab-string,
.tab-rhythm {
    display: flex;
    align-items: center;
    min-height: 2rem;
}

.tab-string-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    flex: 0 0 2rem;

    color: var(--color-music-accent);
    font-weight: 700;
}

.tab-string-content {
    display: flex;
    align-items: center;
}

.tab-cell,
.tab-duration {
    width: var(--cell-width);
    min-width: var(--cell-width);
    box-sizing: border-box;
    text-align: center;
}

.tab-cell {
    position: relative;

    color: var(--color-blue-300);
    line-height: 1;
    letter-spacing: -0.1rem;
}

.tab-cell::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background: var(--color-stage-line);
    transform: translateY(-50%);

    z-index: 0;
}

.tab-live-cell.tie-start::before {
    background: var(--color-music-accent);
}


.tab-live-cell.tie-end::before {
    height: 2px;
    background: var(--color-music-accent);
}


.tab-live-cell.tie-end::after {
    content: "→";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    padding: 0 0.3rem;

    background: var(--color-stage);

    color: var(--color-music-accent);

    font-size: 0.9rem;
}

.tab-cell.has-note {
    color: var(--color-white);
    font-weight: 700;
    letter-spacing: normal;
}

.tab-cell.has-note::after {
    content: "";
    position: absolute;

    inset: 50% auto auto 50%;

    width: calc(100% - 1.2rem);
    height: 1.25rem;

    background: var(--color-stage-soft);

    transform: translate(-50%, -50%);
    z-index: 1;
}

.tab-cell.has-note {
    isolation: isolate;
}

.tab-cell.has-note {
    z-index: 2;
}

.tab-cell.has-note::before {
    z-index: -2;
}

.tab-cell.has-note::after {
    z-index: -1;
}

.tab-end-bar {
    margin-left: 0.2rem;
    color: var(--color-white);
    font-weight: 700;
}

.tab-rhythm {
    margin-top: 0.4rem;
}

.tab-duration {
    color: var(--color-blue-300);
    font-size: 0.8rem;
}


.partition-placeholder {
    width: 100%;
    overflow: hidden;
}

.tab-scroll-viewport {
    position: relative;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    padding: 2rem 0 1.25rem;

    border: 1px solid var(--color-stage-line);
    border-radius: 8px;

    background: var(--color-stage);

    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.tab-continuous-track {
    display: flex;
    align-items: stretch;

    width: max-content;
    min-width: 100%;

    padding: 0 2rem;
}

.tab-measure {
    position: relative;
    flex: 0 0 auto;

    padding: 1rem 0;

    border-right: 2px solid rgba(232, 238, 244, 0.58);

    cursor: pointer;

    transition:
        background 150ms ease,
        opacity 150ms ease;
}

.tab-measure:first-child {
    border-left: 2px solid rgba(232, 238, 244, 0.58);
}

.tab-measure.is-active {
    background: rgba(184, 211, 232, 0.12);
}

.tab-measure-number {
    position: absolute;
    top: -1.2rem;
    left: 0.5rem;

    color: var(--color-blue-300);
    font-size: 0.75rem;
}

.tab-measure.is-active .tab-measure-number {
    color: var(--color-music-accent);
    font-weight: 700;
}

.tablature {
    font-family: "Courier New", monospace;
}

.tab-string,
.tab-rhythm {
    display: flex;
    align-items: center;

    min-height: 2.3rem;
}

.tab-string-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    flex: 0 0 2.5rem;

    color: var(--color-music-accent);
    font-weight: 700;
}

.tab-string-content {
    display: flex;
    align-items: center;
}

.tab-cell,
.tab-duration {
    width: var(--cell-width);
    min-width: var(--cell-width);

    box-sizing: border-box;

    text-align: center;
}

.tab-cell {
    position: relative;

    height: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-white);
    font-weight: 700;
}

.tab-cell::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background: var(--color-stage-line);

    transform: translateY(-50%);

    z-index: 0;
}

.tab-cell.has-note {
    z-index: 1;
}

.tab-cell.has-note::after {
    content: "";

    position: absolute;

    width: 1.5rem;
    height: 1.5rem;

    border-radius: 3px;

    background: var(--color-stage-soft);

    z-index: -1;
}

.tab-duration {
    color: var(--color-blue-300);
    font-size: 0.85rem;
}

.tab-measure.is-active .tab-cell::before {
    background: rgba(184, 211, 232, 0.68);
}

.tab-measure.is-active .tab-cell.has-note {
    color: var(--color-music-accent);
}



.tab-skip-button,
.tab-timecode {
    min-height: 42px;
    padding: 0.65rem 1rem;

    border: 0;
    border-radius: 8px;

    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.tab-skip-button {
    background: var(--color-blue-900);
    color: var(--color-white);
}

.tab-skip-button:hover {
    background: var(--color-blue-800);
}

.tab-section-select {
    width: 100%;
    min-height: 42px;
    padding: 0.6rem 0.8rem;

    border: 1.5px solid var(--color-line);
    border-radius: 8px;

    background: var(--color-paper-glass-active);
    color: var(--color-ink);

    font: inherit;
}



.tab-timecode {
    background: var(--color-white);
    color: var(--color-ink);
}

.tab-timecode:hover {
    filter: brightness(0.92);
}


/* =========================================================
   TAB LIVE
========================================================= */

.partition-placeholder {
    width: 100%;
    overflow: hidden;
}


.tab-live-viewport {
    position: relative;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    box-sizing: border-box;

    padding:
        3.25rem
        1rem
        0.9rem;

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

    border-radius: 8px;

    background: var(--color-stage);

    scroll-behavior: auto;
    min-height: 18rem;
    max-height: 38rem;
}


.tab-live-track {
    display: flex;

    align-items: stretch;

    width: max-content;

    min-width: 100%;

    padding-right: 18vw;
    padding-bottom: 0.3rem;
}


/* =========================================================
   MESURES
========================================================= */

.tab-live-measure {
    position: relative;

    flex: 0 0 auto;

    padding:
        0.45rem
        0;

    border-right:
        2px solid
        rgba(232, 238, 244, 0.58);

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.tab-live-measure:first-child {
    border-left:
        2px solid
        rgba(232, 238, 244, 0.58);
}


.tab-live-measure.is-active {
    background:
        rgba(
            184,
            211,
            232,
            0.11
        );
}


.tab-live-measure-number {
    position: absolute;

    top: -1.7rem;
    left: 0.45rem;

    color: var(--color-blue-300);

    font-size: 0.75rem;
}


.tab-live-measure.is-active
.tab-live-measure-number {
    color: var(--color-music-accent);
}


/* =========================================================
   CORDES
========================================================= */

.tab-live-string,
.tab-live-rhythm {
    display: flex;

    align-items: center;

    height: 2.2rem;
}


.tab-live-string-label {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 2.5rem;
    min-width: 2.5rem;

    color: var(--color-music-accent);

    font-family: monospace;
    font-weight: bold;
}


.tab-live-string-content {
    display: flex;

    align-items: center;
}


.tab-live-cell {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    height: 2.2rem;

    color: var(--color-white);

    font-family: monospace;
    font-size: 1rem;
    font-weight: bold;
}


/*
 * Ligne de corde
 */
.tab-live-cell::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background: var(--color-stage-line);

    transform:
        translateY(-50%);

    z-index: 0;
}


/*
 * La case passe au-dessus
 * de la ligne.
 */
.tab-live-cell.has-note {
    z-index: 1;
}


.tab-live-cell.has-note::after {
    content: "";

    position: absolute;

    width: 1.5rem;
    height: 1.45rem;

    background: var(--color-stage);

    z-index: -1;
}


/* =========================================================
   RYTHME
========================================================= */

.tab-live-duration {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: var(--color-blue-300);

    font-size: 0.75rem;
}


/* =========================================================
   CURSEUR
========================================================= */

.tab-playhead {
    position: absolute;

    top: 2.55rem;
    bottom: 0.95rem;

    left: 0;

    width: 3px;

    background: var(--color-music-accent);

    pointer-events: none;

    z-index: 50;

    box-shadow:
        0 0 8px
        rgba(
            184,
            211,
            232,
            0.35
        );
}


/*
 * Petit triangle en haut
 */
.tab-playhead::before {
    content: "";

    position: absolute;

    top: -8px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 0;
    height: 0;

    border-left:
        6px solid transparent;

    border-right:
        6px solid transparent;

    border-top:
        8px solid var(--color-music-accent);
}



@media (max-width: 700px) {


    .tab-section-select {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .tab-skip-button {
        font-size: 0.85rem;
    }
}

@media (min-width: 1100px) {

}