/* ============================================================================
 * trap-seo.css — public opening-trap pages (/chess-opening-traps/)
 * Theme variables are set per wrapper: .tseo-light / .tseo-dark (see PHP).
 * Mobile-first; no hover movement (colour / border only).
 * ========================================================================== */
.tseo { --ts-surface:#fff; --ts-surface2:#f4f6f9; --ts-text:#212529; --ts-muted:#5f6b76; --ts-border:#dee2e6;
        --ts-accent:#d6336c; --ts-accent-text:#fff; --ts-bad:#c92a2a; --ts-good:#2b8a3e; --ts-link:#0b5ed7;
        color:var(--ts-text); }
.tseo-dark { --ts-surface:#252830; --ts-surface2:#1f2329; --ts-text:#e4e6eb; --ts-muted:#9aa3ad; --ts-border:#3a3f4a;
        --ts-accent:#e64980; --ts-bad:#ff6b6b; --ts-good:#69db7c; --ts-link:#74b0ff; }
.tseo a { color:var(--ts-link); }
.tseo h1, .tseo h2, .tseo h3 { color:var(--ts-text); }
.tseo .tseo-wrap { max-width:960px; margin:1.5rem auto 3rem; padding:0 12px; }
.tseo .tseo-narrow { max-width:780px; }
.tseo .tseo-crumbs { font-size:.85rem; color:var(--ts-muted); margin-bottom:.75rem; }
.tseo .tseo-crumbs a { color:var(--ts-muted); text-decoration:underline; }
.tseo .tseo-crumbs span { margin:0 .35rem; }
.tseo h1 { font-size:1.7rem; line-height:1.25; font-weight:700; margin:0 0 .4rem; }
.tseo h2 { font-size:1.3rem; font-weight:700; margin:2rem 0 .75rem; }
.tseo .tseo-sub { color:var(--ts-muted); font-size:1.05rem; margin-bottom:1rem; }
.tseo .tseo-lead { font-size:1.05rem; line-height:1.6; }
.tseo .tseo-surface { background:var(--ts-surface); color:var(--ts-text); border:1px solid var(--ts-border); border-radius:14px; padding:1rem; }
.tseo p { line-height:1.65; }

/* badges */
.tseo .tseo-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 1rem; }
.tseo .tseo-badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600;
        background:var(--ts-surface2); color:var(--ts-text); border:1px solid var(--ts-border); }
.tsc-lvl, .tseo-lvl { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700; color:#fff; }
.tsc-lvl-1, .tseo-lvl-1 { background:#2b8a3e; }
.tsc-lvl-2, .tseo-lvl-2 { background:#1c7ed6; }
.tsc-lvl-3, .tseo-lvl-3 { background:#e67700; }
.tsc-lvl-4, .tseo-lvl-4 { background:#d6336c; }
.tsc-lvl-5, .tseo-lvl-5 { background:#6741d9; }

/* viewer */
.tv { max-width:520px; margin:0 auto; }
.tv .tv-tabs { display:flex; gap:.5rem; margin-bottom:.75rem; }
.tv .tv-tab { flex:1 1 0; min-height:44px; border-radius:10px; border:1px solid var(--ts-border); background:var(--ts-surface2);
        color:var(--ts-text); font-weight:600; cursor:pointer; }
.tv .tv-tab.is-on { background:var(--ts-accent); border-color:var(--ts-accent); color:#fff; }
.tv .tv-board-wrap { width:100%; max-width:480px; margin:0 auto; }
.tv .tv-status { min-height:3.2em; margin:.75rem 0; padding:.6rem .8rem; border-radius:10px; background:var(--ts-surface2);
        color:var(--ts-text); border:1px solid var(--ts-border); font-size:.95rem; line-height:1.4; }
.tv .tv-status.is-bad { border-color:var(--ts-bad); }
.tv .tv-status.is-good { border-color:var(--ts-good); }
.tv .tv-ctrls { display:flex; gap:.5rem; justify-content:center; }
.tv .tv-btn { flex:1 1 0; max-width:96px; min-height:44px; border-radius:10px; border:1px solid var(--ts-border);
        background:var(--ts-surface2); color:var(--ts-text); font-size:1rem; cursor:pointer; }
.tv .tv-btn:disabled { opacity:.45; cursor:default; }
.tv .tv-btn.is-main { background:var(--ts-accent); border-color:var(--ts-accent); color:#fff; }
.tv .tv-actions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.75rem; }
.tv .tv-action { min-height:44px; padding:.4rem 1rem; border-radius:10px; border:1px solid var(--ts-accent);
        background:var(--ts-accent); color:#fff; font-weight:600; cursor:pointer; }
.tv .tv-action.is-ghost { background:transparent; color:var(--ts-accent); }

/* Always a light board, even when the visitor's trainer dark-mode flag is on. */
.cgl-dark .tv .cgl-board .white-1e1d7 { background-color:#f0d9b5; }
.cgl-dark .tv .cgl-board .black-3c85d { background-color:#b58863; }
.cgl-dark .tv .cgl-board .white-1e1d7 .notation-322f9 { color:#b58863; }
.cgl-dark .tv .cgl-board .black-3c85d .notation-322f9 { color:#f0d9b5; }

/* move list */
.tseo .tv-moves { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.25rem .5rem; margin:0; padding:0; list-style:none; }
.tseo .tv-moves li { display:flex; align-items:center; gap:.25rem; font-family:Menlo,Consolas,monospace; font-size:.92rem; }
.tseo .tv-moves .tv-n { width:2rem; color:var(--ts-muted); text-align:right; flex:0 0 auto; }
.tseo .tv-mv { flex:1 1 0; min-height:36px; padding:.2rem .4rem; border-radius:6px; border:1px solid transparent; background:transparent;
        color:var(--ts-text); text-align:left; cursor:pointer; font:inherit; }
.tseo .tv-mv:hover { border-color:var(--ts-border); }
.tseo .tv-mv.is-cur { background:var(--ts-surface2); border-color:var(--ts-accent); }
.tseo .tv-mv.is-bait { color:var(--ts-bad); font-weight:700; }
.tseo .tv-mv.is-bait::after { content:'?'; }

/* facts */
.tseo .tseo-facts { display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:.4rem .8rem; margin:0; }
.tseo .tseo-facts dt { color:var(--ts-muted); font-weight:600; font-size:.9rem; }
.tseo .tseo-facts dd { margin:0; word-break:break-word; }
.tseo .tseo-fen { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.tseo .tseo-fen code { flex:1 1 220px; padding:.35rem .5rem; border-radius:8px; background:var(--ts-surface2); color:var(--ts-text);
        border:1px solid var(--ts-border); font-size:.8rem; word-break:break-all; }
.tseo .tseo-copy { min-height:36px; padding:.2rem .7rem; border-radius:8px; border:1px solid var(--ts-border);
        background:var(--ts-surface2); color:var(--ts-text); cursor:pointer; }

/* cards */
.tseo .tsc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.6rem; }
.tseo a.tsc { display:flex; flex-direction:column; gap:.4rem; padding:.7rem .85rem; border-radius:12px; text-decoration:none;
        background:var(--ts-surface); color:var(--ts-text); border:1px solid var(--ts-border); }
.tseo a.tsc:hover { border-color:var(--ts-accent); text-decoration:none; }
.tseo .tsc-title { font-weight:700; line-height:1.3; color:var(--ts-text); }
.tseo .tsc-meta { display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:center; font-size:.8rem; color:var(--ts-muted); }
.tseo .tsc-out i { color:var(--ts-accent); }

/* hub */
.tseo .tseo-stats { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.tseo .tseo-stat { flex:1 1 90px; text-align:center; padding:.6rem; border-radius:12px; background:var(--ts-surface); border:1px solid var(--ts-border); }
.tseo .tseo-stat b { display:block; font-size:1.5rem; color:var(--ts-accent); }
.tseo .tseo-stat span { font-size:.8rem; color:var(--ts-muted); }
.tseo .tseo-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.tseo a.tseo-chip { display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.3rem .8rem; border-radius:999px; font-size:.88rem;
        background:var(--ts-surface); color:var(--ts-text); border:1px solid var(--ts-border); text-decoration:none; }
.tseo a.tseo-chip:hover { border-color:var(--ts-accent); text-decoration:none; }
.tseo a.tseo-chip small { color:var(--ts-muted); }
.tseo .tseo-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.tseo .tseo-filter input, .tseo .tseo-filter select { min-height:44px; border-radius:10px; border:1px solid var(--ts-border);
        background:var(--ts-surface); color:var(--ts-text); padding:.3rem .7rem; }
.tseo .tseo-filter input { flex:1 1 220px; }
.tseo .tseo-famblock { margin-top:1.25rem; }
.tseo .tseo-famblock h3 { font-size:1.05rem; margin:0 0 .5rem; }

/* faq / cta */
.tseo details.tseo-faq { background:var(--ts-surface); color:var(--ts-text); border:1px solid var(--ts-border); border-radius:12px; margin-bottom:.5rem; }
.tseo details.tseo-faq summary { cursor:pointer; padding:.8rem 1rem; font-weight:600; min-height:44px; }
.tseo details.tseo-faq p { margin:0; padding:0 1rem 1rem; color:var(--ts-text); }
.tseo .tseo-cta { margin:2rem 0; padding:1.5rem 1rem; text-align:center; border-radius:16px; color:#fff;
        background:linear-gradient(135deg,#a61e4d 0%,#5f3dc4 100%); }
.tseo .tseo-cta h2, .tseo .tseo-cta p { color:#fff; margin-top:0; }
.tseo .tseo-cta .btn { min-height:48px; font-weight:700; padding:.6rem 1.6rem; background:#fff; color:#a61e4d; border:0; }
.tseo .tseo-cta a.tseo-cta-link { display:block; margin-top:.9rem; color:#fff; text-decoration:underline; }

@media (max-width:640px) {
    .tseo h1 { font-size:1.45rem; }
    .tseo .tseo-facts { grid-template-columns:1fr; gap:.1rem; }
    .tseo .tseo-facts dd { margin-bottom:.5rem; }
    .tseo .tv-moves { grid-template-columns:repeat(2,1fr); }
}