/* Monids inner pages: Acuity. Builds on acuity.css.
   Page head, reading, auth, docs and pricing layouts, plus the Bootstrap components
   the Django templates use, restated in the Acuity system. See DESIGN.md. */

/* ---------- Bootstrap mapped onto Acuity tokens ---------- */
body.site {
  --bs-body-font-family: var(--f-text);
  --bs-body-font-size: 18px;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 12, 16, 18;
  --bs-link-hover-color: var(--ink);
  --bs-link-hover-color-rgb: 12, 16, 18;
  --bs-primary: var(--ink);
  --bs-primary-rgb: 12, 16, 18;
  --bs-secondary-rgb: 59, 71, 76;
  --bs-success: var(--green);
  --bs-success-rgb: 19, 114, 74;
  --bs-danger: var(--red);
  --bs-danger-rgb: 200, 32, 43;
  --bs-warning-rgb: 12, 16, 18;
  --bs-info-rgb: 59, 71, 76;
  --bs-light-rgb: 251, 252, 250;
  --bs-dark-rgb: 12, 16, 18;
  --bs-white-rgb: 251, 252, 250;
  --bs-border-color: var(--ink-line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-focus-ring-color: rgba(12, 16, 18, 0.35);
  /* slate under everything: short pages end on the footer's colour, main carries the paper */
  background: var(--slate);
  color: var(--ink);
}

body.site main { background: var(--paper); }
body.site .shadow, body.site .shadow-sm, body.site .shadow-lg { box-shadow: none !important; }
body.site .rounded, body.site .rounded-pill, body.site [class*="rounded-"] { border-radius: 0 !important; }
body.site .bg-white { background-color: var(--chart) !important; }
body.site .bg-light { background-color: var(--chart) !important; border: 1px solid var(--ink-line); }
body.site .text-muted { color: var(--ink-2) !important; }
body.site .lead { font-size: 21px; font-weight: 400; color: var(--ink); }
body.site .small, body.site small { font-size: 15px; }
body.site .container { max-width: 1280px; padding-inline: var(--gutter); }

body.site h1, body.site .h1, body.site .display-4 { font-family: var(--f-opt); font-weight: 400; letter-spacing: 0.04em; line-height: 1.05; text-wrap: balance; }
body.site h2, body.site .h2 { font-family: var(--f-opt); font-weight: 400; letter-spacing: 0.05em; line-height: 1.1; font-size: clamp(28px, 3.2vw, 40px); text-wrap: balance; }
body.site h3, body.site .h3 { font: 800 clamp(22px, 2vw, 26px)/1.25 var(--f-text); }
body.site h4, body.site .h4 { font: 800 21px/1.3 var(--f-text); }
body.site h5, body.site .h5 { font: 800 19px/1.3 var(--f-text); }
body.site h6, body.site .h6 { font: 600 13px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
body.site .fw-bold { font-weight: 800 !important; }

body.site code, body.site kbd, body.site .font-monospace { font-family: var(--f-mono) !important; }

/* Buttons */
body.site .btn, body.site .custom-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 20px;
  font: 600 16px/1 var(--f-text); letter-spacing: 0.02em; text-decoration: none;
  border: 2px solid var(--ink); border-radius: 0; box-shadow: none;
  background: transparent; color: var(--ink);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
body.site .btn-lg { min-height: 54px; font-size: 17px; padding: 0 24px; }
body.site .btn-sm { min-height: 36px; font-size: 14px; padding: 0 12px; }
body.site .btn-primary, body.site .btn-success, body.site .btn-dark, body.site .custom-btn { background: var(--ink); color: var(--chart); border-color: var(--ink); }
body.site .btn-primary:hover, body.site .btn-success:hover, body.site .btn-dark:hover, body.site .custom-btn:hover { background: var(--slate-3); border-color: var(--slate-3); color: var(--chart); }
body.site .btn-secondary, body.site .btn-outline-primary, body.site .btn-outline-secondary, body.site .btn-outline-danger, body.site .btn-outline-dark, body.site .btn-light, body.site .custom-border-btn { background: var(--chart); color: var(--ink); border-color: var(--ink); }
body.site .btn-secondary:hover, body.site .btn-outline-primary:hover, body.site .btn-outline-secondary:hover, body.site .btn-outline-danger:hover, body.site .btn-outline-dark:hover, body.site .btn-light:hover, body.site .custom-border-btn:hover { background: var(--ink); color: var(--chart); }
/* destructive actions: red line and text, never a red fill */
body.site .btn-danger { background: var(--chart); color: var(--red); border-color: var(--red); }
body.site .btn-danger:hover { background: var(--red); border-color: var(--red); color: var(--chart); }
body.site .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: none; }
body.site .btn.w-100, body.site .d-grid > .btn { width: 100%; }
body.site .btn-close { border-radius: 0; opacity: 0.7; }

/* Forms */
body.site .form-label, body.site .form-floating > label, body.site form label:not(.form-check-label) { font: 600 13px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
body.site .form-control, body.site .form-select {
  min-height: 50px; padding: 12px 14px;
  font: 400 17px/1.3 var(--f-text); color: var(--ink);
  background-color: var(--chart); border: 2px solid var(--ink-line); border-radius: 0; box-shadow: none;
}
body.site textarea.form-control { min-height: 140px; }
body.site .form-control::placeholder { color: #5f6b70; }
body.site .form-control:focus, body.site .form-select:focus { border-color: var(--ink); box-shadow: none; outline: 3px solid rgba(12, 16, 18, 0.18); outline-offset: 0; background-color: var(--chart); }
body.site .form-control.is-invalid, body.site .was-validated .form-control:invalid { border-color: var(--red); background-image: none; padding-right: 14px; }
body.site .form-control.is-valid { border-color: var(--ink-line); background-image: none; padding-right: 14px; }
body.site .invalid-feedback, body.site .text-danger { color: var(--red) !important; font-size: 15px; }
body.site .form-text, body.site .helptext { color: var(--ink-2); font-size: 14px; }
body.site .form-text ul, body.site .helptext ul { padding-left: 1.1em; margin: var(--s-2) 0 0; }
body.site .form-check-input { width: 20px; height: 20px; margin-top: 0.15em; border: 2px solid var(--ink); border-radius: 0; background-color: var(--chart); }
body.site .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
body.site .form-check-input:focus { box-shadow: none; outline: 3px solid rgba(12, 16, 18, 0.25); outline-offset: 2px; }
body.site .form-check-label { font-size: 16px; }
body.site .form-floating > .form-control, body.site .form-floating > .form-select { min-height: 60px; height: auto; padding: 1.7rem 14px 0.6rem; }
body.site .form-floating > textarea.form-control { min-height: 160px; }
body.site .form-floating > .form-control::placeholder { color: transparent; }
body.site .form-floating > .form-control:focus::placeholder { color: #5f6b70; }
body.site .form-floating > label { color: var(--ink-2); padding: 1.1rem 14px; }
body.site .form-floating > label::after { background: transparent !important; }
body.site .input-group-text { border-radius: 0; background: var(--paper); border: 2px solid var(--ink-line); }
body.site .mb-3:has(> .form-control), body.site .mb-3:has(> .form-select) { margin-bottom: var(--s-5) !important; }

/* Cards, alerts, lists, tables */
body.site .card { background: var(--chart); border: 1px solid var(--ink-line); border-radius: 0; box-shadow: none; }
body.site .card.border-primary, body.site .card.border-2 { border: 2px solid var(--ink); }
body.site .card-header { background: var(--paper); border-bottom: 1px solid var(--ink-line); border-radius: 0; font-weight: 800; }
body.site .card:hover { transform: none; }

body.site .alert {
  position: relative; border-radius: 0; border: 1px solid var(--ink-line); border-top: 3px solid var(--ink);
  background: var(--chart); color: var(--ink); font-size: 16px; padding: var(--s-4) var(--s-4);
}
body.site .alert-danger { border-top-color: var(--red); }
body.site .alert-danger strong:first-child { color: var(--red); }
body.site .alert ul { margin-top: var(--s-2); padding-left: 1.2em; }
body.site .alert .btn { margin-top: var(--s-2); }

body.site .list-group-item { border-radius: 0 !important; border-color: var(--ink-line); background: var(--chart); }
body.site .list-group-item.active { background: var(--ink); border-color: var(--ink); color: var(--chart); }

body.site .table { --bs-table-bg: var(--chart); --bs-table-hover-bg: var(--paper); --bs-table-striped-bg: var(--paper); --bs-table-border-color: var(--ink-line); font-size: 16px; margin: 0; }
body.site .table > :not(caption) > * > * { padding: 12px 14px; }
body.site .table thead th, body.site .table .table-light th { background: var(--paper); font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
body.site .table-responsive { border: 1px solid var(--ink-line); }

body.site .badge { border-radius: 0; font: 600 12px/1.2 var(--f-mono); letter-spacing: 0.04em; padding: 5px 8px; }
body.site .badge.bg-primary, body.site .badge.bg-dark, body.site .bg-pblue { background: var(--ink) !important; color: var(--chart) !important; }
body.site .badge.bg-success, body.site .badge.bg-danger { background: var(--ink) !important; color: var(--chart) !important; }

body.site .pagination { --bs-pagination-border-radius: 0; gap: 4px; }
body.site .page-link { border: 2px solid var(--ink-line); color: var(--ink); background: var(--chart); font-family: var(--f-mono); min-width: 42px; text-align: center; }
body.site .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--chart); }
body.site .page-link:focus { box-shadow: none; outline: 3px solid rgba(12, 16, 18, 0.25); }

body.site .accordion { --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: var(--paper); --bs-accordion-active-color: var(--ink); }
body.site .accordion-button { font: 800 18px/1.35 var(--f-text); }

/* Icons stay quiet: ink, never Bootstrap blue */
body.site .text-primary { color: var(--ink) !important; }
body.site .text-success, body.site .bi-check-circle-fill.text-success { color: var(--green) !important; }

/* ---------- Page head (dark band under the nav) ---------- */
.page-head { background: var(--slate); color: var(--on-dark); padding-block: var(--s-7) var(--s-8); border-bottom: 1px solid var(--slate-line); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.page-head--figure .page-head__grid { align-items: center; }
@media (min-width: 992px) {
  .page-head--figure .page-head__grid { grid-template-columns: 7fr 5fr; gap: 64px; }
}
.crumbs ol { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); font: 400 13px/1.4 var(--f-mono); color: var(--on-dark-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--slate-line); color: var(--on-dark-2); opacity: 0.6; }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--on-dark); }
body.site .page-head h1, .page-head__title { font-family: var(--f-opt); font-weight: 400; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: 0.04em; color: var(--chart); margin: 0; max-width: 20ch; text-wrap: balance; }
body.site .page-head__lede { margin: var(--s-4) 0 0; font-size: clamp(18px, 1.5vw, 21px); color: var(--on-dark-2); max-width: 52ch; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-5) 0 0; font: 400 14px/1.4 var(--f-mono); color: var(--on-dark-2); }
.page-head__meta dt { display: inline; font-weight: 400; }
.page-head__meta dd { display: inline; margin: 0 0 0 var(--s-2); color: var(--on-dark); }
.page-head__meta div { display: block; }
.page-head__figure { margin: 0; border: 10px solid var(--slate-3); background: var(--ink); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.6); }
.page-head__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.page-head__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
body.site .page-head .tab--light { color: var(--ink); }
body.site .page-head .tab--light:hover { color: var(--chart); }

/* ---------- Page body ---------- */
.page-body { padding-block: var(--s-8); }
@media (min-width: 1024px) { .page-body { padding-block: var(--s-9) var(--s-9); } }
.page-body--tight { padding-block: var(--s-7); }
.section-head { margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4); }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.panel { background: var(--chart); border: 1px solid var(--ink-line); padding: var(--s-5); }
.panel--rule { border-top: 2px solid var(--ink); }
.panel h2 + p, .panel h3 + p { margin-top: var(--s-2); }

/* legacy wrappers still used by some templates */
body.site .section-padding { padding-block: var(--s-8); }
body.site .section-bg { background: var(--paper); }
body.site .hero-section, body.site .site-header { background: var(--slate) !important; color: var(--on-dark); padding-block: var(--s-8); min-height: 0 !important; }
body.site .hero-section h1, body.site .hero-section h2, body.site .site-header h1, body.site .site-header h2 { color: var(--chart); }
body.site .hero-section .lead, body.site .hero-section p { color: var(--on-dark-2); }

/* ---------- Reading (articles, terms) ---------- */
.prose { max-width: 62ch; margin-inline: auto; font-size: 19px; line-height: 1.68; color: var(--ink); }
.prose > * + * { margin-top: 0; }
.prose p { margin: 0 0 1.1em; max-width: none; }
.prose .lead { font-size: 22px; line-height: 1.55; color: var(--ink); margin-bottom: 1.3em; }
body.site .prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 2.2em 0 0.7em; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
body.site .prose h3 { font: 800 22px/1.3 var(--f-text); margin: 1.8em 0 0.5em; }
body.site .prose h4 { margin: 1.5em 0 0.4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--ink-2); }
.prose a { font-weight: 600; text-decoration: underline; }
.prose strong { font-weight: 800; }
.prose img { border: 1px solid var(--ink-line); background: var(--chart); filter: grayscale(1) contrast(1.05); }
.prose img + p.text-muted, .prose .text-muted small, .prose figcaption { font-size: 15px; color: var(--ink-2); }
.prose blockquote {
  margin: 1.8em 0; padding: var(--s-5); background: var(--chart);
  border: 1px solid var(--ink-line); border-top: 2px solid var(--ink); font-size: 18px;
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose .bg-light { padding: var(--s-5) !important; }
.prose .row { --bs-gutter-x: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; background: var(--chart); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.prose th { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--ink-line); margin: 2em 0; opacity: 1; }
.prose .card { margin-block: 1.4em; }
.prose .card-body { padding: var(--s-5); }

/* ---------- Auth (sign in, register, password reset) ---------- */
.auth { background: var(--slate); color: var(--on-dark); padding-block: var(--s-7) var(--s-9); }
.auth__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (min-width: 992px) { .auth__grid { grid-template-columns: 5fr 6fr; gap: 80px; padding-top: var(--s-5); } }
.auth__title { font-family: var(--f-opt); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: 0.04em; color: var(--chart); margin: 0; }
body.site .auth__title { color: var(--chart); }
.auth__lede { margin: var(--s-4) 0 0; font-size: 19px; color: var(--on-dark-2); max-width: 40ch; }
.auth__points { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--slate-line); max-width: 440px; }
.auth__points li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--slate-line); font-size: 16px; color: var(--on-dark); }
.auth__points li span:last-child { font-family: var(--f-mono); color: var(--on-dark-2); }
.auth__card {
  background: var(--chart); color: var(--ink);
  border: 10px solid var(--slate-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 90px 18px rgba(236, 244, 240, 0.07), 0 30px 70px -12px rgba(0, 0, 0, 0.6);
  padding: var(--s-6) var(--s-5);
  max-width: 560px; width: 100%;
}
@media (min-width: 768px) { .auth__card { padding: var(--s-7) var(--s-7) var(--s-6); } }
.auth__card--center { margin-inline: auto; }
.auth__card h2 { font-family: var(--f-opt); font-weight: 400; font-size: 26px; letter-spacing: 0.06em; margin: 0 0 var(--s-5); }
.auth__or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; font: 400 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ink-line); }
.auth__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin: calc(var(--s-2) * -1) 0 var(--s-5); font-size: 15px; }
.auth__foot { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--ink-line); font-size: 16px; color: var(--ink-2); }
.auth__foot a, .auth__row a { color: var(--ink); font-weight: 600; }
.auth__card .btn-google { width: 100%; }
.auth__card .btn-google svg { width: 18px; height: 18px; }
.auth__card .alert { margin-bottom: var(--s-5); }
.auth__card .auth__submit { width: 100%; margin-top: var(--s-2); }
.auth__note { margin-top: var(--s-4); font-size: 15px; color: var(--ink-2); }

/* ---------- Docs ---------- */
.docs { padding-block: var(--s-7) var(--s-9); }
.docs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (min-width: 992px) { .docs__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } .docs__nav { position: sticky; top: var(--s-5); max-height: calc(100vh - 48px); overflow-y: auto; } }
.docs__nav { border-top: 2px solid var(--ink); padding-top: var(--s-3); font-size: 16px; }
.docs__nav .md-nav__title { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s-3); padding: 0; border: 0; display: block; }
.docs__nav ul, .docs__nav .md-nav__list { list-style: none; margin: 0; padding: 0; }
.docs__nav .md-nav__list .md-nav__list { padding-left: var(--s-4); }
.docs__nav .md-nav__item { list-style: none; }
.docs__nav .md-nav__link { display: flex; align-items: center; min-height: 40px; padding: 4px 0; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--ink-line); }
.docs__nav .md-nav__link:hover { color: var(--ink); text-decoration: underline; }
.docs__nav .md-nav__link--active { color: var(--ink); font-weight: 800; background: var(--paper); padding-inline: var(--s-3); }
.docs__nav input, .docs__nav label.md-nav__icon, .docs__nav .md-nav__icon { display: none; }
.docs__body { border-top: 2px solid var(--ink); padding-top: var(--s-5); min-width: 0; }

.docs__body .md-typeset { max-width: 64ch; }
body.site .md-typeset h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 var(--s-5); padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
body.site .md-typeset h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 2em 0 0.6em; }
body.site .md-typeset h3 { margin: 1.6em 0 0.5em; }
.md-typeset p, .md-typeset li { font-size: 18px; line-height: 1.65; color: var(--ink); }
.md-typeset ul, .md-typeset ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.md-typeset a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.md-typeset code { font-family: var(--f-mono); font-size: 0.88em; background: var(--paper); border: 1px solid var(--ink-line); padding: 1px 5px; color: var(--ink); }
.md-typeset .highlight, .md-typeset pre { background: var(--slate); color: var(--on-dark); margin: 1.4em 0; border: 0; }
.md-typeset .highlight pre, .md-typeset pre { margin: 0; padding: var(--s-5); overflow-x: auto; font: 400 15px/1.6 var(--f-mono); background: transparent; }
.md-typeset .highlight code, .md-typeset pre code { background: transparent; border: 0; padding: 0; color: var(--on-dark); font-size: 15px; }
.md-typeset .highlight [class*="hljs"] { background: transparent !important; color: inherit !important; }
.md-typeset .highlight .c, .md-typeset .highlight .c1, .md-typeset .highlight .cm, .md-typeset .highlight .ch, .md-typeset .highlight .cp, .md-typeset .highlight .cs { color: var(--on-dark-2); font-style: italic; }
.md-typeset .highlight .k, .md-typeset .highlight .kc, .md-typeset .highlight .kd, .md-typeset .highlight .kn, .md-typeset .highlight .kr, .md-typeset .highlight .nt, .md-typeset .highlight .nb { color: var(--chart); font-weight: 600; }
.md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2, .md-typeset .highlight .sd, .md-typeset .highlight .se, .md-typeset .highlight .sh { color: #c6dccf; }
.md-typeset .highlight .m, .md-typeset .highlight .mi, .md-typeset .highlight .mf, .md-typeset .highlight .l, .md-typeset .highlight .kt { color: #e6d3c4; }
.md-typeset .highlight .o, .md-typeset .highlight .p, .md-typeset .highlight .n, .md-typeset .highlight .na, .md-typeset .highlight .nx { color: var(--on-dark); }
.md-typeset .highlight .err { color: var(--on-dark); background: none; }
.md-typeset table:not([class]) { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: table; }
.md-typeset table:not([class]) th, .md-typeset table:not([class]) td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.md-typeset table:not([class]) th { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.md-typeset .admonition, .md-typeset details { background: var(--paper); border: 1px solid var(--ink-line); border-top: 2px solid var(--ink); padding: var(--s-4) var(--s-5); margin: 1.4em 0; }
.md-typeset .admonition-title { font-weight: 800; margin-bottom: var(--s-2); }
.md-typeset img { border: 1px solid var(--ink-line); }
.headerlink { opacity: 0; margin-left: 0.4em; text-decoration: none !important; color: var(--ink-2) !important; font-family: var(--f-mono); }
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, .headerlink:focus { opacity: 1; }

/* ---------- Resources index ---------- */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: line; }
.index-list li { border-bottom: 1px solid var(--ink-line); counter-increment: line; position: relative; }
.index-list li::after { content: counter(line); position: absolute; right: 0; top: var(--s-5); font: 400 11px/1 var(--f-mono); color: var(--ink-2); }
.entry { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s-4); row-gap: var(--s-2); padding-block: var(--s-5); text-decoration: none; color: var(--ink); }
.entry img { grid-row: span 3; width: 96px; height: 96px; object-fit: cover; filter: grayscale(1) contrast(1.05); border: 1px solid var(--ink-line); }
.entry__title { font: 800 22px/1.35 var(--f-text); padding-right: 32px; }
.entry__desc { font-size: 17px; color: var(--ink-2); max-width: 64ch; }
.entry__more { font: 600 13px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.entry:hover .entry__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (min-width: 768px) {
  .entry { grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--s-6); }
  .entry img { width: 160px; height: 160px; }
  .entry__title { font-size: 26px; }
}

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.plan { display: flex; flex-direction: column; background: var(--chart); border: 2px solid var(--ink); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 2px solid var(--ink); }
body.site .plan__name { margin: 0; font: 400 26px/1 var(--f-opt); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.plan__tag { font: 600 12px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--ink); padding: 5px 8px; }
.plan__price { padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--ink-line); }
.plan__amount { font: 400 clamp(48px, 5vw, 64px)/1 var(--f-opt); letter-spacing: 0.02em; }
.plan__amount small { font: 400 16px/1 var(--f-mono); color: var(--ink-2); margin-left: var(--s-2); letter-spacing: 0; }
.plan__amount a { text-decoration: none; }
.plan__amount a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.plan__for { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: 17px; }
.plan__list { list-style: none; margin: 0; padding: 0 var(--s-5); flex: 1; }
.plan__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--ink-line); font-size: 16px; }
.plan__list li:last-child { border-bottom: 0; }
.plan__list .mark-yes { color: var(--ink); font-weight: 800; }
.plan__list .mark-no { color: var(--ink-2); }
.plan__list .off { color: var(--ink-2); }
.plan__list small { display: block; color: var(--ink-2); font-size: 14px; }
.plan__lead { padding: var(--s-4) var(--s-5) 0; font-weight: 800; }
.plan__cta { padding: var(--s-5); border-top: 1px solid var(--ink-line); }
.plan__cta .tab { width: 100%; }
.plan__cta p { margin: var(--s-2) 0 0; font-size: 14px; color: var(--ink-2); text-align: center; max-width: none; }
.plan--pro { border-width: 2px; }
.plan--pro .plan__head { background: var(--ink); color: var(--chart); }
body.site .plan--pro .plan__name { color: var(--chart); }
.plan--pro .plan__tag { border-color: var(--chart); }

.compare { margin-top: var(--s-8); }
.compare table { width: 100%; border-collapse: collapse; background: var(--chart); font-size: 16px; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--ink-line); text-align: left; vertical-align: middle; }
.compare thead th { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); background: var(--paper); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 24%; }
.compare .yes { color: var(--ink); font-weight: 800; }
.compare .no { color: var(--ink-2); }
.compare tbody th { font-weight: 600; }
.compare__wrap { overflow-x: auto; border: 1px solid var(--ink-line); }

.cta-band { background: var(--slate); color: var(--on-dark); padding-block: var(--s-8); }
.cta-band__inner { display: grid; gap: var(--s-5); }
body.site .cta-band h2 { color: var(--chart); margin: 0; }
.cta-band p { color: var(--on-dark-2); margin: 0; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 992px) { .contact__grid { grid-template-columns: 7fr 4fr; gap: 64px; } }
.linklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--ink-line); }
.linklist li { border-bottom: 1px solid var(--ink-line); }
.linklist a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; text-decoration: none; font-weight: 600; }
.linklist a::after { content: "\2192"; font-family: var(--f-mono); color: var(--ink-2); }
.linklist a:hover { text-decoration: underline; }

/* ---------- Image modal (article figures) ---------- */
.image-modal { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(12, 16, 18, 0.92); align-items: center; justify-content: center; padding: var(--s-5); }
.image-modal.active { display: flex; }
.image-modal-content { max-width: min(1200px, 100%); max-height: 90vh; border: 10px solid var(--slate-3); background: var(--chart); }
.image-modal-close { position: absolute; top: var(--s-4); right: var(--s-5); font: 400 40px/1 var(--f-text); color: var(--chart); cursor: pointer; }
.topics-detail-block-image { cursor: zoom-in; }

@media (max-width: 559px) {
  .page-head { padding-block: var(--s-6) var(--s-7); }
  .prose { font-size: 18px; }
  .prose .lead { font-size: 20px; }
  .plan__head, .plan__price, .plan__list, .plan__cta, .plan__lead { padding-inline: var(--s-4); }
}

/* ---------- Single-card auth pages (reset, confirm, logout) ---------- */
.auth--single { padding-block: var(--s-8) var(--s-9); }
.auth__cardtitle { font-family: var(--f-opt); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.08; letter-spacing: 0.05em; margin: 0 0 var(--s-4); text-wrap: balance; }
body.site .auth__cardtitle { color: var(--ink); }
.auth__card p { max-width: none; }
.auth__steps { margin: var(--s-4) 0 0; padding-left: 1.3em; }
.auth__steps li { margin-bottom: var(--s-2); }

/* Legal text: numbered sections read as a document, not as display headings */
body.site .prose--legal h2 { font: 800 22px/1.3 var(--f-text); letter-spacing: 0; margin: 2em 0 0.5em; padding-top: var(--s-4); border-top: 1px solid var(--ink-line); }
body.site .prose--legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Record (domain detail, the exam record outside the frontpage) ---------- */
.record-card { background: var(--chart); border: 2px solid var(--ink); }
.record-card + .record-card { margin-top: var(--s-6); }
.record-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 2px solid var(--ink); }
.record-card__kind { margin: 0; font: 400 18px/1 var(--f-opt); letter-spacing: 0.1em; text-transform: uppercase; }
.record-card__domain { margin: 0; padding: var(--s-5) var(--s-4); font: 600 clamp(24px, 3.6vw, 40px)/1.15 var(--f-mono); border-bottom: 1px solid var(--ink-line); overflow-wrap: anywhere; }
.record-card dl { margin: 0; }
.record-card dl > div { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--ink-line); }
.record-card dl > div:last-child { border-bottom: 0; }
.record-card dt { font: 400 13px/1.5 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.record-card dd { margin: 0; font-weight: 600; font-size: 16px; }
.record-card dd ul { margin: 0; padding-left: 1.1em; font-weight: 400; font-family: var(--f-mono); font-size: 15px; }
.record-card .ok { color: var(--green); }
.record-card .bad { color: var(--red); }
.record-card .muted { color: var(--ink-2); font-weight: 400; }
.matchlist { list-style: none; margin: 0; padding: 0; }
.matchlist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--ink-line); }
.matchlist li:last-child { border-bottom: 0; }
.matchlist time { font-family: var(--f-mono); font-size: 14px; color: var(--ink-2); }
.page-narrow { max-width: 720px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---------- Alert events ---------- */
.filterbar { max-width: 640px; margin-bottom: var(--s-6); }
.filterbar__row { display: flex; gap: 0; }
.filterbar__row .form-select { flex: 1; min-width: 0; border-right: 0; }
.filterbar__row .btn { min-height: 50px; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.event__when { font: 400 13px/1.3 var(--f-mono); }
.event__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.event__shot { display: block; padding: var(--s-4); border-top: 1px solid var(--ink-line); background: var(--paper); }
.event__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; border: 1px solid var(--ink-line); background: var(--chart); }
.event__snippet { display: block; margin-top: var(--s-1); font: 400 14px/1.45 var(--f-mono); color: var(--ink-2); }
.record-card__domain a { text-decoration: none; }
.record-card__domain a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .event__grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .event__shot { border-top: 0; border-left: 1px solid var(--ink-line); }
}
.page-head:has(p.page-head__title) { padding-block: var(--s-6); }
p.page-head__title { font-size: clamp(28px, 3.4vw, 44px); }

/* elements that carry their own width keep it */
body.site .panel p, body.site .card p, body.site .auth__card p, body.site .alert p, body.site .plan p, body.site .record-card p, body.site .cta-band p, body.site td p { max-width: none; }
.prose p, .md-typeset p { max-width: none; }

/* reading list steps down like chart lines */
@media (min-width: 768px) {
  .index-list li:nth-child(1) .entry__title { font-size: 28px; }
  .index-list li:nth-child(2) .entry__title { font-size: 25px; }
  .index-list li:nth-child(3) .entry__title { font-size: 22px; }
  .index-list li:nth-child(n+4) .entry__title { font-size: 20px; }
}
/* substitutions in running text get the misread bracket, domains set in mono */
.prose .domain { font-family: var(--f-mono); font-size: 0.92em; }
.prose mark.misread { font-family: var(--f-mono); }