/* Team Lead pays for an agent's plan. Plain dialog on the Hub tokens (--h-*), like Add agent. Prefix hps-. */
.hps-dialog,.hps-inline,.hps-tag,.hps-link{--a:var(--h-accent,#7a1f2b);--on:var(--h-on-accent,#fffaf6);--ink:var(--h-ink,#1f1a1c);--mut:var(--h-muted,#625a57);--line:var(--h-line,#e3dbcd);--surf:var(--h-surface,#fffdf9)}
.hps-dialog{position:fixed;inset:0;margin:auto;height:fit-content;width:min(540px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surf);color:var(--ink);box-shadow:0 24px 60px -24px rgba(20,10,12,.35);font:400 15px/1.5 var(--h-ui,system-ui,sans-serif)}
.hps-dialog::backdrop{background:rgba(20,12,14,.38)}
.hps-head{display:flex;align-items:flex-start;gap:16px;padding:24px 24px 0}
.hps-head>div{margin-right:auto}
.hps-title{margin:0;font:600 20px/1.25 var(--h-ui,system-ui,sans-serif)!important;letter-spacing:-.01em}
.hps-sub{margin:2px 0 0;color:var(--mut);font-size:13px}
.hps-x{width:32px;height:32px;margin:-2px -6px 0 0;border:0;border-radius:6px;background:none;color:var(--mut);display:grid;place-items:center;cursor:pointer}
.hps-x:hover{background:color-mix(in srgb,var(--line) 60%,transparent);color:var(--ink)}
.hps-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hps-body{padding:16px 24px 24px}
.hps-lede{margin:0 0 16px}
.hps-status{margin:0 0 16px;color:var(--mut);font-size:14px}
.hps-plans{margin:0 0 16px;padding:0;border:0}
.hps-plans legend{margin:0 0 6px;padding:0;font-size:13.5px;font-weight:600}
.hps-plan{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-top-width:0;cursor:pointer}
.hps-plan:first-of-type{border-top-width:1px;border-radius:8px 8px 0 0}
.hps-plan:last-of-type{border-radius:0 0 8px 8px}
.hps-plan:has(input:checked){background:color-mix(in srgb,var(--a) 5%,var(--surf))}
.hps-plan input{margin:0;accent-color:var(--a)}
.hps-plan-main{display:flex;flex-direction:column;margin-right:auto}
.hps-plan-main b{font-weight:600}
.hps-plan-main em{margin-left:6px;font-style:normal;font-weight:500;color:var(--mut);font-size:13px}
.hps-plan-main span{color:var(--mut);font-size:13px}
.hps-plan-price{font-weight:600;white-space:nowrap}
.hps-plan-price small{font-weight:400;color:var(--mut)}
.hps-k{margin:0 0 2px;font-size:13.5px;font-weight:600}
.hps-v{margin:0}
.hps-paywith,.hps-card-form{margin:0 0 16px}
.hps-card-form [data-hps-element]{margin:8px 0}
.hps-row-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center}
.hps-select{height:36px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--ink);font:inherit}
.hps-sum{margin:0 0 8px;padding:12px 0 0;border-top:1px solid var(--line)}
.hps-sum div{display:flex;justify-content:space-between;padding:2px 0}
.hps-sum dt{color:var(--mut)}
.hps-sum dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.hps-sum div:first-child dd{font-size:17px}
.hps-note{margin:0 0 12px;color:var(--mut);font-size:13px}
.hps-warn{color:var(--ink)}
.hps-consent{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:14px}
.hps-consent input{margin-top:3px;accent-color:var(--a)}
.hps-err{margin:0 0 12px;color:var(--h-danger,#a3202d);font-size:14px}
.hps-foot{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.hps-gap{margin-right:auto}
.hps-done .hps-foot{justify-content:flex-end}
.hps-btn{height:38px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--ink);font:600 14px/1 var(--h-ui,inherit);cursor:pointer;white-space:nowrap}
.hps-btn:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.hps-btn:disabled{opacity:.6;cursor:default}
.hps-primary{border-color:var(--a);background:var(--a);color:var(--on)}
.hps-primary:hover{border-color:var(--a);background:color-mix(in srgb,var(--a) 88%,#000)}
.hps-text,.hps-link{border:0;background:none;padding:2px 0;color:var(--a);font:600 13.5px/1.2 var(--h-ui,inherit);cursor:pointer}
.hps-text:hover,.hps-link:hover{text-decoration:underline}
.hps-danger{color:var(--h-danger,#a3202d)}
.hps-skel{color:var(--mut)}
.hps-dialog :is(button,input,select):focus-visible{outline:2px solid var(--a);outline-offset:2px}
/* On account cards */
.hps-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink)}
.hps-inline .hps-v{color:var(--mut);font-size:14px}
.hps-inline .hps-btn{height:34px;font-size:13.5px}
.hps-tag{display:block;margin-top:2px;color:var(--mut);font-size:12.5px}
.hps-link{display:block;align-self:flex-start;justify-self:start;margin:4px 0 0;padding:2px 0;text-align:left;font-size:13px}
@media (max-width:520px){.hps-inline{flex-direction:column;align-items:flex-start}.hps-plan-main span{display:none}}
/* Add agent: the Plan picker */
.haa-dialog .haa-select{display:block;width:100%;box-sizing:border-box;height:42px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--ink);font:400 15px/1 var(--h-ui,inherit)}
.haa-dialog .haa-plan-note{margin-top:6px}