/* Signed out, as the Calmer mock's C0-SignIn (output/calmer-mock/render/C0-SignIn.html): values copied from it. */
body:has(.si) > header.top { display: none; }
main.wrap:has(> .si) { max-width: none; padding: 0 16px; }
.si { min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 96px; color: #1D1D1B; animation: si-in .8s ease both; }
@keyframes si-in { from { opacity: 0; } to { opacity: 1; } }
.si-pages { position: relative; width: 440px; height: 420px; flex: none; }
.si-pg { position: absolute; width: 180px; height: 270px; border-radius: 4px 10px 10px 4px; overflow: hidden; box-shadow: 0 14px 34px rgba(29,29,27,0.18); }
.si-pg img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the type keeps the mock's normal line height */
.si { line-height: normal; }
/* the sign-in column is a glass panel over the wash (wash.css .glass) */
.si-main { width: 480px; max-width: 100%; padding: 40px; border-radius: 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.si-brand { font: 400 22px 'Libre Caslon Display', Georgia, serif; color: #0F5F5C; }
.si h1 { margin: 0; font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 48px; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
.si-k { margin: 0; font-size: 17px; color: #5C5A55; }
.si-first { margin-top: 14px; }
.si-form { display: flex; flex-direction: column; gap: 14px; }
.si-label { position: absolute; left: -9999px; }
.si-btn { min-height: 52px; padding: 0 28px; border-radius: 16px; font: 600 17px 'Atkinson Hyperlegible Next', system-ui, sans-serif; border: 1px solid #D6D3CC; background: #FFFFFF; color: #1D1D1B; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: background .2s ease; }
.si-btn:hover { background: #FBFAF7; color: #1D1D1B; }
.si-btn.p { background: #0F5F5C; border-color: #0F5F5C; color: #FFFFFF; }
.si-btn.p:hover { background: #0A4644; border-color: #0A4644; }
.si-btn:disabled { opacity: .6; cursor: default; }
.si-in { width: 100%; height: 52px; border: 1px solid #D6D3CC; border-radius: 16px; padding: 0 22px; font: 16px 'Atkinson Hyperlegible Next', system-ui, sans-serif; background: #FFFFFF; color: #1D1D1B; box-sizing: border-box; }
.si-in:focus { outline: 2px solid #0F5F5C; outline-offset: 2px; }
.si-or { display: flex; align-items: center; gap: 12px; color: #5C5A55; font-size: 14px; }
.si-or span { flex: 1; height: 1px; background: #E2DFD8; }
.si-sent { margin: 14px 0 0; font-size: 17px; }
.si-err { margin: 0; font-size: 15px; color: #B42318; }
.si-dev { margin: 8px 0 0; font-size: 14px; color: #5C5A55; }
.si-dev a { color: #5C5A55; }
/* a quiet way on: underlined teal words, as the Calmer screens' links */
.si-link { align-self: center; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; font: 500 16px 'Atkinson Hyperlegible Next', system-ui, sans-serif; color: #0F5F5C; text-decoration: underline; text-underline-offset: 3px; }
.si-link:hover { color: #0A4644; }
.si-link[hidden] { display: none; }

/* Where should we keep your book? (keep.html): her pictures beside the sign-in column, with the app's header kept */
.kp { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; gap: 96px; color: #1D1D1B; line-height: normal; animation: si-in .8s ease both; }
.kp .si-main { text-align: left; }
.kp h1 { margin: 0 0 6px; font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 40px; letter-spacing: -0.01em; line-height: 1.1; }

@media (max-width: 960px) {
  .si, .kp { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 24px 0 48px; }
  .si-pages { transform: scale(.7); margin: -50px 0 -70px; }
  .si h1 { font-size: 40px; }
}