/* ==============================================================
   login-recap.css
   Post sign-in recap: the full-screen takeover that plays the
   "while you were away" numbers before the dashboard loads.

   Loaded after login-modal.css, which owns the scene tokens
   (--lm-hero-*, --lm-recap-grad, --lm-node-*, --lm-enter-*,
   --lm-ink-rgb, --lm-pulse) for both light and dark themes.
   Nothing here hardcodes a colour, so the theme toggle just works.
   ============================================================== */

.lm-recap {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: var(--lm-hero-text);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lm-recap[hidden] { display: none; }
.lm-recap.is-open { opacity: 1; }

body.lm-recap-active { overflow: hidden; }


/* ---- Backdrop -------------------------------------------------
   Three layers: the drifting brand gradient, a slow aurora sweep
   that keeps the field from reading flat, and the dot grain. */

.lm-recap-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--lm-recap-grad);
  animation: lm-recap-drift 22s ease-in-out infinite alternate;
}

.lm-recap-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--lm-grain) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at center, #000 25%, transparent 78%);
}

.lm-recap-veil {
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
  background:
    conic-gradient(
      from 200deg at 50% 45%,
      transparent 0deg,
      rgba(var(--lm-ink-rgb), 0.05) 90deg,
      transparent 200deg,
      rgba(var(--lm-ink-rgb), 0.04) 300deg,
      transparent 360deg
    );
  animation: lm-recap-sweep 38s linear infinite;
}

@keyframes lm-recap-drift {
  from { transform: scale(1)    translateY(0); }
  to   { transform: scale(1.08) translateY(-12px); }
}

@keyframes lm-recap-sweep {
  to { transform: rotate(360deg); }
}


/* ---- Controls: fast forward and skip ------------------------------
   Fast forward goes straight to the summary from any stage. Skip goes
   straight to the dashboard. A tap anywhere else moves one beat forward.
   Both buttons hide on the summary, where Enter dashboard is the one way
   out. */

.lm-recap-controls {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lm-recap-skip,
.lm-recap-ff {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--lm-hero-mute);
  background: var(--lm-hero-glass);
  border: 1px solid var(--lm-hero-rule);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}

.lm-recap-skip:hover,
.lm-recap-ff:hover {
  color: var(--lm-hero-text);
  border-color: rgba(var(--lm-ink-rgb), 0.34);
}

.lm-recap-skip svg,
.lm-recap-ff svg { transition: transform 0.2s; }
.lm-recap-skip:hover svg,
.lm-recap-ff:hover svg { transform: translateX(2px); }

/* Fast forward is icon only: a circle the same height as the Skip pill. */
.lm-recap-ff {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}


/* ---- Shell ---------------------------------------------------- */

.lm-recap-inner {
  position: relative;
  width: min(720px, 90vw);
  padding: 32px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.lm-recap.is-open .lm-recap-inner {
  animation: lm-recap-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes lm-recap-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}


/* ---- Avatar ---------------------------------------------------
   The portrait sits inside a hairline ring with a slow conic
   stroke tracking around it, so the header has a heartbeat even
   while a stage is holding still. */

.lm-recap-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 106px;
  height: 106px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(var(--lm-ink-rgb), 0.12) 0%,
    rgba(var(--lm-ink-rgb), 0.04) 50%,
    rgba(var(--lm-ink-rgb), 0.10) 100%
  );
  box-shadow:
    0 2px 8px rgba(var(--lm-ink-rgb), 0.08),
    0 16px 40px -8px rgba(var(--lm-ink-rgb), 0.14);
}

body.theme-dark .lm-recap-avatar-wrap {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.10) 100%
  );
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    0 16px 40px -8px rgba(0, 0, 0, 0.40);
}

/* Breathing halo */
.lm-recap-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--lm-hero-rule);
  pointer-events: none;
  animation: lm-recap-avatar-ring 3.2s ease-out infinite;
}

@keyframes lm-recap-avatar-ring {
  0%   { opacity: 0.55; transform: scale(1); }
  60%  { opacity: 0.16; transform: scale(1.12); }
  100% { opacity: 0.55; transform: scale(1); }
}

/* Tracking conic stroke, masked to a 1.5px ring */
.lm-recap-avatar-orbit {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--lm-pulse) 40deg,
    transparent 110deg,
    transparent 360deg
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  opacity: 0.85;
  animation: lm-recap-orbit 4.6s linear infinite;
}

@keyframes lm-recap-orbit {
  to { transform: rotate(360deg); }
}

.lm-recap-avatar {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lm-hero-glass);
}

.lm-recap.is-open .lm-recap-avatar-wrap {
  animation: lm-recap-avatar-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

@keyframes lm-recap-avatar-in {
  0%   { opacity: 0; transform: scale(0.60); filter: blur(8px); }
  55%  { opacity: 1; filter: blur(0); }
  75%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}


/* ---- Stages ---------------------------------------------------
   Every stage occupies the same grid cell so the outgoing and
   incoming ones overlap for a true crossfade. */

.lm-recap-stage-wrap {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
}

.lm-recap-stage {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.lm-recap-stage[hidden] { display: none; }

.lm-recap-stage.is-in {
  animation: lm-recap-in 0.7s cubic-bezier(0.22, 0.61, 0.18, 1) both;
}

.lm-recap-stage.is-out {
  animation: lm-recap-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

@keyframes lm-recap-in {
  from { opacity: 0; transform: translateY(18px) scale(0.99); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes lm-recap-out {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateY(-14px) scale(0.99); filter: blur(3px); }
}


/* ---- Kicker chip ---------------------------------------------- */

.lm-recap-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lm-hero-text);
  background: var(--lm-hero-glass);
  border: 1px solid var(--lm-hero-rule);
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.lm-recap-kicker .pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lm-pulse);
}

.lm-recap-kicker .pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lm-pulse);
  animation: lm-kicker-pulse 2.4s ease-out infinite;
}

/* Metric stages tint their own index chip with the stage accent */
.lm-recap-metric .lm-recap-kicker {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}


/* ---- Headline + the animated hello ---------------------------- */

.lm-recap-greet {
  font-family: var(--font-display, 'General Sans', system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.14;
  margin: 0;
  color: var(--lm-hero-text);
  max-width: 20ch;
}

.lm-recap-greet em { font-style: italic; font-weight: 500; color: var(--lm-hero-mute); }

/* Stage 0 runs larger than the summary headline: it is the moment. */
.lm-recap-hello-line {
  font-size: clamp(34px, 7vw, 66px);
  letter-spacing: -0.045em;
  max-width: 22ch;
}

.lm-hello-word,
.lm-hello-name {
  display: inline-block;
}

.lm-hello-word { color: var(--lm-hero-mute); }

.lm-hello-name {
  color: var(--lm-hero-text);
  white-space: pre;
}

.lm-hello-ch {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* "Hello," lands first, then the name resolves character by
   character. The per-glyph delay reads --i off the inline style
   the JS writes, so the timing lives entirely in CSS. */
.lm-recap-hello.is-in .lm-hello-word {
  animation: lm-hello-word 0.66s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both;
}

.lm-recap-hello.is-in .lm-hello-ch {
  animation: lm-hello-ch 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 42ms + 240ms);
}

@keyframes lm-hello-word {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes lm-hello-ch {
  from { opacity: 0; transform: translateY(18px) rotateX(38deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Caption waits for the last glyph. --n is the name length, also
   written by the JS onto the stage. */
.lm-recap-hello.is-in .lm-recap-cap-late {
  animation: lm-recap-cap-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--n, 6) * 42ms + 620ms);
}

@keyframes lm-recap-cap-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ---- Metric stages -------------------------------------------- */

.lm-recap-metric { --accent: var(--lm-node-iris); }
.lm-recap-metric[data-accent='cobalt'] { --accent: var(--lm-node-cobalt); }
.lm-recap-metric[data-accent='green']  { --accent: var(--lm-node-green); }
.lm-recap-metric[data-accent='honey']  { --accent: var(--lm-node-honey); }
.lm-recap-metric[data-accent='iris']   { --accent: var(--lm-node-iris); }

.lm-recap-num {
  position: relative;
  font-family: var(--font-display, 'General Sans', system-ui, sans-serif);
  font-size: clamp(60px, 13vw, 116px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 0 2px 6px;
  color: transparent;
  background-image: linear-gradient(168deg, var(--lm-hero-text) 18%, var(--accent) 128%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* If background-clip:text is unavailable the number must not vanish. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lm-recap-num {
    color: var(--lm-hero-text);
    background-image: none;
  }
}

/* Accent bloom behind the digits */
.lm-recap-metric::before {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(460px, 78%);
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--accent), transparent 68%);
  opacity: 0.16;
  filter: blur(28px);
  pointer-events: none;
  z-index: -1;
}

.lm-recap-stage.is-in .lm-recap-num {
  animation: lm-recap-num-pop 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes lm-recap-num-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.lm-recap-cap {
  margin: 0;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.5;
  color: var(--lm-hero-mute);
  max-width: 32ch;
}

.lm-recap-cap em { font-style: italic; color: var(--lm-hero-text); }


/* ---- Summary --------------------------------------------------- */

.lm-recap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border-top: 1px solid var(--lm-hero-rule);
  border-bottom: 1px solid var(--lm-hero-rule);
  margin: 4px 0;
}

/* Column layout with the label pushed to the bottom, so a value that wraps
   (long codes like UGX 91,400) does not drop its label below the others. */
.lm-recap-cell {
  display: flex;
  flex-direction: column;
  padding: 20px 8px;
}

.lm-recap-cell + .lm-recap-cell { border-left: 1px solid var(--lm-hero-rule); }

.lm-recap-summary.is-in .lm-recap-cell {
  animation: lm-recap-cell-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.lm-recap-summary.is-in .lm-recap-cell:nth-child(1) { animation-delay: 0.18s; }
.lm-recap-summary.is-in .lm-recap-cell:nth-child(2) { animation-delay: 0.28s; }
.lm-recap-summary.is-in .lm-recap-cell:nth-child(3) { animation-delay: 0.38s; }
.lm-recap-summary.is-in .lm-recap-cell:nth-child(4) { animation-delay: 0.48s; }

@keyframes lm-recap-cell-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.lm-recap-cell .v {
  display: block;
  font-family: var(--font-display, 'General Sans', system-ui, sans-serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--lm-hero-text);
  font-variant-numeric: tabular-nums;
}

.lm-recap-cell .l {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lm-hero-faint);
}

.lm-recap-enter {
  appearance: none;
  border: 0;
  cursor: pointer;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--lm-enter-ink);
  background: var(--lm-enter-bg);
  border-radius: 12px;
  padding: 14px 22px;
  box-shadow: 0 10px 26px -14px rgba(20, 24, 34, 0.5);
  transition: transform 0.05s, background 0.15s;
}

.lm-recap-enter:hover { background: var(--lm-enter-bg-h); }
.lm-recap-enter:active { transform: translateY(1px); }
.lm-recap-enter svg { transition: transform 0.2s; }
.lm-recap-enter:hover svg { transform: translateX(3px); }


/* ---- Progress ---------------------------------------------------
   Each stage owns a segment that fills over its own duration. The
   JS writes --dur onto the active segment from the DURATIONS table. */

.lm-recap-progress {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.lm-recap-progress .dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--lm-hero-rule);
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s;
}

.lm-recap-progress .dot.is-done { background: var(--lm-hero-mute); }

.lm-recap-progress .dot.is-on { width: 34px; }

.lm-recap-progress .dot.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lm-pulse);
  transform-origin: left center;
  animation: lm-recap-fill var(--dur, 2600ms) linear both;
}

@keyframes lm-recap-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ---- Responsive -------------------------------------------------- */

@media (max-width: 720px) {
  .lm-recap-inner { padding: 24px 20px 32px; gap: 18px; }
  .lm-recap-stage-wrap { min-height: 300px; }
  .lm-recap-avatar-wrap { width: 88px; height: 88px; }
  .lm-recap-avatar { width: 82px; height: 82px; max-width: 82px; max-height: 82px; }
  .lm-recap-grid { grid-template-columns: repeat(2, 1fr); }
  .lm-recap-cell:nth-child(3) { border-left: 0; }
  .lm-recap-cell:nth-child(n + 3) { border-top: 1px solid var(--lm-hero-rule); }
  .lm-recap-controls { top: 14px; right: 14px; }
}

@media (max-width: 380px) {
  .lm-recap-cap { max-width: 26ch; }
}


/* ---- Reduced motion ---------------------------------------------
   login-modal.css already kills every animation and transition
   globally under this query. The hello also renders as plain text
   (no per-glyph spans) and the counters jump to their final value,
   both handled in login-v7.js. Only the fill segment needs pinning
   so the active step still reads as active. */

@media (prefers-reduced-motion: reduce) {
  .lm-recap-progress .dot.is-on::after { transform: scaleX(1); }
}


/* ---- Steps track + the one line ---------------------------------
   The four stat steps sit side by side on a translateX track inside a
   clipped, full-bleed viewport, so every connector runs from one edge of
   the screen to the other. The line's <svg> is a child of the track and
   moves with the steps pixel for pixel. In every step the icon slot sits
   at the top centre, where the avatar was, with the number and caption
   below it; the slot centre is the anchor the pen is held on during
   travel. */

.lm-recap-inner { width: min(960px, 92vw); }

/* The stage-wrap column is sized by the wrapper, never by the steps'
   content: the counters grow as they count and would otherwise widen the
   track mid-sequence. */
.lm-recap-stage-wrap { grid-template-columns: minmax(0, 100%); }

/* Full bleed: the stage is centred in its column, so a 100vw width
   overflows equally on both sides and lands on the screen edges. */
.lm-recap-steps { width: 100vw; min-width: 0; }

.lm-recap-viewport {
  --recap-anchor: 0.5;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: inline-size;
}

.lm-recap-track {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  transform: translate3d(0, 0, 0);
}

.lm-recap-step {
  position: relative;
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 440px;
  padding: 8px 24px 24px;
  text-align: center;
}

/* The icon takes the avatar's place: same spot, larger. */
.lm-recap-slot {
  width: 180px;
  height: 180px;
  flex: none;
}

.lm-recap-step-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  opacity: 0;
  transition: opacity 200ms ease;
}

.lm-recap-step.is-active .lm-recap-step-text,
.lm-recap-step.is-done .lm-recap-step-text { opacity: 1; }

.lm-recap-step .lm-recap-num {
  font-size: clamp(52px, 8vw, 96px);
  padding: 0 0 4px;
}

.lm-recap-step .lm-recap-cap { max-width: 30ch; }

/* Per-step accents stay on the number only; the line is one colour. */
.lm-recap-step[data-accent='cobalt'] { --accent: var(--lm-node-cobalt); }
.lm-recap-step[data-accent='green']  { --accent: var(--lm-node-green); }
.lm-recap-step[data-accent='honey']  { --accent: var(--lm-node-honey); }
.lm-recap-step[data-accent='iris']   { --accent: var(--lm-node-iris); }
.lm-recap-step .lm-recap-kicker {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.lm-recap-step .lm-recap-num {
  color: transparent;
  background-image: linear-gradient(168deg, var(--lm-hero-text) 18%, var(--accent) 128%);
  -webkit-background-clip: text;
  background-clip: text;
}

.lm-recap-line {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  color: var(--lm-line, #b75c4e);
  opacity: 0;
  shape-rendering: geometricPrecision;
  contain: paint;
}

.lm-recap-line.is-ready { opacity: 1; transition: opacity 150ms ease; }
.lm-recap-line.is-fading { opacity: 0; transition: opacity 400ms ease; }
.lm-recap-line path { transition: opacity 200ms ease; }

/* The line colour: the brand accent, one value along the whole length. */
.lm-recap { --lm-line: #b75c4e; }
body.theme-dark .lm-recap { --lm-line: #d2755e; }

/* From the first step on: the avatar folds away (the icon takes its place)
   and nothing moves but the line, the label and the number. */
.lm-recap-avatar-wrap {
  transition: opacity 240ms ease, height 320ms cubic-bezier(0.22, 1, 0.36, 1), width 320ms cubic-bezier(0.22, 1, 0.36, 1), padding 320ms ease;
}
.lm-recap.lm-recap-steps-active .lm-recap-avatar-wrap {
  height: 0;
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  box-shadow: none;
  pointer-events: none;
}
.lm-recap.lm-recap-steps-active .lm-recap-avatar-wrap::before,
.lm-recap.lm-recap-steps-active .lm-recap-avatar-orbit { display: none; }
.lm-recap.lm-recap-steps-active .lm-recap-bg,
.lm-recap.lm-recap-steps-active .lm-recap-veil { animation-play-state: paused; }

@media (max-width: 720px) {
  .lm-recap-slot { width: 140px; height: 140px; }
  .lm-recap-step { min-height: 400px; padding: 4px 16px 16px; }
  .lm-recap-step-text { margin-top: 32px; }
  .lm-recap-step .lm-recap-cap { max-width: 24ch; }
}


/* ---- End screen: one way to the dashboard, plus replay ------------ */

.lm-recap.is-summary .lm-recap-controls { display: none; }

.lm-recap-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.lm-recap-actions .lm-recap-enter { margin-top: 0; }

.lm-recap-replay {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--lm-hero-mute);
  background: var(--lm-hero-glass);
  border: 1px solid var(--lm-hero-rule);
  border-radius: 12px;
  padding: 13px 18px;
  backdrop-filter: blur(6px);
  transition: color 0.15s, border-color 0.15s, transform 0.05s;
}

.lm-recap-replay:hover {
  color: var(--lm-hero-text);
  border-color: rgba(var(--lm-ink-rgb), 0.34);
}

.lm-recap-replay:active { transform: translateY(1px); }
.lm-recap-replay svg { transition: transform 0.3s; }
.lm-recap-replay:hover svg { transform: rotate(-40deg); }

/* Countdown to the auto-redirect, inside the dashboard button. */
.lm-recap-countdown {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  margin-left: 2px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lm-enter-ink);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
body:not(.theme-dark) .lm-recap-countdown {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
body.theme-dark .lm-recap-countdown {
  background: rgba(20, 23, 28, 0.08);
  box-shadow: inset 0 0 0 1px rgba(20, 23, 28, 0.14);
}
.lm-recap-countdown[hidden] { display: none; }