/* ====================================================================
   SIDEBAR (.pub-aside.sc) — main navigation
   ====================================================================
   Cyberpunk-terminal aesthetic. Hex prefixes, memory-address
   annotations, signal bars, scanline-overlaid status footer.
   All colors theme via --io-* tokens. Same chassis retints with
   any active theme.
   ==================================================================== */

.pub-aside.sc {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  position: relative;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-sm);
  color: var(--io-text-secondary);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─── corner brackets ─── */

.sc-corner {
  position: absolute;
  font-family: var(--io-font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--io-accent);
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 6px var(--io-accent-glow);
  z-index: 1;
}
.sc-corner-tl { top: 4px;    left: 6px; }
.sc-corner-tr { top: 4px;    right: 6px; }
.sc-corner-bl { bottom: 4px; left: 6px; }
.sc-corner-br { bottom: 4px; right: 6px; }

/* ─── brand block ─── */

.sc-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 4px 12px;
}

.sc-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-brand-logo-wrap {
  padding: 4px;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 0 0 1px var(--io-accent-subtle), inset 0 0 8px var(--io-accent-subtle);
}

.sc-brand-name {
  font-family: var(--io-font-pixel);
  font-size: var(--io-fs-lg);
  font-weight: 400;
  color: var(--io-text-primary);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.sc-brand-path-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.sc-bpath {
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  color: var(--io-text-tertiary);
  letter-spacing: 0.02em;
}

.sc-bcursor {
  display: inline-block;
  width: 6px;
  height: 11px;
  background: var(--io-accent);
  margin-left: 2px;
  animation: sc-cursor-blink 1.05s steps(1, end) infinite;
  box-shadow: 0 0 4px var(--io-accent-glow);
}

@keyframes sc-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ─── brand footer ─── */

.sc-brand-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 0;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  color: var(--io-accent);
  letter-spacing: 0.04em;
}

/* io-trace scaled for the brand-footer row */
.sc-brand-footer .io-trace {
  width: 64px;
  height: 18px;
}

/* ─── divider art (above the bottom sc-adiv inside sc-foot) ─── */

.sc-divider-art {
  display: flex;
  justify-content: center;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.sc-divider-art img {
  display: block;
  width: 72px;
  position: relative;
  top: 25px;
  left: 110px;
}

/* ─── ASCII dividers ─── */

.sc-adiv {
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  line-height: 1;
  color: var(--io-text-tertiary);
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
  margin: 12px 0;
  opacity: 0.42;
  user-select: none;
}

/* ─── section divider with label ─── */

.sc-sdiv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 8px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  color: var(--io-text-tertiary);
  letter-spacing: 0.18em;
}

.sc-sdiv::before,
.sc-sdiv::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--io-border-subtle);
}

.sc-sdiv-lb {
  white-space: nowrap;
}

/* ─── nav rows ─── */

.sc-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sc-nr {
  display: grid;
  grid-template-columns: 30px 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-sm);
  color: var(--io-text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* shimmer overlay — slides diagonally on hover-enter, snaps back on exit */
.sc-nr::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    100deg,
    transparent 35%,
    var(--io-accent) 50%,
    transparent 65%
  );
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  transition: transform 0s;
}

.sc-nr:hover::before {
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* push grid children above the shimmer layer so they stay readable */
.sc-nr > * {
  position: relative;
  z-index: 1;
}

.sc-nr:hover {
  color: var(--io-text-primary);
}

.sc-nr.on {
  background: var(--io-accent-subtle);
  color: var(--io-accent);
  border-left-color: var(--io-accent);
}

.sc-pfx {
  font-size: var(--io-fs-micro);
  color: var(--io-text-tertiary);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.sc-nr.on .sc-pfx {
  color: var(--io-accent-bright);
}

.sc-ic {
  font-size: var(--io-fs-base);
  width: 22px;
  text-align: center;
  color: var(--io-text-tertiary);
  transition: color 280ms ease, text-shadow 280ms ease;
}

.sc-nr:hover .sc-ic {
  color: var(--io-text-primary);
}

.sc-nr.on .sc-ic {
  color: var(--io-accent);
  text-shadow: 0 0 4px var(--io-accent-glow);
}

.sc-lb {
  letter-spacing: 0.02em;
}

.sc-mem {
  font-size: var(--io-fs-micro);
  color: var(--io-text-tertiary);
  letter-spacing: 0;
  opacity: 0.55;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sc-nr.on .sc-mem {
  color: var(--io-accent-dim);
  opacity: 0.9;
}

.sc-bd {
  font-size: var(--io-fs-micro);
  color: var(--io-text-tertiary);
  padding: 1px 6px;
  border: 1px solid var(--io-border);
  border-radius: 3px;
  background: var(--io-surface-base);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
}

/* ─── footer (pushed to bottom) ─── */

.sc-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

/* ─── status block ─── */

.sc-status {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--io-surface-base);
  border: 1px solid var(--io-border-subtle);
  border-radius: 3px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  position: relative;
  overflow: hidden;
}

.sc-sl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.sc-sl-k {
  color: var(--io-text-tertiary);
  letter-spacing: 0.02em;
}

.sc-sl-v {
  color: var(--io-text-secondary);
  text-align: right;
  justify-self: end;
}

.sc-sl-ok {
  color: var(--io-success);
  text-align: right;
  letter-spacing: 0.04em;
  justify-self: end;
}

.sc-sl-r {
  color: var(--io-text-tertiary);
  text-align: right;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* The k spans col-1, then either (v, r) or (ok, r) or (ok alone, spanning v+r).
   When there are only two values after k, the third grid column collapses; the
   grid-template handles that gracefully. */

.sc-sl-ok + .sc-sl-r,
.sc-sl-v + .sc-sl-r { /* third element sits in col 3, already aligned */ }

/* ─── scanline overlay on the status block ─── */

.sc-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.02) 2px,
    rgba(255, 255, 255, 0.02) 3px
  );
}

.sc-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--io-accent-subtle) 50%,
    transparent 100%
  );
  animation: sc-scan-sweep 6s linear infinite;
}

@keyframes sc-scan-sweep {
  0%   { top: -20px; opacity: 0.9; }
  100% { top: 110%;  opacity: 0.9; }
}

/* ─── scrollbar tuning for the sidebar ─── */

.pub-aside.sc::-webkit-scrollbar {
  width: 6px;
}

.pub-aside.sc::-webkit-scrollbar-track {
  background: transparent;
}

.pub-aside.sc::-webkit-scrollbar-thumb {
  background: var(--io-border);
  border-radius: 3px;
}

.pub-aside.sc::-webkit-scrollbar-thumb:hover {
  background: var(--io-accent-dim);
}