/* bookbask — guest "Your account".
   Assumes css/bookbask.css and css/home.css (nav + footer) are loaded.

   Hairline cards, no shadows. Tokens only. AccountSecurity.mount paints the
   two-step and backup-code cards with the acc-* class map. */

.acc { padding: 40px 24px 64px; max-width: 880px; }

.acc-h {
  font: var(--bb-w-semibold) 29px/1.14 var(--bb-font);
  letter-spacing: -1px;
  margin: 0;
}

.acc-sub {
  font: var(--bb-w-regular) 13px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 6px 0 28px;
}

.acc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#acc-security {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 800px) {
  .acc-grid { grid-template-columns: 1fr 1fr; }
  .acc-card--wide { grid-column: 1 / -1; }
  #acc-security {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

.acc-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 22px 24px;
}

.acc-head { margin: 0 0 12px; }

.acc-card-h {
  font: var(--bb-w-semibold) 15.5px/1.3 var(--bb-font);
  margin: 0;
}

.acc-p {
  font: var(--bb-w-regular) 13.5px/1.55 var(--bb-font);
  margin: 0 0 12px;
}

.acc-hint {
  font: var(--bb-w-regular) 12px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 0 0 12px;
}

.acc-facts {
  display: grid;
  gap: 10px 24px;
  margin: 0 0 16px;
}
.acc-facts dt {
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.acc-facts dd {
  margin: 0;
  font: var(--bb-w-medium) 13.5px/1.4 var(--bb-font);
}

.acc-banner {
  background: var(--bb-tint-jade);
  color: var(--bb-trust-deep);
  border-radius: var(--bb-r-field);
  padding: 12px 16px;
  margin: 0 0 14px;
  font: var(--bb-w-medium) 13px/1.5 var(--bb-font);
}

.acc-qr {
  width: 168px;
  height: 168px;
  display: block;
  margin: 0 0 14px;
  object-fit: contain;
  background: var(--bb-page);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-thumb);
}

.acc-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 0 0 12px;
  font: var(--bb-w-medium) 13.5px/1.5 var(--bb-font);
  font-variant-numeric: tabular-nums;
}

.acc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.acc-field { margin-bottom: 16px; }
.acc-field label,
.acc-label {
  display: block;
  font: var(--bb-w-semibold) 11.5px/1.4 var(--bb-font);
  margin-bottom: 6px;
}

.acc-input,
.acc-field input {
  width: 100%;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  background: var(--bb-page);
  color: var(--bb-ink);
  font: var(--bb-w-regular) 13.5px/1.5 var(--bb-font);
  padding: 13px 16px;
  outline: none;
}
.acc-input:focus,
.acc-field input:focus {
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(70, 85, 246, 0.12);
}
.acc-input[aria-invalid="true"],
.acc-field input[aria-invalid="true"] { border-color: var(--bb-urgency); }

.acc-err {
  margin: 0 0 12px;
  font: var(--bb-w-semibold) 11.5px/1.45 var(--bb-font);
  color: var(--bb-urgency);
}
.acc-err:empty { display: none; }

.acc-ok {
  margin: 0 0 12px;
  font: var(--bb-w-medium) 12.5px/1.45 var(--bb-font);
  color: var(--bb-trust-ink);
}
.acc-ok:empty { display: none; }

.acc-btn-danger {
  background: transparent;
  color: var(--bb-urgency);
  border: 1px solid var(--bb-hairline);
}
.acc-btn-danger:hover { border-color: var(--bb-urgency); }

.acc-phone-slot { grid-column: 1 / -1; }
.acc-phone-slot:empty { display: none; }
.acc-phone-slot .acc-input { max-width: 100%; min-width: 0; }

@media (max-width: 520px) {
  .acc { padding: 28px 18px 56px; }
  .acc-h { font-size: 24px; }
  .acc-card { padding: 18px 18px; }
  .acc-codes { grid-template-columns: 1fr; }
}