/* Feature view switch (Classic / Compact) and the Compact layout. Uses the theme tokens from atlas-editorial.css. */
.fx-view-host{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.fx-switch-label{font-size:var(--fs-xs);color:var(--muted)}
.fx-switch{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;vertical-align:middle;margin-left:10px}
.fx-switch button{font:inherit;font-size:var(--fs-xs);font-weight:600;padding:3px 10px;border:0;background:var(--surface);color:var(--ink-2);cursor:pointer}
.fx-switch button+button{border-left:1px solid var(--line-strong)}
.fx-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.fx-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fx-view-host .fx-switch{margin-left:0}
h3 .fx-switch{float:right;font-family:var(--font-ui)}

.fx-empty{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:12px 14px;color:var(--muted);font-size:var(--fs-sm)}
.fx-empty strong{color:var(--ink)}

/* List rows */
.fx-badges{display:flex;flex-wrap:wrap;gap:4px}
.fx-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:650;line-height:1.3;padding:3px 8px;border-radius:999px;background:var(--free-soft);color:var(--free)}
.fx-badge.ai{background:var(--accent-soft);color:var(--accent-text)}
.fx-badge .icon{width:13px;height:13px}
.fx-paid-dot{font-size:12px;font-weight:800;color:var(--paid);background:var(--paid-soft);border-radius:4px;padding:0 4px;margin-left:2px}

/* Detail page */
.fxc .fxc-badges{margin:4px 0 12px}
.fxc-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 22px}
.fxc-group h4{margin:10px 0 4px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fxc-group ul{list-style:none;margin:0;padding:0}
.fxc-group li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:var(--fs-sm);border-bottom:1px solid var(--line)}
.fxc-group li:last-child{border-bottom:0}
.fxc-icon{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.fxc-label{flex:1;min-width:0;color:var(--ink)}
.fxc-label small{display:none}
.fxc-group .fx-tier{flex:none}
.fxc-src{flex:none;color:var(--muted);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px}
.fxc-src:hover,.fxc-src:focus-visible{color:var(--accent-text)}
.fxc-src .icon{width:13px;height:13px}
.fxc-hl{margin-top:14px}
.fxc-ladder{display:flex;gap:3px;min-width:260px}
.fxc-ladder span{flex:1;text-align:center;font-size:var(--fs-xs);padding:3px 6px;border-radius:4px;background:var(--surface-3);color:var(--muted)}
.fxc-ladder span.on{background:var(--accent);color:var(--on-accent);font-weight:650}
@media (hover:none){.fxc-label small{display:block;font-size:var(--fs-xs);color:var(--muted)}}
@media (max-width:640px){h3 .fx-switch{float:none;display:flex;width:max-content;margin:8px 0 0}.fx-view-host{margin-left:0}.fxc-ladder{min-width:0}}
@media (forced-colors:active){.fx-switch button[aria-pressed="true"]{border:2px solid CanvasText}.fxc-ladder span.on{border:1px solid CanvasText}}

/* Click-to-filter feature chips and rarity */
button.chip.fx-pick,button.fx-badge.fx-pick{font:inherit;font-size:var(--fs-xs);cursor:pointer}
button.chip.fx-pick:hover,button.fx-badge.fx-pick:hover{border-color:var(--accent);color:var(--accent-text)}
button.fx-badge.fx-pick{border:1px solid transparent}
button.chip.fx-pick:focus-visible,button.fx-badge.fx-pick:focus-visible,.fx-pick-link:focus-visible,.fx-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip.fx-unique,.fx-pill.fx-unique{border-color:var(--gold-line);background:var(--gold-soft)}
.chip.fx-rare,.fx-pill.fx-rare{border-color:var(--gold-line)}
.fx-rarity{font-size:12px;font-weight:750;line-height:1.4;border-radius:4px;padding:0 4px;margin-left:3px;white-space:nowrap}
.fx-rarity.unique{background:var(--gold);color:var(--paper)}
.fx-rarity.rare{border:1px solid var(--gold-line);color:var(--gold)}
.fx-pick-link{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.fx-pick-link:hover{color:var(--accent-text);text-decoration-color:currentColor}
.fx-count{font-size:12px;font-weight:650;color:var(--muted);margin-left:5px;white-space:nowrap}

/* Browse by feature */
.fx-index{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.fx-index>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 16px;cursor:pointer;list-style:none}
.fx-index>summary::-webkit-details-marker{display:none}
.fx-index>summary::after{content:"Show";margin-left:auto;font-size:var(--fs-xs);font-weight:650;color:var(--accent-text)}
.fx-index[open]>summary::after{content:"Hide"}
.fx-index-title{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink)}
.fx-index-sum{font-size:var(--fs-xs);color:var(--muted)}
.fx-index-sum strong{color:var(--accent-text)}
.fx-index-body{padding:0 16px 14px;border-top:1px solid var(--line)}
.fx-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--fs-xs);color:var(--muted);margin:12px 0 4px}
.fx-pill-demo{border:1px solid var(--gold-line);border-radius:999px;padding:1px 8px;color:var(--ink-2)}
.fx-pill-demo.unique{background:var(--gold-soft)}
.fx-index-group h4{margin:12px 0 6px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fx-pills{display:flex;flex-wrap:wrap;gap:6px}
.fx-pill{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 9px;cursor:pointer}
.fx-pill .icon{width:14px;height:14px}
.fx-pill b{min-width:20px;text-align:center;font-size:12px;border-radius:999px;padding:0 6px;background:var(--surface);color:var(--ink)}
.fx-pill:hover:not(:disabled){border-color:var(--accent)}
.fx-pill.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fx-pill.on b{background:var(--on-accent);color:var(--accent)}
.fx-pill:disabled{background:var(--surface-3);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.fx-uniques{font-size:var(--fs-xs);color:var(--ink-2);margin:14px 0 0;line-height:1.6}
@media (forced-colors:active){.fx-pill.on{border:2px solid CanvasText}.fx-rarity.unique{border:1px solid CanvasText}}