:root {
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-sans: system-ui, 'Noto Sans', sans-serif, var(--font-emoji);
  --font-mono: ui-monospace, 'Courier New', monospace, var(--font-emoji);
  --header-height: 64px;
  --sidenav-width: 200px;
  --article-width: 300px;
  --border: 2px solid var(--bg1);
  --bg0: #fff;
  --bg1: #ddd;
  --bg2: #ccc;
  --fg0: #222;
  --fg1: #888;
  --bg-hl0: #077;
  --bg-hl1: #099;
  --fg-hl: white;
  --bg: var(--bg0);
  --fg: var(--fg0);
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg0: #222;
    --bg1: #444;
    --bg2: #555;
    --fg0: #ddd;
  }
}

:focus {
  outline: 2px solid orange;
}

::selection {
  --bg: var(--bg-hl0);
  --fg: var(--fg-hl);
  background-color: var(--bg);
  color: var(--fg);
}

:is([aria-current]:not([aria-current="false"])) {
  --bg: var(--bg-hl0);
  --fg: var(--fg-hl);
  background-color: var(--bg);
  color: var(--fg);

  &:hover {
    --bg: var(--bg-hl1);
  }

  & .private-use,
  & .surrogate,
  & .unassigned {
    --fg: var(--fg-hl);
  }
}

.invisible {
  display: none;
}

#chartable {
  margin: 0;

  &>div {
    height: 100vh;
    display: grid;
    grid-template-columns: var(--sidenav-width) 1fr var(--article-width);
    grid-template-rows: 1fr;
  }
}

nav {
  border-right: var(--border);
  overflow-y: auto;
  overflow-x: hidden;

  & header {
    width: var(--sidenav-width);
  }

  & button {
    flex: 1;
    margin: 0px;
  }

  & li:hover {
    --bg: var(--bg2);
    background-color: var(--bg);
  }

  & a {
    display: block;
    padding: 4px 8px;
  }
}

main {
  overflow-y: auto;
  min-height: 100vh;

  & header {
    width: calc(100% - var(--sidenav-width) - var(--article-width));
  }
}

#codepoints-grid {
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.tile {
  text-align: center;
  font-size: 12px;

  & div {
    margin-bottom: 1em;
  }
}

.character {
  font-size: 1.5em;
}

.label {
  border: 1px dashed var(--fg);
  font-size: 1.25em;
  padding: 1ex;
  display: inline-block;
  /*font-family: var(--font-mono);*/
}

.private-use,
.surrogate,
.unassigned {
  font-size: 1.5em;
  --fg: var(--fg1);
  color: var(--fg);
}

article {
  border-left: var(--border);
  overflow-y: auto;

  & header {
    width: var(--article-width);
  }
}

header {
  --bg: var(--bg1);
  background-color: var(--bg);
  position: fixed;
  top: 0;
  height: var(--header-height);
  display: flex;

  &+* {
    margin-top: var(--header-height);
  }
}

footer {
  --bg: var(--bg1);
  background-color: var(--bg);
  margin: 12px;
  margin-top: 100vh;
  padding: 6px;
}

menu {
  list-style-type: none;
  padding: 0;
}

ol {
  list-style-type: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--fg);

  &.external {
    --fg: var(--bg-hl1);
    text-decoration: underline;
  }
}

button {
  --bg: var(--bg1);
  background-color: var(--bg);
  color: var(--fg);
  border: none;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    --bg: var(--bg2);
  }
}

code {
  font-family: var(--font-mono);
}