/* The payment page, shared by the console and the portal (payment-detail.js). Tokens come from ui/ui.css. */
.pd-head { margin: 14px 0 16px; }
.pd-amount { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pd-amount.failed { color: var(--subtle); text-decoration: line-through; }
.pd-head-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pd-hint { font-size: 12px; color: var(--subtle); }
.pd-bad { color: var(--bad); }
.pd-banner { background: var(--warn-wash); border: 1px solid #fde68a; color: var(--warn); border-radius: var(--radius-control); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.pd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 20px; margin-bottom: 16px; }
.pd-card.pd-alert { border-color: #fde68a; }
.pd-card h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -0.025em; }
.pd-kv { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: 8px 16px; font-size: 13px; }
.pd-kv .k { color: var(--muted); }
.pd-kv .v { text-align: left; word-break: break-word; font-variant-numeric: tabular-nums; }
.pd-id { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.pd-id:last-child { border-bottom: 0; }
.pd-id .k { color: var(--muted); }
.pd-id .v { word-break: break-all; }
.pd-copy { font: inherit; font-size: 11px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.pd-copy:hover { color: var(--ink); border-color: var(--ink); }
.pd-who { margin-bottom: 10px; font-size: 14px; }
.pd-link { display: block; margin-top: 10px; font-size: 13px; cursor: pointer; text-decoration: underline; }
.pd-timeline { list-style: none; margin: 0; padding: 0; }
.pd-timeline li { position: relative; padding: 0 0 14px 20px; font-size: 13px; border-left: 1px solid var(--line); margin-left: 4px; }
.pd-timeline li:last-child { padding-bottom: 0; }
.pd-timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--subtle); }
.pd-timeline li.ok::before { background: var(--good); }
.pd-timeline li.bad::before { background: var(--bad); }
.pd-timeline li.now { font-weight: 600; }
.pd-timeline li a { cursor: pointer; text-decoration: underline; }
.pd-timeline small { display: block; font-size: 12px; color: var(--subtle); font-weight: 400; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-table th { text-align: left; font-size: 11px; font-weight: 500; color: var(--muted); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.pd-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.pd-table tfoot td { border-bottom: 0; padding-top: 10px; color: var(--muted); }
.pd-table .r { text-align: right; padding-right: 0; }
.pd-raw { margin: 10px 0 0; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); font-size: 12px; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.pd-raw.hidden { display: none; }
@media (max-width: 900px) { .pd-layout { grid-template-columns: minmax(0, 1fr); } }