/* ═══════════ THE GUIDE (js/85-guide.js, 2026-09-30) ═══════════
   The tour, What's new, and the two share lines. Built on the constitution:
   the sheet is the More sheet's own surface, type is Syne for the one sentence
   and Manrope for the rest, separation is space (her rule: no lines), nothing
   glows but the primary pill, which brings its own cast. */

/* ── the tour ── */
#gd-layer{ position:fixed; inset:0; z-index:90; }
#gd-layer .gd-halo{ position:absolute; border-radius:14px; border:1px solid rgba(160,225,255,.5); pointer-events:none;
  box-shadow:0 0 0 200vmax rgba(2,10,22,.58); transition:left var(--dur-2,320ms) cubic-bezier(.2,.8,.2,1), top var(--dur-2,320ms) cubic-bezier(.2,.8,.2,1), width var(--dur-2,320ms), height var(--dur-2,320ms); }
#gd-layer .gd-tip{ position:absolute; width:min(340px, calc(100vw - 32px)); padding:18px 20px 12px; border-radius:18px;
  background:rgba(0,24,48,.94); border:1px solid rgba(160,225,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -40px rgba(18,64,184,1); }
#gd-layer .gd-tip.gd-in{ animation:gd-rise .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gd-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
#gd-layer .gd-step{ margin:0 0 6px; font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); }
#gd-layer .gd-t{ margin:0 0 6px; font:500 22px/1.1 var(--f-disp); letter-spacing:-.02em; color:rgb(var(--ink)); }
#gd-layer .gd-b{ margin:0; font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); }
#gd-layer .gd-acts{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
#gd-layer .gd-acts .ui-btn--quiet{ padding-left:0; }
@media (prefers-reduced-motion:reduce){ #gd-layer .gd-halo{ transition:none; } #gd-layer .gd-tip.gd-in{ animation:none; } }

/* ── what's new ── */
#ui-news .nw-when{ margin:4px 0 6px; font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); }
#ui-news .nw-when--older{ margin-top:30px; }
#ui-news .nw-title{ margin:0 0 6px; font:500 30px/1.08 var(--f-disp); letter-spacing:-.022em; color:rgb(var(--ink)); max-width:22ch; }
#ui-news .nw-item{ margin-top:22px; max-width:46ch; }
#ui-news .nw-item h3{ margin:0 0 4px; font:600 16px/1.35 var(--f-body); letter-spacing:0; text-transform:none; color:rgb(var(--ink)); }
#ui-news .nw-item p{ margin:0; font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); }
/* the two actions stay in reach however long the list is: they ride the bottom of the sheet on a fade of its own ground */
#ui-news{ --nw-bg:rgb(0,31,63); }
@media (min-width:1024px){ #ui-news{ --nw-bg:rgba(0,24,48,.97); } }
#ui-news .nw-acts{ position:sticky; bottom:calc(-1 * var(--sp-5, 24px) - env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:18px 0 calc(-1 * var(--sp-5, 24px)); padding:22px 0 calc(var(--sp-5, 24px) + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom, rgba(0,24,48,0), var(--nw-bg) 30%); }
@media (max-width:759px){ #ui-news .nw-title{ font-size:26px; } #ui-news .nw-acts .ui-btn--primary{ width:100%; } }

/* ── the two share lines: Account's invitation, You's "Share how you decide" ── */
#view-profile #pf-invite-msg a, .yo-share__msg a{ color:rgb(var(--ink)); text-decoration:none; font-weight:500; }
#view-profile #pf-invite-msg a:hover, .yo-share__msg a:hover{ color:var(--ice2); }
#view-signature .yo-share{ margin:14px 0 0; }
#view-signature .yo-share .ui-btn--quiet{ padding-left:0; min-height:44px; }
.yo-share__msg{ margin:4px 0 0; max-width:46ch; font:400 14px/1.5 var(--f-body); color:rgb(var(--ink2)); }
.yo-share__msg:empty{ display:none; }
.yo-share__stop{ background:none; border:0; padding:0; font:500 14px var(--f-body); color:rgb(var(--ink3)); cursor:pointer; }
.yo-share__stop:hover{ color:rgb(var(--ink)); }
.yo-share__stop:focus-visible, #gd-layer button:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }