/* Public pages that aren't the homepage: docs, sign in, register.
   Shares the nav/footer/button language with home.css. */

/* ------------------------------------------------------------- chrome --- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 18px var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--weight-bold);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* See home.css — inline SVG so currentColor follows the theme. */
.brand__mark {
  height: 1.15em;
  width: auto;
  flex: none;
  fill: currentColor;
}

.brand:hover {
  color: var(--color-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
}

.site-nav a {
  color: var(--color-muted);
}

.site-nav a:hover {
  color: var(--color-ink);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary) !important;
}

.btn-primary:hover {
  background: var(--color-ink);
  color: var(--color-bg) !important;
}

.btn-ghost {
  border-color: var(--color-border-strong);
  color: var(--color-ink) !important;
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-text) !important;
}

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

.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 46rem);
  gap: var(--space-8);
  justify-content: center;
  padding: 0 var(--space-6);
}

.docs-sidebar {
  padding-top: var(--space-9);
}

.docs-sidebar nav {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
}

.docs-sidebar-title {
  position: sticky;
  top: 0;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.docs-sidebar a {
  padding: 6px 0 6px var(--space-3);
  border-left: 2px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.docs-sidebar a.sub {
  padding-left: var(--space-5);
  font-size: 13px;
}

.docs-sidebar a:hover {
  color: var(--color-ink);
}

.docs-sidebar a.active {
  border-left-color: var(--color-primary);
  color: var(--color-ink);
}

.docs {
  min-width: 0;
  padding: var(--space-9) 0 var(--space-10);
}

.docs [id] {
  scroll-margin-top: var(--space-5);
}

.docs-lede {
  font-size: var(--text-lg);
}

.docs .steps {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.docs .steps::marker,
.docs .steps li::marker {
  font-family: var(--font-mono);
  color: var(--color-primary-text);
}

.docs kbd {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
}

.docs h1 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

.docs h2 {
  margin: var(--space-9) 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.docs h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.docs p,
.docs li {
  color: var(--color-muted);
  line-height: var(--leading-body);
}

.docs a {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.docs strong {
  color: var(--color-ink);
}

.docs pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  color: var(--color-ink);
  line-height: 1.7;
}

.docs code {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  padding: 1px var(--space-1);
  color: var(--color-ink);
}

.docs pre code {
  background: none;
  border: none;
  padding: 0;
}

.docs table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--space-5) 0;
}

.docs th,
.docs td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.docs th {
  color: var(--color-muted);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
}

.docs td {
  color: var(--color-muted);
}

.eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-primary-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* ---------------------------------------------------------- auth forms --- */

.auth-main {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  padding: var(--space-7);
}

.auth-card h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.auth-card label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-2);
}

.auth-card input {
  width: 100%;
  padding: var(--space-3);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-none);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.auth-card input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.auth-card button {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  margin-top: var(--space-2);
}

.auth-card .auth-alt {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.auth-card .auth-alt a {
  color: var(--color-primary-text);
}

.form-error {
  display: none;
  background: var(--color-danger-soft);
  border-left: 2px solid var(--color-danger);
  color: var(--color-danger);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.form-error.visible {
  display: block;
}

/* Inline validation for a single field. The line is reserved even when the
   message is empty, so the form does not jump every time it appears or
   clears while the user is still typing.

   The two states read differently in words ("Passwords match" vs "Passwords
   don't match"), so colour is reinforcement rather than the only signal
   (WCAG 1.4.1). A ✓/✕ prefix was tried and dropped — Space Grotesk has
   neither glyph, and the fallback renders the check as a square-root sign. */
.field-hint {
  min-height: 1.25rem;
  line-height: 1.25rem;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Pull the field it describes in close, so the pairing is unambiguous. */
.auth-card input:has(+ .field-hint) {
  margin-bottom: var(--space-2);
}

.field-hint.is-match {
  color: var(--color-success-text);
}

.field-hint.is-mismatch {
  color: var(--color-danger-text);
}

@media (max-width: 620px) {
  .site-header {
    padding: var(--space-3) var(--space-5);
  }

  .site-nav {
    gap: var(--space-4);
    font-size: var(--text-sm);
  }

  .docs {
    padding: var(--space-7) 0 var(--space-9);
  }
}

/* Sidebar folds away when the two columns no longer fit comfortably */
@media (max-width: 860px) {
  .docs-layout {
    grid-template-columns: minmax(0, 46rem);
  }

  .docs-sidebar {
    display: none;
  }
}