/* Home Energy MVP - deliberately minimal, mobile-first. Not a branding exercise. */

:root {
  --fg: #1a1a1a;
  --bg: #ffffff;
  --muted: #5a5a5a;
  --line: #d8d8d8;
  --accent: #14532d;
  --accent-bg: #eef5ef;
  --warn-bg: #fff4e5;
  --warn-fg: #7a4b00;
  --err-bg: #fde8e8;
  --err-fg: #8a1c1c;
  --save: #14532d;
  --cost: #8a1c1c;
  --maxw: 44rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem 1rem 4rem; }

h1 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .35rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
p { margin: .5rem 0; }
.lede { color: var(--muted); margin-top: 0; }

a { color: var(--accent); }

.independence {
  font-size: .88rem;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .5rem .7rem;
  margin: .7rem 0 0;
}

/* short pre-calculation warning (replaces the old long disclaimer block) */
.mini-warning {
  font-size: .88rem;
  color: var(--muted);
  border-left: 3px solid var(--line);
  padding: .35rem 0 .35rem .7rem;
  margin: .9rem 0 1.4rem;
}
.mini-warning strong { color: var(--fg); }

form { margin: 0; }

.field { margin: .9rem 0; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.field .hint { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }

input[type="number"], input[type="email"], select {
  width: 100%;
  padding: .55rem .6rem;
  font-size: 1rem;
  border: 1px solid #9a9a9a;
  border-radius: 5px;
  background: #fff;
  color: var(--fg);
}
input:focus, select:focus, button:focus, summary:focus {
  outline: 3px solid #2563eb;
  outline-offset: 1px;
}

.inline-2 { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 32rem) { .inline-2 { grid-template-columns: 1fr 1fr; } }

details.adv {
  margin: 1.1rem 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 .8rem;
}
details.adv > summary {
  cursor: pointer;
  font-weight: 600;
  padding: .7rem 0;
  list-style: revert;
}
details.adv[open] { padding-bottom: .6rem; }

button.calc {
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  margin-top: .5rem;
}

/* provenance tags */
.tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .08rem .4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
}
.tag.user { color: #1d4ed8; }
.tag.default { color: #6b4d00; }
.tag.assumption { color: #6b21a8; }
.tag.estimate { color: #444; }
.tag.constant { color: #333; }

/* ---------- results ---------- */
#result { margin-top: 1rem; }
#result:empty { margin-top: 0; }

.result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: #fafafa;
}

.headline { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0 0 .6rem; }
.headline.save { color: var(--save); }
.headline.cost { color: var(--cost); }
.headline.mixed { color: var(--fg); }

/* primary summary - the part a non-technical reader should get at a glance */
table.summary { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; }
table.summary th, table.summary td {
  text-align: left;
  padding: .55rem .3rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.summary th { font-weight: 600; width: auto; }
table.summary td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.summary tr:last-child th, table.summary tr:last-child td { border-bottom: 0; }

table.summary tr.savings-row td { font-size: 1.2rem; }
table.summary tr.savings-pos th, table.summary tr.savings-pos td { color: var(--save); }
table.summary tr.savings-neg th, table.summary tr.savings-neg td { color: var(--cost); }

.pct { display: block; font-size: .82rem; font-weight: 400; color: var(--muted); margin-top: .15rem; }
table.summary tr.savings-pos .pct,
table.summary tr.savings-neg .pct { color: inherit; opacity: .85; }

.payback {
  font-size: .95rem;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .55rem .7rem;
  margin: .8rem 0 0;
}

.uncertainty { font-size: .85rem; color: var(--muted); margin: .8rem 0 .2rem; }
.closing-note { font-size: .82rem; color: var(--muted); margin: .7rem 0 0; }

/* collapsed technical detail inside the result */
details.calc-details {
  margin: .9rem 0 0;
  border-top: 1px solid var(--line);
  padding-top: .5rem;
}
details.calc-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  padding: .2rem 0;
}
.details-pointer { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; }

table.breakdown { width: 100%; border-collapse: collapse; margin: .6rem 0 .2rem; font-size: .92rem; }
table.breakdown th, table.breakdown td { text-align: left; padding: .45rem .3rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.breakdown th { width: 55%; font-weight: 600; }
table.breakdown td { font-variant-numeric: tabular-nums; }
table.breakdown tr:last-child td, table.breakdown tr:last-child th { border-bottom: 0; }

.problems { margin: .6rem 0 0; padding: 0; list-style: none; }
.problems li { padding: .45rem .6rem; border-radius: 4px; margin: .3rem 0; font-size: .9rem; }
.problems li.error { background: var(--err-bg); color: var(--err-fg); }
.problems li.warning { background: var(--warn-bg); color: var(--warn-fg); }

/* ---------- "How this works" (collapsed methodology + assumptions + sources) ---------- */
details.how {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 .85rem;
}
details.how > summary {
  cursor: pointer;
  font-weight: 700;
  padding: .8rem 0;
  list-style: revert;
}
details.how[open] { padding-bottom: .8rem; }
.method { font-size: .9rem; }
.method code { font-size: .85em; background: #eee; padding: .05rem .25rem; border-radius: 3px; }
.tags-legend { font-size: .85rem; color: var(--muted); }
.eng-note { font-size: .9rem; color: var(--muted); }

.assumptions dl { margin: .4rem 0; }
.assumptions dt { font-weight: 600; margin-top: .7rem; }
.assumptions dd { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.assumptions .src { font-size: .82rem; }

ul.notincl { font-size: .9rem; color: var(--muted); padding-left: 1.2rem; }
ul.notincl li { margin: .2rem 0; }

/* ---------- email placeholder (non-functional) ---------- */
.email-ph {
  margin: 2rem 0 0;
  border: 1px dashed #9a9a9a;
  border-radius: 6px;
  padding: .9rem;
  background: #f6f6f6;
}
.email-ph .flag {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--err-fg);
}
.email-ph input { margin-top: .4rem; }
.email-ph button {
  margin-top: .4rem;
  padding: .5rem .8rem;
  font-size: .95rem;
  border: 1px solid #9a9a9a;
  border-radius: 5px;
  background: #eee;
  cursor: not-allowed;
}

footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
footer ul { padding-left: 1.1rem; }
footer li { margin: .25rem 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 26rem) {
  table.summary th, table.summary td { display: block; width: 100%; text-align: left; }
  table.summary td { padding-top: .1rem; padding-bottom: .55rem; }
  table.summary th { border-bottom: 0; padding-bottom: 0; }
  table.summary tr.savings-row td { font-size: 1.15rem; }
}