/*
  Layout intent
  - Two-column shell.
  - Right column is a pinned “instrument display” (never scrolls).
  - Left column contains: (A) static transport bar + (B) scrollable settings.
  - No overlays should cover the right panel (the app has no modal UI).
*/

:root{
  --bg: #0f141b;
  --panel: #131a23;
  --panel-2: #0f151d;
  --surface: #0f151d;
  --surface-2: #121a24;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.16);
  --accent: #4f8cff;
  --good: #2ecc71;
  --warn: #f5a623;
  --radius: 12px;
  --radius-sm: 10px;

  /* Right pinned panel width: tuned for a vertical fretboard */
  --right-w: 520px;
  --left-max: 680px;
  --pad: 16px;
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.1px;
}

.horizontal-fretboard-section{
  display:none;
  padding: 18px 4vw 10px 4vw;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(28,42,60,0.95) 0%, rgba(10,17,26,0.95) 70%);
}

.horizontal-fretboard-frame{
  max-width: 1400px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:center;
}

.horizontal-fretboard-container{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: rgba(0,0,0,0.35);
  overflow-x: auto;
}

.horizontal-chord-display{
  margin-bottom: 6px;
}

/* Shell: left takes remaining space, right is fixed and pinned. */
.app-shell{
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) var(--right-w);
}

body.view-horizontal .horizontal-fretboard-section{
  display:block;
}

body.view-horizontal .app-shell{
  grid-template-columns: minmax(320px, 1fr);
}

body.view-horizontal .app-right{
  display:none;
}

body.view-horizontal .app-left{
  border-right: none;
}

/* LEFT: full-height column; only its settings area scrolls. */
.app-left{
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}

.app-left-top{
  padding: 18px var(--pad) 12px var(--pad);
  border-bottom: 1px solid var(--line);
}

.app-header h1{
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}
.app-header p{
  margin: 6px 0 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

small.is-problem {
  color: #ff8b8b;
  font-weight: 650;
}

/* Transport: compact, DAW-like. */
.transport{
  margin-top: 14px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}

.transport-row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
}

.transport-buttons{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.transport-readouts{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 160px;
}

button{
  appearance: none;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
}
button:hover{ background: rgba(255,255,255,0.06); }
button:active{ background: rgba(255,255,255,0.08); }
button:focus-visible{ outline: 2px solid rgba(79,140,255,0.55); outline-offset: 2px; }

/* Keep existing IDs but give subtle DAW semantics. */
#btn-audio{ border-color: rgba(46,204,113,0.35); }
#btn-audio-settings{ border-color: rgba(79,140,255,0.35); }
#btn-stop{ border-color: rgba(245,82,82,0.35); }
#btn-toggle-piano{ border-color: rgba(79,140,255,0.35); }
#btn-toggle-piano[aria-pressed="true"]{ background: rgba(79,140,255,0.18); border-color: rgba(79,140,255,0.65); }
#btn-toggle-horizontal{ border-color: rgba(255, 160, 64, 0.4); }
#btn-toggle-horizontal[aria-pressed="true"]{ background: rgba(255, 160, 64, 0.18); border-color: rgba(255, 160, 64, 0.7); }

.status{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.transport-subrow{
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* Settings scroll region */
.settings-scroll{
  /* Critical: allow this region (and only this region) to scroll */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px var(--pad) 22px var(--pad);
}

.settings-block{
  padding: 14px 0 16px 0;
  border-bottom: 1px solid var(--line);
}
.settings-block:last-child{ border-bottom: none; }

.settings-block h2{
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.field-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 12px;
  align-items: end;
}


.chord-display-box{
  display:inline-flex;
  flex-direction: column;
  align-items:center;
  gap: 4px;
  margin: 0 auto -8px;
  width: fit-content;
  max-width: calc(100% - 24px);
}

/* When borrowed text is present, style the container */
.chord-display-box:has(.chord-borrowed-display:not(:empty)){
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(9, 10, 15, 0.88);
  backdrop-filter: blur(2px);
}
label{
  display:flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

select, input[type="number"]{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
}

/* Ensure native option lists stay dark-themed */
select option{
  background: var(--surface);
  color: var(--text);
}

input[type="range"]{
  accent-color: var(--accent);
}

.checkbox-inline{
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.checkbox-inline input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

.field-inline{
  display:flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

span[id$="-volume-display"]{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.info{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255,255,255,0.03);
}

pre{
  white-space: pre-wrap;
  margin: 8px 0 0 0;
  color: rgba(255,255,255,0.78);
}

/* Audio Status Display */
.audio-status{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.beat-indicator{ display:flex; align-items:center; gap: 4px; flex-wrap: wrap; }
.count-in-display{ margin-top: 6px; font-weight: 650; color: rgba(245,166,35,0.95); }

/* RIGHT: pinned instrument display; vertically centered and never scrolls. */
.app-right{
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(80% 60% at 50% 40%, rgba(79,140,255,0.10) 0%, rgba(0,0,0,0) 55%),
              linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border-left: 1px solid var(--line);
}


.instrument-frame{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 18px 0px 18px 18px;
    background-color: rgb(9, 183, 226);

}

.fretboard-area{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  max-width: calc(var(--right-w) - 26px);
  width: auto;
}

.horizontal-fretboard-container::-webkit-scrollbar{
  height: 10px;
}

.horizontal-fretboard-container::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
}

.chord-name-display{
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
  color: white;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(9, 10, 15, 0.88);
  backdrop-filter: blur(2px);
}

/* Remove pill from name when borrowed text is present */
.chord-display-box:has(.chord-borrowed-display:not(:empty)) .chord-name-display{
  padding: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.chord-borrowed-display{
  min-height: 18px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  margin: 0;
  color: rgba(255,255,255,0.88);
}

.piano-container{ margin-top: 12px; display:flex; justify-content:center; overflow-x:auto; }
.piano-container svg{ max-width:100%; height:auto; }
.piano-inline{ margin:0 0 18px; }
.piano-inline h2{ margin:0 0 8px; font-size:1.1rem; }

.app-footer{
  padding: 14px 0 0 0;
  color: rgba(255,255,255,0.50);
  font-size: 12px;
}

/* Responsiveness: keep two columns; shrink the right panel width. */
@media (max-width: 1100px){
  :root{ --right-w: 460px; }
  .transport-readouts{ min-width: 120px; }
}

@media (max-width: 920px){
  :root{ --right-w: 400px; }
  .field-grid{ grid-template-columns: 1fr; }
  .status{ max-width: 160px; }
}

@media (max-width: 760px){
  :root{ --right-w: 340px; }
  .transport-buttons button{ padding: 8px 9px; }
}