/* Control › 위험 경로 (security-paths.js, T23-36). The list is the shared table, chips and finder (lx-); only what is
   this screen's own is here: a filter's chips line, the filter row's wrapping and selects, the scenario tags under a
   cause and the cells' second lines. */

/* A filter (원인별, 상태, 구성/실행, 기간): its name, then a chip a choice, wrapping. */
.rpl .rpl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rpl .rpl-chips > .lx-lbl{margin-right:4px}

/* The finder on one line, and under it the narrowing segments and selects, wrapping on a narrow window. */
.rpl .rpl-find{display:flex;align-items:center;gap:8px;max-width:640px}
.rpl .rpl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.rpl .rpl-pick select.lx-in{height:32px;max-width:260px}

/* A cell's second line (a stage, a time, the asset) under its first; a cause's scenarios as small tags. */
.rpl .rpl-table .lx-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.rpl .rpl-table .lx-cell > .lx-sub{font-size:12px}
.rpl .rpl-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}

@media (max-width:640px){
  .rpl .rpl-find{max-width:none}
  .rpl .rpl-pick select.lx-in{max-width:100%}
}

/* A group's targets in its panel, one a line: the graph's name, then its ID small. */
[data-rpl-panel] .rpl-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}

/* The list is one grid its rows share (UX r1 g3 F2): a column's heading stands over its values in every row, the
   columns keep their least widths and, on a window narrower than all of them, the list scrolls sideways inside itself
   -- no cell is drawn over its neighbour and 자세히 is never cut at the page's edge. A cell's line that cuts (.lx-ell)
   cuts at its cell's edge; its whole words are its title (names only, never an ID) and the panel's. */
.rpl .rpl-table{display:grid;grid-template-columns:var(--lx-cols);column-gap:12px;overflow-x:auto}
.rpl .rpl-table>.lx-tr{grid-column:1/-1;grid-template-columns:subgrid;column-gap:12px}
.rpl .rpl-table>.lx-tr:focus-visible{outline-offset:-2px}
.rpl .rpl-table .lx-cell>.lx-ell{max-width:100%}
/* One toolbar: the cause pills and the finder on a row (wrapping when narrow); 상세 조건 and its notes under them. */
.rpl .rpl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4)}
.rpl .rpl-toolbar>.rpl-find{flex:1 1 320px}
.rpl .rpl-toolbar>:is(details,[data-rpl-unknown],.lx-note){flex-basis:100%}