/* =========================================================
   v2 additions — chat, progress, scorecard/radar.
   Layered on colors_and_type.css + styles.css.
   ========================================================= */

/* ---- slot custom-input row inside the dropdown ---- */
.slot-custom { padding: 6px 6px 4px; border-top: 1px solid var(--hair); margin-top: 4px; }
.slot-custom .m-input { font-size: 14px; padding: 9px 11px; }

/* ---- chat head + progress ---- */
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.chat-head .m-eyebrow { margin: 0; }
.progress { display: inline-flex; gap: 7px; }
.pdot {
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  transition: background var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.pdot.on { background: var(--pc, var(--cyan-hex)); box-shadow: 0 0 10px color-mix(in oklab, var(--pc, #5cd6ff) 55%, transparent); transform: scale(1.12); }

/* ---- chat log + bubbles ---- */
.chat-log {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 42vh; max-height: 62vh; overflow-y: auto;
  padding: var(--space-2) 2px var(--space-4);
  scroll-behavior: smooth;
}
.bubble {
  max-width: min(88%, 560px);
  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
  padding: 14px 18px; border-radius: 18px;
  animation: bubble-in .45s var(--ease) both;
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bubble-merlijn {
  align-self: flex-start; color: var(--fg);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hair);
  border-bottom-left-radius: 6px;
}
.bubble-you {
  align-self: flex-end; color: #0a0a0f;
  background: linear-gradient(120deg, rgba(92,214,255,0.92), rgba(160,124,240,0.92));
  border-bottom-right-radius: 6px;
  font-weight: 400;
}
/* The "Merlijn is typing" ellipsis. Decorative in feel, but it is the only
   thing on screen telling you the turn is still coming, so it gets the
   readable grey. The pulse floor is 0.55 rather than 0.4: at 0.4 over the
   canvas the dot row dropped to roughly 2:1 at its dimmest, which is a
   status indicator you cannot reliably see. */
.bubble.typing { color: var(--fg-label); letter-spacing: 3px; animation: typing-pulse 1.1s ease-in-out infinite; }
@keyframes typing-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---- scoring state ----
   The scoring pass is the big model with high-effort thinking, once per
   session. It can run 10 to 30 seconds, which is long enough that a button
   reading "Scoring it" and then doing nothing visible reads as broken. So
   there is a spinner for the fact that something is happening, and a line
   of text underneath for what. */
.spinner {
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .55em;
  vertical-align: -0.15em;
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: var(--cyan-hex);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scoring-note {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-label);
  /* Held still while the words change, so the line does not jump about. */
  min-height: 1.4em;
}

@media (prefers-reduced-motion: reduce) {
  /* No rotation. The status line is doing the real work anyway, and it is
     also what a screen reader gets. */
  .spinner { animation: none; border-top-color: var(--cyan-hex); }
}

/* ---- answer input + chips ---- */
.chat-input { margin-top: var(--space-4); animation: bubble-in .4s var(--ease) both; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.chip {
  font-family: var(--font-body); font-size: 15px; color: var(--fg);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hair);
  border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.chip:hover { border-color: rgba(92,214,255,0.45); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.chip-go { background: var(--fg); color: #0a0a0f; font-weight: 500; border-color: transparent; }
.answer-form { display: flex; gap: var(--space-2); align-items: stretch; }
.answer-form .m-input { flex: 1; }
.answer-send {
  flex: none; width: 48px; border: 1px solid var(--hair); border-radius: var(--r-input);
  background: var(--fg); color: #0a0a0f; font-size: 20px; cursor: pointer;
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.answer-send:hover { transform: translateY(-1px); box-shadow: var(--glow-cta-hover); }
.answer-form.is-done .m-input, .answer-form.is-done .answer-send { display: none; }

/* ---- scorecard ---- */
.score-title { margin: 0 0 var(--space-6); }
.score-hero {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px);
  align-items: center; margin-bottom: var(--space-6);
}
.score-dial { text-align: center; }
.score-number {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(80px, 13vw, 168px); line-height: 0.9; letter-spacing: -0.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.score-of { font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--track-mono); color: var(--fg-label); text-transform: uppercase; margin-top: 6px; }
.score-radar { display: flex; justify-content: center; }
.score-radar svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }

/* Body copy on the scorecard inherits the one body size (18px). */
.score-entry { max-width: var(--w-story); margin: 0 0 var(--space-6); }
.score-entry strong { font-weight: 500; }

/* ---- per-dimension breakdown: the seven scores, free, each expandable
   into the authored field wisdom (what it measures, the pattern, the fix) ---- */
.dims-hint { margin: 0 0 var(--space-3); color: var(--fg-label); }
.dims { max-width: var(--w-story); margin: 0 0 var(--space-5); display: flex; flex-direction: column; }
.dim-item { border-bottom: 1px solid var(--hair-2); }
.dim-item:first-child { border-top: 1px solid var(--hair-2); }
/* Phase group headers: the seven rows read as KNOW | SAY | RUN, so the
   "You enter at ..." sentence above points at something visible. */
.dim-phase {
  display: flex; align-items: baseline; gap: 10px;
  padding: var(--space-4) 0 8px;
}
.dim-phase:first-child { padding-top: 0; }
.dim-phase + .dim-item { border-top: 1px solid var(--hair-2); }
.dim-phase-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: var(--track-mono-loose); text-transform: uppercase;
  color: var(--pc, var(--cyan-hex));
}
.dim-phase-blurb {
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  color: var(--fg-label);
}
.dim-row {
  display: grid; grid-template-columns: 104px 1fr 104px 24px; gap: 16px; align-items: center;
  width: 100%; padding: 12px 0; background: none; border: none; cursor: pointer; text-align: left;
  transition: background var(--t-hover) var(--ease);
}
.dim-row:hover .dim-name { color: var(--fg); }
.dim-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: var(--track-mono-loose); text-transform: uppercase; color: var(--fg-dim);
  transition: color var(--t-hover) var(--ease);
}
.dim-segs { display: flex; gap: 6px; }
.dim-seg { height: 4px; flex: 1; border-radius: 2px; background: rgba(255,255,255,0.08); }
.dim-seg.on {
  background: var(--pc, var(--cyan-hex));
  box-shadow: 0 0 8px color-mix(in oklab, var(--pc, #5cd6ff) 45%, transparent);
}
.dim-read {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: .04em; color: var(--fg); text-align: right; white-space: nowrap;
}
/* Reads as a button, not a decoration: the rows are the one interactive
   thing on the scorecard and nothing else on the page looks like this. */
.dim-toggle {
  width: 22px; height: 22px; border-radius: 999px;
  border: 1px solid var(--hair-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 400; line-height: 1;
  color: var(--fg-dim);
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.dim-row:hover .dim-toggle {
  border-color: var(--pc, var(--cyan-hex));
  color: var(--pc, var(--cyan-hex));
  background: color-mix(in oklab, var(--pc, #5cd6ff) 10%, transparent);
}
.dim-detail { padding: 2px 0 var(--space-5); }
.dim-measure {
  font-family: var(--font-body); font-weight: 300; color: var(--fg);
  margin: 0 0 var(--space-3); max-width: 56ch;
}
.dim-block {
  font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.55;
  color: var(--fg-dim); margin: 0 0 var(--space-3); max-width: 60ch;
  padding-left: 14px; border-left: 2px solid var(--pc, var(--cyan-hex));
}
.dim-block:last-child { margin-bottom: 0; }
.dim-block-label {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: var(--track-mono-loose); text-transform: uppercase;
  color: var(--pc, var(--cyan-hex)); margin-bottom: 4px;
}
.dims-note { max-width: var(--w-story); margin: 0 0 var(--space-7); }
.dims-note .m-mono-link { margin-left: 6px; white-space: nowrap; }

.sharpest { max-width: var(--w-hero); margin-bottom: var(--space-8); }
.sharpest > .m-label { margin-bottom: var(--space-3); }
.sharp-title { margin: 0 0 var(--space-4); max-width: 20ch; }
.sharp-read { max-width: var(--w-story); margin: 0 0 var(--space-6); }
.sharp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-6); }
.sharp-block { background: rgba(255,255,255,0.02); border: 1px solid var(--hair); border-radius: var(--r-card); padding: var(--space-5); }
.sharp-block .m-label { margin-bottom: var(--space-3); }
.sharp-tip { border-color: rgba(92,214,255,0.25); }
.sharp-tip .m-label { color: var(--cyan-hex); }

/* ---- inline gate (GATE_MODE 'post') ----
   The score and radar are free; the read is what costs an email. The gate card
   is the same #gateForm node, relocated into #gateSlot by conversation.js. */
.gate-inline {
  max-width: var(--w-story);
  margin: 0 0 var(--space-7);
  padding: var(--space-6);
  border: 1px solid rgba(92,214,255,0.25);
  border-radius: var(--r-card);
  background: rgba(92,214,255,0.03);
}
.gate-inline > .m-label { color: var(--cyan-hex); margin-bottom: var(--space-3); }
.gate-inline .m-card-title { margin: 0 0 var(--space-3); }
.gate-inline .m-body { margin: 0 0 var(--space-5); }
.gate-inline .gate-privacy { margin-bottom: 0; }

/* Locked read. A CSS blur was never real protection: the sentence still sat
   in the DOM for anyone who opened inspect. The real text now stays in JS
   until the gate is satisfied, and these bars stand in its place. The
   receipt stays visible on purpose: it's the "why trust this read" credential,
   and it should be readable at exactly the moment the email is asked for. */
.sharpest.is-locked .sharp-title,
.sharpest.is-locked .sharp-read,
.sharpest.is-locked .sharp-grid { display: none; }

.sharp-locked { max-width: var(--w-story); margin: 0 0 var(--space-6); }
.sharp-locked-bar {
  display: block; height: 13px; border-radius: 7px; margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
}
.sharp-locked-bar.short { width: 55%; }
.sharp-locked-note { margin: var(--space-5) 0 0; color: var(--fg-dim); }

.gate-privacy {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--fg-label);
  max-width: 46ch;
  margin: var(--space-4) 0 0;
}

/* ---- framework teaser ---- */
.teaser { border-top: 1px solid var(--hair); padding-top: var(--space-7); max-width: var(--w-hero); margin-bottom: var(--space-8); }
.teaser .m-eyebrow { margin-bottom: var(--space-5); }
.teaser-thesis { margin: 0 0 var(--space-3); max-width: 24ch; }
.teaser-sub { color: var(--fg-dim); margin: 0 0 var(--space-6); }
.teaser-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.phase-card {
  position: relative;
  border: 1px solid var(--hair); border-left: 2px solid var(--pc, var(--cyan-hex));
  border-radius: var(--r-card); padding: var(--space-5) var(--space-5) var(--space-6);
  background: rgba(255,255,255,0.02);
  transition: box-shadow var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.phase-card.is-entry {
  border-color: var(--pc, var(--cyan-hex));
  box-shadow: inset 0 0 24px color-mix(in oklab, var(--pc, #5cd6ff) 14%, transparent);
}
.phase-name { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--pc, var(--cyan-hex)); }
.phase-blurb { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; color: var(--fg-dim); }
.phase-entry { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--track-mono-loose); text-transform: uppercase; color: var(--pc, var(--cyan-hex)); }
.teaser-closer { max-width: var(--w-story); color: var(--fg-dim); margin: 0; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .score-hero { grid-template-columns: 1fr; text-align: center; gap: var(--space-5); }
  /* Fixed pixel tracks plus `white-space: nowrap` on .dim-read overflowed a
     320px viewport: 188px of rigid track and 30px of gap left nothing for the
     segment bar, and "2/3 | Halfway" is wider than 92px in mono. Every track
     now has a zero minimum so it can shrink, and the reading is allowed to
     wrap instead of pushing the row wider than the screen. The last track is
     22px because that is what .dim-toggle actually measures: at 16px the
     circle spilled 6px past every row. */
  .dim-row { grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, auto) 22px; gap: 10px; }
  .dim-name { overflow-wrap: anywhere; }
  .dim-read { white-space: normal; }
  .score-radar svg { max-width: 300px; }
  .sharp-grid { grid-template-columns: 1fr; }
  .teaser-phases { grid-template-columns: 1fr; }
  .chat-log { max-height: none; min-height: 40vh; }
  .bubble { font-size: 17px; }
}

/* Five example chips per question: tighten them on small screens so the
   free-text input stays above the fold. */
@media (max-width: 640px) {
  .chip { font-size: 14px; padding: 8px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .chat-input { animation: none; }
  .pdot { transition: none; }
  .bubble.typing { animation: none; }
}