/* Reading diagrams for contract scope, open-source promises and device releases. */
.practice-article{--apv-sage:var(--v-sage,#b8dbba);--apv-violet:var(--v-violet,#bdb7ff);--apv-frame:var(--v-frame,#47463f);--apv-panel:var(--v-panel,#151512)}
.practice-article :where(figure,dl){margin:0}
.practice-article :where(dd){margin:0}
.practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device){position:relative;margin:30px 0 36px;padding:28px 30px;background:var(--apv-panel);border:1px solid var(--apv-frame)}
.practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device)>figcaption{margin:0 0 24px;font:500 clamp(22px,2.7vw,29px)/1.3 var(--sans);letter-spacing:-.02em}
.practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device)>p{font-size:16px;line-height:1.6}
.practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device)>.v-note{margin:20px 0 0;font-size:15px}
.practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device)>figcaption .v-eyebrow{display:block;font-size:13px;letter-spacing:.06em;margin-bottom:12px}
.practice-article :where(.apv-sides,.apv-payment,.apv-delivery,.apv-promises,.apv-record,.apv-compat,.apv-source-routes,.apv-device,.apv-release-record){min-width:0;overflow-wrap:anywhere}

/* A navigable map of the seven linked parts of a deal. */
.reading .apv-route{display:block;margin:32px 0 42px;padding:25px 0;border-block:1px solid var(--line);font:16px/1.4 var(--sans)}
.reading .apv-route-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;gap:0 32px;padding:0;margin:0}
.reading .apv-route-list li{margin:0;padding:0;border-bottom:1px solid var(--line)}
.apv-route-list a{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;gap:12px;align-items:center;min-height:74px;padding:17px 0;text-decoration:none}
.apv-route-number{color:var(--red);font:13px/1.4 var(--mono)}
.apv-route-arrow{color:var(--muted);font-size:18px;transition:transform .2s ease}
.apv-route-list a:hover .apv-route-arrow,.apv-route-list a:focus-visible .apv-route-arrow{transform:translate(2px,-2px)}
.apv-route-more{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:24px;color:var(--muted);font-size:15px}

/* Two sides of the same commercial obligation. */
.apv-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:28px 0;border-block:1px solid var(--line)}
.apv-side{padding:24px 26px 24px 0;min-width:0}
.apv-side+.apv-side{padding:24px 0 24px 26px;border-left:1px solid var(--line)}
.reading .apv-side h3{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:22px}
.apv-side h3 span{color:var(--apv-sage);font:32px/1 var(--mono)}
.apv-side+.apv-side h3 span{color:var(--apv-violet)}
.reading .apv-side p{margin:0;font-size:17px;line-height:1.6}

/* The payment example is a path from a missing mechanism to a concrete edit. */
.apv-payment dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.apv-payment-step{position:relative;min-width:0;border-top:3px solid var(--apv-sage);padding-top:16px}
.apv-payment-step:first-child{border-color:var(--red)}
.apv-payment-step:last-child{border-color:var(--apv-violet)}
.apv-payment-step+.apv-payment-step::before{content:'→';position:absolute;left:-24px;top:14px;color:var(--muted)}
.apv-payment dt{font-size:18px;font-weight:500;line-height:1.4;margin-bottom:12px}
.apv-payment dd{color:var(--muted);font-size:16px;line-height:1.6}

/* The delivered product branches across infrastructure and the customer. */
.apv-delivery-branches{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding-top:24px;margin:28px 0}
.apv-delivery-branches::before{content:'';position:absolute;top:0;left:25%;right:25%;height:24px;border:1px solid var(--apv-frame);border-bottom:0}
.apv-delivery-branches::after{content:'';position:absolute;top:-13px;left:50%;height:14px;border-left:1px solid var(--red)}
.apv-delivery-node{position:relative;padding:20px 24px;border:1px solid var(--apv-frame);min-width:0}
.apv-code-mark{display:block;color:var(--apv-sage);font:28px/1.3 var(--mono);margin-bottom:16px}
.apv-delivery-node+.apv-delivery-node .apv-code-mark{color:var(--apv-violet)}
.reading .apv-delivery-node h3{margin:0 0 12px;font-size:22px}
.reading .apv-delivery-node p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}

/* Three promises get three independent records, rather than a crowded matrix. */
.apv-promises{margin:28px 0 36px}
.apv-promises>.v-note{margin-bottom:24px}
.apv-promise{margin:0 0 22px;border:1px solid var(--apv-frame);background:var(--apv-panel)}
.reading .apv-promise h3{display:flex;gap:18px;margin:0;padding:23px 26px;border-bottom:1px solid var(--line);font-size:22px;line-height:1.4}
.apv-record-id{flex:none;color:var(--red);font:14px/2 var(--mono)}
.apv-promise dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.apv-promise dl>div{min-width:0;padding:23px 24px}
.apv-promise dl>div+div{border-left:1px solid var(--line)}
.apv-promise dt{color:var(--muted);font:13px/1.55 var(--mono);letter-spacing:.02em;margin-bottom:14px}
.apv-promise dd{font-size:16px;line-height:1.6}
.apv-promise dl>div:last-child{border-top:2px solid var(--apv-sage);margin-top:-1px}
.apv-promise dl>div:last-child dt{color:var(--apv-sage)}
.apv-record{margin:30px 0;border-block:1px solid var(--line);padding:26px 0}
.apv-record dl>div{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;padding:20px 0;border-top:1px solid var(--line)}
.apv-record dt{display:flex;gap:16px;font-size:18px;line-height:1.5}
.apv-record dt span{color:var(--apv-sage);font:13px/2 var(--mono)}
.apv-record dd{font-size:16px;line-height:1.6;color:var(--muted)}
.reading .apv-checklist{padding-left:0}

/* Direction matters for compatibility. Status is always written, never colour only. */
.apv-compat-row{display:grid;grid-template-columns:minmax(240px,.95fr) minmax(0,1.15fr);gap:28px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.apv-compat-path{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;gap:10px;font:14px/1.5 var(--mono)}
.apv-compat-path span{padding:12px 8px;border:1px solid var(--apv-frame);text-align:center}
.apv-compat-path b{color:var(--muted);font-weight:400;text-align:center}
.apv-compat-0 .apv-compat-path{color:var(--apv-sage)}
.apv-compat-1 .apv-compat-path,.apv-compat-2 .apv-compat-path{color:var(--apv-violet)}
.apv-compat-row strong{font-size:17px;line-height:1.4}
.reading .apv-compat-row p{font-size:16px;line-height:1.6;color:var(--muted);margin:8px 0 0}

/* Source options remain visibly separate. Section references are real anchors in the text. */
.apv-source-routes dl>div{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;border-top:1px solid var(--line);padding:22px 0}
.apv-source-routes dt{display:flex;align-items:flex-start;gap:16px;font-size:18px;line-height:1.4}
.apv-section-ref{flex:none;color:var(--apv-sage);font:13px/1.5 var(--mono);padding:4px 7px;border:1px solid #b8dbba5c}
.apv-source-routes dd{font-size:16px;line-height:1.65;color:var(--muted)}

/* Device checks connect as a circuit, with every action readable without motion. */
.reading .apv-device ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:30px 0 20px;padding:0}
.reading .apv-device li{position:relative;min-width:0;margin:0;padding:0}
.apv-device li+li::before{content:'';position:absolute;left:-32px;right:calc(100% - 1px);top:28px;border-top:1px solid var(--apv-frame)}
.apv-device-step{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--apv-frame);color:var(--apv-sage);font:26px/1 var(--mono);background:var(--apv-panel);margin-bottom:20px}
.reading .apv-device h3{font-size:21px;margin:0 0 10px}
.reading .apv-device li p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.apv-release-record{margin:28px 0 32px;border-top:1px solid var(--apv-frame);padding-top:24px}
.reading .apv-release-record .apv-checklist{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 30px;margin-bottom:0}
.reading .apv-distributor-table .promise-table{font-size:16px}
.reading .apv-distributor-table .promise-table td::before{font-size:13px}
.apv-release-record .v-checklist>li::before{top:21px;width:9px;height:9px;border:1px solid var(--apv-sage,#b8dbba);transform:none}
.reading .apv-distributor-table .promise-table td,.reading .apv-distributor-table .promise-table th{padding:20px}

@media(max-width:760px){
 .apv-promise dl{grid-template-columns:1fr}.apv-promise dl>div+div{border-left:0;border-top:1px solid var(--line)}.apv-promise dl>div:last-child{border-top:2px solid var(--apv-sage);margin-top:0}
 .apv-compat-row{grid-template-columns:1fr;gap:18px}.apv-compat-path{max-width:420px}
 .apv-source-routes dl>div{grid-template-columns:1fr;gap:14px}
 .apv-record dl>div{grid-template-columns:1fr;gap:12px}
 .apv-payment dl{grid-template-columns:1fr;gap:24px}.apv-payment-step+.apv-payment-step::before{content:none}
}
@media(max-width:600px){
 .practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device){padding:24px 18px}
 .reading .apv-route-list{grid-template-columns:1fr}.apv-route-list a{min-height:65px}
 .apv-sides{grid-template-columns:1fr}.apv-side,.apv-side+.apv-side{padding:22px 0;border-left:0}.apv-side+.apv-side{border-top:1px solid var(--line)}
 .apv-delivery-branches{grid-template-columns:1fr;gap:18px;padding:0}.apv-delivery-branches::before,.apv-delivery-branches::after{content:none}.apv-delivery-node{padding:20px}
 .reading .apv-promise h3{padding:20px 18px;font-size:21px;gap:12px}.apv-promise dl>div{padding:20px 18px}
 .apv-compat-path{font-size:13px;gap:6px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)}.apv-compat-path span{padding:12px 5px}
 .reading .apv-device ol{grid-template-columns:1fr;gap:0}.reading .apv-device li{padding:0 0 26px 76px;min-height:80px}.apv-device li:last-child{padding-bottom:0}.apv-device-step{position:absolute;left:0;top:0}.apv-device li+li::before{top:-25px;left:28px;right:auto;height:25px;border:0;border-left:1px solid var(--apv-frame)}
 .reading .apv-release-record .apv-checklist{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.apv-route-arrow{transition:none}.apv-route-list a:hover .apv-route-arrow,.apv-route-list a:focus-visible .apv-route-arrow{transform:none}}
@media print{
 .practice-article{--apv-sage:#222;--apv-violet:#333;--apv-frame:#999;--apv-panel:#fff}
 .practice-article :where(.apv-payment,.apv-delivery,.apv-compat,.apv-source-routes,.apv-device){background:#fff;border-color:#999;padding:16px;margin:18px 0}
 .apv-promise{background:#fff;break-inside:avoid}.apv-payment,.apv-delivery,.apv-device,.apv-sides{break-inside:avoid}
 .apv-compat-row,.apv-source-routes dl>div,.apv-record dl>div{break-inside:avoid}
 .practice-article :where(figcaption,h3,dt){break-after:avoid}
 .apv-promise dl{grid-template-columns:repeat(3,minmax(0,1fr))}.apv-promise dl>div{padding:12px}.apv-promise dl>div+div{border-left:1px solid #999;border-top:0}.apv-promise dl>div:last-child{border-top:0}
 .apv-compat-path{color:#222!important}.apv-device-step{background:#fff}.apv-route-number,.apv-record-id{color:#222}
}