/* Shared visual language: paper, ink, and the colors of field robotics. */
:root {
  color-scheme: light;
  --paper: #f5f3ec;
  --surface: #fcfbf7;
  --surface-soft: #ecebe3;
  --ink: #282b25;
  --muted: #686d62;
  --line: #d5d5c9;
  --accent: #9c4e32;
  --accent-soft: #eee1d8;
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'DM Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
html.dark {
  color-scheme: dark;
  --paper: #20231f;
  --surface: #282c26;
  --surface-soft: #30352e;
  --ink: #ecece2;
  --muted: #b1b6a8;
  --line: #464c41;
  --accent: #dfa281;
  --accent-soft: #463a30;
}
html { scroll-padding-top: 100px; }
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); color: var(--ink); }
h1, h2, h3 { color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 4px;
}
button:disabled { cursor: not-allowed; }
a, button { text-underline-offset: .22em; }
body > header {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  backdrop-filter: none !important;
}
body > header > .container { max-width: 1200px; min-height: 80px; }
body > header nav { font-size: 13px; font-weight: 500; }
body > header nav a:hover, body > header nav button:hover { color: var(--accent); }
.site-brand { font-size: 19px !important; font-weight: 600 !important; letter-spacing: -.6px; display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { flex-shrink: 0; border: 1px solid var(--ink); width: 35px; height: 35px; display: grid; place-items: center; line-height: 1; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); line-height: 1.7; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
/* Map existing utility colors so data-generated readers share the same palette. */
[class~="text-gray-900"], [class~="text-gray-800"], [class~="text-gray-700"],
.dark [class~="dark:text-white"], .dark [class~="dark:text-gray-200"], .dark [class~="dark:text-gray-300"] { color: var(--ink) !important; }
[class~="text-gray-600"], [class~="text-gray-500"], [class~="text-gray-400"],
.dark [class~="dark:text-gray-400"], .dark [class~="dark:text-gray-500"] { color: var(--muted) !important; }
[class~="text-orange-500"], [class~="text-orange-600"], [class~="text-orange-700"],
.dark [class~="dark:text-orange-400"], .dark [class~="dark:text-orange-300"] { color: var(--accent) !important; }
[class~="bg-white"], [class~="bg-white/80"], [class~="bg-white/95"],
.dark [class~="dark:bg-gray-900"], .dark [class~="dark:bg-gray-900/50"],
.dark [class~="dark:bg-gray-900/95"], .dark [class~="dark:bg-gray-900/80"] { background-color: var(--paper) !important; }
[class~="bg-gray-50"], [class~="bg-gray-100"], .dark [class~="dark:bg-gray-800"] { background-color: var(--surface) !important; }
[class~="bg-gray-200"], .dark [class~="dark:bg-gray-700"], .dark [class~="dark:bg-gray-950"] { background-color: var(--surface-soft) !important; }
[class~="bg-orange-50"], [class~="bg-orange-100"], .dark [class~="dark:bg-orange-900/20"] { background-color: var(--accent-soft) !important; }
[class~="bg-orange-500"], [class~="bg-orange-600"] { background-color: var(--accent) !important; color: var(--paper) !important; }
[class~="border-gray-200"], [class~="border-gray-300"], .dark [class~="dark:border-gray-600"], .dark [class~="dark:border-gray-700"], .dark [class~="dark:border-gray-800"] { border-color: var(--line) !important; }
[class~="border-orange-500"], [class~="border-orange-300"], .dark [class~="dark:border-orange-900/50"] { border-color: var(--accent) !important; }
[class~="shadow-sm"], [class~="shadow-md"], [class~="shadow-lg"], [class~="shadow-xl"], [class~="shadow-2xl"] { box-shadow: none !important; }
input:not([type="checkbox"]), select { border-radius: 3px !important; }
input[type="checkbox"] { accent-color: var(--accent); }
.modal-container { border: 1px solid var(--line); border-radius: 5px !important; }
.modal.pointer-events-none { visibility: hidden; }
body.modal-active { overflow: hidden !important; }
.modal-container > div:first-child > .flex > p { font-family: var(--font-display); font-weight: 500; }
.markdown-body { color: var(--ink); line-height: 1.8; }
.markdown-body a { color: var(--accent) !important; }
.markdown-body code, .markdown-body pre { font-family: var(--font-mono); background: var(--surface-soft) !important; }
.markdown-body strong, .dark .markdown-body strong { color: var(--ink) !important; }
.scrollbar-custom, .compare-scroll, .modal-scroll { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
body > footer { border-color: var(--line) !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 767px) {
  body > header > .container { min-height: 70px; }
  body > header nav { font-size: 15px; }
  #mobile-menu { border-top: 1px solid var(--line); max-height: calc(100vh - 70px); overflow: auto; }
}
/* Keep label arrows aligned with type and independent of platform emoji fonts. */
.ui-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.12em;
  overflow: visible;
}

.contact-email-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.contact-email[data-email-reveal] { cursor: pointer; }
.contact-email:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }