/* Chrome for shared-ui's RecordList, RecordCard and VContextMenu. A sibling of
   one-web's rules, not a mirror: geometry uses the design system's spacing and
   type tokens, colour uses sites' own. See
   docs/superpowers/specs/2026-09-22-addresses-in-sites-design.md.

   RecordCard's inner grid needs no rules here - sites already styles
   .grid[data-columns] and .grid[data-tablet-columns]. What is missing is the
   container, the list trim, and the bits of card furniture. */
.cards {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 100%;
}

/* What makes a card grid read as a list: one border round the whole thing,
   no gap, and hairlines between rows. */
.list-cards {
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.list-cards > *:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

/* sites' main.css gives every .card a box-shadow, which suits a tenant content
   card standing on its own. Inside a list the rows share one border and are
   separated by hairlines, so a shadow per row fights both. */
.list-cards .card {
  box-shadow: none;
}

.grid.items-center {
  align-items: center;
}

.card-title {
  font-weight: bold;
  font-size: var(--font-size-base, 15px);
  color: var(--h-color);
}

.caption {
  font-size: var(--font-size-lg, 17px);
  font-weight: 600;
  padding-block: var(--space-4) var(--space-2);
  color: var(--h-color);
}

.caption.has-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.gap-2 {
  gap: var(--space-2);
}

/* sites spells its own copy of this utility .white-space-nowrap; RecordCard
   emits one-web's spelling, so both resolve here. */
.whitespace-nowrap {
  white-space: nowrap;
}

.context-menu {
  display: flex;
  gap: var(--space-1);
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  align-items: center;
}

.context-menu .button {
  padding: var(--space-1) var(--space-4);
}

.context-menu-advanced-popover {
  position-area: bottom span-left;
}

@media screen and (max-width: 1023px) {
  .mobile-hidden {
    display: none !important;
  }
}