/* Open matter in Clio (B-075, Build M): the green button beside WON / Reopen on a won deal, the matter link,
   and its modal (contact, matter, dup / contact choice, result, half-done banner). The case details and documents
   rows are clio-details.css (screens2). Own .clio- prefix, tokens only. */
.deal-status .clio-open-btn { min-width: 0; padding: 0 var(--sp-5); }
/* With a matter link the status box is two lines: the buttons, then the link right-aligned under them, so the link
   never takes width from the deal title. */
.deal-status.has-clio-link { flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.deal-status-row { display: flex; align-items: center; gap: var(--sp-4); }
.deal-clio-link {
  color: var(--link); font-size: var(--fs-xs); line-height: var(--lh-sm);
  text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.deal-clio-link:hover { text-decoration: underline; }

.clio-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.clio-banner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm);
  background: var(--bg-note); border: 1px solid var(--yellow); color: var(--yellow-text);
  font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold);
}
.clio-existing { margin-top: calc(-1 * var(--sp-4)); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.clio-existing[hidden] { display: none; }

.clio-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.clio-section-title {
  margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold);
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em;
}
.clio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.clio-static {
  height: var(--control-h); display: flex; align-items: center; padding: 0 var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-app);
  color: var(--text-2); font-size: var(--fs-md);
}

.clio-result { display: flex; flex-direction: column; gap: var(--sp-3); }
.clio-result[hidden] { display: none; }
.clio-result-head { font-size: var(--fs-md); line-height: var(--lh-md); color: var(--green); font-weight: var(--fw-semibold); }
.clio-json {
  margin: 0; max-height: 240px; overflow: auto; padding: var(--sp-5);
  background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); line-height: var(--lh-sm);
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}


.clio-form [hidden], .clio-modal .modal-foot [hidden] { display: none; }
.clio-form-parts { display: flex; flex-direction: column; gap: var(--sp-6); }
.clio-src { margin-top: var(--sp-1); font-size: var(--fs-xs); line-height: var(--lh-sm); color: var(--text-muted); }
.clio-info {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm);
  background: var(--bg-info); border: 1px solid var(--blue); color: var(--text);
  font-size: var(--fs-md); line-height: var(--lh-md);
}
.clio-info-head { font-weight: var(--fw-semibold); }
.clio-partial { font-weight: var(--fw-regular); }
.clio-radios { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.clio-match .clio-radios { flex-direction: column; margin-top: var(--sp-3); }
.clio-radio { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; min-width: 0; }
.clio-radio input { margin: 0; flex: none; }
.clio-radio-sub { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.clio-match { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.clio-run-reason { font-size: var(--fs-sm); color: var(--text-2); }
.clio-result-lines { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-md); line-height: var(--lh-md); color: var(--text); }
.clio-result-link { align-self: flex-start; text-decoration: none; }
.clio-fold {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--link); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}

/* The top line's 'Wrong matter? Unlink': calm, but a real text button you can see. */
.clio-existing { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5); }
.clio-unlink {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--link); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.clio-unlink:hover { text-decoration: underline; }
.clio-unlink:disabled { opacity: 0.6; cursor: default; }
.clio-unlink-card { width: min(420px, calc(100vw - 32px)); box-sizing: border-box; }
.clio-unlink-field { margin-top: var(--sp-5); }

/* Duplicate matters: one row per matter with what she needs to check it. */
.clio-dup-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.clio-dup-row { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.clio-dup-sub {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); padding-left: calc(13px + var(--sp-3));
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); overflow-wrap: anywhere;
}
.clio-dup-link { color: var(--link); text-decoration: none; font-weight: var(--fw-semibold); white-space: nowrap; }
.clio-dup-link:hover { text-decoration: underline; }
/* What 'Update Matter <n>' changes on that matter in Clio: one plain line she reads before sending. */
.clio-dup-change {
  padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); color: var(--text);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .clio-grid { grid-template-columns: minmax(0, 1fr); }
  /* Phone: the footer hint gets its own full-width line above the buttons, so nothing spills out. */
  .clio-modal .modal-foot { height: auto; min-height: var(--modal-foot-h); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); }
  .clio-modal .modal-foot-left { flex: 1 0 100%; flex-wrap: wrap; }
  .clio-modal .modal-foot-left:not(:has(.clio-run-reason:not(:empty))):not(:has(.modal-error:not(:empty))) { display: none; }
}

/* Build 8 (prelaunch-design.md C): a half-done send on the deal: one yellow line under the matter link. */
.deal-clio-partial {
  display: flex; align-items: baseline; gap: var(--sp-3); max-width: 520px;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-note); color: var(--yellow-text); font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.deal-clio-partial-icon { color: var(--yellow-icon); flex: none; }
.deal-clio-partial-text { min-width: 0; overflow-wrap: anywhere; }
.deal-clio-retry {
  flex: none; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--link); font-weight: var(--fw-semibold); white-space: nowrap;
}
.deal-clio-retry:hover { text-decoration: underline; }
.deal-clio-partial-acts { display: inline-flex; flex: none; gap: var(--sp-4); }

/* Fix round 2: 'Uploaded by hand' in the modal's yellow banner (same calm text button as Unlink), and the required
   Clio fields behind Clio's 'Custom Fields' badge: an amber note on an empty required row, one line above the footer. */
.clio-partial { flex-wrap: wrap; }
.clio-partial-text { flex: 1 1 260px; min-width: 0; }
.clio-by-hand { flex: none; }
.clio-required, .clio-required-missing {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--yellow-text);
}
.clio-required { margin-top: var(--sp-1); }
.clio-required[hidden] { display: none; }
.clio-required-icon { color: var(--yellow-icon); flex: none; }
.clio-required-missing {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-note);
}