:root {
  --ink: #15202b;
  --paper: #f7f5f0;
  --accent: #c8542a;
  --line: #d8d2c4;
  --panel: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 Georgia, serif; color: var(--ink); background: var(--paper); }

header { padding: 2rem 1.5rem 1rem; }
h1 { font-size: 1.9rem; margin: 0 0 .25rem; }
.sub { color: #5a5142; font-style: italic; margin: 0; }

main { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; padding: 1.5rem; }

#build-panel {
  position: sticky; top: 1rem; align-self: start;
  background: var(--panel); border: 1px solid var(--line); padding: 1rem;
}
#build-panel h2 { margin-top: 0; font-size: 1.1rem; }
.build-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line);
}

.step {
  background: var(--panel); border: 1px solid var(--line);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.step h2 { margin-top: 0; }
.step h2 span {
  display: inline-block; background: var(--ink); color: #fff; border-radius: 50%;
  width: 1.6rem; height: 1.6rem; text-align: center; line-height: 1.6rem;
  font-size: .9rem; margin-right: .5rem;
}

.card { border: 1px solid var(--line); padding: 1rem; margin: .75rem 0; }
.card h3 { margin-top: 0; }
.list-price { font-weight: bold; }

.banner {
  background: #fff6e5; border-left: 3px solid #d9a441; padding: .4rem .6rem; font-size: .9rem;
}

.line, .total { display: flex; justify-content: space-between; padding: .4rem 0; }
.total { border-top: 2px solid var(--ink); font-weight: bold; margin-top: .5rem; padding-top: .5rem; }

button, .button-link {
  display: inline-block; background: var(--accent); color: #fff; border: 0;
  padding: .55rem 1rem; cursor: pointer; font: inherit; text-decoration: none;
  border-radius: 2px;
}
button:hover, .button-link:hover { filter: brightness(1.08); }

.build-line .remove {
  background: transparent; color: var(--ink); opacity: .55; border: 1px solid var(--line);
  padding: 0 .5rem; line-height: 1.4rem; font-size: 1rem; flex: none;
}
.build-line .remove:hover { opacity: 1; filter: none; border-color: var(--accent); color: var(--accent); }

input, select, textarea {
  font: inherit; padding: .45rem; border: 1px solid var(--line);
  width: 100%; margin: .3rem 0; background: #fff; color: var(--ink);
}
label.radio { display: block; font-weight: normal; }
label.radio input { width: auto; }
.qty { width: 4.5rem; display: inline-block; }

#plan-options { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); background: #fff; }
#plan-options li { padding: .4rem .6rem; cursor: pointer; }
#plan-options li:hover { background: var(--paper); }

.pick { border: 1px solid var(--line); padding: .6rem; margin: .5rem 0; }

.fine, .hint { font-size: .85rem; color: #6a6152; }
.form-error { color: #a3271e; font-weight: bold; }
.deferred, .refused {
  background: #fdeeee; border-left: 3px solid var(--accent); padding: .5rem .75rem;
}

@media (max-width: 800px) {
  main { grid-template-columns: 1fr; }
  #build-panel { position: static; }
}

@media (prefers-color-scheme: dark) {
  :root { --ink: #eae5d9; --paper: #1b1f24; --panel: #262b31; --line: #3a3f46; --accent: #e07a4c; }
  input, select, textarea { background: #1b1f24; color: var(--ink); }
  .banner { background: #3a3220; border-left-color: #d9a441; }
  .deferred, .refused { background: #3a2422; }
}