.resource-nav { background:#293cff; color:#fff; padding:14px max(20px,calc((100vw - 1080px)/2)); display:flex; gap:16px 28px; flex-wrap:wrap; align-items:center; font:500 15px/1.5 system-ui,sans-serif; }
.resource-nav a { color:#fff; text-decoration:none; padding:8px 0; }
.resource-nav .resource-brand { font-weight:750; margin-right:auto; }
.resource-brand span { color:#d8ff00; margin-right:8px; }
.resource-nav .resource-assess { border:1px solid #bfc5ff; padding:8px 12px; }
.resource-nav a:hover { text-decoration:underline; }
.resource-nav a:focus-visible, .resource-share :focus-visible, .pack-form :focus-visible { outline:3px solid #a7be00; outline-offset:4px; }
.resource-share { display:flex; gap:12px; flex-wrap:wrap; align-items:center; border-block:1px solid #c8cdd2; padding:16px 0; margin:24px 0; font:400 15px/1.5 system-ui,sans-serif; }
.resource-share a, .resource-share button { color:#173ba0; }
.resource-share button { background:transparent; border:1px solid #7f8ca0; padding:10px 14px; border-radius:2px; font:inherit; cursor:pointer; }
.resource-share [role=status] { width:100%; font-size:14px; }
.resource-share [role=status]:empty { display:none; }
.resource-next { border-top:2px solid #c8cdd2; margin-top:36px; padding-top:24px; }
.resource-next a { color:#173ba0; }
.resource-next p { max-width:65ch; }
.pack-form { display:grid; gap:14px; max-width:520px; }
.pack-form label { display:grid; gap:6px; font-weight:600; }
.pack-form input { box-sizing:border-box; width:100%; padding:12px; border:1px solid #7f8ca0; border-radius:2px; font:inherit; background:white; color:#14213d; }
.pack-form button { justify-self:start; background:#293cff; border:0; color:white; padding:14px 22px; font:600 16px/1.4 system-ui,sans-serif; cursor:pointer; }
.pack-form button:disabled { opacity:.6; cursor:wait; }
.pack-form .pack-note { font-size:14px; font-weight:400; margin:0; }
.pack-form [role=alert] { color:#9c1c20; }
.pack-pot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.pack-downloads { border:1px solid #293cff; background:#fff; padding:22px; }
.pack-downloads a { display:inline-block; padding:10px 0; color:#173ba0; }
@media(max-width:600px) { .resource-nav { gap:8px 20px; } .resource-nav .resource-brand { flex-basis:100%; } }
.resource-share [data-send-share] { background:#293cff; border-color:#293cff; color:#fff; font-weight:600; }
.share-form { flex-basis:100%; display:grid; gap:12px; max-width:420px; margin-top:6px; padding-top:14px; border-top:1px solid #c8cdd2; }
.share-form label { display:grid; gap:5px; font-weight:600; font-size:14px; }
.share-form input { box-sizing:border-box; width:100%; padding:11px; border:1px solid #7f8ca0; border-radius:2px; font:inherit; background:#fff; color:#14213d; }
.share-form button { justify-self:start; background:#293cff; border:0; color:#fff; padding:12px 20px; font:600 15px/1.4 system-ui,sans-serif; cursor:pointer; }
.share-form button:disabled { opacity:.6; cursor:wait; }
.share-form .share-note { margin:0; font-size:13px; font-weight:400; color:#4a545e; }
/* A class that sets display defeats the hidden attribute, because [hidden]'s
   display:none lives in the user-agent stylesheet and loses to any author rule.
   The pack form escapes this only because its page happens to declare
   [hidden]{display:none!important} inline; these pages do not all do that, so
   the rule belongs with the component that needs it. */
.share-form[hidden] { display:none; }
