/* utono v2.0 Phase 5 — calm, compact document flow and mobile finish.
   These rules deliberately follow Phase 4 and preserve existing note media. */
:root { --v5-focus: #597B61; --v5-tap: 40px; }
.theme-dark { --v5-focus: #A7B89F; }

/* Unforced document spacing: adjacent text, images, cards and audio are flush.
   User-created blank lines inside an editable segment remain visible. */
#document-blocks.document-blocks { gap: 0; padding: 9px 0 5px; }
#document-blocks .utono-rich-segment { gap: 0; padding: 0; min-height: 0; }
#document-blocks .utono-rich-line { margin: 0; min-height: 0; line-height: 1.58; align-items: baseline; }
#document-blocks .utono-rich-content { min-height: 0; line-height: 1.58; padding: 0; }
#document-blocks .utono-rich-line.kind-heading .utono-rich-content { margin: 0; }
#document-blocks .utono-rich-line.kind-caption .utono-rich-content { line-height: 1.5; }
#document-blocks .doc-embed { padding: 0!important; margin: 0!important; max-width: 100%; }
#document-blocks .doc-embed-card .media-display { padding: 0; min-height: 0; }
#document-blocks .doc-embed-card .media-display img { display: block; }
#document-blocks .doc-embed-card .media-card { margin: 0; }
#document-blocks .doc-embed .embed-controls { top: 5px; right: 7px; z-index: 3; opacity: 0; transition: opacity .14s ease; }
#document-blocks .doc-embed:is(:hover,:focus-within) .embed-controls { opacity: 1; }
#document-blocks .utono-video-card { padding: 5px!important; }
#document-blocks .utono-linked-note { margin: 0; }
#document-blocks > .doc-textarea { min-height: 0; padding: 0 2px; line-height: 1.58; }
/* The 2026 editor lets a user add a line explicitly at any media boundary.
   No invisible contenteditable blank paragraphs occupying 30+ pixels. */
#document-blocks .utono-empty-boundary {
  position: relative; flex: 0 0 auto; padding: 0; min-height: 3px; height: 3px;
  overflow: visible; z-index: 1;
}
#document-blocks .utono-add-text-slot {
  position: absolute; z-index: 6; right: 5px; top: 50%;
  transform: translateY(-50%); min-height: 28px; min-width: 34px;
  max-width: 120px; padding: 4px 10px; border: 1px solid var(--v4-border,#E7E2DA);
  border-radius: 9px; background: var(--v4-surface,#FAF9F6); color: var(--v4-ink,#1F1F1E);
  font: inherit; font-size: 11px; font-weight: 600; opacity: 0;
  pointer-events: none; cursor: pointer;
}
#document-blocks .utono-empty-boundary:is(:hover,:focus-within) .utono-add-text-slot {
  opacity: 1; pointer-events: auto;
}
#document-blocks .utono-add-text-slot:focus-visible {
  opacity: 1; pointer-events: auto; outline: 2px solid var(--v5-focus); outline-offset: 2px;
}
@media (hover:none) {
  #document-blocks .utono-empty-boundary { min-height: 7px; height: 7px; }
  #document-blocks .utono-add-text-slot {
    opacity: .78; pointer-events: auto; padding: 3px 8px;
    min-height: 29px; border-radius: 18px;
  }
}
/* The section picker should be as deliberate as the document itself. */
#modal-root .modal-backdrop[data-dismiss-on-backdrop="false"] .modal {
  overscroll-behavior: contain;
}
#modal-root .modal-backdrop[data-dismiss-on-backdrop="false"] .modal:focus-within {
  outline: none;
}
#utono-note-link-search, #utono-note-link-target, #utono-note-link-section {
  width: 100%; min-height: 44px; font-size: 16px;
}
/* Keyboard navigation and touch: focus outlines are not optional. */
:where(.utono-editor-layout, .modal, .v2-search-panel, .v2-profile-page) :where(button,a,select,input,textarea,[contenteditable="true"]):focus-visible {
  outline: 2px solid var(--v5-focus); outline-offset: 2px;
}
@media (max-width: 720px) {
  #document-blocks .utono-rich-content { font-size: 16px; }
  #document-blocks .utono-rich-line { min-height: 0; }
  #document-blocks .doc-embed .embed-controls { opacity: .66; }
  #document-blocks .utono-video-stage { min-height: 0; }
  #modal-root .modal-backdrop { padding: max(12px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)); }
  #modal-root .modal { max-height: calc(100dvh - 35px); overflow-y: auto; overscroll-behavior: contain; }
  #modal-root .modal-actions button { min-height: 43px; }
}
@media (max-width: 380px) {
  #document-blocks .utono-add-text-slot { right: 2px; font-size: 10px; padding: 2px 6px; }
}
@media(prefers-reduced-motion: reduce) {
  #document-blocks .embed-controls { transition: none; }
}