:root{--builder-line:#4a3c50;--builder-panel:#18131c;--builder-panel-2:#211923;--builder-accent:#c33f4f;--builder-gold:#d8b56c;--builder-good:#74c69d;--builder-warn:#efc46b;--builder-bad:#f28482}
.builder-shell{max-width:1500px;margin:0 auto;padding:1.25rem clamp(.75rem,2vw,2rem) 4rem}.builder-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:1rem}.builder-heading h1{margin:.1rem 0}.builder-heading p{max-width:850px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--builder-gold);font-weight:800}.heading-actions{display:flex;gap:.6rem;flex-wrap:wrap}.button-link{display:inline-flex;align-items:center;text-decoration:none}.builder-layout{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:1.2rem}.builder-progress{position:sticky;top:1rem;align-self:start;background:var(--builder-panel);border:1px solid var(--builder-line);border-radius:16px;padding:.85rem}.builder-progress ol{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}.builder-progress button{width:100%;display:flex;align-items:center;gap:.65rem;text-align:left;background:transparent;border:1px solid transparent;color:inherit;padding:.55rem .65rem;border-radius:10px}.builder-progress button span{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--builder-line);font-size:.78rem}.builder-progress button.active{background:#2a1d28;border-color:#7a5364}.builder-progress button.complete span{background:#355f4a;border-color:#5e9f7e}.builder-progress button.has-error span{background:#6f3038;border-color:#b95f68}.progress-summary{border-top:1px solid var(--builder-line);margin-top:.75rem;padding-top:.75rem;font-size:.86rem}.builder-workspace{min-width:0}.builder-step{background:var(--builder-panel);border:1px solid var(--builder-line);border-radius:18px;padding:clamp(1rem,2.2vw,1.8rem);min-height:560px}.step-heading{display:flex;gap:.8rem;align-items:flex-start;border-bottom:1px solid var(--builder-line);padding-bottom:1rem;margin-bottom:1rem}.step-heading>span{display:grid;place-items:center;min-width:2.3rem;height:2.3rem;border-radius:50%;background:var(--builder-accent);font-weight:900}.step-heading h2{margin:0}.step-heading p{margin:.2rem 0 0;color:#c7bdc9}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}.choice-card,.check-card{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--builder-line);background:var(--builder-panel-2);padding:.9rem;border-radius:13px;cursor:pointer}.choice-card:has(input:checked),.check-card:has(input:checked){border-color:var(--builder-gold);box-shadow:0 0 0 2px rgba(216,181,108,.15)}.choice-card input,.check-card input{margin-top:.25rem}.choice-card small,.check-card small,.info-card small{display:block;color:#b9adb9;margin-top:.2rem}.form-grid{display:grid;gap:.8rem;margin:1rem 0}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.form-grid label,.builder-step>label{display:grid;gap:.35rem;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea,.builder-step>label textarea,.filter-row input,.filter-row select,.class-row select,.class-row input,.equipment-option select,.advancement-card select{width:100%}.info-grid{display:grid;gap:.8rem;margin:1rem 0}.info-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.info-card,.calculation-panel{background:var(--builder-panel-2);border:1px solid var(--builder-line);border-radius:13px;padding:.9rem}.info-card h3{margin-top:0}.pill-list{display:flex;gap:.35rem;flex-wrap:wrap}.pill.good{border-color:#4f9170;color:#9de3bd}.pill.warn{border-color:#9c7730;color:#f3d594}.pill.bad{border-color:#a64d59;color:#ffabb2}.class-plan{display:grid;gap:.8rem}.class-row{display:grid;grid-template-columns:minmax(190px,1.2fr) 105px minmax(180px,1fr) auto;gap:.7rem;align-items:end;background:var(--builder-panel-2);border:1px solid var(--builder-line);padding:.85rem;border-radius:13px}.class-row label{display:grid;gap:.3rem;font-size:.85rem}.class-row .remove-class{margin-bottom:1px}.row-actions{display:flex;justify-content:space-between;align-items:center;gap:.7rem;margin:1rem 0}.calculation-panel{line-height:1.55}.calculation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}.calculation-grid>div{background:#151018;border:1px solid #3d3242;border-radius:10px;padding:.65rem}.calculation-grid b{display:block;font-size:1.15rem}.method-row,.tab-row,.filter-row{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin:.8rem 0}.method-row label{border:1px solid var(--builder-line);border-radius:999px;padding:.5rem .75rem}.ability-grid{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:.7rem}.ability-card{text-align:center;background:var(--builder-panel-2);border:1px solid var(--builder-line);border-radius:14px;padding:.75rem}.ability-card label{display:grid;gap:.35rem}.ability-card input{text-align:center;font-size:1.35rem;font-weight:900}.ability-card output{font-size:1.1rem;color:var(--builder-gold)}.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.4rem}.skill-grid label{display:flex;align-items:center;gap:.45rem;background:#171219;border:1px solid #3d3242;border-radius:9px;padding:.5rem}.equipment-groups{display:grid;gap:.9rem}.equipment-group{background:var(--builder-panel-2);border:1px solid var(--builder-line);border-radius:14px;padding:.9rem}.equipment-group h3{margin-top:0}.equipment-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:start;border-top:1px solid #3c303e;padding:.65rem 0}.equipment-option:first-of-type{border-top:0}.selector-slots{grid-column:2;display:grid;gap:.45rem;margin-top:.4rem}.inventory-table{width:100%;border-collapse:collapse}.inventory-table th,.inventory-table td{padding:.45rem;border-bottom:1px solid #3b303e;text-align:left}.tab-row button.active{background:var(--builder-accent);border-color:var(--builder-accent)}.filter-row input{flex:1 1 280px}.filter-row select{max-width:180px}.record-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.65rem;max-height:650px;overflow:auto;padding-right:.25rem}.record-card{display:grid;grid-template-columns:auto 1fr;gap:.65rem;background:var(--builder-panel-2);border:1px solid var(--builder-line);border-radius:12px;padding:.75rem}.record-card:has(input:checked){border-color:var(--builder-gold)}.record-card h3{font-size:1rem;margin:0}.record-card p{font-size:.85rem;margin:.3rem 0;color:#c7bdc9}.record-meta{display:flex;gap:.35rem;flex-wrap:wrap;font-size:.75rem}.advancement-list{display:grid;gap:.7rem}.advancement-card{background:var(--builder-panel-2);border:1px solid var(--builder-line);border-radius:12px;padding:.8rem}.advancement-card h3{margin:0 0 .4rem}.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:1rem}.review-card{background:var(--builder-panel-2);border:1px solid var(--builder-line);border-radius:13px;padding:.9rem}.review-card h3{margin-top:0}.validation-list{display:grid;gap:.4rem;margin:0 0 1rem;padding:0;list-style:none}.validation-list li{border-radius:9px;padding:.6rem .75rem}.validation-list .error{background:#4a2027;border:1px solid #8f3e49}.validation-list .warning{background:#493a1f;border:1px solid #876b32}.validation-list .good{background:#203c30;border:1px solid #3e795c}.builder-controls{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.8rem;background:rgba(23,17,29,.95);border:1px solid var(--builder-line);border-radius:14px;padding:.7rem;backdrop-filter:blur(8px)}.builder-controls #stepCounter{flex:1;text-align:center;color:#c9bec9}.message:empty{display:none}.message.good{border-color:#438260;color:#9ee1bd}.message.error{border-color:#a74c58;color:#ffb0b9}.legacy-note{font-size:.82rem;color:#baafba}.source-badge{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--builder-gold)}
@media(max-width:1050px){.builder-layout{grid-template-columns:1fr}.builder-progress{position:static}.builder-progress ol{display:flex;overflow:auto}.builder-progress li{min-width:max-content}.progress-summary{display:none}.form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.ability-grid{grid-template-columns:repeat(3,minmax(100px,1fr))}}
@media(max-width:720px){.builder-heading{display:block}.heading-actions{margin-top:.8rem}.builder-progress{padding:.5rem}.builder-progress button{font-size:0;padding:.4rem}.builder-progress button span{font-size:.75rem}.builder-step{padding:.85rem;min-height:0}.form-grid.two,.form-grid.three,.form-grid.four,.info-grid.two,.review-grid{grid-template-columns:1fr}.class-row{grid-template-columns:1fr 90px}.class-row .subclass-field{grid-column:1/-1}.class-row .remove-class{position:absolute;right:1.4rem}.ability-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}.record-list{grid-template-columns:1fr;max-height:none}.builder-controls{bottom:calc(.25rem + env(safe-area-inset-bottom))}.builder-controls button{min-width:88px}.inventory-table th:nth-child(3),.inventory-table td:nth-child(3),.inventory-table th:nth-child(4),.inventory-table td:nth-child(4){display:none}}

.feat-choice{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,1fr);gap:.7rem;margin-top:.7rem}.feat-preview{background:#151018;border:1px solid #4b3b4d;border-radius:10px;padding:.7rem}.feat-preview h4{margin:.2rem 0}.feat-preview p{margin:.35rem 0;color:#c7bdc9}.feat-preview small{display:block}.advancement-card label{display:grid;gap:.35rem;margin-top:.55rem}@media(max-width:720px){.feat-choice{grid-template-columns:1fr}}

.feat-selection-panel { margin-top: 1rem; }
.feat-slot-list { display: grid; gap: .85rem; }
.feat-slot-card { border: 1px solid var(--line, #493c50); border-radius: 14px; padding: 1rem; background: rgba(10, 8, 13, .3); }
.feat-slot-card h4 { margin: .4rem 0 .75rem; }
.feat-slot-card label { display: grid; gap: .35rem; }

/* B.2.M.16.4 mobile character-builder repair */
body[data-page="canonical-builder"] { overflow-x: hidden; overflow-x: clip; }
body[data-page="canonical-builder"] .shell-header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: .65rem clamp(.75rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
}
body[data-page="canonical-builder"] .shell-header-inner > *,
body[data-page="canonical-builder"] .builder-layout > *,
body[data-page="canonical-builder"] .builder-step > *,
body[data-page="canonical-builder"] .class-row > *,
body[data-page="canonical-builder"] .record-card > * { min-width: 0; }
body[data-page="canonical-builder"] .shell-header-inner .nav { justify-content: center; }
body[data-page="canonical-builder"] .brand img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
}
body[data-page="canonical-builder"] .brand span { display: grid; line-height: 1.15; }
body[data-page="canonical-builder"] .brand small { color: var(--muted); }
body[data-page="canonical-builder"] .builder-step { scroll-margin-top: 5.5rem; }
body[data-page="canonical-builder"] .info-card,
body[data-page="canonical-builder"] .calculation-panel,
body[data-page="canonical-builder"] .review-card,
body[data-page="canonical-builder"] .record-card,
body[data-page="canonical-builder"] .equipment-option,
body[data-page="canonical-builder"] .validation-list li { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  body[data-page="canonical-builder"] .shell-header-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    padding: .45rem .6rem;
  }
  body[data-page="canonical-builder"] .shell-header-inner .brand-row,
  body[data-page="canonical-builder"] .shell-header-inner .nav { grid-column: 1; width: 100%; }
  body[data-page="canonical-builder"] .shell-header-inner .status { display: none; }
  body[data-page="canonical-builder"] .brand { min-width: 0; }
  body[data-page="canonical-builder"] .brand img { width: 36px; height: 36px; flex-basis: 36px; }
  body[data-page="canonical-builder"] .brand b { font-size: .92rem; }
  body[data-page="canonical-builder"] .brand small { font-size: .68rem; }

  .builder-shell {
    width: 100%;
    min-width: 0;
    padding: .7rem .5rem calc(7.5rem + env(safe-area-inset-bottom));
    gap: .7rem;
  }
  .builder-heading { margin-bottom: .7rem; }
  .builder-heading h1 { font-size: clamp(1.65rem, 9vw, 2.15rem); }
  .builder-heading p:not(.eyebrow) { font-size: .88rem; line-height: 1.45; }
  .heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .heading-actions > * { width: 100%; min-width: 0; text-align: center; justify-content: center; }
  .builder-layout { gap: .65rem; }

  .builder-progress { position: static; overflow: hidden; border-radius: 12px; }
  .builder-progress ol {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .builder-progress ol::-webkit-scrollbar { display: none; }
  .builder-progress li { min-width: auto; flex: 0 0 auto; scroll-snap-align: center; }
  .builder-progress button { width: auto; min-width: 44px; min-height: 44px; justify-content: center; gap: .35rem; }
  .builder-progress button.active { min-width: max-content; padding-inline: .55rem; font-size: .78rem; }
  .builder-progress button span { flex: 0 0 1.75rem; }

  .builder-step { padding: .75rem .65rem; border-radius: 13px; overflow: hidden; scroll-margin-top: 4.75rem; }
  .step-heading { gap: .55rem; padding-bottom: .75rem; margin-bottom: .75rem; }
  .step-heading > span { min-width: 2rem; width: 2rem; height: 2rem; }
  .step-heading h2 { font-size: 1.25rem; line-height: 1.2; }
  .step-heading p { font-size: .82rem; line-height: 1.4; }

  body[data-page="canonical-builder"] input:not([type="checkbox"]):not([type="radio"]),
  body[data-page="canonical-builder"] select,
  body[data-page="canonical-builder"] textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  body[data-page="canonical-builder"] select { text-overflow: ellipsis; }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .choice-card, .check-card, .info-card, .calculation-panel, .equipment-group, .advancement-card, .review-card { padding: .75rem; }
  .form-grid, .info-grid { gap: .65rem; margin: .75rem 0; }

  .class-row { position: relative; grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: .7rem; }
  .class-row .subclass-field { grid-column: auto; }
  .class-row .remove-class { position: static; right: auto; width: 100%; margin: 0; }
  .class-row > .pill { justify-self: start; }
  .row-actions { align-items: stretch; flex-direction: column; }
  .row-actions button { width: 100%; }
  .row-actions .pill { align-self: flex-start; }

  .method-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .method-row label { display: flex; align-items: center; min-width: 0; border-radius: 11px; padding: .55rem; }
  .ability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ability-card { padding: .6rem; }
  .skill-grid { grid-template-columns: minmax(0, 1fr); }

  .equipment-option { grid-template-columns: 28px minmax(0, 1fr); }
  .selector-slots { grid-column: 2; }
  .inventory-table { min-width: 100%; }
  .inventory-table th, .inventory-table td { padding: .45rem .3rem; }

  .tab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .tab-row button { width: 100%; min-width: 0; }
  .filter-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .filter-row input { width: 100%; min-width: 0; }
  .filter-row select { width: 100%; max-width: none; }
  .record-list { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; padding-right: 0; }
  .record-card { grid-template-columns: auto minmax(0, 1fr); }
  .record-card h3, .record-card p, .record-meta { overflow-wrap: anywhere; }

  .builder-controls {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: calc(.4rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .4rem;
    margin: 0;
    padding: .5rem;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  }
  .builder-controls button { width: 100%; min-width: 0; padding-inline: .45rem; }
  .builder-controls #stepCounter { min-width: 2.6rem; font-size: 0; white-space: nowrap; }
  .builder-controls #stepCounter::after { content: attr(data-compact); font-size: .82rem; }
}

@media (max-width: 380px) {
  .heading-actions { grid-template-columns: minmax(0, 1fr); }
  .builder-heading p:not(.eyebrow) { font-size: .82rem; }
  .builder-controls { left: .3rem; right: .3rem; }
  .builder-controls button { font-size: .84rem; }
}