/* Coquille : un espace de lecture et une navigation en verre. */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--gl-space-l);
}

body {
    min-height: 100dvh;
    background: var(--gl-bg);
    background-image: radial-gradient(ellipse at 0 0, color-mix(in oklch, var(--gl-wash) 45%, transparent), transparent 65%);
    background-attachment: fixed;
    color: var(--gl-text);
    font: var(--gl-text-body)/var(--gl-leading-body) var(--gl-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[hidden] {
    display: none !important;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button, summary, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

button, summary {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

input, textarea {
    caret-color: var(--gl-ink);
}

textarea::placeholder, input::placeholder {
    color: var(--gl-text-2);
    opacity: 1;
}

::selection {
    background: color-mix(in oklch, var(--gl-accent-wash) 45%, transparent);
    color: var(--gl-text);
}

:focus-visible {
    outline: 2px solid var(--gl-accent-ink);
    outline-offset: 3px;
    box-shadow: var(--gl-focus-ring);
}

:where(h1, h2, h3) {
    font-weight: var(--gl-weight-semibold);
    letter-spacing: var(--gl-tracking-tight);
    line-height: var(--gl-leading-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--gl-text-title1);
}

h2, h3 {
    font-size: var(--gl-text-title3);
}

svg {
    flex: none;
}

.muted {
    color: var(--gl-text-2);
}

kbd {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--gl-surface-sunken);
    color: var(--gl-text-2);
    font: var(--gl-text-footnote) var(--gl-font-mono);
}

.skip-link {
    position: fixed;
    left: var(--gl-gutter);
    top: var(--gl-space-s);
    z-index: 100;
    padding: var(--gl-space-xs);
    border-radius: var(--gl-radius-s);
    background: var(--gl-surface);
    color: var(--gl-accent-ink);
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link:focus {
    width: auto;
    height: auto;
    padding: var(--gl-space-xs);
    clip-path: none;
}

.app {
    min-height: 100dvh;
    padding-left: var(--gl-sidebar);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--gl-space-s);
    width: var(--gl-sidebar);
    padding: var(--gl-space-s);
    background: var(--gl-glass);
    backdrop-filter: var(--gl-glass-filter);
    -webkit-backdrop-filter: var(--gl-glass-filter);
    box-shadow: var(--gl-glass-rim), var(--gl-shadow-1);
}

.topbar {
    padding: var(--gl-space-2xs) var(--gl-space-xs);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--gl-space-xs);
}

.brand-mark {
    width: 24px;
    height: 24px;
    color: var(--gl-ink);
}

.brand-name {
    font-size: var(--gl-text-body);
    font-weight: var(--gl-weight-semibold);
    letter-spacing: var(--gl-tracking-tight);
}

.module-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-y: auto;
}

.nav-item, .exercise-toggle, .tools-toggle {
    display: flex;
    align-items: center;
    gap: var(--gl-space-xs);
    width: 100%;
    min-height: var(--gl-tap);
    padding: var(--gl-space-2xs) var(--gl-space-xs);
    border: 0;
    border-radius: var(--gl-radius-s);
    background: transparent;
    color: var(--gl-text);
    font-size: var(--gl-text-body);
    font-weight: var(--gl-weight-medium);
    text-align: left;
    list-style: none;
    cursor: pointer;
    transition: background var(--gl-dur-1) var(--gl-ease);
}

.nav-item:hover {
    background: var(--gl-surface-sunken);
}

.nav-item.is-active, .exercise-toggle.is-active {
    background: color-mix(in oklch, var(--gl-ink) 16%, var(--gl-surface));
    color: var(--gl-ink);
    font-weight: var(--gl-weight-semibold);
}

.nav-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: none;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
}

.exercise-menu {
    margin-block: var(--gl-space-2xs);
}

.exercise-toggle {
    padding-block: var(--gl-space-2xs);
    min-height: 32px;
    font-size: var(--gl-text-subhead);
    color: var(--gl-text-2);
    pointer-events: none;
}

.exercise-toggle .nav-icon {
    display: none;
}

.exercise-toggle.is-active {
    background: transparent;
    color: var(--gl-text-2);
    font-weight: var(--gl-weight-medium);
}

.exercise-toggle::-webkit-details-marker, .tools-toggle::-webkit-details-marker {
    display: none;
}

.exercise-list {
    display: flex;
    flex-direction: column;
}

.sidebar-tools {
    margin-top: auto;
    flex: none;
}

.tools-toggle {
    display: none;
}

.topbar-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gl-space-xs);
    padding: var(--gl-space-xs);
    border-top: 1px solid var(--gl-separator);
}

.topbar-tools > .midi-status, .topbar-tools > .midi-readout, .topbar-tools > .metro {
    grid-column: 1 / -1;
}

.topbar-tools > .btn, .topbar-tools > .remark-trigger {
    padding-inline: var(--gl-space-2xs);
    font-size: var(--gl-text-subhead);
}

.topbar-tools .remark-trigger-icon {
    display: none;
}

.exercise-menu:not([open]) > .exercise-list, .sidebar-tools:not([open]) > .topbar-tools {
    display: none;
}

.midi-status {
    display: flex;
    align-items: center;
    gap: var(--gl-space-2xs);
    min-width: 0;
    font-size: var(--gl-text-subhead);
    color: var(--gl-text-2);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gl-critical);
    flex: none;
}

.is-connected .status-dot {
    background: var(--gl-success);
}

.status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.midi-readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gl-space-2xs);
    font-size: var(--gl-text-subhead);
    color: var(--gl-text-2);
}

.midi-note {
    color: var(--gl-text);
    font: var(--gl-weight-semibold) var(--gl-text-title3)/1.2 var(--gl-font-rounded);
    font-variant-numeric: tabular-nums;
}

.midi-note.is-empty {
    color: var(--gl-text-2);
}

.workspace {
    width: 100%;
    max-width: calc(1400px + 2 * var(--gl-gutter));
    margin-inline: auto;
    padding: var(--gl-space-l) var(--gl-gutter) var(--gl-space-2xl);
}

.view-header {
    margin-bottom: var(--gl-space-s);
}

.view {
    display: flex;
    flex-direction: column;
    gap: var(--gl-space-l);
    min-width: 0;
}

.view:focus {
    outline: none;
}

.midi-browser-note, .noscript {
    padding: var(--gl-space-m);
    margin-bottom: var(--gl-space-l);
    border-radius: var(--gl-radius-m);
    background: var(--gl-surface);
    color: var(--gl-text-2);
    box-shadow: var(--gl-shadow-1);
}

.noscript {
    margin: var(--gl-gutter);
}

/* À 1 024 px, la même navigation se recompose en quatre onglets. */
@media (width < 1024px) {
    .app {
        padding-left: 0;
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }
    .sidebar {
        inset: auto max(var(--gl-space-xs), env(safe-area-inset-right)) max(var(--gl-space-xs), env(safe-area-inset-bottom)) max(var(--gl-space-xs), env(safe-area-inset-left));
        width: auto;
        flex-direction: row;
        gap: 0;
        padding: 6px;
        border-radius: var(--gl-radius-l);
        box-shadow: var(--gl-glass-rim), var(--gl-shadow-3);
    }
    .topbar {
        display: none;
    }
    .module-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        flex: 3;
        overflow: visible;
        gap: 0;
    }
    .sidebar-tools {
        flex: 1;
        margin: 0;
        min-width: 0;
    }
    .nav-item, .exercise-toggle, .tools-toggle {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 8px 2px;
        min-height: 64px;
        font-size: var(--gl-text-caption);
        line-height: 1.2;
        text-align: center;
    }
    .nav-session .nav-label {
        max-width: 8ch;
    }
    .exercise-menu {
        position: static;
        margin: 0;
    }
    .exercise-toggle {
        pointer-events: auto;
    }
    .exercise-toggle .nav-icon, .tools-toggle {
        display: flex;
    }
    .exercise-toggle.is-active {
        background: color-mix(in oklch, var(--gl-ink) 16%, var(--gl-surface));
        color: var(--gl-ink);
    }
    .exercise-list, .topbar-tools {
        position: absolute;
        inset: auto 0 calc(100% + var(--gl-space-xs));
        max-height: calc(100dvh - 140px - env(safe-area-inset-bottom));
        overflow-y: auto;
        padding: var(--gl-space-s);
        border: 0;
        border-radius: var(--gl-radius-l);
        background: var(--gl-glass-strong);
        backdrop-filter: var(--gl-glass-filter);
        -webkit-backdrop-filter: var(--gl-glass-filter);
        box-shadow: var(--gl-glass-rim), var(--gl-shadow-3);
    }
    .exercise-list .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        min-height: var(--gl-tap);
        gap: var(--gl-space-xs);
        padding: var(--gl-space-xs);
        font-size: var(--gl-text-body);
    }
    .topbar-tools {
        gap: var(--gl-space-s);
    }
    .tools-toggle:hover, .sidebar-tools[open] .tools-toggle {
        background: var(--gl-surface-sunken);
    }
    .workspace {
        padding-top: var(--gl-space-l);
        padding-inline: max(var(--gl-gutter), env(safe-area-inset-left));
    }
}

/* Aucune animation ne subsiste, même dans les composants des exercices. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}