/* ============================================================================
   Розділ «Корисне» — калькулятори, таблиці, пояснення.
   Доповнює site.css і seo.css; власних токенів не вводить.

   Мобільний — головний сценарій: людина стоїть над платою з паяльником
   у другій руці. Звідси великі поля, великий результат і жодних
   горизонтальних скролів, крім самих таблиць.
   ========================================================================== */

/* Контейнер тіла сторінки. Ті самі --maxw і --pad, що в хедері, лендингу
   й блоках seo.css (.cat-head, .cat-cta) — тіло тепер вирівняне з ними на
   всіх ширинах, а не розповзається на весь екран. Блоки seo.css центруються
   самі, тому їх у .tool-wrap НЕ загортаємо — інакше отримали б подвійний
   відступ. */
.tool-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ───────────────────────────── банер індексу ───────────────────────────── */

.tool-hero{
  max-width:var(--maxw);margin:0 auto;padding:96px var(--pad) 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
}
.tool-hero__text{flex:1 1 auto;min-width:0}
.tool-hero h1{
  font-family:var(--font-display);font-size:clamp(28px,5vw,42px);
  font-weight:700;line-height:1.14;letter-spacing:-.022em;margin:0;color:var(--text);
}
.tool-hero .cat-head__intro{margin:14px 0 0;max-width:56ch}
.tool-hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;
}
.tool-hero__meta span{
  font-size:13px;color:var(--muted-bright);
  padding:5px 12px;background:var(--surface);border:1px solid var(--border);border-radius:999px;
}
.tool-hero__meta strong{color:var(--amber-text);font-weight:700}
/* Декор праворуч — не звужується й ховається на планшеті вниз. */
.tool-hero__art{flex:0 0 240px;width:240px;height:150px;align-self:center}

/* ───────────────────────────── пошук по розділу ───────────────────────────── */

.tool-find{margin:26px 0 0}
.tool-find__label{
  display:block;margin:0 0 6px;
  font-size:12.5px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
.tool-find__input{
  width:100%;max-width:420px;padding:12px 14px;
  font:500 16px/1.2 var(--font-body);color:var(--text);
  background:var(--surface);border:1px solid var(--border-bright);border-radius:10px;
  appearance:none;-webkit-appearance:none;
}
.tool-find__input:focus{outline:2px solid var(--amber-cta);outline-offset:1px;border-color:transparent}
.tool-find__empty{
  margin:14px 0 0;padding:14px 16px;font-size:14.5px;line-height:1.55;
  color:var(--muted-bright);background:var(--surface);
  border:1px dashed var(--border-bright);border-radius:12px;
}

/* Явно, а не покладаючись на дефолт браузера: якщо в цих класах колись
   з’явиться display, [hidden] перестане діяти (уже наступали на це з полями). */
.tool-card[hidden],.tool-cat[hidden],.tool-find__empty[hidden],.tool-find[hidden]{display:none}

/* ───────────────────────────── категорії ───────────────────────────── */

.tool-cat{margin:34px 0 0}
.tool-cat:first-of-type{margin-top:26px}
.tool-cat__head{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px}
.tool-cat__glyph{
  flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
  color:var(--amber-strong);background:var(--amber-glow);
  border:1px solid var(--border);border-radius:11px;
}
.tool-cat__title{
  display:flex;align-items:center;gap:9px;margin:2px 0 0;
  font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--text);
}
.tool-cat__count{
  font-size:12.5px;font-weight:600;color:var(--muted);
  padding:1px 9px;background:var(--surface-2);border-radius:999px;
}
.tool-cat__desc{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

.tool-cards{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.tool-card a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:4px;height:100%;
  padding:16px 18px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-card a:hover,.tool-card a:focus-visible{
  border-color:var(--amber);transform:translateY(-2px);
  box-shadow:0 6px 18px -12px rgba(17,28,42,.35);
}
.tool-card__icon{
  grid-row:1/3;align-self:start;
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--amber-strong);background:var(--bg);
  border:1px solid var(--border);border-radius:11px;
}
.tool-card__icon .p-ico{display:block}
.tool-card__name{grid-column:2;font-weight:600;font-size:16px;color:var(--text);align-self:center}
.tool-card__desc{grid-column:2;font-size:13px;line-height:1.5;color:var(--muted)}

@media (max-width:760px){
  .tool-hero{padding-top:84px;flex-direction:column;align-items:stretch;gap:18px}
  .tool-hero__art{align-self:flex-start;flex-basis:auto}
}

/* ───────────────────────────── віджет ───────────────────────────── */

.tool{
  margin:8px 0 30px;padding:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
}
.tool__lead{margin:0 0 14px;font-size:14.5px;color:var(--muted-bright)}

.tool__modes{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.tool__mode{
  flex:1 1 auto;min-width:88px;padding:10px 14px;
  font:600 14px/1 var(--font-body);color:var(--muted-bright);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  cursor:pointer;transition:all .15s ease;
}
.tool__mode:hover{border-color:var(--border-bright)}
.tool__mode.is-on{
  background:var(--amber-cta);border-color:var(--amber-cta);color:#fff;
}

/* Малюнок резистора. Смуги без JS лишаються прозорими — це не помилка,
   під віджетом є повна таблиця кольорів. */
.tool__res{display:block;width:100%;max-width:420px;margin:0 auto 18px;height:auto}
.tool__band{fill:transparent}

.tool__fields{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.tool__fields--ohm{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* justify-content:flex-end — щоб поля лишалися на одній лінії навіть тоді,
   коли підпис однієї комірки переноситься на два рядки, а сусідньої — ні. */
.tool__field{display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
/* Без цього рядка hidden не спрацьовує: display у класі перебиває
   дефолтний [hidden]{display:none} з таблиці стилів браузера. */
.tool__field[hidden]{display:none}
.tool__field--wide{grid-column:1/-1;margin:0 0 4px}
.tool__field>span{
  font-size:12.5px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
.tool__field select,
.tool__field input{
  width:100%;padding:12px 13px;
  font:500 16px/1.2 var(--font-body);color:var(--text);
  background:var(--bg);border:1px solid var(--border-bright);border-radius:10px;
  appearance:none;-webkit-appearance:none;
}
.tool__field select{
  /* Стрілку малюємо самі: системна на різних платформах з’їжджає. */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px;
}
.tool__field input:focus,
.tool__field select:focus{
  outline:2px solid var(--amber-cta);outline-offset:1px;border-color:transparent;
}

/* ───────────────────────────── результат ───────────────────────────── */

.tool__out{
  display:block;margin:18px 0 0;padding:16px 18px;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
}
.tool__out--sm{margin-top:10px;padding:12px 14px}
.tool__out-hint{font-size:14px;color:var(--muted)}

.tool__value{
  display:block;font:700 34px/1.15 var(--font-display);
  color:var(--amber-display);letter-spacing:-.01em;
}
.tool__out--sm .tool__value{font-size:24px;color:var(--amber-strong)}
.tool__tol{display:block;margin-top:3px;font-size:14px;font-weight:500;color:var(--muted-bright)}
.tool__note{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--muted-bright)}
.tool__warn{
  margin:10px 0 0;padding:10px 12px;font-size:14px;line-height:1.5;
  color:var(--warn);background:rgba(138,98,6,.07);
  border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
}
.tool__cta{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);
  font-size:14.5px;color:var(--text);
}
.tool__cta a{color:var(--amber-text);font-weight:600;white-space:nowrap}

.tool__bands-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:14px}

/* Сітка чотирьох величин у законі Ома */
.tool__grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.tool__cell{
  padding:12px 14px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;
}
.tool__cell.is-given{border-color:var(--border-bright);background:var(--surface-2)}
.tool__cell-label{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted)}
.tool__cell-value{display:block;margin-top:4px;font:700 19px/1.2 var(--font-display);color:var(--text)}
.tool__cell.is-given .tool__cell-value{color:var(--muted-bright)}
.tool__cell-tag{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}

/* Кнопка копіювання результату. Стоїть сусідом до .tool__out, бо інструменти
   чистять вміст out і кнопка всередині зникала б після перерахунку. */
.tool__copy{
  display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;
  padding:8px 14px;cursor:pointer;
  font:600 13.5px/1 var(--font-body);color:var(--muted-bright);
  background:var(--bg);border:1px solid var(--border-bright);border-radius:9px;
  transition:border-color .15s ease,color .15s ease;
}
.tool__copy::before{
  content:'';width:13px;height:13px;flex:0 0 13px;
  border:1.6px solid currentColor;border-radius:3px;
  box-shadow:3px 3px 0 -1px var(--bg),4.6px 4.6px 0 -1px currentColor;
}
.tool__copy:hover{border-color:var(--amber);color:var(--amber-text)}
.tool__copy.is-done{color:var(--ok);border-color:var(--ok)}
.tool__copy.is-done::before{
  border-radius:50%;box-shadow:none;
  background:var(--ok);border-color:var(--ok);
}

.tool__reverse{margin:20px 0 0;padding-top:18px;border-top:1px dashed var(--border-bright)}

.tool__examples{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.tool__ex{
  padding:5px 11px;margin:0 3px 4px 0;
  font:600 13.5px/1 var(--font-body);color:var(--amber-text);
  background:var(--bg);border:1px solid var(--border-bright);border-radius:8px;cursor:pointer;
}
.tool__ex:hover{border-color:var(--amber);background:var(--amber-glow)}

/* ───────────────────────────── довідкова частина ───────────────────────────── */

.tool-ref{margin:0 0 30px}
.tool-ref h2{font:700 21px/1.25 var(--font-display);margin:0 0 12px;color:var(--text)}
.tool-ref h3{font:600 16.5px/1.3 var(--font-display);margin:22px 0 8px;color:var(--text)}
.tool-ref p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--muted-bright)}
.tool-ref__list{margin:0 0 14px;padding:0 0 0 20px;font-size:15px;line-height:1.65;color:var(--muted-bright)}
.tool-ref__list li{margin:0 0 5px}
.tool-ref strong{color:var(--text);font-weight:600}

.tool-formula{
  font:600 17px/1.4 var(--font-display);color:var(--text);
  padding:12px 16px;background:var(--surface);
  border-left:3px solid var(--amber);border-radius:0 10px 10px 0;
}

/* Таблиці скролять усередині себе — сторінка по горизонталі не їде ніколи. */
.tool-ref__scroll{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch}
.tool-table{border-collapse:collapse;width:100%;min-width:420px;font-size:14px}
.tool-table th,.tool-table td{
  padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);
}
.tool-table thead th{
  font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--border-bright);
}
.tool-table tbody th{font-weight:600;color:var(--text)}
.tool-table td{color:var(--muted-bright)}
.tool-table__color{display:flex;align-items:center;gap:9px;white-space:nowrap}

.tool-swatch{
  display:inline-block;width:15px;height:15px;flex:0 0 15px;
  border:1px solid var(--border-bright);border-radius:4px;
}
.tool-swatch--inline{width:13px;height:13px;flex:0 0 13px;vertical-align:-2px}

/* ───────────────────────────── FAQ і хвіст ───────────────────────────── */

.tool-faq{margin:0 0 26px}
.tool-faq h2{font:700 21px/1.25 var(--font-display);margin:0 0 12px;color:var(--text)}
.tool-faq__item{
  border:1px solid var(--border);border-radius:12px;
  background:var(--surface);margin:0 0 8px;
}
.tool-faq__item summary{
  padding:14px 16px;font-weight:600;font-size:15px;color:var(--text);
  cursor:pointer;list-style:none;
}
.tool-faq__item summary::-webkit-details-marker{display:none}
.tool-faq__item summary::after{content:'+';float:right;color:var(--muted);font-weight:400}
.tool-faq__item[open] summary::after{content:'−'}
.tool-faq__item p{
  margin:0;padding:0 16px 15px;font-size:14.5px;line-height:1.6;color:var(--muted-bright);
}

.tool-cta__cats{margin:12px 0 0;font-size:14.5px}
.tool-cta__cats a{color:var(--amber-text);font-weight:600;margin-right:14px;white-space:nowrap}

.tool-back{max-width:var(--maxw);margin:26px auto 0;padding:0 var(--pad);font-size:14.5px}
.tool-back a{color:var(--muted-bright)}

@media (max-width:520px){
  .tool{padding:16px 14px}
  .tool__value{font-size:29px}
  .tool__fields{grid-template-columns:1fr 1fr}
  .tool__field--wide{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  .tool-card a{transition:none}
  .tool-card a:hover{transform:none}
}