/* The account page: the site's 720 px column, hairline cards, secrets in mono. */

body { font-size: var(--fs-16); line-height: var(--lh-prose); }

main { max-width: var(--prose); margin: 0 auto; padding: 0 var(--s6) var(--s12); }
section { display: grid; gap: var(--s4); }
section[hidden] { display: none; }
h1 { font-size: var(--fs-28); font-weight: 600; margin: var(--s12) 0 var(--s2); }
h2 { font-size: var(--fs-16); font-weight: 600; margin: 0 0 var(--s3); }
.lead { font-size: var(--fs-16); color: var(--text-2); margin: 0 0 var(--s4); }
p { margin: 0 0 var(--s3); color: var(--text-2); font-size: var(--fs-14); }
.note { font-size: var(--fs-13); color: var(--muted); margin: var(--s2) 0 0; }
.err { font-size: var(--fs-13); color: var(--red); margin: var(--s2) 0 0; min-height: 0; }
.err:empty, .note:empty { display: none; }
.muted { color: var(--muted); }
.mono, code { font-family: var(--mono); }
code { font-size: .9em; background: var(--bg-2); padding: 1px 5px; color: var(--text); }
label { display: grid; gap: 4px; font-size: var(--fs-13); color: var(--text-2); }
.check { display: inline-flex; grid-auto-flow: column; align-items: center; gap: var(--s2); }

.card { border: 1px solid var(--line); padding: var(--s6); min-width: 0; }
.card.warn { border-color: var(--yellow); }
.card.pick { border-color: var(--blue); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.two .card { display: grid; gap: var(--s3); align-content: start; }
.two .card p { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; font-size: var(--fs-14);
  text-decoration: none !important; color: var(--text); }
.btn.primary { color: var(--bg); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.icon { padding: 0 8px; }
.input { width: 100%; }

.secret { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.secret code { flex: 1; min-width: 0; padding: var(--s2) var(--s3); overflow-wrap: anywhere; user-select: all; }
.secret code.big { font-size: var(--fs-20); letter-spacing: .04em; }
.secret-box { border: 1px solid var(--yellow); padding: var(--s3) var(--s4) 0; margin: var(--s3) 0; }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.head h1 { margin-bottom: 0; }
.head p { margin: 0; }
.acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.plan { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.plan b { font-size: var(--fs-28); font-weight: 600; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s4); border-top: 1px solid var(--line); }
.kv div { padding: var(--s3) var(--s3) 0 0; display: grid; }
.kv span { font-size: var(--fs-12); color: var(--muted); }
.kv b { font: 500 var(--fs-16) var(--mono); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s4); }
.plans label { display: block; border: 1px solid var(--line); padding: var(--s3); cursor: pointer; }
.plans label:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.plans input { position: absolute; opacity: 0; pointer-events: none; }
.plans b { display: block; color: var(--text); font-size: var(--fs-14); }
.plans span { font: 500 var(--fs-20) var(--mono); color: var(--text); }
.plans small { color: var(--muted); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; margin: 0 0 var(--s3); }
.row label { flex: 1 1 160px; }
.row .input { flex: 1 1 200px; width: auto; }
.h2row { display: flex; justify-content: space-between; align-items: baseline; }

.scroll { overflow-x: auto; }
.t { width: 100%; border-collapse: collapse; font-size: var(--fs-13); margin-bottom: var(--s3); }
.t th { text-align: left; font-weight: 600; color: var(--text-2); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.t td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t td.num { font-family: var(--mono); text-align: right; }
.t .lnk { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; }
.t .lnk.danger { color: var(--red); }
.t:empty { display: none; }

.msg { border: 1px solid var(--line-strong); padding: var(--s3) var(--s4); margin-top: var(--s6); font-size: var(--fs-14); }
.msg.good { border-color: var(--green); }
.msg.bad { border-color: var(--red); }


@media (max-width: 640px) {
  main { padding: 0 var(--s4) var(--s8); }
  h1 { font-size: var(--fs-20); margin-top: var(--s8); }
  .two, .plans { grid-template-columns: 1fr; }
  .card { padding: var(--s4); }
  .kv { grid-template-columns: 1fr 1fr; }
  .secret code.big { font-size: var(--fs-16); }
}