/*
 * Walkthrough of the upcoming payslip upload. Shares .modal_backdrop_div with
 * the time picker; everything below belongs to the dialog itself.
 */
.upload_preview_dialog_div {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background-color: var(--surface_container_lowest_color);
  border: 1px solid var(--border_color);
  border-top: 8px solid var(--primary_color);
  box-shadow: var(--shadow_strong);
  padding: 24px 32px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  outline: none;
  animation: upload_preview_appear 0.22s ease;
}
@keyframes upload_preview_appear {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.upload_preview_header_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Says outright that nothing here is live yet */
.upload_preview_badge_span {
  background-color: var(--surface_container_color);
  border: 1px dashed var(--border_strong_color);
  border-radius: 32px;
  padding: 5px 14px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text_secondary_color);
}

/* Stage — the animated picture above the text, same height on every step so
   the dialog does not jump while it advances */
.upload_preview_stage_div {
  position: relative;
  height: 210px;
  background-color: var(--surface_color);
  border: 1px solid var(--border_subtle_color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload_stage_div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  padding: 0 28px;
}

/* The payslip itself, used by the first two steps */
.upload_stage_paper_div {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 124px;
  /* Lighter than the stage behind it, otherwise the document disappears into
     the background while it moves */
  background-color: var(--surface_container_color);
  border: 1px solid var(--border_strong_color);
  border-top: 4px solid var(--primary_color);
  box-shadow: var(--shadow_strong);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.upload_stage_paper_line {
  height: 4px;
  background-color: var(--text_tertiary_color);
  border-radius: 2px;
}
.upload_stage_paper_line_strong {
  background-color: var(--primary_color);
  height: 6px;
  margin-top: auto;
}

/* Step 1 — the document drops into the target */
.upload_stage_dropzone_div {
  width: 132px;
  height: 132px;
  border: 2px dashed var(--border_strong_color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: upload_stage_dropzone_pulse 2.2s ease-in-out infinite;
}
.upload_stage_dropzone_icon {
  font-size: 44px;
  color: var(--text_tertiary_color);
}
@keyframes upload_stage_dropzone_pulse {
  0%, 100% {
    border-color: var(--border_strong_color);
    transform: scale(1);
  }
  50% {
    border-color: var(--primary_color);
    transform: scale(1.03);
  }
}
.upload_stage_paper_falling {
  animation: upload_stage_paper_fall 2.6s ease-in-out infinite;
}
@keyframes upload_stage_paper_fall {
  0% {
    transform: translate(0, -40px) rotate(-8deg);
    opacity: 0;
  }
  30% {
    transform: translate(0, 0) rotate(-3deg);
    opacity: 1;
  }
  70% {
    transform: translate(-96px, 0) rotate(0deg);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-96px, 0) scale(0.82);
    opacity: 0;
  }
}

/* Step 2 — a scan sweeps the document and the figures come out */
.upload_stage_scanline_span {
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(255, 204, 0, 0.35), transparent);
  border-top: 2px solid var(--primary_color);
  animation: upload_stage_scan 2.4s ease-in-out infinite;
}
@keyframes upload_stage_scan {
  0% { top: -24px; }
  100% { top: 124px; }
}
.upload_stage_chips_div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.upload_stage_chip_span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  background-color: var(--surface_container_color);
  border-left: 3px solid var(--primary_color);
  padding: 7px 12px;
  opacity: 0;
  animation: upload_stage_chip_in 0.45s ease forwards;
}
.upload_stage_chip_label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text_tertiary_color);
}
.upload_stage_chip_value {
  font-size: 14px;
  font-weight: 900;
  font-style: italic;
  color: var(--text_primary_color);
}
@keyframes upload_stage_chip_in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Step 3 — the lock, with rings running outwards */
.upload_stage_shield_div {
  position: relative;
  width: 108px;
  height: 108px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload_stage_shield_icon {
  font-size: 46px;
  color: var(--on_primary_color);
  background-color: var(--primary_color);
  border-radius: 50%;
  padding: 18px;
  position: relative;
  z-index: 1;
}
.upload_stage_pulse_span {
  position: absolute;
  inset: 0;
  border: 2px solid var(--primary_color);
  border-radius: 50%;
  opacity: 0;
  animation: upload_stage_pulse 2.4s ease-out infinite;
}
.upload_stage_pulse_delayed {
  animation-delay: 1.2s;
}
@keyframes upload_stage_pulse {
  0% {
    transform: scale(0.62);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}
.upload_stage_badges_div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upload_stage_badge_span {
  background-color: var(--success_surface_color);
  color: var(--success_color);
  border-radius: 32px;
  padding: 7px 16px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  animation: upload_stage_chip_in 0.45s ease forwards;
}

/* Step 4 — old value gives way to the new one */
.upload_stage_sync_icon {
  font-size: 44px;
  color: var(--primary_color);
  flex: 0 0 auto;
  animation: upload_stage_spin 2.8s linear infinite;
}
@keyframes upload_stage_spin {
  to { transform: rotate(360deg); }
}
.upload_stage_changes_div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.upload_stage_change_div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: upload_stage_chip_in 0.45s ease forwards;
}
.upload_stage_change_label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text_tertiary_color);
}
.upload_stage_change_old {
  font-size: 13px;
  font-weight: 700;
  color: var(--text_tertiary_color);
  text-decoration: line-through;
}
.upload_stage_change_arrow {
  font-size: 15px;
  color: var(--text_tertiary_color);
}
.upload_stage_change_new {
  font-size: 15px;
  font-weight: 900;
  font-style: italic;
  color: var(--primary_color);
}

/* Runs out while the step is on screen, so the next one is never a surprise */
.upload_preview_progress_span {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--primary_color);
  animation-name: upload_preview_progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes upload_preview_progress {
  from { width: 0; }
  to { width: 100%; }
}

.upload_preview_text_div {
  display: flex;
  flex-direction: column;
  min-height: 132px;
}
.upload_preview_title_text {
  font-size: 24px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.upload_preview_body_text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text_secondary_color);
}

.upload_preview_footer_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.upload_preview_dots_div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload_preview_dot_button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border_strong_color);
  transition: 0.2s ease;
}
.upload_preview_dot_button:hover {
  background-color: var(--text_tertiary_color);
}
.upload_preview_dot_done {
  background-color: var(--text_tertiary_color);
}
.upload_preview_dot_active {
  width: 28px;
  border-radius: 5px;
  background-color: var(--primary_color);
}
.upload_preview_note_text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text_tertiary_color);
  border-top: 1px solid var(--border_subtle_color);
  padding-top: 16px;
}

@media (max-width: 720px) {
  .upload_preview_dialog_div {
    padding: 20px;
    gap: 16px;
  }
  .upload_preview_stage_div {
    height: 180px;
  }
  .upload_stage_div {
    gap: 16px;
    padding: 0 16px;
  }
  .upload_stage_paper_div {
    width: 72px;
    height: 100px;
    padding: 10px 8px;
  }
  .upload_stage_dropzone_div {
    width: 104px;
    height: 104px;
  }
  @keyframes upload_stage_paper_fall {
    0% { transform: translate(0, -30px) rotate(-8deg); opacity: 0; }
    30% { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
    70% { transform: translate(-76px, 0) rotate(0deg); opacity: 1; }
    90%, 100% { transform: translate(-76px, 0) scale(0.82); opacity: 0; }
  }
  .upload_preview_title_text {
    font-size: 20px;
  }
  /* Old value, arrow and new value need the full row here — beside the label the
     names are cut off — measured up to 401px wide */
  .upload_stage_change_div {
    grid-template-columns: auto auto minmax(0, auto);
    justify-content: start;
    column-gap: 8px;
    row-gap: 2px;
  }
  .upload_stage_change_label {
    grid-column: 1 / -1;
  }
  .upload_preview_footer_div .primary_action_button {
    flex: 1;
    justify-content: center;
    padding: 14px 24px;
  }
}

/*
 * Without motion the walkthrough still works: every element sits in its final
 * state and the steps wait to be clicked.
 */

/*
 * Below this the dialog no longer fits comfortably, so everything it is made of
 * shrinks with the viewport instead of one part giving way. Each value is a CSS
 * lock: the first number applies at 300px, the second from 400px up, and in
 * between the size follows the width proportionally.
 */
@media (max-width: 400px) {
  .upload_preview_dialog_div {
    padding: clamp(14px, calc(14px + 6 * (100vw - 300px) / 100), 20px);
    gap: clamp(11px, calc(11px + 5 * (100vw - 300px) / 100), 16px);
  }
  .upload_preview_badge_span {
    font-size: clamp(8px, calc(8px + 1 * (100vw - 300px) / 100), 9px);
    padding: clamp(4px, calc(4px + 1 * (100vw - 300px) / 100), 5px) clamp(10px, calc(10px + 4 * (100vw - 300px) / 100), 14px);
  }
  .upload_preview_stage_div {
    height: clamp(132px, calc(132px + 48 * (100vw - 300px) / 100), 180px);
  }
  .upload_stage_div {
    gap: clamp(8px, calc(8px + 8 * (100vw - 300px) / 100), 16px);
    padding: 0 clamp(6px, calc(6px + 10 * (100vw - 300px) / 100), 16px);
  }

  /* Step 1 — the document and the target it drops into */
  .upload_stage_paper_div {
    width: clamp(48px, calc(48px + 24 * (100vw - 300px) / 100), 72px);
    height: clamp(67px, calc(67px + 33 * (100vw - 300px) / 100), 100px);
    padding: clamp(7px, calc(7px + 3 * (100vw - 300px) / 100), 10px) clamp(6px, calc(6px + 2 * (100vw - 300px) / 100), 8px);
    gap: clamp(6px, calc(6px + 2 * (100vw - 300px) / 100), 8px);
  }
  .upload_stage_paper_line {
    height: clamp(3px, calc(3px + 1 * (100vw - 300px) / 100), 4px);
  }
  .upload_stage_dropzone_div {
    width: clamp(78px, calc(78px + 26 * (100vw - 300px) / 100), 104px);
    height: clamp(78px, calc(78px + 26 * (100vw - 300px) / 100), 104px);
  }
  .upload_stage_dropzone_icon {
    font-size: clamp(33px, calc(33px + 11 * (100vw - 300px) / 100), 44px);
  }
  @keyframes upload_stage_paper_fall {
    0% { transform: translate(0, clamp(-30px, calc(-23px + -7 * (100vw - 300px) / 100), -23px)) rotate(-8deg); opacity: 0; }
    30% { transform: translate(0, 0) rotate(-3deg); opacity: 1; }
    70% { transform: translate(clamp(-76px, calc(-52px + -24 * (100vw - 300px) / 100), -52px), 0) rotate(0deg); opacity: 1; }
    90%, 100% { transform: translate(clamp(-76px, calc(-52px + -24 * (100vw - 300px) / 100), -52px), 0) scale(0.82); opacity: 0; }
  }

  /* Step 2 — the scan and the figures it produces */
  .upload_stage_chip_span {
    gap: clamp(5px, calc(5px + 9 * (100vw - 300px) / 100), 14px);
    padding: clamp(3px, calc(3px + 4 * (100vw - 300px) / 100), 7px) clamp(6px, calc(6px + 6 * (100vw - 300px) / 100), 12px);
  }
  .upload_stage_chip_label {
    font-size: clamp(8px, calc(8px + 1 * (100vw - 300px) / 100), 9px);
    /* Shortened rather than wrapped — a second line would push the last of the
       four chips out of the stage */
    min-width: 0;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .upload_stage_chip_value {
    font-size: clamp(12px, calc(12px + 2 * (100vw - 300px) / 100), 14px);
    white-space: nowrap;
  }
  .upload_stage_chips_div {
    gap: clamp(4px, calc(4px + 4 * (100vw - 300px) / 100), 8px);
  }

  /* Step 3 — the lock and its guarantees */
  .upload_stage_shield_div {
    width: clamp(81px, calc(81px + 27 * (100vw - 300px) / 100), 108px);
    height: clamp(81px, calc(81px + 27 * (100vw - 300px) / 100), 108px);
  }
  .upload_stage_shield_icon {
    font-size: clamp(35px, calc(35px + 11 * (100vw - 300px) / 100), 46px);
    padding: clamp(13px, calc(13px + 5 * (100vw - 300px) / 100), 18px);
  }
  .upload_stage_badge_span {
    font-size: clamp(9px, calc(9px + 1 * (100vw - 300px) / 100), 10px);
    padding: clamp(5px, calc(5px + 2 * (100vw - 300px) / 100), 7px) clamp(12px, calc(12px + 4 * (100vw - 300px) / 100), 16px);
  }
  .upload_stage_badges_div {
    gap: clamp(7px, calc(7px + 3 * (100vw - 300px) / 100), 10px);
  }

  /* Step 4 — the values that change from one payslip to the next */
  .upload_stage_sync_icon {
    font-size: clamp(33px, calc(33px + 11 * (100vw - 300px) / 100), 44px);
  }
  .upload_stage_change_div {
    column-gap: clamp(5px, calc(5px + 3 * (100vw - 300px) / 100), 8px);
    row-gap: 2px;
  }
  .upload_stage_change_label {
    font-size: clamp(8px, calc(8px + 1 * (100vw - 300px) / 100), 9px);
  }
  .upload_stage_change_old {
    font-size: clamp(11px, calc(11px + 2 * (100vw - 300px) / 100), 13px);
  }
  .upload_stage_change_new {
    font-size: clamp(13px, calc(13px + 2 * (100vw - 300px) / 100), 15px);
  }
  .upload_stage_changes_div {
    gap: clamp(7px, calc(7px + 3 * (100vw - 300px) / 100), 10px);
  }

  /* The text and the controls under the stage */
  .upload_preview_title_text {
    font-size: clamp(15px, calc(15px + 5 * (100vw - 300px) / 100), 20px);
  }
  .upload_preview_body_text {
    font-size: clamp(12px, calc(12px + 2 * (100vw - 300px) / 100), 14px);
  }
  .upload_preview_text_div {
    min-height: clamp(104px, calc(104px + 28 * (100vw - 300px) / 100), 132px);
  }
  .upload_preview_footer_div .primary_action_button {
    padding: clamp(10px, calc(10px + 4 * (100vw - 300px) / 100), 14px) clamp(16px, calc(16px + 8 * (100vw - 300px) / 100), 24px);
    font-size: clamp(11px, calc(11px + 3 * (100vw - 300px) / 100), 14px);
  }
  .upload_preview_dot_button {
    width: clamp(8px, calc(8px + 2 * (100vw - 300px) / 100), 10px);
    height: clamp(8px, calc(8px + 2 * (100vw - 300px) / 100), 10px);
  }
  .upload_preview_dot_active {
    width: clamp(22px, calc(22px + 6 * (100vw - 300px) / 100), 28px);
  }
  .upload_preview_note_text {
    font-size: clamp(10px, calc(10px + 1 * (100vw - 300px) / 100), 11px);
    padding-top: clamp(12px, calc(12px + 4 * (100vw - 300px) / 100), 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upload_preview_dialog_div,
  .upload_stage_dropzone_div,
  .upload_stage_paper_falling,
  .upload_stage_scanline_span,
  .upload_stage_sync_icon,
  .upload_stage_pulse_span,
  .upload_preview_progress_span {
    animation: none;
  }
  .upload_stage_chip_span,
  .upload_stage_badge_span,
  .upload_stage_change_div {
    animation: none;
    opacity: 1;
  }
  .upload_stage_scanline_span {
    top: 50px;
  }
  .upload_stage_pulse_span {
    opacity: 0.25;
  }
}