/* This product's theme and page layout. Tokens and shared components come
   from aoken.css (copy of platform/design/aoken.css; do not edit it here).
   To theme the product, override tokens, e.g. :root { --accent: ...; }
   with a dark-mode value too, keeping 4.5:1 contrast for text. */

/* header: logo, and when signed in the account and a quiet Sign out */
header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.brand img { display: block; width: auto; height: 42px; }
.account-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--muted); overflow-wrap: anywhere; }
.account-bar[hidden] { display: none; }
#balance { color: var(--fg); font-weight: 600; }

main.wrap { padding-bottom: var(--space-8); }
h1 { margin-top: 0; }
.lead { margin-bottom: var(--space-6); }
section > h2:first-child { margin-top: var(--space-8); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }

/* the product action is the one filled button; everything else is outlined or quiet */
.button.secondary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.quiet {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0 var(--space-2);
  min-height: var(--target-min);
  text-decoration: underline;
  cursor: pointer;
}

/* text is typed in the page font; only the result (.output) is monospace */
textarea.input { font: var(--text-base)/var(--leading) var(--font-sans); }
.output { margin-top: var(--space-3); }

.packs { margin: var(--space-3) 0 var(--space-4); }
.pack { display: flex; flex-direction: column; gap: var(--space-1); }
.pack p { margin: 0; }
.pack-units { font-weight: 600; }
.pack .button { margin-top: var(--space-3); text-align: center; }

footer.site-footer { border-top: 1px solid var(--line); padding-top: var(--space-4); padding-bottom: var(--space-8); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--muted); }

/* the sign-in page: the same gap under its button as under .actions */
main form { margin: 0 0 var(--space-4); }

/* phones: the account line and Sign out share one right-aligned row, and the header stays short */
.account-bar { justify-content: flex-end; }
.account-bar .quiet { padding-inline: 0; }
@media (max-width: 480px) {
  header.top { padding-top: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
  .account-bar { flex: 1 1 100%; justify-content: space-between; }
}

/* footer: same look as the aokenlabs.com footer (small, muted, no underline) */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--fg); text-decoration: underline; }

/* onboarding next step: its link never breaks across lines */
#next-step a { white-space: nowrap; }

/* policy pages (/terms/, /privacy/, /refunds/): same measure as the aokenlabs.com policies */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.2rem; margin-top: var(--space-8); }

/* the verdict above the kit: the first line of the result, with any problems listed */
#verdict { border-inline-start: 4px solid var(--line-strong); margin-bottom: var(--space-3); }
#verdict[data-state="ok"] { border-inline-start-color: var(--accent); }
#verdict ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
/* the kit: one titled block per section, each with its own Copy button */
.kit-block h3 { margin: var(--space-6) 0 var(--space-2); }
.kit-block .output { margin-top: 0; }
.kit-block .actions { margin-top: var(--space-2); }
.copy-status { color: var(--muted); font-size: var(--text-sm); }