.custom-page {
  min-height: calc(100vh - var(--header-height));
  padding-block: var(--space-10) var(--space-20);
}

.custom-list,
.custom-detail__grid {
  display: grid;
  gap: var(--space-5);
}

.custom-card,
.quote-card,
.custom-quotes {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.custom-card header,
.quote-card header,
.custom-detail__header,
.quote-card dl > div,
.attachment-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.custom-card h2,
.custom-card p,
.custom-card time {
  margin: 0;
}

.custom-card time,
.custom-card__reference {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.custom-card .button {
  width: fit-content;
}

.custom-create {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.custom-form input[type="file"] {
  padding: var(--space-3);
  border: 1px dashed var(--color-brand-300);
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
}

.custom-form__notice {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.custom-form__notice p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.custom-detail__header {
  margin-block: var(--space-6) var(--space-8);
}

.custom-detail__header h1 {
  margin: 0;
  font-family: var(--font-display);
}

.custom-specs {
  display: grid;
  gap: var(--space-4);
}

.custom-specs div {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.custom-specs dt {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.custom-specs dd,
.quote-card dd {
  margin: var(--space-1) 0 0;
}

.attachment-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachment-list li {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.custom-quotes {
  align-content: start;
}

.custom-quotes > h2,
.quote-card dl {
  margin: 0;
}

.quote-card {
  box-shadow: none;
}

.quote-card__total {
  color: var(--color-brand-700);
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
}

@media (min-width: 48rem) {
  .custom-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-create,
  .custom-detail__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.8fr);
  }
}