/* Home sections screen: list, editor, live preview */
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.hs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.hs-row.dragging { opacity: 0.5; }
.hs-row.drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.hs-row.is-deleted { opacity: 0.75; }
.hs-handle { cursor: grab; }
.hs-handle:disabled { cursor: not-allowed; opacity: 0.4; }
.hs-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.hs-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-block-start: 4px; font-size: var(--fs-xs); }
.hs-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: flex-end; }
.hs-edit { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.hs-edit-row { max-inline-size: 820px; }
.hs-col-preview { position: sticky; inset-block-start: var(--s-4); }
.hs-pins, .hs-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.hs-pin { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); flex-wrap: wrap; }
.hs-pin select { max-inline-size: 260px; }
.hs-pv-name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.hs-add { display: flex; gap: var(--s-3); align-items: flex-end; flex-wrap: wrap; }
.hs-add .field { flex: 1; min-inline-size: 220px; }
.hs-pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: pv; }
.hs-pv-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.hs-pv-count { font-weight: 700; margin: 0 0 var(--s-2); }
@media (min-width: 1000px) { .hs-edit:not(.hs-edit-row) { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); } }
@media (max-width: 640px) {
  .hs-row { grid-template-columns: auto minmax(0, 1fr); }
  .hs-actions { grid-column: 1 / -1; justify-content: flex-start; }
}