:root {
  /* General Variables */
  --radius:12px;
  --title-h:34px;
  --transition-duration: 1.0s;
  --transition-duration-fx: 75ms;
  /* General Colours */
  --clr-gold: #e8af2d;
  --clr-gold-light: #edc25f;
  --clr-gold-light-sat: #ffca4d;
  --clr-gold-dark: #977B3B;
  --clr-matcha: #74a662;
  --clr-emerald: #00674f;
  /* General effects */
  --clr-btn-sel: color-mix(in srgb-linear, rgb(from var(--clr-txt) r g b / 5%), var(--clr-border-accent) 5%);
  --fx-box-shadow-rise: inset 0 0 0 transparent, inset 0 0 0 transparent,
    3px 3px 6px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
    -3px -3px 6px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));
  --fx-box-shadow-sink: inset 3px 3px 6px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
    inset -3px -3px 6px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular)),
    0 0 0 transparent, 0 0 0 transparent;
  --fx-clr-carvedin: rgb(from var(--clr-txt) r g b / 7%);

  /* Dark Theme Colours (default) */
  /* General */
  --clr-txt: #ffffff;                /*Colour of text*/
  --clr-txt-muted: #B9B3A6;          /*Muted text colour*/
  --clr-txt-focused: #edc25f;        /*Text that should stand out*/
  --clr-border: #413a35;             /*Colour of object borders and dividers*/
  --clr-border-accent: #00674f;      /*ex. A button selected by keyboard*/
  --clr-menubar: #302827;            /*Background colour of menu bars*/
  --clr-selection: #00644F;          /*For selected objects/text*/
  --clr-panel: #26211E;              /*Background colour of a panel, ex. Browser's left panel*/
  --clr-scroll-thumb: #332D29;
  --clr-link: #e8af2d;
  /* Topbar */
  --clr-bg: #16120d;                 /*Desktop colour. OG: #141210*/
  --clr-topbar: #1C221C;             /*Topbar background colour*/
  --clr-topbar-btn-pressed: #88a970; /*Colour of a topbar button when its window is open*/
  --clr-topbar-btn-pressed-txt: #1a1300; /*Text of the above*/
  --clr-topbar-btn-active: #e8af2d;  /*Active topbar button (active window's)*/
  --clr-sitelbl: var(--clr-gold);      /*SITEOFSOROUSH.CA label & secret button*/
  /* Windows */
  --clr-win-bg: #1C1A17;             /*Background colour of window's content*/
  --clr-win-title: #430F1E;          /*Colour of an active window's title bar*/
  --clr-win-title-muted: #2F1D23;    /*Colour of an unselected window's title bar*/
  --clr-win-x: #770000;              /*Background colour of the close window button*/
  --clr-win-m: #543f2f;              /*Background colour of the maximise/restore button*/
  --clr-win-txt: #F3E7C9;            /*Colour of active window's title bar's text*/
  /* Effects */
  --fx-clr-lightsrc: #fff4cc;
  --fx-pct-specular: 15%;
  --fx-pct-diffuse: 25%;
}
html[data-theme="light"] {
  /* General */
  --clr-txt: #211a16;
  --clr-txt-muted: #6b6157;
  --clr-txt-focused: #8e530b;
  --clr-border: #ADA09B;
  --clr-border-accent: #2C7A67;
  --clr-menubar: #E8DFD2;
  --clr-selection: #edc25f;
  --clr-panel: #F4EADE;
  --clr-scroll-thumb: #C6BAB0;
  --clr-link: #977B3B;
  /* Light Theme Colours */
  --clr-bg: #F4E8D3; /*OG: #F7ECDB*/
  --clr-topbar: #B7C9A1; /*OG: #b0c69e*/
  --clr-topbar-btn-pressed: #366343;
  --clr-topbar-btn-pressed-txt: #EDE8D0;
  --clr-topbar-btn-active: #e8af2d;
  --clr-sitelbl: #B38212;
  /* Windows */
  --clr-win-bg: #FFFDF7;
  --clr-win-title: #8E3C4A;
  --clr-win-title-muted: #CDB7B4;
  --clr-win-x: #E2393D;
  --clr-win-m: #C8983B;
  --clr-win-txt: #fff9eb;
  /* Effects */
  --fx-clr-lightsrc: #ffffff;
  --fx-pct-specular: 70%;
  --fx-pct-diffuse: 67%;
}
html[data-theme="ava"] {
  /* General */
  --clr-txt: #2A1B1F;/**/
  --clr-txt-muted: #6E5660;/**/
  --clr-txt-focused: #B54B86;/**/
  --clr-border: #CDB7BE;/**/
  --clr-border-accent: #5FA7D6;/**/
  --clr-menubar: #F3D7D9;/**/
  --clr-selection: #FF55A3;/**/
  --clr-panel: #FAE6E8;/**/
  --clr-scroll-thumb: #f28cd0;
  --clr-link: #FF55A3;
  /* Light Theme Colours */
  --clr-bg: #EECFCE;
  --clr-topbar: #ECA089;
  --clr-topbar-btn-pressed: #FE347E;
  --clr-topbar-btn-pressed-txt: #FFF6FA;/**/
  --clr-topbar-btn-active: #e8af2d;/**/
  --clr-sitelbl: #9F7C3D;
  /* Windows */
  --clr-win-bg: #FFF7FA;/**/
  --clr-win-title: #EC7BAE;
  --clr-win-title-muted: #D3ACB6;
  --clr-win-x: #BE0B34;
  --clr-win-m: #e3a935;
  --clr-win-txt: #FFF8FB;/**/
  /* Effects */
  --fx-clr-lightsrc: #ffffff;
  --fx-pct-specular: 55%;/**/
  --fx-pct-diffuse: 55%;/**/
}
html[data-theme="aero"] {
  /* General */
  --clr-txt: #0B2436;
  --clr-txt-muted: #28433b;
  --clr-txt-focused: #006199;
  --clr-border: #9BA0AD;
  --clr-border-accent: #39C6FF;
  --clr-menubar: #8cd9cf;
  --clr-selection: #2681D9;
  --clr-panel: #B6F7FB;
  --clr-scroll-thumb: #88BAEF;
  --clr-link: #0000d0;
  /* Theme Colours */
  --clr-bg: #268DD1;
  --clr-topbar: #409A3C;
  --clr-topbar-btn-pressed: #C7DA32;
  --clr-topbar-btn-pressed-txt: #1F5D8A;
  --clr-topbar-btn-active: #e8af2d;/**/
  --clr-sitelbl: #DAFA40;
  /* Windows */
  --clr-win-bg: #E5F1FF;
  --clr-win-title: #0055EA;
  --clr-win-title-muted: #83A8E9;
  --clr-win-x: #E55325;
  --clr-win-m: #429BD6;
  --clr-win-txt: #ffffff;
  /* Effects */
  --fx-clr-lightsrc: #ffffff;
  --fx-pct-specular: 70%;
  --fx-pct-diffuse: 50%;
}
html[data-theme="ultradark"] {/*H==0, min S: 30%, max L: 70%*/
  /* General */
  --clr-txt: hsl(0 35% 70%);
  --clr-txt-muted: hsl(0 35% 50%);
  --clr-txt-focused: hsl(0 100% 70%);
  --clr-border: hsl(0 100% 11%);
  --clr-border-accent: hsl(0 100% 50%);
  --clr-menubar: hsl(0 80% 4%);
  --clr-selection: hsl(0 90% 18%);
  --clr-panel: hsl(0 90% 4%);
  --clr-scroll-thumb: hsl(0 100% 11%);
  --clr-link: hsl(0 100% 66%);
  /* Theme colours */
  --clr-bg: hsl(0 100% 0);
  --clr-topbar: hsl(0 100% 4%);
  --clr-topbar-btn-pressed: hsl(0 100% 28%);
  --clr-topbar-btn-pressed-txt: hsl(0 100% 0);
  --clr-topbar-btn-active: hsl(0 100% 45%);
  --clr-sitelbl: hsl(0 60% 40%);
  /* Windows */
  --clr-win-bg: hsl(0 35% 4%);
  --clr-win-title: hsl(0 100% 11%);
  --clr-win-title-muted: hsl(0 30% 7%);
  --clr-win-x: hsl(0 100% 22%);
  --clr-win-m: hsl(0 100% 9%);
  --clr-win-txt: hsl(0 30% 70%);
  /* Effects */
  --fx-clr-lightsrc: hsl(0 100% 70%);
  --fx-pct-specular: 15%;
  --fx-pct-diffuse: 0%;
}
html[data-theme="chatgpt"] {
  /* General */
  --clr-txt: #EAF2F7;
  --clr-txt-muted: #A7B6C3;
  --clr-txt-focused: #E6C06A;            /* warm brass pop */
  --clr-border: #233241;                 /* cooler, cleaner border */
  --clr-border-accent: #10A37F;          /* core verdigris */
  --clr-menubar: #0E1A22;                /* deep ink w/ green bias */
  --clr-selection: #0F3A33;              /* readable selection */
  --clr-panel: #0F1720;                  /* "ink parchment" panel */
  --clr-scroll-thumb: #1C2A37;
  --clr-link: #10A37F;
  /* Desktop / Topbar */
  --clr-bg: #0A0F14;                     /* ink */
  --clr-topbar: #0C171E;                 /* slightly greener ink */
  --clr-topbar-btn-pressed: #10A37F;     /* glow button */
  --clr-topbar-btn-pressed-txt: #07130F; /* keeps text crisp on green */
  --clr-topbar-btn-active: #E6C06A;      /* brass for active focus */
  --clr-sitelbl: #E6C06A;
  /* Windows */
  --clr-win-bg: #0E151C;                 /* content paper-on-ink */
  --clr-win-title: #0C5C49;              /* deep verdigris */
  --clr-win-title-muted: #163328;        /* aged green */
  --clr-win-x: #A83A3A;                  /* warm "lacquer" red */
  --clr-win-m: #C89B3C;                  /* antique gold */
  --clr-win-txt: #F3FFF9;
  /* Effects (neumorphism tuning) */
  --fx-clr-lightsrc: #D9FFF2;            /* sea-glass highlight */
  --fx-pct-specular: 18%;
  --fx-pct-diffuse: 20%;
}


* {box-sizing:border-box; font-family:inherit;}
html, body {height:100%}
body {
  margin: 0;
  display:grid; grid-template-rows:auto 1fr;
  background: var(--clr-bg); color: var(--clr-txt);
  font: 16px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.noscript {margin:1rem; padding:.75rem 1rem; border:1px dashed var(--clr-border); background:var(--clr-win-bg); border-radius:var(--radius)}
[hidden] {display:none !important;} /* Because sometimes a display:___ property overrides this */
::selection {background-color:var(--clr-selection);}
:focus-visible {outline:3px solid color-mix(in srgb-linear,var(--clr-border-accent), white 30%); outline-offset:2px; border-radius:var(--radius)}

div, section {
    scrollbar-color: var(--clr-scroll-thumb) color-mix(in srgb-linear, var(--clr-win-bg) 50%, var(--clr-panel) 50%);
}

button, input {
  border: 1px solid rgb(from var(--clr-border) r g b / 50%);
  border-radius: var(--radius);
  color: var(--clr-txt);
}
button[disabled], input[disabled] {
  color: var(--clr-txt-muted);
  /* Flatten it */
  background: none;
  box-shadow: none;
}

button {
  cursor: pointer;
  /* Neuphormism. TO DO: Support different heights of buttons (just scale px stuff) */
  /* Slight pop on surface */
  background: linear-gradient(135deg,
                              rgb(from var(--fx-clr-lightsrc) r g b / calc(0.8 * var(--fx-pct-specular))), /* Towards light */
                              rgb(0 0 0 / calc(0.2 * (100% - var(--fx-pct-diffuse))))); /* Other end of light */
  box-shadow: var(--fx-box-shadow-rise);
  transition: box-shadow var(--transition-duration-fx) ease, transform var(--transition-duration-fx) ease, filter var(--transition-duration-fx) ease;
}
button:not(:disabled):hover {
  background-image: none; /* Get rid of gradients. Apply images with !important */
  background-color: transparent; /*Loss of gradient like the button surface is repelled on hover*/
}
button:not(:disabled):active {
  background-image: none;
  background-color: var(--clr-btn-sel);
  box-shadow: var(--fx-box-shadow-sink); /* Push the button in */
  transform: translateY(2px);
}
button[aria-current="page"] {
  background-image: none;
  box-shadow: var(--fx-box-shadow-sink);
}

input {
  background-color: var(--fx-clr-carvedin);
  padding:.5rem .6rem;
  box-shadow: var(--fx-box-shadow-sink);
}

hr {
  color: var(--clr-border);
  border-color: var(--clr-border);
  background-color: var(--clr-border);
  background: var(--clr-border);
  border-top: var(--clr-border);
  border: 1px solid var(--clr-border);
  border-style: solid;
}

a:link {color:var(--clr-link);}
a:visited {color:color-mix(in srgb-linear, var(--clr-link), var(--clr-txt-muted) 50%);}

/* Top bar */
.topbar {
  display:flex; justify-content:space-between; align-items:stretch;
  gap:0.5rem; padding:0.45rem 0.5rem;
  position:sticky; top:0;
  background:var(--clr-topbar); border-bottom:1px solid var(--clr-border);
  overflow-x: auto;
  box-shadow: 0 4px 20px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse)));
}
.topbar div {
  display:flex; flex-wrap:nowrap;
  align-items: center;
  gap: 6px;
}

.topbar button, .topbar h3, .topbar span {user-select: none;}

.topbar button {
  padding:0.5rem 0.75rem; font-weight:700; white-space:nowrap;
  border-radius:999px; margin:0em 0.1em;
}
.topbar button[aria-pressed="true"] {
  background-color: var(--clr-topbar-btn-pressed);
  color: var(--clr-topbar-btn-pressed-txt);
}
.topbar button[aria-current="page"] {
  background-color: var(--clr-topbar-btn-active);
  color: var(--clr-topbar-btn-pressed-txt);
}

.topbar .tb-app {height:85%;}

.topbar .secret-btn {
  align-self: stretch;
  margin:0; margin-right:0.5em; border-radius:8px;

  background-image: url('/res/img/logo.png') !important;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  aspect-ratio: 1 / 1;
}
.topbar .secret-btn:hover {border: 1px solid var(--clr-border-accent);}
.topbar .secret-btn:not([aria-current="page"]):not(:active) {
  box-shadow: 5px 5px 10px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
             -5px -5px 10px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));;
}

.topbar h3 {
  color: var(--clr-sitelbl);
  margin: 0;
}

.topbar .tb-apps {overflow: visible;} /*Needed for shadows*/

.topbar .tb-winmgmt-toggle {
  font-size: 64%;
  color: var(--clr-sitelbl);
}

.clock {
  display:inline-grid; justify-items:center; align-items:center;
  text-align:center; line-height:1.1; white-space:nowrap;
  padding:0.35rem 0.6rem; /*TO DO: Add pop or border? 16px border radius if so*/
}
.clock .clk-time {font-weight:700; letter-spacing: 0.2px;}
.clock .clk-date {font-size: .85em; margin-top: 0.15rem; color:var(--clr-txt-muted);}

#desktop {
  position: relative;
  min-height: 0;
  overflow: auto;
}

.window {
  position:absolute; display:grid; grid-template-rows:var(--title-h) 1fr; overflow: hidden;
  width:500px; height:400px; min-width:240px; min-height:160px; /*Should get overridden on success*/
  border:1px solid var(--clr-border); border-radius:var(--radius); box-shadow: 4px 4px 24px #00000052;
}
.window[aria-selected="false"] .titlebar {background:var(--clr-win-title-muted); color:var(--clr-txt-muted);}
.window[aria-selected="true"] .titlebar {background:var(--clr-win-title); color: var(--clr-win-txt);}
.window .titlebar {
  box-shadow: inset -1px -1px 2px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
              inset 1px 1px 2px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));
}
.window.maximised {
    left:0 !important; top:0 !important; width:100% !important; height:100% !important;
    border-radius: 0; box-shadow: none !important;
    resize: none !important;
}

.window .titlebar {
  display:grid; grid-template-columns:1fr auto; align-items:center;
  height:var(--title-h); padding:0 0.5rem 0 0.75rem;
  background:var(--clr-win-title); color:var(--clr-win-txt); border-bottom:1px solid var(--clr-border);
  user-select:none; cursor:grab;
}

.window .titlebar h3 {margin:0; font-size:14px; letter-spacing:0.2px}

.window .titlebar .winbtns {display:inline-flex; gap:.35rem}

.window .titlebar .winbtn {
  width:28px; height:24px; display:grid; place-items:center;
  color:var(--clr-win-txt); border: none;
}
.window .winbtn[data-role="M"] {background-color:var(--clr-win-m);}
.window .winbtn[data-role="X"] {background-color:var(--clr-win-x);}
.window .winbtn:hover {background:rgb(from var(--clr-win-txt) r g b / 15%);}

.window .content {
  padding:0; margin:0; overflow:auto;
  background:var(--clr-win-bg); color:var(--clr-txt);
}

.window .content p {margin:0.25rem 0 0.75rem; color:var(--clr-txt-muted)}

/* Menubar */
.menubar {
  display: flex;
  gap: 0;
  background: var(--clr-menubar);
  align-items: stretch;
  border: none;
}
.menubar button {background: transparent; border-radius:0; border:none; outline:none; box-shadow:none;}
.menubar .mb-btn {height: 100%;}
.menubar .mb-dropbtn {
  text-align: left;
  padding: 0.25rem 0.5rem;
}
.menubar .mb-dropbtn:hover {
  background-color: rgb(from var(--clr-selection) r g b / 33%);
  box-shadow: inset 4px 4px 4px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));
}
.menubar .mb-dropbtn:active {transform:translateY(0);}
.menubar .mb-btn:hover, .mb-dropdown:hover .mb-btn {
  background: var(--clr-selection);
}
.menubar .mb-dropdown:hover .mb-btn {
  /* Rise it up */
  border-radius: 4px;
  box-shadow: inset -1px 0px 2px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
              inset 2px 2px 2px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular)),
                    -1px -1px 2px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular)),
                    1px 0px 2px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse)));
}
.menubar .mb-droplist {
  display:none; flex-direction:column;
  position: absolute;
  text-align: left;
  min-width: 150px;
  padding:0; margin:0; overflow:auto; color:var(--clr-txt);
  border-radius: 4px;
  background: rgb(from var(--clr-win-bg) r g b / 25%);
  backdrop-filter: blur(8px);
  box-shadow: inset 1px 1px 4px 2px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular)),
              inset -1px -1px 2px 1px rgb(from var(--clr-emerald) r g b / 10%);
}
.menubar .mb-dropdown:hover .mb-droplist {display:flex;}

/* Panes / panels */
.pane-sec {
  border:1px solid var(--clr-border); border-radius:10px;
  padding:0.6rem; margin:0 5%;
  /* Slightly rise from background */
  box-shadow: 1px 1px 3px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
             -1px -1px 3px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));
}
.pane-sec legend {font-weight: 700}
.panel {background-color:var(--clr-panel);}

/* Soft transitions for theme switches */
body, input, .topbar, .topbar button, .window, .panel, .titlebar, .content, .content > *, .content aside, ::selection, hr, .window .titlebar * {
  transition:
    background-color var(--transition-duration) ease,
    color var(--transition-duration) ease,
    border-color var(--transition-duration) ease,
    box-shadow var(--transition-duration-fx) ease,
    transform var(--transition-duration-fx) ease, filter var(--transition-duration-fx) ease; /* Might cause issues if a transformation with no transition is needed for these */
}

/* Tab Container */
.tab-container {
  display: flex; flex-wrap: wrap;
  align-content: flex-start; align-items: flex-start;
  background-color: var(--clr-panel);
  height: 100%;
}

.tab-container > input[type="radio"] {
  position: absolute;
  opacity: 0;
  padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  pointer-events: none;
}

.tab-container > label {
  order: 1;
  cursor: pointer;
  user-select: none;

  padding: 0.33rem 0.66rem;
  margin: 0.4rem 0.25rem;
  border-radius: var(--radius);
  box-shadow: var(--fx-box-shadow-rise);
}

.tab-container > input[type="radio"]:checked + label {
  box-shadow: var(--fx-box-shadow-sink);
  color: var(--clr-txt-focused);
  background-color: var(--fx-clr-carvedin);
}

.tab-container > .tab-content {
  order: 2;
  flex: 0 0 100%;
  min-width: 100%;
  display: none;
}

/* Show active panel */
.tab-container > input[type="radio"]:checked + label + .tab-content {
  display: block;
  border-top: 1px solid var(--clr-border);
}