/* 人生劇本 (js/arcs.js, data/arcs.js): the 圖鑑 shelf, one fold per family. (The block on the death page is .hl-arc in ending.css.) Colours come from the theme tokens in app.css. */
:root { --arc: #1f4f8f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --arc: #a9c6f2; } }
:root[data-theme="dark"] { --arc: #a9c6f2; }

.col-arcs .arc-fam { border-top: 1px solid var(--rule); }
.col-arcs .arc-fam:last-of-type { border-bottom: 1px solid var(--rule); }
.col-arcs .arc-fam > summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.col-arcs .arc-fam > summary::-webkit-details-marker { display: none; }
.col-arcs .arc-fam > summary::before { content: '›'; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
.col-arcs .arc-fam[open] > summary::before { transform: rotate(90deg); }
.col-arcs .arc-fam > summary small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--arc); }
.col-arcs .arc-fam > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.col-arcs .eg-list { margin-bottom: 6px; }
.col-arcs .eg-list li:last-child { border-bottom: 0; }
.col-arcs .eg-list li.got b { color: var(--arc); }
.col-arcs .eg-list li.got span small { display: block; margin-top: 1px; font-size: 12px; color: var(--arc); }
@media (prefers-reduced-motion: reduce) { .col-arcs .arc-fam > summary::before { transition: none; } }