/* Manual pages.

   The manuals are laid out as paper documents — dark text, white cards,
   gold rules — and their styling is inline on every element. They also
   embed dark UI mockups of the tools, which legitimately use white text
   on near-black. Recolouring the pages wholesale would invert those
   mockups too and make them unreadable.

   So the sheet keeps its paper look and sits on the dark page as an
   actual sheet of paper. The site chrome around it is unchanged. */

.manual-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.manual-bar a { color: var(--text-dim); text-decoration: none; }
.manual-bar a:hover { color: var(--accent-teal); }

.manual-bar span::before {
  content: "/";
  margin-right: 18px;
  color: var(--text-faint);
}

.manual-sheet {
  max-width: 1100px;
  margin: 0 auto 72px;
  padding: clamp(28px, 5vw, 64px);
  background: #fdfcfa;
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

/* The manuals set their own type inline; these only catch anything that
   slipped through without an inline rule. */
.manual-sheet img { max-width: 100%; height: auto; }
.manual-sheet table { max-width: 100%; }

/* Wide mockups and tables scroll rather than pushing the page sideways. */
.manual-sheet > div { max-width: 100%; }

@media (max-width: 720px) {
  .manual-sheet { padding: 20px 16px; margin-bottom: 40px; }
}

@media print {
  .site-header,
  .site-footer,
  .manual-bar { display: none; }
  .manual-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
  }
}

/* ---------- manuals index ---------- */

.manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.manual-card {
  display: block;
  padding: 22px 22px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  text-decoration: none;
}

.manual-card:hover {
  border-top-color: var(--accent-teal);
  box-shadow: 0 -1px 14px rgba(0, 255, 224, 0.28);
}

.manual-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.manual-card p {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
}

.manual-card .open {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent-teal);
}