/* Trampoline — a delta on the stock Web Awesome theme. */

wa-page > [slot="header"] {
    padding: var(--wa-space-s) var(--wa-space-l);
    border-bottom: 1px solid var(--wa-color-surface-border);
}

.brand {
    font-weight: var(--wa-font-weight-bold);
    text-decoration: none;
    color: var(--wa-color-text-normal);
}

.main-content {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--wa-space-l);
}

.main-content.wide {
    max-width: none;
}

.page-header h1 {
    margin: 0;
    font-size: var(--wa-font-size-xl);
}

/* Login */
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wa-space-l);
    max-width: 22rem;
    margin: 6vh auto 0;
}

.login-logo {
    width: 90%;
    height: auto;
}

.login form {
    width: 100%;
}

/* Inbox grid — it is the page: inbox.js sets --max-height from the viewport
   so only the grid scrolls, never the document. */
html:has(#inbox-grid) {
    overflow: hidden;
}

#inbox-grid {
    --row-hover-background: var(--wa-color-brand-fill-quiet);
    --wave-bar: var(--wa-color-neutral-border-loud);
}

#inbox-grid::part(cell) {
    cursor: pointer;
}

/* Dark-mode browser extensions look for this signal; the tokens themselves
   come from .wa-dark. */
@media (prefers-color-scheme: dark) {
    :root:not(.wa-light) {
        color-scheme: dark;
    }
}

.page-header {
    margin-bottom: var(--wa-space-m);
}

.recap {
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-text-quiet);
    margin: 0;
}

/* Detail page */
.rec-fulltext {
    white-space: pre-wrap;
    line-height: var(--wa-line-height-expanded);
}

.details-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--wa-space-xs) var(--wa-space-l);
    margin: 0;
}

.details-grid dt {
    color: var(--wa-color-text-quiet);
}

.details-grid dd {
    margin: 0;
}

.detail h2 {
    font-size: var(--wa-font-size-m);
    margin: 0;
}

audio {
    width: 100%;
}

.waveform {
    --wave-played: var(--wa-color-brand-fill-loud);
    --wave-rest: var(--wa-color-neutral-border-normal);
    display: block;
    width: 100%;
    height: 72px;
    cursor: pointer;
}