/* Management inside the BO 2.0 shell (batch BO, bo3; BO-2.0-DESIGN 2.1, 4.1, 8.2). The shell's own layout is
   web/platform/shell.css (bo1) and the editor pattern's is web/platform/editor/editor.css (bo2); the section rules
   live in the four section stylesheets (carta/carta.css, personal/personal.css, salon/salon.css, hoy/hoy.css), each
   owned by its wave-4 chunk. This file keeps what app.js and common.js render: the group's tab row, the tab's page
   and the pieces several sections share (the card rows, the editor box, the step-up form, the issue list, the drop
   zone, the add rows). Wholly inside @layer app. */
@layer app {
  /* The group's tabs as links (design 4.1 "Tab header"); the current one carries aria-current="page". */
  .bo-tabs { display: flex; flex-wrap: nowrap; gap: var(--space-1); margin: 0 0 var(--space-4); overflow-x: auto; border-bottom: 1px solid var(--border); }
  .bo-tab { flex: none; padding: 0 var(--space-3); border-bottom: 3px solid transparent; white-space: nowrap; }
  .bo-tab[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; }
  .bo-page { display: block; min-width: 0; }
  /* Shared by the sections (moved with their behaviour from the single stylesheet of HEAD 6ee02b6). */
  .card-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m);
    border: 1px solid var(--border); background: var(--surface); }
  .editor { padding: var(--space-4); background: var(--surface); border-radius: var(--radius-m); border: 1px solid var(--border); }
  .stepup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
  .issues, .warnings { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .dropzone { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: var(--touch-primary);
    padding: var(--space-4); margin: var(--space-3) 0; border: 2px dashed var(--border); border-radius: var(--radius-m); background: var(--panel); }
  .dropzone.is-over { border-color: var(--accent); }
  .add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
}