/* GEN-SIZER — mobile-first, no CDN deps (KOD-17 increment 1) */
:root {
  --bg: #0e1420;
  --card: #17202f;
  --card2: #1d2a3d;
  --ink: #e8eef7;
  --dim: #93a3b8;
  --accent: #ffb347;
  --good: #57d38c;
  --line: #2a3a52;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
header { padding: 1.2rem 1rem .4rem; text-align: center; }
h1 { margin: 0; letter-spacing: .12em; color: var(--accent); font-size: 1.7rem; }
.tagline { margin: .3rem 0 0; color: var(--dim); }
main { max-width: 1000px; margin: 0 auto; padding: 0 1rem 2rem; }
h2 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; color: var(--accent); }
button { font: inherit; cursor: pointer; }

#presets { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  background: var(--card2); color: var(--ink);
  border: 1px solid var(--line); border-radius: .5rem;
  padding: .6rem .8rem; text-align: left; width: 100%;
}
.preset strong { color: var(--good); }
.preset span { color: var(--dim); font-size: .85rem; }
#clear-btn {
  background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: .4rem; padding: .3rem .7rem; margin-bottom: .6rem;
}
/* Add-room buttons share Clear all's row; accent text marks them the primary
 * action. The gap is a margin, not whitespace, so it stays small. */
.add-room {
  background: none; border: 1px solid var(--line); color: var(--accent);
  border-radius: .4rem; padding: .3rem .7rem; margin: 0 0 .6rem .35rem;
}

/* Multi-column (not grid) so unequal-height room panels top-justify masonry-
 * style: each packs flush under the panel above it; panels never split. */
#picker { display: block; }
.room { background: var(--card); border: 1px solid var(--line); border-radius: .6rem; padding: .8rem 1rem; break-inside: avoid; margin: 0 0 .8rem; }
.room h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--accent); }
.room-head { display: flex; align-items: center; justify-content: space-between; }
.room-remove {
  background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: .4rem; padding: .3rem .7rem; font-size: .8rem;
}
.room ul { list-style: none; margin: 0; padding: 0; }
.room li { border-bottom: 1px dashed var(--line); }
.room li:last-child { border-bottom: 0; }
.room label { display: flex; align-items: baseline; gap: .55rem; padding: .42rem .1rem; cursor: pointer; }
.room input[type=checkbox] { width: 1.05rem; height: 1.05rem; flex: none; align-self: center; accent-color: var(--good); }
.item-name { flex: 1; }
.item-watts { color: var(--dim); font-size: .8rem; white-space: nowrap; }

#verdict {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--card2); border: 1px solid var(--line); border-radius: .6rem;
  padding: .9rem 1rem; margin-top: 1rem;
}
#verdict h2 { margin: 0 0 .5rem; }
.totals { display: flex; gap: 1.5rem; }
.totals span { display: block; color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.totals strong { font-size: 1.15rem; }
.verdict-line, #verdict-body .verdict { font-size: 1.25rem; margin: .6rem 0 .2rem; }
#verdict-body .verdict strong { color: var(--good); font-size: 1.5rem; }
.note, .anti-oversize, .method { color: var(--dim); font-size: .85rem; }
.anti-oversize { border-top: 1px dashed var(--line); padding-top: .5rem; }
.dim { color: var(--dim); }
.method { margin-bottom: 0; }
footer { max-width: 1000px; margin: 0 auto; padding: 0 1rem 2rem; color: var(--dim); font-size: .8rem; }

@media (min-width: 700px) {
  h1 { font-size: 2.2rem; }
  #presets { grid-template-columns: repeat(4, 1fr); }
  #picker { columns: 2; column-gap: .8rem; }
  main { display: grid; grid-template-columns: 1fr 340px; gap: 0 1.5rem; }
  #presets-bar { grid-column: 1 / -1; }
  #verdict { position: sticky; top: 1rem; bottom: auto; margin-top: 4.4rem; align-self: start; grid-column: 2; grid-row: 2 / span 3; }
  #picker-bar { grid-column: 1; }
}