/* CLOUD-850: the design tokens of Martin's "Anthill Developers" mockup, with a dark scheme added. */
:root {
  --bg: #f6f6f9;
  --surface: #ffffff;
  --surface-2: #f0eff5;
  --ink: #17132a;
  --ink-2: #3c3852;
  --muted: #5a5670;
  --border: #e3e1ec;
  --border-2: #d9d6e4;
  --accent: #6200ea;
  --link: #4a23a8;
  --link-hover: #2e1470;
  --accent-soft: #eee9fa;
  --code-bg: #17132a;
  --code-ink: #edeaf7;
  --code-muted: #b9b3d1;
  --code-border: #2e2847;
  --amber-ink: #7a4a00;
  --amber-bg: #fdefd6;
  --amber-border: #f2d49a;
  --green-ink: #145c33;
  --green-bg: #e3f5ea;
  --green-border: #b5e0c4;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121019;
    --surface: #1b1826;
    --surface-2: #231f31;
    --ink: #eeecf6;
    --ink-2: #c9c5d9;
    --muted: #9893ad;
    --border: #2d2940;
    --border-2: #3a3550;
    --link: #b9a2f5;
    --link-hover: #d6c9fa;
    --accent-soft: #2a2245;
    --code-bg: #0c0a12;
    --amber-ink: #f5cf8f;
    --amber-bg: #3a2a10;
    --amber-border: #6b4d1c;
    --green-ink: #9fdcb6;
    --green-bg: #12301f;
    --green-border: #2a5c3d;
  }
}

* { box-sizing: border-box; }
/* The hidden attribute only sets display:none in the user-agent stylesheet, and any author rule
   setting display outranks it whatever its selector. Both the client tab bar (hidden until the
   script upgrades the panels into tabs) and the panels the script toggles would otherwise stay
   visible, so hiding is pinned here rather than left to each rule to avoid. */
[hidden] { display: none !important; }
html { scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
code, pre { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
:not(pre) > code { font-size: 0.9em; background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; background: var(--surface); padding: 8px 12px; border-radius: 8px; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.top-inner { max-width: 1380px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { border-radius: 7px; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub { font-size: 15px; color: var(--muted); }
.topnav { display: flex; gap: 24px; font-size: 15px; }
.topnav a { color: var(--muted); text-decoration: none; }
.topnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.env { margin-left: auto; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--link); }

/* Three columns: sidebar, content, on-this-page */
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 56px; max-width: 1380px;
  margin: 0 auto; padding: 0 32px; }
.sidebar, .toc { position: sticky; top: 88px; align-self: start; font-size: 14px; padding-top: 40px; }
.sidebar .group { margin-bottom: 28px; }
.label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.sidebar a, .toc a { display: block; padding: 5px 10px; margin-left: -10px; border-radius: 6px; color: var(--ink-2); text-decoration: none; }
.sidebar a[aria-current="page"] { background: var(--accent-soft); color: var(--link); font-weight: 600; }
.toc a { color: var(--muted); }
main { padding: 40px 0 96px; min-width: 0; }

/* Type */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.025em; }
h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.015em; }
h3 { margin: 0 0 4px; font-size: 20px; }
.lead { margin: 0 0 16px; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 680px; }
p { color: var(--ink-2); }
.prose { max-width: 680px; }
section { margin-bottom: 64px; }
.intro { margin: 0 0 20px; }

/* Badges */
.badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--muted); background: var(--surface); white-space: nowrap; }
.badge.early, .badge.coming_soon { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-border); }
.badge.available, .badge.read { color: var(--green-ink); background: var(--green-bg); border-color: var(--green-border); }
.badge.small { font-size: 12px; padding: 1px 8px; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.callout { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 56px; font-size: 15px; color: var(--ink-2); }
.callout strong { color: var(--ink); }
.grid2, .grid3 { display: grid; gap: 16px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card .num { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--link); margin-bottom: 8px; }
.card .name { font-weight: 600; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card .text { font-size: 15px; color: var(--ink-2); }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--border-2); }

/* Copy rows and code */
.copyrow { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 8px 8px 16px; flex-wrap: wrap; }
.copyrow .label { margin: 0; }
.copyrow code { flex: 1; min-width: 0; font-size: 14px; word-break: break-all; background: none; padding: 0; }
button.copy { font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border: 0;
  border-radius: 6px; padding: 0 14px; min-height: 40px; cursor: pointer; }
.code { background: var(--code-bg); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--code-border); }
.code-head span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--code-muted); }
.code button.copy { background: var(--code-border); font-weight: 400; min-height: 36px; }
pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.65; color: var(--code-ink); }

/* Client tabs: every panel shows without script; portal.js turns them into tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; }
.tabs button { font: inherit; font-size: 15px; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; color: var(--muted); cursor: pointer; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.panel + .panel { margin-top: 16px; }
.steps { margin: 16px 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.steps .n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); color: var(--link);
  font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* Tool list */
.toollist { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.toolrow { display: grid; grid-template-columns: 230px 90px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 20px; border-top: 1px solid var(--border); }
.toolrow:first-child { border-top: 0; }
.toolrow code { background: none; padding: 0; font-size: 14px; font-weight: 600; word-break: break-all; }
.toolrow .desc { font-size: 15px; color: var(--ink-2); }
.toolrow .meta { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Troubleshooting */
.faq { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.faq details { padding: 14px 20px; border-top: 1px solid var(--border); }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq p { margin: 10px 0 4px; font-size: 15px; }
.prompt { font-size: 15px; color: var(--ink-2); }

footer { border-top: 1px solid var(--border); margin-top: 32px; }
.foot-inner { max-width: 1380px; margin: 0 auto; padding: 24px 32px 40px; display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted); }
.foot-inner a { color: var(--muted); }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 0; }
  .top-inner { padding: 0 16px; gap: 16px; }
  .sidebar, .topnav { display: none; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .toolrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .foot-inner { padding: 24px 16px 40px; }
}