/* app.css is only for rules without a Tailwind or Basecoat equivalent. Prefer
   template utilities or a Basecoat component; see https://basecoatui.com/components/item/. */

/* Let tooltip bubbles escape clipped badges. */
[data-tooltip] {
  overflow: visible;
}

/* Allow prose tooltips to wrap and keep them normal-weight. */
[data-tooltip]::before {
  white-space: normal;
  width: max-content;
  max-width: 16rem;
  font-weight: normal;
}

/* Keep field fragments below the content-panel edge. */
:target {
  scroll-margin-top: 1rem;
}

/* Match the hover state for facet-filter.js keyboard highlighting. */
[data-facet-option].active {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Match Basecoat's alert icon sizing for the Lucide mask span. */
.alert > .icon {
  width: 1rem;
  height: 1rem;
  translate: 0 0.125rem;
}

/* CEL editor overlay and token colours; the JS keeps the two layers synchronized. */
.cel-editor {
  position: relative;
  width: 100%;
}
.cel-editor > .cel-pre,
.cel-editor > .cel-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
}
/* Geist Mono draws != as one struck glyph; CEL reads its operators char by char. */
pre[data-cel],
.cel-editor > .cel-pre,
.cel-editor > .cel-input {
  font-variant-ligatures: none;
}
.cel-editor > .cel-pre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--cel-ident);
  background: var(--background);
}
.cel-editor > .cel-input {
  position: relative;
  display: block;
  min-height: 5rem;
  overflow: auto;
  resize: vertical;
  border-color: var(--input);
  color: transparent;
  background: transparent;
  caret-color: var(--foreground);
  -webkit-text-fill-color: transparent;
}
.cel-editor > .cel-input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
}
.cel-editor > .cel-input[aria-invalid="true"] {
  border-color: var(--destructive);
}

/* Token colours for editable and read-only CEL blocks. */
.cel-tok {
  color: var(--cel-ident);
}
.cel-str {
  color: var(--cel-str);
}
.cel-num {
  color: var(--cel-num);
}
.cel-kw {
  color: var(--cel-kw);
}
.cel-fn {
  color: var(--cel-fn);
}
.cel-ident {
  color: var(--cel-ident);
}
.cel-punct {
  color: var(--cel-punct);
}

/* Size Lucide mask spans to match Basecoat sidebar icons. */
.sidebar nav li > a > .icon {
  width: 1rem;
  height: 1rem;
}

/* SVG masks use currentColor, so they follow the active theme. Force alpha
   masking: an external SVG's black/currentColor strokes must stay opaque rather
   than be treated as zero-luminance mask pixels. .icon is the existing
   Lucide/brand hook; .svg-icon is available to application markup. */
.icon,
.svg-icon {
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  mask-mode: alpha;
}

/* Keep the ordinary text-sized icon default, but never override a caller's
   Tailwind size utility. Brand marks, for example, are size-9 tiles. */
.icon:not([class*="size-"]),
.svg-icon:not([class*="size-"]) {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* Underline content links without affecting buttons, badges, items, or tabs. */
:where(main) a:not(.btn, .badge, .item, [role="tab"]) {
  text-decoration-line: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
:where(main) a:not(.btn, .badge, .item, [role="tab"]):not(:hover, :focus) {
  text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
}

/* Facet combobox adjustments for the list-page filter UI. */

/* Reset/clear icons in the facet trigger. */
.facet-combo > button[aria-haspopup="listbox"] .facet-plus,
.facet-combo [data-clear] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  width: auto;
  height: auto;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
/* Dim the clear icon until interaction. */
.facet-combo [data-clear] {
  opacity: 0.7;
}
.facet-combo [data-clear]:hover,
.facet-combo [data-clear]:focus-visible {
  opacity: 1;
}

/* Align the facet search icon and input with option rows. */
.facet-combo .input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline-start: 0.75rem;
}
.facet-combo .input-group > .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}
.facet-combo .input-group > input[role="combobox"] {
  flex: 1 1 auto;
  padding-inline-start: 0;
}

/* Put facet checkboxes on the left and remove Basecoat's right-side check. */
.facet-combo [role="option"] {
  gap: 0.5rem;
  padding-inline-end: 0.75rem;
}
.facet-combo [role="option"][aria-selected="true"] {
  background-image: none;
}
.facet-combo [role="option"] > input.input[type="checkbox"] {
  pointer-events: none;
  flex-shrink: 0;
}

/* Keep the command palette backdrop dim but unblurred. */
.command-dialog::backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}