/* Build L (state/lanes/catchup-design.md): the "Catch me up" card (components/catchup.js) on the lead panel
   (`lead-catchup`, after the composer, before the AI box) and the deal page (`deal-catchup`). No new colours or
   fonts: tokens.css + the AI box's lavender edge (it is AI-written) and the Case facts card's look. Prefix `cu-`. */

.lead-catchup:empty, .deal-catchup:empty { display: none; }
.lead-catchup, .deal-catchup { margin-top: var(--sp-5); max-width: 1152px; min-width: 0; }
/* The AI box's next step reads as the card's 4th part ("Next step + why"): a small gap, not the usual one. */
.lead-catchup:not(:empty) + .lead-ai-ready, .deal-catchup:not(:empty) + .lead-ai-ready { margin-top: 0; }

.cu-card { background: var(--bg-surface); border: 1px solid #ddd5ff; border-radius: var(--r-md); box-shadow: var(--shadow-raised);
  padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-3); font-size: var(--fs-md); color: var(--text); min-width: 0; }
.cu-card.is-quiet { box-shadow: none; border-style: dashed; padding: var(--sp-3) var(--sp-4); }
.cu-head { display: flex; align-items: center; gap: var(--sp-3); min-height: 28px; min-width: 0; cursor: pointer; }
.cu-card.is-quiet .cu-head, .cu-card[data-state=building]:not([data-open]) .cu-head { cursor: default; }
.cu-card.is-quiet .cu-head { flex-wrap: wrap; }
.cu-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); flex: none; }
.cu-meta, .cu-folded, .cu-empty { font-size: var(--fs-sm); color: var(--text-2); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cu-meta { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cu-meta.is-error { color: var(--text-2); white-space: normal; }
.cu-folded { flex: 1 1 auto; }
.cu-empty { white-space: normal; }
.cu-spacer { flex: 1 1 auto; }
.cu-approve { color: var(--green); flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.cu-approve .ic, .cu-approve svg { width: 14px; height: 14px; }
.cu-retry { flex: none; }
.cu-toggle { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); }
.cu-toggle .ic, .cu-toggle .ic svg { width: 16px; height: 16px; }
.cu-toggle .ic { transition: transform 120ms ease; }
.cu-card[data-open="0"] .cu-toggle .ic { transform: rotate(180deg); }
.cu-thinking { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); }
.cu-note { padding-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap; }

/* Sections: label 112px + content; split by space, no dividers. */
.cu-rows { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-3); }
.cu-section { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.cu-label { font-size: var(--fs-sm); color: var(--text-2); line-height: 28px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cu-content { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
/* Sim finding #16: 'Checked facts', the Case facts people approved. */
.cu-fact { font-size: var(--fs-sm); line-height: 20px; padding: 4px 0; color: var(--text); overflow-wrap: anywhere; }
.cu-fact-label { color: var(--text-2); }
.cu-item { min-width: 0; border-radius: var(--r-sm); }
.cu-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
  min-height: 28px; padding: 0 var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); border-radius: var(--r-sm); }
.cu-line.is-dated { grid-template-columns: 48px minmax(0, 1fr) auto; }
.cu-item:not(.is-editing):not(.is-dismissing) > .cu-line:hover,
.cu-item:not(.is-editing):not(.is-dismissing) > .cu-line:focus-within { background: var(--bg-hover); }
.cu-date { font-size: var(--fs-sm); color: var(--text-2); line-height: 28px; white-space: nowrap; }
/* Block, not flex: a flex item's -webkit-box is turned into a plain block, which loses the 2-line clamp and its '…'. */
.cu-main { min-width: 0; display: block; padding: 4px 0; line-height: var(--lh-md); }
.cu-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.cu-text.is-one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-text.is-two { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cu-text.is-clamped { cursor: pointer; }
.cu-text.is-one.is-full { white-space: normal; }
.cu-text.is-two.is-full { display: block; -webkit-line-clamp: unset; }
.cu-text:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; border-radius: 2px; }
/* Sprint catchup leftovers: the warning wraps in full like the line (it was cut to one line with '…' and could not be
   opened); the whole text is its title too. */
.cu-flag { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--yellow-text);
  white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-sm, 18px); }
.cu-flag .ic { color: var(--yellow-icon); flex: none; display: inline-flex; margin-top: 2px; }
.cu-flag .ic, .cu-flag svg { width: 14px; height: 14px; }
.cu-flag > span:last-child { min-width: 0; }
.cu-deadline.is-soon { color: var(--yellow-text); }
.cu-deadline.is-passed { color: var(--red); }

/* Right side: source link, 'Edited by', the line's actions. */
.cu-side { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); min-height: 28px; min-width: 0;
  flex-wrap: wrap; }
.cu-source { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--link);
  cursor: pointer; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-source:hover { text-decoration: underline; }
.cu-source.is-plain { color: var(--text-2); cursor: default; }
.cu-source.is-plain:hover { text-decoration: none; }
.cu-mine { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.cu-newer { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.cu-link { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--link); cursor: pointer; }
.cu-link:hover { text-decoration: underline; }
.cu-link:disabled { color: var(--text-muted); cursor: default; }

/* Edit / Dismiss: the pencil always shows (quiet, var(--text-2)); the words and Dismiss come on row hover, focus,
   and always on a touch screen. Opacity, so the row never jumps. */
.cu-acts { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.cu-act { display: inline-flex; align-items: center; gap: var(--sp-2); height: 24px; padding: 0 var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-sm);
  color: var(--text-2); cursor: pointer; }
.cu-act .cu-act-ic { display: inline-flex; width: 14px; height: 14px; }
.cu-act .cu-act-ic svg { width: 14px; height: 14px; }
.cu-act-word { opacity: 0; }
.cu-act-dismiss { opacity: 0; }
.cu-line:hover .cu-act-word, .cu-line:focus-within .cu-act-word,
.cu-line:hover .cu-act-dismiss, .cu-line:focus-within .cu-act-dismiss { opacity: 1; }
.cu-line:hover .cu-act, .cu-line:focus-within .cu-act { border-color: var(--border); background: var(--bg-surface); color: var(--text); }
.cu-line .cu-act:hover { border-color: var(--border-strong); }
.cu-act:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
@media (hover: none) {
  .cu-act-word, .cu-act-dismiss { opacity: 1; }
  .cu-act { border-color: var(--border); color: var(--text); }
}
.cu-item.is-editing > .cu-line .cu-acts, .cu-item.is-dismissing > .cu-line .cu-acts { visibility: hidden; }

.cu-editor { display: grid; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-3); }
.cu-line.is-dated + .cu-editor, .cu-line.is-dated + .cu-dismiss-row { margin-left: calc(48px + var(--sp-3)); }
.cu-input.input { box-sizing: border-box; width: 100%; min-height: var(--control-h, 32px); resize: none; overflow: hidden;
  font: inherit; line-height: var(--lh-md); padding: 5px var(--sp-3); }
.cu-why.input { box-sizing: border-box; width: 100%; height: var(--control-h, 32px); min-width: 0; }
.cu-hint { font-size: var(--fs-sm); color: var(--text-2); }
.cu-edit-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cu-dismiss-row { display: grid; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-3); }
.cu-dismiss-ask { font-weight: var(--fw-semibold); }
.cu-dismiss-line { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cu-dismiss-line > .cu-why { flex: 1 1 220px; width: auto; }
.cu-dismiss-btns { display: inline-flex; gap: var(--sp-3); margin-left: auto; }
/* 'Where it stands' Edit: the sign-by date, 'No deadline', and 'From Case facts · Change'. */
.cu-date-row { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); }
.cu-date-label { color: var(--text-2); }
.cu-date-input.input { width: auto; height: var(--control-h, 32px); }
.cu-nodate { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); cursor: pointer; }
.cu-from { color: var(--text-2); }
.cu-from[hidden], .cu-link[hidden] { display: none; }

/* Dismissed lines */
.cu-dismissed { font-size: var(--fs-sm); color: var(--text-2); display: grid; gap: var(--sp-2); }
/* One plain line ('1 line dismissed · Show'): not flex, so the space before 'Show' / 'Hide' stays. */
.cu-dismissed-head { display: block; }
.cu-dismissed-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
/* Only the line and 'Dismissed by' are greyed; 'Bring back' is a normal button. */
.cu-dismissed-line .cu-main, .cu-dismissed-line .cu-date { padding: 0; color: var(--text-muted); }
.cu-dismissed-line > .btn { color: var(--text); }
.cu-by { font-size: var(--fs-xs, 12px); color: var(--text-muted); }

/* Phone width: the label sits above its content; source and actions wrap under the text. */
@media (max-width: 600px) {
  .cu-card { padding: var(--sp-3) var(--sp-4); }
  .cu-section { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cu-line, .cu-line.is-dated { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cu-line.is-dated { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-3); }
  .cu-line.is-dated > .cu-side { grid-column: 2; }
  .cu-side { justify-content: flex-start; }
  .cu-line.is-dated + .cu-editor, .cu-line.is-dated + .cu-dismiss-row { margin-left: 0; }
  /* The head wraps: 'Updated …' in full, never cut (the line order is set below). */
  .cu-head { flex-wrap: wrap; row-gap: 0; }
  .cu-head > .cu-meta { white-space: normal; overflow: visible; }
  .cu-dismissed-line { grid-template-columns: 48px minmax(0, 1fr); }
  .cu-dismissed-line > .btn { grid-column: 2; justify-self: start; }
  /* Fix round 3 (b5b / b6b): 'The case' was cut to one line, hiding the offer, and a touch screen has no tooltip.
     On a phone it wraps to 2 lines (clamp + '…'), and a longer one opens in full on tap, like the What happened lines. */
  .cu-text.is-one { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; }
  .cu-text.is-one.is-full { display: block; -webkit-line-clamp: unset; }
  /* Sprint catchup leftovers: the pencil dropped onto a row of its own under almost every line. The source link and the
     buttons stay on one line ('Web form ↗  ✎'); the 'Edit' word and an unshown Dismiss take no room (display: none,
     not just see-through); a line with nothing but the pencil on its right keeps it beside the text. */
  .cu-side > .cu-source { min-width: 0; flex: 0 1 auto; }
  .cu-side > .cu-acts { flex: none; }
  .cu-act-word { display: none; }
  .cu-act-dismiss { display: none; }
  .cu-line:hover .cu-act-dismiss, .cu-line:focus-within .cu-act-dismiss { display: inline-flex; }
  /* 'The case' / 'Where it stands': the pencil sits at the end of the label row, so the text keeps the full width
     (the case line still shows its 2 lines). */
  .cu-section { position: relative; }
  .cu-line.is-acts-only:not(.is-dated) > .cu-side { position: absolute; top: 0; right: 0; }
  .cu-line.is-dated.is-acts-only { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: var(--sp-3); }
  .cu-line.is-dated.is-acts-only > .cu-side { grid-column: auto; }
}
@media (max-width: 600px) and (hover: none) {
  .cu-act-dismiss { display: inline-flex; }       /* a touch screen has no hover: Dismiss shows as its ✕ alone */
}
/* Deal page on a phone: the card first, then the AI box (leads.css puts `deal-ai-ready` first). */
@media (max-width: 640px) {
  .deal-page .deal-main > .deal-catchup { order: -1; margin-top: 0; }
  .deal-page .deal-main > .deal-catchup:not(:empty) + .deal-ai-ready { margin-top: 0; }
  /* Fix round 3 (b5-phone-390): the lead panel put the card below the whole fields column. Now the lead title, then
     the main column with the card and the AI box at its top, then the composer and the rest, then the fields and the
     footer. The side column's box is dropped (display: contents) so its head, fields and footer can be placed apart. */
  .lead-panel .lead-layout > .lead-side { display: contents; }
  .lead-panel .lead-side > .lead-side-head { order: -3; }
  .lead-panel .lead-layout > .lead-main { order: -2; display: flex; flex-direction: column; padding-top: 0; }
  .lead-panel .lead-side > .lead-side-scroll { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
  .lead-panel .lead-main > .ai-section { order: -2; margin-top: 0; }   /* Hamid 2026-11-03: the AI section */
  .lead-panel .lead-main > .lead-catchup { order: -2; margin-top: 0; }
  .lead-panel .lead-main > .lead-ai-ready { order: -1; margin-bottom: var(--sp-5); }
  .lead-panel .lead-main > .lead-catchup:empty + .lead-ai-ready { margin-top: 0; }
}
/* Phone head (b11c): first line ✦ 'Catch me up' + the fold; second line 'Updated …' and 'Looks right', so neither is
   cut ('Updat… 3:12 PI') or squeezed. The ::before is a zero-height line break between the two (a flex item). */
@media (max-width: 600px) {
  .cu-head::before { content: ''; order: 1; flex: 0 0 100%; height: 0; }
  .cu-head > .cu-meta { order: 2; flex: 1 1 auto; }
  .cu-head > .cu-approve { order: 2; margin-left: auto; }
}