@layer components {
  .tiptap .is-empty::before,
  .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: hsl(0, 0%, 70%);
    float: left;
    height: 0;
    pointer-events: none;
  }

  .tiptap-toolbar {
    align-items: center;
    gap: 0.25rem;
    --tiptap-toolbar-item-size: 2.5rem;
  }

  /* Grid variant — a fixed 5-column table so the 20 controls form four tidy
     rows. Also the wide-screen face of the :responsive layout. */
  .tiptap-toolbar--grid,
  .tiptap-toolbar--responsive {
    display: grid;
    grid-template-columns: repeat(5, var(--tiptap-toolbar-item-size));
    justify-items: stretch;
    width: max-content;
  }

  /* Dropdown toggles fill their stretched grid cell so columns line up. Scoped
     to the grid layouts only, so the single-row bar keeps natural widths. */
  .tiptap-toolbar--grid .tiptap-toolbar-item > .tiptap-toolbar-dropdown,
  .tiptap-toolbar--grid .tiptap-toolbar-item .dropdown-toggle,
  .tiptap-toolbar--grid .tiptap-toolbar-item .dropdown-toggle > .tiptap-toolbar-button {
    width: 100%;
  }

  @media (min-width: 768px) {
    .tiptap-toolbar--responsive .tiptap-toolbar-item > .tiptap-toolbar-dropdown,
    .tiptap-toolbar--responsive .tiptap-toolbar-item .dropdown-toggle,
    .tiptap-toolbar--responsive .tiptap-toolbar-item .dropdown-toggle > .tiptap-toolbar-button {
      width: 100%;
    }
  }

  /* Bar variant — a single row that expands to the available width; the
     controller moves icons that do not fit into the "…" menu. */
  .tiptap-toolbar--bar {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    width: 100%;
  }

  /* The :responsive layout collapses to the single-row bar on narrow screens.
     Consumers that dock the toolbar elsewhere (e.g. a bottom bar at their own
     breakpoint) can override `.tiptap-toolbar--responsive` to this same set of
     flex rules; the controller then drives the "…" overflow off the computed
     display, so no extra wiring is needed. */
  @media (max-width: 767px) {
    .tiptap-toolbar--responsive {
      display: flex;
      flex-wrap: nowrap;
      overflow: visible;
      width: 100%;
    }
  }

  /* Single-row icon order. The DOM is in the 5×4 grid order; while the toolbar
     is a single row the controller adds `--single-row`, and these re-order the
     flex items into the bar sequence (marks split around the lists). `order`
     only affects flex, so it never disturbs the grid. */
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="text"]           { order: 1; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="bold"]           { order: 2; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="italic"]         { order: 3; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="color"]          { order: 4; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="link"]           { order: 5; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="align"]          { order: 6; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="image"]          { order: 7; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="youtube"]        { order: 8; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="bulletList"]     { order: 9; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="orderedList"]    { order: 10; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="underline"]      { order: 11; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="strike"]         { order: 12; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="blockquote"]     { order: 13; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="excalidraw"]     { order: 14; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="codeBlock"]      { order: 15; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="task"]           { order: 16; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="horizontalRule"] { order: 17; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="clearFormatting"]{ order: 18; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="undo"]           { order: 19; }
  .tiptap-toolbar--single-row [data-tiptap-overflow-item="redo"]           { order: 20; }
  .tiptap-toolbar--single-row .tiptap-toolbar-overflow                     { order: 21; }

  .tiptap-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: var(--tiptap-toolbar-item-size);
    height: var(--tiptap-toolbar-item-size);
    padding: 0.25rem 0.375rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    line-height: 0;
    cursor: pointer;
    &:hover {
      border-color: hsl(0, 0%, 80%);
    }
  }

  .tiptap-toolbar-button-with-caret {
    padding-inline: 0.2rem;
    gap: 0.1rem;
  }

  /* Letters render at a weight close to the Phosphor "light" icon strokes so
     they read as part of the same set rather than heavier glyphs. */
  .tiptap-toolbar-text-icon,
  .tiptap-toolbar-menu-button-text {
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
  }

  /* Match the optical size of the masked SVG glyphs (B, I, …) next to it —
     plain text has a smaller cap-height than a full-box icon at 1em. */
  .tiptap-toolbar-text-icon {
    font-size: 1.2rem;
  }

  /* The bold / italic / underline / strike buttons render their letter as
     plain text (not an SVG icon) so they sit visually identical to the T
     label. The modifier carries the formatting each one represents. */
  .tiptap-letter-italic {
    font-style: italic;
  }

  .tiptap-letter-underline {
    text-decoration: underline;
  }

  .tiptap-letter-strike {
    text-decoration: line-through;
  }

  .tiptap-toolbar-item--overflowed {
    display: none !important;
  }

  .tiptap-toolbar-item {
    flex: 0 0 auto;
  }

  .tiptap-toolbar-overflow[hidden],
  .tiptap-toolbar-overflow [hidden] {
    display: none !important;
  }

  .tiptap-toolbar-dropdown {
    flex: 0 0 auto;
  }

  .tiptap-toolbar-dropdown .dropdown-menu {
    border-color: hsl(220, 13%, 78%);
    box-shadow: 0 0.75rem 2rem hsl(222, 47%, 11%, 0.18);
  }

  .tiptap-toolbar-menu {
    display: grid;
    gap: 0.25rem;
    padding: 0.35rem;
  }

  .tiptap-toolbar-menu-grid {
    grid-template-columns: repeat(4, minmax(2.25rem, 1fr));
  }

  .tiptap-toolbar-menu-text {
    grid-template-columns: repeat(4, minmax(2.5rem, 1fr));
  }

  .tiptap-toolbar-menu-color {
    min-width: 12.5rem;
  }

  .tiptap-toolbar-menu-label {
    padding: 0.2rem 0.25rem 0;
    color: hsl(220, 9%, 46%);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .dropdown-menu .tiptap-toolbar-menu-button,
  .tiptap-toolbar-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
  }

  .dropdown-menu .tiptap-toolbar-menu-button:hover,
  .dropdown-menu .tiptap-toolbar-menu-button:focus-visible,
  .tiptap-toolbar-menu-button:hover,
  .tiptap-toolbar-menu-button:focus-visible {
    border-color: hsl(220, 13%, 82%);
    background-color: hsl(220, 14%, 96%);
  }

  .tiptap-toolbar-swatch-button {
    border-color: hsl(220, 13%, 82%);
  }

  .dropdown-menu .tiptap-palette {
    padding: 0;
  }

  .tiptap-button-active,
  .dropdown-menu .tiptap-toolbar-menu-button.tiptap-button-active {
    border-color: hsl(0, 0%, 60%);
    background-color: hsl(0, 0%, 92%);
  }

  .tiptap-palette {
    display: grid;
    grid-template-columns: repeat(5, minmax(1.85rem, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .tiptap-swatch {
    width: 1rem;
    height: 1rem;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      border-color: hsl(0, 0%, 60%);
    }
  }

  .tiptap-swatch-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 1.85rem;
    height: 1.85rem;
    background: transparent;
    font-weight: 700;
    line-height: 1;
  }

  .tiptap-swatch-active {
    border-color: hsl(217, 91%, 60%);
    box-shadow: 0 0 0 2px hsl(217, 91%, 60%, 0.35);
    &:hover {
      border-color: hsl(217, 91%, 60%);
    }
  }

  @media (max-width: 767px) {
    .tiptap-toolbar {
      gap: 0.2rem;
      --tiptap-toolbar-item-size: 2.6rem;
      --icon-size: 1.15rem;
    }
  }

  .tiptap-upload-form,
  .tiptap-upload-input {
    display: none;
  }

  .tiptap-content [data-tiptap-image].ProseMirror-selectednode,
  .tiptap-content img.ProseMirror-selectednode,
  .tiptap-content [data-youtube-video].ProseMirror-selectednode,
  .tiptap-content [data-type="excalidraw"].ProseMirror-selectednode {
    outline: 2px solid hsl(217, 91%, 60%);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 6px hsl(217, 91%, 60%, 0.14);
  }

  .tiptap-media-remove-button {
    position: fixed;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 999px;
    background: white;
    color: hsl(0, 0%, 20%);
    box-shadow: 0 0.5rem 1.5rem hsl(0, 0%, 0%, 0.18);
    cursor: pointer;

    &:hover {
      border-color: hsl(0, 72%, 55%);
      color: hsl(0, 72%, 45%);
    }

    &[hidden] {
      display: none;
    }
  }

  .tiptap-media-caption-button {
    position: fixed;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 999px;
    background: white;
    color: hsl(0, 0%, 20%);
    box-shadow: 0 0.5rem 1.5rem hsl(0, 0%, 0%, 0.18);
    cursor: pointer;
    font: 600 0.75rem/1 system-ui, sans-serif;

    &:hover {
      border-color: hsl(217, 91%, 60%);
      color: hsl(217, 91%, 45%);
    }

    &[hidden] {
      display: none;
    }
  }

  .tiptap-media-size-toolbar,
  .tiptap-media-alignment-toolbar {
    position: fixed;
    z-index: 1000;
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.25rem;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 999px;
    background: white;
    box-shadow: 0 0.5rem 1.5rem hsl(0, 0%, 0%, 0.18);
    transform: translateX(-50%);

    &[hidden] {
      display: none;
    }
  }

  .tiptap-media-size-button,
  .tiptap-media-alignment-button {
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: hsl(0, 0%, 30%);
    font: 600 0.75rem/1 system-ui, sans-serif;
    cursor: pointer;

    &:hover {
      background: hsl(0, 0%, 94%);
    }
  }

  .tiptap-media-size-button-active,
  .tiptap-media-alignment-button-active {
    background: hsl(217, 91%, 60%);
    color: white;

    &:hover {
      background: hsl(217, 91%, 55%);
    }
  }

  .tiptap-caption-dialog,
  .tiptap-prompt-dialog {
    max-width: min(44rem, 95vw);

    .tiptap-caption-form,
    .tiptap-prompt-form {
      display: grid;
      gap: 1rem;
      width: 100%;
    }

    .tiptap-caption-field,
    .tiptap-prompt-field {
      display: grid;
      gap: 0.35rem;
    }

    .tiptap-caption-field span,
    .tiptap-prompt-field span {
      color: hsl(0, 0%, 35%);
      font-size: 0.9rem;
      font-weight: 600;
    }

    textarea,
    input[type="url"],
    input[type="text"] {
      box-sizing: border-box;
      width: 100%;
      resize: vertical;
      font: inherit;
      padding: 0.5rem 0.625rem;
    }

    textarea {
      min-height: 2.5rem;
    }
  }

  .tiptap-content {
    --tiptap-media-edge: 1rem;

    h1 {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.2;
      margin: 1.5rem 0 0.75rem;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.25;
      margin: 1.25rem 0 0.625rem;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.3;
      margin: 1rem 0 0.5rem;
    }

    p {
      margin: 0.5rem 0;
    }

    a {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: hsl(0, 0%, 70%);
      text-underline-offset: 4px;
      cursor: pointer;

      &:hover {
        text-decoration-color: hsl(0, 0%, 30%);
      }
    }

    ul,
    ol {
      margin: 0.5rem 0;
      padding-left: 1.5rem;
    }

    ul { list-style: disc; }
    ol { list-style: decimal; }

    li {
      margin: 0.25rem 0;
      & > p { margin: 0; }
    }

    ul[data-type="taskList"] {
      list-style: none;
      padding-left: 0;

      li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;

        & > label {
          flex-shrink: 0;
          margin-top: 0.25rem;
          user-select: none;
        }

        & > div {
          flex: 1 1 auto;
          min-width: 0;
        }

        &[data-checked="true"] > div {
          color: hsl(0, 0%, 50%);
          text-decoration: line-through;
        }
      }
    }

    blockquote {
      margin: 1rem 0;
      padding: 0.25rem 0 0.25rem 1rem;
      border-left: 3px solid hsl(0, 0%, 80%);
      color: hsl(0, 0%, 35%);
      font-style: italic;
    }

    hr {
      margin: 1.5rem 0;
      border: 0;
      border-top: 1px solid hsl(0, 0%, 85%);
    }

    img {
      box-sizing: border-box;
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 0.375rem;
      margin: 0.75rem auto;
      padding: var(--tiptap-media-edge);
      cursor: pointer;
    }

    [data-tiptap-image] {
      box-sizing: border-box;
      display: block;
      max-width: 100%;
      margin: 0.75rem auto;
      padding: var(--tiptap-media-edge);
      border-radius: calc(0.375rem + var(--tiptap-media-edge));
      cursor: pointer;
    }

    [data-tiptap-image][data-align="left"] {
      float: left;
      margin: 0.25rem 1rem 0.75rem 0;
    }

    [data-tiptap-image][data-align="right"] {
      float: right;
      margin: 0.25rem 0 0.75rem 1rem;
    }

    [data-tiptap-image][data-align="center"] {
      float: none;
      margin: 0.75rem auto;
    }

    [data-tiptap-image] img {
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
    }

    .tiptap-media-caption,
    .tiptap-image-caption {
      display: block;
      margin-top: 0.35rem;
      color: hsl(0, 0%, 42%);
      font-size: 0.9rem;
      line-height: 1.35;
      text-align: center;
    }

    [data-youtube-video] {
      box-sizing: border-box;
      display: block;
      max-width: 100%;
      margin: 0.75rem auto;
      padding: var(--tiptap-media-edge);
      border-radius: calc(0.375rem + var(--tiptap-media-edge));
      cursor: pointer;
    }

    [data-youtube-video] iframe {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      margin: 0;
      border: 0;
      border-radius: 0.375rem;
    }

    code:not(pre code) {
      background: hsl(0, 0%, 95%);
      border-radius: 3px;
      padding: 0.125rem 0.25rem;
      font-family: "JetBrainsMono", monospace;
      font-size: 0.9em;
    }

    pre {
      background: #0d0d0d;
      border-radius: 0.5rem;
      color: #fff;
      font-family: "JetBrainsMono", monospace;
      padding: 0.5rem 0.75rem;

      code {
        background: none;
        color: inherit;
        font-size: 1rem;
        padding: 0;
      }

      .hljs-comment,
      .hljs-quote {
        color: #616161;
      }

      .hljs-variable,
      .hljs-template-variable,
      .hljs-attribute,
      .hljs-tag,
      .hljs-name,
      .hljs-regexp,
      .hljs-link,
      .hljs-selector-id,
      .hljs-selector-class {
        color: #f98181;
      }

      .hljs-number,
      .hljs-meta,
      .hljs-built_in,
      .hljs-builtin-name,
      .hljs-literal,
      .hljs-type,
      .hljs-params {
        color: #fbbc88;
      }

      .hljs-string,
      .hljs-symbol,
      .hljs-bullet {
        color: #b9f18d;
      }

      .hljs-title,
      .hljs-section {
        color: #faf594;
      }

      .hljs-keyword,
      .hljs-selector-tag {
        color: #70cff8;
      }

      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: 700;
      }
    }
  }

  /* Excalidraw drawing node (optional extension, enabled via excalidraw: true).
     Sized and centered like an image/youtube media frame; the inline
     `width` is set by the S/M/L toolbar buttons. */
  .tiptap-excalidraw {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    margin: 0.75rem auto;
    padding: var(--tiptap-media-edge, 1rem);
    border-radius: calc(0.375rem + var(--tiptap-media-edge, 1rem));
    cursor: pointer;
  }

  .tiptap-excalidraw-image {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid hsl(0, 0%, 90%);
    border-radius: 0.375rem;
    background: white;
  }

  .tiptap-excalidraw-empty {
    min-height: 8rem;
  }

  /* Centered modal Excalidraw editor (a plain backdrop, not a top-layer
     <dialog> — see tiptap_excalidraw_dialog.js for why) */
  .tiptap-excalidraw-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--dialog-backdrop-color, rgba(0, 0, 0, 0.15));
    backdrop-filter: blur(2px);
  }

  .tiptap-excalidraw-modal {
    display: flex;
    flex-direction: column;
    width: 80vw;
    height: 80vh;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    background: white;
    border: 1px solid var(--dialog-border-color, lightgray);
    border-radius: 8px;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
  }

  .tiptap-excalidraw-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid hsl(0, 0%, 88%);

    h3 {
      margin: 0;
      font-size: 1rem;
    }
  }

  .tiptap-excalidraw-dialog-actions {
    display: flex;
    gap: 0.5rem;
  }

  .tiptap-excalidraw-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
  }

}

/* Excalidraw's "Browse libraries" button opens libraries.excalidraw.com,
   whose "Add to Excalidraw" flow returns to a stable page URL and cannot
   deliver the library back into this transient modal editor (it just opens
   a new tab on the host page). Hide it — the pre-bundled libraries (see
   helpers/excalidraw_libraries.js) and the library menu's file import
   ("..." → Import) cover the same need without navigating away.
   !important is required: Excalidraw injects its own
   `.excalidraw .library-menu-browse-button { display: flex }` into <head> at
   runtime, after this stylesheet, so a same-specificity rule loses. */
.library-menu-browse-button {
  display: none !important;
}