/* ==========================================================================
   Documentation screen (/docs): reader layout, typography, callouts, diagrams, print.
   Uses the design tokens of app.css only.
   ========================================================================== */

/* The article renders its own title (AppBar still feeds the top bar and breadcrumb) */
.page-header.docs-ph {
  display: none;
}
.body.docs-body {
  padding-top: 16px;
}
.docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.docs-main {
  min-width: 0;
}

/* ---------- Table of contents ---------- */
.docs-aside {
  display: none;
}
.docs-aside-in {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 4px 16px 0;
}
.docs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  padding: 2px;
}
.docs-brand-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.docs-brand b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
}
.docs-brand small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.docs-search {
  height: 40px;
}
.docs-search input::-webkit-search-cancel-button {
  display: none;
}
.docs-toc {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.docs-role {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.docs-role .input {
  height: 38px;
}
.docs-toc-part {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.docs-toc-ph {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 0 10px 2px;
}
.docs-toc-g {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 10px 3px;
}
.docs-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.38;
}
.docs-toc a:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.docs-toc a.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow:
    inset 3px 0 0 var(--brand),
    var(--shadow-sm);
}
.docs-toc-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 10px;
}
.docs-print-all {
  justify-content: flex-start;
  margin-top: 6px;
}
/* "In toàn bộ tài liệu" stays pinned to the bottom of the scrolling TOC, so it is always visible (never left below the
   fold or behind the tab bar) and the TOC entries scroll underneath it */
.docs-print-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 10px 0 2px;
  background: linear-gradient(to bottom, transparent, var(--bg) 12px);
}
.docs-print-foot .docs-print-all {
  width: 100%;
  margin-top: 0;
}

/* Phone: sticky bar with "Mục lục" + search; the TOC opens in a bottom sheet */
.docs-mbar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--safe-t));
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: -6px -16px 14px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.docs-toc-btn {
  flex-shrink: 0;
  padding: 0 12px;
}
.docs-mbar .search {
  flex: 1;
  min-width: 0;
}
.sheet-b .docs-toc a.active {
  background: var(--surface-2);
}

@media (min-width: 640px) {
  .docs-mbar {
    margin: -6px -24px 16px;
    padding: 8px 24px;
  }
}
@media (min-width: 760px) {
  .docs {
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 28px;
  }
  .docs-aside {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-t) + 14px);
    /* Below 1024 px the bottom tab bar (and the browser's toolbar) covers the end of the viewport. 100svh = viewport with
       the browser toolbars shown (100dvh can be taller than what is visible on iPad Safari); vh is the fallback. */
    max-height: calc(100vh - var(--topbar-h) - var(--safe-t) - 28px - var(--tabbar-h) - var(--bar-pad-b) - var(--vv-bottom));
    max-height: calc(100svh - var(--topbar-h) - var(--safe-t) - 28px - var(--tabbar-h) - var(--bar-pad-b) - var(--vv-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scroll-padding-bottom: 56px;
  }
  body.no-tabbar .docs-aside {
    max-height: calc(100vh - var(--topbar-h) - var(--safe-t) - 28px - var(--bar-pad-b) - var(--vv-bottom));
    max-height: calc(100svh - var(--topbar-h) - var(--safe-t) - 28px - var(--bar-pad-b) - var(--vv-bottom));
  }
  /* The sticky print button is the last row; no extra space under it */
  .docs-aside-in {
    padding-bottom: 0;
  }
  .docs-mbar {
    display: none;
  }
}
@media (min-width: 1024px) {
  .docs-aside,
  body.no-tabbar .docs-aside {
    max-height: calc(100vh - var(--topbar-h) - var(--safe-t) - 28px);
    max-height: calc(100svh - var(--topbar-h) - var(--safe-t) - 28px);
  }
}
@media (min-width: 1280px) {
  .docs {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 44px;
  }
  .docs-article,
  .docs-results,
  .docs-home {
    max-width: 900px;
  }
}

/* ---------- Article ---------- */
.docs-article {
  min-width: 0;
}
.docs-head {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.docs-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.docs-crumb a {
  color: var(--muted);
}
.docs-crumb a:hover {
  color: var(--ink);
}
.docs-crumb .icon {
  width: 13px;
  height: 13px;
}
.docs-head h1 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 6px;
}
.docs-lead {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.docs-meta .eyebrow {
  margin-right: 2px;
}
.docs-print {
  margin-left: auto;
}
.doc-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.doc-role::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.doc-role.all::before {
  background: var(--ok);
}
.doc-role.me {
  background: var(--info-soft);
  color: var(--ink);
}
.doc-role.me::before {
  background: var(--info);
}
.docs-onpage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.docs-onpage .eyebrow {
  margin-right: 2px;
}
.docs-onpage button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 99px;
  padding: 3px 11px;
  font-size: 12.5px;
  cursor: pointer;
}
.docs-onpage button:hover {
  border-color: var(--line-2);
  color: var(--ink);
}
@media (min-width: 1024px) {
  .docs-head h1 {
    font-size: 28px;
  }
  .docs-lead {
    font-size: 16.5px;
  }
}

/* ---------- Reading typography ---------- */
.docs-content {
  font-size: 15px;
  line-height: 1.68;
  color: var(--text-2);
}
.docs-content > * + * {
  margin-top: 14px;
}
.docs-content h3 {
  font-size: 18.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 30px;
  scroll-margin-top: calc(var(--topbar-h) + var(--safe-t) + 72px);
}
.docs-content h3 + * {
  margin-top: 10px;
}
.docs-content b,
.docs-content strong {
  color: var(--ink);
  font-weight: 600;
}
.docs-content ul,
.docs-content ol:not(.doc-steps) {
  padding-left: 22px;
  margin-bottom: 0;
}
.docs-content li + li {
  margin-top: 6px;
}
.docs-content li::marker {
  color: var(--muted);
}
.docs-content code {
  font-family: var(--f-mono);
  font-size: 0.86em;
  background: var(--surface-3);
  color: var(--ink);
  padding: 1px 5px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.doc-link {
  color: var(--info);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.doc-ui {
  font-weight: 600;
  color: var(--ink);
}
.docs-content mark,
.docs-results mark {
  background: var(--warn-soft);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 1px;
}
.docs-content mark.doc-hit {
  box-shadow: 0 0 0 1px var(--warn);
}
.docs-content .st + .st {
  margin-left: 4px;
}
.doc-formula {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  text-align: center;
}

/* Numbered steps with a connecting line */
.doc-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.docs-content .doc-steps > li {
  margin: 0;
}
.doc-steps > li {
  counter-increment: step;
  position: relative;
  padding: 2px 0 0 42px;
  min-height: 28px;
}
.doc-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.doc-steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: -10px;
  width: 1px;
  background: var(--line-2);
}

/* Callouts */
.doc-callout {
  --c: var(--info);
  --soft: var(--info-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c);
  background: var(--soft);
  border-radius: var(--r);
  padding: 12px 14px;
}
.doc-callout.tip {
  --c: var(--ok);
  --soft: var(--ok-soft);
}
.doc-callout.warn {
  --c: var(--warn);
  --soft: var(--warn-soft);
}
.doc-callout-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 3px;
}
.doc-callout-b {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}

/* Tables */
.doc-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.doc-table table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.doc-table th {
  text-align: left;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.doc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.doc-table tr:last-child td {
  border-bottom: 0;
}
.doc-table td .st,
.doc-table td .cls {
  white-space: nowrap;
}

/* Glossary */
.doc-glossary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.doc-glossary dt {
  font-weight: 700;
  color: var(--ink);
  padding: 10px 14px 0;
}
.doc-glossary dd {
  margin: 0;
  padding: 2px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.doc-glossary dd:last-of-type {
  border-bottom: 0;
}
@media (min-width: 640px) {
  .doc-glossary {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .doc-glossary dt,
  .doc-glossary dd {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  .doc-glossary dt {
    background: var(--surface-2);
  }
  .doc-glossary dt:last-of-type,
  .doc-glossary dd:last-of-type {
    border-bottom: 0;
  }
}

/* Feature cards */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.doc-card b {
  font-size: 14.5px;
  line-height: 1.35;
}
.doc-card b a {
  color: var(--ink);
}
.doc-card b a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-card span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Asset code anatomy */
.doc-code {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 12px 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.doc-code span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
}
.doc-code b {
  font-family: var(--f-mono);
  font-size: 21px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--info-soft);
}
.doc-code span:nth-of-type(2) b {
  background: var(--ok-soft);
}
.doc-code span:nth-of-type(3) b {
  background: var(--warn-soft);
}
.doc-code span:nth-of-type(4) b {
  background: var(--brand-soft);
}
.doc-code small {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
}
.doc-code i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 21px;
  color: var(--muted);
  padding-top: 6px;
}

/* Links to real screens */
.doc-screen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92em;
  line-height: 1.7;
  vertical-align: baseline;
}
.doc-screen::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex-shrink: 0;
}
a.doc-screen:hover {
  background: var(--surface-3);
}
.doc-screen.locked {
  color: var(--muted);
  border-style: dashed;
  background: transparent;
  cursor: not-allowed;
}
.doc-screen.locked::after {
  display: none;
}
.docs-screens {
  margin-top: 30px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docs-screens-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.docs-screens-t .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.docs-screens-l {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.docs-screens-l .doc-screen {
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: var(--r);
}

/* Previous / next */
.docs-pn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.docs-pn-a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
}
.docs-pn-a:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
}
.docs-pn-a.next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}
.docs-pn-a small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.docs-pn-a small .icon {
  width: 14px;
  height: 14px;
}
.docs-pn-a b {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- Diagrams ---------- */
.doc-diagram {
  position: relative;
  margin: 18px 0 0;
  padding: 16px 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.dg-canvas {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.dg-canvas svg {
  display: block;
  margin: 0 auto;
}
.doc-diagram figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.dg-src {
  display: none;
}
/* While Mermaid loads / draws */
.doc-diagram:not(.dg-ready):not(.dg-failed) {
  min-height: 200px;
}
.doc-diagram:not(.dg-ready):not(.dg-failed)::before {
  content: 'Đang vẽ sơ đồ…';
  position: absolute;
  inset: 16px 12px 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  animation: docs-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes docs-pulse {
  to {
    opacity: 0.55;
  }
}
/* Fallback: Mermaid could not load – show the diagram source */
.doc-diagram.dg-failed::before {
  content: 'Không tải được sơ đồ – hiển thị dạng mô tả';
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warn);
}
.doc-diagram.dg-failed .dg-src {
  display: block;
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}
.dg-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.dg-zoom-btn:hover {
  color: var(--ink);
  border-color: var(--line-2);
}
.dg-zoom-btn .icon {
  width: 16px;
  height: 16px;
}
.dg-zoom-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.dg-zoom-pct {
  min-width: 46px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.dg-zoom-hint {
  margin-left: auto;
}
.dg-zoom {
  overflow: auto;
  overscroll-behavior: contain;
}
.dg-zoom svg {
  display: block;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

/* ---------- Search results ---------- */
.docs-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docs-results-h {
  font-size: 14px;
  color: var(--text-2);
  padding: 0 2px 2px;
}
.docs-result {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.docs-result:hover {
  border-color: var(--line-2);
}
.docs-result-t {
  font-size: 16px;
  color: var(--ink);
}
.docs-result p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---------- Home ---------- */
.docs-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.docs-hero {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.docs-hero h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 8px;
}
.docs-hero p {
  max-width: 660px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-2);
}
.docs-hero-a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.docs-new {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--info-soft);
  color: inherit;
}
.docs-new-ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--info);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.docs-new b {
  display: block;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}
.docs-new small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-2);
}
.docs-new .chev {
  color: var(--muted);
}
.docs-parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.docs-part {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.docs-part h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.docs-part header p {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--muted);
}
.docs-part-g {
  display: flex;
  flex-direction: column;
}
.docs-part-g .eyebrow {
  margin-bottom: 4px;
}
.docs-part-a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: inherit;
}
.docs-part-a:hover {
  background: var(--surface-2);
}
.docs-part-a b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.docs-part-a small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
@media (min-width: 1100px) {
  .docs-parts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .docs-hero {
    padding: 28px 28px 24px;
  }
  .docs-hero h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-diagram:not(.dg-ready):not(.dg-failed)::before {
    animation: none;
  }
}

/* ---------- Print ---------- */
@media print {
  .docs-aside,
  .docs-mbar,
  .docs-pn,
  .docs-screens,
  .docs-onpage,
  .docs-print,
  .dg-zoom-btn,
  .docs-new,
  .docs-hero-a {
    display: none !important;
  }
  .docs {
    display: block;
  }
  .docs-article,
  .docs-results,
  .docs-home {
    max-width: none;
  }
  .docs-body > *,
  .docs-body .docs {
    animation: none !important;
  }
  .docs-content {
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .docs-head h1 {
    font-size: 18pt;
  }
  .docs-sheet + .docs-sheet {
    break-before: page;
  }
  .doc-diagram,
  .doc-callout,
  .doc-code,
  .doc-card,
  .doc-steps > li,
  .doc-table tr {
    break-inside: avoid;
  }
  .docs-content h3 {
    break-after: avoid;
  }
  .doc-table {
    overflow: visible;
  }
  .doc-table table {
    min-width: 0;
  }
  .dg-canvas {
    overflow: visible;
  }
  .dg-canvas svg {
    max-width: 100% !important;
    height: auto !important;
  }
  .doc-link,
  a.doc-screen {
    color: inherit;
    text-decoration: none;
  }
}

/* Phone: keep the four code segments on one line */
@media (max-width: 480px) {
  .doc-code {
    gap: 3px;
    padding: 14px 6px 12px;
  }
  .doc-code span {
    min-width: 0;
    max-width: 74px;
  }
  .doc-code b {
    font-size: 16px;
    padding: 4px 7px;
  }
  .doc-code i {
    font-size: 16px;
    padding-top: 4px;
  }
}
.doc-card .doc-link {
  color: var(--ink);
  text-decoration: none;
}
@media print {
  /* The app grid keeps an empty sidebar column on wide pages; the document takes the whole sheet */
  body:has(.docs-body) .app {
    display: block !important;
  }
}
/* Caption sits above the drawing as its title, next to the zoom button (keeps the button off the drawing) */
.doc-diagram {
  display: flex;
  flex-direction: column;
}
.doc-diagram figcaption {
  order: -1;
  margin: -4px 40px 12px 2px;
  text-align: left;
  font-weight: 600;
  color: var(--text-2);
}