/* Element pages (elements/*.html) and the elements overview. Site glue, not part of the system. */
.site-list {
  list-style: disc;
  margin: 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-2);
}
.site-table td {
  vertical-align: top;
}
#main a:not([class]) {
  text-decoration: underline;
}
.site-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Do / Don't */
.site-do-dont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--qf-space-4);
}
.site-do-dont > .qf-card {
  padding: var(--qf-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-3);
}
.site-do-dont__head {
  display: flex;
  align-items: center;
  gap: var(--qf-space-2);
}

/* Overview */
.site-element-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--qf-space-4);
}
.site-element-filters > .qf-field {
  width: calc(var(--qf-space-10) * 8);
  max-width: 100%;
}
.site-element-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--qf-space-3);
}
.site-element-grid > li > .qf-card {
  height: 100%;
  padding: var(--qf-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-2);
}
.site-element-grid__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qf-space-2);
}
.site-element-grid__name {
  font-weight: var(--qf-weight-semibold);
}

/* The element page header: breadcrumbs and dates on the left, Approve… at the top right; stacked on a
   narrow page. */
.site-approve-slot {
  flex: none;
}
@media (max-width: 40rem) {
  .site-element-head {
    flex-direction: column;
  }
}

/* Approve… on an element page: the name prompt, then the command it copied and the result. */
.site-approve {
  width: min(34rem, calc(100vw - 2 * var(--qf-space-4)));
}
.site-approve__body,
.site-approve__name,
.site-approve__ready {
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-3);
}
.site-approve__name[hidden],
.site-approve__ready[hidden] {
  display: none;
}
.site-approve__name > .qf-button {
  align-self: flex-start;
}
.site-approve__command {
  margin: 0;
  padding: var(--qf-space-2) var(--qf-space-3);
  border: var(--qf-border-width) solid var(--qf-border);
  border-radius: var(--qf-radius-sm);
  background: var(--qf-surface-sunken);
  color: var(--qf-ink);
  font-family: var(--qf-font-family-mono);
  font-size: var(--qf-text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.site-approve__status:empty {
  display: none;
}
.site-approve__status {
  display: flex;
  align-items: center;
  gap: var(--qf-space-1);
}
.site-approve__status[data-copied] .qf-icon {
  color: var(--qf-color-success-800);
}