/* Insights (js/da-insights.js), rs-wire 2026-10-18: the Riverside-style page from .orch/qa/flow-design/riverside-review/insights.html.
   Uses the shell's rs-* tokens and classes (css/rs-shell.css); page classes are ins-*. White panels with hairlines, 16px between
   panels, 12px inside; type 20/15/13/12 at 400/500; selection is a tint fill. Columns: 360px | 1fr on every row. */
:root .ins-page { --ins-col: 360px; box-sizing: border-box; padding-bottom: var(--rs-s16); display: grid; gap: var(--rs-gap); min-width: 0;
  font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); color: var(--rs-tx); }
:where(.ins-page) :where(p, h1, h2, h3, dl, dd, ul) { margin: 0; padding: 0; }
:where(.ins-page) ul { list-style: none; }
:where(.ins-page) button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* the page title and section titles at the shell's sizes (older page-head rules set bigger ones) */
:root .ins-page h1.rs-h1 { font: var(--rs-w-med) var(--rs-fs-title)/1.3 var(--rs-font); letter-spacing: -.01em; margin: 0; }
:root .ins-page h2.rs-h2 { font: var(--rs-w-med) var(--rs-fs-sec)/1.4 var(--rs-font); letter-spacing: -.005em; margin: 0; }
:root .ins-page .ins-sside h2.rs-h1 { font-size: var(--rs-fs-title); }
:root .ins-page .ins-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root .ins-page .ins-body { display: grid; gap: var(--rs-gap); min-width: 0; }
:root .ins-page .ins-row { display: grid; grid-template-columns: var(--ins-col) minmax(0, 1fr); gap: var(--rs-gap); align-items: stretch; min-width: 0; }
:root .ins-page .ins-row.one { grid-template-columns: minmax(0, 1fr); }
:root .ins-page :is(.ins-dt h2, .ins-nx h3, .ins-vt, .ins-why, .ins-nxt, .ins-sside h2, .ins-sside > p, .ins-empty p, .ins-alts span, .ins-err p) { text-wrap: pretty; }
:root .ins-page .ins-acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rs-s12); }

/* page head: title + source line, range on the right */
:root .ins-page .ins-head { display: flex; align-items: center; gap: var(--rs-s16); min-width: 0; }
:root .ins-page .ins-tbox { min-width: 0; flex: 1; }
:root .ins-page .ins-tbox .rs-cap { margin-top: 2px; }
:root .ins-page .ins-range { flex: none; }
:root .ins-page .ins-range:empty { display: none; }
:root .ins-page .ins-srcl { display: inline-flex; align-items: center; gap: 4px; }
:root .ins-page .ins-srcl i { width: 6px; height: 6px; border-radius: 50%; background: var(--rs-pos); }
:root .ins-page .ins-srcl.off i { background: var(--rs-tx-3); }

/* section heading: title + caption, actions or legend on the right */
:root .ins-page .ins-sh { display: flex; align-items: flex-start; gap: var(--rs-s16); min-width: 0; }
:root .ins-page .ins-sh > div:first-child { min-width: 0; }
:root .ins-page .ins-sh .rs-cap { margin-top: 4px; }
:root .ins-page .ins-sh .ins-r { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--rs-s16); }
:root .ins-page .ins-lgs { margin-left: auto; display: flex; gap: var(--rs-s16); flex: none; }
:root .ins-page .ins-lg { display: inline-flex; align-items: center; gap: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; }
:root .ins-page .ins-lg i { width: 12px; height: 2px; border-radius: 1px; }
:root .ins-page .ins-lg .la { background: var(--rs-peri); }
:root .ins-page .ins-lg .lb { background: var(--rs-peri-light); }
:root .ins-page .ins-lg .pk { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-peri-deep); }

/* the focal point: the channel's headline numbers */
:root .ins-page .ins-hl { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: var(--rs-s16); }
:root .ins-page .ins-hl .ins-fig { padding: 0 var(--rs-s16); min-width: 0; }
:root .ins-page .ins-hl .ins-fig:first-child { padding-left: 0; }
:root .ins-page .ins-hl .ins-fig + .ins-fig { box-shadow: inset 1px 0 0 var(--rs-line-2); }
:root .ins-page .ins-fig dt { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .ins-page .ins-fig .ins-n { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); letter-spacing: -.01em; line-height: 1.4; margin-top: 4px; font-variant-numeric: tabular-nums; }
:root .ins-page .ins-fig .ins-c { display: flex; align-items: center; gap: var(--rs-s8); margin-top: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .ins-page .ins-dl { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 4px; border-radius: 4px; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); background: var(--rs-pos-soft); color: var(--dk-tx-rs-pos, var(--rs-pos)); font-variant-numeric: tabular-nums; }
:root .ins-page .ins-dl .ins-i { width: 12px; height: 12px; stroke-width: 2.2; }
:root .ins-page .ins-dl.dn { background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }

/* quieter figures for one video: an inset strip, section-size numbers */
:root .ins-page .ins-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--rs-s16); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .ins-page .ins-figs .ins-fig { padding: var(--rs-s12) var(--rs-s16); min-width: 0; }
:root .ins-page .ins-figs .ins-fig + .ins-fig { box-shadow: inset 1px 0 0 var(--rs-line); }
:root .ins-page .ins-figs .ins-n { font-size: var(--rs-fs-sec); }

/* charts: thin lines, periwinkle + light periwinkle, caption-size labels */
:root .ins-page .ins-plot { position: relative; margin-top: var(--rs-s16); height: 200px; min-width: 0; }
:root .ins-page .ins-plot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
:root .ins-page .ins-gl { stroke: var(--rs-line); stroke-width: 1; }
:root .ins-page .ins-gl.base { stroke: var(--rs-line-2); }
:root .ins-page .ins-ax { font-size: var(--rs-fs-cap); fill: var(--rs-tx-3); font-variant-numeric: tabular-nums; }
:root .ins-page .ins-ar { fill: var(--dk-t-8799c3a12, rgba(135,153,195,.12)); }
:root .ins-page .ins-la { fill: none; stroke: var(--rs-peri); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
:root .ins-page .ins-lb { fill: none; stroke: var(--rs-peri-light); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
:root .ins-page .dots .ins-lb { stroke-dasharray: 2 4; }
:root .ins-page .ins-pkd { fill: #fff; stroke: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); stroke-width: 1.5; }
:root .ins-page .ins-pkt { font-size: var(--rs-fs-cap); fill: var(--rs-tx-2); }
:root .ins-page .ins-pub { fill: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .ins-page .ins-hov { position: absolute; top: 0; bottom: 0; cursor: crosshair; outline: none; }
:root .ins-page .ins-hov:focus-visible { box-shadow: 0 0 0 2px var(--rs-peri-soft); border-radius: 4px; }
:root .ins-page .ins-vline { position: absolute; top: 0; width: 1px; background: var(--rs-line-2); pointer-events: none; }
:root .ins-page .ins-hd { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 2px var(--rs-peri-deep), 0 0 0 4px rgba(76,95,146,.14); pointer-events: none; }
:root .ins-page .ins-tip { position: absolute; z-index: 4; padding: var(--rs-s8) var(--rs-s12); border-radius: var(--rs-r-sm); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line), var(--rs-pop-shadow); font-size: var(--rs-fs-cap); line-height: 1.5; color: var(--rs-tx-2); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
:root .ins-page .ins-tip b { display: block; color: var(--rs-tx); font-weight: var(--rs-w-med); font-variant-numeric: tabular-nums; }
:root .ins-page .ins-tip .p { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .ins-page .ins-plot [hidden] { display: none; }
:root .ins-page .ins-wait { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--rs-s8); height: 32px; padding: 0 var(--rs-s12); border-radius: var(--rs-r-pill); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; }
:root .ins-page .ins-wait .ins-i { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }

/* your videos: a list; the selected row is a tint fill */
:root .ins-page .ins-vids { display: flex; flex-direction: column; }
:root .ins-page .ins-sort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--rs-s16); }
:root .ins-page .ins-sort button { height: 32px; border-radius: var(--rs-r-pill); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx-2); transition: background var(--rs-t), color var(--rs-t); }
:root .ins-page .ins-sort button:hover { color: var(--rs-tx); }
:root .ins-page .ins-sort button[aria-checked="true"] { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .ins-page .ins-sort button:focus-visible, :root .ins-page .ins-vr:focus-visible, :root .ins-page .ins-mom:focus-visible, :root .ins-page .ins-alts button:focus-visible { outline: 2px solid var(--rs-peri); outline-offset: 1px; }
:root .ins-page .ins-vlist { margin: var(--rs-s8) calc(-1 * var(--rs-s8)) 0; display: grid; gap: 4px; }
:root .ins-page .ins-vr { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--rs-s12); align-items: center; padding: var(--rs-s8); border-radius: var(--rs-r-inner); cursor: pointer; outline: none; transition: background var(--rs-t); }
:root .ins-page .ins-vr:hover { background: var(--rs-inset); }
:root .ins-page .ins-vr[aria-selected="true"] { background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1.5px var(--rs-peri); }
:root .ins-page .ins-th { position: relative; width: 80px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--rs-line); background: var(--rs-raise); }
:root .ins-page .ins-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ins-page .ins-vm { min-width: 0; }
:root .ins-page .ins-vt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
:root .ins-page .ins-vs { display: block; margin-top: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .ins-page .ins-vr[aria-selected="true"] .ins-vs { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }

/* the selected video */
:root .ins-page .ins-dt h2 { overflow: hidden; text-overflow: ellipsis; }
:root .ins-page .ins-ret { margin-top: var(--rs-s24); }
:root .ins-page .ins-ret .ins-plot { height: 168px; }
/* the cut made in Volare, beside its curve (framed like Review's player: 16:9, 8px radius) */
:root .ins-page .ins-retw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-gap); align-items: start; }
:root .ins-page .ins-retw.has-vid { grid-template-columns: minmax(0, 1fr) 240px; }
:root .ins-page .ins-player { position: relative; margin-top: var(--rs-s16); aspect-ratio: 16 / 9; border-radius: var(--rs-r-sm); overflow: hidden; background: #111; box-shadow: 0 0 0 1px var(--rs-line); }
:root .ins-page .ins-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
:root .ins-page .ins-play { position: absolute; right: var(--rs-s8); bottom: var(--rs-s8); }
:root .ins-page .ins-phead { position: absolute; top: 16px; height: calc(100% - 40px); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--rs-peri-deep); pointer-events: none; }
:root .ins-page .ins-sub { display: flex; align-items: center; gap: var(--rs-s16); font-weight: var(--rs-w-med); }
:root .ins-page .ins-pins { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 3; }
:root .ins-page .ins-pin { position: absolute; top: 0; height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--rs-s8) 0 4px; border-radius: var(--rs-r-xs); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx); white-space: nowrap; transition: background var(--rs-t), box-shadow var(--rs-t); }
:root .ins-page .ins-pin:hover { box-shadow: inset 0 0 0 1px var(--rs-peri); }
:root .ins-page .ins-pin .ins-i { width: 12px; height: 12px; stroke-width: 2; }
:root .ins-page .ins-pin.ins-best { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .ins-page .ins-pin.ins-drop { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .ins-page .ins-pin[aria-pressed="true"] { background: var(--rs-sel); box-shadow: none; }
:root .ins-page .ins-moms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-s12); margin-top: var(--rs-s16); }
:root .ins-page .ins-mom { display: flex; flex-direction: column; width: 100%; padding: var(--rs-s12); text-align: left; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); transition: background var(--rs-t), box-shadow var(--rs-t); }
:root .ins-page .ins-mom[aria-pressed="true"] { background: var(--rs-sel); box-shadow: none; }
:root .ins-page .ins-mk { display: flex; align-items: center; gap: 4px; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .ins-page .ins-mk .ins-i { width: 12px; height: 12px; stroke-width: 2; }
:root .ins-page .ins-mom.ins-best .ins-mk .ins-i { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .ins-page .ins-mom.ins-drop .ins-mk .ins-i { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .ins-page .ins-why { display: block; margin-top: 4px; font-weight: var(--rs-w-med); }
:root .ins-page .ins-nxt { display: flex; gap: var(--rs-s8); align-items: flex-start; margin-top: var(--rs-s8); padding-top: var(--rs-s8); border-top: 1px solid var(--rs-line); color: var(--rs-tx); }
:root .ins-page .ins-nxt .ins-i { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); margin-top: 1px; }
:root .ins-page .ins-calm { margin-top: var(--rs-s16); padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx-2); }

/* next video + what Volare learned */
:root .ins-page .ins-nx { margin-top: var(--rs-s16); padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); transition: opacity var(--rs-t) var(--rs-ease), transform var(--rs-t) var(--rs-ease); }
:root .ins-page .ins-nx.out { opacity: 0; transform: translateY(4px); }
:root .ins-page .ins-nx p { color: var(--rs-tx-2); margin-top: 4px; }
:root .ins-page .ins-nx .ins-acts { margin-top: var(--rs-s12); gap: var(--rs-s8); }
:root .ins-page .ins-alth { margin-top: var(--rs-s16); }
:root .ins-page .ins-alts { margin: var(--rs-s8) calc(-1 * var(--rs-s8)) 0; display: grid; gap: 4px; }
:root .ins-page .ins-alts button { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--rs-s8); width: 100%; text-align: left; padding: var(--rs-s8); border-radius: var(--rs-r-sm); color: var(--rs-tx-2); transition: background var(--rs-t), color var(--rs-t); }
:root .ins-page .ins-alts button:hover { background: var(--rs-inset); color: var(--rs-tx); }
:root .ins-page .ins-alts .ins-i { color: var(--rs-tx-3); margin-top: 1px; }
:root .ins-page .ins-empty { margin-top: var(--rs-s16); padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); }
:root .ins-page .ins-empty p + p { margin-top: 4px; color: var(--rs-tx-2); }
:root .ins-page .ins-empty .rs-tbtn { margin: var(--rs-s8) 0 0 -4px; }
:root .ins-page .rs-tbtn .ins-i { width: 12px; height: 12px; }

/* coming soon: the creator's own poster (or a sample scene) with the retention line drawn on it */
:root .ins-page .ins-soon { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--rs-s24); align-items: center; }
:root .ins-page .ins-art { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rs-r-inner); overflow: hidden; background: #111; box-shadow: 0 0 0 1px var(--rs-line); container-type: inline-size; }
:root .ins-page .ins-art.is-empty { background: var(--rs-inset); }
:root .ins-page .ins-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root .ins-page .ins-veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--dk-b-f7f6f2a20, rgba(247,246,242,.2)), var(--dk-b-f7f6f2a86, rgba(247,246,242,.86)) 62%); }
:root .ins-page .ins-art > svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
:root .ins-page .ins-ghost { fill: none; stroke: var(--rs-peri); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ins-draw 2.4s var(--rs-ease) .3s forwards; }
@keyframes ins-draw { to { stroke-dashoffset: 0; } }
:root .ins-page .ins-vtag { position: absolute; left: var(--rs-s12); top: var(--rs-s12); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rs-r-pill); background: rgba(20,21,25,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); }
:root .ins-page .ins-vtag i { width: 6px; height: 6px; border-radius: 50%; background: var(--rs-peri-light); }
:root .ins-page .ins-sside { max-width: 420px; }
:root .ins-page .ins-sside h2 { margin-top: var(--rs-s12); }
:root .ins-page .ins-sside > p { color: var(--rs-tx-2); margin-top: var(--rs-s8); }
:root .ins-page .ins-sside > p b { color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .ins-page .ins-sside .ins-acts { margin-top: var(--rs-s16); }
:root .ins-page .ins-okl { display: inline-flex; align-items: center; gap: var(--rs-s8); margin-top: var(--rs-s12); color: var(--dk-tx-rs-pos, var(--rs-pos)); font-weight: var(--rs-w-med); }
:root .ins-page .ins-okl .ins-i { stroke-width: 2; }
:root .ins-page .ins-what { margin-top: var(--rs-s24); padding-top: var(--rs-s16); border-top: 1px solid var(--rs-line); display: grid; gap: var(--rs-s8); }
:root .ins-page .ins-what li { display: grid; grid-template-columns: 16px 1fr; gap: var(--rs-s12); color: var(--rs-tx-2); }
:root .ins-page .ins-what .ins-i { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); margin-top: 1px; }

/* error, partial, loading */
:root .ins-page .ins-err { padding: var(--rs-s32) var(--rs-s16); display: grid; justify-items: center; text-align: center; gap: var(--rs-s8); }
:root .ins-page .ins-err > .ins-i { width: 24px; height: 24px; color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .ins-page .ins-err p { color: var(--rs-tx-2); max-width: 420px; }
:root .ins-page .ins-err .ins-acts { margin-top: var(--rs-s8); justify-content: center; }
:root .ins-page .ins-warn { display: flex; align-items: center; gap: var(--rs-s8); margin-top: var(--rs-s16); padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .ins-page .ins-warn .ins-i { stroke-width: 2; }
:root .ins-page .ins-warn span { flex: 1; min-width: 0; color: var(--rs-tx); }
:root .ins-page .ins-warn .rs-tbtn { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .ins-page .ins-load { display: grid; gap: var(--rs-gap); }
:root .ins-page .ins-skl { display: grid; gap: var(--rs-s8); }
:root .ins-page .ins-sk { display: block; border-radius: var(--rs-r-sm); background: linear-gradient(90deg, var(--rs-inset) 0 40%, var(--dk-paper, #fff) 50%, var(--rs-inset) 60% 100%); background-size: 300% 100%; animation: ins-shim 1.4s linear infinite; box-shadow: inset 0 0 0 1px var(--rs-line); }
@keyframes ins-shim { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* the disclosure (journey-metrics.js) opens by row height */
:root .ins-page .disc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--rs-t) var(--rs-ease); }
:root .ins-page .disc-body > div { overflow: hidden; min-height: 0; }
:root .ins-page .disc.open > .disc-body { grid-template-rows: 1fr; }
:root .ins-page .disc-btn { display: inline-flex; align-items: center; gap: 6px; }
:root .ins-page .disc-btn .vi { transition: transform var(--rs-t) var(--rs-ease); }
:root .ins-page .disc-btn[aria-expanded="true"] .vi { transform: rotate(180deg); }

/* owner only: "New creators" (js/journey-metrics.js) as a quiet panel */
:root .ins-page .owner { padding: 0; }
:root .ins-page .owner .disc-btn { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); color: var(--rs-tx-2); padding: 0; }
:root .ins-page .own-sub { margin-top: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .ins-page .jm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rs-s8); margin-top: var(--rs-s12); }
:root .ins-page .jm li { padding: var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); min-width: 0; }
:root .ins-page .jm-l { display: block; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); min-height: 34px; }
:root .ins-page .jm strong { display: block; font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); font-variant-numeric: tabular-nums; }
:root .ins-page .jm strong small { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); margin-left: 4px; font-weight: var(--rs-w-reg); }
:root .ins-page .jm-t { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }

/* the sample scene (no poster yet): soft facets, a chart card and a name card */
:root .ins-page .ins-scene { position: absolute; inset: 0; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .ins-page .is-mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
:root .ins-page .is-card { position: absolute; border-radius: 1.6cqw; background: var(--dk-b-ffffffa72, rgba(255,255,255,.72)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), var(--rs-shadow); animation: ins-isfloat 7.5s ease-in-out infinite; }
@keyframes ins-isfloat { 50% { transform: translateY(-.9cqw); } }
:root .ins-page .is-chart { right: 6cqw; top: 7cqw; width: 30cqw; padding: 2.2cqw 2.4cqw 2cqw; display: grid; gap: .9cqw; animation-delay: -2.4s; }
:root .ins-page .is-k { display: block; width: 34%; height: .9cqw; border-radius: .3cqw; background: var(--dk-b-1f1f21a22, rgba(31,31,33,.22)); }
:root .ins-page .is-t { display: block; width: 72%; height: 2cqw; border-radius: .5cqw; background: var(--dk-b-1f1f21a78, rgba(31,31,33,.78)); }
:root .ins-page .is-bars { display: block; width: 100%; height: 11cqw; margin-top: .8cqw; overflow: visible; }
:root .ins-page .isb { transform-box: fill-box; transform-origin: 50% 100%; animation: ins-isgrow 1.1s var(--rs-ease) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
@keyframes ins-isgrow { from { transform: scaleY(0); } }
:root .ins-page .is-lt { left: 6cqw; top: 15cqw; display: flex; align-items: center; gap: 1.6cqw; height: 7.4cqw; padding: 0 2.6cqw 0 1cqw; animation-delay: -5s; }
:root .ins-page .is-gem { display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 1.1cqw; background: linear-gradient(150deg, #6F82B4, var(--rs-peri-deep)); }
:root .ins-page .is-gem svg { width: 62%; height: 62%; }
:root .ins-page .is-lines { display: grid; gap: .8cqw; }
:root .ins-page .is-lines i { display: block; width: 16cqw; height: 1.6cqw; border-radius: .4cqw; background: var(--dk-b-1f1f21a78, rgba(31,31,33,.78)); }
:root .ins-page .is-lines i + i { width: 10cqw; height: 1.1cqw; background: var(--dk-b-1f1f21a30, rgba(31,31,33,.3)); }
@media (prefers-reduced-motion: reduce) { :root .ins-page .ins-sk, :root .ins-page .is-card, :root .ins-page .isb { animation: none; } :root .ins-page .ins-ghost { animation: none; stroke-dashoffset: 0; } }

@media (max-width: 1180px) { :root .ins-page .ins-retw.has-vid { grid-template-columns: minmax(0, 1fr); } :root .ins-page .ins-player { width: 100%; max-width: 360px; } :root .ins-page { --ins-col: 320px; } :root .ins-page .ins-moms { grid-template-columns: 1fr; } }
@media (max-width: 1040px) { :root .ins-page .ins-chan .ins-lgs { display: none; } }
@media (max-width: 900px) and (min-width: 761px) { :root .ins-page .ins-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root .ins-page .ins-figs .ins-fig:nth-child(3) { box-shadow: none; } :root .ins-page .ins-figs .ins-fig:nth-child(n+3) { border-top: 1px solid var(--rs-line); } }
@media (max-width: 760px) {
  :root .ins-page .ins-head { flex-wrap: wrap; }
  :root .ins-page #insSrc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root .ins-page .ins-range { width: 100%; }
  :root .ins-page .ins-range .rs-seg { display: flex; width: 100%; }
  :root .ins-page .ins-range .rs-seg > button { flex: 1 1 0; padding: 0 6px; }
  :root .ins-page .ins-row { grid-template-columns: minmax(0, 1fr); }
  :root .ins-page .ins-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--rs-s16); }
  :root .ins-page .ins-hl .ins-fig:nth-child(odd) { padding-left: 0; box-shadow: none; }
  :root .ins-page .ins-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .ins-page .ins-figs .ins-fig:nth-child(3) { box-shadow: none; }
  :root .ins-page .ins-figs .ins-fig:nth-child(n+3) { border-top: 1px solid var(--rs-line); }
  :root .ins-page .ins-fig .ins-c { white-space: normal; flex-wrap: wrap; row-gap: 4px; }
  :root .ins-page .ins-plot { height: 168px; }
  :root .ins-page .ins-sh { flex-wrap: wrap; }
  :root .ins-page .ins-sh .ins-r { margin-left: 0; width: 100%; }
  :root .ins-page .ins-sub .ins-lgs { display: none; }
  :root .ins-page .ins-soon { grid-template-columns: minmax(0, 1fr); gap: var(--rs-s16); }
  :root .ins-page .ins-sort button { height: 40px; }
  :root .ins-page .ins-warn { flex-wrap: wrap; }
  :root .ins-page .ins-wait { white-space: normal; max-width: calc(100% - 16px); justify-content: flex-start; height: auto; padding: var(--rs-s8) var(--rs-s12); }
  :root .ins-page .jm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}