/* ==========================================================================
   main.css — Song of the Day
   All colors are CSS custom properties defined in theme.css.
   To change the palette, edit theme.yaml and run: python generate_theme.py
   ========================================================================== */

/* --- Reset & Base --------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
    height: 100%;
    font: 100%/1.5 sans-serif;
    word-wrap: break-word;
    margin: 0 auto;
    padding: 1.5em;
    background: var(--color-bg);
    color: var(--color-text);
}

@media (min-width: 768px) {
    html {
        font-size: 125%;
        max-width: 42em;
    }
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
    margin: 2.5rem 0 1.5rem 0;
    line-height: 1.25;
    color: var(--color-text);
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: underline;
}

p {
    margin: 1em 0;
    line-height: 1.5;
}

p code {
    background-color: var(--color-surface-raised);
    padding: 0.05em 0.2em;
    border: 1px solid var(--color-border-input);
}

ol, ul {
    margin: 1em;
}

ol li ol, ol li ul, ul li ol, ul li ul {
    margin: 0 2em;
}

ol li p, ul li p {
    margin: 0;
}

dl {
    font-family: monospace, monospace;
}

dl dt {
    font-weight: bold;
}

dl dd {
    margin: -1em 0 1em 1em;
}

img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.5em;
}

blockquote {
    padding-left: 1em;
    font-style: italic;
    border-left: solid 1px var(--color-accent);
    color: var(--color-text-medium);
}

table {
    font-size: 1rem;
    text-align: left;
    caption-side: bottom;
    margin-bottom: 2em;
}

table * {
    border: none;
}

table thead, table tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

table tr:nth-child(even) {
    background-color: var(--color-table-stripe);
}

table tbody {
    display: block;
    max-height: 70vh;
    overflow-y: auto;
}

table td, table th {
    padding: 0.25em;
}

table, .highlight > pre, pre.example {
    max-height: 70vh;
    margin: 1em 0;
    padding: 1em;
    overflow: auto;
    font-size: 0.85rem;
    font-family: monospace, monospace;
    border: 1px dashed rgba(var(--color-accent-rgb), 0.5);
}

.title {
    font-size: 2.5em;
}

.subtitle {
    font-weight: normal;
    font-size: 0.75em;
    color: var(--color-text-medium);
}

.tags {
    margin-top: -1.5rem;
    padding-bottom: 1.5em;
}

.tags li {
    display: inline;
    margin-right: 0.5em;
}

figure {
    margin: 1em 0;
}

figure figcaption {
    font-family: monospace, monospace;
    font-size: 0.75em;
    text-align: center;
    color: var(--color-text-muted);
}

.footnote-definition sup {
    margin-left: -1.5em;
    float: left;
}

.footnote-definition .footnote-body {
    margin: 1em 0;
    padding: 0 1em;
    border: 1px dashed rgba(var(--color-accent-rgb), 0.3);
    background-color: var(--color-table-stripe);
}

.footnote-definition .footnote-body p:only-child {
    margin: 0.2em 0;
}

/* --- Core / Alpine -------------------------------------------------------- */
[x-cloak] { display: none !important; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

/* --- Header / Nav --------------------------------------------------------- */
header {
    display: block;
    padding-bottom: 1em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--color-border);
}

.header-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4em;
}

header .site-title {
    font-size: 1.4em;
    font-weight: bold;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-medium);
    padding: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    color: var(--color-accent);
}

header nav {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.85em;
}

header nav a + a {
    margin-left: 0;
}

/* --- Footer --------------------------------------------------------------- */
footer {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85em;
}

/* --- Flash Messages ------------------------------------------------------- */
.flash {
    padding: 0.75em 1em;
    margin-bottom: 1em;
    border-left: 4px solid var(--color-border-input);
    background: var(--color-surface-subtle);
}

.flash-error   { border-left-color: var(--color-error);   background: var(--color-error-bg);   color: var(--color-error-text); }
.flash-success { border-left-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success-text); }
.flash-warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning-text); }
.flash-info    { border-left-color: var(--color-accent);  background: var(--color-info-bg);    color: var(--color-text); }

/* --- Forms ---------------------------------------------------------------- */
.form-group {
    margin-bottom: 1em;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.5em 0.65em;
    border: 1px solid var(--color-border-input);
    border-radius: 4px;
    font-size: 0.95em;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
}

textarea { resize: vertical; min-height: 6em; }

.form-hint {
    font-size: 0.85em;
    color: var(--color-text-medium);
    margin-bottom: 0.35em;
}

.field-error {
    font-size: 0.85em;
    color: var(--color-error);
    margin-top: 0.25em;
}

.has-error {
    border-color: var(--color-error) !important;
}

.form-page {
    max-width: 28em;
    margin: 0 auto;
}

.form-actions {
    display: flex;
    gap: 0.75em;
    margin-top: 1em;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.5em 1.2em;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.95em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-surface-raised);
}

.btn:hover { text-decoration: none; background: var(--color-hover-bg); }

.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }

.btn-secondary { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border-input); }
.btn-secondary:hover { background: var(--color-hover-bg); }

.btn-danger { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.btn-danger:hover { background: var(--color-error-hover); color: #fff; }

.btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-success:hover { background: var(--color-success-hover); color: #fff; }

.btn-small { padding: 0.3em 0.75em; font-size: 0.85em; }

.btn-full { width: 100%; }

.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Cards ---------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.5em;
    margin-bottom: 1.5em;
}

.card-footer {
    margin-top: 1em;
    padding-top: 0.75em;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

/* --- Song Cards (feed/profile) -------------------------------------------- */
.song-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75em;
}

.song-meta .meta-date {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.song-info {
    border-left: 3px solid var(--color-accent);
    padding: 0.75em 1em;
    margin-bottom: 0.75em;
    background: var(--color-surface-subtle);
}

.song-info a { font-weight: 600; font-size: 1.05em; }

.song-info .artist {
    font-size: 0.85em;
    color: var(--color-text-medium);
    margin-top: 0.15em;
}

.song-actions {
    display: flex;
    align-items: center;
    gap: 0.75em;
    font-size: 0.85em;
}

.song-actions a:hover, .song-actions button:hover { text-decoration: underline; }

.song-actions form {
    display: inline;
    margin: 0;
    padding: 0;
}

.song-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    padding: 0;
}

.song-actions .action-edit   { color: var(--color-accent); }
.song-actions .action-listen { color: var(--color-listen); }
.song-actions .action-delete { color: var(--color-error); }

.song-caption {
    margin: 0.5em 0;
}

.song-time {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

/* --- Tags ----------------------------------------------------------------- */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0.5em 0;
    list-style: none;
}

.tag {
    display: inline-block;
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent-dim);
    font-size: 0.8em;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    text-decoration: none;
}

.tag:hover {
    background: rgba(var(--color-accent-rgb), 0.2);
    text-decoration: none;
}

/* --- NSFW Badge ----------------------------------------------------------- */
.badge-nsfw {
    display: inline-block;
    background: var(--color-error);
    color: #fff;
    font-size: 0.75em;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    font-weight: 600;
}

/* --- Comments ------------------------------------------------------------- */
.comments-section {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border-light);
}

.comments-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-text);
}

.comments-toggle:hover { color: var(--color-accent); }

.comment {
    margin-bottom: 1em;
    padding-left: 1em;
    border-left: 2px solid var(--color-border);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25em;
    font-size: 0.9em;
}

.comment-header .comment-date {
    color: var(--color-text-muted);
    font-size: 0.9em;
    margin-left: 0.5em;
}

.comment-actions {
    display: flex;
    gap: 0.5em;
    font-size: 0.85em;
}

.comment-actions button, .comment-actions a {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    padding: 0;
}

.comment-actions .action-edit   { color: var(--color-accent); }
.comment-actions .action-delete { color: var(--color-error); }

.comment-form { margin-top: 1em; }

.comment-form textarea {
    margin-bottom: 0.5em;
}

.comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
}

.comment-form-footer .emoji-hint {
    font-size: 0.85em;
    color: var(--color-text-medium);
}

/* --- Search --------------------------------------------------------------- */
.search-form {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.search-form select,
.search-form input[type="text"] {
    width: auto;
    font-size: 0.9em;
    padding: 0.4em 0.6em;
}

.search-form input[type="text"] {
    flex: 1;
    min-width: 0;
}

.search-active-notice {
    padding: 0.75em 1em;
    margin-bottom: 1em;
    border-left: 4px solid var(--color-warning);
    background: var(--color-warning-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Pagination ----------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2em;
    font-size: 0.9em;
}

.pagination .btn.disabled {
    pointer-events: none;
}

/* --- Page Header ---------------------------------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    margin-bottom: 1.5em;
    flex-wrap: wrap;
}

.page-header h2 { margin: 0; }

.page-header-actions {
    display: flex;
    gap: 0.75em;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Profile -------------------------------------------------------------- */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-stats {
    font-size: 0.9em;
    color: var(--color-text-medium);
}

.profile-bio {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border-light);
}

/* --- Checkbox Label ------------------------------------------------------- */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
}

/* --- Notice / Alert ------------------------------------------------------- */
.notice {
    padding: 0.75em 1em;
    margin-bottom: 1em;
    border-left: 4px solid var(--color-warning);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.notice strong { display: block; margin-bottom: 0.25em; }

/* --- Section Divider ------------------------------------------------------ */
.section-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 1.5em 0;
}

/* --- Danger Zone ---------------------------------------------------------- */
.danger-zone {
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 1px solid var(--color-border-light);
}

.danger-zone h3 {
    color: var(--color-error);
    margin-top: 0;
    margin-bottom: 0.75em;
}

/* --- Audio Player --------------------------------------------------------- */
.player-card {
    background: var(--color-surface-subtle);
    border-radius: 4px;
    padding: 1.5em;
}

.player-now-playing {
    text-align: center;
    margin-bottom: 1em;
}

.player-now-playing .label {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.player-now-playing .track-title {
    font-weight: 600;
}

.player-now-playing .track-artist {
    font-size: 0.9em;
    color: var(--color-text-medium);
}

.player-progress-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 0.25em;
}

.player-progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
    transition: width 0.1s linear;
}

.player-times {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: var(--color-text-muted);
    margin-bottom: 1em;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
}

.btn-play-pause {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-play-pause:hover { background: var(--color-accent-hover); }

.btn-play-pause svg { width: 1.5em; height: 1.5em; }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-medium);
    padding: 0.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover { background: var(--color-surface-raised); color: var(--color-text); }
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-icon svg { width: 1.5em; height: 1.5em; }

.btn-icon.active { color: var(--color-accent); }

.player-volume {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1em;
}

.player-volume span {
    font-size: 0.8em;
    color: var(--color-text-muted);
    width: 2.5em;
}

.player-extras {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    margin-top: 1em;
}

/* Range input styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-top: -5px;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
}

input[type="range"]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
}

/* --- Track List ----------------------------------------------------------- */
.track-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 0.6em 0.75em;
    border-radius: 4px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s;
}

.track-item:hover { background: var(--color-surface-raised); }

.track-item.active {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-left-color: var(--color-accent);
}

.track-item .track-num {
    width: 2em;
    color: var(--color-text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.track-item .track-info {
    flex: 1;
    min-width: 0;
}

.track-item .track-info .title {
    font-weight: 600;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-item.active .track-info .title {
    color: var(--color-accent);
}

.track-item .track-info .artist {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.track-item .playing-indicator {
    color: var(--color-accent);
    margin-left: 0.5em;
    flex-shrink: 0;
}

/* --- YouTube Search ------------------------------------------------------- */
.yt-search-section {
    padding: 1em;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    margin-bottom: 1em;
    background: var(--color-surface-subtle);
}

.yt-search-section label {
    font-weight: 600;
    margin-bottom: 0.5em;
    display: block;
}

.yt-search-bar {
    display: flex;
    gap: 0.5em;
}

.yt-search-bar input {
    flex: 1;
}

.yt-results {
    margin-top: 0.75em;
    max-height: 20em;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

.yt-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.6em 0.75em;
    border-bottom: 1px solid var(--color-border-light);
    border-left: 3px solid transparent;
    background: var(--color-surface);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.yt-result-item:last-child { border-bottom: none; }
.yt-result-item:hover { background: var(--color-surface-subtle); }

.yt-result-item.selected {
    background: rgba(var(--color-accent-rgb), 0.06);
    border-left-color: var(--color-accent);
}

.yt-result-item .result-info {
    flex: 1;
    min-width: 0;
}

.yt-result-item .result-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-result-item .result-channel {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.yt-result-item .result-duration {
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin-left: 0.75em;
    white-space: nowrap;
}

.yt-error { color: var(--color-error); font-size: 0.85em; margin-top: 0.5em; }
.yt-empty { color: var(--color-text-muted); font-size: 0.85em; margin-top: 0.5em; }

/* --- Mixtape List --------------------------------------------------------- */
.mixtape-list {
    display: grid;
    gap: 1.5em;
}

.mixtape-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.25em;
}

.mixtape-card h3 {
    margin: 0 0 0.25em;
    font-size: 1.15em;
}

.mixtape-card h3:hover { color: var(--color-accent); }

.mixtape-card .mixtape-author {
    font-size: 0.85em;
    color: var(--color-text-medium);
    margin-bottom: 0.5em;
}

.mixtape-card .mixtape-desc {
    margin-bottom: 0.5em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Song List (mixtape edit) --------------------------------------------- */
.song-list-item {
    padding: 0.75em;
    background: var(--color-surface-subtle);
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.song-list-item .song-list-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.song-list-item .song-position {
    font-weight: 700;
    color: var(--color-text-muted);
    margin-right: 1em;
    min-width: 1.5em;
}

.song-reorder-actions {
    display: flex;
    gap: 0.25em;
    align-items: center;
    margin-left: 0.75em;
}

.song-reorder-actions form { display: inline; margin: 0; }

.song-reorder-actions button,
.song-reorder-actions span {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0.15em 0.4em;
    color: var(--color-text-medium);
}

.song-reorder-actions button:hover { color: var(--color-accent); }
.song-reorder-actions .disabled { color: var(--color-border-input); cursor: default; }

.song-reorder-actions .action-remove {
    color: var(--color-error);
}

/* --- Modals --------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
}

.modal {
    position: relative;
    z-index: 10;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1.5em;
    max-width: 28em;
    margin: 1em;
    box-shadow: 0 4px 20px var(--color-shadow);
}

.modal h3 { margin-top: 0; margin-bottom: 0.5em; }

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 1em;
}

/* --- Download Progress ---------------------------------------------------- */
.download-progress {
    display: flex;
    align-items: center;
    padding: 0.75em 1em;
    margin-bottom: 1em;
    border: 1px solid var(--color-success);
    border-radius: 4px;
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.spinner {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5em;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- JS Toast (download success) ------------------------------------------ */
.js-toast {
    position: fixed;
    top: 1em;
    right: 1em;
    background: var(--color-success);
    color: #fff;
    padding: 0.75em 1.5em;
    border-radius: 4px;
    box-shadow: 0 2px 12px var(--color-shadow);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* --- Posts list (from base styles) ---------------------------------------- */
.posts {
    margin: 0;
    list-style: none;
}

.posts .post a {
    display: flex;
    padding: 0.5em 0;
    color: var(--color-text);
}

.posts .post a:hover, .posts .post a:focus, .posts .post a:active {
    text-decoration: none;
    background: var(--color-table-stripe);
}

.posts .post date {
    font-family: monospace, monospace;
    font-size: 0.8rem;
    vertical-align: middle;
    padding-right: 2rem;
    color: var(--color-text-muted);
}

/* --- Misc ----------------------------------------------------------------- */
.text-muted   { color: var(--color-text-muted); }
.text-small   { font-size: 0.85em; }
.text-center  { text-align: center; }
.mt-0         { margin-top: 0; }
.mb-0         { margin-bottom: 0; }
.inline-form  { display: inline; margin: 0; padding: 0; }

.song-list-numbered {
    list-style: none;
    margin: 0;
    padding: 0;
}

.song-list-numbered li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
}

.song-list-numbered .position {
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: 1.05em;
    margin-right: 1em;
    margin-top: 0.15em;
    min-width: 1.5em;
}

.auth-image {
    display: block;
    margin: 0 auto 1.5em;
    border-radius: 4px;
}

.empty-state {
    text-align: center;
    padding: 2em 1em;
    color: var(--color-text-medium);
}

/* --- Admin: Feature Suggestions ------------------------------------------- */
.suggestion-filters {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.suggestion-card {
    border-left: 3px solid var(--color-border);
}

.suggestion-card.suggestion-new {
    border-left-color: var(--color-accent);
}

.suggestion-card.suggestion-archived {
    opacity: 0.6;
}

.suggestion-meta {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.5em;
    flex-wrap: wrap;
}

.suggestion-username {
    font-weight: 600;
}

.suggestion-date {
    font-size: 0.85em;
    color: var(--color-text-muted);
    font-family: monospace, monospace;
}

.suggestion-badge {
    font-size: 0.75em;
    font-weight: 600;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-border);
    color: var(--color-text-muted);
}

.suggestion-badge-new {
    background: var(--color-accent);
    color: #fff;
}

.suggestion-body {
    margin: 0.5em 0;
    white-space: pre-wrap;
}

.suggestion-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.75em;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 0.2em 0.65em;
    font-size: 0.85em;
}

.btn.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}