/* 찾기 (리디자인 명세 8.4, track RM1): the screen's own layout. The parts are RF1's (redesign-rf1.css, lx-*); this
   sheet places them -- the head (the box, the condition line), 쿼리 보기 over the results, the rail, the results and
   the forms in the right panel -- and draws what is the screen's alone (rm1-*). Colours are the --ds-* tokens; a
   state's colour on text is its -text token. The last block takes back the old sheets' rules that reach this screen
   by its root's id (screens-agents.css, search-ui.css) until those sheets go. */

/* -- the screen -- */
.rm1-search{display:flex;flex-direction:column;min-width:0;word-break:keep-all}
.rm1-search [hidden]{display:none!important}
.rm1-i-s{width:12px;height:12px}
.rm1-linkbtn{padding:0;border:0;background:none;font:inherit;font-weight:500;cursor:pointer;text-align:left}
.rm1-linkbtn:focus-visible,.rm1-who:focus-visible,.rm1-name:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px;border-radius:4px}

/* -- the head: the box, then the condition line -- */
.rm1-head{display:flex;flex-direction:column;gap:12px;padding:20px 28px;border-bottom:1px solid var(--ds-line)}
.rm1-find{gap:8px;flex-wrap:nowrap}
.rm1-find-go{height:44px;padding:0 18px}
.rm1-elsewhere{display:flex;flex-wrap:wrap;gap:4px 14px;margin:-6px 0 0}
.rm1-elsewhere:empty{display:none}
.rm1-conds{gap:8px 10px}
.rm1-conds .lx-seg .lx-n{margin-left:2px}
.rm1-chips{display:contents}
.rm1-chip{max-width:320px}
.rm1-chip>.lx-ell{min-width:0}
.rm1-said{display:inline-flex;align-items:center;gap:6px;margin:0}
.rm1-scope{display:inline-flex;align-items:center;gap:8px}
.rm1-select{max-width:260px;font:inherit;font-weight:500;appearance:auto;cursor:pointer}
.rm1-scope-find{position:relative;margin:0}
.rm1-scope-box{width:190px}
.rm1-scope-list{display:none;position:absolute;z-index:6;left:0;top:calc(100% + 4px);flex-direction:column;width:320px;max-width:80vw;max-height:320px;overflow:auto;padding:6px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
.rm1-scope-find:focus-within .rm1-scope-list{display:flex}
.rm1-scope-option{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;padding:6px 8px;border:0;border-radius:var(--ds-radius-s);background:none;color:var(--ds-text);font:inherit;text-align:left;cursor:pointer}
.rm1-scope-option:is(:hover,:focus-visible,[aria-selected="true"]){background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.rm1-scope-option>span{max-width:100%}
.rm1-scope-head{padding:4px 8px}
.rm1-scope-said:empty{display:none}
.rm1-scope-note{flex-basis:100%;margin:0}

/* 조건 추가: a small picker that opens where it is pressed */
.rm1-add{position:relative;display:inline-flex}
.rm1-pop{position:absolute;z-index:6;left:0;top:calc(100% + 6px);display:flex;flex-direction:column;gap:10px;width:320px;max-width:86vw;margin:0;padding:14px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
.rm1-pop .rm1-select,.rm1-pop .rm1-input{width:100%;max-width:none}
.rm1-pop[data-edge="end"]{left:auto;right:0}
/* On a phone the picker is as wide as the condition line, whichever side its button stands on. */
@media (max-width:600px){.rm1-head{position:relative}.rm1-add{position:static}.rm1-pop,.rm1-pop[data-edge="end"]{left:16px;right:16px;top:auto;width:auto;max-width:none;margin-top:40px}}
.rm1-add-value{display:flex;flex-direction:column;gap:6px}

/* -- 쿼리 보기: the editor and the typed query, the screen's whole width over the results -- */
.rm1-query{display:flex;flex-direction:column;gap:12px;padding:16px 28px;border-bottom:1px solid var(--ds-line);background:var(--ds-surface-2)}
.rm1-editor{display:flex;flex-direction:column;gap:8px}
.rm1-group,.rm1-relation{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface)}
.rm1-root{padding:0;border:0;background:none}
.rm1-group .rm1-group,.rm1-group .rm1-relation,.rm1-step .rm1-group{margin-left:12px}
.rm1-leaf,.rm1-step{gap:8px;padding:6px 8px;border-radius:var(--ds-radius-s);background:var(--ds-surface)}
.rm1-root>.rm1-leaf{border:1px solid var(--ds-line)}
.rm1-steps{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.rm1-hop{align-self:center;color:var(--ds-text-3)}
.rm1-input{width:auto;min-width:140px;max-width:260px;height:34px}
.rm1-num{width:76px;min-width:0}
.rm1-multi{width:auto;min-width:160px;height:auto;padding:4px}
/* select.lx-in (34px, its chevron) outweighs .rm1-multi alone: a multiple select is its rows' own height (174 rm1 CSS2) */
select.lx-in.rm1-multi{height:auto;padding:4px;background-image:none}
/* 조건 추가 is the step to take: the dashed chip in the accent, not the grey of a chip at rest (174 rm1 CSS2) */
.rm1-add .lx-chip-add{border-color:var(--ds-accent);color:var(--ds-accent-text);font-weight:600}
.rm1-not{font-size:13px;color:var(--ds-text-2)}
.rm1-text{display:flex;flex-direction:column;gap:8px}
.rm1-textarea{height:auto;min-height:72px;padding:8px 10px;line-height:1.5;resize:vertical}
.rm1-examples{display:flex;flex-direction:column;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.rm1-examples code{overflow-wrap:anywhere}
.rm1-help>summary,.rm1-fold-line>summary,.rm1-more>summary{display:inline-block;list-style:none;cursor:pointer}
.rm1-help>summary::-webkit-details-marker,.rm1-fold-line>summary::-webkit-details-marker,.rm1-more>summary::-webkit-details-marker,.rm1-facet>summary::-webkit-details-marker,.rm1-fold>summary::-webkit-details-marker{display:none}

/* -- the rail: what narrows the results -- */
.rm1-split{align-items:stretch;min-width:0;flex-wrap:nowrap}
.rm1-split>.rm1-page{flex:1 1 0}
/* A panel open beside the screen takes the rail's room where the three would not fit (under 1430px, a wide panel
   under 1440px); wider, the rail stays and a filter is ticked with the panel open. */
/* (F13 10-15: at 1280-1429px the panel stood over the page's right edge and covered 찾기 저장 and Control 만들기 -- the
   results head's buttons, their centre hit the panel. The rail leaves with a panel open up to 1429px, as under 1280px:
   the results keep 560px or more beside the 348px panel (명세 6.6) and the panel covers nothing.) */
@media (max-width:1429px){.lx-split:has(>.lx-aside) .rm1-rail{display:none}}
/* (A roomy window under 2093px: 1920px at the scaled page, the rail (253px) and a 400px panel left 856px of results and
   the 소유자, 기기, 모델 and Gateway columns left the row (F13 b164 actual: rm1-page 856 under the 1000px mark below).
   The results are the window less the menu 272, the panel 400 and the page's 128 -- a window of 2093px and over has
   1040px with the rail, a window of 1840px and over has it without. So the rail gives its room to the results up to
   2092px; a window under 1840px draws the short list below as designed, the row's words under the name.) */
@media (max-width:2092px){.lx-split[data-lx-roomy]:has(>.lx-aside) .rm1-rail{display:none}}
@media (max-width:1439px){.lx-split:has(>.lx-aside-w) .rm1-rail{display:none}}
/* (The rail's groups stand 20px apart as the part has them: preview .rail{gap:20px}; PC3 10-12.) */
.rm1-rail-h{gap:6px;min-height:28px}
.rm1-fold{display:flex;flex-direction:column;gap:16px}
.rm1-fold>summary{display:none;list-style:none;cursor:pointer}
.rm1-facet{display:flex;flex-direction:column;gap:2px}
.rm1-facet+.rm1-facet,.rm1-facet+.rm1-more,.rm1-more>.rm1-facet{margin-top:20px}
.rm1-facet>summary{list-style:none;margin-bottom:4px;cursor:pointer}
.rm1-facet>summary::after{content:"";width:6px;height:6px;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.6}
.rm1-facet[open]>summary::after{transform:rotate(45deg)}
.rm1-facet>summary>span:first-child{min-width:0}
/* A value no row holds is still pressed to: its words the quiet grey that reads 4.5:1, not the faint one (UR32-1). */
.rm1-facet .lx-fc:has(.lx-n[data-zero]){color:var(--ds-text-3)}
.rm1-facet .lx-n[data-wait]:empty::after{content:"…";color:var(--ds-muted)}
/* UM1164/006: a target button's count of 0 is the quiet grey (ds-text-3) whether the button is chosen or not, as the facets' */
[data-act="target"] .lx-n[data-zero]{color:var(--ds-text-3)}
.rm1-more{display:flex;flex-direction:column;gap:16px}
.rm1-more>summary{font-size:13px}
/* A line that folds a little more away is the design's small link (13px / 500 / 19.5px). */
.rm1-fold-line>summary{font-size:13px;line-height:1.5}
.rm1-more[open]>summary{margin-bottom:0}
.rm1-free{display:flex;gap:6px;margin:6px 0 0}
.rm1-free .lx-in{min-width:0;height:30px;font-size:13px}
.rm1-seen{display:flex;flex-direction:column;gap:8px;margin:0}
.rm1-unjudged,.rm1-names-more{padding:4px 0 0 24px}
.rm1-names-more.ui-skeleton{display:block;margin-left:24px}

/* -- the results -- */
.rm1-page{gap:14px;min-width:0;container:rm1-page/inline-size}
/* Beside the rail and an open panel the rows have a narrow column: each row a card, as on a phone. */
@container rm1-page (max-width:460px){
  .rm1-table-wrap>[data-search-results]{display:block}
  .rm1-table-wrap>[data-search-results]>thead{display:none}
  .rm1-table-wrap>[data-search-results]>tbody{display:flex;flex-direction:column;gap:10px}
  .rm1-table-wrap>[data-search-results]>tbody>tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 8px;padding:12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
  .rm1-table-wrap>[data-search-results]>tbody>tr>td{height:auto;max-width:none;padding:0;border:0}
  .rm1-table-wrap>[data-search-results]>tbody>tr>td:is([data-row-who],[data-col="result"],[data-col="reasons"],[data-col="conditions"]){grid-column:1/-1}
  .rm1-table-wrap>[data-search-results]>tbody>tr>td[data-label]::before{content:attr(data-label);display:block;color:var(--ds-text-3);font-size:13px}
}
/* 확인 필요 사유 and 맞은 조건 both beside a panel (a 1440px window: the name had 130px, 결과 51px and 상태 63px,
   narrower than their words, a row up to 118px high): each row a card there too. */
@container rm1-page (max-width:620px){
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"]){display:block}
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"])>thead{display:none}
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"])>tbody{display:flex;flex-direction:column;gap:10px}
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"])>tbody>tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 8px;padding:12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"])>tbody>tr>td{height:auto;max-width:none;padding:0;border:0}
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"])>tbody>tr>td:is([data-row-who],[data-col="result"],[data-col="reasons"],[data-col="conditions"]){grid-column:1/-1}
  .rm1-table-wrap>[data-search-results]:has(th[data-col="reasons"]):has(th[data-col="conditions"])>tbody>tr>td[data-label]::before{content:attr(data-label);display:block;color:var(--ds-text-3);font-size:13px}
}
.rm1-page>#su-results{display:flex;flex-direction:column;gap:14px;min-width:0}
.rm1-summary{display:flex;flex-direction:column;gap:14px;min-width:0}
.rm1-reshead{gap:8px 12px}
.rm1-reshead .lx-lede{margin:0}
.rm1-reshead-acts{flex-wrap:nowrap;gap:8px;margin-left:auto}
.rm1-asof{margin:-8px 0 0}
/* Beside the rail in a window under 1440px the head's line does not hold the count, the views and the two writes
   (a 1280px window: 758px for about 820px; PC eye 10-13, 찾기 저장 and Control 만들기 alone on a line of their own
   at its right). There the count and what it is of keep the first line, and the views start the second with the
   writes at its end -- the order they are written and reached by the keys in. A window of 1440px is as it was. */
@media (max-width:1439px){
  @container rm1-page (min-width:560px) and (max-width:839px){
    .rm1-summary>.rm1-reshead>.lx-lbl{flex:1 1 50%}
  }
}
.rm1-eval{display:flex;flex-direction:column;gap:10px}
.rm1-totals{grid-template-columns:132px minmax(0,1fr);margin:0}
.rm1-totals dd,.rm1-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.rm1-totals dd[data-some]{color:var(--ds-unknown-text, var(--ds-text))}
.rm1-reasons{gap:6px 8px}
.rm1-table-wrap{min-width:0;overflow-x:auto}
.rm1-table{width:100%;border-collapse:collapse;table-layout:auto}
.rm1-table th{padding:8px 6px;border-bottom:1px solid var(--ds-line);background:transparent;color:var(--ds-text-3);font-size:13px;font-weight:500;text-align:left;white-space:nowrap}
.rm1-table td{height:46px;padding:9px 6px;border-bottom:1px solid var(--ds-line);vertical-align:middle;min-width:0}
.rm1-table[data-saved-searches]{table-layout:fixed}
.rm1-table[data-saved-searches] :is(th,td):nth-child(2){width:96px}
.rm1-table[data-saved-searches] :is(th,td):nth-child(3){width:150px}
.rm1-table[data-saved-searches] :is(th,td):nth-child(4){width:64px}
.rm1-table[data-saved-searches] :is(th,td):nth-child(5){width:150px}
.rm1-table[data-saved-searches] :is(th,td)[data-col="delete"]{width:72px}
.rm1-table[data-saved-searches] td:first-child .lx-nm{display:block;max-width:100%}
.rm1-table tbody tr:last-child td{border-bottom:0}
.rm1-table tbody tr[data-act]{cursor:pointer}
.rm1-table tbody tr[aria-selected="true"]{background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
.rm1-table :is(th,td)[data-col="pick"]{width:30px}
.rm1-table :is(th,td)[data-col="detail"]{width:36px;text-align:right}
.rm1-table td[data-col="target"]{max-width:280px}
.rm1-table td[data-row-who]{max-width:200px}
.rm1-table td[data-col="conditions"]{max-width:360px}
.rm1-pick{width:16px;height:16px;margin:0;accent-color:var(--ds-accent);vertical-align:middle}
.rm1-name,.rm1-who{display:block;max-width:100%;padding:0;border:0;background:none;color:var(--ds-text);font:inherit;text-align:left;cursor:pointer}
.rm1-name{font-weight:600}
.rm1-who{font-weight:500}
/* In a row only the name is heavy: whose it is and where it runs are the words' own weight (preview: .nm 600, the
   cells beside it 400). */
.rm1-table td .rm1-who{font-weight:400}
.rm1-name:hover,.rm1-who:hover{text-decoration:underline}
.rm1-declared{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rm1-declared:empty{display:none}
.rm1-cond{height:auto;min-height:22px;max-width:100%;padding:2px 8px;white-space:normal;overflow-wrap:anywhere}
.rm1-conds-held{display:flex;flex-wrap:wrap;gap:4px}
.rm1-evidence{margin-top:4px;overflow-wrap:anywhere}
.rm1-row-open{width:28px;padding:0}
/* A row is read by its name and its state first; what stands beside them follows in the words' own colour (PC eye
   10-13, 명세 6.6: a cell that narrows ends in …, it does not take more lines). The model's name keeps one line, its
   whole in the title; 외 N and a person's or a device's connection counts are presses on the grey line under the
   value, in that line's colour until they are pointed at -- a small mark says 외 N opens. */
.rm1-model{display:block;max-width:100%}
.rm1-table td .rm1-linkbtn{color:var(--ds-text-2);font-size:13px;font-weight:400}
.rm1-table td .rm1-linkbtn:is(:hover,:focus-visible){color:var(--ds-accent-text);text-decoration:underline}
.rm1-table td .rm1-linkbtn[data-act="row-models"]{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.rm1-table td .rm1-linkbtn[data-act="row-models"]::after{content:"";width:5px;height:5px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.rm1-table td .rm1-linkbtn[data-act="row-models"][aria-expanded="true"]::after{margin-top:2px;transform:rotate(-135deg)}
/* A row keeps one height (명세 8.4-7, 6.6): a cell is its value on one line and at most one grey line under it. A
   device's name does not take a second line -- it ends in …, its whole in the title --, an agent's 부서 is the grey
   line under its 소유자, how many more models is the grey line under the first one's name and Gateway's basis or
   reason the one under its state. 외 N of a person or a device stands on the name's own line. An agent's row whose
   cells all hold one line (no 부서, one model, a Gateway state not judged) stands as high as the others: the two
   lines' height, 59px with the cell's padding (uiw1 at 1440 and 1280: 50 of 50 rows 59.5px with their line). */
.rm1-table:has(th[data-col="who-model"]) td{height:59px}
.rm1-table td .rm1-who:has(+.lx-lbl){display:inline-block;max-width:calc(100% - 44px);vertical-align:bottom}
.rm1-table td .rm1-linkbtn[data-act="row-models"]:not(:hover,:focus-visible){color:var(--ds-text-3)}
.rm1-table td[data-row-who="model"]>.lx-lbl{display:block}
.rm1-model-names{display:flex;flex-direction:column;gap:2px;margin-top:2px;color:var(--ds-text-2);font-size:13px}
.rm1-model-names>[data-row-model]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm1-wait{display:inline-grid;width:64px;vertical-align:middle}
.rm1-wait .ui-skeleton-line{width:100%;height:10px}
.rm1-frame-tail{justify-content:center;margin-top:12px}

/* the start screen and the searches kept */
.rm1-start{display:flex;flex-direction:column;gap:20px}
.rm1-start-lists{gap:28px}
.rm1-li-btn{width:100%;border-width:0 0 1px;border-style:solid;border-color:var(--ds-line);background:none;font:inherit;text-align:left;cursor:pointer}
.rm1-li-btn:last-child{border-bottom:0}
.rm1-li-btn:hover{text-decoration:underline;text-underline-offset:3px}
.rm1-saved-find{width:260px;max-width:100%}
.rm1-rowlink{display:inline-block;max-width:100%}
.rm1-rowlink:hover{text-decoration:underline;text-underline-offset:3px}

/* a search asked of one person's usage: the purpose is chosen where the results would be */
.rm1-purpose{display:flex;flex-direction:column;gap:12px;max-width:560px;padding:20px;border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
.rm1-purpose h2,.rm1-purpose p{margin:0}
.rm1-purpose-form{align-items:flex-end;margin:0}

/* a condition handed over to be edited (a framework template's) */
.rm1-handed{margin:16px 28px 0;padding:10px 14px;border-radius:10px;background:var(--ds-info-soft);color:var(--ds-text)}

/* -- the right panel: a row's detail, 찾기 저장, Control 만들기 -- */
/* The preview's 찾기 runs to the page's edges (its head, the line under it and the rail's line): the frame's page
   padding (main.lx-page: 24px 28px 40px, 20px 16px 32px to 900px) is taken back here, and the head, the rail and the
   results keep the parts' own paddings inside it. */
.rm1-view{min-width:0;margin:-24px -28px -40px}
@media(max-width:900px){.rm1-view{margin:-20px -16px -32px}}
/* (The results' own padding is said here, not left to .lx-page: inside the frame a screen's .lx-page is to have none.) */
.rm1-view .rm1-split>.rm1-page{padding:24px 28px 40px}
@media(max-width:900px){.rm1-view .rm1-split>.rm1-page{padding:20px 16px 32px}}
.rm1-aside-box,.rm1-detail,.rm1-panel,.rm1-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.rm1-detail [hidden],.rm1-aside-box [hidden]{display:none!important}
.rm1-detail p,.rm1-panel p,.rm1-detail h2,.rm1-panel h2,.rm1-detail h3{margin:0}
.rm1-kv{margin:0}
.rm1-status{gap:8px}
.rm1-held,.rm1-rd-list,.rm1-preview-list,.rm1-rd-why>ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.rm1-held>li{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rm1-actual{font-size:13px}
/* A reason's line, not the names folded inside it (a hook's events stay one line each). */
.rm1-rd-why>ul>li{padding:8px 0;border-bottom:1px solid var(--ds-line)}
.rm1-rd-why>ul>li:last-child{border-bottom:0}
.rm1-rd-tied{display:flex;flex-direction:column;gap:8px}
.rm1-rd-value{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;overflow-wrap:anywhere}
.rm1-rd-rels{display:flex;flex-direction:column;gap:6px;margin:0}
.rm1-rd-rel{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px}
.rm1-rd-rel-name{font-weight:600}
.rm1-rd-terms,.rm1-rd-legend{display:flex;flex-wrap:wrap;gap:2px 10px}
.rm1-rd-evidence{font-size:13px;overflow-wrap:anywhere}
.rm1-rd-id p{margin:6px 0 0;overflow-wrap:anywhere}
.rm1-aside-foot{justify-content:flex-end;padding-top:4px}
.rm1-form>.rm1-aside-foot{position:sticky;bottom:0;z-index:1;margin-top:-4px;padding:12px 0;border-top:1px solid var(--ds-line);background:var(--ds-surface)}
.rm1-steps3{margin:0;padding:0;list-style:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.rm1-steps3 .lx-step{flex-direction:row;align-items:center;gap:8px;padding:8px 12px}
.rm1-steps3 .lx-step[aria-current]{background:var(--ds-accent-soft);color:var(--ds-accent-text)}
.rm1-query-said{overflow-wrap:anywhere}
.rm1-query-print{margin:6px 0 0;overflow-wrap:anywhere}
.rm1-choices2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rm1-form .rm1-select{max-width:none;width:100%}

/* -- narrower screens: the rail folds under one line over the results (1180px, where it stands over them), the
   head's parts wrap, and on a phone each row stands as a card with its cells under their column's head -- */
@media(max-width:1180px){
  .rm1-split{flex-wrap:wrap}
  .rm1-split>.rm1-page{flex-basis:100%}
  .rm1-rail{flex-basis:100%;border-right:0;border-bottom:1px solid var(--ds-line);padding-bottom:16px}
  .rm1-fold>summary{display:flex}
  .rm1-fold:not([open])>:not(summary){display:none}
}
@media(max-width:900px){
  .rm1-head,.rm1-query{padding-left:16px;padding-right:16px}
  .rm1-handed{margin-left:16px;margin-right:16px}
  .rm1-find{flex-wrap:wrap}
  .rm1-choices2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .rm1-table-wrap>[data-search-results]{display:block}
  .rm1-table-wrap>[data-search-results]>thead{display:none}
  .rm1-table-wrap>[data-search-results]>tbody{display:flex;flex-direction:column;gap:10px}
  .rm1-table-wrap>[data-search-results]>tbody>tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 8px;padding:12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
  .rm1-table-wrap>[data-search-results]>tbody>tr>td{height:auto;max-width:none;padding:0;border:0}
  .rm1-table-wrap>[data-search-results]>tbody>tr>td:is([data-row-who],[data-col="result"],[data-col="reasons"],[data-col="conditions"]){grid-column:1/-1}
  .rm1-table-wrap>[data-search-results]>tbody>tr>td[data-label]::before{content:attr(data-label);display:block;color:var(--ds-text-3);font-size:13px}
}

/* -- the old sheets' rules that reach this screen by its id (screens-agents.css #agent-search-root [data-search-results]
   …, td[data-row-who] …): taken back here, at the same weight and later in the page, until RF1 removes those sheets -- */
/* The columns keep their place while the rows are read and after (INT results-no-layout-shift-after-load): the
   widths are the heads', never the cells' (a waiting mark and the value it becomes are not the same width). The id
   is said twice to stand over the old sheet's :has() widths for this table (screens-agents.css). What a
   row is of takes a set share; the name, 맞은 조건 and 확인 필요 사유 share what is left. */
#agent-search-root [data-search-results]{table-layout:fixed}
#agent-search-root#agent-search-root [data-search-results] th:is([data-col="target"],[data-col="conditions"],[data-col="reasons"]){width:auto;min-width:0}
#agent-search-root#agent-search-root [data-search-results] th[data-col^="who-"]{width:10%;min-width:0}
/* (PC eye 10-13: a device's name and a Gateway state's basis were cut in nearly every row while the owner and the
   state stood in room they did not use. The state takes its own words' width -- 관리됨, 조치 중, 미관리, 확인 필요, the
   same at every width --, and the device and Gateway what it left. The 소유자 holds an agent's 부서 on the line under
   the name (명세 8.4-7), 12%; a person's own 부서 is still a column, 12%. The 기기's name keeps one line and takes
   20% (uiw1 at 1440: at 156px every one of 44 names ended in …, a person's name and unit used 80 of 129px).) */
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-person"]{width:12%}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-unit"]{width:12%}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-device"]{width:20%}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-model"]{width:12%}
/* (명세 5절: results wider than a 1440px window's give the width to the column that is cut first. From 1040px of
   results (the table's own width: a 1680px window's is 1041px) an agent's 모델 takes 20% and the name what is left,
   where the row holds no 결과; PC3 10-13: a model's name cut at 152 of 195px beside a name using 164 of 401px. Under
   1080px the name is left too little beside a 기기 of 20% -- uiw1 10-13 at 1680: the name cut in 9 rows at 159 of
   170px, the 기기 using 160 of 208px -- so there the 기기 takes 17.5% and the name its 2.5%; from 1080px (a 1920px
   window's 1140px) the 기기 is 20% as before.) */
@container rm1-page (min-width:1040px){#agent-search-root#agent-search-root [data-search-results]:not(:has(th[data-col="result"])) th[data-col="who-model"]{width:20%}}
@container rm1-page (min-width:1040px) and (max-width:1079px){#agent-search-root#agent-search-root [data-search-results]:not(:has(th[data-col="result"])) th[data-col="who-device"]{width:17.5%}}
/* (looks-broken 500: under 1040px -- a 1440px window beside the rail 974px, with a row's panel open 600px -- 12% left a
   model 117 and 72px, every name cut to 'claud…'. 160px holds claude-sonnet-4-5 (133px) whole at both, the name keeps
   656 and 282px and the row its 79px; from 180px the row grows to 99px with the panel open. A dated id longer than
   that ends in … with its whole name in the title.) */
@container rm1-page (max-width:1039px){#agent-search-root#agent-search-root [data-search-results]>thead th[data-col="who-model"]{width:160px}}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-gateway"]{width:16%}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-managed"]{width:92px}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-agents"]{width:26%}
#agent-search-root#agent-search-root [data-search-results] th[data-col="who-devices"]{width:7%}
/* (결과 is a state's words too -- 맞음, 확인 필요, 맞지 않음: at 9% of a 1280px window's results 확인 필요 ran into the
   next column.) */
#agent-search-root#agent-search-root [data-search-results] th[data-col="result"]{width:92px;min-width:0}
#agent-search-root#agent-search-root [data-search-results] th[data-col="pick"]{width:30px}
#agent-search-root#agent-search-root [data-search-results] th[data-col="detail"]{width:36px}
#agent-search-root [data-search-results] th{overflow:visible;text-overflow:clip}
#agent-search-root [data-search-results] td{overflow-wrap:anywhere}
/* How many of a person's or a device's agents are connected: each count whole on its line, the dot at the head of
   the next one, never left ending a line. */
#agent-search-root [data-agent-connections]>*{display:inline-block;white-space:nowrap}
#agent-search-root [data-agent-connections]>*+*::before{content:"· ";color:var(--ds-text-3)}
/* The words of the columns that left a row: each whole on its line, the dot at the head of the next one. */
.rm1-table .lx-dropsum>span{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.rm1-table .lx-dropsum>span+span::before{content:"· "}
/* An agent's row has five columns of whose it is (its 부서 is the line under the 소유자: 명세 8.4-7), and 전체 adds
   결과 and 확인 필요 사유. Where the name would be left too little a column leaves the row first and what it said
   stays on the name's grey line (명세 6.6: a value that leaves a row does not go away): the 기기 beside 결과 under
   900px of results beside the rail (a 1280px window), and beside 결과 and 맞은 조건 under 1250px (a 1440px window).
   Beside 확인 필요 사유 or 맞은 조건 the old sheet takes 모델 and Gateway out of the row under 1700px
   (screens-agents.css) and said them nowhere: the line says them now. The line is one line there, ended in …, a dot
   between its values -- the dot before the first is drawn outside the line, so whichever value is first has none and a
   dash is not said. Beside a panel and under 1100px every column leaves as before and the line says each, a value
   whole on its line. */
@media (min-width:1100px){
  @container rm1-page (max-width:1250px){
    .rm1-table:has(th[data-col="who-model"]):has(th[data-col="result"]):has(th[data-col="conditions"]) :is(th[data-col="who-device"],td[data-row-who="device"]){display:none}
  }
  @container rm1-page (max-width:900px){
    .rm1-table:has(th[data-col="who-model"]):has(th[data-col="result"]) :is(th[data-col="who-device"],td[data-row-who="device"]){display:none}
    #agent-search-root#agent-search-root [data-search-results] th[data-col="who-gateway"]{width:20%}
  }
  .rm1-table:has(th[data-col="who-model"]) .lx-dropsum{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-indent:-10px}
  .rm1-table:has(th[data-col="who-model"]) .lx-dropsum>span{display:none}
  .rm1-table:has(th[data-col="who-model"]) .lx-dropsum>span::before,.rm1-table:has(th[data-col="who-model"]) .lx-dropsum>span+span::before{content:"·";display:inline-block;width:10px;text-align:center;text-indent:0}
  @media (max-width:1699px){
    .rm1-table:has(th[data-col="who-model"]):has(th:is([data-col="reasons"],[data-col="conditions"])) .lx-dropsum{display:block}
    .rm1-table:has(th[data-col="who-model"]):has(th:is([data-col="reasons"],[data-col="conditions"])) .lx-dropsum>span:is([data-drop="model"],[data-drop="gateway"]):not([data-drop-none]){display:inline}
  }
  @container rm1-page (max-width:1250px){
    .rm1-table:has(th[data-col="who-model"]):has(th[data-col="result"]):has(th[data-col="conditions"]) .lx-dropsum{display:block}
    .rm1-table:has(th[data-col="who-model"]):has(th[data-col="result"]):has(th[data-col="conditions"]) .lx-dropsum>span[data-drop="device"]:not([data-drop-none]){display:inline}
  }
  @container rm1-page (max-width:900px){
    .rm1-table:has(th[data-col="who-model"]):has(th[data-col="result"]) .lx-dropsum{display:block}
    .rm1-table:has(th[data-col="who-model"]):has(th[data-col="result"]) .lx-dropsum>span[data-drop="device"]:not([data-drop-none]){display:inline}
  }
  .lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) #agent-search-root .rm1-table .lx-dropsum{overflow:visible;white-space:normal;text-overflow:clip;text-indent:0}
  .lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) #agent-search-root .rm1-table .lx-dropsum>span{display:inline-block}
  .lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) #agent-search-root .rm1-table .lx-dropsum>span::before{content:none}
  .lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) #agent-search-root .rm1-table .lx-dropsum>span+span::before{content:"· ";display:inline;width:auto}
}
/* A split marked roomy keeps every column where they fit. 찾기's results stand beside their rail and need more than
   the mark's least width (uiw1 10-13, a row's panel opened: in a 1920px window eight columns in 800px -- the 기기 cut
   in 44 rows, the 모델 in 16, the name in 10 --, in a 1680px window in 693px, the name 91px and cut in 30), so while
   the results are under 1040px the roomy list is the short one it is at 1440px: the same four columns leave the row
   and the line under the name says each. From 1040px (a 2560px window beside the panel, 1100px) every column stands,
   none cut. At 1440px and under the mark is never set. */
@container rm1-page (max-width:999px){
  .lx-split[data-lx-roomy]:has(>.lx-aside) #agent-search-root .rm1-table .lx-drop{display:none}
  .lx-split:has(>.lx-aside) #agent-search-root .rm1-table:has(th[data-col="who-model"]) :is(th[data-col="who-model"],td[data-row-who="model"]){display:table-cell}
  .lx-split:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum>:is([data-drop="model"],[data-drop-none]){display:none}
  .lx-split:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum>[data-drop="device"]{display:block}
  .lx-split:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum>[data-drop="device"]::before{content:none}
  .lx-split[data-lx-roomy]:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum{display:block;overflow:visible;white-space:normal;text-overflow:clip;text-indent:0}
  .lx-split[data-lx-roomy]:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum>span{display:inline-block}
  .lx-split[data-lx-roomy]:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum>span::before{content:none}
  .lx-split[data-lx-roomy]:has(>.lx-aside) #agent-search-root .rm1-table .lx-dropsum>span+span::before{content:"· ";display:inline;width:auto}
}
#agent-search-root td[data-row-who]{max-width:200px;overflow:visible;text-overflow:clip;white-space:normal}
#agent-search-root td[data-col="conditions"]{min-width:0;max-width:360px}
#su-row-detail{width:auto}
/* The shared reason mark (searchUi.reasonList) as the design's grey tag on this screen: its old yellow box is search-ui.css's. */
/* What the shared search helpers draw (search-ui-common.js: a reason, an evidence path, a row's context), on every
   screen that uses them, in the parts' look -- the old names stay as the readers' hooks. */
/* A word the glossary explains (its bubble on hover and focus). */
.rm1-term{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.lx-tag.su-reason{display:inline-flex;align-items:center;min-height:22px;margin:1px 4px 1px 0;padding:1px 8px;border-radius:6px;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:12.5px;font-weight:500}
.lx-row.su-witness{gap:4px 6px;margin:2px 0;font-size:13px}
.lx-lbl.su-hop{padding:0}
.lx-na.su-node-name{font-weight:400}
.lx-lbl.su-context{display:block;margin-top:2px}