/* Clarity Measure reading pages: /developers and the documentation.

   The tokens, the header, the buttons and the brand come from /marketing.css,
   which this sheet loads after; this is the reading surface both pages share.
   It is laid out like the documentation people already trust: a solid bar, a
   section rail down the left, a 68ch reading column, and the headings of the
   section you are in down the right on a wide screen. No new colours: every
   value is a token or a color-mix of one. */

/* --read-wash is how much surface the bar lays over whatever scrolls beneath
   it. One knob, shared by both pages. */
:root{--read-wash:92%;--doc-link:var(--blue-ink);--doc-text:var(--ink-2);--rail:260px;--toc:232px;--read:760px}
body[data-chrome="reading"]{background:var(--paper)}

/* The header on a reading page.

   The marketing header is transparent until you scroll and then floats as a
   narrow bar, which is right over a hero and wrong over a page of text. Both
   pages opt out with data-chrome="reading" on the body: a solid bar with a
   hairline from the first pixel, full width, and it stays put. */
body[data-chrome="reading"] .site-header:not(.is-scrolled){background:color-mix(in srgb,var(--canvas) var(--read-wash),transparent);border-bottom:1px solid var(--line)}
body[data-chrome="reading"] .site-header.is-scrolled{background:color-mix(in srgb,var(--canvas) var(--read-wash),transparent);border-bottom:1px solid var(--line);padding-top:0}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body[data-chrome="reading"] .site-header:not(.is-scrolled){background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
  body[data-chrome="reading"] .site-header.is-scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
}
body[data-chrome="reading"] .header-inner,body[data-chrome="reading"] .site-header.is-scrolled .header-inner{width:100%;max-width:1440px;height:56px;margin-inline:auto;padding:0 24px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-chrome="reading"] .desktop-nav{margin-left:12px}

/* ------------------------------------------------------------------ layout */
.dev-panel{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;padding:0;border:0;border-radius:0;background:none}
.dev-head{position:relative;z-index:1;padding:48px 0 8px}
.dev-head h1{font-size:clamp(30px,3.4vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance;max-width:var(--read)}
.dev-lede{margin:0 0 24px;font-size:17px;line-height:1.6;color:var(--doc-text);max-width:60ch}
.dev-actions{display:flex;flex-wrap:wrap;gap:8px}
.dev-layout{position:relative;z-index:1}
.dev-content{min-width:0}
.dev-bar{display:none}
.dev-toc{display:none}

/* ------------------------------------------------------------------- prose */
.dev-section{padding-block:40px 8px;border-top:1px solid var(--line)}
.dev-section:first-child{border-top:0;padding-top:24px}
.dev-section h2{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin:0 0 12px;scroll-margin-top:88px}
.dev-section h3{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.35;margin:32px 0 8px;scroll-margin-top:88px}
.dev-section p{margin:0 0 16px;font-size:15px;line-height:1.7;color:var(--doc-text);max-width:68ch}
.dev-section strong{color:var(--ink);font-weight:600}
.dev-section code{font-family:var(--mono);font-size:.86em;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:.08em .36em;overflow-wrap:anywhere}
.dev-section a{color:var(--doc-link);text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px;transition:text-decoration-color .12s var(--ease)}
.dev-section a:hover{text-decoration-color:currentColor}
.dev-list{margin:0 0 16px;padding-left:20px;max-width:68ch}
.dev-list li{font-size:15px;line-height:1.7;color:var(--doc-text)}
.dev-list li+li{margin-top:6px}
.dev-list li::marker{color:var(--ink-3)}
.dev-note{font-size:14px!important;color:var(--doc-text);border-left:1px solid var(--line-2);padding-left:14px}

/* -------------------------------------------------------------------- rail */
.dev-nav{position:relative;z-index:1}
.dev-nav-title{margin:20px 0 6px 8px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.dev-nav-title:first-of-type{margin-top:0}
.dev-nav a{display:flex;align-items:center;min-height:30px;padding:5px 8px;margin-bottom:1px;border-radius:6px;font-size:14px;line-height:1.35;font-weight:450;color:var(--doc-text);transition:color .12s var(--ease),background-color .12s var(--ease)}
.dev-nav a:hover{color:var(--ink);background:var(--surface-2)}
.dev-nav a.is-current{color:var(--ink);font-weight:500;background:var(--surface-3)}

/* The headings of the section you are reading, on a wide screen. */
.dev-toc-title{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--ink-3)}
.dev-toc ul{list-style:none;margin:0;padding:0 0 0 12px;border-left:1px solid var(--line)}
.dev-toc a{display:block;padding:4px 0;font-size:13px;line-height:1.4;color:var(--doc-text);transition:color .12s var(--ease)}
.dev-toc a:hover{color:var(--ink)}

/* -------------------------------------------------------------------- code
   A white head with the language and a quiet Copy key, the sample on the
   rail's tint below it. Hairline, 10px corners, no shadow. */
.code-glass{position:relative;margin:0 0 20px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.code-glass-head{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 6px 0 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.code-lang{flex:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:lowercase;color:var(--ink-3)}
.code-title{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-glass-head .copy-button{flex:none;gap:5px;min-height:28px;padding-inline:8px;font-size:12px;font-weight:500;background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.code-glass-head .copy-button::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='8.5' y='8.5' width='11.5' height='11.5' rx='2'/><path d='M15.5 8.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7.5a2 2 0 0 0 2 2h2.5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='8.5' y='8.5' width='11.5' height='11.5' rx='2'/><path d='M15.5 8.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7.5a2 2 0 0 0 2 2h2.5'/></svg>") center/contain no-repeat}
.code-glass-head .copy-button:hover{background:var(--surface-3);color:var(--ink)}
.code-glass pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink);tab-size:2;-webkit-overflow-scrolling:touch}
.code-glass code{font:inherit;color:inherit;background:none;border:0;padding:0}

/* ------------------------------------------------------------------ tables
   The product's table grammar: 12px headers in the tertiary ink, hairline
   rows, the first column set in ink. */
.table-wrap{margin:0 0 20px;overflow-x:auto;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch}
.table-wrap table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.6}
.table-wrap caption{text-align:left;padding:12px 16px;font-size:13px;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--ink);border-bottom:1px solid var(--line)}
.table-wrap th{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);background:var(--surface-2)}
.table-wrap th,.table-wrap td{padding:10px 16px;vertical-align:top;border-bottom:1px solid var(--line);color:var(--doc-text)}
.table-wrap td:first-child{min-width:120px;color:var(--ink);font-weight:500}
.table-wrap td:first-child code{white-space:nowrap}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap code{font-size:12.5px}

/* --------------------------------------------------------- wide: the rail
   The rail runs the full height beside the column; the head and the content
   share one text edge. */
@media (min-width:1000px){
  .dev-panel{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}
  .dev-layout{display:contents}
  .dev-nav{grid-column:1;grid-row:1 / span 2;position:sticky;top:var(--header-h,57px);align-self:start;height:calc(100dvh - var(--header-h,57px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:28px 16px 40px 24px;border-right:1px solid var(--line)}
  .dev-head,.dev-content{grid-column:2;width:min(100%,calc(var(--read) + 112px));padding-inline:56px}
  .dev-head{grid-row:1;padding-top:56px}
  .dev-content{grid-row:2;padding-bottom:88px}
}
@media (min-width:1280px){
  .dev-panel{grid-template-columns:var(--rail) minmax(0,1fr) var(--toc)}
  .dev-toc{display:block;grid-column:3;grid-row:1 / span 2;position:sticky;top:var(--header-h,57px);align-self:start;max-height:calc(100dvh - var(--header-h,57px));overflow-y:auto;padding:60px 24px 24px 0}
}

/* ---------------------------------------------------- narrow: one column
   The rail folds into a bar under the header that names the section you are
   in; a tap opens the whole list over the page. With no script the rail is
   simply a list above the content. */
@media (max-width:999px){
  .dev-head,.dev-content,.dev-nav{padding-inline:32px}
  .dev-head{padding-top:40px}
  .dev-nav{padding-block:8px 16px;border-bottom:1px solid var(--line)}
  .dev-content{padding-bottom:64px}
  html.js .dev-bar{position:sticky;top:var(--header-h,57px);z-index:6;display:flex;align-items:center;gap:8px;padding:8px 32px;background:color-mix(in srgb,var(--paper) 96%,transparent);border-block:1px solid var(--line)}
  .dev-nav-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--ink);font-size:14px;text-align:left;box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent)}
  .dev-nav-toggle-label{flex:none;color:var(--ink-3)}
  .dev-nav-toggle-current{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
  .dev-nav-toggle svg,.dev-bar-search svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .dev-nav-toggle svg{margin-left:auto;color:var(--ink-3);transition:transform .15s var(--ease)}
  .dev-nav-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
  .dev-bar-search{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--ink-2)}
  html.js .dev-nav{display:none}
  html.js .dev-nav.is-open{display:block;position:fixed;z-index:7;left:0;right:0;top:calc(var(--header-h,57px) + 57px);max-height:calc(100dvh - var(--header-h,57px) - 57px);overflow-y:auto;overscroll-behavior:contain;padding:12px 24px calc(20px + env(safe-area-inset-bottom,0px));background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 16px 32px -16px rgb(13 25 38 / .22)}
  html.js .dev-nav a{min-height:44px;font-size:16px}
  html.js .dev-nav .dev-search{display:none}
}
@media (max-width:767px){
  body[data-chrome="reading"] .header-inner,body[data-chrome="reading"] .site-header.is-scrolled .header-inner{padding:0 16px}
  .dev-head,.dev-content,.dev-nav{padding-inline:16px}
  html.js .dev-bar{padding-inline:16px}
  html.js .dev-nav.is-open{padding-inline:16px}
  .dev-head{padding-top:28px}
  .dev-head h1{font-size:clamp(28px,8vw,34px);letter-spacing:-.03em}
  .dev-lede{font-size:16px}
  .dev-actions{display:grid}
  .dev-actions .button{width:100%;min-height:44px}
  .dev-section{padding-top:32px}
  .dev-section h2{font-size:21px;scroll-margin-top:128px}
  .dev-section h3{scroll-margin-top:128px}
  .dev-section p,.dev-list li{font-size:16px}
  .code-glass{margin-inline:-16px;border-radius:0;border-inline:0}
  .code-glass-head{padding-left:16px}
  .code-glass pre{padding:14px 16px;font-size:12.5px}
  .table-wrap{margin-inline:-16px;border-radius:0;border-inline:0}
  .table-wrap th,.table-wrap td{padding:10px 12px}
  .table-wrap th:first-child,.table-wrap td:first-child,.table-wrap caption{padding-left:16px}
}

@media (prefers-reduced-motion:reduce){
  .dev-nav a,.dev-toc a,.dev-nav-toggle svg{transition:none}
}