/******** STYLES USED BY COMMON LAYOUTS AND COMPONENTS ********/



/* -------- Unauthorised Layout -------- */

.unauth { display: grid; grid-template-rows: auto auto auto auto 1fr; margin: 0 auto; height: 100vh; background-color: var(--bright-navy); }
.unauth .header { display: flex; align-items: end; padding: 2.5rem 2.5rem 1rem 2.5rem; }
.unauth .header img { max-height: 3rem; }
.unauth .slice-start { margin-bottom: -1px; padding-top: 5.59%; background-color: var(--bs-body-bg); clip-path: polygon(0 calc(100% - 1px), 0 100%, 100% 100%, 100% 0);}
.unauth .body { padding: 2rem 2.5rem 1.5rem 2.5rem; background-color: var(--bs-body-bg); }
.unauth .body .actions { padding: .75rem 0 1.25rem 0; }
.unauth .slice-end { }
.unauth .bottom-fill { background-color: var(--bs-body-bg); }

@media (min-width: 576px) {
    .unauth { grid-template-rows: 1fr auto auto auto 1fr; width: 480px; }
    .unauth .header { padding-left: 0; }
    .unauth .header img { max-height: 4rem; }
    .unauth .slice-end { margin-top: -1px; padding-top: 5.59%; background-color: var(--bs-body-bg); clip-path: polygon(0 0, 100% 0, 100% 1px, 0 100%); }
    .unauth .bottom-fill { min-height: 2.5rem; background-color: transparent; }
}



/* -------- Components -------- */

.create-account-form { position: relative; min-height: 300px; }
.create-account-form .create-account-form-part { pointer-events: all; position: relative; top: 0; left: 0; width: 100%; z-index: 0; opacity: 1; transition: opacity 400ms, left 400ms; }
.create-account-form .create-account-form-part.behind { pointer-events: none; position: absolute; left: -1rem; opacity: 0; }
.create-account-form .create-account-form-part.ahead { pointer-events: none; position: absolute; left: 1rem; opacity: 0; }
.create-account-form .verification-code-input { font-family: 'SF Mono', monospace; font-size: 1.75rem; letter-spacing: 1px; }

.supported-browsers { font-size: 3rem; line-height: 3rem; }
.supported-browsers > i { color: #000; opacity: .25; }
.supported-browsers a { color: #000; opacity: .25; }
.supported-browsers a:hover { color: #000; opacity: .33; }

.user-notification { border-top: solid 1px #414950; padding: .75rem 0; }
.user-notification:last-child { padding-bottom: 0; }
.user-notification p { margin: 0; }
.user-notification p.date { margin-bottom: .25rem; color: #ffffff; }



/* -------- Dev Tools -------- */

.log-modal-content { }
.log-modal-content h2 { margin-bottom: 1rem; font-size: 1.25rem; font-weight:700; letter-spacing: -.25px; }
.log-modal-content p:not(.small) { font-size: 92.5%; }
.log-modal-content p.small { opacity: .5; user-select: none; }
.log-modal-content pre { padding: 1rem; font-size: 75%; background-color: var(--bs-tertiary-bg); border-radius: 2px; }
.log-modal-content pre:last-child { margin: 0; }

.graphql-playground-modal-content textarea { font-family: monospace; font-size: .875rem; line-height: 1.1rem; resize: none; }