/* Agent view: the homepage in a coding agent's voice, styled to look like a raw
   markdown file. Loaded only by index.html (the "human / agent" toggle) and
   6am/index.html. The article comes from scripts/build-sixam.py. */

/* Toggle: homepage masthead only, inserted by agent-view.js */
.view-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.view-toggle button {
  font: inherit;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
}
.view-toggle button:hover { color: var(--ink); }
.view-toggle button[aria-checked="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.view-toggle button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.view-toggle span { color: var(--ink-faint); }
.nav-right .view-toggle { margin-right: 56px; }
.view-toggle-bar { display: none; }
/* Mid widths: below the masthead, right-aligned, so the nav stays one row */
@media (min-width: 721px) and (max-width: 1099px) {
  .nav-right .view-toggle {
    position: absolute;
    right: 20px;
    top: calc(100% + 10px);
    margin: 0;
    background: var(--bg);
  }
}
/* Phones: in the bar, left of Menu, not in the drawer */
@media (max-width: 720px) {
  .nav-right .view-toggle { display: none; }
  .view-toggle-bar { display: flex; margin-left: auto; }
  .has-view-toggle .nav-toggle { margin-left: 10px; }
}

/* Article */
.agent-view {
  width: 100%;
  min-height: 100vh;
  background: #f4f4f2;
  color: #1c1c1f;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.75;
  /* show the markdown punctuation as typed: no <!-- or --> arrows, no ** joins */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.agent-md {
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 56px) clamp(20px, 3vw, 28px) 120px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.agent-md > * { margin: 0; }
.agent-md h1, .agent-md h2, .agent-md h3 {
  font-family: var(--font-mono);
  font-size: inherit;
  letter-spacing: 0;
  line-height: inherit;
  color: #1c1c1f;
}
.agent-md h1 { font-weight: 800; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.4; text-wrap: balance; }
.agent-md h2 { font-weight: 700; margin-top: 20px; }
.agent-md h3 { font-weight: 700; }
.agent-md strong { font-weight: 700; color: #1c1c1f; }
.agent-md .md-m, .agent-md .md-key { color: oklch(0.5 0.17 295); }
.agent-md .md-p { color: #8a8a90; }
.agent-md .md-front, .agent-md .md-comment, .agent-md .md-dim { color: #66666d; }
.agent-md .md-image { color: #45454b; }
.agent-md p, .agent-md li { text-wrap: pretty; }
.agent-md pre {
  font-family: var(--font-mono);
  border: 0;
  margin: 0;
}
.agent-md .md-front { background: none; padding: 0; font-size: inherit; line-height: inherit; white-space: pre-wrap; }
/* styles.css styles code and pre for the dark theme; reset color and border here */
.agent-md .md-code, .agent-md .md-table {
  background: #e9e9e5;
  border-radius: 6px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #1c1c1f;
}
.agent-md .md-code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
.agent-md .md-table { white-space: pre; overflow-x: auto; }
.agent-md code {
  background: #e9e9e5;
  padding: 1px 6px;
  border-radius: 3px;
  border: 0;
  color: #1c1c1f;
  font-size: inherit;
}
.agent-md .md-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agent-md .md-list > li { padding-left: 2ch; text-indent: -2ch; }
.agent-md a {
  color: #1c1c1f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-md a:hover { color: #1c1c1f; }

/* /6am top and bottom bars */
.agent-md .md-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.agent-md .md-nav-top { padding-bottom: 18px; border-bottom: 1px solid #d9d9d4; }
.agent-md .md-nav-bottom { padding-top: 18px; border-top: 1px solid #d9d9d4; }
.agent-md .md-install.btn, .agent-md .md-install.btn:hover { color: #0d0d0f; font-family: var(--font-mono); text-decoration: none; }