/* أدوات المقالات التفاعلية: بألوان الموقع وخطوطه، ومقاسات لمس مريحة على الجوال */
.tz-tool{--tl-ac:var(--x-ac,#0F5C5A);--tl-ac2:var(--x-ac2,#D99A2B);--tl-ink:var(--x-ink,#1A1F2B);--tl-mut:var(--x-muted,#5F6675);--tl-line:var(--x-line,#E3E1DA);
  margin:2em 0;border-radius:calc(var(--x-r,14px) + 6px);padding:clamp(18px,3vw,26px);background:color-mix(in srgb,var(--tl-ac2) 7%,var(--x-surface,#fff));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tl-ac2) 45%,transparent);display:grid;gap:16px;color:var(--tl-ink);font-family:var(--x-fb,inherit)}
.tz-tool .tz-tl-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.tz-tool .tz-tl-h b{font-family:var(--x-fd,inherit);font-size:1.2em;line-height:1.4}
.tz-tool .tz-tl-h small{color:var(--tl-mut);font-size:.8em}
.tz-tool .tz-tl-intro{margin:0;color:var(--tl-mut);font-size:.95em;line-height:1.8}
.tz-tool .tz-tl-b,.tz-tool .tz-tl-in-w{display:grid;gap:14px}
.tz-tl-in{display:grid;gap:8px;font-size:.95em}
.tz-tl-in>span{display:flex;justify-content:space-between;gap:10px}
.tz-tl-in b{color:var(--tl-ac);font-weight:700}
.tz-tl-in input[type=range]{width:100%;accent-color:var(--tl-ac);height:28px;margin:0}
.tz-tl-outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tz-tl-out{background:var(--x-surface,#fff);border-radius:var(--x-r,14px);padding:14px 16px;display:grid;gap:2px}
.tz-tl-out small{color:var(--tl-mut);font-size:.82em}
.tz-tl-out b{font-family:var(--x-fd,inherit);font-size:1.7em;line-height:1.3}
.tz-tl-out.hi{background:var(--tl-ac);color:var(--x-on,#fff)}.tz-tl-out.hi small{color:inherit;opacity:.82}
.tz-tl-err{margin:0;color:#b3261e;font-size:.85em}
.tz-tl-bar{height:6px;border-radius:99px;background:var(--tl-line);overflow:hidden}
.tz-tl-bar i{display:block;height:100%;width:0;background:var(--tl-ac);border-radius:inherit;transition:width .35s ease}
.tz-tl-step{color:var(--tl-mut);font-size:.82em}
.tz-tl-q{margin:0;font-weight:700;font-size:1.05em;line-height:1.7}
.tz-tl-opts,.tz-tl-yn{display:grid;gap:8px}
.tz-tl-yn{grid-template-columns:1fr 1fr}
.tz-tool button{font:inherit;cursor:pointer;min-height:46px;border-radius:calc(var(--x-r,14px) - 2px);padding:10px 16px;text-align:start;border:1.5px solid var(--tl-line);background:var(--x-surface,#fff);color:var(--tl-ink);transition:border-color .15s,background .15s}
.tz-tl-yn button{text-align:center;font-weight:700}
.tz-tool button:hover{border-color:var(--tl-ac)}
.tz-tool button:focus-visible{outline:2px solid var(--tl-ac);outline-offset:2px}
.tz-tool button[aria-pressed=true]{background:var(--tl-ac);border-color:var(--tl-ac);color:var(--x-on,#fff)}
.tz-tl-res{display:grid;gap:6px;background:var(--x-surface,#fff);border-radius:var(--x-r,14px);padding:18px}
.tz-tl-res small{color:var(--tl-mut)}.tz-tl-res b{font-family:var(--x-fd,inherit);font-size:1.35em;color:var(--tl-ac)}.tz-tl-res p{margin:0;line-height:1.8}
.tz-tl-res .tz-tl-again{justify-self:start;margin-top:6px;min-height:40px;padding:6px 14px;font-size:.9em}
.tz-tl-ck{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tz-tl-ck li{margin:0}
.tz-tl-ck label{display:flex;gap:10px;align-items:center;min-height:44px;padding:6px 12px;border-radius:calc(var(--x-r,14px) - 2px);background:var(--x-surface,#fff);cursor:pointer}
.tz-tl-ck input{width:20px;height:20px;accent-color:var(--tl-ac);margin:0;flex:none}
.tz-tl-ck input:checked+span{color:var(--tl-mut);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--tl-mut) 50%,transparent)}
.tz-tl-ans{background:var(--x-surface,#fff);border-radius:var(--x-r,14px);padding:14px 16px;display:grid;gap:4px;line-height:1.8}
.tz-tl-ans[hidden]{display:none}.tz-tl-ans p{margin:0}.tz-tl-ans.ok b{color:#1a7f37}.tz-tl-ans.no b{color:#b3261e}
@media (prefers-reduced-motion:reduce){.tz-tl-bar i{transition:none}}