/* ATS Perfect — Account pages (profile.html, billing.html)
   Builds on css/my-resumes-page.css for the tokens, header, account menu, band
   and toast, so the pages read as one app. Only the settings layout lives here. */

.account-main{padding:0 0 64px}
.account-main [hidden]{display:none!important}
.set-value .hint a{color:var(--g-700);text-decoration:underline;text-decoration-color:var(--g-300);text-underline-offset:3px}
.set-value .hint a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.account-band{padding-bottom:80px}
.band-person{display:flex;align-items:center;gap:16px;min-width:0}
.band-avatar{width:56px;height:56px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:20px;font-weight:600;letter-spacing:.02em}
.band-person .page-head h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font-size:14px;color:#BAC3D1}
.band-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px 3px 0;border-radius:50%;background:#667085;vertical-align:middle}
.band-meta [hidden]{display:none}

/* ── Layout: section links on the left, settings on the right ── */
.account-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start;margin-top:-48px}
.account-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.account-nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r);font-size:14px;font-weight:500;color:var(--g-600);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.account-nav a svg{color:var(--g-400);flex-shrink:0}
.account-nav a:hover{background:var(--g-100);color:var(--ink)}
.account-nav a.is-active{background:var(--g-100);color:var(--ink)}
.account-nav a.is-active svg{color:var(--green)}
.account-nav .nav-sep{height:1px;margin:6px 4px;background:var(--line)}
.account-nav a.nav-danger:hover{background:var(--red-50);color:var(--red)}
.account-nav a.nav-danger:hover svg{color:var(--red)}
.settings{display:flex;flex-direction:column;gap:24px;min-width:0}

/* ── Settings card ── */
.set-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);scroll-margin-top:88px}
.set-card:first-child{box-shadow:var(--shadow-md)}
.set-head{padding:20px 24px 16px}
.set-head h2{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.set-head p{margin-top:2px;font-size:14px;color:var(--muted)}
.set-row{display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:8px 24px;min-height:64px;padding:14px 24px;border-top:1px solid var(--line)}
.set-label{font-size:14px;font-weight:500;color:var(--g-700)}
.set-value{min-width:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.set-value .hint{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--muted)}
.set-value .hint.ok{color:var(--green-700)}
.set-value .hint.err{color:var(--red)}
.set-action{display:flex;gap:8px;justify-self:end}
.set-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid var(--line);background:var(--g-50);border-radius:0 0 var(--r-lg) var(--r-lg);font-size:13px;color:var(--muted)}
.set-foot a:not(.btn){color:var(--g-700);font-weight:500;text-decoration:underline;text-decoration-color:var(--g-300);text-underline-offset:3px}
.set-foot a:not(.btn):hover{color:var(--ink);text-decoration-color:var(--ink)}
.skeleton{display:inline-block;width:140px;height:12px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--g-100),var(--g-200),var(--g-100));background-size:200% 100%;animation:shimmer 1.2s linear infinite;vertical-align:middle}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--g-700);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;box-shadow:var(--shadow);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--g-50);border-color:var(--g-400);color:var(--ink)}
.btn:disabled{opacity:.55;cursor:default;background:#fff;border-color:var(--line-2);color:var(--g-700)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.btn-primary:disabled{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-danger{background:#fff;border-color:#FDA29B;color:var(--red)}
.btn-danger:hover{background:var(--red-50);border-color:var(--red);color:var(--red)}
.btn-danger-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger-solid:hover{background:#912018;border-color:#912018;color:#fff}
.btn-danger-solid:disabled{background:var(--red);border-color:var(--red);color:#fff}
.btn-ghost{border-color:transparent;background:none;box-shadow:none;color:var(--g-600)}
.btn-ghost:hover{background:var(--g-100);border-color:transparent}

/* ── Name editing ── */
.name-form{display:flex;gap:8px;align-items:center}
.name-form[hidden]{display:none}
.text-input{width:100%;max-width:320px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;font-size:14px;color:var(--ink);box-shadow:var(--shadow);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.text-input:focus{outline:none;border-color:var(--navy);box-shadow:var(--focus)}

/* ── Plan ── */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;vertical-align:middle;border:1px solid var(--line);background:var(--g-50);color:var(--g-600)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-green{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}
.badge-amber{background:var(--amber-50);border-color:var(--amber-100);color:var(--amber)}
.badge-blue{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue)}
.badge-red{background:var(--red-50);border-color:var(--red-100);color:var(--red)}
.plan-name{font-weight:600;margin-right:8px}
.notice{display:flex;gap:10px;margin:0 24px 16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--g-50);font-size:13px;line-height:19px;color:var(--g-700)}
.notice[hidden]{display:none}
.notice svg{flex-shrink:0;margin-top:1px}
.notice b{font-weight:600;color:var(--ink)}
.notice-amber{background:var(--amber-50);border-color:var(--amber-100)}
.notice-amber svg{color:var(--amber)}
.notice-blue{background:var(--blue-50);border-color:var(--blue-100)}
.notice-blue svg{color:var(--blue)}

/* ── Danger zone ── */
.set-card.danger{border-color:var(--red-100)}
.danger .set-row{border-top-color:var(--red-100)}
.danger-list{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:20px;color:var(--muted)}

/* ── Dialog ── */
.dialog-backdrop{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,28,53,.56);backdrop-filter:blur(2px)}
.dialog-backdrop.open{display:flex}
.dialog{width:100%;max-width:440px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);animation:dialog-in var(--dur) var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.dialog-body{padding:24px 24px 8px}
.dialog-icon{width:40px;height:40px;margin-bottom:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--red-50);border:6px solid #FEF3F2;box-sizing:content-box;color:var(--red)}
.dialog h2{font-size:18px;line-height:28px;font-weight:600;color:var(--ink)}
.dialog p{margin-top:4px;font-size:14px;line-height:20px;color:var(--g-600)}
.dialog .field{margin-top:20px}
.dialog .field label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:var(--g-700)}
.dialog .text-input{max-width:none;height:40px}
.dialog-error{min-height:20px;margin-top:8px;font-size:13px;color:var(--red)}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px 24px}
.dialog-actions .btn{height:40px;padding:0 16px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Billing: actions, cards, invoices ── */
.set-foot .foot-actions{display:flex;gap:8px;flex-shrink:0}
.pay-row{grid-template-columns:auto minmax(0,1fr) auto}
.brand-chip{display:inline-flex;align-items:center;justify-content:center;width:46px;height:30px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--g-600);box-shadow:var(--shadow)}
.brand-chip.visa{color:#1A1F71;font-size:12px;font-style:italic;letter-spacing:0}
.brand-chip.mastercard{color:#EB001B}
.brand-chip.amex{color:#006FCF}
.brand-chip.discover{color:#E65C00}
.pay-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.empty-line{padding:20px 24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.empty-line b{display:block;margin-bottom:2px;font-weight:500;color:var(--g-700)}
.empty-line.err{color:var(--red)}
.inv-table{width:100%;border-collapse:collapse;font-size:14px}
.inv-table th{padding:10px 24px;border-top:1px solid var(--line);background:var(--g-50);font-size:12px;line-height:16px;font-weight:500;text-align:left;color:var(--muted);white-space:nowrap}
.inv-table td{padding:14px 24px;border-top:1px solid var(--line);color:var(--g-700);vertical-align:middle}
.inv-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-table td.num{color:var(--ink);font-weight:500}
.inv-table .date{white-space:nowrap;color:var(--ink)}
.inv-table .links{text-align:right;white-space:nowrap}
.inv-table .links a{font-weight:500;color:var(--g-700);text-decoration:underline;text-decoration-color:var(--g-300);text-underline-offset:3px}
.inv-table .links a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.inv-table .links a+a{margin-left:12px}
.inv-sub{display:block;font-size:12px;color:var(--muted)}

/* ── Footer ── */
.account-footer{max-width:1200px;margin:0 auto;padding:0 32px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:13px;color:var(--muted)}
.account-footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.account-footer a:hover{color:var(--ink)}

/* ── Small screens ── */
@media (max-width:900px){
  .account-layout{grid-template-columns:1fr;margin-top:-48px}
  .account-nav{display:none}
  .account-footer{padding:0 20px 32px}
}
@media (max-width:640px){
  .account-band{padding:28px 0 72px}
  .band-avatar{width:48px;height:48px;font-size:17px}
  .band-person{gap:12px}
  .band-inner .btn-new-resume{display:none}
  .band-meta{flex-direction:column;align-items:flex-start;gap:2px;font-size:13px}
  .band-meta span+span::before{display:none}
  .band-person{align-items:flex-start}
  .band-avatar{margin-top:2px}
  .set-head{padding:16px 16px 12px}
  .set-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label action" "value value";padding:14px 16px;min-height:0;row-gap:4px}
  .set-row.no-action{grid-template-areas:"label label" "value value"}
  .set-label{grid-area:label;font-size:13px;color:var(--muted)}
  .set-value{grid-area:value}
  .set-action{grid-area:action}
  .set-row.stack{grid-template-areas:"label" "value" "action";grid-template-columns:1fr}
  .set-row.stack .set-action{justify-self:stretch;margin-top:8px}
  .set-row.stack .set-action .btn{flex:1}
  .name-form{flex-wrap:wrap}
  .name-form .text-input{max-width:none;flex:1 1 100%}
  .text-input{font-size:16px}   /* below 16px, iOS zooms in on focus */
  .notice{margin:0 16px 14px}
  .set-foot{padding:14px 16px;flex-direction:column;align-items:stretch;text-align:left}
  .set-foot .btn{width:100%}
  .set-foot .foot-actions{flex-direction:column-reverse}
  .pay-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip value" "chip action";padding:14px 16px}
  .pay-row .brand-chip{grid-area:chip;align-self:start}
  .pay-row .set-action{grid-area:action;justify-self:start}
  .pay-badges{justify-content:flex-start}
  .empty-line{padding:16px}
  .inv-table thead{display:none}
  .inv-table,.inv-table tbody,.inv-table tr,.inv-table td{display:block;width:100%}
  .inv-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc amount" "date status" "links links";gap:2px 12px;padding:14px 16px;border-top:1px solid var(--line)}
  .inv-table td{padding:0;border:0}
  .inv-table .c-desc{grid-area:desc;color:var(--ink);font-weight:500}
  .inv-table .c-amount{grid-area:amount}
  .inv-table .c-date{grid-area:date;font-size:13px;color:var(--muted)}
  .inv-table .c-status{grid-area:status;text-align:right}
  .inv-table .links{grid-area:links;text-align:left;margin-top:6px}
  .dialog-actions{flex-direction:column-reverse}
  .dialog-actions .btn{width:100%}
  .account-footer{padding:0 16px 24px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.dialog{animation:none}.skeleton{animation:none}}

/* ── One menu for Account and Billing, the same on both pages ── */
.account-nav .nav-group{margin:0;padding:8px 10px 4px;font-size:12px;line-height:16px;font-weight:600;color:var(--g-500)}
.account-nav .nav-group:first-child{padding-top:4px}
/* phones: the side menu is hidden, so a two-way switch moves between the pages */
.account-tabs{display:none}
@media (max-width:900px){
  .account-tabs{position:relative;z-index:1;display:flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
  .account-tabs a{flex:1;display:flex;align-items:center;justify-content:center;height:40px;border-radius:var(--r);font-size:15px;font-weight:600;color:var(--g-600);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
  .account-tabs a:hover{color:var(--ink)}
  .account-tabs a[aria-current="page"]{background:var(--navy);color:#fff}
}