/* ─────────────────────────────────────────
   БАЗА · Ivory Minimal · Tab Layout
   ───────────────────────────────────────── */

:root {
  --bg:      #F7F3ED;
  --surface: #FFFDFA;
  --text:    #1D1B18;
  --muted:   #958F88;
  --accent:  #57644A;
  --danger:  #8E3430;
  --warn:    #9A5D2C;
  --border:  #DDD6CB;
  --border-h: #C4BBB0;
  --line:    #EAE4DA;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ── HERO ─────────────────────────────── */

.hero,
.hero.card {
  padding: 80px 0 56px;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.hero-kicker {
  margin: 0 0 16px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.hero h1 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 8vw, 72px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -2px;
  color: var(--text);
}

.hero-sub {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

/* ── NAV ──────────────────────────────── */

.nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.nav a {
  display: block;
  padding: 14px 14px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s ease;
  cursor: pointer;
}

.nav a:hover { color: var(--text); }

.nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── SECTIONS ─────────────────────────── */

.section { display: none; }

.section.is-active {
  display: block;
  animation: sectionIn 0.22s ease;
}

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section > h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.section h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0 0 8px;
}

.group-label {
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.section > .group-label:first-of-type {
  margin-top: 0;
}

/* ── CARDS ────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 24px 20px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}

.card:hover { border-color: var(--border-h); }

.card.danger  { border-left: 3px solid var(--danger); }
.card.warning { border-left: 3px solid var(--warn); }

/* ── ALERT BOXES ──────────────────────── */

.tip:not(.card),
.warning:not(.card),
.danger:not(.card) {
  margin-top: 12px;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.55;
}

.tip:not(.card) {
  background: #EAF0E3;
  border-left: 2px solid #8DB56C;
  color: #354B26;
}

.warning:not(.card) {
  background: #F9F0E7;
  border-left: 2px solid #C28850;
  color: #694018;
}

.danger:not(.card) {
  background: #F9EEEE;
  border-left: 2px solid #BC4E48;
  color: #672520;
}

/* ── LISTS ────────────────────────────── */

.steps { margin: 10px 0 0; padding-left: 22px; }
.steps li { margin-bottom: 6px; }

.list { margin: 10px 0 0; padding-left: 20px; }
.list li { margin-bottom: 5px; }

/* ── SITUATION ────────────────────────── */

.situation {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}

/* ── FOOTER ───────────────────────────── */

.footer,
.footer.card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  padding: 20px 0 0;
  margin-top: 48px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ── TABLES ───────────────────────────── */

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 12px;
}

.info-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.info-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

.info-table tr:last-child td { border-bottom: none; }

/* ── PH SCALE ─────────────────────────── */

.ph-bar { margin: 14px 0 4px; }

.ph-gradient {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    #c0392b 0%, #e67e22 28%, #27ae60 50%, #2980b9 72%, #8e44ad 100%);
  margin-bottom: 10px;
}

.ph-zones { display: flex; gap: 6px; }

.ph-zone {
  flex: 1;
  font-size: 12px;
  padding: 8px 10px;
  line-height: 1.45;
}

.ph-zone strong { display: block; margin-bottom: 3px; }

.ph-zone.acid    { background: #fdecea; border-left: 2px solid #BC4E48; color: #5a2018; }
.ph-zone.neutral { background: #EAF0E3; border-left: 2px solid #8DB56C; color: #2e4420; }
.ph-zone.alkali  { background: #e8f0fa; border-left: 2px solid #5b8fc8; color: #1c3856; }

/* ── WASHER COMPARTMENTS ──────────────── */

.compartments { display: flex; gap: 6px; margin-top: 12px; }

.compartment {
  flex: 1;
  border: 1px solid var(--border);
  padding: 10px 12px;
}

.comp-num {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin-bottom: 5px;
}

.comp-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.comp-desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ── ELECTRICAL PANEL ─────────────────── */

.panel-diagram { margin-top: 14px; }

.panel-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  justify-content: center;
}

.breaker {
  border: 1px solid var(--border);
  padding: 7px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 76px;
}

.breaker.main-breaker {
  border-color: var(--text);
  font-size: 13px;
  padding: 8px 28px;
}

.breaker.rcd {
  border-color: var(--accent);
  color: var(--accent);
}

.panel-label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

/* ── DOCUMENT TEMPLATE ────────────────── */

.doc-block {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.9;
}

.doc-block .doc-field {
  color: var(--muted);
  font-style: italic;
}

/* ── RESPONSIVE ───────────────────────── */

@media (max-width: 540px) {
  .ph-zones,
  .compartments { flex-direction: column; }

  .panel-row { flex-wrap: wrap; }

  .info-table { font-size: 12.5px; }
  .info-table th,
  .info-table td { padding: 7px 8px; }
}