/* Studio components inside page content (.md-typeset). */

/* ---------- Typography ---------- */

.md-typeset {
  color: var(--nac-text);
  font-size: 16px;
  line-height: 1.75;
}

.md-typeset h1 {
  margin: 0 0 14px;
  color: var(--nac-text);
  font-family: var(--nac-font-sans);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.md-typeset h2 {
  margin: 56px 0 14px;
  font-family: var(--nac-font-sans);
  font-size: 26px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.md-typeset h3 {
  margin: 36px 0 10px;
  font-size: 19px;
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.md-typeset h4 {
  margin: 28px 0 8px;
  font-size: 16px;
  font-weight: 680;
}

.md-typeset h5,
.md-typeset h6 {
  color: var(--nac-text-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code {
  font-size: 0.86em;
  border: 0;
  background: none;
  padding: 0;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  color: color-mix(in srgb, var(--nac-text) 88%, var(--nac-text-2));
}

.md-typeset .headerlink {
  margin-left: 8px;
  color: var(--nac-text-3);
  font-family: var(--nac-font-sans);
  font-weight: 400;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--nac-ease), transform 0.2s var(--nac-ease), color 0.2s var(--nac-ease);
}

.md-typeset :is(h1, h2, h3, h4):hover .headerlink,
.md-typeset .headerlink:focus-visible,
.md-typeset [id]:target .headerlink {
  opacity: 1;
  transform: none;
}

.md-typeset .headerlink:hover,
.md-typeset [id]:target .headerlink {
  color: var(--nac-brand);
}

.md-typeset [id]:target {
  animation: nac-target 1.6s var(--nac-ease);
}

@keyframes nac-target {
  0%, 30% {
    text-shadow: 0 0 24px color-mix(in srgb, var(--nac-brand) 60%, transparent);
  }
}

.md-typeset a {
  color: var(--nac-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.2s var(--nac-ease), color 0.2s var(--nac-ease);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--nac-link);
  text-decoration-color: currentColor;
}

.md-typeset .headerlink,
.md-typeset .md-button,
.md-typeset .grid.cards a,
.md-typeset .tabbed-labels a {
  text-decoration: none;
}

.md-typeset hr {
  border-bottom-color: var(--nac-edge);
}

.md-typeset hr + h2 {
  margin-top: 28px;
}

.md-typeset blockquote {
  border-left: 2px solid var(--nac-edge-strong);
  color: var(--nac-text-2);
}

.md-typeset mark {
  background: var(--nac-amber-tint);
  color: inherit;
  border-radius: 3px;
}

.md-typeset kbd {
  border: 1px solid var(--nac-edge);
  border-radius: 4px;
  background: var(--nac-surface-2);
  box-shadow: 0 1px 0 var(--nac-edge-strong);
  color: var(--nac-text);
  font-size: 0.72em;
}

/* ---------- Inline code ---------- */

.md-typeset :not(pre) > code {
  padding: 0.08em 0.35em;
  border: 1px solid var(--nac-edge);
  border-radius: 4px;
  background: var(--nac-surface-2);
  color: var(--nac-text);
  font-size: 0.84em;
  word-break: normal;
}

.md-typeset a > code {
  color: var(--nac-link);
}

/* ---------- Code blocks ---------- */

.md-typeset pre {
  margin: 1.1em 0;
}

.md-typeset .highlight,
.md-typeset .highlighttable {
  margin: 1.4em 0;
  border: 1px solid var(--nac-edge);
  border-radius: 14px;
  background: var(--nac-surface-1);
  box-shadow: inset 0 1px 0 var(--nac-edge-light), var(--nac-shadow-1);
  overflow: hidden;
  transition: border-color 0.25s var(--nac-ease), box-shadow 0.25s var(--nac-ease);
}

.md-typeset .highlight:hover {
  border-color: var(--nac-edge-strong);
  box-shadow: inset 0 1px 0 var(--nac-edge-light), var(--nac-shadow-2);
}

.md-typeset .highlight pre,
.md-typeset .highlighttable pre {
  margin: 0;
}

.md-typeset pre > code {
  padding: 18px 20px;
  background: transparent;
  font-size: 13.5px;
  line-height: 1.7;
  scrollbar-color: var(--nac-edge-strong) transparent;
}

.md-typeset .highlight span.filename {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--nac-edge);
  border-radius: 0;
  background: var(--nac-surface-2);
  color: var(--nac-text-2);
  font-family: var(--nac-font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.md-typeset .highlight span.filename::before {
  content: "";
  width: 34px;
  height: 8px;
  flex: none;
  background:
    radial-gradient(circle at 4px 4px, #ff6b6b 3.5px, transparent 4px),
    radial-gradient(circle at 17px 4px, #f5b448 3.5px, transparent 4px),
    radial-gradient(circle at 30px 4px, #7fd8c9 3.5px, transparent 4px);
  opacity: 0.85;
}

.md-typeset .highlight span.filename + pre {
  margin-top: 0;
}

.md-typeset .highlight .hll {
  background: var(--nac-brand-tint);
  box-shadow: inset 2px 0 0 var(--nac-brand);
}

.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm {
  font-style: italic;
}

.md-clipboard,
.md-code__nav {
  color: var(--nac-text-3);
  opacity: 0;
  transition: color 0.15s var(--nac-ease), opacity 0.2s var(--nac-ease);
}

.md-typeset .highlight:hover :is(.md-clipboard, .md-code__nav),
.md-typeset .highlight :is(.md-clipboard, .md-code__nav):focus-within,
.md-typeset .highlight .md-clipboard:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .md-clipboard,
  .md-code__nav {
    opacity: 1;
  }
}

.md-typeset .md-code__nav {
  background: transparent;
  box-shadow: none;
}

.md-typeset .md-code__button {
  color: var(--nac-text-3);
}

.md-typeset .md-code__button:hover,
.md-typeset .md-code__button:focus,
.md-clipboard:hover,
.md-clipboard:focus {
  color: var(--nac-text);
}

.md-typeset .md-annotation__index {
  font-family: var(--nac-font-mono);
}

.md-typeset .md-annotation__index::after {
  background: var(--nac-brand-strong);
}

/* ---------- Content tabs as a segmented control ---------- */

.md-typeset .tabbed-set {
  margin: 1.2em 0;
  border: 1px solid var(--nac-edge);
  border-radius: var(--nac-radius-m);
  background: var(--nac-surface-1);
  box-shadow: inset 0 1px 0 var(--nac-edge-light), var(--nac-shadow-1);
  overflow: hidden;
}

.md-typeset .tabbed-labels {
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  border-bottom: 1px solid var(--nac-edge);
  background: var(--nac-surface-2);
  box-shadow: none;
}

.md-typeset .tabbed-labels > label {
  height: auto;
  align-self: center;
  padding: 0.35em 0.8em;
  border: 0;
  border-radius: var(--nac-radius-s);
  color: var(--nac-text-3);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.15s var(--nac-ease), background 0.15s var(--nac-ease);
}

/* Labels wrap a permalink anchor that carries the theme's own padding. */
.md-typeset .tabbed-labels > label:has(> [href]:first-child) {
  padding: 0;
}

.md-typeset .tabbed-labels > label > [href]:first-child {
  padding: 0.35em 0.8em;
  color: inherit;
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--nac-text);
}

.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8) {
  color: var(--nac-text);
  background: var(--nac-surface-3);
  box-shadow: inset 0 1px 0 var(--nac-edge-light), 0 0 0 1px var(--nac-edge-strong);
}

/* The theme's sliding underline is replaced by the selected-label surface. */
.md-typeset .tabbed-labels::before {
  display: none;
}

.md-typeset .tabbed-content {
  padding: 0 0.9rem;
}

.md-typeset .tabbed-block > .highlight,
.md-typeset .tabbed-block > pre {
  margin: 0 -0.9rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.md-typeset .tabbed-block > .highlight:hover {
  box-shadow: none;
}

/* Every block after the first is separated by a rule, never drawn as a nested card. */
.md-typeset .tabbed-block > :is(.highlight, pre):not(:first-child) {
  margin-top: 0.9rem;
  border-top: 1px solid var(--nac-edge);
}

.md-typeset .tabbed-block > :is(.highlight, pre) + :is(.highlight, pre) {
  margin-top: 0;
}

.md-typeset .tabbed-block > :is(.highlight, pre):not(:last-child):not(:has(+ :is(.highlight, pre))) {
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--nac-edge);
}

.md-typeset .tabbed-block > :is(.highlight, pre):last-child {
  margin-bottom: 0;
}

.md-typeset .tabbed-block > :not(.highlight):first-child {
  margin-top: 0.9rem;
}

/* ---------- Callouts (admonitions and details) ---------- */

/* :is()/[class] lift these above the theme's per-type selectors. */
.md-typeset :is(.admonition, details)[class] {
  margin: 1.4em 0;
  padding: 0 0.9rem;
  border: 1px solid var(--nac-callout-edge, var(--nac-edge));
  border-radius: var(--nac-radius-m);
  background: var(--nac-surface-1);
  box-shadow: inset 0 1px 0 var(--nac-edge-light), var(--nac-shadow-1);
  font-size: 0.74rem;
}

.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary) {
  margin: 0 -0.9rem;
  padding: 0.55rem 0.9rem 0.55rem 2.3rem;
  border: 0;
  border-bottom: 1px solid var(--nac-edge);
  background: var(--nac-callout-tint, var(--nac-surface-2));
  color: var(--nac-text);
  font-weight: 700;
}

.md-typeset details:not([open])[class] > summary {
  border-bottom: 0;
}

.md-typeset :is(.admonition, details)[class] > :is(.admonition-title, summary)::before {
  left: 0.85rem;
  top: 0.65rem;
  background-color: var(--nac-callout, var(--nac-brand));
}

.md-typeset summary::after {
  top: 0.6rem;
  color: var(--nac-text-3);
}

.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 0.8rem;
}

.md-typeset .admonition > .admonition-title + *,
.md-typeset details > summary + * {
  margin-top: 0.8rem;
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.abstract,
.md-typeset details.abstract,
.md-typeset .admonition.question,
.md-typeset details.question {
  --nac-callout: var(--nac-brand);
  --nac-callout-tint: var(--nac-brand-tint);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.example,
.md-typeset details.example {
  --nac-callout: var(--nac-green);
  --nac-callout-tint: color-mix(in srgb, var(--nac-green) 12%, transparent);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution,
.md-typeset .admonition.attention,
.md-typeset details.attention {
  --nac-callout: var(--nac-amber);
  --nac-callout-tint: var(--nac-amber-tint);
  --nac-callout-edge: color-mix(in srgb, var(--nac-amber) 35%, var(--nac-edge));
}

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.bug,
.md-typeset details.bug,
.md-typeset .admonition.error,
.md-typeset details.error {
  --nac-callout: var(--nac-red);
  --nac-callout-tint: color-mix(in srgb, var(--nac-red) 12%, transparent);
  --nac-callout-edge: color-mix(in srgb, var(--nac-red) 35%, var(--nac-edge));
}

.md-typeset .admonition.quote,
.md-typeset details.quote {
  --nac-callout: var(--nac-text-3);
}

/* ---------- Tables ---------- */

.md-typeset__scrollwrap {
  margin: 1.2em 0;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--nac-edge);
  border-radius: var(--nac-radius-m);
  background: var(--nac-surface-1);
  box-shadow: var(--nac-shadow-1);
  font-size: 0.7rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--nac-edge);
  background: var(--nac-surface-2);
  color: var(--nac-text-3);
  font-family: var(--nac-font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-typeset table:not([class]) td {
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--nac-edge);
  font-variant-numeric: tabular-nums;
}

.md-typeset table:not([class]) tbody tr {
  transition: background 0.15s var(--nac-ease);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--nac-surface-2);
  box-shadow: none;
}

/* ---------- Buttons ---------- */

.md-typeset .md-button {
  padding: 0.55em 1.2em;
  border: 1px solid var(--nac-edge);
  border-radius: var(--nac-radius-m);
  background: var(--nac-surface-1);
  color: var(--nac-text);
  font-size: 0.72rem;
  font-weight: 600;
  transition: background 0.15s var(--nac-ease), border-color 0.15s var(--nac-ease), transform 0.1s var(--nac-ease);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  border-color: var(--nac-edge-strong);
  background: var(--nac-surface-2);
  color: var(--nac-text);
}

.md-typeset .md-button:active {
  transform: translateY(1px);
}

.md-typeset .md-button--primary {
  border-color: transparent;
  background: var(--nac-brand-strong);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  border-color: transparent;
  background: color-mix(in srgb, var(--nac-brand-strong) 85%, #000000);
  color: #ffffff;
}

/* ---------- Cards ---------- */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--nac-edge);
  border-radius: var(--nac-radius-m);
  background: var(--nac-surface-1);
  box-shadow: inset 0 1px 0 var(--nac-edge-light), var(--nac-shadow-1);
  transition: border-color 0.2s var(--nac-ease), box-shadow 0.2s var(--nac-ease), transform 0.2s var(--nac-ease);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: color-mix(in srgb, var(--nac-brand) 50%, var(--nac-edge));
  box-shadow: inset 0 1px 0 var(--nac-edge-light), var(--nac-shadow-2);
  transform: translateY(-2px);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6em 0;
}

/* ---------- Details, footnotes, tooltips ---------- */

.md-typeset .footnote {
  color: var(--nac-text-2);
}

.md-tooltip,
.md-tooltip2 {
  border: 1px solid var(--nac-edge-strong);
  border-radius: var(--nac-radius-s);
  background: var(--nac-surface-2);
  color: var(--nac-text);
  box-shadow: var(--nac-shadow-2);
}

/* ---------- Page patterns (front matter `type:`) ---------- */

.md-typeset .nac-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--nac-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.md-typeset .nac-kicker > span {
  padding: 3px 10px;
  border: 1px solid var(--nac-edge);
  border-radius: 999px;
  background: var(--nac-surface-1);
}

.md-typeset .nac-kicker__type {
  color: var(--nac-link);
  border-color: color-mix(in srgb, var(--nac-brand) 40%, var(--nac-edge)) !important;
  background: var(--nac-brand-tint) !important;
}

.md-typeset .nac-kicker__step {
  color: var(--nac-text-2);
}

.md-typeset .nac-kicker__status {

  border: 1px solid currentColor;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.md-typeset .nac-kicker__status--new {
  color: var(--nac-green);
}

.md-typeset .nac-kicker__status--changed {
  color: var(--nac-brand);
}

.md-typeset .nac-kicker__status--deprecated {
  color: var(--nac-amber);
}

/* The first paragraph after the title is the lede. */
.md-content__inner > h1 + p {
  margin-bottom: 32px;
  color: var(--nac-text-2);
  font-size: 19px;
  line-height: 1.6;
}

/* Numbered steps: <div class="nac-steps" markdown> with one ### per step. */
.md-typeset .nac-steps {
  margin: 1.4rem 0;
  counter-reset: nac-step;
}

.md-typeset .nac-steps > h3 {
  position: relative;
  margin: 1.8rem 0 0.6rem;
  padding-left: 2.2rem;
  counter-increment: nac-step;
}

.md-typeset .nac-steps > h3::before {
  content: counter(nac-step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--nac-edge-strong);
  border-radius: 50%;
  background: var(--nac-surface-2);
  color: var(--nac-text);
  font-family: var(--nac-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
}

.md-typeset .nac-steps > :not(h3) {
  margin-left: 2.2rem;
}

.md-typeset .nac-steps > h3:first-child {
  margin-top: 0.6rem;
}

/* API signature: <div class="nac-signature" markdown> around one code block. */
.md-typeset .nac-signature {
  margin: 1rem 0 1.4rem;
  border: 1px solid var(--nac-edge);
  border-left: 2px solid var(--nac-brand);
  border-radius: var(--nac-radius-m);
  background: var(--nac-surface-1);
  overflow: hidden;
}

.md-typeset .nac-signature .highlight {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.md-typeset .nac-signature .highlight pre > code {
  font-size: 0.7rem;
}

/* Version notices and "Before you start": !!! new | changed | deprecated | prerequisites */
:root {
  --md-admonition-icon--new: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 13h-4v4h-2v-4H7v-2h4V7h2v4h4m-5-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg>');
  --md-admonition-icon--changed: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 9l-4-4v3h-7v2h7v3M7 11l-4 4 4 4v-3h7v-2H7z"/></svg>');
  --md-admonition-icon--deprecated: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.27 3 3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3M11 7h2v6h-2m0 2h2v2h-2"/></svg>');
  --md-admonition-icon--prerequisites: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 20.42 2.79 14.21l2.83-2.83L9 14.77l9.88-9.89 2.83 2.83z"/></svg>');
}

.md-typeset :is(.admonition, details):is(.new, .changed, .deprecated, .prerequisites) > :is(.admonition-title, summary)::before {
  -webkit-mask-image: var(--nac-notice-icon);
  mask-image: var(--nac-notice-icon);
}

.md-typeset :is(.admonition, details).new {
  --nac-notice-icon: var(--md-admonition-icon--new);
  --nac-callout: var(--nac-green);
  --nac-callout-tint: color-mix(in srgb, var(--nac-green) 12%, transparent);
}

.md-typeset :is(.admonition, details).changed {
  --nac-notice-icon: var(--md-admonition-icon--changed);
  --nac-callout: var(--nac-brand);
  --nac-callout-tint: var(--nac-brand-tint);
}

.md-typeset :is(.admonition, details).deprecated {
  --nac-notice-icon: var(--md-admonition-icon--deprecated);
  --nac-callout: var(--nac-amber);
  --nac-callout-tint: var(--nac-amber-tint);
  --nac-callout-edge: color-mix(in srgb, var(--nac-amber) 35%, var(--nac-edge));
}

.md-typeset :is(.admonition, details).prerequisites {
  --nac-notice-icon: var(--md-admonition-icon--prerequisites);
  --nac-callout: var(--nac-text-2);
  --nac-callout-tint: var(--nac-surface-2);
}

/* Previous/next learning navigation reads as a pair of cards on every page. */
.md-footer__inner:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.md-footer__link--next {
  grid-column: 2;
  text-align: right;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .nac-steps > :not(h3) {
    margin-left: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .md-typeset * {
    transition: none !important;
  }
}