/* Contact types: the tag as a button, the type menu, filter pills with counts,
   and the Manage types dialog. Hairline: one hairline, tinted pills, black primary.
   The per-type colours come from /kinds.css (board.css @imports it) and, after a
   change on the page, from the <style id="fu-kinds-live"> kinds.js writes. */

/* ---------- the tag as a button ---------- */
.kind-btn{border:0;cursor:pointer;gap:5px;padding:0 6px 0 8px;font-family:inherit;line-height:1}
.kind-btn .kx-ico{display:inline-flex;opacity:.85}
.kind-btn:hover{filter:brightness(.94)}
.kind-btn:hover .kx-ico{opacity:1}
.kind-btn[aria-expanded="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--line-strong,#E6E2E7)}
.kind-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.kind-btn.is-small{height:22px;font-size:var(--t-meta)}
.kind-btn-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}

/* ---------- a colour dot ---------- */
.kx-dot{flex:0 0 10px;width:10px;height:10px;border-radius:3px;display:inline-block}
.kx-ico{display:inline-flex;align-items:center}

/* ---------- the type menu (on top of board.css .menu / .menu-item) ---------- */
.kx-menu{z-index:70}
.kx-menu .menu-item{text-decoration:none}
.kx-menu .menu-item .kx-ico{margin-left:auto;color:var(--ink)}
.kx-menu.is-form{padding:14px 16px 16px;width:min(300px,calc(100vw - 16px))}
.kx-newform .label{margin-bottom:7px}
.kx-sublabel{display:block;font-size:var(--t-label);margin:14px 0 8px}
.kx-actions{display:flex;gap:8px;margin-top:14px}
.kx-err{margin:10px 0 0;font-size:var(--t-meta);color:var(--overdue)}

/* ---------- colour swatches ---------- */
.kx-swatches{display:flex;flex-wrap:wrap;gap:8px}
.kx-swatch{width:28px;height:28px;border-radius:var(--r-field);border:0;padding:0;cursor:pointer;background:var(--sw);
           display:inline-flex;align-items:center;justify-content:center}
.kx-swatch[aria-checked="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.kx-swatch[aria-checked="true"]::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;
           transform:translateY(-1px) rotate(-45deg)}
.kx-swatch:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* ---------- filter pills with a dot and a count ---------- */
.kx-pill{gap:7px}
.kx-pill .kx-dot{width:8px;height:8px;flex-basis:8px;border-radius:2px}
.kx-n{font-size:var(--t-meta);font-weight:400;color:inherit;opacity:.8;font-variant-numeric:tabular-nums}
.kx-pill[aria-pressed="true"] .kx-n{opacity:1}
.kx-more{width:32px;height:32px;flex:0 0 32px;color:var(--muted)}

/* ---------- Manage types ---------- */
.kx-wrap{z-index:65}
.kx-dialog{background:#fff;border-radius:var(--r-card);width:min(560px,100%);padding:24px 28px 28px;box-shadow:var(--shadow-menu)}
.kx-dialog .modal-head{margin-bottom:6px}
.kx-meta{margin:0 0 16px;font-size:var(--t-meta);color:var(--muted);line-height:1.4}
.kx-h{font-size:var(--t-label);font-weight:500;margin:20px 0 6px}
.kx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kx-row{display:grid;grid-template-columns:24px 28px minmax(0,1fr) auto;align-items:center;gap:10px;
        padding:8px 0;border-bottom:1px solid var(--line);background:#fff}
.kx-row.is-dragging{opacity:.5}
.kx-row.is-hidden .kx-name{background:transparent;border-color:transparent;color:var(--muted)}
.kx-grip{width:24px;height:32px;border:0;background:none;color:var(--placeholder);cursor:grab;display:inline-flex;
         align-items:center;justify-content:center;border-radius:var(--r-chip);padding:0}
.kx-grip:hover{color:var(--ink);background:var(--sunken)}
.kx-grip.is-off{cursor:default}
.kx-colour{width:28px;height:28px;border:0;border-radius:var(--r-field);cursor:pointer;padding:0}
.kx-colour[aria-expanded="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.kx-colour:disabled{cursor:default;opacity:.5}
.kx-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.kx-name{font-size:var(--t-label)}
.kx-used{font-size:var(--t-meta);color:var(--muted);padding-left:2px}
.kx-swrow{grid-column:2 / -1;padding:6px 0 4px}
.kx-hide:disabled{opacity:.45}
.kx-add{margin-top:24px}
.kx-add .btn-form{margin-top:18px}

@media (max-width:640px){
  .kx-wrap{padding:0}
  .kx-dialog{border-radius:0;min-height:100%;padding:16px 16px 32px}
  .kx-row{grid-template-columns:20px 28px minmax(0,1fr) auto;gap:8px}
  .kind-btn-label{max-width:120px}
}