/* ============================================================================
 * BOX BOX - public/patch.css
 * ----------------------------------------------------------------------------
 * The inline rewrite: the outline on the passage, the bar under it, the undo.
 *
 * Everything here is drawn in tokens, so it follows the theme without a second
 * rule anywhere. The one thing it must never do is move the document: the
 * outline is an inset ring and a tint, never a border, because a border on a
 * paragraph is a pixel of extra height and the whole page steps sideways the
 * moment she selects something.
 * ==========================================================================*/

/* ------------------------------------------------------- the chosen block - */

/* She has to be able to see EXACTLY what is going to be replaced before she
   presses anything. The browser's own selection stops at the character she
   dragged to; this shows the whole block, which is what actually travels. */
.md .is-patching {
  position: relative;
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: 4px;
}

/* A heading is already a strong shape; tinting the whole band reads as an
   error state, so it gets the edge alone. */
.md h1.is-patching,
.md h2.is-patching,
.md h3.is-patching {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* A list item's marker sits outside its box, so the tint has to reach back
   under it or the bullet looks orphaned. */
.md li.is-patching { padding-left: 6px; margin-left: -6px; }

/* -------------------------------------------------------------- the bar -- */

.patch-bar {
  position: fixed; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  /* Sized here rather than by its contents: the hint inside is a different
     length in each language, and a bar that changes width when she switches
     languages reads as a different control. */
  width: min(430px, calc(100vw - 24px));
  padding: 8px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}

.patch-note {
  flex: 1 1 200px; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--field);
  color: var(--text); font: inherit; font-size: 13.5px;
  padding: 8px 11px; border-radius: 7px; outline: none;
}
.patch-note::placeholder { color: var(--faint); }
.patch-note:focus { border-color: var(--line-hi); background: var(--surface); }

.patch-bar .btn { flex: none; }

.patch-x {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 7px;
  color: var(--faint); font-size: 13px; cursor: pointer;
}
.patch-x:hover { background: var(--surface-3); color: var(--text); }

/* Working: the bar keeps its position and its size roughly, so the passage
   under it does not jump when the controls are swapped for the message. */
.patch-bar.is-working { padding: 10px 14px; }
.patch-msg { font-size: 13.5px; color: var(--text-2); }

.patch-bar .spinner {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); animation: bb-pulse 1.1s ease-in-out infinite;
}

/* ------------------------------------------------------------ the reveal - */

/* Two seconds of "here it is", then gone. Long enough to find on a phone,
   short enough that it is not a mark left on her document. */
.md .patch-lit {
  background: var(--accent-tint);
  border-radius: 4px;
  box-shadow: inset 3px 0 0 var(--accent-line);
  transition: background .5s ease, box-shadow .5s ease;
}

/* ------------------------------------------------------------- the undo -- */

/* Sits at the top of the part, not over it, and stays until she opens
   something else. A rewrite is cheap to undo and expensive to re-run, so the
   way back should never time out while she is still deciding. */
.patch-notice { margin-bottom: 16px; }

/* ---------------------------------------------------------------- touch -- */

/* On a phone the selection handles are large and land on top of anything
   directly under the passage, so the bar earns a full tap target and a bit of
   clearance rather than hugging the text. */
@media (pointer: coarse) {
  .patch-bar { gap: 10px; padding: 10px; }
  .patch-note { padding: 11px 12px; font-size: 16px; }   /* 16px: no zoom on focus */
  .patch-x { width: 44px; height: 44px; }
  .patch-bar .btn { min-height: 44px; }
}

/* Motion off means off - the dot stops pulsing and simply sits there, which
   still reads as "this one is busy" because it is the only thing in the bar. */
@media (prefers-reduced-motion: reduce) {
  .patch-bar .spinner { animation: none; }
}
:root[data-motion="off"] .patch-bar .spinner { animation: none; }