/* Strona główna: sekcja „Narzędzia” (wtyczka 0.49.40, motyw 0.27.22+) */
.tlh { --tlh-d: #4fb8ff; --tlh-c: #22c55e; --tlh-track: rgba(255, 255, 255, .08); --tlh-ease: cubic-bezier(.22, 1, .36, 1); }
html[data-theme="light"] .tlh { --tlh-d: #1f7fc4; --tlh-c: #12924a; --tlh-track: rgba(0, 0, 0, .07); }
.tlh .tl-ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tlh-kicker { margin: 0 0 10px; text-align: center; }
.tlh-kicker span { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tlh-c) 16%, transparent); color: var(--tlh-c); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tlh-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 18px; margin-top: 26px; }
.tlh-card { --a: var(--tlh-d); position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--mcq-border); border-radius: 24px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--a) 14%, transparent), transparent 60%), var(--mcq-card); color: var(--mcq-text); text-decoration: none; overflow: hidden; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--tlh-ease), transform .6s var(--tlh-ease), border-color .25s ease, box-shadow .25s ease; }
.tlh-card--calc { --a: var(--tlh-c); transition-delay: .1s; }
.tlh.is-in .tlh-card { opacity: 1; transform: none; }
.tlh-card:hover { border-color: color-mix(in srgb, var(--a) 60%, var(--mcq-border)); box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--a) 70%, #000); }
.tlh-card-top { display: flex; align-items: center; gap: 12px; color: var(--mcq-strong); text-decoration: none; }
.tlh-card-top .tl-ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--a); }
.tlh-card-top strong { font-size: 1.2rem; }
.tlh-card-text { color: var(--mcq-soft); font-size: .95rem; line-height: 1.55; }
.tlh-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--a); font-weight: 800; text-decoration: none; }
.tlh-go span { transition: transform .25s var(--tlh-ease); }
.tlh-card:hover .tlh-go span, .tlh-go:hover span { transform: translateX(4px); }
/* słownik: makieta wyszukiwarki */
.tlh-mock { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--mcq-border); border-radius: 18px; background: var(--mcq-bg); }
.tlh-mock-q { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 13px; background: var(--mcq-card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--a) 45%, transparent); color: var(--mcq-strong); font-weight: 700; }
.tlh-mock-q .tl-ico { color: var(--a); }
.tlh-caret { width: 2px; height: 1.2em; margin-left: -8px; background: var(--a); animation: tlh-caret 1s steps(1) infinite; }
@keyframes tlh-caret { 50% { opacity: 0; } }
.tlh-mock-res { display: grid; gap: 8px; min-height: 196px; align-content: start; }
.tlh-r { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--mcq-border); border-radius: 12px; background: var(--mcq-card); animation: tlh-in .45s var(--tlh-ease) both; animation-delay: calc(var(--i) * 90ms); }
.tlh-r b { display: flex; align-items: center; gap: 8px; color: var(--mcq-strong); font-size: .95rem; }
.tlh-r b em { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--a); font-size: .64rem; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tlh-r b em.is-drug { --a: var(--tlh-c); }
.tlh-r span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mcq-muted); font-size: .82rem; line-height: 1.4; }
.tlh-r mark { padding: 0; border-radius: 3px; background: color-mix(in srgb, var(--mcq-primary) 35%, transparent); color: inherit; }
.tlh-r-x { display: flex; gap: 6px; margin-top: 4px; }
.tlh-r-x i { padding: 2px 8px; border-radius: 999px; background: var(--mcq-bg); color: var(--mcq-soft); font-size: .72rem; font-style: normal; font-weight: 700; }
@keyframes tlh-in { from { opacity: 0; transform: translateY(8px); } }
/* kalkulatory: wskaźnik i lista */
.tlh-gauge { display: grid; place-items: center; padding: 6px 0 0; }
.tlh-gauge svg { width: min(240px, 80%); height: auto; overflow: visible; }
.tlh-gauge-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--tlh-ease) .2s; }
.tlh.is-in .tlh-gauge-arc { stroke-dashoffset: 0; }
.tlh-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(-90deg); transition: transform 1.1s cubic-bezier(.34, 1.4, .5, 1); }
.tlh-needle circle { fill: #fff; stroke: var(--mcq-card, #232833); stroke-width: 3.5; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.tlh-needle .tlh-needle-in { fill: #1f2430; stroke: none; filter: none; }
.tlh-gauge-val { fill: var(--mcq-strong); font: 800 26px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tlh-gauge-l { fill: var(--mcq-soft); font: 700 11px system-ui, sans-serif; }
.tlh-calcs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tlh-calcs li { display: flex; }
.tlh-calcs li > a { flex: 1; }
.tlh-calcs a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--mcq-border); border-radius: 13px; background: var(--mcq-bg); color: var(--mcq-strong); font-size: .9rem; font-weight: 700; line-height: 1.25; text-decoration: none; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--tlh-ease), transform .45s var(--tlh-ease), border-color .2s ease, background .2s ease; }
.tlh.is-in .tlh-calcs a { opacity: 1; transform: none; }
.tlh-calcs li:nth-child(2) a { transition-delay: .06s; } .tlh-calcs li:nth-child(3) a { transition-delay: .12s; } .tlh-calcs li:nth-child(4) a { transition-delay: .18s; } .tlh-calcs li:nth-child(5) a { transition-delay: .24s; } .tlh-calcs li:nth-child(6) a { transition-delay: .3s; }
.tlh-calcs a:hover { border-color: var(--a); background: color-mix(in srgb, var(--a) 8%, var(--mcq-bg)); }
.tlh-calcs .tl-ico { color: var(--a); }
@media (max-width: 860px) { .tlh-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .tlh-calcs { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
	.tlh-card, .tlh-calcs a { opacity: 1; transform: none; transition: none; }
	.tlh-gauge-arc { stroke-dashoffset: 0; transition: none; }
	.tlh-caret, .tlh-r { animation: none; }
}