.fountainEditorSurface { position: relative; min-height: 118px; }
.fountainDirectEditor, .fountainDirectEditor * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.fountainEditorSurface .fountainDirectEditor { position:relative; z-index:1; min-height:118px; width:100%; color:#171717; white-space:pre-wrap; overflow-wrap:normal; font-family:"Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:calc(16px * var(--screenplay-editor-zoom, 1)); line-height:1; outline:none; background:transparent; }
.fountainEditLine { min-height:1em; max-width:60ch; }
.fountainEditLine.fountain-blank { min-height:1em; }
.fountainEditLine.fountain-character { margin-left:20ch; }
.fountainEditLine.fountain-dialogue { margin-left:10ch; max-width:35ch; }
.fountainEditLine.fountain-parenthetical { margin-left:15ch; max-width:25ch; }
.fountainPageBreakLayer { position:absolute; inset:0; z-index:4; pointer-events:none; }
.fountainPageBreakMarker { position:absolute; left:0; right:0; border-top:1px dashed rgba(0,0,0,.25); color:#777; font:10px sans-serif; }
.fountainPageBreakMarker.isApproximate { border-top-style:dotted; opacity:.7; }
.fountainPageBreakLabel { position:absolute; right:0; top:-1.2em; background:rgba(255,255,255,.8); padding:0 3px; }
.fountainPresenceLayer { position:absolute; inset:0; z-index:8; overflow:visible; pointer-events:none; }
.fountainRemoteSelectionRect { position:absolute; z-index:1; border-radius:2px; background:rgba(67,99,216,.2); background:color-mix(in srgb, var(--remote-color, #4363d8) 20%, transparent); box-shadow:inset 0 0 0 1px rgba(67,99,216,.24); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--remote-color, #4363d8) 24%, transparent); pointer-events:none; }
.fountainRemoteCaret { position:absolute; z-index:2; width:0; height:0; pointer-events:none; }
.fountainRemoteCaretBar { position:absolute; left:0; top:0; width:2px; height:var(--remote-caret-height, 1.25em); border-radius:1px; background:var(--remote-color, #4363d8); box-shadow:0 0 0 .5px rgba(255,255,255,.65); }
.fountainRemoteCaretLabel { position:absolute; left:0; bottom:100%; transform:translateY(-2px); max-width:150px; overflow:hidden; padding:1px 6px 2px; border-radius:5px 5px 5px 0; background:var(--remote-color, #4363d8); color:#fff; font:650 10px/1.25 system-ui, sans-serif; white-space:nowrap; text-overflow:ellipsis; box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* Task 2: per-section page count, moved OUT of the text block and into the
   page's right margin band — the whitespace between the formatted surface's
   right edge and the page edge — matching the professional-screenplay
   convention of a top-right-margin page number instead of overlapping the
   script. The surface (this badge's positioned ancestor, see
   .fountainEditorSurface above) has its right edge flush with the text
   block's right edge, i.e. exactly where the margin band starts, so
   left:100% anchors the badge there and margin-left/max-width push it
   rightward INTO the margin as fractions of the margin's own width
   (--screenplay-page-margin-right * --screenplay-editor-zoom, both inherited
   from #screenplayEditorBody, same pattern .fountainDirectEditor's font-size
   already uses above). Fractions rather than fixed px keep the badge
   pinned inside the margin band — never touching the page edge, never
   creeping back over the text — at every zoom level (0.65x-1.35x). Nothing
   between here and the page clips (.screenplayDocumentPage is
   overflow:visible), so there's no risk of the badge being cut off.
   Sits above the page-break layer (z-index 4) and the presence layer
   (z-index 8) so it's never occluded, but stays pointer-events:none like
   both since it's purely informational. No pill background now that it
   sits on bare paper margin instead of over script text — a plain, quiet
   label reads better there. */
.fountainPageCountBadge {
  position:absolute;
  top:0;
  left:100%;
  margin-left:calc(var(--screenplay-page-margin-right, 96px) * var(--screenplay-editor-zoom, 1) * 0.12);
  max-width:calc(var(--screenplay-page-margin-right, 96px) * var(--screenplay-editor-zoom, 1) * 0.76);
  z-index:9;
  color:rgba(23,23,23,.46);
  font:700 calc(14px * var(--screenplay-editor-zoom, 1))/1.3 system-ui, sans-serif;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fountainPageCountBadge:empty { display:none; }

/* Task 1: character-suggestion popup offered by Tab on a "normal" line.
   Fixed + document.body-appended (same convention as .linkPopover in
   index.html) since it's anchored to a caret rect computed in viewport
   coordinates, not to any ancestor's local layout. z-index sits above the
   screenplay editor modal (11000). */
.fountainCharacterSuggestPopup { position:fixed; z-index:11500; min-width:120px; max-width:min(320px, calc(100vw - 24px)); max-height:min(240px, 60vh); overflow:auto; padding:4px; border-radius:8px; border:1px solid rgba(0,0,0,.14); background:rgba(255,255,255,.98); box-shadow:0 10px 28px rgba(0,0,0,.22); }
.fountainCharacterSuggestList { list-style:none; margin:0; padding:0; }
.fountainCharacterSuggestItem { padding:4px 8px; border-radius:5px; color:#202124; font:600 12px/1.4 "Courier New", Courier, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.fountainCharacterSuggestItem.is-active { background:rgba(11,125,255,.14); color:#0b5fd6; }