/* Sign-in pages: a wall growth chart, the one every pediatric office has, runs up the side. */

body.auth { background: var(--paper); }
.door { display: grid; grid-template-columns: minmax(19rem, 5fr) 7fr; min-height: 100vh; }

.door-art {
  background: var(--lagoon);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 3rem 2.5rem 3.25rem 7.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.door-name { font-family: var(--round); font-weight: 800; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.02em; }
.door-name small { display: block; font-size: 1.1rem; font-weight: 600; opacity: .9; margin-top: .6rem; letter-spacing: 0; }

.ruler {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4.5rem;
  background-color: var(--sun);
  background-image:
    repeating-linear-gradient(to top, var(--ink) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(to top, var(--ink) 0 3px, transparent 3px 96px);
  background-size: 14px 100%, 30px 100%;
  background-repeat: no-repeat;
  background-position: right top, right top;
}
.ruler b {
  position: absolute;
  left: .55rem;
  font-family: var(--round);
  font-weight: 800;
  font-size: .95rem;
  color: var(--ink);
  transform: translateY(50%);
}
.ruler .ft2 { bottom: 96px; }
.ruler .ft3 { bottom: 288px; }
.ruler .ft4 { bottom: 480px; }
.ruler .ft5 { bottom: 672px; }

.mark {
  position: absolute;
  left: 4.5rem;
  padding: .2rem 1.4rem .2rem .7rem;
  font-family: var(--round);
  font-weight: 750;
  font-size: .85rem;
  color: var(--ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
  transform: translateY(50%);
}
.mark.m1 { bottom: 232px; background: #ffd9e2; }
.mark.m2 { bottom: 408px; background: #cdeedd; }
.mark.m3 { bottom: 560px; background: #fff; }

.door-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.door-form .inner { width: 100%; max-width: 24rem; }
.door-form h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.door-form .lede { color: var(--ink-soft); margin-bottom: 1.5rem; }
.door-form .btn { width: 100%; margin-top: .25rem; }
.door-form .after { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .95rem; }
.door-form .after p { margin-bottom: .5rem; }

@media (max-width: 800px) {
  .door { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
  .door-art { padding: 1.5rem 1.25rem 2.6rem; justify-content: flex-start; }
  .door-name { font-size: 1.7rem; }
  .door-name small { font-size: .95rem; margin-top: .25rem; }
  .ruler {
    top: auto; right: 0; width: auto; height: 1.5rem;
    background-image:
      repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 12px),
      repeating-linear-gradient(to right, var(--ink) 0 3px, transparent 3px 72px);
    background-size: 100% 8px, 100% 15px;
    background-position: left top, left top;
  }
  .ruler b, .mark { display: none; }
  .door-form { align-items: flex-start; padding-top: 2rem; }
}