@layer components {
  /* The document sheet (docs/planning/documents-writing.md §2): for whoever
     may write, the editor IS the page, from the first paint — no reading
     view that swaps in an editor on click, because the two would never draw
     a picture the same and the page would move under the click. So the
     editor at rest must look like a page: no outline on a picture under the
     pointer and no grab cursor until the editor has focus. Both are the
     gem's rules in `base`; a rule here wins by layer. */
  .document lexxy-editor:not(:focus-within) .attachment {
    outline: none;
    cursor: default;
  }

  /* Empty, the page says "Untitled" where the heading will be, in the
     heading's size, and one faint sentence under it. A new document is one
     empty heading (Document), which the gem does not call empty and so
     draws no placeholder for: the gem's own is drawn again here, from the
     same attribute, for that heading and for an editor emptied to a
     paragraph alike. The size is the gem's h1 (lexxy-content.css), which it
     exposes no property for; said once, so the hint's place follows it. */
  .document {
    --document-heading-size: 2rem;
  }

  .document lexxy-editor.lexxy-editor--empty .lexxy-editor__content::before,
  .document .lexxy-editor__content:has(> h1:only-child > br:only-child)::before {
    content: attr(placeholder);
    position: absolute;
    opacity: 0.66;
    pointer-events: none;
    font-size: var(--document-heading-size);
    font-weight: bold;
    line-height: 1.2;
  }

  .document .composer {
    position: relative;
  }

  /* Under the heading's line, a half space down. */
  .document__hint {
    display: none;
    position: absolute;
    inset-block-start: calc(var(--document-heading-size) * 1.2 + var(--block-space-half));
    color: var(--color-ink-faint);
    pointer-events: none;
  }

  .document:has(lexxy-editor.lexxy-editor--empty, .lexxy-editor__content > h1:only-child > br:only-child) .document__hint {
    display: block;
  }

  /* The T stays with the words, never below the comments (the canvas, after
     the owner's note): sticky at the foot of the viewport while the words
     run past it, at the sheet's end once they stop. A save says nothing
     while it lands (owner, 2026-10-13: a word per save was busy); one that
     failed, or words waiting to land, speak in the note under the T. The
     row itself is utilities (documents/show). */
  .document__tools {
    position: sticky;
    inset-block-end: var(--block-space);
  }

  /* A phone (§2.4): a tap edits, the keyboard opens, and the tools stand on
     the keyboard's top edge — fixed to the visual viewport's bottom while
     `keyboard-up` is stamped (initializers/keyboard.js), the one honest sign
     of the keyboard on iOS. lexxy.css hides every toolbar where nothing
     hovers; a document is the one surface that shows its tools on a phone,
     with no T: the bar comes with the keyboard and goes with it. The bar is
     the gem's toolbar, inside <lexxy-editor> but outside the contenteditable,
     so a touch on it is a tap and not a selection. The sheet keeps a bar's
     height and a line under its last words, so the caret's line is never
     under the bar. The top is said too: the composer's sticky tools
     (lexxy.css) set one, and fixed to both edges the bar stood from the
     header to the keys and covered the words. */
  @media (any-hover: none) {
    html.keyboard-up .document lexxy-editor:focus-within lexxy-toolbar {
      display: flex;
      position: fixed;
      inset: auto 0 0;
      z-index: 2;
      padding: var(--block-space-half) var(--inline-space);
      border-block-start: var(--border);
      background-color: var(--color-canvas);
    }

    html.keyboard-up .document {
      padding-block-end: calc(var(--lexxy-toolbar-button-size) + var(--block-space) + 1lh);
    }
  }
}