/* PR-UI11 Points / Redemption presentation layer */
:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) #module-content {
  --points-ink: #233039;
  --points-muted: #68777b;
  --points-brand: #063f3c;
  --points-accent: #c95749;
  --points-surface: #ffffff;
  --points-line: #dbe5e3;
  --points-soft: #edf5f2;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .module-page {
  max-inline-size: 1160px;
  margin-inline: auto;
  padding-block: clamp(1rem, 2vw, 2rem) 5rem;
  color: var(--points-ink);
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .module-header {
  margin-block-end: 1.25rem;
  max-inline-size: 760px;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .module-header h1,
:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .module-header h2 {
  color: var(--points-brand);
  letter-spacing: 0;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .attempt-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-block: 0 1rem;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .attempt-summary > span {
  min-block-size: 86px;
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--points-line);
  border-radius: 8px;
  background: var(--points-surface);
  box-shadow: 0 2px 12px rgb(6 63 60 / 6%);
  color: var(--points-muted);
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .attempt-summary strong {
  color: var(--points-brand);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .panel,
:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .point-activity-card {
  border-color: var(--points-line);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(6 63 60 / 5%);
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .points-redemption-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-inline-start: 4px solid var(--points-accent);
  background: linear-gradient(90deg, #fff8f5, var(--points-surface));
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .points-redemption-callout h3,
:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .panel-title-row h3 {
  margin-block-start: 0;
  color: var(--points-brand);
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .row-actions {
  flex-wrap: wrap;
  gap: .6rem;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .break-text {
  overflow-wrap: anywhere;
  color: var(--points-muted);
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .point-activity-grid,
:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .point-earning-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body[data-page-module="pointsRedemption"] .point-activity-grid,
body[data-page-module="pointsRedemption"] .point-earning-task-grid {
  margin-block: .75rem 1.25rem;
}

body[data-page-module="pointsRedemption"] .point-activity-card,
body[data-page-module="pointsRedemption"] .point-earning-task-card {
  min-inline-size: 0;
  padding: 1.1rem;
  background: var(--points-surface);
}

body[data-page-module="pointsRedemption"] .point-activity-card-head,
body[data-page-module="pointsRedemption"] .point-earning-task-card .point-activity-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

body[data-page-module="pointsRedemption"] .point-activity-card h3,
body[data-page-module="pointsRedemption"] .point-earning-task-card h4 {
  color: var(--points-brand);
  overflow-wrap: anywhere;
}

body[data-page-module="pointsRedemption"] .point-activity-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-block: 1rem;
}

body[data-page-module="pointsRedemption"] .point-activity-card dl > div {
  padding: .65rem .75rem;
  border-radius: 6px;
  background: var(--points-soft);
}

body[data-page-module="pointsRedemption"] .point-activity-card dt,
body[data-page-module="pointsRedemption"] .point-activity-card dd {
  margin: 0;
}

body[data-page-module="pointsRedemption"] .point-activity-card dt {
  color: var(--points-muted);
  font-size: .875rem;
}

body[data-page-module="pointsRedemption"] .point-activity-card dd {
  color: var(--points-brand);
  font-weight: 700;
}

body[data-page-module="pointsRedemption"] .point-activity-card .button.full {
  inline-size: 100%;
  margin-block-start: .9rem;
}

body[data-page-module="pointsRedemption"] .point-earning-task-card .field {
  margin-block: .75rem 0;
}

body[data-page-module="pointsRedemption"] .point-earning-submission-history {
  margin-block-start: 1rem;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--points-line);
}

body[data-page-module="pointsRedemption"] .point-earning-submission-history-list {
  margin: 0;
  padding-inline-start: 1.15rem;
}

body[data-page-module="pointsRedemption"] .point-earning-submission-history-item + .point-earning-submission-history-item {
  margin-block-start: .65rem;
}

body[data-page-module="pointsRedemption"] .point-earning-submission-history-head,
body[data-page-module="pointsRedemption"] .point-earning-submission-history-meta > div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

body[data-page-module="pointsRedemption"] .point-earning-submission-history-meta {
  margin-block: .35rem 0;
  color: var(--points-muted);
  font-size: .9rem;
}

body[data-page-module="pointsRedemption"] .point-earning-submission-history-meta dt,
body[data-page-module="pointsRedemption"] .point-earning-submission-history-meta dd {
  margin: 0;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .redemption-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-inline-size: 0;
  border-color: var(--points-line);
  border-radius: 8px;
}

:is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .redemption-card code {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  color: var(--points-brand);
}

@media (max-width: 820px) {
  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .module-page {
    padding-inline: 1rem;
  }

  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .point-activity-grid,
  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .point-earning-task-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .attempt-summary {
    grid-template-columns: 1fr;
  }

  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .points-redemption-callout,
  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .redemption-card {
    align-items: stretch;
    flex-direction: column;
  }

  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .points-redemption-callout .button,
  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) .redemption-card .row-actions,
  :is(body[data-page-module="pointsRedemption"]) .point-activity-card .button.full {
    inline-size: 100%;
  }

  body[data-page-module="pointsRedemption"] .point-activity-card dl {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(body[data-page-module="myPoints"], body[data-page-module="pointsRedemption"]) * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}