/* The sign-in page: a picture of what the product does on the left, the form on the right. */

.app-nav[hidden] {
  display: none;
}

main.bare {
  padding: 0;
}

main.bare > * {
  max-width: none;
}

.signin {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  min-height: 100%;
}

/* ---------------------------------------------------------------- the picture */

.signin-art {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px 56px;
  background: var(--stp-surface-2);
  border-right: 1px solid var(--stp-border);
}

.signin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 650 18px/24px var(--font-display);
  font-stretch: 112%;
}

.signin-brand .nav-mark {
  width: 22px;
  height: 22px;
}

.signin-brand .nav-mark .b {
  fill: var(--stp-text);
}

.signin-pitch {
  margin-top: auto;
  max-width: 34rem;
}

.signin-pitch h2 {
  margin: 0;
  font: 650 34px/40px var(--font-display);
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.signin-pitch p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--stp-muted);
}

/* The chart is drawn with the app's own chart colours, so it matches what is behind the door. */
.signin-chart {
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-2);
  font-family: var(--font-sans);
}

.signin-chart .c-surface { fill: var(--stp-surface); }
.signin-chart .c-head { fill: var(--stp-surface-2); }
.signin-chart .c-headtext { fill: var(--stp-muted); font-size: 10px; text-anchor: middle; }
.signin-chart .c-weekend { fill: var(--g-weekend); }
.signin-chart .c-lookahead { fill: var(--g-window); }
.signin-chart .c-band1 { fill: var(--g-level-1); }
.signin-chart .c-band2 { fill: var(--g-level-2); }
.signin-chart .c-edge1 { fill: var(--g-level-edge-1); }
.signin-chart .c-edge2 { fill: var(--g-level-edge-2); }
.signin-chart .c-rule { stroke: var(--stp-border); stroke-width: 1; fill: none; }
.signin-chart .c-label { fill: var(--stp-text); font-size: 11px; }
.signin-chart .c-label .strong { font-weight: 600; }
.signin-chart .c-summary { fill: var(--g-summary); }
.signin-chart .c-master { fill: var(--g-master); }
.signin-chart .c-master-done { fill: var(--g-master-done); }
.signin-chart .c-short { fill: var(--g-stp); }
.signin-chart .c-short-done { fill: var(--g-stp-done); }
.signin-chart .c-critical { fill: var(--g-critical); }
.signin-chart .c-link { stroke: var(--g-link); stroke-width: 1; fill: none; }
.signin-chart .c-today { fill: var(--g-today); }
.signin-chart .c-flag { fill: var(--stp-brand); }
.signin-chart .c-flagtext { fill: var(--stp-on-brand); font-size: 9.5px; font-weight: 600; text-anchor: middle; }

.signin-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--stp-muted);
}

.signin-points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signin-points .dot {
  width: 18px;
  height: 8px;
  border-radius: 2px;
}

.signin-points .dot.short { background: var(--g-stp-done); }
.signin-points .dot.amber { background: var(--stp-brand); }
.signin-points .dot.master { background: var(--g-master); }

/* ---------------------------------------------------------------- the form */

.signin-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: var(--stp-bg);
}

.signin-card {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  border-radius: 8px;
  background: var(--stp-surface);
  box-shadow: var(--shadow-1);
}

.signin-card h1 {
  margin: 0;
}

.signin-card .form-label {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
}

.signin-card .form-control {
  height: 38px;
}

.signin-card .btn {
  height: 38px;
  font-size: 14px;
}

/* What went wrong, said plainly above the fields. */
.signin-error:not(.validation-summary-valid) {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--stp-danger) 10%, var(--stp-surface));
  color: var(--stp-danger);
  font-size: 13.5px;
}

.signin-error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.signin-help {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--stp-muted);
}

.signin-brand.small-only {
  display: none;
  margin-bottom: 24px;
}

/* On a narrow screen the picture gives way and the form stands alone. */
@media (max-width: 900px) {
  .signin {
    grid-template-columns: minmax(0, 1fr);
  }

  .signin-art {
    display: none;
  }

  .signin-brand.small-only {
    display: flex;
  }
}

/* Registering: what a Basic account gives, beside what a full one adds. */
.plan-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 620px;
  margin-bottom: auto;
}

.plan-col {
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--stp-surface);
  box-shadow: var(--shadow-1);
}

.plan-col.muted {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--stp-border);
  color: var(--stp-muted);
}

.plan-col h3 {
  margin: 0 0 8px;
  font: 650 15px/20px var(--font-display);
}

.plan-col ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 13.5px;
  line-height: 20px;
}

.plan-col li {
  margin-top: 4px;
}