/* === Templates Page Styles ===
   The page reuses the Setup page layout (setup.css: .setup-page, .setup-section, .setup-code, .setup-note,
   .setup-table, .method-cards). Only what Setup has no class for lives here, prefixed tpl-. */

.tpl-page { max-width: 960px; }

/* Hero install line */
.tpl-install {
    display: flex; align-items: center; gap: 0.6rem;
    max-width: 520px; margin: 1.75rem auto 0; padding: 0.55rem 0.6rem 0.55rem 1rem;
    background: rgba(249, 115, 22, 0.06); border: 1px solid rgba(249, 115, 22, 0.3); border-radius: 10px;
}
.tpl-install .tpl-prompt { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; user-select: none; }
.tpl-install code { flex: 1; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--text); background: none; }
.tpl-hero-note { margin: 0.75rem auto 0; font-size: 0.9rem; color: var(--text2); }

/* Cards: seven, so the grid fills its rows by width instead of Setup's fixed four */
.tpl-page .method-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tpl-page .method-card { position: relative; }
.tpl-page .method-card .method-short {
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent);
}
.tpl-page .method-card .method-tag { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.6rem; padding: 0.1rem 0.4rem; }

/* Common ground list */
.tpl-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tpl-facts li {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem;
    font-size: 0.9rem; color: var(--text2); line-height: 1.55;
}
.tpl-facts li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.2rem; }
.tpl-facts code {
    background: var(--bg3); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.8rem;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace; color: var(--text);
}

/* Module and host diagram */
.tpl-diagram { margin: 1.25rem 0 0.5rem; padding: 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.tpl-diagram svg { display: block; width: 100%; height: auto; }
.tpl-diagram .box { fill: var(--bg3); stroke: var(--border); stroke-width: 1.5; }
.tpl-diagram .box.main { fill: rgba(249, 115, 22, 0.08); stroke: rgba(249, 115, 22, 0.55); }
.tpl-diagram .t1 { fill: var(--text); font: 600 14px -apple-system, 'Segoe UI', sans-serif; }
.tpl-diagram .t2 { fill: var(--text2); font: 12px 'JetBrains Mono', monospace; }
.tpl-diagram .arrow { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.tpl-diagram .head { fill: var(--accent); }

/* File tree */
.tpl-tree {
    margin: 1rem 0; padding: 1rem 1.25rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace; font-size: 0.8rem; line-height: 1.65; color: var(--text); overflow-x: auto;
    white-space: pre;
}
.tpl-tree .c { color: var(--text2); }

/* Small headings inside a template section */
.setup-section h3.tpl-h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--text); }

/* Option tables are narrower than the comparison table */
.tpl-page .setup-table.tpl-options { margin: 0.75rem 0 1rem; }
.tpl-page .setup-table code {
    background: var(--bg3); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.8rem;
    font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
}

@media (max-width: 600px) {
    .tpl-facts { grid-template-columns: 1fr; }
    .tpl-install code { font-size: 0.8rem; }
}