/* Shared browser utilities use the same fields, actions and reading surfaces. */
.language-tools { font-family: var(--font-body); line-height: 1.6; }
.language-tools[lang="en"] { --font-body: "Google Sans Flex", Arial, sans-serif; }
.language-tools [hidden] { display: none !important; }
.language-tools :is(button, input, select, textarea) { font-family: inherit; }
.language-tools :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent-readable, var(--accent)); outline-offset: -2px; }
.lt-panel { min-width: 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.lt-panel + .lt-panel { margin-top: 20px; }
.lt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px; }
.lt-grid > .lt-panel { margin-top: 0; }
.lt-field { display: block; min-width: 0; margin-bottom: 16px; }
.lt-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.language-tools .lt-input { display: block; width: 100%; min-width: 0; padding: 13px 15px; border: 1px solid var(--control-border, var(--line)); border-radius: 10px; background: var(--surface); color: var(--ink); font: 20px/1.7 Arial, sans-serif; }
.language-tools textarea.lt-input { min-height: 160px; resize: vertical; }
.language-tools .lt-input::placeholder { color: var(--muted); opacity: .7; }
.lt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 15px; }
.lt-toolbar .zl-button { min-height: 38px; padding: 8px 14px; }
.lt-toolbar button:disabled { cursor: default; opacity: .45; }
.lt-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-block: 14px; font-size: 13px; }
.lt-options label { display: inline-flex; align-items: center; gap: 8px; }
.lt-options input[type="checkbox"], .lt-options input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }
.lt-options select { width: auto; min-width: 100px; padding: 7px 10px; }
.lt-output { min-width: 0; min-height: 160px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--ink); overflow-wrap: anywhere; }
.language-tools .lt-empty { color: var(--muted); font-size: 14px; line-height: 1.7; }
.language-tools .lt-status { min-height: 1.6em; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.language-tools .lt-status[data-kind="error"], .language-tools .lt-status.is-error { color: var(--zl-error); }
.language-tools .lt-status[data-kind="success"], .language-tools .lt-status.is-success { color: var(--zl-success); }
.lt-reading { color: var(--ink); font-family: Arial, sans-serif; font-size: 28px; line-height: 2.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-reading rt { color: var(--muted); font: 12px/1.5 Arial, sans-serif; }
.language-tools .lt-example { font-size: 13px; line-height: 1.7; }
.lt-guide { margin-top: 32px; }
.lt-guide h2 { margin-bottom: 14px; }
.lt-guide :is(p, li) { color: var(--muted); font-size: 14px; line-height: 1.85; }
.lt-guide ol { padding-inline-start: 22px; }
.lt-guide li + li { margin-top: 10px; }
.language-tools .lt-guide strong { color: var(--ink); }
:root[data-font="noto-kufi-arabic"] .language-tools p { font-family: var(--font-body); color: var(--muted); font-size: 14px; line-height: 1.8; }
:root[data-font="noto-kufi-arabic"] .language-tools :is(h2,h3,li,label,summary) { line-height: 1.6; }
:root[data-font="noto-kufi-arabic"] .language-tools .lt-status { font-size: 13px; line-height: 1.6; }
:root[data-font="noto-kufi-arabic"] .language-tools .lt-status:is([data-kind="error"],.is-error) { color: var(--zl-error); }
:root[data-font="noto-kufi-arabic"] .language-tools .lt-status:is([data-kind="success"],.is-success) { color: var(--zl-success); }
@media (max-width: 720px) {
    .lt-grid { grid-template-columns: 1fr; gap: 16px; }
    .lt-panel { padding: 18px; border-radius: 14px; }
    .lt-output { padding: 16px; }
    .lt-options { gap: 10px 14px; }
}
@media print {
    .language-tools { color: #111; --ink: #111; --muted: #555; --surface: #fff; --canvas: #fff; --line: #ccc; }
    .language-tools .lt-panel { padding: 0; border: 0; box-shadow: none; }
    .language-tools .lt-toolbar, .language-tools .lt-status, .language-tools .lt-guide, .language-tools .lt-options { display: none !important; }
    .language-tools .lt-output { min-height: 0; border: 0; background: white; }
}