/* recite — auth styles. Owned by the auth phase. Tokens live in app.css :root; use them, do not redefine them. */

/* ============================ /login, /register ========================= */

.trc-auth {
  max-width: 420px;
  margin: var(--trc-s6) auto var(--trc-s8);
}

.trc-auth-card {
  padding: var(--trc-s5);
}

.trc-auth-title {
  margin: 0 0 var(--trc-s2);
  font-size: 22px;
  line-height: 1.4;
}

.trc-auth-lead {
  margin: 0 0 var(--trc-s5);
  font-size: 13px;
  line-height: 1.7;
}

.trc-auth-form {
  margin: 0;
}

.trc-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--trc-s3);
}

.trc-check {
  display: inline-flex;
  align-items: center;
  gap: var(--trc-s2);
  font-size: 14px;
  color: var(--trc-text-2);
  cursor: pointer;
}
.trc-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--trc-accent); }

.trc-auth-submit { width: 100%; }

.trc-auth-alt {
  margin: var(--trc-s4) 0 0;
  font-size: 13px;
  text-align: center;
}

.trc-auth-foot {
  margin: var(--trc-s4) 0 0;
  font-size: 13px;
  text-align: center;
}

/* ================================== /me ================================= */

.trc-me-title {
  margin: 0 0 var(--trc-s4);
  font-size: 22px;
}

.trc-me-h2 {
  margin: 0 0 var(--trc-s3);
  font-size: 15px;
  font-weight: 600;
  color: var(--trc-text);
}

.trc-me-list { margin: 0; }

.trc-me-row {
  display: flex;
  align-items: baseline;
  gap: var(--trc-s3);
  padding: 7px 0;
  border-bottom: var(--trc-border-w) solid var(--trc-border);
}
.trc-me-row:last-child { border-bottom: 0; padding-bottom: 0; }

.trc-me-row dt {
  flex: 0 0 140px;
  font-size: 13px;
  color: var(--trc-text-2);
}
.trc-me-row dd {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  word-break: break-word;
}

.trc-me-form { margin: 0; }
.trc-me-form .trc-field { margin-bottom: var(--trc-s3); }

.trc-me-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trc-me-links li { padding: 7px 0; border-bottom: var(--trc-border-w) solid var(--trc-border); font-size: 14px; }
.trc-me-links li:last-child { border-bottom: 0; padding-bottom: 0; }

.trc-me-storage { margin: 0 0 4px; font-size: 14px; }

/* Two separate forms — "this device" and "every device" — sitting as one row. */
.trc-me-signout { display: flex; flex-wrap: wrap; gap: var(--trc-s2); }
.trc-me-signout form { margin: 0; }

@media (max-width: 720px) {
  .trc-auth { margin-top: var(--trc-s4); }
  .trc-auth-card { padding: var(--trc-s4); }
  .trc-me-row { display: block; }
  .trc-me-row dt { margin-bottom: 2px; }
}