/* Scientific Calculator Widget */
.sci-calc {
  background: var(--calc-accent);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.sci-calc-display {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sci-calc-input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1.25rem;
  font-family: monospace;
}

.sci-calc-solve,
.sci-solve-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0 1.5rem;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.sci-calc-solve:hover,
.sci-solve-btn:hover {
  background: var(--primary-hover);
}

.sci-calc-mode {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.sci-calc-grid {
  display: grid;
  grid-template-columns: 5fr 5fr;
  gap: 1rem;
}

.sci-calc-funcs, .sci-calc-nums {
  display: grid;
  gap: 0.25rem;
}

.sci-calc-funcs {
  grid-template-columns: repeat(5, 1fr);
}

.sci-calc-nums {
  grid-template-columns: repeat(5, 1fr);
}

.sci-btn {
  background: #C9E8D2;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
  transition: transform 0.1s, box-shadow 0.1s;
  color: #1a1a1a;
}

.sci-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.sci-btn-fn {
  background: #C9E8D2;
  color: #1a1a1a;
}

.sci-btn-num {
  background: #fff;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid #D8EDDF;
}

.sci-btn-op {
  background: #A8D5B5;
  font-weight: 600;
  color: #1a1a1a;
}

.sci-btn-dark {
  background: #0F6E56;
  color: white;
  font-weight: 700;
}

.sci-btn-dark[data-val="AC"] {
  background: #E8735A;
}

.sci-btn-eq {
  background: #0F6E56;
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
}

@media (max-width: 640px) {
  .sci-calc-grid {
    grid-template-columns: 1fr;
  }
}

/* Tool Calculator Form */
.tool-calc-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 1rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-row .form-group {
  margin-bottom: 0;
  flex: 1;
}

.calc-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.calc-actions .btn {
  flex: 1;
}

/* Results */
.result-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f0fdf4;
  border: 1px solid var(--primary);
  border-radius: 8px;
  display: none; /* hidden until calculated */
}

.result-box.active {
  display: block;
}

.result-title {
  color: var(--primary);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.step-list {
  list-style: none;
  padding: 0;
  counter-reset: step-counter;
}

.step-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}

.step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--primary);
  color: white;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
}

.step-item .formula {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #fff;
  border-radius: 4px;
}

.error-text {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none;
}

.error-text.show {
  display: block;
}

/* ===== SCIENTIFIC CALCULATOR WIDGET (homepage) ===== */
.sci-calc-container {
  background: var(--calc-accent);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-self: flex-start;
}

.sci-calc-solve-row {
  display: flex;
  gap: 0.5rem;
}

.sci-calc-field {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid #c9dce9;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: 'Menlo', 'Monaco', monospace;
  background: #fff;
  min-width: 0;
}

.sci-calc-field:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

.sci-solve-btn {
  background: #2196F3;
  color: #fff;
  border: none;
  padding: 0 1rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.sci-solve-btn:hover { background: #1976D2; }

.sci-calc-display {
  background: #fff;
  border: 1px solid #c9dce9;
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 1.25rem;
  text-align: right;
  color: #111;
  min-height: 2.5rem;
  word-break: break-all;
}

.sci-mode-row {
  display: flex;
  gap: 1.25rem;
}

.sci-mode-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: #334155;
}

.sci-keypad {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 0.5rem;
}

.sci-keys-fn {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.sci-keys-num {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

/* Shared button base */
.sci-btn {
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.25rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
  transition: transform 0.08s, box-shadow 0.08s, background 0.1s;
  white-space: nowrap;
  line-height: 1.2;
}

.sci-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,0.14); }
.sci-btn:active { transform: translateY(2px); box-shadow: none; }

/* Function keys */
.sci-btn-fn {
  background: #B8D4E8;
  color: #1a2e40;
}
.sci-btn-fn:hover { background: #a5c7e0; }

/* Number keys */
.sci-btn-num {
  background: #f8fafc;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #e2ecf2;
}
.sci-btn-num:hover { background: #eef4fb; }

/* Operator keys */
.sci-btn-op {
  background: #cadde9;
  color: #1a2e40;
  font-size: 0.875rem;
  font-weight: 600;
}
.sci-btn-op:hover { background: #b8cedf; }

/* Dark keys (AC, Ans) */
.sci-btn-dark {
  background: #1a3a5c;
  color: #fff;
}
.sci-btn-dark:hover { background: #163250; }

/* Equals key */
.sci-btn-eq {
  background: #0F6E56;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.sci-btn-eq:hover { background: #0a4f3e; }

/* Responsive: stack calculator widget below hero text on mobile */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .sci-calc-container {
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }
  .sci-keys-fn {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 560px) {
  .sci-keypad {
    grid-template-columns: 1fr;
  }
  .sci-keys-fn {
    grid-template-columns: repeat(5, 1fr);
  }
  .sci-keys-num {
    grid-template-columns: repeat(4, 1fr);
  }
  .sci-btn { font-size: 0.7rem; padding: 0.4rem 0.15rem; }
}