/* A dashboard-first requirements builder. Space and 3D are optional modules. */
#requirements {
  --req-surface: #fff;
  --req-soft: #f7faff;
  --req-edge: #dce7f5;
  --req-selected: #edf5ff;
  --req-selected-edge: #8ab8ee;
  --req-ink: #284e79;
  --req-muted: #6b809a;
}
#requirements .section-heading { margin-bottom: 34px; }
#requirements .requirements-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 26px;
  width: 100%;
}
#requirements .req-sections { display: grid; gap: 24px; min-width: 0; }
#requirements .req-section {
  min-width: 0;
  margin: 0;
  padding: 25px 27px 28px;
  border: 1px solid var(--req-edge);
  border-radius: 19px;
  background: linear-gradient(145deg, var(--req-surface), var(--req-soft));
  box-shadow: 0 6px 22px #244c7b05, inset 0 1px 0 #ffffffa6;
}
#requirements .req-section > legend {
  max-width: 100%;
  padding: 0 9px;
  margin-left: -9px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.2px;
}
#requirements .req-step {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  width: 29px;
  height: 29px;
  margin-right: 9px;
  border: 1px solid #c8def7;
  border-radius: 9px;
  color: #2779d6;
  background: linear-gradient(145deg, #f1f8ff, #e1efff);
  box-shadow: inset 0 1px 0 #fff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .5px;
}
#requirements .req-hint { color: var(--req-muted); font-size: 12px; line-height: 1.85; margin: 0 0 19px; }
#requirements .req-subheading { color: var(--text); font-size: 12px; font-weight: 500; line-height: 1.7; margin: 21px 0 10px; }
#requirements .req-hint + .req-subheading { margin-top: 0; }
#requirements .req-fields,
#requirements .req-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 18px; min-width: 0; }
#requirements .req-section > .req-fields + .req-field,
#requirements .req-section > .req-pill-options + .req-fields,
#requirements .req-model-options fieldset > .req-fields + .req-field { margin-top: 18px; }
#requirements .req-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}
#requirements .req-field em { color: var(--blue); font-size: 11px; font-style: normal; font-weight: 500; }
#requirements .req-field > small { color: var(--req-muted); font-size: 11px; line-height: 1.7; }
#requirements .req-field:has(textarea),
#requirements .req-field.req-wide { grid-column: 1 / -1; }
#requirements .req-field input,
#requirements .req-field textarea,
#requirements .req-field select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--req-edge);
  border-radius: 10px;
  background: var(--req-surface);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  box-shadow: inset 0 1px 2px #1a3f6803;
  transition: border-color .18s, box-shadow .18s;
}
#requirements .req-field select { padding-right: 30px; cursor: pointer; }
#requirements .req-field textarea { min-height: 104px; resize: vertical; }
#requirements .req-field input::placeholder,
#requirements .req-field textarea::placeholder { color: var(--req-muted); opacity: .84; }
#requirements .req-field input:hover,
#requirements .req-field textarea:hover,
#requirements .req-field select:hover { border-color: #adc9e9; }
#requirements .req-field input:focus,
#requirements .req-field textarea:focus,
#requirements .req-field select:focus { border-color: var(--req-selected-edge); box-shadow: 0 0 0 3px #187be90c; }
#requirements .req-field input:disabled,
#requirements .req-field textarea:disabled,
#requirements .req-field select:disabled { cursor: default; opacity: .6; }
#requirements .req-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; min-width: 0; }
#requirements .req-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 78px;
  padding: 15px 14px;
  border: 1px solid var(--req-edge);
  border-radius: 12px;
  background: var(--req-surface);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
#requirements .req-choice input {
  appearance: auto;
  accent-color: #2c83e5;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  padding: 0;
  cursor: pointer;
}
#requirements .req-choice-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#requirements .req-choice strong { color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.6; }
#requirements .req-choice small { color: var(--req-muted); font-size: 11px; line-height: 1.7; }
#requirements .req-choice:has(input:checked) { border-color: var(--req-selected-edge); background: var(--req-selected); box-shadow: inset 0 1px 0 #ffffff85, 0 2px 7px #2369b907; }
#requirements .req-choice:has(input:checked) strong { color: var(--req-ink); }
#requirements .req-choice:focus-within { outline: 2px solid #8fbcf1; outline-offset: 2px; }
#requirements .req-pill-options { display: flex; flex-wrap: wrap; gap: 9px; min-width: 0; }
#requirements .req-pill { display: inline-flex; align-items: center; position: relative; min-height: 44px; cursor: pointer; }
#requirements .req-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
#requirements .req-pill > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--req-edge);
  border-radius: 10px;
  background: var(--req-surface);
  color: var(--req-muted);
  font-size: 12px;
  line-height: 1.7;
  transition: border-color .18s, color .18s, background .18s;
}
#requirements .req-pill input:checked + span { border-color: var(--req-selected-edge); background: var(--req-selected); color: var(--req-ink); box-shadow: inset 0 1px 0 #ffffff66; }
#requirements .req-pill:focus-within { outline: 2px solid #8fbcf1; outline-offset: 3px; border-radius: 10px; }
#requirements .req-model-options { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--req-edge); min-width: 0; }
#requirements .req-model-options > fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#requirements .req-model-options > fieldset > legend { padding: 0; margin-bottom: 17px; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.7; }
#requirements .req-model-options .req-inline-fields { margin-top: 16px; }
#requirements .req-model-status { display: inline-flex; vertical-align: middle; align-items: center; min-height: 25px; padding: 3px 9px; margin: 12px 0 0; border: 1px solid #c8def7; border-radius: 999px; color: #3879c3; background: #edf5ff; font-size: 10px; font-weight: 500; letter-spacing: .1px; }
#requirements .req-summary {
  position: sticky;
  top: 112px;
  min-width: 0;
  max-height: calc(100dvh - 138px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 27px 24px 23px;
  border: 1px solid #c9def4;
  border-radius: 19px;
  background: linear-gradient(155deg, #f9fcff, #f0f6ff);
  box-shadow: 0 9px 30px #244c7b0c, inset 0 1px 0 #fff;
}
#requirements .req-summary .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
#requirements .req-summary h3 { color: var(--text); font-size: 21px; line-height: 1.4; margin: 10px 0; letter-spacing: -.5px; }
#requirements .req-summary-note { color: var(--req-muted); font-size: 11px; line-height: 1.8; }
#requirements .req-summary-list { margin: 22px 0 18px; }
#requirements .req-summary-list > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid #dce8f5; font-size: 11px; line-height: 1.75; }
#requirements .req-summary-list dt { color: var(--req-muted); }
#requirements .req-summary-list dd { color: var(--req-ink); text-align: right; margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
#requirements .req-summary-tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 15px 0 18px; }
#requirements .req-summary-tags li { max-width: 100%; padding: 4px 8px; border: 1px solid #d5e5f8; border-radius: 7px; background: #fff; color: #547ca9; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
#requirements .req-summary-model { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 13px; margin: 17px 0 20px; border: 1px solid #c5dcf6; border-radius: 10px; background: #eaf3ff; color: #376caa; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
#requirements .req-summary-model > strong { font-weight: 600; }
#requirements .req-summary-model > p { grid-column: 1 / -1; margin: 5px 0 0; }
#requirements .req-summary .button { width: 100%; min-height: 46px; margin-top: 1px; justify-content: space-between; gap: 12px; padding: 10px 17px; font-size: 12px; }
#requirements .req-summary .form-status { min-height: 0; font-size: 11px; margin-top: 12px; line-height: 1.8; overflow-wrap: anywhere; }
#requirements .req-summary .form-status:empty { margin-top: 0; }
#requirements .req-local-note { display: block; margin-top: 13px; color: var(--req-muted); font-size: 10px; line-height: 1.8; }
#requirements .req-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
#requirements .req-reset { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 0; border: 0; background: none; color: #6585aa; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #bed3eb; }
#requirements .req-reset:hover { color: var(--blue); }
@media (hover: hover) {
  #requirements .req-choice:hover { border-color: #a7c8ec; }
  #requirements .req-pill:hover > span { border-color: #a7c8ec; color: var(--req-ink); }
}
html[data-theme=dark] #requirements {
  --req-surface: #15283e;
  --req-soft: #122238;
  --req-edge: #304860;
  --req-selected: #1d3b5b;
  --req-selected-edge: #5e90c2;
  --req-ink: #b9d8f7;
  --req-muted: #9ab0c9;
}
html[data-theme=dark] #requirements .req-section { box-shadow: 0 6px 22px #020b180d, inset 0 1px 0 #ffffff06; }
html[data-theme=dark] #requirements .req-step { color: #9dcaff; border-color: #3c6289; background: linear-gradient(145deg, #244768, #1b3553); box-shadow: inset 0 1px 0 #ffffff0d; }
html[data-theme=dark] #requirements .req-choice:has(input:checked) { box-shadow: inset 0 1px 0 #ffffff08; }
html[data-theme=dark] #requirements .req-pill input:checked + span { box-shadow: inset 0 1px 0 #ffffff08; }
html[data-theme=dark] #requirements .req-model-status { color: #a6cefa; border-color: #40648a; background: #203d5d; }
html[data-theme=dark] #requirements .req-summary { border-color: #3b5979; background: linear-gradient(155deg, #1b3550, #152a43); box-shadow: 0 9px 30px #020a1820, inset 0 1px 0 #ffffff08; }
html[data-theme=dark] #requirements .req-summary-list > div { border-color: #334e6a; }
html[data-theme=dark] #requirements .req-summary-tags li { color: #a9c9ec; background: #203d59; border-color: #375775; }
html[data-theme=dark] #requirements .req-summary-model { color: #abcff6; background: #203f60; border-color: #3b638b; }
html[data-theme=dark] #requirements .req-reset { color: #9ebcde; text-decoration-color: #4a6b91; }
@media (max-width: 1100px) {
  #requirements .requirements-builder { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
  #requirements .req-section { padding: 23px 22px 25px; }
  #requirements .req-choice { gap: 9px; padding: 13px 11px; }
  #requirements .req-summary { padding: 24px 20px 20px; }
}
@media (max-width: 900px) {
  #requirements .requirements-builder { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #requirements .req-summary { position: static; max-height: none; overflow: visible; }
  #requirements .req-summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  #requirements .req-summary .button { width: auto; min-width: 200px; }
}
@media (max-width: 600px) {
  #requirements .section-heading { margin-bottom: 26px; }
  #requirements .req-sections { gap: 20px; }
  #requirements .req-section { padding: 19px 19px 22px; border-radius: 16px; }
  #requirements .req-section > legend { font-size: 15px; padding-inline: 6px; margin-left: -6px; line-height: 1.9; }
  #requirements .req-step { width: 26px; height: 26px; margin-right: 7px; border-radius: 8px; font-size: 10px; }
  #requirements .req-hint { font-size: 12px; margin-bottom: 17px; }
  #requirements .req-fields,
  #requirements .req-inline-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #requirements .req-choices { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #requirements .req-choice { min-height: 76px; padding: 14px; gap: 12px; border-radius: 11px; }
  #requirements .req-choice strong { font-size: 13px; }
  #requirements .req-choice small { font-size: 12px; }
  #requirements .req-choice input { width: 18px; height: 18px; margin-top: 2px; }
  #requirements .req-field { font-size: 12px; }
  #requirements .req-field input,
  #requirements .req-field textarea,
  #requirements .req-field select { font-size: 14px; min-height: 46px; padding: 11px 12px; }
  #requirements .req-pill-options { gap: 8px; }
  #requirements .req-pill > span { padding: 9px 12px; font-size: 12px; }
  #requirements .req-model-status { font-size: 10px; min-height: 23px; padding: 2px 7px; }
  #requirements .req-summary { padding: 24px 21px; border-radius: 16px; }
  #requirements .req-summary h3 { font-size: 22px; }
  #requirements .req-summary-note { font-size: 12px; }
  #requirements .req-summary-list { display: block; }
  #requirements .req-summary-list > div { font-size: 12px; padding-block: 11px; grid-template-columns: 82px minmax(0, 1fr); }
  #requirements .req-summary-tags li { padding: 5px 9px; font-size: 11px; }
  #requirements .req-summary-model { font-size: 12px; }
  #requirements .req-summary .button { width: 100%; min-height: 48px; font-size: 13px; }
  #requirements .req-local-note { font-size: 11px; }
  #requirements .req-reset { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #requirements .req-field input,
  #requirements .req-field textarea,
  #requirements .req-field select,
  #requirements .req-choice,
  #requirements .req-pill > span { transition: none; }
}