/* Phase 147 — Writer element quick-action pill.
   Pairs with phase147-writer-element-pill.js; delete both to remove. */

/* #mode-indicator's container is deliberately pointer-events:none so the pill
   never eats taps meant for the script. Now that the pill is a real control it
   must opt back in — but only the pill itself, not the container. */
#mode-indicator.p147-live {
  pointer-events: auto !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}

#mode-indicator.p147-live:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .28); }
#mode-indicator.p147-live:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Tap feedback — the element type changes in place, so without this the tap can
   read as "nothing happened". */
#mode-indicator.p147-bump { transform: scale(1.12); }

/* The "what's next" affordance. Muted so the CURRENT type stays the headline. */
#mode-indicator .p147-next {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .62;
  margin-left: 6px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* phaseA-mobile-writer-hub.css kills the old floating writer bars on phones
     with `html body[data-active-view="writer-app"] #mode-indicator{pointer-events:none!important}`
     (0,1,3) — it moved formatting into the dock and left this pill as a
     read-only badge. The pill is now a real one-tap control, so re-enable just
     it: (0,2,3) + !important beats that rule. Deliberately NOT re-enabling
     #mobile-format-bar / #tag-float-bar — the dock still owns those. */
  html body[data-active-view="writer-app"] #mode-indicator.p147-live {
    pointer-events: auto !important;
  }
  /* The label is re-asserted by the JS on mobile (updateModeDisplay blanks it),
     so give it room and keep the whole pill a comfortable tap target. */
  #mode-indicator.p147-live {
    min-height: 44px;
    padding: 6px 12px;
    gap: 4px;
  }
  #mode-indicator #mode-text {
    display: inline !important;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
  }
  /* The <select> is the desktop picker; on a phone the tap-to-cycle replaces it
     and it would only crowd the pill. */
  #mode-indicator.p147-live #block-type-select { display: none; }
}