/* Pebble: soft ceramic surfaces with light and dark appearances. */
:root {
  color-scheme: light;
  --bg: #e1e6dc;
  --panel: #f7f8f2;
  --panel-muted: #eaf0e4;
  --ink: #2d382d;
  --muted: #5b6857;
  --line: #c9d2c1;
  --accent: #436348;
  --accent-strong: #38573d;
  --accent-mild: #e0f3e2;
  --accent-firm: #c7e8cb;
  --accent-soft: #dfe9d7;
  --danger: #a23530;
  --edge: rgba(255,255,255,.8);
  --shade: rgba(41,62,37,.12);
  --radius: 18px;
  --shadow: 0 14px 36px var(--shade);
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: #19211c;
  --panel: #26322a;
  --panel-muted: #303e33;
  --ink: #edf1e5;
  --muted: #b1bda8;
  --line: #4b5c4d;
  --accent: #b5cea0;
  --accent-strong: #c3dcb2;
  --accent-mild: #323e27;
  --accent-firm: #3e522c;
  --accent-soft: #3d513c;
  --danger: #ffaaa0;
  --edge: rgba(255,255,255,.06);
  --shade: rgba(0,0,0,.25);
}
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  background:var(--bg)
}
button,input,select,textarea {
  border-radius:var(--radius)
}
button {
  min-height:42px;
  background:linear-gradient(var(--edge),transparent 70%),var(--panel);
  box-shadow:inset 0 1px var(--edge),0 2px 2px var(--shade);
  font-size:12px;
  font-weight:500;
  transition:transform .12s,box-shadow .12s
}
button:hover:not(:disabled) {
  color:var(--accent-strong);
  border-color:var(--accent)
}
button:active:not(:disabled) {
  transform:translateY(1px);
  box-shadow:inset 0 1px 3px var(--shade)
}
button:focus-visible,summary:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
input,select,textarea {
  background:var(--panel);
  box-shadow:inset 0 2px 3px var(--shade);
  color:var(--ink);
  font-size:13px
}
input::placeholder {
  color:var(--muted);
  opacity:1
}
input[type=range] {
  box-shadow:none;
  accent-color:var(--accent)
}
label span,.stepper-caption {
  font-weight:500;
  font-size:10px;
  letter-spacing:.08em
}
.app-shell {
  grid-template-columns:290px minmax(0,1fr)
}
.library-panel {
  background:var(--panel-muted);
  padding:28px 20px;
  gap:17px;
  box-shadow:inset -1px 0 var(--edge)
}
.brand-row {
  padding-bottom:13px;
  border-bottom:1px solid var(--line)
}
.brand-row p {
  font-size:11px;
  margin-top:8px;
  letter-spacing:.03em
}
.brand-row .icon-button {
  background:var(--panel);
  font-size:24px
}
.settings-disclosure {
  font-size:12px
}
.settings-disclosure summary {
  color:var(--muted)
}
.settings-content {
  padding-top:12px
}
.search-box {
  gap:8px
}
.search-box input {
  min-height:44px
}
.search-box>span {
  font-size:10px;
  letter-spacing:.12em
}
.library-tabs {
  padding:4px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 3px var(--shade)
}
.library-tabs button {
  border:0;
  background:transparent;
  box-shadow:none;
  min-height:34px;
  font-size:11px;
  padding:0 9px
}
.library-tabs button[aria-pressed=true] {
  color:var(--accent-strong);
  background:var(--panel);
  box-shadow:0 1px 3px var(--shade)
}
.song-list {
  gap:3px
}
.song-row {
  border-radius:var(--radius);
  padding:15px 12px;
  box-shadow:none;
  background:transparent;
  gap:6px;
  min-height:74px;
  border:1px solid transparent
}
.song-row strong {
  font-size:14px;
  font-weight:550
}
.song-row span {
  font-size:12px
}
.song-row.active {
  background:var(--panel);
  border-color:var(--line);
  box-shadow:0 2px 3px var(--shade),inset 3px 0 var(--accent)
}
.library-view-controls select {
  font-size:11px;
  box-shadow:none;
  background:transparent
}
.song-panel {
  background:var(--panel)
}
.song-header {
  padding:32px 36px 27px;
  background:var(--panel);
  gap:16px;
  align-items:flex-start
}
.song-title-group h2 {
  font-size:clamp(30px,3.4vw,46px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.12
}
.eyebrow {
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--muted);
  margin:3px 0 9px
}
.song-meta {
  gap:7px;
  margin-top:17px
}
.song-meta span {
  min-height:24px;
  font-size:10px;
  letter-spacing:.01em;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--muted);
  background:transparent
}
.header-actions {
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:230px
}
.header-actions button {
  min-height:34px;
  padding:0 10px;
  font-size:11px
}
.header-actions .danger-button {
  color:var(--danger)
}
.sidebar-toggle {
  min-height:36px;
  width:36px;
  min-width:36px;
  font-size:16px
}
.toolbar {
  background:var(--panel-muted);
  padding:14px 36px;
  gap:20px;
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px var(--edge)
}
.stepper-row {
  border-radius:var(--radius);
  box-shadow:0 1px 2px var(--shade)
}
.stepper-button {
  background:var(--panel);
  border-radius:0;
  box-shadow:none;
  font-size:19px
}
.stepper-value {
  background:var(--bg);
  font:12px ui-monospace,monospace;
  box-shadow:inset 0 1px 3px var(--shade)
}
.viewer {
  padding:30px 36px 115px;
  background:var(--panel)
}
.sheet {
  line-height:1.65
}
.section-label {
  margin:24px 0 16px;
  padding:0 0 8px;
  width:min(100%,530px);
  border-radius:0;
  border-bottom:1px solid var(--line);
  font:500 10px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent
}
.section-label:first-child {
  margin-top:0
}
.plain-chord-line,.pair-desktop-chords,.mobile-flow-chord {
  color:var(--accent-strong);
  font-weight:650
}
.chord-lyric-pair {
  margin:9px 0
}
.autoscroll-controls {
  background:var(--panel-muted);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:inset 0 1px var(--edge),0 5px 20px var(--shade)
}
.autoscroll-controls button,.dialog-actions button[type=submit] {
  background:var(--accent-soft);
  border-color:var(--line);
  color:var(--accent-strong)
}
dialog {
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 3px);
  box-shadow:var(--shadow)
}
.dialog-header h2 {
  font-size:28px
}
.chord-popover,.chord-explorer-card {
  background:var(--panel);
  border-radius:var(--radius)
}
.toast {
  background:var(--ink);
  color:var(--panel);
  border-radius:var(--radius)
}

/* Softly moulded ceramic surfaces. */
h1,.song-title-group h2 {
  font-family:ui-rounded,"Arial Rounded MT Bold",-apple-system,sans-serif;
  letter-spacing:-.04em
}

.app-shell {
  padding:14px;
  gap:14px
}

.library-panel {
  border:1px solid var(--line);
  border-radius:24px;
  height:calc(100dvh - 28px);
  box-shadow:inset 0 1px var(--edge),0 4px 9px var(--shade)
}

.song-panel {
  border:1px solid var(--line);
  border-radius:24px;
  height:calc(100dvh - 28px);
  box-shadow:inset 0 1px var(--edge),0 4px 9px var(--shade)
}

.song-row {
  margin-bottom:5px
}

.song-row.active {
  box-shadow:inset 0 1px var(--edge),0 3px 5px var(--shade);
  border-color:var(--line);
  background:var(--panel)
}

.song-row.active strong {
  color:var(--accent-strong)
}

.toolbar {
  margin:0 22px;
  padding:13px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:inset 0 2px 4px var(--shade)
}

.song-header {
  border:0
}

.section-label {
  border:0;
  color:var(--accent-strong);
  letter-spacing:.06em;
  background:var(--panel-muted);
  width:fit-content;
  padding:5px 13px;
  border-radius:20px
}

@media(min-width:821px) and (max-width:1100px) {
  .app-shell {
    grid-template-columns:260px minmax(0,1fr)
  }
  .song-header {
    flex-wrap:wrap;
    padding:24px
  }
  .header-actions {
    max-width:none;
    width:100%;
    justify-content:flex-start;
    margin-left:52px
  }
  .toolbar,.viewer {
    padding-left:24px;
    padding-right:24px
  }

}

@media(max-width:820px) {
  .app-shell {
    padding:0;
    gap:0;
    grid-template-columns:1fr
  }
  .song-header {
    padding:24px 20px 20px;
    flex-wrap:wrap;
    gap:12px
  }
  .song-title-group h2 {
    font-size:34px
  }
  .header-actions {
    width:100%;
    max-width:none;
    justify-content:flex-start;
    margin-left:48px
  }
  .header-actions button {
    min-height:36px
  }
  .song-meta {
    margin-top:12px;
    gap:5px
  }
  .song-meta span {
    font-size:10px
  }
  .toolbar {
    padding:12px 20px;
    gap:14px
  }
  .viewer {
    padding:24px 22px 120px
  }
  .sheet {
    line-height:1.65
  }
  .song-panel {
    margin:0;
    height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none
  }
  .toolbar {
    margin:0 14px;
    padding:12px
  }
  .app-shell .library-panel {
    height:100dvh;
    border-radius:0
  }
  .app-shell .library-panel {
    padding:25px 18px
  }
  .brand-row {
    padding-left:0
  }
  .autoscroll-controls {
    max-width:calc(100% - 28px)
  }
  .section-label {
    margin-top:26px
  }
  .header-actions .danger-button {
    margin-left:auto
  }
  .chord-lyric-pair {
    margin:14px 0
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }

}

@media(max-width:820px) {
  .song-header {
    align-items:flex-start
  }

  .sidebar-toggle {
    order:1
  }

  .song-title-group {
    order:2;
    flex:1;
    flex-basis:0;
    min-width:0
  }

  #songTitle {
    font-size:30px;
    line-height:1.12
  }

  .header-actions {
    order:3;
    width:100%;
    max-width:100%;
    margin:3px 0 0;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:6px
  }

  .header-actions button {
    padding:0 9px;
    font-size:11px
  }

  .header-actions .danger-button {
    margin-left:auto
  }

  .stepper-button {
    min-width:35px;
    min-height:40px
  }

  .stepper-value {
    min-width:34px
  }

  .toolbar {
    gap:12px
  }

  .toolbar>button {
    padding:0 12px
  }

}

/* Production panels absent from the design study. */
.library-panel { overflow-y: auto; }
.song-list { min-height: 120px; }
.library-tabs button.active { color: var(--accent-strong); background: var(--panel); }
.autoscroll-controls.is-active button,
.tuner-string.is-playing,
.import-form button {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
}
body .follow-debug {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
}
body .follow-debug select,
body .follow-debug select option {
  color: var(--ink);
  background: var(--panel-muted);
  border-color: var(--line);
}
body .follow-current-line { background: var(--accent-soft); border-radius: 8px; }
body .follow-debug-head { box-shadow: none; }
.toast.error { background: var(--danger); color: var(--panel); }
@media (max-width: 820px) {
  .library-panel .brand-row { padding-left: 44px; }
  .library-panel h1 { font-size: 22px; }
  .song-panel.is-condensed .toolbar { margin: 0; border: 0; }
}

.dialog-actions button[type="submit"],
.playlist-create button,
.playlist-rename button[type="submit"],
.import-form button {
  color: var(--panel);
  background: var(--accent);
  border-color: var(--accent);
}
.dialog-actions button[type="submit"]:hover:not(:disabled),
.playlist-create button:hover:not(:disabled),
.playlist-rename button[type="submit"]:hover:not(:disabled),
.import-form button:hover:not(:disabled) {
  color: var(--panel);
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}