/* UVU Review: share links ("Share on X") and the arrival highlight. Behaviour lives in js/share.js. */

/* ---------- row that holds a share link inside a card or under a section heading ---------- */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}

/* ---------- the link, styled as a button (same recipe as the AFNPT XShareButton) ---------- */
.share-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:10px 18px;box-sizing:border-box;
  border:1px solid var(--line,#26313f);border-radius:4px;
  background:var(--panel-2,#1a232f);color:var(--ink,#eef2f7);
  font:600 14px/1 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s ease,filter .12s ease,border-color .2s ease,background-color .2s ease,color .2s ease;
}
.share-btn .share-ico{width:16px;height:16px;flex:none;fill:currentColor;display:block}

/* Both labels share one grid cell, so swapping them never changes the width. */
.share-btn .share-label{display:inline-grid;align-items:center;justify-items:center}
.share-btn .share-label > span{grid-area:1 / 1}
.share-btn .share-label-busy{visibility:hidden}
.share-btn .share-word-short{display:none}

@media (hover:hover){
  .share-btn:hover{border-color:var(--muted,#93a1b3);color:var(--white,#f7fafc);background:#202b39}
}
.share-btn:focus{outline:none}
.share-btn:focus-visible{outline:3px solid var(--amber,#f4b740);outline-offset:2px}

/* The pressed and the opening state below also name :hover, so they outrank the hover style of every
   variant (.share-btn--bar:hover and the like): the pointer is over the button that was just clicked. */

/* 1. press: shown on pointerdown, held at least 160 ms by the script */
.share-btn.is-pressed,
.share-btn.is-pressed:hover{transform:scale(.96);filter:brightness(1.25);border-color:var(--muted,#93a1b3)}

/* 2. click: a ring leaves the button */
.share-btn::after{content:"";position:absolute;inset:-1px;border:2px solid var(--amber,#f4b740);border-radius:inherit;
  opacity:0;pointer-events:none}
.share-btn.is-flash::after{animation:shareFlash .35s ease-out 1}
@keyframes shareFlash{
  0%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(1.14,1.5)}
}

/* 3. words: the label says what is happening */
.share-btn.is-opening,
.share-btn.is-opening:hover{background:var(--ink,#eef2f7);border-color:var(--ink,#eef2f7);color:#0a0d13}
.share-btn.is-opening .share-label-idle{visibility:hidden}
.share-btn.is-opening .share-label-busy{visibility:visible}

/* ---------- variant used in the map control bar (#reconShareSlot): same build as the bar's own buttons ---------- */
#reconShareSlot{display:inline-flex;align-items:center;flex:none;pointer-events:auto}
#reconShareSlot:empty{display:none}
.share-btn--bar{min-height:52px;height:52px;padding:0 16px;border-radius:12px;font-size:15px;
  color:var(--white,#f7fafc);background:rgba(27,37,50,.7);border-color:#34445c}
.share-btn--bar .share-ico{width:17px;height:17px}
@media (hover:hover){
  .share-btn--bar:hover{background:#243247;border-color:#55698a}
}

/* Phones (the bar's "port" and "land" layouts): icon above a short word. The slot clips what leaves it,
   so the click ring and the focus ring are drawn inside the button. */
@media (max-width:860px),(max-height:480px){
  .share-btn--bar{flex-direction:column;gap:5px;width:60px;height:56px;min-height:56px;padding:0;font-size:13px}
  .share-btn--bar .share-ico{width:18px;height:18px}
  .share-btn--bar .share-word-full{display:none}
  .share-btn--bar .share-word-short{display:inline}
  .share-btn--bar .share-label-busy{font-size:12px}
  .share-btn--bar::after{inset:0}
  .share-btn--bar.is-flash::after{animation-name:shareFlashIn}
  .share-btn--bar:focus-visible{outline-offset:-4px}
}
@media (max-width:374px){
  .share-btn--bar{width:52px}
}

/* Sizes chosen by the script when the bar is short of room (widest that fits): short word, logo only, hidden. */
.share-btn--bar[data-fit="tight"] .share-word-full,
.share-btn--bar[data-fit="icon"] .share-label{display:none}
.share-btn--bar[data-fit="tight"] .share-word-short{display:inline}
.share-btn--bar[data-fit="icon"]{width:52px;padding:0}
.share-btn--bar[data-fit="none"]{display:none}
@media (max-width:860px),(max-height:480px){
  .share-btn--bar[data-fit="tight"]{width:52px}
  .share-btn--bar[data-fit="tight"] .share-label{font-size:12px}
  .share-btn--bar[data-fit="icon"]{width:44px}
}
@keyframes shareFlashIn{
  0%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(.8,.78)}
}

/* ---------- compact variant (data-share-style="compact"), e.g. in the top bar ---------- */
/* 44 px tall like every other touch target. The -4 px margins make it take up only 36 px of the line it
   sits in, so the top bar keeps its height and nothing that is measured against the bar moves. */
.share-btn--compact{min-height:44px;height:44px;margin:-4px 0;padding:0 14px;gap:7px;font-size:13px;border-radius:9px;
  background:rgba(26,35,47,.85)}
.share-btn--compact .share-ico{width:14px;height:14px}
/* Phones keep the word "Share" down to 320 px: the top bar makes room by hiding the brand's second line
   at 400 px and under (css owned by the page), so the button never shrinks to a lone logo beside the
   menu's close button. */
@media (max-width:520px){
  .share-btn--compact{padding:0 12px}
  .share-btn--compact .share-word-full{display:none}
  .share-btn--compact .share-word-short{display:inline}
  .share-btn--compact .share-label-busy{font-size:12px}
}

/* ---------- icon variant (data-share-style="icon"), e.g. a card corner: 44 x 44, logo only ---------- */
.share-btn--icon{width:44px;height:44px;min-height:44px;padding:0;gap:0;border-radius:10px;flex:none}
.share-btn--icon .share-ico{width:18px;height:18px}
.share-btn--icon .share-label{display:none}
.share-btn--icon::after{inset:0}
.share-btn--icon.is-flash::after{animation-name:shareFlashIn}

/* ---------- arrival highlight: the element a shared link points to ---------- */
.share-target{animation:shareTarget 2.6s ease-out 1;border-radius:12px}
@keyframes shareTarget{
  0%{box-shadow:0 0 0 3px rgba(244,183,64,0),0 0 0 0 rgba(244,183,64,0)}
  12%{box-shadow:0 0 0 3px rgba(244,183,64,.95),0 0 0 14px rgba(244,183,64,.22)}
  55%{box-shadow:0 0 0 3px rgba(244,183,64,.85),0 0 0 8px rgba(244,183,64,.12)}
  100%{box-shadow:0 0 0 3px rgba(244,183,64,0),0 0 0 0 rgba(244,183,64,0)}
}

/* A section lights its heading: the ring stands clear of the text. */
.share-target--head{animation-name:shareTargetHead;outline:3px solid rgba(244,183,64,0);outline-offset:14px}
@keyframes shareTargetHead{
  0%{outline-color:rgba(244,183,64,0)}
  12%{outline-color:rgba(244,183,64,.95)}
  55%{outline-color:rgba(244,183,64,.85)}
  100%{outline-color:rgba(244,183,64,0)}
}

/* ---------- reduced motion: keep every signal, drop the movement ---------- */
@media (prefers-reduced-motion:reduce){
  .share-btn{transition:border-color .2s ease,background-color .2s ease,color .2s ease}
  .share-btn.is-pressed,
  .share-btn.is-pressed:hover{transform:none}
  .share-btn.is-flash::after,
  .share-btn--bar.is-flash::after,
  .share-btn--icon.is-flash::after{animation:shareFlashStill .35s linear 1}
  .share-target{animation:shareTargetStill 2.6s linear 1}
  .share-target--head{animation-name:shareTargetHeadStill}
}
@keyframes shareFlashStill{0%{opacity:.95}100%{opacity:0}}
@keyframes shareTargetStill{
  0%,80%{box-shadow:0 0 0 3px rgba(244,183,64,.9)}
  100%{box-shadow:0 0 0 3px rgba(244,183,64,0)}
}
@keyframes shareTargetHeadStill{
  0%,80%{outline-color:rgba(244,183,64,.9)}
  100%{outline-color:rgba(244,183,64,0)}
}