/* ============================================================
   THE SIDEBAR — one component, two tools.

   Drop and Hedge each own the left edge of their window, and both had
   arrived at the same thing by different roads: a brand line with a search
   that takes it over, a block of verbs, a scrolling list under a quiet
   heading, and a footer holding the account. Same 34px rows, same 10px
   gutter, same 28px search — written twice, in two files, and drifting.
   By the time this was pulled out the two were a pixel apart on the
   section heading and nowhere else, which is the worst kind of difference:
   too small to see and too real to be an accident.

   WHAT LIVES HERE is everything that would have to change in both places
   at once. The metrics, the states, the rhythm.

   WHAT DOES NOT is where the thing sits. Drop's is fixed to the viewport
   and Hedge's is a sticky column inside a scrolling deck of five — that is
   the page's business, not the sidebar's, and it stays in wall.css and
   hedge.css respectively. Each app keeps its own root class for that job
   and adds `sb` for this one.

   THE GUTTER IS SAID ONCE. The root carries 10px of horizontal padding and
   every child inherits the inset by having none of its own. Hedge used to
   repeat `padding: 0 10px` on four separate children, which is how its
   section heading ended up on 21 while its brand sat on 20.

   Behaviour hooks are data attributes — [data-day], [data-space],
   [data-nav] — so these class names are free to be about appearance only.
   ============================================================ */

.sb {
  display: flex; flex-direction: column;
  gap: 10px;
  /* THE INSET, all four numbers, for both tools. 10 across: 10 here plus 10
     on a row is the 20px every name lines up on. 14 at the top: the air the
     brand line opens with.

     This carried two knobs for a while — Hedge overrode the top so its
     header would take the same band as the four columns beside it. That
     band turned out not to exist: on the desk only two headers are visible
     and they are 51px and 42px, the sheet has none, and the two labels were
     already two pixels out of register with each other. So the override was
     defending an alignment that was never there, and the price was the one
     that is: Hedge's brand sat 4.5px higher than Drop's, which is small
     enough to look like a mistake and large enough to see. */
  padding: 14px 10px 0;
}

/* ---- the brand line ----------------------------------------------------
   The name of the tool in its own corner, and the search that replaces it.
   Both are in the header; the field is hidden until asked for, and the
   brand is hidden while it is open — one row, two states, never both. */
.sb-top {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  /* 10 on the left so the brand lands on the same 20px as every row below
     it; 6 on the right so the 28px search button's own box reaches 16 from
     the edge, which is where a control belongs against a rule. */
  padding: 2px 6px 2px 10px;
}
.sb-brand {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px;
  color: var(--t-primary);
}
/* [hidden] is an attribute and `display: flex` above is a declaration, so
   the flip has to be said at this weight or the brand stays put behind the
   search field. It is said here rather than in either app because both
   apps hide it. */
.sb-brand[hidden] { display: none; }
.sb-mark { width: 17px; height: 17px; flex: none; }
.sb-brand-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sb-input {
  flex: 1; min-width: 0;
  height: 28px; padding: 0 10px;
  border-radius: 8px;
  background: rgba(var(--tone), 0.08);
  font-family: var(--sans); font-size: 13px;
  color: var(--t-primary);
}
.sb-input::placeholder { color: var(--t-dim); }
.sb-input[hidden] { display: none; }

.sb-find {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--t-second);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sb-find:hover { color: var(--t-primary); background: rgba(var(--tone), 0.07); }
.sb-find svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- a block of rows that is not the list -----------------------------
   Drop's two make-something verbs, Hedge's three views. Fixed, few, and
   above the scroll, because they are not part of what you are scrolling. */
.sb-group { flex: none; display: flex; flex-direction: column; gap: 2px; }

/* ---- the row ----------------------------------------------------------
   The unit both sidebars are made of, and the reason this file exists.
   A space, a session, a view, an account: 34px, one icon, one name, and
   optionally a figure at the far end. */
.sb-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 9px;
  background: none;
  font-family: var(--sans); font-size: 14px;
  text-align: left;
  color: var(--t-second);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sb-item:hover { background: rgba(var(--tone), 0.07); color: var(--t-primary); }
.sb-item[aria-current="true"] { background: rgba(var(--tone), 0.12); color: var(--t-primary); }
/* These rows have a fill of their own, so a ring standing off one is a
   second claim about what is selected. It is said from the inside, and not
   at all on the row that is already current. */
.sb-item:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.4); }
.sb-item[aria-current="true"]:focus-visible { box-shadow: none; }

.sb-ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.sb-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A value at the end of a row — Hedge's day score. Part of the component
   because "row with a number on the right" is a shape a sidebar has, not a
   thing one app invented; the MEANING of the number, and its colour, stay
   with the app that knows what it counts. */
.sb-fig {
  flex: none;
  font-family: var(--sans); font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--t-dim);
}

/* ---- the list ---------------------------------------------------------- */
.sb-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 14px;
  /* the scrollbar arrives on hover: a permanent one in a 254px column is a
     line of furniture competing with the rules that mean something */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sb-list:hover { scrollbar-color: var(--hair) transparent; }
.sb-list::-webkit-scrollbar { width: 8px; }
.sb-list::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}
.sb-list:hover::-webkit-scrollbar-thumb { background: var(--hair); }

.sb-sec { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
/* The heading over a run of rows. Not pressable here — Drop's is, and adds
   its own button inside. Its left padding is the row's, so the heading and
   the names under it share one edge. */
.sb-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 4px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  color: var(--t-dim);
  user-select: none; -webkit-user-select: none;
}
.sb-head-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A RUN OF ROWS the app renders into. Drop appends its spaces straight into
   the section, so the section's own gap spaces them; Hedge draws its
   sessions into a container it owns and redraws on every press, so the run
   needs the gap itself or the two columns keep rows at a different pitch —
   34 against 36, which is exactly what this file exists to prevent. */
.sb-rows { display: flex; flex-direction: column; gap: 2px; }

/* ---- the footer -------------------------------------------------------
   The account, and anything else that is about the tool rather than about
   what is in it. Held down by the list above taking the slack. */
.sb-foot {
  flex: none;
  border-top: 1px solid var(--hair-soft);
  padding: 8px 0 12px;
}
.sb-foot .sb-item { color: var(--t-dim); }
.sb-foot .sb-item:hover { color: var(--t-primary); }