/* 两个价 — one stylesheet, read once at start-up and served from memory.

   Late afternoon on a roof: a warm gold for the sun and a cool green for the
   house, and where the two overlap is the only part of the array worth the
   import price. That overlap is the whole page, so it is the only filled shape
   on it.

   The tones are `most`, `some`, `little` — how much of the solar lands on
   something already switched on. None of them is advice. */

:root {
  --bg: #0f1310;
  --panel: #161c18;
  --panel2: #1c2420;
  --line: #2a3630;
  --ink: #e7ece8;
  --dim: #97a49c;
  --faint: #68766e;

  --sun: #e8b93a;
  --load: #5fb3a1;
  --fill: #b9903a;
  --dec: #e8b93a;
  --jun: #6f8bc4;
  --clay: #d4836b;

  --most: #8fbf7a;
  --some: #e8b93a;
  --little: #d4836b;
  --radius: 11px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 14px calc(30px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans SC", "PingFang SC", sans-serif;
  overflow-wrap: anywhere;
}
main { max-width: 800px; margin: 0 auto; }

.topbar {
  max-width: 800px; margin: 0 auto; padding: 22px 0 14px;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start;
}
.brand {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(160deg, var(--sun) 0%, #9a7616 100%);
  color: #17110a; font-size: 23px; font-weight: 700; line-height: 1;
}
.titles h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; }
.titles p { margin: 4px 0 0; color: var(--dim); font-size: 14px; }

.panel, .block, .findings {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 14px 0;
}
.panel h2 { margin: 0 0 9px; font-size: 15px; }
h3 { margin: 14px 0 8px; font-size: 14.5px; }
.block h3, .panel h3:first-child { margin-top: 0; }
.sub { margin: 0 0 10px; color: var(--dim); font-size: 14px; }
.sub:last-child { margin-bottom: 0; }
.tiny { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.cap { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.55; }
.quiet { background: transparent; }

/* ------------------------------------------------------------------ form */

.egs { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.eg {
  cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--panel2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px;
}
.eg:hover { color: var(--ink); border-color: var(--faint); }
.eg.on { border-color: var(--sun); color: var(--sun); box-shadow: inset 0 0 0 1px var(--sun); }
.eg:focus-visible, input:focus-visible, .go:focus-visible {
  outline: 2px solid var(--sun); outline-offset: 2px;
}
.go {
  display: block; width: 100%; margin-top: 16px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 650;
  background: var(--sun); color: #17110a;
  border: 0; border-radius: 9px; padding: 11px;
}

.fields {
  display: grid; gap: 9px; margin-bottom: 4px;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}
.fl { display: grid; gap: 4px; min-width: 0; }
.fl span { color: var(--dim); font-size: 12.5px; }
.fl input {
  width: 100%; min-width: 0;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px;
  font: 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- verdict */

.verdict {
  border: 1px solid var(--line); border-left: 4px solid var(--sun);
  border-radius: var(--radius); background: var(--panel2); padding: 15px 16px; margin: 14px 0;
}
.verdict > b { display: block; font-size: 21px; line-height: 1.28; }
.verdict .say { margin: 8px 0 0; color: var(--dim); font-size: 13.5px; }
.verdict.most { border-left-color: var(--most); }
.verdict.some { border-left-color: var(--some); }
.verdict.little { border-left-color: var(--little); }

.findings { padding: 4px 16px; }
.finding { border-top: 1px solid var(--line); padding: 13px 0; }
.finding:first-child { border-top: 0; }
.finding > b { display: block; font-size: 14.5px; }
.finding > p { margin: 5px 0 0; color: var(--dim); font-size: 13.5px; }
.finding.most > b { color: var(--most); }
.finding.some > b { color: var(--some); }
.finding.little > b { color: var(--little); }

/* ------------------------------------------------------------- the charts */

svg.day { display: block; width: 100%; max-width: 580px; height: auto; margin: 8px auto 2px; }
.grid { stroke: var(--line); stroke-width: 1; }
.ax { fill: var(--faint); font-size: 10px; font-family: inherit; }

/* The overlap is the only filled shape on the page, because it is the only
   part of the array worth the import price. */
.overlap { fill: var(--fill); fill-opacity: 0.34; stroke: none; }
.genline { fill: none; stroke: var(--sun); stroke-width: 2.2; stroke-linejoin: round; }
.genline.jun { stroke: var(--jun); stroke-width: 2; }
.genline.dec { stroke: var(--dec); stroke-width: 2; }
.loadline { fill: none; stroke: var(--load); stroke-width: 2.2; stroke-linejoin: round; }

.hw { fill: var(--faint); }
.hw.best { fill: var(--most); }
.hw.now { fill: var(--clay); }

.legend { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 10px; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }
i.k { width: 13px; height: 4px; border-radius: 2px; display: inline-block; flex: none; }
i.k.gen { background: var(--sun); }
i.k.load { background: var(--load); }
i.k.fill { background: var(--fill); height: 10px; opacity: 0.5; }
i.k.jun { background: var(--jun); }
i.k.dec { background: var(--dec); }
i.k.now { background: var(--clay); height: 10px; }
i.k.best { background: var(--most); height: 10px; }

/* ------------------------------------------------------------- the tables */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
table.t th, table.t td {
  padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: right;
}
table.t thead th { color: var(--faint); font-weight: 600; font-size: 11.5px; }
/* A floor on this column: `white-space: normal` without one lets a narrow
   scroll container squeeze it to one character per line — taller, not wider,
   so no overflow check ever sees it. */
table.t th.ln { text-align: left; font-weight: 600; white-space: normal; min-width: 104px; }
table.t td { font-variant-numeric: tabular-nums; color: var(--dim); }
table.t td.amt { color: var(--ink); font-weight: 600; }
table.t tr.base { background: rgba(232, 185, 58, 0.08); }
table.t tr.base th.ln { color: var(--sun); }

.foot {
  max-width: 800px; margin: 22px auto 0; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px;
}