/* Document pages — Imprint, Privacy, theater Sign in / Forgot password.
   Quiet typographic scaffold over the public shell. Outer track matches
   the landing's hero/accordion track (--max-hero) so every page's first
   character lines up at the same x as the accordion chevrons. Reading
   width is constrained per-element so prose doesn't sprawl. */

.doc {
  max-width: var(--max-hero);
  margin: 0 auto;
  padding-block: var(--page-top) var(--page-bot);
}
.doc-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-s) 0;
  overflow-wrap: break-word;
}
.doc-meta {
  font-size: var(--step--1);
  color: var(--ink-mute);
  margin: 0 0 var(--space-l) 0;
}
/* doc-lede — the introductory paragraph that sits between the meta line
   and the first section. Same size as body copy (Felix's brief: a
   single body size on /imprint, only the title and meta differ).
   ink-soft holds it slightly back from the section bodies. */
.doc-lede {
  font-family: var(--body-font);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--space-xl) 0;
  max-width: 60ch;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.doc-section {
  margin-top: var(--space-xl);
}
.doc-section h2 {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2xs) 0;
}
.doc-subhead {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: var(--space-m) 0 var(--space-2xs) 0;
}
.doc-section p {
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-s) 0;
  max-width: 60ch;
}
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul,
.doc-section ol {
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-s) 0;
  max-width: 60ch;
  padding-left: 1.4em;
}
.doc-section ul li,
.doc-section ol li { margin-bottom: 0.4em; }
.doc-section ul li:last-child,
.doc-section ol li:last-child { margin-bottom: 0; }
/* Default <code> inside doc copy renders as a transparent tagging box
   (matches the .tag-tech component in components.css). Authors can keep
   writing plain `<code>X</code>` Markdown-style and get the right look. */
.doc-section code {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.85em;
  line-height: 1.4;
  padding: 1px 6px;
  border: 1px solid var(--rule-mid);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-soft);
  vertical-align: baseline;
  white-space: nowrap;
}

/* Tech-stack table.
   .doc-table-wrap is the responsive container: on narrow viewports the
   table can scroll horizontally rather than collapsing or clipping. The
   `tabindex="0"` plus `role="region"` in the markup makes the scroll
   region keyboard-reachable for assistive tech.
   On viewports wide enough to fit the full table, the wrapper is just
   a transparent div — no visible boundary. */
.doc-table-wrap {
  margin: 0 0 var(--space-s) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle visual hint that the region is independently scrollable on
     narrow viewports — an inset edge on the right when scrollable. */
  background:
    linear-gradient(to right, var(--bg-card) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(0,0,0,0), var(--bg-card) 70%) 100% 0,
    linear-gradient(to right, rgba(26,24,22,0.08), rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right, rgba(255,255,255,0), rgba(26,24,22,0.08));
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.doc-table-wrap:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.doc-table {
  width: 100%;
  min-width: 560px; /* below this width the table scrolls inside .doc-table-wrap */
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg-card);
}
.doc-table thead th {
  text-align: left;
  font-family: var(--body-font);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink);
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: var(--bg-mute);
}
.doc-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.doc-table tbody td {
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
}
.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td {
  border-bottom: 0;
}
.doc-table a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Auth shell — left-aligned to the chevron axis (max-hero outer track).
   Typography matches the .doc family above: auth pages and imprint are
   the same kind of small utility surface and should feel "from one
   piece" with each other. The card itself stays narrow (--max-login). */
.auth-shell {
  max-width: var(--max-hero);
  margin: 0 auto;
  padding-block: var(--login-top) var(--space-3xl);
}
.auth-card {
  width: 100%;
  max-width: var(--max-login);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.auth-title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: break-word;
}
/* Optional sub-line under the title — same role as .doc-meta on /imprint.
   Use it when a one-line orientation note belongs above the form/body. */
.auth-meta {
  font-size: var(--step--1);
  color: var(--ink-mute);
  margin: 0;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.auth-form .btn {
  width: 100%;
  margin-top: var(--space-s);
}
.auth-aux {
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
  overflow-wrap: break-word;
}
.auth-aux--mute {
  color: var(--ink-mute);
}
.auth-aux a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-aux a:hover { color: var(--ink-soft); }