/* Login, magic-link callback and account pages, in the Face Rating Lab studio system (DESIGN.md).
   Everything is scoped under .page-auth or .page-account so nothing here changes the shared
   base classes. Colours, radii and shadows come from the tokens in base.css. */

/* =====================================================================
   Auth pages (login + callback): one calm card on a quiet mist page
   ===================================================================== */
.page-auth .auth-wrap {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(32px, 7vw, 88px) var(--gutter) clamp(40px, 7vw, 88px);
  background:
    radial-gradient(640px 420px at 50% 32%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, var(--mist-2) 0%, var(--mist) 100%);
}
.page-auth .auth-shell { width: 100%; max-width: 440px; }

.page-auth .auth-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(14, 35, 41, .07);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.page-auth .auth-body { padding: clamp(28px, 7vw, 40px) clamp(20px, 6vw, 36px) clamp(24px, 6vw, 32px); }
.page-auth .auth-card-foot {
  padding: 14px clamp(20px, 6vw, 36px) 16px;
  background: var(--mist-2);
  border-top: 1px solid var(--line-2);
}
.page-auth .auth-card-foot .guarantee-line { margin-top: 0; }

.page-auth .auth-mark { width: 52px; height: 52px; margin: 0 auto 20px; }

.page-auth .auth-title {
  font-size: clamp(1.6rem, 5.4vw, 2rem);
  font-weight: 650; letter-spacing: -.035em; line-height: 1.12;
  text-align: center;
}
.page-auth .auth-title:focus { outline: none; }
.page-auth .auth-sub {
  margin: 10px auto 0; max-width: 34ch;
  font-size: .97rem; line-height: 1.55; color: var(--muted); text-align: center;
}
.page-auth .auth-sub strong { color: var(--ink); font-weight: 650; }
.page-auth .auth-addr { overflow-wrap: anywhere; }
.page-auth .auth-chip {
  width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 8px 14px;
  border-radius: var(--r-pill); background: var(--mist-2); border: 1px solid var(--line);
  font-size: .94rem; font-weight: 650; line-height: 1.35; color: var(--ink); text-align: center;
}

.page-auth .auth-form { margin-top: 28px; display: grid; gap: 16px; }
.page-auth .auth-form .field-hint { line-height: 1.45; }
.page-auth .auth-error { margin-top: -4px; }
.page-auth .auth-form .btn { margin-top: 2px; }

.page-auth .auth-points {
  list-style: none; margin: 28px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--line-2);
  display: grid; gap: 16px;
}
.page-auth .auth-points li { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.page-auth .auth-points .icon-tile { width: 32px; height: 32px; border-radius: 10px; }
.page-auth .auth-points .icon-tile .icon { width: 17px; height: 17px; }
.page-auth .auth-points strong { color: var(--ink); font-weight: 650; }
.page-auth .auth-points .link { overflow-wrap: anywhere; }
.page-auth .auth-cta { margin-top: 28px; }

/* round icon above a step title (sent, confirm, error) */
.page-auth .auth-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--teal-50); color: var(--teal-700);
  box-shadow: inset 0 0 0 1px var(--teal-100);
  animation: m-pop var(--t-slow) var(--ease-pop) both;
}
.page-auth .auth-icon .icon { width: 26px; height: 26px; }
.page-auth .auth-icon.is-bad { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
/* the logo mark already introduces the card: keep the step icon only where the mark is hidden */
.page-auth [data-login] .auth-mark:has(~ .auth-sent:not([hidden])) { display: none; }

/* sent state */
.page-auth .auth-sent { animation: auth-step-in var(--t-slow) var(--ease-out) both; }
.page-auth .auth-tips {
  list-style: none; margin: 24px 0 0; padding: 16px 18px;
  background: var(--mist-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  display: grid; gap: 10px; font-size: .9rem; line-height: 1.5; color: var(--ink-2);
}
.page-auth .auth-tips li { position: relative; padding-left: 18px; }
.page-auth .auth-tips li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(0, 162, 173, .14);
}
.page-auth .auth-sent .auth-error { margin-top: 16px; }
.page-auth .auth-status { margin-top: 16px; font-size: .9rem; font-weight: 600; color: var(--mint-700); text-align: center; }
.page-auth .auth-status:empty { display: none; }
.page-auth [data-resend] { margin-top: 20px; font-variant-numeric: tabular-nums; }
.page-auth .auth-textbtn {
  display: block; margin: 8px auto 0; padding: 10px 8px;
  background: none; border: 0; cursor: pointer;
  font-weight: 600; font-size: .92rem; color: var(--teal-700);
  text-decoration: underline; text-decoration-color: rgba(0, 162, 173, .4); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.page-auth .auth-textbtn:hover { color: var(--teal-800); text-decoration-color: currentColor; }
.page-auth .auth-textbtn:focus-visible { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 2px; border-radius: var(--r-sm); }

.page-auth .auth-foot {
  margin-top: 22px; text-align: center; font-size: .9rem; line-height: 1.6; color: var(--muted);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px;
}
.page-auth .auth-foot .link-quiet { font-size: .9rem; white-space: nowrap; }

/* callback */
.page-callback .auth-callback { text-align: center; }
.page-callback .auth-body { padding-top: clamp(32px, 7vw, 44px); }
.page-callback .auth-spinner { position: relative; width: 76px; height: 76px; margin: 0 auto 20px; }
.page-callback .auth-spinner-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: auth-spin 1.2s linear infinite; }
.page-callback .auth-spinner-mark { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); }
.page-callback .spin-track { fill: none; stroke: var(--line-2); stroke-width: 2.5; }
.page-callback .spin-arc { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.page-callback .auth-slow { margin-top: 16px; font-size: .9rem; color: var(--muted); }
.page-callback noscript .form-error { margin-top: 16px; }
.page-callback .auth-foot-in { margin-top: 18px; font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.page-callback [data-cb="error"], .page-callback [data-cb="confirm"] { animation: auth-step-in var(--t-slow) var(--ease-out) both; }

/* =====================================================================
   Account page: white header, quiet mist body with white panels
   ===================================================================== */
.page-account .acct-hero {
  background: var(--white);
  padding-block: clamp(28px, 6vw, 56px) clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--line-2);
}
.page-account .acct-hero-inner { display: flex; }
.page-account .acct-hero-text { flex: 1 1 auto; min-width: 0; }
.page-account .acct-title { margin-top: 14px; font-size: var(--fs-h1); }
.page-account .acct-who {
  margin-top: 16px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 14px;
  color: var(--muted); font-size: .92rem; min-width: 0;
}
.page-account .acct-email {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100% - 84px);
  height: 34px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  background: var(--mist-2); border: 1px solid var(--line);
  font: 600 .84rem/1 var(--font-sans); color: var(--ink);
}
.page-account .acct-email .icon { color: var(--teal-700); }
.page-account .acct-email-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.page-account .acct-logout {
  flex: none; font-weight: 600; font-size: .9rem; color: var(--ink); padding: 6px 2px;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.page-account .acct-logout:hover { color: var(--teal-700); text-decoration-color: currentColor; }
.page-account .acct-logout:focus-visible { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 2px; border-radius: 6px; }

/* layout: one column on phones (credits with a balance first, then progress and scans, then the
   quiet panels); two columns on desktop with progress and scans on the left */
.page-account .acct-body { background: var(--mist-2); padding-block: clamp(20px, 5vw, 48px) clamp(56px, 9vw, 96px); }
.page-account .acct-grid { display: flex; flex-direction: column; gap: 16px; }
.page-account .acct-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
@media (max-width: 979px) {
  .page-account .acct-credits.has-credits { order: 0; }
  .page-account .acct-main { order: 1; margin-bottom: 8px; }
  .page-account .acct-credits.no-credits { order: 2; }
  .page-account .acct-progress-side { order: 3; }
  .page-account .acct-help { order: 4; }
  .page-account .acct-danger { order: 5; }
}
@media (min-width: 980px) {
  .page-account .acct-grid {
    display: grid; align-items: start; column-gap: 32px; row-gap: 0;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "main credits" "main progress" "main help" "main danger" "main .";
  }
  .page-account .acct-main { grid-area: main; gap: 36px; }
  .page-account .acct-credits { grid-area: credits; }
  .page-account .acct-progress-side { grid-area: progress; margin-top: 16px; }
  .page-account .acct-help { grid-area: help; margin-top: 16px; }
  .page-account .acct-danger { grid-area: danger; margin-top: 16px; }
}

.page-account .acct-section-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.page-account .acct-h2 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); letter-spacing: -.03em; }
.page-account .acct-h3 { font-size: var(--fs-h3); }
.page-account .acct-count {
  display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px;
  border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line);
  color: var(--ink-2); font-size: .78rem; font-weight: 700;
}

/* white side panels */
.page-account .acct-panel {
  background: var(--white); border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 24px); box-shadow: var(--shadow-soft);
}

/* credits */
.page-account .acct-credits.has-credits { box-shadow: var(--shadow-card); }
.page-account .credits-top { display: flex; align-items: center; gap: 16px; }
.page-account .credits-num {
  flex: none; display: grid; place-items: center;
  min-width: 60px; height: 60px; padding: 0 12px; border-radius: var(--r-md);
  background: var(--teal-50); color: var(--teal-800); box-shadow: inset 0 0 0 1px var(--teal-100);
  font: 700 1.9rem/1 var(--font-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.page-account .credits-title { font-size: 1.2rem; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.page-account .credits-sub { margin-top: 6px; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.page-account .credits-sub strong { color: var(--ink); font-weight: 650; }
.page-account .credits-steps { list-style: none; margin: 20px 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.page-account .credits-steps li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--ink-2); }
.page-account .credits-step-n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--teal); color: var(--teal-700);
  font: 700 .72rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.page-account .credits-tip { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: .82rem; line-height: 1.5; color: var(--muted); }

.page-account .credits-kicker { display: inline-flex; align-items: center; gap: 8px; font: 750 var(--fs-label)/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-account .credits-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.page-account .no-credits .credits-title { margin-top: 12px; }
.page-account .no-credits .btn { margin-top: 20px; }
.page-account .credits-link { display: flex; width: fit-content; margin: 16px auto 0; }
.page-account .no-credits .credits-sub + .credits-link { margin: 14px 0 0; }

/* scan cards */
.page-account .scan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.page-account .scan-card {
  position: relative;
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--white); border: 1px solid rgba(14, 35, 41, .07); box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.page-account .scan-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.page-account .scan-card:focus-within { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 3px; }
.page-account .scan-card.is-ready { border-color: var(--teal-100); box-shadow: 0 0 0 3px var(--teal-50), var(--shadow-soft); }
@media (min-width: 560px) {
  .page-account .scan-card { grid-template-columns: 104px minmax(0, 1fr); gap: 20px; padding: 16px; }
}

/* the photo sits on the studio backdrop, like every face on the site */
.page-account .scan-thumb {
  position: relative; align-self: start; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden;
  background: var(--grad-studio);
  box-shadow: inset 0 0 0 1px rgba(14, 35, 41, .06);
}
.page-account .scan-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-account .scan-thumb-ph {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .9);
}
.page-account .scan-thumb-sweep {
  position: absolute; left: 0; right: 0; top: 6%; height: 2px;
  background: var(--teal); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 10px rgba(0, 162, 173, .5);
  animation: acct-sweep 2.4s var(--ease-draw) infinite alternate;
}
@keyframes acct-sweep { from { top: 6%; } to { top: 92%; } }

.page-account .scan-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-account .scan-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.page-account .scan-date { font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-account .scan-badge { font-size: .74rem; padding: 5px 9px; }
.page-account .scan-badge-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.page-account .scan-badge-failed { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); }

.page-account .scan-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; margin-top: 4px; }
.page-account .scan-score-num { font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -.045em; line-height: 1; }
.page-account .scan-score-of { font-size: .9rem; font-weight: 600; color: var(--muted); }
.page-account .scan-score-label { align-self: center; margin-left: 8px; }
.page-account .scan-headline { margin-top: 4px; font-size: 1.04rem; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.page-account .scan-sub { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.page-account .scan-note { display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.page-account .scan-note .icon { width: 14px; height: 14px; margin-top: 1px; color: var(--faint); }

.page-account .scan-cta {
  margin-top: auto; padding-top: 6px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 650; font-size: .92rem; color: var(--ink); text-decoration: none;
}
.page-account .scan-cta::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.page-account .scan-cta:focus-visible { outline: none; }
.page-account .scan-cta .icon { width: 16px; height: 16px; transition: transform var(--t-fast) ease; }
.page-account .scan-card:hover .scan-cta { color: var(--teal-700); }
.page-account .scan-card:hover .scan-cta .icon { transform: translateX(3px); }
.page-account .is-ready .scan-cta { color: var(--teal-700); }

/* empty state */
.page-account .acct-empty {
  padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px);
  background: var(--white); border: 1px solid rgba(14, 35, 41, .07); border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  text-align: center;
}
.page-account .acct-empty-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 16px; background: var(--teal-50); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-100);
}
.page-account .acct-empty-icon .icon { width: 26px; height: 26px; }
.page-account .acct-empty-title { font-size: 1.35rem; }
.page-account .acct-empty-text { margin: 10px auto 0; max-width: 46ch; color: var(--muted); }
.page-account .acct-empty-text strong { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.page-account .acct-empty-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 459px) { .page-account .acct-empty-actions .btn { width: 100%; } }

/* your progress: summary, line chart (SVG line under HTML dots and labels, so text stays crisp at
   any width) and the per-scan table */
.page-account .pg-panel { padding: clamp(18px, 3vw, 28px); }
.page-account .pg-summary { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; }
.page-account .pg-latest .label { display: block; }
.page-account .pg-score { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; }
.page-account .pg-score b { font: 700 clamp(2.5rem, 6vw, 3rem)/.9 var(--font-sans); letter-spacing: -.045em; color: var(--ink); }
.page-account .pg-score > span.num { font-size: .9rem; font-weight: 600; color: var(--muted); }
.page-account .pg-score .rating { margin-left: 8px; align-self: center; }
.page-account .pg-stats { display: flex; margin: 0; }
.page-account .pg-stat { padding: 0 20px; border-left: 1px solid var(--line-2); }
.page-account .pg-stat:first-child { padding-left: 0; border-left: 0; }
.page-account .pg-stat:last-child { padding-right: 0; }
.page-account .pg-stat dt { font: 750 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.page-account .pg-stat dd { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; min-height: 26px; }
.page-account .pg-stat-from { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-account .pg-stat-num { font: 700 1.3rem/1 var(--font-sans); letter-spacing: -.02em; color: var(--ink); }

/* change chips: mint when the score went up, neutral otherwise (never red for a score) */
.page-account .pg-delta {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font: 750 .8rem/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--good-bg); color: var(--good-fg);
}
.page-account .pg-delta.is-up { background: var(--great-bg); color: var(--great-fg); }

.page-account .pg-chart { position: relative; margin-top: 22px; padding: 30px 2px 0 30px; }
.page-account .pg-plot { position: relative; height: 150px; }
@media (min-width: 980px) { .page-account .pg-plot { height: 190px; } }
.page-account .pg-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.page-account .pg-grid { stroke: var(--line-2); stroke-width: 1; }
.page-account .pg-grid.is-base { stroke: var(--line); }
.page-account .pg-fade-top { stop-color: var(--teal); stop-opacity: .14; }
.page-account .pg-fade-bottom { stop-color: var(--teal); stop-opacity: 0; }
.page-account .pg-area { fill: url(#pg-fade); }
.page-account .pg-line-edge { fill: none; stroke: #fff; stroke-opacity: .92; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.page-account .pg-line { fill: none; stroke: var(--teal); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.page-account .pg-y {
  position: absolute; right: calc(100% + 10px); transform: translateY(-50%);
  font: 600 .72rem/1 var(--font-sans); color: var(--muted); font-variant-numeric: tabular-nums;
}
.page-account .pg-dot {
  position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(0, 162, 173, .35);
  transform: translate(-50%, -50%); transition: transform var(--t-fast) var(--ease-out);
}
.page-account .pg-dot.is-latest {
  width: 13px; height: 13px;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 7px rgba(0, 162, 173, .14), 0 0 10px rgba(0, 162, 173, .4);
}
.page-account .pg-val {
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 5px 9px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--teal);
  font: 800 .74rem/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--shadow-pill); transition: opacity var(--t-fast) ease;
}
.page-account .pg-val.is-latest { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }

/* hover: one column per scan finds the nearest point, shows a hairline and the values */
/* no z-index on the column: its hairline stays under the dots, its tooltip above everything */
.page-account .pg-col { position: absolute; top: 0; bottom: 0; }
.page-account .pg-cross {
  position: absolute; left: var(--cx); top: -6px; bottom: 0; width: 0;
  border-left: 1px solid var(--line-strong); opacity: 0; transition: opacity var(--t-fast) ease;
}
.page-account .pg-tip {
  position: absolute; left: var(--cx); top: var(--cy); z-index: 5; pointer-events: none;
  display: grid; gap: 5px; padding: 9px 11px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-card);
  font: 600 .76rem/1.2 var(--font-sans); color: var(--muted); white-space: nowrap;
  transform: translate(-50%, calc(-100% - 16px)); opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast) ease, visibility 0s linear var(--t-fast);
}
/* points near either edge open their tooltip inwards, so a long date never pushes past a phone screen */
.page-account .pg-col.tip-start .pg-tip { transform: translate(-16px, calc(-100% - 16px)); }
.page-account .pg-col.tip-end .pg-tip { transform: translate(calc(-100% + 16px), calc(-100% - 16px)); }
.page-account .pg-tip-top { color: var(--ink-2); }
.page-account .pg-tip-top b { margin-right: 2px; font-size: .95rem; font-weight: 750; color: var(--ink); }
.page-account .pg-tip-sub { display: flex; align-items: center; gap: 6px; }
.page-account .pg-tip .pg-delta { height: 18px; padding: 0 6px; font-size: .7rem; }
.page-account .pg-col:hover .pg-cross { opacity: 1; }
.page-account .pg-col:hover .pg-tip { opacity: 1; visibility: visible; transition: opacity var(--t-fast) ease; }
.page-account .pg-col:hover + .pg-dot { transform: translate(-50%, -50%) scale(1.25); }
.page-account .pg-plot:has(.pg-col:hover) .pg-val { opacity: 0; }

.page-account .pg-x { position: relative; height: 16px; margin-top: 12px; }
.page-account .pg-date {
  position: absolute; top: 0; transform: translateX(-50%);
  font: 600 .74rem/1 var(--font-sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center;
}
/* second line under a date: the year where it changes, or the time for two scans on one day */
.page-account .pg-date-sub { display: block; margin-top: 4px; font-size: .68rem; font-weight: 500; }
.page-account .pg-x:has(.pg-date-sub) { height: 30px; }
@media (max-width: 559px) {
  .page-account .pg-date.is-minor { display: none; }
  /* no extra row when the only second lines sit under hidden dates */
  .page-account .pg-x:not(:has(.pg-date:not(.is-minor) .pg-date-sub)) { height: 16px; }
}
.page-account .pg-chart-note { margin-top: 12px; font-size: .8rem; color: var(--muted); }

.page-account .pg-table { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: .9rem; }
.page-account .pg-table thead th {
  padding: 0 0 10px; text-align: left;
  font: 750 var(--fs-label)/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.page-account .pg-table tbody th,
.page-account .pg-table td { padding: 11px 0; border-top: 1px solid var(--line-2); text-align: left; vertical-align: middle; font-weight: 500; color: var(--ink-2); }
.page-account .pg-table tbody th { padding-right: 12px; }
.page-account .pg-table .pg-th-change,
.page-account .pg-table .pg-td-change { text-align: right; }
.page-account .pg-link { color: var(--ink); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.page-account .pg-link:hover { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }
.page-account .pg-link:focus-visible { outline: 3px solid rgba(0, 162, 173, .5); outline-offset: 2px; border-radius: 4px; }
.page-account .pg-latest-tag {
  display: inline-block; margin-left: 6px; padding: 4px 7px; border-radius: 6px; vertical-align: 1px;
  background: var(--teal-50); color: var(--teal-700); font: 750 .62rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
.page-account .pg-cell { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 4px 8px; }
.page-account .pg-cell-num { min-width: 2.2em; font-weight: 700; color: var(--ink); }
.page-account .pg-start { font-size: .8rem; color: var(--muted); white-space: nowrap; }
/* on narrow phones the date wraps, never the score and its rating */
@media (max-width: 420px) {
  .page-account .pg-table tbody th { white-space: normal; }
  .page-account .pg-cell .rating { padding-inline: 8px; }
}
.page-account .pg-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: .8rem; line-height: 1.5; color: var(--muted);
}
.page-account .pg-note .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--teal); }

/* progress empty state: a quiet chart with the starting point (if any) and the scans still to come */
.page-account .pge-ghost {
  margin-top: 16px; padding: 10px 10px 4px; border-radius: var(--r-md);
  background: var(--mist-2); border: 1px solid var(--line-2);
}
.page-account .pge-ghost svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-account .pge-grid { stroke: var(--line); stroke-width: 1; }
.page-account .pge-grid.is-base { stroke: var(--line-strong); }
.page-account .pge-path { fill: none; stroke: var(--teal); stroke-opacity: .5; stroke-width: 1.75; stroke-dasharray: 4 5; stroke-linecap: round; }
.page-account .pge-dot { fill: #fff; stroke: var(--teal); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 3 2.4; }
.page-account .pge-dot.is-real { fill: var(--teal); stroke: #fff; stroke-opacity: 1; stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(0, 162, 173, .45)); }
.page-account .pge-pill { fill: var(--teal-700); }
.page-account .pge-pill-text { fill: #fff; font: 800 11px/1 var(--font-sans); text-anchor: middle; font-variant-numeric: tabular-nums; }
.page-account .pge-label { fill: var(--muted); font: 600 10.5px/1 var(--font-sans); text-anchor: middle; }
.page-account .pge .credits-sub { margin-top: 14px; }
.page-account .pge-text { margin-top: 14px; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.page-account .pge-text strong { color: var(--ink); font-weight: 700; }

/* help */
.page-account .acct-help > p { margin-top: 8px; font-size: .92rem; color: var(--muted); }
.page-account .acct-help .link { overflow-wrap: anywhere; }
.page-account .acct-help-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.page-account .acct-help-facts li { display: flex; align-items: flex-start; gap: 10px; }
.page-account .acct-help-facts .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--teal); }
.page-account .acct-help-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 14px; margin-top: 16px !important; border-top: 1px solid var(--line-2); }
.page-account .acct-help-links a { font-size: .86rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.page-account .acct-help-links a:hover { color: var(--teal-700); text-decoration: underline; }

/* danger zone: errors and destructive actions are the only place red appears */
.page-account .acct-danger {
  padding: clamp(20px, 3vw, 24px); border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--danger-line);
}
.page-account .acct-danger .acct-h3 { color: var(--danger-ink); }
.page-account .acct-danger-text { margin-top: 6px; font-size: .88rem; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.page-account .acct-btn-outline-danger {
  --b-bg: #fff; --b-fg: var(--danger-ink); --b-bd: var(--danger-line); --b-shadow: none;
  margin-top: 16px;
}
.page-account .acct-btn-outline-danger:hover { filter: none; --b-bg: var(--danger-bg); }
.page-account .acct-btn-outline-danger .icon { width: 16px; height: 16px; }
.page-account .acct-btn-danger {
  --b-bg: var(--danger); --b-fg: #fff; --b-bd: var(--danger);
  --b-shadow: 0 1px 2px rgba(142, 42, 31, .25), 0 10px 22px -12px rgba(142, 42, 31, .6);
}
.page-account .danger-confirm {
  margin-top: 16px; padding: 14px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid var(--danger-line);
  animation: auth-step-in var(--t-base) var(--ease-out) both;
}
.page-account .danger-q { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.page-account .danger-q strong { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }
.page-account .danger-q:focus { outline: none; }
.page-account .danger-confirm .form-error { margin-top: 10px; }
.page-account .danger-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.page-account .danger-actions .btn { flex: 1 1 auto; }
.page-account .acct-status { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--mint-700); }
.page-account .acct-status:empty { display: none; }

@keyframes auth-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .page-callback .auth-spinner-ring,
  .page-account .scan-thumb-sweep { animation: none; }
  .page-account .scan-thumb-sweep { display: none; }
  .page-account .scan-card:hover { transform: none; }
}