/* p-cnx in the supplied Sorom Lean Web: compact passport grid and filter rail. */
.cx { min-width:0; }
.cx-header { border-bottom:1px solid var(--line); }
.cx-header-main { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.cx-header h2 { margin:0; font:400 30px/1.25 var(--display); letter-spacing:-.02em; }
.cx-header .kicker { font-size:10px; }
.cx-header-actions { margin-inline-start:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cx-tabs { display:flex; gap:4px; padding:3px; background:var(--paper-2); border-radius:10px; }
.cx-tabs a { display:flex; align-items:center; padding:7px 14px; min-height:36px; border-radius:8px; font-size:12.5px; text-decoration:none; color:var(--ink-2); }
.cx-tabs a.is-active { background:var(--card); color:var(--ink); box-shadow:0 1px 3px #0002; font-weight:600; }
.cx-live-button { gap:7px; min-height:38px; background:#0F766E; color:#fff; padding:0 14px; font-size:12.5px; }
.cx-live-button::before { content:''; width:6px; height:6px; background:#B7E5D8; border-radius:50%; }
.cx-status-row { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 0; font:10.5px/1.5 var(--mono); color:var(--muted); }
.cx-browse-note { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:16px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); }
.cx-browse-note:empty { display:none; }
.cx-browse-note p { flex:1 1 240px; margin:0; font-size:13px; line-height:1.6; color:var(--ink-2); }
.cx-browse-note .btn { flex:0 0 auto; }
.cx-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; align-items:start; padding-top:20px; }
.cx-grid { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-content:start; }
.cx-card { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 2px 8px #0000000d; display:flex; flex-direction:column; }
.cx-passport-top { display:flex; align-items:center; gap:8px; min-height:30px; padding:7px 12px; border-bottom:1px solid var(--line); }
.cx-mrz { font:9px/1.2 var(--mono); color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:clip; }
.cx-top-label { margin-inline-start:auto; font:9px/1.3 var(--mono); color:var(--terracotta-ink); }
.cx-card-body { display:flex; align-items:flex-start; gap:12px; padding:12px 12px 8px; }
.cx-photo-wrap { width:100px; flex-shrink:0; position:relative; padding-bottom:6px; }
.cx-photo { display:block; width:100%; height:118px; border-radius:4px; object-fit:cover; background:var(--paper-2); border:1px solid var(--line); }
.cx-photo-fallback { display:grid; place-items:center; background:linear-gradient(135deg,var(--paper-2),var(--paper-3)); color:var(--muted); font:400 28px var(--display); }
.cx-type { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:max-content; max-width:100%; white-space:nowrap; padding:2px 6px; border-radius:2px; background:var(--accent-fill); color:var(--on-accent); font:700 9px/1.3 var(--mono); }
.cx-type-local { background:#0F766E; }
.cx-identity { margin:0; min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.cx-datum { min-width:0; }
.cx-datum dt { font:8px/1.4 var(--mono); text-transform:uppercase; color:var(--muted); }
.cx-datum dd { margin:0; font-size:12px; line-height:1.4; color:var(--ink-2); overflow-wrap:anywhere; }
.cx-datum dd.cx-name { display:flex; align-items:center; gap:5px; font:500 16px/1.3 var(--display); color:var(--ink); }
.cx-verified { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:14px; height:14px; border-radius:50%; background:#0F766E; color:#fff; font:700 8px var(--body); }
.cx-bio { margin:0 12px 10px; padding-inline-start:9px; border-inline-start:2px solid var(--terracotta); font:italic 500 13.5px/1.3 var(--display); color:var(--muted); overflow-wrap:anywhere; }
.cx-tags { display:flex; flex-wrap:wrap; gap:4px; padding:0 12px 10px; }
.cx-tags span { padding:3px 7px; border:1px solid var(--line); border-radius:3px; font:10px/1.3 var(--mono); color:var(--muted); text-transform:uppercase; overflow-wrap:anywhere; }
.cx-card-foot { display:flex; align-items:center; gap:6px; padding:8px 12px; margin-top:auto; border-top:1px solid var(--line); background:var(--paper-2); }
.cx-stamps { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.cx-stamps span { transform:rotate(-2deg); padding:2px 5px; border:1px solid; border-radius:2px; font:600 8px/1.3 var(--mono); text-transform:uppercase; overflow-wrap:anywhere; }
.cx-country-stamp { color:var(--moss-ink); border-color:#0B4A3F66!important; }
.cx-destination-stamp { color:var(--terracotta-ink); border-color:#EB4E1966!important; }
.cx-card-foot .btn { margin-inline-start:auto; padding:6px 0 6px 6px; font-size:13px; font-weight:700; line-height:1.25; min-height:36px; flex-shrink:0; }
.cx-host { display:flex; align-items:center; gap:7px; padding:0 12px 10px; color:var(--muted); font-size:11px; }
.cx-host .avatar { width:24px; height:24px; }
.cx-quiz { border:1.5px dashed var(--line-2); border-radius:10px; padding:18px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; min-height:220px; }
.cx-quiz .kicker { color:var(--terracotta-ink); font-size:10px; letter-spacing:.14em; }
.cx-quiz h3 { font:400 17px/1.25 var(--display); margin:0; }
.cx-quiz p { margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
.cx-quiz .btn { margin-top:4px; min-height:32px; padding:8px 13px; font-size:12px; }
.cx-filters-rail { width:280px; display:flex; flex-direction:column; gap:16px; }
.cx-filters-rail h3 { font:500 18px/1.3 var(--display); margin:0; }
.cx-filter-note { font-size:12px; line-height:1.6; color:var(--muted); margin:0; }
.cx-filter-setting { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line); font:13px/1.4 var(--body); color:var(--ink); text-align:start; cursor:pointer; }
.cx-filter-setting>span:first-child { color:var(--terracotta-ink); }
.cx-filter-icon,.cx-filter-setting>.nav-icon { display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
.cx-filter-icon svg { display:block; width:100%; height:100%; }
.cx-preview-range { white-space:nowrap; }
.cx-app-badge { margin-inline-start:auto; padding:3px 6px; border-radius:4px; background:var(--paper-2); font:9px/1.3 var(--mono); text-transform:none; color:var(--muted); }
.cx-advanced { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--ink); text-align:start; cursor:pointer; }
.cx-advanced strong { display:block; font:600 12.5px/1.4 var(--body); }
.cx-advanced strong+span { display:block; font:11px/1.4 var(--body); color:var(--muted); margin-top:2px; }
.cx-live-note { margin-top:8px; }
.cx-empty { grid-column:1/-1; }
.cx-empty .empty { padding:30px 20px; }
:root[data-theme="dark"] .cx-country-stamp { color:#66BB6A; border-color:#66BB6A66!important; }
@media(min-width:1024px) { .cx-header { margin-inline:-36px; padding-inline:36px; } }
@media(min-width:1024px) and (max-width:1200px) { .cx-header { margin-inline:-24px; padding-inline:24px; } }
@media(max-width:1380px) { .cx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1023px) { .cx-layout { grid-template-columns:minmax(0,1fr); } .cx-filters-rail { display:none; } .cx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .cx-grid { grid-template-columns:minmax(0,1fr); } .cx-header-actions { margin-inline-start:0; } .cx-status-row { gap:4px; font-size:9.5px; } .cx-photo-wrap { width:100px; } .cx-filters-rail { grid-template-columns:minmax(0,1fr); } .cx-tabs a { padding-inline:11px; } }
/* Arabic does not use the Latin passport label's tracking and remains legible. */
:lang(ar) .cx .kicker,:lang(ar) .cx-status-row,:lang(ar) .cx-datum dt,:lang(ar) .cx-tags span { letter-spacing:normal; }
:lang(ar) .cx-datum dt { font-family:var(--body); font-size:10px; }
:lang(ar) .cx .kicker,:lang(ar) .cx-status-row { font-family:var(--body); font-size:11px; }