/*
 * tool-guide.css — styles for the visible Persian guide block emitted by
 * partials/tool_guide_fa.php. Moved out of an inline <style> block
 * (2026-10-28) because a <style> element inside <body> fails W3C validation.
 */

.tool-guide { background: var(--surface, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: var(--radius, 6px); padding: 24px; margin: 28px 0 20px; font-family: Tahoma, Arial, sans-serif; line-height: 2; color: var(--text, #1a1a1a); text-align: right; }
.tool-guide h2 { font-size: 1.15rem; margin: 0 0 12px; }
.tool-guide h3 { font-size: 1rem; margin: 22px 0 8px; }
.tool-guide p { font-size: 0.92rem; margin: 0 0 10px; }
.tool-guide dl { margin: 0; }
.tool-guide dt { font-size: 0.92rem; font-weight: 700; margin-top: 12px; }
.tool-guide dd { font-size: 0.9rem; margin: 2px 0 0; color: var(--muted, #555); }
.tool-guide .tg-ltr { font-family: Consolas, Menlo, 'Courier New', monospace; font-size: 0.88em; unicode-bidi: isolate; }
.tool-guide a { color: var(--accent, #2563eb); text-decoration: none; }
.tool-guide a:hover { text-decoration: underline; }
.tool-guide dd p { font-size: inherit; margin: 0 0 6px; }
.tool-guide dd ul { margin: 4px 0 8px; padding: 0 22px 0 0; }
.tool-guide dd li { margin: 0 0 4px; }
.tool-guide .tg-result { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-size: 0.9rem; }
.tool-guide .tg-badge { flex: 0 0 auto; min-width: 64px; text-align: center; padding: 0 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; line-height: 1.8; }
.tool-guide .tg-good    { background: #dcfce7; color: #15803d; }
.tool-guide .tg-bad     { background: #fee2e2; color: #dc2626; }
.tool-guide .tg-warn    { background: #fef9c3; color: #a16207; }
.tool-guide .tg-neutral { background: #e5e7eb; color: #374151; }
@media (max-width: 500px) { .tool-guide { padding: 18px 14px; } .tool-guide .tg-result { flex-direction: column; gap: 2px; } }