/* Styles for the improve screen (step 7). Tokens only, no raw colors. Reuses the m- kit: replay result, version diff, status pill, role chip. */

.im-status { margin: 2px 0 10px; }
.im-sec { margin-top: 30px; }
.im-h { font: 600 clamp(17px, 1rem + 0.4vw, 20px)/1.3 var(--sans); letter-spacing: -0.01em; margin: 0 0 6px; }
.im-sub { color: var(--soft); max-width: 52em; margin: 0 0 14px; }
#im-b-done:focus, #im-l-done:focus, #im-l-released:focus { outline: none; }

/* Gap themes: a count, the theme with its example, and where it stands. */
.im-gaps { display: grid; gap: 10px; }
.im-gap { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; }
.im-gap-n { display: grid; justify-items: start; }
.im-gap-n b { font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.im-gap-n span { color: var(--soft); font-size: 12px; }
.im-gap-b { display: grid; gap: 3px; min-width: 0; }
.im-gap-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.im-gap-t b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.im-gap-b .m-sub { overflow-wrap: anywhere; }
.im-gap-s { display: flex; justify-content: flex-end; }
@container (max-width: 640px) {
  .im-gap { grid-template-columns: 70px minmax(0, 1fr); }
  .im-gap-s { grid-column: 1 / -1; justify-content: flex-start; }
}

/* The two proposal windows. */
.im-win { display: block; }
.im-win .m-bar .m-title { flex: 1 1 auto; }
.im-stack { display: grid; gap: 8px; min-width: 0; }
.im-win .m-head, .im-win .m-sub, .im-win .m-meta dd { overflow-wrap: anywhere; }
.im-win .m-exc-top .m-ai { margin-right: auto; }
.im-steps { display: grid; gap: 6px; counter-reset: imstep; margin-top: 2px; }
.im-steps li { counter-increment: imstep; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; overflow-wrap: anywhere; }
.im-steps li::before { content: counter(imstep); display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--soft); border-radius: 50%; font: 500 11.5px/1 var(--mono); color: var(--soft); }

/* The replay. Differences are listed with their reason; the full list is one click away. */
.im-win .m-diffs .im-r-k, .im-win .im-rows .im-r-k { display: inline-block; min-width: 56px; margin-right: 6px; color: var(--soft); font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.im-win .m-diffs li > div p { margin-top: 4px; overflow-wrap: anywhere; }
.im-win .m-diffs li > div > span:last-child { margin-top: 6px; color: var(--white); }
.im-all { border: 1px solid var(--hair); border-radius: 10px; background: var(--m-1); }
.im-all summary { cursor: pointer; padding: 10px 14px; font-weight: 500; min-height: 40px; display: flex; align-items: center; }
.im-all summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 10px; }
.im-rows { display: grid; }
.im-rows li { display: grid; gap: 4px; padding: 10px 14px; border-top: 1px solid var(--hair); font-size: 13.5px; min-width: 0; }
.im-rows li p { overflow-wrap: anywhere; }
.im-r-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
@container (min-width: 820px) {
  .im-rows li { grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: start; }
  .im-rows .im-r-k { display: none; }
  .im-r-id { flex-direction: column; align-items: flex-start; }
}
.im-win .m-diff-head .m-pill { margin-left: auto; }
.im-win .m-diff .m-dl:not(.is-add):not(.is-del) { color: var(--soft); }

/* The approval block at the foot of each window. */
.im-approve { display: grid; gap: 10px; border-top: 1px solid var(--hair); background: var(--m-1); }
.im-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.im-approve .m-btn { white-space: normal; text-align: left; }
.im-approve p b { font-size: 15.5px; }
.im-approve .m-actions { align-items: center; }
.im-pc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.im-then { color: var(--soft); font-size: 13px; padding: 0 6px; }
.im-note { color: var(--white); font-size: 12.5px; line-height: 1.4; }
.im-note:empty { display: none; }

/* The impact on open cases. */
.im-impact { display: grid; gap: 10px; }
.im-grp { margin-top: 4px; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.im-aff { display: grid; gap: 8px; }
.im-aff li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 6px 16px; padding: 10px 12px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; font-size: 13.5px; min-width: 0; }
.im-aff-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.im-aff-who b { font-weight: 600; }
.im-aff-who .m-sub { flex-basis: 100%; }
.im-aff-fx { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.im-aff-fx p { overflow-wrap: anywhere; }
.im-move { font: 500 13px/1.5 var(--mono); }
.im-move s { color: var(--soft); }
@container (max-width: 560px) {
  .im-aff li { grid-template-columns: minmax(0, 1fr); }
}