/* Partyboi styles. Loaded after the Pico CSS color variant (see Page.kt), so
   top-level rules here override Pico's. */

/* ---------------------------------------------------------------- *
 * Pico overrides
 * ---------------------------------------------------------------- */

:root {
    --pico-font-size: 100%;
    --pico-spacing: 0.8rem;
    /* Slimmer form controls everywhere; Pico's defaults (0.75rem/1rem) are
       chunky. These control padding and computed input/button height
       throughout Pico. */
    --pico-form-element-spacing-vertical: 0.3rem;
    --pico-form-element-spacing-horizontal: 0.5rem;
}

/* Pico has no variable for control font size (buttons hardcode 1rem, with
   attribute-selector specificity — hence the attribute selectors here). */
input, select, textarea,
button, [type=submit], [type=reset], [type=button], [role=button] {
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------- *
 * Typography
 * ---------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 100;
}

h2, h3 {
    font-size: 110%;
}

th {
    font-weight: 100;
}

label {
    font-size: 80%;
}

code {
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 99999px;
    font-size: 80%;
    padding: var(--pico-spacing);
}

/* ---------------------------------------------------------------- *
 * Chips
 * ---------------------------------------------------------------- */

/* Entry flag labels ("AI", "Remote"): pills with inverted text/background colors. */
.chip {
    display: inline-block;
    background: var(--pico-color);
    color: var(--pico-background-color);
    border-radius: 99999px;
    padding: 0 0.6em;
    font-size: 70%;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    /* Optical centering: on the shared baseline the pill hangs below the
     * surrounding text, so raise it to center it against the cap height. */
    vertical-align: 0.12em;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- *
 * Page layout
 * ---------------------------------------------------------------- */

.container > header {
    border-bottom: var(--pico-border-width) solid var(--pico-primary-border);
    margin-bottom: var(--pico-spacing);
}

/* Brand: logo + instance name in the top nav. The li is a flex row so the
 * hamburger button and the brand link center on each other instead of sitting
 * on the text baseline (the inline-flex brand's baseline is the logo's bottom
 * edge, which misaligns it against inline siblings). The strong wrapper must
 * not create a box of its own: as an inline box it would put the tall brand
 * link back on a text baseline inside it, so it only contributes font-weight. */
.container > header nav li.brand-row {
    display: flex;
    align-items: center;
}

.container > header nav li.brand-row > strong {
    display: contents;
}

.container > header nav a.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.container > header nav .brand-logo {
    height: 1.5em;
    width: 1.5em; /* logo viewBox is square; fixed width avoids layout shift while loading */
    display: block;
}

body > footer {
    margin-top: calc(var(--pico-spacing) * 2);
    text-align: center;
    opacity: 0.4;
}

.nav-and-content {
    display: flex;
    gap: calc(var(--pico-spacing) * 4);
}

.nav-and-content > .content {
    flex-grow: 1;
}

.nav-and-content > aside nav {
    width: 100%;
    margin: 0 auto;
}

/* Mobile: the main nav is an off-canvas drawer with a backdrop */
@media (max-width: 1023.99px) {
    .nav-and-content > aside.main-nav {
        --pico-font-size: 16px;
        font-size: var(--pico-font-size);

        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(85vw, 320px);
        max-width: 100vw;
        padding: calc(var(--pico-spacing) * 2.5) var(--pico-spacing) var(--pico-spacing);
        overflow-y: auto;
        overscroll-behavior: contain;

        background: var(--pico-background-color);
        box-shadow: var(--pico-box-shadow);
        z-index: 1001;

        transform: translateX(-100%);
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
    }

    .nav-and-content > aside.main-nav.open {
        transform: translateX(0);
    }

    .mobile-nav-close {
        position: absolute;
        top: calc(var(--pico-spacing) * 0.5);
        right: calc(var(--pico-spacing) * 0.5);
        width: 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--pico-border-radius);
        margin-right: 0;
    }

    .mobile-nav-close:hover,
    .mobile-nav-close:focus-visible {
        background: var(--pico-muted-border-color);
    }

    .main-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .main-nav-backdrop.open {
        opacity: 1;
    }

    body.nav-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-and-content > aside.main-nav,
    .main-nav-backdrop {
        transition: none;
    }
}

.page-nav summary {
    color: var(--pico-color) !important;
    font-weight: 600;
}

.page-nav ul {
    margin: 0;
    padding: 0;
}

.page-nav ul li a {
    padding-left: calc(var(--pico-nav-element-spacing-horizontal) * 1.5);
    margin-left: calc(var(--pico-border-width) * -1);
    border-left: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: 0;
}

.page-nav ul li a[aria-current] {
    border-color: var(--pico-primary);
    color: var(--pico-primary-hover);
    font-weight: 600;
}

.page-nav ul li ul {
    margin-left: var(--pico-spacing);
    margin-top: calc(var(--pico-spacing) * 0.5);
    margin-bottom: calc(var(--pico-spacing) * -0.5);
}

/* Desktop: the nav is a static sidebar. Comes after the base .page-nav rules
   so its padding shorthand overrides their padding-left at equal specificity. */
@media (min-width: 1024px) {
    button.mobile-nav-button.flat-button,
    button.mobile-nav-close.flat-button,
    .mobile-only,
    .main-nav-backdrop {
        display: none;
    }

    .nav-and-content {
        gap: 4rem;
    }

    .nav-and-content > aside {
        --pico-font-size: 16px;
        font-size: var(--pico-font-size);
        margin-top: calc(var(--pico-spacing) * 0.5);
        width: auto;
        min-width: 200px;
        padding: 0;

        position: relative;
        background: none;
        box-shadow: none;
        left: auto;
        top: auto;
        bottom: auto;
    }

    .nav-and-content > aside nav {
        width: auto;
        margin: 0;
    }

    .page-nav ul li a {
        padding: calc(var(--pico-spacing) * 0.25) var(--pico-spacing);
    }

    .page-nav summary::after {
        display: none;
    }
}

@media (min-width: 1280px) {
    .two-columns {
        display: flex;
        gap: var(--pico-grid-column-gap);
        width: 100%;
    }

    .two-columns-left,
    .two-columns-right {
        flex-grow: 1;
        max-width: 50%;
    }
}

/* ---------------------------------------------------------------- *
 * Utilities
 * ---------------------------------------------------------------- */

/* Content available to screen readers but not shown visually */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.error {
    color: #d93526;
}

.center {
    text-align: center;
}

/* ---------------------------------------------------------------- *
 * Cards
 * ---------------------------------------------------------------- */

article > *:last-child {
    margin-bottom: 0;
}

article header h3 {
    margin-bottom: 0;
}

summary > header {
    display: inline-flex;
    justify-content: space-between;
    width: calc(100% - 4ex);
}

/* ---------------------------------------------------------------- *
 * Buttons and toolbars
 * ---------------------------------------------------------------- */

button.flat-button,
a.flat-button {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    line-height: inherit;
    font-size: inherit;
    margin-right: 1ex;
    min-width: 2.5ex;
}

button.flat-button.off > *,
a.flat-button.off > * {
    opacity: 0.25;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: var(--pico-spacing);
}

.title-row h1 {
    margin-bottom: 0;
}

.title-row [role=button],
.title-row button {
    padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}

.title-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.title-row-actions > * {
    margin: 0;
}

/* ---------------------------------------------------------------- *
 * Tables
 * ---------------------------------------------------------------- */

tbody tr:last-child td, tbody tr:last-child th {
    border-bottom: none !important;
}

tbody tr [role=group] {
    margin-bottom: 0;
}

tr.processed td, tr.processed th {
    font-style: italic;
    opacity: 33%;
    font-weight: 100;
}

td.settings {
    text-align: right;
    white-space: nowrap;
}

.narrow {
    width: 20px;
}

td.wide,
th.wide {
    width: 99%;
}

td.tight,
th.tight {
    width: 20px;
    padding-left: calc(var(--pico-spacing) * 0.125);
    padding-right: calc(var(--pico-spacing) * 0.125);
    vertical-align: top;
}

td.tight > *,
th.tight > * {
    margin: 0;
}

table.compact {
    font-size: 80%;
}

table.compact th, table.compact td {
    vertical-align: top;
}

table .entry-info {
    display: block;
    opacity: 80%;
}

/* ---------------------------------------------------------------- *
 * Forms
 * ---------------------------------------------------------------- */

/* Auto-growing textarea: an invisible ::after replica of the content sizes the
   grid cell, and the textarea stretches to it. Replica and textarea must share
   the exact same font and box metrics or the measurement is off. */
.grow-wrap {
    display: grid;
}

.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.grow-wrap > textarea {
    resize: none;
    overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
    border: var(--pico-border-width) solid var(--pico-border-color);
    border-radius: var(--pico-border-radius);
    outline: 0;
    font-weight: var(--pico-font-weight);
    appearance: none;
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    width: 100%;
    margin: 0;
    margin-bottom: var(--pico-spacing);
    /* Must match the global control font size set at the top of this file */
    font-size: 0.9rem;
    line-height: var(--pico-line-height);

    grid-area: 1 / 1 / 2 / 2;
}

textarea.monospace {
    font-family: monospace;
}

/* Day dropdown + time-of-day picker of a split datetime form field, sized to
   content instead of stretching across the card */
.day-time {
    display: flex;
    gap: 0.4em;
    align-items: center;
    margin-bottom: var(--pico-spacing);
}

.day-time select,
.day-time input {
    flex: none;
    width: auto;
    margin-bottom: 0;
}

.day-time input {
    width: 5em;
}

/* ---------------------------------------------------------------- *
 * Tabs (templates/components/Tabs.kt + setupTabs in partyboi.js)
 * ---------------------------------------------------------------- */

.tab-bar {
    display: flex;
    gap: 1.5rem;
    margin-bottom: var(--pico-spacing);
    border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}

.tab-bar .tab {
    width: auto;
    margin: 0;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--pico-secondary);
    font-weight: 100;
    cursor: pointer;
    text-decoration: none;
}

.tab-bar .tab:hover {
    color: var(--pico-color);
}

.tab-bar .tab.active {
    color: var(--pico-primary);
    border-bottom-color: var(--pico-primary);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ---------------------------------------------------------------- *
 * Tooltips and dropdown menus
 * ---------------------------------------------------------------- */

[data-tooltip] {
    border-bottom: none !important;
}

/* Pico sets nav dropdowns to `display: inline`, which doesn't reliably
   establish a containing block for the absolutely positioned menu — the menu
   ends up anchored to the viewport instead of the summary. inline-block fixes
   the containing block, and width: auto sizes the menu to its own contents. */
nav details.dropdown {
    display: inline-block;
}

nav details.dropdown > summary + ul {
    width: auto;
    min-width: max-content;
}

/* ---------------------------------------------------------------- *
 * Snackbars
 * ---------------------------------------------------------------- */

.snackbars {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    animation: snackbars-appear 200ms 1 ease-out;
}

.snackbars ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    list-style: none;
    padding: 0;
    margin: 0;
}

.snackbars li {
    display: flex;
    gap: var(--pico-spacing);
    padding: var(--pico-spacing);
    margin-bottom: var(--pico-spacing);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-box-shadow);
    color: #ffffff;
}

.snackbars li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
}

.snackbars li.info {
    background-color: #017FC0;
}

.snackbars li.success {
    background-color: #398712;
}

.snackbars li.warning {
    background-color: #FFBF00;
    color: #000000;
}

.snackbars li.warning a {
    color: #000000;
}

.snackbars li.error {
    background-color: #D24317;
}

.snackbars li.disappear {
    opacity: 0;
    animation: snackbar-disappear 200ms 1 ease-in;
}

@keyframes snackbars-appear {
    from {
        opacity: 0;
        bottom: -400px;
    }
    to {
        opacity: 1;
        bottom: 0;
    }
}

@keyframes snackbar-disappear {
    from {
        margin-left: 0;
        opacity: 1;
    }
    to {
        margin-left: -400px;
        opacity: 0;
    }
}

/* ---------------------------------------------------------------- *
 * Entries
 * ---------------------------------------------------------------- */

article.entry {
    display: flex;
    gap: var(--pico-spacing);
    padding-bottom: 0;
}

article.entry figure {
    width: 25%;
    margin: calc(var(--pico-spacing) * -1);
    margin-right: 0;
    margin-bottom: 0;
    border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
    background-color: var(--pico-primary-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

article.entry section {
    flex-grow: 1;
}

article.entry table td {
    width: 90%;
}

td.screenshot figure {
    width: 120px;
    height: 80px;
    margin-top: calc(var(--pico-spacing) * -0.5);
    margin-bottom: calc(var(--pico-spacing) * -0.5);
    /* Black backing so waveform PNGs (white-on-transparent) for audio entries
       stay visible against the white card. */
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

img.entry-edit-preview {
    width: 100%;
    /* Black backing so waveform PNGs (white-on-transparent) for audio entries
       stay visible against the white card. */
    background-color: #000;
}

/* Match the full-width "Set preview" submit input above it (Pico only makes
   input[type=submit] full width, not <button>). */
button.regenerate-preview {
    width: 100%;
}

/* ---------------------------------------------------------------- *
 * Preview modal
 * ---------------------------------------------------------------- */

/* Click a thumbnail to view the full preview asset. The <dialog> lives at the
   body level (in Page.kt) so it survives reload-section swaps. */
.clickable-preview {
    cursor: zoom-in;
    position: relative;
}

/* Audio entries get a centered play-circle overlay on the thumbnail so voters
   know the tile plays a clip instead of opening a still image. */
.clickable-preview.has-audio {
    cursor: pointer;
}

.clickable-preview.has-audio .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: #fff;
    text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.7);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.clickable-preview.has-audio:hover .play-overlay,
.clickable-preview.has-audio:focus .play-overlay {
    opacity: 1;
}

dialog.preview-modal {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 95vw;
    max-height: 95vh;
    overflow: visible;
}

dialog.preview-modal img,
dialog.preview-modal video {
    display: block;
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
}

/* Audio playback: cover image fills the modal, native <audio> controls float
   over the bottom against a translucent dark bar for legibility. */
#preview-modal-media.has-audio {
    position: relative;
    display: inline-block;
}

dialog.preview-modal .audio-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0.75em 1em;
    background: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

dialog.preview-modal::backdrop {
    background: rgba(0, 0, 0, 0.85);
}

dialog.preview-modal form {
    margin: 0;
    position: absolute;
    top: calc(var(--pico-spacing) * -1);
    right: calc(var(--pico-spacing) * -1);
}

dialog.preview-modal .close {
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
}

/* ---------------------------------------------------------------- *
 * Voting
 * ---------------------------------------------------------------- */

/* Mobile: the voting table reflows into stacked cards */
@media screen and (max-width: 767.99px) {
    table.voting thead {
        display: none;
    }

    table.voting tbody tr {
        display: flex;
        flex-wrap: wrap;
    }

    table.voting tbody tr td,
    table.voting tbody tr th {
        border: none;
    }

    table.voting tbody .order {
        order: 1;
        width: 10%;
    }

    table.voting tbody .title {
        order: 2;
        width: 90%;
    }

    table.voting tbody .screenshot {
        order: 3;
        width: 100%;
        padding: 0;
    }

    table.voting tbody .screenshot figure {
        width: 100%;
        height: 160px;
        margin: var(--pico-spacing) 0;
    }

    table.voting tbody .points {
        order: 4;
        width: 20%;
        padding-bottom: calc(var(--pico-spacing) * 2);
        margin-bottom: calc(var(--pico-spacing) * 2);
        border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
    }

    table.voting tbody input {
        margin-right: 1ex;
    }
}

/* ---------------------------------------------------------------- *
 * Schedule editor
 * ---------------------------------------------------------------- */

.shift-step {
    display: inline-flex;
    align-items: center;
    gap: 1ex;
    margin-bottom: var(--pico-spacing);
}

.shift-step input {
    width: 7em;
    margin-bottom: 0;
}

table.schedule td,
table.schedule th {
    vertical-align: middle;
}

table.schedule input:not([type=checkbox]) {
    margin-bottom: 0;
    height: auto;
}

table.schedule td.event-time {
    white-space: nowrap;
    width: 1px;
}

/* Start and end times sit side by side. Cells show time only (events are
   grouped by day). flatpickr turns each original input into a hidden one and
   shows a text alt input, so the inline-block + right margin only spaces the
   two visible fields. */
table.schedule td.event-time input {
    display: inline-block;
    vertical-align: middle;
    width: 5em;
    margin: 0 0.4em 0 0;
}

table.schedule td.event-name input {
    width: 100%;
}

table.schedule td.settings .flat-button {
    margin-right: 0.5ex;
}

/* ---------------------------------------------------------------- *
 * Asset management
 * ---------------------------------------------------------------- */

#asset-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#asset-list summary > span {
    flex-grow: 1;
}

#asset-list td.file-size {
    white-space: nowrap;
}

#asset-list table,
#slide-list table {
    width: 100%;
}

/* max-width: 0 + width: 100% lets the cell shrink below its content width so
   the ellipsis inside can actually apply */
#asset-list td:first-child {
    max-width: 0;
    width: 100%;
}

#asset-list td:first-child a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

article.hidden-asset, tr.hidden-asset {
    display: none;
}

.show-hidden article.hidden-asset, .show-hidden tr.hidden-asset {
    display: revert;
}

/* ---------------------------------------------------------------- *
 * Info screen admin
 * ---------------------------------------------------------------- */

.screen-preview-container {
    position: relative;
}

iframe.screen-preview {
    position: absolute;
    top: 0;
    left: 0;
}

.slide-set-toolbar {
    align-items: center;
}

.slide-set-toolbar > ul {
    margin: 0;
}

.slide-set-toolbar > ul li {
    padding-top: 0;
}

.admin-countdown {
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.slide-set-toolbar details.dropdown,
.slide-set-toolbar details.dropdown summary {
    margin: 0;
}

#slide-list td.wide {
    max-width: 0;
}

#slide-list td.wide .slide-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Image-slides picker: thumbnail grid with checkable items */
.image-picker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pico-spacing);
    margin-bottom: var(--pico-spacing);
}

@media (min-width: 576px) {
    .image-picker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .image-picker-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.image-picker-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: calc(var(--pico-spacing) * 0.5);
    row-gap: calc(var(--pico-spacing) * 0.5);
    padding: calc(var(--pico-spacing) * 0.5);
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
    min-width: 0;
}

.image-picker-item:hover {
    border-color: var(--pico-primary);
}

.image-picker-item:has(input:checked) {
    border-color: var(--pico-primary);
    background-color: var(--pico-primary-background);
    color: var(--pico-background-color);
}

.image-picker-item img {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: var(--pico-background-color);
    border-radius: calc(var(--pico-border-radius) * 0.5);
}

.image-picker-item input[type="checkbox"] {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
}

.image-picker-item span {
    grid-row: 2;
    grid-column: 2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 90%;
    min-width: 0;
}

/* ---------------------------------------------------------------- *
 * Compo admin
 * ---------------------------------------------------------------- */

.compo-edit .pb-summary {
    text-align: center;
}

.compo-edit .pb-stat strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
}

.compo-edit td {
    vertical-align: middle;
}

.compo-edit tr.not-qualified {
    opacity: 0.55;
}

.compo-edit .pb-filter {
    max-width: 16rem;
    margin: 0;
}

.compo-edit .pb-dur-input {
    width: 6rem;
    margin: 0;
}

.compo-edit .pb-thumb {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 32px;
    overflow: hidden;
    border-radius: var(--pico-border-radius);
    background: var(--pico-muted-border-color);
}

.compo-edit .pb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compo-edit .pb-thumb-empty {
    color: var(--pico-muted-color);
}

/* Mobile: 2x2 summary grid and a compact entries table that fits the screen */
@media screen and (max-width: 767.99px) {
    .compo-edit .pb-summary {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--pico-spacing);
    }

    .compo-edit .pb-col-preview,
    .compo-edit .pb-col-duration {
        display: none;
    }

    .compo-edit table {
        font-size: 0.875rem;
    }

    .compo-edit th,
    .compo-edit td {
        padding: 0.25rem 0.375rem;
    }

    .compo-edit td code {
        padding: 0.125rem 0.5rem;
    }

    .compo-edit .settings .flat-button {
        padding: 0.25rem;
    }
}

/* ---------------------------------------------------------------- *
 * Results
 * ---------------------------------------------------------------- */

.results .compo-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pico-spacing) * 0.5);
    padding: 0;
    margin-bottom: var(--pico-spacing);
}

.results .compo-nav li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results .compo-nav a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    font-size: 0.875rem;
}

.results .compo-nav a.results-txt {
    font-family: monospace;
}

.results article {
    scroll-margin-top: var(--pico-spacing);
}

.results article > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.results article > header h3 {
    margin-bottom: 0;
}

/* Admins also see compos whose results are not public yet; dim those */
.results article.unpublished {
    opacity: 0.55;
}

.results .result-card {
    display: flex;
    gap: var(--pico-spacing);
    align-items: flex-start;
    padding: calc(var(--pico-spacing) * 0.75) 0;
    border-top: 1px solid var(--pico-muted-border-color);
}

.results .result-card:first-of-type {
    border-top: 0;
}

.results .place {
    flex-shrink: 0;
    min-width: 2.2em;
    font-weight: bold;
    text-align: right;
}

/* Podium accents: gold, silver, bronze on the place number */
.results .result-card.place-1 .place {
    color: #d4af37;
}

.results .result-card.place-2 .place {
    color: #9fa8b0;
}

.results .result-card.place-3 .place {
    color: #b08d57;
}

.results .result-card figure {
    flex-shrink: 0;
    width: 160px;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: var(--pico-border-radius);
    /* Black backing so waveform PNGs (white-on-transparent) for audio entries
       stay visible against the white card. */
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.results .result-body {
    flex-grow: 1;
    min-width: 0;
}

.results .result-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pico-spacing);
}

.results .result-title {
    font-weight: bold;
}

.results .points {
    flex-shrink: 0;
    font-weight: bold;
}

.results .entry-info {
    margin: 0.25em 0 0.5em;
    color: var(--pico-muted-color);
}

.results .download-link {
    display: inline-block;
    margin-top: 0.25em;
    font-size: 0.875rem;
    text-decoration: none;
}

.results .download-link code {
    border: 0;
}

@media (max-width: 767.99px) {
    .results .result-card {
        gap: calc(var(--pico-spacing) * 0.5);
    }

    .results .result-card figure {
        width: 96px;
    }
}

/* ---------------------------------------------------------------- *
 * Synchronization
 * ---------------------------------------------------------------- */

.sync-status-error td {
    background-color: #800;
    color: white;
}

.sync-status-running td {
    opacity: 50%;
}

/* ---------------------------------------------------------------- *
 * Print (vote key sheets)
 * ---------------------------------------------------------------- */

@media print {
    * {
        background: none !important;
        box-shadow: none !important;
    }

    .container > header {
        display: none;
    }

    .container {
        max-width: 100%;
    }

    article.votekeys header {
        display: none;
    }

    article.votekeys ul {
        list-style: none;
        padding: 0;
        margin: 0 !important;
        font-size: 0;
    }

    article.votekeys li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24%;
        height: 4ex;
        border: 1px solid #888;
        margin: 0 !important;
        font-size: 16pt;
        color: black;
        text-transform: uppercase;
        line-height: normal;
    }
}