.build-variant-directory{margin:12px 0;padding:12px 16px;border:1px solid #40382b;border-radius:4px;background:#191a1d;color:#d2ccc0;min-width:0}
.build-variant-directory header,.variant-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.build-variant-directory header strong{font-size:14px;color:#d5bb83}.build-variant-directory small{font-size:12px;color:#9a958b}.build-variant-directory header small{margin-left:12px}
.build-variant-directory button{padding:7px 10px;border:1px solid #45413a;border-radius:3px;background:#242528;font-size:13px;cursor:pointer;color:#ccc6bb;text-align:left;overflow-wrap:anywhere}
.build-variant-directory button:hover,.build-variant-directory button:focus-visible{border-color:#b69760;color:#eee0c3}.build-variant-directory button:disabled{opacity:.45;cursor:wait}
.build-variant-directory nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;max-height:220px;overflow:auto}.build-variant-directory nav .is-active{background:#393021;border-color:#b69760;color:#f0d7a3}.build-variant-directory nav span{font-size:12px;color:#858179;align-self:center}
.build-variant-directory .variant-summary{white-space:pre-wrap;font-size:13px;line-height:1.6;margin-top:10px;overflow-wrap:anywhere;max-height:180px;overflow:auto}.variant-manager{margin-top:12px;padding-top:12px;border-top:1px solid #39352e}.variant-actions{justify-content:flex-start;margin-bottom:10px;font-size:12px}
.variant-edit-fields{display:grid;gap:10px;margin-top:10px}.variant-edit-fields label{display:grid;gap:5px;font-size:12px}.variant-edit-fields input,.variant-edit-fields textarea{width:100%;padding:8px;background:#121315;color:#ddd3bf;border:1px solid #494239;border-radius:3px}.variant-manager>small{display:block}.build-variant-directory [role=alert]{color:#e0a599;font-size:13px}
@media(max-width:600px){.build-variant-directory{padding:10px}.build-variant-directory header small{display:none}.build-variant-directory nav{flex-wrap:nowrap;max-height:none;padding-bottom:5px}.build-variant-directory nav button{flex-shrink:0;max-width:230px}.variant-actions button{min-height:36px}}

.build-variant-directory{grid-column:1 / -1;width:100%;}
/* The variant directory adds a row before the build status strip. */
@media (min-width: 1024px) {
  .d4core-clone .planner-shell:not(.is-focused-view):has(> .build-variant-directory) > .d4-armory-panel,
  .d4core-clone .planner-shell:not(.is-focused-view):has(> .build-variant-directory) > .d4-command-panel {
    grid-row: 4;
  }
  .d4core-clone .planner-shell:not(.is-focused-view):has(> .build-variant-directory) > .d4-tooltip-panel {
    grid-row: 5;
  }
}