/* Retainers (B-084): the deal page 'Send Retainer' tab, the editor (#/retainers/<id>), the list (#/retainers) and
   Settings › Retainer templates. Colours only via tokens.css. */

/* ---- Status pills --------------------------------------------------------------------------------------- */
.ret-pill {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-4); flex: none;
  border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 18px;
  background: var(--bg-hover); color: var(--text-2); white-space: nowrap; min-width: max-content; overflow: visible;
}
.ret-pill.is-sent { background: var(--bg-selected); color: var(--blue); }
.ret-pill.is-sending { gap: var(--sp-3); background: var(--bg-selected); color: var(--blue); }
/* BUG-100: small ring spinner for 'sending' (pill, banner and the pending Sent step); `spin` lives in kit.css. */
.ret-pill-spin {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ret-pill-spin, .ret-step.is-pending .ret-step-dot::after { animation-duration: 2.4s; } }
.ret-pill.is-viewed { background: var(--bg-note); color: var(--yellow-text); }
.ret-pill.is-signed { background: var(--won-bg); color: var(--green); }
.ret-pill.is-declined { background: var(--lost-bg); color: var(--red); }
.ret-pill.is-expired, .ret-pill.is-cancelled { background: var(--field-disabled-bg); color: var(--text-muted); }

/* ---- Deal page 'Send Retainer' composer tab (B-091; rows UX-091) --------------------------------------- */
:root { --ret-row-hover: #f5f5f7; }
.ret-tab { display: flex; flex-direction: column; animation: composer-open var(--t-med) var(--ease-enter); }
.ret-tab-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  min-height: 48px; padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
}
.ret-tab-head[hidden] { display: none; }
.ret-tab-caption { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ret-tab-count { color: var(--text-muted); font-weight: var(--fw-regular); }
.ret-tab-count:empty { display: none; }
.ret-new-btn .ic, .ret-new-btn svg { width: 14px; height: 14px; }
.ret-new-btn.is-open { background: var(--bg-selected); border-color: var(--view-active-border); }
.ret-new-btn:disabled { cursor: progress; }
.ret-tab-body .skeleton { padding: var(--sp-5) var(--sp-6); }
.ret-tab-error { padding: var(--sp-5) var(--sp-6); color: var(--red); }
.ret-tab-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-7) var(--sp-6);
  text-align: center;
}
.ret-tab-empty-ic, .ret-tab-empty-ic svg { width: 24px; height: 24px; color: var(--text-muted); }
.ret-tab-empty-title { font-weight: var(--fw-semibold); color: var(--text); }
.ret-tab-empty-text { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.ret-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.ret-row {
  display: flex; align-items: center; gap: var(--sp-5); min-height: 48px; padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.ret-row:first-child { border-top: 0; }
.ret-row:hover { background: var(--ret-row-hover); text-decoration: none; }
.ret-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.ret-row:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.ret-row-ic { color: var(--text-2); }
.ret-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ret-row-title { font-weight: var(--fw-semibold); color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ret-row-meta { font-size: var(--fs-sm); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .ret-tab { animation: none; } }

/* Template picker */
.ret-template-menu { min-width: 300px; max-width: 380px; }
.ret-template-menu .menu-item { gap: var(--sp-4); }
.ret-menu-sub { margin-left: auto; padding-left: var(--sp-5); color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.ret-template-menu .menu-item:hover .ret-menu-sub, .ret-template-menu .menu-item:focus .ret-menu-sub { color: inherit; }
.ret-template-menu .menu-item[aria-busy="true"] { opacity: .6; cursor: progress; }
.ret-menu-caption { padding: var(--sp-4) var(--sp-5) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ret-menu-loading { display: grid; place-items: center; padding: var(--sp-6); }
.ret-menu-empty { padding: var(--sp-5); color: var(--text-2); font-size: var(--fs-sm); max-width: 300px; }

/* ---- Editor page --------------------------------------------------------------------------------------- */
.ret-page { height: 100%; min-height: 0; }
.ret-loading { padding: var(--sp-7); }
.ret-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ret-head {
  flex: none; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7) var(--sp-5); background: var(--bg-surface); box-shadow: var(--shadow-topbar); z-index: 1;
}
.ret-deal-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--link); }
.ret-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.ret-title-wrap { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; flex: 1 1 320px; }
.ret-title-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 var(--sp-3); margin-left: calc(-1 * var(--sp-3));
  border-color: transparent; background: transparent; box-shadow: none;
  font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text);
}
/* UX-143 (sprint P): plain 22px/600 text at rest (no border, no shadow, 36px); a 1px border on hover, the focus border
   on focus; a long title ends in an ellipsis. */
.ret-head .ret-title-input.input {
  height: 36px; border: 1px solid transparent; box-shadow: none; background: transparent;
  font-size: 22px; line-height: 28px; font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap;
}
.ret-head .ret-title-input.input:hover:not(:disabled):not(:focus) { border-color: var(--border); }
.ret-head .ret-title-input.input:focus { border-color: var(--border-focus); background: var(--bg-surface); box-shadow: none; outline: none; }
.ret-title-input:hover:not(:disabled) { border-color: var(--border); }
.ret-title-input:focus { border-color: var(--border-focus); background: var(--bg-surface); }
.ret-title-input:disabled { background: transparent; color: var(--text); cursor: default; }
.ret-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ret-actions .btn .ic, .ret-actions .btn svg { width: 16px; height: 16px; }
.ret-danger-btn { color: var(--red); }
.ret-send-wrap { display: inline-flex; }
.ret-actions .btn-primary:disabled { background: var(--green-disabled); border-color: var(--green-disabled); cursor: not-allowed; }

.ret-body {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr);
  background: var(--bg-app); overflow: hidden;
}
.ret-left { overflow: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); border-right: 1px solid var(--border); background: var(--bg-surface); }
.ret-right { overflow: auto; padding: var(--sp-6) var(--sp-7) var(--sp-9); }
.ret-card-box { display: flex; flex-direction: column; gap: var(--sp-5); }
.ret-card-box:not([hidden]) + .ret-card-box { padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.ret-card-box[hidden] { display: none; }
.ret-box-title { margin: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); }
.ret-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ret-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-semibold); }
.ret-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.ret-field .input, .ret-field .select-trigger { width: 100%; }
.ret-textarea { height: auto; min-height: 64px; padding: var(--sp-3) var(--sp-4); resize: vertical; font: inherit; line-height: var(--lh-md); }
.ret-field .input:disabled, .ret-signer-form .input:disabled { background: var(--field-disabled-bg); color: var(--text-2); }
.ret-affix { position: relative; display: flex; align-items: center; }
.ret-affix .input { padding-left: 22px; }
.ret-affix.is-suffix .input { padding-left: var(--sp-4); padding-right: 26px; }
.ret-affix-text { position: absolute; left: var(--sp-4); color: var(--text-2); pointer-events: none; }
.ret-affix.is-suffix .ret-affix-text { left: auto; right: var(--sp-4); }
.ret-fee-fields { display: flex; flex-direction: column; gap: var(--sp-5); }
.ret-lawyer { display: flex; flex-direction: column; gap: var(--sp-2); }
.ret-lawyer-name { font-size: var(--fs-md); }
.ret-muted { color: var(--text-2); font-size: var(--fs-sm); margin: 0; }

/* Signers */
.ret-signers { display: flex; flex-direction: column; gap: var(--sp-2); }
.ret-signer {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.ret-signer-order {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--bg-hover); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2);
}
.ret-signer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ret-signer-name { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ret-signer-role { margin-left: var(--sp-3); color: var(--text-muted); font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.ret-signer-email { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ret-signer-state { font-size: var(--fs-xs); color: var(--text-2); text-transform: capitalize; white-space: nowrap; }
.ret-signer-state.is-done { color: var(--green); font-weight: var(--fw-semibold); }
.ret-signer-del, .ret-sec-tool { width: 28px; height: 28px; border-radius: var(--r-tile); color: var(--text-2); }
.ret-signer-del svg, .ret-sec-tool svg { width: 16px; height: 16px; }
.ret-signer-del:hover, .ret-sec-del:hover { color: var(--red); }
.ret-signer-del[hidden], .ret-sec-tool[hidden], .ret-sec-drag[hidden] { display: none; }
.ret-add-signer { margin-top: 0; }
.ret-add-signer[hidden] { display: none; }
.ret-add-signer .ic, .ret-add-signer svg { width: 14px; height: 14px; }
.ret-signer-form {
  display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5);
  border-radius: var(--r-md); background: var(--bg-app);
}
.ret-signer-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: var(--sp-4); }
.ret-signer-form-actions { display: flex; justify-content: flex-end; gap: var(--sp-4); }

/* Signing steps (once sent) */
.ret-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ret-step { position: relative; display: flex; align-items: center; gap: var(--sp-4); min-height: 32px; color: var(--text-muted); }
.ret-step + .ret-step::before {
  content: ""; position: absolute; left: 10px; top: -14px; width: 2px; height: 16px; background: var(--border);
}
.ret-step.is-done + .ret-step.is-done::before { background: var(--green); }
.ret-step-dot {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
  border: 2px solid var(--border-strong); background: var(--bg-surface); color: var(--text-inverse);
}
.ret-step.is-done { color: var(--text); }
.ret-step.is-done .ret-step-dot { border-color: var(--green); background: var(--green); }
.ret-step-dot .ic, .ret-step-dot svg { width: 12px; height: 12px; }
.ret-step.is-pending { color: var(--text); }
.ret-step.is-pending .ret-step-dot { border-color: var(--bg-selected); }
.ret-step.is-pending .ret-step-dot::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue);
  border-right-color: transparent; animation: spin .8s linear infinite;
}
.ret-step-label { font-weight: var(--fw-semibold); }
.ret-step-date { margin-left: auto; font-size: var(--fs-sm); color: var(--text-2); }
.ret-step-end { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--lost-bg); color: var(--red); font-size: var(--fs-sm); }
.ret-signed-file {
  display: inline-flex; align-items: center; gap: var(--sp-3); align-self: flex-start;
  padding: var(--sp-3) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
  font-weight: var(--fw-semibold); color: var(--link); text-decoration: none; background: var(--bg-surface);
}
.ret-signed-file:hover { background: var(--bg-hover); text-decoration: none; }

/* ---- Sections ------------------------------------------------------------------------------------------- */
.ret-letter-head { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; max-width: 860px; margin-bottom: var(--sp-5); }
.ret-readonly {
  max-width: 860px; margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: var(--banner-bg); border: 1px solid var(--banner-border); font-size: var(--fs-sm);
}
.ret-readonly[hidden] { display: none; }
.ret-readonly.is-sending { display: flex; align-items: center; gap: var(--sp-4); background: var(--bg-selected); border-color: var(--view-active-border); color: var(--text); }
.ret-readonly.is-sending[hidden] { display: none; }
.ret-readonly.is-sending .ret-pill-spin { color: var(--blue); }
.ret-secs-wrap { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 860px; }
.ret-secs { display: flex; flex-direction: column; gap: 12px; }
.ret-secs-empty { padding: var(--sp-7); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); text-align: center; }
.ret-sec {
  position: relative; padding: var(--sp-5) var(--sp-6) var(--sp-6); background: var(--bg-surface);
  border-radius: var(--r-md); box-shadow: var(--card-shadow);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.ret-sec.is-editable:hover { box-shadow: var(--card-shadow-hover); }
.ret-secs.is-sorting .ret-sec { user-select: none; }
.ret-sec.is-dragging { z-index: 2; transition: box-shadow var(--t-fast) var(--ease); box-shadow: var(--card-shadow-drag); }
.ret-sec.is-editing { box-shadow: 0 0 0 1px var(--border-focus), var(--card-shadow); }
.ret-sec-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ret-sec-drag {
  width: 24px; height: 28px; margin-left: calc(-1 * var(--sp-4)); padding: 0; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); cursor: grab; touch-action: none;
}
.ret-sec-drag:hover { background: var(--bg-hover); color: var(--text-2); }
.ret-sec-drag:active, .ret-sec.is-dragging .ret-sec-drag { cursor: grabbing; }
.ret-sec-drag:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 0; }
.ret-sec-num { color: var(--text-2); font-weight: var(--fw-semibold); flex: none; }
.ret-sec-heading { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); }
.ret-sec.is-editable .ret-sec-heading, .ret-sec.is-editable .ret-sec-body { cursor: text; }
.ret-sec-heading.is-empty { visibility: hidden; }
.ret-sec-tools { display: inline-flex; gap: var(--sp-1); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ret-sec:hover .ret-sec-tools, .ret-sec:focus-within .ret-sec-tools { opacity: 1; }
.ret-sec-body { line-height: var(--lh-md); overflow-wrap: anywhere; color: var(--text); }
.ret-sec-body p { margin: 0 0 var(--sp-3); }
.ret-sec-body p:last-child { margin-bottom: 0; }
.ret-sec-body ul, .ret-sec-body ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-7); }
.ret-sec-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.ret-sec-heading-input { font-weight: var(--fw-semibold); }
.ret-sec-rich { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ret-sec-editor { min-height: 120px; max-height: 420px; overflow: auto; padding: var(--sp-4) var(--sp-5); }
.ret-sec-foot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--bg-app); }
.ret-add-section { align-self: flex-start; }
.ret-add-section[hidden] { display: none; }
.ret-add-section .ic, .ret-add-section svg { width: 14px; height: 14px; }

/* ---- Preview + send ------------------------------------------------------------------------------------- */
.ret-preview-wrap { display: flex; flex-direction: column; gap: var(--sp-5); }
.ret-preview-pane { max-height: min(70vh, 720px); overflow: auto; padding: var(--sp-6); background: var(--bg-app); border-radius: var(--r-md); }
.ret-preview-pane > .spinner { margin: var(--sp-8) auto; }
.ret-paper {
  max-width: 720px; margin: 0 auto; padding: var(--sp-9) var(--sp-9) var(--sp-10); background: var(--bg-surface);
  box-shadow: var(--card-shadow); font-size: var(--fs-md); line-height: 1.6; color: var(--text); overflow-wrap: anywhere;
}
.ret-paper h1, .ret-paper h2, .ret-paper h3 { line-height: 1.3; margin: var(--sp-6) 0 var(--sp-3); }
.ret-paper h1 { font-size: var(--fs-xl); }
.ret-paper h2, .ret-paper h3 { font-size: var(--fs-lg); }
.ret-paper p { margin: 0 0 var(--sp-4); }
.ret-sig-field {
  display: inline-flex; align-items: flex-end; min-width: 220px; height: 44px; margin: var(--sp-4) 0; padding: 0 var(--sp-3) var(--sp-2);
  border-bottom: 2px solid var(--text); background: var(--bg-info); color: var(--text-2); font-size: var(--fs-sm);
}
.ret-sig-field.is-date { min-width: 140px; }
.ret-preview-missing {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-note); color: var(--yellow-text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.ret-preview-missing[hidden] { display: none; }
.ret-preview-error { color: var(--red); }
.ret-send-text { margin: 0 0 var(--sp-4); }
.ret-send-list { margin: 0 0 var(--sp-5); padding-left: var(--sp-7); line-height: var(--lh-lg); }

/* ---- List page ------------------------------------------------------------------------------------------ */
/* UX-097: fixed column widths (list-grid), 40px rows, a 40px header on a light grey, the count right of the filters. */
:root { --ret-list-row-h: 40px; --ret-list-head-bg: var(--bg-app); }
.ret-list-page .list-row { height: var(--ret-list-row-h); min-height: var(--ret-list-row-h); }
.ret-list-page .list-head { background: var(--ret-list-head-bg); }
.ret-list-fee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ret-list-add { gap: var(--sp-2); font-size: var(--fs-md); }
.ret-list-add .ic, .ret-list-add svg { width: 16px; height: 16px; display: block; }
.ret-list-count.list-count { margin-left: var(--sp-4); font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text-2); white-space: nowrap; }
.ret-add-body { display: flex; flex-direction: column; gap: var(--sp-6); }
.ret-add-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ret-add-field .select-trigger { width: 100%; }
.ret-add-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.ret-filter.select-trigger { width: auto; min-width: 160px; max-width: 240px; }
.ret-list-title { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; font-weight: var(--fw-semibold); }
.ret-list-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ret-list-title .ic { color: var(--text-2); }
.ret-list-deal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ret-list-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); text-align: center; }
.ret-list-empty-ic, .ret-list-empty-ic svg { width: 40px; height: 40px; color: var(--text-muted); }

/* ---- Settings › Retainer templates ---------------------------------------------------------------------- */
.rtpl-row-fields { display: flex; align-items: flex-end; gap: var(--sp-7); flex-wrap: wrap; }
.rtpl-row-fields .settings-field { min-width: 200px; }
.rtpl-active-wrap { height: var(--control-h); }
.rtpl-sections .ret-secs-wrap { max-width: none; }
.rtpl-sections .ret-sec { box-shadow: none; border: 1px solid var(--border); }
.rtpl-sections .ret-sec.is-editing { border-color: var(--border-focus); }

@media (max-width: 1000px) {
  .ret-body { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .ret-left, .ret-right { overflow: visible; }
  .ret-left { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .ret-sec, .ret-row, .ret-sec-tools { transition: none; }
}
.ret-sec-rich .ret-sec-editor { background: var(--bg-surface); }

/* ---- Editor while sending + preview polish (UX-092 / UX-093) ------------------------------------------- */
:root {
  --ret-chip-missing-bg: #fff1d6;
  --ret-chip-missing-text: #8a5300;
  --ret-chip-missing-border: #f2c46d;
  --ret-confirm-w: 400px;
  --ret-modal-gap: 48px;
}
.ret-status-slot { flex: none; display: inline-flex; min-width: max-content; }
.ret-more-btn.btn { width: var(--control-h); height: var(--control-h); padding: 0; color: var(--text-2); justify-content: center; }
.ret-more-btn .ic, .ret-more-btn svg { width: 16px; height: 16px; display: block; }
.ret-more-btn[aria-expanded='true'] { background: var(--bg-hover); }
.ret-more-menu { min-width: 200px; }
.ret-more-menu .menu-item.ret-menu-danger { color: var(--red); }
.confirm[data-testid=ret-release-confirm] { width: min(var(--ret-confirm-w), calc(100vw - 32px)); }

/* Merge chips in the letter and the preview: amber while the value is missing. */
.tpl-chip.is-missing { background: var(--ret-chip-missing-bg); color: var(--ret-chip-missing-text); box-shadow: inset 0 0 0 1px var(--ret-chip-missing-border); }
.ret-paper .tpl-chip { font-size: inherit; user-select: text; }
.ret-sec.is-flash { box-shadow: 0 0 0 2px var(--border-focus), var(--card-shadow); }
/* UX-143: the field a preview link jumps to flashes its row for 1.2 s. */
.ret-field.is-flash { animation: ret-field-flash 1.2s var(--ease); border-radius: var(--r-sm); }
@keyframes ret-field-flash {
  0%, 60% { background: var(--bg-selected); box-shadow: 0 0 0 4px var(--bg-selected); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) { .ret-field.is-flash { animation: none; background: var(--bg-selected); } }

/* UX-143: a section with no heading has no empty heading row. The drag handle sits in the left gutter and the edit /
   delete tools float top right, both on card hover or keyboard focus (focus-within). */
.ret-sec.is-headless .ret-sec-head { margin: 0; height: 0; }
.ret-sec.is-headless .ret-sec-heading { display: none; }
.ret-sec.is-headless .ret-sec-drag {
  position: absolute; left: calc(-1 * var(--sp-4)); top: 12px; width: 24px; margin: 0; opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.ret-sec.is-headless .ret-sec-tools { position: absolute; top: var(--sp-3); right: var(--sp-4); z-index: 1; }
.ret-sec.is-headless:hover .ret-sec-drag, .ret-sec.is-headless:focus-within .ret-sec-drag,
.ret-sec.is-headless.is-dragging .ret-sec-drag { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ret-sec.is-headless .ret-sec-drag { transition: none; } }

/* Preview modal: centred with at least 48px above it, no footer (× only). */
.modal-backdrop.ret-preview-backdrop { align-items: center; padding: var(--ret-modal-gap) 0; box-sizing: border-box; }
.ret-preview-backdrop .modal.ret-preview-modal {
  border-radius: var(--r-lg); max-height: calc(100vh - 2 * var(--ret-modal-gap)); transform: translateY(-12px);
  transition: transform var(--t-med) var(--ease-enter);
}
.ret-preview-backdrop.is-open .modal.ret-preview-modal { transform: none; }
.ret-preview-backdrop.is-closing .modal.ret-preview-modal { transform: translateY(-12px); }
.ret-preview-modal .modal-foot { display: none; }
.ret-preview-modal .modal-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.ret-preview-modal .ret-preview-pane { max-height: none; }
.ret-preview-modal .modal-body { min-height: 0; }
.ret-preview-missing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-1); }
.ret-missing-lead { margin-right: var(--sp-2); }
.ret-missing-link.link-btn { padding: 0; height: auto; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.ret-missing-link.link-btn:hover { color: var(--link-hover, var(--link)); }
/* Build B (suggestions-design.md E): 'Fill these before sending' under the header, full width, drafts only. */
/* Inside the page gutter (same side padding as .ret-head), not edge to edge. */
.ret-fill { flex: none; margin: var(--sp-5) var(--sp-7); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--bg-note);
  border: 1px solid color-mix(in srgb, var(--yellow-icon) 40%, transparent); display: grid; gap: var(--sp-3); }
.ret-fill[hidden] { display: none; }
.ret-fill-head { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--yellow-text); }
.ret-fill-ic { width: 18px; height: 18px; border-radius: 50%; background: var(--yellow-icon); color: var(--text-inverse);
  display: inline-grid; place-items: center; font-size: 12px; font-weight: var(--fw-bold, 700); flex: none; }
/* Each row is a grid (design E): label column, suggestion column (ellipsis + title), then one right-aligned action
   column, so Use it / Fill and Take it out line up down the box. Use it and Fill share one width.
   link-btn's own negative margin-top and align-self: flex-start are reset so every item sits on the centre line. */
.ret-fill-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--sp-4); min-width: 0; }
.ret-fill-row .link-btn { align-self: center; margin-top: 0; line-height: var(--lh-md); }
.ret-fill-label.link-btn { color: var(--text); font-size: var(--fs-md); text-align: left; justify-self: start; }
.ret-fill-suggest { color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ret-fill-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); }
.ret-fill-acts > .btn { flex: none; min-width: 64px; justify-content: center; }
.ret-fill-spark { color: var(--gold); }
.ret-fill-out.link-btn { color: var(--text-2); }
.ret-fill-taken { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); color: var(--text-2);
  font-size: var(--fs-sm); padding-top: var(--sp-3); border-top: 1px solid color-mix(in srgb, var(--yellow-icon) 30%, transparent); }
.ret-fill-taken:first-child { padding-top: 0; border-top: 0; }
.ret-fill-taken-lead { font-weight: var(--fw-semibold); }
@media (max-width: 720px) {
  .ret-fill { margin: var(--sp-4); padding: var(--sp-4); }
  .ret-fill-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-2); }
  .ret-fill-label.link-btn { grid-column: 1 / -1; }
}
/* Taken-out text in the letter cards: shown struck and muted (not sent). */
.ret-editor .is-taken-out { text-decoration: line-through; color: var(--text-muted); }