/* ==========================================================
   GotMama — article openers under the MxChat box

   Deliberately quiet. This sits inside someone else's widget
   on someone else's article, so it borrows the page's own
   font and stays out of the way until it is useful.
   ========================================================== */

.gmb-starts {
  margin: 10px 0 2px;
  font-family: inherit;
}

.gmb-starts[hidden] { display: none; }

.gmb-starts-lb {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C9398;
  margin: 0 0 8px;
  font-weight: 600;
}

.gmb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The theme has its own ideas about buttons, and on GotTrouble it
   was clipping these to "The Impact of Sexual..." — a cut that
   reads badly anywhere and worse on an article about children.
   These undo the clipping without touching anything else. */
.gmb-starts button.gmb-b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  width: auto;
  min-width: 0;
  height: auto;
  text-indent: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 13px;
  border: 1px solid #DFE3E6;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1D3C4A;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.gmb-starts button.gmb-b:hover {
  border-color: #E8542B;
  color: #C4502B;
}

.gmb-starts button.gmb-b:focus-visible {
  outline: 2px solid #E8542B;
  outline-offset: 1px;
}

/* Square for legal, diamond for financial, circle for wellness,
   hollow for the article's own topics. The same shapes the
   perspectives use, so colour never carries it alone. */
.gmb-pip {
  width: 8px;
  height: 8px;
  flex: none;
  background: currentColor;
}

.gmb-pip-l { border-radius: 2px; color: #1D3C4A; }
.gmb-pip-f { border-radius: 2px; color: #C4502B; transform: rotate(45deg) scale(0.9); }
.gmb-pip-w { border-radius: 50%; color: #4F7C6B; }

.gmb-pip-t {
  border-radius: 50%;
  color: #8C9398;
  background: none;
  box-shadow: inset 0 0 0 2px currentColor;
}

@media (max-width: 520px) {
  .gmb-starts button.gmb-b {
    font-size: 12.5px;
    padding: 7px 11px;
  }
}