/* ============================================================================
   GetWheelSpinner — "Share this tool" styles (v7.1.0)
   Loaded after assets/style.css on tool pages only.
   assets/style.css is a PROTECTED file; the only v7.1.0 change to it is the
   narrow light-mode primary-button contrast fix, unrelated to this file.

   Placement is unchanged from v7.0.0: immediately below .page-header, clear of
   any winner/result controls, so it can never read as "share this winner".
   assets/share.js is BYTE-IDENTICAL to v7.0.0 — this is a pure restyle, so the
   DOM every share test asserts against is exactly the same.

   v7.1.0 PROMINENCE UPGRADE
   The v7.0.0 control worked but was a small ghost button and went unnoticed.
   It is now a pill CTA: 48px tall, larger type, an enlarged icon, a warm amber
   surface and a slow glow that runs three cycles and then settles.

   CONTRAST — measured, not assumed. Labels are never white-on-amber:
     light  #7C2D12 on #FEF1DD (amber .14 over #FFFFFF)  =  8.42:1
     dark   #FCD34D on #2D1F0D (amber .16 over #07070D)  = 11.07:1
   Both clear WCAG AA for normal text (4.5:1) with room to spare.

   CASCADE — the v6.9.2 light-mode defect fixed elsewhere in this release was
   caused by a generic html[data-theme="light"] rule (0,2,1) outranking a bare
   class rule (0,1,0). Every light override here is therefore declared AFTER the
   base rule and restates every property it needs. share.js S34 guards this with
   a negative control.

   HIERARCHY — the Spin button keeps the bright multi-stop brand gradient and
   remains the primary action. Share is a tinted, outlined pill: prominent, but
   plainly secondary and never mistakable for the tool's main control.
   ============================================================================ */

.gws-share{
  position:relative;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
  margin:0 0 26px;min-width:0;
}

/* ---- the CTA ------------------------------------------------------------- */
.gws-share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;
  background:rgba(245,158,11,.16);
  border:2px solid rgba(245,158,11,.55);
  color:#FCD34D;
  border-radius:999px;
  font-size:16px;font-weight:800;font-family:var(--font);letter-spacing:.012em;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(245,158,11,.14);
  transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;
  /* Three gentle cycles (~7.8s), then it settles permanently. No looping,
     no flashing — see the reduced-motion block at the end of this file. */
  animation:gws-share-attn 2.8s ease-in-out 4;
}
/* share.js renders the icon as <span aria-hidden="true">🔗</span> */
.gws-share-btn span[aria-hidden="true"]{font-size:20px;line-height:1}

.gws-share-btn:hover{
  background:rgba(245,158,11,.26);
  border-color:rgba(245,158,11,.85);
  color:#FDE68A;
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(245,158,11,.30);
}
.gws-share-btn:active{transform:translateY(0)}
.gws-share-btn:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(245,158,11,.22);
}

/* light mode — declared after the base rule and restating every property */
html[data-theme="light"] .gws-share-btn{
  background:rgba(245,158,11,.14);
  border-color:#B45309;
  color:#7C2D12;
  box-shadow:0 2px 12px rgba(180,83,9,.13);
}
html[data-theme="light"] .gws-share-btn:hover{
  background:rgba(245,158,11,.24);
  border-color:#9A3412;
  color:#7C2D12;
  box-shadow:0 6px 22px rgba(180,83,9,.22);
}
html[data-theme="light"] .gws-share-btn:focus-visible{
  outline:3px solid #B45309;outline-offset:3px;
  box-shadow:0 0 0 6px rgba(180,83,9,.20);
}

/* Slow, low-amplitude warm glow. Amplitude is deliberately modest and the
   cycle long, so it reads as a gentle breathe rather than a blink. */
@keyframes gws-share-attn{
  0%   {box-shadow:0 2px 12px rgba(245,158,11,.14);transform:scale(1)}
  50%  {box-shadow:0 2px 12px rgba(245,158,11,.14),0 0 28px 6px rgba(245,158,11,.46);transform:scale(1.022)}
  100% {box-shadow:0 2px 12px rgba(245,158,11,.14);transform:scale(1)}
}

/* ---- feedback ------------------------------------------------------------ */
/* Intentionally carries no aria-live / role="status": the page already has
   exactly one polite region and share.js routes announcements through it so
   screen readers do not announce twice. */
.gws-share-status{
  font-size:13.5px;font-weight:700;color:var(--amber);
  min-width:0;overflow-wrap:anywhere;
}
html[data-theme="light"] .gws-share-status{color:#92400E}

/* ---- fallback panel ------------------------------------------------------ */
.gws-share-panel{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  width:100%;min-width:0;
  background:linear-gradient(145deg,var(--card),rgba(18,20,46,.7));
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;
}
html[data-theme="light"] .gws-share-panel{
  background:#FFFFFF;border-color:rgba(15,23,42,.11);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 2px 14px rgba(15,23,42,.06);
}
.gws-share-panel[hidden]{display:none}

.gws-share-item{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.94);border-radius:var(--radius-sm);
  padding:9px 15px;font-size:13px;font-weight:600;font-family:var(--font);
  cursor:pointer;text-decoration:none;transition:all .16s;
}
.gws-share-item:hover{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.45);color:var(--amber)}
.gws-share-item:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
html[data-theme="light"] .gws-share-item{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.16);color:#0F172A}
html[data-theme="light"] .gws-share-item:hover{background:rgba(245,158,11,.12);border-color:#B45309;color:#7C2D12}
html[data-theme="light"] .gws-share-item:focus-visible{outline:3px solid #B45309;outline-offset:2px}

/* ---- phones -------------------------------------------------------------- */
@media(max-width:600px){
  .gws-share{gap:10px}
  .gws-share-btn{
    min-height:54px;width:100%;max-width:360px;
    font-size:16.5px;padding:15px 24px;
  }
  .gws-share-item{flex:1 1 auto;text-align:center;min-width:88px;min-height:44px}
}

/* ---- reduced motion ------------------------------------------------------ */
/* A user who has asked for less motion gets none: no glow cycle, no transitions.
   The CTA keeps its full size, colour, border and contrast, so prominence is
   never dependent on animation. */
@media(prefers-reduced-motion:reduce){
  .gws-share-btn{animation:none}
  .gws-share-btn,.gws-share-item{transition:none}
  .gws-share-btn:hover{transform:none}
}