/* GENERATED COPY — source of truth: domains/civi/shared/how.css. Re-sync: python scripts/sync_shared_agent.py */
/* How it works — the components of the page (path of a case, states, roles,
   who-can-do-what, contents box, problem types, example history). One source
   for both copies of the page: the app's /how-it-works and the landing's
   generated /{lang}/how-it-works/ (D53). The generic .doc rules (headings,
   tables, notes) stay in each site's own stylesheet — they also style
   privacy and terms. Load it AFTER the site's stylesheet (it overrides .doc ol and .doc h3).
   Edit here, then: python scripts/sync_shared_agent.py */
.how-path { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.doc .how-path { padding: 0; }
.how-path li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); position: relative; }
.how-path li + li::before { content: "↓"; position: absolute; top: -17px; left: 22px; color: var(--ink-2); font-size: 14px; }
.how-path .pill { justify-self: start; max-width: 100%; white-space: normal; }
.doc table.how-states td:first-child { white-space: nowrap; }
.how-lock { --pc: var(--s-declined); }
.how-roles, .how-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.how-role, .how-cat, .how-history, .how-toc { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; }
.how-role h3, .how-cat h3, .how-history h3 { font-family: var(--display); font-size: 18px; margin: 0 0 4px; }
.how-role p, .how-cat p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.how-cat p { color: var(--ink-2); }
.how-matrix-wrap, [data-matrix] { overflow-x: auto; }
table.how-matrix { font-size: 14px; }
.how-matrix { min-width: 560px; } /* lower than each site's phone rule, which lifts it */
.how-matrix thead th { font-size: 12.5px; color: var(--ink-2); }
.how-matrix th[scope="row"] { font-weight: 600; }
.how-matrix td.yes { color: var(--s-fixed); font-weight: 700; }
.how-matrix td.no { color: var(--ink-2); }
.how-matrix td.cond { font-size: 13px; }
.how-toc { margin: 16px 0 6px; }
.how-toc-label { margin: 0 0 6px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.how-toc ol { margin: 0; padding-left: 22px; columns: 2 240px; column-gap: 24px; font-size: 15px; }
.how-toc li { break-inside: avoid; padding: 2px 0; }
.how-history { margin: 14px 0; }
.how-history h3 { margin-bottom: 8px; }
.how-history ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14.5px; }
.how-history time { display: inline-block; min-width: 56px; font-weight: 700; }
@media (max-width: 560px) { .how-path li { grid-template-columns: 1fr; gap: 6px; } }
/* On phones each site stacks its tables at its own width; the who-can-do-what
   cells then name their role — those rules sit with the stacking in each site. */