/* Tracer Proxy — shared terminal aesthetic.
   Semantic HTML in, rendered-markdown look out. */

:root {
  --font-mono:
    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono",
    Consolas, "Liberation Mono", monospace;
  --muted: light-dark(#7d7668, #908e88);
}

body {
  background-color: light-dark(#f6f2e9, #17171a);
  color: light-dark(#332f28, #d6d5d1);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  padding: 30px;
  margin: 0;
  max-width: 640px;
}

/* Everything is body-sized mono — headings included. */
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
  margin: 20px 0;
}

h1,
h2,
h3 {
  font-weight: bold;
  text-transform: uppercase;
}

h1::before {
  content: "# ";
}
h2::before {
  content: "## ";
}
h3::before {
  content: "### ";
}

/* Section separators render as ~~~ */
hr {
  border: none;
  margin: 20px 0;
}
hr::before {
  content: "~~~";
}

/* Lists render as " - item" */
ul {
  list-style: none;
  padding: 0;
}
ul li {
  padding-left: 3ch;
  text-indent: -3ch;
}
ul li::before {
  content: "- ";
}

/* Ordered lists keep native numbering so start="" works */
ol {
  list-style: decimal outside;
  padding-left: 3ch;
}

a {
  color: inherit;
}

/* Markdown-style links: [text](/href), whole thing clickable */
a.md::before {
  content: "[";
}
a.md::after {
  content: "](" attr(href) ")";
  overflow-wrap: anywhere;
}

/* Site header bar: app icon + wordmark, download pill on the right */
header.site-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-bar .app-icon img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: block;
}
.site-bar p,
.site-bar h1 {
  margin: 0;
}
.site-bar .app-store-badge {
  margin-left: auto;
  display: block;
}
.site-bar .app-store-badge img {
  display: block;
  width: auto;
  height: 34px;
}

pre,
code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 20px 0;
}

.cursor {
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

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

/* Collapsible FAQ entries — terminal-style [+]/[-] toggles */
details {
  margin: 20px 0;
}
details summary {
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary h3 {
  display: inline;
  margin: 0;
}
details summary::after {
  content: " [+]";
  font-weight: bold;
}
details[open] summary::after {
  content: " [-]";
}

.shout {
  text-transform: uppercase;
}

/* Screenshots (setup guide, teardowns) */
.shot {
  margin: 20px 0;
}
.shot img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}
.shot.wide img {
  max-width: 640px;
}

@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
  }
}

/* Manual theme override — set by /theme.js; no attribute = follow system. */
:root[data-theme="light"] body {
  color-scheme: light;
}
:root[data-theme="dark"] body {
  color-scheme: dark;
}

/* Corner theme toggle (injected by /theme.js) — a row of three buttons;
   the selected mode is the one with the border. */
#theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 4px;
}
#theme-toggle button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
#theme-toggle button:hover {
  color: light-dark(#332f28, #d6d5d1);
}
#theme-toggle button[aria-pressed="true"] {
  border-color: light-dark(#ded7c6, #33333a);
  background: light-dark(#fcf9f2, #232329);
  color: light-dark(#332f28, #d6d5d1);
}
#theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

@media (width >= 640px) {
  body {
    padding: 40px;
  }
}