/* ==========================================================================
   Database Reactivation page only (database-reactivation.html,
   _build/reactivate_page.py, behaviour in assets/reactivate.js). Loaded after
   signals.css, paid.css, organic.css and sales.css, which supply the hero
   card, icon tabs, panels, marquee, pill toggle, citation cards, message
   bubbles and slots. Same outbound-style vocabulary throughout.
   ========================================================================== */

#segments { padding-bottom: clamp(36px, 4.5vw, 60px); }

/* ---- hero: one list, four ways back --------------------------------------- */
.rv-dim { color: #70757a !important; }
/* the "back after 14 months" tags are wider than Sales' "replied in" ones */
.rs-u .rs-mail__sub, .rs-u .rs-chat__bar { padding-right: 180px; }
.rv-reply { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; padding: 12px 16px 14px; border-top: 1px solid #eee; background: #f7f6f2; }
.rv-reply i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #8C95A0; color: #fff; font-weight: 700; font-size: 13px; }
.rv-reply span { display: grid; }
.rv-reply b { font-size: 12.5px; }
.rv-reply small { font-size: 11px; color: #70757a; }
.rv-reply p { grid-column: 2; margin: 6px 0 0; font-size: 12.5px; }

/* ---- one campaign, five letters --------------------------------------------- */
.rv-msg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rv-msg__left { display: grid; gap: 14px; min-width: 0; }
.rv-seg { justify-self: start; flex-wrap: wrap; }
.rv-win { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: #202124; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .2); overflow: hidden; }
.rv-letter__meta { padding: 4px 18px; border-bottom: 1px solid #eee; }
.rv-letter__meta p { display: grid; grid-template-columns: 64px 1fr; margin: 0; padding: 7px 0; font-size: 13px; color: #444; }
.rv-letter__meta p + p { border-top: 1px solid #f1f1f1; }
.rv-letter__meta span { color: #8a8f94; }
.rv-letter__meta b { color: #202124; }
.rv-letter__body { margin: 0; padding: 16px 18px 4px; font-size: 15px; line-height: 1.75; }
.rv-letter__sig { margin: 0; padding: 10px 18px 18px; font-size: 14px; line-height: 1.5; }
.rv-letter__sig small { color: #8a8f94; font-size: 12px; }
.rv-hl {
  padding: 1px 0; border-radius: 3px; background: rgba(226, 82, 15, .07); color: inherit; box-shadow: inset 0 -2px 0 rgba(226, 82, 15, .35);
  outline: none; cursor: help; transition: background var(--fast), box-shadow var(--fast);
}
.rv-hl.is-hot { background: rgba(226, 82, 15, .2); box-shadow: inset 0 -2px 0 #E2520F; }
.rv-msg.is-focused .rv-hl:not(.is-hot) { background: transparent; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); }
.rv-msg.is-focused .og-cite:not(.is-hot) { opacity: .45; }
.og-cite { cursor: default; }
html:not(.sg-js) .rv-letter { display: block !important; }
html:not(.sg-js) .rv-letter + .rv-letter { border-top: 1px solid #ddd; }
.sg-js .rv-letter:not([hidden]) { animation: sg-fade 380ms var(--ease); }

/* ---- the waking grid ---------------------------------------------------------
   The list as a grid of contacts. reactivate.js swaps each cell's class as the
   month is scrubbed: plain, removed in cleaning, tinted by group, sent, and
   replied (filled along the ember, sunflower, light blue ramp). The stage card
   covers a clear patch at the top left, which only has cells on small screens. */
.rv-grid { --climb-bg: var(--ink); --climb-ink: var(--text); --climb-dim: var(--text-3); --climb-line: var(--line-2); position: relative; }
.rv-grid__fig { position: relative; width: 100%; }
.rv-grid__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--font-mono); }
.rv-grid__contours path { fill: none; stroke: url(#rvLine); stroke-width: 1; }
.rv-c { fill: rgba(var(--ov), .1); stroke: none; transition: fill .35s var(--ease), stroke .35s var(--ease); }
.rv-c--g0 { fill: rgba(47, 91, 211, .12); }
.rv-c--g1 { fill: rgba(47, 91, 211, .2); }
.rv-c--g2 { fill: rgba(47, 91, 211, .28); }
.rv-c--g3 { fill: rgba(47, 91, 211, .36); }
.rv-c--g4 { fill: rgba(47, 91, 211, .44); }
.rv-c--sent { stroke: rgba(var(--ov), .55); stroke-width: 1.2; }
.rv-c--rm { fill: none; stroke: rgba(var(--ov), .28); stroke-width: 1; stroke-dasharray: 2 2; }
.rv-c--re { stroke: none; }
.rv-c--hole { display: none; }
.rv-grid__legend text { fill: var(--text-3); font-size: 11px; letter-spacing: .08em; }
.rv-grid__legend .rv-grid__fine { opacity: .8; }
.rv-grid__axis path { fill: none; stroke: var(--text-3); stroke-width: 1; }
.rv-grid__axis text { fill: var(--text-3); font-size: 12px; letter-spacing: .08em; }
.rv-grid__done { fill: none; stroke: url(#rvLine); stroke-width: 4; stroke-linecap: round; }
.rv-grid__hit { fill: transparent; cursor: ew-resize; touch-action: pan-y; }

.rv-card {
  position: absolute; display: grid; align-content: center; gap: 8px; padding: 16px 20px 14px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(360px 160px at 0% 0%, rgba(226, 82, 15, .14), transparent 70%), rgba(var(--surface-rgb), .92);
  backdrop-filter: blur(6px); box-shadow: 0 18px 40px -26px rgba(20, 20, 20, .35);
}
.rv-card__n { margin: 0; font-size: 12px; color: var(--text-3); }
.rv-card__n b { color: var(--orange); font-weight: 500; }
.rv-card__step { display: grid; gap: 4px; }
.rv-card__step .sg-k { margin: 0; }
.rv-card__step h3 { margin: 0 0 2px; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 28px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.rv-card__step p { margin: 0; font-size: 13.8px; line-height: 1.5; color: var(--text-2); }
.sg-js .rv-card__step:not([hidden]) { animation: sg-fade 380ms var(--ease); }
.rv-card__nav { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 4px; }
.rv-card__nav .sg-climb__arrow { width: 34px; height: 34px; font-size: 14px; }
.rv-card__hint { margin: 0; font-size: 10.5px; }
.rv-grid.is-ready:not(.is-drawn) .og-stop, .rv-grid.is-ready:not(.is-drawn) .rv-card { opacity: 0; }
.rv-grid .og-stop, .rv-card { transition: opacity .6s var(--ease); }
html:not(.sg-js) .rv-card { position: static; height: auto !important; width: auto !important; margin-top: 16px; }
html:not(.sg-js) .rv-card__step { display: grid !important; margin-bottom: 10px; }
html:not(.sg-js) .rv-card__nav, html:not(.sg-js) .rv-card__hint, html:not(.sg-js) .rv-card__n { display: none; }
html:not(.sg-js) .rv-c--hole { display: inline; }

/* ---- small screens -------------------------------------------------------- */
@media (max-width: 900px) {
  .rv-msg { grid-template-columns: 1fr; }
  /* no room for the card inside the grid: it moves under it, and the patch fills in */
  .rv-card { position: static; width: auto !important; height: auto !important; margin-top: 16px; }
  .rv-c--hole { display: inline; }
}
@media (max-width: 640px) {
  .rv-grid__fig { width: 720px; }
  .rv-letter__body { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-c { transition: none; }
  .sg-js .rv-letter:not([hidden]), .sg-js .rv-card__step:not([hidden]) { animation: none; }
}