/* tokenomics.css — tab layout + shared components */

/* Tab navigation */
.tk-tabs { max-width:700px; margin:2rem auto 0; padding:0 2rem; display:flex; gap:0; border-bottom:1px solid var(--border); }
.tk-tab { padding:0.7rem 1.3rem; font-size:0.88rem; font-weight:600; cursor:pointer; color:var(--text-faint); background:none; border:none; border-bottom:2px solid transparent; transition:all 0.15s; position:relative; bottom:-1px; }
.tk-tab:hover { color:var(--text-dim); }
.tk-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tk-panel { display:none; }
.tk-panel.active { display:block; }
.tk-content { max-width:700px; margin:0 auto; padding:1.5rem 2rem 2rem; }

/* Grid cards */
.tk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin:1rem 0; }
.tk-cell { background:var(--bg); padding:1.25rem 1.5rem; }
.tk-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; color:var(--green); margin-bottom:0.5rem; }
.tk-cell p { color:var(--text-dim); font-size:0.88rem; line-height:1.6; margin:0; }

/* Tables */
.tk-table { width:100%; border-collapse:collapse; font-size:0.88rem; margin:1rem 0; }
.tk-table th { text-align:left; padding:0.5rem 0.75rem; color:var(--text-dim); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); }
.tk-table td { padding:0.6rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.tk-table .tk-right { text-align:right; }
.tk-table .tk-green { color:var(--green); font-weight:600; }
.tk-table .tk-dim { color:var(--text-dim); }

/* Boxes */
.tk-box { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1.25rem; margin:1.5rem 0; }
.tk-box p { color:var(--text-dim); font-size:0.88rem; margin:0; }
.tk-box h4 { margin:0 0 0.5rem; font-size:0.88rem; }

/* Fact cards */
.fact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:1.5rem 0; }
.fact-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1.25rem; }
.fact-card h3 { color:var(--accent); font-size:0.85rem; text-transform:uppercase; margin-bottom:0.25rem; }
.fact-card .value { font-family:var(--font-mono); font-size:1.3rem; font-weight:700; }

/* Mono boxes */
.loop-box { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1.5rem; margin:1.5rem 0; font-family:var(--font-mono); font-size:0.85rem; line-height:1.8; color:var(--text-dim); white-space:pre-line; }

/* Callouts */
.callout { background:rgba(74,158,255,0.05); border-left:3px solid var(--accent); padding:1rem 1.25rem; margin:1.5rem 0; border-radius:0 6px 6px 0; }
.callout p { color:var(--text-dim); font-size:0.9rem; margin:0; }
.warning-box { background:rgba(255,61,0,0.06); border:1px solid rgba(255,61,0,0.2); border-radius:8px; padding:1.25rem; margin:1.5rem 0; }
.warning-box h4 { color:#ff3d00; margin-bottom:0.5rem; }
.not-list li { color:var(--text-dim); font-size:0.9rem; padding:0.3rem 0; }

/* Responsive */
@media(max-width:600px) {
    .tk-tabs { padding:0 1rem; overflow-x:auto; }
    .tk-tab { padding:0.6rem 0.8rem; font-size:0.8rem; white-space:nowrap; }
    .tk-content { padding:1rem; }
}