/* Daily Life Doc: Create account and Sign in (js/signin.js), in the look of the existing app's first screens
   (../daily-life-app/css/onboarding.css): a large title, labelled white fields 56 px high, the main button and the
   second button at the foot, and a small picture of a document with controls above the title. */
.signin { z-index: 47; padding: calc(var(--top) + 8px) 18px 0; }
.ac-screen { min-height: 100%; display: flex; flex-direction: column; animation: dd-rise 320ms var(--ease-out) both; }

/* The picture: a small document, two sections, lines with a control chip at the end. */
.ac-pic { flex: 1 1 auto; min-height: 150px; display: grid; place-items: center; padding: 6px 0 14px; }
.ac-doc { width: min(74%, 264px); padding: 16px 18px 18px; border-radius: 24px; background: var(--surface); box-shadow: 0 24px 40px -28px var(--shadow); transform: rotate(-2deg); }
.ac-doc b { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 600; margin: 0 0 4px; }
.ac-doc b .tile { width: 24px; height: 24px; border-radius: 8px; } .ac-doc b .tile svg { width: 14px; height: 14px; }
.ac-doc b + p + p + b { margin-top: 12px; }
.ac-doc p { display: flex; align-items: center; gap: 10px; height: 30px; padding-left: 14px; position: relative; }
.ac-doc p::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }
.ac-doc p i { flex: 0 0 62%; height: 9px; border-radius: 5px; background: var(--soft); }
.ac-doc p i.s { flex: 0 0 48%; } .ac-doc p i.m { flex: 0 0 56%; } .ac-doc p i.u { flex: 0 0 72%; }
/* The sample values look as an answered value looks on Today since round 5: ink, semibold, no underline. */
.ac-chip { flex: none; margin-left: -2px; color: var(--ink); font-size: var(--t-s); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-view="signin"] .ac-pic { min-height: 190px; }

.ac-q { flex: none; font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; }
.ac-form { flex: none; display: flex; flex-direction: column; }
.ac-fields { display: flex; flex-direction: column; gap: 10px; }
.ac-field { display: flex; flex-direction: column; gap: 6px; }
.ac-lbl { font-size: var(--t-sm); font-weight: 600; color: var(--ink2); margin: 2px 2px 0; }
.ac-field input { height: 56px; width: 100%; border: 0; border-radius: 16px; padding: 0 16px; background: var(--surface); font: 500 var(--t-l) var(--font); color: var(--ink); }
.ac-ferr { font-size: var(--t-s); font-weight: 500; color: var(--bad-d); margin: 0 2px; }
.ac-ferr.shake { animation: ac-shake 200ms ease; }
@keyframes ac-shake { 33% { transform: translateX(-5px); } 66% { transform: translateX(5px); } }
.ac-state { min-height: 20px; margin-top: 8px; text-align: center; font-size: var(--t-s); color: var(--ink2); }
.ac-foot { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 24px; }