/* QuestionTheBill.com — member timeline (js/timeline.js). Loaded after css/site.css.
   One time axis, three lanes. Money bars use the placeholder violet (the figures are a draft method), never amber.
   Trades and votes are ink only: the shape says the type, there is no red or green. */
.tl { margin-top: 8px; }
.tl-frame { margin: 0 0 20px; max-width: 60em; }
.tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; }
.tl-bar .picks { margin: 0; }
.tl-span { margin: 0; }
.tl-panel { padding: clamp(12px, 2vw, 24px); }

/* ---- the graphic ---- */
.tl-chart { position: relative; border-radius: 3px; }
.tl-chart:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tl-scroll.is-wide { border-right: 2px dashed var(--rule); border-left: 2px dashed var(--rule); padding-bottom: 6px; }
.tl-canvas { position: relative; min-width: 100%; cursor: crosshair; }
.tl-svg { display: block; max-width: none; position: relative; }
.tl-cross { position: absolute; top: 0; bottom: 30px; background: var(--accent-soft); box-shadow: inset 1px 0 0 var(--amber-3), inset -1px 0 0 var(--amber-3); pointer-events: none; z-index: 0; }
.tl-lh { position: sticky; left: 0; width: var(--tl-vw, 100%); padding: 9px 0 5px; border-top: 3px solid var(--ink); z-index: 2; }
.tl-lh .k { margin: 0; color: var(--ink); }
.tl-lh .k span { display: inline-block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 8px; }
.tl-lane { position: relative; z-index: 1; }
.tl-pin { position: sticky; left: 0; width: var(--tl-vw, 100%); height: 0; z-index: 3; pointer-events: none; }
.tl-yax span { position: absolute; left: 0; font: 500 10.5px/16px var(--mono); color: var(--muted); background: rgba(255, 255, 255, .88); padding: 0 5px 0 0; }
.tl-lnote { position: sticky; left: 0; width: var(--tl-vw, 100%); padding: 4px 10px 6px 64px; }
.tl-lnote p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); max-width: 46em; }
.tl-yr { stroke: var(--rule); stroke-width: 1; }
.tl-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.tl-base { stroke: var(--ink); stroke-width: 1.5; }
.tl-tick { stroke: var(--ink); stroke-width: 1; }
.tl-ax { font: 500 11px/1 var(--mono); fill: var(--muted); }
.tl-ax.yr { font-weight: 600; fill: var(--ink); }
.tl-ndl { fill: var(--rule); }
.tl-pac { fill: var(--ph); }
.tl-pbg { fill: var(--ph-bg2); } .tl-pfg { fill: var(--ph-rule); }
.tl-ind { stroke: var(--ph-rule); stroke-width: .75; }
.tl-of, .tl-oa { stroke: var(--ink); stroke-width: 2; }
.tl-oa { stroke-dasharray: 2 2; }

/* trade markers: filled circle = purchase, open square = sale, half-filled square = partial sale, open diamond = exchange */
.tl-m { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.tl-m[data-t="p"] { fill: var(--ink); fill-opacity: .9; stroke: #fff; stroke-width: 1; }
.tl-half { fill: var(--ink); pointer-events: none; }
.tl-svg.trades g { cursor: pointer; }
.tl-svg.trades g.is-sel .tl-m { stroke: var(--amber-2); stroke-width: 4; paint-order: stroke; fill-opacity: 1; }

/* votes: the site's own vote badge, set on the day of the roll call */
.tl-v { position: absolute; height: 44px; display: flex; align-items: center; white-space: nowrap; z-index: 1; }
.tl-v i { flex: none; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); }
.tl-vin { margin-left: 6px; padding: 0 3px; font-size: 14px; background: rgba(255, 255, 255, .9); border-radius: 2px; }
.tl-v a { display: inline-block; padding: 12px 0; margin-right: 4px; color: var(--ink); font-weight: 600; }
.tl-v .vote { font-size: 11px; padding: 5px 7px 4px; }
.tl-v.r { transform: translateX(-100%); flex-direction: row-reverse; }
.tl-v.r i { margin: 0 -5px 0 0; }
.tl-v.r .tl-vin { margin: 0 6px 0 0; }
.tl-v.is-nio i { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule); }
.tl-v.is-nio a { color: var(--muted); font-weight: 400; }

.tl-help { margin: 10px 0 12px; }
.tl-swipe { display: none; }
.tl.is-scroll .tl-swipe { display: inline; }

/* ---- key ---- */
.tl-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 8px; font-size: 13.5px; }
.tl-key li { display: flex; align-items: center; gap: 6px; }
.tl-key .sz { gap: 4px; flex-wrap: wrap; color: var(--muted); }
.tl-key .sz span { margin-right: 8px; white-space: nowrap; font: 500 11.5px/1 var(--mono); }
.tl-key .sw { display: inline-block; width: 14px; height: 14px; flex: none; }
.tl-key .sw.pac { background: var(--ph); }
.tl-key .sw.ind { background: repeating-linear-gradient(135deg, var(--ph-rule) 0 2px, var(--ph-bg2) 2px 4px); outline: 1px solid var(--ph-rule); outline-offset: -1px; }
.tl-key .sw.of { width: 0; border-left: 2px solid var(--ink); margin: 0 6px; }
.tl-key .sw.oa { width: 0; border-left: 2px dashed var(--ink); margin: 0 6px; }
.tl-glyph { flex: none; max-width: none; vertical-align: middle; overflow: visible; }
.tl-legend .note { margin: 0; max-width: 62em; }

/* ---- the month being read ---- */
.tl-read { margin-top: 16px; padding-top: 14px; border-top: 3px solid var(--ink); }
.tl-month { font: 900 28px/1 var(--serif); font-stretch: 66%; text-transform: uppercase; margin: 0 0 12px; }
.tl-read dl { display: grid; gap: 10px; margin: 0; }
.tl-read dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.tl-read dt, .tl-dl dt, .tl-figs dt { font: 600 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tl-read dd, .tl-dl dd, .tl-figs dd { margin: 0; }
.tl-read dd { font-size: 15px; }
.tl-read dd a { font-weight: 600; }
.tl-read .vote { font-size: 11px; padding: 5px 7px 4px; }
.tl-sep { color: var(--muted); }
.tl-tlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; max-height: 242px; overflow-y: auto; }
.tl-tbtn { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 6px 10px; text-align: left; font: 400 14.5px/1.3 var(--sans); color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 3px; cursor: pointer; }
.tl-tbtn:hover { background: var(--accent-soft); }
.tl-tbtn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tl-tbtn b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; margin-right: 4px; }

/* ---- one selected trade ---- */
.tl-detail { margin-top: 16px; padding: 14px 18px 16px; background: var(--card); border: 2px solid var(--ink); border-left-width: 12px; border-radius: 4px; }
.tl-detail h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; outline: 0; }
.tl-tk { display: inline-block; font: 600 11.5px/1 var(--mono); letter-spacing: .04em; padding: 3px 5px 2px; border: 1.5px solid var(--ink); border-radius: 2px; vertical-align: 2px; text-transform: none; font-stretch: 100%; }
.tl-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; margin: 0; }
.tl-dl dd { font-size: 15.5px; }
.tl-dl dd b { font-family: var(--mono); font-size: 15px; }
.tl-detail .note { margin: 12px 0 0; }
.tl-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tl-nav .btn, .tl-all .btn, .tl-more summary .btn { min-height: 44px; font-size: 16px; padding: 0 16px; }
.tl-nav .btn[disabled] { opacity: .45; cursor: default; background: var(--card); }

/* ---- figures ---- */
.tl-sums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; }
.tl-sums .panel { padding: clamp(14px, 2vw, 24px); }
.tl-sums .note { margin: 8px 0 0; }
.tl-figs { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0; }
.tl-figs dd { font: 900 clamp(28px, 3.4vw, 38px)/1.1 var(--serif); font-stretch: 66%; }
.tl-figs dd .ph-tag, .tl-figs dd button.src { vertical-align: middle; letter-spacing: 0; font-stretch: 100%; }
.tl-figs .tl-when { font: 400 13px/1.4 var(--sans); font-stretch: 100%; color: var(--muted); margin-top: 2px; }
.tl-count { margin: 0; font-size: 17px; }
.tl-srclink { font: 500 10.5px/1 var(--mono); margin-left: 6px; white-space: nowrap; }

/* ---- tables ---- */
.tl-h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 28px 0 10px; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--card); border: 2px solid var(--ink); }
.tl-table th, .tl-table td { padding: 8px 12px; text-align: left; vertical-align: middle; border-top: 1px solid var(--rule); font-weight: 400; }
.tl-table thead th { font: 600 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--wash); border-top: 0; border-bottom: 2px solid var(--ink); }
.tl-table tbody th { font-weight: 600; }
.tl-table .amt { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.tl-table tr.is-sel { background: var(--accent-soft); }
.tl-table .vote { font-size: 11px; padding: 5px 7px 4px; }
.tl-ty { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-all { margin: 10px 0 0; }
.tl-more { margin-top: 24px; }
.tl-more summary { display: inline-block; list-style: none; cursor: pointer; }
.tl-more summary::-webkit-details-marker { display: none; }
.tl-more summary .btn::after { content: "+"; font-family: var(--mono); }
.tl-more[open] summary .btn::after { content: "\2212"; }

@media (max-width: 760px) {
  .tl-sums { grid-template-columns: minmax(0, 1fr); }
  .tl-read dl > div { grid-template-columns: minmax(0, 1fr); }
  .tl-lh .k span { display: block; margin: 2px 0 0; }
}
@media (max-width: 640px) {
  .tl-bar .pick { min-height: 44px; font-size: 14.5px; padding: 0 11px; }
  .tl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tl-table, .tl-table tbody { display: block; }
  .tl-table tr { display: block; padding: 8px 12px; border-top: 2px solid var(--ink); }
  .tl-table tr:first-child { border-top: 0; }
  .tl-table th, .tl-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: 0; text-align: right; }
  .tl-table [data-l]::before { content: attr(data-l); flex: none; max-width: 45%; text-align: left; font: 600 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .tl-table .amt { white-space: normal; }
}