:root {
  /* General Variables */
  --radius:12px; --title-h:34px; --transition-duration: 1.0s;
  /* General Colours */
  --clr-gold: #e8af2d;
  --clr-gold-light: #edc25f;
  --clr-gold-light-sat: #ffca4d;
  --clr-matcha: #74a662;
  --clr-emerald: #00674f;
  /* General effects */
  --fx-box-shadow-rise:
    2px 2px 4px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
    -2px -2px 4px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));
  --fx-box-shadow-sink:
    inset 2px 2px 4px rgb(0 0 0 / calc(100% - var(--fx-pct-diffuse))),
    inset -2px -2px 4px rgb(from var(--fx-clr-lightsrc) r g b / var(--fx-pct-specular));
  --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*/
  /* Topbar */
  --clr-bg: #141210;                 /*Desktop colour*/
  --clr-topbar: #1B221D;             /*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-txt-topbar: #EDE7D9;         /*Topbar's controls' text color*/
  --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: 10%;
  --fx-pct-diffuse: 30%;
}
html[data-theme="light"] {
  /* General */
  --clr-txt: #000000;
  --clr-txt-muted: #6b6157;
  --clr-txt-focused: #8e530b;
  --clr-border: #ADA09B;
  --clr-border-accent: #2C7A67;
  --clr-menubar: #E8DFD2;
  --clr-selection: #edc25f;
  --clr-panel: #f5ede4;
  /* Light Theme Colours */
  --clr-bg: #F7ECDB;
  --clr-topbar: #b0c69e;
  --clr-topbar-btn-pressed: #366343;
  --clr-topbar-btn-pressed-txt: #EDE8D0;
  --clr-txt-topbar: #332421;
  --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: 50%;
  --fx-pct-diffuse: 70%;
}

* {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: 15px/1.45 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)}

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

button {
  /* 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);
}
button:not(:disabled):hover {
  transition: none;
  background-image: none; /* Get rid of gradients. Apply images with !important */
  background-color: rgb(from var(--clr-txt) r g b / 15%); /*Loss of gradient like the button surface is repelled on hover*/
}
button:not(:disabled):active {
  background-image: none;
  background-color: color-mix(in srgb-linear, rgb(from var(--clr-txt) r g b / 10%), var(--clr-border-accent) 10%);
  box-shadow: none; /* Push the button in */
}
button[aria-current="page"] {
  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-selection);}
a:visited {color:color-mix(in srgb-linear, var(--clr-selection), 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); color:var(--clr-txt-topbar);
  overflow-x: auto;
  box-shadow: 0 2px 6px 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; cursor:pointer; 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-gold);
  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;
}
.clock .clk-time {font-weight:700; letter-spacing: 0.2px;}
.clock .clk-date {font-size: .85em; color: var(--clr-txt-muted); margin-top: 0.15rem;}

#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 12px rgba(0,0,0,0.4);
}
.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); cursor:pointer; 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-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);
  -webkit-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 */
.pane-sec {
  border:1px solid var(--clr-border); border-radius:10px;
  padding: 0.6rem;
  /* 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}

/* Soft transitions for theme switches */
body, input, .topbar, .window, .titlebar, .content, .content > *, .content aside, ::selection, hr, .topbar .tb-app, .topbar .secret-btn, .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) ease;
}

/* 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);
}