/* Justice ratings, vote models and the Statistics tab (app-stats.js) */
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.st-two-tight { gap: 20px; margin-top: 6px; }
@media (max-width: 900px) { .st-two { grid-template-columns: 1fr; } }
.st-panel h4 { margin-bottom: 14px; }
.st-kpis { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 14px; }
.st-kpis > div { display: flex; flex-direction: column; min-width: 140px; flex: 1; }
.st-kpis b { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.st-kpis span { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; margin-top: 3px; }
.st-kpis-wide { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 18px 0 8px; }
.st-kpis-wide > div { min-width: 110px; }
.st-sub { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.st-sub .muted-line { font-weight: 400; }
.st-key { font-weight: 400; color: var(--ink-3); margin-left: 8px; white-space: nowrap; }
.st-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.st-key .k-hi { background: var(--accent); }
.st-key .k-ring { border: 2px solid var(--navy); background: var(--bg-elev); }
.st-warn { font-size: 13px; color: var(--ink-2); background: var(--bg-sunk); border-radius: var(--radius-sm); padding: 8px 12px; }
.st-note { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 4px; max-width: 900px; }
.st-lead { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; }
.st-verdict { font-size: 14px; margin: 0 0 4px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-sunk); }
.st-verdict.weak { border-left: 3px solid var(--ink-3); }

/* svg charts: one hue (accent) for the subject, gray for the rest */
.st-strip, .st-line { width: 100%; height: auto; display: block; overflow: visible; }
.st-axis, .st-grid { stroke: var(--line); stroke-width: 1; }
.st-ref { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.st-lab { font: 11px var(--sans); fill: var(--ink-3); }
.st-strip circle { fill: var(--ink-3); opacity: .35; }
.st-strip g.ring circle { fill: var(--bg-elev); stroke: var(--navy); stroke-width: 2; opacity: 1; }
.st-strip g.hi circle { fill: var(--accent); opacity: 1; stroke: var(--bg-elev); stroke-width: 2; }
.st-strip circle.hit, .st-line .hit { fill: transparent; stroke: none; opacity: 1; cursor: default; }
.st-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.st-pt { fill: var(--accent); }
.st-band { fill: var(--accent); opacity: .14; }
.st-line .hit:hover { fill: var(--ink); opacity: .05; }

/* horizontal bars */
.st-bars { display: flex; flex-direction: column; gap: 6px; }
.st-bar { display: grid; grid-template-columns: minmax(150px, 2fr) 3fr 56px; gap: 10px; align-items: center; font-size: 13px; }
.st-bar .lab { color: var(--ink-2); line-height: 1.3; }
.st-bar .track { position: relative; height: 12px; background: var(--bg-sunk); border-radius: 4px; }
.st-bar .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--ink-3); opacity: .45; }
.st-bar.hi .track i { background: var(--accent); opacity: 1; }
.st-bar.mid .track i { background: var(--accent); opacity: .55; }
.st-bar.imp .track i { background: var(--navy); opacity: .7; }
.st-bar .ci { position: absolute; top: 5px; height: 2px; background: var(--ink); opacity: .7; }
.st-bar .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* predictions */
.st-preds { list-style: none; margin: 0; padding: 0; }
.st-preds li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-preds li .muted-line { grid-column: 1; font-size: 12px; }
.st-preds .st-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.st-pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); }
.st-pill.rev { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.st-pill.aff { background: var(--bg-sunk); color: var(--ink-2); }

/* tables */
.st-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 8px; background: var(--bg-elev); }
.st-table th, .st-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.st-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.st-table td .m { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.st-num td:not(:first-child), .st-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.st-table tr.tot td { font-weight: 700; border-top: 2px solid var(--line); }
.st-scroll { overflow-x: auto; }
.st-matrix { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; margin: 4px 0; }
.st-matrix caption { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding-bottom: 6px; }
.st-matrix th { font-weight: 600; padding: 4px 6px; color: var(--ink-2); white-space: nowrap; }
.st-matrix thead th { font-size: 11px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; height: 84px; }
.st-matrix tbody th { text-align: right; }
.st-matrix td { width: 38px; height: 30px; text-align: center; border: 2px solid var(--bg); background: color-mix(in srgb, var(--accent) calc(var(--a, 0) * 100%), var(--bg-elev)); color: var(--ink); }
.st-matrix td.self { background: var(--bg-sunk); color: var(--ink-3); }
.st-dir { font-size: 12px; font-weight: 600; }
.st-dir.d-L { color: #2f5d9a; }
.st-dir.d-C { color: #a33a2c; }
.st-dir.d-U { color: var(--ink-3); }
[data-theme="dark"] .st-dir.d-L { color: #8db4ea; }
[data-theme="dark"] .st-dir.d-C { color: #f0907f; }
.st-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.st-pick select { font: inherit; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); }
.st-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.st-method { margin: 4px 0 18px; font-size: 13.5px; color: var(--ink-2); }
.st-method summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.st-method p { max-width: 900px; }

/* dot strip (HTML): dots link to justice pages, tooltip on hover/focus */
.st-strip2 { margin: 6px 0 8px; }
.st-track { position: relative; height: 34px; }
.st-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.st-dot { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink-3); opacity: .45; }
.st-dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* bigger hit target */
.st-dot.ring { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--bg-elev); border: 2px solid var(--navy); opacity: 1; z-index: 2; }
.st-dot.hi { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; background: var(--accent); border: 2px solid var(--bg-elev); opacity: 1; z-index: 3; }
.st-dot:hover, .st-dot:focus-visible { opacity: 1; z-index: 5; outline: 2px solid var(--accent); outline-offset: 2px; }
.st-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12.5px; line-height: 1.35; white-space: nowrap; pointer-events: none; }
.st-tip b { display: block; font-weight: 600; }
.st-tip em { display: block; font-style: normal; color: var(--accent); font-size: 11.5px; margin-top: 2px; }
.st-dot.tip-l .st-tip { left: auto; right: -6px; transform: none; }
.st-dot.tip-r .st-tip { left: -6px; transform: none; }
.st-dot:hover .st-tip, .st-dot:focus-visible .st-tip { display: block; }
.st-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.st-line .st-lab { font-size: 15px; }

/* pending case: predicted outcome (case page) */
.st-pred { margin-top: 34px; padding-top: 8px; border-top: 1px solid var(--line); }
.st-pred h2 small { font-size: 13px; font-weight: 400; color: var(--ink-3); font-family: var(--sans); }
.st-market { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 10px 0 18px; }
.st-mhead { display: flex; justify-content: space-between; align-items: flex-end; }
.st-mhead div { display: flex; flex-direction: column; }
.st-mhead .aff { text-align: right; }
.st-mhead b { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1; color: var(--accent); }
.st-mhead .aff b { color: var(--ink-2); }
.st-mhead span { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.st-split { height: 10px; border-radius: 5px; background: var(--bg-sunk); overflow: hidden; margin: 10px 0 4px; display: flex; }
.st-split i { background: var(--accent); border-right: 2px solid var(--bg-elev); }
.st-board { display: flex; flex-direction: column; gap: 4px; }
.st-row { display: grid; grid-template-columns: 110px 1fr 48px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.st-row.top { background: var(--bg-sunk); font-weight: 600; }
.st-row .lab { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-row .track { height: 12px; position: relative; }
.st-row .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--accent); }
.st-row.aff .track i { background: var(--ink-3); opacity: .6; }
.st-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.st-jv { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.st-jrow { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; }
.st-jrow:hover { background: var(--bg-sunk); }
.st-jrow .lean { position: relative; height: 14px; background: linear-gradient(90deg, var(--bg-sunk), var(--bg-sunk)); border-radius: 7px; }
.st-jrow .lean .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px dashed var(--ink-3); opacity: .6; }
.st-jrow .lean .dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink-3); border: 2px solid var(--bg-elev); }
.st-jrow .lean .dot.rev { background: var(--accent); }
.st-jv .st-ends { padding: 0 4px; }
@media (max-width: 640px) { .st-jrow { grid-template-columns: 1fr auto; } .st-jrow .lean { grid-column: 1 / -1; grid-row: 2; } }
.st-board-h { display: grid; grid-template-columns: 1fr 48px 48px; gap: 10px; padding: 0 6px; }
.st-board-h span:not(:first-child) { text-align: right; font-weight: 500; color: var(--ink-3); }
.st-row { grid-template-columns: 110px 1fr 48px 48px; }
.st-row .val.past { color: var(--ink-3); font-weight: 400; }
.st-row .track b.past { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; }