/* Accounts & Billing (account-settings.js), the billing reactivation page and the
   email-link landing. Layout only: colours come from tokens (docs/ui/DESIGN.md). */

/* ---------- Subscriptions panel (rows rendered by utils/billing-panel.js) */
account-settings-page .billing-subscription{display:flex;align-items:center;gap:16px;min-height:64px;padding:14px 20px}
account-settings-page .billing-subscription+.billing-subscription{border-top:1px solid var(--line-2)}
account-settings-page .billing-product-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
account-settings-page .billing-subscription-main{flex:1;min-width:0}
account-settings-page .billing-subscription-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
account-settings-page .billing-subscription-title h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
account-settings-page .billing-status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:var(--well);color:var(--ink-2);font-size:12px;font-weight:700;white-space:nowrap}
account-settings-page .billing-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
account-settings-page .billing-status-active{background:var(--green-2);color:var(--green)}
account-settings-page .billing-status-ending,account-settings-page .billing-status-attention{background:var(--amber-2);color:var(--amber)}
account-settings-page .billing-status-past{color:var(--ink-3)}
account-settings-page .billing-renewal{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
account-settings-page .billing-price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
account-settings-page .billing-price__qty{font-size:12.5px;font-weight:500;color:var(--ink-3)}
account-settings-page .billing-panel-footer{padding:12px 20px;border-top:1px solid var(--line-2)}
account-settings-page .billing-panel__notice{padding:0 20px 16px}
account-settings-page .billing-empty{padding:24px 20px;color:var(--ink-3);font-size:14px}
account-settings-page .billing-readback-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 20px;border-bottom:1px solid var(--line-2);background:var(--amber-2);font-size:13px;font-weight:600;color:var(--amber)}
account-settings-page .billing-readback-notice .rb-btn{margin-left:auto}

/* Disclosures inside a card (closet allowance, past subscriptions) */
account-settings-page .billing-details{padding:12px 20px;border-top:1px solid var(--line-2)}
account-settings-page .billing-details>summary{display:flex;align-items:center;gap:8px;min-height:28px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--ink-2)}
account-settings-page .billing-details>summary::-webkit-details-marker{display:none}
account-settings-page .billing-details>summary::before{content:"";width:7px;height:7px;margin:0 3px 2px 1px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease)}
account-settings-page .billing-details[open]>summary::before{transform:rotate(45deg);margin-bottom:5px}
account-settings-page .billing-details>summary:hover{color:var(--ink)}
account-settings-page .billing-details>summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
account-settings-page .billing-details[open]>summary{margin-bottom:12px}
account-settings-page .billing-details .billing-subscription{padding-inline:0}
account-settings-page .billing-details__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--ink-2)}
account-settings-page .legacy-capacity-form{display:grid;grid-template-columns:minmax(0,220px) auto;align-items:end;gap:8px 12px}
account-settings-page .legacy-capacity-form__help{grid-column:1/-1}

/* ---------- Plans */
account-settings-page .billing-family+.billing-family{border-top:1px solid var(--line-2)}
account-settings-page .billing-family__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 20px 6px}
account-settings-page .billing-family__title{margin:0;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
account-settings-page .billing-family__head>.rb-actions{margin-left:auto}
account-settings-page .billing-family__notice{padding:0 20px 14px}
account-settings-page .billing-plan-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px;min-height:64px;padding:12px 20px;scroll-margin-top:24px}
account-settings-page .billing-plan-row+.billing-plan-row{border-top:1px solid var(--line-2)}
account-settings-page .billing-plan-row h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
account-settings-page .billing-plan-row p{margin:2px 0 0;font-size:13px;color:var(--ink-3);text-wrap:pretty}
account-settings-page .billing-plan-row__features{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ink-3)}
account-settings-page .billing-plan-row.is-selected{background:var(--tint);box-shadow:inset 3px 0 0 var(--ink)}
account-settings-page .billing-plan-row:focus{outline:0}
account-settings-page .billing-plan-choice{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
account-settings-page .billing-plan-row__price{min-width:84px;font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);white-space:nowrap}
account-settings-page .billing-plan-note{font-size:13px;color:var(--ink-3);text-align:right}
account-settings-page .billing-plan-legacy{margin:0;padding:0 20px 8px}
account-settings-page .billing-disclosure>summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 20px;cursor:pointer;list-style:none}
account-settings-page .billing-disclosure>summary::-webkit-details-marker{display:none}
account-settings-page .billing-disclosure>summary:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:14px}
account-settings-page .billing-disclosure__chev{margin-left:auto;color:var(--ink-3);transition:transform .2s var(--ease)}
account-settings-page .billing-disclosure[open]>summary{border-bottom:1px solid var(--line-2)}
account-settings-page .billing-disclosure[open] .billing-disclosure__chev{transform:rotate(180deg)}
account-settings-page .billing-schedule{margin:0}

/* ---------- Archive card (renderArchiveBillingCard) */
account-settings-page .archive-billing__body{display:grid;gap:8px;justify-items:start;color:var(--ink-2)}

/* ---------- Automation accounts */
account-settings-page .account-count strong{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
account-settings-page .account-allowance{display:grid;gap:12px}
account-settings-page .account-add{display:grid;gap:6px;max-width:560px}
account-settings-page .account-add__row{display:flex;gap:8px}
account-settings-page .account-add__row>.input-group{flex:1;min-width:0}
account-settings-page .account-limit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 14px;border-radius:12px;background:var(--well)}
account-settings-page .account-limit__copy{flex:1 1 260px;min-width:0;display:grid;gap:2px;font-size:14px;color:var(--ink)}
account-settings-page .account-locked{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;color:var(--ink-2)}
account-settings-page .account-locked>p{flex:1 1 320px}
account-settings-page .account-list{border-top:1px solid var(--line-2)}
account-settings-page .account-list__title{margin:0;padding:12px 20px 0;font-size:13px;font-weight:700;color:var(--ink-3)}
account-settings-page .account-rows{margin:0;padding:0;list-style:none}
account-settings-page .account-row{flex-wrap:nowrap}
account-settings-page .account-row .rb-row__title{white-space:normal}
account-settings-page .account-row__meta{display:flex;flex-wrap:wrap;column-gap:0}
account-settings-page .account-row__meta>span{font-variant-numeric:tabular-nums}
account-settings-page .account-list-empty{border-top:1px solid var(--line-2)}

/* ---------- Sign-in and security */
account-settings-page .account-form{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:12px 32px}
account-settings-page .account-form__intro{display:grid;align-content:start;gap:4px}
account-settings-page .account-form__title{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
account-settings-page .account-form__intro strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
account-settings-page .account-form__main{display:grid;gap:12px;max-width:560px}
account-settings-page .account-form__inline{display:flex;align-items:flex-end;gap:8px}
account-settings-page .account-form__inline>.rb-field{flex:1}
account-settings-page .account-msg{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600}
account-settings-page .account-msg.d-none{display:none}
account-settings-page .account-msg .rb-icon{flex:none;margin-top:2px}
account-settings-page .account-msg--err{background:var(--red-2);color:var(--red)}
account-settings-page .account-msg--ok{background:var(--green-2);color:var(--green)}

/* ---------- Remove-account dialog progress */
.delete-progress{display:grid;justify-items:center;gap:8px;padding:12px 0 4px;text-align:center;color:var(--ink)}
.delete-progress__spin{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--well);border-top-color:var(--ink);animation:rb-spin .8s linear infinite}
.delete-progress.is-done .delete-progress__spin{display:none}

/* ---------- Checkout hand-off overlay (shown while Stripe checkout opens) */
.rb-checkout-start{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:var(--bg);color:var(--ink);text-align:center;font:600 15px/1.5 var(--font)}
.rb-checkout-start__spin{display:inline-block;width:28px;height:28px;border-radius:50%;border:3px solid var(--well);border-top-color:var(--ink);animation:rb-spin .8s linear infinite}
.rb-checkout-start__title{margin:18px 0 4px}
.rb-checkout-start__note{margin:0;font-weight:400;font-size:13px;color:var(--ink-3)}

@media (max-width:767.98px){
  account-settings-page .rb-card .billing-subscription{flex-wrap:wrap;gap:4px 12px;padding:14px 16px}
  account-settings-page .billing-product-icon{display:none}
  account-settings-page .billing-subscription-main{flex-basis:100%}
  account-settings-page .billing-price{text-align:left;font-size:14px}
  account-settings-page :is(.billing-details,.billing-panel-footer,.billing-readback-notice,.billing-family__head,.billing-plan-row){padding-left:16px;padding-right:16px}
  account-settings-page :is(.billing-panel__notice,.billing-family__notice){padding-left:16px;padding-right:16px}
  account-settings-page .billing-plan-row{grid-template-columns:minmax(0,1fr)}
  account-settings-page .billing-plan-choice{justify-content:space-between}
  account-settings-page .billing-plan-row__price{text-align:left;min-width:0}
  account-settings-page .account-list__title{padding-inline:16px}
  account-settings-page .account-row{flex-wrap:wrap;align-items:flex-start}
  account-settings-page .account-row .rb-row__end{margin-left:52px}
  account-settings-page .account-form{grid-template-columns:minmax(0,1fr)}
  account-settings-page .account-form__inline,account-settings-page .account-add__row{flex-direction:column;align-items:stretch}
  account-settings-page .legacy-capacity-form{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.delete-progress__spin,.rb-checkout-start__spin{animation-duration:2.4s}}