/*!
 * timer.css
 * Copyright(c) 2023 Jonathan Annett
 * MIT Licensed
 */

/*

  Advanced Style Editing:
  
  [ Control ] + [ S ]                brings up style editor
  
  [ Control ] + [ Shift ]  + [ S  ]  restores defaults

*/


:root {
    --color-main-background : black;
    --color-main-font:#a0a0a0;


    --color-remain-running : white;
    --color-remain-running-impending : orange;
    --color-remain-running-expired : red;

    --color-remain-adjust-down : yellow;
    --color-remain-adjust-up : cyan;

    --color-remain-future : #202020;
    --color-remain-future-paused : #202020;
    

    --color-remain-paused : darkgray;
    --color-remain-paused-impending : rgba(255, 166, 0, 0.192);
    --color-remain-paused-expired : maroon;

    --color-remain-paused-blink : yellow;
    --color-remain-paused-impending-blink : orange;
    --color-remain-paused-expired-blink : red;

    --color-remain-info-running : orange;
    --color-remain-info-running-impending : orange;
    --color-remain-info-running-expired : red;

    --color-remain-info-paused : darkgray;
    --color-remain-info-paused-impending : rgba(255, 166, 0, 0.192);
    --color-remain-info-paused-expired : maroon;

    --color-custom-message : white;
    --color-custom-message-editing : yellow;
    --color-custom-message-editing-reduced : rgba(39, 37, 36, 0.637);

    --color-next-default-editing:lime;


    --color-keyboard-help-text: #a0a0a0;
    --color-keyboard-help-text--editing-custom :lime;

    --color-button-background : #008CBA;
    --color-button-font : white;
    
    --color-button2-background : #e7e7e7;
    --color-button2-font : black;

    --color-button-background-hover:lime;
    --color-button-font-hover:black;
    
    --color-button-background-hover-set:purple;
    --color-button-font-hover-set:black;

    --color-button-background-hover-setting: yellow;
    --color-button-font-hover-setting:black;

    --color-progress-bar : #529f44f7;
    --color-progress-bar-background : #34495e;

    --color-future-start :  lime;

    --color-drag-to-monitor-text: rgb(103, 110, 110);

    --color-pip-background : var(--color-main-background);
    --color-pip-running : white;
    --color-pip-paused : rgba(169, 169, 169, 0.726);
    --color-pip-impending : orange;
    --color-pip-expired : red;
    
    

}


body {
    
    background-color:var(--color-main-background);
    background:var(--color-main-background);
    color:var(--color-main-font);
    font-size:2.5vh;
    font-family: 'Lucida', sans-serif;
    overflow: hidden; 
    user-select: none;                
}

 :backdrop { background-color:var(--color-main-background); background:var(--color-main-background);} 
 ::backdrop { background-color:var(--color-main-background); background:var(--color-main-background);} 
 :-ms-fullscreen { background-color:var(--color-main-background); background:var(--color-main-background);} 
 :-moz-full-screen { background-color:var(--color-main-background); background:var(--color-main-background);} 
 :-webkit-full-screen { background-color:var(--color-main-background); background:var(--color-main-background);} 
 ::fullscreen { background-color:var(--color-main-background); background:var(--color-main-background);} 
 :fullscreen { background-color:var(--color-main-background); background:var(--color-main-background);} 


    .blink {
        animation: blinker 1s infinite;
    }
      
    @keyframes blinker {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }
    

/* the main countdown (remaining) display takes up 40% of the available height, and is centered verticaly and horizontally */
#remain_disp {
    
    color:var(--color-remain-running);
    
    font-size: 20vw;
    position : absolute;
     
    left: 0;
    top : 25%;
    height : 50vh;
    width : 100vw;
   
    text-align: center;  
    
    margin : auto;
    
}

 html.ws #link:after {
    content : "  WS";
    color : lime;
    display: inline;
 }
/*
 the time of day (now) - activated by keystroke "T"
*/

#now_disp {
  position : absolute;
  right :0;
  top :0;
  font-size : 4vh;
}

/*
 the time of day (now) - activated by keystroke "T" is slightly larger in the remote screen
 and is prefixed with "Current Time:"
*/
 
html.reduced #now_disp {
     height: 8vh;
}

html.reduced #now_disp:before {
     content:"Current Time: "; 
     
     vertical-align: middle;
     font-size : 2vh;
     line-height: 8vh;
     height: 8vh;
     color  :  #606060;
}


/* various display elements for main screen */
#ends_disp:before,
#started_disp:before,
#duration_disp:after,
#elapsed_disp:before,
#extra_time_disp{
      font-size:2vh;
}

 #wc_canvas2 {
    position : absolute;
    left     : 4px;
  top : calc( 50% - 44px );
    width    : 15vw;
    height   : auto;
 }
 #wc_canvas3 {
    position : absolute;
    right    : 4px;
   top : calc( 50% - 44px );
    width    : 15vw;
    height   : auto;
 }
 


#video-track, #video-auto {
    font-size:2vh;
    position : absolute;
    left : 0;
    bottom : 0;
    width : auto;
    display:none;
}
html.video-auto #video-auto {
    left : 140px;
    display : block;
    color : red;
}
html.video-track #video-track {
    display : block;
    color : lime;
}
 
video.screenVideoElement {
    display : none;
}
 
 html.video-start-fullscreen  #wc_canvas3  {
    top	  : 0;
	left	 : 0;
	width	: 0;
	height   : 0;
	
 }
 
 html.video-start-fullscreen  #wc_canvas2,
 html.video-live-fullscreen   #wc_canvas3 {
	 
	position : absolute;
	left	 : 5vw;
	top	  : 2vh;
	width	: 90vw;
	height   : auto;
	z-index  : 999998;
 }


 html.video-live-fullscreen  div.buttons span,
 html.video-live-fullscreen  div.buttons div,
 html.video-live-fullscreen  #elapsed_disp,
 html.video-live-fullscreen  #started_disp,
 html.video-live-fullscreen  #ends_disp,
 html.video-live-fullscreen  #duration_disp,
 
 html.video-start-fullscreen  div.buttons span,
 html.video-start-fullscreen  div.buttons div,
 html.video-start-fullscreen  #elapsed_disp,
 html.video-start-fullscreen  #started_disp,
 html.video-start-fullscreen  #ends_disp,
 html.video-start-fullscreen  #duration_disp {
     
     display : none;
 } 

html.video-start-fullscreen body.fullscreen  #wc_canvas2,
html.video-live-fullscreen  body.fullscreen #wc_canvas3 {
    position : absolute;
    top	  : 0;
    left	 : 0;
    width	: 100vw;
    height   : auto;
    
    z-index  : 999999;
}

/* (video player controls: styled by dropPlayer.js) */



#started_disp:before {
     content:"started at "; 
}

html.future #started_disp:before {
     content:"will start at ";
     color:  var(--color-future-start);
}


#started_disp {
  position : absolute;
  left : 0;
  top : calc( 80% + 44px );
}

/*
html.reduced #started_disp {
    display : block; 
}
*/

#ends_disp:before {
     content:"ends at "; 
}

#ends_disp {
  position : absolute;
  right :0;
  top : calc( 80% + 44px);
}

/*
html.reduced #ends_disp {
    display : block; 
}
*/



#elapsed_disp:before {
    content:"elapsed "; 
}

html.future #elapsed_disp:before {
    content:"standby ";
    color: darkgray;
    font-size : 4vh;
}

#elapsed_disp {
  position : absolute;
  left : 0;
  top : calc( 80% - 8px);    
}

 
 
 html.future #elapsed_disp {
  position : absolute;
  left : 25vw;
  width : 50vw;
  text-align: center;
  font-size : 4vh;
  color: var(--color-future-start);
  top : calc( 27% + 0px);
}

html.reduced.future #elapsed_disp {
    display : block; 
     color:  var(--color-future-start);
}

 
 

#messages_enabled {
    display : none; 
    position:absolute;
    top:48px;
    right :0;
    font-size:10pt;
    color:yellow;
}

#custom_message,
#remain_info_message {
    color: var(--color-remain-running-expired);
    display : none; 
    position:absolute;
    width:100vw;
    left :0;
    text-align:center;
    top: 15%;
    font-size:10vh;
}

html.showmessages.reduced.impending #remain_info_message,
html.showmessages.impending #remain_info_message {
    color:var(--color-remain-info-running);
}

html.show_custom_message #custom_message,
html.edit_custom_message #custom_message,
html.reduced.show_custom_message #custom_message,

html.showmessages #messages_enabled,
html.showmessages #messages_enabled,
html.showmessages.reduced.impending #remain_info_message,
html.showmessages.impending #remain_info_message,
html.showmessages.reduced.over #remain_info_message,
html.showmessages.over #remain_info_message {
    display:block;
}
html.show_custom_message.reduced.paused #remain_info_message,
html.show_custom_message.paused #remain_info_message {
    display:none;
}
 
html.reduced #video-track,
html.reduced #video-auto,
html.reduced #wc_canvas,
html.reduced #webcam,
html.reduced #wc_canvas2,
html.reduced #wc_canvas3,
html.reduced #messages_enabled {
    display:none;
    
}

 
html.show_custom_message.paused #remain_info_message,
html.show_custom_message.showmessages.impending #remain_info_message,
html.show_custom_message.showmessages.over #remain_info_message ,
html.edit_custom_message.showmessages.impending #remain_info_message,
html.edit_custom_message.showmessages.over #remain_info_message {
    top: 5%;
}


html.over #remain_disp {
    color:var(--color-remain-running-expired);
    
}

html.show_custom_message #custom_message {
    color: var(--color-custom-message);
}

/* long messages: two smaller lines, very long: three (see announceCustomMessage) */
html.msg-long  #custom_message { font-size: 6.5vh; line-height: 1.1; }
html.msg-xlong #custom_message { font-size: 4.5vh; line-height: 1.1; }
/* Portrait (a phone held upright): the height-based size made a message wider than the screen,
   wrapping over the countdown; cap it by the width as well */
@media (orientation: portrait) {
  #custom_message, #remain_info_message { font-size: min(10vh, 9vw); }
  html.msg-long  #custom_message { font-size: min(6.5vh, 6.5vw); }
  html.msg-xlong #custom_message { font-size: min(4.5vh, 4.5vw); }
}

html.edit_custom_message #custom_message {
    color: var(--color-custom-message-editing);
}


html.reduced.edit_custom_message #custom_message {
    color: var(--color-custom-message-editing-reduced);
    outline: 0px solid transparent;
}


html.reduced.edit_custom_message #custom_message::selection {
    color: var(--color-custom-message-editing-reduced);
    outline: 0px solid transparent;
}



html.impending #remain_disp {
    color: var(--color-remain-running-impending);
}

#remain_disp.adjusting {
    color:var(--color-remain-adjust-up);
}

#remain_disp.adjustingDown {
    color:var(--color-remain-adjust-down);
}

html.reduced #remain_disp.adjusting   {
     color: var(--color-remain-running);
}

html.reduced #remain_disp.adjustingDown  {
     color:var(--color-remain-running);
}

html.reduced.over #remain_disp  {
    color:var(--color-remain-running-expired);
}

html.reduced.impending #remain_disp,
html.reduced.future.impending #remain_disp, 
html.future.impending #remain_disp {
    color:var(--color-remain-running-impending);
}


html.future #remain_disp {
    color: var(--color-remain-future);
}

html.reduced.future #remain_disp {
    color:var(--color-remain-future);
}

html.future.paused #remain_disp {
    color: var(--color-remain-future-paused);
}

html.reduced.future.paused #remain_disp {
    color:var(--color-remain-future-paused);
}


#key_disp {
  position : absolute;
  left :0;
  top :90%;
  width :100%;
  text-align: center;  
}


#duration_disp {
  position : absolute;
  right :0;
  top : calc( 80% - 8px);
}

#duration_disp:after {
     content:" total"; 
}


#extra_time_disp {
  position : absolute;
  right :0;
  top : calc( 80% + 20px);
    
}




#disp_next_mins {
  position : absolute;
  right :0;
  bottom :0;

}

html.editing #disp_next_mins {
    
    color: var(--color-next-default-editing);
}

#remain_disp_video_text {
    background-color: var(--color-pip-background);
    color : var(--color-pip-running);
    display:none;
}  

#remain_disp_video_text:before {
    content : "";
}  

html.impending.showmessages  #remain_disp_video_text {
    color : var(--color-pip-impending);
}  

html.impending.showmessages  #remain_disp_video_text:before {
    content : "One Minute Left";
}  

html.over  #remain_disp_video_text {
    color : var(--color-pip-expired);
}  
html.over.showmessages #remain_disp_video_text:before {
    content : "Time is Up";
}  


html.paused  #remain_disp_video_text {
    color : var(--color-pip-paused);
} 
html.paused.showmessages   #remain_disp_video_text:before {
    content : "(Paused)";
} 
  
 
html.paused  #remain_disp_video_text {
    color : var(--color-pip-paused);
}  



html.impending.showmessages #remain_info_message:before {
    content : "Wrap up - last minute";
}

html.over.showmessages #remain_info_message:before {
    content : "Time is Up";
}




html.paused #remain_info_message {
    color: var(--color-remain-info-paused);
    display : block;
}

html.paused.impending #remain_info_message {
    color: var(--color-remain-info-paused-impending);
    display : block;
}

html.paused.over #remain_info_message {
    color: var(--color-remain-info-paused-expired);
    display : block;
}

html.paused #remain_disp {
    color: var(--color-remain-paused);;
}

html.impending.paused #remain_disp {
    color: var(--color-remain-paused-impending);
}

html.over.paused #remain_disp {
    color: var(--color-remain-paused-expired);
}

html.paused #ends_disp {
    animation: blinker 1s infinite;
    color: var(--color-remain-paused-blink);    
}

html.impending.paused #ends_disp {
    animation: blinker 1s infinite;
    color: var(--color-remain-paused-impending-blink);    
}


html.over.paused #ends_disp {
    animation: blinker 1s infinite;
    color: var(--color-remain-paused-expired-blink);    
}


html.over.showmessages.paused #remain_info_message:before,
html.impending.showmessages.paused #remain_info_message:before,
html.paused #remain_info_message:before {
    content : "Paused (for ";
}

html.paused #remain_info_message:after {
    content : ")";
}

html.reduced.paused #remain_info_message:before {
    content : "";
}

html.reduced.paused #remain_info_message:after {
    content : "";
}

/* Standby (run sheet Reset show): the notice is the whole text ("Standing by." / "Standing by to start
   in 5:23…", set by timer.js), and it shows above the first item's name, which is the message */
html.standby.paused #remain_info_message:before,
html.standby.paused #remain_info_message:after { content: "" !important; }
html.standby.paused #remain_info_message { display: block !important; }
/* The operator's screen shows that notice in the run sheet dashboard instead (#rs_standby), and the
   times as what will happen: "will start at" / "will end at" (timer.js), steady, no pause total */
html.standby.paused:not(.reduced) #remain_info_message { display: none !important; }
html.standby #started_disp:before { content: "will start at "; color: var(--color-future-start); }
html.standby #ends_disp:before { content: "will end at "; }
html.standby.paused #ends_disp { animation: none !important; color: inherit !important; }
html.standby #extra_time_disp { display: none !important; }



/* keyboard help text*/
#disp_next_mins:before {
    content:"[←],[→] = fix a late/early start (seconds), [↓],[↑] = Nudge end time (seconds), [Space] = start countdown using "; 
    color: var(--color-keyboard-help-text);
}

html.video-start-fullscreen  #disp_next_mins,
html.video-live-fullscreen  #disp_next_mins {
    color: var(--color-main-background);
}


html.video-start-fullscreen  #link,
html.video-live-fullscreen  #link {
   display:none;
}

html.video-live-fullscreen  #disp_next_mins:before{
    content:"showing video preview fullscreen               "; 
    color: var(--color-keyboard-help-text);
}

html.video-start-fullscreen  #disp_next_mins:before{
	content:"video assist zoom mode (ctrl-v toggles)"; 
	color: var(--color-keyboard-help-text);
}


/*keyboard help text displayed while control key is held down*/
html.controlling #disp_next_mins:before {
    content:"[←],[→] = fix a late/early start (minutes), [↓],[↑] = Nudge end time (minutes), [Enter] = catchup to real time. "; 
    color: var(--color-keyboard-help-text);
}

/*keyboard help text displayed while typing in a minutes value*/
html.editing #disp_next_mins:before {
    content:  "[Enter] = save default countdown... or  [Space] = start countdown using "; 
    color: var(--color-keyboard-help-text);
}

/*keyboard help text displayed while shift key is held down*/
html.shifting #disp_next_mins:before {
    content:  "[←],[→] = fix a late/early start (seconds), [↓],[↑] = Nudge start time (seconds), [Space] = change current countdown to... "; 
}


/*keyboard help text displayed while control and shift keys are held down*/
html.shifting.controlling #disp_next_mins:before {
    content:  "[←],[→] = fix a late/early start (minutes), [↓],[↑] = Nudge start time (minutes), [Enter] = catchup to real time. "; 
}

/*while editing the custom message, hide the minutes entry field by making it the same colour as the background*/
html.edit_custom_message #disp_next_mins {
    color: var(--color-main-background);
}

/*keyboard help text displayed while editing the custom message text*/
html.edit_custom_message #disp_next_mins:before {
   content : "Editing custom message...          [Enter] = Show On Remote Display.  ";
   color:var(--color-keyboard-help-text--editing-custom);
}

/*change the colour of minutes entry field while the custom message is displayed*/
html.show_custom_message #disp_next_mins {
    color:yellow;
}


html.controlling #disp_next_mins{
    color:var(--color-main-background);
}

.fs_only {
   display : none;    
} 

body:fullscreen .fs_only  {
    
    display : block;  
}

 #link {
     position :absolute;
     bottom : 30px;
     left : 0;
 }


div.buttons, 
#now_disp,
.mainDiv ,
html.twoplus #link,
html.reduced #link,
#drag_to_monitor,
html.reduced body  div  {
    display : none;
    cursor:none;
}


html.showbuttons div.buttons, 
html.showtimenow #now_disp,
#fs_help,
#clock_main,
.showbar .mainDiv ,
.showbar .mainDiv > .progressDiv ,
.showbar .mainDiv > .progressDiv > .progress,
#remain_disp  {
    display : block ;
    
}

html.reduced div.buttons div {
    display : inline-block ;
    
}
 
html.portrait div.buttons {
    display:none;
}


#fs_help {
      position : absolute;
      left :0;
      bottom :0;
}


html.reduced #drag_to_monitor {


  display:block; 
  position: absolute;
  bottom : 10px;
  width : 100vw;
  text-align:center;
  color: var(--color-drag-to-monitor-text);
  font-size:3vh;
}

body.fullscreen #drag_to_monitor,
body:fullscreen #drag_to_monitor,
body:fullscreen #fs_help {
    
    display : none;  
}


*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}


.mainDiv{
  position: absolute;
  top:80%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 75vw;
  max-width: 75%;
  height: 200px;
}


.mainDiv > .progressDiv{
  width: 100%;
  height: 30px;
  background: var(--color-progress-bar-background);
}

.mainDiv > .progressDiv > .progress{
  width: 0%;
  height: 30px;
  background:  var(--color-progress-bar); 
}


html.impending .mainDiv > .progressDiv > .progress{
  background: orange;
}

html.over .mainDiv > .progressDiv > .progress{
    
  background: var(--color-remain-running-expired);
    
}


.mainDiv > .progressDiv > .progress > .adjust{
  position:relative;
  top : -15px;
  height: 15px;
  background: yellow;
  z-index:25;
}

/*
.mainDiv > h2{
  font-family: sans-serif;
  color: #2c3e50;
}
*/

/* Button bar. Sizes are deliberately in px (unlike the countdown, which uses viewport
   units), so browser zoom (Cmd/Ctrl + and -) resizes the buttons only. The bar grows to
   fit when zoomed-in buttons wrap; runsheet.js publishes its bottom as --buttons-bottom. */
div.buttons  {
  position : absolute;
  top:    0;
  left:   0;
  right:  180px;
  padding: 6px 8px;
  background-color:var(--color-main-background);
  opacity: 0.5;
  z-index: 9999;
}

html.reduced div.buttons {
    opacity:0;
}

html.reduced div.buttons:hover,
div.buttons:hover  {
  opacity:1;

}

div.buttons div.btn2, 
div.buttons div.btn {
   min-width: 34px;
   background-color:  var(--color-button-background);
   border: none;
   color:  var(--color-button-font);
   padding: 7px 9px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 13px;
   line-height: 1.2;
   margin: 2px 1px;
   white-space: nowrap;
   cursor: pointer;
}

div.buttons .btn-label {
   font-size: 13px;
   margin: 0 4px 0 10px;
}
div.buttons .btn-label:first-child { margin-left: 2px; }

/* Flex instead of inline-block: no stray whitespace gaps, so the row fits narrower screens */
html.showbuttons div.buttons {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 3px 2px;
}
div.buttons div.btn2,
div.buttons div.btn { margin: 0; }

#link,
#link a {
    cursor:pointer;
    z-index:9999;
}

div.buttons div.btn2 {
    
   min-width: 48px;
   padding: 7px 7px;
   background-color:  var(--color-button2-background);
   color: var(--color-button2-font);
   
    
}



div.buttons div.btn:hover {
  background-color:  var(--color-button-background-hover);
  color: var(--color-button-font-hover);
}

html.shifting div.buttons div.btn:hover {
  background-color: var(--color-button-background-hover-set);
  color:var(--color-button-font-hover-set);
}
html.editing.shifting div.buttons div.btn:hover {


  background-color: var(--color-button-background-hover-setting);
  color: var(--color-button-font-hover-setting);
}

#btnresume {
     display:none;
}

html.paused #btnresume {
   display:inline-block;
   animation: blinker 1s infinite;
}

html.overlay #btnfloat {
    display:inline-block;
    animation: blinker 1s infinite;
 }
 
 html.nooverlay  #btnfloat {
    display:none;
 }

html.paused #btnpause {
   display:none;
}



html #css_editor {
    position : absolute;
    top:60px;
    left:40px;
    right:40px;
    bottom:40px;
    z-index:9999;
    font-size:16pt;
}

html.reduced #css_editor,
html.reduced #css_editor div {
    display : block;
    cursor: text;
}
 
html.portrait #link, 
html.portrait div.buttons {
    display:none;
}

html.portrait #remain_disp {
    font-size: 25vw;
    top:40vh;
}

html.portrait  .mainDiv  {
    top:80%;
}


html.portrait #duration_disp,
html.portrait #elapsed_disp {
  top : calc( 85% + 0px);    
}

html.portrait #started_disp,
html.portrait #ends_disp {
  top : calc( 85% + 40px);    
}


html.portrait #disp_next_mins:before{
    content : "";
}




/* ═══════════════════════════════════════════════════════════════════════════
   STREAM DECK EDITOR
═══════════════════════════════════════════════════════════════════════════ */

#deck-editor {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck-editor-inner {
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 10px;
  width: min(960px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.deck-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #222;
  background: #111;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

.deck-editor-header-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.deck-editor-header select,
.deck-editor-header button {
  padding: 5px 10px;
  font-size: 12px;
  background: #222;
  border: 1px solid #444;
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.deck-editor-header button:hover { background: #333; color: #fff; }

#deck-save-btn { background: #0a3a0a; border-color: #2a6a2a; color: lime; }
#deck-save-btn:hover { background: #0f4f0f; }

#deck-editor-close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
}
#deck-editor-close:hover { color: #fff; }

.deck-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.deck-preview-area {
  flex: 1;
  padding: 20px;
  overflow: auto;
  border-right: 1px solid #222;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-palette-area {
  width: 280px;
  flex-shrink: 0;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deck-preview-label {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Key cells in preview grid */
.deck-editor-key {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
  white-space: pre-line;
  user-select: none;
}

.deck-editor-key:hover       { border-color: #666; transform: scale(1.05); }
.deck-editor-key.drag-over   { border-color: lime; background: #003300 !important; }
.deck-editor-key.selected    { border-color: #4af; box-shadow: 0 0 0 2px #4af4; }

/* Palette */
.deck-palette-group {
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid #222;
}

.deck-palette-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.deck-palette-chip {
  padding: 5px 8px;
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 11px;
  color: #ccc;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}

.deck-palette-chip:hover { border-color: #888; color: #fff; }
.deck-palette-chip:active { cursor: grabbing; }

/* Per-key options panel */
.deck-key-options {
  margin-top: 16px;
  padding: 12px;
  background: #111;
  border: 1px solid #222;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deck-key-options-title {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.deck-key-options label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #888;
}

.deck-key-options input[type="text"] {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.deck-key-options input[type="color"] {
  width: 100%;
  height: 28px;
  border: 1px solid #333;
  border-radius: 3px;
  background: none;
  cursor: pointer;
}

#deck-key-clear {
  padding: 6px;
  background: #2d0000;
  border: 1px solid #5a0000;
  color: #ff8888;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
#deck-key-clear:hover { background: #400; }


/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH STRIP (mobile only)
═══════════════════════════════════════════════════════════════════════════ */

#touch-strip {
  display: none;  /* shown only via media query below */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: rgba(0,0,0,0.92);
  border-top: 1px solid #2a2a2a;
  z-index: 9998;
  gap: 4px;
  padding: 8px;
  align-items: stretch;
}

.touch-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #ddd;
  background: #1a1a2e;
  border: 1px solid #333;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

.touch-btn:active {
  background: #0f3460;
  transform: scale(0.94);
  transition: transform 0.08s;
}

/* Bottom padding for timer display so strip doesn't cover it */
@media (pointer: coarse) {
  #touch-strip { display: flex; }
  #remain_disp { padding-bottom: 80px; }
  div.buttons  { display: none !important; }
  html.reduced #touch-strip { display: none; }
  /* No keyboard hints or "open display / help" links on a phone (they sat under the strip):
     the strip's ? button opens the help */
  #link, #disp_next_mins { display: none !important; }
  /* The time details sit just above the strip, whatever the screen's shape */
  html:not(.reduced) #started_disp, html:not(.reduced) #ends_disp { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
  html:not(.reduced):not(.future) #elapsed_disp, html:not(.reduced) #duration_disp { top: auto; bottom: calc(80px + 1.6em + env(safe-area-inset-bottom)); }
  /* The progress bar sits just above the strip (at 80% it landed on the strip in landscape), and
     the time details move up above it while it's shown */
  html:not(.reduced) .mainDiv { top: auto; height: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
  html:not(.reduced) .mainDiv > .progressDiv, html:not(.reduced) .mainDiv > .progressDiv > .progress { height: 12px; }
  html.showbar:not(.reduced) #started_disp, html.showbar:not(.reduced) #ends_disp { bottom: calc(96px + env(safe-area-inset-bottom)); }
  html.showbar:not(.reduced):not(.future) #elapsed_disp, html.showbar:not(.reduced) #duration_disp { bottom: calc(96px + 1.6em + env(safe-area-inset-bottom)); }
  /* The pause total ("+ 0:04 pauses") goes just above the total duration (at 80% + 20px it landed on
     it in portrait and behind the strip in landscape): the details' 2.5vh lines, 1.6em apart */
  html:not(.reduced) #extra_time_disp { top: auto; bottom: calc(80px + 7vh + 2px + env(safe-area-inset-bottom)); }
  html.showbar:not(.reduced) #extra_time_disp { bottom: calc(96px + 7vh + 2px + env(safe-area-inset-bottom)); }
  /* Full screen: only where the browser has it (not iPhone) */
  #touch-fs-btn { display: none; }
  html.can-fullscreen #touch-fs-btn { display: flex; }
}
/* A phone on its side: the height-based sizes made the details tiny (10 px). Bigger here; they sit
   at the sides, clear of the centred countdown */
@media (pointer: coarse) and (orientation: landscape) {
  html:not(.reduced) #elapsed_disp, html:not(.reduced) #duration_disp, html:not(.reduced) #started_disp, html:not(.reduced) #ends_disp { font-size: 4.5vh; }
  html:not(.reduced) #elapsed_disp:before, html:not(.reduced) #duration_disp:after, html:not(.reduced) #started_disp:before, html:not(.reduced) #ends_disp:before,
  html:not(.reduced) #extra_time_disp { font-size: 3.5vh; }
  html:not(.reduced) #extra_time_disp { bottom: calc(80px + 13vh + 2px + env(safe-area-inset-bottom)); }
  html.showbar:not(.reduced) #extra_time_disp { bottom: calc(96px + 13vh + 2px + env(safe-area-inset-bottom)); }
  html:not(.reduced) #now_disp { font-size: 7vh; }
  html:not(.reduced) #messages_enabled { font-size: 14px; top: calc(7vh + 12px); }
}
/* Paused: Resume blinks with the "ends at" time (same animation and colours, started by the same
   class), so it reads as the button to press; Restart beside it */
html.paused #touch-pause-btn { animation: blinker 1s infinite; color: var(--color-remain-paused-blink); border-color: currentColor; }
html.impending.paused #touch-pause-btn { color: var(--color-remain-paused-impending-blink); }
html.over.paused #touch-pause-btn { color: var(--color-remain-paused-expired-blink); }
.touch-btn.touch-help { flex: 0 0 44px; font-size: 18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH PRESET BOTTOM SHEET
═══════════════════════════════════════════════════════════════════════════ */

#touch-preset-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: flex-end;
  justify-content: center;
}

#touch-preset-sheet.visible .touch-sheet-content {
  transform: translateY(0);
}

.touch-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.touch-sheet-content {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #111;
  border-top: 1px solid #333;
  border-radius: 16px 16px 0 0;
  padding: 20px 16px 32px;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
}

.touch-sheet-title {
  text-align: center;
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
}

.touch-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.touch-sheet-preset {
  padding: 16px 8px;
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.touch-sheet-preset:active { background: #0f3460; }
.touch-sheet-preset.custom { border-color: #3b5a8a; }
.touch-sheet-preset.removable { background: #3a0d0d; border-color: #6a2a2a; color: #ff9a9a; }
.touch-sheet-preset.removable::after { content: ' ✕'; }
.touch-sheet-row { display: flex; gap: 8px; margin-bottom: 16px; }
.touch-sheet-custom, .touch-sheet-edit, .touch-sheet-back {
  padding: 12px; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; color: #ddd; font-size: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.touch-sheet-custom { flex: 1; }
.touch-sheet-edit { flex: 0 0 auto; min-width: 72px; color: #888; }
.touch-sheet-edit[hidden] { display: none; }
/* Keypad (shown instead of the presets) */
#touch-pad { display: none; }
#touch-preset-sheet.keypad .touch-sheet-presets { display: none; }
#touch-preset-sheet.keypad #touch-pad { display: block; }
.touch-pad-display { text-align: center; font-size: 32px; font-weight: bold; color: #fff; padding: 4px 0 12px; font-variant-numeric: tabular-nums; }
.touch-pad-display.empty { color: #555; }
.touch-pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.touch-pad-keys button { padding: 14px 0; font-size: 22px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.touch-pad-keys button:active { background: #0f3460; }
.touch-pad-hint { text-align: center; color: #666; font-size: 12px; margin: 10px 0 12px; }
.touch-pad-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.touch-pad-actions button { padding: 14px 4px; font-size: 14px; font-weight: bold; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.touch-pad-actions button.go { background: #0e3a12; border-color: #2a6a2a; color: #9cf59c; }
.touch-pad-actions button:disabled { opacity: .35; }
.touch-sheet-back { display: block; width: 100%; margin-bottom: 8px; color: #888; }
/* "More" sheet */
#touch-more-sheet { position: fixed; inset: 0; z-index: 10000; align-items: flex-end; justify-content: center; }
#touch-more-sheet.visible .touch-sheet-content { transform: translateY(0); }
.touch-more-item { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 8px; background: #1a1a2e; border: 1px solid #333;
  border-radius: 8px; color: #fff; font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.touch-more-item:active { background: #0f3460; }
.touch-more-item small { display: block; color: #888; font-size: 13px; font-weight: normal; margin-top: 3px; }
/* Bar, Clock, Undo pauses: the less-used switches, side by side */
.touch-more-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.touch-more-row .touch-more-item { text-align: center; padding: 12px 6px; font-size: 15px; }
.touch-more-row .touch-more-item.on { border-color: #2a6a9a; background: #0b2a40; }
.touch-more-row .touch-more-item.on small { color: #9cf; }
.touch-more-item:disabled { opacity: .4; }
/* Short screens (a phone held sideways): the sheet scrolls, and the keypad sits beside its
   display and actions instead of above them */
.touch-sheet-content { max-height: 100vh; max-height: 100dvh; overflow-y: auto; box-sizing: border-box; }
@media (max-height: 560px) {
  .touch-sheet-content { padding: 10px 16px 12px; }
  .touch-sheet-title { margin-bottom: 8px; }
  #touch-pad { display: none; grid-template-columns: 1fr 1fr; gap: 6px 16px; align-items: center; }
  #touch-preset-sheet.keypad #touch-pad { display: grid; }
  .touch-pad-keys { grid-row: 1 / 4; grid-column: 1; max-width: 360px; width: 100%; justify-self: end; gap: 5px; }
  .touch-pad-keys button { padding: 6px 0; font-size: 20px; }
  .touch-pad-display { grid-column: 2; font-size: 28px; padding: 0 0 4px; }
  .touch-pad-hint { grid-column: 2; margin: 0 0 4px; }
  .touch-pad-actions { grid-column: 2; grid-template-columns: 1fr; margin-bottom: 0; }
  .touch-pad-actions button { padding: 9px 4px; }
  .touch-sheet-back { grid-column: 1 / -1; margin: 6px 0 0; padding: 8px; }
  .touch-sheet-cancel { padding: 8px; margin-top: 6px; }
  .touch-sheet-preset { padding: 10px 8px; }
  .touch-sheet-grid { gap: 6px; margin-bottom: 8px; }
  .touch-sheet-row { margin-bottom: 8px; }
  .touch-sheet-custom, .touch-sheet-edit { padding: 8px; }
}

.touch-sheet-cancel {
  display: block;
  width: 100%;
  padding: 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   QUICK-START OVERLAY (first load mobile)
═══════════════════════════════════════════════════════════════════════════ */

#quick-start-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qs-inner {
  width: min(480px, 94vw);
  text-align: center;
}

.qs-title {
  font-size: clamp(18px, 4vw, 28px);
  color: #aaa;
  margin-bottom: 24px;
}

.qs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.qs-preset {
  padding: 20px 8px;
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.qs-preset:active { background: #0f3460; transform: scale(0.95); }

.qs-skip {
  background: none;
  border: none;
  color: #444;
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
}


/* Stream Deck connection status (editor) */
.deck-status-bar {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 6px 16px; border-bottom: 1px solid #222; background: #0b0b0b; font-size: 12px;
}
#deck-status { color: #888; }
#deck-status[data-kind="ok"]    { color: lime; }
#deck-status[data-kind="error"] { color: #ff6b6b; }
.deck-status-hint { color: #444; }
#deck-connect-btn { background: #0a2a4a; border-color: #2a5a8a; color: #9cf; }
#deck-forget-btn { background: #2d0000; border-color: #5a0000; color: #ff8888; }

/* Catch up button: only active while the timer is easing to an adjusted end time */
#btncatchup { opacity: 0.3; pointer-events: none; }
html.adjusting_time #btncatchup {
  opacity: 1; pointer-events: auto;
  color: lime; border-color: lime;
  animation: catchup-pulse 1.2s ease-in-out infinite;
}
@keyframes catchup-pulse { 50% { box-shadow: 0 0 8px lime; } }
.deck-brightness-label { font-size: 12px; color: #888; display: flex; gap: 4px; align-items: center; }
.deck-key-options textarea {
  background: #1a1a1a; border: 1px solid #333; color: #ddd;
  padding: 4px 8px; border-radius: 3px; font: 12px sans-serif; resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUN SHEET DASHBOARD (controller only; html.runsheet is set by runsheet.js)
═══════════════════════════════════════════════════════════════════════════ */

#runsheet_dash {
  display: none;
  position: absolute;
  top: calc(var(--buttons-bottom, 104px) + 12px);
  left: 12px;
  right: 50vw;
  font-size: 2.1vh;
  line-height: 1.35;
  pointer-events: none;
  z-index: 50;
}
html.runsheet:not(.reduced) #runsheet_dash { display: block; }

#runsheet_dash .rs-row {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  white-space: nowrap;
  color: #777;
}
#runsheet_dash .rs-label {
  flex: 0 0 3.4em;
  font-size: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}
#runsheet_dash .rs-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#runsheet_dash .rs-meta { flex-shrink: 0; }
#runsheet_dash .rs-meta { font-size: 0.8em; color: #666; }
#runsheet_dash .rs-row.rs-empty { visibility: hidden; }

#runsheet_dash #rs_cur { color: #fff; font-weight: bold; }
#runsheet_dash #rs_cur .rs-name { font-size: 1.3em; }
#runsheet_dash #rs_cur .rs-meta { font-weight: normal; color: #999; }
#runsheet_dash #rs_standby[hidden] { display: none; }
#runsheet_dash #rs_standby .rs-name { font-size: 1.3em; font-weight: bold; color: #ccc; }   /* "Standing by…", as big as "Not started" */
#runsheet_dash #rs_next { color: #bbb; }

#rs_status { margin-top: 0.2em; font-size: 0.85em; color: #888; padding-left: 4.4em; }
#runsheet_dash.rs-behind #rs_status { color: #ff6b6b; }
#runsheet_dash.rs-ahead  #rs_status { color: #5fd35f; }
#runsheet_dash.rs-flash  #rs_status { color: #ffcc33; }
/* "Auto start at 22:40" (runsheet.js; only before the show, with a start time for the first item) */
#rs_auto { display: block; margin-top: 0.3em; padding-left: 4.4em; font-size: 0.85em; color: #ccc; cursor: pointer; pointer-events: auto; user-select: none; }
#rs_auto[hidden] { display: none; }
/* The preset buttons are for tablets and mouse users outside run sheet mode: hidden in it (the keyboard,
   the Stream Deck and the run sheet set durations). The wrapper takes no space of its own outside it;
   in it, it keeps the buttons' space (so Live adjust and the rest don't move) and shows the site's name
   (data-site = location.hostname, set in timer.html). */
.btn-presets { display: contents; }
html.runsheet .btn-presets { display: flex; align-items: center; gap: inherit; position: relative; }
html.runsheet .btn-presets > * { visibility: hidden; }
html.runsheet .btn-presets::after {
  content: attr(data-site); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.12em; color: var(--color-button-font); opacity: 0.35; pointer-events: none; white-space: nowrap;
}
#rs_auto input { vertical-align: middle; cursor: pointer; }

/* In run sheet mode the controller's copy of the message moves to the top right,
   so long item names don't collide with the dashboard (presenter view unchanged). */
html.runsheet:not(.reduced) #custom_message {
  top: calc(var(--buttons-bottom, 104px) + 12px);
  left: 50vw;
  right: 12px;
  width: auto;
  font-size: 4.5vh;
  line-height: 1.15;
  text-align: right;
  max-height: 3.6em;
  overflow: hidden;
}