/*

  style.css

  Arkanon <arkanon@lsd.org.br>
  2026/11/01 (Sun) 05:45:59 -03

*/



:root {
  --toolbar-height: 3.25rem;
  --control-transition-speed: 900;
  --help-transition-speed: 700;
  --icon-height: 1.65rem;
  --control-margin: 0.65rem;
  --control-handle-height: 0.75rem;
  --amarelo: 0.2;
  color-scheme: dark;
  font-family: sans-serif;
  background: #202124;
  color: #f1f3f4;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: relative;
  background: #202124;
}

button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button:disabled {
  opacity: 0.35;
  cursor: default;
}

#controls {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: rgb(32 33 36 / 78%);
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition-property: height;
  transition-timing-function: ease;
  height: calc(var(--toolbar-height) + var(--control-handle-height));
}

#controls.collapsed {
  height: var(--toolbar-height);
}

#toolbar {
  height: var(--toolbar-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.1rem, 1.2vw, 0.7rem);
  padding: 0.25rem clamp(0.25rem, 1.5vw, 1rem);
}

#toolbar button {
  flex: 0 1 auto;
  min-width: 0;
  height: calc(var(--toolbar-height) - 0.5rem);
  max-width: calc(100% / 9);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  font-size: clamp(0.55rem, 1.5vw, 0.8rem);
  white-space: nowrap;
}

#toolbar button:active:not(:disabled) {
  background: rgb(255 255 255 / 18%);
}

#toolbar img {
  display: block;
  height: var(--icon-height);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
}

#control-panel {
  width: 100%;
  max-height: calc(100dvh - var(--toolbar-height) - var(--control-handle-height));
  overflow: auto;
  padding: 0.6rem;
  overscroll-behavior: contain;
}

#control-handle {
  display: block;
  width: 100%;
  height: var(--control-handle-height);
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#control-handle:active {
  background: rgb(255 255 255 / 22%);
}

#controls.collapsed #control-panel {
  visibility: hidden;
  pointer-events: none;
}

#tracks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
}

.track-control {
  display: grid;
  grid-template-columns: minmax(3.5rem, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 5.5rem;
  max-width: 8rem;
  padding: 0.35rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 0.35rem;
  font-size: 0.82rem;
}

.track-control label {
  overflow-wrap: anywhere;
}

.track-control input[type="checkbox"] {
  vertical-align: middle;
}

.track-volume {
  grid-column: 1 / 3;
  font-size: 0.8rem;
  text-align: center;
}

.track-volume-controls {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 0.15rem;
}

.track-volume-controls .track-volume {
  grid-column: 1;
}

.track-volume-controls button {
  width: 2rem;
  height: 1.7rem;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 0.25rem;
  background: rgb(255 255 255 / 8%);
}

#status {
  position: fixed;
  z-index: 50;
  top: calc(var(--toolbar-height) + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 1rem);
  padding: 0.55rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 0.4rem;
  background: rgb(24 24 24 / 88%);
  color: #fff;
  text-align: center;
  white-space: pre-wrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
  cursor: pointer;
  pointer-events: none;
}

#status.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}

#paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: calc(var(--toolbar-height) + 0.5rem) 0.5rem 1rem;
  background: #fff;
  color: #111;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
  touch-action: none;
  cursor: grab;
}

#paper::-webkit-scrollbar,
#control-panel::-webkit-scrollbar {
  display: none;
}

#paper:active {
  cursor: grabbing;
}

#paper .tune {
  width: max-content;
  min-width: 0;
  max-width: none;
}

#paper .tune:not(:last-child) svg
{
  border-bottom: 0;
}

.measure-overlay {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

.measure-overlay.measure-selected {
  fill: #1683ff;
  fill-opacity: 0.22;
  stroke: #1683ff;
  stroke-opacity: 0.55;
  stroke-width: 1;
}

#paper svg {
  border: 10px solid white;
  background-color: color-mix(in srgb, white calc(100% - var(--amarelo) * 100%), #f0df85 calc(var(--amarelo) * 100%));
  background-image:
    radial-gradient(ellipse at 17% 23%, #ffffff80 0%, transparent 48%),
    radial-gradient(ellipse at 78% 67%, #eee8d510 0%, transparent 55%),
    radial-gradient(circle, #a99b700a 0.5px, transparent 0.9px);
  background-size: 100% 100%, 100% 100%, 4px 4px;
  transform-origin: top left;
}

#paper svg .abcjs-staff {
  fill: none;
  stroke: currentColor;
}

#paper svg .measure-selection {
  fill: #1683ff;
  fill-opacity: 0.20;
  stroke: #1683ff;
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  pointer-events: none;
}

#paper svg .highlight,
#paper svg .highlight .abcjs-stem {
  fill: #ff0000 !important;
  stroke: #ff0000 !important;
}

#help-area {
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.2rem 1.4rem;
  border: 1px solid #555;
  border-radius: 0.65rem;
  background: #202124;
  color: #f1f3f4;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 45%);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.97);
  transition-property: opacity, transform, visibility;
  transition-timing-function: ease;
  overscroll-behavior: contain;
}

#help-area.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#help-area h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

#help-area p,
#help-area li {
  line-height: 1.45;
}

#help-area ul {
  padding-left: 1.3rem;
}



#paper a:link,
#paper a:hover
{
  color: #0066cc;
}

#paper a:visited
{
  color: #6699cc;
}

#paper a
{
  text-decoration: none;
}

#paper a:hover
{
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}



@media (max-width: 480px) {

  :root {
    --toolbar-height: 3rem;
    --icon-height: 1.45rem;
  }

  #toolbar {
    gap: 0.1rem;
    padding-inline: 0.2rem;
  }

  #toolbar button {
    padding: 0.1rem;
  }

  #paper {
    padding-inline: 0.2rem;
  }

}



@media print {

  @page {
    margin: 0;
  }

  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff;
  }

  #controls,
  #status,
  #help-area {
    display: none !important;
  }

  #paper {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0 !important;
  }

  #paper.fit-width .tune
  {
    width: auto !important;
    height: auto !important;
  }

  #paper.fit-width .tune svg
  {
    transform: none !important;
    transform-origin: initial !important;
  }

  #paper svg .measure-overlay {
    display: none !important;
  }

  #paper svg .highlight,
  #paper svg .highlight *,
  #paper svg .highlight .abcjs-stem {
    fill: #000 !important;
    stroke: #000 !important;
  }

  .page-break {
    break-before: page;
    page-break-before: always;
  }

}



/* EOF */