@layer components {
  body.account-surface {
    min-block-size: 100dvh;
    overflow: auto;
    background:
      radial-gradient(circle at 15% 5%, rgb(250 117 84 / 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 a {
    color: var(--color-navy-soft);
    font-size: .86rem;
    font-weight: 700;
  }

  .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(250 117 84 / 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 max(1rem, env(safe-area-inset-right));
    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-coral-soft);
  }

  .account-modal-close:focus-visible {
    outline: .2rem solid var(--color-coral);
    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-coral-dark);
  }

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

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

  .account-kicker {
    color: var(--color-coral-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-coral-dark);
    outline: .2rem solid rgb(250 117 84 / 24%);
    outline-offset: .08rem;
  }

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

  .home-address-combobox {
    position: relative;
  }

  .home-address-suggestions {
    position: absolute;
    inset-block-start: calc(100% + .35rem);
    inset-inline: 0;
    z-index: 10;
    max-block-size: min(18rem, 42dvh);
    margin: 0;
    padding: .35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: .0625rem solid rgb(16 38 83 / 32%);
    border-radius: .7rem;
    background: var(--color-white);
    box-shadow: var(--shadow-float);
  }

  .home-address-suggestions[hidden] {
    display: none;
  }

  .home-address-suggestions [role="option"] {
    display: flex;
    align-items: center;
    min-block-size: 3rem;
    padding: .75rem .8rem;
    border-radius: .48rem;
    color: var(--color-navy);
    font-size: .88rem;
    line-height: 1.35;
    cursor: pointer;
  }

  .home-address-suggestions [role="option"][aria-selected="true"],
  .home-address-suggestions [role="option"]:hover {
    background: var(--color-panel-soft);
  }

  .home-address-suggestions [role="option"][aria-selected="true"] {
    font-weight: 700;
  }

  .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-coral-dark);
    outline: .2rem solid rgb(250 117 84 / 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,
  .account-primary-link,
  .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,
  .account-primary-link,
  .home-confirm-action {
    background: var(--color-navy);
    color: var(--color-white);
  }

  .account-primary-action:hover,
  .account-primary-link:hover,
  .home-confirm-action:hover {
    background: var(--color-navy-soft);
  }

  .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 {
    margin-block-start: 1.5rem;
    padding: 1rem;
    border-radius: var(--radius-control);
    background: var(--color-panel-soft);
  }

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

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

  .account-identity 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,
  .account-device-summary > p:not(:first-child) {
    color: var(--color-navy-soft);
    font-size: .84rem;
    line-height: 1.5;
  }

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

  .account-device-list > li {
    display: grid;
    gap: 1rem;
    padding: 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: .3rem;
    min-inline-size: 0;
  }

  .account-device-summary > p:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }

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

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

  .account-device-actions,
  .account-device-label-form {
    display: grid;
    gap: .75rem;
  }

  .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 h2 {
    font-size: 1rem;
  }

  .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;
  }

  .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;
  }

  .account-primary-link {
    justify-self: start;
    margin-block-start: .25rem;
  }

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

  .parcel-report-address {
    padding: .7rem .8rem;
    border-inline-start: .2rem solid var(--color-coral);
    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-coral-dark);
    background: var(--color-coral-soft);
  }

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

  .parcel-report-reasons input:focus-visible {
    outline: .18rem solid var(--color-coral);
    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-coral-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-coral-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;
  }

  .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-block: auto max(.5rem, env(safe-area-inset-bottom));
      margin-inline: max(.5rem, env(safe-area-inset-left)) max(.5rem, env(safe-area-inset-right));
      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;
    }
  }

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