/* breakpoints: 600px and less; 768px and less, 992px and up */
:root {
  /* one master unit that drives the whole notation grid */
  --cell-unit: clamp(0.95rem, 0.94rem + 1.0vw, 2.50rem);

  /* Site palette - light theme (default). */
  --site-bg: #EEEEEC;
  --site-text: #000000;
  --site-link: #000000;
  --site-border-strong: #000000;
  --site-border-subtle: #7d899f;
  --site-beatlabel: #7d899f;
  --site-beatlabel-strong: #5f6a80;
  --site-beatgroup-underline: #7d899f;
  --site-metronome-bg: #E4E4E4;
  --site-list-bg: #eef4f4;
  --site-input-border: #ccc;
  --site-leftHand: #167a2f;
  --site-ok: #33A800;
  --site-activeBeat: #FF4C23;
  --site-border-color: #ccc;
}
:root.dark-theme {
  --site-bg: #1c1d1f;
  --site-text: #d8d9da;
  --site-link: #8fd3ff;
  --site-border-strong: #4a4c4f;
  --site-border-subtle: #6a6c6e;
  --site-beatlabel: #6a6c6e;
  --site-beatlabel-strong: #c8cacb;
  --site-beatgroup-underline: #6a6c6e;
  --site-metronome-bg: #2a2b2d;
  --site-list-bg: #232527;
  --site-input-border: #4a4c4f;
  --site-leftHand: #1e983d;
  --site-activeBeat: #FF4C23;

  /* The instrument's dark gunmetal palette - see handpan.svg's own :root for the light-theme defaults. */
  --handpan-rim: #17181a;
  --handpan-body-highlight: #82868a;
  --handpan-body-mid: #65686c;
  --handpan-body-shadow: #4e5155;
  --handpan-dimple-highlight: #9a9d9f;
  --handpan-dimple-mid: #5c5f62;
  --handpan-dimple-shadow: #2e3033;
  --handpan-tonefield-fill: #5c5f62;
  --handpan-shoulder-right: #5b5e61;
  --handpan-shoulder-left: #54575a;
  --handpan-stroke: #3a3c3f;
  --handpan-label-color: #8f9194;
}
@media (min-width: 600px) {
  :root {
    --cell-unit: clamp(1.75rem, 1.2rem + 2.6vw, 2.50rem);
  }
}
/* Per-user notation styling overrides are set on :root by an inline
   <style> block viewNotation.php echoes after this stylesheet's <link>,
   which wins on source order at equal specificity.*/
body {
	display: flex;
	flex-direction:row;
	/*font-size:clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);*/
	background-color: var(--page-background-color, var(--site-bg));
	color: var(--site-text);
	font-family:sans-serif;
}
main {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:2rem;
}
section {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0 1rem;
	align-items:center;
}
h2 { text-align:center;}
#newNotation, #publicNotations, #privateNotations {
	max-width:750px;
	width:90dvw;
}
#help, #privacy, #about, .column {
	max-width: 750px;
	width: 90dvw;
	margin:0.5rem 0 1.5rem 0;
}
#config {
	color: var(--config-text-color, inherit);
	font-variant-caps: var(--config-font-variant-caps, normal);
	font-family: var(--config-font-family, inherit);
}
#config h2 {
	color: var(--config-h2-color, inherit);
}
#parts {
	color: var(--parts-text-color, inherit);
	font-variant-caps: var(--parts-font-variant-caps, normal);
	font-family: var(--parts-font-family, inherit);
	width:90dvw;
}
#parts h2 {
	color: var(--parts-h2-color, inherit);
}
#previewContent .partCont, #partsDisplay .partCont {
	width: 100%;
}
.center, .partTitle, .partComment {
	width:100%;
	text-align:center;
	margin-top:1rem;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1rem;
}
.column {
	flex-direction:column;
}
.partCont {
	width:100dvw;
}
.notation {
	width:100%;
	container-type: inline-size;
}
@container (max-width: 400px) {
	:root { --cell-unit: 1.5rem; }
}
.notationGrid {
	display: grid;
	justify-content: center;
	column-gap: calc(var(--cell-unit) * 0.2);
	grid-template-columns: repeat(var(--cell-count, 16), var(--cell-unit));
}
/* Long read-only rows must fit their container. A fixed-width grid wider than
   the viewport was previously centered, putting its left edge at a negative
   position that horizontal scrolling could never reach. */
.notationGrid.compactNotation {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	justify-content: stretch;
	column-gap: min(calc(var(--cell-unit) * 0.2), 0.3rem);
	grid-template-columns:
		repeat(var(--cell-count, 16), minmax(0, 1fr));
}
.notationGrid.editable {
  grid-template-columns: repeat(var(--cell-count, 16), var(--cell-unit)) 4.4rem;
  column-gap:calc(var(--cell-unit) * 0.02);
}
.notationGrid.editable.compactNotation {
	grid-template-columns:
		repeat(var(--cell-count, 16), minmax(0, 1fr)) 4.4rem;
}
@media (max-width:600px) {
	.notationGrid.editable {
	  column-gap:0; 
	}
}
.beatLabel {
	color: var(--parts-beatlabel-color, var(--site-beatlabel));
	text-align: left; 
}
.beatLabel b {
	color: var(--parts-beatlabel-strong-color, var(--site-beatlabel-strong));
}
.noteRowsBlock {
	grid-column: 1 / -1;              /* wrapper spans all columns */
	display: grid;
	grid-template-columns: subgrid;   /* inherits exact widths */
	row-gap: 10px;
	margin: 0 -8px;
	padding: 8px;
	border: 1px solid var(--parts-noterows-border-color, var(--site-border-subtle)); /* one border around every row inside */
	border-radius: 6px;
}
.beatGroupUnderline {
	grid-row: 1;
	align-self: end;      /* sits at the bottom of the row's height, not floating mid-row */
	border-bottom: 1px solid var(--parts-beatgroup-underline-color, var(--site-beatgroup-underline));
	height: 0;
}
.noteRow {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;   /* inherits widths from .noteRowsBlock */
	align-items:center;
	min-height:1.3rem;
}
.noteCell {
	grid-row: 1;   /* pins cells to the same row as the underline - stops the auto-placement shift */
	width: var(--cell-unit);
	display: flex;
	flex-direction: column;   /* so wrapped chars stack, still centered as a block */
	align-items: flex-start;
	justify-content: center;  /* vertical centering within the stretched cell height */
	height: 100%;             /* fills the row height the grid already gave it */
	white-space: pre-line;    /*preserves line breaks from the HTML source but collapses sequences of spaces and tabs*/
	word-spacing:9999px;      /*forces wrapping on space without <br>*/
	font-weight:var(--parts-note-font-weight, 700);
}
.compactNotation .noteCell {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	/*font-size: clamp(0.65rem, 2.8cqw, 1rem);*/
}
.LeftHand {
	color: var(--parts-lefthand-color, var(--site-leftHand));
}
#metronome {
	border:0;
	background-color: var(--site-metronome-bg);
	color: var(--site-text);
	width:6rem;
}
.active-beat {
	background-color: var(--site-activeBeat);
}
#notationKey {
	width:100%;
	margin-bottom:5rem;
}
@media print {
  @page {
    margin: 8mm;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-size: 14pt;
    line-height: 1.2;
  }

  main {
    display: block;
    width: 100%;
    margin: 0;
  }

  #config {
    display: block;
    margin: 0 0 5mm;
    text-align: center;
  }

  #config h2 {
    margin: 0 0 2mm;
    font-size: 22pt;
    font-weight: 750;
    line-height: 1.05;
  }

  #config > div {
    display: inline;
    font-size: 13pt;
  }

  .notationMeta {
    font-size: 11pt;
    font-weight: 500;
  }

  #parts {
    display: block;
    width:100%;
  }

  .partTitle {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 4mm;
    padding: 1.5mm 2.5mm;
    font-size: 16pt;
    font-weight: 700;
    font-style: italic;
    line-height: 1.1;
  }

  .partComment {
    margin: -2mm 0 3mm;
    font-size: 11pt;
    line-height: 1.2;
  }

  .partComment:empty {
    display: none;
  }

  .partCont {
    width: 100%;
    margin: 0 0 7mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .notation {
    width: calc(100% - 3mm);
    margin-right: auto;
    margin-left: auto;
  }

  .notationGrid {
    width: 100%;
    column-gap: 2mm;
    justify-content: stretch;
    grid-template-columns:
      repeat(var(--cell-count, 16), minmax(0, 1fr));
  }

  .noteRowsBlock {
    box-sizing: border-box;
    width: auto;
    margin: 0 -1.5mm;
    padding: 2mm 1.5mm;
    border-radius: 1mm;
    row-gap: 1.5mm;
  }

  .noteRow {
    min-height: 7mm;
  }

  .beatLabel {
    box-sizing: border-box;
    min-width:0;
    padding-right: 0.5mm;
    padding-left: 1mm;
    font-size: 16pt;
    line-height: 1;
    text-align: left;
  }

  #parts .compactNotation .beatLabel {
    padding-right: 0;
    padding-left: 0.25mm;
    font-size: 11pt;
  }

  .noteCell {
    box-sizing: border-box;
    min-width: 0;
    padding-right: 0.5mm;
    padding-left: 1mm;
    letter-spacing: 0.01em;
  }

  #parts .noteCell {
    font-size: 21pt;
    font-weight: var(--parts-note-font-weight, 700);
    line-height: 1.2;
  }

  #parts .compactNotation .noteCell {
    padding-right: 0;
    padding-left: 0.25mm;
    font-size: 14pt;
  }

  #parts .LeftHand {
    font-weight: 800;
  }

  .np,
  #topNav,
  #help,
  #themeToggle {
    display: none !important;
  }

  a {
    text-decoration:none;
  }

  a::after {
    content: "(" attr(href) ")";
  }
}

.np {
	text-align:center;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	gap:1rem;
}

.flex-center {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	gap:5rem;
}
._3panel1 {
	flex:1;
	text-align:right;
}
._3panel2 {
	flex:0 0 auto;
}
._3panel3 {
	flex:1;
}
.break {
	flex-basis:100%;
	height:0;
}
.offscreen {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
a {
	color: var(--site-link);
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
button {
	font-size:inherit;
	/*color: inherit;*/ /*breaks on dark theme*/
}
.aBTN {
text-decoration: none;
border: 1px solid var(--site-border-subtle);
border-radius: 3px;
padding: 1px 4px;
}
.list {display: block; padding: 0.5ch 1ch; clear: both; background-color: var(--site-list-bg); margin: 0.17rem 0 0.17rem 0; border-radius: 6px; text-align: left; color: var(--site-text); text-decoration: none;}
textarea:focus {min-height:3rem;}
textarea:required:placeholder-shown {
  border: 1px solid red;
}

textarea:required:not(:placeholder-shown) {
  border: 1px solid var(--site-input-border);
}

#themeToggle {
	position: fixed;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1000;
	background: var(--site-list-bg);
	border: 1px solid var(--site-border-subtle);
	border-radius: 6px;
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
	cursor: pointer;
	color: var(--site-text);
}
.appendError {
	color: #c0392b;
	text-align: center;
	margin: 0.5rem auto;
	max-width: 60ch;
}
:root.dark-theme .appendError {
	color: #ff8f8f;
}

/* Editor pages only (index.php, editNotation.php) — these intentionally
   override the base rules above for those two pages specifically.
   :where() keeps the page-scoping part out of the specificity calculation,
   so these rules stay exactly as specific as the plain selectors they
   replaced (e.g. `a`, `section`) and don't outrank class-based rules
   like .list that still need to win over them. */
:where(body.editForm) section { display:initial; }
:where(body.editForm) h2 { font-size:clamp(0.5rem, 0.7rem + 1.7vw, 1.6rem); margin-top:revert; }
:where(body.editForm) main { flex-direction:column;}
:where(body.editForm) .beatLabel { text-align:center; }
#settings, #groove {line-height:200%; }
#groove {width:100%;}
body.editForm #notationKey { text-align:left; margin-bottom:1rem; }
body.editForm #groove { width:90dvw; }

/* Both virtual_player.php's preview and notationReplay.php's notation
   display are read-only renders (viewNotation.php's renderNotationHtml()
   family), even though both pages use editForm for their own controls 
   they should look like viewNotation.php (left-aligned), not like the live
   editor grid the rule above is for. */
#previewContent .beatLabel, #partsDisplay .beatLabel { text-align: left; }
#previewContent .notation, #partsDisplay .notation { width: 100%; }

/* Editor-only elements - these classes/IDs never appear outside the
   editor pages, so no scoping needed. */
.in3char { width:3rem; padding:0.6rem; }
.submitBtn { padding:0.7rem; text-wrap:wrap; font-size:inherit; width:100%; }
.timeCell { display: flex; align-items: center; justify-content: center; }
.timeCell input {
  width: 100%;
  max-width: var(--cell-unit);
  box-sizing: border-box;
  text-align: center;
  font: inherit;
  border: 1px solid var(--site-input-border);
  border-radius: 4px;
  padding: 2px 0;
}
.barActions { display: flex; align-items: center; gap: 0.1ch; }
.uiIcon { height: 1.5rem; width: auto; vertical-align: middle; }
.barActions .uiIcon { display: block; }
#help .uiIcon { height: 2ch; }
#SaveLoad { text-align:center; margin-top:3ch; }
.vcenter { display:flex; align-items:center; gap:1ch; }

/* Legend page only (viewNotationKey.php) */
:where(body.legendPage) main { flex-direction:column; }
body.legendPage #notationKey { margin-bottom:1ch; }
.ok { color: var(--site-ok); }

/*site navigation*/
#topNav {
	width:100%;
	display:flex;
	padding-bottom:0.5rem;
}
.siteNav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width:90dvw;
	max-width:750px;
	border-bottom: 1px solid var(--site-border-subtle);
	padding-bottom: 0.5rem;
}
.siteNavAuth {
	display: flex;
	gap: 1em;
}
.accountMenu {
	position: relative;
}
.accountMenuToggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--site-link);
	cursor: pointer;
	list-style: none;
}
.accountMenuToggle::-webkit-details-marker {
	display: none;
}
.accountMenuDropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5em;
	min-width: 10em;
	background: var(--site-bg);
	border: 1px solid var(--site-border-color);
	border-radius: var(--site-radius, 6px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	padding: 0;
	z-index: 30;
}
.accountMenuDropdown a {
	display: block;
	padding: 0.6em 0.9em;
	white-space: nowrap;
}
.accountMenuDropdown a:hover {
	background: var(--site-hover-bg, rgba(0,0,0,0.05));
}
.notationToolbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.5rem;
	align-items: center;
	justify-items: center;
	width: 90dvw;
	max-width: 750px;
	margin: 0 auto;
	line-height:200%;
}
.notationToolbar > a,
.notationToolbar > form {
	text-align: center;
}