/* What a case looks like inside the panes. More room here than in the list and the controls.
   The order on the Case details pane is fixed by the contract (C30): who, topic, complaint, what is wanted. */

.case { max-width: 760px; margin: 0 auto; padding: 16px 32px 32px; }

/* ---- who it affects: the headline ---- */
.case-who h1 { font: 600 26px/1.2 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
/* The campaign, tactic and channel, the line item and the links to the order: one line that wraps. */
.case-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.case-line { font-size: 13px; color: var(--text-3); }
.case-line strong { font-weight: 600; color: var(--text-2); }
.case-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* ---- the topic, the chief complaint, the facts ---- */
.case-about { margin-top: 12px; }
.case-topic { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.case-complaint { margin-top: 4px; font-size: 17px; line-height: 1.5; color: var(--text); }
.case-facts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.case-facts li { display: flex; gap: 8px; }
.case-facts .icon { margin-top: 2.5px; }
.case-facts b { font-weight: 500; color: var(--text-2); }

/* ---- what is wanted: one block for each proposed response ---- */
.wanted { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.resp {
  padding: 16px 20px 18px;
  background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-l);
}
.resp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 22px; }
.resp-kind { font-size: 13px; font-weight: 500; color: var(--text-3); }
.resp-after { padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; line-height: 1.55; color: var(--text-3); white-space: nowrap; }
.resp-status { margin-left: auto; }
.resp-title { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.resp-target { margin-top: 3px; font-size: 13px; color: var(--text-3); overflow-wrap: anywhere; }
.resp-body { margin-top: 12px; }
.resp-text { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.resp.is-statement .resp-text, .resp.is-question .resp-text { margin-top: 6px; font-size: 15px; }
.resp.is-question .resp-hint { margin-top: 6px; }
.resp-quote, .resp-original {
  padding: 8px 12px; border-left: 3px solid var(--line-strong); border-radius: 2px var(--r-s) var(--r-s) 2px;
  background: var(--sunken); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.resp.is-statement .resp-text, .resp.is-question .resp-text, .resp-quote, .creative-text { max-width: 70ch; }
.resp-original { margin-top: 6px; }
/* the step in the investigator's own words, one step further, at the foot of the card */
.resp-written { margin-top: 12px; }
.resp-written .resp-original { font-size: 13.5px; color: var(--text-2); }
.resp-edit { font-size: 14px; }
/* what is in a box that can be edited, said just above it */
.resp-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }

/* the audiences of a line item: each one keep or remove */
.aud { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.aud-row { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 4px 5px 4px 12px; border-top: 1px solid var(--line); }
.aud-row:first-child { border-top: 0; }
.aud-row[data-action="remove"] { background: var(--danger-soft); }
.aud-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.aud-title { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.aud-row[data-action="keep"] .aud-title { font-weight: 400; color: var(--text-2); }
.aud-note, .aud-was { font-size: 13px; color: var(--text-3); }
.aud-row[data-action="remove"] .aud-note { color: var(--danger); }
.aud-was { font-style: italic; }
.aud-tag { flex: none; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.aud-row[data-action="remove"] .aud-tag { color: var(--danger); font-weight: 600; }
/* the rest, counted in one line, and the way between only what changes and the whole list, at its end */
.aud-rest { flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; min-height: 32px; padding-right: 12px; font-size: 13px; color: var(--text-3); }
.linkbtn.aud-more { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* A change to one setting, handed in as data: three short lines under the step's heading. */
.resp-change { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 2px 0 0; font-size: 14px; }
.resp-change dt { color: var(--text-3); }
.resp-change dd { margin: 0; overflow-wrap: anywhere; }
.resp-change dd.is-to { font-weight: 600; }
.aud-seg { flex: none; background: transparent; padding: 0; gap: 0; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.aud-seg button { height: 26px; padding: 0 10px; border-radius: 0; font-size: 13px; color: var(--text-3); background: var(--raised); }
.aud-seg button + button { border-left: 1px solid var(--line-strong); }
.aud-seg button:hover { color: var(--text); }
.aud-seg button[aria-pressed="true"] { box-shadow: none; }
.aud-seg .aud-keep[aria-pressed="true"] { background: var(--sunken); color: var(--text-2); }
.aud-seg .aud-remove[aria-pressed="true"] { font-weight: 600; }
.aud-seg .aud-remove[aria-pressed="true"] { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .aud-seg .aud-remove[aria-pressed="true"] { background: #b9483c; }

/* what happened to a response */
.resp-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.resp-line { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.resp-line > .icon { margin-top: 2.5px; }
.resp-line.is-accent > .icon { color: var(--accent-ink); }
.resp-line.is-ok { color: var(--ok); }
.resp-line.is-warn { color: var(--warn); }
.resp-line.is-danger { color: var(--danger); }
.resp-line-body { flex: 1; min-width: 0; }
.resp-line-body > .sim { margin-left: 8px; vertical-align: 1px; }
.resp-line-when { margin-left: 8px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.resp-line-more { display: block; margin-top: 1px; color: var(--text); overflow-wrap: anywhere; }
.resp-line .resp-quote { margin-top: 6px; color: var(--text); }
.linkbtn { display: inline; padding: 0; border: 0; background: none; color: var(--accent-ink); font-size: 13px; font-weight: 500; }
.linkbtn:hover { text-decoration: underline; }
.resp-line .linkbtn { margin-left: 8px; }

.prepared { padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--sunken); }
.prepared-head { font-size: 13px; }
.prepared-head strong { font-weight: 600; }
.prepared-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin-top: 6px; font-size: 13px; line-height: 1.45; }
.prepared-list dt { color: var(--text-3); }
.prepared-list dd { overflow-wrap: anywhere; }
.prepared .resp-hint { margin-top: 6px; }

/* the controls of a response */
.resp-actions, .resp-save, .resp-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.resp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resp-row .input { flex: 1 1 220px; width: auto; }
.resp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Approve and Decline: one question, two answers of the same weight. The change is stated once, above them.
   They share the row equally at every width: in a narrow pane Approve says only "Approve", so the two stay side by side. */
.resp-approving { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--sunken); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.resp-approving-k { color: var(--text-2); }
.resp-decide { display: flex; gap: 8px; }
.resp-decide > .btn { flex: 1 1 0; min-width: 0; min-height: 38px; font-size: 14.5px; white-space: nowrap; }
.resp-hint { font-size: 13px; color: var(--text-3); }
.resp-actions .error, .resp-save .error, .resp-form .error, .case-form .error { margin-top: 0; }

.simbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 7px 10px; border: 1px dashed var(--sim); border-radius: var(--r-m);
  font-size: 13px; color: var(--text-2);
}
.simbox .seg button { height: 24px; padding: 0 9px; font-size: 13px; }

.choices { display: flex; flex-direction: column; gap: 2px; }
.choice { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* ---- a case of more than one step: the steps on one rail, in their order ----
   The step to act on now is open beside its dot, which carries a ring; every other step is one line that opens in
   place. Each step draws its own stretch of the rail, so it runs unbroken past a card of any height. --dy is how far
   down the step its dot sits: the middle of a folded step's first line, or the middle of an open card's head. */
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; }
.plan-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.plan-sub { font-size: 13px; font-weight: 400; color: var(--text-3); }

.steps {
  --gut: 44px;          /* the rail's column */
  --rail-x: 14px;       /* the middle of the rail and of every dot */
  --cp: 16px;           /* an open card's own top padding (.resp) */
  --cx: 20px;           /* and its padding at the side */
}
.st { --d: 22px; --pt: 1px; --dy: calc(var(--pt) + 17px); position: relative; padding: var(--pt) 0 1px var(--gut); }
.st.is-open { --pt: 6px; --dy: calc(var(--pt) + 1px + var(--cp) + 11px); padding-bottom: 14px; }
.st.is-open:first-child { --pt: 0px; }
.st.is-open:last-child { padding-bottom: 0; }
.st.is-now { --d: 28px; }

.st::before {
  content: ""; position: absolute; left: calc(var(--rail-x) - 1px); top: 0; bottom: 0; width: 2px;
  border-radius: 1px; background: var(--line-strong);
}
.st:first-child::before { top: var(--dy); }
.st:last-child::before { bottom: auto; height: var(--dy); }

.st-dot {
  position: absolute; z-index: 1;
  left: calc(var(--rail-x) - var(--d) / 2); top: calc(var(--dy) - var(--d) / 2);
  width: var(--d); height: var(--d); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pane); color: var(--text-3);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
/* approved, or further along: the dot fills */
.st.is-filled .st-dot { background: var(--accent); color: var(--on-accent); box-shadow: none; }
/* finished: a check. Made with no read to confirm it, it is not in the colour of a confirmed thing (C11). */
.st.is-done .st-dot { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); }
.st.is-done[data-status="done_unread"] .st-dot { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
/* the step to act on now: a ring around its dot */
.st.is-now .st-dot { font-size: 13.5px; color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent-ink), 0 0 0 4px var(--pane), 0 0 0 6px var(--accent-soft); }
.st.is-now.is-filled .st-dot { color: var(--on-accent); box-shadow: 0 0 0 4px var(--pane), 0 0 0 6px var(--accent-soft); }

/* an open step: the card, tied to its dot by a short stroke */
.st > .resp { position: relative; }
.st > .resp::before {
  content: ""; position: absolute; top: calc(var(--cp) + 10px);
  left: calc(-1px - (var(--gut) - var(--rail-x) - var(--d) / 2)); width: calc(var(--gut) - var(--rail-x) - var(--d) / 2); height: 2px;
  background: var(--line-strong);
}
.st.is-now > .resp { border-color: var(--line-strong); }
/* the fold stays in the card's top corner, level with its head, however the head wraps in a narrow pane */
.st > .resp > .resp-head { padding-right: 24px; }
.st-fold { position: absolute; top: calc(var(--cp) - 2px); right: calc(var(--cx) - 6px); width: 26px; height: 26px; }
.st-fold .icon { transform: rotate(180deg); }

/* a folded step: one line, the whole of it a button that opens the step in place */
.st-row {
  display: flex; align-items: flex-start; gap: 10px;
  width: calc(100% + 8px); min-height: 34px; margin-left: -8px; padding: 7px 8px;
  border: 0; border-radius: var(--r-m); background: transparent; color: var(--text-2);
  font-size: 14px; line-height: 20px; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.st-row:hover { background: var(--hover); color: var(--text); }
.st-then { flex: none; font-size: 13px; font-weight: 600; color: var(--text-3); }
.st-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.st-sum { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.st-status { flex: none; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text-3); }
.st-status.is-accent { color: var(--accent-ink); }
.st-status.is-ok { color: var(--ok); }
.st-status.is-warn { color: var(--warn); }
.st-status.is-danger { color: var(--danger); }
.st-status .sim { margin-left: 8px; vertical-align: 1px; }
.st-chev { flex: none; display: inline-flex; align-items: center; height: 20px; color: var(--text-3); }
.st-row:hover .st-chev, .st-row:focus-visible .st-chev { color: var(--text); }

/* a manager's part, and a case sent back */
.callout { padding: 14px 20px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--raised); }
.callout.is-manager { border-color: var(--warn); background: var(--warn-soft); }
.callout-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.callout.is-manager .callout-title .icon { color: var(--warn); }
.callout-list { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
.callout-list li { position: relative; padding-left: 14px; }
.callout-list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.callout-text { margin-top: 4px; font-size: 14px; }
.callout .resp-row { margin-top: 12px; }
.callout .case-form { margin-top: 12px; }
.callout .error { margin-top: 8px; }

/* ---- the case's state and markers, and what happened last ---- */
.standing { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.standing-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.standing-who { font-size: 13px; color: var(--text-2); }
.marks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mark { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.mark > .icon { margin-top: 3px; }
.mark.is-danger { color: var(--danger); }
.mark.is-warn { color: var(--warn); }
.mark-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mark-meta { margin-left: 8px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.mark .linkbtn { margin-left: 8px; }
.standing-last { display: flex; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.standing-last > .icon { margin-top: 3px; }
.standing-last-text { color: var(--text-2); overflow-wrap: anywhere; }

/* ---- controls for the case as a whole ---- */
.case-toolbox { margin-top: 12px; }
.case-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }
.case-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--raised); }
.resp .case-form { margin-top: 12px; background: var(--pane); }
.form-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.form-fields .input, .form-fields .select { flex: 1 1 200px; width: auto; }
.form-fields .textarea { flex: 1 1 100%; }

/* ---- the way on ---- */
.next { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px 8px 20px; }
.next-said { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ok); }
.next-none { font-size: 13px; color: var(--text-3); }
.next-btn { flex: none; max-width: 100%; margin-left: auto; }
.next-btn .next-name { font-weight: 400; opacity: .85; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-btn.btn-ghost .next-label { color: var(--text); }

/* ---- Evidence and History ---- */
.ev { max-width: 760px; margin: 0 auto; padding: 20px 24px 32px; }
.ev-frozen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; font-size: 13px; color: var(--text-3); }
.ev-sec { padding: 16px 0; border-top: 1px solid var(--line); }
.ev-sec:first-of-type { border-top: 0; }
.ev > .ev-sec:first-child { padding-top: 4px; }
.ev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ev-head h3 { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ev-text { font-size: 14.5px; line-height: 1.5; }
.ev-when { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--text-3); }
.ev-quoted { margin: 12px 0 4px; font-size: 13px; color: var(--text-3); }
.ev h4 { margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }

.reasons { display: flex; flex-direction: column; margin: 0 -8px; }
.reason-head {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: var(--r-m); background: transparent; text-align: left;
}
button.reason-head:hover { background: var(--hover); }
.reason-n {
  flex: none; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--text-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.reason-plain { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; }
.reason-arrow { flex: none; margin-top: 4px; color: var(--text-3); }
.reason-more { margin: 0 8px 8px 40px; padding: 8px 12px; border-left: 3px solid var(--line-strong); border-radius: 2px var(--r-s) var(--r-s) 2px; background: var(--sunken); font-size: 13px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.reason-more p + p { margin-top: 6px; }
.ev .reason-more code, .ev .tl-source code, .ev .cap-list code { padding: 0; background: none; }
.reason-tag { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-3); }

.further-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: -4px; padding: 3px 6px 3px 2px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--accent-ink); font-size: 13px; font-weight: 500; text-align: left; }
.further-toggle:hover { background: var(--hover); }
.further-arrow { display: inline-flex; color: var(--text-3); }
.further-body { margin-top: 8px; }

.fixes { padding: 10px 14px; border: 1px solid var(--warn); border-radius: var(--r-m); background: var(--warn-soft); font-size: 13.5px; line-height: 1.5; }
.fixes-title { font-weight: 600; margin-bottom: 4px; }
.fixes li { position: relative; padding-left: 14px; }
.fixes li + li { margin-top: 4px; }
.fixes li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }

.cap-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 13.5px; line-height: 1.45; }
.cap-list dt { color: var(--text-3); }
.cap-list dd { overflow-wrap: anywhere; }
.cap-list.is-sources { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); font-size: 13px; }

.md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.md-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.md-table th, .md-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.md-table th { border-top: 0; background: var(--sunken); color: var(--text-2); font-weight: 600; font-size: 13px; white-space: nowrap; }

.md { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.md h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.md h3:first-child { margin-top: 4px; }
.md h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.md p, .md ul, .md ol, .md pre, .md blockquote, .md .md-table { margin: 8px 0; }
.md ul, .md ol { padding-left: 22px; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li + li { margin-top: 4px; }
.md code, .ev code, .resp code { font-family: var(--mono); font-size: max(13px, .9em); padding: 1px 4px; border-radius: 4px; background: var(--sunken); }
.md pre { padding: 10px 12px; border-radius: var(--r-m); background: var(--sunken); overflow-x: auto; font-size: 13px; line-height: 1.5; }
.md pre code { padding: 0; background: none; font-size: inherit; }
.md blockquote { padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--text-2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md .md-table td { min-width: 120px; }

/* the creative: the image at its own size, never stretched, with what was found on it beside it */
.creative { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; }
.creative-shot { flex: none; max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--sunken); line-height: 0; }
.creative-shot img { display: block; max-width: none; }
.creative-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 160px; min-height: 120px; padding: 16px 12px; color: var(--text-3); font-size: 13px; line-height: 1.4; text-align: center; }
.creative-facts { flex: 1 1 240px; min-width: 0; }
.creative-facts > h4:first-child { margin-top: 0; }
.creative-found { font-size: 15px; line-height: 1.45; }
.creative-found-lead { color: var(--text-2); }
.creative-about { margin-top: 4px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.creative-rows { border: 1px solid var(--line); border-radius: var(--r-m); }
.creative-rows li { padding: 7px 10px; border-top: 1px solid var(--line); }
.creative-rows li:first-child { border-top: 0; }
.creative-row-name { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.creative-row-ids { display: block; margin-top: 1px; font-size: 13px; line-height: 1.45; color: var(--text-3); overflow-wrap: anywhere; }
.creative-text { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); border-radius: 2px var(--r-s) var(--r-s) 2px; background: var(--sunken); font: 13px/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.creative-facts .further { margin-top: 10px; }

/* a timeline: when, then what */
.tl { display: flex; flex-direction: column; gap: 10px; }
.tl-item { position: relative; padding-left: 16px; }
.tl-item::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.tl-item::after { content: ""; position: absolute; left: 4.5px; top: 17px; bottom: -13px; width: 1px; background: var(--line); }
.tl-item:last-child::after { display: none; }
.tl-when { font-size: 13px; color: var(--text-3); }
.tl-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tl-text .sim { margin-left: 8px; vertical-align: 1px; }
.tl-source { margin-top: 2px; font-size: 13px; color: var(--text-3); overflow-wrap: anywhere; }
.tl-open { margin-left: 8px; }
.ev-sec > .ev-text + .tl { margin-top: 12px; }

/* ---- a narrow pane, whether it is one of three side by side or the whole of a phone ----
   Each pane is measured by itself (shell.css names the container), so its content fits its own width. */
@container pane (max-width: 560px) {
  .case { padding: 20px 20px 24px; }
  .ev { padding: 16px 20px 24px; }
  .resp { padding: 14px 16px 16px; }
  .resp-pair { grid-template-columns: 1fr; }
  .callout { padding: 12px 16px 14px; }
  .next { padding-left: 16px; }
  .next-said { display: none; }
  .steps { --cp: 14px; --cx: 16px; }
}
@container pane (max-width: 480px) {
  .case-who h1 { font-size: 22px; }
  .case-sub { font-size: 14px; }
  .case-complaint { font-size: 15.5px; }
  .resp-decide .opt { display: none; }
  /* the rail's column gives back some of its room */
  .steps { --gut: 34px; --rail-x: 11px; }
  .st { --d: 20px; }
  .st.is-now { --d: 24px; }
  .st.is-open { --pt: 4px; }
  .st-dot { font-size: 12px; }
  .st.is-now .st-dot { font-size: 13px; }
  .st-row { gap: 8px; }
}
@container pane (max-width: 400px) {
  .steps { --cp: 12px; --cx: 12px; }
  .case { padding: 16px 12px 20px; }
  .ev { padding: 14px 12px 20px; }
  .reasons { margin: 0 -6px; }
  .reason-head { gap: 8px; padding: 7px 6px; }
  .reason-n { min-width: 24px; }
  .resp { padding: 12px 12px 14px; }
  .aud-row { flex-wrap: wrap; gap: 4px 12px; padding: 6px 6px 6px 10px; }
  .aud-name { flex-basis: 100%; }
  .reason-more { margin-left: 8px; }
  .next-btn .next-name { max-width: 130px; }
}

/* ---- a short window: the bars and the gaps give a little, so the decision is on the first screen. The type stays its size. ---- */
@media (max-height: 820px) {
  .next { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
  .case { padding-top: 16px; }
}