.ow-layer-node { margin: .25rem 0; border: 1px solid var(--shell-border, #27364a); border-radius: .45rem; padding: .2rem .45rem; }
.ow-layer-node summary { display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; cursor: pointer; font-weight: 650; }
.ow-layer-node summary button { margin-inline-start: auto; }
.ow-layer-children { padding: 0 .25rem .25rem .7rem; }
.ow-layer-row { display: flex; align-items: center; gap: .35rem; min-height: 2.75rem; }
.ow-layer-row .ow-layer { flex: 1; }
.ow-layer-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; }
.ow-layer-symbol { color: var(--shell-muted, #a9b7c9); font-size: .72rem; }
.ow-layer-show, .ow-layer-activate { min-height: 2.5rem; padding: .35rem .6rem; }
.ow-flat-controls { display: grid; gap: .35rem; margin: 0 0 .7rem; padding: .55rem; border: 1px solid var(--shell-border, #27364a); border-radius: .4rem; }
.ow-flat-controls-title { font-size: .78rem; font-weight: 700; color: var(--shell-muted, #a9b7c9); }
.ow-flat-controls button { min-height: 2.5rem; text-align: start; }
.ow-flat-controls button:disabled { opacity: .58; cursor: not-allowed; }

.ow-layer-node summary{flex-wrap:wrap}
.ow-layer-style{display:flex;align-items:center;gap:.25rem;margin-inline-start:auto;font-size:.58rem;font-weight:500}
.ow-layer-style label{display:inline-flex;align-items:center;gap:.16rem;white-space:nowrap}
.ow-layer-style input[type=color]{inline-size:1.35rem;block-size:1.35rem;padding:0;border:0;background:transparent}
.ow-layer-style select{max-inline-size:4.6rem;min-inline-size:0;font:inherit}
@media (width < 820px){.ow-layer-style{width:100%;margin-inline-start:0;justify-content:flex-end}}

.ow-layer-editor-tools { padding:.6rem; border:1px solid var(--shell-border,#627184); border-radius:.4rem; margin-bottom:.6rem; }
.ow-layer-editor-tools p { font-size:.75rem; line-height:1.4; margin:.25rem 0 .5rem; }
.ow-layer-add { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0; }
.ow-layer-add input { flex:1 1 8rem; min-width:0; }
.ow-layer-editor-tools button,.ow-layer-edit button,.ow-layer-edit input:not([type=checkbox]),.ow-layer-edit select { min-height:2.75rem; max-width:100%; }
.ow-layer-edit { flex:1 1 100%; font-size:.75rem; font-weight:400; }
.ow-layer-edit summary { min-height:2.75rem; font-weight:500; }
.ow-layer-edit-fields { display:grid; gap:.4rem; padding:.35rem; }
.ow-layer-edit-fields label { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.ow-layer-edit-fields label input:not([type=checkbox]),.ow-layer-edit-fields select { flex:1; min-width:0; }
.ow-layer-row { flex-wrap:wrap; padding-bottom:.35rem; border-bottom:1px solid var(--shell-border,#627184); }
.ow-layer-row > .ow-layer { min-width:8rem; }
.ow-layer-node .ow-layer-edit-fields { cursor:default; }
.ow-layer-style { font-size:.72rem; flex-wrap:wrap; }
.ow-layer-style input[type=color] { inline-size:2.75rem; block-size:2.75rem; }
.ow-layer-style select { min-block-size:2.75rem; max-inline-size:7rem; }

/* Intrinsic input/option widths must not enlarge the narrow Layers panel. */
.ow-layer-node,.ow-layer-edit,.ow-layer-edit-fields,.ow-layer-children,.ow-layer-add { min-inline-size:0; max-inline-size:100%; box-sizing:border-box; }
.ow-layer-edit-fields { grid-template-columns:minmax(0,1fr); }
.ow-layer-edit-fields label { display:grid; grid-template-columns:minmax(0,1fr); min-inline-size:0; max-inline-size:100%; }
.ow-layer-edit-fields label:has(input[type=checkbox]) { display:flex; }
.ow-layer-edit-fields input:not([type=checkbox]),.ow-layer-edit-fields select,.ow-layer-add input { inline-size:100%; min-inline-size:0; max-inline-size:100%; box-sizing:border-box; }
.ow-layer-row > .ow-layer { min-inline-size:0; flex:1 1 100%; }
.ow-layer-node summary > span,.ow-layer-id { min-inline-size:0; overflow-wrap:anywhere; }

/* The everyday tree is a compact map control. Destructive or structural work
 * stays behind Edit, so a long facility catalogue does not turn the Context
 * drawer into a wall of color inputs and literal symbol names. */
.ow-layers .ow-layer-node{margin:.12rem 0;padding:.08rem .35rem}
.ow-layers .ow-layer-node summary,.ow-layers .ow-layer-row{min-height:2.1rem}
.ow-layers .ow-layer-row{flex-wrap:nowrap;gap:.28rem;padding:.05rem 0;border-bottom:0}
.ow-layers .ow-layer-row>.ow-layer{flex:1 1 auto;min-inline-size:0}
.ow-layers .ow-layer-row>.ow-layer-edit{flex:0 0 auto;margin:0}
.ow-layers .ow-layer-row>.ow-layer-edit[open]{flex:1 0 100%}
.ow-layers .ow-layer-edit summary{min-height:2rem;padding:.18rem .35rem;border:1px solid var(--shell-border,#627184);border-radius:.3rem}
.ow-layers .ow-layer-edit-fields{margin-top:.25rem}
.ow-layers .ow-layer-symbol{inline-size:.52rem;block-size:.52rem;overflow:hidden}
.ow-layer-feature-set{margin:.45rem 0;font-size:.75rem}
.ow-layer-feature-set summary{cursor:pointer;font-weight:650}
.ow-layer-membership-warning{color:var(--shell-danger,#b42318);font-size:.75rem}
/* A feature-set name is user content. Keep it with its checkbox and count; the
 * activation and editor controls take a compact second row instead of squeezing
 * a long label into character-wide columns. */
.ow-layers .ow-layer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.22rem .35rem}
.ow-layers .ow-layer-row>.ow-layer{grid-column:1/-1;min-inline-size:0;width:100%}
.ow-layers .ow-layer-row>.ow-layer-activate{grid-column:1;justify-self:start}
.ow-layers .ow-layer-row>.ow-layer-edit{grid-column:2;grid-row:2;justify-self:end;min-inline-size:0}
.ow-layers .ow-layer-row>.ow-layer-edit[open]{grid-column:1/-1;grid-row:auto;justify-self:stretch}