/* ============================================
   FlipStack — Margin Calculator styles
   Extends theme.css design tokens
   ============================================ */

.calc-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 120px 40px 80px;
}

/* HEADER */
.calc-header { margin-bottom: 48px; }
.calc-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  margin-bottom: 12px;
}
.calc-subtitle {
  font-size: 1rem;
  color: var(--fg2);
}

/* INPUT PANEL */
.calc-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 32px;
  margin-bottom: 24px;
}
.input-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2);
  font-weight: 500;
}
.input-group input,
.input-group select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s;
}
.input-group input:focus,
.input-group select:focus {
  border-color: var(--accent);
}
.input-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8680' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.input-group select option { background: var(--bg3); }
input[type="number"]::-webkit-inner-spin-button { display: none; }

/* CTA BUTTON */
.calc-btn {
  width: 100%;
  background: var(--accent);
  color: #0D0D0D;
  border: none;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.15s, transform 0.1s;
}
.calc-btn:hover { opacity: 0.85; }
.calc-btn:active { transform: scale(0.98); }
.calc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* RESULTS */
.results-panel { margin-bottom: 24px; }
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.result-card {
  background: var(--bg2);
  padding: 28px 24px;
}
.card-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 10px;
}
.card-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 6px;
}
.card-context {
  font-size: 0.75rem;
  color: var(--fg2);
}
.profit-card .card-value.profit { color: var(--accent); }
.roi-card .card-value { color: var(--accent); }

/* VERDICT */
.verdict {
  text-align: center;
  padding: 20px 24px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.verdict.good {
  background: rgba(39, 174, 96, 0.12);
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.3);
}
.verdict.meh {
  background: rgba(245, 166, 35, 0.1);
  color: var(--accent);
  border: 1px solid rgba(245, 166, 35, 0.25);
}
.verdict.bad {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.2);
}

/* ERROR */
.error-msg {
  padding: 14px 20px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  font-size: 0.9rem;
  border-radius: 4px;
  margin-bottom: 24px;
}

/* COMPS TABLE */
.comps-panel { margin-top: 32px; }
.comps-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}
.comps-sub {
  font-size: 0.8rem;
  color: var(--fg2);
  margin-bottom: 16px;
}
.comps-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.comps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.comps-table th {
  background: var(--bg3);
  color: var(--fg2);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.comps-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.comps-table tbody tr:last-child td { border-bottom: none; }
.comps-table tbody tr:hover td { background: var(--bg2); }

/* UTILITIES */
.hidden { display: none; }

/* MOBILE */
@media (max-width: 768px) {
  .calc-main { padding: 100px 24px 60px; }
  .input-row { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-panel { padding: 20px; }
}
@media (max-width: 480px) {
  .results-grid { grid-template-columns: 1fr; }
}