index.css

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@source "./templates/**/*.tpl";
@source "./src/**/*";

.meta-pills-field {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}

.meta-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  padding: 0.1875rem;
  border: 1px solid #ded5c6;
  border-radius: 0.625rem;
  background: #fff;
}

.meta-pill {
  flex: 1 0 auto;
  border: 0;
  border-radius: 0.4375rem;
  padding: 0.4375rem 1rem;
  background: transparent;
  color: #736653;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

.meta-pill:hover:not([aria-disabled="true"]) { background: #f5f3ef; }
.meta-pill[aria-checked="true"] { background: var(--meta-pill-background, #ede9fe); color: var(--meta-pill-text, #5b35f5); }
.meta-pill[aria-checked="true"]:hover:not([aria-disabled="true"]) { background: var(--meta-pill-background, #e5ddfe); }
.meta-pill:focus-visible { outline: 2px solid #6d4aff; outline-offset: 1px; }
.meta-pill[aria-disabled="true"] { cursor: default; }
.meta-pills[aria-busy="true"] { opacity: 0.65; }

/* Tailwind v4 keeps automatic source detection switched on even when the
   stylesheet names explicit @source directives, so the two lines above add to
   the scan rather than define it: every non-gitignored file in the checkout is
   read for class names. Prose is not exempt. Writing the word "ordinal" in an
   ordinary sentence in docs/todo.md is what puts an `.ordinal` rule in the
   shipped stylesheet, which makes a plan document a build input and is why a
   fresh build of this file stopped reproducing the committed artifact.

   The first exclusion is the general rule, because prose does not stay in a
   docs folder. It also lives inside Go trees: the go:embed'd CLI help under
   cmd, the MRQL design documents under mrql, and a README in each of idlock,
   benchmarks and models. A glob per prose folder has to be extended by whoever
   writes the next design document, and nothing would tell them to.

   The trees named after it are the ones whose prose is not .md, and they are
   excluded whole: e2e's .ts specs, the .txt and .html evidence under tasks, the
   site sources under docs-site, docs' generated .html report and the script
   that writes it, and .claude's settings and seed script. skills holds only .md
   today and is named anyway, so a generated asset landing there does not
   quietly become a build input.

   Every glob was measured, by diffing the class list built with and without it
   against a reference stylesheet built with detection off and only the trees
   that genuinely author class attributes named: the .tpl templates, src, every
   .go file, the plugin Lua and the preset JSON under server/template_presets.
   That reference is 867 classes and every one of them survives, while the
   exclusions together remove 114 classes; three of those are declared back
   below, which leaves the shipped build at 874. Do not add one you have not
   measured that way, because an over-broad exclusion deletes a rule silently
   and the page that needed it simply renders wrong. Grep is not that
   measurement: `text-stone-50` is a substring of `text-stone-500` and `ordinal`
   of `ordinal_position`, and a comment naming a class the file no longer emits
   reads to grep as a use. All three occur here. scripts/css-scan-test.sh runs
   all three measurements: prose that reaches the stylesheet, authored classes
   that no longer do, and documented classes that no longer do.

   e2e is excluded whole rather than by extension because a .ts spec is prose
   where it counts. `w-[18px]` reached the stylesheet only from a comment
   recording a button's pre-fix classes, and `[role="option"]:visible` is a
   Playwright selector Tailwind read as an arbitrary variant; both were already
   dead for anyone building without e2e checked out.

   One constraint on what can be written below: `@source not` cannot override an
   explicit `@source`, so an exclusion overlapping either line at the top is a
   silent no-op. `@source not "./templates/**"` leaves the build at its full 985
   classes. That is a rule about overlap and not about breadth. The .md
   exclusion overlaps neither line and fires like any other, cutting 102 of
   those 114 on its own once the three below are back, and none of the 867. It
   cannot be written out in this comment, because the glob contains the sequence
   that ends one.

   What looks like the fix and is not: `@import "tailwindcss" source(none);`
   switches detection off entirely and drops 41 of those 867 classes, because
   the explicit list is still incomplete: Go string literals, the plugin Lua and
   the preset JSON are named nowhere, and detection is what reaches those today.

   It dropped 70 until the src line above was widened. The other 29 were src's
   own, and they were reachable only by detection: the line named `.js` while
   the tree held 95 `.ts` files, four of which author every one of those 29,
   being the schema editor's form mode, display mode and display renderers, and
   the meta-shortcode web component. The glob is now the one the
   reference stylesheet uses for src, so the shipped list and the set no
   exclusion may cut into cannot disagree about that tree. Widening it changes
   no output today, because detection already reached the same files; what it
   removes is the silence. An `@source not` overlapping src would have been a
   no-op against the .js line and taken all 95 .ts files with it, and
   source(none) took them without a word.

   Left in the scan deliberately: public/dist, the committed Vite bundle. It
   contributes four junk tokens (@container, container!, list-item, resize!) and
   no used class, but node_modules is gitignored and therefore unscanned, so the
   bundle is the only path by which a bundled dependency's own class names could
   reach Tailwind. scripts stays for a different reason: it looks like a tree of
   shell and is not one, because seed-edge-cases.sh writes a CustomHeader made of
   real markup, and `bg-blue-50` reaches the stylesheet from that heredoc and
   from nowhere else. .worktrees needs no entry at all; .gitignore already keeps
   detection out of it.

   Declared back: the three classes on the @source inline line. A CustomHeader,
   CustomSidebar, CustomSummary or CustomAvatar body lives in the database and
   renders under this stylesheet, and docs-site publishes those bodies as
   copy-paste examples, so a class an example spells is a class an operator
   pastes into a category and expects to work. bg-gray-300 is the background of
   the CustomAvatar placeholder circle, h-32 the height of the [mrql]
   photo-gallery card, and text-yellow-500 the span the plugin rating shortcode
   returns. Each reached the stylesheet only from docs-site, and docs-site ships
   in every checkout, so unlike the e2e pair above these worked for everyone
   until the exclusion removed them. Declaring them is the way back rather than
   dropping the exclusion, because Tailwind can exclude a file but cannot scan
   only the fenced blocks inside it, and the fenced blocks are the half of
   docs-site worth reading for class names. Nothing else here can see this kind
   of loss: the reference stylesheet names only trees the application itself
   renders from, so a documented class is invisible to it. The
   documented-classes-survive check in css-scan-test.sh is what says when this
   line needs a fourth entry. */
@source not "./**/*.md";
@source not "./docs/**";
@source not "./docs-site/**";
@source not "./e2e/**";
@source not "./tasks/**";
@source not "./.claude/**";
@source not "./skills/**";
@source inline("bg-gray-300 h-32 text-yellow-500");
@theme {
  --font-sans: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* Fix forms plugin styles overridden by preflight reset */
@layer base {
  input[type='text'],
  input[type='email'],
  input[type='url'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='search'],
  input[type='tel'],
  input[type='time'],
  input[type='week'],
  input:not([type]),
  textarea,
  select {
    border-width: 1px;
    border-style: solid;
    border-color: #e7e5e4;
    border-radius: 0.375rem;
    background-color: #fff;
    padding: 0.5rem 0.75rem;
  }

  input[type='checkbox'],
  input[type='radio'] {
    border-width: 1px;
    border-style: solid;
    border-color: #e7e5e4;
  }

  select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2378716c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

}

/* Reduce left padding on deeply nested schema form containers to prevent
   content from becoming too narrow at 3+ levels of nesting. */
@layer components {
  /* MRQL expressions can be richer than the list sidebar. When that happens,
     make the inert state unmistakable for controls and link-like quick tags. */
  form[aria-label^='Filter '][aria-disabled='true']::before {
    content: 'Disabled by the current MRQL filter';
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d6d3d1;
    border-radius: 0.375rem;
    background: #f5f5f4;
    color: #78716c;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
  }

  form[aria-label^='Filter '][aria-disabled='true'] .sidebar-group {
    opacity: 0.48;
    filter: grayscale(0.8);
  }

  form[aria-label^='Filter '][aria-disabled='true'] :is(input, select, textarea) {
    border-color: #d6d3d1 !important;
    background-color: #f5f5f4 !important;
    color: #a8a29e !important;
    box-shadow: none !important;
  }

  form[aria-label^='Filter '][aria-disabled='true']
    :is(input, select, textarea, button, a, label, [role='combobox']) {
    cursor: not-allowed !important;
  }

  form[aria-label^='Filter '][aria-disabled='true'] [data-filter-tag-name] {
    opacity: 0.55;
    filter: grayscale(1);
  }

  .schema-nesting .schema-nesting {
    padding-left: 0.5rem;
  }
  .schema-nesting .schema-nesting .schema-nesting {
    padding-left: 0.25rem;
  }

  /* Stack extra property key/value vertically at depth 3+ */
  .schema-nesting .schema-nesting .schema-nesting .schema-extra-prop {
    flex-direction: column;
  }
  .schema-nesting .schema-nesting .schema-nesting .schema-extra-prop > .schema-extra-key {
    width: 100%;
  }
}

/* A segmented radio that cannot act on the current pair. `disabled` would take
   the button out of the tab order and break the group's roving tabindex, so the
   refusal is aria-disabled and this is what says so visually. */
.compare-seg-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Matches .compare-seg-btn[aria-disabled] above, for the toggle that sits beside
   the segmented groups rather than inside one. */
.compare-swap-btn-sm[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The in-flow version strip and toolbar share the viewport with the media stage. */
[data-lightbox-media] img,
[data-lightbox-media] object,
[data-lightbox-media] video {
  max-height: min(90vh, 100cqh);
}