/* MC2 (10-22): the timeline lives in 章節's panel now, its rows are the chapters. MC1 (Hugo 10-22, after the company meeting map): decisions, open questions, the timeline and the viewpoints sit in one
   Panel each (web/ui components/ui/Panel), titled by SectionHead with a how to read line; chapters and quotes stay prose.
   The timeline bar shows only who led each chapter; a row per chapter under it lights up with its bar */
.sec:hover .mu-sechead .cp { opacity: 1; }
.mu-panel .drow + .drow, .mu-panel .q + .q { margin-top: 16px; }
.sec .q > .sides { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 32px; }
/* the panel sits out in the margin by its own padding, so what is inside starts on the heading's and the prose's edge */
@media (min-width: 900px) { .sec > .mu-panel { margin-inline: calc(-1 * var(--sp-24)); } }
@media (max-width: 899px) { .sec > .mu-panel { padding: var(--sp-16); } }
.sec .q > .sides .pos { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-15); line-height: 24px; }
.sec .q > .sides .pos .who { line-height: 20px; }
.tl2 { padding-top: 0; }
.tl2 .bars { height: 20px; }
.tl2 .seg { border: 0; padding: 0; opacity: 1; transition: opacity var(--dur-150) var(--ease); }
.tl2 .bars:has(.seg[data-on]) .seg:not([data-on]) { opacity: .25; }
.tl2 .seg[data-on] { opacity: 1; }
.tl2 .seg:focus-visible { outline: none; box-shadow: var(--ring); }
.tl2 .ticks { margin-top: 6px; }
.tl2 .ticks span { transform: none; }
.tl2 .legend { margin-top: 4px; color: var(--text-2); }
.tl2 .legend i { width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; opacity: .7; }
.tl2 .tl-rows { margin-top: 16px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--line); }
.tl2 .tl-row { position: relative; display: grid; grid-template-columns: 56px 80px minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-sm); transition: background var(--dur-120) var(--ease); }
.tl2 .tl-row + .tl-row::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--line); }
.tl2 .tl-row[data-on] { background: var(--fill-strong); }
.tl2 .tl-row[data-on]::before, .tl2 .tl-row[data-on] + .tl-row::before { display: none; }
.tl2 .tl-row .tm { color: var(--text-3); font-size: var(--fs-13); line-height: 24px; font-variant-numeric: tabular-nums; }
.tl2 .tl-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--fs-13); line-height: 24px; font-weight: 600; color: var(--text-2); }
/* MC2: the chapter itself is the row, so title, result and the folded text carry the chapter's own edit and copy */
.tl2 .tl-row .ch-b { min-width: 0; }
.tl2 .tl-row h3, .tl2 .tl-row .res { font-size: var(--fs-15); line-height: 24px; margin: 0; }
.tl2 .tl-row .res { color: var(--text-2); }
.tl2 .tl-row h3, .tl2 .tl-row .res, .tl2 .tl-row .sum { text-wrap: pretty; }
.tl2 .tl-row .sum { margin: 8px 0 4px; font-size: var(--fs-15); line-height: 26px; color: var(--text-2); max-width: 68ch; }
.tl2 .tl-row .tm .jump { cursor: pointer; }
.tl2 .tl-row .tm .jump:hover { color: var(--accent); }
.tl2 .ch-b > .cp { right: 0; }
.tl2 .tl-row:hover .ch-b > .cp, .tl2 .tl-row:focus-within .ch-b > .cp { opacity: 1; }
.tl2 .ch-more { border: 0; background: none; padding: 0 2px; font: inherit; color: var(--text-2); cursor: pointer; border-radius: var(--r-sm); }
.tl2 .ch-more::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-150) var(--ease); }
.tl2 .ch-more[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.tl2 .ch-more:hover { color: var(--text); }
.tl2 .ch-more:focus-visible { outline: none; box-shadow: var(--ring); }
.tl2 .tl-row .marks { display: flex; gap: 8px; font-size: var(--fs-12); line-height: 24px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tl2 .mk-n { display: inline-flex; align-items: center; gap: 4px; }
.tl2 .mk-n::before { content: ""; width: 7px; height: 7px; }
.tl2 .mk-n.dec::before { background: var(--text); transform: rotate(45deg); }
.tl2 .mk-n.q::before { border-radius: 50%; background: var(--question); }
@media (prefers-reduced-motion: reduce) { .tl2 .seg, .tl2 .tl-row, .tl2 .ch-more::after { transition: none; } }
@media (max-width: 600px) {
  .tl2 .tl-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "tm who marks" "tm what what"; column-gap: 12px; }
  .tl2 .tl-row .tm { grid-area: tm; } .tl2 .tl-row .who { grid-area: who; } .tl2 .tl-row .ch-b { grid-area: what; } .tl2 .tl-row .marks { grid-area: marks; }
  .sec .q > .sides { grid-column: 1 / -1; }
}
/* XI3: the head count field in 重新辨識說話人 */
.rd-n { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: var(--fs-15); }
.rd-n input { width: 88px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: var(--fill); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.rd-n input:focus-visible { outline: none; box-shadow: var(--ring); }