/* W17-02 — procure-to-pay storyboard inside chapter 02 (#ch-procure, assets/js/p2p.js).
   Motif: a blueprint desk with ink-on-ivory documents that pile up as the order moves through six
   departments; a station rail with a filling thread on top; a dark briefing card beside the paper.
   Readable sizes: nothing customers read is below 14px. Text is never faded; entrances move only. */

.p2p {
  grid-column: 1 / -1; position: relative; display: grid; gap: 1rem; margin-top: .5rem;
  padding: clamp(.9rem, .4rem + 1.6vw, 1.75rem); border-radius: 26px;
  background:
    radial-gradient(120% 70% at 85% 0%, rgb(47 123 255 / .16), transparent 60%),
    linear-gradient(165deg, #0d1836 0%, #081027 55%, #060c1d 100%);
  border: 1px solid rgb(82 148 255 / .28);
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .05);
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ---------- head ---------- */
.p2p-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: end; }
.p2p-kicker { grid-column: 1 / -1; margin: 0; color: var(--blue-300); font-size: .875rem; font-weight: 600; letter-spacing: .01em; }
.p2p-head h4 { margin: 0; color: var(--text-1); font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); font-weight: 600; line-height: 1.45; text-wrap: balance; }
.p2p-lead { grid-column: 1; margin: 0; max-width: 70ch; color: var(--text-2); font-size: 1rem; line-height: 1.85; }
.p2p-legend { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.p2p-legend li, .p2p-ev li > b { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.p2p-legend li { padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-1); }
.p2p-legend li::before, .p2p-ev li > b::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.p2p-legend .is-verified::before, .p2p-ev .is-verified > b::before { background: var(--ok); }
.p2p-legend .is-runtime::before, .p2p-ev .is-runtime > b::before { background: var(--warn); }
.p2p-legend .is-example::before, .p2p-ev .is-example > b::before { background: transparent; border: 2px dashed #c9b6ff; }

/* ---------- stage (runway + sticky, driven by stage.js) ---------- */
.p2p-sticky { display: grid; gap: .75rem; align-content: start; }
.p2p-run.is-staged::after { content: ""; display: block; height: var(--stage-run, 0px); }
.p2p-run.is-staged .p2p-sticky { position: sticky; top: calc(var(--header-h) + 12px); }
.p2p-run.is-staged, .p2p-run.is-staged * { overflow-anchor: none; }

.p2p-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.p2p-hint { margin: 0; color: var(--text-2); font-size: .875rem; line-height: 1.6; }
.p2p-hint__scroll { display: none; }
.p2p-run.is-staged .p2p-hint__scroll { display: inline; }
.p2p-run.is-staged .p2p-hint__manual { display: none; }
.p2p-ctrl { display: inline-flex; align-items: center; gap: .5rem; }
.p2p-nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-3); background: rgb(255 255 255 / .03); color: var(--text-1); cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
.p2p-nav svg { width: 18px; height: 18px; }
.p2p-nav:hover:not(:disabled) { background: rgb(47 123 255 / .2); border-color: var(--blue-400); }
.p2p-nav:disabled { cursor: default; color: var(--text-3); border-color: var(--line-2); }
.p2p-nav:focus-visible, .p2p-tab:focus-visible, .p2p-scene:focus-visible, .p2p-mod:focus-visible, .p2p-limit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.p2p-count { min-width: 3.2em; color: var(--text-1); font-family: var(--font-num); font-size: .95rem; font-weight: 600; text-align: center; direction: ltr; }

/* rail: six stations on one thread */
.p2p-rail { position: relative; }
.p2p-thread { position: absolute; top: 19px; inset-inline: calc(100% / 12); height: 3px; border-radius: 3px; background: var(--line-2); pointer-events: none; }
.p2p-thread i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p2p-f, 0) * 100%); border-radius: inherit; background: linear-gradient(270deg, var(--blue-300), var(--blue-500)); box-shadow: 0 0 14px rgb(82 148 255 / .7); transition: width .45s var(--ease-out); }
.p2p-run.is-staged .p2p-thread i { width: calc(clamp(0, (var(--stage-p, 0) * 6 - .5) / 5, 1) * 100%); transition: width .12s linear; }
.p2p-tabs { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; }
.p2p-tab { display: grid; justify-items: center; align-content: start; gap: .15rem; min-height: 44px; padding: 0 .2rem .35rem; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; text-align: center; cursor: pointer; }
.p2p-tab__n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .2rem; border-radius: 50%; border: 2px solid var(--line-3); background: #0a1229; color: var(--text-2); font-family: var(--font-num); font-size: .875rem; font-weight: 600; transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out); }
.p2p-tab b { color: var(--text-1); font-size: .95rem; font-weight: 600; line-height: 1.45; }
.p2p-tab small { color: var(--text-3); font-size: .875rem; line-height: 1.4; }
.p2p-tab:hover b { color: #fff; }
.p2p-tab.is-past .p2p-tab__n { border-color: var(--blue-400); background: #12245a; color: var(--blue-200); }
.p2p-tab[aria-selected="true"] .p2p-tab__n { border-color: var(--blue-300); background: var(--blue-600); color: #fff; box-shadow: 0 0 0 6px rgb(47 123 255 / .2); transform: scale(1.08); }
.p2p-tab[aria-selected="true"] small { color: var(--blue-200); }
.p2p-meter { display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.p2p-meter i { height: 4px; border-radius: 4px; background: var(--line-2); transition: background var(--dur-2); }
.p2p-meter i.is-on { background: var(--blue-400); }

/* scene: desk with the paper | briefing card */
.p2p-scene { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; border-radius: 20px; }
.p2p-desk {
  position: relative; padding: 62px clamp(.6rem, .3rem + 1vw, 1.1rem) clamp(.7rem, .4rem + 1vw, 1.1rem); border-radius: 20px; min-width: 0;
  background:
    linear-gradient(rgb(140 184 255 / .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(140 184 255 / .07) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(90% 80% at 50% 0%, rgb(47 123 255 / .18), transparent 70%),
    #0a1430;
  border: 1px solid rgb(82 148 255 / .22);
}
/* the documents this one was built from, peeking out behind it */
.p2p-pile { position: absolute; top: 8px; inset-inline: clamp(.6rem, .3rem + 1vw, 1.1rem); height: 64px; margin: 0; padding: 0; list-style: none; }
.p2p-pile li { position: absolute; top: calc((3 - var(--d)) * 18px); inset-inline: calc(var(--d) * 14px); height: 44px; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .1rem .8rem 0; border-radius: 10px 10px 0 0; background: hsl(40 22% calc(93% - var(--d) * 7%)); color: #33405f; font-size: .875rem; line-height: 1.4; box-shadow: 0 -6px 16px -10px rgb(0 0 0 / .6); }
.p2p-pile li b { font-weight: 600; }
.p2p-pile li span { font-family: var(--font-num); direction: ltr; }
.p2p-pile li.is-empty { background: transparent; box-shadow: none; border: 1px dashed rgb(140 184 255 / .14); border-bottom: 0; }

.p2p-doc { position: relative; z-index: 2; display: grid; gap: .8rem; padding: 1rem 1.1rem .8rem; border-radius: 14px; background: #fbfaf7; color: #0b1630; box-shadow: 0 26px 50px -24px rgb(0 0 0 / .85), 0 0 0 1px rgb(10 20 48 / .06); font-size: .95rem; line-height: 1.7; }
.p2p-doc::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 4px; border-radius: 4px; background: var(--blue-500); }
.p2p-doc--approve::before { background: #6b4fd8; }
.p2p-doc--receipt::before { background: #0f7a4f; }
.p2p-doc--match::before { background: #b26a00; }
.p2p-doc--review::before { background: #0a1430; }
.p2p-doc__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding-bottom: .6rem; border-bottom: 1px solid #e3e0d6; }
.p2p-doc__type { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.p2p-doc__type svg { width: 20px; height: 20px; color: #1f4fd1; }
.p2p-doc__head .ident { color: #3b4766; font-family: var(--font-num); font-size: .95rem; font-weight: 600; }
.p2p-doc__foot { margin: 0; color: #4c5878; font-size: .875rem; }
.p2p-doc .money .sar, .p2p-doc th .sar { color: inherit; }
.p2p th .sar { opacity: 1; } /* full-ink sign on paper; the dimmed header sign is for dark windows */

.p2p-stamp { display: inline-flex; align-items: center; margin-inline-start: auto; padding: .1rem .6rem; border: 2px solid currentColor; border-radius: 8px; font-size: .875rem; font-weight: 700; line-height: 1.5; transform: rotate(-4deg); }
.p2p-stamp--ok { color: #0d6b45; background: #e6f6ee; }
.p2p-stamp--wait { color: #7a4f00; background: #fff4dc; }
.p2p-stamp--warn { color: #a3200f; background: #ffece8; }
.p2p-inbox .p2p-stamp { margin-inline-start: 0; transform: none; border-width: 1px; }

.p2p-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; margin: 0; }
.p2p-fields > div, .p2p-sum > div, .p2p-qty dl > div { min-width: 0; }
.p2p-fields dt, .p2p-sum dt, .p2p-qty dt, .p2p-stock small { color: #4c5878; font-size: .875rem; font-weight: 500; }
.p2p-fields dd, .p2p-qty dd { margin: 0; color: #0b1630; font-size: 1rem; font-weight: 600; }
.p2p-gauge { display: grid; gap: .35rem; padding: .6rem .75rem; border-radius: 10px; background: #f1efe8; }
.p2p-gauge small { color: #33405f; font-size: .875rem; }
.p2p-gauge__bar, .p2p-qty__bar { position: relative; display: block; height: 10px; border-radius: 10px; background: #dcd8cc; overflow: hidden; }
.p2p-gauge__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #c2410c; }
.p2p-gauge__bar s { position: absolute; inset-block: -2px; inset-inline-start: calc(var(--t) * 100%); width: 2px; background: #0b1630; }
.p2p-route { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: #1f4fd1; font-size: .95rem; font-weight: 600; }
.p2p-route svg { width: 18px; height: 18px; }

.p2p-inbox { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.p2p-inbox li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: .3rem .7rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid #e3e0d6; color: #33405f; font-size: .95rem; }
.p2p-inbox li b { color: #0b1630; font-weight: 600; }
.p2p-inbox li.is-on { border-color: #9cb8ff; background: #eef3ff; box-shadow: inset 3px 0 0 #1f4fd1; }
[dir="rtl"] .p2p-inbox li.is-on { box-shadow: inset -3px 0 0 #1f4fd1; }

.p2p-sign { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .55rem .75rem; border-radius: 10px; background: #f1efe8; }
.p2p-sign > span:not(.p2p-sign__arrow) { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.p2p-sign small { color: #4c5878; font-size: .875rem; }
.p2p-sign b { color: #0b1630; font-weight: 600; }
.p2p-sign em { padding: 0 .45rem; border-radius: 999px; background: #e6f6ee; color: #0d6b45; font-size: .875rem; font-style: normal; font-weight: 600; }
.p2p-sign__arrow svg { width: 18px; height: 18px; color: #4c5878; }
.p2p-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.p2p-fake { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .85rem; border-radius: 9px; border: 1px solid #cfcab9; color: #33405f; font-size: .875rem; font-weight: 600; }
.p2p-fake.is-on { border-color: #1f4fd1; background: #1f4fd1; color: #fff; }

.p2p-lines { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.p2p-lines th { padding: .35rem .5rem; border-bottom: 1px solid #d8d4c8; color: #4c5878; font-size: .875rem; font-weight: 600; text-align: start; }
.p2p-lines td { padding: .45rem .5rem; border-bottom: 1px solid #ece9e0; color: #0b1630; overflow-wrap: anywhere; }
.p2p-lines th:not(:first-child), .p2p-lines td:not(:first-child) { text-align: end; }
.p2p-lines tfoot td { border-bottom: 0; border-top: 2px solid #0b1630; font-weight: 700; }
.p2p-lines .is-flag td { background: #fff7ea; }
.p2p-lines .is-liab td { background: #eef3ff; font-weight: 700; }
.p2p-flagged { padding: .05rem .35rem; border-radius: 6px; background: #ffe2dc; color: #a3200f; }
.p2p-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.p2p-sum dd { margin: 0; font-weight: 600; }
.p2p-sum .is-grand { padding: .2rem .55rem; border-radius: 8px; background: #0b1630; }
.p2p-sum .is-grand dt { color: #c4dbff; }
.p2p-sum .is-grand dd { color: #fff; }
.p2p-qty { display: grid; gap: .55rem; }
.p2p-qty__bar { height: 14px; background: repeating-linear-gradient(135deg, #e7e3d7 0 6px, #d6d1c3 6px 12px); }
.p2p-qty__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #0f7a4f; }
.p2p-qty3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: .45rem .7rem; border-radius: 10px; background: #f1efe8; }
.p2p-qty3 > div { min-width: 0; }
.p2p-qty3 dt { color: #4c5878; font-size: .875rem; }
.p2p-qty3 dd { margin: 0; font-weight: 600; }
.p2p-qty dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.p2p-stock { display: grid; gap: .15rem; padding: .55rem .75rem; border-radius: 10px; background: #eef7f2; }
.p2p-stock p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: 1.05rem; }
.p2p-stock s { color: #4c5878; }
.p2p-stock svg { width: 18px; height: 18px; color: #0d6b45; }
.p2p-stock b { color: #0d6b45; font-weight: 700; }
.p2p-now { padding: 0 .5rem; border-radius: 999px; background: #0f7a4f; color: #fff; font-size: .875rem; font-weight: 600; }
.p2p-variance { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .6rem .75rem; border-radius: 10px; border: 1px solid #f0c98a; background: #fff4dc; color: #5c3b00; font-size: .95rem; line-height: 1.7; }
.p2p-variance svg { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: #a35d00; }
.p2p-variance b { color: #5c3b00; }

/* briefing card */
.p2p-card { display: grid; gap: .65rem; min-width: 0; padding: 1rem 1.1rem; border-radius: 20px; background: rgb(14 24 52 / .92); border: 1px solid var(--line-2); }
.p2p-card__k { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--blue-300); font-size: .875rem; font-weight: 600; }
.p2p-card__k span { padding: .05rem .55rem; border-radius: 999px; background: rgb(47 123 255 / .16); color: var(--blue-200); }
.p2p-card__t { margin: 0; color: var(--text-1); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.45; }
.p2p-card__t .ident { color: var(--blue-200); font-family: var(--font-num); font-size: 1rem; }
.p2p-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.p2p-facts > div { min-width: 0; padding: .45rem .6rem; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid var(--line-1); }
.p2p-facts dt { color: var(--text-3); font-size: .875rem; }
.p2p-facts dd { margin: 0; color: var(--text-1); font-size: .95rem; font-weight: 600; line-height: 1.55; }
.p2p-state { display: inline; padding: 0 .35rem; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p2p-state.is-ok { background: rgb(63 214 156 / .16); color: #8ff0c7; }
.p2p-state.is-wait { background: rgb(140 184 255 / .16); color: var(--blue-200); }
.p2p-state.is-warn { background: rgb(242 187 85 / .16); color: #ffd58a; }
.p2p-did { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.85; }
.p2p-guard { margin: 0; padding: .5rem .7rem; border-radius: 10px; border: 1px solid rgb(63 214 156 / .3); background: rgb(63 214 156 / .07); color: var(--text-1); font-size: .95rem; line-height: 1.75; }
.p2p-guard b { color: var(--ok); font-weight: 600; }
.p2p-next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .1rem .6rem; padding: .5rem .7rem; border-radius: 10px; background: linear-gradient(270deg, rgb(47 123 255 / .2), rgb(47 123 255 / .05)); border: 1px solid rgb(82 148 255 / .35); }
.p2p-next small { grid-column: 1 / -1; color: var(--blue-200); font-size: .875rem; font-weight: 600; }
.p2p-next b { color: #fff; font-weight: 600; }
.p2p-next span { color: var(--text-1); font-size: .95rem; }
.p2p-ev { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.p2p-ev li { color: var(--text-2); font-size: .875rem; line-height: 1.7; }
.p2p-ev li > b { margin-inline-end: .2rem; color: var(--text-1); }
.p2p-mods { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.p2p-mods > small { color: var(--text-3); font-size: .875rem; margin-inline-end: .15rem; }
.p2p-mod { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .1rem .65rem; border-radius: 999px; border: 1px solid rgb(82 148 255 / .4); color: var(--blue-200); font-size: .875rem; font-weight: 600; text-decoration: none; }
.p2p-mod:hover { background: rgb(47 123 255 / .18); color: #fff; }
.p2p-mod small { color: #ffd58a; font-size: .875rem; font-weight: 500; }

.p2p-limit { margin: 0; padding: .65rem .85rem; border-radius: 12px; border: 1px dashed var(--line-3); color: var(--text-2); font-size: .95rem; line-height: 1.75; }
.p2p-limit b { color: var(--text-1); }

/* ---------- motion (transform only; never opacity on text) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .p2p-scene.is-entering .p2p-doc { animation: p2p-doc-in .62s var(--ease-out) both; }
  .p2p[data-dir="back"] .p2p-scene.is-entering .p2p-doc { animation-name: p2p-doc-back; }
  .p2p-scene.is-entering .p2p-stamp { animation: p2p-stamp-in .5s var(--ease-out) .28s both; }
  .p2p-scene.is-entering .p2p-pile li { animation: p2p-pile-in .55s var(--ease-out) both; animation-delay: calc(var(--d) * 50ms); }
  .p2p-scene.is-entering .p2p-card > * { animation: p2p-card-in .5s var(--ease-out) both; }
  .p2p-scene.is-entering .p2p-card > :nth-child(n+4) { animation-delay: 70ms; }
  .p2p-scene.is-entering .p2p-card > :nth-child(n+6) { animation-delay: 140ms; }
  .p2p-scene.is-entering .p2p-qty__bar i, .p2p-scene.is-entering .p2p-gauge__bar i { animation: p2p-fill .8s var(--ease-out) .2s both; }
}
@keyframes p2p-doc-in { from { transform: translate3d(0, 22px, 0) rotate(-.8deg) scale(.985); } to { transform: none; } }
@keyframes p2p-doc-back { from { transform: translate3d(0, -16px, 0) rotate(.6deg) scale(.985); } to { transform: none; } }
@keyframes p2p-stamp-in { from { transform: rotate(-14deg) scale(1.5); } to { transform: rotate(-4deg) scale(1); } }
@keyframes p2p-pile-in { from { transform: translateY(14px); } to { transform: none; } }
@keyframes p2p-card-in { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes p2p-fill { from { transform: scaleX(0); } to { transform: none; } }
.p2p-qty__bar i, .p2p-gauge__bar i { transform-origin: right center; }
[dir="ltr"] .p2p-qty__bar i, [dir="ltr"] .p2p-gauge__bar i { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  .p2p *, .p2p *::before, .p2p *::after { animation: none !important; transition: none !important; }
}

/* ---------- compact desktop heights (stage must fit under the header) ---------- */
@media (min-width: 1081px) and (max-height: 860px) {
  /* W17-03: 1536×820 / 1440×800 measured 730px against 728/708px of room. Only chrome, gaps and the decorative
     pile shrink here; every reading size stays as it is (≥14px) and line heights stay ≥1.55. */
  .p2p-sticky { gap: .45rem; }
  .p2p-thread { top: 15px; }
  .p2p-tab { gap: .05rem; padding-bottom: .2rem; }
  .p2p-tab__n { width: 32px; height: 32px; margin-bottom: .1rem; }
  .p2p-tab b { line-height: 1.35; }
  .p2p-tab small { line-height: 1.3; }
  /* pile: the two latest earlier documents instead of three (decorative, aria-hidden) */
  .p2p-desk { padding-top: 42px; }
  .p2p-pile li:first-child { display: none; }
  .p2p-pile li { top: calc((2 - var(--d)) * 16px); }
  .p2p-doc { gap: .5rem; padding: .8rem 1rem .65rem; }
  .p2p-doc__head { padding-bottom: .5rem; }
  .p2p-lines td { padding-block: .35rem; }
  .p2p-card { gap: .45rem; padding: .8rem .95rem; }
  .p2p-facts { grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.3fr); }
  .p2p-facts > div { padding: .35rem .55rem; }
  .p2p-facts dd { line-height: 1.5; }
  .p2p-did { line-height: 1.65; }
  .p2p-guard { padding: .4rem .65rem; line-height: 1.6; }
  .p2p-next { padding: .4rem .65rem; }
  .p2p-ev li { line-height: 1.55; }
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 1080px) {
  .p2p-head { grid-template-columns: minmax(0, 1fr); }
  .p2p-legend { grid-column: 1; grid-row: auto; display: flex; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .p2p-scene { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* W17-03: the first document arrives sooner. Head, legend, controls and tabs are tighter, the hint shares a row
     with the arrows, and the pile keeps two earlier papers. Reading sizes are unchanged (≥14px, controls ≥40px). */
  .p2p { gap: .7rem; border-radius: 20px; }
  .p2p-head { gap: .3rem; }
  .p2p-head h4 { font-size: 1.15rem; line-height: 1.5; }
  .p2p-lead { line-height: 1.7; }
  .p2p-legend { gap: .3rem; margin-top: .1rem; }
  .p2p-legend li { gap: .35rem; padding: .05rem .5rem; }
  .p2p-sticky { gap: .5rem; }
  .p2p-desk { padding-top: 42px; }
  .p2p-pile li:first-child { display: none; }
  .p2p-pile li { top: calc((2 - var(--d)) * 16px); }
  .p2p-thread { display: none; }
  .p2p-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .p2p-tab { grid-auto-flow: column; justify-content: start; align-items: center; gap: .4rem; min-height: 44px; padding: .2rem .4rem; border: 1px solid var(--line-2); text-align: start; }
  .p2p-tab__n { width: 30px; height: 30px; margin: 0; font-size: .875rem; }
  .p2p-tab[aria-selected="true"] { border-color: var(--blue-400); background: rgb(47 123 255 / .14); }
  .p2p-tab[aria-selected="true"] .p2p-tab__n { transform: none; box-shadow: none; }
  .p2p-tab small { display: none; }
  .p2p-tab b { font-size: .875rem; line-height: 1.35; }
  .p2p-meter { display: grid; }
  .p2p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p2p-facts__state { grid-column: 1 / -1; }
  .p2p-sum, .p2p-qty dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .p2p-sum .is-grand { grid-column: 1 / -1; }
}
@media (min-width: 360px) and (max-width: 720px) {
  .p2p-bar { flex-wrap: nowrap; }
  .p2p-hint { flex: 1 1 auto; min-width: 0; line-height: 1.55; }
}
@media (max-width: 440px) {
  .p2p-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p2p-fields { grid-template-columns: minmax(0, 1fr); }
  .p2p-inbox li { grid-template-columns: minmax(0, 1fr) auto; }
  .p2p-inbox li > span:not(.p2p-stamp) { grid-column: 1; grid-row: 2; }
  .p2p-inbox li .p2p-stamp { grid-row: 1 / span 2; grid-column: 2; }
  .p2p-lines { font-size: .875rem; }
  .p2p-lines th, .p2p-lines td { padding-inline: .25rem; }
  .p2p-doc { padding: .85rem .75rem .7rem; }
  .p2p-pile li { inset-inline: calc(var(--d) * 9px); padding-inline: .55rem; }
  .p2p-pile li span { display: none; }
}
/* W17-03 regression repair: keep the W12 business-journey scroll stage within tall-desktop viewports
   after truthful A4 copy. Compact only decorative panel gaps, not type or data. */
@media (min-width: 1081px) and (min-height: 700px) {
  .jr-section .jr-panel { row-gap: .75rem; }
}

@media print {
  .p2p-run::after { display: none !important; }
  .p2p-sticky { position: static !important; }
}