/* send-guide.css: "Then, in Spruce" (send-guide.js), inside the wizard's
   "Your final PDF is ready" note. Site tokens only, so light/dark follow.
   Every button/select resets width + margin: the site's mobile rule makes
   every button full width with a top margin (website rules, mobile hazard). */

/* Theme-following colours. The site's dark theme switches --text-strong,
   --accent and --border-*, NOT --ink / --pine / --hairline / --paper, so the
   guide uses only these (Ryan saw the steps and buttons vanish in dark mode). */
.send-guide {
  --sg-text: var(--text-strong);
  --sg-num: var(--pine);
  --sg-line: var(--hairline);
  --sg-line-strong: var(--hairline-strong);
  --sg-fill-fg: var(--surface-0);
  --sg-dock: var(--surface-1);
  --sg-cta: var(--pine);            /* "Show me step by step": the eye-catcher */
  --sg-cta-fg: #fff;
  --sg-cta-glow: rgba(47, 107, 79, 0.45);
}
html[data-theme="dark"] .send-guide {
  --sg-num: var(--accent);
  --sg-line: var(--border-soft);
  --sg-line-strong: var(--border-strong);
  --sg-dock: var(--surface-elevated);   /* solid: page text must not show through */
  --sg-cta: var(--accent);
  --sg-cta-fg: var(--surface-0);
  --sg-cta-glow: rgba(127, 210, 164, 0.45);
}
.send-guide { margin: 1.25rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--sg-line); }
.send-guide__title { margin: 0 0 0.75rem; font-family: var(--serif); font-size: 1.15rem; color: var(--sg-text); }
.send-guide .send-guide__steps { margin: 0; padding: 0; list-style: none; counter-reset: sg; }
.send-guide__step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 0.6rem 0;
  counter-increment: sg;
}
.send-guide__step + .send-guide__step { border-top: 1px solid var(--sg-line); }
.send-guide__pic {
  flex: none;
  width: 132px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--sg-line-strong);
  border-radius: 8px;
  background: #fff;
}
.send-guide__text { font-size: 1.05rem; line-height: 1.4; color: var(--sg-text); }
.send-guide__text::before { content: counter(sg) ". "; font-weight: 700; color: var(--sg-num); }
.send-guide__check { margin: 0.6rem 0 0; font-size: 0.98rem; color: var(--text-default); }
.send-guide__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-top: 0.85rem; }
/* The button + device select, moved above Download PDF Again (#wizSendWatch):
   a .send-guide too, so the colour tokens apply, without the section rule. */
.send-guide.send-guide--launch { margin: 4px 0 0; padding: 0; border: 0; width: 100%; }
/* Ryan, 2026-10-10: the button and the device select side by side, on ONE
   row. The "Steps for" words step aside here (the select keeps them as its
   accessible name and tooltip) so the pair fits the column; on a phone the
   button's label breaks on purpose: "Show me" over "step by step". */
.send-guide--launch .send-guide__foot { justify-content: center; flex-wrap: nowrap; gap: 0.5rem; margin-top: 0; min-width: 0; max-width: 100%; }
.send-guide--launch .send-guide__device { flex: none; }
.send-guide--launch .send-guide__device-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Filled, with a play circle and a soft glow: the one thing on the page
   that says "watch me" (Ryan: "more visually eye-catching"). */
.send-guide__watch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  width: auto;
  margin: 0;
  padding: 0.45rem 1.15rem 0.45rem 0.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--sg-cta);
  color: var(--sg-cta-fg);
  font: 700 1.05rem/1.2 var(--sans, inherit);
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--sg-cta-glow);
  cursor: pointer;
}
.send-guide__play {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sg-cta-fg);
  position: relative;
}
.send-guide__play::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.72rem;
  border-color: transparent transparent transparent var(--sg-cta);
}
/* Two gentle pulses when it first appears, then still (never with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .send-guide__watch { animation: sg-pulse 1.6s ease-out 0.4s 2; }
}
@keyframes sg-pulse {
  0% { box-shadow: 0 4px 14px var(--sg-cta-glow), 0 0 0 0 var(--sg-cta-glow); }
  70% { box-shadow: 0 4px 14px var(--sg-cta-glow), 0 0 0 0.7rem transparent; }
  100% { box-shadow: 0 4px 14px var(--sg-cta-glow), 0 0 0 0 transparent; }
}
.send-guide__watch[hidden] { display: none; }
.send-guide__device { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; color: var(--text-default); }
.send-guide__device select { width: auto; margin: 0; padding: 0.3rem 0.4rem; font: inherit; color: var(--sg-text); background: var(--surface-1, #fff); border: 1px solid var(--sg-line-strong); border-radius: 6px; }
@media (max-width: 520px) {
  .send-guide--launch .send-guide__watch { flex: 0 1 auto; min-width: 0; text-align: left; font-size: 1rem; line-height: 1.15; gap: 0.5rem; padding: 0.45rem 1rem 0.45rem 0.45rem; }
  .send-guide--launch .send-guide__watch-text > span { display: block; }
  .send-guide--launch .send-guide__play { width: 1.75rem; height: 1.75rem; }
  .send-guide--launch .send-guide__device select { padding: 0.3rem 0.25rem; }
}
@media (max-width: 380px) {
  .send-guide__pic { width: 104px; height: 70px; }
  .send-guide__text { font-size: 1rem; }
}

/* The step-by-step dock: while step by step is on, a slim bar fixed to the
   bottom of the screen holds a SMALL, VISIBLE copy of the video (the floating
   window shows the same video; a hidden 1px copy froze it on Android), the
   step, Repeat / Next and a close. Only a browser that cannot float the video
   (.is-inline) shows it larger, here. */
.send-guide__player {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 900;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 2.4rem 0.55rem 0.55rem;
  border: 1px solid var(--sg-line-strong);
  border-radius: 14px;
  background: var(--sg-dock, #fff);
  box-shadow: 0 6px 24px rgba(20, 40, 58, 0.22);
}
.send-guide__player[hidden] { display: none; }
body.send-guide-docked { padding-bottom: 132px; }
.send-guide__video { flex: none; display: block; height: 104px; width: auto; max-width: 40%; border-radius: 8px; background: #14283a; cursor: pointer; }
.send-guide__player.is-inline .send-guide__video { height: 40vh; }
/* While floating, the browser paints its own "Playing in picture-in-picture"
   label inside this box; the phone-shaped 49 px box chopped it word by word
   (Ryan's Android). A wider box lets it sit on two clean lines. Still visible,
   never hidden (see above). */
.send-guide__player.is-floating .send-guide__video { width: 7.25rem; height: 104px; max-width: 34%; object-fit: cover; }
.send-guide__dockbody { flex: 1 1 auto; min-width: 0; }
.send-guide__status { min-height: 2.5em; margin: 0; font-size: 0.95rem; line-height: 1.3; font-weight: 600; color: var(--sg-text); }
.send-guide__controls { display: flex; gap: 0.5rem; margin-top: 0.45rem; }
/* Equal halves: the pair never shifts under a finger as the labels change. */
.send-guide__ctl {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 11rem;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--sg-text);
  border-radius: 999px;
  background: transparent;
  color: var(--sg-text);
  font: 600 0.98rem/1.2 var(--sans, inherit);
  white-space: nowrap;
  cursor: pointer;
}
.send-guide__ctl--next { background: var(--sg-text); color: var(--sg-fill-fg); }
.send-guide__ctl:disabled { opacity: 0.45; cursor: default; }
.send-guide__player.is-floating .send-guide__controls { gap: 0.4rem; margin-right: -1.8rem; }   /* the ✕ sits above, not beside */
.send-guide__player.is-floating .send-guide__ctl { padding: 0.5rem 0.3rem; font-size: 0.88rem; overflow: hidden; }
.send-guide__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-default);
  font-size: 1.05rem;
  line-height: 2rem;
  cursor: pointer;
}
/* The site's global button:hover paints buttons blue, and a touch screen keeps
   :hover after a tap (Ryan saw Next stay blue, Show stay dark): pin each
   button's own colours, and darken on hover only where a mouse can hover. */
.send-guide .send-guide__watch:hover { background: var(--sg-cta); color: var(--sg-cta-fg); }
.send-guide .send-guide__ctl:hover { background: transparent; color: var(--sg-text); }
.send-guide .send-guide__ctl--next:hover { background: var(--sg-text); color: var(--sg-fill-fg); }
.send-guide .send-guide__close:hover { background: transparent; color: var(--sg-text); }
@media (hover: hover) {
  .send-guide .send-guide__watch:hover { background: var(--sg-cta); color: var(--sg-cta-fg); filter: brightness(1.08); }
}