/* =========================
   CARTOUCHE (FINAL WORKING VERSION WITH VERTICAL LINE)
   ========================= */

.cartouche-wrap {
  /* ✅ inline-flex to control internal layout precisely */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  
  vertical-align: top;

  /* ✅ CORRECT SIZE */
  font-size: 2.3rem !important;
  
  /* ✅ Comfortable line-height */
  line-height: 1.05 !important;

  /* ✅ ABSOLUTE padding using rem */
  padding: 0.3rem 1.0rem !important;

  /* do NOT use border (affects line box) */
  border: none;
  border-radius: 9999px;

  /* draw outline without affecting layout */
  box-shadow: inset 0 0 0 3px #000 !important;

  /* ensures visibility */
  min-width: 3rem;

  /* normal text wrapping */
  white-space: normal;
  box-sizing: border-box;
  
  /* ✅ Remove all spacing */
  margin: 0 !important;
  gap: 0 !important;
  
  /* ✅ Position relative for vertical line positioning */
  position: relative;
}

/* ✅ Vertical line at the right end of cartouche (like traditional Egyptian cartouche) */
.cartouche-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #000;
  border-radius: 0;
}

/* red outline when cartouche is OPEN */
.cartouche-wrap.is-opening {
  box-shadow: inset 0 0 0 3px red !important;
}

/* red vertical line when cartouche is OPEN */
.cartouche-wrap.is-opening::after {
  background-color: red;
}