/* 레이블·태그 widget (entity-labels.js), wherever it is mounted: an entity's page, the search's drawer, an asset's
   drawer and a device's window. Its two parts (레이블: words; 태그: key: value) share the parts' grey tag (리디자인
   명세 6.1: a kind is never coloured; a tag is told by its key: value, a label by its plain word). A part's small + and a chip are the only controls on view; each opens one
   window (.el-pop) in the widget's own flow, so no drawer or dialog around it cuts it off. The window is the parts' inset
   (.lx-inset) with their fields (.lx-field, .lx-in) and small buttons (.lx-btn.lx-btn-s), a chip their grey tag
   (.lx-tag) that may break inside a long value; what is here is only where those stand in the widget. */
[data-entity-labels]{display:block;min-width:0;margin:0 0 var(--ds-space-4)}
[data-entity-labels] .el-head{margin:0 0 var(--ds-space-1);padding:0;border:0;font-size:var(--ds-fs-sm);font-weight:650;line-height:1.5;color:var(--ds-text-2)}
[data-entity-labels] .el-head small{margin-left:var(--ds-space-1);font-weight:400}
.el-top{display:flex;align-items:center;gap:var(--ds-space-2);margin:0 0 var(--ds-space-1)}
[data-entity-labels] .el-top .el-head{margin:0}
/* The small +: a round mark beside the part's name, a finger's size where the pointer is one. */
.el-add{display:inline-grid;place-items:center;width:22px;height:22px;min-width:22px;padding:0;border:1px solid var(--ds-line-strong);border-radius:50%;background:var(--ds-surface);color:var(--ds-text-2);font-size:var(--ds-fs-md);font-weight:600;line-height:1;cursor:pointer}
.el-add:is(:hover,:focus-visible,[aria-expanded="true"]){filter:none;transform:none;border-color:var(--ds-accent);background:var(--ds-accent-soft);color:var(--ds-accent-text)}
.el-add:disabled,.el-press:disabled{cursor:default;opacity:.6}
.el-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-4);margin:0 0 var(--ds-space-2);padding:0;list-style:none}
.el-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);max-width:100%;min-width:0}
/* A label reads as one phrase (key: value) and breaks inside a long value, never off the edge of its box. */
.lx-tag.el-chip{display:inline-block;height:auto;min-height:22px;max-width:100%;min-width:0;padding:2px 8px;border:1px solid transparent;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.el-key{font-weight:600;color:var(--ds-text-2)}
.el-chip.el-label{color:var(--ds-text)}
/* A chip that is pressed (it opens its window, or finds): the chip's own look, the accent on the one in hand. */
.el-press{margin:0;font-family:inherit;text-align:left;cursor:pointer}
/* Under the pointer it keeps its own ground and ink (the shell's button:hover would paint it the accent, and a
   tag's key went dark on dark: rh c3.77). */
.el-chip.el-press:is(:hover,:focus-visible,[aria-expanded="true"]){filter:none;transform:none;border-color:var(--ds-line-strong);background:var(--ds-surface-3);text-decoration:none}
.el-part{margin:0 0 var(--ds-space-3);min-width:0}
.el-part:last-of-type{margin-bottom:0}
.el-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1);max-width:100%;min-width:0}
.el-item[data-el-mode]{flex:1 1 100%}
/* The window a + or a chip opens: what is typed, its buttons on one line where there is room, and under them the
   rule of what may be typed or what is wrong with it. */
.el-pop{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:flex-end;gap:var(--ds-space-2);box-sizing:border-box;width:100%;max-width:640px;min-width:0;padding:12px 14px}
.el-part>.el-pop{margin:0 0 var(--ds-space-2)}
/* In a window the field gives its room to the buttons, so 저장 and 붙이기 stay on the field's line where it fits. */
.el-pop .el-edit{flex:1 1 240px}
.el-pop .el-edit label,.el-pop .el-form label{flex:1 1 150px}
.el-pop .el-form{flex:1 1 100%}
.el-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2);margin-left:auto}
.el-pop .el-problem,.el-pop .el-hint{flex:1 1 100%;margin:0;font-size:var(--ds-fs-sm);line-height:1.5;overflow-wrap:anywhere}
.el-pop .el-problem:empty{display:none}
.el-edit,.el-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ds-space-2);margin:0;min-width:0}
.el-edit{flex:1 1 auto}
.el-edit label,.el-form label{min-width:0}
.el-edit label{flex:0 1 560px}
/* The key whose value is being changed is read whole: it keeps its width, and a long one breaks. */
.el-edit .el-key{white-space:normal;overflow-wrap:anywhere}
.el-form label{flex:0 1 220px}
.el-edit input[aria-invalid="true"],.el-form input[aria-invalid="true"]{border-color:var(--ds-danger)}
.el-none,.el-reading,.el-readonly{margin:0 0 var(--ds-space-2)}
/* One line under each part: the rule of what may be typed, and in its place the problem or the result when one
   is said -- so what is under the part keeps its place. */
.el-line{margin-top:var(--ds-space-1);font-size:var(--ds-fs-sm);line-height:1.5}
.el-line p{margin:0;overflow-wrap:anywhere}
.el-line p:empty{display:none}
.el-problem{color:var(--ds-danger-text)}
.el-said{color:var(--ds-text-2)}
.el-unread{display:grid;gap:var(--ds-space-1);justify-items:start}
.el-unread b{color:inherit}
.el-unread p{margin:0}
/* The buttons in a window are the parts' small button (.lx-btn.lx-btn-s), 삭제 in red words (.lx-btn-d). 저장 and
   붙이기 are plain too: the screen the window opens on already has its one blue button (명세 6절; PC 10-12: an asset's
   panel showed 할 일 만들기 and 붙이기 both blue). 삭제 is asked in the Portal's own confirm (portalUi.confirm). */
@media(max-width:600px){
  .el-form label,.el-edit label{flex:1 1 100%}
}
@media(max-width:900px),(pointer:coarse){
  .el-add{width:32px;height:32px;min-width:32px}
  .el-chip.el-press{padding:var(--ds-space-1) var(--ds-space-2)}
}
@media(min-width:1700px){
  [data-entity-labels] .el-head,.el-chip,.el-line,.el-unread{font-size:var(--ds-fs-md)}
}