/* Clean, compact streak modal. Loaded after px-learn.css to replace the older
   layered modal rules without changing the streak lifecycle behavior. */
.pxl-modal {
  padding: 14px;
  overflow: hidden;
  align-items: center;
  background: transparent;
}

html.px-streak-modal-open,
html.px-streak-modal-open body {
  overflow: hidden;
}

.pxl-modal__scrim {
  position: fixed;
  background: rgba(15, 23, 42, .68);
  backdrop-filter: blur(5px);
}

.pxl-modal__card {
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-width: 520px;
  max-height: calc(100dvh - 28px);
  margin: auto;
  overflow: hidden;
  gap: 0;
  color: var(--px-ink-700);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .26);
  font: var(--px-text-body);
  animation: px-streak-modal-enter .22s var(--px-ease-out) both;
}

.pxl-modal__header {
  min-height: 62px;
  padding: 0 20px;
  grid-template-columns: 38px 1fr 38px;
  border-bottom: 1px solid #edf0f2;
}

.pxl-modal__header h5 {
  color: #17202a;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.pxl-modal__back,
.pxl-modal__close,
.pxl-cal__chev {
  display: grid;
  place-items: center;
  padding: 0;
  color: #66727c;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.pxl-modal__back,
.pxl-modal__close {
  position: static;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.pxl-modal__back:hover,
.pxl-modal__close:hover,
.pxl-cal__chev:hover:not(:disabled) {
  color: #17202a;
  background: #f4f6f7;
}

.pxl-modal__back:focus-visible,
.pxl-modal__close:focus-visible,
.pxl-cal__chev:focus-visible {
  outline: 2px solid var(--px-brand);
  outline-offset: 2px;
}

.pxl-modal__back svg,
.pxl-modal__close svg,
.pxl-cal__chev svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pxl-modal__scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
}

.pxl-streak-overview {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.pxl-streakhero {
  min-height: 0;
  margin: 0;
  padding: 20px;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  color: #17202a;
  text-align: left;
  background: linear-gradient(135deg, #fff8f1 0%, #fff2e2 100%);
  border: 1px solid #fed9b4;
  border-radius: 18px;
}

.pxl-streakhero.is-active,
.pxl-streakhero.is-zero,
.pxl-streakhero.is-at-risk {
  min-height: 0;
  color: #17202a;
  background: linear-gradient(135deg, #fff8f1 0%, #fff2e2 100%);
  box-shadow: none;
}

.pxl-streakhero.is-at-risk {
  background: linear-gradient(135deg, #fff8f1 0%, #fff5e9 100%);
  border-color: #f6bd7f;
}

.pxl-streakhero__flame {
  position: relative;
  width: 64px;
  max-width: none;
  height: 70px;
  display: grid;
  place-items: center;
  color: #f56b0f;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pxl-streakhero__flame svg {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 64px;
  overflow: visible;
  stroke: none;
}

.pxl-streakhero.is-zero .pxl-streakhero__flame {
  color: #9aa5ad;
  filter: grayscale(1);
  opacity: .75;
}

.pxl-streakhero.is-active .pxl-streakhero__flame {
  animation: none;
}

.pxl-streakhero.is-active .pxl-flame__outer,
.pxl-streakhero.is-active .pxl-flame__inner,
.pxl-streakhero.is-active .pxl-flame__ember {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.pxl-streakhero.is-active .pxl-flame__outer {
  animation: px-streak-flame-outer 1.55s ease-in-out infinite;
}

.pxl-streakhero.is-active .pxl-flame__inner {
  animation: px-streak-flame-inner 1.15s ease-in-out infinite alternate;
}

.pxl-streakhero.is-active .pxl-flame__ember {
  opacity: 0;
  animation: px-streak-ember 2s ease-out infinite;
}

.pxl-streakhero.is-active .pxl-flame__ember--two {
  animation-delay: -1.05s;
}

.pxl-streakhero__warning {
  right: -6px;
  top: -6px;
  width: 21px;
  height: 21px;
  border-width: 2px;
  background: #d92d20;
  font: 700 12px/1 var(--px-font-sans);
}

.pxl-streakhero__copy {
  gap: 6px;
}

.pxl-streakhero__metric {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}

.pxl-streakhero__number {
  color: #e85d08;
  font-size: 40px;
  line-height: .95;
  font-weight: 700;
}

.pxl-streakhero__label {
  color: #5c6670;
  font-size: 14px;
  font-weight: 600;
}

.pxl-streakhero__status {
  color: #17202a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

.pxl-streakhero p {
  max-width: none;
  color: #65717a;
  font-size: 13px;
  line-height: 1.45;
}

.pxl-modal__section {
  padding: 0;
}

.pxl-modal__section-title {
  margin: 0 0 8px;
  color: #17202a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

.pxl-saver {
  min-height: 0;
  padding: 14px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, #f4fbff 0%, #edf8fc 100%);
  border: 1px solid #cce8f2;
  border-radius: 15px;
}

.pxl-saver__badge {
  width: 56px;
  height: 56px;
  color: #1684a8;
  background: linear-gradient(145deg, #fff 0%, #f5fcff 100%);
  border: 1px solid #c6e4ee;
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(47, 59, 69, .08);
}

.pxl-saver__badge svg,
.pxl-repair__option-icon svg,
.pxl-confirm__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pxl-saver__badge svg {
  width: 27px;
  height: 27px;
}

.pxl-saver__body {
  gap: 5px;
}

.pxl-saver__head {
  align-items: center;
  gap: 10px;
}

.pxl-saver__title {
  color: #17202a;
  font-size: 14px;
  font-weight: 700;
}

.pxl-saver__balance {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #28748c;
  background: rgba(255, 255, 255, .78);
  border: 1px solid #d6eaf1;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.pxl-saver__balance strong {
  font-weight: 700;
}

.pxl-saver__hint {
  color: #61717b;
  font-size: 12px;
  line-height: 1.4;
}

.pxl-saver__track {
  gap: 6px;
  margin-top: 2px;
}

.pxl-saver__slot {
  width: 25px;
  height: 7px;
  overflow: hidden;
  background: #d9e9ee;
  border: 0;
  border-radius: 999px;
}

.pxl-saver__slot::before {
  display: none;
}

.pxl-saver__slot.is-filled {
  background: #43abc8;
  border: 0;
  box-shadow: none;
}

.pxl-cal {
  padding: 13px 14px 12px;
  background: #fff;
  border: 1px solid #e1e6e9;
  border-radius: 16px;
}

.pxl-cal__nav {
  min-height: 32px;
  margin-bottom: 8px;
  grid-template-columns: 32px 1fr 32px;
}

.pxl-cal__chev {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.pxl-cal__chev:disabled {
  opacity: .28;
}

.pxl-cal__month {
  color: #17202a;
  font-size: 14px;
  font-weight: 700;
}

.pxl-cal__dow,
.pxl-cal__grid {
  column-gap: 5px;
  row-gap: 3px;
}

.pxl-cal__dow {
  margin-bottom: 4px;
}

.pxl-cal__dow span {
  color: #8a959d;
  font-size: 11px;
  font-weight: 600;
}

.pxl-cal__pad,
.pxl-cal__cell {
  height: 34px;
  aspect-ratio: auto;
}

.pxl-cal__cell {
  width: 34px;
  justify-self: center;
  color: #34404a;
  font-size: 12px;
  border-radius: 50%;
}

.pxl-cal__cell.is-active {
  color: #fff;
  background: #f56b0f;
  font-weight: 700;
}

.pxl-cal__cell.is-today {
  box-shadow: inset 0 0 0 2px #43abc8;
}

.pxl-cal__cell.is-today::before {
  display: none;
}

.pxl-cal__cell.is-saver::after {
  left: auto;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  transform: none;
  background: #43abc8;
  border: 2px solid #fff;
  border-radius: 50%;
}

.pxl-cal__cell.is-repaired {
  color: #16697f;
  background: #e7f7fb;
  font-weight: 700;
}

.pxl-cal__legend {
  gap: 12px;
  margin-top: 9px;
  color: #7a858d;
  font-size: 10px;
}

.pxl-cal__legend .is-complete { background: #f56b0f; }
.pxl-cal__legend .is-protected { background: #43abc8; }
.pxl-cal__legend .is-missed { background: #d92d20; }

/* Repair state retains all choices but follows the same compact card language. */
.pxl-repair {
  margin: 0;
  padding: 15px !important;
  background: #fffaf4;
  border: 1px solid #f3d3ad;
  border-radius: 15px;
}

.pxl-repair__head span,
.pxl-repair__head time,
.pxl-quiz__step,
.pxl-confirm__eyebrow {
  font-weight: 700;
}

.pxl-repair__head h6 {
  font-size: 16px;
}

.pxl-repair__option {
  padding: 9px 10px;
}

.pxl-repair__option:disabled,
.pxl-repair__option.is-disabled {
  color: #67727b;
  background: #f7f8f8;
  border-color: #e5e8ea;
  cursor: not-allowed;
  opacity: .76;
}

.pxl-repair__option:disabled:hover {
  border-color: #e5e8ea;
}

.pxl-repair__option-icon {
  color: #26833f;
}

.pxl-repair__option-icon.is-saver {
  color: #1684a8;
  background: #e9f8fc;
}

.pxl-repair__option-icon.is-bamboo {
  color: #3d8438;
}

.pxl-repair__option strong,
.pxl-repair__option b,
.pxl-btn-primary,
.pxl-btn-quiet {
  font-weight: 700;
}

.pxl-repair__note {
  margin: 10px 0 0 !important;
  padding: 9px 10px;
  color: #8a4518 !important;
  background: #fff3e6;
  border-radius: 10px;
  font-size: 11px !important;
  line-height: 1.4;
}

.pxl-calendar-section {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e6e9;
  border-radius: 15px;
}

.pxl-calendar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  color: #17202a;
  text-align: left;
  background: #fff;
  border: 0;
  cursor: pointer;
}

.pxl-calendar-toggle:hover {
  background: #f8fafb;
}

.pxl-calendar-toggle:focus-visible {
  outline: 2px solid var(--px-brand);
  outline-offset: -3px;
}

.pxl-calendar-toggle > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pxl-calendar-toggle strong {
  font-size: 14px;
  font-weight: 700;
}

.pxl-calendar-toggle small {
  color: #7a858d;
  font-size: 11px;
}

.pxl-calendar-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.pxl-calendar-view {
  padding: 18px;
}

.pxl-confirm__icon {
  color: #f56b0f;
  font-size: 0;
}

.pxl-confirm__icon.is-freeze {
  color: #1684a8;
  background: #e9f8fc;
}

.pxl-confirm__icon.is-bamboo {
  color: #3d8438;
  background: #eff8ec;
}

.pxl-confirm__icon.is-success {
  color: #248a45;
  background: #e9f8ee;
}

@keyframes px-streak-modal-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes px-streak-flame-outer {
  0%, 100% { transform: translateY(0) scale(1) rotate(-.7deg); }
  35% { transform: translateY(-1px) scale(.98, 1.035) rotate(.8deg); }
  70% { transform: translateY(.3px) scale(1.018, .992) rotate(-.3deg); }
}

@keyframes px-streak-flame-inner {
  from { transform: translateX(-.5px) scale(.97, 1.02) rotate(-1deg); }
  to { transform: translateX(.7px) scale(1.035, .975) rotate(1.2deg); }
}

@keyframes px-streak-ember {
  0%, 34% { opacity: 0; transform: translateY(4px) scale(.65); }
  48% { opacity: .9; }
  78%, 100% { opacity: 0; transform: translateY(-17px) translateX(3px) scale(.25); }
}

@media (max-width: 560px) {
  .pxl-modal {
    padding: 8px;
    align-items: center;
  }

  .pxl-modal__card {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
    margin: auto;
    border-radius: 20px;
  }

  .pxl-modal__header {
    min-height: 56px;
    padding: 0 14px;
  }

  .pxl-streak-overview {
    gap: 11px;
    padding: 12px;
  }

  .pxl-streakhero {
    padding: 14px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    border-radius: 15px;
  }

  .pxl-streakhero__flame {
    width: 56px;
    height: 60px;
  }

  .pxl-streakhero__flame svg {
    width: 50px;
    height: 55px;
  }

  .pxl-streakhero__number { font-size: 34px; }
  .pxl-streakhero__label { font-size: 12px; }
  .pxl-streakhero p { font-size: 12px; }
  .pxl-modal__section-title { margin-bottom: 6px; font-size: 14px; }

  .pxl-saver {
    padding: 11px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .pxl-saver__badge {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .pxl-saver__head {
    align-items: flex-start;
  }

  .pxl-saver__balance {
    padding: 4px 6px;
    font-size: 10px;
  }

  .pxl-cal {
    padding: 9px 8px 8px;
  }

  .pxl-cal__nav {
    margin-bottom: 4px;
  }

  .pxl-cal__pad,
  .pxl-cal__cell {
    height: 30px;
  }

  .pxl-cal__cell {
    width: 30px;
    font-size: 11px;
  }

  .pxl-cal__legend {
    margin-top: 6px;
  }

  .pxl-calendar-toggle {
    min-height: 46px;
    padding: 8px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pxl-modal__card,
  .pxl-streakhero.is-active .pxl-flame__outer,
  .pxl-streakhero.is-active .pxl-flame__inner,
  .pxl-streakhero.is-active .pxl-flame__ember {
    animation: none;
  }
}