/* The Signals showcase: landing, API reference and the endpoint pages. Tokens come from theme.css (light and dark);
   only the chart roles are named here. Borderless tonal surfaces, tabular numbers, one accent for what the API serves. */
.signals{--sc-api:#5b9dff;--sc-live:#6ec98f;--sc-archive:#6b6f7a;--sc-gap:#e07b78;--sc-track:var(--surface-track)}
html[data-theme="light"] .signals{--sc-api:#2f6fd6;--sc-live:#247a4d;--sc-archive:#9aa0aa;--sc-gap:#bd4f4c}
.signals .num{font-variant-numeric:tabular-nums}
.signals code{font:12.5px/1.5 var(--mono)}
.signals .sc-stamp{margin-top:14px;font-size:12.5px;color:var(--fg-3);max-width:80ch}
.signals .sc-panel{background:var(--card);border-radius:var(--radius);padding:18px 20px;margin-top:14px;min-width:0}
.signals .sc-panel-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--fg-2);margin-bottom:12px}
.signals .sc-panel-h span:first-child{color:var(--fg);font-weight:600}
.signals .sc-scroll{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
.signals .sc-scroll table{min-width:640px}
.signals td small{display:block;color:var(--fg-3);font-size:12px;margin-top:2px}

/* KPI tiles */

/* History timeline: SVG geometry stretched to the track, HTML text so it stays crisp at any width */
.signals .sc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12px;color:var(--fg-3)}
.signals .sc-legend span{display:inline-flex;align-items:center;gap:6px}
.signals .sc-sw{display:inline-block;width:12px;height:8px;border-radius:2px}

/* Column charts and lanes */
.signals .sc-cols{display:block;width:100%;height:96px}
.signals .sc-col{fill:var(--bar-neutral)}
@media (hover:hover){.signals .sc-col:hover{fill:var(--bar-strong)}}
.signals .sc-cols-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--fg-3);margin-top:6px}
.signals .sc-lane{margin-bottom:10px}
.signals .sc-lane-h{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fg-2);margin-bottom:4px}
.signals .sc-lane svg{display:block;width:100%;height:34px}
.signals .sc-hist{padding-top:8px}
.signals .sc-hist svg{display:block;width:100%;height:150px}
.signals .sc-mark{stroke:var(--sc-api);stroke-width:1.5;vector-effect:non-scaling-stroke}
.signals .sc-mark-2{stroke-dasharray:3 3}
.signals .sc-sw-mark{width:16px;height:0;border-top:2px solid var(--sc-api);border-radius:0}
.signals .sc-sw-mark-2{border-top-style:dashed}
.signals .sc-more{margin-top:10px}
.signals .sc-more summary{cursor:pointer;font-size:12.5px;color:var(--fg-3);padding:4px 0}

/* Size dot plot (log scale): unscaled SVG whose coordinates are percentages, so nothing is positioned inline */
.signals .sc-dp-axis{display:block;width:calc(76% - 12px);height:18px;margin-left:calc(24% + 12px);overflow:visible}
.signals .sc-dp-axis text{fill:var(--fg-3);font-size:11.5px}
.signals .sc-dp-row{display:grid;grid-template-columns:24% minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center;padding:8px 0}
.signals .sc-dp-name{font-size:13.5px}
.signals .sc-dp-name small{display:block;color:var(--fg-3);font-size:11.5px}
.signals .sc-dp-track{display:block;width:100%;height:14px;overflow:visible}
.signals .sc-dp-bg{fill:var(--sc-track)}
.signals .sc-dp-span{fill:var(--bar-neutral)}
.signals .sc-dot{fill:var(--fg-2)}
.signals .sc-dot-p50{fill:var(--sc-api)}
.signals .sc-dot-p90{fill:var(--bar-strong)}
.signals .sc-dot-p99{fill:var(--card);stroke:var(--bar-strong);stroke-width:2}
.signals .sc-dot-max{fill:var(--card);stroke:var(--fg-3);stroke-width:2}
.signals .sc-sw-dot{display:inline-block;vertical-align:-2px}
.signals .sc-dp-read{grid-column:2;font-size:12px;color:var(--fg-3)}

/* Block tape composition (SVG bars: no inline widths) */
.signals .sc-stack{display:block;width:100%;height:34px}
.signals .sc-seg-digest{fill:var(--sc-api)}
.signals .sc-seg-notify{fill:var(--sc-live)}
.signals .sc-seg-hold{fill:var(--bar-strong)}
.signals .sc-seg-skip{fill:var(--sc-archive)}
.signals .sc-hb{display:grid;grid-template-columns:9rem minmax(0,1fr) 4.5rem;gap:10px;align-items:center;font-size:12.5px;color:var(--fg-2);padding:3px 0}
.signals .sc-hb svg{display:block;width:100%;height:8px}
.signals .sc-hb-bar{fill:var(--bar-neutral)}
.signals .sc-hb b{font-weight:500;text-align:right;color:var(--fg)}

/* Partner API operation layout: description left, request client right (the Scalar pattern) */
.signals .sc-request{display:flex;flex-direction:column;gap:12px;min-width:0}
.signals .sc-tabbed .doc-code{margin:0}
.signals .sc-op-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.signals .sc-op-head code{font-size:14px;color:var(--fg)}
.signals .sc-method{font:600 11px/1 var(--mono);color:var(--sc-live);background:var(--surface);padding:5px 7px;border-radius:5px;letter-spacing:.04em}
.signals .sc-state{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--fg-2);white-space:nowrap}
.signals .sc-state-live{color:var(--sc-live)}
.signals .sc-state-not-enabled,.signals .sc-state-being-enabled{color:var(--d-amber)}
.signals .sc-params td:first-child code{color:var(--fg)}
.signals .sc-params td small{display:inline;margin-left:6px;color:var(--d-amber)}
.signals .sc-checks{margin:8px 0 0;padding-left:18px;color:var(--fg-2);font-size:14px;line-height:1.6}
.signals .sc-checks li+li{margin-top:4px}
.signals .sc-srv{background:var(--card-2);border-radius:9px;padding:12px 16px;display:grid;gap:8px;font-size:12px;color:var(--fg-3)}
.signals .sc-srv div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.signals .sc-srv code{color:var(--code-fg);overflow-wrap:anywhere}
.signals .sc-tabs{display:flex;gap:4px;margin-bottom:-4px}
.signals .sc-tabs button{border:0;background:none;color:var(--fg-3);font-size:12.5px;padding:6px 10px;border-radius:6px;cursor:pointer}
.signals .sc-tabs button[aria-selected="true"]{background:var(--surface);color:var(--fg)}
.signals .sc-resp pre{max-height:560px}

@media (max-width:620px){
  .signals .sc-dp-row{grid-template-columns:minmax(0,1fr)}
  .signals .sc-dp-read{grid-column:1}
  .signals .sc-dp-axis{margin-left:0;width:100%}
  .signals .sc-hb{grid-template-columns:7rem minmax(0,1fr) 3.5rem}
  .signals .sc-panel{padding:14px}
}
@media (prefers-reduced-motion:reduce){.signals *{transition:none!important}}
/* Live and historical calls on each endpoint page */
.signals .sc-range{background:var(--card);border-radius:var(--radius);padding:14px 18px}
.signals .sc-range h3{font-size:13px;color:var(--fg-3);font-weight:600;margin-bottom:6px}
.signals .sc-range p{color:var(--fg-2);font-size:14px}
.signals .sc-range table{font-size:13px}
.signals .sc-calls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.signals .sc-call{min-width:0}
.signals .sc-call .doc-code{margin:8px 0 6px}
.signals .sc-call-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.signals .sc-call-h code{font-size:12px;color:var(--fg-2);overflow-wrap:anywhere}
.signals .sc-call-k{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--fg)}
@media (max-width:1100px){.signals .sc-calls{grid-template-columns:minmax(0,1fr)}}
/* Pitch cards and the coverage x history matrix */
/* Showcase pages use the full content width: the pitch, the matrix and the operation layout need it (the TOC returns on research articles) */
body:has(.signals .sc-request) #docs-toc{display:none!important}
.docs-main:has(.signals .sc-request){margin-right:0;max-width:1240px}
.doc-article:has(.signals .sc-request){max-width:none}
.signals .sc-params{table-layout:auto;width:100%;font-size:13px}
.signals .sc-params td:first-child{white-space:nowrap;padding-right:14px}
.signals .sc-params td:nth-child(2){white-space:nowrap;color:var(--fg-3);padding-right:14px}
.signals .sc-params td:last-child{overflow-wrap:anywhere}
.docs-main:has(.signals .sc-mx){margin-right:0;max-width:1240px}
body:has(.signals .sc-mx) #docs-toc{display:none!important}
.doc-article:has(.signals .sc-mx){max-width:none}
.signals .sc-mx td code{white-space:nowrap}
.signals .sc-mx td.n{white-space:nowrap}
/* Tooltips: signals.js appends its popover to <body>, outside .signals, so it is styled globally (fixed, hidden until shown) */
body>.tip-pop{position:fixed;z-index:60;max-width:300px;background:var(--inverse-bg);color:var(--inverse-fg);font:12.5px/1.45 var(--sans);padding:9px 11px;border-radius:9px;box-shadow:0 6px 24px var(--shadow);pointer-events:none;opacity:0;top:-9999px;left:-9999px;transition:opacity .12s ease-out}
body>.tip-pop.on{opacity:1}
/* Tags, endpoint cards, gap lists, nav key */
.signals .sc-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--fg-2);white-space:nowrap}
.sc-key{flex:none;color:var(--fg-3);vertical-align:-1px}
.signals .sc-eps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.signals .sc-ep{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:inherit;min-width:0}
.signals .sc-ep-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.signals .sc-ep-h code{font-size:12.5px;color:var(--fg);overflow-wrap:anywhere}
.signals .sc-ep b{font-size:14px}
.signals .sc-ep>span{font-size:13px;color:var(--fg-2);line-height:1.5}
@media (hover:hover){.signals .sc-ep:hover{background:var(--surface-hover)}}
.signals .sc-links{margin-bottom:10px}
.docs-main:has(.signals .sc-eps){margin-right:0;max-width:1240px}
body:has(.signals .sc-eps) #docs-toc{display:none!important}
.doc-article:has(.signals .sc-eps){max-width:none}
.signals pre{max-width:100%;overflow:auto}
@media (max-width:760px){.signals .sc-eps{grid-template-columns:minmax(0,1fr)}}
/* Plan badges */
.signals .sc-tag-ent{color:var(--fg);background:color-mix(in srgb,var(--sc-api) 18%,var(--surface))}
.signals .sc-chip{font-size:11px;padding:2px 7px;border-radius:999px;color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
/* Served-only coverage: one row per venue and market, each served capability a chip that opens its endpoint */
.signals .sc-cov{padding:6px 20px}
.signals .sc-cov .sc-panel-h{margin:12px 0 4px}
.signals .sc-cov-row{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.signals .sc-cov-row:last-child{border-bottom:0}
.signals .sc-cov-name{font-size:14px;font-weight:600;color:var(--fg)}
.signals .sc-cov-name span{font-weight:400;color:var(--fg-3)}
.signals .sc-cov-chips{display:flex;flex-wrap:wrap;gap:6px}
.signals .sc-cov-chips a{text-decoration:none}
.signals .sc-cv{display:inline-block;font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--fg-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.signals .sc-cv-strong{background:color-mix(in srgb,var(--sc-api) 16%,var(--card));color:var(--fg)}
@media (hover:hover){.signals .sc-cov-chips a:hover .sc-cv{background:color-mix(in srgb,var(--sc-api) 26%,var(--card));color:var(--fg)}}
/* Use cases: outcome, a tiny visual from the real answer, the one call */
.signals .sc-ucs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.signals .sc-uc{background:var(--card);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.signals .sc-uc>b{font-size:15px;line-height:1.35;color:var(--fg)}
.signals .sc-uc-v{flex:1}
.signals .sc-uc-call{text-decoration:none;display:block;background:var(--card-2);border-radius:7px;padding:8px 10px}
.signals .sc-uc-call code{font-size:11.5px;color:var(--code-fg);overflow-wrap:anywhere}
.signals .sc-mini{display:flex;flex-direction:column;gap:2px}
.signals .sc-mini-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--fg-2);padding:5px 0;border-bottom:1px solid var(--line-soft)}
.signals .sc-mini-row:last-child{border-bottom:0}
.signals .sc-mini-row b{color:var(--fg);font-weight:600}
.signals .sc-side{text-transform:capitalize}
.signals .sc-mini-cols{display:block;width:100%;height:64px}
.signals .sc-range-bar{display:block;width:100%;height:14px;margin:10px 0 6px}
.signals .sc-rb-outer{fill:color-mix(in srgb,var(--sc-api) 22%,var(--sc-track))}
.signals .sc-rb-inner{fill:color-mix(in srgb,var(--sc-api) 55%,var(--sc-track))}
.signals .sc-rb-price{fill:var(--fg)}
@media (max-width:620px){.signals .sc-cov-row{grid-template-columns:minmax(0,1fr)}.signals .sc-cov{padding:4px 14px}}

/* Reviewer layer: Which markets (allowed values) and Verify it yourself (one card per check). */
.signals .sc-verify{display:grid;gap:14px;margin-top:14px}
.signals .sc-verify-step{display:flex;flex-direction:column;gap:8px;min-width:0}
.signals .sc-verify-step .doc-code{margin:4px 0 0}
.signals .sc-enum td:last-child code{display:inline-block;margin:2px 6px 2px 0}
.signals .sc-enum td:last-child{white-space:normal}

/* The landing: hero chips, Get started steps, five products, build and integrate, coverage table, agent links. Class-based; no inline style anywhere. */
.doc-lead:has(+ .signals .sc-chips){margin-bottom:20px}
.signals .sc-chips{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.signals .sc-chips li{font-size:13.5px;padding:6px 12px;border-radius:999px;background:var(--surface);color:var(--fg-2);white-space:nowrap}
.signals .sc-chips b{font-weight:600;color:var(--fg)}
.signals .sc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.signals .sc-btn{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:8px;background:var(--surface);color:var(--fg);font-size:14px;font-weight:550;text-decoration:none}
.signals .sc-btn-primary{background:var(--inverse-bg);color:var(--inverse-fg)}
@media (hover:hover){.signals .sc-btn:hover{background:var(--surface-hover)}.signals .sc-btn-primary:hover{background:var(--inverse-bg);opacity:.88}}
.signals .sc-steps{display:grid;gap:12px}
.signals .sc-step{background:var(--card);border-radius:var(--radius);padding:18px 20px;min-width:0}
.signals .sc-step h3{display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 10px}
.signals .sc-step-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.signals .sc-step>p{color:var(--fg-2);font-size:14px;margin:0 0 10px}
.signals .sc-step .doc-code{margin:8px 0 0}
.signals .sc-products{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.signals .sc-product{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--card);border-radius:var(--radius);padding:16px 18px;min-width:0}
.signals .sc-product:nth-child(n+4){grid-column:span 3}
.signals .sc-product h3{font-size:15px;margin:0}
.signals .sc-product h3 a{color:var(--fg);text-decoration:none}
.signals .sc-product p{flex:1;margin:0;font-size:13.5px;line-height:1.5;color:var(--fg-2)}
.signals .sc-product .sc-uc-call{align-self:stretch}
.signals .sc-build td{vertical-align:top}
.signals .sc-build td:first-child{white-space:nowrap}
.signals .sc-route{text-decoration:none;color:inherit;white-space:nowrap}
.signals .sc-route code{color:var(--fg)}
.signals .sc-paths{display:grid;gap:12px}
.signals .sc-path{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:start;background:var(--card);border-radius:var(--radius);padding:18px 20px}
.signals .sc-path-t h3{font-size:15px;margin:0 0 8px}
.signals .sc-path-t p{margin:0;color:var(--fg-2);font-size:14px;line-height:1.6}
.signals .sc-path-c{display:grid;gap:8px;min-width:0}
.signals .sc-path-c .doc-code{margin:0}
.signals .sc-cov-t td:first-child{white-space:nowrap}
.signals .sc-cov-t td a{color:var(--fg-2)}
.signals .sc-links-row{display:flex;flex-wrap:wrap;gap:8px}
.signals .sc-link{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--surface);color:var(--fg);font-size:13.5px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
@media (hover:hover){.signals .sc-link:hover{background:var(--surface-hover)}}
.signals .sc-eval td:first-child{white-space:nowrap;width:1%}
.signals .sc-tabbed{display:grid;gap:8px;min-width:0}
@media (max-width:1100px){.signals .sc-product,.signals .sc-product:nth-child(n+4){grid-column:span 3}.signals .sc-products{grid-template-columns:repeat(6,minmax(0,1fr))}.signals .sc-path{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.signals .sc-products{grid-template-columns:minmax(0,1fr)}.signals .sc-product,.signals .sc-product:nth-child(n+4){grid-column:auto}}
@media (max-width:620px){.signals .sc-chips li{white-space:normal}.signals .sc-step{padding:14px}.signals .sc-path{padding:14px}}
.signals .sc-join{margin:0 0 8px;color:var(--fg-2);font-size:14px}
/* Access labels: what an operation asks of the caller (API key required, Request partner access, No key required), on every page head, catalogue row and nav row */
.signals .sc-access{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.signals .sc-access-partner{color:var(--d-amber)}
.signals .sc-lic{margin-left:6px;font-size:11.5px;color:var(--fg-3);white-space:nowrap}
#docs-sidebar .operation-link{display:flex;align-items:center;gap:8px}
#docs-sidebar .sc-nav-acc{margin-left:auto;display:inline-flex;flex:none;color:var(--fg-3)}
.signals .sc-calls-one{grid-template-columns:minmax(0,1fr)}
.signals .sc-chips-lines li{white-space:normal;border-radius:12px;line-height:1.45}
.signals .sc-datasets td:nth-child(2){min-width:16rem;white-space:normal}
/* The key: a chip in every Enterprise page header, and the field in Get started */
.doc-breadcrumb:has(.sc-keychip){display:flex;align-items:center;justify-content:space-between;gap:12px}
.sc-keychip{flex:none;display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--fg-2);font:12px/1.4 var(--sans);text-decoration:none;font-variant-numeric:tabular-nums}
@media (hover:hover){.sc-keychip:hover{background:var(--surface-hover);color:var(--fg)}}
.signals .sc-keyform{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 6px}
.signals .sc-keylabel{font-size:12px;color:var(--fg-3)}
.signals .sc-keyinput{flex:1 1 260px;min-width:0;box-sizing:border-box;background:var(--surface-input);border:0;border-radius:7px;padding:9px 10px;color:var(--fg);font:12.5px/1.4 var(--mono)}
.signals .sc-keyinput:focus{outline:2px solid var(--focus);outline-offset:1px}
.signals .sc-keyform button{border:0;border-radius:7px;background:var(--surface);color:var(--fg);padding:8px 12px;font:13px var(--sans);cursor:pointer}
.signals .sc-keyform button:disabled{color:var(--fg-3);cursor:default}
@media (hover:hover){.signals .sc-keyform button:not(:disabled):hover{background:var(--surface-hover)}}
.signals .sc-keystate{font-size:13px;color:var(--fg-2)}
.signals .sc-keynote{margin:0;color:var(--fg-3)}
/* The Enterprise landing keeps the pack's On this page rail (the generic wide-page rules above hide it on pages with tables) */
@media (min-width:1181px){
  body:has(.signals .sc-steps) #docs-toc{display:block!important}
  .docs-main:has(.signals .sc-steps){margin-right:204px;max-width:1060px}
}
/* The review kit viewer: a modal with the whole source, line numbers from CSS, and the buttons that open it */
.sc-kitbtn{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:0;border-radius:8px;background:var(--surface);color:var(--fg);font:550 13.5px var(--sans);cursor:pointer}
.sc-textbtn{border:0;padding:0;background:none;color:var(--fg);font:inherit;text-decoration:underline;text-decoration-color:var(--fg-3);text-underline-offset:3px;cursor:pointer}
.docs-nav-link.sc-nav-btn{width:100%;border:0;background:none;text-align:left;font:inherit}
@media (hover:hover){.sc-kitbtn:hover{background:var(--surface-hover)}}
.signals .sc-kit-id{margin:6px 0 0;font-size:12.5px;color:var(--fg-2)}
.signals .sc-kit-id code{overflow-wrap:anywhere}
dialog.sc-kit{box-sizing:border-box;width:min(980px,calc(100vw - 32px));height:min(82dvh,840px);max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:var(--card);color:var(--fg);box-shadow:0 20px 80px #0004;overflow:hidden}
dialog.sc-kit[open]{display:flex;flex-direction:column}
dialog.sc-kit::backdrop{background:var(--backdrop-soft,#0006)}
.sc-kit-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.sc-kit-head h2{margin:0;font:600 15px/1.3 var(--mono)}
.sc-kit-meta{flex:1;min-width:0;font-size:12px;color:var(--fg-3)}
.sc-kit-actions{display:flex;gap:8px}
.sc-kit-actions button{min-height:36px;border:0;border-radius:8px;background:var(--surface);color:var(--fg);padding:6px 14px;font:13px var(--sans);cursor:pointer}
@media (hover:hover){.sc-kit-actions button:hover{background:var(--surface-hover)}}
.sc-kit-code{flex:1;min-height:0;overflow:auto;background:var(--bg)}
.sc-kit-code:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.sc-kit-code pre{width:max-content;min-width:100%;margin:0;padding:14px 0;counter-reset:line;font:12px/1.65 var(--mono);color:var(--code-fg)}
.sc-kit-line{counter-increment:line;white-space:pre}
.sc-kit-line::before{content:counter(line);position:sticky;left:0;display:inline-block;width:3.6em;margin-right:1.2em;padding-right:.2em;background:var(--bg);color:var(--fg-3);text-align:right;user-select:none}
.sc-kit-foot{padding:10px 18px 12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--fg-2)}
.sc-kit-foot p{margin:2px 0}
.sc-kit-foot code{font:12px/1.5 var(--mono);overflow-wrap:anywhere}
@media (max-width:620px){dialog.sc-kit{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:none;border-radius:12px}.sc-kit-head{flex-wrap:wrap;gap:6px 12px;padding:12px}.sc-kit-meta{flex-basis:100%;order:3}}