/* testimony.css -- the Testimony card (testimony.js): written and spoken support / oppose /
   neutral side by side, each scaled to its OWN total so the two compare by share, never by
   sum. Colors are the site's (measure.css .an-pill, briefing_render.POS_COLOR). */
.tc {
  --sup: #276749; --sup-bg: #d6ecdf; --sup-line: #8cc5a2;
  --opp: #b42318; --opp-bg: #f8d6d2; --opp-line: #e59a92;
  --neu: #164667; --neu-bg: #dce5ef; --neu-line: #9fb5cc;
  container-type: inline-size;
  margin: 0 0 12px;
  scroll-margin-top: 110px;   /* clear the sticky top bar when linked to (#testimony) */
}
.tc-card { background: #fff; border: 1px solid var(--line, #e7e2d6); border-radius: 12px; overflow: hidden; }
.tc-card > summary { list-style: none; cursor: pointer; display: flex; align-items: stretch; }
.tc-card > summary::-webkit-details-marker { display: none; }
.tc-card > summary:focus-visible { outline: 2px solid var(--brand, #1f5f8b); outline-offset: -2px; }
.tc-label { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand-dark, #164667); border-right: 1px solid var(--line, #e7e2d6); }
.tc-label .chev { transition: transform .15s; color: var(--ink-soft, #55606f); font-size: .8rem; }
.tc-card[open] .tc-label .chev { transform: rotate(90deg); }
.tc-card > summary:hover .tc-label { background: var(--marble, #f6f4ef); }
.tc-sides { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; }
.tc-side + .tc-side { border-left: 1px solid var(--line, #e7e2d6); }

/* one side: the counts, and under them a slim bar of the same shares made of separate rounded,
   outlined blocks -- so no block edge cuts through a number */
.tc-side { min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 5px; padding: 7px 12px 8px; }
.tc-side .txt { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden;
  font-size: .82rem; line-height: 1.2; }
.tc-side .kind { font-weight: 700; color: var(--ink, #1b2330); }
.tc-side .ct { font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-side .ct .lab { font-weight: 500; }
.tc .ct.s { color: var(--sup); } .tc .ct.o { color: var(--opp); } .tc .ct.n { color: var(--neu); }
.tc-side .strip { display: flex; gap: 3px; height: 10px; }
.tc-side .seg { border-radius: 4px; min-width: 4px; }
.tc .seg.s { background: var(--sup-bg); box-shadow: inset 0 0 0 1px var(--sup-line); }
.tc .seg.o { background: var(--opp-bg); box-shadow: inset 0 0 0 1px var(--opp-line); }
.tc .seg.n { background: var(--neu-bg); box-shadow: inset 0 0 0 1px var(--neu-line); }
/* legislators: the leading part of a spoken section, hatched in that section's own color. The
   section keeps its size; --hl is the legislators' share OF THAT SECTION. */
.tc .seg.s { --hc: var(--sup-line); } .tc .seg.o { --hc: var(--opp-line); } .tc .seg.n { --hc: var(--neu-line); }
.tc .seg.hatch { background-image: repeating-linear-gradient(135deg, var(--hc) 0 2px, transparent 2px 6px);
  background-size: var(--hl) 100%; background-repeat: no-repeat; }
.tc .hatch-key { display: inline-block; width: 1.6em; height: .9em; vertical-align: -.1em; margin-right: 5px;
  border-radius: 3px; box-shadow: inset 0 0 0 1px #9aa3ad;
  background: #eef0f2 repeating-linear-gradient(135deg, #9aa3ad 0 2px, transparent 2px 6px); }
.tc-side.empty { background: repeating-linear-gradient(135deg, #fafaf7 0 6px, #f2f0ea 6px 12px); }
.tc-side.empty .txt { color: var(--ink-soft, #55606f); font-style: italic; font-size: .8rem; }

/* expanded */
.tc-body { border-top: 1px solid var(--line, #e7e2d6); padding: 14px 14px 12px; }
.tc-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.tc-row .who { font-size: .82rem; font-weight: 700; }
.tc-row .who small { display: block; font-weight: 500; color: var(--ink-soft, #55606f); font-size: .74rem; }
.tc-bar { display: flex; gap: 3px; height: 34px; padding: 3px; border-radius: 9px;
  background: #f7f5f0; border: 1px solid var(--line, #e7e2d6); }
.tc-bar .seg { display: flex; align-items: center; justify-content: center; min-width: 4px; border-radius: 6px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
  font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.tc-bar .seg.s { color: var(--sup); } .tc-bar .seg.o { color: var(--opp); } .tc-bar .seg.n { color: var(--neu); }
.tc-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .84rem; }
.tc-table th, .tc-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #f0ede5;
  font-variant-numeric: tabular-nums; }
.tc-table th:first-child, .tc-table td:first-child { text-align: left; }
.tc-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft, #55606f); }
.tc-table thead th.tc-key { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .74rem; }
.tc .dot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: 6px; vertical-align: .05em; }
/* The text greens/navies are too dark to tell apart in a small dot (support read as blue), so
   the dots use brighter versions of the same hues. */
.tc .dot.s { background: #2f9e5b; } .tc .dot.o { background: #d0372b; } .tc .dot.n { background: #3f72a8; }
.tc .pct { color: var(--ink-soft, #55606f); font-size: .78rem; margin-left: 4px; }
.tc-note { margin: 10px 0 0; font-size: .76rem; color: var(--ink-soft, #55606f); line-height: 1.45; }
.tc-note a { color: var(--brand, #1f5f8b); }

/* narrow: the two sides stack under the label (measured: side by side cuts the counts off
   below ~680px of card) */
@container (max-width: 680px) {
  .tc-card > summary { flex-direction: column; }
  .tc-label { border-right: 0; border-bottom: 1px solid var(--line, #e7e2d6); padding: 6px 12px; }
  .tc-sides { grid-template-columns: 1fr; }
  .tc-side + .tc-side { border-left: 0; border-top: 1px solid var(--line, #e7e2d6); }
  .tc-row { grid-template-columns: 1fr; gap: 4px; }
}

/* inside a bill card on the Misc. Filters page */
.t-bill-card .tc { margin: 8px 0 2px; }