/* auth-pages.css — the sign-in and setup pages (2026-11-12).
   Both pages are built on the HOMEPAGE's stylesheet and classes (public/homepage/styles.css). This file only holds
   what those two pages need on top of it; a colour, a shape or a type choice belongs in the homepage sheet. */

/* These are pages you pass through, not a landing page: the heading is a small title, and every bar is one height (64px; the homepage's hero bar is 72px) with its controls to match. */
/* THE LAYOUT: the logo alone at the top (40px down), the wordmark alone at the bottom (40px up), and the page's own content
   centred in the space between them (auto margins; on a page taller than the screen there is no space left and the
   three simply follow each other). */
.auth-page .home-content-container { justify-content: flex-start; padding-top: 40px; padding-bottom: 40px; }
.auth-page .auth-logo { display: block; flex: none; margin: 0 0 40px; pointer-events: auto; }
.auth-page .auth-logo .makeboard-logo { display: block; width: 40px; }
.auth-page .auth-wordmark { display: block; flex: none; margin: auto 0 0; padding-top: 40px; pointer-events: auto; text-decoration: none; }
.auth-page .auth-logo + * { margin-top: auto; }
/* A page that asks for the lockup at every size (the setup page): logo and wordmark side by side at the top,
   nothing at the bottom. */
.auth-page.auth-lockup .auth-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.auth-page.auth-lockup .auth-logo .makeboard-logo { width: 35px; }
.auth-page.auth-lockup .auth-logo-word { display: inline; }
.auth-page.auth-lockup .auth-wordmark { display: none; }
.auth-page.auth-lockup .home-content-container > :last-child { margin-bottom: auto; }

/* On a phone or a narrow window the two are side by side again at the top (the homepage's own lockup), and the
   wordmark at the bottom is not shown. */
.auth-page .auth-logo-word { display: none; }
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) {
  .auth-page .auth-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .auth-page .auth-logo .makeboard-logo { width: 35px; }
  .auth-page .auth-logo-word { display: inline; }
  .auth-page .auth-wordmark { display: none; }
  .auth-page:not(.auth-lockup) .home-content-container > :nth-last-child(2) { margin-bottom: auto; }
}
@media (max-height: 640px) { .auth-page .home-content-container { padding-top: 28px; padding-bottom: 24px; } }

/* THE SPLIT (sign-in and setup): the form on a calm half, and on the other half the homepage's own pictures — its
   dotted lavender and its floating screens (mockups.js), spread to fill the half, no words. Side by side on a wide
   screen; stacked on a phone or a narrow window, the pictures on top and the form underneath.
   The shapes keep their own shape, colour, drag and bob; only WHERE each sits and how big is set here, per slot
   (the homepage scatters them around its headline, which would leave this half's middle empty). */
body.auth-split { background: #fbf8f3; }
.auth-aside { display: none; }
.auth-split .auth-aside { display: block; overflow: hidden; z-index: 1; }
.auth-split .auth-aside .floating-mockups { z-index: 1; }
.auth-split .auth-aside .mockup,
.auth-split .auth-aside .mockup.on-phone { display: block; top: var(--a-top); left: var(--a-left, auto); right: var(--a-right, auto); width: var(--a-w); }
/* on the calm half the bars are solid white (the glass needs the lavender behind it to read) */
.auth-split .home-content-container .glassmorphic-input { background: #ffffff; }
.auth-split .auth-chips .chip { background: #ffffff; box-shadow: 0 1px 2px rgba(31, 59, 44, 0.10); }
.auth-split .auth-chips .chip.is-on { background: #1f3b2c; box-shadow: none; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  /* side by side, the pictures on the left and the form on the right; the logo and the wordmark sit 40px from the top and the bottom */
  .auth-split .home-content-container { width: 50%; margin: 0 0 0 50%; padding-top: 40px; padding-bottom: 40px; }
  .auth-split .page-dither { right: 50%; }
  .auth-split .auth-aside { position: fixed; top: 0; left: 0; width: 50%; height: 100vh; height: 100dvh; }
  /* scattered, not in rows: six places and six sizes that fill the half without lining up (a size is a share of the
     half's width, capped by the screen's height so a wide, short window never crowds them) */
  .auth-aside .mockup:nth-child(1) { --a-top: 4%;  --a-left: 5%;   --a-w: min(40%, 31vh); }   /* eight: big, top left */
  .auth-aside .mockup:nth-child(4) { --a-top: 13%; --a-right: 6%;  --a-w: min(27%, 21vh); }   /* flower: smaller, upper right */
  .auth-aside .mockup:nth-child(5) { --a-top: 33%; --a-left: 30%;  --a-w: min(33%, 26vh); }   /* arch: through the middle */
  .auth-aside .mockup:nth-child(2) { --a-top: 46%; --a-right: 4%;  --a-w: min(26%, 20vh); }   /* asterisk: right edge */
  .auth-aside .mockup:nth-child(3) { --a-top: 60%; --a-left: 3%;   --a-w: min(28%, 22vh); }   /* cookie: lower left */
  .auth-aside .mockup:nth-child(6) { --a-top: 72%; --a-right: 14%; --a-w: min(36%, 28vh); }   /* ellipses: big, bottom */
  /* a narrower column on the half page: the bars, the title above them and the lines below share one width */
  body.auth-split .home-content-container .ai-chat-input-container,
  body.auth-split .home-content-container .greeting-text,
  body.auth-split .home-content-container .auth-lede,
  body.auth-split .home-content-container .auth-group,
  body.auth-split .home-content-container .auth-buttons,
  body.auth-split .home-content-container .auth-line { max-width: 520px; }
}
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) {
  /* stacked: the picture half is a band at the top of the page (it scrolls away with it), the form half follows */
  html:has(body.auth-split) { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; overscroll-behavior: auto; }
  body.auth-split { overflow: visible; height: auto; min-height: 100%; overscroll-behavior: auto; }
  body.auth-split { display: flex; flex-direction: column; --auth-band: max(38vh, 250px); }
  .auth-split .auth-aside { order: -1; position: relative; flex: none; width: 100%; height: var(--auth-band); }
  .auth-split .page-dither { position: absolute; inset: 0 0 auto 0; height: var(--auth-band); }
  .auth-split .home-content-container { height: auto; min-height: calc(100vh - var(--auth-band)); min-height: calc(100dvh - var(--auth-band)); padding-top: 28px; padding-bottom: 28px; }
  .auth-split .auth-logo { margin-bottom: 24px; }
  /* scattered across the band, different sizes, nothing lined up */
  .auth-aside .mockup:nth-child(1) { --a-top: 6%;  --a-left: 3%;   --a-w: min(34%, 19vh); }
  .auth-aside .mockup:nth-child(4) { --a-top: 30%; --a-left: 41%;  --a-w: min(21%, 13vh); }
  .auth-aside .mockup:nth-child(5) { --a-top: 5%;  --a-right: 4%;  --a-w: min(26%, 15vh); }
  .auth-aside .mockup:nth-child(2) { --a-top: 52%; --a-left: 12%;  --a-w: min(23%, 13.5vh); }
  .auth-aside .mockup:nth-child(3) { --a-top: 62%; --a-left: 46%;  --a-w: min(24%, 14vh); }
  .auth-aside .mockup:nth-child(6) { --a-top: 47%; --a-right: 2%;  --a-w: min(27%, 15.5vh); }
  .auth-aside .mockup-sparkle { display: none; }
}

.auth-page .home-content-container .greeting-text { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 14px;
  /* a title, not a hero: left-aligned on the form's column (in line with the text inside the bars), and ONE line that
     only wraps when the screen is too narrow for it (the homepage forces its two lines apart) */
  width: 100%; max-width: 600px; padding: 0 20px; text-align: left; text-wrap: balance; }
.auth-page .home-content-container .greeting-text .hero-line { display: inline; white-space: normal; }
/* one face, one weight: a small section title (h3/h4 size), not the homepage's bold-plus-serif headline */
.auth-page .home-content-container .greeting-text .hero-line + .hero-line { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
@media (max-width: 511px) { .auth-page .home-content-container .greeting-text { font-size: 20px; } }
.auth-page .glassmorphic-input,
.auth-page button.glassmorphic-input { height: 64px; min-height: 64px; padding: 6px; box-sizing: border-box; }
.auth-page .glassmorphic-input .home-input-slider-toggle { height: 52px; border-radius: 26px; }
.auth-page .glassmorphic-input .slider-toggle-slider::before { top: 4px; left: 4px; height: calc(100% - 8px); width: calc(50% - 4px); border-radius: 22px; }
.auth-page .glassmorphic-input .slider-toggle-option { font-size: 15px; padding: 0 16px; }
.auth-page .glassmorphic-input .slider-toggle-icon,
.auth-page .glassmorphic-input .slider-toggle-option[data-option] .slider-toggle-icon { width: 18px; height: 18px; }
.auth-page .glassmorphic-input .home-input-send-btn { width: 52px; height: 52px; }
.auth-page .glassmorphic-input .home-input-send-btn svg { width: 24px; margin-top: 2px; margin-left: 1px; }
.auth-page .glassmorphic-input .home-input-field { font-size: 16px; }
.auth-page .waitlist-main { font-size: 16px; }
.auth-page .waitlist-sub { font-size: 12px; }
@media (max-width: 511px) {
  /* the homepage's icon-only toggle, sized to the shorter bar */
  .auth-page .glassmorphic-input .home-input-slider-toggle { width: 100px; }
  .auth-page .glassmorphic-input .slider-toggle-slider { padding: 0 4px; }
  .auth-page .glassmorphic-input .slider-toggle-slider::before { width: 44px !important; height: 44px; top: 4px; left: 4px; border-radius: 50%; }
  .auth-page .glassmorphic-input .slider-toggle-input:checked + .slider-toggle-slider::before { transform: translateX(48px); }
  .auth-page .glassmorphic-input .slider-toggle-icon,
  .auth-page .glassmorphic-input .slider-toggle-option[data-option] .slider-toggle-icon { width: 18px !important; height: 18px !important; }
}

.auth-page .ai-chat-panel { gap: 12px; }
.auth-form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.auth-page [hidden] { display: none !important; }

/* With labels (wider screens) the toggle's two sides share the track equally, so the lime knob (half the track) sits
   under either label; "Email link | Password" is a little wider than the homepage's "Email | Phone". On a phone the
   homepage's own icon-only toggle is used as it is. */
@media (min-width: 512px) {
  .auth-page .glassmorphic-input .slider-toggle-slider { display: grid; grid-template-columns: 1fr 1fr; }
  .auth-page .glassmorphic-input .home-input-slider-toggle { max-width: 300px; }
}

/* A field is an <input> here (the homepage's is a one-line textarea): the same inset as its inline padding. */
.auth-page .glassmorphic-input input.home-input-field { height: 52px; padding: 0 16px; min-width: 0; font-family: inherit; }

/* The sign-in button is always there (the homepage hides its own on a phone until something is typed). */
@media (max-width: 600px) {
  .auth-page .glassmorphic-input:not(.has-value) .home-input-send-btn { width: 52px; margin-left: 0; opacity: 1; transform: none; pointer-events: auto; overflow: visible; }
}

/* With a password: the email bar gives up its send button, and the password bar's own appears once something is
   typed in it (the homepage's collapse, here at every size). */
.auth-page .glassmorphic-input .home-input-send-btn { transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), margin 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s; }
.auth-page .auth-form.is-password #bar .home-input-send-btn,
.auth-page .auth-form #pwBar:not(.has-value) .home-input-send-btn { width: 0; padding: 0; margin-left: -8px; opacity: 0; transform: scale(0.6); pointer-events: none; overflow: hidden; }

/* "Continue with Google": the glass pill itself is the button. */
.auth-page .auth-google { justify-content: center; gap: 10px; cursor: pointer; font-size: 15.5px; font-weight: 500; color: #1f3b2c; }
.auth-page .auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-page .auth-google:disabled { opacity: 0.6; cursor: default; }

/* Lines under the form: the homepage's consent line, in the flow. */
.auth-line { margin: 0; max-width: 600px; font-size: 12.5px; line-height: 1.45; color: rgba(31, 59, 44, 0.72); text-align: center; text-wrap: pretty; pointer-events: auto; }
.auth-line:empty { display: none; }
.auth-line a, .auth-line .link { color: #1f3b2c; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; padding: 0; }
.auth-line.is-error { color: #c8431a; font-weight: 500; }
.auth-line.is-ok { color: #1f3b2c; font-weight: 500; }
.auth-legal { margin-top: 6px; opacity: 0.85; }
/* the line that says what this step is (the welcome page), left-aligned under the title like the title itself */
.auth-intro { width: 100%; padding: 0 20px; text-align: left; font-size: 14px; margin-top: -4px; }
.auth-offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* a bar whose send button only shows once something is typed (the welcome page's password; see #pwBar on sign-in) */
.auth-page .auth-form #bar.wants-value:not(.has-value) .home-input-send-btn { width: 0; padding: 0; margin-left: -8px; opacity: 0; transform: scale(0.6); pointer-events: none; overflow: hidden; }

/* The green "done" pill holds two short lines; a long address must not push it out of shape. */
.auth-page .waitlist-sub { max-width: 100%; text-wrap: balance; line-height: 1.25; }
.auth-page .glassmorphic-input.is-done { height: auto; min-height: 64px; padding: 0; }
.auth-page .glassmorphic-input.is-done .waitlist-note { position: relative; inset: auto; flex: 1; padding: 12px 24px; }
.auth-page .glassmorphic-input.is-done > :not(.waitlist-note) { display: none; }

/* ── the setup page: three questions, so it may be taller than the screen (the homepage never scrolls) ── */
/* ⚠️ ONLY the page itself scrolls. The homepage sets `overflow: hidden; overscroll-behavior: none` on html AND body;
   making the body a scroller too (overflow: auto) left it a scroll box with nothing to scroll that also refused to
   pass the wheel on to the page: the page could not be scrolled at all. So the body is not a scroller here. */
html:has(body.auth-long) { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; overscroll-behavior: auto; }
body.auth-long { overflow: visible; height: auto; min-height: 100%; overscroll-behavior: auto; }
.auth-long .home-content-container { height: auto; min-height: 100vh; min-height: 100dvh; }
.auth-long .auth-lede { font-size: 16px; width: 100%; max-width: 600px; padding: 0 20px; text-align: left; margin-top: -8px; margin-bottom: 26px; }
.auth-long .auth-form { gap: 24px; }
.auth-group { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: auto; }
.auth-q { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #1f3b2c; }
.auth-group .auth-line { margin-top: -6px; }

/* The two ways on at the bottom of the setup page: the bars' height, filled pills, no outline. Continue is the
   homepage's green with lime ink; Skip is the plain white pill. */
.auth-buttons { width: 100%; max-width: 600px; display: flex; gap: 12px; pointer-events: auto; margin-top: 4px; }
.auth-btn { flex: 1 1 0; height: 64px; border-radius: 999px; background: #ffffff; color: #1f3b2c; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(31, 59, 44, 0.10); transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease, opacity 0.2s ease; }
.auth-btn.is-primary { flex: 1.6 1 0; background: #1f3b2c; color: #d6ff59; box-shadow: none; }
.auth-btn:hover { transform: scale(1.02); }
.auth-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Choices: filled pills, no outline. Off = the glass white; picked = the homepage's green with lime ink. */
.auth-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auth-chips .chip { font-size: 14.5px; font-weight: 500; padding: 9px 16px; border-radius: 999px; background: #ffffff8c; color: #1f3b2c; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }
.auth-chips .chip:hover { transform: scale(1.04); }
.auth-chips .chip.is-on { background: #1f3b2c; color: #d6ff59; }

/* ── the terms and privacy pages: the same page, with the text on one soft white sheet ── */
.legal-page .home-content-container { padding-bottom: 56px; }
/* the title and its date line sit on the sheet's column, in line with the sheet's text */
.legal-page .home-content-container .greeting-text { max-width: 680px; padding: 0 40px; margin-bottom: 8px; }
.legal-page .legal-date { width: 100%; max-width: 680px; padding: 0 40px; text-align: left; margin-bottom: 24px; }
.legal-sheet { width: 100%; max-width: 680px; padding: 34px 40px 36px; border-radius: 28px; background: #ffffffb8; pointer-events: auto;
  text-align: left; color: #2d3a2e; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.legal-sheet > :first-child { margin-top: 0; }
.legal-sheet > :last-child { margin-bottom: 0; }
.legal-sheet h2 { margin: 28px 0 6px; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: #1f3b2c; }
.legal-sheet p { margin: 0 0 12px; }
.legal-sheet ul { margin: 0 0 12px; padding-left: 20px; }
.legal-sheet li { margin: 0 0 6px; }
.legal-sheet li::marker { color: #1f3b2c; }
.legal-sheet a { color: #1f3b2c; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.legal-sheet b, .legal-sheet strong { color: #1f3b2c; }
.legal-nav { margin-top: 22px; }
@media (max-width: 600px) {
  .legal-sheet { padding: 24px 22px 26px; border-radius: 22px; font-size: 15.5px; }
  .legal-page .home-content-container .greeting-text, .legal-page .legal-date { padding: 0 22px; }
}