/* Sign in and sign up: one frame, two panes. Moving between them swaps the
   panes' sides and inverts their themes (night art + paper form for sign in,
   paper art + night form for sign up). */

.page-auth { background: var(--paper); }
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.auth__art, .auth__main { grid-row: 1; background: var(--bg); color: var(--fg);
  transition: background-color .9s var(--e-turn), color .9s var(--e-turn); }
.auth__art { grid-column: 1; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow: hidden; }
.auth__main { grid-column: 2; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: clamp(20px, 2.6vw, 36px) clamp(20px, 5vw, 80px); }
.auth[data-mode="signup"] .auth__art { grid-column: 2; }
.auth[data-mode="signup"] .auth__main { grid-column: 1; }

/* Art pane */
.auth__stage { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(70% 60% at 72% 40%, #3a2219, var(--night)); transition: opacity .9s var(--e-turn); }
.auth__glow { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--e-turn);
  background: radial-gradient(55% 45% at var(--gx, 68%) var(--gy, 38%), rgb(185 68 52 / .2), transparent 70%), radial-gradient(90% 70% at 20% 100%, rgb(228 217 196 / .9), transparent 70%), var(--paper); }
.auth[data-mode="signup"] .auth__stage { opacity: 0; }
.auth[data-mode="signup"] .auth__glow { opacity: 1; }
.auth__art-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 3.4vw, 52px); }
.auth__brand { font-size: 1.9rem; line-height: 1; color: inherit; text-decoration: none; align-self: flex-start; }
.auth__quote { margin: 0; max-width: 32rem; }
.auth__quote blockquote { margin: 0; }
.auth__fleuron { margin: 0 0 var(--s4); font-family: var(--serif); font-size: 2rem; color: var(--accent-text); transition: color .9s var(--e-turn); }
.auth__typed { position: relative; margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 1.1rem + 2.2vw, 3.35rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: pretty; }
.auth__sign { margin: 0; font-size: var(--t-small); color: var(--fg-muted); transition: color .9s var(--e-turn); }

/* Smooth typing: every letter is laid out from the start (no reflow) and inked in turn. */
.tw-word { display: inline-block; white-space: nowrap; }
.tw-ch { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(.18em); transition: opacity .42s var(--e-settle), filter .42s var(--e-settle), transform .42s var(--e-settle); }
.tw-ch.is-in { opacity: 1; filter: none; transform: none; }
.tw-ch.is-out { opacity: 0; filter: blur(4px); transform: translateY(-.12em); transition-duration: .16s; }
.tw-caret { position: absolute; left: 0; top: 0; width: 2px; height: .92em; background: var(--accent-text); border-radius: 1px; transition: transform .09s linear, opacity .2s; will-change: transform; }
.tw-caret.is-idle { animation: tw-blink 1.05s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
html.reduce-motion .tw-ch { opacity: 1; filter: none; transform: none; transition: none; }
html.reduce-motion .tw-caret { display: none; }

/* Form pane */
.auth__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.auth__home { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-small); color: var(--fg-muted); text-decoration: none; transition: color .9s var(--e-turn); }
.auth__home:hover { color: var(--fg); }
.auth__preview { color: var(--fg-muted); }
.auth__forms { width: 100%; max-width: 30rem; margin: auto; padding-block: var(--s10); }
.auth__panel[hidden] { display: none; }
.auth__title { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.9rem); line-height: 1; outline: none; }
.auth__title em { color: var(--accent-text); transition: color .9s var(--e-turn); }
.auth__sub { margin-top: var(--s3); color: var(--fg-muted); font-size: 1.0625rem; transition: color .9s var(--e-turn); }
.auth__plan { margin-top: var(--s4); padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--t-small); }
.auth__plan strong { font-weight: 600; }
.auth__social { display: grid; gap: var(--s3); margin-top: var(--s8); }
.auth__oauth { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--pill);
  background: color-mix(in srgb, var(--fg) 3%, transparent); color: var(--fg); font: 500 1rem/1 var(--sans); cursor: pointer;
  transition: background-color .25s var(--e-paper), border-color .9s var(--e-turn), color .9s var(--e-turn); }
.auth__oauth:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.auth__or { display: flex; align-items: center; gap: var(--s4); margin: var(--s6) 0; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.auth__or::before, .auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth__form { display: grid; gap: var(--s5); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength span { height: 3px; border-radius: 2px; background: var(--line); transition: background-color .3s var(--e-paper); }
.strength[data-level="1"] span:nth-child(-n+1), .strength[data-level="2"] span:nth-child(-n+2) { background: var(--accent-text); }
.strength[data-level="3"] span:nth-child(-n+3), .strength[data-level="4"] span { background: #5f8a6a; }
.auth__submit { width: 100%; min-height: 54px; margin-top: var(--s2); font-size: 1.0625rem; }
.auth__switch { margin-top: var(--s8); text-align: center; color: var(--fg-muted); transition: color .9s var(--e-turn); }
.auth__switch a { color: var(--accent-text); font-weight: 500; }
.auth__legal { margin: 0; text-align: center; font-size: var(--t-micro); color: var(--fg-muted); transition: color .9s var(--e-turn); }

/* Preview result (what production would do) */
.auth__result:empty { display: none; }
.auth__result { padding: var(--s4); border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); border-radius: var(--radius); font-size: var(--t-small); }
.auth__result p { margin: 0 0 var(--s2); }
.auth__result pre { margin: var(--s2) 0; padding: var(--s3); overflow-x: auto; border-radius: 8px; background: color-mix(in srgb, var(--fg) 6%, transparent); font: 400 .78rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
.auth__result .auth__ok { font-family: var(--serif); font-size: 1.35rem; }

/* Sign-up steps and the consent choice */
.auth__steps { list-style: none; margin: var(--s8) 0 0; padding: 0; display: flex; gap: var(--s5); font-size: var(--t-small); color: var(--fg-muted); }
.auth__steps li { display: inline-flex; align-items: center; gap: .45rem; transition: color .4s var(--e-paper); }
.auth__steps .num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 50%; font-size: .75rem; transition: background-color .4s, color .4s, border-color .4s; }
.auth__steps [aria-current="step"] { color: var(--fg); }
.auth__steps [aria-current="step"] .num, .auth__steps .is-done .num { background: var(--terracotta); border-color: var(--terracotta); color: var(--paper); }
.consent { margin: var(--s5) 0 0; padding: 0; border: 0; min-width: 0; }
.consent__q { padding: 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; }
.consent__help { margin-top: var(--s2); font-size: .9375rem; color: var(--fg-muted); transition: color .9s var(--e-turn); }
.consent__choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
.consent__choice { position: relative; display: grid; gap: .2rem; padding: .95rem 1rem .95rem 2.9rem; border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color .25s var(--e-paper), background-color .25s var(--e-paper), transform .25s var(--e-settle); }
.consent__choice:hover { border-color: color-mix(in srgb, var(--fg) 50%, transparent); }
.consent__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.consent__mark { position: absolute; left: 1rem; top: 1.05rem; width: 20px; height: 20px; border: 1.5px solid color-mix(in srgb, var(--fg) 45%, transparent); border-radius: 50%; transition: border-color .2s; }
.consent__mark::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--terracotta); transform: scale(0); transition: transform .25s var(--e-settle); }
.consent__title { font-weight: 600; }
.consent__desc { font-size: var(--t-small); color: var(--fg-muted); }
.consent__choice:has(input:checked) { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 8%, transparent); }
.consent__choice:has(input:checked) .consent__mark { border-color: var(--terracotta); }
.consent__choice:has(input:checked) .consent__mark::after { transform: scale(1); }
.consent__choice:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.consent__note { margin-top: var(--s3); font-size: var(--t-small); color: var(--fg-muted); }
.auth__account { position: relative; margin-top: var(--s2); }
.auth__account > :not(.auth__locked) { transition: opacity .6s var(--e-settle), filter .6s var(--e-settle), transform .6s var(--e-settle); }
.auth__account[inert] { user-select: none; }
.auth__account[inert] > :not(.auth__locked) { opacity: .3; filter: saturate(0); transform: translateY(6px); }
.auth__locked { position: absolute; z-index: 1; left: 50%; top: 1.4rem; transform: translateX(-50%); margin: 0; padding: .4rem .85rem; border-radius: var(--pill);
  background: var(--fg); color: var(--bg); font: 500 var(--t-micro)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: opacity .3s; }
.auth__account:not([inert]) .auth__locked { opacity: 0; pointer-events: none; }

/* One column on small screens: the art becomes a band above the form; the themes still invert. */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__art, .auth[data-mode="signup"] .auth__art { grid-column: 1; grid-row: 1; position: relative; height: auto; min-height: 15rem; }
  .auth__main, .auth[data-mode="signup"] .auth__main { grid-column: 1; grid-row: 2; min-height: 0; }
  .auth__art-inner { gap: var(--s8); }
  .auth__typed { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.2rem); }
  .auth__sign { display: none; }
  .auth__forms { padding-block: var(--s6) var(--s10); }
  .consent__choices { grid-template-columns: 1fr; }
}
/* The quote is in the HTML (no reflow, readable without JS); with motion on it waits, invisible, to be typed. */
html.motion:not(.reduce-motion) .auth__typed:not(.is-typing) { color: transparent; }

/* Avatars, loaders and the founder's welcome */
.auth__submit .loading canvas { display: block; }
.auth__submit:disabled { cursor: progress; opacity: .92; }
.auth__who { display: flex; align-items: center; gap: .7rem; margin: var(--s2) 0 var(--s3) !important; }
.auth__who img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.auth__who > span { display: grid; font-size: .9375rem; color: var(--fg); overflow-wrap: anywhere; }
.auth__welcome { margin: var(--s3) 0; padding: var(--s4) 0; border-block: 1px solid var(--line); font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; }
.auth__welcome .signoff { margin-top: var(--s3); max-width: 15rem; font-family: var(--sans); }
.auth__continue { width: 100%; margin-top: var(--s2); }
.auth__payload summary { cursor: pointer; color: var(--fg-muted); font-size: var(--t-small); }

/* One agreement before any way in (round six) */
.auth__terms { display: grid; gap: .45rem; margin-top: var(--s6); padding: var(--s4) var(--s5); border-radius: var(--radius); background: color-mix(in srgb, var(--terracotta) 10%, transparent); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--d-ink), background-color var(--d-ink); }
.auth__terms.is-agreed { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.auth__terms.is-needed { box-shadow: 0 0 0 1.5px var(--terracotta); }
.auth__terms .field__err:empty { display: none; }
.auth__terms-note { margin: 0 0 0 calc(22px + .7rem); font-size: .8125rem; line-height: 1.45; color: var(--fg-muted); }
.auth__terms ~ .auth__social { margin-top: var(--s5); }
.auth__terms:not(.is-agreed) ~ .auth__social .auth__oauth { opacity: .6; }
.auth__terms:not(.is-agreed) ~ .auth__social .auth__oauth:hover { opacity: .8; }
.auth__clickwrap { margin: var(--s4) 0 0; font-size: .8125rem; line-height: 1.5; color: var(--fg-muted); text-align: center; }
.auth__clickwrap a { color: var(--accent-text); }

/* Production: the selected plan arrives from the server, and failures from the API. */
.auth__plan p { margin: 0; }
.auth__plan .label { margin-bottom: .2rem; }
.auth__plan .small { margin-top: .35rem; color: var(--fg-muted); }
.auth__result:has(.auth__fail) { border-style: solid; border-color: color-mix(in srgb, var(--accent-text) 55%, transparent); }
.auth__fail { color: var(--accent-text); }
.auth__legal a { color: inherit; }
.auth-checkout-link { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.auth-checkout-plan { font-family: var(--serif); font-size: 1.15rem; }