/* Landing page (overrides/home.html). Frames, buttons and the install box follow qdbd's home.css; the extension
 * drawing (.cd-*) and the playground (.qp-*) are cte-diff's own. Everything is scoped to .qh. Colours: extra.css. */

.md-main:has(.qh) { background: var(--qd-bg); }
.md-main:has(.qh) .md-main__inner { margin: 0; display: block; }
.md-main:has(.qh) .md-content__inner { margin: 0; padding: 0; }
.md-main:has(.qh) .md-content__inner > .qd-crumbs, .md-main:has(.qh) .md-content__inner > h1 { display: none; }
.qh {
  position: relative; isolation: isolate; overflow-x: clip;
  color: var(--qd-text); font-size: 16px; line-height: 1.6; padding-bottom: 40px;
}
.qh :focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }
.qh-wrap { --qh-pad: 24px; max-width: 1180px; margin: 0 auto; padding: 0 var(--qh-pad); }
.qh a { color: var(--bp-accent); }
.qh code { font-family: var(--bp-mono); font-size: .86em; background: var(--bp-ink-a05);
  border-radius: 4px; padding: .08em .35em; font-variant-ligatures: none; }
.qh h1, .qh h2, .qh h3 { font-family: var(--bp-sans); color: var(--bp-ink); letter-spacing: -.036em; margin: 0; }
.qh h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; font-weight: 600; max-width: 26ch; text-wrap: balance; }
.qh h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }

/* ------------------------------------------------------------- panels: white on the grey-green page */
.qh-fig { margin-top: 40px; padding: 24px; background: var(--bp-sheet); border: 1px solid var(--bp-rule-strong); border-radius: 14px;
  box-shadow: var(--bp-e1); }

/* ------------------------------------------------------------------------ hero */
.qh-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: end;
  padding-top: 56px; padding-bottom: 24px; }
.qh-author { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 4px 14px 4px 4px;
  border: 1px solid var(--bp-rule-strong); border-radius: 999px; color: var(--qd-muted) !important; font-size: 14px;
  background: var(--bp-sheet); transition: border-color var(--bp-t-hover) linear; }
.qh-author:hover { border-color: var(--bp-accent); }
.qh-author img { width: 28px; height: 28px; border-radius: 50%; }
.qh-author b { color: var(--qd-text); font-weight: 600; }
.qh-meta { font-size: 14px; color: var(--qd-label); margin: 0 0 16px; }
.qh-meta a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.qh h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.03; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.qh h1 span { color: var(--bp-ink-3); }
/* the lead, the buttons and the command share this: the hero column, never wider than the lead's 34em */
.qh-hero__text { max-width: calc(18px * 34); min-width: 0; }
.qh-lead { font-size: 18px; color: var(--qd-muted); margin: 0 0 24px; }
.qh-installs { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.qh-installs--center { width: max-content; max-width: 100%; margin-inline: auto; grid-template-columns: max-content; }
.qh-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.qh-cta--center { justify-content: center; }
.qh-hero__text .qh-btn { flex: 1 1 auto; justify-content: center; }
.qh-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--bp-rule-strong); color: var(--bp-ink) !important; font-weight: 500; background: var(--bp-sheet);
  transition: background-color var(--bp-t-hover) linear, border-color var(--bp-t-hover) linear, transform var(--bp-t-press) var(--bp-ease-out); }
.qh-btn:hover { background: var(--bp-white); border-color: var(--bp-ink-3); }
.qh-btn:active { transform: scale(.97); }
.qh-btn--primary { background: var(--bp-accent); border-color: var(--bp-accent); color: var(--bp-white) !important; }
.qh-btn--primary:hover { background: var(--bp-accent-press); border-color: var(--bp-accent-press); }
.qh-install { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 8px 8px 14px; min-width: 0;
  box-sizing: border-box; background: var(--bp-sheet); border: 1px solid var(--bp-rule-strong); border-radius: 10px; }
.qh-installs--center .qh-install { margin-top: 22px; }
.qh-install code { background: none; padding: 0; flex: 1; min-width: 0; font-size: 14px; color: var(--bp-ink); white-space: nowrap; }
.qh-install__prompt { color: var(--bp-ink-3); font: 12px var(--bp-mono); border: 1px solid var(--bp-rule-strong); border-radius: 4px; padding: 1px 5px; }
.qh-copy { border: 0; background: none; color: var(--qd-label); cursor: pointer; padding: 8px; border-radius: 6px; display: inline-flex;
  transition: color var(--bp-t-hover) linear, background-color var(--bp-t-hover) linear; }
.qh-copy:hover { color: var(--bp-ink); background: var(--bp-ink-a06); }
.qh-copy.ok { color: var(--cd-added); }

/* ------------------------------------------- the live demo (hero), filled in by web/demo.ts */
.cd-win { position: relative; grid-column: 1 / -1; margin: 24px 0 0; border: 1px solid var(--bp-rule-strong); border-radius: 12px;
  overflow: hidden; background: var(--bp-sheet); box-shadow: var(--bp-e2); font: 12px/1.55 var(--bp-mono); color: var(--bp-ink); }
.cd-win::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .22s var(--bp-ease-out); }
.cd-win.mine::after { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bp-accent) 60%, transparent); }
.cd-win__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--bp-rule);
  color: var(--bp-ink-3); }
.cd-win__bar i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bp-rule-strong); }
.cd-win__bar span { margin-left: 10px; }
.cd-state { display: none; align-items: center; gap: 6px; margin-left: auto; font: 500 11px var(--bp-mono); color: var(--bp-accent); }
.cd-win.live .cd-state { display: flex; }
.cd-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: cd-pulse 1.6s ease-in-out infinite; }
.cd-win.mine .cd-state { color: var(--cd-changed); }
@keyframes cd-pulse { 50% { opacity: .3; } }
.cd-win__body { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 720px; }
.cd-noscript { margin: 0; padding: 24px; font-family: var(--bp-sans); }
.cd-main { display: grid; grid-template-rows: minmax(0, 1fr) 340px; min-width: 0; min-height: 0; }
.cd-win figcaption { padding: 10px 14px; border-top: 1px solid var(--bp-rule); font: 13px/1.5 var(--bp-sans); color: var(--bp-ink-2); }
.cd-win:not(.live) .cd-hint { display: none; }

/* the sidebar */
.cd-side { border-right: 1px solid var(--bp-rule); padding: 10px 0; background: var(--bp-paper); overflow: auto; }
.cd-side__head { padding: 0 12px 4px; color: var(--bp-ink-3); }
.cd-side__head b { color: var(--bp-ink); font-weight: 600; margin-right: 6px; }
.cd-side__msg { margin: 0 12px 8px; font: 12px/1.45 var(--bp-sans); color: var(--bp-ink-2); }
.cd-side__list { list-style: none; margin: 0; padding: 0; }
.cd-side__list li { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 6px 0 12px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--bp-t-hover) linear; }
.cd-side__list li:hover, .cd-side__list li.cd-hover { background: var(--bp-ink-a04); }
.cd-side__list em { flex: 1; min-width: 0; font-style: normal; color: var(--bp-ink-3); overflow: hidden; text-overflow: ellipsis; }
.cd-mark { flex: none; width: 1ch; font-weight: 600; }
.cd-changed .cd-mark, .cd-affected .cd-mark { color: var(--cd-changed); }
.cd-added .cd-mark { color: var(--cd-added); }
.cd-removed .cd-mark { color: var(--cd-removed); }
.cd-affected em { text-decoration: underline dashed var(--bp-ink-3); text-underline-offset: 3px; }
.cd-side__list li.cd-sel { background: var(--bp-wash); box-shadow: inset 2px 0 var(--bp-accent); }
.cd-side__btns { display: flex; gap: 1px; flex: none; opacity: 0; transition: opacity .15s linear; }
.cd-side__list li:hover .cd-side__btns, .cd-side__list li.cd-hover .cd-side__btns, .cd-side__list li.cd-sel .cd-side__btns,
.cd-side__list li:focus-within .cd-side__btns { opacity: 1; }
.cd-side__btns button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font: 600 13px var(--bp-mono); color: var(--bp-accent); transition: background-color var(--bp-t-hover) linear; }
.cd-side__btns button:hover { background: color-mix(in srgb, var(--bp-accent) 14%, transparent); }

/* the diff */
.cd-diff { position: relative; overflow: auto; padding-bottom: 8px; scrollbar-width: thin; }
.cd-diff:focus-visible { outline-offset: -2px; }
.cd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 640px; }
.cd-row > span { display: block; min-height: 1.55em; padding-right: 10px; white-space: pre; overflow: hidden; text-overflow: clip; }
.cd-row > span:first-child { border-right: 1px solid var(--bp-rule); }
.cd-row i { display: inline-block; width: 4ch; padding-right: 1.4ch; text-align: right; font-style: normal; color: var(--bp-ink-3); }
.cd-row b { font-weight: 600; }
.cd-row u { text-decoration: none; color: var(--bp-ink-3); }
.cd-row s { text-decoration: none; color: var(--cd-changed); }
.cd-row em { font-style: normal; color: var(--bp-ink-3); }
.cd-del { background: var(--cd-removed-bg); }
.cd-add { background: var(--cd-added-bg); }
.cd-fill { background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--bp-ink-a05) 5px 6px); }
.cd-row--head { position: sticky; top: 0; z-index: 1; margin-bottom: 4px; background: var(--bp-sheet); border-bottom: 1px solid var(--bp-rule);
  font: 500 12px/1 var(--bp-sans); }
.cd-row--head > span { padding: 10px 12px; min-height: 0; }
.cd-count { display: inline-flex !important; align-items: center; gap: 6px; }
.cd-count::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box;
  background: linear-gradient(currentColor, currentColor) center / 6px 1.5px no-repeat; }
.cd-count--add::before { background: linear-gradient(currentColor, currentColor) center / 6px 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) center / 1.5px 6px no-repeat; }
.cd-count--rm { color: var(--cd-removed); }
.cd-count--add { color: var(--cd-added); }
.cd-row--lens > span { font: 11px/2 var(--bp-sans); color: var(--bp-ink-3); }
.cd-lens { padding-left: 5.4ch; white-space: nowrap; overflow: hidden; }
.cd-lens button { padding: 0 2px; border: 0; border-radius: 3px; background: none; cursor: pointer; font: inherit; color: var(--bp-ink-3);
  transition: color var(--bp-t-hover) linear, background-color var(--bp-t-hover) linear; }
.cd-lens button:hover, .cd-lens button.cd-hit { color: var(--bp-accent); text-decoration: underline; text-underline-offset: 2px; }
.cd-lens button.cd-hit { background: var(--bp-wash); }

/* the bottom panel: the extension's results view (src/results.ts) in a shadow root, in the site's colours */
.cd-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-top: 1px solid var(--bp-rule-strong); background: var(--bp-sheet); }
.cd-panel__tabs { display: flex; flex: none; align-items: center; gap: 18px; height: 34px; padding: 0 14px; font: 500 11px var(--bp-sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--bp-ink-3); }
.cd-panel__tabs .on { padding: 9px 0 8px; color: var(--bp-ink); box-shadow: inset 0 -1px var(--bp-ink); }
.cd-panel__title { margin-left: auto; font: 11px var(--bp-mono); font-style: normal; letter-spacing: 0; text-transform: none; }
.cd-panel__body { flex: 1; min-height: 0; overflow: auto; --results-max: 212px;
  --vscode-font-family: var(--bp-sans); --vscode-font-size: 13px; --vscode-foreground: var(--bp-ink);
  --vscode-editor-font-family: var(--bp-mono); --vscode-editor-font-size: 12px; --vscode-panel-border: var(--bp-rule);
  --vscode-editorGroupHeader-tabsBackground: var(--bp-paper); --vscode-descriptionForeground: var(--bp-ink-3);
  --vscode-badge-background: var(--bp-ink-a05); --vscode-badge-foreground: var(--bp-ink); --vscode-sideBar-background: var(--bp-paper);
  --vscode-diffEditor-removedTextBackground: var(--cd-removed-mark); --vscode-diffEditor-insertedTextBackground: var(--cd-added-mark);
  --vscode-gitDecoration-deletedResourceForeground: var(--cd-removed); --vscode-gitDecoration-addedResourceForeground: var(--cd-added);
  --vscode-testing-iconPassed: var(--cd-added); --vscode-errorForeground: var(--cd-removed); --vscode-editorWarning-foreground: var(--cd-changed);
  --vscode-editorLineNumber-foreground: var(--bp-ink-3); --vscode-progressBar-background: var(--bp-accent); }

/* the scripted cursor, and the chapter cards under the window */
.cd-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cd-cursor { position: absolute; left: 0; top: 0; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
  transition: transform .8s var(--bp-ease-io), opacity .3s; }
.cd-win.live:not(.mine) .cd-cursor { opacity: 1; }
.cd-ripple { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--bp-accent);
  animation: cd-ripple .5s ease-out forwards; }
@keyframes cd-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.cd-chapters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0;
  list-style: none; }
.cd-chapters:not(.live) { display: none; }
.cd-chapters li { position: relative; overflow: hidden; cursor: pointer; padding: 12px 14px 14px; border: 1px solid var(--bp-rule-strong);
  border-radius: 10px; background: var(--bp-sheet); transition: border-color var(--bp-t-hover) linear, transform .22s var(--bp-ease-out); }
.cd-chapters li:hover { transform: translateY(-2px); }
.cd-chapters b { display: block; color: var(--bp-ink); font-size: 15px; font-weight: 600; }
.cd-chapters span { color: var(--qd-label); font-size: 13px; }
.cd-chapters i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--bp-accent); transform: scaleX(0); transform-origin: left; }
.cd-chapters li.on { border-color: var(--bp-accent); }
.cd-chapters li.on i { animation: cd-progress var(--dur, 8s) linear forwards; }
.cd-chapters li.done i { transform: none; opacity: .35; }
@keyframes cd-progress { to { transform: none; } }

/* One sequence on load: the window rises, the changed lines tint, the sidebar's marks arrive. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cd-in { from { opacity: 0; transform: translateY(6px); } }
  @keyframes cd-tint { from { background-color: transparent; } }
  .qh-hero .cd-win { animation: cd-in .5s .3s var(--bp-ease-out) both; }
  .cd-del, .cd-add { animation: cd-tint .3s linear both; animation-delay: calc(.8s + var(--i, 0) * 40ms); }
  .cd-side__list li { animation: cd-in .3s var(--bp-ease-out) both; animation-delay: calc(1.1s + var(--i) * 60ms); }
  .cd-chapters { animation: cd-in .4s 1.4s var(--bp-ease-out) both; }
}

/* -------------------------------------------------------------------- sections */
.qh-section { padding-top: 120px; }
.qh-video { text-align: center; }
.qh-video h2, .qh-video .qh-sub { margin-left: auto; margin-right: auto; }
.qh-video__frame { margin-top: 40px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bp-rule-strong);
  box-shadow: var(--bp-e2); background: var(--bp-paper); }
.qh-video__frame video { display: block; width: 100%; height: auto; }
.qh-sub { color: var(--qd-muted); font-size: 18px; max-width: 40em; margin: 16px 0 0; }
.qh-more { margin: 22px 0 0; font-weight: 500; }

/* the SQL diff against the data: the heading across the page, then the text beside a ledger of three of the demo's
 * CTEs, top and bottom aligned. Only order_payments is bold: no changed line, yet changed rows. Without home.js (or with reduced
 * motion) it shows its end: every count in, order_payments lit. */
.qh-gap h2 { max-width: none; }
.qh-gap h2 > span { display: block; }
.qh-gap__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; margin-top: 32px; }
/* side by side, the text runs the ledger's full height: the text level with its top, the link level with its caption */
.qh-gap__text { display: flex; flex-direction: column; }
.qh-gap__text > .qh-more { margin-top: auto; padding: 22px 0 18px; }
.qh-gap__text > .qh-sub:first-child { margin-top: 0; }
.qh-gap__fig { margin: 0; padding: 4px 24px 18px; }
.qh-gap__t { width: 100%; table-layout: fixed; border-collapse: collapse; font: 14px/1.45 var(--bp-sans); }
.qh-gap__c1 { width: 30%; }
.qh-gap__c2 { width: 40%; }
.qh-gap__t caption { caption-side: bottom; padding-top: 14px; text-align: left; font-size: 13px; color: var(--bp-ink-3); }
.qh-gap__t thead th { padding: 14px 12px 8px; border-bottom: 1px solid var(--bp-rule-strong); text-align: left;
  font-size: 12px; font-weight: 500; color: var(--bp-ink-3); }
.qh-gap__t tbody th, .qh-gap__t td { padding: 14px 12px; border-bottom: 1px solid var(--bp-rule); text-align: left; vertical-align: top; }
.qh-gap__t tbody tr:last-child > * { border-bottom: 0; }
.qh-gap__t tbody th { font: 500 13px/1.55 var(--bp-mono); color: var(--bp-ink); white-space: nowrap; }
.qh-gap__t td { color: var(--bp-ink-2); }
.qh-gap__t .qh-gap__same { color: var(--bp-ink-3); }
.qh-gap__t b { font-weight: 700; }
.qh .qh-gap__add { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--cd-added-bg); color: var(--bp-ink);
  font-size: 12px; white-space: nowrap; }
.qh-gap__add b { color: var(--cd-added); margin-right: 4px; }
.qh-gap__note b { color: var(--cd-changed); margin-right: 4px; }
.qh-gap__v { display: block; }
.qh-gap__note { display: block; margin-top: 2px; font-size: 13px; color: var(--cd-changed); }
/* the CTE no line of the diff touches, whose data moved anyway: the sidebar's amber "reads a changed CTE" */
.qh-gap__t .qh-gap__hit .qh-gap__v { font-weight: 600; color: var(--bp-ink); }
.qh-gap__hit > * { background: color-mix(in srgb, var(--cd-changed) 9%, var(--bp-sheet)); }
.qh-gap__hit > th { box-shadow: inset 3px 0 var(--cd-changed); }
@media (prefers-reduced-motion: no-preference) {
  .qh-gap.qh-anim tbody tr { transition: opacity .32s, transform .42s; transition-timing-function: var(--bp-ease-out);
    transition-delay: var(--d, 0s); }
  .qh-gap.qh-anim .qh-gap__v { transition: opacity .3s linear var(--d2, 0s); }
  .qh-gap.qh-anim .qh-gap__hit > * { transition: background-color .45s linear var(--d3, 0s), box-shadow .45s linear var(--d3, 0s); }
  .qh-gap.qh-anim .qh-gap__note { transition: opacity .3s, transform .36s; transition-timing-function: var(--bp-ease-pop);
    transition-delay: var(--d3, 0s); }
  .qh-gap.qh-anim:not(.qh-in) tbody tr { opacity: 0; transform: translateY(8px); }
  .qh-gap.qh-anim:not(.qh-in) .qh-gap__v { opacity: 0; }
  .qh-gap.qh-anim:not(.qh-in) .qh-gap__hit > * { background-color: transparent; box-shadow: none; }
  .qh-gap.qh-anim:not(.qh-in) .qh-gap__note { opacity: 0; transform: translateY(4px) scale(.96); }
}

.qh-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px;
  border-top: 1px solid var(--bp-rule-strong); border-bottom: 1px solid var(--bp-rule-strong); }
.qh-ways > div { padding: 22px 24px 24px 0; }
.qh-ways > div + div { padding-left: 24px; border-left: 1px solid var(--bp-rule); }
.qh-ways p { color: var(--qd-muted); margin: 8px 0 0; }

/* how a comparison works: three steps on the demo's rows. Without home.js (or with reduced motion) it shows its end:
 * the rows both sides have struck through. */
.qh-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.qh-how__step { position: relative; padding: 22px 22px 24px; background: var(--bp-sheet); border: 1px solid var(--bp-rule-strong);
  border-radius: 14px; box-shadow: var(--bp-e1); }
.qh-how__step + .qh-how__step::before { content: "→"; position: absolute; left: -25px; top: 26px; color: var(--bp-ink-3); font: 18px var(--bp-sans); }
.qh-how__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bp-wash);
  color: var(--bp-accent); font: 600 13px var(--bp-sans); }
.qh-how h3 { margin-top: 12px; }
.qh-how__step > p { margin: 6px 0 16px; color: var(--qd-muted); font-size: 14.5px; line-height: 1.55; }
.qh-how__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.qh-how__t { width: 100%; border-collapse: collapse; font: 12px/1.5 var(--bp-mono); }
.qh-how__t caption { padding-bottom: 4px; text-align: left; font: 500 12px var(--bp-sans); color: var(--bp-ink-2); }
.qh-how__t th { padding: 3px 6px; border-bottom: 1px solid var(--bp-rule-strong); text-align: right; font-size: 11px; font-weight: 500; color: var(--bp-ink-3); }
.qh-how__t td { padding: 3px 6px; border-bottom: 1px solid var(--bp-rule); text-align: right; }
span.qh-how__l, .qh-how__json li.qh-how__l b, tr.qh-how__l td:first-child { color: var(--cd-removed); font-weight: 700; }
span.qh-how__r, .qh-how__json li.qh-how__r b, tr.qh-how__r td:first-child { color: var(--cd-added); font-weight: 700; }
.qh-how__json { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 11.5px/1.5 var(--bp-mono); }
.qh-how__json li { display: flex; gap: 8px; padding: 3px 8px; border-radius: 6px; text-decoration: line-through transparent; }
.qh-how__json code { padding: 0; background: none; font-size: inherit; white-space: nowrap; }
.qh-how__json li.qh-how__l { background: var(--cd-removed-bg); }
.qh-how__json li.qh-how__r { background: var(--cd-added-bg); }
.qh .qh-how__json li.qh-how__same { background: var(--bp-ink-a03); color: var(--bp-ink-3); text-decoration-color: var(--bp-ink-3); }
.qh-how__res td:first-child, .qh-how__res th:first-child { width: 2ch; text-align: center; }
.qh-how__res .chg { font-weight: 600; }
.qh-how__res .qh-how__l .chg { background: var(--cd-removed-mark); }
.qh-how__res .qh-how__r .chg { background: var(--cd-added-mark); }
.qh-how__group td { text-align: left !important; font-family: var(--bp-sans); color: var(--bp-ink-3); background: var(--bp-ink-a03); }
.qh-how__note { max-width: 52em; margin: 24px 0 0; color: var(--qd-muted); font-size: 15px; }
.qh-how__note a { font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .qh-how.qh-anim .qh-how__step, .qh-how.qh-anim tbody tr, .qh-how.qh-anim .qh-how__json li { opacity: 0; transform: translateY(8px);
    transition: opacity .32s, transform .42s, background-color .4s, color .4s, text-decoration-color .4s;
    transition-timing-function: var(--bp-ease-out); transition-delay: var(--d, 0s), var(--d, 0s), 2.2s, 2.2s, 2.2s; }
  .qh-how.qh-anim.qh-in .qh-how__step, .qh-how.qh-anim.qh-in tbody tr, .qh-how.qh-anim.qh-in .qh-how__json li { opacity: 1; transform: none; }
  /* rows both sides have: coloured as they arrive, struck through once all are in */
  .qh .qh-how.qh-anim:not(.qh-in) .qh-how__json li.qh-how__same { color: inherit; text-decoration-color: transparent; }
  .qh .qh-how.qh-anim:not(.qh-in) .qh-how__json li.qh-how__same.qh-how__l { background: var(--cd-removed-bg); }
  .qh .qh-how.qh-anim:not(.qh-in) .qh-how__json li.qh-how__same.qh-how__r { background: var(--cd-added-bg); }
}

.qh-reqs { display: grid; gap: 0; margin: 32px 0 0; max-width: 46rem; border-top: 1px solid var(--bp-rule-strong); }
.qh-reqs > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--bp-rule); }
.qh-reqs dt { font-weight: 600; }
.qh-reqs dd { margin: 0; color: var(--qd-muted); }

/* the closing call to action: a mint callout */
.qh-final { margin-top: 120px; padding: 56px 24px; text-align: center; background: var(--bp-wash); border-radius: 16px; }
.qh-wrap.qh-final { max-width: calc(1180px - 48px); }
.qh-final h2 { margin: 0 auto 24px; color: var(--bp-accent-press); }

/* ------------------------------------------------------------------ playground
 * web/playground.ts: two editors (a coloured copy under a transparent textarea, lined up by --lh), then the live demo's
 * sidebar and results panel. */
.qp.cd-win { margin-top: 40px; }
.qp-engine { margin-left: auto; font: 500 11px var(--bp-mono); color: var(--bp-ink-3); }
.qp-engine[data-state="ready"] { color: var(--bp-accent); }
.qp-engine[data-state="failed"] { color: var(--cd-removed); }
.qp-editors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--bp-rule-strong); }
.qp-ed + .qp-ed { border-left: 1px solid var(--bp-rule); }
.qp-ed__head { padding: 7px 12px; border-bottom: 1px solid var(--bp-rule); font: 500 12px var(--bp-sans); color: var(--bp-ink-2); }
.qp-ed[data-side="left"] .qp-ed__head::before { content: "−"; margin-right: 6px; color: var(--cd-removed); font-weight: 700; }
.qp-ed[data-side="right"] .qp-ed__head::before { content: "+"; margin-right: 6px; color: var(--cd-added); font-weight: 700; }
.qp-ed__body { --lh: 20px; display: grid; grid-template-columns: 4.5ch minmax(0, 1fr); height: 380px; font: 12.5px/var(--lh) var(--bp-mono); }
.qp-gutter { overflow: hidden; padding-top: 10px; background: var(--bp-paper); border-right: 1px solid var(--bp-rule); color: var(--bp-ink-3);
  text-align: right; user-select: none; }
.qp-gutter > div > div { height: var(--lh); padding-right: .8ch; }
.qp-code { position: relative; overflow: hidden; }
.qp-code textarea, .qp-hl { position: absolute; inset: 0; margin: 0; padding: 10px 12px; border: 0; font: inherit; letter-spacing: normal;
  tab-size: 4; white-space: pre; }
.qp-hl { pointer-events: none; overflow: hidden; color: var(--bp-ink); background: none; }
.qp-hl > div { min-width: max-content; will-change: transform; }
.qp-hl > div > div { height: var(--lh); margin: 0 -12px; padding: 0 12px; }
.qp-hl .del { background: var(--cd-removed-bg); }
.qp-hl .add { background: var(--cd-added-bg); }
.qp-hl b { font-weight: 600; }
.qp-hl u { text-decoration: none; color: var(--bp-ink-3); }
.qp-hl s { text-decoration: none; color: var(--cd-changed); }
.qp-hl em { font-style: normal; color: var(--bp-ink-3); }
.qp-code textarea { z-index: 1; width: 100%; height: 100%; resize: none; overflow: auto; color: transparent; caret-color: var(--bp-ink);
  background: none; outline: none; }
.qp-code textarea::selection { background: color-mix(in srgb, var(--bp-accent) 22%, transparent); color: transparent; }
.qp-code:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bp-accent) 50%, transparent); }
.qp-lenses { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.qp-lens { position: absolute; right: 10px; display: flex; gap: 2px; height: var(--lh); align-items: center; pointer-events: auto; }
.qp-lens button { padding: 1px 7px; border: 1px solid var(--bp-rule); border-radius: 5px; background: var(--bp-sheet); cursor: pointer;
  font: 500 11px var(--bp-sans); color: var(--bp-ink-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: color var(--bp-t-hover) linear, border-color var(--bp-t-hover) linear, background-color var(--bp-t-hover) linear; }
.qp-lens button:hover { color: var(--bp-accent); border-color: var(--bp-accent); }
.qp-lens button.cd-hit { color: var(--bp-accent); border-color: var(--bp-accent); background: var(--bp-wash); }
.qp-body { height: 400px; }
.qp-body .cd-side { display: flex; flex-direction: column; }
.qp-reset { margin: auto 12px 0; padding: 10px 0 0; border: 0; background: none; color: var(--bp-accent); cursor: pointer; text-align: left;
  font: 500 13px var(--bp-sans); }
.qp-reset:hover { text-decoration: underline; }
.qp-body .cd-panel { border-top: 0; }
.cd-panel__tabs button { padding: 9px 0 8px; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; }
.cd-panel__tabs button:hover { color: var(--bp-ink); }
.cd-panel__tabs button.on { color: var(--bp-ink); box-shadow: inset 0 -1px var(--bp-ink); }
.qp-adapter { display: none; gap: 4px; }
.qp--sql .qp-adapter { display: flex; }
.qp-adapter button { padding: 2px 8px; border-radius: 5px; text-transform: none; letter-spacing: 0; }
.qp-adapter button[aria-pressed="true"] { color: var(--bp-accent); background: var(--bp-wash); box-shadow: none; }

/* ---------------------------------------------------------------------- motion
 * As on qdbd.dev. docs/javascripts/home.js adds the classes; without it, or with reduced motion, everything shows. */
q-w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes qh-rise { from { opacity: 0; transform: translateY(8px); } }
  @keyframes qh-word { from { opacity: 0; transform: translateY(.3em); } }
  .qh-hero__head > :not(h1), .qh-hero__text > * { animation: qh-rise .42s var(--bp-ease-out) both; }
  .qh-hero__head > :nth-child(2) { animation-delay: .05s; }
  .qh-hero__text > :nth-child(1) { animation-delay: .25s; }
  .qh-hero__text > :nth-child(2) { animation-delay: .3s; }
  .qh-hero h1 q-w, .qh-play h1 q-w { animation: qh-word .42s calc(var(--i) * 30ms) var(--bp-ease-out) both; }
  .qh-section h2.qh-words q-w, .qh-final > h2.qh-words q-w { opacity: 0; transform: translateY(.3em); transition: opacity .3s, transform .42s;
    transition-timing-function: var(--bp-ease-out); transition-delay: calc(var(--i) * 30ms); }
  .qh .qh-words.qh-in q-w { opacity: 1; transform: none; }
  .qh-rv { opacity: 0; transform: translateY(8px); transition: opacity .32s, transform .42s; transition-timing-function: var(--bp-ease-out);
    transition-delay: var(--d, 0s); }
  .qh-rv.qh-in { opacity: 1; transform: none; }
}
q-caret { display: inline-block; width: .55em; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--bp-accent);
  animation: qh-blink 1s steps(1) infinite; }
@keyframes qh-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ responsive */
/* side by side only at the page's full width: narrower, the ledger's code cell overflows, so the text goes on top */
@media (max-width: 1179px) {
  .qh-gap__body { grid-template-columns: minmax(0, 1fr); }
  .qh-gap__text > .qh-more { padding-bottom: 0; }
}
@media (max-width: 1080px) {
  .cd-win__body { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .qh-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .qh-how__steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .qh-how__step + .qh-how__step::before { content: "↓"; left: 28px; top: -30px; }
  .qh-hero { padding-top: 32px; }
  .qh-section { padding-top: 88px; }
  .qh-fig { --qh-ext: 40px; padding: 20px; }
  .qh-ways { grid-template-columns: minmax(0, 1fr); }
  .qh-ways > div, .qh-ways > div + div { padding: 18px 0; border-left: 0; }
  .qh-ways > div + div { border-top: 1px solid var(--bp-rule); }
}
/* phones: the sidebar and the results tell the story; the side-by-side code doesn't fit */
@media (max-width: 720px) {
  .cd-win__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cd-side { border-right: 0; }
  .cd-side__btns { opacity: 1; }
  .cd-main { grid-template-rows: 320px; }
  .cd-diff { display: none; }
  .cd-chapters { grid-template-columns: minmax(0, 1fr); }
  .cd-panel__tabs span:not(.on) { display: none; }
  .qp-editors { grid-template-columns: minmax(0, 1fr); }
  .qp-ed + .qp-ed { border-left: 0; border-top: 1px solid var(--bp-rule); }
  .qp-ed__body { height: 260px; }
  .qp-body { height: auto; }
  .qp-body .cd-panel { height: 340px; border-top: 1px solid var(--bp-rule-strong); }
}
@media (max-width: 600px) {
  .qh-wrap { --qh-pad: 16px; }
  .qh-hero__text { max-width: calc(16px * 34); }
  .qh-lead, .qh-sub { font-size: 16px; }
  .qh-installs, .qh-installs--center { width: 100%; grid-template-columns: minmax(0, 1fr); }
  /* the ledger: one block per CTE, each answer on its own line after its label */
  .qh-gap__fig { padding: 4px 16px 16px; }
  .qh-gap__t { display: flex; flex-direction: column; }
  .qh-gap__t thead, .qh-gap__t colgroup { display: none; }
  .qh-gap__t tbody { display: block; }
  .qh-gap__t caption { order: 1; display: block; }
  .qh-gap__t tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--bp-rule); }
  .qh-gap__t tbody tr.qh-gap__hit { margin: 0 -16px; padding: 12px 16px; background: color-mix(in srgb, var(--cd-changed) 9%, var(--bp-sheet));
    box-shadow: inset 3px 0 var(--cd-changed); }
  .qh-gap__t tbody tr:last-child { border-bottom: 0; }
  .qh-gap__t tbody th { display: block; padding: 0 0 4px; border: 0; }
  .qh-gap__t td { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 8px; padding: 2px 0; border: 0; }
  .qh-gap__t td > * { grid-column: 2; justify-self: start; }
  .qh-gap__t td::before { content: attr(data-label); grid-row: 1 / span 2; font: 400 12px/1.65 var(--bp-sans); color: var(--bp-ink-3); }
  .qh-gap__t .qh-gap__hit > * { background: none; box-shadow: none; }
  .qh-reqs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .qh-btn { width: 100%; justify-content: center; }
  .qh-install code { font-size: 12.5px; }
}

/* the playground page (overrides/playground.html) */
.qh-section.qh-play { padding-top: 48px; }
.qh-play h1 { font-size: clamp(32px, 4vw, 48px); max-width: 22ch; }