/* =========================================================
   ClientSideTools — Shared Components (complete version)
   Fixes icon sizing, forms, cards, checklists, FAQ, dialogs
   ========================================================= */

/* --- Accessibility helpers --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Utilities (safety net) --- */
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--brand-primary, #0d9488); color: #ffffff; }
.btn-primary:hover { background: var(--brand-primary-hover, #0f766e); }
.btn-secondary {
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #0f172a);
  border-color: var(--border-default, #e2e8f0);
}
.btn-secondary:hover { background: var(--bg-secondary, #f1f5f9); }
.btn-ghost { background: transparent; color: var(--text-secondary, #475569); }
.btn-ghost:hover { background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #0f172a); }

/* --- Forms --- */
.label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #0f172a);
}
.input,
.textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary, #0f172a);
  font-family: inherit;
  font-size: 15px;
}
.textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px;
  line-height: 1.6;
}
.tool-output { min-height: 160px; }
.input:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--brand-primary, #0d9488);
  outline-offset: 1px;
}
.tool-field { margin-bottom: 16px; }
.tool-field > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.tool-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tool-note { font-size: 13px; color: var(--text-muted, #64748b); margin-top: 6px; }

/* --- Cards & tool layout --- */
.card {
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
}
.tool-main { padding: 32px 0 64px; }
.tool-hero { margin-bottom: 24px; }
.tool-hero h1 { margin: 0 0 12px; }
.tool-hero__lead {
  font-size: 18px;
  color: var(--text-secondary, #475569);
  max-width: 70ch;
  margin: 0 0 16px;
}
.tool-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border-default, #e2e8f0);
  color: var(--text-secondary, #475569);
  font-size: 13px;
  font-weight: 600;
}
.badge-success {
  background: transparent;
  color: var(--color-success, #059669);
  border-color: currentColor;
}

.privacy-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #475569);
}

/* 🔑 THE KEY FIX — size every inline icon SVG */
.privacy-indicator__icon,
.privacy-indicator svg,
.faq-item__icon,
.faq-item summary svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tool-layout { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .tool-sidebar .card { position: sticky; top: 88px; }
}

/* --- Status banner --- */
.tool-status {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-default, #e2e8f0);
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #475569);
  font-weight: 600;
  margin-bottom: 16px;
}
.tool-status[data-state="pass"]    { color: var(--color-success, #059669); border-color: currentColor; }
.tool-status[data-state="warning"] { color: var(--color-warning, #d97706); border-color: currentColor; }
.tool-status[data-state="error"]   { color: var(--color-danger, #dc2626);  border-color: currentColor; }

/* --- Checklist / results --- */
.checklist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.check-item {
  border: 1px solid var(--border-default, #e2e8f0);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--bg-primary, #ffffff);
}
.check-item--pass    { border-left-color: var(--color-success, #059669); }
.check-item--warning { border-left-color: var(--color-warning, #d97706); }
.check-item--error   { border-left-color: var(--color-danger, #dc2626); }
.check-item--info    { border-left-color: var(--color-info, #2563eb); }
.check-item__title  { margin: 0 0 4px; font-size: 15px; color: var(--text-primary, #0f172a); }
.check-item__detail { margin: 0; font-size: 14px; color: var(--text-secondary, #475569); overflow-wrap: anywhere; }

/* --- FAQ --- */
.faq-item {
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-primary, #ffffff);
  margin-bottom: 10px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon { transition: transform 0.2s ease; }
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__body { padding: 0 16px 16px; color: var(--text-secondary, #475569); }
.faq-item__body p { margin: 0; }

/* --- Prose sections --- */
.prose section { margin-bottom: 28px; }
.prose h2 { margin: 0 0 12px; color: var(--text-primary, #0f172a); }
.prose p, .prose li { color: var(--text-secondary, #475569); line-height: 1.7; }
.prose ul, .prose ol { padding-left: 20px; }
.tool-meta-list { list-style: none; padding: 0; }

/* --- Search dialog & toast --- */
.search-dialog { border: none; padding: 0; background: transparent; max-width: 100vw; }
.search-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.search-dialog__panel {
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 16px;
  padding: 20px;
  max-width: 640px;
  margin: 10vh auto;
}
.search-form { display: flex; gap: 10px; }
.search-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.search-results a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary, #0f172a);
}
.search-results a:hover { background: var(--bg-secondary, #f1f5f9); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary, #0f172a);
  color: var(--bg-primary, #ffffff);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  z-index: 1000;
}