/* Startup page: sign up / log in, then create a house or join one with an invite link. Same tokens and themes as styles.css. */
/* Themes: theme.js sets data-theme on <html> (dark, light, neon, sunset, ocean, rose, forest). Dark is the default, so it also applies with no attribute. */
:root {
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 16px;
}
:root, :root[data-theme="dark"] {
  --bg: #101715; --surface: #17201D; --surface-2: #202B27; --ink: #E6EEE9; --ink-2: #9DADA6; --line: #2D3A35;
  --accent: #93A9FF; --accent-ink: #0D1433; --accent-soft: #1E2748;
  --good: #6FD3A1; --bad: #FF8D82; --bad-bg: #3C1C19;
  --glow-a: rgb(147 169 255 / .12); --glow-b: rgb(111 211 161 / .08);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F1F4F1; --surface: #FFFFFF; --surface-2: #E7ECE8; --ink: #17221E; --ink-2: #51605A; --line: #D3DBD5;
  --accent: #2446C4; --accent-ink: #FFFFFF; --accent-soft: #E1E7FB;
  --good: #1E7548; --bad: #B0302A; --bad-bg: #F8DEDA;
  --glow-a: rgb(36 70 196 / .14); --glow-b: rgb(30 117 72 / .12);
  --shadow: 0 1px 2px rgb(23 34 30 / .06), 0 10px 30px rgb(23 34 30 / .07);
  color-scheme: light;
}
:root[data-theme="neon"] {
  --bg: #120E1F; --surface: #1B1530; --surface-2: #261E40; --ink: #EEE8FF; --ink-2: #A99FC8; --line: #352B55;
  --accent: #FF5FD2; --accent-ink: #2A0620; --accent-soft: #3A1A40;
  --good: #5EEAB0; --bad: #FF6B81; --bad-bg: #3F1621;
  --glow-a: rgb(255 95 210 / .14); --glow-b: rgb(94 234 176 / .08);
  --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 10px 30px rgb(0 0 0 / .3);
  color-scheme: dark;
}
:root[data-theme="sunset"] {
  --bg: #FFF4EA; --surface: #FFFDF9; --surface-2: #FBE7D6; --ink: #2B1A14; --ink-2: #7A5A4C; --line: #F0D5C1;
  --accent: #C2410C; --accent-ink: #FFFFFF; --accent-soft: #FFE3D3;
  --good: #2F7A3D; --bad: #B42318; --bad-bg: #FBDAD5;
  --glow-a: rgb(194 65 12 / .14); --glow-b: rgb(183 121 31 / .12);
  --shadow: 0 1px 2px rgb(43 26 20 / .06), 0 10px 30px rgb(43 26 20 / .08);
  color-scheme: light;
}
:root[data-theme="ocean"] {
  --bg: #0B1A24; --surface: #12262F; --surface-2: #1A3240; --ink: #E3F1F7; --ink-2: #9AB7C4; --line: #29444F;
  --accent: #5CC8FF; --accent-ink: #04213A; --accent-soft: #163C52;
  --good: #6FE0B0; --bad: #FF8F85; --bad-bg: #3F1D1A;
  --glow-a: rgb(92 200 255 / .12); --glow-b: rgb(111 224 176 / .08);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
  color-scheme: dark;
}
:root[data-theme="rose"] {
  --bg: #FBF3F4; --surface: #FFFFFF; --surface-2: #F5E6E9; --ink: #2A1820; --ink-2: #6E5560; --line: #E8D3D8;
  --accent: #B0245A; --accent-ink: #FFFFFF; --accent-soft: #F9DCE5;
  --good: #1E7548; --bad: #B0302A; --bad-bg: #F8DEDA;
  --glow-a: rgb(176 36 90 / .12); --glow-b: rgb(30 117 72 / .08);
  --shadow: 0 1px 2px rgb(42 24 32 / .06), 0 10px 30px rgb(42 24 32 / .07);
  color-scheme: light;
}
:root[data-theme="forest"] {
  --bg: #14190F; --surface: #1C2416; --surface-2: #252F1E; --ink: #EEF2E4; --ink-2: #A8B596; --line: #35402C;
  --accent: #C9A46A; --accent-ink: #2A1D08; --accent-soft: #3A2F18;
  --good: #9BD86B; --bad: #FF8D82; --bad-bg: #3C1C19;
  --glow-a: rgb(201 164 106 / .12); --glow-b: rgb(155 216 107 / .08);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(60rem 30rem at 110% -10%, var(--glow-a), transparent 60%),
    radial-gradient(50rem 30rem at -20% 110%, var(--glow-b), transparent 60%),
    var(--bg);
  color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--f-display); margin: 0; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell {
  width: 100%; max-width: 460px; margin: 0 auto; display: grid; gap: 18px; align-content: start;
  padding: max(28px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
@media (min-height: 760px) and (min-width: 560px) { .shell { padding-top: 8vh; } }

.brandbar { display: flex; align-items: center; gap: 10px; }
.logo { display: block; width: 38px; height: 38px; border-radius: 9px; }
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }

/* Progress */
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--ink-2); padding-top: 8px; border-top: 3px solid var(--line); }
.steps li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: .72rem; }
.steps li.on { color: var(--ink); border-top-color: var(--accent); }
.steps li.on span { background: var(--accent); color: var(--accent-ink); }
.steps li.done { border-top-color: var(--good); }
.steps li.done span { background: var(--good); color: var(--surface); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px 22px; display: grid; gap: 16px; animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
.card h1 { font-size: clamp(2.3rem, 9vw, 2.9rem); font-weight: 800; }
.card h2 { font-size: 1.6rem; font-weight: 700; }
.lede { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.hint { margin: -8px 0 0; color: var(--ink-2); }
.stack { display: grid; gap: 10px; margin-top: 6px; }
form { display: grid; gap: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .two { grid-template-columns: 1fr; } }

.back { appearance: none; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: -8px 0 -6px -6px; padding: 6px; border: 0; background: none; color: var(--ink-2); font-weight: 600; font-size: .9rem; cursor: pointer; border-radius: 8px; }
.back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.back:hover { color: var(--ink); }

/* Fields */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label { font-size: .8rem; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.opt { font-weight: 400; }
.help { color: var(--ink-2); font-size: .8rem; }
.tabpick { border: 0; padding: 0; margin: 0; gap: 8px; }
.tabpick legend { padding: 0; margin-bottom: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.tabopt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.tabopt input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }
.tabopt span { display: grid; gap: 1px; }
.tabopt small { color: var(--ink-2); font-size: .8rem; }
input { width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 46px; }
input:hover { border-color: var(--ink-2); }
input[aria-invalid="true"] { border-color: var(--bad); }
.pw { position: relative; }
.pw input { padding-right: 70px; }
.pwtoggle { appearance: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .85rem; padding: 8px; cursor: pointer; border-radius: 6px; }

/* Buttons */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; min-height: 44px; white-space: nowrap; }
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.big { min-height: 52px; font-size: 1rem; width: 100%; }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.linkbtn { appearance: none; border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.switch { margin: 0; text-align: center; color: var(--ink-2); font-size: .9rem; }
.form-msg { margin: 0; min-height: 0; color: var(--bad); font-size: .875rem; font-weight: 500; }
.form-msg:empty { display: none; }

/* Create / join choice */
.choices { display: grid; gap: 10px; }
.choice { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.choice .ci { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.choice .ct { display: grid; gap: 2px; }
.choice b { font-family: var(--f-display); font-size: 1.1rem; }
.choice small { color: var(--ink-2); font-size: .875rem; line-height: 1.4; }

/* House photo picker: shows the photo the way the Summary header will */
.cover { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px dashed var(--line); display: grid; }
.cover.has { border-style: solid; }
.cover-img { position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 1; background-size: cover; background-position: center; opacity: .45; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.cover-empty { place-self: center; display: grid; justify-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; font-size: .9rem; margin-bottom: 24px; }
.cover.has .cover-empty { display: none; }
.cover-name { position: absolute; left: 16px; bottom: 12px; right: 130px; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-name.ph { color: var(--ink-2); opacity: .7; }
.cover-btn { position: absolute; right: 12px; bottom: 12px; }
.cover-btn input, .filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cover-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }


/* Invite banner and join preview */
.invite-banner, .preview { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.invite-banner { box-shadow: var(--shadow); }
.ib-photo, .pv-photo { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--surface-2) center / cover no-repeat; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; color: var(--ink-2); }
.invite-banner strong, .preview strong { display: block; font-family: var(--f-display); font-size: 1.2rem; line-height: 1.2; }
.preview small { color: var(--ink-2); }
.eyebrow { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }

.placeholder-note { margin: 0; text-align: center; font-size: .8rem; color: var(--ink-2); }

/* Google sign-in and the "or" divider */
.btn.google { gap: 10px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Invite codes are typed in capitals */
.codeinput { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.codeinput::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* Waiting to be let in */
.waiting-dots { display: flex; gap: 6px; justify-content: center; padding: 4px 0; }
.waiting-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .3; animation: wdot 1.2s ease-in-out infinite; }
.waiting-dots span:nth-child(2) { animation-delay: .2s; }
.waiting-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes wdot { 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .waiting-dots span { animation: none; opacity: .6; } }

/* Email link page (auth-action.html): links styled as buttons, and the tick or warning above the heading */
a.brandbar, a.btn { color: inherit; text-decoration: none; }
a.btn.primary { color: var(--accent-ink); }
.status-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.status-icon.bad { color: var(--bad); background: var(--bad-bg); }

/* Loading: fades in after a moment, so a quick sign-in check doesn't flash it */
.loadcard { justify-items: center; text-align: center; padding: 40px 22px; animation-delay: .35s; }
.loadcard p { margin: 0; color: var(--ink-2); }

/* Explore: houses this account can view */
.houselist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.houselist a { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.houselist a:hover { border-color: var(--accent); background: var(--accent-soft); }
.houselist strong { display: block; font-family: var(--f-display); font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.houselist small { color: var(--ink-2); font-size: .85rem; }
.houselist .go { margin-left: auto; flex: none; color: var(--accent); font-weight: 600; font-size: .9rem; }
.houselist .empty { padding: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-2); text-align: center; }
.ownhouse { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ownhouse h3 { margin: 0; font-family: var(--f-display); font-size: 1.15rem; }
.ownhouse p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.ownhouse .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ownhouse .acts .btn { flex: 1 1 10rem; text-decoration: none; }
.ownhouse a.btn:not(.primary) { color: var(--ink); }