/* The sidebar: a dark bar of pages with icons on a black page, the pill on the page chosen and the name beside a
   folded icon. */
:root {
  --page: #000000;          /* the page */
  --bar: #0f1013;           /* the bar */
  --line: #1f2127;          /* its edge, and the guide of the pages under Projects */
  --text: #9a9ca6;          /* a page's name */
  --text-on: #f4f5f8;       /* the page chosen, and the one pointed at */
  --pill: #22242b;          /* the pill under the page chosen */
  --accent: #8b9bff;        /* the little bar on the pill's edge */
  --open: 248px;            /* the bar's width, open and folded */
  --shut: 66px;
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Atkinson Hyperlegible Next Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.sb-wrap {
  position: relative;
}

.sb {
  position: relative;
  width: var(--open);
  padding: 12px;
  overflow: hidden;
  background: var(--bar);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.sb__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 10px;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.sb__toggle svg,
.sb__item svg {
  width: 20px;
  height: 20px;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb__body {
  position: relative;
}

.sb__list,
.sb__sub ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a page: its icon in a box as wide as the folded bar's inside, then its name */
.sb__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.sb__item[aria-current='page'],
.sb__item.is-within {
  color: var(--text-on);
}

@media (hover: hover) {
  .sb__item:hover,
  .sb__toggle:hover {
    color: var(--text-on);
  }

  .sb__toggle:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}

.sb__item:focus,
.sb__toggle:focus {
  outline: none;
}

.sb__item:focus-visible,
.sb__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sb__label {
  display: block;
}

.sb__item .i-day {
  fill: currentColor;
  stroke: none;
}

.sb__item .i-knob {
  stroke-width: 2.4;
}

.sb__item .sb__chev {
  margin-left: auto;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* the pages under Projects, behind a guide line that comes down from its icon */
.sb__sub {
  position: relative;
  height: 0;
  overflow: hidden;
}

.sb__sub ul {
  padding: 2px 0 4px;
}

.sb__item--child {
  height: 34px;
  padding-left: 42px;
  font-size: 14px;
}

.sb__guide {
  position: absolute;
  left: 19.5px;
  top: 0;
  bottom: 12px;
  width: 1px;
  background: var(--line);
  transform-origin: 50% 0;
}

/* the pill under the page chosen, with a small light bar on its left edge */
.sb__pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  background: var(--pill);
  border-radius: 10px;
  pointer-events: none;
}

.sb__pill::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.sb__list {
  z-index: 1;
}

/* the name beside a folded icon */
.sb__tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 7px 11px;
  color: var(--text-on);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #2a2c34;
  border-radius: 8px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.sb__tip::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  background: inherit;
  border-radius: 2px;
  transform: rotate(45deg);
}