/* Fermentation & Pickle Brine Calculator — tool-specific styles */

.evvy-unit-toggle { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.evvy-unit-toggle .evvy-chip { padding: 0.2rem 0.55rem; font-size: 0.8rem; }
.evvy-slider-val { margin-left: auto; font-weight: 600; color: var(--cluster-dark, #7C4A1A); }
.evvy-input-hint { margin-left: 0.5rem; font-weight: 400; font-size: 0.75rem; color: var(--evvy-text-secondary); text-transform: none; letter-spacing: 0; }
.evvy-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.evvy-sub-detail { font-weight: 400; font-size: 0.8rem; color: var(--evvy-text-secondary); }

/* pH curve */
.evvy-ph-wrap {
  margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px); background: var(--bs-body-bg, #fff);
}
.evvy-ph-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--evvy-text-secondary); margin-bottom: 0.5rem; }
.evvy-ph-svg { width: 100%; height: auto; display: block; }
.evvy-ph-line { stroke: var(--cluster-dark, #7C4A1A); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.evvy-ph-dot { fill: var(--cluster-dark, #7C4A1A); }
.evvy-ph-safe { stroke: #c0392b; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.7; }
.evvy-ph-acid { stroke: #2a7d4f; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
.evvy-ph-lbl { fill: var(--evvy-text-secondary); font-size: 9px; font-family: var(--evvy-font-mono, monospace); }

/* Note cards */
.evvy-note-card {
  display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--evvy-radius, 8px); font-size: 0.9rem; line-height: 1.5;
  border-left: 3px solid var(--cluster-dark, #7C4A1A);
  background: color-mix(in srgb, var(--cluster-dark, #7C4A1A) 6%, transparent);
}
.evvy-note-card i { font-size: 1.15rem; color: var(--cluster-dark, #7C4A1A); margin-top: 0.1rem; }
.evvy-note-safe { border-left-color: #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); }
.evvy-note-safe i { color: #c0392b; }
.evvy-note-info { border-left-color: var(--evvy-text-secondary); background: color-mix(in srgb, var(--evvy-text-secondary, #64748b) 7%, transparent); }
.evvy-note-info i { color: var(--evvy-text-secondary); }

/* Vinegar panel */
.evvy-vinegar {
  margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--evvy-radius, 8px);
  background: var(--cluster-surface, #FDF3E7); font-size: 0.9rem; line-height: 1.5;
}
.evvy-vinegar-title { font-weight: 600; margin-bottom: 0.35rem; }
.evvy-vinegar-title i { color: var(--cluster-dark, #7C4A1A); }
[data-bs-theme="dark"] .evvy-vinegar { background: var(--evvy-surface-alt, #12233a); }

/* Lists */
.evvy-jar-list { display: flex; flex-direction: column; gap: 0.4rem; }
.evvy-menu-total { margin-top: 0.7rem; padding: 0.6rem 0.9rem; border-radius: var(--evvy-radius, 8px); background: var(--cluster-surface, #FDF3E7); font-size: 0.92rem; }
[data-bs-theme="dark"] .evvy-menu-total { background: var(--evvy-surface-alt, #12233a); }
.evvy-saved-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.75rem; border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius, 8px); background: var(--bs-body-bg, #fff); }
.evvy-saved-name { font-weight: 600; }
.evvy-saved-meta { color: var(--evvy-text-secondary); font-size: 0.8rem; flex: 1; }
.evvy-saved-del { border: none; background: transparent; color: var(--evvy-text-secondary); cursor: pointer; }
.evvy-saved-del:hover { color: #c0392b; }
[data-bs-theme="dark"] .evvy-saved-item { background: var(--evvy-surface-alt, #12233a); }

/* Recipe card */
.evvy-recipe-card { padding: 0.9rem 1.1rem; border: 1px solid var(--evvy-border-color, #DEE2E6); border-radius: var(--evvy-radius-lg, 12px); background: var(--bs-body-bg, #fff); }
.evvy-recipe-title { font-weight: 600; margin-bottom: 0.5rem; }
.evvy-recipe-list { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.6; }
[data-bs-theme="dark"] .evvy-recipe-card, [data-bs-theme="dark"] .evvy-ph-wrap { background: var(--evvy-surface-alt, #12233a); }

@media (max-width: 575.98px) {
  .evvy-two-col { grid-template-columns: 1fr; }
  .evvy-unit-toggle { width: 100%; margin-top: 0.4rem; }
  .evvy-results-row { grid-template-columns: 1fr !important; }
}