/* Write assist: the notice that a stroke was corrected, and the way back.
 *
 * Built entirely on the core token vocabulary in tokens.css. DESIGN.md is
 * explicit that a private --writeassist-* palette is how a panel ends up with
 * no background on the target tablet, so there is not one here. */

.write-assist-chip {
  position: fixed;
  /* Above the canvas and the tool rail, clear of the bottom edge on a tablet
   * where the browser chrome eats the last few dozen pixels. */
  left: 50%;
  bottom: var(--s6);
  transform: translateX(-50%);
  z-index: 60;

  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);

  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 10px var(--d-2);

  font-family: var(--sans);
  font-size: var(--t-2);
  /* The label is short by design; wrapping it would make the chip jump. */
  white-space: nowrap;
  max-width: calc(100vw - var(--s5) * 2);
}

/* A class selector beats the user-agent's [hidden] { display: none }, so
 * setting .hidden on this element would otherwise do nothing at all and the
 * chip would sit there for ever. */
.write-assist-chip[hidden] {
  display: none;
}

.write-assist-chip-label {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.write-assist-chip-undo {
  /* A correction the writer did not ask for has to be cheap to reject, so the
   * way back is a full 44px target rather than a text link. */
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s4);

  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--r-pill);

  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.write-assist-chip-undo:hover {
  border-color: var(--accent);
}

.write-assist-chip-undo:focus-visible,
.write-assist-chip-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Edit is the quieter of the two: the snap already happened, so looking at
 * the shape's settings is optional, while keeping the ink is the decision. */
.write-assist-chip-edit {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s4);

  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);

  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.write-assist-chip-edit:hover {
  background: var(--raised);
}

.write-assist-chip button[hidden] {
  display: none;
}

/* The toggle in the pen panel. It sits alongside the three smoothing buttons
 * and borrows their shape so the section reads as one control group. */
.write-assist-toggle {
  /* The editor has no global border-box rule — only marketing.css carries one,
   * and that is not loaded here — so width:100% plus padding would push this
   * past its container and give the panel a horizontal scrollbar. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);

  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);

  font: inherit;
  font-size: var(--t-2);
  text-align: left;
  cursor: pointer;
}

.write-assist-toggle:hover {
  background: var(--raised);
}

.write-assist-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.write-assist-toggle.active {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}

/* A track and knob rather than a raw checkbox: DESIGN.md lists six raw
 * checkbox inputs at 13-19px as outstanding touch-target debt, and this would
 * have been a seventh. */
.write-assist-switch {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  padding: 2px;
  background: var(--rule);
  border-radius: var(--r-pill);
}

.write-assist-toggle.active .write-assist-switch {
  background: var(--accent);
}

.write-assist-switch::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border-radius: var(--r-circle);
  transition: transform var(--fast) ease-out;
}

.write-assist-toggle.active .write-assist-switch::after {
  transform: translateX(14px);
}

@media (prefers-reduced-motion: reduce) {
  .write-assist-switch::after {
    transition: none;
  }
}