:root {
  --paper: #f3efe6;
  --ink: #1c1915;
  --copper: #8c4a2f;
  --slate: #3d4c5c;
  --line: #d9d1c3;
  --mute: #6e675d;
  --hide: #f7f4ee;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 15px/1.4 "Iowan Old Style", Palatino, Georgia, serif; }
button, input, select { font: 14px/1.2 "Avenir Next", "Segoe UI", sans-serif; color: var(--ink); }
button { min-height: 44px; }
#app { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
header {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #efeae0;
}
header h1 { font-size: 22px; font-weight: 500; margin: 0 8px 0 0; letter-spacing: -0.02em; }
header .meta { font-family: "Avenir Next", sans-serif; font-size: 12px; color: var(--mute); }
header .spacer { flex: 1; }
.views button, #record, #cross, #add-axis {
  background: transparent; border: 1px solid var(--ink); padding: 6px 10px; cursor: pointer;
}
.views button[aria-pressed="true"], #record[aria-pressed="true"], #cross[aria-pressed="true"] {
  background: var(--ink); color: var(--paper);
}
main { display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
#picture { min-width: 0; padding: 12px 16px 8px; overflow: auto; }
#picture h2 { font-weight: 500; font-size: 16px; margin: 0 0 4px; }
.banner { font-family: "Avenir Next", sans-serif; font-size: 12px; color: var(--copper); margin: 0 0 10px; }
#stage { min-height: 420px; }
svg.sankey { width: 100%; height: 460px; }
svg.sankey text { font-family: "Avenir Next", sans-serif; font-size: 12px; fill: var(--ink); }
svg.sankey .node { cursor: pointer; }
svg.sankey .node rect { fill: #efe6d8; stroke: var(--ink); }
svg.sankey .node.pinned rect { fill: #e4cbb8; }
svg.sankey path.link { fill: none; stroke: var(--copper); opacity: 0.55; cursor: pointer; }
svg.sankey path.link.dim { opacity: 0.08; }
svg.sankey path.link.pilot { stroke: var(--slate); stroke-dasharray: 4 3; }
.crumb button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.people, .codes { display: flex; flex-direction: column; gap: 6px; }
.people button, .codes button, .bills button {
  text-align: left; background: #efeae0; border: 1px solid var(--line); padding: 8px 10px; cursor: pointer;
}
.people button[aria-pressed="true"], .codes button[aria-pressed="true"], .bills button[aria-pressed="true"] {
  border-color: var(--ink);
}
#column {
  border-left: 1px solid var(--line); overflow: auto; padding: 10px 12px 20px;
  font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 13px;
}
#column h3 { font-family: "Iowan Old Style", Georgia, serif; font-size: 15px; font-weight: 500; margin: 12px 0 4px; }
#column section { border-top: 1px solid var(--line); padding-top: 6px; }
#column .absent { color: var(--mute); }
#column .inference { color: var(--slate); background: #e7edf2; padding: 8px; }
#column .inference strong { font-weight: 600; }
body.record-only .private { display: none; }
footer {
  border-top: 1px solid var(--line); padding: 8px 14px; display: flex; gap: 16px; align-items: baseline;
  font-family: "Avenir Next", sans-serif; font-size: 12px;
}
footer a { color: var(--copper); }
.filters { display: flex; gap: 6px; margin-bottom: 8px; }
.filters button { background: transparent; border: 1px solid var(--line); padding: 4px 8px; cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: var(--ink); }
.search { display: flex; gap: 6px; margin-top: 8px; }
.search input { flex: 1; background: transparent; border: 1px solid var(--line); padding: 6px; }
.nums { font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  main { grid-template-columns: 1fr; }
  #column { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  svg.sankey { height: 70vw; min-height: 320px; }
}
@media (max-width: 700px) {
  header { padding: 10px 12px calc(8px + env(safe-area-inset-top)); }
  header h1 { font-size: 20px; }
  #picture { padding: 10px 12px; }
  footer { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .views, .filters { width: 100%; }
}