@layer components {
  /* Wordmark: the basket 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 img { width: 32px; height: auto; flex-shrink: 0; }
  .wordmark--large { font-size: var(--text-3xl); gap: var(--space-3); }
  .wordmark--large img { width: 52px; height: auto; }

  /* 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: <div><h1/><p/></div> and at most one action. Only the title shares a row with the
     action; the line under it always has the full width, so a Back or Edit never squeezes it into a column on a phone. */
  .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .page-header > div:first-child { display: contents; }
  .page-header > div:first-child > * { grid-column: 1 / -1; }
  .page-header > div:first-child > h1 { grid-column: 1; grid-row: 1; }
  .page-header > :not(:first-child) { grid-column: 2; grid-row: 1; }
  .page-header h1 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
  /* On a phone the largest size broke short titles beside a Back or Edit onto two or three lines. */
  @media (max-width: 639px) { .page-header h1 { font-size: var(--text-2xl); } }
  .page-header p { color: var(--muted); font-weight: 700; }
  /* A main page's own actions: below its heading and navigation, never
     beside the title, so sibling views keep the navigation in one place. */
  .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }

  /* 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); }

  /* One thing per row: its name on top (wrapping, never truncated), quieter facts beneath, and a badge or action
     that keeps the right-hand column whatever the name's length. A long name makes the row taller, never
     rearranges it. --priced gives the name the full width and puts the price beside the facts. */
  .fact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name end" "meta end";
    align-items: center;
    column-gap: var(--space-3);
  }
  .fact-row__name { grid-area: name; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
  .fact-row__meta { grid-area: meta; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
  .fact-row__end { grid-area: end; justify-self: end; }
  .fact-row--priced { grid-template-areas: "name name" "meta end"; align-items: baseline; }
  .fact-row--priced .fact-row__end { font-weight: 800; font-variant-numeric: tabular-nums; }

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

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

  /* The quiet end of a long list (shared/_load_more): a count and one button. */
  .load-more { display: grid; justify-items: center; gap: var(--space-2); margin-block: var(--space-4); text-align: center; }
  .load-more__status { color: var(--muted); font-size: var(--text-sm); }
  .load-more__status:focus { outline: none; }
  .load-more__status:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
  .load-more__error { color: var(--danger); font-size: var(--text-sm); }
}