/* Siegel Financial v517 — reminder controls, repeatable Budget motion, and a retirement arrival moment. */

/* Settings navigation stays a single predictable row at every breakpoint. */
.settings-page .settings-jump {
  display: flex;
  grid-template-columns: none;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.settings-page .settings-jump a {
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}

.settings-page :is(
  #settings-account,
  #settings-membership,
  #settings-reminders,
  #settings-profile,
  #settings-planning,
  #settings-privacy,
  #settings-data
) {
  scroll-margin-top: 142px;
}

.settings-reminder-card {
  position: relative;
  margin-bottom: 18px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 32%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--paper) 97%, var(--teal) 3%), var(--paper));
  box-shadow: 0 26px 62px -54px color-mix(in srgb, var(--teal) 58%, transparent);
}

.settings-reminder-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--green));
  content: "";
  opacity: .86;
}

.settings-reminder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
  align-items: center;
  gap: clamp(22px, 4vw, 48px);
}

.settings-reminder-copy h2 {
  max-width: 24ch;
  margin: 5px 0 9px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(23px, 2.45vw, 32px);
  font-weight: 690;
  letter-spacing: -.018em;
  line-height: 1.08;
  text-wrap: balance;
}

.settings-reminder-copy p {
  max-width: 70ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.settings-reminder-day {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper-2) 88%, var(--gold) 4%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 36%, transparent);
}

.settings-reminder-day > span {
  color: var(--ink-2);
  font-size: 9.5px;
  font-weight: 830;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.settings-reminder-day .select-wrap,
.settings-reminder-day select {
  width: 100%;
}

.settings-reminder-day select {
  min-height: 48px;
  padding-inline: 13px 38px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
}

.settings-reminder-day small {
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.4;
}

.settings-reminder-status {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 2px 11px;
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper-2) 88%, transparent);
}

.settings-reminder-status-mark {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--ink-3) 55%, transparent);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-3) 7%, transparent);
}

.settings-reminder-status.active .settings-reminder-status-mark {
  border-color: color-mix(in srgb, var(--green) 70%, white 10%);
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
}

.settings-reminder-status b {
  color: var(--ink);
  font-size: 12px;
}

.settings-reminder-status p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.45;
}

.settings-reminder-cadence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.settings-reminder-cadence > span {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 9px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--paper-2);
}

.settings-reminder-cadence i {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.settings-reminder-cadence .active i {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, var(--paper));
}

.settings-reminder-cadence b {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.settings-reminder-cadence small {
  min-width: 0;
  color: var(--ink-3);
  font-size: 9.5px;
  line-height: 1.3;
}

.settings-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

/* Projection playback lands in the retirement marker, then celebrates the arrival. */
.projection-page-wrap .projection-celebration {
  opacity: 0;
  pointer-events: none;
}

.projection-page-wrap .projection-celebration-ring {
  fill: none;
  stroke: #f3d47b;
  stroke-width: 1.7;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.projection-page-wrap .projection-celebration-rays line {
  stroke: #f5d77c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  opacity: 0;
}

.projection-page-wrap .projection-celebration-rays :is(.ray-2, .ray-4, .ray-6, .ray-8) {
  stroke: #80ddb0;
}

.projection-page-wrap .projection-celebration-particles :is(circle, path) {
  fill: #f5d77c;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.projection-page-wrap .projection-celebration-particles :is(.particle-2, .particle-4) {
  fill: #80ddb0;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration {
  opacity: 1;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-ring.ring-one {
  animation: projection-celebration-ring 1.02s cubic-bezier(.18, .82, .22, 1) both;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-ring.ring-two {
  animation: projection-celebration-ring 1.04s cubic-bezier(.18, .82, .22, 1) .12s both;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-rays line {
  animation: projection-celebration-ray .78s cubic-bezier(.16, .78, .2, 1) both;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-rays :is(.ray-2, .ray-5, .ray-8) {
  animation-delay: .08s;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-rays :is(.ray-3, .ray-6) {
  animation-delay: .15s;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-rays :is(.ray-4, .ray-7) {
  animation-delay: .21s;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-particles :is(circle, path) {
  animation: projection-celebration-particle .82s cubic-bezier(.16, .78, .2, 1) .12s both;
}

.projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration-particles :is(.particle-2, .particle-4) {
  animation-delay: .21s;
}

.projection-page-wrap .projection-retirement-callout.projection-is-celebrating {
  animation: projection-retirement-celebrate .92s cubic-bezier(.16, .82, .22, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}

.projection-page-wrap .projection-retirement-callout.projection-is-celebrating rect {
  stroke: #f5d77c;
  stroke-width: 1.55;
  filter: drop-shadow(0 0 8px rgba(240, 210, 124, .5)) drop-shadow(0 10px 20px rgba(1, 8, 15, .38));
}

.projection-page-wrap .projection-retirement-callout.projection-is-celebrating .projection-endpoint {
  animation: projection-retirement-endpoint .9s cubic-bezier(.16, .82, .22, 1) both;
}

@keyframes projection-celebration-ring {
  0% { opacity: 0; transform: scale(.34); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: scale(2.15); }
}

@keyframes projection-celebration-ray {
  0% { opacity: 0; stroke-dashoffset: 18; }
  24% { opacity: .95; }
  72% { opacity: .78; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -4; }
}

@keyframes projection-celebration-particle {
  0% { opacity: 0; transform: scale(.25) rotate(-18deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.45) rotate(18deg); }
}

@keyframes projection-retirement-celebrate {
  0% { filter: brightness(.96); transform: scale(.99); }
  32% { filter: brightness(1.2); transform: scale(1.022); }
  68% { filter: brightness(1.08); transform: scale(1.008); }
  100% { filter: none; transform: none; }
}

@keyframes projection-retirement-endpoint {
  0% { filter: drop-shadow(0 0 3px rgba(230, 190, 90, .5)); transform: scale(.92); }
  40% { filter: drop-shadow(0 0 12px rgba(245, 215, 124, 1)) drop-shadow(0 0 26px rgba(128, 221, 176, .52)); transform: scale(1.34); }
  100% { filter: drop-shadow(0 0 7px rgba(230, 190, 90, .88)) drop-shadow(0 0 18px rgba(230, 190, 90, .38)); transform: none; }
}

@media (max-width: 880px) {
  .settings-page .settings-jump {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .settings-page .settings-jump a {
    flex-basis: 88px;
    min-width: 88px;
    padding-inline: 9px;
  }
}

@media (max-width: 700px) {
  .settings-reminder-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .settings-reminder-day {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 150px);
    align-items: center;
  }

  .settings-reminder-day > span,
  .settings-reminder-day small {
    grid-column: 1;
  }

  .settings-reminder-day .select-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 520px) {
  .settings-page .settings-jump {
    display: flex;
    grid-template-columns: none;
    width: calc(100% + 8px);
    max-width: calc(100% + 8px);
    margin-left: -4px;
    overflow-x: auto;
  }

  .settings-page .settings-jump a {
    flex: 0 0 82px;
    min-width: 82px;
    padding: 10px 8px;
  }

  .settings-reminder-card {
    padding: 20px 16px 17px;
  }

  .settings-reminder-copy h2 {
    font-size: 24px;
  }

  .settings-reminder-day {
    grid-template-columns: minmax(0, 1fr) 118px;
    padding: 13px;
  }

  .settings-reminder-day select {
    min-height: 44px;
    font-size: 19px;
  }

  .settings-reminder-cadence {
    grid-template-columns: 1fr;
  }

  .settings-reminder-cadence > span {
    min-height: 58px;
  }
}

@media (max-width: 370px) {
  .settings-reminder-day {
    grid-template-columns: 1fr;
  }

  .settings-reminder-day .select-wrap,
  .settings-reminder-day > span,
  .settings-reminder-day small {
    grid-column: 1;
    grid-row: auto;
  }

  .settings-reminder-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration,
  .projection-page-wrap .projection-retirement-callout.projection-is-celebrating {
    animation: none !important;
  }

  .projection-page-wrap .projection-chart-shell.is-celebrating-projection .projection-celebration {
    display: none;
  }
}