/* Styles for the exception screen (step 6). Tokens only, no raw colors. Reuses the m- kit: exception card, AI proposal, approval envelope. */

.ex-sec { margin-top: 30px; }
.ex-h { font: 600 clamp(17px, 1rem + 0.4vw, 20px)/1.3 var(--sans); letter-spacing: -0.01em; margin: 0 0 6px; }
.ex-sub { color: var(--soft); max-width: 52em; margin: 0 0 14px; }
.ex-menu-foot { margin: 12px 0 0; }
#ex-done-t:focus { outline: none; }

/* The event card. A new event arrives with a short fade; the shell drops animation in fast mode and under reduced motion. */
.ex-card.is-arriving { animation: ex-arrive 0.5s ease-out; }
@keyframes ex-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ex-card .m-exc-top .ex-pill { margin-left: auto; }
.ex-card .m-exc-top .m-label { margin-right: 0; }
.ex-card .m-sub { overflow-wrap: anywhere; }
.ex-quote { padding: 8px 0 8px 12px; border-left: 3px solid var(--soft); font-weight: 500; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ex-quote::before { content: "\201C"; }
.ex-quote::after { content: "\201D"; }
.ex-why, .ex-clauses { display: grid; gap: 6px; }
.ex-cl-list { display: grid; gap: 8px; }
.ex-card .clause { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 10px 12px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.ex-card .clause .m-clause-id { margin-top: 1px; }
.ex-card .clause .ex-cl-t { color: var(--soft); min-width: 0; overflow-wrap: anywhere; }
.ex-card .clause .ex-cl-t b { color: var(--white); font-weight: 600; }
@container (max-width: 520px) {
  .ex-card .clause { grid-template-columns: minmax(0, 1fr); }
  .ex-card .clause .m-clause-id { justify-self: start; }
}

/* The approved menu. */
.ex-menu { display: grid; gap: 8px; }
.ex-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 12px; min-width: 0; }
.ex-opt.is-pick { border: 1px dashed var(--cyan-line); }
.ex-opt-t { display: grid; gap: 3px; min-width: 0; }
.ex-opt-t b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.ex-opt-r { color: var(--soft); font-size: 12.5px; }
.ex-opt-a { display: flex; justify-content: flex-end; }
.ex-opt .ex-note { grid-column: 1 / -1; }
.ex-opt.is-off { grid-template-columns: minmax(0, 1fr); padding: 0; background: transparent; border: 0; }
.ex-opt.is-off .m-btn { width: 100%; justify-content: flex-start; text-align: left; }
.ex-note { color: var(--white); font-size: 12.5px; line-height: 1.4; }
.ex-note:empty { display: none; }
.ex-opt .m-btn, .ex-approve .m-btn { white-space: normal; text-align: left; }
@container (max-width: 560px) {
  .ex-opt { grid-template-columns: minmax(0, 1fr); }
  .ex-opt-a { justify-content: flex-start; }
}

/* The proposal and the comparison. */
.ex-ask { gap: 12px; }
.ex-why-ai { overflow-wrap: anywhere; }
.ex-ask .m-meta dd { overflow-wrap: anywhere; }
.ex-cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ex-cmp-h { margin-top: 2px; }
.ex-cmp-t { font-weight: 600; margin-bottom: 8px; }
.ex-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 0; margin: 0; font-size: 13.5px; }
.ex-kv dt { color: var(--soft); min-width: 0; overflow-wrap: anywhere; }
.ex-kv dd { margin: 0; padding-left: 14px; font: 500 13px/1.5 var(--mono); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ex-cmp .m-card:first-child .ex-kv dt:last-of-type, .ex-cmp .m-card:first-child .ex-kv dd:last-of-type { padding-top: 6px; border-top: 1px solid var(--hair); }
@container (min-width: 760px) {
  .ex-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ex-gap { font-size: 15px; }

/* The message and its approval: the letter beside the approval card on a wide screen, stacked on a narrow one. */
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container (min-width: 960px) {
  .ex-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.ex-side { display: grid; gap: 12px; min-width: 0; }
.ex-approve, .ex-done { display: grid; gap: 10px; }
.ex-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ex-done p b { font-size: 15.5px; }
.ex-env .m-env-head { flex-wrap: wrap; }
.ex-paper { display: grid; gap: 10px; }
.ex-paper p { overflow-wrap: anywhere; }
/* A §4 pill with its plain-text remainder beside it, kept together as one item. */
.ex-pc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }