@layer components {
  /* Signed-out pages on a touch screen: the label row is a finger tall with its text at the bottom, next to the field;
     the link's --tap area grows up and sideways, never down onto the field. Footer links grow all around. */
  @media (pointer: coarse) {
    .auth-card .field-row { min-height: var(--tap); align-items: end; }
    .auth-card :is(.field-row a, .card-footer a:not(.button)) { position: relative; }
    .auth-card :is(.field-row a, .card-footer a:not(.button))::after { content: ""; position: absolute; }
    .auth-card .card-footer a:not(.button)::after { inset: min(0px, calc((100% - var(--tap)) / 2)); }
    .auth-card .field-row a::after {
      inset: min(0px, calc(100% - var(--tap))) min(0px, calc((100% - var(--tap)) / 2)) 0;
    }
  }

  /* One's spaces, found by e-mail (ADR-0029 § 2): one row per space, the whole row a link. */
  .space-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .space-list__item { display: grid; gap: 2px; padding: 12px 14px; min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); color: inherit; text-decoration: none; }
  .space-list__item:hover { background: var(--surface, transparent); }
  .space-list__item:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--jx-accent); }
  .space-list__name { font-weight: 600; }
  .space-list__meta { font-size: 13.5px; color: var(--muted-foreground, var(--muted)); }
  .space-list__desktop { display: inline-block; margin: 4px 0 0 14px; font-size: 13.5px; }
  @media (pointer: coarse) { .space-list__desktop { display: none; } }
}