/* /product: renderings of the product, drawn in its own light theme (the
   tokens of web/src/ds/tokens.css under prefers-color-scheme: light, mapped
   to --a-*) at a fixed 1120px and scaled to the column. */
.app-root {
  --a-bg: #ffffff; --a-panel: #f4f5f7; --a-panel-2: #f0f2f5; --a-line: #d9dde3;
  --a-fg: #1c1f24; --a-muted: #5d6470; --a-accent: #1860c0; --a-accent-soft: rgba(31,111,214,.1);
  --a-str: #137a55; --a-fn: #6e3fc9; --a-warn-text: #7d4e00; /* the theme's inks for text: a string, a function, a warning; the --m* series are fills */
  --a-pos: #1a7f37; --a-pos-soft: rgba(26,127,55,.1); --a-neg: #cf222e; --a-neg-text: #a40e26; --a-neg-soft: rgba(207,34,46,.1);
  --a-on-accent: #ffffff; --a-edge: #b9c0ca; --a-port: #8a919c; --a-bubble: #f0f2f5;
  --code-keyword: var(--a-accent); --code-function: var(--a-fn); --code-string: var(--a-str); --code-number: var(--m5);
  --code-property: var(--a-fn); --code-comment: var(--a-muted); --code-prompt: var(--a-pos); --code-lit: var(--a-accent-soft);
  --m0: #2a78d6; --m1: #eb6834; --m2: #1baf7a; --m3: #eda100; --m4: #e87ba4; --m5: #4a3aa7; --m6: #0e8fa3; --m7: #a8621a;
}

.p-hero { padding: var(--hero-top) 0 var(--sp-6); }
.p-hero h1 { font-size: var(--fs-h1); max-width: 26ch; }
.p-hero .lede { max-width: 56ch; }
.p-toc { list-style: none; padding: 0; margin: var(--gap-follow) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p-toc a { display: inline-block; font-family: var(--mono); font-size: var(--fs-xs); padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--muted); background: var(--surface); }
.p-toc a:hover { color: var(--accent); border-color: var(--accent); }

.render { padding: var(--render-y) 0; border-bottom: 1px solid var(--border); }
.render-head { display: grid; gap: 10px; margin-bottom: var(--sp-6); }
@media (min-width: 900px) { .render-head { grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: end; } }
.render-head h2 { font-size: var(--fs-h2); }
.render-head p { color: var(--muted); max-width: 56ch; }
.legend { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: 10px var(--sp-8); }
@media (min-width: 720px) { .legend { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .legend { grid-template-columns: repeat(4, 1fr); } }
.legend li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-2); font-size: var(--fs-md); color: var(--muted); line-height: var(--lh-snug); }
.legend b { color: var(--text); font-weight: 500; }
.legend .pin { position: static; }

/* the frame: a fixed-width app scaled to fit (product.js sets --s) */
.frame { position: relative; --s: 1; height: calc(var(--h, 640px) * var(--s)); }
.frame > .app { position: absolute; left: 0; top: 0; width: 1120px; transform: scale(var(--s)); transform-origin: 0 0; }
.no-js .frame { height: auto; overflow-x: auto; }
.no-js .frame > .app { position: relative; transform: none; }

.app { background: var(--a-bg); color: var(--a-fg); border: 1px solid var(--a-edge); border-radius: 12px; overflow: hidden;
  font-family: var(--sans); font-size: 12px; line-height: 1.35;
  box-shadow: var(--shadow-fig); position: relative; }
.app .mono, .app code { font-family: var(--mono); }
.a-top { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--a-line); }
.a-top .brand-t { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.a-top .sub { color: var(--a-muted); }
.a-live { display: inline-flex; align-items: center; gap: 6px; }
.a-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-pos); box-shadow: 0 0 0 3px var(--a-pos-soft); }
.a-top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--a-muted); font-family: var(--mono); font-size: 11px; }
.a-chip { padding: 2px 8px; border: 1px solid var(--a-line); border-radius: 5px; color: var(--a-fg); }
.a-chip.acc { border-color: var(--a-accent); color: var(--a-accent); }
.a-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
.a-panel { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; }
.a-btn { display: block; width: 100%; padding: 7px 10px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-panel-2); color: var(--a-fg); text-align: center; font-size: 12px; }
.a-btn.on { border-color: var(--a-accent); box-shadow: inset 0 0 0 1px var(--a-accent); }
.a-btn small { color: var(--a-muted); font-family: var(--mono); margin-left: 6px; }
.a-btn.go { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-on-accent); font-weight: 600; }
.pos { color: var(--a-pos); } .neg { color: var(--a-neg-text); } .mut { color: var(--a-muted); } .acc { color: var(--a-accent); } .wt { color: var(--a-warn-text); }
.dotg { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-pos); margin-right: 6px; vertical-align: 1px; }

/* tables inside the app */
.a-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.a-table th { text-align: left; font-weight: 400; color: var(--a-muted); padding: 6px 8px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.a-table td { padding: 5px 8px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.a-table tr.w-neg td { background: var(--a-neg-soft); }
.a-table tr.w-pos td { background: var(--a-accent-soft); }
.a-table tr.sel td { background: var(--a-accent-soft); box-shadow: inset 0 1px 0 var(--a-accent), inset 0 -1px 0 var(--a-accent); }
.a-table td.r, .a-table th.r { text-align: right; }

/* the DAG */
.dagsvg { display: block; width: 100%; height: auto; }
.dagsvg .e { fill: none; stroke: var(--a-edge); stroke-width: 1.3; }
.dagsvg .e.hot { stroke: var(--a-accent); stroke-width: 2; }
.dagsvg .e.lit { stroke: var(--a-pos); stroke-width: 2; }
.dagsvg .dnode rect.b { fill: var(--a-panel); stroke: var(--a-line); }
.dagsvg .dnode.sel rect.b { stroke: var(--a-accent); stroke-width: 1.5; }
.dagsvg .dnode.lit rect.b { stroke: var(--a-pos); stroke-width: 1.5; }
.dagsvg .dnode.dim { opacity: .35; }
.dagsvg .k { font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; fill: var(--a-muted); }
.dagsvg .n { font-family: var(--sans); font-size: 10.5px; font-weight: 600; fill: var(--a-fg); }
.dagsvg .ok { fill: var(--a-pos); }
.dagsvg .port { fill: var(--a-bg); stroke: var(--a-port); }
.dagsvg .pl { fill: var(--a-accent); filter: drop-shadow(0 0 3px rgba(31,111,214,.55)); }
.dagsvg .heat { font-family: var(--mono); font-size: 7.5px; fill: var(--m7); }

/* numbered callouts pinned on a rendering */
.pin { position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 11px/22px var(--sans); text-align: center; box-shadow: 0 0 0 4px rgba(43, 76, 126, 0.25), 0 4px 10px rgba(0,0,0,.3); }
.app .pin { transform: translate(-50%, -50%) scale(calc(1 / var(--s))); }
.no-js .app .pin { display: none; }

/* 1. pipeline */
.pp { display: grid; grid-template-columns: 180px 1fr 340px; grid-template-rows: 602px; height: 602px; }
.pp > div { min-height: 0; overflow: hidden; }
.pp-left { border-right: 1px solid var(--a-line); padding: 12px; display: grid; align-content: start; gap: 7px; }
.pp-left .a-label { margin: 6px 0 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-family: var(--mono); font-size: 11px; }
.kv span:nth-child(odd) { color: var(--a-muted); }
.slider { position: relative; height: 4px; margin: 10px 0 4px; border-radius: 2px; background: var(--a-line); }
.slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-radius: 2px; background: var(--a-accent); }
.slider b { position: absolute; left: 34%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--a-fg); }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--a-muted); }
.pp-mid { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.pp-tools { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--a-line); align-items: center; }
.pp-tools .a-chip { font-size: 11px; }
.pp-tools .hint { color: var(--a-muted); font-size: 11px; margin-left: 8px; }
.pp-dag { padding: 6px 8px; min-height: 0; overflow: hidden; }
.pp-dag .dagsvg { height: 100%; }
.pp-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--a-line); }
.pp-strip div { padding: 9px 10px; border-right: 1px solid var(--a-line); }
.pp-strip div:last-child { border-right: 0; }
.pp-strip b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; margin: 3px 0 1px; }
.pp-strip small { color: var(--a-muted); font-family: var(--mono); font-size: 9.5px; }
.pp-right { border-left: 1px solid var(--a-line); display: grid; grid-template-rows: auto auto 1fr; min-width: 0; }
.pp-models { padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 5px 12px; border-bottom: 1px solid var(--a-line); font-size: 11.5px; }
.pp-models .a-label { width: 100%; }
.pp-watch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--a-line); }
.pp-watch .a-panel { padding: 8px 10px; }
.pp-watch b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; margin: 2px 0; }
.pp-watch small { color: var(--a-muted); font-size: 10px; }
.pp-rows { padding: 6px 4px; overflow: hidden; }
.pp-rows .cap { padding: 2px 8px 4px; color: var(--a-muted); font-size: 11px; }
.flashrow td { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { 0% { background: var(--a-accent-soft); } 100% { background: transparent; } }

/* 2. workspace */
.ws { display: grid; grid-template-columns: 200px 1fr 300px; grid-template-rows: 1fr 168px; height: 640px; }
.ws-side { grid-row: 1 / 3; border-right: 1px solid var(--a-line); padding: 12px; display: grid; align-content: start; gap: 8px; }
.ws-side .a-label { margin-top: 8px; }
.ws-link { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; background: var(--a-panel); border: 1px solid var(--a-line); font-size: 11.5px; }
.ws-link i { width: 3px; height: 14px; border-radius: 2px; }
.ws-stage { padding: 4px 8px; border-left: 2px solid var(--a-line); color: var(--a-muted); font-size: 11.5px; }
.ws-stage.on { border-color: var(--a-accent); color: var(--a-fg); }
.ws-mid { padding: 12px 14px; display: grid; align-content: start; gap: 8px; overflow: hidden; }
.ws-card { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; overflow: hidden; }
.ws-card.sel { border-color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-accent); }
.ws-card header { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; }
.ws-card header .st { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--a-fn); }
.ws-card header .rw { margin-left: auto; font-family: var(--mono); color: var(--a-muted); font-size: 11px; }
.ws-card .a-table { border-top: 1px solid var(--a-line); }
.ws-div { display: flex; align-items: center; gap: 8px; color: var(--a-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.ws-div::after { content: ""; flex: 1; height: 1px; background: var(--a-line); }
.ws-insp { border-left: 1px solid var(--a-line); padding: 12px; display: grid; align-content: start; gap: 10px; }
.cond { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.cond span { padding: 5px 7px; border: 1px solid var(--a-line); border-radius: 5px; background: var(--a-panel-2); font-family: var(--mono); font-size: 10.5px; text-align: center; }
.cond span.op { border: 0; background: none; color: var(--a-accent); }
.casetab { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; }
.casetab td { border: 1px solid var(--a-line); padding: 5px 7px; }
.casetab td:first-child { color: var(--a-muted); width: 44px; }
.bar2 { height: 6px; border-radius: 3px; background: var(--a-line); overflow: hidden; }
.bar2 i { display: block; height: 100%; background: var(--m7); }
.ws-sql { grid-column: 2 / 4; border-top: 1px solid var(--a-line); padding: 10px 14px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--a-fg); white-space: pre; overflow: hidden; }
.ws-sql .code-lit { outline: 1px solid rgba(31,111,214,.4); }

/* 3. review */
.rv { display: grid; grid-template-columns: 1fr 340px; height: 470px; }
.rv-main { padding: 14px var(--sp-4); display: grid; align-content: start; gap: 12px; }
.rv-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rv-sum .a-panel { padding: 9px 11px; }
.rv-sum b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; margin-top: 3px; }
.rv-side { border-left: 1px solid var(--a-line); padding: 14px; display: grid; align-content: start; gap: 12px; }
.chain { display: grid; gap: 6px; }
.chain div { display: flex; justify-content: space-between; padding: 6px 9px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-panel); }
.prog { height: 6px; border-radius: 3px; background: var(--a-line); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--a-accent); transition: width 2.6s cubic-bezier(.3,.6,.3,1); }
.play .prog i { width: 100%; }
.status-steps { display: grid; gap: 6px; font-family: var(--mono); font-size: 11px; }
.status-steps span { display: flex; gap: 8px; align-items: center; color: var(--a-muted); }
.status-steps span i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--a-muted); }
.status-steps span.done { color: var(--a-fg); } .status-steps span.done i { background: var(--a-pos); border-color: var(--a-pos); }

/* 4. provenance */
.pv { display: grid; grid-template-columns: 1fr 380px; height: 560px; }
.pv-dag { padding: 10px; border-right: 1px solid var(--a-line); display: grid; grid-template-rows: auto 1fr; }
.pv-walk { padding: 12px; display: grid; align-content: start; gap: 0; overflow: hidden; }
.pv-step { position: relative; padding: 0 0 12px var(--sp-5); }
.pv-step::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: -6px; width: 1px; background: var(--a-line); }
.pv-step:last-child::before { display: none; }
.pv-step::after { content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--a-bg); border: 1.5px solid var(--a-pos); }
.pv-step h3 { margin: 0 0 5px; font-size: 11.5px; font-weight: 600; line-height: inherit; letter-spacing: normal; display: flex; gap: 8px; align-items: baseline; }
.pv-step h3 .a-label { font-size: 9px; }
.pv-step .a-table { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 6px; }
.pv-step .found { color: var(--a-muted); font-family: var(--mono); font-size: 10px; margin-top: 3px; }

/* 5. trace */
.tr { height: 380px; display: grid; grid-template-columns: 250px 1fr 1fr 250px; }
.tr > div { padding: 12px; border-right: 1px solid var(--a-line); display: grid; align-content: start; gap: 8px; }
.tr > div:last-child { border-right: 0; }
.tr .a-label b { color: var(--a-fg); }
.tr pre { margin: 0; padding: 9px 10px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 6px; font-size: 10.5px; line-height: 1.5; white-space: pre-wrap; color: var(--a-fg); }
.wave { display: grid; gap: 5px; }
.wave .op { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 9px; background: var(--a-panel); border: 1px solid var(--a-line); border-left: 3px solid var(--m0); border-radius: 6px; }
.wave .op small { grid-column: 1 / -1; font-family: var(--mono); color: var(--a-muted); font-size: 10px; }
.wave .op b { font-weight: 600; font-size: 11.5px; }
.wave .op em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--a-muted); }
.verdict { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 6px; }
.verdict .pos { font-family: var(--mono); font-size: 10.5px; }

/* 6. tenants */
.tn { display: grid; grid-template-columns: 1fr 360px; height: 500px; }
.tn-list { padding: 12px 14px; border-right: 1px solid var(--a-line); overflow: hidden; }
.tn-list .a-table td .sp { display: inline-block; width: 70px; height: 14px; vertical-align: middle; }
.tn-list .a-table td .sp polyline { fill: none; stroke: var(--a-accent); stroke-width: 1.4; }
.tn-one { padding: 14px; display: grid; align-content: start; gap: 10px; }
.tn-one h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.meter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meter .a-panel { padding: 8px 10px; }
.meter b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 500; margin-top: 2px; }

/* 7. agents + wire */
.duo { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .duo { grid-template-columns: 1.15fr 1fr; } }
.duo .frame { --h: 560px; }
.ag { height: 560px; display: grid; grid-template-rows: 38px 1fr 54px; }
.ag-body { padding: var(--sp-4) var(--sp-5); display: grid; align-content: start; gap: 10px; overflow: hidden; }
.ag .msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.ag .msg.u { justify-self: end; background: var(--a-bubble); }
.ag .msg.b { justify-self: start; background: transparent; padding-left: 0; }
.ag .call { border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel); overflow: hidden; }
.ag .call header { display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: 11.5px; }
.ag .call header .srv { font-family: var(--mono); font-size: 10px; color: var(--a-accent); text-transform: uppercase; letter-spacing: .06em; }
.ag .call header .ok { margin-left: auto; color: var(--a-pos); font-family: var(--mono); font-size: 10.5px; }
.ag .call pre { margin: 0; padding: 7px 10px; border-top: 1px solid var(--a-line); font-size: 10.5px; line-height: 1.5; color: var(--a-fg); }
.ag .call.yours header .srv { color: var(--a-warn-text); }
.ag-input { border-top: 1px solid var(--a-line); padding: 10px 14px; }
.ag-input div { height: 34px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-panel); color: var(--a-muted); padding: 8px 12px; }
.ag-body > * { opacity: 0; transform: translateY(5px); transition: opacity .35s ease calc(var(--i) * .6s), transform .35s ease calc(var(--i) * .6s); }
.play .ag-body > * { opacity: 1; transform: none; }
.pg { height: 560px; display: grid; grid-template-rows: 38px 1fr; }
.pg pre { margin: 0; padding: 14px var(--sp-4); font-size: 11.5px; line-height: 1.55; color: var(--a-fg); white-space: normal; overflow: hidden; }
.pg pre .mut { color: var(--a-muted); }
.pg .tl { display: block; white-space: pre; opacity: 0; transition: opacity .2s ease calc(var(--i) * .12s + .3s); }
.play .pg .tl { opacity: 1; }

.p-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--faint); }


/* ---------------------------------------------------------------
   Phone layouts. When a rendering's column is narrow, product.js draws
   the app at the column's width, unscaled (.narrow), and each screen stacks
   its panels in one column: full size on an iPhone instead of a third.
   Graphs keep their width and pan sideways.
   --------------------------------------------------------------- */
.frame.narrow .a-top .right, .frame.narrow .pp-tools .hint { display: none; }
.frame.narrow .a-top .sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.frame.narrow .pp, .frame.narrow .ws, .frame.narrow .rv, .frame.narrow .pv, .frame.narrow .tn, .frame.narrow .tr { display: block; height: auto; }
.frame.narrow .pp > div, .frame.narrow .pv > div, .frame.narrow .tn > div, .frame.narrow .rv > div, .frame.narrow .tr > div, .frame.narrow .ws > div { border: 0; border-bottom: 1px solid var(--a-line); }
.frame.narrow .pp > div { overflow: visible; }
.pan { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.frame.narrow .pan .dagsvg { width: 640px; height: auto; }
.frame.narrow .pan::after { content: "swipe the graph →"; display: block; padding: 4px 2px 0; font-family: var(--mono); font-size: 10px; color: var(--a-muted); }
/* pipeline: the transaction you ran, the graph, freshness, the view */
.frame.narrow .pp-left { display: grid; grid-template-columns: 1fr 1fr; }
.frame.narrow .pp-left > * { grid-column: 1 / -1; }
.frame.narrow .pp-left .a-btn { grid-column: auto; }
.frame.narrow .pp-left .a-btn:nth-of-type(n+6), .frame.narrow .pp-left .slider, .frame.narrow .pp-left .ticks,
.frame.narrow .pp-left > :nth-child(n+9) { display: none; }
.frame.narrow .pp-mid { display: block; }
.frame.narrow .pp-strip { grid-template-columns: repeat(3, 1fr); }
.frame.narrow .pp-strip div:nth-child(3n) { border-right: 0; }
.frame.narrow .pp-strip div:nth-child(-n+3) { border-bottom: 1px solid var(--a-line); }
.frame.narrow .pp-rows tbody tr:nth-child(n+9) { display: none; }
/* workspace: where it sits as chips, then the steps, the step, the SQL */
.frame.narrow .ws-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.frame.narrow .ws-side .a-label { width: 100%; margin-top: 4px; }
.frame.narrow .ws-side .ws-stage { border-left-width: 2px; }
.frame.narrow .ws-card:not(.sel) { font-size: 11.5px; }
.frame.narrow .ws-sql { white-space: pre-wrap; font-size: 10.5px; }
/* review, provenance, trace, customers */
.frame.narrow .rv-sum { grid-template-columns: 1fr 1fr; }
.frame.narrow .rv-main .a-table tbody tr:nth-child(n+5) { display: none; }
.frame.narrow .pv-walk .pv-step:nth-child(5) { display: none; }
.frame.narrow .tr > div { padding-bottom: 14px; }
.frame.narrow .tn-list .a-table :is(th, td):is(:nth-child(5), :nth-child(6)) { display: none; }
.frame.narrow .ws-card.sel .a-table :is(th, td):nth-child(2) { display: none; }
.frame.narrow .tn-list tbody tr:nth-child(n+9) { display: none; }
/* agent and psql */
.frame.narrow .ag, .frame.narrow .pg { height: auto; }
.frame.narrow .ag .msg { max-width: 94%; font-size: 12.5px; }
.frame.narrow .ag-body > * { transition-delay: calc(var(--i) * .25s); }
.frame.narrow .pg .tl { white-space: pre-wrap; transition-delay: calc(var(--i) * .05s); }
.frame.narrow .ag .call pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.frame.narrow .pg pre { font-size: 10.5px; }
.frame.narrow .pg .tl.more { display: none; }
/* The renderings are measured and pinned by product.js: with reduced motion nothing
   in them may be mid-transition when it measures, so transitions are off, not shortened. */
@media (prefers-reduced-motion: reduce) {
  /* biome-ignore lint/complexity/noImportantStyles: the renderings' transitions are off outright under reduced motion */
  .app *, .app { transition: none !important; animation: none !important; }
}
@media (max-width: 639px) {
  .render-head { margin-bottom: var(--sp-5); }
  .p-toc a { padding: 9px 12px; }
}