/* Article-style reference screens and accessible popups, preview only. */
.cx-dialog-backdrop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.78); }
.cx-dialog { display:flex; flex-direction:column; width:100%; max-width:760px; max-height:90dvh; min-height:0; color:var(--text); background:var(--glass-bg); border:1px solid var(--stroke); box-shadow:var(--shadow-strong); }
.cx-dialog:focus { outline:none; }
.cx-dialog-head { display:flex; align-items:flex-start; gap:24px; padding:22px 26px 18px; border-bottom:1px solid var(--stroke); flex-shrink:0; }
.cx-dialog-heading { min-width:0; flex:1; }
.cx-dialog-eyebrow { color:var(--link); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.cx-dialog h2 { font-family:var(--font-display); font-size:30px; line-height:1.2; font-weight:700; color:var(--text); }
.cx-dialog-subtitle { color:var(--muted); font-size:13px; margin-top:7px; }
.cx-dialog-close { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--stroke); flex-shrink:0; color:var(--text); background:transparent; }
.cx-dialog button { cursor:pointer; }
.cx-dialog button:disabled { opacity:.35; cursor:default; }
.cx-dialog button:focus-visible, .cx-dialog textarea:focus-visible, .cx-map-stage:focus-visible, .cx-icons-page button:focus-visible, .cx-icons-page input:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
.cx-dialog-close:hover { background:var(--surface-hover); }
.cx-dialog-body { padding:24px 26px; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.cx-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 26px; border-top:1px solid var(--stroke); color:var(--muted); font-size:12px; flex-shrink:0; }
.cx-dialog-footer .cx-toolbtn { min-height:40px; padding:8px 15px; }
.cx-dialog--map { max-width:1180px; }
.cx-map-reference { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:28px; align-items:start; }
.cx-map-visual { min-width:0; }
.cx-map-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:var(--text-soft); }
.cx-map-zoom { display:flex; border:1px solid var(--stroke); }
.cx-map-zoom button { min-width:38px; height:36px; padding:0 8px; color:var(--text); }
.cx-map-zoom button+button { border-left:1px solid var(--stroke); }
.cx-map-stage { height:min(56vh,560px); overflow:auto; border:1px solid var(--stroke); background:#111111; overscroll-behavior:contain; }
.cx-map-stage img { height:100%; object-fit:contain; display:block; }
.cx-map-stage--zoomed img { height:auto; object-fit:initial; }
.cx-map-sidebar .cx-sec { font-size:20px; margin-bottom:12px; }
.cx-map-sidebar>p { font-size:14px; line-height:1.75; color:var(--text-soft); }
.cx-reference-facts { font-size:12px; margin:18px 0 24px; border-top:1px solid var(--stroke); }
.cx-reference-facts>div { display:grid; grid-template-columns:60px 1fr; gap:14px; padding:9px 0; border-bottom:1px solid var(--stroke); }
.cx-reference-facts dt { color:var(--muted); }
.cx-map-notes textarea { width:100%; min-height:130px; background:var(--panel); border:1px solid var(--stroke); padding:10px; color:var(--text); font-size:13px; line-height:1.65; resize:vertical; }
.cx-reference-caption { font-size:12px; color:var(--muted); line-height:1.5; margin-top:10px; }
.cx-reference-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.cx-reference-tabs button { padding:10px 1px 9px; border-bottom:2px solid transparent; font-size:13px; color:var(--muted); min-height:44px; }
.cx-reference-tabs button[aria-pressed=true] { border-color:var(--link); color:var(--text); }
.cx-reference-tabs button:hover { color:var(--link); }
.cx-map-variations { border-bottom:1px solid var(--stroke); margin-top:4px; }
.cx-reference-empty { padding:40px 20px; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; color:var(--muted); }
.cx-reference-empty h2 { font-family:var(--font-display); font-size:23px; color:var(--text); }
.cx-reference-empty p { font-size:13px; }
.cx-map-stage .cx-reference-empty { height:100%; }
.cx-icons-page { max-width:1280px; margin:auto; padding-bottom:150px; }
.cx-icons-tools { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:18px 0 28px; border-bottom:1px solid var(--stroke); }
.cx-icons-tools>span { font-size:12px; color:var(--muted); }
.cx-icon-search { display:flex; align-items:center; gap:10px; color:var(--muted); border:1px solid var(--stroke); background:var(--panel); padding:7px 10px; min-height:40px; }
.cx-icon-search input { min-width:0; width:100%; background:transparent; color:var(--text); font-size:13px; padding:4px 0; }
.cx-icon-search button { min-width:30px; height:30px; display:grid; place-items:center; }
.cx-icons-page .sticky { padding-left:0; padding-right:0; }
.cx-icons-reference { display:grid; grid-template-columns:170px minmax(0,1fr); gap:34px; align-items:start; }
.cx-icon-categories { border-left:2px solid var(--stroke); padding-left:14px; position:sticky; top:10px; }
.cx-icon-categories>p { font-family:var(--font-display); font-size:17px; color:var(--text); margin:0 0 10px; }
.cx-icon-categories button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; font-size:12px; color:var(--muted); min-height:38px; padding:6px 0; }
.cx-icon-categories button>span:last-child { font-size:11px; font-variant-numeric:tabular-nums; color:var(--text-faint); }
.cx-icon-categories button[aria-pressed=true]>span { color:var(--link); font-weight:600; }
.cx-icon-section { margin-bottom:30px; }
.cx-icon-section .cx-sec { font-size:24px; margin-bottom:0; }
.cx-reference-count { font-size:12px; font-family:inherit; color:var(--muted); font-weight:400; }
.cx-icon-entry { border-bottom:1px solid var(--stroke); }
.cx-icon-summary { display:flex; width:100%; align-items:center; gap:18px; padding:16px 2px; text-align:left; }
.cx-icon-art { display:block; width:48px; height:48px; flex-shrink:0; }
.cx-icon-summary-copy { display:block; flex:1; min-width:0; }
.cx-icon-name { display:block; font-family:var(--font-display); font-size:17px; color:var(--text); font-weight:600; }
.cx-icon-excerpt { display:block; color:var(--muted); font-size:12px; line-height:1.6; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-icon-summary[aria-expanded=true] .cx-icon-name, .cx-icon-summary:hover .cx-icon-name { color:var(--link); }
.cx-icon-summary[aria-expanded=true] .cx-icon-excerpt { display:none; }
.cx-icon-expand { color:var(--muted); width:24px; text-align:center; font-size:20px; }
.cx-icon-detail { margin:0 36px 20px 68px; font-size:14px; line-height:1.75; color:var(--text-soft); }
.cx-icon-detail[hidden] { display:none; }
.cx-icon-detail h3 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 0 4px; font-weight:600; }
.cx-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); margin-top:16px; gap:12px; }
.cx-icon-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px 10px; border:1px solid var(--stroke); background:var(--panel); min-height:125px; color:var(--text-soft); font-size:12px; line-height:1.35; }
.cx-icon-tile:hover { border-color:var(--link); background:var(--surface-hover); }
.cx-dialog--icon { max-width:620px; }
.cx-icon-dialog-art { width:100px; height:100px; margin:2px auto 24px; }
.cx-icon-dialog-copy .cx-sec { font-size:22px; margin:20px 0 12px; }
.cx-icon-dialog-copy p { font-size:14px; line-height:1.8; color:var(--text-soft); }
.cx-dialog--compare { max-width:1120px; }
.cx-compare-grid { display:grid; grid-template-columns:repeat(var(--compare-columns),minmax(0,1fr)); gap:0; }
.cx-compare-entry { min-width:0; padding:0 20px; border-right:1px solid var(--stroke); }
.cx-compare-entry:first-child { padding-left:0; }
.cx-compare-entry:last-child { padding-right:0; border:0; }
.cx-compare-entry-head { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:12px; color:var(--muted); }
.cx-compare-entry-head button { min-height:36px; min-width:36px; display:grid; place-items:center; }
.cx-compare-image { width:90px; height:90px; margin:16px auto; }
.cx-compare-entry h3 { font-family:var(--font-display); font-size:20px; margin-bottom:6px; color:var(--text); }
.cx-compare-entry>p { color:var(--muted); font-size:12px; margin-bottom:18px; }
.cx-compare-description { color:var(--text-soft); font-size:13px; line-height:1.8; }
.cx-dialog--lore .cx-sec { font-size:22px; margin:0 0 14px; }
.cx-dialog--lore p { line-height:1.8; font-size:14px; color:var(--text-soft); }
.cx-dialog--lore section+section { margin-top:28px; }
@media(max-width:760px) {
 .cx-dialog-backdrop { padding:0; }
 .cx-dialog { max-height:none; height:100dvh; width:100%; border:0; }
 .cx-dialog-head { padding:calc(18px + env(safe-area-inset-top)) 18px 16px; gap:14px; }
 .cx-dialog h2 { font-size:26px; }
 .cx-dialog-body { padding:18px; flex:1; }
 .cx-dialog-footer { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
 .cx-map-reference { display:block; }
 .cx-map-stage { height:min(52dvh,470px); }
 .cx-map-sidebar { margin-top:28px; }
 .cx-icons-reference { display:block; }
 .cx-icon-categories { position:static; display:flex; flex-wrap:wrap; gap:4px 16px; border:0; border-bottom:1px solid var(--stroke); padding:0 0 16px; margin-bottom:24px; }
 .cx-icon-categories>p { display:none; }
 .cx-icon-categories button { width:auto; min-height:36px; gap:7px; }
 .cx-icon-summary { gap:12px; }
 .cx-icon-detail { margin-left:0; margin-right:0; }
 .cx-icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .cx-icon-tile { padding:13px 6px; min-height:116px; }
 .cx-compare-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
 .cx-compare-entry { min-width:85%; scroll-snap-align:start; padding:0 18px; }
 .cx-compare-entry:last-child { padding-right:0; }
}
.cx-dialog--lightbox { max-width:1100px; }
.cx-lightbox-image { display:flex; justify-content:center; align-items:center; min-height:200px; }
.cx-lightbox-image img { max-width:100%; max-height:65dvh; object-fit:contain; }
.cx-lightbox-image--icon img { width:240px; height:240px; }
/* White HUD artwork needs a dark viewing surface in both color modes. */
.cx-icon-art, .cx-icon-dialog-art, .cx-compare-image { background:#111; }
.cx-lightbox-image--icon { background:#111; }
.cx-compare-hint { display:none; }
@media(max-width:760px) { .cx-compare-hint { display:block; font-size:12px; color:var(--muted); margin-bottom:18px; } }
.cx-compare-pick { color:var(--link); font-size:11px; line-height:1.2; min-height:36px; padding:7px 10px; border:1px solid var(--stroke); }
.cx-compare-pick[aria-pressed=true] { border-color:var(--link); }
.cx-compare-pick:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
.cx-compare-bar { position:fixed; right:24px; bottom:24px; z-index:54; display:flex; align-items:center; border:1px solid var(--stroke); background:var(--glass-bg); color:var(--text); }
.cx-compare-bar button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 14px; font-size:13px; }
.cx-compare-bar button+button { border-left:1px solid var(--stroke); }
.cx-compare-bar button:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
@media(max-width:760px) {
 .cx-compare-bar { right:18px; bottom:calc(90px + env(safe-area-inset-bottom)); }
 .mobile-app-cta-visible .cx-compare-bar { bottom:calc(160px + env(safe-area-inset-bottom)); }
}