/* Sending domains — only what is particular to this page; its surfaces come
   from platform-kit.css.

   Host and value each have their own copy button. The record values are long
   and must never be truncated in a way that lets somebody copy half a DKIM
   key: they wrap, and the button takes the whole field regardless of what is
   on screen. */

.pd-dismiss { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 12px; opacity: .75; text-decoration: underline; }

.pd-note.small { font-size: 12.5px; }

/* the list */
/* The card is a row: what the domain is on the left, what you can do on the
   right. It reads as a list you scan down rather than a stack of panels. */
.pd-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.pd-card.ok { border-color: rgba(22, 163, 74, .3); }
.pd-card-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pd-card-main b { font-size: 15.5px; letter-spacing: -.01em; }
/* A pill in a column flex container stretches the full width unless told not
   to, which turned the status into a banner across the card. */
.pd-card-main .pd-tag, .pd-detail-head .pd-tag { align-self: flex-start; }
.pd-card-main small { color: var(--sd-mut); font-size: 12px; }
.pd-card-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-card-acts .pd-btn { padding: 6px 10px; font-size: 12.5px; }

/* the open domain */
.pd-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pd-detail-head h3 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.01em; }
.pd-detail-head p { margin: 0; color: var(--sd-mut); font-size: 12.5px; }
.pd-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pd-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 16px 0 0; }
.pd-check { border: 1px solid var(--sd-line); border-radius: 12px; background:var(--sd-sunk,#fbfcfe); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pd-check b { font-size: 13px; font-weight: 600; }
.pd-check small { font-size: 11.5px; color: var(--sd-mut); line-height: 1.45; }
.pd-check.on { border-color: rgba(22, 163, 74, .32); background: rgba(22, 163, 74, .07); }
.pd-check.on b { color: #147c3d; }
.pd-check.off b { color: var(--sd-mut); }

.pd-records tr:last-child td { border-bottom: 0; }
.pd-records td b { display: block; font-size: 12px; }
.pd-records td small { font-size: 11px; color: var(--sd-mut); }
.pd-records tr.found td small { color: #147c3d; }
.pd-records .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pd-copy-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pd-copy-row .pd-copy-text { min-width: 0; flex: 1 1 auto; }
.pd-copy-row .pd-copy { flex: 0 0 auto; align-self: center; }
/* A DKIM value is ~400 characters. Wrapping it is the only honest option —
   an ellipsis invites somebody to copy what they can see and wonder why it fails. */
.pd-records .val .pd-copy-text { word-break: break-all; line-height: 1.5; }

/* Space between the open records panel and the domain cards underneath,
   and between those cards — they were sitting on top of each other. */
.pd-detail { margin-bottom: 28px; }
.pd-list { gap: 20px; }

.pd-add { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }