/*
 * The Flodini Site Builder: the start, sign-up, "My websites" and the quiz, in flodini.com's look
 * (owner's request, 2026-10-19): lacquer brown text and buttons on rice white, the egg-yolk amber
 * of the "bb" mark for the header and the start page, Manrope for headings and the interface and
 * Source Serif 4 for the start page's longer words (fonts.css), pill buttons.
 */

:root {
  --ink: hsl(18 46% 12%);
  --muted: hsl(18 18% 36%);
  --faint: hsl(18 10% 52%);
  --line: hsl(30 22% 87%);
  --field: hsl(30 22% 80%);
  --paper: hsl(36 33% 97%);
  --card: #ffffff;
  --accent: hsl(18 46% 12%);
  --accent-hover: hsl(18 30% 22%);
  --accent-soft: hsl(40 100% 94%);
  --yolk: hsl(40 99% 53%);
  --yolk-deep: hsl(36 96% 44%);
  --danger: hsl(4 72% 45%);
  --ok: hsl(118 36% 35%);
  --warn: #8a5a12;
  --radius: 16px;
  --shadow: 0 1px 0 hsl(18 46% 12% / 0.06), 0 10px 30px -18px hsl(18 46% 12% / 0.35);
  --font: "Manrope Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-read: "Source Serif 4 Variable", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 16px/1.55 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 14px; }
h2, h3 { letter-spacing: -0.02em; font-weight: 750; }
.muted { color: var(--muted); }

/* Top bar: the yolk band with the "bb" mark, as flodini.com's header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 32px); background: var(--yolk); border-bottom: 2px solid hsl(18 46% 12% / 0.12); }
.top__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; min-width: 0; }
.top__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); display: inline-grid; place-items: center; flex: none; }
.top__mark img { width: 24px; height: auto; display: block; }
.top__brand span:not(.top__mark) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.top__place { color: hsl(18 30% 22%); font-size: 14px; font-weight: 600; }
.top__lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23274e3f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 24px 6px 8px; border-radius: 8px; cursor: pointer; min-height: 36px; }
.top__lang select:hover, .top__lang select:focus-visible { background-color: hsl(18 46% 12% / 0.08); outline: none; }
.top .btn--ghost { color: var(--ink); font-weight: 700; }
.top .btn--ghost:hover { background: hsl(18 46% 12% / 0.08); }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; font-weight: 750; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: background-color 0.14s, transform 0.14s; }
.btn:hover { background: var(--accent-soft); }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--yolk); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn--small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn--wide { width: 100%; min-height: 48px; }
.link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 8px 0; font-weight: 700; text-decoration: underline; text-decoration-color: var(--yolk-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link-btn:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input:not([type]), textarea, select {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--field); border-radius: 10px; background: #fff; font-size: 16px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px hsl(40 99% 53% / 0.45); }
.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; font-weight: 400; }
.hint a { color: var(--accent); text-underline-offset: 2px; }
.form-msg { min-height: 1.5em; margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.form-msg.is-error { color: var(--danger); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 28px); }

/* Page: the footer stays at the bottom of the window on short pages */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px) 64px; }

/* Footer: who makes Flodini, flodini.com's privacy policy and terms of sale, the cookie settings */
.foot { background: var(--card); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot__inner { max-width: 1040px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 32px) calc(24px + env(safe-area-inset-bottom)); }
.foot__company { margin: 0 0 8px; max-width: 760px; line-height: 1.6; }
.foot a { color: var(--accent); text-underline-offset: 2px; }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 0; }
.foot__links a { font-weight: 600; text-decoration: none; padding: 8px 0; }
.foot__links a:hover { text-decoration: underline; }
.foot .consent-settings { font-size: 14px; opacity: 1; text-decoration: none; }
.foot .consent-settings:hover { text-decoration: underline; }

/* Landing: the hero (words and the way in beside a picture of the editing page), then how it works */
.landing { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); }
.landing__hero { width: 100%; max-width: 560px; margin: 0 auto; }
.landing h1 { font-size: clamp(30px, 5vw, 46px); }
.lead { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
.signup label { display: block; margin-bottom: 8px; }
.signup input { margin-bottom: 12px; }
#code { font-size: 24px; letter-spacing: 4px; }

/* My websites */
.sites__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sites__head h1 { margin: 0; }
.site-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.site__main { min-width: 0; flex: 1 1 280px; }
.site__name { font-size: 18px; font-weight: 650; margin: 0 0 6px; overflow-wrap: anywhere; }
.site__meta { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.site__offer { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14.5px; }
.site__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #efece5; color: var(--muted); }
.badge--ok { background: var(--accent-soft); color: var(--accent); }
.badge--wait { background: #fbf1df; color: var(--warn); }
.badge--bad { background: #f8e4de; color: var(--danger); }
.meter { height: 6px; border-radius: 3px; background: #efece5; overflow: hidden; margin-top: 8px; max-width: 220px; }
.meter span { display: block; height: 100%; background: var(--accent); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Quiz */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz__step { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.progress { height: 6px; border-radius: 3px; background: #e9e5dc; overflow: hidden; margin: 0 0 22px; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s ease; }
.quiz__form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field > label, .field > .field__label { display: block; font-weight: 600; }
.field.is-error input, .field.is-error textarea, .field.is-error select { border-color: var(--danger); }
.row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.row--3 { grid-template-columns: 2fr 1fr 1.4fr; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #d6d2c8; background: #fff; font-weight: 550; font-size: 15px; cursor: pointer; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.options { display: grid; gap: 8px; }
.option { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; border: 1px solid #d6d2c8; border-radius: 9px; background: #fff; font-weight: 500; cursor: pointer; }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.option input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.look { position: relative; border: 2px solid transparent; border-radius: 12px; cursor: pointer; display: block; }
.look input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.look__card { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.look__top { display: block; padding: 14px 14px 10px; }
.look__aa { display: block; font-size: 26px; line-height: 1; margin-bottom: 10px; }
.look__line { display: block; height: 6px; border-radius: 3px; width: 70%; margin-bottom: 6px; opacity: 0.35; }
.look__btn { display: inline-block; height: 14px; width: 54px; border-radius: 4px; margin-top: 4px; }
.look__strip { display: flex; height: 16px; }
.look__strip i { flex: 1; }
.look__name { display: block; padding: 8px 2px 0; font-weight: 600; font-size: 14.5px; text-align: center; }
.look:has(input:checked) { border-color: var(--accent); }
.look:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pairs { display: grid; gap: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid #d6d2c8; background: #fff; font-weight: 550; font-size: 14.5px; cursor: pointer; }
.seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.uploads { display: flex; flex-wrap: wrap; gap: 10px; }
.tile { position: relative; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: #efece5; border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--muted); text-align: center; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile--logo img { object-fit: contain; background: #fff; padding: 8px; }
.tile__remove { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(29, 38, 33, 0.8); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.tile--add { cursor: pointer; border-style: dashed; border-color: #c9c4b8; background: #fff; font-weight: 600; color: var(--accent); padding: 8px; }
.tile.is-error { color: var(--danger); padding: 8px; }
.summary { display: grid; gap: 10px; margin: 0; }
.summary div { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.summary dt { font-weight: 600; color: var(--muted); font-size: 14.5px; }
.summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The owner's confirmation on the quiz's last step (not .consent: that is the cookie banner's, measure.css). */
.owner-ok { display: flex; gap: 10px; align-items: flex-start; font-weight: 550; }
.owner-ok input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.quiz__saved { color: var(--faint); font-size: 13.5px; }

/* Building */
.done { max-width: 620px; margin: 0 auto; text-align: center; display: grid; gap: 12px; justify-items: center; }
.done .spinner { width: 28px; height: 28px; color: var(--accent); }
.done p { color: var(--muted); margin: 0 0 8px; }

@media (max-width: 760px) {
  .row, .row--3 { grid-template-columns: 1fr; }
  .looks { grid-template-columns: repeat(2, 1fr); }
  .summary div { grid-template-columns: 1fr; gap: 2px; }
  .top__place { display: none; }
  .top__brand span:not(.top__mark) { display: none; }
  .top__nav { flex-wrap: nowrap; gap: 2px; }
  .top { padding: 10px 14px; }
  .quiz__nav .btn { flex: 1; }
  .quiz__saved { display: none; }
}

/* The AI's follow-up questions (step 6). */
.followups { display: grid; gap: 18px; }
.followups__wait { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.followups__wait .spinner { color: var(--accent); }
.followup input[type="text"] { margin-top: 8px; }
.hint--above { margin: -2px 0 8px; }
.uploads { border-radius: 12px; transition: background-color .15s, box-shadow .15s; }
.uploads.is-over { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.tile--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tile__or { font-size: 11px; font-weight: 500; color: var(--muted); }
@media (hover: none) { .tile__or { display: none; } }
.done.is-ready .spinner, .done.is-failed .spinner { display: none; }

/* The email address after the build started (start.ts): on the waiting page and in My websites */
.keep { text-align: left; }
.keep h2 { font-size: 19px; line-height: 1.3; margin: 0 0 6px; }
.keep--done { width: 100%; margin-top: 16px; padding: clamp(18px, 3vw, 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.keep__slot { margin-top: 14px; }
.keep__saved { color: var(--ok) !important; font-weight: 600; margin: 0 !important; }
.sites .keep { margin-top: 24px; max-width: 560px; }
.progress-box { width: 100%; max-width: 420px; margin: 4px 0 12px; text-align: left; display: grid; gap: 12px; }
.progress-box[hidden] { display: none; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stage { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; }
.stage__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d6d2c8; flex: none; display: grid; place-items: center; }
.stage.is-now { color: var(--ink, #1c2520); font-weight: 650; }
.stage.is-now .stage__dot { border-color: var(--accent); background: var(--accent-soft); animation: stage-pulse 1.6s ease-in-out infinite; }
.stage.is-done .stage__dot { border-color: var(--accent); background: var(--accent); }
.stage.is-done .stage__dot::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
@keyframes stage-pulse { 50% { box-shadow: 0 0 0 5px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .stage.is-now .stage__dot { animation: none; } }
.done-steps { list-style: none; margin: 0 0 0 28px; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.done-steps:empty { display: none; }
.done-steps li { display: flex; gap: 8px; }
.done-steps li:last-child { color: var(--ink, #1c2520); }
.done-steps__count { font-variant-numeric: tabular-nums; opacity: .7; }
.done .done-time { font-size: 13px; margin: 0; }
.site__hint { font-size: 13px; }
.site__hint.is-low { color: var(--danger); }
.meter--low span { background: var(--danger); }
.site__progress { display: grid; gap: 2px; margin-top: 10px; }
.site__progress p { margin: 0; }
.site__stage { font-weight: 600; color: var(--ink); font-size: 15px; }
.site__now { color: var(--muted); font-size: 14px; }
.btn--quiet { color: var(--danger); border-color: transparent; background: transparent; box-shadow: none; }
.btn--quiet:hover { background: #f6e9e5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The start (describe.ts): the headline, one white box for the visitor's own words with the
   pictures link and the button inside it, the question back above the words when there is one,
   three examples that fill the box, and one line under it. "Sign in" sits in the top bar. */
.ask { width: 100%; min-width: 0; max-width: 760px; margin: 0 auto; padding-top: clamp(8px, 7vh, 72px); text-align: center; }
.ask h1 { margin: 0 0 clamp(20px, 3.5vw, 32px); }
.box { position: relative; text-align: left; background: var(--card); border-radius: 24px; border: 2px solid transparent; padding: 18px 18px 14px; box-shadow: 0 1px 0 hsl(18 46% 12% / 0.08), 0 24px 48px -24px hsl(18 46% 12% / 0.45); transition: border-color 0.14s; }
.box:focus-within { border-color: var(--ink); }
/* Pictures dragged over the page: the box says where to drop them. */
.box__drop { position: absolute; inset: -2px; z-index: 2; display: none; place-items: center; padding: 16px; border: 2px dashed var(--ink); border-radius: inherit; background: hsl(40 100% 94% / 0.96); color: var(--ink); font-size: 18px; font-weight: 800; text-align: center; pointer-events: none; }
.box.is-dropping .box__drop { display: grid; }
.box textarea { display: block; border: 0; border-radius: 0; box-shadow: none; padding: 4px 6px; min-height: 120px; resize: none; font-size: 18px; line-height: 1.5; background: transparent; }
.box textarea:focus { box-shadow: none; }
.box textarea::placeholder { color: hsl(18 10% 55%); }
.box__question { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); }
.box__lead { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.box__asked { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.box__pictures { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0 6px; list-style: none; }
.box__pictures li { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #efece5; display: grid; place-items: center; font-size: 11px; color: var(--muted); text-align: center; }
.box__pictures li.is-error { width: auto; min-width: 56px; max-width: 220px; padding: 0 10px; background: #f8e4de; color: var(--danger); }
.box__pictures img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A document in the box, by its name. */
.box__pictures li.is-doc { width: auto; min-width: 56px; max-width: 240px; padding: 0 32px 0 12px; place-items: center start; background: var(--accent-soft); color: var(--ink); font-size: 13px; font-weight: 650; }
.box__doc { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 22px; background: no-repeat left center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d1a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.box__pictures li.is-doc button { top: 50%; transform: translateY(-50%); }
.box__pictures button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; padding: 0; background: hsl(18 46% 12% / 0.78); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer; }
.box__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.attach { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 650; font-size: 15px; padding: 8px 10px; border-radius: 999px; cursor: pointer; }
.attach:hover, .attach:focus-within { background: var(--accent-soft); color: var(--ink); }
.attach:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.attach svg { width: 20px; height: 20px; flex: none; }
.box__go { min-height: 50px; padding: 0 24px; font-size: 16px; }
.box__go svg { width: 18px; height: 18px; flex: none; }
/* The wait (often ten seconds): the button keeps its colour with a spinner, a bar fills along the box's foot. */
.box__spin { display: none; width: 16px; height: 16px; }
.box__go[aria-busy="true"] svg { display: none; }
.box__go[aria-busy="true"] .box__spin { display: inline-block; }
.box__go[aria-busy="true"]:disabled { opacity: 1; cursor: progress; }
.box__progress { position: absolute; left: 22px; right: 22px; bottom: 7px; height: 4px; border-radius: 2px; background: hsl(36 33% 92%); overflow: hidden; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.box__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--yolk-deep); }
.box.is-busy .box__progress { opacity: 1; }
.box.is-busy .box__progress span { width: 92%; transition: width 14s cubic-bezier(0.2, 0.6, 0.3, 1); }
.ask__slow { margin: 12px 0 0; font-size: 15px; font-weight: 650; color: hsl(18 30% 22%); }
@media (prefers-reduced-motion: reduce) {
  .box.is-busy .box__progress span { transition: none; width: 60%; }
}
.ask__msg { min-height: 0; margin: 10px 0 0; text-align: left; }
.ask__msg:empty { display: none; }
.examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.examples button { border: 1px solid hsl(18 46% 12% / 0.18); background: hsl(36 33% 97% / 0.55); color: var(--ink); border-radius: 999px; min-height: 38px; padding: 0 14px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.examples button:hover { background: var(--card); }
.sure { margin: 18px 0 0; font-size: 15px; font-weight: 650; color: hsl(18 30% 22%); }
.sure span + span::before { content: "·"; margin: 0 10px; color: hsl(18 30% 22% / 0.6); }
@media (max-width: 560px) {
  /* On a phone: the button across the box above the pictures link, the examples in one row that scrolls. */
  .ask { text-align: left; padding-top: 0; }
  .box { padding: 14px 14px 12px; border-radius: 20px; }
  .box textarea { min-height: 132px; font-size: 17px; }
  .box__bar { flex-wrap: wrap; }
  .box__go { width: 100%; order: -1; }
  .attach { padding-left: 4px; }
  .examples { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * clamp(16px, 4vw, 32px)); padding-right: clamp(16px, 4vw, 32px); scrollbar-width: none; }
  .examples::-webkit-scrollbar { display: none; }
  .examples button { white-space: nowrap; }
  .sure { font-size: 14px; }
}
.signup__lead { margin: 0 0 14px; font-weight: 600; }
#signup-back { margin-top: 4px; }
.quiz__signin { margin-top: 18px; }
.quiz__signin h2 { margin: 0 0 6px; font-size: 20px; }
.quiz__signin > .muted { margin: 0 0 16px; }
.empty-start { max-width: 520px; margin: 0 auto; }
.empty-start label { display: block; margin-bottom: 8px; }
.empty-start input { margin-bottom: 4px; }
.empty-start .hint { margin-bottom: 14px; }

/* flodini.com's look on the start page: the yolk band, Source Serif for the longer words, white
   cards with lacquer pill buttons (builder.js puts on-yolk on the body while the start shows). */
body.on-yolk { background: var(--yolk); }
.on-yolk .top { border-bottom-color: hsl(18 46% 12% / 0.16); }
body.on-yolk .page { max-width: 1180px; }
.landing h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.02; letter-spacing: -0.045em; }
.on-yolk .lead { color: hsl(18 30% 22%); }
.lead { font-family: var(--font-read); font-size: 20px; line-height: 1.55; }
.on-yolk .card { border-color: transparent; }
.chip input:checked + span { color: var(--yolk); }
.progress span, .meter span { background: var(--yolk-deep); }
.badge--ok { background: hsl(118 36% 35% / 0.12); color: var(--ok); }
.site__offer { color: var(--ink); }
.foot a { text-decoration-color: var(--yolk-deep); }

/* The quiz's documents (a menu, a price list): tiles by name. */
.uploads--files .tile--doc { width: auto; height: 56px; min-width: 120px; max-width: 260px; padding: 0 34px 0 12px; display: grid; place-items: center start; background: var(--accent-soft); color: var(--ink); font-size: 13.5px; font-weight: 650; }
.uploads--files .tile--add { width: auto; height: 56px; padding: 0 16px; }
.uploads--files .tile__remove { top: 50%; transform: translateY(-50%); }
.uploads--files .tile--doc .box__doc { max-width: 100%; }

/* The one-button start (START=chat): the headline, one line and one large button, centred. */
.ask--go { text-align: center; }
.ask--go .go__lead { font-family: var(--font-read); font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 34rem; margin: 0 auto 1.75rem; }
.ask--go .go__button { font-size: 1.15rem; padding: 1rem 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.6rem; }
.ask--go .go__button svg { width: 1.2em; height: 1.2em; }
.ask--go .go__button .spinner { display: none; }
.ask--go .go__button.is-sending .spinner { display: inline-block; }
.ask--go .go__button.is-sending svg { display: none; }
.ask--go .sure { margin-top: 1.25rem; }