/* ==========================================================================
   Sign-in, sign-up and the customer account. Built on site.css tokens.
   Signature: the sign-up progress drawn as a video scrub bar (Account → Email
   → Pro), the same bar as in the sign-up emails. The flame orange appears only
   as its playhead.
   ========================================================================== */

.acct-main { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 104px); }

/* ---------- Scrub bar ---------- */
.steps { display: grid; gap: 10px; margin-bottom: 26px; }
.steps__track {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: var(--lilac);
}
.steps__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--violet);
}
.steps__head {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--flame);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--flame) 20%, transparent);
}
.steps__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font: 500 11px/1.4 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a91ad;
}
.steps__labels li:nth-child(2) { text-align: center; }
.steps__labels li:nth-child(3) { text-align: right; }
.steps__labels .is-done { color: var(--violet-deep); }
.steps__labels .is-done::before { content: "✓ "; }
.steps__labels .is-current { color: var(--ink); font-weight: 600; }

.steps--dark .steps__track { background: rgba(225, 210, 252, .22); }
.steps--dark .steps__fill { background: var(--lilac); }
.steps--dark .steps__labels { color: rgba(225, 210, 252, .55); }
.steps--dark .steps__labels .is-done { color: var(--lilac); }
.steps--dark .steps__labels .is-current { color: #fff; }

/* ---------- Sign-in and sign-up ---------- */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 0;
  max-width: 1040px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.auth--single { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
}

.auth-card { padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; }
.auth-card__title {
  font: 700 clamp(26px, 3.4vw, 34px)/1.15 var(--f-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.auth-card__lede { margin-top: 12px; color: var(--muted); max-width: 46ch; }
.auth-card__switch { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }

.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 18px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--lilac-soft);
  font-weight: 600;
  font-size: 15px;
}
.plan-chip span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font: 500 10.5px/1.5 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-form { display: grid; gap: 18px; margin-top: 26px; }
.auth-form__legal { font-size: 14px; color: var(--muted); }
.auth-form__submit { justify-self: start; min-width: 200px; }
@media (max-width: 520px) { .auth-form__submit { justify-self: stretch; } }

.field__labels { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__labels label { font-size: 14.5px; font-weight: 600; }
.field__labels a { font-size: 14px; }
.field__hint { margin-top: -8px; font-size: 13.5px; color: var(--muted); }
.field .field__hint { margin-top: 0; }
.field__error { font-size: 14px; color: #b8441a; }
.field__error:empty { display: none; }
.field__hint.is-ok { color: #15803d; }
.field__hint.is-off { color: #b8441a; }
.field__hint:empty { display: none; }

/* Password rules, ticked off while typing (account.js) */
.pw-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 4px 16px;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--muted);
}
.pw-rules li { display: flex; align-items: center; gap: 8px; }
.pw-rules li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #c9bfe0;
}
.pw-rules li.is-met { color: var(--ink); }
/* After the password field was changed and left: rules not met yet are red. */
.pw-rules.is-checked li:not(.is-met) { color: #b8441a; }
.pw-rules.is-checked li:not(.is-met)::before {
  background: #b8441a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.6 4.6l4.8 4.8M9.4 4.6l-4.8 4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: none;
}
.pw-rules li.is-met::before {
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: none;
}

.notice { margin-top: 20px; padding: 12px 16px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; }
.notice--ok { background: #ecfbf2; color: #14532d; }

.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }

.linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--violet-deep);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.linklike:hover { color: var(--violet); }

/* The night panel beside the forms */
.auth-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(128, 69, 244, .45), transparent 60%),
    var(--night);
  color: #ece4ff;
}
.auth-aside .steps { margin-bottom: 4px; }
.auth-aside__title { font: 600 22px/1.25 var(--f-display); color: #fff; letter-spacing: -.01em; }
.auth-aside__list { display: grid; gap: 0; border-top: 1px solid rgba(225, 210, 252, .16); }
.auth-aside__list div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(225, 210, 252, .16); }
.auth-aside__list dt { font: 500 11px/1.9 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lilac); }
.auth-aside__list dd { font-size: 15px; line-height: 1.5; }
.auth-aside__foot { margin-top: auto; font-size: 14px; color: rgba(236, 228, 255, .7); }
.auth-aside__foot a { color: #fff; }
@media (max-width: 860px) { .auth-aside__foot { margin-top: 0; } }

/* ---------- Account ---------- */
/* Sidebar from 900px up; below it the menu is a scrolling row of tabs above the page. */
.acct-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .acct-area { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; } }
.acct-side { display: grid; gap: 16px; }
@media (min-width: 900px) { .acct-side { position: sticky; top: 96px; } }
.acct-side__nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 4px; }
.acct-side__nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .acct-side__nav { flex-direction: column; overflow: visible; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } }
.acct-side__item {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 9px 12px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.acct-side__item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--violet-deep); }
.acct-side__item:hover { background: var(--lilac-soft); color: var(--ink); }
.acct-side__item[aria-current="page"] { background: var(--night); color: #fff; }
.acct-side__item[aria-current="page"] svg { color: #fff; }
.acct-side__count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--lilac-soft); color: var(--violet-deep); font-size: 12.5px; font-weight: 600; text-align: center; }
.acct-side__item[aria-current="page"] .acct-side__count { background: rgba(255, 255, 255, .18); color: #fff; }
.acct-side__group { display: none; }
@media (min-width: 900px) {
  .acct-side__group { display: block; margin: 10px 12px 2px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .acct-side__out { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .acct-side__out .acct-side__item { width: 100%; }
}
.acct-side__who { display: none; }
@media (min-width: 900px) { .acct-side__who { display: block; padding: 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; } .acct-side__who strong { color: var(--ink); font-weight: 600; } }
.acct-content { min-width: 0; }
.acct-lede { color: var(--muted); font-size: 15px; max-width: 70ch; }
.acct-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.acct-section__head a { font-size: 14.5px; font-weight: 600; }

/* Receipts: date, what, amount, status, links. */
.panel--flush { padding: 0; overflow: hidden; }
.receipts { display: grid; }
.receipt { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px 18px; padding: 12px 20px; font-size: 14.5px; }
.receipt + .receipt { border-top: 1px solid var(--line); }
.receipt__date { color: var(--muted); }
.receipt__no { display: block; font-size: 12px; color: var(--muted); }
.receipt__amount { font-weight: 600; }
.receipt__links { display: flex; gap: 12px; font-weight: 600; }
@media (max-width: 640px) {
  .receipt { grid-template-columns: minmax(0, 1fr) auto; }
  .receipt__date { grid-column: 1 / -1; }
  .receipt__links { grid-column: 1 / -1; }
}
.acct { display: grid; gap: 28px; }
.acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.acct-head__eyebrow { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep); }
.acct-head__title { margin-top: 8px; font: 700 clamp(28px, 4vw, 40px)/1.1 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }


.next-step {
  padding: clamp(22px, 4vw, 34px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.next-step .steps { margin-bottom: 22px; max-width: 520px; }
.next-step__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.next-step__body > div { flex: 1 1 380px; min-width: 0; }
.next-step__title { font: 600 22px/1.25 var(--f-display); letter-spacing: -.01em; margin-bottom: 6px; }
.next-step__body p { color: var(--muted); max-width: 60ch; }

/* Four panels: one column on phones, 2 × 2, then one row on wide screens. */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .acct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.panel--quiet { background: var(--lilac-soft); border-color: transparent; }
.panel__title { font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep); }
.panel__empty { color: var(--muted); font-size: 15.5px; }
.panel__link { margin-top: auto; font-size: 15px; font-weight: 600; }
.download__name { font-weight: 700; font-size: 18px; color: var(--ink); }
.acct-section { display: grid; gap: 14px; }
.download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.facts--row { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.download__meta { font: 500 13px/1.5 var(--f-mono); color: var(--muted); }
.panel > p { color: var(--muted); }

.facts { display: grid; gap: 10px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { font-weight: 600; overflow-wrap: anywhere; }

.settings { display: grid; gap: 16px; max-width: 760px; }
.settings .panel { padding: clamp(22px, 4vw, 32px); }
.settings .panel__title { font: 600 20px/1.3 var(--f-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.settings .auth-form { margin-top: 6px; }
.settings .btn { justify-self: start; }
.panel--danger { border-color: #f3d1c4; }

.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--primary:disabled:hover { background: var(--violet); }

/* The plugin's animated logo loader (as in the admin app), while the next page loads. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: blur(2px);
}
.page-loader[hidden] { display: none; }
.page-loader img { width: 96px; height: 96px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn--danger { background: #b8441a; color: #fff; }
.btn--danger:hover { background: #963613; color: #fff; }

/* ---------- Admin ---------- */
.acct-head__eyebrow a { color: inherit; }
.admin-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.admin-totals div { padding: 16px 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.admin-totals dt { font-size: 13.5px; color: var(--muted); }
.admin-totals dd { font: 700 28px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }

.admin-list { gap: 18px; }
.admin-list__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.admin-search { display: flex; align-items: center; gap: 8px; flex: 1 1 340px; max-width: 480px; justify-content: flex-end; }
.admin-search .btn { flex: none; }
.admin-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.admin-search input:focus { outline: none; border-color: var(--violet); background: #fff; }
.admin-search__clear { font-size: 14px; }

.admin-table { overflow-x: auto; margin: 0 -24px; }
.admin-table table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.admin-table th, .admin-table td { padding: 12px 24px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.admin-table th { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.admin-table td a { font-weight: 600; }
.admin-table .mono, .facts .mono { font-family: var(--f-mono); font-size: 13.5px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fdf3e2; color: #8a4b00; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tag--ok { background: #ecfbf2; color: #14532d; }
.tag--admin { background: var(--night); color: #fff; }
.tag--plain { background: var(--lilac-soft); color: var(--violet-deep); }

.admin-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--muted); }
.admin-pages span:first-child, .admin-pages span:last-child { opacity: .5; }

.admin-grid { align-items: start; }

.notice--warn { background: #fdf3e2; color: #6b3a00; }

/* ---------- Licenses (compact cards) ---------- */
.licenses { display: grid; gap: 12px; }
.lic { container-type: inline-size; display: grid; gap: 10px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.lic__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lic__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lic__plan { font: 600 18px/1.25 var(--f-display); letter-spacing: -.01em; }
.lic__actions { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; font-weight: 600; }
.lic__meta { margin-top: -4px; color: var(--muted); font-size: 14.5px; }
.lic__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 28px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Key and sites side by side when the card itself is wide enough (it is narrower inside admin panels). */
@container (min-width: 600px) { .lic__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.lic__label { display: block; margin-bottom: 4px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lic__key code, .lic__full { font-family: var(--f-mono); font-size: 14px; letter-spacing: .02em; overflow-wrap: anywhere; }
.lic__reveal summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; cursor: pointer; list-style: none; }
.lic__reveal summary::-webkit-details-marker { display: none; }
.lic__reveal summary span { font-size: 13.5px; color: var(--violet-deep); text-decoration: underline; text-underline-offset: .2em; }
.lic__reveal[open] summary { display: none; }
.lic__full { display: inline-block; padding: 6px 10px; border-radius: var(--r-sm); background: var(--lilac-soft); user-select: all; }
.lic__note { padding: 8px 12px; border-radius: var(--r-sm); background: #fdf3e2; color: #6b3a00; font-size: 14px; }
.lic__note a { color: inherit; font-weight: 600; }
.lic__sites { display: grid; gap: 2px; align-content: start; }
.lic__site { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 0; font-size: 14px; }
.lic__site + .lic__site { border-top: 1px solid var(--line); }
.lic__site .mono { font-family: var(--f-mono); font-size: 13.5px; font-weight: 500; }
.lic__seen { color: var(--muted); font-size: 13px; margin-right: auto; }
.lic__site .linklike { font-size: 13.5px; }
.lic__empty { color: var(--muted); font-size: 14px; }
.lic--expired, .lic--revoked { background: var(--paper); }
.lic--expired .lic__plan, .lic--revoked .lic__plan { color: var(--muted); }

/* Expired and revoked licenses, folded away. */
.lic-archive > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--violet-deep); }
.lic-archive > summary::-webkit-details-marker { display: none; }
.lic-archive > summary::before { content: "▸"; font-size: 12px; transition: transform .15s; }
.lic-archive[open] > summary::before { transform: rotate(90deg); }
.lic-archive > .licenses { margin-top: 8px; }

.lic__admin { margin-top: -6px; }
.tag--off { background: #fdecea; color: #8a1f11; }
.admin-licenses { gap: 16px; }
.issue-form { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.issue-form__title { font: 600 17px/1.3 var(--f-display); }
.issue-form select { min-height: 48px; }
/* Next to the account sidebar: account and role on the left, the licenses (two rows high) on the right. */
@media (min-width: 1100px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); grid-template-rows: auto 1fr; }
  .admin-grid > .admin-licenses { grid-column: 2; grid-row: 1 / span 2; }
}
.lic__admin summary { display: inline; cursor: pointer; list-style: none; }
.lic__admin summary::-webkit-details-marker { display: none; }
.revoke-form { margin-top: 12px; padding: 16px; border: 1px solid #f3d1c4; border-radius: var(--r-md); }
.revoke-form .btn { justify-self: start; }

/* ---------- Buy ---------- */
.buy__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 40px; }
@media (max-width: 760px) { .buy__grid { grid-template-columns: minmax(0, 1fr); } }
.buy__summary { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--r-md); background: var(--lilac-soft); }
.buy__summary dt { font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.buy__summary dd { font-weight: 600; }
.buy__form { display: grid; gap: 14px; align-content: start; margin-top: 0; }
.buy__form p { color: var(--muted); }
.buy__form .check span { color: var(--ink); }
.buy__form .btn { justify-self: start; }
.lic__badges { display: flex; align-items: center; gap: 14px; }
.lic__billing { font-size: 14px; font-weight: 600; }
.lic__note a { color: inherit; font-weight: 600; }