/* Records web pages (tools/records_web.py, assets/records-web.js). Loaded only on those pages.
   Line colors and chips are in site.css (also used by the ties boxes and File previews). */
.rw-hero { padding-bottom: 28px; }
.rw-hero .wrap { max-width: 1520px; }
.rw-title { font-size: clamp(36px, 5vw, 64px); }
.rw-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rw-wrap { max-width: 1520px; display: flex; flex-direction: column; gap: 48px; padding-bottom: 56px; }

.rw-desk { display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.rw-controls, .rw-graph, .rw-card {
  background: var(--glass, var(--panel)); border: 1px solid var(--glass-line, var(--line)); border-radius: 16px;
  box-shadow: var(--glass-shadow, none); min-width: 0;
}
.rw-lbl { display: block; margin: 0 0 10px; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.rw-controls { padding: 18px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 12px; }
.rw-sel { width: 100%; min-height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--rw-node); color: var(--ink); padding: 0 10px; font: inherit; font-weight: 600; }
.rw-back { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rw-types { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-type { display: grid; grid-template-columns: 18px minmax(0, 1fr) 24px 22px; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.rw-type:hover { background: var(--chip); }
.rw-type input { position: absolute; opacity: 0; pointer-events: none; }
.rw-type .box { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--c); display: grid; place-items: center; }
.rw-type input:checked + .box { background: var(--c); }
.rw-type input:checked + .box::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--surface); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.rw-type input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }
.rw-type .sw { border-top: 3px solid var(--c); border-radius: 2px; }
.rw-type.t-statement .sw { border-top-style: dashed; } .rw-type.t-gap .sw { border-top-style: dotted; border-top-width: 4px; }
.rw-type .n { font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rw-type.off { opacity: .5; }
.rw-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.rw-seg button { background: none; border: 0; padding: 9px 0; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.rw-seg button + button { border-left: 1px solid var(--line-strong); }
.rw-seg button[aria-pressed="true"] { background: var(--btn, var(--lime)); color: var(--btn-ink, var(--lime-ink)); }
.rw-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.rw-rules { font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px; }
.rw-rules b { color: var(--ink); } .rw-rules ul { margin: 6px 0 4px; padding-left: 16px; }

.rw-graph { overflow: hidden; }
.rw-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.rw-bar b { color: var(--ink); font: 600 13px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.rw-bar .g b { color: var(--rw-gap); }
.rw-bar .tip { margin-left: auto; font-size: 12px; }
.rw-scroll { overflow-x: auto; }
.rw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.rw-level { font: 600 12px "IBM Plex Mono", monospace; color: var(--ink); padding: 4px 10px; border-radius: 20px; background: var(--chip); font-variant-numeric: tabular-nums; }
.rw-zbtns { margin-left: auto; display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.rw-zbtns button { background: none; border: 0; min-width: 34px; padding: 6px 10px; color: var(--ink); font: 700 13px Archivo, Arial, sans-serif; cursor: pointer; }
.rw-zbtns button + button { border-left: 1px solid var(--line-strong); }
.rw-zbtns button:hover { background: var(--chip); }
#rw-svg { touch-action: pan-y; }
#rw-svg.panning-ok { cursor: grab; }
#rw-svg.panning-ok:active { cursor: grabbing; }
#rw-svg .flow { fill: none; stroke: var(--c); stroke-linecap: round; stroke-dasharray: 1 15; opacity: .55; pointer-events: none;
  animation-name: rw-flow; animation-timing-function: linear; animation-iteration-count: infinite; filter: brightness(1.35); }
#rw-svg .flow.fast { opacity: .9; stroke-dasharray: 1 11; animation-name: rw-flow12; }
@keyframes rw-flow12 { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
#rw-svg .dim .flow:not(.hot) { opacity: .08; }
@keyframes rw-flow { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
#rw-svg .bob { animation: rw-bob 6s ease-in-out infinite; }
@keyframes rw-bob { 0%, 100% { transform: translateY(-1.8px); } 50% { transform: translateY(1.8px); } }
@media (prefers-reduced-motion: reduce) { #rw-svg .bob, #rw-svg .flow { animation: none; } }
#rw-svg { display: block; width: 100%; min-width: 820px; height: auto; aspect-ratio: 1100 / 880; }
.rw-noscript { padding: 24px; }
#rw-svg .ring { fill: none; stroke: var(--line); stroke-dasharray: 2 7; }
#rw-svg .edge { fill: none; stroke: var(--c); stroke-linecap: round; }
#rw-svg .fillc { fill: var(--c); }
#rw-svg .hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
#rw-svg .dim .edge:not(.hot):not(.glow) { opacity: .22 !important; }
#rw-svg .dim .node:not(.hot) { opacity: .45 !important; }
#rw-svg .dim .elab:not(.hot) { opacity: .25; }
#rw-svg .node { cursor: pointer; outline: none; }
#rw-svg .node rect { fill: var(--rw-node); stroke: var(--rw-node-line); stroke-width: 1.3; }
#rw-svg .node.ghost rect { fill: transparent; stroke-dasharray: 4 4; }
#rw-svg .node.center rect { stroke: var(--rw-center); stroke-width: 2.6; }
#rw-svg .node:hover rect, #rw-svg .node:focus-visible rect { stroke: var(--ink); stroke-width: 2; }
#rw-svg .node text { fill: var(--ink); font: 600 12px Archivo, Arial, sans-serif; }
#rw-svg .node text.nm { font: 800 15px Archivo, Arial, sans-serif; }
#rw-svg .node text.kd { fill: var(--muted); font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
#rw-svg .kdot.k-ink { fill: var(--ink); } #rw-svg .kdot.k-role { fill: var(--rw-role); } #rw-svg .kdot.k-land { fill: var(--rw-land); }
#rw-svg .kdot.k-statement { fill: var(--rw-statement); } #rw-svg .kdot.k-vote { fill: var(--rw-vote); } #rw-svg .kdot.k-money { fill: var(--rw-money); }
#rw-svg .kdot.k-appointment { fill: var(--rw-appointment); } #rw-svg .kdot.k-center { fill: var(--rw-center); }
#rw-svg .elab { pointer-events: none; }
#rw-svg .elab rect { fill: var(--rw-node); stroke: var(--c); stroke-width: 1.2; }
#rw-svg .elab text { fill: var(--c); font: 600 11px Archivo, Arial, sans-serif; }
.rw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); align-items: center; }
.rw-legend .k { display: flex; align-items: center; gap: 6px; }
.rw-legend i { width: 20px; border-top: 3px solid var(--c); display: inline-block; }
.rw-legend i.t-statement { border-top-style: dashed; } .rw-legend i.t-gap { border-top-style: dotted; border-top-width: 4px; }
.rw-legend .note { margin-left: auto; font-style: italic; }

.rw-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rw-card { padding: 18px; }
.rw-big { font: 600 30px/1 "IBM Plex Mono", monospace; margin: 12px 0 0; color: var(--rw-money); font-variant-numeric: tabular-nums; }
.rw-etitle { margin: 10px 0 6px; font-size: 24px; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.rw-flow { margin: 0; font-weight: 700; font-size: 14px; }
.rw-flow span { color: var(--muted); font-weight: 400; padding: 0 4px; }
.rw-flow button { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.rw-flow button:hover { text-decoration-color: var(--ink); }
.rw-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--chip); font-size: 13px; }
.rw-note.gap { background: color-mix(in srgb, var(--rw-gap) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rw-gap) 35%, transparent); }
.rw-reclist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rw-reclist li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rw-reclist .d { font: 500 12px/1.5 "IBM Plex Mono", monospace; color: var(--muted); }
.rw-reclist .t { font-size: 14px; line-height: 1.45; }
.rw-reclist .s { display: block; margin-top: 4px; font: 400 11px/1.5 "IBM Plex Mono", monospace; color: var(--muted); }
.rw-reclist .s a { color: inherit; }
.rw-cardactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rw-cardactions .btn { min-height: 38px; }
.rw-name { margin: 0 0 4px; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.rw-who .small { margin: 0 0 8px; }
.rw-facts { margin: 8px 0 10px; padding-left: 16px; font-size: 13.5px; }
.rw-facts li { margin: 3px 0; }
.rw-gap { margin-top: 16px; }
.rw-lines { list-style: none; margin: 0; padding: 0; }
.rw-lines button { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 9px 4px; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; color: var(--ink); font: inherit; cursor: pointer; }
.rw-lines button:hover, .rw-lines button[aria-current="true"] { background: var(--chip); }
.rw-lines .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--c); }
.rw-lines .dot.gap { background: none; border: 2px dotted var(--c); width: 7px; height: 7px; }
.rw-lines b { display: block; font-size: 13.5px; }
.rw-lines span span { font-size: 12px; color: var(--muted); }

.rw-tablewrap { overflow-x: auto; }
.rw-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rw-table th { text-align: left; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); }
.rw-table td { vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.rw-table td:first-child { white-space: nowrap; }
.rw-table td:nth-child(2) { min-width: 220px; }
.rw-table tr:target { background: var(--chip); }
.rw-recs { margin: 6px 0 0; padding-left: 16px; }
.rw-recs li { margin: 4px 0; }
.rw-recs .source { display: block; }
.rw-d { font: 500 12px "IBM Plex Mono", monospace; color: var(--muted); }
.rw-amt { font-family: "IBM Plex Mono", monospace; color: var(--rw-money); }

@media (max-width: 1180px) {
  .rw-desk { grid-template-columns: minmax(0, 1fr); }
  .rw-controls { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}