/* Servers: a card per server in its colour, its dialog, the top bar's dots; a server's own name and colour. */
.sv-tag { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 13px; background: color-mix(in srgb, var(--sv, var(--muted)) 14%, transparent); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sv-tag i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sv, var(--muted)); }
.sv-tag.is-sm { height: 22px; padding: 0 8px; font-size: 11.5px; }
.sv-tag.is-pc { --sv: #60a5fa; }
.sv-tag.is-pc .ico { width: 14px; height: 14px; }
.sv-ctx { display: inline-flex; align-items: center; gap: 3px; }
.sv-ctx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sv); }
.sv-ctx-dot.is-off { opacity: .45; }
.sv-ctx > span { margin-left: 3px; }
.sv-cards { display: grid; gap: 14px; }
.sv-card.is-server { border-left: 3px solid var(--sv); }
.sv-ico.is-mark { background: color-mix(in srgb, var(--sv) 16%, transparent); color: var(--sv); }
.sv-ico.is-mark .sv-dot { background: #4ac578; }
.sv-ico.is-mark.is-warn .sv-dot { background: var(--warn); }
.sv-ico.is-mark.is-bad .sv-dot { background: var(--danger); }
.sv-main b { display: flex; align-items: center; gap: 8px; }
.sv-offers { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.sv-offers .ico { width: 12px; height: 12px; }
.sv-form.is-more { grid-template-columns: minmax(0, 1fr); padding-left: 0; }

/* A server's dialog on this PC */
.svd { width: min(620px, calc(100vw - 32px)); }
.svd .dlg-head { gap: 12px; }
.svd-mark { position: relative; background: color-mix(in srgb, var(--sv) 16%, transparent); color: var(--sv); }
.svd-mark > i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #4ac578; box-shadow: 0 0 0 2px var(--panel); }
.svd-mark > i.is-warn { background: var(--warn); }
.svd-mark > i.is-bad { background: var(--danger); }
.svd-state { margin-left: auto; }
.svd .mono { font-family: var(--mono); }
.svd-body { display: grid; gap: 16px; grid-auto-rows: max-content; }
.svd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 10px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.svd-fact { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; padding: 10px 12px; background: var(--panel); }
.svd-fact .ico { grid-row: span 2; width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }
.svd-fact span { color: var(--muted); font-size: 12px; }
.svd-fact b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.svd-acts { display: grid; border-radius: 10px; border: 1px solid var(--line); }
.svd-act { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
.svd-acts > * + * { border-top: 1px solid var(--line); }
.svd-acts > .grow-swap { border-top: 0; }
.svd-acts .sy-key { padding: 0 14px 14px 58px; }
.svd-act .person-main { flex: 1; min-width: 0; }
.svd-act .person-main small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.svd-act > .switch, .svd-act > .btn { flex: none; }
.svd-act-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--hover); color: var(--text-2); }
.svd-act-ico .ico { width: 16px; height: 16px; }
.svd-danger { border-radius: 10px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.svd-act.is-danger .svd-act-ico { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.svd-act.is-danger b { color: var(--danger); }
@media (max-width: 760px) {
	.svd-facts { grid-template-columns: minmax(0, 1fr); }
	.svd-state { display: none; }
	.svd-act { flex-wrap: wrap; row-gap: 10px; }
	.svd-act:has(> .btn) .person-main { flex-basis: calc(100% - 44px); }
	.svd-act > .btn { margin-left: 44px; }
	.svd-acts .sy-key { padding-left: 14px; }
}

/* This server (on the server): its name and its colour */
.sv-own { display: grid; }
.sv-own-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 60px; padding: 10px 18px; }
.sv-own-row + .sv-own-row { border-top: 1px solid var(--line); }
.sv-own-k { color: var(--muted); font-size: 13px; }
.sv-own-v { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sv-own-v input { width: min(320px, 100%); height: 38px; padding: 0 12px; border-radius: var(--r-in); border: 1px solid var(--line-2); background: var(--input, transparent); color: var(--text); }
.sv-own-v small { color: var(--muted); font-size: 12.5px; }
.sv-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-sw { width: 26px; height: 26px; border-radius: 50%; background: var(--c); transition: box-shadow .15s; }
.sv-sw:hover { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line-3); }
.sv-sw.is-on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c); }
@media (max-width: 640px) { .sv-own-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .sv-own-v { flex-wrap: wrap; } }

/* The Sync board: a tab per server, two columns and the wires between */
.sy-clock { border-left: 3px solid var(--sv, var(--line)); }
.sy-clock .sy-ring-fg { stroke: var(--sv, var(--accent)); }
.wr-tabs { position: relative; margin: 4px 0 14px; }
.wr-tabs button { position: relative; z-index: 1; gap: 6px; padding: 0 12px 0 10px; }
.wr-tabs button i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sv); }
.wr-tabs button.is-on { color: var(--text); }
.wr-marker { opacity: 1; background: color-mix(in srgb, var(--sv, var(--accent)) 18%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv, var(--accent)) 45%, transparent); }
.wr-stage { overflow: hidden; margin: -6px; padding: 6px; }
.wr-board { position: relative; overflow: visible; border-top: 3px solid var(--sv); }
.wr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) minmax(0, 1fr); padding: 6px 0 10px; }
.wr-col { position: relative; z-index: 2; display: grid; align-content: start; }
.wr-col-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; }
.wr-col-head small { color: var(--muted); font-size: 12px; }
.wr-col[data-col="here"] .wr-col-head { flex-direction: row-reverse; }
.wr-gutter { position: relative; z-index: 1; margin-top: 52px; }
.wr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wr-sub { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 22px; color: var(--muted); font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wr-sub .ico { width: 12px; height: 12px; }
.wr-sub.is-sets { color: #5fd4c4; }
.wr-col[data-col="here"] .wr-sub { flex-direction: row-reverse; }

/* A space as a node: its handle on the inner edge; sub spaces hang on the Field Guide's tree lines */
.wr-node { --gc: color-mix(in srgb, #4ac578 38%, transparent); position: relative; display: flex; align-items: center; gap: 8px; height: 48px; margin: 0 0 6px; padding: 0 12px 0 calc(14px + var(--d) * 18px); border-radius: 10px; transition: background-color .15s, box-shadow .15s; }
.wr-col[data-col="there"] .wr-node { margin-left: 8px; padding-right: 22px; }
.wr-col[data-col="here"] .wr-node { --gc: color-mix(in srgb, #60a5fa 38%, transparent); flex-direction: row-reverse; margin-right: 8px; padding-left: 22px; padding-right: calc(14px + var(--d) * 18px); }
.wr-col[data-col="here"] .wr-name { flex-direction: row-reverse; }
.wr-node:hover { background: var(--hover); }
.wr-node.is-target { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wr-node.is-off { opacity: .55; }
.wr-node.is-pad { visibility: hidden; pointer-events: none; }
.wr-node.is-kid::before { content: ""; position: absolute; top: -6px; bottom: 0; width: 1px; background: var(--gc); pointer-events: none; }
.wr-node.is-kid.is-last::before { bottom: auto; height: calc(50% + 6px); width: 8px; background: none; border-bottom: 1px solid var(--gc); }
.wr-col[data-col="there"] .wr-node.is-kid::before { left: calc(17px + (var(--d) - 1) * 18px); }
.wr-col[data-col="there"] .wr-node.is-kid.is-last::before { border-left: 1px solid var(--gc); border-bottom-left-radius: 6px; }
.wr-col[data-col="here"] .wr-node.is-kid::before { right: calc(17px + (var(--d) - 1) * 18px); }
.wr-col[data-col="here"] .wr-node.is-kid.is-last::before { border-right: 1px solid var(--gc); border-bottom-right-radius: 6px; }
.wr-guide { position: absolute; top: -6px; bottom: 0; width: 1px; background: var(--gc); pointer-events: none; }
.wr-col[data-col="there"] .wr-guide { left: calc(17px + (var(--k) - 1) * 18px); }
.wr-col[data-col="here"] .wr-guide { right: calc(17px + (var(--k) - 1) * 18px); }
.wr-name { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.wr-name small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.wr-name .cu-space { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-handle { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--line-3); background: var(--panel); cursor: crosshair; transition: transform .15s, border-color .15s, background-color .15s; }
.wr-col[data-col="there"] .wr-handle { right: -7px; }
.wr-col[data-col="here"] .wr-handle { left: -7px; }
.wr-node.is-wired .wr-handle { border-color: var(--sv); background: var(--sv); }
.wr-node:hover .wr-handle { transform: scale(1.25); border-color: var(--accent); }
.wr-board.is-dragging, .wr-board.is-dragging * { cursor: crosshair; user-select: none; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 10px; border-radius: 13px; border: 1px dashed color-mix(in srgb, #5fd4c4 70%, transparent); background: color-mix(in srgb, #5fd4c4 10%, transparent); color: #5fd4c4; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ss-chip > span { overflow: hidden; text-overflow: ellipsis; }
.ss-chip .ico { width: 14px; height: 14px; flex: none; }
.wr-node.is-ghost { opacity: .75; }
.wr-node.is-ghost .wr-handle { border-style: dashed; border-color: #5fd4c4; background: var(--panel); }
.wr-node.is-ghost small { color: #5fd4c4; }

/* What a space with no wire offers; where one wired elsewhere is */
.wr-act { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; transition: border-color .15s, color .15s; }
.wr-act:hover { border-color: var(--line-3); color: var(--text); }
.wr-act .ico { width: 13px; height: 13px; }
.wr-else { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.wr-else i { width: 7px; height: 7px; border-radius: 50%; background: var(--sv); }
.wr-else .ico { width: 13px; height: 13px; }
.wr-wire-btn { display: none; }
.wr-add { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px dashed var(--line-3); color: var(--muted); font-size: 12.5px; font-weight: 600; transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease); }
.wr-col[data-col="there"] .wr-add { margin: 4px 0 0 8px; }
.wr-col[data-col="here"] .wr-add { margin: 4px 8px 0 0; }
.wr-add:hover { color: var(--text); border-color: var(--accent); background: var(--hover); }
.wr-add .ico { width: 14px; height: 14px; }
.wr-add.is-set { border-color: color-mix(in srgb, #5fd4c4 45%, transparent); color: #5fd4c4; }
.wr-add.is-set:hover { border-color: #5fd4c4; color: color-mix(in srgb, #5fd4c4 80%, white); background: color-mix(in srgb, #5fd4c4 8%, transparent); }
.wr-add + .wr-sub { margin-top: 14px; }

/* The wires: a curve per pair, coloured by what moves; dashed while new; a dot flowing along them */
.wr-wire { fill: none; stroke: color-mix(in srgb, var(--sv) 55%, var(--line-3)); stroke-width: 2; }
.wr-wire.is-up { stroke: #4ac578; }
.wr-wire.is-bad { stroke: var(--warn); }
.wr-wire.is-new { stroke: var(--accent); stroke-dasharray: 6 5; }
.wr-wire.is-drag { stroke: var(--accent); stroke-dasharray: 4 4; }
.wr-wire.is-ghost { stroke: #5fd4c4; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .9; }
.wr-flow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 26; animation: wr-flow 1.2s linear infinite; }
.wr-flow.is-idle { stroke: color-mix(in srgb, var(--sv) 70%, white); stroke-width: 2.5; stroke-dasharray: 10 90; opacity: .6; animation: wr-idle 3.2s linear infinite; }
.wr-flow.is-up { stroke: #4ac578; animation-direction: reverse; }
.wr-flow.is-bad { stroke: var(--warn); }
@keyframes wr-flow { to { stroke-dashoffset: -28; } }
@keyframes wr-idle { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .wr-flow { animation: none; } }

/* The pill on a wire: what moves; hovering shows its X beside it (the pill never moves) */
.wr-pills { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wr-tag { position: absolute; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 2px; border-radius: 12px; pointer-events: auto; }
.wr-tag.is-bare { min-width: 22px; width: 22px; }
.wr-x { position: absolute; left: calc(100% + 4px); top: 50%; width: 22px; height: 22px; margin-top: -11px; opacity: 0; transition: opacity .16s var(--ease); }
.wr-tag.is-bare .wr-x { left: 0; }
.wr-tag:hover .wr-x, .wr-tag:focus-visible .wr-x { opacity: 1; }
.wr-x svg { display: block; width: 22px; height: 22px; }
.wr-x-ring { fill: var(--panel); stroke: var(--line-3); stroke-width: 1; transition: fill .15s, stroke .15s; }
.wr-x-cross { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; transition: stroke .15s; }
.wr-x:hover .wr-x-ring { fill: color-mix(in srgb, var(--danger) 18%, var(--panel)); stroke: color-mix(in srgb, var(--danger) 55%, transparent); }
.wr-x:hover .wr-x-cross { stroke: var(--danger); }
.wr-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel); font: 600 11.5px var(--mono); }
.wr-pill b { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.wr-pill .ico { width: 12px; height: 12px; }
.wr-pill b.is-up { color: #4ac578; }
.wr-pill.is-bad { border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }
.wr-pill.is-new { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); color: var(--accent-text); font-family: inherit; }

/* The suggestion and the bar of changes not applied yet */
.wr-suggest { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 12px 14px; border-radius: var(--r-card); border: 1px dashed color-mix(in srgb, #5fd4c4 55%, var(--line)); background: color-mix(in srgb, #5fd4c4 6%, transparent); font-size: 13px; color: var(--text-2); }
.wr-suggest > .ico { width: 18px; height: 18px; color: #5fd4c4; flex: none; }
.wr-suggest span { flex: 1; min-width: 0; line-height: 1.45; }
.wr-suggest b { color: var(--text); font-weight: 600; }
.wr-bar { display: none; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-radius: 0 0 var(--r-card) var(--r-card); }
.wr-bar.is-on { display: flex; position: sticky; bottom: 0; z-index: 3; }
.wr-bar > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wr-bar .ico { width: 16px; height: 16px; }

/* The picker (Wire to): the wire it makes at its top, the other side's spaces in their tree */
.wr-dlg { width: min(520px, calc(100vw - 32px)); }
.wr-preview { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-card); background: color-mix(in srgb, var(--sv) 7%, transparent); border: 1px solid color-mix(in srgb, var(--sv) 30%, var(--line)); }
.wr-end { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.wr-end:last-child { justify-items: end; }
.wr-end small { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.wr-q { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 13px; border: 1px dashed var(--accent); color: var(--accent-text); font-weight: 700; }
.wr-preview-wire { flex: 1; min-width: 40px; height: 0; border-top: 2px dashed var(--accent); }
.wr-find { margin-top: 12px; }
.wr-pick { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; margin-top: 12px; }
.wr-pick-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px 4px calc(10px + var(--d, 0) * 18px); border-radius: 8px; text-align: left; transition: background-color .15s, box-shadow .15s; }
.wr-pick-row[hidden] { display: none; }
.wr-pick-row:hover { background: var(--hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.wr-pick-row > .ico { width: 14px; height: 14px; color: var(--accent-text); flex: none; }
.wr-pick-row.is-new { margin-bottom: 2px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); }
.wr-pick-row.is-new b { font-size: 13px; font-weight: 600; color: var(--accent-text); }
.wr-pick-row.is-kid::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: calc(15px + (var(--d) - 1) * 18px); width: 1px; background: color-mix(in srgb, #60a5fa 38%, transparent); pointer-events: none; }
.wr-pick-row.is-kid.is-last::before { bottom: auto; height: calc(50% + 1px); width: 8px; background: none; border-left: 1px solid color-mix(in srgb, #60a5fa 38%, transparent); border-bottom: 1px solid color-mix(in srgb, #60a5fa 38%, transparent); border-bottom-left-radius: 6px; }
.wr-pick-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; height: 22px; padding: 0 8px; border-radius: 11px; background: color-mix(in srgb, var(--sv) 14%, transparent); color: var(--text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.wr-pick-tag .ico { width: 12px; height: 12px; }
.wr-pick-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.wr-pick-legend .ico { width: 13px; height: 13px; }

/* Phone and narrow windows: the board stacks, no wires to draw; each server space says where it goes, Wire to picks */
@media (max-width: 760px) {
	.wr-cols { grid-template-columns: minmax(0, 1fr); }
	.wr-gutter, .wr-handle { display: none; }
	.wr-col[data-col="here"] { display: none; }
	.wr-node.is-pad { display: none; }
	.wr-col[data-col="there"] .wr-node { margin: 0 8px 6px; padding: 8px 12px 8px calc(12px + var(--d) * 16px); height: auto; min-height: 52px; flex-wrap: wrap; }
	.wr-col[data-col="there"] .wr-node.is-kid::before { left: calc(13px + (var(--d) - 1) * 16px); }
	.wr-col[data-col="there"] .wr-guide { left: calc(13px + (var(--k) - 1) * 16px); }
	.wr-col[data-col="there"] .wr-add { margin: 4px 8px 0; }
	.wr-wire-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; max-width: 100%; }
	.wr-wire-btn .ico { width: 14px; height: 14px; }
	.wr-node.is-wired .wr-wire-btn { border-color: color-mix(in srgb, var(--sv) 45%, var(--line)); color: var(--text); }
	.wr-node:not(.is-wired) .wr-act { display: none; }
	.wr-suggest { flex-wrap: wrap; }
	.wr-suggest .btn { flex: 1; justify-content: center; }
}

/* Tiles keep one height: their line stays on one line */
.pv-tile > span { min-width: 0; }
.pv-tile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The Field Guide: what a space or a set syncs with (a dot in the tree, a tag in its head, a row in Details) */
.ft-sv { display: inline-block; flex: none; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--sv); }
.pv-tile small .ft-sv { margin: 0 2px 1px 0; vertical-align: middle; }
.pv-sv { display: inline-flex; align-items: center; gap: 8px; }
.pv-sv > i { font-style: normal; color: var(--muted); }
.pv-sv .sv-tag { height: 22px; padding: 0 8px; font-size: 11.5px; }
.sv-tag.is-local { background: var(--hover); color: var(--text-2); }
.sv-tag.is-local .ico { width: 13px; height: 13px; }
.dp-synced { display: grid; justify-items: start; gap: 6px; }
.dp-synced small { color: var(--muted); font-size: 12px; }

/* The picker's rows never run wider than the dialog: a long name or tag gives way first */
.wr-pick { overflow-x: hidden; }
.wr-pick-row { min-width: 0; }
.wr-pick-row > .cu-space, .wr-pick-row > .ss-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wr-pick-row.is-new { flex-wrap: wrap; }
.wr-pick-tag { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.wr-pick-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-pick-tag .ico { flex: none; }
.wr-pick-row .wr-guide { top: -1px; bottom: -1px; left: calc(15px + (var(--k) - 1) * 18px); background: color-mix(in srgb, #60a5fa 38%, transparent); }

/* The tree's counts: own documents, then those from shared sets in the sets' teal */
.ft-name > small.ft-split { display: inline-flex; align-items: baseline; gap: 3px; }
.ft-split .ft-plus { font-style: normal; color: var(--muted); opacity: .7; }
.ft-split .ft-shared { color: #5fd4c4; }
.ft-split .ft-own, .ft-split .ft-shared { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }
.ft-split .ft-own { text-align: right; }