* { box-sizing: border-box; }
:root {
  --bg: #F1F4F8;
  --panel-bg: #FFFFFF;
  --input-bg: #F7F9FB;
  --border: #DCE2E8;
  --border-strong: #C3CBD4;
  --text: #22222F;
  --text-secondary: #606F7B;
  --text-muted: #8A94A0;
  --accent: #3F7BEF;
  --accent-hover: #2E68D8;
  --danger: #DA2A07;
  --success: #1A7F37;
}
:root[data-theme="dark"] {
  --bg: #1B1E24;
  --panel-bg: #22262E;
  --input-bg: #1A1D23;
  --border: #3A4150;
  --border-strong: #4A5262;
  --text: #E6E8EC;
  --text-secondary: #B6BCC6;
  --text-muted: #7C8593;
  --accent: #4F8CFF;
  --accent-hover: #3F7BEF;
  --danger: #FF6B6B;
  --success: #7EE787;
}
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ---- Page shell ---- */
.page {
  display: flex;
  justify-content: center;
  padding: 32px 20px 64px;
}
.panel {
  width: 100%;
  max-width: 1100px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 28px 24px;
}

/* Shared inputs (Units, IT Load, Air/Liquid Ratio) sit in their own narrow,
   center-aligned block above the three equipment columns — these feed all three
   calculations, so they read as one shared block rather than belonging to any
   single column. */
.common-inputs {
  max-width: 380px;
  margin: 0 auto 8px;
}
.hint.centered {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Three equipment columns (FWU / CDU / Chiller), each self-contained: its own
   inputs and its own result chip stacked together, so the whole calculation for
   one piece of equipment reads top-to-bottom in a single column. */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 18px;
}
.equip-col h2 {
  margin-top: 0;
}
.equip-col {
  display: flex;
  flex-direction: column;
}
.equip-col .result-item {
  margin-top: auto;
  padding-top: 16px;
}
@media (max-width: 860px) {
  .equip-grid { grid-template-columns: 1fr; }
}

.panel h1 {
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--text);
}
.panel > p.intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  line-height: 1.5;
}
.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 22px 0 10px;
}

.field {
  margin-bottom: 10px;
  /* flex: none by default — a standalone .field (like each column's Load field in
     the standalone calculator) is itself a flex item of .equip-col's flex column,
     since that layout stretches columns to match the tallest one (FWU, which
     reserves space for its rounding note). Without this, .field-row's own flex:1
     below leaked onto it too, so the Load field itself grew to swallow that extra
     column height instead of it landing (as intended) in .result-item's own
     margin-top:auto — which is what pushed every row below Load out of alignment
     with the other two columns the moment FWU's note appeared. */
  flex: none;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.field input, .field select {
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
}
.field input::placeholder { color: var(--text-muted); }
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin: -4px 0 10px;
  line-height: 1.4;
}
.hint-warn { color: var(--danger); font-weight: 600; }

.actions { margin-top: 20px; }
button.full-width { width: 100%; }
button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
}
button:hover { background: var(--accent-hover); }

.message {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-line;
  color: var(--text-secondary);
}
.message.error { color: var(--danger); }
.message.ok { color: var(--success); }

/* Reserved for a single AdSense banner below the Export button — see the HTML
   comment above #adSlot for activation steps. Shows a dashed placeholder for
   now so the reserved space is visible; delete that inner div once real ad
   markup replaces it. */
.ad-slot {
  width: 100%;
  max-width: 728px;
  margin: 20px auto 0;
}
.ad-slot-placeholder {
  height: 90px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ad-slot:empty {
  display: none;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}
.result-item {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
.result-item label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* "Number of Chillers (2N+1)" is long enough to wrap to 2 lines at this column
     width while "Number of FWU (N+1)" fits on 1 — rather than reserving worst-
     case 2-line height on every chip (which made them all noticeably taller),
     force a single line and quietly truncate the rare case that's too long. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.result-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
  margin-top: 4px;
  /* Reserves space for the FWU rounding note whether or not it's currently shown —
     without this, the note popping in/out as you type (odd vs. even totals) shifts
     everything below it (the other result chips, Export button) up and down on
     every keystroke. min-height is sized to the note's own longest real sentence
     wrapped at this column's width, not a guess. */
  min-height: 4.1em;
}
.result-formula {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
  line-height: 1.4;
  /* Empty until that equipment's own Load field has a value — collapses to 0
     height until then, so whichever column you type a Load into first grows
     taller than the other two (this was the actual bug behind "the first one I
     enter gets taller"). Forcing a single line (rather than reserving worst-
     case 2-line wrap height, which made every chip noticeably taller) keeps
     the reserved height small while still fixing that: every chip now reserves
     exactly one line's height, filled or not. A very long 2N+1 formula quietly
     truncates instead of wrapping — the on-screen number is what matters, this
     line is just the supporting math. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.4em;
}


/* ============ INFO CONTENT (below the tool) ============
   Read-only reference content sitting below .page (see index.html) — plain
   article typography, no interaction with the tool's own state or CSS. */
.info-page {
  background: var(--bg);
  padding: 56px 24px 72px;
}
.info-page .info-inner {
  max-width: 760px;
  margin: 0 auto;
}
.info-page h2 {
  font-size: 1.2rem;
  color: var(--text);
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.info-page h2:first-child { margin-top: 0; }
.info-page p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.info-page ol, .info-page ul {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-left: 22px;
  margin: 0 0 14px;
}
.info-page strong { color: var(--text); }
.info-page details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--panel-bg);
}
.info-page details p { margin: 10px 0 0; }
.info-page summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}
.info-page summary::marker { color: var(--accent); }