/* Sign-up result, account, login and simple pages. Builds on base.css tokens and components. */

/* ---------- the key moment ---------- */
.key-hero { padding: var(--s-7) 0 var(--s-6); }
.key-hero h1 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.key-hero .keybox {
  font-size: clamp(3rem, 1.4rem + 7.5vw, 5.25rem);
  letter-spacing: .2em; padding: .2em .35em .1em .55em; /* trailing letter-space sits on the right: trim it */
  margin: 0 0 var(--s-3); max-width: 100%;
}
.key-note { color: var(--muted); font-size: var(--t-sm); margin-bottom: var(--s-5); }
.key-hero .lede { margin-bottom: var(--s-4); }
.key-hero .notice { font-size: var(--t-base); }

/* ---------- setup checklist ---------- */
.setup { padding: var(--s-7) 0 0; border-top: var(--b-1); }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .setup-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
.setup-main { max-width: 640px; }
.setup-main > h2 { margin-bottom: var(--s-2); }
.setup-main > p { margin-bottom: var(--s-6); }

ol.checklist > li { margin-bottom: var(--s-6); padding-bottom: var(--s-6); border-bottom: var(--b-1); }
ol.checklist > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
ol.checklist > li::before { background: var(--bg); }
ol.checklist h3 { font-size: var(--t-base); line-height: 1.35; margin: 0 0 var(--s-2); padding-top: 3px; }
ol.checklist p { margin-bottom: var(--s-3); }
/* text to type: the strip is as long as what you type */
.sample { width: fit-content; max-width: 100%; }
ol.checklist .sample { margin: 0 0 var(--s-3); }
ol.checklist li > :last-child { margin-bottom: 0; }
.opt { font-weight: 400; color: var(--muted); font-size: var(--t-sm); margin-left: .35em; }

/* the space after the key in a quick text */
.sp { display: inline-block; width: .9em; height: .5em; margin-left: .15em; vertical-align: baseline;
  border: 1.5px solid currentColor; border-top: 0; opacity: .55; }

.exchange { margin: var(--s-4) 0 0; max-width: 460px; }
.exchange .lcd { padding: var(--s-4) var(--s-4) var(--s-3); }
.exchange figcaption { margin-top: var(--s-2); }

/* 160-character budget: gauge plus its count */
.budget { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.budget .gauge { flex: 1 1 auto; margin: 0; }
.budget-n { flex: none; font-family: var(--font); font-size: var(--t-xs); opacity: .8; }

.setup-side { border-top: var(--b-2); padding-top: var(--s-4); }
@media (min-width: 901px) { .setup-side { position: sticky; top: calc(var(--head-h) + var(--s-5)); } }
.setup-side .notice.sos { margin: var(--s-5) 0; }

.side-h { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.005em; margin: 0 0 var(--s-2); }
.setup-side dl.defs, .account-side dl.defs { grid-template-columns: 1fr; gap: 0; }
.setup-side dl.defs dd, .account-side dl.defs dd { margin-bottom: var(--s-3); font-size: var(--t-sm); }

/* ---------- narrow column: sign in ---------- */
.narrow { padding: var(--s-7) 0 0; }
.narrow .wrap { max-width: calc(460px + 2 * var(--s-5)); }
.narrow .lede { font-size: var(--t-base); color: var(--muted); }
.narrow .panel { margin-bottom: var(--s-6); }
.narrow .notice { margin-bottom: var(--s-4); }
.narrow .side-h { margin-top: 0; }

/* ---------- account ---------- */
.account { padding: var(--s-7) 0 0; }
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); }
.account-head h1 { margin-bottom: var(--s-2); }
.account-head p { margin: 0; overflow-wrap: anywhere; }
.account-head form { flex: none; padding-top: var(--s-2); }
.account .tiles { margin-bottom: var(--s-4); }
@media (min-width: 720px) { .account .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 719px) { .account .tiles { grid-template-columns: 1fr 1fr; } }
.tile .v.plan { font-size: 1.375rem; padding-top: .18em; }

.top-up-hint { margin: 0 0 var(--s-4); }
.notice.next { background: var(--surface); border-left-color: var(--ink); font-size: var(--t-base); max-width: none;
  padding: var(--s-4) var(--s-5) var(--s-3); }
.notice.next a { font-weight: 700; color: var(--ink); text-decoration-thickness: 2px; }

.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); align-items: start; margin-top: var(--s-7); }
@media (max-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }
.history { max-width: 720px; }
.history > h2 { margin-bottom: var(--s-2); }

/* the log: one hairline row per message, not cards */
ol.log { list-style: none; padding: 0; margin: var(--s-4) 0 0; border-top: var(--b-2); }
.entry { max-width: none; margin: 0; padding: var(--s-4) 0 var(--s-5); border-bottom: var(--b-1); }
.entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4);
  color: var(--muted); font-size: var(--t-sm); margin-bottom: var(--s-2); }
.entry-head abbr { text-decoration: none; }
.entry-q { font-weight: 650; margin: 0 0 var(--s-3); overflow-wrap: anywhere; }
.entry-a { background: var(--lcd); color: var(--lcd-ink); border-radius: var(--r-1); padding: 10px 14px 8px;
  box-shadow: inset 0 1px 4px rgb(0 0 0 / .16); }
.entry .answer { font-family: var(--mono); font-size: .9375rem; line-height: 1.45; margin: 0; max-width: none; overflow-wrap: anywhere; }
.entry > p.small { margin: var(--s-2) 0 0; }

.empty { border-top: var(--b-2); padding-top: var(--s-4); }
.empty .sample { margin-bottom: var(--s-3); }

.account-side { border-top: var(--b-2); padding-top: var(--s-4); }
.account-side .sample { margin: 0 0 var(--s-2); }
.account-side h3.side-h { font-size: var(--t-base); margin-top: var(--s-5); }
.ph { opacity: .6; font-style: italic; }

/* ---------- generic content page ---------- */
.simple { padding: var(--s-8) 0 0; }
.prose { max-width: var(--measure); }
.prose > h1 + p { font-size: var(--t-lg); line-height: 1.45; }
.prose h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.005em; margin: var(--s-6) 0 var(--s-2);
  padding-top: var(--s-4); border-top: var(--b-1); }
.prose ul { padding-left: 1.2em; }
.prose li::marker { color: var(--muted); }
.prose .notice { font-size: var(--t-base); margin: var(--s-5) 0 var(--s-6); }
.legal-doc > h1 + p { font-size: var(--t-base); color: var(--muted); }
.legal-doc > h1 + .notice { margin-top: var(--s-5); }

@media (max-width: 480px) {
  .key-hero, .setup, .narrow, .account, .simple { padding-top: var(--s-6); }
  .key-hero .keybox { letter-spacing: .14em; }
}

/* "Buy more answers" row under the balance tiles */
.account-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1rem 0 1.5rem; }