/* provenance: roadmap module M2 on Platform A (white figure on the paper page). The lab signs the file's Merkle root, holder
   check, expiry and revocation, and a ledger of what each check backs. Built from the core components (.mod-head .figbox .ftabs .readout
   .verdict .tag.cstat .switch .act .key .fnote details.sources); this file only lays them out. Scoped to .pvn / pvn-.
   v5 (the films' look): the funnel's opened paths in dark warm grey under an ink signed root, orange only for the panel sites and an
   edit, message labels in Figtree caps, the tree's one-line caption in Newsreader italic, paper text on ink. */

.pvn .figbox { margin-top: var(--s6); }
.pvn-fig { container-type: inline-size; }

/* Tabs run flush along the top of the figure; a claim mark at the right says how each check ended. */
.pvn-tabs { margin: -24px -24px 24px; }
.pvn-tabs [role="tab"] { position: relative; padding-right: 32px; }
.pvn-tabs .cmark { position: absolute; top: 50%; right: 14px; margin-top: -5px; }

/* Panes */
.pvn-pane > * { margin: 0; }
.pvn-pane > * + * { margin-top: 20px; }
.pvn-pane > .pvn-next { margin-top: 24px; }
.pvn-ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.pvn-ph p { margin: 0; flex: 1 1 18em; }
.pvn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pvn-gl { display: block; width: 21px; height: 21px; flex: none; }
.pvn-gl svg { display: block; }
.pvn code.data { font-size: 12px; overflow-wrap: anywhere; }

/* 01 · The file's Merkle tree as a funnel (canvas), the signed message as bytes, then the signing strip */
.pvn-tree { overflow: hidden; }   /* the canvas is re-fitted a frame after a resize; never let it push the page wider meanwhile */
.pvn-tree canvas { display: block; max-width: 100%; touch-action: manipulation; }
.pvn-tree.can canvas { cursor: pointer; }
.pvn-pane > .pvn-tcap { margin-top: 8px; font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 400px) { .pvn-pane > .pvn-tcap { white-space: normal; min-height: 2.8em; } }
.pvn-pane > .pvn-tkey { margin-top: 10px; }
/* The legend's "opened in the proof" square follows the funnel's path colour (dark warm grey; the signed root stays ink) */
.pvn-tkey > span:nth-child(2) > i { background: var(--dark); }
.pvn-msg .k { margin: 0 0 8px; }
.pvn-mb { display: flex; gap: 4px; }
.pvn-mb .g { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.pvn-mb .c { display: flex; gap: 1px; height: 12px; }
.pvn-mb .c i { flex: 1 1 0; min-width: 0; background: var(--line); }
.pvn-mb .k { white-space: nowrap; overflow: hidden; }
.pvn-mb.on .c i { background: var(--line-2); transition: background var(--t2) var(--ease) var(--d, 0ms); }
.pvn-mb.on .f-root .c i { background: var(--ink); }
.pvn-mb.on .f-holder .c i { background: var(--blue-500); }
.pvn-mb.on .f-root.bad .c i { background: var(--signal); transition-delay: calc(var(--d, 0ms) - var(--g0, 0ms)); }
/* The signing strip: meters fill in ten steps while a step runs, the check builds in seven. */
.pvn-strip { --n: 4; }
.pvn-strip .meter { --steps: 10; --dur: 300ms; }
/* Four cells need about 100px each; a narrower figure (side page at 1001–1240px, phones) shows them two by two. */
@container (max-width: 420px) { .pvn-strip { --n: 2; } }
.pvn-strip .pvn-chk { display: block; color: var(--tone); }
.pvn-strip .rd-v[title] { cursor: help; }
/* The edited file, only after a letter changed: three lines around the edit and the new digest. */
.pvn-file { background: var(--soft); border: 1px solid var(--line); padding: 8px 0; font-family: var(--mono); font-size: 12px; line-height: 1.75; overflow: hidden; }
.pvn-file div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); white-space: pre; padding-right: 14px; border-left: 3px solid transparent; }
.pvn-file div > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pvn-file .n { color: var(--muted); text-align: right; padding-right: 14px; }
.pvn-file .hit { background: var(--white); border-left-color: var(--signal); }
.pvn-file mark { background: var(--signal); color: var(--ink); padding: 0 1px; }
.pvn-diff .k { margin-top: 16px; }
.pvn-z { margin: 6px 0 0; overflow-wrap: anywhere; }
.pvn-z b { font-weight: 400; background: var(--signal-tint); color: var(--signal-ink); }

/* 02 · Verifier and phone: two parties, two messages along solid lifelines. */
.pvn-seq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.pvn-act { display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px; border: 1px solid var(--line-2); background: var(--white); transition: border-color var(--t3) var(--ease), background var(--t3) var(--ease); }
.pvn-act b { font-weight: 500; font-size: 15px; line-height: 1.25; }
.pvn-act small { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.pvn-act.a .pvn-gl { color: var(--tone); }
.pvn-act.b.alt { border-color: var(--signal); background: var(--signal-tint); }
.pvn-act.b.alt .pvn-gl { color: var(--signal-ink); }
.pvn-msgs { --pk-h: 63px; grid-column: 1 / -1; position: relative; list-style: none; margin: 0; padding: 4px 0 6px; }
.pvn-msgs::before, .pvn-msgs::after { content: ""; position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.pvn-msgs::before { left: 22px; }
.pvn-msgs::after { right: 22px; }
.pvn-m { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 16px 22px 0; padding: calc(var(--pk-h) + 12px) 14px 6px;
  border-bottom: 1.5px solid var(--line-2); color: var(--muted); transition: color var(--t2), border-color var(--t2); }
.pvn-m::after { content: ""; position: absolute; bottom: -6px; width: 9px; height: 11px; background: var(--line-2); transition: background var(--t2); }
.pvn-m.to-b::after { right: -1px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pvn-m.to-a::after { left: -1px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.pvn-m.to-a { flex-direction: row-reverse; }
.pvn-ml { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.pvn-mn { display: inline-grid; place-items: center; width: 16px; height: 16px; background: var(--muted); color: var(--paper); font-family: var(--mono); font-weight: 400; letter-spacing: 0; transition: background var(--t2); }
.pvn-m.on, .pvn-m.bad { color: var(--ink); }
.pvn-m.on { border-bottom-color: var(--ink); }
.pvn-m.on::after, .pvn-m.on .pvn-mn { background: var(--ink); }
.pvn-m.bad { border-bottom-color: var(--signal); }
.pvn-m.bad::after { background: var(--signal); }
.pvn-m.bad .pvn-mn { background: var(--signal); color: var(--ink); }
/* The nonce and the signature travel as blocks of their real bits, from the sender's lifeline to the receiver's. */
.pvn-pk { position: absolute; top: 4px; left: 8px; line-height: 0; visibility: hidden; }
.pvn-m.to-a .pvn-pk, .pvn-m.to-b .pvn-pk.at-end { left: auto; right: 8px; }
.pvn-m.to-a .pvn-pk.at-end { right: auto; left: 8px; }
.pvn-pk.on { visibility: visible; }
.pvn-pk canvas { display: block; }
.pvn-sws { display: flex; flex-direction: column; gap: 12px; }

/* 03 · Validity track (a long meter: passed days fill, the expired part is hollow) and the status list. */
.pvn-s3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; }
.pvn-track { position: relative; margin-top: 30px; }
.pvn-cells { display: grid; grid-template-columns: repeat(36, minmax(0, 1fr)); gap: 2px; height: 12px; }
.pvn-cells.a-steps { --steps: 36; --dur: 540ms; }
.pvn-cells i { background: var(--meter-off); }
.pvn-cells i.x { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.pvn-cells i.f { background: var(--meter-on); }
.pvn-cells i.xf { background: var(--signal); box-shadow: none; }
.pvn-mk { position: absolute; top: -8px; bottom: -6px; left: 0; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; transition: left var(--t1) var(--ease); }
.pvn-mk b { position: absolute; bottom: 100%; left: 0; margin-bottom: 3px; padding: 4px 6px; transform: translateX(var(--tx, -50%)); background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-weight: 400; font-size: 10.5px; line-height: 1; white-space: nowrap; }
.pvn-tax { position: relative; height: 32px; margin-top: 10px; }
.pvn-tax span { position: absolute; top: 0; }
.pvn-tax span:first-child { left: 0; }
.pvn-tax span:last-child { right: 0; }
.pvn-tax span.mid { left: 50%; top: -12px; padding: 12px 0 0 8px; border-left: 1.5px solid var(--ink); }
.pvn-tax b { display: block; margin-top: 2px; font-weight: 400; color: var(--ink); }
.pvn-rt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.pvn-rt output { color: var(--tone); }
.pvn-time .range { display: block; margin: 8px 0 0; }
.pvn-list .switch { margin-top: 16px; }
.pvn-bits { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; max-width: 288px; margin-top: 8px; }
.pvn-bits.a-steps { --steps: 16; --dur: 480ms; --delay: 160ms; }
.pvn-bits i { aspect-ratio: 1; background: var(--line); transition: background var(--t2); }
.pvn-bits i.r { background: var(--ink); }
.pvn-bits i.me { background: var(--white); box-shadow: inset 0 0 0 2px var(--signal); }
.pvn-bits i.me.r { background: var(--signal); box-shadow: none; }
.pvn .key i.pvn-me { background: var(--white); box-shadow: inset 0 0 0 2px var(--signal); }
.pvn .pvn-cap { margin-top: 12px; }
.pvn-ls { margin: 20px 0 0; }

@container (max-width: 640px) {
  .pvn-s3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pvn-list { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .pvn-list > .k { grid-column: 1 / -1; }
  .pvn-bits { grid-row: span 2; }
  .pvn .pvn-cap { flex-direction: column; align-items: flex-start; margin-top: 8px; }
}
@container (max-width: 420px) {
  .pvn-list { grid-template-columns: minmax(0, 1fr); }
  .pvn-bits { grid-row: auto; }
  .pvn .pvn-cap { flex-direction: row; margin-top: 12px; }
}

/* ---------- The ledger, in the control column: DNA to presenter, one tag per claim ---------- */
.pvn-ledger { list-style: none; margin: 0; padding: 0; border-top: 1.25px solid var(--ink); }
.pvn-lr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.pvn-lc { font-size: 14px; line-height: 1.3; }
.ctl .pvn-lr .k { grid-column: 1 / -1; margin: 0; }
.pvn-rej { --mk: var(--signal); }
.pvn-ctl .meter > i.pvn-x { background: var(--signal); }
/* The ledger's four labels, as a legend row under the figure */
.pvn-key { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pvn-key li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.pvn-ctl > .act { align-self: flex-start; }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .pvn-tabs { margin: -16px -16px 20px; }
  .pvn-msgs { --pk-h: 47px; }
  .pvn-seq { gap: 0 12px; }
  .pvn-act { padding: 10px; }
  .pvn-m { margin: 16px 12px 0; padding: calc(var(--pk-h) + 12px) 8px 6px; }
  .pvn-msgs::before { left: 12px; }
  .pvn-msgs::after { right: 12px; }
  .pvn-file div { grid-template-columns: 7ch minmax(0, 1fr); padding-right: 8px; }
  .pvn-file .n { padding-right: 8px; }
}