/* ===========================================================================
 * features.css — periodic-table hub + atomic-style feature pages
 * =========================================================================== */

/* ── HUB: PERIODIC TABLE ──────────────────────────────────────────────── */
.fx-hero { padding: 88px 0 56px; }
.fx-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px 32px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; margin: 32px auto 24px; max-width: 1280px; box-sizing: border-box; }
.fx-search { flex: 1 1 240px; min-width: 240px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 999px; font: 14px var(--font-sans); background: var(--bg); }
.fx-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.fx-personas { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; }
.fx-persona { padding: 8px 14px; border-radius: 999px; font: 500 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; user-select: none; border: 0; background: transparent; }
.fx-persona.is-on { background: var(--ink); color: #fff; }
.fx-tier-toggles { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; }
.fx-tier-toggle { padding: 8px 12px; border-radius: 999px; font: 500 11px var(--font-mono); letter-spacing: 0.08em; cursor: pointer; user-select: none; border: 0; background: transparent; color: var(--ink-3); }
.fx-tier-toggle.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }

.fx-table-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.fx-block { margin: 24px 0 0; }
.fx-block-head { display: flex; align-items: baseline; gap: 16px; padding: 0 16px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.fx-block-row { font: 500 11px var(--font-mono); letter-spacing: 0.16em; color: var(--ink-3); }
.fx-block-name { font: 500 18px var(--font-display); }
.fx-block-count { font: 12px var(--font-mono); color: var(--ink-3); margin-left: auto; }

.fx-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; padding: 0 8px; }
@media (max-width: 1080px) { .fx-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 720px)  { .fx-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 420px)  { .fx-grid { grid-template-columns: repeat(3, 1fr); } }

.fx-tile { aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; padding: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: inherit; position: relative; transition: transform 140ms, border-color 140ms, box-shadow 140ms; cursor: pointer; }
.fx-tile:hover { transform: translateY(-2px); border-color: var(--block-hue, var(--ink)); box-shadow: 0 6px 16px rgba(12,17,22,0.08); }
.fx-tile.is-dim { opacity: 0.22; pointer-events: none; }
.fx-tile-num { font: 500 9px var(--font-mono); color: var(--ink-3); letter-spacing: 0.06em; }
.fx-tile-sym { font: 500 22px/1 var(--font-display); margin: auto 0 4px; color: var(--block-hue, var(--ink)); letter-spacing: -0.02em; }
.fx-tile-name { font: 500 10px/1.2 var(--font-sans); color: var(--ink); margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fx-tile-tier { position: absolute; top: 6px; right: 8px; font: 500 9px var(--font-mono); color: var(--ink-3); }
.fx-tile.tier-1 { background: var(--block-tint, var(--surface-2)); border-color: var(--block-hue, var(--ink)); }
.fx-tile.tier-1 .fx-tile-num { color: var(--block-hue); }
.fx-tile.tier-2 { background: var(--surface); }
.fx-tile.tier-3 { background: var(--bg); border-style: dashed; }

/* DETAIL POPOVER (for tier-3 tiles) */
.fx-popover { position: fixed; inset: auto; z-index: 100; width: 320px; max-width: calc(100vw - 24px); padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 20px 50px rgba(12,17,22,0.18); display: none; }
.fx-popover.is-open { display: block; }
.fx-popover-sym { font: 500 28px var(--font-display); color: var(--block-hue, var(--ink)); }
.fx-popover-name { font: 500 18px var(--font-display); margin: 4px 0 6px; }
.fx-popover-tag { font: italic 14px var(--font-display); color: var(--ink-2); margin: 0 0 12px; }
.fx-popover-meta { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.fx-popover-chip { font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; background: var(--surface-2); border-radius: 999px; color: var(--ink-2); }
.fx-popover-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font: 500 13px var(--font-mono); color: var(--accent); text-decoration: none; }
.fx-popover-close { position: absolute; top: 10px; right: 12px; background: 0; border: 0; font: 500 18px var(--font-sans); color: var(--ink-3); cursor: pointer; }

/* ── ATOMIC-STYLE DOSSIER PAGE ────────────────────────────────────────── */
.fx-atom { padding: 56px 0 24px; }
.fx-atom-card { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 32px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--block-hue, var(--ink)); border-radius: 14px; align-items: start; }
@media (max-width: 720px) { .fx-atom-card { grid-template-columns: 1fr; } .fx-atom-glyph { width: 220px; } }
.fx-atom-glyph { aspect-ratio: 1; background: var(--block-tint, var(--surface-2)); border: 1px solid var(--block-hue); border-radius: 14px; display: flex; flex-direction: column; padding: 20px; position: relative; }
.fx-atom-num { font: 500 11px var(--font-mono); letter-spacing: 0.16em; color: var(--block-hue); }
.fx-atom-sym { font: 500 84px/0.85 var(--font-display); color: var(--block-hue); margin: auto 0 8px; letter-spacing: -0.04em; }
.fx-atom-block { font: 500 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--block-hue); }
.fx-atom-tier-pill { position: absolute; top: 14px; right: 16px; font: 500 9px var(--font-mono); letter-spacing: 0.12em; color: var(--block-hue); padding: 3px 8px; border: 1px solid var(--block-hue); border-radius: 999px; background: rgba(255,255,255,0.6); }

.fx-atom-meta { padding-top: 8px; }
.fx-atom-eyebrow { font: 500 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--block-hue); margin: 0 0 12px; }
.fx-atom-name { font: 500 56px/1.0 var(--font-display); letter-spacing: -0.025em; margin: 0 0 12px; }
.fx-atom-tag { font: italic 22px/1.4 var(--font-display); color: var(--ink-2); margin: 0 0 24px; max-width: 50ch; }
.fx-atom-personas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.fx-atom-chip { font: 500 11px var(--font-mono); letter-spacing: 0.06em; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); }

/* ── DOSSIER SECTIONS ─────────────────────────────────────────────────── */
.fx-section { padding: 64px 0; border-top: 1px solid var(--rule); }
.fx-section h2 { font: 500 36px/1.1 var(--font-display); letter-spacing: -0.02em; margin: 0 0 14px; }
.fx-section p.lede { font: 19px/1.55 var(--font-display); color: var(--ink-2); max-width: 64ch; margin: 0 0 32px; }
.fx-eyebrow { font: 500 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--block-hue); margin: 0 0 14px; }

.fx-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 880px) { .fx-twocol { grid-template-columns: 1fr; } }

.fx-card { padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; }
.fx-card h3 { font: 500 18px var(--font-display); margin: 0 0 10px; }
.fx-card p { font: 14px/1.55 var(--font-sans); color: var(--ink-2); margin: 0 0 8px; }

/* IO TABLE */
.fx-io { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--surface); }
@media (max-width: 720px) { .fx-io { grid-template-columns: 1fr; } }
.fx-io-col { padding: 24px; }
.fx-io-col + .fx-io-col { border-left: 1px solid var(--rule); }
@media (max-width: 720px) { .fx-io-col + .fx-io-col { border-left: 0; border-top: 1px solid var(--rule); } }
.fx-io-tag { font: 500 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--block-hue); margin: 0 0 14px; }
.fx-io-row { padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,0.08); font: 13px var(--font-mono); color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.fx-io-row:last-child { border-bottom: 0; }
.fx-io-row span:last-child { color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; }

/* WALKTHROUGH STEPS */
.fx-steps { counter-reset: fxstep; display: flex; flex-direction: column; gap: 12px; }
.fx-step { counter-increment: fxstep; padding: 18px 22px 18px 64px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; position: relative; }
.fx-step::before { content: counter(fxstep, decimal-leading-zero); position: absolute; left: 22px; top: 18px; font: 500 13px var(--font-mono); color: var(--block-hue); letter-spacing: 0.06em; }
.fx-step h4 { font: 500 16px var(--font-display); margin: 0 0 4px; }
.fx-step p { font: 14px/1.5 var(--font-sans); color: var(--ink-2); margin: 0; }

/* DATA CONTRACT */
.fx-contract { background: var(--ink); color: #e3ece8; border-radius: 12px; padding: 24px 28px; font: 13px/1.7 var(--font-mono); overflow-x: auto; }
.fx-contract .k { color: #b8d4cc; }
.fx-contract .v { color: #d6c79a; }
.fx-contract .c { color: #6b7785; font-style: italic; }

/* SIBLINGS */
.fx-siblings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .fx-siblings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .fx-siblings { grid-template-columns: 1fr; } }
.fx-sibling { padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: border-color 140ms; }
.fx-sibling:hover { border-color: var(--block-hue); }
.fx-sibling-sym { font: 500 22px var(--font-display); color: var(--block-hue); }
.fx-sibling-name { font: 500 13px var(--font-sans); color: var(--ink); }
.fx-sibling-tag { font: italic 12px/1.4 var(--font-display); color: var(--ink-3); }

/* CTA STRIP */
.fx-cta { background: var(--block-tint, var(--surface-2)); padding: 56px 0; }
.fx-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fx-cta h3 { font: 500 32px var(--font-display); margin: 0; max-width: 26ch; }

/* SECTION BG VARIANTS */
.fx-section--bg { background: var(--surface-2); }

/* PRICING CHIP */
.fx-free { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; background: rgba(42,93,79,0.08); border: 1px solid rgba(42,93,79,0.2); border-radius: 999px; font: 500 12px var(--font-mono); color: var(--accent); letter-spacing: 0.06em; }