/* ──────────────────────────────────────────────────────────────────────────
   add-component.css — the "+ add component" affordance (edit mode only).

   A "+" sits between sections; clicking opens a menu of insertable components
   (drawn from a small registry — in production this is the design-system /
   Sections section_key library). Visual tokens from base.css.
   ────────────────────────────────────────────────────────────────────────── */

.add-comp-gap { display: none; }
body.editing .add-comp-gap {
  display: flex; justify-content: center; align-items: center;
  padding: 6px 0; position: relative;
}
.add-comp-plus {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px dashed var(--sm-blue); background: #fff; color: var(--sm-blue);
  font-size: 18px; line-height: 1; cursor: pointer; opacity: 0.55;
  display: flex; align-items: center; justify-content: center;
}
.add-comp-gap:hover .add-comp-plus,
.add-comp-plus:focus { opacity: 1; }

.add-comp-menu {
  position: absolute; z-index: 100; min-width: 250px;
  background: #fff; border: 1px solid var(--sm-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 49, 102, 0.14); padding: 6px;
}
.add-comp-menu-title {
  font-size: 12px; color: var(--sm-text-body); padding: 7px 10px 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.add-comp-option {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 15px;
  padding: 9px 10px; border: 0; background: none; border-radius: 7px;
  cursor: pointer; color: var(--sm-text);
}
.add-comp-option:hover { background: var(--sm-grey-1); color: var(--sm-blue); }

/* Inserted sections: marked + removable in edit mode */
body.editing [data-added] { position: relative; outline: 1px dashed var(--sm-blue); outline-offset: 6px; }
.added-remove {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 6;
  display: none; font: 500 12px/1 'Roboto', sans-serif; color: var(--sm-text-body);
  border: 1px solid var(--sm-border); background: #fff; border-radius: 6px;
  padding: 4px 9px; cursor: pointer;
}
body.editing [data-added] > .added-remove { display: inline-block; }
.added-remove:hover { border-color: var(--sm-blue); color: var(--sm-blue); }

/* Never show edit chrome while presenting (belt-and-suspenders to the body.editing removal) */
body.present .add-comp-gap,
body.present .added-remove,
body.present .add-comp-menu { display: none !important; }