/* THE LEFT RAIL - the drawing toolbar.
 *
 * One file, because the rail was previously described in four: its box in style.css, its two-part
 * slot 1,400 lines further down the same file, a set of colour overrides in theme-tv.css and a
 * phone variant in mobile.css. Four places is how a column ends up with a 30px button inside a
 * 41px slot inside a 46px rail - three numbers, none of them anyone's decision.
 *
 * THE GEOMETRY IS MEASURED, not chosen. Every number below was read off the reference terminal's
 * own running toolbar with the browser, not remembered from looking at it:
 *
 *   52          the column, plus a 1px rule. Not 46, which is what happens when margins are put
 *               inside the width instead of around the button.
 *   38          the row pitch. Eight groups fit in 304px.
 *   34 x 34     the ground a button paints when it is hovered or armed, centred in the 52, with
 *               a 6px radius. The GLYPH is 28, which leaves 3px of air on each side - that ratio
 *               is what makes their rail read as engraved rather than as a row of chips.
 *   11 x 34     the strip on the right edge that opens the group. It overlaps the ground by two
 *               pixels and is rounded on its left corners only, because it is flush to the rule.
 *
 * The COLOURS are tokens, not literals. The reference's dark toolbar runs #0F0F0F ground, #2E2E2E
 * hover, #3D3D3D armed, #DBDBDB glyph, and the point of that ramp is the RELATIONSHIP: two steps
 * up from the ground for the armed state, one for hover, and no accent anywhere - a drawing rail
 * that tints its armed tool blue reads as a website's navigation. --sel and --line-2 are those
 * two steps in every appearance this app wears, so the ramp survives a theme change instead of
 * being re-stated per theme.
 */

.rail {
  flex: 0 0 auto;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* A ROW. The slot is the full width of the column so that the strip can sit on its edge; the
   plain buttons - search, the foot switches - occupy the same row box so the whole column keeps
   one rhythm whether or not a button has a set behind it. */
.rail .slot,
.rail > button.tool {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail button.tool {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  /* FULL INK AT REST. The reference's own toolbar draws its idle glyph at #DBDBDB - the same ink
     as body text - and spends the hover on the GROUND alone. A column of dimmed glyphs that
     brighten under the pointer reads as disabled until you touch it. */
  color: var(--ink);
  cursor: pointer;
  /* 60ms, which is the reference's own figure. Slower and the column feels like it is thinking. */
  transition: background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.rail button.tool svg { display: block; }
.rail button.tool:hover,
.rail .slot:hover > button.tool { background: var(--sel); color: var(--ink); }

/* ARMED. Two steps up from the ground and the glyph at full ink - no accent colour: the tool that
   is armed is the one the pointer is about to draw with, and that is a state, not a link. The
   plate carries an inset hairline ring: a flat square of slightly-lighter grey floating in the
   column read as a smudge (the owner's "gray squares with round edges look glitchy") - the ring
   is what makes it a key-cap, an object with an edge, and it costs nothing on any theme. */
.rail button.tool.on,
.rail .slot:hover > button.tool.on {
  background: var(--line-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Nothing to act on - Remove drawings on a chart with none. Visible and dead beats hidden. */
.rail button.tool:disabled,
.rail button.tool:disabled:hover {
  background: transparent;
  color: var(--ink-faint);
  cursor: default;
}

/* THE STRIP. Flush to the rule on the right, rounded on its left corners only, and invisible
   until the row is under the pointer - a chevron on every row is eight chevrons nobody reads. */
.tool-side {
  position: absolute;
  right: 0;
  top: 2px;
  width: 11px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: transparent;
  color: var(--ink-faint);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--t-tap) var(--ease), background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.slot:hover .tool-side,
.tool-side:focus-visible { opacity: 1; }
.tool-side:hover { background: var(--sel); color: var(--ink); }
.tool-side svg { display: block; }

/* The rule between kinds of control: instruments above, the switches that act on drawings below.
   Inset, so it reads as a divider inside the column rather than as the column's own edge. */
.rail-sep {
  flex: 0 0 auto;
  width: 32px;
  height: 1px;
  margin: 5px 0;
  background: var(--line);
}
.rail-grow { flex: 1 1 auto; min-height: 8px; }

/* THE FOOT STAYS AT THE FOOT. When the column is taller than the panel - a cell in a split grid,
   a half-height window - the instruments scroll and these do not, because a scrollbar this column
   deliberately hides cannot tell anyone that Remove drawings is below the fold. */
.rail-foot {
  position: sticky;
  bottom: -4px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 4px;
  background: var(--panel);
}

/* The phone's palette is the same buttons in a floating panel: no strips, no foot switches, and a
   taller target. The query is the one the rest of the phone chrome uses - a narrow PANEL on a
   desktop is not a phone, and gating on `pointer: coarse` alone turns a touchscreen laptop's rail
   into one. Its box is in mobile.css, which owns everything about the phone layout. */
@media (max-width: 640px) and (pointer: coarse) {
  /* The row first, then the ground inside it - the two selectors weigh the same, so the order is
     what decides, and a ground the full height of its row leaves two neighbours touching. */
  .rail .slot, .rail > button.tool { width: 44px; height: 44px; }
  .rail button.tool { width: 40px; height: 40px; border-radius: var(--r); }
}