@layer components {
  body.account-surface {
    min-block-size: 100dvh;
    overflow: auto;
    background:
      radial-gradient(circle at 15% 5%, rgb(252 121 83 / 9%), transparent 24rem),
      var(--color-cream);
  }

  .account-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2rem;
    inline-size: min(100%, 72rem);
    min-block-size: 100svh;
    margin-inline: auto;
    padding:
      max(1.25rem, env(safe-area-inset-top))
      max(1.25rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(1.25rem, env(safe-area-inset-left));
  }

  .account-shell.is-wide {
    inline-size: min(100%, 84rem);
  }

  .account-shell.is-native {
    grid-template-rows: 1fr;
    padding-block:
      max(1rem, env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-bottom));
  }

  .account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .account-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .account-brand {
    display: inline-flex;
    text-decoration: none;
  }

  .account-brand .brand-lockup {
    --brand-mark-size: 2.8rem;

    display: inline-flex;
    align-items: center;
  }

  .account-sign-out,
  .account-secondary-action :is(a, button) {
    color: var(--color-navy-soft);
    font-size: .86rem;
    font-weight: 700;
  }

  /* Sign out posts its form in one step, so where it reads as a quiet link
     its button keeps a link's look. */
  :is(.account-secondary-action, .home-modal-sign-out) button {
    padding: 0;
    background: none;
    text-decoration: underline;
  }

  .account-header-help {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: .0625rem solid rgb(16 38 83 / 28%);
    border-radius: .55rem;
    background: rgb(255 255 255 / 70%);
    color: var(--color-navy-soft);
  }

  .account-header-help:hover {
    border-color: rgb(252 121 83 / 55%);
    color: var(--color-navy);
  }

  .account-header-help .nabry-icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    stroke-width: 1.75;
  }

  .account-sign-out {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: .55rem .75rem;
    border: .0625rem solid rgb(16 38 83 / 28%);
    border-radius: .55rem;
    background: rgb(255 255 255 / 70%);
    text-decoration: none;
  }

  .account-panel {
    align-self: center;
    inline-size: min(100%, 31rem);
    margin-inline: auto;
    padding: clamp(1.4rem, 5vw, 2.5rem);
    border: .0625rem solid rgb(16 38 83 / 16%);
    border-radius: var(--radius-panel);
    background: rgb(255 255 255 / 86%);
    box-shadow: var(--shadow-float);
  }

  .account-management-panel {
    align-self: start;
    inline-size: min(100%, 52rem);
  }

  .account-modal {
    position: fixed;
    inset: 0;
    inline-size: min(38rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    margin-block: auto;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    border: .0625rem solid rgb(16 38 83 / 18%);
    border-radius: 1.15rem;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 1.5rem 5rem rgb(16 38 83 / 28%);
    color: var(--color-navy);
  }

  .account-modal[open] {
    animation: account-modal-enter 180ms cubic-bezier(.2, .8, .2, 1) both;
  }

  .account-modal::backdrop {
    background: rgb(16 38 83 / 30%);
  }

  .account-modal-frame {
    display: block;
    max-block-size: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .account-management-panel.is-modal {
    inline-size: 100%;
    margin: 0;
    padding: clamp(1.35rem, 4vw, 2rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .account-management-panel.is-modal .account-heading {
    padding-inline-end: 3.25rem;
  }

  .account-modal-close-form {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 2;
  }

  .account-modal-close {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: .0625rem solid rgb(16 38 83 / 12%);
    border-radius: 50%;
    background: var(--color-panel-soft);
    color: var(--color-navy);
  }

  .account-modal-close:hover {
    background: var(--color-orange-soft);
  }

  .account-modal-close:focus-visible {
    outline: .2rem solid var(--color-orange);
    outline-offset: .12rem;
  }

  .account-modal-close .nabry-icon {
    inline-size: 1.15rem;
  }

  .account-modal-loading {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-block-size: 10rem;
    padding: 2rem;
    color: var(--color-navy-soft);
    font-weight: 700;
  }

  .account-modal-loading .nabry-icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-orange-dark);
  }

  .account-modal-message {
    margin: 1rem 4.75rem 0 1rem;
    padding: .75rem .9rem;
    border-inline-start: .2rem solid var(--color-orange-dark);
    border-radius: .35rem;
    background: var(--color-orange-soft);
    color: var(--color-navy);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.45;
  }

  .account-modal.auth-modal {
    inline-size: min(31rem, calc(100vw - 2rem));
  }

  .auth-modal .account-panel {
    inline-size: 100%;
    margin: 0;
    padding: clamp(1.35rem, 4vw, 2rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .auth-modal .account-heading {
    padding-inline-end: 3.25rem;
  }

  /* In a dialog, headings match the welcome dialog's rather than a full page's. */
  .auth-modal .account-panel h1 {
    font-size: clamp(1.25rem, 5.6vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  .auth-modal .account-modal-message {
    margin: 1.25rem 0 0;
  }

  .account-heading {
    display: grid;
    min-inline-size: 0;
    gap: .65rem;
    overflow-wrap: anywhere;
  }

  .account-kicker {
    color: var(--color-orange-dark);
    font-family: var(--font-meta);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .account-panel h1 {
    color: var(--color-navy);
    font-size: clamp(1.8rem, 5vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .account-heading > p:last-child,
  .home-confirmed-panel > p {
    color: var(--color-navy-soft);
    font-size: .96rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .account-form {
    display: grid;
    gap: 1rem;
    margin-block-start: 1.5rem;
  }

  .account-field {
    display: grid;
    gap: .38rem;
  }

  .account-field label {
    color: var(--color-navy);
    font-size: .84rem;
    font-weight: 750;
  }

  .account-hint {
    color: var(--color-navy-soft);
    font-size: .76rem;
  }

  .account-field input {
    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);
  }

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

  .account-field input:user-invalid {
    border-color: #b42318;
  }

  /* A select drawn like the other fields, with Nabry's chevron in place of
     the browser's arrow. The wrapper holds the chevron over the field, and
     taps pass through it to the select. */
  .account-select {
    position: relative;
  }

  .account-select select {
    inline-size: 100%;
    min-block-size: 3.15rem;
    padding-inline: .9rem 2.75rem;
    appearance: none;
    border: .0625rem solid rgb(16 38 83 / 36%);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
  }

  .account-select select:hover {
    border-color: rgb(16 38 83 / 56%);
  }

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

  .account-select-chevron {
    position: absolute;
    inset-block: 0;
    inset-inline-end: .9rem;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block: auto;
    color: var(--color-navy);
    pointer-events: none;
  }

  /* Export neighbors: the color choice beside its download button, which
     wraps under it when the two don't fit. */
  .account-neighbor-export-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
  }

  .account-neighbor-export-form .account-field {
    flex: 1 1 14rem;
  }

  .account-field textarea {
    inline-size: 100%;
    min-block-size: 8rem;
    padding: .8rem .9rem;
    resize: block;
    border: .0625rem solid rgb(16 38 83 / 36%);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy);
    font-size: 1rem;
    line-height: 1.5;
  }

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

  .account-field textarea:user-invalid,
  .account-field textarea[aria-invalid="true"] {
    border-color: #b42318;
  }

  .account-primary-action,
  .account-google-action,
  .account-apple-action,
  .home-confirm-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3.1rem;
    padding-inline: 1rem;
    border-radius: var(--radius-control);
    font-weight: 750;
    text-decoration: none;
  }

  .account-confirm-action {
    inline-size: 100%;
  }

  .account-primary-action,
  .home-confirm-action {
    border: .0625rem solid transparent;
    background: var(--color-orange);
    color: var(--color-white);
  }

  .account-primary-action:hover,
  .home-confirm-action:hover {
    background: var(--color-orange-dark);
  }

  .account-email-action {
    gap: .6rem;
  }

  .account-email-action .nabry-icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
  }

  .account-provider-actions {
    display: grid;
    gap: .75rem;
  }

  .account-google-action,
  .account-apple-action {
    gap: .65rem;
    inline-size: 100%;
    border: .0625rem solid rgb(16 38 83 / 34%);
  }

  .account-google-action {
    background: var(--color-white);
    color: var(--color-navy);
  }

  .account-apple-action {
    border-color: #000;
    background: #000;
    color: #fff;
  }

  .account-apple-action:hover {
    background: #242424;
  }

  .account-google-action svg,
  .account-apple-action svg {
    flex: none;
    inline-size: 1.15rem;
    block-size: 1.15rem;
  }

  .account-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    margin-block: 1.15rem;
    color: var(--color-muted);
    font-size: .72rem;
  }

  .account-divider::before,
  .account-divider::after {
    content: "";
    block-size: .0625rem;
    background: var(--color-line);
  }

  .account-secondary-action {
    margin-block-start: 1.2rem;
    text-align: center;
  }

  .account-identity,
  .account-plan-details,
  .account-home-record-details {
    padding: 1rem;
    border-radius: var(--radius-control);
    background: var(--color-panel-soft);
  }

  /* The email card holds Sign out beside the address. It drops below on a
     narrow card, and a long address wraps in place. */
  .account-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-block-start: 1.5rem;
  }

  .account-identity dl {
    flex: 1 1 12rem;
    min-inline-size: 0;
  }

  .account-sign-out-action,
  .account-feedback-action {
    gap: .5rem;
  }

  .account-feedback-action {
    text-decoration: none;
  }

  :is(.account-sign-out-action, .account-feedback-action) .nabry-icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  /* A section's single link, such as "Change plan," sits just under what it
     acts on. Its 3rem touch target overlaps the space around it instead of
     adding to it. */
  .account-link-actions.is-compact {
    margin-block: -1rem -.85rem;
  }

  /* "Your home" lists the address and its public-record line. */
  .account-home-record-details {
    display: grid;
    gap: .75rem;
  }

  .account-identity dt,
  .account-plan-details dt,
  .account-home-record-details dt,
  .account-device-summary strong {
    color: var(--color-navy);
    font-weight: 750;
  }

  .account-identity dt,
  .account-plan-details dt,
  .account-home-record-details dt {
    font-family: var(--font-meta);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .account-identity dd,
  .account-plan-details dd,
  .account-home-record-details dd {
    margin-block-start: .25rem;
    overflow-wrap: anywhere;
  }

  .account-management-section {
    display: grid;
    gap: 1rem;
    margin-block-start: 1.8rem;
    padding-block-start: 1.5rem;
    border-block-start: .0625rem solid var(--color-line);
  }

  .account-section-heading {
    display: grid;
    gap: .35rem;
  }

  .account-section-heading h2 {
    color: var(--color-navy);
    font-size: 1.12rem;
  }

  .account-section-heading p,
  .account-empty-state {
    color: var(--color-navy-soft);
    font-size: .84rem;
    line-height: 1.5;
  }

  .account-device-list {
    display: grid;
    gap: .75rem;
    list-style: none;
  }

  /* A device is one row: its label and last use beside Sign out, with
     Details below for the rest. */
  .account-device-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem .75rem;
    padding: .85rem 1rem;
    border: .0625rem solid rgb(16 38 83 / 14%);
    border-radius: var(--radius-control);
    background: rgb(255 255 255 / 78%);
  }

  .account-device-summary {
    display: grid;
    gap: .2rem;
    min-inline-size: 0;
  }

  .account-device-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    overflow-wrap: anywhere;
  }

  .account-device-meta {
    color: var(--color-navy-soft);
    font-size: .8rem;
    line-height: 1.45;
  }

  .account-current-device {
    padding: .18rem .45rem;
    border-radius: 999px;
    background: var(--color-orange-soft);
    color: var(--color-orange-dark);
    font-size: .68rem;
    font-weight: 750;
  }

  .account-device-list .account-secondary-button {
    min-block-size: 2.5rem;
  }

  .account-device-details {
    grid-column: 1 / -1;
  }

  /* A 2rem touch target that overlaps the row's padding instead of adding
     to it. */
  .account-device-details summary {
    display: flex;
    align-items: center;
    gap: .3rem;
    inline-size: fit-content;
    min-block-size: 2rem;
    margin-block: -.5rem -.6rem;
    color: var(--color-navy-soft);
    font-size: .8rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
  }

  .account-device-details summary::-webkit-details-marker {
    display: none;
  }

  .account-device-details summary::before {
    content: "";
    inline-size: .4rem;
    block-size: .4rem;
    border-block-end: .125rem solid currentcolor;
    border-inline-end: .125rem solid currentcolor;
    transform: rotate(-45deg);
  }

  .account-device-details[open] summary::before {
    transform: rotate(45deg);
  }

  .account-device-details-body {
    display: grid;
    gap: .5rem;
    margin-block-start: .85rem;
  }

  .account-device-id code {
    color: var(--color-navy);
    font-family: var(--font-meta);
    overflow-wrap: anywhere;
  }

  .account-device-label-form {
    display: grid;
    gap: .75rem;
    margin-block-start: .25rem;
  }

  .account-family-list {
    display: grid;
    gap: .75rem;
    list-style: none;
  }

  .account-family-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border: .0625rem solid rgb(16 38 83 / 14%);
    border-radius: var(--radius-control);
    background: rgb(255 255 255 / 78%);
  }

  .account-family-summary {
    display: grid;
    gap: .2rem;
    min-inline-size: 0;
  }

  .account-family-email {
    color: var(--color-navy);
    font-weight: 750;
    overflow-wrap: anywhere;
  }

  .account-family-meta {
    color: var(--color-navy-soft);
    font-size: .8rem;
  }

  .account-family-role {
    padding: .18rem .45rem;
    border-radius: 999px;
    background: var(--color-orange-soft);
    color: var(--color-orange-dark);
    font-size: .68rem;
    font-weight: 750;
  }

  .account-family-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .account-family-list .account-secondary-button {
    min-block-size: 2.5rem;
  }

  .family-invitation-terms {
    display: grid;
    gap: .6rem;
    margin-block: 1.2rem;
    padding-inline-start: 1.2rem;
    color: var(--color-navy);
    font-size: .9rem;
    line-height: 1.5;
  }

  .family-invitation-actions {
    display: grid;
    gap: .75rem;
    margin-block-start: 1.2rem;
  }

  .family-invitation-actions :is(.account-primary-action, .account-secondary-button) {
    inline-size: 100%;
  }

  /* The join form: the refund of the member's own Nabry+, the optional copy
     of their saved neighbors, then Join. */
  .family-invitation-join {
    display: grid;
    gap: .75rem;
  }

  .family-invitation-refund {
    color: var(--color-navy);
    font-size: .9rem;
    line-height: 1.5;
  }

  .family-invitation-copy {
    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);
  }

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

  .family-invitation-copy label {
    display: block;
    color: var(--color-navy);
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.35;
  }

  .family-invitation-copy .account-hint {
    display: block;
    margin-block-start: .25rem;
    line-height: 1.45;
  }

  .account-tag-color-form {
    display: grid;
    gap: 1rem;
  }

  .account-tag-color-list {
    display: grid;
    gap: .5rem;
    list-style: none;
  }

  .account-tag-color-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
  }

  /* Orange's fixed name lines up with the text in the fields below it. */
  .account-tag-color-fixed-label {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: calc(.9rem + .0625rem);
    color: var(--color-navy);
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .account-tag-color-moves {
    display: flex;
    gap: .35rem;
  }

  .account-tag-color-moves[hidden],
  .account-tag-color-handle[hidden] {
    display: none;
  }

  .account-tag-color-row.is-dragging {
    z-index: 2;
    border-radius: var(--radius-control);
    background: var(--color-white);
    box-shadow: var(--shadow-float);
    cursor: grabbing;
  }

  /* The handle claims touches so a drag never scrolls the account modal. */
  .account-tag-color-handle {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: .0625rem solid rgb(16 38 83 / 28%);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy-soft);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .account-tag-color-handle:hover {
    border-color: var(--color-orange-dark);
    color: var(--color-navy);
  }

  .account-tag-color-handle:focus-visible {
    outline: .2rem solid var(--color-orange);
    outline-offset: .12rem;
  }

  .is-dragging .account-tag-color-handle {
    border-color: var(--color-orange-dark);
    background: var(--color-orange-soft);
    color: var(--color-navy);
    cursor: grabbing;
  }

  .account-tag-color-handle .nabry-icon {
    inline-size: 1.2rem;
    block-size: 1.2rem;
  }

  .account-tag-color-move {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: .0625rem solid rgb(16 38 83 / 28%);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy);
  }

  .account-tag-color-move:hover:not(:disabled) {
    border-color: var(--color-orange-dark);
    background: var(--color-orange-soft);
  }

  .account-tag-color-move:focus-visible {
    outline: .2rem solid var(--color-orange);
    outline-offset: .12rem;
  }

  .account-tag-color-move:disabled {
    border-color: rgb(16 38 83 / 12%);
    color: rgb(16 38 83 / 30%);
    cursor: default;
    opacity: 1;
  }

  .account-tag-color-move .nabry-icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    stroke-width: 2;
  }

  .account-tag-color-swatch {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: .625rem;
    border: .0625rem solid color-mix(in oklab, var(--neighbor-color-dark) 45%, transparent);
    border-radius: 50%;
    background: var(--neighbor-color);
  }

  .account-tag-color-row .account-field input {
    min-block-size: 2.75rem;
  }

  .account-field input[aria-invalid="true"] {
    border-color: #b42318;
  }

  /* The quiet save status follows the heading, clear of the modal's close button. */
  .account-tag-color-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
  }

  .account-section-heading .account-tag-color-status {
    color: var(--color-navy-soft);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.4;
  }

  .account-tag-color-submit {
    justify-self: start;
  }

  .account-tag-color-submit[hidden] {
    display: none;
  }

  /* Rarely used settings fold under one summary row below the neighbor colors. */
  /* Account settings' tabs: Neighbors, Plan, and Account. Without script the
     panels stack as one page and the tabs link to each. */
  .account-tabs {
    margin-block-start: 1.5rem;
  }

  .account-tab-list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    border-block-end: .0625rem solid var(--color-line);
  }

  .account-tab-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-block-size: 3rem;
    margin-block-end: -.0625rem;
    border-block-end: .1875rem solid transparent;
    color: var(--color-navy-soft);
    font-size: .86rem;
    font-weight: 750;
    text-decoration: none;
  }

  .account-tab-list a:hover {
    color: var(--color-navy);
  }

  .account-tab-list a[aria-selected="true"] {
    border-block-end-color: var(--color-orange-dark);
    color: var(--color-navy);
  }

  .account-tab-list a:focus-visible {
    border-radius: .35rem .35rem 0 0;
    outline: .18rem solid var(--color-orange);
    outline-offset: -.18rem;
  }

  /* The Nabry+ tab carries Nabry+'s membership purple, and its panel opens
     with the same badge the map gives a family map. */
  .account-tab-plus-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--color-logo-purple-dark);
  }

  .account-plus-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: var(--color-navy-soft);
    font-size: .84rem;
  }

  .account-plus-note + .account-management-section {
    margin-block-start: 1.25rem;
    padding-block-start: 0;
    border-block-start: 0;
  }

  /* A panel starts just under the tabs, and its first section without its
     own rule. */
  .account-tab-panel > :first-child {
    margin-block-start: 1.25rem;
  }

  .account-tab-panel > .account-management-section:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .account-tab-panel:focus-visible {
    border-radius: var(--radius-control);
    outline: .18rem solid var(--color-orange);
    outline-offset: .35rem;
  }

  .account-tabs:not(.is-enhanced) .account-tab-panel + .account-tab-panel {
    margin-block-start: 1.8rem;
    padding-block-start: 1.5rem;
    border-block-start: .0625rem solid var(--color-line);
  }

  .account-secondary-button,
  .account-danger-button,
  .account-danger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding-inline: 1rem;
    border-radius: var(--radius-control);
    font-weight: 750;
  }

  .account-secondary-button {
    border: .0625rem solid rgb(16 38 83 / 28%);
    background: var(--color-white);
    color: var(--color-navy);
  }

  .account-danger-button {
    inline-size: 100%;
    border: .0625rem solid rgb(143 45 34 / 28%);
    background: #fff4f2;
    color: #7f241b;
  }

  .account-danger-action {
    inline-size: 100%;
    background: #8f2d22;
    color: var(--color-white);
  }

  .account-link-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
  }

  .account-link-actions a,
  .account-danger-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 3rem;
    font-size: .86rem;
    font-weight: 750;
  }

  .account-link-actions a {
    color: var(--color-navy-soft);
  }

  .account-danger-zone {
    border-block-start-color: rgb(143 45 34 / 30%);
  }

  .account-danger-link {
    color: #7f241b;
  }

  .account-panel .form-errors {
    margin-block-start: 1rem;
    padding: .8rem 1rem;
    border-inline-start: .2rem solid #b42318;
    background: #fff4f2;
    color: #7f241b;
    font-size: .82rem;
  }

  .account-panel .form-errors ul {
    margin-block-start: .35rem;
    padding-inline-start: 1.25rem;
  }

  .account-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1rem;
    color: var(--color-navy-soft);
    font-size: .72rem;
  }

  .account-footer a {
    color: inherit;
  }

  .home-panel {
    inline-size: min(100%, 43rem);
  }

  .home-search-message {
    margin-block-start: 1rem;
    padding: .8rem 1rem;
    border-radius: .55rem;
    background: var(--color-panel-soft);
    color: var(--color-navy-soft);
    font-size: .86rem;
  }

  .home-results {
    margin-block-start: 1.6rem;
  }

  .home-results :is(h2, h3) {
    font-size: 1rem;
  }

  /* Focus moves to the matches after a search; the heading needs no ring. */
  .home-results :is(h2, h3):focus {
    outline: none;
  }

  .home-results ul {
    display: grid;
    gap: .65rem;
    margin-block-start: .75rem;
    list-style: none;
  }

  .home-results li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .8rem;
    border: .0625rem solid var(--color-line);
    border-radius: .65rem;
    background: var(--color-white);
  }

  .home-results li > span {
    min-inline-size: 0;
    font-size: .88rem;
    overflow-wrap: anywhere;
  }

  .home-confirm-action {
    min-block-size: 2.55rem;
    font-size: .78rem;
  }

  /* At signup the matches are choices in one form, with one password field
     and one button. The chosen address takes the selected-surface orange. */
  .home-choices {
    display: grid;
    gap: .65rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .home-choices legend {
    margin-block-end: .75rem;
    padding: 0;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 750;
  }

  .home-choice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border: .0625rem solid var(--color-line);
    border-radius: .65rem;
    background: var(--color-white);
    color: var(--color-navy);
    font-weight: 650;
    cursor: pointer;
  }

  .home-choice:has(input:checked) {
    border-color: var(--color-orange);
    background: var(--color-orange-soft);
  }

  .home-choice:has(input:focus-visible) {
    outline: .2rem solid var(--color-orange);
    outline-offset: .12rem;
  }

  .home-choice input {
    flex: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin: .15rem 0 0;
    accent-color: var(--color-orange-dark);
  }

  .home-choice span {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  /* The member's home section, shared by the confirm-home dialog and account
     settings. The section's grid gap spaces its parts. */
  .account-home-section > .onboarding-progress {
    padding: 0 0 1.2rem;
    background: transparent;
  }

  .account-home-section :is(.account-form, .home-search-message, .home-results) {
    margin-block-start: 0;
  }

  /* A member without a home confirms one in this dialog over the sample
     neighborhood before their map opens. */
  .account-modal.home-modal {
    inline-size: min(34rem, calc(100vw - 2rem));
  }

  .home-modal-body {
    display: grid;
    gap: 1.25rem;
    max-block-size: inherit;
    padding: clamp(1.35rem, 4vw, 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .home-modal .account-modal-message,
  .home-modal .page-status {
    margin: 0;
  }

  .home-modal .account-home-section {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Sign out and Delete account sit side by side as quiet links. */
  .home-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.5rem;
  }

  .home-modal-actions :is(a, button) {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--color-navy-soft);
    font-size: .84rem;
    font-weight: 700;
  }

  .home-modal-actions :is(a, button):hover {
    color: var(--color-navy);
  }

  .home-confirmed-panel {
    display: grid;
    gap: 1rem;
    inline-size: min(100%, 42rem);
  }

  .home-confirmed-panel .home-confirmed-note {
    padding-block-start: .85rem;
    border-block-start: .0625rem solid var(--color-line);
    font-size: .84rem;
  }

  .parcel-report-panel {
    inline-size: min(100%, 36rem);
  }

  .parcel-report-address {
    padding: .7rem .8rem;
    border-inline-start: .2rem solid var(--color-orange);
    border-radius: .25rem;
    background: var(--color-panel-soft);
    color: var(--color-navy);
    font-weight: 750;
    overflow-wrap: anywhere;
  }

  .parcel-report-reasons {
    display: grid;
    gap: .55rem;
    min-inline-size: 0;
    border: 0;
  }

  .parcel-report-reasons legend {
    margin-block-end: .25rem;
    color: var(--color-navy);
    font-size: .84rem;
    font-weight: 750;
  }

  .parcel-report-reasons label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-block-size: 3rem;
    padding: .65rem .8rem;
    border: .0625rem solid rgb(16 38 83 / 28%);
    border-radius: var(--radius-control);
    background: var(--color-white);
    color: var(--color-navy);
    cursor: pointer;
    font-size: .86rem;
    font-weight: 700;
  }

  .parcel-report-reasons label:has(input:checked) {
    border-color: var(--color-orange-dark);
    background: var(--color-orange-soft);
  }

  .parcel-report-reasons input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--color-orange-dark);
  }

  .parcel-report-reasons input:focus-visible {
    outline: .18rem solid var(--color-orange);
    outline-offset: .2rem;
  }

  .parcel-report-reasons:has(input[aria-invalid="true"]) label:not(:has(input:checked)) {
    border-color: #b42318;
  }

  .parcel-report-field-error {
    color: #7f241b;
    font-size: .76rem;
    line-height: 1.5;
  }

  .notebook-panel {
    inline-size: min(100%, 54rem);
  }

  .notebook-form-panel {
    inline-size: min(100%, 38rem);
  }

  .notebook-section {
    margin-block-start: 2rem;
    padding-block-start: 1.4rem;
    border-block-start: .0625rem solid var(--color-line);
  }

  .notebook-section > h2,
  .notebook-section-heading h2 {
    color: var(--color-navy);
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .notebook-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .notebook-section-heading > span {
    color: var(--color-muted);
    font-size: .76rem;
    font-weight: 700;
  }

  .notebook-empty {
    margin-block-start: 1.5rem;
    padding: 1rem;
    border-radius: var(--radius-control);
    background: var(--color-panel-soft);
    color: var(--color-navy-soft);
    font-size: .88rem;
    line-height: 1.5;
  }

  .notebook-entry-list,
  .notebook-place-list {
    display: grid;
    gap: .75rem;
    margin-block-start: 1rem;
    list-style: none;
  }

  .notebook-entry,
  .notebook-place-list > li {
    padding: 1rem;
    border: .0625rem solid rgb(16 38 83 / 18%);
    border-radius: .75rem;
    background: var(--color-white);
  }

  .notebook-entry.is-archived {
    background: var(--color-panel-soft);
  }

  .notebook-entry-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .7rem;
  }

  .notebook-entry-heading h3,
  .notebook-place-list h2 {
    min-inline-size: 0;
    color: var(--color-navy);
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .notebook-entry-label,
  .notebook-entry-state {
    color: var(--color-orange-dark);
    font-family: var(--font-meta);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .notebook-entry-state {
    color: var(--color-muted);
  }

  .notebook-entry-emoji {
    font-size: 1.2rem;
    line-height: 1;
  }

  .notebook-entry-note {
    margin-block-start: .7rem;
    color: var(--color-navy-soft);
    font-size: .86rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .notebook-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-block-start: .85rem;
  }

  .notebook-entry-actions form {
    margin: 0;
  }

  .notebook-entry-action,
  .notebook-place-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: .55rem .7rem;
    border: .0625rem solid rgb(16 38 83 / 28%);
    border-radius: .55rem;
    background: var(--color-white);
    color: var(--color-navy);
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
  }

  .notebook-entry-action:hover,
  .notebook-place-link:hover {
    border-color: var(--color-orange-dark);
  }

  .notebook-entry-action.is-danger {
    color: #8f2d22;
  }

  .notebook-add-section > h2 {
    margin-block-end: -.25rem;
  }

  .notebook-emoji-field input {
    max-inline-size: 8rem;
    font-size: 1.2rem;
  }

  .account-field-error,
  .notebook-field-error {
    color: #7f241b;
    font-size: .76rem;
    line-height: 1.5;
  }

  .notebook-place-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }

  .notebook-place-list h2 {
    margin-block-start: .25rem;
  }

  .notebook-place-list p {
    margin-block-start: .35rem;
    color: var(--color-muted);
    font-size: .78rem;
  }

  .notebook-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    margin-block-start: 1.7rem;
    padding-block-start: 1rem;
    border-block-start: .0625rem solid var(--color-line);
  }

  .notebook-page-links a,
  .notebook-delete-actions a {
    color: var(--color-navy-soft);
    font-size: .84rem;
    font-weight: 700;
  }

  .notebook-delete-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: 1.5rem;
  }

  .notebook-delete-button {
    min-block-size: 3rem;
    padding-inline: 1rem;
    border-radius: var(--radius-control);
    background: #8f2d22;
    color: var(--color-white);
    font-weight: 750;
  }

  @media (max-width: 38rem) {
    .account-shell {
      gap: 1.25rem;
    }

    .account-panel {
      padding: 1.25rem;
    }

    .home-results li {
      grid-template-columns: 1fr;
    }

    .home-confirm-action {
      inline-size: 100%;
    }

    .notebook-place-list > li {
      grid-template-columns: 1fr;
    }

    .notebook-place-link {
      inline-size: 100%;
    }

    .account-link-actions {
      display: grid;
    }

    .account-modal {
      inline-size: calc(100vw - 1rem);
      max-block-size: min(88dvh, 48rem);
      margin: auto;
      border-radius: 1.15rem 1.15rem .75rem .75rem;
    }

    .account-modal-frame {
      max-block-size: min(88dvh, 48rem);
    }
  }

  @media (min-width: 42rem) {
    .account-device-label-form {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }
  }

  @media (pointer: coarse) {
    .account-modal-close,
    .notebook-entry-action,
    .notebook-place-link {
      min-block-size: 3rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .account-modal[open] {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .account-modal,
    .account-modal-close {
      border-color: CanvasText;
    }

    .account-tab-list {
      border-color: CanvasText;
    }

    .account-tab-list a[aria-selected="true"] {
      border-block-end-color: Highlight;
    }

    .account-select select {
      border-color: CanvasText;
    }

    .account-select-chevron {
      color: CanvasText;
    }

    .account-tag-color-swatch {
      forced-color-adjust: none;
      border-color: CanvasText;
    }
  }

  @keyframes account-modal-enter {
    from {
      opacity: 0;
      transform: translateX(1rem) scale(.99);
    }
  }
}