/* Онлайн-инструменты (шаблон Т15 tool): общий каркас виджета. Свои стили инструмента — assets/tools/<виджет>.css. */

.tool-hero { padding-bottom: var(--s-md); }
.tool-hero h1 { font-size: clamp(1.8rem, 4.6vw, 2.8rem); }
.tool-hero .lead { margin-top: var(--s-xs); }

.tool-app {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: var(--s-md); box-shadow: 0 0 0 1px rgba(0,229,255,.04), 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: var(--s-sm); min-width: 0;
}
@media (max-width: 479px) { .tool-app { padding: var(--s-sm); border-radius: var(--r-md); } }

.tool-label { display: block; font-size: .88rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.tool-hint { font-size: .85rem; color: var(--text-muted); }
.tool-hint code { font-family: var(--font-mono); font-size: .92em; color: var(--cyan); background: var(--cyan-soft); padding: 1px 5px; border-radius: 4px; }

.tool-input, .tool-select, .tool-textarea {
  width: 100%; background: var(--bg-alt); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: .95rem; min-height: 44px;
}
.tool-textarea { font-family: var(--font-mono); font-size: .88rem; line-height: 1.55; resize: vertical; min-height: 200px; }
.tool-input:focus, .tool-select:focus, .tool-textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.tool-select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

.tool-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: flex-end; }
.tool-row > .tool-field { flex: 1 1 180px; min-width: 0; }
.tool-row > .tool-field.narrow { flex: 0 1 140px; }
.tool-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text-read); cursor: pointer; min-height: 44px; }
.tool-check input { accent-color: var(--cyan); width: 18px; height: 18px; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-actions .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 479px) { .tool-actions .btn-primary { width: 100%; } }

.tool-progress { height: 6px; background: var(--bg-alt); border-radius: var(--r-pill); overflow: hidden; }
.tool-progress > span { display: block; height: 100%; width: 0; background: var(--gradient); transition: width var(--t); }
.tool-status { font-size: .92rem; color: var(--text-muted); }
.tool-status b { color: var(--text); font-family: var(--font-mono); }

.tool-alert { border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.08); border-radius: var(--r-md); padding: var(--s-sm); font-size: .93rem; color: var(--text-read); }
.tool-alert strong { color: var(--amber); }
.tool-alert ul { margin: .4em 0 0 1.2em; }
.tool-noscript { color: var(--amber); }
.tool-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* «Пример», переходы между инструментами, «Чего не хватает?» */
.tool-top { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.tool-example { font-size: .85rem; font-weight: 700; color: var(--cyan); border: 1px dashed var(--line-strong); border-radius: var(--r-pill); padding: 4px 14px; min-height: 32px; }
.tool-example:hover { background: var(--cyan-soft); }
.tool-handoff[hidden] { display: none; }
.tool-feedback { margin-top: var(--s-sm); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s-sm); display: flex; flex-direction: column; gap: 8px; }
.tool-feedback .hp { position: absolute; left: -9999px; }
.tool-feedback .tool-textarea { min-height: 60px; font-family: var(--font); font-size: .92rem; }
.tf-title { font-size: .95rem; color: var(--text-read); }
.tf-title b { color: var(--text); }
.tf-row { display: flex; gap: 8px; }
.tf-row .tool-input { flex: 1; min-width: 0; }
@media (max-width: 479px) { .tf-row { flex-direction: column; } }
.tf-consent[hidden] { display: none; }
.tf-consent { font-size: .85rem; align-items: flex-start; }
.tf-msg { font-size: .88rem; color: var(--text-muted); }
.tf-msg:empty { display: none; }
.tf-msg.is-ok { color: var(--green); } .tf-msg.is-err { color: #f87171; }

/* ---------- UI v2 (аудит /ui-check 17.10): иерархия действий, размеры на телефоне, шаги ---------- */
/* второстепенные действия — тихие кнопки, а не такие же «пилюли», как главная */
.tool-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tool-quiet > .tool-quiet-label { font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.tool-quiet button, .tool-quiet .btn { min-height: 34px; padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--text-read); font-size: .88rem; font-weight: 600; box-shadow: none; white-space: nowrap; transform: none; }
.tool-quiet button:hover, .tool-quiet .btn:hover { background: var(--cyan-soft); color: var(--cyan); transform: none; }
.tool-quiet button[disabled] { opacity: .45; cursor: not-allowed; background: none; }
.tool-quiet .tool-handoff { color: var(--cyan); }
.tool-quiet .tool-handoff::after { content: " →"; }
.tool-quiet .is-danger { color: var(--text-muted); }
.tool-quiet .is-danger:hover { color: #f87171; background: rgba(239,68,68,.08); }

/* «Ещё» — раскрывающийся список редких действий */
.tool-more { position: relative; }
.tool-more > summary { list-style: none; cursor: pointer; min-height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: var(--r-sm); font-size: .88rem; font-weight: 600; color: var(--text-muted); }
.tool-more > summary::-webkit-details-marker { display: none; }
.tool-more > summary::after { content: "▾"; font-size: .8em; }
.tool-more[open] > summary { color: var(--cyan); background: var(--cyan-soft); }
.tool-more-list { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 6px; padding: 6px; min-width: 240px;
  background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.tool-more-list button { justify-content: flex-start; text-align: left; width: 100%; }
@media (min-width: 640px) {
  .tool-more-list { position: absolute; z-index: 20; left: 0; top: 100%; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
}

/* шаги «Как пользоваться» на широком экране — карточками в ряд: короче строки, проще читать */
@media (min-width: 980px) {
  .tpl-tool .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; gap: 16px; }
  .tpl-tool .steps li { grid-template-columns: 1fr; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
}

/* заголовки внутри инструментов — по смыслу H2, по виду — подзаголовок блока */
.tool-app h2.tool-h { font-size: 1.05rem; letter-spacing: 0; margin-top: var(--s-xs); }

/* на телефоне: всё, что нажимают пальцем, — от 44 px */
@media (max-width: 767px) {
  .tool-app .tool-check { min-height: 44px; }
  .tool-app summary, .tool-example, .tool-quiet button, .tool-quiet .btn, .tool-more > summary { min-height: 44px; }
  .tool-app .tool-input, .tool-app .tool-select { min-height: 44px; }
  .tool-quiet button, .tool-quiet .btn { white-space: normal; text-align: left; }
}

/* «Настройки» — редко меняемые параметры свёрнуты, чтобы главное действие было рядом с вводом */
.tool-settings { border: 1px solid var(--line); border-radius: var(--r-md); }
.tool-settings > summary { cursor: pointer; list-style: none; padding: 10px 14px; min-height: 44px; display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--text-muted); }
.tool-settings > summary::-webkit-details-marker { display: none; }
.tool-settings > summary::before { content: "⚙"; color: var(--cyan); }
.tool-settings > summary::after { content: "▾"; margin-left: auto; font-size: .8em; transition: transform var(--t); }
.tool-settings[open] > summary::after { transform: rotate(180deg); }
.tool-settings[open] > summary { color: var(--text); border-bottom: 1px solid var(--line); }
.tool-settings-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tool-actions.uo-main { align-items: center; }

/* переходы в другой инструмент — везде одинаковые: тихая ссылка-кнопка со стрелкой */
.tool-app .btn.tool-handoff { background: none; border-color: transparent; box-shadow: none; color: var(--cyan); padding: 4px 10px; min-height: 34px;
  border-radius: var(--r-sm); font-size: .88rem; transform: none; white-space: normal; text-align: left; }
.tool-app .btn.tool-handoff:hover { background: var(--cyan-soft); transform: none; }
.tool-app .btn.tool-handoff::after { content: " →"; }
@media (max-width: 767px) { .tool-app .btn.tool-handoff { min-height: 44px; } }

/* UI v2, второй проход: цели нажатия на телефоне сильнее стилей отдельных инструментов (#tool-app), кнопки-ссылки — выше,
   подписи рядов — контрастнее, строки текста на странице — не длиннее ~75 знаков */
@media (max-width: 767px) {
  #tool-app .tool-check, #tool-app .tool-quiet button, #tool-app .tool-example, #tool-app summary, #tool-app .btn.tool-handoff { min-height: 44px; }
  #tool-app .rg-load, #tool-app .uo-link, #tool-app .he-undo { display: inline-flex; align-items: center; min-height: 44px; }
  #tool-app .uo-per .tool-input { min-height: 44px; }
}
.tool-quiet > .tool-quiet-label { color: var(--text-muted); }
.tpl-tool .dot-list, .tpl-tool .answer-text, .tpl-tool .check-list, .tpl-tool .section-sub { max-width: 75ch; }
/* кнопки-ссылки — не ниже 32 px и на компьютере; ответы в FAQ и подсказки — короче строки */
@media (min-width: 768px) { #tool-app .rg-load, #tool-app .uo-link, #tool-app .hc-v-act, #tool-app .he-undo { display: inline-flex; align-items: center; min-height: 32px; } }
.tpl-tool .faq, .tpl-tool .rg-check > .tool-hint, .tpl-tool .tool-feedback .tf-title { max-width: 75ch; }
/* скрытое — скрыто, даже если правило выше задаёт display (кнопки-ссылки, «Отменить») */
#tool-app [hidden] { display: none !important; }
/* переход в другой инструмент — строкой текста, стрелка сразу после слов */
.tool-app .btn.tool-handoff { display: inline-block; line-height: 1.4; padding-top: 7px; padding-bottom: 7px; }