/* The slinky sidebar: the light sidebar of a small studio's project app, alone on a white page, with a steel toy spring
   in the column on its left. */
:root {
  --page: #ffffff;          /* the page */
  --bar: #f7f7f5;           /* the bar */
  --edge: #e6e5e0;          /* its edge and the line under the studio */
  --ink: #1b1c20;           /* the page chosen, and a row pointed at */
  --muted: #696a71;         /* the other rows */
  --quiet: #9a9aa0;         /* the title over the projects */
  --hover: #eeede9;         /* the ground of a row pointed at */
  --count: #c8553d;         /* the count of new messages */
  --rail: #e2e1dc;          /* the groove the spring stands in */
  --steel-dark: #262a31;    /* the steel of the spring, in the shade */
  --steel: #8b939d;         /* in the half light */
  --steel-light: #eef1f4;   /* in the light */
  --shadow: #2b2a35;        /* the shadow it casts on the bar */
  --focus: #3c5bd6;         /* the ring of the keyboard focus */
  --open: 252px;            /* the bar's width */
  --column: 46px;           /* the column the spring walks in */
}

* {
  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(--ink);
  font-family: 'Onest Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.sl-wrap {
  position: relative;
  width: var(--open);
}

.sl {
  position: relative;
  width: var(--open);
  padding: 10px;
  background: var(--bar);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px var(--edge),
    0 1px 2px rgba(30, 30, 40, 0.05),
    0 26px 50px -30px rgba(30, 30, 40, 0.32);
}

/* ---------------------------------------------------------------- the studio */
.sl__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--edge);
}

.sl__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--bar);
}

.sl__mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sl__studio {
  font-size: 14.5px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- the rows */
.sl__body {
  position: relative;
}

/* the groove down the column, and the canvas the spring is drawn on (as wide as the column, so it never reaches a name) */
.sl__rail {
  position: absolute;
  left: 6px;
  top: 0;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--rail);
  box-shadow: inset 1px 0 0 rgba(30, 30, 40, 0.07), 1px 0 0 rgba(255, 255, 255, 0.9);
}

.sl__spring {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--column);
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

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

.sl__list--foot {
  margin-top: 10px;
  padding-top: 10px;
}

/* the line over Archive starts after the column, where the names start */
.sl__list--foot::before {
  content: '';
  position: absolute;
  left: var(--column);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--edge);
}

.sl__title {
  margin: 14px 0 4px;
  padding-left: calc(var(--column) + 8px);
  color: var(--quiet);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.02em;
  line-height: 18px;
}

.sl__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 10px 0 calc(var(--column) + 8px);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 480;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 11px;
  isolation: isolate;
  transition: color 0.25s ease, font-weight 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* the ground of a row pointed at starts after the column, so it never sits under the spring */
.sl__item::before {
  content: '';
  position: absolute;
  inset: 0 0 0 var(--column);
  border-radius: 11px;
  background: var(--hover);
  opacity: 0;
  transform: scaleX(0.96);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  z-index: -1;
}

.sl__item[aria-current='page'] {
  color: var(--ink);
  font-weight: 620;
}

@media (hover: hover) {
  .sl__item:hover {
    color: var(--ink);
  }

  .sl__item:not([aria-current='page']):hover::before {
    opacity: 1;
    transform: none;
  }
}

.sl__icon {
  width: 19px;
  height: 19px;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.sl__item:active .sl__icon {
  transform: scale(0.9);
}

.sl__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--count);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.sl__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sl__item:focus {
  outline: none;
}

/* the ring of the keyboard focus goes round the row's name, not round the spring */
.sl__item:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0 0 0 var(--column);
  border-radius: 11px;
  box-shadow: inset 0 0 0 2px var(--focus);
  pointer-events: none;
}