/*
 * Mandate's docs, in the app's art direction (app/src/app/globals.css, lib/ui.ts): the dark green ink, ivory text,
 * brass accents, 1px hairlines, Instrument Serif for titles, Geist for text, Geist Mono for figures and code.
 * Sizes in px: the default theme sets html to 62.5%.
 */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../brand/fonts/InstrumentSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../brand/fonts/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../brand/fonts/Geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../brand/fonts/GeistMono.woff2") format("woff2"); }

:root {
  --ink: #0b0f0d;
  --ink2: #0e1411;
  --surface: #111915;
  --surface-on: #16201b;
  --line: #262b24;
  --line-soft: #1e2621;
  --line-brass: #3a3226;
  --ivory: #ede7da;
  --ivory60: #a39d90;
  --muted: #8e887c;
  --brass: #c2a06a;
  --brass-hover: #e2c894;
  --sage: #8fb39a;
  --brick: #d08770;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- base ---------- */

html, body { background: var(--ink); }
body, .book, .book-header, .book-summary,
.book .book-body .page-wrapper .page-inner section.markdown-section {
  font-family: var(--sans);
}
body { color: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--line-brass); color: var(--ivory); }
a { color: var(--brass); }
a:hover { color: var(--brass-hover); }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.book .book-body .page-wrapper:focus, .book .book-body .page-wrapper:focus-visible { outline: none; }

/* ---------- sidebar ---------- */

.book .book-summary {
  background: var(--ink2);
  border-right: 1px solid var(--line);
  color: var(--ivory60);
}
.mandate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 14px;
  color: var(--ivory) !important;
  text-decoration: none !important;
}
.mandate-mark { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.mandate-wordmark { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ivory); }
.mandate-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--line-brass);
  padding: 2px 6px;
  border-radius: 2px;
}
.mandate-langs { display: flex; gap: 6px; padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.mandate-langs a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ivory60);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 4px 10px;
  text-decoration: none;
}
.mandate-langs a:hover { color: var(--ivory); border-color: var(--line-brass); }
.mandate-langs a.on { color: var(--ink); background: var(--brass); border-color: var(--brass); }

#book-search-input { background: transparent; border-bottom: 1px solid var(--line); padding: 10px 14px; }
#book-search-input input, #book-search-input input:focus, #book-search-input input:hover {
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 14px;
}
#book-search-input input::placeholder { color: var(--muted); }

.book .book-summary ul.summary { padding-top: 6px; }
.book .book-summary ul.summary li a,
.book .book-summary ul.summary li span {
  color: var(--ivory60);
  font-size: 14.5px;
  padding: 9px 20px;
  border-left: 2px solid transparent;
}
.book .book-summary ul.summary li a:hover { color: var(--ivory); background: var(--surface); text-decoration: none; }
.book .book-summary ul.summary li.active > a {
  color: var(--ivory);
  background: var(--surface-on);
  border-left-color: var(--brass);
}
.book .book-summary ul.summary li.header {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 20px 6px;
}
.book .book-summary ul.summary li.divider { background: var(--line); height: 1px; margin: 10px 0; }
.book .book-summary ul.summary li a.mandate-app-link { color: var(--brass); font-weight: 500; }
.book .book-summary ul.summary li a.mandate-app-link:hover { color: var(--brass-hover); }

/* ---------- top bar ---------- */

.book .book-body { background: var(--ink); }
.book .book-header {
  background: var(--ink);
  color: var(--ivory60);
  border-bottom: 1px solid var(--line);
}
.book .book-header .btn { color: var(--ivory60); }
.book .book-header .btn:hover { color: var(--brass); }
.book .book-header h1 { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ivory); }
.book .book-header h1 a, .book .book-header h1 a:hover { color: var(--ivory); }
.mandate-bar { display: none; float: left; align-items: center; gap: 8px; height: 50px; padding: 0 8px; text-decoration: none !important; }
.mandate-bar .mandate-wordmark { font-size: 22px; }
@media (max-width: 600px) {
  .mandate-bar { display: flex; }
  .book .book-header h1 { display: none; }
}

/* ---------- page ---------- */

.book .book-body .page-wrapper .page-inner { max-width: 820px; padding: 24px 32px 120px; }
@media (max-width: 600px) { .book .book-body .page-wrapper .page-inner { padding: 16px 16px 96px; } }

.markdown-section { color: var(--ivory60); font-size: 16.5px; line-height: 1.7; }
.markdown-section p, .markdown-section ul, .markdown-section ol { color: var(--ivory60); }
.markdown-section strong { color: var(--ivory); font-weight: 600; }
.markdown-section em { font-style: italic; }
.markdown-section a { color: var(--brass); text-decoration: none; border-bottom: 1px solid var(--line-brass); }
.markdown-section a:hover { color: var(--brass-hover); border-bottom-color: var(--brass); }

.markdown-section h1, .markdown-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.01em;
  border: none;
}
.markdown-section h1 { font-size: 56px; line-height: 1.02; margin: 28px 0 22px; }
.markdown-section h1 em, .markdown-section h2 em { color: var(--brass); }
.markdown-section h2 { font-size: 34px; line-height: 1.1; margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); }
.markdown-section h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--ivory); margin: 32px 0 8px; }
.markdown-section h4 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 28px 0 8px;
}
@media (max-width: 600px) {
  .markdown-section h1 { font-size: 42px; }
  .markdown-section h2 { font-size: 28px; }
}

.markdown-section hr { height: 1px; background: var(--line); border: 0; margin: 40px 0; }
.markdown-section blockquote {
  border-left: 2px solid var(--brass);
  background: var(--ink2);
  color: var(--ivory60);
  margin: 24px 0;
  padding: 14px 20px;
}
.markdown-section blockquote p { margin: 0; }

.markdown-section code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ivory);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
}
.markdown-section pre {
  background: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 16px 18px;
}
.markdown-section pre > code { background: none; border: 0; padding: 0; color: var(--ivory); font-size: 13.5px; }

.markdown-section table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15px;
}
.markdown-section table tr { background: transparent; border-top: 1px solid var(--line); }
.markdown-section table tr:nth-child(2n) { background: transparent; }
.markdown-section table th, .markdown-section table td { border: 0; border-bottom: 1px solid var(--line); padding: 11px 10px 11px 0; text-align: left; }
.markdown-section table th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.markdown-section table td { color: var(--ivory60); }
.markdown-section table td:first-child { color: var(--ivory); }
.markdown-section table td code { white-space: nowrap; }
@media (max-width: 600px) { .markdown-section table { display: block; overflow-x: auto; } }

/* Figures read as the app's: tabular, mono. */
.markdown-section .fig { font-family: var(--mono); color: var(--ivory); }

/* The certificate on the first page. */
.markdown-section img[src$="rosette.svg"] { display: block; width: 180px; height: 180px; margin: 8px 0 0; border: 0; }

/* ---------- hints (callouts) ---------- */

.markdown-section .alert {
  background: var(--ink2);
  color: var(--ivory60);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: 2px;
  padding: 14px 18px;
  margin: 22px 0;
}
.markdown-section .alert.alert-warning, .markdown-section .alert.alert-danger { border-left-color: var(--brick); }
.markdown-section .alert.alert-success { border-left-color: var(--sage); }
.markdown-section .alert .hints-icon { color: var(--brass); }
.markdown-section .alert.alert-warning .hints-icon, .markdown-section .alert.alert-danger .hints-icon { color: var(--brick); }
.markdown-section .alert.alert-success .hints-icon { color: var(--sage); }
.markdown-section .alert p:last-child { margin-bottom: 0; }

/* ---------- previous / next ---------- */

.book .book-body .navigation { color: var(--muted); }
.book .book-body .navigation:hover { color: var(--brass); }

/* ---------- search results ---------- */

.book .book-body .page-wrapper .page-inner section.search-results { color: var(--ivory60); }
.search-results .search-results-title { font-family: var(--serif); font-size: 30px; color: var(--ivory); }
.search-results .search-results-list .search-results-item h3 a { color: var(--brass); }
.search-results .search-results-list .search-results-item { border-bottom: 1px solid var(--line); }
.search-noresults .no-results .search-results-title { color: var(--ivory); }

/* ---------- scrollbars ---------- */

.book .book-summary, .book .book-body .body-inner { scrollbar-color: var(--line) transparent; }