* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* 16px: phones don't zoom on focus */
  color: #1d1d1f;
  background: #f6f6f4;
}

main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }

.field { margin: 0 0 1rem; padding: 0; border: 0; }
label, legend { display: block; font-weight: 600; margin-bottom: 0.25rem; padding: 0; }
select, input[type="number"], input[type="password"], input:not([type]) {
  width: 100%;
  padding: 0.55rem;
  font: inherit;
  border: 1px solid #b8b8b4;
  border-radius: 6px;
  background: #fff;
}
.hint { margin: 0.25rem 0 0; color: #5f5f5a; font-size: 0.9rem; }
.hint:empty { display: none; }

.checks { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.checks label { font-weight: normal; display: flex; align-items: center; gap: 0.35rem; min-height: 2rem; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; padding: 0; }
.chips:empty { display: none; }
.chips li { background: #e4ecf7; border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.75rem; }
.chips button { border: 0; background: none; font: inherit; font-size: 1.1rem; cursor: pointer; padding: 0 0.4rem; }

button[type="submit"] {
  width: 100%;
  padding: 0.75rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #1f5fbf;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
button[type="submit"]:disabled { background: #9aa9bf; cursor: default; }

.error { color: #b3261e; font-weight: 600; }
.note { color: #5f5f5a; }
.summary { font-weight: 600; margin-top: 1.5rem; }

details { background: #fff; border: 1px solid #deded9; border-radius: 6px; margin: 0.5rem 0; }
summary { padding: 0.65rem 0.75rem; cursor: pointer; font-weight: 600; }
details > p, details > ol { margin: 0 0.75rem 0.75rem; }
details ol { padding-left: 1.25rem; }
.trade { margin-bottom: 0.9rem; }
.trade p { margin: 0.2rem 0; }
.trade ul { margin: 0 0 0.3rem; padding-left: 1.2rem; }
.gain { font-variant-numeric: tabular-nums; }