@layer components {
  .postal-panel {
    display: grid;
    gap: 1.25rem;
    inline-size: min(100%, 36rem);
  }

  .postal-panel .account-form {
    margin-block-start: 0;
  }

  /* Requesting the letter is the page's one call to action, in Nabry orange. */
  .postal-panel .postal-request-action {
    background: var(--color-orange);
  }

  .postal-panel .postal-request-action:hover {
    background: var(--color-orange-dark);
  }

  .postal-steps {
    display: grid;
    gap: .6rem;
    padding-inline-start: 1.35rem;
    color: var(--color-navy);
    font-size: .92rem;
    line-height: 1.5;
  }

  .postal-steps li::marker {
    color: var(--color-orange-dark);
    font-weight: 750;
  }

  .postal-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .55rem;
    color: var(--color-navy-soft);
    font-size: .82rem;
    line-height: 1.5;
  }

  .postal-note .nabry-icon {
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: .15rem;
    color: var(--color-orange-dark);
  }

  .postal-note a,
  .postal-details a,
  .postal-steps a,
  .account-heading a {
    color: var(--color-navy);
    font-weight: 700;
  }

  .postal-code-input {
    font-family: var(--font-meta);
    font-size: 1.15rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .postal-details {
    display: grid;
    gap: .35rem;
    padding-block-start: 1.1rem;
    border-block-start: .0625rem solid var(--color-line);
  }

  .postal-details h2 {
    margin-block-start: .5rem;
    color: var(--color-navy);
    font-size: .95rem;
  }

  .postal-details p {
    color: var(--color-navy-soft);
    font-size: .88rem;
    line-height: 1.55;
  }

  .postal-stages {
    display: grid;
    gap: .5rem;
    list-style: none;
  }

  .postal-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border: .0625rem solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy-soft);
    font-size: .88rem;
    font-weight: 700;
  }

  .postal-stage .nabry-icon {
    inline-size: 1.05rem;
    block-size: 1.05rem;
  }

  .postal-stage.is-complete {
    color: var(--color-navy);
  }

  .postal-stage.is-complete .nabry-icon {
    color: var(--color-orange-dark);
  }

  .postal-stage time {
    color: var(--color-navy-soft);
    font-size: .8rem;
    font-weight: 600;
  }

  .postal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
  }

  .postal-facts div {
    padding: .7rem .8rem;
    border-inline-start: .2rem solid var(--color-orange);
    border-radius: .25rem;
    background: var(--color-panel-soft);
  }

  .postal-facts dt {
    color: var(--color-navy-soft);
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .postal-facts dd {
    color: var(--color-navy);
    font-weight: 750;
  }

  .postal-development-code {
    display: grid;
    gap: .4rem;
    padding: .8rem .9rem;
    border: .125rem dashed var(--color-orange-dark);
    border-radius: var(--radius-control);
    background: var(--color-orange-soft);
    color: var(--color-navy);
    font-size: .82rem;
  }

  .postal-code-value {
    font-family: var(--font-meta);
    font-size: 1.3rem;
    font-weight: 750;
    letter-spacing: .1em;
  }

  .postal-choices {
    display: grid;
    gap: 1rem;
  }

  .postal-choice {
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border: .0625rem solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-white);
  }

  .postal-choice h2 {
    color: var(--color-navy);
    font-size: 1.05rem;
  }

  .postal-choice > p {
    color: var(--color-navy-soft);
    font-size: .88rem;
    line-height: 1.5;
  }

  .postal-choice-form {
    display: grid;
    gap: .85rem;
  }

  /* "Hide the name while my letter is on the way" on both request forms. */
  .postal-hide-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    padding: .8rem .9rem;
    border: .0625rem solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-white);
  }

  .postal-hide-option input[type="checkbox"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: .05rem 0 0;
    accent-color: var(--color-orange-dark);
  }

  .postal-hide-option label {
    display: block;
    color: var(--color-navy);
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.35;
  }

  .postal-hide-option .account-hint {
    display: block;
    margin-block-start: .25rem;
    line-height: 1.45;
  }
}

@layer components {
  .admin-letter-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block: 1rem;
  }

  .admin-letter-filters a[aria-current="page"] {
    border-color: var(--color-orange-dark);
    background: var(--color-orange-soft);
  }
}

@layer components {
  /* "Is this your home?" on a parcel's report page, and "No letter yet?" for
     signed-out visitors on /verify. */
  .parcel-report-privacy,
  .postal-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    margin-block-start: 1.5rem;
    padding: .85rem .9rem;
    border: .0625rem solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-panel-soft);
    color: var(--color-navy);
  }

  .postal-callout {
    margin-block-start: 0;
  }

  .parcel-report-privacy > .nabry-icon,
  .postal-callout > .nabry-icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-block-start: .1rem;
    color: var(--color-orange-dark);
  }

  .parcel-report-privacy h2,
  .postal-callout h2 {
    font-size: .92rem;
    font-weight: 750;
  }

  .parcel-report-privacy p,
  .postal-callout p {
    margin-block: .2rem .35rem;
    color: var(--color-navy-soft);
    font-size: .84rem;
    line-height: 1.45;
  }

  .parcel-report-privacy a,
  .postal-callout a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--color-navy);
    font-size: .86rem;
    font-weight: 750;
    text-decoration-color: rgb(16 38 83 / 35%);
    text-underline-offset: .18rem;
  }

  .parcel-report-privacy a:hover,
  .postal-callout a:hover {
    color: var(--color-orange-dark);
  }
}

@layer components {
  /* City sits above state and ZIP on narrow screens; all three share a row
     once there is room. Fields align to the top so an error under one field
     doesn't stretch the others. */
  .postal-address-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  .postal-address-row > :first-child {
    grid-column: 1 / -1;
  }

  @media (min-width: 40rem) {
    .postal-address-row {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr);
    }

    .postal-address-row > :first-child {
      grid-column: auto;
    }
  }

  /* Rails wraps invalid fields and their labels; keep them in the field grid. */
  .postal-inquiry-form .field_with_errors {
    display: contents;
  }

  .postal-inquiry-form .account-hint a {
    color: var(--color-navy);
    font-weight: 700;
  }

  /* The parcel ID fallback on an admin's address request review. */
  .admin-inquiry-parcel-form {
    justify-items: start;
  }

  .admin-inquiry-parcel-form .account-field {
    justify-self: stretch;
  }

  .postal-inquiry-form select {
    inline-size: 100%;
    min-block-size: 3.15rem;
    padding-inline: .9rem;
    border: .0625rem solid rgb(16 38 83 / 36%);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy);
  }

  .postal-inquiry-form select:focus-visible {
    border-color: var(--color-orange-dark);
    outline: .2rem solid rgb(252 121 83 / 24%);
    outline-offset: .08rem;
  }

  .postal-inquiry-form select[aria-invalid="true"] {
    border-color: #b42318;
  }
}