/* Claims, extraction record surfaces. Extends signals.css; no new hues. */

.cl-strip{display:flex;align-items:center;gap:14px;padding:11px 14px 11px 16px;border:1px solid var(--border-faint);background:var(--surface-1);border-radius:var(--radius-md)}
.cl-strip p{flex:1;font-size:var(--fs-13);line-height:1.5;color:var(--text-secondary)}
.cl-strip p b{font-weight:500;color:var(--text-primary)}

.cl-dates{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cl-date{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--mono);font-size:var(--fs-11);padding:6px 8px;width:100%}
.cl-date:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)}
.cl-rail-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

.cl-claim{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start;width:100%;text-align:left;background:var(--surface-1);border:1px solid var(--border-faint);border-radius:var(--radius-lg);padding:15px 16px;cursor:pointer;transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.cl-claim:hover{border-color:var(--border-soft);background:var(--surface-2)}
.cl-claim.sup{border-style:dashed}
.cl-claim-statement{font-size:var(--fs-14);line-height:1.5;letter-spacing:-0.006em;color:var(--text-primary);text-wrap:pretty}
.cl-claim-body{grid-column:1;font-size:var(--fs-13);line-height:1.6;color:var(--text-tertiary);text-wrap:pretty;max-width:96ch}
.cl-claim-meta{grid-column:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:4px}
.cl-slug{font-family:var(--mono);font-size:var(--fs-12);letter-spacing:0.01em;color:var(--text-secondary);white-space:nowrap}
.cl-dot{font-size:var(--fs-11);color:var(--text-tertiary)}
.cl-mfield{font-size:var(--fs-12);color:var(--text-tertiary);white-space:nowrap}
.cl-claim-right{grid-row:1/span 3;grid-column:2;display:flex;align-items:center;gap:10px;align-self:start;padding-top:2px}
.cl-dirmark{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fs-10);letter-spacing:0.07em;text-transform:uppercase;color:var(--text-tertiary)}
.cl-dirmark i{width:12px;height:1px;background:currentColor;flex:0 0 auto}
.cl-dirmark.up i{transform:rotate(-28deg);background:var(--accent-ink)}
.cl-dirmark.up{color:var(--accent-ink)}
.cl-dirmark.down i{transform:rotate(28deg)}

.cl-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.cl-kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px 22px}
.cl-body-copy{font-size:var(--fs-14);line-height:1.7;color:var(--text-secondary);max-width:74ch;text-wrap:pretty}

.cl-srcrow{display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,1.1fr) auto;gap:18px 26px;align-items:center;background:var(--surface-1);border:1px solid var(--border-faint);border-radius:var(--radius-lg);padding:16px 18px}
.cl-srcrow-id{display:flex;flex-direction:column;gap:5px;min-width:0}
.cl-srcrow-id b{font-size:var(--fs-14);font-weight:500;letter-spacing:-0.008em;color:var(--text-primary)}
.cl-funnel{display:flex;flex-direction:column;gap:12px;min-width:0}
.cl-funnel-track{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.cl-funnel-track .raw{height:8px;border-radius:2px;background:color-mix(in oklab,var(--text-primary) 14%,transparent);flex:0 0 auto}
.cl-funnel-track .out{height:8px;border-radius:2px;background:var(--accent-ink);flex:0 0 auto}
.cl-funnel-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cl-srcfigs{display:flex;gap:26px;align-items:flex-end;flex:0 0 auto}
.cl-fig{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.cl-fig b{font-size:var(--fs-20);font-weight:500;letter-spacing:-0.016em;color:var(--text-primary);line-height:1}
.cl-fig.lime b{color:var(--accent-ink)}

.cl-run{background:var(--surface-1);border:1px solid var(--border-faint);border-radius:var(--radius-lg);overflow:hidden}
.cl-run.bad{border-color:color-mix(in oklab,var(--error-ink) 34%,transparent)}
.cl-run-top{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto auto;gap:12px 22px;align-items:center;width:100%;text-align:left;background:transparent;border:0;padding:14px 16px;cursor:pointer;transition:background var(--dur-hover) var(--ease)}
.cl-run-top:hover{background:var(--surface-2)}
.cl-run-when{display:flex;flex-direction:column;gap:4px}
.cl-run-when b{font-size:var(--fs-14);font-weight:500;color:var(--text-primary)}
.cl-run-figs{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-13);color:var(--text-tertiary)}
.cl-run-figs b{font-weight:500;color:var(--text-primary);font-size:var(--fs-13)}
.cl-run-figs .bad b{color:var(--error-ink)}
.cl-run-cost{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.cl-run-cost b{font-family:var(--mono);font-size:var(--fs-13);color:var(--text-primary)}
.cl-run-detail{border-top:1px solid var(--border-faint);padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--surface-2)}
.cl-run-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px 20px}
.cl-run-err{font-size:var(--fs-13);line-height:1.6;color:var(--error-ink);border-left:1px solid var(--error-ink);padding-left:12px;max-width:80ch;text-wrap:pretty}
.cl-splits{display:flex;flex-wrap:wrap;gap:8px}
.cl-split{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:5px 10px}
.cl-split b{font-family:var(--mono);font-size:var(--fs-12);color:var(--text-primary)}
.cl-chevbox{color:var(--text-tertiary);display:inline-flex;transition:transform var(--dur-hover) var(--ease)}
.cl-chevbox.open{transform:rotate(90deg)}
.cl-usedh .sg-h2{white-space:nowrap}

/* filter bar under the search */
.cl-filterbar{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--border-faint);border-radius:var(--radius-lg);background:var(--surface-1)}
.cl-fb-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cl-fb-pop{position:relative;display:inline-flex}
.cl-fb-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:var(--fs-13);color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;transition:color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.cl-fb-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}
.cl-fb-btn.open{color:var(--text-primary);border-color:var(--accent-border)}
.cl-fb-btn.on{color:var(--text-primary);border-color:var(--accent-border);background:var(--accent-soft)}
.cl-fb-btn svg{color:var(--text-tertiary)}
.cl-fb-n{font-family:var(--mono);font-size:var(--fs-11);font-style:normal;color:var(--on-accent);background:var(--lime);border-radius:99px;padding:1px 5px;line-height:1.4}
.cl-fb-btn .sg-switch{margin-left:1px}
.cl-fb-btn.as-label{cursor:default}
.cl-fb-btn.as-label:hover{color:var(--text-secondary);border-color:var(--border-soft)}
.cl-fb-btn.as-label.on{color:var(--text-primary)}
.cl-fb-sep{width:1px;align-self:stretch;min-height:22px;background:var(--border-soft);margin:0 4px}
.cl-fb-count{font-family:var(--mono);font-size:var(--fs-11);letter-spacing:0.02em;color:var(--text-tertiary);margin-left:auto;white-space:nowrap;flex:0 0 auto}
.cl-fb-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:flex;flex-direction:column;gap:8px;min-width:210px;max-width:min(78vw,460px);padding:12px;background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--radius-md)}
.cl-fb-panel.wide{min-width:380px}
.cl-fb-panel .input{font-size:var(--fs-13);padding:7px 10px}
.cl-fb-pills{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px;border-top:1px solid var(--border-faint)}
.cl-fb-pill{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--mono);font-size:var(--fs-11);letter-spacing:0.01em;color:var(--text-primary);background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:99px;padding:4px 9px;cursor:pointer;transition:border-color var(--dur-hover) var(--ease)}
.cl-fb-pill i{font-style:normal;color:var(--text-tertiary);font-size:var(--fs-13);line-height:1}
.cl-fb-pill:hover{border-color:var(--border-strong)}
.cl-fb-pill:hover i{color:var(--text-primary)}

/* source → kind flow */
.cl-flow{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-faint);border-radius:var(--radius-lg);background:var(--surface-1);overflow:hidden}
.cl-flow-cap{display:flex;align-items:baseline;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border-faint)}
.cl-flow-cap p{flex:1;font-size:var(--fs-13);line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.cl-flow-cap p b{font-weight:500;color:var(--text-primary)}
.cl-flow-svg{padding:8px 4px}
.cl-flow-svg svg{display:block;overflow:visible}
.cl-flow-name{font-family:var(--sans);font-size:var(--fs-14);font-weight:500;letter-spacing:-0.008em;fill:var(--text-primary);transition:opacity 200ms var(--ease)}
.cl-flow-sub{font-family:var(--mono);font-size:var(--fs-11);font-weight:400;letter-spacing:0.01em;fill:var(--text-tertiary)}
.cl-flow-halo{paint-order:stroke;stroke:var(--surface-1);stroke-width:4px;stroke-linejoin:round}
.cl-flow-foot{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--border-faint)}
.cl-flow-foot .rule{flex:1;height:1px;background:var(--border-faint)}

/* ------------------------------------------------------------------- pager */
.cl-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0 4px;border-top:1px solid var(--border-faint)}
.cl-pager-range{font-size:var(--fs-11);color:var(--text-tertiary);letter-spacing:.01em}
.cl-pager-nav{display:flex;align-items:center;gap:4px}
.cl-pg,.cl-pg-arrow{min-width:28px;height:28px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-12);color:var(--text-secondary);background:transparent;border:1px solid var(--border-faint);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
.cl-pg:hover,.cl-pg-arrow:hover:not(:disabled){background:var(--surface-2);color:var(--text-primary);border-color:var(--border-soft)}
.cl-pg.on{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.cl-pg-arrow:disabled{opacity:.35;cursor:default}
.cl-pg-gap{font-family:var(--mono);font-size:var(--fs-11);color:var(--text-tertiary);padding:0 2px}
.cl-fb-count i{font-style:normal;color:var(--text-tertiary)}