/* =============================================================================
   UNGA Voting Coincidence — what only this tool uses
   -----------------------------------------------------------------------------
   Tokens and the shared components (bar, buttons, segmented control, range
   slider, tooltip, drawer, chart marks, time-series legend and side panel) are
   in projects/static/projects/tools/tool.css, linked before this file by
   projects/_tool_base.html. The design direction is docs/unga-design.md.
   ============================================================================= */
/* 1. Map and network ---------------------------------------------------------- */
#unga-map svg, #unga-net svg { display: block; }
#unga-map path.country { stroke: var(--map-line); stroke-width: .5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
/* One outline for the hovered country, drawn over every other: hover changes the border, never the fill. */
#unga-map path.hover { fill: none; stroke: var(--text); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
#unga-map path.ref-outline { fill: none; stroke: var(--text); stroke-width: .8px; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Network */
#unga-net line { stroke: var(--text); stroke-opacity: .08; }
#unga-net .node { cursor: pointer; }
#unga-net .node .edge { fill: none; stroke: var(--map-line); stroke-width: 1px; }
#unga-net .node .disc { fill: var(--no-data); }
#unga-net .node text { fill: var(--text); font-family: var(--font); font-weight: 700; }
#unga-net .node.is-ref .edge { stroke: var(--accent-fill); stroke-width: 2.5px; }
#unga-net .node:hover .edge { stroke: var(--text); stroke-width: 1.5px; }

/* 2. Selector ----------------------------------------------------------------- */
/* 1 | 2 side by side, 3 underneath across both; stacked below 1024 px. */
.u-sel { flex: 1; min-height: 0; display: grid; gap: 16px; padding: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .u-sel { padding: 24px; grid-template-columns: clamp(360px, 32vw, 500px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .u-run { grid-column: 1 / -1; }
}
.u-sel-1 > .u-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.u-fields { display: flex; flex-direction: column; gap: 20px; }
.u-fields fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.u-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.u-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.u-chips .u-chip { height: 26px; padding: 0 9px; gap: 6px; }
.u-search { display: flex; flex-direction: column; gap: 10px; }
.u-search .u-field-head { margin-bottom: 0; }
.u-search .u-input { padding-left: 32px; }
/* Search results open as a pop-over by the box (select.js places it: below,
   or above when there is more room there), over whatever is beside it. */
.u-pop { position: fixed; z-index: 40; width: min(560px, calc(100vw - 32px)); padding: 12px 16px; background: var(--surface); }
.u-pop:empty, .u-pop[hidden] { display: none; }

.u-results > li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.u-results > li + li { border-top: 1px solid var(--border); }
.u-results .u-btn { flex: none; margin-top: 2px; }
.u-title-text { font-size: var(--fs-sm); line-height: 18px; color: var(--text);
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Preview: figures + histogram across, topics | word cloud under them, and the
   title list folded into a bar at the foot, opened on demand. */
.u-sel-2 > .u-panel-body { flex: 1; min-height: 0; }
.u-preview { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.u-pv-block { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.u-pv-sub { font-size: var(--fs-sm); line-height: 18px; font-weight: 700; color: var(--text); }
.u-pv-subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.u-pv-block > .u-pv-sub { margin-bottom: 10px; }
#unga-topics { flex: 1; min-height: 0; }
#unga-cloud { flex: 1; min-height: 240px; }
.u-pv-titles { margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--border); }
.u-pv-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0; border: 0; background: none;
               color: var(--text); cursor: pointer; text-align: left; flex: none; }
.u-pv-toggle .chev { color: var(--text-3); transition: transform .2s ease-out; }
.u-pv-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.u-pv-toggle .act { margin-left: auto; color: var(--text-2); }
.u-pv-toggle:hover .act { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#unga-titles { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#unga-titles[hidden] { display: none; }
.u-titles { flex: 1; min-height: 0; margin-right: -8px; padding-right: 8px; }
@media (min-width: 1024px) {
    .u-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto minmax(0, 1fr) auto;
                 row-gap: 20px; transition: grid-template-rows .25s ease-out; }
    #unga-summary { grid-column: 1 / -1; }
    .u-pv-topics { grid-column: 1; grid-row: 2; }
    .u-pv-cloud { grid-column: 2; grid-row: 2; }
    .u-pv-titles { grid-column: 1 / -1; grid-row: 3; margin-bottom: -16px; }
    /* Open: the list takes the lower part of the panel; topics and cloud shrink above it. */
    .u-preview.is-titles-open { grid-template-rows: auto minmax(0, .8fr) minmax(0, 1.2fr); }
    .u-preview.is-titles-open .u-pv-titles { padding-bottom: 12px; }
    #unga-cloud { min-height: 0; }
}
@media (min-width: 1024px) and (min-height: 860px) { .u-hist-bars { height: 88px; } }
@media (max-width: 1023px) { #unga-topics, #unga-titles { max-height: 60vh; } }

.u-figures { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; }
.u-fig { min-width: 0; }
.u-fig .u-xs { margin-top: 2px; max-width: 15ch; }
.u-fig .u-xl { margin-top: 8px; }            /* baseline-ish with the big count */
.u-hist { margin-top: 20px; }
.u-hist-bars { display: block; width: 100%; height: 64px; overflow: visible; }
.u-hist-bars rect { fill: var(--bar); }
.u-hist-bars rect:hover { fill: var(--text); }
.u-hist-bars line { stroke: var(--border); vector-effect: non-scaling-stroke; }
.u-hist-ticks { position: relative; height: 16px; margin-top: 4px; }
.u-hist-ticks span { position: absolute; top: 0; transform: translateX(-50%); }

/* The label column stops growing once the longest label fits; the bars take the rest. */
.u-topics > li { display: grid; grid-template-columns: minmax(0, 210px) minmax(40px, 1fr) 34px; align-items: center; gap: 8px; height: 24px; }
.u-topic-label { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-topic-n { font-size: var(--fs-xs); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

.u-title { padding: 7px 0; }
.u-title + .u-title { border-top: 1px solid var(--border); }
.u-more { padding: 10px 0; text-align: center; border-top: 1px solid var(--border); }

/* 3 - Run: options in the middle, the count and Run on the right. */
.u-run { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 16px; }
.u-run-head { display: flex; align-items: center; gap: 10px; }
.u-run-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.u-run-go { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* 3. Viewer ------------------------------------------------------------------- */
.u-edit { position: relative; flex: none; }
/* What the selection holds: shown after a short pause on hover or focus, so
   passing over the button does not flash it. Tooltip colours (docs/unga-design.md). */
.u-seltip { position: absolute; left: 0; top: calc(100% + 10px); z-index: 40; width: 320px; padding: 12px 14px;
            border-radius: 8px; background: var(--text); color: var(--surface); box-shadow: var(--shadow); pointer-events: none;
            visibility: hidden; opacity: 0; transform: translateY(-4px);
            transition: opacity .12s, transform .12s, visibility 0s linear .12s; }
.u-edit:hover .u-seltip, .u-edit:focus-within .u-seltip {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .15s .35s, transform .15s .35s, visibility 0s linear .35s; }
.u-seltip .u-label { color: inherit; opacity: .65; }
.u-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin-top: 8px;
           font-size: var(--fs-sm); line-height: 18px; }
.u-facts dt { opacity: .65; }
.u-info-facts { padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.u-info-facts .u-facts dt { opacity: 1; color: var(--text-3); }
.u-info-facts .u-facts dd { color: var(--text); }
.u-rank-toggle { position: absolute; left: 16px; top: 16px; z-index: 5; }
.u-rank-toggle[aria-expanded="true"] { visibility: hidden; }
/* The map legend moves bottom right while the ranking is open. */
.u-rank:not([hidden]) ~ .u-legend { left: auto; right: 16px; }
/* Ranking overlay: the ten most and ten least alike, no scrolling. */
.u-rank { --row: 24px; position: absolute; left: 16px; top: 16px; z-index: 6; width: 320px; max-width: calc(100% - 32px);
          max-height: calc(100% - 32px); display: flex; flex-direction: column; background: var(--surface); }
.u-rank[hidden] { display: none; }
@media (max-height: 760px) { .u-rank { --row: 21px; } }
@media (max-height: 660px) { .u-rank { --row: 18px; } }
.u-rank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 12px 4px 16px; }
.u-rank-sub { padding: 8px 16px 4px; font-size: var(--fs-xs); line-height: 16px; color: var(--text-3); }
.u-rank-list > li { display: grid; grid-template-columns: 26px 16px minmax(0, 1fr) 10px 48px; align-items: center; gap: 8px;
                    height: var(--row); padding: 0 16px 0 6px; cursor: pointer; font-size: var(--fs-sm); }
.u-rank-list > li:hover { background: var(--surface-2); }
.u-rank-list .n { text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.u-rank-list .flag { width: 16px; height: 16px; border-radius: 999px; }
.u-rank-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.u-rank-list .sw { width: 10px; height: 10px; border-radius: 3px; }
.u-rank-list .v { text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.u-rank-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px;
               padding: 10px 16px 12px; border-top: 1px solid var(--border); }
.u-flag-label { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px;
                background: var(--no-data); color: var(--text); font-size: 6px; font-weight: 700; }

/* Network */
.u-net-ctrl { position: absolute; left: 16px; top: 16px; z-index: 5; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.u-net-note { position: absolute; left: 16px; bottom: 16px; z-index: 5; max-width: 420px; padding: 10px 14px; }
.u-slider { width: 180px; accent-color: var(--accent); }

/* Time series: a toolbar across, the chart (or small multiples, or the movers)
   on the left, the partners' figures (or one year's split votes) on the right. */
.u-ts { height: 100%; display: grid; gap: 12px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .u-ts { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); grid-template-rows: auto minmax(0, 1fr); }
    .u-ts-bar { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
    .u-view[data-panel="series"] { position: static; }
    .u-ts-main { height: 75vh; }
    .u-ts-side { max-height: 80vh; }
}
.u-ts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.u-ts-bar .u-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.u-mv-list .flag, .u-ts-cell .flag { width: 16px; height: 16px; border-radius: 999px; flex: none; }
.u-ts-cell .u-chart .ts-event, .u-ts-cell .ts-event { opacity: .28; }
/* Small multiples: one panel per partner, the same axes in each. */
.u-ts-grid { height: 100%; display: grid; gap: 10px; padding: 6px 16px 0; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
             grid-auto-rows: minmax(0, 1fr); }
.u-ts-cell { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 8px 8px 2px; border: 1px solid var(--border); border-radius: 10px; }
.u-ts-cell[data-off] { opacity: .45; }
.u-ts-cell-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); flex: none; }
.u-ts-cell-head .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.u-ts-cell-head .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-ts-cell-head .v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-ts-cell-plot { position: relative; flex: 1; min-height: 0; }

/* Biggest movers */
.u-ts-movers { flex: 1; min-height: 0; overflow: auto; padding: 6px 16px 0; transition: opacity .2s; }
.u-mv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.u-mv-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.u-mv-periods .u-select { height: 30px; padding: 0 8px; }
.u-mv-cols { display: grid; gap: 16px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .u-mv-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.u-mv-col > .u-pv-sub { margin-bottom: 6px; }
.u-mv-list { margin: 0; padding: 0; list-style: none; }
.u-mv-list li { display: grid; grid-template-columns: 20px 16px minmax(0, 1fr) 104px minmax(64px, 120px) 54px 16px; align-items: center; gap: 8px;
                height: 30px; padding: 0 6px; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; }
.u-mv-list li + li { border-top: 1px solid var(--border); }
.u-mv-list li:hover { background: var(--surface-2); }
.u-mv-list li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.u-mv-list .n { text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.u-mv-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mv-list .ab { font-size: var(--fs-xs); color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-mv-list .d { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-mv-list .st { width: 10px; height: 10px; border-radius: 999px; justify-self: center; }
.u-mv-list .add { color: var(--text-3); text-align: center; }
.u-mv-bar { position: relative; height: 8px; }
.u-mv-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-3); }
.u-mv-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--bar); }

.u-drill-list .votes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.u-vote { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border);
          font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.u-vote b { color: var(--text); }
.u-vote[data-v="yes"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.u-vote[data-v="yes"] b { color: var(--surface); }
.u-vote[data-v="no"] { background: var(--surface); border-color: var(--text); color: var(--text); }

/* Alliances: the groups as a sortable table, the chosen group beside it. */
.u-al { height: 100%; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .u-al { grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 420px); } }
/* Phones and narrow windows: the view flows with the page instead of sharing one fixed stage. */
@media (max-width: 1023px) {
    .u-view[data-panel="alliances"] { position: static; }
    .u-al { height: auto; }
    .u-al-main { height: 75vh; }
    .u-al-head .u-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}
.u-al-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
             padding: 12px 16px; border-bottom: 1px solid var(--border); flex: none; }
.u-al-head .u-seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgb(var(--pe-chrome) / .08); }
.u-al-scroll { flex: 1; min-height: 0; overflow: auto; transition: opacity .2s; }
.u-al-scroll.is-loading { opacity: .45; }
.u-al-foot { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--border); }
.u-al-foot b { color: var(--text-2); }

.u-al-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.u-al-table thead th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 10px; background: var(--surface);
                       border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; font-size: var(--fs-xs);
                       color: var(--text-3); white-space: nowrap; }
.u-al-table th button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0; border: 0; background: none;
                        color: inherit; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; }
.u-al-table th button:hover { color: var(--text); }
.u-al-table th[aria-sort] button { color: var(--text); font-weight: 700; }
.u-al-table th .arrow { display: inline-block; width: 10px; }
.u-al-table td { height: 32px; padding: 0 8px; border-top: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.u-al-table tbody tr:first-child td { border-top: 0; }
.u-al-table tbody tr[tabindex] { cursor: pointer; }
.u-al-table tbody tr[tabindex]:hover td { background: var(--surface-2); }
.u-al-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.u-al-table tr.is-on td { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.u-al-table tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.u-al-table tr.base td { border-top: 1px solid var(--text-3); color: var(--text-2); font-style: italic; }
.u-al-table .c-name { padding-left: 16px; }
.u-al-table .c-num { text-align: right; font-variant-numeric: tabular-nums; }
.u-al-table th.c-num button { flex-direction: row-reverse; }
.u-al-table .c-num sup { color: var(--text-3); margin-left: 1px; }
.u-al-in { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 999px; background: var(--accent-fill); vertical-align: 1px; }
.u-al-bar { position: relative; display: inline-block; width: 80px; height: 6px; border-radius: 999px; background: var(--surface-2); vertical-align: middle; }
.u-al-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.u-al-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: .55; }
.u-al-table .v { display: inline-block; min-width: 46px; margin-left: 8px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
.u-al-table .c-ref .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.u-al-table .c-ref .v { margin-left: 4px; }
.u-spark { display: block; overflow: visible; }
.u-spark path { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.u-spark circle { fill: var(--text); }
.u-al-table .who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.u-al-table .flag, .u-al-members .flag { width: 16px; height: 16px; border-radius: 999px; flex: none; }
.u-al-table .who .nm { display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.u-al-table th .lbl { display: inline-block; max-width: 104px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (max-width: 1365px) {
    .u-al-table .who .nm { max-width: 60px; }
    .u-al-bar { width: 64px; }
    .u-al-table th .lbl { max-width: 84px; }
}
@media (max-width: 767px) { .u-al-table .c-trend, .u-al-table .c-mem { display: none; } }

.u-al-detail { min-height: 0; padding: 16px; gap: 14px; overflow: hidden; }
@media (max-width: 1023px) { .u-al-detail { overflow: visible; } .u-al-members { max-height: 60vh; } }
.u-al-dhead h2 { margin-top: 4px; }
.u-al-dhead .u-xs { margin-top: 6px; }
.u-al-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: none; }
.u-al-figs .u-xs { margin-top: 2px; }
.u-al-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: none; }
.u-al-keys i { display: inline-block; width: 14px; height: 0; margin-right: 6px; border-top: 2px solid; vertical-align: middle; }
.u-al-keys .k-coh { border-color: var(--text); }
.u-al-keys .k-ref { border-color: var(--accent-fill); }
.u-al-keys .k-base { border-color: var(--text-3); border-top-style: dashed; }
.u-al-chart { flex: none; height: 150px; margin-top: -6px; }
@media (max-height: 760px) { .u-al-chart { height: 120px; } }
.u-al-chart .al-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.u-al-chart .al-coh { stroke: var(--text); }
.u-al-chart .al-ref { stroke: var(--accent-fill); }
.u-al-chart .al-base { stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.u-al-chart .al-dot.al-coh { fill: var(--text); stroke: none; }
.u-al-chart .al-dot.al-ref { fill: var(--accent-fill); stroke: none; }
.u-al-chart .al-dot.al-base { fill: var(--text-3); stroke: none; }
.u-al-chart .al-cross { stroke: var(--text-3); stroke-dasharray: 3 3; }
.u-al-detail .u-pv-subrow { margin-bottom: -6px; flex: none; }
.u-al-members { flex: 1; min-height: 0; margin-right: -8px; padding-right: 8px; }
.u-al-members li { display: grid; grid-template-columns: 22px 16px minmax(0, 1fr) 10px 46px 50px; align-items: center; gap: 8px;
                   height: 26px; padding: 0 4px; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; }
.u-al-members li:hover { background: var(--surface-2); }
.u-al-members li.is-ref { cursor: default; }
.u-al-members li.is-ref .name { font-weight: 700; }
.u-al-members .n { text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.u-al-members .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-al-members .span { margin-left: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.u-al-members .sw { width: 10px; height: 10px; border-radius: 3px; }
.u-al-members .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.u-al-members .v.r { font-weight: 400; color: var(--text-2); }