/* RPM to Hz Converter — tool-specific overrides only. Pure calculator (no mic/audio).
   Shared component classes (.input-label, .input-hint, .content-section, .faq-*,
   .related-tools-grid, .related-tool-card) and tokens (--color-text-dim, --space-xxs)
   live in design-system.css and are not redefined here. */

.r2h-warn-note {
  max-width: 820px; margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm); background: rgba(0, 255, 65, 0.04);
  color: var(--color-text-dim); font-size: 0.9rem; line-height: 1.55; text-align: left;
}
.r2h-warn-note strong { color: var(--color-text); }
.r2h-warn-note em { color: var(--color-text-bright); font-style: normal; }

.r2h-h3 { font-size: 1.0rem; margin-bottom: var(--space-xs); }

/* --- input grid --- */
.r2h-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); margin-top: var(--space-md);
}
@media (max-width: 720px) { .r2h-grid { grid-template-columns: 1fr; } }
.r2h-field { min-width: 0; }
.r2h-inputrow { display: flex; gap: 6px; margin-top: 6px; }
.r2h-num {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.95rem;
}
.r2h-num:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.18); }

.r2h-copy {
  flex: 0 0 auto; padding: 8px 12px; cursor: pointer;
  background: rgba(0, 255, 65, 0.06); color: var(--color-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.r2h-copy:hover { border-color: var(--color-primary); background: rgba(0, 255, 65, 0.12); }
.r2h-copy:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.25); }
.r2h-copy--active { background: var(--color-primary); color: #06210d; border-color: var(--color-primary); }

/* --- presets --- */
.r2h-presets {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-md);
}
.r2h-presets__label { font-size: 0.8rem; color: var(--color-text-dim); margin-right: 2px; }
.r2h-preset {
  cursor: pointer; padding: 6px 12px;
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 0.8rem;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.r2h-preset:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(0, 255, 65, 0.06); }
.r2h-preset:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.25); }

/* --- summary cells --- */
.r2h-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm); margin-top: var(--space-lg);
}
@media (max-width: 720px) { .r2h-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .r2h-summary { grid-template-columns: 1fr; } }
.r2h-cell {
  padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: rgba(0, 255, 65, 0.02);
}
.r2h-cell__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-dim); }
.r2h-cell__val { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 1.15rem; color: var(--color-primary); word-break: break-word; }
.r2h-cell__unit { font-size: 0.78rem; color: var(--color-text-dim); }

/* --- warnings --- */
.r2h-warn { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.r2h-warnline {
  padding: 8px 12px; border: 1px solid rgba(255, 180, 60, 0.35); border-left: 4px solid #ffb43c;
  border-radius: var(--radius-sm); background: rgba(255, 180, 60, 0.06);
  color: #ffd9a0; font-size: 0.82rem; line-height: 1.5;
}

/* --- order table --- */
.r2h-tablewrap {
  margin-top: var(--space-sm); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow-x: auto;
}
.r2h-table { display: flex; flex-direction: column; font-size: 0.85rem; min-width: 540px; }
.r2h-trow { display: grid; grid-template-columns: 70px 110px 130px 1fr; }
.r2h-trow:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.r2h-trow--head { background: rgba(0, 255, 65, 0.08); color: var(--color-primary); font-weight: 600; }
.r2h-trow--one { background: rgba(0, 255, 65, 0.06); }
.r2h-trow--sub { background: rgba(0, 229, 255, 0.06); }
.r2h-tcell {
  padding: 7px 10px; border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono); text-align: right; color: var(--color-text);
}
.r2h-tcell--order { text-align: left; color: var(--color-primary); }
.r2h-tcell--meaning { text-align: left; font-family: var(--font-body); color: var(--color-text-dim); line-height: 1.4; }
.r2h-trow--head .r2h-tcell { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.r2h-trow--head .r2h-tcell--meaning { font-family: var(--font-body); }