/* Collapsible section rail (see assets/js/kc-rail-toggle.js).
   Desktop only: under 900px the rail is already a drawer with its own
   hamburger, so the toggle hides rather than competing with it.

   THE RULE THIS FILE IS BUILT AROUND, Kaʻo 2026-08-01: "Nothing should shift
   up and down... you can keep dividers where headers are and add space so just
   icons live on the same horizontal plane."

   So every row keeps its exact vertical position in both states. Nothing is
   display:none, nothing collapses to zero height. Section headings keep their
   box and swap their words for a divider drawn inside that same box. Labels
   are not removed either: they stay in flow and are CLIPPED by the narrowing
   rail while they fade, which is what makes the transition read as one
   movement rather than a reflow.

   TIMING, copied from the behavior he pointed at on navbar.gallery: collapsing
   drops the words fast and immediately, then the width follows. Expanding does
   the reverse, the width opens first and the words fade in behind it. If both
   ran together the text would smear against the moving edge. */

:root {
  --kc-rail-w: 72px;
  /* Long tail, no overshoot. The same shape iOS uses for sheets, which is why
     it reads as settling into place rather than stopping. */
  --kc-rail-ease: cubic-bezier(.32, .72, 0, 1);
  --kc-rail-dur: 340ms;
}

/* ---------- the rail itself ---------- */
/* A reserved band at the top for the toggle, the same height in both states so
   nothing below it ever moves. Without it the button would float on top of the
   first row, which on /music/ is the search box and on /posters/ is a heading.
   The references all give this control its own row, and they are right to. */
.am-side {
  padding-top: 56px;
  transition: width var(--kc-rail-dur) var(--kc-rail-ease),
              flex-basis var(--kc-rail-dur) var(--kc-rail-ease),
              padding-left var(--kc-rail-dur) var(--kc-rail-ease),
              padding-right var(--kc-rail-dur) var(--kc-rail-ease);
}
html.kc-rail-collapsed .am-side {
  width: var(--kc-rail-w); flex: 0 0 var(--kc-rail-w);
  padding-left: 8px; padding-right: 8px;
}

/* ---------- the words ---------- */
/* Expanding: wait for the edge to get out of the way, then fade in. */
.am-side__lab {
  opacity: 1; transform: translateX(0);
  transition: opacity 200ms ease 150ms, transform 260ms var(--kc-rail-ease) 150ms;
}
/* Collapsing: go immediately and quickly, so the text is gone before the rail
   is narrow enough to crop it mid-letter. */
html.kc-rail-collapsed .am-side__lab {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 110ms ease 0ms, transform 110ms ease 0ms;
}

/* ---------- rows keep their vertical plane ---------- */
/* The icon slides to the middle of the 72px strip. Nothing moves vertically:
   same padding block, same min-height, same everything. 19px is what centers
   an 18px icon inside the 56px of content the collapsed rail leaves. */
.am-side__nav a, .am-side__newpl {
  transition: padding var(--kc-rail-dur) var(--kc-rail-ease);
}
html.kc-rail-collapsed .am-side__nav a,
html.kc-rail-collapsed .am-side__newpl {
  padding-left: 19px; padding-right: 0;
}

/* ---------- headings become dividers, in place ---------- */
/* Height, margins and line-box are untouched, so the rows above and below do
   not move by a pixel. The words fade and a rule fades in across the same box. */
.am-side__hd { position: relative; transition: color 140ms ease; }
.am-side__hd::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  border-top: 1px solid var(--mus-rule);
  opacity: 0; transition: opacity 180ms ease 120ms;
  pointer-events: none;
}
html.kc-rail-collapsed .am-side__hd { color: transparent; transition: color 100ms ease; }
html.kc-rail-collapsed .am-side__hd::after { opacity: 1; }
/* No clearance hack needed: the toggle has its own band above every row. */

/* ---------- search becomes its icon ---------- */
/* Same height, same position. The field shrinks to nothing and the magnifier
   slides to the middle, rather than the box disappearing and dragging every
   row below it upward, which is what the previous version did. */
.am-side__search { transition: padding var(--kc-rail-dur) var(--kc-rail-ease); overflow: hidden; }
.am-side__search input {
  transition: opacity 110ms ease 0ms, width var(--kc-rail-dur) var(--kc-rail-ease);
}
html.kc-rail-collapsed .am-side__search { padding-left: 17px; padding-right: 0; }
html.kc-rail-collapsed .am-side__search input {
  opacity: 0; width: 0; min-width: 0; padding: 0; border: 0; pointer-events: none;
}
html:not(.kc-rail-collapsed) .am-side__search input { transition-delay: 150ms; }

/* ---------- the toggle, top right, out of flow ---------- */
/* Absolutely positioned so it cannot push anything down, which also fixes it
   getting lost at the bottom of the music rail where the list runs long. */
.kc-railtoggle {
  position: absolute; top: 12px; right: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--mus-ink-quiet); cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              right var(--kc-rail-dur) var(--kc-rail-ease);
}
.kc-railtoggle:hover { background: var(--mus-surface-2); color: var(--mus-ink); }
.kc-railtoggle:focus-visible { outline: 2px solid var(--mus-focus); outline-offset: 2px; }
.kc-railtoggle svg { width: 20px; height: 20px; display: block; }
/* Centered in the strip when collapsed: (72 - 34) / 2 = 19. */
html.kc-rail-collapsed .kc-railtoggle { right: 19px; }
/* The word lived beside the icon in the old bottom placement. It has no room
   in a 34px button, and the hover label names it now. */
.kc-railtoggle__lab { display: none; }

/* The chevron inside the panel glyph is the whole tell, so it turns on the
   same curve as the rail and finishes with it. */
.kc-rt-chev { transform-origin: 14.25px 12px; transition: transform var(--kc-rail-dur) var(--kc-rail-ease); }
html.kc-rail-collapsed .kc-rt-chev { transform: rotate(180deg); }
/* The filled panel edge swaps sides, which is what the icon is saying. */
.kc-rt-fill { opacity: .18; transition: opacity 200ms ease; }
html.kc-rail-collapsed .kc-rt-fill { opacity: 0; }

/* ---------- the hover label ---------- */
/* ONE shared element, positioned fixed, moved by JS on hover.

   Generated content on the link is the obvious approach and it cannot work
   here: .am-side scrolls, so it carries overflow-y:auto, and per spec a box
   that is not visible on one axis cannot be visible on the other. A label
   drawn inside the rail is therefore clipped to 72px, which is precisely the
   width that makes a tooltip pointless. A fixed-position element on <body>
   escapes that and stays right while the rail scrolls.

   aria-hidden: the words are already each link's accessible name, because the
   JS sets an aria-label whenever the rail is collapsed. This is decoration. */
.kc-railtip {
  position: fixed; z-index: 60; left: 0; top: 0;
  padding: 7px 11px; border-radius: 8px;
  background: var(--mus-ink, #161616); color: var(--mus-surface, #fdfcf8);
  font: 500 13px/1.2 var(--wt-font-ui, inherit);
  letter-spacing: 0; text-transform: none;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-6px) scale(.97);
  transform-origin: left center;
  transition: opacity 130ms ease, transform 220ms var(--kc-rail-ease);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.kc-railtip.is-on { opacity: 1; transform: translateX(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .am-side, .am-side__lab, .am-side__nav a, .am-side__newpl, .am-side__hd,
  .am-side__hd::after, .am-side__search, .am-side__search input,
  .kc-railtoggle, .kc-rt-chev, .kc-rt-fill, .kc-railtip { transition: none; }
}

/* The rail is an off-canvas drawer here, with its own open/close control. */
@media (max-width: 900px) {
  .kc-railtoggle { display: none; }
  html.kc-rail-collapsed .am-side { width: min(300px, 86vw); flex: none; padding-left: 12px; padding-right: 12px; }
  html.kc-rail-collapsed .am-side__lab { opacity: 1; transform: none; }
  html.kc-rail-collapsed .am-side__hd { color: var(--mus-ink-quiet); }
  html.kc-rail-collapsed .am-side__hd::after { opacity: 0; }
  html.kc-rail-collapsed .am-side__search { padding-left: revert; padding-right: revert; }
  html.kc-rail-collapsed .am-side__search input { opacity: 1; width: revert; padding: revert; border: revert; pointer-events: auto; }
  html.kc-rail-collapsed .am-side__nav a,
  html.kc-rail-collapsed .am-side__newpl { padding-left: 10px; padding-right: 10px; }
  .kc-railtip { display: none; }
}