@layer components {
  /* Wordmark: the loop mark is the one place the brand gets to be loud. */
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
  }
  .wordmark svg { width: 32px; height: 32px; }
  .wordmark--large { font-size: var(--text-3xl); gap: var(--space-3); }
  .wordmark--large svg { width: 52px; height: 52px; }

  /* Buttons are pills. Primary actions are loud; management actions are quiet. */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: 0 var(--space-5);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-ui);
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 140ms ease, transform 140ms var(--ease-pop);
  }
  .button svg { width: 20px; height: 20px; }
  .button:active { transform: scale(0.96); }

  .button--primary { background: var(--leaf); color: var(--cream); }
  .button--primary:hover { background: var(--leaf-strong); }

  .button--soft { background: var(--peach); color: var(--ink); }
  .button--soft:hover { background: #f1a895; }

  .button--outline { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
  .button--outline:hover { border-color: var(--leaf); }

  .button--quiet {
    min-height: var(--touch);
    padding-inline: var(--space-2);
    color: var(--muted);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
  }
  .button--quiet:hover { color: var(--ink); }

  .button--block { width: 100%; }

  /* Forms */
  .form { display: grid; gap: var(--space-4); }
  .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

  .field { display: grid; gap: var(--space-1); }
  .field__label { font-size: var(--text-sm); font-weight: 800; }
  .field__hint { color: var(--muted); font-size: var(--text-sm); }

  /* A short set of radio choices, each a full-width tap target. */
  .choice-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
  .choice {
    display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); background: var(--surface); font-weight: 700; cursor: pointer;
  }
  .choice:has(input:checked) { border-color: var(--leaf); background: var(--mint-soft, var(--surface)); }
  .choice input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--leaf); }
  .choice small { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
  .field__error { color: var(--danger); font-size: var(--text-sm); font-weight: 700; }

  .input {
    width: 100%;
    min-height: 50px;
    padding: 0 var(--space-5);
    border: 2px solid var(--field-border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-weight: 600;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  .input::placeholder { color: var(--muted); }
  .input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-soft); }
  .input[aria-invalid="true"] { border-color: var(--danger); }

  select.input {
    appearance: none;
    padding-right: var(--space-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2a27' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px;
  }

  .field-row { display: grid; gap: var(--space-4); }
  @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

  /* Avatars use initials on a palette tint chosen per person. */
  .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 800;
    text-decoration: none;
  }
  .avatar--1 { background: var(--peach); }
  .avatar--2 { background: var(--sunny); }
  .avatar--large { width: 48px; height: 48px; font-size: var(--text-md); }

  a.avatar:hover { box-shadow: 0 0 0 3px var(--line-strong); }

  .avatar-stack { display: flex; }
  .avatar-stack .avatar { border: 2px solid var(--cream); }
  .avatar-stack .avatar + .avatar { margin-left: -6px; }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--mint-soft);
    font-size: var(--text-xs);
    font-weight: 800;
  }
  .chip--sunny { background: var(--sunny-soft); }

  /* Page heading used by every tab. */
  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .page-header h1 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
  .page-header p { color: var(--muted); font-weight: 700; }
  .page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

  /* Settings and similar grouped content. */
  .panel {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .panel + .panel { margin-top: var(--space-4); }
  .panel > h2 { margin-bottom: var(--space-4); }

  .member-list { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
  /* Avatar, name and role on one line; any actions sit underneath. */
  .member {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }
  .member__name { font-weight: 800; }
  .member__email { color: var(--muted); font-size: var(--text-sm); }
  .member__text { overflow-wrap: anywhere; }
  .member__actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .member form { display: contents; }
  .avatar--invited { border: 2px dashed var(--line-strong); background: transparent; color: var(--muted); }
  .avatar--invited svg { width: 20px; height: 20px; }

  /* Shown once, straight after an invitation is made. */
  .invite-link {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--sunny-soft);
  }
  .invite-link .input { background: var(--surface); }
  .invite-form { margin-top: var(--space-5); }
  .invite-form .inline-form__row .input { flex: 1; min-width: 0; }

  .household-list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
  .household { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
  .household__name { font-weight: 800; }
  .household form { display: contents; }

  .notice-box {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--peach-soft);
  }
  .join-actions { display: grid; gap: var(--space-2); }

  .sign-out { margin-top: var(--space-5); }

  /* Empty states are invitations to act, with a small illustration. */
  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 30rem;
    margin: var(--space-6) auto;
    text-align: center;
  }
  .empty-state__art { width: 132px; height: 132px; margin-bottom: var(--space-2); }
  .empty-state h2 { font-size: var(--text-xl); }
  .empty-state p { color: var(--muted); }

  /* Toasts: one pill at a time, above the tab bar on mobile. */
  .toasts {
    position: fixed;
    inset-inline: var(--space-4);
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 30;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    pointer-events: none;
  }
  .toast {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--cream);
    font-weight: 700;
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    animation: toast-in 260ms var(--ease-pop);
  }
  .toast svg { width: 18px; height: 18px; flex: none; }
  .toast--alert { background: var(--danger-soft); color: var(--ink); border: 2px solid var(--danger); }
  .toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease; }

  @media (min-width: 768px) {
    .toasts { bottom: var(--space-6); }
  }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
  }

  .error-summary {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--danger-soft);
    font-weight: 700;
  }
}