/* ============================================================
   Question Pilot — coded product vignettes (QUE-386)
   ------------------------------------------------------------
   Hand-authored recreations of shipped app surfaces, replacing
   the screenshot exhibit webps site-wide. Governed by:

   - PRODUCT.md §6 imagery honesty: recreated-in-code theater is
     permitted ONLY as a faithful reproduction of shipped surfaces
     and flows. Staged Project Atlas demo content only. Light
     paper / dark chrome (the live QUE-279 app theme).
   - DESIGN.md marketing addendum: light exhibits on the dark
     desk; depth from washes, keylines, and shadow, never drawn
     furniture. Mint only on dark surfaces.
   - Owner craft rules (QUE-386 comment): fragments, not windows;
     real DOM text at readable scale; layered composition with one
     floating card; edges dissolve via mask fades; selective focus;
     on-drench glow; motion gated on .has-js + motion-ok.

   A vignette is a `role="img"` + aria-label composition; every
   internal node is decorative (`aria-hidden` on the scene). Text
   inside vignettes is product theater, not page copy.

   Palette: --qp-* tokens throughout. The three role/status hues
   below mirror the app's shipped role colors (apps/app/index.html
   STATUS_BORDERS + role chips) — product-faithful values that are
   deliberately NOT brand tokens; they must track the app, not the
   marketing palette.
   ============================================================ */

.vig {
  /* App-mirror hues (see header note). Blue = open/counterparty,
     green = advisor/published-confirmation, amber = partial. */
  --vg-blue: #2563eb;
  --vg-blue-soft: rgba(37, 99, 235, 0.1);
  --vg-blue-line: rgba(37, 99, 235, 0.32);
  --vg-green: #059669;
  --vg-green-deep: #065f46;
  --vg-green-soft: rgba(5, 150, 105, 0.1);
  --vg-green-line: rgba(5, 150, 105, 0.34);
  --vg-amber: #b45309;
  --vg-amber-soft: rgba(217, 119, 6, 0.12);
  --vg-amber-line: rgba(217, 119, 6, 0.38);
  /* Paper-local neutrals */
  --vg-rule: rgba(29, 29, 31, 0.09);
  --vg-rule-strong: rgba(29, 29, 31, 0.16);
  --vg-paper-shadow:
    0 0 0 1px rgba(244, 249, 248, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 32px 72px -30px rgba(0, 0, 0, 0.65);
  --vg-float-shadow:
    0 0 0 1px rgba(244, 249, 248, 0.16),
    0 2px 5px rgba(0, 0, 0, 0.35),
    0 18px 44px -12px rgba(0, 0, 0, 0.6),
    0 44px 96px -32px rgba(0, 0, 0, 0.55);

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--qp-ink);
  text-align: left;
}

/* Vignettes in static slots (solutions / security / about) own
   their box; crossfade stages pass the stage box through. */
.vig-slot {
  position: relative;
  margin: 0;
}

.vig-slot .vig {
  aspect-ratio: 1440 / 900;
}

/* The on-drench glow: teal-light high, mint low — the only
   backdrop; the scene floats on the page surface itself. */
.vig::before {
  content: "";
  position: absolute;
  inset: -4% -6%;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 24% 12%, rgba(58, 118, 115, 0.3), transparent 66%),
    radial-gradient(44% 40% at 82% 88%, rgba(110, 207, 203, 0.16), transparent 72%);
}

.vig-scene {
  position: absolute;
  inset: 0;
}

.vig p {
  margin: 0;
}

/* --- Paper ------------------------------------------------- */

.vg-paper {
  position: absolute;
  overflow: hidden;
  border-radius: 10px;
  background: var(--qp-card);
  box-shadow: var(--vg-paper-shadow);
}

.vg-float {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--qp-card);
  box-shadow: var(--vg-float-shadow);
}

/* Edge dissolves. A faded edge means "the surface continues";
   use on the side where the fragment is cropped, never on the
   side that carries the story. */
.vg-fade-b {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
}

.vg-fade-r {
  -webkit-mask-image: linear-gradient(90deg, #000 74%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 74%, transparent 99%);
}

.vg-fade-l {
  -webkit-mask-image: linear-gradient(270deg, #000 74%, transparent 99%);
  mask-image: linear-gradient(270deg, #000 74%, transparent 99%);
}

/* Selective focus: the dimmed layer recedes, the story row holds
   full contrast. Opacity only — no blur, no glass. */
.vg-dim {
  opacity: 0.52;
}

/* --- App chrome -------------------------------------------- */

.vg-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--qp-drench-deepest);
  color: var(--qp-on-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vg-chrome .vg-crumb {
  color: var(--qp-on-drench-faint);
  font-weight: 500;
}

.vg-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--vg-rule);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--qp-muted);
}

.vg-tab {
  padding-bottom: 10px;
}

.vg-tab.is-on {
  color: var(--qp-ink);
  box-shadow: inset 0 -2px 0 var(--qp-accent);
}

/* --- Status strip (9 Open · 4 Partial · 11 Closed) ---------- */

.vg-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
  font-size: 12.5px;
  color: var(--qp-muted);
}

.vg-strip b {
  color: var(--qp-ink);
  font-weight: 700;
}

.vg-strip i {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  font-style: normal;
}

.vg-strip .t-open i { background: var(--vg-blue); }
.vg-strip .t-partial i { background: var(--vg-amber); }
.vg-strip .t-closed i { background: var(--qp-accent); }
.vg-strip .t-na i { background: var(--qp-muted-light); }

.vg-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Pills, chips, meta ------------------------------------ */

.vg-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vg-pill--open {
  border: 1px solid var(--vg-blue-line);
  background: var(--vg-blue-soft);
  color: var(--vg-blue);
}

.vg-pill--partial {
  border: 1px solid var(--vg-amber-line);
  background: var(--vg-amber-soft);
  color: var(--vg-amber);
}

.vg-pill--closed {
  border: 1px solid var(--vg-green-line);
  background: var(--vg-green-soft);
  color: var(--vg-green-deep);
}

.vg-chip {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e8ebe9;
  color: var(--qp-ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.vg-prio {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vg-prio--high { color: var(--qp-danger); }
.vg-prio--med { color: var(--qp-warning); }
.vg-prio--low { color: var(--qp-success); }

.vg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--qp-muted);
}

.vg-meta .vg-q {
  color: var(--qp-accent);
  font-weight: 700;
}

.vg-meta em {
  font-style: normal;
  color: var(--qp-muted-light);
}

/* --- Tracker rows ------------------------------------------ */

.vg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 16px;
  padding: 14px 18px;
}

.vg-row + .vg-row {
  border-top: 1px solid var(--vg-rule);
}

.vg-row .vg-qtext {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--qp-ink);
}

.vg-row .vg-pill {
  margin-top: 2px;
}

.vg-row .vg-meta {
  grid-column: 1 / -1;
}

.vg-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--vg-rule);
  background: var(--qp-surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--qp-ink);
}

.vg-group .vg-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--qp-muted);
}

.vg-progress {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: rgba(29, 29, 31, 0.1);
  overflow: hidden;
}

.vg-progress i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--qp-accent);
}

/* --- Small helpers ------------------------------------------ */

.vg-btnrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vg-gmeta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.vg-ph-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--qp-ink);
}

.vg-ph-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--qp-muted);
}

/* Progress / bar fill widths — CSP forbids inline styles
   (style-src 'self'), so fills are utility classes. */
.vg-w33 { width: 33%; }
.vg-w40 { width: 40%; }
.vg-w43 { width: 43%; }
.vg-w46 { width: 46%; }
.vg-w50 { width: 50%; }
.vg-w67 { width: 67%; }
.vg-w75 { width: 75%; }

/* --- Thread bubbles ---------------------------------------- */

.vg-postlabel {
  padding: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.vg-bubble {
  border: 1px solid var(--vg-rule-strong);
  border-radius: 10px;
  padding: 13px 15px;
  background: var(--qp-card);
  font-size: 13px;
  line-height: 1.5;
  color: var(--qp-ink-soft);
}

.vg-bubble + .vg-bubble {
  margin-top: 12px;
}

.vg-bubble p {
  margin: 0;
}

.vg-bubble--advisor { border-color: var(--vg-green-line); }
.vg-bubble--party { border-color: var(--vg-blue-line); }

.vg-role {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vg-role--advisor {
  border: 1px solid var(--vg-green-line);
  background: var(--vg-green-soft);
  color: var(--vg-green-deep);
}

.vg-role--party {
  border: 1px solid var(--vg-blue-line);
  background: var(--vg-blue-soft);
  color: var(--vg-blue);
}

.vg-role--client {
  border: 1px solid rgba(42, 92, 89, 0.3);
  background: var(--qp-accent-soft);
  color: var(--qp-accent-strong);
}

.vg-stamp {
  display: block;
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 600;
}

/* Posted check: a drawn mark, not a unicode glyph (renders crisply
   at every DPI and never falls back to a system font). */
.vg-stamp::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 4px;
  margin-right: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-48deg) translateY(-1.5px);
}

.vg-stamp--advisor { color: var(--vg-green); }
.vg-stamp--party { color: var(--vg-blue); }
.vg-stamp--client { color: var(--qp-accent-strong); }

/* Free-standing chat exchange (advisor ↔ client channel) */
.vg-chat-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--qp-muted);
}

.vg-chat-line b {
  color: var(--qp-ink);
  font-size: 12.5px;
}

.vg-msg {
  max-width: 88%;
  border: 1px solid var(--vg-rule-strong);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--qp-card);
  font-size: 13px;
  line-height: 1.5;
  color: var(--qp-ink);
}

.vg-msg--mine {
  margin-left: auto;
  background: var(--qp-surface);
}

.vg-turn + .vg-turn {
  margin-top: 14px;
}

.vg-turn--mine .vg-chat-line {
  justify-content: flex-end;
}

/* --- Channel header (ADVISOR → CLIENT) ---------------------- */

.vg-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vg-rule);
}

.vg-channel .vg-ch-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--qp-accent-strong);
}

.vg-channel .vg-ch-scope {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--qp-muted-light);
  white-space: nowrap;
}

/* --- Composer ----------------------------------------------- */

.vg-compose {
  border: 1px solid var(--vg-rule-strong);
  border-radius: 10px;
  padding: 13px 15px 30px;
  background: var(--qp-card);
  font-size: 13px;
  color: var(--qp-muted-light);
}

.vg-compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--qp-muted-light);
}

.vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--qp-accent-strong);
  color: var(--qp-on-accent);
  font-size: 12.5px;
  font-weight: 700;
}

.vg-btn--ghost {
  border: 1px solid var(--vg-rule-strong);
  background: var(--qp-card);
  color: var(--qp-ink-soft);
}

/* --- Segmented status control ------------------------------- */

.vg-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--qp-surface-deep);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--qp-muted);
}

.vg-seg span {
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.vg-seg .is-on {
  background: var(--qp-card);
  color: var(--qp-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* --- Stat cards + health rows (dashboard) -------------------- */

.vg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.vg-stat {
  border: 1px solid var(--vg-rule);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--qp-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.vg-stat .vg-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.vg-stat .vg-stat-num {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--qp-ink);
}

.vg-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--vg-rule);
  border-radius: 8px;
  background: var(--qp-surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--qp-ink-soft);
}

.vg-health-row + .vg-health-row {
  margin-top: 8px;
}

.vg-health-row b {
  font-size: 15px;
  font-weight: 700;
  color: var(--qp-ink);
}

/* --- Queue items (Command Center) ---------------------------- */

.vg-queue-item {
  position: relative;
  padding: 13px 18px 13px 34px;
}

.vg-queue-item + .vg-queue-item {
  border-top: 1px solid var(--vg-rule);
}

.vg-queue-item::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qp-muted-light);
}

.vg-queue-item--high::before { background: var(--qp-danger); }
.vg-queue-item--fresh::before { background: var(--qp-accent); }
.vg-queue-item--stale::before { background: #d97706; }

.vg-queue-item .vg-qi-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--qp-ink);
}

.vg-queue-item .vg-qi-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--qp-muted);
}

.vg-queue-item .vg-qi-body {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--qp-ink-soft);
}

/* --- Panel headers inside paper ------------------------------ */

.vg-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px 12px;
}

.vg-panel-head .vg-ph-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--qp-ink);
}

.vg-panel-head .vg-ph-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--qp-muted);
}

.vg-actions-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--qp-accent-soft);
  color: var(--qp-accent-strong);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Summary tables ------------------------------------------ */

.vg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.vg-table th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--vg-rule-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--qp-muted);
}

.vg-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--vg-rule);
  color: var(--qp-ink);
  white-space: nowrap;
}

.vg-table th[data-n],
.vg-table td[data-n] {
  text-align: right;
}

.vg-table .vg-total td {
  border-bottom: 0;
  font-weight: 700;
}

.vg-nil {
  color: var(--qp-muted-light);
}

.vg-bar {
  display: inline-block;
  width: 84px;
  height: 5px;
  border-radius: 3px;
  background: rgba(29, 29, 31, 0.08);
  overflow: hidden;
  vertical-align: middle;
}

.vg-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--qp-accent) 0 62%, var(--qp-accent-mint) 62% 100%);
  border-radius: 3px;
}

/* --- Audit log entries ---------------------------------------- */

.vg-log-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 14px 18px;
}

.vg-log-item + .vg-log-item {
  border-top: 1px solid var(--vg-rule);
}

.vg-log-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--qp-surface);
  color: var(--qp-accent-strong);
}

.vg-log-icon svg {
  width: 16px;
  height: 16px;
}

.vg-log-item .vg-li-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--qp-ink);
}

.vg-log-item .vg-li-stamp {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--qp-muted);
}

.vg-log-item .vg-li-stamp b {
  color: var(--qp-ink-soft);
  font-weight: 600;
}

/* ==============================================================
   Per-vignette scenes
   ============================================================== */

/* --- V1 · Hero — advisor dashboard --------------------------- */

.vig--hero .vg-main {
  inset: 6% auto auto 4%;
  width: 64%;
  height: 100%;
  /* Longer dissolve than the default fade: the hero panel is the
     tallest fragment and the standard 72/98 stops read as a band. */
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 90%);
}

.vig--hero .vg-greeting {
  padding: 20px 22px 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vig--hero .vg-stats {
  padding: 12px 22px 4px;
}

.vig--hero .vg-cc {
  margin-top: 8px;
}

.vig--hero .vg-panel-head {
  padding-inline: 22px 96px;
}

.vig--hero .vg-queue-item {
  padding-inline: 40px 22px;
}

.vig--hero .vg-queue-item::before {
  left: 22px;
}

.vig--hero .vg-side {
  top: 20%;
  right: 3.5%;
  width: 31%;
  padding: 16px 16px 18px;
}

.vig--hero .vg-side .vg-ph-title {
  font-size: 14px;
}

.vig--hero .vg-side .vg-ph-sub {
  margin-bottom: 12px;
}

/* --- V2 · Import preview -------------------------------------- */

.vig--import .vg-main {
  inset: 12% auto auto 4%;
  width: 78%;
  height: 100%;
}

.vig--import .vg-float-assign {
  right: 3%;
  bottom: 7%;
  width: 34%;
  padding: 14px 16px;
}

.vig--import .vg-assign-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.vig--import .vg-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--vg-rule-strong);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--qp-ink);
}

.vig--import .vg-select i {
  margin-left: 12px;
  font-style: normal;
  color: var(--qp-muted);
  font-size: 10px;
}

.vig--import .vg-import-row {
  display: grid;
  grid-template-columns: 52px 30px minmax(0, 1fr) 32px 48px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  font-size: 12.5px;
}

.vig--import .vg-import-row + .vg-import-row {
  border-top: 1px solid var(--vg-rule);
}

.vig--import .vg-import-row--head {
  padding: 9px 18px;
  border-top: 0;
  border-bottom: 1px solid var(--vg-rule-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.vig--import .vg-import-row--head + .vg-import-row {
  border-top: 0;
}

.vig--import .vg-import-row .vg-q {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--qp-accent);
}

.vig--import .vg-import-row .vg-vdr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--qp-muted);
}

.vig--import .vg-qtext {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--qp-ink);
}

/* --- V3 · Deal workspace -------------------------------------- */

.vig--workspace .vg-main {
  inset: 5% auto auto 4%;
  width: 74%;
  height: 100%;
}

.vig--workspace .vg-detail {
  right: 3%;
  bottom: 8%;
  width: 38%;
  min-width: 256px;
  padding: 16px 16px 20px;
}

.vig--workspace .vg-detail .vg-meta {
  margin-bottom: 10px;
}

.vig--workspace .vg-detail .vg-dtitle {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qp-ink);
}

.vig--workspace .vg-detail .vg-seg {
  margin-top: 12px;
}

/* --- V4 · Tracker rows (ownership & status) -------------------- */

.vig--rows .vg-main {
  inset: 8% auto auto 4%;
  width: 82%;
  height: 100%;
}

.vig--rows .vg-row {
  padding: 16px 20px;
}

/* The teal activity edge is the app's own affordance (a teal left
   edge on a tracker row marks new activity since last open) — a
   faithful product state on the row with the fresh Jul 4 follow-up,
   not a marketing accent stripe. */
.vig--rows .vg-row--focus {
  position: relative;
  background: var(--qp-surface);
  box-shadow: inset 2px 0 0 var(--qp-accent);
}

.vig--rows .vg-float-seg {
  top: 8%;
  right: 3%;
  padding: 12px 14px;
}

.vig--rows .vg-float-seg .vg-fs-label {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

/* --- V5 · Question thread (history) ---------------------------- */

.vig--thread .vg-main {
  inset: 6% auto auto 5%;
  width: 80%;
  height: 100%;
  padding: 18px 20px;
}

.vig--thread .vg-head-meta {
  margin-bottom: 8px;
}

.vig--thread .vg-title {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--qp-ink);
}

.vig--thread .vg-float-seg {
  top: 5%;
  right: 3%;
  padding: 10px 12px;
}

/* --- V6 · Client portal chat ------------------------------------ */

.vig--client .vg-main {
  inset: 7% auto auto 6%;
  width: 78%;
  height: 100%;
  padding: 20px;
}

.vig--client .vg-compose {
  margin-top: 14px;
}

/* --- V7 · Advisor → client channel ------------------------------ */

.vig--review .vg-main {
  inset: 6% auto auto 5%;
  width: 80%;
  height: 100%;
}

.vig--review .vg-body {
  padding: 16px 18px;
}

.vig--review .vg-compose {
  margin: 14px 18px 18px;
}

/* --- V8 · Counterparty portal ------------------------------------ */

.vig--party .vg-list {
  inset: 8% auto auto 4%;
  width: 34%;
  height: 100%;
}

.vig--party .vg-list .vg-row {
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 14px;
}

.vig--party .vg-list .vg-qtext {
  font-size: 12px;
}

.vig--party .vg-detailpane {
  inset: 4% 3% auto auto;
  width: 58%;
  padding: 18px;
  z-index: 3;
}

.vig--party .vg-detailpane .vg-meta {
  margin-bottom: 8px;
}

.vig--party .vg-detailpane .vg-dtitle {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qp-ink);
}

.vig--party .vg-compose {
  margin-top: 12px;
  padding-bottom: 14px;
}

/* --- V9 · Audit log ----------------------------------------------- */

.vig--audit .vg-main {
  inset: 8% auto auto 5%;
  width: 80%;
  height: 100%;
}

.vig--audit .vg-panel-head {
  padding: 17px 18px 13px;
}

/* --- V10 · Summary -------------------------------------------------- */

.vig--summary .vg-main {
  inset: 7% auto auto 4%;
  width: 84%;
  height: 100%;
}

.vig--summary .vg-panel-head {
  padding: 15px 18px 10px;
}

.vig--summary .vg-table--cat {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}

/* --- V11 · Solutions pair panes (QUE-388) ----------------------
   The draft→publish paired state on /solutions #advisor: the same
   answer before the post (the private advisor↔client channel) and
   after it (Party A's portal slice). Both scenes reuse shipped
   surfaces; the pane slot is squarer than the 1440/900 stage so
   the pair reads as two states, not two windows. */

.vig-slot--pane .vig {
  aspect-ratio: 10 / 9;
}

.vig--pane-review .vg-main,
.vig--pane-party .vg-main {
  inset: 4% auto auto 3%;
  width: 94%;
  height: 100%;
}

.vig--pane-review .vg-body {
  padding: 16px 18px;
}

.vig--pane-review .vg-compose {
  margin: 14px 18px 18px;
}

.vig--pane-party .vg-main {
  padding: 18px;
}

.vig--pane-party .vg-meta {
  margin-bottom: 8px;
}

.vig--pane-party .vg-dtitle {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qp-ink);
}

.vig--pane-party .vg-compose {
  margin-top: 12px;
}

/* --- V12 · Flow-stepper minis (QUE-388) ------------------------
   Three fragment-scale minis for the /solutions #flow stepper:
   import rows, the question card under review, the posted answer.
   The import mini crops to category/number/question/status; the
   full column set lives in V2. */

.vig-slot--mini .vig {
  aspect-ratio: 5 / 4;
}

.vig--mini-import .vg-main,
.vig--mini-post .vg-main {
  inset: 6% auto auto 4%;
  width: 92%;
  height: 100%;
}

.vig--mini-import .vg-panel-head {
  padding: 14px 16px 10px;
}

.vig--mini-import .vg-import-row {
  display: grid;
  grid-template-columns: 46px 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  font-size: 12.5px;
}

.vig--mini-import .vg-import-row + .vg-import-row {
  border-top: 1px solid var(--vg-rule);
}

.vig--mini-import .vg-import-row .vg-q {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--qp-accent);
}

.vig--mini-import .vg-qtext {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--qp-ink);
}

.vig--mini-review .vg-main {
  inset: 6% auto auto 4%;
  width: 92%;
  padding: 16px;
}

.vig--mini-review .vg-meta {
  margin-bottom: 8px;
}

.vig--mini-review .vg-dtitle {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qp-ink);
}

.vig--mini-review .vg-seg {
  margin-top: 12px;
}

.vig--mini-post .vg-main {
  padding: 16px;
}

/* --- V13 · Shared-record card + lanes (QUE-388) -----------------
   The /solutions #client-input split: one tracker record as a
   free-standing paper strip, then the client-portal and advisor-
   tracker lanes it feeds. The record paper sizes to its content;
   overflow stays visible so its shadow ring survives, and the
   glow is dropped (a quiet object, not a staged scene). */

.vig-slot--record .vig {
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
}

.vig--record::before {
  display: none;
}

.vig--record .vig-scene {
  position: relative;
  inset: auto;
}

.vig--record .vg-main {
  position: relative;
  inset: auto;
  width: 100%;
}

.vig--record .vg-row {
  padding: 16px 20px;
}

.vig-slot--lane .vig {
  aspect-ratio: 7 / 6;
}

.vig--lane-client .vg-main {
  inset: 5% auto auto 4%;
  width: 92%;
  height: 100%;
  padding: 16px;
}

.vig--lane-tracker .vg-main {
  inset: 5% auto auto 4%;
  width: 92%;
  height: 100%;
}

/* ==============================================================
   Reveal choreography — the slow settle (QUE-386 craft rule 6).
   Layers rise with the section's .reveal; the float lands last.
   Gated on .has-js + motion-ok, mirroring styles.css .reveal.
   ============================================================== */

@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal.is-visible .vg-paper,
  .has-js .reveal.is-visible .vg-float {
    animation: vg-settle 0.9s var(--ease-reveal) backwards;
  }

  .has-js .reveal.is-visible .vg-float {
    animation-duration: 1.05s;
    animation-delay: 0.12s;
  }
}

@keyframes vg-settle {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ==============================================================
   Small screens. Stages go squarer (styles.css); scenes simplify:
   floats tuck inward, dimmed context drops, type holds ≥12.5px.
   ============================================================== */

@media (max-width: 640px) {
  .vig {
    font-size: 13px;
  }

  .vig-slot .vig {
    aspect-ratio: 6 / 5;
  }

  /* The hero keeps its taller portrait presence on small screens. */
  .vig-slot--hero .vig {
    aspect-ratio: 6 / 7;
  }

  /* Crossfade stages follow the same squarer box (the stage owns the
     vignette's box on the homepage chapters). */
  body.has-drench-hero .chapter-stage {
    aspect-ratio: 6 / 5;
  }

  .vg-mobile-off {
    display: none;
  }

  /* V1 hero — portrait: dashboard core, health card tucks low. */
  .vig--hero .vg-main {
    inset: 4% auto auto 4%;
    width: 92%;
  }

  .vig--hero .vg-greeting {
    padding: 16px 16px 2px;
    font-size: 19px;
  }

  .vig--hero .vg-stats {
    padding: 10px 16px 2px;
    gap: 8px;
  }

  .vig--hero .vg-stat {
    padding: 9px 11px;
  }

  .vig--hero .vg-stat .vg-stat-num {
    font-size: 19px;
  }

  .vig--hero .vg-queue-item {
    padding-inline: 32px 16px;
  }

  .vig--hero .vg-queue-item::before {
    left: 16px;
  }

  .vig--hero .vg-panel-head {
    padding-inline: 16px;
  }

  .vg-stat .vg-stat-label {
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .vig--hero .vg-side {
    top: auto;
    bottom: 4%;
    right: 4%;
    width: 50%;
    padding: 13px 14px;
  }

  .vig--hero .vg-side .vg-ph-sub {
    display: none;
  }

  .vig--import .vg-main {
    inset: 16% auto auto 4%;
    width: 92%;
  }

  .vig--import .vg-float-assign {
    top: 3%;
    right: 4%;
    bottom: auto;
    width: 58%;
    padding: 11px 13px;
  }

  .vig--import .vg-import-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 11px 14px;
  }

  .vig--import .vg-import-row .vg-chip,
  .vig--import .vg-import-row .vg-vdr,
  .vig--import .vg-import-row .vg-prio,
  .vig--import .vg-import-row--head,
  .vig--import .vg-btnrow {
    display: none;
  }

  .vig--workspace .vg-main {
    inset: 4% auto auto 4%;
    width: 92%;
  }

  .vig--workspace .vg-detail {
    top: auto;
    bottom: 5%;
    right: 4%;
    width: 66%;
  }

  .vig--rows .vg-main {
    inset: 6% auto auto 4%;
    width: 92%;
  }

  .vig--rows .vg-float-seg {
    display: none;
  }

  .vig--thread .vg-main {
    inset: 5% auto auto 4%;
    width: 92%;
    padding: 14px;
  }

  .vig--thread .vg-float-seg {
    display: none;
  }

  .vig--client .vg-main {
    inset: 5% auto auto 4%;
    width: 92%;
    padding: 14px;
  }

  .vig--review .vg-main {
    inset: 4% auto auto 4%;
    width: 92%;
  }

  .vig--review .vg-body {
    padding: 13px 14px;
  }

  .vig--review .vg-compose {
    margin: 12px 14px 14px;
  }

  .vig--party .vg-list {
    display: none;
  }

  .vig--party .vg-detailpane {
    inset: 5% auto auto 4%;
    width: 92%;
    padding: 14px;
  }

  .vig--audit .vg-main {
    inset: 5% auto auto 4%;
    width: 92%;
  }

  .vig--summary .vg-main {
    inset: 5% auto auto 4%;
    width: 92%;
  }

  .vg-bar {
    width: 48px;
  }

  .vg-table th,
  .vg-table td {
    padding: 8px 8px;
  }

  /* QUE-388 solutions compositions — papers widen, minis simplify.
     The generic 6/5 slot override above would re-box the record strip
     and squash the chat panes; both need their own small-screen shape. */
  .vig-slot--record .vig {
    aspect-ratio: auto;
  }

  .vig-slot--pane .vig,
  .vig-slot--lane .vig {
    aspect-ratio: 6 / 7;
  }

  .vig--pane-review .vg-main,
  .vig--pane-party .vg-main,
  .vig--mini-import .vg-main,
  .vig--mini-post .vg-main,
  .vig--lane-client .vg-main,
  .vig--lane-tracker .vg-main {
    inset: 4% auto auto 4%;
    width: 92%;
  }

  .vig--mini-import .vg-import-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 11px 14px;
  }

  .vig--mini-import .vg-import-row .vg-chip {
    display: none;
  }
}