/* Atkinson Hyperlegible Next, by the Braille Institute, the same font as eyesunstrung.vip.
   SIL Open Font License 1.1. Copied into fonts/ by scripts/copy-font.mjs. */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* The window: the banner across the top, a status bar across the bottom, and between them two
   columns that fill the rest of the height. The left column, the menu and the open items, is about
   a fifth of the width; the right one shows the current item. Each column scrolls on its own, so
   the banner and the status bar stay put. Nothing overlaps anything else, so nothing can cover the
   focused element. */
:root {
    --slate: #475569;
    --focus: #b3361b;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
    margin: 0;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* The eyesunstrung.vip banner. It keeps its proportions and is centred; the wall and table are
   drawn far past the picture's edges, so a wider box fills its sides. Held to a fifth of the
   window's height as well as the site's 240px, so the columns below keep most of the window. */
.site-header .banner {
    display: block;
}

.site-header .banner img {
    display: block;
    width: 100%;
    height: min(240px, 20vw, 20vh);
}

.app-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(12rem, 20%) minmax(0, 1fr);
    border-top: 2px solid var(--slate);
}

/* The left column does not scroll as a whole: the menu drops down over the main area, and would be
   cut off at the column's edge if the column were a scrolling box. The list of open items scrolls
   on its own instead. */
.side-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.75rem 1rem;
    border-inline-end: 2px solid var(--slate);
}

#open-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

main {
    overflow-y: auto;
    padding: 0.75rem 1.5rem 2rem;
}

/* A readable line length for the content, however wide the window. */
#item-panels,
#empty-state {
    max-width: 48rem;
}

.status-bar {
    margin: 0;
    min-height: 1.5em;
    padding: 0.25rem 1rem;
    border-top: 2px solid var(--slate);
}

/* Narrow windows: the left column stacks above the content, in reading order, and the page
   scrolls as one. */
@media (max-width: 40rem) {
    .app-layout {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    .side-panel {
        border-inline-end: none;
        border-bottom: 2px solid var(--slate);
    }

    #open-items {
        overflow-y: visible;
    }

    main {
        overflow-y: visible;
    }
}

/* The menu drops down below the Menu button, over the main area; each submenu opens to the right
   of its item. Above everything else in the window, so nothing covers the item with focus. */
.app-menu {
    position: relative;
    z-index: 10;
}

#app-menu-button {
    font: inherit;
}

.app-menu [role="menu"] {
    position: absolute;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    min-width: 16rem;
    background: #fff;
    color: #1f2328;
    border: 1px solid #333;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}

#app-menu-list {
    top: 100%;
    left: 0;
}

.app-menu li[role="none"] {
    position: relative;
}

.app-menu [role="menu"] [role="menu"] {
    top: -0.25rem;
    left: 100%;
}

.app-menu [role="menuitem"] {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.3rem 1rem;
    white-space: nowrap;
    cursor: pointer;
}

.app-menu [role="menuitem"]:focus {
    background: var(--slate);
    color: #fff;
    outline: none;
}

.app-menu [role="menuitem"][aria-disabled="true"] {
    color: #57606a;
    cursor: default;
}

/* An arrow after an item that opens a submenu. The empty alternative text keeps it from being
   read; the item already says it has a submenu. */
.app-menu [role="menuitem"][aria-haspopup]::after {
    content: "\25B8" / "";
}

.app-menu [role="separator"] {
    margin: 0.25rem 0;
    border-top: 1px solid #888;
}

/* Open items: each a heading holding a button, then its Close button. The current one is bold
   with a bar down its left edge, so it is not told apart by weight alone. */
#open-items-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

/* One row per item: the name, then a close button. The name is cut off at the column's edge with
   an ellipsis, as the article list on eyesunstrung.vip is. Only the drawing is shortened: the
   button's text, and so what a screen reader reads, is the whole name, and its title attribute
   shows the whole name on hover. */
#open-items-list li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0 0.1rem 0.5rem;
    border-inline-start: 4px solid transparent;
}

#open-items-list li:has(button[aria-current="true"]) {
    border-inline-start-color: var(--slate);
}

#open-items-list h1 {
    font-size: 1rem;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}

#open-items-list h1 button {
    font: inherit;
    display: block;
    width: 100%;
    min-height: 24px;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The close button shows only a cross; its name, from aria-label, is "Close" and the item's name.
   At least 24px square, the WCAG minimum target. */
#open-items-list .close-item {
    flex: none;
    min-width: 24px;
    min-height: 24px;
    padding: 0 0.3rem;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
}

/* The list scrolls, and a scrolling box clips anything drawn outside it, so the focus outline is
   drawn just inside these buttons instead. */
#open-items-list button:focus-visible {
    outline-offset: -3px;
}

#open-items-list h1 button[aria-current="true"] {
    font-weight: bold;
}

#item-panels ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#item-panels ul li {
    padding: 0.15rem 0;
}

/* Buttons side by side, each its own block. Buttons are inline, so buttons sharing a paragraph
   share one line in a screen reader's browse mode, and reaching that line reads every label.
   Flex items are blockified, which gives each button a line of its own there while they still
   sit in one row on screen. Wraps rather than overflowing in a narrow window. */
.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

/* A field and something beside it, such as its notes, on one row. The same blockifying as
   .button-row keeps them separate lines to a screen reader. */
.field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
    margin: 1rem 0;
}

.field-row > * {
    margin: 0;
}

#empty-state {
    border: 1px dashed #888;
    padding: 1rem;
}

#settings-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid #888;
    padding-bottom: 0.25rem;
}

#settings-tablist button {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #888;
    border-bottom: none;
    background: #eee;
    cursor: pointer;
    margin-top: 0;
}

#settings-tablist button[aria-selected="true"] {
    background: #fff;
    font-weight: bold;
    border-color: #333;
}

#item-panels section:focus-visible {
    outline-offset: -3px;
}

#about-dialog,
#guitar-samples-dialog,
#settings-dialog,
#directory-error-dialog {
    max-width: 32rem;
    padding: 1.5rem;
    border: 1px solid #333;
}

#about-dialog::backdrop,
#guitar-samples-dialog::backdrop,
#settings-dialog::backdrop,
#directory-error-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#about-dialog button,
#guitar-samples-dialog button,
#settings-dialog button,
#directory-error-dialog button {
    font-size: 1rem;
    padding: 0.4rem 1.5rem;
    margin-top: 0.5rem;
}

#chords-search-input {
    width: 16rem;
}

#chords-search-listbox {
    list-style: none;
    margin: 0.25rem 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid #888;
}

#chords-search-listbox li {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

#chords-search-listbox li[aria-selected="true"] {
    background: #005fcc;
    color: #fff;
}

#chords-filters {
    margin: 0.75rem 0;
}

#chords-filters summary {
    cursor: pointer;
    font-weight: bold;
}

#chords-results-list,
#chords-results-list ul {
    list-style: none;
    padding-left: 1rem;
}

#chords-results-list > li {
    padding-left: 0;
    margin-top: 0.35rem;
}

#chords-results-list li {
    padding: 0.1rem 0;
}

#chords-results-list label {
    margin-left: 0.35rem;
}

#settings-default-directory-input {
    width: 20rem;
}

#settings-panel-general,
#settings-panel-files {
    padding-top: 1rem;
}

.chord-library button {
    font-size: 1rem;
    padding: 0.4rem 1.5rem;
    margin-right: 0.5rem;
}

.chord-library details ul {
    padding-left: 1.25rem;
}

#frets-dialog {
    max-width: 32rem;
    padding: 1.5rem;
    border: 1px solid #333;
    max-height: 90vh;
    overflow-y: auto;
}

#frets-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#frets-dialog button {
    font-size: 1rem;
    padding: 0.4rem 1.5rem;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

#frets-result-list {
    list-style: none;
    padding: 0;
}

#frets-result-list li {
    padding: 0.15rem 0;
}

.audio-track ul {
    list-style: none;
    padding: 0;
}

.audio-track ul li {
    padding: 0.15rem 0;
}

.audio-track button {
    font-size: 1rem;
    padding: 0.4rem 1.5rem;
    margin-right: 0.5rem;
}

.audio-track button[disabled] {
    opacity: 0.55;
}

.audio-track details summary {
    cursor: pointer;
    font-weight: bold;
}

.audio-track details p {
    margin-left: 1rem;
}

#item-panels details summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.25rem 0;
}

/* The chord progression is read straight through, one chord after another, so it carries no
   markers: a bullet or a number before every chord is one more thing announced on every line. */
.chord-progression {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

/* A dialog's title, an h1 ending in Dialog Box, at a size that suits a dialog. */
dialog h1 {
    font-size: 1.5rem;
    margin-top: 0;
}