/* ============================================================
   POM Base — Reset, body, grid layout, responsive, print
   ============================================================ */

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Main 3-column layout */
.main-layout {
  max-width: var(--grid-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--grid-left) 1fr var(--grid-right);
  gap: 0;
  min-height: calc(100vh - var(--header-height) - 48px - 60px);
  padding-bottom: 36px;
}

/* ============================================================
   Responsive — Tablet (<=1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .main-layout { grid-template-columns: 1fr; }
  .left-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 24px;
    align-items: flex-start;
  }
  .left-sidebar h3 { width: 100%; margin-top: 0; }
  .right-sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 24px;
  }
  .right-sidebar h3 { width: 100%; }
  .cost-dial-card { flex: 1; min-width: 220px; }
}

/* ============================================================
   Responsive — Mobile (<768px)
   ============================================================ */
@media (max-width: 767px) {
  .header {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 8px;
  }
  .header-brand { font-size: 16px; }
  .top-input-bar { flex-direction: column; gap: 8px; }
  .center-panel { padding: 12px 16px; }
  .lever { height: auto; flex-wrap: wrap; padding: 6px 0; }
  .lever-label { min-width: 100%; margin-bottom: 2px; }
  .lever-delta { padding-left: 0; }
  .speedometer-wrap { width: 260px; height: 210px; }
  .speedometer-svg { width: 260px; height: 210px; }
  .speedometer-rate { font-size: 56px; letter-spacing: -2px; }
  .left-sidebar { display: none; }
  .financial-table th:nth-child(2),
  .financial-table td:nth-child(2) { display: none; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .header { position: static; }
  .lever-range, .lever-reset, .reset-all-btn,
  .contrib-toggle, .site-select,
  .test-banner, .design-toggle { display: none !important; }
  .lever-input, .top-input {
    border: none;
    background: none;
  }
  .main-layout { display: block; }
  .left-sidebar { display: block; float: left; width: 240px; }
  .center-panel { margin-left: 250px; margin-right: 290px; }
  .right-sidebar { float: right; width: 280px; }
  @page { size: landscape A4; margin: 1cm; }
}