/* A local request/decision exchange, followed by central reporting. */
.access-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.access-toggle { flex:none; color:#c4e3e7; background:transparent; border:1px solid #426271; border-radius:8px; padding:8px 12px; font-family:inherit; font-size:13px; font-weight:500; line-height:1.4; cursor:pointer; }
.access-toggle:hover { background:#ffffff0d; color:#fff; }
.access-toggle:focus-visible,.access-details summary:focus-visible { outline:2px solid #83e4dc; outline-offset:4px; }
.access-journey { margin:0; --cycle:18s; }
.access-map { display:grid; grid-template-columns:minmax(0,1fr) 100px minmax(0,1.18fr) 100px minmax(0,1fr); align-items:center; }
.access-node { min-width:0; padding:16px 16px; border:1px solid #365363; border-radius:14px; background:#132c3d; text-align:center; }
.access-node h3 { font-size:clamp(18px,1.3vw,23px); }
.detail-page .access-node p { font-size:14px; color:#c4d5df; line-height:1.5; margin-top:8px; }
.access-visual { position:relative; height:134px; margin:10px 0 12px; padding-bottom:26px; display:flex; align-items:center; justify-content:center; }
.access-visual svg { width:145px; height:76px; max-width:100%; fill:none; stroke:#90c9cd; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.access-state { position:absolute; left:0; right:0; bottom:0; color:#93edcc; font-size:13px; font-weight:600; opacity:0; }
.state-request,.state-checking { color:#d8e7ef; }
.access-connector { text-align:center; font-size:11px; color:#aac6d5; align-self:center; margin-top:-25px; }
.packet-track { position:relative; margin:10px 0; height:2px; background:#41616f; }
.packet { position:absolute; width:9px; height:9px; border-radius:50%; background:#8be6d6; top:-3.5px; left:0; box-shadow:0 0 10px #80edda60; opacity:0; }
.return-track { margin-top:16px; }
.record-label { display:block; margin-top:14px; }
.mini-console { width:100%; max-width:205px; height:88px; border:1px solid #527485; border-radius:8px; background:#0b2131; padding:10px; text-align:left; }
.mini-top { display:flex; gap:4px; align-items:center; color:#d5ebe9; font-size:11px; font-weight:700; }
.mini-top>span { margin-right:auto; }.mini-top i { width:3px; height:3px; background:#638c9c; border-radius:50%; }
.mini-columns,.mini-record { display:flex; justify-content:space-between; gap:5px; font-size:10px; padding-top:8px; }
.mini-columns { color:#91adbd; }.mini-record { color:#d1e1e8; opacity:0; }.mini-record b { color:#8be6ba; font-weight:600; }
.mini-placeholder { height:3px; width:55%; background:#2b495b; margin-top:8px; border-radius:2px; }
.access-journey figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:20px; font-size:13px; color:#bdd1dc; text-align:center; }
.access-example { color:#83d9cd; }
.access-details { margin-top:18px; border-top:1px solid #365363; padding-top:14px; font-size:13px; color:#b7cdd9; }
.access-details summary { cursor:pointer; width:fit-content; }
.detail-page .access-details p { font-size:14px; max-width:1000px; }
.request-packet { animation:request-flight var(--cycle) linear infinite; }
.response-packet { animation:return-flight var(--cycle) linear infinite; }
.record-packet { animation:record-flight var(--cycle) linear infinite; }
.state-request { animation:request-state var(--cycle) linear infinite; }
.state-checking { animation:checking-state var(--cycle) linear infinite; }
.state-approved { animation:approved-state var(--cycle) linear infinite; }
.state-applied { animation:applied-state var(--cycle) linear infinite; }
.state-recorded,.mini-record { animation:recorded-state var(--cycle) linear infinite; }
.appliance-node { animation:appliance-glow var(--cycle) linear infinite; }
.access-paused .access-journey * { animation-play-state:paused !important; }
@keyframes request-flight { 0%,8%{left:0;opacity:0} 10%{left:0;opacity:1} 23%{left:calc(100% - 9px);opacity:1} 25%,100%{left:calc(100% - 9px);opacity:0} }
@keyframes return-flight { 0%,55%{left:calc(100% - 9px);opacity:0} 57%{left:calc(100% - 9px);opacity:1} 66%{left:0;opacity:1} 68%,100%{left:0;opacity:0} }
@keyframes record-flight { 0%,70%{left:0;opacity:0} 72%{left:0;opacity:1} 81%{left:calc(100% - 9px);opacity:1} 83%,100%{left:calc(100% - 9px);opacity:0} }
@keyframes request-state { 0%,3%{opacity:0} 6%,61%{opacity:1} 65%,100%{opacity:0} }
@keyframes checking-state { 0%,23%{opacity:0} 26%,50%{opacity:1} 53%,100%{opacity:0} }
@keyframes approved-state { 0%,53%{opacity:0} 56%,94%{opacity:1} 99%,100%{opacity:0} }
@keyframes applied-state { 0%,65%{opacity:0} 69%,94%{opacity:1} 99%,100%{opacity:0} }
@keyframes recorded-state { 0%,81%{opacity:0} 85%,94%{opacity:1} 99%,100%{opacity:0} }
@keyframes appliance-glow { 0%,24%,96%,100%{border-color:#365363} 28%,90%{border-color:#70c8b7} }
@media(max-width:1100px) { .access-map { grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr) 90px minmax(0,1fr); }.access-node { padding:18px 10px; }.access-node h3 { font-size:19px; }.detail-page .access-node p { font-size:14px; } }
@media(max-width:760px) {
 .access-heading { flex-wrap:wrap; gap:0; margin-bottom:20px; }.access-heading .section-intro { margin-bottom:14px; }
 .access-map { grid-template-columns:1fr; }.access-node { padding:18px; }.access-visual { height:124px; margin:8px 0 14px; }
 .access-connector { width:110px; height:76px; margin:0 auto; position:relative; font-size:10px; }
 .access-connector>span:first-child { position:absolute; left:70px; top:18px; width:110px; text-align:left; }
 .access-connector>span:last-child { position:absolute; right:70px; top:42px; width:110px; text-align:right; margin:0; }
 .access-connector .packet-track { position:absolute; top:0; left:55px; width:76px; margin:0; transform:rotate(90deg); transform-origin:left; }
 .access-connector .return-track { left:39px; }.cloud-connector .packet-track { left:47px; }
 .access-journey figcaption { display:block; }.access-example { display:block; margin-bottom:7px; }
}
@media(prefers-reduced-motion:reduce) {
 .access-journey * { animation:none !important; }.access-toggle { display:none; }
 .state-approved,.state-applied,.state-recorded,.mini-record { opacity:1; }.appliance-node { border-color:#70c8b7; }
}

/* A compact sequence, without three large cards. */
.detail-page .flow-section{padding:26px 30px;border-radius:18px}
.flow-section .section-intro{margin-bottom:22px}
.flow-section .section-intro h2{font-size:clamp(23px,2.1vw,30px);line-height:1.25}
.access-map{grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr) 90px minmax(0,1fr);max-width:1060px;margin:0 auto;align-items:start}
.access-node{padding:6px 10px;border:0;border-radius:0;background:none;animation:none}
.access-node .step{font-size:11px;letter-spacing:.08em}
.access-node h3{font-size:18px;margin:0}
.detail-page .access-node p{font-size:13px;line-height:1.5;margin:6px auto 0;max-width:240px}
.access-visual{height:98px;margin:8px 0 10px;padding-bottom:24px}
.access-visual svg{width:115px;height:60px}
.access-state{font-size:12px}
.access-connector{margin-top:32px;align-self:start;font-size:10px}
.policy-question{max-width:220px;font-size:15px;font-weight:600;line-height:1.5;color:#edf5f6}
.mini-console{max-width:180px;height:72px;padding:7px 9px}
.mini-top{font-size:10px}.mini-columns,.mini-record{font-size:9px;padding-top:6px}.mini-placeholder{margin-top:6px}
.access-journey figcaption{margin-top:18px;font-size:11px;gap:4px 12px}
.access-data-boundary{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;border-top:1px solid #365363;padding-top:14px;margin-top:16px}
.access-data-boundary h3{font-size:13px;color:#dcebef;margin:0}
.access-data-boundary h3>span{color:#82cfc2;margin-right:5px}
.detail-page .access-data-boundary p{margin-top:5px;color:#b9ceda;font-size:12px;line-height:1.6}
.detail-page .boundary-note{font-size:11px;color:#a9bfce;margin-top:10px}.boundary-note a{color:#8dd9cf;text-underline-offset:3px}
.access-details{border:0;padding:0;margin-top:10px;font-size:12px}.detail-page .access-details p{font-size:12px}
@media(max-width:760px){
 .detail-page .flow-section{padding:22px 18px}
 .access-heading{margin-bottom:14px;gap:8px}.access-heading .section-intro{margin-bottom:0}.access-toggle{font-size:11px;padding:6px 9px}
 .access-map{grid-template-columns:1fr;max-width:460px}
 .access-node{display:grid;grid-template-columns:110px 1fr;column-gap:16px;text-align:left;padding:12px 0;align-items:center}
 .access-node .step{grid-column:2;align-self:end}.access-node h3{grid-column:2;grid-row:2;font-size:17px}.detail-page .access-node p{grid-column:2;grid-row:3;margin:3px 0 0;font-size:12px}
 .access-visual{grid-column:1;grid-row:1/4;height:100px;margin:0;padding-bottom:22px;text-align:center}
 .policy-question{font-size:12px;line-height:1.4}.access-state{font-size:10px}.mini-console{padding:6px;height:68px}.mini-columns,.mini-record{font-size:8px}.mini-record{gap:2px}
 .access-connector{height:42px;width:100px;margin:0 0 0 5px}
 .access-connector .packet-track{width:42px;left:55px}.access-connector .return-track{left:43px}.cloud-connector .packet-track{left:49px}
 .access-connector>span:first-child{left:77px;top:4px;width:160px}.access-connector>span:last-child{left:77px;right:auto;top:23px;width:160px;text-align:left}
 .access-journey figcaption{margin-top:12px}.access-example{display:inline;margin-right:8px}
 .access-data-boundary{grid-template-columns:1fr;gap:12px}.access-data-boundary p br{display:none}
}
