/**
 * Minimal shared tool chrome for pages that only need privacy/hint/faq
 * (video landings, hubs). Full editor shell lives in img-tools.css.
 * ~1–2 KB vs ~21 KB for img-tools.css.
 */

.itool-intro {
  margin-bottom: 12px;
  color: var(--dica-body);
}
.itool-intro strong {
  color: var(--dica-ink);
}

.itool-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--dica-border);
  background: var(--dica-surface-soft);
  color: var(--dica-body);
  font-size: 0.92rem;
  line-height: 1.45;
}
.itool-privacy svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: var(--dica-action, #2f5da8);
  max-width: none;
}
.itool-privacy strong {
  color: var(--dica-ink);
}
.itool-privacy-short {
  display: none;
}
@media (max-width: 520px) {
  .itool-privacy-full {
    display: none;
  }
  .itool-privacy-short {
    display: inline;
  }
}

.itool-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--dica-muted);
  line-height: 1.35;
}

/* Mobile tip strip used on video compress landings */
.itool-hint[data-qa-mobile-note] {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--dica-border, #d0d5dd);
  background: var(--dica-surface-soft, #f8fafc);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--dica-body, #344054);
}

.itool-faq {
  margin: 1.5rem 0;
}
.itool-faq details {
  border: 1px solid var(--dica-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--dica-surface);
}
.itool-faq summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--dica-ink);
}
.itool-faq p {
  margin: 8px 0 0;
  color: var(--dica-body);
  font-size: 0.92rem;
  line-height: 1.5;
}