/* Clearwatt: one stylesheet, phone first.

   Sections (in this order):
     1. Colours (light and dark)       5. Question screens
     2. Page basics                    6. "Add more" lists (fridges, ACs, geysers, motors)
     3. First page                     7. Bill screen messages
     4. Top bar                        8. Results (bill, solar, buying)
                                       9. Small phones
   To change a colour everywhere, change it in section 1 only. */


/* ---------- 1. Colours ---------- */
:root {
  --bg: #f4f6f3;            /* page background */
  --card: #ffffff;          /* cards and answer buttons */
  --text: #17231f;
  --muted: #5b6b65;         /* secondary text */
  --line: #dfe5e1;          /* borders */
  --brand: #0f5a4f;         /* Clearwatt green */
  --on-brand: #ffffff;      /* text on green */
  --brand-soft: #e3f0ec;
  --accent: #f2a516;        /* slab warnings */
  --accent-soft: #fff4dc;
  --good: #1d7a46;          /* savings */
  --good-soft: #e2f4e8;
  --warn: #9a5400;
  --danger: #b3261e;        /* errors, remove, "near the next slab" */
  --danger-soft: #fdecea;
  --bar: #2f8a78;           /* "where your units go" bars */
  --blue: #2d5fa8;          /* "Should I buy?" icon */
  --blue-soft: #e6eefb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1513; --card: #18211e; --text: #e8efec; --muted: #9aaba4; --line: #2a3632;
    --brand: #5cc2ad; --on-brand: #0f1513; --brand-soft: #1b2e29;
    --accent: #f5b73d; --accent-soft: #2e2615; --good: #6fd197; --good-soft: #17291f; --warn: #f0a75a;
    --danger: #f3a39f; --danger-soft: #3a1d1b; --bar: #4fb39e; --blue: #8fb3ea; --blue-soft: #1b2433;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1513; --card: #18211e; --text: #e8efec; --muted: #9aaba4; --line: #2a3632;
  --brand: #5cc2ad; --on-brand: #0f1513; --brand-soft: #1b2e29;
  --accent: #f5b73d; --accent-soft: #2e2615; --good: #6fd197; --good-soft: #17291f; --warn: #f0a75a;
  --danger: #f3a39f; --danger-soft: #3a1d1b; --bar: #4fb39e; --blue: #8fb3ea; --blue-soft: #1b2433;
}


/* ---------- 2. Page basics ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.lang-ml { font-size: 15.5px; }                          /* Malayalam letters are bigger */

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen {
  flex: 1; display: flex; flex-direction: column; padding: 8px 16px 24px;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}

h1 { font-size: 26px; line-height: 1.25; margin: 4px 0 12px; letter-spacing: -0.01em; }
.lang-ml h1 { font-size: 23px; line-height: 1.4; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 6px 0 10px; }
h1, h2, h3, p, li, strong, small, span, dd, td { overflow-wrap: anywhere; }   /* long words wrap, never spill */

.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 13px; }
.good { color: var(--good); }
.bad { color: var(--danger); }
.center-text { text-align: center; }
[hidden] { display: none !important; }


/* ---------- 3. First page ---------- */
.welcome { padding-top: 16px; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.welcome .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.welcome .brand img { border-radius: 10px; }

.hero {
  background: linear-gradient(150deg, var(--brand), #1f7a68); color: var(--on-brand);
  border-radius: 20px; padding: 22px 20px; margin-bottom: 22px;
}
.hero-tag {
  display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); font-size: 13px; font-weight: 600;
}
.hero h1 { margin: 0; font-size: 27px; line-height: 1.2; }
.lang-ml .hero h1 { font-size: 23px; line-height: 1.35; }

.pick { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.entries { display: grid; gap: 10px; margin-bottom: 26px; }
.entry {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.1s;
}
.entry:hover { border-color: var(--brand); }
.entry:active { transform: scale(0.98); }
.entry-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 20px; font-weight: 700;
}
.entry-icon.sun { background: var(--accent-soft); color: var(--warn); }
.entry-icon.buy { background: var(--blue-soft); color: var(--blue); }
.entry-text { flex: 1; min-width: 0; }
.entry-text strong, .entry-text small { display: block; }
.entry-text strong { font-size: 16.5px; line-height: 1.3; }
.entry-text small { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.entry .arrow { margin-left: auto; color: var(--muted); font-size: 26px; line-height: 1; }


/* ---------- 4. Top bar (back, progress, language) ---------- */
.stepbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.back { width: 32px; font-size: 32px; line-height: 1; color: var(--text); text-decoration: none; }
.progress { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress div { height: 100%; background: var(--brand); border-radius: 3px; transition: width 0.3s; }
.stepbar .title { flex: 1; font-weight: 700; }
.lang-switch {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--card);
}


/* ---------- 5. Question screens ---------- */
.eyebrow { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; }
.help { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.ask { font-size: 15px; margin: 22px 0 10px; }
.ask.first { margin-top: 4px; }
.error { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 15px; }

/* The ₹ box on the bill screen */
.money {
  display: flex; align-items: center; gap: 8px; padding: 6px 16px;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
}
.money:focus-within { border-color: var(--brand); }
.money span { font-size: 30px; font-weight: 700; color: var(--muted); }
.money input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 32px; font-weight: 700; color: var(--text); padding: 8px 0; outline: none; }

/* Big tappable answer cards (one answer) */
.choices { display: grid; gap: 8px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: block; position: relative; min-height: 52px; padding: 14px 16px 14px 46px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
}
.choice span::before {                                   /* the round dot */
  content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 2px solid var(--line); border-radius: 50%; background: var(--card);
}
.choice strong, .choice small { display: block; }
.choice small { color: var(--muted); font-size: 13px; }
.choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.choice input:checked + span::before { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--card); }
.choice.not-yet { cursor: not-allowed; }                 /* shown, but can't be chosen yet ("Coming soon") */
.choice.not-yet span { opacity: 0.5; background: var(--bg); border-style: dashed; }

/* Small answer buttons in a row (hours, minutes, tons) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px;
  padding: 10px 14px; cursor: pointer; font-weight: 600;
  background: var(--card); border: 2px solid var(--line); border-radius: 999px;
}
.chip input:checked + span { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.choice input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* − number + */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line); background: var(--card); color: var(--brand); font-size: 28px; line-height: 1;
}
.stepper input {
  width: 96px; text-align: center; font: inherit; font-size: 34px; font-weight: 700;
  background: none; border: 0; color: var(--text); -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Follow-up questions show only after "Yes" (hidden when the answer is "No" or "None") */
.group:has(> .choices input[value="none"]:checked) > .follow,
.group:has(> .choices input[value="no"]:checked) > .follow { display: none; }

/* The Next button, always at the bottom */
.bottom {
  margin-top: auto; padding-top: 24px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%);
}
.next-button {
  display: block; width: 100%; padding: 16px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--on-brand); background: var(--brand); border: 0; border-radius: 14px;
}
.default-next {                                          /* invisible: makes the Enter key mean "Next" */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}


/* ---------- 6. "Add more" lists (fridges, ACs, geysers, motors) ---------- */
.item-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; margin: 0 0 12px; scroll-margin-top: 70px; }
.item-card.single { background: none; border: 0; padding: 0; margin-bottom: 4px; }   /* only one: no box */
.item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.item-head h2 { margin: 0; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Remove: a small, quiet bin icon (turns red when touched). The word "Remove" is for screen readers only. */
.remove-pill {
  display: inline-grid; place-items: center; flex: none; position: relative;
  width: 30px; height: 30px; padding: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.remove-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.remove-pill:hover, .remove-pill:focus-visible, .remove-pill:active { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

/* The buttons under the list: same shape, different colours */
.list-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.add-button, .none-button {
  flex: 1 1 160px; min-height: 46px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; text-align: center; scroll-margin-top: 70px;
}
.add-button { background: var(--brand-soft); color: var(--brand); border: 1.5px solid transparent; }
.add-button:hover { border-color: var(--brand); }
.none-button { background: var(--card); color: var(--muted); border: 1.5px solid var(--line); font-weight: 600; }
.none-button:hover { color: var(--text); border-color: var(--muted); }
.empty { margin: 0; padding: 14px; text-align: center; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 14px; }


/* ---------- 7. Bill screen messages ---------- */
.facts, .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.facts div, .nums div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.facts span, .facts small, .nums span, .nums small { display: block; font-size: 12px; color: var(--muted); }
.facts strong { font-size: 24px; }
.note-box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 15px; }

/* Slab messages: above a slab (amber), near the next slab (red) */
.slab-box { margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.slab-box strong { display: block; font-size: 17px; margin-bottom: 4px; }
.slab-box p { margin: 0; font-size: 15px; }
.slab-box.near { border-left-color: var(--danger); background: var(--danger-soft); }
.slab-box.near strong { color: var(--danger); }

.alert { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 15px; }
.alert > strong:first-child { display: block; color: var(--warn); margin-bottom: 2px; }
.good-alert { background: var(--good-soft); border-left-color: var(--good); }
.good-alert > strong:first-child { color: var(--good); }


/* ---------- 8. Results ---------- */
/* The coloured box at the top */
.summary { background: var(--brand); color: var(--on-brand); border-radius: 18px; padding: 18px; margin: 4px 0 12px; }
.summary.sun { background: linear-gradient(135deg, #0f5a4f, #2f8a78); }
.summary.verdict-slow { background: #8a6d1d; }           /* solar: pays back slowly */
.summary.verdict-no { background: #5b6b65; }             /* solar: not worth it */
.summary .label { margin: 0; font-size: 14px; opacity: 0.85; }
.summary .big { margin: 2px 0; font-size: 44px; font-weight: 800; line-height: 1.1; }
.summary .small-big { font-size: 26px; }
.summary .units { margin: 0; font-weight: 600; }
.summary .muted { color: inherit; opacity: 0.8; }
.summary .per { font-size: 18px; font-weight: 600; opacity: 0.85; }
.compare { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.compare div { flex: none; }
.compare div + div { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.compare span, .compare small { display: block; font-size: 12px; opacity: 0.85; }
.compare strong { font-size: 20px; }
.compare p { margin: 0; font-size: 14px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 0 0 12px; }
.section-title { margin: 18px 0 10px; }

/* Where your units go */
.bar { margin-bottom: 10px; }
.bar-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.track { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.fill { height: 100%; background: var(--bar); border-radius: 5px; }

/* Ways to save in this bill */
.ways { list-style: none; padding: 0; margin: 0 0 12px; }
.ways li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ways li strong { white-space: nowrap; text-align: right; color: var(--good); font-size: 16px; }
.ways li strong small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.ways .tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700; background: var(--good-soft); color: var(--good); }

/* What's worth doing */
.idea { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 10px; }
.idea .nums { margin: 0; }
.idea .nums div { background: var(--bg); border: 0; }
.idea .nums strong { font-size: 20px; }
.verdict { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand-soft); color: var(--brand); }
.v-do { background: var(--good-soft); color: var(--good); }
.v-free { background: var(--accent-soft); color: var(--warn); }
.note { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.idea-link { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--brand); text-decoration: none; }

/* Time-of-Day prices */
.tod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tod div { background: var(--bg); border-radius: 10px; padding: 10px 6px; text-align: center; }
.tod span { display: block; font-size: 12px; color: var(--muted); }
.tod .peak { background: var(--accent-soft); }

/* Checked, but not worth the money */
.checked summary { cursor: pointer; font-weight: 600; }
.checked-list { list-style: none; padding: 0; margin: 12px 0 0; }
.checked-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.checked-list strong { display: block; font-size: 15px; font-weight: 600; }
.checked-list span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }

/* Solar: the money table and the sizes */
.money-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.money-table td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.money-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.money-table tr.total td { font-weight: 800; border-bottom: 2px solid var(--line); }
.money-table small { font-weight: 400; color: var(--muted); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.size, .option {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px; font-size: 13px;
  background: var(--card); border: 2px solid var(--line); border-radius: 14px;
}
.size strong { font-size: 22px; }
.size.picked, .option.picked { border-color: var(--brand); }
.size em, .option em {                                   /* the "Suggested" / "Better buy" badge */
  position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 999px;
  font-style: normal; font-size: 11px; font-weight: 700; background: var(--brand); color: var(--on-brand);
}

/* Buying: two models side by side, and the bill before → after */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 6px; }
.option strong { font-size: 15px; margin-bottom: 6px; }
.option dl { margin: 0; display: grid; gap: 1px; }
.option dt { color: var(--muted); font-size: 12px; margin-top: 4px; }
.option dd { margin: 0; font-weight: 700; font-size: 16px; }
.before-after { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.before-after > div { flex: 1; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.before-after .arrow { flex: none; padding: 0; background: none; font-size: 22px; color: var(--muted); }
.before-after span, .before-after small { display: block; font-size: 12px; color: var(--muted); }
.before-after strong { font-size: 20px; }
.steps-list { margin: 0; padding-left: 20px; font-size: 15px; }
.steps-list li { margin-bottom: 8px; }

/* Buttons at the end of every result */
.end-actions { display: grid; gap: 8px; margin-top: 16px; }
.button {
  display: block; padding: 15px; text-align: center; text-decoration: none; font-weight: 700;
  color: var(--on-brand); background: var(--brand); border-radius: 14px;
}
.button.secondary { background: var(--card); color: var(--brand); border: 2px solid var(--line); }


/* ---------- 9. Small phones ---------- */
@media (max-width: 360px) {
  h1 { font-size: 22px; }
  .summary .big { font-size: 36px; }
  .versus, .tod { grid-template-columns: 1fr; }
}