.breadcrumbs { padding-top: 1.5rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: #6b7280; }
.breadcrumbs a, .category-header h3 a { color: inherit; }
.tool-content { margin-top: 3rem; }
.tool-content > section { margin: 2rem 0; }
.tool-content h2, .category-detail h2 { margin-bottom: 1rem; font-size: 1.5rem; line-height: 1.35; }
.tool-content p, .category-intro p { max-width: 76ch; line-height: 1.8; }
.tool-content details { border-bottom: 1px solid #d1d5db; padding: 1rem 0; }
.tool-content summary { cursor: pointer; font-weight: 600; line-height: 1.6; }
.tool-content summary:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #6366f1; outline-offset: 4px; }
.category-intro { margin-bottom: 2rem; }
.footer-links h2 { font-size: 1rem; margin-bottom: .75rem; }
.tool-card h3 { font-size: 1rem; line-height: 1.5; }
@media (max-width: 600px) { .tool-content { margin-top: 2rem; } .breadcrumbs { font-size: .8rem; } .main-nav { flex-wrap: wrap; } }
/* Logical spacing and direction-aware controls for localized pages. */
.header-inner { flex-wrap: wrap; gap: 1rem; }
.header-actions { flex-wrap: wrap; gap: .75rem; }
.main-nav { flex-wrap: wrap; }
.language-switcher { position: relative; }
.language-switcher summary { cursor: pointer; padding: .5rem; }
.language-switcher nav { position: absolute; z-index: 30; inset-inline-end: 0; min-width: 12rem; max-height: 60vh; overflow-y: auto; background: var(--surface, #fff); border: 1px solid #d1d5db; border-radius: .75rem; padding: .5rem; box-shadow: 0 8px 24px #0002; }
.language-switcher nav a { display: block; padding: .5rem .75rem; color: #1f2937; text-decoration: none; }
.language-switcher nav a[aria-current] { font-weight: 700; background: #eef2ff; }
[dir="rtl"] .search-bar input, [dir="rtl"] .form-group input, [dir="rtl"] .form-group select, [dir="rtl"] .form-group textarea { text-align: start; }
[dir="rtl"] .search-bar input { padding-inline-start: 3.5rem; padding-inline-end: 1.25rem; }
[dir="rtl"] .search-icon { left: auto; inset-inline-start: 1.25rem; }
[dir="rtl"] .tool-card, [dir="rtl"] .tool-detail-header, [dir="rtl"] .footer-brand { text-align: start; }
[dir="rtl"] .breadcrumbs li + li::before { margin-right: 0; margin-inline-end: .5rem; }
.brand-name { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 600px) { .header-actions { width: 100%; justify-content: space-between; } }
/* The language control can create a second header row on narrow screens. */
.header-inner { height: auto; min-height: 72px; padding-block: .75rem; }
.data-preview { max-width: 100%; overflow: auto; margin-block: 1rem; max-height: 28rem; }
.data-preview table { border-collapse: collapse; min-width: 100%; }
.data-preview th, .data-preview td { border: 1px solid #d1d5db; padding: .5rem; text-align: start; white-space: pre-wrap; min-width: 5rem; max-width: 20rem; overflow-wrap: anywhere; }