/* ===========================================================================
   VAULT  —  document pages: docs, terms, refunds, and the 404
   ---------------------------------------------------------------------------
   A reading page is a different problem from a selling page and it deserves a
   different layout, not the selling one with the colour taken out.

   Two columns: a sticky index on the left that says where you are in the
   document, and a single measure on the right that never gets wider than
   somebody can comfortably read. The index is the design — it is also the
   only thing that makes a long legal page usable, which is the test of
   whether an ornament is earning its place.
   =========================================================================== */

.docwrap {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s7);
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--s7) var(--pad) var(--s8);
}
@media (max-width: 940px) {
  .docwrap { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s6); }
}

/* ---------------------------------------------------------- the index --- */

.docnav { position: sticky; top: calc(var(--bar-h) + var(--s4)); align-self: start; }
@media (max-width: 940px) {
  .docnav { position: static; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
}
.docnav-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-4); padding-bottom: var(--s2);
}
.docnav ol { counter-reset: sec; border-left: 1px solid var(--line); }
.docnav li { counter-increment: sec; }
.docnav a {
  display: grid; grid-template-columns: 26px 1fr; gap: 6px;
  padding: 8px 0 8px var(--s3);
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: .92rem; color: var(--tx-3);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.docnav a::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--mono); font-size: .74rem; color: var(--tx-4);
}
.docnav a:hover { color: var(--tx-2); }
.docnav a.on { color: var(--tx); border-left-color: var(--gold); }
.docnav a.on::before { color: var(--gold); }

/* ----------------------------------------------------------- the text --- */

.doc { max-width: 70ch; }
.doc > * + * { margin-top: var(--s3); }
.doc h1 { margin-bottom: var(--s3); }
.doc .docsub { font-size: 1.14rem; color: var(--tx-2); margin-bottom: var(--s6); max-width: 58ch; }

/* Every section opens with a hairline and its own number, so scrolling past
   one is obvious without a heading having to shout. */
.doc section { scroll-margin-top: 120px; padding-top: var(--s6); }
.doc section > h2 {
  display: grid; grid-template-columns: 46px 1fr; align-items: baseline; gap: var(--s2);
  font-size: clamp(1.32rem, 2.4vw, 1.75rem);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.doc section > h2::before {
  content: attr(data-n);
  font-family: var(--mono); font-weight: 500; font-size: .8rem;
  color: var(--gold); letter-spacing: .04em;
}
.doc section > * + * { margin-top: var(--s3); }

.doc p, .doc li { font-size: 1rem; line-height: 1.72; color: var(--tx-2); }
.doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--gold-lit); }

.doc ul, .doc ol { padding-left: var(--s4); }
.doc ul li { list-style: disc; }
.doc ol li { list-style: decimal; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--gold-dim); }

.doc code {
  font-family: var(--mono); font-size: .88em; color: var(--gold-lit);
  background: rgba(255, 255, 255, .05); padding: 2px 7px; border-radius: 5px;
}

/* A block that matters more than the paragraphs around it: a rule down the
   left in gold and a slightly raised ground. No icon, no shouting. */
.doc .note {
  padding: var(--s3) var(--s4);
  border-radius: 0 var(--r2) var(--r2) 0;
  border-left: 2px solid var(--gold);
  background: rgba(224, 168, 60, .06);
}
.doc .note p { color: var(--tx); }

/* `separate`, not `collapse`: a collapsed table throws its own border away at
   the corners, so the rounded outline simply does not draw. Spacing is zeroed
   and the rules are drawn per cell instead. */
.doc table {
  width: 100%; font-size: .96rem;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
}
.doc th {
  text-align: left; padding: 13px var(--s3);
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-4); background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--line);
}
.doc td { padding: 13px var(--s3); border-bottom: 1px solid var(--line); color: var(--tx-2); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc td:first-child { color: var(--tx); font-weight: 600; white-space: nowrap; }
.doc .scroller { overflow-x: auto; }

.docfoot {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.docfoot p { font-size: .9rem; color: var(--tx-4); }

/* ================================================================== 404 == */

.lost {
  min-height: 74vh; display: grid; place-items: center; text-align: center;
  padding: var(--s7) var(--pad);
}
.lost .big {
  font-size: clamp(6rem, 21vw, 14rem); font-weight: 800; line-height: .82;
  letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--gold-dim);
  user-select: none;
}
.lost h1 { margin-top: var(--s4); font-size: clamp(1.7rem, 4vw, 2.6rem); }
.lost p { margin: var(--s3) auto 0; color: var(--tx-2); max-width: 46ch; }
.lost .cta { margin-top: var(--s5); justify-content: center; }

/* ===========================================================================
   THE DOCS HUB, AND THE PAGE HEAD ON EACH SCRIPT'S DOCUMENT
   ---------------------------------------------------------------------------
   One page per script now. The group styles that used to be here are gone with
   the single long page they belonged to: an index of twenty-seven entries, and
   a reader scrolling past a script they do not own to reach the one they do.
   =========================================================================== */

/* ---- the hub ---- */
.docgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s3);
  align-items: stretch;
}

.docbig {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.docbig-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-sink); }
.docbig-art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.03) brightness(.8);
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
a.docbig:hover .docbig-art img { transform: scale(1.04); filter: saturate(1.1) brightness(.92); }
.docbig-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(19,21,25,.6) 80%, var(--surf) 100%);
}
.docbig-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.docbig-body h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; color: var(--tx); letter-spacing: -.02em; }
.docbig-body p { color: var(--tx-2); font-size: .95rem; }
.docbig .ticks { margin-top: auto; padding-top: var(--s2); }
.docbig .ticks li { font-size: .88rem; }
.docbig .pcard-go { margin-top: var(--s2); }

/* The status chip here is inline, not laid over art like the catalogue's. */
.docbig .pcard-status { position: static; align-self: flex-start; background: var(--gold-wash); color: var(--gold); }
.docbig .pcard-status.is-free { background: rgba(69,192,122,.12); color: #6fd79b; }

/* ---- the head of a script's document ---- */
.dochead { margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.dochead-eyebrow { margin-bottom: var(--s2); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.dochead-eyebrow a { color: var(--tx-3); text-decoration: none; }
.dochead-eyebrow a:hover { color: var(--gold); }
.dochead h1 { margin-bottom: var(--s2); }
.dochead-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---- back to the hub, under the index ---- */
.docnav-back {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--tx-3); text-decoration: none;
}
.docnav-back:hover { color: var(--gold); }
.docnav-back .i { width: 1em; height: 1em; transform: rotate(180deg); }