/* Content components (Task 7c). Callouts, tables, code and diagrams follow the Migration Tool's docs CSS
   (.imt-callout, .imt-table, .imt-diagram, .imt-copy); the rest matches that family. Markup: prototype/README.md. */
.ds-cx-label { margin: 28px 0 8px !important; font: 600 11px/1.3 var(--ds-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-tertiary); }
.ds-lead-sample { font-size: calc(var(--ds-text) * 16 / 14); line-height: 1.75; color: var(--ds-text-secondary); }
.ds-prose h4 { margin: 20px 0 6px; font: 600 15px/1.4 var(--ds-display); color: var(--ds-text-primary); }
.ds-prose code { padding: 1px 5px; border-radius: 4px; background: var(--ds-surface-deep); font: 0.9em var(--ds-mono); color: var(--ds-text-primary); }
.ds-prose pre code { padding: 0; background: none; font-size: 13px; }
.ds-prose a:not([class]) { color: var(--ds-brand-fg); }
kbd { display: inline-block; min-width: 20px; padding: 0 6px; border: 1px solid var(--ds-border-divider); border-bottom-width: 2px; border-radius: 5px; background: var(--ds-surface-raised); font: 12px/18px var(--ds-mono); text-align: center; color: var(--ds-text-primary); }
.ds-prose ul ul, .ds-prose ol ol, .ds-prose ul ol, .ds-prose ol ul { margin: 4px 0; }
.ds-substep { margin: 4px 0 4px 4px; padding-left: 12px; border-left: 2px solid var(--ds-border-divider); color: var(--ds-text-secondary); }
.ds-prose dt { font-weight: 600; color: var(--ds-text-primary); }
.ds-prose dd { margin: 2px 0 12px 16px; color: var(--ds-text-secondary); }
/* Callouts: one box per kind, as .imt-callout */
.ds-callout { max-width: var(--ds-measure); }
.ds-callout > :first-child { margin-top: 0; } .ds-callout > :last-child { margin-bottom: 0; }
.ds-callout.is-tip { background: var(--ds-success-subtle); border-color: var(--ds-success-subtle); }
.ds-callout-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px !important; font: 600 14px var(--ds-display); color: var(--ds-text-primary); }
.ds-callout-title svg { flex: none; width: 16px; height: 16px; color: var(--ds-brand-fg); }
.ds-callout.is-tip .ds-callout-title svg { color: var(--ds-success-fg); }
.ds-callout.is-warn .ds-callout-title svg { color: var(--ds-warning-fg); }
.ds-callout.is-danger .ds-callout-title svg { color: var(--ds-danger-fg); }
.ds-callout.is-warn { background: var(--ds-warning-subtle); border-color: var(--ds-warning-subtle); }
.ds-callout.is-danger { background: var(--ds-danger-subtle); border-color: var(--ds-danger-subtle); }
/* Code components: plain, titled, tabs, request and response, terminal, line numbers, diff. Mono from the Migration Tool. */
.ds-code { position: relative; margin: 12px 0 20px; }
.ds-code pre { margin: 0; font: 13px/1.6 var(--ds-mono); }
.ds-code[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 12px; z-index: 1; font: 600 11px var(--ds-font); letter-spacing: 0.04em; color: var(--ds-text-tertiary); transition: opacity var(--ds-dur-fast) var(--ds-ease); }
.ds-code .ds-code-title { margin: 0 !important; padding: 8px 12px; border: 1px solid var(--ds-border-subtle); border-bottom: 0; border-radius: var(--ds-r-input) var(--ds-r-input) 0 0; background: var(--ds-surface-deep); font: 500 12px var(--ds-mono); color: var(--ds-text-primary); overflow-wrap: anywhere; }
.ds-code-title + .ds-copy + pre { border-top-left-radius: 0; border-top-right-radius: 0; }
.ds-code:has(.ds-code-title)[data-lang]::before, .ds-code:has(.ds-code-title) .ds-tabs [role=tablist] { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--ds-border-divider); }
.ds-tabs [role=tab] { flex: none; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ds-text-secondary); font: 500 12px var(--ds-mono); cursor: pointer; transition: color 0.15s cubic-bezier(0, 0, 0.2, 1); }
.ds-tabs [role=tab]:hover { color: var(--ds-text-primary); }
.ds-tabs [role=tab][aria-selected=true] { border-bottom-color: var(--ds-brand); color: var(--ds-text-primary); }
.ds-tabs .ds-code { margin-top: 0; }
.ds-tabs .ds-code pre { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.ds-reqres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 20px; }
.ds-reqres .ds-code { margin: 0; }
@media (max-width: 760px) { .ds-reqres { grid-template-columns: minmax(0, 1fr); } }
.ds-code.is-terminal pre { background: light-dark(#1f2330, #181818); border-color: light-dark(#1f2330, #2b2b2b); color: #e6e6e6; }
.ds-code.is-terminal[data-lang]::before { color: #b0b0b0; }
.ds-prompt { display: block; }
.ds-prompt { color: #e6e6e6; padding-left: 2ch; text-indent: -2ch; }
.ds-prompt::before { content: "$ "; color: #6ee7a8; user-select: none; }
.ds-out { display: block; color: #c4c4c4; }
.ds-code pre code { display: block; counter-reset: ln; }
/* every line wraps with a 2ch hanging indent: the page scrolls, a code block never does */
.ds-ln { display: block; margin: 0 -12px; padding: 0 12px 0 calc(12px + 2ch); text-indent: -2ch; counter-increment: ln; position: relative; }
.ds-lines .ds-ln { padding-left: calc(44px + 2ch); }
.ds-lines .ds-ln::before { content: counter(ln); position: absolute; left: 0; width: 30px; text-indent: 0; text-align: right; color: var(--ds-text-tertiary); user-select: none; }
.ds-ln.is-hl { background: light-dark(#fff7d1, #2b2a1d); box-shadow: inset 2px 0 var(--ds-warning); }
/* Syntax colours: quiet, from VS Code Dark Modern in dark, a matching light set. */
.ds-prose pre { color: light-dark(#1f2328, #cccccc); }
.token.comment, .token.prolog { color: light-dark(#6a737d, #6a9955); font-style: italic; }
.token.keyword, .token.important, .token.delimiter, .token.liquid .token.keyword { color: light-dark(#7a3e9d, #c586c0); }
.token.string, .token.attr-value, .token.url { color: light-dark(#a3501a, #ce9178); }
.token.number, .token.boolean, .token.constant { color: light-dark(#116329, #b5cea8); }
.token.function, .token.class-name, .token.object { color: light-dark(#6f4e00, #dcdcaa); }
.token.property, .token.attr-name, .token.variable, .token.parameter { color: light-dark(#0b5394, #9cdcfe); }
.token.tag, .token.selector, .token.builtin { color: light-dark(#22863a, #4ec9b0); }
.token.punctuation, .token.operator { color: light-dark(#57606a, #a0a0a0); }
.token.inserted { display: inline-block; width: 100%; background: light-dark(#e6ffec, #1b3a26); color: light-dark(#0b4f20, #b5e8c1); }
.token.deleted { display: inline-block; width: 100%; background: light-dark(#ffebe9, #44201f); color: light-dark(#86061d, #f2b8b5); }
/* Tables: .imt-table-wrap */
.ds-table-wrap table { display: table; width: 100%; margin: 0; }
.ds-table-wrap th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
/* Images */
.ds-figure { max-width: 48rem; margin: 12px 0 24px; }
.ds-figure img { display: block; width: 100%; height: auto; border-radius: var(--ds-r-button); border: 1px solid var(--ds-border-subtle); }
.ds-figure figcaption, .ds-diagram figcaption { margin-top: 8px; font-size: 13px; color: var(--ds-text-tertiary); }
.ds-shot { padding: 0; border: 1px solid var(--ds-border-divider); border-radius: var(--ds-r-card); overflow: hidden; background: var(--ds-surface-subtle); box-shadow: 0 12px 30px -18px rgba(20, 28, 50, 0.35); }
.ds-shot img { border: 0; border-radius: 0; }
.ds-shot-bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--ds-border-subtle); }
.ds-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-border-divider); }
.ds-shot figcaption { margin: 0; padding: 8px 12px; }
/* Comparison */
.ds-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; max-width: var(--ds-measure); margin: 12px 0 20px; }
.ds-compare section { padding: 14px 16px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-button); background: var(--ds-surface-subtle); }
.ds-compare h4 { margin-top: 0 !important; }
.ds-compare ul { margin: 0; padding-left: 18px; }
/* Diagram: .imt-diagram */
.ds-diagram { margin: 20px 0 24px; }
.ds-diagram ol { list-style: none; margin: 0; padding: 0; max-width: 26rem; }
.ds-diagram li { position: relative; margin: 0 0 26px; padding: 10px 14px; border: 1.5px solid var(--ds-brand); border-radius: 6px; background: var(--ds-surface-raised); text-align: center; line-height: 1.4; overflow-wrap: anywhere; }
.ds-diagram li.is-end { background: var(--ds-brand-subtle); }
.ds-diagram li:last-child { margin-bottom: 0; }
.ds-diagram li:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; height: 26px; border-left: 1.5px solid var(--ds-border-default); transform: translateX(-50%); }
.ds-diagram li:not(:last-child)::before { content: ""; position: absolute; left: 50%; top: calc(100% + 18px); border: 5px solid transparent; border-top: 8px solid var(--ds-border-default); border-bottom: 0; transform: translateX(-50%); }
.ds-dg-title { display: block; font: 600 14px var(--ds-display); color: var(--ds-text-primary); }
.ds-dg-note { display: block; margin-top: 2px; font-size: 13px; color: var(--ds-text-secondary); }
/* Inline steps */
.ds-steps-inline { list-style: none; counter-reset: st; padding: 0; max-width: var(--ds-measure); }
.ds-steps-inline > li { position: relative; counter-increment: st; padding: 0 0 12px 44px; }
.ds-steps-inline > li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ds-brand-subtle); color: var(--ds-brand-fg); font: 600 13px var(--ds-display); }
.ds-steps-inline > li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 2px; border-left: 1px solid var(--ds-border-divider); }
.ds-steps-inline h4 { margin: 3px 0 4px !important; }
/* Next steps */
.ds-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.ds-next a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-card); color: var(--ds-text-primary); text-decoration: none; transition: transform var(--ds-dur-base) var(--ds-ease), border-color var(--ds-dur-base) var(--ds-ease); }
.ds-next a:hover { transform: translateY(-2px); border-color: var(--ds-brand-border); }
.ds-next b { display: block; font: 600 15px var(--ds-display); }
.ds-next span { display: block; margin-top: 2px; font-size: 13px; color: var(--ds-text-secondary); }
/* Disclosure */
.ds-details { max-width: var(--ds-measure); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-button); }
.ds-details summary { padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--ds-text-primary); }
.ds-details > :not(summary) { margin: 0; padding: 0 14px 12px; }
/* Badges and stamps */
.ds-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 11px/18px var(--ds-font); letter-spacing: 0.02em; }
.ds-badge.is-beta { background: var(--ds-info-subtle); color: var(--ds-info-fg); }
.ds-badge.is-planned, .ds-badge.is-coming-soon { background: var(--ds-surface-deep); color: var(--ds-text-secondary); }
.ds-badge.is-deprecated { background: var(--ds-danger-subtle); color: var(--ds-danger-fg); }
.ds-stamp { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ds-text-tertiary); }
.ds-stamp span + span::before { content: "·"; margin-right: 16px; }
.ds-prose hr { height: 1px; margin: 28px 0; border: 0; background: var(--ds-border-divider); }
.ds-home-foot { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--ds-border-subtle); font-size: 13px; }
.ds-home-foot a { color: var(--ds-text-secondary); }

/* No scrolling inside a component (Shane, 31 October 2026): code wraps, tables reflow, nothing holds overflow: auto. */
.ds-prose pre, .ds-code pre { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-table-wrap { margin: 12px 0 20px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-button); }
.ds-prose table, .ds-table-wrap table { display: table; width: 100%; max-width: 100%; overflow: visible; table-layout: auto; }
.ds-prose td { overflow-wrap: anywhere; }
.ds-prose th { white-space: nowrap; word-break: normal; overflow-wrap: normal; min-width: 6em; }
.ds-table-wrap th { position: sticky; top: var(--ds-topbar-h); z-index: 1; }
@media (max-width: 900px) {
  .ds-prose table.ds-reflow, .ds-reflow tbody, .ds-reflow tr, .ds-reflow td { display: block; width: 100%; }
  .ds-reflow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ds-reflow tr { padding: 8px 0; border-bottom: 1px solid var(--ds-border-subtle); }
  .ds-reflow tr:last-child { border-bottom: 0; }
  .ds-prose .ds-reflow td { padding: 3px 12px; border: 0; }
  .ds-reflow td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ds-text-tertiary); }
}
/* Copy pill: an icon that grows into "Copy to clipboard" on hover, then a tick and "Copied" for 1.5s. */
.ds-copy { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 0; height: 28px; max-width: 28px; padding: 0 6px; overflow: hidden; border: 1px solid var(--ds-border-divider); border-radius: 999px; background: var(--ds-surface-raised); color: var(--ds-text-secondary); font: 600 12px var(--ds-font); white-space: nowrap; cursor: pointer; transition: max-width 200ms var(--ds-ease), gap 200ms var(--ds-ease), color 0.15s cubic-bezier(0, 0, 0.2, 1); }
.ds-copy > span { flex: none; display: block; }
.ds-copy svg { display: block; width: 16px; height: 16px; max-width: none; }
.ds-copy .ds-copy-ok { display: none; }
.ds-copy .ds-copy-text { max-width: 0; overflow: hidden; opacity: 0; transition: max-width 200ms var(--ds-ease), opacity 120ms; }
.ds-copy:is(:hover, :focus-visible, .is-copied) .ds-copy-text { max-width: 140px; opacity: 1; }
.ds-copy:is(:hover, :focus-visible), .ds-copy.is-copied { max-width: 180px; gap: 6px; padding-right: 10px; color: var(--ds-text-primary); }
.ds-copy.is-copied { border-color: var(--ds-success-subtle); color: var(--ds-success-fg); }
.ds-copy.is-copied .ds-copy-ic { display: none; }
.ds-copy.is-copied .ds-copy-ok { display: block; }
.ds-code[data-lang]::before { right: 44px; }
.ds-copy.is-inline { position: relative; top: auto; right: auto; vertical-align: middle; margin-left: 4px; height: 24px; max-width: 24px; padding: 0 4px; }
.ds-copy.is-inline:is(:hover, :focus-visible), .ds-copy.is-inline.is-copied { max-width: 170px; padding-right: 8px; }
/* Heading anchors */
.ds-anchor { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; vertical-align: middle; border-radius: var(--ds-r-input); color: var(--ds-text-tertiary); opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
:is(h2, h3, h4):is(:hover, :focus-within) > .ds-anchor, .ds-anchor:focus-visible { opacity: 1; }
.ds-anchor:hover { color: var(--ds-brand-fg); }
.ds-ask-h { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--ds-r-input); background: none; vertical-align: middle; color: var(--ds-text-tertiary); opacity: 0; cursor: pointer; transition: opacity var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.ds-ask-h svg { width: 16px; height: 16px; }
:is(h2, h3):is(:hover, :focus-within) > .ds-ask-h, .ds-ask-h:focus-visible { opacity: 1; }
.ds-ask-h:hover { color: var(--ds-brand-fg); }
.ds-ask-h::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ds-text-primary); color: var(--ds-surface-raised); font: 500 12px var(--ds-font); letter-spacing: 0; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--ds-dur-fast) var(--ds-ease); }
.ds-ask-h:is(:hover, :focus-visible)::after { opacity: 1; transition-delay: 0.4s; }
@media (hover: none) { .ds-ask-h { opacity: 0.6; } }
@media (hover: none) { .ds-anchor { opacity: 0.6; } }
/* Toasts */
.ds-toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + var(--ds-bar-h, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.ds-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ds-border-divider); border-radius: 12px; background: var(--ds-surface-raised); color: var(--ds-text-primary); font-size: 14px; box-shadow: 0 12px 32px -12px rgba(20, 28, 50, 0.3); pointer-events: auto; animation: ds-toast-in 200ms var(--ds-ease) both; }
.ds-toast.is-out { animation: ds-toast-out 200ms var(--ds-ease) both; }
.ds-toast-ic { display: grid; color: var(--ds-success-fg); }
.ds-toast.is-info .ds-toast-ic { color: var(--ds-info-fg); }
.ds-toast.is-error .ds-toast-ic { color: var(--ds-danger-fg); }
.ds-toast-act { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--ds-brand-fg); font: 600 14px var(--ds-font); cursor: pointer; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ds-toast-out { to { opacity: 0; transform: translateY(8px); } }
/* Checklist */
.ds-checklist, .ds-checklist ul { list-style: none; margin: 8px 0; padding: 0; max-width: var(--ds-measure); }
.ds-checklist ul { margin: 0 0 0 24px; }
.ds-checklist li { margin: 0; padding: 0; }
/* One rhythm for every row and sub-step (Shane): 36px rows, no gap between them, the 20px box centred on its first line. */
.ds-checklist label { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 6px 0; box-sizing: border-box; line-height: 24px; cursor: pointer; }
.ds-checklist input { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid var(--ds-border-default); border-radius: 6px; background: var(--ds-surface-raised) no-repeat center / 14px; transition: background-color 0.15s cubic-bezier(0, 0, 0.2, 1), border-color 0.15s cubic-bezier(0, 0, 0.2, 1); cursor: pointer; }
.ds-checklist input:checked { border-color: var(--ds-brand); background-color: var(--ds-brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ds-checklist input:checked + span { color: var(--ds-text-tertiary); text-decoration: line-through; }
.ds-checklist-bar { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; font-size: 13px; color: var(--ds-text-secondary); }
.ds-checklist-reset { padding: 0; border: 0; background: none; color: var(--ds-brand-fg); font: 600 13px var(--ds-font); text-decoration: underline; cursor: pointer; }
.ds-code pre code.language-diff { white-space: pre-wrap; }
.token.prefix { display: inline !important; width: auto !important; background: none !important; }
.ds-code[data-lang] pre, .ds-code pre { padding-top: 36px; }
.ds-code-title + .ds-copy + pre, .ds-reqres .ds-code pre { padding-top: 10px; }
.ds-copy { max-width: 30px; height: 30px; padding: 0 6px; }
.ds-copy.is-inline { max-width: 26px; height: 26px; padding: 0 4px; }
.ds-prose .ds-code .ds-code-title { color: var(--ds-text-primary); }
.ds-prose .ds-code.is-terminal pre code { color: #e6e6e6; background: none; }

/* Copy button inside the block (Shane): 28px at top 8 / right 8; the pill grows leftwards from the icon, so it never
   leaves the block; the language label sits left of the button with an 8px gap. */
.ds-copy { top: 8px; right: 8px; flex-direction: row-reverse; justify-content: flex-start; height: 28px; max-width: 28px; padding: 0 5px; }
.ds-copy:is(:hover, :focus-visible), .ds-copy.is-copied { max-width: 170px; padding: 0 10px 0 5px; gap: 6px; }
.ds-code[data-lang]::before { top: 14px; right: 44px; transition: opacity var(--ds-dur-fast) var(--ds-ease); }
.ds-code:has(> .ds-copy:is(:hover, :focus-visible, .is-copied))[data-lang]::before { opacity: 0; }
.ds-code:has(.ds-code-title)[data-lang]::before { top: 9px; }
.ds-code:has(.ds-code-title) > .ds-copy { top: 3px; }
.ds-copy.is-inline { flex-direction: row; }

/* Page head: actions top right, the stamp and Changed in line under the h1. */
.ds-card { position: relative; }
.ds-page-actions { position: absolute; top: 20px; right: 20px; display: flex; gap: 4px; }
.ds-page-actions > * { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ds-r-button); background: none; color: var(--ds-text-tertiary); cursor: pointer; transition: color 0.15s cubic-bezier(0, 0, 0.2, 1), background-color 0.15s cubic-bezier(0, 0, 0.2, 1); }
.ds-page-actions > *:hover { background: var(--ds-brand-subtle); color: var(--ds-brand-fg); }
.ds-page-actions [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; padding: 5px 10px; border-radius: var(--ds-r-input); background: var(--ds-text-primary); color: var(--ds-surface-raised); font: 500 12px var(--ds-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.ds-page-actions [data-tip]:is(:hover, :focus-visible)::after { opacity: 1; transition-delay: 0.4s; }
.ds-card > h1, .ds-wizard > h1 { padding-right: 120px; }
.ds-card h1 .ds-badge { vertical-align: 6px; font-size: 12px; }
.ds-page-stamp { margin: -4px 0 6px; }
.ds-page-stamp:empty { display: none; }
.ds-changed { margin: 0 0 16px; font-size: 13px; }
.ds-changed a { color: var(--ds-brand-fg); text-decoration: none; }
.ds-changed a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ds-success); vertical-align: 1px; }
.ds-flyout-link b .ds-badge { margin-left: 6px; vertical-align: 1px; }
/* Was this page helpful: a subtle panel with the shared controls */
.ds-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: var(--ds-measure); margin: 32px 0 0; padding: 16px 20px; border: 1px solid var(--ds-border-subtle); border-radius: 12px; background: var(--ds-surface-subtle); }
.ds-helpful-q { margin: 0; font: 600 14px var(--ds-font); color: var(--ds-text-primary); }
.ds-helpful-btns { display: flex; gap: 8px; }
.ds-helpful-more { flex-basis: 100%; margin: 0; }
.ds-helpful-label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ds-text-secondary); }
.ds-helpful-row { display: flex; gap: 8px; }
.ds-helpful-row .ds-input { flex: 1; min-width: 0; }
.ds-helpful-thanks { margin: 0; font-size: 14px; color: var(--ds-success-fg); font-weight: 600; }
.ds-wizard > .ds-helpful { margin: 56px 0 0; }
/* Search additions */
.ds-result-path { display: block; margin: 1px 0 2px; font-size: 12px; color: var(--ds-text-tertiary); }
.ds-search-results b .ds-badge { font-style: normal; margin-left: 6px; }
/* Keyboard shortcuts panel */
.ds-keys { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ds-text-primary) 32%, transparent); }
.ds-keys-box { width: min(440px, 100%); padding: 20px 24px; border: 1px solid var(--ds-border-divider); border-radius: var(--ds-r-card); background: var(--ds-surface-raised); color: var(--ds-text-primary); box-shadow: 0 20px 48px -16px rgba(20, 28, 50, 0.35); }
.ds-keys-title { margin: 0 0 12px; font: 600 17px var(--ds-display); }
.ds-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0 0 16px; font-size: 14px; }
.ds-keys dt { white-space: nowrap; }
.ds-keys dd { margin: 0; color: var(--ds-text-secondary); }
.ds-keys-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0 0; border: 0; border-top: 1px solid var(--ds-border-divider); background: none; color: var(--ds-text-primary); font: 500 14px var(--ds-font); cursor: pointer; }

/* Print: the page alone, full width, links followed by their address, code wrapped. */
@media print {
  .ds-rail, .ds-tree, .ds-toc, .ds-topbar, .ds-ask-pill, .ds-mobile-bar, .ds-flyout, .ds-page-actions, .ds-helpful, .ds-pager, .ds-wizard-nav, .ds-copy, .ds-anchor, .ds-ask-h, .ds-toasts, .ds-search-wrap, nav, aside { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .ds-frame, .ds-body, .ds-main, .ds-main.has-toc { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; }
  .ds-card { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  .ds-prose a[href]:not([href^="#"]):not([class])::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; overflow-wrap: anywhere; }
  .ds-prose pre, .ds-prose code { white-space: pre-wrap !important; overflow-wrap: anywhere; }
  .ds-steps { height: auto !important; overflow: visible !important; }
  .ds-step[hidden] { display: block !important; }
}
.ds-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-form-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: var(--ds-measure); }
.ds-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px !important; }
.ds-tag { background: var(--ds-surface-deep); color: var(--ds-text-secondary); }
.ds-tag.is-breaking { background: var(--ds-warning-subtle); color: var(--ds-warning-fg); }
.ds-release-sum ul { margin: 6px 0 0; padding-left: 18px; }
.ds-release-sum li, .ds-release-sum p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--ds-text-secondary); }
.ds-whatsnew h3 { margin: 24px 0 4px; }
/* Component library demos (round 4 item 11): each example runs in its own frame, on a light panel. */
.ds-wc-demo { margin: 12px 0 8px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-card); overflow: hidden; background: #fff; }
.ds-wc-frame { display: block; width: 100%; min-height: 96px; border: 0; }
iframe.ds-wc-frame:not(.ds-wc-demo iframe) { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-card); background: #fff; }
/* Design system pages (round 4 item 11): the record's Figma frame fills the column. */
.ds-dsys-frame iframe { display: block; width: 100%; max-width: 100%; border: 1px solid var(--ds-border-subtle) !important; border-radius: var(--ds-r-card); }
/* DS-53 (Shane, round 5c item 1): code blocks. The copy control and the language label sit in a small toolbar ABOVE
   the box, right-aligned, outside it, on every kind of block; nothing floats inside the box, so a block is as tall
   as its lines plus 12px top and bottom. One light scheme for every language and the dark Terminal scheme for shell
   blocks. Inside a wizard step the code, tables and callouts are their own block formatting context, so the floated
   step art never sits on top of them. */
.ds-code { padding-top: 34px; }
.ds-code > .ds-copy, .ds-code:has(.ds-code-title) > .ds-copy { top: 2px; right: 0; }
.ds-code[data-lang]::before, .ds-code:has(.ds-code-title)[data-lang]::before { top: 9px; right: 40px; }
.ds-code[data-lang] pre, .ds-code pre, .ds-code-title + .ds-copy + pre, .ds-reqres .ds-code pre { padding-top: 12px; padding-bottom: 12px; }
.ds-code.is-terminal[data-lang]::before { color: var(--ds-text-tertiary); }
.ds-step :is(.ds-code, pre, table, .ds-table-wrap, .ds-callout, .ds-reqres, .ds-tabs) { display: flow-root; }
.ds-step table { display: table; }
/* DS-54: page tools. Link first, then Markdown, ChatGPT, Claude, Grok, Gemini inline; below 1100px the five after
   Link fold behind one Open in button that pops out on hover, focus or click. */
.ds-open-in { position: relative; display: flex; width: auto !important; height: auto !important; border: 0 !important; }
.ds-open-in:hover { background: none !important; }
.ds-open-menu { display: flex; gap: 4px; }
.ds-open-menu > * { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ds-r-button); background: none; color: var(--ds-text-tertiary); cursor: pointer; }
.ds-open-menu > *:hover { background: var(--ds-brand-subtle); color: var(--ds-brand-fg); }
.ds-open-btn { display: none !important; }
.ds-page-actions .ds-open-menu [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; padding: 5px 10px; border-radius: var(--ds-r-input); background: var(--ds-text-primary); color: var(--ds-surface-raised); font: 500 12px var(--ds-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.ds-page-actions .ds-open-menu [data-tip]:is(:hover, :focus-visible)::after { opacity: 1; transition-delay: 0.4s; }
@media (max-width: 1099.98px) {
  .ds-open-btn { display: grid !important; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ds-r-button); background: none; color: var(--ds-text-tertiary); cursor: pointer; }
  .ds-open-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; padding: 4px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-button); background: var(--ds-surface-raised); box-shadow: 0 8px 24px rgba(20, 28, 50, 0.16); visibility: hidden; opacity: 0; transition: opacity 120ms, visibility 0s linear 120ms; }
  .ds-open-in:is(:hover, :focus-within, .is-open) .ds-open-menu { visibility: visible; opacity: 1; transition: opacity 120ms; }
  .ds-page-actions .ds-open-menu [data-tip]::after { display: none; }
}
/* DS-55 (Shane, round 5c item 15): a component has one resting state. The example card header always shows its
   background and border; hover may lift a card but never adds or removes a background, border or header. */
/* DS-56 Try it: its own scheme in both themes, near-black panel and purple actions. */
.ds-try { margin: 16px 0 24px; padding: 16px; border-radius: var(--ds-r-card); background: #1f1f1f; color: #ededed; font: 14px/1.5 var(--ds-font); }
.ds-try-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.ds-try-head b { color: #c4b5fd; font: 600 13px var(--ds-font); letter-spacing: 0.04em; text-transform: uppercase; }
.ds-try-head span { color: #d4d4d4; font: 13px var(--ds-mono); }
.ds-try-in { display: block; }
.ds-try-in span { display: block; margin-bottom: 4px; color: #bdbdbd; font-size: 12px; }
.ds-try-in textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid #3a3a3a; border-radius: 6px; background: #121212; color: #f5f5f5; font: 13px/1.5 var(--ds-mono); resize: vertical; }
.ds-try-act { display: flex; gap: 8px; margin: 10px 0; }
.ds-try-act button { height: 32px; padding: 0 14px; border: 1px solid #7c3aed; border-radius: 6px; background: #7c3aed; color: #fff; font: 600 13px var(--ds-font); cursor: pointer; }
.ds-try-act .ds-try-reset { background: transparent; color: #ddd6fe; }
.ds-try-out { margin: 0; min-height: 1.5em; padding: 10px; border-radius: 6px; background: #121212; color: #e5e5e5; font: 13px/1.5 var(--ds-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-try-out:empty { display: none; }
.ds-prose .ds-try pre.ds-try-out, .ds-try .ds-try-out { margin: 0; border: 0; background: #121212; color: #e5e5e5; }   /* DS-56: the result pane keeps the Try it scheme inside prose */
/* DS-59 reading time and progress; DS-60 Related and Continue; DS-61 copy morph (round 7). */
.ds-page-stamp .ds-read-time::before { content: "·"; margin: 0 6px; color: var(--ds-text-subtle); }
.ds-read-progress { position: fixed; z-index: 30; top: var(--ds-topbar-h, 56px); left: 0; right: 0; height: 2px; pointer-events: none; }
.ds-read-progress i { display: block; height: 100%; background: var(--ds-brand); transform: scaleX(0); transform-origin: 0 50%; }
.ds-related { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--ds-border-divider); }
.ds-related .ds-related-h { margin: 0 0 8px !important; font: 600 13px var(--ds-font) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-text-tertiary); }
.ds-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.ds-related li a { display: inline-block; padding: 4px 0; color: var(--ds-brand-fg); }
@media (max-width: 859.98px) { .ds-related ul { grid-template-columns: 1fr; } }
.ds-page-actions .is-copied svg { opacity: 0; }
.ds-page-actions .is-copied { background: var(--ds-success-subtle) !important; color: var(--ds-success-fg) !important; }
.ds-page-actions .is-copied::before { content: ""; position: absolute; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) { .ds-page-actions .is-copied::before { animation: ds-tick-in var(--ds-dur-base) var(--ds-ease) both; } @keyframes ds-tick-in { from { opacity: 0; transform: translateY(-2px) rotate(-45deg) scale(.6); } } }
/* DS-71 bundle control */
.ds-bundle { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 20px; padding: 14px 16px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-card); background: var(--ds-surface-subtle); }
.ds-bundle b { font: 600 14px var(--ds-display); }
.ds-bundle span { font-size: 13px; color: var(--ds-text-secondary); }
.ds-bundle-act { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ds-bundle-act > * { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--ds-border-divider); border-radius: var(--ds-r-button); background: var(--ds-surface-raised); color: var(--ds-text-primary); font: 600 13px var(--ds-font); text-decoration: none; cursor: pointer; }
.ds-bundle-act > :hover { border-color: var(--ds-brand-border); color: var(--ds-brand-fg); }
/* DS-72 status strip */
.ds-status { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-input); font-size: 14px; color: var(--ds-text-secondary); }
.ds-status:empty { display: none; }
.ds-status i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ds-success, #10b981); }
.ds-status.is-degraded i { background: var(--ds-warning, #f59e0b); }
.ds-status.is-down i { background: var(--ds-danger, #ef4444); }
.ds-since { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border-radius: 999px; background: var(--ds-pill-feature-bg, #e6edfe); color: var(--ds-pill-feature-fg, #1f3fae); font: 600 12px var(--ds-font); text-decoration: none; }
/* DS-73 Listen player */
.ds-listen { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 8px 6px 6px; border: 1px solid var(--ds-border-subtle); border-radius: 999px; background: var(--ds-surface-subtle); font-size: 12px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.ds-listen button { flex: none; height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--ds-border-divider); border-radius: 999px; background: var(--ds-surface-raised); color: var(--ds-text-primary); font: 600 12px var(--ds-font); cursor: pointer; }
.ds-listen .ds-listen-pp { display: grid; place-items: center; width: 28px; padding: 0; border-color: transparent; background: var(--ds-brand); color: #fff; }
.ds-listen-pp svg { width: 12px; height: 12px; }
.ds-listen button:focus-visible, .ds-listen a:focus-visible { outline: 2px solid var(--ds-brand-fg); outline-offset: 2px; }
/* loading: a 12px ring in the button's colour; a static ellipsis under reduced motion */
.ds-spin { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin 800ms linear infinite; }
.ds-spin-dots { display: none; font: 700 14px/1 var(--ds-font); margin-top: -4px; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-spin { display: none; } .ds-spin-dots { display: block; } }
/* the seek tracks: a 20px hit area around the rail, with a thumb on hover, focus and drag */
.ds-listen-track, .ds-listen-big { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; border-radius: 4px; }
.ds-listen-track { flex: 1; min-width: 160px; }
@media (max-width: 559.98px) { .ds-listen-track { min-width: 64px; } }   /* phones: the track gives way so close stays in the pill */
.ds-listen-track:focus-visible, .ds-listen-big:focus-visible { outline: 2px solid var(--ds-brand-fg); outline-offset: 2px; }
.ds-listen-rail { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--ds-border-divider); overflow: hidden; }
.ds-listen-fill { display: block; height: 100%; background: var(--ds-brand); transform: scaleX(0); transform-origin: 0 50%; }
.ds-listen-thumb { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ds-brand); box-shadow: 0 0 0 2px var(--ds-surface-raised); opacity: 0; transform: scale(.6); transition: opacity 120ms, transform 120ms; pointer-events: none; }
.ds-listen-track:hover .ds-listen-thumb, .ds-listen-track:focus-visible .ds-listen-thumb, .ds-listen-track:active .ds-listen-thumb { opacity: 1; transform: none; }
.ds-listen-time { flex: none; color: var(--ds-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a status (preparing, queued, an error) takes the track and time's place and wraps rather than clips */
.ds-listen-msg { display: none; flex: 1; min-width: 0; color: var(--ds-text-secondary); font-size: 12px; line-height: 16px; }
.ds-listen.is-msg .ds-listen-msg { display: block; }
.ds-listen.is-msg .ds-listen-track, .ds-listen.is-msg .ds-listen-time { display: none; }
.ds-listen .ds-listen-more, .ds-listen .ds-listen-close { display: grid; place-items: center; width: 24px; height: 24px; min-width: 24px; padding: 0; color: var(--ds-text-secondary); }
.ds-listen .ds-listen-close { border-color: transparent; background: transparent; }
.ds-listen .ds-listen-more:hover, .ds-listen .ds-listen-more[aria-expanded="true"] { border-color: var(--ds-brand); color: var(--ds-brand-fg); }
.ds-listen .ds-listen-close:hover { background: var(--ds-surface-raised); color: var(--ds-text-primary); }
.ds-listen-close svg { width: 14px; height: 14px; } .ds-listen-more svg { width: 13px; height: 13px; transition: transform 160ms; }
.ds-listen-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* DS-87 expanded panel (Shane's option 4, revised): what is being read, a big scrubber, skip, speed, page actions */
.ds-listen-exp { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 420px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 16px; border: 1px solid var(--ds-border-subtle); border-radius: 14px; background: var(--ds-surface-raised); box-shadow: var(--ds-elevation-sm), 0 12px 32px rgba(20, 28, 50, 0.18); color: var(--ds-text-primary); cursor: default; }
.ds-listen-exp[hidden] { display: none; }
.ds-listen-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ds-listen-eyebrow { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-brand-fg); }
.ds-listen-stat { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-text-tertiary); }
.ds-listen-stat i { width: 7px; height: 7px; border-radius: 50%; background: #19b37a; animation: ds-pulse 1.4s ease-in-out infinite; }
.ds-listen-stat.is-paused i { background: var(--ds-text-tertiary); animation: none; }
@keyframes ds-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ds-listen-stat i { animation: none; } }
.ds-listen-title { display: block; margin: 2px 0 6px; font: 600 15px/1.3 var(--ds-display, var(--ds-font)); color: var(--ds-text-primary); text-decoration: none; overflow-wrap: anywhere; }
.ds-listen-title:hover { text-decoration: underline; }
.ds-listen-big { margin: 6px 0 0; }
.ds-listen-big .ds-listen-rail { height: 6px; border-radius: 3px; }
.ds-listen-big .ds-listen-thumb { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 3px var(--ds-surface-raised); opacity: 1; transform: none; }
.ds-listen-times { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ds-text-tertiary); font-variant-numeric: tabular-nums; }
.ds-listen-ctrls { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 6px 0 2px; }
.ds-listen .ds-listen-pp--big { width: 40px; height: 40px; }
.ds-listen-pp--big svg { width: 15px; height: 15px; }
.ds-listen .ds-listen-skip { display: grid; place-items: center; height: 40px; padding: 0 4px; border: 0; background: none; color: var(--ds-text-secondary); font: 600 11px/1 var(--ds-font); }
.ds-listen-skip svg { width: 20px; height: 20px; }
.ds-listen-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-border-divider); }
.ds-listen .ds-listen-acts button { display: flex; align-items: center; gap: 7px; height: auto; min-width: 0; padding: 7px 9px; border: 1px solid var(--ds-border-divider); border-radius: 8px; background: var(--ds-surface-subtle); color: var(--ds-text-primary); font: 500 12.5px var(--ds-font); text-align: left; }
.ds-listen .ds-listen-acts button:hover { border-color: var(--ds-brand); }
.ds-listen-acts svg { flex: none; width: 14px; height: 14px; color: var(--ds-text-tertiary); }
.ds-listen-acts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* DS-87: in the top bar the player has room for play, a 160px track, time, speed, expand and close */
.ds-topbar:has(.ds-listen--top) { --ds-lw: 400px; }
.ds-listen--top { flex: none; width: max(var(--ds-lw, 400px), calc(50% - 246px)); margin: 0 0 0 auto; padding: 3px 6px 3px 4px; }
.ds-listen--top > .ds-listen-rate { height: 24px; padding: 0 6px; }
/* the search box is centered absolutely; with the player beside it, it slides left just enough to clear the player */
.ds-topbar:has(.ds-listen--top) .ds-search-wrap { left: calc(50% - max(0px, 246px + var(--ds-lw, 400px) - 50%)); }
/* DS-89 (SEO pass): the Support steps and the What's New groups are h2 for the outline, drawn at their old sizes. */
.ds-steps-inline h2.ds-step-h { margin: 3px 0 4px !important; font: 600 15px/1.4 var(--ds-display); color: var(--ds-text-primary); }
.ds-whatsnew h2.ds-wn-h { margin: 24px 0 4px; font-size: calc(var(--ds-text) * 16 / 14); }