/* Documentation (templates/drobo/docs_v2.html). Loaded after css/drobo-ui.css and built from its pieces (.ui-card,
   .ui-section-head, .ui-stats, .ui-bento, .ui-todo-list, .ui-shortcuts, .ui-status); every colour and radius is one of
   its tokens, so light and dark follow the theme. The guides' patterns (numbered steps joined by a line, step rows,
   icon rows) are redrawn here under dx-.
   Type: card titles .9375rem, body .8125rem (paragraphs 1.55), captions .75rem, labels .6875rem, figures 1.85rem. */

/* ── Layout: "On this page" beside the content ──────────────────────────── */
.dx { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); align-items: start; gap: 1rem; min-width: 0; }
.dx-aside { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; scrollbar-width: thin; border-radius: var(--ui-radius); }
.dx-body { display: grid; gap: 1rem; min-width: 0; }
.dx-section { display: grid; gap: 1rem; min-width: 0; }
.dx [id] { scroll-margin-top: 4.5rem; }
.dx-section > .ui-bento, .dx-section > .ui-stats, .dx-section > .ui-shortcuts, .dx-section .ui-col > .dx-note { margin: 0; }
.dx-head { margin: .75rem 0 0; }
.dx-section:first-child > .dx-head { margin-top: 0; }
.dx-head .ui-btn { flex: 0 0 auto; }
.dx-pair > .ui-card { display: flex; flex-direction: column; }
.dx-pair.ui-bento--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Table of contents ──────────────────────────────────────────────────── */
.dx-toc { padding: 1rem 1rem 1.1rem; }
.dx-toc__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; list-style: none; cursor: default; }
.dx-toc__head::-webkit-details-marker { display: none; }
.dx-toc__head > span { display: grid; }
.dx-toc__head .ui-card__sub { margin-top: .1rem; font-size: .75rem; }
.dx-toc__chev { display: none; font-size: 1rem; color: var(--ui-faint); transition: transform .2s var(--ui-ease); }
.dx-toc[open] .dx-toc__chev { transform: rotate(180deg); }
.dx-toc__nav { margin-top: .5rem; }
.dx-toc__group { margin: .9rem 0 .3rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-faint); }
.dx-toc__grp:first-child .dx-toc__group { margin-top: .4rem; }
.dx-toc ul { display: grid; gap: 1px; margin: 0 -.45rem; padding: 0; list-style: none; }
body.ui-app .dx-toc a {
  position: relative; display: block; padding: .3rem .5rem .3rem .6rem; font-size: .8125rem; line-height: 1.4; color: var(--ui-muted);
  text-decoration: none; border-radius: 7px; transition: background .15s, color .15s;
}
body.ui-app .dx-toc a:hover { color: var(--ui-fg); background: var(--ui-hover); }
body.ui-app .dx-toc a.is-active { font-weight: 600; color: var(--ui-fg); background: var(--ui-hover); }
.dx-toc a.is-active::before { content: ""; position: absolute; top: .4rem; bottom: .4rem; left: 0; width: 2px; background: var(--ui-primary); border-radius: 2px; }

/* ── Text ───────────────────────────────────────────────────────────────── */
.dx-text { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-fg-2); overflow-wrap: anywhere; }
.dx-text + .dx-text { margin-top: .6rem; }
.dx-text b, .dx-list b { font-weight: 600; color: var(--ui-fg); }
.dx-label { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-faint); }
.dx-label + .dx-text { margin-bottom: .75rem; }
.dx-foot { margin: 1rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--ui-muted); }
body.ui-app .dx small a, body.ui-app .dx-foot a { font-weight: 600; color: var(--ui-primary); text-decoration: none; }
body.ui-app .dx small a:hover { text-decoration: underline; }
body.ui-app .dx-text .ui-link, body.ui-app .dx-rows-steps .ui-link { display: inline; }
.dx small b { font-weight: 600; color: var(--ui-fg-2); }
.dx-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.dx-list li, .dx-rows-steps__body ul li { position: relative; min-width: 0; padding-left: .9rem; font-size: .8125rem; line-height: 1.55; color: var(--ui-fg-2); overflow-wrap: anywhere; }
.dx-list li::before, .dx-rows-steps__body ul li::before { content: ""; position: absolute; top: .55rem; left: 0; width: .3rem; height: .3rem; background: var(--ui-primary); border-radius: 50%; }
.dx-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem 1.75rem; min-width: 0; }
.dx-split > * { min-width: 0; }

/* Callouts: a tone chip beside one short message (amber warns, blue tips, green good) */
.dx-note {
  display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .85rem; font-size: .8125rem; line-height: 1.55; color: var(--ui-fg-2);
  background: color-mix(in srgb, var(--tone, var(--ui-primary)) 6%, var(--ui-card)); border: 1px solid color-mix(in srgb, var(--tone, var(--ui-primary)) 24%, var(--ui-border));
  border-radius: var(--ui-radius-md);
}
.dx-note > div { min-width: 0; padding-top: .2rem; overflow-wrap: anywhere; }
.dx-note strong { font-weight: 600; color: var(--ui-fg); }
.ui-card .dx-note { margin-top: 1rem; }
.ui-card > .ui-card__head + .dx-note { margin-top: 0; }

/* ── What DroboAI does: four tiles ──────────────────────────────────────── */
.dx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.dx-tiles li { display: grid; align-content: start; gap: .2rem; min-width: 0; padding: .85rem .9rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.dx-tiles .ui-stat__icon { margin-bottom: .45rem; }
.dx-tiles strong, .dx-phases strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.dx-tiles small, .dx-phases small { font-size: .75rem; line-height: 1.45; color: var(--ui-muted); overflow-wrap: anywhere; }
.dx-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.dx-phases li { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; padding: .8rem .9rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.dx-phases li > div { display: grid; gap: .1rem; min-width: 0; line-height: 1.35; }

/* ── Tables: edge to edge in their card, hairlines, scroll inside the card when narrow ── */
.dx-table-wrap { margin: 0 -1.25rem; overflow-x: auto; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); scrollbar-width: thin; }
.dx-table-wrap:focus-visible { outline-offset: -2px; }
.dx-table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.45; color: var(--ui-fg-2); font-variant-numeric: tabular-nums; }
.dx-table thead th {
  padding: .55rem 1.25rem; font-size: .75rem; font-weight: 600; color: var(--ui-muted); text-align: left; white-space: nowrap;
  background: var(--ui-subtle); border-bottom: 1px solid var(--ui-border);
}
.dx-table thead th .ti { margin-right: .35rem; font-size: .9375rem; vertical-align: -2px; color: var(--ui-faint); }
.dx-table td, .dx-table tbody th { padding: .6rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.dx-table tbody tr:last-child > * { border-bottom: 0; }
.dx-table tbody th { font-weight: 600; color: var(--ui-fg); white-space: nowrap; }
.dx-table b { font-weight: 600; color: var(--ui-fg); }
.dx-table .is-num { text-align: right; white-space: nowrap; }
.dx-table td.is-num:first-child { width: 4rem; text-align: left; color: var(--ui-muted); }
.dx-table tbody tr { transition: background .15s; }
.dx-table tbody tr:hover { background: var(--ui-hover); }
.dx-table--compare { min-width: 36rem; }
.dx-table--compare tbody th { width: 11rem; }
.dx-table--compare td { width: 40%; }
.dx-table .ui-status { vertical-align: middle; }
.dx-table--stages td, .dx-table--stages th { padding-left: 1rem; padding-right: 1rem; }
.dx-table--stages td:first-child, .dx-table--stages th:first-child { padding-left: 1.25rem; white-space: nowrap; }
.dx-table--stages td:last-child, .dx-table--stages th:last-child { padding-right: 1.25rem; }

/* ── Numbered steps, joined by a line (the guides') ─────────────────────── */
.dx-steps { position: relative; display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.dx-steps::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: .95rem; width: 2px;
  background: linear-gradient(var(--ui-primary), var(--ui-violet)); border-radius: 2px; opacity: .35; }
.dx-steps li { position: relative; display: flex; align-items: flex-start; gap: .9rem; min-width: 0; }
.dx-steps__n, .dx-rows-steps__n {
  position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; font-size: .8125rem; font-weight: 700;
  color: var(--ui-primary); background: var(--ui-card); border: 1px solid color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)); border-radius: 50%;
}
.dx-steps__n { box-shadow: 0 0 0 4px var(--ui-card); }
.dx-steps li > div { display: grid; gap: .15rem; min-width: 0; padding-top: .2rem; }
.dx-steps strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.dx-steps small { font-size: .75rem; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
/* Setup order: eight steps in two columns (down, then across); no joining line */
.dx-steps--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 1.1rem 1.75rem; }
.dx-steps--cols::before { display: none; }

/* ── Step rows (the setup guide's): number, what to do, one action; hairlines edge to edge ── */
.dx-flush { padding-bottom: 0; }
.dx-rows-steps { display: grid; margin: 0 -1.25rem; padding: 0; list-style: none; border-top: 1px solid var(--ui-border); }
.dx-rows-steps > li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: start; gap: 1rem; padding: 1.1rem 1.25rem 1.25rem; }
.dx-rows-steps > li + li { border-top: 1px solid var(--ui-border); }
.dx-rows-steps__body { display: grid; gap: .5rem; min-width: 0; padding-top: .2rem; }
.dx-rows-steps__body h4 { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.5rem; color: var(--ui-fg); }
.dx-rows-steps__body > p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--ui-fg-2); overflow-wrap: anywhere; }
.dx-rows-steps__body ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.dx-rows-steps__body b { font-weight: 600; color: var(--ui-fg); }
.dx-rows-steps__body > .dx-note { margin-top: .25rem; }
.dx-rows-steps__go { margin-top: .05rem; }

/* ── Icon rows (the listings guide's): a tone chip, the name, one line; hairlines between ── */
.dx-rows { display: grid; align-content: start; margin: 0; padding: 0; list-style: none; }
.dx-rows li { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; padding: .7rem 0; }
.dx-rows li + li { border-top: 1px solid var(--ui-border); }
.dx-rows li:first-child { padding-top: 0; }
.dx-rows li:last-child { padding-bottom: 0; }
.dx-rows li > div { display: grid; gap: .1rem; min-width: 0; padding-top: .1rem; line-height: 1.35; }
.dx-rows strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.dx-rows small { font-size: .75rem; line-height: 1.5; color: var(--ui-muted); overflow-wrap: anywhere; }
.dx-rows--tight li { padding: .5rem 0; }
.dx-rows--tight li > div { padding-top: 0; }

/* Health check rows that wrap their text */
.dx .ui-todo-list li { align-items: flex-start; }
.dx .ui-todo-list li > .ui-btn { align-self: center; }
.dx .ui-todo-list small { line-height: 1.45; overflow-wrap: anywhere; }
.dx-mean { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 1rem; }

/* Setting chips under a table */
.dx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.dx-chips li {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 1.85rem; padding: 0 .65rem; font-size: .75rem; color: var(--ui-fg-2);
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
}
.dx-chips .ti { font-size: .9375rem; color: var(--ui-faint); }
.dx .ui-status .ti { font-size: .8125rem; }

/* ── Worked example: a sum, line by line ────────────────────────────────── */
.dx-calc { display: grid; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.dx-calc li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem 0; font-size: .8125rem; border-bottom: 1px solid var(--ui-border); }
.dx-calc li:first-child { padding-top: 0; }
.dx-calc span { min-width: 0; color: var(--ui-fg-2); }
.dx-calc b { flex: 0 0 auto; font-weight: 600; color: var(--ui-fg); }
.dx-calc .is-total { border-bottom: 0; }
.dx-calc .is-total span { font-weight: 600; color: var(--ui-fg); }
.dx-calc .is-total b { font-size: .9375rem; color: var(--ui-primary); }
/* Pricing: one block per plan, tinted by plan, its header naming it; the cards inside sit on the tint so the two
   plans read as two separate groups. */
.dx-plan { --plan: var(--ui-primary); display: grid; gap: 1rem; min-width: 0; padding: 1rem; border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--plan) 6%, var(--ui-subtle)); border: 1px solid color-mix(in srgb, var(--plan) 22%, var(--ui-border)); }
.dx-plan--software { --plan: var(--ui-violet); }
.dx-plan__head { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: .15rem .25rem 0; }
.dx-plan__head > div { flex: 1 1 auto; min-width: 0; }
.dx-plan__head h3 { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; color: var(--ui-fg); }
.dx-plan__head p { margin: .1rem 0 0; font-size: .8125rem; color: var(--ui-muted); }
.dx-plan__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; font-size: 1.25rem; color: var(--plan);
  background: var(--ui-card); border: 1px solid color-mix(in srgb, var(--plan) 30%, var(--ui-border)); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); }
.dx-plan__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dx-plan__cards > .ui-card { display: flex; flex-direction: column; }
.dx-plan .dx-calc .is-total b { color: var(--plan); }
/* The worked example as one line of steps, left to right */
.dx-calc--flow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.dx-calc--flow li { position: relative; display: grid; align-content: start; justify-content: stretch; gap: .25rem; padding: .7rem .75rem; font-size: .75rem;
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.dx-calc--flow li:first-child { padding-top: .7rem; }
.dx-calc--flow li b { font-size: .9375rem; }
.dx-calc--flow .is-total { border: 1px solid color-mix(in srgb, var(--plan, var(--ui-primary)) 40%, var(--ui-border)); background: color-mix(in srgb, var(--plan, var(--ui-primary)) 8%, var(--ui-card)); }
@media (max-width: 1180px) { .dx-calc--flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dx-plan__cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .dx-plan { padding: .75rem; } .dx-calc--flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-plan__head .ui-status { display: none; } }
.dx-calc-note { display: grid; align-content: start; gap: .6rem; }
.dx-calc-note .dx-text + .dx-text { margin: 0; }
.dx-calc-note .dx-note { margin-top: .15rem; }

/* ── Customer message ───────────────────────────────────────────────────── */
.dx-quote {
  margin: 0; padding: .85rem 1rem; font-size: .8125rem; line-height: 1.55; color: var(--ui-fg-2); background: var(--ui-subtle);
  border: 1px solid var(--ui-border); border-left: 2px solid var(--ui-primary); border-radius: var(--ui-radius-md);
}

/* ── Discord ────────────────────────────────────────────────────────────── */
.dx-discord.ui-beam { overflow: visible; }
.dx-discord__top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.1rem; }
.dx-discord__icon { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; border-radius: var(--ui-radius); }
.dx-discord__copy { display: grid; flex: 1 1 20rem; gap: .4rem; min-width: 0; }
.dx-discord__kicker { margin: 0; }
.dx-discord__copy .dx-text { max-width: 62ch; }
.dx-discord__go { flex: 0 0 auto; }
.dx-discord__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.dx-discord__list li { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; padding: .75rem .85rem; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.dx-discord__list .ti { flex: 0 0 auto; margin-top: .05rem; font-size: 1.05rem; color: var(--ui-violet); }
.dx-discord__list span { display: grid; gap: .05rem; min-width: 0; line-height: 1.35; }
.dx-discord__list strong { font-size: .8125rem; font-weight: 600; color: var(--ui-fg); }
.dx-discord__list small { font-size: .75rem; color: var(--ui-muted); }
.dx-discord-end, .dx-site, .dx-discount { margin: 0; }
.dx-discount .ui-card__sub b { font-weight: 600; color: var(--ui-fg); }
.dx-discord-end .ui-card__sub { line-height: 1.5; }

/* Link tiles: as many across as fit */
.dx-shortcuts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.dx-shortcuts small { white-space: normal; }

/* ── Narrow: the table of contents folds into a card on top ─────────────── */
@media (max-width: 1180px) {
  .dx { grid-template-columns: minmax(0, 1fr); }
  .dx-aside { position: static; max-height: none; overflow: visible; }
  .dx-toc__head { cursor: pointer; }
  .dx-toc__chev { display: block; }
  .dx-toc__nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0 1.25rem; }
  .dx-toc__grp .dx-toc__group, .dx-toc__grp:first-child .dx-toc__group { margin-top: .75rem; }
}
@media (max-width: 900px) {
  .dx-pair.ui-bento--even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dx-steps--cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .dx-rows-steps > li { grid-template-columns: 1.9rem minmax(0, 1fr); gap: .85rem; padding: 1rem 1.25rem 1.15rem; }
  .dx-rows-steps__go { grid-column: 2; justify-self: start; }
  .dx .ui-card__head { flex-wrap: wrap; }
  .dx-table--stages thead th, .dx-table--stages thead th.is-num { white-space: normal; vertical-align: bottom; }
  .dx-table--stages td, .dx-table--stages th { padding-left: .75rem; padding-right: .75rem; }
  .dx-tiles li { grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; }
  .dx-tiles .ui-stat__icon { grid-row: span 2; margin: 0; }
  .dx-discord__go, .dx-discord-end .ui-btn { width: 100%; }
}

/* ── Readability (2026-09-27, owner: "cramped and hard to read"): a roomier page and a clear "On this page" rail ── */
@media (min-width: 1181px) { .dx { grid-template-columns: 16rem minmax(0, 1fr); gap: 2.25rem; } }
.dx-body { gap: 3rem; }
.dx-section { gap: 1.25rem; }
.dx .ui-section-head.dx-head { margin: 0 0 .25rem; }
.dx .dx-head h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.dx .dx-head p { margin-top: .4rem; font-size: .9375rem; }
.dx .ui-card__head { margin-bottom: 1.1rem; }
.dx .ui-card__title { font-size: 1rem; }
.dx .ui-card__sub { font-size: .875rem; }
.dx-text { max-width: 72ch; font-size: .9375rem; line-height: 1.7; }
.dx-text + .dx-text { margin-top: .8rem; }
.dx-list li, .dx-rows-steps__body ul li { font-size: .875rem; line-height: 1.65; }
.dx-rows-steps__body > p { font-size: .875rem; line-height: 1.65; }
.dx-rows li { gap: .9rem; padding: .85rem 0; }
.dx-rows strong, .dx-steps strong, .dx-discord__list strong { font-size: .875rem; }
.dx-rows small, .dx-steps small, .dx-discord__list small { font-size: .8125rem; line-height: 1.6; }
.dx-steps { gap: 1.35rem; }
.dx-table { font-size: .875rem; }
.dx-table td, .dx-table tbody th { padding-top: .75rem; padding-bottom: .75rem; }
.dx-foot { font-size: .8125rem; line-height: 1.6; }
.dx-quote { font-size: .875rem; line-height: 1.65; }
.dx-calc--flow li { font-size: .8125rem; }
.dx-calc--flow li b { font-size: 1rem; }
/* A plan's two cards stack until both have room for their tables (no sideways scroll) */
@media (max-width: 1360px) { .dx-plan__cards { grid-template-columns: minmax(0, 1fr); } }

/* "On this page": a plain rail beside the content, not a card. It never fades in (the fade made its height jump and a
   scrollbar flash on load); a list taller than the window scrolls with the wheel, without a visible bar. */
@media (min-width: 1181px) {
  .dx-aside { top: 5rem; max-height: calc(100vh - 6rem); overscroll-behavior: contain; scrollbar-width: none; }
  .dx-aside::-webkit-scrollbar { display: none; }
  .dx-toc.ui-card { padding: .25rem 0 1rem; background: none; border: 0; box-shadow: none; }
  .ui-js .dx-toc.ui-fade, .ui-js .dx-toc.ui-fade.is-in { opacity: 1; filter: none; transform: none; animation: none; transition: none; }
  .dx-toc__head { padding: 0 .75rem; }
  .dx-toc__head .ui-card__title { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
  .dx-toc__head .ui-card__sub { display: none; }
  .dx-toc__nav { margin-top: .35rem; }
  .dx-toc ul { gap: 2px; margin: 0; }
  body.ui-app .dx-toc a { padding: .45rem .75rem; font-size: .875rem; line-height: 1.45; color: var(--ui-fg-2); border-radius: var(--ui-radius-control); }
  body.ui-app .dx-toc a:hover { color: var(--ui-fg); background: var(--ui-hover); }
  body.ui-app .dx-toc a.is-active { color: var(--ui-primary); background: var(--ui-primary-soft); }
  .dx-toc a.is-active::before { top: .55rem; bottom: .55rem; }
  .dx-toc__group { margin: 1.35rem .75rem .35rem; font-size: .6875rem; }
  .dx-toc__grp:first-child .dx-toc__group { margin-top: .9rem; }
}
@media (min-width: 1181px) and (max-height: 860px) {
  body.ui-app .dx-toc a { padding-top: .32rem; padding-bottom: .32rem; }
  .dx-toc__group { margin-top: 1rem; }
}
/* The plan tables fit their card with any font (the fallback font is wider while the page font loads): headings wrap. */
.dx-plan .dx-table thead th, .dx-plan .dx-table thead th.is-num { white-space: normal; vertical-align: bottom; }
.dx-plan .dx-table--stages td, .dx-plan .dx-table--stages th { padding-left: 1rem; padding-right: 1rem; }
.dx-plan .dx-table--stages td:first-child, .dx-plan .dx-table--stages th:first-child { padding-left: 1.25rem; }
.dx-plan .dx-table--stages td:last-child, .dx-plan .dx-table--stages th:last-child { padding-right: 1.25rem; }
.dx-tiles strong { font-size: .875rem; }
.dx-tiles small { font-size: .8125rem; line-height: 1.55; }

/* ── Docs type scale (owner: "everything looks small esp content in the docs"). The app's UI runs at 12-13px; the docs
   are for reading, so they run larger: body 16px, secondary 14px, tables and the rail 15px. ── */
.dx-text { font-size: 1rem; line-height: 1.7; }
.dx .dx-head h2 { font-size: 1.625rem; }
.dx .dx-head p { font-size: 1rem; }
.dx .ui-card__title { font-size: 1.0625rem; }
.dx .ui-card__sub { font-size: .9375rem; }
.dx-list li, .dx-rows-steps__body ul li, .dx-rows-steps__body > p, .dx-quote { font-size: .9375rem; }
.dx-rows strong, .dx-steps strong, .dx-discord__list strong, .dx-tiles strong, .dx-phases strong { font-size: .9375rem; }
.dx-rows small, .dx-steps small, .dx-discord__list small, .dx-tiles small, .dx-phases small, .dx-foot { font-size: .875rem; line-height: 1.6; }
.dx-table { font-size: .9375rem; }
.dx-table thead th { font-size: .8125rem; }
.dx-calc li, .dx-calc--flow li { font-size: .875rem; }
.dx-calc--flow li b { font-size: 1.0625rem; }
.dx .ui-status { font-size: .8125rem; }
.dx-plan__head h3 { font-size: 1.1875rem; }
.dx-plan__head p { font-size: .9375rem; }
@media (min-width: 1181px) {
  body.ui-app .dx-toc a { font-size: .9375rem; }
  .dx-toc__group { font-size: .75rem; }
  .dx { grid-template-columns: 17rem minmax(0, 1fr); }
}
.dx small { font-size: .875rem; line-height: 1.55; }
.dx .ui-todo-list strong, .dx .ui-shortcuts strong { font-size: .9375rem; }
.dx-chips li { font-size: .875rem; }
.dx-label { font-size: .75rem; }

/* "On this page" as a docs rail (owner: the big list "feels ugly"): a small quiet header, one thin line down the left,
   the current section marked by a short blue stretch of that line and bright text (no filled pill), the rest muted and
   close together. */
@media (min-width: 1181px) {
  .dx-toc__head { padding: 0 0 0 .1rem; }
  .dx .dx-toc__head .ui-card__title { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ui-fg); }
  .dx-toc__nav { margin-top: .6rem; }
  .dx-toc__grp { position: relative; margin: 0; padding-left: .1rem; }
  .dx-toc__group, .dx-toc__grp:first-child .dx-toc__group { margin: 1.1rem 0 .35rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: var(--ui-faint); }
  .dx-toc__grp:first-child .dx-toc__group { margin-top: .35rem; }
  .dx-toc ul { gap: 0; margin: 0; border-left: 1px solid var(--ui-border); }
  body.ui-app .dx-toc a { margin-left: -1px; padding: .34rem .85rem; font-size: .875rem; line-height: 1.45; color: var(--ui-muted); background: none;
    border-left: 2px solid transparent; border-radius: 0; transition: color .15s, border-color .15s; }
  body.ui-app .dx-toc a:hover { color: var(--ui-fg); background: none; border-left-color: var(--ui-border-strong); }
  body.ui-app .dx-toc a.is-active { font-weight: 550; color: var(--ui-fg); background: none; border-left-color: var(--ui-primary); }
  .dx-toc a.is-active::before { display: none; }
}
@media (min-width: 1181px) and (max-height: 860px) {
  body.ui-app .dx-toc a { padding-top: .26rem; padding-bottom: .26rem; }
  .dx-toc__group { margin-top: .75rem; }
}