/* ============================================================
   Side rail navigation — presentation.

   Ported from an owner-supplied React component (Aceternity-style
   hover-expand sidebar: framer-motion + Tailwind + lucide). Nothing in
   this estate has a bundler, so the port keeps the CHARACTER — a narrow
   icon rail that reveals its labels — and drops the dependencies.

   Two deliberate departures from the source, both earned:

   1. HOVER EXPANDS AS AN OVERLAY, NOT A PUSH. The source animates the
      rail's own width, so every accidental hover reflows the dashboard
      beside it. That is tolerable in a marketing demo and miserable in a
      portal where a rep is reading a table of leads. Here the rail keeps
      its 68px footprint and the panel floats over the content. Pinning
      is the one action that reflows, and it reflows once, on purpose.

   2. COLLAPSED LABELS ARE CLIPPED, NOT REMOVED. The source sets
      display:none on the label, which takes it out of the accessibility
      tree — a screen reader on the collapsed rail hears nothing but the
      icon. Here the label is always in the DOM and always in the tree;
      only the panel's overflow hides it.

   Like nav.css, this file is a working navigation on its own. Without
   sidebar.js the rail is simply always open — a plain labelled list.
   Every behaviour is an upgrade gated on the class `on` that the script
   adds, so removing the script reverts to something usable rather than
   to a column of unexplained icons.
   ============================================================ */

/* ---------- Tokens ----------
   Defaults that work on any light ground. Bind them in the HOST
   stylesheet, loaded after this file — a token name is not a role:
   --ink is heading text on one Standard site and near-black background
   on another. */
.sb {
  --sb-w-open:   252px;
  --sb-w-rail:    68px;
  --sb-w-drawer: 276px;
  --sb-bg:        #ffffff;
  --sb-line:      #dfe8f1;
  --sb-ink:       #13273c;
  --sb-ink-soft:  #6b7a8c;
  --sb-accent:    #1f72bd;
  --sb-active-bg: #eaf3fb;
  --sb-hover-bg:  #f2f7fc;
  --sb-radius:    10px;
  --sb-ease:      200ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- The host layout the rail requires ----------
   A rail needs a body beside it. These two classes are part of the
   component's contract, not decoration: .shell is the row, .shell-body
   is everything that is not the rail. min-width:0 is load-bearing — a
   flex child defaults to min-content, and one wide table inside would
   otherwise push the rail off the screen. */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.shell-body { flex: 1 1 auto; min-width: 0; }

/* ---------- The rail ----------
   The flex item holds the FOOTPRINT; .sb-panel is absolute inside it
   and holds the PAINT. That separation is what lets hover widen the
   panel without moving anything else on the page. */
.sb {
  position: sticky; top: 0;
  flex: 0 0 var(--sb-w-open);      /* no script: a plain open column */
  height: 100vh;
  z-index: 30;
}
.sb.on { flex-basis: var(--sb-w-rail); }
.sb.on.pinned { flex-basis: var(--sb-w-open); }

.sb-panel {
  position: absolute; inset: 0 auto 0 0;
  width: var(--sb-w-open);
  display: flex; flex-direction: column;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-line);
  overflow: hidden;                /* this is what clips the labels */
}
.sb.on .sb-panel {
  width: var(--sb-w-rail);
  transition: width var(--sb-ease), box-shadow var(--sb-ease);
}
.sb.on:hover .sb-panel,
.sb.on:focus-within .sb-panel {
  width: var(--sb-w-open);
  box-shadow: 0 18px 44px -22px rgba(13, 44, 73, .38);
}
.sb.on.pinned .sb-panel { width: var(--sb-w-open); box-shadow: none; }

/* ---------- Head ---------- */
.sb-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 15px;
  border-bottom: 1px solid var(--sb-line);
  white-space: nowrap;
}
.sb-mark {
  flex: 0 0 26px; height: 26px; border-radius: 7px;
  background: var(--sb-accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.sb-word { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  opacity: 1; transition: opacity 130ms linear; }
.sb.on .sb-word { opacity: 0; }
.sb.on:hover .sb-word,
.sb.on:focus-within .sb-word,
.sb.on.pinned .sb-word { opacity: 1; }
.sb-word b { font-size: 13.5px; font-weight: 600; color: var(--sb-ink); line-height: 1; }
.sb-word span { font-size: 11px; color: var(--sb-ink-soft); line-height: 1; }

/* ---------- The list ----------
   Scrollbar hidden rather than styled: a scrollbar inside a 68px rail
   eats a fifth of it and appears only while the panel is animating. */
.sb-nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 0 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sb-nav::-webkit-scrollbar { width: 0; height: 0; }

.sb-sec { padding: 4px 0; }
/* When the labels are hidden the headings say nothing, so the grouping
   has to survive as geometry. This hairline is the collapsed rail's
   only remaining evidence that the items come in sets. */
.sb-sec + .sb-sec { border-top: 1px solid var(--sb-line); }

.sb-group {
  box-sizing: border-box;
  margin: 0; height: 28px; padding: 9px 20px 5px; line-height: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sb-ink-soft);
  white-space: nowrap; overflow: hidden; opacity: .8;
}
.sb.on .sb-group {
  opacity: 0; height: 6px; padding-top: 0; padding-bottom: 0;
  transition: opacity 130ms linear, height var(--sb-ease), padding var(--sb-ease);
}
.sb.on:hover .sb-group,
.sb.on:focus-within .sb-group,
.sb.on.pinned .sb-group { opacity: .8; height: 28px; padding: 9px 20px 5px; }

/* ---------- An item ----------
   Fixed width at the OPEN size, always. The row is wider than the
   collapsed panel and simply clipped, so the icon never moves while the
   panel animates — the label slides out from under the edge instead of
   the whole row re-laying-out under the cursor. */
.sb-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: calc(var(--sb-w-open) - 16px);
  height: 40px; margin: 1px 8px; padding: 0 12px;
  border: 0; border-radius: var(--sb-radius); background: none;
  font: inherit; font-size: 14px; line-height: 1;
  color: var(--sb-ink-soft); text-align: left; white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms linear, color 140ms linear;
}
.sb-link:hover { background: var(--sb-hover-bg); color: var(--sb-ink); }
.sb-link:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

.sb-ico { flex: 0 0 20px; display: grid; place-items: center; }
.sb-ico svg {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sb-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  opacity: 1; transition: opacity 130ms linear;
}
.sb.on .sb-label { opacity: 0; }
.sb.on:hover .sb-label,
.sb.on:focus-within .sb-label,
.sb.on.pinned .sb-label { opacity: 1; }

/* Current section. The bar is anchored to the panel edge rather than
   the button, so it stays put at both widths — the one mark a reader
   can find on a collapsed rail without reading anything. */
.sb-link[aria-current="page"] {
  background: var(--sb-active-bg);
  color: var(--sb-accent);
  font-weight: 600;
}
.sb-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-accent);
}

/* A badge has to be legible on the collapsed rail too, where there is no
   room beside the icon — so it moves onto the icon as a dot. */
.sb-badge {
  margin-left: auto; flex: 0 0 auto;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 999px; background: var(--sb-active-bg);
  color: var(--sb-accent); font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  transition: opacity 130ms linear;
}
.sb.on .sb-badge { opacity: 0; }
.sb.on:hover .sb-badge,
.sb.on:focus-within .sb-badge,
.sb.on.pinned .sb-badge { opacity: 1; }
.sb-dot {
  position: absolute; left: 26px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sb-accent); box-shadow: 0 0 0 2px var(--sb-bg);
  opacity: 0; transition: opacity 130ms linear;
}
.sb.on .sb-link.has-badge .sb-dot { opacity: 1; }
.sb.on:hover .sb-link.has-badge .sb-dot,
.sb.on:focus-within .sb-link.has-badge .sb-dot,
.sb.on.pinned .sb-link.has-badge .sb-dot { opacity: 0; }

/* ---------- Children ----------
   A second level, for a section whose content is really several sections
   (Sales kits is four manufacturers). Text-only and indented, so it is
   hidden outright on the collapsed rail rather than rendered as a column of
   unlabelled stubs — the rail's whole promise is that an icon means
   something, and a sub-item has no icon worth drawing.

   The open/close uses grid-template-rows 0fr -> 1fr rather than an animated
   pixel height. That is deliberate: a measured height is wrong the moment the
   measurement changes what is being measured — a scrollbar appearing, a late
   webfont swap — which is the bug nav.js carries a long comment about. There
   is no measurement here to go stale. */
.sb-kids {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--sb-ease);
}
.sb-item.open > .sb-kids { grid-template-rows: 1fr; }
.sb-kids > div { overflow: hidden; min-height: 0; }
.sb.on .sb-kids { grid-template-rows: 0fr; }
.sb.on:hover .sb-item.open > .sb-kids,
.sb.on:focus-within .sb-item.open > .sb-kids,
.sb.on.pinned .sb-item.open > .sb-kids { grid-template-rows: 1fr; }

/* The guide line stands in for the indent when the labels are mid-fade. */
.sb-kids > div { position: relative; }
.sb-kids > div::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 29px;
  border-left: 1px solid var(--sb-line);
}
.sb-kid {
  height: 34px; padding-left: 42px; font-size: 13px;
  gap: 0;
}
.sb-kid[aria-current="page"] { font-weight: 600; }
.sb-kid[aria-current="page"]::before { display: none; }   /* the guide line marks it, not an edge bar */
.sb-kid[aria-current="page"] .sb-label { color: var(--sb-accent); }

/* The parent's chevron. A button inside a button is invalid, so the parent
   row is a <div> holding two buttons: the section itself, and this. */
.sb-row { display: flex; align-items: center; }
.sb-row .sb-link { flex: 1 1 auto; }
.sb-twist {
  flex: 0 0 26px; height: 30px; margin-right: 8px;
  display: grid; place-items: center;
  border: 0; background: none; border-radius: 6px;
  color: var(--sb-ink-soft); cursor: pointer;
  opacity: 1; transition: opacity 130ms linear;
}
.sb-twist svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-90deg); transition: transform var(--sb-ease);
}
.sb-item.open > .sb-row .sb-twist svg { transform: none; }
.sb-twist:hover { background: var(--sb-hover-bg); color: var(--sb-ink); }
.sb-twist:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
.sb.on .sb-twist { opacity: 0; pointer-events: none; }
.sb.on:hover .sb-twist,
.sb.on:focus-within .sb-twist,
.sb.on.pinned .sb-twist { opacity: 1; pointer-events: auto; }

/* ---------- Foot: the pin ----------
   Hover-only expansion is a trap on a touch-screen laptop and a
   nuisance for anyone who wants the labels to stay. The pin is the
   escape hatch, and it only exists when the script is there to run it. */
.sb-foot { flex: 0 0 auto; border-top: 1px solid var(--sb-line); padding: 6px 0 8px; }
.sb-pin { display: none; }
.sb.on .sb-pin { display: flex; }
.sb-pin svg { transition: transform var(--sb-ease); }
.sb.on.pinned .sb-pin svg { transform: rotate(180deg); }

/* ---------- Below 900px: a drawer ----------
   No rail on a phone — 68px of permanent chrome next to a 390px screen
   is a sixth of the width. The burger in the top bar opens the same
   list, fully labelled, over a scrim. */
.sb-burger { display: none; }
.sb-scrim { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }

  .sb {
    position: fixed; inset: 0 auto 0 0;
    flex: none; width: var(--sb-w-drawer); height: 100%;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--sb-ease), visibility 0s linear 200ms;
    z-index: 60;
  }
  .sb.open { transform: none; visibility: visible; transition: transform var(--sb-ease), visibility 0s; }

  /* One width, always open. The desktop states are meaningless here and
     would otherwise fight the drawer for the same property. */
  .sb-panel, .sb.on .sb-panel, .sb.on.pinned .sb-panel {
    width: var(--sb-w-drawer);
    box-shadow: 0 0 60px rgba(13, 44, 73, .32);
  }
  .sb-link { width: calc(var(--sb-w-drawer) - 16px); }
  .sb.on .sb-label, .sb.on .sb-word, .sb.on .sb-badge { opacity: 1; }
  .sb.on .sb-twist { opacity: 1; pointer-events: auto; }
  .sb.on .sb-item.open > .sb-kids { grid-template-rows: 1fr; }
  .sb-kid { width: calc(var(--sb-w-drawer) - 16px); }
  .sb.on .sb-group { opacity: .8; height: 28px; padding: 9px 20px 5px; }
  .sb.on .sb-link.has-badge .sb-dot { opacity: 0; }
  .sb-pin, .sb.on .sb-pin { display: none; }

  .sb-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(13, 44, 73, .42);
    opacity: 0; pointer-events: none;
    transition: opacity var(--sb-ease);
    z-index: 50;
  }
  .sb-scrim.on { opacity: 1; pointer-events: auto; }

  .sb-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 2px;
    border: 1px solid var(--sb-line); border-radius: 9px;
    background: var(--sb-bg); color: var(--sb-ink); cursor: pointer;
  }
  .sb-burger svg {
    width: 19px; height: 19px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round;
  }
  .sb-burger:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb, .sb-panel, .sb-label, .sb-word, .sb-group, .sb-badge, .sb-dot, .sb-link, .sb-scrim, .sb-pin svg, .sb-kids, .sb-twist svg {
    transition: none !important;
  }
}