/* Allsang-økt (/okt/). Loaded only there, see templates/next/okt/. */

.okt {
    --okt-accent: #2987B2;
    --okt-accent-dark: #1d6587;
    --okt-accent-soft: #e6f2f8;
    --okt-here: #f2b632;
    --okt-border: #d9dde3;
    --okt-text: #222;
    --okt-muted: #6b7280;
    --okt-surface: #fff;
    --okt-size: 15px;

    color: var(--okt-text);
}

@media (max-width: 1060px) {
    .okt {
        padding: 0 1em;
    }
}

.okt-muted {
    color: var(--okt-muted);
}

.okt-button {
    padding: 0.5em 1.2em;
    border: 0;
    border-radius: 6px;
    background: var(--okt-accent);
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.okt-button:hover {
    background: var(--okt-accent-dark);
}

.okt-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--okt-accent-dark);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Start page ---- */

.okt-start {
    max-width: 46em;
}

.okt-lead-text {
    margin: 0 0 1.5em;
    font-size: 1.1em;
}

.okt-notice {
    margin: 0 0 1em;
    padding: 0.6em 0.9em;
    border-radius: 6px;
    background: #fdf3dc;
}

.okt-start-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
    gap: 1em;
    margin-bottom: 1.75em;
}

.okt-card {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin: 0;
    padding: 1.1em 1.2em 1.2em;
    border: 1px solid var(--okt-border);
    border-radius: 8px;
    background: var(--okt-surface);
}

.okt-card h4 {
    margin: 0;
    font-size: 1.2em;
}

.okt-card p,
.okt-card label {
    margin: 0;
    font-weight: normal;
}

/* The button (row) at the bottom of both cards. */
.okt-card > :last-child {
    margin-top: auto;
}

.okt-card .okt-button {
    align-self: flex-start;
}

.okt-join-row {
    display: flex;
    gap: 0.5em;
}

.okt .okt-code-input {
    width: 5.5em;
    height: auto;
    margin: 0;
    padding: 0.3em 0.5em;
    font-size: 1.4em;
    letter-spacing: 0.15em;
    text-align: center;
}

.okt-how {
    margin: 0;
    padding-left: 1.4em;
    color: var(--okt-muted);
}

.okt-how li {
    margin-bottom: 0.4em;
}

.okt-how strong {
    color: var(--okt-text);
}

/* ---- Session ---- */

.okt-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em 1em;
    margin: 0 -1em 1em;
    padding: 0.45em 1em;
    border-bottom: 1px solid var(--okt-border);
    background: var(--okt-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.okt-bar-info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.75em;
}

.okt-code {
    font-size: 1.1em;
}

.okt-code strong {
    font-size: 1.25em;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.okt-people,
.okt-role {
    color: var(--okt-muted);
    font-size: 0.9em;
}

.okt-role {
    padding: 0 0.5em;
    border-radius: 999px;
    background: var(--okt-accent-soft);
    color: var(--okt-accent-dark);
}

.okt-bar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
}

.okt-transpose,
.okt-size {
    display: inline-flex;
    align-items: center;
}

.okt-tool {
    min-width: 2.4em;
    min-height: 2.2em;
    padding: 0.2em 0.6em;
    border: 1px solid var(--okt-border);
    border-radius: 6px;
    background: var(--okt-surface);
    color: var(--okt-text);
    font-size: 0.95em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.okt-tool:hover:not(:disabled) {
    border-color: var(--okt-accent);
}

.okt-tool:disabled {
    color: var(--okt-muted);
    cursor: default;
}

.okt-transpose .okt-tool:first-child,
.okt-size .okt-tool:first-child {
    border-radius: 6px 0 0 6px;
}

.okt-transpose .okt-tool:last-child,
.okt-size .okt-tool:last-child {
    margin-left: -1px;
    border-radius: 0 6px 6px 0;
}

.okt-key {
    min-width: 2.2em;
    padding: 0.3em 0.2em;
    border-top: 1px solid var(--okt-border);
    border-bottom: 1px solid var(--okt-border);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.okt-transpose .okt-tool:last-child {
    margin-left: 0;
}

.okt-next,
.okt-follow[aria-pressed="true"] {
    border-color: var(--okt-accent);
    background: var(--okt-accent);
    color: #fff;
}

.okt-next:hover:not(:disabled) {
    background: var(--okt-accent-dark);
}

.okt-next:disabled {
    border-color: var(--okt-border);
    background: var(--okt-surface);
}

.okt-badge[hidden] {
    display: none;
}

.okt-badge {
    display: inline-block;
    min-width: 1.4em;
    margin-left: 0.35em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--okt-here);
    color: #222;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

.okt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2em;
}

@media (min-width: 1000px) {
    .okt-layout {
        grid-template-columns: minmax(0, 1fr) 19em;
    }
    .okt-panel-toggle,
    .okt-panel-close {
        display: none;
    }
    .okt-panel {
        position: sticky;
        top: 4em;
        align-self: start;
        max-height: calc(100vh - 5em);
        overflow-y: auto;
    }
}

.okt-invite {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em 1em;
    margin-bottom: 1.25em;
    padding: 0.6em 0.9em;
    border-radius: 6px;
    background: var(--okt-accent-soft);
}

.okt-song-head h2 {
    margin: 0;
    font-size: 1.6em;
    line-height: 1.25;
}

.okt-song-artist {
    color: var(--okt-muted);
    font-size: 0.65em;
    font-weight: normal;
}

.okt-song-meta {
    margin: 0.2em 0 0.8em;
    color: var(--okt-muted);
    font-size: 0.9em;
}

.okt-diagrams {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0 0 1em;
}

.okt-lyrics .okt-diagrams {
    display: none;
}

/* Chord diagrams, as in songbook.css. */
.okt .sb-diagram {
    overflow: visible;
}

.okt .sb-diagram line {
    stroke: #444;
    stroke-width: 0.8;
}

.okt .sb-diagram line.sb-nut {
    stroke-width: 2.5;
}

.okt .sb-diagram .sb-dot {
    fill: #222;
}

.okt .sb-diagram .sb-open {
    fill: none;
    stroke: #444;
    stroke-width: 0.9;
}

.okt .sb-diagram text {
    fill: #222;
    font-family: sans-serif;
}

.okt .sb-diagram-name {
    font-size: 10px;
    font-weight: bold;
    text-anchor: middle;
}

.okt .sb-diagram-mark {
    font-size: 7px;
    text-anchor: middle;
}

.okt .sb-diagram-fret {
    font-size: 7px;
    text-anchor: end;
}

/* The song: a div per verse and staff, a div per line, see
   songbook_format_body(). */
.okt-body {
    /* Room to scroll the last lines to the top. */
    padding-bottom: 60vh;
    font-family: monospace;
    font-size: var(--okt-size);
    line-height: 1.4;
}

/* No song yet. */
.okt-body:empty {
    padding: 0;
}

.okt-lyrics .okt-body {
    font-family: inherit;
    line-height: 1.55;
}

.okt .sb-line {
    position: relative;
    min-height: 1.4em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.okt .sb-gap {
    margin-top: 1.2em;
}

.okt .sb-staff {
    overflow-x: auto;
}

.okt .sb-staff .sb-line {
    white-space: pre;
    overflow-wrap: normal;
}

.okt .sb-chord,
.okt .chopro_chord {
    color: var(--okt-accent-dark);
    font-weight: bold;
}

/* Chords stay over their words: no wrapping; okt.js makes the text
   smaller to fit, and what is still too wide scrolls sideways. */
.okt:not(.okt-lyrics) .okt-body {
    overflow-x: auto;
    /* Room for the marker of the leader's line, inside the scrolling. */
    margin-left: -0.8rem;
    padding-left: 0.8rem;
}

.okt:not(.okt-lyrics) .sb-line {
    white-space: pre;
    overflow-wrap: normal;
}

/* Where the leader is. */
.okt .okt-here::before {
    content: "";
    position: absolute;
    top: 0.15em;
    bottom: 0.15em;
    left: -0.7rem;
    width: 4px;
    border-radius: 2px;
    background: var(--okt-here);
}

.okt-empty {
    font-size: 1.1em;
}

.okt-empty p {
    margin: 0;
}

/* In the bar, so it shows wherever the page is scrolled. */
.okt-ended {
    margin: 0;
    padding: 0.3em 0.8em;
    border-radius: 6px;
    background: #fdf3dc;
}

.okt-ended[hidden] {
    display: none;
}

.okt-has-ended .okt-bar-tools,
.okt-has-ended .okt-people,
.okt-has-ended .okt-role,
.okt-has-ended .okt-invite,
.okt-has-ended .okt-panel {
    display: none;
}

.okt-rejoin {
    position: fixed;
    left: 50%;
    bottom: 1.25em;
    z-index: 30;
    transform: translateX(-50%);
    padding: 0.7em 1.4em;
    border: 0;
    border-radius: 999px;
    background: var(--okt-accent);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.okt-rejoin[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .okt-bar {
        gap: 0.3em 0.6em;
        padding: 0.35em 1em;
    }
    .okt-code {
        font-size: 1em;
    }
    .okt-role {
        display: none;
    }
    .okt-bar-tools {
        gap: 0.25em;
    }
    .okt-tool {
        min-width: 2em;
        min-height: 2.1em;
        padding: 0.15em 0.45em;
        font-size: 0.85em;
    }
    .okt-key {
        min-width: 1.8em;
        font-size: 0.85em;
    }
}

/* ---- Panel: search, queue, wishes ---- */

.okt-panel {
    font-size: 0.95em;
}

@media (max-width: 999px) {
    .okt-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: none;
        box-sizing: border-box;
        width: min(24em, 100%);
        padding: 0.8em 1em 2em;
        overflow-y: auto;
        background: var(--okt-surface);
        box-shadow: -4px 0 18px rgba(0, 0, 0, 0.18);
    }
    .okt-panel-open .okt-panel {
        display: block;
    }
}

.okt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.okt-panel h3 {
    margin: 0 0 0.5em;
    font-size: 1.2em;
}

.okt-panel-close {
    padding: 0 0.3em;
    border: 0;
    background: none;
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
}

.okt-search {
    position: relative;
}

.okt .okt-search input {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.5em 2.4em 0.5em 0.6em;
    font-size: 1em;
}

/* Our own clear button, in every browser; not the browser's as well. */
.okt .okt-search input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

.okt-search-clear {
    position: absolute;
    top: 50%;
    right: 0.3em;
    width: 1.9em;
    height: 1.9em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--okt-muted);
    font-size: 1.1em;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.okt-search-clear:hover {
    background: var(--okt-accent-soft);
    color: var(--okt-text);
}

.okt-search-clear[hidden] {
    display: none;
}

.okt-results,
.okt-queue,
.okt-wishes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.okt-results {
    margin-top: 0.4em;
}

.okt-results li,
.okt-queue li,
.okt-wishes li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0;
    border-bottom: 1px solid var(--okt-border);
}

.okt-item-text {
    flex: 1;
    min-width: 0;
}

.okt-item-song {
    font-weight: bold;
}

.okt-item-artist {
    color: var(--okt-muted);
    font-size: 0.9em;
}

.okt-item-tools {
    display: flex;
    flex-shrink: 0;
    gap: 0.25em;
}

.okt-item-button {
    padding: 0.25em 0.55em;
    border: 1px solid var(--okt-border);
    border-radius: 5px;
    background: var(--okt-surface);
    font-size: 0.9em;
    white-space: nowrap;
    cursor: pointer;
}

.okt-item-button.okt-primary {
    border-color: var(--okt-accent);
    background: var(--okt-accent);
    color: #fff;
}

.okt-votes {
    min-width: 1.8em;
    padding: 0.1em 0;
    border-radius: 5px;
    background: var(--okt-accent-soft);
    color: var(--okt-accent-dark);
    font-weight: bold;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.okt-section {
    margin-top: 1.5em;
}

.okt-section h4 {
    margin: 0 0 0.3em;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okt-muted);
}

.okt-section p {
    margin: 0.3em 0 0;
}