:root {
      /* 8px spacing scale */
      --s-1: 8px;
      --s-2: 16px;
      --s-3: 24px;
      --s-4: 32px;
      --s-5: 40px;
      --s-6: 48px;
      --s-7: 56px;
      --s-8: 64px;
      /* Type scale */
      --fs-12: 0.75rem;
      --fs-14: 0.875rem;
      --fs-16: 1rem;
      --fs-18: 1.125rem;
      --fs-20: 1.25rem;
      --fs-24: 1.5rem;
      --total-size: clamp(1.25rem, 3.5vw, 1.75rem);
      --control-h: 48px;
      --ring: 3px;
      --calc-max: 600px;
  }

  .sr-only {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap;
  }

  .wmc-calc {
      padding: 0 0 40px 0;
  }

  /* no outer card */
  .wmc-card {
      background: #fff;
      border: 1px solid var(--secondary-color-20);
      border-radius: 12px;
      padding: var(--s-3);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .05)
  }

  /* Summary */
  .wmc-summary {
      padding: var(--s-2) 0;
  }

  .wmc-summary-total {
      color: var(--secondary-color);
      font-size: 42px;
      font-family: var(--font-dispay);
      font-weight: 700;
  }

  .wmc-summary-meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-1);
      margin-top: var(--s-1)
  }

  .wmc-pill {
      background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
      color: #fff;
      border-radius: 999px;
      padding: 6px 10px;
      font-weight: 800;
      font-size: var(--fs-14)
  }

  .wmc-meta {
      color: var(--text-color-80);
      font-size: var(--fs-14)
  }

  /* Controls */
  .wmc-controls {
      display: grid;
      gap: var(--s-3)
  }

  .wmc-label {
      font-weight: 700;
      color: var(--secondary-color);
      font-size: var(--fs-14);
  }

  .wmc-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--s-2)
  }

  @media(min-width:560px) {
      .wmc-row {
          grid-template-columns: 1fr 1fr
      }
  }

  #raleigh-move-calc input[type="text"],
  #raleigh-move-calc input[type="number"],
  #raleigh-move-calc input[type="date"],
  #raleigh-move-calc input[inputmode],
  #raleigh-move-calc select {
      height: var(--control-h);
      border: 1px solid var(--secondary-color-20);
      border-radius: 12px;
      padding: 0 var(--s-2);
      outline: none;
      font-size: var(--fs-16);
      width: 100%;
  }

  #raleigh-move-calc input:focus,
  #raleigh-move-calc select:focus {
      border-color: var(--secondary-color);
      box-shadow: 0 0 0 var(--ring) rgba(30, 40, 95, .14)
  }

  .wmc-segment {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-1);
      margin-top: 8px;
  }

  .wmc-segment input {
      position: absolute;
      opacity: 0;
      pointer-events: none
  }

  .wmc-segment label {
      border: 1px solid var(--secondary-color-20);
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 700;
      color: var(--secondary-color);
      font-size: var(--fs-16);
      line-height: 1
  }

  .wmc-segment input:checked+label {
      background: var(--secondary-color);
      color: #fff;
      border-color: var(--secondary-color)
  }

  .wmc-reset-wrap {
      display: flex;
      align-items: flex-end
  }

  .wmc-reset {
      width: 100%;
      background: var(--primary-color);
      color: #111;
      border: 0;
      border-radius: 12px;
      padding: 12px 16px;
      font-weight: 800;
      cursor: pointer;
      font-size: var(--fs-16)
  }

  .wmc-adv summary {
      cursor: pointer;
      font-weight: 800;
      color: var(--secondary-color);
      font-size: var(--fs-16)
  }

  .wmc-adv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-2);
      margin-top: var(--s-2)
  }

  @media(min-width:680px) {
      .wmc-adv-grid {
          grid-template-columns: repeat(3, 1fr)
      }
  }

  .wmc-error {
      color: #b00020;
      font-weight: 700;
      margin-top: var(--s-2);
      font-size: var(--fs-14)
  }

  /* Breakdown */
  .wmc-breakdown-card {
      margin-top: var(--s-3)
  }

  .wmc-breakdown-header {
      font-weight: 800;
      color: var(--secondary-color);
      margin-bottom: var(--s-2);
      font-size: var(--fs-16)
  }

  .wmc-breakdown-list {
      list-style: none;
      margin: 0 !important;
      padding: 0 !important;
      display: grid;
      gap: var(--s-1)
  }

  .wmc-breakdown-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px dashed var(--secondary-color-20);
      border-radius: 10px;
      padding: 10px 12px
  }

  .wmc-breakdown-list span {
      font-size: var(--fs-14);
      color: var(--text-color-80)
  }

  .wmc-breakdown-list strong {
      font-size: var(--fs-16);
      color: var(--secondary-color)
  }