:root {
  --bg-black: #1a1a1a;
  --bg-black-0f: #0f0f0f;
  --bg-black-2a: #2a2a2a;
  --bg-black-33: #333;
  --bg-black-3a: #3a3a3a;
  --bg-black-44: #444;
  --bg-white: #ffffff;
  --bg-blue: #0000ff;
  --bg-pink: #ff00DD;
  --bg-red: #ff0000;
  --bg-msgrey: #c6c6c6;
  --bg-ms-button-idle: #c0c0c0;
  --bg-msteal: teal;
  --bg-greygreen: rgb(112, 121, 110);
  --bg-yellow: yellow;

  --fg-grey-aa: #aaa;
  --fg-white: #fafafa;
  --fg-white-on-blue: #fafafa;
  --fg-white-on-red: #fafafa;
  --fg-white-on-grey: #fafafa;
  --fg-white-cc: #ccc;
  --fg-white-ee: #eee;
  --fg-black-on-pink: #000;
  --fg-peach: #ffaaaa;

  --txt-shadow-blue: 2px 2px #0000ff;
  --txt-shadow-red: 2px 2px #ff0000;

  --border-inset-grey: 3px inset #c6c6c6;
  --border-outset-grey: 3px outset #c6c6c6;
  --border-solid-grey: 1px solid #333;
  --border-solid-white: white 1px solid;
  --border-white-dash: white 1px dashed;
  --border-color-yellow: yellow;

  --border-outset-ms-color: #feffff #6c6c6c #6c6c6c #feffff;
  --border-inset-ms-color: #727272 #feffff #feffff #727272;

  --filter-ms-button-border:
    drop-shadow(1px 0 0 black)
    drop-shadow(-1px 0 0 black)
    drop-shadow(0 1px 0 black)
    drop-shadow(0 -1px 0 black);

  @media (prefers-color-scheme: light) {
    --bg-black: #fafafa;
    --bg-black-0f: #e0e0e0;
    --bg-black-2a: #c5c5c5;
    --bg-black-33: #ccc;
    --bg-black-3a: #b5b5b5;
    --bg-black-44: #bbb;

    --bg-pink: #ffAAFF;
    --bg-blue: teal;
    --bg-red: #ffff00;
    --bg-greygreen: #ffAAFF;

    --fg-grey-aa: #555;
    --fg-white: #0000ff;
    --fg-white-on-blue: #fafafa;
    --fg-white-on-red: #0000ff;
    --fg-white-on-grey: #fafafa;
    --fg-white-cc: #333;
    --fg-white-ee: #11a;

    --txt-shadow-blue: 1px 1px #ff66ff;
    --txt-shadow-red: 1px 1px #ffff00;

    --border-solid-grey: 1px solid #ccc;
    --border-solid-white: 1px solid blue;
    --border-white-dash: #0000ff 1px dashed;
  }

  --img-scroll-up-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=');
  --img-scroll-down-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=');
  --img-scroll-left-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC');
  --img-scroll-right-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
  --img-scroll-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
  --img-scroll-bg-active: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==');
  --img-scroll-resizer: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==');

  --boxshadow-ms-borderwell: -1px -1px 0 #868a8e, -1px 0 0 #868a8e, 0 -1px 0 0 #868a8e, 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white;
  --boxshadow-ms-outset: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  --boxshadow-ms-inset: inset 1px 1px 0 0 #868a8e, 1px 1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black;

  --fontfamily-default: Menlo, monospace;

  --fontsize-body-s: 9px;
  --fontsize-body-m: 10.8px;
  --fontsize-body-l: 13px;
  --fontsize-math-s: 14px;
  --fontsize-math-m: 16px;
  --fontsize-h1: 26px;
  --fontsize-h2: 19.5px;
  --fontsize-h3: 15.21px;
  --fontsize-h4: 13px;
  --fontsize-h5: 10.79px;
  --fontsize-h6: 9px;

  --fontsize-dt: 13px;
  --hr-margin-block: 6.5px;

  --transition-prop-time: 0.2s;
  --transition-prop-ease: steps(5, end);
  --transition-rule-opacity: opacity var(--transition-prop-time) var(--transition-prop-ease);
}


html, body {
  background: #c0c0c0;
}

body {
  margin: 0;
  color: var(--fg-white);
  font-family: var(--fontfamily-default);
  height: 100%;
  max-height: 100dvh;
  background: #c0c0c0;
  padding: 4px;

  display: grid;
  grid-gap: 2px;
}

.header {
  --container-padding: 8px 8px 8px 13px;
  &:is(header) { padding: var(--container-padding); }

  background: var(--bg-blue);

  & > h1[slot=title] {
    font-size: 12px;
    color: var(--fg-white-on-blue);
    margin: 0;
    line-height: 1;
    /* Note this is only here to avoid layout shift
     * and if at any point the height of the content
     * on the right side of the menu changes size
     * this should be updated */
    height: 21px;
    align-content: center;
  }
}

.sidebar, .config-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.config, .navigation {
  height: 100%;
}


.layout-wide {
  width: 100%;

  .header {
    grid-column: span 3;
  }

  .main-content {
    min-height: 0;
  }

  .sidebar, .config-container {
    overflow-y: auto;
  }

  .config-container {
    border-left: var(--border-solid-grey);
    border-left-width: 1px;
  }
}

.layout-narrow {
  .main-content {
    width: 100%;
    order: 1;
  }

  .sidebar, .config-container {
    display: none;
    overflow-y: auto;
    order: 2;
    border-top: var(--border-solid-grey);
    border-top-width: 1px;
    height: 50dvh;
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
  }
}