/* Link by LabLink arrives as a NEW announcement bar on top of the live page.
   Everything here is additive. The live hero, nav and sections keep their own styles. */

/* One thin bar, fixed to the top of the screen from the first paint. The aside keeps the bar's height in the page, so
   the nav starts below it, and the fixed row inside is what shows. Safari on iPhone fills the status bar area around
   the camera cutout with the color of a bar fixed at the top, so that area is black too and nothing scrolls under it. */
:root{--link-h:48px}
.link-bar{position:relative;height:var(--link-h)}
.link-bar.is-leaving{transition:height .22s ease}
.link-bar-fix{position:fixed;top:0;left:0;right:0;z-index:45;background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.14);transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.link-bar-hidden .link-bar-fix,.link-bar.is-leaving .link-bar-fix{transform:translateY(-100%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.7,.2,1),visibility 0s linear .26s}
.link-bar-in{position:relative;display:flex;align-items:center;gap:4px;height:var(--link-h)}
.link-go{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:var(--link-h);margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.link-go[hidden]{display:none!important}
.link-new{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px 0 8px;background:var(--lime);color:var(--ink);font:800 .6875rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.link-say{min-width:0;display:flex;align-items:baseline;column-gap:14px}
.link-say strong{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 1rem/1.2 var(--display);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.link-name{font-weight:800;font-style:italic;color:var(--lime);padding-right:.32em}
.link-sub{flex:0 100 auto;min-width:0;font:400 .9375rem/1.3 var(--text);color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-chip{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 12px 0 14px;background:var(--lime);color:var(--ink);font:600 .875rem/1 var(--display);white-space:nowrap}
.link-chip .icon{width:14px;height:14px;stroke-width:2}
.link-go:hover .link-chip,.link-go.is-pressed .link-chip,.link-go:active .link-chip{background:#fff}
.link-go[aria-expanded=true] .link-chip{background:#fff}
.link-go[aria-expanded=true] .link-chip .icon{transform:rotate(90deg)}
.link-x{flex:none;display:inline-grid;place-items:center;width:44px;height:var(--link-h);margin:0 -10px 0 0;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.link-x .icon{width:18px;height:18px;stroke-width:2}
.link-x:hover{color:var(--lime)}
.link-bar :focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.no-js .link-x{display:none}
.link-on:not(.link-dismissed):not(.link-bar-hidden){scroll-padding-top:var(--link-h)}
.link-dismissed .link-bar{display:none!important}
:root:not(.link-on) [data-link-host]{display:none!important}
/* The site's reading-progress line runs under the bar while the bar shows, so the top edge stays one black. */
.link-on:not(.link-dismissed):not(.link-bar-hidden) .reading-progress{top:var(--link-h)}

/* Desktop panel: the QR and the other ways to send */
.link-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:60;scroll-margin:16px;width:min(640px,calc(100vw - 2 * var(--m)));max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain;padding:22px 24px 20px;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 22px 60px rgba(17,17,17,.24);text-align:left;cursor:auto}
.link-panel:focus{outline:none}
.link-panel:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.link-panel :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.link-panel-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.link-panel-title{margin:0;font:700 1.625rem/1.08 var(--display);letter-spacing:-.03em}
.link-panel-x{margin-left:auto;display:inline-flex;align-items:center;gap:10px;flex:none;min-height:40px;padding:0 12px;background:#fff;border:1px solid var(--ink);color:var(--ink);font:600 .875rem/1 var(--display);cursor:pointer}
.link-panel-x span{font-size:1.25rem;font-weight:400}
.link-panel-x:hover{background:var(--lime)}
.link-panel-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;padding-block:20px}
.link-qr{margin:0;display:grid;gap:9px;justify-items:center}
.link-qr img{display:block;width:204px;height:204px;border:2px solid var(--ink);image-rendering:pixelated}
.link-qr figcaption{display:flex;align-items:center;gap:7px;font:600 .8125rem/1.2 var(--display)}
.link-qr figcaption svg{width:16px;height:16px}
.link-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.link-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font:500 1rem/1.38 var(--text)}
.link-steps li>span{display:grid;place-items:center;width:30px;height:30px;background:var(--lime);font:700 .9375rem/1 var(--display)}
.link-steps b{font-weight:600}
.link-ways{display:grid;gap:10px;padding-top:16px;border-top:2px solid var(--ink)}
.link-way{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;min-height:40px}
.link-way-k{width:88px;flex:none;font:600 .875rem/1.2 var(--display)}
.link-num{font:700 1.3125rem/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.link-copy{min-height:36px;padding:0 12px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:600 .8125rem/1 var(--display);cursor:pointer;white-space:nowrap}
.link-copy:hover{background:var(--grey)}
.link-copy.is-done{background:var(--lime);border-color:var(--lime)}
.link-first{margin:2px 0 0;font-size:.875rem;line-height:1.45;color:#333}
.link-first q{font-weight:600;color:var(--ink)}
.link-panel-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid #d9d9d9;font-size:.8125rem;line-height:1.45;color:#4b4b4b}

/* The one inline NEW marker, in section 08, so the way back survives a dismissal */
.link-inline{grid-column:4/-1;position:relative;display:flex;align-items:center;gap:22px;margin:0 0 44px;padding:18px 18px 18px 22px;background:#fff;border:2px solid var(--ink)}
.link-inline-say{flex:1;min-width:0;display:grid;gap:7px;margin:0}
.link-inline-say strong{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font:700 clamp(1.25rem,1.7vw,1.5rem)/1.15 var(--display);letter-spacing:-.02em}
.link-inline-sub{font-size:.9375rem;line-height:1.45;color:#333}
.link-inline .btn{flex:none;min-width:196px}
.link-inline .btn[hidden]{display:none}
.link-inline .link-panel{top:calc(100% + 10px)}
.link-inline .btn[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--lime)}

/* Narrow windows and phones */
@media(max-width:1079px){.link-sub-wide{display:none}.link-panel{width:min(600px,calc(100vw - 2 * var(--m)))}}
@media(max-width:767px){
  .link-inline{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:16px;padding:18px}
  .link-inline .btn{width:100%}
  .link-panel-body{grid-template-columns:1fr;justify-items:center}
}
@media(max-width:639px){
  :root{--link-h:44px}
  .link-go{gap:10px}
  .link-say strong{font-size:.9375rem}
  .link-chip{width:40px;height:30px;padding:0;justify-content:center;margin-left:6px}
  .link-chip-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .link-chip .icon{width:16px;height:16px}
  .link-new{height:19px;padding:0 6px 0 7px;font-size:.625rem}
  .link-x{margin-right:-12px}
}
@media(max-width:374px){
  .link-go{gap:8px}
  .link-say strong{font-size:.8125rem}
  .link-new{padding:0 5px 0 6px;letter-spacing:.1em}
  .link-chip{width:34px;margin-left:2px}
}

@media(prefers-reduced-motion:reduce){
  .link-bar,.link-bar.is-leaving,.link-bar-fix,.link-panel,.link-chip .icon{transition:none!important;animation:none!important}
}
@media print{.link-bar,.link-panel{display:none!important}}