/* Build I (state/lanes/aifoundation-design.md): pick chips (outcome, result, why), the Outcome section
   (components/outcome-block.js), the Case facts card + Similar past cases (components/case-facts.js) and the quick
   "why" chips (components/why-chips.js). No new colours or tokens: same look as the Documents block and AI box. */

/* Shared pick chip */
.pick-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.pick-chip { height: 28px; padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pick-chip:hover { border-color: var(--border-strong); }
.pick-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.pick-chip.is-on { background: var(--chip-active-bg); border-color: var(--blue-bright); color: var(--chip-active-text); }

/* Why chips: their own line directly above the row's Why? box. On a Dismiss row: the question first, then the chips,
   then the Why? box and buttons, chips and box indented past the row's icon (28px + gap). */
.why-chips { flex-basis: 100%; }
.ai-dismiss-row .why-chips, .ai-next-why-row .why-chips, .docs-inline-row .why-chips { padding-left: 40px; box-sizing: border-box; }
.ai-dismiss-row > .why-chips + *, .docs-inline-row > .why-chips + * { margin-left: 40px; }
.ai-edit-why-wrap { display: grid; gap: var(--sp-3); min-width: 0; }
.ai-edit-why-wrap .why-chips, .docs-why-wrap .why-chips { padding-left: 0; }
.ai-edit-row.ai-edit-why-wrap .why-chips { padding-left: calc(64px + var(--sp-3)); }
.docs-why-wrap { display: grid; gap: var(--sp-3); min-width: 0; }

/* Outcome section (deal sidebar first, lead panel under Summary) */
.deal-outcome:empty, .lead-outcome:empty, .deal-outcome[hidden], .lead-outcome[hidden] { display: none; }
.outcome-block { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
.outcome-caption { display: flex; align-items: center; height: 40px; padding: 0 var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.outcome-rows { display: flex; flex-direction: column; gap: 1px; }
.outcome-row.field-row { grid-template-columns: 120px minmax(0, 1fr) 28px; }
.outcome-row.field-row.is-readonly { grid-template-columns: 120px minmax(0, 1fr); cursor: default; }
.outcome-row .outcome-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); white-space: normal; max-height: none; }
/* fields.css clips every non-compact .field-value at 120px (`.field-row:not(.is-compact) .field-value`); this wins
   on specificity so all the chips always show and can be clicked, in the narrow lead column too. */
.field-row.outcome-row .field-value.outcome-value { max-height: none; overflow: visible; white-space: normal; }
.outcome-value .pick-chips { align-items: center; }
.outcome-value.is-add { color: var(--placeholder-soft); }
.outcome-row.is-editable:hover .outcome-value.is-add { color: var(--link); }
.outcome-none { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
/* Lead panel: the caption looks like its SUMMARY / DETAILS captions (leads.css .lead-side .fields-section-title). */
.lead-side .outcome-caption { height: 36px; padding: 0 var(--sp-2); font-size: 11px; font-weight: var(--fw-semibold);
  line-height: var(--lh-sm); color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; }
.lead-side .outcome-block { border-bottom: 0; margin-bottom: 0; padding-bottom: var(--sp-4); }
/* The lead column is narrow (~150px values): the chips row takes the full width under the OUTCOME caption (its own
   'Outcome' label would only repeat the caption; the chip group keeps aria-label 'Outcome'), so 'Not recorded' sits
   inline before the chips and they wrap two to a line instead of one. */
.lead-side .outcome-row[data-testid=outcome-outcome] { grid-template-columns: minmax(0, 1fr); }
.lead-side .outcome-row[data-testid=outcome-outcome] > .field-label { display: none; }
.outcome-edit { opacity: 0; color: var(--text-2); display: grid; place-items: center; }
.outcome-edit .ic, .outcome-edit svg { width: 14px; height: 14px; }
.outcome-row.is-editable:hover .outcome-edit, .outcome-row.is-editable:focus-visible .outcome-edit { opacity: 1; }
.outcome-row.is-editable:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.outcome-row.is-editing { grid-template-columns: minmax(0, 1fr); cursor: default; }
.outcome-row.is-editing:hover { background: none; }
.outcome-error { font-size: var(--fs-sm); color: var(--red); }
.outcome-error:empty { display: none; }

/* Case facts card */
.lead-case-facts:empty, .deal-case-facts:empty { display: none; }
.deal-case-facts { max-width: 1152px; margin-top: var(--sp-7); }
/* Hamid 2026-10-16 ~22:10 (7888, Email tab): "case facts box is expanded too long". On the lead panel the card stops at
   the same 1152px as the composer, Catch me up, the AI box and Documents (leads.css .lead-ai-ready, .lead-docs). */
.lead-case-facts { max-width: 1152px; min-width: 0; }
.deal-case-facts .cf-card { margin-bottom: 0; }
.cf-card { background: var(--bg-surface); border-radius: var(--r-md); box-shadow: var(--shadow-raised);
  padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-5); font-size: var(--fs-md); color: var(--text); min-width: 0; }
.cf-card.is-quiet { box-shadow: none; border: 1px dashed var(--border); padding: var(--sp-3) var(--sp-4); }
.cf-head { display: flex; align-items: center; gap: var(--sp-3); min-height: 28px; min-width: 0; cursor: pointer; }
.cf-card.is-quiet .cf-head, .cf-card[data-state=building] .cf-head, .cf-card[data-state=error] .cf-head { cursor: default; flex-wrap: wrap; }
.cf-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); flex: none; }
.cf-meta, .cf-folded, .cf-empty { font-size: var(--fs-sm); color: var(--text-2); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cf-empty { white-space: normal; }
.cf-folded { color: var(--text); }
.cf-meta .cf-retry { margin-left: var(--sp-2); }
.cf-spacer { flex: 1 1 auto; }
.cf-toggle { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); }
.cf-toggle .ic, .cf-toggle .ic svg { width: 16px; height: 16px; }
.cf-toggle .ic { transition: transform 120ms ease; }
.cf-card[data-open="0"] .cf-toggle .ic { transform: rotate(180deg); }
.cf-building { padding: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text-2); }

.cf-rows { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); }
.cf-item { min-width: 0; }
.cf-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, max-content); gap: var(--sp-4);
  align-items: center; min-height: 28px; }
.cf-label { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-value-cell { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cf-value { border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer;
  min-width: 0; overflow-wrap: anywhere; }
.cf-value:hover { text-decoration: underline; text-decoration-color: var(--border-strong); }
.cf-edit { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--text-2); opacity: 0;
  border-radius: var(--r-sm); }
.cf-edit .ic, .cf-edit svg { width: 14px; height: 14px; }
.cf-row:hover .cf-edit, .cf-edit:focus-visible, .cf-value:focus-visible + .cf-edit { opacity: 1; }
.cf-row.is-unchecked .cf-edit { opacity: 1; }   /* an unchecked ✦ fact: the pencil always shows */
@media (hover: none) { .cf-edit { opacity: .6; } }   /* touch screens: no hover, so the pencil stays findable */
.cf-source { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; min-width: 0;
  font-size: var(--fs-sm); color: var(--text-2); }
.cf-source-text, .cf-source-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-source-link { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.cf-source-link:hover { text-decoration: underline; }
.cf-spark { flex: none; }
.cf-conflict { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2) calc(112px + var(--sp-4));
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--yellow-text); cursor: pointer;
  text-align: left; max-width: 100%; }
.cf-conflict .ic, .cf-conflict svg { width: 14px; height: 14px; flex: none; }
.cf-conflict:hover { text-decoration: underline; }
.cf-docs-link, .cf-add { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.cf-docs-link:hover, .cf-add:hover { text-decoration: underline; }
.cf-unknown { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2);
  min-height: 28px; }
.cf-unknown-names { display: inline-flex; flex-wrap: wrap; gap: 0 var(--sp-1); }
.cf-add { font-size: var(--fs-sm); }
.cf-notes-hint { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-1); }   /* LAUNCH-TEST r6 #2 */

.cf-editor { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0 var(--sp-3) calc(112px + var(--sp-4)); }
.cf-edit-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cf-editor .cf-edit-row > .cf-label { flex: none; min-width: 64px; }
.cf-input.input, .cf-why.input { box-sizing: border-box; height: var(--control-h, 32px); flex: 1 1 160px; min-width: 0; }
.cf-offers { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cf-why-label { font-size: var(--fs-sm); color: var(--text-2); flex: none; }
.cf-edit-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cf-edit-foot.is-confirming > [data-role=row-acts] { display: none; }   /* 'Remove it?' is the one choice */
.cf-remove-slot { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cf-remove { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--red); cursor: pointer; }
.cf-remove:hover { text-decoration: underline; }
.cf-remove-ask { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.cf-part { padding: var(--sp-4) 0 0; margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.cf-check-line { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* The ✦ and its text stay together; only the buttons wrap below. */
.cf-check-lead { display: flex; align-items: baseline; gap: var(--sp-3); flex: 1 1 220px; min-width: 0; }
.cf-check-lead > .ai-spark { flex: none; }
.cf-check-line[hidden] { display: none; }
.cf-check-text { font-weight: var(--fw-semibold); min-width: 0; }
.cf-dismiss-row .cf-why.input { height: 28px; }
.cf-similar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cf-similar > .cf-label { flex: none; width: 112px; }
.cf-similar-text { flex: 1 1 160px; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Similar past cases popover */
.similar-pop { width: 360px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-popover); }
.similar-pop-body { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.similar-pop-head { font-weight: var(--fw-semibold); }
.similar-list { display: grid; gap: var(--sp-3); max-height: 320px; overflow: auto; }
.similar-case-line { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
/* The label + outcome wrap as text; 'Not similar' keeps its one line and never shrinks. */
.similar-case-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 28px; }
.similar-case-link { color: var(--link); text-decoration: none; font-size: var(--fs-md); }
.similar-case-link:hover { text-decoration: underline; }
.similar-case-outcome { font-size: var(--fs-sm); color: var(--text-2); }
.similar-case-line > .btn { flex: none; white-space: nowrap; }
.similar-case-why, .similar-empty { font-size: var(--fs-sm); color: var(--text-muted); }

/* Brief tab: the lawyer's answer on each sent link */
/* Same left edge as the Sent row's content (brief.css .brief-link-line: padding-left var(--sp-6)). */
.brief-link-result { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 0 var(--sp-4) var(--sp-3) var(--sp-6); }
.brief-link-result-label { font-size: var(--fs-sm); color: var(--text-2); }

@media (max-width: 640px) {
  .cf-row { grid-template-columns: 96px minmax(0, 1fr); }
  .cf-row > .cf-source { grid-column: 2; justify-content: flex-start; }
  .cf-conflict, .cf-editor { margin-left: 0; padding-left: 0; }
  .cf-similar > .cf-label { width: auto; }
  .cf-similar-text { flex-basis: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
  .outcome-row.field-row, .outcome-row.field-row.is-readonly { grid-template-columns: 96px minmax(0, 1fr); }
  .outcome-row .outcome-edit { display: none; }
  .ai-dismiss-row .why-chips, .ai-next-why-row .why-chips, .docs-inline-row .why-chips { padding-left: 0; }
}