/* Only configurator-specific layout lives here. Shared values come from global.css. */
:root {
  --cfg-header-height: 88px;
  --cfg-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  --cfg-preview-min-height: 730px;
  --cfg-snippet-height: 340px;
  --cfg-editor-min-height: 120px;
  --cfg-preview-window-width: 450px;
  --cfg-preview-window-height: 640px;
}
.cfg-header, .cfg-footer { background: var(--bm-color-paper); }
.cfg-header { border-bottom: var(--bm-border); }
.cfg-header__inner, .cfg-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-space-5); min-height: var(--cfg-header-height); }
.cfg-brand { font-family: var(--bm-font-heading); font-size: var(--bm-text-card-title); text-decoration: none; flex-shrink: 0; }
.cfg-nav { display: flex; flex-wrap: wrap; gap: var(--bm-space-5); }
.cfg-nav a { font-size: var(--bm-text-button-compact); font-weight: var(--bm-weight-semibold); text-transform: uppercase; text-decoration: none; }
.cfg-nav a:hover { text-decoration: underline; text-decoration-thickness: var(--bm-border-width-thin); text-underline-offset: var(--bm-space-1); }
.cfg-intro { padding: var(--bm-space-7) 0 var(--bm-space-6); }
.cfg-intro h1 { margin: var(--bm-space-4) 0; }
.cfg-studio { display: grid; grid-template-columns: var(--cfg-columns); border: var(--bm-border); }
#configuration-minimal, #configuration-classic { padding: var(--bm-space-5); border-right: var(--bm-border); min-width: 0; }
.cfg-preview-panel { padding: var(--bm-space-5); position: sticky; top: var(--bm-space-5); align-self: start; min-width: 0; }
.cfg-panel-title { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-space-3); padding: 0 var(--bm-space-5) var(--bm-space-5); border-bottom: var(--bm-border); margin: 0 calc(-1 * var(--bm-space-5)) var(--bm-space-5); }
.cfg-small-button, .cfg-rich-button { border: var(--bm-border-thin); background: var(--bm-color-paper); color: var(--bm-color-ink); padding: var(--bm-space-1) var(--bm-space-3); font: inherit; }
.cfg-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--bm-space-3); margin-bottom: var(--bm-space-4); }
.cfg-field label { font-size: var(--bm-text-card-body); }
.cfg-field input, .cfg-field select, .cfg-field textarea { width: 100%; min-width: 0; padding: var(--bm-space-3); background: var(--bm-color-paper); color: var(--bm-color-ink); border: var(--bm-border-thin); border-radius: 0; font-size: var(--bm-text-card-body); }
.cfg-field input[type="color"] { height: var(--bm-grid-paper-size); padding: var(--bm-space-1); }
.cfg-field--rich { grid-template-columns: minmax(0, 1fr); }
.cfg-field textarea { min-height: var(--cfg-editor-min-height); resize: vertical; }
.cfg-group { font-family: var(--bm-font-mono); font-size: var(--bm-text-button-compact); font-weight: var(--bm-weight-semibold); text-transform: uppercase; border-top: var(--bm-border); padding: var(--bm-space-5) var(--bm-space-5) 0; margin: var(--bm-space-6) calc(-1 * var(--bm-space-5)) var(--bm-space-5); }
.cfg-note { font-size: var(--bm-text-button-compact); margin-block: var(--bm-space-4); line-height: var(--bm-line-body); }
.cfg-rich { border: var(--bm-border-thin); }
.cfg-rich-toolbar { display: flex; flex-wrap: wrap; gap: var(--bm-space-2); padding: var(--bm-space-2); border-bottom: var(--bm-border-thin); }
.cfg-rich-button { font-family: var(--bm-font-mono); font-size: var(--bm-text-button-compact); }
.cfg-rich-editor { min-height: var(--cfg-editor-min-height); padding: var(--bm-space-3); overflow-wrap: anywhere; font-size: var(--bm-text-card-body); line-height: var(--bm-line-body); }
.cfg-rich-editor:focus-visible { outline: var(--bm-focus-outline); outline-offset: var(--bm-focus-offset); }
.cfg-field-errors { grid-column: 1 / -1; font-size: var(--bm-text-button-compact); }
.cfg-field-errors:empty { display: none; }
.cfg-errors { border: var(--bm-border-thin); padding: var(--bm-space-4); margin-block: var(--bm-space-4); }
.cfg-field [aria-invalid="true"] { border-style: dashed; }
.cfg-preview-host { min-height: var(--cfg-preview-min-height); position: relative; }
.cfg-output { border-top: var(--bm-border); padding: var(--bm-space-6) 0 var(--bm-space-7); margin-top: var(--bm-space-6); }
.cfg-output h2 { font-size: var(--bm-text-card-title); margin-bottom: var(--bm-space-4); }
#snippet { display: block; width: 100%; height: var(--cfg-snippet-height); padding: var(--bm-space-4); margin: var(--bm-space-5) 0; background: var(--bm-color-paper); color: var(--bm-color-ink); border: var(--bm-border); font-family: var(--bm-font-mono); font-size: var(--bm-text-button-compact); line-height: var(--bm-line-label); resize: vertical; }
.cfg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bm-space-5); margin-top: var(--bm-space-5); }
.cfg-footer { border-top: var(--bm-border); }
.cfg-skip:focus { position: fixed; width: auto; height: auto; clip-path: none; top: var(--bm-space-3); left: var(--bm-space-3); padding: var(--bm-space-3); background: var(--bm-color-paper); z-index: 100; }
/* Media-query literals match the landing page; custom properties cannot be used here. */
@media (max-width: 68rem) { .cfg-header__inner { flex-wrap: wrap; padding-block: var(--bm-space-5); } }
@media (max-width: 52rem) {
  .cfg-studio { grid-template-columns: minmax(0, 1fr); }
  #configuration-minimal, #configuration-classic { border-right: 0; border-bottom: var(--bm-border); }
  .cfg-preview-panel { position: static; }
  .cfg-field { grid-template-columns: minmax(0, 1fr); }
  .cfg-nav { width: 100%; order: 3; }
  .cfg-footer__inner { flex-wrap: wrap; padding-block: var(--bm-space-5); }
}