/* The layered paper sidebar: a sidebar alone on a white page, made of five sheets of paper laid one on the other.
   The four top sheets are SVG paths with a hole cut round the current page, rebuilt by the script on every frame;
   the colours of the sheets, from the top one down, are here. */
:root {
  --page: #ffffff;                  /* the page */
  --sheet-0: #faf6f0;               /* the top sheet: the face of the sidebar */
  --sheet-1: #f6dccd;               /* the second sheet, seen round the edge of the well */
  --sheet-2: #efb69b;               /* the third */
  --sheet-3: #e38766;               /* the fourth */
  --sheet-4: #bc4c30;               /* the bottom sheet, where the current page sits */
  --ink: #2b211c;                   /* the names and icons */
  --ink-soft: #8b7c71;              /* the group titles and the icons at rest */
  --on-deep: #fff6ef;               /* the name of the current page, on the bottom sheet */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 32px 16px;
}

/* ---------------------------------------------------------------- the sidebar */
.side {
  position: relative;
  width: 252px;
  padding: 14px 12px 14px;
  border-radius: 20px;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(90, 50, 20, 0.08),
    0 2px 3px rgba(90, 50, 20, 0.06),
    0 22px 40px -22px rgba(90, 40, 10, 0.4);
  -webkit-tap-highlight-color: transparent;
}

/* the sheets, under everything, cut at the sidebar's round corners */
.paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  clip-path: inset(0 round 20px);
}

.paper .paper__base {
  fill: var(--sheet-4);
}

/* inside the masks: white keeps the sheet, black cuts it */
.paper__full {
  fill: #ffffff;
}

.paper__cut {
  fill: #000000;
}

.paper__sheet--0 {
  fill: var(--sheet-0);
}

.paper__sheet--1 {
  fill: var(--sheet-1);
}

.paper__sheet--2 {
  fill: var(--sheet-2);
}

.paper__sheet--3 {
  fill: var(--sheet-3);
}

/* ---------------------------------------------------------------- the groups and the links */
.group {
  margin: 0;
  padding: 6px 12px 8px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 14px;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 88, 'opsz' 12;
  user-select: none;
  -webkit-user-select: none;
}

.list + .group {
  margin-top: 14px;
}

.list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.item__icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s ease;
}

.item__name {
  flex: 1;
  font-weight: 460;
  font-variation-settings: 'wdth' 96, 'opsz' 15;
  white-space: nowrap;
  transition: color 0.35s ease, font-weight 0.35s ease;
}

.item__count {
  flex: none;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(188, 76, 48, 0.12);
  color: var(--sheet-4);
  font-size: 11px;
  font-weight: 640;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* the current page sits at the bottom of the well: its name turns pale, the script says when the well is there */
.item.is-deep .item__name {
  color: var(--on-deep);
  font-weight: 600;
}

.item.is-deep .item__icon {
  stroke: var(--on-deep);
}

.item.is-deep .item__count {
  background: rgba(255, 246, 239, 0.22);
  color: var(--on-deep);
}

@media (hover: hover) and (pointer: fine) {
  .item:not(.is-deep):hover .item__icon {
    stroke: var(--ink);
  }
}

/* the focus, from the keyboard only: a thin ring just outside the well */
.item::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  box-shadow: 0 0 0 1.5px var(--ink);
  opacity: 0;
  pointer-events: none;
}

.item:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .item__name,
  .item__icon,
  .item__count {
    transition-duration: 0.2s;
  }
}