/* builder.css (B4b2): the builder at #/new (public/js/views/builder.js,
 * .bd-*). The nine steps, the step's body and a live preview beside it
 * (under it below 900 px). A level page reuses the level-up dialog's
 * .lu-* markup and rules (levelup.css). Kit's Clean tokens only; every
 * control is a 44 px target; every transition names a --duration and an
 * --ease token. */

.cs-builder { min-width: 0; }
.bd-builder { display: grid; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 16px; box-sizing: border-box; min-width: 0; }
.bd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bd-title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-xl); font-weight: 700; overflow-wrap: anywhere; }

/* ---- the steps ---- */
.bd-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-step {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.bd-step[aria-current="step"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; }
/* What a step has left (UX-sheets-6): a tick when done, else a count. */
.bd-step-left { font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-step[data-left="0"] .bd-step-left { color: var(--success-soft-text); }
.bd-step:not([data-left="0"]) .bd-step-left {
  min-width: 1.5em; padding: 0 6px; border-radius: var(--radius-full); text-align: center;
  background: var(--warning-soft); color: var(--warning-soft-text);
}
.bd-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--surface-alt); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}

/* ---- body and preview ---- */
.bd-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 12px; align-items: start; min-width: 0; }
.bd-body { display: grid; gap: 12px; min-width: 0; align-content: start; }
.bd-body:focus { outline: none; }
.bd-preview {
  position: sticky; top: 12px; display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.bd-card { display: grid; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bd-h { margin: 0; font-size: var(--text-lg); font-weight: 600; overflow-wrap: anywhere; }
.bd-h3 { margin: 0; font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.bd-note { margin: 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.bd-note.is-warn { color: var(--danger-soft-text); }
.bd-note.is-ok { color: var(--success-soft-text); }
.bd-meta { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; }
.bd-label { font-size: var(--text-sm); font-weight: 600; }
.bd-dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--text-sm); }
.bd-dl dt { font-weight: 600; overflow-wrap: anywhere; }
.bd-dl dd { margin: 0; overflow-wrap: anywhere; }
/* The species' and background's text (FB-A): open under "Description",
 * in a box of its own height with its own scroll (at its end a scroll goes
 * on to the page: FB-F2, R-9); the chevron collapses it. */
.bd-text { min-width: 0; border-top: 1px solid var(--border); padding-top: 4px; }
.bd-h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.bd-text .bd-desc { max-height: min(45dvh, 360px); margin-top: 2px; padding-right: 4px; overflow-y: auto; }
.bd-text .bd-desc > :first-child { margin-top: 0; }

/* ---- controls ---- */
.bd-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-btn, .bd-seg-btn, .bd-class, .bd-page, .bd-link {
  min-height: 44px; min-width: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.bd-btn.is-primary { border-color: transparent; background: var(--accent); color: var(--accent-text); }
.bd-seg-btn[aria-pressed="true"], .bd-class[aria-checked="true"], .bd-page[aria-selected="true"], .bd-equip[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600;
}
.bd-btn:disabled, .bd-seg-btn:disabled { cursor: default; opacity: 0.5; }
.bd-link { width: 100%; text-align: left; overflow-wrap: anywhere; }
@media (hover: hover) {
  .bd-step:not([aria-current]):hover, .bd-btn:not(:disabled):not(.is-primary):hover, .bd-seg-btn:not(:disabled):hover,
  .bd-class:not([aria-checked="true"]):hover, .bd-page:not([aria-selected="true"]):hover, .bd-link:hover { background: var(--surface-alt); }
}
.bd-step:focus-visible, .bd-btn:focus-visible, .bd-seg-btn:focus-visible, .bd-class:focus-visible, .bd-page:focus-visible,
.bd-link:focus-visible, .bd-input:focus-visible { outline: none; box-shadow: var(--ring); }
.bd-input {
  min-height: 44px; min-width: 0; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit;
}
.bd-num { width: 5.5em; font-variant-numeric: tabular-nums; }
.bd-area { width: 100%; min-height: 88px; resize: vertical; }
.bd-field { display: grid; gap: 4px; min-width: 0; }
.bd-field > .bd-input:not(.bd-num) { width: 100%; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; }

/* ---- class and level pages ---- */
.bd-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.bd-class { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0; }
.bd-class-name { font-weight: 600; overflow-wrap: anywhere; }
.bd-level { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bd-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-page.is-open { border-style: dashed; }
.bd-levelpage { display: grid; gap: 10px; min-width: 0; }
.bd-hp, .bd-features { display: grid; gap: 8px; min-width: 0; }

/* ---- abilities ---- */
.bd-points { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-rolls { margin: 0; padding-left: 1.4em; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bd-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bd-table th, .bd-table td { padding: 4px 6px; text-align: left; overflow-wrap: anywhere; }
.bd-table tbody tr + tr { border-top: 1px solid var(--border); }
.bd-total, .bd-mod, .bd-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.bd-scores td { vertical-align: middle; }
.bd-pb { display: inline-flex; align-items: center; gap: 6px; }
.bd-score { display: inline-block; min-width: 2ch; text-align: center; }
.bd-bonus-row { display: grid; gap: 4px; }

/* ---- equipment ---- */
.bd-items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bd-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.bd-item-name { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.bd-qty { width: 4.5em; }
/* The rename control (FB-B's item-name.js): a 44 px target; its field on its own line. */
.bd-item .eq-rename { min-width: 44px; min-height: 44px; }
.bd-item .eq-label { order: 10; flex: 1 1 100%; margin-top: 0; }

/* ---- spells (FB-D): each level's picks under "Level N", the class step's link ---- */
.bd-spell-level { display: grid; gap: 8px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.bd-spells-here .bd-link { width: auto; margin-left: 4px; }
.bd-coin .bd-num { width: 6em; }
.bd-coins { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- preview ---- */
.bd-abs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bd-ab { display: grid; justify-items: center; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bd-ab-name { font-size: var(--text-xs); font-weight: 600; }
.bd-ab-score { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- review, foot ---- */
.bd-missing-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bd-message { margin: 0; min-height: 1.2em; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
/* F-BRb: a refusal shown beside the control refused (R-B4b2-12); the live
 * line under the step then only speaks it. */
.bd-message.is-inline { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bd-inline-msg { scroll-margin: 12px; margin: 4px 0 0; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-soft-text); font-size: var(--text-sm); overflow-wrap: anywhere; }
.bd-inline-row td { padding-top: 0; }
.bd-msg-link { color: var(--accent); font-weight: 600; }
.bd-stale { border-color: var(--accent); }
.bd-stale .bd-btn { justify-self: start; }
.bd-preview[hidden], .bd-head .bd-btn[hidden] { display: none; }
/* The learn list of a schools caster (R-B4b2-7): the free-pick spells marked. */
.bd-outside { font-size: var(--text-xs); color: var(--warning-soft-text); }
.lu-opt-row.is-outside .lu-meta { color: var(--text-muted); }
.bd-schools { font-weight: 600; }
.bd-body { scroll-margin-top: 12px; }
.bd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The preview's fold (UX-sheets-7): open, and not a control, from 900 px. */
.bd-preview-fold { display: grid; gap: 8px; min-width: 0; }
.bd-preview-fold[open] > :not(summary) { min-width: 0; }
.bd-preview-sum { gap: 4px 10px; }
.bd-spacer { flex: 1; }

@media (min-width: 900px) {
  .bd-preview-sum { min-height: 0; cursor: default; pointer-events: none; }
  .bd-preview-sum::before { display: none; }
}
@media (max-width: 899px) {
  .bd-main { grid-template-columns: minmax(0, 1fr); }
  .bd-preview { position: static; }
  /* Back and Next pinned to the bottom of the screen, as the level-up
     dialog's footer is (UX-sheets-7); the page keeps room for them. */
  .bd-builder { padding-bottom: 0; scroll-padding-bottom: 76px; }
  .bd-foot {
    position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
}
@media (max-width: 559px) {
  .bd-builder { padding: 12px 16px; }
  .bd-step { padding: 4px 8px; }
  .bd-dl { grid-template-columns: minmax(0, 1fr); }
}