/* widgets.css — refined 3D/fluid widget language for the newsroom.
   Applies to: share pills (.sh), pager cards (.pager-card), comment form,
   comment items, and the keyboard/swipe hint (.rd-kbhint).
   Loaded after each page's inline <style>, so equal-or-stronger selectors win.
   Physical, not decorative: depth signals pressability, motion is springy but
   short, and everything degrades to flat under prefers-reduced-motion. */

:root{
  --wg-ease:cubic-bezier(.22,1,.36,1); /* springy, settles fast */
  --wg-teal:#2de1c2;
  --wg-ink:#eaf2ef;
  --wg-muted:#8fa3a0;
  --wg-panel:#0a1116;
  --wg-line:#16241f;
}

/* ============ Share pills ============ */
.sharebar .sh{
  position:relative;
  overflow:hidden;
  font-weight:600;
  letter-spacing:.01em;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 55%),var(--wg-panel);
  border:1px solid var(--wg-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.5),
    0 6px 14px -8px rgba(0,0,0,.7);
  transform:translateZ(0);
  transition:transform .38s var(--wg-ease),box-shadow .38s var(--wg-ease),
             border-color .25s ease,color .25s ease,background .25s ease;
}
/* sheen sweep: light passes across the pill on hover */
.sharebar .sh::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-70%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg);
  transition:left .55s var(--wg-ease);
  pointer-events:none;
}
.sharebar .sh:hover{
  transform:translateY(-2px);
  border-color:rgba(45,225,194,.65);
  color:var(--wg-teal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 3px rgba(0,0,0,.5),
    0 12px 24px -10px rgba(45,225,194,.35),
    0 4px 10px rgba(0,0,0,.5);
}
.sharebar .sh:hover::after{left:130%}
.sharebar .sh:active{
  transform:translateY(1px) scale(.98);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.5);
  transition-duration:.12s;
}
.sharebar .sh.copied{
  border-color:var(--wg-teal);
  color:var(--wg-teal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 3px rgba(45,225,194,.14),
    0 4px 12px -6px rgba(45,225,194,.4);
}

/* ============ Pager cards (previous / back-to) ============ */
.series-pager .pager-card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--wg-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 4px rgba(0,0,0,.45),
    0 14px 30px -18px rgba(0,0,0,.8);
  transition:transform .42s var(--wg-ease),box-shadow .42s var(--wg-ease),
             border-color .3s ease;
  will-change:transform;
}
/* top edge light catches when the card lifts */
.series-pager .pager-card::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0);
  transition:box-shadow .42s var(--wg-ease);
  pointer-events:none;
}
.series-pager .pager-card:hover{
  transform:translateY(-4px);
  border-color:rgba(45,225,194,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 3px 6px rgba(0,0,0,.45),
    0 22px 44px -16px rgba(0,0,0,.85),
    0 10px 26px -12px rgba(45,225,194,.3);
}
.series-pager .pager-card:active{
  transform:translateY(-1px) scale(.995);
  transition-duration:.12s;
}
/* arrows lean into the direction of travel */
.series-pager .pager-card .pg-k{
  display:inline-block;
  transition:transform .38s var(--wg-ease),color .25s ease;
}
.series-pager .pager-card[rel="prev"]:hover .pg-k{transform:translateX(-5px);color:var(--wg-teal)}
.series-pager .pager-card[rel="next"]:hover .pg-k{transform:translateX(5px);color:var(--wg-teal)}
.series-pager .pager-card.series-home:hover .pg-k{color:var(--wg-teal)}
.series-pager .pager-card:hover .pg-t{color:var(--wg-ink)}
/* JS-driven 3D tilt: pointer position feeds --rx/--ry */
.series-pager .pager-card.tilting{
  transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  transition:transform .12s linear,box-shadow .42s var(--wg-ease),border-color .3s ease;
}

/* ============ Keyboard / swipe hint ============ */
p.rd-kbhint{
  width:fit-content !important;
  margin:18px auto 0 !important;
  padding:7px 16px !important;
  border:1px solid var(--wg-line) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.02) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35) !important;
  font-size:12px !important;
  letter-spacing:.05em !important;
  color:var(--wg-muted) !important;
}

/* ============ Comment form ============ */
.comment-form input,
.comment-form textarea{
  background:linear-gradient(180deg,#0b1015,#0d1117);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(0,0,0,.4);
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s var(--wg-ease);
}
.comment-form input::placeholder,
.comment-form textarea::placeholder{color:#5d6f6c}
.comment-form input:focus,
.comment-form textarea:focus{
  outline:none;
  border-color:rgba(45,225,194,.7);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.5),
    0 0 0 3px rgba(45,225,194,.13),
    0 6px 18px -8px rgba(45,225,194,.35);
  transform:translateY(-1px);
}
.comment-form button{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#46eccd 0%,var(--wg-teal) 45%,#1fc7a6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.5),
    0 10px 22px -10px rgba(45,225,194,.55);
  transform:translateZ(0);
  transition:transform .3s var(--wg-ease),box-shadow .3s var(--wg-ease),filter .2s ease;
}
.comment-form button::after{
  content:"";
  position:absolute;top:0;bottom:0;left:-70%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);
  transition:left .5s var(--wg-ease);
  pointer-events:none;
}
.comment-form button:hover:not(:disabled){
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 3px 6px rgba(0,0,0,.5),
    0 16px 32px -10px rgba(45,225,194,.6);
}
.comment-form button:hover:not(:disabled)::after{left:130%}
.comment-form button:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.3),
    inset 0 -1px 0 rgba(255,255,255,.15),
    0 1px 2px rgba(0,0,0,.5);
  transition-duration:.1s;
}
.comment-form button:disabled{
  filter:saturate(.4) brightness(.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.4);
}

/* ============ Comment items ============ */
.discussion .comment{
  border-radius:10px;
  padding-left:14px;
  padding-right:14px;
  margin-left:-14px;
  margin-right:-14px;
  border-top:1px solid var(--wg-line);
  transition:background .3s ease,border-color .3s ease;
}
.discussion .comment:hover{
  background:rgba(255,255,255,.018);
}
.discussion .comment .c-name{color:var(--wg-teal)}

/* ============ Focus polish: soft glow ring, never a hard box ============
   Replaces the harsh 2px teal outline that appeared on tap/click with a
   diffused ring. Widget-specific rules below keep each element's 3D depth
   while focused; this global fallback covers every other focusable box
   (nav links, footer links, index cards) site-wide. */
:focus-visible{
  outline:none !important;
  border-radius:10px;
  box-shadow:0 0 0 3px rgba(45,225,194,.30),0 0 18px rgba(45,225,194,.22) !important;
}
.sharebar .sh:focus-visible{
  outline:none;
  border-color:rgba(45,225,194,.75);
  border-radius:999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.5),
    0 6px 14px -8px rgba(0,0,0,.7),
    0 0 0 3px rgba(45,225,194,.28),
    0 0 16px rgba(45,225,194,.25);
}
.series-pager .pager-card:focus-visible{
  outline:none;
  border-color:rgba(45,225,194,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 4px rgba(0,0,0,.45),
    0 14px 30px -18px rgba(0,0,0,.8),
    0 0 0 3px rgba(45,225,194,.28),
    0 0 20px rgba(45,225,194,.22);
}
.comment-form input:focus-visible,
.comment-form textarea:focus-visible{
  outline:none;
  border-color:rgba(45,225,194,.7);
  border-radius:10px;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.5),
    0 0 0 3px rgba(45,225,194,.16),
    0 6px 18px -8px rgba(45,225,194,.35);
}
.comment-form button:focus-visible{
  outline:none;
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.5),
    0 10px 22px -10px rgba(45,225,194,.55),
    0 0 0 3px rgba(45,225,194,.35),
    0 0 20px rgba(45,225,194,.35);
}

/* ============ Reduced motion: flat and instant ============ */
@media (prefers-reduced-motion:reduce){
  .sharebar .sh,.sharebar .sh::after,
  .series-pager .pager-card,.series-pager .pager-card::before,
  .series-pager .pager-card .pg-k,
  .comment-form input,.comment-form textarea,.comment-form button,
  .comment-form button::after,.discussion .comment,
  :focus-visible{
    transition:none !important;
    transform:none !important;
  }
  .series-pager .pager-card.tilting{transform:none !important}
}

/* ============ Small screens: keep press targets generous ============ */
@media (max-width:640px){
  .sharebar .sh{padding:9px 18px}
  .series-pager .pager-card{padding:16px 18px}
  .comment-form button{width:100%;justify-self:stretch}
}