@layer components {
  /* The notes editor

     A task can carry the brief for the work, not just a sentence about it
     (design scope §5), so the notes field is a writing surface: full width, no
     chrome of its own, and a toolbar that only exists once there is something
     to format. Trix's own chrome — grey 3px-radius buttons and a boxed editor —
     is overridden wholesale here, because an editor that looks like it came
     from a different product is exactly the seam this pass exists to remove. */

  .task-detail__notes trix-editor,
  trix-editor {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    min-height: 14rem;
    padding: var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    transition: background var(--transition), border-color var(--transition), var(--responds);
  }

  /* No tint on hover, and none while you are in it. A field this size is
     plainly a field; lighting it up on the way past says nothing you did not
     already know, and changing the paper you are writing on the moment you
     start writing is the page moving under the work. The caret is the only
     thing that needs to say where you are. */
  trix-editor[placeholder]:empty::before { color: var(--ink-faint); }

  /* Full width, to the same edge as everything else on the page. The prose
     used to sit on --measure inside a field that ran the whole way, which put
     a hard wrap about two thirds across and left a column of empty paper to
     the right of every line. A measure is right for a column of prose you only
     read; this is a box you write in, and it should fill the space it is
     given. --measure still beats the p rule in base.css, so it is turned off
     rather than left unset. */
  trix-editor > *, .trix-content > * { max-width: none; }

  /* The editor is the positioning context for the toolbar that floats over it. */
  .notes { display: flex; flex-direction: column; gap: var(--space); position: relative; }

  /* The toolbar comes to the text

     It used to sit above the editor permanently, which spends a row of chrome
     on every reading of a document to serve the few seconds anybody spends
     formatting one. Now it is absent until there is something to format, and
     then it arrives over the selection — where the hands and the eyes already
     are.

     The earlier objection to hiding it was that hover has no touch equivalent,
     so the controls would vanish on a phone. Selection is not hover: selecting
     text is exactly as available to a thumb as to a pointer, and it is how you
     say which words you meant in any case.

     Positioned against .notes, which is the nearest positioned ancestor; the
     controller puts it over the selection and takes it away again. */
  trix-toolbar {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    /* Out of the flow *and* out of the way: without this the bar takes the
       pointer's first click on its way to text underneath it. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* Anchored to the words it was called up by. The controller puts it above
       the selection where there is room and below it where there is not, so the
       origin is the edge nearest the text in the common case; a bar that grows
       out of the selection reads as belonging to it rather than as a panel that
       happened to land there.

       scale and translate rather than one transform, so neither has to know
       about the other, and neither collides with the press on the buttons
       inside it. */
    transform-origin: 50% 100%;
    scale: 0.96;
    translate: 0 var(--space);
    transition: opacity var(--transition),
                scale var(--transition-enter),
                translate var(--transition-enter);
  }

  trix-toolbar[data-shown] {
    visibility: visible;
    opacity: 1;
    scale: 1;
    translate: none;
    pointer-events: auto;
  }

  /* One group, on one line, floating. The row was a full-width strip with the
     groups spread along it; over a selection it has to be the size of the
     thing it does. */
  trix-toolbar .trix-button-row {
    display: flex;
    gap: var(--space);
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  /* Undo and redo are not things you do to a selection, and the spacer only
     existed to push them to the far end of a full-width bar. */
  trix-toolbar .trix-button-group--history-tools,
  trix-toolbar .trix-button-group-spacer { display: none; }

  trix-toolbar .trix-button-group {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
  }

  trix-toolbar .trix-button-group:not(:first-child) { margin-left: 0; }

  trix-toolbar .trix-button {
    border: 0;
    border-left: 1px solid var(--line);
    width: 2.25rem;
    height: 2.25rem;
    background: var(--surface);
    opacity: 0.75;
    transition: background var(--transition), opacity var(--transition), var(--responds);
  }

  trix-toolbar .trix-button:first-child { border-left: 0; }
  trix-toolbar .trix-button:hover { background: var(--surface-hover); opacity: 1; }
  trix-toolbar .trix-button.trix-active { background: var(--accent-sunk); opacity: 1; }
  trix-toolbar .trix-button:not(:disabled) { cursor: pointer; }

  /* Attachments are deferred (build plan §2), so the paperclip would offer
     something the app cannot do. The group goes with its only button — hiding
     the button alone left an empty bordered segment on the end of the bar,
     which is invisible in a full-width strip and obvious in a floating one. */
  trix-toolbar .trix-button--icon-attach,
  trix-toolbar .trix-button-group--file-tools { display: none; }

  trix-toolbar .trix-dialog {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    padding: var(--space-2);
  }

  trix-toolbar .trix-input--dialog {
    font: inherit;
    font-size: var(--text-sm);
    height: var(--control-h-sm);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0 var(--space);
    color: var(--ink);
    background: var(--surface);
  }

  /* What was written, set on the same scale as everything else. */
  trix-editor h1, .trix-content h1 {
    font-size: var(--text-lg);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    margin: var(--space-3) 0 var(--space);
  }

  trix-editor blockquote, .trix-content blockquote {
    margin: var(--space-2) 0;
    padding-left: var(--space-2);
    border-left: 3px solid var(--line-strong);
    color: var(--ink-muted);
  }

  trix-editor pre, .trix-content pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    overflow-x: auto;
    white-space: pre-wrap;
  }

  trix-editor ul, trix-editor ol, .trix-content ul, .trix-content ol {
    padding-left: var(--space-3);
    margin: var(--space) 0;
  }

  trix-editor li, .trix-content li { margin-bottom: calc(var(--space) / 2); }
  trix-editor a, .trix-content a { color: var(--accent); }
}