/* Payment uses the existing observatory's type, surfaces and semantic colors. */
#payment-live { min-width: 0; }
body:has(#payment-live:not([hidden])) main { padding-top: 22px; }
body:has(#payment-live:not([hidden])) .hero { align-items: center; gap: 18px; margin-bottom: 18px; }
body:has(#payment-live:not([hidden])) .hero h1 { font-size: clamp(28px,3vw,38px); }
body:has(#payment-live:not([hidden])) .hero p { margin-top: 8px; font-size: 14px; }
body:has(#payment-live:not([hidden])) .hero-note { max-width: 280px; padding: 10px 12px; }
#payment-live h2, #payment-live h3, #payment-live h4 { letter-spacing: -.025em; text-wrap: balance; }
#payment-live h2 { font-size: 17px; margin: 0; }
#payment-live h3 { font-size: 17px; margin: 0 0 8px; }
#payment-live h4 { font-size: 15px; margin: 24px 0 12px; }
#payment-live p { line-height: 1.65; }
#payment-live small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 4px; }
.pay-controls { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; max-width: 100%; }
.pay-controls select { min-height: 44px; max-width: 100%; min-width: 200px; padding: 8px 36px 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); }
.pay-control-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pay-button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 650; transition: background .16s,border-color .16s; }
.pay-button:hover { background: var(--blue-soft); border-color: var(--blue); }
.pay-button.is-active { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.pay-button:disabled { cursor: not-allowed; opacity: .5; }
.pay-range { font-size: 14px; font-weight: 650; margin: 0 0 6px; overflow-wrap: anywhere; }
.pay-note { font-size: 13px; color: var(--muted); margin: 8px 0 16px; }
.pay-freshness { font-size: 12px; }
.pay-process-heading, .pay-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pay-processes { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.pay-process { display: block; text-align: left; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .16s,background .16s; }
.pay-process:hover { border-color: var(--blue); background: var(--blue-soft); }
.pay-process[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.pay-process>span:first-child { font-size: 13px; font-weight: 750; }
.pay-process strong { display: block; font-size: 24px; margin-top: 7px; }
#payment-live .pay-process strong small { display: inline; margin-left: 7px; }
.pay-mini-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 18px 0 24px; gap: 12px; }
.pay-stat { min-width: 0; padding: 17px 0 17px 16px; border-left: 3px solid var(--line-strong); }
.pay-stat>span { font-size: 12px; font-weight: 700; color: var(--muted); }
.pay-stat strong { display: block; font-size: clamp(22px,2.5vw,30px); margin-top: 8px; overflow-wrap: anywhere; }
.pay-stat.is-warning { border-color: var(--yellow); }
.pay-view-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.pay-panel { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--paper); margin-bottom: 20px; }
.pay-panel-head p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.pay-two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 20px; }
.pay-two-col > * { min-width: 0; }
.pay-two-col .pay-panel { margin-bottom: 20px; }
.pay-results { list-style: none; padding: 0; margin: 0; }
.pay-results li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; gap: 14px; }
.pay-results li:last-child { border: 0; }
.pay-dot { width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--line-strong); }
.pay-dot.tech_fail,.pay-dot.conflict { background: var(--red); }
.pay-dot.success { background: var(--green); }
.pay-dot.pending,.pay-dot.no_result { background: var(--amber); }
.pay-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 16px 0; }
.pay-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.pay-table caption { text-align: left; color: var(--muted); background: var(--canvas); padding: 10px 13px; font-size: 12px; }
.pay-table th,.pay-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.pay-table thead th { color: var(--muted); font-size: 12px; background: var(--canvas); font-weight: 650; }
.pay-table th[scope="row"] { min-width: 145px; max-width: 320px; white-space: normal; font-weight: 550; overflow-wrap: anywhere; }
.pay-table td { font-variant-numeric: tabular-nums; }
.pay-table tr:last-child th,.pay-table tr:last-child td { border-bottom: 0; }
.pay-table tr:hover { background: var(--yellow-soft); }
.pay-code { overflow-wrap: anywhere; white-space: normal; }
.pay-link { min-height: 44px; border: 0; background: transparent; color: var(--blue); padding: 4px 0; font-weight: 650; font-size: 13px; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; overflow-wrap: anywhere; }
.pay-callout { border-left: 3px solid var(--yellow); border-radius: 0 9px 9px 0; background: var(--yellow-soft); padding: 14px 16px; font-size: 13px; margin: 18px 0; line-height: 1.65; }
.pay-empty { padding: 28px 16px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 12px; margin: 16px 0; }
.pay-empty p { color: var(--muted); font-size: 13px; max-width: 52ch; margin: 8px auto; }
.pay-details summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 650; font-size: 13px; }
.pay-chart { display: flex; align-items: end; gap: 9px; height: 224px; overflow-x: auto; padding: 8px 0; }
.pay-day { flex: 1 0 29px; min-width: 0; text-align: center; font-size: 11px; }
.pay-day>span { display: block; color: var(--ink-soft); font-size: 11px; }
.pay-bars { height: 157px; display: flex; justify-content: center; align-items: end; gap: 3px; border-bottom: 1px solid var(--line); }
.pay-bars span { display: block; width: 45%; max-width: 19px; background: var(--line-strong); border-radius: 3px 3px 0 0; min-height: 0; }
.pay-bars .closed { background: var(--ink-soft); }
.pay-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.pay-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--line-strong); }
.pay-legend i.closed { background: var(--ink-soft); margin-left: 6px; }
#pay-analysis,.pay-stage-detail { scroll-margin-top: 132px; }
.pay-stage-detail { min-width: 0; margin-top: 20px; }
.pay-analysis { background: var(--canvas); }
#payment-live .pay-analysis > .analysis-top h2 { font-size: 22px; margin-top: 4px; }
.pay-analysis > .pay-panel:last-child { margin-bottom: 0; }
.pay-priorities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.pay-insight { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 4px; border: 1px solid var(--line); border-top: 3px solid var(--yellow); border-radius: 12px; background: var(--paper); }
.pay-insight[data-pay-card="technical"] { border-top-color: var(--red); }
.pay-insight[data-pay-card="latency"] { border-top-color: var(--blue); }
#payment-live .pay-insight h3 { margin: 0; font-size: 14px; }
.pay-insight-total { margin: 10px 0; color: var(--muted); font-size: 12px; }
.pay-insight-total > strong { color: var(--ink); font-size: 32px; line-height: 1.2; margin-right: 3px; }
.pay-insight-caption { display: block; color: var(--muted); font-size: 12px; }
.pay-insight-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; gap: 12px; padding: 6px 0; border: 0; background: transparent; text-align: left; font-size: 13px; }
.pay-insight-row > strong { white-space: nowrap; font-size: 16px; }
.pay-insight-row strong span { color: var(--muted); font-size: 12px; }
.pay-insight-row:hover { color: var(--blue); }
.pay-insight-note { color: var(--muted); font-size: 12px; margin: 8px 0; }
.pay-insight > .pay-insight-note:last-of-type { margin-top: auto; padding-top: 10px; }
.pay-insight-link { display: block; min-height: 44px; width: 100%; padding: 6px 0; border: 0; background: transparent; text-align: left; color: var(--blue); font-size: 12px; font-weight: 700; }
.pay-insight-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.pay-wait-group { margin-top: 14px; }
.pay-wait-group + .pay-wait-group { padding-top: 10px; border-top: 1px solid var(--line); }
.pay-flow-group + .pay-flow-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.pay-flow-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
#payment-live .pay-flow-heading h3 { font-size: 14px; margin: 0; }
.pay-flow-heading > span { color: var(--muted); font-size: 12px; }
.pay-flow { display: grid; grid-template-columns: repeat(var(--pay-columns),minmax(0,1fr)); gap: 10px; }
.pay-flow .flow-node { width: auto; min-width: 0; padding: 14px; }
.pay-flow .flow-node .step-index { margin-bottom: 12px; }
.pay-flow .flow-node .step-name { font-size: 14px; min-height: 20px; }
.pay-flow .flow-node:disabled { cursor: default; opacity: .65; transform: none; }
.pay-node-note { display: block; color: var(--muted); font-size: 12px; margin-top: 12px; }
.pay-flow-group.is-compact .flow-node { min-height: 112px; padding: 12px; }
.pay-flow-group.is-compact .step-value { font-size: 19px; }
.pay-branch-note { margin: 10px 0 0; font-size: 12px; }
.pay-stage-network { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
#payment-live .pay-stage-network > h4 { margin: 0; }
.pay-stage-network .pay-panel { margin-bottom: 0; padding: 0; border: 0; }
.pay-network-strip { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--muted); }
.pay-network-strip strong { color: var(--ink); margin-left: 4px; }
.pay-expected { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; background: var(--canvas); }
@media(max-width:1000px) { .pay-processes { grid-template-columns: repeat(3,minmax(0,1fr)); }.pay-two-col { grid-template-columns: 1fr; gap: 0; }.pay-insight { padding: 14px 12px 4px; }.pay-flow { grid-template-columns: repeat(min(var(--pay-columns),3),minmax(0,1fr)); } }
@media(max-width:680px) { .pay-processes,.pay-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }.pay-priorities { grid-template-columns: 1fr; }.pay-insight { padding: 14px 16px 4px; }.pay-mini-stats { grid-template-columns: 1fr;gap: 4px; }.pay-panel { padding: 16px; }.pay-controls label { width: 100%; }.pay-controls select { width: 100%; }.pay-control-actions { margin-left: 0; }.pay-panel-head,.pay-analysis > .analysis-top { align-items: flex-start;flex-wrap: wrap; }.pay-table th,.pay-table td { padding: 10px; }.pay-process { padding: 12px; }.pay-view-tabs { gap: 6px; }.pay-view-tabs .pay-button { padding: 8px 10px; }.pay-flow .flow-node { padding: 12px; }.pay-stage-network { padding: 14px; } }
@media(prefers-reduced-motion:reduce) { #payment-live * { transition: none !important;scroll-behavior: auto !important; } }
@media print { .pay-controls,.pay-view-tabs { display:none; }.pay-panel { break-inside:avoid; }.pay-table-wrap { overflow:visible; } }