@layer components {
  .note-back-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .note-back {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-radius: 4px;
    --icon-size: 0.95rem;
    transition: color 0.15s ease, background-color 0.15s ease;

    &:hover {
      color: #111827;
      background-color: #f3f4f6;
      text-decoration: none;
    }
  }

  .note {
    --note-reading-width: 102ch;
    --note-rail-width: 14rem;
    --note-rail-gap: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--note-rail-gap);
    min-height: calc(100vh - 11rem);
    margin-bottom: 6rem;
  }

  .note-article {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--note-reading-width);
    align-self: stretch;
    background-color: white;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 12px rgba(15, 23, 42, 0.04);
    padding: 1rem 3rem 3rem;
    display: flex;
    flex-direction: column;
  }

  .note-toolbar-rail {
    flex: 0 0 var(--note-rail-width);
    min-width: var(--note-rail-width);
    margin-top: 2rem;
  }

  .note-toolbar-rail-inner {
    position: fixed;
    top: 5.5rem;
    width: var(--note-rail-width);
  }

  /* Positioned so .note-actions anchors to the header itself — anchoring it
     to the article made the dots jump when the open-dropdown rules below
     toggled the header's position. */
  .note-header {
    position: relative;
    background-color: white;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(237, 236, 236);
    margin: 0 0 1rem 0;
  }

  /* Vertically centered on the title line: header padding-top (1rem) +
     half the h1 line box (1.875rem × 1.2 / 2) − half the toggle (1.5rem icon). */
  .note-actions {
    position: absolute;
    top: 1.375rem;
    right: 0;
    z-index: 2;
    --dropdown-menu-left: auto;
    --dropdown-menu-right: 0;
  }

  .note-title-form {
    margin: 0;
    padding-right: 2.5rem;

    & h1 {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 0.4rem;
      color: #111827;

      &:focus,
      .ProseMirror:focus {
        outline: none;
      }
    }
  }

  .note-category {
    display: inline-block;
    margin: 0 0 5px 0;
    --icon-size: 0.8rem;
  }

  .note-category-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    font-size: 0.85rem;
    color: #4b5563;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease;

    &:hover,
    &:focus,
    &:focus-visible {
      outline: none;
    }
  }

  .note-category-current {
    font-weight: 500;
  }

  .note-category .dropdown-menu form.button_to:has(button.selected) {
    background-color: var(--dropdown-menu-selected-color);
    position: relative;

    &::after {
      position: absolute;
      top: 5px;
      right: 5px;
      content: "\2713";
    }
  }

  .note-toolbar {
    background-color: white;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 12px rgba(15, 23, 42, 0.04);
    padding: 0.5rem;
    --icon-size: 1rem;
  }

  .note-toc {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem 0.85rem;
    background-color: white;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 12px rgba(15, 23, 42, 0.04);
    font-size: 0.8rem;
    line-height: 1.35;
    max-height: calc(100vh - 25rem);
    overflow-y: auto;
  }

  .note-toc[hidden] {
    display: none;
  }

  .note-toc-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.5rem;
  }

  .note-toc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
  }

  .note-toc-item {
    margin: 0;
  }

  .note-toc-link {
    appearance: none;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    width: 100%;
    text-align: left;
    font: inherit;
    line-height: 1.3;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    color: #374151;
    overflow: hidden;
    overflow-wrap: anywhere;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }

  .note-toc-link:hover {
    color: #111827;
    background-color: #f3f4f6;
    border-left-color: #9ca3af;
  }

  .note-toc-link.active {
    color: #111827;
    font-weight: 600;
    border-left-color: #2563eb;
    background-color: rgba(37, 99, 235, 0.06);
  }

  .note-toc-item-l1 .note-toc-link { padding-left: 0.35rem; font-weight: 500; }
  .note-toc-item-l2 .note-toc-link { padding-left: 1rem; }
  .note-toc-item-l3 .note-toc-link { padding-left: 1.65rem; color: #4b5563; }
  .note-toc-item-l4 .note-toc-link { padding-left: 2.3rem; color: #6b7280; }

  .note-toc-jump {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
  }

  .note-toc-jump-top {
    padding: 0.4rem 0.6rem;
    background-color: white;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 12px rgba(15, 23, 42, 0.04);
    margin-bottom: 1rem;
    border-top: none;
    padding-top: 0.4rem;
  }

  .note-toc-jump-link {
    appearance: none;
    background: none;
    border: none;
    text-align: left;
    padding: 0.2rem 0.35rem;
    font: inherit;
    color: #6b7280;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .note-toc-jump-link:hover {
    color: #111827;
    background-color: #f3f4f6;
  }

  .note-content-form {
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .note-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 2.5rem;
    line-height: 1.65;

    > .tiptap,
    > .ProseMirror {
      flex: 1;
    }

    &:focus,
    .ProseMirror:focus {
      outline: none;
    }

    & h1, & h2, & h3, & h4 {
      margin-top: 1.6em;
      margin-bottom: 0.35em;
      line-height: 1.25;

      &:first-child {
        margin-top: 0;
      }
    }

    & h1 { font-size: 1.6rem; }
    & h2 { font-size: 1.3rem; }
    & h3 { font-size: 1.1rem; }
    & h4 { font-size: 1rem; }

    & p {
      margin: 0 0 0.75em;
    }

    & ul, & ol {
      margin: 0.5em 0 0.75em;
      padding-left: 1.5em;
    }

    & li {
      margin-bottom: 0.2em;
    }
  }

  .note-toc-toggle {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
  }

  /* The mobile formatting bar (with the TOC toggle at its far right) only
     exists below the rail breakpoint; desktop uses the right-hand rail. */
  .note-mobile-bar,
  .note-toc-fab,
  .note-toc-backdrop,
  .note-toc-popup {
    display: none;
  }

  .note-toc-popup-wrapper {
    display: contents;
  }

  @media (max-width: 1023px) {
    /* The desktop rail (grid toolbar + inline TOC) is replaced by the
       in-article formatting bar; iOS Safari cannot reliably pin a bar above
       the on-screen keyboard, so the bar sticks below the app header instead. */
    .note-toolbar-rail {
      display: none;
    }

    .note-mobile-bar {
      display: flex;
      /* stretch (not center): the TOC toggle spans the bar's full height so
         its divider runs gapless from the top line to the bottom line. */
      align-items: stretch;
      position: sticky;
      top: calc(2.5rem + var(--blitz-staging-banner-height, 0rem));
      z-index: 50;
      background-color: white;
      margin: 0 0 0.4rem;
      border-top: 1px solid rgb(237, 236, 236);
      border-bottom: 1px solid rgb(237, 236, 236);
    }

    /* The bar takes over the header's separator line. */
    .note-header {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    /* The header's dropdowns (actions, category) open downwards and may
       overlap the sticky bar — lift the header above it only while one is
       open. Kept as two rules: a browser without :popover-open would drop
       a combined selector list entirely. */
    .note-header:has(.dropdown-menu.show) {
      z-index: 60;
    }

    .note-header:has(.dropdown-menu:popover-open) {
      z-index: 60;
    }

    .note-mobile-toolbar {
      flex: 1 1 auto;
      min-width: 0;
      border: none;
      box-shadow: none;
      border-radius: 0;
      /* The bar's vertical breathing room lives here (not on the bar) so the
         stretched TOC toggle reaches both border lines. */
      padding: 0.1rem 0;
      --icon-size: 1.05rem;
      --tiptap-toolbar-item-size: 2.1rem;
    }

    .note-mobile-bar .tiptap-toolbar {
      gap: 0.05rem;
      justify-content: flex-start;
    }

    /* One uniform width for every button — the width the caret buttons need
       naturally (icon + inline caret). Equal boxes keep the icon spacing
       even; the carets stay inline for usability. */
    .note-mobile-bar .tiptap-toolbar-button {
      min-width: 2.2rem;
      height: var(--tiptap-toolbar-item-size);
      padding: 0.15rem 0.05rem;
    }

    .note-mobile-bar .tiptap-toolbar-menu {
      gap: 0.2rem;
      padding: 0.3rem;
    }

    .note-mobile-bar .tiptap-toolbar-menu-color {
      min-width: min(20rem, calc(100vw - 1.5rem));
    }

    .note-mobile-bar .tiptap-toolbar-menu-label {
      padding-top: 0.1rem;
    }

    .note-mobile-bar .tiptap-palette {
      grid-template-columns: repeat(5, minmax(2.1rem, 1fr));
      gap: 0.2rem;
    }

    /* TOC toggle at the far right of the bar, separated from the icons. */
    .note-toc-fab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      /* Full bar height: centers the icon on the toolbar row and lets the
         divider span border line to border line. */
      align-self: stretch;
      width: 2.1rem;
      /* All-sides margin: the base form styles give <label> a bottom margin
         that would keep the divider from reaching the bottom line. */
      margin: 0 0 0 0.1rem;
      color: #374151;
      border-left: 1px solid rgba(17, 24, 39, 0.12);
      cursor: pointer;
      --icon-size: 1.15rem;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .note:has(.note-toc-popup[hidden]) .note-toc-fab {
      display: none;
    }

    /* The TOC panel drops down below the (stuck) bar. It is pinned to the
       viewport — not the bar — so it can never grow past the screen; the
       heading list scrolls inside while title and jump links stay put. */
    .note-toc-popup {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: calc(5.2rem + var(--blitz-staging-banner-height, 0rem));
      right: 0.75rem;
      width: 18rem;
      max-width: calc(100vw - 1.5rem);
      max-height: calc(100dvh - 6.5rem);
      margin-top: 0;
      overflow: hidden;
      transform: translateY(-6px) scale(0.97);
      transform-origin: top right;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .note-toc-popup .note-toc-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      margin-bottom: 0;
    }

    /* Jump links sit above the list as a compact row. */
    .note-toc-popup .note-toc-jump {
      flex-direction: row;
      gap: 1.25rem;
      padding: 0 0 0.45rem;
      border-top: none;
      border-bottom: 1px solid rgba(17, 24, 39, 0.08);
      margin-bottom: 0.45rem;
    }

    .note-toc-popup[hidden] {
      display: none;
    }

    .note-toc-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background-color: transparent;
      pointer-events: none;
    }

    .note:has(.note-toc-toggle:checked) .note-toc-popup {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    .note:has(.note-toc-toggle:checked) .note-toc-backdrop {
      pointer-events: auto;
    }

    .note:has(.note-toc-toggle:checked) .note-toc-fab {
      background-color: #f3f4f6;
      color: #111827;
    }
  }

  @media (max-width: 640px) {
    body:has(.note) .footer-nav {
      display: none;
    }

    .note-article {
      padding: 0.5rem 1.25rem 3rem;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }

    /* On phones the borderless article allows the bar to bleed to the screen
       edges, so the icon row gets the full width. */
    .note-mobile-bar {
      margin-inline: -1.25rem;
      padding-inline: 0.5rem;
    }

    /* Same centering math with the phone's smaller h1 (1.5rem × 1.2). */
    .note-actions {
      top: 1.15rem;
      right: 0;
    }

    .note-title-form h1 {
      font-size: 1.5rem;
    }
  }

  /* ---------- Note list & cards ---------- */

  /* Note-specific bits; the shared row skeleton lives in item_list.css. */

  /* Stretch the link over the whole row; keep favorite + dropdown on top. */
  .note-row .item-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .note-row .item-row-favorite,
  .note-row .item-row-actions .dropdown {
    position: relative;
    z-index: 2;
  }

  .note-row-icon {
    width: 24px;
    flex-shrink: 0;
    color: #6b7280;
  }

  .note-grid-favorite {
    display: block;
    color: #e5e7eb;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.3s ease;
  }

  .note-grid-favorite:hover {
    color: #16a34a;
  }

  .card[data-favorite-favorite=true] .note-grid-favorite {
    color: #15803d;
  }

  .card[data-favorite-favorite=true] .note-grid-favorite:hover {
    color: #16a34a;
  }

  /* Stretch the link over the whole card; keep favorite + dropdown on top */
  .note-card .note-grid-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .note-card .note-grid-favorite,
  .note-card .card-actions-dropdown {
    position: relative;
    z-index: 2;
  }
}