1/* A legend, not a row of buttons: symbols in a column, titles left, counts2 right in tabular figures so they read down the page. State is carried by3 the mark and the weight of the text, so nothing needs an outline to say it4 is interactive. */5.category-toggles {6 padding: 2px 14px 10px;7}89.category-row {10 display: grid;11 width: 100%;12 align-items: center;13 /* icon-or-chevron · name · isolate · label toggle · count. Every kind of14 row keeps all five columns -- rows that have nothing for a column hold15 it as space -- so counts and controls line up down the whole tree. */16 grid-template-columns: 22px minmax(0, 1fr) 22px 22px 46px;17 gap: 8px;18 min-height: 26px;19 padding: 0 4px;20 border-radius: 3px;21 color: #7d786c;22 cursor: pointer;23 user-select: none;24}2526.category-row.is-hovered {27 background: rgba(255, 255, 255, 0.04);28 color: var(--text);29}3031.category-row:has(input:checked) {32 color: #d8d2c4;33}3435.category-row input {36 position: absolute;37 width: 1px;38 height: 1px;39 opacity: 0;40}4142.category-row:has(input:focus-visible) {43 outline: 1px solid var(--accent);44 outline-offset: -1px;45}4647/* Unlit rather than absent: an unchecked category is still part of the key. */48.category-row:not(:has(input:checked)) .category-icon,49.category-row:not(:has(input:checked)) .text-symbol {50 opacity: 0.32;51}5253.category-icon {54 display: grid;55 width: 22px;56 height: 22px;57 flex: none;58 place-items: center;59 border: 0;60 background: transparent;61 color: var(--pin-color);62 font-size: 9px;63 font-weight: 900;64 text-transform: uppercase;65}6667.category-icon.has-source-icon::before,68.result-dot.has-source-icon::before,69#detail-dot.has-source-icon::before,70.pin.has-source-icon::after {71 display: block;72 background: var(--pin-icon) center / contain no-repeat;73 content: "";74 filter: var(--icon-outset);75}7677.category-icon.has-source-icon::before {78 width: 14px;79 height: 14px;80 filter: var(--icon-outset);81}8283.result-dot.has-source-icon,84#detail-dot.has-source-icon {85 border-radius: 0;86 background: transparent;87 box-shadow: none;88}8990.result-dot.has-source-icon::before {91 width: 16px;92 height: 16px;93}9495.category-name {96 overflow: hidden;97 font-size: 11px;98 font-weight: 600;99 text-overflow: ellipsis;100 white-space: nowrap;101}102103.category-count {104 color: #6f6a5e;105 font-size: 10px;106 font-variant-numeric: tabular-nums;107 text-align: right;108}109110/* A shape collection's icon cell is its disclosure: a chevron that turns111 when the feature index below is unfolded, beside a small glyph saying112 what kind of ground the collection is. */113.collection-expand {114 display: flex;115 width: 22px;116 height: 22px;117 align-items: center;118 justify-content: center;119 padding: 0;120 border: 0;121 border-radius: 3px;122 background: transparent;123 color: inherit;124 cursor: pointer;125}126127.collection-expand:hover {128 background: rgba(255, 255, 255, 0.06);129}130131.collection-expand:focus-visible {132 outline: 1px solid var(--accent);133 outline-offset: -1px;134}135136.collection-expand svg {137 fill: none;138 stroke: currentColor;139 stroke-linecap: round;140 stroke-linejoin: round;141}142143.collection-chevron {144 width: 8px;145 flex: none;146 stroke-width: 2.2;147 transition: transform 140ms ease;148}149150.category-row.is-expanded .collection-chevron {151 transform: rotate(90deg);152}153154.collection-kind {155 width: 11px;156 flex: none;157 stroke-width: 1.5;158}159160/* Ground reads as a rounded triangle, not a box: the join rounding only161 shows once the stroke is heavy enough to carry it. */162.collection-kind-area {163 stroke-width: 2.6;164}165166/* The reader's word over whether a collection speaks its names unasked.167 Revealed on rest like the isolate target beside it; lit while the168 effective policy is "always". */169.label-toggle {170 display: grid;171 justify-self: end;172 width: 20px;173 height: 20px;174 padding: 0;175 place-items: center;176 border: 0;177 border-radius: 3px;178 opacity: 0;179 background: none;180 color: var(--muted);181 cursor: pointer;182 transition: opacity 110ms ease;183}184185.category-row.is-hovered .label-toggle,186.label-toggle:focus-visible {187 opacity: 1;188}189190.label-toggle:hover {191 background: rgba(58, 165, 201, 0.14);192}193194.label-toggle[aria-pressed="true"] {195 color: var(--accent);196}197198.label-toggle svg {199 width: 12px;200 fill: none;201 stroke: currentColor;202 stroke-linecap: round;203 stroke-linejoin: round;204 stroke-width: 1.7;205}206