/* Rumi pages: home (live demo, steps, sign up / log in), my houses, new house, status.
   Sticker style: Fredoka for headings, DM Sans for text, mint paper, butter yellow and bubblegum pink,
   ink outlines with a hard little shadow. Phone first: 16px gutters, nothing wider than the screen. */
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(/static/fonts/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(/static/fonts/dm-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(/static/fonts/dm-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url(/static/fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url(/static/fonts/fredoka-latin-700-normal.woff2) format('woff2'); }

:root {
  --ink: #22303a;
  --ink-2: #47555e;
  --paper: #fff7dc;
  --sky: #eafaf1;
  --dots: #cdeedc;
  --card: #ffffff;
  --line: #cfe3d8;
  --accent: #11805f;
  --accent-ink: #0b6248;
  --accent-soft: #d3f4e4;
  --mint: #5fd3a5;
  --accent-2: #ff7aa8;
  --accent-2-ink: #c52f63;
  --accent-2-soft: #ffe2ec;
  --butter: #ffe27a;
  --gold: #ffd45c;
  --sky-blue: #9fd8ff;
  --lilac: #cdb8ff;
  --muted: #627077;
  --ok: #217a4c;
  --shadow: 0 4px 0 var(--ink);
  --soft-shadow: 0 6px 22px rgba(34, 48, 58, .08);
  --radius: 20px;
  --gutter: 16px;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Fredoka', 'DM Sans', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* House rule: no word alone on a last line (app.js ties the last two words where this is unsupported). */
p, li, dd, dt, .lede, .sub, .hint { text-wrap: pretty; }
h1, h2, h3, summary { text-wrap: balance; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: var(--sky) radial-gradient(var(--dots) 1.3px, transparent 1.6px) 0 0 / 22px 22px; }
main { flex: 1 0 auto; width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 7.4vw, 46px); }
h2 { font-size: 27px; }
h3 { font-size: 19px; font-weight: 600; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) 56px; }
.narrow { max-width: 600px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- header ---- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 1120px; margin: 0 auto; width: 100%; padding: calc(env(safe-area-inset-top) + 14px) var(--gutter) 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 700 23px var(--serif); color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.brand svg { width: 34px; height: 34px; flex: none; transition: transform .2s; }
.brand:hover svg { transform: rotate(-8deg) scale(1.06); }
.bar nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar nav a, .bar nav button { white-space: nowrap; }
.navlink { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--ink); font: 700 15px var(--sans); text-decoration: none; cursor: pointer; border-radius: 12px; }
.navlink:hover { background: rgba(255, 255, 255, .7); }
.navlink[aria-current=page] { color: var(--accent); }

/* The language pill (app.js langPicker): a globe and the language's own name over a native select. */
.lang-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 9px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); font: 700 14px var(--sans); white-space: nowrap; box-shadow: 0 3px 0 var(--ink); cursor: pointer; flex: none; }
.lang-pill svg { width: 20px; height: 20px; flex: none; }
.lang-pill .short { display: none; }
.lang-pill:hover { background: var(--paper); }
.lang-pill:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.lang-pill .lang-select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
@media (max-width: 520px) { .lang-pill .long { display: none; } .lang-pill .short { display: inline; } }
/* Phones: the globe alone (the select still names the language to screen readers and opens the full list). */
@media (max-width: 400px) { .lang-pill { padding: 0 8px; } .lang-pill .lang-name { display: none; } .bar { gap: 6px; } .bar nav { gap: 4px; } }

/* No flash of English: a page that translates itself starts with <html data-i18n-pending>, which
   i18n.js removes after the first apply. The animation shows the page anyway after 1.5 s (it beats
   the reduced-motion rule below on specificity, and needs no script). */
html[data-i18n-pending] body { visibility: hidden; animation: ks-reveal 0s linear 1.5s forwards !important; }
@keyframes ks-reveal { to { visibility: visible; } }
/* Korean keeps words whole when it wraps; Chinese and Japanese use the strict line-break rules. */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja), :lang(zh-Hans), :lang(zh-Hant) { line-break: strict; }
:lang(ja) { word-break: auto-phrase; } /* Chrome: wrap Japanese at phrase edges, not mid-word */

/* ---- buttons: chunky stickers that press down ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--accent); color: #fff; font: 700 17px var(--serif); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: var(--shadow); transition: background .15s, transform .1s, box-shadow .1s; }
.btn:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
a.btn.off, a.btn.off:hover { pointer-events: none; background: #c3ccc8; color: #fff; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #9aa5a0; border-color: #9aa5a0; }
.cap { margin-top: 6px; color: var(--muted); font-size: 15px; }
.cap.full { margin-top: 14px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--ink); background: var(--accent-2-soft); color: #9b2650; font-weight: 600; }
.btn:disabled { background: #c3ccc8; color: #fff; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #9aa5a0; border-color: #9aa5a0; }
.btn.warm { background: var(--accent-2); color: var(--ink); }
.btn.warm:hover { background: #ff9bbd; }
.btn.warm:disabled { background: #f3d3de; color: #8b7f84; }
.btn.ghost { background: #fff; color: var(--ink); }
.btn.ghost:hover { background: var(--paper); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; box-shadow: 0 3px 0 var(--ink); border-width: 2px; }
.btn.small:active { transform: translateY(3px); box-shadow: none; }
.btn.big { min-height: 58px; padding: 0 34px; font-size: 21px; }
.btn.block { width: 100%; }
.link { background: none; border: 0; padding: 2px 4px; color: var(--accent); font: 700 15px var(--sans); cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link.danger { color: var(--accent-2-ink); }
.link.quiet { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.link.quiet:hover { color: var(--accent-2-ink); text-decoration: underline; }
.btn.danger { background: var(--accent-2-ink); color: #fff; }
.btn.danger:hover { background: #a3214f; }

/* ---- fields ---- */
.field { display: block; }
.field > .label { display: block; font: 700 14px var(--sans); color: var(--ink-2); margin: 0 0 6px; }
input[type=email], input[type=text], input[type=password], textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 400 17px var(--sans); outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
input[aria-invalid=true] { border-color: var(--accent-2-ink); }
input[readonly] { background: var(--paper); color: var(--ink-2); }
textarea { min-height: 150px; resize: vertical; line-height: 1.45; font-size: 15px; }
textarea.short { min-height: 88px; }
#chat { min-height: 160px; }
select, input[type=date] { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 400 16px var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.pw { position: relative; }
.pw input { padding-right: 70px; }
.pw .show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--accent); font: 700 14px var(--sans); cursor: pointer; }
.pw .show:hover { background: var(--accent-soft); }
.msg { font-size: 15px; color: var(--accent-2-ink); margin-top: 10px; font-weight: 500; }
.msg.ok { color: var(--ok); }
.msg:empty { display: none; }
.hint { color: var(--muted); font-size: 14px; }
.field .hint { margin-top: 6px; }

.card { background: var(--card); border-radius: var(--radius); border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 22px; }
.stack > * + * { margin-top: 16px; }
.opt { font-family: var(--sans); font-weight: 400; color: var(--muted); font-size: .8em; }

/* ---- stickers ---- */
.sticker { display: inline-block; padding: 5px 14px 6px; border-radius: 999px; border: 2px solid var(--ink); background: var(--butter); color: var(--ink); font: 700 14px/1.2 var(--serif); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.sticker.pink { background: var(--accent-2); }
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(3deg); }

/* ---- home ---- */
.home-main { display: flex; flex-direction: column; }
.intro { text-align: center; padding-top: 6px; }
.intro .sticker { animation: bob 3.2s ease-in-out infinite; }
.intro h1 { margin-top: 12px; font-size: clamp(38px, 11vw, 72px); line-height: .98; letter-spacing: -.02em; }
.intro h1 span { display: block; }
.intro h1 .hl { position: relative; display: inline-block; padding: 0 .12em; z-index: 0; color: var(--ink); }
.intro h1 .hl::before { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .42em; border-radius: .2em; background: var(--accent-2); z-index: -1; transform: rotate(-1.5deg); }
@keyframes bob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-4px); } }

.demo { margin-top: 18px; }
.demo-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; margin-bottom: 14px; }
.demo-head p { font: 600 16px/1.3 var(--serif); color: var(--ink-2); }
.demo-head .poke { margin-left: .3em; }
:lang(ja) .demo-head .poke, :lang(zh) .demo-head .poke { margin-left: 0; }
.demo-frame { position: relative; height: min(600px, 72svh); min-height: 440px; border: 3px solid var(--ink); border-radius: 28px; background: #fbe6ec; box-shadow: 0 7px 0 var(--ink); }
.demo-frame iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; border-radius: 25px; background: transparent; }
.demo-wait { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 600 16px var(--serif); color: var(--accent-2-ink); }
.demo-wait .dot { display: inline-block; width: 12px; height: 12px; margin: 0 4px 10px; border-radius: 50%; background: var(--accent-2); border: 2px solid var(--ink); animation: hop 1s ease-in-out infinite; }
.demo-wait .dot:nth-child(2) { animation-delay: .15s; background: var(--butter); }
.demo-wait .dot:nth-child(3) { animation-delay: .3s; background: var(--mint); }
.demo-frame.loaded .demo-wait { visibility: hidden; }
/* Desktop only: "Take a better look" opens the house on its own (/demo/) in a new tab. It sits on the
   frame's top edge, clear of the viewer's own corners; /demo/ itself never has one. */
.demo-full { position: absolute; top: -17px; right: 52px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 11px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 700 14px var(--sans); text-decoration: none; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.demo-full svg { width: 15px; height: 15px; }
.demo-full:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); background: var(--butter); }
.demo-full:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
/* Phones get the film and its Tap to open! button; desktop the live house. */
.demo-film { display: none; }
@media (max-width: 720px) {
  .demo-frame iframe, .demo-head .poke, .demo-full { display: none; }
  .demo-film { position: absolute; inset: 0; z-index: 1; display: block; border-radius: 25px; overflow: hidden; -webkit-tap-highlight-color: transparent; }
  .demo-film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fbe6ec; }
  .tap-open { position: absolute; left: 50%; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px 12px 16px;
    border-radius: 999px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 800 22px var(--serif); white-space: nowrap;
    box-shadow: 0 6px 0 var(--ink); transform: translateX(-50%); animation: tap-bob 1.8s ease-in-out infinite; }
  .tap-open svg { width: 28px; height: 26px; animation: cta-beat 1.2s ease-in-out infinite; }
  .demo-film:active .tap-open { transform: translateX(-50%) translateY(5px); box-shadow: 0 1px 0 var(--ink); animation: none; }
}
@keyframes tap-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
.deco { position: absolute; z-index: 2; pointer-events: none; }
.deco.star { width: 44px; right: -14px; top: -20px; animation: spin 9s linear infinite; }
.deco.heart { width: 40px; left: -14px; bottom: -16px; animation: beat 1.6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { 0%, 100% { transform: rotate(-10deg) scale(1); } 15% { transform: rotate(-10deg) scale(1.15); } 30% { transform: rotate(-10deg) scale(1); } }

/* "I want one!": the big, bouncy, can't-miss button under the demo */
.demo-cta { display: flex; justify-content: center; margin-top: 36px; }
.cta-big { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 14px 34px 14px 18px; border-radius: 999px;
  border: 3px solid var(--ink); background: linear-gradient(180deg, #ff9cc0, var(--accent-2)); color: var(--ink); text-decoration: none;
  box-shadow: 0 7px 0 var(--ink); animation: cta-bob 2.4s ease-in-out infinite; transition: transform .12s, box-shadow .12s; }
.cta-big:hover { animation: cta-wiggle .5s ease-in-out; transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 0 var(--ink); }
.cta-big:active { animation: none; transform: translateY(6px); box-shadow: 0 1px 0 var(--ink); }
.cta-big:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.cta-house { width: 58px; height: 58px; flex: none; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 5px; transform: rotate(-8deg); }
.cta-words { display: flex; flex-direction: column; line-height: 1.05; }
.cta-words b { font: 800 clamp(28px, 7.5vw, 38px) var(--serif); letter-spacing: .01em; }
.cta-words small { font: 600 15px var(--sans); color: #5a2a3e; margin-top: 4px; }
.cta-spark { position: absolute; width: 22px; height: 22px; animation: cta-twinkle 1.8s ease-in-out infinite; }
.cta-spark.s1 { top: -12px; right: 14px; }
.cta-spark.s2 { bottom: -10px; left: 52px; width: 16px; height: 16px; animation-delay: -.6s; }
.cta-spark.s3 { top: -14px; left: -6px; width: 26px; height: 24px; animation: cta-beat 1.2s ease-in-out infinite; }
@keyframes cta-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes cta-wiggle { 0%, 100% { transform: translateY(-3px) scale(1.04) rotate(0); } 25% { transform: translateY(-3px) scale(1.04) rotate(-3deg); } 75% { transform: translateY(-3px) scale(1.04) rotate(3deg); } }
@keyframes cta-twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .7; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes cta-beat { 0%, 100% { transform: scale(1) rotate(-12deg); } 15% { transform: scale(1.25) rotate(-12deg); } 30% { transform: scale(1) rotate(-12deg); } 45% { transform: scale(1.15) rotate(-12deg); } }

/* What you get: three little scenes from the demo with their speech bubbles */
.what { margin-top: 52px; }
.what h2 { max-width: 26ch; margin: 0 auto; text-align: center; font-size: clamp(24px, 6vw, 34px); line-height: 1.2; }
.what-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; }
.what-card { background: #fff; border: 2.5px solid var(--ink); border-radius: 24px; box-shadow: 0 5px 0 var(--ink); padding: 12px 12px 18px; transition: transform .15s; }
.what-card.tilt-l { transform: rotate(-1deg); } .what-card.tilt-r { transform: rotate(1deg); }
.what-card:hover { transform: rotate(0) translateY(-3px); }
.what-card .pic { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #fbd7e1, #fdeae8); }
.what-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.what-card h3 { margin: 14px 6px 0; font-size: 21px; }
.what-card p { margin: 6px 6px 0; color: var(--ink-2); }
.say { position: absolute; top: 9%; max-width: 62%; padding: 7px 12px 8px; border-radius: 14px; background: #fff; border: 2px solid var(--ink);
  font: 700 14px/1.25 var(--sans); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.say::after { content: ''; position: absolute; bottom: -9px; width: 14px; height: 14px; background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.say.left { left: 7%; transform: rotate(-2deg); } .say.left::after { left: 22px; transform: rotate(45deg); }
.say.right { right: 7%; transform: rotate(2deg); } .say.right::after { right: 22px; transform: rotate(45deg); }
.say.two { top: auto; bottom: 10%; background: #fff6d6; } .say.two::after { top: -9px; bottom: auto; background: #fff6d6; transform: rotate(225deg); }
@media (min-width: 860px) { .what-cards { grid-template-columns: repeat(3, 1fr); } }

.get { margin-top: 48px; display: grid; gap: 28px; }
.get-steps h2 { font-size: clamp(30px, 8vw, 44px); }
.get-steps .sub { margin-top: 6px; color: var(--ink-2); font-size: 17px; }
.steps6 { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.steps6 li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); transition: transform .15s; }
.steps6 li:hover { transform: rotate(-1deg) translateY(-2px); }
.steps6 li:nth-child(even):hover { transform: rotate(1deg) translateY(-2px); }
.steps6 .n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; border: 2.5px solid var(--ink); background: var(--butter); font: 700 24px var(--serif); transform: rotate(-6deg); }
.steps6 li:nth-child(2) .n { background: var(--mint); transform: rotate(5deg); }
.steps6 li:nth-child(3) .n { background: var(--accent-2); }
.steps6 li:nth-child(4) .n { background: var(--sky-blue); transform: rotate(6deg); }
.steps6 li:nth-child(5) .n { background: var(--lilac); }
.steps6 li:nth-child(6) .n { background: var(--butter); transform: rotate(4deg); }
.steps6 p { margin-top: 3px; color: var(--ink-2); font-size: 15px; line-height: 1.4; }

.get-side { display: grid; gap: 18px; align-content: start; }
.auth { width: 100%; max-width: 440px; margin: 0 auto; }
.auth-title { font-size: 30px; margin-bottom: 14px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; border-radius: 999px; background: var(--accent-soft); border: 2px solid var(--ink); }
.tab { min-height: 42px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 700 16px var(--serif); cursor: pointer; }
.tab[aria-selected=true] { background: var(--butter); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.auth .msg { margin-top: 12px; }
.btn.google { background: #fff; color: var(--ink); gap: 12px; }
.btn.google:hover { background: var(--paper); }
.btn.google svg { width: 22px; height: 22px; flex: none; }
.auth .or { margin: 16px 0; }

.trust { display: flex; gap: 12px; align-items: center; max-width: 440px; margin: 0 auto; padding: 14px 16px; border-radius: 18px; background: var(--paper); border: 2px dashed var(--ink); color: var(--ink); font-size: 15px; font-weight: 500; }
.trust svg { width: 30px; height: 30px; flex: none; }

/* ---- page heads ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.page-head h1 { font-size: clamp(30px, 6.5vw, 40px); }
.notice { margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--ink); background: var(--accent-soft); color: var(--accent-ink); display: grid; gap: 4px; }
.notice strong { font: 600 20px var(--serif); color: var(--ink); }
.notice.warn { background: var(--accent-2-soft); color: #9b2650; }

/* ---- my houses list ---- */
.jobs { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.job { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--card); border-radius: 18px; border: 2.5px solid var(--ink); box-shadow: var(--shadow); color: inherit; min-width: 0; }
.job.linked { transition: box-shadow .15s, transform .1s; }
.job.linked:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.job.linked:active { transform: translateY(1px); }
.job .cover { color: inherit; text-decoration: none; }
.job .cover::after { content: ''; position: absolute; inset: 0; border-radius: 16px; } /* the whole card is the link */
.job .cover:focus-visible { outline: none; }
.job .cover:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.job .del { position: relative; z-index: 1; padding: 2px 0; }
.job .thumb { width: 56px; height: 56px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; overflow: hidden; }
.job .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job .thumb svg { width: 34px; height: 34px; }
.job .body { min-width: 0; }
.job h3 { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job .meta { color: var(--muted); font-size: 14px; margin-top: 2px; }
.job .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.job .go { font: 700 14px var(--sans); color: var(--accent); white-space: nowrap; }
.job .go.warm { color: var(--accent-2); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--ink); font: 700 12px/1.4 var(--sans); white-space: nowrap; background: #ecebe4; color: var(--ink-2); }
.badge.queued { background: var(--butter); color: var(--ink); }
.badge.making { background: #d8efff; color: #1f4f73; }
.badge.ready { background: var(--accent); color: #fff; }
.badge.failed { background: var(--accent-2-soft); color: #9b2650; }
.confirm { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--accent-2-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.confirm p { color: #9b2650; font-size: 15px; min-width: 0; }
.confirm-btns { display: flex; gap: 8px; margin-left: auto; }
.empty { text-align: center; padding: 36px 22px; margin-top: 20px; }
.empty svg { width: 72px; height: auto; display: block; margin: 0 auto 10px; }
.empty p { color: var(--ink-2); margin: 8px auto 20px; max-width: 34ch; }

/* ---- the walkthrough ---- */
.progress { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Seven steps: on phones the long label ("Who is who") gives way to its short one, and the row tightens so the bold current label still fits. */
.progress .short { display: none; }
@media (max-width: 520px) { .progress { gap: 4px; } .progress li { font-size: 12px; } .progress .long { display: none; } .progress .short { display: inline; } }
.progress li { display: grid; gap: 6px; font: 500 13px var(--sans); color: var(--muted); min-width: 0; }
.progress li::before { content: ''; height: 8px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.progress li.done::before, .progress li.now::before { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--ink); }
.progress li.now { color: var(--ink); font-weight: 700; }
.progress button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: default; }
.progress li.done button { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.progress li.done button:hover { color: var(--ink); }
.progress button:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; border-radius: 6px; }
.step { margin-top: 22px; }
.step > h2 { font-size: 28px; }
.step > .sub { margin-top: 6px; color: var(--ink-2); }
.step-body { margin-top: 18px; }
.navrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.navrow .btn.next { min-width: 140px; }
.navrow .spacer { flex: 1; }
.names { display: grid; gap: 14px; }

.drop { display: grid; place-items: center; text-align: center; gap: 4px; min-height: 150px; padding: 22px; border-radius: var(--radius); border: 2.5px dashed var(--ink); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.wait, .drop.wait:hover { cursor: progress; border-color: var(--line); background: var(--card); }
.drop.wait > :not(.wait-text) { opacity: .4; }
.drop .wait-text { font-weight: 600; color: var(--accent-ink); text-wrap: balance; }
.drop strong { font: 600 21px var(--serif); }
.drop .plus { width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--butter); color: var(--ink); display: grid; place-items: center; font: 400 28px/1 var(--sans); margin-bottom: 6px; }
.totals { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--accent-soft); }
.tile img, .tile video, .tile canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 11px; color: var(--accent-ink); word-break: break-all; }
.tile .kind { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(44, 58, 54, .72); color: #fff; font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.tile .x { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(44, 58, 54, .72); color: #fff; font: 700 17px/30px var(--sans); cursor: pointer; padding: 0; }
.tile .bar-wrap { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.tile .bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.tile.done .bar-wrap { display: none; }
.tile.done::after { content: '\2713'; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 13px/22px var(--sans); text-align: center; }
.tile.failed { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.tile .retry { position: absolute; left: 6px; right: 6px; bottom: 6px; min-height: 30px; border-radius: 999px; border: 0; background: var(--accent-2); color: var(--ink); font: 700 12px var(--sans); cursor: pointer; }

.mapping { margin-top: 14px; padding: 16px; border-radius: 18px; border: 2px solid var(--ink); background: var(--accent-2-soft); }
.mapping .q { font: 600 19px var(--serif); margin-bottom: 8px; }
.mapping .q + .chips { margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
.chip[aria-pressed=true], .chip[aria-checked=true] { background: var(--accent-2); border-color: var(--ink); color: var(--ink); font-weight: 700; }

.review { display: grid; gap: 0; padding: 4px 18px; }
.review div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.review div:first-child { border-top: 0; }
.review dt { color: var(--ink-2); }
.review dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.extras { margin-top: 14px; border-radius: 18px; background: var(--card); border: 2.5px solid var(--ink); box-shadow: var(--shadow); }
.extras > summary { list-style: none; cursor: pointer; padding: 16px 18px; font: 700 15px var(--sans); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.extras > summary::-webkit-details-marker { display: none; }
.extras > summary::after { content: '+'; font: 400 24px/1 var(--sans); color: var(--accent); }
.extras[open] > summary::after { content: '\2212'; }
.extras .inner { padding: 18px; display: grid; gap: 20px; }
.q-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-block legend { padding: 0; margin-bottom: 8px; font: 700 14px var(--sans); color: var(--ink-2); }
.since { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.look { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; min-width: 0; }
.look .swatch { width: 26px; height: 26px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(44, 58, 54, .12); }
.look[aria-checked=true] { border-color: var(--ink); background: var(--accent-2-soft); }
.swatch.blush { background: linear-gradient(135deg, #f8d7da 0 50%, #f6efe2 50% 100%); }
.swatch.mint { background: linear-gradient(135deg, #a8dcc4 0 50%, #f0cf5a 50% 100%); }
.swatch.dusk { background: linear-gradient(135deg, #b9a3d0 0 50%, #f4c8a8 50% 100%); }
.swatch.classic { background: linear-gradient(135deg, #f1e6cf 0 50%, #396c68 50% 100%); }
/* Time of day and type of house (wizard step 5 and the house page): a tiny sky and a tiny scene. */
.looks3 { grid-template-columns: 1fr 1fr 1fr; }
.swatch.t-day { background: radial-gradient(circle at 70% 32%, #ffe08a 0 20%, transparent 23%), linear-gradient(180deg, #a9d8f5, #eef6f6); }
.swatch.t-sunset { background: radial-gradient(circle at 50% 80%, #ffd27a 0 22%, transparent 25%), linear-gradient(180deg, #9a8fd0, #ffb487 72%); }
.swatch.t-night { background: radial-gradient(circle at 68% 30%, #fff4cf 0 13%, transparent 16%), radial-gradient(circle at 26% 58%, #fff4cf 0 5%, transparent 7%), linear-gradient(180deg, #0d1430, #2b3566); }
.swatch.h-city { background: linear-gradient(90deg, #d9c3b5 0 28%, transparent 28% 36%, #8c8aa3 36% 64%, transparent 64% 72%, #e0848f 72%) bottom / 100% 72% no-repeat, #e4eff5; }
.swatch.h-beach { background: linear-gradient(180deg, #bfe3f2 0 42%, #5fb3c9 42% 60%, #f0dcb4 60%); }
.swatch.h-village { background: linear-gradient(180deg, #d6eaf3 0 32%, #a65a3c 32% 48%, #f3e6cc 48% 74%, #8fb070 74%); }
/* Season (same place): blossom, deep green, falling leaves, snow. */
.swatch.s-spring { background: radial-gradient(circle at 30% 38%, #f9b7cb 0 22%, transparent 25%), radial-gradient(circle at 68% 58%, #ffd3e0 0 18%, transparent 21%), linear-gradient(180deg, #dff0f7, #b9dc96); }
.swatch.s-summer { background: radial-gradient(circle at 72% 28%, #ffe27a 0 16%, transparent 19%), radial-gradient(circle at 36% 66%, #3f9440 0 26%, transparent 29%), linear-gradient(180deg, #8fd0f2, #72b852); }
.swatch.s-autumn { background: radial-gradient(circle at 32% 40%, #e9862f 0 22%, transparent 25%), radial-gradient(circle at 68% 60%, #c2412c 0 18%, transparent 21%), linear-gradient(180deg, #f6e3c4, #c6b06a); }
.swatch.s-winter { background: radial-gradient(circle at 30% 34%, #fff 0 8%, transparent 10%), radial-gradient(circle at 70% 52%, #fff 0 7%, transparent 9%), linear-gradient(180deg, #b9cde0 0 62%, #f3f7fb 62%); }
.songs { display: grid; gap: 8px; }
.song { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; }
.song:has(.pick[aria-checked=true]) { border-color: var(--accent-2); background: var(--accent-2-soft); }
.song .pick { flex: 1; text-align: left; border: 0; background: none; padding: 8px 0; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
.song .play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--accent); cursor: pointer; position: relative; }
.song .play::before { content: ''; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.song .play[aria-pressed=true]::before { left: 13px; top: 12px; width: 6px; height: 16px; border-width: 0 4px; border-style: solid; border-color: #fff; }
.count { margin-top: 6px; }
.hint.gap { margin-top: 10px; }
.send-note { margin-top: 14px; text-align: center; color: var(--ink-2); font-size: 15px; }

/* ---- status page ---- */
.status-card { margin-top: 20px; text-align: center; padding: 30px 22px; }
.status-card .badge { margin-bottom: 12px; }
.status-card h1 { font-size: clamp(28px, 6vw, 36px); }
.status-card p { margin: 10px auto 0; color: var(--ink-2); max-width: 36ch; }
.status-card .btn { margin-top: 20px; }
.status-card svg { width: 84px; height: auto; display: block; margin: 0 auto 14px; }

footer.foot { max-width: 960px; width: 100%; margin: 0 auto; padding: 20px var(--gutter) calc(env(safe-area-inset-bottom) + 24px); color: var(--muted); font-size: 13px; text-align: center; }
footer.foot p { margin: 8px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; }
.foot-links a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.foot-links a:hover, .foot-links a[aria-current] { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Signed in: the header already has My houses, so the account column goes and the steps take the row. */
.signed-in .get-side .auth { display: none; }
/* The steps' own Sign up button is for phones, where the form is on its own page. */
.get-go { display: none; }
.signed-in .get-go { display: none !important; }

/* The info pages: FAQ, Privacy, Terms, Your data, Contact. */
.doc { max-width: 760px; }
.doc .card { padding: 26px 22px; margin-top: 18px; }
.doc h1 { font-size: clamp(34px, 8vw, 48px); margin-top: 10px; }
.doc .updated { color: var(--muted); font-size: 14px; margin-top: 6px; }
.doc h2 { font-size: 24px; margin: 28px 0 8px; }
.doc .card > h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--ink-2); line-height: 1.6; }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 1.2em; margin: 8px 0 0; }
.doc ul + p { margin-top: 12px; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--accent-ink); font-weight: 600; }
.doc .short { background: var(--paper); border: 2.5px dashed var(--ink); border-radius: var(--radius); padding: 16px 18px; margin-top: 18px; color: var(--ink); }
.faq details { border-top: 2px solid var(--line); padding: 14px 0; }
.faq details:first-of-type { border-top: 0; padding-top: 0; }
.faq summary { cursor: pointer; font: 600 19px/1.35 var(--serif); color: var(--ink); list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--ink); background: var(--butter); font-size: 18px; line-height: 1; }
.faq details[open] summary::before { content: "\2212"; background: var(--mint); }
.faq details p { margin: 8px 0 0 36px; }
.contact-big { font: 700 clamp(22px, 6vw, 30px) var(--serif); color: var(--accent-ink); word-break: break-all; }

@media (min-width: 760px) {
  .intro { padding-top: 18px; }
  .demo-frame { height: clamp(520px, calc(100vh - 360px), 720px); }
  .demo-cta { flex-direction: row; justify-content: center; gap: 22px; }
  .get { grid-template-columns: 1fr 420px; gap: 40px; align-items: start; margin-top: 64px; }
  .steps6 { grid-template-columns: 1fr 1fr; }
  .steps6 li { align-items: start; }
  .get-side { position: sticky; top: 18px; }
  .signed-in .get { grid-template-columns: 1fr; }
  .signed-in .get-side { position: static; }
  .signed-in .steps6 { grid-template-columns: repeat(3, 1fr); }
  .names { grid-template-columns: 1fr 1fr; }
  .job { grid-template-columns: 64px 1fr auto; padding: 14px 18px; }
  .job .thumb { width: 64px; height: 64px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}
@media (max-width: 759px) {
  /* Phones: the home page has no form, its Sign up and Log in buttons go to /signup and /login,
     which show the form on its own and nothing else. */
  .home:not(.auth-page) .get-side .auth { display: none; }
  .get-go { display: flex; margin-top: 22px; }
  .auth-page .home-main > :not(.get), .auth-page .get-steps { display: none; }
  .auth-page .get { margin-top: 12px; }
}
@media (max-width: 400px) {
  .intro .sticker { font-size: 12px; }
  .demo-head { gap: 8px; margin-bottom: 12px; }
  .demo-head p { font-size: 15px; }
  .looks, .since { grid-template-columns: 1fr; }
  .looks3 { grid-template-columns: 1fr 1fr 1fr; }
  .looks3 .look { flex-direction: column; gap: 6px; text-align: center; padding: 10px 6px; }
  .brand { font-size: 20px; }
  .brand svg { width: 26px; height: 26px; }
  .navlink { padding: 0 7px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.sent { margin-top: 28px; }
.sent h2 { margin-bottom: 12px; }
.sent h3 { margin: 22px 0 10px; }
.sent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sent-tile { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--accent-soft); }
.sent-tile img, .sent-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sent-tile.name { display: grid; place-items: center; padding: 8px; font-size: 12px; color: var(--muted); text-align: center; word-break: break-all; text-decoration: none; }
.sent-chat { white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto; padding: 16px; font: 13px/1.5 var(--sans); margin: 0; }
.upbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.upbar-in { pointer-events: auto; max-width: 560px; margin: 0 auto; padding: 12px 16px 14px; border-radius: 14px; background: var(--ink, #2c3a36); color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); display: grid; gap: 4px; font-size: 14px; }
.upbar-in strong { font-size: 15px; }
.upbar-in span { opacity: .85; }
.upbar-track { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.upbar-fill { height: 100%; width: 0; background: var(--butter); transition: width .3s; }
body.uploading { padding-bottom: 130px; }
.job .meta.when { font-size: 13px; margin-top: 0; }
.drop .limits { font-size: 12px; margin-top: 6px; text-wrap: balance; }
/* /new step 2: the photo limit, said big before the drop zone */
.limit-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; border-radius: var(--radius); border: 2.5px solid var(--ink); background: var(--butter); color: var(--ink); }
.limit-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.limit-text strong { font: 600 clamp(24px, 6.4vw, 30px)/1.15 var(--serif); text-wrap: balance; }
.limit-text span { font-size: 15px; text-wrap: balance; }
.limit-count { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 2px solid var(--ink); font: 600 17px var(--serif); font-variant-numeric: tabular-nums; }
.limit-banner.full { background: var(--accent-2-soft); }
.limit-banner.full .limit-count { background: var(--accent-2); color: #fff; border-color: var(--accent-2-ink); }

/* /making/<id> when ready: share switch and the story editor */
.share-card, .stories { margin-top: 20px; }
.stories > h2 { margin-top: 28px; }
.share-card { padding: 22px; }
.share-card h2, .stories h2 { margin: 0 0 12px; }
.share-card .hint { margin: 10px 0 0; }
.switch { display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { flex: none; width: 50px; height: 30px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; position: relative; transition: background .15s; }
.switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + .switch-ui { box-shadow: 0 0 0 4px var(--accent-soft); }
.switch input:disabled + .switch-ui { opacity: .5; }
.share-row { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.share-row input { flex: 1; min-width: 0; min-height: 44px; font-size: 15px; }
.stories > .hint { margin: 0 0 12px; }
.look-card { margin-top: 20px; padding: 22px; }
.look-card h2 { margin: 0 0 12px; }
.name-row { display: flex; gap: 10px; align-items: flex-end; }
.name-row + .line-note + .name-row { margin-top: 12px; }
.name-row .field { flex: 1; min-width: 0; }
.colors { border: 0; padding: 0; margin: 14px 0 0; }
.colors legend { padding: 0; margin-bottom: 6px; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); margin-right: 8px; vertical-align: -3px; }
.swatch.s-paris-blush { background: #f6c9d4; } .swatch.s-paris-mint { background: #bfe8d3; }
.swatch.s-paris-dusk { background: #cdbde6; } .swatch.s-toybox { background: #e8d9b8; }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.room-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; color: var(--ink); text-decoration: none; font-weight: 700; }
.room-link:hover { border-color: var(--accent); }
.room-link .room-name small { display: block; font: 500 13px var(--sans); color: var(--muted); margin-top: 2px; }
.room-link .count { color: var(--accent); font-weight: 700; white-space: nowrap; }
#gone-box { margin-top: 22px; }
#gone-box h3 { margin: 0 0 4px; }
#gone-box .hint { margin: 0 0 10px; }
#gone-list .count { color: var(--muted); }
.back { text-align: left; margin: 16px 0 0; }
.room-head { margin-top: 12px; padding: 22px; }
.room-head .eyebrow { margin: 0 0 10px; font: 700 13px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.room-head .hint { margin: 12px 0 0; }
.gone-name { margin: 0; }
.room-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 14px; }
.room-photos:empty { display: none; }
.room-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.gone-card { margin-top: 16px; padding: 18px 22px; }
.gone-card p { margin: 0 0 12px; }
.story { margin-top: 12px; padding: 18px; }
.story h3 { margin: 0 0 12px; font-size: 17px; }
.lines .said { margin: 0; }
.demolish-card { margin-top: 24px; padding: 22px; }
.demolish-card h2 { margin: 0 0 6px; font-size: 20px; }
.demolish-card .hint { margin: 0 0 14px; }
.demolish-card .confirm { margin-top: 0; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lines li { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px 10px; align-items: center; }
.lines .who { font: 700 14px var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.lines input { min-height: 44px; padding: 8px 12px; font-size: 16px; }
.lines .line-note { grid-column: 2; font-size: 13px; color: var(--muted); min-height: 0; }
.lines .line-note:empty { display: none; }
@media (max-width: 520px) { .lines li { grid-template-columns: 1fr; } .lines .line-note { grid-column: 1; } }
.flash { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-weight: 600; }

/* A confirmation screen over the page (demolish) */
.sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(34, 48, 58, .45); animation: sheet-in .18s ease-out; }
.sheet-card { width: min(420px, 100%); background: #fff; border: 2.5px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); padding: 22px; text-align: center; animation: sheet-pop .22s cubic-bezier(.2, .9, .3, 1.3); }
.sheet-pic:empty { display: none; }
.sheet-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; margin-bottom: 16px; filter: grayscale(.25); }
.sheet-card h2 { margin: 0; font-size: 26px; }
.sheet-list { text-align: left; margin: 14px 0 0; padding-left: 1.2em; color: var(--ink-2); display: grid; gap: 4px; }
.sheet-btns { display: flex; gap: 10px; margin-top: 20px; }
.sheet-btns .btn { flex: 1; min-height: 50px; font-size: 16px; padding: 0 12px; }
body.sheet-open { overflow: hidden; }
@keyframes sheet-in { from { opacity: 0; } }
@keyframes sheet-pop { from { transform: scale(.9) translateY(12px); opacity: 0; } }

/* ---- the new-house walkthrough, v15: who is who, chat screenshots, the wait, the workshop ---- */
.who { display: grid; gap: 14px; }
.stage-wrap { display: flex; justify-content: center; }
.stage { position: relative; display: inline-block; max-width: 100%; min-height: 120px; min-width: min(100%, 260px); border-radius: 18px; overflow: hidden; background: var(--accent-soft); border: 2.5px solid var(--ink); box-shadow: var(--shadow); }
.stage.empty { display: none; }
.stage canvas { display: block; max-width: 100%; max-height: 440px; width: auto; height: auto; }
.stage-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; font: 600 15px var(--sans); color: var(--accent-ink); background: var(--accent-soft); z-index: 1; }
.stage-wait[hidden] { display: none; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--accent); border-top-color: transparent; animation: spin .9s linear infinite; }
.fbox { position: absolute; box-sizing: border-box; padding: 0; background: transparent; border: 3px solid rgba(255, 255, 255, .55); border-radius: 10px; cursor: pointer; box-shadow: 0 0 0 1.5px rgba(34, 48, 58, .35); }
.fbox::after { content: ''; position: absolute; left: -3px; top: -3px; transform: translateY(-100%); padding: 1px 7px 2px; border-radius: 8px 8px 8px 0; font: 700 11px var(--sans); color: var(--ink); white-space: nowrap; }
/* One color per person, in name order (new.js COLORS): pink, mint, yellow, blue, purple, orange. The
   tag shows the person's name (new.js sets content from data-tag). */
.fbox.p0 { border-color: #ff5c8a; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px #ff5c8a; }
.fbox.p0::after { background: #ff8fb5; }
.fbox.p1 { border-color: #2fbf85; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px #2fbf85; }
.fbox.p1::after { background: #7dd9b1; }
.fbox.p2 { border-color: #e0a800; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px #e0a800; }
.fbox.p2::after { background: #ffd84d; }
.fbox.p3 { border-color: #3d95e6; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px #3d95e6; }
.fbox.p3::after { background: #8cc8ff; }
.fbox.p4 { border-color: #8a5cf0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px #8a5cf0; }
.fbox.p4::after { background: #c7a6ff; }
.fbox.p5 { border-color: #f07f2e; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px #f07f2e; }
.fbox.p5::after { background: #ffb27a; }
.fbox::after { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.fbox.free:hover { border-color: #fff; }
.fbox:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; }
.who-hint { text-align: center; }
.strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pick { flex: none; padding: 0; border: 2.5px solid transparent; border-radius: 12px; background: var(--accent-soft); overflow: hidden; cursor: pointer; scroll-snap-align: start; line-height: 0; }
.pick canvas { display: block; height: 72px; width: auto; }
.pick.on { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.who-names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.who-names .label { display: flex; align-items: center; gap: 7px; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 5px; border: 2px solid var(--ink); }
.dot.p0 { background: #ff8fb5; }
.who-names .field.p0 input:focus { box-shadow: 0 0 0 4px rgba(255, 143, 181, .5); }
.dot.p1 { background: #7dd9b1; }
.who-names .field.p1 input:focus { box-shadow: 0 0 0 4px rgba(125, 217, 177, .5); }
.dot.p2 { background: #ffd84d; }
.who-names .field.p2 input:focus { box-shadow: 0 0 0 4px rgba(255, 216, 77, .5); }
.dot.p3 { background: #8cc8ff; }
.who-names .field.p3 input:focus { box-shadow: 0 0 0 4px rgba(140, 200, 255, .5); }
.dot.p4 { background: #c7a6ff; }
.who-names .field.p4 input:focus { box-shadow: 0 0 0 4px rgba(199, 166, 255, .5); }
.dot.p5 { background: #ffb27a; }
.who-names .field.p5 input:focus { box-shadow: 0 0 0 4px rgba(255, 178, 122, .5); }
/* Names 3 to 6 carry a remove button beside the field. */
.person-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.person-row .field { flex: 1; min-width: 0; }
.person-row .x { flex: none; width: 40px; height: 48px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: 700 20px/1 var(--sans); cursor: pointer; }
.person-row .x:hover { border-color: var(--ink); }
.who-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.who-more .btn::before { content: "+ "; }
.who-more .hint { margin: 0; flex: 1 1 220px; }
/* How each of them talks (optional), folded away under the names. */
.talk-list { display: grid; gap: 14px; }
.talk-person { padding: 16px; border: 2px solid var(--line); border-radius: 18px; background: #fff; }
.talk-person { display: grid; gap: 10px; align-content: start; }
.talk-person h3 { margin: 0; font: 600 17px var(--serif); }
.talk-head { display: flex; align-items: center; gap: 12px; }
.talk-head .face { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--line); }
.talk-head .face.p0 { border-color: #ff5c8a; } .talk-head .face.p1 { border-color: #2fbf85; }
.talk-head .face.p2 { border-color: #e0a800; } .talk-head .face.p3 { border-color: #3d95e6; }
.talk-head .dot.big { width: 14px; height: 14px; }
.talk-person > .label { font: 600 13px var(--sans); color: var(--ink-2); }
.more-people { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 4px; }
.more-people p { margin: 0; min-width: 0; flex: 1 1 200px; }
.talk-person .chip { min-height: 36px; padding: 0 12px; font-size: 14px; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.or::before, .or::after { content: ''; flex: 1; height: 1.5px; background: var(--line); }
/* The chat step's second way in (an export, pasted or uploaded), its own card under the screenshots. */
.chat-alt { margin-top: 26px; padding: 18px 18px 8px; border-radius: var(--radius); background: var(--card); border: 2px solid var(--line); }
.chat-alt h3 { margin: 0 0 4px; font: 600 clamp(19px, 5vw, 22px)/1.2 var(--serif); color: var(--ink); text-wrap: balance; }
.chat-alt > .hint { margin: 0 0 12px; text-wrap: balance; }
.shots-drop { min-height: 110px; padding: 16px; }
.shots-drop strong { font-size: 18px; }
.shots-drop .plus { width: 38px; height: 38px; font-size: 22px; margin-bottom: 2px; }
.shots-drop.full { opacity: .55; pointer-events: none; }
.grid.shots:empty { display: none; }
.grid.shots .tile { aspect-ratio: 9 / 14; }
.patience { margin-top: 18px; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--ink); background: var(--butter); display: grid; gap: 12px; }
.patience p { margin: 0; font-size: 15px; line-height: 1.45; }
.patience strong { font: 600 18px var(--serif); }
.check { display: flex; align-items: center; gap: 10px; font: 700 15px var(--sans); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.sent-step { margin-top: 10px; }
.sent-card { text-align: center; padding: 22px 22px 28px; }
.sent-card .badge { margin-top: 14px; }
.sent-card h2 { margin-top: 10px; font-size: clamp(28px, 7vw, 38px); }
.sent-card .sub { margin: 8px auto 0; max-width: 42ch; color: var(--ink-2); }
.sent-actions { display: grid; justify-items: center; gap: 14px; margin-top: 22px; }
@media (max-width: 560px) { .who-names { grid-template-columns: 1fr; } }

/* The workshop: Carson at the bench (web/scene.js). */
.workshop { max-width: 420px; margin: 0 auto; }
.workshop svg { display: block; width: 100%; height: auto; border-radius: 28px; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: #fdf2e4; }
.workshop .ws-arm { transform-box: fill-box; transform-origin: 10% 50%; animation: ws-hammer 1.1s cubic-bezier(.5, 0, .3, 1) infinite; }
.workshop .ws-head { transform-box: fill-box; transform-origin: 50% 100%; animation: ws-nod 2.2s ease-in-out infinite; }
.workshop .ws-eyes { animation: ws-blink 4s steps(1) infinite; }
.workshop .ws-bubble { transform-box: fill-box; transform-origin: 20% 100%; animation: ws-bob 2.6s ease-in-out infinite; }
.workshop .ws-spark { transform-box: fill-box; transform-origin: center; animation: cta-twinkle 1.8s ease-in-out infinite; }
.workshop .ws-spark.s2 { animation-delay: -.7s; }
.workshop .ws-spark.s3 { animation-delay: -1.2s; }
.workshop .ws-part { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: ws-pop 9s ease-out infinite; }
.workshop .ws-part.p1 { animation-delay: 0s; }
.workshop .ws-part.p2 { animation-delay: .9s; }
.workshop .ws-part.p3 { animation-delay: 1.8s; }
.workshop .ws-part.p4 { animation-delay: 2.5s; }
.workshop .ws-part.p5 { animation-delay: 3.3s; }
.workshop .ws-part.p6 { animation-delay: 4.1s; }
.workshop .ws-part.p7 { animation-delay: 4.8s; }
.workshop .ws-part.p8 { animation-delay: 5.6s; }
.workshop .ws-smoke { transform-box: fill-box; transform-origin: center; animation: ws-smoke 2.4s ease-in-out infinite; }
.workshop .ws-smoke.b { animation-delay: -.8s; }
.workshop .ws-smoke.c { animation-delay: -1.6s; }
.workshop .ws-heart path { transform-box: fill-box; transform-origin: center; animation: beat 1.2s ease-in-out infinite; }
@keyframes ws-hammer { 0%, 100% { transform: rotate(-38deg); } 55% { transform: rotate(6deg); } 70% { transform: rotate(2deg); } }
@keyframes ws-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg) translateY(1px); } }
@keyframes ws-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 98% { transform: scaleY(.1); } }
@keyframes ws-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes ws-pop { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 5% { opacity: 1; transform: translateY(0) scale(1.08); } 8% { transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: translateY(6px) scale(.9); } }
@keyframes ws-smoke { 0% { opacity: .9; transform: translateY(0) scale(.8); } 100% { opacity: 0; transform: translateY(-18px) scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
  .workshop * { animation: none !important; }
  .workshop .ws-part { opacity: 1; }
  .workshop .ws-arm { transform: rotate(-20deg); }
}
.status-card .workshop { margin-bottom: 16px; }
.status-card .workshop svg { width: 100%; margin: 0; }
.status-card:has(.workshop svg) > svg { display: none; }

/* The bow (web/scene.js bow()): Carson thanks them for waiting, right after a house or an update is
   sent; then the page settles. The standing head and the bowed one (top of his hair) swap at the
   bottom of each bow while the body squashes. Off by default, so reduced motion shows him standing. */
.bowing { max-width: 420px; margin: 0 auto; }
.bowing svg { display: block; width: 100%; height: auto; border-radius: 28px; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: #fff3f7; }
.bowing .bw-down, .bowing .bw-sweat, .bowing .bw-lines { opacity: 0; }
.bowing .bw-body { transform-box: fill-box; transform-origin: 50% 100%; animation: bw-squash 3.4s ease-in-out infinite; }
.bowing .bw-up { animation: bw-up 3.4s ease-in-out infinite; }
.bowing .bw-down { transform-box: fill-box; transform-origin: 50% 0; animation: bw-down 3.4s ease-in-out infinite; }
.bowing .bw-sweat { transform-box: fill-box; transform-origin: 50% 0; animation: bw-sweat 3.4s ease-in infinite; }
.bowing .bw-lines { animation: bw-lines 3.4s ease-out infinite; }
.bowing .bw-eyes { transform-box: fill-box; transform-origin: center; animation: ws-blink 4s steps(1) infinite; }
.bowing .bw-spark { transform-box: fill-box; transform-origin: center; animation: cta-twinkle 1.8s ease-in-out infinite; }
.bowing .bw-spark.s2 { animation-delay: -.7s; }
.bowing .bw-spark.s3 { animation-delay: -1.2s; }
@keyframes bw-squash { 0%, 16%, 74%, 100% { transform: scaleY(1); } 30%, 60% { transform: scaleY(.84); } }
@keyframes bw-up { 0%, 20%, 68%, 100% { opacity: 1; } 24%, 64% { opacity: 0; } }
@keyframes bw-down { 0%, 20% { opacity: 0; transform: translateY(-14px); } 26%, 62% { opacity: 1; transform: translateY(0); } 66%, 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes bw-sweat { 0%, 28% { opacity: 0; transform: translateY(-4px); } 34% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; transform: translateY(10px); } 66%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes bw-lines { 0%, 26% { opacity: 0; } 32%, 56% { opacity: 1; } 64%, 100% { opacity: 0; } }
/* The pink thank-you line under the words, while he bows. */
.bow-thanks { margin: 12px auto 0; font: 600 18px/1.3 var(--serif); color: var(--accent-2-ink); text-wrap: balance; }
/* What the bow settles into fades in. */
.settled { animation: bw-settle .45s ease-out; }
@keyframes bw-settle { from { opacity: 0; transform: translateY(6px); } }
/* The update's bow, in the Photos card above "Update on its way." */
.bow-moment { margin-top: 18px; text-align: center; }
.bow-moment h3 { margin-top: 14px; font-size: 24px; font-weight: 700; }
.bow-moment p { margin: 8px auto 0; max-width: 36ch; color: var(--ink-2); }
.bow-moment .bow-thanks { margin-top: 12px; color: var(--accent-2-ink); }
.bow-moment.leaving { animation: bw-leave .4s ease-in forwards; }
@keyframes bw-leave { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .bowing * { animation: none !important; }
  .settled, .bow-moment.leaving { animation: none; }
}

/* ---- collaborators, photo notes and house updates (docs/COLLAB.md) ---- */
/* The note on a photo tile: "Add a note" in the same dark pill as the video label, the note itself
   on butter, clamped to two lines (the sheet shows it whole). */
.tile .note { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 3px 8px; border-radius: 999px; border: 0; background: rgba(44, 58, 54, .72); color: #fff; font: 700 11px/1.3 var(--sans); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .note.on { right: 6px; max-width: none; border-radius: 10px; padding: 4px 8px; background: var(--butter); color: var(--ink); border: 1.5px solid var(--ink); white-space: normal; overflow-wrap: anywhere; }
.tile .note.on > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The note only shows once a photo is stored, so it stands in for the done tick. */
.tile.done:has(.note)::after { display: none; }
.tile .note.off { cursor: default; background: rgba(44, 58, 54, .5); }
.tile .note.ask { right: 6px; max-width: none; white-space: normal; border-radius: 10px; line-height: 1.25; }
.tile .note.ask > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .note.ask:not(.on):not(.off)::before { content: none; }
span.note.on { cursor: default; }
.tile .note:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.notes-count { margin-top: 8px; }
.notes-tip { margin-bottom: 4px; }
.notes-tip .notes-count { margin-top: 4px; font-weight: 700; color: var(--ink); }
/* "Add a note" on a photo: a white pill with a plus, so it reads as a button and not a caption. */
.tile .note:not(.on):not(.off) { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); font-size: 12px; padding: 4px 9px; box-shadow: 0 2px 0 var(--ink); }
.tile .note:not(.on):not(.off)::before { content: "+ "; }
/* No note yet: a round butter pencil button, never words (a phone tile cut them to "What was happeni..."),
   dimmed at the note limit. The tip above the grid shows the same pencil. */
.tile .note.icon.icon { left: 6px; right: auto; bottom: 6px; width: 34px; height: 34px; max-width: none; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--butter); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.tile .note.icon.icon::before { content: none; }
.tile .note.icon.off.off { opacity: .55; box-shadow: none; }
.note svg, .note-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* The same icon inside the sentence that explains it ("Tap [pencil] on a photo"). */
.note-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px 2px; vertical-align: -5px; border-radius: 50%; background: var(--butter); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 1.5px 0 var(--ink); }
.note-ico svg { width: 12px; height: 12px; }
.note-sheet .sheet-pic img, .note-sheet .sheet-pic canvas { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; margin-bottom: 16px; filter: none; }
.note-sheet .sheet-card > .hint { margin: 8px 0 0; }
.note-sheet .field { margin-top: 14px; text-align: left; }
.note-sheet .count { margin: 6px 0 0; text-align: left; }
.note-sheet .msg { text-align: left; }

/* /making/<id>: People and Photos */
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.people li:first-child { border-top: 0; padding-top: 0; }
.people .who { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.people .who small { display: block; font: 500 13px var(--sans); color: var(--muted); margin-top: 2px; }
.people .confirm { flex-basis: 100%; }
.people-card h3 { margin: 18px 0 6px; font-size: 17px; }
.people-card .share-row input { min-height: 44px; }
.photos-card .grid { margin-top: 10px; }
.photos-card h3 { margin: 20px 0 0; font-size: 17px; }
.photos-card .shots-drop { margin-top: 16px; }
.photos-card .notice { margin-top: 16px; }
.photos-card .update-row { margin-top: 18px; }
.photos-card .confirm { margin-top: 12px; }
/* A row's action stays on the right even when a long line pushes it under the name. */
.people li > .link { margin-left: auto; }

/* ---- /my: invitations waiting for your email (docs/COLLAB.md 1) ---- */
.invites { display: grid; gap: 10px; margin-top: 18px; }
.invites:empty { display: none; }
.invite-card { gap: 6px; }
.invite-card strong { overflow-wrap: anywhere; }
.invite-card p { color: var(--ink-2); font-size: 15px; overflow-wrap: anywhere; }
.invite-card .invite-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; }
.invite-card .code-row { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.invite-card .code-row input { flex: 1; min-width: 0; font: 700 22px var(--sans); letter-spacing: .25em; text-align: center; }
.invite-card .code-row .btn { flex: none; }
.invite-card p.msg { margin: 4px 0 0; color: var(--accent-2-ink); }

/* /new step 2, Rooms: the worked example (three polaroids, an arrow, the room they became) and the
   three rules as sticker cards. The photos are the demo house's (web/img/rooms-eg-*). */
.eg { margin: 0; padding: 18px 16px 16px; border-radius: var(--radius); border: 2.5px solid var(--ink); background: var(--card); box-shadow: 0 5px 0 var(--ink); display: grid; gap: 10px; }
.eg-photos { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 150px; }
.pola { position: relative; width: 108px; padding: 6px 6px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 3px 0 var(--ink); }
.pola img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.pola.a { transform: rotate(-8deg) translateY(6px); z-index: 1; }
.pola.b { transform: rotate(2deg) translateY(-8px); z-index: 2; margin: 0 -14px; }
.pola.c { transform: rotate(9deg) translateY(8px); z-index: 1; }
.eg-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); font: 700 14px var(--serif); }
.eg-arrow svg { width: 38px; height: 38px; }
.eg-roomwrap { position: relative; }
.eg-room { border: 2.5px solid var(--ink); border-radius: 16px; overflow: hidden; background: #f6f1e6; box-shadow: 0 4px 0 var(--ink); }
.eg-room img { display: block; width: 100%; height: auto; }
.eg .sticker { position: absolute; z-index: 3; }
.eg-tag-photos { left: 4px; top: -10px; }
.eg-tag-room { right: -6px; top: -12px; }
.eg figcaption { margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.eg figcaption b { color: var(--ink); }
.rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.rule { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px 14px; background: #fff; border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); }
.rule .pic { width: 76px; height: 64px; }
.rule .pic svg { width: 100%; height: 100%; display: block; }
.rule h3 { font-size: 18px; font-weight: 700; }
.rule p { margin-top: 3px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.rule.tilt-l { transform: rotate(-.6deg); } .rule.tilt-r { transform: rotate(.6deg); }
@media (min-width: 600px) { .eg-photos { height: 190px; } .pola { width: 140px; } }
@media (min-width: 760px) { .rules { grid-template-columns: repeat(3, 1fr); } .rule { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 16px 14px 18px; } .rule .pic { width: 96px; height: 80px; } }

/* /new: the no-location tip's two buttons */

/* Making page: "Want to add more to your house?" under the status card (making.js paintMore). */
.more-card { margin-top: 18px; display: grid; gap: 8px; justify-items: start; background: var(--butter); }
.more-card h2 { margin: 0; font-size: 22px; }
.more-card p { margin: 0; }
.more-card .btn { margin-top: 6px; }

/* ---- /making/<id> when ready: the house card, four tabs, one pane at a time (making.js showTab) ----
   The tab bar sticks under the top edge so a long Photos or Story pane can still switch. The column
   never changes width between tabs; only the pane below the bar does. */
.house-ready .status-card { position: relative; padding: 26px 22px 24px; }
.house-ready .status-card .badge { margin-bottom: 10px; }
.status-card .hero-del { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 2px solid var(--ink); background: #fff; color: var(--accent-2-ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: background .15s, transform .1s, box-shadow .1s; }
.status-card .hero-del:hover { background: var(--accent-2-soft); transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.status-card .hero-del:active { transform: translateY(3px); box-shadow: none; }
.status-card .hero-del svg, .del-ico svg, .htab svg { width: 20px; height: 20px; margin: 0; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.htabs-wrap { position: sticky; top: 0; z-index: 10; margin: 18px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter);
  background: linear-gradient(var(--sky) 78%, rgba(234, 250, 241, 0)); }
.htabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 22px; border: 2.5px solid var(--ink); background: var(--accent-soft); box-shadow: 0 4px 0 var(--ink); }
.htab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 6px 4px;
  border: 0; border-radius: 17px; background: none; color: var(--ink-2); font: 600 15px/1.1 var(--serif); cursor: pointer; transition: background .15s, color .15s; }
.htab svg { width: 22px; height: 22px; }
.htab:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.htab[aria-selected=true] { background: var(--butter); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.htab[aria-selected=true] svg { animation: htab-pop .32s cubic-bezier(.2, .9, .3, 1.4); }
.htab-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htab-n { position: absolute; top: 4px; left: calc(50% + 10px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: #fff; color: var(--ink); font: 700 11px/17px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.htab[aria-selected=true] .htab-n { background: var(--accent-2); }
/* Photos uploading, or an update on its way: a little pink dot that breathes. */
.htab.busy::after { content: ''; position: absolute; top: 7px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); border: 1.5px solid var(--ink); animation: beat 1.2s ease-in-out infinite; }
.htab.busy .htab-n { display: none; }
@keyframes htab-pop { from { transform: scale(.7) rotate(-8deg); } }
@media (max-width: 380px) { .htab { font-size: 13.5px; } }

.pane { margin-top: 8px; animation: pane-in .22s ease-out; }
.pane > .card, .pane > .stories { margin-top: 16px; }
.pane > :first-child { margin-top: 6px; }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } }

/* Story: name and sign, then the rooms as cards with their first photo. */
.name-card h2 { margin: 0 0 12px; }
.pane .stories > h2 { margin: 26px 0 6px; }
.room-link { display: grid; grid-template-columns: 58px 1fr auto; padding: 10px 14px 10px 10px; gap: 14px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.room-link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); border-color: var(--ink); }
.room-link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.room-pic { width: 58px; height: 58px; border-radius: 14px; overflow: hidden; border: 2px solid var(--ink); background: var(--butter); display: grid; place-items: center; }
.room-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-no { font: 700 24px var(--serif); color: var(--ink); }
.room-link .room-name { min-width: 0; font: 600 18px/1.2 var(--serif); overflow-wrap: anywhere; }
.room-link .room-name small { margin-top: 4px; }
.room-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 22px/1 var(--serif); }
.room-link:hover .room-go { background: var(--accent); color: #fff; }
.room-link.gone { background: #f6f7f4; }
.room-link.gone .room-pic img { filter: grayscale(1); opacity: .7; }
.pane .more-card { margin-top: 22px; }

/* Photos: what they sent folds up at the end. */
.sent-more { padding: 0; overflow: hidden; }
.sent-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font: 600 19px var(--serif); }
.sent-more > summary::-webkit-details-marker { display: none; }
.sent-more > summary::after { content: '›'; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font: 700 20px/1 var(--serif); transition: transform .2s; }
.sent-more[open] > summary::after { transform: rotate(90deg); }
.sent-more .sent { margin: 0; padding: 0 22px 22px; }
.sent-more .sent > h2 { display: none; }
.sent-more .sent .review { box-shadow: none; border-width: 2px; }

/* Delete: the sheet the bin opens. */
.del-sheet .del-ico { width: 60px; height: 60px; margin: 2px auto 14px; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--accent-2-soft); color: var(--accent-2-ink); }
.del-sheet .del-ico svg { width: 28px; height: 28px; }
.del-sheet h2 { font-size: 24px; }
.del-sheet .hint { margin: 10px auto 0; max-width: 34ch; }
.del-sheet .msg { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .pane, .htab svg { animation: none !important; } }
/* Ready: the house card is a header now, so it gives the tabs more of the first screen. */
.house-ready .status-card { padding: 20px 22px 22px; }
.house-ready .status-card > svg { width: 60px; margin-bottom: 8px; }
.house-ready .status-card h1 { font-size: clamp(26px, 6vw, 32px); }
.house-ready .status-card p { margin-top: 6px; }
.house-ready .status-card .btn { margin-top: 16px; }

/* ---- /welcome: the welcome steps (welcome.js, docs/ONBOARDING.md) ---- */
.onb { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; max-width: 520px; }
.onb-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.onb-back, .onb-back-spacer { width: 40px; height: 40px; }
.onb-back { display: inline-grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--ink); cursor: pointer; padding: 0; }
.onb-back:active { transform: translateY(3px); box-shadow: none; }
.onb-back.off { visibility: hidden; }
.onb-back svg { width: 22px; height: 22px; }
.onb-windows { display: flex; gap: 8px; }
.onb-win { position: relative; width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--line); background: var(--accent-soft); transition: background .26s ease-out, border-color .26s; }
.onb-win::before, .onb-win::after { content: ''; position: absolute; background: var(--line); }
.onb-win::before { left: 8px; top: 0; bottom: 0; width: 1.5px; }
.onb-win::after { top: 8px; left: 0; right: 0; height: 1.5px; }
.onb-win.here { background: #fff; border: 2.5px solid var(--ink); }
.onb-win.lit { background: var(--butter); border-color: var(--ink); }
.onb-win.here::before, .onb-win.here::after, .onb-win.lit::before, .onb-win.lit::after { background: var(--ink); }
.onb-step { display: flex; flex-direction: column; gap: 10px; }
.onb-eyebrow { font: 700 12px var(--sans); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.onb-title { font-size: clamp(28px, 6vw, 34px); }
.onb-sub { font-size: 16px; color: var(--ink-2); }
.onb-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.onb-pick { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 17px; background: #fff; font: 500 17px var(--sans); color: var(--ink); text-align: left; cursor: pointer; outline: 3px solid transparent; outline-offset: 2px; transition: transform .1s, background .15s; }
.onb-pick:active { transform: scale(.985); }
.onb-pick.on { background: var(--accent-soft); font-weight: 700; outline-color: var(--accent); }
.onb-check { width: 26px; height: 26px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; flex: none; }
.onb-photo { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 14px; }
.onb-door { position: relative; width: 168px; height: 168px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 6px 0 var(--ink); overflow: hidden; padding: 0; cursor: pointer; }
.onb-door svg { width: 152px; height: 152px; }
.onb-door img { width: 100%; height: 100%; object-fit: cover; display: block; animation: onb-settle .42s cubic-bezier(.34, 1.56, .64, 1) both; }
.onb-door.busy img { opacity: .55; }
.onb-saving { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--butter); font: 700 13px var(--sans); white-space: nowrap; }
.onb-home { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.onb-home input[type=search] { min-height: 48px; border: 2px solid var(--line); border-radius: 14px; padding: 0 14px; font: 16px var(--sans); background: #fff; }
.onb-countries { max-height: 44vh; overflow-y: auto; margin-top: 0; padding: 4px; }
.onb-here { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.onb-here strong { display: block; color: var(--accent-ink); font-size: 15px; }
.onb-here small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.onb-here small.err { color: var(--accent-2-ink); }
.onb-here-dot { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--butter); }
.onb-here.done .onb-here-dot { background: var(--mint); }
.onb-island svg { display: block; width: 260px; height: 210px; margin: 0 auto; }
.onb-drop { transform-box: fill-box; transform-origin: 50% 100%; animation: onb-drop .55s linear .26s both; }
.onb-center { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.onb-foot { margin-top: 6px; }
.onb-step.enter .rise { animation: onb-rise .32s cubic-bezier(.33, 1, .68, 1) both; }
.onb-step.enter .d1 { animation-delay: 70ms; } .onb-step.enter .d2 { animation-delay: 140ms; } .onb-step.enter .d3 { animation-delay: 210ms; }
.onb-step.enter .d7 { animation-delay: 700ms; } .onb-step.enter .d8 { animation-delay: 780ms; } .onb-step.enter .d9 { animation-delay: 860ms; }
@keyframes onb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes onb-settle { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes onb-drop { 0% { opacity: 0; transform: translateY(-20px) scale(.7); } 70% { opacity: 1; transform: translateY(2px) scale(1.03); } 100% { opacity: 1; transform: none; } }