/* Account pages in the SYG design standard. Builds on /styles/syg.css and uses its tokens only. */

body.account {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--syg-bg-panel);
}

.account-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--syg-space-8) var(--syg-gutter) var(--syg-space-7);
}

.account-card {
  width: 100%;
  max-width: 440px;
  margin-bottom: 0;
}
/* Head, body and note share one left edge. */
.account-card .panel-head {
  padding: var(--syg-space-4) var(--syg-space-5);
}
.account-card .panel-head h1 {
  font-size: var(--syg-fs-h2);
  line-height: var(--syg-lh-h2);
  font-weight: var(--syg-fw-bold);
}
.account-card .panel-body {
  padding: var(--syg-space-5);
}

.account-form {
  display: grid;
  gap: var(--syg-space-4);
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--syg-space-3);
}
.label-row label {
  margin-bottom: var(--syg-space-1);
}
.link-sm {
  font-size: var(--syg-fs-small);
  color: var(--syg-text-link);
}
.link-sm:hover,
.account-alt a:hover {
  text-decoration: underline;
}

/* A text field with a button attached on its right edge, sharing one border. */
.ctrl-with-action {
  display: flex;
}
.ctrl-with-action .ctrl {
  flex: 1;
  min-width: 0;
}
.ctrl-with-action .btn {
  border-color: var(--syg-border-strong);
  border-left-width: 0;
  color: var(--syg-grey-80);
  min-width: 72px;
  justify-content: center;
}

.hint {
  display: block;
  margin-top: var(--syg-space-1);
  font-size: var(--syg-fs-small);
  line-height: var(--syg-lh-small);
  color: var(--syg-text-secondary);
}

.field-error {
  display: block;
  margin-top: var(--syg-space-1);
  font-size: var(--syg-fs-small);
  color: var(--syg-danger-text);
}
.field-error:empty {
  display: none;
}
.ctrl.input-validation-error {
  border-color: var(--syg-danger);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--syg-space-2);
  font-size: var(--syg-fs-body);
  cursor: pointer;
}
.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--syg-action);
}

.account-actions {
  display: grid;
  gap: var(--syg-space-2);
  margin-top: var(--syg-space-2);
}
.account-actions .btn,
.account-providers .btn {
  width: 100%;
  justify-content: center;
}
a.btn {
  text-decoration: none;
}

.account-text {
  margin-bottom: var(--syg-space-4);
  font-size: var(--syg-fs-body);
  line-height: var(--syg-lh-body);
}

.account-sep {
  display: flex;
  align-items: center;
  gap: var(--syg-space-3);
  margin: var(--syg-space-5) 0 var(--syg-space-4);
  font-size: var(--syg-fs-caption);
  font-weight: var(--syg-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--syg-ls-upper);
  color: var(--syg-text-secondary);
}
.account-sep::before,
.account-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--syg-border);
}
.account-providers {
  display: grid;
  gap: var(--syg-space-2);
}

.account-alt {
  margin-top: var(--syg-space-5);
  padding-top: var(--syg-space-4);
  border-top: var(--syg-border-w) solid var(--syg-border);
  font-size: var(--syg-fs-body);
}
.account-alt a {
  color: var(--syg-text-link);
  font-weight: var(--syg-fw-bold);
}

.account-note {
  padding: var(--syg-space-3) var(--syg-space-5);
  border-top: var(--syg-border-w) solid var(--syg-border);
  background: var(--syg-bg-panel);
  font-size: var(--syg-fs-caption);
  line-height: var(--syg-lh-caption);
  color: var(--syg-text-secondary);
}

.account-card .notice {
  margin-bottom: var(--syg-space-4);
}

/* Phones: the header keeps the logo and environment chip; the panel title carries the context. */
@media (max-width: 480px) {
  .account-main {
    padding-top: var(--syg-space-5);
  }
  .axis .divider,
  .axis .product {
    display: none;
  }
}