@layer components {
  /* The heading that renames in place — the untargeted `:rename` frame around
     a dock title or a tool page's own heading (projects/_tool, todosets/show).
     The heading is the affordance: no underline until hover, and clicking
     swaps the edit form in through the frame.

     The form arrives whole from tools/edit — the same response the standalone
     page renders — so the surface compacts it, not the markup: the label stays
     for the screen reader (it joins .for-screen-reader's selector list in
     utilities.css, since the markup here cannot take the class), the input
     wears the heading's own metrics so
     nothing moves when it appears, and the action pair floats below rather
     than pushing the page down. Defaults fit an h1 (base.css sets the page
     title at x-large/600); a denser surface retunes --inline-rename-size. */
  .inline-rename {
    display: block;
    position: relative;

    a {
      color: inherit;
      text-decoration: none;
    }

    .input {
      padding-block: 0;
      font-size: var(--inline-rename-size, var(--text-x-large));
      font-weight: 600;
      line-height: 1.2;
      color: inherit;
    }

    .actions {
      /* A popup and not merely raised: the pair floats OVER whatever the page
         puts under the heading, so it has to clear that content rather than
         just the flow it left. It was --z-raised (1), which nothing beat until
         the card board arrived — its sticky end rails sit at 2 and its tool
         card at 5, and both drew straight over the ✕, leaving a rename that
         could be saved and not cancelled (user, 2026-08-29, on a board whose
         title was being renamed). --z-popup is what a floating control that
         waits for an answer already means here. */
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      z-index: var(--z-popup);
      margin-block-start: var(--block-space-half);
      padding: calc(var(--block-space-half) / 2);
      background-color: var(--color-canvas);
      border: var(--border);
      border-radius: var(--border-radius-float);
      box-shadow: var(--shadow);
    }
  }
}