/* innovatica.ai/tell/ (M29). Copied to inno_web_landing/src/tell/tell.css by
   scripts/generate_tell_pages.py; edit this copy in
   domains/zigg/marketing/tell/ and regenerate. Loaded after the site's own
   stylesheet (/static/site.css), whose header, tokens and light/dark themes
   the page shares; only the conversation is styled here, with the site's
   tokens so it follows the theme. Phone first; logical properties only, so
   Arabic (dir=rtl) mirrors. No inline styles anywhere (the site's CSP). */
:root {
  /* The site stylesheet's tokens (site.css, Tailwind --color-*); the second
     values are fallbacks left from the retired /static/style.css (harmless). */
  --t-ink: var(--color-ink, var(--ink)); --t-line: var(--color-line, var(--line));
  --t-red: var(--color-brand, var(--red)); --t-red-deep: var(--color-cta, var(--red-deep));
  --t-text-h3: var(--text-h3, 1.25rem); --t-track-h3: var(--track-h3, -0.01em);
  --raised: var(--color-raised, var(--paper-raised)); --muted: var(--color-ink-2, var(--ink-3)); --ok: #2E7D4F;
  --navy: #1F2F4D; --mustard: #E0A526; --r: 16px;
}
:root[data-theme="dark"] { --navy: #34507F; --ok: #5CC28A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #34507F; --ok: #5CC28A; } }
main.tell a { color: var(--t-ink); text-decoration: underline; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
main.tell { max-width: 640px; margin-inline: auto; padding: 20px 16px 8px; }
main.tell p { max-width: none; }

.host { display: flex; gap: 14px; align-items: flex-start; margin-block-end: 12px; }
.avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: #F4E9D8; color: var(--navy); font-weight: 800; font-size: 30px; box-shadow: 0 0 0 3px var(--mustard); }
.host-name { margin: 0; font-weight: 700; font-size: 20px; }
.disclosure { margin: 2px 0 4px; font-size: 14px; color: var(--muted); }
.linkish { background: none; border: 0; padding: 0; color: var(--t-ink); text-decoration: underline; font-size: 14px; }
.noscript { background: var(--raised); border: 1px solid var(--t-line); border-radius: var(--r); padding: 12px; }

.log { display: flex; flex-direction: column; gap: 8px; margin-block-end: 12px; }
.bubble { max-width: 85%; margin: 0; scroll-margin-top: 96px; /* clear of the sticky site header */ padding: 10px 14px; border-radius: var(--r); }
.bubble.host-b { align-self: flex-start; background: var(--raised); border: 1px solid var(--t-line); border-start-start-radius: 4px; }
.bubble.you { align-self: flex-end; background: var(--navy); color: #fff; border-start-end-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.change { align-self: flex-end; margin-block-start: -4px; }
.bubble.new { animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bubble.new { animation: none; } }

/* The input follows the conversation in the page flow (not pinned to the
   bottom): a pinned dock covered the newest question once the site header
   took its place at the top. */
.dock { border-block-start: 1px solid var(--t-line); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.progress { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.q { display: block; font-weight: 700; margin: 0 0 8px; }
body.chat .q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.chat .step { display: none; }
body.chat .step.current { display: block; }
body.chat .plain-only { display: none; }
body.plain .step { display: block; margin-block-end: 22px; }
body.plain .next { display: none; }
body.plain .log, body.plain .progress { display: none; }
body.plain.sent .log { display: flex; }
body.plain .dock { border: 0; }
textarea, input[type=text], input:not([type]), input[type=email] { width: 100%; font: inherit; padding: 10px 12px;
  border: 1px solid var(--t-line); border-radius: 12px; background: var(--raised); color: var(--t-ink); }
textarea { resize: vertical; min-height: 4.5em; field-sizing: content; }
input[type=email] { text-align: left; }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.err { margin: 6px 0 0; color: var(--t-red-deep); font-size: 14px; }
.next, .send, .secondary { margin-block-start: 10px; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; }
.next, .send { background: var(--t-red); color: #fff; }
.next:hover, .send:hover { background: var(--t-red-deep); }
.send-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.send-no { background: none; border: 0; text-decoration: underline; color: var(--t-ink); padding: 8px 4px; margin-block-start: 10px; }
.secondary { background: var(--t-ink); color: #fff; }
button:disabled { opacity: .55; cursor: default; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 360px) { .chips { grid-template-columns: 1fr; } }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.chip span { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--t-line);
  border-radius: 12px; background: var(--raised); font-size: 15px; cursor: pointer; }
.chip input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }

label[for=email] { display: block; font-size: 15px; margin: 4px 0 6px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 10px; font-size: 14px; }
.consent input { margin-block-start: 4px; flex: none; width: 18px; height: 18px; }
.terms { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

.done .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* The page's name and heading (domains/inno/AGENTS.md, "Pages beyond the home
   page"): the site's kicker, and a heading sized so the conversation still
   starts above the fold on a phone. */
.tell-kicker { margin: 4px 0 6px; }
.tell-title { font-size: var(--t-text-h3); line-height: 1.25; letter-spacing: var(--t-track-h3); margin: 0 0 18px; max-width: none; }
.page-note { margin: 28px 0 8px; font-size: 13px; color: var(--muted); text-align: center; max-width: none; }

/* Page name above the H1: the site stylesheet has no .kicker rule. */
html:has(link[href^="/static/site.css"]) .tell-kicker {
  margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--t-red);
}
html:has(link[href^="/static/site.css"]) .tell-title {
  margin: 0 0 18px; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; color: var(--t-ink);
}