/* Cross-reference strip + picker (refs/cx-links.js). Uses the dashboard's
   theme tokens so it follows light and dark mode. */
.cxl { --cxl-line: var(--line, #d8dce4); --cxl-panel: var(--panel, #fff); --cxl-panel2: var(--panel2, #f3f5fa);
       --cxl-text: var(--text, #0f172a); --cxl-muted: var(--muted, #64748b); --cxl-accent: var(--btn, #4a6b3a);
       margin: 10px 0 14px; padding: 9px 10px; border: 1px solid var(--cxl-line); border-radius: 12px;
       background: var(--cxl-panel); color: var(--cxl-text); font: 500 12.5px/1.35 Inter, system-ui, sans-serif; }
.cxl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cxl-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cxl-muted); margin-right: 2px; display: inline-flex; align-items: center; gap: 5px; }
.cxl-title svg { width: 13px; height: 13px; }
.cxl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; }
.cxl-empty { color: var(--cxl-muted); font-size: 12px; }
.cxl-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 4px 6px 4px 4px; border: 1px solid var(--cxl-line);
            border-radius: 999px; background: var(--cxl-panel2); color: var(--cxl-text); cursor: pointer; text-decoration: none; transition: border-color .12s, background .12s; }
.cxl-chip:hover { border-color: var(--cxl-accent); background: var(--cxl-panel); }
.cxl-chip:focus-visible { outline: 2px solid var(--cxl-accent); outline-offset: 1px; }
.cxl-ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
           font: 700 10.5px/1 Inter, system-ui, sans-serif; color: #fff; background: #64748b; }
.cxl-ico[data-t="rfi"] { background: #2563eb; } .cxl-ico[data-t="submittal"] { background: #7c3aed; } .cxl-ico[data-t="field_log"] { background: #0891b2; }
.cxl-ico[data-t="pay_app"] { background: #15803d; } .cxl-ico[data-t="prime_co"], .cxl-ico[data-t="sub_co"] { background: #c2410c; }
.cxl-ico[data-t="pay_item"], .cxl-ico[data-t="budget"] { background: #4a6b3a; } .cxl-ico[data-t="contract"] { background: #9a3412; }
.cxl-ico[data-t="tm_sheet"] { background: #0f766e; } .cxl-ico[data-t="issue"] { background: #be123c; } .cxl-ico[data-t="uri_task"] { background: #111827; }
.cxl-ico[data-t="drawing"], .cxl-ico[data-t="reader_doc"], .cxl-ico[data-t="siteplan"], .cxl-ico[data-t="volume"], .cxl-ico[data-t="cutfill"], .cxl-ico[data-t="jb_job"] { background: #334155; }
.cxl-num { font-weight: 700; white-space: nowrap; }
.cxl-ttl { color: var(--cxl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cxl-dir { font-size: 10.5px; font-weight: 700; color: var(--cxl-accent); white-space: nowrap; }
.cxl-st { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: rgba(100,116,139,.14); color: var(--cxl-muted); white-space: nowrap; }
.cxl-st[data-s="approved"], .cxl-st[data-s="closed"], .cxl-st[data-s="answered"], .cxl-st[data-s="resolved"], .cxl-st[data-s="done"] { background: rgba(22,163,74,.14); color: #15803d; }
.cxl-st[data-s="pending"], .cxl-st[data-s="open"], .cxl-st[data-s="draft"], .cxl-st[data-s="revise_resubmit"] { background: rgba(217,119,6,.14); color: #b45309; }
.cxl-st[data-s="rejected"], .cxl-st[data-s="void"], .cxl-st[data-s="deleted"] { background: rgba(220,38,38,.12); color: #b91c1c; }
.cxl-x { border: 0; background: transparent; color: var(--cxl-muted); cursor: pointer; padding: 0 3px; font-size: 14px; line-height: 1; border-radius: 50%; }
.cxl-x:hover { color: #dc2626; }
.cxl-add { border: 1px dashed var(--cxl-line); background: transparent; color: var(--cxl-text); border-radius: 999px; padding: 4px 10px; font: 600 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.cxl-add:hover { border-color: var(--cxl-accent); color: var(--cxl-accent); }
.cxl-sug { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--cxl-muted); }
.cxl-sug .cxl-chip { border-style: dashed; opacity: .9; }
.cxl-sug .cxl-plus { font-weight: 800; color: var(--cxl-accent); padding: 0 2px; }
.cxl-note { font-size: 11px; color: var(--cxl-muted); font-style: italic; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Picker */
.cxl-pop-scrim { position: fixed; inset: 0; z-index: 99990; background: rgba(15,23,42,.18); }
.cxl-pop { position: fixed; z-index: 99991; width: min(560px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 40px)); display: flex; flex-direction: column;
           border: 1px solid var(--line, #d8dce4); border-radius: 14px; background: var(--panel, #fff); color: var(--text, #0f172a); box-shadow: 0 24px 60px rgba(2,6,23,.25); overflow: hidden;
           font: 500 13px/1.4 Inter, system-ui, sans-serif; }
.cxl-pop header { padding: 12px 14px 8px; border-bottom: 1px solid var(--line, #d8dce4); }
.cxl-pop h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.cxl-pop input[type="search"], .cxl-pop input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line, #d8dce4); border-radius: 10px; background: var(--panel2, #f3f5fa); color: inherit; font: inherit; }
.cxl-types { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.cxl-types button { border: 1px solid var(--line, #d8dce4); background: transparent; color: var(--muted, #64748b); border-radius: 999px; padding: 3px 9px; font: 600 11.5px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
.cxl-types button[aria-pressed="true"] { background: var(--btn, #4a6b3a); border-color: var(--btn, #4a6b3a); color: var(--btnText, #fff); }
.cxl-res { overflow: auto; flex: 1 1 auto; padding: 6px; }
.cxl-res .cxl-grp { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #64748b); padding: 8px 8px 4px; }
.cxl-res button.cxl-hit { display: flex; width: 100%; align-items: center; gap: 9px; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cxl-res button.cxl-hit:hover, .cxl-res button.cxl-hit.on { background: var(--panel2, #f3f5fa); }
.cxl-res button.cxl-hit .cxl-ttl { flex: 1 1 auto; }
.cxl-res .cxl-none { padding: 18px; text-align: center; color: var(--muted, #64748b); }
.cxl-pop footer { border-top: 1px solid var(--line, #d8dce4); padding: 10px 14px; display: grid; gap: 8px; }
.cxl-rel { display: inline-flex; border: 1px solid var(--line, #d8dce4); border-radius: 10px; overflow: hidden; }
.cxl-rel button { border: 0; background: transparent; color: var(--muted, #64748b); padding: 6px 10px; font: 600 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.cxl-rel button[aria-pressed="true"] { background: var(--panel2, #f3f5fa); color: var(--text, #0f172a); }
.cxl-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cxl-pick { font-size: 12px; color: var(--muted, #64748b); min-height: 18px; }
.cxl-pick b { color: var(--text, #0f172a); }
.cxl-go { border: 0; border-radius: 10px; padding: 8px 14px; background: var(--btn, #4a6b3a); color: var(--btnText, #fff); font: 700 12.5px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.cxl-go:disabled { opacity: .45; cursor: default; }
.cxl-err { color: #b91c1c; font-size: 12px; }

/* Link-count badge for list rows */
.cxl-count { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(74,107,58,.12); color: var(--btn, #4a6b3a); font: 700 10.5px/1.4 Inter, system-ui, sans-serif; vertical-align: middle; }
.cxl-count svg { width: 10px; height: 10px; }

/* Brief highlight when a tag opens something inside a list (e.g. a change order block) */
@keyframes cxlFlash { 0% { box-shadow: 0 0 0 0 rgba(74,107,58,.55); } 100% { box-shadow: 0 0 0 14px rgba(74,107,58,0); } }
.cxl-flash { animation: cxlFlash 1.2s ease-out 2; outline: 2px solid var(--btn, #4a6b3a); outline-offset: 2px; border-radius: 10px; }

@media (max-width: 640px) { .cxl-chip { max-width: 100%; } .cxl-ttl { display: none; } }
.cxl.cxl-compact { margin: 8px 12px; padding: 6px 8px; border-radius: 10px; }
.cxl-ask { border-style: solid; color: var(--cxl-accent); }