/* ACS landing page. Tokens mirror agentcontrolstandard.org, except where the source
   value failed a WCAG contrast measurement. Those five carry their ratio inline. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --acs-page: #ffffff;
  --acs-surface: #f4f5f7;
  --acs-surface-2: #eef0f4;
  --acs-text: #121212;
  --acs-text-soft: #5f636d;
  --acs-text-muted: #6b7079;
  --acs-text-inverse: #f7f7f7;
  --acs-brand: #111111;
  --acs-accent-navy: #1b4f72;
  --acs-accent-teal: #17a2b8;
  --acs-border: #e5e7eb;
  --acs-border-strong: #d0d5dd;
  --acs-footer: #111111;
  /* Was hsla(0,0%,7%,.18), which composited to #d4d4d4 for 1.48:1 against the page.
     SC 1.4.11 needs 3:1. Solid navy measures 8.72:1. */
  --acs-focus-ring: #1b4f72;
  --acs-grid-line: hsla(0, 0%, 7%, 0.04);
  --acs-node-fill: #ffffff;
  --acs-node-stroke: #6b7079;   /* 4.98:1 on the page */
  --acs-spoke: #6b7079;
  --acs-hex-fill: #f4f5f7;
  /* Was #c4cdd8 for 1.47:1 against the hexagon fill. The center of the diagram was
     close to invisible. #7d8899 measures 3.29:1. */
  --acs-hex-stroke: #7d8899;
  --acs-tier-1: #0f7b3f;
  --acs-tier-2: #1b4f72;
  --acs-tier-3: #6b46c1;
  --acs-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --acs-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Code", monospace;
}

/* Dark tokens are redefined in two places so the toggle wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acs-page: #0a0a0a;
    --acs-surface: #161616;
    --acs-surface-2: #202020;
    --acs-text: #ffffff;
    --acs-text-soft: #9ca3af;
    /* Was #6b7280 for 3.74:1 on the surface. SC 1.4.3 needs 4.5:1. This is 5.48:1. */
    --acs-text-muted: #868e9c;
    --acs-brand: #1b4f72;
    --acs-accent-navy: #2e86c1;
    --acs-accent-teal: #1abc9c;
    --acs-border: #2a2a2a;
    --acs-border-strong: #373737;
    --acs-footer: #0a0a0a;
    /* Was hsla(0,0%,100%,.2) for 1.77:1. Solid measures 8.67:1. */
    --acs-focus-ring: #63b3ed;
    --acs-grid-line: hsla(0, 0%, 100%, 0.04);
    --acs-node-fill: #111111;
    --acs-node-stroke: #a0aec0;
    /* Was #3d4f65 for 2.36:1 against the page. This is 8.78:1. */
    --acs-spoke: #a0aec0;
    --acs-hex-fill: #0d1117;
    --acs-hex-stroke: #63b3ed;
    --acs-tier-1: #48bb78;
    --acs-tier-2: #63b3ed;
    --acs-tier-3: #805ad5;
  }
}

:root[data-theme="dark"] {
  --acs-page: #0a0a0a;
  --acs-surface: #161616;
  --acs-surface-2: #202020;
  --acs-text: #ffffff;
  --acs-text-soft: #9ca3af;
  --acs-text-muted: #868e9c;
  --acs-brand: #1b4f72;
  --acs-accent-navy: #2e86c1;
  --acs-accent-teal: #1abc9c;
  --acs-border: #2a2a2a;
  --acs-border-strong: #373737;
  --acs-footer: #0a0a0a;
  --acs-focus-ring: #63b3ed;
  --acs-grid-line: hsla(0, 0%, 100%, 0.04);
  --acs-node-fill: #111111;
  --acs-node-stroke: #a0aec0;
  --acs-spoke: #a0aec0;
  --acs-hex-fill: #0d1117;
  --acs-hex-stroke: #63b3ed;
  --acs-tier-1: #48bb78;
  --acs-tier-2: #63b3ed;
  --acs-tier-3: #805ad5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--acs-font);
  color: var(--acs-text);
  background-color: var(--acs-page);
  background-image: linear-gradient(var(--acs-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--acs-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  line-height: 1.6;
}

a { color: inherit; }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--acs-focus-ring); outline-offset: 2px; }

.layout { display: grid; grid-template-columns: 260px 1fr; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  padding: 2rem 1.5rem; border-right: 1px solid var(--acs-border);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1.1rem;
  text-decoration: none;
}
.wordmark img { width: 28px; height: 28px; border-radius: 6px; }
/* The pane holds 20 rows with Home open. A tighter line keeps the theme toggle below
   it on screen at 1366x768, and the column scrolls when a taller pane pushes it off. */
#site-nav { font-size: 0.95rem; line-height: 1.45; }
#site-nav ul { list-style: none; margin: 0; padding: 0; }
#site-nav li { margin-block: 0.2rem; }
/* The rule on the left shows nesting by position, so depth does not rely on color. */
#site-nav ul ul {
  margin: 0.2rem 0 0.35rem 0.35rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--acs-border);
}
#site-nav a { text-decoration: none; color: var(--acs-text-soft); }
#site-nav a:hover,
#site-nav summary:hover { color: var(--acs-text); }
#site-nav summary { cursor: pointer; color: var(--acs-text-soft); }
#site-nav summary:focus-visible { outline: 3px solid var(--acs-focus-ring); outline-offset: 2px; }
/* Weight marks the current page as well as color, so the state survives without color. */
#site-nav a[aria-current="page"] { font-weight: 600; color: var(--acs-text); }
/* A section never collapses, so it reads as a heading with a divider rather than a
   disclosure. Its list sits flush because nothing above it nests. */
#site-nav .nav-section { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--acs-border); }
#site-nav .nav-section h2 {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acs-text-muted);
}
#site-nav .nav-section ul { margin: 0; padding-left: 0; border-left: 0; }

/* Off screen until focused, so it costs sighted mouse users nothing and still comes
   first for a keyboard. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  font-weight: 600;
  color: var(--acs-text);
  background-color: var(--acs-page);
  border: 1px solid var(--acs-border-strong);
  border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

/* The strip exists only below the layout breakpoint. Above it the sidebar is the pane. */
.topbar { display: none; }
#menu-toggle {
  min-height: 40px;
  padding: 0.4rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--acs-text);
  background-color: transparent;
  border: 1px solid var(--acs-border-strong);
  border-radius: 999px;
  cursor: pointer;
}
#menu-toggle:hover { background-color: var(--acs-surface); }

main { padding: 4rem 3rem; max-width: 1100px; }
section { padding-block: 3.5rem; border-top: 1px solid var(--acs-border); }
section:first-of-type { border-top: 0; }

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.hero p { font-size: 1.15rem; color: var(--acs-text-soft); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cta {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0.85rem 1.25rem;
  border: 1px solid var(--acs-border-strong); border-radius: 999px;
  font-weight: 600; text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.cta:hover { background-color: var(--acs-surface); transform: translateY(-1px); }
.cta-primary { background-color: var(--acs-brand); color: var(--acs-text-inverse); border-color: var(--acs-brand); }

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--acs-text-soft);
  background-color: transparent;
  border: 1px solid var(--acs-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#theme-toggle:hover {
  background-color: var(--acs-surface);
  color: var(--acs-text);
}
#theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* The moon is filled rather than stroked, so it reads as a shape at this size. */
#theme-toggle .icon-moon { fill: currentColor; stroke: none; }

/* Show the mark for the theme a click would give, not the one already showing. */
#theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: inline; }
}
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: inline; }
:root[data-theme="light"] #theme-toggle .icon-moon { display: inline; }
:root[data-theme="light"] #theme-toggle .icon-sun { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.card { padding: 1.5rem; border: 1px solid var(--acs-border); border-radius: 14px; background-color: var(--acs-surface); }
.card h3 { margin-top: 0; }

/* Reuses the tier accent-border pattern so the committed outcome reads as a callout,
   not as a quoted aside, without adding a second visual language to the page. */
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--acs-accent-navy);
  border-radius: 0 12px 12px 0;
  background-color: var(--acs-surface);
  color: var(--acs-text-soft);
  font-style: italic;
}

.standards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.standards li {
  padding: 1.1rem;
  border: 1px solid var(--acs-border);
  border-radius: 12px;
  background-color: var(--acs-surface);
}
.standards a {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  text-decoration: none;
}
.standards a:hover { color: var(--acs-accent-navy); }
.standards span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--acs-text-soft);
}

/* Cap the measure so body text stays scannable on a wide screen. The card and
   standards grids set their own widths and are excluded. */
main section > p,
main section > ul:not(.standards),
main section > table,
main section > blockquote { max-width: 72ch; }

.tier { border-left: 4px solid var(--acs-border-strong); padding-left: 1rem; margin-bottom: 1.25rem; }
.tier-1 { border-left-color: var(--acs-tier-1); }
.tier-2 { border-left-color: var(--acs-tier-2); }
.tier-3 { border-left-color: var(--acs-tier-3); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--acs-border); }
code { font-family: var(--acs-mono); background-color: var(--acs-surface-2); padding: 0.15em 0.4em; border-radius: 4px; }

footer { background-color: var(--acs-footer); color: var(--acs-text-inverse); padding: 3rem; }
footer a { color: var(--acs-text-inverse); }
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }

@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--acs-border); }
  .hero { grid-template-columns: 1fr; }
  main { padding: 2rem 1.25rem; }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--acs-border);
    background-color: var(--acs-page);
    /* Paints above the open panel, so the Menu button that closes it stays on top
       on a phone, where the panel is wider than the space left of the button. */
    position: relative;
    z-index: 30;
  }
  /* The strip carries the wordmark at this width, so the pane drops its copy. */
  .sidebar .wordmark { display: none; }
  /* Without the drawer script the button would do nothing, and the pane is already
     showing as a block below the strip. The script adds has-drawer to the root. */
  #menu-toggle { display: none; }
  .has-drawer #menu-toggle { display: inline-flex; align-items: center; }
  /* Hidden as well as moved, so a closed panel's links leave the tab order. */
  .has-drawer .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: min(20rem, 85vw);
    height: 100vh;
    overflow-y: auto;
    /* The strip paints over the panel's top, so the first row starts below it: the
       40px button, the strip's 1.5rem of padding, and the panel's own 1.5rem. */
    padding-top: calc(40px + 3rem);
    background-color: var(--acs-page);
    border-right: 1px solid var(--acs-border);
    border-bottom: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
  }
  .has-drawer .nav-open .sidebar { transform: none; visibility: visible; }
}

/* Continuous motion is a vestibular trigger and a battery cost. CSS animation is
   stopped here. The SVG's SMIL elements carry their own guard, because
   `animation: none` does not reach them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}