/* ============================================================================
   wivo.my — document typography and editing affordances
   Everything inside .paper-inner is *document*, not interface: it gets its own
   measure, rhythm and scale, and is deliberately quieter than the chrome.
   ========================================================================= */

.paper-inner > *:first-child { margin-top: 0; }
.paper-inner > *:last-child { margin-bottom: 0; }

.paper-inner h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.1em;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 .32em;
}
.paper-inner h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.44em;
  line-height: 1.18;
  margin: 1.5em 0 .38em;
  padding-bottom: .18em;
  border-bottom: 1px solid var(--color-divider-soft);
}
.paper-inner h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.16em;
  margin: 1.35em 0 .3em;
  letter-spacing: .01em;
}
.paper-inner h4 {
  font-family: var(--font-semi);
  font-weight: 600;
  font-size: 1em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.3em 0 .3em;
}
.paper-inner p { margin: 0 0 .76em; }
.paper-inner ul, .paper-inner ol { margin: 0 0 .8em; padding-left: 1.55em; }
.paper-inner li { margin-bottom: .22em; }
.paper-inner li::marker { color: var(--color-accent-700); }

.paper-inner blockquote {
  margin: 1em 0;
  padding: .1em 0 .1em 1.1em;
  border-left: 2px solid var(--color-accent);
  color: var(--ink-2);
  font-style: italic;
}
.paper-inner pre {
  margin: 1em 0;
  padding: .85em 1em;
  background: var(--wash-1);
  border: 1px solid var(--color-divider-soft);
  border-left: 2px solid var(--color-accent-400);
  font-family: var(--font-mono);
  font-size: .82em;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  font-style: normal;
}
.paper-inner code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--wash-2);
  padding: .08em .32em;
  border-radius: var(--radius-sm);
}
.paper-inner pre code { background: none; padding: 0; font-size: 1em; }

.paper-inner hr {
  border: 0;
  height: 1px;
  background: var(--color-divider);
  margin: 1.6em 0;
}

.paper-inner a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; }

.paper-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: .92em;
}
.paper-inner th, .paper-inner td {
  border: 1px solid var(--color-divider);
  padding: .38em .6em;
  text-align: left;
  vertical-align: top;
}
.paper-inner th {
  background: var(--wash-1);
  font-family: var(--font-semi);
  font-weight: 600;
  font-size: .9em;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.paper-inner figure { margin: 1.2em 0; }
.paper-inner figure img { border: 1px solid var(--color-divider); }
.paper-inner figcaption {
  font-family: var(--font-semi);
  font-size: .76em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .45em;
}

/* Document furniture the app inserts */
.doc-kicker {
  font-family: var(--font-semi);
  font-size: .74em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 1.5em;
}
.doc-callout {
  display: block;
  margin: 1.1em 0;
  padding: .7em .95em;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  background: var(--wash-1);
  font-size: .94em;
}
.doc-callout[data-kind="warning"] { border-left-color: var(--status-warning); }
.doc-callout[data-kind="critical"] { border-left-color: var(--status-critical); }
.doc-callout[data-kind="good"] { border-left-color: var(--status-good); }

.doc-pagebreak {
  display: block;
  height: 0;
  margin: 1.4em 0;
  border-top: 1px dashed var(--color-accent-400);
  position: relative;
}
.doc-pagebreak::after {
  content: "PAGE BREAK";
  position: absolute; right: 0; top: -.62em;
  background: var(--color-paper);
  padding: 0 .4em;
  font-family: var(--font-semi);
  font-size: .58em;
  letter-spacing: .18em;
  color: var(--color-accent-700);
}

/* Tracked changes */
.paper-inner ins {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 2px;
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.paper-inner del {
  text-decoration: line-through;
  color: var(--status-critical-ink);
  opacity: .75;
}

/* Comment anchors */
.cmt-anchor {
  background: color-mix(in srgb, var(--status-warning) 26%, transparent);
  box-shadow: inset 0 -1px 0 var(--status-warning);
  cursor: pointer;
}
.cmt-anchor.is-active { background: color-mix(in srgb, var(--status-warning) 46%, transparent); }
.cmt-anchor.is-resolved { background: none; box-shadow: inset 0 -1px 0 var(--color-divider); }

/* Empty-paragraph placeholder — the affordance that teaches "/" */
.paper-inner p:only-child:empty::before,
.paper-inner p.is-caret-empty::before {
  content: "Write, or press / for blocks";
  color: var(--ink-4);
  pointer-events: none;
  position: absolute;
}
.paper-inner p { position: relative; }

/* ══ Improve lenses — ranges painted with the CSS Custom Highlight API ═══ */
::highlight(wivo-find) {
  background-color: color-mix(in srgb, var(--status-warning) 42%, transparent);
}
::highlight(wivo-find-current) {
  background-color: var(--status-warning);
  color: #1d1f20;
}
::highlight(wivo-passive) {
  background-color: color-mix(in srgb, var(--lens-passive) 17%, transparent);
  text-decoration: underline wavy var(--lens-passive);
  text-underline-offset: 4px;
}
::highlight(wivo-adverb) {
  background-color: color-mix(in srgb, var(--lens-adverb) 20%, transparent);
  text-decoration: underline dotted var(--lens-adverb);
  text-underline-offset: 4px;
}
::highlight(wivo-hedge) {
  background-color: color-mix(in srgb, var(--lens-hedge) 18%, transparent);
  text-decoration: underline dotted var(--lens-hedge);
  text-underline-offset: 4px;
}
::highlight(wivo-wordy) {
  background-color: color-mix(in srgb, var(--lens-wordy) 18%, transparent);
  text-decoration: underline wavy var(--lens-wordy);
  text-underline-offset: 4px;
}
::highlight(wivo-cliche) {
  background-color: color-mix(in srgb, var(--lens-cliche) 18%, transparent);
  text-decoration: underline wavy var(--lens-cliche);
  text-underline-offset: 4px;
}
::highlight(wivo-complex) {
  background-color: color-mix(in srgb, var(--lens-complex) 17%, transparent);
  text-decoration: underline dotted var(--lens-complex);
  text-underline-offset: 4px;
}
::highlight(wivo-repeat) {
  background-color: color-mix(in srgb, var(--lens-repeat) 18%, transparent);
  text-decoration: underline dotted var(--lens-repeat);
  text-underline-offset: 4px;
}
::highlight(wivo-long) {
  background-color: color-mix(in srgb, var(--lens-long) 11%, transparent);
}
::highlight(wivo-consistency) {
  background-color: color-mix(in srgb, var(--lens-doc) 15%, transparent);
  text-decoration: underline double var(--lens-doc);
  text-underline-offset: 4px;
}
::highlight(wivo-acronym) {
  background-color: color-mix(in srgb, var(--lens-doc) 13%, transparent);
  text-decoration: underline dashed var(--lens-doc);
  text-underline-offset: 4px;
}
::highlight(wivo-house) {
  background-color: color-mix(in srgb, var(--lens-doc) 20%, transparent);
  text-decoration: underline solid var(--lens-doc);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
::highlight(wivo-focus) {
  background-color: var(--wash-accent-strong);
}

/* ══ Slash menu ══════════════════════════════════════════════════════════ */
.slash {
  position: fixed;
  z-index: 290;
  width: 268px;
  max-height: 306px;
  overflow: auto;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
}
.slash-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: 6px 11px;
  font-size: 13px;
}
.slash-row .ic {
  width: 26px; height: 24px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--color-divider);
  color: var(--ink-2);
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
}
.slash-row .tx { min-width: 0; }
.slash-row .tx b { display: block; font-weight: 500; }
.slash-row .tx span { display: block; font-size: 11px; color: var(--ink-4); }
.slash-row.is-active { background: var(--color-accent-100); color: var(--color-accent-800); }
.slash-row.is-active .ic { border-color: var(--color-accent); color: var(--color-accent-800); background: var(--color-paper); }
.slash-row.is-active .tx span { color: var(--color-accent-700); }

/* ══ Colour grid used by the text/highlight pickers ══════════════════════ */
.swatches { display: grid; grid-template-columns: repeat(8, 20px); gap: 3px; padding: var(--space-2) var(--space-3); }
.swatches button {
  width: 20px; height: 20px;
  border: 1px solid var(--color-divider);
  cursor: pointer;
}
.swatches button:hover { outline: 1px solid var(--color-accent); outline-offset: 1px; }


/* ══ Diff ═══════════════════════════════════════════════════════════════ */

.diff {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-same { color: var(--ink-3); }
.diff-add {
  text-decoration: none;
  background: color-mix(in srgb, var(--status-good) 17%, transparent);
  box-shadow: inset 0 -1px 0 var(--status-good);
  color: var(--ink-1);
}
.diff-del {
  text-decoration: line-through;
  background: color-mix(in srgb, var(--status-critical) 12%, transparent);
  color: var(--status-critical-ink);
  opacity: .85;
}
.diff-skip {
  color: var(--ink-4);
  font-family: var(--font-semi);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.diff-stats {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-3);
  font-family: var(--font-semi); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
.diff-stats b { font-variant-numeric: tabular-nums; }
.diff-stats .added { color: var(--status-good-ink); }
.diff-stats .removed { color: var(--status-critical-ink); }