/* Guides + Docs: long-form reading layout (guides/*.html, docs/index.html).
   Builds on company.css (.company/.co-hero/.co-body) and the shared tokens + .tone-* in styles.css.
   Color comes only from existing tokens: mint/sky/sun/blue tints, the .AI gradient as a small spark, coral sparingly. */
.guide{--st-working:var(--working);--st-waiting:var(--waiting);--st-agents:#9a86b8;--st-error:#bd6b5f;--st-idle:#b5b9b0}

/* Hero meta row: reading time, updated, checked */
.g-meta{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.g-meta .chip svg{width:14px;height:14px;flex:none}
.guide .co-hero .actions{margin-top:26px}

/* Layout: article + sticky "On this page" (guides: right rail; docs: left rail) */
.g-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@media (min-width:1000px){
  .g-layout{grid-template-columns:minmax(0,1fr) 232px;gap:clamp(40px,5vw,72px)}
  .g-layout.left{grid-template-columns:232px minmax(0,1fr)}
  .g-layout.left .g-toc{order:-1}
  .g-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto}
}
.g-toc{padding:18px 18px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.g-toc-title{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.g-toc-title:before{content:"";width:14px;height:3px;border-radius:2px;background:var(--ai-grad)}
.g-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.g-toc li{margin:0}
.g-toc a{display:block;padding:6px 10px;margin:0 -10px;border-radius:8px;color:var(--text-soft);font-size:14px;line-height:1.4;text-decoration:none;border-left:2px solid transparent;transition:background .18s var(--ease),color .18s var(--ease)}
.g-toc a:hover{background:var(--soft);color:var(--ink)}
.g-toc a[aria-current="true"]{color:var(--ink);font-weight:650;background:var(--soft);border-left-color:var(--blue)}
.g-toc .g-toc-group{margin:12px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.g-toc .g-toc-group:first-child{margin-top:0}
@media (max-width:999px){.g-toc ol{columns:2;column-gap:24px}.g-toc li{break-inside:avoid}}

/* Readable body: real headings (company.css makes .co-body h2 a small label) */
.g-body{font-size:16.5px;line-height:1.7;max-width:none}
.g-body>h2,.g-body>p,.g-body>.list,.g-body>ul,.g-body>ol,.g-body>pre,.g-body>.callout,.g-body>h3{max-width:74ch}
.g-body h2{display:flex;align-items:center;gap:12px;font-size:clamp(22px,2.3vw,28px);line-height:1.2;letter-spacing:-.025em;font-weight:780;text-transform:none;color:var(--ink);margin:64px 0 14px;scroll-margin-top:96px}
.g-body>h2:first-child,.g-body>section:first-child>h2:first-child{margin-top:0}
.g-body h3{font-size:18px;line-height:1.35;letter-spacing:-.01em;font-weight:700;color:var(--ink);margin:30px 0 8px;scroll-margin-top:96px}
.g-body p{margin:0 0 14px}
.g-body .list{padding-left:20px;margin:0 0 16px}
.g-body .list li{margin:8px 0}
.g-body a:not(.button):not(.g-card){color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px}
.g-body a:not(.button):not(.g-card):hover{text-decoration-color:var(--blue)}
.g-body code{font-family:var(--mono);font-size:.86em;padding:2px 6px;border-radius:6px;background:var(--soft);color:var(--ink);overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px var(--line)}
.g-body kbd{font-family:var(--mono);font-size:.82em;padding:2px 7px;border-radius:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 1px 0 var(--line-strong);white-space:nowrap}
.g-body section{scroll-margin-top:96px;padding:0;border-top:0}
.g-body>section+section{margin-top:8px}
.callout p.callout-label+p,.callout p.callout-label+.list{margin-top:0}
.g-related{padding-bottom:0}

/* Numbered section badge in a heading: <h2><span class="g-num tone-sky">1</span>Title</h2> */
.g-num{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--tone-bg,var(--soft));color:var(--tone-ink,var(--ink));font-size:15px;font-weight:800;letter-spacing:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone,var(--ink)) 22%,transparent)}
.g-num svg{width:18px;height:18px}

/* Code blocks with a label and a copy button (assets/guides.js adds the button) */
.g-code{position:relative;margin:0 0 18px;max-width:74ch;border:1px solid var(--line);border-radius:12px;background:var(--soft);overflow:hidden}
.g-code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 8px 7px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:650;color:var(--muted);letter-spacing:.02em}
.g-code pre{margin:0;padding:14px 16px;overflow-x:auto;white-space:pre;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--ink)}
.g-code pre code{padding:0;background:none;box-shadow:none;font-size:inherit;overflow-wrap:normal}
.g-copy{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);font:600 12px/1 var(--font);padding:6px 10px;border-radius:7px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.g-copy:hover{color:var(--ink);border-color:var(--line-strong)}
.g-copy:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.g-copy[data-done]{color:var(--mint-ink);background:var(--mint-bg);border-color:transparent}

/* Callouts: colored boxes that separate kinds of text.
   <aside class="callout tone-mint"><p class="callout-label">Tip</p><p>…</p></aside>  (.callout.tn = "In Technically Not") */
.callout{position:relative;margin:20px 0 22px;padding:16px 20px 16px 22px;border-radius:12px;background:color-mix(in srgb,var(--tone-bg,var(--soft)) 88%,var(--surface));border:1px solid color-mix(in srgb,var(--tone,var(--ink)) 20%,transparent);color:var(--text-soft);overflow:hidden}
.callout:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone-grad,var(--tone,var(--ink)))}
.callout>*:last-child{margin-bottom:0}
.callout p{margin:0 0 10px}
.callout .list{margin:0 0 6px}
.callout b,.callout strong{color:var(--ink)}
.callout-label{display:flex;align-items:center;gap:8px;margin:0 0 6px!important;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--tone-ink,var(--ink))}
.callout-label svg{width:16px;height:16px;flex:none}
.callout.tn{--tone:var(--blue);--tone-bg:var(--blue-bg);--tone-ink:var(--blue-ink);--tone-grad:var(--ai-grad)}
.callout.plain{--tone:var(--line-strong);--tone-bg:var(--soft);--tone-ink:var(--text-soft);--tone-grad:var(--line-strong)}

/* Fact tiles: Costs / Conversation / Catch, Fits when / Breaks when */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 22px;padding:0;list-style:none}
.facts>li,.facts>div{margin:0;padding:16px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--text-soft)}
.facts .fact-k{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;font-weight:750;color:var(--tone-ink,var(--ink))}
.facts .fact-k:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tone,var(--ink));box-shadow:0 0 0 4px var(--tone-bg,var(--soft))}
.facts p{margin:0}

/* Numbered steps */
.g-steps{list-style:none;counter-reset:step;margin:18px 0 22px;padding:0;max-width:74ch}
.g-steps>li{counter-increment:step;position:relative;margin:0;padding:0 0 20px 50px;color:var(--text-soft)}
.g-steps>li:before{content:counter(step);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--blue-ink);font-weight:800;font-size:14px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--blue) 55%,transparent)}
.g-steps>li:after{content:"";position:absolute;left:15.5px;top:34px;bottom:4px;width:1.5px;background:var(--line)}
.g-steps>li:last-child{padding-bottom:4px}
.g-steps>li:last-child:after{display:none}
.g-steps b{color:var(--ink)}
.g-steps .g-code{margin:10px 0 0}

/* Troubleshooting: symptom cards */
.fixes{display:grid;gap:12px;margin:18px 0 22px}
.fix{padding:16px 20px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.fix h3{display:flex;align-items:flex-start;gap:10px;margin:0 0 6px;font-size:16.5px}
.fix h3:before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px var(--sun-bg)}
.fix p{margin:0 0 8px;font-size:15.5px}
.fix>*:last-child{margin-bottom:0}
.fix .g-code{margin:8px 0}

/* Tables */
.g-body .compare-wrap{margin:14px 0 22px}
.g-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.g-table th,.g-table td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.g-table tr:last-child>*{border-bottom:0}
.g-table thead th{background:var(--soft);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.g-table tbody th{color:var(--ink);font-weight:650;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:15px}
.g-table td{color:var(--text-soft)}

/* Status legend (matches the app's status colors) */
.status-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:14px 0 22px;padding:0;list-style:none}
.status-legend li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14.5px;line-height:1.5}
.status-legend b{display:block;color:var(--ink)}
.st-dot{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--st,var(--st-idle))}

/* Related guides / docs cards */
.g-related{margin:72px 0 0;padding:32px 0 0;border-top:1px solid var(--line)}
.g-related h2{margin-top:0}
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.g-cards>li{margin:0;display:flex}
.g-card{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--text-soft);text-decoration:none;font-size:15px;line-height:1.55;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.g-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone-grad,var(--ai-grad));opacity:.9}
.g-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.g-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.g-card-title{margin:0;color:var(--ink);font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:750}
.g-card p{margin:0}
.g-card .g-card-foot{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.g-card .g-card-go{margin-left:auto;color:var(--ink);font-weight:650}
.g-card .g-card-go:after{content:" \2192";display:inline-block;transition:transform .2s var(--ease)}
.g-card:hover .g-card-go:after{transform:translateX(3px)}
.g-card .icon-tile{margin-bottom:2px}

/* Guides index: bigger cards */
.g-index .g-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g-index .g-card{padding:28px}
.g-index .g-card-title{font-size:21px}
@media (max-width:1000px){.g-index .g-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g-index .g-cards{grid-template-columns:1fr}}
.g-strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin:28px 0 0;padding:22px 26px;border-radius:var(--r);background:linear-gradient(120deg,color-mix(in srgb,var(--sky-bg) 85%,var(--surface)),color-mix(in srgb,var(--mint-bg) 70%,var(--surface)));border:1px solid var(--line)}
.g-strip p{margin:0;color:var(--text-soft)}
.g-strip b{display:block;color:var(--ink);font-size:17px;margin-bottom:2px}
@media (max-width:720px){.g-strip{grid-template-columns:1fr}}

/* Docs: FAQ spacing and legal note */
.g-body .faq{max-width:74ch;margin:8px 0 18px}
.g-body .note{max-width:74ch}

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

@media (prefers-reduced-motion:reduce){
  .g-card,.g-card-go:after,.g-toc a{transition:none}
  .g-card:hover{transform:none}
}