p {
  margin: 0px 8px 8px 8px;
}
:root{
  --port-collapsible-fontsize: 1.2em;
  --settings-margin: 0.7em;
  --theme-color-dark: #d25701;
  --theme-color-medium:#ffeee2;
  --theme-color-light: #fdf6f2;
  --theme-color-very-light: #fffefe;
  --theme-color-focus: #faddc9;
  --controls-border-color: #d25701;
  --thick-border-size: 2px;
  --desktop-font-size:1.5vh;
  --desktop-divControls-width:360px;
}
.portraitCollapsible{
  display: none;
}
.show-on-portrait{
  display: none;
}
/* the select widths are not used for some reason, even if we don't set the style in index.html */
select {
  width: 100px;
  margin: 2px 8px 8px 8px;
}

#selectSample {
  width: 320px;
}

#selectBounding {
  width: 80%;
}

.ui.input{
  border-color: var(--theme-color-dark);
}
.ui.action.input:not([class*="left action"]) > input {
  border-color: var(--theme-color-dark);
  border-right: 1px solid var(--theme-color-dark) !important;
  border-radius: 5px !important;
  color: var(--theme-color-dark);
}
.ui.vertical.buttons .button:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-left:1px solid var(--theme-color-dark);
}

.button:last-child {
  margin-bottom: 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
}
.ui.buttons > .ui.button:not(.basic):not(.inverted):active, .ui.buttons:not(.basic):not(.inverted) > .button:active, .ui.action.input > .button:focus, .button:active, .ui.action.input > .button:active{
  color: var(--theme-color-dark);
  background-color: var(--theme-color-focus);
  accent-color: var(--theme-color-focus);
}
.ui.animated.button .hidden.content{
  margin: 0px;
}
.ui.button{
  color: var(--theme-color-dark);
  background-color: var(--theme-color-medium);
  border: 1px solid var(--theme-color-dark);
  margin: 1px;
  border-radius: 5px;
}
.ui.toggle.checkbox {
  accent-color: var(--theme-color-dark);
}
.ui.toggle.checkbox input:checked ~ label {
  color: var(--theme-color-dark) !important;
}
.ui.toggle.checkbox input:focus, .ui.checkbox input[type="checkbox"]:focus, [type="checkbox"]:focus, input:focus, .ui.toggle.checkbox:focus, .ui.list > .item:focus, .ui.list:focus, .ui.checkbox:focus, Element:focus{
  color: var(--theme-color-dark);
  background-color: var(--theme-color-focus);
  accent-color: var(--theme-color-focus);
  caret-color: var(--theme-color-dark);
  lighting-color: var(--theme-color-dark);
  text-decoration-color: var(--theme-color-dark);
  -moz-text-decoration-color: var(--theme-color-dark);
}

.portraitCollapsible{
  margin-top: 8px;
  margin-left: -4px;
  font-weight: 550;
  background-color: transparent;
  color: var(--theme-color-dark);
  cursor: pointer;
  width: fit-content;
  border: none;
  text-align: left;
  outline: none;
  font-size: var(--port-collapsible-fontsize);

}
.collapsibleContent{
  padding: 5px 5px;
  overflow: hidden;
  width: fit-content;
}

#last-adv-setting{
  padding-bottom: 5px;
  border-bottom: 2px solid var(--theme-color-dark);
  border-radius: 0px 0px 5px 5px;  
  order:1;
}

.advanced-setting{
  padding-left:0.45em;
  background-color: var(--theme-color-light);
  margin-right: 0.7em;
  order:0;
  display: block;
  width: 100%;
  margin-right: var(--settings-margin);
  margin-left: var(--settings-margin);
  border-right: var(--thick-border-size) solid var(--theme-color-dark);
  border-left: var(--thick-border-size) solid var(--theme-color-dark);
}

#selectSampleContainer{
  border-width: 20px;
  margin:auto;
  margin-bottom: 20px;
  margin-top: 10px;
  align-self: center;
  background-color: var(--theme-color-light);
  width: 95%;
  align-content: center;
  border: 2px solid var(--theme-color-dark);
  border-radius: 5px 5px 0px 0px;
  width:90%
}
#selectSampleTitle{
  margin-top: 1px;
  border-radius: 5px 5px 0px 0px;
  background-color: var(--theme-color-medium);
  text-align: center;
  color: var(--theme-color-dark);
}
#selectSample{
  text-align: center;
  display:block;
  margin:auto;
  margin-bottom: 0.7em;
  max-width: 95%; /* the base width is a fixed 320px -- don't let it overflow very narrow screens */
  color: var(--theme-color-dark);
  background-color: white;
  border: 1px solid var(--theme-color-dark);
  order:1;
}
/* "Open file..." button: picks a local MusicXML file via the native file dialog -- the
   keyboard/screen-reader accessible alternative to drag&drop onto the page. */
#open-file-btn{
  display: block; /* a block button keeps its fit-content width, so margin:auto centers it like #selectSample */
  margin: auto;
  margin-bottom: 0.7em;
  order: 2; /* desktop flex row only: after #selectSample (order:1); no effect in this block layout */
}

#zoomControlsButtons{

  background-color: var(--theme-color-light);
  order: 0;
  border: 2px solid var(--theme-color-dark);
  margin-top: 0px;
  border-radius: 5px;
}

#zoom-in-btn{
  display: inline;
  order: 1;
  border-radius: 0px 5px 5px 0px;
  background-color: #ffe6d2;
  border:transparent;
}
#zoom-str-portrait{
  margin-left: 20px;
  margin-right:20px;
  align-self: center;
  font-size: 15px;
  font-weight: bolder;
  order: 0;
  color: var(--theme-color-dark);
}  
#zoom-out-btn{
  display: inline;
  order:-1;
  border-radius: 5px 0px 0px 5px;
  border:transparent;
  background-color: #ffe6d2;
}
#print-pdf-btn{
  order:1;
  display:block;
  width: fit-content;
  color: var(--theme-color-dark);
  background-color: var(--theme-color-medium);
  border: 1px solid var(--theme-color-dark);
}
.search{
  color:#d25701; 
}

.ui.selection.dropdown{
  background-color: white;
  border: 1px solid var(--theme-color-dark);
  color: var(--theme-color-dark);
}

.ui.selection.dropdown:focus{
  border: 1px solid var(--theme-color-dark);
}
.ui.toggle.checkbox label, .ui.toggle.checkbox .active{
  color: var(--theme-color-dark);
}
.ui.toggle.checkbox.focus{
  color: var(--theme-color-dark);
}
#transpose-btn{
  margin-top: 5px;
  border-radius: 5px;

}
.ui.button:hover{
  height: fit-content;
  background-color: var(--theme-color-focus);
}

/* mobile: no hover, no mouse, just touch */
@media (hover: none) {
  #divControls {
    opacity: 0.95; /* see the other #divControls opacity settings: can't switch it on hover like with a mouse setup */
  }
}

/* mobile portrait mode: change layout (responsive) to be less cluttered, remove some elements */
/* general styling */
@media (max-width: 500px){
    .show-on-portrait{
    display: block;
  }
  .hide-on-portrait{
    display: none !important;    
  }
  #divControls {
    position:relative;
    
    margin-left: 10px;
    margin-right: 10px;
  }
  #advancedSettings{
    width: 100%;
  }
.portraitCollapsible:after {
    text-align: center;
    content: ' ';
    padding: 10px;
    background: url('resources/arrow-right-s-fill.svg') 50% no-repeat ;
    color: var(--theme-color-dark);
    float: right;
    margin-left: 3px;
  }

  #advanced-settings-btn{
    transform: rotate(22.5deg);
    margin-left: auto;
    margin-right: var(--settings-margin);
    width:fit-content;
    display: block;
    background: url('resources/settings-5-line.svg') 50% no-repeat ;
    border:none;
    float:right;
    order:1;
    background-color: transparent;
    font-size: xx-large;
    color: var(--theme-color-dark);
    order:-1;
    margin-bottom: 20px;
  }
  #advanced-settings-btn.active{
    transform: rotate(0deg);
    margin-bottom: 20px;
  }
  #header{
    order:-2;
    margin-top: 0%;
  }
  #versionDiv{
    order:-1;
  }
  .portraitCollapsible.active:after {
    content: ' ';
    padding: 10px;
    background: url('resources/arrow-down-s-fill.svg') 50% no-repeat ;
    font-size: port-collapsible-fontsize;
    float: right;
    margin-left: 3px;
  }
  #zoomControls{
    position:absolute;
    z-index: 2;
    left:50%;
    transform: translateX(-50%);
  }
  #cursorControls{
    margin-top: 5px;
    border-top: var(--thick-border-size) solid var(--theme-color-dark);
    border-radius: 5px 5px 0px 0px;  
    order:-1;
  }
  .portraitCollapsible{
    display: inline;
  }
}  

/* PC and Ipad */
@media only screen and (min-width: 768px){
  .ui.fixed{
    position: fixed !important;
    z-index: 1;
  }
  #header{
    background-color: white;
    padding-bottom: 5px;
    margin-bottom: -2px;
    width: 100%;
    z-index: 2;
    margin-top: 0;
    /* center the title over the score area (right of the controls sidebar), not the whole window.
       left:0 pins the fixed bar to the viewport (without it, its static position is already shifted by
       #topBar's padding, double-shifting the title). padding-left is removed when collapsed (below). */
    left: 0;
    box-sizing: border-box;
    padding-left: var(--desktop-divControls-width);
    transition: padding-left 0.4s ease;
  }

  /* reserve the sidebar's width for the top bar (sample selector, version) as well, so those center
     over the score area like the title and the score itself. Removed when the sidebar is collapsed. */
  #topBar{
    padding-left: var(--desktop-divControls-width);
    transition: padding-left 0.4s ease;
  }
  body.controls-collapsed #header,
  body.controls-collapsed #topBar{
    padding-left: 0;
  }

  #divControls{
    background-color: var(--theme-color-very-light);
    width: var(--desktop-divControls-width) !important;
    margin-right: auto;
    font-size: var(--desktop-font-size);
    border-top: var(--controls-border-color) solid var(--thick-border-size);
    border-right: var(--controls-border-color) solid var(--thick-border-size);
    display:block;
    padding-bottom: 10%;
    left: 0;
    top: 79px;
    /* max-height (not height) so the panel sizes to its content: the vertical scrollbar only appears
       when the controls are taller than the viewport, not always. (A fixed height combined with the
       inner #advancedSettings min-height:98% forced a permanent overflow.) */
    max-height: calc(100vh - 79px);
    overflow-y: auto;
    /* explicit overflow-x: hidden -- otherwise overflow-y:auto promotes the default overflow-x:visible to
       'auto', which shows an (ugly) horizontal scrollbar on the slightest overflow (e.g. wide OS scrollbar). */
    overflow-x: hidden;
    /* solid sidebar that reserves space (see #osmdCanvasDiv margin-left), not a translucent overlay.
       was: opacity 0.5 with an opacity 0.95 :hover (looked like a glitch, and hover doesn't work on touch). */
    transition: transform 0.4s ease;
  }

  /* reserve space for the solid sidebar so it doesn't cover the score (desktop only) */
  #osmdCanvasDiv{
    margin-left: var(--desktop-divControls-width);
  }

  /* same reservation for the braille output (a body-level sibling below the score), so the solid
     sidebar doesn't cover it. Unlike the score this needs no JS/re-render -- the braille is plain
     text -- so the collapsed override is pure CSS. The transition keeps it in sync with the 0.4s
     sidebar slide. */
  #brailleContainer{
    margin-left: var(--desktop-divControls-width);
    transition: margin-left 0.4s ease;
  }
  body.controls-collapsed #brailleContainer{
    margin-left: 0;
  }

  /* minimized: slide the sidebar (and its toggle button) off to the left. index.js then frees the
     reserved width and re-renders once, when the slide finishes (collapse) / right away (expand). */
  body.controls-collapsed #divControls{
    transform: translateX(-100%);
  }
  body.controls-collapsed #slideControlsButton{
    transform: translateX(calc(-1 * var(--desktop-divControls-width) + 1px));
    background-image: url('resources/arrow-right-s-line.svg');
  }

  #slideControlsButton{
    content: ' ';
    background: url('resources/arrow-left-s-line.svg') 50% no-repeat var(--theme-color-light);
    width:15px;
    height: 30px;
    margin-left: calc(var(--desktop-divControls-width) - 1px);
    position: fixed;
    order:1;
    z-index: 2;
    border: var(--controls-border-color) solid 1px;
    top:79px;
    transition: transform 0.4s ease;
  }

  #versionDiv{
    order:-1;
    margin-top: 80px;
    align-self: center;
    font-size: 0.8em;
    font-style: italic;
  }
  #selectSampleContainer{
    position: relative;
    margin-top: 0px;
    margin-bottom: 0;
    /* compact pill sized to its content -- the old fixed width:50% + min-width:70% on the select
       over-constrained the row, squishing the title onto three lines and pushing the button through
       the border. Centered (margin:auto from the base rule) inside #topBar, which reserves the
       sidebar width on the left, so the pill centers over the score area. On narrow windows the
       row wraps inside the border instead of overflowing it. */
    width: fit-content;
    max-width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 16px;
    border-radius: 5px;
    border-width: var(--thick-border-size);
  }
  #selectSampleTitle{
    /* plain inline label on the pill background: the portrait header-bar background would show up
       as a misaligned block inside the flex row, so it is removed here */
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    white-space: nowrap;
    font-size: 1.3em;
    flex-grow: 0;
  }
  #selectSample{
    width: auto !important;
    min-width: 0; /* allow shrinking below content width (the base/semantic min-widths would force overflow) */
    max-width: 480px;
    flex: 1 1 320px;
    min-height: 3em;
    margin: 0; /* cancel the portrait auto margins; spacing comes from the container gap */
    border-width: var(--thick-border-size);
    overflow: visible;
  }
  #open-file-btn{
    margin: 0; /* cancel the portrait auto margins (they would swallow the flex row's free space) */
    flex: none;
    white-space: nowrap;
    font-size: 1em; /* match the select's text size instead of the sidebar's vh-based button size */
  }
  #advancedSettings{
    background-color: var(--theme-color-light);
    /* was 20px each: too much inset, and it left less room for the controls (could cause a horizontal scrollbar) */
    margin-left: 8px;
    margin-right: 8px;
    border-width: var(--thick-border-size);
    height:fit-content;
    margin-top: 10px;
    border: var(--theme-color-dark) var(--thick-border-size) solid;
    border-radius: 10px;
    min-height: 98%;

  }
  .advanced-setting{
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    font-size: 0.8em;
    border:0px;
    background-color: transparent;
  }
  #zoomControls{
    display: flex;
    position:relative;
    /* keep aligned with #advancedSettings (was 20px) */
    margin-left: 8px;
    margin-right: 8px;
    order:-1;
    width: 100%;
    margin-top: 7.5px;
  }
  #zoomControlsButtons{
  margin: auto;
  margin-top: 5px;
  }

  .collapsibleContent{
    font-size: var(--desktop-font-size);
    padding-left: 4px;
  }
  #transposeInput{
    max-width: 75% !important;
    margin-right: -150px;
  }
  #transpose-btn{
    border-radius: 0px 5px 5px 0px;
    margin-top: 0;
  }
  #transpose{
    border-radius: 5px 0px 0px 5px !important;
    max-width: 30%;
  }

  #last-adv-setting{
    border-width: 0px;
  }

  h3.ui.header{
    margin-top: 3px !important;
    margin-left: -4px;
    margin-bottom: 0px;
    font-weight: 550;
    background-color: transparent;
    color: var(--theme-color-dark);
    cursor: pointer;
    width: fit-content;
    border: none;
    text-align: left;
    outline: none;
    font-size: var(--desktop-font-size);
  }
  .ui.selection{
    max-width:0.1em;
    max-height: 0.001em;
  }
  .ui.input{
    font-size: var(--desktop-font-size);
    max-width: fit-content;
    max-height: 6em;
  }

  .ui.button{
    font-size: var(--desktop-font-size);
  }
  .ui.vertical.buttons .button {
    font-size: var(--desktop-font-size);
  }
  .ui.checkbox{
    font-size: var(--desktop-font-size);
  }
  select{
    margin-left: 4px;
  }
}

/*  Ipad only  */
@media only screen and (min-width: 768px) and (hover: none){
  #backend-select-div{
    display:none !important;
  }
  #advancedSettings{
    min-height: 90%;
  }

  #slideControlsButton{
    top: 50%;
    bottom: 50%;
    width: 30px;
    height: 60px;
  }
}


#selection{
  margin-top: 4px;
}


.bignum {
  width: 1em;
  text-align: center;
  font-size: 4em;
  color: white;
  background-color: black;
  padding: 0.3em;
  border-right: 0.3em solid white;
}

#error-tr {
  background-color: red;
  text-align: center;
}

#error-td {
  padding: 1em;
  color: white;
}

table {
    width: 100%;
}

/* (the old slide-left / slide-right keyframes were replaced by a CSS transform transition on
   #divControls + #slideControlsButton, toggled via the body.controls-collapsed class; see index.js) */