/* Site guides (STATUS-CV): /scrape/<site> and /scrape/sites. Builds on ai-index.css (aix-*). */
.sg-mt { margin-top: 12px !important; }
.sg-mono { font-family: var(--uj-mono); font-size: 20px !important; }
.sg-stats { grid-template-columns: 1fr; }
@media (min-width: 760px) { .sg-stats { grid-template-columns: repeat(3, 1fr); } .sg-stats .aix-stat + .aix-stat { border-top: 0; border-left: 1px solid var(--uj-line); padding-left: 24px; } }

.sg-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font: 600 13px/1.2 var(--uj-sans);
  background: #F3F4F6; color: #374151; white-space: nowrap; vertical-align: middle; }
.sg-pill--sm { padding: 2px 8px; font-size: 11.5px; gap: 5px; }
.sg-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sg-pill--working { background: var(--uj-green-soft); color: #166534; }
.sg-pill--partial { background: #FEF9C3; color: #854D0E; }
.sg-pill--limited { background: var(--uj-accent-soft); color: var(--uj-accent-ink); }
.sg-pill--blocked, .sg-pill--login_wall { background: var(--uj-red-soft); color: #991B1B; }

.sg-status { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--uj-line); background: #fff; display: grid; gap: 16px; }
.sg-status--working { border-left: 4px solid var(--uj-green); }
.sg-status--partial, .sg-status--limited { border-left: 4px solid #EAB308; }
.sg-status--blocked, .sg-status--login_wall { border-left: 4px solid var(--uj-red); }
.sg-status__line { margin-top: 10px !important; font-size: 16px; line-height: 1.55; color: var(--aix-body); }
.sg-status__actions, .sg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (min-width: 900px) { .sg-status { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

.sg-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-panel .aix-note { margin-top: 8px !important; }
.sg-code { white-space: pre; overflow-x: auto; font-size: 12.5px; line-height: 1.55; max-height: 420px; }

.sg-settings + .sg-settings { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--uj-line); }
.sg-settings .aix-h3 { margin-bottom: 12px !important; }
.sg-split { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sg-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.sg-kv th { width: 38%; font-weight: 500; color: var(--aix-muted); }
.sg-kv code, .sg-split code { font-family: var(--uj-mono); font-size: 13px; }
tr.sg-on td { font-weight: 600; background: var(--uj-green-soft); }

.sg-tabs { border: 1px solid var(--uj-line); background: var(--uj-ink); margin-top: 10px; }
.sg-tabs__strip { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid #374151; }
.sg-tabs__tab { border: 0; background: transparent; color: #9CA3AF; font: 500 13px var(--uj-sans); padding: 8px 12px; cursor: pointer; border-radius: 4px 4px 0 0; }
.sg-tabs__tab.is-on { color: #fff; background: #1F2937; }
.sg-tabs__copy { margin-left: auto; margin-bottom: 6px; min-height: 28px !important; background: transparent !important; color: #E5E7EB !important; border-color: #4B5563 !important; }
.sg-tabs .aix-code { border: 0; }

.sg-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sg-cards li[hidden] { display: none; }
.sg-cards a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--uj-line); background: #fff; text-decoration: none; height: 100%; }
.sg-cards a:hover { border-color: #C9CDD3; }
.sg-cards a strong { font-size: 15px; color: var(--uj-ink); }
.sg-cards a .sg-pill { align-self: flex-start; }
.sg-select { height: 44px; max-width: 260px; padding: 0 12px; border: 1px solid var(--uj-line); background: #fff; font: inherit; font-size: 14px; }
.sg-copied { color: #166534 !important; border-color: #86EFAC !important; }
.sg-cta .aix-cta__p a { color: #FDBA74; }
.sg-cta__ghost { color: #fff !important; border-color: #6B7280 !important; }
@media (min-width: 900px) { .sg-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* fixes after the first prod render */
.sg-tabs [hidden] { display: none !important; }
.sg-split > div, .sg-panel, .sg-tabs, .sg-status__main { min-width: 0; }
.sg-split > div { overflow-x: auto; }
.sg-root .aix-table { width: 100%; }
.sg-kv td { overflow-wrap: anywhere; }
.sg-code { max-width: 100%; }
.sg-cta .aix-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-cta .aix-actions .uj-btn--primary { background: #F97316 !important; border-color: #F97316 !important; color: #fff !important; }
.sg-cta .aix-actions .sg-cta__ghost { background: transparent !important; border: 1px solid #6B7280 !important; color: #fff !important; }

/* STATUS-CZ: extraction recipe, runnable code, URL patterns, troubleshooting, use cases, sticky mini-TOC */
.sg-toc { display: none; }
@media (min-width: 1000px) {
  .sg-toc { display: block; position: sticky; top: var(--sg-toc-top, 64px); z-index: 30; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--uj-line); border-bottom: 1px solid var(--uj-line); backdrop-filter: saturate(1.2) blur(6px); }
  .sg-toc__in { display: flex; flex-wrap: wrap; gap: 4px 2px; padding-top: 8px; padding-bottom: 8px; }
  .sg-toc a { padding: 5px 10px; border-radius: 999px; font: 500 13px/1.2 var(--uj-sans); color: var(--aix-muted, #6B7280); text-decoration: none; }
  .sg-toc a:hover { color: var(--uj-ink); background: #F3F4F6; }
  .sg-toc a.is-on { color: var(--uj-ink); background: #F3F4F6; font-weight: 600; }
  .sg-root [id] { scroll-margin-top: 130px; }
}
.sg-recipe + .sg-recipe { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--uj-line); }
.sg-recipe__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.sg-recipe__head .aix-h3 { margin: 0 !important; }
.sg-fields td { vertical-align: top; }
.sg-fields code { font-family: var(--uj-mono); font-size: 12.5px; white-space: nowrap; }
.sg-ex { color: var(--aix-body, #374151); font-size: 13px; overflow-wrap: anywhere; word-break: break-word; max-width: 360px; }
.sg-file { margin: 0 0 6px !important; font: 500 12px/1.3 var(--uj-mono); color: var(--aix-muted, #6B7280); }
.sg-tabs .sg-file { margin: 0 !important; padding: 8px 16px 0; color: #9CA3AF; background: var(--uj-ink); }
.sg-code--short { max-height: 360px; }
.sg-rules { margin-top: 14px; }
.sg-rules summary { cursor: pointer; font: 600 14px var(--uj-sans); color: var(--uj-ink); }
.sg-rules .aix-code { margin-top: 10px; }
.sg-dl { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin: 10px 0 0; font-size: 14px; }
.sg-dl dt { font-weight: 600; color: var(--uj-ink); margin-top: 8px; }
.sg-dl dd { margin: 0; color: var(--aix-body, #374151); overflow-wrap: anywhere; }
.sg-dl code { font-family: var(--uj-mono); font-size: 12.5px; }
.sg-url { display: block; margin-top: 2px; }
.sg-trouble td { vertical-align: top; font-size: 14px; }
.sg-trouble code { font-family: var(--uj-mono); font-size: 12.5px; }
.sg-uc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sg-uc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sg-uc li { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--uj-line); background: #fff; }
.sg-uc strong { font-size: 15px; color: var(--uj-ink); }
.sg-uc span { font-size: 14px; line-height: 1.5; color: var(--aix-body, #374151); }
.sg-uc a { margin-top: auto; font-size: 13.5px; }

/* STATUS-DB: SDK tabs, install line, Prism highlighting (same token palette as the docs, content.css), CTAs */
.sg-tabs__bar { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 0; border-bottom: 1px solid #374151; }
.sg-tabs__bar .sg-tabs__strip { flex: 1 1 auto; min-width: 0; padding: 0; border-bottom: 0; overflow-x: auto; scrollbar-width: thin; }
.sg-tabs__tab { white-space: nowrap; flex: 0 0 auto; }
.sg-tabs__tab:focus-visible { outline: 2px solid #FDBA74; outline-offset: -2px; }
.sg-tabs__bar .sg-tabs__copy { flex: 0 0 auto; margin: 0 0 6px; }
.sg-tabs .sg-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 30px; }
.sg-install { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.sg-install code { font: 12px/1.4 var(--uj-mono); color: #E5E7EB; white-space: nowrap; overflow-x: auto; max-width: 100%; }
.sg-install code::before { content: "$ "; color: #6B7280; }
.sg-install__copy { flex: 0 0 auto; border: 1px solid #4B5563; background: transparent; color: #D1D5DB; font: 500 11px var(--uj-sans); padding: 2px 8px; cursor: pointer; }
.sg-install__copy:hover { color: #fff; border-color: #9CA3AF; }
/* every panel has the same height, so switching tabs never moves the page */
.sg-tabs .sg-code { height: 420px; max-height: none; tab-size: 4; -moz-tab-size: 4; }
.sg-root pre[class*="language-"] .token.comment, .sg-root pre[class*="language-"] .token.prolog { color: #6B7280; font-style: italic; }
.sg-root pre[class*="language-"] .token.punctuation { color: #9CA3AF; }
.sg-root pre[class*="language-"] .token.boolean, .sg-root pre[class*="language-"] .token.number,
.sg-root pre[class*="language-"] .token.constant, .sg-root pre[class*="language-"] .token.symbol { color: #FB923C; }
.sg-root pre[class*="language-"] .token.string, .sg-root pre[class*="language-"] .token.char,
.sg-root pre[class*="language-"] .token.builtin, .sg-root pre[class*="language-"] .token.attr-value { color: #86EFAC; }
.sg-root pre[class*="language-"] .token.operator, .sg-root pre[class*="language-"] .token.url,
.sg-root pre[class*="language-"] .token.variable { color: #93C5FD; }
.sg-root pre[class*="language-"] .token.property { color: #93C5FD; }
.sg-root pre[class*="language-"] .token.function, .sg-root pre[class*="language-"] .token.class-name { color: #FCD34D; }
.sg-root pre[class*="language-"] .token.keyword, .sg-root pre[class*="language-"] .token.delimiter { color: #F472B6; }
.sg-root pre[class*="language-"] .token.regex, .sg-root pre[class*="language-"] .token.important { color: #FDE68A; font-weight: normal; }
/* copy button on the code blocks outside the tabs (sample output, extract_rules): absolutely placed, no shift */
.sg-pre-wrap { position: relative; }
.sg-pre-copy { position: absolute; top: 8px; right: 8px; border: 1px solid #4B5563; background: rgba(17, 24, 39, .85); color: #E5E7EB;
  font: 500 12px var(--uj-sans); padding: 3px 10px; cursor: pointer; }
.sg-pre-copy:hover { border-color: #9CA3AF; color: #fff; }
.sg-cta-line { margin: 14px 0 0 !important; font-size: 14px; }
.sg-cta-line a { font-weight: 700; }
.sg-cta-signed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 32px; padding: 20px 24px;
  border: 1px solid var(--uj-line); border-left: 3px solid var(--uj-accent, #F97316); background: #fff; }
.sg-cta-signed p { margin: 0 !important; flex: 1 1 360px; font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) { .sg-tabs .sg-code { height: 360px; } .uj-scta.uj-scta--end { margin: 32px 0 8px; } }