/* Pagine dell'account: accesso, registrazione, account, prezzi, amministrazione. */

.auth,
.account,
.pricing,
.admin {
  padding-block: var(--sp-6) var(--sp-7);
}

.account {
  max-width: 36rem;
}

/* Accesso e registrazione: una scheda al centro */
.auth {
  max-width: 28rem;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-6);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.auth h1 {
  font-size: var(--fs-2xl);
}
.auth .lead {
  font-size: var(--fs-m);
}
.auth .auth-form .button {
  width: 100%;
}
.auth .auth-form .actions {
  display: block;
}
.auth-alt {
  font-size: var(--fs-s);
}
@media (max-width: 30rem) {
  .auth {
    margin-top: var(--sp-5);
    padding: var(--sp-5) var(--sp-4);
  }
}

.auth-form,
.admin-form {
  display: grid;
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

.auth-form input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
.admin-form input[type='text'] {
  width: 100%;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-3);
}

.inline-form .field {
  flex: 1 1 16rem;
}

.inline-form input {
  width: 100%;
}

.account h2,
.pricing h2 {
  margin-top: var(--sp-6);
}

.account-exit {
  margin-top: var(--sp-6);
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-6);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.plan form,
.plan > .button {
  margin-top: auto;
}
.plan__price {
  margin-bottom: var(--sp-3);
}

.plan h2 {
  margin-top: 0;
}

.plan__price .num {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.admin-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: end;
}

.key-code code {
  font-size: var(--fs-l);
  user-select: all;
}

.inline-form .field {
  margin-bottom: 0;
}

.admin-people form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-family: var(--font-sans);
}
.data-table .admin-people {
  text-align: left;
  white-space: normal;
}

.account-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-5);
}

.device-list {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.code-input {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  letter-spacing: 0.2em;
  text-align: center;
}

.checks-list {
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
}
.checks-list li {
  position: relative;
  padding-left: 1.75rem;
}
.checks-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--blue-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

/* Pannello: le colonne di testo in carattere normale, allineate a sinistra */
.admin .data-table td {
  font-family: var(--font-sans);
}
.admin .data-table th,
.admin .data-table td {
  text-align: left;
  vertical-align: top;
}
.admin .data-table td code,
.admin .data-table th code {
  font-size: var(--fs-xs);
}

/* Avviso della fase di prova sopra i piani */
.trial-banner {
  max-width: 44rem;
  margin-block: var(--sp-5) var(--sp-6);
  padding: var(--sp-5);
}
.trial-banner .actions {
  margin-top: var(--sp-4);
}
.trial-banner:focus {
  outline: none;
}

/* Cancellazione dell'account: chiusa finché non la si apre, in rosso */
.danger-zone {
  max-width: 44rem;
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
}
.danger-zone summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--red);
}
.danger-zone[open] summary {
  margin-bottom: var(--sp-3);
}
.button--danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.button--danger:hover {
  background: color-mix(in srgb, var(--red) 85%, black);
  border-color: color-mix(in srgb, var(--red) 85%, black);
}

/* Domande frequenti nella pagina dei prezzi */
.faq {
  max-width: 44rem;
  border-top: var(--rule);
}
.faq details {
  border-bottom: var(--rule);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  color: var(--ink-3);
  font-weight: 400;
}
.faq details[open] summary::after {
  content: '−';
}
.faq details p {
  margin: 0 0 var(--sp-4);
  color: var(--ink-2);
}