/* =========================================
   The Tool Bakery — Percentage Calculator
   Professional, neutral UI (no gradients)
   ========================================= */

:root {
  /* Palette */
  --pc-bg: #ffffff;
  --pc-surface: #ffffff;
  --pc-text: #111827;           /* gray-900 */
  --pc-muted: #6b7280;          /* gray-500 */
  --pc-border: #e5e7eb;         /* gray-200 */
  --pc-border-strong: #d1d5db;  /* gray-300 */
  --pc-accent: #2563eb;         /* blue-600 */
  --pc-accent-hover: #1d4ed8;   /* blue-700 */
  --pc-ring: rgba(37, 99, 235, .35);

  /* Layout */
  --pc-radius: 12px;
  --pc-shadow: 0 6px 20px rgba(17, 24, 39, .06);

  /* Typography */
  --pc-font-size: 16px;
  --pc-line-height: 1.5;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --pc-bg: #0b1020;
    --pc-surface: #0e1426;
    --pc-text: #e5e7eb;          /* gray-200 */
    --pc-muted: #9ca3af;         /* gray-400 */
    --pc-border: #20263a;
    --pc-border-strong: #2a3350;
    --pc-shadow: 0 10px 24px rgba(0,0,0,.45);
    --pc-ring: rgba(96, 165, 250, .35);
  }
}

/* Base container */
.ttb-rng-container {
  box-sizing: border-box;
  max-width: 760px;
  margin: 32px auto;
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--pc-surface);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
  border-radius: calc(var(--pc-radius) + 4px);
  box-shadow: var(--pc-shadow);
}

/* Heading */
.ttb-rng-container h2 {
  margin: 0 0 6px 0;
  font-weight: 700;
  letter-spacing: .2px;
  text-align: center;
  font-size: clamp(20px, 1.1rem + .8vw, 28px);
}

/* Selector label (kept minimal) */
.ttb-rng-container > label[for="ttb-percent-type"] {
  display: block;
  margin: 8px 0 6px;
  color: var(--pc-muted);
  text-align: center;
  font-size: 0.95rem;
}

/* Calculation type select */
#ttb-percent-type {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 18px;
  padding: 10px 12px;
  font-size: 1rem;
  background: var(--pc-bg);
  color: var(--pc-text);
  border: 1px solid var(--pc-border-strong);
  border-radius: var(--pc-radius);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#ttb-percent-type:hover {
  border-color: var(--pc-accent);
}
#ttb-percent-type:focus {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pc-ring);
  border-color: var(--pc-accent);
}

/* Inputs wrapper (card) */
#ttb-percent-inputs {
  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: clamp(14px, 1.6vw, 18px);
  max-width: 720px;
  margin: 0 auto 16px;
}

/* Responsive two-column grid where space permits */
#ttb-percent-inputs .ttb-row,
#ttb-percent-inputs form,
#ttb-percent-inputs .ttb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 16px;
}

/* Labels + fields */
#ttb-percent-inputs label {
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--pc-muted);
}

/* Inputs */
#ttb-percent-inputs input[type="number"],
#ttb-percent-inputs input[type="text"],
#ttb-percent-inputs input[type="tel"],
#ttb-percent-inputs input[type="search"],
#ttb-percent-inputs input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  line-height: var(--pc-line-height);
  color: var(--pc-text);
  background: var(--pc-bg);
  border: 1px solid var(--pc-border-strong);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-variant-numeric: tabular-nums;
}
#ttb-percent-inputs input:focus {
  border-color: var(--pc-accent);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pc-ring);
}

/* Primary action button */
#ttb-percent-calculate {
  appearance: none;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--pc-accent);
  border-radius: calc(var(--pc-radius) + 2px);
  background: var(--pc-accent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
#ttb-percent-calculate:hover {
  background: var(--pc-accent-hover);
  border-color: var(--pc-accent-hover);
}
#ttb-percent-calculate:active {
  transform: translateY(1px);
}
#ttb-percent-calculate:focus {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pc-ring);
}

/* Result card */
#ttb-result {
  margin-top: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;

  background: var(--pc-bg);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius);
  padding: clamp(16px, 2vw, 22px);

  text-align: center;
  color: var(--pc-text);
  font-weight: 700;
  font-size: clamp(22px, 1.2rem + 1.2vw, 34px);
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .2px;
}

/* Subtle divider style if you add any subheadings inside inputs */
#ttb-percent-inputs .ttb-subtle-divider {
  height: 1px;
  background: var(--pc-border);
  margin: 2px 0 10px;
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  #ttb-percent-type,
  #ttb-percent-calculate,
  #ttb-percent-inputs input {
    transition: none !important;
  }
}

/* Optional: tighten spacing on very small screens */
@media (max-width: 420px) {
  .ttb-rng-container { margin: 20px auto; }
  #ttb-percent-calculate { margin-top: 12px; }
}