@import "tailwindcss";
@import "./tokens.css";
/* Per-mode palettes chosen on the account (MIN-696). Their selectors outweigh
   the mode overrides below, so the import can stay with the others. */
@import "./theme-presets.css";
@import "streamdown/styles.css";
/* KaTeX, for the editor's equations (components/pages/blocks/math.ts). Tailwind
   inlines it and rebases its font URLs onto the package. */
@import "katex/dist/katex.min.css";
/* Streamdown (Numo markdown rendering): without these @sources, Tailwind does not generate
   classes used by components and everything renders in unstyled boxes. */
@source "../node_modules/streamdown/dist/*.js";
@source "../node_modules/@streamdown/code/dist/*.js";

/* App chrome follows the shared runtime policy, including tablet orientation.
   Ordinary content grids keep Tailwind's independent width breakpoints. */
@theme {
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1200px;
}
@custom-variant app-mobile (&:where(html[data-app-layout="mobile"] *));
@custom-variant app-desktop (&:where(html[data-app-layout="desktop"] *));

/* Hover belongs to a fine pointer that hovers (MIN-836). A finger has no
   hover: the browser fakes one on tap and keeps it until the next tap
   elsewhere, so a pressed control looks selected. Tailwind's own `hover:`
   only checks `(hover: hover)`, which some phones and tablets report with a
   coarse primary pointer; this one also requires `(pointer: fine)`. Every
   compound follows it (`group-hover:`, `peer-hover:`, `data-*:hover:`).
   `touch:` is the exact complement: a control revealed on hover
   (`opacity-0 group-hover:opacity-100`) adds `touch:opacity-100` so it is
   always shown where nothing can hover. Hand-written `:hover` rules in the
   stylesheets sit inside the same media query. */
@custom-variant hover {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @slot;
    }
  }
}
@custom-variant touch {
  @media (hover: none), (pointer: coarse) {
    @slot;
  }
}

/* One hover cursor for the whole app (MIN-587): buttons and every other
   interactive element show the default arrow, never the pointer hand. The
   adapted cursor still wins where it carries meaning — text fields, drag
   handles, zoom, disabled controls — through the `:not()` exemptions: an
   element carrying one of those utilities is simply left alone.
   Unlayered on purpose: cascade layers place Tailwind utilities below this
   rule, so a stray `cursor-pointer` can never reintroduce the hand. */
:where(
    button:not(:disabled),
    a,
    summary,
    label,
    [role="button"],
    [role="option"],
    [role="menuitem"],
    [role="menuitemradio"],
    [role="menuitemcheckbox"],
    [role="radio"],
    [role="checkbox"],
    [role="switch"],
    [role="tab"],
    [role="treeitem"]
  ):not(
    .cursor-grab,
    .cursor-grabbing,
    .cursor-text,
    .cursor-zoom-in,
    .cursor-zoom-out,
    .cursor-not-allowed
  ) {
  cursor: default;
}

/* Dependency chrome can retain compiled width utilities. Match its shell
   wrappers to the same layout attribute as the application components. */
:root[data-app-layout="desktop"] {
  .app-shell main { padding-bottom: 0; }

  .app-shell .desktop\:flex {
    display: flex !important;
  }

  .app-shell .desktop\:hidden {
    display: none !important;
  }

  /* The sidebar container is itself a direct child of the shell: it is not
     covered by the descending selector above. */
  .app-shell > .desktop\:flex {
    display: flex !important;
  }
}

:root[data-app-layout="mobile"] {
  .app-shell .desktop\:flex { display: none !important; }
  .app-shell .desktop\:hidden { display: flex !important; }
}

/* In the Electron app, the fixed strip that allows you to move the window covers
   the first 44 pixels. When the compact navigation panel
   navigation compact is stored, its edge must pass ABOVE this strip
   and become a web zone again; otherwise a hover of the top-left corner cannot
   never recall navigation. Once opened, it goes back under the panel
   itself and does not block any controls. */
/* The auth screens' brand clears the macOS window buttons (MIN-781): top
   left, centred on the buttons' row (trafficLightPosition 15,15; the group of
   three 14px buttons spans about 15-75px across and is centred at 22px down)
   with the breathing room of a toolbar item after them, at 96px. The column's
   32px padding is the reference. Read from the attribute
   the pre-paint script sets, so it is placed once. The desktop app's bundled
   self-hosting page (`components/desktop/server-choice.css`) repeats this
   rule, so the mark stays put between the two. */
html[data-desktop-platform="darwin"] .auth-logo-row {
  margin-top: -24px;
  padding-left: 64px;
}

/* The auth screens' first appearance (MIN-781): the form's blocks (heading,
   providers, separator, fields, button, footer link) arrive one after the
   other, and the showcase pane eases in from the side behind them. The
   landing's curve; `backwards` only, so nothing keeps a filter afterwards
   (see `.reveal`). Stopped by `prefers-reduced-motion`. */
@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes auth-pane-in {
  from {
    opacity: 0;
    transform: translateX(24px) scale(0.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.auth-stagger > * > * {
  animation: auth-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.auth-stagger > * > :nth-child(2) { animation-delay: 0.06s; }
.auth-stagger > * > :nth-child(3) { animation-delay: 0.12s; }
.auth-stagger > * > :nth-child(4) { animation-delay: 0.18s; }
.auth-stagger > * > :nth-child(5) { animation-delay: 0.24s; }
.auth-stagger > * > :nth-child(6) { animation-delay: 0.3s; }
.auth-stagger > * > :nth-child(n + 7) { animation-delay: 0.36s; }
.auth-showcase-enter {
  animation: auth-pane-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}
@media (prefers-reduced-motion: reduce) {
  .auth-stagger > * > *,
  .auth-showcase-enter {
    animation: none;
  }
}

html[data-desktop-app] .sidebar-nav-hotzone {
  -webkit-app-region: no-drag;
}

/* Without the primary sidebar, a narrow macOS window still needs one native
   titlebar-height clearance so the traffic lights do not cover page content.
   Other platforms and every desktop-width layout reserve no header space. */
.compact-window-controls-clearance {
  display: none;
}
:root[data-app-layout="mobile"] {
  &[data-desktop-platform="darwin"] .compact-window-controls-clearance {
    display: flex;
  }
}

/* Keyboard keys need fonts that DRAW the shortcut glyphs (⌘ ⌥ ⇧ ⌃ ⏎ live in
   the Miscellaneous Technical block, U+2300–23FF) — Inter, the app's sans,
   has none of them, so every modifier fell back to an arbitrary font with
   misaligned metrics. Route keys to the fonts that design these glyphs
   natively: SF Pro on macOS (what system menus and Raycast draw), Segoe UI
   Symbol on Windows, Noto Sans Symbols 2 elsewhere. */
:root {
  --font-kbd: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol",
    "Noto Sans Symbols 2", sans-serif;
}

/* ─── Floating surfaces ────────────────────────────────────────────────
   Popovers, menus, selects and custom suggestion lists are portaled or
   absolutely positioned, so their stacking context must be independent from
   the content that opened them. Keep dialogs and modals out of this group:
   their opaque card surfaces and their own z-index remain unchanged.

   The opacity is intentionally high enough to hide text behind a menu while
   still letting the surrounding surface show through. The stronger blur gives
   the translucent surface its separation without turning every menu into a
   heavy glass panel. The filter is limited to these short-lived surfaces and
   does not use `will-change`, which would keep large compositor layers alive.

   One system for primitives and app surfaces alike (`[data-floating-surface]`,
   `[role="menu"]`), which is why it lives here and not in each primitive; the
   palettes of app/theme-presets.css override it for transparency off and high
   contrast. */
:is(
  [data-slot="popover-content"],
  [data-slot="dropdown-menu-content"],
  [data-slot="dropdown-menu-sub-content"],
  [data-slot="select-content"],
  [data-floating-surface],
  [role="menu"]
) {
  background-color: color-mix(in oklab, var(--popover) 84%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  isolation: isolate;
}

/* Elevate floating surfaces above their surrounding content. Local panels can
   opt out when they intentionally sit below a confirmation dialog. */
:is(
  [data-slot="popover-content"],
  [data-slot="dropdown-menu-content"],
  [data-slot="dropdown-menu-sub-content"],
  [data-slot="select-content"],
  [data-floating-surface]:not([data-floating-surface-layer="local"]),
  [role="menu"]
) {
  z-index: 1000 !important;
}

/* A confirmation opened from a floating surface (the inbox popover's "Delete
   read") covers it, scrim included. Opt-in, through `overFloatingSurface` on
   the alert dialog: other dialogs keep their own z-index. */
:is([data-slot="alert-dialog-overlay"], [data-slot="alert-dialog-content"])[data-layer="over-floating"] {
  z-index: 1001 !important;
}

/* A hover card explains a row of the surface it opens from (a relation in a
   card's popover, a sub-issue in a menu): above the floating surfaces lifted
   to 1000 and a confirmation over them (1001), below tooltips (MIN-909). */
[data-slot="hover-card-content"] {
  z-index: 1050 !important;
}

/* Tooltips float above every elevated surface, not only the page content:
   inside the inbox popover the icon-button tooltips (settings, delete, mark as
   read) open over the popover's own surface, which the rule above lifts to
   1000. The tooltip keeps its old role of sitting above dialogs too. */
[data-slot="tooltip-content"] {
  z-index: 1100 !important;
}

/* A searchable command list lives inside its popover. Let the parent surface
   carry the glass treatment so the command root does not paint an opaque box
   over it. CommandDialog remains opaque because it is not inside one of these
   floating surfaces. */
:is(
  [data-slot="popover-content"],
  [data-slot="dropdown-menu-content"],
  [data-slot="dropdown-menu-sub-content"],
  [data-slot="select-content"],
  [data-floating-surface],
  [role="menu"]
) [data-slot="command"] {
  background-color: transparent;
}

/* App-authored Markdown uses the shared enriched link treatment. Forge-authored
   pull request content opts out so linked badges and image buttons stay intact. */
a.markdown-link {
  color: #0085FF;
  text-decoration: none;
}

a.markdown-link:focus-visible {
  color: #0085FF;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  a.markdown-link:hover {
    color: #0085FF;
    text-decoration: none;
  }
}

/* The site's icon is glued to the link's first word: a line never ends on the
   icon alone with the name on the next line. An `inline-block` is a break
   opportunity on both sides, so the icon is instead an INLINE box holding a
   no-break space (U+00A0), which allows a break before it (after the space
   that precedes the link) and never after it. The image sits in the box's
   start padding; the no-break space itself is the gap before the text. Its
   center matches the former 0.9em block lowered by 0.08em. */
a.markdown-link::before {
  content: "\a0";
  padding-inline-start: 0.9em;
  border-radius: 2px;
  background-image: var(
    --markdown-link-icon,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230085FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E")
  );
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0.9em 0.9em;
}

/* Public guide citations render the matching article icon inside the link. */
a.markdown-link[data-documentation-citation]::before {
  display: none;
}

/* ── Inter arrows, which Google does not serve ──────────────────────────────
   `next/font/google` only loads from Inter the subsets published by
   Google, and NONE covers the arrow block: the Latin range puts “↑” there
   (U+2191) and “↓” (U+2193), but not “→” (U+2192) or “↔” (U+2194). THE
   next link in the stack is "Inter Fallback", which next/font defines as
   `local(Arial)` with a `size-adjust: 107.12%` — each arrow was therefore
   drawn by Arial, enlarged by 7%: 0.99 em of line, compared to 0.73 em for the
   real arrow of Inter. Hence the arrow which is too long and foreign to the text which
   surrounds it: that which poses “->” in the editors
   (components/editor-arrows.ts) like those written hard in the UI.
   Measured in the browser, at 16 px: 17.14 px in advance before, 15.22 px after.

   This @font-face has the SAME last name as next/font — `Inter`,
   real name and not hashed, since it is a Google font. Faces of the same
   family are added by character range: it fills the gap without
   that no font stack has to move, and the inheritance of the body like the
   utilitaires `font-sans` / `font-display` / `font-mono` en profitent d'un coup.

   The file is a subset of InterVariable 4.001 (rsms.me/inter, license
   OFL in app/fonts/), reduced to the two arrow ranges — 8 KB, 34 characters:

     pyftsubset InterVariable.woff2 --unicodes="U+2190-21FF,U+27F0-27FF" \
       --flavor=woff2 --layout-features='' --no-hinting \
       --output-file=app/fonts/inter-arrows.woff2

   It covers wider than just the “→”, and it is the same fault everywhere:
   “↗ ↳ ↵ ⇒ ⇧ ⟷” were not in ANY Inter side and fell to the
   system font (SF here, Segoe UI Symbol on Windows) — the system fonts
   palette shortcut are one of them. What Inter doesn't draw either
   (“⇄”, U+21C4) falls as before. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-arrows.woff2") format("woff2");
  unicode-range: U+2190-21FF, U+27F0-27FF;
}

/* ── The Mention Pill (components/mention-chip.tsx) ───────────────────────
   It is TINTED BY TYPE: the background and the text are the same rested color
   with two lights, the one that sinks into the page and the one that can be read on it.
   The pill derives the three variables below from ITS hue, in syntax of
   relative color — hence CLARITIES and OPACITIES here, and not colors:
   the color comes from the type (`mentionTone`), and for an objective or a
   project it is a color that no style sheet knows in advance.

   These clarity cannot be deduced from one another from one theme to another:
   on a light background a pill darkens to read, on a dark background it
   clears up. Two games, therefore, and without arithmetical connection.

   The background remains TRANSLUCENT on both sides, and not a solid color: the
   pill can be placed on a comment card as well as on a line
   hovered over or on the surface of the Numo composer, and must take the shade of
   what carries it. Only one variable per role, therefore only one class `bg-*` /
   `text-*`: a caller who repaints the pill (the cat's dark bubble)
   remplace proprement via tailwind-merge.

   The `-hover` variant is for pills that LEAD somewhere (a ticket, a
   objective, a page — never a person, cf. lib/mention-target.ts): the same
   bottom, pressed a notch, so that the hover says “this clicks” without the
   pilule change de nature.

   The values ​​of `--mention-chip` and `--mention-chip-hover` set here are used
   of REPLI: they paint what borrows the geometry of the pill without
   be a — the pill of a command “/” from the Numo composer. */
:root {
  --mention-chip: oklch(0.21 0.012 265 / 6%); --mention-chip-hover: oklch(0.21 0.012 265 / 12%);
  --mention-chip-l: 0.62; --mention-chip-a: 13%; --mention-chip-a-hover: 22%; --mention-chip-ink-l: 0.47;
}
.dark {
  --mention-chip: oklch(0 0 0 / 25%); --mention-chip-hover: oklch(0 0 0 / 40%);
  --mention-chip-l: 0.72; --mention-chip-a: 18%; --mention-chip-a-hover: 28%; --mention-chip-ink-l: 0.84;
}

/* A pill placed on an INK surface rather than on the page: the bubble
   of a message sent, in the Numo composer as in the agent's thread.
   It keeps ITS color - it is indeed the same ticket, the same person as elsewhere
   — but takes it back to the clarity of the other theme: the bubble is in --foreground,
   so dark when the page is light, and light when the page is dark.
   Hence the inversion, and not a separate set of values. To place on the SURFACE,
   not on the pill: it applies to all those it carries. */
.mention-on-ink {
  --mention-chip-l: 0.8; --mention-chip-a: 22%; --mention-chip-a-hover: 32%; --mention-chip-ink-l: 0.88;
}
.dark .mention-on-ink {
  --mention-chip-l: 0.58; --mention-chip-a: 16%; --mention-chip-a-hover: 26%; --mention-chip-ink-l: 0.45;
}

/* A pill placed on a TINTED surface: the bubble of a message sent to Numo,
   in the brand's lavender. The pill's translucent tint would mix with it —
   a person's purple or an issue's blue all but vanish on lavender — so it is
   laid over the page's own background first, and reads exactly as it does
   on the page (MIN-879). */
.mention-on-tint [style*="--mention-chip:"] {
  background: linear-gradient(var(--mention-chip), var(--mention-chip)), var(--background);
}
@media (hover: hover) and (pointer: fine) {
  .mention-on-tint [style*="--mention-chip:"]:is(a, button):hover {
    background: linear-gradient(var(--mention-chip-hover), var(--mention-chip-hover)), var(--background);
  }
}

/* The search chip of a typed “/”, “@” or “$” (components/editor/suggestion-chip.ts):
   decorations over the open query, never content. It borrows the pill's
   radius, takes a background tinted with the text's own ink (the neutral
   `--mention-chip` is near invisible on the dark page), keeps the size and
   the ink of the text around it, and stays an inline box: a long query wraps like the
   words beside it, each line keeping its own rounded piece. An empty query
   joins its muted “Type to search” widget into one token. */
/* The chip's room comes from a spread shadow of its own color, not from
   padding: a shadow takes no place in the line, so the text around the query
   does not move when the menu opens, nor when it is cancelled. When the line
   breaks inside the chip or its “Type to search”, every piece keeps its four
   rounded corners and its spread (`box-decoration-break: clone`).
   The color is OPAQUE — the text's ink at 8% over the surface the editor
   sits on — so where the query's and the placeholder's spreads overlap, the
   two read as one continuous token rather than a darker seam. */
.ProseMirror {
  --suggestion-chip-bg: color-mix(in oklab, var(--foreground) 8%, var(--background));
}
:is([data-slot="sheet-content"], [data-slot="dialog-content"], [data-slot="side-panel-content"]) .ProseMirror {
  --suggestion-chip-bg: color-mix(in oklab, var(--foreground) 8%, var(--card));
}
.suggestion-chip,
.suggestion-chip-placeholder {
  border-radius: 0.3em;
  background: var(--suggestion-chip-bg);
  box-shadow: 0 0 0 0.2em var(--suggestion-chip-bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.suggestion-chip {
  overflow-wrap: break-word;
}
/* An empty query and its “Type to search” join into one token: the joined
   sides are square, the outer ones rounded. */
.suggestion-chip-empty {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
/* Its spread starts where the query's ends: drawn after the query, it would
   otherwise paint over the end of the “/” or “@”. */
.suggestion-chip-placeholder {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: 0.2em;
  color: var(--muted-foreground);
  pointer-events: none;
  user-select: none;
}

/* Fixed shades of mentions. An objective and a project do not have one here:
   they wear their own (the color of the objective, that of the project orb).
   Blue and indigo are those that the pastilles on the ticket and the page had;
   purple is people, and Numo takes --brand. */
:root {
  --mention-person: oklch(0.55 0.2 305);
  --mention-issue: oklch(0.55 0.2 258);
  --mention-page: oklch(0.55 0.2 277);
}

/* ── A ghost stays transparent ──────────────────────────────────────────────
   The button primitive paints the ghost variant `bg-background` — it assumes the
   button rests on a surface of its own color. On minddy's gray chrome that
   makes every quiet chrome button (new ticket, usage, scratchpad, board
   filter, create objective…) read as a floating white pill. A ghost's whole
   point is to borrow the surface it sits on.

   This out-of-layer rule beats every background UTILITY on a ghost button,
   whatever its state: the variant's own `hover:bg-control-hover` and
   `aria-expanded:bg-control-hover`, and the `bg-*` / `hover:bg-*` classes call
   sites pass, so ghost buttons show no hover background. Only `!important`
   utilities (`disabled:bg-control!`) and more specific out-of-layer rules
   (`.code-block-node-actions button:hover`, `.page-callout-icon-button:hover`)
   paint one.

   It stays here rather than in `buttonVariants` on purpose: moving it into a
   utility would revive those hover and call-site backgrounds (about thirty
   call sites, some through shared class constants), which is a design change
   to make deliberately, not as a side effect.

   Keyed on `data-variant` alone, not on the button's `data-slot`: a ghost
   wrapped in `TooltipTrigger asChild` (every sidebar button) carries the
   tooltip's `data-slot="tooltip-trigger"` instead. `button` bounds the rule
   to buttons — menu items and chips use their own data-variant values. */
button[data-variant="ghost"] {
  background-color: transparent;
}



/* ── Diff view of Pull Requests (MIN-66, MIN-181) ─────────────────────────────
   `@pierre/diffs` renders the diff in a Shadow DOM. Nothing is injected into it: the
   CUSTOM PROPERTIES cross the shadow border by inheritance, and
   the lib reads its ~50 `--diffs-*` variables into its `:host`. Ask ours
   here is enough to dress it - this is also why they live with the
   other tokens in the repository rather than in a JavaScript object.

   Warning: only variables that the lib does not DECLARE itself in its
   `:host` are inheritable (a declaration on the host takes precedence over what it
   comes from his parent). Hence the couple `--diffs-light-*` / `--diffs-dark-*`,
   which exists only to be supplied from the outside.

   Both halves of each pair carry the SAME value, and it is not a
   thoughtlessness: our tokens are already taken in the right theme (`.dark` the
   redefines), and the force component `color-scheme` according to the resolved theme of
   minddy. The branch that `light-dark()` chooses is therefore already the right one. */
.pr-diff-view {
  --minddy-diff-bg: var(--card);
  --diffs-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --diffs-font-size: 13px;
  --diffs-line-height: 20px;

  /* Background and text: those of the card which bears the diff, not a white/black one
     part — the diff is IN the file map. */
  --diffs-light-bg: var(--card);
  --diffs-dark-bg: var(--card);
  --diffs-light: var(--foreground);
  --diffs-dark: var(--foreground);

  /* Line numbers and unfolding bars: the gray of secondary texts and
     the neutral background of the rest of the app, so that the diff gutter reads
     like the other columns. The rest (background of the context lines, flat areas
     green/red, word-for-word highlighting) is DERIVED by the three-color lib
     below: we do not fix them one by one. */
  --diffs-fg-number-override: var(--muted-foreground);
  --diffs-bg-separator-override: var(--muted);

  /* Green added, red removed, blue mark for selection and “+” for
     comment. The first two are the already proven values ​​of sight
     from before: they keep their contrast placed on the background of the cards, in
     both themes. */
  --diffs-light-addition-color: rgb(35 178 62);
  --diffs-dark-addition-color: rgb(57 208 78);
  --diffs-light-deletion-color: rgb(255 65 55);
  --diffs-dark-deletion-color: rgb(255 71 62);
  --diffs-light-modified-color: var(--brand);
  --diffs-dark-modified-color: var(--brand);
}

/* A snippet of code placed IN a map rather than in the map of a file:
   the hunk of a review comment, in the activity feed. The block that
   door y is in `bg-background` — this is what detaches it from the review card
   around — and the diff must take this background, otherwise it goes there blank on
   gray. A variable, the rest comes from `.pr-diff-view`, which we carry with it. */
.pr-diff-view-inset {
  --minddy-diff-bg: var(--background);
  --diffs-light-bg: var(--background);
  --diffs-dark-bg: var(--background);
}

/* Checkerboard of the diff image panels: a transparent image must be seen
   AS transparent, not blending in with the background of the card. */
.pr-image-checker {
  --checker: color-mix(in oklch, var(--foreground) 7%, transparent);
  background-image:
    linear-gradient(45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  background-size: 10px 10px;
}

/* ── Shell surfaces ────────────────────────────────────────────────────────────
   Light-gray sidebars around a white content area and header. The AppShell
   root uses --background (white) and shows through the transparent <main>; the
   sidebar uses --sidebar while the header stays on bg-background. Cards/popovers
   stay white with the content surface. */
:root {
  --background: oklch(1 0 0);              /* content area — white */
  --sidebar: oklch(0.967 0.003 264);       /* chrome — light gray */
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --sidebar-border: oklch(0.912 0.008 264);
  --app-tab-background: color-mix(in oklab, var(--sidebar-accent) 55%, transparent);
  --app-tab-active-background: var(--background);

  /* The primitives fill their borderless controls with an opaque gray
     (--control oklch(0.935)) that reads heavy next to our white surfaces —
     inputs and outline buttons sat as dark chips on the page. Since the
     controls carry no border anymore, the fill must stay whisper-light to
     keep contrast with white: barely grayer than the sidebar, hover one
     clear step below. */
  --control: oklch(0.972 0.005 264);
  --control-hover: oklch(0.938 0.008 264);
}
/* Keep content slightly lighter than both sidebar levels, including floating
   navigation. The shared surface scale below also covers cards and popovers. */
.dark[data-app-shell] {
  --background: #0f0f0f;
  --sidebar: oklch(0.165 0.004 264);
}
.dark {
  --background: oklch(0.165 0.004 264);
  --sidebar: #0f0f0f;
  --card: #0f0f0f;
  --popover: #0f0f0f;
  --sidebar-border: oklch(0.27 0.006 264);

  /* Darken the neutral scale together, preserving the lightness differences
     that distinguish surfaces, selected items, and hover states. */
  --muted: oklch(0.236 0.005 264);
  --sidebar-accent: oklch(0.236 0.005 264);
  --secondary: oklch(0.249 0.005 264);
  --accent: oklch(0.257 0.005 264);
  /* Unfocused tabs sink toward the chrome surface so the active one stands
     out clearly in dark mode (55% left them almost tied with the selection). */
  --app-tab-background: color-mix(in oklab, var(--sidebar-accent) 30%, transparent);
  --app-tab-active-background: color-mix(in oklab, var(--sidebar-accent) 94%, white);

  /* Fields and neutral badges stay above the surface; hover adds another step.
     One notch lighter than 0.7 kept them: the borderless fill must stay clearly
     readable on the dark background, and hover must be felt. */
  --control: oklch(0.262 0.006 264);
  --control-hover: oklch(0.298 0.006 264);
}

/* ── Floating content pane (Linear-style shell, test) ────────────────────────
   The chrome — tab strip, sidebar, and the bands they leave at the bottom and
   on the right — fills the window with --sidebar and carries no borders: the
   shared surface makes it one continuous frame. The content column (header
   clearance + <main>, the AppShell's right child) floats over it as a
   rounded card, clear of the right and bottom window edges, flush against the
   top bar above and the sidebar on its left. Desktop only; in mobile layout the
   shell keeps its classic full-bleed layout and floating pill navigation.

   `--app-pane-radius` is the single source of the pane's corner rounding: the
   content column and every pane-mirror modal (scratchpad notebook, wizard,
   what's-new, skill preview, Numo/agent shells in expanded mode) read it, so
   they all follow the same curve.

   The radius is concentric with the header controls: a 32px pill (16px
   radius) inset by the header padding below (9px) curves along a 25px pane
   corner, so the gap between the two arcs stays the same all the way round.
   `--app-pane-radius` is the single source of the pane's corner rounding: the
   content column and every pane-mirror modal (scratchpad notebook, wizard,
   what's-new, skill preview, Numo/agent shells in expanded mode) read it, so
   they all follow the same curve. */
:root {
  /* 16px pill radius + the 9px header inset (`--app-content-header-pad-x`). */
  --app-pane-radius: 25px;
  /* Half the 50px header strip minus the 16px radius of a 32px pill: the App
     Content Header's side inset. It matches the pills' vertical centering
     margin, so the visible margin from the pane edge is the same 10px on the
     top and both sides, on every page. */
  --app-content-header-pad-x: calc(
    (var(--app-content-header-height) - 32px) / 2
  );
}

:root[data-app-layout="desktop"] {
  .app-shell {
    background: var(--sidebar);
  }

  .app-shell > div.flex.min-h-0.min-w-0.flex-1.flex-col {
    margin-right: 12px;
    /* The bottom band is deep enough to host the Numo chrome button. */
    margin-bottom: 36px;
    border-radius: var(--app-pane-radius);
    /* Real 1px border on the card itself: children are clipped to the padding
       box, so the line can't be repainted or anti-aliased away by the
       scrolling content. box-shadow/outline variants sat under the pane's
       painted children and visibly cropped in places. */
    background: var(--background);
    border: 1px solid var(--border);
  }

  /* Hidden navigation keeps the same gutter on both sides. The margin and
     the pane's width travel on the SAME shared chassis curve as the
     sidebar's own width and slide, so the whole shell resizes live as one
     block instead of snapping when the surface lands. The transition rides
     the lifecycle attribute synced onto the shell main and <body> by
     SidebarNavOverlay: a `:has()` anchored that high would attach
     descendant-watching invalidation sets to it and broaden every unrelated
     style change into a full-document recalculation. */
  .app-shell > div.flex.min-h-0.min-w-0.flex-1.flex-col {
    transition: margin-left 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .app-shell[data-sidebar-hidden="true"] > div.flex.min-h-0.min-w-0.flex-1.flex-col {
    margin-left: 12px;
  }

  /* Pane-mirroring modals (scratchpad notebook, project-creation wizard,
     what's-new, skill preview, reading full-screen, Numo/agent shells in
     expanded mode): modals that VISUALLY REPLACE the content pane — the exact
     same box (below the tab strip, over the sidebar width, clear of the
     right/bottom window bands), same radius and border. Everything under
     !important: the pane mirror must not lose a single rule to the dialog
     primitives' centering/size classes — and to the `!`-prefixed utilities on
     them. */
  .scratchpad-shell-dialog,
  .dialog-pane-mirror {
    position: fixed !important;
    inset: 44px 12px 36px 320px !important;
    /* The dialog primitive is centered with the INDIVIDUAL properties
       (`-translate-x/y-1/2` in Tailwind v4 = `translate`), and its open/close
       animation runs on scale — neither is reached by `transform: none`. */
    transform: none !important;
    translate: none !important;
    scale: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    /* !important on the radius too: the pane mirror must not lose a single
       rule to the dialog primitives' own classes (e.g. !rounded-2xl). */
    border-radius: var(--app-pane-radius) !important;
    border: 1px solid var(--border) !important;
    background: var(--background) !important;
    box-shadow: none !important;
    transition: left 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  body[data-sidebar-hidden="true"] .scratchpad-shell-dialog,
  body[data-sidebar-hidden="true"] .dialog-pane-mirror {
    left: 12px !important;
  }
}


/* Application tokens; the design tokens live in app/tokens.css. */
:root {
  --ticket-urgent: oklch(0.62 0.24 25);
}

/* ─── Scrollbars ─────────────────────── ───────────────────────

   That of the browser no longer appears ANYWHERE: everywhere a transparent rail
   and a thin, rounded thumb, which becomes tinted when hovered over it. Only one rule, on the
   universal selector, so that nothing escapes — a screen that keeps the bar
   gray of the system in the middle of an app which no longer has one is visible immediately.

   The thumb is painted in ALPHA, black in light and white in dark: it is placed
   both on a card and on the sidebar or the bottom of the content,
   without having to vary one tone per surface.

   A 10 px wide track for a comfortable pointer target, and a thumb
   which only occupies 4: the transparent border of 3 px thins it without
   shrink the area that can be caught (`background-clip: content-box`).

   PLEASE NOTE: styling a scrollbar causes it to lose its OVERLAY mode.
   On macOS, where it floated above the content without taking anything from it, it
   now reserves its 10 px as soon as there is something to scroll. This is the price of one
   bar that belongs to us; `no-scrollbar` (app/tokens.css) stays where we prefer
   have nothing at all, like the columns of the board.

   The thumb (`--scrollbar-thumb`, `--scrollbar-thumb-hover`) and the utility
   `scrollbar-quiet` come from app/tokens.css. What remains here is
   the only thing that the library leaves to the app: the decision to apply this
   bar on ALL surfaces, via the universal selector. */
@layer base {
  /* Standard (Firefox, Chrome 121+, Safari 18.2+). */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  /* WebKit/Blink, for versions that don't yet read the two above.
     In @layer base, so any utility covers them — that's what
     lets `no-scrollbar` and `scrollbar-quiet` take control again. */
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 9999px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  /* Chromium re-evaluates `:focus-visible` on every keydown — including bare
     modifier presses like Shift and Space on a mouse-focused element. The
     element then starts matching `:focus-visible` and the browser paints its
     default (blue) UA focus ring on anything that has no author outline rule:
     sidebar rows, plain links, and any other focusable surface. Every
     interactive component here defines its own focus-visible treatment
     (background tint, ring, or border), so the UA outline is only ever noise.
     Replace it with a transparent one — same trick as Tailwind v4's
     `outline-hidden`: invisible normally, still rendered in forced-colors
     mode. Declared in @layer base so utilities (`focus-visible:outline-ring`,
     `focus-visible:ring-*`) and hand-written rules keep winning. */
  :focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  /* The clear button of a search field (`type="search"`: settings searches,
     the emoji picker's search…) is drawn by WebKit as a blue glyph that
     matches nothing else in the app. Redraw it as the hugeicons `Cancel01`
     icon used by every other close control, in the field's text color. */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-inline-start: 0.375rem;
    cursor: pointer;
    background-color: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6.00081 17.9992M17.9992 18L6 6.00085' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6.00081 17.9992M17.9992 18L6 6.00085' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (hover: hover) and (pointer: fine) {
    input[type="search"]::-webkit-search-cancel-button:hover {
      opacity: 1;
    }
  }
}

/* Keyboard focus in every theme (WCAG 2.4.7, MIN-783). The base layer hides
   the UA outline, and many primitives declare `focus-visible:outline-none`
   with no replacement, so a keyboard user saw no focus at all. While Tab
   drives focus (`data-input-modality`, lib/keyboard-modality.ts) this draws
   the ring color around the focused control. Unlayered, it wins over those
   utilities; a click clears the attribute, so mouse use looks as before.

   Same exclusions as the high-contrast rule in app/theme-presets.css: menu
   rows and options show focus by their highlight, and containers that take
   focus when they open keep their edge. Text being edited shows its caret,
   script-only targets (`tabindex="-1"`, the skip link's `<main>`) are not
   controls, and the switch draws its own offset ring. */
html[data-input-modality="keyboard"] :focus-visible:not(
  [role^="menuitem"], [role="option"], [role="dialog"], [role="alertdialog"],
  [role="menu"], [role="listbox"], [data-slot$="-content"],
  .desktop-palette-surface, [contenteditable="true"], [tabindex="-1"],
  [role="switch"]
) {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
/* Rows in the sidebar's scrolling column, and tabs in a clipped tab list,
   would lose an outside ring to their container's `overflow`: draw it
   inside. */
html[data-input-modality="keyboard"] :is(.sidebar-nav-panel, [role="tablist"]) :focus-visible {
  outline-offset: -2px;
}

/* ─── Numo (assistant) ──────────────────────────────────────────────── */

/* Numo compact ⇄ expanded morph. The panel keeps right/bottom anchoring
   (top/left auto) in BOTH modes, so toggling between the compact widget size
   and the expanded modal size interpolates these properties from px to px:
   the surface grows AND slides toward center in one fluid motion. Declared in
   @layer utilities so it overrides SheetContent's base `transition` utility
   (which doesn't include width/height/inset). The open/close keyframes
   (animate-in/out on transform+opacity) are independent and unaffected. */
@layer utilities {
  [data-slot="sheet-content"].assistant-panel-morph {
    transition-property: width, height, right, bottom, border-radius;
    transition-duration: 280ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Both modes use numeric dimensions and the same right/bottom anchors. */
  :root[data-app-layout="desktop"] {
    [data-slot="sheet-content"].assistant-panel-expanded {
      top: auto !important;
      left: auto !important;
      right: 12px !important;
      bottom: 36px !important;
      width: calc(100vw - 332px) !important;
      height: calc(100dvh - 80px) !important;
      transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1),
        height 280ms cubic-bezier(0.16, 1, 0.3, 1),
        right 280ms cubic-bezier(0.16, 1, 0.3, 1),
        bottom 280ms cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body[data-sidebar-hidden="true"] [data-slot="sheet-content"].assistant-panel-expanded {
      left: auto !important;
      width: calc(100vw - 24px) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-slot="sheet-content"].assistant-panel-morph {
      transition: none !important;
    }
  }
  /* Shared panels stay at the viewport edges after removing the shell frame. */
  html .ultrawide-canvas [data-slot="side-panel-content"][data-side="right"] {
    right: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
  }
  html .ultrawide-canvas [data-slot="side-panel-content"][data-side="left"] {
    left: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
  }
}

/* Agent edging (AgentBeam) permanently mounted (`keepMounted`, e.g. dial it
   Numo): when at rest, its wrapper must be completely inert. BorderBeam poses a
   `overflow: hidden` — useful for the border, but it would then crop the halo of
   focus (ring-2) of the wrapped surface. It is only restored when switched on and
   during fade-out ([data-active] / [data-fading]).
   Excluding @layer and by specificity (0,3,0) to beat the non-layered `<style>`
   that BorderBeam injects — a Tailwind utility is in @layer and
   perdrait. */
[data-beam]:not([data-active]):not([data-fading]) {
  overflow: visible;
}

/* Streamdown Shiki fallback — !important overrides its generated inline styles. */
.dark .shiki,
.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* ── Shared code blocks (TipTap / lowlight) ───────────────────────────────
   Editable Page/notebook blocks and their read-only Markdown twin use the
   same lowlight tokens and palette. */
:root {
  --code-comment: #6e7781;
  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-constant: #0550ae;
  --code-title: #8250df;
  --code-attr: #0550ae;
  --code-tag: #116329;
}
.dark {
  --code-comment: #8b949e;
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-constant: #79c0ff;
  --code-title: #d2a8ff;
  --code-attr: #79c0ff;
  --code-tag: #7ee787;
}

.hljs-comment,
.hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-doctag,
.hljs-formula,
.hljs-meta .hljs-keyword {
  color: var(--code-keyword);
}
.hljs-string,
.hljs-regexp,
.hljs-addition {
  color: var(--code-string);
}
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: var(--code-constant);
}
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: var(--code-title);
}
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-class,
.hljs-built_in,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: var(--code-attr);
}
.hljs-tag {
  color: var(--code-tag);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 600;
}

/* The language badge of the static/fallback HTML representation: the
   extension mirrors the node's `language` attribute onto `data-language`, CSS
   does the rest. The live TipTap node view renders the same label in its
   header. */
.ProseMirror pre[data-language]:not([data-language=""]) {
  position: relative;
}
.ProseMirror pre[data-language]:not([data-language=""])::before {
  content: attr(data-language);
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  padding: 0.0625rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--muted) 72%, transparent);
  pointer-events: none;
}

/* Pages and Agent responses share this code-block surface. In TipTap, the code
   element remains the editable content DOM; the same surrounding chrome is
   reused with read-only highlighted content in an Agent conversation. */
.code-block-node-view {
  --code-block-background: #f6f8fa;
  --code-block-foreground: #1f2328;
  --code-block-muted: #59636e;
  --code-block-hover: rgb(31 35 40 / 8%);
  margin-block: 0.5rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--code-block-background);
  color: var(--code-block-foreground);
}
.dark .code-block-node-view {
  --code-block-background: #202020;
  --code-block-foreground: #f5f5f5;
  --code-block-muted: #a3a3a3;
  --code-block-hover: rgb(255 255 255 / 8%);
}
.code-block-node-view > .code-block-node-header {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  background: transparent;
  padding: 1rem 1rem 0.25rem;
}
.code-block-node-language {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--code-block-foreground);
  cursor: text;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: inherit;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-transform: lowercase;
}
.code-block-node-language-trigger,
.code-block-node-language-label {
  min-width: 0;
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: 0.375rem;
  padding: 0;
  color: var(--code-block-muted);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
}
.code-block-node-language-trigger[data-state="open"] {
  color: var(--code-block-foreground);
}
@media (hover: hover) and (pointer: fine) {
  .code-block-node-language-trigger:hover {
    color: var(--code-block-foreground);
  }
}
.code-block-node-language-label {
  display: flex;
  height: 2rem;
  max-width: 18rem;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-block-node-language-trigger > span {
  min-width: 0;
  max-width: 18rem;
}
.code-block-node-language:read-only {
  cursor: default;
}
.code-block-node-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 0.125rem;
}
.code-block-node-actions button {
  color: var(--code-block-muted);
}
.code-block-node-wrap[data-active="true"] {
  background: var(--code-block-hover);
  color: var(--code-block-foreground);
}
@media (hover: hover) and (pointer: fine) {
  .code-block-node-actions button:hover {
    background: var(--code-block-hover);
    color: var(--code-block-foreground);
  }
}
.code-block-node-copy {
  margin-left: auto;
}
.code-block-node-copy[data-copied="true"] {
  color: var(--primary);
}
@media (hover: hover) and (pointer: fine) {
  .code-block-node-copy:hover {
    background: var(--code-block-hover);
    color: var(--code-block-foreground);
  }
}
.code-block-node-view > pre {
  margin: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 1rem 1rem;
  color: var(--code-block-foreground);
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-size: inherit;
  font-variant-ligatures: none;
  line-height: 1.65;
}
.code-block-node-view[data-wrapped="true"] > pre {
  overflow-x: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.code-block-node-view[data-wrapped="false"] > pre {
  white-space: pre;
}
.code-block-node-view[data-overflowing="true"][data-expanded="false"] > pre {
  max-height: 26.25rem;
  overflow-y: hidden;
}
.code-block-node-view > pre > code {
  font-size: inherit;
}
.code-block-node-expand {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  padding: 0.25rem 1rem 1rem;
}
.code-block-node-expand > button {
  gap: 0.25rem;
  color: var(--code-block-muted);
  font-size: 0.75rem;
}

/* ─── Streamdown chrome trim (Numo assistant markdown) ───────────────────
   By default Streamdown wraps the code/table box inside a SECOND, sidebar-
   coloured frame (border + bg-sidebar + p-2) and adds a 1rem vertical margin,
   so blocks float in an oversized double-framed container. We flatten that
   redundant outer frame and tighten the margin; the inner code/table box (the
   part that already looks fine) is untouched, and header/copy-button heights
   are left intact so the floating actions stay aligned. */
.streamdown-compact :is(
    [data-streamdown="code-block"],
    [data-streamdown="table-wrapper"]
  ) {
  margin-block: 0.5rem;
  padding: 0;
  gap: 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The table's scroll area pads the (already bordered) table with a wide band —
   drop it so the table fills the width instead of sitting inside empty space. */
.streamdown-compact
  [data-streamdown="table-wrapper"]
  div:has(> [data-streamdown="table"]) {
  padding: 0;
}

/* ─── Read-only data tables (MIN-947) ────────────────────────────────────
   The run history, Markdown tables in comments and pull request bodies, and
   the tables in Numo's answers look like a page database's table view
   (components/pages/page-database-view.tsx): no frame, a quiet header with a
   hairline under it, 40px rows split by faint lines, body columns split by
   fainter ones. `.data-table` carries the look for the tables we render;
   Streamdown owns the markup of Numo's tables, so they are matched by their
   `data-streamdown` attributes, including the fullscreen view it portals out
   of the message. Overriding Streamdown's `table` component instead would
   drop its copy, download and fullscreen controls. */
div:has(> [data-streamdown="table"]) {
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(.data-table, [data-streamdown="table"]) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
  text-align: left;

  /* Streamdown separates its sections and rows with `divide-y` borders. */
  & > :is(thead, tbody),
  & > :is(thead, tbody) > tr {
    border: 0;
    background: transparent;
  }

  & th,
  & td {
    padding: 0.625rem 0.5rem;
    font-size: inherit;
    line-height: 1.25rem;
  }

  & th {
    border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
    color: var(--muted-foreground);
    font-weight: 400;
    white-space: nowrap;
  }

  & td {
    border-bottom: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
  }

  & td + td {
    border-left: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
  }
}

/* Rows that open something take the database row's hover tint. They keep the
   app's default arrow (MIN-587) over the whole row, text included, so the
   cursor never alternates between cells and the button in the first one. */
.data-table-interactive > tbody > tr {
  cursor: default;
  transition: background-color 120ms ease-out;

  &:focus-within {
    background: color-mix(in oklab, var(--muted) 20%, transparent);
  }
}

/* The hover tint needs a fine pointer: after a tap it would stay stuck. */
@media (hover: hover) and (pointer: fine) {
  .data-table-interactive > tbody > tr:hover {
    background: color-mix(in oklab, var(--muted) 20%, transparent);
  }
}

/* The fixed mobile bar owns its geometry. Keep the shell's reserve aligned
   with its 48px buttons and safe-area anchor, plus a small content gutter. */
:root {
  /* Three rem of buttons plus the safe bottom anchor. */
  --mobile-nav-height: calc(3rem + max(1rem, env(safe-area-inset-bottom)));
  /* What we keep free under the content: the pill and a trickle of air. */
  --mobile-nav-clearance: calc(var(--mobile-nav-height) + 0.75rem);
}

/* Reserve the actual navigation height whenever the mobile layout is active. */
:root[data-app-layout="mobile"] {
  .app-shell main {
    padding-bottom: var(--mobile-nav-clearance);
  }

  /* An ANCHORED footer (consisting of pull request, agent session) is
     now poses just above the pill - therefore IN the gradient of 8 rem
     which it projects to melt what passes beneath. A field does not have
     to fade, and its send button even less: this class takes it out.
     41 and not 50: above the bar (z-40), below the modals and menus. */
  .dock-above-nav {
    position: relative;
    z-index: 41;
  }
}

/* ─── Security zones: what `viewport-fit=cover` reveals ─────────
   Exporting `viewport` from the root layout (app/layout.tsx) renders the page with full bleed,
   which finally gives a value to the `env(safe-area-inset-*)` already written in the
   deposit. The counterpart is immediate: what touched an edge of the screen
   Now touch the notch or the home indicator bar. The centered dialogs take
   the insets off their own cap (components/ui/dialog.tsx, alert-dialog.tsx);
   the shell and the sheets are handled here.

   `display: standalone` in app/manifest.json: minddy is installing. This is where
   the TOP inset exists — in a Safari tab, the URL bar already occupies the
   place and the inset is 0. These rules therefore do not change anything in the browser, and
   all to the installed app. The lateral insets wake up in landscape.

   The shell first. It is in `h-dvh` (so full screen with full bleed) with a
   header `sticky top-0`: without these margins, the breadcrumbs go under the hour
   and the battery. `box-sizing: border-box` is global at Tailwind, so this
   padding is taken WITHIN 100 dvh instead of overflowing. Nothing for the bottom: the
   <main> already reserves `--mobile-nav-clearance`, which contains the inset. */
.app-shell {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* The drawers are GLUED to their edge — `inset-y-0 h-full` on the left and
   right, `bottom-0` at the bottom — so nothing separates them from anything. A
   padding, not a margin: the drawer's background runs to the edge, only its
   content moves back.

   These rules stay out of components/ui/sheet.tsx on purpose. They must beat a
   call site's `p-0` (an out-of-layer rule does, a utility would not), and lose
   to the mobile sheet rules below that set their own bottom padding (an
   `!important` utility would win there). No class expresses both. */
[data-slot="sheet-content"][data-side="bottom"] {
  padding-bottom: env(safe-area-inset-bottom);
}
[data-slot="sheet-content"][data-side="top"] {
  padding-top: env(safe-area-inset-top);
}
[data-slot="sheet-content"]:is([data-side="left"], [data-side="right"]) {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
[data-slot="sheet-content"][data-side="left"] {
  padding-left: env(safe-area-inset-left);
}
[data-slot="sheet-content"][data-side="right"] {
  padding-right: env(safe-area-inset-right);
}

/* ─── Finger (MIN-284) ─────────────────────────────────────────────────────
   The touch targets, press feedback and tap delay of the primitives live in
   the primitives themselves (components/ui/touch-target.ts). What remains here
   is page-wide: the tap highlight, and the zoom-on-focus guard of hand-written
   fields. */
@layer base {
  /* The gray halo that WebKit and Chrome Android paints over anything you type.
     It arrives late, overflows the border radius, and has nothing left to say
     now that a press has its own feedback (components/ui/touch-target.ts). */
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (pointer: coarse) {
  /* Zoom to focus. iOS zooms into ANY field whose font is
     under 16 px — and it does not zoom out when exiting: the page remains crooked,
     the user must pinch to return. The primitives handle it (their fields
     are in `text-base md:text-sm`, therefore 16 px on mobile), but the fields
     handwritten on the product, they are in `text-sm` — the title of a cycle,
     the title of a brief, the times of the date picker.

     One rule rather than three fixes: it also applies to the next one
     handwritten field, which will otherwise start again. We ONLY aim for what is
     enters — a checkbox or slider has no text, and a button
     `<input type="submit">` does not have to grow.

     Editable hosts count too (MIN-841): iOS zooms into ANY focused element
     under 16 px, not only form fields. The home “Ask Numo” composer
     (components/assistant/chat-input.tsx) and the compact rich editor of
     descriptions and comments are `contenteditable` hosts in `text-sm`, so
     the page zoomed although every `<input>` was already at 16 px. The size
     goes on the host only: the mention chips inside it are
     `contenteditable="false"`, and headings and code keep their own sizes.

     Every editor host takes it, editable or not, and so does the plain-text
     fallback shown while the editor loads (MIN-935). An issue's description
     and plan open as a read-only preview, then as the live editor once its
     session attaches (which stays read-only until then): scoped to editable
     hosts only, the text painted at 14 px and grew to 16 px a moment later,
     like a late load. A clipped excerpt in a mention preview card is not
     read or written there, so it keeps the compact size. */
  .ProseMirror:not([data-compact-excerpt] *),
  [data-editor-fallback]:not([data-compact-excerpt] *),
  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="color"],
      [type="button"],
      [type="submit"],
      [type="reset"],
      [type="file"],
      [type="image"]
    ),
  /* Title fields are larger than the floor: it would only shrink them. */
  textarea:not(.title-field),
  select,
  [contenteditable]:not([contenteditable="false"], .title-field) {
    font-size: 16px;
  }
}

/* The shell sets a lifecycle attribute on the document. A root :has() selector
   would make inserting any menu or dialog recheck the full workspace subtree.
   Disable app boundary bounce at the viewport and on each scrolling axis.
   The document scope also covers menus and dialogs portaled outside the shell.
   Extend overflow utilities so responsive variants and library components share
   the policy. Do not apply it to every element: an overflow-hidden wrapper or
   the unused axis of a horizontal table would trap normal parent scrolling.
   Public pages retain their browser behavior. */
html[data-app-shell] {
  --app-overscroll: none;
  overscroll-behavior: none;
}

/* Hover lands at once and only its exit fades. With the usual 150 ms
   `transition-colors`, gliding from one control to its neighbour (the
   notebook gutter's `+` and handle, a toolbar, a row of icons) faded the first
   out while the second faded in: for a few frames neither was lit, which read
   as a flicker. The transition in force is the one of the NEW state, so a
   zero duration under `:hover` makes the entry instant and leaves the exit
   animated. Unlayered on purpose, to win over the `transition-*` utilities;
   app only, so the marketing pages keep their hover animations. */
@media (hover: hover) and (pointer: fine) {
  html[data-app-shell] :is(button, a, [role="button"], [role="tab"], summary):hover {
    transition-duration: 0s;
  }
}

html[data-app-shell] body,
html[data-app-shell] textarea {
  overscroll-behavior: none;
}

/* A title typed in an auto-growing textarea (page, ticket, objective,
   feedback, creation dialogs). Descenders (p, g, y) hang below a tight line
   box: left as overflow they made the field scrollable with the wheel, and
   clipped they lost their tails. The vertical padding holds them inside the
   field, so `overflow: hidden` clips nothing and still forbids scrolling; the
   matching negative margin keeps the title where it was. The caret helpers
   and the live-caret overlay mirror the padding. */
@utility title-field {
  overflow: hidden;
  padding-block: 0.15em;
  margin-block: -0.15em;
}

@utility overflow-auto {
  &:where(html[data-app-shell] *) {
    overscroll-behavior: none !important;
  }
}
@utility overflow-scroll {
  &:where(html[data-app-shell] *) {
    overscroll-behavior: none !important;
  }
}
@utility overflow-x-auto {
  &:where(html[data-app-shell] *) {
    overscroll-behavior-x: none !important;
  }
}
@utility overflow-x-scroll {
  &:where(html[data-app-shell] *) {
    overscroll-behavior-x: none !important;
  }
}
@utility overflow-y-auto {
  &:where(html[data-app-shell] *) {
    overscroll-behavior-y: none !important;
  }
}
@utility overflow-y-scroll {
  &:where(html[data-app-shell] *) {
    overscroll-behavior-y: none !important;
  }
}

/* Mobile full-screen search sheet: the <CommandList> primitive ships a default
   max-height (max-h-72 ≈ 288px) sized for the desktop popover. In the full-
   screen sheet that squishes the command palette into the top third with a big
   empty void below — most options end up hidden behind a scroll, so it reads as
   "incomplete". The sheet's list is the flex-1 one (the desktop pill uses a
   separate raw cmdk list), so lift the cap there and let flex fill the sheet. */
[cmdk-list].flex-1 {
  max-height: none !important;
}

/* Issue pickers (MIN-718): matches by meaning are force-mounted rows, which
   cmdk's own count ignores — its "No results" line would sit right above a
   result. The semantic group carries a marker; while it is there, the empty
   line goes. */
[cmdk-list]:has([data-semantic-group]) [cmdk-empty] {
  display: none;
}

/* ─── Selection of chat bubble text (agent + Numo) ────────
   Two rules prevent selection: the global reset `user-select: none` of
   app/tokens.css, AND — above all — Streamdown (markdown rendering of the wizard) which poses
   `style="user-select:none"` INLINE on its content. An inline style beats all
   non-`!important` CSS rule (no matter how specific), hence the `!important` here:
   this is the only way to re-authorize the selection on the bubbles `.chat-selectable`
   and their descendants. We keep the general reset intact everywhere else.
   `.comment-selectable` is the same exception for the comments of every
   activity (issues, objectives, feedback, triage, pages, pull request
   reviews, the public board): their text is read and quoted, by readers too.
   `.content-selectable` extends it to the other text people write and read
   rather than click: a feedback request and its original submission, a
   published page's title, a file or skill opened for reading, the agent's
   reasoning, earlier versions of a pull request comment. */
.chat-selectable,
.chat-selectable
  *:not(input):not(textarea):not([contenteditable="true"]):not(pre):not(code),
.comment-selectable,
.comment-selectable
  *:not(input):not(textarea):not([contenteditable="true"]):not(pre):not(code),
.content-selectable,
.content-selectable
  *:not(input):not(textarea):not([contenteditable="true"]):not(pre):not(code) {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Public articles override the design system reset, including nested text. */
.documentation-selectable,
.documentation-selectable *:not(button):not(button *):not(input):not(textarea) {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Every diff surface is selectable, including PR files, review hunks, commit
   sheets, and agent-side diffs. The renderer receives the same override inside
   its shadow root because the app/tokens.css reset otherwise crosses the host. */
.diff-selectable,
.diff-selectable *:not(button):not(input):not(textarea) {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Embedded diff chrome remains ordinary UI. This opt-out deliberately follows
   the selectable rule so badges and future controls do not inherit its forced
   text cursor while the surrounding source code stays copyable. */
.diff-selectable [data-diff-nonselectable],
.diff-selectable [data-diff-nonselectable] * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ─── Scratchpad (Notes) — always editable WYSIWYG surface ──────────────
   Check boxes (TaskList/TaskItem) and the “copy section” button
   (ProseMirror decoration placed on each title) do not have a style provided by
   the extensions: we dress them here, scoped at `.scratchpad-editor`. */
.scratchpad-editor .ProseMirror {
  outline: none;
  /* Above the section-highlight box (placed behind, z-index: 0) — the text remains
     readable over the tint. */
  position: relative;
  z-index: 1;
}

/* Tinted block placed BEHIND the section hovered over via the “copy the” button
   section » (components/scratchpad/section-copy-extension.ts) — identifie
   exactly what will be copied. */
.scratchpad-editor .scratchpad-section-box {
  position: absolute;
  left: -0.5rem;
  right: -0.5rem;
  z-index: 0;
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--muted) 65%, transparent);
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.scratchpad-editor .scratchpad-section-box.is-visible {
  opacity: 1;
}

/* Stylish tooltip of the “copy section” button (replaces the native title) —
   same skin as <TooltipContent> of components/ui/tooltip.tsx (dark bubble + arrow). */
.scratchpad-editor .scratchpad-section-tip {
  position: absolute;
  z-index: 60;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--foreground);
  color: var(--background);
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.scratchpad-editor .scratchpad-section-tip.is-visible {
  opacity: 1;
}
.scratchpad-editor .scratchpad-section-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--foreground);
}

/* Placeholder placed by the Placeholder extension on the current empty line
   (is-empty) and on the empty document (is-editor-empty) — one index per line. */
.scratchpad-editor .ProseMirror .is-empty::before,
.scratchpad-editor .ProseMirror .is-editor-empty::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--muted-foreground);
  opacity: 0.5;
}

/* The checkbox, the crossed out line and the menu ⋯ are rendered by the NodeView
   React (components/scratchpad/scratchpad-task.tsx) en classes Tailwind — ici,
   just resetting the list and indenting the subtasks. */
.scratchpad-editor .ProseMirror ul[data-type="taskList"] {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}
.scratchpad-editor .ProseMirror ul[data-type="taskList"] li[data-type="taskItem"] {
  margin: 0.125rem 0;
}
/* The paragraph of a task otherwise inherits the `[&_p]:my-2` from the editor, which
   shifts the text down and unaligns the box + the ⋯. */
.scratchpad-editor .ProseMirror li[data-type="taskItem"] p {
  margin: 0;
}
.scratchpad-editor
  .ProseMirror
  ul[data-type="taskList"]
  ul[data-type="taskList"] {
  margin: 0.125rem 0;
  padding-left: 1.5rem;
}

.scratchpad-editor .ProseMirror :is(h1, h2, h3) {
  position: relative;
}
.scratchpad-editor .ProseMirror .scratchpad-section-copy {
  position: absolute;
  top: 0.15rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--background) 80%, transparent);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
  cursor: default;
}
.scratchpad-editor .ProseMirror .scratchpad-section-copy:focus-visible {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .scratchpad-editor .ProseMirror :is(h1, h2, h3):hover .scratchpad-section-copy {
    opacity: 1;
  }
  .scratchpad-editor .ProseMirror .scratchpad-section-copy:hover {
    color: var(--foreground);
  }
}
/* Nothing hovers a heading on touch: the copy button is always there. */
@media (hover: none), (pointer: coarse) {
  .scratchpad-editor .ProseMirror .scratchpad-section-copy {
    opacity: 1;
  }
}

/* ─── Landing: hero entrance and scroll appearances ───────────────────
   Everything is pure CSS: the sections of the landing are Server Components
   and must remain so. The only JavaScript is one IntersectionObserver per block
   (components/marketing/reveal.tsx) which sets `data-revealed` — no library
   animation does not enter the public site bundle.

   Common curve: cubic-bezier(0.16, 1, 0.3, 1) — a very “ease-out”
   pronounced that starts quickly and stops smoothly. This is what makes a
   appearance is noticeable without making the visitor wait for it. */

/* ─── Hero: load-time cascade, no JS ─────────────────────────────────────
   Above the fold, so played on display and not on
   scroll: the hero is already visible when the page arrives, an observer
   would only add hydration latency.

   Non-cosmetic detail of the keyframe: the title starts from `opacity: 0.1`, NOT 0.
   Chrome excludes elements with zero opacity from the LCP calculation and would push back
   therefore the LCP at the END of the word-for-word shift. A floor at 0.1 combined with blur
   remains imperceptible to the eye but keeps the <h1> eligible from the first
   frame. The secondary elements (not the LCP) start from 0. */
@keyframes hero-word-in {
  from {
    opacity: 0.1;
    filter: blur(8px);
    transform: translateY(0.32em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-word {
  display: inline-block;
  animation: hero-word-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--hero-i, 0) * 0.06s);
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Cascade which extends the word for word of the title: the next line starts before
   until the previous one is placed, otherwise the whole thing is lying around. */
.hero-reveal {
  animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--hero-d, 0) * 1s);
}

/* The capture of the hero is the second LCP candidate (the first as soon as a real
   image replaces the template): it therefore starts from the same opacity floor as
   the title, otherwise his delay in the cascade would become the LCP score. */
@keyframes hero-fade-up-media {
  from {
    opacity: 0.1;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-reveal-media {
  animation-name: hero-fade-up-media;
}

/* ─── Blocs qui apparaissent au scroll (<Reveal>, <RevealGroup>) ─────────
   Without JS and in server rendering, nothing is hidden: `.reveal-ready` is not set
   only during editing, so the landing remains entirely readable if the script does not
   don't leave. `[data-revealed]` is set by the observer on the first pass.

   FILLING `backwards`, NOT `both` — here as in the hero. An animation
   in `both` retains its arrival state: the landing thus kept 114 elements
   (including 51 title words) under `filter: blur(0px)` once the scroll has passed.
   `blur(0)` is not `none`: each filtered element remains a layer that the
   browser rasterizes separately, and a change of zoom redoes them all at once
   suddenly — hence the collapse in fluidity when zooming after scrolling.

   Removing `filter` from the last keyframe IS NOT ENOUGH: the browser generates
   then an implicit keyframe from the base value, and interpolation to
   `none` calcule justement `blur(0px)`, que `both` fige. Il faut donc que
   the animation DROPS the element at the end. `backwards` only fills the deadline
   waiting; the final state is carried by the base style (`opacity: 1`), which
   does not declare any filter. */
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal.reveal-ready {
  opacity: 0;
}
.reveal.reveal-ready[data-revealed="true"] {
  opacity: 1;
  animation: reveal-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--reveal-d, 0) * 1s);
}

/* Group: only one observe for the container, direct children enter
   cascade. The offset lives in `--reveal-i` set by nth-child, which avoids
   to wrap each map of a grid in its own client component (and
   therefore to add a <div> which would break the grid). */
.reveal-group.reveal-ready > * {
  opacity: 0;
}
.reveal-group.reveal-ready[data-revealed="true"] > * {
  opacity: 1;
  animation: reveal-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(
    var(--reveal-d, 0) * 1s + var(--reveal-i, 0) * var(--reveal-step, 0.09s)
  );
}
.reveal-group > *:nth-child(2) { --reveal-i: 1; }
.reveal-group > *:nth-child(3) { --reveal-i: 2; }
.reveal-group > *:nth-child(4) { --reveal-i: 3; }
.reveal-group > *:nth-child(5) { --reveal-i: 4; }
.reveal-group > *:nth-child(6) { --reveal-i: 5; }
/* Beyond six, the offset is capped: a long list must not
   end up waiting a second after the first element. */
.reveal-group > *:nth-child(n + 7) { --reveal-i: 6; }

/* ─── Landing figure scenes (components/marketing/figures/story.tsx) ───
   The active scene's progress bar. Its duration and play state are set
   inline: it pauses with the figure's clock when the figure leaves the screen. */
@keyframes story-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.story-progress {
  animation-name: story-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .story-progress {
    animation: none;
  }
}

/* ─── Section titles, verbatim (<RevealHeading>) ─────────────────────
   Same principle: observe on the title, the offset per word in CSS via
   `--reveal-i` placed inline. The readable text is carried by aria-label, the
   cutout in <span> is hidden from screen readers. */
.reveal-word {
  display: inline-block;
}
.reveal-heading.reveal-ready .reveal-word {
  opacity: 0;
}
.reveal-heading.reveal-ready[data-revealed="true"] .reveal-word {
  opacity: 1;
  animation: reveal-word-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 0.05s));
}
@keyframes reveal-word-in {
  from {
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Animate the inner wrapper: Radix disables outer transitions while measuring.
   Force-mounted answers stay in server HTML, including when collapsed. */
.faq-accordion [data-slot="accordion-content"] > div {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows 280ms ease, opacity 200ms ease, visibility 280ms;
}

.faq-accordion [data-slot="accordion-content"][data-state="open"] > div {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq-accordion [data-slot="accordion-trigger-icon"] {
  transition: transform 280ms ease;
}

.faq-accordion [data-slot="accordion-trigger-icon"]:last-child {
  display: none;
}

.faq-accordion [aria-expanded="true"] [data-slot="accordion-trigger-icon"]:first-of-type {
  display: block;
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion [data-slot="accordion-content"] > div,
  .faq-accordion [data-slot="accordion-trigger-icon"] {
    transition: none;
  }
  .app-shell > div.flex.min-h-0.min-w-0.flex-1.flex-col {
    transition: none;
  }
}

/* ─── Settings section opened from ⌘K ──────────────────────────────
   The palette takes you to the right page AND the right tab, but a tab of
   settings is a column of cards that look similar: getting there doesn't say
   again WHICH we came to look for. The ring names it for the duration of a glance,
   puis `components/settings-shell.tsx` retire l'attribut.

   `box-shadow` rather than `outline`: it follows the radius of the card and fades
   in a single property, and it does not push anything — the column does not move one
   pixel for two seconds.

   No `fill-mode`: the arrival image is already transparent, and a shadow
   frozen would remain a layer composed for nothing. */
@keyframes settings-section-focus {
  0% {
    box-shadow:
      0 0 0 2px var(--ring),
      0 0 0 7px color-mix(in oklab, var(--ring) 22%, transparent);
  }
  55% {
    box-shadow:
      0 0 0 2px var(--ring),
      0 0 0 7px color-mix(in oklab, var(--ring) 22%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 2px transparent,
      0 0 0 7px transparent;
  }
}
[data-settings-focus] {
  animation: settings-section-focus 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* “Less animation”: we don’t shorten it, we remove it. A duration almost
   null would still let the `both` fill apply the blur for
   the delay of each word — so a vague title until it starts. */
@media (prefers-reduced-motion: reduce) {
  .hero-word,
  .hero-reveal,
  .reveal.reveal-ready,
  .reveal.reveal-ready[data-revealed="true"],
  .reveal-group.reveal-ready > *,
  .reveal-group.reveal-ready[data-revealed="true"] > *,
  .reveal-heading.reveal-ready .reveal-word {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
  /* The ring REMAINS: it does not decorate, it designates. We take away his
     fading — the shell erases it after the same two seconds. */
  [data-settings-focus] {
    animation: none;
    box-shadow:
      0 0 0 2px var(--ring),
      0 0 0 7px color-mix(in oklab, var(--ring) 22%, transparent);
  }
}

/* ─── Text and background colors of pages (MIN-268) ────────────────────
   The document ONLY stores the name of the color (cf.
   components/pages/blocks/color.ts): here, and only here, is a name
   becomes a value — therefore a value per theme, and a change of theme
   which recolors the page without rewriting it.

   The ten source shades are those of the category labels
   (`CATEGORY_COLORS`, lib/category-colors.ts): minddy only has one palette.
   `lib/pages-color.test.ts` fails if the two diverge — it's the only link
   between a TS file and a style sheet, it cannot be typed.

   In dark, you don't put down a second palette: you lighten the first
   with the same gesture (`color-mix` towards white), to find the contrast that
   full tones lose on a black background. */
:root {
  --page-ink-red: #ef4444;
  --page-ink-orange: #f97316;
  --page-ink-amber: #eab308;
  --page-ink-green: #22c55e;
  --page-ink-teal: #14b8a6;
  --page-ink-blue: #3b82f6;
  --page-ink-indigo: #6366f1;
  --page-ink-violet: #a855f7;
  --page-ink-pink: #ec4899;
  --page-ink-gray: #6b7280;

  --page-color-red: var(--page-ink-red);
  --page-color-orange: var(--page-ink-orange);
  --page-color-amber: color-mix(in oklab, var(--page-ink-amber) 82%, black);
  --page-color-green: color-mix(in oklab, var(--page-ink-green) 88%, black);
  --page-color-teal: color-mix(in oklab, var(--page-ink-teal) 88%, black);
  --page-color-blue: var(--page-ink-blue);
  --page-color-indigo: var(--page-ink-indigo);
  --page-color-violet: var(--page-ink-violet);
  --page-color-pink: var(--page-ink-pink);
  --page-color-gray: var(--page-ink-gray);
}

.dark {
  --page-color-red: color-mix(in oklab, var(--page-ink-red) 72%, white);
  --page-color-orange: color-mix(in oklab, var(--page-ink-orange) 78%, white);
  --page-color-amber: color-mix(in oklab, var(--page-ink-amber) 82%, white);
  --page-color-green: color-mix(in oklab, var(--page-ink-green) 80%, white);
  --page-color-teal: color-mix(in oklab, var(--page-ink-teal) 80%, white);
  --page-color-blue: color-mix(in oklab, var(--page-ink-blue) 70%, white);
  --page-color-indigo: color-mix(in oklab, var(--page-ink-indigo) 68%, white);
  --page-color-violet: color-mix(in oklab, var(--page-ink-violet) 72%, white);
  --page-color-pink: color-mix(in oklab, var(--page-ink-pink) 74%, white);
  --page-color-gray: color-mix(in oklab, var(--page-ink-gray) 60%, white);
}

[data-page-text="red"] { color: var(--page-color-red); }
[data-page-text="orange"] { color: var(--page-color-orange); }
[data-page-text="amber"] { color: var(--page-color-amber); }
[data-page-text="green"] { color: var(--page-color-green); }
[data-page-text="teal"] { color: var(--page-color-teal); }
[data-page-text="blue"] { color: var(--page-color-blue); }
[data-page-text="indigo"] { color: var(--page-color-indigo); }
[data-page-text="violet"] { color: var(--page-color-violet); }
[data-page-text="pink"] { color: var(--page-color-pink); }
[data-page-text="gray"] { color: var(--page-color-gray); }

[data-page-back="red"] { --page-tint: var(--page-color-red); }
[data-page-back="orange"] { --page-tint: var(--page-color-orange); }
[data-page-back="amber"] { --page-tint: var(--page-color-amber); }
[data-page-back="green"] { --page-tint: var(--page-color-green); }
[data-page-back="teal"] { --page-tint: var(--page-color-teal); }
[data-page-back="blue"] { --page-tint: var(--page-color-blue); }
[data-page-back="indigo"] { --page-tint: var(--page-color-indigo); }
[data-page-back="violet"] { --page-tint: var(--page-color-violet); }
[data-page-back="pink"] { --page-tint: var(--page-color-pink); }
[data-page-back="gray"] { --page-tint: var(--page-color-gray); }

/* A background, not a highlighter: a very diluted shade, a radius, and
   `box-decoration-break` so that a passage that runs on two lines keeps its
   rounded corners on BOTH ends rather than in the middle. */
[data-page-back] {
  background-color: color-mix(in oklab, var(--page-tint) 16%, transparent);
  border-radius: 0.25rem;
  padding: 0.08em 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.dark [data-page-back] {
  background-color: color-mix(in oklab, var(--page-tint) 24%, transparent);
}

/* In a code block a chosen text color overrides the syntax highlighting: a
   highlight span inside the color mark takes the mark's color (a mark inside
   a highlight span colors itself). "Default" sets no mark, so the
   highlighting stays; a background keeps the token colors. */
pre [data-page-text] [class*="hljs-"] {
  color: inherit;
}

/* Equations (components/pages/blocks/math.ts). KaTeX sets no color, so an
   equation takes the text color of its theme; its error red is the app's
   destructive token. A display equation wider than the column scrolls inside
   its block instead of overflowing the page. */
.page-math {
  border-radius: 0.375rem;
}
.page-math-inline {
  padding: 0 0.125rem;
}
.page-math-block {
  margin: 0.5rem 0;
}
.page-math-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0;
}
.page-math-scroll .katex-display,
.page-math-preview .katex-display {
  margin: 0;
}
.page-math.is-empty {
  color: var(--muted-foreground);
  font-size: 0.875em;
}
.page-math-block.is-empty {
  padding: 0.5rem 0.75rem;
  background-color: var(--control);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .ProseMirror[contenteditable="true"] .page-math:hover:not(.ProseMirror-selectednode, .is-inline-selected) {
    background-color: var(--control);
  }
}
.page-math .katex-error,
.page-math-preview .katex-error {
  color: var(--destructive) !important;
}

/* A callout carries a palette name, never a fixed color. The same document is
   therefore legible in both themes, and the editor, published page, history,
   and print view all render the same semantic `<aside>`. */
[data-page-callout-color="red"] { --page-callout-tone: var(--page-color-red); }
[data-page-callout-color="orange"] { --page-callout-tone: var(--page-color-orange); }
[data-page-callout-color="amber"] { --page-callout-tone: var(--page-color-amber); }
[data-page-callout-color="green"] { --page-callout-tone: var(--page-color-green); }
[data-page-callout-color="teal"] { --page-callout-tone: var(--page-color-teal); }
[data-page-callout-color="blue"] { --page-callout-tone: var(--page-color-blue); }
[data-page-callout-color="indigo"] { --page-callout-tone: var(--page-color-indigo); }
[data-page-callout-color="violet"] { --page-callout-tone: var(--page-color-violet); }
[data-page-callout-color="pink"] { --page-callout-tone: var(--page-color-pink); }
[data-page-callout-color="gray"] { --page-callout-tone: var(--page-color-gray); }

.page-editor [data-type="callout"] {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem;
  margin-block: 0.75rem;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background-color: color-mix(in oklab, var(--page-callout-tone) 12%, transparent);
}

.dark .page-editor [data-type="callout"] {
  background-color: color-mix(in oklab, var(--page-callout-tone) 20%, transparent);
}

.page-editor .page-callout-icon {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--page-callout-icon-offset, 0px));
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 1.375rem;
  line-height: 1;
}

.page-editor .page-callout-icon-button {
  cursor: default;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .page-editor .page-callout-icon-button:hover {
    background-color: color-mix(in oklab, var(--page-callout-tone) 16%, transparent);
  }
}

.page-editor .page-callout-icon-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.page-editor .page-callout-content:only-child {
  grid-column: 1 / -1;
}

.page-editor .page-callout-content > :first-child {
  margin-top: 0;
}

.page-editor .page-callout-content > :last-child {
  margin-bottom: 0;
}

/* The paragraph of a task otherwise inherits the `[&_p]:my-2` of the body of the page, this
   which pushes the TEXT down and leaves the checkbox alone in
   high. The notebook has the same rule, for the same reason. */
.page-editor .ProseMirror li[data-type="taskItem"] p {
  margin: 0;
}

/* Find and replace (components/editor/find-bar.tsx): every match takes a
   light tint of the accent behind text that keeps its own color, like the
   text selection; the current one a stronger tint and an accent outline, so
   it stands out by shape as well as by color. A black or white accent gives
   gray tints, still told apart by the outline. */
.page-editor .ProseMirror .ProseMirror-search-match,
.page-editor .ProseMirror .ProseMirror-active-search-match {
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-color: color-mix(in oklab, var(--primary) 22%, transparent);
}
.page-editor .ProseMirror .ProseMirror-active-search-match {
  background-color: color-mix(in oklab, var(--primary) 42%, transparent);
  box-shadow: 0 0 0 1px var(--primary);
}
@media (forced-colors: active) {
  .page-editor .ProseMirror .ProseMirror-search-match,
  .page-editor .ProseMirror .ProseMirror-active-search-match {
    background-color: Mark;
    color: MarkText;
  }
  .page-editor .ProseMirror .ProseMirror-active-search-match {
    outline: 2px solid Highlight;
  }
}

/* ─── The GUTTER flies over ITSELF ───────────────────────────────────
   The chrome of a block (the handle and the `+`) appears when hovering over the block, and
   not when hovering over the empty strip to your left — even though that's THERE we're going
   look for the handle. The gesture learned elsewhere is however: aim for the margin,
   the buttons appear. So it was necessary to cross the column of text
   first, then go back.

   The cause is in a nutshell: the extension listens to the `mousemove` of the VIEW
   ProseMirror (`handleDOMEvents`), and the gutter is outside of this
   box — no event is born there. However, she already knows what to do with a
   pointer outside the column: it folds the coordinates into the content before
   look for the block (`clampToContent`), so hover at the height of a block but
   to the left of him clearly indicates this block.

   It is therefore enough for the view box to ARRIVE there. A padding to
   left extends it under the gutter; the exact opposite negative margin
   put the text back where it was. Nothing moves on the screen, and the empty tape is
   now part of the listening surface.

   The two values ​​are the RESERVE column (`GUTTER_HOVER`,
   components/pages/block-actions.ts), not the width of the buttons: these do not
   hold only the 66 px stuck to the text, but the gutter that we see — and
   that we aim for — is the entire margin. The first version stopped at
   buttons, and left 42 dead px at the left edge, where the mouse arrives
   when it comes from the sidebar. Not a pixel more either: beyond that, the
   box would come out of the column.

   In mobile layout, the column is only 24px indented: the extended box would overflow
   of the container that passes by. And there's no hovering on a touchscreen. */
/* The gutter's handle and `+` fade in and out as the pointer moves from block
   to block. The extension toggles an inline `visibility`; the transition on
   it holds the buttons visible while their opacity falls, so the fade-out
   plays too. */
.page-editor .drag-handle {
  transition: opacity 120ms ease-out, visibility 120ms ease-out;
}
.page-editor .drag-handle[style*="visibility: hidden"] {
  opacity: 0;
}
/* A block dragged by its handle (components/pages/block-drag.ts): the grab
   cursor everywhere for the whole gesture, a translucent copy of the blocks
   under the pointer, and a line where they will land. */
html.block-dragging,
html.block-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}
/* The selection rectangle drawn from beside a page's text
   (components/editor/block-marquee.ts), the board's one. It sits above
   dialogs, since the task notebook is one, like the dragged blocks' copy.
   While a rectangle is drawn, here or on a board, the cursor stays the
   default arrow: neither the text cursor of the margin nor a card's hand. */
html.marquee-drawing,
html.marquee-drawing * {
  cursor: default !important;
}
.block-marquee {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  border: 1px solid color-mix(in oklab, var(--primary) 70%, transparent);
  border-radius: 3px;
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  pointer-events: none;
}
.block-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  max-height: 14rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--background);
  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));
  opacity: 0.6;
  pointer-events: none;
}
.block-drag-line {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  height: 2px;
  border-radius: 1px;
  background: var(--primary);
  pointer-events: none;
}

/* Outside its hover zone (the left margin and the left 70% of the text,
   components/pages/block-gutter.tsx) the gutter stays hidden even while the
   extension tracks a block: the right part belongs to the comment button. */
.page-editor[data-hover-zone]:not([data-hover-zone="gutter"]) .drag-handle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .page-editor .drag-handle { transition: none; }
}

:root[data-app-layout="desktop"] {
  .page-editor[data-gutter] .ProseMirror {
    padding-left: 96px;
    margin-left: -96px;
  }
  /* The right reserve of a page column (`app-desktop:pr-10`), where the
     hovered block's comment button sits. */
  .page-editor[data-comment-gutter] .ProseMirror {
    padding-right: 40px;
    margin-right: -40px;
  }
}

/* The comment button on the right of a hovered page block fades with the
   gutter, and is placed by script in the drag handle's wrapper — which
   ignores the pointer, so the button takes it back, as the handle does. */
.page-editor [data-block-comment-button] {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  transition: opacity 120ms ease-out, visibility 120ms ease-out;
}
.page-editor [data-block-comment-button][data-shown="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-editor [data-block-comment-button] { transition: none; }
}
/* While the comment button is hovered, its block wears the block-selection
   box (the "Selection boxes" rules below), so the button names its block. */
.page-editor [data-block-comment-preview] {
  position: absolute;
  /* Sized to the block by script; the box reaches past it as a selected
     block's does. */
  box-sizing: content-box;
  padding: var(--block-selection-y) var(--block-selection-x);
  translate: calc(-1 * var(--block-selection-x)) calc(-1 * var(--block-selection-y));
  border-radius: var(--block-selection-radius);
  background-color: var(--selection-block);
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
.page-editor [data-block-comment-preview][data-shown="false"] {
  opacity: 0;
}

/* ─── The disclosure block (MIN-270) ─────────────────────────────────────
   TipTap renders the outer details node as a div with an empty fallback
   button, while the summary remains a native `<summary>`. The custom chevron
   supplies the control, so the browser's native summary marker must be removed;
   otherwise both indicators occupy the same left edge.

   The layout follows Notion: a chevron in the margin, a medium-weight summary
   beside it, and the content aligned below the summary. */
.page-editor [data-type="details"] {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: start;
  column-gap: 0.25rem;
  margin: 0.5rem 0;
}

/* The button lives in the first column, the rest of the block in the second. */
.page-editor .page-details-toggle {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  /* The height of a line of text: the chevron centers on the summary, not
     on the top of the block. */
  height: 1.75rem;
  border-radius: 0.25rem;
  color: var(--muted-foreground);
  cursor: default;
  transition: background-color 0.12s, transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .page-editor .page-details-toggle:hover {
    background-color: var(--muted);
    color: var(--foreground);
  }
}
.page-editor .page-details-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}
.page-editor [data-type="details"].is-open > .page-details-toggle {
  transform: rotate(90deg);
}

.page-editor [data-type="details"] > div:not(.page-details-toggle) {
  grid-column: 2;
  min-width: 0;
}
.page-editor .page-details-summary {
  display: block;
  list-style: none;
  font-weight: 500;
  line-height: 1.75rem;
}
.page-editor .page-details-summary::-webkit-details-marker {
  display: none;
}
/* The folded body is hidden by the `hidden` attribute that the node view sets;
   unfolded, it breathes a little under its summary. */
.page-editor [data-type="detailsContent"] > :first-child {
  margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-editor .page-details-toggle {
    transition: none;
  }
}

/* The placeholder of an empty block (MIN-270). The plugin
   (components/pages/block-placeholder.ts) sets `data-placeholder` and class
   `is-empty` on the cursor block — it doesn't paint anything itself. The notebook has its
   twin ruler a few hundred lines higher; the two surfaces are
   scoped separately so that the typography of one does not overflow
   l'autre. */
.page-editor .is-empty::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
  color: var(--muted-foreground);
  opacity: 0.5;
}

.page-editor .is-empty {
  position: relative;
}

/* A one-line field (the comment composers) grows to hold a placeholder that
   wraps — on a phone, its 16px text often does — instead of clipping its
   second line under the field's edge. The placeholder becomes a float whose
   negative margin cancels its width: the caret's line still starts at the
   left over its first line, and the `flow-root` paragraph includes the
   float's height. Paragraphs only, since `flow-root` on a list item would
   drop its marker. */
.placeholder-grows .page-editor p.is-empty {
  display: flow-root;
}
.placeholder-grows .page-editor p.is-empty::before {
  position: static;
  float: left;
  width: 100%;
  margin-right: -100%;
}

/* ─── The blink of a block (MIN-270) ───────────────────────────────────
   Two surfaces use it, and for the same reason: after scrolling,
   nothing distinguishes the block we REQUESTED from its neighbors arriving on the screen
   at the same time. The anchor of a link “copy block link” turns it on
   opening the page; the table of contents turns it on when clicked.

   It's a BLINK, not a selection: it erases itself, otherwise we
   would believe the highlighted block for real, and it overflows text
   (`box-shadow`) to designate the entire block, not its words.

   The color does NOT come from --primary, and that's what was missing: under
   the Noir / Blanc presets --primary is INK — almost black in light, almost
   white in dark — and any accent preset can recolor it. An 18% ink
   background is a pale gray which, while scrolling, cannot be seen passing; the blink was there and did not
   meant nothing. It needs a shade of ATTENTION, which neither resembles the
   text nor to a selection: the blue of the block color register, diluted
   enough to remain soft, and already available in both themes.

   A PULSE rather than a solid background: two beats are better than a solid,
   because it is CHANGE that the eye catches — especially when the
   scroll just moved the whole page under it.

   Under `prefers-reduced-motion`, we do not reduce the duration to zero (this is
   which made the old version invisible to those who checked the box): we
   remove the beat and HOLD the bottom. It's `flashBlock`
   (components/pages/block-actions.ts) which sets the class and removes it. */
/* A COMMENTED block (MIN-282) — “there is a discussion here” — in the
   comments' yellow (the palette's amber). Placed by a ProseMirror decoration
   (components/pages/block-comments.ts), not by a mark: it is not content, it
   reaches neither the database nor the Markdown projection. The block keeps
   its neighbors' layout, and the gutter its place: its badge in the right
   margin and its passages say it. */
.page-block-commented {
  position: relative;
  /* The tint behind a commented passage, and the badge's ink. */
  --page-comment-accent: var(--page-ink-amber);
  --page-comment-ink: var(--page-color-amber);
}

/* A frozen excerpt is underlined and tinted only while the same text still
   exists in the commented block. Like the badge, this is an editor
   decoration rather than document content. */
.page-commented-passage {
  text-decoration-line: underline;
  text-decoration-color: var(--page-comment-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  /* One unbroken line, drawn over the descenders of y, g or q. */
  text-decoration-skip-ink: none;
  border-radius: 0.2em;
  background-color: color-mix(in oklab, var(--page-comment-accent) 26%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The BADGE of a commented block: the new-comment button's twin
   (components/pages/block-gutter.tsx) — the same button, at the same place,
   with the message count in its corner — and it stays while the pointer is
   elsewhere. Out of flow, in the RIGHT margin, so a commented block keeps
   exactly its neighbors' layout; components/pages/block-comments.ts places
   it, as the gutter places the new-comment button. */
.page-block-comment-host {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  user-select: none;
}

.page-block-comment-badge {
  color: var(--page-comment-ink);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .page-block-comment-badge:hover {
    color: var(--page-comment-ink);
    background-color: color-mix(in oklab, var(--page-comment-accent) 18%, transparent);
  }
}

.page-block-comment-count {
  position: absolute;
  top: -0.25rem;
  right: -0.3125rem;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.1875rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 0.875rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--background);
  background-color: var(--page-comment-ink);
}

/* Below the width where the right margin exists, the pad returns INTO the stream,
   at the end of the block: better a shift of one line than a button that comes out of
   the screen and you can no longer click. */
@media (max-width: 48rem) {
  .page-block-comment-host {
    position: static;
    display: inline-block;
    margin-left: 0.375rem;
    vertical-align: middle;
  }
}

/* Where a dragged file will land (components/editor/file-drop.ts): a gap
   between two top-level blocks. The widget has no height, so nothing below it
   moves while the file is dragged; the line is painted over the gap. */
.editor-file-drop-line {
  position: relative;
  height: 0;
  pointer-events: none;
}
.editor-file-drop-line::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--ring);
}

.page-block-target,
.inbox-row-target {
  position: relative;
  border-radius: 0.375rem;
  animation: page-block-pulse 1.6s ease-in-out;
}

@keyframes page-block-pulse {
  0%,
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 6px transparent;
  }
  12%,
  62% {
    background-color: color-mix(in oklab, var(--page-color-blue) 26%, transparent);
    box-shadow: 0 0 0 6px
      color-mix(in oklab, var(--page-color-blue) 26%, transparent);
  }
  37% {
    background-color: color-mix(in oklab, var(--page-color-blue) 9%, transparent);
    box-shadow: 0 0 0 6px
      color-mix(in oklab, var(--page-color-blue) 9%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-block-target,
  .inbox-row-target {
    animation: none;
    background-color: color-mix(in oklab, var(--page-color-blue) 26%, transparent);
    box-shadow: 0 0 0 6px
      color-mix(in oklab, var(--page-color-blue) 26%, transparent);
  }
}

/* ── PRINTING a document (MIN-283) ─────────────────────────────────────────
   The PDF of a page is what the browser prints: no PDF engine
   server, so no second definition of the layout to hold. What he
   you have to give it, it’s the document ONLY — without the application chrome or
   that of the public page.

   Masking goes through `visibility` and not through `display: none`: a
   `display: none` on the ancestors would take the document with them, and a
   container in `position: fixed` would only print on the first sheet.
   `visibility` leaves the flow intact, so the pagination too.

   `data-print-mode` is set by the print view (page-print-view.tsx);
   on a published page there is no chrome to hide and a plain ⌘P
   is enough — hence the unconditional rules that follow. */
@media print {
  html[data-print-mode] body * {
    visibility: hidden;
  }
  html[data-print-mode] [data-print-root],
  html[data-print-mode] [data-print-root] * {
    visibility: visible;
  }
  html[data-print-mode] [data-print-root] {
    position: absolute;
    inset-inline: 0;
    top: 0;
    max-width: none;
    padding: 0;
  }

  /* A link remains readable; its address is not printed — a document
     riddled with URLs in parentheses is unreadable, and minddy's are not
     lead nowhere for whoever receives the PDF. */
  a {
    text-decoration: none;
    color: inherit;
  }

  /* No background or shadow: the ink costs, and a block of code on a gray background comes out
     dirty solid color on most printers. */
  body {
    background: #fff;
  }
}

/* ── Desktop app: where the window moves ─────────────────────────────
   MIN-291. The shell hides the native title bar (`hiddenInset`) so that
   minddy does not have a gray band above its own header. In exchange,
   macOS no longer knows where to enter the window: `-webkit-app-region` is a
   CSS property, so the answer can only come from here. Without these rules, the
   window does not move AT ALL.

   The attribute is set to <html> by components/desktop-chrome.tsx, only
   when the bridge exists. In a browser, nothing in this block applies. */

/* ── THE GAND, AND SHE’S THE ONLY ONE ───────────────────── ─────────────────────
   MIN-292. The socket lived in the shell header and in the mark line of
   the sidebar — that is to say in the two pieces of furniture that half of the
   screens do not have. An audit found SIX without any sockets, and the window there
   was strictly still:

     zen mode (it removes the header AND the bar), legal pages readable in
     the app, public board `/f/`, published page `/p/`, shared view `/share/`,
     and `not-found`.

   Searching for the screens one by one to add a strip to them means signing for
   start again at the next one. Hence the inversion: **a single strip, in the layout
   root, on everything the window displays.**

   Its 44 px height matches the native application bar. Authenticated desktop
   layouts disable this fallback while their own bar provides the drag region.

   It starts from `top: 0`: the traffic lights are drawn by macOS
   ABOVE the web view and it is the system that serves them, not the page. */

.desktop-drag-band {
  display: none;
}
html[data-desktop-platform="darwin"] .desktop-drag-band {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  height: 44px;
  /* Under the veils of dialogue (50): a strip that would move the window
     over an open modal would be a hold where the app says "reply
     d'abord ». */
  z-index: 30;
  -webkit-app-region: drag;
}

/* ⚠ **A `drag` zone SWALLOWS the event**, including what is drawn
   over: regions are rectangles sent to the system, resolved
   before the page sees anything. Without this global exception, everything
   what clicks in the first 44 pixels of any screen
   would become a window handle — the palette, the “New” button, the
   tabs of a board, the link of a legal page.

   Global, therefore, and not scoped to the band: `no-drag` on an element which is not
   in any region `drag` does nothing at all. The cost is zero, and the scope
   is what makes the rule true without having to know WHO is at the top of the screen.

   It is written AFTER the tape, and the order of the document matters as much as
   that of the sheet: Chromium traverses the layout tree and a
   `no-drag` digs the `drag` encountered before it. This is why the band is
   rendered before `{children}` in app/layout.tsx. */
html[data-desktop-platform="darwin"]
  :is(
    a,
    button,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="combobox"],
    [role="tab"],
    [role="option"],
    [role="checkbox"],
    [role="switch"],
    [contenteditable="true"],
    [tabindex]
  ) {
  -webkit-app-region: no-drag;
}

/* Content-pane headers remain a window handle on macOS. Declaring the drag
   region on the header itself lets its interactive descendants reliably carve
   out clickable no-drag areas while every empty part still moves the window. */
html[data-desktop-platform="darwin"] .app-content-header {
  -webkit-app-region: drag;
}

/* A recalled navigation panel overlaps content headers. Chromium's native
   draggable-region hit testing can otherwise keep the covered header active,
   making the sidebar rows under that band visible but unclickable. */
html[data-desktop-app] .sidebar-nav-panel {
  -webkit-app-region: no-drag;
}

/* The no-drag above is not enough, though: regions are collected in layout
   order and the content header sits AFTER this panel in the DOM (the sidebar
   renders before the pane's children), so a `no-drag` only digs `drag` rects
   met earlier. Over the overlap the header's `drag` rect wins, and with the
   sidebar hidden the header spans the whole window — the panel's top strip
   (search, filter, new) stays visible but inert on macOS. While the floating
   panel is actually shown, the header therefore gives up its window handle;
   the app top bar and the rest of the chrome keep dragging the window. */
html[data-desktop-platform="darwin"] body[data-sidebar-floating="true"]
  .app-content-header {
  -webkit-app-region: no-drag;
}

html[data-desktop-platform="darwin"] .app-content-header
  :is(
    a,
    button,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="combobox"],
    [role="tab"],
    [role="option"],
    [role="checkbox"],
    [role="switch"],
    [contenteditable="true"],
    [tabindex]
  ) {
  -webkit-app-region: no-drag;
}

/* The secondary sidebar is teleported into the shell gutter. His line
   of title is therefore not in the same subtree as the fixed band of
   displacement, which otherwise covers it with its z-index. Place it above
   this strip allows the Search, Filter and Add buttons to receive
   their events; interactive descendants explicitly remain out
   of the travel area. */
html[data-desktop-platform="darwin"] .secondary-sidebar-header {
  position: relative;
  z-index: 31;
  -webkit-app-region: drag;
}

html[data-desktop-platform="darwin"] .secondary-sidebar-header
  :is(
    a,
    button,
    input,
    select,
    textarea,
    label,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="combobox"],
    [role="tab"],
    [role="option"],
    [role="checkbox"],
    [role="switch"],
    [contenteditable="true"],
    [tabindex]
  ) {
  -webkit-app-region: no-drag;
}

/* ⚠ **The SAILS are dug, too** (MIN-308).

   The digging above only targets FOCUSABLE elements. Radix content
   carries `tabindex="-1"`, it is therefore taken; but the sails, no — they don’t
   only carry a `data-slot`, and the one on the palette comes from its own package
   and wore nothing at all. But “click next to close” is a click ON
   the veil: in the first 44 pixels, it fell into the band, macOS
   swallowed it, and the window began to slide under the cursor instead of the
   dialog closes. Deterministic, a hundred times out of a hundred, and only above
   44 px.

   Assumed counterpart: sail open, the strip no longer moves the window.
   This is the same choice as that already made for the band itself (`z-index: 30`,
   under sail at 50) — a catch where the app says “answer first”. */
html[data-desktop-platform="darwin"]
  :is(
    [data-slot="dialog-overlay"],
    [data-slot="alert-dialog-overlay"],
    [data-slot="sheet-overlay"],
    [data-slot="side-panel-overlay"],
    [data-slot="drawer-overlay"],
    .desktop-palette-overlay
  ) {
  -webkit-app-region: no-drag;
}

/* The sidebar inset now contains creation actions beneath the application bar. */
.sidebar-brand-row { -webkit-app-region: no-drag; }

/* ─── Toasts (sonner) — Geist-style solid status pills ──────────────────────
   Repaints every typed toast as a self-contained colored pill with white
   icon + text, after Vercel's Geist design system: blue for informational,
   blue for confirmations, orange for warning, red for error — instantly
   scannable instead of the previous neutral card look shared by all types.

   HOW: sonner gates its per-type colors behind `richColors` and injects its
   stylesheet into <head> at RUNTIME, i.e. potentially AFTER this sheet. Its
   type rules ([data-rich-colors]…) and its base rule both sit at
   specificity (0,2,0), so equal-specificity overrides here would race the
   injection order and lose. These selectors add enough specificity and set
   the final properties directly, so they win regardless of order — and
   `richColors` stays off, nothing else about sonner changes.

   Bare `toast(...)` calls (data-type="default") use the same blue pill as
   informational toasts: the app has no semantic success state for these
   generic confirmations.

   One palette for both themes: the pill carries its own foreground, so it
   interacts with neither page. Retune here, everything follows.
   Reference for design handoff:
     info    #0070F3 · success #0070F3 · warning #DC5A00 · error #EE0000 */
:root {
  --toast-info: #0070f3;
  --toast-success: #0070f3;
  --toast-warning: #dc5a00;
  --toast-error: #ee0000;
}

/* Corner radius: sonner ships 8px via `--border-radius` on the toaster
   (runtime-injected at (0,1,0)); `[data-y-position]` is always present and
   lifts the override to (0,2,0), so it wins regardless of injection order. */
[data-sonner-toaster][data-y-position] {
  --border-radius: 14px;
}

[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"] {
  padding-right: 48px;
  border-radius: 14px;
}

/* Keep the dismiss control inside the toast at the right edge. */
[data-sonner-toaster][data-y-position]
  [data-sonner-toast][data-styled="true"]
  [data-close-button] {
  position: absolute;
  top: 50%;
  right: 12px;
  left: auto;
  width: 24px;
  height: 24px;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  [data-sonner-toaster][data-y-position]
    [data-sonner-toast][data-styled="true"]
    [data-close-button]:hover {
    background: rgb(255 255 255 / 16%);
  }
}

[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"]:not([data-type]),
[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"][data-type="default"] {
  background: var(--toast-info);
  border-color: var(--toast-info);
  color: #fff;
}

[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"][data-type="info"] {
  background: var(--toast-info);
  border-color: var(--toast-info);
  color: #fff;
}

[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"][data-type="success"] {
  background: var(--toast-success);
  border-color: var(--toast-success);
  color: #fff;
}

[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"][data-type="warning"] {
  background: var(--toast-warning);
  border-color: var(--toast-warning);
  color: #fff;
}

[data-sonner-toaster]
  [data-sonner-toast][data-styled="true"][data-type="error"] {
  background: var(--toast-error);
  border-color: var(--toast-error);
  color: #fff;
}

/* The portal lands in the pane, outside <main>, so scrolling never moves it.
   Sidebar resizing and the ultrawide canvas resize this containing block. */
.app-shell > div.flex.min-h-0.min-w-0.flex-1.flex-col {
  position: relative;
}

.content-toaster[data-sonner-toaster][data-x-position="center"] {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 1rem;
  width: calc(100% - 2rem);
  max-width: 26rem;
  transform: translateX(-50%);
  /* Keep action feedback readable above elevated dialogs and menus. */
  z-index: 1200;
}

.content-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
  left: 50%;
  right: auto;
  translate: -50% 0;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 40px 6px 12px;
  gap: 8px;
  border-radius: 9999px;
}

.content-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-content] {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.content-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-title],
.content-toaster[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-description] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 20px;
  color: inherit;
}

.content-toaster[data-sonner-toaster] [data-icon],
.content-toaster[data-sonner-toaster] [data-button] {
  flex-shrink: 0;
}

:root[data-app-layout="mobile"] {
  .content-toaster[data-sonner-toaster][data-x-position="center"] {
    bottom: calc(var(--mobile-nav-clearance) + 1rem);
  }
}

/* The full-width application bar and lower workspace share one viewport. */
.app-workspace > .app-shell {
  height: auto;
  min-height: 0;
  flex: 1;
  max-height: none;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0;
}
.app-workspace { padding-top: env(safe-area-inset-top); }
.app-titlebar-safe-area { height: 44px; }
/* The workspace fills the viewport at every screen size. */
html:not([data-desktop-app]) .ultrawide-canvas {
  display: block;
  padding: 0;
}
html:not([data-desktop-app]) .app-workspace {
  width: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root[data-app-layout="desktop"] {
  .app-top-bar { display: flex; }
  &[data-desktop-app][data-app-top-bar] .desktop-drag-band { display: none; }
}
html[data-desktop-app] .app-top-bar,
html[data-desktop-app] .app-content-header { -webkit-app-region: drag; }
html[data-desktop-app] :is(button, a, input, textarea, select, [role="tab"], [role="tablist"], [role="menu"], [role="menuitem"], [role="tooltip"], [role="dialog"], [contenteditable="true"], [tabindex]) {
  -webkit-app-region: no-drag;
}
html[data-integrated-caption-controls]:not([data-desktop-platform="darwin"]) .app-titlebar-safe-area {
  margin-left: env(titlebar-area-x, 0px);
  width: env(titlebar-area-width, 100%);
  flex: none;
}
html[data-integrated-caption-controls]:not([data-app-top-bar]) .desktop-drag-band {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  height: 44px;
  z-index: 30;
  -webkit-app-region: drag;
}
:root[data-app-layout="mobile"] {
  &[data-integrated-caption-controls]:not([data-desktop-platform="darwin"]) .app-workspace::before {
    content: "";
    display: block;
    height: 44px;
    flex-shrink: 0;
    -webkit-app-region: drag;
  }
}
/* ── Desktop window material (MIN-810) ─────────────────────────────────────
   In the desktop app on macOS and Windows 11, the window is transparent and
   the system paints a blurred view of the desktop behind it
   (`lib/desktop/window-material.ts`). The chrome around the content pane
   (tab strip, sidebar, the right and bottom bands, the Windows caption area)
   lets it through; the floating content pane keeps its opaque background.

   `--sidebar` becomes transparent inside the workspace only, so every
   `bg-sidebar` surface of the chrome clears at once without stacking veils.
   A single veil on <body> — painted on the canvas — keeps the chrome's tint
   and its text contrast on a very light or very dark wallpaper; the native
   material follows the page theme (`nativeTheme.themeSource`), so the veil
   never fights it. A navigation panel floating over the pane stays opaque.

   The desktop layout and the app shell only: auth pages, public pages and
   the narrow mobile shell keep their opaque full-bleed surface. High-contrast
   palettes, forced colors and reduced transparency keep the opaque window
   too, whatever the device setting says. */
@media not ((forced-colors: active) or (prefers-reduced-transparency: reduce)) {
  html[data-desktop-material][data-app-shell][data-app-layout="desktop"]:is(
    :not(.dark):not([data-theme-light="high-contrast-light"]),
    .dark:not([data-theme-dark="high-contrast-dark"])
  ) {
    --desktop-sidebar-solid: var(--sidebar);
    /* The light material is itself near white, like light sidebars: the same
       veil as in dark mode would hide it. Dark mode needs more veil to keep
       the blur from reading as see-through. */
    --desktop-material-veil: 35%;
    &.dark {
      --desktop-material-veil: 70%;
    }

    & body {
      background: color-mix(in oklab, var(--desktop-sidebar-solid) var(--desktop-material-veil), transparent);
    }
    & .app-workspace {
      --sidebar: transparent;
    }
    /* A solid light-gray highlight vanishes on a light wallpaper behind the
       veil. A light tint of the text color darkens whatever lies behind it by
       the same step, so hovered rows keep their contrast on any desktop.
       Dark mode already reads well against its denser veil. */
    &:not(.dark) .app-workspace {
      --sidebar-accent: color-mix(in oklab, var(--foreground) 6%, transparent);
      /* The selected tab and the selected sidebar row read alike: the opaque
         page white, set apart by the firmer tint of the unselected tabs.
         No edge or lift around them: over the window material it drew a
         dark outline that plain chrome never shows. */
      --app-tab-background: color-mix(in oklab, var(--foreground) 7%, transparent);
    }
    /* The selected sidebar row wears the selected tab's own color, in both
       themes, so the chrome shows one selection. */
    & .app-workspace .sidebar-row-active {
      background-color: var(--app-tab-active-background);
    }
    /* One hover for every control of the transparent chrome (tabs, the new
       tab and window buttons, sidebar rows, Numo, the notebook): a share of
       the selection's color, so hovering reads short of selecting yet stays
       visible on the material. It replaces their own hover fills and the
       tabs' brightness filter. A tab's own inner controls, a composite
       row's (the row hovers), a control nested in another (which would double the
       fill), a selected control and a filled button keep theirs. */
    & .app-workspace {
      --desktop-chrome-hover: color-mix(in oklab, var(--app-tab-active-background) 55%, transparent);
      /* The sidebar's command band, filter, usage and what's-new controls
         hover through an important utility (`hover:!bg-sidebar-accent`),
         which a layered rule wins over any unlayered one: the token itself
         takes the hover color in the chrome. */
      & :is(.app-top-bar, aside[data-sidebar-navigation]) {
        --sidebar-accent: var(--desktop-chrome-hover);
      }
      /* Pointer hovers only: a touch screen keeps no hover state. */
      @media (hover: hover) and (pointer: fine) {
        & .app-tab:not([data-active]):hover {
          background-color: var(--desktop-chrome-hover);
          filter: none;
        }
        & :is(.app-top-bar, aside[data-sidebar-navigation]) :is(button, a, [role="button"]):not(.app-tab *):not([data-sidebar-row] *):not(:is(button, a, [role="button"]) *):not(.sidebar-row-active):not([data-variant="default"]):not(:disabled):hover {
          background-color: var(--desktop-chrome-hover) !important;
        }
        /* A row of several controls (a page with its chevron and actions, a
           project group header, a Numo conversation) hovers as one line, not
           its link alone (SIDEBAR_COMPOSITE_ROW_HOVER_CLASS). */
        & [data-sidebar-row]:not(.sidebar-row-active):hover {
          background-color: var(--desktop-chrome-hover);
        }
      }
      & [data-sidebar-row]:not(.sidebar-row-active):focus-within {
        background-color: var(--desktop-chrome-hover);
      }
    }
    & .sidebar-nav-panel[data-floating="true"] {
      background: var(--desktop-sidebar-solid);
    }
    /* Menus opened from the chrome sit over the transparent window: their
       backdrop blur has no page behind it to frost, so the desktop showed
       through as is. Their translucent share is composited over the solid
       chrome color instead. Glass turned off keeps its plain --popover. */
    &:not([data-transparency="off"]) :is(
      [data-slot="popover-content"],
      [data-slot="dropdown-menu-content"],
      [data-slot="dropdown-menu-sub-content"],
      [data-slot="select-content"],
      [data-floating-surface],
      [role="menu"]
    ) {
      background-color: color-mix(in oklab, var(--popover) 84%, var(--desktop-sidebar-solid));
    }
  }
}

.app-update-slot button { max-width: 100%; }
@media print {
  .app-top-bar { display: none !important; }
}

/* The running sheen on a masked logo: a provider's during an AI review, and
   minddy's own on the post-sign-in redirect screen. */
.review-logo-shimmer {
  background-image: linear-gradient(90deg, currentColor 35%, var(--muted-foreground) 50%, currentColor 65%);
  background-size: 300% 100%;
  animation: text-shimmer 1.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .review-logo-shimmer { animation: none; }
}

/* vaul's bottom drawers (<Dialog> and <SidePanel> below 480px) sit above the
   software keyboard like every other sheet. vaul's own `repositionInputs`
   measured the keyboard as `innerHeight - visualViewport.height`, which iOS
   Safari now reports as 0, so it is off and the drawers read the same
   tokens as the sheets below (MIN-870). */
[data-vaul-drawer][data-vaul-drawer-direction="bottom"] {
  bottom: var(--mobile-keyboard-room, 0px);
  max-height: min(92dvh, var(--mobile-sheet-room, 92dvh));
}

/* Mobile sheets share one breakpoint and viewport budget. Wide data surfaces
   (boards, tables, code and diffs) retain their own intentional scroll areas.

   The budget is three tokens, so every sheet below sizes itself the same way
   whether it is glued to the bottom edge or floats above it:
   - `--mobile-sheet-float`, the gap between the sheet and the bottom edge;
   - `--mobile-sheet-room`, the height left to a sheet under the notch, once
     that gap is taken;
   - `--mobile-sheet-safe-bottom`, the inset a sheet's own padding must clear.
     A glued sheet runs under the home indicator, so its content steps back;
     a floating one already sits above it.

   The software keyboard is two more, the only ones a surface reads to make
   room for it (MIN-870). lib/use-mobile-layout.ts publishes the keyboard,
   components/editor/mobile-editor-toolbar.tsx the strip it adds on top:
   - `--mobile-keyboard-room`, what the keyboard and that strip cover at the
     bottom: the `bottom` of anything anchored there;
   - `--mobile-visible-height`, the height they leave: the cap of anything
     that measures the screen. */
:root[data-app-layout="mobile"] {
  --mobile-keyboard-duration: 380ms;
  --mobile-keyboard-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  @media (prefers-reduced-motion: reduce) {
    --mobile-keyboard-duration: 0ms;
  }
  /* The editor's strip only counts above an open keyboard: a strip left
     behind by a keyboard Safari closed must not hold the sheets up. */
  --mobile-keyboard-strip: 0px;
  --mobile-keyboard-room: calc(var(--mobile-keyboard-inset, 0px) + var(--mobile-keyboard-strip));
  --mobile-visible-height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-keyboard-strip));
  --mobile-sheet-float: 0px;
  --mobile-sheet-safe-bottom: env(safe-area-inset-bottom);
  /* A sheet's own bottom padding: clear of the home indicator, and tight
     above an open keyboard, where the field typed in sits right on it. */
  --mobile-sheet-bottom: max(1rem, var(--mobile-sheet-safe-bottom));
  --mobile-sheet-room: calc(var(--mobile-visible-height) - max(1rem, env(safe-area-inset-top)) - var(--mobile-sheet-float));
}
/* The keyboard covers the home indicator: nothing steps back from it. */
:root[data-app-layout="mobile"][data-mobile-keyboard] {
  --mobile-sheet-safe-bottom: 0px;
  --mobile-sheet-bottom: 0.5rem;
  --mobile-keyboard-strip: var(--mobile-editor-toolbar, 0px);
}
/* No keyboard, no keyboard strip: the editor keeps the focus when Safari
   closes the keyboard some ways, and the strip stayed on screen alone. */
:root[data-app-layout="mobile"]:not([data-mobile-keyboard]) [data-mobile-editor-toolbar] {
  display: none;
}
/* The strip appears with the keyboard: from under the screen's edge, so it
   rises with the keys instead of waiting for them at its place. `!important`
   beats its inline `bottom` for that first frame only. */
@starting-style {
  :root[data-app-layout="mobile"] [data-mobile-editor-toolbar] {
    bottom: -64px !important;
  }
}

:root[data-app-layout="mobile"] {
  .app-workspace, .app-shell main, #app-tab-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .mobile-bottom-sheet[data-slot="sheet-content"],
  .mobile-assistant-sheet[data-slot="sheet-content"],
  [data-slot="alert-dialog-content"] {
    inset: auto 0 calc(var(--mobile-keyboard-room) + var(--mobile-sheet-float));
    width: 100%;
    max-width: none;
    max-height: var(--mobile-sheet-room);
    height: auto;
    margin: 0;
    translate: none;
    transform: none;
    border-radius: 24px 24px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--mobile-sheet-bottom);
  }

  /* Writing in a sheet: it takes the whole height above the keyboard, so the
     text being typed has room. Its anchor and cap already clear the editor's
     keyboard strip through the keyboard tokens. */
  /* `:focus-within`, not the editor's own focus: tapping the sheet's send
     button moves the focus to it, and the sheet must not shrink under the
     finger before the tap lands. */
  .mobile-bottom-sheet[data-slot="sheet-content"]:has(.ProseMirror):focus-within,
  [data-slot="alert-dialog-content"]:has(.ProseMirror):focus-within {
    height: var(--mobile-sheet-room);
  }

  .mobile-bottom-sheet[data-slot="sheet-content"] {
    padding-top: 8px;
    border: 0;
    background: var(--card);
  }
  .mobile-bottom-sheet [data-calendar] { width: 100%; }
  .mobile-bottom-sheet [data-calendar] :is(.rdp-weekday, .rdp-day) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .mobile-bottom-sheet [data-calendar] :is(.rdp-day, button[data-day]) { height: 44px; }
  .mobile-bottom-sheet [data-calendar] button[data-day] { width: 100%; }
  .mobile-bottom-sheet [data-calendar] :is(.rdp-button_previous, .rdp-button_next) { width: 44px; height: 44px; }
  .mobile-bottom-sheet [data-calendar] .rdp-month_caption { height: 44px; }
  .mobile-bottom-sheet :is([data-slot="dialog-header"], [data-slot="sheet-header"]),
  .mobile-bottom-sheet > [data-slot="sheet-title"]:not(.sr-only) {
    min-height: 44px;
    justify-content: center;
    padding-right: 44px;
  }
  .mobile-bottom-sheet > [data-slot="sheet-title"]:not(.sr-only) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
  }
  .mobile-bottom-sheet [data-mobile-sheet-header] {
    min-height: 44px;
    padding-right: 60px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .mobile-bottom-sheet :is([data-mobile-sheet-close], [data-slot="sheet-close"], [data-slot="side-panel-close"]) {
    position: absolute;
    z-index: 30;
    width: 44px;
    height: 44px;
    min-width: 44px;
    top: 8px;
    right: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--muted-foreground);
    background: transparent;
  }
  .mobile-bottom-sheet :is([data-mobile-sheet-header], [data-mobile-sheet-toolbar], [data-slot="dialog-header"], [data-slot="sheet-header"], [data-slot="side-panel-header"]) button {
    min-height: 44px;
    min-width: 44px;
  }
  .mobile-bottom-sheet [data-mobile-sheet-header-actions] { margin: 0; gap: 8px; flex-shrink: 0; }
  .mobile-bottom-sheet [data-mobile-sheet-toolbar] { gap: 8px; }
  /* Icon buttons in a pane header or a sheet are aimed with a thumb: they
     grow to 40px, their icon to 20px. `min-*` so a button that is already
     larger (a sheet's 44px close) keeps its size. */
  :is(.app-content-header, .mobile-bottom-sheet) :is([data-size="icon-sm"], [data-size="icon"]) {
    min-width: 40px;
    min-height: 40px;
  }
  :is(.app-content-header, .mobile-bottom-sheet) :is([data-size="icon-sm"], [data-size="icon"]) > svg {
    width: 20px;
    height: 20px;
  }
  /* A split button's chevron is one of those icon buttons: its action grows
     with it, or the chevron stood taller than the button it opens. */
  :is(.app-content-header, .mobile-bottom-sheet) [data-slot="split-button"] > * {
    min-height: 40px;
  }
  .mobile-assistant-sheet .app-content-header > div { padding-right: 60px; }
  .mobile-assistant-sheet .app-content-header button { min-height: 44px; min-width: 44px; }
  [data-property-row] { min-height: 52px; }
  /* A checkbox is a button too, but it keeps its box: its touch area is its
     own wider `::after` (components/ui/checkbox.tsx). */
  [data-property-row] :is(button, a[role="button"]):not([role="checkbox"]) { min-height: 44px; min-width: 44px; justify-content: flex-end; }
  [data-bulk-issue-actions] button { min-height: 44px; min-width: 44px; }
  /* No mobile-only blur on the scrims: every modal layer shares the one
     `--overlay-scrim` tint, on a phone as on a desktop (MIN-931). */
  .mobile-bottom-sheet [data-mobile-sheet-close-wrapper] { display: contents; }
  .mobile-bottom-sheet [data-mobile-sheet-close-legacy] { display: none; }
  .mobile-bottom-sheet [data-mobile-sheet-toolbar] { top: 8px; right: 60px; min-height: 44px; }
  [data-mobile-sidebar-workspace] { background: var(--sidebar); }
  .mobile-sidebar-reveal :is([data-sidebar-navigation-item], [data-sidebar-filter-result], [data-navigation-href], [data-sidebar-back]) { min-height: 44px; }
  .mobile-sidebar-reveal [data-sidebar-filter-result] { min-width: 44px; }
  .mobile-sidebar-reveal :is([data-mobile-collection-navigation], [data-sidebar-browse-collection]) button { min-height: 44px; }
  .mobile-sidebar-reveal [class~="group/project"] button { min-height: 44px; min-width: 44px; opacity: 1; pointer-events: auto; }
  .mobile-sidebar-reveal :is([data-sidebar-footer], [data-sidebar-project-context], .secondary-sidebar-header) button { min-height: 44px; min-width: 44px; }
  .mobile-sidebar-reveal [data-sidebar-page-row] button { min-height: 44px; min-width: 44px; }
  .mobile-sidebar-reveal [data-sidebar-page-row-actions] { opacity: 1; }
  .mobile-sidebar-reveal .sidebar-brand-row button { min-height: 44px; }
  .mobile-sidebar-reveal [data-sidebar-footer] {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .mobile-sidebar-reveal [data-mobile-sheet-scroll] > div { touch-action: pan-y; }
  .mobile-sidebar-reveal [data-mobile-sidebar] { touch-action: pan-y; }
  .mobile-sidebar-reveal [data-scroll-fade] { --card: var(--sidebar); }
  .mobile-sidebar-reveal [data-mobile-sheet-scroll] { --card: var(--sidebar); }
  .mobile-sidebar-reveal {
    position: absolute;
    inset: 0 auto auto 0;
    height: var(--mobile-viewport-height, 100dvh);
    /* The sidebar is glued to the left edge: in landscape the notch (or the
       rounded corner of an unfolded screen) sits there and covered the start
       of every row, the New issue button among them (MIN-841). The footer
       clears the bottom inset itself. */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    z-index: 0;
    touch-action: pan-y;
    overflow: hidden;
    transform-origin: center;
    transform: scale(calc(0.94 + var(--mobile-sidebar-progress, 0) * 0.06));
    opacity: calc(0.65 + var(--mobile-sidebar-progress, 0) * 0.35);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }
  .mobile-sidebar-reveal[data-mobile-sidebar-dragging="true"] { transition: none; }
  .app-shell[data-mobile-sidebar-surface] {
    position: relative;
    z-index: 1;
    transform: translate3d(var(--mobile-sidebar-offset, 0px), 0, 0);
    background: var(--background);
    overflow: hidden;
    border-radius: var(--mobile-sidebar-radius, 0px) 0 0 var(--mobile-sidebar-radius, 0px);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: pan-y pinch-zoom;
  }
  &:has([data-mobile-sidebar-surface]) { overscroll-behavior-x: none; }
  .app-shell[data-mobile-sidebar-open="true"] { box-shadow: -8px 0 32px rgb(0 0 0 / 0.08); }
  .app-shell[data-mobile-sidebar-dragging="true"] { transition: none; }
  [data-mobile-sidebar-dismiss] {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 2;
    width: auto;
    border: 0;
    padding: 0;
    background: transparent;
    touch-action: pan-y;
  }
  @media (prefers-reduced-motion: reduce) {
    .app-shell[data-mobile-sidebar-surface] { transition: none; }
    .mobile-sidebar-reveal { transform: none; opacity: 1; transition: none; }
  }
  .mobile-bottom-sheet :is([data-slot="side-panel-header"], [data-slot="side-panel-footer"]) {
    border: 0;
    padding: 8px 16px;
  }
  .mobile-bottom-sheet [data-slot="side-panel-header"] { padding-right: 60px; }
  .mobile-bottom-sheet [data-slot="side-panel-header"] { min-height: 44px; align-items: center; padding-top: 0; }
  .mobile-bottom-sheet :is([cmdk-separator], [data-slot="separator"], hr) { display: none; }
  .mobile-bottom-sheet :is([cmdk-root], [data-slot="command"]) {
    background: var(--card);
    border-radius: 0;
    padding: 0;
  }
  .mobile-bottom-sheet :is([data-slot="dialog-footer"], [data-slot="side-panel-footer"]),
  [data-slot="alert-dialog-footer"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 0;
  }
  .mobile-bottom-sheet :is([data-slot="dialog-footer"], [data-slot="side-panel-footer"]) > :last-child:only-child,
  [data-slot="alert-dialog-footer"] > :last-child:only-child {
    grid-column: 1 / -1;
  }
  .mobile-bottom-sheet [data-sheet-auxiliary-action] { grid-column: 1 / -1; }
  .mobile-bottom-sheet :is([data-slot="dialog-footer"], [data-slot="side-panel-footer"]) > button,
  [data-slot="alert-dialog-footer"] > button {
    min-height: 44px;
    height: auto;
    min-width: 0;
    width: 100%;
    white-space: normal;
    margin: 0;
  }
  [data-slot="alert-dialog-footer"]:has(> :nth-child(3)) > :last-child { grid-column: 1 / -1; }
  [data-slot="alert-dialog-footer"] > * { order: 0; min-width: 0; }
  [data-slot="alert-dialog-cancel"] { border: 0; background: transparent; box-shadow: none; }
  [data-slot="alert-dialog-content"] {
    border: 0;
    padding: 16px;
    translate: 0 0 !important;
  }
  [data-slot="alert-dialog-header"] { text-align: left; place-items: start; }
  .mobile-bottom-sheet [data-mobile-sheet-actions] {
    position: sticky;
    bottom: 0;
    flex-direction: row-reverse;
    gap: 8px;
    padding-block: 16px 0;
    background: var(--card);
  }
  .mobile-bottom-sheet [data-mobile-sheet-actions] > button {
    flex: 1;
    min-height: 44px;
    height: auto;
  }
  .mobile-bottom-sheet [data-mobile-sheet-actions]::before {
    content: "";
    position: absolute;
    inset: -16px 0 auto;
    height: 16px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--card));
  }
  .mobile-picker-sheet[data-slot="sheet-content"] {
    max-height: min(75dvh, calc(var(--mobile-visible-height) - 1rem - var(--mobile-sheet-float)));
    overflow: hidden;
    padding: 52px 16px var(--mobile-sheet-bottom);
  }
  .mobile-picker-sheet:has([data-sheet-search], [data-slot="command-input-wrapper"])[data-slot="sheet-content"] {
    padding-top: 8px;
  }
  .mobile-picker-sheet > .mobile-picker-title {
    position: absolute;
    inset: 8px 60px auto 16px;
  }
  .mobile-picker-sheet:has([data-sheet-search], [data-slot="command-input-wrapper"]) > .mobile-picker-title {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mobile-bottom-sheet :is([data-sheet-note], [data-sheet-section]) { border: 0; }
  .mobile-picker-sheet :is([data-sheet-search], [data-slot="command-input-wrapper"]) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 44px 0 0;
    flex-shrink: 0;
    border: 0;
  }
  .mobile-picker-sheet [data-slot="input-group"] {
    flex: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .mobile-picker-sheet [cmdk-root] {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .mobile-picker-sheet [cmdk-list] {
    min-height: 0;
    max-height: min(50dvh, calc(var(--mobile-visible-height) - 7rem - var(--mobile-sheet-float)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-picker-sheet [cmdk-item] {
    min-height: 44px;
  }
  .mobile-assistant-sheet[data-slot="sheet-content"] {
    height: var(--mobile-sheet-room);
    overflow: hidden;
    transition: none;
    border: 0;
  }
  .mobile-assistant-sheet > div {
    min-height: 0;
  }
  .mobile-assistant-sheet [data-mobile-sheet-close]:not([data-slot="sheet-close"]) { display: none; }
  .mobile-command-palette[data-slot="sheet-content"] {
    height: min(85dvh, calc(var(--mobile-visible-height) - 1rem - var(--mobile-sheet-float)));
    padding: 8px 0 var(--mobile-sheet-bottom);
    gap: 0;
    overflow: hidden;
    --cp-bg: var(--card);
  }
  [data-mobile-navigation] {
    bottom: var(--mobile-keyboard-inset, 0px);
  }
  /* Typing in the workspace itself (a composer, a page): the shell shrinks to
     the visible height, so what sits at its bottom rises above the keyboard
     without the document scrolling (lib/use-mobile-layout.ts pins it). A field
     in a sheet leaves the shell alone: the background stays still behind it
     (MIN-870). */
  &[data-mobile-keyboard="shell"] :is(.app-workspace, .app-workspace .app-shell) {
    height: var(--mobile-visible-height);
  }
  /* What makes room for the keyboard moves with it: the hook announces the
     keyboard as soon as a field takes the focus, and these follow it over
     its animation instead of jumping once Safari reports it. Only while it
     opens or closes: a keyboard changing size while open (a suggestion bar)
     is followed at once, not over 380 ms. */
  &[data-mobile-keyboard-moving] :is(
    .app-workspace,
    :is(.mobile-bottom-sheet, .mobile-assistant-sheet)[data-slot="sheet-content"],
    [data-slot="alert-dialog-content"],
    [data-mobile-editor-toolbar]
  ),
  &[data-mobile-keyboard-moving] body::after {
    transition-property: bottom, height, max-height;
    transition-duration: var(--mobile-keyboard-duration);
    transition-timing-function: var(--mobile-keyboard-ease);
  }
  /* A docked comment composer gives its room to the field being typed in,
     and comes back with the keyboard down. */
  &[data-mobile-keyboard] [data-keyboard-dock]:not(:focus-within) {
    display: none;
  }
  /* The one in use sits right above the keyboard: no home indicator to clear. */
  &[data-mobile-keyboard] [data-keyboard-dock] {
    padding-bottom: 0.5rem;
  }
  /* The navigation pill hides while typing (components/mobile-navigation.tsx):
     its reserve under the content goes back to the field. */
  &[data-mobile-keyboard="shell"] {
    --mobile-nav-clearance: 0px;
  }
  /* Between a sheet and the keyboard, iOS leaves its form bar floating on
     a transparent band, and the editor's strip floats with margins: show the
     sheet there, not the page behind it. Above every sheet and its overlay,
     under the strip (z-80). For as long as a sheet is open, not only while
     one of its fields types: the keyboard closing or reopening under it
     uncovered the page too. */
  &[data-mobile-surface] body::after {
    content: "";
    position: fixed;
    inset: auto 0 0;
    z-index: 79;
    height: var(--mobile-keyboard-room);
    background: var(--card);
    pointer-events: none;
  }
  /* Writing brings the keyboard up: the bottom navigation steps aside for the
     text (components/mobile-navigation.tsx tracks the focused field), and for
     the editor's keyboard toolbar (components/editor/mobile-editor-toolbar.tsx). */
  &[data-mobile-toolbar-open] [data-mobile-navigation],
  [data-mobile-navigation][data-typing] {
    display: none;
  }
  .app-content-header > div {
    width: 100%;
    min-width: 0;
  }
}

:root[data-app-layout="mobile"] {
  .mobile-side-panel-sheet[data-slot="sheet-content"] {
    height: var(--mobile-sheet-room);
    overflow: hidden;
    padding-bottom: var(--mobile-sheet-safe-bottom);
  }
  .mobile-side-panel-sheet [data-slot="side-panel-body"] {
    min-height: 0;
    overscroll-behavior: contain;
  }
}

:root[data-app-layout="mobile"] {
  .mobile-inbox-sheet[data-slot="sheet-content"] {
    height: min(85dvh, calc(var(--mobile-visible-height) - 1rem - var(--mobile-sheet-float)));
    max-height: calc(var(--mobile-visible-height) - 1rem - var(--mobile-sheet-float));
    padding-top: 3rem;
  }
  .mobile-inbox-sheet .divide-y > :not(:last-child) { border-bottom-width: 0; }
}

.creation-field-label { display: none; }
.creation-title { display: block; }

:root[data-app-layout="mobile"] {
  .creation-sheet[data-slot="sheet-content"] {
    height: min(92dvh, calc(var(--mobile-visible-height) - 1rem - var(--mobile-sheet-float)));
    padding: 8px 1rem var(--mobile-sheet-bottom);
    gap: 1rem;
    overflow: hidden;
  }
  .creation-form {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .creation-form-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0 2px 1rem;
  }
  .creation-field-label {
    display: block;
    margin: 1rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
  }
  .creation-title, .creation-description {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  .creation-description { min-height: 6rem; }
  .creation-description .ProseMirror { font-size: 1rem; }
  .creation-title:focus, .creation-description:focus-within { border-color: var(--ring); }
  .creation-properties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .creation-property {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem 0.5rem 0;
  }
  .creation-property > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding-inline: 0;
    justify-content: flex-start;
    overflow: hidden;
  }
  .creation-property > button span:not(.sr-only) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .creation-form-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0.5rem;
    border-top: 0;
    gap: 0.5rem;
  }
  .creation-form-footer > button, .creation-submit button {
    min-height: 44px;
    min-width: 44px;
  }
  .creation-submit { width: 100%; }
  .creation-submit > :not(.creation-dictation), .creation-submit button[type="submit"] { flex: 1; }
  .creation-submit > .creation-dictation { flex: none; }
}

:root[data-app-layout="mobile"] {
  .creation-property > button,
  .creation-property > button:hover,
  .creation-property > button:focus-visible,
  .creation-property > button[aria-expanded=true] {
    background-color: transparent;
  }
  .creation-property:focus-within { border-color: var(--ring); }
  .creation-property > button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
  .creation-smart-fill {
    grid-column: 1 / -1;
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
  }
}

/* A bottom sheet on a wide screen (MIN-841). The mobile layout also serves an
   unfolded phone, a tablet in portrait and a phone in landscape
   (lib/app-layout.ts), where a sheet spanning the whole width reads as a slab.
   Like the sheets of iPadOS, it stays a bottom sheet — anchored at the
   bottom, sliding up, never a centered dialog — but floats: a width that
   follows the screen up to a reading measure, side gutters that also clear
   the landscape notch, a gap above the home indicator and four rounded
   corners. Below 640 px, a phone in portrait keeps its full-width sheet.

   One rule for every bottom sheet: they all go through `MobileSheetContent`
   (components/ui/mobile-sheet.tsx) or carry one of the two other selectors.
   The vaul drawers of components/ui/dialog.tsx and side-panel.tsx only exist
   under 480 px, so they never reach this width. */
@media (min-width: 640px) {
  :root[data-app-layout="mobile"] {
    --mobile-sheet-float: max(0.75rem, env(safe-area-inset-bottom));
    --mobile-sheet-safe-bottom: 0px;

    :is(.mobile-bottom-sheet, .mobile-assistant-sheet)[data-slot="sheet-content"],
    [data-slot="alert-dialog-content"] {
      width: min(100% - 2 * max(1rem, env(safe-area-inset-left), env(safe-area-inset-right)), 40rem);
      margin-inline: auto;
      border-radius: 24px;
    }
  }
}

/* Single-column boards use persistent pagination instead of a scrollbar. */
@media (width < 640px) {
  .mobile-kanban-scroller { scrollbar-width: none; }
  .mobile-kanban-scroller::-webkit-scrollbar { display: none; }
}

/* Keep the article readable beside the documentation help conversation. */
.documentation-numo-panel {
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  will-change: transform;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 300ms;
}

.documentation-numo-panel[data-state="open"] {
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition-delay: 0s;
}

@starting-style {
  .documentation-numo-panel[data-state="open"] {
    transform: translate3d(100%, 0, 0);
  }
}

:root[data-app-layout="mobile"] .documentation-numo-sheet[data-slot="sheet-content"] {
  height: min(85dvh, calc(var(--mobile-visible-height) - 1rem - var(--mobile-sheet-float)));
  overflow: hidden;
  padding: 0;
}

@media (min-width: 1024px) {
  html[data-app-layout="desktop"] [data-documentation-contents] {
    transition: opacity 150ms ease, visibility 0s;
  }
  html[data-app-layout="desktop"] [data-documentation-numo-open="true"] [data-documentation-main] { padding-right: 24rem; }
  html[data-app-layout="desktop"] [data-documentation-numo-open="true"] [data-documentation-contents] {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s, 150ms;
  }
  html[data-app-layout="desktop"] [data-documentation-numo-open="true"] [data-documentation-main] > div { padding-left: 1.5rem; padding-right: 1.5rem; }
  html[data-app-layout="desktop"] [data-documentation-numo-open="true"] [data-documentation-mobile-contents] { right: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  .documentation-numo-panel,
  html[data-app-layout="desktop"] [data-documentation-contents] {
    transition: none;
  }
  .documentation-numo-panel { will-change: auto; }
  .documentation-numo-sheet[data-slot="sheet-content"] { animation: none; transition: none; }
  @starting-style {
    .documentation-numo-panel[data-state="open"] { transform: translate3d(0, 0, 0); }
  }
}

@keyframes mobile-navigation-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}
.mobile-navigation-progress > div { animation: mobile-navigation-progress 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .mobile-navigation-progress > div { animation: none; width: 100%; }
}

/* ─── Placeholder tabs while the first tab list loads ─────────────────────────────
   A soft band sweeps left to right across muted tab shapes in the top bar,
   in the reading direction like `text-shimmer`. Reduced motion keeps the
   shapes still. */
.app-tab-skeleton {
  background: linear-gradient(90deg,
    var(--sidebar-accent) 0%,
    color-mix(in oklab, var(--sidebar-accent), var(--sidebar-foreground) 8%) 50%,
    var(--sidebar-accent) 100%);
  background-size: 300% 100%;
  animation: app-tab-skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes app-tab-skeleton-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-tab-skeleton { animation: none; }
}

/* ─── Collaborators' carets and selections (MIN-688) ──────────────────────────────
   Drawn by components/pages/page-collaboration.ts (body decorations) and
   components/pages/page-title-carets.tsx (title overlay). `--collab-color` is the
   collaborator's stable hue; the label keeps white text on it, which the palette
   in page-collaboration.ts is chosen to keep legible in both themes. The caret
   takes no width in the line, so a remote caret never reflows the text. */
.page-collab-caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1.2em;
  margin: 0 -1px;
  vertical-align: text-bottom;
  border-left: 2px solid var(--collab-color);
  pointer-events: none;
  user-select: none;
}
.page-collab-caret.absolute {
  position: absolute;
  margin: 0;
}
.page-collab-caret-label {
  position: absolute;
  bottom: 100%;
  left: -2px;
  z-index: 10;
  padding: 1px 5px;
  border-radius: 4px 4px 4px 0;
  background: var(--collab-color);
  color: #fff;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.4;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-collab-caret-label:empty {
  display: none;
}
.page-collab-selection {
  background-color: color-mix(in oklab, var(--collab-color) 22%, transparent);
}
.dark .page-collab-selection {
  background-color: color-mix(in oklab, var(--collab-color) 35%, transparent);
}

/* ─── Selection boxes (block selection, node selection, atoms) ────────────
   Everything a selection holds as a whole wears one look on every editor
   surface (components/editor/block-selection.ts): the text selection's own
   color (`--selection-block`, app/tokens.css) with slightly rounded corners,
   so selected blocks read as blocks rather than as highlighted text.

   - A block of a block selection (`.is-block-selected`), a block in a node
     selection, and a code block or media a text selection covers whole get
     an overlay painted OVER the block: a code block's or a callout's own
     background, or an image, cannot hide it. The text highlight under it
     goes, so the two never stack.
   - An inline atom (an equation, a mention) or a whole inline-code run in a
     text selection (`.is-inline-selected`), and a selected inline equation,
     get an inline rounded background.

   The box reaches OUTSIDE the block by `--block-selection-x` and `-y`, so
   the text has room inside it without moving: an overlay adds no
   indentation. The vertical reach stays under half the 8px between two
   paragraphs, so two selected blocks still read as two. Every block gets
   the same small corners, a block drawn as a card (a code block, a callout)
   included: the box frames it rather than echoing its own corners. */
:root {
  --block-selection-x: 0.5rem;
  --block-selection-y: 0.1875rem;
  --block-selection-radius: 0.3125rem;
}
.ProseMirror .is-block-selected,
.ProseMirror .ProseMirror-selectednode:not(span) {
  position: relative;
  outline: none;
}
.ProseMirror .is-block-selected::after,
.ProseMirror .ProseMirror-selectednode:not(span)::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--block-selection-y)) calc(-1 * var(--block-selection-x));
  border-radius: var(--block-selection-radius);
  background-color: var(--selection-block);
  pointer-events: none;
}
/* A list item's marker hangs in the list's indent: the box takes it in. */
.ProseMirror :is(ul:not([data-type="taskList"]), ol) > li.is-block-selected::after {
  left: calc(-1.25rem - var(--block-selection-x));
}
/* A divider is one line tall, and the browser clips its children: the box
   reaches above and below the line. */
.ProseMirror hr:is(.is-block-selected, .ProseMirror-selectednode) {
  overflow: visible;
}
.ProseMirror hr:is(.is-block-selected, .ProseMirror-selectednode)::after {
  inset: -0.375rem calc(-1 * var(--block-selection-x));
}
.ProseMirror .is-block-selected ::selection,
.ProseMirror .is-block-selected::selection,
.ProseMirror .is-inline-selected ::selection,
.ProseMirror .is-inline-selected::selection,
.ProseMirror.has-block-selection ::selection {
  background-color: transparent;
}
.ProseMirror.has-block-selection {
  caret-color: transparent;
}
.ProseMirror .is-inline-selected,
.ProseMirror span.ProseMirror-selectednode {
  border-radius: 0.25rem;
  background-color: var(--selection-block);
  outline: none;
}
/* An inline code's box is its element, padding included; the decoration
   only wraps its text. */
.ProseMirror code:has(.is-inline-selected) {
  background-image: linear-gradient(var(--selection-block), var(--selection-block));
}
.ProseMirror code .is-inline-selected,
.ProseMirror .is-inline-selected:has([style*="--mention-chip"]) {
  background-color: transparent;
}
/* Inside a selected block, only the block's box is painted. */
.ProseMirror .is-block-selected :is(.is-block-selected, .ProseMirror-selectednode)::after {
  content: none;
}
.ProseMirror .is-block-selected :is(.is-inline-selected, span.ProseMirror-selectednode),
.ProseMirror .is-block-selected code:has(.is-inline-selected) {
  background-color: transparent;
  background-image: none;
}
.ProseMirror .is-block-selected .mention-selected [style*="--mention-chip"] {
  background-image: none;
}

/* ─── Mentions inside a selection (MIN-734) ────────────────────────────────
   A mention pill is an atom: the browser does not paint it as selected text,
   so a selection seemed to skip it. The editor marks every pill the
   selection covers (`mention-selected`, components/markdown-mention.tsx), and
   the chip inside (the element carrying its tone) is overlaid with the
   selection color, over its own background. */
.mention-selected [style*="--mention-chip"] {
  background-image: linear-gradient(var(--selection-block), var(--selection-block));
}

/* A drag keeps its grabbing cursor over everything it crosses
   (components/drag-cursor.tsx). */
html[data-dragging],
html[data-dragging] * {
  cursor: grabbing !important;
}