/* label-field.css — B66 W2: the Label field (label-field.js) and its translations modal.
   Reads Mocca's tokens; inside a sub-app the --sk-* skin tokens take over. */
.mlbl{ display:flex; align-items:center; gap:4px; min-height:var(--mk-control-h,38px); border-radius:9px; border:1px solid var(--sk-line,var(--border));
  background:var(--sk-item,var(--bg-input)); padding:0 3px 0 11px; min-width:0; }
.mlbl:focus-within{ border-color:var(--sk-acc,var(--accent)); box-shadow:0 0 0 2px color-mix(in srgb,var(--sk-acc,var(--accent)) 18%,transparent); }
.mlbl > .mlbl-in{ flex:1; min-width:0; border:0; background:none; outline:0; font:500 13.5px var(--sk-font,var(--mk-font-ui)); color:var(--sk-ink,var(--fg-1)); padding:8px 0; }
.mlbl.is-ta{ align-items:flex-start; padding-block:4px; }
.mlbl.is-ta > .mlbl-in{ resize:vertical; min-height:68px; line-height:1.45; word-break:normal; overflow-wrap:break-word; }
.mlbl-tr{ position:relative; flex:0 0 auto; width:32px; height:32px; border:0; border-radius:8px; background:none; color:var(--sk-ink2,var(--fg-2)); display:grid; place-items:center; cursor:pointer; }
.mlbl-tr:hover{ background:var(--sk-item-h,var(--bg-3)); color:var(--sk-ink,var(--fg-1)); }
.mlbl-tr:focus-visible{ outline:2px solid var(--sk-acc,var(--accent)); outline-offset:1px; }
.mlbl-tr .mi{ font-size:18px; }
.mlbl-tr.miss::after{ content:''; position:absolute; top:6px; inset-inline-end:6px; width:7px; height:7px; border-radius:50%; background:var(--mk-warning,#F6A609); box-shadow:0 0 0 2px var(--sk-item,var(--bg-input)); }
.mlbl-modal{ position:fixed; inset:0; z-index:1320; display:grid; place-items:center; padding:16px; background:color-mix(in srgb,#0b1620 40%,transparent); opacity:0; transition:opacity .16s; }
.mlbl-modal.open{ opacity:1; }
.mlbl-card{ width:min(480px,100%); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; border-radius:var(--sk-r,18px); overflow:hidden;
  background:var(--sk-pop,var(--sk-card,var(--bg-1))); color:var(--sk-ink,var(--fg-1)); border:1px solid var(--sk-edge,var(--border)); box-shadow:0 30px 70px -28px rgba(0,0,0,.45);
  font-family:var(--sk-font,var(--mk-font-ui)); transform:translateY(8px); transition:transform .2s; }
.mlbl-modal.open .mlbl-card{ transform:none; }
.mlbl-hd{ display:flex; align-items:center; gap:8px; padding:14px 12px 10px 18px; }
.mlbl-hd b{ flex:1; font:700 16px var(--sk-font,var(--mk-font-ui)); }
.mlbl-x{ width:34px; height:34px; border:0; border-radius:10px; background:none; color:inherit; display:grid; place-items:center; cursor:pointer; }
.mlbl-x:hover{ background:var(--sk-item-h,var(--bg-2)); }
.mlbl-bd{ padding:4px 18px 14px; display:flex; flex-direction:column; gap:12px; overflow:auto; }
.mlbl-row{ display:flex; flex-direction:column; gap:6px; }
.mlbl-lang{ display:flex; align-items:center; gap:8px; font:650 12px var(--sk-font,var(--mk-font-ui)); color:var(--sk-ink2,var(--fg-2)); }
.mlbl-lang img{ width:18px; height:13px; border-radius:2px; object-fit:cover; }
.mlbl-row .mlbl-in{ box-sizing:border-box; width:100%; min-height:var(--mk-control-h,38px); padding:8px 11px; border-radius:9px; border:1px solid var(--sk-line,var(--border));
  background:var(--sk-item,var(--bg-input)); color:var(--sk-ink,var(--fg-1)); font:500 13.5px var(--sk-font,var(--mk-font-ui)); outline:0; }
.mlbl-row textarea.mlbl-in{ resize:vertical; min-height:72px; line-height:1.45; }
.mlbl-row .mlbl-in:focus{ border-color:var(--sk-acc,var(--accent)); }
.mlbl-ft{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; border-top:1px solid var(--sk-line,var(--border)); }
.mlbl-btn{ height:38px; padding:0 16px; border-radius:10px; border:1px solid var(--sk-line,var(--border)); background:var(--sk-item,var(--bg-1)); color:inherit; font:650 13px var(--sk-font,var(--mk-font-ui)); cursor:pointer; }
.mlbl-btn.is-pri{ border-color:transparent; background:var(--sk-acc,var(--accent)); color:var(--sk-on-acc,var(--accent-fg,#fff)); }