/******************************* HOME PAGE STUFF *******************************/
:root {
    --bg-gradient-top: #151515;  --bg-gradient-bottom: #222;
    --page-title: #fff; 
    --side-padding: 25px;    
}

    

/******************************* TOP LINKS SECTIONS FOR MARKET / MACROS *******************************/

:root {

    /* PAGE TITLE */
    --title-text-color1: #222;   --title-text-color2: #5a5a5a;

    /* VIEW & CUT LINKS */    
    --top-link-text-color: #444;
    --top-link-highlight-background-color: #568DC6;
    --top-link-highlight-text-color: #fff;    
    --top-link-highlight-border: 1px solid transparent;

    /* OTHER TOP ACTION LINKS */
    --top-action-link-text-color: #2a6ea3;
    --top-action-link-inactive-text-color: #ccc;  
    
    /* OTHER */
    --bright-blue: #31B8C7;
}

:root.dark {  --accent-color: var(--bright-blue);    --accent-background-color: #0D2528;
    
    
    /* PAGE TITLE */    
    --title-text-color1: #fff;   --title-text-color2: #484848;  

    /* VIEW & CUT LINKS */
    --top-link-text-color: #777;
    --top-link-highlight-background-color: var(--accent-background-color);
    --top-link-highlight-text-color: var(--accent-color);
    --top-link-highlight-border: 1px solid #185159;

    /* OTHER TOP ACTION LINKS */
    --top-action-link-text-color: var(--accent-color);
    --top-action-link-inactive-text-color: #444;    


    /*
    --top-link-highlight-border: 1px solid rgb(102, 80, 250);*/
}


/******************************* LANDING PAGES ETG *******************************/
:root { 
    --bright-link-color: var(--bright-blue); --dark-link-color: #080707; --link-breaker-color: #ccc;
    --bg-gradient-top: #0a0a0a;  --bg-gradient-bottom: #282828; --page-title-color: #fff;  --side-padding: 25px; 

    --outseta-behind-color: rgba(0, 0, 0, 0.5); 
    --outseta-background-color: #fff; --outseta-text-color: #000;
    --outseta-border: 5px #0e79bc solid; --outseta-border-radius: 20px;
    --outseta-close-text-color: #333; --outseta-close-offset: 20px;
}








/******************************* DEFAULTS  *******************************/


a:focus, a:focus-visible { outline: none !important; box-shadow: none !important;}


button:focus { outline: none !important; background-color: inherit !important; }
input:focus { outline: none !important; background-color: inherit !important; }
div:focus { outline: none !important; background-color: inherit !important; }


/******************************* TOOLTIP  *******************************/

/*#custom-tooltip {
    position: absolute; z-index: 9999;  pointer-events: none; white-space: normal;  display: none;
    color: white;  background: rgba(0, 0, 0, 0.7);  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 10px;  padding: 4px 8px;   border-radius: 6px;  max-width: 300px;    
}*/

:root { --fade-size: 50px; --fade-start: transparent; --fade-end: transparent; --tooltip-background-color: #444; --tooltip-text-color: #fff; }
:root.dark { --fade-size: 100px; --fade-start: transparent; --fade-end: rgba(0,0,0,0.8); --tooltip-background-color: #ccc; --tooltip-text-color: #000;}

#custom-tooltip {
    position: absolute; z-index: 9999;  pointer-events: none; white-space: normal;  display: none;
    /*transform: translateX(calc(-100% - 15px));*/
    transform: translateY(-100%) translateX(-50%);   
}
#tip-wrapper {
    height: 100%;
    padding-left: var(--fade-size);
    padding-right: var(--fade-size);
    border: 0px solid #f00;
    background: linear-gradient(to right, var(--fade-start) 0%, var(--fade-end) var(--fade-size), var(--fade-end) calc(100% - var(--fade-size)), var(--fade-start) 100%);
    display: flex;
    align-items: center;  
    justify-content: center;

}
#tip-content {
    position: relative;
    color: var(--tooltip-text-color); font-weight: bold; font-size: 11px;
    background-color: #ccc;  padding: 4px 15px;
    border-top-left-radius: 10px; border-top-right-radius: 10px;  
    min-width: 100px;
    text-align: center;
    height: 100%;
    background-color: var(--tooltip-background-color);
    display: inline-block;
}
#tip-content::after {
    content: "";
    position: absolute;
    inset: 0;                      /* fill the element */
    transform: translateY(2px);
    border-bottom: 5px solid var(--tooltip-background-color); /* your visible bar */
    z-index: 2; 
    width: inherit;
}



/******************************* KEYBOARD SHORTCUTS *******************************/

.keybd{color: #999999; text-align:center; }

.keys_bg { border: 3px solid #888; z-index: 2000; padding: 30px; visibility: hidden; color: #ccc; margin:auto; position:fixed;top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 1000px; background-color: rgba(25,25,25,0.95);border-radius: 15px;-moz-border-radius: 15px;}
.keys_wrapper {   font-family: verdana; display: flex; justify-content: center; align-items: top;flex-direction: row; gap: 30px; }
.keys_section { flex: 1; border: 0px solid red; font-size: 15px; color: #ccc;} 
.keys_header{  font-weight: bold; font-size: 20px; border-bottom: solid 1px #ccc;padding-bottom: 10px; }
.keys_key { font-family: monospace; font-weight: bold; color: rgb(49, 118, 255); width: 100px;}

.keys_bg.hidden { visibility: hidden !important; }
.dim_overlay { background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; z-index: 1999; pointer-events: auto; width: 100vw; height: 100vh; }
.dim_overlay:not(.hidden) { pointer-events: auto; opacity: 1; }
.hidden { visibility: hidden !important }



/******************************* DARK / LIGHT BUTTON *******************************/

:root{ 
    --switch-width:50px; --switch-height:18px; --track-border-thickness:1px;
    --track-bg: #ddd;  --track-border:#bbb; --indicator: #ccc;  --icon:#777;  --icon-active:#666;  --switch-opacity: 1;       
}
:root.dark {
    --track-bg:#000;  --track-border:#444;  --indicator: #333;  --icon:#777;  --icon-active: #ccc;  --switch-opacity: .6;       
    
}

.theme-switch{ opacity: var(--switch-opacity); position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);background:var(--track-bg);border:var(--track-border-thickness) solid var(--track-border);border-radius:calc(var(--switch-height)/2);overflow:hidden;user-select:none;cursor:pointer}
.theme-switch .option{flex:1 1 50%;display:flex;align-items:center;justify-content:center;color:var(--icon);z-index:1;transition:color .2s ease}
.theme-switch .sun-and-moon{width:calc(var(--switch-height)*0.8);height:calc(var(--switch-height)*0.8)}
.theme-switch .option.moon .sun-and-moon{transform:scale(1.12)}
.theme-switch .indicator{position:absolute;z-index:0;top:var(--track-border-thickness);left:var(--track-border-thickness);width:calc((var(--switch-width) - 2*var(--track-border-thickness))/2);height:calc(var(--switch-height) - 2*var(--track-border-thickness));background:var(--indicator);border-radius:calc(var(--switch-height)/2);transform:translateX(0);transition:transform .25s cubic-bezier(.4,0,.2,1)}
/* explicit states to avoid inheritance conflicts */
.theme-switch.light .sun{color:var(--icon-active)}
.theme-switch.light .moon{color:var(--icon)}
.theme-switch:not(.light) .moon{color:var(--icon-active)}
.theme-switch:not(.light) .sun{color:var(--icon)}
.theme-switch.light .indicator{transform:translateX(100%)}



.info-pill{ opacity: var(--switch-opacity); position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; text-decoration: none; cursor: pointer;
    height: var(--switch-height);  /* horizontal pill padding */
    color: var(--icon) !important; background: var(--track-bg); border: var(--track-border-thickness) solid var(--track-border); border-radius: calc(var(--switch-height) / 2);
    line-height: 1; 
    width: 50px;
  }

.info-label{ font-size: 12px; font-weight: 600; letter-spacing: .01em;}
.info-pill:hover{ background: color-mix(in srgb, var(--indicator) 8%, var(--track-bg)) }
/*.info-pill:active{ transform: translateY(1px); }*/