/* Wave 4: the contract version editor with its live preview, the placeholder
   strip and mirror, the summary rows as a list, and the redline. Loads after
   hub.css and the wave 2 and 3 files, so an equal selector here wins. */

/* ---- The two panes ---------------------------------------------------- */

.contract-editor .page-head {
  margin-bottom: 14px;
}

.editor-saved {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.editor-saved::before {
  content: "·";
  margin-right: 6px;
}

/* The tabs exist only when the panes cannot sit side by side. */
.editor-tabs {
  display: none;
  margin-bottom: 14px;
}

.editor-panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.editor-pane-preview {
  display: none;
}

@media (min-width: 1100px) {
  .editor-panes {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  }

  /* The preview keeps pace with the page: sticky at the top and scrolling
     inside itself, so the paragraph being edited is beside its render. */
  .editor-pane-preview {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 1099.98px) {
  .editor-tabs {
    display: inline-flex;
  }

  .contract-editor.is-previewing .editor-pane-write {
    display: none;
  }

  .contract-editor.is-previewing .editor-pane-preview {
    display: block;
  }
}

.editor-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.editor-preview-head .input-inline {
  width: auto;
  max-width: 100%;
}

.editor-diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.editor-diff-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

.editor-preview-empty {
  margin: 0;
}

/* A refresh on its way: the old render dims rather than disappears. */
turbo-frame#contract-preview {
  display: block;
  transition: opacity var(--dur-fast) var(--ease-out);
}

turbo-frame#contract-preview[busy] {
  opacity: .55;
}

.editor-pane-preview .portal-contract {
  margin-bottom: 0;
}

/* ---- The placeholder strip ------------------------------------------- */

.editor-body-field {
  margin-bottom: 20px;
}

.placeholder-strip {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  box-shadow: var(--ring);
}

.placeholder-groups {
  display: grid;
  gap: 6px;
}

.placeholder-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.placeholder-group-label {
  min-width: 44px;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.placeholder-chip {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-solid);
  box-shadow: var(--ring);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.placeholder-chip:hover {
  background: var(--ok-soft);
}

.placeholder-chip:active {
  transform: scale(.98);
}

.placeholder-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.placeholder-count {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.placeholder-count.is-bad {
  color: var(--bad-ink);
  font-weight: 700;
}

/* ---- The textarea and its mirror -------------------------------------
   The mirror sits behind the field with the same type, padding and width,
   its text transparent and its marks tinted. The textarea above it has no
   background, so the tints show through under the letters. Both grow with
   the content; neither scrolls inside itself. */

.editor-field {
  position: relative;
  max-width: calc(80ch + 32px);
}

.editor-mirror,
.editor-textarea.input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--control-line);
  border-radius: 14px;
  font-family: "Quicksand", ui-rounded, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.editor-mirror {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  background: var(--control-bg);
  border-color: transparent;
  pointer-events: none;
  user-select: none;
}

.editor-textarea.input {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 320px;
  overflow: hidden;
  resize: none;
  background: transparent;
  color: var(--ink);
}

.editor-textarea.input:focus {
  background: transparent;
}

.editor-textarea.input:focus + .editor-mirror,
.editor-field:focus-within .editor-mirror {
  background: var(--control-bg-focus);
}

.editor-mirror mark {
  color: transparent;
  border-radius: 4px;
  box-shadow: 0 0 0 1px transparent;
}

.editor-mirror .ph-ok {
  background: var(--ok-soft);
}

.editor-mirror .ph-bad {
  background: var(--bad-soft);
  box-shadow: 0 0 0 1px var(--bad);
}

/* ---- Summary rows as a list ------------------------------------------ */

.summary-rows {
  display: block;
}

.summary-rows > .field-hint {
  margin-bottom: 10px;
}

.summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.summary-row {
  border-top: 1px solid var(--line-soft);
}

.summary-row:first-child {
  border-top: 0;
}

.summary-row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 6px 0;
  font-size: var(--fs-body);
}

.summary-row-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
}

.summary-row-label {
  font-weight: 700;
}

.summary-row-dot {
  color: var(--ink-mute);
}

.summary-row-value {
  color: var(--ink-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}

.summary-row-edit {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.summary-row-fields {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0 12px;
}

.summary-row-fields .field {
  margin: 0;
}

.summary-row-fields label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.summary-row-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-row.is-editing .summary-row-line {
  display: none;
}

.summary-row.is-editing .summary-row-fields {
  display: grid;
  animation: fade-rise var(--dur-base) var(--ease-out);
}

.summary-add {
  margin-top: 12px;
}

@media (max-width: 760px) {
  /* A two-line card per row, with the label over the value. */
  .summary-row-text {
    flex-direction: column;
    gap: 2px;
  }

  .summary-row-dot {
    display: none;
  }

  .summary-row-fields {
    grid-template-columns: 1fr;
  }

  .placeholder-strip {
    top: calc(52px + var(--safe-t));
  }

  .placeholder-group-label {
    min-width: 100%;
  }
}

/* ---- The redline ------------------------------------------------------ */

.redline-ins {
  text-decoration: none;
  background: var(--ok-soft);
  box-shadow: inset 0 -2px 0 var(--ok);
  border-radius: 2px;
}

.redline-del {
  background: var(--bad-soft);
  color: var(--bad-ink);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  border-radius: 2px;
}

.redline-same {
  margin: 0 0 10px;
}

.portal-contract.is-redline p {
  animation: fade-rise var(--dur-enter) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .portal-contract.is-redline p,
  .summary-row.is-editing .summary-row-fields {
    animation: none;
  }
}

/* Paragraphs in the full render breathe like the document they are. */
.portal-contract-full p + p {
  margin-top: 10px;
}