/* ============================================
   PERCENTAGE CALCULATOR
   ============================================ */
.percentage-calculator {
  max-width: 700px;
  margin: 0 auto;
}

.percentage-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.percentage-tab {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.percentage-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.percentage-section {
  display: none;
}

.percentage-section.active {
  display: block;
  animation: fadeUp 0.2s ease;
}

/* Result highlight box */
.percentage-result {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--on-primary);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  margin-top: 1.5rem;
}

.percentage-result-label {
  font-size: 0.875rem;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.percentage-result-value {
  font-size: 2.5rem;
  font-weight: 700;
}

/* ============================================
   PERCENTAGE CALCULATOR — additions
   Append to tools.css after the existing .percentage-* rules.
   New classes namespaced .pct-* to coexist with existing .percentage-*.
   ============================================ */

.percentage-tab {
  min-height: 44px;             /* touch-target */
}

/* Section title & description */
.pct-section-title {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  color: var(--text);
}

.pct-section-desc {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Input row */
.pct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pct-row .input-group { margin-bottom: 0; }

/* Reverse mode operation selector */
.pct-reverse-type {
  margin-bottom: 1rem;
}

/* Result block (inline list, not the gradient hero box from .percentage-result) */
.pct-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.pct-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border);
}

.pct-result-row:last-child { border-bottom: none; }

.pct-result-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pct-result-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  text-align: right;
}

.pct-result-secondary {
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 600;
}

.pct-result-success {
  color: var(--success);
}

/* Visual progress bar */
.pct-bar-wrapper {
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.pct-bar-track {
  position: relative;
  height: 14px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.pct-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 999px;
  width: 0;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pct-bar-text {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Action buttons */
.pct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.pct-actions .btn {
  min-height: 44px;
  flex: 1 1 auto;
  min-width: 160px;
}

/* Mobile (< 600px) */
@media (max-width: 600px) {
  .pct-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .pct-result-value {
    font-size: 1.2rem;
  }
  .pct-result-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .pct-result-row .pct-result-value {
    text-align: left;
  }
  .pct-actions .btn {
    flex: 1 1 100%;
  }
  .percentage-tab {
    flex: 1 1 calc(33.333% - 0.4rem);
  }
}