/* Build Your Own (Alex 10/23) — js/build-your-own.js. Builds on css/strategy-modes.css (.sm,
   .sm-card, .sm-btn, .sm-sub, .sm-caps, .sm-hint) and layout.css (.profile-label, .profile-input).
   Tokens only (variables.css / tokens.css); no new colors. byo- prefix. */
.byo { max-width: 1120px; margin: 0 auto; }   /* same width as .sm (strategy-modes.css), centered */
.byo-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.byo .byo-head h1 { font-size: 32px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
.byo-ico { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ds-text); }
.byo-ico svg { width: 20px; height: 20px; }
.byo-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.byo-step { border: 1px solid var(--ds-border); border-radius: 10px; padding: 14px; background: var(--ds-surface); min-width: 0; }
.byo-step-n { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ds-label); margin-bottom: 8px; }
.byo-step-n svg { width: 16px; height: 16px; color: var(--ds-text); }
.byo-step h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--ds-text); }
.byo-step p { font-size: 12px; line-height: 1.5; color: var(--ds-muted); margin: 0; }
.byo-scope { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--ds-muted); }
.byo-form { margin-top: 20px; }
.byo-form h2 { margin-bottom: 4px; }
.byo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 24px; }
.byo-grid .byo-wide { grid-column: 1 / -1; }
.byo-f { min-width: 0; margin-bottom: 20px; }
.byo-f .profile-label { font-size: 14px; margin-bottom: 8px; }
/* inputs and selects share ONE box: height, border, radius, font, padding */
.byo-f .profile-input { margin-bottom: 4px; height: 56px; min-height: 56px; padding: 0 16px; font-size: 16px; line-height: 1.2; box-sizing: border-box; }
.byo-f select.profile-input { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; }
.byo-f textarea.profile-input { height: auto; min-height: 240px; padding: 16px; resize: vertical; line-height: 1.5; }
.byo-f .profile-input[aria-invalid="true"] { border-color: var(--ds-danger); }
.byo-err { font-size: 12px; color: var(--ds-danger); min-height: 0; }
.byo-err:empty { display: none; }
.byo-count { float: right; font-size: 12px; color: var(--ds-label); font-family: var(--ds-font-num); }
.byo-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.byo-actions .sm-btn.primary { min-height: 56px; padding: 0 40px; font-size: 16px; font-weight: 600; }
.byo-msg { font-size: 13px; color: var(--ds-danger); }
.byo-msg:empty { display: none; }
.byo-done { display: flex; gap: 12px; align-items: flex-start; }
.byo-done svg { width: 20px; height: 20px; color: var(--ds-status-on); flex-shrink: 0; margin-top: 2px; }
.byo-mine { margin-top: 20px; }
.byo-mine table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.byo-mine th { text-align: left; font-weight: 500; color: var(--ds-label); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--ds-border); }
.byo-mine td { padding: 8px; border-bottom: 1px solid var(--ds-border); color: var(--ds-text); overflow-wrap: anywhere; }
.byo-pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: var(--ds-r-pill); border: 1px solid var(--ds-border-strong); color: var(--ds-text); white-space: nowrap; }
@media (max-width: 900px) { .byo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .byo .byo-head h1 { font-size: 24px; }
  .byo-ico { display: none; }
  .byo-steps, .byo-grid { grid-template-columns: minmax(0, 1fr); }
  .byo-actions .sm-btn { width: 100%; }
}