/* Shared touchscreen shell. Search keeps its dedicated, full-height layout. */
:root { --dim: #96a0b3; --line: #303543; --bg2: #161a24; }
body, button, input, h2, span, div { letter-spacing: 0 !important; }
button { transition: background-color .15s, border-color .15s; }
button:hover { background-color: #232733; }
button:focus-visible { outline: 2px solid var(--b1); outline-offset: 3px; }
button:disabled { cursor: default; }
#bg { opacity: .26; }
#rail { flex-basis: 310px; padding: 16px 20px 12px; gap: 14px; background: #0c0f16ee; overflow-y: auto; }
#rail > * { flex-shrink: 0; }
/* Shared light, two voices. The mask keeps every edge of the official logo
   sharp; the title's bloom never changes the header's geometry. */
#brand {
  --brand-a: #ffdb94; --brand-b: #ffc07a;
  --brand-title-light: #ffe7bc; --brand-logo-light: #ffe7bc;
  --brand-title-glow: .1125;
  --brand-sweep: -80%; --brand-flow: 50%;
  position: relative; isolation: isolate; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 113px; gap: 12px; flex: none;
  min-height: 110px; padding-top: 8px;
}
#brand::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-a), var(--brand-b), transparent);
  opacity: var(--brand-title-glow); pointer-events: none;
}
#mark { min-width: 0; font-weight: 500; line-height: 1.2; }
#mark span, #mark strong, #logo-face {
  background-image:
    linear-gradient(110deg, transparent calc(var(--brand-sweep) - 16%), #fff5dfb0 var(--brand-sweep), transparent calc(var(--brand-sweep) + 16%)),
    linear-gradient(115deg, var(--brand-a), var(--brand-title-light) 42%, var(--brand-b));
  background-size: 100% 100%, 180% 100%; background-position: 0 0, var(--brand-flow) 50%;
}
#mark span, #mark strong { display: block; width: fit-content; max-width: 100%; background-clip: text; -webkit-background-clip: text; color: transparent; }
#mark span { font-size: 15px; white-space: nowrap; font-weight: 500; line-height: 1.5; }
#mark strong { font-size: 40px; font-weight: 650; line-height: 1.12;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--brand-a) calc(var(--brand-title-glow) * 100%), transparent)); }
#logo-box { position: relative; width: 113px; aspect-ratio: 1; overflow: visible; }
#logo-face {
  position: absolute; inset: 0;
  mask: var(--empire-mask) center / contain no-repeat;
  -webkit-mask: var(--empire-mask) center / contain no-repeat;
  background-image:
    linear-gradient(110deg, transparent calc(var(--brand-sweep) - 16%), #fff5dfb0 var(--brand-sweep), transparent calc(var(--brand-sweep) + 16%)),
    linear-gradient(115deg, var(--brand-a), var(--brand-logo-light) 42%, var(--brand-b));
}
#logo-face { z-index: 1; }
.card { border: 0; border-radius: 0; background: none; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.card h2, #wallpaper-sidebar h2 { font-size: 11px; font-weight: 600; color: var(--dim); margin: 0 0 14px; }
#queue-card { border-bottom: 0; padding-top: 2px; }
#status:empty { display: none; }
#chips { --chip-row: 44px; gap: 22px; padding: 8px 24px; border-bottom: 1px solid var(--line); background: #0e1119b8; }
#chips h2 { color: var(--dim); font-size: 12px; font-weight: 500; margin: 0; }
.browse-group { width: 210px; flex: none; padding-right: 20px; border-right: 1px solid var(--line); }
.browse-group > h2, .collections-group > header { height: 24px; display: flex; align-items: center; margin-bottom: 4px !important; }
.collections-group { min-width: 0; flex: 1; }
.collections-group > header { justify-content: space-between; }
#modes { gap: 4px; }
#chips button { min-width: 0; grid-template-columns: 26px minmax(0, 1fr) auto; padding: 0 10px; font-size: 14px; }
#chips button .lbl { overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.5; }
#chips button .key { font-size: 12px; margin-left: 8px; }
#chips button .ico { font-size: 17px; }
#chips button .ico svg { width: 20px; height: 20px; }
#modes button { background: transparent; border-color: transparent; }
#chips button.current { color: var(--b1); border-color: #8b6835; background: #2c2418; }
#tag-rail { grid-auto-columns: 190px; gap: 4px; }
.collection-arrows { display: flex; gap: 4px; }
#chips .collection-arrows button { width: 44px; height: 32px; display: grid; place-items: center; background: none; border-color: transparent; }
.collection-arrows svg { width: 18px; height: 18px; }
.collection-arrows button:disabled { opacity: .2; }
#list-head { min-height: 52px; padding: 3px 24px; color: var(--fg); font-size: 14px; border-bottom: 1px solid #242833; }
#list-acts button { min-height: 48px; font-size: 13px; padding: 0 16px; }
#app:not(.search-mode) #list-acts button { min-height: 44px; }
#list-acts .all, #list-acts .shuf { border-color: var(--line); color: var(--fg); }
#list-acts .all { color: var(--b1); }
#list { padding-left: 24px; }
.song { min-height: 72px; border-color: #262a35; padding: 12px; }
.song .txt { display: flex; flex-direction: column; gap: 3px; }
.song .what { order: -1; font-size: 18px; margin: 0; }
.song .who { color: var(--dim); font-size: 13px; }
.song.playing .who { color: var(--b1); }
.song.staged { background: #292319; }
.acts { background: #17191f; }
.acts .now { color: var(--b1); border-color: #8b6835; }
.acts button { display: flex; justify-content: center; align-items: center; gap: 8px; }
.acts svg, .qrow svg { width: 18px; height: 18px; flex: none; }
#now-btns button { display: flex; justify-content: center; align-items: center; gap: 8px; }
#now-btns svg { width: 20px; height: 20px; }
.qrow button { display: grid; place-items: center; width: 36px; }
.qrow .qn { width: 1.5ch; }
.qrow { gap: 4px; }
#wallpaper-sidebar { display: flex; flex: none; overflow: visible; flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
#wallpaper-sidebar h2 { display: flex; align-items: center; justify-content: space-between; }
#wallpaper-state { color: var(--b1); font-size: 11px; }
#wallpaper-preview { aspect-ratio: 32 / 9; }
#wallpaper-preview-frame { position: relative; aspect-ratio: 32 / 9; flex: none; overflow: hidden; border-radius: 4px; background: #000; }
#wallpaper-preview-frame img, #wallpaper-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#wallpaper-video { position: absolute; inset: 0; }
#wallpaper-preview-label { position: absolute; left: 8px; bottom: 6px; padding: 3px 6px; font-size: 10px; background: #000b; border-radius: 3px; }
#list-acts > button > svg { width: 18px; height: 18px; }
#wallpaper-current { font-size: 18px; font-weight: 600; margin: 12px 0; }
.wallpaper-options label { font-size: 14px; }
.wallpaper-options input { accent-color: var(--b1); width: 20px; height: 20px; }
.playback-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
.playback-modes button { min-height: 64px; font-size: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.playback-modes svg { width: 19px; height: 19px; }
.playback-modes button[aria-pressed="true"] { color: var(--b1); background: #2c2418; border-color: #8b6835; }
.wallpaper-transport { display: flex; gap: 8px; margin-bottom: 12px; }
.wallpaper-transport button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; font-size: 13px; }
.wallpaper-transport svg { width: 18px; height: 18px; }
.wallpaper-transport .wallpaper-playback { flex: 0 0 48px; width: 48px; padding: 0; }
.wallpaper-transport .wallpaper-queue-shortcut { display: none; }
.wallpaper-message:empty { display: none; }
#wallpaper-queue-heading { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 12px !important; }
#wallpaper-queue { min-height: 80px; overflow-y: auto; flex: 1; }
#wallpaper-queue .none { font-size: 14px; color: var(--dim); line-height: 1.6; }
#queue-view .none a { color: var(--b1); text-decoration: underline; text-underline-offset: 3px; }
#queue-view .none a:focus-visible { outline: 2px solid var(--b1); outline-offset: 4px; }
#queue-playback button:disabled, #wallpaper-controls button:disabled { opacity: .35; }
#wallpaper-queue .active .qwhat { color: var(--b1); }
.wallpaper-grid { gap: 12px; padding: 8px 12px 20px 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-content: start; }
.wallpaper-item { min-width: 0; }
.wallpaper-tile { width: 100%; position: relative; }
.wallpaper-tile img { aspect-ratio: 32 / 9; }
.wallpaper-tile span { padding: 12px; font-size: 16px; font-weight: 550; }
.wallpaper-tile .duration { position: absolute; right: 8px; top: 8px; padding: 4px 7px; border-radius: 4px; background: #080b10e8; font-size: 12px; color: #fff; }
.wallpaper-tile[aria-pressed="true"] { color: var(--b1); border-color: #8b6835; }
.wallpaper-tile.staged { outline: 2px solid var(--b1); outline-offset: 2px; }
.wallpaper-item .acts { padding: 8px 0; gap: 6px; background: none; border: 0; flex-wrap: wrap; }
.wallpaper-item .acts button { min-height: 48px; padding: 8px; font-size: 12px; }
.search-mode #list-head { border: 0; margin: 0; }
.search-mode .wallpaper-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.search-mode #search-notice { padding-top: 4px; padding-bottom: 4px; }
#search-transport button[aria-pressed="true"] { color: var(--b1); border-color: var(--b1); }
#now-card { padding-bottom: 14px; }
#now-card .what { font-size: 18px; }
#now-card .none { font-size: 14px; }
#now-btns .bigbtn { min-height: 46px; font-size: 13px; }
#wallpaper-current { font-size: 16px; margin: 8px 0; }
#now-visual { margin: 4px 0; padding: 0; border: 0; }
#next-visual { flex: 1; color: var(--b1); border-color: var(--line); }
.playback-modes button { min-height: 48px; }
@media (min-width: 651px) and (max-height: 800px) {
  #rail { gap: 10px; padding-top: 10px; }
  #brand { min-height: 94px; }
  .card h2, #wallpaper-sidebar h2 { margin-bottom: 8px; }
  #now-bar { margin-top: 8px; }
  #now-btns { margin-top: 8px; }
  #wallpaper-preview-frame { max-height: 60px; }
  .playback-modes { margin: 6px 0; }
  .playback-modes button { min-height: 44px; }
  .wallpaper-transport { margin-bottom: 4px; }
  .wallpaper-transport button { min-height: 44px; }
}
@media (max-width: 1100px) and (min-width: 651px) {
  #rail { flex-basis: 280px; padding: 16px; }
  #chips { gap: 16px; padding: 8px 16px; }
  .browse-group { padding-right: 12px; }
  #brand { grid-template-columns: minmax(0, 1fr) 103px; gap: 10px; }
  #logo-box { width: 103px; }
  #mark span { font-size: 14px; }
  #mark strong { font-size: 36px; }
}
@media (max-width: 650px) {
  #app:not(.search-mode) { overflow-y: auto; }
  #rail { flex-basis: auto; padding: 12px; gap: 12px; }
  #app:not(.search-mode) #rail { overflow: visible; }
  #brand { display: grid; min-height: 94px; grid-template-columns: minmax(0, 1fr) 103px; padding-top: 0; }
  #logo-box { width: 103px; }
  #mark span { font-size: 15px; }
  #mark strong { font-size: 36px; }
  #chips { gap: 12px; padding: 8px 12px; }
  .browse-group { width: 164px; padding-right: 10px; }
  #chips button { font-size: 12px; padding: 0 6px; grid-template-columns: 22px minmax(0, 1fr) auto; }
  #chips button .key { margin-left: 4px; font-size: 11px; }
  #tag-rail { grid-auto-columns: 170px; }
  #list-head { padding: 3px 12px; gap: 8px; flex-wrap: wrap; }
  #list-cap { flex-basis: 100%; }
  #list-acts { margin-left: auto; }
  #list { padding-left: 8px; }
  #wallpaper-sidebar { max-height: none; }
  #wallpaper-sidebar #wallpaper-queue, #wallpaper-sidebar #wallpaper-queue-heading { display: none; }
  .wallpaper-transport .wallpaper-queue-shortcut { display: flex; }
  .wallpaper-grid { grid-template-columns: 1fr; padding-left: 4px; }
  .search-mode .wallpaper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .search-mode .wallpaper-tile span { font-size: 13px; padding: 10px; }
  .search-mode .wallpaper-tile .duration { font-size: 11px; padding: 3px 5px; top: 4px; right: 4px; }
  .search-mode #list-cap { flex-basis: auto; }
  .search-mode #list-head { flex-wrap: nowrap; }
}

/* The rail is current state; browsing and queue management live in the pane. */
#rail { gap: 24px; scrollbar-width: thin; scrollbar-color: #414753 transparent; }
#brand { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
#now-card, #wallpaper-sidebar { padding-bottom: 20px; }
#now-card > h2, #wallpaper-sidebar > h2 { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 14px; font-size: 16px; line-height: 24px; color: var(--fg); }
#now-card > h2 > svg, #wallpaper-sidebar > h2 > svg { width: 22px; height: 22px; flex: none; color: #b4bed0; }
#now-card .what { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
#now-card .who { font-size: 12px; color: var(--dim); }
#now-btns { gap: 8px; }
#now-btns .bigbtn { min-height: 44px; }
#wallpaper-preview-frame { max-height: none; }
#wallpaper-current { font-size: 16px; line-height: 1.4; height: 1.4em; flex: none; margin: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wallpaper-controls { position: relative; min-height: 44px; }
#wallpaper-controls #next-visual { min-height: 44px; height: 44px; font-size: 12px; }
#visual-notice:empty { display: none; }
.browse-group > h2 { justify-content: space-between; }
#chips #screen-search { width: 32px; height: 24px; padding: 0; display: grid; place-items: center; background: none; border-color: transparent; }
#chips #screen-search[hidden] { display: none; }
#screen-search svg { width: 18px; height: 18px; }
#visual-notice { padding: 12px 12px 4px 0; font-size: 13px; line-height: 20px; color: var(--dim); }
.visual-tile { align-self: start; overflow: hidden; text-align: left; }
.visual-poster { aspect-ratio: 32 / 9; background: #000; overflow: hidden; }
.visual-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visual-poster img[hidden] { display: none; }
.visual-tile .visual-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; font-size: 15px; overflow-wrap: anywhere; }
.visual-title svg { width: 18px; height: 18px; flex: none; }
.visual-tile:disabled { opacity: 1; }
.visual-tile:disabled .visual-title { color: var(--dim); }
#wallpaper-controls .wallpaper-message:not(:empty) { position: absolute; z-index: 2; bottom: 100%; width: 100%; padding: 8px; background: #241b1b; border-radius: 4px; }
#wallpaper-state { margin-left: auto; display: inline-flex; align-items: center; min-height: 20px; color: var(--dim); font-size: 11px; font-weight: 500; line-height: 16px; text-align: right; }
#wallpaper-state svg { width: 20px; height: 20px; flex: none; }
.wallpaper-transport { margin: 0; }
.wallpaper-transport button { min-height: 44px; font-size: 12px; }
.section-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; gap: 8px; margin-top: 12px; }
.section-links button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 52px; padding: 8px; border: 0; border-radius: 6px; background: #1a202b; font-size: 13px; font-weight: 600; color: #c5cddb; white-space: nowrap; }
.section-links button[aria-pressed="true"] { color: var(--b1); background: #2b2419; box-shadow: inset 0 -2px 0 #d49a43; }
.section-links button:hover { color: var(--fg); background: #272e3a; }
.section-links button[aria-pressed="true"]:hover { color: var(--b1); background: #393020; }
.section-links button:active { background: #403524; color: #ffe0ae; transition: none; }
.section-links svg { width: 16px; height: 16px; flex: none; }
.section-links .queue-badge { display: grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 4px; background: #ffffff10; font-size: 11px; font-variant-numeric: tabular-nums; }
.section-links button[aria-pressed="true"] .queue-badge { background: #ffb3471c; }
#queue-view { padding: 28px 24px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #414753 transparent; }
#queue-view > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
#queue-title { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
#queue-summary { margin: 0; color: var(--dim); font-size: 13px; }
#queue-playback { max-width: 420px; margin-bottom: 24px; }
#queue-playback .playback-modes button { min-height: 52px; flex-direction: row; font-size: 13px; }
#queue-view #queue-card { display: block; }
#queue-view #queue-body, #queue-view #wallpaper-queue { overflow: visible; min-height: 0; }
#queue-view .qrow { min-height: 80px; gap: 16px; border-color: #262a35; padding: 14px 0; }
#queue-view .qrow img { width: 112px; aspect-ratio: 32 / 9; object-fit: cover; border-radius: 4px; }
#queue-view .qrow .qwhat { white-space: normal; overflow-wrap: anywhere; font-size: 17px; line-height: 1.4; }
#queue-view .qrow .qwho { font-size: 12px; color: var(--dim); }
#queue-view .qrow button { width: 44px; min-height: 48px; }
#queue-view .none { color: var(--dim); padding: 40px 0; font-size: 16px; }
#queue-notice:empty { display: none; }
#queue-notice { color: #f2b9a8; margin-bottom: 16px; }
@media (max-height: 800px) and (min-width: 651px) {
  #rail { gap: 8px; padding-bottom: 10px; }
  #brand { min-height: 94px; padding-bottom: 4px; }
  #now-card, #wallpaper-sidebar { padding-bottom: 8px; }
  #now-card > h2, #wallpaper-sidebar > h2 { margin-bottom: 8px; }
  #now-bar { margin: 6px 0; }
  #now-btns { margin-top: 6px; }
  #wallpaper-preview-frame { max-height: none; }
  #wallpaper-current { margin: 6px 0; }
  .section-links { margin-top: 6px; }
  .section-links button { min-height: 48px; }
}
@media (max-width: 650px) {
  #queue-view { padding: 20px 12px; overflow: visible; min-height: calc(100dvh - 48px); }
  #queue-title { font-size: 18px; }
  #queue-view > header { align-items: flex-start; }
  #queue-view .qrow { gap: 6px; }
  #queue-view .qrow img { display: none; }
  #queue-view .qrow .qwhat { font-size: 14px; }
  #queue-view .qrow button { width: 36px; }
}

/* Reserve the panel, not empty rows: visible metadata stays together while
   title wrapping and missing credits never move the timeline or controls. */
#now-details {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 100%; height: 104px; padding: 0; text-align: left;
  border: 0; border-radius: 4px; background: transparent;
}
#now-details > span { flex: none; }
#now-details > span:empty { display: none; }
#now-details .who, #now-details .performer, #now-details .movement {
  display: block; min-width: 0; font-size: 12px; line-height: 18px;
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#now-details .what {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin: 0; line-height: 22px; max-height: 44px; overflow: hidden;
}
#now-details:hover:not(:disabled) { background: #ffffff05; }
#now-details:active:not(:disabled) { background: #ffffff0d; }
#now-time { height: 18px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#now-btns .bigbtn { height: 44px; min-height: 44px; }
#now-btns button:disabled { opacity: .35; }

#now-heading { position: relative; }
#volume-button { position: absolute; right: 0; top: -10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
#volume-button[hidden] { display: none; }
#volume-button svg { width: 20px; height: 20px; }
#volume-button:disabled { opacity: .35; }
#volume-popover { position: fixed; inset: auto; margin: 0; width: 244px; max-width: calc(100vw - 24px); padding: 12px; color: var(--fg); background: #171c25; border: 1px solid #414753; border-radius: 8px; box-shadow: 0 8px 24px #0008; }
#volume-popover label { display: flex; justify-content: space-between; font-size: 14px; }
#volume-value { color: var(--dim); }
#volume-slider { display: block; width: 100%; height: 44px; accent-color: var(--b1); }
#volume-error { font-size: 13px; line-height: 18px; color: #f2b9a8; overflow-wrap: anywhere; }

#letters { position: relative; display: none; flex: none; flex-direction: column; width: 56px; padding: 0 4px 12px; gap: 6px; }
#letters.on { display: flex; }
#letter-picker-open { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-color: transparent; background: transparent; }
#letter-picker-open svg { width: 22px; height: 22px; }
#letter-scrubber { flex: 1; min-height: 44px; position: relative; touch-action: none; cursor: ns-resize; border-radius: 6px; }
#letter-scrubber:focus-visible { outline: 2px solid var(--b1); outline-offset: 0; }
#letter-labels { position: absolute; inset: 0; pointer-events: none; }
#letter-labels span { position: absolute; left: 0; width: 100%; text-align: center; transform: translateY(-50%); font-size: 11px; line-height: 1; color: var(--dim); }
#letter-labels .selected { color: var(--b1); font-weight: 700; }
#letter-scrubber:active { background: #ffb3470d; }
#letter-preview { position: absolute; right: 64px; width: 56px; height: 56px; display: grid; place-items: center;
  background: #222630; border: 1px solid #8b6835; color: var(--b1); border-radius: 8px; font-size: 30px; font-weight: 650; pointer-events: none; z-index: 6; }
#letter-preview[hidden] { display: none; }
.kiosk-dialog { margin: auto; width: 380px; max-width: calc(100% - 24px); max-height: calc(100dvh - 24px);
  padding: 16px; color: var(--fg); background: #11151d; border: 1px solid var(--line); border-radius: 8px; }
.kiosk-dialog::backdrop { background: #000a; }
.kiosk-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kiosk-dialog h2 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.dialog-close { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-color: transparent; background: transparent; }
.dialog-close svg { width: 22px; height: 22px; }
#letter-grid { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 8px; }
#letter-grid button { height: 48px; font-size: 18px; }
#letter-grid button:disabled { opacity: .25; }
#letter-grid button[aria-pressed="true"] { color: var(--b1); background: #2c2418; border-color: #8b6835; }
#track-details-artist { color: var(--dim); font-size: 14px; line-height: 1.5; margin-bottom: 12px; overflow-wrap: anywhere; }
#track-details-name { font-size: 20px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.song:not(:disabled):active, #chips button:not(:disabled):active, .acts button:not(:disabled):active,
.wallpaper-tile:not(:disabled):active, #letter-grid button:not(:disabled):active { background-color: #3b3429; border-color: #c99549; transition: none; }
.acts button.confirmed:disabled { opacity: 1; color: #91d9b1; border-color: #65bd93; background: #183125; }
/* Confirmation occupies the existing action; the live region announces it. */
.search-mode #search-notice:not(.error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
@media (max-width: 650px) {
  #letters { position: sticky; top: 8px; align-self: flex-start; height: min(520px, calc(100dvh - 110px)); }
  #letter-grid { gap: 6px; }
}
/* Songs and works share a dialog without changing the catalog's geometry. */
#work-dialog { width: min(900px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
#work-dialog header { align-items: flex-start; gap: 16px; }
#work-title { font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
#work-credit { color: var(--dim); line-height: 1.5; min-height: 1.5em; margin-bottom: 16px; overflow-wrap: anywhere; }
#work-error { color: #ff9898; height: 2.8em; line-height: 1.4; overflow: auto; overflow-wrap: anywhere; }
#work-movements { max-height: 55dvh; overflow: auto; }
#work-dialog .song { width: 100%; }
#work-dialog .song .what, #work-dialog .song .who { white-space: normal; overflow-wrap: anywhere; }
.performer-credit span { display: block; }
.song .who.performer-credit, .qrow .qwho.performer-credit { white-space: normal; overflow-wrap: anywhere; }
#work-dialog .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#work-dialog .acts button { min-width: 0; padding: 8px; }
.song.work .len { white-space: normal; text-align: right; width: 145px; max-width: 170px; line-height: 1.5; }
@media (max-width: 650px) {
  #work-title { font-size: 20px; }
  #work-dialog .song { padding: 14px 8px; }
  #work-dialog .acts { padding: 8px; }
  #work-dialog .acts button { flex-direction: column; font-size: 13px; }
  .song.work .len { max-width: 95px; font-size: 13px; }
}
#brand[role=button] { cursor: pointer; }
#brand[role=button]:focus-visible { outline: 2px solid var(--b1); outline-offset: 3px; }
.kiosk-menu-options { display: grid; gap: 10px; }
.kiosk-menu-options button, .kiosk-menu-options a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg2); color: var(--fg); font-size: 17px; text-align: left; text-decoration: none; }
.kiosk-menu-options svg { width: 22px; height: 22px; flex: none; color: var(--b1); }
.kiosk-menu-options a:hover { background: #232733; }
.kiosk-menu-options a:focus-visible { outline: 2px solid var(--b1); outline-offset: 3px; }

.acts .rehearsal-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;color:var(--b1);border:1px solid #8b6835;border-radius:5px;text-decoration:none;grid-column:1/-1;min-height:44px}