/* Full-height drawer quick reference with backdrop overlay */
.qr-trigger{position:fixed;inset:auto 0 auto auto;left:auto!important;right:0!important;top:50dvh!important;bottom:auto!important;transform:translateY(-50%);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px 8px 16px 10px;border:0;border-radius:10px 0 0 10px;background:var(--midnight,#16232a);color:#fff;font:700 11px/1 Aktiv,"aktiv-grotesk-extended",sans-serif;letter-spacing:.12em;text-transform:uppercase;writing-mode:vertical-rl;cursor:pointer;box-shadow:-4px 0 16px rgba(0,0,0,.2),-1px 0 4px rgba(0,0,0,.1);transition:background .2s ease,transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,opacity .24s cubic-bezier(.2,.7,.2,1);user-select:none;-webkit-user-select:none}
html:not(.past-cover) .qr-trigger,
html.is-overview .qr-trigger,
html.footer-visible .qr-trigger{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(100%)}
.qr-trigger:hover{background:var(--emerald,#0a6670);transform:translateY(-50%) translateX(-2px);box-shadow:-6px 0 20px rgba(0,0,0,.28)}
.qr-trigger[aria-expanded="true"]{background:var(--emerald,#0a6670);transform:translateY(-50%)}
.qr-backdrop{position:fixed;inset:0;background:rgba(17,22,21,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s ease}
.qr-backdrop.is-open{opacity:1;pointer-events:auto}
.qr-backdrop[hidden]{display:none!important}
body.qr-drawer-open{overflow:hidden}
.qr-panel{--qr-rule:#edf2f4;--qr-ink:#16232a;--qr-muted:#6b7f84;position:fixed;top:0;right:0;bottom:0;z-index:95;display:flex;flex-direction:column;width:390px;max-width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#fff;border-left:1px solid rgba(0,0,0,.08);box-shadow:-16px 0 48px rgba(17,22,21,.22);font:400 13px/1.6 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif;transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.qr-panel.is-open{transform:translateX(0)}
.qr-panel[hidden]{display:none!important}
.qr-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--qr-rule);background:#fff;flex-shrink:0}
.qr-title{margin:0;font:700 11px/1.3 Aktiv,"aktiv-grotesk-extended",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--qr-ink)}
.qr-title:focus{outline:none}
.qr-close{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--qr-ink);font:300 18px/1 Arial,sans-serif;cursor:pointer;transition:background .15s ease,color .15s ease}
.qr-close:hover{background:var(--mist,#e4eef0);color:var(--emerald,#0a6670)}
.qr-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:8px 26px 28px;scrollbar-width:thin;scrollbar-color:#b9cbce transparent}
.qr-section{padding:22px 0;border-bottom:1px solid var(--qr-rule)}
.qr-section:last-child{border-bottom:0}
.qr-section-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.qr-section-heading h3{margin:0;font:600 17px/1.3 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif;letter-spacing:-.01em;color:var(--qr-ink)}
.qr-section-heading>a{display:flex;align-items:center;gap:6px;color:var(--emerald,#0a6670);font:500 11px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif;text-decoration:none}
.qr-section-heading>a:hover{text-decoration:underline;text-underline-offset:3px}
.qr-colours{display:grid;gap:2px}
.qr-colour{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;margin:0;padding:8px 10px;border:0;border-radius:6px;background:transparent;color:var(--qr-ink);cursor:pointer;transition:background .15s ease}
.qr-colour:hover{background:#f4f7f8}
.qr-colour-left{display:flex;align-items:center;gap:12px}
.qr-swatch{display:block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.qr-swatch-emerald{background:#0a6670}
.qr-swatch-mist{background:#e4eef0;border:1px solid #c9d8da}
.qr-swatch-midnight{background:#16232a}
.qr-swatch-orange{background:#ff5804}
.qr-colour-left span{font:500 13px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif;color:var(--qr-ink)}
.qr-colour-right{display:flex;align-items:center;gap:8px}
.qr-colour-right code{font:500 12.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--qr-ink);letter-spacing:.02em}
.qr-copy-symbol{font-size:12px;color:var(--qr-muted);opacity:0;transition:opacity .15s ease}
.qr-colour:hover .qr-copy-symbol{opacity:1}
.qr-colour.is-copied code{color:var(--emerald,#0a6670);font-weight:700}
.qr-colour.is-copied .qr-copy-symbol{opacity:1;color:var(--emerald,#0a6670)}
.qr-feedback{min-height:22px;margin:6px 0 0 10px;color:var(--emerald,#0a6670);font:500 11px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif}
.qr-manual-copy{margin:4px 0 12px;padding:11px;border:1px solid var(--qr-rule);border-radius:7px;background:var(--mist,#e4eef0)}
.qr-manual-copy[hidden]{display:none!important}
.qr-manual-copy label{display:block;margin-bottom:6px;font:400 11px/1.5 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif}
.qr-manual-copy input{display:block;width:100%;min-height:40px;padding:8px;background:#fff;border:1px solid var(--qr-rule);border-radius:4px;color:var(--qr-ink);font:500 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
.qr-type-list{display:grid;gap:4px;margin:0}
.qr-type-list>div{display:flex;justify-content:space-between;align-items:baseline;padding:8px 10px;border-radius:6px;transition:background .15s ease}
.qr-type-list>div:hover{background:#f4f7f8}
.qr-type-list dt{color:var(--qr-muted);font:500 13px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif}
.qr-type-list dd{margin:0;color:var(--qr-ink);font-size:13px;font-weight:600}
.qr-type-list .qr-type-heading{font-family:"aktiv-grotesk-extended",Aktiv,sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em}
.qr-type-list .qr-type-sub{font-weight:700;font-size:13px}
.qr-type-list .qr-type-latin{font-weight:400;font-size:13px}
.qr-quick-links{display:grid;gap:4px}
.qr-link-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;text-decoration:none;transition:background .15s ease}
.qr-link-row:hover{background:#f4f7f8}
.qr-link-row span{color:var(--qr-muted);font:500 13px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif;transition:color .15s ease}
.qr-link-row i{font-style:normal;color:var(--qr-ink);font:500 13px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif;transition:color .15s ease}
.qr-link-row:hover span{color:var(--qr-ink)}
.qr-link-row:hover i{color:var(--emerald,#0a6670)}
.qr-logos{display:grid;grid-template-columns:1fr;gap:10px}
.qr-logo-card{min-width:0;overflow:hidden;border:1px solid var(--qr-rule);border-radius:10px;background:#fff}
.qr-logo-preview{display:flex;align-items:center;justify-content:center;height:74px;padding:14px 10px}
.qr-logo-preview-light{background:#fff}
.qr-logo-preview-dark{background:#16232a}
.qr-logo-preview img{display:block;width:100%;max-width:130px;height:auto;object-fit:contain}
.qr-logo-card h4{margin:0;padding:8px 10px 2px;font:600 11.5px/1.4 "aktiv-grotesk-georgian",Aktiv,Arial,sans-serif}
.qr-file-links{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:4px 10px 12px}
.qr-file-links>a{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;flex:1;padding:6px 12px;border:1px solid #d0d7da;border-radius:9999px;background:#fff;color:var(--qr-ink,#16232a);font:700 10.5px/1 Aktiv,"aktiv-grotesk-extended",sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:all .15s ease}
/* Keep the shared download styling, but fit each action to the narrow drawer. */
.story-edition #quick-reference .qr-file-links>a.gv-download-button{width:100%!important;min-width:0;justify-content:space-between!important;text-align:left!important}
.story-edition #quick-reference .qr-file-links>a.gv-download-button>span{min-width:0;overflow-wrap:anywhere}
.qr-file-links>a:hover{border-color:var(--emerald,#0a6670);color:var(--emerald,#0a6670);background:#f8fafb;box-shadow:0 2px 8px rgba(10,102,112,.12);transform:translateY(-1px)}
.qr-panel a:focus-visible,.qr-panel button:focus-visible,.qr-panel input:focus-visible,.qr-trigger:focus-visible{outline:2px solid var(--emerald,#0a6670);outline-offset:2px}
@media(max-width:700px){.qr-panel{width:100vw}.qr-heading,.qr-content{padding-left:18px;padding-right:18px}.qr-trigger{font-size:10px;padding:13px 6px 13px 8px;border-radius:8px 0 0 8px}}
@media(prefers-reduced-motion:reduce){.qr-panel,.qr-backdrop{transition:none!important}.qr-trigger{transition:none}}
@media print{.qr-panel,.qr-backdrop,.qr-trigger{display:none!important}}

.qr-logo-preview-compact{background:var(--mist,#e4eef0)}
.qr-logo-card-compact .qr-logo-preview img{max-width:112px}

/* Back to top.
   Not a tab. A tab is a handle: it says something is parked behind this edge,
   pull it out — which is what QUICK REF does. This one does not reveal anything,
   it moves you, so it takes the other form the deck already uses for actions:
   a round button, sitting on the page rather than fixed to the edge.
   Same family as QUICK REF (Midnight, Emerald on hover, the FILES arrow),
   different species, because it behaves differently. */
.qr-top{position:fixed;inset:auto 26px 26px auto;left:auto!important;right:26px!important;top:auto!important;bottom:26px!important;z-index:70;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--midnight,#16232a);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(17,22,21,.26),0 2px 6px rgba(17,22,21,.14);transition:background .2s ease,transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease,opacity .24s cubic-bezier(.2,.7,.2,1);user-select:none;-webkit-user-select:none}
.qr-top svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.qr-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.qr-top:hover{background:var(--emerald,#0a6670);transform:translateY(-3px);box-shadow:0 16px 30px rgba(17,22,21,.3)}
.qr-top:active{transform:translateY(-1px)}
.qr-top:focus-visible{outline:3px solid var(--orange,#ff5804);outline-offset:4px}

/* When TOP meets the foundation ticker, it becomes a refined frosted glass lens floating over the ticker */
.st-marquee::after{display:none!important}
html.top-docked .qr-top{
  background:rgba(10,102,112,0.52)!important;
  backdrop-filter:blur(14px) saturate(180%) brightness(1.15)!important;
  -webkit-backdrop-filter:blur(14px) saturate(180%) brightness(1.15)!important;
  border:1.5px solid rgba(228,238,240,0.45)!important;
  box-shadow:0 10px 30px rgba(0,0,0,0.35),0 0 20px rgba(10,102,112,0.4),inset 0 1px 1.5px rgba(255,255,255,0.5)!important;
  transform:translateY(3px)!important;
  transition:all .28s cubic-bezier(.16,1,.3,1)!important;
}
html.top-docked .qr-top:hover{
  background:rgba(255,88,4,0.75)!important;
  border-color:rgba(255,255,255,0.8)!important;
  box-shadow:0 12px 35px rgba(255,88,4,0.45),0 0 25px rgba(255,88,4,0.5),inset 0 1px 2px rgba(255,255,255,0.7)!important;
  transform:translateY(-2px) scale(1.08)!important;
}
html.top-docked .qr-top svg{stroke-width:2.6!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4))}
@media(prefers-reduced-motion:reduce){.top-docked .qr-top svg{animation:none}}
/* On the cover there is nowhere to go back to, and the open drawer owns the edge. */
html:not(.past-cover) .qr-top,
html.is-overview .qr-top,
body.qr-drawer-open .qr-top,
html.footer-visible .qr-top{opacity:0;pointer-events:none;transform:translateY(12px)}
@media(max-width:700px){.qr-top{right:16px!important;bottom:16px!important;width:42px;height:42px}}
@media print{.qr-top{display:none}}
