/* Rewording tooltips, for an admin. public/js/tooltips.js has the reasoning.
   Nothing in here is drawn unless the mode is switched on, so the ordinary app
   is untouched by the feature existing. */

/* The switch in the rail footer, beside Feedback. `.on` while the mode runs,
   because a mode that changes what every click does has to look switched on
   from wherever you happen to be standing. */
.rail-fb.on {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}

/* A dashed amber outline on anything carrying a tooltip, and the text cursor,
   so it reads as "this is editable" rather than "this is broken". Outline
   rather than border: a border would add two pixels to every button on screen
   and shove half the layouts around the moment the mode came on. */
.tt-edit-mode .tt-editable {
  outline: 1px dashed #d97706;
  outline-offset: 1px;
  cursor: text;
}
.tt-edit-mode .tt-editable:hover {
  outline: 2px solid #d97706;
  background: #fffbeb;
}

/* The one place clicks still do what they say: the editor's own dialog.
   This used to name #modal-root, which put every modal in the app out of
   reach - the deal form, the person form, all of them - when those are exactly
   the screens whose tooltips somebody wants to reword. The editor has a layer
   of its own now and this rule follows it there. */
.tt-edit-mode #tt-editor-root .tt-editable {
  outline: none;
  cursor: inherit;
}
.tt-edit-mode #tt-editor-root .tt-editable:hover { background: transparent; }

/* The editor's layer. Above an ordinary modal, so it can open on top of the
   deal form without replacing it, and below the toast and the call ribbon,
   which is where an ordinary modal sits too. */
#tt-editor-root .modal-back { z-index: 150; }

/* The "?" beside a label is an inline-block circle, so an outline drawn tight
   against it reads as a smudge. A little more room and its own radius make it
   look picked rather than damaged. */
.tt-edit-mode .tip.tt-editable {
  outline-offset: 3px;
  border-radius: 50%;
}

/* Reword mode outlines the wording under the pointer. It is one element that
   follows the pointer, not a wrapper round every word: the page is not changed
   while an admin is reading it. Solid amber where the line is already reworded,
   dashed where it still says what it shipped as. Above an ordinary modal (100),
   below the editor's own layer (150). */
#tt-hover {
  position: fixed;
  z-index: 140;
  pointer-events: none;
  border: 1px dashed #d97706;
  border-radius: 3px;
  background: rgba(251, 191, 36, .14);
}
#tt-hover[hidden] { display: none; }
#tt-hover.changed { border-style: solid; background: rgba(251, 191, 36, .25); }