/* Shared primitives and tone modifiers; see /admin/styleguide and docs/styleguide.md. */
:root { color-scheme: dark; --bg:#11110f; --surface:#1b1b17; --line:#37372e; --ink:#f3f0e5; --muted:#b8b5a8; --accent:#edbd42; --tone:var(--accent); --radius:1rem; font:17px/1.6 "Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { overflow-wrap:anywhere; margin:0; background:var(--bg); color:var(--ink); }
a { color:var(--accent); text-underline-offset:.22em; }
a:hover { color:var(--ink); }
h1,h2,h3,p { margin:0 0 .8rem; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(2rem,6vw,3.6rem); } h2 { font-size:1.6rem; } h3 { font-size:1.15rem; }
small,.muted { color:var(--muted); } small { font-size:.85rem; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.shell { width:min(100% - 2rem,64rem); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--line); padding:1.2rem 0; }
.row { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.between { justify-content:space-between; }
.stack { display:grid; gap:1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1rem; }
main.shell { padding-block:2.4rem 4rem; }
nav a { text-decoration:none; } .brand { text-decoration:none; font-weight:800; letter-spacing:-.05em; color:var(--ink); font-size:1.3rem; }
.eyebrow { text-transform:uppercase; font-size:.75rem; letter-spacing:.18em; color:var(--accent); font-weight:700; }
.hero { padding-block:clamp(2rem,7vw,5rem); max-width:45rem; } .hero h1 { font-size:clamp(3rem,10vw,6rem); }
.hero p { max-width:35rem; } .hero strong { color:var(--accent); }
.button,.box,.badge { --tone:var(--accent); border:1px solid var(--line); border-radius:var(--radius); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:.45rem; min-height:44px; padding:.55rem .9rem; font:inherit; font-weight:650; line-height:1.3; text-decoration:none; cursor:pointer; color:var(--tone); background:var(--surface); }
.button:hover { border-color:var(--tone); color:var(--tone); background:color-mix(in srgb,var(--tone) 12%,var(--surface)); }
.button--solid { background:var(--tone); color:var(--bg); border-color:var(--tone); } .button--solid:hover { background:color-mix(in srgb,var(--tone) 85%,white); color:var(--bg); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.box { padding:clamp(1rem,3vw,1.5rem); background:var(--surface); }
.box--accent { border-color:var(--tone); } .box--mine { border:3px solid var(--accent); }
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .6rem; font-size:.78rem; color:var(--tone); background:color-mix(in srgb,var(--tone) 8%,var(--surface)); border-color:color-mix(in srgb,var(--tone) 35%,var(--line)); }
/* Tones work on each primitive. */
.button--gold,.box--gold,.badge--gold { --tone:#edbd42; }
.button--success,.box--success,.badge--success { --tone:#51e08c; }
.button--danger,.box--danger,.badge--danger { --tone:#ff6977; }
.button--warm,.box--warm,.badge--warm { --tone:#d4ac8b; }
.song { display:flex; gap:1rem; align-items:start; } .song__body { flex:1; min-width:0; } .song__number { min-width:1.5rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.song p:last-child,.box p:last-child { margin-bottom:0; }
.actions { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; } .actions form { display:contents; }
form > div > div { margin-bottom:1rem; } label { display:block; font-weight:650; margin-bottom:.3rem; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:.6rem; background:var(--bg); color:var(--ink); padding:.7rem; font:inherit; }
input[type=checkbox] { width:auto; } textarea { resize:vertical; }
form ul { color:#eca59a; } .help-text,.help-text p { font-size:.85rem; color:var(--muted); }
.search { display:flex; gap:.6rem; } .search input { flex:1; min-width:0; }
.icon { width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-.15em; }
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1rem; }
.qr { width:min(100%,20rem); border-radius:.7rem; background:white; }
.site-footer { border-top:1px solid var(--line); padding-block:1.5rem; color:var(--muted); font-size:.85rem; }
summary { cursor:pointer; } details > .stack { margin-top:1rem; }
.drag-handle { cursor:grab; touch-action:pan-y; } [draggable=true].dragging { opacity:.5; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

@media (prefers-reduced-motion:no-preference) { .button { transition:background .15s,border-color .15s; } }

.profile-menu { position:relative; } .profile-menu > .box { position:absolute; right:0; z-index:5; min-width:12rem; box-shadow:0 .5rem 2rem #0008; }

/* Shared compact lists, labels and event cards. */
.event-link { color:var(--ink); text-decoration:none; font-weight:700; } .event-link:hover { color:var(--accent); }
.song-list { border:1px solid var(--line); border-radius:var(--radius); } .song-row { display:grid; grid-template-columns:minmax(0,2fr) 8rem minmax(0,2fr); align-items:center; gap:.7rem; padding:.35rem .65rem; } .song-row + .song-row { border-top:1px solid var(--line); }
.song-row__title { font:inherit; font-weight:700; color:var(--ink); text-align:left; } button.song-row__title { border:0; background:none; cursor:pointer; padding:0; min-height:44px; } button.song-row__title:hover { color:var(--accent); } .song-row__comment { font-size:.85rem; color:var(--muted); } .song-row.is-selected { background:color-mix(in srgb,var(--accent) 12%,var(--bg)); } .selection-status { color:var(--accent); }
.confidence { position:relative; width:max-content; } .confidence summary { list-style:none; cursor:pointer; } .confidence summary::-webkit-details-marker { display:none; } .confidence__hint { position:absolute; top:100%; right:0; z-index:10; min-width:12rem; padding:.6rem; background:var(--ink); color:var(--bg); border-radius:.5rem; font-size:.8rem; box-shadow:0 .4rem 1rem #0008; } button.badge { font-family:inherit; cursor:pointer; min-height:32px; }
.votes { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; } .votes form { display:contents; } .button--vote { min-height:36px; padding:.35rem .55rem; font-size:.85rem; } .vote-count { display:inline-flex; gap:.35rem; align-items:center; padding:.2rem .4rem; color:var(--muted); } .button--icon { width:40px; min-width:40px; padding:.4rem; }
.event-card { padding:0; overflow:hidden; } .event-card__link { color:inherit; text-decoration:none; display:block; height:100%; } .event-card__link:hover h2 { color:var(--accent); } .event-card__image { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .event-card__placeholder { display:grid; place-items:center; background:linear-gradient(135deg,#47381c,#1b1b17); font-size:4rem; color:var(--accent); } .event-card__body { padding:1.2rem; } .event-card__body p { white-space:pre-line; }
.event-details { display:flex; align-items:center; gap:1rem; } .event-detail-image { width:12rem; max-height:9rem; object-fit:cover; border-radius:var(--radius); }
.now-playing,.current-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .now-playing p { margin-bottom:.3rem; }
.control-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:1rem; } .control-status { padding:.6rem .8rem; font-size:.8rem; } .control-status p { margin:.2rem 0; } .control-status .button { min-height:32px; padding:.3rem .55rem; font-size:.8rem; }
.live-page .site-header { padding:.45rem 0; } .live-page .site-footer { display:none; } .admin-live { width:min(100% - 2rem,100rem); gap:.6rem; } main.admin-live { padding-block:1rem; } .live-page .site-header .shell { width:min(100% - 2rem,100rem); } .admin-live h1 { font-size:1.5rem; margin-bottom:.5rem; } .admin-live h2 { font-size:1.2rem; } .admin-live .stack { gap:.65rem; } .admin-live .control-header nav .button { min-height:32px; font-size:.8rem; padding:.3rem .6rem; } .live-indicator { font-size:.7rem; } .empty-current { padding:.7rem 1rem; color:var(--muted); } .queue-title { margin:0; }
.queue-list { display:grid; gap:.35rem; } .queue-row { display:grid; grid-template-columns:1.3rem minmax(10rem,2fr) minmax(7rem,1.2fr) minmax(6rem,1fr) auto auto; gap:.6rem; align-items:center; padding:.5rem .7rem; user-select:none; } .drag-surface { cursor:grab; } .queue-actions { justify-content:end; flex-wrap:nowrap; } .queue-actions .button--gold { background:var(--accent); color:var(--bg); font-size:1.05rem; min-width:108px; min-height:46px; } .current-row { padding:.8rem 1rem; } .current-row h2 { margin:.2rem 0; }
@media (max-width:70rem) { .queue-row { grid-template-columns:1.2rem minmax(8rem,2fr) minmax(6rem,1fr) minmax(5rem,1fr); } .queue-row .votes { grid-column:2/3; } .queue-actions { grid-column:3/-1; } }

.lookup-dialog { width:min(100% - 2rem,48rem); max-height:85vh; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; background:var(--bg); color:var(--ink); } .lookup-dialog::backdrop { background:#000b; } .lookup-result { display:grid; gap:.25rem; width:100%; color:var(--ink); text-align:left; font:inherit; cursor:pointer; } .lookup-result:hover { border-color:var(--accent); }

.song-row--selectable { grid-template-columns:minmax(0,2fr) 8rem minmax(0,2fr) 1.5rem; cursor:pointer; } .song-row--selectable:hover { background:color-mix(in srgb,var(--accent) 6%,var(--bg)); } .song-row .song-row__check { width:22px; height:22px; margin:0; accent-color:var(--accent); cursor:pointer; }

.song-heading { display:flex; align-items:center; gap:.65rem; min-width:0; } .song-heading > * { min-width:0; flex:1; } .song-heading > .muted { font-size:.9em; } .admin-song-row { display:grid; grid-template-columns:minmax(0,2fr) 8rem minmax(0,1fr) auto auto; gap:.7rem; align-items:center; padding:.4rem .65rem; } .admin-song-row + .admin-song-row { border-top:1px solid var(--line); } .admin-song-actions { display:grid; justify-items:end; gap:.15rem; } .admin-song-actions .button { min-height:28px; padding:.25rem .5rem; font-size:.8rem; } .admin-song-main small { font-size:.75rem; } .admin-song-row form { margin:0; }
.inline-edit { display:block; min-width:0; } .inline-edit__display { display:block; max-width:100%; border:0; padding:0; color:inherit; background:none; font:inherit; text-align:left; cursor:text; } .inline-edit__display:hover { color:var(--accent); text-decoration:underline dotted; text-underline-offset:.2em; } .inline-edit input { min-width:4rem; padding:.2rem .35rem; font:inherit; } .inline-edit__error { color:#ff6977; display:block; } [hidden] { display:none !important; }

.song-heading .song-row__title,.song-heading .song-row__artist,.inline-edit__display { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.is-missing { color:#ff6977; }

.song-results--selection { --song-row-height:4rem; max-height:calc(5 * var(--song-row-height) + 2px); overflow:auto; }
.song-results--selection .song-row { height:var(--song-row-height); }
.song-results--selection .song-row__comment { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.admin-song-lyrics { display:flex; justify-content:center; }

.song-notes { height:8rem; padding:.5rem .75rem; } .song-notes__viewport { height:100%; overflow:auto; } .song-notes__text { margin:0; white-space:pre-wrap; font-size:1.4rem; line-height:1.1; }

/* Mobile adjustments, kept together to avoid superseded layout rules. */
@media (max-width:40rem) {
  .site-header .row { gap:.5rem; } .site-header nav { font-size:.85rem; }
  .song { gap:.5rem; } .actions .button { font-size:.85rem; }
  .song-row { grid-template-columns:minmax(0,1fr) auto; gap:.2rem .5rem; }
  .song-row .confidence { grid-column:2; grid-row:1; } .song-row__comment { grid-column:1/-1; }
  .song-row--selectable { grid-template-columns:minmax(0,1fr) auto 1.5rem; }
  .song-row--selectable .song-row__check { grid-column:3; grid-row:1; }
  .song-row--selectable .song-row__comment { grid-column:1/3; }
  .song-heading { gap:.45rem; font-size:.9rem; }
  .song-results--selection { --song-row-height:5rem; }
  .admin-song-row { grid-template-columns:minmax(0,1fr) auto auto; gap:.35rem; }
  .admin-song-main { grid-column:1/-1; }
  .admin-song-row .song-row__comment { grid-column:1/3; grid-row:3; }
  .admin-song-lyrics { grid-column:2; grid-row:2; } .admin-song-actions { grid-column:3; grid-row:2/4; }
  .control-header { grid-template-columns:1fr; }
  .event-details { align-items:start; flex-direction:column; } .event-detail-image { width:100%; max-height:14rem; }
  .queue-row { grid-template-columns:1rem minmax(0,1fr) auto; }
  .queue-row > .muted,.queue-row .votes { grid-column:2; }
  .queue-actions { grid-column:2/-1; justify-content:start; flex-wrap:wrap; }
}

.lyrics { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--lyrics-font-size, 24px); line-height: 1.5; }
.admin-song-lyrics { gap: .5rem; align-items: center; }