@layer components {
  /* Contact import: upload, progress, and review in one account panel, wide
     enough for a review list of addresses and names. */
  .account-panel.contact-import {
    align-self: start;
    inline-size: min(100%, 44rem);
  }

  .contact-import > * + * {
    margin-block-start: 1.25rem;
  }

  .contact-import .account-form {
    margin-block-start: 1.25rem;
  }

  .contact-import-allowance,
  .contact-import-result p {
    color: var(--color-navy-soft);
    font-size: .88rem;
    line-height: 1.55;
  }

  .contact-import-result {
    display: grid;
    justify-items: start;
    gap: .75rem;
    color: var(--color-navy);
    font-size: .88rem;
    line-height: 1.55;
  }

  .contact-import .account-field input[type="file"] {
    padding-block: .8rem;
  }

  .contact-import-help {
    color: var(--color-navy-soft);
    font-size: .86rem;
    line-height: 1.55;
  }

  .contact-import-help summary {
    min-block-size: 2.75rem;
    align-content: center;
    color: var(--color-navy);
    font-weight: 750;
    cursor: pointer;
  }

  .contact-import-help ul {
    display: grid;
    gap: .5rem;
    padding-inline-start: 1.2rem;
  }

  .contact-import-help a,
  .contact-import-allowance a {
    color: var(--color-orange-dark);
    font-weight: 750;
  }

  .contact-import-progress {
    display: grid;
    gap: .5rem;
  }

  .contact-import-progress progress {
    inline-size: 100%;
    block-size: .6rem;
    accent-color: var(--color-orange);
  }

  .contact-import-progress p {
    color: var(--color-navy-soft);
    font-family: var(--font-meta);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .contact-import fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .contact-import-colors legend,
  .contact-import-section h2 {
    margin-block-end: .5rem;
    color: var(--color-navy);
    font-size: 1.08rem;
    font-weight: 800;
  }

  .contact-import-colors legend {
    font-size: .84rem;
    font-weight: 750;
  }

  .contact-import-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block-end: .5rem;
  }

  .contact-import-color {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-block-size: 2.75rem;
    padding-inline: .75rem;
    border: .0625rem solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy);
    font-size: .84rem;
    cursor: pointer;
  }

  .contact-import-color:has(input:checked) {
    border-color: var(--color-orange-dark);
    background: var(--color-orange-soft);
  }

  .contact-import-color:has(input:focus-visible) {
    outline: .18rem solid var(--color-orange);
    outline-offset: .1rem;
  }

  .contact-import-color input {
    accent-color: var(--color-orange-dark);
  }

  .contact-import-color .account-tag-color-swatch {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin: 0;
  }

  /* "Keep each contact's address", like the family invitation's copy option. */
  .contact-import-keep {
    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);
  }

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

  .contact-import-keep label {
    display: block;
    color: var(--color-navy);
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.35;
  }

  .contact-import-keep .account-hint {
    display: block;
    margin-block-start: .25rem;
    line-height: 1.45;
  }

  .contact-import-households,
  .contact-import-plain-list {
    display: grid;
    list-style: none;
  }

  .contact-import-households > li,
  .contact-import-plain-list > li {
    padding-block: .75rem;
    border-block-start: .0625rem solid var(--color-line);
  }

  .contact-import-household legend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .5rem;
    inline-size: 100%;
    color: var(--color-navy);
  }

  .contact-import-household legend .nabry-icon {
    grid-row: span 2;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-block-start: .15rem;
    color: var(--color-orange-dark);
  }

  .contact-import-address {
    font-size: .9rem;
    font-weight: 750;
    overflow-wrap: anywhere;
  }

  .contact-import-kind {
    color: var(--color-navy-soft);
    font-family: var(--font-meta);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .contact-import-names {
    display: grid;
    margin-block-start: .35rem;
    padding-inline-start: 1.6rem;
    list-style: none;
  }

  .contact-import-name {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-block-size: 2.75rem;
    color: var(--color-navy);
    font-size: .9rem;
    cursor: pointer;
  }

  .contact-import-name input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--color-orange-dark);
  }

  .contact-import-name.is-saved {
    cursor: default;
  }

  .contact-import-plain-list > li {
    display: grid;
    gap: .15rem;
    color: var(--color-navy);
    font-size: .9rem;
    overflow-wrap: anywhere;
  }

  .contact-import-privacy {
    line-height: 1.55;
  }

  @media (pointer: coarse) {
    .contact-import-name,
    .contact-import-color {
      min-block-size: 3rem;
    }
  }

  @media (forced-colors: active) {
    .contact-import-color:has(input:checked) {
      border: .125rem solid CanvasText;
    }
  }
}