/* =========================================================================
   THE PAPER - a document in the landing page's visual language.

   Uses the tokens and fonts from style.css (lime on ink, Archivo
   widened for titles, Space Grotesk for text, JetBrains for figures) and adds only
   what a document needs: a reading measure, numbered sections, a
   table of rules and one of addresses. Every class starts with `doc-` so it
   does not collide with anything on the main page.
   ========================================================================= */

.doc { position: relative; z-index: 2; padding: calc(var(--nav-h) + 48px) 0 120px; }
.doc-head { max-width: 1080px; }
.doc-eyebrow { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.doc-eyebrow span { color: var(--lime); }
.doc-eyebrow b { color: var(--text-faint); font-weight: 400; }

/* The title: two lines, like the hero. The second is the conclusion, so it is lime and
   introduced by a drawn arrow (see ARROW in paper/page.tsx). */
.doc h1 {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  /* The size is capped (and the header widened to 1080) so the bottom line fits
     WHOLE on one line on a large screen: two lines, as required, not two and a
     tail. Measured in the page: the line needs 20.6em, so at 46px it has over
     130px of slack, enough not to wrap even with the fallback font. */
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.015em;
  color: var(--text);
  display: grid; gap: 3px;
}
.doc h1 .hl { color: var(--lime); text-shadow: 0 0 60px rgba(198, 255, 61, 0.28); }
.doc-arrow {
  display: inline-block; width: 1.3em; height: 0.42em; margin-right: 0.26em;
  vertical-align: 0.04em;
}
.doc-lede { margin-top: 26px; max-width: 62ch; color: var(--text-dim); font-size: 17px; line-height: 1.62; }

/* definitii: documentul isi inventeaza termenii, deci ii si explica */
.doc-def { max-width: 66ch; margin: 34px 0 0; display: grid; gap: 16px; }
.doc-def dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 6px;
}
.doc-def dd { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.62; }

/* cuprins */
.doc-toc {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 48px 0 0; padding: 20px 0;
  border-block: 1px solid var(--line);
}
.doc-toc a { color: var(--text-faint); transition: color 0.2s; }
.doc-toc a:hover { color: var(--lime); }

/* corpul */
.doc-body { margin-top: 12px; }
.doc-body h2 {
  font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.05; color: var(--text);
  margin: 72px 0 20px; display: flex; align-items: baseline; gap: 14px; max-width: 24ch;
  /* antetul e fix: fara asta, cuprinsul aterizeaza cu titlul sub bara */
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.doc-body h2 .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--lime); font-stretch: 100%; }
.doc-body p { max-width: 66ch; color: var(--text-dim); font-size: 16px; line-height: 1.72; margin: 0 0 18px; }
.doc-body b { color: var(--text); font-weight: 600; }
.doc-body i { color: var(--text); font-style: italic; }
.doc-body code { font-family: var(--mono); font-size: 13.5px; color: var(--lime); }

/* replica: trei pe tot documentul, atat. Selectorul e dublu (.doc-body .doc-pull)
   pentru ca `.doc-body p` are aceeasi greutate si ar castiga altfel. */
.doc-body .doc-pull {
  font-family: var(--display); font-stretch: 112%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 26px); line-height: 1.14; letter-spacing: -0.01em;
  color: var(--text-faint); max-width: 30ch; margin: 38px 0 34px;
}
.doc-body .doc-pull b { color: var(--lime); font-weight: 800; }

/* garda: o regula pe rand, cu muchie lime la stanga */
.doc-guard { max-width: 66ch; margin: 24px 0 26px; display: grid; gap: 10px; }
.doc-guard > div { border-left: 2px solid var(--lime-line); padding: 2px 0 2px 16px; }
.doc-guard dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); margin-bottom: 5px; }
.doc-guard dd { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.62; }

/* traseul banilor: pasi numerotati */
.doc-flow { max-width: 66ch; margin: 22px 0; padding: 0; list-style: none; counter-reset: f; display: grid; gap: 14px; }
.doc-flow li { counter-increment: f; position: relative; padding-left: 48px; color: var(--text-dim); font-size: 15.5px; line-height: 1.62; }
.doc-flow li::before {
  content: "0" counter(f); position: absolute; left: 0; top: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--lime);
  border: 1px solid var(--lime-line); padding: 3px 7px;
}

/* addresses */
.doc-table { margin: 22px 0 0; overflow-x: auto; border: 1px solid var(--line); }
.doc-table table { width: 100%; border-collapse: collapse; }
.doc-table th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint); padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.doc-table td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--text-dim); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { color: var(--text); white-space: nowrap; }
.doc-table td a { font-family: var(--mono); font-size: 12.5px; color: var(--lime); white-space: nowrap; border-bottom: 1px solid transparent; }
.doc-table td a:hover { border-bottom-color: var(--lime-line); }

.doc-end {
  margin: 72px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime);
}
.doc-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

@media (max-width: 720px) {
  .doc { padding-top: calc(var(--nav-h) + 24px); }
  .doc-body h2 { margin-top: 52px; }
}

/* tiparire: documentul, fara decor */
@media print {
  .bg-grid, .bg-glow, .scan, .sweep, .grain, .hud, .cursor, .nav, .menu, .doc-toc, .doc-actions, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .doc h1, .doc h1 .hl, .doc-body h2, .doc-body b, .doc-table td:first-child { color: #000; text-shadow: none; }
  .doc-lede, .doc-body p, .doc-guard dd, .doc-def dd, .doc-flow li, .doc-table td { color: #222; }
  .doc-body h2 .n, .doc-end, .doc-table td a, .doc-def dt { color: #000; }
  .doc-body .doc-pull, .doc-body .doc-pull b { color: #000; }
  .doc-guard > div { border-left-color: #999; }
  .doc-flow li::before { border-color: #999; }
}