/* OpenVibe.Report — the room's own pieces. Colours come from the theme (--bg-*, --text-*, --border) and the room's
   accent (.ov-room in openvibe-shared room.css: --room-accent, --room-strong, --room-fill, --room-on), so every theme,
   light or dark, wears it. Phone first: tables become stacked rows under 700 px; nothing scrolls sideways. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--text-primary, #e6edf7); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; padding: 8px 12px; border-radius: 10px; background: var(--bg-card, #0f1729); color: inherit; }
.rp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
.rp a:not([class]) { color: var(--room-strong); }
.rp h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.rp section { margin-top: clamp(28px, 4vw, 44px); }
.rp-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rp-head-row h2 { margin-bottom: 8px; }
.rp-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
:where(.rp) .ovk-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-more .ovk-i { width: 1em; height: 1em; }
.rp-kicker { margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--room-strong); }
.rp-kicker a { text-decoration: none; }
.rp-page-h { padding-top: clamp(20px, 4vw, 40px); }
.rp-page-h h1 { margin: 0; font-size: clamp(1.8rem, 4.6vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.rp-lede { margin: 10px 0 0; max-width: 760px; color: var(--text-secondary, #96a7c2); font-size: 1.05rem; line-height: 1.55; }
.rp-summary { margin: 14px 0 0; max-width: 780px; line-height: 1.65; }
.rp-fine { margin: 0 0 14px; max-width: 800px; color: var(--text-muted, #7386a3); font-size: .88rem; line-height: 1.55; }
.rp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; color: var(--text-muted, #7386a3); font-size: .86rem; }
.rp-meta a { color: var(--text-secondary, #96a7c2); }
.rp-meta .ovk-mark { vertical-align: middle; }
.rp-ai { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 13%, transparent); }
.rp-pill { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.rp-pill.is-up { color: var(--success-text, #22c55e); background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent); }
.rp-pill.is-down { color: var(--danger-text, #f87171); background: color-mix(in srgb, var(--danger, #f87171) 14%, transparent); }
.rp-pill.is-flat { color: var(--text-muted, #7386a3); background: color-mix(in srgb, var(--text-muted, #7386a3) 14%, transparent); }
.rp-tabs { display: inline-flex; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 999px; background: var(--bg-secondary, #101828); border: 1px solid var(--border, #1f2d47); }
.rp-tabs a { padding: 7px 14px; border-radius: 999px; color: var(--text-secondary, #96a7c2); text-decoration: none; font-size: .86rem; font-weight: 700; }
.rp-tabs a[aria-current] { background: var(--room-fill); color: var(--room-on); }
.rp-ai-room { margin-top: 28px; }
.rp-ai-room h2 { margin-bottom: 12px; }
.rp-ai-room .rp-topic h3 { margin: 0; font-size: 1.05rem; }
.rp-ai-room .rp-topic p { margin: 0; }
.rp-ai-room .rp-topic .rp-fine { margin: 0; }
.rp-ai-kind { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); color: var(--text-primary, #e6edf7); }
.rp-ai-kind-h { display: flex; flex-direction: column; gap: 4px; }
.rp-ai-kind-h h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.rp-ai-kind-h h3 a { color: inherit; text-decoration: none; }
.rp-ai-kind-h h3 a:hover, .rp-ai-kind-h h3 a:focus-visible { text-decoration: underline; }
.rp-ai-lead { display: flex; align-items: baseline; gap: 10px; margin: 0; flex-wrap: wrap; }
.rp-ai-lead-v { font-size: 1.9rem; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.rp-ai-lead-s { font-size: .9rem; color: var(--text-secondary, #96a7c2); }
.rp-ai-links { gap: 4px 2px; }
.rp-ai-links a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 4px; color: var(--room-strong); font-weight: 700; text-decoration: none; }
.rp-ai-links a:hover { text-decoration: underline; }
.rp-ai-scroll { overflow-x: auto; margin: 20px 0; border: 1px solid var(--border, #1f2d47); border-radius: 16px; }
.rp-ai-table { width: 100%; border-collapse: collapse; min-width: 650px; font-variant-numeric: tabular-nums; }
.rp-ai-table th, .rp-ai-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border, #1f2d47); }
.rp-ai-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #7386a3); }
.rp-ai-table tbody tr:last-child > * { border-bottom: 0; }
.rp-ai-table a { overflow-wrap: anywhere; }
.rp-flag { display: inline-block; font-size: .72rem; color: var(--room-strong); margin-left: 5px; }
.rp-ai-chart { margin: 20px 0; padding: 12px; border: 1px solid var(--border, #1f2d47); border-radius: 16px; background: var(--bg-card, #0f1729); }
.rp-ai-chart svg { display: block; width: 100%; height: auto; }
.rp-ai-chart line { stroke: var(--text-muted, #7386a3); stroke-width: 1; }
.rp-ai-chart .rp-ai-grid { stroke: var(--border, #1f2d47); stroke-width: 1; stroke-dasharray: 3 4; }
.rp-ai-chart text { fill: var(--text-secondary, #96a7c2); font-size: 11px; }
.rp-ai-chart .rp-ai-tick { fill: var(--text-muted, #7386a3); font-size: 11px; }
.rp-ai-chart .rp-ai-lab { fill: var(--text-secondary, #96a7c2); font-size: 11px; }
.rp-ai-chart .rp-ai-lab.is-frontier { fill: var(--room-strong); font-weight: 800; }
.rp-ai-chart .rp-ai-frontier { fill: var(--room-accent); stroke: var(--bg-card, #0f1729); stroke-width: 1; }
.rp-ai-chart .rp-ai-point { fill: var(--text-muted, #7386a3); }
.rp-ai-chart figcaption { margin-top: 6px; font-size: .8rem; color: var(--text-muted, #7386a3); }
.rp-counts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; color: var(--text-secondary, #96a7c2); }
.rp-counts b { color: var(--text-primary, #e6edf7); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Tiles: one number each, with its window. */
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 44%), 1fr)); gap: 12px; margin-top: 22px; }
.rp-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--room-accent) 10%, transparent), transparent 70%), var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); min-width: 0; overflow: hidden; }
.rp-tile-l { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
.rp-tile-v { font-size: 1.8rem; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-tile-v small { font-size: .9rem; color: var(--text-muted, #7386a3); font-weight: 700; }
.rp-tile-s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-secondary, #96a7c2); position: relative; z-index: 1; }
.rp-tile .rp-spark { position: absolute; right: 10px; bottom: 10px; width: 46%; height: 34px; opacity: .9; }
.rp-spark-line { fill: none; stroke: var(--room-accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rp-spark-area { fill: var(--room-accent); opacity: .14; }
.rp-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.rp-minis > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.rp-minis b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.rp-minis span { font-size: .8rem; color: var(--text-muted, #7386a3); }

/* Charts. */
.rp-bars, .rp-curve { margin: 0; padding: 14px; border-radius: 16px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.rp-bars svg { display: block; width: 100%; height: 140px; }
.rp-bars rect { fill: var(--room-accent); opacity: .85; }
.rp-bars rect:hover { opacity: 1; }
.rp-bars figcaption, .rp-curve figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: .78rem; color: var(--text-muted, #7386a3); }
.rp-curve svg { display: block; width: 100%; height: 160px; }
.rp-curve-line { fill: none; stroke: var(--room-accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rp-curve-area { fill: var(--room-accent); opacity: .12; }
.rp-curve-chat rect { fill: var(--text-muted, #7386a3); opacity: .45; }
.rp-legend { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: var(--room-accent); }
.rp-legend i.is-c { background: var(--text-muted, #7386a3); opacity: .6; }

/* The stats table: rows on wide screens, stacked on phones. */
.rp-table { display: grid; border: 1px solid var(--border, #1f2d47); border-radius: 16px; overflow: hidden; background: var(--bg-card, #0f1729); }
.rp-tr { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--border, #1f2d47); font-variant-numeric: tabular-nums; }
.rp-tr:first-child { border-top: 0; }
.rp-th { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted, #7386a3); background: color-mix(in srgb, var(--room-accent) 5%, transparent); }
.rp-site { display: flex; flex-direction: column; min-width: 0; }
.rp-site a { font-weight: 700; text-decoration: none; }
.rp-site small { color: var(--text-muted, #7386a3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 699px) {
    .rp-th { display: none; }
    .rp-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
    .rp-site { grid-column: 1 / -1; }
    .rp-tr > [data-l]::before { content: attr(data-l); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
}

/* The Rundown. */
.rp-lead { padding: clamp(18px, 3vw, 28px); border-radius: 20px; border: 1px solid color-mix(in srgb, var(--room-accent) 35%, var(--border, #1f2d47)); background: radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, var(--room-accent) 14%, transparent), transparent 60%), var(--bg-card, #0f1729); }
.rp-lead h2 { font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.2; text-wrap: balance; }
.rp-lead h2 a { color: inherit; text-decoration: none; }
.rp-lead h2 a:hover { text-decoration: underline; }
.rp-lead-what { margin: 0; max-width: 820px; line-height: 1.6; color: var(--text-secondary, #96a7c2); }
.rp-lead-take { margin: 12px 0 0; max-width: 820px; padding-left: 14px; border-left: 3px solid var(--room-accent); line-height: 1.55; font-style: italic; }
.rp-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.rp-topic { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border-radius: 16px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); color: var(--text-primary, #e6edf7) !important; text-decoration: none; transition: border-color .18s, transform .18s; }
.rp-topic:hover, .rp-topic:focus-visible { border-color: var(--room-accent); transform: translateY(-2px); outline: none; }
.rp-topic b { font-size: 1.02rem; line-height: 1.3; }
.rp-topic-h { color: var(--text-secondary, #96a7c2); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rp-topic .rp-meta { margin-top: auto; }
.rp-kind { display: inline-flex; width: fit-content; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--room-strong); background: color-mix(in srgb, var(--room-accent) 12%, transparent); text-decoration: none; }
.rp-takes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-take { padding: 12px 16px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.rp-take h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.rp-take h3 a { color: inherit; text-decoration: none; }
.rp-take h3 a:hover { text-decoration: underline; }
.rp-take p { margin: 6px 0 0; color: var(--text-secondary, #96a7c2); line-height: 1.5; font-size: .92rem; }
.rp-take .rp-meta { margin-top: 6px; font-size: .8rem; }
.rp-timeline { position: relative; padding-left: 18px; }
.rp-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: color-mix(in srgb, var(--room-accent) 35%, transparent); border-radius: 2px; }
.rp-voices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.rp-voices a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); color: var(--text-primary, #e6edf7) !important; text-decoration: none; }
.rp-voices a:hover { border-color: var(--room-accent); }
.rp-voices span { display: flex; flex-direction: column; min-width: 0; }
.rp-voices small { color: var(--text-muted, #7386a3); font-size: .8rem; }
.rp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chips a, .rp-chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-primary, #e6edf7); text-decoration: none; font-weight: 600; font-size: .9rem; }
.rp-chips a:hover { border-color: var(--room-accent); }

/* 6 touch targets (2026-10-29): chips are 44 px tall; the two headlines and section link gain vertical-only hit areas. */
@media (pointer: coarse) {
  .rp-chips a { min-height: 44px; }
  .rp-lead h2 a { position: relative; }
  .rp-lead h2 a::after { content: ''; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
  .rp-more { position: relative; }
  .rp-more::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
  .rp-scene .is-in a:only-child { position: relative; }
  .rp-scene .is-in a:only-child::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
}
.rp-person { display: flex; align-items: center; gap: 16px; }

/* The after-show report. */
.rp-moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-moments li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.rp-moments li > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-at { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--room-fill); color: var(--room-on) !important; font-size: .78rem; font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; }
.rp-at .ovk-i { width: .9em; height: .9em; fill: currentColor; stroke: none; }
.rp-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.rp-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--room-fill); color: var(--room-on) !important; font-weight: 700; font-size: .92rem; text-decoration: none; }
.rp-btn.is-quiet { background: transparent; color: var(--room-strong) !important; border: 1px solid color-mix(in srgb, var(--room-accent) 45%, var(--border, #1f2d47)); }
.rp-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.rp-scene-num { display: grid; gap: 6px; }
.rp-scene-num .rp-pill { justify-self: start; }
.rp-scene-num b { font-size: 2.4rem; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-scene-num .rp-spark { width: 100%; height: 90px; }
.rp-eps { display: grid; gap: 10px; margin: 0; }
.rp-eps > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card, #0f1729); border: 1px solid var(--border, #1f2d47); }
.rp-eps dt code { font: 600 .92rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--room-strong); overflow-wrap: anywhere; }
.rp-eps dd { margin: 6px 0 0; color: var(--text-secondary, #96a7c2); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .rp-topic { transition: none; } }

/* AI boards: rooms side by side, tables that fit a phone, and a chart that scrolls rather than shrinking its labels */
.rp-ai-rooms { display: grid; gap: 0 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.rp-ai-rooms .rp-topics { grid-template-columns: 1fr; }
.rp-ai-table a { text-decoration: none; font-weight: 700; }
.rp-ai-table a:hover, .rp-ai-table a:focus-visible { text-decoration: underline; }
.rp-ai-chart { overflow-x: auto; }
@media (max-width: 640px) {
    .rp-ai-table { min-width: 640px; font-size: .88rem; }
    .rp-ai-table th, .rp-ai-table td { padding: 10px 8px; }
    .rp-ai-chart svg { min-width: 720px; }
}

/* Touch targets on phones (fleet audit, 2026-10-29): touch pointers only. */
@media (pointer: coarse) {
  .sc-room-chips a { min-height: 44px; }
  .ov-room article a, .rp-more, .rp-lead a { position: relative; }
  .ov-room article a::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .rp-more::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
  .rp-lead a::after { content: ''; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
}

/* The front page's lists (the owner, 2026-10-31: never hide content to shorten a page): on a phone a list is a rail
   you swipe, every item in it, the next one peeking in; a wider screen shows it as before. The topics used to be one
   at a time behind a row of radio chips, the rest display:none. */
@media (max-width: 640px) {
  .pick--rail .pick-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pick--rail .pick-list::-webkit-scrollbar { display: none; }
  .pick--rail .pick-list > li { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
}

/* The fold (the owner's short-pages rule): closed on a phone, and where there is room it looks like the section it
   replaces: a heading and its content, with no card around it. */
.rp-fold-block { margin-top: 32px; }
.rp-fold-block > summary h2 { margin: 0; font: 700 clamp(19px,2.2vw,26px)/1.2 var(--ov-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif); }
.rp-fold-hint { display: none; }
/* The fold's summary carries the heading, so the section's own heading gives way to it. */
.rp-fold-block .sc-sec > h2, .rp-fold-block > .sc-sec > h2 { display: none; }
@media (min-width: 641px) {
  .rp-fold-block { border: 0; background: none; border-radius: 0; margin-top: 56px; padding: 0; }
  .rp-fold-block > summary { display: block; min-height: 0; padding: 0; }
  .rp-fold-block > summary h2 { margin: 0 0 6px; font: 700 clamp(22px,2.6vw,30px)/1.2 var(--ov-font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif); }
  .rp-fold-block > summary span { display: none; }
  .rp-fold-block .sc-sec { margin: 0; padding: 0; }
}
@media (max-width: 640px) {
  .rp-fold-block { margin-top: 24px; }
  .rp-fold-block > summary { cursor: pointer; }
  .rp-fold-hint { display: inline; margin-left: 8px; font-size: .78rem; font-weight: 600; color: var(--text-secondary, #96a7c2); }
}


/* A link that points into a pick block opens it: the pane carries the id the link names. */
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick .pick-pane:target { display: block; }
} }

/* On a wide screen the pick block is invisible: its blocks sit where they were, in the order they were. */
@media (min-width: 641px) {
  .pick, .pick-body, .pick-pane { display: contents; }
  .pick-bar { display: none; }
}

/* The chip names the scene, so the scene's own heading gives way to it. */
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick .sc-scene-text > h2 { display: none; }
} }

/* The fold's summary carries the heading, so the section's own heading gives way to it. */
.rp-fold-block .sc-scene-text > h2 { display: none; }
/* The chip names the topic, so the topics' own heading gives way to it. */
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick .rp-head-row h2 { display: none; }
} }

/* You (plan L41 R1): a person's own numbers. The sentence leads; the parts follow. */
.rp-you-say { max-width: 62ch; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.55; color: var(--text-primary, #e6edf7); }
.rp-person > div { min-width: 0; }
.rp-tiles-sm { grid-template-columns: repeat(auto-fit, minmax(min(140px, 44%), 1fr)); margin-top: 12px; }
/* /you's small tiles (2026-11-01 design pass): a number and its label, with no room kept for a sparkline they do not
   have; three to a row on a phone (six stream numbers are two even rows), and the chart under them keeps its distance. */
.rp-tiles-sm { grid-template-columns: repeat(auto-fit, minmax(min(132px, 30%), 1fr)); gap: 10px; }
.rp-tiles-sm .rp-tile { min-height: 0; padding: 12px 14px; gap: 2px; border-radius: 14px; }
.rp-tiles-sm .rp-tile-l { font-size: .68rem; }
.rp-tiles-sm .rp-tile-v { font-size: 1.4rem; white-space: nowrap; }
.rp-tiles-sm .rp-tile-v small { font-size: .72rem; margin-left: 2px; }
.rp-tiles-sm + .rp-bars, .rp-tiles-sm + .rp-curve { margin-top: 12px; }
@media (max-width: 359px) { .rp-tiles-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-you-sub { margin: 26px 0 12px; font-size: 1rem; }
.rp-you-next { border-top: 1px solid var(--border, #1f2d47); padding-top: 18px; }
.rp-you-next h2 { font-size: 1rem; }
@media (max-width: 560px) { .rp-person { align-items: flex-start; } }

/* Design health (/design, /design/:site; server/views/design.js): a score on a bar, the table's columns, the counted
   fold, the rules and the findings. Colours come from the theme (--success, --warning, --danger and their -text). */
.dh-tr { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) repeat(5, minmax(0, .8fr)); }
.dh-score { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-width: 0; --dh-c: var(--success, var(--room-accent)); }
.dh-score b { min-width: 2.4em; font-variant-numeric: tabular-nums; }
.dh-score i { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--dh-c) var(--dh), color-mix(in srgb, var(--text-muted, currentColor) 22%, transparent) var(--dh)); }
.dh-score.is-ok { --dh-c: var(--warning, var(--room-accent)); }
.dh-score.is-low { --dh-c: var(--danger, var(--room-accent)); }
.dh-n { font-variant-numeric: tabular-nums; }
.dh-n.is-zero { color: var(--text-muted); }
.dh-n.is-bad { color: var(--danger-text, var(--danger)); font-weight: 800; }
.dh-fold { margin-top: 12px; }
.dh-fold > summary { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); font-weight: 700; cursor: pointer; list-style: none; }
.dh-fold > summary::-webkit-details-marker { display: none; }
.dh-fold > summary span { color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.dh-fold > summary:hover { border-color: var(--room-accent); }
.dh-fold[open] > summary { margin-bottom: 12px; }
.dh-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 0 0 14px; }
.dh-rules > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
.dh-rules dt { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.dh-rules dt span { color: var(--text-muted); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-rules dd { margin: 6px 0 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.5; }
.dh-lede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dh-lede .dh-score { width: min(280px, 100%); font-size: 1.4rem; }
.dh-finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dh-find { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.dh-rule { justify-self: start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: .72rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.dh-rule--spinner, .dh-rule--missing-reduced-motion { color: var(--danger-text, var(--danger)); border-color: color-mix(in srgb, var(--danger, currentColor) 45%, transparent); }
.dh-where { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.dh-text { grid-column: 2; display: block; overflow-x: auto; padding-top: 2px; color: var(--text-secondary); font-size: .8rem; white-space: pre; }
.dh-none { display: none; }
@media (max-width: 699px) {
    /* A site in two lines: its name and score bar, then only what it has to fix, in words. */
    .dh-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
    .dh-tr::after { content: ''; order: 2; flex-basis: 100%; }
    .dh-tr.rp-th { display: none; }
    .dh-tr > .rp-site { order: 0; flex: 1 1 0; min-width: 0; }
    .dh-tr > [data-l="Score"] { order: 1; flex: 0 0 auto; width: 132px; }
    .dh-tr > [data-l]::before { content: none; }
    .dh-tr > .dh-n, .dh-tr > .dh-none { order: 3; font-size: .82rem; color: var(--text-secondary); }
    .dh-tr > .dh-n::after { content: ' ' attr(data-s); color: var(--text-muted); }
    .dh-tr > .dh-n.is-zero { display: none; }
    .dh-tr > .dh-none { display: inline; color: var(--text-muted); }
    .dh-find { grid-template-columns: minmax(0, 1fr); }
    .dh-text { grid-column: 1; }
}

/* ── The home's picture: an after-show report in miniature (MOTION-1, 2026-11-02) ──────────────────────────────────── */
.rp-motif { width: min(100%, 360px); margin: 0 auto; display: grid; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--ovk-line, var(--border, rgba(255, 255, 255, .1))); background: var(--ovk-panel, var(--bg-card, #141c2a)); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.rp-mf-head { display: grid; gap: 2px; }
.rp-mf-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ovk-muted, #93a0b4); }
.rp-mf-head b { font-size: 15px; color: var(--ovk-text, #e8ecf3); }
.rp-mf-curve { position: relative; padding-top: 18px; }
.rp-mf-curve .rp-spark { display: block; width: 100%; height: 64px; }
.rp-mf-peak { position: absolute; top: 0; left: calc(53% - 22px); font-size: 11.5px; font-weight: 700; color: var(--room-strong, var(--ovk-accent, #3b82f6)); }
.rp-mf-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp-mf-facts li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--ovk-bg, var(--bg-secondary, #0f1522)); }
.rp-mf-facts b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ovk-text, #e8ecf3); }
.rp-mf-facts span { font-size: 11.5px; color: var(--ovk-muted, #93a0b4); }
.rp-mf-note { margin: 0; font-size: 12.5px; color: var(--ovk-muted, #93a0b4); }
/* On a phone the room draws its picture behind the hero's text at a quarter of its strength. For an abstract motif
   that is a backdrop; this one is a card of words and numbers, and it ran through the headline and the lede (11-03:
   "OpenVibe, honest" over "2 h 14 m"). Under 640 px it sits below the hero instead, whole: what Report writes for
   every stream, in miniature. */
@media (max-width: 640px) {
  .sc-room-hero .sc-room-pic:has(.rp-motif) { position: static; inset: auto; z-index: auto; width: auto; opacity: 1; transform: none; margin: 24px 0 0; pointer-events: none; }
  .sc-room-hero .rp-motif { width: 100%; }
}

/* On a phone a fold is a card row (11-03): its heading, what it holds counted on the right, no browser triangle; open,
   its content sits inside the card. A wider screen shows the section as before. */
@media (max-width: 640px) {
  .rp-fold-block { border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, #131c2e); }
  .rp-fold-block > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 16px; cursor: pointer; list-style: none; }
  .rp-fold-block > summary::-webkit-details-marker { display: none; }
  .rp-fold-block > summary::marker { content: ''; }
  .rp-fold-block > summary h2 { margin: 0; padding: 0; border: 0; font-size: 1.12rem; }
  .rp-fold-block > summary span { flex: none; color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; white-space: nowrap; }
  .rp-fold-block > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
  /* The content sits 16px inside the card, whatever spacing its own section had for a page without a card. */
  .rp-fold-block > summary ~ * { margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
  .rp-fold-block > summary + * { margin-top: 0 !important; padding-top: 4px !important; }
  .rp-fold-block[open] { padding-bottom: 12px; }
}
/* Session reports (S3): one wrapping meta row, the tests as a chip, screenshots as a strip, steps with status dots. */
.rp-sr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; color: var(--text-secondary, #9aa4b2); font-size: .9rem; }
.rp-proof-tests { display: inline-flex; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.rp-proof-tests.is-ok { background: color-mix(in srgb, #22c55e 16%, transparent); color: #4ade80; }
.rp-proof-tests.is-bad { background: color-mix(in srgb, #ef4444 16%, transparent); color: #f87171; }
.rp-shots { list-style: none; margin: 0 0 12px; padding: 0 0 4px; display: flex; gap: 10px; overflow-x: auto; position: relative; }
.rp-shots img { display: block; width: 200px; height: 125px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, #233047); background: var(--bg-card, #111827); }
.rp-review p { margin: 0 0 6px; }
.rp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rp-steps li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-left: 2px solid var(--border, #233047); margin-left: 6px; padding-left: 0; }
.rp-steps li > div { min-width: 0; }
.rp-steps p { margin: 0; overflow-wrap: anywhere; }
.rp-step-dot { width: 10px; height: 10px; margin: 6px 0 0 -6px; border-radius: 999px; background: #3b82f6; box-shadow: 0 0 0 3px var(--bg-primary, #0b1220); }
.rp-steps li.is-passed .rp-step-dot { background: #22c55e; }
.rp-steps li.is-failed .rp-step-dot { background: #ef4444; }
.rp-steps li.is-skipped .rp-step-dot { background: #6b7280; }
.rp-step-st { color: var(--text-secondary, #9aa4b2); font-size: .82rem; font-weight: 500; }
.rp-steps li.is-failed .rp-step-st { color: #f87171; }
.rp-step-detail { color: var(--text-secondary, #9aa4b2); font-size: .9rem; }

/* AI (2026-11-08): the compare form and the method page. The charts and tables are the shared kit's own. */
.rp-ai-compare-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 18px 0 8px; padding: 14px 16px; border: 1px solid var(--border, #1f2d47); border-radius: 16px; background: var(--bg-card, #0f1729); }
.rp-ai-compare-form label { flex: 1 0 100%; font-size: .8rem; font-weight: 700; color: var(--text-secondary, #96a7c2); }
.rp-ai-compare-form input { flex: 1 1 240px; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #101828); color: var(--text-primary, #e6edf7); font: inherit; }
.rp-ai-compare-form input:focus-visible { outline: 2px solid var(--room-accent); outline-offset: 1px; }
.rp-ai-compare-form .rp-btn { border: 0; cursor: pointer; font: inherit; }
.rp-ai-method h2 { margin: 28px 0 8px; font-size: 1.15rem; }
.rp-ai-method p { max-width: 820px; margin: 0 0 12px; line-height: 1.65; color: var(--text-secondary, #96a7c2); }
.rp-ai-method code { overflow-wrap: anywhere; }

/* A table inside a kit section (the AI page's leaders and benchmarks): the section is the card, so the table's own
   frame goes (it drew a card inside a card, one border inside another). */
.ovk-section > .ovk-table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }