.detail-claim-summary, .detail-renewal-summary {
  margin: 0 0 .72rem;
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.48;
}

.detail-claim-form, .detail-renewal-form {
  display: grid;
  grid-template-columns: minmax(10rem, .55fr) minmax(0, 1fr);
  gap: .68rem .78rem;
  align-items: end;
}

.detail-claim-form label, .detail-renewal-form label { margin: 0; }
.detail-claim-actions, .detail-renewal-actions { display: flex; align-items: center; gap: .55rem; }

.detail-claim-actions button, .detail-renewal-actions button {
  color: var(--on-accent);
  border-color: transparent;
  background: var(--accent-solid);
  box-shadow: 0 .35rem .8rem color-mix(in srgb, var(--accent) 20%, transparent);
  font-weight: 750;
}

.detail-claim-actions span, .detail-renewal-actions span {
  color: var(--muted);
  font: .67rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

.detail-claim-error, .detail-renewal-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: .64rem .7rem;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line));
  border-radius: .68rem;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: .73rem;
  line-height: 1.42;
}

.detail-renewal-section {
  border-color: color-mix(in srgb, var(--active-ink) 28%, var(--line));
  background: color-mix(in srgb, var(--active) 18%, var(--panel));
}

.detail-renewal-summary { color: var(--active-ink); }
.detail-claim-renewal-note { padding: .75rem .6rem; text-align: left; }
.detail-claim-form button:disabled, .detail-renewal-form button:disabled { cursor: wait; opacity: .65; }

@media (max-width: 560px) {
  .detail-claim-form, .detail-renewal-form { grid-template-columns: 1fr; align-items: stretch; }
  .detail-claim-actions, .detail-renewal-actions { flex-wrap: wrap; }
  .detail-claim-actions button, .detail-renewal-actions button { flex: 1; }
}