/* ==========================================================================
   Documentation. Inherits tokens from styles.css; this file only adds the
   docs shell (top bar, sidebar, article, on-this-page rail) and prose styles.
   ========================================================================== */

.docs-body {
  min-height: 100vh;
  background: var(--bg);
  overflow-x: hidden;
}

.docs-body a {
  text-decoration: none;
}

/* --- top bar -------------------------------------------------------------- */

.docs-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  height: 60px;
  padding: 0 clamp(16px, 3vw, 30px);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(2, 3, 5, 0.86);
  backdrop-filter: blur(14px);
}

.docs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* The app icon, as-is: it carries its own dark rounded square. */
.docs-brand img {
  width: 34px;
  height: 34px;
}

.docs-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-right: auto;
}

.docs-nav a {
  position: relative;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.18s ease;
}

.docs-nav a:hover {
  color: var(--text);
}

.docs-nav a.is-active {
  color: var(--text);
}

.docs-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: -5px 0 0 var(--purple), 5px 0 0 var(--purple);
}

.docs-top-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.docs-lang,
.docs-github {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.docs-lang:hover,
.docs-github:hover {
  color: var(--text);
  border-color: rgba(149, 92, 255, 0.5);
  background: rgba(149, 92, 255, 0.08);
}

.docs-github svg {
  width: 16px;
  height: 16px;
}

.docs-burger {
  display: none;
  place-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.docs-burger span {
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--muted);
  transition: transform 0.24s var(--ease), opacity 0.18s ease;
}

.docs-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.docs-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.docs-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* --- shell ---------------------------------------------------------------- */

.docs-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 30px);
}

.docs-side {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 30px 0 40px;
}

.docs-side-title {
  margin: 0 0 12px;
  color: var(--weak);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-side li + li {
  margin-top: 2px;
}

.docs-side a {
  display: block;
  padding: 8px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.docs-side a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.docs-side a.is-active {
  border-left-color: var(--purple);
  background: rgba(149, 92, 255, 0.09);
  color: var(--text);
  font-weight: 500;
}

.docs-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: clamp(24px, 4vw, 48px);
  padding: 30px 0 72px;
}

.docs-article {
  min-width: 0;
  max-width: 82ch;
}

/* --- on this page --------------------------------------------------------- */

.docs-rail {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 34px 0 40px;
}

.docs-rail-title {
  margin: 0 0 10px;
  color: var(--weak);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-rail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line-soft);
}

.docs-rail a {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--weak);
  font-size: 12.5px;
  line-height: 1.5;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.docs-rail a:hover {
  color: var(--text);
}

.docs-rail a.is-current {
  border-left-color: var(--purple);
  color: var(--focus);
}

/* --- article head --------------------------------------------------------- */

.docs-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-eyebrow a {
  color: var(--purple);
  transition: color 0.18s ease;
}

.docs-eyebrow a:hover {
  color: var(--focus);
}

.docs-article h1,
.docs-home h1 {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.16;
}

.docs-blurb {
  max-width: 64ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.66;
}

.docs-content {
  margin-top: clamp(28px, 4vh, 40px);
}

/* --- prose ---------------------------------------------------------------- */

.docs-content h2 {
  margin: 2.4em 0 0.7em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line-soft);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.3;
  scroll-margin-top: 78px;
}

.docs-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.docs-content h3 {
  margin: 1.9em 0 0.6em;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.016em;
  scroll-margin-top: 78px;
}

.docs-content h4 {
  margin: 1.6em 0 0.5em;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  scroll-margin-top: 78px;
}

.anchor {
  margin-left: 0.4em;
  color: var(--purple);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.18s ease;
}

h2:hover > .anchor,
h3:hover > .anchor,
h4:hover > .anchor,
.anchor:focus-visible {
  opacity: 0.75;
}

.docs-content p {
  margin: 0 0 1.1em;
  color: #c3cad6;
  font-size: 15px;
  line-height: 1.78;
}

.docs-content strong {
  color: var(--text);
  font-weight: 600;
}

.docs-content a {
  color: var(--focus);
  text-decoration: underline;
  text-decoration-color: rgba(184, 154, 255, 0.4);
  text-underline-offset: 2.5px;
  transition: text-decoration-color 0.18s ease;
}

.docs-content a:hover {
  text-decoration-color: var(--focus);
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.35em;
  color: #c3cad6;
  font-size: 15px;
  line-height: 1.78;
}

.docs-content li {
  margin-bottom: 0.42em;
}

.docs-content li::marker {
  color: var(--weak);
}

.docs-content ul ul,
.docs-content ol ol,
.docs-content ul ol,
.docs-content ol ul {
  margin: 0.42em 0 0.2em;
}

.docs-content hr {
  margin: 2.2em 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

.docs-content blockquote {
  margin: 0 0 1.2em;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--line);
}

.docs-content blockquote p:last-child {
  margin-bottom: 0;
}

/* inline code */
.docs-content code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(149, 92, 255, 0.1);
  color: #d7c8ff;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 0.875em;
  word-break: break-word;
}

/* code blocks */
.code-block {
  position: relative;
  margin: 0 0 1.4em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #07090d;
  overflow: hidden;
}

.code-lang {
  display: block;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--weak);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.code-block pre,
.diagram pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
}

.code-block pre code,
.diagram pre code {
  padding: 0;
  background: none;
  color: #cfd6e4;
  font-size: 12.8px;
  line-height: 1.7;
  white-space: pre;
  word-break: normal;
}

.diagram {
  margin: 0 0 1.4em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #07090d;
  overflow: hidden;
}

.diagram figcaption {
  padding: 7px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--weak);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* tables */
.table-wrap {
  margin: 0 0 1.5em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.8px;
}

.docs-content th,
.docs-content td {
  padding: 11px 15px;
  text-align: left;
  vertical-align: top;
  line-height: 1.62;
}

.docs-content thead th {
  border-bottom: 1px solid var(--line);
  color: var(--weak);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.docs-content tbody tr + tr td,
.docs-content tbody tr + tr th {
  border-top: 1px solid var(--line-soft);
}

.docs-content td {
  color: #c3cad6;
}

.docs-content tbody th {
  color: var(--text);
  font-weight: 500;
}

/* callouts */
.callout {
  margin: 0 0 1.4em;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.callout-title {
  margin: 0 0 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout ul,
.callout ol {
  margin-bottom: 0;
}

.callout-note {
  border-left-color: var(--purple);
}
.callout-note .callout-title {
  color: var(--focus);
}

.callout-tip {
  border-left-color: var(--down);
  background: rgba(14, 203, 129, 0.045);
}
.callout-tip .callout-title {
  color: #5fdba8;
}

.callout-important {
  border-left-color: var(--data-fresh, #5bc7cf);
  background: rgba(91, 199, 207, 0.05);
}
.callout-important .callout-title {
  color: #7fd6dc;
}

.callout-warning {
  border-left-color: var(--warn);
  background: rgba(245, 165, 36, 0.05);
}
.callout-warning .callout-title {
  color: #f0be6a;
}

.callout-caution {
  border-left-color: var(--up);
  background: rgba(246, 70, 93, 0.05);
}
.callout-caution .callout-title {
  color: #f4869a;
}

.docs-content img {
  margin: 0.5em 0 1.4em;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* --- screenshots ---------------------------------------------------------- */

.shot {
  margin: 1.6em 0 1.8em;
}

.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}

.shot-btn img {
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.22s ease, transform 0.28s var(--ease);
}

.shot-btn:hover img {
  border-color: rgba(149, 92, 255, 0.55);
  transform: translateY(-2px);
}

.shot figcaption {
  margin-top: 10px;
  color: var(--weak);
  font-size: 12.8px;
  line-height: 1.66;
}

/* --- lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(1, 2, 3, 0.9);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
  animation: lbIn 0.2s ease both;
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: lbZoom 0.24s var(--ease) both;
}

.lightbox-close {
  position: absolute;
  top: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 10, 14, 0.9);
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.lightbox-close:hover {
  color: #fff;
  border-color: rgba(149, 92, 255, 0.6);
}

@keyframes lbIn {
  from {
    opacity: 0;
  }
}

@keyframes lbZoom {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* --- article footer ------------------------------------------------------- */

.docs-source {
  margin: 2.6em 0 0;
  padding-top: 1.4em;
  border-top: 1px solid var(--line-soft);
  color: var(--weak);
  font-size: 13px;
}

.docs-source a {
  color: var(--focus);
  transition: color 0.18s ease;
}

.docs-source a:hover {
  color: #d5c2ff;
}

.docs-pn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 1.6em;
}

.pn {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease);
}

.pn:hover {
  border-color: rgba(149, 92, 255, 0.5);
  background: rgba(149, 92, 255, 0.05);
  transform: translateY(-1px);
}

.pn span {
  color: var(--weak);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pn strong {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.pn-next {
  text-align: right;
}

/* --- docs home ------------------------------------------------------------ */

.docs-home {
  padding: clamp(46px, 8vh, 92px) clamp(18px, 4vw, 30px) clamp(60px, 9vh, 100px);
}

.docs-home-inner {
  max-width: 900px;
  margin: 0 auto;
}

.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 14px;
  margin-top: clamp(30px, 4vh, 44px);
}

.doc-card {
  display: grid;
  gap: 7px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s var(--ease);
}

.doc-card:hover {
  border-color: rgba(149, 92, 255, 0.5);
  background: #0b0d12;
  transform: translateY(-2px);
}

.doc-num {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.doc-card-title {
  color: var(--text);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.doc-card-blurb {
  color: var(--muted);
  font-size: 13.6px;
  line-height: 1.62;
}

/* --- footer --------------------------------------------------------------- */

.docs-footer {
  padding: clamp(30px, 4vh, 44px) clamp(18px, 4vw, 30px);
  border-top: 1px solid var(--line-soft);
  background: #010203;
}

.docs-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  max-width: 1400px;
  margin: 0 auto;
}

.docs-foot-links a {
  color: var(--muted);
  font-size: 13.5px;
  transition: color 0.18s ease;
}

.docs-foot-links a:hover {
  color: var(--text);
}

.docs-disclaimer {
  max-width: 1400px;
  margin: 16px auto 0;
  color: var(--weak);
  font-size: 12px;
  line-height: 1.66;
}

/* --- Chinese typography --------------------------------------------------- */

.docs-body.lang-zh {
  font-family: var(--font-sans-zh);
}

.lang-zh .docs-content p,
.lang-zh .docs-content li,
.lang-zh .docs-blurb {
  line-height: 1.86;
}

.lang-zh .docs-content h2,
.lang-zh .docs-content h3,
.lang-zh .docs-article h1,
.lang-zh .docs-home h1 {
  letter-spacing: -0.01em;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .docs-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  .docs-nav {
    display: none;
  }

  .docs-burger {
    display: grid;
  }

  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .docs-side {
    position: fixed;
    top: 60px;
    right: 0;
    left: 0;
    z-index: 25;
    max-height: calc(100vh - 60px);
    padding: 18px clamp(16px, 4vw, 26px) 30px;
    border-bottom: 1px solid var(--line);
    background: rgba(4, 5, 8, 0.98);
    backdrop-filter: blur(14px);
  }

  .docs-side[hidden] {
    display: none;
  }

  .docs-article {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .docs-brand span {
    display: none;
  }

  .docs-content th,
  .docs-content td {
    padding: 10px 12px;
  }

  .pn-next {
    text-align: left;
  }
}

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .docs-body *,
  .docs-body *::before,
  .docs-body *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }

  .anchor {
    opacity: 0.5;
  }
}

/* ==========================================================================
   Phosphor layer
   Carries the landing page's command-deck language into the docs: an ambient
   violet wash behind the page, lit hairlines, and glow on the accents. Kept as
   an additive block at the end so the shell rules above stay readable, and so
   the five generated doc pages need no markup change.
   ========================================================================== */

/* Ambient wash. Fixed, so it stays put while a long article scrolls past —
   the effect is "the page sits in a lit room", not "a gradient scrolls by". */
.docs-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 46% at 50% -6%, rgba(149, 92, 255, 0.12), transparent 70%),
    radial-gradient(40% 34% at 96% 4%, rgba(113, 56, 232, 0.08), transparent 72%);
}

/* The wash sits behind content but above the page background. Everything that
   paints text needs to outrank it. */
.docs-top,
.docs-shell,
.docs-home,
.docs-footer {
  position: relative;
  z-index: 1;
}

/* Instrument grid, masked to fade out before the footer. */
.docs-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(174, 186, 210, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 186, 210, 0.032) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}

/* Top bar: a lit seam along the bottom edge, brightest at centre. */
.docs-top {
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 rgba(174, 186, 210, 0.07);
}

.docs-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(149, 92, 255, 0.34) 50%,
    transparent
  );
}

.docs-brand {
  letter-spacing: -0.02em;
}

/* Active nav: a lit underscore, matching the landing header. */
.docs-nav a.is-active::after {
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-left: 0;
  border-radius: 2px;
  background: var(--purple);
  box-shadow: 0 0 12px rgba(149, 92, 255, 0.5);
}

.docs-side-title,
.docs-rail-title {
  color: var(--weak);
}

/* Sidebar active item: glow on the marker rail. */
.docs-side a.is-active {
  box-shadow: inset 2px 0 0 var(--purple), -1px 0 14px rgba(149, 92, 255, 0.16);
}

.docs-rail a.is-current {
  text-shadow: 0 0 12px rgba(149, 92, 255, 0.3);
}

.docs-eyebrow a {
  text-shadow: 0 0 12px rgba(149, 92, 255, 0.28);
}

/* Article and home headings get the same gradient fill as section titles. */
.docs-article h1,
.docs-home h1 {
  background: linear-gradient(176deg, #fff 32%, #a8b0c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section rules inside prose, lit at the left where the eye enters. */
.docs-content h2 {
  border-top-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgba(149, 92, 255, 0.4),
    var(--line-soft) 34%,
    transparent
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.docs-content h2:first-child {
  background-image: none;
}

/* Doc cards: raised panels with a phosphor wash rising on hover, matching the
   download cards on the landing page. */
.doc-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, rgba(18, 14, 36, 0.58), rgba(8, 10, 14, 0.92));
}

.doc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(149, 92, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.doc-card:hover {
  background: linear-gradient(170deg, rgba(18, 14, 36, 0.58), rgba(8, 10, 14, 0.92));
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(149, 92, 255, 0.2);
}

.doc-card:hover::before {
  opacity: 1;
}

.doc-num,
.doc-card-title,
.doc-card-blurb {
  position: relative;
}

.doc-num {
  text-shadow: 0 0 12px rgba(149, 92, 255, 0.34);
}

/* Footer: a lit seam, same as every other panel boundary. */
.docs-footer {
  border-top-color: transparent;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.5), rgba(2, 3, 5, 1));
}

.docs-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line) 24%,
    rgba(149, 92, 255, 0.34) 50%,
    var(--line) 76%,
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  /* The washes are static paint, so they stay — nothing here animates. */
  .doc-card:hover {
    transform: none;
  }
}