@layer components {
  /* Registered so the builder controller reads it back in px (#1398). */
  @property --builder-panel-extra { inherits: true; initial-value: 0px; syntax: '<length>'; }

  /* Question builder (#1387): palette | canvas | item editor panel */
  .builder {
    --builder-palette-expanded-width: 15rem;
    --builder-palette-collapsed-width: 4.25rem;
    --builder-palette-width: var(--builder-palette-expanded-width);
    --builder-panel-base: 26rem;
    /* The editor's width: the author's dragged base (inline style), plus whatever the collapsed
       palette gave up (#1398), never more than 60% of the builder. */
    --builder-panel-width: min(calc(var(--builder-panel-base) + var(--builder-panel-extra)), 60%);

    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: var(--builder-palette-width) minmax(0, 1fr) var(--builder-panel-width);
    margin-block-start: 1.25rem;

    @media (max-width: 1100px) { grid-template-columns: var(--builder-palette-width) minmax(0, 1fr); }
    @media (max-width: 768px) { grid-template-columns: 1fr; }
  }
  .builder--palette-collapsed {
    --builder-panel-extra: calc(var(--builder-palette-expanded-width) - var(--builder-palette-collapsed-width));
    --builder-palette-width: var(--builder-palette-collapsed-width);
  }
  .builder--locked {
    --builder-panel-extra: 0px;

    grid-template-columns: minmax(0, 1fr) var(--builder-panel-width);
  }

  .builder-palette,
  .builder-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    inset-block-start: 1rem;
    max-block-size: calc(100vh - 2rem);
    overflow-y: auto;
    position: sticky;
  }
  .builder-palette { padding: 0.75rem 0.6rem; }
  .builder-panel {
    padding: 1rem;

    @media (max-width: 1100px) { grid-column: 1 / -1; max-block-size: none; position: static; }
  }

  .builder-palette-header {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-block-end: 0.75rem;
  }
  .builder-palette-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    padding-inline-start: 0.25rem;
  }
  .builder-palette-heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0.25rem;
  }
  .builder-palette-group { margin-block-end: 0.85rem; }
  .builder-palette-group-title {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem 0.25rem;
    text-transform: uppercase;
  }
  .builder-palette-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .builder-palette-entry {
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: grab;
    display: flex;
    font: inherit;
    font-size: 0.85rem;
    gap: 0.55rem;
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: 0.25rem 0.5rem;
    text-align: start;

    &:hover { border-color: var(--color-primary); }
    &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  }
  .builder-palette-icon {
    align-items: center;
    background: var(--color-primary-tint);
    block-size: 1.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    display: flex;
    flex: none;
    font-size: 0.6rem;
    font-weight: 700;
    inline-size: 1.75rem;
    justify-content: center;
  }

  .builder--palette-collapsed {
    .builder-palette-header { justify-content: center; }
    .builder-palette-title,
    .builder-palette-heading,
    .builder-palette-group-title,
    .builder-palette-name { display: none; }
    .builder-palette { padding-inline: 0.4rem; }
    .builder-palette-entry { justify-content: center; padding-inline: 0; }
  }

  .builder-main {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
    position: relative;
  }

  /* Drag (or arrow-key) handle in the gap between canvas and item editor (#1398). */
  .builder-splitter {
    cursor: col-resize;
    inline-size: 0.75rem;
    inset-block: 0;
    inset-inline-end: calc(-1.25rem / 2 - 0.375rem);
    position: absolute;
    touch-action: none;

    &::after {
      background: var(--color-border);
      border-radius: 2px;
      content: '';
      inline-size: 3px;
      inset-block: 0;
      inset-inline-start: calc(50% - 1.5px);
      position: absolute;
    }
    &:hover::after,
    &.builder-splitter--dragging::after { background: var(--color-primary); }
    &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

    @media (max-width: 1100px) { display: none; }
  }

  /* Variant tabs on the canvas column, above the Layout picker (#1418, #1489) */
  .builder-tabs {
    align-items: flex-end;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-end: 0.9rem;
  }
  .builder-variants { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .builder-variant-tab {
    align-items: baseline;
    border: 1px solid transparent;
    border-block-end: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--color-text-secondary);
    display: flex;
    gap: 0.5rem;
    margin-block-end: -1px;
    padding: 0.45rem 0.85rem;
    text-decoration: none;

    &:hover { color: var(--color-text); }
    &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
    &[aria-current='page'] {
      background: var(--color-bg);
      border-color: var(--color-border);
      color: var(--color-text);
      font-weight: 600;
    }
  }
  .builder-variant-marks { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 400; }
  .builder-variant-add > summary {
    border-color: var(--color-border);
    border-style: dashed;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
  }
  .builder-variant-add[open] > summary { display: none; }
  .builder-variant-add-form {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding-block-end: 0.4rem;

    input[type='text'] { inline-size: 14rem; }
  }

  /* The question strip under the header: Section on the left, the type summary on the right (#1489) */
  .builder-strip {
    align-items: center;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block-start: 1rem;
    padding-block: 0.5rem;
  }
  .builder-section { align-items: center; display: flex; gap: 0.5rem; }
  .builder-section label,
  .builder-type-form label { font-size: 0.85rem; font-weight: 600; margin: 0; }
  .builder-section select { inline-size: auto; }

  /* Question type and marks: one muted line, opened in place to a single row (#1483) */
  .builder-type { color: var(--color-text-secondary); font-size: 0.85rem; margin-inline-start: auto; }
  .builder-type summary {
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    strong { color: var(--color-text); }
    .builder-link { margin-inline-start: 0.5rem; }
  }
  .builder-type-form,
  .builder-type-marks { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .builder-type-form { margin-block-start: 0.5rem; }
  .builder-type-form select { inline-size: auto; }
  .builder-type-marks input { inline-size: 5rem; }
  .builder-type-marks[hidden] { display: none; }

  .builder-layouts { display: flow-root; }

  .builder-layouts fieldset {
    align-items: end;
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
  }
  .builder-layouts-legend {
    float: inline-start;
    font-size: 0.85rem;
    font-weight: 600;
    margin-inline-end: 0.25rem;
    padding-block-end: 1.4rem;
  }
  .builder-layout-option {
    align-items: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.3rem;
  }
  .builder-layout-radio {
    block-size: 1px;
    inline-size: 1px;
    opacity: 0;
    position: absolute;
  }
  .builder-layout-thumb {
    background: var(--color-bg);
    block-size: 2.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 0.25rem;
    inline-size: 4rem;
    padding: 0.3rem;

    span { background: var(--color-surface-sunken); border: 1px dashed var(--color-text-muted); border-radius: 2px; }
    span:last-child { background: var(--color-primary-light, var(--color-text-muted)); border-style: solid; opacity: 0.55; }
  }
  .builder-layout-thumb--one_column { grid-template-columns: 1fr; span:first-child { display: none; } }
  .builder-layout-thumb--two_column_1_2 { grid-template-columns: 1fr 2fr; }
  .builder-layout-thumb--two_column_1_1 { grid-template-columns: 1fr 1fr; }
  .builder-layout-thumb--two_column_2_1 { grid-template-columns: 2fr 1fr; }
  .builder-layout-radio:checked + .builder-layout-thumb {
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 0 3px oklch(var(--oklch-accent) / 0.5);
  }
  .builder-layout-radio:checked ~ .builder-layout-name { color: var(--color-text); font-weight: 600; }
  .builder-layout-radio:focus-visible + .builder-layout-thumb { outline: 2px solid var(--color-focus); outline-offset: 2px; }

  .builder-canvas {
    margin: 0;
    max-inline-size: none;
  }
  .builder-one-col {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;

    .page-preview-stem-col { border: none; padding-block-end: 0; }
  }
  .builder-stem-header {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-block-end: 0.5rem;
  }
  .builder-column-label {
    color: var(--color-text-muted);
    flex-grow: 1;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .builder-link { font-size: 0.8rem; font-weight: 600; }

  .builder-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    min-block-size: 4rem;
    padding: 0;
  }
  .builder-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
  }
  .builder-item--editing {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px oklch(var(--oklch-border-focus) / 0.18);
  }
  .builder-item--dragging { opacity: 0.45; }
  .builder-stem--editing { box-shadow: inset 0 0 0 2px var(--color-focus); }
  .builder-stem--drop { box-shadow: inset 0 0 0 3px var(--color-accent); }
  .builder-item-handle,
  .question-row-handle {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: grab;
    font: inherit;
    letter-spacing: -0.15em;
    padding: 0.2rem 0.4rem;

    &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
  }
  .builder-drop-indicator {
    border-block-start: 3px solid var(--color-accent);
    border-radius: 2px;
    list-style: none;
  }
  .builder-drop-hint {
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-block: 0.75rem 0;
    padding: 0.6rem;
    text-align: center;
  }

  .builder-panel-header {
    align-items: center;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-block-end: 1rem;
    padding-block-end: 0.6rem;
  }
  .builder-panel-title { font-size: 1rem; margin: 0; }
  .builder-panel .form-card { max-inline-size: none; }
  .builder-panel .form > fieldset { border: none; margin: 0; padding: 0; }
  .builder-item .item-card-header { flex-wrap: wrap; }
  .builder-panel-empty { margin: 0; }
}