/* ============================================================
   Shared assessment styles — /ai/assess and /ai/readiness.

   Everything here is product-neutral: the design system, the nav, the
   conversation UI, the CAPTCHA gate, and the report *chrome* (header, section
   labels, dividers, actions).

   Report *content* styling is per-assessment and lives inline in each shell —
   opportunity cards and confidence badges for the agent assessment, the
   readiness chart and worksheet table for the readiness one. Keeping those out
   of here is what stops this file accumulating both products' report CSS.
   ============================================================ */

/* ============================================================
   BASE — identical to index.html variables and reset
============================================================ */
:root {
  --ink: #1a1a18;
  --ink-light: #4a4a44;
  --ink-faint: #8a8a80;
  --paper: #f7f5f0;
  --paper-warm: #edeae2;
  --accent: #2d6a4f;
  --accent-mid: #52b788;
  --accent-light: #d8f3dc;
  --rule: rgba(26, 26, 24, 0.12);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", sans-serif;
  --max-w: 900px;
  --gutter: clamp(1.5rem, 5vw, 3rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.conversation-active {
  overflow: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
}
h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

p {
  max-width: 62ch;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
strong {
  font-weight: 500;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   NAV — same as index.html, simplified links
============================================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 60px;
}
/* Plain inline, exactly as on index.html — the space between the lettermark
   and the words is literal whitespace in the markup, not a flex gap. An
   inline-flex container here collapses that whitespace and substitutes its own
   gap, which is why the mark used to sit wider than the one on the home page. */
.nav-logo {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo:hover {
  text-decoration: none;
}

/* F2 Impact lettermark — identical to the main page's nav logo, so a visitor
   arriving from `/` sees the same mark rather than a second brand. */
.nav-logo-f2 {
  color: #4a5568;
}
.nav-logo-f2 sup {
  font-size: 0.6em;
  vertical-align: super;
}
.nav-logo-impact {
  color: #dd6b20;
}
/* Separator between the lettermark and the practice name. */
.nav-logo-sep {
  color: var(--rule);
}
/* Set like the main page's nav links, so the practice name reads as a
   destination rather than as a second brand. */
.nav-logo-practice {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.nav-back {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-light);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-back:hover {
  color: var(--accent);
  text-decoration: none;
}
.nav-restart {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.nav-restart:hover {
  color: var(--accent);
}

/* ============================================================
   SHARED BUTTON STYLES
============================================================ */
.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: #235c42;
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-ghost:hover {
  background: var(--accent-light);
  text-decoration: none;
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: var(--ink);
  border-top: 1px solid rgba(247, 245, 240, 0.08);
  padding-block: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(247, 245, 240, 0.65);
}
footer a {
  color: rgba(247, 245, 240, 0.35);
}

/* ============================================================
   CONVERSATION LAYOUT
============================================================ */
#conversation {
  height: calc(100vh - 60px);
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Thin intro strip */
.advise-intro {
  flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem var(--gutter);
}
.advise-intro-inner {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.advise-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink);
}
.advise-sep {
  color: var(--rule);
}
.advise-desc {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* Thread */
#thread {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem var(--gutter);
  scroll-behavior: smooth;
}
.thread-inner {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Bubbles */
.bubble-row {
  display: flex;
}
.bubble-row.advisor {
  justify-content: flex-start;
}
.bubble-row.user {
  justify-content: flex-end;
}

.bubble-wrap {
  max-width: 84%;
  display: flex;
  flex-direction: column;
}
.bubble-row.user .bubble-wrap {
  align-items: flex-end;
}

.bubble-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.bubble-row.advisor .bubble-label {
  color: var(--accent);
}
.bubble-row.user .bubble-label {
  color: var(--ink-faint);
}

.bubble {
  padding: 0.7rem 1rem;
  border-radius: 3px;
  font-size: 0.92rem;
  line-height: 1.7;
}
.bubble p {
  max-width: none;
}
.bubble p + p {
  margin-top: 0.45rem;
}

.bubble-row.advisor .bubble {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-mid);
}
.bubble-row.user .bubble {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 4px 2px;
}
.typing-dot {
  width: 7px;
  height: 7px;
  background: var(--ink-faint);
  border-radius: 50%;
  animation: typingPulse 1.3s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
  animation-delay: 0.18s;
}
.typing-dot:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes typingPulse {
  0%,
  80%,
  100% {
    transform: scale(0.72);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Input area */
#input-area {
  flex-shrink: 0;
  padding: 1rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.input-inner {
  max-width: 640px;
  margin-inline: auto;
}

/* Text / email input */
.text-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.advisor-input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-body);
  /* Must stay >= 16px: iOS Safari auto-zooms the viewport on focus for any
     text input/textarea sized below that, and doesn't reliably un-zoom once
     we swap this element out of the DOM on submit. */
  font-size: 16px;
  font-weight: 300;
  padding: 0.65rem 0.9rem;
  transition: border-color 0.2s;
  outline: none;
  width: 100%;
}
.advisor-input:focus {
  border-color: var(--accent-mid);
}
.advisor-input::placeholder {
  color: var(--ink-faint);
}
.advisor-input.input-error {
  border-color: #c05050;
}

textarea.advisor-input {
  resize: none;
  min-height: 80px;
}

.send-btn {
  padding: 0.65rem 1.2rem;
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: stretch;
}
.textarea-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.skip-btn {
  font-size: 0.78rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.skip-btn:hover {
  color: var(--ink-light);
}

/* Option buttons — single select */
.options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.option-btn {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 300;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  text-align: left;
}
.option-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.option-btn:active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Toggle buttons — multi select */
.toggle-btn {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 300;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  text-align: left;
}
.toggle-btn:hover {
  border-color: var(--accent-mid);
}
.toggle-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.toggle-btn.selected:hover {
  background: #235c42;
  border-color: #235c42;
}

.multi-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
}
.multi-count {
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.continue-btn {
  display: none;
}
.continue-btn.visible {
  display: inline-block;
}

/* Loading placeholder */
.input-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 0.35rem 0;
}

/* ============================================================
   REPORT CHROME — shared frame; content styling is per-assessment
============================================================ */
#report-view {
  display: none;
}
#report-view.visible {
  display: block;
  margin-top: 60px;
}

.report-header {
  background: var(--accent);
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.report-header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}
.report-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.report-eyebrow::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent-light);
}
.report-header h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 0.75rem;
}
.report-meta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: none;
}

.report-body {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.report-section {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/**
 * Report section heading.
 *
 * Serif, black, sentence case — matching the emailed version of both reports,
 * which have always used Georgia 20px black. This class is only ever used
 * inside #report-view on the two assessment pages; the marketing pages carry
 * their own inlined .section-label (small uppercase accent) and do not load
 * this stylesheet, so they are unaffected.
 */
.section-label {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.85rem;
  display: block;
}
.section-label::before {
  content: none;
}

.report-prose {
  font-size: 0.95rem;
  color: var(--ink-light);
  line-height: 1.8;
  max-width: 62ch;
}

/* Divider */
.report-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* About Markus */
.about-box {
  padding: 1.5rem;
  background: var(--paper-warm);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.about-text {
  flex: 1;
}
.about-name {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  max-width: none;
}
.about-creds {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
  max-width: none;
}
.about-focus {
  font-size: 0.88rem;
  color: var(--ink-light);
  max-width: none;
}

/* Report actions */
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 600px) {
  textarea.advisor-input {
    min-height: 70px;
  }
  .toggle-btn,
  .option-btn {
    font-size: 0.82rem;
    padding: 0.45rem 0.75rem;
  }
}

/* ============================================================
   CAPTCHA GATE
============================================================ */
#captcha-gate {
  height: calc(100vh - 60px);
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.gate-inner {
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.gate-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.gate-eyebrow::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.gate-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
/* Positioning line — the one-sentence statement of who this assessment is
   for. Load-bearing when two products share a persona. */
.gate-positioning {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent);
  max-width: 40ch;
  margin: 0 auto 1.25rem;
}
.gate-desc {
  font-size: 0.95rem;
  color: var(--ink-light);
  line-height: 1.75;
  max-width: 42ch;
  margin: 0 auto 2rem;
}
/* The body face only ships 300/400/500, so a default <strong> would render as
   synthetic bold. 500 against full-strength ink is the emphasis that exists. */
.gate-desc strong {
  font-weight: 500;
  color: var(--ink);
}
.gate-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.btn-primary:disabled {
  background: var(--paper-warm);
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  cursor: not-allowed;
  transform: none;
}
.gate-error {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #c05050;
  max-width: none;
}

/* ============================================================
   PRINT (PDF download)
============================================================ */
@media print {
  nav,
  #conversation,
  #site-footer {
    display: none !important;
  }
  #report-view {
    margin-top: 0 !important;
  }
  .report-actions {
    display: none !important;
  }
  .report-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}