/* FlopSource Guides - shared styles for the /guides content section */
:root { --bg:#020617; --panel:#0b1220; --panel2:#0f172a; --border:#1e293b; --text:#e2e8f0; --dim:#94a3b8; --faint:#64748b; --accent:#38bdf8; --accent2:#0ea5e9; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.65; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:#7dd3fc; }

/* Header */
.site-header { border-bottom:1px solid var(--border); }
.site-header .wrap { max-width:1100px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--text); font-weight:600; font-size:1.05rem; }
.brand svg { display:block; }
.site-header nav { display:flex; align-items:center; gap:18px; font-size:.9rem; }
.site-header nav a { color:var(--dim); }
.site-header nav a:hover { color:var(--text); }
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent2); color:#fff !important; padding:9px 16px; border-radius:9px; font-weight:600; font-size:.88rem; transition:background .15s; }
.btn:hover { background:#0284c7; color:#fff !important; }

/* Article */
.article { max-width:760px; margin:0 auto; padding:44px 22px 24px; }
.eyebrow { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:0 0 10px; }
.eyebrow a { color:var(--accent); }
.article h1 { font-size:2.1rem; line-height:1.2; letter-spacing:-.02em; margin:0 0 10px; color:#f8fafc; }
.byline { color:var(--faint); font-size:.85rem; margin:0 0 28px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.article h2 { font-size:1.4rem; line-height:1.3; letter-spacing:-.01em; margin:34px 0 12px; color:#f1f5f9; }
.article h3 { font-size:1.1rem; margin:24px 0 8px; color:#f1f5f9; }
.article p { margin:0 0 16px; color:#cbd5e1; }
.article ul { margin:0 0 18px; padding-left:20px; color:#cbd5e1; }
.article li { margin:0 0 9px; }
.article strong { color:#f1f5f9; }
.article em { color:#e2e8f0; }

/* In-article CTA */
.article-cta { margin:40px 0 8px; padding:24px; background:var(--panel2); border:1px solid var(--border); border-radius:16px; text-align:center; }
.article-cta h3 { margin:0 0 8px; color:#f8fafc; }
.article-cta p { margin:0 0 16px; color:var(--dim); font-size:.92rem; }

/* Series nav (prev/next) */
.series-nav { display:flex; justify-content:space-between; gap:12px; margin:36px 0 0; padding-top:20px; border-top:1px solid var(--border); font-size:.9rem; }
.series-nav a { color:var(--accent); }
.series-nav span { color:var(--faint); }

/* Guides index */
.hub { max-width:900px; margin:0 auto; padding:48px 22px; }
.hub-hero { text-align:center; margin-bottom:40px; }
.hub-hero h1 { font-size:2.3rem; letter-spacing:-.02em; margin:0 0 10px; color:#f8fafc; }
.hub-hero p { color:var(--dim); font-size:1.05rem; max-width:560px; margin:0 auto; }
.hub-section-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:36px 0 14px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.card { display:block; background:var(--panel2); border:1px solid var(--border); border-radius:14px; padding:18px; transition:border-color .15s, transform .15s; }
.card:hover { border-color:#334155; transform:translateY(-2px); }
.card .kicker { font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin:0 0 7px; }
.card h3 { margin:0 0 7px; font-size:1.02rem; color:#f1f5f9; line-height:1.35; }
.card p { margin:0; color:var(--dim); font-size:.86rem; line-height:1.5; }
.card.soon { opacity:.55; }
.card.soon .kicker { color:var(--faint); }

/* Footer */
.site-footer { border-top:1px solid var(--border); margin-top:48px; }
.site-footer .wrap { max-width:1100px; margin:0 auto; padding:26px 22px; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:center; color:var(--faint); font-size:.82rem; }
.site-footer a { color:var(--dim); }
.site-footer a:hover { color:var(--text); }

@media (max-width:640px){ .article h1{font-size:1.7rem;} .hub-hero h1{font-size:1.9rem;} .site-header nav a:not(.btn){display:none;} }

/* Directory rebuild additions (staged 2026-11-02): wide article + tables.
   Same design tokens as the guides stylesheet above. */
.article.wide { max-width:1100px; }
.table-wrap { overflow-x:auto; margin:0 0 18px; }
.article table { width:100%; border-collapse:collapse; font-size:.9rem; background:var(--panel2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.article th, .article td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; color:#cbd5e1; }
.article thead th { color:#f1f5f9; background:var(--panel); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.article table.facts th { width:220px; color:#f1f5f9; background:var(--panel); }
.article tbody tr:last-child th, .article tbody tr:last-child td { border-bottom:none; }
.note { font-size:.85rem; color:var(--dim); border-left:3px solid var(--border); padding-left:12px; }