/* Hero: the Pramanex report viewer (benchmark: Harvey and Linear product shots) */
.hx-visual.vw { height: auto; max-width: 700px; transform: none !important; width: 100%; justify-self: end; position: relative; perspective: 1600px; }
.vw-win { background: #F7F5EF; border-radius: 14px; overflow: hidden; box-shadow: 0 50px 100px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(226,189,74,.35);
  transform: rotateY(-7deg) rotateX(3deg); transform-origin: left center; animation: vwin 1.1s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes vwin { from { opacity: 0; transform: rotateY(-16deg) rotateX(6deg) translateY(30px); } }
.vw-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #E9E6DC; border-bottom: 1px solid #DDD8CA; }
.vw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D3CCB8; }
.vw-bar i:nth-child(1) { background: #E5867A; } .vw-bar i:nth-child(2) { background: #E8C35A; } .vw-bar i:nth-child(3) { background: #8FC48A; }
.vw-bar span { margin-left: 10px; font-size: .7rem; color: #6B6450; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-body { display: grid; grid-template-columns: 158px 1fr; min-height: 330px; color: #0F1C33; }
.vw-idx { background: #EFECE3; border-right: 1px solid #E0DCCF; padding: 12px 8px; }
.vw-h { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8A6D12; margin: 0 6px 8px; }
.vw-it { display: flex; gap: 6px; align-items: flex-start; font-size: .66rem; line-height: 1.3; color: #4B5668; padding: 6px; border-radius: 7px; margin-bottom: 3px; opacity: 0; animation: vin .5s ease forwards; }
.vw-it:nth-child(2) { animation-delay: .5s } .vw-it:nth-child(3) { animation-delay: .6s } .vw-it:nth-child(4) { animation-delay: .7s } .vw-it:nth-child(5) { animation-delay: .8s } .vw-it:nth-child(6) { animation-delay: .9s } .vw-it:nth-child(7) { animation-delay: 1s }
@keyframes vin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.vw-it em { font-style: normal; font-weight: 800; font-size: .6rem; min-width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.c-h { background: #B4432F; } .c-s { background: #1C3358; } .c-m { background: #C9A227; color: #0F1C33 !important; } .c-q { background: #6B7280; }
.vw-it.on { background: #fff; color: #0F1C33; font-weight: 600; box-shadow: 0 2px 8px rgba(15,28,51,.08), inset 3px 0 0 #C9A227; }
.vw-main { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.vw-ref { display: flex; align-items: center; gap: 6px; }
.vw-ref b { font-size: .9rem; letter-spacing: -.01em; margin-right: 2px; }
.p-g { background: #E7EEE6; color: #1F7A4D; }
.vw-snap { position: relative; background: #fff; border: 1px solid #E3E0D6; border-radius: 8px; padding: 18px 8px 6px; opacity: 0; animation: vin .6s ease forwards; }
.vw-snap.s1 { animation-delay: 1.1s } .vw-snap.s2 { animation-delay: 1.7s }
.vw-snap img { display: block; width: 100%; height: auto; border-radius: 3px; }
.vw-cap { position: absolute; top: 4px; left: 8px; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A6D12; }
.vw-snap::after { content: ""; position: absolute; inset: -1px; border-radius: 8px; border: 2px solid #E2BD4A; opacity: 0; }
.play .vw-snap.s1::after { animation: ring 1.4s ease 2.4s 1; } .play .vw-snap.s2::after { animation: ring 1.4s ease 3.3s 1; }
@keyframes ring { 0% { opacity: 0; } 30% { opacity: 1; box-shadow: 0 0 0 6px rgba(226,189,74,.25); } 100% { opacity: 0; } }
.vw-law { font-family: Georgia, serif; font-size: .7rem; line-height: 1.45; color: #0F1C33; background: #FBF7EA; border-left: 3px solid #C9A227; padding: 7px 9px; border-radius: 0 6px 6px 0; opacity: 0; animation: vin .6s ease 2.2s forwards; }
.vw-law span { display: block; font-family: Inter, sans-serif; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8A6D12; margin-bottom: 2px; }
.vw-obs { right: -46px; bottom: auto; top: -78px; width: 47%; }
@media (max-width: 979px) { .vw-obs { right: 0; top: auto; bottom: -50px; width: 80%; } }
.play .vw-obs { animation: pop .7s cubic-bezier(.2,.8,.2,1) 3.9s forwards; }
@media (max-width: 979px) { .vw-win { transform: none; animation: none; } .hx-visual.vw { justify-self: center; margin-bottom: 2.5rem; } }
@media (max-width: 560px) { .vw-body { grid-template-columns: 1fr; } .vw-idx { display: none; } .vw-obs { width: 92%; right: 4%; bottom: -40px; } }
@media (prefers-reduced-motion: reduce) { .vw-win, .vw-it, .vw-snap, .vw-law { animation: none !important; opacity: 1; transform: none; } .vw-obs { opacity: 1; transform: none; } }

@media (min-width: 980px) { .hx-grid:has(.vw) { grid-template-columns: .92fr 1.18fr; gap: 2.5rem; } }
.vw-body { min-height: 0; }
.hx-grid > * { min-width: 0; }
.vw-snap img { max-width: 100%; }
@media (max-width: 560px) { .vw-obs { position: relative; right: auto; bottom: auto; top: auto; width: 100%; margin-top: .9rem; opacity: 1; transform: none; } .hx-visual.vw { margin-bottom: 1rem; } .vw-bar span { font-size: .62rem; } }

/* Cycling viewer (viewer.js): four real observations, each sliding in and out */
.vw-stage { position: relative; }
.vw-slide { display: flex; flex-direction: column; gap: 9px; }
.vw-ref { animation: vin .45s ease both; }
.vw .p-h { background: #B4432F; color: #fff; } .vw .p-s { background: #1C3358; color: #fff; } .vw .p-q { background: #6B7280; color: #fff; }
.vw-obs .p-s { background: #3D5E93; }
.vw-it { transition: background .45s ease, color .45s ease, box-shadow .45s ease; }
.vw-it.vw-click { cursor: pointer; }
.vw-it.vw-click:not(.on):hover { background: rgba(255,255,255,.6); color: #0F1C33; }
.vw-slide.vw-leave { animation: vout .32s ease forwards; }
@keyframes vout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-18px); } }
.vw-swap .vw-obs { animation: cardout .3s ease forwards; }
@keyframes cardout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px); } }
.cyc .vw-snap.s1 { animation-delay: .12s; } .cyc .vw-snap.s2 { animation-delay: .35s; } .cyc .vw-law { animation-delay: .55s; }
.cyc.play .vw-snap.s1::after { animation-delay: .7s; } .cyc.play .vw-snap.s2::after { animation-delay: 1.05s; }
.cyc.play .vw-obs { animation: cardin .6s cubic-bezier(.2,.8,.2,1) .9s both; }
@keyframes cardin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* off-screen measuring copies (viewer.js fixes the pane to the tallest observation) */
.vw-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.vw-probe *, .vw-probe *::after { animation: none !important; opacity: 1 !important; }
.vw-obs.vw-cprobe { position: absolute !important; left: 0; top: 0; visibility: hidden; pointer-events: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .vw-ref, .vw-slide.vw-leave, .vw-swap .vw-obs, .cyc.play .vw-obs { animation: none !important; opacity: 1; transform: none; } .vw-it { transition: none; } }

/* Hero index fed by 50 observations in batches of five */
.vw-idx { display: flex; flex-direction: column; }
.vw-count { display: block; font-size: .56rem; color: #6B6450; letter-spacing: .06em; margin-top: 2px; text-transform: none; font-weight: 600; }
.vw-list { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.vw-it.fd { font-family: inherit; font-size: .64rem; line-height: 1.3; text-align: left; border: 0; background: transparent; cursor: pointer; width: 100%; color: #4B5668; }
.vw-it.fd span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vw-it.fd span small { -webkit-line-clamp: unset; }
.vw-it.fd small { display: block; font-size: .54rem; color: #8B8470; margin-top: 1px; }
.vw-it.fd:hover { background: rgba(255,255,255,.7); }
.vw-dots { display: flex; gap: 4px; justify-content: center; padding: 8px 0 2px; }
.vw-dots .vw-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #D3CCB8; cursor: pointer; transition: width .2s, background .2s; }
.vw-dots .vw-dot::before { content: ""; position: absolute; inset: -7px -3px; }   /* bigger tap area */
.vw-dots .vw-dot:hover { background: #B8A66A; }
.vw-dots .vw-dot.on { background: #C9A227; width: 14px; border-radius: 3px; }
.vw-dots .vw-dot:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }
.p-h { background: #B4432F; color: #fff; } .p-s { background: #1C3358; color: #fff; } .p-q { background: #6B7280; color: #fff; }
.vw-obs .pill.p-a { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* keep the hanging observation card clear of the scroll cue on tablet widths */
@media (min-width: 561px) and (max-width: 979px) { .hx-visual.vw { margin-bottom: 7rem; } }

/* Feed-driven viewer (feed.js): the main pane follows the highlighted feed item */
.vw .p-st { background: #ECE8DC; color: #6B6450; }
.vw .p-m { background: #E2BD4A; color: #0F1C33; }
.vw-law { min-height: 0; }
.vw-it.fd[aria-current] { cursor: default; }
/* the finding card sits over the window bar only, never over the extracts */
@media (min-width: 980px) { .vw-obs { width: 70%; top: -86px; padding: 10px 14px; } .vw-obs b { font-size: .82rem; line-height: 1.34; margin: 5px 0 1px; } .vw-obs .pill { font-size: .6rem; padding: 2px 8px; } }
.cyc.play .vw-obs { animation-delay: .35s; }
.vw-ref b { white-space: nowrap; }
@media (max-width: 560px) { .vw-ref { flex-wrap: wrap; row-gap: 4px; } .vw-ref .pill { font-size: .56rem; padding: 2px 7px; } }
@media (max-width: 560px) { .hx-visual.vw { margin-bottom: 2.6rem; } }