/* The door: sign-in, join, reset and account pages. Tracy's design, ported from the prototype's access.py
   (_LOGIN_CSS and _PAGE_CSS) into one file; new pieces follow the same palette, type and spacing. */

:root {
  --ink: #2A3850; --text: #3A3734; --dark: #23201D; --soft: #6B6259; --field: #4C4A47;
  --muted: rgba(74,72,71,0.68); --line: rgba(74,72,71,0.14); --warn: #A8756A;
  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'Jost', 'Century Gothic', sans-serif; color: var(--text); -webkit-font-smoothing: antialiased;
  background: radial-gradient(72% 60% at 50% 44%, #F1E6E4 0%, rgba(247,240,234,0.55) 55%, rgba(250,243,238,0) 100%),
              linear-gradient(180deg, #FBF7F3 0%, #FAF3EE 100%); background-attachment: fixed; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
[hidden] { display: none !important; }
button:focus { outline: none; }

/* ---- the login column: the mark, a line of welcome text, field boxes, one round button ---- */
.login { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6vh var(--gutter) max(6vh, env(safe-area-inset-bottom)); }
.column { width: 100%; max-width: 23rem; display: flex; flex-direction: column; align-items: center; }
.mark { display: block; width: 78%; height: auto; margin-bottom: 4.6vh; animation: arrive 2.4s ease 0.6s both; }
.lead { width: 30rem; max-width: calc(100vw - 2 * var(--gutter)); margin: 0 0 2.2vh; text-align: center; text-wrap: pretty;
  font-size: 1.04rem; letter-spacing: 0.02em; line-height: 1.85; font-weight: 400; color: var(--soft); }
.step { width: 100%; display: flex; flex-direction: column; gap: 14px; animation: arrive 1.6s ease both; }

.fieldBox { width: 100%; padding: 15px 20px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,0.4); }
.fieldBox input { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: 0.02em; font-weight: 400;
  line-height: 1.7; color: var(--field); caret-color: #CBB9AC; }
.fieldBox input::placeholder { color: var(--muted); opacity: 1; }
.fieldBox input:-webkit-autofill, .fieldBox input:-webkit-autofill:hover, .fieldBox input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--field); -webkit-box-shadow: 0 0 0 1000px #FAF4EF inset; caret-color: #CBB9AC; }
.fieldBox:focus-within { border-color: rgba(42,56,80,0.38); background: rgba(255,255,255,0.62); }
.fieldBox.eyed { position: relative; padding-right: 52px; }
.fieldBox input.code { letter-spacing: 0.3em; text-align: center; }
.eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none;
  background: none; cursor: pointer; padding: 0; color: rgba(74,72,71,0.55); display: grid; place-items: center; }
.eye:hover, .eye[aria-pressed=true] { color: var(--ink); }
.eye svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .fieldBox input, .fieldBox input::placeholder { font-size: 16px; } }

.go { margin-top: 1.4vh; align-self: center; background: none; cursor: pointer; padding: 11px 30px; border-radius: 999px;
  border: 1px solid rgba(42,56,80,0.28); font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); transition: color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease; }
.go:hover { border-color: rgba(42,56,80,0.5); }
.go:disabled { opacity: 0.32; cursor: default; }
.go:focus-visible, .link:focus-visible { outline: 1px solid rgba(42,56,80,0.35); outline-offset: 3px; }
.go.quiet { border-color: transparent; }

.notice { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; letter-spacing: 0.01em; color: var(--warn);
  padding: 0 4px; text-align: center; margin: 0; }
.notice:empty { display: none; }
.text { margin: 0; text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6;
  color: rgba(58,55,52,0.9); }
.note, .helper { margin: -2px 0 0; text-align: center; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11.5px; font-weight: 300; letter-spacing: 0.02em; line-height: 1.6; color: var(--muted); }
.link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: rgba(58,55,52,0.9);
  text-decoration: underline; text-decoration-color: rgba(74,72,71,0.28); text-underline-offset: 3px; }
.link:hover { color: #023028; text-decoration-color: rgba(2,48,40,0.4); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-family: 'Inter', sans-serif; font-size: 12.5px;
  font-weight: 300; color: rgba(58,55,52,0.9); }
.under { margin-top: 3.4vh; padding: 6px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; letter-spacing: 0.02em;
  color: rgba(74,72,71,0.78); text-align: center; animation: arrive 2.4s ease 2s both; }
.under a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot { margin-top: 6.5vh; max-width: 30rem; text-align: center; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 0.02em; line-height: 1.6; color: rgba(74,72,71,0.82); animation: arrive 2.4s ease 2.5s both; }

/* the tick box */
.agree { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--text); letter-spacing: 0.01em; transition: opacity 0.4s ease; text-align: left; }
.agree.waiting { opacity: 0.45; cursor: default; }
.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1px solid rgba(42,56,80,0.4);
  background: rgba(255,255,255,0.5); display: grid; place-items: center; transition: background 0.3s ease, border-color 0.3s ease; }
.tick svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.25s ease; }
.agree input:checked + .tick { background: var(--ink); border-color: var(--ink); }
.agree input:checked + .tick svg { opacity: 1; }
.agree input:focus-visible + .tick { outline: 1px solid rgba(42,56,80,0.35); outline-offset: 3px; }

/* the authenticator QR and key */
.qr { align-self: center; margin: 2px 0; }
.qr svg { width: 15rem; height: 15rem; max-width: 100%; display: block; }
.key { margin: 0; text-align: center; font-family: 'Inter', sans-serif; font-size: 12.5px; letter-spacing: 0.1em; word-break: break-all; color: var(--field); }

/* recovery codes */
.codes { margin: 0; padding: 16px 20px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,0.4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; list-style: none; font-family: 'Inter', monospace;
  font-size: 14px; letter-spacing: 0.08em; color: var(--field); text-align: center; }

/* ---- the sheet: the consent terms and the account page ---- */
.stage { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(4vh, env(safe-area-inset-top)) 16px max(4vh, env(safe-area-inset-bottom)); }
.sheet { width: 100%; max-width: 34rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px;
  background: rgba(255,255,255,0.46); box-shadow: 0 18px 50px rgba(74,60,50,0.07); animation: arrive 2.2s ease 0.4s both; overflow: hidden; }
.sheet h1 { margin: 0; padding: 28px 30px 8px; font-weight: 300; font-size: 1.5rem; letter-spacing: 0.01em; color: var(--ink); }
.sheet .lead { width: auto; max-width: none; padding: 0 30px 16px; margin: 0; text-align: left; font-size: 0.94rem; }
.terms { position: relative; }
.scroll { max-height: 34vh; overflow-y: auto; padding: 18px 30px 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.28); font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14.5px; font-weight: 300;
  line-height: 1.7; color: var(--text); letter-spacing: 0.005em; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(74,72,71,0.22) transparent; }
.scroll h1, .scroll h2, .scroll h3 { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); margin: 22px 0 8px; padding: 0; }
.scroll h2:first-child { margin-top: 2px; }
.scroll p { margin: 0 0 12px; } .scroll ul { margin: 0 0 12px; padding-left: 1.15rem; } .scroll li { margin: 0 0 7px; }
.terms::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,247,243,0) 0%, rgba(251,247,243,0.92) 100%); transition: opacity 0.5s ease; }
.terms.end::after { opacity: 0; }
.hint { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 1; text-align: center; font-family: 'Inter', sans-serif; font-size: 11px;
  font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(74,72,71,0.62); pointer-events: none; transition: opacity 0.5s ease; }
.terms.end .hint { opacity: 0; }
.sheetFoot { padding: 20px 30px 22px; display: flex; flex-direction: column; gap: 14px; }
.plain { padding: 30px; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14.5px; font-weight: 300; line-height: 1.7; }
.plain p { margin: 0 0 10px; color: var(--dark); font-weight: 400; }
.plain .note { text-align: left; font-size: 13.5px; color: rgba(58,55,52,0.82); }
.plain a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(42,56,80,0.35); }

/* the account page's sections */
.section { padding: 18px 30px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--text); }
.section h2 { margin: 0; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row .meta { color: var(--muted); font-size: 12px; }
.section .go { margin-top: 0; align-self: flex-start; }

@media (max-width: 600px) {
  .stage { padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); justify-content: flex-start; }
  .sheet { border-radius: 20px; }
  .sheet h1 { padding: 22px 22px 6px; font-size: 1.3rem; } .sheet .lead { padding: 0 22px 12px; }
  .scroll { padding: 14px 22px 40px; } .sheetFoot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .section { padding: 16px 22px; } .plain { padding: 24px 22px; } .codes { grid-template-columns: 1fr; }
}

/* ---- the cohort door, 1:1 (Tracy, 2026-10-25): the first-time page and the sign-in page exactly as the cohort room
   draws them (mg_loop/access.py _LOGIN_CSS, phone_join_page, phone_login_page, _CONSENT_OVERLAY_CSS at 791e73b) ---- */
.login .lead { animation: arrive 2.6s ease 1.2s both; }
.login form.flow { width: 100%; display: flex; flex-direction: column; gap: 14px; animation: arrive 2.6s ease 1.7s both; }
.flow > div:not(.fieldBox) { display: flex; flex-direction: column; gap: 14px; }
#notice { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; letter-spacing: 0.01em; color: var(--warn);
  padding: 0 4px; text-align: center; min-height: 0; }
#notice:not(:empty) { padding: 2px 4px 4px; }
.login .helper { margin: -6px 0 0; }
.login .note { margin: -2px 0 0; }
.login .foot { white-space: nowrap; }
.enrolText { margin: 0; text-align: center; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 300; line-height: 1.6;
  color: rgba(74,72,71,0.78); }
.login #sentline, .login #resend { font-size: 13px; font-weight: 400; color: rgba(58,55,52,0.9); }
.login .enrolText a { color: rgba(58,55,52,0.9); font-weight: 400; text-decoration: underline; text-decoration-color: rgba(74,72,71,0.28);
  text-underline-offset: 3px; transition: color 0.3s ease; }
.login .enrolText a:hover, .login .enrolText a:focus-visible { color: #023028; text-decoration-color: rgba(2,48,40,0.4); outline: none; }

/* the spent-link page: one short sheet, centred on a phone too, rising as it arrives */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stage.short .sheet { animation: rise 2.2s ease 0.4s both; }
.stage.short .plain .note { text-align: left; letter-spacing: normal; line-height: 1.7; margin: 0 0 10px; font-weight: 300; }
@media (max-width: 600px) { .stage.short { justify-content: center; } }

/* the terms, laid over the first-time page until they are agreed */
#consent { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(250,243,238,0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: arrive 1.2s ease both; }
#consent[hidden] { display: none !important; }
#consent .sheet { width: 100%; max-width: 34rem; max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  border: 1px solid rgba(74,72,71,0.16); border-radius: 24px; background: #FBF7F3; box-shadow: 0 18px 50px rgba(74,60,50,0.10);
  overflow: hidden; animation: none; }
#consent h1 { margin: 0; padding: 26px 30px 6px; font-family: 'Jost','Century Gothic',sans-serif; font-weight: 300; font-size: 1.5rem; color: #2A3850; }
#consent .lead { width: auto; max-width: none; margin: 0; padding: 0 30px 14px; text-align: left; font-family: 'Jost','Century Gothic',sans-serif;
  font-size: 0.94rem; letter-spacing: 0.02em; line-height: 1.85; font-weight: 400; color: #2A3850; animation: none; }
#consent .terms { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
#consent .scroll { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 18px 30px 40px;
  border-top: 1px solid rgba(74,72,71,0.16); border-bottom: 1px solid rgba(74,72,71,0.16); background: rgba(255,255,255,0.35);
  font-family: 'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: #3A3734;
  overscroll-behavior: contain; scrollbar-width: auto; scrollbar-color: auto; letter-spacing: normal; }
#consent .scroll h1, #consent .scroll h2, #consent .scroll h3 { font-family: 'Jost',sans-serif; font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #6B6259; margin: 22px 0 8px; padding: 0; }
#consent .scroll h2:first-child { margin-top: 2px; }
#consent .foot { margin: 0; max-width: none; white-space: normal; text-align: left; padding: 18px 30px 22px; display: flex;
  flex-direction: column; gap: 16px; animation: none; }
#consent .agree { color: #3A3734; }
#consent .go { margin-top: 0; }
@media (max-width: 600px) {
  #consent { padding: 12px; } #consent .sheet { border-radius: 20px; max-height: calc(100dvh - 24px); }
  #consent h1 { padding: 22px 22px 6px; font-size: 1.3rem; } #consent .lead { padding: 0 22px 12px; }
  #consent .scroll { padding: 14px 22px 40px; } #consent .foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); }
}

/* the field at fault (Tracy, 2026-10-25): a red dot just outside the box, to its left, gone as soon as the field is edited;
   the error line one step bolder. The dot sits in the page's side gutter (24px at least), so it never crowds the field. */
.login .fieldBox { position: relative; }
.login .fieldBox.err::before { content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #B9524A; animation: arrive 0.4s ease both; pointer-events: none; }
#notice { font-weight: 500; font-size: 13px; }

/* Tracy, 2026-10-26: room between the join form's button and its "Sign in" line; and the reset page's headings centred
   (a .lead is wider than the column, and inside a .step it overflowed to the right instead of evenly) */
.login #haveAccount { margin-top: 22px; }
.step > .lead { align-self: center; }