/* assets/ddt-tool-bridge.css
 * Legacy-primitive bridge for the redesign rollout.
 *
 * Restyles the pre-redesign building blocks (.card, .list-header, .text-input,
 * .primary/.secondary buttons, tables, badges, …) to the Figma "Modern Tool
 * Website" look whenever they live inside a `.rdt-tool` container. This lets a
 * tool page adopt the new design system by ONLY adding `rdt-tool rdt-accent-*`
 * to its <section class="page-content"> + loading ddt-tool-shell.css and this
 * file — no markup rebuild, so every feature/id/JS hook is preserved.
 *
 * Pages that were fully rebuilt to the mock (json-formatter, uuid-generator)
 * use `rdt-*` classes and do NOT load this bridge, so there is no conflict.
 *
 * Depends on the --rd-* tokens (ddt-redesign-tokens.css) and the --rdt-* accent
 * vars defined by ddt-tool-shell.css on `.rdt-tool`.
 */

/* ---- Headings / intro ---- */
.rdt-tool h1 {
  font-family: var(--rd-font-sans);
  color: var(--rd-text-primary);
  letter-spacing: var(--rd-heading-tight);
  font-weight: 700;
}
.rdt-tool h2,
.rdt-tool h3,
.rdt-tool .card-header h2,
.rdt-tool .card-header h3 {
  font-family: var(--rd-font-sans);
  color: var(--rd-text-primary);
}
.rdt-tool .subtitle { color: var(--rd-text-muted); }
.rdt-tool .tool-help { color: var(--rd-text-muted); }
.rdt-tool .results-title,
.rdt-tool .section-title {
  font-family: var(--rd-font-mono);
  color: var(--rd-text-muted);
  letter-spacing: 0.08em;
}
.rdt-tool .small { color: var(--rd-text-muted); }
.rdt-tool a { color: var(--rdt-accent); }
.rdt-tool code {
  font-family: var(--rd-font-mono);
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-border-soft);
  border-radius: 5px;
  padding: 0 4px;
}

/* ---- Cards / panels ---- */
.rdt-tool .card,
.rdt-tool .panel,
.rdt-tool .tip-row,
.rdt-tool .compare-bar {
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-lg);
  background: var(--rd-bg-surface);
}
.rdt-tool .card { padding: 16px; }
.rdt-tool .card-header {
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.rdt-tool .list-header {
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.rdt-tool .section-separator { border-color: var(--rd-border-soft); }
.rdt-tool .tip,
.rdt-tool .note,
.rdt-tool .detection-row { color: var(--rd-text-muted); }

/* ---- Inputs / textareas / selects ---- */
.rdt-tool .text-input,
.rdt-tool .output-textarea,
.rdt-tool .small-input,
.rdt-tool textarea,
.rdt-tool input[type='text'],
.rdt-tool input[type='search'],
.rdt-tool input[type='number'],
.rdt-tool input[type='url'],
.rdt-tool input[type='email'],
.rdt-tool select {
  background: var(--rd-bg-app);
  color: var(--rd-text-primary);
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-mono);
}
.rdt-tool textarea,
.rdt-tool .text-input,
.rdt-tool .output-textarea {
  padding: 12px 14px;
  line-height: 1.7;
}
.rdt-tool select { padding: 7px 10px; }
.rdt-tool .text-input:focus,
.rdt-tool .output-textarea:focus,
.rdt-tool .small-input:focus,
.rdt-tool textarea:focus,
.rdt-tool input:focus,
.rdt-tool select:focus {
  outline: none;
  border-color: var(--rdt-accent);
}
.rdt-tool textarea::placeholder,
.rdt-tool input::placeholder { color: var(--rd-text-dim); }

/* ---- Buttons ---- */
.rdt-tool .primary,
.rdt-tool button.primary,
.rdt-tool .primary.small-btn {
  background: linear-gradient(135deg, var(--rdt-accent), var(--rdt-accent-2));
  color: var(--rdt-on-accent);
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
  font-weight: 600;
}
.rdt-tool .primary:hover { opacity: 0.9; }
.rdt-tool .secondary,
.rdt-tool .small-btn,
.rdt-tool .icon-button {
  background: transparent;
  color: var(--rd-text-muted);
  border: 1px solid var(--rd-border-strong);
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
}
.rdt-tool .secondary:hover,
.rdt-tool .small-btn:hover,
.rdt-tool .icon-button:hover {
  color: var(--rd-text-primary);
  border-color: var(--rdt-accent);
}
.rdt-tool .primary:focus-visible,
.rdt-tool .secondary:focus-visible,
.rdt-tool .small-btn:focus-visible,
.rdt-tool .icon-button:focus-visible {
  outline: 2px solid var(--rdt-accent);
  outline-offset: 2px;
}
.rdt-tool .link-button { color: var(--rdt-accent); }

/* ---- Badges / chips ---- */
.rdt-tool .type-badge,
.rdt-tool .badge,
.rdt-tool .chip {
  border: 1px solid var(--rd-border-soft);
  border-radius: 999px;
  background: var(--rd-bg-elevated);
  color: var(--rd-text-muted);
  font-family: var(--rd-font-mono);
}

/* ---- Tables ---- */
.rdt-tool .data-table { width: 100%; border-collapse: collapse; }
.rdt-tool .data-table th,
.rdt-tool .data-table td {
  border-bottom: 1px solid var(--rd-border-soft);
  padding: 8px 10px;
  text-align: left;
}
.rdt-tool .data-table th { color: var(--rd-text-primary); font-weight: 700; }
.rdt-tool .data-table td { color: var(--rd-text-muted); }
.rdt-tool .table-scroll { overflow-x: auto; }

/* ---- Tabs (legacy) ---- */
.rdt-tool .tab,
.rdt-tool .tab-btn {
  background: transparent;
  color: var(--rd-text-muted);
  border: 1px solid transparent;
}
.rdt-tool .tab.is-active,
.rdt-tool .tab-btn.is-active,
.rdt-tool .tab[aria-selected='true'],
.rdt-tool .tab-btn[aria-selected='true'] {
  color: var(--rdt-accent);
  border-color: var(--rdt-accent-line);
  background: var(--rdt-accent-soft);
}

/* ---- Suggestion / inline-note blocks ---- */
.rdt-tool .ddt-suggest {
  border: 1px solid var(--rdt-accent-line);
  background: var(--rdt-accent-soft);
  border-radius: var(--rd-radius-md);
}
.rdt-tool .inline-note { color: var(--rd-text-muted); }