/* ============================================================
   Piano control changes, loaded after piano.css.

   Keyed on piano_sheet_ui / piano_sheet_bar, two marker classes added
   once (see core/pianoAutoSetup.js) to a song that HAS sheet music and
   never removed. They used to be notes_open / hide, which the scripts
   clear whenever the song is re-fetched - so switching version dropped
   the tool back to its old look for as long as the reload took. A song
   with no sheet music gets neither marker and keeps the old tool, which
   is the right one for it.

   The sheet music is now open from the start (there is no
   "show notes" button any more), so the notes-open layout is the
   only layout in practice. Nothing here renames or reparents an
   element the obfuscated scripts bind to, except the metronome,
   which moved to the transport row and therefore brings its own
   icon with it.
   ============================================================ */

/* --- metronome, now next to stop ------------------------------

   Its icon used to be painted by a rule scoped to the pill row, so
   the passive image has to be restated here. The click handler reads
   $('#metronome').parent() and toggles .active on it, so the box
   around it is what carries the on state. */

/* --- the sheet gets more of the height ------------------------

   In scrolling mode the whole song is ONE system, so its height is
   set by the most extreme ledger line in the piece and the score is
   shrunk until that fits - which is why those notes came out so much
   smaller than the paged ones. The strip is the only lever that does
   not touch the score: every pixel it gains is a bigger zoom. The
   keyboard pays, since you are reading notes rather than watching
   your hands. 15 + 39.5 + 14 + 31.5 = 100. */

.piano_wrapper.piano_sheet_ui .visualizationBlock,
.piano_wrapper.piano_sheet_ui #messageBox {
    /* Must match STRIP_SHARE in visualization/init.js: the score is fitted
       against that share, and init then trims the strip to the music it
       actually drew. If this default is larger, the strip stands at the
       larger size while the score was drawn for the smaller one - which is
       exactly the band of white below the notes. */
    height: 30%;
}

.piano_wrapper.piano_sheet_ui .piano_keys_block {
    /* 15 (header) + 30 (strip) + 23.5 + 31.5 (footer) = 100. */
    height: 23.5%;
}

/* --- one wide tempo control -----------------------------------

   The row lost the show-notes pill, the metronome pill, the song
   title and the clock, so the tempo slider takes the width they
   were using. The left inset is the space the notes-mode switch
   parks in (it is absolutely positioned there). */

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom {
    padding-left: 196px;
    padding-right: 12px;
}

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_wrapper {
        width: 100%;
        margin: 0;
    }

    /* A slider people actually drag: a thicker track and a bigger grip. */
    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-widget-content {
        height: 6px;
        border-radius: 999px;
    }

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-widget-header {
        border-radius: 999px;
    }

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_wrapper .piano_tempo_slider .ui-state-default {
        width: 20px;
        height: 20px;
        top: -120%;
    }

/* --- keep the level buttons out of the pills ------------------

   They used to sit at the header's far side only because the song
   title and the clock floated ahead of them; with those gone from the
   template they slid under the control pills. Pin them to the side
   they have always occupied, on the pills' line. */

.piano_wrapper .piano_header .piano_complexity_buttons_wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
}

/* The level buttons and the question mark sit on the control pills' line,
   all of them raised into the top band of the row. */
.piano_wrapper.piano_sheet_ui .piano_header .piano_complexity_buttons_wrapper {
    top: 0;
    height: 100%;
}

.piano_wrapper.piano_sheet_ui .piano_header .piano_einfach_btn,
.piano_wrapper.piano_sheet_ui .piano_header .piano_mittelschwer_btn,
.piano_wrapper.piano_sheet_ui .piano_header .piano_help {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.piano_wrapper.piano_sheet_ui .piano_header .piano_einfach_btn,
.piano_wrapper.piano_sheet_ui .piano_header .piano_mittelschwer_btn {
    font-size: 1.25em;
    padding: 0.55em 1.6em;
}

/* --- bigger control buttons, and two new ones -------------------

   Five pills now share the row: do-re-mi, hands, tone, notes style and
   speed. The icons grow into the space the tempo row gave up. */

/* The speed row below is gone, so the pills have the whole band and are
   centred in it - as are the level buttons and the question mark. */
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top {
    height: 100%;
    display: flex;
    align-items: center;
}

/* A definite height, not auto: the icon inside sizes itself as a
   percentage of this box, so auto collapses it to nothing. */
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper {
    width: 20%;
    top: 0;
    height: 86%;
}

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_control_image {
    height: 64%;
    background-size: auto 92%;
}

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_control_title {
    font-size: 1.2em;
}

.piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #notes_style_btn {
    background-image: url('/piano/Content/Images/noten_zeigne_passive.png');
}

/* tempo.png is a wide picture of a slider, which read as a live control
   sitting in the row rather than as a button. Drawn instead: the same
   white ring the neighbouring icons wear, with a gauge inside. */
.piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #tempo_btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Cpath d='M14 29a12 12 0 0 1 20 0'/%3E%3Cpath d='M24 29l7-8'/%3E%3C/g%3E%3Ccircle cx='24' cy='29' r='2.6' fill='%23fff'/%3E%3C/svg%3E");
}

/* The speed slider lives in the band permanently, in the gap between the
   control buttons on one side and the level buttons on the other. It is
   absolutely positioned against the band (the only positioned ancestor),
   so the two groups keep their own layouts and nothing has to share a
   row with it. */
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom {
    display: block;
    position: absolute;
    left: 55%;
    /* Clear of the level buttons: at 100% the grip sits at the track's far
       end, and 25% left it a few pixels short of them. */
    right: 27.5%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 0;
    pointer-events: auto;
}

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_wrapper {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_title {
        display: block;
        padding: 0 0 10px;
        font-size: 1.15em;
        color: #FFFFFF;
        text-align: center;
    }

    /* A track and grip worth dragging, on the dark band this time. */
    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider .ui-widget-content {
        height: 8px;
        margin: 0;
        border-radius: 999px;
        background-color: #6F6885;
    }

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider .ui-widget-header {
        border-radius: 999px;
    }

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider .ui-state-default {
        width: 22px;
        height: 22px;
        top: -7px;
        margin-left: -11px;
    }

/* --- pop-ups ---------------------------------------------------

   Three of them now hang off this row: hands, notes style and speed.
   They share one look - a white card under the button, above the dim
   layer - and targets big enough to hit. */

.piano_wrapper .piano_control_popup,
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box {
    position: absolute;
    top: calc(100% + 10px);
    bottom: auto;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
    width: auto;
    height: auto;
    min-width: 230px;
    padding: 16px 18px;
    border-radius: 16px;
    background-color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.piano_wrapper .piano_control_popup {
    display: none;
}

.piano_wrapper .piano_control_wrapper.open .piano_control_popup {
    display: block;
}

/* --- hands ------------------------------------------------------

   Two 50%-wide boxes inside a pop-out sized in percentages of a tall
   icon column: the icons came out a few pixels across. Real targets
   instead, side by side. */

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box {
    display: none;
    min-width: 260px;
}

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box {
    width: 48%;
    height: auto;
    float: left;
    margin: 0 1%;
    padding: 10px 6px 12px;
    box-sizing: border-box;
    cursor: pointer;
    /* They were bare icons on white and did not read as anything you
       could press. */
    border: 1px solid #D3D1C7;
    border-radius: 12px;
    background-color: #F7F6F3;
}

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box:hover {
    border-color: #33b35a;
    background-color: #FFFFFF;
}

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box .piano_control_image {
        height: 46px;
        padding-top: 0;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_top .piano_control_wrapper .piano_other_hands_box .piano_left_hand_box .piano_control_title {
        height: auto;
        padding-top: 8px;
        font-size: 1.3em;
        color: #262238;
        text-align: center;
    }

/* --- notes style ------------------------------------------------

   The switch was built to sit on the dark band: a thin outlined pair
   pinned to a corner. In a white card it needs to be a plain pair of
   full-width choices. */

/* The sentence shown instead of the switch when a song has no notes to style. */
.piano_wrapper .piano_control_popup .notes_unavailable {
    direction: rtl;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    white-space: normal;
    max-width: 260px;
}

.piano_wrapper .piano_control_popup .notes_mode_switch {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    display: flex;
    width: 100%;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    background-color: #F1EFE8;
}

.piano_wrapper .piano_control_popup .notes_mode_btn {
    flex: 1 1 0;
    padding: 12px 10px;
    border-radius: 12px;
    font-size: 1.25em;
    line-height: 1.2;
    color: #262238;
    background: none;
    cursor: pointer;
}

.piano_wrapper .piano_control_popup .notes_mode_btn.active {
    background-color: #33b35a;
    color: #FFFFFF;
    cursor: default;
}

/* A pop-up centred on the outermost pill opens past the edge of the piano,
   so that one hangs from its inner edge instead. Keyed on :last-child
   rather than on a particular button - the outermost pill has already
   changed once, when מהירות left the row and סגנון תווים inherited the
   position (and, briefly, the bug). */
.piano_wrapper .piano_top_controls_left_top .piano_control_wrapper:last-child .piano_control_popup {
    left: 0;
    right: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

/* --- help screen -----------------------------------------------

   The columns are a fixed 85% tall and every row a fixed 8% of that,
   so nine rows filled ~72% and the rest of the screen was empty black.
   Let the rows share the column instead, whatever their number, and
   give the text the size that space allows. */

.piano_wrapper .help_block .helper_left_column,
.piano_wrapper .help_block .helper_right_column {
    display: flex;
    flex-direction: column;
    font-size: 105%;
}

.piano_wrapper .help_block .helper_row {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* --- speed slider ----------------------------------------------

   The percentage used to be a span the scripts park inside the drag
   grip, where the white circle covered it. The readout moved up beside
   the label; the one in the grip is hidden rather than removed, since
   the scripts keep writing to it. */

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider_title {
    font-size: 1.3em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* The number sits to the left of the word, with air between them, and
   reads left-to-right as a number even inside the RTL row. */
.piano_wrapper .piano_tempo_readout {
    font-family: inherit;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    direction: ltr;
    display: inline-block;
    margin-right: 14px;
}

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .tempoValue,
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom #tempoValue {
    display: none !important;
}

/* A grip worth dragging with a thumb: 26px of circle, and an invisible
   44px square around it so the touch target clears the guideline. */
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider .ui-state-default {
    /* pianoHelper sets the handle's width and height INLINE at each of its
       breakpoints, so these have to shout. */
    width: 26px !important;
    height: 26px !important;
    top: -9px !important;
    margin-left: -13px;
    position: absolute;
}

.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider .ui-state-default::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
}

/* The track is a tap target too - jQuery UI jumps the grip to a click
   on it - so it gets height of its own. */
.piano_wrapper.piano_sheet_ui .piano_top_controls.piano_sheet_bar .piano_top_controls_left_bottom .piano_tempo_slider .ui-widget-content {
    height: 10px;
}

/* --- version switch ---------------------------------------------

   One button, not two: it names the version you are NOT on. */
/* One button, naming the version you are NOT on. It wraps to two lines
   rather than running as one long strip, which is what brought it within
   a few pixels of the speed slider on a narrow screen. */
.piano_wrapper .piano_header .piano_version_switch {
    background-color: #FFFFFF !important;
    color: #252525 !important;
    white-space: normal;
    max-width: 30%;
    font-size: 0.92em;
    line-height: 1.15;
    text-align: center;
    padding: 0.5em 1.1em;
}

/* The strip holds its place through a reload. The scripts close the panel
   while re-fetching a song, and without this the sheet's 30% vanished and
   everything below it jumped up for the duration. */
.piano_wrapper.piano_sheet_ui .visualizationBlock.hide {
    display: block;
}

/* --- closing the sheet, and the way back ------------------------

   A reader who closes the sheet gets the old tool: the piano_sheet_ui
   markers come off (core/pianoNotesChoice.js) and piano_notes_closed
   goes on, which shows one extra pill in the old row - "notes" - to
   bring the sheet back, in the place of the notes-style pill. */

.piano_wrapper .visualizationBlock .close_notes {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 11px;        /* a 40px target around an 18px cross */
    cursor: pointer;
    opacity: 0.65;
}

.piano_wrapper .visualizationBlock .close_notes:hover {
    opacity: 1;
}

#notes_show_wrapper {
    display: none;
}

.piano_wrapper.piano_notes_closed .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top #notes_show_wrapper {
    display: block;
}

/* The notes-style pill styles the sheet; with the sheet closed there is
   nothing for it to do, and its pop-up came up empty. It steps aside and
   the "notes" pill takes its place - five pills, the row as it always was. */
.piano_wrapper.piano_notes_closed .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top #notes_style_wrapper {
    display: none;
}

.piano_wrapper .piano_top_controls .piano_top_controls_left .piano_top_controls_left_top .piano_control_wrapper #notes_show_btn {
    background-image: url('/piano/Content/Images/noten_zeigne_passive.png');
}