/*
 * ProseMirror editor styles for the official website ProseMirror render (docs + templates).
 * Extracted from packages/editor/index.css — custom rules only, no Tailwind v4.
 */

:root {
  /* Synced from packages/editor/index.css — keep in lock-step with the
   * editor package or the preview will visually drift from the live editor. */
  --input-locked-bg: rgb(201, 201, 201);
  --input-unlocked-bg: rgb(250, 250, 250);
  --input-locked-border: 1px solid rgb(201, 201, 201);
  --input-unlocked-border: 1px solid rgb(183, 183, 183);
  --input-focus-outline: 1px solid rgb(161, 161, 161);
}

/* --- ProseMirror base (from prosemirror-view/style/prosemirror.css) --- */

.ProseMirror {
  position: relative;
  min-height: 300px;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.ProseMirror-hideselection {
  caret-color: transparent;
}

.ProseMirror [draggable][contenteditable="false"] {
  user-select: text;
}

.ProseMirror p {
  margin-bottom: 1rem;
}

.ProseMirror:focus {
  outline: none;
}

::selection {
  background-color: rgb(209, 213, 219);
}

.block-selection ::selection {
  background-color: transparent;
}

/* --- Skin wrapper inputs ---
 * Inline form nodes (short_input, date_selector) use a span wrapper that owns
 * the visible border + background ("skin"). The inner <input> sits at the same
 * 0.8lh height as the wrapper, so its default white background covers the
 * wrapper's top/bottom border, leaving only the left/right edges visible.
 * Force the input to be transparent so the skin shows through fully. */
.ProseMirror .inline-flex > input,
.ProseMirror .inline-flex > textarea {
  background-color: transparent;
}

/* --- Focus outlines for inputs --- */

.input-focused-outline {
  outline: var(--input-focus-outline);
}

.input-focus-outline:focus {
  outline: var(--input-focus-outline);
}

/* --- Checkbox --- */

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 1px solid var(--input-locked-bg);
  border-radius: 4px;
}

input[type="checkbox"]:disabled {
  appearance: none;
}

input[type="checkbox"]:checked {
  background: var(--input-locked-bg);
  border-color: var(--input-locked-bg);
}

/* --- Editor link --- */

.editor-link {
  color: rgb(37, 99, 235);
  text-decoration: underline;
}

/* --- @container (Tailwind v4 utility, not available in v3 without plugin) --- */

.\@container {
  container-type: inline-size;
}

/* --- Flatpickr minimal overrides for date selector --- */

.flatpickr-calendar {
  font-family: inherit;
}