/* ============================================================================
 * GoldieCircle — Floating Reading Dock (shared)
 * A small dark pill that floats at bottom-center and follows the scroll, so a
 * reader can Stop the read-aloud, change speed, resize text, or share WITHOUT
 * scrolling back to the top of the article. Used by the articles reader first;
 * the mentor + weekly surfaces mount the same component.
 *
 * It COLLAPSES to a centered gold chip — never to the bottom-right corner, which
 * belongs to the Ask-Goldie widget (fixed bottom:80px right:30px).
 * All classes are namespaced `gcrd-` to avoid colliding with reader styles.
 * ========================================================================== */

.gcrd{
  --bg:#2B2A27; --fg:#F4ECDC; --border:#413B31; --hover:rgba(255,255,255,.12);
  --divider:rgba(255,255,255,.18); --muted:#CBC0AA;
  --playbg:#F5A623; --playfg:#241D0C; --playbg-h:#FFB733;
  /* Above the mobile tab bar (z 9999) — the bar shows up to 1400px wide, so
     ordinary 1366px laptops had it COVERING these controls on the weekly tab
     (2026-09-07). Paywall (z 9999999) still stacks above. */
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:10000;
  background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 8px 30px rgba(20,14,2,.34), 0 2px 8px rgba(20,14,2,.22);
  transition:transform .28s ease, opacity .28s ease; font-family:inherit;
}
.gcrd[hidden]{ display:none; }
.gcrd-inner{ display:flex; align-items:center; gap:6px; padding:8px; }

.gcrd-btn{
  border:0; background:transparent; color:var(--fg); font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:48px; height:48px; padding:0 12px; border-radius:12px; line-height:1;
}
.gcrd-btn:hover{ background:var(--hover); }
.gcrd-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px #0A7E8C; }
.gcrd-btn[disabled]{ opacity:.4; cursor:default; }
.gcrd-lbl{ font-size:14px; font-weight:600; }
.gcrd-div{ width:1px; height:26px; background:var(--divider); margin:0 2px; }

.gcrd-play{ background:var(--playbg); color:var(--playfg); font-weight:700; min-width:56px; }
.gcrd-play:hover{ background:var(--playbg-h); color:var(--playfg); }
.gcrd-play .gcrd-ic{ font-size:19px; }

/* Share gets a clear outlined-button look (gold border + gold icon/text) so it reads as
   a distinct action and pops among the plain controls — user testing found it easy to
   miss. Gold on the dark pill is high-contrast; the icon SVG uses currentColor so it
   picks up the gold too. Distinct from the gold-FILLED Play (outline vs fill). */
.gcrd-share{ border:1.5px solid #F5A623; color:#F5A623; font-weight:700; }
.gcrd-share:hover{ background:rgba(245,166,35,.16); color:#FFB733; border-color:#FFB733; }
/* Keep the "Share" word visible even on small phones (the other controls collapse to
   icons) so the share action stays unmistakable. */
@media (max-width:520px){ .gcrd-share .gcrd-lbl{ display:inline; } }

.gcrd-fontgrp{ display:inline-flex; align-items:center; gap:2px; }
.gcrd-fa{ font-weight:700; } .gcrd-fa.big{ font-size:20px; } .gcrd-fa.small{ font-size:13px; }
.gcrd-fread{ font-size:13px; color:var(--muted); min-width:64px; text-align:center; }
.gcrd-collapse{ min-width:40px; width:40px; padding:0; color:var(--muted); font-size:18px; }

/* when a reader can't hear English audio (non-premium, non-English), hide play +
   speed — font & share still help. */
.gcrd[data-can-listen="false"] .gcrd-play,
.gcrd[data-can-listen="false"] .gcrd-speed,
.gcrd[data-can-listen="false"] .gcrd-div-listen{ display:none; }

/* collapsed → hidden pill; centered gold chip appears in its place */
.gcrd.gcrd-collapsed{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(30px); }
.gcrd-chip{
  /* Above the mobile tab bar (z 9999) — the bar shows up to 1400px wide, so
     ordinary 1366px laptops had it COVERING these controls on the weekly tab
     (2026-09-07). Paywall (z 9999999) still stacks above. */
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:10000;
  border:0; background:#F5A623; color:#241D0C; box-shadow:0 8px 30px rgba(20,14,2,.34);
  height:48px; padding:0 18px; border-radius:999px; font-size:15px; font-weight:700;
  display:none; align-items:center; gap:8px; font-family:inherit; cursor:pointer;
}
.gcrd-chip:focus-visible{ outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px #0A7E8C; }
.gcrd-chip.gcrd-show{ display:inline-flex; }

/* transient toast (e.g. "Link copied") */
.gcrd-toast{
  position:fixed; left:50%; bottom:86px; transform:translateX(-50%) translateY(12px);
  background:#2B2A27; color:#fff; padding:11px 16px; border-radius:12px; font-size:14px;
  box-shadow:0 8px 30px rgba(20,14,2,.34); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:31; max-width:80vw; text-align:center;
}
.gcrd-toast.gcrd-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Replay — quieter than the gold Listen button, because starting over is the
   rarer choice. Appears only after something has played. */
.gcrd-replay[hidden]{ display:none !important; }
.gcrd-replay .gcrd-ic{ font-size:18px; }

/* Share menu (desktop). The OS share sheet offers "Your Phone" and nearby
   devices, which reads as clutter to an older visitor who only wants the link —
   so on a mouse-and-keyboard machine we show these two plain choices instead.
   Big targets, high contrast, opens ABOVE the dock so it never covers it. */
.gcrd-sharemenu{
  position:absolute; bottom:calc(100% + 10px); right:8px;
  background:#FFF9F0; border:2px solid #F5A623; border-radius:14px; padding:8px;
  box-shadow:0 10px 34px rgba(20,14,2,.32); display:flex; flex-direction:column; gap:6px;
  min-width:230px; z-index:32;
}
.gcrd-sharemenu .gcrd-smi{
  display:flex; align-items:center; gap:10px; width:100%;
  background:#fff; border:1px solid #E7C98C; border-radius:10px;
  padding:13px 15px; font-size:16.5px; font-weight:700; color:#2B2A27;
  font-family:inherit; text-align:left; cursor:pointer; min-height:48px;
}
.gcrd-sharemenu .gcrd-smi:hover{ background:#FFF3DC; border-color:#F5A623; }
.gcrd-sharemenu .gcrd-smi:focus-visible{ outline:3px solid #C97C0A; outline-offset:2px; }
@media (max-width:520px){ .gcrd-sharemenu{ right:auto; left:50%; transform:translateX(-50%); } }

/* give the last bit of content room so the dock never covers it */
#gcReaderBody.gcrd-space{ padding-bottom:104px; }
body.gcrd-active{ padding-bottom:110px; }

/* On normal pages (mentor/weekly) the site shows a fixed bottom TAB BAR (~81px) and
   the Ask-Goldie launcher (bottom:90px). Lift the dock clear of the tab bar and lift
   Goldie above the dock while it's active. The /articles reader is EXEMPT — it lives
   inside the max-z overlay that covers the tab bar — hence `body > .gcrd` only. */
@media (max-width:1300px){
  /* The fixed tab bar is ~78px tall PLUS env(safe-area-inset-bottom) on notched
     phones (its padding-bottom carries the inset). Clear that real height so the
     dock / collapsed chip / up-arrow Share never hide behind the menu. */
  body > .gcrd, body > .gcrd-chip{ bottom:calc(89px + env(safe-area-inset-bottom)); }
  body > .gcrd-toast{ bottom:calc(158px + env(safe-area-inset-bottom)); }
  body.gcrd-active .gc-floating-goldie{ bottom:calc(162px + env(safe-area-inset-bottom)) !important; }
  body.gcrd-active{ padding-bottom:calc(180px + env(safe-area-inset-bottom)); }
  /* Insurance: the tab bar is z-index:9999. If any device's safe-area math leaves
     the dock even a pixel into the bar, a lower z-index would let the menu swallow
     the controls. Float the dock ABOVE the bar so it's always visible + tappable
     (it only ever overlaps the bar in that edge case). */
  body > .gcrd{ z-index:10000; }
  body > .gcrd-chip{ z-index:10000; }
  body > .gcrd-toast{ z-index:10001; }

  /* The #gc-scroll-to-top ▲ (functions.php) normally stacks just above the Goldie
     bubble at its resting bottom:90px. But while the dock is active we lift Goldie
     to bottom:162px — which lands it right on top of the arrow (both bottom:162px
     right:20px). Lift the arrow above the RAISED Goldie so the column stays:
     menu → dock → Goldie(162+58=220) → arrow(220+14 gap = 234). */
  body.gcrd-active .gc-scroll-to-top{ bottom:calc(234px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width:560px){
  .gcrd{ left:12px; right:12px; transform:none; }
  .gcrd.gcrd-collapsed{ transform:translateY(30px); }
  .gcrd-inner{ justify-content:space-between; gap:2px; }
  .gcrd-lbl{ display:none; }          /* icons-only so it never crowds the text column */
  .gcrd-fread{ display:none; }
  .gcrd-btn{ min-width:44px; padding:0 8px; }
}
@media (prefers-reduced-motion:reduce){ .gcrd,.gcrd-chip,.gcrd-toast{ transition:none; } }