/*
  Als Preview User Guide (docs/*.html), on top of site.css: its colors,
  type and navigation bar. A contents sidebar on the left, one readable
  column of text, figures that may run a little wider.

  The sidebar is the same block in every page; when a page is added or
  renamed, change it in all of them (website/docs-nav.py does that).
*/

.docs {
  --doc-text: 692px;
  --doc-sidebar: 248px;
  --doc-gap: clamp(32px, 4vw, 64px);
  --doc-note: rgb(0 113 227 / 0.07);
  --doc-note-edge: rgb(0 113 227 / 0.5);
  --doc-warn: rgb(255 159 10 / 0.1);
  --doc-warn-edge: rgb(255 159 10 / 0.75);
  --doc-row: rgb(0 0 0 / 0.025);
  /* The Recording lane's colors: the plugin's takes and the rendered preview. */
  --doc-take: #2fa84a;
  --doc-rendered: #4775b5;
}

@media (prefers-color-scheme: dark) {
  .docs {
    --doc-note: rgb(41 151 255 / 0.12);
    --doc-note-edge: rgb(41 151 255 / 0.6);
    --doc-warn: rgb(255 159 10 / 0.12);
    --doc-warn-edge: rgb(255 159 10 / 0.7);
    --doc-row: rgb(255 255 255 / 0.03);
    /* The app's own colors, made for its dark arrangement. */
    --doc-take: #5cd65c;
    --doc-rendered: #5a87c6;
  }
}

/* The bar spans the guide's two columns. */
.docs .nav .container {
  max-width: calc(var(--doc-sidebar) + var(--doc-gap) + 920px + 2 * var(--gutter));
}

.docs .nav-links a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
}

/* Two columns: contents, then the page. */
.docs-shell {
  display: grid;
  grid-template-columns: var(--doc-sidebar) minmax(0, 1fr);
  gap: var(--doc-gap);
  width: 100%;
  max-width: calc(var(--doc-sidebar) + var(--doc-gap) + 920px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Contents */
.docs-sidebar {
  position: sticky;
  top: 52px;
  align-self: start;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  padding: 36px 4px 48px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.docs-sidebar summary {
  display: none;
}

.docs-toc .docs-toc-title {
  display: block;
  margin: 0 0 18px;
  padding: 0 10px;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.012em;
}

.docs-toc .docs-toc-title:hover {
  background: none;
  text-decoration: none;
}

.docs-toc h2 {
  margin: 22px 0 6px;
  padding-left: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.docs-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-toc a {
  display: block;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.docs-toc a:hover {
  background: var(--field);
  text-decoration: none;
}

.docs-toc a[aria-current="page"] {
  background: var(--highlight);
  color: var(--link);
  font-weight: 600;
}

/* The page */
.docs-main {
  min-width: 0;
  padding: clamp(36px, 5vw, 56px) 0 clamp(64px, 8vw, 104px);
}

.docs-article {
  max-width: var(--doc-text);
}

.docs-eyebrow {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.docs-article h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.003em;
  text-wrap: balance;
}

.docs-lede {
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: clamp(19px, 1.7vw, 21px);
  line-height: 1.38;
  letter-spacing: 0.011em;
  text-wrap: pretty;
}

.docs-article h2 {
  margin: clamp(48px, 6vw, 64px) 0 0;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.004em;
  scroll-margin-top: 76px;
}

.docs-article h3 {
  margin: 36px 0 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.012em;
  scroll-margin-top: 76px;
}

.docs-article h4 {
  margin: 24px 0 0;
  font-size: 17px;
  font-weight: 600;
}

.docs-article p,
.docs-article ul,
.docs-article ol,
.docs-article dl {
  margin: 14px 0 0;
}

.docs-article li + li {
  margin-top: 6px;
}

.docs-article ul,
.docs-article ol {
  padding-left: 1.3em;
}

.docs-article li::marker {
  color: var(--text-secondary);
}

.docs-article strong {
  font-weight: 600;
}

.docs-article a:not(.docs-card):not(.docs-pager a) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-underline-offset: 0.18em;
}

.docs-article a:not(.docs-card):hover {
  text-decoration-color: currentColor;
}

/* On this page */
.docs-onpage {
  margin: 28px 0 0;
  padding: 16px 20px 18px;
  border-radius: 14px;
  background: var(--tile);
  font-size: 15px;
}

.docs-onpage p {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.docs-onpage ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-onpage li + li {
  margin: 0;
}

.docs-onpage a {
  text-decoration: none !important;
}

/* Keys, menus and UI names */
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 0.5px var(--hairline), 0 1px 0 0.5px var(--hairline);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 0.82em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: 0.06em;
}

.ui {
  font-weight: 600;
}

.path {
  font-weight: 600;
}

.path .sep {
  color: var(--text-tertiary);
  font-weight: 400;
  padding-inline: 0.15em;
}

.docs-article code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Figures: screenshots may run wider than the text. */
.docs-figure {
  margin: 28px 0 0;
}

.docs-figure.wide {
  width: min(920px, 100%);
}

@media (min-width: 1100px) {
  .docs-figure.wide {
    width: min(920px, calc(100vw - var(--doc-sidebar) - var(--doc-gap) - 2 * var(--gutter)));
  }
}

.docs-figure img,
.docs-figure svg.diagram {
  width: 100%;
  height: auto;
}

/* A shot with its own background (Live, a window, a card), on a rounded plate. */
.docs-figure.framed img {
  border-radius: 12px;
  box-shadow: 0 0 0 0.5px var(--hairline), 0 18px 40px -18px rgb(20 20 40 / 0.35);
}

/* Window and card captures with transparent corners: the shadow follows their shape. */
.docs-figure.window img {
  filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.22)) drop-shadow(0 4px 10px rgb(0 0 0 / 0.12));
}

@media (prefers-color-scheme: dark) {
  .docs-figure.window img {
    filter: drop-shadow(0 20px 40px rgb(0 0 0 / 0.8));
  }
}

/* A small capture at most its own size. */
.docs-figure.small img {
  max-width: 440px;
}

.docs-figure.center img {
  margin-inline: auto;
}

.docs-figure figcaption {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.43;
  text-wrap: pretty;
}

.docs-figure.window figcaption,
.docs-figure.framed figcaption {
  margin-top: 16px;
}

/* Two shots side by side, one above the other on phones. */
.docs-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin: 28px 0 0;
}

.docs-pair .docs-figure {
  margin: 0;
}

@media (max-width: 640px) {
  .docs-pair {
    grid-template-columns: 1fr;
  }
}

/* Diagrams: drawn in the page's own colors. */
.diagram {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.diagram-plate {
  padding: clamp(16px, 3vw, 28px);
  border-radius: 18px;
  background: var(--tile);
  overflow-x: auto;
  scrollbar-width: none;
}

.diagram-plate::-webkit-scrollbar {
  display: none;
}

/* Inside a plate, cards are lighter than the plate in light mode and lighter still in dark. */
.diagram-plate .diagram .fill-tile { fill: var(--tile-strong); }

.diagram .ring-seg { fill: var(--tile-strong); transition: fill 0.12s; }
.diagram .ring-seg.on { fill: color-mix(in srgb, var(--link) 75%, transparent); }
.diagram .ring-head line { stroke: var(--text-secondary); }
.diagram .ring-head text { fill: var(--text-secondary); }
.diagram .ring-head.write line { stroke: var(--link); }
.diagram .ring-head.write text { fill: var(--link); font-weight: 600; }

.diagram .fill-card { fill: var(--bg-elevated); }
.diagram .fill-tile { fill: var(--tile); }
.diagram .fill-strong { fill: var(--tile-strong); }
.diagram .stroke-line { stroke: var(--hairline); }
.diagram .stroke-text { stroke: var(--text-secondary); }
.diagram .text-main { fill: var(--text); }
.diagram .text-dim { fill: var(--text-secondary); }
.diagram .text-faint { fill: var(--text-tertiary); }
.diagram .accent { fill: var(--link); }
.diagram .stroke-accent { stroke: var(--link); }
.diagram .take { fill: var(--doc-take); }
.diagram .rendered { fill: var(--doc-rendered); }
.diagram .label { font-size: 13px; }
.diagram .label-sm { font-size: 11px; }
.diagram .label-strong { font-size: 14px; font-weight: 600; }

/* Callouts */
.note,
.warn {
  margin: 24px 0 0;
  padding: 14px 18px 15px;
  border-radius: 12px;
  border-left: 3px solid var(--doc-note-edge);
  background: var(--doc-note);
  font-size: 16px;
  line-height: 1.47;
}

.warn {
  border-left-color: var(--doc-warn-edge);
  background: var(--doc-warn);
}

.note > :first-child,
.warn > :first-child {
  margin-top: 0;
}

.note-title {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

/* Numbered steps */
.steps {
  counter-reset: step;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

.steps > li {
  position: relative;
  counter-increment: step;
  min-height: 30px;
  padding-left: 46px;
}

.steps > li + li {
  margin-top: 18px;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tile-strong);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
}

.steps .docs-figure {
  margin-top: 16px;
}

/* Reference tables */
.table-wrap {
  margin: 20px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.docs-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.4;
}

.docs-article th,
.docs-article td {
  padding: 10px 14px 10px 0;
  border-bottom: 0.5px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.docs-article th {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.docs-article td:first-child {
  white-space: nowrap;
}

.docs-article td.wrap {
  white-space: normal;
}

.docs-article td .dim {
  color: var(--text-secondary);
}

/* Definition list for settings and terms */
.terms {
  display: grid;
  gap: 0;
  margin-top: 16px !important;
}

.terms > div {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--hairline);
}

.terms > div:first-child {
  border-top: 0.5px solid var(--hairline);
}

.terms dt {
  font-weight: 600;
}

.terms dd {
  margin: 4px 0 0;
  color: var(--text-secondary);
}

.terms dd p {
  margin: 6px 0 0;
}

.terms .default {
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 980px;
  background: var(--field);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: 0.12em;
}

/* Overview cards on the guide's start page */
.docs-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
}

@media (max-width: 640px) {
  .docs-cards {
    grid-template-columns: 1fr;
  }
}

.docs-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: var(--tile);
  color: var(--text);
  transition: background-color 0.2s;
}

.docs-card:hover {
  background: var(--tile-strong);
  text-decoration: none;
}

.docs-card .icon {
  font-size: 26px;
  margin-bottom: 6px;
}

.docs-card strong {
  font-size: 17px;
}

.docs-card span {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.4;
}

/* Previous and next page */
.docs-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--doc-text);
  margin-top: clamp(56px, 7vw, 80px);
  padding-top: 28px;
  border-top: 0.5px solid var(--hairline);
}

.docs-pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--tile);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.docs-pager a:hover {
  background: var(--tile-strong);
  text-decoration: none;
}

.docs-pager a span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
}

.docs-pager .next {
  grid-column: 2;
  text-align: right;
}

/* Phones and narrow windows: the contents fold into a disclosure above the page. */
@media (max-width: 900px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 16px 0 0;
  }

  .docs-sidebar summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--tile);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .docs-sidebar summary::-webkit-details-marker {
    display: none;
  }

  .docs-sidebar summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s var(--ease);
  }

  .docs-sidebar details[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .docs-toc {
    padding: 4px 6px 12px;
  }

  .docs-toc .docs-toc-title {
    display: none;
  }

  .docs-main {
    padding-top: 28px;
  }
}

@media (max-width: 480px) {
  .docs-pager {
    grid-template-columns: 1fr;
  }

  .docs-pager .next {
    grid-column: auto;
  }
}

/* Screenshots open at full size (docs.js). */
.docs-figure.zoom img {
  cursor: zoom-in;
}

.docs-zoom {
  max-width: 96vw;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: zoom-out;
}

.docs-zoom::backdrop {
  background: rgb(0 0 0 / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.docs-zoom img {
  display: block;
  width: auto;
  max-width: 96vw;
  max-height: 94vh;
  border-radius: 10px;
}

.docs-zoom button {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Numbered markers over a screenshot, explained in the list below it. */
.callouts {
  position: relative;
}

.callouts .mark {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 2px 8px rgb(0 0 0 / 0.35);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (max-width: 640px) {
  .callouts .mark {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

.callout-list {
  counter-reset: callout;
  list-style: none;
  padding: 0 !important;
}

.callout-list > li {
  position: relative;
  padding-left: 36px;
  counter-increment: callout;
}

.callout-list > li::before {
  content: counter(callout);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* The status pills from the product page, in the text column. */
.docs-article .status-row {
  margin: 18px 0 0;
}

.docs-article .status-row li + li {
  margin-top: 0;
}

/* Text beside a figure in a pair starts at the top. */
.docs-pair > div > :first-child,
.docs-pair > dl {
  margin-top: 0;
}

/* Comparison matrix (Als Preview and other tools): one column per tool, marks in the cells.
   Every column keeps its width, so more tools make the table wider, never narrower. Wider
   than its wrapper, the row headers and Als Preview stay in place and the other tools
   scroll sideways beneath them. */
.matrix-wrap {
  --matrix-head: 172px;
  --matrix-self: 196px;
  --matrix-col: 136px;
  --matrix-fade: 48px;
  overscroll-behavior-x: contain;
  /* The page's scroll as the table passes under the bar, for the header row below. */
  view-timeline: --matrix-page block;
  view-timeline-inset: var(--matrix-top, 52px) 0;
}

/* On a phone, one whole tool fits beside the pinned columns, and the fade stays off it. */
@media (max-width: 640px) {
  .matrix-wrap {
    --matrix-head: 100px;
    --matrix-self: 116px;
    --matrix-col: 112px;
    --matrix-fade: 24px;
  }
}

/* As wide as the big screenshots. */
.table-wrap.wide {
  width: min(920px, 100%);
}

@media (min-width: 1100px) {
  .table-wrap.wide {
    width: min(920px, calc(100vw - var(--doc-sidebar) - var(--doc-gap) - 2 * var(--gutter)));
  }
}

/* Separate borders: a pinned cell draws its own line, so the line stays with it. */
.docs-article .matrix {
  border-collapse: separate;
  border-spacing: 0;
}

.docs-article .matrix td {
  font-size: 13px;
  line-height: 1.35;
}

.docs-article .matrix th,
.docs-article .matrix td {
  width: var(--matrix-col);
  min-width: var(--matrix-col);
  padding: 9px 10px;
  text-align: center;
  vertical-align: middle;
}

.docs-article .matrix th:first-child,
.docs-article .matrix td:first-child {
  padding-left: 0;
  text-align: left;
  white-space: normal;
}

/* The pinned columns are opaque, so the scrolling ones pass beneath them. */
.docs-article .matrix thead th:first-child,
.docs-article .matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--matrix-head);
  min-width: var(--matrix-head);
  background: var(--bg);
}

.docs-article .matrix .self {
  position: sticky;
  left: var(--matrix-head);
  z-index: 1;
  width: var(--matrix-self);
  min-width: var(--matrix-self);
  background: var(--bg);
}

.docs-article .matrix thead th {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  vertical-align: bottom;
}

.docs-article .matrix thead th.self {
  color: var(--link);
}

/* The header row stays under the page's bar while the table goes by. The table scrolls
   sideways inside its wrapper, so position: sticky can only stick to the wrapper; instead
   the row moves down with the page, by the wrapper's view timeline where browsers have one
   and by docs.js elsewhere. docs.js sets --matrix-travel, the farthest it can move. Its
   cells are opaque and above the rows they pass over. */
.docs-article .matrix thead th {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.docs-article .matrix thead th:first-child,
.docs-article .matrix thead th.self {
  z-index: 3;
}

@keyframes matrix-head-down {
  to {
    transform: translateY(var(--matrix-travel, 0px));
  }
}

@supports (animation-timeline: view()) {
  .docs-article .matrix thead th {
    animation: matrix-head-down linear both;
    animation-timeline: --matrix-page;
    animation-range: exit-crossing 0% exit-crossing var(--matrix-travel, 0px);
  }
}

@supports not (animation-timeline: view()) {
  .docs-article .matrix thead th {
    transform: translateY(var(--matrix-head-y, 0px));
  }
}

.docs-article .matrix td.self {
  background: linear-gradient(var(--doc-note), var(--doc-note)) var(--bg);
}

.docs-article .matrix tbody tr.group td {
  width: auto;
  min-width: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

/* A group's name stays over the pinned columns. */
.docs-article .matrix tbody tr.group td > span {
  position: sticky;
  left: 0;
  z-index: 1;
  display: block;
  width: calc(var(--matrix-head) + var(--matrix-self));
  padding: 18px 10px 9px 0;
  background: var(--bg);
}

/* Set by docs.js: an edge where columns have gone beneath the pinned ones, a fade where
   more wait on the right. */
.matrix-wrap.is-scrolled .matrix .self,
.matrix-wrap.is-scrolled .matrix tr.group td > span {
  box-shadow: 0.5px 0 0 var(--hairline), 8px 0 10px -8px rgb(0 0 0 / 0.2);
}

.matrix-wrap.has-more {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--matrix-fade));
  mask-image: linear-gradient(to left, transparent, #000 var(--matrix-fade));
}

/* Arrows in the table's empty corner, added by docs.js; they page through the tools. */
.matrix-nav {
  display: flex;
  gap: 8px;
}

.matrix-nav[hidden] {
  display: none;
}

/* An arrow that can go somewhere is blue like the site's buttons; one at its end is grey. */
.matrix-nav button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}

/* Only after the first frame, so the arrows don't fade into their first state. */
.matrix-nav.ready button {
  transition: background-color 0.15s, color 0.15s;
}

.matrix-nav button:hover:not(:disabled) {
  background: var(--accent-hover);
}

.matrix-nav button:disabled {
  background: rgb(0 0 0 / 0.06);
  color: var(--text-tertiary);
  cursor: default;
}

.matrix-nav svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

@media (prefers-color-scheme: dark) {
  .matrix-nav button:disabled {
    background: rgb(255 255 255 / 0.1);
  }
}

.matrix-note {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.mark-yes,
.mark-part,
.mark-no {
  display: inline-block;
  min-width: 22px;
  font-weight: 600;
}

.mark-yes {
  color: #28a745;
}

.mark-part {
  color: #c98a00;
}

.mark-no {
  color: var(--text-tertiary);
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  .mark-yes { color: #30d158; }
  .mark-part { color: #ffd60a; }
}

.matrix sup {
  font-size: 10px;
  color: var(--text-secondary);
}

.sources {
  font-size: 14px;
  color: var(--text-secondary);
}

.sources li + li {
  margin-top: 4px;
}

.docs-article .matrix tbody th {
  padding: 9px 10px 9px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}