1.layer-header {2 display: grid;3 align-items: center;4 grid-template-columns: minmax(0, 1fr) 22px 46px;5 gap: 8px;6 padding: 8px 18px 8px 12px;7}89/* Named rather than left to fall where the row's children happen to put it.10 Zones has nothing to solo and so no middle control, and its switch was11 sitting in the gutter the others keep for one -- a column short of every12 switch below it. */13.layer-header .layer-switch {14 grid-column: 3;15}1617.layer-title {18 display: flex;19 min-width: 0;20 flex: 1;21 align-items: center;22 gap: 7px;23 padding: 4px 0;24 border: 0;25 background: transparent;26 color: #c8c2b4;27 font-size: 10px;28 font-weight: 800;29 letter-spacing: 0.12em;30 text-align: left;31 text-transform: uppercase;32 cursor: pointer;33}3435.layer-title:hover {36 color: var(--text);37}3839.layer-title > span:nth-child(2) {40 overflow: hidden;41 text-overflow: ellipsis;42 white-space: nowrap;43}4445.layer-chevron {46 display: grid;47 width: 13px;48 height: 13px;49 flex: none;50 place-items: center;51 color: #6b665a;52 transform: rotate(90deg);53 transition: transform 140ms ease;54}5556.layer-section.is-collapsed .layer-chevron {57 transform: rotate(0deg);58}5960.layer-chevron svg {61 width: 12px;62 fill: none;63 stroke: currentColor;64 stroke-linecap: round;65 stroke-linejoin: round;66 stroke-width: 2.4;67}6869.layer-count {70 color: var(--muted);71 font-size: 9px;72 font-weight: 600;73 font-variant-numeric: tabular-nums;74 letter-spacing: 0;75}7677/* Overlaid on the count so a hovered pill never changes size: these wrap, and78 a row that grew would push the one under the cursor out from under it. */79/* An action in the row's own gutter, not a control laid over the count. The80 column is reserved whether or not it is showing, so a row never changes81 shape under the cursor. */82.only-button {83 display: grid;84 justify-self: end;85 width: 20px;86 height: 20px;87 padding: 0;88 place-items: center;89 border: 0;90 border-radius: 3px;91 opacity: 0;92 background: none;93 color: var(--accent);94 cursor: pointer;95 transition: opacity 110ms ease;96}9798/* Driven by the pointer's position rather than by :hover -- see markHoveredRow.99 Keyboard focus is unconditional. */100.category-row.is-hovered .only-button,101.layer-header.is-hovered .only-button,102.only-button:focus-visible {103 opacity: 1;104}105106.only-button:hover {107 background: rgba(58, 165, 201, 0.14);108}109