/* v9 (2026-11-03): THE SIDE PANEL (next-v9-panel.js). A record opens beside the list it was picked from. On the v8 tokens and the
   v8 controls (raised pill buttons, one accent primary, hairlines, Inter with Geist Mono for meta), dark by default.
   It sits under the top bar, so the bar's own controls stay in reach. On a very wide screen (1820px and up) the page moves over and
   nothing is covered; below that the panel lies over the page's right edge, as the Explain panel does (next-explain.css), so no list is
   squeezed to a width its own layout was not drawn for. A phone: the panel is the whole screen, with its button pinned at the bottom. */
:root { --vp-w: clamp(440px, 34vw, 540px); }

.vp-panel { position: fixed; top: var(--vp-top, 64px); right: 0; bottom: 0; z-index: 205; width: var(--vp-w); display: flex; flex-direction: column;
  background: var(--v8-card); color: var(--v8-t1); border-left: 1px solid var(--v8-hair); font: 400 14px/1.45 var(--v8-sans);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.vp-panel[hidden] { display: none; }
#dialog[open] ~ .vp-panel { z-index: 59; }
.vp-panel .mono, .vp-panel kbd { font-family: var(--v8-mono); }

/* the top: what this is, the full page, close */
.vp-top { flex: none; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 12px 0 24px; border-bottom: 1px solid var(--v8-hair-2); }
.vp-crumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); }
.vp-sp { flex: 1; }
.vp-ib { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; border: 0; background: transparent; color: var(--v8-t2);
  box-shadow: 0 0 0 1px var(--v8-hair); cursor: pointer; text-decoration: none; }
.vp-ib:hover { background: var(--v8-raised); color: var(--v8-t1); }
.vp-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the body scrolls; the foot stays */
.vp-body { flex: 1; min-height: 0; overflow: auto; padding: 0 0 28px; overscroll-behavior: contain; outline: none; }
.vp-ttl { padding: 22px 24px 0; }
.vp-ttl h2 { margin: 0; font: 450 26px/1.15 var(--v8-sans); letter-spacing: -.02em; color: var(--v8-t1); }
.vp-ttl h2 span { color: var(--v8-t3); white-space: nowrap; }
.vp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vp-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 12px/1 var(--v8-sans); color: var(--v8-t2);
  background: var(--v8-raised); box-shadow: 0 0 0 1px var(--v8-hair); white-space: nowrap; }

/* tones: the read's four */
.vp-panel .t-v { color: var(--v8-pos); } .vp-panel .t-f { color: var(--v8-neg); } .vp-panel .t-w { color: var(--v8-warn); } .vp-panel .t-n { color: var(--v8-t3); }
.vp-tag.t-n { color: var(--v8-t2); }

/* the context band: a small label over each value */
.vp-band { margin: 18px 24px 0; padding: 14px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; border-radius: 12px;
  background: var(--v8-page); border: 1px solid var(--v8-hair-2); }
.vp-band div { min-width: 0; }
.vp-band dt { font-size: 12px; color: var(--v8-t3); }
.vp-band dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; font-weight: 450; color: var(--v8-t1); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.vp-band dd.t-f { color: var(--v8-neg); } .vp-band dd.t-w { color: var(--v8-warn); } .vp-band dd.t-v { color: var(--v8-pos); }

/* the verdict or next step, and the way to the full page */
.vp-ver { padding: 22px 24px 2px; }
.vp-ver > .vp-full:first-child { margin-top: 0; }
.vp-lab { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.vp-lab i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.vp-ver h3 { margin: 10px 0 0; font: 500 18px/1.35 var(--v8-sans); letter-spacing: -.01em; color: var(--v8-t1); }
.vp-ver p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--v8-t2); }
.vp-ver p a { color: var(--v8-t1); }
.vp-full { display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--v8-t1); text-decoration: none; }
.vp-full .vp-i { color: var(--v8-t2); }
.vp-full:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
.vp-full kbd { font-size: 11px; line-height: 1; color: var(--v8-t3); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--v8-hair); margin-left: 4px; }

/* the twenty, by group */
.vp-meter { margin: 16px 24px 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--v8-hair-2); }
.vp-mr { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px; align-items: center; gap: 14px; padding: 5px 0; font-size: 13px; color: var(--v8-t2); }
.vp-sg { display: flex; gap: 3px; }
.vp-sg i { width: 9px; height: 16px; border-radius: 2px; background: var(--v8-hair); }
.vp-sg i.t-v { background: var(--v8-pos); } .vp-sg i.t-f { background: var(--v8-neg); } .vp-sg i.t-w { background: var(--v8-warn); }
.vp-ct { text-align: right; white-space: nowrap; font: 400 12px/1 var(--v8-mono); }

/* sections and rows */
.vp-sec { margin: 24px 24px 0; }
.vp-sh { display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--v8-hair-2); }
.vp-sh h4 { margin: 0; font: 500 14px/1.3 var(--v8-sans); color: var(--v8-t1); }
.vp-r { margin-left: auto; font-size: 12.5px; color: var(--v8-t3); white-space: nowrap; }
.vp-r.t-f, .vp-r.t-w, .vp-r.t-v { font-weight: 500; }
.vp-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--v8-hair-2); font-size: 13.5px; }
.vp-row:last-child { border-bottom: 0; }
.vp-row > .vp-i { margin-top: 2px; }
.vp-row .vp-i.v { color: var(--v8-pos); } .vp-row .vp-i.f { color: var(--v8-neg); } .vp-row .vp-i.w { color: var(--v8-warn); } .vp-row .vp-i.n { color: var(--v8-t3); }
.vp-rt { min-width: 0; }
.vp-rt b { display: block; font-weight: 450; color: var(--v8-t1); overflow-wrap: anywhere; }
.vp-rt small { display: block; margin-top: 3px; font: 400 11.5px/1.4 var(--v8-mono); color: var(--v8-t3); overflow-wrap: anywhere; }
.vp-row em { font-style: normal; font-size: 12.5px; font-weight: 500; white-space: nowrap; margin-top: 1px; }
.vp-row em.t-n { font-weight: 400; }
.vp-fold { display: flex; align-items: flex-start; gap: 10px; margin: 0 24px; padding: 12px 0 0; font-size: 13px; color: var(--v8-t2); }
.vp-sec .vp-fold { margin: 0; }
.vp-fold .vp-i { margin-top: 2px; color: var(--v8-t3); }

/* the foot: one primary, the page's own button */
.vp-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--v8-hair); background: var(--v8-card); }
.vp-foot:empty { display: none; }
.vp-panel .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important;
  padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; background: var(--v8-raised) !important; color: var(--v8-t1) !important;
  box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; font: 500 14px/20px var(--v8-sans) !important; white-space: nowrap; text-decoration: none !important; cursor: pointer; min-width: 0; }
.vp-panel .btn:hover { background: color-mix(in srgb, var(--v8-t1) 6%, var(--v8-raised)) !important; }
.vp-panel .btn.primary { flex: 1; background: var(--v8-accent) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important; }
.vp-panel .btn.primary:hover { background: var(--v8x-accent-h, var(--v8-accent)) !important; }
:root[data-theme="dark"] .vp-panel .btn.primary:hover { color: #0f0f10 !important; }
.vp-panel .btn svg { width: 16px; height: 16px; flex: none; }
.vp-panel :focus-visible { outline: 2px solid var(--v8-accent); outline-offset: 2px; }

/* one primary in view: while the panel is open, the page's own primary steps down to a quiet button */
body.vp-open #view .btn.primary { background: var(--v8-raised) !important; color: var(--v8-t1) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; }

/* the row the panel is showing */
body.vp-open #view .vp-sel, body.vp-open #view tr.vp-sel > td { background: color-mix(in srgb, var(--v8-t1) 5%, transparent) !important; }
body.vp-open #view .bcard.vp-sel { box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-t1) 28%, transparent), var(--v8-hi) !important; }

/* wide: the page moves over */
@media (min-width: 1820px) {
  .shell { transition: padding-right .2s var(--v8-ease, ease); }
  body.vp-push .shell { padding-right: var(--vp-w); }
}
/* below that: the panel lies over the page's right edge */
@media (min-width: 700px) and (max-width: 1819px) {
  .vp-panel { box-shadow: -24px 0 48px -20px rgba(0, 0, 0, .45); }
}
/* a phone: the whole screen */
@media (max-width: 699px) {
  .vp-panel { top: 0; left: 0; width: auto; border-left: 0; z-index: 215; }
  .vp-top { padding: 0 8px 0 16px; height: 52px; }
  .vp-ttl { padding: 18px 16px 0; } .vp-ttl h2 { font-size: 23px; }
  .vp-band { margin: 16px 16px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-ver { padding: 20px 16px 2px; } .vp-meter { margin: 14px 16px 0; } .vp-sec { margin: 22px 16px 0; } .vp-fold { margin: 0 16px; }
  .vp-mr { grid-template-columns: minmax(0, 1fr) auto 92px; gap: 10px; }
  .vp-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .vp-foot .btn:not(.primary) { flex: none; }
  body.vp-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .shell { transition: none !important; } }
@media print { .vp-panel { display: none !important; } body.vp-push .shell { padding-right: 0 !important; } }