/* MeasureScale docs: components the marketing site has no need for. Tokens, type, header, footer, buttons,
   cards, tables and motion all come from site.css, a verbatim copy of the marketing site's stylesheet. */

/* Docs-only tokens. site.css must stay byte-identical to the marketing site, so the extra values live here.
   The -rgb triplets are site.css's --blue, --blue-2 and --ok, for use with an alpha. */
:root{
  --heading:#fff; --prose:#c9cfd8; --quote:#d6e6f7;
  --blue-rgb:18,126,238; --blue-2-rgb:56,179,255; --ok-rgb:76,227,160;
  /* the portal's --primary and its hover and active steps (measurescale-portal globals.css) */
  --primary:#0f6fd8; --primary-hover:#0c66cc; --primary-active:#0b5fbd;
  /* the portal's card surfaces, for the 404 card */
  --card:#0d1015; --card-2:#181d25;
}

/* ---------- docs home ---------- */
.docs-hero{padding-bottom:40px}
.docs-badge{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 16px;border:1px solid rgba(var(--blue-2-rgb),.32);border-radius:999px;background:rgba(var(--blue-rgb),.1);color:var(--blue-2);font-size:.95rem}
.docs-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px rgba(var(--ok-rgb),.6)}
.docs-hero h1{margin:26px auto 18px}
.docs-asks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:28px auto 0;padding:0;list-style:none}
.docs-asks a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03);color:var(--text);text-decoration:none;font-size:.98rem}
.docs-asks a:hover,.docs-asks a:focus-visible{border-color:rgba(var(--blue-2-rgb),.5);background:rgba(var(--blue-rgb),.1)}
/* An explicit outline, so a later rule cannot weaken the global :focus-visible ring on the chips. */
.docs-asks a:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.docs-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.docs-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;max-width:1020px;margin:72px auto 0;padding:32px;text-align:left;border:1px solid rgba(var(--blue-2-rgb),.22);border-radius:24px;background:linear-gradient(180deg,rgba(var(--blue-rgb),.1),rgba(var(--blue-rgb),.03));-webkit-backdrop-filter:blur(14px) saturate(135%);backdrop-filter:blur(14px) saturate(135%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.panel-label{margin:0 0 10px;color:var(--blue-2);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}
.panel-url{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:1.02rem}
.panel-url code{color:var(--heading);overflow-wrap:anywhere}
.panel-url .copy{position:static;flex:none}
.panel-search{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.25)}
.search-row{display:flex;gap:10px}
.search-row input{flex:1;min-width:0;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.04);color:var(--heading);font:300 1rem var(--sans)}
.search-row input::placeholder{color:var(--dim)}
.search-row input:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}

.docs-section{padding:64px 0;position:relative;scroll-margin-top:84px}
.docs-section+.docs-section{border-top:1px solid var(--line)}
.docs-eyebrow{margin:0 0 10px;color:var(--blue-2);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase}
.docs-section h2{margin-bottom:32px}
.doc-card{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none;min-height:220px}
.doc-card h3{font-size:1.3rem;line-height:1.3;color:var(--heading)}
.doc-card p{color:var(--muted);font-size:.98rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.doc-card .read{margin-top:auto;color:var(--blue-2);font-size:.95rem}
.doc-card:hover{color:inherit}
.doc-card:hover .read .arr{transform:translateX(3px)}
.doc-card .read .arr{display:inline-block;transition:transform var(--t-fast) var(--ease-std)}

/* ---------- article ---------- */
.doc{padding:44px 0 104px}
.doc-crumbs ol{display:flex;gap:10px;margin:0 0 22px;padding:0;list-style:none;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}
.doc-crumbs a{color:var(--dim);text-decoration:none}
.doc-crumbs li+li a{color:var(--blue-2)}
.doc-crumbs li+li::before{content:"·";margin-right:10px;color:var(--dim)}
.doc-crumbs a:hover{color:var(--heading)}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:72px;align-items:start}
.doc-grid.no-toc{grid-template-columns:minmax(0,1fr)}
.doc-body{max-width:820px;min-width:0}
.doc-title{font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.025em}
.doc-lede{margin:16px 0 8px;color:var(--muted);font-size:clamp(1.08rem,1.5vw,1.22rem);line-height:1.6;max-width:68ch}

.doc-prose{color:var(--prose);font-size:1.0625rem;line-height:1.75}
.doc-prose>*+*{margin-top:18px}
.doc-prose>p,.doc-prose>ul,.doc-prose>ol,.doc-prose>blockquote{max-width:42em} /* about 72 characters a line in Outfit; ch overshoots because its 0 is wide */
.doc-prose h2{font-size:1.6rem;line-height:1.25;margin-top:52px;scroll-margin-top:96px}
.doc-prose h3{font-size:1.22rem;line-height:1.35;margin-top:36px;scroll-margin-top:96px}
.doc-prose h2+*,.doc-prose h3+*{margin-top:14px}
.doc-prose p,.doc-prose li{color:var(--prose)}
.doc-prose strong{color:var(--heading);font-weight:500}
.doc-prose ul,.doc-prose ol{padding-left:1.3em;display:grid;gap:8px}
.doc-prose li::marker{color:var(--dim)}
.doc-prose a{color:var(--blue-2)}
.doc-prose a:hover{color:var(--heading)}
.doc-prose :not(pre)>code{padding:2px 7px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.05);color:var(--code);font-size:.88em;overflow-wrap:anywhere}
.doc-prose a code{color:inherit}
.doc-prose pre{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.45)!important;font-size:.88rem;line-height:1.7;overflow-x:auto}
.doc-prose blockquote{margin-left:0;margin-right:0;padding:14px 18px;border:1px solid rgba(var(--blue-2-rgb),.28);border-radius:14px;background:rgba(var(--blue-rgb),.07)}
.doc-prose blockquote p{color:var(--quote)}
.doc-prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.doc-prose .tbl-wrap table{min-width:560px}
.doc-prose .tbl-wrap th,.doc-prose .tbl-wrap td{padding:12px 18px;font-size:.97rem;line-height:1.6}
.doc-prose .tbl-wrap td{color:var(--prose)}

.doc-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.pager{display:flex;flex-direction:column;gap:4px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--heading);text-decoration:none;transition:border-color var(--t-fast) var(--ease-std)}
.pager span{color:var(--dim);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.pager.next{text-align:right;grid-column:2}
.pager:hover{border-color:var(--line-2);color:var(--heading)}

.doc-toc{position:sticky;top:96px}
.toc-card{padding:20px 20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-height:calc(100vh - 128px);overflow-y:auto}
.toc-label{margin:0 0 12px;color:var(--dim);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.toc-card ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.toc-card a{display:block;padding:5px 0;color:var(--muted);font-size:.92rem;line-height:1.4;text-decoration:none}
.toc-card a:hover,.toc-card a[aria-current="true"]{color:var(--heading)}
.toc-card li.d3 a{padding-left:14px;font-size:.88rem}
.toc-md{display:inline-block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--dim);font-size:.85rem;text-decoration:none}
.toc-md:hover{color:var(--heading)}

/* ---------- search ---------- */
.search-page{max-width:640px;margin:22px auto 0}
.search-results{padding-bottom:104px}
.search-status{color:var(--muted)}
.search-results:has(.results:empty) .search-status{text-align:center} /* the prompt and 'no results' sit under the box; a results count lines up with the cards */
.results{list-style:none;padding:0;display:grid;gap:14px;margin-top:20px}
.results li{padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.results a{color:var(--heading);font-size:1.15rem;text-decoration:none}
.results a:hover{color:var(--blue-2)}
.results p{margin-top:6px;color:var(--muted);font-size:.98rem}
.results mark{background:rgba(var(--blue-2-rgb),.22);color:var(--heading);border-radius:3px;padding:0 2px}

/* ---------- 404: the portal's not-found card (measurescale-portal globals.css .auth-*) ---------- */
.nf-page{min-height:100vh;font-size:14px;font-weight:400;line-height:1.5}
.nf-top{display:flex;align-items:center;justify-content:center;height:72px}
.nf-top a{display:inline-flex;color:var(--heading)}
.nf-top svg{height:24px;width:auto}
.nf-main{display:grid;place-items:start center;min-height:calc(100vh - 72px);padding:24px 16px 96px}
.nf-card{width:min(420px,100%);padding:28px;border-radius:14px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14);text-align:center}
.nf-ico{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 16px;border-radius:12px;background:var(--card-2);color:var(--blue-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.nf-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nf-card h1{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--heading)}
.nf-sub{margin-top:6px;color:var(--muted)}
.nf-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin-top:20px;border-radius:8px;background:var(--primary);color:var(--heading);font-weight:500;font-size:14px;line-height:1;text-decoration:none;transition:background-color var(--t-fast) var(--ease-std)}
.nf-btn:hover{background:var(--primary-hover);color:var(--heading)}
.nf-btn:active{background:var(--primary-active)}
.nf-foot{margin-top:16px;color:var(--muted)}
.nf-foot a{color:var(--blue-2)}
@media (max-width:680px){.nf-card{padding:22px}.nf-btn{min-height:44px}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .doc-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .doc-toc{display:none}
}
@media (max-width:860px){
  .docs-panel{grid-template-columns:1fr;padding:22px}
  .docs-section{padding:48px 0}
  .doc-card{min-height:0}
}
@media (max-width:680px){
  .search-row{flex-direction:column}
  .search-row .btn{width:100%}
  .doc-pager{grid-template-columns:1fr}
  .pager.next{grid-column:1}
}