/* V3.7: shared icon colors and coordinated canvas motion.
   The reading cards are never transformed/scaled. Their grid follows the
   container's changing margin, so text stays at its native rendering size. */
:root {
  --rail-motion-duration: 340ms;
  --rail-motion-ease: cubic-bezier(.22, .72, .28, 1);
  --nav-icon-idle: #405b4b;
  --nav-icon-selected: #14624c;
  --nav-icon-beam: #f1fff6;
  --nav-icon-glow: rgba(34, 118, 81, .48);
}
:root[data-theme="graphite"] {
  --nav-icon-idle: #c7d6cc;
  --nav-icon-selected: #b1eed0;
  --nav-icon-beam: #f4fff9;
  --nav-icon-glow: rgba(133, 244, 185, .56);
}

.nav-item svg { color: var(--nav-icon-idle); transition: color 200ms ease-out; }
.nav-item .nav-icon-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.nav-item.is-active svg { color: var(--nav-icon-selected); }
@media (min-width: 651px) {
  .main-content { scrollbar-gutter: stable; }
  html[data-sidebar-motion="ready"] .side-rail {
    transition: width var(--rail-motion-duration) var(--rail-motion-ease);
  }
  html[data-sidebar-motion="ready"] .rail-toggle svg { transition: transform var(--rail-motion-duration) var(--rail-motion-ease); }
}
@media (min-width: 981px) {
  html[data-sidebar-motion="ready"] .main-content {
    transition: margin-left var(--rail-motion-duration) var(--rail-motion-ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-sidebar-motion="ready"] .side-rail,
  html[data-sidebar-motion="ready"] .main-content,
  html[data-sidebar-motion="ready"] .rail-toggle svg,
  .nav-item svg { transition: none; }
}
@media (forced-colors: active) {
  .nav-item svg,
  .nav-item.is-active svg { color: ButtonText; }
  .nav-item.is-active { outline: 1px solid Highlight; outline-offset: -2px; }
}