/* Screen colours. The light values are the original design; the dark overrides live in the
   single @media screen block at the end of the file, so print never sees them. */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --bg: #fff;
  --text: #000;
  --muted: #555;
  --border: #c8c8c8;
  --surface: #f4f4f4;
  --raised: #fff;
  --control-bg: #fff;
  --control-text: #000;
  --control-border: #999;
  --control-hover: #eaeaea;
  --disabled-text: #999;
  --disabled-border: #ccc;
  --pressed-bg: #000;
  --pressed-text: #fff;
  --warn: #8a4b00;
  --error: #b00020;
  --kbd-border: #aaa;
  --kbd-bg: #fafafa;
  --spacer-border: #bbb;
  --spacer-text: #767676;
  --tree-hover: #f0f0f0;
  --focus: #1a5fb4;
  --selected-bg: #1a5fb4;
  --selected-text: #fff;
  --tooltip-bg: #222;
  --tooltip-text: #fff;
  --hit-hover: rgba(0, 0, 0, 0.08);
  --hit-focus: rgba(26, 95, 180, 0.25);
  --backdrop: rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Toolbar */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.toolbar-group { display: flex; align-items: center; gap: 0.35rem; }
.tool-label { color: var(--muted); font-size: 0.9rem; }

button {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--control-border);
  border-radius: 4px;
  background: var(--control-bg);
  color: var(--control-text);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--control-hover); }
button:disabled { color: var(--disabled-text); border-color: var(--disabled-border); cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool[aria-pressed="true"],
.tool[aria-pressed="true"]:hover:not(:disabled),
.theme-toggle[aria-pressed="true"],
.theme-toggle[aria-pressed="true"]:hover:not(:disabled) { background: var(--pressed-bg); color: var(--pressed-text); border-color: var(--pressed-bg); }

.dirty { font-size: 0.8rem; color: var(--warn); font-style: italic; }
.status { font-size: 0.9rem; color: var(--muted); }
.status.error { color: var(--error); }
/* Quiet same-tab link back to the composer site, at the end of the toolbar. */
.toolbar-home { margin-left: auto; color: var(--muted); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.toolbar-home:visited { color: var(--muted); }
.toolbar-home:hover { color: var(--text); text-decoration: underline; }
.toolbar-home:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; text-decoration: underline; }

.help {
  margin: 0.5rem 1rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}
kbd {
  font: 0.8rem ui-monospace, monospace;
  border: 1px solid var(--kbd-border);
  border-radius: 3px;
  padding: 0 0.25rem;
  background: var(--kbd-bg);
}

/* Sheet */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.sheet-header { text-align: center; margin-bottom: 1rem; }
.title-input, .subtitle-input, .caption-input {
  font-family: Helvetica, Arial, sans-serif;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  padding: 0.2rem 0.4rem;
}
.title-input:hover, .subtitle-input:hover, .caption-input:hover { border-color: var(--border); }
.title-input {
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}
.subtitle-input {
  width: 100%;
  text-align: center;
  font-size: 1rem;
}

.token-preview, .caption-preview {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.caption-preview { margin: 0.1rem 0.4rem 0.25rem; }
.key-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}
.key-display { color: var(--muted); }
.category-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}
.category-row label { color: var(--muted); }
.category-row input { font: inherit; width: 16rem; max-width: 60vw; padding: 0.15rem 0.4rem; }
.preset-badge {
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}
select { font: inherit; font-size: 0.9rem; padding: 0.2rem 0.3rem; }
select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; cursor: pointer; }

.print-only { display: none; }

.stave { margin: 0 0 1.25rem; }
.stave-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.caption-input { flex: 1 1 20rem; font-size: 1rem; }
.stave-controls { display: flex; gap: 0.3rem; }
.stave-controls button { font-size: 0.8rem; padding: 0.15rem 0.5rem; }

.board { overflow-x: auto; }
svg.fretboard { width: 100%; min-width: 760px; height: auto; display: block; }
svg.fretboard .hit { cursor: pointer; }
svg.fretboard .hit:hover { fill: var(--hit-hover); }
svg.fretboard .hit:focus { outline: none; fill: var(--hit-focus); }
svg.fretboard .hit.echo-cell { cursor: not-allowed; }
svg.fretboard .hit.echo-cell:hover { fill: transparent; }

.add-stave { margin-top: 0.25rem; }

/* Spacer: a blank cell (compact) or small gap (full). Screen shows a dashed placeholder. */
.stave.spacer .spacer-box {
  border: 1px dashed var(--spacer-border);
  border-radius: 4px;
  color: var(--spacer-text);
  padding: 0.4rem 0.6rem;
  min-height: 2.5rem;
  justify-content: space-between;
}
.spacer-label { font-size: 0.9rem; }

/* Compact view: 7-fret staves, two per row. The svg scales to its column's width. */
#staves.compact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* boards in a row line up whatever their caption heights */
  gap: 0 1.5rem;
}
#staves.compact .stave { flex: 0 0 calc(50% - 0.75rem); min-width: 0; }
svg.fretboard.compact { width: 100%; min-width: 0; }
#staves.compact textarea.caption-input {
  flex: 1 1 100%;
  width: 100%;
  resize: none;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.3;
}
#staves.compact textarea.caption-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.window-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
}
.window-bar button { font-size: 0.8rem; padding: 0.1rem 0.45rem; }
.window-readout { min-width: 6.5rem; text-align: center; color: var(--muted); }
.off-window { color: var(--warn); font-style: italic; }

/* Open dialog */
dialog { border: 1px solid var(--border); border-radius: 6px; min-width: 22rem; max-width: 90vw; }
dialog::backdrop { background: var(--backdrop); }
dialog h2 { margin-top: 0; font-size: 1.2rem; }
dialog h3 { margin: 1rem 0 0.25rem; font-size: 1rem; }
dialog .field { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
dialog .field label { min-width: 5rem; }
#label-input { width: 6rem; }
.dialog-actions { margin-top: 1rem; text-align: right; }

/* Open dialog: category tree */
#open-dialog { width: min(36rem, 92vw); }
#open-filter { flex: 1; font: inherit; font-size: 0.9rem; padding: 0.2rem 0.4rem; }
.sheet-tree, .sheet-tree ul { list-style: none; margin: 0; padding: 0; }
.sheet-tree {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0;
}
.sheet-tree [role="treeitem"] { cursor: default; }
.sheet-tree [role="treeitem"]:focus { outline: none; }
.tree-row, .tree-empty {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem 0.2rem calc((var(--level, 1) - 1) * 1.2rem + 0.5rem);
}
.tree-group > .tree-label { font-weight: bold; }
.tree-marker { display: inline-block; width: 0.8rem; color: var(--muted); }
.tree-sheet { padding-left: calc((var(--level, 1) - 1) * 1.2rem + 1.7rem); }
.tree-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tree-meta, .tree-empty { color: var(--muted); font-size: 0.8rem; }
.tree-meta { flex-shrink: 0; white-space: nowrap; }
.sheet-tree [role="treeitem"] > .tree-row:hover { background: var(--tree-hover); }
.sheet-tree [aria-selected="true"] > .tree-row,
.sheet-tree [aria-selected="true"] > .tree-row:hover { background: var(--selected-bg); color: var(--selected-text); }
.sheet-tree [aria-selected="true"] > .tree-row .tree-meta,
.sheet-tree [aria-selected="true"] > .tree-row .tree-marker { color: var(--selected-text); }
.sheet-tree [role="treeitem"]:focus-visible > .tree-row { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--raised); }
.open-empty { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
#open-dialog .dialog-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
#open-dialog .open-delete { margin-right: auto; }

/* Tooltip (visual only; the text is also each control's accessible description) */
.tooltip {
  position: fixed;
  z-index: 100;
  max-width: 22rem;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  pointer-events: none;
}

/* Help dialog */
.help-dialog { width: min(60rem, 92vw); max-width: 92vw; max-height: 88vh; padding: 0; }
.help-dialog[open] { display: flex; flex-direction: column; }
.help-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--raised);
}
.help-head h2 { margin: 0; }
.help-body { overflow-y: auto; padding: 0 1.25rem 1.25rem; line-height: 1.45; }
.help-body:focus { outline: none; }
.help-body h3 { margin: 1.5rem 0 0.5rem; font-size: 1.1rem; }
.help-body h4 { margin: 1.1rem 0 0.35rem; font-size: 1rem; }
.help-body [tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.help-body code { font: 0.85rem ui-monospace, monospace; background: var(--surface); padding: 0 0.2rem; border-radius: 3px; }
.help-body pre { background: var(--surface); padding: 0.5rem 0.75rem; overflow-x: auto; }
.help-body pre code { padding: 0; }
.help-body table { border-collapse: collapse; margin: 0.5rem 0; }
.help-body th, .help-body td { border: 1px solid var(--border); padding: 0.25rem 0.5rem; text-align: left; vertical-align: top; }
.help-body th { background: var(--surface); }
.help-body ol ol { margin: 0.15rem 0; }

/* Browser storage notice (static site only; never shown by npm start) */
.storage-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.5rem 1rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}
.storage-hint p { flex: 1 1 20rem; margin: 0; }

/* Send dialog */
.send-dialog { width: min(34rem, 92vw); }
.send-dialog ol { padding-left: 1.4rem; }
.send-done { font-weight: bold; overflow-wrap: anywhere; }
#send-dialog .dialog-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

/* Print */
@page { size: landscape; margin: 10mm; }
@media print {
  .no-print, .toolbar, .stave-controls, .help, input, select,
  .token-preview, .caption-preview, .preset-badge, .tooltip, .help-dialog { display: none !important; }
  .print-only { display: block; }
  body { margin: 0; background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .sheet-header { margin: 0; }
  h1.print-only { text-align: center; font: bold 20pt Helvetica, Arial, sans-serif; margin: 0 0 2mm; }
  p.subtitle.print-only { text-align: center; font: 12pt Helvetica, Arial, sans-serif; margin: 0 0 4mm; }
  h3.print-only { text-align: left; font: 11pt Helvetica, Arial, sans-serif; margin: 3mm 0 1mm; }
  .stave { margin: 0; break-inside: avoid; page-break-inside: avoid; }
  .stave.spacer .spacer-box { display: none !important; }
  .stave.spacer { min-height: 6mm; }
  .board { overflow: visible; }
  .print-watermark { display: block; position: fixed; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 7pt Helvetica, Arial, sans-serif; color: #888; }
  svg.fretboard { width: 100%; min-width: 0; height: auto; display: block; }
  svg .hit { display: none; }
  /* Compact: two fixed-width columns (about 4 rows per landscape page); captions wrap
     onto at most 2 lines at the same 11pt size. */
  #staves.compact textarea { display: none !important; }
  #staves.compact { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; column-gap: 16mm; }
  #staves.compact .stave { flex: 0 0 var(--compact-print-w, 84mm); }
  #staves.compact svg.fretboard.compact { width: 100%; }
  #staves.compact h3.print-only:not([hidden]) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    margin: 2mm 0 0.5mm;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Dark mode (screen only). Everything dark lives in this one block: print never matches it,
   so printed pages and PDFs always use the light design. Diagrams are recoloured here with
   CSS on the renderer's classes; the SVG markup (and so Export SVG) is never changed. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #161616;
    --text: #ececec;
    --muted: #b3b3b3;
    --border: #4d4d4d;
    --surface: #222;
    --raised: #1f1f1f;
    --control-bg: #2a2a2a;
    --control-text: #ececec;
    --control-border: #8c8c8c;
    --control-hover: #3a3a3a;
    --disabled-text: #7a7a7a;
    --disabled-border: #444;
    --pressed-bg: #ececec;
    --pressed-text: #111;
    --warn: #f2b766;
    --error: #ff8a80;
    --kbd-border: #777;
    --kbd-bg: #2a2a2a;
    --spacer-border: #666;
    --spacer-text: #a6a6a6;
    --tree-hover: #2c2c2c;
    --focus: #7cb1ff;
    --selected-bg: #2d64b0;
    --selected-text: #fff;
    --tooltip-bg: #ececec;
    --tooltip-text: #111;
    --hit-hover: rgba(255, 255, 255, 0.1);
    --hit-focus: rgba(124, 177, 255, 0.3);
    --backdrop: rgba(0, 0, 0, 0.6);
    --link: #8ab4ff;
    --link-visited: #c4a1ff;
    /* Diagram colours */
    --fb-inlay: #4a4a4a;
    --fb-fret: #6e6e6e;
    --fb-string: #b8b8b8;
    --fb-nut: #e8e8e8;
    --fb-note: #e8e8e8;
    --fb-note-text: #111;
    --fb-hl-stroke: #e8e8e8;
    --fb-hl-text: #e8e8e8;
    --fb-echo: #8a8a8a;
    --fb-echo-text: #111;
    --fb-echo-hl-stroke: #8a8a8a;
    --fb-echo-hl-text: #a0a0a0;
    --fb-fret-label: #c8c8c8;
  }
  :root[data-theme="dark"] dialog { background: var(--raised); color: var(--text); }
  :root[data-theme="dark"] .help-head { background: var(--raised); }
  /* Form fields; the title, subtitle and caption fields keep their transparent look. */
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] input:not([type="checkbox"]):not([type="file"]):not(.title-input):not(.subtitle-input):not(.caption-input) {
    background: var(--control-bg);
    color: var(--control-text);
    border-color: var(--control-border);
  }
  :root[data-theme="dark"] a { color: var(--link); }
  :root[data-theme="dark"] a:visited { color: var(--link-visited); }
  :root[data-theme="dark"] .toolbar-home,
  :root[data-theme="dark"] .toolbar-home:visited { color: var(--muted); }
  :root[data-theme="dark"] .toolbar-home:hover { color: var(--text); }

  /* Diagrams: light marks on the dark page. Highlights stay a "reversal" (page-coloured fill,
     light outline); echoes are a mid grey, clearly darker than notes. */
  :root[data-theme="dark"] #staves svg.fretboard .inlay { fill: var(--fb-inlay); }
  :root[data-theme="dark"] #staves svg.fretboard .fret { stroke: var(--fb-fret); }
  :root[data-theme="dark"] #staves svg.fretboard .string { stroke: var(--fb-string); }
  :root[data-theme="dark"] #staves svg.fretboard .nut { fill: var(--fb-nut); }
  :root[data-theme="dark"] #staves svg.fretboard .note { fill: var(--fb-note); }
  :root[data-theme="dark"] #staves svg.fretboard .note.highlight { fill: var(--bg); stroke: var(--fb-hl-stroke); }
  :root[data-theme="dark"] #staves svg.fretboard .echo { fill: var(--fb-echo); }
  :root[data-theme="dark"] #staves svg.fretboard .echo.highlight { fill: var(--bg); stroke: var(--fb-echo-hl-stroke); }
  :root[data-theme="dark"] #staves svg.fretboard .note + .degree { fill: var(--fb-note-text); }
  :root[data-theme="dark"] #staves svg.fretboard .note.highlight + .degree { fill: var(--fb-hl-text); }
  :root[data-theme="dark"] #staves svg.fretboard .echo + .degree { fill: var(--fb-echo-text); }
  :root[data-theme="dark"] #staves svg.fretboard .echo.highlight + .degree { fill: var(--fb-echo-hl-text); }
  :root[data-theme="dark"] #staves svg.fretboard .fret-label { fill: var(--fb-fret-label); }
}