/* ext-case (13 Oct): the case coordinator's section in the conversation panel. app.css tokens
   only, so the light and dark themes both follow. Quiet by default: hairlines and small type;
   the one filled thing is the step that waits for the person reading. */
.case-panel { display: grid; gap: 12px; padding: 14px 16px 12px; }
.case-panel .side-note { margin: 0; overflow-wrap: anywhere; }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.case-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--rule2); border-radius: 999px; font: 600 10px/1.4 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.case-chip.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.case-chip.is-claim { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); border-style: dashed; }
.case-one { display: grid; gap: 12px; }
.case-one + .case-one { padding-top: 14px; border-top: 1px solid var(--rule); }
.case-project { margin: 0; font: 600 13px/1.3 var(--text); color: var(--ink); }

/* who is being waited on, since when */
.case-status { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.case-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--muted); }
.case-status.is-act .case-dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.case-status.is-ok .case-dot { background: var(--ok); }
.case-status.is-warn .case-dot { background: var(--warn); }
.case-status.is-act { border-color: var(--gold-line); }
.case-status-body { display: grid; gap: 2px; min-width: 0; }
.case-status-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 600 14px/1.35 var(--text); color: var(--ink); }
.case-fresh { font: 400 11.5px/1.4 var(--text); color: var(--muted); }

.case-part { display: grid; gap: 6px; min-width: 0; }
.case-part-title { margin: 0; display: flex; align-items: center; gap: 6px; font: 600 10.5px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case-count { padding: 1px 6px; border-radius: 999px; background: var(--bg2); color: var(--soft); font: 600 10px/1.4 var(--text); letter-spacing: 0; }

/* knows / still needed / scheduled: label, value, where it came from */
.case-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.case-row { display: grid; grid-template-columns: minmax(84px, 30%) 1fr; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.45; }
.case-row:first-child { border-top: 0; }
.case-row-label { grid-row: 1 / span 2; color: var(--soft); }
.case-row-value { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.case-row.is-missing .case-row-value { color: var(--soft); }
.case-row.is-claim .case-row-value { font-style: italic; }
.case-row-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.case-from { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--soft); }
.case-panel .icon { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.case-next { margin: 0; display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.case-next .icon { margin-top: 3px; color: var(--soft); }

/* the step that waits for a person */
.case-approval { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid var(--gold-line); border-radius: var(--r); background: color-mix(in srgb, var(--gold) 4%, var(--paper)); }
.case-approval.is-held { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 6%, var(--paper)); }
.case-held { margin: 0; display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.case-held .icon { margin-top: 3px; color: var(--warn); }
.case-held b { font-weight: 600; color: var(--warn); }
.case-approval-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--ink); }
.case-approval-head strong { font-weight: 600; }
.case-to { color: var(--soft); font-size: 12px; }
.case-text { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--rule); font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.case-edit { width: 100%; min-height: 92px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.5; }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.case-btn { height: 28px; padding: 0 10px; gap: 5px; border-radius: var(--r-sm); background: transparent; color: var(--soft); font: 600 12px/1 var(--text); box-shadow: none; }
.case-btn:hover { color: var(--ink); background: var(--accent2); border-color: var(--gold-line); transform: none; }
.case-btn.is-primary { background: var(--primary-bg); border-color: var(--primary-line); color: var(--primary-fg); }
.case-btn.is-primary:hover { background: var(--primary-bg-hover); color: var(--primary-fg); border-color: var(--primary-line); }
.case-btn.is-quiet { border-color: var(--rule2); }
.case-status .case-btn { align-self: center; }
.case-link { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--accent3); font: 600 12px/1.4 var(--text); text-decoration: underline; text-underline-offset: 2px; }
.case-link:hover { background: transparent; color: var(--gold); transform: none; }
.case-warn { color: var(--warn); }

/* approved: a text to copy, and the plain statement that nothing went out */
.case-sent-nothing { padding: 11px 12px; border: 1px dashed var(--rule2); border-radius: var(--r); }
.case-copy { display: grid; gap: 7px; }
.case-said { margin: 0; display: flex; align-items: flex-start; gap: 7px; font: 600 12.5px/1.45 var(--text); color: var(--ink); }
.case-said .icon { margin-top: 3px; color: var(--stop); }

.case-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.case-result { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.case-result-mark { display: inline-flex; margin-top: 3px; color: var(--muted); }
.case-result.is-verified .case-result-mark, .case-result.is-executed .case-result-mark { color: var(--ok); }
.case-result.is-failed .case-result-mark, .case-result.is-blocked .case-result-mark { color: var(--stop); }
.case-result.is-unknown .case-result-mark { color: var(--warn); }
.case-result-body { display: grid; gap: 4px; min-width: 0; }
.case-result-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; font-size: 12.5px; color: var(--soft); }
.case-result-head strong { font-weight: 600; color: var(--ink); }

.case-timeline { margin: 0; }
.case-timeline ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.case-timeline li { display: grid; grid-template-columns: 96px 78px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.case-kind { color: var(--muted); text-transform: capitalize; }
.case-line { color: var(--ink2); overflow-wrap: anywhere; min-width: 0; }
.case-foot { padding-top: 8px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--muted); }

@media (max-width: 760px) {
  .case-panel { padding: 12px; }
  .case-status { grid-template-columns: auto 1fr; }
  .case-status .case-btn { grid-column: 2; justify-self: start; }
  .case-row { grid-template-columns: 1fr; }
  .case-row-label { grid-row: auto; }
  .case-row-meta { grid-column: 1; }
  .case-timeline li { grid-template-columns: auto 1fr; }
  .case-line { grid-column: 1 / -1; }
}

/* 13 Oct: what Jigger understood, the reason for a rejection, "why this reply" */
.case-pick { height: 22px; max-width: 190px; padding: 0 4px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: transparent; color: var(--soft); font: 500 11px/1 var(--text); }
.case-reason { width: 100%; height: 30px; padding: 0 9px; border-radius: var(--r-sm); font-size: 13px; }
.case-why ol { max-height: 220px; }
.case-why li { grid-template-columns: 1fr; }
.case-media:empty { display: none; }

/* a person's own wording the check did not pass: what failed, under the box, and the one
   button that vouches for it. Warn tones only; the confirming button is never the filled one */
.case-unsupported { display: grid; gap: 6px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 7%, var(--paper)); }
.case-unsupported[hidden] { display: none; }
.case-unsupported-head { margin: 0; display: flex; align-items: flex-start; gap: 7px; font: 600 12.5px/1.45 var(--text); color: var(--ink); }
.case-unsupported-head .icon { margin-top: 3px; color: var(--warn); }
.case-unsupported ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.case-edit[aria-invalid="true"] { border-color: color-mix(in srgb, var(--warn) 65%, transparent); }
.case-btn.is-warn { height: auto; min-height: 28px; padding: 5px 10px; border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--ink); white-space: normal; text-align: left; }
.case-btn.is-warn:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: var(--warn); }