/* Simms Partner Program — native account dashboard. */

.simms-refer-earn-page {
  --refer-ink: #101012;
  --refer-paper: #fcfaf6;
  --refer-ice: #eef5fb;
  --refer-line: rgb(16 16 18 / 0.12);
  --refer-muted: rgb(16 16 18 / 0.58);
  --refer-dusk: var(--dusk-deep, #263d73);
  --refer-dusk-mid: var(--dusk-mid, #1b2f62);
  --refer-dusk-deep: var(--dusk-violet, #172953);
  --refer-horizon: var(--horizon, #d4ada6);
  --refer-success: #2c6b52;
  --refer-warning: #a16a23;
  --refer-error: #9b3c3c;
  --refer-radius: 18px;
  /* Account pages are instruments, not landing pages. The measure matches the
     storefront grid (~1100px) and the type tops out well below the homepage
     hero so the data reads first. */
  --refer-measure: 1100px;
  --refer-display: clamp(2rem, 3.2vw, 2.75rem);
  --refer-code: clamp(1.6rem, 3.2vw, 2.4rem);
  --refer-heading: clamp(1.2rem, 1.7vw, 1.5rem);
  --refer-subheading: clamp(1.1rem, 1.5vw, 1.3rem);
  background: var(--refer-paper);
}

.simms-refer-earn-page main {
  padding-block: 0;
}

.simms-refer-earn-page .simms-section {
  padding-block: 22px 0;
}

.simms-refer-earn-page .simms-rail {
  width: min(100% - 40px, var(--refer-measure));
}

.simms-refer-earn-page .simms-entry__content {
  max-width: none;
}

/* The account container, its measure, and the gap between nav and content are
   owned by the theme (simms-account.css) so the chrome stays identical across
   every endpoint. This used to force display:block and max-width:none here,
   which defeated the theme's grid and collapsed the space under the nav. */

.simms-refer-earn-page .woocommerce-MyAccount-content {
  position: relative;
  width: 100%;
}

.simms-refer {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--refer-measure));
  margin-inline: auto;
  color: var(--refer-ink);
  font-family: var(--font-body--family);
}

/* .simms-refer is the <main> element, so `.simms-refer-earn-page main`
   above (0,1,1) outranks a bare `.simms-refer` (0,1,0) and zeroes any padding
   set there — the padding-bottom that used to live in that rule never applied.
   Scope high enough to win. The intro wrapper owns the top inset because its
   ambient frame must grow with the optional activation notice. */
.simms-refer-earn-page main.simms-refer {
  padding-top: 0;
  padding-bottom: 56px;
}

/* Keep the hero, its optional one-time notice, and the metrics row in one
   content-sized frame. The frame used to have a fixed 752px height, so adding
   the activation notice pushed the metrics through its lower edge. Extending
   the ambient layer past this wrapper preserves the intentional overlap with
   the process section without adding space to the document flow. */
.simms-refer__intro {
  display: flow-root;
  position: relative;
  padding-top: 30px;
}

.simms-refer svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
}

.simms-refer__ambient {
  position: absolute;
  z-index: -2;
  /* Top edge aligns with the content column, which is where the card starts
     on every other account endpoint, so the two surfaces share a top line.
     It used to sit 120px higher and reach up over the navigation. */
  inset: 0 -5vw -42px;
  overflow: hidden;
  /* Matches the 26px container card on the other account endpoints. The
     overflow:hidden above clips the gradient children to the rounded shape,
     so the corners stay clean without touching them individually. */
  border-radius: 26px;
  pointer-events: none;
  /* Base fill. The two gradients below are soft and blurred; without a flat
     tint under them this reads as a faint haze rather than a slab the hero
     card sits on. overflow:hidden above is what gives the fill its edges. */
  background: rgb(216 230 241 / 0.5);
}

.simms-refer__ambient::before,
.simms-refer__ambient::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  filter: blur(1px);
}

.simms-refer__ambient::before {
  top: 0;
  right: -12%;
  width: min(58vw, 780px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(212 173 166 / 0.23), rgb(212 173 166 / 0) 69%);
}

.simms-refer__ambient::after {
  top: 230px;
  left: -12%;
  width: min(44vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(225 237 245 / 0.9), rgb(225 237 245 / 0) 70%);
}

.simms-refer-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: rgb(16 16 18 / 0.56);
  font-family: var(--font-mono--family);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.35;
  text-transform: uppercase;
}

.simms-refer-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: center;
  min-height: 0;
  padding: clamp(28px, 3.2vw, 44px) clamp(22px, 2.6vw, 40px);
  overflow: hidden;
  border: 1px solid rgb(23 41 83 / 0.1);
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgb(255 255 255 / 0.98) 0%, rgb(252 250 246 / 0.92) 47%, rgb(238 245 251 / 0.88) 100%);
  box-shadow: 0 34px 100px rgb(23 41 83 / 0.08);
}

.simms-refer-hero::after {
  position: absolute;
  z-index: 0;
  top: -34%;
  right: -10%;
  width: 56%;
  height: 126%;
  border: 1px solid rgb(23 41 83 / 0.07);
  border-radius: 50%;
  content: "";
  transform: rotate(-18deg);
}

.simms-refer-hero__copy,
.simms-credential {
  position: relative;
  z-index: 1;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-refer-hero h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: var(--refer-display);
  font-weight: 500;
  /* Tracking and leading were tuned for 88px display type. At this size the
     same values read cramped, so both open up. */
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}

.simms-refer-hero__lede {
  max-width: 55ch;
  margin: 1.65rem 0 1.7rem;
  color: rgb(16 16 18 / 0.66);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.62;
}

.simms-refer-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-height: 34px;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgb(16 16 18 / 0.1);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.7);
  color: rgb(16 16 18 / 0.7);
  font-family: var(--font-mono--family);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.simms-refer-status__light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--refer-warning);
  box-shadow: 0 0 0 4px rgb(161 106 35 / 0.12);
}

.simms-refer[data-active="true"] .simms-refer-status__light {
  background: var(--refer-success);
  box-shadow: 0 0 0 4px rgb(44 107 82 / 0.12);
}

.simms-refer[data-state="suspended"] .simms-refer-status__light,
.simms-refer[data-state="sync_error"] .simms-refer-status__light {
  background: var(--refer-error);
  box-shadow: 0 0 0 4px rgb(155 60 60 / 0.12);
}

.simms-refer-status__tier {
  padding-left: 0.55rem;
  border-left: 1px solid var(--refer-line);
  color: var(--refer-dusk);
}

.simms-credential {
  position: relative;
  min-height: 0;
  padding: clamp(22px, 2.4vw, 32px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 0%, rgb(212 173 166 / 0.46), rgb(212 173 166 / 0) 34%),
    linear-gradient(145deg, var(--refer-dusk) 0%, var(--refer-dusk-mid) 50%, var(--refer-dusk-deep) 100%);
  color: #f6f2ec;
  box-shadow: 0 32px 80px rgb(23 41 83 / 0.28);
}

.simms-credential::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 30px 30px;
  content: "";
  mask-image: linear-gradient(to bottom right, #000, transparent 72%);
  pointer-events: none;
}

.simms-credential__edge {
  position: absolute;
  right: -75px;
  bottom: -150px;
  width: 320px;
  height: 320px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgb(255 255 255 / 0.025), 0 0 0 100px rgb(255 255 255 / 0.018);
}

.simms-credential__head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  color: rgb(246 242 236 / 0.7);
  font-family: var(--font-mono--family);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.simms-credential__mark {
  color: var(--refer-horizon);
}

.simms-credential__active,
.simms-credential__sealed {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 340px;
}

.simms-credential__label {
  margin: 0 0 0.5rem;
  color: rgb(246 242 236 / 0.61);
  font-family: var(--font-mono--family);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.simms-credential__code-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.simms-credential__code-row > div {
  min-width: 0;
}

.simms-credential__code-row .simms-credential__code {
  margin-bottom: 0;
}

.simms-code-change-trigger {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 34px;
  margin-bottom: 0.1rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  color: rgb(255 255 255 / 0.78);
  font-family: var(--font-body--family);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.simms-code-change-trigger:hover,
.simms-code-change-trigger:focus-visible {
  border-color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.13);
  color: #fff;
}

.simms-code-change-trigger svg {
  width: 14px;
  height: 14px;
}

.simms-credential__code {
  margin: 0 0 1.6rem;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: var(--font-mono--family);
  font-size: var(--refer-code);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 0.98;
}

.simms-credential__url {
  display: flex;
  align-items: center;
  min-height: 54px;
  margin-bottom: 0.9rem;
  padding: 0 0.55rem 0 0.95rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.78);
  font-family: var(--font-mono--family);
  font-size: 0.7rem;
}

.simms-credential__url > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simms-credential__actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 0.6rem;
}

.simms-credential__fineprint {
  margin: 1rem 0 0;
  color: rgb(246 242 236 / 0.5);
  font-size: 0.72rem;
  line-height: 1.45;
}

.simms-credential__seal {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.07);
  color: var(--refer-horizon);
}

.simms-credential__seal svg {
  width: 24px;
  height: 24px;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-credential__sealed h2 {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-heading--family);
  font-size: var(--refer-subheading);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.simms-credential__sealed > p:not(.simms-credential__label) {
  max-width: 48ch;
  margin: 1rem 0 1.3rem;
  color: rgb(246 242 236 / 0.68);
  font-size: 0.9rem;
  line-height: 1.55;
}

.simms-activation-form,
.simms-credential__sealed > form {
  margin-top: 0.4rem;
}

.simms-terms-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.72rem;
  align-items: start;
  margin-bottom: 1rem;
  color: rgb(246 242 236 / 0.72);
  cursor: pointer;
  font-size: 0.74rem;
  line-height: 1.48;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-terms-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--refer-horizon);
}

.simms-terms-check a {
  color: #fff !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-button,
.simms-refer-earn-page .woocommerce-MyAccount-content button.simms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: auto;
  min-height: 48px;
  padding: 0.78rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-body--family);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-button:hover,
.simms-refer-earn-page .woocommerce-MyAccount-content button.simms-button:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.simms-button svg {
  flex: 0 0 auto;
}

.simms-button--light {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--refer-dusk-deep) !important;
}

.simms-button--ghost-light {
  border-color: rgb(255 255 255 / 0.22) !important;
  background: rgb(255 255 255 / 0.06) !important;
  color: #fff !important;
}

.simms-button--ink {
  border-color: var(--refer-ink) !important;
  background: var(--refer-ink) !important;
  color: #fff !important;
}

.simms-button--outline {
  border-color: var(--refer-line) !important;
  background: transparent !important;
  color: var(--refer-ink) !important;
}

.simms-button--full {
  width: 100% !important;
}

.simms-button[disabled],
.simms-icon-button[disabled] {
  opacity: 0.55 !important;
  cursor: wait !important;
  transform: none !important;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-icon-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-icon-button:hover {
  background: rgb(255 255 255 / 0.1);
  transform: translateY(-1px);
}

.simms-icon-button--light {
  border-color: rgb(255 255 255 / 0.22) !important;
  color: #fff !important;
}

.simms-refer-specs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid var(--refer-line);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.82);
}

/* This row carries five tiles once a partner is active, but only four before
   activation. The fixed five-column template left the fifth column empty, and
   because the last tile drops its divider that empty column read as part of it
   — one double-width cell, while the four real tiles were squeezed to a fifth
   each. At that width "10% off on first order" needs 201px and had 179px, so
   it wrapped. Giving the four-tile state its own template pays that back and
   keeps the wider payout cell deliberately, rather than as a leftover gap.
   Scoped above the 1120px breakpoint so the 3- and 2-column rules below still
   win on narrow screens, which :has() specificity would otherwise outrank. */
@media (min-width: 1121px) {
  .simms-refer-specs:has(> .simms-refer-spec:nth-child(4):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 1.35fr;
  }
}

.simms-refer-spec {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
  min-height: 132px;
  padding: 1.25rem;
  border-right: 1px solid var(--refer-line);
}

.simms-refer-spec:last-child {
  border-right: 0;
}

.simms-refer-spec span {
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.simms-refer-spec strong {
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.simms-refer-spec--accent {
  background: var(--refer-ice);
}

.simms-refer-process {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding: clamp(52px, 5vw, 76px) clamp(8px, 3vw, 44px);
}

.simms-section-heading {
  align-self: start;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-section-heading h2,
.simms-refer-earn-page .woocommerce-MyAccount-content .simms-card-heading h2,
.simms-refer-earn-page .woocommerce-MyAccount-content .simms-activity h2 {
  margin: 0;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: var(--refer-heading);
  font-weight: 500;
  letter-spacing: -0.042em;
  line-height: 0.95;
}

.simms-section-heading > p:last-child {
  max-width: 49ch;
  margin: 1.5rem 0 0;
  color: var(--refer-muted);
  line-height: 1.62;
}

.simms-process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--refer-line);
}

.simms-process-list li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 1.15rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--refer-line);
}

.simms-process-list__number {
  color: var(--refer-horizon);
  font-family: var(--font-mono--family);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-process-list h3 {
  margin: 0 0 0.55rem;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
}

.simms-process-list p {
  max-width: 58ch;
  margin: 0;
  color: var(--refer-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.simms-refer-workspace {
  display: grid;
  /* The dashboard takes the full width: four stat tiles and a daily chart need
     the room, and sharing the row wrapped them 3+1. Payout readiness sits
     beneath it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.simms-refer-workspace .simms-payout-card {
  max-width: 460px;
}

.simms-share-kit,
.simms-payout-card,
.simms-activity,
.simms-partner-assets {
  border: 1px solid var(--refer-line);
  border-radius: var(--refer-radius);
  background: rgb(255 255 255 / 0.86);
}

.simms-share-kit,
.simms-payout-card {
  padding: clamp(24px, 3.2vw, 42px);
}

.simms-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-card-heading h2 {
  max-width: 13ch;
  font-size: var(--refer-heading);
}

.simms-card-heading__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--refer-ice);
  color: var(--refer-dusk);
}

.simms-card-heading__icon svg {
  width: 20px;
  height: 20px;
}

.simms-share-tabs {
  display: flex;
  gap: 0.35rem;
  margin-top: 2rem;
  padding-bottom: 0.7rem;
  overflow-x: auto;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-share-tabs button {
  min-height: 35px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--refer-line);
  border-radius: 999px;
  background: transparent;
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-share-tabs button[aria-selected="true"] {
  border-color: var(--refer-dusk-deep);
  background: var(--refer-dusk-deep);
  color: #fff;
}

.simms-share-message {
  min-height: 132px;
  padding: 1.2rem;
  border: 1px solid var(--refer-line);
  border-radius: 12px;
  background: var(--refer-paper);
}

.simms-share-message p {
  margin: 0;
  color: rgb(16 16 18 / 0.72);
  font-size: 0.9rem;
  line-height: 1.65;
}

.simms-share-kit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.simms-share-kit__note {
  margin: 1.1rem 0 0;
  color: var(--refer-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.simms-payout-progress {
  height: 6px;
  margin: 2rem 0 1.4rem;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(16 16 18 / 0.08);
}

.simms-payout-progress span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--refer-dusk), var(--refer-horizon));
}

.simms-payout-steps {
  display: grid;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.simms-payout-steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.65rem;
  align-items: center;
  color: var(--refer-muted);
  font-size: 0.83rem;
}

.simms-payout-steps li > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--refer-line);
  border-radius: 50%;
}

.simms-payout-steps li.is-complete {
  color: var(--refer-ink);
}

.simms-payout-steps li.is-complete > span {
  border-color: rgb(44 107 82 / 0.25);
  background: rgb(44 107 82 / 0.1);
  color: var(--refer-success);
}

.simms-payout-steps svg {
  width: 12px;
  height: 12px;
}

.simms-payout-card__status {
  margin: -0.2rem 0 1.2rem;
  color: var(--refer-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.simms-payout-card__status span {
  display: block;
  margin-top: 0.25rem;
  color: var(--refer-ink);
  font-family: var(--font-mono--family);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.simms-payout-card form {
  margin: 0;
}

.simms-payout-card__ready {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.3rem 0 0;
  color: var(--refer-success);
  font-size: 0.84rem;
}

.simms-activity {
  margin-top: 18px;
  padding: clamp(24px, 3.2vw, 42px);
}

.simms-card-heading--rule {
  align-items: flex-end;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--refer-line);
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-activity h2 {
  font-size: var(--refer-heading);
}

.simms-activity__sync {
  margin: 0;
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.61rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.simms-activity-table-wrap {
  overflow-x: auto;
}

.simms-activity-table {
  width: 100%;
  border-collapse: collapse;
}

.simms-activity-table th,
.simms-activity-table td {
  padding: 1rem 0.8rem;
  border-bottom: 1px solid var(--refer-line);
  text-align: left;
}

.simms-activity-table th {
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.simms-activity-table td {
  color: rgb(16 16 18 / 0.72);
  font-size: 0.82rem;
}

.simms-activity-table td code {
  color: var(--refer-ink);
  font-family: var(--font-mono--family);
  font-size: 0.72rem;
}

.simms-activity-table td strong {
  color: var(--refer-ink);
  font-weight: 500;
}

.simms-ledger-status {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.4rem 0.6rem;
  border-radius: 7px;
  background: var(--refer-ice);
  color: var(--refer-dusk);
  font-family: var(--font-mono--family);
  font-size: 0.61rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.simms-ledger-status small {
  opacity: 0.65;
  font-size: 0.52rem;
}

.simms-ledger-status--paid,
.simms-ledger-status--available {
  background: rgb(44 107 82 / 0.1);
  color: var(--refer-success);
}

.simms-ledger-status--reversed {
  background: rgb(155 60 60 / 0.08);
  color: var(--refer-error);
}

.simms-empty-ledger {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) 1rem;
  text-align: center;
}

.simms-empty-ledger > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--refer-ice);
  color: var(--refer-dusk);
}

.simms-empty-ledger > span svg {
  width: 24px;
  height: 24px;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-empty-ledger h3 {
  margin: 0;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: var(--refer-subheading);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.simms-empty-ledger p {
  max-width: 51ch;
  margin: 1rem 0 1.5rem;
  color: var(--refer-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.simms-partner-assets {
  margin-top: 18px;
  padding: clamp(24px, 3.2vw, 42px);
}

.simms-partner-assets__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2rem;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-partner-asset {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 92px;
  padding: 0.65rem;
  border: 1px solid var(--refer-line);
  border-radius: 10px;
  color: var(--refer-ink);
  text-decoration: none;
}

.simms-partner-asset img {
  width: 72px;
  height: 72px;
  border-radius: 7px;
  object-fit: cover;
}

.simms-partner-asset span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.simms-partner-asset strong {
  font-size: 0.84rem;
  font-weight: 500;
}

.simms-partner-asset small {
  color: var(--refer-muted);
  font-size: 0.7rem;
}

.simms-refer-faq {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding: clamp(56px, 5.5vw, 84px) clamp(8px, 3vw, 44px) 56px;
}

.simms-refer-faq__list {
  border-top: 1px solid var(--refer-line);
}

.simms-refer-faq details {
  border-bottom: 1px solid var(--refer-line);
}

.simms-refer-faq summary {
  position: relative;
  padding: 1.45rem 2.5rem 1.45rem 0;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: 1.18rem;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.simms-refer-faq summary::-webkit-details-marker {
  display: none;
}

.simms-refer-faq summary::before,
.simms-refer-faq summary::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 13px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform 160ms ease;
}

.simms-refer-faq summary::after {
  transform: rotate(90deg);
}

.simms-refer-faq details[open] summary::after {
  transform: rotate(0deg);
}

.simms-refer-faq details p {
  max-width: 64ch;
  margin: -0.25rem 0 1.5rem;
  color: var(--refer-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.simms-refer-footnote {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--refer-line);
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.6rem;
  letter-spacing: 0.035em;
  line-height: 1.55;
  text-transform: uppercase;
}

.simms-refer-footnote p {
  max-width: 85ch;
  margin: 0;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-refer-footnote a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  color: var(--refer-ink);
}

.simms-refer-notice {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 0 0 16px;
  padding: 0.85rem 1rem;
  border: 1px solid;
  border-radius: 11px;
  font-size: 0.82rem;
}

.simms-refer-notice svg {
  flex: 0 0 auto;
}

.simms-refer-notice--success {
  border-color: rgb(44 107 82 / 0.2);
  background: rgb(44 107 82 / 0.07);
  color: var(--refer-success);
}

.simms-refer-notice--error {
  border-color: rgb(155 60 60 / 0.2);
  background: rgb(155 60 60 / 0.07);
  color: var(--refer-error);
}

.simms-refer-live {
  position: fixed;
  z-index: 9999;
  right: 24px;
  bottom: 24px;
  max-width: min(360px, calc(100vw - 48px));
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--refer-ink);
  color: #fff;
  box-shadow: 0 16px 50px rgb(0 0 0 / 0.2);
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.simms-refer-live.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.simms-code-dialog {
  width: min(92vw, 520px);
  max-width: 520px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--refer-ink);
  box-shadow: 0 35px 100px rgb(0 0 0 / 0.3);
}

.simms-code-dialog::backdrop {
  background: rgb(10 10 12 / 0.66);
  backdrop-filter: blur(7px);
}

.simms-code-dialog__inner {
  position: relative;
  padding: 2.2rem;
  border-radius: 20px;
  background: var(--refer-paper);
}

.simms-code-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--refer-ink) !important;
}

.simms-code-dialog .simms-refer-kicker {
  padding-right: 2.5rem;
  color: var(--refer-dusk);
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-code-dialog h2 {
  max-width: 11ch;
  margin: 0;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: clamp(1.8rem, 6vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.simms-code-dialog__intro {
  max-width: 42ch;
  margin: 0.85rem 0 1.5rem;
  color: var(--refer-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.simms-code-dialog [hidden] {
  display: none !important;
}

.simms-code-dialog__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--refer-line);
  border-radius: 10px;
  background: rgb(23 41 83 / 0.035);
}

.simms-code-dialog__current span,
.simms-code-dialog__inner label {
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.simms-code-dialog__current strong,
.simms-code-dialog__comparison code {
  color: var(--refer-ink);
  font-family: var(--font-mono--family);
  letter-spacing: 0.05em;
}

.simms-code-dialog__inner label {
  display: block;
  margin-bottom: 0.5rem;
}

.simms-code-dialog__inner input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1px solid var(--refer-line);
  border-radius: 10px;
  background: #fff;
  color: var(--refer-ink);
  font-family: var(--font-mono--family);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

.simms-code-dialog__inner input[type="text"]::placeholder {
  color: var(--refer-muted);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 1;
  text-transform: none;
}

.simms-code-dialog__inner input[type="text"]:focus {
  outline: 2px solid rgb(23 41 83 / 0.2);
  outline-offset: 2px;
  border-color: var(--refer-dusk);
}

.simms-code-dialog__error {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
}

.simms-code-dialog__error {
  color: var(--refer-error);
}

.simms-code-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.simms-code-dialog__review-title {
  margin: 0 0 0.75rem;
  color: var(--refer-ink);
  font-size: 0.9rem;
  font-weight: 500;
}

.simms-code-dialog__comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 1.1rem;
  border: 1px solid var(--refer-line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.simms-code-dialog__comparison code {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.simms-code-dialog__comparison span {
  color: var(--refer-muted);
}

.simms-code-dialog__warning {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.65rem;
  align-items: start;
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 10px;
  background: rgb(155 107 34 / 0.08);
  color: #6f5426;
}

.simms-code-dialog__warning svg {
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
}

.simms-code-dialog__warning p {
  margin: 0;
  color: inherit;
  font-size: 0.76rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .simms-code-dialog__inner {
    padding: 1.65rem;
  }

  .simms-code-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .simms-code-dialog__actions .simms-button {
    width: 100% !important;
  }

  .simms-code-dialog__actions .simms-button--outline {
    grid-row: 2;
  }
}

.simms-qr-dialog {
  width: min(92vw, 470px);
  max-width: 470px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--refer-ink);
  box-shadow: 0 35px 100px rgb(0 0 0 / 0.3);
}

.simms-qr-dialog::backdrop {
  background: rgb(10 10 12 / 0.66);
  backdrop-filter: blur(7px);
}

.simms-qr-dialog__inner {
  position: relative;
  padding: 2.1rem;
  border-radius: 20px;
  background: var(--refer-paper);
  text-align: center;
}

.simms-qr-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--refer-ink) !important;
}

.simms-qr-dialog .simms-refer-kicker {
  justify-content: center;
}

.simms-refer-earn-page .woocommerce-MyAccount-content .simms-qr-dialog h2 {
  margin: 0;
  color: var(--refer-ink);
  font-family: var(--font-heading--family);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.simms-qr-dialog__code {
  display: grid;
  place-items: center;
  width: min(280px, 100%);
  aspect-ratio: 1;
  margin: 1.5rem auto 1rem;
  padding: 12px;
  border: 1px solid var(--refer-line);
  border-radius: 12px;
  background: #fff;
}

.simms-qr-dialog__code svg,
.simms-qr-dialog__code canvas {
  width: 100%;
  height: 100%;
}

.simms-qr-dialog code {
  font-family: var(--font-mono--family);
  font-size: 1rem;
  letter-spacing: 0.07em;
}

.simms-qr-dialog__url {
  max-width: 100% !important;
  margin: 0.45rem auto 1rem !important;
  overflow: hidden;
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.62rem !important;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simms-qr-dialog [data-download-qr] {
  margin-top: 0.35rem;
}

.simms-qr-dialog p:last-child {
  max-width: 42ch;
  margin: 0.9rem auto 0;
  color: var(--refer-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.simms-mobile-share {
  display: none;
}

@keyframes simms-credential-reveal {
  0% { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.simms-credential.is-activating .simms-credential__sealed {
  opacity: 0.55;
}

.simms-credential.is-activating::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(23 41 83 / 0.2);
  color: #fff;
  content: "Preparing your credential\2026";
  font-family: var(--font-mono--family);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

.simms-credential.is-newly-revealed .simms-credential__active {
  animation: simms-credential-reveal 460ms ease both;
}

:where(.simms-button, .simms-icon-button, .simms-share-tabs button, .simms-refer-faq summary):focus-visible {
  outline: 2px solid var(--refer-horizon);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .simms-refer-hero {
    grid-template-columns: minmax(0, 0.78fr) minmax(400px, 1fr);
    gap: 2.2rem;
  }

  .simms-refer-hero__copy h1 {
    font-size: var(--refer-display);
  }

  .simms-refer-specs {
    grid-template-columns: repeat(3, 1fr);
  }

  .simms-refer-spec:nth-child(3) {
    border-right: 0;
  }

  .simms-refer-spec:nth-child(n+4) {
    border-top: 1px solid var(--refer-line);
  }

  .simms-refer-spec:nth-child(5) {
    border-right: 0;
  }

  .simms-partner-assets__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .simms-refer-earn-page .simms-section {
    padding-top: 12px;
  }

  .simms-refer-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .simms-refer-hero__copy {
    padding: 1rem 0 0;
  }

  .simms-refer-earn-page .woocommerce-MyAccount-content .simms-refer-hero h1 {
    max-width: 11ch;
    font-size: clamp(1.8rem, 6vw, 2.3rem);
  }

  .simms-refer-process,
  .simms-refer-faq {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .simms-refer-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .simms-refer-earn-page .simms-rail {
    width: 100%;
  }

  .simms-refer-earn-page main.simms-refer {
    padding-top: 0;
    padding-bottom: 104px;
  }

  .simms-refer__intro {
    padding-top: 22px;
  }

  .simms-refer-hero {
    padding: 44px 16px 16px;
    border-width: 1px 0;
    border-radius: 0;
    box-shadow: none;
  }

  .simms-refer-earn-page .woocommerce-MyAccount-content .simms-refer-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.1rem);
  }

  .simms-refer-hero__lede {
    margin-top: 1.25rem;
  }

  .simms-credential {
    min-height: 430px;
    margin-top: 0.5rem;
    padding: 22px;
    border-radius: 18px;
  }

  .simms-credential__active,
  .simms-credential__sealed {
    min-height: 345px;
  }

  .simms-credential__code {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
  }

  .simms-credential__actions {
    grid-template-columns: 1fr 1fr;
  }

  .simms-credential__actions .simms-icon-button {
    grid-column: span 2;
    width: 100% !important;
  }

  .simms-refer-specs {
    grid-template-columns: repeat(2, 1fr);
    margin: 12px;
  }

  .simms-refer-spec,
  .simms-refer-spec:nth-child(3) {
    min-height: 118px;
    border-right: 1px solid var(--refer-line);
  }

  .simms-refer-spec:nth-child(even),
  .simms-refer-spec:last-child {
    border-right: 0;
  }

  .simms-refer-spec:nth-child(n+3) {
    border-top: 1px solid var(--refer-line);
  }

  .simms-refer-process,
  .simms-refer-faq {
    padding-right: 20px;
    padding-left: 20px;
  }

  .simms-refer-process {
    padding-block: 90px;
  }

  .simms-refer-workspace,
  .simms-activity,
  .simms-partner-assets {
    margin-right: 12px;
    margin-left: 12px;
  }

  .simms-share-kit,
  .simms-payout-card,
  .simms-activity,
  .simms-partner-assets {
    padding: 22px;
    border-radius: 15px;
  }

  .simms-share-kit__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .simms-card-heading--rule {
    align-items: flex-start;
    flex-direction: column;
  }

  .simms-activity-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .simms-activity-table,
  .simms-activity-table tbody,
  .simms-activity-table tr,
  .simms-activity-table td {
    display: block;
    width: 100%;
  }

  .simms-activity-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--refer-line);
  }

  .simms-activity-table td {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0;
    border: 0;
  }

  .simms-activity-table td::before {
    color: var(--refer-muted);
    content: attr(data-label);
    font-family: var(--font-mono--family);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .simms-partner-assets__grid {
    grid-template-columns: 1fr;
  }

  .simms-refer-faq {
    padding-block: 90px 60px;
  }

  .simms-refer-footnote {
    margin: 0 20px;
    align-items: flex-start;
    flex-direction: column;
  }

  .simms-mobile-share {
    position: fixed;
    z-index: 90;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    min-height: 72px;
    padding: 0.7rem 0.7rem 0.7rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 14px;
    background: rgb(23 41 83 / 0.96);
    color: #fff;
    box-shadow: 0 18px 55px rgb(23 41 83 / 0.28);
    backdrop-filter: blur(12px);
  }

  .simms-mobile-share > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .simms-mobile-share > div span {
    color: rgb(255 255 255 / 0.55);
    font-family: var(--font-mono--family);
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .simms-mobile-share > div strong {
    overflow: hidden;
    font-family: var(--font-mono--family);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .simms-refer-earn-page .woocommerce-MyAccount-content .simms-mobile-share .simms-button {
    min-height: 48px;
    background: #fff !important;
    color: var(--refer-dusk-deep) !important;
  }

  .simms-refer-live {
    right: 12px;
    bottom: 94px;
    left: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .simms-refer *,
  .simms-refer *::before,
  .simms-refer *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .simms-credential,
  .simms-mobile-share {
    border: 2px solid CanvasText;
  }

  .simms-refer-status__light {
    border: 1px solid CanvasText;
  }
}

/* ---------- Partner performance ---------- */
.simms-account-analytics {
  --refer-ink: #101012;
  --refer-line: rgb(16 16 18 / 0.12);
  --refer-muted: rgb(16 16 18 / 0.58);
  --refer-dusk: var(--dusk-deep, #263d73);
  --refer-dusk-deep: var(--dusk-violet, #172953);
  --refer-success: #2c6b52;
  --refer-error: #9b3c3c;
  width: 100%;
  margin-top: clamp(28px, 4vw, 44px);
}

.simms-performance {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--refer-line);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 24px 70px rgb(23 41 83 / 0.05);
}

.simms-performance__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.simms-performance__period {
  margin: 0.35rem 0 0;
  color: var(--refer-muted);
  font-size: 0.85rem;
}

.simms-performance__ranges {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--refer-line);
  border-radius: 10px;
  background: rgb(16 16 18 / 0.03);
}

.simms-performance__range {
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.simms-performance__range:hover { color: var(--refer-ink); }

.simms-performance__range.is-active {
  background: #fff;
  color: var(--refer-ink);
  box-shadow: 0 1px 3px rgb(23 41 83 / 0.12);
}

.simms-performance__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 1.25rem;
}

.simms-performance__tile {
  padding: 1rem 1.1rem;
  border: 1px solid var(--refer-line);
  border-radius: 12px;
  background: #fff;
}

.simms-performance__tile-label {
  margin: 0;
  color: var(--refer-muted);
  font-family: var(--font-mono--family);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.simms-performance__tile-value {
  margin: 0.45rem 0 0.3rem;
  font-family: var(--font-heading--family);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.simms-performance__tile-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  color: rgb(16 16 18 / 0.45);
  font-size: 0.75rem;
}

.simms-performance__delta.is-up { color: var(--refer-success); }
.simms-performance__delta.is-down { color: var(--refer-error); }
.simms-performance__delta.is-flat { color: rgb(16 16 18 / 0.45); }

.simms-performance__body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
  gap: 12px;
}

.simms-performance__chart-wrap,
.simms-performance__panel {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--refer-line);
  border-radius: 12px;
  background: #fff;
}

.simms-performance__chart-total {
  margin: 0.5rem 0 0.2rem;
  font-family: var(--font-heading--family);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.simms-performance__chart-note {
  margin: 0 0 1rem;
  color: rgb(16 16 18 / 0.45);
  font-size: 0.75rem;
}

/* Bars are flex children so any number of days fills the width without the
   chart needing to know how many there are. The gap steps down with the day
   count because a year of bars cannot fit the column at 30-day spacing. */
.simms-performance__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 170px;
  padding-top: 4px;
  border-bottom: 1px solid var(--refer-line);
  /* Bars must never paint outside the card, whatever the day count. */
  overflow: hidden;
}

.simms-performance__chart[data-density="medium"] { gap: 2px; }
.simms-performance__chart[data-density="dense"] { gap: 0; }

.simms-performance__bar {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
  /* No min-width: a floor here stops flex shrinking and pushes a year of bars
     straight through the side of the card. */
  min-width: 0;
  border-radius: 3px 3px 0 0;
  background: rgb(23 41 83 / 0.05);
}

.simms-performance__chart[data-density="dense"] .simms-performance__bar {
  border-radius: 0;
  background: transparent;
}

/* Nothing earned in the window: one quiet line, at the chart's own height so
   switching ranges does not resize the card. */
.simms-performance__chart[data-empty="true"] {
  align-items: center;
  justify-content: center;
}

.simms-performance__chart-empty {
  margin: 0;
  color: rgb(16 16 18 / 0.35);
  font-size: 0.8rem;
}

.simms-performance__bar > span {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--refer-dusk) 0%, var(--refer-dusk-deep) 100%);
}

.simms-performance__side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.simms-performance__compare {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}

.simms-performance__compare li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--refer-line);
  font-size: 0.85rem;
}

.simms-performance__compare li:first-child { border-top: 0; }
.simms-performance__compare span { color: var(--refer-muted); }
.simms-performance__compare strong { font-weight: 500; font-variant-numeric: tabular-nums; }

.simms-performance__rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
}

.simms-performance__rate strong { display: block; font-size: 0.9rem; font-weight: 500; }
.simms-performance__rate span { display: block; margin-top: 0.15rem; color: rgb(16 16 18 / 0.45); font-size: 0.75rem; }
.simms-performance__rate b {
  font-family: var(--font-heading--family);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.simms-performance__rate-note {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--refer-line);
  color: rgb(16 16 18 / 0.45);
  font-size: 0.72rem;
}

.simms-performance[data-loading="true"] { opacity: 0.55; }

@media (max-width: 900px) {
  .simms-performance__body { grid-template-columns: minmax(0, 1fr); }
  .simms-performance__head { flex-direction: column; }
  .simms-performance__ranges { width: 100%; overflow-x: auto; }
}